/* ══════════════════════════════════════════════════════════════════════
   SALOM ENGLISH — dizayn tizimining ILOVAGA XOS qatlami
   ──────────────────────────────────────────────────────────────────────
   `template.css` — umumiy tizim (Ohayo Template). Bu fayl uning USTIGA
   yuklanadi va faqat SALOM ENGLISH ga tegishli narsalarni beradi:

       1. Brend rangi (ko'k)
       2. `--red*` KO'PRIGI — eski sahifalar va `economy.js` shu nomlarga
          bog'langan
       3. Kitob va daraja temalari (har ekran o'z kitobining rangida)
       4. Harakat kengaytmasi (test uchun prujina egri chiziqlari)
       5. Eski markup ko'prigi (`.bottom-nav`, `.nav-item` …)
       6. Skelet, holat, yordamchilar
       7. Skrinshot rejimi (`?shot=1`)

   QOIDA O'ZGARMAYDI: bu yerda ham qattiq yozilgan rang yoki o'lcham
   bo'lmasin — faqat tokenlar. Yangi token kerak bo'lsa, u SHU YERDA,
   bitta joyda e'lon qilinadi.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1. BREND — KO'K
   Template'ning standarti qizil (Ohayo quyoshi). SALOM ENGLISH ko'k:
   qiymatlar template'ning `.theme-blue` sidan olingan, shuning uchun
   ular tizimning boshqa temalari bilan bir xil "og'irlikda".
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --brand:        #1D6FE0;
  --brand-strong: #1553AC;
  --brand-soft:   #EAF1FC;
  --brand-line:   #C2D8F5;
}
html.dark{
  --brand:        #63A4FF;
  --brand-strong: #8CBCFF;
  --brand-soft:   #111F36;
  --brand-line:   #1E355C;
}


/* ══════════════════════════════════════════════════════════════════════
   2. `--red*` KO'PRIGI — ESKI NOMLAR
   ──────────────────────────────────────────────────────────────────────
   Tarix: bu ilova KOTOBA'dan meros; brend tokeni `--red` deb ataladi,
   qiymati esa hech qachon qizil bo'lmagan. Nom O'ZGARTIRILMAYDI:
   `core/economy.js` dagi `applyTheme()` uni NOM BO'YICHA o'rnatadi va
   o'chiradi, va 18 sahifaning ichki `<style>` bloklari ham shu nomni
   ishlatadi.

   Shuning uchun yo'nalish shunday: `--brand` — MANBA, `--red` — soya.

   ⚠️ TUZOQ: `var()` o'zi E'LON QILINGAN elementda hisoblanadi va keyin
   tayyor qiymat bo'lib meros bo'ladi. Ya'ni ko'prik faqat `:root` da
   yozilsa, `.tema-b3` ichida `--brand` o'zgarganda `--red` O'ZGARMAYDI —
   u allaqachon ko'kka qotib qolgan bo'ladi. Shu sababli ko'prik
   `--brand` qayta belgilanadigan HAR QAMROVDA takrorlanadi.
   ══════════════════════════════════════════════════════════════════════ */
