.settings-page {
    width: 100%;
    max-width: 820px;
    margin-top: 24px;
}

.information-page {
    width: 100%;
    max-width: 900px;
    margin-top: 24px;
}

.information-policy {
    padding: 26px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted-text);
    font-size: 14px;
    line-height: 1.65;
}

.information-kicker { color: var(--accent); font-size: 12px; font-weight: 600; }
.information-policy h2 { margin-top: 6px; color: var(--text); font-size: 24px; }
.information-policy h3 { margin: 24px 0 7px; color: var(--text); font-size: 15px; }
.information-policy p + p { margin-top: 10px; }
.information-policy ul { display: grid; gap: 8px; margin: 10px 0 14px; padding-left: 22px; }
.information-policy strong { color: var(--text); }
.information-policy a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.information-updated { margin-top: 4px; color: var(--muted-text); font-size: 12px; }

/* Guide / Privacy policy switch, styled like the other two-way toggles. */
.information-tabs { --tab-index: 0; position: relative; display: grid; width: min(100%, 440px); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; padding: 4px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 999px; }
.information-tab-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); background: var(--accent); border-radius: 999px; transform: translateX(calc(var(--tab-index) * 100%)); transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.information-tabs button { position: relative; z-index: 1; padding: 9px 12px; color: var(--muted-text); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; transition: color 200ms ease; }
.information-tabs button[aria-selected="true"] { color: var(--accent-ink); }
.information-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.information-privacy-panel[hidden],
.information-guide[hidden] { display: none; }

