/* MG FitClub shared themes: semantic surfaces, legible text, and restrained brand accents. */
:root[data-mg-theme="modern-light"],
:root[data-mg-theme="modern-light-coral"],
:root[data-mg-theme="modern-dark"],
:root[data-mg-theme="modern-dark-coral"] {
  --mg-page: #f3f6f0;
  --mg-surface: #ffffff;
  --mg-surface-soft: #edf3e7;
  --mg-text: #20291e;
  --mg-muted: #56624f;
  --mg-border: #dce5d7;
  --mg-accent: #4d6d1c;
  --mg-accent-soft: #e8f1d8;
  --mg-primary: #b8e63f;
  --mg-on-primary: #18210f;
  --mg-secondary: #805b17;
  --mg-secondary-soft: #f5edd9;
  --mg-success-bg: #176b3a;
  --mg-on-success: #ffffff;
  --mg-success-hover: #12532d;
  --mg-danger-bg: #9b2f43;
  --mg-on-danger: #ffffff;
  --mg-danger-hover: #7f2537;
  --mg-warning-bg: #f0c866;
  --mg-on-warning: #30250e;
  --mg-warning-hover: #dfb64f;
  --mg-selected-bg: #b8e63f;
  --mg-on-selected: #18210f;
  --mg-selected-border: #4d6d1c;
  --ink: var(--mg-text);
  --ink-2: var(--mg-surface-soft);
  --paper: var(--mg-surface-soft);
  --white: var(--mg-text);
  --acid: var(--mg-primary);
  --acid-dark: var(--mg-accent);
  --dark-line: var(--mg-border);
  --bg0: var(--mg-page);
  --bg1: #edf3e7;
  --bg2: #e4eddb;
  --panel: var(--mg-surface);
  --panel2: var(--mg-surface-soft);
  --raise: #f7f9f4;
  --ink: var(--mg-text);
  --muted: var(--mg-muted);
  --dim: #65745d;
  --faint: #7d8a75;
  --line: var(--mg-border);
  --line2: #e8eee3;
  --line3: #eef2ea;
  --lime: var(--mg-accent);
  --lime2: #3e5b1b;
  --mint: var(--mg-secondary);
  --amber: var(--mg-secondary);
  --coral: #a73e54;
  --blue: #356986;
  --violet: #654d9d;
  --rose: #a73e54;
  --w-accent: var(--mg-accent);
  --w-line: var(--mg-border);
  --bg: var(--mg-page);
  --text: var(--mg-text);
  color-scheme: light;
  color: var(--mg-text);
  background: var(--mg-page) !important;
}

:root[data-mg-theme="modern-dark"],
:root[data-mg-theme="modern-dark-coral"] {
  --mg-page: #0d1510;
  --mg-surface: #17221a;
  --mg-surface-soft: #202d23;
  --mg-text: #f2f7ef;
  --mg-muted: #bac7b7;
  --mg-border: #394a3d;
  --mg-accent: #d6ff78;
  --mg-accent-soft: #2a3b1d;
  --mg-primary: #c6ff3f;
  --mg-on-primary: #17200f;
  --mg-secondary: #f0c866;
  --mg-secondary-soft: #3d321b;
  --mg-success-bg: #b8e63f;
  --mg-on-success: #17200f;
  --mg-success-hover: #a4d52e;
  --mg-danger-bg: #ff91a3;
  --mg-on-danger: #341018;
  --mg-danger-hover: #ffb0bd;
  --mg-warning-bg: #f0c866;
  --mg-on-warning: #30250e;
  --mg-warning-hover: #ffda84;
  --mg-selected-bg: #c6ff3f;
  --mg-on-selected: #17200f;
  --mg-selected-border: #d6ff78;
  --ink: var(--mg-text);
  --ink-2: var(--mg-surface-soft);
  --paper: var(--mg-surface-soft);
  --white: var(--mg-text);
  --acid: var(--mg-primary);
  --acid-dark: var(--mg-accent);
  --dark-line: var(--mg-border);
  --bg1: #111c14;
  --bg2: #18251b;
  --panel: var(--mg-surface);
  --panel2: var(--mg-surface-soft);
  --raise: #27372a;
  --dim: #aab9a4;
  --faint: #8c9b86;
  --line2: #2d3b30;
  --line3: #253329;
  --lime2: #a7df2e;
  --mint: var(--mg-secondary);
  --coral: #ff91a3;
  --blue: #9ac9e5;
  --violet: #c4b0f5;
  --rose: #ff91a3;
  --bg: var(--mg-page);
  color-scheme: dark;
  background: var(--mg-page) !important;
}

