/* Semantic component layer. Loaded after legacy page styles during migration. */

:root[data-theme] body {
  background-color: var(--color-page-background);
  color: var(--color-text-primary);
}

:root[data-theme] :where(button) {
  border-color: var(--color-button-border);
  background-color: var(--color-button-background);
  color: var(--color-button-foreground);
}

:root[data-theme] :where(input, select, textarea) {
  border-color: var(--color-field-border);
  background-color: var(--color-field-background);
  color: var(--color-input-text);
  box-shadow: var(--shadow-field-inset);
}

:root[data-theme] :where(button):hover:not(:disabled) {
  border-color: var(--color-control-hover-border);
  background-color: var(--color-control-hover-background);
  color: var(--color-control-hover-foreground);
}

:root[data-theme] :where(input, select, textarea):hover:not(:disabled) {
  border-color: var(--color-field-hover-border);
}

:root[data-theme] :where(button):active:not(:disabled) {
  border-color: var(--color-control-active-border);
  background-color: var(--color-control-active-background);
  color: var(--color-control-active-foreground);
}

/* Quote direction is a deliberate selection state, so the generic button
 * hover/active layer must not wash out the selected buy/sell fill. */
:root[data-theme] #orderTicket button.quote-sell.is-draft-selected,
:root[data-theme] #orderTicket button.quote-sell.is-draft-selected:hover:not(:disabled),
:root[data-theme] #orderTicket button.quote-sell.is-draft-selected:active:not(:disabled) {
  border-color: var(--color-trade-sell-selected-background);
  background-color: var(--color-trade-sell-selected-background);
  color: var(--color-trade-sell-selected-text);
}

:root[data-theme] #orderTicket button.quote-buy.is-draft-selected,
:root[data-theme] #orderTicket button.quote-buy.is-draft-selected:hover:not(:disabled),
:root[data-theme] #orderTicket button.quote-buy.is-draft-selected:active:not(:disabled) {
  border-color: var(--color-trade-buy-selected-background);
  background-color: var(--color-trade-buy-selected-background);
  color: var(--color-trade-buy-selected-text);
}

:root[data-theme] :where(input, select, textarea):focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}

:root[data-theme] :where(input, select, textarea):disabled {
  border-color: var(--color-control-disabled-border);
  background-color: var(--color-control-disabled-background);
  color: var(--color-control-disabled-foreground);
  opacity: 1;
}

:root[data-theme] :where(.positive, .pnl-positive, .success) {
  color: var(--color-success) !important;
}

:root[data-theme] :where(.negative, .pnl-negative, .error) {
  color: var(--color-error) !important;
}

/* Shared app shell */
:root[data-theme] .app-shell {
  background:
    radial-gradient(circle at top left, var(--color-aurora-primary), transparent 28%),
    radial-gradient(circle at top right, var(--color-aurora-success), transparent 22%),
    linear-gradient(180deg, var(--color-page-background), var(--color-page-background-raised));
  color: var(--color-text-primary);
}

:root[data-theme] .app-shell-header {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-glass);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] body:has(#sessionsPage:not(.hidden)) .app-shell-header,
:root[data-theme] body:has(#dashboardPage:not(.hidden)) .app-shell-header,
:root[data-theme] body:has(#tradeCasesPage:not(.hidden)) .app-shell-header,
:root[data-theme] body:has(#chartFavoritesPage:not(.hidden)) .app-shell-header {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-glass);
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .app-shell-brand span,
  .shell-page-hero p,
  .dashboard-toolbar__copy p,
  .dashboard-helper-copy,
  .dashboard-stat-card__label,
  .dashboard-stat-card__meta,
  .dashboard-kpi-card__meta,
  .dashboard-recent-item__meta,
  .dashboard-latest__meta,
  .session-form__hint,
  .session-date-field__hint,
  .session-form__optional-mark,
  .session-list__footer-meta,
  .session-list__cell--date,
  .session-list__cell--opened,
  .chart-favorite-note,
  .chart-favorites-state,
  .trade-case-card__meta,
  .trade-case-card__notes,
  .trade-case-detail__meta
) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(
  .dashboard-toolbar__controls label,
  .dashboard-kpi-card__head,
  .dashboard-kpi-card__meta,
  .dashboard-panel__header span,
  .dashboard-panel__title span,
  .dashboard-quality-card span,
  .training-effort-card small,
  .training-effort-module__chart-head span,
  .training-effort-chart__item em,
  .aionis-score-summary__headline span,
  .aionis-score-summary__notes,
  .aionis-score-bar__ticks,
  .dashboard-ledger-tabs__nav span:not(.is-active)
) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(
  .dashboard-kpi-card__value,
  .dashboard-panel__header strong,
  .dashboard-panel__title strong,
  .training-effort-card strong,
  .training-effort-card__label span,
  .training-effort-module__chart-head strong,
  .training-effort-chart__item strong,
  .aionis-score-summary__headline strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] .dashboard-ledger-tabs__nav .is-active {
  color: var(--color-on-primary-subtle);
  background: var(--color-primary-subtle);
}

:root[data-theme] :is(
  .shell-nav-btn,
  .topbar-btn,
  .dashboard-tab-btn,
  .session-list__page-btn,
  .session-form__section-head,
  .mode-chip,
  .quick-pick-btn,
  .terminal-page-btn,
  .chart-display-btn,
  .chart-visual-toggle,
  .toolbar-icon-btn,
  .toolbar-segment-btn,
  .toolbar-popover-item,
  .menu-item
) {
  border-color: var(--color-button-border);
  background: var(--color-button-background);
  color: var(--color-button-foreground);
  box-shadow: none;
}

:root[data-theme] :is(
  .shell-nav-btn,
  .topbar-btn,
  .dashboard-tab-btn,
  .session-list__page-btn,
  .mode-chip,
  .quick-pick-btn,
  .risk-chip,
  .terminal-page-btn,
  .chart-display-btn,
  .chart-visual-toggle,
  .toolbar-icon-btn,
  .toolbar-segment-btn,
  .toolbar-popover-item,
  .menu-item
):hover:not(:disabled) {
  border-color: var(--color-button-hover-border);
  background: var(--color-button-hover-background);
  color: var(--color-control-hover-foreground);
}

:root[data-theme] :is(
  .shell-nav-btn.active,
  .dashboard-tab-btn.active,
  .mode-chip.active,
  .quick-pick-btn.is-active,
  .chart-display-btn.active,
  .panel-tabs button.active,
  .terminal-tabs button.active,
  .chart-subtoolbar-left button.active
) {
  border-color: transparent;
  background: var(--color-segment-active-background);
  color: var(--color-control-selected-foreground);
  box-shadow: var(--shadow-segment-active);
}

:root[data-theme] .chart-visual-option {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-primary);
}

:root[data-theme] .chart-visual-option:hover,
:root[data-theme] .chart-visual-option:focus-visible {
  border-color: var(--color-control-hover-border);
  background: var(--color-surface-hover);
  color: var(--color-control-hover-foreground);
  outline: none;
}

:root[data-theme] .chart-visual-option.is-selected {
  border-color: var(--color-control-selected-border);
  background: var(--color-control-selected-background);
  color: var(--color-control-selected-foreground);
}

:root[data-theme] .chart-visual-option.is-selected:hover,
:root[data-theme] .chart-visual-option.is-selected:focus-visible {
  border-color: var(--color-control-selected-border);
  background: var(--color-control-selected-background);
  color: var(--color-control-selected-foreground);
}

:root[data-theme] :is(.topbar-btn.accent, .dashboard-actions__primary, .app-dialog__button--primary, .primary-btn) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] :is(.topbar-btn.accent, .dashboard-actions__primary, .app-dialog__button--primary, .primary-btn):hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

:root[data-theme] :is(
  .user-menu-panel,
  .chart-display-popover,
  .chart-snapshot-popover,
  .chart-favorite-more-menu,
  .context-menu,
  .drawing-toolbar-shell,
  .toolbar-popover,
  .app-dialog__panel,
  .trade-tooltip,
  .dashboard-chart-tooltip
) {
  border-color: var(--color-card-border);
  background: var(--color-surface-popover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

:root[data-theme] .replay-speed-menu {
  border-color: var(--color-border-strong);
  background: var(--color-surface-popover);
}

:root[data-theme] :is(
  .user-menu-panel__label,
  .trade-tooltip__label,
  .dashboard-chart-tooltip__row,
  .chart-favorite-more summary
) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(
  .user-menu-panel__value,
  .trade-tooltip__title,
  .trade-tooltip__value,
  .dashboard-chart-tooltip__row strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] .chart-favorite-more summary:hover,
:root[data-theme] .chart-favorite-more[open] summary {
  border-color: var(--color-border-default);
  background: var(--color-surface-hover);
  color: var(--color-icon-primary);
}

:root[data-theme] .chart-favorite-remove-option {
  background: transparent;
  color: var(--color-text-secondary);
}

:root[data-theme] .chart-favorite-remove-option:hover:not(:disabled) {
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

:root[data-theme] .dashboard-chart-tooltip__row strong.dashboard-chart-tooltip__value--time {
  color: var(--color-link);
}

:root[data-theme] .dashboard-chart-tooltip__row strong.dashboard-chart-tooltip__value--count {
  color: var(--color-info);
}

:root[data-theme] .dashboard-chart-tooltip__row strong.dashboard-chart-tooltip__value--rate {
  color: var(--color-success);
}

:root[data-theme] .dashboard-chart-tooltip__row strong.dashboard-chart-tooltip__value--ratio {
  color: var(--color-warning);
}

:root[data-theme] :is(
  .user-menu-panel__divider,
  .context-menu-separator,
  .toolbar-divider,
  .toolbar-popover-divider
) {
  border-color: var(--color-border-subtle);
  background: var(--color-border-subtle);
}

/* Dashboard, sessions, cases and favorites */
:root[data-theme] :is(
  .dashboard-panel,
  .dashboard-stat-card,
  .dashboard-kpi-card,
  .dashboard-quality-card,
  .dashboard-calendar__week-card,
  .dashboard-training-heatmap,
  .dashboard-training-heatmap__month,
  .dashboard-scope-panel,
  .dashboard-latest,
  .dashboard-recent-item,
  .session-manager__panel,
  .session-manager__list-panel,
  .session-manager__create-panel,
  .session-form__section,
  .session-empty-state,
  .session-card,
  .chart-favorites-summary,
  .chart-favorites-table-wrap,
  .chart-favorites-state,
  .trade-case-card,
  .trade-case-detail-card,
  .trade-case-gallery-panel
) {
  border-color: var(--color-card-border);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

:root[data-theme] #chartFavoritesPage :is(
  .chart-favorites-summary,
  .chart-favorites-table-wrap,
  .chart-favorites-state
) {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

:root[data-theme] #chartFavoritesPage :is(
  .chart-favorite-chart strong,
  .chart-favorite-date strong,
  .chart-favorite-cell--time,
  .chart-favorite-cell--author
) {
  color: var(--color-text-primary);
}

:root[data-theme] #chartFavoritesPage :is(
  .chart-favorite-cell--index span,
  .chart-favorite-date span,
  .chart-favorite-more summary,
  .chart-favorites-state p
) {
  color: var(--color-text-muted);
}

:root[data-theme] #chartFavoritesPage .chart-favorite-cell--index span {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
}

:root[data-theme] #chartFavoritesPage .chart-favorite-chart span {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

:root[data-theme] #chartFavoritesPage .chart-favorite-note {
  border-color: var(--color-input-border);
  background: var(--color-input-background);
  color: var(--color-text-secondary);
}

:root[data-theme] :is(.shell-page-hero, .dashboard-toolbar__controls, .sessions-toolbar, .sessions-filter-chips) {
  border-color: var(--color-card-border);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

:root[data-theme] #dashboardPage .dashboard-tab-nav {
  border-color: transparent;
  background: var(--color-segment-background);
  box-shadow: none;
}

:root[data-theme] #sessionsPage .shell-page-hero {
  border-color: var(--color-border-subtle);
  background:
    radial-gradient(circle at 12% 0%, var(--color-aurora-primary), transparent 36%),
    radial-gradient(circle at 86% 8%, var(--color-aurora-success), transparent 30%),
    var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

:root[data-theme] #sessionsPage .shell-page-hero h1,
:root[data-theme] #sessionsPage :is(
  .session-manager__section-head strong,
  .session-form__section-head strong,
  .session-list__name-cell strong,
  .session-list__cell--profile strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] #sessionsPage :is(
  .shell-page-hero p,
  .sessions-toolbar label,
  .session-form label,
  .session-manager__section-head span,
  .session-form__section-head span,
  .session-form__hint,
  .session-list__footer-meta,
  .session-list__cell--date,
  .session-list__cell--opened,
  .session-list__cell--trades,
  .session-list__name-cell span,
  .session-list__cell--profile span
) {
  color: var(--color-text-muted);
}

