/* ============================================================
   Deutsch Lernplattform A1–B2 — style.css
   ------------------------------------------------------------
   DIZAYN TIZIMI: "SIGNAL"  (ETAP 29 — to'liq vizual yangilanish)

     · Material  — TEKIS yuza + 1px chegara. Shisha, blur, shaffof
                   gradient, "yaltirash" YO'Q. Chuqurlik rang bilan
                   emas, bo'shliq va tipografiya iyerarxiyasi bilan.
     · Palitra   — Schwarz · Rot · Gold, lekin BOSILGAN tuslarda:
                   bayroq emas, brend. Temir yo'l signali / davlat
                   hujjati hissi.
     · Signature — «Sprachlinie»: qizil ingichka chiziq. Header ostida,
                   bo'lim sarlavhalarida, hero'da bosqichlar chizig'i.
     · Raqamlar  — doim mono shrift (muhandislik aniqligi).

   ------------------------------------------------------------
   RANG MUVOZANATI — buzmang (bu «bayroq» emas, «brend»)
     QORA   #14161C  → baza: fon, matn, header/footer, struktura
     QIZIL  #B3122B  → FAQAT CTA, faol holat, Sprachlinie — ≤10% maydon
     OLTIN  #C9A227  → FAQAT progress / yutuq / "o'rganildi" — kam va nishonlab
     QOG'OZ #F8F7F3  → asosiy fon (krem emas, sovuqroq va toza)
     SLANETS#3B4859  → ikkinchi darajali matn, chiziqlar, struktura
     KULRANG#8B8F98  → captions, metadata

   ⚠️ ARTIKEL RANGLARI BRENDDAN MUSTAQIL — hech qachon o'zgartirilmaydi.
      der/die/das/Plural — bu SEMANTIK belgi (foydalanuvchi o'rgangan
      vizual til), brend qizili/oltini bilan ADASHTIRILMASIN.
   ------------------------------------------------------------
   SHRIFTLAR — faqat TIZIM shriftlari (QOIDA 47: sayt oflayn ishlaydi)
     --font-display → Bahnschrift (DIN 1451 — nemis yo'l/temir yo'l
                      shrifti). Space Grotesk o'rniga eng to'g'ri tanlov.
     --font         → Segoe UI Variable Text (IBM Plex Sans o'rniga)
     --font-mono    → Cascadia Mono (IBM Plex Mono o'rniga) — RAQAMLAR
     --font-poster / --font-elegant → plakat raqamlari va footer motto
     (⚠️ --font-script ETAP 52 da olib tashlandi — imzo bloki ketdi)
   ============================================================ */

/* ============================================================
   0. SHRIFT — SPACE GROTESK (ETAP 34)
   ------------------------------------------------------------
   ⚠️ QOIDA 47 BUZILMAYDI. Bu Google Fonts HAVOLASI emas — fayllar
   `fonts/` papkasida, loyiha ichida yotibdi (41 KB, OFL litsenziya).
   Tashqi so'rov yo'q, sayt flesh-diskdan ham ishlayveradi.

   Nega Bahnschrift tashlandi: u FAQAT Windows'da bor. Mac, iPhone va
   Android'da brend Roboto/Arial'ga tushib qolardi — ya'ni brend har
   qurilmada boshqacha edi. Endi hamma joyda bitta shrift.

   Bu VARIABLE font: bitta fayl 300–700 oralig'ining hammasini beradi,
   shuning uchun `font-weight:300` ham, `700` ham qo'shimcha yuklamaydi.
   ============================================================ */
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2");
  /* Lotin asosiy — nemis ä/ö/ü/ß va o'zbek oʻ/gʻ shu yerda */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
  /* Kengaytirilgan lotin — katta ẞ va boshqa nodir belgilar */
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   1. TOKENLAR — LIGHT (asosiy rejim)
   ============================================================ */
:root{
  /* --- Schwarz · Rot · Gold — BOSILGAN tuslarda (bayroq emas, brend) --- */
  --ink:#191510;          /* Tinta qora (ILIQ) — teskari yuzalar, header, footer */
  --ink-3:#4A4238;        /* iliq slanets — "nafas" rangi */

  --gold:#C9A227;         /* Nafis oltin — eskirgan tanga/medal tusi */
  --gold-600:#A5831A;
  --gold-700:#7C6212;
  --gold-300:#DFC260;
  --gold-100:#F6EFDA;

  --red:#B3122B;          /* Chuqur nemis qizili — temir yo'l signali */
  --red-600:#8E0E22;
  --red-300:#D8455B;
  --red-100:#F7E5E8;

  /* der / die / das — grammatik jinslar (SEMANTIK belgi).
     ⚠️ BRENDDAN MUSTAQIL. ETAP 29 dizayn yangilanishida ATAYIN
     bir bayt ham o'zgartirilmadi — foydalanuvchi bu rangni allaqachon
     o'rgangan. --red / --gold bilan adashtirilmasin. */
  --art-der:#1D62D6;      /* Maskulin  — havorang */
  --art-die:#CC2069;      /* Feminin   — pushti/qizg'ish */
  --art-das:#15803D;      /* Neutrum   — yashil */
  --art-plural:#8A5A0B;   /* Plural    — oltin-jigarrang */

  /* --- Fon: ILIQ qog'oz + yengil qizil→sariq o'tish ---
     Kulrang/qora yo'lak OLIB TASHLANDI (xira ko'rinardi). Endi faqat
     bayroqning ikki iliq rangi: tepada yengil qizil, pastda yengil oltin.
     Alfa past (.03–.11) — bu "rangli fon" emas, "rangdor qog'oz". */
  --bg-base:#FBF6EE;
  --aurora:
    linear-gradient(180deg,
      rgba(179,18,43,.062)  0%,
      rgba(179,18,43,.030)  30%,
      rgba(201,162,39,.045) 62%,
      rgba(201,162,39,.115) 100%);

  /* --- MATERIAL: tekis yuza + 1px chegara ---
     Eski --glass* nomlari ATAYIN saqlanadi (butun fayl ularga tayanadi),
     lekin endi ular shishani emas, TEKIS materialni bildiradi. */
  --glass:#FFFFFF;
  --glass-2:#F6F0E6;
  --glass-strong:#FFFFFF;
  --glass-border:rgba(74,52,26,.15);      /* hairline — iliq, sovuq kulrang emas */
  --glass-border-strong:rgba(74,52,26,.36);
  --glass-edge:inset 0 0 0 0 rgba(0,0,0,0);  /* "none" YOZMANG — shadow ro'yxatini buzadi */
  --glass-filter:none;                    /* backdrop-filter o'chirildi (QOIDA 58) */
  --glass-shadow:0 1px 2px rgba(20,22,28,.05);
  --glass-shadow-lg:0 8px 22px rgba(20,22,28,.09);

  /* Ichki mayda yuzalar */
  --surface:#FFFFFF;
  --surface-2:#F6F0E6;
  --surface-solid:#FFFFFF;
  --border:rgba(74,52,26,.15);
  --border-strong:rgba(74,52,26,.36);

  /* Matn */
  --text:#1A1712;
  --text-2:#4A4238;       /* iliq slanets */
  --text-3:#8E8578;       /* caption / metadata */

  --shadow:0 4px 14px rgba(60,40,20,.09);
  --shadow-lg:0 14px 36px rgba(60,40,20,.14);

  /* Radiuslar — silliq */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-pill:999px;    /* tugma va chiplar — eng silliq shakl */

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.22s var(--ease);
  --t-slow:.36s var(--ease);

  /* SHRIFTLAR — ETAP 34 dan sarlavhalar LOYIHA ICHIDAGI Space Grotesk'da
     (yuqoridagi @font-face). Oddiy matn tizimdan qolaveradi: uzun matnni
     o'qishda tizim shrifti yengilroq va bepul keladi. */
  --font:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Open Sans",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-display:"Space Grotesk","Bahnschrift","DIN Next LT Pro","Segoe UI Variable Display","Segoe UI",Inter,Roboto,sans-serif;
  --font-poster:"Space Grotesk","Bahnschrift","Haettenschweiler","Franklin Gothic Medium","Arial Narrow",Impact,"Segoe UI",sans-serif;
  --font-elegant:"Constantia","Palatino Linotype","Book Antiqua","Cambria",Palatino,Georgia,"Times New Roman",serif;
  /* ⚠️ `--font-script` (Gabriola) ETAP 52 da O'CHIRILDI: uning yagona
     ishlatilgan joyi footerdagi `erkin.farhodiy` imzosi edi, u endi yo'q. */
  --font-ghost:"Bahnschrift Light","Bahnschrift","Segoe UI Light","Segoe UI",Corbel,Candara,sans-serif;
  --font-mono:"Cascadia Mono","Consolas","SF Mono","Roboto Mono",ui-monospace,monospace;

  --maxw:1180px;
  --pad-x:32px;
  --header-h:68px;
}

/* ============================================================
   2. TOKENLAR — DARK
   ============================================================ */
[data-theme="dark"]{
  /* ★ ETAP 33C — TUNGI REJIM YORITILDI.
     ------------------------------------------------------------
     MUAMMO (mijoz): "juda mutniy, badiga uradi". Sababi uchta edi:
       1) fon (#15120E) va yuza (#1E1A15) deyarli bir xil — hamma narsa
          bir tekis loyqa dog' bo'lib ko'rinardi;
       2) chegaralar .13 alfada — kartalar qirrasi umuman sezilmasdi;
       3) ikkilamchi matn (#847C70) shu fonda o'qish uchun juda so'nik edi.

     YECHIM: fon biroz ko'tarildi, YUZA esa sezilarli darajada yorug'roq
     qilindi (pog'ona aniq ko'rinadi), chegaralar va matn kontrasti oshirildi,
     aksent ranglar (oltin/qizil) jonlantirildi.
     ⚠️ Sof oq (#FFF) baribir ISHLATILMAYDI — eng yorug' nuqta "suyak". */
  --ink:#EFE9DC;          /* teskari yuzalar (motto, faol chip) — suyak */
  --ink-3:#9C9384;

  --gold:#E3C264;         /* jonlantirildi (#D9B858 so'nik edi) */
  --gold-600:#C9A63F;
  --gold-700:#A88A2C;
  --gold-300:#F0D890;
  --gold-100:#38301C;     /* yorqinroq — chip foni endi ko'rinadi */

  --red:#E8586E;          /* jonlantirildi (#D9455B loyqa qolardi) */
  --red-600:#C93E53;
  --red-300:#F58C9B;
  --red-100:#3A161C;

  /* ⚠️ Artikel ranglari — dark rejimda ham o'zgarishsiz */
  --art-der:#6FA8FF;
  --art-die:#FF7FB0;
  --art-das:#5FD98A;
  --art-plural:#F2C97A;

  /* Iliq qora fon + o'sha qizil→sariq o'tish */
  --bg-base:#1A1712;
  --aurora:
    linear-gradient(180deg,
      rgba(232,88,110,.10)  0%,
      rgba(232,88,110,.045) 30%,
      rgba(227,194,100,.05) 62%,
      rgba(227,194,100,.10) 100%);

  /* Yuza fondan ~2 pog'ona yorug' — kartalar endi "ko'tarilib" turadi */
  --glass:#2A251D;
  --glass-2:#342E24;
  --glass-strong:#2A251D;
  --glass-border:rgba(239,233,220,.20);   /* iliq hairline, sof oq emas */
  --glass-border-strong:rgba(239,233,220,.42);
  --glass-edge:inset 0 0 0 0 rgba(0,0,0,0);
  --glass-shadow:0 1px 3px rgba(0,0,0,.42);
  --glass-shadow-lg:0 10px 28px rgba(0,0,0,.5);

  --surface:#2A251D;
  --surface-2:#342E24;
  --surface-solid:#2A251D;
  --border:rgba(239,233,220,.20);
  --border-strong:rgba(239,233,220,.42);

  /* Matn — pog'onalar orasi kengaytirildi, ikkilamchi matn ancha o'qiladi */
  --text:#F2ECDF;
  --text-2:#C3BAAA;
  --text-3:#9A9184;

  --shadow:0 6px 18px rgba(0,0,0,.48);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
}

/* ============================================================
   3. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--bg-base);
  /* Yopishqoq shtorka balandligi telefonda o'zgaradi (tugmalar ikkinchi
     qatorga tushishi mumkin). `--header-live` ni `script.js` o'lchab
     qo'yadi; o'lchanmasa — kompyuterdagi balandlik ishlatiladi. */
  scroll-padding-top:calc(var(--header-live, var(--header-h)) + 18px);
}

/* `hidden` atributi HAR DOIM ustun bo'lsin (grid/flex dan kuchliroq). */
[hidden]{display:none!important;}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  color:var(--text);
  background:transparent;
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:color .3s var(--ease);
}

/* FON — bayroqning ochiq izi. Bitta `position:fixed` qatlam, animatsiya YO'Q
   (QOIDA 58: fon animatsiyasi butun saytni sekinlashtiradi). */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:-2;pointer-events:none;
  background:var(--aurora);
}

/* Fon ANIMATSIYASI atayin yo'q: har kadrda xiralashgan yuzalarni qayta
   hisoblashga majbur qilib, saytni sekinlashtiradi. */

/* ============================================================
   2B. SINOV FONI — «Krem + to'la rangli shakllar» (Babbel usuli)
   ------------------------------------------------------------
   ⚠️ BU HALI ASOSIY EMAS. `body.fon-babbel` klassisiz butunlay o'lik
   turadi — sayt hozirgidek ishlayveradi. Klassni `?fon=1` manzili
   qo'yadi (`script.js`), `?fon=0` esa o'chiradi.

   TIZIM (nega aynan shunday):
   · Asos QORAYTIRILDI: #FBF6EE → #F5EFE3. Babbel mantiqida asos oq
     kartalardan bir pog'ona to'qroq bo'lishi SHART — aks holda oq
     kartalar fonda erib ketadi va "qog'ozga qo'yilgan varaq" hissi
     yo'qoladi. Butun g'oyaning kaliti shu.
   · Shakllar SHAFFOF EMAS, to'la rangli. Shaffof dog' ustidagi matn
     rangini o'zgartiradi; to'la rangli dog' esa oddiy yuza bo'lib
     qoladi va matn kontrasti hisoblanadigan bo'lib turadi.
   · Ranglar FAQAT oltin oilasidan (#F7EAC8 / #FBF3DF). Qizil ATAYIN
     ishlatilmadi: sizning qoidangizga ko'ra qizil = signal, ≤10%
     maydon. Fonga qizil dog' qo'ysak, CTA tugmalari kuchini yo'qotadi.
   · Shakllar faqat ChETLARDA va ekrandan tashqariga chiqib turadi —
     markazda hech qachon matn ostiga tushmaydi.

   TEXNIKA: qo'shimcha element ham, rasm ham yo'q — bitta `fixed`
   qatlam va uchta `radial-gradient`. Qattiq to'xtash nuqtasi
   (`X 0 220px, transparent 220px`) aylanani ANIQ chekkali qiladi,
   xiralashgan emas.
   ============================================================ */
/* Asos rangi ham SHU qatlamda — oxirgi `background` qavati sifatida.
   Shunda `html{background:var(--bg-base)}` ga tegish shart emas va
   sinovni o'chirish uchun bitta klassni olib tashlash kifoya.
   `body::before` (aurora) z-index -2 da, bu -1 da: aurora ustida. */
body.fon-babbel::after{
  content:"";
  position:fixed;inset:0;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle 320px at 88% -4%,  #F7EAC8 0 320px, transparent 320px),
    radial-gradient(circle 200px at 3% 42%,   #FBF3DF 0 200px, transparent 200px),
    radial-gradient(circle 260px at 96% 88%,  #FBF3DF 0 260px, transparent 260px),
    linear-gradient(#F5EFE3, #F5EFE3);
}

/* Tungi rejim — o'sha tizim, to'q tuslarda. Oltin dog'lar bu yerda
   "issiq qorong'ilik" bo'lib ishlaydi, aks holda qora fon o'lik. */
[data-theme="dark"] body.fon-babbel::after{
  background:
    radial-gradient(circle 320px at 88% -4%,  #241E14 0 320px, transparent 320px),
    radial-gradient(circle 200px at 3% 42%,   #1F1B14 0 200px, transparent 200px),
    radial-gradient(circle 260px at 96% 88%,  #1F1B14 0 260px, transparent 260px),
    linear-gradient(#171410, #171410);
}

h1,h2,h3,h4{margin:0;font-family:var(--font-display);letter-spacing:-.012em;line-height:1.14;font-weight:700;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--bg-base);}

/* ⚠️ DARK REJIMDA SOF OQ (#FFF) TAQIQLANADI — mijoz "ko'zni og'ritadi" dedi.
   Qizil/oltin fon ustidagi matn uchun shu ILIQ oq ishlatiladi. */
/* ============================================================
   URG'U YUZASI — tanlangan daraja / bosqich / Lektion / breadcrumb /
   motto bandasi / demo karta sarlavhasi.

   ⚠️ LIGHT rejimda bu TO'Q yuza (qora fon, qog'oz matn).
      DARK rejimda esa u OQARMAYDI — biroz KO'TARILGAN to'q yuza bo'ladi.
      Sabab: to'q sahifada katta suyak/oq maydon ko'zni qamashtiradi
      (mijoz aynan shundan shikoyat qilgan). "Teskari" degani "yorug'"
      degani emas — "ajralib turadigan" degani.
   ============================================================ */
:root{
  --on-accent:#FFF6F3;      /* qizil/oltin/artikel fon ustidagi matn */
  --invert-bg:#191510;      /* urg'u yuzasining foni */
  --invert-fg:#FBF6EE;      /* undagi asosiy matn */
  --on-ink-accent:#DFC260;  /* undagi oltin urg'u */
}
[data-theme="dark"]{
  --invert-bg:#2E2619;      /* iliq, ko'tarilgan to'q yuza — OQ EMAS */
  --invert-fg:#EDE6D6;
  --on-ink-accent:#E8CE86;
}

/* Fokus halqasi — QIZIL: qog'oz fonda oltindan ancha aniq ko'rinadi */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px;}

/* Raqamlar HAR DOIM mono va tabular — jadval/statistika "sakramaydi" */
.ms-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* IKONKALAR (ETAP 29B) — inline SVG, rangi `currentColor` dan keladi.
   Emoji ishlatilmaydi: u har kompyuterda boshqacha chiziladi va rejim
   bilan moslashmaydi. Markup `script.js` dagi `ICONS` ro'yxatida. */
.ic{
  width:1.05em;height:1.05em;flex:0 0 auto;
  display:inline-block;vertical-align:-.18em;
  stroke:currentColor;fill:none;
}
/* Faqat ekran o'quvchisi uchun (jadval sarlavhasi kabi) */
.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;
}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(74,52,26,.26);border-radius:var(--radius-pill);}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(230,223,209,.18);}
::-webkit-scrollbar-thumb:hover{background:var(--red);}

/* ============================================================
   4. MATERIAL — tekis yuza + 1px chegara

   ETAP 29: shisha (backdrop-filter, shaffof gradient, "yaltirash")
   BUTUNLAY olib tashlandi. Ikki sabab:
     1) sekin edi — QOIDA 58 shu haqda;
     2) "shablon AI sayti" ko'rinishini berardi.
   Endi material bitta: TOZA YUZA + HAIRLINE CHEGARA. Chuqurlik rang
   yoki soya bilan emas, BO'SHLIQ va tipografiya iyerarxiyasi bilan.
   Yangi element qo'shsangiz — shu ro'yxatga qo'shing, boshqa hech nima
   kerak emas.
   ============================================================ */
.panel,
.word-card,
.game-card,
.lek-tile,
.stat-box,
.flash-face,
.table-wrap,
.opt,
.match-item,
.q-def,
.search-box,
.answer-input,
.chip,
.btn,
.icon-btn,
.wc-btn,
.speak-btn,
.dash-card,
.module-card,
.mini-stat,
.level-card,
.course-card,
.crumb,
.spr-shell,
.spr-text,
.spr-msg.ai .sm-bubble,
.mem-face.back{
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* ⚠️ ETAP 33C — headerdagi `backdrop-filter` OLIB TASHLANDI.
   Shtorka foni endi butunlay shaffofmas (qora + shu'lalar), shuning uchun
   xiralashtirishdan hech qanday vizual foyda yo'q edi — faqat har skrollda
   qo'shimcha kompozitsiya ishi. Endi butun saytda backdrop-filter YO'Q. */

.lek-tile,.game-card,.panel,.word-card,.module-card,.gram-card,
.level-card,.course-card{position:relative;}

/* ============================================================
   4B. HOVER — bosiladigan har bir yuza javob beradi

   Uchta narsa BIRGA harakatlanadi (shuning uchun "jonli" his qilinadi):
     1) karta 2px ko'tariladi,
     2) soya chuqurlashadi,
     3) yuqori qirrada QIZIL chiziq chiqadi (Sprachlinie ning aks-sadosi).
   Barchasi `transform`/`opacity` orqali — GPU da, layout qayta hisoblanmaydi.
   ============================================================ */
.lek-tile,.game-card,.word-card,.module-card,.gram-card,
.level-card,.course-card,.dash-card,.stat-box{
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  will-change:transform;
}
.lek-tile:hover,.game-card:hover,.word-card:hover,
.module-card:hover,.level-card:hover,.course-card:hover,.gram-card:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--glass-shadow-lg);
}
.lek-tile:active,.game-card:active,.module-card:active,
.level-card:active,.course-card:active,.gram-card:active{
  transform:translateY(0);
  transition-duration:.06s;
}

/* Yuqori qirradagi qizil chiziq — markazdan ikki tomonga ochiladi */
/* ⚠️ .module-card va .gram-card bu ro'yxatda YO'Q — ularning ::before
   elementi allaqachon band (chapdagi rangli aksent chizig'i). */
/* ⚠️ ETAP 31A: chiziq kartaning RADIUSI qadar ichkariga surildi. Ilgari
   `left:0;right:0` edi — to'g'ri burchakli chiziq yumaloq burchak ustidan
   o'tib, kartaning tashqarisiga chiqib turardi (mijoz ko'rgan nuqson).
   Karta `overflow:hidden` qilib qirqilmaydi, chunki `.lv-ghost` va
   `.cc-ghost` ataylab pastdan chiqib turadi. */
.lek-tile::before,.level-card::before,.course-card::before{--edge-r:var(--radius);}
.game-card::before{--edge-r:var(--radius-lg);}
.lek-tile::before,.game-card::before,
.level-card::before,.course-card::before{
  content:"";position:absolute;left:var(--edge-r);right:var(--edge-r);top:0;height:2px;
  border-radius:0 0 2px 2px;
  background:var(--red);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform var(--t-slow);
  pointer-events:none;z-index:1;
}
.lek-tile:hover::before,.game-card:hover::before,
.level-card:hover::before,.course-card:hover::before{
  transform:scaleX(1);
}

/* Tugmalar va chiplar — yengil ko'tarilish, bosilganda "cho'kadi" */
.btn,.chip,.icon-btn,.wc-btn,.speak-btn,.crumb{
  transition:transform var(--t),background var(--t),color var(--t),
             border-color var(--t),box-shadow var(--t);
}
.btn:hover,.chip:hover,.icon-btn:hover{transform:translateY(-1px);}
.btn:active,.chip:active,.icon-btn:active{transform:translateY(0);transition-duration:.06s;}
.btn.primary:hover{box-shadow:0 6px 18px rgba(179,18,43,.28);}
[data-theme="dark"] .btn.primary:hover{box-shadow:0 6px 18px rgba(217,69,91,.3);}

/* ============================================================
   5. FOKUS REJIMI
   Grammatika mavzusi ochilganda atrofdagi hamma narsa xiralashadi —
   ekranda faqat dars qoladi. Sichqoncha borsa qaytadan aniqlashadi.
   ============================================================ */
body.focus-mode .hero,
body.focus-mode .site-footer,
body.focus-mode #view-grammar .section-head,
body.focus-mode #gramCrumbs,
body.focus-mode #gramLevelPanel,
body.focus-mode #gramPanel{
  opacity:.26;
  filter:blur(2px) saturate(.7);
  transition:opacity .5s var(--ease),filter .5s var(--ease);
}
body.focus-mode .site-header{opacity:.55;transition:opacity .4s var(--ease);}
body.focus-mode .hero:hover,
body.focus-mode .site-footer:hover,
body.focus-mode #view-grammar .section-head:hover,
body.focus-mode #gramCrumbs:hover,
body.focus-mode #gramLevelPanel:hover,
body.focus-mode #gramPanel:hover,
body.focus-mode .site-header:hover,
body.focus-mode .site-header:focus-within{opacity:1;filter:none;}

/* SENSORLI EKRANDA xiralashtirish YO'Q.
   Sabab: yuqoridagi holatdan chiqish yagona yo'li — sichqonchani ustiga
   olib borish. Telefon va planshetda sichqoncha yo'q, shuning uchun
   YOPISHQOQ shtorka doimo yarim shaffof qolib, ostidan o'tayotgan matn
   ko'rinib turardi — aynan "qorishib ketgan" ko'rinish shu edi.
   `hover:none` — kenglikka emas, QURILMA turiga qaraydi: 800px li
   planshet ham, 380px li telefon ham bir xil to'g'ri chiqadi. */
@media (hover:none){
  body.focus-mode .hero,
  body.focus-mode .site-footer,
  body.focus-mode #view-grammar .section-head,
  body.focus-mode #gramCrumbs,
  body.focus-mode #gramLevelPanel,
  body.focus-mode #gramPanel,
  body.focus-mode .site-header{opacity:1;filter:none;}
}

.focus-flag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);
}
.focus-flag::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(200,144,26,.18);
}

