:root { --bg: #f6f7f9; --surface: #fff; --text: #16191d; --muted: #5d6673; --border: #dde1e6; --accent: #1f5fd1; --accent-text: #fff; --err: #b42318; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111317; --surface: #181b20; --text: #e7e9ec; --muted: #9aa3ae; --border: #2d323a; --accent: #5b8ef0; --accent-text: #0b1220; --err: #ff8a80; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 16px; }
.login { width: min(340px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px; display: grid; gap: 10px; }
h1 { margin: 0 0 8px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
label { color: var(--muted); font-size: 13px; }
input { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
button { font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-text); border: 0; border-radius: 6px; padding: 9px; cursor: pointer; margin-top: 6px; }
.err { color: var(--err); margin: 0; font-size: 13px; }