:root {
  color-scheme: light;
  --page: #f4f6f8;
  --panel: #ffffff;
  --panel-raised: #f8fafb;
  --soft: #edf1f4;
  --ink: #20262e;
  --muted: #68737f;
  --line: #dbe1e7;
  --accent: #c94363;
  --accent2: #ff9671;
  --focus: #845ec2;
  --danger: #b4233f;
  --success: #087f6a;
  --chart-1: #c94363;
  --chart-2: #2c73d2;
  --chart-3: #008f7a;
  --chart-4: #845ec2;
  --chart-5: #d59b00;
  --chart-grid: #dfe5ea;
  --chart-axis: #74808b;
  --shadow: #26374614;
  --positive-bg: #e6f6ef;
  --positive-ink: #08725f;
  --warning-bg: #fff2ce;
  --warning-ink: #785600;
  --negative-bg: #ffe8ec;
  --negative-ink: #a52848;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #171424;
  --panel: #211d31;
  --panel-raised: #29243b;
  --soft: #1c2836;
  --ink: #f8f5ff;
  --muted: #b9b3c9;
  --line: #423b56;
  --accent: #ff6f91;
  --accent2: #ff9671;
  --focus: #a985e8;
  --danger: #ff7890;
  --success: #42d6b5;
  --chart-1: #ff6f91;
  --chart-2: #63a4ff;
  --chart-3: #36d6bd;
  --chart-4: #b995ff;
  --chart-5: #ffd166;
  --chart-grid: #48425d;
  --chart-axis: #a9a2bb;
  --shadow: #00000055;
  --positive-bg: #173b37;
  --positive-ink: #72e2c9;
  --warning-bg: #45391f;
  --warning-ink: #ffd166;
  --negative-bg: #492432;
  --negative-ink: #ff9db1;
}

:root[data-theme="dark"] :is(input, select, textarea):disabled {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel-raised) 78%, var(--page) 22%) !important;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%) !important;
  opacity: 1;
  cursor: not-allowed;
  -webkit-text-fill-color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
}
:root[data-theme="dark"] input[type="date"]:disabled::-webkit-calendar-picker-indicator {
  filter: invert(.78);
  opacity: .55;
}

body { background: var(--page); color: var(--ink); transition: background-color .2s, color .2s; }
.login-page { background: var(--page); }
.login-card { background: var(--panel); border-color: var(--line); box-shadow: 0 18px 60px var(--shadow); }
.login-theme-toggle { position: fixed; z-index: 2; top: 18px; right: 18px; }
.topbar, .tabs, .tabs button, .card, .table-card, .editor, .file-details div,
.athlete-snapshot > div, .performance-card, dialog, input, select, textarea,
.account-button, .secondary, .ghost { background-color: var(--panel); color: var(--ink); border-color: var(--line); }
.panel, .performance-insights { background: var(--soft); }
th { background: var(--soft); }
td, th, .topbar, .tabs, .card, .performance-card { border-color: var(--line); }
.dropzone { background: color-mix(in srgb, var(--panel) 76%, var(--accent) 24%); border-color: var(--accent2); }
.metric-chart, .wbal-repeatability, .wbal-detail-ledger { background: var(--panel-raised); border-color: var(--line); }
.brand b, .eyebrow, .tabs button.active, .main-nav button.active { color: var(--accent) !important; }
.main-nav button { color: var(--muted); }
.secondary, .ghost { color: var(--accent); }
.account-avatar { background: linear-gradient(135deg, var(--focus), var(--accent)); }
.theme-toggle { gap: 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); }
.theme-toggle .material-symbols-rounded, .logout-button .material-symbols-rounded { font-size: 18px; }
.logout-button { gap: 6px; }
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }

/* Unified interactive states override the legacy cream/orange rules. */
:is(.account-button, .secondary, .ghost, .theme-toggle,
  .profile-sidebar nav button, .axis-toggle button,
  .dimension-toggle button, .profile-camera-buttons button):hover {
  background: color-mix(in srgb, var(--panel) 84%, var(--focus) 16%) !important;
  border-color: var(--focus) !important;
  color: var(--focus) !important;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--focus) 18%, transparent) !important;
}
:is(.account-button, .secondary, .ghost, .theme-toggle):active {
  background: color-mix(in srgb, var(--panel) 74%, var(--focus) 26%) !important;
}
:is(.integration-brand > .material-symbols-rounded,
  .today-plan-card header > .material-symbols-rounded,
  .athlete-comment-icon, .ftp-history-button) {
  background: color-mix(in srgb, var(--panel-raised) 80%, var(--accent) 20%) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--line) 65%, var(--accent) 35%) !important;
}
.account-button:hover .account-avatar { box-shadow: 0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent); }

/* Dashboard surfaces inherit the active theme instead of legacy literals. */
:is(.dashboard-status-card, .today-plan-card, .dashboard-section,
  .wellness-charts article, .dashboard-findings article,
  .dashboard-activities article, .activity-wellness-card,
  .cp-fit-summary > div, .variation-metric, .intervals-help-fields > div) {
  background: var(--panel) !important;
  color: var(--ink);
  border-color: var(--line) !important;
}
:is(.today-plan-item, .wellness-latest > div, .dashboard-power-chart,
  .variation-format, .variation-scope-toggle, .intervals-help-fields code) {
  background: var(--panel-raised) !important;
  color: var(--ink);
  border-color: var(--line) !important;
}
.dashboard-status-card, .today-plan-card, .dashboard-section {
  box-shadow: 0 8px 26px var(--shadow) !important;
}
.wellness-charts svg line, .dashboard-power-chart line { stroke: var(--chart-grid) !important; }
.dashboard-power-chart path.history { stroke: var(--chart-3) !important; }
.power-chart-tooltip i.prior { background: var(--chart-3) !important; }
.power-chart-tooltip i.alltime { background: var(--chart-4) !important; }
.dashboard-legend .history { background: var(--chart-3) !important; }
.dashboard-power-table td.positive { color: var(--positive-ink) !important; }
.dashboard-power-table td.negative { color: var(--negative-ink) !important; }
.dashboard-good { background: var(--positive-bg) !important; color: var(--positive-ink) !important; }
.dashboard-findings article.critical { background: var(--negative-bg) !important; border-color: var(--negative-ink) !important; }
.quality { background: var(--soft) !important; color: var(--muted) !important; }
.quality.complete { background: var(--positive-bg) !important; color: var(--positive-ink) !important; }
.quality.limited, .quality.incomplete { background: var(--negative-bg) !important; color: var(--negative-ink) !important; }
.quality.partial { background: var(--warning-bg) !important; color: var(--warning-ink) !important; }
.profile-3d, .profile-3d-stage {
  background: var(--panel-raised) !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent) !important;
}
.profile-3d-hud, .profile-3d-tooltip, .profile-3d-label, .profile-3d-hint {
  background: color-mix(in srgb,var(--panel) 94%,transparent) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: 0 6px 22px var(--shadow) !important;
}
.profile-3d-ground { stroke: var(--chart-grid) !important; }
.profile-3d-outline { stroke: var(--chart-axis) !important; }
.profile-3d-guide { stroke: var(--focus) !important; }
.profile-3d-landmark text { fill: var(--ink) !important; stroke: var(--panel) !important; }
.profile-camera-buttons [data-profile-download] { gap: 4px; color: var(--accent); }
.profile-camera-buttons [data-profile-download] .material-symbols-rounded { font-size: 16px; }

