/* ══════════════════════════════════════════════════════════════════════
   OHAYO — DIZAYN TIZIMI
   ──────────────────────────────────────────────────────────────────────
   TIZIM QOIDASI: interfeysda faqat SHU FAYLDAGI tokenlar ishlatiladi.
   Sahifada qattiq yozilgan rang, o'lcham yoki radius bo'lmasin —
   agar kerak bo'lgan qiymat tokenlar orasida yo'q bo'lsa, demak u
   qiymat kerak emas (yoki tizimga yangi token qo'shiladi).

   Tizim tarkibi:
       1 neytral shkala (11 pog'ona)   — interfeysning 90 %
       5 rang oilasi                   — brend + 4 semantik
       5 radius                        — boshqasi yo'q
       9 oraliq (4 px asosida)         — boshqasi yo'q
       8 shrift pog'onasi (+ 4 yapon)  — boshqasi yo'q
       3 balandlik (soya)              — boshqasi yo'q

   TARTIB
     1. Tokenlar          6. Yuzalar (karta, panel)   11. Progress
     2. Tema              7. Tipografiya               12. Form
     3. Tungi rejim       8. Tugmalar                  13. Qatlam (oyna, toast)
     4. Asos              9. Chip, yorliq              14. Naqsh (ro'yxat, test…)
     5. Karkas           10. Ro'yxat va qator          15. Yordamchi
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1. TOKENLAR
   ══════════════════════════════════════════════════════════════════════ */
:root{

  /* ── 1.1 NEYTRAL SHKALA ──────────────────────────────────────────────
     Interfeysning asosi. Fon, chegara, matn — hammasi shu 11 pog'onadan.
     Sovuq emas, issiq emas: toza kulrang, yumshoq ko'k tomon ozgina
     og'ishgan (ekranda tinch ko'rinadi). */
  --n-0:   #FFFFFF;
  --n-25:  #FAFAFB;   /* karta ustidagi nozik zona */
  --n-50:  #F4F5F7;   /* sahifa foni */
  --n-100: #EBEDF0;   /* ajratgich, chegara */
  --n-200: #DDE0E6;   /* kuchli chegara, o'chirilgan yuza */
  --n-300: #C3C7D0;   /* o'chirilgan matn, ikonka */
  --n-400: #9BA1AE;   /* placeholder */
  --n-500: #6E7481;   /* ikkilamchi matn */
  --n-600: #4E535E;   /* qo'shimcha matn */
  --n-700: #34383F;   /* kuchli matn */
  --n-800: #22252B;   /* sarlavha */
  --n-900: #16171B;   /* asosiy matn */

  /* ── 1.2 BREND ───────────────────────────────────────────────────────
     Logotipdagi qizil quyosh. Interfeysda KAM ishlatiladi — faqat
     asosiy harakat, faol holat va urg'u. Fon sifatida deyarli hech qachon. */
  --brand:        #E11B2E;
  --brand-strong: #B8121F;   /* bosilgan, matn ustida */
  --brand-soft:   #FDEEF0;   /* och fon */
  --fokus:        #2563EB;   /* fokus halqasi — temadan MUSTAQIL */
  --brand-line:   #F7C9CE;   /* och chegara */

  /* ── 1.3 SEMANTIK — IKKI oila, har biri 3 token ──────────────────────
     `-soft` = fon, `-line` = chegara, asosiysi = matn/ikonka.

     Ataylab faqat ikkitasi: «bo'ldi» va «bo'lmadi». Ilgari to'rttasi bor
     edi (ok/warn/bad/info) va ekran rang-barang bo'lib ketardi —
     har karta, chip va yorliq o'z rangini talab qilardi.

     Qolgan ma'nolar rangsiz beriladi:
       ogohlantirish  → `bad` oilasining yumshoq varianti + ikonka
       tanlangan      → neytral (to'q chegara), rang emas
       ma'lumot       → neytral + ikonka
       tanga, olmos   → neytral chip; rang emojining o'zida
     Shu bilan bir ekranda ko'pi bilan uch rang qoladi:
     neytral, brend va bitta holat rangi. */
  --graf-bosh: #DFE2E7;   /* bo'sh nuqta/katak — KO'RINISHI shart */
  --ok:   #17915A;   --ok-soft:  #E8F5EE;   --ok-line:  #BCE3CD;
  /* `bad` brend qizilidan ATAYLAB uzoqlashtirilgan: brend yorqin va issiq
     (#E11B2E), xato esa to'q g'isht tusda. Yonma-yon turganda ikkalasi
     ajraladi — aks holda «o'chirish» tugmasi «asosiy harakat» ga o'xshab
     qoladi. */
  --bad:  #A3241B;   --bad-soft: #FBEAE7;   --bad-line: #EFC3BC;

  /* ── 1.4 SEMANTIK ROLLAR ─────────────────────────────────────────────
     Komponentlar ANIQ rang emas, ROL chaqiradi. Shuning uchun tungi
     rejimda faqat shu ro'yxat qayta belgilanadi — komponentlarga
     tegilmaydi. */
  --bg:          var(--n-50);    /* sahifa foni */
  --surface:     var(--n-0);     /* karta, panel */
  --surface-2:   var(--n-25);    /* karta ichidagi zona */
  --surface-3:   var(--n-100);   /* bosilgan / faol bo'lmagan */
  --line:        var(--n-100);   /* ajratgich */
  --line-strong: var(--n-200);   /* kuchli chegara */
  --text:        var(--n-900);   /* asosiy matn */
  --text-2:      var(--n-600);   /* qo'shimcha matn */
  --text-3:      var(--n-500);   /* izoh, meta */
  --text-4:      var(--n-400);   /* placeholder, o'chirilgan */
  --on-brand:    var(--n-0);     /* brend fon ustidagi matn */

  /* ── 1.5 ORALIQ — 4 px asosida ───────────────────────────────────────
     Oraliqlar shu ro'yxatdan olinadi. 6px, 9px, 11px, 13px yo'q. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;   /* ← ekran chekkasi (gutter). Asosiy o'lchov. */
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ── 1.6 SHRIFT PO'G'ONALARI ─────────────────────────────────────────
     8 pog'ona, taxminan 1.25 nisbatda. Yarim piksel yo'q.
     Ierarxiya o'lcham bilan emas, VAZN va RANG bilan quriladi —
     shuning uchun pog'ona kam. */
  --t-2xs: 11px;   /* uppercase yorliq */
  --t-xs:  12px;   /* meta, sanoq */
  --t-sm:  13px;   /* izoh, ikkilamchi */
  --t-md:  15px;   /* asosiy matn, tugma */
  --t-lg:  17px;   /* karta sarlavhasi, topbar */
  --t-xl:  21px;   /* bo'lim sarlavhasi */
  --t-2xl: 26px;   /* sahifa sarlavhasi */
  --t-3xl: 34px;   /* katta raqam, natija */

  /* Yapon matni alohida shkalada — bir xil piksel o'lchamida yapon
     glifi lotinnikidan kichikroq ko'rinadi, shuning uchun kattaroq. */
  --j-sm: 17px;
  --j-md: 22px;
  --j-lg: 30px;
  --j-xl: 40px;

  /* Ikonka va emoji o'lchamlari — matn shkalasidan ALOHIDA.
     Emoji glifi lotin harfidan «to'laroq» ko'rinadi, shuning uchun
     bir xil piksel o'lchamida kattaroq tuyuladi. */
  --i-sm: 16px;
  --i-md: 20px;
  --i-lg: 24px;
  --i-xl: 32px;

  /* ── 1.7 QATOR BALANDLIGI VA HARF ORALIG'I ── */
  --lh-tight:  1.25;   /* sarlavha */
  --lh-normal: 1.5;    /* matn */
  --lh-loose:  1.7;    /* uzun paragraf */
  --lh-jp:     1.9;    /* yapon matni (furigana joyi kerak) */
  --ls-tight:  -0.01em;
  --ls-wide:   0.06em;  /* uppercase yorliq */

  /* ── 1.8 SHRIFT OILALARI ──────────────────────────────────────────
     BITTA superoila — Noto. Ilova 16 tilda ishlaydi va ularning
     yozuvlari bitta shriftga sig'maydi: har yozuv uchun alohida Noto
     oilasi kerak. Hammasi bir dizayn tilida chizilgani uchun til
     almashganda harflarning qalinligi, balandligi va ruhi o'zgarmaydi.

     Ilgari uch xil shrift bor edi (Manrope + Baloo 2 + Noto Sans JP) va
     16 tildan 8 tasi umuman qoplanmasdi — bengal, tay, khmer, sinhala,
     birma, urdu, xitoy, koreys matni tizim shriftiga tushib, har
     qurilmada boshqacha ko'rinardi.

     Stack tartibi muhim: `Noto Sans` birinchi turadi (lotin, kirill,
     devanagari, vietnam), qolganlari faqat o'z belgilarini oladi. */
  --f-ui: 'Noto Sans',
          'Noto Sans Bengali', 'Noto Sans Thai', 'Noto Sans Khmer',
          'Noto Sans Sinhala', 'Noto Sans Myanmar', 'Noto Sans Arabic',
          'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC',
          -apple-system, sans-serif;
  /* Sarlavha uchun alohida display-shrift YO'Q — u faqat lotin va
     devanagarini qoplaydi, qolgan 10 yozuvda ishlamaydi. Ierarxiya
     vazn bilan quriladi (700/800), shakl bilan emas. */
  --f-head: var(--f-ui);
  /* Yapon kontenti — har doim JP. `--f-ui` da JP koreys va xitoydan
     keyin turmasligi uchun alohida token: interfeys tili zh yoki ko
     bo'lganda ham dars matni yapon shriftida qoladi. */
  --f-jp:   'Noto Sans JP', 'Noto Sans', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── 1.9 RADIUS — 5 ta, boshqasi yo'q ────────────────────────────────
     Kichik element kichik radius oladi. 40px li tugmada 20px radius
     «dori tabletkasi» ga aylanadi — shuning uchun o'lchamga bog'liq. */
  --r-sm:   8px;    /* chip, kichik tugma, ikonka */
  --r-md:   12px;   /* input, ro'yxat qatori, variant */
  --r-lg:   16px;   /* karta */
  --r-xl:   22px;   /* katta panel, pastki varaq */
  --r-full: 999px;  /* pill, doira */

  /* ── 1.10 CHEGARA — bitta qalinlik ───────────────────────────────────
     1px va 1.5px aralashsa qirralar notekis ko'rinadi. Bitta qiymat. */
  --bw: 1px;

  /* ── 1.11 BALANDLIK (soya) — 3 pog'ona ───────────────────────────────
     Har pog'ona ikki qavat: yaqin soya (shakl) + uzoq soya (chuqurlik).
     Soya QORA emas, neytral-900 ning shaffofi — toza ko'rinadi. */
  --e-1: 0 1px 2px rgba(22,23,27,.05);
  --e-2: 0 1px 2px rgba(22,23,27,.04), 0 4px 12px rgba(22,23,27,.06);
  --e-3: 0 4px 8px rgba(22,23,27,.06), 0 16px 32px rgba(22,23,27,.10);

  /* ── 1.12 HARAKAT ────────────────────────────────────────────────────
     Ikki tezlik, ikki egri. Ko'proq kerak emas. */
  --sp-fast: 120ms;
  --sp-base: 220ms;
  --sp-slow: 380ms;
  --sp-slow-yarim: 190ms;   /* aylanishning O'RTASI — yuz almashadigan lahza */
  --ease:      cubic-bezier(.2, .8, .3, 1);      /* standart */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);      /* chiqish, yumshoq to'xtash */

}


