/* Shared by the public website and the account portal. */
:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --bg-elevated: #fff;
  --bg-subtle: #f0f2f5;
  --bg-sunken: #e9edf2;
  --ink: #1c2028;
  --ink-soft: #515967;
  --ink-faint: #646e7e;
  --ink-inverse: #fff;
  --border: #dfe3e8;
  --border-strong: #87909e;
  --border-faint: #eceef1;
  --brand: #c94a2c;
  --brand-deep: #a43a1f;
  --on-brand: #fff;
  --positive: #217344;
  --danger: #B5294C;
  --success-bg: #EAF6ED;
  --danger-bg: #FDECF1;
  --brand-bg: #fff0eb;
  --accent-surface: var(--accent-bg);
  --accent: #b44126;
  --accent-bg: #fff0eb;
  --money: #087568;
  --money-bg: #f2f8f5;
  --usage: #245cc5;
  --usage-bg: #f3f6fc;
  --models: #7936b5;
  --models-bg: #fff;
  --premium: #865500;
  --premium-bg: #FFF4D9;
  --code-bg: #1c2028;
  --code-ink: #f2f2f0;
  --surface: var(--bg-elevated);
  --subtle: var(--bg-subtle);
  --soft: var(--ink-soft);
  --faint: var(--ink-faint);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --success: var(--positive);

  --chart-track-bg: #f5eafd;

  --control-focus: var(--accent-bg);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414;
  --bg-elevated: #1c1c1c;
  --bg-subtle: #242424;
  --bg-sunken: #101010;
  --ink: #f2f2f0;
  --ink-soft: #c6c6c2;
  --ink-faint: #a0a09b;
  --ink-inverse: #141414;
  --border: #353533;
  --border-strong: #777772;
  --border-faint: #2b2b29;
  --brand: #ff8c6b;
  --brand-deep: #ffb088;
  --on-brand: #301510;
  --positive: #7DDD9E;
  --danger: #FF98AF;
  --success-bg: #193525;
  --danger-bg: #402332;
  --accent-surface: var(--accent-bg);
  --accent: #ff8c6b;
  --accent-bg: #33231e;
  --brand-bg: #33231e;
  --money: #89b9a8;
  --money-bg: #1c1c1c;
  --usage: #83b4ff;
  --usage-bg: #1c1c1c;
  --models: #db9dff;
  --models-bg: #1c1c1c;
  --premium: #F5CB72;
  --premium-bg: #392E17;
  --code-bg: #101010;
  --code-ink: #f2f2f0;
  --claude: #FF927D;
  --claude-deep: #FFAF9F;
  --claude-soft: #4b302e;
  --claude-tint: #30232c;
  --gpt: #63dcb1;
  --gpt-deep: #82e5c6;
  --gpt-soft: #174638;
  --gpt-tint: #102e2d;
  --grok: #c6d8f0;
  --grok-ink: #0b0b0f;
  --grok-soft: #243a54;
  --grok-accent: #fff;
  --gold: #F5CB72;
  --shadow-sm: 0 1px 2px #0003;
  --shadow-md: 0 6px 24px -8px #0005, 0 2px 6px -2px #0003;
  --shadow-lg: 0 24px 60px -20px #0009, 0 8px 20px -10px #0005;
  --shadow-glow: 0 0 0 1px #FF927D30, 0 18px 50px -16px #0005;

  --chart-track-bg: #352241;
}
/* Preserve the operating-system preference when scripting is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #141414;
    --bg-elevated: #1c1c1c;
    --bg-subtle: #242424;
    --bg-sunken: #101010;
    --ink: #f2f2f0;
    --ink-soft: #c6c6c2;
    --ink-faint: #a0a09b;
    --ink-inverse: #141414;
    --border: #353533;
    --border-strong: #777772;
    --border-faint: #2b2b29;
    --brand: #ff8c6b;
    --brand-deep: #ffb088;
    --on-brand: #301510;
    --positive: #7DDD9E;
    --danger: #FF98AF;
    --success-bg: #193525;
    --danger-bg: #402332;
    --accent-surface: var(--accent-bg);
    --accent: #ff8c6b;
    --accent-bg: #33231e;
    --brand-bg: #33231e;
    --money: #89b9a8;
    --money-bg: #1c1c1c;
    --usage: #83b4ff;
    --usage-bg: #1c1c1c;
    --models: #db9dff;
    --models-bg: #1c1c1c;
    --premium: #F5CB72;
    --premium-bg: #392E17;
    --code-bg: #101010;
    --code-ink: #f2f2f0;
    --claude: #FF927D;
    --claude-deep: #FFAF9F;
    --claude-soft: #4b302e;
    --claude-tint: #30232c;
    --gpt: #63dcb1;
    --gpt-deep: #82e5c6;
    --gpt-soft: #174638;
    --gpt-tint: #102e2d;
    --grok: #c6d8f0;
    --grok-ink: #0b0b0f;
    --grok-soft: #243a54;
    --grok-accent: #fff;
    --gold: #F5CB72;
    --shadow-sm: 0 1px 2px #0003;
    --shadow-md: 0 6px 24px -8px #0005, 0 2px 6px -2px #0003;
    --shadow-lg: 0 24px 60px -20px #0009, 0 8px 20px -10px #0005;
    --shadow-glow: 0 0 0 1px #FF927D30, 0 18px 50px -16px #0005;

  --chart-track-bg: #352241;
}
}
.theme-toggle { visibility: hidden; }
:root[data-theme] .theme-toggle { visibility: visible; }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
body .theme-toggle:hover:not(:disabled) { color: var(--ink); border-color: var(--border-strong); background: var(--bg-subtle); filter: none; }
.theme-toggle:focus-visible { background: var(--bg-sunken); color: var(--ink); }
.theme-icon { display: block; overflow: visible; }
.theme-sun, .theme-moon, .theme-rays { transform-origin: 12px 12px; transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.3,1); }
.theme-sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-moon { opacity: 0; transform: rotate(-35deg) scale(.7); }
:root[data-theme="dark"] .theme-sun { opacity: 0; transform: rotate(35deg) scale(.7); }
:root[data-theme="dark"] .theme-rays { transform: rotate(30deg); }
:root[data-theme="dark"] .theme-moon { opacity: 1; transform: rotate(0) scale(1); }
.portal-nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-changing body, .theme-changing body :not(svg, svg *) { transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-in 320ms ease both; mix-blend-mode: normal; }
@keyframes theme-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-icon *, .theme-changing body, .theme-changing body * { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media (max-width: 420px) {
  .theme-toggle { width: 38px; height: 38px; min-height: 38px; }
  .portal-nav-actions { gap: 7px; }
  .portal-back { max-width: 110px; text-align: center; line-height: 1.25; }
}
@media print { .theme-toggle { display: none; } }

/* Selection controls shared by the public site and account forms. */
body input:is([type="checkbox"], [type="radio"]):not([hidden]) {
  appearance: none;
  display: inline-grid;
  place-content: center;
  box-sizing: border-box;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 2px 0 0;
  vertical-align: -3px;
  border: 1px solid var(--ink-faint);
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--ink-inverse);
  box-shadow: 0 1px 1px #00000008;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
