/* Shared appearance uses the account preference rendered before first paint. */
:root {
    color-scheme: light dark;
    --bg: light-dark(#faf9f6, #191423);
    --surface: light-dark(#fff, #241d32);
    --text: light-dark(#221b38, #f6f3fb);
    --muted: light-dark(#696273, #b9b1c7);
    --border: light-dark(#e5e0ed, #40354f);
    --accent: light-dark(#7357f5, #b1a1ff);
    --accent-ink: light-dark(#5d3fce, #b1a1ff);
    --accent-on: light-dark(#fff, #221b38);
    --accent-soft: light-dark(#f0ecff, #352848);
    --green: light-dark(#42785a, #93d7b4);
    --green-bg: light-dark(#eaf5ef, #263d32);
    --amber: light-dark(#98651e, #edc483);
    --amber-bg: light-dark(#fff3df, #463823);
    --red: light-dark(#a64242, #f1a4a4);
    --red-bg: light-dark(#fff0ee, #452c2d);
    --auth-bg: var(--bg);
    --auth-surface: var(--surface);
    --auth-text: var(--text);
    --auth-muted: var(--muted);
    --auth-border: var(--border);
    --auth-accent: var(--accent);
    --auth-accent-ink: var(--accent-ink);
    --auth-control-border: light-dark(#93889f, #8c7b9b);
    --auth-accent-soft: var(--accent-soft);
}
:root[data-theme-preference="light"] { color-scheme: light; }
:root[data-theme-preference="dark"] { color-scheme: dark; }
.theme-form { margin: 0; }
.theme-toggle button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; min-height: 32px; margin: 0; padding: 6px;
    border: 0; border-radius: 5px; background: transparent; color: var(--muted);
}
.theme-toggle button:hover { background: var(--bg); }
.theme-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.theme-toggle button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.appearance-settings { max-width: 620px; }
.appearance-settings form { max-width: 420px; }
:root .brand-wordmark-light { display: none; }
:root[data-theme-preference="dark"] .brand-wordmark-default { display: none; }
:root[data-theme-preference="dark"] .brand-wordmark-light { display: block; }
@media (prefers-color-scheme: dark) {
    :root[data-theme-preference="system"] .brand-wordmark-default { display: none; }
    :root[data-theme-preference="system"] .brand-wordmark-light { display: block; }
}
.billing-public, .legal-public { color-scheme: inherit; background: var(--bg); color: var(--text); }
.billing-public .card, .legal-document, .legal-skip, .billing-skip { background: var(--surface); border-color: var(--border); }
.billing-faq details, .billing-public-footer, .legal-operator, .legal-integrity, .legal-document-list article { border-color: var(--border); }
.billing-public .billing-button { background: var(--accent); color: var(--accent-on) !important; }
.legal-public a, .legal-eyebrow { color: var(--accent-ink); }
.legal-public .legal-brand { color: var(--text) !important; }
.legal-version { color: var(--muted); }
:root .auth-button:not(.secondary), :root .auth-card form:not(.auth-form) > button:not(.secondary):not(.password-action) { color: var(--accent-on); }
:root .auth-button:not(.secondary):hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.auth-message.error, .auth-card > .error:not(.auth-message) { color: var(--red); background: var(--red-bg); border-color: var(--red); }
.auth-message.success { color: var(--green); background: var(--green-bg); border-color: var(--green); }
@media (max-width: 580px), (pointer: coarse) { .theme-toggle button { width: 44px; min-height: 44px; } }