/* ══════════════════════════════════════════════════════════════════════
   2. TEMA
   Tema FAQAT brend uchligini almashtiradi — neytral shkala, semantik
   ranglar, o'lcham va radius o'zgarmaydi. Shuning uchun har tema bir xil
   «og'irlik» va bir xil kontrastda qoladi.

       <div class="phone theme-indigo"> … </div>
   ══════════════════════════════════════════════════════════════════════ */
.theme-red   { --brand:#E11B2E; --brand-strong:#B8121F; --brand-soft:#FDEEF0; --brand-line:#F7C9CE; }
.theme-indigo{ --brand:#4F46E5; --brand-strong:#3730A3; --brand-soft:#EEEDFC; --brand-line:#CBC8F5; }
.theme-blue  { --brand:#1D6FE0; --brand-strong:#1553AC; --brand-soft:#EAF1FC; --brand-line:#C2D8F5; }
/* ⚠️ Ilgari #0D8F82 edi va `--ok` (#17915A) dan atigi ~20° farq
   qilardi — teal temadagi ekranda «to'g'ri» holati brenddan
   ajralmasdi. Ko'k tomonga suriladi. */
.theme-teal  { --brand:#0A7C93; --brand-strong:#075C6E; --brand-soft:#E4F2F6; --brand-line:#AFD8E2; }
.theme-amber { --brand:#B77400; --brand-strong:#8C5900; --brand-soft:#FBF2E0; --brand-line:#EBD5A8; }
.theme-slate { --brand:#334155; --brand-strong:#1E293B; --brand-soft:#EEF0F3; --brand-line:#CBD2DB; }


/* ══════════════════════════════════════════════════════════════════════
   3. TUNGI REJIM
   Neytral shkala TESKARI aylanadi va semantik rollar qayta bog'lanadi.
   Komponentlarning birortasiga ham tegilmaydi — ular rol chaqiradi.

       <script>try{if(localStorage.getItem('ohayo_dark')==='1')
         document.documentElement.classList.add('dark');}catch(e){}</script>

   Skript HAMMA narsadan oldin turadi, aks holda sahifa oq lipillaydi.
   ══════════════════════════════════════════════════════════════════════ */
html.dark{
  --n-0:   #16171B;
  --n-25:  #1B1D22;
  --n-50:  #121317;
  --n-100: #292C33;
  --n-200: #363A43;
  --n-300: #4A4F5A;
  --n-400: #6E7481;
  --n-500: #8D94A1;
  --n-600: #AAB1BD;
  --n-700: #C7CCD5;
  --n-800: #E0E3E9;
  --n-900: #F2F4F7;

  /* Tungi rejimda ochroq yuza «yuqoriroq» degani — shuning uchun karta
     fondan ochroq (kunduzgi rejimda esa fon kartadan to'qroq).

     DIQQAT — WEBKIT TUZOG'I: bu yerda `var(--n-0)` YOZILMAYDI, aniq
     qiymat yoziladi. Safari `--surface: var(--n-0)` kabi ikki qavatli
     zanjirni `html.dark` klassi QO'SHILGANDA qayta hisoblamaydi va
     yuza kunduzgi oq rangda qotib qoladi (tugma oq fonda oq matn
     bo'lib ko'rinmay ketadi). Shuning uchun rollar to'g'ridan-to'g'ri.
     Qiymatlar yuqoridagi shkala bilan bir xil — o'zgartirsangiz
     ikkalasini birga o'zgartiring. */
  --bg:        #121317;   /* = n-50 */
  --surface:   #16171B;   /* = n-0  */
  --surface-2: #1B1D22;   /* = n-25 */
  --surface-3: #292C33;   /* = n-100 */
  --line:        #292C33; /* = n-100 */
  --line-strong: #363A43; /* = n-200 */
  --text:   #F2F4F7;      /* = n-900 */
  --text-2: #AAB1BD;      /* = n-600 */
  --text-3: #8D94A1;      /* = n-500 */
  --text-4: #6E7481;      /* = n-400 */

  /* ── Semantik ranglar tungi rejimda OCHROQ ─────────────────────────
     Kunduzgi tuslar (#17915A, #A3241B…) to'q fonda o'qilmaydi —
     kontrast 3:1 dan past tushadi. To'q fonda rang ochroq bo'lishi
     kerak, och fonda esa to'qroq: bu qoida hamma joyda amal qiladi.
     `bad` bu yerda ham brenddan uzoqda turadi — brend pushti tomon,
     xato esa g'isht-apelsin tomon suriladi. */
  --graf-bosh: #33373F;
  --ok:  #34D399;
  --bad: #FF8A70;

  /* Och tuslar to'q fonda ko'r qiladi — ular chuqurlashtiriladi */
  --brand:#FF4D5E;  --brand-strong:#FF7482;
  --brand-soft:#331319;  --brand-line:#5A1F28;
  --ok-soft:  #0F2A1E;  --ok-line:  #1D4A34;
  --bad-soft: #331A12;  --bad-line: #5A2E1F;

  /* Ochiq brend fon ustida matn TO'Q bo'ladi — oq matn ochiq qizil
     ustida 3:1 ga ham yetmaydi. */
  --on-brand: #16171B;

  /* To'q fonda soya ko'rinmaydi — chuqurroq va qora */
  --e-1: 0 1px 2px rgba(0,0,0,.30);
  --e-2: 0 1px 2px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.36);
  --e-3: 0 4px 8px rgba(0,0,0,.30), 0 16px 32px rgba(0,0,0,.50);
}
/* Tema + tungi rejim birga: brend tusi ham chuqurlashadi */
/* Har tema o'zining TUNGI brendini beradi: to'q fonda brend ochroq
   bo'lishi kerak, aks holda tugma fondan ajralmaydi. `--brand-strong`
   tungi rejimda hover uchun — u ham ochroq (to'qroq emas). */
html.dark.theme-red,    html.dark .theme-red   { --brand:#FF4D5E; --brand-strong:#FF7482; --brand-soft:#331319; --brand-line:#5A1F28; }
html.dark.theme-indigo, html.dark .theme-indigo{ --brand:#8B85F5; --brand-strong:#A9A4F8; --brand-soft:#1C1A3C; --brand-line:#302C63; }
html.dark.theme-blue,   html.dark .theme-blue  { --brand:#63A4FF; --brand-strong:#8CBCFF; --brand-soft:#111F36; --brand-line:#1E355C; }
html.dark.theme-teal,   html.dark .theme-teal  { --brand:#3BB8D6; --brand-strong:#6ECFE6; --brand-soft:#0A2229; --brand-line:#153B47; }
html.dark.theme-amber,  html.dark .theme-amber { --brand:#F0B429; --brand-strong:#F5C95C; --brand-soft:#2E2410; --brand-line:#4F3D18; }
html.dark.theme-slate,  html.dark .theme-slate { --brand:#94A3B8; --brand-strong:#B4C0D0; --brand-soft:#1D222B; --brand-line:#333B48; }


/* ══════════════════════════════════════════════════════════════════════
   4. ASOS
   ══════════════════════════════════════════════════════════════════════ */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* Safari `<button>` va `<input>` ga o'z ko'rinishini beradi va shu sabab
   ularning fonini custom property o'zgarganda QAYTA HISOBLAMAYDI —
   tungi rejimga o'tganda tugma oq fonda oq matn bo'lib ko'rinmay qoladi.
   Native ko'rinishni o'chirish buni hal qiladi. */
button, input, select, textarea{ -webkit-appearance:none; appearance:none; background:none; }
html, body{ width:100%; height:100%; background:var(--bg); }
body{
  font-family:var(--f-ui);
  font-size:var(--t-md);
  line-height:var(--lh-normal);
  color:var(--text);
  overflow:hidden;                 /* har sahifa — bitta ekran */
  -webkit-font-smoothing:antialiased;
}
img, svg{ display:block; max-width:100%; }
button, input, textarea, select{ font:inherit; color:inherit; }
a{ color:inherit; }

/* Klaviatura bilan yurganda fokus KO'RINSIN. Sichqoncha bilan bosganda
   yo'q — `:focus-visible` shuni ajratadi. */
/* ⚠️ Bu yerda `border-radius` YOZMANG — u konturga emas, ELEMENTNING
   o'ziga tushadi: klaviatura bilan fokuslangan doira tugma ko'z
   oldida kvadratga aylanadi. Kontur elementning o'z radiusini
   avtomatik takrorlaydi.
   Rang ham `--brand` dan OLINMAYDI: test ekrani brendni neytralga
   almashtiradi va fokus halqasi sahifadan sahifaga rang o'zgartirardi. */
:focus-visible{ outline:2px solid var(--fokus); outline-offset:2px; }


/* ══════════════════════════════════════════════════════════════════════
   4b. IKONKALAR
   Bitta paket — Lucide (24×24, 2 px stroke, yumaloq uchlar). Emoji
   ISHLATILMAYDI: u har platformada boshqacha chiziladi (Apple, Google,
   Samsung, Windows — to'rt xil ko'rinish), rangi boshqarilmaydi,
   o'lchami shriftga bog'liq va tungi rejimga moslashmaydi.

   Sprite `ikonlar.js` orqali sahifaga qo'shiladi:
       <script src="ikonlar.js?v=1" defer></script>

   Ishlatish — rang va o'lcham ATROFDAN keladi:
       <svg class="ico"><use href="#i-bosh"></use></svg>
       <svg class="ico lg"><use href="#i-streak"></use></svg>
   ══════════════════════════════════════════════════════════════════════ */
.ico{
  width:var(--i-md); height:var(--i-md); flex-shrink:0;
  display:inline-block; vertical-align:-0.15em;
  fill:none; stroke:currentColor;      /* rang ota-elementdan */
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* Optik tenglash: katta ikonkada chiziq nisbatan ingichka, kichigida
   qalin ko'rinadi — shuning uchun stroke o'lchamga qarab moslanadi. */
.ico.sm{ width:var(--i-sm); height:var(--i-sm); stroke-width:2.25; }
.ico.lg{ width:var(--i-lg); height:var(--i-lg); }
.ico.xl{ width:var(--i-xl); height:var(--i-xl); stroke-width:1.75; }


/* ── Til bayrog'i ─────────────────────────────────────────────────────
   Doira shaklida, `bayroqlar.js` sprite'idan. Emoji bayroq
   ISHLATILMAYDI — Windows uni umuman chizmaydi.
       <svg class="bayroq"><use href="#b-uz"></use></svg> */
.bayroq{
  width:var(--i-lg); height:var(--i-lg); flex-shrink:0;
  display:inline-block; vertical-align:-0.2em; border-radius:var(--r-full);
}
.bayroq.sm{ width:var(--i-md); height:var(--i-md); }
.bayroq.lg{ width:var(--i-xl); height:var(--i-xl); }


/* ══════════════════════════════════════════════════════════════════════
   5. KARKAS

       <div class="phone">
         <div class="scroll">
           <div class="screen">
             <header class="topbar"> … </header>
             … kontent …
           </div>
         </div>
         <nav class="tabbar"> … </nav>
         <div class="toast" id="toast"></div>
       </div>
   ══════════════════════════════════════════════════════════════════════ */
.phone{
  position:relative; width:100vw; height:100vh; max-width:430px; margin:0 auto;
  display:flex; flex-direction:column; background:var(--bg); overflow:hidden;
}
.scroll{
  flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  padding-bottom:var(--s-12);           /* tabbar balandligi + havo */
  -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
}
.scroll::-webkit-scrollbar{ display:none; }
.scroll.has-tabbar{ padding-bottom:96px; }
.screen{ position:relative; }

/* ── TOPBAR ───────────────────────────────────────────────────────────
   Sahifa fonidan ajralib turadi, lekin qattiq chiziq bilan emas:
   yuza rangi + nozik ajratgich. Sahifada QAYTA STILLANMAYDI. */
.topbar{
  position:sticky; top:0; z-index:20; flex-shrink:0;
  display:flex; align-items:center; gap:var(--s-3);
  padding:calc(var(--s-3) + env(safe-area-inset-top, 0px) + var(--tg-top, 0px)) var(--s-4) var(--s-3);
  background:var(--surface); border-bottom:var(--bw) solid var(--line);
}
.topbar-title{
  flex:1; min-width:0;
  font-family:var(--f-head); font-weight:700; font-size:var(--t-lg);
  letter-spacing:var(--ls-tight);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Ortga tugmasi oddiy ikonka:
       <a class="btn-icon" href="…"><svg class="ico"><use href="#i-ortga"></use></svg></a>
   Ilgari bu yerda CSS mask hiylasi bor edi — u eski sahifalardagi «←»
   belgisini va turli <svg> larni bitta strelkaga aylantirardi. Endi
   ikonka tizimi bor, hiyla kerak emas. */

/* ── TABBAR (pastki navigatsiya) ──────────────────────────────────────
   Faol element RANG bilan belgilanadi, fon plashkasi bilan emas —
   tinchroq va zamonaviyroq. */
.tabbar{
  position:absolute; bottom:0; left:0; right:0; z-index:20;
  height:calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--surface); border-top:var(--bw) solid var(--line);
  display:flex; align-items:center;
}
.tab{
  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);
  transition:color var(--sp-fast) var(--ease);
}
/* Tabbar ikonkasi — faol holat RANG bilan belgilanadi (`.tab.active`
   `color` beradi, ikonka uni `currentColor` orqali oladi). Ilgari bu
   yerda emoji turardi va uni kulrangga aylantirish uchun `grayscale`
   filtri kerak edi — endi kerak emas. */
.tab-icon{ width:var(--i-md); height:var(--i-md); }
/* Sprite `<use>` orqali chizilgani uchun ikonka atributlari `<symbol>`
   ning o'zida turadi; bu yerda faqat o'lcham beriladi. */
.tab-label{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase;
}
.tab.active{ color:var(--brand); }
.tab.active .tab-icon{ filter:none; }

/* ── BO'LIM SARLAVHASI ── */
.section{ padding:var(--s-6) var(--s-4) 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s-3); }
.section-title{
  font-family:var(--f-head); font-weight:700; font-size:var(--t-lg);
  letter-spacing:var(--ls-tight);
}
.section-link{ font-size:var(--t-sm); font-weight:700; color:var(--brand); text-decoration:none; }
/* Kichik uppercase yorliq — guruh boshi */
.overline{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--text-3);
}


/* ══════════════════════════════════════════════════════════════════════
   6. YUZALAR
   Yuza ikki yo'l bilan ajraladi: CHEGARA yoki SOYA — ikkalasi birga emas.
   Ro'yxat ichidagi elementlar chegara oladi (tinch), alohida turgan
   kartalar soya oladi (ko'tarilgan).
   ══════════════════════════════════════════════════════════════════════ */
.card{
  background:var(--surface); border-radius:var(--r-lg);
  border:var(--bw) solid var(--line); padding:var(--s-4);
}
.card-raised{                      /* alohida turgan, ko'tarilgan */
  background:var(--surface); border-radius:var(--r-lg);
  border:none; padding:var(--s-4); box-shadow:var(--e-2);
}
.card-flat{                        /* fon ustidagi tinch zona */
  background:var(--surface-2); border-radius:var(--r-lg);
  border:var(--bw) solid var(--line); padding:var(--s-4);
}
/* Bosiladigan yuza — 3D qirra emas, nozik javob */
.pressable{
  cursor:pointer; text-decoration:none; color:inherit; display:block;
  transition:transform var(--sp-fast) var(--ease),
             background-color var(--sp-fast) var(--ease),
             border-color var(--sp-fast) var(--ease);
}
.pressable:active{ transform:scale(.985); background:var(--surface-2); }

/* Ikonka idishi — o'lchamga qarab radius o'zgaradi */
.icon-box{
  width:40px; height:40px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--text-2);
}
.icon-box.lg{ width:48px; height:48px; border-radius:var(--r-lg); font-size:var(--i-lg); }
.icon-box.sm{ width:32px; height:32px; border-radius:var(--r-sm); font-size:var(--i-sm); }
/* Tus variantlari — semantik oilalardan, boshqa rang yo'q */
.icon-box.tone-brand{ background:var(--brand-soft); color:var(--brand); }
.icon-box.tone-ok   { background:var(--ok-soft);    color:var(--ok); }
.icon-box.tone-bad  { background:var(--bad-soft);   color:var(--bad); }


/* ══════════════════════════════════════════════════════════════════════
   7. TIPOGRAFIYA
   Ierarxiya O'LCHAM bilan emas, VAZN va RANG bilan quriladi. Shuning
   uchun bir ekranda ikki-uch o'lchamdan ortiq bo'lmaydi.
   ══════════════════════════════════════════════════════════════════════ */
h1, .t-h1{ font-family:var(--f-head); font-weight:700; font-size:var(--t-2xl);
           line-height:var(--lh-tight); letter-spacing:var(--ls-tight); }
h2, .t-h2{ font-family:var(--f-head); font-weight:700; font-size:var(--t-xl);
           line-height:var(--lh-tight); letter-spacing:var(--ls-tight); }
h3, .t-h3{ font-family:var(--f-head); font-weight:700; font-size:var(--t-lg);
           line-height:var(--lh-tight); }
.t-body   { font-size:var(--t-md); line-height:var(--lh-normal); }
.t-sm     { font-size:var(--t-sm); line-height:var(--lh-normal); color:var(--text-2); }
.t-meta   { font-size:var(--t-xs); color:var(--text-3); }
.t-num    { font-family:var(--f-head); font-weight:700; font-variant-numeric:tabular-nums; }

/* ── Yapon matni ──────────────────────────────────────────────────────
   Yapon matni HECH QACHON yashirilmaydi — til almashganda faqat
   tarjima o'zgaradi. */
.jp{ font-family:var(--f-jp); line-height:var(--lh-jp); }
.jp-sm{ font-size:var(--j-sm); }
.jp-md{ font-size:var(--j-md); }
.jp-lg{ font-size:var(--j-lg); font-weight:700; }
.jp-xl{ font-size:var(--j-xl); font-weight:700; letter-spacing:.02em; }

/* ── Furigana ─────────────────────────────────────────────────────────
   Furigana O'QILISHI kerak: xira kulrang emas, matn rangining
   ikkilamchi tusi. O'lchami asosiy matnning ~45 % i. */
ruby{ ruby-position:over; }
ruby rt{
  font-family:var(--f-ui); font-weight:600; color:var(--text-3);
  font-size:.45em; letter-spacing:.02em; user-select:none;
}

/* Tarjima qatori — yapon matni ostidagi mahalliy til.
   Rangi BREND emas, ikkilamchi matn: shunda ekran tinch qoladi. */
.translation{ font-size:var(--t-sm); font-weight:600; color:var(--text-2); }
.translation.is-accent{ color:var(--brand); }


/* ══════════════════════════════════════════════════════════════════════
   8. TUGMALAR
   Balandlik uch pog'ona: sm 36 / md 44 / lg 52. Barmoq uchun eng kichigi
   36px — undan past tushmaydi.
   ══════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:44px; padding:0 var(--s-5); border:var(--bw) solid transparent;
  border-radius:var(--r-md); cursor:pointer; text-decoration:none;
  /* Tugma matni UI shriftida. `Baloo 2` — display shrift: sarlavhada
     xarakter beradi, tugmada esa og'ir va o'ynoqi ko'rinadi. */
  font-family:var(--f-ui); font-weight:700; font-size:var(--t-md);
  letter-spacing:var(--ls-tight); white-space:nowrap;
  transition:background-color var(--sp-fast) var(--ease),
             border-color var(--sp-fast) var(--ease),
             transform var(--sp-fast) var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn.block{ display:flex; width:100%; }
.btn.sm{ height:36px; padding:0 var(--s-3); font-size:var(--t-sm); border-radius:var(--r-sm); }
.btn.lg{ height:52px; padding:0 var(--s-6); font-size:var(--t-lg); border-radius:var(--r-lg); }

/* Ierarxiya: bir ekranda BITTA `primary` bo'ladi. */
.btn-primary{ background:var(--brand); color:var(--on-brand); }
.btn-primary:hover{ background:var(--brand-strong); }

.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--line-strong); }
.btn-secondary:hover{ background:var(--surface-2); }

.btn-tonal{ background:var(--brand-soft); color:var(--brand); }
.btn-tonal:hover{ background:var(--brand-line); }

.btn-quiet{ background:transparent; color:var(--text-2); font-family:var(--f-ui); font-weight:600; }
.btn-quiet:hover{ background:var(--surface-3); }

/* Destruktiv harakat TO'LDIRILMAYDI: brend ham qizil bo'lgani uchun
   to'ldirilgan qizil tugma «asosiy harakat» bilan chalkashadi, va uni
   tasodifan bosish osonlashadi. Tonal variant ikkalasini ham hal qiladi. */
.btn-danger{ background:transparent; color:var(--bad); border-color:var(--bad); }
.btn-danger:hover{ background:var(--bad-soft); }
/* To'ldirilgan variant — faqat tasdiqlash oynasining o'zida */
/* Matn `--surface` dan olinadi: kunduzi u oq (to'q qizil fon ustida),
   tunda to'q (ochiq g'isht fon ustida) — ikkala holatda ham o'qiladi. */
.btn-danger.solid{ background:var(--bad); color:var(--surface); border-color:transparent; }

/* Ikonka tugmasi — kvadrat, fonsiz */
.btn-icon{
  width:40px; height:40px; padding:0; flex-shrink:0;
  background:transparent; border:none; border-radius:var(--r-md); cursor:pointer;
  color:var(--text); font-size:var(--i-md); line-height:1;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  transition:background-color var(--sp-fast) var(--ease), transform var(--sp-fast) var(--ease);
}
.btn-icon:hover{ background:var(--surface-3); }
.btn-icon:active{ transform:scale(.92); }
.btn-icon .ico{ width:var(--i-md); height:var(--i-md); }

/* Ikki tugma yonma-yon */
.btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.btn-stack{ display:grid; gap:var(--s-2); }


/* ══════════════════════════════════════════════════════════════════════
   9. CHIP, YORLIQ, BELGI
   Uch shakl: `chip` (bosiladigan filtr) · `tag` (holat yorlig'i) ·
   `count` (sanoq). Har biri bitta o'lchamda — variant faqat TUS.
   ══════════════════════════════════════════════════════════════════════ */
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  height:34px; padding:0 var(--s-3); flex-shrink:0; cursor:pointer;
  background:var(--surface); border:var(--bw) solid var(--line-strong);
  border-radius:var(--r-sm); color:var(--text-2);
  font-family:var(--f-ui); font-weight:700; font-size:var(--t-sm);
  white-space:nowrap;
  transition:background-color var(--sp-fast) var(--ease),
             border-color var(--sp-fast) var(--ease), color var(--sp-fast) var(--ease);
}
.chip:hover{ border-color:var(--n-300); }
/* ⚠️ «TANLANGAN» — BITTA TIL.
   Ilgari chip to'liq QORA to'ldirgich olardi, `.option` esa qalin
   chegara + bir pog'ona pastdagi yuza. Ikkalasi ham «shu tanlandi»
   degani, lekin ekranda ikki xil narsaday ko'rinardi. Tanqid ilovada
   «tanlangan» ning OLTITA turli ko'rinishini sanadi. Chip endi
   `.option.selected` bilan bir xil tilda gapiradi.
   Qora to'ldirgich yana bir sababdan yomon edi: u eng kuchli vizual
   og'irlik — ekrandagi eng muhim narsa emas, shunchaki filtr chipi. */
.chip.active{ background:var(--surface-2); border-color:var(--text); color:var(--text); }
/* Ikki qatorli chip (lotin nomi + yaponcha) */
.chip.two-line{ height:auto; flex-direction:column; gap:0; padding:var(--s-2) var(--s-3); line-height:1.2; }
.chip.two-line .jp{ font-size:var(--t-2xs); opacity:.7; line-height:1.2; }
/* Chip qatori — gorizontal suriladi, scrollbar ko'rinmaydi */
.chip-row{
  display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none;
  padding:var(--s-2) var(--s-4); -webkit-overflow-scrolling:touch;
}
.chip-row::-webkit-scrollbar{ display:none; }
.chip-row.sticky{ position:sticky; top:0; z-index:15; background:var(--bg); }
.chip-row.fill .chip{ flex:1 0 auto; min-width:72px; }

/* Holat yorlig'i — bosilmaydi */
.tag{
  display:inline-flex; align-items:center; gap:var(--s-1);
  height:22px; padding:0 var(--s-2); border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--text-2);
  font-size:var(--t-2xs); font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; white-space:nowrap;
}
.tag.tone-brand{ background:var(--brand-soft); color:var(--brand); }
.tag.tone-ok   { background:var(--ok-soft);    color:var(--ok); }
.tag.tone-bad  { background:var(--bad-soft);   color:var(--bad); }
.tag.solid     { background:var(--text); color:var(--surface); }

/* Sanoq — topbarning o'ng tomonida («1 / 50», «24 ta») */
.count{
  display:inline-flex; align-items:center; height:26px; padding:0 var(--s-2);
  border-radius:var(--r-full); background:var(--surface-3); color:var(--text-2);
  font-family:var(--f-head); font-weight:700; font-size:var(--t-xs);
  font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0;
}
.count.tone-brand{ background:var(--brand-soft); color:var(--brand); }

/* Nuqta-belgi (o'qilmagan) */
.dot{ width:8px; height:8px; border-radius:var(--r-full); background:var(--brand); flex-shrink:0; }


/* ══════════════════════════════════════════════════════════════════════
   10. RO'YXAT VA QATOR
   Ilovadagi ro'yxatlarning HAMMASI shu ikki naqshdan quriladi:
   `list` (chegara bilan ajratilgan qatorlar) va `grid` (kartalar).
   ══════════════════════════════════════════════════════════════════════ */
.list{
  background:var(--surface); border-radius:var(--r-lg);
  border:var(--bw) solid var(--line); overflow:hidden;
}
.row{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); min-height:56px;
  border-bottom:var(--bw) solid var(--line);
  text-decoration:none; color:inherit;
}
.row:last-child{ border-bottom:none; }
/* ⚠️ `.row-body` ichida yorliq va sarlavha USTMA-UST tursin.
   Ular `<span>` bo'lsa satr ichida yonma-yon chiziladi va qator
   «1-DARS Qator sarlavhasi» bo'lib bitta satrga qo'shilib ketadi. */
.row-body{ flex:1; min-width:0; }
.row-body > .overline, .row-body > .row-title, .row-body > .row-sub{ display:block; }
.row-title{ font-size:var(--t-md); font-weight:700; letter-spacing:var(--ls-tight); }
.row-sub{ font-size:var(--t-xs); color:var(--text-3); margin-top:2px; }
.row-end{ display:flex; align-items:center; gap:var(--s-2); color:var(--text-3);
          font-size:var(--t-sm); flex-shrink:0; }
.row-chevron{ color:var(--text-4); }

/* Karta tarmog'i */
.grid{ display:grid; gap:var(--s-3); padding:0 var(--s-4); }
.grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.stack{ display:grid; gap:var(--s-3); padding:0 var(--s-4); }


/* ══════════════════════════════════════════════════════════════════════
   11. PROGRESS
   Bitta komponent, uch o'lcham. Ilgari olti xil progress bor edi.
   ══════════════════════════════════════════════════════════════════════ */
.bar{ height:6px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; }
.bar.sm{ height:4px; }
.bar.lg{ height:10px; }
.bar > i{
  display:block; height:100%; width:0; border-radius:inherit;
  background:var(--brand); transition:width var(--sp-slow) var(--ease-out);
}
.bar.tone-ok > i{ background:var(--ok); }
.bar-row{ display:flex; align-items:center; gap:var(--s-2); }
.bar-row .bar{ flex:1; }
.bar-pct{
  font-family:var(--f-head); font-weight:700; font-size:var(--t-xs);
  color:var(--text-3); font-variant-numeric:tabular-nums; flex-shrink:0;
}

/* Halqa (natija ekrani). Aylana uzunligi = 2πr = 326.7 (r=52) */
.ring{ position:relative; width:132px; height:132px; margin:0 auto; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--surface-3); stroke-width:8; }
/* ⚠️ HALQA TINCH HOLATDA TO'LIQ BO'SH BO'LMASIN.
   Ilgari `stroke-dashoffset:326.7` (ya'ni 0%) tinch qiymat edi va
   to'g'ri natija FAQAT o'tish ishga tushsagina ko'rinardi. Offscreen
   WebView'da, `prefers-reduced-motion` da yoki JS kech kelganda
   ekranda 67% o'rniga 0% turardi — mahsulotning butun hissiy nuqtasi.
   Endi qiymat `--p` (0…1) dan HISOBLANADI: JS uni bir marta qo'yadi
   va halqa darhol to'g'ri, o'tish esa faqat bezak.

   ⚠️ Aylana uzunligi ham PARAMETR (`--ring-c`). Ilgari u 326.7 deb
   qotirilgan edi, shuning uchun boshqa radiusdagi halqa (dars
   ro'yxatidagi 44px, r=19 → 119.4) uzunlikni O'ZI qayta yozishga
   majbur bo'lardi — va shu bilan birga «tinch holatda bo'sh»
   xatosini ham qaytadan olib kelardi. */
@property --p{ syntax:'<number>'; initial-value:0; inherits:false; }
.ring-fill{
  fill:none; stroke:var(--ok); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:var(--ring-c, 326.7);
  stroke-dashoffset:calc(var(--ring-c, 326.7) * (1 - var(--p, 0)));
  transition:--p 900ms var(--ease-out);
}
.ring-value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-weight:700; font-size:var(--t-2xl);
  font-variant-numeric:tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════════
   12. FORM
   ══════════════════════════════════════════════════════════════════════ */
.field{ display:grid; gap:var(--s-2); }
.field + .field{ margin-top:var(--s-4); }
.field-label{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--text-3);
}
.field-wrap{ position:relative; display:flex; align-items:center; }
.field-icon{
  position:absolute; left:var(--s-3); display:flex;
  color:var(--text-4); pointer-events:none;
}
.input{
  width:100%; height:48px; padding:0 var(--s-4);
  background:var(--surface); color:var(--text);
  border:var(--bw) solid var(--line-strong); border-radius:var(--r-md);
  font-size:var(--t-md); outline:none; -webkit-appearance:none;
  transition:border-color var(--sp-fast) var(--ease), box-shadow var(--sp-fast) var(--ease);
}
.field-icon ~ .input{ padding-left:var(--s-10); }
.input::placeholder{ color:var(--text-4); }
.input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.input.is-error{ border-color:var(--bad); }
.field-hint{ font-size:var(--t-xs); color:var(--text-3); }
.field-hint.is-error{ color:var(--bad); }
.field-action{
  position:absolute; right:var(--s-2); background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:var(--i-sm); padding:var(--s-2); line-height:1;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }

/* Tugmacha (switch) */
.switch{
  width:44px; height:26px; border-radius:var(--r-full); position:relative;
  cursor:pointer; flex-shrink:0; background:var(--n-300);
  transition:background-color var(--sp-base) var(--ease);
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:var(--r-full); background:var(--n-0); box-shadow:var(--e-1);
  transition:transform var(--sp-base) var(--ease);
}
.switch.on{ background:var(--brand); }
.switch.on::after{ transform:translateX(18px); }


/* ══════════════════════════════════════════════════════════════════════
   13. QATLAM — toast, parda, pastki varaq, oyna
   ══════════════════════════════════════════════════════════════════════ */
.toast{
  position:fixed; left:50%; bottom:var(--s-8); z-index:100;
  transform:translateX(-50%) translateY(var(--s-6)); opacity:0; pointer-events:none;
  max-width:calc(100% - var(--s-8));
  background:var(--n-900); color:var(--n-0);
  padding:var(--s-3) var(--s-5); border-radius:var(--r-md); box-shadow:var(--e-3);
  font-size:var(--t-sm); font-weight:600;
  transition:transform var(--sp-base) var(--ease-out), opacity var(--sp-base) var(--ease);
}
html.dark .toast{ background:var(--n-200); color:var(--n-900); }
.toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }

/* Parda.
   WEBKIT TUZOG'I: `opacity:0` pardani BOSILISHDAN to'smaydi — ko'rinmas
   parda butun ekranni yeb qo'yadi. `visibility:hidden` ham SHART. */
.scrim{
  position:fixed; inset:0; z-index:120; display:flex;
  background:rgba(10,11,14,.5); opacity:0; visibility:hidden;
  transition:opacity var(--sp-base) var(--ease), visibility var(--sp-base);
}
.scrim.open{ opacity:1; visibility:visible; }

/* Pastki varaq */
.scrim.bottom{ align-items:flex-end; }
.sheet{
  width:100%; max-width:430px; margin:0 auto; max-height:80vh; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s-2) 0 calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); transition:transform var(--sp-base) var(--ease-out);
  scrollbar-width:none;
}
.sheet::-webkit-scrollbar{ display:none; }
.scrim.open .sheet{ transform:translateY(0); }
.sheet-grip{
  width:36px; height:4px; border-radius:var(--r-full);
  background:var(--line-strong); margin:var(--s-2) auto var(--s-3);
}
.sheet-title{
  font-family:var(--f-head); font-weight:700; font-size:var(--t-lg);
  text-align:center; padding:0 var(--s-4) var(--s-3);
}
.sheet-row{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-5); min-height:52px; cursor:pointer;
  text-decoration:none; color:inherit;
  transition:background-color var(--sp-fast) var(--ease);
}
.sheet-row:active{ background:var(--surface-2); }
.sheet-row.selected{ color:var(--brand); font-weight:700; }