body input:is([type="checkbox"], [type="radio"]):not([hidden])::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(12% 43%, 39% 69%, 87% 16%, 100% 29%, 40% 94%, 0 56%);
  visibility: hidden;
}
body input[type="radio"]:not([hidden]) { border-radius: 50%; }
body input[type="radio"]:not([hidden])::before { width: 6px; height: 6px; border-radius: 50%; clip-path: none; }
body input:is([type="checkbox"], [type="radio"]):not([hidden]):hover:not(:disabled) { border-color: var(--ink); }
body input:is([type="checkbox"], [type="radio"]):not([hidden]):checked,
body input[type="checkbox"]:not([hidden]):indeterminate { background: var(--ink); border-color: var(--ink); box-shadow: none; }
body input:is([type="checkbox"], [type="radio"]):not([hidden]):checked::before,
body input[type="checkbox"]:not([hidden]):indeterminate::before { visibility: visible; }
body input[type="checkbox"]:not([hidden]):indeterminate::before { width: 8px; height: 2px; border-radius: 1px; clip-path: none; }
body input:is([type="checkbox"], [type="radio"]):not([hidden]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body input:is([type="checkbox"], [type="radio"]):not([hidden]):disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
body input:is([type="checkbox"], [type="radio"]):not([hidden])[aria-invalid="true"] { border-color: var(--danger); }
body :is(.pool-option, .pool-choice) input[type="radio"]:focus-visible { outline: none; }

body select:not([multiple]):not([size]), body .portal-select-trigger {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background-color: var(--bg-elevated);
  background-image: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
}
body select:not([multiple]):not([size]) { appearance: auto; }
body .portal-select-trigger:hover:not(:disabled) { background: var(--bg-subtle); }
body .portal-select-trigger[aria-expanded="true"] { background: var(--bg-subtle); }
body .portal-select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-select-trigger::after { color: var(--ink-faint); width: 6px; height: 6px; }
.portal-popover { padding: 5px; border-color: var(--border-strong); border-radius: 10px; box-shadow: 0 12px 28px -8px #00000030, 0 2px 5px #0000000a; }
.portal-popover .portal-option { min-height: 44px; padding: 11px 36px 11px 12px; border-radius: 5px; font-size: .85rem; line-height: 1.45; font-weight: 400; }
.portal-popover .portal-option[aria-selected="true"] { color: var(--ink); background: var(--bg-subtle); font-weight: 500; }
.portal-popover .portal-option[aria-selected="true"]::after { top: 50%; transform: translateY(-50%); right: 13px; color: var(--ink); font-size: .9rem; }
.portal-popover .portal-option:focus-visible { outline: none; box-shadow: none; background: var(--bg-sunken); }

/* Style the native picker where supported; other browsers retain their OS menu. */
@supports (appearance: base-select) {
  body select:not([multiple]):not([size]), body select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  body select:not([multiple]):not([size]) { display: flex; align-items: center; gap: 20px; }
  body select:not([multiple]):not([size]):open { background-color: var(--bg-subtle); }
  body select:not([multiple]):not([size])::picker-icon {
    content: ""; width: 6px; height: 6px; flex: none; margin: -3px 2px 0 auto;
    border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint); transform: rotate(45deg);
  }
  body select:not([multiple]):not([size]):open::picker-icon { transform: rotate(225deg); margin-top: 3px; }
  body select:not([multiple]):not([size])::picker(select) {
    margin-block: 6px; padding: 5px; max-height: min(360px, 60dvh);
    border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--bg-elevated); color: var(--ink);
    box-shadow: 0 12px 28px -8px #00000030, 0 2px 5px #0000000a;
    scrollbar-width: thin; overscroll-behavior: contain;
  }
  body select:not([multiple]):not([size]) option {
    display: flex; align-items: center; gap: 20px; min-height: 44px; padding: 10px 12px;
    border: 0; border-radius: 5px; background: transparent; color: var(--ink);
    font: 400 14px/1.5 var(--f-sans, system-ui, sans-serif); cursor: pointer;
  }
  body select:not([multiple]):not([size]) option:checked { font-weight: 500; background: var(--bg-subtle); }
  body select:not([multiple]):not([size]) option:hover { background: var(--bg-subtle); }
  body select:not([multiple]):not([size]) option:focus-visible { background: var(--bg-sunken); outline: 1px solid var(--ink-faint); outline-offset: -1px; }
  body select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--ink); }
  body select:not([multiple]):not([size]) option:disabled { color: var(--ink-faint); cursor: not-allowed; }
}
@media (prefers-reduced-motion: reduce) {
  body input:is([type="checkbox"], [type="radio"]):not([hidden]) { transition: none; }
}
@media (forced-colors: active) {
  body input:is([type="checkbox"], [type="radio"]):not([hidden]) { appearance: auto; background: Canvas; border-color: ButtonText; color: CanvasText; }
  body input:is([type="checkbox"], [type="radio"]):not([hidden])::before { display: none; }
  body select:not([multiple]):not([size]) { border-color: ButtonText; }
  body select:not([multiple]):not([size]) option:checked { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

/* Elysium / Gravity: the same materials as the reviewed Light / Matter study. */
:root {
  --bg:#f5f1e9;--bg-elevated:#fffcf6;--bg-subtle:#ece7dc;--bg-sunken:#e6dfd1;
  --ink:#28251f;--ink-soft:#686158;--ink-faint:#6c665b;--ink-inverse:#fffcf6;
  --border:#d8d0c2;--border-strong:#9c917e;--border-faint:#e7e0d4;
  --brand:#75592f;--brand-deep:#59411f;--on-brand:#fffaf0;--brand-bg:#f0e7d8;
  --accent:#75592f;--accent-bg:#f0e7d8;--accent-surface:#f0e7d8;
  --positive:#326551;--danger:#a33f35;--success-bg:#e2eee5;--danger-bg:#f7e8e3;
  --money:#326551;--money-bg:#e2eee5;--usage:#75592f;--usage-bg:#f0e7d8;
  --premium:#75592f;--premium-bg:#f0e7d8;--models:#75592f;--models-bg:#fffcf6;
  --code-bg:#272820;--code-ink:#efeee3;--shadow-sm:0 2px 5px #5d503a08;
  --chart-track-bg:#ece7dc;--control-focus:#f0e7d8;
}
:root[data-theme="dark"] {
  --bg:#111210;--bg-elevated:#191b17;--bg-subtle:#24271f;--bg-sunken:#0c0e0b;
  --ink:#f1f1e9;--ink-soft:#b3b7ac;--ink-faint:#a3a897;--ink-inverse:#161812;
  --border:#34382e;--border-strong:#787f6e;--border-faint:#292d24;
  --brand:#d5d8c5;--brand-deep:#eeeee0;--on-brand:#161812;--brand-bg:#2b3022;
  --accent:#d5d8c5;--accent-bg:#2b3022;--accent-surface:#2b3022;
  --positive:#a5d0b0;--danger:#edb0a2;--success-bg:#24352a;--danger-bg:#3b2822;
  --money:#a5d0b0;--money-bg:#24352a;--usage:#d5d8c5;--usage-bg:#2b3022;
  --premium:#d5d8c5;--premium-bg:#2b3022;--models:#d5d8c5;--models-bg:#191b17;
  --code-bg:#090b08;--code-ink:#e6e9db;--shadow-sm:0 2px 6px #0002;
  --chart-track-bg:#24271f;--control-focus:#2b3022;
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#111210;--bg-elevated:#191b17;--bg-subtle:#24271f;--bg-sunken:#0c0e0b;
  --ink:#f1f1e9;--ink-soft:#b3b7ac;--ink-faint:#a3a897;--ink-inverse:#161812;
  --border:#34382e;--border-strong:#787f6e;--border-faint:#292d24;
  --brand:#d5d8c5;--brand-deep:#eeeee0;--on-brand:#161812;--brand-bg:#2b3022;
  --accent:#d5d8c5;--accent-bg:#2b3022;--accent-surface:#2b3022;
  --positive:#a5d0b0;--danger:#edb0a2;--success-bg:#24352a;--danger-bg:#3b2822;
  --money:#a5d0b0;--money-bg:#24352a;--usage:#d5d8c5;--usage-bg:#2b3022;
  --premium:#d5d8c5;--premium-bg:#2b3022;--models:#d5d8c5;--models-bg:#191b17;
  --code-bg:#090b08;--code-ink:#e6e9db;--shadow-sm:0 2px 6px #0002;
  --chart-track-bg:#24271f;--control-focus:#2b3022;
}}
body .theme-toggle.theme-switch {
  --switch-track:#e2ded3;--switch-border:#9a8c7052;--switch-thumb:#fffdf6;--switch-sun:#815f26;--switch-moon:#827a6d;--switch-shadow:#55432926;
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 76px;box-sizing:border-box;width:76px;min-width:76px;height:44px;min-height:44px;padding:3px 0;border:0;border-radius:24px;background:transparent;color:var(--switch-sun);cursor:pointer;rotate:0deg;transform:none;box-shadow:none;touch-action:manipulation;
}
html[data-theme="dark"] body .theme-switch{--switch-track:#181b18;--switch-border:#dad9c52b;--switch-thumb:#454b40;--switch-sun:#8c9283;--switch-moon:#f2ecd8;--switch-shadow:#0006}
body .theme-switch .theme-switch-track{display:block;position:relative;width:76px;height:38px;box-sizing:border-box;border:1px solid var(--switch-border);border-radius:22px;background:var(--switch-track);box-shadow:inset 0 2px 5px #0000000e,inset 0 -1px 0 #ffffff25;transition:background .36s,border-color .36s;pointer-events:none}
body .theme-switch .theme-switch-thumb{position:absolute;left:3px;top:3px;width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--switch-thumb) 90%,white),var(--switch-thumb));box-shadow:0 2px 5px var(--switch-shadow),inset 0 1px 1px #ffffff80;transform:translateX(0);transition:transform .36s cubic-bezier(.22,1,.36,1),background .36s}
body .theme-switch svg{position:absolute;top:8px;width:20px;height:20px;margin:0;pointer-events:none;transition:opacity .36s,transform .36s cubic-bezier(.22,1,.36,1)}
body .theme-switch .theme-sun{left:8px;color:var(--switch-sun);opacity:1;transform:rotate(0deg) scale(1)}
body .theme-switch .theme-moon{right:8px;color:var(--switch-moon);transform:rotate(-22deg) scale(.86);opacity:.65}
body .theme-switch[data-theme="dark"] .theme-switch-thumb{transform:translateX(38px)}
body .theme-switch[data-theme="dark"] .theme-sun{transform:rotate(30deg) scale(.85);opacity:.65}
body .theme-switch[data-theme="dark"] .theme-moon{transform:rotate(0deg) scale(1);opacity:1}
body .theme-toggle.theme-switch:hover{rotate:0deg;transform:none;background:transparent;filter:none;box-shadow:none}
body .theme-switch:hover .theme-switch-track{border-color:color-mix(in srgb,var(--switch-sun) 55%,var(--switch-border))}
body .theme-switch:active .theme-switch-thumb{scale:.93}
html.theme-changing body,html.theme-changing .panel,html.theme-changing .account-sidebar,html.theme-changing .client-topbar{transition:background-color .36s,color .36s,border-color .36s}
@media(prefers-reduced-motion:reduce){body .theme-switch *{transition:none!important}html.theme-changing body{transition:none}}

/* Focus remains distinct from selection and preserves each control's contrast. */
:root {
  --control-focus: #e4d7c0;
  --field-focus: #f0e7d8;
}
:root[data-theme="dark"] { --control-focus: #3d4632; --field-focus: #2b3022; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --control-focus: #3d4632; --field-focus: #2b3022; }
}
body :is(button, .btn, .account-button, .portal-back, summary) {
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
body :is(button, .btn, .account-button):active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
body :is(button, .btn, .account-button):hover:not(:disabled):not([aria-disabled="true"]) { filter: none; }
body .btn:not(.btn-ghost):hover { background-color: color-mix(in srgb, var(--btn-bg, var(--brand)) 87%, var(--btn-fg, var(--on-brand))); }
body .btn-ghost:hover { background-color: var(--bg-subtle); }
body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body :is(input, textarea, select):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]):focus {
  border-color: var(--ink-soft);
  background-color: var(--field-focus);
}
body :is(input, textarea, select):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; cursor: pointer; }
body label:has(> input:is([type="checkbox"], [type="radio"]):disabled) { cursor: not-allowed; }
body :is(.pool-choice, .pool-option, .provider-option, .available-models-filter):has(input:checked) {
  border-color: var(--pool-accent, var(--accent));
  box-shadow: none;
  background-color: var(--pool-surface, var(--accent-bg));
}
body :is(.pool-choice, .pool-option, .provider-option, .available-models-filter):has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body :is(.pool-choice, .pool-option, .provider-option, .available-models-filter) input:is([type="checkbox"], [type="radio"]):focus-visible { outline: none; }
body :is(.portal-select-trigger, .key-manage-trigger):is(:hover, :focus-visible, [aria-expanded="true"]) { border-color: var(--border-strong); box-shadow: none; }
body :is(.portal-select-trigger, .key-manage-trigger):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); background-color: var(--field-focus); }
body .portal-popover :is(.portal-option, .key-menu-choice):focus-visible { outline: 1px solid var(--ink-faint); outline-offset: -1px; background-color: var(--field-focus); }
body :is(.wallet-amount-presets button, .amount-presets button)[aria-pressed="true"] { box-shadow: none; border-color: var(--accent); background: var(--accent-bg); color: var(--ink); }
body :is(input, textarea, select, .portal-select-trigger):is([aria-invalid="true"], [data-state="invalid"]) { border-color: var(--danger); }
body :is(input, textarea, select):is([aria-invalid="true"], [data-state="invalid"]):focus,
body .portal-select-trigger[aria-invalid="true"]:focus-visible { border-color: var(--danger); outline-color: var(--danger); }
body :is(input, textarea, select):user-invalid { border-color: var(--danger); }
body :is(input, textarea, select):user-invalid:focus-visible { outline-color: var(--danger); }
body input:is([type="checkbox"], [type="radio"]):not([hidden]):is([aria-invalid="true"], [data-state="invalid"], :user-invalid):focus-visible { outline-color: var(--danger); }
body :is(input, textarea, select)[data-state="valid"]:focus { border-color: var(--positive); }
body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input):focus-within { box-shadow: none; border-color: var(--ink-soft); background: var(--field-focus); }
body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input):has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input):has(input:is([aria-invalid="true"], [data-state="invalid"], :user-invalid)) { border-color: var(--danger); outline-color: var(--danger); }
body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input) input:focus,
body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input) input:focus-visible { outline: none; border: 0; background: transparent; box-shadow: none; }
::selection { background: var(--brand); color: var(--on-brand); }
@media (prefers-reduced-motion: reduce) {
  body :is(button, .btn, .account-button, .portal-back, summary) { transition: none; }
}
@media (forced-colors: active) {
  body :is(input, textarea, select):not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]):focus,
  body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input):focus-within {
    background: Canvas; color: CanvasText; forced-color-adjust: auto;
  }
  body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
  body :is(.pool-choice, .pool-option, .provider-option, .available-models-filter, .capacity-money, .amount-input-wrap, .wallet-amount-input):has(input:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
  body :is(.pool-choice, .pool-option, .provider-option, .available-models-filter):has(input:checked),
  body :is(.wallet-amount-presets button, .amount-presets button)[aria-pressed="true"] {
    border-color: Highlight; background: Highlight; color: HighlightText; forced-color-adjust: none;
  }
  body input:is([type="checkbox"], [type="radio"]):not([hidden]) { forced-color-adjust: auto; }
  body :is(.pool-choice, .pool-option, .provider-option, .available-models-filter) input:is([type="checkbox"], [type="radio"]):focus-visible,
  body :is(.capacity-money, .amount-input-wrap, .wallet-amount-input) input:focus-visible {
    outline: none;
  }
}

