:root {
    color-scheme: light;
    --ink: #24312e;
    --muted: #67736f;
    --accent: #17695c;
    --border: #d9dfdc;
    --surface: #fff;
    --radius: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; min-height: 100vh; background: #f4f5f4; color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid #79b5a4; outline-offset: 3px; }
.auth-card { width: 100%; max-width: 420px; margin: 5vh auto; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 24px; }
.tabs a { padding: 8px 0; text-decoration: none; color: var(--muted); }
.tabs [aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--accent); font-weight: 600; }
h1 { margin: 0 0 24px; font-size: 23px; }
form > label:not(.checkbox-label) { display: block; margin: 16px 0 6px; font-weight: 550; font-size: 13px; }
input:not([type="checkbox"]) { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; background: var(--surface); color: var(--ink); font: inherit; }
input[aria-invalid="true"] { border-color: #b13d36; }
small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.checkbox-label { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; margin: 20px 0; }
.checkbox-label input { accent-color: var(--accent); margin-top: 3px; }
button { min-height: 44px; width: 100%; border: 0; border-radius: 6px; background: var(--accent); color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #105348; }
.staff-link { display: block; margin-top: 24px; font-size: 12px; text-align: center; }
.errors { padding: 12px; background: #fff1ef; color: #8e302a; border-radius: 6px; font-size: 13px; }
.errors ul { padding-left: 18px; margin: 0; }
@media (max-width: 480px) { body { padding: 16px; } .auth-card { margin: 0 auto; padding: 22px; } }