:root {
  --bg:#000; --panel:#222; --line:rgba(255,255,255,.14); --text:#f7f7f8;
  --dim:#a0a0a7; --blue:#7aa2ff; --green:#43d17a; --red:#ff696f;
}
* { box-sizing:border-box; }
html { min-height:100%; color-scheme:dark; }
body {
  min-height:100vh; min-height:100dvh; margin:0; padding:20px;
  display:grid; place-items:center; color:var(--text); background:var(--bg);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(520px 340px at 65% 30%,rgba(83,101,151,.12),transparent 70%);
}
.auth-shell {
  position:relative; width:min(400px,100%); border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(145deg,rgba(122,162,255,.08),transparent 45%),var(--panel);
  box-shadow:0 24px 64px rgba(0,7,25,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-card { padding:24px; }
.auth-heading { display:flex; align-items:center; gap:12px; }
.card-icon {
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border:1px solid rgba(122,162,255,.4); border-radius:10px; color:#a8d4ff;
  background:linear-gradient(145deg,rgba(115,190,255,.2),rgba(67,125,220,.08)); font-size:1.15rem;
}
.step-label { margin:0 0 3px; color:var(--blue); font-size:.62rem; letter-spacing:.1em; }
h1 { margin:0; font-size:1.15rem; line-height:1.25; letter-spacing:-.02em; }
form { display:flex; flex-direction:column; gap:6px; margin-top:20px; }
form.hidden { display:none; }
label { color:var(--dim); font-size:.73rem; }
label:not(:first-child) { margin-top:5px; }
input {
  width:100%; min-width:0; height:40px; border:1px solid var(--line); border-radius:9px; padding:0 11px;
  color:var(--text); background:#181818; font:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(78,154,255,.15); }
input.code { height:48px; text-align:center; font-size:1.4rem; letter-spacing:.3em; padding-left:.3em; font-weight:700; }
button { font:inherit; }
.submit {
  height:40px; margin-top:8px; border:1px solid rgba(193,210,255,.45); border-radius:10px; cursor:pointer;
  color:#fff; background:linear-gradient(180deg,#86aaff,#668de9); font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.submit:hover:not(:disabled) { background:linear-gradient(180deg,#95b5ff,#7499ef); }
.submit:disabled { opacity:.55; cursor:wait; }
.link-btn { border:0; background:none; color:var(--blue); cursor:pointer; padding:7px; font-size:.75rem; }
.message { margin-top:12px; color:var(--dim); font-size:.75rem; overflow-wrap:anywhere; }
.message:empty { display:none; }
.message.ok { color:var(--green); } .message.bad { color:var(--red); }
.security-note {
  display:flex; align-items:center; gap:9px; margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line); color:var(--dim); font-size:.68rem;
}
.shield {
  display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%;
  border:1px solid rgba(67,209,122,.4); color:var(--green); background:rgba(67,209,122,.07);
}
button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media (max-width:480px) {
  body { padding:14px; }
  .auth-card { padding:20px; }
  input { height:44px; font-size:16px; }
  .submit { height:44px; }
}