/* Guide */
.information-guide { display: grid; gap: 16px; }
.information-intro,
.information-guide-card { padding: 24px; color: var(--muted-text); background: var(--panel-bg); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; line-height: 1.6; }
.information-intro { background: radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%), var(--panel-bg); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.information-intro h2 { margin: 6px 0 8px; color: var(--text); font-size: 24px; }
.information-quick-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: quick-start; }
.information-quick-start li { display: grid; gap: 4px; padding: 14px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; counter-increment: quick-start; }
.information-quick-start li::before { display: grid; width: 26px; height: 26px; place-items: center; margin-bottom: 4px; color: var(--accent-ink); background: var(--accent); border-radius: 50%; content: counter(quick-start); font-size: 12px; font-weight: 800; }
.information-quick-start strong { color: var(--text); font-size: 14px; }
.information-quick-start span { font-size: 12px; line-height: 1.5; }
/* Two columns that each fill up from the top, so a short card isn't followed by a gap the height of its neighbour. */
.information-guide-grid { columns: 2; column-gap: 16px; }
.information-guide-card { display: grid; gap: 10px; margin-bottom: 16px; break-inside: avoid; scroll-margin-top: 20px; }
.information-guide-card:target { border-color: var(--accent); }
.information-guide-card h3 { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 16px; }
.information-guide-card ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.information-guide-card li::marker { color: var(--accent); }
.information-guide-card strong { color: var(--text); }
.information-guide-card a { color: var(--accent); text-underline-offset: 3px; }
.information-guide-premium { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.information-crown { width: 22px; height: 22px; }
.information-tip { padding: 10px 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); border-radius: 6px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .information-tab-indicator { transition: none; } }
@media (max-width: 760px) {
    .information-guide-grid { columns: 1; }
    .information-quick-start { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .information-intro,
    .information-guide-card { padding: 18px; font-size: 13px; }
    .information-tabs { width: 100%; }
}

.privacy-policy-dialog {
    display: flex;
    width: min(760px, calc(100vw - 24px));
    max-height: min(88vh, 780px);
    max-height: min(88dvh, 780px);
    flex-direction: column;
    margin: auto;
    padding: 0;
    overflow: hidden;
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 24px 72px rgb(0 0 0 / 48%);
}

.privacy-policy-dialog:not([open]) { display: none; }
.privacy-policy-dialog::backdrop { background: rgb(0 0 0 / 76%); backdrop-filter: blur(3px); }
.privacy-policy-dialog[open] { animation: privacy-dialog-enter 260ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.privacy-policy-dialog[open]::backdrop { animation: privacy-backdrop-enter 220ms ease-out both; }
.privacy-policy-dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.privacy-policy-dialog-header h2 { color: var(--text); font-size: 16px; }
.privacy-policy-dialog-header button { width: 34px; height: 34px; background: transparent; color: var(--muted-text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 20px; }
.privacy-policy-dialog-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.privacy-policy-dialog-content .information-policy { max-width: none; padding: 22px; background: transparent; border: 0; border-radius: 0; }
.privacy-policy-retry { margin: 0 22px 22px; padding: 8px 12px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 6px; cursor: pointer; font-weight: bold; }

@keyframes privacy-dialog-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes privacy-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-policy-dialog[open],
    .privacy-policy-dialog[open]::backdrop { animation: none; }
}

@media (max-width: 600px) {
    .information-policy { padding: 18px; font-size: 13px; }
    .privacy-policy-dialog-content .information-policy { padding: 18px; }
}

.settings-section {
    margin-bottom: 18px;
    padding: 24px;
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.settings-section-heading {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.settings-section-heading > span {
    color: var(--accent);
    font-size: 12px;
    font-weight: bold;
}

.settings-section h2 { color: var(--text); font-size: 20px; }
.settings-section-heading p { margin-top: 5px; color: var(--muted-text); font-size: 13px; }

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}

.setting-row > div:not(.mode-control) { display: flex; flex-direction: column; gap: 5px; }
.setting-row strong { color: var(--text); font-size: 14px; }
.settings-username-form { display: flex; flex: 0 1 280px; align-items: center; gap: 8px; min-width: 0; }
.settings-username-form input { flex: 1 1 auto; width: 0; min-width: 0; margin: 0; padding: 8px 10px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.settings-username-form input:disabled { color: var(--muted-text); cursor: not-allowed; }
.settings-username-form .settings-action { flex: 0 0 auto; }
.setting-row span { color: var(--muted-text); font-size: 12px; }
.settings-inline-status { margin-top: 8px; color: var(--muted-text); font-size: 11px; line-height: 1.4; }
.settings-inline-status[hidden] { display: none; }
.setting-row select {
    min-width: 155px;
    padding: 9px 10px;
    background-color: var(--soft-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.mode-control {
    --mode-index: 2;
    position: relative;
    display: grid;
    width: min(100%, 310px);
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px;
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.mode-indicator {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    background: var(--accent);
    border-radius: 6px;
    transform: translateX(calc(var(--mode-index) * 100%));
    transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1);
    pointer-events: none;
}
.mode-control button {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 8px 5px;
    color: var(--muted-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
}
.mode-control button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 700; }
body[data-mode="light"] .mode-control button[aria-pressed="true"] { color: var(--accent-ink); }
.mode-control button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mode-indicator { transition: none; } }

.switch { display: block; position: relative; width: 48px; height: 26px; flex: 0 0 48px; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track {
    display: block;
    position: relative;
    width: 48px;
    height: 26px;
    background-color: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}
.switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background-color: var(--muted-text);
    border-radius: 50%;
    transition: transform 160ms ease, background-color 160ms ease;
}
.switch input:checked + .switch-track { background-color: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track::after { background-color: var(--accent-ink); transform: translateX(22px); }

.settings-action {
    padding: 10px 16px;
    background-color: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.settings-danger-section { border-color: color-mix(in srgb, #e84855 42%, var(--border)); }
.settings-deletion-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.settings-deletion-info > div {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 14px;
    background: color-mix(in srgb, var(--soft-bg) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.settings-deletion-info strong { color: var(--text); font-size: 13px; }
.settings-deletion-info p { color: var(--muted-text); font-size: 12px; line-height: 1.55; }
.delete-account-list { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px; }
.delete-account-list + p { margin-top: 12px; }
.settings-danger-action,
.delete-account-confirm {
    padding: 10px 14px;
    background: transparent;
    color: #e84855;
    border: 1px solid #e84855;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.settings-danger-action:hover { background: #e84855; color: #fff; }
.delete-account-dialog {
    display: flex;
    width: min(520px, calc(100vw - 28px));
    max-height: min(88vh, 720px);
    max-height: min(88dvh, 720px);
    flex-direction: column;
    margin: auto;
    padding: 0;
    overflow: hidden;
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 24px 72px rgb(0 0 0 / 48%);
}
.delete-account-dialog:not([open]) { display: none; }
.delete-account-dialog::backdrop { background: rgb(0 0 0 / 76%); backdrop-filter: blur(3px); }
.delete-account-dialog[open] { animation: privacy-dialog-enter 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.delete-account-dialog-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.delete-account-dialog-header h2 { color: #e84855; font-size: 16px; }
.delete-account-dialog-header button {
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
}
.delete-account-dialog-content { min-height: 0; overflow: auto; padding: 20px; }
.delete-account-dialog-content > div { color: var(--muted-text); font-size: 13px; line-height: 1.55; }
.delete-account-dialog-content > div p + p { margin-top: 12px; }
.delete-account-acknowledgement { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--text); font-size: 13px; }
.delete-account-acknowledgement input {
    appearance: none;
    display: grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    place-content: center;
    background: var(--soft-bg);
    border: 1px solid var(--muted-text);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.delete-account-acknowledgement input::before {
    width: 8px;
    height: 5px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    content: "";
    transform: rotate(-45deg) scale(0);
    transition: transform 120ms ease;
}
.delete-account-acknowledgement input:checked {
    background: #e84855;
    border-color: #e84855;
    box-shadow: 0 0 10px rgb(232 72 85 / 42%);
}
.delete-account-acknowledgement input:checked::before { transform: rotate(-45deg) scale(1); }
.delete-account-acknowledgement input:active { transform: scale(.9); }
.delete-account-status { margin-top: 14px; color: #e84855; font-size: 13px; line-height: 1.5; }
.delete-account-status[hidden] { display: none; }
.delete-account-status.is-success { color: var(--accent); }
.delete-account-dialog-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--border); }
.delete-account-dialog-actions button { min-height: 38px; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.delete-account-dialog-actions #cancelDeleteAccount { background: transparent; color: var(--text); border: 1px solid var(--border); }
.delete-account-confirm { background: #e84855; color: #fff; }
.delete-account-confirm:disabled { opacity: .48; cursor: not-allowed; }
.delete-account-dialog button:focus-visible,
.delete-account-acknowledgement input:focus-visible { outline: 2px solid #e84855; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .delete-account-dialog[open] { animation: none; }
    .delete-account-acknowledgement input,
    .delete-account-acknowledgement input::before { transition: none; }
}

/* Import: a button that opens the file picker, then a confirmation with what will be added. */
.settings-import-button { position: relative; display: inline-flex; align-items: center; }
.settings-import-button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip-path: inset(50%); }
.settings-import-confirm { display: grid; gap: 12px; margin-top: 4px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 7%, var(--soft-bg)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 10px; }
.settings-import-confirm[hidden] { display: none; }
.settings-import-confirm p { color: var(--text); font-size: 13px; line-height: 1.5; }
.settings-import-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.settings-import-actions button { padding: 9px 16px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-weight: bold; }
.settings-import-actions button:disabled { cursor: wait; opacity: .6; }

/* Training Aura (Premium) in the Profile section. */
.settings-aura { display: grid; gap: 14px; margin-top: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; }
.settings-section .settings-aura.premium-surface { background: var(--premium-surface-bg); border-color: var(--premium-surface-border); box-shadow: var(--premium-surface-shadow); }
.settings-aura-heading { display: flex; align-items: flex-start; gap: 12px; }
.settings-aura-heading .premium-crown { width: 32px; height: 32px; }
.settings-aura-heading > div { display: grid; gap: 5px; }
.settings-aura-heading strong { color: var(--text); font-size: 14px; }
.settings-aura-heading span:not(.premium-crown) { color: var(--muted-text); font-size: 12px; line-height: 1.5; }
.settings-aura-upgrade { justify-self: start; text-decoration: none; }
.settings-aura-upgrade[hidden],
.settings-aura-form[hidden] { display: none; }
.settings-aura-form { display: grid; gap: 14px; }
.settings-aura-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.settings-aura-actions .settings-inline-status { margin: 0 auto 0 0; }
.aura-preview { position: relative; height: 130px; overflow: hidden; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; }
.aura-preview .profile-aura { height: 100%; -webkit-mask-image: none; mask-image: none; }
.aura-options { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.aura-options legend { margin-bottom: 8px; color: var(--muted-text); font-size: 12px; font-weight: 700; }
.aura-motion input { position: absolute; opacity: 0; pointer-events: none; }
.aura-motion input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.aura-motions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.aura-motion span { display: block; padding: 8px; color: var(--muted-text); text-align: center; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; }
.aura-motion input:checked + span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

@media (max-width: 600px) {
    .setting-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .delete-account-dialog-actions { flex-wrap: wrap; }
    .settings-aura { padding: 14px; }
}

/* Shared preference overrides for existing page components. */
body[data-theme] .submit-button,
body[data-theme] .stat-card-highlight,
body[data-theme] .workout-filter.active,
body[data-theme] .save-workout-button { background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body[data-theme] .exercise-card h3,
body[data-theme] .new-pr-button,
body[data-theme] .statistics-section-kicker,
body[data-theme] .training-recommendation span,
body[data-theme] .add-edit-exercise-button,
body[data-theme] .personal-record-card { color: var(--accent); border-color: var(--accent); }

body[data-mode="light"] .sidebar,
body[data-mode="light"] .settings-section { background-color: var(--panel-bg); border-color: var(--border); }
body[data-mode="light"] .exercise-card,
body[data-mode="light"] .run-container,
body[data-mode="light"] .personal-record-card,
body[data-mode="light"] .training-recommendation { background-color: color-mix(in srgb, var(--panel-bg) 88%, transparent); }
body[data-mode="light"] input,
body[data-mode="light"] select,
body[data-mode="light"] button:not(.submit-button):not(.save-workout-button) { color: var(--text); }
/* Buttons that sit on the accent colour keep its text colour; the rule above would make them dark on dark. */
body[data-mode="light"] :is(
    .coach-action-primary, .level-road-button.is-primary, .premium-buy-button, .privacy-policy-retry,
    .shared-split-save, .split-share-button, .workout-detail-done, .month-review-share, .rep-button.selected,
    .coach-weight-range button[aria-pressed="true"], .custom-mode-button[aria-pressed="true"],
    .social-feed-filter button[aria-pressed="true"], .muscle-map-toggle button[aria-pressed="true"],
    .information-tabs button[aria-selected="true"], .month-review-button:hover, .new-pr-button:hover,
    .select-split-button:hover, .weekly-challenge-reroll-button:hover, .add-people-button:not([aria-expanded="true"]),
    button.profile-level-badge, .profile-privacy-control button[aria-pressed="true"], .exercise-last-time-repeat:hover,
    .recap-designs button[aria-pressed="true"], .social-congrats-button.is-congratulated
) { color: var(--accent-ink); }
/* :not(#repeat) outranks the light-mode button rule above. */
body[data-mode="light"] .exercise-last-time-repeat:not(:hover):not(#repeat) { color: var(--accent); }

/* Components that previously used the default green directly. */
.calendar-day.has-workout,
.stat-card-highlight,
.training-recommendation.is-primary > strong,
.submit-button,
.save-workout-button,
.rep-button.selected,
.workout-filter.active,
.settings-action {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.calendar-day.has-workout,
.stat-card-highlight,
.training-recommendation.is-primary > strong,
.submit-button,
.save-workout-button,
.rep-button.selected,
.workout-filter.active,
.settings-action { color: var(--accent-ink) !important; }

.calendar-navigation button:hover,
.workout-filter:hover,
.edit-workout-button:hover,
.cancel-edit-button:hover,
.add-edit-exercise-button:hover,
.new-pr-button:hover,
#addExerciseButton:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.new-pr-button:hover {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
}

.workout-filter:hover {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
}

.exercise-card h3,
.form-kicker,
.new-pr-button,
#addExerciseButton,
.edit-exercise-fields legend,
.add-edit-exercise-button,
.statistics-section-kicker,
.training-recommendation span {
    color: var(--accent) !important;
}

.new-pr-button,
#addExerciseButton,
.add-edit-exercise-button { border-color: var(--accent) !important; }

.edit-workout-button {
    border-color: var(--accent) !important;
}

.training-recommendation {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}

.training-recommendation.is-primary {
    border-color: var(--accent) !important;
}

#bodyPart {
    border-color: var(--accent) !important;
}

#bodyPart:hover,
.training-recommendation:hover,
.calendar-navigation button:hover,
.workout-filter:hover,
.edit-workout-button:hover,
.submit-button:hover,
.save-workout-button:hover,
.new-pr-button:hover,
.settings-action:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.training-recommendation:hover {
    background-color: color-mix(in srgb, var(--accent) 10%, var(--muted-bg)) !important;
}

body[data-mode="light"] .calendar-day.no-workout,
body[data-mode="light"] .workout-filter,
body[data-mode="light"] .edit-workout-button,
body[data-mode="light"] .cancel-edit-button,
body[data-mode="light"] .rep-button {
    background-color: var(--soft-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

body[data-mode="light"] .calendar-month,
body[data-mode="light"] .train-today h2,
body[data-mode="light"] .training-recommendation h3,
body[data-mode="light"] .personal-records h2,
body[data-mode="light"] .section-heading h2,
body[data-mode="light"] .workout-header h2,
body[data-mode="light"] .exercise-row strong,
body[data-mode="light"] .run-results span,
body[data-mode="light"] .personal-record-card strong {
    color: var(--text) !important;
}

body[data-mode="light"] .exercise-custom-set {
    background-color: var(--soft-bg);
    border-color: var(--border);
    color: var(--text);
}

body[data-mode="light"] .run-results div {
    background-color: var(--soft-bg);
    border: 1px solid var(--border);
}

body[data-mode="light"] .exercise-custom-set-label { color: var(--muted-text); }
body[data-mode="light"] .exercise-row .exercise-custom-set-value { color: var(--text) !important; }

body[data-mode="light"] .personal-record-card {
    background-color: var(--muted-bg) !important;
    border-left-color: var(--accent) !important;
}

body[data-mode="light"] .personal-record-name,
body[data-mode="light"] .personal-record-date {
    color: var(--muted-text) !important;
}

body[data-mode="light"] .stat-card-highlight h2,
body[data-mode="light"] .stat-card-highlight span {
    color: var(--accent-ink) !important;
}

body[data-mode="light"] .stat-card-highlight p {
    color: var(--accent-ink) !important;
}

body[data-mode="light"] .social-post,
body[data-mode="light"] .social-search-panel,
body[data-mode="light"] .social-section {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent),
        0 12px 28px rgb(0 0 0 / 8%) !important;
}

body[data-mode="light"].dashboard-page .training-recommendation {
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 34%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}

body[data-mode="light"] .nav-link[aria-current="page"] {
    background-color: color-mix(in srgb, var(--accent) 24%, var(--panel-bg)) !important;
    box-shadow: inset 3px 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
        0 5px 14px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

body[data-mode="light"] .select-split-button,
body[data-mode="light"] .new-pr-button,
body[data-mode="light"] #addExerciseButton,
body[data-mode="light"] .add-edit-exercise-button,
body[data-mode="light"] .select-workout-friends,
body[data-mode="light"] .distance-preset,
body[data-mode="light"] .custom-mode-button,
body[data-mode="light"] .split-add-button,
body[data-mode="light"] .social-like-button,
body[data-mode="light"] .social-congrats-button,
body[data-mode="light"] .social-reaction-count {
    border-width: 2px !important;
}

body[data-mode="light"] .social-like-button {
    color: #9d1f2d;
    border-color: #9d1f2d;
}

body[data-mode="light"] .social-like-button:hover {
    background-color: #9d1f2d;
    color: #ffffff;
}

body[data-mode="light"] .social-congrats-button {
    color: #804500;
    border-color: #804500;
}

body[data-mode="light"] .social-congrats-button:hover {
    background-color: #804500;
    color: #ffffff;
}

body[data-mode="light"] .pr-section,
body[data-mode="light"] .exercise-card,
body[data-mode="light"] .run-container {
    background-color: var(--muted-bg) !important;
    border-color: var(--border) !important;
}

body[data-mode="light"] .pr-section .section-heading h2,
body[data-mode="light"] .pr-section .section-description,
body[data-mode="light"] .optional-label {
    color: var(--text) !important;
}

body[data-mode="light"] .new-pr-button,
body[data-mode="light"] #addExerciseButton {
    background-color: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

body[data-mode="light"] .new-pr-button:hover,
body[data-mode="light"] #addExerciseButton:hover {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    border-color: var(--accent) !important;
}

body[data-mode="light"] .pr-row {
    border-top-color: var(--border) !important;
}

body[data-mode="light"] .rep-button:hover {
    color: var(--text) !important;
    background-color: var(--panel-bg) !important;
}

body[data-mode="light"] .sidebar,
body[data-mode="light"] .account-panel,
body[data-mode="light"] .settings-section {
    background-color: var(--panel-bg) !important;
    border-color: var(--border) !important;
}

body[data-mode="light"].dashboard-page .statistics-calendar,
body[data-mode="light"].dashboard-page .stat-card:not(.stat-card-highlight),
body[data-mode="light"].dashboard-page .train-today,
body[data-mode="light"].dashboard-page .personal-records,
body[data-mode="light"].dashboard-page .training-recommendation,
body[data-mode="light"].profile-screen .profile-identity,
body[data-mode="light"].profile-screen .profile-card,
body[data-mode="light"].profile-screen .private-profile-notice {
    background-color: color-mix(in srgb, var(--panel-bg) 88%, transparent) !important;
    border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%) !important;
}

body[data-mode="light"].social-screen .social-post,
body[data-mode="light"].social-screen .social-search-panel,
body[data-mode="light"].social-screen .social-section {
    background-color: color-mix(in srgb, var(--panel-bg) 88%, transparent) !important;
    border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%) !important;
}

body[data-mode="light"].workout-history-screen .workout-card {
    background-color: color-mix(in srgb, var(--panel-bg) 88%, transparent) !important;
    border-color: color-mix(in srgb, var(--body-part-color) 30%, var(--border)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%) !important;
}

body[data-mode="light"].workout-history-screen .workout-card:hover {
    border-color: color-mix(in srgb, var(--body-part-color) 54%, var(--border)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), 0 16px 34px color-mix(in srgb, var(--body-part-color) 14%, transparent) !important;
}

body[data-mode="light"].workout-entry-screen .workout-form {
    background-color: color-mix(in srgb, var(--panel-bg) 88%, transparent) !important;
    border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%) !important;
}

body[data-mode="light"].workout-entry-screen .exercise-card,
body[data-mode="light"].workout-entry-screen .additional-body-part-section,
body[data-mode="light"].workout-entry-screen .run-container,
body[data-mode="light"].workout-entry-screen .bike-container,
body[data-mode="light"].workout-entry-screen .pr-section {
    background-color: color-mix(in srgb, var(--muted-bg) 92%, transparent) !important;
    border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%) !important;
}

body[data-mode="light"] .calendar-navigation button,
body[data-mode="light"] .calendar-day.no-workout,
body[data-mode="light"] .workout-filter,
body[data-mode="light"] .edit-workout-button,
body[data-mode="light"] .cancel-edit-button,
body[data-mode="light"] .rep-button,
body[data-mode="light"] #workoutSearch,
body[data-mode="light"] #workoutSort,
body[data-mode="light"] .workout-edit-form input,
body[data-mode="light"] .workout-edit-form select,
body[data-mode="light"] input,
body[data-mode="light"] select,
body[data-mode="light"] textarea {
    background-color: var(--soft-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

body[data-mode="light"] .calendar-navigation button {
    color: var(--text) !important;
}

body[data-mode="light"] .calendar-navigation button:hover {
    color: var(--accent-ink) !important;
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

body[data-mode="light"] .calendar-weekdays,
body[data-mode="light"] .statistics-intro,
body[data-mode="light"] .statistics-date,
body[data-mode="light"] .stat-card h2,
body[data-mode="light"] .stat-card span,
body[data-mode="light"] .train-today-subtitle,
body[data-mode="light"] .workout-header span,
body[data-mode="light"] .exercise-row,
body[data-mode="light"] .run-results strong,
body[data-mode="light"] .no-workouts,
body[data-mode="light"] .menu-title,
body[data-mode="light"] footer {
    color: var(--muted-text) !important;
}

body[data-mode="light"] .calendar-day.no-workout {
    color: var(--muted-text) !important;
}

body[data-mode="light"] .exercise-row strong,
body[data-mode="light"] .run-results span,
body[data-mode="light"] .workout-edit-form label,
body[data-mode="light"] .settings-section h2,
body[data-mode="light"] .settings-section strong,
body[data-mode="light"] .personal-record-card strong,
body[data-mode="light"] .workout-header h2,
body[data-mode="light"] .calendar-month,
body[data-mode="light"] .train-today h2 {
    color: var(--text) !important;
}

body[data-mode="light"] .stat-card-highlight {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-ink) !important;
}

body[data-mode="light"] .stat-card-highlight h2,
body[data-mode="light"] .stat-card-highlight span,
body[data-mode="light"] .stat-card-highlight p {
    color: var(--accent-ink) !important;
}