/* Background */
.bg-gradient {
    background: linear-gradient(90deg, #2e026d, #312e81, #2e026d);
}

html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 1.25rem;
}

.site-header {
    padding: 1.35rem 1.5rem 1.15rem;
    text-align: center;
    position: relative;
    z-index: 20;
    overflow: visible;
}

.brand-link {
    display: inline-block;
    text-decoration: none;
}

.brand-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    position: relative;
    padding: 0.1rem 0 0.1rem;
}

.neon-header {
    margin: 1rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 16% 20%, rgba(236, 72, 153, 0.12), transparent 18rem),
        linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.15) 52%, rgba(236, 72, 153, 0.09)),
        rgba(5, 10, 28, 0.94);
    border: 1px solid rgba(34, 211, 238, 0.34);
    box-shadow:
        0 24px 72px rgba(0,0,0,0.52),
        0 0 32px rgba(124,58,237,0.14),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
}

.header-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.header-actions .pwa-install-button {
    order: 1;
}

.header-actions .theme-toggle {
    order: 2;
}

.header-actions .language-switcher {
    order: 3;
}

.pwa-install-button,
.theme-toggle,
.language-switcher summary {
    min-height: 44px;
    border: 1px solid rgba(34, 211, 238, 0.46);
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(124, 58, 237, 0.18)),
        rgba(5, 10, 28, 0.92) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.14), 0 0 16px rgba(168, 85, 247, 0.14);
}

.pwa-install-button {
    white-space: nowrap;
}

@media (display-mode: standalone),
       (display-mode: fullscreen),
       (display-mode: minimal-ui) {
    .pwa-install-button {
        display: none !important;
    }
}

.language-switcher {
    position: relative;
}

.language-switcher summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 4.25rem;
    padding: 0.5rem 0.85rem;
    color: #e0f2fe;
    cursor: pointer;
    list-style: none;
}

.language-switcher summary::-webkit-details-marker {
    display: none;
}

.language-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 9rem;
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(5, 10, 28, 0.98), rgba(13, 9, 34, 0.96));
    border: 1px solid rgba(34, 211, 238, 0.28);
    box-shadow: 0 22px 48px rgba(0,0,0,0.42), 0 0 24px rgba(34,211,238,0.08);
    backdrop-filter: blur(14px);
}

.language-menu a {
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    color: #e0f2fe;
    text-align: left;
}

.language-menu a:hover,
.language-menu a.is-active {
    color: #ffffff;
    background: rgba(34, 211, 238, 0.12);
}

.alpha-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: #fde68a;
    font-weight: 800;
    letter-spacing: 0.01em;
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(236, 72, 153, 0.12)),
        rgba(5, 10, 28, 0.92);
    border: 1px solid rgba(251, 191, 36, 0.42);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), 0 0 16px rgba(236, 72, 153, 0.1);
}

.alpha-badge i {
    font-size: 0.92rem;
}

.app-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 8%, rgba(124, 58, 237, 0.32), transparent 28rem),
        radial-gradient(circle at 90% 10%, rgba(6, 182, 212, 0.21), transparent 27rem),
        radial-gradient(circle at 48% 105%, rgba(236, 72, 153, 0.19), transparent 30rem),
        linear-gradient(135deg, #050816 0%, #08051b 46%, #071022 100%);
}

.neon-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 16rem),
        linear-gradient(145deg, rgba(13, 18, 40, 0.96), rgba(5, 10, 28, 0.92));
    border: 1px solid rgba(34, 211, 238, 0.25);
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.07),
        0 22px 62px rgba(0,0,0,0.48),
        0 0 24px rgba(34,211,238,0.05),
        inset 0 1px 0 rgba(255,255,255,0.07);
    backdrop-filter: blur(14px);
}

.neon-card:hover {
    border-color: rgba(34, 211, 238, 0.52);
    box-shadow: 0 0 24px rgba(34,211,238,0.12), 0 24px 64px rgba(0,0,0,0.5);
}

.neon-panel {
    background:
        linear-gradient(145deg, rgba(5, 10, 28, 0.88), rgba(13, 9, 34, 0.8));
    border: 1px solid rgba(168, 85, 247, 0.23);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 20px rgba(124,58,237,0.06);
}

.neon-hero {
    background:
        radial-gradient(circle at top left, rgba(34,211,238,0.2), transparent 22rem),
        radial-gradient(circle at 78% 10%, rgba(236,72,153,0.12), transparent 20rem),
        linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(5, 10, 28, 0.88) 54%, rgba(236, 72, 153, 0.11)),
        rgba(5, 10, 28, 0.94);
    border: 1px solid rgba(34, 211, 238, 0.32);
    box-shadow: 0 28px 74px rgba(0,0,0,0.5), 0 0 34px rgba(168,85,247,0.12);
    backdrop-filter: blur(16px);
}