/* ---------- 6. QOR — yengil fon animatsiyasi ---------- */
#snow{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;user-select:none;
  z-index:0;
}

/* ============================================================
   7. HEADER
   ============================================================ */
/* ★ ETAP 33C — SHTORKA QAYTA ISHLANDI.
   ------------------------------------------------------------
   ILGARI: bayroqning uchta QATTIQ bo'lagi + ustidan qorong'i parda.
   Natija loyqa jigarrang yo'lak edi — mijoz haqli ravishda "xunuk" dedi.

   ENDI: bayroq NUR sifatida ishlaydi.
     · asos — chuqur "tinta qora" (Schwarz, bayroqning birinchi rangi);
     · chapdan yumshoq QIZIL, o'ngdan yumshoq OLTIN shu'la (radial, 14–18%);
     · pastda esa ANIQ tricolor hairline — bayroqni bir qarashda tanitadi.
   Shu'lalar juda past kontrastda, shuning uchun ustidagi matn va tugmalar
   hech qanday rang bilan to'qnashmaydi. */
.site-header{
  position:sticky;top:0;z-index:60;
  background:
    radial-gradient(62% 130% at 4%  118%, rgba(226,59,76,.13)  0%, rgba(226,59,76,0)  70%),
    radial-gradient(62% 130% at 96% 118%, rgba(245,197,66,.11) 0%, rgba(245,197,66,0) 70%),
    linear-gradient(180deg,#17130E 0%,#100D09 100%);
  transition:box-shadow var(--t);
}
.site-header.scrolled{box-shadow:0 8px 26px rgba(0,0,0,.34);}

/* Pastki qirra — bayroqning aniq izi (Schwarz · Rot · Gold) */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,
    #4A4238 0    33.33%,
    #D02338 33.33% 66.66%,
    #E9BE4A 66.66% 100%);
}

.header-inner{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  height:var(--header-h);
  padding:0 var(--pad-x);
  display:flex;align-items:center;gap:28px;
}

/* ---------- LOGOTIP — «umlaut.uz» (ETAP 52) ----------
   Ikki qism: NUQTA-BELGI (umlaut) + yonida SVG so'z-belgi.
   Ikkalasi ham `index.html` da SVG bilan chizilgan — shrift yuklandi-yuklanmadi,
   logotip HAR KOMPYUTERDA aynan bir xil chiqadi (QOIDA 133). Sayt matni esa
   Space Grotesk'da (`--font-display`, loyiha ichidagi .woff2).
   Nom faqat shu markupda va `aria-label` larda turadi — boshqa joyga
   qotirib yozilmaydi. */
.brand{
  display:flex;align-items:center;gap:13px;min-width:0;flex:0 0 auto;
  background:none;border:none;padding:0;cursor:pointer;
  transition:transform var(--t);
}
.brand:active{transform:translateY(1px);}

/* Belgi — IKKI OLMOS. Shakl tik (60 × 100), shuning uchun kengligi emas,
   BALANDLIGI beriladi; kengligini brauzer nisbatdan hisoblaydi. */
.brand-emblem{
  position:relative;flex:0 0 auto;
  width:21px;height:35px;
  transition:transform var(--t-slow);
}
.brand-emblem svg{display:block;width:100%;height:100%;}

/* Ranglar — bayroqning oltini va qizili. Ular FAQAT shu belgida turadi:
   dizayn tizimining `--gold` / `--red` tokenlari bilan aralashtirilmaydi
   (QOIDA 73 ning mantig'i — brend rangi alohida narsa). */
.rh-gold{fill:#F2B70D;}
.rh-red{fill:#D6122E;}
/* Sichqoncha kelganda olmoslar bir-biridan ozgina ajraladi — belgi
   "nafas oladi", lekin joyidan sakramaydi. */
.brand-emblem path{transition:transform var(--t-slow);}
.brand:hover .rh-gold{transform:translateY(-2px);}
.brand:hover .rh-red{transform:translateY(2px);transition-delay:.05s;}

.brand-text{display:flex;flex-direction:column;min-width:0;}
/* SO'Z-BELGI — SVG. `height` bilan o'lchanadi, `font-size` bilan emas:
   harflar `<path>`, ya'ni shrift o'lchamiga bog'liq emas.
   Rang bitta — urg'u belgining o'zida (gradient YO'Q, QOIDA 89). */
.brand-name{
  display:block;height:19px;line-height:0;
  /* Sof oq EMAS — shtorkaning o'z suyak tusi (QOIDA 78, `.menu-btn` bilan bir xil) */
  color:#F7F3EC;flex:0 0 auto;
}
.brand-name svg{display:block;height:100%;width:auto;}

/* ⚠️ ETAP 34B — `.main-tabs` / `.tab-btn` qoidalari O'CHIRILDI.
   «Bosh sahifa» tabi olib tashlangach, ular hech qaerga tegmay
   qolgan edi. Bo'sh CSS saqlash keyingi chatni chalg'itadi. */

/* ---------- Daraja almashtirgichi (segmented) ---------- */
.level-switch{
  display:flex;gap:2px;padding:3px;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
}
.level-switch button{
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:500;letter-spacing:.03em;
  padding:5px 11px;border-radius:var(--radius-pill);color:var(--text-3);
  transition:color var(--t),background var(--t);
}
.level-switch button:hover:not(.is-active){color:var(--text);}
.level-switch button.is-active{background:var(--invert-bg);color:var(--invert-fg);}
/* Hali tayyor bo'lmagan daraja — bor, lekin so'nik */
.level-switch button.is-empty{opacity:.42;}

/* `margin-left:auto` — ilgari bu ishni `.main-tabs` ning `margin-right:auto`
   si qilardi. Tab ketgach, tugmalarni o'ngga suradigan narsa shu qoldi. */
.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto;}
.icon-btn{
  width:34px;height:34px;border-radius:var(--radius-pill);
  display:grid;place-items:center;font-size:.95rem;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  transition:border-color var(--t),background var(--t),color var(--t);
}
.icon-btn:hover{border-color:var(--border-strong);background:var(--surface-2);color:var(--text);}
.icon-btn .ic{width:17px;height:17px;}
#themeIcon{display:grid;place-items:center;}
/* Nemischa ovoz topilmaganda — diqqatni tortuvchi holat (oltin = holat belgisi) */
.icon-btn.is-warn{
  background:var(--gold-100);border-color:var(--gold);color:var(--gold-700);
}
[data-theme="dark"] .icon-btn.is-warn{color:var(--gold-300);}
.icon-btn.is-warn:hover{background:var(--gold);color:#1A1712;}

/* Shtorka qorong'i bo'lgani uchun undagi tugmalar ham "shishasimon oq" (ETAP 33B).
   Bu qoida FAQAT header ichida ishlaydi — sahifadagi boshqa .icon-btn tegilmaydi. */
.site-header .icon-btn{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.86);
}
.site-header .icon-btn:hover{
  border-color:rgba(255,206,0,.75);
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* ---------- «BO'LIMLAR» TUGMASI (ETAP 33C) ----------
   Ilgari bu shunchaki uch chiziqli ikonka edi va ko'zga tashlanmasdi.
   Endi — YOZUVLI tugma, oltin qirra bilan: saytdagi eng ko'rinadigan tugma. */
.menu-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:38px;padding:0 15px 0 13px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(233,190,74,.55);
  background:rgba(233,190,74,.13);
  color:#F7F3EC;
  transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
}
.menu-btn:hover{
  background:rgba(233,190,74,.24);
  border-color:#E9BE4A;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(233,190,74,.20);
}
.menu-btn:active{transform:translateY(0);transition-duration:.06s;}
.menu-btn-label{
  font-family:var(--font-display);
  font-size:.86rem;font-weight:600;letter-spacing:.005em;white-space:nowrap;
}

.burger-lines{display:flex;flex-direction:column;justify-content:center;gap:4px;width:17px;flex:0 0 17px;}
.burger-lines i{
  display:block;height:2px;border-radius:2px;background:#E9BE4A;
  transition:transform var(--t),opacity var(--t),width var(--t);
}
.burger-lines i:nth-child(1){width:17px;}
.burger-lines i:nth-child(2){width:12px;}
.burger-lines i:nth-child(3){width:17px;}
.menu-btn:hover .burger-lines i:nth-child(2){width:17px;}
/* Panel ochiq turganda — uch chiziq "×" ga aylanadi */
.menu-btn[aria-expanded="true"] .burger-lines i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-btn[aria-expanded="true"] .burger-lines i:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] .burger-lines i:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:17px;}

/* ============================================================
   7B. YON PANEL (drawer) — saytning barcha bo'limlari
   ============================================================ */
.drawer-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(12,10,7,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s var(--ease);
}
.drawer-backdrop.is-open{opacity:1;}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(390px,88vw);
  display:flex;flex-direction:column;
  background:var(--bg-base);
  border-left:1px solid var(--border);
  box-shadow:-18px 0 48px rgba(20,14,6,.22);
  transform:translateX(102%);
  transition:transform .32s var(--ease);
}
[data-theme="dark"] .drawer{box-shadow:-18px 0 48px rgba(0,0,0,.6);}
.drawer.is-open{transform:translateX(0);}

/* Panel boshi — shtorkaning aks-sadosi (o'sha nurli qora fon) */
.drawer-head{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:16px var(--pad-x);
  background:
    radial-gradient(70% 130% at 4%  118%, rgba(226,59,76,.14)  0%, rgba(226,59,76,0)  70%),
    radial-gradient(70% 130% at 96% 118%, rgba(245,197,66,.12) 0%, rgba(245,197,66,0) 70%),
    linear-gradient(180deg,#17130E 0%,#100D09 100%);
}
.drawer-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#26221A 0 33.33%,#D02338 33.33% 66.66%,#E9BE4A 66.66% 100%);
}
/* Belgi tik shakl (60 × 100) — panelda ham nisbat saqlanadi (ETAP 52) */
.drawer-emblem{width:24px;height:40px;flex:0 0 24px;filter:drop-shadow(0 3px 9px rgba(0,0,0,.45));}
.drawer-head-text{display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:0;}
.drawer-title{
  font-family:var(--font-display);font-size:1.06rem;font-weight:700;color:#FFFFFF;
}
.drawer-sub{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:#E9BE4A;
}

.drawer-close,.drawer-back{
  width:32px;height:32px;flex:0 0 32px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  border:1px solid rgba(247,243,236,.26);background:rgba(247,243,236,.10);
  color:rgba(247,243,236,.9);
  transition:background var(--t),border-color var(--t),color var(--t);
}
.drawer-close:hover,.drawer-back:hover{
  background:rgba(233,190,74,.24);border-color:#E9BE4A;color:#fff;
}
.drawer-close .ic,.drawer-back .ic{width:16px;height:16px;}

/* Ro'yxat */
.drawer-nav{
  flex:1 1 auto;overflow-y:auto;
  /* ⚠️ `min-height:0` SHART. Flex bolasining standart `min-height:auto` qiymati
     ro'yxatni kontent balandligidan pastga tushirmaydi — natijada ro'yxat o'zi
     aylanmay, butun panel cho'zilib ketadi va bosh qismi siljib qoladi. */
  min-height:0;
  /* `html{scroll-behavior:smooth}` global — bu yerda kerak emas:
     panel ochilganda ro'yxat DARHOL boshiga qaytishi kerak. */
  scroll-behavior:auto;
  padding:14px var(--pad-x) 20px;
  display:flex;flex-direction:column;gap:4px;
}
.dn-group{
  font-family:var(--font-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  display:flex;align-items:center;gap:9px;
  margin:14px 0 6px;
}
.dn-group:first-child{margin-top:2px;}
.dn-group::after{content:"";flex:1;height:1px;background:var(--border);}

.dn-item{
  position:relative;
  display:flex;align-items:center;gap:13px;
  width:100%;padding:10px 13px;
  border:1px solid transparent;border-radius:var(--radius);
  background:none;text-align:left;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.dn-item:hover{background:var(--surface);border-color:var(--border);transform:translateX(2px);}
.dn-item:active{transform:translateX(0);transition-duration:.06s;}
.dn-item.is-active{background:var(--surface-2);border-color:var(--border-strong);}

.dn-nr{
  flex:0 0 30px;width:30px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  color:var(--text-3);letter-spacing:.02em;
}
.dn-item:hover .dn-nr{color:var(--red);}
.dn-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.dn-text b{
  font-family:var(--font-display);font-size:.95rem;font-weight:600;
  color:var(--text);letter-spacing:-.005em;
}
.dn-text i{font-style:normal;font-size:.76rem;color:var(--text-3);}
.dn-go{
  flex:0 0 auto;font-size:.95rem;color:var(--text-3);
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--t),transform var(--t);
}
.dn-item:hover .dn-go{opacity:1;transform:translateX(0);color:var(--red);}

.drawer-foot{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:14px var(--pad-x);border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);
}
.df-flag{
  display:flex;flex-direction:column;
  width:18px;height:12px;flex:0 0 18px;border-radius:1px;overflow:hidden;
  box-shadow:0 0 0 1px var(--border);
}
.df-flag i{display:block;flex:1;}
.df-flag i:nth-child(1){background:#1A1712;}
.df-flag i:nth-child(2){background:#DD0000;}
.df-flag i:nth-child(3){background:#FFCE00;}

body.drawer-open{overflow:hidden;}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{position:relative;z-index:1;border-bottom:1px solid var(--border);}
/* ⚠️ ETAP 53 — tepadagi bo'shliq 72 → 58 px. Sabab: hero'ga salomlashuv va
   «Testni boshlash» tugmasi qo'shildi; 1280×800 ekranda tugma sahifani
   surmasdan ko'rinib turishi kerak (mijoz talabi: "ko'zga tashlansin"). */
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:58px var(--pad-x) 56px;}
/* ⚠️ ETAP 53 — hero yana IKKI ustun: chapda salomlashuv, o'ngda demo karta.
   (ETAP 52 da sarlavha olib tashlanib, bitta ustun qolgan edi.)
   `minmax(0,…)` saqlanadi — grid bolasi min-content dan kichrayolmasligi
   375px da toshishga olib keladi (QOIDA 83). */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:46px;align-items:center;justify-items:stretch;
}
.hero-grid .hero-demo{width:100%;max-width:520px;justify-self:end;}
.hero-lead{min-width:0;}

/* ------------------------------------------------------------
   8-0. SALOMLASHUV (ETAP 53)
   ------------------------------------------------------------
   Mijoz talabi: «kirgan odamning ko'zi darhol shu yozuvga tushsin».
   Vosita — SHRIFT, rang emas: «Herzlich» grotesk (--font-display),
   «willkommen» esa serif kursiv (--font-elegant). Ikki shriftning
   qarama-qarshiligi gradientsiz ham "chiroyli" hissini beradi
   (QOIDA 74/89 — gradient, shisha, yaltirash yo'q).
   ------------------------------------------------------------ */

/* Vaqtga qarab: Guten Morgen / Guten Tag / Guten Abend */
.hero-greet{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.71rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 20px;min-height:1em;
  opacity:0;animation:wk-fade .6s ease .05s forwards;
}
.hero-greet::before{content:"";width:22px;height:1px;background:var(--red);flex:0 0 22px;}
.hg-de{color:var(--red);}
.hg-sep{color:var(--text-3);opacity:.6;}
.hg-uz{color:var(--text-3);}

.wk{
  display:flex;flex-direction:column;
  font-family:var(--font-display);
  font-size:clamp(2.45rem,6.2vw,4.4rem);
  font-weight:800;line-height:.99;letter-spacing:-.035em;
  color:var(--text);margin:0 0 32px;
}
/* Niqob: matn shu qutining ostidan ko'tarilib chiqadi.
   `padding-bottom` — «g/j» kabi pastga tushadigan harflar kesilmasin. */
.wk-line{display:block;overflow:hidden;padding-bottom:.05em;}
.wk-word{
  display:inline-block;
  transform:translateY(108%);opacity:0;
  animation:wk-rise .85s cubic-bezier(.19,.86,.24,1) forwards;
}
.wk-1{animation-delay:.10s;}
.wk-2{
  animation-delay:.22s;
  font-family:var(--font-elegant);font-style:italic;font-weight:600;
  font-size:1.05em;letter-spacing:-.022em;
}

/* Uchinchi qator — kichikroq, "izoh" ohangida. Niqob yo'q: pastdagi
   qizil chiziq kesilib qolmasin (QOIDA 91 mantig'i). */
.wk-tail{overflow:visible;font-size:.325em;font-weight:500;line-height:1.35;
  letter-spacing:-.005em;color:var(--text-2);padding-top:.7em;}
.wk-tail .wk-word{transform:translateY(16px);animation-name:wk-fade-up;animation-delay:.42s;}
.wk-dash{color:var(--red);margin-right:.18em;}

/* «echten Deutsch» — qo'lda chizilgandek qizil chiziq, o'zi chiziladi */
.wk-mark{position:relative;white-space:nowrap;color:var(--text);font-weight:700;}
.wk-ul{
  position:absolute;left:-1.5%;bottom:-.34em;
  width:103%;height:.34em;color:var(--red);overflow:visible;
}
.wk-ul path{stroke-dasharray:330;stroke-dashoffset:330;animation:wk-draw 1s ease 1.05s forwards;}

/* ⚠️ ETAP 53B — `.hero-lead-sub` (sarlavha ostidagi izoh) O'CHIRILDI,
   mijoz talabi. Endi sarlavhadan keyin darhol daraja testi rukni keladi,
   shuning uchun `.wk` ning pastki bo'shlig'i 22 → 32 px ga oshirildi. */

@keyframes wk-rise   {to{transform:translateY(0);opacity:1;}}
@keyframes wk-fade-up{to{transform:translateY(0);opacity:1;}}
@keyframes wk-fade   {to{opacity:1;}}
@keyframes wk-draw   {to{stroke-dashoffset:0;}}

/* ------------------------------------------------------------
   8-0B. DARAJA TESTI RUKNI (hero ichida)
   ------------------------------------------------------------ */
.niveau{
  position:relative;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px 24px 24px;
  max-width:560px;
  opacity:0;animation:wk-fade .7s ease .72s forwards;
}
/* Chap qirradagi qizil chiziq — grammatika bloklaridagi bilan bir xil til
   (QOIDA 84). Karta radiusi qadar ichkariga surilgan (QOIDA 91). */
.niveau::before{
  content:"";position:absolute;left:0;top:20px;bottom:20px;
  width:2px;background:var(--red);border-radius:2px;
}
.nv-kicker{
  display:inline-block;
  font-family:var(--font-mono);font-size:.65rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);
}
.nv-title{font-size:clamp(1.1rem,2.4vw,1.4rem);font-weight:800;letter-spacing:-.02em;margin:9px 0 7px;}
.nv-sub{font-size:.9rem;color:var(--text-2);max-width:52ch;margin:0 0 17px;}
.nv-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.nv-arrow{width:17px;height:17px;transition:transform var(--t);}
.nv-btn:hover .nv-arrow{transform:translateX(3px);}
.nv-meta{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}

/* ★ DARAJA TESTI TUGMASI — OLTIN, qizil EMAS (ETAP 53C, mijoz talabi).
   Sabab: shtorkadagi «Ro'yxatdan o'tish» (`.auth-cta`) qizil, ikkalasi bir
   xil ko'rinardi va o'quvchi ikkovini adashtirardi. Oltin — bu saytda
   DARAJA / YUTUQ rangi (QOIDA 74), daraja testi esa aynan shu haqda.
   ⚠️ Ustidagi matn ikkala rejimda ham QORA (`#1A1712`): oltin ikkala
   rejimda ham yorug', shuning uchun `--invert-fg` kabi tokenga
   bog'lab bo'lmaydi. Qizil butun saytda faqat CTA/faol holatda qoladi. */
/* ⚠️ Selektor ATAYIN `.btn.nv-btn` — faqat `.nv-btn` yozilsa, 16-bo'limdagi
   `.btn{color:var(--text)}` bir xil vaznda, lekin KEYINROQ turgani uchun
   yutib ketadi va tungi rejimda oltin fon ustida suyak matn chiqadi
   (53C da aynan shu xato topildi). */
.btn.nv-btn{
  padding:13px 24px;font-size:.94rem;
  color:#1A1712;background:var(--gold);border-color:var(--gold);
}
.btn.nv-btn:hover{color:#1A1712;background:var(--gold-600);border-color:var(--gold-600);}

/* ⚠️ TUNGI REJIMDA TO'LDIRILGAN OLTIN ISHLATILMAYDI (QOIDA 78).
   #E3C264 ning yorqinligi L=0.56 — chegara 0.20, ya'ni ekranda "chiroq"
   bo'lib yonardi (mijoz aynan shundan shikoyat qilgan edi). Yechim —
   CHIP ko'rinishi: to'q oltin fon (--gold-100 = #38301C, L=0.03) ustida
   oltin matn va chegara. Kontrast 7.6:1, tugma baribir ajralib turadi. */
[data-theme="dark"] .btn.nv-btn{
  color:var(--gold);background:var(--gold-100);border-color:var(--gold);
}
[data-theme="dark"] .btn.nv-btn:hover{
  color:var(--gold-300);background:var(--gold-100);border-color:var(--gold-300);
}
/* "Nafas olish" faqat HERO dagi tugmada — `#view-niveau` ichidagisiga kerak
   emas, u yerda o'quvchi allaqachon shu sahifada turibdi. */
.niveau .nv-btn{animation:nv-pulse 2.2s ease-out 1.6s 3;}
.nv-btn:hover,.nv-btn:focus-visible{animation:none;}
@keyframes nv-pulse{
  0%  {box-shadow:0 0 0 0    rgba(201,162,39,.42);}
  70% {box-shadow:0 0 0 16px rgba(201,162,39,0);}
  100%{box-shadow:0 0 0 0    rgba(201,162,39,0);}
}
[data-theme="dark"] .niveau .nv-btn{animation-name:nv-pulse-d;}
@keyframes nv-pulse-d{
  0%  {box-shadow:0 0 0 0    rgba(227,194,100,.4);}
  70% {box-shadow:0 0 0 16px rgba(227,194,100,0);}
  100%{box-shadow:0 0 0 0    rgba(227,194,100,0);}
}

/* Harakat kamaytirilgan bo'lsa — hammasi darhol o'z joyida turadi */
@media (prefers-reduced-motion:reduce){
  .hero-greet,.niveau{animation:none;opacity:1;}
  .wk-word{animation:none;transform:none;opacity:1;}
  .wk-ul path{animation:none;stroke-dashoffset:0;}
  .nv-btn{animation:none;}
}

/* Tor ekran: ustunlar ustma-ust. Matn HAR DOIM birinchi — demo karta
   salomlashuvni pastga surib yubormasin. */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;justify-items:center;}
  .hero-lead{width:100%;max-width:620px;}
  .hero-grid .hero-demo{justify-self:center;}
  .niveau{max-width:none;}
}

/* ------------------------------------------------------------
   8-0C. DARAJA TESTI MUQOVASI (`#view-niveau`) — ETAP 53
   ------------------------------------------------------------ */
.nvt-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:2px;margin-bottom:22px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.nvt-stat{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;background:var(--surface);
}
.nvt-num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--text);
}
.nvt-lab{font-size:.76rem;color:var(--text-3);}

.nvt-rules{margin:0 0 22px;padding:0;list-style:none;counter-reset:nvt;}
.nvt-rules li{
  counter-increment:nvt;position:relative;
  padding:0 0 0 34px;margin-bottom:11px;
  font-size:.92rem;color:var(--text-2);line-height:1.55;
}
.nvt-rules li::before{
  content:counter(nvt,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  color:var(--red);letter-spacing:.04em;
}
.nvt-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.nvt-note{
  font-size:.84rem;color:var(--text-3);line-height:1.6;
  padding:13px 16px;border-left:2px solid var(--gold);
  background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:0;
}
.nvt-note b{color:var(--text-2);}

/* Kicker — Sprachlinie ning mikro-versiyasi: qisqa qizil chiziq + mono matn */
.hero-kicker{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red);
  margin-bottom:20px;
}
.hero-kicker::before{content:"";width:18px;height:1px;background:var(--red);flex:0 0 18px;}

.hero-sub{font-size:1.02rem;color:var(--text-2);max-width:47ch;margin-bottom:38px;}