:root[data-theme] #sessionsPage .sessions-hero-kicker {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

:root[data-theme] :is(.shell-page-hero h1, .dashboard-toolbar__copy h1) {
  color: var(--color-text-primary);
}

:root[data-theme] :is(.sessions-hero-kicker, .dashboard-toolbar__copy .sessions-hero-kicker) {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
  box-shadow: none;
}

:root[data-theme] :is(.dashboard-command-meta span, .sessions-hero-chip, .sessions-summary-pill, .sessions-filter-chips button) {
  border-color: transparent;
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] .sessions-filter-chips button.is-active {
  border-color: transparent;
  background: var(--color-segment-active-background);
  color: var(--color-on-primary-subtle);
  box-shadow: var(--shadow-segment-active);
}

:root[data-theme] :is(
  #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity,
  .dashboard-svg-chart,
  .dashboard-breakdown__row div
) {
  border-color: var(--color-border-subtle);
  background-color: var(--color-chart-background);
  color: var(--color-chart-text);
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity {
  border-color: var(--color-border-subtle);
  background: var(--color-chart-background);
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity .dashboard-panel__header {
  border-color: var(--color-divider);
  background: transparent;
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity .dashboard-panel__header strong {
  color: var(--color-chart-text);
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity .dashboard-panel__header span {
  color: var(--color-text-muted);
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity :is(
  .dashboard-svg-chart__grid,
  .dashboard-svg-chart__zero
) {
  stroke: var(--color-chart-grid);
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity .dashboard-svg-chart__axis-label {
  fill: var(--color-chart-text);
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity .dashboard-chart-meta {
  color: var(--color-text-muted);
}

:root[data-theme] .dashboard-svg-chart {
  background-image:
    linear-gradient(var(--color-chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-chart-grid) 1px, transparent 1px);
}

:root[data-theme] :is(.dashboard-svg-chart__axis, .dashboard-svg-chart__grid, .dashboard-daily-area-chart__grid) {
  stroke: var(--color-chart-grid);
}

:root[data-theme] :is(.dashboard-svg-chart__axis-label, .dashboard-daily-area-chart__axis-label, .dashboard-chart-meta) {
  fill: var(--color-chart-text);
  color: var(--color-text-muted);
}

:root[data-theme] #dashboardPage :is(
  .dashboard-svg-chart__axis-label,
  .dashboard-daily-area-chart__axis-label,
  .aionis-score-radar__label
) {
  fill: var(--color-chart-text);
}

:root[data-theme] :is(.session-row-menu__panel, .trade-cases-custom-select__menu) {
  border-color: var(--color-border-default);
  background: var(--color-surface-popover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

:root[data-theme] #tradeCasesPage :is(
  .trade-cases-toolbar,
  .trade-cases-filters,
  .trade-cases-maintenance,
  .trade-cases-empty,
  .trade-case-preview__dialog,
  .trade-case-setup-manager__dialog,
  .trade-case-setup-manager__panel
) {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] #tradeCasesPage :is(
  .trade-cases-toolbar__copy strong,
  .trade-case-card__date strong,
  .trade-case-preview__header strong,
  .trade-cases-empty strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] #tradeCasesPage :is(
  .trade-cases-toolbar__copy span,
  .trade-cases-inline-field span,
  .trade-cases-filters label,
  .trade-case-card__meta,
  .trade-case-card__summary-text,
  .trade-case-preview__header span,
  .trade-case-preview__footer span,
  .trade-cases-maintenance__copy span,
  .trade-cases-maintenance__message
) {
  color: var(--color-text-muted);
}

:root[data-theme] #tradeCasesPage :is(
  .trade-cases-inline-field select,
  .trade-cases-filters select,
  .trade-cases-filters input,
  .trade-cases-custom-select__trigger,
  .trade-case-setup-manager__panel input
) {
  border-color: var(--color-input-border);
  background: var(--color-input-background);
  color: var(--color-input-text);
  box-shadow: none;
}

:root[data-theme] #tradeCasesPage :is(
  .trade-cases-custom-select__trigger .is-placeholder,
  .trade-cases-custom-select__caret,
  .trade-cases-setup-manager-trigger > span
) {
  color: var(--color-text-muted);
}

:root[data-theme] #tradeCasesPage .trade-case-card__symbol {
  border: 1px solid var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

:root[data-theme] #tradeCasesPage .trade-case-card__meta span {
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #tradeCasesPage .trade-case-card__summary-text {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #tradeCasesPage :is(.trade-case-card__image-btn, .trade-case-card__image) {
  background: var(--color-chart-background);
}

:root[data-theme] #tradeCasesPage .trade-cases-pagination__summary {
  color: var(--color-text-muted);
}

:root[data-theme] #tradeCasesPage .trade-case-badge--win {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
  color: var(--color-on-success-subtle);
}

:root[data-theme] #tradeCasesPage .trade-case-badge--loss {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

:root[data-theme] #tradeCaseDetailPage .trade-case-badge--loss {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

:root[data-theme] #tradeCasesPage :is(.trade-case-badge--flat, .trade-case-badge--unreviewed) {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #tradeCasesPage .trade-case-preview {
  background: var(--color-overlay);
}

:root[data-theme] #tradeCaseOverlayRoot .trade-case-preview {
  background: var(--color-overlay);
}

:root[data-theme] #tradeCaseOverlayRoot .trade-case-preview__dialog {
  border-color: var(--color-border-default);
  background: var(--color-surface-popover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

:root[data-theme] #tradeCaseOverlayRoot .trade-case-preview__header strong {
  color: var(--color-text-primary);
}

:root[data-theme] #tradeCaseOverlayRoot :is(.trade-case-preview__header span, .trade-case-preview__footer span) {
  color: var(--color-text-muted);
}

:root[data-theme] #tradeCaseOverlayRoot :is(.trade-case-preview__close, .trade-case-preview__nav) {
  border-color: var(--color-input-border);
  background: var(--color-surface-subtle);
  color: var(--color-icon-primary);
}

:root[data-theme] #tradeCaseOverlayRoot .trade-case-preview__image-wrap {
  border-color: var(--color-border-default);
  background: var(--color-chart-background);
}

/* Trade case detail is a separate route with its own stateful chrome. */
:root[data-theme] #tradeCaseDetailPage .trade-case-detail-topbar {
  border-color: var(--color-border-default);
  background:
    radial-gradient(circle at top left, var(--color-aurora-primary), transparent 42%),
    var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] #tradeCaseDetailPage :is(
  .trade-case-detail-topbar__copy h1,
  .trade-case-detail-card__head strong,
  .trade-case-facts-group h3,
  .trade-case-fact strong,
  .trade-case-detail-state strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] #tradeCaseDetailPage :is(
  .trade-case-detail-topbar__copy p,
  .trade-case-detail-card__head span,
  .trade-case-fact span,
  .trade-case-detail-form__status,
  .trade-case-detail-state,
  .trade-case-detail-note-empty
) {
  color: var(--color-text-muted) !important;
}

