:root {
    --bg: #050912;
    --panel: #091323;
    --panel-2: #0d1a2d;
    --line: #173050;
    --text: #f5f7ff;
    --muted: #92a4c4;
    --hint: #6f82a5;
    --text-hint: var(--hint);
    --card-bg: rgba(255, 255, 255, .06);
    --card-border: rgba(68, 110, 174, .35);
    --primary: #2f7dff;
    --primary-2: #42c8ee;
    --gold: #facc15;
    --orange: #ff8a3d;
    --error: #ff5252;
    --success: #4ade80;
    --nav-w: 216px;
    /* Component tokens referenced by rules lifted from the monolith. Single
       source of truth for every standalone page; the trainer re-pins some of
       them per-page (telegram theme vars) in trainer_base.css. */
    --accent: var(--primary);
    --accent-soft: var(--primary-2);
    --accent-text: #ffffff;
    --bg-secondary: var(--panel);
    --surface: var(--panel);
    --warning: var(--gold);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --radius: 20px;
    --radius-sm: 14px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --safe-top: var(--app-safe-top);
    --safe-bottom: var(--app-safe-bottom);
    --app-font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--app-font-family);
    font-weight: 800;
    /* Match the monolith's rendering on every standalone page: without this the
       same Montserrat weight looks noticeably bolder on WebKit (iOS/phone) than
       on the trainer page (which sets it), so headers appeared to differ. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

a,
button,
input {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

.app-page img {
    max-width: 100%;
    height: auto;
}

.desktop-side-link img,
.home-tab img {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

html.theme-light,
body.theme-light {
    --bg: #f4f8ff;
    --panel: #ffffff;
    --panel-2: #edf5ff;
    --line: #cfe0f7;
    --text: #081329;
    --muted: #53647d;
    --hint: #71819a;
    --text-hint: var(--hint);
    --card-bg: rgba(15, 23, 42, .06);
    --card-border: rgba(15, 23, 42, .12);
}

#boot-loader {
    position: fixed;
    inset: 0;
    /* Above everything, incl. the trainer's fixed side-nav (10020) and status rail
       (10010) — otherwise they show through the full-screen loader. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    color: #53647d;
    transition: opacity .18s ease, visibility .18s ease;
}

body:not(.trainer-loading) #boot-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.app-fast-route #boot-loader {
    display: none;
    /* Also zero opacity/visibility so that when app-fast-route is later removed
       (in hideBootLoader) there is no opacity 1→0 transition — that transition is
       what made the white loader briefly flash on the loader-free trainer home. */
    opacity: 0;
    visibility: hidden;
}

/* MAX mini-app: block overscroll so a downward pull can't dismiss the app.
   The class is set by installMaxOverscrollGuard() (app_core.js). */
html.max-webapp,
body.max-webapp {
    overscroll-behavior-y: none;
}

.boot-spinner {
    position: relative;
    width: 86px;
    height: 92px;
    border: 0;
    border-radius: 0;
    background: url("/static/images/energy_purchase_rabbit_loop.gif") center / contain no-repeat;
    animation: bootRabbitHop 0.86s cubic-bezier(.34, .04, .32, 1) infinite;
}

.boot-spinner::after {
    content: "";
    position: absolute;
    left: 21px;
    right: 21px;
    bottom: -7px;
    height: 9px;
    border-radius: 999px;
    background: rgba(47, 125, 255, .22);
    filter: blur(5px);
    animation: bootRabbitShadow 0.86s cubic-bezier(.34, .04, .32, 1) infinite;
}

.boot-text {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

html.theme-light .boot-spinner::after {
    background: rgba(37, 99, 235, .18);
}

@keyframes bootRabbitHop {
    0%, 100% { transform: translateY(0) scaleY(1); }
    18% { transform: translateY(2px) scaleY(.96); }
    48% { transform: translateY(-14px) scaleY(1.02); }
    72% { transform: translateY(0) scaleY(.98); }
}

@keyframes bootRabbitShadow {
    0%, 100% { transform: scaleX(1); opacity: .8; }
    48% { transform: scaleX(.58); opacity: .36; }
}

.app-page {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 72% -12%, rgba(47, 125, 255, .16), transparent 34%),
        linear-gradient(180deg, rgba(7, 20, 37, .92), var(--bg) 42%);
    transition: opacity 0.12s ease-out;
}

/* Seamless nav: the incoming .app-page is inserted with this class so it stays
   hidden until the page's own init signals ready (via hideBootLoader). Prevents
   a half-rendered frame (empty content + status bar) from flashing mid-swap. */
.app-page.app-page-enter {
    opacity: 0;
    pointer-events: none;
}

