/* Final semantic-theme guardrail.
 * Feature styles may keep dark-mode fallbacks, but every selected app theme
 * resolves surfaces, controls and icons through the shared appearance tokens.
 */
html[data-theme] {
    --ios-surface-1: var(--card);
    --ios-surface-2: var(--surface-raised);
    --ios-surface-3: var(--input-bg);
    --ios-fill: color-mix(in srgb, var(--text) 10%, transparent);
    --ios-fill-light: color-mix(in srgb, var(--text) 6%, transparent);
    --ios-separator: var(--line);
    --theme-icon-muted: var(--muted);
}

/* Inactive SVGs must remain visible on both pale and dark navigation surfaces. */
html[data-theme] .bottom-nav .nav-btn:not(.active) .nav-icon,
html[data-theme] .progress-tab:not(.active) .app-inline-icon,
html[data-theme] .training-progress-tab:not(.active) .app-inline-icon,
html[data-theme] .measurement-view-tab:not(.active) .app-inline-icon,
html[data-theme] .lifting-tab:not(.active) .app-inline-icon {
    color: var(--theme-icon-muted) !important;
    opacity: 1 !important;
}

html[data-theme] .bottom-nav .nav-btn:not(.active) .nav-icon-stroke {
    fill: none !important;
    stroke: currentColor !important;
}

html[data-theme] .bottom-nav .nav-btn.active .nav-icon,
html[data-theme] .progress-tab.active .app-inline-icon,
html[data-theme] .training-progress-tab.active .app-inline-icon,
html[data-theme] .measurement-view-tab.active .app-inline-icon,
html[data-theme] .lifting-tab.active .app-inline-icon {
    color: currentColor !important;
    opacity: 1 !important;
}

/* Light themes need a deeper neutral anatomy base than the legacy pale gray. */
html[data-theme-mode="light"] .form-guide-anatomy-base {
    opacity: .96 !important;
    filter: brightness(.68) contrast(1.16) !important;
}

html[data-theme-mode="light"] .recovery-user-muscle-base-fill,
html[data-theme-mode="light"] .recovery-designed-base {
    fill: color-mix(in srgb, var(--text) 58%, var(--surface)) !important;
    stroke: color-mix(in srgb, var(--text) 76%, var(--surface)) !important;
}

html[data-theme-mode="light"] .recovery-user-muscle-base-stroke,
html[data-theme-mode="light"] .anatomy-outline {
    stroke: color-mix(in srgb, var(--text) 72%, var(--surface)) !important;
}

/* Native segmented controls used to force a charcoal selected state. */
html[data-theme] .progress-tab.active,
html[data-theme] .training-progress-tab.active,
html[data-theme] .measurement-view-tab.active,
html[data-theme] .lifting-tab.active,
html[data-theme] .filter-chip.active,
html[data-theme] .range-btn.active,
html[data-theme] .dashboard-weekly-toggle button.active,
html[data-theme] .muscle-overview-toggle button.active,
html[data-theme] .recovery-mode-switch button.active,
html[data-theme] .recovery-facing-toggle button.active {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    box-shadow: 0 0 0 1px var(--accent-glow) !important;
}

/* Workout Snapshot and its disclosure content use theme surfaces, never black. */
html[data-theme] .training-progress-disclosure {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] .training-progress-disclosure > summary {
    background: var(--card) !important;
    color: var(--text) !important;
}

html[data-theme] .training-summary-title-wrap strong {
    color: var(--heading) !important;
}

html[data-theme] .training-summary-title-wrap small {
    color: var(--muted) !important;
}

html[data-theme] .training-summary-toggle {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--muted) !important;
}

html[data-theme] .training-summary-chevron {
    stroke: currentColor !important;
}

html[data-theme] .training-progress-disclosure-panel {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

html[data-theme] .training-progress-disclosure .training-summary-card {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

/* Range controls are part of the selected theme, not the legacy red palette. */
html[data-theme] #lifting-progress .training-analytics-range-control {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
}

html[data-theme] #lifting-progress .training-analytics-range-control button {
    color: var(--muted) !important;
}

