:root,
:root[data-color-theme="green"] {
  color-scheme: light;
  --theme-primary: #16483d;
  --theme-dark: #10372f;
  --theme-secondary: #286354;
  --theme-page: #f6f4ec;
  --theme-soft: #e8efe9;
  --theme-ink: #18312b;
  --theme-muted: #65776e;
  --theme-line: #d8e2da;
  --theme-accent: #d6a550;
  --theme-companion: #9cad72;
  --theme-glow-hero: 42%; --theme-glow-panel: 36%; --theme-glow-dashboard: 44%; --theme-glow-soft: 22%; --theme-glow-portal: 34%; --theme-glow-footer: 30%;
  --theme-shadow: 0 16px 42px rgba(20, 55, 43, .10);
}
:root[data-color-theme="blue"] {
  --theme-primary: #174d73; --theme-dark: #103854; --theme-secondary: #216889;
  --theme-page: #f2f6f9; --theme-soft: #e4edf4; --theme-ink: #183547;
  --theme-muted: #5f7481; --theme-line: #d5e0e8; --theme-accent: #d2a354;
  --theme-companion: #8ab8a0;
  --theme-glow-hero: 42%; --theme-glow-panel: 36%; --theme-glow-dashboard: 44%; --theme-glow-soft: 22%; --theme-glow-portal: 34%; --theme-glow-footer: 30%;
  --theme-shadow: 0 16px 42px rgba(20, 56, 78, .10);
}
:root[data-color-theme="maroon"] {
  --theme-primary: #703647; --theme-dark: #542635; --theme-secondary: #915264;
  --theme-page: #f8f2f3; --theme-soft: #f0e5e8; --theme-ink: #3d2930;
  --theme-muted: #796872; --theme-line: #e6d9de; --theme-accent: #d5ad72;
  --theme-companion: #8caf9b;
  --theme-glow-hero: 42%; --theme-glow-panel: 36%; --theme-glow-dashboard: 44%; --theme-glow-soft: 22%; --theme-glow-portal: 34%; --theme-glow-footer: 30%;
  --theme-shadow: 0 16px 42px rgba(76, 35, 51, .10);
}
:root[data-color-theme="purple"] {
  --theme-primary: #574277; --theme-dark: #403158; --theme-secondary: #735c94;
  --theme-page: #f5f2f8; --theme-soft: #e9e2f1; --theme-ink: #322a3f;
  --theme-muted: #71697c; --theme-line: #ddd5e7; --theme-accent: #d2b06c;
  --theme-companion: #8db5c3;
  --theme-glow-hero: 42%; --theme-glow-panel: 36%; --theme-glow-dashboard: 44%; --theme-glow-soft: 22%; --theme-glow-portal: 34%; --theme-glow-footer: 30%;
  --theme-shadow: 0 16px 42px rgba(54, 42, 77, .10);
}
:root[data-color-theme="brown"] {
  --theme-primary: #6b4a31; --theme-dark: #4b3525; --theme-secondary: #8c6948;
  --theme-page: #f7f3ee; --theme-soft: #eee5da; --theme-ink: #382d24;
  --theme-muted: #75695c; --theme-line: #e3d9cc; --theme-accent: #d5ad6b;
  --theme-companion: #8fbaae;
  --theme-glow-hero: 42%; --theme-glow-panel: 36%; --theme-glow-dashboard: 44%; --theme-glow-soft: 22%; --theme-glow-portal: 34%; --theme-glow-footer: 30%;
  --theme-shadow: 0 16px 42px rgba(69, 48, 31, .10);
}
:root[data-color-theme="pink"] {
  --theme-primary: #a43e72; --theme-dark: #7d2e56; --theme-secondary: #c05c8c;
  --theme-page: #fbf3f7; --theme-soft: #f4e3ec; --theme-ink: #3e2d37;
  --theme-muted: #796876; --theme-line: #ead7e1; --theme-accent: #d5aa68;
  --theme-companion: #9aba9e;
  --theme-glow-hero: 42%; --theme-glow-panel: 36%; --theme-glow-dashboard: 44%; --theme-glow-soft: 22%; --theme-glow-portal: 34%; --theme-glow-footer: 30%;
  --theme-shadow: 0 16px 42px rgba(105, 43, 76, .10);
}
:root[data-color-theme="natural"] {
  --theme-primary: #1a5145; --theme-dark: #123b32; --theme-secondary: #397665;
  --theme-page: #f7f5ed; --theme-soft: #e8efe7; --theme-ink: #213a31;
  --theme-muted: #65766d; --theme-line: #d9e2d6; --theme-accent: #cda65f;
  --theme-companion: #8fc3b1;
  --theme-glow-hero: 24%; --theme-glow-panel: 22%; --theme-glow-dashboard: 28%; --theme-glow-soft: 13%; --theme-glow-portal: 21%; --theme-glow-footer: 18%;
  --theme-shadow: 0 16px 42px rgba(28, 57, 45, .10);
}