:root[data-theme] #tradeCaseDetailPage :is(
  .trade-case-detail-position,
  .trade-case-detail-pill,
  .trade-case-fact,
  .trade-case-detail-note-block,
  .trade-case-detail-form__status
) {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #tradeCaseDetailPage .trade-case-detail-note-block span {
  color: var(--color-link);
}

:root[data-theme] #tradeCaseDetailPage .trade-case-detail-note-block p {
  color: var(--color-text-primary);
}

:root[data-theme] #tradeCaseDetailPage :is(
  .trade-case-detail-form input,
  .trade-case-detail-form select,
  .trade-case-detail-form textarea
) {
  border-color: var(--color-input-border);
  background: var(--color-input-background);
  color: var(--color-input-text);
}

:root[data-theme] #tradeCaseDetailPage .trade-case-detail-form label {
  color: var(--color-text-secondary);
}

:root[data-theme] #tradeCaseDetailPage :is(.trade-case-detail-image-fallback, .trade-case-detail-state) {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
}

:root[data-theme] #tradeCaseDetailPage .trade-case-detail-message--success {
  background: var(--color-success-subtle);
  color: var(--color-on-success-subtle);
}

:root[data-theme] #tradeCaseDetailPage :is(.trade-case-detail-message--error, .trade-case-detail-state--error strong) {
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle) !important;
}

:root[data-theme] #sessionsPage :is(
  .sessions-page-panel,
  .sessions-toolbar,
  .sessions-filter-chips,
  .session-manager__list-panel,
  .session-manager__create-panel,
  .session-form__section,
  .session-form__resolved,
  .session-form__message,
  .session-form__legacy-note
) {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] #sessionsPage .session-form__section--data {
  background:
    radial-gradient(circle at top right, var(--color-aurora-primary), transparent 34%),
    var(--color-surface-card);
}

:root[data-theme] #sessionsPage :is(
  .session-form input,
  .session-form select,
  .session-form textarea,
  .sessions-toolbar input,
  .sessions-toolbar select,
  .session-list__page-jump input,
  .session-list__page-size select
) {
  border-color: var(--color-input-border);
  background: var(--color-input-background);
  color: var(--color-input-text);
  box-shadow: none;
}

:root[data-theme] #sessionsPage :is(
  .session-form input,
  .session-form select,
  .session-form textarea,
  .sessions-toolbar input,
  .sessions-toolbar select,
  .session-list__page-jump input,
  .session-list__page-size select
):focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}

:root[data-theme] #sessionsPage .session-list__table thead th {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #sessionsPage .session-list__table tbody td {
  border-color: var(--color-border-subtle);
  background: var(--color-session-row-background);
  color: var(--color-text-primary);
  box-shadow: none;
}

:root[data-theme] #sessionsPage .session-list__table tbody tr:hover td {
  border-color: var(--color-border-default);
  background: var(--color-session-row-hover-background);
}

:root[data-theme] #sessionsPage .session-list__table tbody tr.is-opening td {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

:root[data-theme] #sessionsPage .session-list__heading--actions {
  border-left: 0;
  background: var(--color-surface-subtle);
  box-shadow: none;
}

:root[data-theme] #sessionsPage .session-list__cell--actions {
  border-left: 0;
  background: var(--color-session-row-background);
  box-shadow: none;
}

:root[data-theme] #sessionsPage :is(
  .session-list__heading--actions,
  .session-list__cell--actions
)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -18px;
  width: 18px;
  background-color: inherit;
  pointer-events: none;
}

:root[data-theme] #sessionsPage .session-list__table tbody tr:hover .session-list__cell--actions {
  background: var(--color-session-row-hover-background);
}

:root[data-theme] #sessionsPage .session-list__table tbody tr.is-opening .session-list__cell--actions {
  background: var(--color-primary-subtle);
}

:root[data-theme] #sessionsPage :is(
  .sessions-page-summary > span,
  .session-list__sequence,
  .session-row-menu__toggle
) {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #sessionsPage :is(
  .sessions-summary-pill strong,
  .session-progress__meta strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] #sessionsPage .session-progress__meta {
  color: var(--color-text-muted);
}

:root[data-theme] #sessionsPage .session-list__status {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #sessionsPage .session-list__status.is-active {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
  color: var(--color-on-success-subtle);
}

:root[data-theme] #sessionsPage .session-list__status.is-completed {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

:root[data-theme] :is(
  .session-challenge-badge,
  .challenge-status--active,
  .simulation-card--challenge-status--active
) {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-subtle) !important;
  color: var(--color-on-primary-subtle) !important;
}

:root[data-theme] .session-challenge-badge--muted {
  border-color: var(--color-border-default) !important;
  background: var(--color-surface-subtle) !important;
  color: var(--color-text-secondary) !important;
}

:root[data-theme] :is(
  .challenge-status--passed,
  .simulation-card--challenge-status--passed
) {
  border-color: var(--color-success) !important;
  background: var(--color-success-subtle) !important;
  color: var(--color-on-success-subtle) !important;
}

:root[data-theme] :is(
  .challenge-status--locked,
  .simulation-card--challenge-status--locked
) {
  border-color: var(--color-warning) !important;
  background: var(--color-warning-subtle) !important;
  color: var(--color-on-warning-subtle) !important;
}

:root[data-theme] :is(
  .challenge-status--failed,
  .simulation-card--challenge-status--failed
) {
  border-color: var(--color-error) !important;
  background: var(--color-error-subtle) !important;
  color: var(--color-on-error-subtle) !important;
}

:root[data-theme] #sessionsPage .topbar-btn.accent {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

:root[data-theme] #sessionsPage :is(
  .sessions-page-status__overview > span,
  .session-list__page-size > span,
  .session-list__pagination-ellipsis
) {
  color: var(--color-text-muted);
}

:root[data-theme] #sessionsPage .session-list__page-btn {
  border-color: var(--color-input-border);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #sessionsPage .session-list__page-btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
  box-shadow: none;
}

:root[data-theme] #sessionsPage :is(.sessions-hero-chip, .sessions-summary-pill, .sessions-filter-chips button) {
  border-color: var(--color-input-border);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] #sessionsPage .session-row-menu__panel {
  border-color: var(--color-border-default);
  background: var(--color-surface-popover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

:root[data-theme] :is(.session-row-menu__panel button, .trade-cases-custom-select__option) {
  color: var(--color-text-secondary);
}

:root[data-theme] :is(.session-row-menu__panel button, .trade-cases-custom-select__option):hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .dashboard-panel__header,
  .dashboard-ledger-tabs,
  .dashboard-calendar__head,
  .session-manager__header,
  .session-manager__section-head,
  .session-list__footer,
  .chart-favorites-heading,
  .trade-case-gallery-toolbar
) {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .dashboard-table,
  .session-list__table,
  .session-manager__table,
  .chart-favorites-table,
  .terminal-table
) {
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .dashboard-table thead th,
  .session-list__table thead th,
  .session-manager__table thead th,
  .chart-favorites-table thead th,
  .terminal-table thead th
) {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] :is(
  .dashboard-table tbody td,
  .session-list__table tbody td,
  .session-manager__table tbody td,
  .chart-favorites-table tbody td,
  .terminal-table tbody td
) {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .dashboard-table tbody tr,
  .session-list__table tbody tr,
  .session-manager__table tbody tr,
  .chart-favorites-table tbody tr,
  .terminal-table tbody tr
):hover td {
  background: var(--color-surface-hover);
}

:root[data-theme] .session-list__table tbody tr.is-entering td {
  border-color: var(--color-border-selected);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

:root[data-theme] :is(.dashboard-empty, .dashboard-empty--soft, .terminal-empty, .position-compact-card--empty) {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

:root[data-theme] :is(.session-progress, .aionis-score-bar__track, .dashboard-bar-chart__track) {
  background: var(--color-surface-active);
}

:root[data-theme] .aionis-score-bar__fill {
  background: var(--color-primary);
}

:root[data-theme] #sessionsPage .session-progress__bar {
  background: var(--color-surface-active);
}

:root[data-theme] #sessionsPage .session-progress__bar span {
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  box-shadow: none;
}

:root[data-theme] #sessionsPage :is(.session-list__footer, .session-list__footer-meta span) {
  border-color: var(--color-border-subtle);
}

:root[data-theme] #sessionsPage .session-list__footer-meta span {
  background: var(--color-surface-subtle);
}

:root[data-theme] #sessionsPage .session-type-toggle {
  border-color: var(--color-border-default);
  background: var(--color-surface-subtle);
}

:root[data-theme] #sessionsPage .session-type-toggle__btn {
  background: transparent;
  color: var(--color-text-secondary);
}

:root[data-theme] #sessionsPage .session-type-toggle__btn.is-active {
  border-color: var(--color-border-selected);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
  box-shadow: none;
}

:root[data-theme] .session-row-menu__item {
  background: transparent;
}

:root[data-theme] .session-row-menu__item.danger {
  color: var(--color-error);
}

:root[data-theme] .session-row-menu__item.danger:hover {
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

:root[data-theme] #dashboardPage :is(.training-effort-card, .training-effort-module__chart-card) {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] #dashboardPage .training-effort-chart__track {
  border-color: var(--color-border-subtle);
  background:
    repeating-linear-gradient(0deg, var(--color-grid-pattern) 0 1px, transparent 1px 24px),
    var(--color-chart-background);
}

:root[data-theme] #dashboardPage .aionis-score-bar__marker {
  border-color: var(--color-surface-card);
  background: var(--color-text-primary);
}

