/* MJ appearance system — independent color palettes plus a purpose-built light mode. */
:root {
  --mj-accent-rgb: 66, 214, 154;
  --mj-accent-strong-rgb: 36, 185, 125;
  --mj-primary: #42d69a;
  --mj-primary-strong: #24b97d;
  --mj-primary-hover: #62e4af;
  --mj-accent-cinematic-rgb: 66, 214, 154;
  --mj-accent-cinematic-strong-rgb: 36, 185, 125;
  --mj-primary-cinematic: #42d69a;
  --mj-primary-cinematic-hover: #62e4af;
  --mj-on-primary-cinematic: #04150e;
  --mj-primary-soft: rgba(var(--mj-accent-rgb), .115);
  --mj-on-primary: #04150e;
  --mj-focus-ring: 0 0 0 4px rgba(var(--mj-accent-rgb), .17);
  --mj-accent-gradient: linear-gradient(145deg, var(--mj-primary), var(--mj-primary-hover));
  --mj-accent-shadow: 0 13px 32px rgba(var(--mj-accent-strong-rgb), .22);
}

html[data-accent="ocean"] {
  --mj-accent-rgb: 105, 184, 255;
  --mj-accent-strong-rgb: 59, 149, 230;
  --mj-primary: #69b8ff;
  --mj-primary-strong: #3b95e6;
  --mj-primary-hover: #8bc9ff;
  --mj-on-primary: #041321;
  --mj-accent-cinematic-rgb: 105, 184, 255;
  --mj-accent-cinematic-strong-rgb: 59, 149, 230;
  --mj-primary-cinematic: #69b8ff;
  --mj-primary-cinematic-hover: #8bc9ff;
  --mj-on-primary-cinematic: #041321;
}

html[data-accent="violet"] {
  --mj-accent-rgb: 173, 148, 255;
  --mj-accent-strong-rgb: 130, 105, 234;
  --mj-primary: #ad94ff;
  --mj-primary-strong: #8269ea;
  --mj-primary-hover: #c3b3ff;
  --mj-on-primary: #150b2b;
  --mj-accent-cinematic-rgb: 173, 148, 255;
  --mj-accent-cinematic-strong-rgb: 130, 105, 234;
  --mj-primary-cinematic: #ad94ff;
  --mj-primary-cinematic-hover: #c3b3ff;
  --mj-on-primary-cinematic: #150b2b;
}

html[data-accent="coral"] {
  --mj-accent-rgb: 255, 151, 120;
  --mj-accent-strong-rgb: 236, 104, 75;
  --mj-primary: #ff9778;
  --mj-primary-strong: #ec684b;
  --mj-primary-hover: #ffb096;
  --mj-on-primary: #2a0d07;
  --mj-accent-cinematic-rgb: 255, 151, 120;
  --mj-accent-cinematic-strong-rgb: 236, 104, 75;
  --mj-primary-cinematic: #ff9778;
  --mj-primary-cinematic-hover: #ffb096;
  --mj-on-primary-cinematic: #2a0d07;
}

html[data-accent="gold"] {
  --mj-accent-rgb: 247, 198, 95;
  --mj-accent-strong-rgb: 217, 164, 53;
  --mj-primary: #f7c65f;
  --mj-primary-strong: #d9a435;
  --mj-primary-hover: #ffd986;
  --mj-on-primary: #251902;
  --mj-accent-cinematic-rgb: 247, 198, 95;
  --mj-accent-cinematic-strong-rgb: 217, 164, 53;
  --mj-primary-cinematic: #f7c65f;
  --mj-primary-cinematic-hover: #ffd986;
  --mj-on-primary-cinematic: #251902;
}

html[data-theme="light"] {
  --mj-bg: #f5f7fa;
  --mj-bg-soft: #edf1f5;
  --mj-surface: #ffffff;
  --mj-surface-2: #f2f5f8;
  --mj-surface-3: #e7ecf2;
  --mj-line: rgba(20, 32, 50, .105);
  --mj-line-strong: rgba(20, 32, 50, .19);
  --mj-text: #172033;
  --mj-muted: #667386;
  --mj-shadow: 0 24px 65px rgba(27, 39, 58, .11);
  --mj-shadow-soft: 0 12px 34px rgba(27, 39, 58, .075);
  --mj-theme-bg: var(--mj-bg);
  --mj-theme-surface: var(--mj-surface);
  --mj-theme-surface-raised: var(--mj-surface-2);
  --mj-theme-text: var(--mj-text);
  --mj-theme-muted: var(--mj-muted);
  --mj-theme-line: var(--mj-line);
  --mj-theme-header: rgba(255, 255, 255, .92);
  --mj-theme-shadow: var(--mj-shadow);
  --mj-surface-highlight: rgba(20, 32, 50, .045);
}