:root {
  --green: var(--theme-primary); --green2: var(--theme-secondary);
  --cream: var(--theme-page); --white: #fff; --ink: var(--theme-ink);
  --muted: var(--theme-muted); --gold: var(--theme-accent); --line: var(--theme-line);
  --paper: var(--theme-page); --soft: var(--theme-muted); --teal: var(--theme-primary);
  --shadow: var(--theme-shadow);
}
html, body { background-color: var(--theme-page); color: var(--theme-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--theme-accent); }
.top, .site-footer, footer { background-color: var(--theme-dark); }
.nav-shell, .site-header { border-color: var(--theme-line); background-color: var(--theme-page); }
.hero, .story-feature, .home-footer, .opening-vision-shell, .home-hub, .home-network-hub, .home-vision-redesign { background-color: var(--theme-primary); }
.hero { background-image: radial-gradient(ellipse at 91% 7%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-hero), transparent), transparent 40%), linear-gradient(125deg, var(--theme-dark), var(--theme-primary) 60%, var(--theme-secondary)); }
.opening-vision-shell, .home-vision-redesign { background-image: radial-gradient(ellipse at 93% 8%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-panel), transparent), transparent 42%), linear-gradient(115deg, var(--theme-dark), var(--theme-primary) 55%, var(--theme-secondary)); }
.home-reboot { background-color: var(--theme-page); color: var(--theme-ink); }
.home-stories, .home-discover { background-color: var(--theme-page); }
.home-social-gallery, .home-daily-redesign, .units, .journey { background-color: var(--theme-soft); }
.intro-card, .unit, .app-card, .daily-feature-card, .discover-tile, .home-gallery-card { border-color: var(--theme-line); }
.values, .creative, .ideas, .home-contributor-invite, .home-contributor-note { background-color: var(--theme-soft); }
.links a:hover, .text-link, .contest-link, .home-quiet-link, .home-story-category, .home-overline, .home-story-meta a { color: var(--theme-secondary); }
.button:not(.ghost):not(.outline):not(.gold), .primary { border-color: var(--theme-primary); background-color: var(--theme-primary); color: #fff; }
.button.ghost { border-color: var(--theme-primary); background-color: transparent; color: var(--theme-primary); }
.button.outline { border-color: var(--theme-primary); color: var(--theme-primary); }
.callout .button:not(.ghost):not(.outline), .admin-center-bottom .button { border-color: var(--theme-accent); background-color: var(--theme-accent); color: var(--theme-dark); }
.links .nav-cta, .editorial-box, .opening-action-primary:hover { border-color: var(--theme-primary); background-color: var(--theme-primary); }
.button.gold, .editorial-action a { background-color: var(--theme-accent); }
.home-mission-number, .home-mission-count b { color: var(--theme-accent); }
.home-contributor-invite { border-color: var(--theme-line); }
.opening-action, .home-mission-card, .home-mission-pickers button, .home-mission-arrow { border-color: color-mix(in srgb, var(--theme-accent) 42%, transparent); }
.home-mission-pickers button[aria-pressed="true"] { background-color: var(--theme-accent); color: var(--theme-dark); }
.home-story-controls > button, .home-story-dots button[aria-current="true"] { color: var(--theme-primary); }
.home-story-dots button[aria-current="true"] { background-color: var(--theme-primary); }
.opening-action-primary { background-color: color-mix(in srgb, var(--theme-accent) 18%, transparent); border-color: color-mix(in srgb, var(--theme-accent) 55%, transparent); }
.creative, .ideas, .app-hub { background-color: var(--theme-soft); }
.creative-card.teacher, .route.teacher, .journey, .values { background-color: var(--theme-soft); }
.story-side .story-card, .idea-card, .route, .step, .intro-card { border-color: var(--theme-line); }
.section .kicker, .eyebrow, .section-head .kicker { color: var(--theme-secondary); }
.hero .eyebrow, .story-feature .story-label, .editorial-box .kicker { color: var(--theme-accent); }
.portal-site-nav .portal-nav-link[aria-current="page"], .portal-nav-group summary[aria-current="page"] { background-color: var(--theme-soft); color: var(--theme-primary); }
.portal-header-site-door, .menu-toggle, .portal-nav-group summary { border-color: var(--theme-line); }
.portal-nav-link:hover, .portal-nav-group summary:hover, .site-footer a:hover { color: var(--theme-secondary); }
.filters a[aria-current="page"], .filters a:hover { border-color: var(--theme-primary); color: var(--theme-primary); }
.card, .form-card, .article-card, .article-index-card { border-color: var(--theme-line); }
.badge, .edit-state, .media-workspace { background-color: var(--theme-soft); }
.theme-submenu { position: relative; flex: none; }
.theme-submenu > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; color: var(--theme-ink); font-size: .84rem; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.theme-submenu > summary::-webkit-details-marker { display: none; }
.theme-submenu > summary::after { content: "⌄"; margin-left: 7px; color: var(--theme-muted); }
.theme-submenu[open] > summary, .theme-submenu > summary:hover { background: var(--theme-soft); color: var(--theme-primary); }
.theme-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 220px; margin: 0; padding: 13px 14px; border: 1px solid var(--theme-line); border-radius: 12px; background: #fff; color: var(--theme-muted); font-size: .8rem; font-weight: 750; }
.theme-submenu > .theme-picker { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; box-shadow: var(--theme-shadow); }
.theme-submenu > .site-tools-panel { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 260px; max-width: calc(100vw - 24px); padding: 12px; border: 1px solid var(--theme-line); border-radius: 15px; background: var(--theme-page); box-shadow: var(--theme-shadow); }
.site-tools-panel .site-account-panel { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.site-tools-panel .theme-picker { min-width: 0; margin-top: 12px; background: var(--theme-page); }
.site-account-submenu { position: relative; flex: none; }
.site-account-submenu > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; color: var(--theme-ink); font-size: .84rem; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.site-account-submenu > summary::-webkit-details-marker { display: none; }
.site-account-submenu > summary::after { content: "⌄"; margin-left: 7px; color: var(--theme-muted); }
.site-account-submenu[open] > summary, .site-account-submenu > summary:hover { background: var(--theme-soft); color: var(--theme-primary); }
.site-account-panel { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: grid; min-width: 170px; gap: 7px; padding: 9px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-page); box-shadow: var(--theme-shadow); }
.site-account-panel a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 12px; border: 1px solid var(--theme-line); border-radius: 10px; color: var(--theme-primary); font-size: .84rem; font-weight: 750; text-decoration: none; }
.site-account-panel .site-account-login { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.site-account-panel .site-account-register { background: var(--theme-soft); }
.site-account-panel a:hover { border-color: var(--theme-secondary); }
.theme-picker select { width: auto; min-width: 112px; max-width: 142px; margin: 0; padding: 7px 27px 7px 10px; border: 1px solid var(--theme-line); border-radius: 999px; background-color: #fff; color: var(--theme-ink); font: inherit; line-height: 1.25; }
.portal-home-hero { color: #f8f5eb; }
.portal-home-hero h1 { color: #fbf8ef; }
.portal-home-hero > div > p:not(.eyebrow) { color: #e4eceb; }
.portal-home-hero .eyebrow { color: var(--theme-accent); }
.portal-home-callout { border-color: color-mix(in srgb, var(--theme-companion) 38%, transparent); background: radial-gradient(ellipse at 95% 0%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-hero), transparent), transparent 37%), linear-gradient(120deg, var(--theme-dark), var(--theme-primary) 62%, var(--theme-secondary)); }
.portal-home-callout .eyebrow { color: var(--theme-accent); }
.portal-home-hero .button:not(.ghost), .portal-home-callout .button:not(.ghost) { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-dark); }
.portal-home-hero .button:not(.ghost):hover, .portal-home-callout .button:not(.ghost):hover { border-color: color-mix(in srgb, var(--theme-accent) 82%, white); background: color-mix(in srgb, var(--theme-accent) 82%, white); color: var(--theme-dark); }
.nav-shell .nav .portal-entry-door { border-color: var(--theme-line); background: var(--theme-soft); color: var(--theme-primary); }
.nav-shell .nav .portal-entry-door:hover { border-color: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 9%, var(--theme-soft)); color: var(--theme-primary); }
.nav-shell .links .portal-door-link { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.nav-shell .links .portal-door-link:hover { border-color: var(--theme-secondary); background: var(--theme-secondary); color: #fff; }
.nav-shell .menu-button { border-color: var(--theme-line); background: var(--theme-soft); color: var(--theme-primary); }
.nav-shell .menu-button[aria-expanded="true"] { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.nav-shell .links a:hover { color: var(--theme-primary); }
.nav-shell .links .nav-cta { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.nav-shell .links .nav-cta:hover { border-color: var(--theme-secondary); background: var(--theme-secondary); color: #fff; }
@media (max-width: 1050px) {
  .nav-shell .links.open { border-color: var(--theme-line); background: var(--theme-page); }
  .nav-shell .links a { border-color: var(--theme-line); background: var(--theme-soft); color: var(--theme-ink); }
  .nav-shell .nav .links a[aria-current="page"] { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-page)); color: var(--theme-primary); }
}
:root[data-color-theme] .home-discover { background: var(--theme-page); }
:root[data-color-theme] .home-discover .home-section-heading h2 { color: var(--theme-ink); }
:root[data-color-theme] .home-discover .home-section-heading > p { color: var(--theme-muted); }
:root[data-color-theme] .discover-tile,
:root[data-color-theme] .discover-school,
:root[data-color-theme] .discover-service,
:root[data-color-theme] .discover-contest,
:root[data-color-theme] .discover-network { border-color: var(--theme-line); background: var(--theme-soft); }
:root[data-color-theme] .discover-tile strong { color: var(--theme-ink); }
:root[data-color-theme] .discover-index { color: var(--theme-secondary); }
:root[data-color-theme] .discover-foot { border-color: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-line)); color: var(--theme-primary); }
:root[data-color-theme] .discover-tile::after { border-color: color-mix(in srgb, var(--theme-primary) 10%, transparent); box-shadow: 0 0 0 20px color-mix(in srgb, var(--theme-primary) 2%, transparent), 0 0 0 40px color-mix(in srgb, var(--theme-primary) 1%, transparent); }
/* Keep the homepage story carousel in the selected palette, including its photo overlay. */
:root[data-color-theme] .home-feature-story,
:root[data-color-theme] .home-story-row { border-color: color-mix(in srgb, var(--theme-accent) 18%, transparent); background-color: var(--theme-dark); }
:root[data-color-theme] .home-feature-story::after,
:root[data-color-theme] .home-story-row::after {
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 38%, color-mix(in srgb, var(--theme-primary) 8%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--theme-dark) 12%, transparent) 60%, color-mix(in srgb, var(--theme-dark) 94%, transparent) 100%);
}
:root[data-color-theme] .home-feature-story.image-unavailable,
:root[data-color-theme] .home-story-row.image-unavailable { border-color: var(--theme-line); background: radial-gradient(ellipse at 88% 10%, color-mix(in srgb, var(--theme-primary) 8%, transparent), transparent 44%), var(--theme-soft); color: var(--theme-ink); }
:root[data-color-theme] .home-feature-story.image-unavailable .home-feature-copy h3,
:root[data-color-theme] .home-story-row.image-unavailable h3,
:root[data-color-theme] .home-feature-story.image-unavailable .home-feature-copy h3 a,
:root[data-color-theme] .home-story-row.image-unavailable h3 a { color: var(--theme-ink); }
:root[data-color-theme] .home-feature-story.image-unavailable .home-feature-copy > p,
:root[data-color-theme] .home-story-row.image-unavailable p { color: var(--theme-muted); }
:root[data-color-theme] .home-feature-story.image-unavailable .home-story-category,
:root[data-color-theme] .home-story-row.image-unavailable .home-story-category { color: var(--theme-secondary); }
:root[data-color-theme] .home-feature-story.image-unavailable .home-story-meta { border-color: var(--theme-line); color: var(--theme-muted); }
:root[data-color-theme] .home-story-row.image-unavailable .home-slide-read { color: var(--theme-primary) !important; }
:root[data-color-theme] .home-feature-copy h3 a:hover,
:root[data-color-theme] .home-story-row h3 a:hover { color: var(--theme-accent); }
:root[data-color-theme] .home-story-meta a { color: #fff !important; }
:root[data-color-theme] .article-index { --ink: var(--theme-ink); --teal: var(--theme-primary); --soft: var(--theme-muted); color: var(--theme-ink); }
:root[data-color-theme] .article-index-visual { background: radial-gradient(ellipse at 82% 16%, color-mix(in srgb, var(--theme-primary) 12%, transparent), transparent 42%), linear-gradient(140deg, color-mix(in srgb, var(--theme-primary) 10%, var(--theme-page)), color-mix(in srgb, var(--theme-secondary) 16%, var(--theme-soft))); }
:root[data-color-theme] .article-index-image-fallback { color: var(--theme-primary); }
:root[data-color-theme] .article-index-image-note { background: color-mix(in srgb, var(--theme-dark) 88%, transparent); color: #fff; }
:root[data-color-theme] .writing-purpose-icon { border: 1px solid var(--theme-line); background: var(--theme-soft); color: var(--theme-primary); }
:root[data-color-theme] .writing-purpose-contests { border-color: var(--theme-line); background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 7%, var(--theme-page)), color-mix(in srgb, var(--theme-accent) 6%, var(--theme-soft))); }
:root[data-color-theme] .writing-purpose-contest-list a { border-color: var(--theme-line); background: color-mix(in srgb, white 88%, var(--theme-page)); }
:root[data-color-theme] .writing-purpose-contest-list a:hover { border-color: color-mix(in srgb, var(--theme-primary) 32%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 7%, white); }
:root[data-color-theme] .writing-purpose-note { border-color: var(--theme-line); background: var(--theme-soft); color: var(--theme-ink); }
:root[data-color-theme] .article-index-intro .eyebrow,
:root[data-color-theme] .article-index-section-head .eyebrow,
:root[data-color-theme] .article-index-widget .eyebrow { color: var(--theme-secondary); }
:root[data-color-theme] .article-index-filters a { border-color: var(--theme-line); color: var(--theme-muted); }
:root[data-color-theme] .article-index-filters a:hover,
:root[data-color-theme] .article-index-filters a[aria-current] { border-color: var(--theme-primary); background: var(--theme-soft); color: var(--theme-primary); }
:root[data-color-theme] .article-index-filter-group { border-color: var(--theme-line); background: color-mix(in srgb, white 55%, var(--theme-page)); }
:root[data-color-theme] .article-index-filter-label { color: var(--theme-secondary); }
:root[data-color-theme] .article-index-filter-help,
:root[data-color-theme] .article-index-filter-note { color: var(--theme-muted); }
:root[data-color-theme] .article-index-pagination { border-color: var(--theme-line); background: var(--theme-soft); color: var(--theme-muted); }
:root[data-color-theme] .article-index-pagination a,
:root[data-color-theme] .article-index-meta a,
:root[data-color-theme] .article-index-read { color: var(--theme-primary); }
:root[data-color-theme] .article-index-pagination strong,
:root[data-color-theme] .article-index-post h3 a { color: var(--theme-ink); }
:root[data-color-theme] .article-index-post h3 a:hover,
:root[data-color-theme] .article-index-post h3 a:focus-visible,
:root[data-color-theme] .article-index-meta a:hover,
:root[data-color-theme] .article-index-meta a:focus-visible,
:root[data-color-theme] .article-index-read:hover,
:root[data-color-theme] .article-index-read:focus-visible { color: var(--theme-secondary); }
:root[data-color-theme] .article-index-meta,
:root[data-color-theme] .article-index-engagement { color: var(--theme-muted); }
:root[data-color-theme] .article-index-post,
:root[data-color-theme] .article-index-widget,
:root[data-color-theme] .article-index-empty { border-color: var(--theme-line); }
.dashboard-home { border-color: var(--theme-line); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--theme-companion) var(--theme-glow-dashboard), transparent), transparent 36%), linear-gradient(135deg, var(--theme-page), color-mix(in srgb, var(--theme-primary) 7%, var(--theme-page)) 72%, var(--theme-page)); }
.dashboard-home .eyebrow { color: var(--theme-primary); }
.dashboard-home .dashboard-xp { border-color: var(--theme-line); color: var(--theme-primary); }
.dashboard-menu .dashboard-menu-link { border-color: var(--theme-line); color: var(--theme-ink); }
.dashboard-menu-icon { background: var(--theme-soft); color: var(--theme-primary); }
.dashboard-menu-arrow { color: var(--theme-primary); }
.dashboard-menu .dashboard-menu-editorial { border-color: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-page)); }
:root[data-color-theme] .contributor-self-rank {
  border-color: var(--theme-line);
  border-left-color: var(--theme-accent);
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--theme-companion) 22%, transparent), transparent 42%),
    linear-gradient(115deg, color-mix(in srgb, var(--theme-soft) 78%, var(--theme-accent) 22%), var(--theme-page) 58%, color-mix(in srgb, var(--theme-soft) 72%, var(--theme-companion) 28%));
}
:root[data-color-theme] .contributor-self-number {
  background: linear-gradient(145deg, var(--theme-dark), var(--theme-primary) 58%, var(--theme-secondary));
  color: #fff;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 5px 13px color-mix(in srgb, var(--theme-dark) 20%, transparent);
}
:root[data-color-theme] .contributor-self-progress .xp-progress {
  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-companion) 28%, var(--theme-page)), color-mix(in srgb, var(--theme-accent) 24%, var(--theme-page)));
}
:root[data-color-theme] .contributor-self-progress .xp-progress > span {
  background: linear-gradient(90deg, var(--theme-dark), var(--theme-primary) 42%, var(--theme-secondary) 72%, var(--theme-accent));
  background-size: 220% 100%;
  animation: xp-gradient-flow 4.5s ease-in-out infinite alternate;
}
:root[data-color-theme] .contributor-self-action { color: var(--theme-primary); }
@keyframes xp-gradient-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-color-theme] .contributor-self-progress .xp-progress > span { animation: none; }
}
:root[data-color-theme] .personal-contribution-summary { border-color: var(--theme-line); background: var(--theme-soft); }
:root[data-color-theme] .portal-community-stat { border-color: var(--theme-line); background: color-mix(in srgb, white 84%, var(--theme-page)); }
:root[data-color-theme] .portal-community-stat > strong { color: var(--theme-primary); }
:root[data-color-theme] .portal-site-nav .portal-nav-link:hover,
:root[data-color-theme] .portal-site-nav .portal-nav-group > summary:hover { background: var(--theme-soft); color: var(--theme-primary); }
:root[data-color-theme] .portal-site-nav .portal-nav-link[aria-current="page"],
:root[data-color-theme] .portal-site-nav .portal-nav-group > summary[aria-current="page"] { background: var(--theme-soft); color: var(--theme-primary); }
:root[data-color-theme] .portal-site-nav .portal-nav-panel a:hover,
:root[data-color-theme] .portal-site-nav .portal-nav-panel a[aria-current="page"] { background: var(--theme-soft); color: var(--theme-primary); }
:root[data-color-theme] .portal-site-nav .portal-site-door,
:root[data-color-theme] .portal-header-site-door { border-color: var(--theme-line); background: var(--theme-soft); color: var(--theme-primary) !important; }
:root[data-color-theme] .portal-site-nav .portal-site-door:hover,
:root[data-color-theme] .portal-header-site-door:hover { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-page)); }
:root[data-color-theme] .portal-js .nav #portal-nav .portal-nav-group[open] { border: 1px solid var(--theme-line); background: var(--theme-soft); }
:root[data-color-theme] .portal-js .nav #portal-nav .portal-nav-group[open] > summary { background: color-mix(in srgb, var(--theme-primary) 9%, var(--theme-page)); color: var(--theme-primary); }
@media (max-width: 1050px) { .links .theme-submenu, .links .site-account-submenu { width: 100%; } .links .theme-submenu > summary, .links .site-account-submenu > summary { width: 100%; justify-content: space-between; padding: 12px 3px; border-radius: 0; border-top: 1px solid var(--theme-line); } .links .theme-submenu > .theme-picker { position: static; min-width: 0; margin: 0 0 8px; } .links .site-account-panel { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; margin: 0 0 8px; padding: 4px 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } }
@media (max-width: 1050px) { .links .theme-submenu > .site-tools-panel { position: static; width: 100%; max-width: none; margin: 0 0 8px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .links .site-tools-panel .theme-picker { margin: 8px 0 0; } .links .site-tools-panel .site-account-panel { margin: 0; padding: 0; } }
@media (max-width: 960px) { .portal-site-nav .theme-submenu { width: 100%; border-radius: 11px; } .portal-site-nav .theme-submenu[open] { background: var(--theme-soft); } .portal-site-nav .theme-submenu > summary { width: 100%; justify-content: space-between; border-radius: 10px; } .portal-site-nav .theme-submenu > .theme-picker { position: static; min-width: 0; margin: 3px 8px 9px; } }
@media (max-width: 420px) { .theme-picker { gap: 8px; padding: 11px; } .theme-picker select { min-width: 105px; } }

/* Extend the selected palette through the standalone public pages. */
:root[data-color-theme] .subhero,
:root[data-color-theme] .service-intro,
:root[data-color-theme] .lomba-hero,
:root[data-color-theme] .network-hub {
  color: #fff;
  background: radial-gradient(ellipse at 86% 8%, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 33%), linear-gradient(118deg, var(--theme-dark), var(--theme-primary) 62%, var(--theme-secondary));
}
:root[data-color-theme] .subhero .kicker,
:root[data-color-theme] .service-intro .kicker,
:root[data-color-theme] .lomba-hero .kicker,
:root[data-color-theme] .network-hub .kicker { color: var(--theme-accent); }
:root[data-color-theme] .subhero h1,
:root[data-color-theme] .service-intro h1,
:root[data-color-theme] .lomba-hero h1,
:root[data-color-theme] .network-hub h2 { color: #fff; }
:root[data-color-theme] .subhero p,
:root[data-color-theme] .service-intro p,
:root[data-color-theme] .lomba-hero p,
:root[data-color-theme] .network-hub p { color: color-mix(in srgb, white 86%, var(--theme-primary)); }
:root[data-color-theme] .subhero .gallery-jump,
:root[data-color-theme] .service-jump a,
:root[data-color-theme] .network-jump a { border-color: color-mix(in srgb, white 30%, var(--theme-primary)); background: color-mix(in srgb, white 7%, transparent); color: #fff; }
:root[data-color-theme] .subhero .gallery-jump:hover,
:root[data-color-theme] .service-jump a:hover,
:root[data-color-theme] .network-jump a:hover { background: color-mix(in srgb, white 15%, transparent); }
:root[data-color-theme] .school-page .school-hero { background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--theme-primary) 12%, transparent), transparent 29%), linear-gradient(120deg, var(--theme-page), color-mix(in srgb, var(--theme-primary) 7%, var(--theme-page)) 58%, var(--theme-soft)); }
:root[data-color-theme] .school-page .school-hero::before { border-color: color-mix(in srgb, var(--theme-primary) 12%, transparent); box-shadow: 0 0 0 85px color-mix(in srgb, var(--theme-primary) 3%, transparent), 0 0 0 170px color-mix(in srgb, var(--theme-primary) 2%, transparent); }
:root[data-color-theme] .school-page .school-hero .kicker { color: var(--theme-secondary); }
:root[data-color-theme] .school-page .school-hero h1,
:root[data-color-theme] .school-page .school-hero h1 em { color: var(--theme-ink); }
:root[data-color-theme] .school-page .school-hero h1 em { text-decoration-color: var(--theme-accent); }
:root[data-color-theme] .school-page .school-hero p { color: var(--theme-muted); }
:root[data-color-theme] .school-page .school-hero-link,
:root[data-color-theme] .network-home-actions .button,
:root[data-color-theme] .join-actions .button { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
:root[data-color-theme] .school-page .school-hero-link:hover { background: var(--theme-secondary); }
:root[data-color-theme] .school-page .school-journey { border: 1px solid color-mix(in srgb, var(--theme-accent) 24%, transparent); background: radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 38%), linear-gradient(145deg, var(--theme-dark), var(--theme-primary) 70%, var(--theme-secondary)); box-shadow: var(--theme-shadow); }
:root[data-color-theme] .school-page .school-journey::before { border-color: color-mix(in srgb, white 18%, transparent); box-shadow: 0 0 0 54px color-mix(in srgb, white 4%, transparent), 0 0 0 107px color-mix(in srgb, white 2%, transparent); }
:root[data-color-theme] .school-page .school-journey-label,
:root[data-color-theme] .school-page .school-journey-branch { color: color-mix(in srgb, white 88%, var(--theme-primary)); }
:root[data-color-theme] .school-page .school-journey-label { color: var(--theme-accent); }
:root[data-color-theme] .school-page .school-level { color: var(--theme-secondary); }
:root[data-color-theme] .school-page .school-journey-stages span,
:root[data-color-theme] .school-page .school-journey-stages span:nth-child(2),
:root[data-color-theme] .school-page .school-journey-stages span:nth-child(3),
:root[data-color-theme] .school-page .school-journey-stages span:nth-child(4) { border: 1px solid color-mix(in srgb, var(--theme-primary) 18%, var(--theme-line)); background: color-mix(in srgb, var(--theme-primary) 11%, var(--theme-soft)); color: var(--theme-ink); box-shadow: none; }
:root[data-color-theme] .school-page .school-journey-stages span:nth-child(2) { background: color-mix(in srgb, var(--theme-primary) 16%, var(--theme-soft)); }
:root[data-color-theme] .school-page .school-journey-stages span:nth-child(3) { background: color-mix(in srgb, var(--theme-primary) 21%, var(--theme-soft)); }
:root[data-color-theme] .school-page .school-journey-stages span:nth-child(4) { background: color-mix(in srgb, var(--theme-primary) 26%, var(--theme-soft)); }
:root[data-color-theme] .network-card,
:root[data-color-theme] .app-card,
:root[data-color-theme] .contest-card,
:root[data-color-theme] .path-card,
:root[data-color-theme] .intro-card,
:root[data-color-theme] .story-card { border-color: var(--theme-line); background: color-mix(in srgb, white 88%, var(--theme-page)); color: var(--theme-ink); }
:root[data-color-theme] .school-page .school-card:hover,
:root[data-color-theme] .network-card:hover,
:root[data-color-theme] .app-card:hover { border-color: color-mix(in srgb, var(--theme-primary) 34%, var(--theme-line)); }
:root[data-color-theme] .network-card h3,
:root[data-color-theme] .app-card h3,
:root[data-color-theme] .contest-card h3,
:root[data-color-theme] .path-card h3,
:root[data-color-theme] .story-card h3 { color: var(--theme-ink); }
:root[data-color-theme] .wahdah-page .network-directory .network-card {
  border-color: color-mix(in srgb, var(--wahdah-accent) 24%, var(--theme-line));
  background: linear-gradient(145deg, color-mix(in srgb, white 90%, var(--theme-page)) 5%, color-mix(in srgb, var(--wahdah-tint) 62%, var(--theme-page)) 58%, color-mix(in srgb, var(--wahdah-accent) 9%, var(--theme-page)) 100%);
}
:root[data-color-theme] .wahdah-page .network-directory .network-card:nth-child(3n + 1) { --wahdah-accent: var(--theme-primary); --wahdah-tint: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-directory .network-card:nth-child(3n + 2) { --wahdah-accent: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-directory .network-card:nth-child(3n) { --wahdah-accent: color-mix(in srgb, var(--theme-companion) 48%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-companion) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-dakwah .network-card:nth-child(3n + 2) { --wahdah-accent: color-mix(in srgb, var(--theme-companion) 48%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-companion) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-dakwah .network-card:nth-child(3n) { --wahdah-accent: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-video .network-card:nth-child(3n + 1) { --wahdah-accent: var(--theme-secondary); --wahdah-tint: color-mix(in srgb, var(--theme-secondary) 12%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-video .network-card:nth-child(3n + 2) { --wahdah-accent: color-mix(in srgb, var(--theme-companion) 48%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-companion) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-video .network-card:nth-child(3n) { --wahdah-accent: var(--theme-primary); --wahdah-tint: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-social .network-card:nth-child(3n + 1) { --wahdah-accent: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-accent) 17%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-social .network-card:nth-child(3n + 2) { --wahdah-accent: color-mix(in srgb, var(--theme-companion) 48%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-companion) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-regional .network-card:nth-child(3n + 1) { --wahdah-accent: color-mix(in srgb, var(--theme-companion) 48%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-companion) 16%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-regional .network-card:nth-child(3n + 2) { --wahdah-accent: var(--theme-secondary); --wahdah-tint: color-mix(in srgb, var(--theme-secondary) 12%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-regional .network-card:nth-child(3n) { --wahdah-accent: color-mix(in srgb, var(--theme-accent) 42%, var(--theme-dark)); --wahdah-tint: color-mix(in srgb, var(--theme-accent) 17%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-regional .network-card:nth-child(4n) { --wahdah-accent: var(--theme-primary); --wahdah-tint: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-page)); }
:root[data-color-theme] .wahdah-page .network-directory .network-card .network-card-action { color: var(--wahdah-accent); }
:root[data-color-theme] .network-card p,
:root[data-color-theme] .app-card p,
:root[data-color-theme] .contest-card p,
:root[data-color-theme] .path-card p,
:root[data-color-theme] .story-card p { color: var(--theme-muted); }
:root[data-color-theme] .network-card-action,
:root[data-color-theme] .app-card a,
:root[data-color-theme] .network-home-actions .text-link { color: var(--theme-primary); }
:root[data-color-theme] .network-card-tag { color: #fff; }
:root[data-color-theme] .network-prayer,
:root[data-color-theme] .path-card:nth-child(2),
:root[data-color-theme] .path-card:nth-child(3),
:root[data-color-theme] .app-icon,
:root[data-color-theme] .school-card .school-level { background-color: var(--theme-soft); }
:root[data-color-theme] .app-card.featured { border-top-color: var(--theme-accent); }
:root[data-color-theme] .app-card .app-icon { color: var(--theme-primary); }
:root[data-color-theme] .service-group > .kicker,
:root[data-color-theme] .section .kicker,
:root[data-color-theme] .section-head .kicker { color: var(--theme-secondary); }
:root[data-color-theme] .network-home,
:root[data-color-theme] .network-directory,
:root[data-color-theme] .contest-section,
:root[data-color-theme] .competition-feature,
:root[data-color-theme] .page-intro,
:root[data-color-theme] .stories,
:root[data-color-theme] .app-hub { background: radial-gradient(ellipse at 94% 3%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-soft), transparent), transparent 38%), linear-gradient(180deg, var(--theme-page), color-mix(in srgb, var(--theme-primary) 5%, var(--theme-soft))); }
:root[data-color-theme] .network-directory.soft,
:root[data-color-theme] .join-section,
:root[data-color-theme] .creative,
:root[data-color-theme] .values,
:root[data-color-theme] .home-vision,
:root[data-color-theme] .school-units { background-color: var(--theme-soft); }
:root[data-color-theme] .network-subhero { border-color: var(--theme-line); background: linear-gradient(120deg, var(--theme-page), color-mix(in srgb, var(--theme-primary) 7%, var(--theme-page))); color: var(--theme-ink); }
:root[data-color-theme] .network-subhero .kicker,
:root[data-color-theme] .network-subhero p { color: var(--theme-muted); }
:root[data-color-theme] .wahdah-page .network-subhero { border-bottom-color: var(--theme-companion); background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-panel), transparent), transparent 36%), linear-gradient(125deg, var(--theme-dark), var(--theme-primary) 62%, var(--theme-secondary)); color: #fff; }
:root[data-color-theme] .wahdah-page .network-subhero .kicker { border-color: var(--theme-accent); color: var(--theme-accent); }
:root[data-color-theme] .wahdah-page .network-subhero h1 { color: #fff; }
:root[data-color-theme] .wahdah-page .network-subhero p { color: color-mix(in srgb, white 86%, var(--theme-primary)); }
:root[data-color-theme] .wahdah-page .network-directory { --wahdah-accent: var(--theme-primary); --wahdah-tint: var(--theme-page); border-color: var(--theme-line); background: var(--theme-soft); }
:root[data-color-theme] .wahdah-page .network-directory h2 { color: var(--theme-ink); }
:root[data-color-theme] .wahdah-page .network-directory .section-head p { color: var(--theme-muted); }
:root[data-color-theme] .network-home h2,
:root[data-color-theme] .network-directory h2,
:root[data-color-theme] .section h2 { color: var(--theme-ink); }
:root[data-color-theme] .network-home p,
:root[data-color-theme] .network-directory .section-head p { color: var(--theme-muted); }
:root[data-color-theme] .network-hub .button,
:root[data-color-theme] .lomba-hero .button { background: var(--theme-accent); color: var(--theme-dark); }
:root[data-color-theme] .lomba-hero .button.secondary { border-color: color-mix(in srgb, white 35%, transparent); background: transparent; color: #fff; }
:root[data-color-theme] .lomba-hero .hero-actions .button:not(.secondary) { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-dark); }
:root[data-color-theme] .lomba-hero .hero-actions .button.secondary { border-color: color-mix(in srgb, white 42%, transparent); background: color-mix(in srgb, white 7%, transparent); color: #fff; }
/* Service cards had ID-scoped pastel backgrounds that overruled the active theme. */
:root[data-color-theme] #keluarga .app-card:nth-child(2),
:root[data-color-theme] #keluarga .app-card:nth-child(3) { border-color: var(--theme-line); background: color-mix(in srgb, white 88%, var(--theme-page)); }
:root[data-color-theme] .home-footer,
:root[data-color-theme] footer,
:root[data-color-theme] .site-footer { background: radial-gradient(ellipse at 92% 0%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-footer), transparent), transparent 42%), linear-gradient(118deg, var(--theme-dark), var(--theme-primary) 58%, var(--theme-secondary)); color: color-mix(in srgb, white 88%, var(--theme-primary)); }
:root[data-color-theme] .home-footer a,
:root[data-color-theme] footer a { color: var(--theme-accent); }
:root[data-color-theme] .home-footer a:hover,
:root[data-color-theme] footer a:hover { color: #fff; }

/* Shared portal components that used to keep the original green palette. */
:root[data-color-theme] .portal-home-hero { border-color: color-mix(in srgb, var(--theme-companion) 35%, var(--theme-line)); background: radial-gradient(ellipse at 83% 12%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-portal), transparent), transparent 34%), linear-gradient(122deg, var(--theme-dark), var(--theme-primary) 58%, var(--theme-secondary)); color: #fff; }
:root[data-color-theme] .portal-home-hero h1,
:root[data-color-theme] .portal-home-hero > div > p:not(.eyebrow) { color: #fff; }
:root[data-color-theme] .portal-home-hero .eyebrow { color: var(--theme-accent); }
:root[data-color-theme] .portal-home-hero .button:not(.ghost) { border-color: var(--theme-accent); background: var(--theme-accent); color: var(--theme-dark); }
:root[data-color-theme] .portal-home-hero .button.ghost { border-color: color-mix(in srgb, white 45%, transparent); background: color-mix(in srgb, white 8%, transparent); color: #fff; }
:root[data-color-theme] .portal-home-hero .portal-home-visual { border-color: color-mix(in srgb, white 38%, transparent); }
:root[data-color-theme] .portal-home-hero .portal-home-visual img { border-color: color-mix(in srgb, white 38%, transparent); }
:root[data-color-theme] .portal-home-section,
:root[data-color-theme] .portal-home-community,
:root[data-color-theme] .portal-home-latest { background-color: var(--theme-page); color: var(--theme-ink); }
:root[data-color-theme] .portal-home-section h2,
:root[data-color-theme] .portal-home-latest h2 { color: var(--theme-ink); }
:root[data-color-theme] .portal-home-section .eyebrow,
:root[data-color-theme] .portal-home-latest .eyebrow { color: var(--theme-secondary); }
:root[data-color-theme] .portal-home-latest,
:root[data-color-theme] .portal-home-contests,
:root[data-color-theme] .portal-home-leaders,
:root[data-color-theme] .portal-home-public-guide { border-color: var(--theme-line); }
:root[data-color-theme] .portal-public-card,
:root[data-color-theme] .portal-public-article-card,
:root[data-color-theme] .portal-home-latest .article-card,
:root[data-color-theme] .portal-home-leaders .leader-preview,
:root[data-color-theme] .leader-card,
:root[data-color-theme] .profile-score { border-color: var(--theme-line); background: color-mix(in srgb, white 88%, var(--theme-page)); color: var(--theme-ink); }
:root[data-color-theme] .portal-public-icon,
:root[data-color-theme] .portal-home-leaders .leader-preview { background-color: var(--theme-soft); }
:root[data-color-theme] .portal-public-card h3,
:root[data-color-theme] .portal-public-article-card h3,
:root[data-color-theme] .portal-home-latest .article-card h2,
:root[data-color-theme] .portal-home-latest .article-card h3,
:root[data-color-theme] .portal-home-section .section-heading h2,
:root[data-color-theme] .portal-home-latest .section-heading h2 { color: var(--theme-ink); }
:root[data-color-theme] .portal-public-card p,
:root[data-color-theme] .portal-public-link,
:root[data-color-theme] .portal-public-article-meta,
:root[data-color-theme] .portal-home-latest .article-card p,
:root[data-color-theme] .portal-community-summary-intro > small { color: var(--theme-muted); }
:root[data-color-theme] .portal-public-card:hover,
:root[data-color-theme] .portal-public-article-card:hover,
:root[data-color-theme] .portal-home-latest .article-card:hover { border-color: color-mix(in srgb, var(--theme-primary) 34%, var(--theme-line)); }
:root[data-color-theme] .portal-public-article-link,
:root[data-color-theme] .portal-home-latest .article-card a,
:root[data-color-theme] .portal-home-leaders .leader-preview small { color: var(--theme-primary); }
:root[data-color-theme] .portal-community-summary,
:root[data-color-theme] .leaders-summary,
:root[data-color-theme] .profile-hero,
:root[data-color-theme] .admin-center-hero,
:root[data-color-theme] .analytics-intro { border-color: var(--theme-line); background: linear-gradient(125deg, var(--theme-soft), var(--theme-page)); color: var(--theme-ink); }
:root[data-color-theme] .portal-community-summary-intro .eyebrow,
:root[data-color-theme] .leaders-summary .eyebrow,
:root[data-color-theme] .profile-hero .eyebrow { color: var(--theme-secondary); }
:root[data-color-theme] .portal-community-summary-intro > strong,
:root[data-color-theme] .profile-hero h1 { color: var(--theme-ink); }
:root[data-color-theme] .profile-avatar,
:root[data-color-theme] .leader-avatar { background: var(--theme-primary); color: #fff; }
:root[data-color-theme] .leader-avatar { box-shadow: 0 0 0 3px var(--theme-soft); }
:root[data-color-theme] .leaders-xp-rules { border-color: var(--theme-line); background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 6%, var(--theme-page)), var(--theme-soft)); color: var(--theme-ink); }
:root[data-color-theme] .leaders-xp-rules > span b,
:root[data-color-theme] .leader-xp { color: var(--theme-primary); }
:root[data-color-theme] .leader-card.is-viewer { border-color: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-line)); background: linear-gradient(115deg, color-mix(in srgb, var(--theme-primary) 9%, var(--theme-page)), color-mix(in srgb, var(--theme-accent) 7%, var(--theme-page))); }
:root[data-color-theme] .leader-number { border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-line)); background: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-page)); color: var(--theme-secondary); }
:root[data-color-theme] .leader-you { background: var(--theme-soft); color: var(--theme-primary); }
:root[data-color-theme] .leader-xp { background: var(--theme-soft); }
:root[data-color-theme] .leader-card .xp-tier-badge { border-color: var(--theme-line); background: color-mix(in srgb, var(--theme-accent) 13%, var(--theme-page)); color: var(--theme-secondary); }
:root[data-color-theme] .media-workspace,
:root[data-color-theme] .writing-studio { border-color: var(--theme-line); background: var(--theme-soft); }
:root[data-color-theme] .writing-intro,
:root[data-color-theme] .media-intro { color: var(--theme-ink); }
:root[data-color-theme] .writing-count,
:root[data-color-theme] .writing-foot [data-writing-status] { color: var(--theme-primary); }
:root[data-color-theme] .writing-toolbar button:hover,
:root[data-color-theme] .toolbar-upload:hover,
:root[data-color-theme] .writing-toolbar button:focus-visible,
:root[data-color-theme] .toolbar-upload:focus-within { border-color: var(--theme-line); background: color-mix(in srgb, var(--theme-primary) 8%, white); }
:root[data-color-theme] .writing-canvas:focus { box-shadow: inset 0 0 0 2px var(--theme-secondary); }
:root[data-color-theme] #galeri.social-gallery { background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 8%, var(--theme-page)), var(--theme-soft)) !important; }
:root[data-color-theme] #galeri.social-gallery .section-head h2 { color: var(--theme-ink); }
:root[data-color-theme] #galeri.social-gallery .section-head .kicker { color: var(--theme-secondary); }
:root[data-color-theme] #galeri.social-gallery .section-head p,
:root[data-color-theme] #galeri.social-gallery .social-gallery-card span { color: var(--theme-muted); }
:root[data-color-theme] #galeri.social-gallery .social-gallery-card,
:root[data-color-theme] #galeri.social-gallery .social-gallery-more a { border-color: var(--theme-line); background: color-mix(in srgb, white 92%, var(--theme-page)); }
:root[data-color-theme] #galeri.social-gallery .social-gallery-card strong { color: var(--theme-ink); }
:root[data-color-theme] #galeri.social-gallery .social-gallery-card figcaption a,
:root[data-color-theme] #galeri.social-gallery .social-gallery-more a { color: var(--theme-primary); }
:root[data-color-theme] #galeri.social-gallery .social-gallery-image { background: var(--theme-soft); }
:root[data-color-theme] .school-page .school-units { background: linear-gradient(180deg, var(--theme-page), var(--theme-soft)); }
:root[data-color-theme] .school-page .school-card { border-color: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-line)); color: #fff; box-shadow: 0 17px 34px color-mix(in srgb, var(--theme-dark) 22%, transparent); }
:root[data-color-theme] .school-page .school-card.school-tk { --school-gradient: linear-gradient(135deg, color-mix(in srgb, var(--theme-dark) 88%, var(--theme-primary)), color-mix(in srgb, var(--theme-primary) 78%, var(--theme-accent))); }
:root[data-color-theme] .school-page .school-card.school-sd { --school-gradient: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 76%, var(--theme-dark)), color-mix(in srgb, var(--theme-primary) 64%, var(--theme-secondary))); }
:root[data-color-theme] .school-page .school-card.school-smp { --school-gradient: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 56%, var(--theme-secondary)), color-mix(in srgb, var(--theme-secondary) 78%, var(--theme-primary))); }
:root[data-color-theme] .school-page .school-card.school-sma { --school-gradient: linear-gradient(135deg, color-mix(in srgb, var(--theme-dark) 78%, var(--theme-primary)), color-mix(in srgb, var(--theme-secondary) 72%, var(--theme-accent))); }
:root[data-color-theme] .school-page .school-card.school-ptq-putra { --school-gradient: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 72%, var(--theme-dark)), color-mix(in srgb, var(--theme-secondary) 72%, var(--theme-primary))); }
:root[data-color-theme] .school-page .school-card.school-ptq-putri { --school-gradient: linear-gradient(135deg, color-mix(in srgb, var(--theme-secondary) 65%, var(--theme-dark)), color-mix(in srgb, var(--theme-primary) 58%, var(--theme-accent))); }
:root[data-color-theme] .school-page .school-card-top { background: transparent; }
:root[data-color-theme] .school-page .school-card .school-level { border-color: color-mix(in srgb, white 34%, transparent); background: color-mix(in srgb, white 15%, transparent); color: #fff; }
:root[data-color-theme] .school-page .school-card-top small { color: color-mix(in srgb, white 86%, var(--theme-primary)); }
:root[data-color-theme] .school-page .school-card-number { color: color-mix(in srgb, white 78%, var(--theme-accent)); }
:root[data-color-theme] .school-page .school-card h3 { color: #fff; }
:root[data-color-theme] .school-page .school-card p { color: color-mix(in srgb, white 88%, var(--theme-primary)); }
:root[data-color-theme] .school-page .school-card-action { color: #fff; }
:root[data-color-theme] .school-page .school-section-head h2,
:root[data-color-theme] .school-page .school-next { color: var(--theme-ink); }
:root[data-color-theme] .school-page .school-next a { color: var(--theme-primary); }
:root[data-color-theme] .school-page .school-footer { background: radial-gradient(circle at 50% -90%, color-mix(in srgb, var(--theme-companion) var(--theme-glow-footer), transparent), transparent 60%), linear-gradient(135deg, var(--theme-dark), var(--theme-primary) 68%, var(--theme-secondary)); color: color-mix(in srgb, white 85%, var(--theme-primary)); }
:root[data-color-theme] .school-page .school-footer::before { background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary), var(--theme-companion)); }
:root[data-color-theme] .school-page .school-footer-kicker,
:root[data-color-theme] .school-page .school-footer-bottom a { color: var(--theme-accent); }
:root[data-color-theme] .school-page .school-footer-bottom > span { color: color-mix(in srgb, white 76%, var(--theme-primary)); }

/* Natural keeps the original YPWIK blend of leafy green, teal, sky blue and warm earth accents. */
:root[data-color-theme="natural"] .discover-school { background: #e5efe3; }
:root[data-color-theme="natural"] .discover-service { background: #e3eeee; }
:root[data-color-theme="natural"] .discover-contest { background: #f2eadb; }
:root[data-color-theme="natural"] .discover-network { background: #ebe7ef; }
:root[data-color-theme="natural"] .school-page .school-journey-stages span,
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(2),
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(3),
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(4) { color: #173c32; border-color: color-mix(in srgb, #1a5145 18%, white); }
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(1) { background: #83b280; }
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(2) { background: #8fc3b1; }
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(3) { background: #91b9ce; }
:root[data-color-theme="natural"] .school-page .school-journey-stages span:nth-child(4) { background: #e6bd75; }
:root[data-color-theme="natural"] .school-page .school-card.school-tk { --school-gradient: linear-gradient(135deg,#29664d,#337658); }
:root[data-color-theme="natural"] .school-page .school-card.school-sd { --school-gradient: linear-gradient(135deg,#1b6b6d,#237b75); }
:root[data-color-theme="natural"] .school-page .school-card.school-smp { --school-gradient: linear-gradient(135deg,#315779,#416e8d); }
:root[data-color-theme="natural"] .school-page .school-card.school-sma { --school-gradient: linear-gradient(135deg,#875a2d,#a7793d); }
:root[data-color-theme="natural"] .school-page .school-card.school-ptq-putra { --school-gradient: linear-gradient(135deg,#365f53,#4b6d5b); }
:root[data-color-theme="natural"] .school-page .school-card.school-ptq-putri { --school-gradient: linear-gradient(135deg,#634d69,#765e75); }
:root[data-color-theme="natural"] .path-card:nth-child(2) { background: #e9eee6; }
:root[data-color-theme="natural"] .path-card:nth-child(3) { background: #f1e9d8; }
:root[data-color-theme="natural"] #keluarga .app-card:nth-child(2) { background: #fffcf5; }
:root[data-color-theme="natural"] #keluarga .app-card:nth-child(3) { background: #eef4ea; }
:root[data-color-theme="natural"] .leader-card.is-viewer { background: linear-gradient(110deg,#edf6ef,#fffdf7); border-color: #5d9b83; }

/* Give the About page a richer, softly layered backdrop that follows the chosen theme. */
:root[data-color-theme] body.about-page {
  background: linear-gradient(180deg, var(--theme-page), color-mix(in srgb, var(--theme-page) 88%, var(--theme-companion) 12%) 48%, var(--theme-page));
}
:root[data-color-theme] .about-page .subhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-accent) 58%, transparent);
  background:
    radial-gradient(ellipse at 82% 18%, color-mix(in srgb, var(--theme-accent) 34%, transparent), transparent 32%),
    radial-gradient(ellipse at 16% 100%, color-mix(in srgb, var(--theme-companion) 26%, transparent), transparent 38%),
    linear-gradient(118deg, var(--theme-dark) 0%, var(--theme-primary) 46%, var(--theme-secondary) 78%, color-mix(in srgb, var(--theme-secondary) 78%, var(--theme-companion)) 100%);
}
:root[data-color-theme] .about-page .subhero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  right: -120px;
  top: -320px;
  border: 1px solid color-mix(in srgb, white 25%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 58px color-mix(in srgb, white 5%, transparent), 0 0 0 122px color-mix(in srgb, white 4%, transparent), 0 0 0 188px color-mix(in srgb, var(--theme-accent) 7%, transparent);
  pointer-events: none;
}
:root[data-color-theme] .about-page .subhero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  left: -160px;
  bottom: -225px;
  border: 1px solid color-mix(in srgb, white 16%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 48px color-mix(in srgb, white 4%, transparent), 0 0 0 98px color-mix(in srgb, var(--theme-accent) 6%, transparent);
  pointer-events: none;
}
:root[data-color-theme] .about-page .subhero .wrap { position: relative; }
:root[data-color-theme] .about-page #tentang {
  background: radial-gradient(ellipse at 92% 10%, color-mix(in srgb, var(--theme-companion) 13%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--theme-page) 78%, white), var(--theme-page));
}
:root[data-color-theme] .about-page #galeri {
  background: radial-gradient(ellipse at 8% 12%, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 36%), linear-gradient(180deg, var(--theme-page), color-mix(in srgb, var(--theme-page) 87%, var(--theme-companion) 13%));
}
:root[data-color-theme] .about-page .subhero .gallery-jump {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid color-mix(in srgb, white 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, white 10%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 16%, transparent);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
:root[data-color-theme] .about-page .subhero .gallery-jump:hover { transform: translateY(-1px); background: color-mix(in srgb, white 17%, transparent); }
@media (max-width: 650px) {
  :root[data-color-theme] .about-page .subhero::before { width: 390px; height: 390px; right: -235px; top: -215px; }
  :root[data-color-theme] .about-page .subhero::after { width: 220px; height: 220px; left: -135px; bottom: -175px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-color-theme] .about-page .subhero .gallery-jump { transition: none; }
}

/* The editorial callout uses a dark theme surface, so its label and heading stay light. */
html body .editorial-box .kicker { color: #f2d28d !important; }
html body .editorial-box h2,
html body .editorial-box h2 em { color: #fff !important; }

/* Homepage discovery backdrop blends with the active palette instead of a fixed mint wash. */
:root[data-color-theme] .home-page .home-discover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 82% 10%, color-mix(in srgb, var(--theme-accent) 17%, transparent), transparent 38%),
    radial-gradient(ellipse at 12% 92%, color-mix(in srgb, var(--theme-companion) 10%, transparent), transparent 43%),
    linear-gradient(180deg, var(--theme-page) 0%, color-mix(in srgb, var(--theme-page) 90%, var(--theme-accent) 10%) 54%, color-mix(in srgb, var(--theme-page) 82%, var(--theme-companion) 18%) 100%);
}
:root[data-color-theme] .home-page .home-discover::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 470px;
  height: 470px;
  right: -225px;
  top: -385px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 58px color-mix(in srgb, var(--theme-accent) 6%, transparent), 0 0 0 118px color-mix(in srgb, var(--theme-primary) 4%, transparent);
  pointer-events: none;
}
:root[data-color-theme] .home-page .home-discover > .wrap { position: relative; }
@media (max-width: 650px) {
  :root[data-color-theme] .home-page .home-discover::before { width: 350px; height: 350px; right: -220px; top: -300px; }
}

/* Give the four homepage destinations distinct, soft gradients from the active theme. */
:root[data-color-theme] .home-page .home-discover .discover-tile {
  border-color: color-mix(in srgb, var(--discover-accent) 24%, var(--theme-line));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent), 0 10px 26px color-mix(in srgb, var(--theme-primary) 5%, transparent);
}
:root[data-color-theme] .home-page .home-discover .discover-school {
  --discover-accent: var(--theme-primary);
  background: linear-gradient(148deg, color-mix(in srgb, white 88%, var(--theme-page)) 0%, color-mix(in srgb, var(--theme-primary) 9%, var(--theme-page)) 54%, color-mix(in srgb, var(--theme-companion) 17%, var(--theme-page)) 100%);
}
:root[data-color-theme] .home-page .home-discover .discover-service {
  --discover-accent: color-mix(in srgb, var(--theme-accent) 44%, var(--theme-dark));
  background: linear-gradient(148deg, color-mix(in srgb, white 90%, var(--theme-page)) 0%, color-mix(in srgb, var(--theme-accent) 18%, var(--theme-page)) 58%, color-mix(in srgb, var(--theme-secondary) 9%, var(--theme-page)) 100%);
}
:root[data-color-theme] .home-page .home-discover .discover-contest {
  --discover-accent: var(--theme-secondary);
  background: linear-gradient(148deg, color-mix(in srgb, white 88%, var(--theme-page)) 0%, color-mix(in srgb, var(--theme-secondary) 11%, var(--theme-page)) 52%, color-mix(in srgb, var(--theme-accent) 17%, var(--theme-page)) 100%);
}
:root[data-color-theme] .home-page .home-discover .discover-network {
  --discover-accent: color-mix(in srgb, var(--theme-companion) 48%, var(--theme-dark));
  background: linear-gradient(148deg, color-mix(in srgb, white 89%, var(--theme-page)) 0%, color-mix(in srgb, var(--theme-companion) 18%, var(--theme-page)) 55%, color-mix(in srgb, var(--theme-primary) 8%, var(--theme-page)) 100%);
}
:root[data-color-theme] .home-page .home-discover .discover-tile::after {
  border-color: color-mix(in srgb, var(--discover-accent) 20%, transparent);
  box-shadow: 0 0 0 20px color-mix(in srgb, var(--discover-accent) 4%, transparent), 0 0 0 40px color-mix(in srgb, var(--discover-accent) 2%, transparent);
}
:root[data-color-theme] .home-page .home-discover .discover-index { color: color-mix(in srgb, var(--discover-accent) 78%, var(--theme-dark)); }
:root[data-color-theme] .home-page .home-discover .discover-foot { border-color: color-mix(in srgb, var(--discover-accent) 20%, var(--theme-line)); color: var(--theme-ink); }
:root[data-color-theme] body.home-page main #jelajahi.home-discover {
  background:
    radial-gradient(ellipse at 86% 8%, color-mix(in srgb, var(--theme-accent) 13%, transparent), transparent 38%),
    linear-gradient(180deg, var(--theme-page) 0%, color-mix(in srgb, var(--theme-page) 72%, var(--theme-soft) 28%) 100%);
}

/* Give the monochrome theme presets the same gentle, nature-inspired color variety
   as Natural while letting each active theme keep its own overall identity. */
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-hero {
  background:
    radial-gradient(ellipse at 82% 18%, color-mix(in srgb, #91b9ce 15%, transparent), transparent 32%),
    radial-gradient(ellipse at 12% 86%, color-mix(in srgb, #e6bd75 10%, transparent), transparent 35%),
    linear-gradient(120deg, var(--theme-page), color-mix(in srgb, var(--theme-primary) 6%, var(--theme-page)) 58%, color-mix(in srgb, #8fc3b1 13%, var(--theme-soft)));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey {
  background:
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, #e6bd75 16%, transparent), transparent 38%),
    radial-gradient(ellipse at 9% 100%, color-mix(in srgb, #91b9ce 15%, transparent), transparent 44%),
    linear-gradient(145deg, var(--theme-dark), var(--theme-primary) 56%, color-mix(in srgb, #397665 44%, var(--theme-secondary)) 82%, var(--theme-secondary));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span,
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(2),
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(3),
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(4) {
  border-color: color-mix(in srgb, var(--theme-primary) 25%, white);
  color: color-mix(in srgb, var(--theme-ink) 86%, #173c32);
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(1) { background: color-mix(in srgb, #83b280 84%, var(--theme-primary) 16%); }
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(2) { background: color-mix(in srgb, #8fc3b1 84%, var(--theme-primary) 16%); }
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(3) { background: color-mix(in srgb, #91b9ce 84%, var(--theme-primary) 16%); }
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-journey-stages span:nth-child(4) { background: color-mix(in srgb, #e6bd75 84%, var(--theme-primary) 16%); }
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-card.school-tk {
  --school-gradient: linear-gradient(135deg, color-mix(in srgb, #29664d 84%, var(--theme-primary) 16%), color-mix(in srgb, #337658 84%, var(--theme-primary) 16%));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-card.school-sd {
  --school-gradient: linear-gradient(135deg, color-mix(in srgb, #1b6b6d 84%, var(--theme-primary) 16%), color-mix(in srgb, #237b75 84%, var(--theme-primary) 16%));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-card.school-smp {
  --school-gradient: linear-gradient(135deg, color-mix(in srgb, #315779 84%, var(--theme-primary) 16%), color-mix(in srgb, #416e8d 84%, var(--theme-primary) 16%));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-card.school-sma {
  --school-gradient: linear-gradient(135deg, color-mix(in srgb, #875a2d 84%, var(--theme-primary) 16%), color-mix(in srgb, #a7793d 84%, var(--theme-primary) 16%));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-card.school-ptq-putra {
  --school-gradient: linear-gradient(135deg, color-mix(in srgb, #365f53 84%, var(--theme-primary) 16%), color-mix(in srgb, #4b6d5b 84%, var(--theme-primary) 16%));
}
:root[data-color-theme]:not([data-color-theme="natural"]) .school-page .school-card.school-ptq-putri {
  --school-gradient: linear-gradient(135deg, color-mix(in srgb, #634d69 84%, var(--theme-primary) 16%), color-mix(in srgb, #765e75 84%, var(--theme-primary) 16%));
}

/* Subtle decorative washes for the homepage; existing section and card colors remain the base. */
:root[data-color-theme] .home-page .home-stories {
  background-image:
    radial-gradient(ellipse at 6% 12%, color-mix(in srgb, var(--theme-companion) 8%, transparent), transparent 30%),
    radial-gradient(ellipse at 96% 88%, color-mix(in srgb, var(--theme-accent) 7%, transparent), transparent 28%);
}
:root[data-color-theme] .home-page .home-social-gallery {
  background-image:
    radial-gradient(ellipse at 92% 12%, color-mix(in srgb, var(--theme-companion) 10%, transparent), transparent 32%),
    radial-gradient(ellipse at 4% 94%, color-mix(in srgb, var(--theme-accent) 6%, transparent), transparent 30%);
}
:root[data-color-theme] .home-page .home-daily-redesign {
  background-image:
    radial-gradient(ellipse at 8% 8%, color-mix(in srgb, var(--theme-accent) 8%, transparent), transparent 31%),
    radial-gradient(ellipse at 96% 92%, color-mix(in srgb, var(--theme-companion) 9%, transparent), transparent 34%);
}