html[data-theme] #lifting-progress .training-analytics-range-control button[aria-pressed="true"] {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    box-shadow: inset 0 0 0 1px var(--accent-glow) !important;
}

html[data-theme] #lifting-progress .training-analytics-range-control button:focus-visible {
    outline-color: var(--accent) !important;
}

/* Shared late-loaded cards and sheets that previously inherited black fallbacks. */
html[data-theme] :is(
    .exercise-options-popover,
    .exercise-warmup-panel,
    .session-smart-swap,
    .smart-picker-panel,
    .effort-guide-panel,
    .session-exercise-swap-panel,
    .session-smart-option,
    .drop-set-menu,
    .measurement-guide-card,
    .measurement-instructions-modern,
    .performance-dashboard-card,
    .performance-complete-card
) {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] :is(
    .exercise-options-popover,
    .exercise-warmup-panel,
    .session-smart-swap,
    .smart-picker-panel,
    .effort-guide-panel,
    .session-exercise-swap-panel,
    .drop-set-menu,
    .performance-dashboard-card,
    .performance-complete-card
) :is(h2, h3, h4, strong, b) {
    color: var(--text) !important;
}

html[data-theme] :is(
    .exercise-options-popover,
    .exercise-warmup-panel,
    .session-smart-swap,
    .smart-picker-panel,
    .effort-guide-panel,
    .session-exercise-swap-panel,
    .drop-set-menu,
    .performance-dashboard-card,
    .performance-complete-card
) :is(p, small, span, label) {
    color: var(--muted) !important;
}

html[data-theme] :is(
    .session-smart-option,
    .drop-set-row,
    .measurement-location-key > div,
    .performance-facts span,
    .performance-status-strip span
) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

/* Adaptive guidance is a full-screen theme surface, not a fixed Level Up panel. */
html[data-theme] .adaptive-flow-overlay {
    background:
        radial-gradient(circle at 50% 0, var(--accent-soft), transparent 38%),
        var(--body-background) !important;
    color: var(--text) !important;
}

html[data-theme] .adaptive-flow-screen {
    color: var(--text) !important;
}

html[data-theme] .adaptive-flow-kicker,
html[data-theme] .adaptive-coach-kicker {
    color: var(--accent-text) !important;
}

html[data-theme] :is(
    .adaptive-flow-screen h2,
    .adaptive-question-label,
    .adaptive-muscle-row > strong,
    .adaptive-post-question > strong,
    .adaptive-coach-summary h3,
    .adaptive-recommendation strong,
    .adaptive-deload-preview-rules b,
    .adaptive-info-sheet h3
) {
    color: var(--heading) !important;
}

html[data-theme] :is(
    .adaptive-flow-intro,
    .adaptive-recovery-legend span,
    .adaptive-coach-heading > p,
    .adaptive-recommendation p,
    .adaptive-deload-preview-card small,
    .adaptive-deload-banner p,
    .adaptive-info-sheet p
) {
    color: var(--text-secondary) !important;
}

html[data-theme] :is(
    .adaptive-text-button,
    .adaptive-return-button,
    .adaptive-rir-toggle span,
    .adaptive-rir-row > strong
) {
    color: var(--muted) !important;
}

html[data-theme] :is(
    .adaptive-settings-card,
    .adaptive-coach-summary,
    .adaptive-recovery-legend div,
    .adaptive-post-flow .adaptive-post-options,
    .adaptive-info-sheet
) {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] :is(
    .adaptive-choice,
    .adaptive-rir-choice,
    .adaptive-rir-toggle,
    .adaptive-info-button,
    .adaptive-discomfort-exercise select,
    .adaptive-deload-preview-rules li,
    .adaptive-info-scale div,
    .adaptive-recommendation
) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

html[data-theme] :is(.adaptive-choice, .adaptive-rir-choice).selected {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    box-shadow: inset 0 0 0 1px var(--accent-glow) !important;
}

