:root { color-scheme: light dark; --bg:#f3f4f6; --card:#fff; --fg:#1f2328; --muted:#6b7280; --line:#d0d7de; --accent:#2563eb; --err-bg:#fde8e8; --err-fg:#9b1c1c; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --card:#181b21; --fg:#e6e8eb; --muted:#8b93a1; --line:#2c313a; --accent:#3b82f6; --err-bg:#3a1d1d; --err-fg:#f3a5a5; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.card { width:min(380px, calc(100vw - 2rem)); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:2rem 1.75rem 1.5rem; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.brand { display:flex; flex-direction:column; align-items:center; gap:.4rem; margin-bottom:1.5rem; color:var(--fg); }
.brand h1 { margin:0; font-size:1.25rem; font-weight:600; }
label { display:block; margin-bottom:1rem; }
label > span { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem; }
input[type=text], input[type=password] { width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; background:transparent; color:inherit; font:inherit; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.row { display:flex; align-items:center; gap:.5rem; }
.row span { margin:0; color:var(--fg); font-size:.9rem; }
button { width:100%; padding:.65rem; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
.alert { background:var(--err-bg); color:var(--err-fg); border-radius:8px; padding:.6rem .8rem; font-size:.9rem; margin-bottom:1rem; }
footer { margin-top:1.25rem; display:flex; justify-content:center; gap:.5rem; font-size:.8rem; color:var(--muted); }
footer a { color:var(--muted); }