.neon-button {
    background-image: linear-gradient(90deg, #166534, #16a34a 52%, #65a30d);
    color: #ffffff !important;
    border: 1px solid rgba(134, 239, 172, 0.24);
    box-shadow:
        0 0 12px rgba(34, 197, 94, 0.2),
        0 10px 24px rgba(21, 128, 61, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.neon-button:hover {
    background-image: linear-gradient(90deg, #14532d, #15803d 48%, #4d7c0f);
    box-shadow:
        0 0 16px rgba(34, 197, 94, 0.26),
        0 12px 28px rgba(21, 128, 61, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.neon-input {
    background:
        linear-gradient(145deg, rgba(5, 10, 28, 0.92), rgba(13, 9, 34, 0.86)) !important;
    border-color: rgba(34, 211, 238, 0.28) !important;
}

.neon-input:focus {
    border-color: rgba(34, 211, 238, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

/* Icon container */
.icon-wrapper {
    position: relative;
    display: inline-block;
    width: clamp(172px, 22vw, 250px);
    margin-inline: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.icon-wrapper::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    background:
        radial-gradient(circle at 30% 50%, rgba(236, 72, 153, 0.22), transparent 48%),
        radial-gradient(circle at 72% 50%, rgba(34, 211, 238, 0.22), transparent 48%);
    filter: blur(24px);
    opacity: 0.95;
    z-index: -1;
}

.icon-wrapper::after {
    content: none;
}

/* Icon */
.logo-icon {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
    clip-path: none;
    opacity: 1;
    transform: translateZ(0);
    filter:
        drop-shadow(0 18px 32px rgba(0, 0, 0, 0.44))
        drop-shadow(0 0 34px rgba(236, 72, 153, 0.14))
        drop-shadow(0 0 38px rgba(34, 211, 238, 0.16));
    transition: transform 0.24s ease, filter 0.24s ease;
}

.site-header a:hover .logo-icon,
.site-header a:focus-visible .logo-icon {
    transform: scale(1.018);
    filter:
        drop-shadow(0 22px 36px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 46px rgba(236, 72, 153, 0.18))
        drop-shadow(0 0 48px rgba(34, 211, 238, 0.2));
}

.brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    position: relative;
    z-index: 2;
}

.brand-kicker {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, 0.78);
}

.brand-name {
    font-size: clamp(1.8rem, 3.4vw, 2.85rem);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f8fafc;
    text-shadow:
        0 0 18px rgba(34, 211, 238, 0.24),
        0 0 24px rgba(236, 72, 153, 0.2);
    background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 52%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-tagline {
    max-width: 44rem;
    margin: 0.45rem auto 0;
    color: #dbeafe;
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1.45;
    text-wrap: balance;
}

body.light .icon-wrapper {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.light .icon-wrapper::before {
    inset: 14% 12%;
    background:
        radial-gradient(circle at 32% 50%, rgba(219, 39, 119, 0.16), transparent 44%),
        radial-gradient(circle at 70% 48%, rgba(37, 99, 235, 0.16), transparent 44%);
    filter: blur(18px);
}

body.light .logo-icon {
    filter:
        drop-shadow(0 16px 26px rgba(15, 23, 42, 0.16))
        drop-shadow(0 0 20px rgba(219, 39, 119, 0.1))
        drop-shadow(0 0 20px rgba(37, 99, 235, 0.1));
}

body.light .brand-kicker {
    color: rgba(30, 41, 59, 0.78);
}

body.light .brand-name {
    text-shadow: none;
    background: linear-gradient(135deg, #7c3aed 0%, #0891b2 52%, #db2777 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 6px 16px rgba(255, 255, 255, 0.38));
}

body.light .header-tagline {
    color: #334155;
}

body.light .site-header a:hover .logo-icon,
body.light .site-header a:focus-visible .logo-icon {
    filter:
        drop-shadow(0 18px 30px rgba(15, 23, 42, 0.18))
        drop-shadow(0 0 26px rgba(219, 39, 119, 0.12))
        drop-shadow(0 0 26px rgba(37, 99, 235, 0.12));
}

@media (max-width: 768px) {
    .site-header {
        padding: 1rem 0.95rem 1rem;
    }

    .neon-header {
        margin: 0.7rem;
        border-radius: 1.25rem;
    }

    .alpha-badge,
    .header-actions {
        position: static;
    }

    .alpha-badge {
        margin: 0 auto 0.85rem;
        width: fit-content;
        max-width: 100%;
    }

    .header-actions {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 0.65rem;
        margin: 0 auto 0.7rem;
    }

    .pwa-install-button,
    .theme-toggle,
    .language-switcher summary {
        min-height: 40px;
        padding-inline: 0.85rem;
    }

    .language-menu {
        right: 50%;
        transform: translateX(50%);
        min-width: min(12rem, calc(100vw - 2.4rem));
    }

    .brand-stack {
        gap: 0.4rem;
        margin-top: 0.2rem;
    }

    .icon-wrapper {
        width: clamp(170px, 52vw, 220px);
    }

    .brand-name {
        font-size: clamp(1.95rem, 9vw, 2.6rem);
        letter-spacing: 0.04em;
    }

    .brand-kicker {
        letter-spacing: 0.2em;
        font-size: 0.58rem;
    }

    .header-tagline {
        max-width: 28rem;
        font-size: 0.9rem;
        line-height: 1.38;
        margin-top: 0.45rem;
        padding-inline: 0.35rem;
    }

    .site-nav {
        gap: 0.6rem;
        margin-top: 0.8rem;
    }

    .site-nav a,
    .site-nav button,
    .nav-menu summary {
        width: 100%;
        max-width: 22rem;
        min-height: 2.8rem;
        padding: 0.7rem 1rem;
    }

    .nav-menu {
        width: min(100%, 22rem);
    }

    .nav-menu-panel {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        min-width: 100%;
        margin-top: 0.55rem;
        box-shadow: 0 16px 34px rgba(0,0,0,0.32), 0 0 18px rgba(34,211,238,0.06);
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: 0.9rem 0.8rem 0.95rem;
    }

    .alpha-badge {
        min-height: 40px;
        padding: 0.45rem 0.85rem;
        font-size: 0.82rem;
    }

    .header-actions {
        gap: 0.55rem;
        margin-bottom: 0.6rem;
    }

    .icon-wrapper {
        width: min(56vw, 210px);
        margin-bottom: -0.35rem;
    }

    .icon-wrapper::before {
        inset: 12% 10%;
        filter: blur(18px);
    }

    .brand-kicker {
        font-size: 0.6rem;
        letter-spacing: 0.18em;
    }

    .brand-name {
        font-size: clamp(1.72rem, 9.6vw, 2.25rem);
    }

    .header-tagline {
        font-size: 0.86rem;
    }

    .site-nav a,
    .site-nav button,
    .nav-menu summary {
        min-height: 2.7rem;
        font-size: 0.95rem;
    }
}

.site-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    z-index: 10;
}

.site-nav a,
.site-nav button,
.nav-menu summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    color: #e0f2fe;
    background:
        linear-gradient(135deg, rgba(6, 182, 212, 0.09), rgba(124, 58, 237, 0.12)),
        rgba(5, 10, 28, 0.74);
    border: 1px solid rgba(34, 211, 238, 0.26);
    transition: all 0.2s ease;
    cursor: pointer;
    font: inherit;
}

.site-nav a:hover,
.site-nav button:hover,
.nav-menu summary:hover {
    color: #ffffff;
    border-color: rgba(34, 211, 238, 0.52);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.13), 0 0 16px rgba(168, 85, 247, 0.09);
    transform: translateY(-1px);
}

.nav-menu {
    position: relative;
}

.nav-menu summary {
    list-style: none;
}

.nav-menu summary::-webkit-details-marker {
    display: none;
}

.nav-menu summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.68rem;
    opacity: 0.72;
    transition: transform 0.2s ease;
}

.nav-menu[open] summary::after {
    transform: rotate(180deg);
}

.nav-menu-panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 50%;
    min-width: 14rem;
    padding: 0.6rem;
    display: grid;
    gap: 0.45rem;
    transform: translateX(-50%);
    border-radius: 1.15rem;
    background:
        linear-gradient(145deg, rgba(5, 10, 28, 0.98), rgba(13, 9, 34, 0.96));
    border: 1px solid rgba(34, 211, 238, 0.28);
    box-shadow: 0 22px 48px rgba(0,0,0,0.42), 0 0 24px rgba(34,211,238,0.08);
    backdrop-filter: blur(14px);
}

.nav-menu-panel a,
.nav-menu-panel button {
    width: 100%;
    justify-content: flex-start;
    border-radius: 0.85rem;
    text-align: left;
}

.nav-menu-panel form {
    margin: 0;
}

.nav-menu-workouts .nav-menu-panel {
    min-width: 22rem;
}

.nav-menu-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) 1px minmax(0, 0.85fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 0.85rem;
    background: rgba(5, 10, 28, 0.7);
}

.nav-menu-panel .nav-menu-tab {
    width: auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    white-space: nowrap;
}

.nav-menu-panel .nav-menu-tab:hover,
.nav-menu-panel .nav-menu-tab.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(124, 58, 237, 0.24));
    box-shadow: inset 0 0 16px rgba(34, 211, 238, 0.08);
    transform: none;
}

.nav-menu-tabs-divider {
    width: 1px;
    margin: 0.65rem 0;
    background: rgba(125, 211, 252, 0.45);
}

.nav-locked-link {
    justify-content: space-between !important;
}

.nav-locked-link i {
    font-size: 0.85rem;
    opacity: 0.78;
}

.gamification-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(3, 7, 18, 0.76);
    backdrop-filter: blur(10px);
}