/* Product visual hierarchy -------------------------------------------------
 * Cards, fields, buttons and dividers must not share the same visual weight.
 * This block is intentionally semantic and page-spanning: it replaces the
 * legacy "one outlined rectangle for everything" language. */
:root[data-theme] .app-shell-header {
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-card);
}

:root[data-theme] :is(.app-shell-header, .shell-page-hero) {
  border-radius: 16px;
}

:root[data-theme] :is(
  .dashboard-panel,
  .dashboard-kpi-card,
  .dashboard-stat-card,
  .dashboard-training-heatmap,
  .dashboard-training-heatmap__month,
  .sessions-page-panel,
  .session-manager__list-panel,
  .session-manager__create-panel,
  .chart-favorites-summary,
  .chart-favorites-table-wrap,
  .chart-favorites-state,
  .trade-case-card,
  .trade-case-detail-card,
  .trade-case-gallery-panel
) {
  border-color: var(--color-card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

:root[data-theme] :is(
  .dashboard-panel__header,
  .dashboard-ledger-tabs,
  .dashboard-calendar__head,
  .session-manager__header,
  .session-manager__section-head,
  .session-list__footer,
  .chart-favorites-heading,
  .trade-case-gallery-toolbar
) {
  border-color: var(--color-divider);
  background: transparent;
}

:root[data-theme] :is(
  .dashboard-score-grid__item,
  .dashboard-quality-card,
  .dashboard-calendar__week-card,
  .training-effort-card,
  .training-effort-module__chart-card,
  .session-form__section,
  .session-form__resolved,
  .session-form__message,
  .session-form__legacy-note,
  .dashboard-recent-item,
  .trade-case-card__summary-text,
  .trade-case-detail-position,
  .trade-case-detail-pill,
  .trade-case-fact,
  .trade-case-detail-note-block,
  .risk-size-block,
  .info-block,
  .list-item,
  .position-compact-card,
  .simulation-card,
  .session-stat-card,
  .panel-card,
  .account-card,
  .compact-card
) {
  border-color: transparent;
  background: var(--color-surface-subtle);
  box-shadow: none;
}

:root[data-theme] :is(
  .shell-nav-btn,
  .topbar-btn,
  .dashboard-tab-btn,
  .session-list__page-btn,
  .mode-chip,
  .quick-pick-btn,
  .terminal-page-btn,
  .chart-display-btn,
  .chart-visual-toggle,
  .toolbar-icon-btn,
  .toolbar-segment-btn,
  .toolbar-popover-item,
  .menu-item,
  .tool-icon,
  .session-row-menu__toggle,
  .app-dialog__button--secondary
) {
  border-color: var(--color-button-border);
  background: var(--color-button-background);
}

:root[data-theme] :is(
  .shell-nav-btn,
  .topbar-btn,
  .dashboard-tab-btn,
  .session-list__page-btn,
  .mode-chip,
  .quick-pick-btn,
  .terminal-page-btn,
  .chart-display-btn,
  .chart-visual-toggle,
  .toolbar-icon-btn,
  .toolbar-segment-btn,
  .toolbar-popover-item,
  .menu-item,
  .tool-icon,
  .session-row-menu__toggle,
  .app-dialog__button--secondary
):hover:not(:disabled) {
  border-color: var(--color-button-hover-border);
  background: var(--color-button-hover-background);
}

:root[data-theme] :is(
  .shell-nav-btn.active,
  .dashboard-tab-btn.active,
  .mode-chip.active,
  .quick-pick-btn.is-active,
  .chart-display-btn.active,
  .panel-tabs button.active,
  .terminal-tabs button.active,
  .chart-subtoolbar-left button.active,
  .session-type-toggle__btn.is-active,
  .sessions-filter-chips button.is-active
) {
  border-color: transparent;
  background: var(--color-segment-active-background);
  box-shadow: var(--shadow-segment-active);
}

:root[data-theme] :is(
  .dashboard-toolbar__controls,
  .sessions-toolbar,
  .sessions-filter-chips,
  .session-type-toggle
) {
  border-color: transparent;
  background: var(--color-segment-background);
  box-shadow: none;
}

:root[data-theme] :is(
  .dashboard-toolbar__controls select,
  .sessions-toolbar input,
  .sessions-toolbar select,
  .session-form input,
  .session-form select,
  .session-form textarea,
  .session-list__page-jump input,
  .session-list__page-size select,
  .theme-select,
  .trade-cases-inline-field select,
  .trade-cases-filters select,
  .trade-cases-filters input,
  .trade-cases-custom-select__trigger,
  .trade-case-setup-manager__panel input,
  .trade-case-detail-form input,
  .trade-case-detail-form select,
  .trade-case-detail-form textarea,
  .chart-favorite-note,
  .app-dialog__input,
  .favorite-note-editor__textarea,
  .fib-levels-editor input,
  .fib-levels-editor select
) {
  border-color: var(--color-field-border);
  background: var(--color-field-background);
  color: var(--color-input-text);
  box-shadow: var(--shadow-field-inset);
}

:root[data-theme] #dashboardPage :is(
  .dashboard-panel__header,
  .dashboard-calendar__head,
  .dashboard-ledger-tabs
) {
  border-color: var(--color-divider);
  background: transparent;
}

:root[data-theme] #dashboardPage :is(
  .dashboard-svg-chart,
  .dashboard-training-heatmap__grid,
  .training-effort-chart__track
) {
  border-color: transparent;
}

:root[data-theme] #dashboardPage :is(
  .dashboard-stat-card,
  .dashboard-panel,
  .dashboard-kpi-card,
  .dashboard-recent-item,
  .training-effort-card,
  .training-effort-module__chart-card
):hover {
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

:root[data-theme] #sessionsPage .session-list__table thead th,
:root[data-theme] :is(.chart-favorites-table, .terminal-table) thead th {
  border-color: var(--color-divider);
  background: var(--color-surface-subtle);
}

:root[data-theme] #sessionsPage .session-list__table tbody td {
  border-color: var(--color-divider);
  background: var(--color-session-row-background);
}

:root[data-theme] :is(.chart-favorites-table, .terminal-table) tbody td {
  border-color: var(--color-divider);
  background: var(--color-surface-card);
}

:root[data-theme] #tradeCasesPage :is(.trade-cases-toolbar, .trade-cases-filters) {
  border-color: var(--color-card-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

:root[data-theme] #tradeCasesPage .trade-cases-filters {
  background: var(--color-surface-card);
}

:root[data-theme] #tradeCasesPage .trade-case-card__body {
  border-color: var(--color-divider);
}

:root[data-theme] #tradeCasesPage :is(
  .trade-case-card__meta span,
  .trade-case-badge--flat,
  .trade-case-badge--unreviewed
) {
  border-color: transparent;
  background: var(--color-surface-subtle);
}

:root[data-theme] #chartFavoritesPage :is(.chart-favorites-summary, .chart-favorites-table-wrap) {
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-card);
}

:root[data-theme] #chartFavoritesPage .chart-favorites-summary {
  background: var(--color-surface-card);
}

:root[data-theme] :is(
  .terminal-topbar,
  .chart-subtoolbar,
  .right-panel-head,
  .terminal-header,
  .account-summary-bar,
  .current-section-title,
  .advanced-tabs,
  .terminal-table-footer
) {
  border-color: var(--color-divider);
}

:root[data-theme] :is(.panel-tabs, .terminal-tabs, .chart-subtoolbar-left) {
  border-color: transparent;
  background: var(--color-segment-background);
}

:root[data-theme] :is(.panel-tabs button, .terminal-tabs button, .chart-subtoolbar-left button) {
  border-color: transparent;
  background: transparent;
}

:root[data-theme] .left-toolbar .tool-icon {
  border-color: transparent;
  background: var(--color-icon-button-background);
  box-shadow: none;
}

:root[data-theme] .left-toolbar .tool-icon:hover:not(:disabled) {
  border-color: var(--color-control-selected-border);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft), var(--shadow-sm);
  transform: translateX(2px);
}

:root[data-theme] .left-toolbar .tool-icon.active {
  border-color: var(--color-control-selected-border);
  background: var(--color-control-selected-background);
  color: var(--color-control-selected-foreground);
  box-shadow:
    inset 3px 0 0 var(--color-primary),
    0 0 0 1px var(--color-focus-ring-soft);
  transform: none;
}

:root[data-theme] .left-toolbar .tool-icon.active:hover:not(:disabled) {
  background: var(--color-control-selected-background);
  box-shadow:
    inset 3px 0 0 var(--color-primary),
    0 0 0 3px var(--color-focus-ring-soft);
  transform: none;
}

:root[data-theme] :is(
  .right-panel,
  .right-panel-body,
  .bottom-terminal,
  .terminal-body-shell,
  .left-toolbar
) {
  border-color: var(--color-divider);
}

/* Standalone entry points use the same restrained hierarchy. */
:root[data-theme] :is(
  .auth-shell,
  body > .card:has(#registerForm),
  body:has(.wrap > .top) :is(.summary-card, .card),
  .launch-panel,
  body:has(> h1 + .note) > .card
) {
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-card);
}

:root[data-theme] .auth-shell {
  box-shadow: var(--shadow-lg);
}

