:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#f4f5f7; --card:#fff; --accent:#0b5cad; --err:#b00020; --ok:#0a7c3a; --muted:#666; }
@media (prefers-color-scheme: dark){ :root{ --fg:#e8e8e8; --bg:#15171a; --card:#1e2126; --muted:#9aa0a6; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding:24px; }
.card { width:100%; max-width:380px; background:var(--card); border-radius:14px; padding:28px 24px;
  box-shadow:0 6px 30px rgba(0,0,0,.12); }
h1 { margin:0 0 4px; font-size:1.4rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.tabs { display:flex; gap:4px; margin:16px 0; border-bottom:1px solid rgba(128,128,128,.3); }
.tabs button { flex:1; background:none; border:0; padding:10px 6px; cursor:pointer; color:var(--muted);
  border-bottom:2px solid transparent; font-size:.92rem; }
.tabs button[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--accent); font-weight:600; }
.pane { display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; }
input { padding:10px 12px; border:1px solid rgba(128,128,128,.4); border-radius:8px; background:transparent; color:inherit; font:inherit; }
button[type=submit], #otp-send { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:11px 14px; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:progress; }
.row { display:flex; flex-direction:column; gap:12px; }
.msg { margin:14px 0 4px; min-height:1.2em; font-size:.92rem; }
.msg.err { color:var(--err); } .msg.ok { color:var(--ok); }