.gamification-lock-overlay[hidden] {
    display: none;
}

.gamification-lock-modal {
    width: min(100%, 30rem);
    padding: 1.6rem;
    border-radius: 1.5rem;
    color: #e0f2fe;
    text-align: center;
    background:
        radial-gradient(circle at 22% 0%, rgba(34, 211, 238, 0.18), transparent 12rem),
        linear-gradient(145deg, rgba(5, 10, 28, 0.98), rgba(13, 9, 34, 0.96));
    border: 1px solid rgba(34, 211, 238, 0.34);
    box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 32px rgba(168,85,247,0.12);
}

.gamification-lock-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    margin: 0 auto 0.9rem;
    border-radius: 1.1rem;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(124,58,237,0.92), rgba(6,182,212,0.78));
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.18);
}

.gamification-lock-kicker {
    color: #67e8f9;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.gamification-lock-modal h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 7vw, 2.45rem);
    font-weight: 800;
}

.gamification-lock-modal p:not(.gamification-lock-kicker) {
    margin: 0;
    color: #94a3b8;
    line-height: 1.55;
}

.gamification-lock-close {
    width: 100%;
    margin-top: 1.15rem;
    min-height: 2.75rem;
    border-radius: 1rem;
    color: #ffffff;
    font-weight: 800;
    background-image: linear-gradient(90deg, #166534, #16a34a 52%, #65a30d);
    border: 1px solid rgba(134, 239, 172, 0.24);
    cursor: pointer;
}

.achievement-unlock-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(3, 7, 18, 0.76);
    backdrop-filter: blur(10px);
}

.achievement-unlock-modal {
    width: min(100%, 34rem);
    max-height: min(86vh, 42rem);
    overflow: auto;
    padding: 1.5rem;
    border-radius: 1.5rem;
    color: #e0f2fe;
    background:
        radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.18), transparent 12rem),
        linear-gradient(145deg, rgba(5, 10, 28, 0.98), rgba(13, 9, 34, 0.96));
    border: 1px solid rgba(34, 211, 238, 0.34);
    box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 32px rgba(168,85,247,0.12);
}