/* ⚠️ ETAP 52 — `.hero-title`, `.hero-title-solo` va `.hero-stats` qoidalari
   O'CHIRILDI: sarlavha ham, raqamlar qatori ham HTML dan olib tashlandi
   (mijoz talabi). Quyidagi `.mini-stat` / `.ms-num` / `.ms-label` esa
   QOLDI — `script.js:renderHome()` ularni hali ham yasay oladi
   (`if (heroStats)` ichida), ya'ni hisoblagichlar qaytarilsa CSS tayyor. */
.mini-stat{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:0;min-width:0;
  background:none;border:none;box-shadow:none;
}
.ms-num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.34rem;font-weight:500;letter-spacing:-.01em;
  color:var(--text);line-height:1.1;
}
.ms-label{font-size:.76rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-3);}

/* ============================================================
   8A. HERO — SUZUVCHI SO'ZLAR (ETAP 34)
   ------------------------------------------------------------
   Qiyshiq dog' ustidagi nemischa so'z; ustiga borsangiz o'zbekchasi
   chiqadi. So'zlar HTML da yozilmagan — `renderHeroWords()` ularni
   HAQIQIY lug'atdan (`WORDS`) tasodifiy oladi, shuning uchun sahifa
   har ochilganda boshqacha bo'ladi.

   Dog' rangi ARTIKELDAN keladi (der ko'k · die pushti · das yashil).
   Ya'ni bu bezak emas: o'quvchi hover qilmasdan ham jinsni ko'radi.

   ⚠️ NIMA UCHUN "BAND" (pastdagi yo'lak), tepaga sochilmagan:
   sarlavha `max-width:16ch` va demo karta hero'ning deyarli hammasini
   egallaydi — so'zlarni ular ustiga absolyut qo'ysak, ekran kengligiga
   qarab matnni to'sib qo'yadi. Yo'lak esa hech qachon to'qnashmaydi.
   ============================================================ */
.hero-words{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:18px 40px;
  margin-top:46px;padding-top:8px;
  min-height:104px;
}

.hw{
  position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 22px;
  cursor:default;
  transform:rotate(var(--rot)) translateY(var(--dy));
  /* Tebranish — faqat burchakni chayqatadi, joyini emas. Har so'zning
     davomiyligi va kechikishi boshqacha: shu tufayli ular "sinxron
     mashina" emas, tirik narsa bo'lib ko'rinadi. */
  animation:hw-wiggle var(--dur) ease-in-out var(--delay) infinite;
  transition:transform var(--t-slow);
}
.hw:hover{z-index:5;}

/* Dog' — qo'lda chizilgan notekis shakl, elementga cho'ziladi
   (`preserveAspectRatio:none`). Uchta variantdan biri JS da tanlanadi. */
.hw-blob{
  position:absolute;inset:-2px -4px;
  width:calc(100% + 8px);height:calc(100% + 4px);
  z-index:0;pointer-events:none;
  transition:opacity var(--t-slow);
}
.hw-blob path{
  fill:var(--hw-c);fill-opacity:.13;
  stroke:var(--hw-c);stroke-opacity:.5;stroke-width:2;
}

.hw-face{position:relative;z-index:1;display:grid;}
/* Ikkala yozuv BIR katakda turadi (grid-area 1/1) — shuning uchun
   almashganda element kengligi sakramaydi, dog' ham qimirlamaydi. */
.hw-de,.hw-uz{
  grid-area:1/1;white-space:nowrap;
  font-family:var(--font-display);line-height:1.1;
  transition:opacity var(--t-slow);
}
.hw-de{font-size:1.22rem;font-weight:700;letter-spacing:-.012em;color:var(--text);}
.hw-uz{font-size:1.06rem;font-weight:500;color:var(--hw-c);opacity:0;}

.hw:hover .hw-de,.hw.is-flipped .hw-de{opacity:0;}
.hw:hover .hw-uz,.hw.is-flipped .hw-uz{opacity:1;}
/* Tarjima chiqqanda dog' biroz to'yinadi — "javob berdi" hissi */
.hw:hover .hw-blob path,.hw.is-flipped .hw-blob path{fill-opacity:.22;}

@keyframes hw-wiggle{
  0%,100%{transform:rotate(var(--rot))                      translateY(var(--dy));}
  50%    {transform:rotate(calc(var(--rot) + var(--sway)))  translateY(calc(var(--dy) - 4px));}
}

/* Harakat kamaytirilgan bo'lsa — tebranish yo'q, qolgani ishlaydi */
@media (prefers-reduced-motion:reduce){
  .hw{animation:none;}
}

/* ============================================================
   8B. HERO DEMO KARTASI — artikel rang tizimini "jonli" ko'rsatadi
   ============================================================ */
.demo-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--glass-shadow);
  transition:box-shadow var(--t-slow),transform var(--t-slow);
}
.hero-demo:hover .demo-card{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.demo-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--invert-bg);
}
.demo-head-label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--invert-fg);opacity:.62;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-tag{
  font-family:var(--font-mono);font-size:.64rem;font-weight:500;
  padding:3px 9px;border-radius:var(--radius-pill);flex:0 0 auto;
  background:rgba(160,140,100,.26);color:var(--invert-fg);
}

/* ⚠️ ETAP 53B — KARTA BOYITILDI (mijoz: «o'ng taraf chala to'lib qolgan»).
   Yangi qatorlar: talaffuz tugmasi, IPA, inglizcha tarjima, NEMISCHA
   TA'RIF va Synonym / Gegenteil. Hammasi bazada allaqachon bor edi
   (`dd` 100 %, `syn` 78 %, `ant` 53 %) — yangi ma'lumot yozilmadi.
   `min-height` — «Keyingi so'z» bosilganda karta sakramasligi uchun. */
/* `min-height` — o'lchangan qiymat: 25 ta tasodifiy so'zda tabiiy balandlik
   359 / 381 / 402 px chiqdi, ya'ni 402 hammasini qoplaydi. Shu tufayli
   «Keyingi so'z» bosilganda karta ham, hero ham SAKRAMAYDI. */
.demo-body{padding:22px 20px 18px;min-height:402px;}
.demo-word{display:flex;align-items:baseline;gap:9px;margin-bottom:6px;flex-wrap:wrap;}
/* ⚠️ Artikel rangi .art-der/.art-die/.art-das dan keladi — o'zgartirilmaydi */
.demo-artikel{font-family:var(--font-mono);font-size:.9rem;font-weight:600;}
.demo-term{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere;
}
.demo-speak{
  margin-left:auto;flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  color:var(--text-3);transition:color var(--t),background var(--t);
}
.demo-speak:hover{color:var(--red);background:var(--surface-2);}
.demo-speak .ic{width:16px;height:16px;}

.demo-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.demo-ipa{font-family:var(--font-mono);font-size:.74rem;color:var(--text-3);}
.demo-pl{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}

.demo-tr{margin-bottom:14px;}
.demo-uz{font-size:.98rem;font-weight:600;color:var(--text);margin:0;}
.demo-en{font-size:.86rem;color:var(--text-3);margin:2px 0 0;}

/* Nemischa ta'rif — kartaning eng qimmatli qatori: B2 da so'z tarjima
   orqali emas, NEMISCHA tushuntirish orqali o'rganiladi. */
.demo-block{margin-bottom:14px;}
.demo-label{
  display:block;font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px;
}
/* Ta'rif 3 qatordan oshmaydi — aks holda uzun ta'rifli so'z tushganda
   karta 45 px cho'zilib, «Keyingi so'z» bosilganda hero sakrab qolardi. */
.demo-def{
  font-size:.85rem;line-height:1.55;color:var(--text-2);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}

.demo-sent{
  font-size:.9rem;line-height:1.55;color:var(--text);
  padding-left:12px;border-left:2px solid var(--border);
  margin:0 0 14px;
}
.demo-sent i{display:block;font-style:normal;color:var(--text-3);font-size:.84rem;margin-top:4px;}

/* Synonym / Gegenteil — yorliq chapda, qiymat o'ngda, orasida nuqtali chiziq.
   Rang yo'q (QOIDA 74): ikkalasini FARQLAYDIGAN narsa — yorliqning o'zi. */
.demo-rel{border-top:1px solid var(--border);padding-top:12px;}
.demo-rel-row{display:flex;align-items:baseline;gap:10px;}
.demo-rel-row + .demo-rel-row{margin-top:7px;}
.demo-rel-row .demo-label{flex:0 0 74px;margin-bottom:0;}
.demo-rel-val{font-size:.84rem;color:var(--text-2);min-width:0;overflow-wrap:anywhere;}
.demo-rel-row.is-ant .demo-rel-val{color:var(--text-3);}

.demo-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;border-top:1px solid var(--border);
}
.demo-src{
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);
  display:flex;align-items:center;gap:6px;min-width:0;
}
.demo-src::before{content:"\A7";color:var(--text-2);font-weight:600;}
.demo-next{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  color:var(--red);flex:0 0 auto;transition:color var(--t);
}
.demo-next:hover{color:var(--red-600);}

/* Artikel rang-kodlash legendasi — tizimni bir qarashda tushuntiradi */
.art-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;}
.art-legend span{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);
}
.art-legend i{width:8px;height:8px;border-radius:50%;display:block;flex:0 0 8px;}
.art-legend .lg-der{background:var(--art-der);}
.art-legend .lg-die{background:var(--art-die);}
.art-legend .lg-das{background:var(--art-das);}
.art-legend .lg-pl{background:var(--art-plural);}

/* ============================================================
   8C. SPRACHLINIE — kurs yo'nalishi xaritasi
   Stansiya = daraja. Qizil = kontenti tayyor. Oltin nuqtalar = bosqichlar.
   ============================================================ */
.sprachlinie{margin-top:56px;padding-top:32px;border-top:1px solid var(--border);}
.sl-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:44px;
}
.sl-kicker{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);
}
.sl-note{font-size:.8rem;color:var(--text-3);}

.line-map{position:relative;padding:0 6px;}
.line-track{position:relative;height:2px;background:var(--border);}
.line-progress{position:absolute;left:0;top:0;height:2px;background:var(--red);}

.stations{display:flex;justify-content:space-between;position:relative;top:-13px;}
.station{
  display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;
  background:none;border:none;padding:0;
}
.st-dot{
  width:26px;height:26px;border-radius:50%;
  background:var(--bg-base);border:2px solid var(--text-3);
  display:grid;place-items:center;position:relative;z-index:2;
  font-family:var(--font-mono);font-size:.6rem;font-weight:600;color:var(--text-3);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.station .st-name,.station .st-meta{transition:color var(--t),transform var(--t);}
.station:hover .st-dot{transform:scale(1.14);box-shadow:0 0 0 6px rgba(179,18,43,.12);}
.station:hover .st-name{color:var(--red);}
.station:active .st-dot{transform:scale(1.02);transition-duration:.06s;}
.station.is-ready .st-dot{background:var(--red);border-color:var(--red);color:var(--on-accent);}
.station.is-here .st-dot{
  width:32px;height:32px;
  background:var(--ink);border-color:var(--ink);color:var(--bg-base);
  box-shadow:0 0 0 5px rgba(74,52,26,.11);
}
[data-theme="dark"] .station.is-here .st-dot{box-shadow:0 0 0 5px rgba(230,223,209,.10);}

.st-name{font-family:var(--font-display);font-weight:700;font-size:.88rem;margin-top:12px;color:var(--text);}
.st-meta{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);margin-top:3px;text-align:center;}
.station.is-ready .st-meta{color:var(--text-2);}

.sl-here{
  position:absolute;top:-38px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.06em;
  color:var(--red);white-space:nowrap;pointer-events:none;
}
.sl-here .sl-arrow{width:1px;height:10px;background:var(--red);}

/* Bosqich nuqtalari (X.1 / X.2) — oltin = tayyor */
.lek-ticks{display:flex;justify-content:space-between;margin-top:28px;}
.tick-group{flex:1;display:flex;justify-content:center;gap:6px;}
.tick{width:6px;height:6px;border-radius:50%;background:var(--border);}
.tick.is-filled{background:var(--gold);}

/* 8D. MOTTO bandasi ETAP 31A da mijoz iltimosiga ko'ra butunlay olib tashlandi
   (HTML + CSS). `--font-elegant` (footer motto, `mock.css`) va
   `--on-ink-accent` (faol kartalar) tokenlari joyida qoladi;
   `--font-script` esa ETAP 52 da o'chirildi — imzo bloki ham ketdi. */

/* ---------- Hero responsive ---------- */
@media(max-width:1060px){
  .header-inner{gap:18px;}
  .level-switch{display:none;}
}
@media(max-width:900px){
  .hero-inner{padding:44px var(--pad-x) 42px;}
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .st-meta{display:none;}
  .sl-here{display:none;}
  .sprachlinie{margin-top:40px;}
}
/* Tor ekranda «Bo'limlar» yozuvi yashirinadi — tugma ikonkaga qisqaradi,
   lekin oltin qirrasi qolgani uchun baribir ko'zga tashlanib turadi. */
@media(max-width:820px){
  .menu-btn{padding:0;width:38px;justify-content:center;gap:0;}
  .menu-btn-label{display:none;}
}
@media(max-width:640px){
  :root{--pad-x:18px;}
  /* DIQQAT: `.header-inner` bu yerda QAYTA yozilmaydi — 820px qoidasi
     (26-bo'lim) allaqachon to'g'ri balandlik va bo'shliqni beradi.
     Ilgari shu yerda ikkinchi, qarama-qarshi nusxa turardi. */
  /* «Ro'yxatdan o'tish» yozuvi telefonda ham QOLADI — topilishi shart.
     O'rin ikonka va ichki bo'shliq hisobiga tejaladi. */
  .auth-cta{font-size:.76rem;padding:7px 11px;gap:0;}
  .auth-cta .auth-ico{display:none;}
  .header-actions{gap:7px;}
  .icon-btn{width:32px;height:32px;}
  /* ⚠️ `.site-header` bilan chegaralangan: aks holda yon paneldagi
     `.drawer-emblem` ham kichrayib, kvadrat bo'lmay qoladi. */
  .site-header .brand-emblem{width:19px;height:31px;}
  .brand-name{height:17px;}          /* SVG so'z-belgi — `font-size` emas (ETAP 52) */
  .st-name{font-size:.78rem;}
  .lek-ticks{margin-top:22px;}
}

/* ============================================================
   9. LAYOUT
   ============================================================ */
.container{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x) 90px;}
.view{display:none;animation:fadeIn .25s var(--ease);}
.view.is-active{display:block;}

.panel{
  padding:24px 26px;border-radius:var(--radius-lg);
  margin-bottom:20px;
}
.panel-title{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.panel-title h2{font-size:1.12rem;font-weight:700;}
.panel-hint{font-size:.78rem;color:var(--text-3);}

/* Bo'lim sarlavhasi — kicker mono, sarlavha display, ostida qizil chiziqcha */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:34px 0 22px;
}
.section-head .sh-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
.sh-kicker{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
}
.sh-kicker::before{content:"";width:14px;height:1px;background:var(--red);flex:0 0 14px;}
.sh-title{font-size:clamp(1.3rem,3vw,1.75rem);font-weight:700;letter-spacing:-.012em;}
.sh-sub{font-size:.88rem;color:var(--text-3);}

/* ============================================================
   10. BOSH SAHIFA — DASHBOARD
   ============================================================ */

/* --- Progress paneli (o'quvchi yo'lining boshi) --- */
.dash{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:18px;margin-bottom:26px;
}
.dash-card{
  padding:26px 28px;border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:16px;
  position:relative;overflow:hidden;
}
.dash-card .dc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dc-head h3{font-size:1.02rem;font-weight:800;}
.dc-head .dc-hint{font-size:.74rem;color:var(--text-3);margin-left:auto;}

/* Katta halqa — umumiy progress */
.ring-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.ring{
  --p:0%;
  width:132px;height:132px;flex:0 0 132px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--gold) var(--p), rgba(20,22,26,.09) 0);
}
[data-theme="dark"] .ring{background:conic-gradient(var(--gold) var(--p), rgba(255,255,255,.09) 0);}
.ring::after{
  content:"";position:absolute;inset:11px;border-radius:50%;
  background:var(--glass-strong);
  box-shadow:var(--glass-edge);
}
.ring-val{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1;}
.ring-num{font-family:var(--font-display);font-size:1.85rem;font-weight:800;letter-spacing:-.04em;}
.ring-cap{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:5px;}

.ring-facts{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1;}
.fact{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text-2);line-height:1.55;}
.fact b{color:var(--text);font-weight:700;}
.fact-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:.42em;}
.fact-dot.gold{background:var(--gold);}
.fact-dot.red{background:var(--red);}
.fact-dot.ink{background:var(--ink-3);}

/* Kichik progress qatorlari (Wortschatz / Grammatik) */
.track-list{display:flex;flex-direction:column;gap:14px;}
.track-row{display:flex;flex-direction:column;gap:7px;}
.track-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.track-name{font-size:.85rem;font-weight:700;color:var(--text-2);}
.track-val{font-size:.78rem;font-weight:800;color:var(--gold-700);font-variant-numeric:tabular-nums;}
[data-theme="dark"] .track-val{color:var(--gold-300);}
.track-bar{height:9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;}
.track-fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--gold-300),var(--gold));
  box-shadow:0 0 12px rgba(200,144,26,.45);
  transition:width .8s var(--ease);
}
.track-fill.is-red{background:linear-gradient(90deg,var(--red-300),var(--red));box-shadow:0 0 12px rgba(192,24,47,.35);}

/* --- Modul kartalari ("Kurs moduliga kirish") --- */
.home-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:18px;
}
.module-card{
  display:flex;flex-direction:column;gap:12px;text-align:left;
  padding:30px 32px;border-radius:var(--radius-lg);min-height:300px;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  animation:fadeUp .5s var(--ease) both;
}
.module-card:hover{transform:translateY(-6px);box-shadow:var(--glass-shadow-lg);border-color:var(--glass-border-strong);}
.module-card:nth-child(2){animation-delay:.07s;}
/* Modulning o'z rangli chizig'i (yon tomonda) */
.module-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  /* burchak radiusi — aks holda chiziq yumaloq burchakdan chiqib turadi */
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:var(--mc-accent,var(--gold));opacity:.85;
}
.module-card.acc-gold{--mc-accent:linear-gradient(180deg,var(--gold-300),var(--gold-600));}
.module-card.acc-red{--mc-accent:linear-gradient(180deg,var(--red-300),var(--red-600));}

.mc-top{display:flex;align-items:flex-start;gap:14px;}
/* Modul raqami — emoji o'rniga mono «01/02» (ETAP 29E, QOIDA 80) */
.mc-ico{
  width:56px;height:56px;flex:0 0 56px;border-radius:18px;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.24rem;font-weight:700;letter-spacing:-.02em;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);
}
.mc-heads{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mc-kicker{font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3);}
.mc-title{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;}
.mc-desc{font-size:.92rem;color:var(--text-2);line-height:1.65;flex:1;}
.mc-meta{display:flex;flex-wrap:wrap;gap:7px;}
.mc-chip{
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.mc-progress{display:flex;flex-direction:column;gap:7px;}
.mc-go{
  margin-top:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:16px;
  font-size:.9rem;font-weight:700;
  color:var(--on-accent);background:var(--red);
  transition:gap var(--t),transform var(--t),box-shadow var(--t);
}
.module-card:hover .mc-go{box-shadow:0 6px 18px rgba(179,18,43,.28);}
.module-card:hover .mc-go{gap:15px;transform:translateY(-1px);}

/* Kichik modul kartalari (O'yinlar / Statistika) */
.home-grid-small{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;margin-top:18px;
}
.home-card{
  display:flex;flex-direction:column;gap:7px;text-align:left;
  padding:24px 26px;border-radius:var(--radius-lg);
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  position:relative;overflow:hidden;
}
.home-card:hover{transform:translateY(-5px);box-shadow:var(--glass-shadow-lg);border-color:var(--glass-border-strong);}
/* Kartaning kickeri — emoji o'rniga nemischa yorliq (29E) */
.hc-ico{
  font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);line-height:1;
  padding-bottom:9px;margin-bottom:3px;border-bottom:1px solid var(--border);
}
.hc-title{font-size:1.16rem;font-weight:800;letter-spacing:-.02em;}
.hc-desc{font-size:.85rem;color:var(--text-3);line-height:1.6;}
.hc-go{
  margin-top:6px;display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:800;color:var(--gold-700);transition:gap var(--t);
}
[data-theme="dark"] .hc-go{color:var(--gold-300);}
.home-card:hover .hc-go{gap:12px;}

/* ============================================================
   10B. YO'L KO'RSATKICHI (breadcrumb)
   ------------------------------------------------------------
   Modul › Daraja › Bosqich › Lektion › Mavzu — o'quvchi qayerda
   turganini doim ko'radi va istalgan bo'g'inga bir bosishda qaytadi.
   ============================================================ */
.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  margin:0 0 18px;
}
.crumb{
  padding:6px 13px;border-radius:11px;
  font-size:.76rem;font-weight:700;color:var(--text-2);
  transition:all var(--t);white-space:nowrap;
  max-width:min(100%,320px);overflow:hidden;text-overflow:ellipsis;
}
.crumb:hover{color:var(--text);border-color:var(--glass-border-strong);transform:translateY(-1px);}
.crumb.is-cur{
  color:var(--invert-fg);background:var(--invert-bg);
  border-color:var(--invert-bg);cursor:default;
}
.crumb.is-cur:hover{transform:none;}
.crumb-sep{color:var(--text-3);font-size:.86rem;opacity:.6;padding:0 1px;}

/* ============================================================
   10C. DARAJALAR (A1 · A2 · B1 · B2) VA BOSQICHLAR (X.1 / X.2)
   ------------------------------------------------------------
   Ikki qadamli akkordeon: yuqorida 4 ta daraja kartasi, bosilgani
   ostida o'sha darajaning 2 ta bosqichi ochiladi. Uchinchi qadam —
   Lektion paneli — faqat bosqich tanlangandan keyin ko'rinadi.
   ============================================================ */
.level-panel{padding:26px 28px;}

.level-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:14px;
}
.level-card{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  padding:18px 19px;border-radius:var(--radius);min-height:196px;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t),background var(--t);
}
.level-card:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-lg);border-color:var(--glass-border-strong);}
.lv-ghost{
  position:absolute;right:6px;bottom:-20px;
  font-family:var(--font-ghost);font-size:4.2rem;font-weight:300;line-height:1;
  color:var(--text);opacity:.07;pointer-events:none;
  -webkit-text-stroke:1px currentColor;-webkit-text-fill-color:transparent;
}
.lv-code{
  font-family:var(--font-poster);font-size:1.9rem;font-weight:700;line-height:1;
  letter-spacing:.02em;color:var(--gold-700);
}
[data-theme="dark"] .lv-code{color:var(--gold-300);}
.lv-name{font-family:var(--font-display);font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.lv-de{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.lv-desc{font-size:.8rem;color:var(--text-2);line-height:1.55;}
.lv-meta{font-size:.72rem;font-weight:700;color:var(--text-3);margin-top:auto;}
.lv-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font-size:.76rem;font-weight:800;color:var(--gold-700);
}
[data-theme="dark"] .lv-go{color:var(--gold-300);}
.level-card .lt-bar{margin-top:8px;}

.level-card.is-empty{opacity:.5;}
/* Ochilgan daraja — teskari yuza (`--invert-bg`/`--invert-fg`, QOIDA 78/79) */
.level-card.is-open{
  background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg);
  box-shadow:var(--glass-shadow-lg);
}
.level-card.is-open .lv-name{color:var(--invert-fg);}
.level-card.is-open .lv-desc{color:var(--invert-fg);opacity:.74;}
.level-card.is-open .lv-code,
.level-card.is-open .lv-de,
.level-card.is-open .lv-meta,
.level-card.is-open .lv-go{color:var(--on-ink-accent);}
.level-card.is-open .lv-ghost{color:var(--invert-fg);opacity:.14;}
.level-card.is-open .lt-bar{background:rgba(160,140,100,.30);border-color:transparent;}

/* --- Ochilgan darajaning bosqichlari --- */
.course-strip{
  margin-top:18px;padding:20px;border-radius:var(--radius);
  background:var(--surface-2);border:1px dashed var(--border-strong);
  animation:stripIn .34s var(--ease) both;
}
@keyframes stripIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.cs-head{display:flex;flex-direction:column;gap:3px;margin-bottom:15px;}
.cs-kicker{font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-700);}
[data-theme="dark"] .cs-kicker{color:var(--gold-300);}
.cs-head h3{font-size:1.06rem;font-weight:800;letter-spacing:-.02em;}
.cs-hint{font-size:.8rem;color:var(--text-3);}

