:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh; display: grid; place-items: center;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #0b0c10; color: #e8eaed; padding: 24px;
}
.card {
  width: 100%; max-width: 380px; background: #16181d; border: 1px solid #262a32;
  border-radius: 16px; padding: 28px 26px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
h1 { font-size: 20px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; background: #6ee7a8; transform: rotate(45deg); border-radius: 2px; display: inline-block; flex: none; }
p.sub { margin: 0 0 22px; color: #9aa0a6; font-size: 14px; }
button {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 600; margin-top: 10px;
}
.primary { background: #6ee7a8; color: #07130c; }
.primary:hover { background: #5bd694; }
.ghost { background: transparent; color: #9aa0a6; border: 1px solid #2c313a; font-weight: 500; }
.ghost:hover { color: #e8eaed; border-color: #3a414c; }
input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #2c313a;
  background: #0f1115; color: #e8eaed; font-size: 15px; letter-spacing: .04em;
}
input:focus { outline: 2px solid #6ee7a855; border-color: #6ee7a8; }
.enroll { margin-top: 18px; padding-top: 18px; border-top: 1px solid #262a32; }
.enroll[hidden], [hidden] { display: none; }
label { display: block; font-size: 13px; color: #9aa0a6; margin: 0 0 6px; }
.field-gap { margin-top: 14px; }
.msg { margin-top: 14px; font-size: 14px; min-height: 20px; }
.msg.err { color: #ff7a7a; }
.msg.ok { color: #6ee7a8; }
.muted { color: #6b7178; font-size: 12px; text-align: center; margin-top: 18px; }