.achievement-unlock-kicker {
    color: #67e8f9;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.achievement-unlock-modal h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 7vw, 2.6rem);
    font-weight: 800;
}

.achievement-unlock-list {
    display: grid;
    gap: 0.75rem;
}

.achievement-unlock-item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(34, 211, 238, 0.18);
}

.achievement-unlock-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 0.85rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(124,58,237,0.92), rgba(6,182,212,0.78));
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
}

.achievement-unlock-item strong,
.achievement-unlock-item small {
    display: block;
}

.achievement-unlock-item small {
    margin-top: 0.2rem;
    color: #94a3b8;
    line-height: 1.4;
}

.achievement-unlock-close {
    width: 100%;
    margin-top: 1rem;
    min-height: 2.75rem;
    border-radius: 1rem;
    color: #ffffff;
    font-weight: 800;
    background-image: linear-gradient(90deg, #166534, #16a34a 52%, #65a30d);
    border: 1px solid rgba(134, 239, 172, 0.24);
    cursor: pointer;
}

body.light {
    background: #fff5fb !important;
    color: #1f1646 !important;
}

body.light.app-shell {
    background:
        radial-gradient(circle at 12% 8%, rgba(124, 58, 237, 0.17), transparent 26rem),
        radial-gradient(circle at 88% 10%, rgba(6, 182, 212, 0.14), transparent 25rem),
        radial-gradient(circle at 50% 105%, rgba(236, 72, 153, 0.12), transparent 27rem),
        linear-gradient(135deg, #fff5fb 0%, #eaf8ff 46%, #fff7ed 100%) !important;
}

body.light .neon-card,
body.light .neon-panel,
body.light .neon-hero {
    background:
        radial-gradient(circle at 0% 0%, rgba(34,211,238,0.1), transparent 16rem),
        linear-gradient(145deg, rgba(255,255,255,0.94), rgba(238,242,255,0.78) 56%, rgba(252,231,243,0.58)) !important;
    border-color: rgba(124,58,237,0.18) !important;
    box-shadow:
        0 18px 46px rgba(79,70,229,0.1),
        0 0 18px rgba(14,165,233,0.06),
        inset 0 1px 0 rgba(255,255,255,0.95);
}

body.light .neon-input {
    background: rgba(255,255,255,0.9) !important;
    color: #1f1646 !important;
    border-color: rgba(124,58,237,0.22) !important;
    box-shadow: 0 8px 20px rgba(79,70,229,0.05);
}

body.light .neon-button {
    color: #ffffff !important;
    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.18),
        0 10px 24px rgba(21, 128, 61, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.light.bg-gradient-to-br {
    background-image: linear-gradient(135deg, #f8fafc, #eef2ff, #fdf2f8) !important;
}

body.light .bg-gradient {
    background: linear-gradient(90deg, #ede9fe, #eef2ff, #fce7f3) !important;
    color: #111827 !important;
}

body.light .neon-header {
    background:
        radial-gradient(circle at 12% 20%, rgba(236,72,153,0.14), transparent 18rem),
        linear-gradient(135deg, rgba(221,214,254,0.82), rgba(207,250,254,0.7), rgba(252,231,243,0.66)),
        rgba(255,255,255,0.88) !important;
    border-color: rgba(14, 165, 233, 0.28);
    box-shadow: 0 18px 48px rgba(79,70,229,0.12), 0 0 24px rgba(14,165,233,0.08);
}

body.light .site-nav a,
body.light .site-nav button,
body.light .nav-menu summary,
body.light .pwa-install-button,
body.light .theme-toggle,
body.light .language-switcher summary {
    color: #312e81 !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(224,242,254,0.7) 52%, rgba(252,231,243,0.64)) !important;
    border-color: rgba(14,165,233,0.28);
    box-shadow: 0 8px 22px rgba(14,165,233,0.08), 0 0 14px rgba(168,85,247,0.06);
}

body.light .nav-menu-panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,242,255,0.94) 56%, rgba(252,231,243,0.9));
    border-color: rgba(14,165,233,0.26);
    box-shadow: 0 18px 42px rgba(79,70,229,0.14), 0 0 18px rgba(14,165,233,0.08);
}

body.light .language-menu {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,242,255,0.94) 56%, rgba(252,231,243,0.9));
    border-color: rgba(14,165,233,0.26);
    box-shadow: 0 18px 42px rgba(79,70,229,0.14), 0 0 18px rgba(14,165,233,0.08);
}

body.light .language-menu a {
    color: #312e81;
}

body.light .language-menu a:hover,
body.light .language-menu a.is-active {
    color: #1e1b4b;
    background: rgba(14, 165, 233, 0.12);
}

body.light .achievement-unlock-overlay {
    background: rgba(248, 250, 252, 0.76);
}

body.light .gamification-lock-overlay {
    background: rgba(248, 250, 252, 0.76);
}

body.light .gamification-lock-modal {
    color: #1f1646;
    background:
        radial-gradient(circle at 20% 0%, rgba(34,211,238,0.12), transparent 12rem),
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,242,255,0.94) 56%, rgba(252,231,243,0.9));
    border-color: rgba(14,165,233,0.26);
}

body.light .gamification-lock-modal p:not(.gamification-lock-kicker) {
    color: #4b5563;
}

body.light .achievement-unlock-modal {
    color: #1f1646;
    background:
        radial-gradient(circle at 20% 0%, rgba(34,211,238,0.12), transparent 12rem),
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,242,255,0.94) 56%, rgba(252,231,243,0.9));
    border-color: rgba(14,165,233,0.26);
}