/* Brand palette replaces the legacy blue/orange component colors. */
.calendar-activity-head { background: var(--focus) !important; }
.calendar-activity.planned .calendar-activity-head { background: var(--accent2) !important; color: #2b2025 !important; }
.calendar-activity.completed.plan-within .calendar-activity-head { background: var(--chart-3) !important; }
.calendar-activity.completed.plan-over .calendar-activity-head { background: var(--chart-5) !important; color: #2b2025 !important; }
.calendar-activity.completed.plan-far .calendar-activity-head,
.calendar-activity.planned.plan-missed .calendar-activity-head { background: var(--chart-1) !important; }
.weekly-bars i.actual, .weekly-legend i:last-of-type { background: var(--chart-3) !important; }
.weekly-bars i, .weekly-legend i { background: var(--accent2) !important; }
.interval-quality-breakdown i span { background: var(--chart-3) !important; }
.analysis-badge.eligible, .coach-status.green, .interval-drop.good { background: var(--positive-bg); color: var(--positive-ink); }
.analysis-badge.ineligible, .coach-status { background: var(--soft); color: var(--muted); }
.performance-signal.warning, .interval-alert.warning, .interval-drop.watch,
.coach-status.yellow { background: var(--warning-bg); color: var(--warning-ink); border-color: color-mix(in srgb,var(--warning-ink) 45%,transparent); }
.performance-signal.danger, .interval-drop.bad, .coach-status.red { background: var(--negative-bg); color: var(--negative-ink); border-color: color-mix(in srgb,var(--negative-ink) 45%,transparent); }
.performance-signal.positive, .interval-alert.success { background: var(--positive-bg); color: var(--positive-ink); border-color: color-mix(in srgb,var(--positive-ink) 45%,transparent); }

/* Theme-safe chart palette: lines remain distinguishable on both surfaces. */
.pd-grid, .wbal-grid, .wbal-repeat-grid, .ftp-chart-grid line { stroke: var(--chart-grid) !important; }
.pd-axis, .wbal-axis, .ftp-chart-dates { stroke: var(--chart-axis) !important; color: var(--muted); }
.pd-activity-line, .ftp-chart-line { stroke: var(--chart-1) !important; }
.pd-season-line { stroke: var(--chart-3) !important; }
.pd-activity-dot { fill: var(--panel) !important; stroke: var(--chart-1) !important; }
.pd-legend .activity { background: var(--chart-1) !important; }
.pd-legend .season { background: var(--chart-3) !important; }

/* One semantic palette for every power-duration curve. */
.activity-power-chart path.activity,
.dashboard-power-chart path.season {
  stroke: var(--accent) !important;
  stroke-width: 3.4 !important;
}
.activity-power-chart path.prior,
.dashboard-power-chart path.prior {
  stroke: var(--chart-3) !important;
  stroke-width: 2.6 !important;
}
.dashboard-power-chart path.alltime {
  stroke: var(--chart-4) !important;
  stroke-width: 3.1 !important;
  stroke-dasharray: none !important;
}
.activity-power-chart path.combined-model,
.dashboard-power-chart path.combined-model {
  stroke: var(--chart-2) !important;
  stroke-width: 3.6 !important;
  stroke-dasharray: 11 7 !important;
  opacity: 1 !important;
}
.activity-power-chart path.two-cp-model,
.dashboard-power-chart path.two-cp-model {
  stroke: var(--ink) !important;
  stroke-width: 2.2 !important;
  stroke-dasharray: 2 6 !important;
  opacity: .72 !important;
}
.activity-power-chart path.omni-model,
.dashboard-power-chart path.omni-model {
  stroke: var(--chart-3) !important;
  stroke-width: 2.4 !important;
  stroke-dasharray: 7 4 2 4 !important;
  opacity: .9 !important;
}
.pd-legend .activity,
.dashboard-legend .season,
.power-chart-tooltip i.activity,
.power-chart-tooltip i.season {
  background: var(--accent) !important;
}
.pd-legend .season,
.dashboard-legend .prior,
.power-chart-tooltip i.prior {
  background: var(--chart-3) !important;
}
.dashboard-legend .alltime,
.power-chart-tooltip i.alltime {
  background: var(--chart-4) !important;
}
.pd-legend .combined-model,
.dashboard-legend .combined-model,
.power-chart-tooltip i.combined-model {
  background: repeating-linear-gradient(90deg, var(--chart-2) 0 9px, transparent 9px 14px) !important;
}
.pd-legend .two-cp-model,
.dashboard-legend .two-cp-model,
.power-chart-tooltip i.two-cp-model {
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 7px) !important;
  opacity: .72;
}
.pd-legend .omni-model,
.dashboard-legend .omni-model,
.power-chart-tooltip i.omni-model {
  background: repeating-linear-gradient(90deg, var(--chart-3) 0 7px, transparent 7px 11px) !important;
}
.wbal-power-line, .wbal-repeat-power { stroke: var(--chart-5) !important; }
.wbal-balance-line, .wbal-repeat-availability { stroke: var(--chart-2) !important; }
.wbal-repeat-dot.power { fill: var(--panel) !important; stroke: var(--chart-5) !important; }
.wbal-repeat-dot.availability { fill: var(--panel) !important; stroke: var(--chart-2) !important; }
svg text { fill: var(--muted); }
.metric-hover-line, .wellness-hover-line, .power-hover-line { stroke: var(--ink) !important; }
.toast, .metric-chart-tooltip, .wellness-chart-tooltip, .power-chart-tooltip, .wbal-tooltip { background: var(--ink); color: var(--panel); }

:root[data-theme="dark"] .calendar-activity,
:root[data-theme="dark"] .plan-comparison,
:root[data-theme="dark"] .calendar-profile,
:root[data-theme="dark"] .profile-card,
:root[data-theme="dark"] .coach-roster-card,
:root[data-theme="dark"] .dashboard-card,
:root[data-theme="dark"] .activity-dialog,
:root[data-theme="dark"] .profile-dialog-content { background-color: var(--panel); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] body :is(
  [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "],
  [class$="-dialog"], [class*="-dialog "], [class$="-content"], [class*="-content "]
) { border-color: var(--line); }
:root[data-theme="dark"] body :is(
  .dashboard-section, .dashboard-chart, .wellness-latest, .comparison-metrics,
  .cp-input-panel, .evidence-detail-panel, .wbal-interval-panel, .profile-sidebar,
  .profile-content, .modal-card, .activity-metrics > div
) { background-color: var(--panel); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] :is(p, small, label, dt, .subtitle, .description) { color: var(--muted); }
:root[data-theme="dark"] :is(input, select, textarea) { color-scheme: dark; }
:root[data-theme="dark"] img:not([src*="tile"]) { filter: brightness(.92); }

/* Complete dark surfaces. These components previously carried literal white
   backgrounds and were the source of the mixed light/dark screenshots. */
:root[data-theme="dark"] :is(
  .dashboard-status-card, .today-plan-card, .dashboard-section,
  .wellness-charts article, .activity-wellness-card,
  .profile-dialog, .profile-content, .integration-card,
  .athlete-dialog, .users-dialog, .password-dialog,
  .activity-calendar, .calendar-day, .activity-dialog,
  .activity-description, .activities-setup, .shift-summary > div,
  .axis-toggle button.active, .profile-close,
  .activity-calendar, .calendar-day, .calendar-week-summary,
  .coach-roster-card, .coach-roster-table tbody tr,
  .performance-insights, .performance-card, .analysis-kpis > div,
  .analysis-card-action, .analysis-card-note, .analysis-methodology,
  .evidence-context-grid > div, .interval-quality-breakdown > div,
  .evidence-claim, .evidence-detail-panel, .cp-input-panel,
  .interval-source-hint, .interval-summary article,
  .wbal-chart, .wbal-coach-summary, .wbal-response-grid article,
  .wbal-repeatability, .wbal-detail-ledger, .wbal-ledger-grid > div,
  .wbal-capacity-grid > div, .wbal-zone-grid, .wbal-event-panel,
  .metric-chart, .table-card, .profile-card,
  .variation-metric, .intervals-help-fields > div, .cp-fit-summary > div
) { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; box-shadow: none; }

:root[data-theme="dark"] :is(
  .today-plan-item, .wellness-latest > div, .dashboard-power-chart,
  .variation-format, .variation-scope-toggle, .variation-scope-toggle button.active,
  .profile-sidebar, .role-pill, .activity-metrics > div,
  .calendar-day.outside, .calendar-week-summary,
  .coach-roster-help, .coach-roster-table th,
  .performance-insights, .analysis-card-action,
  .evidence-claim.unsupported, .wbal-detail-ledger > summary,
  .wbal-coach-summary .wbal-section-label,
  .wbal-interval-table thead th, .wbal-coach-summary th,
  .interval-comparison-table th
) { background: var(--soft) !important; color: var(--muted) !important; }

:root[data-theme="dark"] :is(
  .dashboard-status-card h2, .today-plan-card h2,
  .wellness-latest strong, .wellness-charts header b,
  .dashboard-section h2, .dashboard-power-table td,
  .variation-chart-panel h4, .variation-format dd
) { color: var(--ink) !important; }

:root[data-theme="dark"] :is(
  .dashboard-status-card p, .today-plan-item span, .today-plan-item small,
  .wellness-latest small, .wellness-charts header,
  .dashboard-section-head > span, .dashboard-legend,
  .variation-chart-panel header small, .variation-format dt
) { color: var(--muted) !important; }

:root[data-theme="dark"] .today-plan-card header > .material-symbols-rounded {
  background: color-mix(in srgb,var(--accent) 18%,var(--panel));
}

:root[data-theme="dark"] :is(
  .account-button:hover, .profile-sidebar nav button.active,
  .selectable-table tbody tr:hover, .selectable-table tbody tr.selected,
  .cardio-matched-grid tr.selected, .cp-history-table tr.is-current
) {
  background: color-mix(in srgb,var(--panel) 72%,var(--accent) 28%) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] :is(
  .metric-chart-tooltip, .profile-tooltip-bg, .wellness-chart-tooltip,
  .power-chart-tooltip
) { background: var(--panel-raised) !important; color: var(--ink) !important; border-color: var(--line) !important; }

:root[data-theme="dark"] :is(
  .athlete-comment-card, .performance-card.evidence-engine-card,
  .wbal-chart, .wbal-response-grid article, .wbal-repeatability
) { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }

:root[data-theme="dark"] :is(
  .cardio-coach-callout, .cardio-coach-callout.moderate,
  .cardio-coach-callout.high, .cardiovascular-kpis > div.primary
) { background: var(--panel-raised) !important; border-color: var(--line) !important; }

:root[data-theme="dark"] :is(
  .coach-roster-table tbody tr:hover, .coach-roster-table tbody tr:focus,
  .coach-roster-table tbody tr.selected, table tbody tr:hover,
  .wbal-interval-table tbody tr:hover, .wbal-interval-table tbody tr.is-selected,
  .wbal-event-table tbody tr.is-selected
) { background: color-mix(in srgb,var(--panel) 72%,var(--accent) 28%) !important; color: var(--ink) !important; }

:root[data-theme="dark"] :is(
  .calendar-day, .coach-roster-table td, th, td,
  .wbal-coach-summary th, .wbal-coach-summary td,
  .wbal-detail-ledger > summary, .evidence-claim,
  .evidence-context-grid > div, .interval-summary article
) { border-color: var(--line) !important; }

:root[data-theme="dark"] :is(
  .analysis-kpis strong, .analysis-kpis b, .evidence-context-grid strong,
  .comparison-metrics strong, .wbal-coach-summary td,
  .wbal-coach-summary td strong, .wbal-detail-ledger summary,
  .wbal-ledger-grid strong, .wbal-capacity-grid strong,
  .interval-summary strong, table td, table td strong
) { color: var(--ink) !important; }

:root[data-theme="dark"] :is(
  .analysis-kpis small, .analysis-card-note p, .evidence-context-grid span,
  .evidence-claim p, .evidence-claim header, .interval-quality-breakdown span,
  .wbal-response-grid p, .wbal-cell-sub, .wbal-ledger-grid span,
  .wbal-coach-summary td:nth-child(3), .calendar-week-summary small
) { color: var(--muted) !important; }

:root[data-theme="dark"] .calendar-activity { background: var(--panel-raised) !important; color: var(--ink) !important; }
:root[data-theme="dark"] .calendar-activity-name,
:root[data-theme="dark"] .calendar-activity > small { color: var(--ink) !important; }
:root[data-theme="dark"] .calendar-profile { background-color: var(--soft) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .wbal-power-area { fill: color-mix(in srgb,var(--chart-5) 24%,transparent) !important; }
:root[data-theme="dark"] .wbal-cp-line { stroke: var(--muted) !important; }
:root[data-theme="dark"] .wbal-tooltip { background: var(--panel-raised) !important; color: var(--ink) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] dialog::backdrop { background: #090711bb; }

/* Keep foreground/background pairs together: legacy component rules and the
   generic dark-mode small/label rule otherwise split semantic state colors. */
:root[data-theme="dark"] .loading-overlay {
  background: color-mix(in srgb, var(--page) 92%, transparent);
  color: var(--ink);
}
:root[data-theme="dark"] .loader { border-color: var(--line); border-top-color: var(--accent); }
:root[data-theme="dark"] :is(.coaching-list article.unread, .sync-activity-step.active) {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--ink);
}
:root[data-theme="dark"] .sync-activity-step.active > .material-symbols-rounded { color: var(--accent); }
:root[data-theme="dark"] :is(.sync-activity-indicator.complete,
  .sync-activity-indicator.complete + .sync-activity-popover .sync-activity-state-icon) {
  background: var(--positive-bg); color: var(--positive-ink); border-color: var(--positive-ink);
}
:root[data-theme="dark"] .sync-activity-step.complete { color: var(--positive-ink); }
:root[data-theme="dark"] :is(input, select, textarea) {
  background-color: var(--panel-raised); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme="dark"] :is(.activity-comment, .activity-comment.coach,
  .performance-analysis-sidebar, .interval-group-card, .performance-signal.neutral,
  .cp-history-dialog, .cp-history-curve table,
  .prescription-chip-grid article, .field-lt1-evidence-cards article) {
  background: var(--panel-raised); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] :is(.activity-comment-form, .activity-comment header) { border-color: var(--line); }
:root[data-theme="dark"] :is(.athlete-comment-text, .activity-comment header strong) { color: var(--ink); }
:root[data-theme="dark"] .athlete-comment-head > span { color: var(--positive-ink); }
:root[data-theme="dark"] :is(.performance-analysis-sidebar nav button.active,
  .performance-analysis-sidebar-title > .material-symbols-rounded,
  .analysis-info-button, .analysis-value-info-button) {
  background: var(--panel-raised); color: var(--accent); border-color: var(--line);
}
:root[data-theme="dark"] :is(.evidence-detail-panel th, .evidence-detail-panel > header, .cp-input-panel-head,
  .cp-history-filter, .cp-history-detail-row > td, .cp-history-dialog-head,
  .cp-history-latest > div, .cp-recent-head, .interval-task-summary span,
  .interval-focus-summary, .interval-focus-summary.manual,
  .performance-context-detection, .model-compare-cards article.selected-cp-model,
  .wbal-interval-table tbody tr:nth-child(even)) {
  background: var(--panel-raised); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] :is(.evidence-detail-panel > header > b, .interval-task-summary span) { color: var(--muted); }
:root[data-theme="dark"] :is(.analysis-table-role, .evidence-claim footer > span) {
  background: var(--soft); color: var(--muted);
}
:root[data-theme="dark"] :is(.card.plan-good .plan-delta, .plan-comparison.plan-good,
  .compliance-step-status.good, .interval-confidence.high, .cp-current-badge,
  .cp-history-button b, .interval-alert.success, .interval-drop.good) {
  background: var(--positive-bg); color: var(--positive-ink);
}
:root[data-theme="dark"] :is(.card.plan-watch .plan-delta, .plan-comparison.plan-watch,
  .compliance-step-status.watch, .interval-confidence.medium, .interval-alert.watch,
  .interval-target, .cp-model-input-badge, .cp-history-curve-head > span, .glycolytic-warnings) {
  background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-ink);
}
:root[data-theme="dark"] :is(.card.plan-bad .plan-delta, .plan-comparison.plan-bad,
  .compliance-step-status.bad, .interval-confidence.low, .analysis-table-role.excluded) {
  background: var(--negative-bg); color: var(--negative-ink);
}
:root[data-theme="dark"] .activity-power-record-row strong.all-time { color: var(--chart-5); }
:root[data-theme="dark"] .activity-power-record-row strong.season { color: var(--chart-4); }

/* The glycolytic analysis uses legacy token names. Scope aliases to that
   component, and use dark state surfaces without changing its light palette. */
:root[data-theme="dark"] .glycolytic-profile-panel {
  --surface: var(--panel); --border: var(--line);
  --gly-brand: var(--accent); --gly-brand-deep: var(--accent);
}
:root[data-theme="dark"] .glycolytic-profile-panel .tone-negative {
  --tone: var(--negative-ink); --tone-dark: var(--negative-ink); --tone-soft: var(--negative-bg);
}
:root[data-theme="dark"] .glycolytic-profile-panel .tone-warning {
  --tone: var(--warning-ink); --tone-dark: var(--warning-ink); --tone-soft: var(--warning-bg);
}
:root[data-theme="dark"] .glycolytic-profile-panel .tone-positive {
  --tone: var(--positive-ink); --tone-dark: var(--positive-ink); --tone-soft: var(--positive-bg);
}
:root[data-theme="dark"] .glycolytic-profile-panel .tone-neutral {
  --tone: var(--muted); --tone-dark: var(--ink); --tone-soft: var(--soft);
}
:root[data-theme="dark"] :is(.glycolytic-phenotype-badge[class*="tone-"],
  .glycolytic-fresh-panel > header, .glycolytic-recovery-panel > header) {
  background: var(--panel-raised); color: var(--ink);
}

/* Performance-analysis composites added after the original theme pass. */
:root[data-theme="dark"] :is(
  .model-routing-summary, .adaptive-zone-prescription,
  .decoupling-chart-grid figure, .legacy-hr-note
) {
  background: var(--panel-raised) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
:root[data-theme="dark"] :is(
  .model-compare-cards article, .adaptive-zone-prescription > div span
) {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
:root[data-theme="dark"] :is(
  .model-routing-summary > p, .model-compare-cards span,
  .adaptive-zone-prescription p, .adaptive-zone-prescription small,
  .legacy-hr-note, .decoupling-chart-grid figcaption
) { color: var(--muted) !important; }
:root[data-theme="dark"] :is(
  .model-routing-summary h4, .model-compare-cards strong,
  .adaptive-zone-prescription h4
) { color: var(--ink) !important; }
:root[data-theme="dark"] .adaptive-zone-prescription header > .material-symbols-rounded {
  color: var(--positive-ink) !important;
}
:root[data-theme="dark"] .decoupling-excluded {
  fill: var(--soft) !important;
}

/* Interval structure is SVG-based; explicit fills prevent legacy light
   presentation attributes and stale component rules from winning. */
:root[data-theme="dark"] .interval-structure-background,
:root[data-theme="dark"] .interval-structure-timeline .interval-structure-segment.transition rect {
  fill: var(--panel-raised) !important;
  stroke: var(--line) !important;
}
:root[data-theme="dark"] .interval-structure-timeline .interval-structure-segment.work rect {
  fill: color-mix(in srgb, var(--chart-1) 30%, var(--panel)) !important;
}
:root[data-theme="dark"] .interval-structure-timeline .interval-structure-segment.recovery rect {
  fill: color-mix(in srgb, var(--chart-2) 22%, var(--panel)) !important;
}
:root[data-theme="dark"] .interval-structure-timeline text { fill: var(--ink) !important; }
:root[data-theme="dark"] .interval-structure-timeline text.duration { fill: var(--muted) !important; }

@media (max-width: 760px) {
  .topbar > .user-actions > form { display: block !important; }
  .user-actions { margin-left: auto !important; }
  .logout-button { min-width: 40px; padding: 8px; }
  .logout-button span:last-child, .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-toggle { width: 40px; height: 40px; padding: 0; }
}

@media (max-width: 430px) {
  .account-button { padding: 4px; }
  .account-button > .material-symbols-rounded { display: none; }
  .user-actions { gap: 3px; }
}