/* Markazdagi oyna */
.scrim.center{ align-items:center; justify-content:center; padding:var(--s-5); }
.dialog{
  width:100%; max-width:340px; background:var(--surface);
  border-radius:var(--r-xl); padding:var(--s-6); text-align:center;
  box-shadow:var(--e-3);
  transform:scale(.94); opacity:0;
  transition:transform var(--sp-base) var(--ease-out), opacity var(--sp-base) var(--ease);
}
.scrim.open .dialog{ transform:scale(1); opacity:1; }
.dialog-title{ font-family:var(--f-head); font-weight:700; font-size:var(--t-xl); }
.dialog-text{ font-size:var(--t-sm); color:var(--text-2); margin-top:var(--s-2); }
.dialog-actions{ display:grid; gap:var(--s-2); margin-top:var(--s-5); }


/* ══════════════════════════════════════════════════════════════════════
   14. NAQSHLAR
   Yuqoridagi asosdan qurilgan tayyor ekran bo'laklari. Ular yangi
   qiymat KIRITMAYDI — faqat tokenlarni birlashtiradi.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 14.1 KURS KARTASI (daraja / kitob tanlash) ───────────────────────
   Har kartaga ALOHIDA RANG BERILMAYDI. Ilgari N5 qizil, N4 oltin,
   N3 yashil, N2 binafsha edi — beshta karta yonma-yon turganda ekran
   rangli plitkalar to'plamiga aylanardi va foydalanuvchi rang nimani
   anglatishini o'rganishi kerak edi (hech narsani: bu shunchaki tartib).

   Darajani MATN ayтадi (N5, N4…), holatni esa progress. Rang faqat
   bittasida — hozir ochiq turgan kursda (`.is-active`). */