body.light .achievement-unlock-item {
    background: rgba(255,255,255,0.76);
}

@media (max-width: 640px) {
    .site-header {
        padding: 1.5rem 1rem;
    }

    .site-nav {
        align-items: stretch;
    }

    .nav-menu {
        width: min(100%, 18rem);
    }

    .nav-menu summary {
        width: 100%;
    }

    .nav-menu-panel {
        left: 0;
        right: 0;
        min-width: 0;
        width: 100%;
        transform: none;
    }
}

body.light .bg-gray-900,
body.light .bg-gray-800,
body.light .bg-black {
    background-color: #ffffff !important;
}

body.light .bg-gray-700 {
    background-color: #f3f4f6 !important;
}

body.light .text-white {
    color: #111827 !important;
}

body.light .text-gray-400,
body.light .text-gray-300,
body.light .text-gray-200 {
    color: #4b5563 !important;
}

body.light .border-gray-700,
body.light .border-gray-600 {
    border-color: #d1d5db !important;
}

body.light input,
body.light select,
body.light textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
}

body.light footer {
    background: #ffffff !important;
}

body.light .hero-bg {
    background: linear-gradient(145deg, #ffffff 0%, #eef8fb 56%, #f8f2fa 100%) !important;
}

body.light .hero-bg .bg-gray-900\/90,
body.light .hero-bg .bg-gray-900,
body.light .hero-bg .bg-gray-800 {
    background-color: rgba(255,255,255,0.92) !important;
}

body.light .hero-bg .border-purple-500\/30,
body.light .border-purple-500\/30 {
    border-color: rgba(168,85,247,0.35) !important;
}

body.light .bg-purple-900,
body.light .bg-purple-900\/80,
body.light .from-purple-900,
body.light .to-pink-900 {
    background-color: #ede9fe !important;
}

body.light .bg-gradient-to-br.from-purple-900,
body.light section.bg-gradient-to-br {
    background-image: linear-gradient(135deg, #ede9fe, #fce7f3) !important;
    color: #111827 !important;
}

body.light .text-purple-100,
body.light .text-purple-200 {
    color: #5b21b6 !important;
}

body.light .text-transparent {
    color: transparent !important;
}

body.light .bg-purple-700.text-white,
body.light .bg-purple-800.text-white,
body.light .bg-green-600.text-white,
body.light .bg-emerald-600.text-white,
body.light .bg-red-600.text-white,
body.light .bg-gradient-to-r.text-white,
body.light button.bg-purple-700,
body.light button.bg-purple-800,
body.light button.bg-green-600,
body.light button.bg-emerald-600,
body.light button.bg-red-600 {
    color: #ffffff !important;
}

body.light .bg-gradient-to-r.from-purple-600 {
    background-image: linear-gradient(90deg, #7c3aed, #db2777) !important;
}

body.light .shadow,
body.light .card-hover,
body.light .rounded-lg,
body.light .rounded-2xl,
body.light .rounded-3xl {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

body.light table tr.bg-gray-700,
body.light thead tr {
    background-color: #eef2ff !important;
}

body.light .text-red-200 {
    color: #fee2e2 !important;
}

body.light .bg-red-900 {
    background-color: #7f1d1d !important;
}

body.light,
body.light .app-shell,
body.light.bg-gradient,
body.light .bg-gradient {
    color: #102033 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(14, 165, 233, 0.22), transparent 24rem),
        radial-gradient(circle at 90% 12%, rgba(45, 212, 191, 0.16), transparent 22rem),
        radial-gradient(circle at 48% 110%, rgba(129, 140, 248, 0.12), transparent 28rem),
        linear-gradient(135deg, #eef9ff 0%, #f7fcff 48%, #e8f5ff 100%) !important;
}

body.light .neon-header,
body.light .neon-card,
body.light .neon-panel,
body.light .neon-hero,
body.light .nav-menu-panel,
body.light .dashboard-surface,
body.light .dashboard-deep,
body.light .dashboard-soft,
body.light .workout-card,
body.light .stat-card,
body.light .character-card,
body.light .training-metric-card,
body.light .raid-counter-card,
body.light .gamification-lock-modal,
body.light .achievement-unlock-modal {
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.11), transparent 14rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 249, 255, 0.9)) !important;
    border-color: rgba(14, 165, 233, 0.24) !important;
    color: #102033 !important;
    box-shadow:
        0 18px 46px rgba(14, 116, 144, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body.light .neon-card:hover,
body.light .character-card:hover,
body.light .workout-card:hover {
    border-color: rgba(6, 182, 212, 0.42) !important;
    box-shadow:
        0 22px 54px rgba(14, 116, 144, 0.16),
        0 0 20px rgba(14, 165, 233, 0.12) !important;
}

body.light .pwa-install-button,
body.light .theme-toggle,
body.light .alpha-badge,
body.light .site-nav a,
body.light .site-nav button,
body.light .nav-menu summary {
    color: #075985 !important;
    background:
        linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(224, 242, 254, 0.9)) !important;
    border-color: rgba(14, 165, 233, 0.28) !important;
    box-shadow: 0 10px 24px rgba(14, 116, 144, 0.09) !important;
}

body.light .alpha-badge {
    color: #92400e !important;
    background:
        linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(224, 242, 254, 0.9)) !important;
    border-color: rgba(245, 158, 11, 0.34) !important;
}

body.light .site-nav a:hover,
body.light .site-nav button:hover,
body.light .nav-menu summary:hover {
    color: #0f172a !important;
    border-color: rgba(6, 182, 212, 0.52) !important;
    box-shadow: 0 14px 30px rgba(14, 116, 144, 0.14), 0 0 16px rgba(34, 211, 238, 0.16) !important;
}

body.light .logo-icon {
    box-shadow: none;
    filter:
        drop-shadow(0 16px 26px rgba(15, 23, 42, 0.16))
        drop-shadow(0 0 20px rgba(219, 39, 119, 0.1))
        drop-shadow(0 0 20px rgba(37, 99, 235, 0.1));
}

body.light .bg-gray-900,
body.light .bg-gray-800,
body.light .bg-black {
    background-color: #f4fbff !important;
}

body.light .bg-gray-700,
body.light .bg-gray-600 {
    background-color: #dff3ff !important;
}

body.light .text-white,
body.light .text-gray-100 {
    color: #102033 !important;
}

body.light .text-gray-400,
body.light .text-gray-300,
body.light .text-gray-200,
body.light .text-slate-400,
body.light .text-slate-300 {
    color: #4b6378 !important;
}

body.light .text-cyan-300,
body.light .text-cyan-200,
body.light .text-blue-300,
body.light .text-purple-300,
body.light .text-purple-200,
body.light .text-pink-300,
body.light .text-emerald-300 {
    color: #0369a1 !important;
}

body.light input,
body.light select,
body.light textarea,
body.light .neon-input,
body.light .period-select {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.94)) !important;
    color: #102033 !important;
    border-color: rgba(14, 165, 233, 0.32) !important;
    box-shadow: 0 8px 22px rgba(14, 116, 144, 0.07) !important;
}

