:root { color-scheme: dark; --bg:#0c0d10; --panel:#15171c; --ink:#f1f3f8; --muted:#999fab; --line:#30343d; --accent:#8ba9ff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { min-height:100dvh; margin:0; color:var(--ink); background:var(--bg); }
.auth-header { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 clamp(24px,4vw,64px); border-bottom:1px solid var(--line); }
.auth-header > a:last-child { color:var(--muted); font-size:13px; text-decoration:none; }
.auth-header > a:last-child:hover { color:var(--ink); }
.auth-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; font-family:Georgia,serif; font-size:22px; }
.auth-brand svg { width:28px; height:28px; fill:currentColor; }
.auth-brand .spark { fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; }
.auth-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,520px); min-height:calc(100dvh - 72px); }
.auth-intro { display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,8vw,132px); border-right:1px solid var(--line); background:radial-gradient(circle at 15% 20%,rgba(139,169,255,.1),transparent 32%); }
.eyebrow { margin:0 0 36px; color:var(--accent); font:600 10px/1 ui-monospace,monospace; letter-spacing:.18em; }
.auth-intro h1 { max-width:820px; margin:0; font:400 clamp(46px,6vw,92px)/.98 Georgia,serif; letter-spacing:-.045em; }
.auth-intro > p:not(.eyebrow) { max-width:610px; margin:36px 0 52px; color:var(--muted); font-size:16px; line-height:1.7; }
.auth-principles { display:grid; gap:12px; color:#c8c7c0; font-size:13px; }
.auth-principles span { display:flex; gap:18px; padding-top:12px; border-top:1px solid var(--line); }
.auth-principles b { color:var(--accent); font:500 10px ui-monospace,monospace; }
.auth-panel { align-self:center; width:min(100% - 48px,440px); margin:auto; padding:36px; border:1px solid var(--line); background:var(--panel); box-shadow:0 30px 90px rgba(0,0,0,.3); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:34px; border-bottom:1px solid var(--line); }
.auth-tabs button { padding:0 0 14px; border:0; border-bottom:2px solid transparent; color:var(--muted); background:none; font:600 12px inherit; cursor:pointer; }
.auth-tabs button[aria-selected="true"] { border-color:var(--accent); color:var(--ink); }
#auth-form { display:grid; gap:10px; }
#auth-form label { margin-top:11px; color:#c6c5be; font-size:12px; }
#auth-form input { width:100%; height:50px; padding:0 14px; border:1px solid var(--line); border-radius:0; outline:0; color:var(--ink); background:#0f100f; font:14px inherit; }
#auth-form input:focus { border-color:#777870; box-shadow:0 0 0 1px #777870; }
.submit-button { display:flex; align-items:center; justify-content:space-between; height:52px; margin-top:20px; padding:0 18px; border:0; color:white; background:var(--accent); font:650 13px inherit; cursor:pointer; }
.submit-button:disabled { opacity:.55; cursor:wait; }
.form-error { margin:10px 0 0; color:#ff8f7c; font-size:12px; line-height:1.5; }
.auth-note { margin:22px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
@media (max-width:900px) { .auth-layout { grid-template-columns:1fr; } .auth-intro { min-height:auto; padding:64px 24px; border-right:0; border-bottom:1px solid var(--line); } .auth-intro h1 { font-size:52px; } .auth-panel { margin:52px auto; } }
@media (max-width:520px) { .auth-header { height:62px; padding:0 18px; } .auth-layout { min-height:calc(100dvh - 62px); } .auth-intro { display:none; } .auth-panel { width:calc(100% - 28px); margin:28px auto; padding:26px 20px; } }
.legal-consents { display:grid; gap:10px; margin-top:14px; }
.legal-consents[hidden] { display:none; }
.legal-consents label { display:flex; align-items:flex-start; gap:9px; margin:0; color:var(--muted); font-size:12px; line-height:1.45; cursor:pointer; }
html .signin-page #auth-form .legal-consents input[type="checkbox"] { box-sizing:border-box; flex:none; width:16px; height:16px; margin:1px 0 0; padding:0; border:0; background:none; accent-color:#fff; }
.legal-consents a, .auth-legal a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.auth-legal { margin-top:10px; }
.credentials, .mfa-step, .register-only { display:grid; gap:10px; }
.credentials[hidden], .mfa-step[hidden], .register-only[hidden] { display:none; }
html[data-theme] .signin-page .auth-tabs[hidden], .auth-tabs[hidden] { display:none; }
#mfa-code { font-variant-numeric:tabular-nums; letter-spacing:.12em; }
.security-page .signin-copy { color:var(--muted); font-size:14px; line-height:1.6; }
.security-qr { display:flex; justify-content:center; margin:20px 0 6px; }
.security-qr img { display:block; width:220px; max-width:100%; height:auto; background:#fff; border:8px solid #fff; }
.security-section { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.security-section summary { color:var(--ink); font-size:13.5px; cursor:pointer; }
.security-secret { display:block; margin-top:10px; padding:12px 14px; border:1px solid var(--line); color:var(--ink); font:500 14px/1.6 ui-monospace,monospace; letter-spacing:.06em; overflow-wrap:anywhere; }
.recovery-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; margin:18px 0; padding:16px 16px 16px 34px; border:1px solid var(--line); font:500 14px/1.5 ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.security-actions { display:flex; flex-wrap:wrap; gap:10px; }
.security-secondary { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--line); color:var(--ink); background:none; font-family:inherit; font-size:13px; font-weight:500; line-height:1; text-decoration:none; cursor:pointer; }
.security-page .submit-button { text-decoration:none; }
.security-page .auth-note a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:420px) { .recovery-codes { grid-template-columns:1fr; } }