.course{
  position:relative; display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-4);
  background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; color:inherit;
}
.course-top{ display:flex; align-items:baseline; gap:var(--s-2); }
.course-code{
  font-family:var(--f-head); font-weight:800; font-size:var(--t-xl);
  color:var(--text); letter-spacing:var(--ls-tight);
}
/* Davom etayotgan kurs — yagona rangli karta ro'yxatda */
.course.is-active{ border-color:var(--brand-line); background:var(--brand-soft); }
.course.is-active .course-code{ color:var(--brand); }
.course-track{ font-size:var(--t-2xs); font-weight:700; letter-spacing:var(--ls-wide);
               text-transform:uppercase; color:var(--text-3); }
.course-title{ font-size:var(--t-sm); color:var(--text-2); }
.course.is-locked{ opacity:.5; }
.course-lock{ position:absolute; top:var(--s-3); right:var(--s-3);
              font-size:var(--i-sm); color:var(--text-4); }

/* ── 14.2 DARS QATORI ── */
.lesson{
  display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-3) var(--s-4);
  background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-md); text-decoration:none; color:inherit;
}
.lesson-head{ display:flex; align-items:baseline; gap:var(--s-2); }
.lesson-no{ font-family:var(--f-head); font-weight:700; font-size:var(--t-md); }
.lesson-count{ margin-left:auto; font-size:var(--t-xs); color:var(--text-3); flex-shrink:0; }
.lesson-jp{ font-family:var(--f-jp); font-size:var(--t-sm); color:var(--text-2); line-height:1.4;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 14.3 SO'Z QATORI ─────────────────────────────────────────────────
   Yapon so'zi — asosiy matn rangida (eng katta va to'q element).
   Tarjima — ikkilamchi. Rang urg'usi YO'Q: ro'yxatda 30 ta qator bo'lsa
   rangli matn charchatadi. */
