/* Lavender, violet and cyan palette for the light theme. */
html:has(body.light) {
    color-scheme: light;
    background: #f6f4fc;
}

body.light {
    --gg-bg: #f6f4fc;
    --gg-bg-rgb: 246, 244, 252;
    --gg-surface: #fbfaff;
    --gg-surface-rgb: 251, 250, 255;
    --gg-surface-hover: #efeafd;
    --gg-surface-elevated: #ffffff;
    --gg-input-bg: #ffffff;
    --gg-border: #d7d1e9;
    --gg-border-rgb: 215, 209, 233;
    --gg-text: #625d83;
    --gg-text-rgb: 98, 93, 131;
    --gg-text-muted: #746f94;
    --gg-text-muted-rgb: 116, 111, 148;
    --gg-primary: #7927c7;
    --gg-primary-rgb: 121, 39, 199;
    --gg-primary-hover: #6b1eaf;
    --gg-primary-active: #5c169c;
    --gg-primary-light: #705098;
    --gg-primary-deep: #4f168d;
    --gg-secondary: #007b98;
    --gg-secondary-rgb: 0, 123, 152;
    --gg-secondary-hover: #008eaa;
    --gg-secondary-light: #006f8b;
    --gg-secondary-deep: #006c84;
    --gg-success: #147d69;
    --gg-success-rgb: 20, 125, 105;
    --gg-success-light: #126f5e;
    --gg-success-deep: #0e6253;
    --gg-warning: #95601e;
    --gg-warning-rgb: 149, 96, 30;
    --gg-warning-light: #885716;
    --gg-warning-deep: #754810;
    --gg-danger: #a94468;
    --gg-danger-rgb: 169, 68, 104;
    --gg-danger-light: #a0395f;
    --gg-danger-deep: #812b4b;
    --gg-on-primary: #ffffff;
    --gg-on-bright: #625d83;
    --gg-border-focus: #7927c7;
    --gg-shadow: 0 10px 28px rgba(55, 40, 104, .13);
    --gg-glow-primary: 0 0 18px rgba(var(--gg-primary-rgb), .16);
    color-scheme: light;
    color: #625d83 !important;
    background: #f6f4fc !important;
}

body.light.app-shell,
body.light.activity-shell,
body.light.nutrition-shell,
body.light.analytics-shell,
body.light.online-shell {
    background: linear-gradient(155deg, #f9f8ff, #efedff 55%, #e9e8fb) !important;
}

body.light .hero-bg {
    background: linear-gradient(145deg, #f9f8ff, #efedff) !important;
}

body.light footer {
    background: #edeafb !important;
    border-color: #d7d1e9 !important;
}

body.light :is(
    .neon-card, .neon-panel, .neon-hero, .dashboard-surface,
    .dashboard-deep, .dashboard-soft, .workout-card, .stat-card,
    .training-metric-card, .activity-card, .nutrition-card, .online-card,
    .inventory-card, .item-card, .reward-card, .reward-shelf,
    .guild-panel, .admin-panel, .admin-sidebar, .chart-panel,
    .exercise-catalog-card, .profile-card, .health-card, .quest-card,
    .artifact-card, .gamification-card
) {
    color: #625d83 !important;
    background: #fbfaff !important;
    border-color: #d7d1e9 !important;
    box-shadow: 0 12px 32px rgba(45, 67, 91, .06) !important;
}

body.light :is(.neon-card, .neon-panel, .exercise-catalog-card, .activity-card, .nutrition-card, .online-card):hover {
    border-color: #b9a7e8 !important;
}

body.light :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-800, .text-gray-900, .text-gray-950, .text-slate-800, .text-slate-900) {
    color: #625d83 !important;
}

body.light :is(h1, h2, h3, strong, .font-bold) {
    color: #625d83 !important;
}

body.light :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600, .text-slate-300, .text-slate-400) {
    color: #746f94 !important;
}

body.light :is(.text-cyan-100, .text-cyan-200, .text-cyan-300, .text-cyan-400, .text-blue-300) {
    color: #007b98 !important;
}

body.light :is(.text-purple-100, .text-purple-200, .text-purple-300, .text-purple-400, .text-pink-300, .text-violet-300) {
    color: #705098 !important;
}

body.light :is(.text-emerald-200, .text-emerald-300, .text-emerald-400, .text-green-400) {
    color: #397d68 !important;
}

body.light :is(.text-amber-100, .text-amber-200, .text-yellow-100, .text-yellow-200, .text-yellow-300, .text-orange-400) {
    color: #916629 !important;
}

body.light :is(.text-red-100, .text-red-200, .text-red-300, .text-red-400) {
    color: #ac536d !important;
}