html[data-theme="light"][data-accent="emerald"] {
  --mj-accent-rgb: 13, 127, 89;
  --mj-accent-strong-rgb: 7, 105, 70;
  --mj-primary: #0d7f59;
  --mj-primary-strong: #076946;
  --mj-primary-hover: #0a704e;
  --mj-on-primary: #ffffff;
}

html[data-theme="light"][data-accent="ocean"] {
  --mj-accent-rgb: 29, 99, 199;
  --mj-accent-strong-rgb: 22, 79, 163;
  --mj-primary: #1d63c7;
  --mj-primary-strong: #164fa3;
  --mj-primary-hover: #1958b4;
  --mj-on-primary: #ffffff;
}

html[data-theme="light"][data-accent="violet"] {
  --mj-accent-rgb: 113, 80, 200;
  --mj-accent-strong-rgb: 91, 60, 168;
  --mj-primary: #7150c8;
  --mj-primary-strong: #5b3ca8;
  --mj-primary-hover: #6345b3;
  --mj-on-primary: #ffffff;
}

html[data-theme="light"][data-accent="coral"] {
  --mj-accent-rgb: 201, 79, 53;
  --mj-accent-strong-rgb: 168, 60, 39;
  --mj-primary: #c94f35;
  --mj-primary-strong: #a83c27;
  --mj-primary-hover: #b7442d;
  --mj-on-primary: #ffffff;
}

html[data-theme="light"][data-accent="gold"] {
  --mj-accent-rgb: 163, 101, 0;
  --mj-accent-strong-rgb: 127, 78, 0;
  --mj-primary: #a36500;
  --mj-primary-strong: #7f4e00;
  --mj-primary-hover: #8e5800;
  --mj-on-primary: #ffffff;
}

/* Component aliases keep legacy surfaces in sync with the selected palette. */
html[data-accent] .mj-learn-page { --ml-accent: var(--mj-primary); }
html[data-accent] .mj-account-page { --mja-accent: var(--mj-primary); }
html[data-accent] .mj-subscription-page { --mjs-accent: var(--mj-primary); --mjs-accent-strong: var(--mj-primary-strong); }
html[data-accent] .mj-watch-detail-page { --mjw-green: var(--mj-primary); --mjw-green-strong: var(--mj-primary-strong); }

/* Appearance popover */
.mj-theme-menu {
  width: 310px;
  max-height: min(590px, calc(100vh - var(--mj-header) - 28px));
  overflow-y: auto;
  padding: 10px;
  border-color: var(--mj-line);
  background: color-mix(in srgb, var(--mj-surface) 96%, transparent);
  color: var(--mj-text);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--mj-accent-rgb), .28) transparent;
}