.word{
  display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4);
  border-bottom:var(--bw) solid var(--line);
}
.word:last-child{ border-bottom:none; }
.word-no{
  width:24px; flex-shrink:0; text-align:center;
  font-family:var(--f-head); font-weight:700; font-size:var(--t-xs);
  color:var(--text-4); font-variant-numeric:tabular-nums;
}
.word-body{ flex:1; min-width:0; }
.word-jp{ font-family:var(--f-jp); font-size:var(--j-sm); font-weight:500; line-height:var(--lh-jp); }
.word-reading{ font-family:var(--f-jp); font-size:var(--t-sm); color:var(--text-3); }
.word-end{ display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; }

/* ── 14.4 YODLASH KARTOCHKASI (ag'dariladigan) ── */
/* ⚠️ UCH XATO TUZATILDI (kartochka ekranida topilgan):

   1. `height:240px` — kartochka MAZMUNIGA SIG'MASDI. Uzun ta'rif yoki
      misol gap qutidan chiqib ketardi, sahifa esa qutidan keyin
      bo'sh kulrang maydon bo'lib qolardi. Endi ikkala yuz BITTA
      setka katagida turadi: quti balandligi baland yuz bo'yicha
      o'zi o'lchanadi.
   2. `border` VA `box-shadow` birga berilgan edi — `OQING.md` buni
      ochiq taqiqlaydi (ro'yxat ichidagi element chegara oladi,
      alohida turgan karta soya oladi). Soya qoldi, chegara ketdi.
   3. `backface-visibility:hidden` WKWebView'da ISHLAMAYDI — orqa yuz
      ko'zguda aks etganday ko'rinib turardi. Yuzlar aylanishning
      O'RTASIDA `visibility` bilan almashtiriladi. */
