/* ---------- TOPBAR ---------- */
.navshell {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(var(--navshell-rgb), 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.1);
    padding: 14px 0 0;
}

.navshell__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.navshell__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navshell__menu-btn {
    background: none;
    border: none;
    color: var(--fg);
    font-size: 20px;
    cursor: pointer;
    padding: 2px 2px 2px 0;
    line-height: 1;
}

.identity__logo {
    width: 30px;
    height: 30px;
    flex: none;
}

.identity h1 {
    font-size: 18px;
    margin: 0;
    color: var(--fg);
    line-height: 1.1;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.5);
}

body.theme-picker--light .identity h1 {
    text-shadow: none;
}

.identity__tagline {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px;
}

.navshell__metrics {
    display: flex;
    align-items: center;
    gap: 14px;
}

.navshell__metric-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
}

.navshell__metric-chip .utility-chip__icon {
    font-size: 16px;
}

.navshell__metric-chip--streak {
    color: var(--accent-light);
}

.navshell__metric-chip--hearts {
    color: #FF5C7A;
}

.navshell__metric-chip--xp {
    color: var(--gold);
}

.navshell__avatar-btn {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(var(--overlay-rgb), 0.2);
    background: linear-gradient(135deg, var(--teal), var(--purple));
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease;
}

.navshell__avatar-btn:hover {
    transform: scale(1.1);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.navshell__avatar-btn:active {
    transform: scale(0.92);
}

.navshell__avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* BUGFIX: "Tarjimon" va "Faollik kalendari" tugmalari padding:0 bilan
   qolib ketgani uchun boshqa metric-chip'lardan (streak/jon/yulduz)
   ancha kichik, bosishga noqulay bo'lib turardi. Endi ular ham xuddi
   shu qatordagi boshqa chip'lar kabi qulay, teng o'lchamdagi bosiladigan
   maydonga ega. */
.utility-chip {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg);
    padding: 7px 10px;
    min-width: 40px;
    justify-content: center;
    border-radius: 12px;
    transition: background .18s ease, transform .18s ease;
}

.utility-chip:hover {
    background: rgba(var(--overlay-rgb), .07);
}

.utility-chip:active {
    transform: scale(.94);
}

#translateBtnTop {
    display: none;
}

@media (max-width:899px) {
    #tabTyping {
        display: none !important;
    }

    /* MUHIM, JIDDIY XATO TUZATILDI: bu yerda avval
       ".typing-lab.state--active { display: none !important; }" qoidasi
       bor edi. Bu qoida "Terish" bo'limiga ESKI, ustki navigatsiya
       tugmasi (#tabTyping) orqali kirishni yashirish uchun yozilgan
       edi — LEKIN u KONTENTNING O'ZINI (natija: butun "Terish" ekrani
       BO'M-BO'SH ko'rinar edi!) yashirib qo'ygan, hatto foydalanuvchi
       TO'G'RI, YANGI yo'l — "Asosiy" ekranidagi "Terish" kartasi
       (#homeCardTyping) — orqali kirganda ham. Faqat ESKI navigatsiya
       elementlarini (yuqoridagi tugma va menyudagi qator) yashirish
       kifoya edi, kontentning o'ziga tegish shart emas edi. */

    .menu__nav-btn[data-tab="typing"] {
        display: none !important;
    }
}

@media (min-width:768px) {
    #translateBtnTop {
        display: inline-flex;
        align-items: center;
    }
}

.utility-chip .utility-chip__icon {
    font-size: 22px;
    display: inline-flex;
}

.utility-chip__glyph {
    width: 21px;
    height: 21px;
}

@media (max-width:480px) {
    .identity__logo {
        width: 23px;
        height: 23px;
    }

    .identity h1 {
        font-size: 14px;
    }

    .identity__tagline {
        font-size: 9px;
    }

    .navshell__menu-btn {
        font-size: 18px;
    }

    .utility-chip {
        display: none;
    }

    .navshell__metrics {
        gap: 9px;
    }

    .navshell__metric-chip {
        font-size: 12px;
        gap: 3px;
    }

    .navshell__metric-chip .utility-chip__icon {
        font-size: 13px;
    }
}

.mastery-meter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mastery-meter__track {
    flex: 1;
    height: 9px;
    background: rgba(var(--overlay-rgb), 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.mastery-meter__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--accent));
    border-radius: 8px;
    transition: width .6s ease;
}

.mastery-meter__label {
    font-size: 11px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.rhythm-strip {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 4px 2px;
}

.rhythm-strip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.rhythm-strip__day .rhythm-strip__label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: color .2s ease;
}

.rhythm-strip__day .rhythm-strip__pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--overlay-rgb), 0.1);
    border: 1px solid rgba(var(--overlay-rgb), 0.15);
}

.rhythm-strip__day .rhythm-strip__pip.state--filled {
    background: var(--success);
    border-color: var(--success);
}