.mj-theme-menu__label {
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 8px !important;
  color: var(--mj-muted) !important;
  font-size: 9px !important;
}
.mj-theme-menu__label::before { width: 5px; height: 5px; border-radius: 50%; background: var(--mj-primary); content: ""; box-shadow: 0 0 10px rgba(var(--mj-accent-rgb), .55); }
.mj-theme-menu__label--accent { margin-top: 9px; padding-top: 12px !important; border-top: 1px solid var(--mj-line); }
.mj-theme-menu__modes { display: grid; gap: 2px; }
.mj-theme-menu button.is-selected { border-color: rgba(var(--mj-accent-rgb), .28); background: var(--mj-primary-soft); }
.mj-accent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mj-accent-grid button { min-height: 48px; grid-template-columns: 25px 1fr 14px; gap: 7px; padding: 8px; border-color: var(--mj-line); background: var(--mj-surface-2); }
.mj-accent-grid button:last-child { grid-column: 1 / -1; }
.mj-accent-grid button b { font-size: 9px; }
.mj-accent-grid button i { grid-row: 1; grid-column: 3; }
.mj-accent-swatch { width: 22px; height: 22px; grid-row: 1; border: 3px solid rgba(255,255,255,.72); border-radius: 8px; box-shadow: 0 0 0 1px var(--mj-line), 0 5px 12px rgba(0,0,0,.14); }
[data-accent-value="emerald"] .mj-accent-swatch { background: linear-gradient(135deg,#42d69a,#118c61); }
[data-accent-value="ocean"] .mj-accent-swatch { background: linear-gradient(135deg,#69b8ff,#1d63c7); }
[data-accent-value="violet"] .mj-accent-swatch { background: linear-gradient(135deg,#ad94ff,#7150c8); }
[data-accent-value="coral"] .mj-accent-swatch { background: linear-gradient(135deg,#ff9778,#c94f35); }
[data-accent-value="gold"] .mj-accent-swatch { background: linear-gradient(135deg,#f7c65f,#a66a00); }

/* Palette-aware shared actions */
.mj-brand__mark { background: var(--mj-accent-gradient); color: var(--mj-on-primary); box-shadow: 0 10px 28px rgba(var(--mj-accent-strong-rgb), .22); }
.mj-button--primary,
.mjw-button--learn,
.ml-course-card__play { background: var(--mj-primary) !important; color: var(--mj-on-primary) !important; box-shadow: var(--mj-accent-shadow); }
.mj-button--primary:hover,
.mjw-button--learn:hover { background: var(--mj-primary-hover) !important; color: var(--mj-on-primary) !important; }
.mj-skip-link,
.ml-lesson-journey > button.is-active > i,
.ml-unseen-grid > div > button span { color: var(--mj-on-primary) !important; }
.mj-search:focus-within { border-color: rgba(var(--mj-accent-rgb), .48); box-shadow: var(--mj-focus-ring); }
body.mj-app ::selection { background: rgba(var(--mj-accent-rgb), .24); }

/* Light mode is an editorial daylight surface, while media heroes stay cinematic. */
html[data-theme="light"] body.mj-app {
  background:
    radial-gradient(circle at 87% 4%, rgba(var(--mj-accent-rgb), .055), transparent 28rem),
    radial-gradient(circle at 8% 38%, rgba(29, 99, 199, .025), transparent 34rem),
    var(--mj-bg);
  color: var(--mj-text);
}

html[data-theme="light"] .mj-header,
html[data-theme="light"] .mj-header.is-scrolled {
  border-bottom-color: rgba(20,32,50,.09);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 30px rgba(27,39,58,.055);
  backdrop-filter: blur(22px) saturate(145%);
}
html[data-theme="light"] .mj-primary-nav { background: #f5f7fa; border-color: rgba(20,32,50,.1); }
html[data-theme="light"] .mj-primary-nav a { color: #59677a; }
html[data-theme="light"] .mj-primary-nav a:hover { background: #e9eef4; color: #172033; }
html[data-theme="light"] .mj-primary-nav a.is-active { background: #fff; color: var(--mj-primary); box-shadow: 0 4px 14px rgba(27,39,58,.08), inset 0 0 0 1px var(--mj-line); }
html[data-theme="light"] .mj-search,
html[data-theme="light"] .mj-icon-button,
html[data-theme="light"] .mj-review-pulse { border-color: rgba(20,32,50,.11); background: #fff; box-shadow: 0 5px 16px rgba(27,39,58,.045); }
html[data-theme="light"] .mj-search:focus-within { background: #fff; }
html[data-theme="light"] .mj-search input { color: #172033; }
html[data-theme="light"] .mj-search kbd { background: #eef2f6; color: #687588; }
html[data-theme="light"] .mj-mobile-menu { border-color: var(--mj-line); background: rgba(255,255,255,.98); box-shadow: var(--mj-shadow); }

html[data-theme="light"] .mj-hero,
html[data-theme="light"] .mjw-hero {
  --mj-accent-rgb: var(--mj-accent-cinematic-rgb);
  --mj-accent-strong-rgb: var(--mj-accent-cinematic-strong-rgb);
  --mj-primary: var(--mj-primary-cinematic);
  --mj-primary-strong: var(--mj-primary-cinematic-hover);
  --mj-primary-hover: var(--mj-primary-cinematic-hover);
  --mj-primary-soft: rgba(var(--mj-accent-cinematic-rgb), .12);
  --mj-on-primary: var(--mj-on-primary-cinematic);
  --mjw-green: var(--mj-primary-cinematic);
  --mjw-green-strong: var(--mj-primary-cinematic-hover);
  color: #f6f8fb;
}
html[data-theme="light"] .mj-hero h1,
html[data-theme="light"] .mj-hero__lesson strong { color: #fff; }
html[data-theme="light"] .mj-hero__copy > p { color: #d2d8e0; }
html[data-theme="light"] .mj-hero__lesson { border-color: rgba(255,255,255,.12); background: linear-gradient(145deg,rgba(17,24,34,.9),rgba(8,13,20,.84)); box-shadow: 0 24px 64px rgba(0,0,0,.3); }
html[data-theme="light"] .mj-hero__lesson li { color: #bcc6d1; }
html[data-theme="light"] .mj-hero__meta span { border-color: rgba(255,255,255,.15); background: rgba(5,9,14,.58); color: #e2e7ed; }
html[data-theme="light"] .mj-hero .mj-button--glass { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; }

html[data-theme="light"] .mj-home-command { border-color: #dfe5ec; background: #dfe5ec; box-shadow: 0 20px 55px rgba(27,39,58,.11); }
html[data-theme="light"] .mj-home-command > *,
html[data-theme="light"] .mj-value-strip { background: rgba(255,255,255,.985); }
html[data-theme="light"] .mj-home-command__next { background: radial-gradient(circle at 100% 0,rgba(var(--mj-accent-rgb),.095),transparent 52%),#fff; }
html[data-theme="light"] .mj-command-ring { background: conic-gradient(var(--mj-primary) calc(var(--progress)*1%),#e4e9ef 0); }
html[data-theme="light"] .mj-command-ring::before { background: #fff; }
html[data-theme="light"] .mj-content-card__media,
html[data-theme="light"] .ml-course-card > a,
html[data-theme="light"] .ml-snapshot article { border-color: rgba(20,32,50,.09); box-shadow: 0 10px 30px rgba(27,39,58,.065); }
html[data-theme="light"] .mj-path,
html[data-theme="light"] .ml-dashboard-v2,
html[data-theme="light"] .ml-method-v2,
html[data-theme="light"] .ml-course-cycle { background: radial-gradient(circle at 8% 0,rgba(var(--mj-accent-rgb),.09),transparent 29rem),linear-gradient(135deg,#fff,#eef2f6 74%); border-color: rgba(20,32,50,.09); box-shadow: var(--mj-shadow-soft); }
html[data-theme="light"] .mj-catalog-hero { background: radial-gradient(circle at 15% 25%,rgba(var(--mj-accent-rgb),.09),transparent 32%),linear-gradient(125deg,#fff,#edf1f5); border-color: rgba(20,32,50,.09); }
html[data-theme="light"] .mj-catalog-toolbar,
html[data-theme="light"] .ml-subnav { border-color: rgba(20,32,50,.1); background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(27,39,58,.07); }
html[data-theme="light"] .ml-today-plan > div,
html[data-theme="light"] .ml-week-card,
html[data-theme="light"] .ml-method-v2 article { border-color: rgba(20,32,50,.08); background: rgba(255,255,255,.76); }

html[data-theme="light"] .mj-watch-detail-page { background: var(--mj-bg); color: var(--mj-text); }
html[data-theme="light"] .mjw-page { background: radial-gradient(circle at 80% 26%,rgba(var(--mj-accent-rgb),.045),transparent 32rem); }
html[data-theme="light"] .mjw-hero,
html[data-theme="light"] .mjw-summary h1 { color: #f6f8fb; }
html[data-theme="light"] .mjw-player-card,
html[data-theme="light"] .mjw-source-panel,
html[data-theme="light"] .mjw-now-playing { border-color: rgba(20,32,50,.1); background: #fff; box-shadow: 0 18px 48px rgba(27,39,58,.09); }
html[data-theme="light"] .mjw-learn-strip { border-color: rgba(var(--mj-accent-rgb),.18); background: radial-gradient(circle at 5% 15%,rgba(var(--mj-accent-rgb),.085),transparent 25%),linear-gradient(135deg,#fff,#eef2f6); }
html[data-theme="light"] .mjw-source-button { color: #172033; }

@media (max-width: 760px) {
  .mj-theme-menu { width: auto; max-height: calc(100dvh - var(--mj-header) - 20px); }
  .mj-accent-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mj-accent-swatch { transition: none; }
}