:root[data-mg-theme="modern-light-coral"] {
  --mg-secondary: #a3354d;
  --mg-secondary-soft: #f8e8ed;
  --mint: #a3354d;
  --amber: #a3354d;
  --coral: #a3354d;
  --rose: #a3354d;
}
:root[data-mg-theme="modern-dark-coral"] {
  --mg-secondary: #ff91a3;
  --mg-secondary-soft: #44242e;
  --mint: #ff91a3;
  --amber: #ff91a3;
  --coral: #ff91a3;
  --rose: #ff91a3;
}

/* Studio Cobalt: warm paper, ink-blue structure, and a tangerine spark. */
:root[data-mg-theme="modern-studio"] {
  --mg-page: #f5f2e9;
  --mg-surface: #fffefa;
  --mg-surface-soft: #ece9df;
  --mg-text: #192842;
  --mg-muted: #4f5d73;
  --mg-border: #cfd5df;
  --mg-accent: #1d4ed8;
  --mg-accent-soft: #e5ecff;
  --mg-primary: #1d4ed8;
  --mg-on-primary: #ffffff;
  --mg-secondary: #c2410c;
  --mg-secondary-soft: #ffeadc;
  --mg-success-bg: #0f766e;
  --mg-on-success: #ffffff;
  --mg-success-hover: #115e59;
  --mg-danger-bg: #b4233a;
  --mg-on-danger: #ffffff;
  --mg-danger-hover: #8e1b2b;
  --mg-warning-bg: #f3d06b;
  --mg-on-warning: #30250e;
  --mg-warning-hover: #e5bd4e;
  --mg-selected-bg: #1d4ed8;
  --mg-on-selected: #ffffff;
  --mg-selected-border: #192842;
  --accent: var(--mg-accent);
  --accent-deep: var(--mg-secondary);
  --line-accent: color-mix(in srgb, var(--mg-accent) 26%, transparent);
  --ink: var(--mg-text);
  --ink-2: var(--mg-surface-soft);
  --paper: var(--mg-surface-soft);
  --white: var(--mg-text);
  --acid: var(--mg-primary);
  --acid-dark: #173b9e;
  --dark-line: var(--mg-border);
  --bg0: var(--mg-page);
  --bg1: #f0eee7;
  --bg2: #e9e7df;
  --panel: var(--mg-surface);
  --panel2: var(--mg-surface-soft);
  --raise: #ffffff;
  --muted: var(--mg-muted);
  --dim: #5f6c80;
  --faint: #748095;
  --line: var(--mg-border);
  --line2: #dce0e6;
  --line3: #e5e7eb;
  --lime: var(--mg-accent);
  --lime2: #1741b4;
  --mint: var(--mg-secondary);
  --amber: var(--mg-secondary);
  --coral: #c2410c;
  --blue: #1d4ed8;
  --violet: #5442a8;
  --rose: #b4233a;
  --w-accent: var(--mg-accent);
  --w-line: var(--mg-border);
  --bg: var(--mg-page);
  --text: var(--mg-text);
  color-scheme: light;
  color: var(--mg-text);
  background: var(--mg-page) !important;
}

