:root { --bg: #f5f6fa; --card: #ffffff; --fg: #1d2433; --muted: #5a6478; --line: #d5dbe6; --accent: #6965db; --error: #c92a2a; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --card: #232329; --fg: #e3e3e8; --muted: #a0a0ae; --line: #3d3d45; --accent: #a8a5ff; --error: #ff8787; color-scheme: dark; }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--fg); font: 15px system-ui, -apple-system, "Segoe UI", sans-serif; }
form { width: 100%; max-width: 320px; margin: 16px; padding: 28px; box-sizing: border-box; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
h1 { margin: 0 0 20px; font-size: 22px; }
label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
input[type=text], input[type=password] { width: 100%; box-sizing: border-box; margin-bottom: 16px; padding: 9px 10px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 8px; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { width: 100%; padding: 10px; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; }
@media (prefers-color-scheme: dark) { button { color: #121212; } }
.error { margin: -8px 0 16px; font-size: 13px; color: var(--error); }