:root {
  color-scheme: light dark;
  --bg: #f4f5f7; --surface: #ffffff; --ink: #16181d; --ink-2: #555b66; --line: #d6d9df;
  --accent: #2456c7; --accent-ink: #ffffff; --crit: #b42318; --focus: #2456c7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317; --surface: #1b1e24; --ink: #eceef2; --ink-2: #a5abb6; --line: #343944;
    --accent: #6d97ff; --accent-ink: #0b0d10; --crit: #ff8a7a; --focus: #8fb0ff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.card {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px;
}
h1 { margin: 0 0 4px; font-size: 24px; }
.sub { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; }
.erro { margin: 0 0 16px; color: var(--crit); font-weight: 600; }
form { display: grid; gap: 8px; }
label { font-size: 14px; color: var(--ink-2); }
input {
  font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; min-height: 44px;
}
button {
  margin-top: 8px; min-height: 44px; font: inherit; font-weight: 600; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
}
input:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }