/* =========================================================
   LinguaUP v3 — sitewide design layer (2026-10-26)
   Carries the landing page's language (cosmic indigo cards, soft sky
   background, gradient CTAs, glass chrome) to every page, in BOTH themes.
   Loaded after style.css + ux.css; pure overrides, no markup changes.
   ========================================================= */

:root {
    --bg: #f5f7ff;
    --card-2: #f6f8ff;
    --border: #e3e7f5;
    --lu-line: rgba(20,30,90,.08);
    --lu-grad: linear-gradient(135deg, #2563ff 0%, #1b56fd 45%, #6d4dff 100%);
    --lu-grad-soft: linear-gradient(135deg, #3d5cf5 0%, #6552f0 60%, #8b5cf6 100%);
    --lu-cosmic:
        radial-gradient(90% 70% at 85% 10%, rgba(124,92,255,.45), transparent 60%),
        radial-gradient(80% 70% at 0% 100%, rgba(27,86,253,.45), transparent 60%),
        linear-gradient(160deg, #10155a 0%, #0a0d33 55%, #070920 100%);
    --lu-stars:
        radial-gradient(1.2px 1.2px at 20px 30px, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 90px 120px, rgba(207,214,255,.8), transparent),
        radial-gradient(1.4px 1.4px at 160px 60px, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 230px 170px, rgba(255,255,255,.7), transparent);
    --gradient-hero: var(--lu-cosmic);
    --shadow-hero: 0 0 0 1px rgba(255,255,255,.06) inset, 0 34px 70px -40px rgba(16,20,90,.75);
    --lu-card-bg: linear-gradient(165deg, #ffffff, #f6f8ff);
    --lu-card-shadow: inset 0 1px 0 #fff, 0 22px 50px -38px rgba(30,40,120,.45);
    --lu-glass: rgba(245,247,255,.72);
}
html[data-theme="dark"] {
    --bg: #070920;
    --card: #0d1137;
    --card-2: #131848;
    --border: rgba(255,255,255,.09);
    --text: #eef1ff;
    --muted: #a3acd6;
    --muted-2: #7781b4;
    --primary: #7b93ff;
    --primary-dark: #9aaeff;
    --primary-wash: rgba(123,147,255,.14);
    --purple: #a78bfa;
    --accent: #2ee6c8;
    --accent-wash: rgba(46,230,200,.10);
    --lu-line: rgba(255,255,255,.08);
    --shadow-card: 0 10px 30px -16px rgba(0,0,0,.7);
    --lu-card-bg: linear-gradient(165deg, #10154a, #0b0f33);
    --lu-card-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 56px -38px rgba(0,0,0,.85);
    --lu-glass: rgba(7,9,32,.62);
}

/* small fills that used --gradient-hero keep a bright gradient, not the night-sky card */
.vocab-progress-fill, .tutor-msg--user .tutor-bubble, .dash-progress-locked-icon,
.lh-step.on .lh-step-dot { background: var(--lu-grad-soft) !important; }

/* ---------- page sky (fixed, behind everything) ---------- */
body { background: var(--bg); }
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(55% 40% at 100% 0%, rgba(109,77,255,.11), transparent 70%),
        radial-gradient(50% 40% at 0% 70%, rgba(27,86,253,.09), transparent 70%),
        radial-gradient(40% 30% at 70% 100%, rgba(0,194,168,.06), transparent 70%);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(27,40,120,.09) 1px, transparent 1.2px); background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
    mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}
html[data-theme="dark"] body::before {
    background:
        radial-gradient(60% 50% at 100% 20%, rgba(109,77,255,.16), transparent 70%),
        radial-gradient(60% 50% at 0% 80%, rgba(27,86,253,.16), transparent 70%);
}
html[data-theme="dark"] body::after {
    background-image: var(--lu-stars); background-size: 300px 260px; opacity: .35;
    -webkit-mask-image: none; mask-image: none;
}
body:has(.lh)::before, body:has(.lh)::after,
body.lu-exam-active::before, body.lu-exam-active::after { display: none; }

/* ---------- navbar (glass, same on every page incl. landing) ---------- */
.navbar {
    background: var(--lu-glass);
    border-bottom: 1px solid transparent;
    box-shadow: 0 10px 30px -26px rgba(30,40,120,.5);
}
.navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(59,91,255,.35) 25%, rgba(124,92,255,.35) 60%, rgba(230,73,128,.25) 85%, transparent);
}
html[data-theme="dark"] .navbar { background: rgba(7,9,32,.62); box-shadow: none; }
html[data-theme="dark"] .navbar::after { background: linear-gradient(90deg, transparent, rgba(123,147,255,.35) 30%, rgba(167,139,250,.3) 70%, transparent); }
html.tg-miniapp .navbar { background: var(--bg); }
.navbar .logo-text { letter-spacing: -0.02em; }
.btn-nav, html[data-theme="dark"] .btn-nav {
    color: #fff !important; background: var(--lu-grad); border: 0;
    box-shadow: 0 10px 24px -12px rgba(37,80,255,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.settings-btn, .account-btn { border-radius: 14px; }

/* ---------- desktop sidebar ---------- */
@media (min-width: 821px) {
    .desktop-sidebar {
        background: color-mix(in srgb, var(--card) 70%, transparent);
        backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
        border-right: 1px solid var(--lu-line);
    }
    html[data-theme="dark"] .desktop-sidebar { background: rgba(9,12,40,.72); }
    .ds-nav-item { border-radius: 14px; transition: background .25s var(--ease-spring), color .25s var(--ease-spring), transform .25s var(--ease-spring); }
    .ds-nav-item:hover { transform: translateX(3px); }
    .ds-nav-item.is-active, html[data-theme="dark"] .ds-nav-item.is-active {
        color: #fff; background: var(--lu-grad);
        box-shadow: 0 12px 26px -14px rgba(37,80,255,.8), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .ds-nav-item.is-active::before { display: none; }
    .ds-pill.is-active { background: var(--lu-grad); color: #fff; }
    .ds-logo::after { background: radial-gradient(120% 100% at 0% 0%, rgba(109,77,255,.16), transparent 70%); }
}

/* ---------- bottom tab bar ---------- */
.bottom-tabbar {
    background: color-mix(in srgb, var(--card) 78%, transparent);
    border-color: var(--lu-line);
    box-shadow: 0 18px 40px -14px rgba(30,40,120,.38), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="dark"] .bottom-tabbar {
    background: rgba(13,17,55,.78);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.bt-icon { transition: background .3s var(--ease-spring), color .3s var(--ease-spring), transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring); }
.bt-item.is-active .bt-icon, html[data-theme="dark"] .bt-item.is-active .bt-icon {
    background: var(--lu-grad); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(37,80,255,.85);
}

/* ---------- footer ---------- */
.site-footer { position: relative; background: transparent; border-top: 0; }
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,91,255,.3) 25%, rgba(124,92,255,.3) 60%, transparent);
}
html[data-theme="dark"] .site-footer, html[data-theme="dark"]:has(.lh) .site-footer { background: rgba(5,6,26,.6); }
.footer-social a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lu-line); background: color-mix(in srgb, var(--card) 60%, transparent); transition: border-color .25s, color .25s, transform .25s var(--ease-spring); }
.footer-social a:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

/* ---------- cosmic hero cards (the landing hero, everywhere) ---------- */
.profile-hero, .billing-hero, .dash-progress-card, .goal-hero-card, .daily-article-card,
.goal-week-card, .home-closing-cta {
    background: var(--lu-cosmic) !important; color: #fff;
    box-shadow: var(--shadow-hero); isolation: isolate;
}
.profile-hero::before, .billing-hero::before, .dash-progress-card::before, .goal-hero-card::before,
.daily-article-card::before {
    background: var(--lu-stars) !important; background-size: 260px 220px !important; opacity: .5;
    z-index: -1;
}

/* page header → compact cosmic card on every page (desktop + mobile web; Mini App keeps it hidden) */
.page-hero-row:not(.home-hero) {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--lu-cosmic); color: #fff;
    border-radius: 28px; padding: 26px 30px; margin-bottom: 26px;
    box-shadow: var(--shadow-hero);
}
.page-hero-row:not(.home-hero)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--lu-stars); background-size: 280px 240px; opacity: .55;
    animation: lu-twinkle 6s ease-in-out infinite alternate;
}
.page-hero-row:not(.home-hero)::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: 260px; height: 260px; right: -60px; top: -110px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(140,160,255,.35), transparent);
    animation: lu-drift 9s ease-in-out infinite alternate;
}
.page-hero-row:not(.home-hero) h1 { color: #fff; letter-spacing: -0.03em; }
.page-hero-row:not(.home-hero) .page-sub, .page-hero-row:not(.home-hero) p { color: #b8c0ea !important; }
.page-hero-row:not(.home-hero) .tool-eyebrow { color: #c9d4ff; }
.page-hero-row:not(.home-hero) .tool-back { color: #dfe4ff; background: rgba(255,255,255,.08); }
.page-hero-row:not(.home-hero) .page-hero-mascot {
    width: 96px; height: 96px; filter: drop-shadow(0 16px 22px rgba(0,0,0,.45));
    animation: lu-float 5s ease-in-out infinite;
}
@media (max-width: 700px) {
    html:not(.tg-miniapp) .page-hero-row:not(.home-hero) {
        display: flex; flex-direction: row; text-align: left; align-items: center;
        gap: 12px; padding: 18px 18px; border-radius: 24px; margin-bottom: 18px;
    }
    .page-hero-row:not(.home-hero) > .phr-text { text-align: left; }
    .page-hero-row:not(.home-hero) h1 { font-size: 22px; margin-bottom: 4px; }
    .page-hero-row:not(.home-hero) .page-sub, .page-hero-row:not(.home-hero) p { font-size: 13.5px; line-height: 1.45; margin-bottom: 0 !important; }
    .page-hero-row:not(.home-hero) .page-hero-mascot { width: 72px; height: 72px; margin: 0; }
    html:not(.tg-miniapp) .mobile-only-label { display: none; }
}

/* ---------- section labels: landing pill dot ---------- */
.section-label { color: var(--primary); letter-spacing: .1em; }
.section-label::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 0 10px rgba(52,211,153,.7);
}
.section-label:has(> .icon)::before { display: none; }

/* ---------- cards ---------- */
.tool-card, .mode-card, .profile-card, .lu-panel, .article-card, .exam-card, .week-compare-card {
    --c: var(--primary);
    background:
        radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), color-mix(in srgb, var(--c) 12%, transparent), transparent 70%),
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 55%),
        var(--lu-card-bg);
    border: 1px solid var(--lu-line);
    box-shadow: var(--lu-card-shadow);
    border-radius: 22px;
    transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring), border-color .3s;
}
.tool-card.listening { --c: #1b56fd; } .tool-card.reading { --c: #00c2a8; } .tool-card.writing { --c: #f59e0b; }
.tool-card.speaking { --c: #7c5cff; } .tool-card.articles { --c: #e64980; } .tool-card.grammar { --c: #6366f1; }
.tool-card.vocabulary { --c: #16a34a; }
.tool-card.listening, .tool-card.reading, .tool-card.writing, .tool-card.speaking,
.tool-card.articles, .tool-card.grammar, .tool-card.vocabulary {
    background:
        radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), color-mix(in srgb, var(--c) 14%, transparent), transparent 70%),
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%),
        var(--lu-card-bg) !important;
    border-color: color-mix(in srgb, var(--c) 20%, transparent);
}
@media (hover: hover) {
    a.tool-card:hover, a.mode-card:hover, a.article-card:hover, a.exam-card:hover, .tool-card:hover, .mode-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--c) 40%, transparent);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 26px 50px -30px color-mix(in srgb, var(--c) 70%, transparent);
    }
}
.tool-card:active, .mode-card:active { transform: scale(.985); }
.tool-card .tool-mascot { transition: transform .5s var(--ease-spring); }
.tool-card:hover .tool-mascot { transform: scale(1.08) rotate(-4deg); }
html[data-theme="dark"] .tool-card .tool-mascot { filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }

/* ---------- buttons: landing gradient + shine ---------- */
.btn:not(.secondary):not(.danger):not(.btn-nav) {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--lu-grad); color: #fff; border-color: transparent;
    box-shadow: 0 12px 26px -14px rgba(37,80,255,.75), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring);
}
html[data-theme="dark"] .btn:not(.secondary):not(.danger) { color: #fff; }
.btn:not(.secondary):not(.danger):not(.btn-nav)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
    transform: translateX(-120%); animation: lu-shine 5s var(--ease-spring) infinite 2.5s;
}
@media (hover: hover) { .btn:not(.secondary):not(.danger):hover { transform: translateY(-2px); } }
.btn:active { transform: scale(.97); }
.btn.secondary { background: color-mix(in srgb, var(--card) 70%, transparent); border: 1.5px solid var(--lu-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- motion helpers (driven by assets/js/lu-motion.js) ---------- */
.lu-rv { opacity: 0; transform: translateY(18px); }
.lu-rv.lu-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-spring), transform .8s var(--ease-spring); transition-delay: var(--d, 0ms); }
@keyframes lu-twinkle { to { opacity: .85; } }
@keyframes lu-drift { to { transform: translate(-40px, 30px) scale(1.15); } }
@keyframes lu-float { 50% { translate: 0 -8px; } }
@keyframes lu-shine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: lu-vt-out .18s ease both; }
::view-transition-new(root) { animation: lu-vt-in .32s var(--ease-spring) both; }
@keyframes lu-vt-out { to { opacity: 0; } }
@keyframes lu-vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    .lu-rv { opacity: 1 !important; transform: none !important; }
    .page-hero-row::before, .page-hero-row::after, .page-hero-mascot, .btn::after { animation: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- LIGHT: page header card is daylight, not dark blue ---------- */
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) {
    color: #0b1036;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(124,92,255,.14), transparent 65%),
        radial-gradient(60% 90% at 0% 100%, rgba(27,86,253,.11), transparent 65%),
        linear-gradient(165deg, #ffffff 0%, #f4f6ff 100%);
    box-shadow: inset 0 0 0 1px rgba(40,60,200,.08), inset 0 1px 0 #fff, 0 26px 60px -42px rgba(40,60,200,.4);
}
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero)::before { display: none; }
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero)::after { background: radial-gradient(closest-side, rgba(109,77,255,.12), transparent); }
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) h1 { color: #0b1036; }
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) .page-sub, html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) p { color: #4a5380 !important; }
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) .tool-eyebrow { color: #3049d9; }
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) .tool-back { color: #1a2150; background: rgba(20,30,90,.06); }
html:not([data-theme="dark"]) .page-hero-row:not(.home-hero) .page-hero-mascot { filter: drop-shadow(0 14px 18px rgba(30,40,120,.25)); }
/* other hero cards: bright brand gradient in light theme instead of navy */
html:not([data-theme="dark"]) {
    --lu-cosmic:
        radial-gradient(90% 80% at 100% 0%, rgba(236,72,153,.28), transparent 60%),
        radial-gradient(80% 80% at 0% 100%, rgba(0,194,255,.22), transparent 60%),
        linear-gradient(135deg, #2b5cff 0%, #4f46e5 55%, #7c3aed 100%);
    --shadow-hero: 0 0 0 1px rgba(255,255,255,.12) inset, 0 30px 60px -36px rgba(59,70,229,.7);
}