:root[data-mg-theme="classic"] {
  --mg-success-bg: #b8e63f;
  --mg-on-success: #17200f;
  --mg-success-hover: #a4d52e;
  --mg-danger-bg: #ff91a3;
  --mg-on-danger: #341018;
  --mg-danger-hover: #ffb0bd;
  --mg-warning-bg: #f0c866;
  --mg-on-warning: #30250e;
  --mg-warning-hover: #ffda84;
  --mg-selected-bg: #c6ff3f;
  --mg-on-selected: #17200f;
  --mg-selected-border: #d6ff78;
}

body[data-mg-theme^="modern-"] {
  --role-accent: var(--mg-accent) !important;
  --role-overlay: transparent !important;
  --role-surface: var(--mg-surface) !important;
  --role-surface2: var(--mg-surface-soft) !important;
  --role-line: var(--mg-border) !important;
  --role-text: var(--mg-text) !important;
  --role-muted: var(--mg-muted) !important;
  --ath-accent: var(--mg-accent) !important;
  --ath-accent-soft: color-mix(in srgb, var(--mg-primary) 20%, transparent) !important;
  --ath-overlay: transparent !important;
  --ath-surface: var(--mg-surface) !important;
  --ath-surface-2: var(--mg-surface-soft) !important;
  --ath-line: var(--mg-border) !important;
  --ath-text: var(--mg-text) !important;
  --ath-muted: var(--mg-muted) !important;
  --w-accent: var(--mg-accent) !important;
  --w-line: var(--mg-border) !important;
  --bg: var(--mg-page) !important;
  --panel: var(--mg-surface) !important;
  --line: var(--mg-border) !important;
  --text: var(--mg-text) !important;
  --muted: var(--mg-muted) !important;
  --lime: var(--mg-accent) !important;
  color: var(--mg-text) !important;
  background: var(--mg-page) !important;
}

html[data-mg-theme^="modern-"] body,
body[data-mg-theme^="modern-"] {
  color: var(--mg-text) !important;
  background-color: var(--mg-page) !important;
}
body[data-mg-theme^="modern-"] .role-bg,
body[data-mg-theme^="modern-"] .role-bg-overlay,
body[data-mg-theme^="modern-"] .athlete-bg,
body[data-mg-theme^="modern-"] .athlete-bg-overlay,
body[data-mg-theme^="modern-"] .dashboard-bg,
body[data-mg-theme^="modern-"] .dashboard-bg-overlay {
  display: none !important;
}

