html, body { background: var(--c-bg); color: var(--c-fg); font-family: var(--font-sans); }
body { background-image: none; }
.login-card, .card, dialog { border-color: var(--c-border); background: var(--c-bg-elevated); color: var(--c-fg); box-shadow: var(--sh-panel); }
.topbar { border-color: var(--c-border); background: color-mix(in oklab, var(--c-bg-elevated) 92%, transparent); }
.brand-mark { border: 0; background: transparent; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark .brand-base { fill: var(--c-primary); }
.brand-mark .brand-glyph { fill: var(--c-primary-fg); }
input, select, textarea, .portal-choice, .endpoint-login-context { border-color: var(--c-border); background: var(--c-surface); color: var(--c-fg); }
.button { border-color: var(--c-border); background: var(--c-surface); color: var(--c-fg); }
.button.primary { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-primary-fg); }
.button.ghost { background: transparent; }
.muted, label, .portal-choice span, .portal-choice-label { color: var(--c-muted); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline-color: var(--c-info); }