body.theme-light .app-page,
html.theme-light .app-page {
    background:
        radial-gradient(circle at 72% -14%, rgba(47, 125, 255, .13), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 44%, #eef5ff 100%);
}

.desktop-side-nav {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    width: var(--nav-w);
    padding: calc(18px + var(--safe-top)) 14px 18px;
    background: color-mix(in srgb, #081123 94%, var(--bg));
    border-right: 1px solid rgba(83, 120, 177, .26);
    display: none;
    flex-direction: column;
    gap: 10px;
}

.desktop-side-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    min-height: 44px;
    margin: 0 6px 18px 24px;
    transform: rotate(-2deg);
    /* Decorative logo only — not a navigation target. */
    pointer-events: none;
    cursor: default;
}

.desktop-side-brand::after {
    content: "";
    position: absolute;
    right: 42px;
    bottom: 2px;
    left: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .95), transparent);
    filter: blur(.2px) drop-shadow(0 0 8px rgba(56, 189, 248, .75));
    opacity: .9;
}

.desktop-side-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, .45));
    transform: rotate(2deg) translateY(1px);
}

.zappi-wordmark {
    color: #fff;
    font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive;
    font-size: 30px;
    font-weight: 700;
    font-synthesis-weight: none;
    line-height: 1;
    letter-spacing: .01em;
    text-shadow:
        0 0 2px #fff,
        0 0 10px rgba(56, 189, 248, .82),
        0 0 22px rgba(30, 111, 255, .58);
}

body.theme-light .zappi-wordmark,
html.theme-light .zappi-wordmark {
    color: #05080f;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .75),
        0 0 7px rgba(56, 189, 248, .34);
}

body.theme-light .desktop-side-nav,
html.theme-light .desktop-side-nav {
    background: rgba(255, 255, 255, .92);
    border-right-color: rgba(148, 163, 184, .38);
    box-shadow: 18px 0 48px rgba(15, 23, 42, .08);
}

body.theme-light .desktop-side-brand::after,
html.theme-light .desktop-side-brand::after {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .62), transparent);
    filter: blur(.2px) drop-shadow(0 0 6px rgba(37, 99, 235, .28));
    opacity: .72;
}

body.theme-light .desktop-side-brand img,
html.theme-light .desktop-side-brand img {
    filter: drop-shadow(0 0 7px rgba(37, 99, 235, .2));
}

body.theme-light .desktop-side-link,
html.theme-light .desktop-side-link {
    color: #0f172a;
}

body.theme-light .desktop-side-link:hover,
html.theme-light .desktop-side-link:hover {
    background: rgba(37, 99, 235, .08);
    border-color: rgba(37, 99, 235, .16);
}

body.theme-light .desktop-side-link.active,
html.theme-light .desktop-side-link.active {
    color: #1d4ed8;
    background: rgba(37, 99, 235, .12);
    border-color: rgba(37, 99, 235, .62);
}

.desktop-side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.desktop-side-link:hover {
    background: rgba(47, 125, 255, .09);
    border-color: rgba(68, 110, 174, .38);
}

.desktop-side-link:active {
    transform: translateY(1px);
}

.desktop-side-link.active {
    background: rgba(47, 125, 255, .15);
    border-color: rgba(47, 125, 255, .74);
    color: #61a1ff;
}

.desktop-side-link img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 26px;
}

.desktop-side-link img[src$="nav_bounty.svg"] {
    width: 27px;
    height: 27px;
}

.home-bottom-nav {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 12px calc(7px + var(--safe-bottom));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: rgba(8, 17, 35, .94);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
}

.home-tab {
    min-width: 0;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 11px;
    font-weight: 700;
}

.home-tab.active {
    color: #fff;
    background: var(--primary);
}

.home-tab img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.home-tab img[src$="nav_bounty.svg"] {
    width: 26px;
    height: 26px;
}

body.theme-light .home-bottom-nav,
html.theme-light .home-bottom-nav {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -12px 34px rgba(15, 23, 42, .12);
}

.tg-gate {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.tg-gate-card {
    width: min(100%, 420px);
    padding: 24px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--panel);
    text-align: center;
}

.tg-gate-card h1 {
    margin: 0 0 8px;
    font-size: 28px;
}

.tg-gate-card p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.tg-gate-actions {
    display: grid;
    gap: 10px;
}

.tg-gate-actions a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
}