.flip{ perspective:1600px; }
.flip-inner{
  display:grid; transform-style:preserve-3d;
  transition:transform var(--sp-slow) var(--ease);
}
.flip.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  grid-area:1 / 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-2); padding:var(--s-6); text-align:center; cursor:pointer;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--e-2);
  transition:visibility 0s linear var(--sp-slow-yarim, 190ms);
}
.flip-face.back{ transform:rotateY(180deg); background:var(--surface-2); visibility:hidden; }
.flip.flipped .flip-face.front{ visibility:hidden; }
.flip.flipped .flip-face.back { visibility:visible; }

/* ── 14.5 TEST ── */
.question{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  padding:var(--s-8) var(--s-5); text-align:center;
  background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--r-lg);
}
.question-label{
  font-size:var(--t-xs); font-weight:700; color:var(--text-3);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.options{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); margin-top:var(--s-4); }
.option{
  min-height:56px; padding:var(--s-3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--surface); border:var(--bw) solid var(--line-strong);
  border-radius:var(--r-md); color:var(--text);
  font-size:var(--t-md); font-weight:600;
  transition:background-color var(--sp-fast) var(--ease),
             border-color var(--sp-fast) var(--ease),
             color var(--sp-fast) var(--ease), transform var(--sp-fast) var(--ease);
}
.option:active{ transform:scale(.98); }
/* Holat: chegara + och fon + matn rangi — uchtasi bir oilada */
/* Tanlangan — bu holat emas, TANLOV: u «to'g'ri» yoki «xato» degani emas.
   Shuning uchun rang bermaydi, neytral urg'u oladi (to'q chegara + yuza).
   Rang faqat javob tekshirilgandan keyin paydo bo'ladi. */