.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;}
.course-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  padding:17px 18px;border-radius:var(--radius);min-height:158px;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t),background var(--t);
}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-lg);border-color:var(--glass-border-strong);}
.cc-ghost{
  position:absolute;right:8px;bottom:-16px;
  font-family:var(--font-ghost);font-size:3.2rem;font-weight:300;line-height:1;
  color:var(--text);opacity:.07;pointer-events:none;
  -webkit-text-stroke:1px currentColor;-webkit-text-fill-color:transparent;
}
.cc-code{font-family:var(--font-poster);font-size:1.42rem;font-weight:700;line-height:1;color:var(--text);}
.cc-book{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.cc-meta{font-size:.78rem;color:var(--text-2);font-weight:600;}
.course-card .lt-bar{margin-top:auto;}
.course-card.is-empty{opacity:.46;}
.course-card.is-active{
  background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg);
  box-shadow:var(--glass-shadow-lg);
}
.course-card.is-active .cc-code,
.course-card.is-active .cc-meta,
.course-card.is-active .lt-val{color:var(--invert-fg);}
.course-card.is-active .cc-book,
.course-card.is-active .lt-pct,
.course-card.is-active .lt-status{color:var(--on-ink-accent);}
.course-card.is-active .cc-ghost{color:var(--invert-fg);opacity:.14;}
.course-card.is-active .lt-bar{background:rgba(160,140,100,.30);border-color:transparent;}

/* ============================================================
   11. LEKTION PLITKALARI  (ETAP 29B — "hujjat kartochkasi")

   Tuzilishi yuqoridan pastga: MONO RAQAM + holat → kicker → nom →
   hairline progress → mono hisob. Katta "arvoh" raqam olib tashlandi:
   u bezak edi, endi raqamning o'zi ma'lumot bo'lib turibdi.
   ============================================================ */
.lektion-panel{padding:24px 26px;}
.lek-chosen{
  font-family:var(--font-mono);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.lek-toggle{font-size:.76rem;}

.lek-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:12px;
}
.lek-tile{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  padding:14px 16px 13px;border-radius:var(--radius);min-height:136px;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t),background var(--t);
  /* ⚠️ `min-width:0` SHART. Grid'dagi `1fr` ustun min-content'dan kichrayolmaydi:
     «Tayyorlanmoqda» yozuvi 375 px ekranda plitkani 170 px ga cho'zib, ikkita
     ustun panelga sig'may kesilib qolardi (ETAP 29C da topildi, QOIDA 82). */
  min-width:0;
}
.lek-tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--glass-shadow-lg);
  border-color:var(--glass-border-strong);
}
.lt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;min-width:0;flex-wrap:wrap;}
.lt-nr{
  font-family:var(--font-mono);font-size:1.32rem;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--text-2);font-variant-numeric:tabular-nums;
}
.lt-kicker{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.lt-name{font-family:var(--font-display);font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.02em;min-width:0;overflow-wrap:anywhere;}
.lt-bar{
  height:3px;border-radius:2px;margin-top:auto;
  background:var(--surface-2);border:none;overflow:hidden;
}
.lt-fill{
  display:block;height:100%;border-radius:2px;
  background:var(--gold);
  transition:width .7s var(--ease);
}
.lt-val{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:7px;font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}
.lt-count b{color:var(--text-2);font-weight:700;}
.lt-pct{color:var(--gold-700);}
[data-theme="dark"] .lt-pct{color:var(--gold-300);}

/* --- HOLAT INDIKATORI: Bajarildi / Bajarilmoqda / Boshlanmagan --- */
.lt-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);
}
.lt-status::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 6px;
  background:currentColor;opacity:.55;
}
.lt-status.st-doing{color:var(--gold-700);}
[data-theme="dark"] .lt-status.st-doing{color:var(--gold-300);}
.lt-status.st-doing::before{opacity:1;animation:pulseDot 1.8s var(--ease) infinite;}
.lt-status.st-done{color:var(--art-das);}
.lt-status.st-done::before{opacity:1;}

/* To'liq o'rganilgan bo'lim */
.lek-tile.is-done{border-color:rgba(21,128,61,.35);}
.lek-tile.is-done .lt-fill{background:linear-gradient(90deg,#4ADE80,var(--art-das));}

.lek-tile.is-active{
  background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg);
  box-shadow:var(--glass-shadow-lg);
}
.lek-tile.is-active .lt-name,
.lek-tile.is-active .lt-nr,
.lek-tile.is-active .lt-count b,
.lek-tile.is-active .lt-val{color:var(--invert-fg);}
.lek-tile.is-active .lt-pct,
.lek-tile.is-active .lt-kicker,
.lek-tile.is-active .lt-status{color:var(--on-ink-accent);}
.lek-tile.is-active .lt-bar{background:rgba(160,140,100,.30);border-color:transparent;}
.lek-tile.is-active .lt-fill{background:var(--gold);}
.lek-tile.is-empty{opacity:.42;}

/* "Hammasi" plitkasi — kengroq, chap qirrasida qizil signal chizig'i */
.lek-tile.lek-all{
  grid-column:span 2;min-height:136px;
  border-color:var(--border-strong);
  box-shadow:inset 3px 0 0 var(--red),var(--glass-shadow);
}
.lek-tile.lek-all:hover{box-shadow:inset 3px 0 0 var(--red),var(--glass-shadow-lg);}
.lek-tile.lek-all.is-active{background:var(--invert-bg);}
.lek-tile.lek-all .lt-name{font-size:1.22rem;}
.lek-tile.lek-all .lt-nr{color:var(--red);}
.lek-tile.lek-all.is-active .lt-nr{color:var(--on-ink-accent);}

.lek-hint{
  margin-top:16px;font-size:.86rem;color:var(--text-3);
  text-align:center;padding:14px;border-radius:var(--radius);
  background:var(--surface-2);border:1px dashed var(--border);
}

/* ============================================================
   12. QIDIRUV + FILTERLAR
   ============================================================ */
.search-box{
  display:flex;align-items:center;gap:11px;
  padding:13px 16px;border-radius:var(--radius);margin-bottom:14px;
  transition:border-color var(--t),box-shadow var(--t);
}
/* Fokus — QIZIL (SIGNAL: "hozir shu yerda ishlayapsiz"), oltin emas */
.search-box:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(179,18,43,.13);}
[data-theme="dark"] .search-box:focus-within{box-shadow:0 0 0 3px rgba(217,69,91,.20);}
.search-ico{width:17px;height:17px;color:var(--text-3);}
.search-box:focus-within .search-ico{color:var(--red);}
.search-box input{flex:1;border:none;background:none;outline:none;font-size:.96rem;min-width:0;}
.search-box input::placeholder{color:var(--text-3);}
.clear-btn{
  width:26px;height:26px;border-radius:var(--radius-pill);display:grid;place-items:center;
  color:var(--text-3);opacity:0;
  transition:background var(--t),color var(--t),opacity var(--t);
}
.search-box.has-text .clear-btn{opacity:1;}
.clear-btn:hover{background:var(--red);color:var(--on-accent);}

.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:9px;}
.filter-row:last-child{margin-bottom:0;}
.filter-label{
  font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--text-3);margin-right:4px;
}
.spacer{flex:1;}
.chip{
  display:inline-flex;align-items:center;gap:7px;   /* ikonkali chiplar uchun (29E) */
  padding:7px 15px;border-radius:var(--radius-pill);
  font-size:.79rem;font-weight:500;color:var(--text-2);
  box-shadow:none;
  transition:color var(--t),background var(--t),border-color var(--t);
}
.chip:hover{color:var(--text);border-color:var(--border-strong);}
.chip.is-active{color:var(--invert-fg);background:var(--invert-bg);border-color:var(--invert-bg);}
.chip.ghost{background:var(--surface-2);}
.chip.danger:hover{background:var(--red);color:var(--on-accent);border-color:var(--red);}

/* KO'RINISH ALMASHTIRGICHI — uchta chip bitta segment bo'lib turadi
   (radio tugmalar hissi: bir vaqtda faqat bittasi yonadi). */
.seg{
  display:inline-flex;gap:0;padding:2px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);
}
.seg .chip{background:none;border-color:transparent;box-shadow:none;padding:6px 14px;}
.seg .chip:hover{background:none;border-color:transparent;color:var(--text);transform:none;}
.seg .chip.is-active{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg);}
.seg .chip:active{transform:none;}

/* Artikel filtri — SEMANTIK rangida (vizual xotira).
   ⚠️ Gradient olib tashlandi, RANG o'zgarmadi — endi sof --art-* qiymati. */
.chip[data-artikel="der"].is-active{background:var(--art-der);border-color:var(--art-der);color:var(--on-accent);}
.chip[data-artikel="die"].is-active{background:var(--art-die);border-color:var(--art-die);color:var(--on-accent);}
.chip[data-artikel="das"].is-active{background:var(--art-das);border-color:var(--art-das);color:var(--on-accent);}

/* NATIJA QATORI — chapda mono son, o'ngda bo'lim nomi.
   Ustidagi hairline uni paneldan ajratib turadi (hujjat hissi). */
.result-bar{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;
  margin:16px 2px 14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--text-3);font-weight:600;
}
.rc-num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.94rem;font-weight:700;color:var(--text);margin-right:3px;
}
#lektionTitle{
  font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.src-info{font-size:.8rem;color:var(--text-3);margin-top:8px;}

/* ============================================================
   13. SO'Z KARTALARI  (ETAP 29B)

   Karta — lug'at MAQOLASI, bezakli plitka emas. Shuning uchun:
     · tepada hairline "rail": Lektion raqami (mono) va so'z turi;
     · chap qirrada artikel rangi (SEMANTIK, QOIDA 73);
     · gradient/yaltirash YO'Q — faqat tekis yuza va bo'shliq.
   ============================================================ */
.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}

.word-card{
  padding:16px 18px 18px;border-radius:var(--radius-lg);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  /* QOIDA 59 — ekrandan tashqaridagi kartalar chizilmaydi. 580 ta karta
     (har birida 3 ta SVG) shu qoidasiz sezilarli sekinlashadi. */
  content-visibility:auto;
  contain-intrinsic-size:auto 300px;
}
/* Kirish animatsiyasi faqat birinchi kartalarda — 1175 ta animatsiya sahifani qotiradi */
.word-card.anim{animation:fadeUp .45s var(--ease) both;}
.word-card:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow-lg);border-color:var(--glass-border-strong);}
.word-card:active{transform:translateY(0);transition-duration:.06s;}

/* O'RGANILGAN — fon o'zgarmaydi (gradient qaytarilmaydi), faqat
   yashil hairline va o'ng yuqoridagi kichik belgi. */
.word-card.is-learned{border-color:rgba(21,128,61,.34);}
.word-card.is-learned::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--art-das);
  border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);
  pointer-events:none;
}

/* Artikel bo'yicha chap chekka rangi — der/die/das bir qarashda ko'rinadi */
.word-card[data-art="der"],.word-card[data-art="die"],.word-card[data-art="das"]{padding-left:21px;}
.word-card[data-art]::marker{content:none;}
.word-card[data-art="der"]{box-shadow:inset 3px 0 0 var(--art-der),var(--glass-shadow);}
.word-card[data-art="die"]{box-shadow:inset 3px 0 0 var(--art-die),var(--glass-shadow);}
.word-card[data-art="das"]{box-shadow:inset 3px 0 0 var(--art-das),var(--glass-shadow);}
.word-card[data-art="der"]:hover{box-shadow:inset 3px 0 0 var(--art-der),var(--glass-shadow-lg);}
.word-card[data-art="die"]:hover{box-shadow:inset 3px 0 0 var(--art-die),var(--glass-shadow-lg);}
.word-card[data-art="das"]:hover{box-shadow:inset 3px 0 0 var(--art-das),var(--glass-shadow-lg);}

/* Kartaning "kolontituli": Lektion + so'z turi */
.wc-rail{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:11px;border-bottom:1px solid var(--border);
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.wc-lek{font-family:var(--font-mono);letter-spacing:.08em;}
.wc-type{color:var(--text-2);}

.wc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.wc-word{
  font-family:var(--font-display);font-size:1.24rem;font-weight:800;
  letter-spacing:-.025em;line-height:1.3;min-width:0;overflow-wrap:anywhere;
}
.artikel{font-weight:900;}
.art-der{color:var(--art-der);}
.art-die{color:var(--art-die);}
.art-das{color:var(--art-das);}

/* Amal tugmalari — chegarasiz, faqat ikonka. Yuza faqat hover'da chiqadi:
   kartada uchta qutichaning turishi "shovqin" edi. */
.wc-actions{display:flex;gap:2px;flex:0 0 auto;}
.wc-btn{
  width:30px;height:30px;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:none;border-color:transparent;box-shadow:none;color:var(--text-3);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.wc-btn .ic{width:16px;height:16px;}
.wc-btn:hover{background:var(--surface-2);border-color:var(--border);color:var(--text);transform:none;}
.wc-btn.on-fav{color:var(--red);}
.wc-btn.on-fav .ic{fill:currentColor;}
.wc-btn.on-learn{color:var(--art-das);}

.wc-meta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 11px;}
.tag{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.tag.type{color:var(--text-2);border-color:var(--border-strong);}
.tag.ipa{font-family:var(--font-mono);text-transform:none;letter-spacing:0;}
.tag.plural{color:var(--art-plural);border-color:rgba(138,90,11,.32);}

.wc-uz{font-size:1.02rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.wc-en{font-size:.85rem;color:var(--text-2);}
.wc-sentence{
  margin-top:12px;padding:10px 13px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  border-left:2px solid var(--border-strong);
  font-size:.85rem;line-height:1.65;color:var(--text-2);
}
.wc-sentence b{color:var(--text);font-weight:600;}
.wc-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:12px;gap:8px;}
.wc-link{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);display:inline-flex;gap:6px;align-items:center;
  transition:color var(--t),gap var(--t);
}
.wc-link::after{content:"→";font-weight:700;}
.word-card:hover .wc-link{color:var(--red);gap:9px;}

/* ============================================================
   14. RO'YXAT (TABLE)
   ============================================================ */
.words-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem;}
/* Telefonda jadval o'z ichida gorizontal suriladi — ilgari `overflow-x:hidden`
   turgani uchun oxirgi ustunlar KESILIB qolardi (ETAP 29B da topildi). */
.table-wrap{
  border-radius:var(--radius);overflow:auto;max-height:none;
  -webkit-overflow-scrolling:touch;
}
.words-table{min-width:640px;}
.words-table th{
  text-align:left;padding:12px 16px;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--text-3);font-weight:800;
  background:var(--surface-2);border-bottom:1px solid var(--border-strong);
  position:sticky;top:0;z-index:2;
}
.words-table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
.words-table tr:last-child td{border-bottom:none;}
.words-table tbody tr{transition:background var(--t);cursor:pointer;}
.words-table tbody tr:hover{background:var(--surface-2);}
.tbl-word{font-weight:700;font-size:.95rem;}
.tbl-en{color:var(--text-2);}
.tbl-typ{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:700;}
.tbl-lek{font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);font-variant-numeric:tabular-nums;}
.tbl-act{white-space:nowrap;text-align:right;}

/* Qatorning chap qirrasi — artikel rangi (kartadagi bilan bir xil til) */
.words-table tbody tr[data-art="der"] .tbl-word{box-shadow:inset 3px 0 0 var(--art-der);}
.words-table tbody tr[data-art="die"] .tbl-word{box-shadow:inset 3px 0 0 var(--art-die);}
.words-table tbody tr[data-art="das"] .tbl-word{box-shadow:inset 3px 0 0 var(--art-das);}
.words-table tbody tr[data-art] .tbl-word{padding-left:19px;}

/* O'rganilgan qator — fon emas, chap chekkadagi yashil belgi */
.words-table tr.is-learned td:last-child{box-shadow:inset -3px 0 0 var(--art-das);}
.words-table tr.is-learned .tbl-word{color:var(--text-2);}

.tbl-mini-btn{
  width:28px;height:28px;border-radius:var(--radius-pill);
  display:inline-grid;place-items:center;vertical-align:middle;
  background:none;border:1px solid transparent;color:var(--text-3);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.tbl-mini-btn .ic{width:15px;height:15px;}
.tbl-mini-btn:hover{background:var(--surface);border-color:var(--border);color:var(--text);}
.tbl-mini-btn.on-fav{color:var(--red);}
.tbl-mini-btn.on-fav .ic{fill:currentColor;}
.tbl-mini-btn.on-learn{color:var(--art-das);}

/* ============================================================
   15. FLASHCARD
   ============================================================ */
.flash-stage{display:flex;flex-direction:column;align-items:center;gap:18px;padding:6px 0 26px;}
.flash-card{width:min(560px,100%);height:330px;perspective:1600px;cursor:pointer;}
.flash-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--ease);}
.flash-card.flipped .flash-inner{transform:rotateY(180deg);}
.flash-face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--radius-lg);padding:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
}
/* Orqa tomon — gradient EMAS: tekis ikkinchi yuza + qizil yuqori chiziq
   (SIGNAL: "kartaning teskari tomoni" belgisi). */
.flash-face.back{transform:rotateY(180deg);background:var(--surface-2);}
.flash-face.back::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);
  border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);
}
.flash-corner{
  position:absolute;top:14px;left:18px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.flash-word{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.6rem);font-weight:800;letter-spacing:-.035em;}
.flash-ipa{font-family:var(--font-mono);color:var(--text-3);font-size:.95rem;}
.flash-hint{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-3);
}
.flash-uz{font-size:clamp(1.3rem,4vw,2rem);font-weight:800;color:var(--text);}
.flash-en{color:var(--text-2);}
.flash-def{font-size:.85rem;color:var(--text-2);max-width:420px;}
.flash-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.flash-sep{width:1px;height:22px;background:var(--border-strong);margin:0 4px;}
.btn.icon-only{padding:10px;width:40px;justify-content:center;}
.btn.icon-only .ic{width:17px;height:17px;}
.btn.on-fav{color:var(--red);border-color:rgba(179,18,43,.35);}
.btn.on-fav .ic{fill:currentColor;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius-pill);
  font-size:.87rem;font-weight:600;color:var(--text);
  box-shadow:none;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.btn:hover{border-color:var(--border-strong);background:var(--surface-2);}
/* ★ ASOSIY HARAKAT — QIZIL. Butun saytda ma'nosi bitta: "shu yerdan boshla".
   Qizil boshqa hech qayerda katta maydonda ishlatilmaydi. */
.btn.primary{color:var(--on-accent);background:var(--red);border-color:var(--red);}
.btn.primary:hover{background:var(--red-600);border-color:var(--red-600);}
[data-theme="dark"] .btn.primary:hover{background:var(--red-300);border-color:var(--red-300);color:#1A1712;}
/* Oltin — faqat yutuq/progress bilan bog'liq harakat uchun */
.btn:disabled{opacity:.4;cursor:not-allowed;}
.flash-counter{
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-3);
  font-weight:600;font-variant-numeric:tabular-nums;padding:0 6px;
}
.flash-counter b{color:var(--text);font-weight:700;}

/* ============================================================
   16. O'YINLAR  (ETAP 29D — "mashq varaqasi")

   Lug'at va Grammatika bilan bir xil mantiq: emoji yo'q, gradient yo'q,
   yaltiroq yo'q. O'yinni RAQAM (01…12) va bitta so'zli yorliq
   («Test · Yozma · Juftlik · Karta · Mashq · Tinglash») aytadi.
   Rang tili o'zgarmaydi:
     · qizil  — signal (tanlanayotgan variant, xato)
     · oltin  — faqat progress va natija halqasi
     · yashil (--art-das) — to'g'ri javob
   ============================================================ */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-bottom:22px;}
.game-card{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  padding:16px 18px 18px;border-radius:var(--radius-lg);
  /* grid ustuni min-content'dan kichrayolmaydi — 375 px da kesilib qolmasin
     (QOIDA 83) */
  min-width:0;
}
/* Kartaning "kolontituli" — Lektion plitkasi va grammatika kartasi bilan bir xil */
.gm-rail{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.gm-nr{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.18rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--text-2);
}
.gm-kind{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.gm-name{font-family:var(--font-display);font-size:1.04rem;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.3;}
.gm-desc{font-size:.82rem;color:var(--text-3);line-height:1.6;}

.game-stage{min-height:420px;}
.game-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.game-head h3{font-size:1.12rem;font-weight:800;min-width:0;display:flex;align-items:baseline;gap:9px;}
/* O'yin sarlavhasidagi tartib raqami — kartadagi `01…12` bilan bir xil */
.gt-nr{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.86rem;font-weight:700;color:var(--text-3);letter-spacing:.02em;
}
/* Random Word — karta Lug'atdagi bilan aynan bir xil, faqat markazda */
.random-stage{max-width:620px;margin:0 auto;}
.random-stage .word-card{animation:popIn .4s var(--ease);}
.game-meta{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
/* HISOB YORLIG'I (ETAP 29C) — neytral yuza, RAQAM esa mono va rangli.
   Ilgari butun yorliq yashil fonda edi: uchtasi yonma-yon turganda
   "svetofor" bo'lib ko'rinardi va hisobning o'zi ko'rinmay ketardi. */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.pill b{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--text-2);
}
.pill.ok b{color:var(--art-das);}
.pill.danger b{color:var(--red);}

.game-track{height:6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;margin-bottom:22px;}
/* Progress — oltin, lekin TEKIS (gradient 29D da olib tashlandi) */
.game-track-fill{height:100%;width:0;background:var(--gold);transition:width .4s var(--ease);}
.game-body{min-height:300px;}

.q-prompt{text-align:center;margin-bottom:26px;}
.q-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-3);font-weight:800;margin-bottom:10px;}
.q-word{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.6rem);font-weight:800;letter-spacing:-.035em;}
.q-sub{color:var(--text-2);font-size:.92rem;margin-top:8px;}
.q-def{
  max-width:660px;margin:0 auto;padding:20px 24px;border-radius:var(--radius);
  font-size:1rem;line-height:1.7;color:var(--text-2);
}

.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;max-width:820px;margin:0 auto;}
.opt{
  padding:14px 18px;border-radius:var(--radius);text-align:left;
  font-size:.94rem;font-weight:600;
  transition:transform var(--t),border-color var(--t),background var(--t),box-shadow var(--t);
}
/* Fokus QIZIL — "hozir shu variantni tanlayapsiz" (SIGNAL) */
.opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--red);box-shadow:var(--glass-shadow-lg);}

/* Harfli variant — endi GRAMMATIKA va O'YINLARDA bir xil (ETAP 29D).
   Ilgari `display:flex` faqat `.gram-test .opt` da edi, chunki o'yin variantining
   ichida `<span class="artikel">der</span> Wort` yalang'och turardi va flex uni
   ikkiga ajratib yuborardi. Endi o'yin variantlari ham `.opt-text` ichida —
   artikel bilan so'z bitta oqimda qoladi. */
.opt{display:flex;align-items:center;gap:12px;}
/* Variant harfi — mono katakcha (imtihon varaqasi hissi) */
.opt-key{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.opt-text{flex:1;min-width:0;}
.opt:hover:not(:disabled) .opt-key{border-color:var(--border-strong);color:var(--text-2);}
.opt.correct{background:rgba(21,128,61,.14);border-color:var(--art-das);color:var(--art-das);}
.opt.wrong{background:var(--red-100);border-color:var(--red);color:var(--red);}
.opt.correct .opt-key{background:var(--art-das);border-color:var(--art-das);color:var(--on-accent);}
.opt.wrong .opt-key{background:var(--red);border-color:var(--red);color:var(--on-accent);}
.opt:disabled{cursor:default;}

.answer-form{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:520px;margin:0 auto;}
.answer-input{
  width:100%;padding:15px 20px;border-radius:16px;
  font-size:1.05rem;text-align:center;outline:none;transition:all var(--t);
}
/* Fokus QIZIL — qidiruv qutisi bilan bir xil til (ETAP 29B/29D) */
.answer-input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-100);}
.answer-input.correct{border-color:var(--art-das);background:rgba(21,128,61,.14);}
.answer-input.wrong{border-color:var(--red);background:var(--red-100);}
.feedback{min-height:46px;text-align:center;font-weight:700;font-size:.94rem;}
.feedback .ic{width:17px;height:17px;vertical-align:-.22em;margin-right:4px;}
.feedback.ok{color:var(--art-das);}
.feedback.no{color:var(--red);}
.feedback small{display:block;font-weight:500;color:var(--text-3);margin-top:4px;}

.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:0 auto;}
.match-col{display:flex;flex-direction:column;gap:10px;}
.match-item{
  padding:13px 17px;border-radius:14px;text-align:left;
  font-size:.9rem;font-weight:600;transition:all var(--t);
}
/* Tanlangan juftlik — QIZIL signal (oltin fon 29D da olib tashlandi: oltin endi
   faqat progress va yutuq uchun, QOIDA 74). Fon bo'yalmaydi — ichidagi artikel
   rangi o'z kuchida qoladi (QOIDA 73). */
.match-item:hover:not(:disabled){border-color:var(--red);transform:translateX(3px);}
.match-item.selected{
  border-color:var(--red);box-shadow:inset 2px 0 0 var(--red);
  background:var(--surface-2);
}
.match-item.done{
  cursor:default;opacity:.55;
  border-color:rgba(21,128,61,.34);color:var(--text-3);
}
.match-item.shake{animation:shake .4s;}

.memory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;max-width:760px;margin:0 auto;}
.mem-card{aspect-ratio:3/4;border-radius:var(--radius-sm);perspective:1000px;background:none;border:none;padding:0;}
/* ⚠️ `display:block` SHART — `.mem-inner` bu `<span>`, inline element esa
   `width/height:100%` ni MENSIMAYDI. Shu sababli ikkala yuz ham kartaning
   o'rniga 22 px lik qutiga qisilib, matn chetdan kesilib turgan edi
   (ETAP 29D da 375 px sinovida o'lchab topildi — QOIDA 83). */
.mem-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s var(--ease);}
.mem-card.flipped .mem-inner,.mem-card.matched .mem-inner{transform:rotateY(180deg);}
.mem-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius-sm);
  display:grid;place-items:center;padding:10px;text-align:center;
  font-size:.82rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere;
}
/* Yopiq karta — gradient emas: neytral yuza + mono tartib raqami (ETAP 29D).
   Raqam kartani "sanaladigan" qiladi va oltin yaltirashni almashtiradi. */
.mem-face.front{
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-3);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.92rem;font-weight:700;letter-spacing:.06em;
}
.mem-card:hover .mem-face.front{border-color:var(--border-strong);color:var(--text-2);}
.mem-face.back{transform:rotateY(180deg);}
.mem-card.matched .mem-face.back{border-color:rgba(21,128,61,.42);color:var(--art-das);}

/* Tinglash tugmasi — gradient va oltin yog'du o'rniga tekis to'q yuza
   (grammatika audio pleyeri bilan bir xil tizim, QOIDA 78/79). */
.audio-btn{
  width:76px;height:76px;border-radius:var(--radius-pill);display:grid;place-items:center;
  margin:0 auto 18px;
  background:var(--invert-bg);color:var(--invert-fg);border:1px solid var(--invert-bg);
  transition:transform var(--t),background var(--t),border-color var(--t);
}
.audio-btn .ic{width:28px;height:28px;}
.audio-btn:hover{transform:scale(1.05);background:var(--red);border-color:var(--red);color:var(--on-accent);}
.audio-btn:active{transform:scale(.97);}
.speak-btn{
  width:32px;height:32px;border-radius:var(--radius-pill);display:grid;place-items:center;
  font-size:.85rem;color:var(--text-2);
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.speak-btn .ic{width:16px;height:16px;}
.speak-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong);}

.game-result{text-align:center;padding:40px 20px;}
.result-ring{
  --p:0%;
  width:150px;height:150px;border-radius:50%;margin:0 auto 22px;
  display:grid;place-items:center;position:relative;
  font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.04em;
  background:conic-gradient(var(--gold) var(--p),rgba(20,22,26,.09) 0);
}
[data-theme="dark"] .result-ring{background:conic-gradient(var(--gold) var(--p),rgba(255,255,255,.09) 0);}
.result-ring::after{
  content:"";position:absolute;inset:13px;border-radius:50%;
  background:var(--glass-strong);box-shadow:var(--glass-edge);
}
.result-ring span{position:relative;z-index:1;}
.result-title{font-size:1.45rem;font-weight:800;margin-bottom:8px;}
.result-sub{color:var(--text-2);margin-bottom:14px;}
/* Yakuniy hisob — raqamlar mono, ular orasida hairline (ETAP 29C) */
.result-score{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;
  font-size:.84rem;color:var(--text-3);
}
.result-score b{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.02rem;font-weight:700;margin-right:4px;
}
.result-score .rs-ok b{color:var(--art-das);}
.result-score .rs-no b{color:var(--red);}
.result-score .rs-sep{width:1px;height:16px;background:var(--border-strong);}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.result-actions .btn .ic{width:16px;height:16px;}
.miss-list{
  margin-top:30px;text-align:left;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);
}
.miss-list h4{padding:12px 16px;background:var(--surface-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);}
.miss-row{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--border);font-size:.88rem;}
.miss-row b{font-weight:700;}

/* ============================================================
   17. GRAMMATIKA  (ETAP 29C — "darslik sahifasi")

   Mantiq Lug'at bo'limi bilan bir xil: emoji yo'q, gradient yo'q, rangli
   fon yo'q. Blokning TURINI rangli fon emas — tipografik yorliq (`.gb-tag`)
   va chap qirradagi 2px chiziq aytadi. Rang tili o'zgarmaydi:
     · qizil  — signal (CTA, ogohlantirish, faol holat)
     · oltin  — yutuq / maslahat
     · der/die/das — SEMANTIK, tegilmaydi (QOIDA 73)
   ============================================================ */
.gram-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.gram-card{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  padding:16px 18px 18px;border-radius:var(--radius-lg);
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
}
/* ⚠️ `::before` BAND — chapdagi aksent chizig'i (QOIDA 76).
   Shuning uchun 4B-bo'limdagi "yuqori qirradagi qizil chiziq" bu kartani
   chetlab o'tadi; hover ko'tarilish va soya orqali ishlaydi. */
.gram-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:var(--border-strong);
}
.gram-card.done::before{background:var(--art-das);}
.gram-card.done{border-color:rgba(21,128,61,.30);}

/* Kartaning "kolontituli": tartib raqami + holat (Lektion plitkasi bilan bir xil til) */
.gc-rail{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.gc-nr{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.18rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--text-2);
}
.gc-de{font-family:var(--font-display);font-size:1.04rem;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.3;}
.gc-uz{font-size:.88rem;font-weight:600;color:var(--text-2);}
.gc-short{font-size:.82rem;color:var(--text-3);line-height:1.6;}
.gc-foot{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--border);
}
.gc-meta{font-size:.7rem;font-weight:600;color:var(--text-3);}
.gc-meta b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:700;}
.gc-score{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.71rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.gc-score.good{border-color:rgba(21,128,61,.32);color:var(--art-das);}

/* --- Mavzu tafsiloti --- */
.gram-topic{padding:28px 30px 32px;}
.g-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px;flex-wrap:wrap;}
.g-head-text{flex:1;min-width:0;}
.g-head-text h2{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.25;}
.g-head-text p{font-size:.95rem;color:var(--text-2);font-weight:600;margin-top:4px;}
.g-head .icon-btn .ic{width:17px;height:17px;}

/* Nafas oldiruvchi "breadcrumb" — o'quvchi qayerdaligini bilib turadi */
.g-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.g-crumb span.sep{opacity:.45;}
.g-crumb b{color:var(--text-2);font-weight:800;}

.g-intro{
  font-size:1rem;line-height:1.75;color:var(--text-2);
  padding:16px 20px;border-radius:var(--radius);
  background:var(--glass-2);border:1px solid var(--glass-border);
  border-left:2px solid var(--border-strong);
  margin-bottom:22px;
}
.g-block{margin-bottom:20px;}

/* BLOK SARLAVHASI — yorliq + nom. Yorliq blokning turini SO'Z bilan aytadi
   (ilgari bu vazifani 📌 💡 ⚠️ emojilari bajarardi). */
.gb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.gb-tag{
  font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
  white-space:nowrap;
}
.gb-tag.gb-tip{color:var(--gold-700);border-color:rgba(201,162,39,.42);}
[data-theme="dark"] .gb-tag.gb-tip{color:var(--gold-300);}
.gb-tag.gb-warn,.gb-tag.gb-test{color:var(--red);border-color:rgba(179,18,43,.34);}
/* Dark'da `--red` yorug' fonda emas, TO'Q fonda turadi — kontrast uchun
   bir pog'ona ochiq tus (`--red-300`) olinadi: 3.8 → 5.8 (QOIDA 78). */
[data-theme="dark"] .gb-tag.gb-warn,
[data-theme="dark"] .gb-tag.gb-test{color:var(--red-300);border-color:rgba(217,69,91,.38);}
.gb-head .g-h{margin-bottom:0;}

.g-h{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:10px;}
.g-h .speak-btn{display:inline-grid;vertical-align:middle;margin-left:8px;}
.gb-head .speak-btn{margin-left:0;}
.g-body{font-size:.95rem;line-height:1.8;color:var(--text-2);}
.g-body b{color:var(--text);font-weight:700;}
.g-body s{color:var(--red);}

/* Izohli bloklar — bitta material, farq faqat CHAP QIRRADAGI 2px chiziqda */
.g-note{
  padding:16px 20px;border-radius:var(--radius);
  border:1px solid var(--glass-border);background:var(--glass-2);
  border-left:2px solid var(--border-strong);
}
.g-rule{border-left-color:var(--ink-3);}
.g-tip{border-left-color:var(--gold);}
.g-warn{border-left-color:var(--red);}

/* Jadval — QOIDA 82: sahifa emas, blokning O'ZI suriladi */
.g-table-wrap{-webkit-overflow-scrolling:touch;}
.g-table{width:100%;min-width:480px;border-collapse:collapse;font-size:.9rem;}
.g-table th{
  text-align:left;padding:11px 16px;white-space:nowrap;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--text-3);font-weight:800;
  border-bottom:1px solid var(--border-strong);background:var(--surface-2);
}
.g-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-2);line-height:1.6;vertical-align:top;}
.g-table tr:last-child td{border-bottom:none;}
.g-table tbody tr{transition:background var(--t);}
.g-table tbody tr:hover{background:var(--surface-2);}
.g-table b{color:var(--text);font-weight:800;}
.g-table s{color:var(--red);}

.g-ex{display:flex;flex-direction:column;gap:8px;}
.g-ex-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 15px;border-radius:var(--radius-sm);
  background:var(--glass-2);border:1px solid var(--glass-border);
  border-left:2px solid var(--border-strong);
  transition:border-color var(--t);
}
.g-ex-row:hover{border-left-color:var(--red);}
.g-ex-row .g-ex-text{flex:1;min-width:0;}
.g-de{display:block;font-weight:700;color:var(--text);}
.g-uz{display:block;font-size:.86rem;color:var(--text-3);margin-top:3px;}

.g-story{border-left-color:var(--ink-3);padding:18px 22px;}
.g-story-de{font-size:.98rem;line-height:1.85;color:var(--text);}
.g-story-uz{font-size:.88rem;line-height:1.75;color:var(--text-3);margin-top:12px;}
.g-story-note{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:.84rem;color:var(--text-2);line-height:1.7;
}
.g-note-small{font-size:.8rem;color:var(--text-3);margin-bottom:0;line-height:1.6;}
.g-note-small b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-2);}

/* ✅ / ❌ BELGILARI — ma'nosi o'sha, ko'rinishi endi SVG (ETAP 29C).
   Kitob mantiqi saqlanadi: yashil belgi — "shunday to'g'ri",
   qizil belgi — "shunday yozilmaydi" (yonida `<s>` chizilgan shakl turadi). */
.gm{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.2em;}
.gm .ic{width:15px;height:15px;stroke-width:2.4;}
.gm-ok{color:var(--art-das);}
.gm-no{color:var(--red);}
[data-theme="dark"] .gm-no{color:var(--red-300);}   /* to'q fonda bir pog'ona ochiq */
.gm-imp{color:var(--red);font-weight:800;padding:0 3px;vertical-align:baseline;}
.gm-to{color:var(--text-3);padding:0 3px;vertical-align:baseline;}

/* --- der / die / das — matn ichida avtomatik rangli --- */
.gd{font-weight:800;}
.gd-der{color:var(--art-der);}
.gd-die{color:var(--art-die);}
.gd-das{color:var(--art-das);}

/* Jinslar uchun rang kalitini ko'rsatuvchi qatorcha */
.gender-key{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:18px;padding:10px 14px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border);
}
.gk-label{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.gk{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:800;padding:3px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
}
.gk::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.gk.der{color:var(--art-der);}
.gk.die{color:var(--art-die);}
.gk.das{color:var(--art-das);}

/* ============================================================
   18. AUDIO PLEYER (SpeechSynthesis) — ETAP 29C da tekislandi
   Nemis tili saytlariga xos: dars matni + ovoz birga turadi.
   ⚠️ Gradient va `color:#fff` olib tashlandi — "tanlangan" holat endi
   `--invert-bg`/`--invert-fg` juftligida (QOIDA 78, 79).
   ============================================================ */
.audio-player{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-radius:var(--radius);margin-bottom:22px;
  background:var(--glass-2);border:1px solid var(--glass-border);
}
.ap-play{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  background:var(--invert-bg);color:var(--invert-fg);border:1px solid var(--invert-bg);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.ap-play .ic{width:19px;height:19px;}
.ap-play:hover{transform:translateY(-1px);}
.ap-play.is-playing{background:var(--red);border-color:var(--red);color:var(--on-accent);}
.ap-text{display:flex;flex-direction:column;min-width:0;flex:1;}
.ap-title{font-size:.85rem;font-weight:800;color:var(--text);}
.ap-sub{font-size:.72rem;color:var(--text-3);}
.ap-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ap-rate{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.71rem;font-weight:700;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.ap-rate:hover{border-color:var(--border-strong);color:var(--text);}
.ap-rate.is-active{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg);}

/* Ovoz to'lqini — o'qib turganda jonlanadi (faol holat = qizil) */
.ap-wave{display:flex;align-items:flex-end;gap:3px;height:20px;flex:0 0 auto;}
.ap-wave i{
  width:3px;height:5px;border-radius:2px;background:var(--text-3);opacity:.45;
  transition:height .2s var(--ease);
}
.audio-player.playing .ap-wave i{background:var(--red);opacity:1;animation:wave 1s var(--ease) infinite;}
.audio-player.playing .ap-wave i:nth-child(2){animation-delay:.12s;}
.audio-player.playing .ap-wave i:nth-child(3){animation-delay:.24s;}
.audio-player.playing .ap-wave i:nth-child(4){animation-delay:.36s;}
.audio-player.playing .ap-wave i:nth-child(5){animation-delay:.48s;}

/* ============================================================
   19. VIDEODARSLAR
   ============================================================ */
.g-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
.g-video{
  display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--glass-border);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.g-video:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--glass-shadow-lg);}

/* Ko'rib turgan rasm (YouTube thumbnail).
   ⚠️ Fon `--ink` EMAS: dark rejimda u suyak rangda va rasm yuklanmasa
   katta yorug' maydon bo'lib qolardi (QOIDA 78). */
.gv-thumb{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--surface-2);
}
.gv-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.g-video:hover .gv-thumb img{transform:scale(1.04);}
.gv-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.42));
}
.gv-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;color:var(--on-accent);
  background:var(--red);
  transition:transform var(--t),background var(--t);
}
.gv-play .ic{width:20px;height:20px;margin-left:2px;}
.g-video:hover .gv-play{transform:translate(-50%,-50%) scale(1.08);background:var(--red-600);}
[data-theme="dark"] .g-video:hover .gv-play{background:var(--red-300);color:#1A1712;}
.gv-body{display:flex;align-items:center;gap:12px;padding:12px 14px;}
.gv-text{display:flex;flex-direction:column;min-width:0;flex:1;}
.gv-title{font-size:.86rem;font-weight:700;color:var(--text);line-height:1.4;}
.gv-ch{font-size:.71rem;color:var(--text-3);}
.gv-open{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.gv-open .ic{width:15px;height:15px;}
.gv-open:hover{background:var(--red);color:var(--on-accent);border-color:var(--red);}

.g-video-frame{
  grid-column:1 / -1;
  position:relative;width:100%;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg);
  background:#000;
}
.g-video-frame .gvf-ratio{position:relative;width:100%;aspect-ratio:16/9;}
.g-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.gvf-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--surface-solid);
  border-top:1px solid var(--border);
}
.gvf-note{font-size:.75rem;color:var(--text-3);flex:1;min-width:0;}
.gvf-link,.gvf-close{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.74rem;font-weight:700;padding:6px 13px;border-radius:var(--radius-pill);
}
.gvf-link .ic,.gvf-close .ic{width:14px;height:14px;}
.gvf-link{background:var(--red);color:var(--on-accent);border:1px solid var(--red);}
.gvf-link:hover{background:var(--red-600);border-color:var(--red-600);}
.gvf-close{background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);}
.gvf-close:hover{border-color:var(--border-strong);color:var(--text);}

/* Offline / file:// holatida ogohlantirish — tekis yuza, gradient yo'q */
.gv-hint{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;line-height:1.6;color:var(--text-2);
  padding:11px 15px;border-radius:var(--radius);margin-bottom:12px;
  background:var(--surface-2);border:1px solid var(--border);
}
.gv-hint .ic{width:17px;height:17px;color:var(--text-3);}

/* --- Testga chaqiruv --- */
.g-test-cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding:20px 22px;border-radius:var(--radius-lg);
  background:var(--glass-2);border:1px solid var(--glass-border);
  border-left:2px solid var(--red);
}
.gt-cta-text{min-width:0;}
.g-test-cta .gb-head{margin-bottom:6px;}

/* --- Grammatika testi --- */
.gram-test .gt-q{
  font-family:var(--font-display);
  font-size:clamp(1.08rem,2.6vw,1.45rem);font-weight:700;line-height:1.55;
  max-width:820px;margin:0 auto;
}
.gt-next-wrap{display:flex;justify-content:center;margin-top:8px;}
.gram-test .game-head h3{font-size:1rem;font-weight:700;min-width:0;}
.gram-test .icon-btn .ic{width:16px;height:16px;}
.gt-miss{padding:14px 16px;border-top:1px solid var(--border);}
.gt-miss-q{font-size:.9rem;font-weight:700;color:var(--text);}
.gt-miss-a{font-size:.88rem;color:var(--art-das);font-weight:700;margin-top:5px;}
.gt-miss-a .ic{width:15px;height:15px;vertical-align:-.2em;margin-right:3px;}
.gt-miss-e{font-size:.82rem;color:var(--text-3);margin-top:4px;line-height:1.6;}

/* ============================================================
   20. STATISTIKA  (ETAP 29E — "hisobot varaqasi")

   Emoji ikonka yo'q: katakni MONO RAQAM va tipografik yorliq aytadi.
   Gradient progress chiziqlari tekis oltinga almashtirildi — oltin
   faqat progress va yutuq uchun qoladi (QOIDA 74).
   ============================================================ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.stat-box{
  padding:14px 16px 16px;border-radius:var(--radius);
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
/* Kolontitul — o'yin kartasi va Lektion plitkasi bilan bir xil til */
.sb-rail{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid var(--border);
}
.sb-nr{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:.74rem;font-weight:700;color:var(--text-3);
}
.sb-kicker{font-size:.56rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.stat-box .sb-num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.72rem;font-weight:700;color:var(--text);letter-spacing:-.03em;line-height:1.1;
}
.stat-box .sb-label{font-size:.75rem;color:var(--text-3);font-weight:600;}
/* Ohang — faqat RAQAM bo'yaladi, katta yuza emas (QOIDA 78) */
.stat-box.is-ok   .sb-num{color:var(--art-das);}
.stat-box.is-no   .sb-num{color:var(--red);}
.stat-box.is-gold .sb-num{color:var(--gold-700);}

.progress-wrap{max-width:100%;margin:0 auto 4px;}
.progress-head{display:flex;justify-content:space-between;font-size:.82rem;color:var(--text-2);margin-bottom:8px;font-weight:700;}
.progress-head b,#progressPercent{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);
}
.progress-track{
  height:10px;border-radius:999px;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--border);
}
.progress-fill{
  height:100%;width:0%;border-radius:999px;
  background:var(--gold);
  transition:width .8s var(--ease);
}

.lektion-progress{display:flex;flex-direction:column;gap:10px;}
.lp-row{display:flex;align-items:center;gap:14px;}
.lp-name{width:110px;flex:0 0 110px;font-size:.82rem;font-weight:600;color:var(--text-3);}
.lp-name b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-2);}
.lp-track{flex:1;height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden;}
.lp-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .7s var(--ease);}
.lp-row.is-done .lp-fill{background:var(--art-das);}
.lp-val{
  width:96px;flex:0 0 96px;text-align:right;font-size:.72rem;color:var(--text-3);font-weight:600;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.lp-val b{color:var(--text-2);font-weight:700;}
.lp-row.is-done .lp-val b{color:var(--art-das);}

/* Bosqich sarlavhasi — A1.1 … B2.2 (Lektionlar shu ostida turadi) */
.lp-group{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:9px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);
}
.lp-group:first-child{margin-top:0;}
.lp-group.is-empty{opacity:.5;border-style:dashed;}
.lp-gname{font-family:var(--font-poster);font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--text);}
.lp-gmeta{font-size:.74rem;font-weight:600;color:var(--text-3);}
.danger-panel{border-color:rgba(192,24,47,.24);}

/* ============================================================
   20B. GLOBAL QIDIRUV (ETAP 52)
   ------------------------------------------------------------
   Shtorkadagi lupa yoki «/» tugmasi ochadi. Material — Signal tizimi:
   tekis yuza + hairline, gradient va shisha yo'q (QOIDA 74/89).
   Panel modal EMAS (`.modal-backdrop` dan past turadi): so'z natijasi
   bosilganda uning ustidan so'z modali ochilishi kerak.
   ============================================================ */
.gs-backdrop{
  position:fixed;inset:0;z-index:90;
  background:rgba(16,12,8,.58);
  display:grid;align-items:start;justify-items:center;
  padding:11vh 20px 20px;
  animation:fadeIn .18s var(--ease);
}
.gs-panel{
  width:min(640px,100%);max-height:76vh;
  display:flex;flex-direction:column;min-height:0;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:popIn .2s var(--ease);
}
.gs-bar{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;
  padding:13px 15px;border-bottom:1px solid var(--border);
}
.gs-ico{display:grid;place-items:center;color:var(--text-3);}
.gs-ico .ic{width:18px;height:18px;}
.gs-input{
  flex:1;min-width:0;border:none;background:none;outline:none;
  font-family:var(--font);font-size:1.02rem;color:var(--text);
}
.gs-input::placeholder{color:var(--text-3);}
.gs-clear{
  width:28px;height:28px;flex:0 0 28px;border-radius:var(--radius-pill);
  display:grid;place-items:center;color:var(--text-3);
  border:1px solid var(--border);background:var(--surface);
  transition:color var(--t),border-color var(--t);
}
.gs-clear:hover{color:var(--red);border-color:var(--border-strong);}
.gs-clear .ic{width:13px;height:13px;}

/* Natijalar — uzun ro'yxat emas: har turkumdan 8 tadan (QOIDA 59) */
.gs-results{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px;}
.gs-group{
  display:block;padding:11px 10px 5px;
  font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);
}
.gs-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 10px;border-radius:var(--radius-sm);text-align:left;
  background:none;border:1px solid transparent;
  transition:background var(--t),border-color var(--t);
}
.gs-item:hover{background:var(--surface-2);}
/* Klaviatura tanlovi — qirrada qizil chiziq (Sprachlinie tili) */
.gs-item.is-sel{background:var(--surface-2);border-color:var(--border-strong);}
.gs-item.is-sel::before{
  content:"";width:2px;height:20px;background:var(--red);
  border-radius:2px;margin-left:-6px;margin-right:2px;
}
.gs-text{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1;}
.gs-de{
  font-family:var(--font-display);font-size:.96rem;font-weight:700;
  color:var(--text);overflow-wrap:anywhere;
}
.gs-uz{font-size:.78rem;color:var(--text-3);overflow-wrap:anywhere;}
.gs-kind{
  flex:0 0 auto;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}
.gs-empty{padding:26px 16px;text-align:center;font-size:.86rem;color:var(--text-3);}
.gs-empty b{color:var(--text-2);}

.gs-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 15px;border-top:1px solid var(--border);
  font-size:.68rem;color:var(--text-3);
}
.gs-foot b{
  font-family:var(--font-mono);font-weight:500;color:var(--text-2);
  padding:1px 5px;border:1px solid var(--border);border-radius:5px;
}
.gs-foot .spacer{flex:1;}

/* Telefonda panel butun ekranni egallaydi — 375px da qirralar yo'qoladi */
@media (max-width:560px){
  .gs-backdrop{padding:0;}
  .gs-panel{width:100%;max-height:100%;height:100%;border-radius:0;border:none;}
  .gs-hint-key{display:none;}
}

/* ============================================================
   21. MODAL
   ============================================================ */
/* ETAP 29: blur olib tashlandi — fon shunchaki qoraytiriladi (tez va aniq) */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(16,12,8,.58);
  display:grid;place-items:center;padding:20px;
  animation:fadeIn .2s var(--ease);
}
.modal{
  width:min(680px,100%);max-height:86vh;overflow-y:auto;position:relative;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
  box-shadow:var(--shadow-lg);
  animation:popIn .25s var(--ease);
}
.modal-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.modal-close:hover{background:var(--red);color:var(--on-accent);border-color:var(--red);}
.modal-close .ic{width:15px;height:15px;}
.auth-cta .auth-ico .ic{width:15px;height:15px;}
/* Modal "kolontituli" — kartadagi rail bilan bir xil til (ETAP 29B) */
.md-rail{
  display:flex;align-items:center;gap:14px;
  padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--border);
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.md-rail span:first-child{font-family:var(--font-mono);letter-spacing:.08em;}
.md-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.md-word{font-family:var(--font-display);font-size:1.95rem;font-weight:800;letter-spacing:-.035em;}
.md-meta{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 20px;}
.md-meta:empty{margin:0 0 8px;}
.md-section{margin-bottom:18px;}
.md-label{
  font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;
  color:var(--text-3);margin-bottom:5px;
}
.md-value{font-size:.98rem;color:var(--text);line-height:1.65;}
.md-value.big{font-size:1.18rem;font-weight:700;color:var(--text);}
.md-quote{
  padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--glass-2);border:1px solid var(--glass-border);
  border-left:2px solid var(--border-strong);
  font-size:.95rem;line-height:1.65;
}
.md-quote .uz{display:block;margin-top:7px;color:var(--text-3);font-size:.86rem;font-style:italic;}
.md-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.md-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center;}

