:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: #202421;
  background: #f4f5f4;
  --accent: #244b36;
  --muted: #565e58;
  --control-line: #829087;
  --error: #942b20;
  accent-color: var(--accent);
  scrollbar-color: var(--control-line) transparent;
}
* { box-sizing: border-box; }
::selection { background: #cfe1d3; color: #142d1d; }
body { margin: 0; line-height: 1.5; }
main { width: min(100% - 32px, 448px); margin: clamp(32px, 10vh, 96px) auto 32px; padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px oklch(0 0 0 / 0.06), 0 6px 18px oklch(0 0 0 / 0.03); }
h1 { margin: 0 0 8px; font-size: 1.875rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
p { margin-top: 0; text-wrap: pretty; }
.intro, .hint, footer { color: var(--muted); }
.intro { font-size: 0.9375rem; margin-bottom: 0; }
form { margin-top: 28px; }
label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; }
input, button { font: inherit; }
input[type="password"], input[type="text"] { width: 100%; min-height: 48px; padding: 11px 12px; font-size: 1rem; color: inherit; caret-color: var(--accent); background: #fff; border: 1px solid var(--control-line); border-radius: 6px; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
input:hover:not(:disabled) { border-color: var(--accent); }
input:disabled { background: #eef2ef; color: var(--muted); cursor: not-allowed; }
input:user-invalid, input[aria-invalid="true"] { border-color: var(--error); }
.hint { margin: 8px 0; font-size: 0.8125rem; }
.show-token { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; font-weight: 400; cursor: pointer; }
.show-token input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
button { width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 6px; color: #fff; background: var(--accent); font-size: 0.9375rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.03); transition: scale 120ms ease-out; }
button:hover:not(:disabled) { background: #193b28; }
button:active:not(:disabled) { scale: 0.96; }
button:disabled { color: #526159; background: #e2e8e4; box-shadow: none; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#login-status { margin: 14px 0 0; font-size: 0.875rem; overflow-wrap: anywhere; }
#login-status:empty { display: none; }
#login-status[data-kind="error"], .error { color: var(--error); }
#login-status[data-kind="error"] { padding: 12px; background: #fff4f2; border-radius: 8px; }
footer { border-top: 1px solid #d7ded9; margin-top: 24px; padding-top: 20px; font-size: 0.75rem; line-height: 1.6; }
@media (max-width: 480px) {
  main { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  button:active:not(:disabled) { scale: none; }
}