body:not(.mg-home)[data-mg-theme^="modern-"] :is(
  .hero, .top, .header, .topbar, .content, .shell, .card, .panel, .box, .modal,
  .drawer, .program, .exercise-wrap, .purple, .balance, .summary, .feature,
  .news, .create, .tablebox, .broadcast, .meal, .exercise, .timer, .controls,
  .sub, .parts, .switch, .tabs, .bottom, .w-card, .n-meal, .n-template-card,
  .auth-card, .login-card, .workout-card, .nutrition-card, .notification-panel,
  .announcement, .toast, dialog, .guide-card, .hint, .faq, .guide, .closing,
  .site-footer, .exp-hero,
  .exp-services, .exp-stories, .service-films, .exp-final, .journal-header,
  .journal-footer, .seo-detail, .plan-category, .testimonials-section, .faq-section
) {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
  background-color: var(--mg-surface) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--mg-text) 10%, transparent);
}
body:not(.mg-home)[data-mg-theme^="modern-"] article {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
  background-color: var(--mg-surface) !important;
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(.hero, .topbar, .header, .workout-header) {
  background-image: linear-gradient(135deg, var(--mg-surface), var(--mg-surface-soft)) !important;
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(p, small, .muted, .detail, .subtitle, .w-muted, .n-empty, .date, .stats) {
  color: var(--mg-muted) !important;
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(a, .accent, .icon, .n-count, .w-count, .workout-header small) {
  color: var(--mg-accent) !important;
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(input:not([type="checkbox"]), textarea, select, .field, .search) {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
  background: var(--mg-surface-soft) !important;
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(button, .btn, .button, .tab, .role, .back) {
  color: var(--mg-text);
  border-color: var(--mg-border);
  background-color: var(--mg-surface-soft);
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(.primary, .btn-primary, .button:not(.ghost), button[type="submit"], .tab.active, .role.active, .day.active, .switch .active, .controls .main) {
  color: var(--mg-on-primary) !important;
  border-color: var(--mg-primary) !important;
  background: var(--mg-primary) !important;
}
body:not(.mg-home)[data-mg-theme^="modern-"] :is(input, textarea, select, button, a):focus-visible {
  outline-color: var(--mg-accent) !important;
}

/* Semantic actions keep their meaning and text contrast after the shared button reset. */
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="green"],
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="success"] {
  color: var(--mg-on-success) !important;
  border-color: var(--mg-success-bg) !important;
  background-color: var(--mg-success-bg) !important;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="danger"] {
  color: var(--mg-on-danger) !important;
  border-color: var(--mg-danger-bg) !important;
  background-color: var(--mg-danger-bg) !important;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="yellow"],
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="warning"] {
  color: var(--mg-on-warning) !important;
  border-color: var(--mg-warning-bg) !important;
  background-color: var(--mg-warning-bg) !important;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="green"]:hover:not(:disabled),
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="success"]:hover:not(:disabled) {
  color: var(--mg-on-success) !important;
  border-color: var(--mg-success-hover) !important;
  background-color: var(--mg-success-hover) !important;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="danger"]:hover:not(:disabled) {
  color: var(--mg-on-danger) !important;
  border-color: var(--mg-danger-hover) !important;
  background-color: var(--mg-danger-hover) !important;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="yellow"]:hover:not(:disabled),
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a)[class~="warning"]:hover:not(:disabled) {
  color: var(--mg-on-warning) !important;
  border-color: var(--mg-warning-hover) !important;
  background-color: var(--mg-warning-hover) !important;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a):is(.green, .success, .danger, .yellow, .warning):focus-visible {
  outline: 3px solid var(--mg-accent, var(--mg-primary, #c6ff3f)) !important;
  outline-offset: 2px;
}
[data-mg-theme] :is(button, input[type="button"], input[type="submit"], .btn, .button, a):is(.green, .success, .danger, .yellow, .warning):disabled {
  cursor: not-allowed;
  box-shadow: none;
  border-style: dashed;
}

/* Selection remains unmistakable after the page and theme button rules cascade. */
body[data-mg-theme] .filter-btn[aria-pressed="true"],
body[data-mg-theme] .membership-duration[aria-pressed="true"] {
  color: var(--mg-on-selected) !important;
  border: 2px solid var(--mg-selected-border) !important;
  background: var(--mg-selected-bg) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mg-selected-border) 34%, transparent) !important;
  font-weight: 850;
}
body[data-mg-theme] .filter-btn[aria-pressed="true"]:focus-visible,
body[data-mg-theme] .membership-duration[aria-pressed="true"]:focus-visible {
  outline: 3px solid var(--mg-accent, var(--mg-primary, #c6ff3f)) !important;
  outline-offset: 3px;
}
[data-mg-theme] .floating-chat {
  color: var(--mg-on-success) !important;
  border-color: var(--mg-success-bg) !important;
  background: var(--mg-success-bg) !important;
}
[data-mg-theme] .floating-chat:hover {
  color: var(--mg-on-success) !important;
  border-color: var(--mg-success-hover) !important;
  background: var(--mg-success-hover) !important;
}

/* The public landing page has its own editorial layout and already uses design tokens.
   Feed those tokens from the shared theme without flattening its video hero. */
body.mg-home[data-mg-theme^="modern-"] {
  --ink: var(--mg-page);
  --ink-2: var(--mg-surface);
  --paper: var(--mg-surface-soft);
  --white: var(--mg-text);
  --muted: var(--mg-muted);
  --line: color-mix(in srgb, var(--mg-text) 18%, transparent);
  --dark-line: color-mix(in srgb, var(--mg-text) 18%, transparent);
  --acid: var(--mg-primary);
  --acid-dark: var(--mg-accent);
  color: var(--mg-text) !important;
  background-color: var(--mg-page) !important;
}
body.mg-home[data-mg-theme^="modern-"] :is(.hero, .header, .menu, .gallery-modal, .lightbox) {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
}
body.mg-home[data-mg-theme^="modern-"] .hero {
  background: transparent !important;
  box-shadow: none !important;
}
body.mg-home[data-mg-theme^="modern-"] :is(.intro, .programs, .founder, .location, .register, .footer) {
  color: var(--mg-text);
}
body.mg-home[data-mg-theme="modern-studio"] .hero {
  --mg-text: #fffefa;
  --white: #fffefa;
  color: #fffefa !important;
}
body.mg-home[data-mg-theme="modern-studio"] .hero :is(h1, h2, h3, p, small, strong, .hero__eyebrow, .hero__brand, .hero__footer) {
  color: #fffefa !important;
  text-shadow: 0 1px 18px rgba(5, 15, 35, .48);
}
body.mg-home[data-mg-theme="modern-studio"] .hero .button--accent {
  color: #fff !important;
}
body.mg-home[data-mg-theme="modern-studio"] .hero__brand i,
body.mg-home[data-mg-theme="modern-studio"] .hero__eyebrow span {
  color: var(--mg-secondary) !important;
}
body.mg-home[data-mg-theme^="modern-"] .register {
  background-color: var(--mg-surface) !important;
}
body.mg-home .mg-digital {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.6fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding-block: clamp(64px, 9vw, 124px);
}
body.mg-home .mg-digital__intro { position: sticky; top: 110px; max-width: 440px; }
body.mg-home .mg-digital__intro h2 { margin: 18px 0 14px; font-size: var(--h2); line-height: 1.55; }
body.mg-home .mg-digital__intro p,
body.mg-home .mg-digital__item p { color: var(--mg-muted); line-height: 1.9; }
body.mg-home .mg-digital__all,
body.mg-home .mg-digital__link { color: var(--mg-accent); font-weight: 700; }
body.mg-home .mg-digital__all { display: inline-flex; gap: 10px; align-items: center; margin-top: 14px; min-height: 44px; }
body.mg-home .mg-digital__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.mg-home .mg-digital__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  min-height: 224px;
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid var(--mg-border);
  border-radius: 22px;
  color: var(--mg-text);
  background: var(--mg-surface);
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
body.mg-home .mg-digital__item:hover { transform: translateY(-4px); border-color: var(--mg-accent); background: var(--mg-surface-soft); }
body.mg-home .mg-digital__number { color: var(--mg-muted); font: 600 12px/1.5 var(--fontnum, sans-serif); }
body.mg-home .mg-digital__icon { color: var(--mg-accent); font-size: 27px; line-height: 1; }
body.mg-home .mg-digital__item h3 { grid-column: 1 / -1; margin: 22px 0 3px; font-size: 1.15rem; }
body.mg-home .mg-digital__item p { grid-column: 1 / -1; margin: 4px 0 20px; font-size: .9rem; }
body.mg-home .mg-digital__link { grid-column: 1 / -1; align-self: end; font-size: .85rem; }
body.mg-home[data-mg-theme^="modern-"] .mg-digital__item:focus-visible,
body.mg-home[data-mg-theme^="modern-"] .mg-digital__all:focus-visible { outline: 3px solid var(--mg-accent); outline-offset: 4px; }
@media (max-width: 760px) {
  body.mg-home .mg-digital { grid-template-columns: 1fr; }
  body.mg-home .mg-digital__intro { position: static; max-width: 620px; }
}
@media (max-width: 480px) {
  body.mg-home .mg-digital__grid { grid-template-columns: 1fr; }
  body.mg-home .mg-digital__item { min-height: 190px; }
}

.mg-theme-picker {
  position: fixed;
  z-index: 2147482000;
  left: 14px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  direction: rtl;
  font-family: inherit;
}
.mg-theme-picker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--mg-border, rgba(198,255,63,.35));
  border-radius: 16px;
  color: var(--mg-text, #f5f7f1);
  background: var(--mg-surface, rgba(12,17,10,.94));
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mg-theme-picker__trigger svg { width: 19px; height: 19px; flex: 0 0 auto; }
.mg-theme-picker__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(330px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--mg-border, #394a3d);
  border-radius: 18px;
  color: var(--mg-text, #f5f7f1);
  background: var(--mg-surface, #17221a);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.mg-theme-picker__panel[hidden] { display: none !important; }
.mg-theme-picker__title { margin: 0 0 8px; font-size: 13px; }
.mg-theme-picker__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mg-theme-picker__option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 7px;
  border: 1px solid var(--mg-border, #394a3d);
  border-radius: 12px;
  color: var(--mg-text, #f5f7f1);
  background: var(--mg-surface-soft, #202d23);
  font: inherit;
  font-size: 11px;
  text-align: right;
  cursor: pointer;
}
.mg-theme-picker__option[aria-pressed="true"] { outline: 2px solid var(--mg-accent, #c6ff3f); outline-offset: 1px; }
.mg-theme-picker__option:focus-visible,
.mg-theme-picker__trigger:focus-visible { outline: 3px solid var(--mg-accent, #c6ff3f); outline-offset: 2px; }
.mg-theme-picker__swatch { display: flex; flex: 0 0 38px; height: 25px; overflow: hidden; border: 1px solid #8886; border-radius: 8px; }
.mg-theme-picker__swatch i { flex: 1; }
.mg-theme-picker__label { min-width: 0; }
.mg-theme-picker__option[data-theme="modern-light"] .mg-theme-picker__swatch i:nth-child(1) { background: #f3f6f0; }
.mg-theme-picker__option[data-theme="modern-light"] .mg-theme-picker__swatch i:nth-child(2) { background: #b8e63f; }
.mg-theme-picker__option[data-theme="modern-light"] .mg-theme-picker__swatch i:nth-child(3) { background: #d4b96e; }
.mg-theme-picker__option[data-theme="modern-light-coral"] .mg-theme-picker__swatch i:nth-child(1) { background: #f3f6f0; }
.mg-theme-picker__option[data-theme="modern-light-coral"] .mg-theme-picker__swatch i:nth-child(2) { background: #b8e63f; }
.mg-theme-picker__option[data-theme="modern-light-coral"] .mg-theme-picker__swatch i:nth-child(3) { background: #a3354d; }
.mg-theme-picker__option[data-theme="modern-dark"] .mg-theme-picker__swatch i:nth-child(1) { background: #0d1510; }
.mg-theme-picker__option[data-theme="modern-dark"] .mg-theme-picker__swatch i:nth-child(2) { background: #c6ff3f; }
.mg-theme-picker__option[data-theme="modern-dark"] .mg-theme-picker__swatch i:nth-child(3) { background: #f0c866; }
.mg-theme-picker__option[data-theme="modern-dark"] .mg-theme-picker__swatch i:nth-child(4) { background: #aeb9b2; }
.mg-theme-picker__option[data-theme="modern-dark-coral"] .mg-theme-picker__swatch i:nth-child(1) { background: #0d1510; }
.mg-theme-picker__option[data-theme="modern-dark-coral"] .mg-theme-picker__swatch i:nth-child(2) { background: #c6ff3f; }
.mg-theme-picker__option[data-theme="modern-dark-coral"] .mg-theme-picker__swatch i:nth-child(3) { background: #ff91a3; }
.mg-theme-picker__option[data-theme="modern-studio"] .mg-theme-picker__swatch i:nth-child(1) { background: #f5f2e9; }
.mg-theme-picker__option[data-theme="modern-studio"] .mg-theme-picker__swatch i:nth-child(2) { background: #1d4ed8; }
.mg-theme-picker__option[data-theme="modern-studio"] .mg-theme-picker__swatch i:nth-child(3) { background: #c2410c; }
.mg-theme-picker__option[data-theme="classic"] .mg-theme-picker__swatch i:nth-child(1) { background: #080a08; }
.mg-theme-picker__option[data-theme="classic"] .mg-theme-picker__swatch i:nth-child(2) { background: #c6ff3f; }
.mg-theme-picker__option[data-theme="classic"] .mg-theme-picker__swatch i:nth-child(3) { background: #aab4a4; }

/* A warmer editorial canvas makes this palette unmistakable without changing layout. */
body[data-mg-theme="modern-studio"] {
  background-image:
    radial-gradient(ellipse at 92% 4%, color-mix(in srgb, var(--mg-primary) 9%, transparent), transparent 34rem),
    radial-gradient(ellipse at 4% 72%, color-mix(in srgb, var(--mg-secondary) 7%, transparent), transparent 30rem);
  background-attachment: fixed;
}
body:not(.mg-home)[data-mg-theme="modern-studio"] :is(
  .card, .panel, .panel-card, .box, .guide-card, .plan-card, .faq-item,
  .w-card, .n-meal, .n-template-card, .auth-card, .login-card, article
) {
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(25, 40, 66, .075);
}
body:not(.mg-home)[data-mg-theme="modern-studio"] :is(.hero, .topbar, .header, .workout-header, .site-header) {
  border-bottom: 2px solid color-mix(in srgb, var(--mg-primary) 24%, var(--mg-border));
}
body[data-mg-theme="modern-studio"] :is(.primary, .btn-primary, button[type="submit"], .membership-duration[aria-pressed="true"]) {
  background-image: linear-gradient(125deg, #1d4ed8, #315fd0) !important;
  box-shadow: 0 7px 18px rgba(29, 78, 216, .18);
}
body[data-mg-theme="modern-studio"] :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mg-secondary) 78%, white) !important;
  outline-offset: 3px;
}

/* Keep selected controls and filled links legible after legacy page rules load. */
body[data-mg-theme] :is(
  .w-days button[aria-selected="true"],
  .workspace-tab[aria-selected="true"],
  .segbtn[aria-pressed="true"],
  .viewtabs button.on,
  .tabs button[aria-selected="true"]
) {
  color: var(--mg-on-selected) !important;
  border-color: var(--mg-selected-border) !important;
  background: var(--mg-selected-bg) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mg-selected-border) 24%, transparent) !important;
}

body[data-workspace][data-mg-theme="modern-studio"] .cta {
  color: #fff !important;
  background: linear-gradient(115deg, #c2410c, #1d4ed8) !important;
  border: 1px solid #fff8;
  box-shadow: 0 8px 22px rgba(29, 78, 216, .2);
}
body[data-mg-theme="modern-studio"] :is(.nav-cta:hover, .plan-cta:hover, .featured .plan-cta) {
  color: #fff !important;
}
body[data-mg-theme="modern-studio"] .journal-hero-links a:first-child {
  color: #fff !important;
}
body[data-mg-theme="modern-studio"] :is(.archive__item:hover, .pager-card:hover),
body[data-mg-theme="modern-studio"] :is(.archive__item:hover, .pager-card:hover) :is(p, small, span, b) {
  color: #fff !important;
}
body[data-mg-theme="modern-studio"] .editorial #editorial-filters button[aria-pressed="true"] {
  color: var(--mg-on-primary) !important;
}
body[data-mg-theme="modern-studio"] :is(.ctrl.main, .exercise-item.active .ico, .gstep.on b) {
  color: #fff !important;
  border-color: var(--mg-primary) !important;
  background: linear-gradient(120deg, var(--mg-secondary), var(--mg-primary)) !important;
}
body[data-mg-theme="modern-studio"] .anatomy-hotspot:is(:hover, [aria-pressed="true"]) {
  color: #fff !important;
  border-color: var(--mg-primary) !important;
  background: color-mix(in srgb, var(--mg-primary) 78%, var(--mg-text)) !important;
}
body[data-mg-theme="modern-studio"] #steel stop:first-child {
  stop-color: var(--mg-secondary);
}
body[data-mg-theme="modern-studio"] #steel stop:last-child {
  stop-color: var(--mg-primary);
}

/* Market pages used a private dark palette, so give their whole component token-aware
   surfaces when the light Studio canvas is active instead of only recoloring the body. */
body[data-mg-theme="modern-studio"] .market {
  --accent: var(--mg-accent);
  color: var(--mg-text) !important;
}
body[data-mg-theme="modern-studio"] .market :is(.market-panel, .coach-card, .request-card, .offer-card) {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
  background: var(--mg-surface) !important;
  box-shadow: 0 10px 28px rgba(25, 40, 66, .075);
}
body[data-mg-theme="modern-studio"] .market :is(input, textarea, select) {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
  background: var(--mg-surface-soft) !important;
}
body[data-mg-theme="modern-studio"] .market .market-head h1 {
  color: var(--mg-text) !important;
}
body[data-mg-theme="modern-studio"] .market .muted {
  color: var(--mg-muted) !important;
}
body[data-mg-theme="modern-studio"] .market button.primary {
  color: var(--mg-on-primary) !important;
  border-color: var(--mg-primary) !important;
  background: var(--mg-primary) !important;
}

/* These journal overlays intentionally remain dark even when the reading canvas is light. */
body.journal-page[data-mg-theme^="modern-"] :is(.preloader, .gallery-modal, .story-modal, .journal-menu, .menu, .form) {
  color: #f7f8f2 !important;
}
body.journal-page[data-mg-theme^="modern-"] :is(
  .preloader, .gallery-modal, .story-modal, .journal-menu, .menu, .form, .gallery, .lightbox, .map--real figcaption
) {
  --white: #ffffff;
  --muted: #d1d5db;
  --acid: #fb923c;
  --lime: #fb923c;
  --line: rgba(255, 255, 255, .2);
}
body.journal-page[data-mg-theme^="modern-"] :is(.gallery, .lightbox, .map--real figcaption) {
  color: #f7f8f2 !important;
}
body.journal-page[data-mg-theme^="modern-"] .menu :is(a, p, span) {
  color: #f7f8f2 !important;
}
body.journal-page[data-mg-theme^="modern-"] :is(.gallery, .lightbox) a {
  color: #fff !important;
}
body[data-mg-theme="modern-studio"]:not([data-workspace]) .footer,
body[data-mg-theme="modern-studio"]:not([data-workspace]) .footer :is(b, a, p, small, span) {
  color: #fff !important;
}

/* Generated editorial news pages share this stylesheet but have their own card classes. */
body[data-mg-theme="modern-studio"] .news-card {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
  background: var(--mg-surface) !important;
}
body[data-mg-theme="modern-studio"] .news-card > a {
  color: var(--mg-text) !important;
}
body[data-mg-theme="modern-studio"] .news-card :is(h3, p, small, span) {
  color: var(--mg-text) !important;
}
body[data-mg-theme="modern-studio"] .news-card :is(small, span) {
  color: var(--mg-accent) !important;
}
body[data-mg-theme="modern-studio"] .feed-section {
  color: var(--mg-text) !important;
  border-color: var(--mg-border) !important;
}
body[data-mg-theme="modern-studio"] .feed-section > p,
body[data-mg-theme="modern-studio"] .news-card p {
  color: var(--mg-muted) !important;
}
body[data-mg-theme="modern-studio"] .image-fallback {
  color: #fff !important;
}
@media (max-width: 560px) {
  .mg-theme-picker { left: 10px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mg-theme-picker__trigger { min-width: 44px; min-height: 44px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-theme-picker *, body[data-mg-theme^="modern-"] * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}