/* --- Ovoz sozlamalari oynasi --- */
.voice-status{
  padding:14px 18px;border-radius:var(--radius-sm);margin:6px 0 20px;
  font-size:.92rem;line-height:1.6;font-weight:600;
  border:1px solid var(--glass-border);
}
.voice-status.ok{background:rgba(21,128,61,.14);border-color:rgba(21,128,61,.30);color:var(--art-das);}
.voice-status.no{background:rgba(200,144,26,.16);border-color:var(--border-strong);color:var(--gold-700);}
[data-theme="dark"] .voice-status.no{color:var(--gold-300);}
.voice-all{font-size:.8rem;color:var(--text-3);line-height:1.85;}
.voice-all span{opacity:.65;}

/* ============================================================
   21B. HISOB / BULUTGA SAQLASH (sync.js)
   Sozlamalar bo'sh bo'lsa bu elementlar umuman yaratilmaydi.
   ============================================================ */
/* KIRMAGAN foydalanuvchi uchun — MATNLI tugma.
   Faqat 👤 ikonkasi bo'lganda o'quvchilar uni topmasdi (ETAP 29). */
.auth-cta{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:8px 16px;border-radius:var(--radius-pill);
  font-size:.82rem;font-weight:600;white-space:nowrap;
  color:var(--on-accent);background:var(--red);border:1px solid var(--red);
  transition:transform var(--t),background var(--t),border-color var(--t),box-shadow var(--t);
}
.auth-cta:hover{
  transform:translateY(-1px);
  background:var(--red-600);border-color:var(--red-600);
  box-shadow:0 6px 18px rgba(179,18,43,.28);
}
.auth-cta:active{transform:translateY(0);transition-duration:.06s;}
[data-theme="dark"] .auth-cta:hover{
  background:var(--red-300);border-color:var(--red-300);color:#1A1712;
  box-shadow:0 6px 18px rgba(217,69,91,.3);
}
.auth-cta .auth-ico{display:grid;place-items:center;line-height:1;}

/* Kirgandan keyin — ism harfi bilan yumaloq tugma */
.icon-btn.is-in{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;border-radius:50%;
  color:var(--invert-fg);background:var(--invert-bg);border-color:var(--invert-bg);
}

/* Saqlash holati — headerdagi mayda belgi */
.sync-dot{
  display:grid;place-items:center;
  width:22px;height:34px;color:var(--text-3);
  opacity:.85;cursor:default;user-select:none;
}
.sync-dot .ic{width:15px;height:15px;}
.sync-dot.st-oflayn{color:var(--red);}
.sync-dot.st-saqlanmoqda{animation:pulseDot 1.1s var(--ease) infinite;}

.auth-modal{width:min(430px,100%);padding:32px 30px;}
.auth-head{margin-bottom:20px;padding-right:34px;}
.auth-head h3{font-size:1.3rem;font-weight:800;letter-spacing:-.025em;}
.auth-head p{font-size:.86rem;color:var(--text-3);line-height:1.6;margin-top:6px;overflow-wrap:anywhere;}

.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-field span{
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.auth-field input{
  width:100%;padding:13px 16px;border-radius:14px;font-size:.98rem;outline:none;
  background:var(--glass-2);border:1px solid var(--glass-border);
  transition:border-color var(--t),box-shadow var(--t);
}
.auth-field input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,144,26,.16);}
.auth-submit{width:100%;justify-content:center;margin-top:4px;}

.auth-msg{min-height:20px;font-size:.84rem;line-height:1.55;color:var(--text-3);}
.auth-msg.ok{color:var(--art-das);font-weight:600;}
.auth-msg.no{color:var(--red);font-weight:600;}

.auth-alt{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.auth-alt button{
  font-size:.82rem;font-weight:700;color:var(--gold-700);text-align:left;
  transition:color var(--t);
}
[data-theme="dark"] .auth-alt button{color:var(--gold-300);}
.auth-alt button:hover{color:var(--text);}

.auth-note{
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--border);
  font-size:.78rem;color:var(--text-3);line-height:1.6;
}

.auth-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.auth-stats div{
  display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:var(--radius);
  background:var(--glass-2);border:1px solid var(--glass-border);
}
.auth-stats b{
  font-family:var(--font-display);font-size:1.7rem;font-weight:800;
  letter-spacing:-.035em;color:var(--text);
}
.auth-stats span{font-size:.72rem;color:var(--text-3);font-weight:600;}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap;}
.auth-actions .btn{flex:1;justify-content:center;}

/* ---------- 22. TOAST ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:200;padding:14px 26px;border-radius:999px;
  background:var(--glass-strong);color:var(--text);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  font-size:.87rem;font-weight:700;
  box-shadow:var(--glass-shadow-lg);opacity:0;transition:all var(--t);pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- 23. EMPTY STATE ---------- */
.empty-state{text-align:center;padding:70px 20px;color:var(--text-3);}
.empty-ico{font-size:3.2rem;margin-bottom:12px;opacity:.5;}
.empty-state h3{font-size:1.12rem;margin-bottom:6px;color:var(--text-2);}
.empty-state p{font-size:.9rem;}

/* ============================================================
   24. FOOTER
   ============================================================ */
.site-footer{
  position:relative;z-index:1;margin-top:40px;
  background:var(--glass);
  border-top:1px solid var(--glass-border);
  box-shadow:var(--glass-edge);
  /* ⚠️ ETAP 53C — tepadagi bo'shliq 64 → 44 px: «Platforma» ustuni
     olib tashlangach footer boshida bekorga bo'sh joy qolardi. */
  padding:44px 22px 0;overflow:hidden;
}
/* Germaniya bayrog'i — footer tepasida ingichka chiziq */
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--ink) 0 33.33%,var(--red) 33.33% 66.66%,var(--gold) 66.66% 100%);
  opacity:.65;
}
/* ⚠️ ETAP 52 — `.footer-brand`, `.footer-title`, `.footer-sub` va
   `.footer-signature` qoidalari O'CHIRILDI: «Stay Hard», «Winter is coming»
   va imzo bloki HTML dan butunlay olib tashlandi (mijoz talabi).
   Shu bilan `--font-script` tokenining oxirgi ishlatilgan joyi ham ketdi —
   token ta'rifi 2-bo'limdan olib tashlandi (QOIDA 77 yangilandi).
   ⚠️ ETAP 53C — `.footer-inner`, `.footer-cols`, `.footer-col*` va
   `.contact-section` / `.contact-row` qoidalari ham O'CHIRILDI:
   «Platforma» ustuni (Lug'at · Grammatika · Statistika) HTML dan olindi,
   murojaat ikonkalari esa eng pastki qatorning o'ng burchagiga ko'chdi
   (`.footer-social`, quyida). `.cc-dot` ning O'ZI qoladi — faqat
   o'lchami 44 → 38 px ga kichraydi. */

/* --- MUROJAAT — UCHTA KICHIK IKONKA (ETAP 52, joyi 53C da o'zgardi) ---
   Matn yo'q — nom faqat `title` va `aria-label` da (ko'rish imkoniyati
   saqlanadi). Rang FONDA emas, BELGIDA (QOIDA 89). */
.footer-social{display:flex;gap:10px;flex:0 0 auto;align-items:center;}
.cc-dot{
  width:38px;height:38px;flex:0 0 38px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--glass-shadow);
  transition:transform var(--t),border-color var(--t),background var(--t);
}
.cc-dot svg{width:17px;height:17px;display:block;fill:currentColor;}
.cc-dot.tg{color:#2AA3DC;}
.cc-dot.ig{color:#D6297B;}
.cc-dot.ph{color:var(--gold-700);}
.cc-dot:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface-2);}
.cc-dot:active{transform:translateY(0);transition-duration:.06s;}

/* Nashriyot / mualliflik eslatmasi — jiddiy platformaning imzosi (ETAP 29E).
   ⚠️ ETAP 53C — endi footer'ning BIRINCHI bloki (ustidagi havolalar ustuni
   ketdi), shuning uchun tepasidagi chiziq va bo'shliq olib tashlandi:
   bayroq chizig'ining ostiga darhol ikkinchi chiziq tushib qolardi. */
.footer-note{
  max-width:var(--maxw);margin:0 auto;
  font-size:.76rem;line-height:1.75;color:var(--text-3);
}
.footer-note b{color:var(--text-2);font-weight:700;}
.footer-note .fn-tag{
  display:inline-block;margin-right:9px;
  font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
}

/* ⚠️ ETAP 53C — eng pastki qator ikki qismga bo'lindi: chapda ustma-ust
   © va shior (`.fb-text`), O'NG BURCHAKDA murojaat ikonkalari.
   `align-items:flex-end` — ikonkalar matnning oxirgi qatori bilan bir
   sathda, ya'ni haqiqiy "burchak" hissi beradi. */
.footer-bottom{
  max-width:var(--maxw);margin:26px auto 0;padding:20px 0 26px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:18px;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-3);
}
.fb-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
.footer-bottom .fb-year{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.footer-motto{font-family:var(--font-elegant);font-style:italic;font-size:.86rem;}
/* Muallif imzosi — eng pastki qatorda, eng kichik va eng xira yozuv.
   Ism `--text-2` da, «Erstellt von» esa `--text-3` da: ko'z ismga tushadi,
   lekin blok umumiy ohangdan ajralib turmaydi (QOIDA 74). */
.fb-sign{font-size:.74rem;color:var(--text-3);letter-spacing:.01em;}
.fb-sign b{font-weight:600;color:var(--text-2);}

/* ============================================================
   25. ANIMATSIYALAR
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes wave{0%,100%{height:5px}50%{height:18px}}

/* ============================================================
   26. RESPONSIVE — telefonda ham xuddi kompyuterdagidek
   ============================================================ */
@media (max-width:1080px){
  .dash{grid-template-columns:1fr;}
}
/* ★ SHTORKA — TELEFON VA PLANSHETDA (tuzatildi)
   ------------------------------------------------------------
   ILGARI: `height:auto` + `padding-top:11px` va PASTKI BO'SHLIQ YO'Q edi.
   Natijada:
     · planshetda (≈800px) shtorka 68px o'rniga 49px ga siqilib, tugmalar
       pastdagi 3px li tricolor chiziq USTIGA tegib turardi;
     · telefonda (≈375px) tugmalar ikkinchi qatorga tushib, o'sha qator
       ham chiziqqa yopishib qolardi — "qorishib ketgan" ko'rinish shundan.
   Ekran kengligiga qarab goh bir qator, goh ikki qator bo'lgani uchun
   bir telefonda tekis, boshqasida xunuk chiqardi.

   ENDI: balandlik `min-height` bilan ushlanadi (kompyuterdagidek 68px),
   pastki bo'shliq 3px chiziqdan ORTIQ — hech narsa unga tegmaydi. */
@media (max-width:820px){
  .header-inner{
    height:auto;
    min-height:var(--header-h);
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
    padding-top:11px;
    padding-bottom:13px;   /* 3px tricolor chizig'i + 10px havo */
  }
  .header-actions{margin-left:auto;}
}
@media (max-width:900px){
  .home-grid{grid-template-columns:1fr;}
  .module-card{min-height:auto;padding:26px 24px;}
  .ring-row{gap:18px;}
}
/* Tor ekranda halqa va faktlar ustma-ust turadi — matn siqilib qolmasin */
@media (max-width:560px){
  .ring-row{flex-direction:column;align-items:flex-start;}
  .ring-facts{width:100%;}
}
@media (max-width:760px){
  body{font-size:15.5px;}
  .hero-inner{padding:38px var(--pad-x) 34px;}
  /* Salomlashuv telefonda ham "katta" qoladi, lekin uchinchi qator
     nisbatan kattalashadi — aks holda 12px ga tushib o'qilmay qoladi. */
  .wk{font-size:clamp(2.15rem,10.5vw,3.1rem);margin-bottom:18px;}
  .wk-tail{font-size:.44em;padding-top:.6em;}
  .hero-greet{margin-bottom:16px;}
  .niveau{padding:18px 18px 20px;border-radius:var(--radius);}
  .niveau::before{top:16px;bottom:16px;}
  .nv-row{gap:12px;}
  .nv-btn{width:100%;justify-content:center;}
  /* Telefonda karta tor bo'lgani uchun har qator ko'proq o'raladi va
     balandlik 490 dan 604 gacha sakrardi. Ta'rif 2 qatorga qisqartiriladi,
     `min-height` esa o'lchangan taqsimotning 96 % ini qoplaydigan qiymatga
     qo'yiladi (25 ta so'zda: 380·402·423·473·494·563). Ya'ni deyarli har
     doim tekis turadi; eng uzun so'zlarda 69 px cho'ziladi — buni to'liq
     yo'qotish uchun kartani 646 px qilish kerak edi, u esa telefonda
     bekorga bo'sh joy egallaydi. */
  .demo-body{min-height:494px;}
  .demo-def{-webkit-line-clamp:2;}
  .nvt-stat{padding:14px 15px;}
  .nvt-num{font-size:1.3rem;}
  .nvt-actions .btn{flex:1 1 auto;justify-content:center;}
  /* Telefonda so'zlar zichroq, kichikroq va vertikal sakramaydi:
     tor ekranda `--dy` yo'lakni buzib yuboradi (JS 3 tagina beradi). */
  .hero-words{gap:14px 22px;margin-top:32px;min-height:0;}
  .hw{padding:7px 16px;}
  .hw-de{font-size:1.02rem;}
  .hw-uz{font-size:.94rem;}
  .mini-stat{min-width:0;flex:0 0 auto;}
  .gram-topic{padding:20px 18px;}
  .g-test-cta{padding:18px;}
  .g-note,.g-intro{padding:14px 16px;}
  .g-story{padding:14px 16px;}
  .g-videos{grid-template-columns:1fr;}
  .container{padding:0 var(--pad-x) 70px;}
  .panel,.lektion-panel,.level-panel{padding:18px;border-radius:var(--radius);}
  .level-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .level-card{min-height:0;padding:15px;}
  .lv-desc{display:none;}
  .lv-code{font-size:1.6rem;}
  .course-strip{padding:15px;}
  .course-grid{grid-template-columns:1fr;}
  .crumb{font-size:.72rem;padding:5px 10px;max-width:min(100%,200px);}
  .dash-card{padding:20px;}
  .words-grid{grid-template-columns:1fr;}
  .match-grid{grid-template-columns:1fr;}
  .md-grid{grid-template-columns:1fr;}
  .modal{padding:26px 20px;border-radius:var(--radius-lg);}
  /* ⚠️ ETAP 53C — `.footer-cols{gap:30px}` o'chirildi (blokning o'zi yo'q).
     Telefonda eng pastki qator ustma-ust tushadi, ikonkalar esa baribir
     O'NG BURCHAKDA qoladi — «pastroqda, burchakda» talabi shu. */
  .footer-bottom{flex-direction:column;align-items:stretch;gap:16px;}
  .footer-social{align-self:flex-end;}
  .lp-name{width:88px;flex:0 0 88px;}
  .lp-val{width:78px;flex:0 0 78px;}
  .flash-card{height:300px;}
  .lek-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;}
  .lek-tile{min-height:126px;padding:15px;}
  .audio-player{padding:12px 14px;gap:10px;}
  .ap-tools{width:100%;}
  /* Fokus rejimi telefonlarda xiralashtirmaydi — ekran kichik, chalg'ish yo'q */
  body.focus-mode .hero,
  body.focus-mode .site-footer,
  body.focus-mode #view-grammar .section-head,
  body.focus-mode #gramCrumbs,
  body.focus-mode #gramLevelPanel,
  body.focus-mode #gramPanel,
  body.focus-mode .site-header{opacity:1;filter:none;}
}
@media (max-width:460px){
  .brand-name{height:15px;}          /* SVG so'z-belgi (ETAP 52) */
  .site-header .brand-emblem{width:17px;height:28px;}
  /* Tor telefonda «Ro'yxatdan o'tish» tugmasi bilan birga hech narsa
     bir qatorga sig'maydi — ikkinchi qator ATAYIN to'liq kenglikda
     bo'lsin: tugma cho'ziladi, ikonkalar o'ngda. Tasodifan "osilib
     qolgan" ko'rinish shu bilan yo'qoladi.
     `:has()` MUHIM: o'quvchi tizimga kirgach tugma kichik ikonkaga
     aylanadi va hammasi bir qatorga sig'adi — o'shanda bu qoida
     ISHLAMASLIGI kerak, aks holda bekorga ikki qator bo'lardi.
     Eski brauzer `:has()` ni tanimasa — tabiiy o'rash ishlaydi. */
  .header-actions:has(.auth-cta){flex:1 1 100%;justify-content:flex-end;}
  .header-actions:has(.auth-cta) .auth-cta{flex:1 1 auto;justify-content:center;}
  .games-grid{grid-template-columns:1fr;}
  .home-grid-small{grid-template-columns:1fr;}
  .memory-grid{grid-template-columns:repeat(3,1fr);}
  .filter-label{width:100%;}
  .lek-grid{grid-template-columns:1fr 1fr;}
  .lek-tile.lek-all{grid-column:span 2;}
  .lt-status{font-size:.55rem;letter-spacing:.06em;}
  .lt-kicker{letter-spacing:.14em;}
  .ring{width:108px;height:108px;flex-basis:108px;}
  .ring-num{font-size:1.5rem;}
  .g-crumb{font-size:.66rem;}
  .gram-grid{grid-template-columns:1fr;}
  .g-test-cta{flex-direction:column;align-items:stretch;}
  .g-test-cta .btn{justify-content:center;}
  .level-grid{grid-template-columns:1fr 1fr;}
  .lv-name{font-size:1rem;}
  .lv-meta{font-size:.66rem;}
  .crumbs{gap:2px;}
  .crumb{max-width:min(100%,150px);}
}

/* ============================================================
   27. HARAKATNI KAMAYTIRISH
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   28. PRINT
   ============================================================ */
@media print{
  .site-header,.hero,.toolbar-panel,.lektion-panel,.site-footer,#snow,.audio-player,.g-videos{display:none!important;}
  body::before,body::after{display:none;}
  html,body{background:#fff;}
  .panel{box-shadow:none;border:1px solid #ddd;background:#fff;}
  .word-card{break-inside:avoid;box-shadow:none;border:1px solid #ddd;background:#fff;}
}

/* ============================================================
   29. TAYYORLANAYOTGAN BO'LIMLAR (ETAP 33B)
   Hören · Schreiben · Lesen · Sprechen AI · Podcastlar.
   Bitta markazlashgan blok — sahifa bo'sh ko'rinmaydi, lekin
   soxta kontent ham qo'shilmaydi.
   ============================================================ */
.soon-page{
  max-width:620px;margin:70px auto 90px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:44px 30px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);
}
.soon-tag{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--gold-100);color:var(--gold-700);
}
[data-theme="dark"] .soon-tag{color:var(--gold-300);}
.soon-title{font-size:clamp(1.4rem,3.4vw,2rem);}
.soon-text{font-size:.95rem;color:var(--text-2);max-width:46ch;line-height:1.65;}
.soon-page .btn{margin-top:6px;}

/* ============================================================
   30. IMTIHON BO'LIMI (ETAP 33B)
   Daraja (A1…B2) → bosqich (X.1 / X.2). Kartalar lug'at/grammatika
   bilan bir xil tilda — `.level-card` va `.course-card` qayta ishlatiladi.
   ============================================================ */
.exam-note{
  display:flex;align-items:flex-start;gap:11px;
  padding:14px 16px;margin-bottom:22px;
  border:1px dashed var(--border-strong);border-radius:var(--radius);
  font-size:.86rem;color:var(--text-2);line-height:1.6;
}
.exam-note b{color:var(--text);font-weight:600;}
.exam-note .en-flag{
  flex:0 0 18px;width:18px;height:12px;margin-top:3px;
  display:flex;flex-direction:column;border-radius:1px;overflow:hidden;
  box-shadow:0 0 0 1px var(--border);
}
.exam-note .en-flag i{display:block;flex:1;}
.exam-note .en-flag i:nth-child(1){background:#1A1712;}
.exam-note .en-flag i:nth-child(2){background:#DD0000;}
.exam-note .en-flag i:nth-child(3){background:#FFCE00;}

/* O'yinlar darvozasi — lug'atda bosqich tanlangandan keyin ochiladi */
.games-gate .panel-title{margin-bottom:0;}

/* ============================================================
   31. SPRECHEN AI (ETAP 35A) — "suhbat varaqasi"

   Dizayn tili o'zgarmaydi (QOIDA 74): tekis yuza + hairline chegara,
   emoji yo'q (QOIDA 80 — `icon()`), raqamlar mono, qizil faqat
   SIGNAL uchun (yozib olayotgan mikrofon, yuborish tugmasi).

   Bitta yangi qaror: o'quvchining o'z gapi TESKARI yuzada turadi
   (`--invert-bg`/`--invert-fg`) — dark rejimda ham to'q qoladi
   (QOIDA 78/79), oq fon paydo bo'lmaydi.
   ============================================================ */

/* Mikrofon ishlamasa chiqadigan ogohlantirish */
.spr-warn{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:18px;padding:13px 16px;
  border:1px dashed var(--border-strong);border-radius:var(--radius);
  font-size:.84rem;color:var(--text-2);line-height:1.6;
}
.spr-warn .ic{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--red);}
.spr-warn b{color:var(--text);font-weight:700;}

/* ---------- Suhbat qobig'i ---------- */
.spr-shell{
  border-radius:var(--radius-lg);padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:14px;
}

/* Kolontitul — o'yin kartasi va Lektion plitkasi bilan bir xil til */
.spr-bar{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.spr-nr{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.18rem;font-weight:700;line-height:1;color:var(--text-3);
}
.spr-bar-text{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto;}
.spr-bar-text b{font-family:var(--font-display);font-size:1rem;font-weight:800;letter-spacing:-.02em;}
.spr-bar-text span{font-size:.74rem;color:var(--text-3);}
/* «Namunali javoblar» — o'quvchi aldanmasligi uchun ochiq yorliq.
   ETAP 35B dan keyin yorliq SHARTLI: AI ulangan bo'lsa `hidden`
   atributi qo'yiladi va yorliq ko'rinmaydi (QOIDA 97). */
.spr-demo{border-style:dashed;}

/* ---------- Yozishmalar ---------- */
.spr-log{
  display:flex;flex-direction:column;gap:14px;
  min-height:260px;max-height:min(56vh,520px);overflow-y:auto;
  padding:4px 2px;scroll-behavior:smooth;
}
.spr-msg{display:flex;flex-direction:column;gap:5px;max-width:82%;animation:sprIn .26s var(--ease);}
.spr-msg.me{align-self:flex-end;align-items:flex-end;}
@keyframes sprIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.sm-who{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.sm-bubble{padding:12px 15px 10px;border-radius:var(--radius);min-width:0;}
.spr-msg.me .sm-bubble{
  background:var(--invert-bg);color:var(--invert-fg);
  border:1px solid var(--invert-bg);box-shadow:var(--glass-shadow);
}
.sm-de{font-size:.98rem;line-height:1.6;overflow-wrap:anywhere;}
.spr-msg.ai .sm-de{color:var(--text);}
/* Tarjima — sukut bo'yicha yashirin (QOIDA 39: `display` yozilmaydi) */
.sm-uz{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-2);line-height:1.6;}

.sm-acts{display:flex;gap:6px;margin-top:9px;}
.sm-acts .icon-btn{width:30px;height:30px;padding:0;}
.sm-acts .ic{width:15px;height:15px;}

/* «Yozmoqda…» — uchta nuqta */
.sm-dots{display:flex;gap:5px;align-items:center;height:20px;}
.sm-dots i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:sprDot 1s infinite ease-in-out;}
.sm-dots i:nth-child(2){animation-delay:.15s;}
.sm-dots i:nth-child(3){animation-delay:.3s;}
@keyframes sprDot{0%,60%,100%{opacity:.28;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* ---------- Talaffuz hisobi ---------- */
.spr-score{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.ss-pct{font-size:.76rem;color:var(--text-3);font-weight:600;}
.ss-pct b{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:700;color:var(--gold-700);letter-spacing:-.03em;
}
.ss-words{display:flex;flex-wrap:wrap;gap:5px;}
/* Rang faqat SO'ZDA — katta yuza bo'yalmaydi (QOIDA 90) */
.sw{
  font-size:.82rem;font-weight:600;padding:3px 8px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
}
.sw.ok{color:var(--art-das);border-color:rgba(21,128,61,.4);}
.sw.no{color:var(--red);border-color:rgba(179,18,43,.4);}
.ss-meta{font-size:.74rem;color:var(--text-3);font-family:var(--font-mono);}

/* Yordam ichidagi tayyor gaplar */
.spr-help{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}

/* ---------- Javob yozish ---------- */
.spr-compose{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--border);}

.spr-hints{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.spr-hints .sh-lab{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.spr-hint{font-size:.8rem;}

.spr-row{display:flex;gap:9px;align-items:flex-end;}
.spr-text{
  flex:1;min-width:0;resize:none;overflow:auto;
  padding:12px 15px;border-radius:var(--radius);
  font-family:var(--font);font-size:.98rem;line-height:1.5;color:var(--text);
  outline:none;transition:border-color var(--t),box-shadow var(--t);
}
/* Fokus QIZIL — qidiruv qutisi bilan bir xil til (ETAP 29B) */
.spr-text:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-100);}

.spr-mic{flex:0 0 44px;width:44px;height:44px;padding:0;}
.spr-mic .ic{width:19px;height:19px;}
.spr-mic:disabled{opacity:.45;cursor:default;}
/* Yozib olinmoqda — QIZIL SIGNAL va sokin puls */
.spr-mic.is-rec{background:var(--red);border-color:var(--red);color:var(--on-accent);animation:sprRec 1.4s infinite;}
@keyframes sprRec{0%,100%{box-shadow:0 0 0 0 rgba(179,18,43,.34);}50%{box-shadow:0 0 0 7px rgba(179,18,43,0);}}

.spr-send{height:44px;white-space:nowrap;}
.spr-tools{display:flex;flex-wrap:wrap;gap:7px;}

/* ---------- Xulosa ---------- */
.spr-sum .section-head{margin-bottom:16px;}
.spr-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.spr-recap{margin-bottom:18px;}
.sr-lab{
  display:block;margin-bottom:9px;
  font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.spr-recap ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:7px;}
.spr-recap li{font-size:.92rem;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere;}
.spr-recap li::marker{font-family:var(--font-mono);color:var(--text-3);font-size:.8rem;}
.spr-sum-acts{display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- Mobil ---------- */
@media (max-width:640px){
  .spr-shell{padding:13px 13px 12px;}
  .spr-msg{max-width:94%;}
  .spr-log{min-height:220px;max-height:52vh;}
  .spr-send span{display:none;}          /* faqat ikonka qoladi */
  .spr-send{width:44px;padding:0;justify-content:center;}
  .spr-bar-text b{font-size:.94rem;}
}

/* ============================================================
   IMTIHON — GRAMMATIKA TESTLARI (ETAP 38)
   Ekranlar: 1) testlar ro'yxati  2) test ishlash  3) natija
   ============================================================ */

/* ---------- 1. Testlar ro'yxati ---------- */
.exam-test-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;
}
.exam-test-card{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  padding:16px 16px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.exam-test-card:hover{
  transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow);
}
.exam-test-card.is-done{border-color:var(--gold-600);}
.etc-ghost{
  position:absolute;right:-6px;top:-16px;pointer-events:none;
  font-family:var(--font-ghost);font-size:4.6rem;line-height:1;font-weight:300;
  color:var(--text-3);opacity:.11;
}
.etc-nr{
  font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.etc-name{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--text);}
.etc-meta{font-size:.8rem;color:var(--text-2);}
.etc-best{font-size:.78rem;color:var(--text-3);font-family:var(--font-mono);}
.exam-test-card.is-done .etc-best{color:var(--gold-700);font-weight:700;}
.etc-go{margin-top:6px;font-size:.82rem;font-weight:700;color:var(--red-600);}

/* ---------- 2. Test ishlash ---------- */
.exam-run{display:flex;flex-direction:column;gap:14px;}

.er-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--glass-shadow);
}
.er-bar-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.er-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.er-stage{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);}
.er-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);}
.er-done{font-size:.8rem;color:var(--text-2);white-space:nowrap;}
.er-timer{
  font-family:var(--font-mono);font-size:1.24rem;font-weight:700;letter-spacing:.04em;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
}
.er-timer.is-warn{
  background:var(--red-100);border-color:var(--red-600);color:var(--red-600);
  animation:erPulse 1.1s ease-in-out infinite;
}
@keyframes erPulse{0%,100%{opacity:1;}50%{opacity:.55;}}

.er-progress{height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.er-progress i{display:block;height:100%;background:var(--gold-600);transition:width var(--t);}

/* Savollar xaritasi — istalgan savolga qaytish shu yerdan */
.er-map{display:flex;flex-wrap:wrap;gap:6px;}
.er-dot{
  width:34px;height:34px;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  color:var(--text-3);
  transition:background-color var(--t),border-color var(--t),color var(--t);
}
.er-dot:hover{border-color:var(--border-strong);color:var(--text);}
.er-dot.is-set{background:var(--gold-100);border-color:var(--gold-600);color:var(--gold-700);}
.er-dot.is-cur{background:var(--red-600);border-color:var(--red-600);color:#fff;}

/* Savol kartasi */
.er-card{
  display:flex;flex-direction:column;gap:14px;
  padding:24px 24px 22px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);
}
.er-num{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);}
.er-q{
  margin:0;font-family:var(--font-display);font-size:1.3rem;line-height:1.55;font-weight:600;
  color:var(--text);overflow-wrap:anywhere;
}
.er-opts{display:flex;flex-direction:column;gap:9px;}
.er-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:13px 15px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);
  transition:background-color var(--t),border-color var(--t),transform var(--t);
}
.er-opt:hover{border-color:var(--border-strong);transform:translateX(2px);}
.er-opt.is-sel{background:var(--gold-100);border-color:var(--gold-600);}
.eo-let{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--surface);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--text-3);
}
.er-opt.is-sel .eo-let{background:var(--gold-600);border-color:var(--gold-600);color:#fff;}
.eo-txt{font-size:1rem;line-height:1.5;color:var(--text);overflow-wrap:anywhere;}

.er-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;}
.er-hint{margin:0;font-size:.82rem;line-height:1.6;color:var(--text-3);}

/* Qulflangan yo'l ko'rsatkichi */
.crumb.is-locked{
  cursor:default;background:var(--red-100);border-color:var(--red-600);color:var(--red-600);
  font-weight:700;
}

/* ---------- 3. Natija ---------- */
.exam-result{display:flex;flex-direction:column;gap:18px;}

.ex-score{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:30px 24px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--glass-shadow);
}
.ex-score.lv-ok{border-color:var(--gold-600);}
.ex-score.lv-low{border-color:var(--red-600);}
.xs-kicker{font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);}
.xs-big{font-family:var(--font-poster);font-size:3.6rem;line-height:1;font-weight:700;color:var(--text);}
.xs-big i{font-style:normal;font-size:1.6rem;color:var(--text-3);}
.xs-pct{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--gold-700);}
.ex-score.lv-low .xs-pct{color:var(--red-600);}
.xs-time{font-size:.82rem;color:var(--text-3);font-family:var(--font-mono);}

.ex-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.ex-h{
  margin:6px 0 0;font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text);
}

.ex-list{display:flex;flex-direction:column;gap:10px;}
.ex-item{
  display:flex;gap:12px;padding:15px 16px;
  background:var(--surface);border:1px solid var(--border);border-left-width:4px;
  border-radius:var(--radius);
}
.ex-item.is-ok{border-left-color:var(--art-das);}
.ex-item.is-bad{border-left-color:var(--red-600);}
.xi-num{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--surface-2);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--text-3);
}
.xi-body{min-width:0;display:flex;flex-direction:column;gap:5px;}
.xi-q{margin:0;font-size:.98rem;line-height:1.55;font-weight:600;color:var(--text);overflow-wrap:anywhere;}
.xi-line{margin:0;font-size:.88rem;line-height:1.5;color:var(--text-2);overflow-wrap:anywhere;}
.xi-right{color:var(--art-das);font-weight:700;}
.xi-wrong{color:var(--red-600);font-weight:700;text-decoration:line-through;}
.xi-none{color:var(--text-3);font-style:italic;}
.xi-ex{
  margin:3px 0 0;padding:8px 11px;border-radius:9px;background:var(--surface-2);
  font-size:.84rem;line-height:1.55;color:var(--text-2);
}

/* ---------- Mobil ---------- */
@media (max-width:640px){
  .er-card{padding:18px 16px 16px;}
  .er-q{font-size:1.12rem;}
  .er-bar{padding:11px 13px;}
  .er-bar-r{width:100%;justify-content:space-between;}
  .er-dot{width:30px;height:30px;font-size:.74rem;}
  .er-nav .btn{flex:1 1 auto;justify-content:center;}
  .xs-big{font-size:2.9rem;}
  .exam-test-grid{grid-template-columns:1fr;}
}

/* ============================================================
   32. DARAJA TESTI — SAVOL VA NATIJA (ETAP 54)
   ------------------------------------------------------------
   Muqova (`.nvt-*`) 8-bo'limda, u ETAP 53 dan qolgan va tegilmadi.
   Bu yerda faqat ikkita yangi ekran: savol (`.nvq-*`) va natija
   (`.nvr-*`). Savol ekrani imtihon dvigatelining tayyor qismlarini
   (`.er-bar`, `.er-progress`, `.er-card`, `.er-opt`) qayta ishlatadi —
   ikki joyda ikki xil ko'rinish bo'lmasin.
   Ranglar: daraja va progress — OLTIN (QOIDA 138), qizil faqat
   taymer ogohlantirishida. To'ldirilgan oltin tungi rejimda
   ishlatilmaydi — chip qolipi (`--gold-100` foni) olinadi (QOIDA 78).
   ============================================================ */

/* ---------- Muqovadagi oxirgi natija qatori ---------- */
.nvt-last{
  margin:0 0 16px;padding:10px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.84rem;color:var(--text-2);
}
.nvt-last b{color:var(--text);font-family:var(--font-mono);}

/* ---------- 1. Savol ekrani ---------- */
.nvq{display:flex;flex-direction:column;gap:14px;}
.nvq-anw{
  margin:0 0 12px;font-size:.84rem;color:var(--text-3);
  padding-bottom:10px;border-bottom:1px solid var(--border);
}

/* Lesen matni — hujjat parchasi ko'rinishida */
.nvq-text{
  display:flex;flex-direction:column;gap:5px;
  margin:0 0 16px;padding:14px 16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  border-left:2px solid var(--gold-600);
  font-size:.95rem;line-height:1.55;color:var(--text);
}
.nvq-titel{
  font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:3px;
}

/* Hören pleyeri — mock.css dagi `.mk-play` tugmasi qayta ishlatiladi */
.nvq-player{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.nvq-player.is-done{opacity:.75;}
.nvq-nav{justify-content:flex-start;}

/* ---------- 2. Natija ---------- */
.nvr{display:flex;flex-direction:column;gap:16px;}

.nvr-head{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 18px 22px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
}
.nvr-kicker{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);}
.nvr-level{
  font-family:var(--font-mono);font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:.02em;
  padding:10px 26px;border-radius:var(--radius);
  background:var(--gold-100);border:1px solid var(--gold-600);color:var(--gold-700);
}
[data-theme="dark"] .nvr-level{color:var(--gold);border-color:var(--gold);}
.nvr-stage{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);}
.nvr-meta{font-size:.84rem;color:var(--text-2);}
.nvr-meta b{font-family:var(--font-mono);color:var(--text);}

.nvr-note{
  margin:0;padding:12px 16px;
  background:var(--surface-2);border:1px solid var(--border);border-left:2px solid var(--red-600);
  border-radius:var(--radius-sm);font-size:.86rem;line-height:1.55;color:var(--text-2);
}
.nvr-note b{color:var(--text);}

.nvr-kann{
  padding:16px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
}
.nvr-de{margin:0 0 8px;font-size:.98rem;line-height:1.6;color:var(--text);}
.nvr-uz{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-3);}

.nvr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
/* ⚠️ QOIDA 83: grid bolasi min-content dan kichrayolmaydi — jadvalning
   `min-width:340px` i 375 px ekranda sahifani chetdan chiqarib yuboradi.
   `min-width:0` bo'lsa jadval o'z ichida suriladi (QOIDA 82). */
.nvr-grid > *{min-width:0;}
.nvr-card{padding:18px;min-width:0;}
.nvr-h{
  margin:0 0 14px;font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--text);
}

/* Ko'nikma chiziqlari */
.nvr-skill{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.nvr-sk-name{flex:0 0 96px;font-size:.84rem;color:var(--text-2);}
.nvr-sk-bar{flex:1 1 auto;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.nvr-sk-bar i{display:block;height:100%;background:var(--gold-600);}
.nvr-sk-val{flex:none;font-family:var(--font-mono);font-size:.82rem;color:var(--text);}

/* Bosqichlar jadvali — o'z ichida suriladi (QOIDA 82) */
.nvr-table{width:100%;min-width:340px;border-collapse:collapse;font-size:.84rem;}
.nvr-table th,.nvr-table td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--border);}
.nvr-table th{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.nvr-table td.mono{font-family:var(--font-mono);}
.nvr-table tr.is-ok td{color:var(--gold-700);font-weight:600;}
[data-theme="dark"] .nvr-table tr.is-ok td{color:var(--gold);}
.nvr-hint{margin:12px 0 0;font-size:.78rem;line-height:1.5;color:var(--text-3);}

/* Tavsiya kartasi */
.nvr-next{display:flex;flex-direction:column;gap:8px;padding:20px;}
.nvr-next-text{margin:0 0 6px;font-size:.9rem;line-height:1.55;color:var(--text-2);}
.nvr-next .nvt-actions{margin-bottom:0;}

/* Xatolar ustida ishlash */
.nvr-item{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 0;border-top:1px solid var(--border);
}
.nvr-item:first-of-type{border-top:0;}
.nvr-it-head{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.nvr-it-text{font-size:.82rem;line-height:1.5;color:var(--text-3);font-style:italic;}
.nvr-it-q{font-size:.94rem;line-height:1.5;color:var(--text);}
.nvr-it-a{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.86rem;}
.nvr-it-a .is-no{color:var(--red-600);text-decoration:line-through;font-style:normal;}
.nvr-it-a .is-skip{color:var(--text-3);font-style:normal;}
.nvr-it-a .is-yes{color:var(--gold-700);}
[data-theme="dark"] .nvr-it-a .is-yes{color:var(--gold);}
.nvr-it-ex{font-size:.82rem;line-height:1.5;color:var(--text-2);}

@media (max-width:820px){
  .nvr-grid{grid-template-columns:1fr;}
  .nvr-level{font-size:2.7rem;padding:8px 20px;}
  .nvr-sk-name{flex:0 0 78px;font-size:.8rem;}
  .nvq-nav .btn{width:100%;justify-content:center;}
}


/* ============================================================
   33. HISOB VA REYTING (ETAP 55)
   ------------------------------------------------------------
   Ikki qism:
     A) Google tugmasi va «yoki» ajratkichi — hisob oynasida;
     B) Reyting bo'limi (`#view-reyting`) — `sync.js` chizadi.

   Dizayn tizimidan chiqilmaydi (QOIDA 74): tekis yuza + hairline,
   raqamlar `--font-mono`, gradient va shisha yo'q.
   Rang taqsimoti (QOIDA 138): OLTIN — yutuq va o'rin, QIZIL — faqat
   «Ro'yxatdan o'tish» tugmasi. Uchinchi rang kiritilmaydi, shuning
   uchun 2- va 3-o'rin uchun kumush/bronza YO'Q — birinchi uchlik
   bitta oltin urg'u bilan ajratiladi.
   Tungi rejimda to'ldirilgan oltin ishlatilmaydi (QOIDA 78) — chip
   qolipi: fon `--gold-100`, matn va chegara `--gold`.
   ============================================================ */

/* ---------- A. GOOGLE TUGMASI ---------- */
/* Google brend qoidasi: logotip O'Z ranglarida qoladi, tugma esa
   saytning neytral yuzasi — shuning uchun `--red`/`--gold` emas. */
.google-btn{
  width:100%;justify-content:center;gap:10px;
  padding:11px 16px;font-size:.92rem;font-weight:700;
  background:var(--surface);border:1px solid var(--text-3);color:var(--text);
}
.google-btn:hover{background:var(--surface-2);border-color:var(--text-2);}
.google-btn:disabled{opacity:.6;cursor:default;}
.google-btn .g-logo{display:grid;place-items:center;line-height:1;}
.google-btn .g-logo svg{width:18px;height:18px;display:block;}

/* «yoki» — ikki chiziq orasidagi so'z */
.auth-or{
  display:flex;align-items:center;gap:12px;
  margin:16px 0;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.auth-or::before,.auth-or::after{
  content:"";flex:1 1 auto;height:1px;background:var(--border);
}

/* Hisob oynasidagi to'rtta katak (ball · so'z · mavzu · o'rin) */
.auth-stats{grid-template-columns:1fr 1fr;}

/* ---------- B. REYTING BO'LIMI ---------- */
.rt{display:flex;flex-direction:column;gap:16px;}

/* --- Jadval tanlagich --- */
.rt-tabs{
  display:flex;align-items:center;gap:8px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.rt-tabs .rt-spacer{flex:1 1 auto;}
.rt-tab{
  padding:7px 15px;border-radius:99px;
  border:1px solid var(--border);background:transparent;
  font-family:inherit;font-size:.85rem;font-weight:700;color:var(--text-2);
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.rt-tab:hover{color:var(--text);border-color:var(--text-3);}
.rt-tab.is-active{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg);}
.rt-refresh .ic{width:17px;height:17px;}

/* --- «Mening o'rnim» kartasi --- */
.rt-me{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
}
.rt-me-orin{
  flex:none;min-width:56px;
  font-family:var(--font-mono);font-size:1.5rem;font-weight:700;
  color:var(--gold-700);letter-spacing:-.02em;
}
[data-theme="dark"] .rt-me-orin{color:var(--gold);}
.rt-me-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.rt-me-text b{font-size:1rem;font-weight:800;color:var(--text);overflow-wrap:anywhere;}
.rt-me-text span{font-size:.8rem;color:var(--text-3);line-height:1.5;}
.rt-edit{flex:none;}
.rt-edit .ic{width:16px;height:16px;}

/* Mehmon uchun — chapdagi raqam o'rniga taklif matni */
.rt-me-guest{flex-wrap:wrap;}
.rt-me-guest .btn{flex:none;}

/* --- Ro'yxat --- */
.rt-list{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  /* Uzun ro'yxat sekinlashtirmasin (QOIDA 59) */
  content-visibility:auto;contain-intrinsic-size:auto 600px;
}
.rt-row{
  display:flex;align-items:center;gap:14px;
  padding:11px 16px;border-top:1px solid var(--border);
  min-width:0;
}
.rt-row:first-child{border-top:0;}
.rt-orin{
  flex:none;min-width:34px;text-align:right;
  font-family:var(--font-mono);font-size:.9rem;color:var(--text-3);
}
.rt-row.is-top .rt-orin{color:var(--gold-700);font-weight:700;font-size:1rem;}
[data-theme="dark"] .rt-row.is-top .rt-orin{color:var(--gold);}
.rt-nick{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;}
.rt-nick b{font-size:.94rem;font-weight:700;color:var(--text);overflow-wrap:anywhere;}
.rt-nick i{font-style:normal;font-size:.74rem;color:var(--text-3);}
.rt-ball{
  flex:none;font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--text);
}

/* O'zim — chap qirrada oltin chiziq (fon emas: QOIDA 78/90) */
.rt-row.is-me{background:var(--gold-100);box-shadow:inset 2px 0 0 var(--gold-600);}
[data-theme="dark"] .rt-row.is-me{box-shadow:inset 2px 0 0 var(--gold);}

/* Mehmon uchun niqoblangan ism (ETAP 56) — hero kartasidagi bilan bir xil */
.rt-row.is-lock .rt-nick b{color:var(--text-3);letter-spacing:.06em;font-weight:600;}

/* --- Holatlar: yuklanmoqda / bo'sh / xato --- */
.rt-loading,.rt-empty,.rt-xato{
  padding:22px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  font-size:.88rem;line-height:1.6;color:var(--text-3);
}
.rt-xato{display:flex;flex-direction:column;gap:4px;}
.rt-xato b{color:var(--text);font-size:.94rem;}
.rt-xato code{
  font-family:var(--font-mono);font-size:.82rem;
  padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--text-2);
}

/* --- «Ball qanday yig'iladi» --- */
.rt-help{
  padding:14px 18px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.rt-help summary{
  cursor:pointer;font-size:.86rem;font-weight:700;color:var(--text-2);
  list-style:none;
}
.rt-help summary::-webkit-details-marker{display:none;}
.rt-help summary::after{content:" +";font-family:var(--font-mono);color:var(--text-3);}
.rt-help[open] summary::after{content:" –";}
.rt-help-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;}
.rt-help-list li{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 0;border-top:1px solid var(--border);
  font-size:.84rem;color:var(--text-2);
}
.rt-help-list li:first-child{border-top:0;}
.rt-help-list li span{flex:1 1 auto;min-width:0;}
.rt-help-list li b{
  flex:none;font-family:var(--font-mono);font-weight:700;color:var(--gold-700);
}
[data-theme="dark"] .rt-help-list li b{color:var(--gold);}
.rt-help-note{margin:12px 0 0;font-size:.78rem;line-height:1.55;color:var(--text-3);}

/* --- Telefon (QOIDA 83: gorizontal toshish bo'lmasin) --- */
@media (max-width:560px){
  .rt-me{gap:10px;padding:14px;}
  .rt-me-orin{min-width:44px;font-size:1.25rem;}
  .rt-me-guest .btn{width:100%;justify-content:center;}
  .rt-row{gap:10px;padding:10px 12px;}
  .rt-orin{min-width:26px;font-size:.82rem;}
  .rt-nick b{font-size:.88rem;}
  .rt-ball{font-size:.92rem;}
  .rt-tab{padding:6px 12px;font-size:.8rem;}
}


/* ============================================================
   34. HERO — IKKI YUZLI KARTA VA MUSOBAQA TOP 10 (ETAP 56)
   ------------------------------------------------------------
   Mijoz talabi: hero'ning o'ng ustunida musobaqa ko'rinsin, lekin
   ETAP 53B da o'lchab qo'yilgan muvozanat buzilmasin (chap ustun
   488 px, o'ng ustun ~520 px). Shuning uchun karta OSTIGA emas,
   o'sha joyning O'ZIGA qo'yildi: ikkita yuz, tepasida tanlagich.

   Balandlik ATAYLAB tenglashtirilgan (`min-height`): yuz almashganda
   sahifa sakramaydi. Demo kartasi = 44 (bosh) + 402 (tan) + 50 (oyoq)
   ≈ 496 px; telefonda tan 494 px, ya'ni ≈ 588 px.

   Rang (QOIDA 74/138): OLTIN — o'rin va yutuq, QIZIL — faqat
   «Ro'yxatdan o'tish» tugmasi. Tungi rejimda to'ldirilgan oltin
   ishlatilmaydi (QOIDA 78): fon `--gold-100`, matn `--gold`.
   ============================================================ */

/* ---------- A. TANLAGICH («So'z | Reyting») ---------- */
/* ⚠️ `hidden` bilan yashiriladi — global `[hidden]{display:none!important}`
   qoidasi shu `display:flex` dan kuchli (QOIDA 38). */
.hero-switch{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;
}
.hs-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:transparent;
  font-family:inherit;font-size:.82rem;font-weight:700;color:var(--text-2);
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.hs-tab:hover{color:var(--text);border-color:var(--text-3);}
.hs-tab.is-active{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg);}
.hs-ico{display:inline-grid;place-items:center;line-height:1;}
.hs-ico .ic{width:15px;height:15px;}

/* Ishtirokchi soni — mehmonni qiziqtiradigan yagona raqam */
.hs-badge{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--gold-100);color:var(--gold-700);
  border:1px solid var(--gold-600);
}
[data-theme="dark"] .hs-badge{color:var(--gold);border-color:var(--gold-700);}
.hs-tab.is-active .hs-badge{background:transparent;color:var(--invert-fg);border-color:currentColor;opacity:.75;}

/* ---------- B. MUSOBAQA KARTASI ---------- */
.rank-card{
  display:flex;flex-direction:column;min-height:490px;   /* = demo kartasi */
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--glass-shadow);
  transition:box-shadow var(--t-slow),transform var(--t-slow);
}
.hero-demo:hover .rank-card{transform:translateY(-3px);box-shadow:var(--shadow-lg);}

/* Bosh qator — demo kartasi bilan bir xil qolip (to'q yuza) */
.rk-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--invert-bg);flex:0 0 auto;
}
.rk-kicker{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--invert-fg);opacity:.72;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rk-count{
  font-family:var(--font-mono);font-size:.64rem;font-weight:500;flex:0 0 auto;
  padding:3px 9px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.09);color:var(--invert-fg);opacity:.85;
  white-space:nowrap;
}

.rk-body{flex:1 1 auto;min-height:0;padding:2px 0;}
.rk-list{display:flex;flex-direction:column;}

/* --- Qator --- */
/* ⚠️ `padding` va `line-height` — O'LCHAB QO'YILGAN qiymatlar. 10 ta qator
   + bosh + oyoq aynan 496 px ga (demo kartasi balandligiga) sig'ishi kerak,
   aks holda yuz almashganda sahifa 140 px sakraydi. Kattalashtirilsa —
   qaytadan o'lchang. */