:root[data-theme] :is(
  .auth-shell input,
  .auth-shell select,
  .auth-shell textarea,
  body > .card:has(#registerForm) input,
  body > .card:has(#registerForm) select,
  body:has(.wrap > .top) input,
  body:has(.wrap > .top) select,
  body:has(.wrap > .top) textarea,
  body:has(> h1 + .note) input,
  body:has(> h1 + .note) select
) {
  border-color: var(--color-field-border);
  background: var(--color-field-background);
  color: var(--color-input-text);
  box-shadow: var(--shadow-field-inset);
}

:root[data-theme] body:has(.wrap > .top) .table-wrap {
  border-color: var(--color-divider);
}

:root[data-theme] body:has(> h1 + .note) :is(.metric, .card) {
  border-color: var(--color-card-border);
}

:root[data-theme] :is(
  .user-menu-panel,
  .chart-display-popover,
  .chart-snapshot-popover,
  .chart-favorite-more-menu,
  .context-menu,
  .drawing-toolbar-shell,
  .toolbar-popover,
  .app-dialog__panel,
  .trade-tooltip,
  .replay-speed-menu,
  .dashboard-chart-tooltip,
  .session-row-menu__panel,
  .trade-cases-custom-select__menu
) {
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-lg);
}

/* Training room and chart chrome */
:root[data-theme] .terminal-app {
  background: var(--color-page-background);
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .terminal-topbar,
  .chart-subtoolbar,
  .bottom-terminal,
  .terminal-header,
  .terminal-body-shell,
  .right-panel,
  .right-panel-head,
  .right-panel-body,
  .left-toolbar,
  .floating-replay-control,
  .account-summary-bar,
  .advanced-tabs,
  .current-section-title,
  .terminal-table-footer
) {
  border-color: var(--color-divider);
  color: var(--color-text-primary);
}

:root[data-theme] .terminal-topbar {
  background: var(--color-surface-glass-strong);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] :is(.chart-subtoolbar, .right-panel, .right-panel-body, .bottom-terminal, .terminal-body-shell) {
  background: var(--color-surface);
}

:root[data-theme] :is(.right-panel-head, .terminal-header, .account-summary-bar, .current-section-title, .advanced-tabs, .terminal-table-footer) {
  background: var(--color-surface-subtle);
}

:root[data-theme] .left-toolbar {
  background: var(--color-page-background-raised);
  box-shadow: inset -1px 0 0 var(--color-divider);
}

:root[data-theme] .chart-stage {
  background: var(--color-chart-background);
}

:root[data-theme] .chart-wrap {
  background: var(--color-chart-background);
}

:root[data-theme] :is(
  .training-room-session__line,
  .topbar-meta,
  .right-panel-head span,
  .terminal-header,
  .terminal-tabs button,
  .section-title,
  .panel-inline-note,
  .info-row span,
  .summary-cell span,
  .simulation-card span,
  .session-stat-card span,
  .current-section-title,
  .terminal-empty,
  .quote-spread,
  .quick-pick-row__label,
  .chart-header-hover-info.is-placeholder
) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(
  .training-room-session__line > strong,
  .topbar-meta strong,
  .right-panel-head strong,
  .terminal-header strong,
  .info-row strong,
  .summary-cell strong,
  .simulation-card strong,
  .session-stat-card strong,
  .terminal-title,
  .position-compact-card strong,
  .chart-header-ohlc,
  .chart-header-hover-info
) {
  color: var(--color-text-primary);
}

:root[data-theme] .bulk-close-button {
  border-color: var(--color-control-border);
  background: var(--color-control-background);
  color: var(--color-control-foreground);
}

:root[data-theme] .bulk-close-button:hover:not(:disabled),
:root[data-theme] .bulk-close-control.is-open .bulk-close-button {
  border-color: var(--color-control-hover-border);
  background: var(--color-control-hover-background);
  color: var(--color-control-hover-foreground);
}

:root[data-theme] .bulk-close-button:disabled {
  border-color: var(--color-control-disabled-border);
  background: var(--color-control-disabled-background);
  color: var(--color-control-disabled-foreground);
}

:root[data-theme] .bulk-close-menu {
  border-color: var(--color-bulk-close-dialog-border);
  background: var(--color-bulk-close-dialog-background);
  color: var(--color-bulk-close-dialog-text);
  box-shadow: var(--shadow-md);
}

/* The confirmation surface intentionally owns its controls. The generic
 * button migration layer must not turn the reference-style actions back into
 * transparent buttons or recolor the selected radio. */
:root[data-theme] .bulk-close-menu :is(.bulk-close-confirm__cancel, .bulk-close-confirm__submit) {
  border: 0;
  box-shadow: none;
  text-shadow: none;
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__cancel,
:root[data-theme] .bulk-close-menu .bulk-close-confirm__cancel:hover:not(:disabled),
:root[data-theme] .bulk-close-menu .bulk-close-confirm__cancel:active:not(:disabled),
:root[data-theme] .bulk-close-menu .bulk-close-confirm__cancel:focus-visible {
  border-color: var(--color-bulk-close-dialog-cancel-background);
  background: var(--color-bulk-close-dialog-cancel-background);
  color: var(--color-bulk-close-dialog-cancel-text);
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__submit,
:root[data-theme] .bulk-close-menu .bulk-close-confirm__submit:hover:not(:disabled),
:root[data-theme] .bulk-close-menu .bulk-close-confirm__submit:active:not(:disabled),
:root[data-theme] .bulk-close-menu .bulk-close-confirm__submit:focus-visible {
  border-color: var(--color-bulk-close-dialog-confirm-background);
  background: var(--color-bulk-close-dialog-confirm-background);
  color: var(--color-bulk-close-dialog-confirm-text);
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__submit:disabled {
  border-color: var(--color-control-disabled-border);
  background: var(--color-control-disabled-background);
  color: var(--color-control-disabled-foreground);
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__option,
:root[data-theme] .bulk-close-menu .bulk-close-confirm__option:hover:not(:disabled),
:root[data-theme] .bulk-close-menu .bulk-close-confirm__option:active:not(:disabled),
:root[data-theme] .bulk-close-menu .bulk-close-confirm__option:focus-visible {
  border-color: transparent;
  box-shadow: none;
  background: var(--color-bulk-close-dialog-option-background);
  color: var(--color-bulk-close-dialog-text);
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__option.is-selected {
  background: var(--color-bulk-close-dialog-option-selected);
  color: var(--color-bulk-close-dialog-text);
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__option:disabled,
:root[data-theme] .bulk-close-menu .bulk-close-confirm__option.is-disabled {
  background: var(--color-bulk-close-dialog-option-disabled);
  color: var(--color-text-disabled);
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__choice {
  border-color: var(--color-bulk-close-dialog-radio-border);
  background: transparent;
  box-shadow: none;
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__option.is-selected .bulk-close-confirm__choice {
  border-color: var(--color-bulk-close-dialog-radio-selected);
  background: var(--color-bulk-close-dialog-radio-selected);
  box-shadow: none;
}

:root[data-theme] .bulk-close-menu .bulk-close-confirm__option:disabled .bulk-close-confirm__choice,
:root[data-theme] .bulk-close-menu .bulk-close-confirm__option.is-disabled .bulk-close-confirm__choice {
  border-color: var(--color-bulk-close-dialog-radio-disabled);
  background: var(--color-bulk-close-dialog-radio-disabled);
}

:root[data-theme] :is(.floating-replay-control, .drawing-toolbar-shell) {
  background: var(--color-surface-glass-strong);
  box-shadow: var(--shadow-lg);
}

:root[data-theme] .tool-icon {
  border-color: var(--color-control-border);
  background: var(--color-control-background);
  color: var(--color-icon-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

:root[data-theme] .tool-icon:hover:not(:disabled) {
  border-color: var(--color-control-hover-border);
  background: var(--color-control-hover-background);
}

:root[data-theme] .tool-icon.active {
  border-color: var(--color-control-selected-border);
  background: var(--color-control-selected-background);
  color: var(--color-control-selected-foreground);
}

:root[data-theme] .tool-icon-svg :is(line, polyline, path, circle) {
  stroke: currentColor;
  pointer-events: none;
}

:root[data-theme] .tool-icon-svg {
  pointer-events: none;
}

:root[data-theme] .tool-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 120;
  left: calc(100% + 10px);
  top: 50%;
  min-width: max-content;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-surface-popover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

:root[data-theme] .left-toolbar,
:root[data-theme] .left-toolbar-group {
  overflow: visible;
}

:root[data-theme] .tool-icon:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(0, -50%);
  visibility: visible;
}

:root[data-theme] .tool-icon--clear-drawings.active::after {
  opacity: 0;
  visibility: hidden;
}

:root[data-theme] .tool-icon-svg .fib-svg-hollow-point {
  fill: var(--color-surface-card);
}

:root[data-theme] .tool-icon:disabled {
  border-color: var(--color-control-disabled-border);
  background: var(--color-control-disabled-background);
  color: var(--color-control-disabled-foreground);
  opacity: 1;
}

:root[data-theme] :is(
  .risk-size-block,
  .info-block,
  .list-item,
  .position-compact-card,
  .simulation-card,
  .session-stat-card,
  .panel-card,
  .account-card,
  .compact-card
) {
  border-color: transparent;
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

:root[data-theme] .list-item:hover {
  background: var(--color-surface-hover);
}

:root[data-theme] .trade-sell {
  border-color: var(--color-error);
  background: var(--color-trade-sell-background);
  color: var(--color-trade-sell-text);
}

:root[data-theme] .trade-buy {
  border-color: var(--color-primary);
  background: var(--color-trade-buy-background);
  color: var(--color-trade-buy-text);
}

:root[data-theme] #orderTicket button.quote-sell {
  border-color: var(--color-order-entry-sell);
  background: var(--color-surface-card);
  color: var(--color-trade-sell-text);
}

:root[data-theme] #orderTicket button.quote-buy {
  border-color: var(--color-order-entry-buy);
  background: var(--color-surface-card);
  color: var(--color-trade-buy-text);
}

:root[data-theme] #orderTicket button.quote-sell:not(.is-draft-selected):hover {
  background: var(--color-trade-sell-background);
}

:root[data-theme] #orderTicket button.quote-buy:not(.is-draft-selected):hover {
  background: var(--color-trade-buy-background);
}

:root[data-theme] #orderTicket button.quote-sell.is-draft-selected {
  border-color: var(--color-trade-sell-selected-background);
  background: var(--color-trade-sell-selected-background);
  color: var(--color-trade-sell-selected-text);
}

:root[data-theme] #orderTicket button.quote-buy.is-draft-selected {
  border-color: var(--color-trade-buy-selected-background);
  background: var(--color-trade-buy-selected-background);
  color: var(--color-trade-buy-selected-text);
}

/* The Training Room order ticket is one continuous form, not nested cards. */
:root[data-theme] #orderTicket .risk-size-block {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

:root[data-theme] #orderTicket :is(.order-ticket-mode__button, .order-ticket-stepper) {
  border-color: var(--color-field-border);
  background: var(--color-field-background);
  color: var(--color-input-text);
}

:root[data-theme] #orderTicket .order-ticket-stepper__button {
  border-color: var(--color-field-border);
  background: transparent;
  color: var(--color-icon-secondary);
}

:root[data-theme] #orderTicket .order-ticket-stepper__button:hover:not(:disabled) {
  border-color: var(--color-field-hover-border);
  background: var(--color-control-hover-background);
  color: var(--color-control-hover-foreground);
}

:root[data-theme] #orderTicket .order-ticket-mode__menu {
  border-color: var(--color-card-border);
  background: var(--color-surface-popover);
}

:root[data-theme] #orderTicket .order-ticket-mode__option.is-selected {
  background: var(--color-control-selected-background);
  color: var(--color-control-selected-foreground);
}

