/* Shared theme tokens. Without JavaScript the device preference still applies. */
:root { color-scheme: light dark; --theme-page: #f7f8fa; --theme-panel: #fff; --theme-raised: #f4f6f8; --theme-ink: #162033; --theme-muted: #596678; --theme-line: #dce2ea; --theme-link: #3047b8; --theme-header: rgba(255,255,255,.95); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --theme-page: #0e1521; --theme-panel: #172131; --theme-raised: #202e42; --theme-ink: #e9eef8; --theme-muted: #b4c0d2; --theme-line: #3d506a; --theme-link: #a7b7ff; --theme-header: rgba(14,21,33,.96); --theme-positive: #a0e4c3; --theme-positive-bg: #183b31; --theme-danger: #ffb6b6; --theme-danger-bg: #45252f; --theme-warning: #ffd598; --theme-warning-bg: #443422; --theme-active: #29355a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --theme-page: #0e1521; --theme-panel: #172131; --theme-raised: #202e42; --theme-ink: #e9eef8; --theme-muted: #b4c0d2; --theme-line: #3d506a; --theme-link: #a7b7ff; --theme-header: rgba(14,21,33,.96); --theme-positive: #a0e4c3; --theme-positive-bg: #183b31; --theme-danger: #ffb6b6; --theme-danger-bg: #45252f; --theme-warning: #ffd598; --theme-warning-bg: #443422; --theme-active: #29355a; }
}
body { --ink: var(--theme-ink); --muted: var(--theme-muted); --line: var(--theme-line); --paper: var(--theme-panel); --surface: var(--theme-panel); --surface-soft: var(--theme-raised); --soft: var(--theme-raised); --mint-soft: var(--theme-positive-bg, #e9f9f3); color: var(--theme-ink); background: var(--theme-page); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: .45rem; min-width: 86px; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--theme-line); border-radius: 100px; color: var(--theme-ink); background: var(--theme-panel); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.theme-toggle[hidden], .theme-toggle .theme-sun, .theme-toggle[data-dark="true"] .theme-moon { display: none; }
.theme-toggle[data-dark="true"] .theme-sun { display: block; }
.theme-toggle:hover { background: var(--theme-raised); }
.theme-toggle:focus-visible { outline: 3px solid var(--theme-link); outline-offset: 3px; }
.header-inner, .topbar { flex-wrap: wrap; }
.header-inner > .theme-toggle, .topbar > .theme-toggle { margin-inline-start: auto; }
.header-inner > .account-nav, .topbar > .top-actions { margin-inline-start: auto; }
.app-header { background: var(--theme-header); border-color: var(--theme-line); }
.app-brand, .brand, .field label { color: var(--theme-ink); }
.account-nav a, .nav-button, .admin-navigation a { color: var(--theme-muted); }
.account-nav .nav-cta { color: #fff; }
:is(.panel, .security-card, .security-confirm, .plan-option, .subscription-facts div, .metric-card, .link-card, .auth-card) { background: var(--theme-panel); border-color: var(--theme-line); }
:is(.field input, .field select, .field textarea, .input, .url-input, .search-field input) { color: var(--theme-ink); background: var(--theme-panel); border-color: var(--theme-line); }
input::placeholder, textarea::placeholder { color: var(--theme-muted); opacity: .85; }
:is(.button-secondary, .button-quiet, .btn-secondary, .btn-ghost) { color: var(--theme-ink); background: var(--theme-panel); border-color: var(--theme-line); }
:is(.button-secondary, .button-quiet, .btn-secondary, .btn-ghost):hover { color: var(--theme-ink); background: var(--theme-raised); }
:is(.button-danger, .flash-error, .service-notice-danger, .status-suspended, .metric-change.negative) { color: var(--theme-danger, #8a2929); background: var(--theme-danger-bg, #fff0f0); }
:is(.flash-success, .status-live, .security-badge-on, .form-note, .metric-change.positive, .alternate-route) { color: var(--theme-positive, #19624e); background: var(--theme-positive-bg, #eaf7f0); }
:is(.status-pending, .alternate-route-paused) { color: var(--theme-warning, #7b4c18); background: var(--theme-warning-bg, #fff6e8); }
:is(.service-notice, .flash-info, .analytics-upgrade-note, .security-feedback:not(:empty)) { color: var(--theme-link); background: var(--theme-active, #eef1ff); border-color: var(--theme-line); }
.stripe-readiness { color: var(--theme-link) !important; background: var(--theme-active, #eef1ff); border-color: var(--theme-line); }
:is(.security-badge-blue, .admin-navigation a[aria-current="page"], .admin-navigation a:hover, .security-page .account-nav a[href="/account"], .pricing-page .account-nav a[href="/pricing"]) { color: var(--theme-link); background: var(--theme-active, #eef1ff); }
:is(.edit-panel, .empty-state, thead th, .security-method-icon, .security-key-manage, .security-badge-neutral, .metric-change.neutral) { color: var(--theme-muted); background: var(--theme-raised); border-color: var(--theme-line); }
:is(tbody td, .plan-option ul, .link-destination, .link-meta, .security-key-meta, .security-list small) { color: var(--theme-muted); }
:is(.back-link, .table-action, .text-button, .link-controls a, .quota-grant-form summary, .quota-revoke summary, .auth-secondary a, .security-shell summary, .eyebrow) { color: var(--theme-link); }
.security-page { background: var(--theme-page); }
.security-shell { --security-muted: var(--theme-muted); }
:is(.security-heading-icon, .security-method-icon-blue) { color: var(--theme-link); background: var(--theme-active, #eef1ff); border-color: var(--theme-line); }
:is(.security-summary, .security-overview) { background: var(--theme-positive-bg, #edf8f2); border-color: var(--theme-line); }
:is(.security-method-count, .security-method-count strong, .security-method-status dt, .security-backup-note p) { color: var(--theme-positive, #49685e); }
.pricing-page { --pricing-muted: var(--theme-muted); --pricing-green: var(--theme-positive, #176649); background: var(--theme-page); }
.pricing-plan { background: var(--theme-panel); border-color: var(--theme-line); }
.pricing-plan-pro { background: var(--theme-positive-bg, #f2faf6); border-color: var(--theme-line); }
:is(.pricing-hero .eyebrow, .pricing-billing-note, .pricing-plan-note, .pricing-limit-note, .pricing-assurances, .pricing-section-heading .eyebrow, .pricing-table td, .pricing-table th, .pricing-comparison-note, .pricing-faq summary, .pricing-bottom-cta p) { color: var(--theme-muted); }
:is(.pricing-hero h1 span, .pricing-limit-note a, .pricing-section-heading a, .pricing-faq a) { color: var(--theme-link); }
:is(.pricing-plan-features li, .pricing-plan-features li strong, .pricing-billing-note > span:first-child) { color: var(--theme-ink); }
:is(.pricing-toggle, .pricing-plan-symbol, .pricing-table-group th, .pricing-bottom-cta) { color: var(--theme-ink); background: var(--theme-raised); border-color: var(--theme-line); }
.pricing-toggle a { color: var(--theme-muted); }
.pricing-toggle a[aria-current="page"] { color: #fff; background: #3047b8; }
:is(.pricing-toggle a > span, .pricing-plan-tag, .pricing-plan-pro .pricing-plan-symbol) { color: var(--theme-positive, #175238); background: var(--theme-positive-bg, #dcefe4); }
:is(.pricing-included, .pricing-assurances svg, .pricing-plan-pro .pricing-plan-features li > svg) { color: var(--theme-positive, #176649); }
.pricing-table :is(th, td), .pricing-plan-features, .pricing-faq details { border-color: var(--theme-line); }
.pricing-table thead th, .pricing-table tbody td:nth-child(3) { background: var(--theme-panel); }
.pricing-table thead th:first-child { background: transparent; }
/* The shortener has its own layout, but uses the same palette and control. */
body:has(> .shell) { background: var(--theme-page); }
.shell :is(.card, .result-card, .challenge-panel, .output, .short-output, .utility-card, .ready-copy) { color: var(--theme-ink); background: var(--theme-panel); border-color: var(--theme-line); }
.shell :is(.top-actions a, .top-actions button) { color: var(--theme-ink); }
.shell :is(.brand-copy span, .card p, .result-card-subtitle, .site-footer) { color: var(--theme-muted); }
.shell :is(.challenge-panel.is-locked, .ready-summary, .result-meta, .link-preview) { background: var(--theme-raised); border-color: var(--theme-line); }
.shell :is(.status-ok, .success-title) { color: var(--theme-positive, #19624e); }
.shell .btn-primary { color: #fff; background: #3047b8; }
.shell a:not(.btn):not(.brand):not(.top-actions a) { color: var(--theme-link); }
@media (max-width: 720px) {
  .header-inner { gap: .5rem; padding-block: .65rem; }
  .header-inner > .account-nav { order: 3; width: 100%; }
  .topbar > .top-actions { width: 100%; justify-content: flex-end; }
  .theme-toggle { min-width: 82px; }
}
@media (forced-colors: active) { .theme-toggle { border-color: ButtonText; } }
/* Specific component states retain contrast in both palettes. */
.auth-page { background: var(--theme-page); }
.app-brand em, .auth-switch a, .short-link, .chart-data summary, .analytics-table tbody th a, .password-toggle { color: var(--theme-link); }
.shell .top-actions .btn-primary { color: #fff; }
.shell footer strong { color: var(--theme-ink); }
.pricing-page .pricing-table thead th:first-child, .pricing-page .pricing-table thead th > span, .pricing-comparison-note > span, .pricing-bottom-cta > div:last-child > p { color: var(--theme-muted); }
.pricing-page .pricing-table tr > :nth-child(3), .pricing-page .pricing-table .pricing-table-group > th { background: var(--theme-raised); color: var(--theme-muted); }
.pricing-faq .pricing-section-heading a, .pricing-faq-list details > p a, .pricing-footnote-link { color: var(--theme-link); }
.security-overview { color: var(--theme-positive, #193e35); }
.security-overview-icon { color: var(--theme-positive, #25624e); background: var(--theme-positive-bg, #e0f0e8); border-color: var(--theme-line); }
.security-empty, .security-key-form, .security-key-icon { color: var(--theme-muted); background: var(--theme-raised); border-color: var(--theme-line); }
.security-disclosure summary:hover, .security-password-toggle:hover { color: var(--theme-link); background: var(--theme-raised); }
.security-password-toggle, .security-key-form .text-button { color: var(--theme-link); }
.stat-grid { background: var(--theme-panel); }
.plan-pill, .step-badge { background: var(--theme-active, #eef1ff); border-color: var(--theme-line); }
.plan-pill strong, .step-badge { color: var(--theme-link); }
.plan-pill span, .plan-pill small, .check-field { color: var(--theme-muted); }
.benefit-list li::before { color: var(--theme-positive, #146f51); }
.header-inner { flex-direction: row; align-items: center; }
.header-inner > .account-nav { min-width: 0; }