:root { color-scheme:light dark; font-family:"Segoe UI",Arial,sans-serif; --canvas:#f3eee4; --paper:#fffdf8; --ink:#202825; --soft:#626c66; --line:#d8cfc0; --rust:#b55336; --focus:#126d9a; --shadow:0 24px 70px rgba(49,42,33,.14); }
@media (prefers-color-scheme:dark) { :root { --canvas:#171b19; --paper:#202623; --ink:#f1ede4; --soft:#b8c0bb; --line:#3c4540; --rust:#e08a6d; --focus:#63b4df; --shadow:0 28px 80px rgba(0,0,0,.38); } }
* { box-sizing:border-box; } html,body { min-width:320px; min-height:100%; } body { margin:0; background:var(--canvas); color:var(--ink); } button,input { font:inherit; } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.login-shell { min-height:100dvh; padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display:grid; place-items:center; }
.login-card { width:min(430px,100%); padding:28px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow); }
.login-brand { min-height:44px; display:flex; align-items:center; gap:11px; }.login-brand>span:last-child { display:grid; gap:4px; }.login-brand strong { font:700 22px/1 Georgia,serif; letter-spacing:-.03em; }.login-brand small,.kicker { color:var(--rust); font:700 9px/1.2 Consolas,monospace; letter-spacing:.13em; text-transform:uppercase; }
.brand-mark { width:31px; height:31px; padding:5px; border-radius:8px; background:var(--ink); display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:3px; }.brand-mark i { display:block; border-radius:2px; background:var(--paper); }.brand-mark i:nth-child(1){height:45%}.brand-mark i:nth-child(2){height:82%}.brand-mark i:nth-child(3){height:62%}
.login-copy { margin:38px 0 24px; }.login-copy h1 { margin:8px 0 0; font:700 clamp(30px,8vw,42px)/1 Georgia,serif; letter-spacing:-.04em; }
form { display:grid; gap:15px; } form>label:not(.checkbox-line) { display:grid; gap:7px; font-size:13px; font-weight:700; }
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--canvas); color:var(--ink); }
.checkbox-line { min-height:44px; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; }.checkbox-line input[type="checkbox"],.checkbox-line input[type="radio"] { flex:0 0 18px; width:18px; min-width:18px; height:18px; min-height:18px; margin:0; padding:0; accent-color:#3f6957; }
button { min-height:46px; padding:0 15px; border:1px solid var(--line); border-radius:11px; background:var(--canvas); color:var(--ink); cursor:pointer; font-weight:750; } button.primary { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.form-error,.setup-state { padding:12px 14px; border-radius:11px; line-height:1.5; font-size:13px; }.form-error { border:1px solid #c97f72; background:#f3deda; color:#812f28; }.setup-state { border:1px solid var(--line); background:var(--canvas); color:var(--soft); }
details { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); } summary { min-height:44px; display:flex; align-items:center; color:var(--soft); cursor:pointer; font-size:12px; font-weight:700; }.recovery-form { margin-top:12px; }
.passkey-separator { margin:18px 0 10px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:var(--soft); font-size:11px; }.passkey-separator::before,.passkey-separator::after { content:""; height:1px; background:var(--line); }.passkey-button { width:100%; }.passkey-status { min-height:20px; margin:8px 0 0; color:var(--soft); font-size:12px; text-align:center; }
@media (max-width:480px) { .login-card { padding:22px; border-radius:19px; }.login-copy { margin-top:28px; } }