@import url("../css/fonts.css");
:root {
  --bg: #f3f5f8; --surface: #ffffff; --fg: #16202c; --fg-2: #4e5b6b; --fg-3: #7c8794; --hair: #d5dbe3;
  --accent: #1b3a5c; --accent-2: #2d5a8a; --on-accent: #ffffff; --rule: #b7362a; --focus: #2f6fd0;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0e141b; --surface: #161e28; --fg: #e7ecf2; --fg-2: #a9b4c1; --fg-3: #7f8b99; --hair: #2a3644; --accent: #8fb6e0; --accent-2: #6fa0d2; --on-accent: #0b1320; --rule: #ef8a7c; --focus: #8ab4f8; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0e141b; --surface: #161e28; --fg: #e7ecf2; --fg-2: #a9b4c1; --fg-3: #7f8b99; --hair: #2a3644; --accent: #8fb6e0; --accent-2: #6fa0d2; --on-accent: #0b1320; --rule: #ef8a7c; --focus: #8ab4f8; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 17px/1.55 var(--font-body); background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); gap: 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 28px 22px; }
.brand { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.brand-mark { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 26px; font-weight: 700; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 2px 0 4px; line-height: 1.25; text-wrap: balance; }
.muted { color: var(--fg-2); font-size: 0.92rem; margin: 0; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin: 14px 0 5px; }
.hint { font-weight: 400; color: var(--fg-3); font-size: 0.82rem; }
input { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--hair); border-radius: var(--r); background: transparent; color: var(--fg); }
input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
button { width: 100%; margin-top: 20px; font: inherit; font-weight: 600; font-size: 1rem; padding: 0 16px; min-height: 46px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); cursor: pointer; }
button:hover { background: var(--accent-2); }
button:disabled { opacity: 0.6; cursor: default; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.error { color: var(--rule); font-size: 0.92rem; margin: 12px 0 0; }
.switch { margin-top: 18px; text-align: center; }
.switch a { color: var(--accent-2); font-weight: 600; }
.foot { text-align: center; max-width: 420px; font-size: 0.85rem; }