:root { color-scheme:dark; --bg:#08090d; --text:#ebedf2; --muted:#a3a8b4; --line:#2a2f3a; --red:#b73a48; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at top left,#26141d,transparent 55%),var(--bg); color:var(--text); font:15px/1.5 "Manrope","Segoe UI",sans-serif; }
.shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(560px,100%); padding:32px; border:1px solid #49232e; border-radius:20px; background:#11141af2; box-shadow:0 18px 80px #0007; }
.hidden { display:none!important; }
.brand-lockup { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.brand-logo { width:68px; height:68px; object-fit:contain; border:1px solid #49232e; border-radius:16px; padding:7px; }
.eyebrow { margin:0 0 6px; color:var(--red); text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
h1 { margin:0; font-family:"Sora",sans-serif; font-size:clamp(22px,4vw,32px); }
.subtitle,small { color:var(--muted); }
.social-links { display:flex; justify-content:center; gap:12px; margin-top:12px; }
a { color:inherit; }
svg { width:22px; height:22px; fill:currentColor; flex-shrink:0; }
.social-links a { display:flex; padding:6px; border:1px solid var(--line); border-radius:8px; }
.stack { display:grid; gap:10px; margin-top:20px; }
input,select,button { font:inherit; color:inherit; border:1px solid var(--line); border-radius:10px; min-height:46px; padding:10px 14px; }
input,select { background:#080b11; width:100%; }
input:focus,select:focus,button:focus-visible,a:focus-visible { outline:2px solid #c64558; outline-offset:2px; }
button { background:#9c293b; font-weight:700; cursor:pointer; }
button:hover { filter:brightness(1.15); }
button:disabled { opacity:.5; cursor:wait; }
.btn-light { background:#181c25; }
.status { margin-top:18px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.status-warn { color:#e1bd73; background:#342a171f; }
.status-err { color:#ffabb5; border-color:#743142; }
.status-ok { color:#89d7b0; border-color:#295b42; }
.discord-login-gate { display:grid; gap:10px; margin-top:16px; }
.discord-login-btn { display:flex; align-items:center; justify-content:center; gap:12px; padding:13px; border-radius:10px; background:#5865f2; text-decoration:none; font-weight:700; }
.login-prefill-help { display:grid; gap:8px; margin-top:16px; color:var(--muted); }
.setup-title { font-size:20px; font-weight:800; margin:0; }
.setup-copy { color:var(--muted); }
.password-field { display:flex; gap:8px; }
.password-toggle { background:#181c25; padding:10px; }
.pin-display { display:flex; justify-content:center; gap:12px; margin:12px 0; }
.pin-display span { display:grid; place-items:center; width:44px; height:48px; border:1px solid var(--line); border-radius:10px; font-size:22px; }
.pin-display .is-filled { border-color:var(--red); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pin-pad button { background:#181c25; }
.pin-actions button { width:100%; }
.discord-profile-picker:not(:empty) { display:grid; gap:10px; margin-top:18px; }
@media(max-width:480px) { .shell { padding:12px; } .login-card { padding:20px; } .brand-logo { width:50px; height:50px; } }