:root {
    --primary: #1b56fd;
    --primary-dark: #1340c4;
    --primary-wash: #eaf0ff;
    --accent-wash: #eafffb;
    --accent: #00c2a8;
    --purple: #7c5cff;
    --amber: #f59e0b;
    --rose: #e64980;
    --indigo: #6366f1;
    --bg: #f5f7fc;
    --text: #1c2333;
    --muted: #6b7280;
    --muted-2: #9aa3b2;
    --card: #ffffff;
    --card-2: #f8f9fd;
    --border: #e5e9f2;
    --radius: 16px;
    --shadow-card: 0 8px 24px -18px rgba(20,30,60,0.25);
    color-scheme: light;
    /* chart line colors — validated (OKLab CVD deltaE, contrast) via dataviz skill, separate from
       the UI --primary/--accent/--amber/--purple steps because those are too light for thin chart marks in dark mode */
    --chart-listening: #1b56fd;
    --chart-reading: #00c2a8;
    --chart-writing: #f59e0b;
    --chart-speaking: #7c5cff;
    --gradient-hero: linear-gradient(135deg, #3d5cf5 0%, #6552f0 60%, #8b5cf6 100%);
    --shadow-hero: 0 22px 46px -20px rgba(61,60,235,0.5);
    /* Apple-style spring approximation (critically damped, no overshoot) —
       the house easing curve for anything that moves: buttons, cards, sheets. */
    --ease-spring: cubic-bezier(.16,1,.3,1);
}

/* ---------- Dark mode — "Marine Blue" ---------- */
html[data-theme="dark"] {
    --primary: #2aabee;
    --primary-dark: #52c0f5;
    --primary-wash: rgba(42,171,238,0.14);
    --accent-wash: rgba(53,201,143,0.10);
    --accent: #35c98f;
    --purple: #9d8cff;
    --amber: #f5b942;
    --rose: #f0679e;
    --indigo: #8385f7;
    --bg: #12161f;
    --text: #f5f7fa;
    --muted: #99a3b5;
    --muted-2: #737e91;
    --card: #1b202c;
    --card-2: #1f2532;
    --border: #2a303c;
    --shadow-card: 0 8px 24px -14px rgba(0,0,0,0.55);
    color-scheme: dark;
    --chart-listening: #008acb;
    --chart-reading: #009a64;
    --chart-writing: #ac7400;
    --chart-speaking: #7e6bdb;
    --gradient-hero: linear-gradient(135deg, #2b3fc7 0%, #4b3ad6 60%, #6d3fd6 100%);
    --shadow-hero: 0 22px 46px -18px rgba(20,10,60,0.6);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] th { background: var(--card-2); }
html[data-theme="dark"] .error-box, html[data-theme="dark"] .tool-error { background: #3a1616; border-color: #6b2626; color: #ff9b9b; }
html[data-theme="dark"] .notice-box { background: #16233a; border-color: #26436b; color: #9bc0ff; }
html[data-theme="dark"] .success-box { background: #10301f; border-color: #1f5c3a; color: #7fe6b4; }
html[data-theme="dark"] .btn:not(.secondary), html[data-theme="dark"] .btn-nav { color: #04121c; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--card-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .word-popover { background: #1a2130; }
html[data-theme="dark"] .word-popover::after { background: #1a2130; }

/* Listening/Reading "notes" question-groups preserve the source content's own
   raw HTML verbatim (inline style="background:#fafafa;border:1px solid #ccc"
   etc., baked in by whatever site the test was scraped from) so its table/
   form layout survives intact — but those hardcoded light colors make text
   unreadable in dark mode (light-on-light). Force theme-aware colors on any
   inline-styled element inside, since CSS can't otherwise reach into an
   attribute-preserved raw HTML blob. */
html[data-theme="dark"] .notes-item [style*="background"],
html[data-theme="dark"] .notes-item [style*="border"] {
    background: var(--card-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Sticky footer: .page-main absorbs any leftover viewport height so
   .site-footer never floats mid-page on short-content pages (e.g. an
   empty dashboard) with a background-color seam below it. */
.page-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
/* footer.php still renders this on profile.php specifically (the one
   tab-bar page it wasn't suppressed on) — inside the Mini App it's just
   dead marketing chrome (social links, "made modern" tagline) below the
   bottom tab bar, not useful in-app. */
html.tg-miniapp .site-footer { display: none; }

a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0; }
/* Optical tracking/leading — negative tracking + tight leading as text gets
   bigger, positive tracking loosens back up for small text (Apple's WWDC20
   "Details of UI Typography" rule: never one letter-spacing for every size).
   Element-selector specificity so more specific rules (.hero h1 etc.) still win. */
h1 { letter-spacing: -0.02em; line-height: 1.15; }
h2 { letter-spacing: -0.015em; line-height: 1.2; }
h3 { letter-spacing: -0.01em; line-height: 1.3; }
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.verified-badge { display: inline-block; vertical-align: -3px; flex-shrink: 0; }

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

/* ---------- Navbar ---------- */

.navbar {
    display: flex;
    align-items: center;
    gap: 28px;
    background: color-mix(in srgb, var(--card) 72%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 14px 32px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(20,30,60,0.02), 0 8px 24px -20px rgba(20,30,60,0.35);
    position: sticky;
    top: 0;
    z-index: 40;
}
/* Telegram Mini App: instead of pushing the navbar's box down with
   margin-top (which left a gap above it that page content could scroll
   into and peek through, between the screen edge and where the navbar's
   own background starts), grow the navbar's OWN box upward with padding
   so its solid background covers the entire strip under Telegram's
   floating Close/expand/menu pills, all the way to the true screen edge —
   see includes/header.php for the detection script. */
html.tg-miniapp .navbar {
    padding-top: calc(14px + var(--tg-safe-top, 0px));
    top: 0;
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Telegram's own floating pill already shows "LinguaUP Robot" right above
   this bar — repeating our own logo/wordmark directly underneath read as
   duplicate branding. Inside the Mini App the logo is replaced entirely by
   the signed-in user's own identity (avatar, name, username) on the left
   and their plan/balance on the right — more useful than a second copy of
   the app's own name. */
html.tg-miniapp .navbar .logo { display: none; }
.navbar-tg-identity, .navbar-tg-right { display: none; }
html.tg-miniapp .navbar {
    display: flex;
    align-items: center;
}
html.tg-miniapp .navbar .navbar-tg-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text);
}
.navbar-tg-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-weight: 700; font-size: 13px; color: #fff;
}
.navbar-tg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.navbar-tg-idcol { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.navbar-tg-name {
    font-weight: 700; font-size: 14.5px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.navbar-tg-username { font-size: 12px; color: var(--muted); }
html.tg-miniapp .navbar .navbar-tg-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    text-decoration: none;
}
.navbar-tg-pro {
    font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #92600a;
    background: linear-gradient(135deg, #ffd76a, #f5b942); padding: 3px 8px; border-radius: 100px;
}
.navbar-tg-balance { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }

@supports not (backdrop-filter: blur(1px)) {
    .navbar { background: var(--card); }
}
@media (prefers-reduced-transparency: reduce) {
    .navbar { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.navbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    color: var(--text);
}

.logo-icon { width: 30px; height: 30px; border-radius: 8px; }
.footer-logo { width: 20px; height: 20px; border-radius: 6px; vertical-align: -5px; margin-right: 6px; }

.navlinks { display: flex; gap: 22px; flex: 1; }
.navlinks a { color: var(--muted); font-weight: 600; font-size: 14.5px; }
.navlinks a:hover { color: var(--primary); }

.navbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hi-text { color: var(--muted); font-size: 14px; }
.navbar-badges { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.hi-link:hover { color: var(--primary); }
.navlink-small { color: var(--muted); font-weight: 600; font-size: 14px; }
.navlink-small:hover { color: var(--primary); }

.btn-nav {
    background: var(--primary); color: #fff; padding: 9px 18px; border-radius: 9px;
    font-weight: 700; font-size: 14px;
}

/* ---------- Account menu (groups Hi/badges/billing/admin/logout) ---------- */
.account-menu { position: relative; }
.account-btn {
    display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
    border-radius: 100px; border: 1px solid var(--border); background: var(--card); color: var(--text);
    cursor: pointer; font-family: inherit;
}
.account-btn:hover { border-color: var(--primary); }
.account-btn svg { color: var(--muted-2); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.account-btn.is-open svg { transform: rotate(180deg); }
.account-btn-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 11px;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border);
}
.account-btn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-btn .hi-text { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    background: color-mix(in srgb, var(--card) 85%, transparent);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 8px; width: 220px; box-shadow: var(--shadow-card);
    transform-origin: top right;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: scale(.94) translateY(-6px);
    transition: opacity .18s var(--ease-spring), transform .18s var(--ease-spring), visibility 0s linear .18s;
}
.account-dropdown.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: scale(1) translateY(0);
    transition: opacity .16s var(--ease-spring), transform .16s var(--ease-spring), visibility 0s linear 0s;
}
.account-dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
    color: var(--text); font-weight: 600; font-size: 13.5px;
}
.account-dropdown-item svg { color: var(--muted-2); flex-shrink: 0; }
.account-dropdown-item:hover { background: var(--card-2); }
.account-dropdown-item.is-danger { color: #d92d20; }
.account-dropdown-item.is-danger svg { color: #d92d20; }
.account-dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.btn-nav:hover { background: var(--primary-dark); }

.nav-burger {
    display: none; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer;
    margin-left: auto; position: relative; z-index: 41;
}
.nav-burger span {
    width: 20px; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .16s var(--ease-spring);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-backdrop {
    position: fixed; inset: 0; background: rgba(9,12,20,.44);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 38; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease-spring), visibility 0s linear .3s;
}
.nav-mobile-backdrop.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .3s var(--ease-spring), visibility 0s linear 0s;
}

body.nav-mobile-locked { overflow: hidden; }

/* Mobile nav is a bottom sheet — anchored to thumb reach, not a dropdown snapping in under the bar. */
.nav-mobile {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: min(82vh, 640px); overflow-y: auto;
    padding: 8px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 44px rgba(0,0,0,.26);
    z-index: 39;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .34s var(--ease-spring), visibility 0s linear .34s;
}
.nav-mobile.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .34s var(--ease-spring), visibility 0s linear 0s;
}
@media (prefers-reduced-transparency: reduce) {
    .nav-mobile, .account-dropdown, .settings-dropdown { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav-mobile-handle { width: 36px; height: 4px; border-radius: 3px; background: var(--border); margin: 0 auto 14px; flex-shrink: 0; }
.nav-mobile a { padding: 10px 0; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }

.nav-mobile-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; }
.nav-mobile-profile { display: flex; align-items: center; gap: 12px; border-bottom: none !important; padding: 0 !important; min-width: 0; }
.nav-mobile-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px;
    box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px var(--border);
}
.nav-mobile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-mobile-name { font-weight: 800; font-size: 15.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile-profile-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.nav-mobile-logout { color: #d92d20 !important; border-bottom: none !important; padding: 0 !important; font-size: 13.5px; }
.nav-mobile-divider { height: 1px; background: var(--border); margin: 4px 0 8px; }

/* ---------- Settings menu (language + theme) ---------- */
.settings-menu { position: relative; }
.settings-btn {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--muted);
    cursor: pointer;
}
.settings-btn:hover { color: var(--primary); border-color: var(--primary); }
.settings-btn svg { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.settings-btn.is-open svg { transform: rotate(75deg); }
.settings-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    background: color-mix(in srgb, var(--card) 85%, transparent);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 16px; width: 220px; box-shadow: var(--shadow-card);
    transform-origin: top right;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: scale(.94) translateY(-6px);
    transition: opacity .18s var(--ease-spring), transform .18s var(--ease-spring), visibility 0s linear .18s;
}
.settings-dropdown.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: scale(1) translateY(0);
    transition: opacity .16s var(--ease-spring), transform .16s var(--ease-spring), visibility 0s linear 0s;
}
.settings-group { margin-bottom: 14px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.settings-pills { display: flex; gap: 2px; background: var(--card-2); padding: 3px; border-radius: 11px; }
.settings-pill {
    flex: 1; text-align: center; padding: 7px 10px; border-radius: 8px; border: 1.5px solid transparent;
    background: transparent; color: var(--muted); font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit;
    transition: background .22s var(--ease-spring), color .22s var(--ease-spring), box-shadow .22s var(--ease-spring);
}
.settings-pill.is-active { color: var(--primary); background: var(--card); box-shadow: 0 2px 6px rgba(20,30,60,0.14); }

/* ---------- Night-mode toggle switch (replaces the old Light/Dark pill
   pair with a single on/off control). ---------- */
.theme-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.theme-switch {
    position: relative; width: 44px; height: 25px; border-radius: 100px; border: none;
    background: var(--border); cursor: pointer; padding: 0; flex-shrink: 0;
    transition: background .2s var(--ease-spring);
}
.theme-switch.is-on { background: var(--primary); }
.theme-switch-knob {
    position: absolute; top: 2.5px; left: 2.5px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease-spring);
}
.theme-switch.is-on .theme-switch-knob { transform: translateX(19px); }

@media (max-width: 820px) {
    .navlinks { display: none; }
    .navbar-right { display: none; }
    .nav-burger { display: flex; }
}

/* ---------- Bottom tab bar (mobile primary nav) ---------- */
.bottom-tabbar {
    display: none;
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 40; justify-content: space-between; align-items: center;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border); border-radius: 100px;
    box-shadow: 0 12px 32px -8px rgba(20,30,60,.28);
    padding: 6px;
}
.bt-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px 7px; text-decoration: none; color: var(--muted-2);
}
.bt-icon {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 26px;
    border-radius: 100px; transition: background .2s var(--ease-spring), color .2s var(--ease-spring);
}
.bt-label { font-size: 10.5px; font-weight: 700; line-height: 1; transition: color .2s var(--ease-spring); }
.bt-item.is-active .bt-icon { background: var(--primary-wash); color: var(--primary); }
.bt-item.is-active .bt-label { color: var(--primary); }
.bt-item:active .bt-icon { transform: scale(.92); }

@media (max-width: 820px) {
    .bottom-tabbar { display: flex; }
    body.has-bottom-tabbar { padding-bottom: 82px; }
}

/* ---------- Desktop left sidebar (≥821px only — mobile/Mini App keep the
   top navbar + bottom tab bar exactly as they were) ---------- */
.desktop-sidebar { display: none; }
@media (min-width: 821px) {
    body.has-desktop-sidebar .navbar { display: none; }
    body.has-desktop-sidebar .page-main,
    body.has-desktop-sidebar .site-footer { margin-left: 264px; }

    /* Exam in progress (body.lu-exam-active, set by engine.js/tool.js on
       start) — hide the sidebar entirely so the timed test gets full-width
       focus with no navigation distractions. */
    body.lu-exam-active.has-desktop-sidebar .desktop-sidebar { display: none; }
    body.lu-exam-active.has-desktop-sidebar .page-main { margin-left: 0; }

    .desktop-sidebar {
        display: flex; flex-direction: column; gap: 4px;
        position: fixed; top: 0; left: 0; bottom: 0; width: 264px;
        padding: 22px 16px 18px; box-sizing: border-box;
        background: var(--card); border-right: 1px solid var(--border);
        overflow-y: auto; z-index: 50;
    }
    .ds-logo {
        display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px;
        font-weight: 800; font-size: 18px; color: var(--text);
        position: relative;
    }
    .ds-logo::after {
        content: ''; position: absolute; top: -22px; left: -16px; right: -16px; height: 90px;
        background: radial-gradient(120% 100% at 0% 0%, var(--primary-wash), transparent 70%);
        pointer-events: none; z-index: -1;
    }
    .ds-logo-icon { width: 28px; height: 28px; border-radius: 8px; }

    .ds-nav { display: flex; flex-direction: column; gap: 2px; }
    .ds-nav-item {
        display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
        color: var(--muted); font-weight: 600; font-size: 14.5px;
        position: relative; transition: background .16s var(--ease-spring), color .16s var(--ease-spring);
    }
    .ds-nav-item .icon { flex-shrink: 0; transition: transform .16s var(--ease-spring); }
    .ds-nav-item:hover { background: var(--card-2); color: var(--text); }
    .ds-nav-item.is-active {
        background: var(--primary-wash); color: var(--primary); font-weight: 800;
    }
    .ds-nav-item.is-active::before {
        content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
        width: 3px; height: 18px; border-radius: 0 4px 4px 0;
        background: linear-gradient(180deg, var(--primary), var(--purple));
    }
    .ds-nav-item.is-active .icon { transform: scale(1.08); }

    .ds-spacer { flex: 1; min-height: 12px; }

    .ds-pill-row { display: flex; gap: 6px; padding: 0 4px 8px; }
    .ds-pill {
        flex: 1; text-align: center; padding: 7px 6px; border-radius: 9px;
        background: var(--card-2); border: 1px solid var(--border);
        font-size: 12px; font-weight: 700; color: var(--muted);
    }
    .ds-pill.is-active { background: var(--primary-wash); border-color: transparent; color: var(--primary); }

    .ds-theme-row {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 8px 12px 12px; font-size: 13px; font-weight: 600; color: var(--muted);
    }

    .ds-divider { height: 1px; background: var(--border); margin: 4px 4px 12px; }

    .ds-user-row { display: flex; align-items: center; gap: 6px; }
    .ds-user-card {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
        padding: 8px; border-radius: 14px; transition: background .16s var(--ease-spring);
    }
    .ds-user-card:hover { background: var(--card-2); }
    .ds-user-avatar {
        width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 13px; color: #fff;
    }
    .ds-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .ds-user-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
    .ds-user-name {
        font-size: 13.5px; font-weight: 700; color: var(--text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        display: flex; align-items: center; gap: 4px;
    }
    .ds-user-plan { font-size: 11.5px; color: var(--muted); }
    .ds-icon-btn {
        width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        color: var(--muted); transition: background .16s var(--ease-spring), color .16s var(--ease-spring);
    }
    .ds-icon-btn:hover { background: var(--card-2); color: var(--text); }
    .ds-icon-btn.is-danger:hover { background: #fdecec; color: #d92d20; }
}

/* ---------- Hero pill/action fragments (index.php, reuses page-hero-row) ---------- */

/* ---------- Home hero (welcome section) — ambient background + bigger
   headline, scoped to index.php only via .home-hero so tool pages that
   reuse .page-hero-row/.container h1 elsewhere are untouched. ---------- */
.home-hero-bg {
    position: absolute; top: 0; left: 0; right: 0; height: 640px;
    z-index: -1; overflow: hidden; pointer-events: none;
}
.home-hero-bg::before, .home-hero-bg::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
}
.home-hero-bg::before {
    width: 560px; height: 560px; top: -220px; right: -140px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%);
}
.home-hero-bg::after {
    width: 440px; height: 440px; top: 40px; left: -180px;
    background: radial-gradient(circle, color-mix(in srgb, var(--purple) 28%, transparent), transparent 70%);
}
html[data-theme="dark"] .home-hero-bg::before { background: radial-gradient(circle, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%); }
html[data-theme="dark"] .home-hero-bg::after { background: radial-gradient(circle, color-mix(in srgb, var(--purple) 15%, transparent), transparent 70%); }

.page-hero-row.home-hero { position: relative; }
.home-hero .hero-badge { background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(8px); }
.page-hero-row.home-hero > .phr-text > h1 {
    font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
    text-wrap: balance; max-width: 16ch; margin-bottom: 14px;
}
.home-hero .page-sub { font-size: 17px; max-width: 46ch; line-height: 1.55; }
.home-hero-mascot-wrap { position: relative; flex-shrink: 0; }
.home-hero-mascot-wrap::before {
    content: ''; position: absolute; inset: -22px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent), transparent 72%);
    z-index: -1;
}
@media (max-width: 900px) {
    .page-hero-row.home-hero > .phr-text > h1 { font-size: 36px; max-width: none; }
    .home-hero-bg { height: 480px; }
}

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--border); border-radius: 100px;
    padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--primary);
    margin-bottom: 16px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; margin-bottom: 24px; }

.skills-strip {
    display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap;
}
.skill-pill {
    display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
    padding: 9px 16px; border-radius: 100px; font-weight: 700; font-size: 13.5px; color: var(--text);
}
.skill-pill .ic { font-size: 16px; }
.skill-pill .pill-suffix { color: var(--muted-2); font-weight: 600; }
@media (max-width: 480px) {
    .skill-pill .pill-suffix { display: none; }
    .skill-pill { padding: 9px 15px; font-size: 13px; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease-spring), transform .55s var(--ease-spring); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .nav-mobile, .nav-mobile-backdrop, .settings-dropdown, .nav-burger span, .settings-btn svg {
        transition-duration: .001s !important;
    }
    .tg-splash-mark { animation: none; }
    .tg-splash-progress-fill { animation: none; width: 100%; }
    .tg-splash-glow { animation: none; }
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 13px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .18s var(--ease-spring), transform .12s var(--ease-spring), box-shadow .18s var(--ease-spring);
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: scale(0.96); transition-duration: .08s; }
.btn.secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn.secondary:hover { background: var(--primary-wash); }
.btn.block { width: 100%; }

/* ---------- Auth pages ---------- */

.auth-wrap {
    max-width: 420px;
    margin: 60px auto;
    background: var(--card);
    padding: 36px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(20,30,60,0.08);
    border: 1px solid var(--border);
}
.auth-wrap h1 { margin-top: 0; font-size: 24px; }
/* Mini App only: body is already the shared flex column (display:flex;
   flex-direction:column) — auto margins there center this card in the
   full viewport instead of pinning it near the top with dead space below. */
#miniAuthWrap { margin: auto; }
.auth-wrap p.sub { color: var(--muted); margin-top: 6px; margin-bottom: 24px; font-size: 14px; }

label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; color: var(--text); }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=file], input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    background: #fafbfd;
    transition: border-color .18s var(--ease-spring), box-shadow .18s var(--ease-spring), background .18s var(--ease-spring);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3.5px var(--primary-wash); }

input[type=file] { padding: 7px; color: var(--muted); font-size: 13.5px; }
input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
    border: none; border-radius: 7px; background: var(--primary-wash); color: var(--primary);
    font-weight: 700; font-size: 13px; font-family: inherit; padding: 8px 14px; margin-right: 10px;
    cursor: pointer; transition: background .15s var(--ease-spring);
}
input[type=file]::file-selector-button:hover, input[type=file]::-webkit-file-upload-button:hover { background: var(--primary); color: #fff; }

.auth-wrap .btn { width: 100%; margin-top: 20px; }

.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.password-toggle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: var(--card-2); color: var(--muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.password-toggle:hover { color: var(--text); }

.error-box {
    background: #fdecec; color: #b42318; border: 1px solid #f5b5b1;
    padding: 10px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 10px;
}
.success-box {
    background: #e8f9f1; color: #0a7a52; border: 1px solid #aee8cc;
    padding: 10px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 10px;
}
.notice-box {
    background: #eaf1ff; color: #1d4ed8; border: 1px solid #bcd2fb;
    padding: 10px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 14px;
}

/* ---- Telegram deep-link auth card (register.php / login.php) ---- */
.tg-auth-wrap { text-align: center; }
.tg-auth-wrap h1 { text-align: center; }
.tg-auth-wrap p.sub { text-align: center; }
.tg-auth-wrap label { text-align: left; }
.tg-auth-card { text-align: center; }
.tg-back-link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700;
    font-size: 13.5px; text-decoration: none; margin-top: 16px;
}
.tg-back-link:hover { color: var(--primary); }
.tg-auth-badge {
    width: 56px; height: 56px; border-radius: 50%; background: var(--primary-wash); color: var(--primary);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.tg-auth-badge--ok { background: var(--accent-wash); color: var(--accent); }
.sub-gate-mascot {
    width: 132px; height: auto; object-fit: contain; margin: 0 auto 12px; display: block;
    filter: drop-shadow(0 10px 18px rgba(27,86,253,0.16));
    animation: tgSplashFloat 3s ease-in-out infinite;
}
.sub-gate-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; }
.sub-gate-btn.btn:not(.secondary) { box-shadow: 0 10px 20px -8px rgba(27,86,253,0.5); }
.sub-gate-btn:hover { transform: translateY(-1px); }
.sub-gate-hint { color: var(--muted-2); font-size: 12px; margin: 14px 0 0; }
/* h1 has margin:0 globally and .auth-wrap p.sub only adds 6px above itself
   — fine for a short single-line heading elsewhere, but this card's longer
   two-line heading+body ran straight together with barely a gap. */
.sub-gate-card h1 { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .sub-gate-mascot { animation: none; } }
.tg-widget-frame {
    display: flex; justify-content: center; align-items: center; min-height: 40px;
    background: var(--card-2); border-radius: 14px; padding: 8px; margin: 0 auto;
}
/* Full-bleed branded splash (miniapp/index.php's initial "checking your
   account" screen) — bold color instead of a white card, so the app makes
   an impression in the ~1s before it redirects, the way premium Telegram
   Mini Apps (e.g. MRKT) open. Only active while #miniLoading is showing;
   JS drops body.tg-splash-active once it swaps to the error/new-user card,
   which keeps the normal light auth-card look for actual form states. */
/* Pale blue-white, matching the logo lockup's own background exactly —
   flat, not a gradient, per the reference the user pointed at. Text/progress
   bar/glow all switch to dark-on-light below since white-on-white would be
   invisible now. */
body.tg-splash-active { background: #e6f1f7; margin: 0; }
.tg-splash {
    position: relative;
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: calc(24px + var(--tg-safe-top, 0px)) 32px 60px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}
/* Ambient blobs — brand-blue tinted now (white would be invisible on this
   pale background). Same soft-glow language as .home-hero-bg elsewhere on
   the site. Purely decorative, so aria-hidden. */
.tg-splash-glow {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(50px);
    animation: tgSplashDrift 9s ease-in-out infinite;
}
.tg-splash-glow--1 { width: 240px; height: 240px; top: 6%; left: -14%; background: rgba(61,108,240,.14); }
.tg-splash-glow--2 { width: 280px; height: 280px; bottom: 8%; right: -16%; background: rgba(139,92,246,.10); animation-delay: 3s; }
.tg-splash-glow--3 { width: 170px; height: 170px; top: 44%; right: 4%; background: rgba(61,108,240,.10); animation-delay: 6s; }
.tg-splash-mark {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 32px;
    filter: drop-shadow(0 16px 30px rgba(10,20,60,.35));
    animation: tgSplashFloat 3s ease-in-out infinite;
}
.tg-splash-mark::before {
    content: ''; position: absolute; inset: -34px; border-radius: 50%;
    background: radial-gradient(circle, rgba(61,108,240,.18), transparent 70%);
    filter: blur(18px); z-index: -1;
}
@keyframes tgSplashDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6%, -8%) scale(1.1); }
}
/* Width matches the source PNG's native pixel size exactly (134px) —
   WebKit has a known bug where DOWNSCALING a PNG with soft/anti-aliased
   alpha edges renders a faint dashed/dotted ring around the edge (visible
   on-device even though it never showed up in a lossless desktop
   screenshot). Displaying at native resolution means no resampling
   happens at all, which is the only fully reliable fix; translateZ(0)
   forces its own compositing layer as a second line of defense. */
.tg-splash-mascot { width: 134px; height: auto; object-fit: contain; transform: translateZ(0); }
.tg-splash-progress {
    width: 180px; height: 4px; border-radius: 100px; background: rgba(61,108,240,.16);
    overflow: hidden; margin-bottom: 22px;
}
.tg-splash-progress-fill {
    display: block; height: 100%; width: 36%; border-radius: 100px; background: #3d6cf0;
    animation: tgSplashProgress 1.3s ease-in-out infinite;
}
.tg-splash-tagline {
    color: #1c2333; font-weight: 800; font-size: 19px; line-height: 1.35; letter-spacing: .01em;
    max-width: 280px; margin: 0;
}
@keyframes tgSplashFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tgSplashProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.tg-auth-status {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px;
    font-size: 13.5px; color: var(--muted); font-weight: 600;
}
.tg-auth-status .spin { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.tg-username-row { position: relative; }
.tg-username-row input { padding-right: 40px; }
.tg-username-check {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
}
.tg-username-check.is-ok { color: var(--accent); }
.tg-username-check.is-bad { color: #d92d20; }

/* ---------- Profile page ---------- */
.profile-hero-sub { color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 600; margin: 2px 0 0; text-align: center; }

.profile-sub-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px 24px; margin-bottom: 20px;
}
.profile-sub-label { font-size: 12.5px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.profile-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.profile-sub-plan { font-size: 24px; font-weight: 800; color: var(--text); }
.profile-sub-plan.is-pro { color: var(--primary); }
.profile-sub-upgrade { width: auto; padding: 10px 18px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.profile-exit-section-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 20px; margin-bottom: 20px;
    background: var(--primary-wash); color: var(--primary); font-weight: 700; font-size: 14.5px;
    border-radius: 14px; text-decoration: none;
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
}
.profile-exit-section-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.profile-exit-section-btn:active { transform: translateY(0); box-shadow: none; }

.profile-row-list { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 20px; }
.profile-row { border-bottom: 1px solid var(--border); }
.profile-row:last-child { border-bottom: none; }
.profile-row-header {
    width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
    transition: background .15s var(--ease-spring);
}
.profile-row-header:hover { background: var(--card-2); }
.profile-row-icon {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-wash); color: var(--primary);
}
.profile-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-row-title { font-size: 15px; font-weight: 700; color: var(--text); }
.profile-row-sub { font-size: 12.5px; color: var(--muted); }
.profile-row-chevron { color: var(--muted-2); flex-shrink: 0; display: flex; transition: transform .18s var(--ease-spring); }
.profile-row.is-open .profile-row-chevron { transform: rotate(90deg); }
.profile-row-panel { display: none; padding: 4px 18px 20px; }
.profile-row.is-open .profile-row-panel { display: block; }
.profile-row-panel .settings-pills { margin-top: 0; }

.profile-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px; margin-bottom: 20px;
}
.profile-card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s var(--ease-spring); }

/* ---------- Profile hero (avatar identity block) — distinct gradient
   treatment so it doesn't look like just another one of the flat white
   settings cards stacked below it. ---------- */
.profile-hero {
    position: relative; overflow: hidden; border-radius: 22px; padding: 20px 26px;
    background: var(--gradient-hero); box-shadow: var(--shadow-hero); margin-bottom: 20px;
}
.profile-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% -15%, rgba(255,255,255,.24), transparent 55%);
}
.profile-hero .profile-avatar-row { position: relative; }
.profile-hero .profile-avatar { box-shadow: 0 0 0 4px rgba(255,255,255,.32); }
.profile-hero .profile-avatar-initials { box-shadow: 0 0 0 4px rgba(255,255,255,.32); }
.profile-hero .profile-display-name { color: #fff; }
.profile-hero .plan-badge--basic { background: rgba(255,255,255,.2); color: #fff; }
.profile-hero .plan-badge--pro { background: rgba(255,255,255,.94); color: #92600a; }
.profile-hero .exam-badge { background: rgba(255,255,255,.2); color: #fff; }
.profile-hero .profile-upload-btn.btn.secondary { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.profile-hero .profile-upload-btn.btn.secondary:hover { background: rgba(255,255,255,.22); }
.profile-hero .profile-remove-btn { color: rgba(255,255,255,.8); }
.profile-hero .profile-remove-btn:hover { color: #fff; }
.profile-hero .error-box { position: relative; }

/* Telegram-profile-style centered header: big avatar, name and badges
   stacked and centered underneath, instead of the left-aligned row. */
.profile-hero.is-centered .profile-avatar-row { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.profile-hero.is-centered .profile-avatar,
.profile-hero.is-centered .profile-avatar-initials { width: 76px; height: 76px; font-size: 28px; }
.profile-hero.is-centered .profile-name-line { justify-content: center; margin-top: 8px; }
.profile-hero.is-centered .profile-display-name { font-size: 20px; }
.profile-hero.is-centered .profile-avatar-actions { flex-direction: row; margin-top: 14px; }

/* Tap-the-photo-to-change-it (Telegram pattern) — a <label for=avatarInput>
   wraps the photo itself so clicking it opens the file picker directly,
   with a small camera badge as the affordance instead of a separate
   "Rasm yuklash" button taking up its own row. */
.profile-avatar-tap { display: block; cursor: pointer; position: relative; border-radius: 50%; }
.profile-avatar-camera-badge {
    position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.25);
    transition: transform .15s var(--ease-spring);
}
.profile-avatar-tap:hover .profile-avatar-camera-badge { transform: scale(1.08); }
.profile-avatar-remove-badge {
    position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; border: 2px solid rgba(255,255,255,.85); padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s var(--ease-spring), transform .1s;
}
.profile-avatar-remove-badge:hover { background: #d92d20; }
.profile-avatar-remove-badge:active { transform: scale(.92); }

/* ---------- Telegram-Info-style field list: small label above a plain
   underline-free value, divided by hairlines — replaces the boxed-input
   look for read-at-a-glance profile fields (still editable where relevant,
   just without form-field chrome). ---------- */
.profile-field-list { display: flex; flex-direction: column; }
.profile-field { padding: 13px 0; border-bottom: 1px solid var(--border); }
.profile-field:last-child { border-bottom: none; }
.profile-field-label { font-size: 12.5px; color: var(--muted-2); font-weight: 600; margin: 0 0 3px; }
.profile-field input[type=text] {
    width: 100%; border: none; background: none; padding: 0; margin: 0;
    font-size: 15.5px; font-weight: 500; color: var(--text); font-family: inherit; border-radius: 0;
}
.profile-field input[type=text]:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
.profile-field input[type=text]:focus { outline: none; box-shadow: none; background: none; }

/* ---------- Lightweight action list (Admin/Logout) — a simple iOS-Settings
   style row list instead of full bordered "cards" for one-line nav actions,
   so the page isn't 7 identically-weighted white boxes in a row. ---------- */
.profile-list { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 20px; }
.profile-list-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border);
    transition: background .15s var(--ease-spring);
}
.profile-list-item:last-child { border-bottom: none; }
.profile-list-item:hover { background: var(--card-2); }
.profile-list-item.is-danger .profile-link-label { color: #d92d20; }
.profile-list-item.is-danger .profile-link-label .icon { color: #d92d20; }
.profile-card-link:hover { border-color: var(--primary); }
.profile-card-link-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted-2); }
.profile-link-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.profile-link-label .icon { color: var(--muted); }
.profile-logout-link .profile-link-label { color: #d92d20; }
.profile-logout-link .profile-link-label .icon { color: #d92d20; }
.profile-logout-link:hover { border-color: #d92d20; }

.streak-chip {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
    background: #fff4e5; color: #b45309; font-weight: 800; font-size: 13px;
    padding: 6px 14px; border-radius: 100px;
}
html[data-theme="dark"] .streak-chip { background: rgba(245,185,66,.14); color: var(--amber); }

/* ---------- Day streak widget (self-training.php) ---------- */
@keyframes streakFireFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}
@keyframes streakTodayGlow {
    0%, 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(245,158,11,.32); }
    50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px rgba(245,158,11,.5); }
}
.streak-card {
    position: relative; overflow: hidden; margin-bottom: 30px; padding: 26px 28px;
    background: linear-gradient(160deg, #fffaf2 0%, #fff2df 60%, #ffe9cc 100%);
    border: 1px solid rgba(245,158,11,.16); border-radius: 22px;
    box-shadow: 0 22px 44px -28px rgba(217,119,6,.45), var(--shadow-card);
}
.streak-card::before {
    content: ''; position: absolute; top: -60px; right: -50px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(245,158,11,.22), transparent 70%); pointer-events: none;
}
html[data-theme="dark"] .streak-card {
    background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    border-color: rgba(245,185,66,.18); box-shadow: 0 22px 44px -28px rgba(245,185,66,.2), var(--shadow-card);
}
html[data-theme="dark"] .streak-card::before { background: radial-gradient(circle, rgba(245,185,66,.16), transparent 70%); }

.streak-card-top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; position: relative; }
.streak-fire-glow {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; flex-shrink: 0;
}
.streak-fire-glow::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.28), transparent 72%);
}
.streak-fire {
    position: relative; font-size: 42px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(217,119,6,.4));
    animation: streakFireFloat 2.6s ease-in-out infinite;
}
.streak-count-block { display: flex; flex-direction: column; }
.streak-count {
    font-size: 40px; font-weight: 800; line-height: 1.05; color: #d97706;
    text-shadow: 0 2px 14px rgba(217,119,6,.22);
}
html[data-theme="dark"] .streak-count { color: var(--amber); text-shadow: 0 2px 14px rgba(245,185,66,.22); }
.streak-count-label { font-size: 14.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.streak-subtitle { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 20px; position: relative; }

.streak-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; position: relative; margin-bottom: 20px; }
.streak-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 4px; border-radius: 15px; background: var(--card);
    border: 1.5px solid var(--border); box-shadow: inset 0 1px 2px rgba(20,30,60,.03);
    transition: background .18s var(--ease-spring), border-color .18s var(--ease-spring), transform .18s var(--ease-spring), box-shadow .18s var(--ease-spring);
}
.streak-day-icon { display: flex; align-items: center; justify-content: center; height: 17px; font-size: 17px; line-height: 1; color: var(--muted-2); }
.streak-day-icon .icon { width: 15px; height: 15px; }
.streak-day-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--muted-2); }
.streak-day.is-active {
    background: linear-gradient(160deg, #ffd694, #ffab40); border-color: transparent;
    box-shadow: 0 10px 20px -10px rgba(217,119,6,.55), inset 0 1px 0 rgba(255,255,255,.5);
    transform: translateY(-1px);
}
.streak-day.is-active .streak-day-icon { color: #fff; }
.streak-day.is-active .streak-day-label { color: #92400e; font-weight: 800; }
html[data-theme="dark"] .streak-day.is-active {
    background: linear-gradient(160deg, rgba(245,185,66,.32), rgba(245,158,11,.2));
    box-shadow: 0 10px 20px -10px rgba(245,185,66,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .streak-day.is-active .streak-day-label { color: var(--amber); }
.streak-day.is-today:not(.is-active) { border-color: rgba(245,158,11,.4); animation: streakTodayGlow 2.4s ease-in-out infinite; }

.streak-progress-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.streak-progress-right { color: var(--muted); font-weight: 600; }
.streak-progress-bar {
    position: relative; height: 8px; border-radius: 100px; background: rgba(217,119,6,.14);
    margin-top: 4px; margin-bottom: 4px;
}
html[data-theme="dark"] .streak-progress-bar { background: rgba(245,185,66,.14); }
.streak-progress-fill {
    display: block; height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    transition: width .4s var(--ease-spring);
}

.streak-milestones-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: 22px 24px; margin-bottom: 30px; box-shadow: var(--shadow-card);
}
.streak-milestones-title { font-size: 15.5px; font-weight: 800; margin: 0 0 18px; }
.streak-milestones-row { display: flex; align-items: flex-start; }
.streak-milestone {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    flex: 0 0 auto; width: 76px;
}
.streak-milestone-icon {
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 19px; background: var(--card-2); border: 1px solid var(--border);
    filter: grayscale(1) opacity(.55);
}
.streak-milestone.is-reached .streak-milestone-icon {
    background: linear-gradient(160deg, #ffd694, #ffab40); border-color: transparent; filter: none;
    box-shadow: 0 8px 16px -8px rgba(217,119,6,.5);
}
.streak-milestone-days { font-size: 12.5px; font-weight: 800; color: var(--text); margin-top: 2px; }
.streak-milestone-label { font-size: 11px; color: var(--muted); }
.streak-milestone-line { flex: 1 1 auto; height: 2px; background: var(--border); margin: 22px -4px 0; min-width: 8px; }
.streak-milestone-line.is-reached { background: linear-gradient(90deg, #ffab40, #f59e0b); }

@media (prefers-reduced-motion: reduce) {
    .streak-fire, .streak-day.is-today:not(.is-active) { animation: none; }
}

@media (max-width: 700px) {
    .streak-card { padding: 20px; border-radius: 20px; }
    .streak-fire-glow { width: 52px; height: 52px; }
    .streak-fire { font-size: 34px; }
    .streak-count { font-size: 32px; }
    .streak-day { padding: 11px 2px; border-radius: 13px; }
    .streak-day-label { font-size: 10px; }
    .streak-milestones-card { padding: 18px; }
    .streak-milestone { width: 62px; }
    .streak-milestone-icon { width: 38px; height: 38px; font-size: 16px; }
    .streak-milestone-label { font-size: 10px; }
}

/* ---------- Container / AI tools featured cards ---------- */

.container { max-width: 1080px; margin: 0 auto; padding: 40px 20px; }
.container h1 { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.container > p.page-sub { color: var(--muted); margin-bottom: 30px; }

.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 44px; }
.tools-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Self-training/study-tools: a compact list, not a card grid — same shape
   at every width, no per-breakpoint column juggling needed. */
.tools-grid.cols-auto { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Home landing: skill showcase (zig-zag rows, not a generic
   equal-card grid — each skill gets its own accent color, alternating
   text/visual sides) ---------- */
.skills-showcase { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.skill-row {
    display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; min-height: 230px;
    background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-spring), border-color .2s var(--ease-spring);
}
.skill-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--border); }
.skill-row.is-reverse { grid-template-columns: 1fr 1.15fr; }
.skill-row.is-reverse .skill-row-text { order: 2; }
.skill-row.is-reverse .skill-row-visual { order: 1; }
.skill-row-text { padding: 38px 42px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; justify-content: center; }
.skill-row-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.skill-row-text h3 { font-size: 21px; font-weight: 800; }
.skill-row-text p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 38ch; margin: 6px 0 14px; }
.skill-row-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--primary); }
.skill-row:hover .skill-row-cta { gap: 7px; }
.skill-row-cta { transition: gap .2s var(--ease-spring); }
.skill-row-visual { display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.skill-row-visual img {
    width: 156px; height: 156px; object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(20,30,60,0.18));
    transition: transform .25s var(--ease-spring);
}
.skill-row:hover .skill-row-visual img { transform: scale(1.06) rotate(-2deg); }

.skill-row.listening .skill-row-icon { background: var(--primary-wash); color: var(--primary); }
.skill-row.listening .skill-row-visual { background: color-mix(in srgb, var(--primary) 9%, var(--card-2)); }
.skill-row.listening .skill-row-cta { color: var(--primary); }
.skill-row.reading .skill-row-icon { background: var(--accent-wash); color: var(--accent); }
.skill-row.reading .skill-row-visual { background: color-mix(in srgb, var(--accent) 9%, var(--card-2)); }
.skill-row.reading .skill-row-cta { color: var(--accent); }
.skill-row.writing .skill-row-icon { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.skill-row.writing .skill-row-visual { background: color-mix(in srgb, var(--amber) 9%, var(--card-2)); }
.skill-row.writing .skill-row-cta { color: var(--amber); }
.skill-row.speaking .skill-row-icon { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.skill-row.speaking .skill-row-visual { background: color-mix(in srgb, var(--purple) 9%, var(--card-2)); }
.skill-row.speaking .skill-row-cta { color: var(--purple); }

@media (max-width: 760px) {
    .skill-row, .skill-row.is-reverse { grid-template-columns: 1fr; min-height: 0; }
    .skill-row .skill-row-visual { order: -1; padding: 28px 20px 12px; }
    .skill-row .skill-row-text { padding: 20px 24px 28px; align-items: center; text-align: center; }
    .skill-row-text p { max-width: none; }
    .skill-row-visual img { width: 120px; height: 120px; }
}

/* Compact cards for the other skills — deliberately a different template
   from .skill-row (vertical, icon-led, mascot tucked in the corner) so the
   showcase isn't the same layout repeated four times. */
.skills-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skill-mini-card {
    position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: 24px 22px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-height: 168px;
    text-decoration: none; color: inherit;
    transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-spring);
}
.skill-mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.skill-mini-card img {
    position: absolute; right: -8px; bottom: -8px; width: 82px; height: 82px; object-fit: contain;
    opacity: .95; filter: drop-shadow(0 8px 14px rgba(20,30,60,.14));
    transition: transform .25s var(--ease-spring);
}
.skill-mini-card:hover img { transform: scale(1.08) rotate(-4deg); }
.skill-mini-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.skill-mini-card h3 { font-size: 16.5px; font-weight: 800; margin-top: 10px; position: relative; z-index: 1; }
.skill-mini-card p { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 20ch; margin: 0; position: relative; z-index: 1; }
.skill-mini-cta { font-size: 12.5px; font-weight: 700; margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 3px; position: relative; z-index: 1; }

.skill-mini-card.reading .skill-mini-icon { background: var(--accent-wash); color: var(--accent); }
.skill-mini-card.reading .skill-mini-cta { color: var(--accent); }
.skill-mini-card.writing .skill-mini-icon { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.skill-mini-card.writing .skill-mini-cta { color: var(--amber); }
.skill-mini-card.speaking .skill-mini-icon { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.skill-mini-card.speaking .skill-mini-cta { color: var(--purple); }

@media (max-width: 900px) {
    .skills-mini-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .skills-mini-grid { grid-template-columns: 1fr; }
}

/* ---------- Home landing: "How it works" steps ---------- */
.how-it-works { margin-bottom: 56px; }
.how-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 18px; }
.how-steps::before {
    content: ''; position: absolute; top: 19px; left: 19px; right: 19px; height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--purple)); opacity: .22; z-index: 0;
}
.how-step { position: relative; display: flex; flex-direction: column; gap: 6px; }
.how-step-num {
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--purple)); color: #fff; border: none;
    font-weight: 800; font-size: 15px; margin-bottom: 12px; position: relative; z-index: 1;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent);
}
.how-step h3 { font-size: 16.5px; font-weight: 800; }
.how-step p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 760px) {
    .how-steps { grid-template-columns: 1fr; gap: 24px; }
    .how-steps::before { display: none; }
}