.option.selected { border-color:var(--text); background:var(--surface-2); font-weight:700; }
.option.correct  { border-color:var(--ok);   background:var(--ok-soft);   color:var(--ok); }
.option.incorrect{ border-color:var(--bad);  background:var(--bad-soft);  color:var(--bad); }
.option[disabled]{ pointer-events:none; }
/* Savol raqamlari tasmasi */
.q-strip{ display:flex; gap:var(--s-1); overflow-x:auto; scrollbar-width:none; padding:var(--s-2) var(--s-4); }
.q-strip::-webkit-scrollbar{ display:none; }
.q-dot{
  width:28px; height:28px; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:var(--bw) solid var(--line-strong);
  border-radius:var(--r-sm); color:var(--text-3);
  font-family:var(--f-head); font-weight:700; font-size:var(--t-xs);
}
.q-dot.now{ background:var(--text); border-color:var(--text); color:var(--surface); }
.q-dot.ok { background:var(--ok-soft);  border-color:var(--ok-line);  color:var(--ok); }
.q-dot.no { background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad); }

/* ── 14.6 MISOL GAP ── */
.example{
  padding:var(--s-4); background:var(--surface-2);
  border:var(--bw) solid var(--line); border-radius:var(--r-md);
  border-left:3px solid var(--ok);
}
.example-jp{ font-family:var(--f-jp); font-size:var(--j-sm); line-height:var(--lh-jp); }
.example-tr{ font-size:var(--t-sm); color:var(--text-2); margin-top:var(--s-2); }

/* ── 14.7 IZOH QUTISI ── */
.callout{
  display:flex; gap:var(--s-3); padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md); font-size:var(--t-sm); line-height:var(--lh-normal);
  background:var(--surface-2); border:var(--bw) solid var(--line);
  border-left:3px solid var(--text-3);
}
.callout-icon{ flex-shrink:0; margin-top:1px; color:var(--text-3); }
/* Ogohlantirish xato bilan bitta oiladan — farqni IKONKA beradi (⚠ / ✕),
   rang emas. Ikki xil «diqqat» rangi ekranni rang-barang qiladi. */
.callout.tone-warn{ background:var(--bad-soft); border-color:var(--bad-line); border-left-color:var(--bad-line); }
.callout.tone-bad { background:var(--bad-soft);  border-color:var(--bad-line);  border-left-color:var(--bad); }
.callout.tone-info{ border-left-color:var(--text-3); }

/* ── 14.8 BO'SH HOLAT ── */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-10) var(--s-5); text-align:center;
}
.empty-icon{ color:var(--text-4); }
.empty-title{ font-family:var(--f-head); font-weight:700; font-size:var(--t-lg); }
.empty-text{ font-size:var(--t-sm); color:var(--text-3); max-width:34ch; }

/* ── 14.9 STATISTIKA QATORI ── */
.stats{
  display:flex; align-items:stretch;
  background:var(--surface); border:var(--bw) solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.stat{ flex:1; padding:var(--s-4) var(--s-2); text-align:center;
       border-right:var(--bw) solid var(--line); }
.stat:last-child{ border-right:none; }
.stat-value{
  font-family:var(--f-head); font-weight:700; font-size:var(--t-xl);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center; gap:var(--s-1);
}
.stat-label{
  font-size:var(--t-2xs); font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--text-3); margin-top:var(--s-1);
}

/* ── 14.10 BALANS (tanga / olmos) ── */
.balance{ display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; text-decoration:none; }
.balance > span{
  display:inline-flex; align-items:center; gap:var(--s-1); height:26px; padding:0 var(--s-2);
  border-radius:var(--r-full);
  font-family:var(--f-head); font-weight:700; font-size:var(--t-xs);
  font-variant-numeric:tabular-nums;
}
/* Tanga va olmos chipi NEYTRAL — ikkalasiga alohida rang berilsa
   (oltin va firuza) topbar rang-barang bo'lib ketadi. Ularni ikonka
   ajratadi: `#i-tanga` va `#i-olmos`. */
.balance > span{ background:var(--surface-3); color:var(--text-2); }


/* ══════════════════════════════════════════════════════════════════════
   15. YORDAMCHI
   ══════════════════════════════════════════════════════════════════════ */
@keyframes enter{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.enter{ animation:enter var(--sp-slow) var(--ease-out) both; }
/* Ro'yxat elementlari navbatma-navbat: style="--i:0", "--i:1" … */
.enter[style*="--i"]{ animation-delay:calc(var(--i) * 40ms); }

/* Sahifadan sahifaga o'tish — ekran to'liq o'chmaydi, faqat so'nadi:
   0 ga tushirsak yangi sahifa yuklanguncha bo'sh fon uzoq ko'rinardi. */
.phone.leaving{ opacity:.5; transition:opacity var(--sp-fast) var(--ease); }

.u-row  { display:flex; align-items:center; gap:var(--s-3); }
.u-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.u-grow { flex:1; min-width:0; }
.u-center{ text-align:center; }
.u-muted{ color:var(--text-3); }
.u-truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-pad  { padding:0 var(--s-4); }
.u-gap-1{ height:var(--s-1); } .u-gap-2{ height:var(--s-2); }
.u-gap-3{ height:var(--s-3); } .u-gap-4{ height:var(--s-4); }
.u-gap-6{ height:var(--s-6); } .u-gap-8{ height:var(--s-8); }
.u-hidden{ display:none !important; }

/* ⚠️ «Harakatni kamaytirish» — harakatni YO'Q QILISH emas.
   Ilgari bu yerda `*{ transition-duration:.01ms }` turardi va u
   ataylab qoldirilgan so'nishlarni ham kesib tashlardi (start
   ekranining 300 ms so'nishi qattiq kesishga aylanardi).
   Endi FAQAT vestibulyar qism o'chadi: `transform`, `width`, `height`
   kabi siljitadigan xossalar. Rang va shaffoflik o'tishlari qoladi —
   ular bosh aylantirmaydi, lekin holat o'zgarganini tushuntiradi. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-property:opacity, color, background-color, border-color,
                        fill, stroke, box-shadow !important;
    transition-duration:200ms !important;
  }
}

/* Telegram Mini App (oddiy rejim): sarlavhani Telegramning o'zi chizadi, ilova tepasida qo'shimcha joy qoldirilmaydi */
html.tg-mini .topbar{ padding-top:calc(var(--s-3) + var(--tg-top, 0px)); }