:root { color-scheme: dark; --canvas:#0b1116; --surface:#121a21; --input:#121f2d; --ink:rgba(255,255,255,.92); --muted:rgba(255,255,255,.62); --quiet:rgba(255,255,255,.42); --line:rgba(255,255,255,.10); --accent:#d4b483; --accent-hover:#e5c594; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; }
body { background:var(--canvas); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.55; }
button, input { font:inherit; }
button { cursor:pointer; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:32px 20px; }
.login-panel { width:min(100%, 480px); padding:32px clamp(24px, 5vw, 48px) 28px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.32); }
.login-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:40px; }
.brand-home { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:6px; }
.brand-home:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.brand-logo { display:block; width:40px; height:40px; object-fit:contain; opacity:.9; }
.language-switch { display:flex; align-items:center; gap:7px; color:var(--quiet); font-size:11px; letter-spacing:.1em; }
.language-switch button { border:0; padding:4px 1px; color:var(--quiet); background:none; font-size:11px; letter-spacing:.1em; }
.language-switch button[aria-pressed="true"] { color:var(--accent); font-weight:700; }
.language-switch button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.surface-kicker { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:14px 0 10px; font-size:clamp(2.2rem, 7vw, 3.25rem); font-weight:650; letter-spacing:-.04em; line-height:1.08; }
.intro { color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 32px; max-width:36ch; }
.auth-form { display:grid; gap:10px; }
.auth-mode { display:flex; gap:28px; margin:0 0 18px; }
.auth-mode__button { border:0; border-bottom:1px solid transparent; padding:6px 0; color:var(--quiet); background:transparent; font:inherit; cursor:pointer; }
.auth-mode__button.is-active { color:var(--accent); border-bottom-color:var(--accent); }
label { color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.02em; }
input { width:100%; min-height:48px; color:var(--ink); background:var(--input); border:1px solid var(--line); border-radius:6px; outline:none; padding:12px 14px; transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,180,131,.14); }
#code { font-size:25px; letter-spacing:.24em; padding-block:9px; }
.turnstile-slot { min-height:0; margin:8px 0 2px; }
.task-action { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; margin-top:4px; padding:12px 4px; border:0; border-top:1px solid var(--line); color:var(--accent); background:transparent; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:color 160ms ease, opacity 160ms ease; }
.task-action > span[aria-hidden="true"] { transition:transform 160ms ease; }
.task-action:hover:not(:disabled) { color:var(--accent-hover); }
.task-action:hover:not(:disabled) > span[aria-hidden="true"] { transform:translateX(4px); }
.task-action:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.task-action:disabled { cursor:wait; opacity:.62; }
.button-loading { display:none; }.button-spinner { display:none; width:14px; height:14px; border:2px solid rgba(212,180,131,.22); border-top-color:var(--accent); border-radius:50%; animation:login-spin 800ms linear infinite; }.is-submitting .button-label, .is-submitting .button-arrow { display:none; }.is-submitting .button-spinner { display:inline-block; }.is-submitting .button-loading { display:inline; }
@keyframes login-spin { to { transform:rotate(360deg); } }
.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 12px; }.destination-line strong { color:var(--ink); font-weight:600; }
.secondary-actions { display:flex; justify-content:space-between; gap:16px; margin-top:8px; }
.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); }.secondary-actions button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.neutral-notice { min-height:21px; color:var(--muted); font-size:13px; line-height:1.45; margin:20px 0 0; }
.legal-note { border-top:1px solid var(--line); margin:28px 0 0; padding-top:16px; color:var(--quiet); }
.legal-section { display:grid; gap:10px; margin-top:4px; }
.legal-option { display:flex; gap:12px; align-items:flex-start; padding:12px; color:var(--ink); border:1px solid var(--line); border-radius:6px; line-height:1.5; cursor:pointer; }
.legal-option input { width:18px; min-height:18px; margin:2px 0 0; padding:0; accent-color:var(--accent); flex:0 0 auto; }
.legal-link { width:fit-content; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.legal-section select { width:100%; min-height:48px; color:var(--ink); background:var(--input); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.field-optional { color:var(--muted); font-weight:400; }
[hidden] { display:none !important; }
@media (max-width:390px) { .login-shell { padding-inline:16px; }.login-panel { padding-inline:20px; }.login-header { margin-bottom:32px; } h1 { font-size:2.2rem; } }