:root{
  --ink: #121212; --muted: #6b6b6b; --paper: #f5f6f6; --surface: #ffffff;
  --line: #e3e3e3; --line-strong: #cacaca;
  --brand: #edc160; --brand-ink: #15110a;
  --bad: #c0362c; --bad-soft: #fbe8e6;
  --good: #1a8754; --good-soft: #e5f4ec;
  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink: #f2f1ee; --muted: #8f8d89; --paper: #0b0b0b; --surface: #161616;
    --line: #2a2a2a; --line-strong: #3c3c3c;
    --bad: #ea6b60; --bad-soft: #2c1917;
    --good: #3ac281; --good-soft: #10261c;
  }
}
*{ box-sizing: border-box; }
body{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--paper); color: var(--ink); font-family: var(--font-body); padding: 24px; }
.auth-wrap{ width:100%; max-width:380px; }
.auth-card{ background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px 28px; }
.brand-mark{ width:40px; height:40px; border-radius:10px; background:#000; color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
h1{ font-family: var(--font-display); font-size:21px; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em; }
.sub{ color: var(--muted); font-size:13px; margin:0 0 20px; }
label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin:14px 0 5px; }
input{ width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--paper); color:var(--ink); font-size:14px; font-family:inherit; }
input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(237,193,96,0.25); }
.btn-primary{ margin-top:22px; width:100%; padding:11px; border:none; border-radius:8px; background:var(--brand); color:var(--brand-ink); font-size:14px; font-weight:700; font-family:var(--font-body); cursor:pointer; }
.btn-primary:hover{ opacity:.9; }
.auth-error{ background:var(--bad-soft); color:var(--bad); padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:6px; }
.auth-ok{ background:var(--good-soft); color:var(--good); padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:6px; }
.back-link{ display:inline-block; margin-top:18px; font-size:13px; color:var(--muted); text-decoration:none; }
.back-link:hover{ color:var(--ink); }