:root{--bg:#0b0c0f;--fg:#e8eaf0;--muted:#a3a7b3;--card:#12141a;--border:#1f2330;--primary:#4da3ff;--primary-fg:#061223;--danger:#ff5c5c;--ok:#45d483;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.35);--space:12px;--space-lg:20px;--input:#12161f;--input-border:#2b3142}
html[data-theme="light"]{--bg:#f6f7fb;--fg:#1c2230;--muted:#5b6275;--card:#fff;--border:#e6e9f2;--primary:#2152ff;--primary-fg:#fff;--danger:#d23b3b;--ok:#129a58;--input:#fff;--input-border:#d9deea}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:16px system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;background:var(--bg);color:var(--fg)}
.container{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;width:100%;max-width:420px}
.card--auth .logo{width:60px;height:60px;margin-bottom:var(--space-lg)}
h1{margin:0 0 var(--space-lg) 0;font-size:1.25rem}.text-muted{color:var(--muted);margin:0 0 var(--space-lg) 0}
label{display:block;margin:10px 0 6px 0}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--input-border);background:var(--input);color:var(--fg);outline:none}
.input:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.row{display:flex;align-items:center;justify-content:space-between;margin:12px 0 16px}.checkbox{display:inline-flex;gap:8px;align-items:center;color:var(--muted)}
.link{color:var(--primary);text-decoration:none}.link:hover{text-decoration:underline}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer}
.btn--primary{background:var(--primary);color:var(--primary-fg);border-color:transparent}.btn--ghost{background:transparent}.btn:disabled{opacity:.6;cursor:not-allowed}
.btn__spinner{width:18px;height:18px;border-radius:50%;border:3px solid color-mix(in srgb,var(--primary) 40%,transparent);border-top-color:var(--primary-fg);display:none;animation:spin 1s linear infinite}
.is-loading .btn__text{opacity:0}.is-loading .btn__spinner{display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
.message{min-height:20px;margin:6px 0 14px;font-size:.95rem}.message--error{color:var(--danger)}.message--success{color:var(--ok)}
.footer{margin-top:20px;color:var(--muted);font-size:.9rem;text-align:center}
.topbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:960px;margin:0 auto 20px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.brand{display:flex;align-items:center;gap:10px}.logo{width:28px;height:28px}.user{display:flex;align-items:center;gap:14px}