: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;
}

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-2) !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-2) !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; }

@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; }
}