html[data-theme] .adaptive-coach-kicker em {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
}

html[data-theme] .adaptive-info-overlay {
    background: color-mix(in srgb, var(--heading) 54%, transparent) !important;
}

/* Recap detail cards follow the selected theme, while the celebration shell stays dark. */
html[data-theme] .workout-complete-recap__insight p {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

html[data-theme] :is(
    .workout-complete-recap__kicker,
    .workout-complete-recap__header h2,
    .workout-complete-recap__crushing small,
    .workout-complete-recap__levelup-title strong,
    .workout-complete-recap__win strong,
    .workout-complete-recap__win b
) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-theme] .adaptive-feedback-edit-button {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

/* BMI uses semantic colors so its value, ranges and pointer never disappear. */
html[data-theme] .bmi-index-value {
    color: var(--heading) !important;
    -webkit-text-fill-color: var(--heading) !important;
}

html[data-theme] .bmi-gauge-track { stroke: var(--line) !important; }
html[data-theme] .bmi-under { stroke: color-mix(in srgb, var(--muted) 76%, var(--card)) !important; }
html[data-theme] .bmi-healthy { stroke: var(--success) !important; }
html[data-theme] .bmi-over { stroke: var(--warning) !important; }
html[data-theme] .bmi-obesity { stroke: var(--danger) !important; }

html[data-theme] .bmi-gauge-pointer line {
    stroke: var(--accent-text) !important;
    stroke-width: 4 !important;
    opacity: 1 !important;
}

html[data-theme] .bmi-gauge-pointer circle {
    fill: var(--card) !important;
    stroke: var(--accent-text) !important;
    stroke-width: 4 !important;
    opacity: 1 !important;
}

html[data-theme] :is(.bmi-scale-labels, .bmi-index-result small, .bmi-index-note) {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

/* The live rest alarm follows the selected theme, including late-injected styles. */
html[data-theme] #level-up-rest-alarm-banner {
    border-color: var(--card-border) !important;
    border-left-color: var(--accent) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] #level-up-rest-alarm-banner.is-ending {
    border-color: var(--accent) !important;
    border-left-color: var(--accent) !important;
}

html[data-theme] #level-up-rest-alarm-banner :is(.rest-alarm-kicker, .rest-alarm-time) {
    color: var(--accent-text) !important;
}

html[data-theme] #level-up-rest-alarm-banner .rest-alarm-next {
    color: var(--heading) !important;
}

html[data-theme] #level-up-rest-alarm-banner :is(.rest-alarm-detail, .rest-alarm-alert-row) {
    color: var(--muted) !important;
}

html[data-theme] #level-up-rest-alarm-banner .rest-alarm-alert-row {
    border-top-color: var(--line) !important;
}

html[data-theme] #level-up-rest-alarm-banner :is(
    .rest-alarm-controls button,
    .rest-alarm-alert-row button,
    .rest-alarm-collapse
) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

html[data-theme] #level-up-rest-alarm-banner.is-minimized {
    border-color: var(--accent) !important;
    background: var(--card) !important;
    color: var(--accent-text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] #level-up-rest-alarm-banner .rest-alarm-mini {
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] #level-up-rest-alarm-banner :is(
    .rest-alarm-controls button.rest-alarm-primary,
    .rest-alarm-alert-row button
) {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
}

html[data-theme] #level-up-rest-alarm-banner.is-complete {
    border-color: color-mix(in srgb, var(--success) 45%, var(--card-border)) !important;
    border-left-color: var(--success) !important;
    background: color-mix(in srgb, var(--success) 7%, var(--card)) !important;
}

html[data-theme] #level-up-rest-alarm-banner.is-complete :is(.rest-alarm-kicker, .rest-alarm-time) {
    color: var(--success-text) !important;
}

html[data-theme] #level-up-rest-alarm-banner.is-complete .rest-alarm-controls button.rest-alarm-primary {
    border-color: var(--success) !important;
    background: color-mix(in srgb, var(--success) 13%, var(--surface-raised)) !important;
    color: var(--success-text) !important;
}

