/* Keep the theme switch restrained in the existing account toolbar. */
.app-shell.agy-console-shell.agy-board-shell .console-theme-toggle {
  position: relative;
  display: grid !important;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  margin-right: 6px;
  border: 0 !important;
  background: transparent !important;
  color: #727773 !important;
  box-shadow: none !important;
  border-radius: 4px;
  --hover-sweep-color: currentColor !important;
}
/* The shared hover sweep recolors nested icons white; this transparent control
   must keep its icon tied to the theme-aware button color in every state. */
.app-shell.agy-console-shell.agy-board-shell .console-theme-toggle:is(:hover, :focus-visible) { color: #343b37 !important; }
.console-theme-toggle :is(span, svg) { color: inherit !important; }
.console-theme-toggle-icon { grid-area: 1 / 1; display: grid; opacity: 0; filter: blur(3px); transition: opacity 180ms ease, filter 220ms ease; }
.console-theme-toggle-icon[data-visible="true"] { opacity: 1; filter: none; }
.console-theme-toggle::before, .console-theme-toggle::after { display: none !important; }
.console-theme-toggle:focus-visible { outline: 2px solid #648e87 !important; outline-offset: 3px; }

/* Important declarations in this named layer override the legacy console's
   unlayered !important light palette without changing its layout or images.
   The attribute exists only while a customer console route is mounted. */
@layer console-night {
  html[data-console-theme="dark"],
  html[data-console-theme="dark"] .agy-console-shell {
    color-scheme: dark;
    --night-bg: #191919;
    --night-card: #242424;
    --night-raised: #2b2b2b;
    --night-input: #303030;
    --night-text: #d5d5d5;
    --night-heading: #e6e6e6;
    --night-muted: #a0a0a0;
    --night-line: #393939;
    --night-green: #76b9a2;
    --bg: var(--night-bg) !important;
    --surface: var(--night-card) !important;
    --surface-muted: var(--night-raised) !important;
    --surface-raised: var(--night-raised) !important;
    --ink: var(--night-heading) !important;
    --text: var(--night-text) !important;
    --muted: var(--night-muted) !important;
    --line: var(--night-line) !important;
    --line-strong: #505050 !important;
    --accent: #d4d4d4 !important;
    --accent-ink: #232323 !important;
    --teal: var(--night-green) !important;
    --teal-strong: #8bcab4 !important;
    --teal-soft: #293732 !important;
    --brand-green: #81bfaa !important;
    --agy-page-bg: var(--night-bg) !important;
    --agy-card-bg: var(--night-card) !important;
    --agy-card-soft: var(--night-raised) !important;
    --agy-text: var(--night-heading) !important;
    --agy-muted: var(--night-muted) !important;
    --agy-faint: #8e8e8e !important;
    --agy-teal: var(--night-green) !important;
    --agy-board-bg: var(--night-bg) !important;
    --agy-board-card: var(--night-card) !important;
    --agy-board-ink: var(--night-heading) !important;
    --agy-board-muted: var(--night-muted) !important;
    --agy-board-teal: var(--night-green) !important;
    --agy-board-card-shadow: 0 8px 24px #00000018 !important;
    --agy-shadow: 0 8px 24px #00000018 !important;
    --shadow: 0 12px 32px #00000024 !important;
    --shadow-card: 0 8px 24px #00000018 !important;
    --shadow-soft: 0 4px 16px #00000018 !important;
    --inner-highlight: inset 0 1px 0 #ffffff04 !important;
    background: var(--night-bg) !important;
    color: var(--night-text) !important;
  }
  html[data-console-theme="dark"] :is(body, #root, .app-shell, .layered-boot, .layered-boot-console) {
    background: var(--night-bg) !important;
    color: var(--night-text) !important;
  }
  html[data-console-theme="dark"] :is(.main-area, .workspace-page, .page-header, .agy-board-main, .model-price-table, .model-price-matrix, .keys-console-page, .keys-topbar) {
    background: transparent !important;
  }
  html[data-console-theme="dark"] .agy-board-topbar {
    background: rgba(25, 25, 25, 0.94) !important;
    box-shadow: none !important;
  }
  html[data-console-theme="dark"] :is(h1, h2, h3, h4, strong, b, th, .agy-board-brand, .layered-boot-wordmark) { color: var(--night-heading) !important; }
  html[data-console-theme="dark"] :is(p, label, td, li, dt, dd, small, time, code, .empty-state, .field-row, .agy-board-user, .layered-boot-prompt) { color: var(--night-muted) !important; }
  html[data-console-theme="dark"] :is(span, a) { color: inherit !important; }
  html[data-console-theme="dark"] :is([class*="-card"], [class$="-panel"], [class$="-modal"], [class*="-popover"], [class$="-menu"], .billing-mode-explainer, .keys-line-item, .usage-table-wrap, .tutorial-installation, .tutorial-faq, .tutorial-support-band, .model-price-cell, td, th) {
    background-color: var(--night-card) !important;
    background-image: none !important;
    border-color: var(--night-line) !important;
    box-shadow: 0 8px 24px #00000018 !important;
  }
  html[data-console-theme="dark"] :is(table, tr, td, th, hr, input, select, textarea, fieldset, details, pre, [class*="-header"], [class*="-footer"], [class*="-row"], [class*="-item"], [class*="-head"], [class*="-line"], [class*="-cell"]) {
    border-color: var(--night-line) !important;
  }
  html[data-console-theme="dark"] :where(button, a.secondary-button) {
    color: var(--night-text) !important;
    border-color: var(--night-line) !important;
    box-shadow: none !important;
    --hover-sweep-color: var(--night-text) !important;
  }
  html[data-console-theme="dark"] :is(button, a.secondary-button) :is(span, small, strong, svg) { color: inherit !important; }
  html[data-console-theme="dark"] :is(.agy-board-brand, .agy-board-user-button, .agy-board-help-button, .console-preview-billing, .console-preview-billing-trigger, .console-theme-toggle, .model-price-model-trigger, .model-price-compare-toggle, .wallet-policy-trigger) {
    background: transparent !important;
    color: var(--night-muted) !important;
  }
  html[data-console-theme="dark"] .agy-board-brand { color: var(--night-heading) !important; }
  html[data-console-theme="dark"] .agy-board-navlinks button { background: transparent !important; color: var(--night-muted) !important; }
  html[data-console-theme="dark"] .agy-board-navlinks button::before { background: #393939 !important; }
  html[data-console-theme="dark"] .agy-board-navlinks :is(button.active, button:hover, button:focus-visible) { background: #393939 !important; color: #ededed !important; }
  html[data-console-theme="dark"] :is(.console-preview-billing-option, .agy-board-account-menu-item) { background: transparent !important; color: var(--night-muted) !important; }
  html[data-console-theme="dark"] :is(.console-preview-billing-option:hover, .console-preview-billing-option:focus-visible, .console-preview-billing-option[aria-checked="true"], .agy-board-account-menu-item:hover, .agy-board-account-menu-item:focus-visible) {
    background: #343434 !important; color: var(--night-heading) !important;
  }
  html[data-console-theme="dark"] .console-preview-billing-option[aria-checked="true"] { color: var(--night-green) !important; }
  html[data-console-theme="dark"] :is(input, select, textarea, .setup-row, .keys-use-info, .keys-use-code, pre, .tutorial-code-block, .tutorial-code-block > header, .tutorial-code-block > header > button) {
    background: var(--night-input) !important; color: var(--night-text) !important; border-color: #414141 !important;
  }
  html[data-console-theme="dark"] input::placeholder,
  html[data-console-theme="dark"] textarea::placeholder { color: #929292 !important; opacity: 1; }
  html[data-console-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: #87b8a7 !important; }
  html[data-console-theme="dark"] :is(button, input, select, textarea, a):focus-visible { outline-color: #8bb9aa !important; }
  html[data-console-theme="dark"] :is(.primary-button, .keys-create-button) {
    background: #d2d2d2 !important; color: #222 !important;
  }
  html[data-console-theme="dark"] :is(.primary-button, .keys-create-button)::before { background: #e3e3e3 !important; }
  html[data-console-theme="dark"] :is(.primary-button, .keys-create-button):hover { background: #e3e3e3 !important; color: #191919 !important; }
  html[data-console-theme="dark"] :is(button:disabled, input:disabled) { background: #303030 !important; color: #808080 !important; opacity: 0.7 !important; }
  html[data-console-theme="dark"] :is(.secondary-button, .payment-channel-option, .keys-use-tabs button, .usage-range-tabs button, .usage-range-slider button) { background: #303030 !important; color: #b8b8b8 !important; }
  html[data-console-theme="dark"] :is(.payment-channel-option.selected, .payment-channel-option[aria-checked="true"], .keys-use-tabs button.active, .usage-range-tabs button.active, .usage-range-slider button.active) { background: #494949 !important; color: #eee !important; }
  html[data-console-theme="dark"] .recharge-amount-card { background: #2e2e2e !important; color: #d7d7d7 !important; }
  html[data-console-theme="dark"] .recharge-amount-card.selected { background: #434343 !important; color: #f1f1f1 !important; box-shadow: inset 0 0 0 1px #686868 !important; }
  html[data-console-theme="dark"] .recharge-amount-card :is(span, small) { color: #aaa !important; }
  html[data-console-theme="dark"] .recharge-amount-card strong { color: #e6e6e6 !important; }
  html[data-console-theme="dark"] .recharge-amount-card input { background: transparent !important; }
  html[data-console-theme="dark"] :is(.coupon-option, .coupon-selector-item, .recharge-summary, .recharge-settlement, .redeem-preview-box, .inline-status, .tutorial-start-band) { background: #2b3430 !important; color: #a9c5b8 !important; }
  html[data-console-theme="dark"] :is(.wallet-balance-only strong, .model-price-metric-label, .model-price-rate-tag, .model-price-discount, .success, .status-ok, .is-healthy) { color: var(--night-green) !important; }
  html[data-console-theme="dark"] :is(.model-price-table th, .model-price-head, .usage-table thead, .keys-table thead) { background: #2a2a2a !important; color: #aaa !important; }
  html[data-console-theme="dark"] :is(.model-price-cell, .model-price-row td, .model-price-model-menu, .model-price-model-option, .model-claude-notice-panel, .model-claude-notice-header, .model-claude-notice-toggle) { background: var(--night-card) !important; }
  html[data-console-theme="dark"] :is(.model-price-rate-tag, .keys-channel-badge) { background: #303b35 !important; color: #a3c8b5 !important; }
  html[data-console-theme="dark"] :is(.model-price-official, .model-price-official-label, .model-price-metric small, .model-claude-notice-rule p) { color: #aaa !important; }
  html[data-console-theme="dark"] :is(.keys-modal-backdrop, .staff-contact-modal-backdrop, .modal-backdrop, .dialog-backdrop) { background: #111111b8 !important; }
  html[data-console-theme="dark"] :is(.keys-modal, .keys-modal-body, .keys-modal-header, .keys-modal-footer, .staff-contact-modal, .staff-contact-modal-header, .staff-contact-modal-body, .staff-contact-method, .keys-settings-modal, .keys-use-modal, .keys-channel-select-trigger, .keys-channel-select-option) {
    background: var(--night-card) !important; color: var(--night-text) !important;
  }
  html[data-console-theme="dark"] :is(.keys-channel-select-option:hover, .keys-channel-select-option.is-selected) { background: #363636 !important; color: #ddd !important; }
  html[data-console-theme="dark"] :is(.tutorial-directory, .tutorial-facts, .tutorial-tabs, .tutorial-directory-toggle) { background: var(--night-card) !important; }
  html[data-console-theme="dark"] :is(.upstream-status-card, .upstream-status-timeline, .usage-chart, .usage-table-card, .dashboard-section-summary, .dashboard-section-detail, .dashboard-notification-item) { background: var(--night-card) !important; color: var(--night-text) !important; }
  html[data-console-theme="dark"] .console-local-preview-badge { background: #2b2b2b !important; color: #a6c8bb !important; border-color: #414c46 !important; }
  html[data-console-theme="dark"] :is(.model-provider-logo, .model-price-provider-logo) { color: var(--night-heading) !important; }
  html[data-console-theme="dark"] :is(.usage-bar-tooltip, .model-price-tooltip) { background: #363636 !important; color: #e2e2e2 !important; }
  html[data-console-theme="dark"] .dashboard-card-wall-hero { background: transparent !important; box-shadow: none !important; }
  html[data-console-theme="dark"] .dashboard-notification-center { background: var(--night-card) !important; box-shadow: 0 8px 24px #00000018 !important; }
  html[data-console-theme="dark"] :is(.dashboard-section-status, .dashboard-section-eyebrow, .dashboard-status-label, .dashboard-section-token-stat span, .dashboard-section-summary small) { color: #a6a6a6 !important; }
  html[data-console-theme="dark"] :is(div, section, article, header, footer, main, aside) { color: var(--night-text) !important; }
  html[data-console-theme="dark"] .dashboard-agy-page::before { background: var(--night-bg) !important; }
  html[data-console-theme="dark"] .dashboard-section-card::before { background: none !important; }
  html[data-console-theme="dark"] :is(.wallet-payment-strip, .payment-channel-switch button, .dashboard-status-loading, .model-price-table-header, .model-price-table-head, .model-price-channel, .model-price-cost-cell, .model-price-discount-cell, .model-price-channel-cell) { background: var(--night-card) !important; color: var(--night-text) !important; }
  html[data-console-theme="dark"] .payment-channel-switch button.active { background: #484848 !important; color: #ededed !important; }
  html[data-console-theme="dark"] .model-price-table :is([role="cell"], [role="columnheader"], [role="row"]) { background: var(--night-card) !important; }
  html[data-console-theme="dark"] :is(.model-price-provider, .model-price-provider-logo, .model-price-provider-name, .model-price-provider svg) { color: var(--night-heading) !important; }
  html[data-console-theme="dark"] .console-theme-toggle { color: #b8b8b8 !important; background: transparent !important; }
  html[data-console-theme="dark"] :is(.dashboard-sidebar-toggle, .dashboard-sidebar-drawer) { background: var(--night-card) !important; color: var(--night-text) !important; border-color: var(--night-line) !important; }
  html[data-console-theme="dark"] .dashboard-sidebar-drawer-links button { background: transparent !important; color: var(--night-muted) !important; }
  html[data-console-theme="dark"] .dashboard-sidebar-drawer-links button:is(:hover, :focus-visible, .active, [aria-current="page"]) { background: var(--night-input) !important; color: var(--night-heading) !important; }
  html[data-console-theme="dark"] :is(em, s, del) { color: #a3a3a3 !important; }
  html[data-console-theme="dark"] :is(.dashboard-channel-stability-loading, .channel-price-comparison-head, .channel-price-comparison-row > span, .model-price-model-select-option) { background: #2b2b2b !important; color: var(--night-text) !important; }
  html[data-console-theme="dark"] .model-price-model-select-option.is-selected { background: #3a3a3a !important; color: #b1d2c4 !important; }
  html[data-console-theme="dark"] :is(button, a.secondary-button, a.primary-button) {
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
  }
  html[data-console-theme="dark"] :is(.keys-icon-button, .keys-table button, .keys-table-scroll button, .keys-search-box, .tutorial-intro-band, .tutorial-requirements) { background: #2e2e2e !important; color: var(--night-text) !important; }
  html[data-console-theme="dark"] .keys-table-scroll { background: transparent !important; }
  html[data-console-theme="dark"] .tutorial-directory {
    border-color: var(--night-line) !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-group svg {
    color: var(--night-green) !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-nav section > a {
    color: var(--night-muted) !important;
    box-shadow: none !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-nav section > a:is(:hover, :focus-visible) {
    background: var(--night-raised) !important;
    color: var(--night-heading) !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-nav section > a[aria-current="page"] {
    background: #293732 !important;
    color: #b2d5c6 !important;
    border-left-color: var(--night-green) !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-foot {
    border-color: var(--night-line) !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-foot span {
    color: var(--night-muted) !important;
  }
  html[data-console-theme="dark"] .tutorial-directory-foot code {
    background: transparent !important;
    color: var(--night-muted) !important;
  }
  @media (min-width: 981px) {
    html[data-console-theme="dark"] .tutorial-directory { background: transparent !important; }
  }
  html[data-console-theme="dark"] code { background-color: #2e2e2e !important; }
  html[data-console-theme="dark"] :is(.primary-button, .keys-create-button) { color: #222 !important; }
  html[data-console-theme="dark"] :is(.primary-button, .keys-create-button) :is(span, strong, small, svg) { color: #222 !important; }
  html[data-console-theme="dark"] :is(.status-layered-line, .status-layered-bars i, .model-price-loading-line, .model-price-loading-bar) { background: #3c3c3c !important; }
  html[data-console-theme="dark"] :is(.error, .inline-error, .is-error, .is-failed) { color: #e6a3a3 !important; }
  html[data-console-theme="dark"] :is(.warning, .is-warning, .is-degraded) { color: #dac396 !important; }

  /* Secondary controls and step markers use a muted surface, not the CTA fill. */
  html[data-console-theme="dark"] :is(.staff-contact-modal-close, .tutorial-step-number) {
    background: var(--night-input) !important;
    color: var(--night-heading) !important;
  }
  html[data-console-theme="dark"] :is(.staff-contact-modal-close, .keys-icon-button):is(:hover, :focus-visible):not(:disabled) {
    background: #3b3b3b !important;
    color: var(--night-heading) !important;
  }
  html[data-console-theme="dark"] .keys-icon-button:disabled {
    background: var(--night-input) !important;
    color: #808080 !important;
  }

  /* The separated table exposes its wrapper in the existing 8px row gaps. */
  html[data-console-theme="dark"] :is(.gateway-usage-table-wrap, .gateway-usage-table) {
    background: var(--night-card) !important;
  }
  html[data-console-theme="dark"] .gateway-usage-table :is(tr, th, td) {
    box-shadow: none !important;
  }
  html[data-console-theme="dark"] .gateway-usage-table tbody tr {
    background: var(--night-card) !important;
  }
  html[data-console-theme="dark"] .gateway-usage-table tbody tr:hover td {
    background: var(--night-raised) !important;
  }
  html[data-console-theme="dark"] :is(.usage-type-pill, .usage-billing-pill, .usage-group-pill) {
    background: var(--night-input) !important;
    color: var(--night-text) !important;
    border-color: var(--night-line) !important;
  }
  html[data-console-theme="dark"] .gateway-usage-table .status-pill {
    background: #293732 !important;
    color: #a3c8b5 !important;
  }
  html[data-console-theme="dark"] .gateway-usage-table .status-pill.danger {
    background: #3b2b2b !important;
    color: #e6a3a3 !important;
  }

  /* Every contact tab shares the same stage, including channels without a QR. */
  html[data-console-theme="dark"] .staff-contact-channel-detail {
    background: var(--night-card) !important;
    border-color: var(--night-line) !important;
    box-shadow: none !important;
  }
  html[data-console-theme="dark"] .staff-contact-channel-detail-icon {
    background: var(--night-input) !important;
    color: var(--night-green) !important;
  }
  html[data-console-theme="dark"] :is(.staff-contact-method-label, .staff-contact-method-meta) {
    color: var(--night-muted) !important;
  }
  html[data-console-theme="dark"] .staff-contact-picker {
    background: transparent !important;
    color: var(--night-muted) !important;
  }
  html[data-console-theme="dark"] .staff-contact-picker:is(:hover, :focus-visible, .is-selected) {
    color: var(--night-green) !important;
  }
  html[data-console-theme="dark"] .staff-contact-zinox {
    border-color: var(--night-line) !important;
  }

  html[data-console-theme="dark"] .payment-channel-options {
    background: transparent !important;
  }
  html[data-console-theme="dark"] .payment-channel-options button {
    background: var(--night-input) !important;
    color: var(--night-text) !important;
    box-shadow: inset 0 0 0 1px var(--night-line) !important;
  }
  html[data-console-theme="dark"] .payment-channel-options button:hover:not(:disabled) {
    background: #383838 !important;
  }
  html[data-console-theme="dark"] .payment-channel-options button.active {
    background: #434343 !important;
    color: #f1f1f1 !important;
    box-shadow: inset 0 0 0 1px #686868 !important;
  }
  html[data-console-theme="dark"] .payment-channel-options button.active:hover:not(:disabled) {
    background: #494949 !important;
  }
  html[data-console-theme="dark"] .payment-channel-options button:disabled {
    background: var(--night-raised) !important;
    color: #808080 !important;
    box-shadow: none !important;
  }

  /* Keep the notification heading on the card surface rather than a table strip. */
  html[data-console-theme="dark"] .dashboard-notification-head {
    background: transparent !important;
  }
  html[data-console-theme="dark"] .dashboard-notification-icon {
    background: var(--night-input) !important;
    color: var(--night-green) !important;
    border-radius: 4px;
  }
  html[data-console-theme="dark"] .dashboard-notification-head div > span {
    color: var(--night-muted) !important;
  }
  html[data-console-theme="dark"] .dashboard-notification-head > strong {
    background: var(--night-raised) !important;
    color: var(--night-muted) !important;
    padding-inline: 10px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--night-line) !important;
    font-variant-numeric: tabular-nums;
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-theme-toggle-icon { transition: none; filter: none; }
}

.console-blur-swap{display:inline-grid;min-width:0;max-width:100%;vertical-align:middle}.console-blur-swap-block{display:grid;width:100%}.console-blur-swap>.console-blur-swap-layer{grid-area:1 / 1;min-width:0;align-self:center;opacity:0;filter:blur(3px);visibility:hidden;pointer-events:none;transition:opacity .15s ease,filter .2s ease,visibility 0s .2s}.console-blur-swap>.console-blur-swap-layer[data-active=true]{opacity:1;filter:blur(0);visibility:visible;pointer-events:auto;transition-delay:55ms,55ms,0s}@starting-style{.console-blur-swap>.console-blur-swap-layer[data-active=true]{opacity:0;filter:blur(3px)}}.console-blur-swap-layer[aria-hidden=true] .dashboard-loading-spinner svg{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.console-blur-swap>.console-blur-swap-layer,.console-blur-swap>.console-blur-swap-layer[data-active=true]{transition:none;filter:none}}