.rk-row{
  display:flex;align-items:center;gap:12px;
  padding:6px 16px;min-width:0;line-height:1.25;
  border-top:1px solid var(--border);
}
.rk-row:first-child{border-top:0;}
.rk-orin{
  flex:none;min-width:22px;text-align:right;
  font-family:var(--font-mono);font-size:.86rem;color:var(--text-3);
}
.rk-row.is-top .rk-orin{color:var(--gold-700);font-weight:700;font-size:.98rem;}
[data-theme="dark"] .rk-row.is-top .rk-orin{color:var(--gold);}
.rk-nick{
  flex:1 1 auto;min-width:0;
  font-size:.92rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rk-ball{
  flex:none;font-family:var(--font-mono);font-size:.94rem;font-weight:700;color:var(--text);
}

/* O'zim — chap qirrada oltin chiziq (fon emas: QOIDA 78/90) */
.rk-row.is-me{background:var(--gold-100);box-shadow:inset 2px 0 0 var(--gold-600);}
[data-theme="dark"] .rk-row.is-me{box-shadow:inset 2px 0 0 var(--gold);}

/* Mehmon uchun niqoblangan ism — nuqtalar biroz siyrak tursin */
.rk-row.is-lock .rk-nick{color:var(--text-3);letter-spacing:.06em;}

/* Skelet (yuklanmoqda) — jimirlash yo'q, shunchaki bo'sh chiziqlar */
.rk-row.is-skel span{
  height:11px;border-radius:4px;background:var(--surface-2);
}
.rk-row.is-skel .rk-orin{width:16px;min-width:16px;}
.rk-row.is-skel .rk-nick{max-width:52%;}
.rk-row.is-skel .rk-ball{width:34px;}

/* --- O'rtadagi holatlar: bo'sh jadval, xato --- */
.rk-mid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:28px 26px;text-align:center;
}
.rk-cup{display:grid;place-items:center;color:var(--gold-700);}
[data-theme="dark"] .rk-cup{color:var(--gold);}
.rk-cup .ic{width:34px;height:34px;}
.rk-empty-t{font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.rk-msg{font-size:.84rem;line-height:1.6;color:var(--text-3);margin:0;}
.rk-retry{align-self:center;}

/* --- Oyoq qismi --- */
.rk-foot{
  flex:0 0 auto;display:flex;flex-direction:column;gap:8px;
  padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2);
}
.rk-foot .rk-msg{text-align:left;}
.rk-cta{width:100%;justify-content:center;}

/* Kirgan o'quvchi — o'z o'rni */
.rk-me{display:flex;align-items:center;gap:12px;min-width:0;}
.rk-me-orin{
  flex:none;font-family:var(--font-mono);font-size:1.25rem;font-weight:700;
  color:var(--gold-700);letter-spacing:-.02em;
}
[data-theme="dark"] .rk-me-orin{color:var(--gold);}
.rk-me-txt{
  display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;
  font-size:.9rem;font-weight:700;color:var(--text);overflow-wrap:anywhere;
}
.rk-me-txt i{font-style:normal;font-size:.76rem;font-weight:600;color:var(--text-3);}

.rk-full{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.82rem;font-weight:700;color:var(--text-3);
  transition:color .18s var(--ease);
}
.rk-full:hover{color:var(--text);}
.rk-full .ic{width:15px;height:15px;}

/* ---------- C. HISOB OYNASI — FAQAT GOOGLE (ETAP 56) ---------- */
/* Ro'yxatdan o'tishda forma yo'q, uning o'rniga uchta foyda yoziladi */
.auth-why{
  list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.auth-why li{
  position:relative;padding-left:22px;
  font-size:.85rem;line-height:1.55;color:var(--text-2);
}
.auth-why li::before{
  content:"";position:absolute;left:4px;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold-600);
}
[data-theme="dark"] .auth-why li::before{background:var(--gold);}

/* «Eski email hisobim bor» — kirish oynasidagi yig'ilgan bo'lim */
.auth-old{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.auth-old summary{
  cursor:pointer;list-style:none;
  font-size:.82rem;font-weight:700;color:var(--text-3);
}
.auth-old summary::-webkit-details-marker{display:none;}
.auth-old summary::after{content:" +";font-family:var(--font-mono);}
.auth-old[open] summary::after{content:" –";}
.auth-old summary:hover{color:var(--text-2);}
.auth-old .auth-form{margin-top:14px;}
.auth-reset{
  margin-top:12px;padding:0;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:600;color:var(--text-3);
}
.auth-reset:hover{color:var(--text);}

/* ---------- D. TELEFON (QOIDA 83) ---------- */
@media (max-width:900px){
  /* Bir ustunga tushganda demo kartasining tani 494 px bo'ladi —
     musobaqa kartasi ham shunga tenglashadi, almashganda sakramasin.
     375 px ekranda o'lchangan: demo karta = 582 px. */
  .rank-card{min-height:582px;}
}
@media (max-width:560px){
  .hero-switch{margin-bottom:10px;}
  .hs-tab{padding:6px 12px;font-size:.78rem;}
  .rk-row{gap:10px;padding:6px 13px;}
  .rk-orin{min-width:18px;font-size:.8rem;}
  .rk-nick{font-size:.88rem;}
  .rk-ball{font-size:.88rem;}
  .rk-foot{padding:13px;}
  .rk-mid{padding:24px 18px;}
}

/* ============================================================
   35. NISHONLAR · HAFTANING YETAKCHISI · UNDASH (ETAP 57)
   ------------------------------------------------------------
   Uchta yangi narsa, hammasi bitta maqsad uchun — MUSOBAQA JONLI
   KO'RINSIN:
     A) yetakchi — jadvalning birinchi o'rni ko'zga tashlanadi;
     B) nishonlar — o'quvchi nimaga intilishini ko'radi;
     C) undash — 20 ta so'z belgilagan mehmonga bir marta chiqadigan
        karta («natijangiz saqlanmayapti»).

   Rang qoidasi o'zgarmadi (QOIDA 74/138): OLTIN — o'rin va yutuq,
   QIZIL — faqat «Ro'yxatdan o'tish» tugmasi. Tungi rejimda
   to'ldirilgan oltin ishlatilmaydi (QOIDA 78): fon `--gold-100`,
   matn `--gold`.
   ============================================================ */

/* ---------- A. HAFTANING YETAKCHISI ---------- */

/* Hero kartasidagi toj — o'rin raqamining O'RNIGA turadi, ya'ni
   qator balandligi o'zgarmaydi (QOIDA 153: karta 490 px). */
/* ⚠️ `line-height:0` + 15 px — toj qatorni BALANDLATMASLIGI shart,
   aks holda birinchi qator qolganlaridan yo'g'on ko'rinadi va 10 ta
   qator 490 px ga sig'may qoladi (o'lchangan: tojsiz 31 px, toj bilan
   ham 31 px). */
.rk-crown{display:inline-grid;place-items:center;line-height:0;color:var(--gold-700);}
[data-theme="dark"] .rk-crown{color:var(--gold);}
.rk-crown .ic{width:15px;height:15px;display:block;}
.rk-row.is-first .rk-nick{color:var(--text);font-weight:800;}

/* Bo'limdagi to'liq jadval — bu yerda balandlik cheklovi YO'Q,
   shuning uchun haqiqiy tasma chiziladi. */
.rt-champ{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;margin:0 0 14px;
  border:1px solid var(--gold-600);border-radius:var(--radius-lg);
  background:var(--gold-100);
}
[data-theme="dark"] .rt-champ{border-color:var(--gold-700);}
.rt-champ-ic{flex:none;display:grid;place-items:center;color:var(--gold-700);}
[data-theme="dark"] .rt-champ-ic{color:var(--gold);}
.rt-champ-ic .ic{width:26px;height:26px;}
.rt-champ-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.rt-champ-kick{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold-700);
}
[data-theme="dark"] .rt-champ-kick{color:var(--gold);}
.rt-champ-txt b{
  font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rt-champ-txt i{font-style:normal;font-size:.8rem;color:var(--text-2);}
.rt-champ-ball{
  flex:none;display:flex;align-items:baseline;gap:5px;
  font-family:var(--font-mono);font-size:1.5rem;font-weight:700;
  color:var(--text);letter-spacing:-.02em;
}
.rt-champ-ball i{font-style:normal;font-size:.7rem;font-weight:600;color:var(--text-3);}
/* Mehmonda ism niqoblangan — nuqtalar siyrakroq tursin (QOIDA 152) */
.rt-champ.is-lock .rt-champ-txt b{color:var(--text-2);letter-spacing:.06em;}
.rt-champ.is-me{box-shadow:inset 3px 0 0 var(--gold-600);}
[data-theme="dark"] .rt-champ.is-me{box-shadow:inset 3px 0 0 var(--gold);}

/* ---------- B. NISHONLAR (statistika bo'limi) ---------- */
.nishon-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.nish{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.nish:hover{transform:translateY(-2px);}
.nish-ic{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--border);
  color:var(--text-3);background:var(--surface-2);
}
.nish-ic .ic{width:20px;height:20px;}
.nish-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.nish-txt b{
  font-size:.9rem;font-weight:700;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nish-txt i{font-style:normal;font-size:.74rem;line-height:1.4;color:var(--text-3);}

/* Ochilmagan nishonning progressi — yupqa chiziq va mono raqam */
.nish-pro{
  flex:none;width:44px;height:4px;border-radius:2px;
  background:var(--surface-2);border:1px solid var(--border);overflow:hidden;
}
.nish-fill{display:block;height:100%;background:var(--text-3);}
.nish-val{
  flex:none;font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);
  min-width:52px;text-align:right;
}

/* Ochilgan nishon — oltin qirra va belgi */
.nish.is-on{border-color:var(--gold-600);}
[data-theme="dark"] .nish.is-on{border-color:var(--gold-700);}
.nish.is-on .nish-ic{
  color:var(--gold-700);border-color:var(--gold-600);background:var(--gold-100);
}
[data-theme="dark"] .nish.is-on .nish-ic{color:var(--gold);border-color:var(--gold-700);}
.nish.is-on .nish-txt b{color:var(--text);}
.nish-ok{flex:none;display:grid;place-items:center;color:var(--gold-700);}
[data-theme="dark"] .nish-ok{color:var(--gold);}
.nish-ok .ic{width:18px;height:18px;}

/* ---------- C. HISOB OYNASIDAGI NISHON QATORI ---------- */
.ac-nish{
  margin:0 0 18px;padding:14px;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--surface-2);
}
.ac-nish-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
  font-size:.78rem;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.04em;
}
.ac-nish-head b{font-family:var(--font-mono);font-size:.86rem;color:var(--text);letter-spacing:0;}
.ac-nish-row{display:flex;flex-wrap:wrap;gap:7px;}
.ac-nish-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:5px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:var(--surface);
  font-size:.76rem;font-weight:700;color:var(--text-3);
}
.ac-nish-chip .ic{width:14px;height:14px;flex:none;}
.ac-nish-chip i{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ac-nish-chip.is-on{
  border-color:var(--gold-600);background:var(--gold-100);color:var(--gold-700);
}
[data-theme="dark"] .ac-nish-chip.is-on{border-color:var(--gold-700);color:var(--gold);}
.ac-nish-all{
  display:inline-flex;align-items:center;gap:5px;margin-top:11px;
  padding:0;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:700;color:var(--text-3);
  transition:color .18s var(--ease);
}
.ac-nish-all:hover{color:var(--text);}
.ac-nish-all .ic{width:14px;height:14px;}

/* ---------- D. UNDASH KARTASI ---------- */
/* Pastki o'ng burchak. `z-index` ATAYIN 70: yon panel (80/90) va
   oynalar (100) undan yuqorida turadi, ya'ni karta hech qachon
   ochiq oynaning ustiga chiqmaydi. */
.undash{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:min(330px,calc(100vw - 32px));
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:18px 18px 16px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.undash.is-in{opacity:1;transform:none;}
.undash-x{
  position:absolute;top:8px;right:8px;
  display:grid;place-items:center;width:28px;height:28px;
  border:0;background:transparent;border-radius:50%;cursor:pointer;
  color:var(--text-3);transition:color .18s var(--ease),background .18s var(--ease);
}
.undash-x:hover{color:var(--text);background:var(--surface-2);}
.undash-x .ic{width:15px;height:15px;}
.undash-ic{display:grid;place-items:center;color:var(--gold-700);}
[data-theme="dark"] .undash-ic{color:var(--gold);}
.undash-ic .ic{width:24px;height:24px;}
.undash-t{font-size:1rem;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.undash-p{margin:0;font-size:.82rem;line-height:1.6;color:var(--text-3);}
.undash-p b{color:var(--text-2);}
.undash-go{width:100%;justify-content:center;margin-top:3px;}
.undash-later{
  align-self:center;padding:0;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--text-3);
}
.undash-later:hover{color:var(--text);}

/* ---------- D2. «GOOGLE ISHLAMAYAPTIMI?» — ZAXIRA YO'L (ETAP 57B) ---------- */
/* Ko'rinishi `.auth-old` bilan bir xil (u yerdan meros oladi), faqat
   ichida bitta izoh qatori bor. Ochiq turmaydi: mijozning «ro'yxatdan
   o'tish faqat Google» qarori (QOIDA 151) buzilmasin. */
.auth-fallback .auth-fb-note{
  margin:12px 0 0;font-size:.78rem;line-height:1.55;color:var(--text-3);
}

/* ---------- E. TELEFON (QOIDA 83) ---------- */
@media (max-width:560px){
  .rt-champ{gap:11px;padding:12px 13px;}
  .rt-champ-ball{font-size:1.25rem;}
  .nishon-grid{grid-template-columns:1fr;}
  /* Toast pastda o'rtada turadi — karta uning ustiga chiqmasin */
  .undash{right:12px;left:12px;bottom:82px;width:auto;}
}

/* ============================================================
   36. HÖREN — TINGLAB TUSHUNISH (ETAP 58)
   ------------------------------------------------------------
   Uchta ekran: daraja (`.level-grid` — mavjud qolip qayta ishlatiladi),
   mavzular ro'yxati (`.ho-card`) va mashq varaqasi (`.ho-work`).
   Pleyer tugmasi — imtihondagi `.mk-play` (ikki joyda ikki xil
   ko'rinish bo'lmasin), savol variantlari esa imtihondagi `.eo-let` /
   `.eo-txt` ichki qolipini oladi.
   Ranglar: OLTIN — natija va progress; QIZIL — faqat xato belgisi
   (QOIDA 138). To'ldirilgan oltin tungi rejimda ishlatilmaydi (QOIDA 78).
   ============================================================ */

/* ---------- A. Mavzular ro'yxati ---------- */
.ho-sum{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;
}
.ho-sum-i{
  flex:1 1 150px;min-width:0;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.ho-sum-i b{
  display:block;font-family:var(--font-mono);font-size:1.28rem;font-weight:800;
  line-height:1.1;color:var(--text);
}
.ho-sum-i i{display:block;margin-top:2px;font-size:.72rem;font-style:normal;color:var(--text-3);}

.ho-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;}
.ho-grid > *{min-width:0;}
.ho-card{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:14px 16px;min-width:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;transition:border-color var(--t),background var(--t),transform var(--t);
}
.ho-card:hover{border-color:var(--border-strong);background:var(--surface-2);transform:translateY(-1px);}
.ho-card.is-done{border-left:2px solid var(--gold-600);}
.ho-nr{
  flex:none;font-family:var(--font-mono);font-size:1.05rem;font-weight:800;
  color:var(--text-3);letter-spacing:.02em;
}
.ho-card-txt{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0;}
.ho-thema{
  font-family:var(--font-display);font-size:.96rem;font-weight:700;color:var(--text);
  overflow-wrap:anywhere;
}
.ho-uz{font-size:.78rem;font-style:normal;color:var(--text-3);overflow-wrap:anywhere;}
.ho-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.ho-sek{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}
.ho-best,.ho-new{
  font-family:var(--font-mono);font-size:.76rem;font-weight:700;
  padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
}
.ho-best.is-full{background:var(--gold-100);border-color:var(--gold-600);color:var(--gold-700);}
[data-theme="dark"] .ho-best.is-full{color:var(--gold);border-color:var(--gold);}

.ho-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}

/* ---------- B. Mashq varaqasi ---------- */
.ho-work{display:flex;flex-direction:column;gap:16px;}

/* Vazifa (Aufgabe) — hujjat parchasi, chapda qizil Sprachlinie */
.ho-auf{
  padding:16px 18px;
  background:var(--surface-2);border:1px solid var(--border);
  border-left:2px solid var(--red-600);border-radius:var(--radius-sm);
}
.ho-auf-tag{
  font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.ho-auf-txt{margin:6px 0 0;font-size:.98rem;line-height:1.6;color:var(--text);}
.ho-auf-uz{margin:6px 0 0;font-size:.78rem;line-height:1.5;color:var(--text-3);}

/* Pleyer */
.ho-player{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
}
.ho-player.is-live{border-color:var(--gold-600);}
.ho-player.is-warn{border-style:dashed;}
.ho-play-info{font-size:.84rem;line-height:1.5;color:var(--text-2);}
.ho-play-info b{color:var(--text);}
.ho-play-info i{
  display:block;font-family:var(--font-mono);font-size:.74rem;font-style:normal;color:var(--text-3);
}
.ho-slow{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-2);cursor:pointer;}
.ho-slow input{width:16px;height:16px;accent-color:var(--gold-600);cursor:pointer;}
.ho-yt{width:100%;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--ink);}
.ho-yt iframe{width:100%;height:100%;border:0;display:block;}
.ho-player audio{width:100%;}
.ho-quelle{margin:8px 0 0;width:100%;font-size:.74rem;color:var(--text-3);}

/* Savollar */
.ho-fpanel .panel-title{margin-bottom:14px;}
.ho-frage{
  display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--border);
}
.ho-frage:first-of-type{border-top:0;padding-top:0;}
.ho-f-num{
  flex:none;width:26px;height:26px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
}
.ho-frage.is-ok .ho-f-num{background:var(--gold-100);border-color:var(--gold-600);color:var(--gold-700);}
[data-theme="dark"] .ho-frage.is-ok .ho-f-num{color:var(--gold);border-color:var(--gold);background:transparent;}
.ho-frage.is-no .ho-f-num{border-color:var(--red-600);color:var(--red);}
.ho-f-body{flex:1 1 auto;min-width:0;}
.ho-f-typ{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.ho-f-q{margin:5px 0 10px;font-size:.98rem;line-height:1.55;color:var(--text);overflow-wrap:anywhere;}

.ho-opts{display:flex;flex-direction:column;gap:7px;}
.ho-opt{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:9px 12px;min-width:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color var(--t),background var(--t);
}
.ho-opt:hover:not(:disabled){border-color:var(--border-strong);}
.ho-opt:disabled{cursor:default;}
.ho-opt.is-sel{border-color:var(--text-2);background:var(--surface);}
.ho-opt.is-right{border-color:var(--gold-600);background:var(--gold-100);}
[data-theme="dark"] .ho-opt.is-right{background:transparent;border-color:var(--gold);}
.ho-opt.is-wrong{border-color:var(--red-600);}
.ho-opt .eo-txt{overflow-wrap:anywhere;}

.ho-f-ex{
  margin:9px 0 0;padding:9px 12px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.82rem;line-height:1.55;color:var(--text-2);
}
.ho-f-ex b{color:var(--text);}

.ho-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;}
.ho-hint{font-family:var(--font-mono);font-size:.76rem;color:var(--text-3);}

/* Natija */
.ho-result{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;
  background:var(--surface);border:1px solid var(--gold-600);border-radius:var(--radius);
}
.ho-res-num{
  flex:none;font-family:var(--font-mono);font-size:2rem;font-weight:800;line-height:1;color:var(--gold-700);
}
[data-theme="dark"] .ho-res-num{color:var(--gold);}
.ho-res-num i{font-size:1rem;font-style:normal;color:var(--text-3);}
.ho-res-txt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ho-res-txt b{font-size:.94rem;color:var(--text);}
.ho-res-txt i{font-family:var(--font-mono);font-size:.74rem;font-style:normal;color:var(--text-3);}
.ho-res-bar{flex:1 1 100%;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.ho-res-bar span{display:block;height:100%;background:var(--gold-600);}

/* Transkript — avval yopiq */
.ho-skript{
  padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
}
.ho-skript-hint{margin:9px 0 0;font-size:.78rem;line-height:1.55;color:var(--text-3);}
.ho-lines{margin-top:12px;display:flex;flex-direction:column;gap:2px;}
.ho-line{
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding:8px 0;border-top:1px solid var(--border);
  font-size:.92rem;line-height:1.7;color:var(--text-2);
}
.ho-line:first-child{border-top:0;}
.ho-line b{
  flex:none;min-width:104px;font-family:var(--font-mono);font-size:.76rem;
  color:var(--text);padding-top:2px;
}
.ho-line span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.ho-line .speak-btn{flex:none;width:28px;height:28px;}

/* Yangi so'zlar */
.ho-wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.ho-wgrid > *{min-width:0;}
.ho-w{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.ho-w-de{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;
  font-family:var(--font-display);font-size:.98rem;
}
.ho-w-de b{font-weight:700;color:var(--text);overflow-wrap:anywhere;}
.ho-w-de .speak-btn{width:26px;height:26px;}
.ho-w-uz{font-size:.84rem;color:var(--text-2);overflow-wrap:anywhere;}
.ho-w-pl{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);}
.ho-w-bsp{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:3px;padding-top:7px;border-top:1px solid var(--border);
  font-size:.82rem;line-height:1.5;color:var(--text-3);overflow-wrap:anywhere;
}
.ho-w-bsp .speak-btn{width:24px;height:24px;}

/* ---------- C. TELEFON (QOIDA 83) ---------- */
@media (max-width:560px){
  .ho-grid{grid-template-columns:1fr;}
  .ho-card{gap:11px;padding:12px 13px;}
  .ho-sum-i{flex:1 1 46%;padding:10px 12px;}
  .ho-sum-i b{font-size:1.1rem;}
  .ho-player{gap:10px;padding:12px 13px;}
  .ho-wgrid{grid-template-columns:1fr;}
  .ho-line{flex-wrap:wrap;gap:4px;}
  .ho-line b{min-width:0;}
  .ho-nav .btn{flex:1 1 100%;justify-content:center;}
}

/* ============================================================
   37. LESEN — O'QIB TUSHUNISH (ETAP 62)
   ------------------------------------------------------------
   ⚠️ TAKROR CSS YOZILMAYDI. Lesen ekranlarining ko'p qismi Hören
   bilan bir xil ko'rinadi (savol, variant, natija, yangi so'zlar,
   ro'yxat kartasi), shuning uchun HTML da IKKI sinf yoziladi:
   `class="ho-frage le-frage"`. Ko'rinish 36-bo'limdan keladi, bu
   yerda esa faqat Lesen'ning O'ZIGA XOS qismlari turadi:
     · `.le-art`     — matn turi belgisi (E-Mail · Anzeige · Brief …)
     · `.le-doc`     — matn varaqasi va uning ustidagi tugmalar
     · `.le-abs`     — raqamlangan abzats (`abs` savoli shunga tayanadi)
     · `.le-mark`    — matnda belgilangan yangi so'z
   Shu tufayli Hören ko'rinishi o'zgarsa, Lesen ham o'zi bilan birga
   o'zgaradi — ikki joyda ikki xil sayt bo'lib qolmaydi.
   ============================================================ */

/* Matn turi — ro'yxatdagi kichik belgi va varaqdagi kattarog'i */
.le-art{
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.le-art.big{font-size:.72rem;color:var(--text-2);}

/* Matn varaqasi */
.le-doc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.le-tools{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);
}
.le-markbox{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-2);cursor:pointer;}
.le-markbox input{width:16px;height:16px;accent-color:var(--gold-600);cursor:pointer;}

.le-text{padding:6px 16px 16px;}
.le-abs{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
.le-abs:first-child{border-top:0;}
.le-abs-nr{
  flex:none;width:24px;height:24px;margin-top:2px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
}
.le-abs-txt{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:1rem;line-height:1.75;color:var(--text);overflow-wrap:anywhere;
}

/* Belgilangan yangi so'z — oltin, tungi rejimda to'ldirilmaydi (QOIDA 78) */
.le-mark{
  font-weight:600;color:var(--text);
  background:var(--gold-100);border-bottom:1px solid var(--gold-600);
  border-radius:2px;padding:0 2px;
}
[data-theme="dark"] .le-mark{background:transparent;color:var(--gold);border-bottom-color:var(--gold);}

/* ---------- TELEFON (QOIDA 83) ---------- */
@media (max-width:560px){
  .le-tools{padding:10px 12px;}
  .le-text{padding:4px 12px 12px;}
  .le-abs{gap:9px;}
  .le-abs-txt{font-size:.95rem;line-height:1.7;}
  .le-card .ho-card-meta{align-items:flex-end;}
}