:root[data-theme] #orderTicket .order-type-segment button.is-active {
  background: var(--color-segment-active-background);
  color: var(--color-text-primary);
}

:root[data-theme] #orderTicket .risk-size-status,
:root[data-theme] #orderTicket .risk-size-result {
  background: var(--color-surface-subtle);
}

:root[data-theme] :is(.panel-inline-note[data-state="saving"], .chart-snapshot-status) {
  color: var(--color-info);
}

:root[data-theme] :is(.panel-inline-note[data-state="saved"], .eod-room-safe, .challenge-status--passed) {
  color: var(--color-success);
}

:root[data-theme] :is(.panel-inline-note[data-state="error"], .eod-room-danger, .eod-room-failed, .challenge-status--failed) {
  color: var(--color-error);
}

:root[data-theme] .intrabar-price-meta--urgent {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
  box-shadow: var(--shadow-md);
}

:root[data-theme] .terminal-resize-handle {
  border-color: var(--color-border-subtle);
}

:root[data-theme] .terminal-resize-handle:hover,
:root[data-theme] .bottom-terminal.resizing .terminal-resize-handle {
  background: var(--color-primary-subtle);
}

:root[data-theme] .terminal-resize-grip {
  background: var(--color-border-strong);
}

:root[data-theme] :is(.eod-room-warning, .challenge-status--locked) {
  color: var(--color-warning);
}

:root[data-theme] .app-dialog__backdrop {
  background: var(--color-overlay);
}

:root[data-theme] :is(.app-dialog__header, .app-dialog__actions) {
  border-color: var(--color-divider);
  background: var(--color-surface-popover);
}

:root[data-theme] :is(
  .app-dialog__message,
  .app-dialog__label,
  .favorite-note-editor__field > span,
  .favorite-note-editor__footer,
  .fib-levels-editor__summary
) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(
  .app-dialog__input,
  .favorite-note-editor__textarea,
  .fib-levels-editor input,
  .fib-levels-editor select
) {
  border-color: var(--color-input-border);
  background: var(--color-input-background);
  color: var(--color-input-text);
}

:root[data-theme] .favorite-note-editor__textarea::placeholder {
  color: var(--color-placeholder);
}

:root[data-theme] .favorite-note-editor__footer strong {
  color: var(--color-text-secondary);
}

:root[data-theme] .app-dialog__error {
  color: var(--color-error);
}

:root[data-theme] .app-dialog__button--secondary {
  border-color: var(--color-button-border);
  background: var(--color-button-background);
  color: var(--color-text-secondary);
}

:root[data-theme] .app-dialog__button--danger {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

/* Login and registration */
:root[data-theme] body:has(.auth-page),
:root[data-theme] body:has(> .card > #registerForm) {
  background:
    radial-gradient(circle at top left, var(--color-aurora-primary), transparent 26%),
    radial-gradient(circle at top right, var(--color-aurora-success), transparent 22%),
    linear-gradient(180deg, var(--color-page-background), var(--color-page-background-raised));
  color: var(--color-text-primary);
}

:root[data-theme] .auth-shell,
:root[data-theme] body > .card:has(#registerForm) {
  border-color: var(--color-card-border);
  background: var(--color-surface-glass-strong);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

:root[data-theme] :is(.auth-shell, body > .card:has(#registerForm)) :is(.kicker, .subcopy, .hint, label, .captcha-hint, .link) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(.auth-shell, body > .card:has(#registerForm)) button {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Admin */
:root[data-theme] body:has(.wrap > .top) {
  background: var(--color-page-background);
  color: var(--color-text-primary);
}

:root[data-theme] body:has(.wrap > .top) :is(.card, .summary-card, .table-wrap, .membership-editor) {
  border-color: var(--color-card-border);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

:root[data-theme] body:has(.wrap > .top) :is(.kicker, .top p, .summary-label, .summary-sub, .subline, .note, .label, .table-empty, .table-footer__meta) {
  color: var(--color-text-muted);
}

:root[data-theme] body:has(.wrap > .top) :is(.table th, .table td) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-primary);
}

:root[data-theme] body:has(.wrap > .top) .table th {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

:root[data-theme] body:has(.wrap > .top) :is(.btn, a.btn, button) {
  border-color: var(--color-button-border);
  background: var(--color-button-background);
  color: var(--color-text-primary);
}

:root[data-theme] body:has(.wrap > .top) .btn--danger {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

:root[data-theme] .badge--active {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
  color: var(--color-on-success-subtle);
}

:root[data-theme] :is(.badge--disabled, .badge--expired) {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
  color: var(--color-on-error-subtle);
}

:root[data-theme] .badge--used-up {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
  color: var(--color-on-warning-subtle);
}

:root[data-theme] :is(.badge--admin, .badge--member) {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-on-primary-subtle);
}

/* Replay V2 developer harness */
:root[data-theme] body:has(#devBypassBanner) {
  background: var(--color-page-background);
  color: var(--color-text-primary);
}

:root[data-theme] body:has(#devBypassBanner) :is(.card, .metric) {
  border-color: var(--color-card-border);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

:root[data-theme] body:has(#devBypassBanner) .card {
  box-shadow: var(--shadow-card);
}

:root[data-theme] body:has(#devBypassBanner) .metric {
  border-color: transparent;
  background: var(--color-surface-subtle);
}

:root[data-theme] body:has(#devBypassBanner) :is(.label, .note) {
  color: var(--color-text-muted);
}

:root[data-theme] body:has(#devBypassBanner) .warning {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
  color: var(--color-on-warning-subtle);
}

/* Marketing launch page: keep branded imagery, theme all readable chrome. */
:root[data-theme] body:has(.launch) {
  background:
    radial-gradient(circle at 50% 34%, var(--color-aurora-primary), transparent 27%),
    radial-gradient(circle at 20% 14%, var(--color-aurora-success), transparent 23%),
    linear-gradient(180deg, var(--color-page-background), var(--color-page-background-raised));
  color: var(--color-text-primary);
}

:root[data-theme] body:has(.launch) .grid {
  background-image:
    linear-gradient(var(--color-grid-pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-pattern) 1px, transparent 1px);
}

:root[data-theme] body:has(.launch) :is(.nav, .terminal, .orbit-node) {
  border-color: var(--color-card-border);
  background: var(--color-surface-glass);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

:root[data-theme] body:has(.launch) .orbit-node {
  box-shadow: none;
}

:root[data-theme] body:has(.launch) :is(.subcopy, .context, .footer, .kicker, .terminal-body, .nav-enter) {
  color: var(--color-text-muted);
}

:root[data-theme] body:has(.launch) :is(.primary-btn, .nav-actions .nav-enter) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

:root[data-theme] body:has(.launch) .terminal-head {
  border-color: var(--color-border-subtle);
}

/* Final state contract: disabled controls are neutral, opaque and readable,
 * including direction-coloured trading controls and controls nested in pages. */
:root[data-theme] :is(
  body,
  #sessionsPage,
  #dashboardPage,
  #tradeCasesPage,
  #tradeCaseOverlayRoot,
  #chartFavoritesPage,
  .terminal-app
) :is(button, input, select, textarea):disabled,
:root[data-theme] :is(
  body,
  #sessionsPage,
  #dashboardPage,
  #tradeCasesPage,
  #tradeCaseOverlayRoot,
  #chartFavoritesPage,
  .terminal-app
) :is([aria-disabled="true"], .menu-item.disabled) {
  border-color: var(--color-control-disabled-border);
  background: var(--color-control-disabled-background);
  color: var(--color-control-disabled-foreground);
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

/* Bulk-close rows live on a deliberately fixed dark confirmation surface.
 * Keep unavailable choices inside that surface instead of applying the
 * application-wide light/dark disabled control rectangle. */
:root[data-theme] #bulkCloseMenu button.bulk-close-confirm__option:disabled,
:root[data-theme] #bulkCloseMenu button.bulk-close-confirm__option.is-disabled {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  color: var(--color-bulk-close-dialog-muted);
  opacity: 1;
  box-shadow: none;
}

:root[data-theme] #bulkCloseMenu button.bulk-close-confirm__option:disabled .bulk-close-confirm__choice,
:root[data-theme] #bulkCloseMenu button.bulk-close-confirm__option.is-disabled .bulk-close-confirm__choice {
  border-color: var(--color-bulk-close-dialog-radio-disabled);
  background: var(--color-bulk-close-dialog-radio-disabled);
}

/* Dashboard plots live directly on their cards. Semantic data colors carry
 * the signal; a second dark rectangle or one track per bar adds noise. */
:root[data-theme] #dashboardPage .dashboard-svg-chart,
:root[data-theme] #dashboardPage .dashboard-bar-chart__track,
:root[data-theme] #dashboardPage .dashboard-signed-bar-chart__axis {
  border-color: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

/* Light ink-wash Dashboard: chart tracks are subtle graphite recesses, not
 * opaque card-white columns. Keep the grid readable while the data fills
 * remain the only strong vertical signal. Dark retains its established
 * chart material through the corresponding semantic tokens. */
:root[data-theme="light"] #dashboardPage :is(
  .dashboard-bar-chart__track,
  .dashboard-signed-bar-chart__axis
) {
  background: var(--color-dashboard-bar-track);
}

:root[data-theme="light"] #dashboardPage .training-effort-chart__track {
  background:
    repeating-linear-gradient(0deg, var(--color-grid-pattern) 0 1px, transparent 1px 24px),
    var(--color-dashboard-effort-track);
}

@media (max-width: 760px) {
  .theme-control--floating {
    top: 10px;
    right: 10px;
  }
}

/* Dashboard editorial layer. Keep these mappings last so legacy dark-only
 * structural literals cannot override the redesigned semantic hierarchy. */
:root[data-theme] body:has(#dashboardPage:not(.hidden)) .app-shell-header {
  border-color: var(--color-card-border);
  background: var(--color-surface-glass);
  box-shadow: var(--shadow-card);
}

:root[data-theme] :is(
  .app-shell-brand__copy strong,
  #dashboardPage .dashboard-toolbar__copy h1,
  #dashboardPage .dashboard-panel__title strong,
  #dashboardPage .dashboard-kpi-card__value,
  #dashboardPage .aionis-score-summary__headline strong
) {
  color: var(--color-text-primary);
}

:root[data-theme] :is(
  .app-shell-brand__copy > span,
  .user-menu-trigger__label,
  #dashboardPage .dashboard-toolbar__copy p,
  #dashboardPage .dashboard-panel__summary,
  #dashboardPage .dashboard-filter-shell__head small
) {
  color: var(--color-text-muted);
}

:root[data-theme] :is(
  .dashboard-filter-shell,
  #dashboardPage .dashboard-kpi-grid,
  #dashboardPage .dashboard-panel
) {
  border-color: var(--color-card-border);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
}

:root[data-theme] #dashboardPage .dashboard-toolbar__controls {
  background: transparent;
  box-shadow: none;
}

:root[data-theme] #dashboardPage .dashboard-toolbar__controls select {
  border-color: transparent;
  background: var(--color-field-background);
  color: var(--color-input-text);
}

:root[data-theme] #dashboardPage .dashboard-kpi-card {
  border-color: var(--color-divider);
  background: transparent;
  box-shadow: none;
}