/* More-page SVGs use the same neutral contrast as inactive main navigation. */
html[data-theme] .more-menu-group .more-menu-icon {
    color: var(--theme-icon-muted) !important;
}

html[data-theme] .more-menu-group .more-menu-icon .app-silhouette-icon {
    opacity: 1 !important;
}

html[data-theme] .more-appearance-icon {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

html[data-theme] .more-appearance-icon circle {
    fill: currentColor !important;
    stroke: none !important;
}

/* Manual-plan styles are injected after page load, so enforce theme tokens here too. */
html[data-theme] #plan-builder.manual-catalogue :is(
    .workout-day-card,
    .exercise-builder-row.manual-setup-current,
    .manual-day-empty,
    .manual-pick
) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(
    .manual-setup-sets,
    .manual-setup-carousel button,
    .manual-setup-head button,
    .manual-pick-guide,
    .manual-pick-mark
) {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(.day-name-input, .exercise-reps, .manual-picker-search, .manual-picker select) {
    border-color: var(--line) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(.manual-setup-copy h4, .manual-setup-set-count) {
    color: var(--heading) !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(.manual-setup-copy small, .manual-setup-target) {
    color: var(--text-secondary) !important;
}

html[data-theme] #plan-builder.manual-catalogue .builder-exercise-guide {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-setup-index {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(.manual-setup-index-head, .manual-setup-index-row) {
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-setup-index-row {
    background: transparent !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-setup-index-row.is-active {
    background: var(--accent-soft) !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-setup-index-copy strong {
    color: var(--heading) !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(.manual-setup-index-copy small, .manual-setup-index-head small) {
    color: var(--text-secondary) !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-setup-index-row:not(.is-active) .manual-setup-index-number {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text-secondary) !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-setup-index-row.is-active .manual-setup-index-number {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

/* Outlined Form Guide actions must retain readable lettering on every light palette. */
html[data-theme-mode="light"] :is(
    #plan-builder.manual-catalogue .builder-exercise-guide,
    #plan-builder.manual-catalogue .manual-pick-guide,
    .workout-session-logger .logger-form-guide-btn
) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
    text-shadow: none !important;
}

html[data-theme] #plan-builder.manual-catalogue :is(.manual-setup-sets .primary-btn, .manual-pick.selected .manual-pick-mark) {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

html[data-theme] #plan-builder.manual-catalogue .manual-picker-footer {
    border-color: var(--nav-border) !important;
    background: var(--nav-bg) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

/* Nutrition cards use theme surfaces while outside-target follows the selected accent. */
html[data-theme] :is(.calorie-stat-title, .calorie-stat-section-title)>b,
html[data-theme] :is(.calorie-stat-consistency span, .calorie-stat-macro-copy em) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text-secondary) !important;
}

html[data-theme] :is(.calorie-stat-bar>span, .calorie-stat-macro-trend>span::before, .calorie-stat-meal-bar) {
    background: var(--surface-raised) !important;
}

html[data-theme] .calculated-maintenance-progress>i {
    background: var(--surface-raised) !important;
}

html[data-theme] .calculated-maintenance-progress>i>b {
    background: linear-gradient(90deg, var(--accent), var(--success)) !important;
}

/* Dashboard workout breakdown is a secondary action, not a disabled control. */
html[data-theme] .performance-dashboard-card .performance-toggle {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
    text-shadow: none !important;
}

/* Install guidance and reminders are also late-injected app surfaces. */
html[data-theme] :is(.more-install-page, .levelup-install-reminder) {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] :is(.more-install-page-icon, .levelup-install-reminder-icon, .more-install-step-number) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
}

html[data-theme] :is(.more-install-tab, .more-install-steps li) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

html[data-theme] .more-install-tab.selected,
html[data-theme] .levelup-install-reminder-save {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

html[data-theme] :is(.more-install-page-copy h3, .levelup-install-reminder-copy strong) {
    color: var(--heading) !important;
}

/* Cardio logger text must remain readable when the workout runs on a light theme. */
html[data-theme] .cardio-stopwatch-panel {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

html[data-theme] :is(.cardio-stopwatch-display, .previous-performance strong) {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    text-shadow: none !important;
}

html[data-theme] :is(
    .cardio-stopwatch-heading span,
    .cardio-stopwatch-panel small,
    .previous-performance span,
    .cardio-session-card .cardio-metrics-grid label,
    .cardio-session-card .cardio-notes-label
) {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html[data-theme] .cardio-notes-toggle {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

/* Superset controls previously retained fixed black and red styling in Arctic
   and other appearances. Every state now follows the active accent and surface. */
html[data-theme] :is(.session-inline-superset,.session-superset-remove,.superset-runtime-banner>button,.manual-superset-pair,.manual-superset-remove) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

html[data-theme] :is(.session-exercise-card[data-superset-group] .session-inline-superset,.session-superset-option.selected,.manual-superset-badge) {
    border-color: color-mix(in srgb,var(--accent) 52%,var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] :is(.session-superset-option.selected .session-superset-option-marker,.superset-runtime-label,.logger-exercise-strip button.is-superset.active>span) {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    -webkit-text-fill-color: var(--accent-contrast) !important;
}

html[data-theme] :is(.session-superset-current span,.session-superset-option small,.session-superset-empty,.superset-runtime-banner>small,.superset-live-cue span) {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html[data-theme] :is(.superset-cue-kicker,.session-superset-option em,.logger-exercise-strip button.is-superset>span,.manual-superset-pair) {
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] .manual-superset-member {
    border-color: color-mix(in srgb,var(--accent) 38%,var(--line)) !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* RIR keeps a semantic effort scale while retaining each appearance's
   surfaces and typography. These rules intentionally follow the generic
   themed button rules above. */
html[data-theme] .drop-set-menu .set-rir-options button {
    border-color: color-mix(in srgb,var(--rir-choice) 48%,var(--line)) !important;
    background: color-mix(in srgb,var(--rir-choice) 9%,var(--surface-raised)) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

html[data-theme] .drop-set-menu .set-rir-options button.selected {
    border-color: var(--rir-choice) !important;
    background: var(--rir-choice) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-theme] .drop-set-menu :is(.set-rir-menu-heading small,.clear-set-rir) {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
}

/*
 * Onboarding is theme-live: choosing an appearance updates the open flow before
 * the user continues. Keep this final layer authoritative over the older native,
 * granular-unit, muscle-card, and late-injected install/split styles.
 */
html[data-theme] .levelup-onboarding {
    background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
    color: var(--text) !important;
}

html[data-theme] .levelup-onboarding-shell {
    border-color: var(--line) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] .levelup-onboarding :is(
    .onboarding-screen h1,
    .onboarding-screen h2,
    .onboarding-screen h3,
    .onboarding-option strong,
    .onboarding-acquisition-choice strong,
    .onboarding-unit-row > strong,
    .onboarding-exercise-row strong,
    .onboarding-summary strong,
    .onboarding-nutrition-preview strong,
    .onboarding-install-copy h3,
    .split-selected-copy strong
) {
    color: var(--heading) !important;
    -webkit-text-fill-color: var(--heading) !important;
    text-shadow: none !important;
}

html[data-theme] .levelup-onboarding :is(
    .levelup-onboarding-topbar strong,
    .levelup-onboarding-skip,
    .onboarding-screen > p,
    .onboarding-option small,
    .onboarding-helper,
    .onboarding-profile-grid label,
    .onboarding-exercise-row small,
    .onboarding-summary span,
    .onboarding-nutrition-preview span,
    .onboarding-install-copy p,
    .onboarding-install-note,
    .onboarding-install-dismiss
) {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    text-shadow: none !important;
}

html[data-theme] .levelup-onboarding .eyebrow {
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] .levelup-onboarding-progress {
    background: var(--line) !important;
}

html[data-theme] .levelup-onboarding-progress span {
    background: var(--accent) !important;
}

html[data-theme] .levelup-onboarding :is(
    .onboarding-option,
    .onboarding-acquisition-choice,
    .onboarding-chip,
    .onboarding-no-priority,
    .onboarding-unit-row,
    .onboarding-exercise-row,
    .onboarding-summary > div,
    .onboarding-nutrition-preview > div,
    .onboarding-theme-card,
    .onboarding-install-card
) {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    text-shadow: none !important;
}

html[data-theme] .levelup-onboarding :is(
    .onboarding-unit-row button,
    .onboarding-unit-choice button,
    .onboarding-install-tab,
    .onboarding-install-steps li
) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    text-shadow: none !important;
}

html[data-theme] .levelup-onboarding :is(
    .onboarding-option.selected,
    .onboarding-acquisition-choice.selected,
    .onboarding-chip.selected,
    .onboarding-no-priority.selected,
    .onboarding-unit-row button.selected,
    .onboarding-unit-choice button.selected,
    .onboarding-install-tab.selected
) {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
    box-shadow: inset 0 0 0 1px var(--accent-glow) !important;
}

html[data-theme] .levelup-onboarding .onboarding-theme-card.selected {
    border-color: var(--accent) !important;
    background: var(--card) !important;
    box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow) !important;
}

html[data-theme] .levelup-onboarding :is(.onboarding-theme-check, .onboarding-acquisition-check) {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    -webkit-text-fill-color: var(--accent-contrast) !important;
}

html[data-theme] .levelup-onboarding :is(
    .onboarding-profile-grid input,
    .onboarding-profile-grid select,
    .onboarding-exercise-picker input
) {
    border-color: var(--line) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    box-shadow: none !important;
}

html[data-theme] .levelup-onboarding :is(input, textarea)::placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
    opacity: 1 !important;
}

html[data-theme] .levelup-onboarding select option {
    background: var(--input-bg) !important;
    color: var(--text) !important;
}

html[data-theme] .levelup-onboarding :is(.onboarding-selected-exercise, .onboarding-exercise-row b) {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] .levelup-onboarding-footer {
    border-color: var(--nav-border) !important;
    background: var(--nav-bg) !important;
    color: var(--text) !important;
}

html[data-theme] .levelup-onboarding :is(.primary-btn, [data-onboarding-next]) {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    -webkit-text-fill-color: var(--accent-contrast) !important;
    box-shadow: 0 8px 24px var(--accent-glow) !important;
}

html[data-theme] .levelup-onboarding :is(.secondary-btn, [data-onboarding-back]) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    box-shadow: none !important;
}

html[data-theme] .levelup-onboarding button:disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
}

/* Muscle-priority cards are an onboarding-owned visualization and control. */
html[data-theme] .levelup-onboarding .muscle-priority-card {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] .levelup-onboarding .muscle-priority-card.selected {
    border-color: var(--accent) !important;
    background: linear-gradient(180deg, var(--accent-soft), var(--card)) !important;
    box-shadow: inset 0 0 0 1px var(--accent-glow), var(--shadow) !important;
}

html[data-theme] .levelup-onboarding .muscle-priority-visual .form-guide-muscle-highlight {
    fill: var(--accent) !important;
    filter: drop-shadow(0 0 5px var(--accent-glow)) !important;
}

html[data-theme] .levelup-onboarding .muscle-priority-label {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    text-shadow: none !important;
}

html[data-theme] .levelup-onboarding .muscle-priority-card.selected .muscle-priority-label {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] .levelup-onboarding .muscle-priority-check {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    -webkit-text-fill-color: var(--accent-contrast) !important;
}

html[data-theme] .levelup-onboarding .muscle-priority-card:focus-visible {
    outline-color: var(--accent) !important;
}

/* Completion install help is injected after page CSS, so keep specificity high. */
html[data-theme] .levelup-onboarding .onboarding-install-card {
    background: linear-gradient(180deg, var(--accent-soft), var(--card)) !important;
}

html[data-theme] .levelup-onboarding .onboarding-install-icon,
html[data-theme] .levelup-onboarding .onboarding-install-step-number {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] .levelup-onboarding .onboarding-install-installed {
    border-color: color-mix(in srgb, var(--success) 36%, var(--line)) !important;
    background: color-mix(in srgb, var(--success) 9%, var(--card)) !important;
    color: var(--success-text) !important;
    -webkit-text-fill-color: var(--success-text) !important;
}

html[data-theme] .levelup-onboarding .onboarding-install-installed-dot {
    background: var(--success) !important;
}

/* Smart-plan results must not retain the original black, green, or white palette. */
html[data-theme] :is(.smart-set-breakdown-row > i, .plan-muscle-breakdown-row > i) {
    border-color: var(--line) !important;
    background: var(--line) !important;
    box-shadow: none !important;
}

html[data-theme] :is(.smart-set-breakdown-row > i > b, .plan-muscle-breakdown-row > i > b) {
    background: var(--accent) !important;
    box-shadow: none !important;
}

/* The original Level Up black appearance keeps its signature green muscle-volume bars. */
html[data-theme="level-up"] :is(.smart-set-breakdown-row > i > b, .plan-muscle-breakdown-row > i > b) {
    background: #45cb75 !important;
}

html[data-theme] .smart-set-breakdown-heading .eyebrow {
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] button .app-inline-icon {
    color: inherit !important;
}

/* Saved-meal builder controls and interaction states must follow the selected appearance. */
html[data-theme] :is(.food-builder-photo > [data-meal-photo-pick], .food-builder-add) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--accent-text) !important;
    box-shadow: none !important;
}

html[data-theme] :is(.food-builder-item-details[open] > summary, .food-builder-paste[open] > summary, .food-builder-items .food-builder-item-edit:active) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

html[data-theme] :is(.food-builder-item-editor select, .food-builder-item-editor input) {
    border-color: var(--line) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
}

html[data-theme] :is(.food-builder-photo > [data-meal-photo-remove], .food-builder-item-details > summary small, .food-builder-item-details > summary > i, .food-builder-paste > summary small, .food-builder-paste > summary > i, .food-builder-paste-body > p, .food-builder-import-status) {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
}

html[data-theme] .food-builder-item-editor .food-builder-item-actions button:not(.primary-btn) {
    border-color: var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
}

/* Routine Import is injected after the base theme sheet; keep every nested control semantic. */
html[data-theme] .routine-import-launch {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
}

html[data-theme] :is(.routine-import-day-head, .routine-import-exercise) {
    border-color: var(--line) !important;
}

html[data-theme] :is(.routine-import-day-head h4, .routine-import-match strong, .routine-import-summary h4, .routine-import-savebar strong) {
    color: var(--heading) !important;
    -webkit-text-fill-color: var(--heading) !important;
}

html[data-theme] :is(.routine-import-topbar p, .routine-import-review-head p, .routine-import-match small, .routine-import-fields label, .routine-import-note, .routine-import-summary p, .routine-import-summary small, .routine-import-savebar small, .routine-import-tools small) {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted) !important;
}

html[data-theme] .routine-import-row-actions button {
    border-color: var(--line) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    box-shadow: none !important;
}

html[data-theme] .routine-import-row-actions button:active {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-text) !important;
    -webkit-text-fill-color: var(--accent-text) !important;
}

html[data-theme] .routine-import-volume div {
    border: 1px solid var(--line) !important;
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
}

html[data-theme] .routine-import-volume div.is-high,
html[data-theme] .routine-import-exercise.needs-review {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--line)) !important;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-raised)) !important;
    color: var(--warning-text) !important;
}

html[data-theme] .routine-import-match > button {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--line)) !important;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-raised)) !important;
    color: var(--warning-text) !important;
    -webkit-text-fill-color: var(--warning-text) !important;
}