body.light input:focus,
body.light select:focus,
body.light textarea:focus,
body.light .neon-input:focus {
    border-color: rgba(6, 182, 212, 0.68) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14) !important;
}

body.light .neon-button,
body.light .bg-gradient-to-r.from-purple-600,
body.light a.bg-gradient-to-r,
body.light button.bg-gradient-to-r {
    color: #ffffff !important;
    background-image: linear-gradient(90deg, #0284c7, #06b6d4 52%, #14b8a6) !important;
    border-color: rgba(14, 165, 233, 0.28) !important;
    box-shadow: 0 12px 28px rgba(14, 116, 144, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.light .bg-purple-900,
body.light .bg-purple-900\/80,
body.light .from-purple-900,
body.light .to-pink-900,
body.light .bg-gradient-to-br.from-purple-900,
body.light section.bg-gradient-to-br {
    background-image: linear-gradient(135deg, #e0f2fe, #f0fdfa) !important;
    background-color: #e0f2fe !important;
    color: #102033 !important;
}

body.light table tr.bg-gray-700,
body.light thead tr,
body.light .heat-legend-row {
    background-color: rgba(224, 242, 254, 0.74) !important;
    border-color: rgba(14, 165, 233, 0.18) !important;
}

body.light footer {
    background:
        linear-gradient(180deg, rgba(240, 249, 255, 0.78), rgba(224, 242, 254, 0.9)) !important;
    border-top: 1px solid rgba(14, 165, 233, 0.18);
}

body.light .neon-header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 249, 255, 0.94)) !important;
}

body.light .neon-card,
body.light .neon-panel,
body.light .neon-hero,
body.light .dashboard-surface,
body.light .dashboard-deep,
body.light .dashboard-soft,
body.light .workout-card,
body.light .stat-card,
body.light .character-card,
body.light .raid-counter-card,
body.light .training-metric-card,
body.light .chart-panel,
body.light .profile-card,
body.light .health-card,
body.light .inventory-card,
body.light .quest-card,
body.light .artifact-card,
body.light .gamification-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 255, 0.95)) !important;
    border: 1px solid rgba(125, 211, 252, 0.36) !important;
    color: #102033 !important;
    box-shadow:
        0 18px 44px rgba(14, 116, 144, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light .dashboard-deep,
body.light .dashboard-soft,
body.light .character-stat-chip,
body.light .nav-menu-panel,
body.light .heat-legend-row {
    background:
        linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(224, 242, 254, 0.86)) !important;
    border-color: rgba(125, 211, 252, 0.32) !important;
}

