:root { color-scheme: light; --navy:#123247; --green:#13786f; --ink:#173249; --muted:#708393; --line:#d9e3e4; --page:#f1f4f2; --gold:#d9b761; --danger:#bd493a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 10%,#eaf3ef,transparent 38%),var(--page); color: var(--ink); font-family: Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,input { font:inherit; }
.auth-card { width:min(440px,100%); padding:26px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 20px 60px rgba(16,48,66,.12); }
.mark { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--gold); color:var(--navy); font-size:30px; }
h1 { margin:15px 0 4px; font-size:24px; }
p { color:var(--muted); font-size:12px; line-height:1.6; }
form { display:grid; gap:13px; margin-top:20px; }
label { display:grid; gap:6px; color:#607586; font-size:11px; font-weight:700; }
input { width:100%; min-height:43px; border:1px solid #d5e0e2; border-radius:8px; padding:9px 10px; color:var(--ink); background:#fff; }
input:focus { outline:3px solid rgba(19,120,111,.14); border-color:var(--green); }
button { min-height:43px; border:0; border-radius:8px; padding:9px 12px; background:var(--green); color:#fff; cursor:pointer; font-weight:800; }
button.secondary { border:1px solid #bdd2d1; background:#fff; color:var(--green); }
button:disabled { opacity:.55; cursor:not-allowed; }
.error { min-height:18px; margin:0; color:var(--danger); }
.hint { margin-top:15px; padding:10px; border-radius:8px; background:#f5f8f7; color:#718493; font-size:10px; line-height:1.6; }
.setup-step[hidden] { display:none; }
.qr { display:block; width:220px; max-width:100%; margin:12px auto; border:1px solid var(--line); border-radius:10px; }
.secret { padding:10px; border:1px dashed #c8b16e; border-radius:7px; background:#fff9e8; color:#6e5821; text-align:center; overflow-wrap:anywhere; font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace; user-select:all; }
.warning { padding:10px; border-left:4px solid #d79b39; background:#fff8e8; color:#715b2f; font-size:10px; line-height:1.6; }
.spinner { display:none; }
.busy .spinner { display:inline; }
@media(max-width:480px){ body{padding:12px}.auth-card{padding:20px;border-radius:13px}h1{font-size:21px} }