:root[data-theme] #dashboardPage .dashboard-kpi-card:hover {
  border-color: var(--color-divider);
  background: var(--color-surface-hover);
  box-shadow: none;
}

:root[data-theme] #dashboardPage .dashboard-panel__header {
  border-color: var(--color-divider);
  background: transparent;
}

:root[data-theme] #dashboardPage .aionis-score-radar__grid {
  stroke: var(--color-dashboard-radar-grid);
}

:root[data-theme] #dashboardPage .aionis-score-radar__axis {
  stroke: var(--color-dashboard-radar-axis);
}

:root[data-theme] #dashboardPage .aionis-score-radar__shape {
  fill: var(--color-chart-hover-soft);
  stroke: none;
}

:root[data-theme] #dashboardPage .aionis-score-radar__connector {
  stroke: var(--color-chart-hover);
}

:root[data-theme] #dashboardPage .aionis-score-radar__dot {
  fill: var(--color-surface-card);
  stroke: var(--color-chart-hover);
}

:root[data-theme] #dashboardPage .aionis-score-dimensions {
  border-color: var(--color-divider);
  background: var(--color-divider);
}

:root[data-theme] #dashboardPage .aionis-score-dimensions > div,
:root[data-theme] #dashboardPage :is(.training-effort-card, .training-effort-module__chart-card) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

:root[data-theme] #dashboardPage.is-review-wall-mode :is(
  .dashboard-training-heatmap,
  .dashboard-training-heatmap__month
) {
  border-color: var(--color-card-border);
  background: var(--color-surface-card);
  box-shadow: none;
}

:root[data-theme] #dashboardPage.is-review-wall-mode :is(
  .dashboard-training-heatmap__months
) {
  border-color: var(--color-divider);
  background: var(--color-divider);
}

:root[data-theme] #dashboardPage :is(
  .dashboard-challenge-metric-group,
  .dashboard-challenge-metric-group > header,
  .dashboard-challenge-metric
) {
  border-color: var(--color-divider);
}

:root[data-theme] #dashboardPage .dashboard-challenge-metric-group {
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
}

:root[data-theme] body #dashboardPage .dashboard-panel--training-effort :is(
  .training-effort-card,
  .training-effort-module__chart-card
) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Dashboard Signal Field V3. This is the canonical semantic finish for the
 * dashboard; structural CSS consumes only the light/dark roles defined in
 * theme.css, while data series keep their independent chart semantics. */
:root[data-theme] #dashboardPage .dashboard-toolbar {
  border-color: var(--color-dashboard-hero-border);
  background: var(--color-dashboard-hero-surface);
  box-shadow: var(--shadow-dashboard-stage);
}

:root[data-theme] #dashboardPage .dashboard-toolbar__copy .sessions-hero-kicker,
:root[data-theme] #dashboardPage .dashboard-tab-btn.active,
:root[data-theme] #dashboardPage .dashboard-section-marker span,
:root[data-theme] #dashboardPage .aionis-score-summary__headline em {
  color: var(--color-dashboard-accent);
}

:root[data-theme] #dashboardPage .dashboard-tab-btn {
  color: var(--color-text-muted);
  background: transparent;
}

:root[data-theme] #dashboardPage .dashboard-tab-btn:hover {
  color: var(--color-text-primary);
  background: transparent;
}

:root[data-theme] #dashboardPage .dashboard-filter-shell {
  border-color: var(--color-dashboard-divider);
  background: transparent;
  box-shadow: none;
}

:root[data-theme="light"] #dashboardPage :is(
  .dashboard-chart-stage,
  .dashboard-panel__body--chart,
  .dashboard-panel__body--chart-bars,
  .dashboard-panel__body--chart-breakdown,
  .dashboard-svg-chart
) {
  background-color: transparent;
  background-image: none;
}

:root[data-theme="light"] #dashboardPage .dashboard-chart-stage {
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-outer-panel-soft) 54%, transparent);
}

:root[data-theme="light"] body #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity .dashboard-svg-chart,
:root[data-theme="light"] body #dashboardPage .dashboard-secondary-grid .dashboard-svg-chart,
:root[data-theme="light"] body #dashboardPage .dashboard-ledger-grid .dashboard-svg-chart {
  background-color: transparent;
  background-image: none;
}

:root[data-theme] #dashboardPage .dashboard-toolbar__controls select {
  border-color: transparent;
  color: var(--color-input-text);
  background: var(--color-field-background);
  box-shadow: var(--shadow-field-inset);
}

:root[data-theme] #dashboardPage .dashboard-toolbar__controls select:hover {
  border-color: var(--color-field-hover-border);
  background: var(--color-surface-hover);
}

:root[data-theme] #dashboardPage .dashboard-kpi-grid,
:root[data-theme] #dashboardPage .dashboard-primary-grid,
:root[data-theme] #dashboardPage .dashboard-secondary-grid {
  border-color: var(--color-dashboard-divider);
  background: var(--color-dashboard-divider);
  box-shadow: var(--shadow-dashboard-stage);
}

:root[data-theme] #dashboardPage .dashboard-kpi-card,
:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-panel,
:root[data-theme] #dashboardPage .dashboard-secondary-grid > .dashboard-panel,
:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-chart-panel--equity {
  border-color: transparent;
  background-color: var(--color-dashboard-segment);
  box-shadow: none;
}

:root[data-theme] #dashboardPage .dashboard-kpi-card--primary {
  background:
    linear-gradient(135deg, var(--color-dashboard-accent-soft), transparent 72%),
    var(--color-dashboard-segment-strong);
}

:root[data-theme] #dashboardPage .dashboard-kpi-card:hover {
  background-color: var(--color-dashboard-segment-hover);
}

:root[data-theme] #dashboardPage .dashboard-kpi-card:hover,
:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-panel:hover,
:root[data-theme] #dashboardPage .dashboard-secondary-grid > .dashboard-panel:hover {
  border-color: transparent;
  background-color: var(--color-dashboard-segment-strong);
  box-shadow: none;
}

:root[data-theme] #dashboardPage .dashboard-primary-grid > .dashboard-panel:first-child {
  background:
    radial-gradient(circle at 18% 10%, var(--color-dashboard-accent-soft), transparent 42%),
    var(--color-dashboard-segment);
}

:root[data-theme] #dashboardPage .dashboard-ledger-grid > .dashboard-panel {
  border-color: var(--color-dashboard-divider);
  background: var(--color-dashboard-chassis);
  box-shadow: var(--shadow-dashboard-stage);
}

:root[data-theme] #dashboardPage .dashboard-ledger-grid > .dashboard-panel:hover {
  border-color: var(--color-dashboard-panel-hover-border);
  background: var(--color-dashboard-chassis);
  box-shadow: var(--shadow-dashboard-float);
}

:root[data-theme] #dashboardPage .dashboard-panel__header {
  border-color: var(--color-dashboard-divider);
  background: transparent;
}