@media (min-width: 700px) and (max-width: 1023px) {
    .home-bottom-nav {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        transform: none;
        gap: 10px;
        padding: 12px 22px calc(12px + var(--safe-bottom));
        border-radius: 20px 20px 0 0;
    }

    .home-tab {
        height: 78px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: 850;
        gap: 3px;
    }

    .home-tab img {
        width: 34px;
        height: 34px;
    }

    .home-tab img[src$="nav_bounty.svg"] {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
    .home-bottom-nav {
        left: 0;
        right: 0;
        gap: 8px;
        padding: 6px max(14px, calc(14px + var(--app-safe-left))) calc(6px + var(--safe-bottom)) max(14px, calc(14px + var(--app-safe-right)));
        border-radius: 16px 16px 0 0;
    }

    .home-tab {
        height: 46px;
        border-radius: 12px;
    }

    .home-tab img {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 1024px) {
    .desktop-side-nav {
        display: flex;
    }

    .home-bottom-nav {
        display: none;
    }
}

/* ── Minimal toast — shared by the standalone pages (they don't load
   ui_feedback.js). Pages with a desktop side nav shift it right in their own
   CSS; the base stays viewport-centered for nav-less pages (/lesson, solve).
   z-index sits above modals (10000) so action feedback is never hidden. ── */
.learn-toast,
.shop-toast,
.cabinet-toast,
.profile-toast {
    position: fixed;
    left: 50%;
    bottom: calc(94px + var(--app-safe-bottom, 0px));
    transform: translateX(-50%) translateY(12px);
    z-index: 10050;
    max-width: min(92vw, 420px);
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(8, 17, 35, .96);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.learn-toast.is-visible,
.shop-toast.is-visible,
.cabinet-toast.is-visible,
.profile-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.learn-toast[data-kind="warn"],
.shop-toast[data-kind="warn"],
.cabinet-toast[data-kind="warn"],
.profile-toast[data-kind="warn"] { background: #8a3d1e; }

.learn-toast[data-kind="success"],
.shop-toast[data-kind="success"],
.cabinet-toast[data-kind="success"],
.profile-toast[data-kind="success"] { background: #116149; }

/* ── Streak flame (status bar) — one copy for every page that shows it.
   The trainer's size tweaks live in trainer.css on top of this. ── */
.stat-streak-value { display: inline-flex; align-items: center; gap: 4px; }
.stat-flame { width: 32px; height: 32px; transform-origin: 50% 90%; animation: flame-body 1.6s ease-in-out infinite; }
.stat-flame .flame-outer { transform-origin: 50% 95%; animation: flame-outer 0.6s ease-in-out infinite alternate; }
.stat-flame .flame-mid   { transform-origin: 50% 95%; animation: flame-outer 0.45s ease-in-out infinite alternate; }
.stat-flame .flame-inner { transform-origin: 50% 95%; animation: flame-inner 0.32s ease-in-out infinite alternate; }
/* blue (cold): streak < 3 */
.stat-streak-value.flame-blue  .stat-flame   { filter: drop-shadow(0 0 6px rgba(47, 128, 237, 0.55)); }
.stat-streak-value.flame-blue  .flame-outer  { fill: #1e5fc7; }
.stat-streak-value.flame-blue  .flame-mid    { fill: #2f80ed; }
.stat-streak-value.flame-blue  .flame-inner  { fill: #8ec5ff; }
/* orange (warm): 3..7 */
.stat-streak-value.flame-orange .stat-flame  { filter: drop-shadow(0 0 7px rgba(255, 145, 0, 0.65)); }
.stat-streak-value.flame-orange .flame-outer { fill: #ff6d00; }
.stat-streak-value.flame-orange .flame-mid   { fill: #ff9a26; }
.stat-streak-value.flame-orange .flame-inner { fill: #ffd54f; }
/* red (hot): >= 8 */
.stat-streak-value.flame-red    .stat-flame  { animation: flame-body 0.9s ease-in-out infinite, flame-glow 1.2s ease-in-out infinite; }
.stat-streak-value.flame-red    .flame-outer { fill: #e53935; }
.stat-streak-value.flame-red    .flame-mid   { fill: #ff6d00; }
.stat-streak-value.flame-red    .flame-inner { fill: #ffee58; }
.home-status-bar .stat-streak-value .stat-flame { filter: drop-shadow(0 0 7px rgba(255, 145, 0, 0.65)); }
.home-status-bar .stat-streak-value .flame-outer { fill: #ff6d00; }
.home-status-bar .stat-streak-value .flame-mid { fill: #ff9a26; }
.home-status-bar .stat-streak-value .flame-inner { fill: #ffd54f; }

@keyframes flame-body {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50%      { transform: translateY(-1px) scale(1.04, 1.08); }
}
@keyframes flame-outer {
    from { transform: skewX(-3deg) scaleY(1); }
    to   { transform: skewX(3deg)  scaleY(1.06); }
}
@keyframes flame-inner {
    from { transform: skewX(4deg)  scaleY(0.94); opacity: 0.8; }
    to   { transform: skewX(-4deg) scaleY(1.08); opacity: 1; }
}
@keyframes flame-glow {
    0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 61, 0, 0.65)); }
    50%      { filter: drop-shadow(0 0 16px rgba(255, 82, 0, 0.95)); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}