:root,
.phone,
[class*="tema-"]{
  --red:       var(--brand);
  --red-dark:  var(--brand-strong);
  --red-light: var(--brand-soft);
  /* Eski kod `--gold` ni ham chaqiradi (mukofot, yorliq). Tizimda
     alohida oltin oila yo'q — ogohlantirish/urg'u `bad` ning yumshoq
     variantida beriladi. Qiymatlar `--n-*` bilan bir oilada. */
  --gold:       #B77400;
  --gold-light: #FBF2E0;
  /* Eski `--success` / `--info` -> tizim rollari */
  --success: var(--ok);
  --info:    var(--text-2);
  /* Eski radius nomlari — sahifalarning ichki `<style>` bloklari
     ularni ishlatadi. Migratsiya tugagach shu blok o'chiriladi. */
  --radius-lg: var(--r-lg);
  --radius-md: var(--r-md);
  --radius-sm: var(--r-sm);
  /* Eski neytrallar */
  --ink:    var(--text);
  --muted:  var(--text-3);
  --bg:     var(--n-50);
  --card:   var(--surface);
  --border: var(--line);
}
html.dark{ --gold:#F0B429; --gold-light:#2E2410; --soya: 0, 0, 0; }
/* `.phone` va `[class*="tema-"]` `html.dark` dan KEYIN kelmasligi uchun
   tungi rejimdagi oltin ham qamrovlarda takrorlanadi. */
html.dark .phone,
html.dark [class*="tema-"]{ --gold:#F0B429; --gold-light:#2E2410; }


/* ══════════════════════════════════════════════════════════════════════
   3. KITOB VA DARAJA TEMALARI
   ──────────────────────────────────────────────────────────────────────
   «Har ekran o'z kitobining rangida» — ilovaning eski, yaxshi g'oyasi:
   foydalanuvchi qaysi kitobda ekanini rangdan biladi.

   Ranglar MUQOVADAN olingan, lekin muqova rangining O'ZI ishlatilmaydi:
   ular oq fonda 2:1 ÷ 3.6:1 kontrast beradi (matn uchun yaramaydi).
   Har biri WCAG AA (4.5:1) chegarasidan o'tguncha qoraytirilgan —
   pastdagi qiymatlar shu hisobning natijasi. Muqova rasmining o'zi
   asl rangida qoladi, faqat MATN va TO'LDIRISH rangi tuzatilgan.
   ══════════════════════════════════════════════════════════════════════ */
.tema-b1 { --brand:#5F7D34; --brand-strong:#496028; --brand-soft:#F4F6F1; --brand-line:#D5DDCA; }
.tema-b2 { --brand:#C1512D; --brand-strong:#953E23; --brand-soft:#FBF3F0; --brand-line:#EFD2C8; }
.tema-b3 { --brand:#337BA9; --brand-strong:#275D80; --brand-soft:#F1F6F9; --brand-line:#CADDE9; }
.tema-b4 { --brand:#AB2D79; --brand-strong:#9D296F; --brand-soft:#F9F0F6; --brand-line:#E9C8DC; }
.tema-b5 { --brand:#3B8170; --brand-strong:#2D6255; --brand-soft:#F1F6F5; --brand-line:#CCDEDA; }
.tema-b6 { --brand:#2B4894; --brand-strong:#1F356C; --brand-soft:#F0F2F8; --brand-line:#C8CFE3; }
.tema-el { --brand:#D20B18; --brand-strong:#B20914; --brand-soft:#FCEEEF; --brand-line:#F3C0C3; }
.tema-int{ --brand:#3F78B3; --brand-strong:#305B88; --brand-soft:#F2F6FA; --brand-line:#CDDCEB; }

/* Tungi rejimda brend OCHROQ bo'lishi kerak — to'q fonda to'q rang
   ko'rinmaydi. Qiymatlar `#16171B` yuzasiga nisbatan 4.6:1 dan o'tadi. */
html.dark .tema-b1 { --brand:#8EBB4E; --brand-strong:#AECE80; --brand-soft:#141A0B; --brand-line:#30401B; }
html.dark .tema-b2 { --brand:#D95B33; --brand-strong:#E4896C; --brand-soft:#1E0D07; --brand-line:#4A1F11; }
html.dark .tema-b3 { --brand:#3F98D1; --brand-strong:#75B5DE; --brand-soft:#09151D; --brand-line:#153447; }
html.dark .tema-b4 { --brand:#C0629A; --brand-strong:#D28EB6; --brand-soft:#1B0E16; --brand-line:#412134; }
html.dark .tema-b5 { --brand:#448E7D; --brand-strong:#78AEA1; --brand-soft:#0A1412; --brand-line:#17302A; }
html.dark .tema-b6 { --brand:#6D81B5; --brand-strong:#96A4CA; --brand-soft:#0F1219; --brand-line:#252C3E; }
html.dark .tema-el { --brand:#DF4F59; --brand-strong:#E88087; --brand-soft:#1F0B0C; --brand-line:#4C1B1E; }
html.dark .tema-int{ --brand:#4A86C5; --brand-strong:#7DA8D5; --brand-soft:#0A131C; --brand-line:#192E43; }

/* Muqova rasmining ASL rangi — faqat bezak uchun (kitob qirrasi, fon
   dog'i). Matn uchun ISHLATILMAYDI. */
.tema-b1 { --muqova:#8EBB4E; } .tema-b2 { --muqova:#D95B33; }
.tema-b3 { --muqova:#3F98D1; } .tema-b4 { --muqova:#AB2D79; }
.tema-b5 { --muqova:#408C7A; } .tema-b6 { --muqova:#2B4894; }
.tema-el { --muqova:#D20B18; } .tema-int{ --muqova:#4482C3; }


/* ══════════════════════════════════════════════════════════════════════
   4. HARAKAT KENGAYTMASI
   ──────────────────────────────────────────────────────────────────────
   Template'da ataylab ikki tezlik va ikki egri bor — interfeys uchun
   shuncha yetadi. Testda esa boshqacha: javob to'g'ri chiqqanda
   HISSIY javob kerak, u esa prujinasiz bo'lmaydi. Shuning uchun
   tizimga UCHTA token qo'shiladi, bitta joyda.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --sp-slower:  600ms;                          /* natija halqasi, sanoq */
  /* Soya SIYOHI. Kunduzda neytral-900 ning shaffofi, tungida sof qora:
     to'q fonda «qora ustiga qora» soya umuman ko'rinmaydi. Bu token
     bo'lmasa, sahifalarda `rgba(22,23,27,…)` qattiq yozilib qolardi va
     tungi rejimda kitob qirralari va qalinligi yo'qolardi. */
  --soya: 22, 23, 27;
  --ease-pop:    cubic-bezier(.2, 1.55, .4, 1); /* to'g'ri javob — sakrash */
  --ease-in:     cubic-bezier(.4, 0, 1, 1);     /* ketish */
}


/* ══════════════════════════════════════════════════════════════════════
   5. ESKI MARKUP KO'PRIGI
   ──────────────────────────────────────────────────────────────────────
   Pastki menyu 16 faylda NUSXA qilingan (`.bottom-nav > .nav-item >
   .nav-icon-wrap + .nav-label`). Uni JS bilan qaytadan qurish
   xavfli: har nusxada qo'lda sozlangan `href`, `.active` va
   `nth-child` rang tartibi bor. Shuning uchun markup joyida qoladi,
   faqat KO'RINISHI template'ning `.tabbar` iga tenglashtiriladi.
   Ikonkani `core/shell.js` emoji o'rniga SVG qilib qo'yadi.
   ══════════════════════════════════════════════════════════════════════ */
.bottom-nav{
  position:absolute; bottom:0; left:0; right:0; z-index:20;
  height:calc(64px + env(safe-area-inset-bottom, 0px));
  padding:0 0 env(safe-area-inset-bottom, 0px);
  background:var(--surface); border-top:var(--bw) solid var(--line);
  display:flex; align-items:center; box-shadow:0 -10px 24px -14px rgba(20,30,60,.25);
  border-radius:22px 22px 0 0; padding-left:var(--s-2); padding-right:var(--s-2); gap:var(--s-1);
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
  padding:var(--s-2) 0; text-decoration:none; color:var(--text-4);
  min-height:44px; justify-content:center; border-radius:16px; margin:var(--s-1) 0; height:calc(100% - 2 * var(--s-1));
  transition:color var(--sp-fast) var(--ease), background-color var(--sp-fast) var(--ease),
             box-shadow var(--sp-base) var(--ease), transform var(--sp-base) var(--ease-pop);
}
/* Har tabga ALOHIDA RANG BERILMAYDI.
   Ilgari beshta tab beshta rangda edi (ko'k / yashil / to'q sariq /
   binafsha / pushti). Bir vaqtda bittasi ko'rinsa ham oqibati bor:
   «Lug'at» bo'limida faol tab yashil bo'lib, ekrandagi qolgan hamma
   narsa ko'k qolardi — ilovaning urg'u rangi navigatsiyaga qarab
   o'zgarardi. Faol tab BREND rangida.
   Bo'lim ranglari `core/vaqt.js` da statistika grafigi uchun qoladi:
   u yerda ranglar bir vaqtda va yonma-yon ko'rinadi, ya'ni ular
   haqiqatan AJRATUVCHI vazifa bajaradi. */

/* Ikonka o'rami: ilgari bu yerda emoji turardi va uni kulrang qilish
   uchun `grayscale(1) brightness(.85) …` filtri kerak edi. SVG
   ikonkada rang `currentColor` dan keladi — filtr ham, fon plashkasi
   ham kerak emas. */
.nav-icon-wrap{
  width:var(--i-lg); height:var(--i-lg);
  display:flex; align-items:center; justify-content:center;
  background:none; border-radius:0; filter:none; font-size:0;
  transition:transform var(--sp-base) var(--ease-pop);
}
.nav-icon-wrap .ico{ width:var(--i-md); height:var(--i-md); }
/* Yorliq: UPPERCASE emas. 11px uppercase + keng trekking bilan
   «GRAMMATIKA» yacheykani to'ldirib yuborardi va o'qish qiyinlashardi. */
.nav-label{
  font-size:var(--t-xs); font-weight:600; color:inherit;
  letter-spacing:0; text-transform:none;
}
/* FAOL TAB — yonib turuvchi quti: brend gradienti, oq ikonka va yozuv,
   qalin pastki qirra va yumshoq porlash (rang sahifaning brend rangidan). */
.nav-item.active{
  color:var(--on-brand, #fff); transform:translateY(-4px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 color-mix(in srgb, var(--brand) 62%, #000),
             0 0 22px color-mix(in srgb, var(--brand) 55%, transparent);
  animation:navYon 2400ms ease-in-out infinite;
}
@keyframes navYon{
  0%,100%{ box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 color-mix(in srgb, var(--brand) 62%, #000), 0 0 14px color-mix(in srgb, var(--brand) 45%, transparent); }
  50%    { box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 color-mix(in srgb, var(--brand) 62%, #000), 0 0 28px color-mix(in srgb, var(--brand) 80%, transparent); }
}
@media (prefers-reduced-motion:reduce){ .nav-item.active{ animation:none; } }
.nav-item.active .nav-label{ font-weight:800; }
.nav-item.active .nav-icon-wrap{ transform:none; }
.nav-item.active .nav-label{ color:inherit; }
.nav-item:active .nav-icon-wrap{ transform:scale(.9); }
/* Eski qoidada faol tab tepasida rangli chiziqcha bor edi. Tizim
   qoidasi: faol element RANG bilan belgilanadi, plashka bilan emas. */
.nav-item.active::before{ content:none; }

/* Barmoq uchun 44 px — tizimning o'z qoidasi. Template'da `.btn-icon`
   40x40 edi va bu qoidani buzardi. Vizual og'irlik o'zgarmasligi uchun
   ikonka o'lchami emas, faqat TEGISH maydoni kattalashtiriladi. */
.btn-icon{ min-width:44px; min-height:44px; }

/* Chevron va shunga o'xshash yo'naltiruvchi ikonkalar `--text-4` da
   1.4.11 (3:1) dan o'tmaydi — bir pog'ona to'qroq. */
.ico.yonaltiruvchi{ color:var(--text-3); }

/* `.scroll` pastki bo'shlig'i menyu balandligiga bog'liq */
.scroll{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px) + var(--s-6)); }
.scroll.no-nav{ padding-bottom:var(--s-6); }

/* Eski yordamchilar */
.spacer{ height:var(--s-4); }
.anim-in{ animation:enter var(--sp-slow) var(--ease-out) both; }


/* ══════════════════════════════════════════════════════════════════════
   6. SKELET, HOLAT, YORDAMCHI
   ──────────────────────────────────────────────────────────────────────
   Ilovada data `<script>` bilan yuklanadi va kelguncha ekran BO'SH
   turadi (oq sahifa). Skelet shu bo'shliqni to'ldiradi va kontent
   kelganda joy siljimaydi.
   ══════════════════════════════════════════════════════════════════════ */
.skel{
  background:
    linear-gradient(90deg,
      var(--surface-3) 0%, var(--surface-2) 42%,
      var(--surface-2) 58%, var(--surface-3) 100%) 0 0 / 220% 100%;
  border-radius:var(--r-sm);
  animation:skelSurish 1.35s linear infinite;
}
@keyframes skelSurish{ from{ background-position:120% 0 } to{ background-position:-120% 0 } }
.skel-qator{ height:12px; margin:var(--s-2) 0; }
.skel-qator.w60{ width:60% } .skel-qator.w40{ width:40% }
.skel-karta{ height:104px; border-radius:var(--r-md); margin-bottom:var(--s-3); }

/* `hidden` ATRIBUTI HAR DOIM ISHLASIN.
   Brauzer uslubida `[hidden]{display:none}` bor, lekin u eng past
   ustuvorlikda: komponentda `display:inline-flex` yozilgan bo'lsa,
   `el.hidden = true` elementni YASHIRMAYDI. Bu tuzoqqa natija
   ekranidagi mukofot chipi tushgan edi — olmos berilmaganda ham
   bo'sh chip ko'rinib turardi. */
[hidden]{ display:none !important; }

/* Faqat ekran o'quvchisi uchun (javob e'loni, yashirin sarlavha) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ══════════════════════════════════════════════════════════════════════
   6b. WEBGL QATLAMI
   ──────────────────────────────────────────────────────────────────────
   ⚠️ KO'RINMAYDIGAN TUZOQ: `.phone` da `background:var(--bg)` bor va u
   NOSHAFFOF. Kanvasni uning orqasiga qo'ysak, u butunlay ko'rinmaydi
   — ekranda hech qanday farq bo'lmaydi va sabab topilmaydi.

   Yechim: `html[data-scene3d]` ostida fon `body` ga ko'chadi (shunda
   430 px dan tashqaridagi chekka ham to'g'ri rangda qoladi), `.phone`
   esa shaffof bo'ladi. Kanvas TELEFON QUTISIGA o'lchanadi, butun
   oynaga emas — keng ekranda bu ~4 barobar piksel tejaydi.
   ══════════════════════════════════════════════════════════════════════ */
html[data-scene3d] body { background:var(--bg); }
html[data-scene3d] .phone{ background:transparent; }
#gl3d{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; height:100%;
  z-index:0; pointer-events:none;
}
html[data-scene3d] .scroll,
html[data-scene3d] .topbar,
html[data-scene3d] .bottom-nav{ position:relative; z-index:1; }
html[data-scene3d] .topbar{ position:sticky; }   /* sticky saqlanadi */


/* ══════════════════════════════════════════════════════════════════════
   7. SKRINSHOT REJIMI  (`?shot=1`)
   ──────────────────────────────────────────────────────────────────────
   Offscreen WKWebView (`~/bin/webshot.swift`) CSS animatsiyalarini
   ISHGA TUSHIRMAYDI, shuning uchun `opacity:0` dan boshlanadigan
   kirish animatsiyalari o'sha holatda qotib qoladi va ro'yxatlar bo'sh
   ko'rinadi.

   ⚠️ Global `opacity:1 !important` QILINMAYDI — u yashirin modallarni,
   pardalarni va pastki varaqlarni ochib yuboradi.

   O'rniga davomiylik 1 ms ga tushiriladi: `animation-fill-mode:both`
   bo'lgan animatsiya OXIRGI KADRIGA o'zi tushadi, `display:none` yoki
   `visibility:hidden` bilan yashiringanlari esa yashirinligicha qoladi.
   ══════════════════════════════════════════════════════════════════════ */
/* Splash kadrini vaqt bo'yicha muzlatish uchun uning animatsiyalari
   yig'ilmaydi (`?splash=1&t=900`). */
html[data-shot]:not([data-shot-splash]) *,
html[data-shot]:not([data-shot-splash]) *::before,
html[data-shot]:not([data-shot-splash]) *::after,
html[data-shot][data-shot-splash] .phone *,
html[data-shot][data-shot-splash] .phone *::before{
  animation-duration:1ms !important;
  animation-delay:0ms !important;
  /* `transition-duration:1ms` YETMAYDI: offscreen WebView kadr
     chizmagani uchun o'tish umuman BOSHLANMAYDI va element boshlang'ich
     qiymatida qotib qoladi (progress halqasi bo'sh, chiziq 0 kenglikda
     ko'rinardi). O'tish butunlay o'chirilsa, qiymat darhol oxirgi
     holatiga o'tadi. */
  transition:none !important;
}
/* Cheksiz animatsiyalar kadrni "tirik" qoldiradi — to'xtatiladi */
html[data-shot] .skel{ animation:none !important; }


/* ══════════════════════════════════════════════════════════════════════
   8. HARAKATNI KAMAYTIRISH
   Template'da global qoida bor; bu yerda MA'NO tashiydigan harakat
   ataylab saqlanadi: progress halqasi va ball sanog'i bezak emas,
   ular ma'lumot ko'rsatadi.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .ring-fill{ transition-duration:300ms !important; }
  .bar > i  { transition-duration:300ms !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   9. RANG SHARTNOMASI
   ──────────────────────────────────────────────────────────────────────
   Tanqid: «yashil = to'g'ri javob, VA Lug'at, VA 1-kitob, VA 5-kitob;
   qizil = xato javob, VA butun Grammatika bo'limi, VA 90% ballning
   halqasi». Rang ma'no tashimay qolgan edi.

   Shartnoma — uch qator:

     1. `--ok` FAQAT «to'g'ri», `--bad` FAQAT «xato» degani.
     2. To'g'rilik ko'rsatiladigan har qanday ekranda BREND NEYTRAL.
     3. Progress — na `--ok`, na `--bad`, na bo'lim brendi. O'zining
        `--prog` tokeni bor: 90% ball qizil halqada ko'rinmasin.

   Bo'lim shaxsiyati rangda emas — ikonka, muqova va yorliqda qoladi.
   ══════════════════════════════════════════════════════════════════════ */

:root, .phone, [class*="tema-"]{
  /* Progress rangi — temadan ham, holat ranglaridan ham MUSTAQIL */
  --prog:      var(--n-700);
  --prog-fon:  var(--surface-3);
}
/* ⚠️ `--prog` uchun TUNGI REJIMDA ALOHIDA QIYMAT KERAK EMAS.
   Neytral shkalaning o'zi ag'darilgan: `--n-700` yorug'da #34383F
   (to'q), to'qda #C7CCD5 (ochiq). Bu yerda `--n-300` ga
   almashtirilgani xato edi — u to'q fonda #4A4F5A bo'lib, progress
   yoyi trekdan atigi ~1.6:1 ajralardi va kechqurun ko'rinmasdi. */
html.dark{ --fokus:#7AA7FF; }   /* to'q fonda ko'k kontur ko'rinmay qolardi */

/* Progress halqasi va chizig'i — HAR DOIM neytral.
   ⚠️ Tugallangan halqani `--ok` ga bo'yash vasvasasi bor, lekin u
   ikki marta xato: (a) `--ok` «to'g'ri javob» degani, «tugadi» emas;
   (b) 1 va 5-kitob temasi ham yashil — to'q rejimda o'ttizta yashil
   halqa va o'ttizta yashil TEST kafeli bir sahifada to'qnashardi.
   «Tugadi» to'liq yoy va `100%` yozuvi bilan allaqachon aytilgan. */
.ring-fill        { stroke:var(--prog); }
.bar > i          { background:var(--prog); }

/* To'g'rilik ko'rsatiladigan ekranlarda brend neytral bo'ladi.
   `LUGAT/test.html` da bu qoida sinovdan o'tgan; bu yerda uni
   BUTUN ilova ishlata oladigan klassga aylantiramiz. */
.baho-ekran{
  --brand:var(--n-800); --brand-strong:var(--n-900);
  --brand-soft:var(--surface-2); --brand-line:var(--line);
}
html.dark .baho-ekran{
  --brand:var(--n-100); --brand-strong:#fff;
  --brand-soft:var(--surface-2); --brand-line:var(--line);
}


/* ══════════════════════════════════════════════════════════════════════
   10. CHETLAR — kesilgan matn, kesilgan tasma, yopilgan kontent
   Tanqid beshta joyda bir xil sinf xatoni topdi: kontent boshqa
   narsa ostida yoki chekkada JIMGINA kesiladi. Uch yordamchi.
   ══════════════════════════════════════════════════════════════════════ */

/* Gorizontal tasma: o'ng chekkada so'nish + elementga «yopishish».
   Ilgari `5-KITOB` so'z o'rtasidan kesilardi va uning davomi borligi
   haqida hech qanday belgi yo'q edi. */
.tasma{
  display:flex; gap:var(--s-2); overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-inline:var(--s-4);
  /* So'nish niqobi — chekkadagi element «tugamagani» ko'rinib tursin */
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.tasma::-webkit-scrollbar{ display:none; }
.tasma > *{ scroll-snap-align:start; flex:0 0 auto; }
/* Oxirigacha surilganda niqob KERAK EMAS — aks holda oxirgi element
   doim yarim so'ngan ko'rinadi. */
.tasma[data-oxir]{ -webkit-mask-image:none; mask-image:none; }

/* Yopishqoq pastki panel ostidagi kontent kesilmasin */
.yopishqoq-parda{
  position:sticky; bottom:0; height:var(--s-6); margin-bottom:calc(var(--s-6) * -1);
  pointer-events:none; z-index:1;
  background:linear-gradient(to bottom, transparent, var(--bg));
}

/* Bo'lingan panel: ko'rinadigan balandlik QATOR BALANDLIGIGA karrali
   bo'lsin — aks holda oxirgi qatorning yarmi doimo ko'rinib turadi va
   harf o'rtasidan kesilgan matn qoladi. */
.qator-tekis{ --qb:1.6em; }
.qator-tekis > *{ line-height:var(--qb); }


/* ══════════════════════════════════════════════════════════════════════
   11. IMTIHON EKRANLARI — TUNGI REJIM YO'Q
   Haqiqiy IELTS kompyuter testi HAR DOIM oq. Nomzod oq fonda
   mashq qiladi va oq fonda imtihon topshiradi. Tungi rejim bu
   ekranlarda simulyatsiyani buzadi: nuqtali javob katakchalari va
   soch tolasidek jadval chegaralari to'q fonda ko'rinmay qoladi.
   ══════════════════════════════════════════════════════════════════════ */
html.dark [data-mode="exam"], html.dark .phone[data-mode="exam"]{
  --bg:#fff; --surface:#fff; --surface-2:#FAFAFA; --surface-3:#F1F1F2;
  --text:#16181D; --text-2:#4A4F58; --text-3:#767C86;
  --line:#E2E4E8; --line-2:#CACDD3;
  --brand:#16181D; --brand-strong:#000; --brand-soft:#F4F5F6; --brand-line:#DDE0E4;
  --ok:#17915A; --ok-soft:#E8F5EE; --ok-line:#BCE3CD;
  --bad:#A3241B; --bad-soft:#FBEAE7; --bad-line:#EFC3BC;
  color-scheme:light;
}


/* ══════════════════════════════════════════════════════════════════════
   12. TUNGI REJIMDA RASTR RASMLAR
   Muqovalar va illyustratsiyalar — ekrandagi yagona to'yingan rang.
   To'q fonda ular «yonadi» va grammatika darsidagi bezak rasm
   sahifadagi eng yorqin narsaga aylanadi. Rangni o'chirmaymiz,
   yorqinlikni fonga moslaymiz.
   ══════════════════════════════════════════════════════════════════════ */
html.dark .muqova img, html.dark .book-card img,
html.dark .rasm-bezak img, html.dark .dars-rasm img{
  filter:brightness(.86) saturate(.88);
}


/* ══════════════════════════════════════════════════════════════════════
   13. BO'SH QIYMAT
   `.empty` — butun ekran bo'sh bo'lganda (ikonka + sarlavha + matn +
   harakat). Lekin ba'zan bo'sh bo'lgani BITTA UYACHA: hali topshirilmagan
   ball, hali o'lchanmagan vaqt. U yerda `.empty` juda katta.

   Tanqid ilovada bo'sh uyachaning TO'RT XIL «shevasi» ni topdi: tire,
   QORA TO'SIQ (ball o'rnida — sensura kabi ko'rinadi), yolg'iz soat
   ikonkasi va kulrang halqa. Bittasi qoladi va u NIMA yo'qligini
   AYTADI — «—» ma'no tashimaydi.
   ══════════════════════════════════════════════════════════════════════ */
.qiymat-yoq{
  font-family:var(--f-head); font-weight:600; font-size:var(--t-sm);
  color:var(--text-4); letter-spacing:var(--ls-wide);
}