:root[data-theme] #dashboardPage .dashboard-panel__header::before,
:root[data-theme] #dashboardPage .dashboard-tab-btn::after,
:root[data-theme] #dashboardPage .dashboard-kpi-card::after {
  background: var(--color-dashboard-accent);
}

:root[data-theme] #dashboardPage .dashboard-kpi-card::before,
:root[data-theme] #dashboardPage .dashboard-section-marker em,
:root[data-theme] #dashboardPage .aionis-score-summary__eyebrow {
  color: var(--color-dashboard-accent-muted);
}

:root[data-theme] #dashboardPage .dashboard-section-marker span,
:root[data-theme] #dashboardPage .aionis-score-summary__headline em {
  border-color: var(--color-dashboard-hero-border);
  background: var(--color-dashboard-accent-soft);
}

:root[data-theme] #dashboardPage .aionis-score-summary,
:root[data-theme] #dashboardPage .dashboard-section-marker i {
  border-color: var(--color-dashboard-divider);
}

:root[data-theme] #dashboardPage .aionis-score-dimensions {
  border-color: transparent;
  background: var(--color-dashboard-divider);
}

:root[data-theme] #dashboardPage .aionis-score-dimensions > div {
  background: var(--color-dashboard-segment-strong);
}

:root[data-theme] #dashboardPage .aionis-score-radar__shape {
  fill: url(#aionisScoreSignalGradient);
  stroke: none;
}

:root[data-theme] #dashboardPage .aionis-score-radar__connector {
  stroke: var(--color-dashboard-accent);
}

:root[data-theme] #dashboardPage .aionis-score-radar__dot {
  fill: var(--color-dashboard-segment-strong);
  stroke: var(--color-dashboard-accent);
}

:root[data-theme] #dashboardPage .aionis-score-radar__dot--zero {
  fill: var(--color-dashboard-chassis);
}

:root[data-theme] #dashboardPage .dashboard-table thead tr,
:root[data-theme] #dashboardPage .dashboard-table tbody tr:hover {
  background: var(--color-dashboard-accent-soft);
}

:root[data-theme] #dashboardPage .dashboard-panel--ledger .dashboard-table thead th {
  background: var(--color-dashboard-ledger-header);
}

:root[data-theme] #dashboardPage .dashboard-panel--ledger .dashboard-table tbody td {
  background: var(--color-dashboard-ledger-row);
}

:root[data-theme] #dashboardPage .dashboard-panel--ledger .dashboard-table tbody tr:hover td {
  background: var(--color-dashboard-ledger-row-hover);
}

:root[data-theme] #dashboardPage .dashboard-table th {
  color: var(--color-dashboard-accent-muted);
}

:root[data-theme] #dashboardPage :is(
  .dashboard-challenge-metric-group,
  .dashboard-training-heatmap
) {
  border-color: var(--color-dashboard-divider);
  background: var(--color-dashboard-chassis);
  box-shadow: var(--shadow-dashboard-stage);
}

:root[data-theme] #dashboardPage .dashboard-challenge-metric-group:first-child {
  background:
    radial-gradient(circle at 12% 0%, var(--color-dashboard-accent-soft), transparent 45%),
    var(--color-dashboard-chassis);
}

/* Aionis Outer Experience V1 — final semantic material mapping.
 * Kept last because this stylesheet loads after structural page CSS. */
:root[data-theme] body:has(#appShell:not(.hidden)) {
  background-color: var(--color-outer-page);
  background-image: none;
}

:root[data-theme] #appShell.app-shell {
  background-color: transparent;
  background-image: none;
}

:root[data-theme="light"] #appShell {
  --color-text-primary: var(--color-outer-ink-primary);
  --color-text-secondary: var(--color-outer-ink-secondary);
  --color-text-muted: var(--color-outer-ink-muted);
  --color-text-disabled: #777c79;
  --color-icon-primary: #2f3431;
  --color-icon-secondary: #626864;
  --color-primary: #2f3532;
  --color-primary-hover: #1e2320;
  --color-primary-active: #151816;
  --color-on-primary: #f7f7f4;
  --color-primary-subtle: rgba(55, 61, 58, 0.12);
  --color-on-primary-subtle: #2d322f;
  --color-link: #353b38;
  --color-link-hover: #151816;
  --color-border-selected: #4e5652;
  --color-button-foreground: var(--color-outer-ink-secondary);
  --color-button-hover-background: rgba(224, 223, 218, 0.82);
  --color-button-hover-border: rgba(37, 41, 39, 0.18);
  --color-control-hover-background: rgba(224, 223, 218, 0.82);
  --color-control-hover-foreground: var(--color-outer-ink-primary);
  --color-control-selected-foreground: var(--color-outer-ink-primary);
  --color-surface-subtle: rgba(232, 231, 226, 0.88);
  --color-surface-hover: rgba(229, 228, 223, 0.9);
  --color-surface-active: rgba(219, 218, 213, 0.94);
  --color-segment-background: rgba(215, 214, 209, 0.72);
  --color-segment-active-background: rgba(252, 251, 248, 0.96);
  --color-input-text: var(--color-outer-ink-primary);
  --color-placeholder: #757b77;
  --color-focus-ring: #4e5652;
  --color-focus-ring-soft: rgba(78, 86, 82, 0.2);
}

:root[data-theme] #appShell .app-shell-header {
  border-color: var(--color-outer-border);
  background: var(--color-outer-panel);
  box-shadow: var(--shadow-outer-stage);
}

:root[data-theme="light"] #appShell :is(input, select, textarea):not(:disabled) {
  border-color: var(--color-outer-field-border);
  background-color: var(--color-outer-field);
}

:root[data-theme="light"] #appShell :is(input, select, textarea):not(:disabled):hover {
  background-color: var(--color-outer-field-hover);
}

:root[data-theme="light"] #appShell :is(input, select, textarea):disabled {
  border-color: var(--color-outer-field-disabled-border);
  background-color: var(--color-outer-field-disabled);
  background-image: none;
  color: var(--color-outer-field-disabled-foreground);
  opacity: 1;
}

:root[data-theme] #appShell :is(
  .sessions-page-panel,
  .trade-cases-toolbar,
  .trade-cases-filters,
  .trade-case-card,
  .trade-case-detail-topbar,
  .trade-case-detail-card,
  .trade-case-detail-sidebar > *,
  .chart-favorites-table-wrap
) {
  border-color: var(--color-outer-border);
  background: var(--color-outer-panel);
  box-shadow: var(--shadow-outer-stage);
}

:root[data-theme] #sessionsPage .session-manager__create-panel {
  background: var(--color-outer-panel-strong);
}

:root[data-theme] #sessionsPage .sessions-filter-shell {
  border-color: var(--color-outer-border);
  background: var(--color-outer-panel-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface-highlight) 70%, transparent);
}

:root[data-theme] #sessionsPage :is(.session-form__section, .challenge-rule-card) {
  border-color: var(--color-outer-border);
  background: color-mix(in srgb, var(--color-outer-panel-soft) 78%, transparent);
  box-shadow: none;
}

:root[data-theme] #sessionsPage :is(.session-row, .session-card) {
  border-color: var(--color-outer-border);
  background: color-mix(in srgb, var(--color-outer-panel-strong) 74%, transparent);
}

:root[data-theme] #sessionsPage :is(.session-row, .session-card):hover {
  border-color: var(--color-outer-border-strong);
  background: var(--color-outer-panel-strong);
}

:root[data-theme] #tradeCasesPage .trade-cases-toolbar {
  background:
    linear-gradient(115deg, var(--color-outer-accent-soft), transparent 54%),
    var(--color-outer-panel);
}

:root[data-theme] #tradeCasesPage .trade-cases-filters {
  background: var(--color-outer-panel-soft);
  box-shadow: var(--shadow-outer-stage);
}

:root[data-theme] #tradeCasesPage .trade-case-card:hover {
  border-color: var(--color-outer-border-strong);
  background: var(--color-outer-panel-strong);
  box-shadow: var(--shadow-outer-float);
}

:root[data-theme] :is(
  #chartFavoritesPage .chart-favorites-state,
  #tradeCasesPage .trade-cases-empty,
  #tradeCaseDetailPage .trade-case-detail-state
) {
  border-color: var(--color-outer-border);
  background:
    linear-gradient(128deg, var(--color-outer-accent-soft), transparent 44%),
    var(--color-outer-panel);
  box-shadow: var(--shadow-outer-stage);
}

:root[data-theme] :is(
  #chartFavoritesPage .chart-favorites-state p,
  #tradeCasesPage .trade-cases-empty p,
  #tradeCaseDetailPage .trade-case-detail-state p
) {
  color: var(--color-text-muted);
}

:root[data-theme] #chartFavoritesPage .chart-favorites-table tbody tr:hover {
  background: var(--color-outer-accent-soft);
}

:root[data-theme] #dashboardPage .dashboard-toolbar {
  border-color: var(--color-dashboard-hero-border);
  background: var(--color-dashboard-hero-surface);
  box-shadow: var(--shadow-dashboard-stage);
}

:root[data-theme] #dashboardPage .dashboard-filter-shell {
  border-color: var(--color-dashboard-divider);
  background: color-mix(in srgb, var(--color-outer-panel-soft) 72%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-surface-highlight) 62%, transparent),
    0 12px 30px color-mix(in srgb, var(--color-shadow) 38%, transparent);
}

:root[data-theme] #dashboardPage :is(
  .dashboard-kpi-grid,
  .dashboard-primary-grid,
  .dashboard-secondary-grid,
  .dashboard-ledger-grid > .dashboard-panel,
  .dashboard-training-heatmap,
  .dashboard-challenge-metric-group
) {
  box-shadow: var(--shadow-dashboard-stage);
}