:root {
  --bg: #f4f6fa; --bg2: #dfe5ef; --card: #ffffff; --ink: #0f1b2d; --muted: #5a6678; --line: #d8dfea;
  --accent: #1f5bff; --accent-ink: #fff; --error: #c53030;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111a2b; --bg2: #090e18; --card: #172236; --ink: #efe9df; --muted: #9aa6b8; --line: #27344c;
    --accent: #3d7bff; --accent-ink: #fff; --error: #f08080;
  }
}
:root[data-theme="dark"] {
  --bg: #111a2b; --bg2: #090e18; --card: #172236; --ink: #efe9df; --muted: #9aa6b8; --line: #27344c;
  --accent: #3d7bff; --accent-ink: #fff; --error: #f08080;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(circle at 50% 30%, var(--bg), var(--bg2)); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(380px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 24px; display: grid; gap: 14px; transition: transform .2s ease;
}
.login-card small { letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.login-card h1 { margin: -6px 0 4px; font: 700 30px/1.1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.02em; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
input {
  font: inherit; color: var(--ink); background: transparent; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
button {
  font: 600 15px system-ui, sans-serif; padding: 12px; margin-top: 4px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); transition: filter .18s ease, box-shadow .18s ease;
}
button:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.error { margin: 0; color: var(--error); font-size: 14px; }
/* Logo is pre-scaled to ~2-3x its display height. */
.logo img { display: block; height: 32px; width: auto; }
.login-card .logo img { height: 40px; margin-bottom: 14px; }