:root{color-scheme:light dark;--bg:#f5f5f2;--card:#fff;--text:#1b1c1a;--muted:#696b66;--border:#d9dad5;--accent:#1d9e75;--danger:#b42318}
@media(prefers-color-scheme:dark){:root{--bg:#141513;--card:#20211f;--text:#f3f4ef;--muted:#a2a49d;--border:#3a3c37;--accent:#55c49c;--danger:#ff8b83}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:28px 16px}
.auth-card{width:min(440px,100%);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:0 18px 55px rgba(0,0,0,.08)}
.auth-card.wide{width:min(590px,100%)}
.mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:23px}
.eyebrow{margin:20px 0 7px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--muted)}
h1{font-size:31px;letter-spacing:-.035em;margin:0}
h1 span{color:var(--accent)}
h2{font-size:17px;margin:28px 0 10px}
.lead{color:var(--muted);line-height:1.55;margin:10px 0 24px}
label{display:grid;gap:7px;font-size:13px;font-weight:650;margin:15px 0}
label small,.minor,.security-note{font-weight:400;color:var(--muted)}
input{width:100%;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);padding:12px 13px;font:inherit;font-size:16px}
input:focus{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-color:var(--accent)}
input.code{font-size:25px;letter-spacing:.25em;text-align:center}
button,.button{border:0;border-radius:11px;background:var(--accent);color:#fff;padding:12px 17px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center}
form>button{width:100%;margin-top:8px}
.button.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.error{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);border-radius:10px;padding:11px 12px}
.security-note{font-size:11px;line-height:1.45;margin-top:22px}
.qr{width:236px;min-height:236px;background:#fff;border:12px solid #fff;margin:18px auto;border-radius:10px}
.qr img,.qr canvas{display:block;width:212px!important;height:212px!important}
.secret{word-break:break-all;font-family:ui-monospace,monospace;background:var(--bg);padding:10px;border-radius:8px}
.success{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 9%,transparent);padding:17px;border-radius:13px}
.success p{color:var(--muted)}
pre{columns:2;white-space:pre-wrap;font-size:15px;line-height:1.7}
.sessions{display:grid;gap:9px}
.sessions div{border:1px solid var(--border);border-radius:11px;padding:12px;display:grid;gap:5px}
.sessions small{color:var(--muted)}
.actions{display:flex;gap:10px;margin-top:25px}
.actions form{margin:0}
.actions form button{margin:0;width:auto}
.trust-device{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.35}
.trust-device input{width:auto;margin:2px 0 0;accent-color:var(--accent)}
.trust-device span{display:grid;gap:2px}
.trust-device small{font-size:11px}
@media(max-width:520px){.auth-card{padding:23px 18px;border-radius:16px}
.actions{display:grid}
.actions form button,.actions .button{width:100%}
pre{columns:1}
}
@media print{body{background:#fff}
.actions,.sessions,h2{display:none}
.auth-card{box-shadow:none;border:0}
}