:root {
  color-scheme: light;
  --canvas: #f0eee8;
  --surface: #fbfaf6;
  --sunken: #f7f5f0;
  --ink: #171b19;
  --muted: #626965;
  --line: #a8ada8;
  --accent: #35607a;
  --accent-ink: #ffffff;
  --error: #9c2f20;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--canvas);
  color: var(--ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101311;
  --surface: #181c1a;
  --sunken: #0c0f0d;
  --ink: #eef1ed;
  --muted: #aeb6b0;
  --line: #697169;
  --accent: #7fb4cf;
  --accent-ink: #101311;
  --error: #ffb4a7;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--canvas); }
::selection { background: var(--accent); color: var(--accent-ink); }
.login-shell { width: min(100% - 32px, 440px); }
.login-card { padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.product-name { margin: 0 0 10px; color: var(--muted); font-size: .75rem; }
h1 { margin: 0; font-size: 2rem; font-weight: 560; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.hint { max-width: 38ch; margin: 16px 0 28px; color: var(--muted); line-height: 1.55; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 8px; color: var(--ink); font-size: .75rem; font-weight: 560; letter-spacing: .035em; }
input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; background: var(--sunken); color: var(--ink); caret-color: var(--accent); font: inherit; font-size: 1rem; }
input:hover { border-color: var(--muted); }
input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
button { width: 100%; min-height: 46px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 650; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .68; }
.error { min-height: 22px; margin: -4px 0 0; color: var(--error); font-size: .75rem; font-weight: 560; line-height: 1.45; overflow-wrap: anywhere; }
.theme-toggle { position: fixed; top: 18px; right: 18px; width: auto; min-height: 40px; padding: 0 12px; display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .75rem; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); filter: none; }
.theme-toggle-icon { width: 14px; height: 14px; display: inline-block; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, transparent 50%, currentColor 50%); }

@media (max-width: 480px) {
  .login-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  input, button { transition: background-color 160ms ease-out, border-color 160ms ease-out, opacity 160ms ease-out; }
}