.tool-card {
    background: var(--card); border: 1px solid transparent; border-radius: 18px;
    padding: 14px 18px; display: flex; align-items: center; gap: 16px; position: relative;
    box-shadow: 0 1px 0 rgba(20,30,60,0.03);
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
    text-decoration: none; color: inherit;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.tool-card .tool-body { flex: 1; min-width: 0; }
.tool-card h3 { font-size: 16px; margin: 0 0 3px; }
.tool-card p {
    color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tool-card .tool-chevron { flex-shrink: 0; color: var(--muted-2); transition: transform .15s var(--ease-spring); }
.tool-card:hover .tool-chevron { transform: translateX(2px); }
.tool-card .tool-mascot { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(20,30,60,0.14)); }

.tool-card.listening { background: var(--primary-wash); }
.tool-card.listening .tool-chevron { color: var(--primary); }
.tool-card.reading { background: var(--accent-wash); }
.tool-card.reading .tool-chevron { color: var(--accent); }
.tool-card.writing { background: #fff4e5; }
.tool-card.writing .tool-chevron { color: var(--amber); }
.tool-card.speaking { background: #f3f0ff; }
.tool-card.speaking .tool-chevron { color: var(--purple); }
.tool-card.articles { background: #fdeaf2; }
.tool-card.articles .tool-chevron { color: var(--rose); }
.tool-card.grammar { background: #eceafd; }
.tool-card.grammar .tool-chevron { color: var(--indigo); }
.tool-card.vocabulary { background: #e7f7ee; }
.tool-card.vocabulary .tool-chevron { color: #16a34a; }
html[data-theme="dark"] .tool-card.writing { background: rgba(245,185,66,.14); }
html[data-theme="dark"] .tool-card.speaking { background: rgba(157,140,255,.14); }
html[data-theme="dark"] .tool-card.articles { background: rgba(240,103,158,.14); }
html[data-theme="dark"] .tool-card.grammar { background: rgba(131,133,247,.14); }
html[data-theme="dark"] .tool-card.vocabulary { background: rgba(22,163,74,.14); }

/* ---------- Category grid (practice test bank) ---------- */

.section-label {
    font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted-2); margin: 40px 0 16px; display: flex; align-items: center; gap: 6px;
}
.section-label--top { margin-top: 0; }
.section-label .icon { flex-shrink: 0; }

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.cat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}

.cat-card h3 {
    margin-top: 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 14px;
}
.cat-card h3 .count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted-2); background: var(--bg); padding: 2px 9px; border-radius: 100px; }

.test-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}
.test-item:last-child { border-bottom: none; }
.test-item span { font-size: 14px; }

.test-item a.open {
    background: var(--primary-wash);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.test-item a.open:hover { background: var(--primary); color: #fff; }

.empty-note { color: var(--muted-2); font-size: 13.5px; }

/* ---------- Attempts / results table ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

th, td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

th { background: var(--card-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); }
tr:last-child td { border-bottom: none; }

.badge {
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
}
.badge.listening { background: var(--primary); }
.badge.reading { background: var(--accent); }
.badge.writing { background: var(--amber); }
.badge.speaking { background: var(--purple); }

.band-pill {
    display: inline-block; font-weight: 800; font-size: 13px; color: var(--primary);
    background: var(--primary-wash); padding: 3px 10px; border-radius: 100px;
}

/* ---------- Dashboard: test history (progress.php) ---------- */
.dash-history { display: flex; flex-direction: column; gap: 10px; }
.dash-history-row {
    display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: 13px 16px; text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dash-history-row:hover { border-color: var(--muted-2); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(20,30,60,.32); }
.dash-history-icon {
    width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--primary-wash); color: var(--primary);
}
.dash-history-icon.listening { background: var(--primary-wash); color: var(--primary); }
.dash-history-icon.reading { background: var(--accent-wash); color: var(--accent); }
.dash-history-icon.writing { background: #fff4e5; color: var(--amber); }
.dash-history-icon.speaking { background: #f3f0ff; color: var(--purple); }
.dash-history-body { flex: 1; min-width: 0; }
.dash-history-title {
    font-weight: 700; font-size: 14.5px; color: var(--text); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.dash-history-meta { font-size: 12.5px; color: var(--muted-2); text-transform: capitalize; margin-top: 2px; }
.dash-history-band {
    flex-shrink: 0; font-weight: 800; font-size: 15px; padding: 3px 10px; border-radius: 100px;
    background: var(--card-2); color: var(--muted);
}
.dash-history-band.good { background: var(--accent-wash); color: var(--accent); }
.dash-history-band.mid { background: #fff4e5; color: var(--amber); }
.dash-history-band.low { background: #fdecec; color: #d92d20; }
.dash-history-date { flex-shrink: 0; font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }
@media (max-width: 560px) {
    .dash-history-date { display: none; }
}

/* ---------- Profile avatar (profile.php, group.php teacher/member rows) ---------- */

.profile-avatar-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.profile-avatar {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-initials {
    display: flex; align-items: center; justify-content: center; background: var(--primary);
    color: #fff; font-size: 28px; font-weight: 800; border-radius: 50%;
}
.profile-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-upload-btn { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 9px 16px; cursor: pointer; font-size: 13.5px; }
.profile-remove-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 700;
    cursor: pointer; padding: 4px;
}
.profile-remove-btn:hover { color: #d92d20; }

.username-field { position: relative; }
.username-field input { padding-right: 70px; }
.username-status {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    font-size: 12px; font-weight: 700;
}
.username-status.is-free { color: var(--accent); }
.username-status.is-taken { color: #d92d20; }

/* ---------- Site footer ---------- */

.site-footer { border-top: 1px solid var(--border); margin-top: 50px; background: var(--card); }
.site-footer-inner {
    max-width: 1080px; margin: 0 auto; padding: 26px 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    font-weight: 700; font-size: 14px; color: var(--text);
}
.footer-muted { color: var(--muted-2); font-weight: 500; font-size: 13px; }

.footer-social { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-social a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.footer-social a:hover { color: var(--primary); }

@media (max-width: 640px) {
    .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer-social { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; width: 100%; }
}

/* ---------- Home landing: closing CTA — own scoped class so the shared
   .dash-progress-locked upsell card (used on dashboard/group/study-plan/
   etc.) isn't affected by making this specific marketing moment bolder. */
.home-closing-cta {
    position: relative; overflow: hidden; text-align: center;
    background: var(--gradient-hero); border-radius: 28px; padding: 56px 40px;
    margin: 8px 0 44px; box-shadow: var(--shadow-hero);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.home-closing-cta-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.20), transparent 45%),
                radial-gradient(circle at 88% 88%, rgba(255,255,255,.14), transparent 50%);
}
.home-closing-cta-icon {
    width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; color: #fff;
    margin-bottom: 10px; position: relative;
}
.home-closing-cta h2 { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; max-width: 22ch; position: relative; margin: 0; }
.home-closing-cta p { color: rgba(255,255,255,.86); font-size: 15.5px; max-width: 46ch; margin: 10px 0 20px; position: relative; }
.home-closing-cta .btn.btn--lg { background: #fff; color: var(--primary-dark); position: relative; }
.home-closing-cta .btn.btn--lg:hover { background: rgba(255,255,255,.92); }
@media (max-width: 600px) {
    .home-closing-cta { padding: 40px 24px; }
    .home-closing-cta h2 { font-size: 23px; }
}

@media (max-width: 700px) {
    .tools-grid, .tools-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ===================================================================
   Shared "AI Practice Tool" components — used by Writing, Speaking,
   and Articles so every tool page looks and behaves the same way.
   =================================================================== */

.tool-page { max-width: 760px; margin: 0 auto; padding: 32px 20px 90px; }

/* iOS-style back control — tinted like a native nav-bar back button (not a
   muted breadcrumb), with its own tappable pill hit-area so it actually
   feels like a button, not just colored text. */
.tool-back {
    display: inline-flex; width: fit-content; align-items: center; gap: 1px;
    color: var(--primary); font-weight: 700; font-size: 15px; margin-bottom: 22px; margin-left: -10px;
    padding: 7px 14px 7px 8px; border-radius: 100px;
    transition: background .16s var(--ease-spring), transform .1s;
}
.tool-back:hover { background: var(--primary-wash); }
.tool-back:active { transform: scale(.95); background: var(--primary-wash); }
.tool-back .icon { width: 21px; height: 21px; }

.tool-header { margin-bottom: 28px; }
.tool-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; color: var(--primary);
    font-weight: 800; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px;
}
.tool-eyebrow .icon { width: 15px; height: 15px; }
.tool-header h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; }
.tool-header p { color: var(--muted); font-size: 15.5px; max-width: 54ch; }

/* ---- Mascot illustrations (claymorphism brand character) ---- */
/* Inside the Telegram Mini App, the navbar already carries the user's own
   identity (avatar/name) and screen space is tight — repeating a big
   mascot + page title/subtitle right below it on every page (dashboard,
   self-training, study-tools, etc., all built on this shared component)
   was redundant chrome, not real content. Browser/desktop keeps it. */
html.tg-miniapp .page-hero-row { display: none; }
/* Small text label standing in for the hidden hero's title wherever the
   hero itself is hidden (Mini App always, mobile web below 700px) — the
   list still needs *something* naming it, just not a big mascot banner. */
.mobile-only-label { display: none; }
html.tg-miniapp .mobile-only-label { display: block; }
.page-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-hero-row > .phr-text { flex: 1; min-width: 0; }
.page-hero-row > .phr-text > h1 { margin-bottom: 8px; }
.page-hero-row > .phr-text > .tool-header { margin-bottom: 0; }
/* Generic tool-page header mascot (self-training, listening, dashboard,
   etc.) — a small inline avatar, not a big floating illustration. Home's
   hero and the login/register splash images use --lg and stay untouched. */
.page-hero-mascot { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.page-hero-mascot--lg { width: 200px; height: 200px; }
.page-hero-mascot--sm { width: 84px; height: 84px; }
@media (max-width: 700px) {
    .page-hero-row { flex-direction: column-reverse; text-align: center; gap: 4px; }
    .page-hero-row > .phr-text { text-align: center; }
    .page-hero-row > .phr-text p { max-width: none; }
    .page-hero-mascot { width: 108px; height: 108px; margin: 0 auto; }
    .page-hero-mascot--lg { width: 150px; height: 150px; }
    .page-hero-row .hero-actions, .page-hero-row .skills-strip { justify-content: center; }

    /* Same call as the Mini App: on a small screen the bottom tab bar
       already carries page context, so the generic tool-page mascot +
       title/subtitle header is redundant chrome, not real content. */
    .page-hero-row:not(.home-hero) { display: none; }
    .mobile-only-label { display: block; }
}
.empty-mascot { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 14px; display: block; }

/* ---- mode selector (Separate vs Exam condition) ---- */

.mode-select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 30px; }
.mode-card {
    background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 22px; cursor: pointer; text-align: left; font-family: inherit; position: relative;
    transition: border-color .15s var(--ease-spring), box-shadow .15s var(--ease-spring), transform .15s var(--ease-spring);
}
.mode-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.mode-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); }
.mode-card .mc-icon {
    width: 40px; height: 40px; border-radius: 12px; background: var(--primary-wash); color: var(--primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.mode-card .mc-mascot {
    width: 60px; height: 60px; object-fit: contain; margin-bottom: 10px; display: block;
    filter: drop-shadow(0 6px 12px rgba(20,30,60,0.14));
    transition: transform .22s var(--ease-spring);
}
.mode-card:hover .mc-mascot { transform: scale(1.08) rotate(-3deg); }
.mode-card h3 { font-size: 15.5px; margin-bottom: 4px; color: var(--text); }
.mode-card p { font-size: 13px; color: var(--muted); margin: 0; }
.mode-card .mcc-chevron { position: absolute; top: 22px; right: 20px; color: var(--muted-2); transition: transform .18s var(--ease-spring), color .18s var(--ease-spring); }
.mode-card:hover .mcc-chevron { transform: translateX(3px); color: var(--primary); }

/* Dashboard's top-level section chooser (Self-training + each Group) — like
   .mode-select but with as many columns as sections exist, not a fixed 2. */
.dash-section-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 8px; }
@media (max-width: 560px) {
    .dash-section-menu { grid-template-columns: 1fr; }
}

/* ---- sub-choice pills (Task 1 / Task 2, Part 1 / 2 / 3) ---- */

.pill-select { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.pill-choice {
    padding: 9px 18px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--card);
    font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; font-family: inherit;
}
.pill-choice.is-active { border-color: var(--primary); background: var(--primary-wash); color: var(--primary); }

/* ---- prompt / exam card ---- */

.exam-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px; margin-bottom: 20px; position: relative;
}
.exam-card-tag {
    display: inline-flex; align-items: center; gap: 6px; background: var(--primary-wash); color: var(--primary);
    font-weight: 800; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 100px; margin-bottom: 14px;
}
.exam-card-meta { font-size: 12.5px; font-weight: 700; color: var(--muted-2); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.exam-card-text { font-size: 17px; line-height: 1.6; color: var(--text); white-space: pre-line; min-height: 30px; }
.exam-card-text.is-empty { color: var(--muted-2); font-style: italic; }
.exam-card-actions { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.data-table th, .data-table td { padding: 8px 12px; border: 1px solid var(--border); text-align: right; }
.data-table th:first-child, .data-table td:first-child { text-align: left; font-weight: 700; }
.data-table th { background: var(--bg); font-weight: 800; color: var(--muted); }

/* ---- timer ---- */

.timer-bar {
    display: flex; align-items: center; gap: 8px; background: #1c2333; color: #fff;
    padding: 8px 16px; border-radius: 100px; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}
.timer-bar.is-low { background: #b42318; }
.timer-bar .icon { width: 15px; height: 15px; }

/* ---- recorder / textarea shared ---- */

.answer-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.answer-card textarea {
    width: 100%; min-height: 260px; resize: vertical; border: none; outline: none;
    font-family: 'Manrope', sans-serif; font-size: 15.5px; line-height: 1.7; color: var(--text); padding: 0;
}
.answer-card textarea::placeholder { color: var(--muted-2); }
.answer-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; flex-wrap: wrap; gap: 10px; }
.word-count { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.word-count.is-ok { color: var(--accent); }

.rec-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 0; }
.rec-btn {
    display: inline-flex; align-items: center; gap: 9px; background: #b42318; color: #fff;
    border: none; border-radius: 100px; padding: 13px 24px; font-weight: 800; font-size: 14.5px; cursor: pointer;
}
.rec-btn .rec-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.rec-btn.is-recording .rec-live-dot { animation: recblink 1s ease-in-out infinite; }
@keyframes recblink { 0%,100%{opacity:.4} 50%{opacity:1} }
.rec-btn:disabled { opacity: .5; cursor: not-allowed; }
audio.tool-audio { width: 100%; margin-top: 16px; }

/* ---- status / error ---- */

.tool-status { display: none; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); margin-top: 16px; font-weight: 600; }
.tool-status.is-active { display: flex; }
.tool-status .spin { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Standalone spinner (e.g. inside a button while an async action runs) — not
   scoped to .tool-status, uses currentColor so it matches the button's text color. */
.spin { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }

.tool-error {
    display: none; background: #fdecec; border: 1px solid #f5b5b1; color: #b42318;
    border-radius: 10px; padding: 13px 16px; font-size: 13.5px; margin-top: 16px; font-weight: 600;
}
.tool-error.is-active { display: block; }

/* ---- results ---- */

#toolResults { display: none; }
#toolResults.is-active { display: block; animation: fadein .3s var(--ease-spring); }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.band-hero { display: flex; justify-content: center; margin: 8px 0 30px; }
.band-ring { position: relative; width: 156px; height: 156px; }
.band-ring svg { transform: rotate(-90deg); }
.band-ring .ring-track { stroke: var(--border); }
.band-ring .ring-fill { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1); }
.band-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.band-ring-label .num { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; }
.band-ring-label .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted-2); margin-top: 4px; text-transform: uppercase; }

.criteria-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 26px; }
.criterion-row .criterion-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.criterion-badge {
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--primary);
    background: var(--primary-wash); padding: 2px 8px; border-radius: 5px;
}
.criterion-name { font-weight: 700; font-size: 14.5px; flex: 1; }
.criterion-score { font-weight: 800; font-size: 14.5px; color: var(--text); }
.gauge { position: relative; height: 7px; border-radius: 4px; background: var(--border); margin-bottom: 6px; overflow: hidden; }
.gauge-fill { position: absolute; inset: 0; width: 0%; background: var(--primary); border-radius: 4px; transition: width .8s cubic-bezier(.2,.8,.3,1); }
.criterion-comment { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }

.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.notes-col h3 { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; color: var(--muted-2); }
.notes-col.strengths h3 { color: var(--accent); }
.notes-col.improve h3 { color: #b45309; }
.notes-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.notes-col.strengths li::before { content: '✓ '; color: var(--accent); font-weight: 800; }
.notes-col.improve li::before { content: '→ '; color: #b45309; font-weight: 800; }

.examiner-note {
    font-size: 14.5px; line-height: 1.65; color: var(--text); background: var(--bg);
    border-left: 3px solid var(--primary); padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 0;
}

.transcript-box { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-top: 4px; }
.transcript-box h3 { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 10px; }
.transcript-box p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---- exam-mock multi-part progress ---- */

.exam-top-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.exam-progress { display: flex; gap: 8px; margin-bottom: 22px; }
.exam-progress .ep-step {
    flex: 1; height: 6px; border-radius: 4px; background: var(--border); position: relative; overflow: hidden;
}
.exam-progress .ep-step.is-done, .exam-progress .ep-step.is-active { background: var(--primary); }

/* ===================================================================
   Articles module
   =================================================================== */

/* justify-content:center needs a capped (not 1fr) max track size to have
   anything to work with — 1fr always consumes all leftover space itself,
   leaving none for centering. Capping also fixes the actual bug this was
   for: an incomplete last row (e.g. 17 cards in 3 columns leaves 2) sat
   left-aligned with a lopsided gap beside it instead of centered. */
.daily-article-card {
    display: block; background: var(--gradient-hero); border-radius: 22px; padding: 26px 28px;
    color: #fff; text-decoration: none; margin-bottom: 24px; box-shadow: var(--shadow-hero);
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
}
.daily-article-card:hover { transform: translateY(-2px); }
.dac-label {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18);
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 12px; border-radius: 100px; margin-bottom: 12px;
}
.daily-article-card h2 { font-size: 21px; margin: 0 0 8px; }
.daily-article-card p { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 16px; max-width: 60ch; }
.dac-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; background: rgba(255,255,255,.15); padding: 8px 16px; border-radius: 10px; }

.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); gap: 18px; justify-content: center; }
.article-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; position: relative; }
.article-card.is-hidden { display: none; }
.article-card > .btn { margin-top: auto; align-self: flex-start; }
.article-card .plan-badge, .article-card .status { position: absolute; top: 20px; right: 20px; }
.ac-level { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--purple); background: #f3f0ff; padding: 3px 9px; border-radius: 100px; margin-bottom: 10px; }
/* On the article-reader page .ac-level is a sibling of .tool-back (an
   inline-flex "< Articles" link), not inside a flex column like the grid
   card - without this it just trails inline next to "< Articles" with none
   of its pill styling able to give it its own line. */
.article-reader > .ac-level { display: block; width: fit-content; }
.article-card h3 { font-size: 15.5px; margin-bottom: 6px; }
.article-card p { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* each part/section/passage name as its own distinct chip, not run together */
.ac-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; }
.ac-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    padding: 4px 9px 4px 7px; border-radius: 20px; background: var(--card-2); border: 1px solid var(--border);
    color: var(--muted); white-space: nowrap; line-height: 1.3;
}
.ac-chip b { color: var(--primary); font-weight: 800; font-size: 10px; }
.ac-chip.ac-chip-more { color: var(--muted-2); font-weight: 800; padding: 4px 9px; }

/* compact list view (shared with Grammar's toolbar) */
.articles-grid.is-list { display: flex; flex-direction: column; gap: 10px; }
.articles-grid.is-list .article-card { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 12px 18px; }
.articles-grid.is-list .article-card > .btn { margin-top: 0; align-self: center; }
.articles-grid.is-list .article-card .ac-level { margin: 0; flex-shrink: 0; }
.articles-grid.is-list .article-card h3 { margin: 0; font-size: 14.5px; flex-shrink: 0; min-width: 160px; }
.articles-grid.is-list .article-card p { margin: 0; flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.articles-grid.is-list .article-card .ac-chips { flex: 1; flex-wrap: nowrap; overflow: hidden; margin: 0; }
.articles-grid.is-list .article-card .ac-chip { flex-shrink: 0; }
.articles-grid.is-list .article-card .btn { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }
.articles-grid.is-list .article-card .plan-badge, .articles-grid.is-list .article-card .status { position: static; margin: 0; flex-shrink: 0; }
@media (max-width: 640px) {
    .articles-grid.is-list .article-card { flex-wrap: wrap; }
    .articles-grid.is-list .article-card p, .articles-grid.is-list .article-card .ac-chips { display: none; }
}

.article-reader { max-width: 720px; margin: 0 auto; padding: 32px 20px 90px; }
.article-reader h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.article-reader .ar-meta { color: var(--muted-2); font-size: 13px; margin-bottom: 28px; }
.article-body { font-size: 17px; line-height: 1.85; color: var(--text); }
.article-body p { margin: 0 0 20px; }
.article-body .lu-word { cursor: pointer; border-radius: 3px; transition: background .12s var(--ease-spring); }
.article-body .lu-word:hover { background: var(--primary-wash); }
.article-body .lu-word.is-highlighted { background: #fff3b0; color: #1a1a12; }

.article-body .ar-page-img {
    display: block; width: 100%; height: auto; border-radius: var(--radius);
    margin: 0 0 24px; box-shadow: var(--shadow-card); border: 1px solid var(--border);
}
.article-body .ar-hero-img { margin-bottom: 28px; }
.article-body h2 { font-size: 22px; font-weight: 800; margin: 8px 0 16px; }
.article-body p:first-of-type::first-letter {
    font-size: 3.4em; font-weight: 800; float: left; line-height: 0.85;
    padding: 6px 8px 0 0; color: var(--primary);
}

/* Full-page PDF render, exactly as in the source, with an invisible per-word
   overlay positioned from the PDF's own text coordinates (percent-based, so
   it stays aligned at any zoom/screen width) — this is what makes highlight
   and dictionary-on-hover work directly on the real page image instead of on
   a separately-extracted text block below it. */
.article-body .ar-pdf-page {
    position: relative; width: 100%; line-height: 0;
    margin: 0 0 6px; border-radius: 10px; overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--border);
}
.article-body .ar-pdf-page-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.article-body .ar-pdf-word-layer { position: absolute; inset: 0; }
.article-body .ar-pdf-word-layer .lu-word {
    position: absolute; color: transparent; background: transparent;
    cursor: pointer; overflow: hidden; white-space: nowrap; font-size: 10px;
    border-radius: 2px; transition: background .1s var(--ease-spring);
}
.article-body .ar-pdf-word-layer .lu-word:hover { background: rgba(27,86,253,0.28); }
.article-body .ar-pdf-word-layer .lu-word.is-highlighted { background: rgba(255,214,0,0.55); }

.word-popover {
    position: absolute; z-index: 100; background: var(--text); color: #fff; border-radius: 12px;
    padding: 14px 16px; max-width: 280px; font-size: 13.5px; box-shadow: 0 16px 40px rgba(0,0,0,.25);
    opacity: 0; transform: translateY(4px) scale(.98); pointer-events: none; transition: opacity .12s var(--ease-spring), transform .12s var(--ease-spring);
    /* Long/multi-sense definitions used to grow this unbounded and run off
       the bottom of the screen — cap it and let it scroll internally instead. */
    max-height: min(52vh, 360px); overflow-y: auto; overscroll-behavior: contain;
}
.word-popover.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.word-popover::after {
    /* Points up at the tapped word by default (popover sits below it). When
       reader.js adds .wp-flip-up (not enough room below, so the popover was
       placed above the word instead), the tail flips to the bottom so it
       still points at the word — see the .wp-flip-up rule right below. */
    content: ''; position: absolute; top: -6px; left: 20px; width: 12px; height: 12px;
    background: var(--text); transform: rotate(45deg);
}
.word-popover.wp-flip-up::after { top: auto; bottom: -6px; }
.wp-word { font-weight: 800; font-size: 14.5px; margin-bottom: 6px; text-transform: capitalize; }
.wp-audio-btn { border: none; background: rgba(255,255,255,.06); border-radius: 6px; width: 22px; height: 22px; font-size: 11px; line-height: 1; cursor: pointer; margin-left: 4px; vertical-align: middle; padding: 0; transition: background .15s; }
.wp-audio-btn:hover { background: rgba(255,255,255,.14); }
.sa-word { color: var(--muted-2); transition: color .12s linear; }
.sa-word.is-read { color: var(--text); }
.sa-player { display: flex; align-items: center; gap: 12px; background: var(--card-2); border-radius: 14px; padding: 8px 8px 8px 8px; }
.sa-play-btn { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: var(--primary); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s, opacity .12s; padding: 0; }
.sa-play-btn:hover { opacity: .9; }
.sa-play-btn:active { transform: scale(.94); }
.sa-play-btn .icon { margin-left: 2px; }
.sa-play-btn:has(.icon-pause) .icon { margin-left: 0; }
.sa-play-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-text-toggle { background: none; border: none; color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 10px; white-space: nowrap; border-radius: 8px; transition: background .12s; }
.sa-text-toggle:hover { background: var(--primary-wash); }
.wp-row { display: flex; gap: 8px; margin-bottom: 8px; }
.wp-row:last-child { margin-bottom: 0; }
.wp-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9aa8d4; flex-shrink: 0; padding-top: 2px; }
.wp-val { color: #e8ebf7; line-height: 1.5; }
.wp-loading { color: #9aa8d4; font-style: italic; }
.article-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 24px; }
.article-toolbar .at-title { display: none; }
.article-toolbar .at-actions { display: flex; gap: 10px; }
.article-toolbar button {
    display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--border);
    border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--muted);
    white-space: nowrap;
}
.article-toolbar button.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }

/* Fullscreen reading mode — driven entirely by this CSS class, not by
   whether the native Fullscreen API worked (iOS Safari doesn't support
   requestFullscreen() on arbitrary elements at all, so a class-based
   full-viewport overlay is what actually makes this work on every device;
   the native API is layered on top as a bonus where it exists).
   The page itself goes edge-to-edge (no side gutters, no width cap) so it
   fills exactly as much width as the screen has; a blurred glass toolbar
   with the article title + controls stays pinned at the top. */
#articleReader.is-fullscreen {
    position: fixed; inset: 0; z-index: 200; max-width: none;
    background: var(--bg); overflow-y: auto; padding: 0;
}
body.lu-fs-lock { overflow: hidden; }
#articleReader.is-fullscreen .tool-back,
#articleReader.is-fullscreen > .ac-level,
#articleReader.is-fullscreen > h1,
#articleReader.is-fullscreen > .ar-meta { display: none; }

#articleReader.is-fullscreen .article-toolbar {
    position: sticky; top: 0; z-index: 20;
    justify-content: space-between; gap: 16px;
    margin: 0; padding: 12px 16px;
    background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border-bottom: 1px solid var(--border); box-shadow: 0 8px 28px rgba(20,30,60,.10);
}
/* Inside the Mini App this overlay goes truly edge-to-edge (inset: 0), so
   with top:0 it sat directly under Telegram's own floating chrome (close/
   collapse controls) and the device status bar - same --tg-safe-top pill
   used for the reading/listening exam screens, applied as extra top
   padding here since the toolbar is sticky rather than the page's own
   top-level padding. */
html.tg-miniapp #articleReader.is-fullscreen .article-toolbar {
    padding-top: calc(12px + var(--tg-safe-top, 0px));
}
html[data-theme="dark"] #articleReader.is-fullscreen .article-toolbar { background: rgba(18,21,31,.82); }
#articleReader.is-fullscreen .at-title {
    display: block; font-weight: 800; font-size: 14.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
}
#articleReader.is-fullscreen #fullscreenBtn.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }

#articleReader.is-fullscreen .article-body { max-width: none; margin: 0; padding: 14px 0 48px; }
#articleReader.is-fullscreen .ar-pdf-page { border-radius: 0; border-left: none; border-right: none; box-shadow: none; margin-bottom: 3px; }

@media (max-width: 560px) {
    /* No room for the title once both buttons are on-screen at this width —
       drop it rather than let flex-shrink squeeze it into an unreadable sliver. */
    #articleReader.is-fullscreen .at-title { display: none; }
    #articleReader.is-fullscreen .article-toolbar { justify-content: center; padding: 12px; }
    #articleReader.is-fullscreen .article-toolbar button { padding: 7px 11px; font-size: 12.5px; }
}

@media (max-width: 640px) {
    .mode-select { grid-template-columns: 1fr; }
    .notes-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Reading Test Player — fully dynamic, data-driven exam UI
   =================================================================== */

.reading-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.reading-start { max-width: 480px; margin: 90px auto; text-align: center; }
.reading-start-badge {
    display: inline-flex; align-items: center; gap: 8px; background: var(--primary-wash); color: var(--primary);
    font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 100px; margin-bottom: 18px;
}
.reading-start h1 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.reading-start p { color: var(--muted); margin-bottom: 28px; }
.reading-start .mode-select, .reading-start .pill-select { text-align: left; }
.reading-start .pill-select { justify-content: center; }
.reading-start-back { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--muted); }
.reading-start-back:hover { color: var(--primary); }

.test-outline {
    text-align: left; background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
    padding: 6px 16px; margin-bottom: 24px;
}
.test-outline-item { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.test-outline-item:last-child { border-bottom: none; }
.toi-num { font-size: 11.5px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; white-space: nowrap; }
.toi-title { font-size: 13.5px; color: var(--text); }
.btn--lg { padding: 15px 32px; font-size: 16px; }

.paywall-card {
    background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--amber);
    border-radius: var(--radius); padding: 40px 32px;
}
.paywall-card .reading-start-badge { background: rgba(217,144,0,.12); color: var(--amber); }

