:root { color-scheme: light; font-family: var(--tc-font); }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: var(--tc-bg); color: var(--tc-text); }
:focus-visible { outline: 3px solid var(--tc-primary); outline-offset: 3px; }
.auth-shell { display: grid; min-height: 100dvh; place-items: center; padding: var(--tc-s-4); }
.auth-panel { width: min(380px, 100%); padding: var(--tc-s-6); border: 1px solid var(--tc-border); border-radius: var(--tc-r-lg); background: var(--tc-card); box-shadow: var(--tc-shadow-card); }
.auth-brand { margin: 0; font: var(--tc-type-panel); }
.auth-copy { margin: var(--tc-s-1) 0 var(--tc-s-5); color: var(--tc-muted); font: var(--tc-type-body); }
.auth-form { display: grid; gap: var(--tc-s-4); }
.auth-field { display: grid; gap: var(--tc-s-1); }
.auth-field span { color: var(--tc-muted); font: var(--tc-type-label); }
.auth-field input { width: 100%; min-height: var(--tc-touch); padding: var(--tc-s-2) var(--tc-s-3); border: 1px solid var(--tc-control-border); border-radius: var(--tc-r-md); background: var(--tc-card); color: var(--tc-text); font: var(--tc-type-body); }
.auth-submit { min-height: var(--tc-touch); padding: var(--tc-s-2) var(--tc-s-4); border: 1px solid var(--tc-primary); border-radius: var(--tc-r-md); background: var(--tc-primary); color: var(--tc-card); font: var(--tc-type-control); cursor: pointer; }
.auth-submit:hover { background: var(--tc-primary-hover); }
.auth-submit:disabled { cursor: not-allowed; opacity: .55; }
.auth-alert { margin-bottom: var(--tc-s-4); padding: var(--tc-s-3); border: 1px solid color-mix(in srgb, var(--tc-urgent) 30%, var(--tc-card)); border-radius: var(--tc-r-md); background: var(--tc-danger-bg); color: var(--tc-urgent); font: var(--tc-type-body); }
.auth-time { margin-top: var(--tc-s-3); color: var(--tc-faint); font: var(--tc-type-meta); text-align: right; }