body.light .character-card::before,
body.light .raid-counter-card::before,
body.light .training-metric-card::before,
body.light .metric-card::before {
    background:
        linear-gradient(rgba(14, 165, 233, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.055) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
}

body.light .site-nav a,
body.light .site-nav button,
body.light .nav-menu summary,
body.light .pwa-install-button,
body.light .theme-toggle {
    background:
        linear-gradient(180deg, #ffffff, #eaf7ff) !important;
    border-color: rgba(125, 211, 252, 0.42) !important;
    color: #075985 !important;
}

body.light .nav-menu-panel a,
body.light .nav-menu-panel button {
    background: rgba(255, 255, 255, 0.58) !important;
    border-color: rgba(125, 211, 252, 0.24) !important;
}

body.light input,
body.light select,
body.light textarea,
body.light .neon-input,
body.light .period-select,
body.light .bg-gray-800,
body.light .bg-gray-900 {
    background-color: #ffffff !important;
    background-image: linear-gradient(180deg, #ffffff, #f2fbff) !important;
    border-color: rgba(125, 211, 252, 0.38) !important;
}

body.light .bg-gray-700,
body.light .bg-gray-600 {
    background-color: #e0f2fe !important;
}

body.light .border-gray-800,
body.light .border-gray-700,
body.light .border-gray-600 {
    border-color: rgba(125, 211, 252, 0.34) !important;
}

body.light .text-purple-400,
body.light a.text-purple-400,
body.light button.text-purple-400,
body.light .text-emerald-400,
body.light .text-cyan-300,
body.light .text-cyan-200 {
    color: #0284c7 !important;
}

body.light .text-pink-300,
body.light .text-purple-300,
body.light .text-purple-100,
body.light .text-amber-200,
body.light .text-emerald-200 {
    color: #0369a1 !important;
}

body.light .neon-button,
body.light button[type="submit"].bg-gradient-to-r,
body.light a.bg-gradient-to-r {
    background-image: linear-gradient(90deg, #0284c7, #06b6d4, #14b8a6) !important;
    color: #ffffff !important;
}

body.light .logo-icon {
    opacity: 1;
    background: transparent;
    box-shadow: none;
    filter:
        drop-shadow(0 16px 26px rgba(15, 23, 42, 0.16))
        drop-shadow(0 0 20px rgba(219, 39, 119, 0.1))
        drop-shadow(0 0 20px rgba(37, 99, 235, 0.1));
}

body.light .health-doctor-note {
    color: #075985 !important;
    background: linear-gradient(180deg, #eff9ff, #e0f2fe) !important;
    border-color: rgba(14, 165, 233, 0.34) !important;
}

body.light .character-portrait,
body.light .item-image,
body.light .custom-avatar-preview {
    background: linear-gradient(180deg, #ffffff, #eaf7ff) !important;
    border-color: rgba(125, 211, 252, 0.4) !important;
}

main,
section,
footer,
header {
    box-sizing: border-box;
}

img,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    font-size: 16px;
}

select option {
    background-color: #111827;
    color: #f9fafb;
}

body.light select option {
    background-color: #ffffff;
    color: #111827;
}

canvas {
    width: 100% !important;
    min-height: 260px;
}

footer .space-x-4,
.site-header nav,
footer .flex {
    row-gap: 0.75rem;
}

footer .space-x-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1rem;
}

footer .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
}

@media (max-width: 640px) {
    .site-header {
        padding: 0.9rem 1rem 1.25rem;
        margin: 0.75rem;
        border-radius: 1rem;
    }

    .header-actions {
        position: static;
        justify-content: center;
        margin: 0 auto 0.6rem;
    }

    .pwa-install-button,
    .theme-toggle {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .alpha-badge {
        position: static;
        min-height: 40px;
        padding: 0.45rem 0.7rem;
        font-size: 0.82rem;
        margin: 0 auto 0.85rem;
    }

    .brand-link {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .logo-icon {
        width: 100%;
        height: auto;
    }

    .site-header p {
        font-size: 1rem;
        line-height: 1.4;
        margin-top: 0.75rem;
    }

    .site-header nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        gap: 0.5rem 0.75rem;
        margin-top: 1rem;
    }

    .site-header nav.space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }

    .site-nav a,
    .site-nav button,
    .nav-menu summary,
    .site-header nav a,
    footer a {
        display: inline-flex;
        align-items: center;
        width: 100%;
        min-height: 36px;
    }

    .site-nav {
        width: 100%;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }

    .nav-menu {
        width: 100%;
    }

    .nav-menu[open] {
        z-index: 2;
    }

    .nav-menu-panel {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.45rem;
        transform: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 26px rgba(0,0,0,0.22);
    }

    .nav-menu-workouts .nav-menu-panel {
        min-width: 0;
    }

    .nav-menu-panel a,
    .nav-menu-panel button {
        min-height: 42px;
    }

    main {
        padding: 1rem !important;
    }

    .hero-bg {
        min-height: auto !important;
        padding: 3rem 0 1.5rem;
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
    }

    .hero-bg h1 {
        font-size: clamp(2.6rem, 13vw, 4rem) !important;
        line-height: 1.05 !important;
    }

    .hero-bg p {
        font-size: 1.05rem !important;
    }

    .hero-bg .mt-16 {
        margin-top: 2rem !important;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem !important;
    }

    .hero-bg > .absolute {
        position: static !important;
        transform: none !important;
        margin: 0 1rem 1rem;
        width: calc(100% - 2rem);
        justify-content: center;
    }

    .hero-bg > .absolute .w-48 {
        width: min(12rem, 48vw) !important;
    }

    section.py-20,
    section.py-16 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    h1,
    .text-6xl,
    .text-5xl {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }

    h2,
    .text-4xl {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .text-3xl {
        font-size: 1.75rem !important;
    }

    .text-2xl {
        font-size: 1.35rem !important;
    }

    .rounded-3xl {
        border-radius: 1rem !important;
    }

    .p-8,
    .p-6 {
        padding: 1rem !important;
    }

    .px-10,
    .px-16 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-5,
    .py-4 {
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
    }

    .grid {
        min-width: 0;
    }

    table {
        min-width: 680px;
    }

    input,
    select,
    textarea,
    button {
        min-height: 44px;
    }

    canvas {
        min-height: 220px;
    }
}

/* Must stay last: light theme wins over page-local dark surfaces and Tailwind dark utilities. */
body.light,
body.light .app-shell,
body.light .analytics-shell {
    color: #102033 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(14, 165, 233, 0.18), transparent 24rem),
        radial-gradient(circle at 88% 10%, rgba(45, 212, 191, 0.12), transparent 22rem),
        linear-gradient(135deg, #f7fcff 0%, #eef9ff 50%, #f8fbff 100%) !important;
}

body.light .neon-header,
body.light .neon-card,
body.light .neon-panel,
body.light .neon-hero,
body.light .dashboard-surface,
body.light .dashboard-deep,
body.light .dashboard-soft,
body.light .character-card,
body.light .character-stat-chip,
body.light .workout-card,
body.light .stat-card,
body.light .training-metric-card,
body.light .raid-counter-card,
body.light .weekly-flame-card,
body.light .admin-panel,
body.light .admin-check-option,
body.light .analytics-panel,
body.light .profile-card,
body.light .health-card,
body.light .inventory-card,
body.light .quest-card,
body.light .reward-shelf,
body.light .reward-card,
body.light .pricing-card,
body.light .nav-menu-panel,
body.light .language-menu,
body.light [class*="bg-gray-"],
body.light [class*="bg-slate-"],
body.light .bg-black,
body.light .bg-cyan-900\/30,
body.light .bg-purple-900,
body.light .bg-purple-900\/80 {
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.10), transparent 14rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 255, 0.95)) !important;
    background-color: #f4fbff !important;
    border-color: rgba(125, 211, 252, 0.36) !important;
    color: #102033 !important;
    box-shadow:
        0 18px 44px rgba(14, 116, 144, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light .bg-red-900,
body.light .bg-red-900\/30,
body.light .bg-red-900\/40,
body.light .border-red-700 {
    background: linear-gradient(180deg, #fff7f7, #fee2e2) !important;
    background-color: #fff7f7 !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
    color: #991b1b !important;
}

body.light .bg-yellow-900\/30,
body.light .bg-yellow-900\/40,
body.light .border-yellow-500\/30,
body.light .border-yellow-500\/40 {
    background: linear-gradient(180deg, #fffbeb, #fef3c7) !important;
    background-color: #fffbeb !important;
    border-color: rgba(245, 158, 11, 0.38) !important;
    color: #92400e !important;
}

body.light input,
body.light select,
body.light textarea,
body.light .admin-input,
body.light .neon-input,
body.light .period-select {
    background: linear-gradient(180deg, #ffffff, #f2fbff) !important;
    background-color: #ffffff !important;
    color: #102033 !important;
    border-color: rgba(125, 211, 252, 0.38) !important;
}

body.light .site-nav a,
body.light .site-nav button,
body.light .nav-menu summary,
body.light .pwa-install-button,
body.light .theme-toggle,
body.light .language-switcher summary {
    background: linear-gradient(180deg, #ffffff, #eaf7ff) !important;
    color: #075985 !important;
    border-color: rgba(125, 211, 252, 0.42) !important;
}

body.light .text-white,
body.light .text-gray-100,
body.light .text-gray-200,
body.light .text-gray-300,
body.light .text-gray-400,
body.light .text-gray-500,
body.light .text-slate-100,
body.light .text-slate-300,
body.light .text-slate-400 {
    color: #4b6378 !important;
}

body.light h1,
body.light h2,
body.light h3,
body.light strong,
body.light .font-bold,
body.light .text-gray-950,
body.light .text-gray-900,
body.light .text-gray-800 {
    color: #102033 !important;
}
/* Flat header logo: no glow or background plate. */
.icon-wrapper::before,
body.light .icon-wrapper::before {
    content: none !important;
    display: none !important;
}

.logo-icon,
body.light .logo-icon,
.site-header a:hover .logo-icon,
.site-header a:focus-visible .logo-icon,
body.light .site-header a:hover .logo-icon,
body.light .site-header a:focus-visible .logo-icon {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}


/* GameGym illustrated header */
.neon-header,
body.light .neon-header {
    isolation: isolate;
    min-height: 28rem;
    background:
        linear-gradient(180deg, rgba(2, 5, 18, 0.08) 0%, rgba(2, 5, 18, 0.34) 58%, rgba(2, 5, 18, 0.78) 100%),
        radial-gradient(circle at 50% 42%, rgba(4, 8, 24, 0.08) 0%, rgba(4, 8, 24, 0.2) 32%, rgba(4, 8, 24, 0.06) 62%),
        url('/images/brand/gamegym-header-heroes.png') center center / cover no-repeat,
        #050816 !important;
    border-color: rgba(34, 211, 238, 0.42) !important;
    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.58),
        0 0 34px rgba(34, 211, 238, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.site-header > * {
    position: relative;
    z-index: 2;
}

.site-header .header-actions {
    position: absolute;
    z-index: 12;
}

.site-header .brand-link {
    z-index: 3;
}

.site-header .icon-wrapper {
    width: clamp(176px, 18vw, 232px);
}

.site-header .logo-icon,
body.light .site-header .logo-icon {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    mix-blend-mode: screen;
    filter: none !important;
}

.site-header .icon-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    border-radius: 150px;
}

.site-header .brand-name,
body.light .site-header .brand-name {
    background: linear-gradient(90deg, #ff2bd6 0%, #a855f7 46%, #22d3ee 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
}

.site-header .brand-kicker,
.site-header .header-tagline,
body.light .site-header .brand-kicker,
body.light .site-header .header-tagline {
    color: #e0f2fe !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.92);
}

.site-header .site-nav {
    z-index: 11;
}

.site-header .site-nav > a,
.site-header .nav-menu > summary,
.site-header .header-actions > button,
.site-header .header-actions > details > summary {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
    .neon-header,
    body.light .neon-header {
        min-height: 0;
        background-position: center center !important;
    }

    .site-header .header-actions {
        position: static;
    }

    .site-header .icon-wrapper {
        width: min(54vw, 210px);
    }
}

@media (max-width: 480px) {
    .neon-header,
    body.light .neon-header {
        background-position: 50% center !important;
    }

    .site-header .icon-wrapper {
        width: min(56vw, 190px);
    }
}