/* ---------- Plan / balance (profile page) ---------- */
.profile-name-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.profile-display-name { font-size: 17px; font-weight: 800; color: var(--text); }
.plan-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 100px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.plan-badge--basic { background: var(--card-2); color: var(--muted); }
.plan-badge--pro { background: linear-gradient(135deg, #f6b73c, #e8912a); color: #fff; }
.plan-badge--visible { background: rgba(0,194,168,.14); color: #00967f; }
.plan-badge--hidden { background: rgba(217,45,32,.1); color: #d92d20; }
button.plan-badge { border: none; cursor: pointer; }

.exam-badge {
    display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 100px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    background: var(--primary-wash); color: var(--primary); border: 1px solid var(--border);
}

.plan-summary-row { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 8px; }
.balance-label { font-size: 12px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.balance-amount { font-size: 22px; font-weight: 800; color: var(--text); }
.plan-expiry { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.plan-expiry .icon { flex-shrink: 0; }

/* ---------- Billing page — gradient plan/balance hero, echoing .profile-hero's
   treatment so the plan+balance snapshot reads as the page's headline, not
   just another gray settings box (the mascot/title row above it is hidden
   inside the Telegram Mini App, so this card is the real first impression
   there). ---------- */
.billing-hero {
    position: relative; overflow: hidden; border-radius: 22px; padding: 22px 26px;
    background: var(--gradient-hero); box-shadow: var(--shadow-hero); margin-bottom: 16px; color: #fff;
}
.billing-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% -15%, rgba(255,255,255,.24), transparent 55%);
}
.billing-hero-row { position: relative; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.billing-hero-stat { flex: 1; min-width: 140px; }
.billing-hero-stat .balance-label { color: rgba(255,255,255,.72); }
.billing-hero-stat .balance-amount { color: #fff; }
.billing-hero-stat .plan-expiry { color: rgba(255,255,255,.78); }
.billing-hero-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.billing-hero .plan-badge--pro { background: rgba(255,255,255,.94); color: #92600a; }
.billing-hero-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }
@media (max-width: 480px) {
    .billing-hero-divider { display: none; }
}

/* ---------- Pro benefits card — warm gold/premium treatment (matching
   .plan-badge--pro and .streak-card's amber gradient language) instead of
   a flat gray box, so the Pro pitch itself feels like the premium tier
   it's selling rather than blending into the settings-card stack. ---------- */
.pro-benefits-card {
    position: relative; overflow: hidden; margin-bottom: 20px; padding: 22px 24px; border-radius: 20px;
    background: linear-gradient(160deg, #fffaf2 0%, #fff2df 60%, #ffe9cc 100%);
    border: 1px solid rgba(245,158,11,.16);
    box-shadow: 0 22px 44px -28px rgba(217,119,6,.35), var(--shadow-card);
}
.pro-benefits-card::before {
    content: ''; position: absolute; top: -60px; right: -50px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(245,158,11,.22), transparent 70%); pointer-events: none;
}
html[data-theme="dark"] .pro-benefits-card {
    background: linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    border-color: rgba(245,185,66,.18); box-shadow: 0 22px 44px -28px rgba(245,185,66,.18), var(--shadow-card);
}
html[data-theme="dark"] .pro-benefits-card::before { background: radial-gradient(circle, rgba(245,185,66,.16), transparent 70%); }
.pbc-head { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pbc-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 100px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff;
    background: linear-gradient(135deg, #f6b73c, #e8912a); flex-shrink: 0;
}
.pro-benefits-card h3 { position: relative; font-size: 15.5px; margin: 0; }
.plan-benefits { position: relative; list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.plan-benefits li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.plan-benefits li .icon { color: #d97706; flex-shrink: 0; }
html[data-theme="dark"] .plan-benefits li .icon { color: var(--amber); }

.topup-cta {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 18px; padding: 13px 18px; border-radius: 12px; text-decoration: none;
    background: linear-gradient(135deg, #f6b73c, #e8912a); color: #fff; font-size: 13.5px; font-weight: 700;
    text-align: center; box-shadow: 0 10px 24px -12px rgba(217,119,6,.55);
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
}
.topup-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(217,119,6,.6); }
.topup-cta:active { transform: translateY(0); }
.topup-cta .icon { flex-shrink: 0; }

/* ---------- Progress dashboard charts ---------- */
.skill-chart { width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis-label { font-size: 7px; fill: var(--muted-2); font-family: inherit; }
.chart-line { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-line--listening { stroke: var(--chart-listening); }
.chart-line--reading { stroke: var(--chart-reading); }
.chart-line--writing { stroke: var(--chart-writing); }
.chart-line--speaking { stroke: var(--chart-speaking); }
.chart-dot { stroke: var(--card); stroke-width: 2; }
.chart-dot--listening { fill: var(--chart-listening); }
.chart-dot--reading { fill: var(--chart-reading); }
.chart-dot--writing { fill: var(--chart-writing); }
.chart-dot--speaking { fill: var(--chart-speaking); }
.chart-value-label { font-size: 12px; font-weight: 800; font-family: inherit; }
.chart-value-label--listening { fill: var(--chart-listening); }
.chart-value-label--reading { fill: var(--chart-reading); }
.chart-value-label--writing { fill: var(--chart-writing); }
.chart-value-label--speaking { fill: var(--chart-speaking); }
.chart-empty { color: var(--muted); font-size: 13px; padding: 40px 0; text-align: center; }

.skill-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 700px) { .skill-card-grid { grid-template-columns: 1fr; } }
.skill-chart-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.skill-chart-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.skill-chart-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.skill-chart-icon--listening { background: var(--primary-wash); color: var(--chart-listening); }
.skill-chart-icon--reading { background: var(--accent-wash); color: var(--chart-reading); }
.skill-chart-icon--writing { background: #fff4e5; color: var(--chart-writing); }
.skill-chart-icon--speaking { background: #f3f0ff; color: var(--chart-speaking); }
html[data-theme="dark"] .skill-chart-icon--writing { background: rgba(172,116,0,.16); }
html[data-theme="dark"] .skill-chart-icon--speaking { background: rgba(126,107,219,.16); }
.skill-chart-title { font-weight: 800; font-size: 15px; }
.skill-chart-stats { display: flex; gap: 18px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.skill-chart-stat .num { font-size: 15px; font-weight: 800; color: var(--text); }
.skill-chart-stat .lbl { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; }

.ml-speaking-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 8px 0 4px; }
.ml-speaking-block { display: flex; flex-direction: column; gap: 6px; }
.ml-speaking-block-label { font-size: 11.5px; color: var(--muted-2); font-weight: 700; }

.overall-band-hero {
    display: flex; align-items: center; gap: 24px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px 28px; margin-bottom: 24px; flex-wrap: wrap;
}
.overall-band-num { font-size: 42px; font-weight: 800; color: var(--primary); line-height: 1; }
.overall-band-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ---------- Dashboard: brief Progress summary (top of page) ---------- */
.dash-progress-top { margin-bottom: 22px; }
.dash-progress-card {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--gradient-hero); border: none; border-radius: 22px; padding: 28px 30px;
    box-shadow: var(--shadow-hero); color: #fff; position: relative; overflow: hidden;
}
.dash-progress-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% -15%, rgba(255,255,255,.28), transparent 55%);
}
.dash-progress-main { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; }
.dash-progress-ring-wrap { flex-shrink: 0; width: 84px; height: 84px; position: relative; }
.dash-progress-ring-wrap svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.dash-progress-ring-bg { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 6; }
.dash-progress-ring-fg { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .7s var(--ease-spring); }
.dash-progress-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-progress-ring-label .num { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
/* Sized to stay inside the ring's actual curve, not just its 84px square
   box — a label sitting below center (like this one) only has the circle's
   narrower chord width to work with, not the full diameter. Longer labels
   ("OVERALL BAND", "O'ZLASHTIRILGAN") were spilling past the stroke before
   this was tightened. */
.dash-progress-ring-label .lbl {
    font-size: 6.2px; font-weight: 700; color: rgba(255,255,255,.82); text-transform: uppercase;
    letter-spacing: .01em; margin-top: 3px; text-align: center; max-width: 58px; line-height: 1.15;
}
.dash-progress-info h2 { font-size: 18px; margin: 0 0 4px; color: #fff; }
.dash-progress-info p { color: rgba(255,255,255,.85); font-size: 13.5px; margin: 0; }

/* Dashboard-only: the user's own photo inside the ring instead of plain
   text, with the band score moved to a small badge on the ring's edge —
   makes the hero card feel like "your" progress, not a generic gauge. */
.dash-progress-avatar {
    position: absolute; inset: 9px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; color: #fff; background-size: cover;
    border: 2px solid rgba(255,255,255,.35);
}
.dash-progress-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-progress-band-badge {
    position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    background: #fff; color: var(--primary); font-size: 12px; font-weight: 800;
    padding: 2px 9px; border-radius: 100px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.2); line-height: 1.6;
}
.dash-progress-btn-row { display: flex; gap: 8px; flex-shrink: 0; position: relative; }
.dash-progress-btn { width: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--primary-dark); position: relative; }
.dash-progress-btn:hover { background: rgba(255,255,255,.9); }
.dash-progress-share-btn { padding: 0; width: 40px; height: 40px; justify-content: center; background: rgba(255,255,255,.22); color: #fff; }
.dash-progress-share-btn:hover { background: rgba(255,255,255,.32); }

.dash-progress-locked {
    display: flex; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--border);
    border-radius: 22px; padding: 24px 28px; flex-wrap: wrap;
}
.dash-progress-locked-icon {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; color: #fff;
    background: var(--gradient-hero); box-shadow: var(--shadow-hero); display: flex; align-items: center; justify-content: center;
}
.dash-progress-locked-body { flex: 1; min-width: 200px; }
.dash-progress-locked-body h2 { font-size: 17px; margin: 0 0 4px; }
.dash-progress-locked-body p { color: var(--muted); font-size: 13.5px; margin: 0; }
.dash-progress-locked .btn { width: auto; flex-shrink: 0; }

@media (max-width: 560px) {
    .dash-progress-card, .dash-progress-locked { flex-direction: column; align-items: stretch; text-align: center; }
    .dash-progress-main { flex-direction: column; }
    .dash-progress-btn, .dash-progress-locked .btn { width: 100%; justify-content: center; }
    .dash-progress-btn-row { width: 100%; }
    .dash-progress-btn-row .dash-progress-btn:not(.dash-progress-share-btn) { flex: 1; }
    .dash-progress-share-btn { width: 40px; flex-shrink: 0; }
    .dash-progress-locked-body { min-width: 0; }
}

/* ---------- Generic "AI generates this for you" CTA banner ----------
   List row, not a stacked/centered hero — a mascot avatar on the left,
   text in the middle, chevron on the right, same row shape at every
   width (was flipping to a centered column below 560px before). */
.ai-cta-card {
    display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border);
    border-radius: 20px; padding: 14px 16px; margin-bottom: 24px; text-decoration: none; color: inherit;
    transition: border-color .15s var(--ease-spring), transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
}
.ai-cta-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.ai-cta-mascot { flex-shrink: 0; width: 54px; height: 54px; object-fit: contain; }
.ai-cta-body { flex: 1; min-width: 0; }
.ai-cta-body h2 { font-size: 16px; margin: 0 0 3px; }
.ai-cta-body p { color: var(--muted); font-size: 13px; margin: 0; }
.ai-cta-btn { width: 36px; height: 36px; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
@media (max-width: 380px) {
    .ai-cta-card { padding: 12px 14px; gap: 10px; }
    .ai-cta-mascot { width: 44px; height: 44px; }
}

/* ---------- Shareable band card (client-side canvas render) ---------- */
.share-card-preview-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.share-card-preview-wrap canvas {
    width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border-radius: 24px; box-shadow: var(--shadow-card);
}
.share-card-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.share-card-actions .btn { width: auto; }
@media (max-width: 560px) { .share-card-actions .btn { width: 100%; } }

/* ---------- Weekly study plan (rule-based recommendations) ----------
   Detailed list rows, one tinted color per skill (same wash/accent pairing
   .tool-card.* already uses site-wide). Each row carries a reason tag (why
   this item was recommended) plus a right-side stat (band / days / word
   count) — a raw 🎯 emoji glued onto the title used to be the only
   "priority" signal; now it's a proper corner tag and a real number. */
.study-plan { margin-top: 24px; }
.study-plan .section-label { margin: 0 0 12px; }
.wfl-list { display: flex; flex-direction: column; gap: 10px; }
.wfl-row {
    position: relative; display: flex; align-items: center; gap: 14px;
    border-radius: 16px; padding: 14px 16px; color: inherit; text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
}
.wfl-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.wfl-icon {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: var(--card);
}
.wfl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wfl-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wfl-title { font-size: 14.5px; font-weight: 800; color: var(--text); }
.wfl-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wfl-priority-tag, .wfl-reason-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 800; font-size: 9.5px; letter-spacing: .02em; text-transform: uppercase;
    padding: 3px 7px 3px 5px; border-radius: 100px; white-space: nowrap;
}
.wfl-priority-tag { background: rgba(255,255,255,.75); }
.wfl-reason-tag { background: rgba(120,120,140,.12); color: var(--muted); }
html[data-theme="dark"] .wfl-priority-tag { background: rgba(0,0,0,.28); }
html[data-theme="dark"] .wfl-reason-tag { background: rgba(255,255,255,.1); }
.wfl-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.wfl-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.wfl-stat-num { font-size: 16px; font-weight: 800; color: var(--text); }
.wfl-stat-label { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }

.wfl-listening { background: var(--primary-wash); }
.wfl-listening .wfl-icon, .wfl-listening .wfl-priority-tag { color: var(--primary); }
.wfl-reading { background: var(--accent-wash); }
.wfl-reading .wfl-icon, .wfl-reading .wfl-priority-tag { color: var(--accent); }
.wfl-writing { background: #fff4e5; }
.wfl-writing .wfl-icon, .wfl-writing .wfl-priority-tag { color: var(--amber); }
html[data-theme="dark"] .wfl-writing { background: rgba(245,185,66,.14); }
.wfl-speaking { background: #f3f0ff; }
.wfl-speaking .wfl-icon, .wfl-speaking .wfl-priority-tag { color: var(--purple); }
html[data-theme="dark"] .wfl-speaking { background: rgba(157,140,255,.14); }
.wfl-vocab { background: var(--card-2); }
.wfl-vocab .wfl-icon, .wfl-vocab .wfl-priority-tag { color: var(--indigo); }

/* Static rows (vocabulary CEFR-level breakdown) — informational, not a
   link, so no hover-lift affordance implying they're clickable. */
.wfl-row.is-static { cursor: default; }
.wfl-row.is-static:hover { transform: none; box-shadow: none; }
.wfl-level-badge {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; background: var(--card);
}
.wfl-body .vocab-bar-track { margin-top: 6px; max-width: 220px; }

.wfl-lvl-a2 { background: #e7f7ee; }
.wfl-lvl-a2 .wfl-level-badge, .wfl-lvl-a2 .wfl-stat-num { color: #16a34a; }
.wfl-lvl-a2 .vocab-bar-fill { background: #16a34a; }
.wfl-lvl-b1 { background: var(--primary-wash); }
.wfl-lvl-b1 .wfl-level-badge, .wfl-lvl-b1 .wfl-stat-num { color: var(--primary); }
.wfl-lvl-b1 .vocab-bar-fill { background: var(--primary); }
.wfl-lvl-b2 { background: #f3f0ff; }
.wfl-lvl-b2 .wfl-level-badge, .wfl-lvl-b2 .wfl-stat-num { color: var(--purple); }
.wfl-lvl-b2 .vocab-bar-fill { background: var(--purple); }
html[data-theme="dark"] .wfl-lvl-b2 { background: rgba(157,140,255,.14); }
.wfl-lvl-c1 { background: #fdeaf2; }
.wfl-lvl-c1 .wfl-level-badge, .wfl-lvl-c1 .wfl-stat-num { color: var(--rose); }
.wfl-lvl-c1 .vocab-bar-fill { background: var(--rose); }
html[data-theme="dark"] .wfl-lvl-c1 { background: rgba(240,103,158,.14); }

@media (max-width: 420px) {
    .wfl-desc { -webkit-line-clamp: 1; }
    .wfl-stat-label { display: none; }
}

/* ---------- Goal-based Study Plan (onboarding wizard + dashboard) ---------- */
.container--narrow { max-width: 720px; }

.goal-step-label { text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin: -6px 0 26px; }
.goal-q-title { font-size: 21px; margin: 0 0 6px; }
.goal-q-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.goal-option-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.goal-option-grid--band { grid-template-columns: repeat(3, 1fr); }
.goal-option { width: 100%; }
.goal-option h3 { margin: 0; }
@media (max-width: 480px) {
    .goal-option-grid, .goal-option-grid--band { grid-template-columns: repeat(2, 1fr); }
}
.goal-checkbox-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.goal-checkbox-row input { width: auto; margin: 0; }
.goal-nav-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.goal-nav-row .btn { width: auto; flex-shrink: 0; }
@media (max-width: 480px) { .goal-nav-row .btn { flex: 1; } }

.goal-hero-card {
    background: var(--gradient-hero); border: none; border-radius: 22px; padding: 26px 28px;
    box-shadow: var(--shadow-hero); color: #fff; position: relative; overflow: hidden; margin-bottom: 18px;
}
.goal-hero-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% -15%, rgba(255,255,255,.28), transparent 55%);
}
.goal-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; }
.goal-hero-days { flex-shrink: 0; }
.goal-hero-days .num { font-size: 40px; font-weight: 800; line-height: 1; }
.goal-hero-days .lbl { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.goal-hero-bands { display: flex; align-items: center; gap: 14px; }
.ghb-item { display: flex; flex-direction: column; align-items: center; }
.ghb-num { font-size: 24px; font-weight: 800; line-height: 1; }
.ghb-lbl { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }
.ghb-arrow { color: rgba(255,255,255,.6); }
.goal-hero-gap { position: relative; margin-top: 16px; font-size: 14.5px; font-weight: 700; color: #fff; }
.goal-hero-edit {
    position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    background: rgba(255,255,255,.18); color: #fff; border-radius: 100px; padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background .15s var(--ease-spring);
}
.goal-hero-edit:hover { background: rgba(255,255,255,.28); }
@media (max-width: 560px) {
    .goal-hero-top { flex-direction: column; align-items: flex-start; }
}

.goal-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; margin-bottom: 22px; }
.goal-notice p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.goal-notice strong { font-size: 14px; }
.goal-notice .gn-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.goal-notice--risk { background: #fff7ed; border: 1px solid #fde3b8; }
.goal-notice--risk .gn-icon { background: #fef0d9; color: var(--amber); }
.goal-notice--ok { background: var(--accent-wash); border: 1px solid var(--border); }
.goal-notice--ok .gn-icon { background: rgba(0,194,168,.14); color: var(--accent); }
.goal-notice--start { background: var(--primary-wash); border: 1px solid var(--border); }
.goal-notice--start .gn-icon { background: rgba(27,86,253,.14); color: var(--primary); }
html[data-theme="dark"] .goal-notice--risk { background: #2b2013; border-color: #4a3a1a; }
html[data-theme="dark"] .goal-notice--ok { background: #10241f; }
html[data-theme="dark"] .goal-notice--start { background: #131a30; }

.goal-skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 480px) { .goal-skill-grid { grid-template-columns: 1fr; } }
.goal-skill-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px;
    color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s var(--ease-spring), transform .15s var(--ease-spring), box-shadow .15s var(--ease-spring);
}
.goal-skill-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.goal-skill-card.is-priority { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-wash); }
.gsc-top { display: flex; align-items: center; gap: 8px; }
.gsc-label { font-weight: 700; font-size: 13.5px; flex: 1; }
.gsc-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary); background: var(--primary-wash); padding: 3px 8px; border-radius: 100px; }
.gsc-bottom { display: flex; align-items: center; }
.gsc-band { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); }
.gsc-band--none { color: var(--muted-2); font-weight: 600; }

.goal-phases { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 4px 18px; margin-bottom: 24px; }
.goal-phase-row.is-active .mock-step-icon { background: var(--primary-wash); color: var(--primary); }
.goal-phase-row.is-active .mock-step-note { color: var(--primary); font-weight: 700; }
.goal-retake-row { display: flex; justify-content: center; margin-top: 8px; }
.goal-retake-row .btn { width: auto; }

/* ---------- Vocabulary (spaced repetition flashcards) ---------- */
.vocab-bar-track { height: 5px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.vocab-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--primary); transition: width .4s var(--ease-spring); }

.vocab-progress-row { display: flex; align-items: center; gap: 12px; margin: 22px 0 28px; }
.vocab-progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; }
.vocab-progress-fill { display: block; height: 100%; border-radius: 3px; background: var(--gradient-hero); transition: width .4s var(--ease-spring); }
.vocab-progress-label { font-size: 13px; font-weight: 700; color: var(--muted-2); flex-shrink: 0; }

.vocab-card-stage { perspective: 1400px; margin-bottom: 22px; }
.vocab-card {
    position: relative; min-height: 280px; cursor: pointer;
    transform-style: preserve-3d; transition: transform .5s var(--ease-spring);
}
.vocab-card.is-flipped { transform: rotateY(180deg); }
.vocab-card-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--card); border: 1px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow-card); padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.vocab-card-back { transform: rotateY(180deg); }
.vocab-card-hint { position: absolute; top: 18px; right: 20px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.vocab-word-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.vocab-word { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.vocab-pronounce-btn {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: var(--primary-wash); color: var(--primary);
    border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    transition: background .12s, transform .12s;
}
.vocab-pronounce-btn:hover { background: var(--primary); color: #fff; }
.vocab-pronounce-btn:active { transform: scale(.92); }
.vocab-ipa { font-size: 16px; color: var(--muted); margin-bottom: 6px; }
.vocab-pos { font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-wash); padding: 3px 12px; border-radius: 100px; text-transform: uppercase; letter-spacing: .04em; }
.vocab-meaning { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.vocab-meaning-en { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.vocab-example { font-size: 14.5px; color: var(--text); font-style: italic; margin-bottom: 6px; max-width: 40ch; }
.vocab-example-uz { font-size: 13px; color: var(--muted-2); max-width: 40ch; }

.vocab-actions { display: flex; gap: 12px; }
.vocab-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.vocab-btn-no.btn.secondary { border-color: #f5b5b1; color: #d92d20; }
.vocab-btn-no.btn.secondary:hover { background: #fdecec; }
.vocab-btn-yes.btn { background: var(--accent); }
.vocab-btn-yes.btn:hover { background: #00a690; }
.vocab-flip-note { text-align: center; color: var(--muted-2); font-size: 13px; margin-top: 16px; }
@media (max-width: 560px) {
    .vocab-card { min-height: 320px; }
    .vocab-word { font-size: 28px; }
}

/* ---------- Leaderboard ---------- */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
    display: grid; grid-template-columns: 30px 38px 1fr auto 54px; align-items: center; gap: 12px;
    padding: 10px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    transition: border-color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.lb-row:hover { transform: translateX(2px); }
.lb-row.is-me { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-wash); }
.lb-row.is-top { background: linear-gradient(155deg, var(--card), var(--card-2)); }
.lb-rank { font-weight: 800; color: var(--muted-2); text-align: center; display: flex; align-items: center; justify-content: center; }
.lb-rank-1 { color: #eab308; }
.lb-rank-2 { color: #94a3b8; }
.lb-rank-3 { color: #c2703d; }
.lb-name { font-weight: 700; font-size: 14px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you-tag { font-size: 10px; font-weight: 800; color: var(--primary); background: var(--primary-wash); padding: 2px 8px; border-radius: 100px; margin-left: 6px; text-transform: uppercase; letter-spacing: .03em; }
.lb-attempts { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }
.lb-band { font-weight: 800; font-size: 16px; color: var(--primary); text-align: right; }
@media (max-width: 560px) {
    .lb-row { grid-template-columns: 24px 32px 1fr 44px; }
    .lb-attempts { display: none; }
}

/* ---------- Achievement badges ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.badge-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    opacity: .45; filter: grayscale(1); transition: opacity .3s var(--ease-spring), filter .3s var(--ease-spring), transform .2s var(--ease-spring);
}
.badge-card.is-earned { opacity: 1; filter: none; box-shadow: var(--shadow-card); }
.badge-card.is-earned:hover { transform: translateY(-2px); }
.badge-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.badge-icon--listening { background: var(--primary-wash); color: var(--primary); }
.badge-icon--reading { background: var(--accent-wash); color: var(--accent); }
.badge-icon--writing { background: #fff4e5; color: var(--amber); }
.badge-icon--speaking { background: #f3f0ff; color: var(--purple); }
.badge-icon--grammar { background: #eceafd; color: var(--indigo); }
.badge-icon--vocabulary { background: #e7f7ee; color: #16a34a; }
html[data-theme="dark"] .badge-icon--writing { background: rgba(245,185,66,.14); }
html[data-theme="dark"] .badge-icon--speaking { background: rgba(157,140,255,.14); }
html[data-theme="dark"] .badge-icon--grammar { background: rgba(131,133,247,.14); }
html[data-theme="dark"] .badge-icon--vocabulary { background: rgba(22,163,74,.14); }
.badge-card h3 { font-size: 15px; margin-bottom: 4px; }
.badge-card p { font-size: 12.5px; color: var(--muted); margin: 0; }
.badge-earned-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: var(--accent); margin-top: 10px; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Group schedule / materials / homework rows ---------- */
.gsession-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.gsession-row:last-child { border-bottom: none; }
.gsession-date {
    flex-shrink: 0; width: 52px; text-align: center; font-weight: 800; font-size: 13px; color: var(--primary);
    background: var(--primary-wash); border-radius: 10px; padding: 6px 4px; line-height: 1.3;
}
.gsession-date span { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.gmat-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-wash); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.gsession-body { flex: 1; min-width: 0; }
.gsession-title { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.gsession-note { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.gsession-note.is-overdue { color: #d92d20; font-weight: 700; }
.gsession-row .js-sess-delete, .gsession-row .js-mat-delete, .gsession-row .js-hw-delete {
    flex-shrink: 0; background: none; border: none; color: var(--muted-2); cursor: pointer; padding: 6px;
    border-radius: 8px; transition: background .18s var(--ease-spring), color .18s var(--ease-spring);
}
.gsession-row .js-sess-delete:hover, .gsession-row .js-mat-delete:hover, .gsession-row .js-hw-delete:hover { background: #fdecec; color: #d92d20; }

/* ---------- Mock exam step list ---------- */
.mock-step-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.mock-step-row:last-child { border-bottom: none; }
.mock-step-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--card-2); color: var(--muted-2);
    display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease-spring), color .2s var(--ease-spring);
}
.mock-step-row.is-done .mock-step-icon { background: var(--accent-wash); color: var(--accent); }
.mock-step-body { flex: 1; min-width: 0; }
.mock-step-title { font-weight: 700; font-size: 14.5px; color: var(--text); }
.mock-step-note { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.mock-step-row.is-done .mock-step-note { color: var(--accent); font-weight: 700; }

/* ---------- Referral / gift Pro ---------- */
.referral-link-row { display: flex; gap: 10px; }
.referral-link-row input { background: var(--card-2); color: var(--muted); cursor: text; }
.referral-stats-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); font-weight: 700; margin: 12px 0 0; }

/* ---------- AI Tutor chat ---------- */
.tutor-quota { text-align: center; font-size: 12.5px; color: var(--muted-2); font-weight: 700; margin: 18px 0 14px; }
.tutor-chat {
    display: flex; flex-direction: column; gap: 14px; max-height: 480px; overflow-y: auto;
    padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 20px;
}
.tutor-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 85%; }
.tutor-msg--assistant { align-self: flex-start; }
.tutor-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.tutor-avatar { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.tutor-bubble {
    padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap;
}
.tutor-msg--assistant .tutor-bubble { background: var(--card-2); color: var(--text); border-bottom-left-radius: 4px; }
.tutor-msg--user .tutor-bubble { background: var(--gradient-hero); color: #fff; border-bottom-right-radius: 4px; }
.tutor-bubble.is-typing { padding: 14px 16px; }
.tutor-typing-dots { display: inline-flex; align-items: center; gap: 4px; }
.tutor-typing-dots span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2);
    animation: tutorTypingBounce 1.1s ease-in-out infinite;
}
.tutor-typing-dots span:nth-child(2) { animation-delay: .15s; }
.tutor-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tutorTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.tutor-bubble.is-typing.is-slow { opacity: .8; font-style: italic; color: var(--muted); font-size: 13px; }
.tutor-input-row { display: flex; gap: 10px; margin-top: 14px; }
.tutor-input-row input { flex: 1; }
.tutor-input-row .btn { width: auto; flex-shrink: 0; padding: 0 20px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) {
    .tutor-chat { max-height: 420px; padding: 14px; }
    .tutor-msg { max-width: 92%; }
}

/* Fixed app-like shell: the page itself never scrolls, only the chat log
   does — set via JS (document.body.classList.add('lu-tutor-active')) same
   as the exam pages' lu-exam-active, since header.php has no per-page hook
   for extra body classes. */
body.lu-tutor-active {
    height: 100vh; height: 100dvh; overflow: hidden;
}
body.lu-tutor-active .navbar { flex-shrink: 0; }
body.lu-tutor-active .site-footer { display: none; }
/* .page-main's base rule is `flex: 1 0 auto` (shrink:0) - without overriding
   the shrink here, it refuses to compress below its content's natural
   height, so overflow:hidden on body just clips the bottom instead of
   letting the chat log shrink to fit - the actual bug behind the previous
   fix "not fitting" on shorter viewports. */
body.lu-tutor-active .page-main {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
body.lu-tutor-active .tutor-shell {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    padding-top: 16px; padding-bottom: 16px;
}
body.lu-tutor-active .tutor-shell .tool-back,
body.lu-tutor-active .tutor-shell .page-hero-row,
body.lu-tutor-active .tutor-shell .tutor-quota,
body.lu-tutor-active .tutor-shell .tutor-input-row,
body.lu-tutor-active .tutor-shell .error-box { flex-shrink: 0; }
body.lu-tutor-active .tutor-shell .page-hero-row { margin-bottom: 4px; }
body.lu-tutor-active .page-hero-mascot { width: 72px; height: 72px; }
body.lu-tutor-active .tutor-chat { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 560px) {
    body.lu-tutor-active .tutor-shell { padding-top: 10px; padding-bottom: 10px; }
    body.lu-tutor-active .tutor-shell .page-hero-row { gap: 2px; margin-bottom: 0; }
    body.lu-tutor-active .page-hero-mascot { width: 52px; height: 52px; }
    body.lu-tutor-active .tutor-quota { margin: 8px 0; }
}

.progress-locked {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 50px 32px; text-align: center; max-width: 520px; margin: 40px auto;
}
.progress-locked .icon-wrap {
    width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #f6b73c, #e8912a);
    color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.progress-locked h1 { font-size: 22px; margin-bottom: 10px; }
.progress-locked p { color: var(--muted); margin-bottom: 22px; }

/* ---------- Generic "coming soon" empty state (new sections with no
   content yet, e.g. Grammar) — same shape as .progress-locked minus the
   paywall framing, colored to match the section's own tool-card icon. ---------- */
.coming-soon-state {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 50px 32px; text-align: center; max-width: 520px; margin: 40px auto;
}
.coming-soon-state .icon-wrap {
    width: 60px; height: 60px; border-radius: 50%; background: var(--primary-wash); color: var(--primary);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.coming-soon-state h1 { font-size: 22px; margin-bottom: 10px; }
.coming-soon-state p { color: var(--muted); margin-bottom: 0; }
.coming-soon-state.grammar .icon-wrap { background: #eceafd; color: var(--indigo); }
html[data-theme="dark"] .coming-soon-state.grammar .icon-wrap { background: rgba(131,133,247,.14); }

/* ---------- Grammar section ---------- */
.gr-toolbar { display: flex; align-items: center; gap: 10px; margin: 18px 0 26px; flex-wrap: wrap; }
.gr-search-box {
    display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 14px; flex: 1; min-width: 220px; color: var(--muted-2);
}
.gr-search-box input {
    border: none; background: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--text);
    width: 100%;
}
.gr-search-clear { display: none; background: none; border: none; color: var(--muted-2); cursor: pointer; padding: 2px; flex-shrink: 0; }
.gr-search-box.has-value .gr-search-clear { display: flex; }
.gr-view-toggle { display: flex; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; flex-shrink: 0; }
.gr-view-btn {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 32px; border-radius: 7px;
    border: none; background: transparent; color: var(--muted); cursor: pointer;
    transition: background .22s var(--ease-spring), color .22s var(--ease-spring), box-shadow .22s var(--ease-spring);
}
.gr-view-btn.is-active { background: var(--card); color: var(--indigo); box-shadow: 0 2px 6px rgba(20,30,60,0.14); }
.gr-no-results { display: none; text-align: center; color: var(--muted); padding: 50px 20px; font-size: 14px; }
.gr-no-results.is-visible { display: block; }

/* ---------- Toggle section (collapsible content block, e.g. "Practice Tests") ---------- */
.toggle-section {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-card); margin: 22px 0; overflow: hidden;
}
.toggle-section-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--text); text-align: left;
}
.toggle-section-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.toggle-section-title .icon { color: var(--indigo); flex-shrink: 0; }
.toggle-section-count {
    background: var(--card-2); color: var(--muted); font-size: 12.5px; font-weight: 700;
    padding: 2px 10px; border-radius: 100px; flex-shrink: 0;
}
.toggle-chevron { color: var(--muted); transition: transform .26s var(--ease-spring); flex-shrink: 0; }
.toggle-section.is-collapsed .toggle-chevron { transform: rotate(-90deg); }
.toggle-section-body {
    padding: 0 22px 22px; max-height: 6000px; opacity: 1; overflow: hidden;
    transition: max-height .32s var(--ease-spring), opacity .22s var(--ease-spring), padding .32s var(--ease-spring);
}
.toggle-section.is-collapsed .toggle-section-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* Nested toggle sub-section (e.g. one Cambridge book number inside "Cambridge Books") */
.toggle-subsections { display: flex; flex-direction: column; gap: 10px; }
.toggle-section.toggle-subsection {
    background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: none; margin: 0;
}
.toggle-subsection .toggle-section-header { padding: 13px 16px; }
.toggle-subsection .toggle-section-title { font-size: 14px; font-weight: 600; }
.toggle-subsection .toggle-section-body { padding: 0 16px 16px; }
.toggle-subsection .empty-note { font-size: 12.5px; padding: 6px 0 2px; }

.gr-cat-list { display: flex; flex-direction: column; gap: 36px; margin-top: 8px; }
.gr-cat-block.is-empty { display: none; }
.gr-cat-title {
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: var(--indigo); margin-bottom: 14px; padding-left: 2px;
    display: flex; align-items: center; gap: 10px;
}
.gr-cat-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.gr-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gr-topic-card {
    display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-spring), border-color .18s var(--ease-spring);
}
.gr-topic-card.is-hidden { display: none; }
.gr-topic-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(20,30,60,0.32); border-color: var(--muted-2); }
.gr-topic-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--card-2); border-bottom: 1px solid var(--border); }
.gr-topic-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gr-topic-num {
    position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px;
    background: rgba(15,17,26,.72); backdrop-filter: blur(4px); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}
.gr-topic-body { flex: 1; min-width: 0; padding: 14px 16px 6px; }
.gr-topic-title-en { font-weight: 700; font-size: 14px; line-height: 1.35; }
.gr-topic-title-uz { font-size: 12px; color: var(--indigo); margin-top: 3px; font-weight: 600; }
.gr-topic-summary { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gr-topic-arrow { flex-shrink: 0; color: var(--muted-2); padding: 8px 16px 14px; margin-left: auto; }

/* compact list view */
.gr-topic-grid.is-list { display: flex; flex-direction: column; gap: 10px; }
.gr-topic-grid.is-list .gr-topic-card { flex-direction: row; align-items: center; border-radius: 12px; }
.gr-topic-grid.is-list .gr-topic-thumb { width: 64px; height: 64px; aspect-ratio: unset; flex-shrink: 0; border-bottom: none; border-right: 1px solid var(--border); }
.gr-topic-grid.is-list .gr-topic-num { width: 20px; min-width: 20px; height: 20px; font-size: 11px; top: 5px; left: 5px; }
.gr-topic-grid.is-list .gr-topic-body { padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; }
.gr-topic-grid.is-list .gr-topic-summary { -webkit-line-clamp: 1; margin-top: 3px; }
.gr-topic-grid.is-list .gr-topic-arrow { padding: 0 16px; }

.gr-view-container { max-width: 860px; }
.gr-back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13.5px; margin-bottom: 18px; }
.gr-back-link:hover { color: var(--text); }

/* ---- Book-style page header: navy "Unit N" corner tab + teal title bar ---- */
:root {
    --gr-navy: #1c2a63; --gr-navy-text: #ffffff;
    --gr-teal-bar: #bfe7e8; --gr-teal-bar-text: #12406b;
    --gr-teal: #2f9c98; --gr-mint: #dff4f4;
    --gr-gold: #eea52b; --gr-gold-bg: #fdf3de;
    --gr-example-dot: #57b3ae;
}
html[data-theme="dark"] {
    --gr-navy: #26326e; --gr-navy-text: #eef1ff;
    --gr-teal-bar: rgba(66,196,196,.16); --gr-teal-bar-text: #8fe0e0;
    --gr-teal: #3aa8a3; --gr-mint: rgba(66,196,196,.055);
    --gr-gold: #d69a3a; --gr-gold-bg: rgba(214,154,58,.12);
    --gr-example-dot: #3aa8a3;
}
.gr-book-header { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; margin-bottom: 4px; box-shadow: 0 10px 26px -18px rgba(20,30,60,.4); }
.gr-unit-tab {
    flex-shrink: 0; background: var(--gr-navy); color: var(--gr-navy-text); display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 14px 20px; line-height: 1.1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
    padding-left: 30px;
}
.gr-unit-tab span { font-size: 13px; font-weight: 600; opacity: .85; }
.gr-unit-tab strong { font-size: 30px; font-weight: 800; }
.gr-title-bar { flex: 1; background: var(--gr-teal-bar); color: var(--gr-teal-bar-text); padding: 16px 22px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.gr-book-title { font-size: 24px; margin: 0; color: var(--gr-teal-bar-text); line-height: 1.25; }
.gr-book-sub { font-size: 13px; font-weight: 600; opacity: .85; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-book-sub .gr-cat-pill { background: rgba(0,0,0,.08); padding: 2px 9px; border-radius: 20px; font-size: 11.5px; }
html[data-theme="dark"] .gr-book-sub .gr-cat-pill { background: rgba(255,255,255,.12); }

.gr-util-row { display: flex; align-items: center; justify-content: flex-end; margin: 10px 2px 18px; }
.gr-orig-btn {
    display: flex; align-items: center; gap: 6px; background: var(--card-2);
    border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s var(--ease-spring), color .15s var(--ease-spring);
}
.gr-orig-btn:hover { border-color: var(--indigo); color: var(--indigo); }

.gr-lightbox {
    position: fixed; inset: 0; z-index: 500; background: rgba(8,9,14,.92); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 30px;
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-spring);
}
.gr-lightbox.is-open { opacity: 1; pointer-events: auto; }
.gr-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.gr-lightbox-close {
    position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gr-lightbox-close:hover { background: rgba(255,255,255,.18); }

/* real illustrations cropped straight out of the book, shown as a small gallery */
.gr-illus-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.gr-illus-row img {
    height: 108px; width: auto; max-width: 100%; border-radius: 10px; border: 1px solid var(--border);
    background: #fff; object-fit: contain; box-shadow: 0 8px 18px -12px rgba(20,30,60,.35);
}

.gr-view-body { display: flex; flex-direction: column; gap: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px -18px rgba(20,30,60,.35); }
.gr-block {
    background: var(--card); padding: 26px 24px 26px 64px; position: relative;
}
.gr-block:nth-of-type(odd) { background: var(--gr-mint); }
.gr-block-title {
    position: absolute; left: 0; top: 24px; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 30px; padding-bottom: 8px; background: var(--gr-teal); color: #fff;
    font-size: 14px; font-weight: 800;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.gr-block-content > *:first-child { margin-top: 0; }
.gr-rule { font-size: 15.5px; line-height: 1.65; margin: 14px 0 10px; }
.gr-rule:first-child { margin-top: 0; }

/* gold-bordered pattern/verb-form box, the book's signature mnemonic boxes */
.gr-table { border-collapse: collapse; margin: 14px 0; font-size: 14px; background: var(--card); border: 2px solid var(--gr-gold); border-radius: 10px; overflow: hidden; }
.gr-table td { padding: 8px 14px; border: 1px solid var(--gr-gold-bg); }
html[data-theme="dark"] .gr-table td { border-color: rgba(214,154,58,.25); }
.gr-table tr:nth-child(odd) td { background: var(--gr-gold-bg); }

.gr-examples { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; }
.gr-example {
    background: var(--card); border-radius: 8px; padding: 3px 0 3px 26px; position: relative;
    display: flex; flex-direction: column; gap: 2px;
}
.gr-example::before {
    content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--gr-example-dot); background: transparent;
}
.gr-ex-main { font-size: 14.5px; }
.gr-ex-uz { font-size: 13px; color: var(--muted); display: block; }
.gr-note {
    display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #d92d20;
    background: rgba(217,45,32,.08); border-radius: 6px; padding: 1px 7px;
}
html[data-theme="dark"] .gr-note { background: rgba(255,107,107,.12); color: #ff9b9b; }

/* Compare: two white insets side by side, a signature layout of this book */
.gr-compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 14px 0 16px;
    background: var(--card); border-radius: 12px; overflow: hidden;
    box-shadow: 0 6px 18px -14px rgba(20,30,60,.3);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.gr-compare-col { min-width: 0; padding: 16px 18px; }
.gr-compare-col:first-child { border-right: 1px dashed var(--border); }
.gr-compare-col h4 { margin: 0 0 8px; font-size: 14px; color: var(--gr-teal); }
.gr-compare-col p { font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; }
.gr-compare-col .gr-examples { margin: 8px 0 0; }

.gr-callout {
    background: var(--gr-gold-bg); border-left: 3px solid var(--gr-gold);
    border-radius: 10px; padding: 12px 16px; font-size: 14px; margin: 10px 0 16px;
}
.gr-callout p { margin: 0; }

.gr-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 32px; }
.gr-nav-btn {
    display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none;
    font-size: 13.5px; max-width: 48%; transition: border-color .15s var(--ease-spring);
}
.gr-nav-btn:hover { border-color: var(--indigo); }
.gr-nav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-nav-next { margin-left: auto; text-align: right; flex-direction: row-reverse; }

@media (max-width: 560px) {
    .gr-topic-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gr-topic-body { padding: 10px 10px 4px; }
    .gr-topic-arrow { display: none; }
    .gr-nav { flex-direction: column; }
    .gr-nav-btn { max-width: 100%; }
    .gr-nav-btn span { max-width: none; white-space: normal; }
    .gr-nav-next { margin-left: 0; }
    .gr-orig-btn span { display: none; }
    .gr-book-header { flex-direction: column; }
    .gr-unit-tab { clip-path: none; flex-direction: row; gap: 6px; padding: 10px 16px; }
    .gr-unit-tab strong { font-size: 22px; }
    .gr-book-title { font-size: 19px; }
    .gr-block { padding: 20px 16px 20px 44px; }
    .gr-block-title { width: 26px; height: 24px; left: 0; top: 20px; font-size: 12px; }
    .gr-compare { grid-template-columns: 1fr; }
    .gr-compare-col:first-child { border-right: none; border-bottom: 1px dashed var(--border); }
    .gr-illus-row img { height: 84px; }
}

.week-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.week-compare-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.week-compare-card .lbl { font-size: 12px; color: var(--muted-2); text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.week-compare-card .num { font-size: 22px; font-weight: 800; color: var(--text); }
.week-delta { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.week-delta.is-up { color: var(--accent); }
.week-delta.is-down { color: #d92d20; }
.week-delta.is-flat { color: var(--muted); }

/* ---------- Exclusive model answers (Pro) ---------- */
.model-answer-section { margin-top: 20px; }
.model-answer-btn {
    display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 11px 20px;
    background: linear-gradient(135deg, #f6b73c, #e8912a) !important; color: #fff !important; border: none !important;
}
.model-answer-content {
    margin-top: 14px; padding: 20px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border);
    font-size: 14.5px; line-height: 1.8; color: var(--text);
}
.model-answer-locked {
    padding: 14px 18px; border-radius: 10px; background: var(--card-2); border: 1px dashed var(--border);
    font-size: 13.5px; color: var(--muted);
}
.model-answer-locked a { font-weight: 700; }

.reading-exam { display: flex; flex-direction: column; height: 100dvh; }
.reading-topbar {
    /* switched from justify-content:space-between (assumed exactly 2
       children) to gap + margin-left:auto on the right group, since exam
       mode had no way back to the test list — especially on mobile, where
       .navbar is hidden entirely during the exam — so a back button was
       added as a third child here. */
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.reading-topbar-back {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px; color: var(--muted);
    text-decoration: none; transition: background .15s, color .15s;
}
.reading-topbar-back:hover { background: var(--card-2); color: var(--primary); }
.reading-topbar-left { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.reading-topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Reuses the navbar's own .settings-menu/.settings-btn/.settings-dropdown
   look (see includes/header.php) for a consistent control everywhere on
   the site, just triggered/positioned locally within the exam topbar
   instead of the global nav — open/close wiring is separate (own ids),
   see engine.js. */
#readingSettingsMenu .settings-dropdown { width: 200px; }

/* Exam mode goes edge-to-edge: the site's normal centered/padded content
   wrapper and top navbar just eat screen space a focused reading task
   needs, especially on the 3-panel layout — the Mini App context already
   did this (see the html.tg-miniapp rules below), this brings the same
   full-bleed treatment to the regular website view. */
body.lu-exam-active .reading-wrap { max-width: none; padding: 0; margin: 0; }
body.lu-exam-active .navbar { display: none; }
/* Bottom tab bar stays rendered on the start screen (so there's no dead
   blank space / dead-end nav before the test begins) but gets hidden the
   moment the exam itself starts — same reasoning as .navbar above, plus
   the exam's own pinned Submit bar would otherwise sit right behind it. */
body.lu-exam-active .bottom-tabbar { display: none; }
body.lu-exam-active.has-bottom-tabbar { padding-bottom: 0; }

.reading-body { display: flex; gap: 0; flex: 1; overflow: hidden; }
.reading-passage-panel, .reading-questions-panel, .reading-notes-panel {
    overflow-y: auto; padding: 26px 22px; min-width: 0;
}
.reading-passage-panel, .reading-questions-panel { flex: 1 1 0; }
.reading-notes-panel { flex: 0 0 260px; display: flex; flex-direction: column; }
.reading-passage-panel { border-right: 1px solid var(--border); }
.reading-questions-panel { border-right: 1px solid var(--border); }

/* Draggable divider between two panels — mousedown/touchstart handled in
   engine.js, which sets each side's flex-basis in px as the pointer moves. */
.reading-resizer { flex: 0 0 10px; cursor: col-resize; position: relative; }
.reading-resizer::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
    background: var(--border); transform: translateX(-50%);
}
.reading-resizer:hover::after, .reading-resizer.is-dragging::after { background: var(--primary); width: 2px; }
body.lu-resizing { cursor: col-resize; user-select: none; }
body.lu-resizing .reading-passage-panel, body.lu-resizing .reading-questions-panel, body.lu-resizing .reading-notes-panel { pointer-events: none; }

#notesTextarea {
    flex: 1; border: none; resize: none; outline: none; background: transparent;
    color: var(--text); font-family: inherit; font-size: calc(14.5px * var(--lu-font-scale, 1)); line-height: 1.7; padding: 0; margin-top: 6px;
}
#notesTextarea::placeholder { color: var(--muted); }

/* Font-size setting (A-/A/A+ in the exam topbar, see engine.js) scales all
   passage/question/notes text together via one CSS var set on .reading-exam
   — --lu-font-scale defaults to 1 so the rule is a no-op until the user
   actually changes it. */
.reading-exam { --lu-font-scale: 1; }
.passage-title { font-size: calc(18px * var(--lu-font-scale, 1)); font-weight: 800; margin-bottom: 10px; }
.passage-subtitle { font-size: calc(16px * var(--lu-font-scale, 1)); font-weight: 700; margin: 16px 0 12px; }
.passage-instruction { color: var(--muted); font-size: calc(14px * var(--lu-font-scale, 1)); margin-bottom: 16px; }
.passage-body { font-size: calc(15.5px * var(--lu-font-scale, 1)); line-height: 1.8; color: var(--text); }
.passage-body p { margin: 0 0 16px; }
.passage-body ::selection { background: var(--primary-wash); }

/* ---- Reading highlighter tool: select text -> floating "Highlight" pill;
   click an existing highlight to remove it. ---- */
mark.lu-hl {
    background: #ffe066; color: inherit; border-radius: 2px; padding: 0 1px;
    cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lu-hl-toolbar {
    position: fixed; top: 0; left: 0; z-index: 400;
    background: var(--text); color: var(--card);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
    opacity: 0; pointer-events: none; transform: translateY(4px) scale(.96);
    transition: opacity .12s var(--ease-spring), transform .12s var(--ease-spring);
}
.lu-hl-toolbar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.lu-hl-toolbar button {
    display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: none; background: none;
    color: inherit; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.lu-hl-toolbar button:hover { opacity: .85; }

.q-block { display: flex; gap: 12px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.q-block:last-child { border-bottom: none; }
.q-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--muted);
}
.q-body { flex: 1; }
.q-text { font-size: calc(14.5px * var(--lu-font-scale, 1)); margin-bottom: 10px; }
.q-options { display: flex; flex-direction: column; gap: 6px; }
.q-option {
    display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
    font-size: 14px; cursor: pointer; background: var(--card);
}
.q-option:has(input:checked) { border-color: var(--primary); background: var(--primary-wash); }
.q-fill {
    width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-2);
    color: var(--text); font-family: inherit; font-size: 14px;
}

/* ===== Structured question groups: notes / flow-chart / heading-list ===== */
.q-group { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.q-group:last-child { border-bottom: none; }
.q-group-instr { font-size: calc(14px * var(--lu-font-scale, 1)); font-style: italic; color: var(--muted); margin-bottom: 14px; }

.ib-blank { display: inline-block; margin: 0 2px; }
.ib-input {
    width: 132px; max-width: 46vw; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--card-2); color: var(--text); font-family: inherit; font-size: inherit; font-weight: 700;
    text-align: center;
}
.ib-input:focus { outline: none; border-color: var(--primary); background: var(--primary-wash); }
.ib-input.ib-select { width: auto; min-width: 132px; max-width: 60vw; text-align: left; font-weight: 600; }

.notes-block, .summary-block {
    background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
}
.summary-block .summary-text { font-size: calc(14.5px * var(--lu-font-scale, 1)); line-height: 1.7; margin: 0; }
.notes-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; color: var(--text); }
.notes-item {
    position: relative; font-size: calc(14.5px * var(--lu-font-scale, 1)); line-height: 1.6; margin-bottom: 8px;
    padding-left: 18px;
}
.notes-item::before { content: '•'; position: absolute; left: 2px; color: var(--muted); }
.notes-indent-1 { padding-left: 0; font-weight: 800; margin-top: 10px; }
.notes-indent-1::before { content: none; }
.notes-indent-2 { padding-left: 18px; font-weight: 700; color: var(--muted); }
.notes-indent-2::before { content: '–'; }

.fc-block { display: flex; flex-direction: column; align-items: center; gap: 0; }
.fc-title { font-weight: 800; font-size: 15px; margin-bottom: 14px; text-align: center; }
.fc-box {
    width: 100%; max-width: 480px; background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px; font-size: calc(14.5px * var(--lu-font-scale, 1)); line-height: 1.55; text-align: center;
}
.fc-arrow { font-size: 20px; color: var(--primary); line-height: 1; margin: 4px 0; }

.hd-box { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.hd-box-title { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.hd-opt { font-size: calc(14px * var(--lu-font-scale, 1)); line-height: 1.7; }
.hd-rows { display: flex; flex-direction: column; gap: 8px; }
.hd-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.hd-row-num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--muted);
}
.hd-row-label { flex: 1; font-size: 14px; }
.hd-select {
    flex-shrink: 0; max-width: 55%; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--card); color: var(--text); font-family: inherit; font-size: 13px;
}

.q-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--lu-font-scale, 1)); }
.q-table th, .q-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.q-table th { background: var(--card-2); font-weight: 800; }
.q-table .ib-input { width: 110px; }

/* Imported-listening notes content (map-labeling / matching-from-a-box
   layouts) preserves the source's own structural markup as raw notes-item
   HTML — these two classes are what that markup relies on. */
.mw-centered-title { text-align: center; font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.mw-options-box { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; display: inline-block; min-width: 260px; }
.mw-options-box p { margin-bottom: 5px; }
.mw-matching-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mw-matching-item span { min-width: 220px; font-size: calc(14px * var(--lu-font-scale, 1)); }
.mw-map-img { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 14px; display: block; }

.reading-navbar {
    display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--border);
    flex-shrink: 0; flex-wrap: wrap;
}
.reading-navbar-tabs { display: flex; gap: 6px; }
.passage-tab {
    padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card);
    color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.passage-tab.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }
/* max-height clipped mid-row (a full row plus a sliver of the next one),
   which reads as a layout bug rather than a scrollable list — sized to fit
   two full chip rows (26px + 4px gap, twice) so any clip lands on a clean
   row boundary, with a visible scrollbar as the only remaining affordance. */
.reading-navbar-questions { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; max-height: 60px; overflow-y: auto; scrollbar-width: thin; align-content: flex-start; }
.q-chip {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--card);
    color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.q-chip.is-answered { background: var(--accent); border-color: var(--accent); color: #04121c; }

/* ---- Exam fixed app-shell mode: independent scroll panes + pinned bottom bar ---- */
/* body's base rule only sets min-height:100vh, so without an explicit cap
   here the exam shell could grow taller than the real viewport — on mobile
   Safari/Chrome the address bar shrinks the actual visible area below the
   100vh value, which pushed the pinned bottom bar (question chips +
   Yakunlash) below the fold with no way to scroll to it. 100dvh tracks the
   real visible viewport; 100vh stays as the fallback for browsers without
   dvh support (same pattern as body.lu-tutor-active above). */
body.lu-exam-active { height: 100vh; height: 100dvh; overflow: hidden; }
body.lu-exam-active .site-footer { display: none; }
.reading-body { min-height: 0; }
.listening-questions { min-height: 0; }

.reading-mobile-tabs { display: none; }
@media (max-width: 900px) {
    .reading-mobile-tabs {
        display: flex; gap: 8px; padding: 10px 2px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .rmtab {
        flex: 1; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--card);
        color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit;
    }
    .rmtab.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }
    .reading-resizer { display: none; }
    .reading-passage-panel, .reading-questions-panel, .reading-notes-panel {
        display: none; border-right: none; max-height: none; flex-basis: 100% !important;
    }
    .reading-body[data-active-panel="passage"] .reading-passage-panel { display: block; }
    .reading-body[data-active-panel="questions"] .reading-questions-panel { display: block; }
    .reading-body[data-active-panel="notes"] .reading-notes-panel { display: flex; }
    .reading-navbar-questions { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; flex-basis: 100%; min-width: 0; }
    .reading-navbar-tabs { flex-basis: 100%; overflow-x: auto; min-width: 0; }
    #submitAllBtn { flex-basis: 100%; }
}

/* ---- Reading review screen ---- */
.review-summary { display: flex; align-items: center; gap: 28px; margin-bottom: 18px; flex-wrap: wrap; }
.review-quick-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.review-quick-stats .ok { color: var(--accent); font-weight: 700; }
.review-quick-stats .bad { color: #d92d20; font-weight: 700; }

.review-tabs { display: flex; gap: 8px; margin: 8px 0 18px; border-bottom: 1px solid var(--border); }
.review-tab {
    padding: 10px 4px; margin-bottom: -1px; border: none; background: none; border-bottom: 2px solid transparent;
    color: var(--muted); font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit;
}
.review-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.review-filter-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.rf-chip {
    padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border); background: var(--card);
    color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.rf-chip.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }

.review-group-label { font-weight: 800; font-size: 14px; margin: 22px 0 10px; color: var(--text); }
.review-group-label span { color: var(--muted-2); font-weight: 600; font-size: 12.5px; }

.review-q-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px;
    border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; font-size: 13.5px;
}
.review-q-item.is-correct { border-color: rgba(53,201,143,.4); background: rgba(53,201,143,.06); }
.review-q-item.is-wrong { border-color: rgba(217,45,32,.35); background: rgba(217,45,32,.06); }
.review-q-item .rq-icon { flex-shrink: 0; display: flex; }
.review-q-item.is-correct .rq-icon { color: var(--accent); }
.review-q-item.is-wrong .rq-icon { color: #d92d20; }
.review-q-item .rq-num { font-weight: 800; flex-shrink: 0; }
.review-q-item .rq-your { color: var(--muted); }
.review-q-item .rq-correct { color: var(--accent); font-weight: 700; }

/* ---- Listening player ---- */
.listening-exam { display: flex; flex-direction: column; height: 100dvh; }
.listening-player-bar {
    padding: 16px 4px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.listening-player-bar audio { width: 100%; }
.listening-questions { flex: 1; overflow-y: auto; padding: 20px 4px; max-width: 700px; margin: 0 auto; width: 100%; }

/* Inside the Mini App, these locked-height (100dvh) exam screens are a
   focused single task — the identity navbar up top just eats space the
   question list needs, so it's hidden entirely here (own top safe-area
   padding takes over so content still clears Telegram's floating pill).
   The bottom Submit bar also gets breathing room above the device's home
   indicator instead of sitting flush against the very edge. */
html.tg-miniapp:has(.reading-exam) .navbar,
html.tg-miniapp:has(.listening-exam) .navbar {
    display: none;
}
html.tg-miniapp .reading-exam,
html.tg-miniapp .listening-exam {
    padding-top: calc(14px + var(--tg-safe-top, 0px));
    box-sizing: border-box;
    /* The fixed bottom tab bar floats over whatever's at the very bottom of
       this 100dvh box regardless of any padding *inside* it — the box
       itself has to end just above it so the Submit bar reliably lands
       above it, not underneath it. flex-shrink:0 rows (topbar, mode tabs,
       the Submit bar itself) don't compress to fit — if the total is even
       a few px short, the whole box quietly overflows past its own height
       and the Submit bar ends up permanently covered by the fixed tab bar
       with no way to scroll it into view. Guessed px constants here kept
       being wrong across devices, so --lu-tabbar-reserve is the tab bar's
       *actual measured* rendered height (see header.php) — the 100px
       fallback only matters for the instant before that JS runs. */
    /* !important: the debug readout showed this losing to the base
       `.listening-exam { height: 100dvh }` rule despite higher specificity
       and later source order — cause unconfirmed (possibly a webview
       quirk with dvh-in-calc + var() together), so force it rather than
       keep guessing why the cascade wasn't doing what it should. */
    height: calc(100dvh - var(--lu-tabbar-reserve, 100px)) !important;
}
/* .reading-exam/.listening-exam already carve out the tab bar's height
   themselves — body's own padding-bottom for it would just add a second,
   redundant gap below the (now shorter) exam box. */
html.tg-miniapp body:has(.reading-exam),
html.tg-miniapp body:has(.listening-exam) {
    padding-bottom: 0;
}

/* ---- Admin panel v3: sidebar shell ---- */
.admin-shell { display: flex; align-items: flex-start; }
.admin-sidebar {
    width: 232px; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: 100vh;
    border-right: 1px solid var(--border); background: var(--card); padding: 20px 14px;
    display: flex; flex-direction: column; overflow-y: auto;
}
.admin-sidebar-head { padding: 4px 10px 18px; }
.admin-sidebar-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.admin-sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.admin-sidebar-link {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
    color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none;
}
.admin-sidebar-link:hover { background: var(--card-2); color: var(--text); }
.admin-sidebar-link.is-active { background: var(--primary-wash); color: var(--primary); }
.admin-sidebar-link .icon { flex-shrink: 0; }
.admin-sidebar-foot { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.admin-sidebar-link--muted { color: var(--muted-2); }

.admin-main { flex: 1; min-width: 0; }
.admin-main-inner { max-width: 1300px; margin: 0 auto; padding: 32px 32px 60px; }
.admin-main-inner h1 { font-size: 27px; font-weight: 800; margin-bottom: 6px; }
.admin-main-inner > p.page-sub { color: var(--muted); margin-bottom: 26px; }

.admin-mobile-nav { display: none; }
@media (max-width: 900px) {
    .admin-shell { flex-direction: column; align-items: stretch; }
    .admin-sidebar { display: none; }
    .admin-mobile-nav {
        display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; background: var(--card);
        border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 4; -webkit-overflow-scrolling: touch;
        min-width: 0;
    }
    .admin-mobile-nav .admin-sidebar-link { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--border); border-radius: 100px; }
    .admin-mobile-nav .admin-sidebar-link.is-active { border-color: var(--primary); }
    .admin-main-inner { padding: 24px 16px 48px; }
}

/* ---- Admin panel v2 ---- */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 26px; }
.admin-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.admin-stat-card .num { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.admin-stat-card .lbl { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.admin-stat-card { position: relative; }
.admin-stat-card .admin-trend { position: absolute; top: 16px; right: 16px; }

.admin-hero { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.admin-hero-label { font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.admin-hero-num { font-size: 40px; font-weight: 800; color: var(--text); line-height: 1; }
.admin-hero-sub { font-size: 13px; color: var(--muted-2); margin-top: 8px; }
.admin-hero-side { display: flex; gap: 28px; flex-wrap: wrap; }
.admin-hero-side-item .num { font-size: 20px; font-weight: 800; color: var(--text); }
.admin-hero-side-item .lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.admin-trend { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 100px; }
.admin-trend--up { color: var(--accent); background: var(--accent-wash); }
.admin-trend--down { color: #d92d20; background: rgba(217,45,32,.1); }
.admin-trend--flat { color: var(--muted); background: var(--card-2); }

.admin-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 10px; }
.admin-chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.admin-chart-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.admin-chart-card-title { font-weight: 800; font-size: 14.5px; }
.admin-chart-card-total { font-size: 13px; color: var(--muted); font-weight: 700; }
.admin-line-chart { width: 100%; height: auto; display: block; margin-top: 6px; }
.admin-chart-dot { stroke: var(--card); stroke-width: 1.5; }

.admin-hbar-chart { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.admin-hbar-row { display: grid; grid-template-columns: 140px 1fr 34px; align-items: center; gap: 10px; }
.admin-hbar-label { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-hbar-track { height: 10px; border-radius: 100px; background: var(--card-2); overflow: hidden; }
.admin-hbar-fill { height: 100%; border-radius: 100px; }
.admin-hbar-value { font-size: 12.5px; font-weight: 800; color: var(--text); text-align: right; }
@media (max-width: 560px) {
    .admin-hbar-row { grid-template-columns: 92px 1fr 30px; }
}

.admin-activity-feed { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; }
.admin-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.admin-activity-item:last-child { border-bottom: none; }
.admin-activity-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-activity-icon--signup { background: var(--primary-wash); color: var(--primary); }
.admin-activity-icon--purchase { background: var(--accent-wash); color: var(--accent); }
.admin-activity-icon--attempt { background: #fff4e5; color: var(--amber); }
html[data-theme="dark"] .admin-activity-icon--attempt { background: rgba(172,116,0,.16); }
.admin-activity-text { font-size: 13.5px; color: var(--text); }
.admin-activity-text strong { font-weight: 700; }
.admin-activity-time { font-size: 12px; color: var(--muted-2); margin-top: 2px; }

.admin-search-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.admin-search-box {
    display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 14px; flex: 1; min-width: 220px; color: var(--muted-2);
}
.admin-search-box input {
    border: none; background: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--text);
    width: 100%;
}
.admin-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.admin-section-title { font-size: 18px; font-weight: 800; margin: 34px 0 14px; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-tab {
    padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border); background: var(--card);
    color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.admin-tab.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-wash); }
.admin-row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-row-actions button, .admin-row-actions a.admin-link {
    font-size: 13px; font-weight: 700; cursor: pointer; background: none; border: none; color: var(--primary);
    font-family: inherit; padding: 0;
}
.admin-row-actions .danger { color: #d92d20; }
.admin-row-actions summary { font-weight: 700; color: var(--primary); cursor: pointer; font-size: 13px; }
.admin-preview { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--card-2); font-size: 13px; color: var(--muted); line-height: 1.6; }
.admin-preview img { max-width: 260px; border-radius: 8px; margin-top: 8px; display: block; }
.role-badge { padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; }
.role-badge.admin { background: var(--primary-wash); color: var(--primary); }
.role-badge.student { background: var(--card-2); color: var(--muted); }

.lu-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.lu-modal-backdrop.is-open { display: flex; }
.lu-modal { background: var(--card); border-radius: 16px; padding: 26px; max-width: 480px; width: 100%; }
.lu-modal h3 { margin-bottom: 6px; }
.lu-modal p { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.lu-modal textarea {
    width: 100%; min-height: 100px; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--card-2); color: var(--text); font-family: inherit; font-size: 14px; resize: vertical;
}
.lu-modal-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.lu-modal-error { color: #d92d20; font-size: 13px; margin-top: 10px; display: none; }

@media (max-width: 700px) {
    table.admin-table { border: none; background: none; }
    table.admin-table thead { display: none; }
    table.admin-table tbody { display: block; }
    table.admin-table tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: var(--card); }
    table.admin-table tbody td { display: block; border: none; padding: 4px 0; }
    table.admin-table tbody td::before {
        content: attr(data-label); font-weight: 700; color: var(--muted-2); font-size: 11px;
        text-transform: uppercase; display: block;
    }
}

/* ==================== Multilevel Zone — brand override ====================
   Yellow/navy palette (colors sampled from the brand logo, already used
   throughout the ml_template PDF pipeline — #FFBE00/#05011A) layered on top
   of the (otherwise unmodified) base stylesheet via :root token overrides,
   plus a handful of fresh component classes for this site's own simpler
   navbar/footer (LinguaUP's own .navbar/.bottom-tabbar assume markup this
   site doesn't have — mobile tab bar, account dropdown, Telegram widgets —
   so those are intentionally not reused here). */
:root {
    --primary: #05011A; --primary-dark: #000000; --primary-wash: #fff6da;
    --accent: #FFBE00; --accent-wash: #fff6da;
    --purple: #7c5cff; --amber: #f59e0b; --rose: #e64980; --indigo: #6366f1;
    --bg: #fffaf0; --text: #05011A; --muted: #5b5640; --muted-2: #8a836a;
    --card: #ffffff; --card-2: #fff8e6; --border: #f0e2b8;
    --gradient-hero: linear-gradient(135deg, #FFBE00 0%, #ffcd33 55%, #ffdb66 100%);
    --shadow-hero: 0 22px 46px -20px rgba(5,1,26,0.28);
}
html[data-theme="dark"] { --primary: #FFBE00; --bg: #05011A; --text: #fdf6e3; --card: #14102b; --card-2: #1b1638; --border: #2a244f; }

body { font-family: 'Manrope', 'Segoe UI', Arial, sans-serif; }

.navbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 28px; background: var(--card); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
}
.navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-badge {
    width: 40px; height: 40px; border-radius: 12px; display: block; object-fit: cover;
    box-shadow: 0 6px 16px -7px rgba(255,190,0,0.7);
    transition: transform .2s ease;
}
.brand-badge--full { width: 42px; height: 42px; border-radius: 11px; }
.navbar-brand:hover .brand-badge { transform: rotate(-4deg) scale(1.04); }
.brand-word { font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.01em; }
.brand-word b { color: var(--primary); position: relative; }
.brand-word b::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 6px; background: var(--accent); z-index: -1; opacity: .55; }
.navbar-links { display: flex; gap: 6px; }
.navlink { padding: 9px 14px; border-radius: 10px; color: var(--muted); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background .15s, color .15s; }
.navlink:hover, .navlink.is-active { background: var(--primary-wash); color: var(--primary); }
.navbar-right { display: flex; align-items: center; gap: 12px; }
.navbar-user { font-weight: 700; font-size: 13.5px; color: var(--muted); }
.btn--sm { padding: 8px 16px; font-size: 13.5px; }
@media (max-width: 720px) {
    .navbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .navbar-links { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
    /* Full name next to the logout button left almost no breathing room on
       the narrowest phones — the name is already shown on the dashboard
       greeting, so drop it here rather than let both crowd the edge. */
    .navbar-user { display: none; }
}

.site-footer { border-top: 1px solid var(--border); margin-top: 60px; background: var(--card-2); }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 24px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13.5px; }
.footer-inner a { color: var(--primary); font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------------
   Home hero — asymmetric two-column layout (copy left, brand-mark visual
   right) instead of a centered generic hero. Yellow stays dominant per
   the brand (logo is yellow-forward), but layered with a diagonal-glow
   gradient + grain overlay instead of one flat wash, so it doesn't read
   as a plain color block. */
.mlz-hero {
    position: relative; overflow: hidden;
    background: var(--gradient-hero);
    border-radius: 32px; margin: 28px auto; max-width: 1160px;
    box-shadow: var(--shadow-hero);
}
.mlz-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 82% 15%, rgba(255,255,255,.55), transparent 45%),
                radial-gradient(circle at 8% 95%, rgba(5,1,26,.10), transparent 40%);
}
.mlz-hero-grain {
    position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
    background-image: url('../assets/brand/grain.png'); background-size: 200px 200px;
}
.mlz-hero-inner {
    position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
    gap: 20px; padding: 60px 52px;
}
.mlz-eyebrow {
    display: inline-flex; align-items: center; gap: 7px; background: var(--primary); color: var(--accent);
    font-weight: 700; font-size: 12.5px; padding: 7px 14px 7px 12px; border-radius: 100px; margin-bottom: 20px;
}
.mlz-hero-copy h1 { font-size: 42px; line-height: 1.08; font-weight: 800; color: var(--primary); margin: 0 0 16px; letter-spacing: -0.02em; text-wrap: balance; }
.mlz-hero-copy p { font-size: 16.5px; line-height: 1.55; color: var(--primary); opacity: .78; max-width: 480px; margin: 0 0 28px; }
.mlz-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 40px; }
.mlz-hero .btn { background: var(--primary); color: var(--accent); }
.mlz-hero .btn:hover { background: #14104a; }
.mlz-hero-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; font-size: 14.5px; text-decoration: none; opacity: .82; transition: opacity .15s, gap .15s; }
.mlz-hero-link:hover { opacity: 1; gap: 8px; }
.mlz-hero-stats { display: flex; gap: 28px; }
.mlz-hero-stats div { padding-left: 16px; border-left: 2px solid rgba(5,1,26,.15); }
.mlz-hero-stats div:first-child { padding-left: 0; border-left: none; }
.mlz-hero-stats strong { display: block; font-size: 24px; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
.mlz-hero-stats span { font-size: 12.5px; color: var(--primary); opacity: .65; font-weight: 600; }
.mlz-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.mlz-hero-logo-plate {
    width: 300px; border-radius: 30px; overflow: hidden; transform: rotate(-2deg);
    box-shadow: 0 30px 60px -20px rgba(5,1,26,.4), 0 0 0 6px rgba(255,255,255,.5);
    transition: transform .25s ease;
}
.mlz-hero-logo-plate:hover { transform: rotate(0deg) scale(1.02); }
.mlz-hero-logo-plate img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
    .mlz-hero-inner { grid-template-columns: 1fr; padding: 44px 26px; text-align: center; }
    .mlz-hero-copy p { margin-left: auto; margin-right: auto; }
    .mlz-hero-actions { justify-content: center; }
    .mlz-hero-stats { justify-content: center; }
    .mlz-hero-visual { order: -1; min-height: 0; margin-bottom: 8px; }
    .mlz-hero-logo-plate { width: 210px; }
}

/* Bento feature grid — one large card + two stacked, not three equal columns */
.mlz-bento { max-width: 1160px; margin: 48px auto; padding: 0 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.mlz-bento-stack { display: grid; gap: 20px; }
.mlz-bento-card {
    position: relative; display: flex; flex-direction: column; background: var(--card);
    border-radius: 22px; padding: 30px; box-shadow: 0 18px 40px -28px rgba(5,1,26,.28);
    text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease;
}
.mlz-bento-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(5,1,26,.32); }
.mlz-bento-card--lg .mlz-card-icon { width: 56px; height: 56px; }
.mlz-bento-card--lg h3 { font-size: 24px; }
.mlz-bento-card--lg p { font-size: 15px; max-width: 460px; }
.mlz-bento-tags { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 26px; }
.mlz-bento-tags span {
    display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text);
    padding: 11px 16px; border-radius: 12px; background: var(--card-2);
}
.mlz-bento-tags span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px var(--primary-wash); }
.mlz-bento-card--accent { background: var(--primary); color: #fdf6e3; }
.mlz-bento-card--accent .mlz-card-icon { background: rgba(255,190,0,.16); color: var(--accent); }
.mlz-bento-card--accent p { color: rgba(253,246,227,.72); }
.mlz-bento-card--accent .mlz-bento-cta { color: var(--accent); }
.mlz-card-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--primary-wash); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mlz-bento-card h3 { font-size: 18px; margin: 0 0 8px; }
.mlz-bento-card p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; }
.mlz-bento-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--primary); transition: gap .15s; }
.mlz-bento-card:hover .mlz-bento-cta { gap: 8px; }
@media (max-width: 860px) {
    .mlz-bento { grid-template-columns: 1fr; }
}

.mlz-page { max-width: 1100px; margin: 0 auto; padding: 32px 28px 60px; width: 100%; }
.mlz-page h1 { font-size: 26px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.mlz-page .page-sub { color: var(--muted); margin: 0 0 28px; }

/* Test list: single column on narrow screens, a 2-up grid once there's
   enough width to actually use it — a fixed single column on desktop just
   wasted the other half of a 1100px-wide page. */
.mlz-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .mlz-list { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); align-items: start; }
}
.mlz-test-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card);
    border-radius: 16px; padding: 18px 22px; box-shadow: 0 10px 26px -22px rgba(5,1,26,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mlz-test-row:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(5,1,26,.28); }
.mlz-test-row h3 { margin: 0 0 4px; font-size: 16.5px; }
.mlz-test-row p { margin: 0; font-size: 13px; color: var(--muted); }
.mlz-test-row .btn { flex-shrink: 0; }
@media (max-width: 520px) {
    /* Title+meta next to a wide button got cramped into two squeezed
       columns on phones — stack instead, full-width button below. */
    .mlz-test-row { flex-direction: column; align-items: stretch; text-align: center; }
    .mlz-test-row .btn { width: 100%; }
}

/* Empty state: was left-aligned near the top with 60px padding and nothing
   else, so on a full-height page it read as broken rather than "no data
   yet" — centering it in the available body height plus an icon makes the
   whitespace read as intentional on both a short phone view and a tall
   desktop one. */
.mlz-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    text-align: center; color: var(--muted); padding: 60px 20px; min-height: 44vh;
}
.mlz-empty-icon {
    width: 64px; height: 64px; border-radius: 20px; background: var(--primary-wash); color: var(--primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mlz-empty p { margin: 0; font-size: 15px; }

/* Auth cards reuse .auth-wrap from base stylesheet, already token-based */