body.light :is(input, select, textarea, .neon-input, .period-select, .activity-input, .nutrition-input, .guild-input, .admin-input) {
    color: #625d83 !important;
    background: #fbfaff !important;
    border-color: #d7d1e9 !important;
    box-shadow: none !important;
}

body.light :is(input, textarea)::placeholder {
    color: #777297 !important;
    opacity: 1;
}

body.light select option {
    color: #625d83;
    background: #fbfaff;
}

body.light :is(input, select, textarea, .neon-input):focus-visible {
    border-color: #007b98 !important;
    box-shadow: 0 0 0 3px rgba(57, 127, 153, .12) !important;
}

body.light :is(.neon-button, .gg-button-primary, button[type="submit"].bg-gradient-to-r, a.bg-gradient-to-r) {
    color: #ffffff !important;
    background: linear-gradient(120deg, #007b98, #5b2ea7) !important;
    border-color: #007b98 !important;
    box-shadow: 0 8px 18px rgba(57, 127, 153, .12) !important;
}

body.light :is(.gg-button-secondary, .section-links a) {
    color: #4f4784 !important;
    background: #ece8ff !important;
    border-color: #d7d1e9 !important;
}

body.light .section-links a:hover,
body.light .section-links a:focus-visible {
    background: #e6ddfc !important;
    border-color: #007b98 !important;
}

body.light .section-links a i { color: #007b98; }

body.light :is(.bg-gray-950, .bg-gray-900, .bg-gray-800, .bg-gray-700, .bg-black),
body.light :is([class~="bg-gray-950/35"], [class~="bg-gray-950/50"], [class~="bg-gray-950/60"], [class~="bg-gray-950/70"], [class~="bg-gray-950/85"]) {
    color: #625d83 !important;
    background-color: #efedff !important;
    background-image: none !important;
}

body.light :is([class~="bg-cyan-500"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-emerald-600"], [class~="bg-green-600"], [class~="bg-red-600"]):is(a, button) {
    color: #ffffff !important;
}

body.light :is(table, thead, tbody, tr, th, td) {
    border-color: #d7d1e9;
}

body.light :is(thead tr, .heat-legend-row, .achievement-chip, .exercise-image-shell) {
    color: #625d83 !important;
    background: #edeafb !important;
}

/* Desktop header, dropdowns, and breadcrumbs. */
body.light .site-header.neon-header,
body.light .site-header .nav-menu-panel,
body.light .site-header .language-menu {
    color: #625d83 !important;
    background: #fbfaff !important;
    border-color: #d7d1e9 !important;
    box-shadow: 0 12px 30px rgba(45, 67, 91, .08) !important;
}

body.light .site-header :is(.site-nav a, .site-nav button, .nav-menu summary, .pwa-install-button, .theme-toggle, .language-switcher summary) {
    color: #4f4784 !important;
    background: #ece8ff !important;
    border-color: #d7d1e9 !important;
    box-shadow: none !important;
}

body.light .site-header :is(.site-nav a, .site-nav button, .nav-menu summary):hover,
body.light .site-header :is(.nav-menu.is-current > summary, .nav-menu-panel a.is-active) {
    color: #007b98 !important;
    background: #e6ddfc !important;
    border-color: #b99be9 !important;
}

body.light .site-header .nav-menu-panel :is(a, button),
body.light .site-header .language-menu a {
    color: #4f4784 !important;
    background: transparent !important;
}

body.light .site-header .nav-menu-panel :is(a, button):hover,
body.light .site-header .language-menu a:hover {
    color: #007b98 !important;
    background: #f1ebff !important;
}

body.light .site-header .nav-menu-panel a.is-active,
body.light .site-header .language-menu a.is-active {
    color: #007b98 !important;
    background: #e6ddfc !important;
}

body.light .site-header .nav-group-title,
body.light .product-breadcrumbs { color: #746f94 !important; }
body.light .site-header :is(.brand-kicker, .header-tagline) {
    color: #746f94 !important;
    text-shadow: none !important;
}
body.light .product-breadcrumbs a { color: #007b98 !important; }
body.light .product-breadcrumbs [aria-current] { color: #625d83 !important; }

/* Large hero artwork keeps its dark overlay so white labels stay readable. */
body.light .hero-home-intro,
body.light .dashboard-desktop-main .character-card {
    color: #ffffff !important;
    background:
        linear-gradient(90deg, rgba(3, 17, 31, .88), rgba(3, 17, 31, .53)),
        var(--hero-location-image) center / cover !important;
    border-color: #b694dc !important;
}

body.light .hero-home-intro :is(h1, p),
body.light .dashboard-desktop-main .character-card :is(.character-title, .character-name, .character-eyebrow) {
    color: #ffffff !important;
}

body.light .hero-home-destination-grid a {
    color: #625d83 !important;
    background: #fbfaff !important;
    border-color: #d7d1e9 !important;
}

body.light .hero-home-destination-grid small { color: #746f94 !important; }
body.light .hero-home-destination-grid a > i { color: #007b98 !important; }

/* Cards that use page-specific dark backgrounds. */
body.light :is(.exercise-catalog-card, .pricing-card, .favorite-exercise-card) {
    color: #625d83 !important;
    background: #fbfaff !important;
    border-color: #d7d1e9 !important;
}

body.light .exercise-catalog-card h2 { color: #625d83 !important; }
body.light .exercise-mobile-details { border-color: #d6cfef; }
body.light .exercise-mobile-details summary { color: #007b98; }
body.light .exercise-mobile-details-body p { color: #746f94; }
body.light .exercise-mobile-primary-more { color: #746f94; }

@media (min-width: 768px) {
    body.light:is(.app-shell, .analytics-shell) .site-header.neon-header {
        border-bottom-color: #d7d1e9 !important;
        background:
            linear-gradient(180deg, rgba(243, 241, 255, .72), rgba(243, 241, 255, .96)),
            url('/images/brand/gamegym-header-heroes.png') center 39% / cover no-repeat,
            #f6f4fc !important;
        box-shadow: 0 8px 24px rgba(45, 67, 91, .06) !important;
    }

    body.light:is(.app-shell, .analytics-shell) .site-header .nav-mode > summary {
        color: #625d83 !important;
        background: #fbfaff !important;
        border-color: #d7d1e9 !important;
        box-shadow: none !important;
    }

    body.light:is(.app-shell, .analytics-shell) .site-header .nav-mode.is-current > summary {
        color: #6320a5 !important;
        background: #f0ebf5 !important;
        border-color: #d4c6e2 !important;
    }

    body.light:is(.app-shell, .analytics-shell) .site-header .nav-mode > summary i {
        color: #007b98 !important;
    }

    body.light:is(.app-shell, .analytics-shell) .site-header .nav-mode.is-current > summary i {
        color: #705098 !important;
    }

    body.light :is(.gg-home-hero, .gg-home-location, .gg-home-stats, .gg-home-links a, .gg-story-side-card) {
        border-color: #d7d1e9 !important;
        box-shadow: 0 10px 28px rgba(45, 67, 91, .07) !important;
    }

    body.light .gg-story-desktop-tabs {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.light .gg-story-desktop-tabs a {
        border-color: rgba(var(--story-tile-rgb), .64);
        color: #625d83;
        background:
            url('/images/gamification/story-tile-ornament.svg') right -.75rem bottom -1.15rem / 6.4rem auto no-repeat,
            radial-gradient(circle at 78% 8%, rgba(var(--story-tile-rgb), .2), transparent 70%),
            linear-gradient(145deg, #ffffff, #f1ecff) !important;
        box-shadow: 0 8px 18px rgba(37, 61, 92, .09);
    }

    body.light .gg-story-desktop-tabs a i {
        color: #625d83;
        background: rgba(var(--story-tile-rgb), .28);
    }

    body.light .gg-story-desktop-tabs a[aria-current] {
        border-color: rgb(var(--story-tile-rgb)) !important;
        color: #625d83 !important;
        background:
            url('/images/gamification/story-tile-ornament.svg') right -.75rem bottom -1.15rem / 6.4rem auto no-repeat,
            radial-gradient(circle at 78% 8%, rgba(var(--story-tile-rgb), .34), transparent 70%),
            linear-gradient(145deg, #ffffff, #f1ecff) !important;
        box-shadow: inset 0 0 0 1px rgba(var(--story-tile-rgb), .24), 0 0 18px rgba(var(--story-tile-rgb), .15) !important;
    }
}

@media (max-width: 767px) {
    body.light .mobile-app-topbar,
    body.light .mobile-app-nav,
    body.light .mobile-more-sheet[open] {
        color: #625d83 !important;
        background: #fbfaff !important;
        border-color: #d7d1e9 !important;
        box-shadow: 0 -8px 28px rgba(45, 67, 91, .09) !important;
    }

    body.light .mobile-app-brand,
    body.light .mobile-more-heading h2 { color: #625d83 !important; }
    body.light .mobile-app-topbar-area,
    body.light .mobile-more-heading span,
    body.light .mobile-more-content h3 { color: #007b98 !important; }

    body.light .mobile-app-nav-item,
    body.light .mobile-app-nav-item:visited { color: #746f94 !important; }

    body.light .mobile-app-nav-item.is-active,
    body.light .mobile-app-nav-item[aria-expanded="true"] {
        color: #007b98 !important;
        background: #d9f5fb !important;
    }

    body.light .mobile-app-nav-item--primary i,
    body.light .mobile-app-nav-item--primary.is-active i {
        color: #ffffff !important;
        background: #007b98 !important;
        border-color: #007b98 !important;
    }

    body.light :is(.mobile-more-links a, .mobile-more-links button, .mobile-more-logout button, .mobile-more-close, .mobile-more-languages a) {
        color: #4f4784 !important;
        background: #f7f3ff !important;
        border-color: #d7d1e9 !important;
    }

    body.light :is(.mobile-more-links i, .mobile-more-logout i, .mobile-more-languages > span) {
        color: #007b98 !important;
    }

    body.light .mobile-more-languages a.is-active {
        color: #ffffff !important;
        background: #007b98 !important;
        border-color: #007b98 !important;
    }

    body.light .story-mobile-nav { background: #f6f4fc !important; }
    body.light .story-mobile-nav :is(button, a) {
        color: #4f4784 !important;
        background: #fbfaff !important;
        border-color: #d7d1e9 !important;
    }
    body.light .story-mobile-nav button[aria-pressed="true"] {
        color: #007b98 !important;
        background: #d9f5fb !important;
        border-color: #b99be9 !important;
    }

    body.light.dashboard-page .hero-mobile {
        color: #625d83 !important;
        background:
            url('/images/gamification/story-backdrop-light.svg') right -5rem top 32rem / min(35rem, 100vw) auto no-repeat,
            linear-gradient(180deg, transparent 0, transparent 13rem, #f6f4fc 38rem, #f6f4fc 100%),
            var(--hero-location-image) center top / 100% auto no-repeat,
            #f6f4fc !important;
    }

    body.light.dashboard-page .hero-mobile::before {
        background: linear-gradient(180deg, rgba(2, 12, 23, .48), rgba(2, 12, 23, .25) 35%, #f6f4fc 100%) !important;
    }

    body.light .hero-mobile-header h1,
    body.light .hero-mobile-card strong {
        color: #fff9ec !important;
    }

    body.light .hero-mobile-section-heading h2 { color: #625d83 !important; }
    body.light .hero-mobile-section-heading > span { color: #746f94 !important; }
    body.light .hero-mobile-stat,
    body.light .hero-mobile-edit,
    body.light .hero-mobile-destination-grid a {
        color: #625d83 !important;
        background: #fbfaff !important;
        border-color: #d7d1e9 !important;
        box-shadow: 0 8px 20px rgba(45, 67, 91, .06) !important;
    }

    body.light .hero-mobile-stat strong,
    body.light .hero-mobile-edit,
    body.light .hero-mobile-destination-grid a { color: #625d83 !important; }
    body.light .hero-mobile-stat--strength { --stat-color: #936c30; }
    body.light .hero-mobile-stat--endurance { --stat-color: #397d68; }
    body.light .hero-mobile-stat--resilience { --stat-color: #457d9a; }
    body.light .hero-mobile-stat--agility { --stat-color: #705098; }
    body.light .hero-mobile-stat--flexibility { --stat-color: #a1537b; }
    body.light .hero-mobile-edit > i { color: #007b98 !important; }
    body.light .hero-mobile-destination-grid a > i { color: #007b98 !important; }
}

/* Pastel GameGym accents for the light theme. */
body.light :is(.neon-button, .gg-button-primary, .gg-home-primary-button, button[type="submit"].bg-gradient-to-r, a.bg-gradient-to-r) {
    color: var(--gg-text) !important;
    background: linear-gradient(120deg, #e8d5fa, #d9f5fb 56%, #e7e0fa) !important;
    border-color: #b8c9e5 !important;
    box-shadow: 0 8px 18px rgba(82, 114, 155, .14) !important;
}

body.light :is(.neon-button, .gg-button-primary, .gg-home-primary-button, button[type="submit"].bg-gradient-to-r, a.bg-gradient-to-r):hover {
    background: linear-gradient(120deg, #ddc4f6, #c7eff8 56%, #d9cdf5) !important;
    border-color: #a7bcde !important;
}

body.light :is([class~="bg-cyan-500"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-emerald-600"], [class~="bg-green-600"], [class~="bg-red-600"]):is(a, button) {
    color: var(--gg-text) !important;
    border-color: var(--gg-border) !important;
    background-image: none !important;
}
body.light :is([class~="bg-cyan-500"]):is(a, button) { background-color: #d9f5fb !important; }
body.light :is([class~="bg-purple-700"], [class~="bg-purple-800"]):is(a, button) { background-color: #eee1fb !important; }
body.light :is([class~="bg-emerald-600"], [class~="bg-green-600"]):is(a, button) { background-color: #dcf4ea !important; }
body.light :is([class~="bg-red-600"]):is(a, button) { background-color: #fbe2ee !important; }

body.light .quest-card {
    background: linear-gradient(145deg, #f1e9fc, #fbfaff) !important;
}
body.light .artifact-card {
    background: linear-gradient(145deg, #fff2d8, #fbfaff) !important;
}
body.light .nutrition-card {
    background: linear-gradient(145deg, #e6f7f1, #fbfaff) !important;
}
body.light .activity-card {
    background: linear-gradient(145deg, #e2f7fb, #fbfaff) !important;
}

body.light .hero-home-intro,
body.light .dashboard-desktop-main .character-card {
    color: var(--gg-text) !important;
    background:
        linear-gradient(90deg, rgba(231, 243, 255, .94), rgba(238, 232, 251, .77)),
        var(--hero-location-image) center / cover !important;
    border-color: #c6a5e6 !important;
}
body.light .hero-home-intro :is(h1, p),
body.light .dashboard-desktop-main .character-card :is(.character-title, .character-name, .character-eyebrow) {
    color: var(--gg-text) !important;
}

@media (min-width: 769px) {
    body.light .site-header.neon-header {
        border-color: var(--gg-border) !important;
        background:
            linear-gradient(180deg, rgba(243, 241, 255, .9), rgba(243, 241, 255, .76) 48%, rgba(239, 234, 251, .94)),
            url('/images/brand/gamegym-header-heroes.png') center center / cover no-repeat,
            var(--gg-bg) !important;
        box-shadow: var(--gg-shadow) !important;
    }
    body.light .site-header.neon-header :is(.brand-kicker, .header-tagline) {
        color: #007b98 !important;
    }
}

@media (max-width: 767px) {
    body.light.dashboard-page .hero-mobile::before {
        background: linear-gradient(180deg, rgba(225, 238, 255, .52), rgba(231, 243, 255, .36) 35%, #f6f4fc 100%) !important;
    }
    body.light .hero-mobile-header h1,
    body.light .hero-mobile-card strong {
        color: var(--gg-text) !important;
    }
    body.light .mobile-app-nav-item--primary i,
    body.light .mobile-app-nav-item--primary.is-active i {
        color: var(--gg-text) !important;
        background: #c6edf5 !important;
        border-color: #a9d7e8 !important;
    }
    body.light .mobile-more-languages a.is-active {
        color: var(--gg-text) !important;
        background: #d8c4f0 !important;
        border-color: #c4afe1 !important;
    }
}

/* Light theme surfaces and accents shared by product sections. */
body.light:is(.app-shell, .activity-shell, .nutrition-shell, .analytics-shell, .online-shell) {
    background:
        radial-gradient(circle at 82% 8%, rgba(var(--gg-primary-rgb), .09), transparent 28rem),
        radial-gradient(circle at 8% 45%, rgba(var(--gg-secondary-rgb), .08), transparent 30rem),
        linear-gradient(155deg, #faf9ff, #f1efff 55%, #eeecfb) !important;
}

body.light .hero-bg {
    background: linear-gradient(145deg, #faf9ff, #eeebff) !important;
}

body.light :is(
    .neon-card, .neon-panel, .neon-hero, .dashboard-surface,
    .dashboard-deep, .dashboard-soft, .workout-card, .stat-card,
    .training-metric-card, .activity-card, .nutrition-card, .online-card,
    .inventory-card, .item-card, .reward-card, .reward-shelf,
    .guild-panel, .admin-panel, .admin-sidebar, .chart-panel,
    .exercise-catalog-card, .profile-card, .health-card, .quest-card,
    .artifact-card, .gamification-card
) {
    background: linear-gradient(145deg, #ffffff, #f7f3ff) !important;
    border-color: #d4cce8 !important;
    box-shadow: 0 12px 30px rgba(62, 42, 118, .09) !important;
}

body.light :is(.neon-button, .gg-button-primary, .gg-home-primary-button, button[type="submit"].bg-gradient-to-r, a.bg-gradient-to-r) {
    color: #ffffff !important;
    background: linear-gradient(115deg, #8d59b4, #8052a9) !important;
    border-color: #8d70ae !important;
    box-shadow: 0 7px 18px rgba(108, 29, 183, .22) !important;
}

body.light :is(.neon-button, .gg-button-primary, .gg-home-primary-button, button[type="submit"].bg-gradient-to-r, a.bg-gradient-to-r):hover {
    background: linear-gradient(115deg, #8050a9, #70449a) !important;
    border-color: #705098 !important;
}

body.light :is(.gg-button-secondary, .section-links a) {
    color: #625d83 !important;
    background: linear-gradient(140deg, #ffffff, #eee7fc) !important;
    border-color: #bfa6ef !important;
    box-shadow: 0 5px 14px rgba(86, 62, 147, .11) !important;
}
body.light .section-links a:nth-child(4n + 1) {
    background: linear-gradient(140deg, #ffffff, #d9f5fb) !important;
    border-color: #69d5e9 !important;
}
body.light .section-links a i { color: #705098 !important; }
body.light .section-links a:nth-child(4n + 1) i { color: #007b98 !important; }
body.light .section-links a:hover,
body.light .section-links a:focus-visible {
    border-color: #7927c7 !important;
    background: #e9ddfb !important;
}

body.light :is(input, select, textarea, .neon-input, .period-select, .activity-input, .nutrition-input, .guild-input, .admin-input) {
    color: #625d83 !important;
    background: #ffffff !important;
    border-color: #d4cce8 !important;
}
body.light :is(input, select, textarea, .neon-input):focus-visible {
    border-color: #7927c7 !important;
    box-shadow: 0 0 0 3px rgba(121, 39, 199, .14) !important;
}

body.light .site-header.neon-header,
body.light .site-header .nav-menu-panel,
body.light .site-header .language-menu {
    color: #625d83 !important;
    background: linear-gradient(110deg, #ffffff, #f1ecff) !important;
    border-color: #d4cce8 !important;
    box-shadow: 0 10px 28px rgba(62, 42, 118, .12) !important;
}
body.light .site-header :is(.site-nav a, .site-nav button, .nav-menu summary, .pwa-install-button, .theme-toggle, .language-switcher summary) {
    color: #4f4784 !important;
    background: #f5f0ff !important;
    border-color: #d4cce8 !important;
}
body.light .site-header :is(.site-nav a, .site-nav button, .nav-menu summary):hover,
body.light .site-header :is(.nav-menu.is-current > summary, .nav-menu-panel a.is-active) {
    color: #681caf !important;
    background: #e8ddfa !important;
    border-color: #b99be9 !important;
}
body.light .product-breadcrumbs a { color: #746f94 !important; }
body.light .product-breadcrumbs [aria-current] { color: #6b1eaf !important; }

@media (min-width: 769px) {
    body.light .site-header.neon-header {
        background:
            linear-gradient(180deg, rgba(250, 248, 255, .9), rgba(241, 237, 255, .77) 48%, rgba(239, 234, 251, .94)),
            url('/images/brand/gamegym-header-heroes.png') center center / cover no-repeat,
            #f6f4fc !important;
    }
    body.light .site-header.neon-header :is(.brand-kicker, .header-tagline) { color: #5d5297 !important; }
}

@media (max-width: 767px) {
    body.light .mobile-app-topbar {
        color: #625d83 !important;
        background: linear-gradient(100deg, #ffffff, #f1ecff 70%, #e8e4fa) !important;
        border-color: #d4cce8 !important;
        box-shadow: 0 3px 15px rgba(71, 47, 130, .1) !important;
    }
    body.light .mobile-app-nav {
        color: #625d83 !important;
        background: rgba(250, 249, 255, .97) !important;
        border-color: #d4cce8 !important;
        box-shadow: 0 -8px 28px rgba(71, 47, 130, .14) !important;
    }
    body.light .mobile-app-nav-item,
    body.light .mobile-app-nav-item:visited { color: #746f94 !important; }
    body.light .mobile-app-nav-item.is-active,
    body.light .mobile-app-nav-item[aria-expanded="true"] {
        color: #625d83 !important;
        background: linear-gradient(145deg, #e4faff, #b8edf6) !important;
        box-shadow: inset 0 0 0 1px #5bd4e9, 0 5px 14px rgba(0, 139, 168, .16) !important;
    }
    body.light .mobile-app-nav-item.is-active::before,
    body.light .mobile-app-nav-item[aria-expanded="true"]::before {
        background: #00b8d4 !important;
        box-shadow: 0 0 9px rgba(0, 184, 212, .45) !important;
    }
    body.light .mobile-app-nav-item--primary i,
    body.light .mobile-app-nav-item--primary.is-active i {
        color: #007b98 !important;
        background: #d4f6fb !important;
        border-color: #69d5e9 !important;
    }
    body.light .mobile-section-location strong { color: #625d83 !important; }
    body.light .mobile-section-location nav a { color: #746f94 !important; }
    body.light .mobile-section-location nav [aria-current] { color: #705098 !important; }
    body.light .mobile-section-menu summary {
        color: #705098 !important;
        background: #f5eeff !important;
        border-color: #ba9ce9 !important;
        box-shadow: 0 0 9px rgba(121, 39, 199, .18) !important;
    }
    body.light .mobile-section-menu-panel,
    body.light .mobile-more-sheet[open] {
        color: #625d83 !important;
        background: linear-gradient(155deg, #ffffff, #f0ecff) !important;
        border-color: #bda8e9 !important;
        box-shadow: 0 15px 35px rgba(58, 37, 105, .2) !important;
    }
    body.light .mobile-section-menu-group h2 { color: #007b98 !important; }
    body.light .mobile-section-menu-group h2::after { background: #d4cdef !important; }
    body.light .mobile-section-menu-grid a {
        color: #625d83 !important;
        background: linear-gradient(145deg, #ffffff, #f5f0ff) !important;
        border-color: #d4cce8 !important;
    }
    body.light .mobile-section-menu-grid a:hover,
    body.light .mobile-section-menu-grid a[aria-current='page'] {
        background: #e5f8fc !important;
        border-color: #5ccfe5 !important;
    }
    body.light .mobile-section-menu-grid a > i:first-child { color: #705098 !important; }
    body.light .mobile-section-menu-grid a > i:last-child { color: #007b98 !important; }
    body.light .mobile-more-heading h2 { color: #625d83 !important; }
    body.light .mobile-more-heading span,
    body.light .mobile-more-content h3 { color: #705098 !important; }
    body.light :is(.mobile-more-links a, .mobile-more-links button, .mobile-more-logout button, .mobile-more-close, .mobile-more-languages a) {
        color: #4f4784 !important;
        background: #f7f3ff !important;
        border-color: #d4cce8 !important;
    }
}

/* Section accents use the same base palette with a restrained tint. */
body.light .quest-card { background: linear-gradient(145deg, #ffffff, #f0e8fc) !important; }
body.light .artifact-card { background: linear-gradient(145deg, #ffffff, #fff1e2) !important; }
body.light .nutrition-card { background: linear-gradient(145deg, #ffffff, #e8f8f3) !important; }
body.light .activity-card { background: linear-gradient(145deg, #ffffff, #e6f8fc) !important; }
body.light .training-metric-card { background: linear-gradient(145deg, #ffffff, #f0ecff) !important; }
body.light .hero-home-intro,
body.light .dashboard-desktop-main .character-card {
    background:
        linear-gradient(90deg, rgba(247, 243, 255, .94), rgba(238, 231, 253, .77)),
        var(--hero-location-image) center / cover !important;
}
@media (max-width: 767px) {
    body.light.dashboard-page .hero-mobile::before {
        background: linear-gradient(180deg, rgba(242, 235, 255, .52), rgba(243, 241, 255, .36) 35%, #f6f4fc 100%) !important;
    }
}

body.light :is(.raid-counter-card, .weekly-flame-card, .analytics-panel, .admin-check-option) {
    color: #625d83 !important;
    background: linear-gradient(145deg, #ffffff, #f7f3ff) !important;
    border-color: #d4cce8 !important;
    box-shadow: 0 12px 30px rgba(62, 42, 118, .09) !important;
}
body.light .item-card {
    background: linear-gradient(145deg, #ffffff, #e9f8fc) !important;
}
body.light :is(.item-image, .character-portrait, .custom-avatar-preview) {
    background: linear-gradient(180deg, #ffffff, #eee9fb) !important;
    border-color: #d4cce8 !important;
}
body.light .health-doctor-note {
    color: #007b98 !important;
    background: linear-gradient(145deg, #ffffff, #e7f8fc) !important;
    border-color: #8ddce9 !important;
}

/* Show the hero artwork at its natural brightness in the light theme. */
@media (max-width: 767px) {
    body.light.dashboard-page .hero-mobile::before {
        top: calc(max(22px, env(safe-area-inset-top)) + 143px);
        height: 340px;
        background: var(--hero-location-image) center / cover no-repeat !important;
    }
    body.light.dashboard-page .hero-mobile-header {
        background: none !important;
    }
    body.light.dashboard-page .hero-mobile-header h1 { color: #fff8ef !important; text-shadow: 0 2px 10px rgba(5, 9, 22, .8) !important; }
    body.light.dashboard-page .hero-mobile-kicker { color: #bcecf0 !important; }
    body.light.dashboard-page .hero-mobile-location { color: #f3d6ad !important; text-shadow: 0 2px 7px rgba(5, 9, 22, .85) !important; }
    body.light.dashboard-page .hero-mobile-notifications { color: #f5efff !important; text-shadow: 0 2px 7px rgba(5, 9, 22, .75) !important; }
    body.light.dashboard-page .hero-mobile-card {
        background: var(--hero-location-image) center / cover !important;
        border-color: #c8b9d9 !important;
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 4px rgba(197, 180, 219, .5), 0 18px 36px rgba(56, 43, 92, .13) !important;
    }
    body.light.dashboard-page .hero-mobile-card::after { border-color: rgba(189, 167, 212, .6) !important; }
    body.light.dashboard-page .hero-mobile-portrait { background: transparent !important; }
    body.light.dashboard-page .hero-mobile-identity {
        background: none !important;
        text-shadow: 0 2px 9px rgba(5, 9, 22, .8) !important;
    }
    body.light.dashboard-page .hero-mobile-name,
    body.light.dashboard-page .hero-mobile-card strong { color: #fff8ef !important; }
    body.light.dashboard-page .hero-mobile-class {
        color: #f6ddb1 !important;
        background: rgba(17, 24, 43, .78) !important;
        border-color: rgba(240, 198, 125, .75) !important;
    }
    body.light.dashboard-page .hero-mobile-level { color: #f8ddb4 !important; }
    body.light.dashboard-page .hero-mobile-xp { color: #c5e6f7 !important; }
    body.light.dashboard-page .hero-mobile-gold { color: #f7d49a !important; }
    body.light.dashboard-page .hero-mobile-gold strong { color: #fff4dc !important; }
    body.light.story-page #story-plot.location-story {
        color: #625d83 !important;
        background: linear-gradient(155deg, #f2eef7, #eae5f2) !important;
        border-color: #d0c3dd !important;
        box-shadow: 0 12px 30px rgba(71, 53, 111, .12) !important;
    }
    body.light.story-page #story-plot .location-story-art {
        background: transparent !important;
        border-color: #d7c9df !important;
    }
    body.light.story-page #story-plot .neon-card {
        background: #fcfafd !important;
        border-color: #e2d9ec !important;
    }
    body.light.story-page #story-plot .location-story-arrow {
        color: #816b91 !important;
        background: #fcfafd !important;
        border-color: #d8c9e0 !important;
    }
}
/* Keep the original illustrated header on desktop in the light theme. */
@media (min-width: 768px) {
    body.light:is(.app-shell, .analytics-shell, .activity-shell, .nutrition-shell, .online-shell) .site-header.neon-header {
        background:
            linear-gradient(180deg, rgba(2, 3, 17, .08) 0%, rgba(2, 3, 17, .12) 48%, rgba(2, 3, 17, .75) 100%),
            url('/images/brand/gamegym-header-heroes.png') center center / cover no-repeat,
            #030718 !important;
        border-color: rgba(26, 181, 221, .48) !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .38) !important;
    }
    body.light:is(.app-shell, .analytics-shell, .activity-shell, .nutrition-shell, .online-shell) .site-header.neon-header .brand-kicker {
        color: #99e9f5 !important;
    }
    body.light:is(.app-shell, .analytics-shell, .activity-shell, .nutrition-shell, .online-shell) .site-header.neon-header .header-tagline {
        color: #8adfec !important;
    }
}
/* Keep story illustrations clear and story lettering crisp on desktop. */
@media (min-width: 768px) {
    body.light.dashboard-page .gg-home-location {
        background:
            linear-gradient(0deg, rgba(8, 15, 31, .68), rgba(8, 15, 31, .16) 66%, transparent 100%),
            var(--gg-location-art) center / cover no-repeat,
            #071726 !important;
    }
    body.light.dashboard-page .gg-home-location h2 {
        color: #fff8ee !important;
        text-shadow: 0 1px 3px rgba(3, 8, 20, .85) !important;
    }
    body.light.dashboard-page .gg-home-location .gg-home-kicker { color: #b9eaf0 !important; }
    body.light.dashboard-page .gg-home-location p:last-child { color: #f5e9dc !important; }
    body.light.dashboard-page .gg-home-location p:last-child i { color: #f5cb91 !important; }

    body.light.story-page #story-plot .location-story-art::after {
        background: linear-gradient(0deg, rgba(8, 13, 29, .84), rgba(8, 13, 29, .36) 55%, transparent 100%) !important;
    }
    body.light.story-page #story-plot > .grid > div:last-child > .neon-card {
        color: #f5f0fa !important;
        background: none !important;
        box-shadow: none !important;
    }
    body.light.story-page #story-plot > .grid > div:last-child > p,
    body.light.story-page #story-plot .location-story-slide > p.text-yellow-300 {
        color: #f0c78b !important;
    }
    body.light.story-page #story-plot .location-story-slide h1 {
        color: #fff8ee !important;
        text-shadow: none !important;
    }
    body.light.story-page #story-plot .location-story-slide > p.text-gray-200 {
        color: #ece8f4 !important;
    }
    body.light.story-page #story-plot .location-story-counter { color: #e3ddf1 !important; }
}