:root { color-scheme: dark; --ink:#eee; --muted:#a0acb8; --quiet:#7f8b96; --line:rgba(238,238,238,.14); --accent:#d4b483; --accent-hover:#e5c594; --deep:#0f171e; --panel:#1c2a39; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; }
body { background:var(--deep); color:var(--ink); font-family:'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; font-size:1rem; line-height:1.6; }
button, input { font:inherit; }
button { cursor:pointer; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(250px, .8fr) minmax(360px, 560px); gap:clamp(48px, 10vw, 180px); align-items:center; width:min(1240px, calc(100% - 96px)); margin:auto; padding:72px 0; }
.brand-rail { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:4px 0 8px; }
.brand-logo { display:block; width:clamp(48px, 5vw, 72px); height:auto; object-fit:contain; opacity:.9; margin-bottom:24px; }
.wordmark { color:var(--ink); font-family:Georgia, "Times New Roman", serif; font-size:clamp(30px, 3.2vw, 48px); letter-spacing:-.055em; text-decoration:none; }
.wordmark-mark { color:var(--accent); }
.brand-note { color:var(--muted); font-family:Georgia, "Times New Roman", serif; font-size:clamp(26px, 3vw, 45px); line-height:1.08; letter-spacing:-.04em; margin:auto 0 0; }
.brand-rule { width:56px; height:1px; background:var(--accent); opacity:.8; margin-top:34px; }
.login-panel { width:100%; max-width:500px; justify-self:end; padding:clamp(34px, 5vw, 68px) clamp(28px, 5vw, 64px); background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 24px 70px rgba(0,0,0,.2); }
.surface-kicker { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:18px 0 12px; font-size:clamp(2.3rem, 5vw, 4rem); font-weight:650; letter-spacing:-.025em; line-height:1.04; }
.intro { color:var(--muted); font-size:16px; line-height:1.55; margin:0 0 38px; max-width:34ch; }
.auth-form { display:grid; gap:10px; }
label { color:var(--ink); font-size:13px; font-weight:650; }
input { width:100%; color:var(--ink); background:rgba(15,23,30,.42); border:1px solid var(--line); border-radius:2px; outline:none; padding:15px 16px; transition:border-color .18s, box-shadow .18s; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,180,131,.14); }
#code { font-size:28px; letter-spacing:.28em; padding:13px 16px; }
.turnstile-slot { min-height:0; margin:8px 0 2px; }
.primary-button { min-height:52px; margin-top:9px; border:0; border-radius:2px; background:var(--accent); color:#172019; font-weight:750; transition:background-color .18s, opacity .18s; }
.primary-button:hover:not(:disabled) { background:var(--accent-hover); }
.primary-button:focus-visible, .secondary-actions button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.primary-button:disabled { cursor:wait; opacity:.62; }
.button-loading { display:none; }
.is-submitting .button-label { display:none; }.is-submitting .button-loading { display:inline; }
.field-error { color:#efaaa0; min-height:19px; font-size:13px; margin:0; }
.code-help, .destination-line, .legal-note { color:var(--muted); font-size:13px; line-height:1.5; }
.destination-line { margin:0 0 16px; }.destination-line strong { color:var(--ink); font-weight:600; }
.secondary-actions { display:flex; justify-content:space-between; gap:16px; margin-top:9px; }
.secondary-actions button { border:0; padding:4px 0; color:var(--muted); background:none; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.secondary-actions button:hover { color:var(--ink); }
.neutral-notice { min-height:21px; color:var(--muted); font-size:13px; line-height:1.45; margin:22px 0 0; }
.legal-note { border-top:1px solid var(--line); margin:34px 0 0; padding-top:18px; color:var(--quiet); }
[hidden] { display:none !important; }
@media (max-width:760px) { .login-shell { display:block; width:min(100% - 40px, 520px); padding:34px 0 44px; } .brand-rail { min-height:150px; padding:0; } .brand-note { font-size:26px; margin-top:58px; } .brand-rule { margin-top:20px; } .login-panel { padding:34px 24px 28px; border-radius:2px; } h1 { font-size:46px; } .intro { margin-bottom:30px; } }
@media (max-width:390px) { .login-shell { width:calc(100% - 32px); } .login-panel { padding:30px 19px 24px; } h1 { font-size:41px; } .secondary-actions { font-size:12px; } }
@media (min-width:1500px) { .login-shell { width:min(1380px, calc(100% - 160px)); } }