/* Shared painted palette. Match the website body, not only the root tokens. */
:root[data-theme="dark"],
:root[data-theme="dark"] body,
:root[data-theme="dark"] body.refined.cinematic,
:root[data-theme="dark"] body.portal-client {
  --bg:#131215;--bg-elevated:#1b1a1e;--bg-subtle:#222126;--bg-sunken:#0d0d10;
  --surface:#1b1a1e;--subtle:#222126;--line:#36333b;--line-strong:#77707e;
  --ink:#f2eff3;--ink-soft:#b6b2ba;--ink-faint:#a09aa6;--ink-inverse:#131215;
  --soft:#b6b2ba;--faint:#a09aa6;--border:#36333b;--border-faint:#2b2930;--border-strong:#77707e;
  --brand:#e8e5eb;--brand-deep:#ffffff;--on-brand:#131215;--brand-bg:#2b2931;
  --accent:#bfa8d4;--accent-bg:#2b2931;--accent-surface:#242228;
  --premium:#c9bfd3;--premium-bg:#28252c;--money:#f2eff3;--money-bg:#25232a;
  --usage:#bfa8d4;--usage-bg:#25232a;--models:#bfa8d4;--models-bg:#1b1a1e;
  --positive:#98c8ae;--success:#98c8ae;--success-bg:#1c2b24;--danger:#efaaa7;--danger-bg:#342123;
  --code-bg:#0d0d10;--code-ink:#e5e0e9;--chart-track-bg:#2b2931;
  --control-focus:#302c36;--field-focus:#27242d;--field-bg:#17161a;--field-border:#77707e;
  --shadow-sm:0 2px 6px #0003;--shadow-md:0 12px 30px -16px #0009;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]),
  :root:not([data-theme]) body,
  :root:not([data-theme]) body.refined.cinematic,
  :root:not([data-theme]) body.portal-client {
    --bg:#131215;--bg-elevated:#1b1a1e;--bg-subtle:#222126;--bg-sunken:#0d0d10;
    --surface:#1b1a1e;--subtle:#222126;--line:#36333b;--line-strong:#77707e;
    --ink:#f2eff3;--ink-soft:#b6b2ba;--ink-faint:#a09aa6;--ink-inverse:#131215;
    --soft:#b6b2ba;--faint:#a09aa6;--border:#36333b;--border-faint:#2b2930;--border-strong:#77707e;
    --brand:#e8e5eb;--brand-deep:#ffffff;--on-brand:#131215;--brand-bg:#2b2931;
    --accent:#bfa8d4;--accent-bg:#2b2931;--accent-surface:#242228;
    --premium:#c9bfd3;--premium-bg:#28252c;--money:#f2eff3;--money-bg:#25232a;
    --usage:#bfa8d4;--usage-bg:#25232a;--models:#bfa8d4;--models-bg:#1b1a1e;
    --positive:#98c8ae;--success:#98c8ae;--success-bg:#1c2b24;--danger:#efaaa7;--danger-bg:#342123;
    --code-bg:#0d0d10;--code-ink:#e5e0e9;--chart-track-bg:#2b2931;
    --control-focus:#302c36;--field-focus:#27242d;--field-bg:#17161a;--field-border:#77707e;
    --shadow-sm:0 2px 6px #0003;--shadow-md:0 12px 30px -16px #0009;
  }
}
/* Primary actions remain neutral; violet is reserved for small accents. */
:root[data-theme="dark"] body.refined.cinematic :is(.hero-button,.site-nav .pill-button,.balance-action>.btn,.pricing-topup-dialog .wallet-topup-actions a){background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
@media(prefers-color-scheme:dark){:root:not([data-theme]) body.refined.cinematic :is(.hero-button,.site-nav .pill-button,.balance-action>.btn,.pricing-topup-dialog .wallet-topup-actions a){background:var(--brand);color:var(--on-brand);border-color:var(--brand)}}
:root[data-theme="dark"] body.refined.cinematic :is(.hero-button,.site-nav .pill-button,.balance-action>.btn,.pricing-topup-dialog .wallet-topup-actions a):focus-visible{background-color:var(--brand)!important;color:var(--on-brand)!important;outline-color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme]) body.refined.cinematic :is(.hero-button,.site-nav .pill-button,.balance-action>.btn,.pricing-topup-dialog .wallet-topup-actions a):focus-visible{background-color:var(--brand)!important;color:var(--on-brand)!important;outline-color:var(--ink)}}