.rhythm-strip__day .rhythm-strip__pip.state--today {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 12px 2px rgba(var(--accent-rgb), 0.65);
}

.rhythm-strip__day .rhythm-strip__pip.state--today.state--filled {
    background: linear-gradient(135deg, var(--success), var(--accent));
}

.rhythm-strip__day:has(.rhythm-strip__pip.state--today) .rhythm-strip__label {
    color: var(--accent);
    font-weight: 800;
}

.command-nav {
    position: sticky;
    top: var(--navshell-h, 96px);
    z-index: 29;
    background: rgba(var(--navshell-rgb), 0.94);
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.1);
}

.command-nav__inner {
    display: flex;
    gap: 4px;
    max-width: 640px;
    margin: 0 auto;
    padding: 12px 20px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.command-nav__inner::-webkit-scrollbar {
    display: none;
}

.command-nav__item {
    flex: 0 0 auto;
    min-width: 76px;
    text-align: center;
    padding: 10px 10px;
    border: none;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.nav-glyph {
    width: 16px;
    height: 16px;
    flex: none;
    vertical-align: middle;
}

.command-nav__item:hover:not(.state--active) {
    color: var(--fg);
    background: rgba(var(--overlay-rgb), 0.05);
}

.command-nav__mobile-only {
    display: none;
}

@media (max-width:640px) {
    .navshell__menu-btn {
        display: none;
    }

    /* MUHIM: bu yerda avval ".command-nav" uchun to'liq alohida
       fixed-position qoida bor edi (z-index:80), lekin u
       home-hub-nav.css'dagi ".command-nav" qoidasi (max-width:900px,
       !important bilan, z-index:60) tomonidan TO'LIQ bosib
       o'tilgan (keyinroq yuklangani va !important ishlatgani uchun) —
       ya'ni bu yerdagi versiya HECH QACHON ko'rinmagan, o'lik kod edi.
       Chalkashlikni oldini olish uchun olib tashlandi; haqiqiy,
       ishlaydigan qoida home-hub-nav.css'da joylashgan. */

    .command-nav__inner {
        display: flex;
        max-width: none;
        margin: 0;
        gap: 0;
        padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        overflow-x: auto;
    }

    .command-nav__item {
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        flex: 1 1 0;
        padding: 6px 2px;
        border-radius: 12px;
        border-bottom: none;
        font-size: 9.5px;
        font-weight: 700;
    }

    .nav-glyph {
        width: 19px;
        height: 19px;
    }

    .command-nav__item.state--active {
        color: var(--accent);
        border-bottom: none;
        background: rgba(var(--overlay-rgb), 0.08);
        text-shadow: none;
    }

    .command-nav__mobile-only {
        display: inline-flex;
    }

    .journey-board,
    .play-lab,
    .typing-lab,
    .listening-lab,
    .word-vault,
    .language-bridge,
    .reward-market {
        padding-bottom: 96px;
    }

    #toast {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

.command-nav__item.state--active {
    color: var(--fg);
    border-bottom: 2px solid var(--accent);
    text-shadow: 0 0 12px rgba(255, 46, 151, 0.6);
}

body.theme-picker--light .command-nav__item.state--active {
    text-shadow: none;
}


/* ==========================================================================
   APP SHELL — final product UI (avvalgi app-shell-final.css dan).
   Web versiyasi ataylab kelajakdagi mobil ilovani aks ettiradi: ixcham
   chrome, doimiy navigatsiya, vazifa-birinchi bosh sahifa.
   ========================================================================== */
:root{--app-max:1180px;--app-line:rgba(150,173,215,.13);--app-panel:rgba(12,19,34,.92);--app-panel-2:rgba(17,26,45,.88);--app-shadow:0 18px 55px rgba(0,0,0,.24)}
body{background:radial-gradient(900px 500px at 50% -140px,rgba(var(--accent-rgb),.16),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 52%,var(--bg) 100%)!important;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(63,214,255,.035),transparent 25%,transparent 75%,rgba(255,45,155,.035));}
.navshell{position:sticky!important;top:0!important;z-index:80!important;background:rgba(7,12,22,.82)!important;border-bottom:1px solid var(--app-line)!important;backdrop-filter:blur(22px)!important}
.navshell__inner{max-width:var(--app-max)!important;padding:10px 18px 8px!important}
.identity{border:1px solid var(--app-line)!important;background:rgba(255,255,255,.035)!important;box-shadow:0 10px 28px rgba(0,0,0,.16)!important}
.identity h1{font-size:17px!important}.identity__tagline{font-size:8px!important}
.navshell__metrics{gap:6px!important}.navshell__metric-chip{min-height:34px!important;border:1px solid var(--app-line)!important;background:rgba(255,255,255,.035)!important;border-radius:12px!important}
.mastery-meter{margin-top:8px!important}.rhythm-strip{margin-top:6px!important}
.command-nav{position:sticky!important;top:82px!important;z-index:70!important;background:rgba(7,12,22,.78)!important;border-bottom:1px solid rgba(150,173,215,.08)!important;backdrop-filter:blur(18px)!important}
.command-nav__inner{max-width:var(--app-max)!important;padding:6px 18px!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:5px!important}
.command-nav__item{min-height:42px!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:#7f8ca7!important;font-weight:800!important}
.command-nav__item.state--active{background:linear-gradient(135deg,rgba(68,216,255,.12),rgba(168,85,247,.13))!important;border-color:rgba(91,211,255,.18)!important;color:#f3f7ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
.learning-stage{max-width:var(--app-max)!important;padding:18px 18px 100px!important;margin:0 auto!important}
/* App kartalari: barcha komponentlarda bir xil zichlik va teginish nishoni */
.play-tile,.typing-course__course-card,.typing-course__stage-card,.essential__card,.page__row,.dictionary__card,.dictionary__entry,.store__card,.audio-player__row{border-radius:16px!important;background:linear-gradient(145deg,rgba(17,27,46,.92),rgba(10,16,29,.94))!important;border:1px solid var(--app-line)!important;box-shadow:0 10px 28px rgba(0,0,0,.13)!important}
.play-tile__visual,.game-title-icon,.diff__icon,.auth__logo,.voice-picker__persona-emoji,.language-picker__picker-flag{display:grid;place-items:center}
.auth__logo{width:62px!important;height:62px!important;margin:0 auto 13px!important;border-radius:18px!important;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.16),rgba(90,214,255,.08) 45%,rgba(168,85,247,.12))!important;border:1px solid rgba(120,190,255,.14)!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important;font-size:28px!important}
.auth__dev-code{margin:10px 0;padding:9px 12px;border-radius:10px;background:rgba(67,219,255,.08);border:1px solid rgba(67,219,255,.16);color:#9eeaff;font:700 11px/1.4 'JetBrains Mono',monospace;text-align:center}
.date-picker__picker-popover{z-index:1000!important}
.offline__blocker{z-index:1000!important}
@media(max-width:820px){.command-nav{top:78px!important}.command-nav__inner{grid-template-columns:repeat(3,1fr)!important}.learning-stage{padding:12px 12px 90px!important}}
@media(max-width:520px){.navshell__inner{padding:8px 10px!important}.identity__tagline{display:none}.navshell__metrics .navshell__metric-chip:nth-child(1),.navshell__metrics .navshell__metric-chip:nth-child(2){display:none}.command-nav__inner{grid-template-columns:repeat(3,1fr)!important;padding:5px 8px!important}.command-nav__item{min-height:38px!important;font-size:9px!important}.command-nav__item .nav-glyph{width:16px!important}}
/* MUHIM: "body.theme-picker--light{background:...}" qoidasi ataylab
   olib tashlandi — asl loyihada bu qoida (app-shell-final.css dan)
   themes.css'dagi ultimate-quality-fix qismidan OLDIN yuklangani
   uchun har doim bekor qilinardi ("o'lik kod" edi). Uni shu yerda
   qoldirish, yangi tuzilmada (navshell.css themes.css'dan KEYIN
   yuklanadi) uni tasodifan "tiriltirib", asl loyihada hech qachon
   ko'rinmagan fon rangini chiqarib yuborardi (real sinovda topilgan,
   tasdiqlangan xato edi). */
.theme-picker--light .navshell,.theme-picker--light .command-nav{background:rgba(248,251,255,.88)!important}.theme-picker--light .play-tile,.theme-picker--light .typing-course__course-card,.theme-picker--light .typing-course__stage-card,.theme-picker--light .essential__card,.theme-picker--light .page__row,.theme-picker--light .dictionary__card,.theme-picker--light .dictionary__entry,.theme-picker--light .store__card,.theme-picker--light .audio-player__row{background:linear-gradient(145deg,#fff,#f4f7fb)!important;color:#172033!important}

/* ---------- Qolgan global responsive tuzatishlar (avvalgi
   quality-polish.css dan) ---------- */
@media(max-width:900px){body{padding-bottom:env(safe-area-inset-bottom)}.messages__panel{inset:0;max-height:100dvh}.learning-stage{min-width:0}.command-nav{max-width:100vw}.command-nav__inner{overflow-x:auto;scrollbar-width:none}.command-nav__inner::-webkit-scrollbar{display:none}}
@media(max-width:640px){.quest-strip__actions{overflow-x:auto;max-width:100%;padding-bottom:2px}.quest-chip{white-space:nowrap}.navshell__metrics{min-width:0}.home-hero h2{font-size:clamp(26px,9vw,38px)!important}.home-hero__microstats{gap:7px}.messages__composer{padding:10px}.messages__composer button{min-height:44px}.bubble{max-width:90%}}
@media(max-width:380px){.command-nav__item{font-size:8px!important;padding-inline:6px!important}.home-hero__microstats span{font-size:10px}}