/* Darsxona — umumiy uslub.

   Dizayn KENG EKRANDAN boshlanadi: informatika xonasida bola kompyuter oldida
   o'tiradi, telefon esa zaxira (uyga vazifa, dars yozuvi, kompyuter yetmagan
   holat). Torayganda soddalashadi, teskarisi emas.

   Ranglar YORUG' — sinf kunduzi yorug', proyektor esa rangni QO'SHADI:
   qora fon devorda kulrangga aylanib, kontrast yo'qoladi. Qurilmasi qorong'i
   rejimda bo'lgan bola (kechqurun uyga vazifa) o'shanga ergashadi.

   Uch ekran bitta komponent kutubxonasidan foydalanadi, lekin uch xil
   o'lchovda: `body.board` (proyektor), `body.student`, `body.teacher`. */

:root {
  --bg: #F4F6FA;
  --panel: #FFFFFF;
  --panel-2: #EDF1F8;
  --line: #D3DBE8;
  /* Kod muharriridagi chekinish chizig'i — ATAYLAB ko'zga tashlanadigan:
     boshlovchi bola blok qayerda boshlanib, qayerda tugashini shundan
     ko'radi. Oddiy ajratuvchi chiziqdan (`--line`) to'qroq. */
  --kod-chiziq: #7FA0E0;
  --fg: #101623;
  --muted: #5A6580;
  --accent: #1F5AD1;
  --ok: #17914A;
  --warn: #B26A00;
  --bad: #C42D2D;
  --oylash: #7A4FD6;
  --tint-accent: #E4EBFB;
  --tint-ok: #E2F3E9;
  --tint-bad: #FBE7E7;
  --tint-asos: #E8EFFC;
  --tint-misol: #E4F5EA;
  --tint-diqqat: #FBF0DC;
  --tint-xato: #FBE7E7;
  --tint-oylash: #EFE8FB;
  --shot: #E8EDF6;
  --on-ok: #FFFFFF;

  --radius: 14px;
  --pad: 16px;
  --maxw: 900px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420;
    --panel: #182034;
    --panel-2: #202a42;
    --line: #2c3852;
    --kod-chiziq: #4C74C4;
    --fg: #eef2f9;
    --muted: #9aa8c2;
    --accent: #4f8cff;
    --ok: #35c46a;
    --warn: #ffb020;
    --bad: #ff5c5c;
    --oylash: #b98cff;
    --tint-accent: #1d2b4a;
    --tint-ok: #14331f;
    --tint-bad: #331717;
    --tint-asos: #16223c;
    --tint-misol: #14291d;
    --tint-diqqat: #2a2313;
    --tint-xato: #2b1820;
    --tint-oylash: #211a35;
    --shot: #0b0f18;
    --on-ok: #06240f;
  }
}

/* Proyektor HAR DOIM yorug': sinf yoritilishi noma'lum, eng xavfsizi shu. */
body.board {
  --bg: #F4F6FA;
  --panel: #FFFFFF;
  --panel-2: #EDF1F8;
  --line: #D3DBE8;
  /* Kod muharriridagi chekinish chizig'i — ATAYLAB ko'zga tashlanadigan:
     boshlovchi bola blok qayerda boshlanib, qayerda tugashini shundan
     ko'radi. Oddiy ajratuvchi chiziqdan (`--line`) to'qroq. */
  --kod-chiziq: #7FA0E0;
  --fg: #101623;
  --muted: #5A6580;
  --accent: #1F5AD1;
  --ok: #17914A;
  --warn: #B26A00;
  --bad: #C42D2D;
  --oylash: #7A4FD6;
  --tint-accent: #E4EBFB;
  --tint-ok: #E2F3E9;
  --tint-bad: #FBE7E7;
  --tint-asos: #E8EFFC;
  --tint-misol: #E4F5EA;
  --tint-diqqat: #FBF0DC;
  --tint-xato: #FBE7E7;
  --tint-oylash: #EFE8FB;
  --shot: #E8EDF6;
  --on-ok: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body { padding: var(--pad); max-width: var(--maxw); margin: 0 auto; }
/* O'quvchi kompyuter oldida — 900 px ustun ekranning yarmini bo'sh qoldirardi */
body.student { --maxw: 1200px; }
body.board { max-width: none; padding: 24px 32px; }

h1, h2, h3 { margin: 0 0 10px; line-height: 1.2; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.big { font-size: 22px; }
.center { text-align: center; }
.hide { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.spread { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: 14px;
}

button, .btn {
  font: inherit;
  font-weight: 600;
  color: var(--fg);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  min-height: 46px;          /* barmoq bilan bosish uchun */
  transition: filter .12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Bosilganda tugma QORAYADI, oqarmaydi.

   Ilgari `brightness(1.15)` ishlatilardi: yorug' temada och rangli tugma oqarib
   ketar va «tanlanmagan» bo'lib ko'rinardi — bosilgan tugma aksincha ajralib
   turishi kerak. Qatlam usuli har qanday fon ustida ishlaydi: birinchisi ham,
   ranglisi ham. */
button:hover, .btn:hover {
  background-image: linear-gradient(rgba(16, 22, 35, .06), rgba(16, 22, 35, .06));
}
button:active, .btn:active {
  background-image: linear-gradient(rgba(16, 22, 35, .16), rgba(16, 22, 35, .16));
}
@media (prefers-color-scheme: dark) {
  /* Tungi temada qorayish ko'rinmaydi — teskarisi qilinadi */
  button:hover, .btn:hover {
    background-image: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10));
  }
  button:active, .btn:active {
    background-image: linear-gradient(rgba(255, 255, 255, .20), rgba(255, 255, 255, .20));
  }
}
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ok { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
button.bad { background: transparent; border-color: var(--bad); color: var(--bad); }
button.ghost { background: transparent; }
button.small { min-height: 34px; padding: 6px 10px; font-size: 14px; border-radius: 9px; }

input, select, textarea {
  font: inherit;
  color: var(--fg);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.code-input {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 12px;
  text-align: center;
  padding: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
}
.pill.live { border-color: var(--ok); color: var(--ok); }
.pill.off  { border-color: var(--bad); color: var(--bad); }
.pill.warn { border-color: var(--warn); color: var(--warn); }

/* Kabinet voronkasi: har qadam oldingisining ichida — ustunning uzunligi
   shu qadarda odam qolganini ko'rsatadi. */
.fun-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fun-nom { flex: 0 0 46%; min-width: 0; font-size: 13px; }
.fun-bar { flex: 1 1 auto; height: 20px; border-radius: 6px; background: var(--panel-2); }
.fun-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.fun-n { flex: 0 0 74px; text-align: right; font-size: 13px;
         font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: 10px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.mods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.mod-btn {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px;
  min-height: 92px;
  gap: 2px;
}
.mod-btn .ic { font-size: 24px; }
.mod-btn .t { font-weight: 700; }
.mod-btn .d { font-size: 12px; color: var(--muted); font-weight: 400; white-space: normal; }
.mod-btn.active { border-color: var(--accent); background: var(--tint-accent); }

/* --- demo maydoni --- */
#stage { min-height: 220px; }
/* Proyektorda orqa partadan ko'rinishi kerak — demo kattalashtiriladi.
   `zoom` ichkaridagi qat'iy px o'lchamlarni ham birga kattalashtiradi
   (transform: scale dan farqli o'laroq joyni ham to'g'ri egallaydi). */
.board #stage { min-height: 55vh; zoom: 1.45; }
.board #question { zoom: 1.2; }
.stage-empty { color: var(--muted); text-align: center; padding: 40px 10px; }

/* --- savol --- */
/* Variant — o'quvchida <button>, doskada <div>. Ikkalasi bir xil ko'rinishi
   uchun bezak shu yerda takrorlanadi (div `button` qoidalariga tushmaydi). */
.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  justify-content: flex-start;
  font-size: 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 16px;
}
.opt .count { margin-left: auto; color: var(--muted); font-weight: 600; }

/* Yosh guruhlari. Sinf bosqichi serverdan keladi. Rang O'ZGARMAYDI —
   o'lcham, nishon kattaligi va burchak radiusi o'zgaradi: kichik sinfda
   yumshoqroq va kattaroq, yuqori sinfda zichroq va tinchroq. */
body.student[data-band="5-6"] { font-size: 20px; --radius: 18px; }
body.student[data-band="5-6"] .opt { padding: 16px 18px; font-size: 21px; }
body.student[data-band="5-6"] .big { font-size: 25px; }

body.student[data-band="7-9"] { font-size: 18px; }
body.student[data-band="7-9"] .opt { padding: 13px 17px; font-size: 19px; }

body.student[data-band="10-11"] { font-size: 16.5px; --radius: 12px; }
body.student[data-band="10-11"] .opt { padding: 10px 15px; font-size: 17px; }

/* Variant harfi ajratilgan doirada. Ikki ish qiladi: kichik sinfda
   o'qituvchi «B ni bosinglar» desa bola darhol topadi, kompyuterda esa bu
   klaviatura tugmasi — A–D yoki 1–4 bosiladi. */
.opt .letter {
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--accent);
  font-weight: 700;
  font-size: .88em;
  font-variant-numeric: tabular-nums;
}
.opt.correct .letter { border-color: var(--ok); color: var(--ok); }
.opt.wrong .letter { border-color: var(--bad); color: var(--bad); }
.opt.chosen .letter { border-color: var(--accent); }

/* Keng ekranda variantlar ikki ustunga tiziladi — 1366 px da ustun bo'lib
   cho'zilib ketmaydi va hammasi bir qarashda ko'rinadi. */
@media (min-width: 720px) {
  #question, #activity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
  }
  #question > *:not(.opt), #activity > *:not(.opt) { grid-column: 1 / -1; }
  #question .opt, #activity .opt { margin-bottom: 0; }
}
.opt.chosen { border-color: var(--accent); background: var(--tint-accent); }
.opt.correct { border-color: var(--ok); background: var(--tint-ok); }
.opt.wrong   { border-color: var(--bad); background: var(--tint-bad); }

/* ---------- Bayon slaydi ----------
   Karta rangi qadamning rolini bildiradi. Fon qoraligicha qoladi, faqat
   ohangi o'zgaradi: proyektorda och fon ko'zni charchatadi. */
.slide {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--tone, var(--line));
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: 14px;
  /* Karta rangi yumshoq almashadi, o'zi esa joyida qoladi. */
  transition: background-color .3s ease, border-color .3s ease;
}
.slide.t-asos   { --tone: var(--accent); background: var(--tint-asos); }
.slide.t-misol  { --tone: var(--ok);     background: var(--tint-misol); }
.slide.t-diqqat { --tone: var(--warn);   background: var(--tint-diqqat); }
.slide.t-xato   { --tone: var(--bad);    background: var(--tint-xato); }
.slide.t-oylash { --tone: var(--oylash);  background: var(--tint-oylash); }

/* Bayon — kichik taqdimot: maydonni to'liq egallaydi, matn havodor,
   pastida qadam nuqtalari. Doskada butun devor, o'quvchida ekran balandligi. */
.slide {
  display: flex;
  flex-direction: column;
  min-height: var(--slide-min, 0);
  position: relative;          /* chiqib ketayotgan slayd uchun */
  overflow: hidden;
}
/* SLAYD QOLIPI — 800×600, hamma ekranda bir xil (`DX.fit`, `core.js`).

   Ilgari har ekran slaydni O'Z kengligida chizardi: doska 4:3 da,
   o'quvchi 1200 px ustunda (~1200×504), pult ko'zgusi kichik kartada.
   Ko'rinishi bir xil edi-yu, GEOMETRIYASI boshqa: matn boshqa joyda
   ko'chardi, element boshqa katakka tushardi. Shu sababli «mana bu yerni
   ko'rsatyapman» degan nuqtani uzatib bo'lmasdi — u har ekranda boshqa
   narsani ko'rsatardi.

   Endi slayd HAR JOYDA 800×600 da chiziladi va butun qolip bir tekis
   kattalashtiriladi. Uchala ekran — bitta rasmning uch nusxasi.

   Bu FAQAT bayonga tegadi: savol, mashq, material va demo ilgarigidek
   o'z enini oladi (o'quvchi ekranidagi «ish joyi» mulohazasi o'sha yerda
   kuchda qoladi). */
.dx-fit {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.dx-fit-in {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fit-w, 960px);
  height: var(--fit-h, 600px);
  transform-origin: 0 0;
}
/* Slaydning o'z klassini `slide.render` qayta yozadi (`box.className = ...`),
   shuning uchun o'lcham OTASIDAN beriladi — aks holda bu qoida qadam
   almashgan zahoti yo'qolardi. Ayni shu tuzoq ko'zguda bor edi: qolip
   4:3 emas, mazmun balandligida chiqardi. */
.dx-fit-in > .slide {
  height: 100%;
  --slide-min: 600px;
  font-size: 20px;
  max-width: none;
  margin-inline: 0;
}
.dx-fit-in > .slide h2 { font-size: 26px; }

/* CHIZMA — slayd ustiga chizilgan chiziqlar.

   SVG qolipning O'ZI bilan bir xil fazoda (`viewBox="0 0 800 600"`), ya'ni
   chiziq qolip bilan birga kattalashadi va uch ekranda bir joyda yotadi.
   Qalinlik ham shu fazoda: 4 birlik doskada ~6 px, ko'zguda ~2,5 px —
   ikkalasida ham qo'l bilan chizilgandek ko'rinadi.

   `pointer-events: none`: chizma slayd ustida yotadi, lekin bosishni
   yeb qo'ymaydi. */
.dx-draw {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.dx-draw path, .dx-draw rect, .dx-draw ellipse, .dx-draw line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dx-draw polygon { stroke: none; }

/* RANG — qiymat emas, ROL. Chizma mavzu (yorug'/tungi) o'zgarganda ham
   o'qiladigan qolishi kerak, shuning uchun qiymat CSS da turadi va
   komponent faqat rolni yuboradi. Bu — loyihaning umumiy qoidasi.

   `polygon` (strelka uchi) TO'LDIRILADI, qolgani chiziladi. */
.dx-draw .r-qizil  { stroke: var(--bad); }
.dx-draw .r-qizil  polygon, .dx-draw polygon.r-qizil  { fill: var(--bad); }
.dx-draw .r-kok    { stroke: var(--accent); }
.dx-draw .r-kok    polygon { fill: var(--accent); }
.dx-draw .r-yashil { stroke: var(--ok); }
.dx-draw .r-yashil polygon { fill: var(--ok); }
.dx-draw .r-sariq  { stroke: var(--warn); }
.dx-draw .r-sariq  polygon { fill: var(--warn); }
.dx-draw .r-qora   { stroke: var(--fg); }
.dx-draw .r-qora   polygon { fill: var(--fg); }

/* MATN — chiziq emas, harf: chegarasi bilan emas, to'ldirish bilan
   chiziladi. Oq halo qo'yiladi, aks holda to'q rasm ustidagi yozuv
   o'qilmay qolardi. */
.dx-draw .dx-matn {
  stroke: #fff;
  stroke-width: 3;
  paint-order: stroke fill;
  font-weight: 700;
  font-family: inherit;
  dominant-baseline: middle;
}
/* Qo'l yozuvi ichidagi O'RGATILMAGAN belgi: pastki chizig'i qo'l
   yozuvi bilan bir xil bo'lishi kerak. */
.dx-draw .dx-matn-p { dominant-baseline: auto; stroke-width: 2; }
.dx-draw .dx-matn.r-qizil  { fill: var(--bad); }
.dx-draw .dx-matn.r-kok    { fill: var(--accent); }
.dx-draw .dx-matn.r-yashil { fill: var(--ok); }
.dx-draw .dx-matn.r-sariq  { fill: var(--warn); }
.dx-draw .dx-matn.r-qora   { fill: var(--fg); }

/* Ko'zguda chizish — sichqoncha «qalam» bo'ladi, matn belgilanib
   ketmasin (sudrash matnni tanlab, chiziq o'rniga ko'k dog' qoldirardi). */
.dx-ptr-host { cursor: crosshair; touch-action: none; user-select: none; }
/* Sensorli ekranda pult ko'zgusida IKKI barmoq — brauzerning o'z
   kattalashtirishi (bir barmoq esa chizadi). Yozish rejimida (`.dx-yozish`)
   kattalashtirishni sahifaning o'zi qiladi — u yerda brauzerniki o'chiq. */
@media (pointer: coarse) {
  #mirror .dx-ptr-host { touch-action: pinch-zoom; }
}
/* Tayyor yozuv ustida — surish ko'rsatkichi. */
.dx-ptr-host.dx-surma { cursor: move; }
.dx-ptr-host * { user-select: none; }

/* FORMULA QATLAMI — SVG ning ustida, o'sha 800×600 fazoda. Kasr va
   ildiz HTML bilan chiziladi: SVG da har bo'lakning o'rnini qo'lda
   hisoblash kerak bo'lardi. */
.dx-draw-h {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fit-w, 960px);
  height: var(--fit-h, 600px);
  pointer-events: none;
  z-index: 5;
}
.dx-f {
  position: absolute;
  /* Nuqta — yozuvning CHAP-O'RTASI: bosilgan joyga formulaning markazi
     to'g'ri kelsin, tepasi emas. */
  transform: translateY(-50%);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.15;
  /* Oq halo — to'q rasm ustida ham o'qilsin (matndagi bilan bir xil). */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
/* Ko'p qatorli yozuv (✒A bloknoti): nuqta — BIRINCHI qatorning o'rtasi
   (qator bo'yi 1.15em), aks holda har yangi qatorda yozuv yuqoriga surilardi. */
.dx-f.dx-kopqator { transform: translateY(-0.575em); }
/* YOZUV SOHASI: «matn» — qo'lyozma shrift, hech narsa almashtirilmaydi (bo'shliq va qatorlar saqlanadi);
   kod sohalari (python, js, html, mantiq, excel) — teng enli shrift, chekinish saqlanadi, sodda ranglash (`core.js: sohaYoz`). */
/* Matn slayd chetida (yoki belgilangan enda — `core.js: yozuvEn`) PASTGA ko'chadi; nuqta — birinchi qatorning o'rtasi:
   qator ko'chganda yozuv yuqoriga surilmaydi. */
.dx-f.dx-oddiy { white-space: pre-wrap; overflow-wrap: anywhere; transform: translateY(-0.575em); }
.dx-f.dx-kod {
  /* Pultdagi kod muharriri bilan bir xil ko'rinish: och fonli quti, qator raqamlari, oddiy qalinlik. Qalam rangi — chap
     chetdagi chiziq (matn rangi emas: kodning o'z ranglari bor). Nuqta — BIRINCHI qatorning o'rtasi: qator qo'shilganda
     quti joyidan siljimaydi (0,45em ichki chekinish + 0,75em — 1,5 qator bo'yining yarmi). */
  white-space: pre;
  tab-size: 4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
  line-height: 1.5;
  padding: .45em .7em .45em .2em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: .22em solid currentColor;
  border-radius: .45em;
  text-shadow: none;
  transform: translateY(-1.2em);
  --kod-raqam: 1.9em;
}
.dx-f.dx-kod .dx-kod-ich { display: block; color: var(--fg); }
.dx-f.dx-kod i { font-style: normal; }
.dx-f.dx-kod .k-n { padding-right: .5em; }
.dx-f.r-qizil  { color: var(--bad); }
.dx-f.r-kok    { color: var(--accent); }
.dx-f.r-yashil { color: var(--ok); }
.dx-f.r-sariq  { color: var(--warn); }
.dx-f.r-qora   { color: var(--fg); }

/* Formulaning ichki tuzilishi. `inline-flex` ustun — kasrning surati va
   maxraji bir-birining ustida, chiziq esa ular orasida. */
.f-op { margin: 0 .22em; }
.f-kasr {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* O'rni `DX.formulaTekisla` da O'LCHAB qo'yiladi: kasr chizig'i
     matematik o'q ustida, ya'ni `=` belgisi bilan bir sathda turishi
     kerak. `middle` esa kasrning geometrik markazini oladi va surati
     baland bo'lsa chiziq pastga tushib ketadi. Bu yerdagi `middle` —
     zaxira: o'lchov ishlamagan joyda (masalan sinovdagi soxta DOM)
     hech bo'lmasa qatorning o'rtasida tursin. */
  vertical-align: middle;
  margin: 0 .14em;
}
.f-yuq { padding: 0 .25em; }
.f-past { padding: 0 .25em; }
/* Kasr chizig'i — ustunning eng keng bo'lagigacha (`stretch`). Maxrajning
   chegarasi bo'lganida u faqat maxraj kengligida chizilardi. */
.f-chiz {
  align-self: stretch;
  height: .08em;
  min-height: 1px;
  margin: .07em 0;
  background: currentColor;
  border-radius: .04em;
}
.f-sqrt { display: inline-flex; align-items: stretch; margin: 0 .08em; }
/* CHO'ZILADIGAN BELGILAR (ildiz, qavs, integral, yig'ma) — svg. Eni
   qat'iy, bo'yi esa qatordan olinadi, ya'ni ichidagi ifodaga teng. */
.f-str {
  flex: 0 0 auto;
  align-self: stretch;
  overflow: visible;
}
.f-w-sqrt { width: .6em; }
.f-w-qavs { width: .42em; }
.f-w-int  { width: .5em; }
.f-w-sum  { width: .78em; }
/* QAVS ichidagi ifoda belgilarga tegib ketmasin. */
.f-qavs { display: inline-flex; align-items: stretch; position: relative; }
.f-qavs > .f-ich { padding: 0 .06em; }
/* KATTA AMAL: belgi va undan keyingi ifoda bir qatorda, belgi esa
   ifoda bo'yiga cho'ziladi.

   Ifoda MARKAZDA turadi (`center`). Avval u ham cho'zilib, matni
   qutining tepasida qolardi: `Σ` ning chegaralari belgini balandroq
   qilgani uchun yonidagi ifoda yuqoriga chiqib ketardi. Belgi va
   chegaralar ustuni esa `stretch` bo'lib qoladi — belgi ifoda bo'yiga
   yetishi kerak. */
.f-katta { display: inline-flex; align-items: center; position: relative;
  margin: 0 .1em; }
.f-katta > .f-ich { padding-left: .12em; }
/* Chegaralar: yig'mada belgining tepasi va tagida, integralda yonida. */
.f-lim-ust {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
}
.f-lim-ust > .f-str { flex: 1 1 auto; min-height: .6em; }
.f-lim-yon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 auto;
}
.f-l { font-size: .55em; line-height: 1.1; white-space: nowrap; }
/* Qavsning darajasi — o'ng tepasida, indeksi esa o'ng pastida. */
.f-dar {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  flex: 0 0 auto;
  margin-left: .04em;
}
.f-ust {
  border-top: .08em solid currentColor;
  padding: .1em .15em 0 .04em;
}
.dx-f sup, .dx-f sub { font-size: .62em; line-height: 0; }

/* QO'LYOZMA SHRIFT — «Patrick Hand» (SIL OFL, o'zimizda joylashgan).

   Nega tayyor shrift, o'qituvchining o'z chiziqlari emas: o'z qo'l
   yozuvidan yasalgan shrift chiroyli, lekin har belgi bitta namunadan
   iborat bo'lib, o'qilishi beqaror chiqadi va formulada ayniqsa
   xavfli. Qolaversa uni sinf ekraniga uzatish kerak bo'lardi.

   Nega AYNAN Patrick Hand: tik (qiya emas), raqamlari aniq, «1» bilan
   «l» adashmaydi — formula uchun eng muhimi shu. Caveat chiroyliroq,
   lekin qiya va o'xshash belgilari ko'p.

   O'zimizda joylashgan: sinfda internet sekin yoki yo'q bo'lishi
   mumkin, tashqi manbadan yuklanadigan shrift esa dars o'rtasida
   yo'qolishi mumkin. */
@font-face {
  font-family: 'Qolyozma';
  src: url('/static/shrift/patrick.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Saralash `.dx-draw .dx-matn` dan KUCHLIROQ bo'lishi kerak: u
   `font-family: inherit` qo'yadi va shriftni bosib qo'yardi. */
.dx-draw .dx-qolyozma, .dx-f-korinish .dx-qolyozma, .dx-qolyozma {
  font-family: 'Qolyozma', 'Segoe Script', 'Ink Free', 'Comic Sans MS', cursive;
  font-weight: 400;
  letter-spacing: .01em;
}

/* YOZUV MAYDONI — hali yakunlanmagan yozuv. Tayyor yozuv bilan BIR
   XIL chiziladi (`.dx-f`), shunda «Tayyor» bosilganda ko'rinish
   o'zgarmaydi. Matn esa panelda, brauzerning o'z maydonida teriladi —
   kursor, o'qlar va belgilash o'sha yerdan tekinga keladi.

   Yozuv RAMKADA turadi: tahrirlanayotgan yozuv tayyorlaridan
   ajralib tursin va chegarasi ko'rinsin — «A+»/«A−» bilan o'lchamini
   o'zgartirganda qayerdan qayergacha ekani bilinadi. Ramka faqat
   o'qituvchining ko'zgusida: sinf ekraniga yuborilmaydi. */
.dx-yozuv {
  z-index: 7;
  /* Ustiga yozish DAVOM etadi: maydon sichqonchani ushlab qolsa,
     ramka ichiga keyingi belgini chizib bo'lmasdi. */
  pointer-events: none;
  outline: 1px dashed currentColor;
  outline-offset: 5px;
  opacity: .95;
}
/* Bo'sh yozuv — joyi ko'rinib tursin, aks holda ramka hech narsasiz
   qolib, o'qituvchi maydon ochilganini bilmasdi. */
.dx-bosh { opacity: .45; font-style: normal; }
/* Yozuv panelidagi formula tugmalari va izoh — alohida qatorda. */
.dx-yozuv-tugma { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 3px;
  padding-top: 6px; border-top: 1px solid var(--line); }
.dx-yozuv-tugma .p-tool { min-width: 32px; min-height: 30px; font-size: 14px; }


/* QALAM UCHI — mayda rejimdagi O'Z ko'rsatkichimiz.

   Mayda rejimda tizim ko'rsatkichi o'z yo'lida KATTA yuradi, siyoh esa
   kichik chiqadi. Ko'z ko'rsatkichni kuzatgani uchun ikkovi bir-biriga
   mos kelmay qoladi va yozib bo'lmaydi. Shuning uchun tizim ko'rsatkichi
   yashiriladi (`.dx-kursorsiz`) va uning o'rniga shu nuqta chiziladi —
   u AYNAN siyoh chiqayotgan joyda turadi.

   Kichik va ingichka: u qalamning uchi, e'tiborni tortadigan belgi emas. */
.dx-kursorsiz, .dx-kursorsiz * { cursor: none !important; }
.dx-qalam {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
  z-index: 7;
}
.dx-qalam::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--accent);
}

/* MATN MAYDONI — slaydning O'ZIDA, qolip ichida. Qolip bilan birga
   masshtablanadi, ya'ni terilayotgan matn doskada qanday chiqsa shunday
   ko'rinadi. `transform-origin` chapda: maydon bosilgan nuqtadan
   o'ngga o'sadi. */
.dx-matn-inp {
  position: absolute;
  min-width: 120px;
  padding: 2px 6px;
  border: 2px dashed currentColor;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  outline: none;
  z-index: 6;
}
.dx-matn-inp.r-qizil  { color: var(--bad); }
.dx-matn-inp.r-kok    { color: var(--accent); }
.dx-matn-inp.r-yashil { color: var(--ok); }
.dx-matn-inp.r-sariq  { color: var(--warn); }
.dx-matn-inp.r-qora   { color: var(--fg); }

/* FORMULA PANELI — maydon ochilganda ko'zguning ustida suzadi.
   Ko'zgu ICHIDA emas: bu o'qituvchining asbobi, slaydning bir qismi
   emas — qolip bilan birga kichrayib ketmasligi kerak.

   Ichida jonli ko'rinish ham bor: `(a+b)/2` kasr bo'lib chiqishini
   o'qituvchi TERIB TURGANDA ko'radi, «tayyor» bosgandan keyin emas. */
.dx-f-panel {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 22, 35, .18);
}
.dx-f-panel .p-tool { min-width: 32px; min-height: 30px; font-size: 14px; }
.dx-f-korinish {
  flex: 1 1 100%;
  min-height: 1.6em;
  padding: 4px 6px 2px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
  font-weight: 700;
  white-space: nowrap;
  overflow-x: auto;
}
.dx-f-korinish.r-qizil  { color: var(--bad); }
.dx-f-korinish.r-kok    { color: var(--accent); }
.dx-f-korinish.r-yashil { color: var(--ok); }
.dx-f-korinish.r-sariq  { color: var(--warn); }
.dx-f-korinish.r-qora   { color: var(--fg); }
/* Ko'rinish formulaning O'ZI bilan bir xil chiziladi: kasr, ildiz va
   amal qoidalari (`.f-kasr`, `.f-sqrt`, `.f-chiz` ...) umumiy, shu
   sababli bu yerda takrorlanmaydi — avval takrorlangan va ikki joyni
   birdek tuzatishni unutish oson edi. Faqat daraja/indeks alohida:
   umumiysi `.dx-f` ichiga yozilgan. */
.dx-f-korinish sup, .dx-f-korinish sub { font-size: .62em; line-height: 0; }
/* Formula maydonida yozuv XOM ko'rinadi (`2^10`), shuning uchun bir
   xil kenglikdagi shrift: belgilar adashmaydi. */
.dx-f-inp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* TANISH PANELI — qo'lda yozilganning natijasi. Formula panelining
   qolipini ishlatadi, lekin bitta qatorda: yorliq, tuzatiladigan maydon,
   ikkita tugma va tagida ko'rinish. */
.dx-t-panel { flex-wrap: wrap; }
.dx-t-yorliq { font-weight: 700; font-size: 14px; color: var(--muted); }
.dx-t-inp {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 6px 10px;
  font-size: 17px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--fg);
}
.dx-t-panel .p-sbtn { flex: 0 0 auto; }
/* KURSOR SLAYDDA (faqat pult ko'zgusida): keyingi belgi qayerga tushishi; tanlangan «□» ajratib ko'rsatiladi. */
.dx-yozuv .dx-kursor {
  display: inline-block; width: 0; height: 1.1em; vertical-align: text-bottom; position: relative;
}
.dx-yozuv .dx-kursor::after {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 1px;
  background: var(--accent); animation: dx-kursor-miltilla 1.1s steps(1) infinite;
}
@keyframes dx-kursor-miltilla { 50% { opacity: 0; } }
.dx-yozuv .dx-tanlangan { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 3px; outline: 1.5px solid var(--accent); }
/* SOHA TUGMALARI (✒A): yozuv turi — Matn / Formula / Python / JS / HTML / Mantiq / Excel. */
.dx-t-soha { flex: 1 1 100%; order: -2; display: flex; flex-wrap: wrap; gap: 4px; }
.dx-t-panel .dx-t-soha-b { min-height: 28px; padding: 0 10px; font-size: 13px; }
.dx-t-panel .dx-t-soha-b.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dx-t-panel .dx-t-soha-b.taklif { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent); }
/* Kod sohalarida yordamchi qator — qoliplar (`qolip.js`): teng enli shrift, belgilar ixchamroq. */
.dx-t-panel .dx-t-qolip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; padding: 0 10px; }
.dx-t-panel .dx-t-q-nom { color: var(--accent); }
.dx-t-panel .dx-t-belgi { min-width: 32px; font-weight: 600; }
.dx-t-panel .dx-t-keyingi, .dx-t-panel .dx-t-enter { border-color: var(--accent); color: var(--accent); }
/* Python sohasida bloknot — kursdagi kod muharriri (`kodmuharrir.js`); panelda u ixcham bo'ladi. */
.dx-t-panel .dx-t-kod { flex: 1 1 140px; min-width: 120px; }
.dx-t-panel .dx-t-kod .kod-kirit { min-height: 0; max-height: none; flex: none; }
/* YORDAMCHI QATOR (til modeli, sinov): 6 ta ehtimolli harf (alifbo tartibida) + 3 ta so'z.
   Panelning eng tepasida, butun enida — yozayotgan qo'lga yaqin. */
.dx-t-taklif { flex: 1 1 100%; order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dx-t-panel .dx-t-harf { min-width: 40px; min-height: 38px; font-size: 19px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dx-t-panel .dx-t-harf.eng { border-color: var(--accent); color: var(--accent); }
.dx-t-ajrat { flex: 0 0 10px; }
.dx-t-panel .dx-t-soz { min-height: 38px; padding: 0 12px; font-size: 16px; font-weight: 700; }
.dx-t-soz-b { color: var(--muted); font-weight: 400; }
.dx-t-panel .dx-t-qirq { min-height: 38px; padding: 0 10px; font-size: 15px; color: var(--muted); border-style: dashed; }
/* ✒A BLOKNOTI — ko'p qatorli. Bitta qatordan boshlanadi (panel slaydni
   avvalgidan ortiq yopmasin), Enter bilan 5 qatorgacha o'sadi. */
.dx-t-bloknot {
  box-sizing: border-box;          /* balandlik JS da scrollHeight dan (chekinish bilan) */
  min-height: 0;                   /* umumiy textarea qoidasi 46px beradi — bitta qator avvalgi maydondek past bo'lsin */
  max-height: 7.8em;
  overflow-y: auto;
  line-height: 1.35;
  resize: vertical;
  white-space: pre-wrap;
}
.dx-t-panel .dx-t-probel, .dx-t-panel .dx-t-ochir { font-size: 16px; }
.dx-t-maslahat {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
/* O'rgatishda so'ralayotgan belgi — katta va ajralib tursin. */
.dx-orgat-belgi {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  min-width: 34px;
  text-align: center;
}

/* CHIZISH ASBOBLARI — ko'zgu tagidagi panel. Guruhlar ajratilgan:
   asbob | rang | qalinlik | shaffoflik | amal. Bitta uzun qatorda
   ular bir-biriga qo'shilib ketar va nima nimaligi bilinmasdi. */
.p-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.p-tool-g {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--panel-2);
  border-radius: 10px;
}
.p-tool {
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 15px;
  line-height: 1;
}
.p-tool:disabled { opacity: .35; }
/* Ikki belgili tugma («→A») — kengroq va kichikroq shriftda. */
.p-tool-w { min-width: 46px; font-size: 13px; font-weight: 700; }
.p-tool.on { background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent); }

/* Rang tugmasi — belgisi emas, RANGNING O'ZI ko'rinadi. */
.p-rang i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.p-rang.r-qizil  i { background: var(--bad); }
.p-rang.r-kok    i { background: var(--accent); }
.p-rang.r-yashil i { background: var(--ok); }
.p-rang.r-sariq  i { background: var(--warn); }
.p-rang.r-qora   i { background: var(--fg); }
/* Qalinlik va shaffoflik ham ko'rsatib turadi, yozib emas. */
.p-qal i { width: 18px; background: var(--fg); border-radius: 3px; display: block; }
.p-shaf i { width: 16px; height: 16px; border-radius: 50%; background: var(--fg); display: block; }

/* KO'RSATKICH — o'qituvchi slaydda nimani ko'rsatyapti.

   Qolip ichida yashaydi, ya'ni o'lchami slayd bilan birga o'zgaradi va uch
   ekranda bir xil joyga tushadi. Proyektorda ko'rinishi kerak, shuning
   uchun nuqta emas — HALQA: to'q dog' arzon proyektorda fonga singib
   ketadi, halqa esa chetidan ajralib turadi. Ichida mayda yadro: halqa
   kattaligicha turganda «aniq qayer?» degan savol qolardi.

   `pointer-events: none` SHART: aks holda halqa slayddagi elementlarning
   ustida turib, ularning hodisalarini yeb qo'yardi. */
.dx-ptr {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
  pointer-events: none;
  z-index: 5;
  /* Xabarlar sekundiga 25 marta keladi, sichqoncha esa 60 marta qimirlaydi —
     qisqa o'tish oraliqdagi sakrashni yumshatadi. Uzun bo'lsa ko'rsatkich
     qo'ldan orqada qolib, «kechikyapti» degan taassurot berardi. */
  transition: left .05s linear, top .05s linear;
}
.dx-ptr::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .dx-ptr { transition: none; }
}

/* TELEFONDA QOLIP OCHILADI.

   O'lchandi: 390 px enli telefonda qolipga 358 px qoladi, ya'ni masshtab
   0,45 — 20 px matn ekranda 9 px bo'lib chiqadi va o'qib bo'lmaydi. 4:3
   quti telefonda kichik bo'lishi muqarrar: uni hech qanday shrift
   tuzatmaydi, chunki kichraytirish BIR TEKIS.

   Shuning uchun tor ekranda slayd ilgarigidek oqimga qaytadi: matn
   telefon eniga moslashadi va o'qiladi. Buning narxi — o'sha ekranda
   ko'rsatkich va chizma ko'rsatilmaydi (geometriya boshqa). Sinfda bu
   hech narsani yo'qotmaydi: bola sinf kompyuterida o'tiradi. Faqat uyda
   telefondan yozuv ko'rayotgan bola chizmani ko'rmaydi — unga telefonni
   yon burish yoki kompyuterdan ochish aytiladi.

   Qaror CSS da turadi, `DX.fit` esa unga BO'YSUNADI: ikki joyda ikki xil
   chegara yozilsa, ular ertami-kechmi bir-biridan ajralib ketardi. */
@media (max-width: 559px) {
  body.student .dx-fit { height: auto !important; overflow: visible; }
  body.student .dx-fit-in {
    position: static;
    width: auto;
    height: auto;
    transform: none !important;
  }
  body.student .dx-fit-in > .slide {
    height: auto;
    --slide-min: 56vh;
    font-size: inherit;
  }
  body.student .dx-fit-in > .slide h2 { font-size: inherit; }
}

/* DOSKA REJIMI (web/doska.js) — telefonda slayd qolipi va chizmasi bilan
   butun ekranda. Tugma faqat sensorli yoki tor ekranda chiqadi:
   kompyuterda hech narsa o'zgarmaydi. */
.dx-doska-tugma { display: none; }
@media (pointer: coarse), (max-width: 559px) {
  body.student .dx-doska-tugma {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: -6px 0 14px;
    font-size: 15px;
    white-space: nowrap;
  }
}
.dx-doska-belgi { display: none; color: var(--bad); font-weight: 700; }
.dx-doska-tugma.bor .dx-doska-belgi { display: inline; }

body.doska-ochiq { overflow: hidden; }
.dx-doska {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Kadr — burilgan «ekran»: tik telefonda uning eni ekranning bo'yi. */
.dx-doska-kadr {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
/* Kamera — kattalashtirish va surish. Qolip ichidagi `transform` ga
   tegilmaydi: tor ekran qoidasi uni `!important` bilan o'chirib qo'ygan. */
.dx-doska-kamera {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fit-w, 960px);
  height: var(--fit-h, 600px);
  transform-origin: 0 0;
}
.dx-doska-kamera.silliq { transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .dx-doska-kamera.silliq { transition: none; }
}
/* Tor ekranning «oqim» qoidalari bu yerda BEKOR: slayd yana 800×600. */
body.student .dx-doska .dx-fit {
  width: var(--fit-w, 960px) !important;
  height: var(--fit-h, 600px) !important;
  overflow: hidden;
}
body.student .dx-doska .dx-fit-in {
  position: absolute !important;
  width: var(--fit-w, 960px) !important;
  height: var(--fit-h, 600px) !important;
  transform: none !important;
}
body.student .dx-doska .dx-fit-in > .slide {
  height: 100%;
  --slide-min: 600px;
  font-size: 20px;
  margin-bottom: 0;
}
body.student .dx-doska .dx-fit-in > .slide h2 { font-size: 26px; }
/* Panel YON chetda, ustun bo'lib: telefon 4:3 dan cho'ziqroq, ya'ni slayd
   yonida doim bo'sh joy qoladi — tepada tursa slaydning o'zini yopardi. */
.dx-doska-panel {
  position: absolute;
  top: 10px;
  right: max(10px, env(safe-area-inset-right), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 10;
}
.dx-doska-b {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 15px;
  border-radius: 10px;
  background: var(--panel);
  opacity: .92;
}
.dx-doska-b.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Sahifa tugmalarining nusxalari (yozuvda «Tushundim» va ijro) — o'sha yon
   chetning PASTIDA: bosh barmoq shu yerga yetadi. */
.dx-doska-boshqaruv {
  position: absolute;
  bottom: 12px;
  right: max(10px, env(safe-area-inset-right), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 10;
  max-width: 170px;
}
.dx-doska-bqator { display: flex; gap: 6px; justify-content: flex-end; }
.dx-doska-boshqaruv .dx-doska-b { min-width: 48px; min-height: 44px; padding: 6px 10px; }
/* Yon bo'shliq tor (390 px telefonda ~160 px): qatorda ko'pi bilan ikki tugma. */
.dx-doska-boshqaruv .dx-doska-b.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1;
}
.slide .slide-anim { flex: 1; display: flex; flex-direction: column; }
.slide .slide-body { flex: 1; }
/* Ustunli joylashuvlarda mazmun VERTIKAL markazda turadi — aks holda matn
   tepada qolib, pastda katta bo'sh joy qoladi. */
.slide.L-matn .slide-body,
.slide.L-tarif .slide-body,
.slide.L-erkin .slide-body { flex-direction: column; justify-content: center; }
.slide.L-rasm .slide-body { justify-content: center; }
.slide.L-yon .slide-body { align-items: center; }
.slide.L-erkin .slide-text { width: 100%; }

/* Aniq o'rin: 12 ustun × 8 qatorli to'r. Element qaysi katakka qo'yilgan
   bo'lsa o'sha yerda qoladi — yonidagisi ochilganda u qimirlamaydi.

   MUHIM: to'r faqat KENG ekranda ochiladi. Pultning kichkina ko'zgusida yoki
   telefonda 4/12 ustunga tushgan matn bir so'zdan qatorga bo'linib ketardi —
   o'sha yerda to'r yig'iladi va elementlar o'qilish tartibida ustma-ust
   tushadi. Ya'ni chizma tepada, izoh tagida: kichik ekranning O'Z tartibi. */
.slide .slide-body.slide-grid {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 760px) {
  .slide .slide-body.slide-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* `minmax(0, 1fr)` MUHIM. Oddiy `1fr` — bu `minmax(auto, 1fr)`, ya'ni
       qator MAZMUNGA qarab cho'ziladi: bitta qatorlik katakka qo'yilgan
       katta chizma butun slaydni uzaytirib yuborardi. Endi qator o'z
       ulushida qoladi, mazmun esa unga moslashadi. */
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: 4px 12px;
    align-content: stretch;
    justify-content: stretch;
    min-height: 0;
  }
  .slide-body.slide-grid > .slide-item {
    margin: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .slide-body.slide-grid > .i-royxat { display: block; align-self: center; }
  /* Chizma o'z katagiga sig'adi va nisbatini buzmaydi */
  .slide-body.slide-grid > .slide-media { justify-content: center; }
  .slide-body.slide-grid > .slide-media img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* TO'R QOLIP ICHIDA HAR DOIM ISHLAYDI.
   Yuqoridagi `@media (min-width: 760px)` OYNA enini o'lchaydi, qolip esa
   har doim 800 px. Telefonda to'r yig'ilib oqimga aylanardi va o'sha slayd
   doskadagidan BOSHQA ko'rinardi — o'lchandi: element 0,725 dan 0,53 ga
   siljirdi. Yozuvni telefondan ko'rayotgan bolada chizma ham, ko'rsatkich
   ham ana shunda joyidan chiqib qolardi. */
.dx-fit-in .slide .slide-body.slide-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* `minmax(0, 1fr)` MUHIM. Oddiy `1fr` — bu `minmax(auto, 1fr)`, ya'ni
     qator MAZMUNGA qarab cho'ziladi: bitta qatorlik katakka qo'yilgan
     katta chizma butun slaydni uzaytirib yuborardi. Endi qator o'z
     ulushida qoladi, mazmun esa unga moslashadi. */
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 4px 12px;
  align-content: stretch;
  justify-content: stretch;
  min-height: 0;
}
.dx-fit-in .slide-body.slide-grid > .slide-item {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dx-fit-in .slide-body.slide-grid > .i-royxat { display: block; align-self: center; }
/* Chizma o'z katagiga sig'adi va nisbatini buzmaydi */
.dx-fit-in .slide-body.slide-grid > .slide-media { justify-content: center; }
.dx-fit-in .slide-body.slide-grid > .slide-media img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* Hali ochilmagan element: ko'rinmaydi, lekin JOYI band turadi. Aks holda
   yangisi chiqqanda ekrandagilar pastga surilib, ko'zni chalg'itardi. */
.slide-item.ghost { visibility: hidden; }

/* Chiqib ketayotgan slayd yangisining tagida turadi va joyni surmaydi */
.slide-leaving {
  position: absolute;
  left: var(--pad); right: var(--pad); top: var(--pad); bottom: var(--pad);
  pointer-events: none;
}

/* ---------- Fon: rang emas, ROL ---------- */
.slide.bg-toza { background: var(--panel); }
.slide.bg-katak {
  background-color: var(--panel);
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* To'q fon — urg'u uchun. Ichkaridagi tokenlar almashadi, shuning uchun
   matn, ro'yxat va kod o'zi moslashadi. */
.slide.bg-toq {
  --panel: #12161F;
  --panel-2: #1B2130;
  --line: #2C3446;
  --fg: #EEF2F9;
  --muted: #9AA8C2;
  background: #12161F;
  color: #EEF2F9;
}

/* ---------- Slayd elementlari ---------- */
.slide-item { animation-fill-mode: both; }
.slide-item + .slide-item { margin-top: 14px; }

.i-royxat {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
}
.i-royxat li::marker { color: var(--tone, var(--accent)); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  /* Faqat AYNI HOZIR chiqayotgan ro'yxatning bandlari jonlanadi
     (`fx-…` sinfi bor). Ilgari shart yo'q edi: ekranda allaqachon
     turgan ro'yxat har qayta chizishda boshidan sakrab chiqardi. */
  .i-royxat[class*="fx-"] li {
    animation: fx-rise .3s cubic-bezier(.22, .61, .36, 1) both;
  }
}

pre.i-kod {
  margin: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
}

/* ---------- Chiqish effektlari ---------- */
@media (prefers-reduced-motion: no-preference) {
  .out-fade, .out-slide, .out-rise, .out-zoom, .out-flip {
    animation-duration: .28s;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
  }
  .out-fade  { animation-name: fx-out-fade; }
  .out-slide { animation-name: fx-out-slide; }
  .out-rise  { animation-name: fx-out-rise; }
  .out-zoom  { animation-name: fx-out-zoom; }
  .out-flip  { animation-name: fx-out-flip; }
}
@keyframes fx-out-fade  { from { opacity: 1 } to { opacity: 0 } }
@keyframes fx-out-slide { from { opacity: 1 } to { opacity: 0; transform: translateX(-30px) } }
@keyframes fx-out-rise  { from { opacity: 1 } to { opacity: 0; transform: translateY(-24px) } }
@keyframes fx-out-zoom  { from { opacity: 1 } to { opacity: 0; transform: scale(.93) } }
@keyframes fx-out-flip  { from { opacity: 1 }
                          to   { opacity: 0; transform: perspective(900px) rotateX(72deg) } }


.slide-dots { display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 16px; }
.slide-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: width .2s ease, background .2s ease;
}
.slide-dots i.on { background: var(--tone, var(--accent)); width: 22px; border-radius: 999px; }
/* Slayd ichidagi bosqichlar — nuqtalardan keyin, kichikroq */
.slide-dots b {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  margin-left: 2px;
}
.slide-dots b:first-of-type { margin-left: 12px; }
.slide-dots b.on { background: var(--muted); }

/* Ta'rif qutisi — yangi atama kiritilganda */
.slide-def {
  background: var(--panel-2);
  border-left: 4px solid var(--tone, var(--accent));
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.slide-def .k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tone, var(--accent));
  margin-bottom: 4px;
}
.slide-def .term { font-weight: 700; font-size: 1.15em; margin-bottom: 3px; }
.slide-def .d { color: var(--fg); }

/* Joylashuvlar */
.slide.L-rasm .slide-body { flex-direction: column-reverse; }
.slide.L-rasm .slide-media { flex: 1 1 auto; width: 100%; }
.slide.L-matn .slide-body,
.slide.L-tarif .slide-body { flex-direction: column; }

.slide-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slide-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tone, var(--muted));
  border: 1px solid var(--tone, var(--line));
  border-radius: 999px;
  padding: 2px 10px;
}
.slide-tag .ic { margin-right: 5px; }
.slide-count { font-size: 14px; color: var(--muted); margin-left: auto; }

/* Rasm keng ekranda matn yonida, telefonda esa tagida turadi. */
.slide-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.slide-text { flex: 1 1 300px; min-width: 0; }
.slide-title { font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.slide-p { font-size: 18px; }
.slide-media { flex: 1 1 260px; max-width: 100%; }
.slide-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--shot);
}

/* ---------- Qadamdan qadamga o'tish effektlari ----------
   Faqat `opacity` va `transform` — ular brauzerda arzon (qayta joylashtirish
   talab qilmaydi), ya'ni eski telefonda ham sakramaydi. Qisqa: dars ritmi
   animatsiyani kutib turmasin.
   Effekt SERVERDAN keladi (`step.effect`), `web/slide.js` uni klass qilib
   qo'yadi. Yangi effekt = shu yerga bitta @keyframes + db.py dagi ro'yxatga
   bitta nom. */
.slide-anim { transform-origin: top center; }

@media (prefers-reduced-motion: no-preference) {
  .slide-anim.fx-fade,
  .slide-anim.fx-slide,
  .slide-anim.fx-rise,
  .slide-anim.fx-zoom,
  .slide-anim.fx-flip {
    animation-duration: .32s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-fill-mode: both;
  }
  .slide-anim.fx-fade  { animation-name: fx-fade; }
  .slide-anim.fx-slide { animation-name: fx-slide; }
  .slide-anim.fx-rise  { animation-name: fx-rise; }
  .slide-anim.fx-zoom  { animation-name: fx-zoom; }
  .slide-anim.fx-flip  { animation-name: fx-flip; animation-duration: .44s; }

  /* HAR ELEMENTNING O'Z kirish effekti.
     Bu qoidalar uzoq vaqt YOZILMAY qolgan edi: `slide.js` elementga
     `fx-…` sinfini qo'yardi, lekin unga mos qoida yo'q edi. Natijada
     element effekti umuman ishlamas, ekranda esa butun kartaning
     (`.slide-anim`) effekti ko'rinardi — shuning uchun bitta element
     ochilganda EKRANDAGI HAMMASI qayta jonlangandek tuyulardi.

     Davomiylik va kechikish `slide.js` dagi vaqt chizig'idan, ya'ni
     inline uslubdan keladi va bu yerdagi sukut qiymatini bosadi. */
  .slide-item.fx-fade,
  .slide-item.fx-slide,
  .slide-item.fx-rise,
  .slide-item.fx-zoom,
  .slide-item.fx-flip {
    animation-duration: .38s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-fill-mode: both;
  }
  .slide-item.fx-fade  { animation-name: fx-fade; }
  .slide-item.fx-slide { animation-name: fx-slide; }
  .slide-item.fx-rise  { animation-name: fx-rise; }
  .slide-item.fx-zoom  { animation-name: fx-zoom; }
  .slide-item.fx-flip  { animation-name: fx-flip; }
}

@keyframes fx-fade  { from { opacity: 0 }                                       to { opacity: 1 } }
@keyframes fx-slide { from { opacity: 0; transform: translateX(30px) }          to { opacity: 1; transform: none } }
@keyframes fx-rise  { from { opacity: 0; transform: translateY(24px) }          to { opacity: 1; transform: none } }
@keyframes fx-zoom  { from { opacity: 0; transform: scale(.93) }                to { opacity: 1; transform: none } }
@keyframes fx-flip  { from { opacity: 0; transform: perspective(900px) rotateX(-72deg) }
                      to   { opacity: 1; transform: perspective(900px) rotateX(0) } }

/* Proyektor: sinfning orqa qatoridan o'qiladigan o'lcham. */
.slide.big-slide .slide-title { font-size: 30px; margin-bottom: 10px; }
.slide.big-slide .slide-p { font-size: 24px; line-height: 1.5; }
.slide.big-slide .slide-tag { font-size: 16px; padding: 3px 14px; }
.slide.big-slide .slide-count { font-size: 18px; }
.slide.big-slide .slide-media { flex: 0 1 42%; }
.slide.big-slide .slide-media img { max-height: 54vh; }
.slide.big-slide .slide-def { padding: 18px 24px; }
.slide.big-slide .slide-def .k { font-size: 16px; }
.slide.big-slide .slide-def .term { font-size: 32px; }
.slide.big-slide .i-royxat { font-size: 26px; gap: 12px; }
.slide.big-slide pre.i-kod { font-size: 22px; }
.slide.big-slide .slide-dots i { height: 10px; width: 10px; }
.slide.big-slide .slide-dots i.on { width: 32px; }

/* Kirishdagi sinf ro'yxati: 30 ta ism telefon ekraniga sig'maydi, shuning
   uchun o'z ichida suriladi — «Kirish» tugmasi ko'rinib turishi kerak. */
.roster { max-height: 46vh; overflow-y: auto; margin-top: 10px; }
.roster .opt { font-size: 17px; }
.roster .opt:last-child { margin-bottom: 0; }

/* Shaxsiy kod — o'qituvchi ro'yxatida. Raqamlar bir xil kenglikda tursin. */
.pin {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 8px;
}

/* ---------- Mustahkamlash: tanlangan javob ---------- */
/* Bosilgani ochiq turadi, qolganlari xiralashadi. Rang yolg'iz emas: tanlangan
   variantda «✓ tanladingiz» yozuvi ham chiqadi. */
button.chosen { border-color: var(--accent); background: var(--tint-accent); }
/* Tanlangan variant: qalin ramka va ohang foni — bosishdan keyin ham
   ko'rinib turadi. */
button.chosen, button.primary, button.ok, .pick-b.on {
  box-shadow: inset 0 0 0 1px currentColor;
}
.dimmed { opacity: .45; }

/* Guruh a'zolari */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 15px;
}
.chip.me { border-color: var(--accent); color: var(--accent); font-weight: 700;
           background: var(--tint-accent); }
/* Chipdagi «✕» — bitta kompyuterdagi o'quvchini chiqarish */
.chip { display: inline-flex; align-items: center; gap: 4px; }
.chip button { min-height: 0; padding: 0 2px; font-size: 13px; line-height: 1; border: 0; }

/* Bitta kompyuterda o'tirganlar uchun: kim javob berishi. Rang yolg'iz
   qolmaydi — ism ham yozilgan, ya'ni rangni ajratmaydigan bola ham,
   rangi o'chgan proyektor ham ma'noni yo'qotmaydi. */
.seat-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--tint-accent);
}
.opt.static { opacity: .55; }

.group-answer {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* Poygada shu banddan olingan ball */
.points { font-weight: 800; font-size: 20px; margin-top: 10px; }
.points.ok { color: var(--ok); }
.points.no { color: var(--muted); }

/* Reytingda o'z qatori */
tr.me { background: var(--tint-accent); }
tr.me td { font-weight: 700; }

/* ---------- Yozuv pleyeri ---------- */
/* Belgilar — savol, faoliyat va slayd almashgan nuqtalar. O'qituvchi
   «qaysi savolda sinf qoqildi» ni shu chiziqdan topadi. */
/* Belgilar chiziqning USTIGA yopishadi — orasi ochilsa ular alohida
   qator bo'lib ko'rinar va nimaga tegishli ekani yo'qolardi. */
.marks { position: relative; height: 9px; margin-bottom: -3px; }
.marks i {
  position: absolute;
  top: 2px;
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--muted);
  cursor: pointer;
}
.marks i.q { background: var(--warn); height: 8px; top: 0; }
.marks i.a { background: var(--ok); height: 8px; top: 0; }

/* Yozuv sahifasining sarlavhasi: bitta qatorda qoladi va uzun mavzu nomi
   uch nuqta bilan kesiladi — ilgari u ikki-uch qatorga yoyilib, ✕ tugmasini
   alohida qatorga tushirib yuborardi. */
.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rec-head > .grow { min-width: 0; }
.rec-title { font-weight: 700; font-size: 18px; }
.rec-title, .rec-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-head > button { flex: 0 0 auto; }

/* BOSHQARUV PANELI EKRANGA MIXLANGAN.

   Ilgari panel oddiy karta edi va slayd bilan birga surilib ketardi: bola
   pauza qilmoqchi bo'lsa avval uni QIDIRIB topishi kerak edi. Ustiga
   ko'rsatma matni ham shu yerda turar, ikkovi telefonda ekranning yarmini
   yeb qo'yardi.

   Endi u pastda, bitta qatorda va qimirlamaydi: kompyuterda ~56 piksel.
   Barmoq bilan bosiladigan qurilmada tugmalar kattaroq — sichqoncha aniq,
   barmoq esa yo'q. */
.pbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;                 /* xabar (`.toast`, 50) undan ham tepada */
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(16, 22, 35, .10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pbar-in { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--pad); }
.prow { display: flex; align-items: center; gap: 8px; }
.pbar button {
  min-height: 38px; padding: 6px 10px; border-radius: 10px;
  font-size: 15px; gap: 4px;
}
.pbar .pplay { min-width: 54px; font-size: 17px; }
.pbar .phelp { min-width: 38px; font-weight: 700; color: var(--muted); }
@media (pointer: coarse) { .pbar button { min-height: 44px; } }
.ptime {
  font-size: 14px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pspeed { width: auto; min-height: 38px; padding: 4px 8px; font-size: 14px; margin: 0; }
/* Vaqt chizig'i qolgan joyni oladi */
.pline { flex: 1 1 auto; min-width: 60px; }
/* Panelda chiziq oq fon ustida turadi: `--panel-2` unda deyarli ko'rinmasdi. */
.pbar input[type=range] { height: 20px; }
.pbar input[type=range]::-webkit-slider-runnable-track { background: var(--line); }
.pbar input[type=range]::-moz-range-track { background: var(--line); }
.pbar input[type=range]::-webkit-slider-thumb {
  width: 14px; height: 14px; margin-top: -4px;
}
.pbar input[type=range]::-moz-range-thumb { width: 14px; height: 14px; }

/* «Tushundim» — panelning ICHIDA, tugmalar ustida. Bosiladigan joy doim
   bitta va o'sha yerda: chegara ochilganda panel shuncha o'sadi, mazmun
   esa ostida qolib ketmaydi (`replay.js` bo'shliqni o'lchab qo'yadi). */
.nextbar { display: flex; justify-content: center; margin-bottom: 8px; }
.pbar .nextbar button { width: 100%; max-width: 420px; min-height: 46px; font-size: 17px; }

/* Tor ekran: vaqt chizig'i o'z qatoriga chiqadi, «10s» yozuvlari yig'iladi —
   aks holda tugmalar ikki qatorga bo'linib, panel yana yo'g'onlashardi. */
@media (max-width: 620px) {
  .prow { flex-wrap: wrap; gap: 6px; }
  .pline { order: -1; flex-basis: 100%; }
  .pbar .lab10 { display: none; }
  .ptime { margin-left: auto; font-size: 13px; }
  /* Tugmalar bitta qatorga SIG'ISHI kerak: ikkinchi qatorga tushsa panel
     yana yo'g'onlashardi. 360 px li ekranda, yon chizig'i bilan birga ham
     joy qolsin deb chekka va oraliqlar qisqartiriladi. */
  .pbar-in { padding: 8px 10px; }
  .pbar button { padding: 6px 8px; }
  .pbar .pplay { min-width: 46px; }
  .pspeed { padding: 4px 6px; }
}

/* Panel pastda turgani uchun xabar UNING USTIDA chiqadi. Balandligini
   `replay.js` o'lchaydi; zaxira qiymat — eng yo'g'on holati (tor ekran,
   «Tushundim» ochiq). */
body.rec .toast { bottom: calc(var(--pbar-h, 150px) + 14px); }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 0;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--panel-2);
}
input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--panel-2);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: var(--accent); border: 0; cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 0; cursor: pointer;
}

.bar { height: 10px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: 13px; font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--fg);
  padding: 10px 16px; border-radius: 12px; z-index: 50; max-width: 90vw;
}

@media (max-width: 480px) {
  body { padding: 12px; }
  h1 { font-size: 22px; }
  /* Tepa tasma sahifa chetiga yoyiladi — chet shu yerda 12 px, `--pad`
     (16 px) emas. Aks holda tasma 4 px ga ekrandan chiqib, butun sahifa
     yonga surilardi (390 px telefonda o'lchandi). */
  .live-bar { margin-inline: -12px; padding-inline: 12px; }
}

/* «Tizim yangilandi» — sahifa eski kod bilan ishlab turganini bildiradi.
   Ustidagi ishni to'smaydi: pastda, tor tasma bo'lib turadi. */
.update-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shot);
}
@media (min-width: 720px) {
  .update-bar { left: auto; width: 320px; }
}

/* ---------------- Mavzu tahrirchisi ---------------- */
body.editor { --maxw: 1000px; }
/* Ichma-ich karta: qadam → element. Ikki daraja yetadi, uchinchisi
   ekranda chalkashtiradi. */
.card.sub  { background: var(--panel-2); border-color: var(--line); }
.card.sub2 { background: var(--panel); margin-top: 8px; }
.editor label { display: block; margin: 10px 0 4px; }
.editor .grow { flex: 1 1 160px; min-width: 0; }
.editor .slide { margin-top: 6px; --slide-min: 180px; }

/* ---- Qadamlar lentasi (PowerPointdagi chap ustun kabi) ---- */
.strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 2px;
  scrollbar-width: thin;
}
.strip-cell {
  position: relative;
  flex: 0 0 auto;
  width: 116px;
  padding: 4px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  min-height: 0;
}
.strip-cell.on { border-color: var(--accent); }
.strip-n {
  position: absolute;
  top: 2px;
  left: 4px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
/* Kichik ko'rinish: haqiqiy slayd, faqat kichraytirilgan */
/* Pultdagi ko'zgu: to'r qatorlari ulushga bo'linishi uchun balandlik ANIQ
   bo'lishi kerak. Aks holda qatorlar nolga tushib, mazmun ustma-ust chiqardi. */
body.teacher #slideBox.slide { --slide-min: 240px; }

.slide.strip-mini {
  --slide-min: 0;
  height: 62px;
  padding: 4px;
  font-size: 5px;
  overflow: hidden;
  pointer-events: none;
}
.slide.strip-mini .slide-title { font-size: 6px; margin: 0; }
.slide.strip-mini .slide-p,
.slide.strip-mini .i-royxat,
.slide.strip-mini .i-kod { font-size: 5px; }
.slide.strip-mini .slide-dots,
.slide.strip-mini .slide-head { display: none; }

/* ---- Slaydning o'zida tahrirlash ---- */
#canvasWrap { margin-top: 6px; }
/* Tahrirchi ham AYNAN shu qolipda: muallif 16:10 ichida joylashtiradi (2026-10-02 gacha 4:3 — 83vh),
   shunda doskada boshqacha chiqib qolmaydi. */
.slide.canvas {
  --slide-min: 62vh;
  max-width: 99vh;
  margin-inline: auto;
  position: relative;
  touch-action: none;
}
/* Kataklar sezilib tursin — element qayerga tushishini ko'rish uchun.
   Chiziqlar AYNAN to'r maydoniga qo'yiladi, aks holda ular slaydning
   ichki chetiga surilib, aldab qo'yardi. */
.slide.canvas .slide-body.slide-grid {
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(100% / 8));
}
.ed-item {
  cursor: grab;
  outline: 1px dashed transparent;
  outline-offset: 3px;
}
.ed-item:hover { outline-color: var(--line); }
.ed-item.ed-sel {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  cursor: move;
}
/* Hali yozilmagan yorliq: bor ekanini bildiradi, lekin ko'zga urilmaydi */
.slide-tag.ed-ghost { border-style: dashed; opacity: .5; min-width: 54px; }
.slide-tag.ed-ghost .lab:empty::before { content: 'yorliq'; }
/* Ko'rsatish paytida tahrir belgilarisiz — dars ekranidagidek */
.slide.canvas.playing .ed-item { outline: none; cursor: default; }
.slide.canvas.playing .slide-body.slide-grid { background-image: none; }
/* Rasmi tanlanmagan element — tahrirda ko'rinib turadi */
.ed-noimg {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 2px dashed var(--line);
  border-radius: 8px;
}
.ed-noimg img { display: none; }
.ed-noimg::after {
  content: '🖼 rasm tanlanmagan';
  font-size: 14px;
  color: var(--muted);
}
.ed-text { cursor: text; }
.ed-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Chap-yuqoridagi tutqich — ko'chirish uchun. Matnli elementni matnidan
   sudrab bo'lmaydi (u yerda kursor kerak), shuning uchun alohida joy. */
.ed-grip {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--panel);
  cursor: move;
  user-select: none;
}
/* O'ng-past burchakdagi tutqich — cho'zish uchun */
.ed-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent);
  border: 2px solid var(--panel);
  cursor: nwse-resize;
}
.slide-item.ed-sel { position: relative; }

/* Kabinetdagi raqamli kartalar */
body.admin { --maxw: 1100px; }
.admin .card.sub { padding: 10px 12px; }
.admin .card.sub.center { text-align: center; }

/* ---------------- Slayd matnining ko'rinishi ----------------
   Rang QIYMAT emas, ROL bilan beriladi: kunduzgi va tungi mavzuda
   ikkalasi ham o'qilishi kerak. */
.slide-item.s-kichik { font-size: .82em; }
.slide-item.s-katta  { font-size: 1.35em; }
.slide-item.s-juda   { font-size: 1.9em; line-height: 1.2; }

.slide-item.c-ohang  { color: var(--tone, var(--accent)); }
.slide-item.c-muted  { color: var(--muted); }
.slide-item.c-ok     { color: var(--ok); }
.slide-item.c-warn   { color: var(--warn); }
.slide-item.c-bad    { color: var(--bad); }
.slide-item.c-oylash { color: var(--oylash); }

.slide-item.f-sarlavha { font-weight: 700; letter-spacing: -.01em; }
.slide-item.f-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Ro'yxat belgisi */
.slide-item.m-raqam { list-style: decimal; }
.slide-item.m-belgisiz { list-style: none; padding-left: 0; }
.slide-item.m-chiziq { list-style: none; }
.slide-item.m-chiziq > li::before { content: '— '; color: var(--muted); }

/* ---------------- Tahrirchi: ixcham piktogramma qatorlari ---------------- */
.pick { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.pick-b {
  min-height: 32px;
  min-width: 32px;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.pick-b.on { border-color: var(--accent); background: var(--tint-accent); font-weight: 700; }
.pick-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--line);
}
/* O'lcham tugmalari o'z o'lchamini ko'rsatib tursin */
.pick.sizes .pick-b:nth-child(1) { font-size: 13px; }
.pick.sizes .pick-b:nth-child(2) { font-size: 10px; }
.pick.sizes .pick-b:nth-child(3) { font-size: 16px; }
.pick.sizes .pick-b:nth-child(4) { font-size: 19px; }
.pick.fonts .pick-b:nth-child(2) { font-weight: 700; }
.pick.fonts .pick-b:nth-child(3) { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* Rang tanlash — harfning O'ZI o'sha rangda */
.pick-b.swatch { font-weight: 700; }
.pick-b.swatch.c-ohang  { color: var(--accent); }
.pick-b.swatch.c-muted  { color: var(--muted); }
.pick-b.swatch.c-ok     { color: var(--ok); }
.pick-b.swatch.c-warn   { color: var(--warn); }
.pick-b.swatch.c-bad    { color: var(--bad); }
.pick-b.swatch.c-oylash { color: var(--oylash); }
/* Fon namunalari — o'sha fonning O'ZI ko'rinadi. `.slide.bg-*` qoidalari
   faqat slaydga tegishli, shuning uchun bu yerda alohida yoziladi. */
.pick-b.bgchip { width: 30px; padding: 0; }
.pick-b.bgchip.bg-rang  { background: var(--tint-accent); }
.pick-b.bgchip.bg-toza  { background: var(--panel); }
.pick-b.bgchip.bg-toq   { background: #10182B; }
.pick-b.bgchip.bg-katak {
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 7px),
    var(--panel);
}

/* Asboblar paneli — slayddan yuqorida, o'zining maydonida. Fon va ramka
   uni lentadan ham, slayddan ham ajratib turadi. */
.ribbon {
  margin: 10px 0;
  padding: 4px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* Bir nechta qator uchun idish. MUHIM: o'zi ham `.bar` bo'lsa, qatorlar
   yonma-yon tizilib, siqilib qolardi — element paneli shundan buzilgan edi. */
.editor .bars { display: flex; flex-direction: column; }
.editor .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 0;
  min-height: 46px;
}
.editor .bar + .bar { border-top: 1px solid var(--line); }
.editor #canvasWrap { margin-top: 10px; }

/* ---------------- Rasm tanlash oynasi ---------------- */
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 22, 35, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sheet {
  width: min(720px, 100%);
  max-height: 84vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shot);
}
.img-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.img-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 10px;
  min-height: 0;
}
.img-cell.on { border-color: var(--accent); }
.img-cell img { width: 100%; height: 90px; object-fit: contain; }

/* ==========================================================================
   PULT — telefondagi boshqaruv (`/pult`)
   --------------------------------------------------------------------------
   Bu yerdagi barcha o'lchov bitta savoldan kelib chiqadi: dars vaqtida
   o'qituvchi telefonni BIR QO'LDA ushlab turadi. Shundan:

     · sahifa ekranga qadaladi va o'zi aylanmaydi — faqat o'rtadagi maydon
       suriladi. Aks holda o'qituvchi tugmani qidirib sahifani surar edi;
     · asosiy tugmalar pastda: bosh barmoq faqat pastki uchdan biriga
       yetadi;
     · har bosiladigan narsa kamida 48 px — qo'l qaltiraganda ham tegadi;
     · pastdagi «xavfsizlik chizig'i» (iPhone) hisobga olinadi.
   ========================================================================== */

body.pult {
  padding: 0;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.pult #boot { margin: 24px 16px; }
body.pult #app { display: flex; flex-direction: column; height: 100%; }

/* TELEFONDA boshqaruv o'rami KO'RINMAYDI: uning bolalari to'g'ridan-to'g'ri
   `#app` ning bolasi bo'lib qoladi. Lekin HTML da ular boshqa tartibda
   yotadi (o'ram kompyuterdagi chap ustun uchun bir joyga yig'ilgan),
   shuning uchun telefondagi tartib `order` bilan tiklanadi:
   sarlavha → rejim → xulosa → bosqichlar → ekran → dok → bo'limlar. */
body.pult #rail { display: contents; }
body.pult #bar     { order: 1; }
body.pult #pKorish { order: 2; }
body.pult #pXulosa { order: 3; }
body.pult #phases  { order: 4; }
body.pult #screens { order: 5; }
body.pult #dock    { order: 6; }
body.pult #tabs    { order: 7; }

/* ---------------- tepa qator ---------------- */
.p-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.p-chip {
  min-height: 34px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  background: var(--tint-accent);
  border: 1px solid var(--line);
  color: var(--fg);
}
.p-topic {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-topic.live { color: var(--fg); font-weight: 600; }

/* ---------------- o'rta maydon ---------------- */
#screens {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}
.p-screen { display: flex; flex-direction: column; gap: 10px; }
.p-note { color: var(--muted); font-size: 14px; padding: 2px 2px 0; }
.p-list { display: flex; flex-direction: column; gap: 8px; }
.p-head { font-size: 19px; font-weight: 700; }
.p-point { color: var(--muted); }
.p-warn { color: var(--warn); font-size: 14px; font-weight: 600; }
.p-answer { color: var(--ok); font-weight: 600; }
.p-right { color: var(--ok); font-weight: 700; }
#pickFind { width: 100%; }

/* ---------------- ro'yxat qatori ----------------
   Varaqdagi ham, ekrandagi ham har qanday ro'yxat shu bilan chiziladi:
   o'qituvchi bir xil shaklni bir marta o'rganadi. */
.p-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
}
.p-item.on { border-color: var(--accent); background: var(--tint-accent); }
.p-item.ok { border-color: var(--ok); background: var(--tint-ok); }
.p-item.bad { border-color: var(--bad); background: var(--tint-bad); }
.p-item.off { opacity: .45; }
.p-item-i {
  flex: 0 0 auto;
  width: 28px;
  text-align: center;
  font-size: 17px;
  color: var(--muted);
}
.p-go { color: var(--accent); font-weight: 700; }
.p-pin {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  font-size: 14px;
}
.p-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}
.p-dot.on { background: var(--ok); }
/* Jonli, lekin vkladka fonda — sariq. O'qituvchi «ulangan-u, ekranга
   qaramayapti» ni shundan biladi. */
.p-dot.idle { background: var(--warn); }
.p-avg {
  min-width: 34px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 700;
  background: var(--tint-accent);
  color: var(--accent);
}
.p-avg.none { background: var(--panel-2); color: var(--muted); font-weight: 400; }

/* ---------------- sinf ekranining ko'zgusi ---------------- */
.p-mirror { display: flex; flex-direction: column; gap: 10px; }
.p-live-tag {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
}
.p-live-tag.live { background: var(--tint-ok); color: var(--ok); }
/* Slayd pultda KICHIK ko'chirma: o'qituvchi uni o'qimaydi, tanidi bo'ldi. */
.p-stage { min-height: 26vh; }
.p-bars { display: flex; flex-direction: column; gap: 8px; }
.p-bar-row { display: flex; flex-direction: column; gap: 4px; }
.p-group {
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.p-marks { display: flex; gap: 8px; margin-top: 8px; }
.p-mark-b {
  flex: 1 1 0;
  min-height: 46px;
  font-size: 18px;
  font-weight: 700;
}

/* ---------------- pastki boshqaruv ---------------- */
.p-dock {
  flex: 0 0 auto;
  padding: 10px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-main { display: flex; gap: 8px; align-items: stretch; }
/* Dars davomida eng ko'p bosiladigan tugma — shuning uchun eng kattasi. */
.p-big {
  flex: 0 0 auto;
  min-width: 84px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
}
.p-big.grow, .p-big.wide { flex: 1 1 0; min-width: 0; }
/* Faqat belgili tugma — «Orqaga». Barmoq uchun balandligi o'sha-o'sha
   (60px), eni esa kvadratga tushadi: bo'shagan joy «Oldinga» ga o'tadi. */
.p-big.p-back-i {
  min-width: 60px;
  width: 60px;
  padding: 0;
  gap: 0;
}
.p-big-i { font-size: 22px; line-height: 1; }
.p-big.p-next {
  flex: 1 1 auto;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.p-big.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.p-big:disabled { opacity: .35; }
.p-pos {
  flex: 0 1 auto;
  min-width: 86px;
  min-height: 60px;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 14px;
}
.p-row { display: flex; gap: 6px; }
.p-act {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 2px;
}
.p-act-i { font-size: 17px; line-height: 1.1; }
.p-act.on { border-color: var(--accent); color: var(--accent); background: var(--tint-accent); }
.p-act.bad { color: var(--bad); }

/* ---------------- bo'limlar qatori ---------------- */
.p-tabs {
  flex: 0 0 auto;
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.p-tab {
  flex: 1 1 0;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.p-tab-i { font-size: 20px; line-height: 1; }
.p-tab.on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

/* ---------------- pastdan chiqadigan varaq ----------------
   Yangi sahifa emas, varaq: o'qituvchi dars ekranini ko'zdan qochirmaydi
   va «orqaga» tugmasini qidirmaydi. */
.p-sheet-back {
  position: fixed;
  inset: 0;
  /* Varaq asosiy tugmani YOPMAYDI: dok balandligicha yuqorida tugaydi.
     `--dock-h` ni pult.js har chizishda o'lchab qo'yadi. */
  bottom: var(--dock-h, 0px);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(16, 22, 35, .45);
}
.p-sheet {
  width: 100%;
  max-height: 82vh;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--line);
}
.p-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.p-sheet-head b { flex: 1 1 auto; min-width: 0; font-size: 17px; }
.p-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
/* Ustun bo'ylab joylashgan flex bolalari sig'masa QISILADI — ikki qatorli
   sarlavhali qator qo'shnisining ustiga chiqib ketardi. Qisilmasin. */
.p-sheet-body > * { flex: 0 0 auto; }

/* Katta ekranda ham ishlaydi: pult telefon uchun, lekin o'qituvchi kompyuter
   yonida bo'lsa ham o'sha pultni ochadi — o'lchov o'zgaradi, tartib emas. */
@media (min-width: 760px) {
  body.pult #app { max-width: 620px; margin: 0 auto; border-inline: 1px solid var(--line); }
  .p-sheet { max-width: 620px; margin: 0 auto; border-radius: 18px 18px 0 0; }
}

/* KURSOR OYNASI (`pult.js`: `yozuvPanel`, `oynaJoy`) — ✒A ning yordamchi oynasi slaydda, KURSOR OSTIDA: harflar qatori,
   uchta so'z ustma-ust, tanish nomzodlari. Bo'sh joyi qalamni o'tkazib yuboradi (faqat tugmalar ushlaydi). */
.dx-f-panel.dx-t-oyna { left: 0; top: 0; right: auto; bottom: auto; width: max-content; max-width: min(470px, 94%);
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; padding: 4px 6px; z-index: 9; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 94%, transparent); }
/* Faqat TUGMALAR ushlaydi: qator oralig'i, yorliqlar va bo'sh joy qalamni slaydga o'tkazadi (aks holda u yerda boshlangan
   belgi yo'qolardi — sinovda «1» lar «emasmi?» yorlig'iga tushib, yozilmay qolgan). */
.dx-t-oyna * { pointer-events: none; }
.dx-t-oyna .p-tool, .dx-t-oyna .p-tool * { pointer-events: auto; }
.dx-t-oyna.bosh { opacity: 0; }
.dx-t-oyna.bosh .p-tool, .dx-t-oyna.bosh .p-tool * { pointer-events: none; }
.dx-t-oyna .dx-t-taklif { flex: 0 0 auto; order: 0; padding-bottom: 0; border-bottom: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; }
.dx-t-oyna .dx-t-taklif[data-manba="qolip"] { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: 440px; }
.dx-t-harflar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dx-t-harflar:empty { display: none; }
.dx-t-sozlar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dx-t-sozlar:empty { display: none; }
.dx-t-oyna .dx-t-harf { min-width: 34px; min-height: 32px; font-size: 17px; }
.dx-t-oyna .dx-t-soz { min-height: 32px; touch-action: none; text-align: left; }
.dx-t-oyna .dx-yozuv-tugma { flex: 0 0 auto; }
.dx-t-yashirin { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; max-height: 1px !important; padding: 0 !important; border: 0 !important;
  opacity: 0; overflow: hidden; pointer-events: none !important; }
/* ✓ ✕ — «Tayyor» / «Bekor», yozuv boshining tepasida. */
.dx-t-ramka { position: absolute; z-index: 10; display: flex; gap: 4px; }
.dx-t-ramka .p-tool { min-width: 30px; min-height: 28px; padding: 0 8px; font-size: 15px; font-weight: 700; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(16, 22, 35, .2); }
.dx-t-ramka .dx-y-tayyor { background: var(--accent); color: #fff; border-color: var(--accent); }
.dx-t-ramka .dx-y-en.on { background: var(--tint-accent); border-color: var(--accent); color: var(--accent); }
/* En tutqichi — yozuvning o'ng chetida (en belgilanganda); sudrab en o'zgartiriladi. */
.dx-t-tutqich { position: absolute; z-index: 10; width: 9px; border-radius: 5px; background: var(--accent); opacity: .5;
  cursor: ew-resize; touch-action: none; }
.dx-t-tutqich:hover { opacity: .9; }
/* Soha tugmalari endi asboblar orasida (`drawTugmalar`). */
.p-tools .dx-t-soha-b.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.p-tools .dx-t-soha-b.taklif { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent); }
.p-tasma-s { color: var(--fg); }
.p-tasma-s.taklif { color: var(--warn); }

/* ASBOB TASMALARI (`pult.js`: «ASBOB TASMALARI») — ko'zguning tepa va pastki chetidagi ingichka tasma; ko'rsatkich kelsa
   to'liq asboblar (`.p-tools-suzuvchi`) shu chetdan slayd USTIGA ochiladi (slaydni surmaydi). */
.p-tasma { position: relative; flex: 0 0 auto; height: 18px; border-radius: 9px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.p-tasma:hover, .p-tasma.ochiq { background: var(--tint-accent); }
.p-tasma.ochiq { z-index: 40; }
.p-tasma-x { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1; font-weight: 700; color: var(--muted);
  pointer-events: none; white-space: nowrap; }
.p-tasma-y { color: var(--fg); letter-spacing: .02em; }
.p-tasma-a { color: var(--accent); }
.p-tasma-x .p-rang i { width: 9px; height: 9px; }
.p-tasma-q { font-weight: 600; opacity: .7; }
.p-tools.p-tools-suzuvchi { position: absolute; left: 0; right: 0; z-index: 41; padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); cursor: default; }
.p-tasma-t > .p-tools-suzuvchi { top: 0; }
.p-tasma-p > .p-tools-suzuvchi { bottom: 0; }
/* QADOQLANGAN (📌) tartibda asboblar uchun UCH qator joy doim ajratiladi: ✒A ochilganda soha va o'lcham tugmalari qo'shiladi —
   panel o'sib, slayd yozish paytida kichrayib (sakrab) ketmasin. */
body.pult.brauzer #liveWrap > .p-tools { min-height: 146px; align-content: flex-start; }
/* Tasmali tartibda slaydga ko'proq balandlik: ko'zgudagi yorliq tasmaga ko'chgan, bo'shliqlar ixcham. */
body.pult.brauzer.tasmali #mirror > .p-live-tag { display: none; }
body.pult.brauzer.tasmali .p-mirror { padding: 4px; gap: 4px; }
body.pult.brauzer.tasmali #liveWrap { gap: 4px; }
body.pult.brauzer.tasmali #screens { padding-block: 8px; }

/* ==========================================================================
   BRAUZERDAGI PULT (`body.brauzer`, `pult.js` qo'yadi) — KENG TARTIB

   Telefonda tartib tepadan pastga: sarlavha → ekran → boshqaruv → bo'limlar.
   Bosh barmoq pastda, shuning uchun eng ko'p bosiladigani ham pastda.
   Kompyuterda bu mantiq YO'Q: sichqoncha hamma joyga bir xil yetadi, ekran
   esa balanddan ko'ra KENG. Bo'limlarni pastdan chap ustunga olsak, o'rta
   maydon butun balandlikni oladi.

   HAMMASI CSS: `#app` to'rga aylanadi va bolalari `grid-area` bilan
   joylashadi, ya'ni HTML dagi tartib o'zgarishsiz qoladi. Telefon tartibi
   bitta media so'rov ichida qolgani uchun tegilmaydi ham.
   ========================================================================== */
@media (min-width: 1000px) {
  /* SLAYD 4:3 — ya'ni uning BALANDLIGI enini belgilaydi. Shuning uchun
     o'rta ustunni tor qiladigan narsa kenglik emas, tepa-pastdagi qatorlar:
     bosqichlar tasmasi va dok. O'lchandi: 1439×863 oynada ko'zguga 450 px
     balandlik qolardi va slayd 520 px enida chiqardi — qo'lda yozish uchun
     kichik.

     Shuning uchun bosqichlar ham, dok ham CHAP USTUNGA o'tadi. Chap ustunda
     bo'sh joy ko'p edi (to'rtta bo'lim), o'rta maydon esa butun balandlikni
     oladi: o'sha oynada slayd ~930 px ga chiqadi.

     Joylashtirish `grid-area: qator / ustun / qator / ustun` bilan aniq
     ko'rsatiladi: nomli maydonlar to'rtburchak bo'lishi shart va bunday
     bo'linishni ifodalay olmasdi. */
  body.pult.brauzer #app {
    max-width: none;
    display: grid;
    /* Chap ustun kengaydi: endi unda dok ham bor. */
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  /* O'ng ustun — sarlavha va ekran. */
  body.pult.brauzer #bar      { grid-area: 1 / 2 / 2 / 3; }
  body.pult.brauzer #pKorish  { grid-area: 2 / 2 / 3 / 3; }
  body.pult.brauzer #pXulosa  { grid-area: 3 / 2 / 4 / 3; }
  body.pult.brauzer #screens  { grid-area: 4 / 2 / 5 / 3; padding: 14px 18px; }
  /* CHAP USTUN — butun balandlikni oladi. O'zi ustun (flex): bo'limlar
     tepada, bosqichlar ularning tagida, dok esa PASTGA yopishadi (o'rni
     o'zgarmasligi kerak — u eng ko'p bosiladigan narsa).

     `1fr` qator ichida bo'lgani uchun uning balandligi o'ng ustunning
     qatorlarini CHO'ZMAYDI — ilgari shu sabab tepada 158 px bo'shliq
     qolardi. */
  body.pult.brauzer #rail {
    grid-area: 1 / 1 / 5 / 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--line);
  }
  /* Telefon uchun qo'yilgan `order` lar o'ramning ICHIDA ham ishlaydi
     (u ham flex) va tartibni ag'darib yuborardi: bosqichlar tepaga,
     bo'limlar pastga tushardi. Kompyuterda tartib HTML dagidek bo'lsin. */
  body.pult.brauzer #rail > * { order: 0; }
  body.pult.brauzer #dock { margin-top: auto; }

  /* BOSQICHLAR chap ustunda ustun bo'lib turadi: yonma-yon uchta katak
     252 px ga sig'maydi va yozuvi qirqilardi. */
  body.pult.brauzer .p-phases {
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--line);
  }
  body.pult.brauzer .p-phase { width: 100%; }

  /* DOK ustunga tushadi. Eng katta tugma («Ochish») butun enni oladi —
     u ilgari ham eng kattasi edi, o'rni o'zgardi, vazni emas. */
  body.pult.brauzer #dock {
    border-top: 1px solid var(--line);
    /* Past ekranda dok o'zi aylanadi, bo'limlarni bosib ketmaydi. */
    max-height: 62vh;
    overflow-y: auto;
  }
  body.pult.brauzer .p-main { flex-wrap: wrap; }
  body.pult.brauzer .p-main > .p-big { flex: 1 1 auto; }
  body.pult.brauzer .p-row { flex-direction: column; }

  /* Bo'limlar chap ustunda: qator ko'rinishida, belgi va so'z yonma-yon.
     Tanlangani chap chekkadan belgilanadi — tepadan emas, chunki ustunda
     «tepa» degan narsa endi yo'q. */
  body.pult.brauzer .p-tabs {
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 12px 8px;
    border-top: 0;
    overflow-y: auto;
  }
  body.pult.brauzer .p-tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
  }
  body.pult.brauzer .p-tab-i { font-size: 18px; }
  body.pult.brauzer .p-tab.on {
    background: var(--tint-accent);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* RO'YXATLAR USTUNGA BO'LINADI. Telefonda 20 qatorli ro'yxat aylantirib
     ko'riladi; kompyuterda u bir ekranga sig'adi — o'qituvchi sinfni BUTUN
     holda ko'radi. Sarlavha va izoh qatori butun enni oladi, aks holda
     ular bitta katakka tiqilib, ro'yxatni ikkiga bo'lib yuborardi. */
  body.pult.brauzer .p-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
    align-content: start;
  }
  body.pult.brauzer .p-list > .p-note,
  body.pult.brauzer .p-list > .p-sec,
  body.pult.brauzer .p-list > .p-head { grid-column: 1 / -1; }

  /* KO'ZGU — eng ko'p yutadigan joy. Slayd 4:3, ya'ni balandlik kenglikni
     o'zi cheklaydi; `--slide-min` esa uni past ekranda ham to'ldiradi. */
  /* `width: 100%` SHART: `margin-inline: auto` flex bolasining stretch'ini
     bekor qiladi va u mazmuniga qarab qisiladi — slayd ko'rsatilganda
     ko'zgu 930 px dan 480 px ga tushib qolardi (materialda esa keng
     qolardi, ya'ni ekran o'zgarganda kenglik sakrardi). */
  body.pult.brauzer #liveWrap { width: 100%; max-width: 1600px; margin-inline: auto; }   /* 16:10 qolip: 1100 px da slayd endan cheklanardi */
  /* Slaydning O'ZIGA tegilmaydi: ko'zgu doskaning aniq nusxasi bo'lishi
     uchun ichkarida qat'iy 800×600 qolip turadi (`.dx-fit-in`) va butunlay
     kichraytiriladi/kattalashtiriladi. Bu yerda `--slide-min` ni o'zgartirish
     qolipni buzardi — ya'ni ko'zgu doskadan BOSHQACHA chiqardi (chizish
     koordinatalari ham shu qolipga bog'lanadi). O'lchov `fitApply` da. */
  body.pult.brauzer .p-stage { min-height: 40vh; }

  /* Mavzu tanlash va jurnal — ro'yxat ustunlari o'zi kengaytiradi, lekin
     matn qatori cheksiz cho'zilmasin: uzun qatorda ko'z chetdan chetga
     yuguradi (bu qoida o'quvchi ekranida ham bor). */
  body.pult.brauzer #pickWrap,
  body.pult.brauzer #s-uy,
  body.pult.brauzer #s-sinf { max-width: 1400px; }

  /* JURNAL — bitta bolaga bitta qator. Keng ekranda qator cho'zilib,
     ism chap chekkada, bahosi o'ng chekkada qolardi: ko'z ikki chekka
     orasida yuguradi. Ustunga bo'linsa butun sinf bir ekranga sig'adi. */
  body.pult.brauzer #jrWrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 8px;
    align-content: start;
  }
  body.pult.brauzer #jrWrap > .p-note { grid-column: 1 / -1; }
  body.pult.brauzer #s-jurnal { max-width: 1400px; }
  /* Xarita — radar chizma va sohalar; u ustunga bo'linmaydi, chunki
     chizmaning o'zi markazda turishi kerak. Faqat eni cheklanadi. */
  body.pult.brauzer #s-xarita { max-width: 1000px; }

  /* VARAQ — pastdan chiqadigan «sheet» o'rniga o'rtadagi oyna. Kompyuterda
     pastdan chiqish mantiqsiz: u bosh barmoq uchun o'ylangan edi. */
  body.pult.brauzer .p-sheet-back {
    align-items: center;
    justify-content: center;
    bottom: 0;
  }
  body.pult.brauzer .p-sheet {
    width: min(620px, 92vw);
    max-height: 84vh;
    border-radius: 16px;
    border: 1px solid var(--line);
  }
}

/* ---------------- Dars bosqichlari ----------------
   Uch qism: takrorlash → bayon → mustahkamlash. Qator tepada, kichkina:
   u boshqaruv emas, YO'L KO'RSATKICH — dars qayerda ketayotganini aytadi.
   Bosish mumkin, chunki tartib majburiy emas. */
.p-phases {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  background: var(--panel);
}
.p-phase {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.p-phase-n {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--line);
  color: var(--fg);
  font-size: 11px;
}
.p-phase.on {
  border-color: var(--accent);
  background: var(--tint-accent);
  color: var(--accent);
}
.p-phase.on .p-phase-n { background: var(--accent); color: #fff; }
.p-phase.done { color: var(--ok); border-color: var(--ok); }
.p-phase.done .p-phase-n { background: var(--ok); color: #fff; }
.p-big.off { opacity: .45; }
/* Chipdagi ochilish belgisi — u tugma ekanini bir qarashda aytadi */
.p-caret { margin-left: 4px; font-size: 11px; opacity: .65; }

/* Sinf kodi — bolaga aytiladigan yagona narsa, shuning uchun katta. */
.p-kod {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 6px;
  text-align: center;
  padding: 10px 0;
  font-variant-numeric: tabular-nums;
}
/* Dars ketyapti, lekin hech kim ulanmagan. */
.p-bosh {
  border: 1px solid var(--warn);
  background: var(--tint-warn, #fdf0d5);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.p-bosh-t { font-weight: 700; color: var(--warn); }
.p-bosh .p-kod { font-size: 28px; padding: 4px 0; }

/* Asosiy sahifaga qaytish. Chapda, sinf nomidan oldin — telefonda
   «orqaga» shu yerda bo'lishi kutiladi. */
.p-back {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 18px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--fg);
}

/* ---------------- Element urg'usi ----------------
   Kirish yoki chiqish EMAS: element joyida turaveradi, faqat diqqat
   tortadi. Kirish animatsiyasi tugagach boshlanadi — ikkalasi bitta
   `animation` xossasida, vergul bilan ajratilgan ikki qiymat bo'lib
   yuriladi (`slide.js` dagi `anim()`).

   `transform` bilan ishlaydi, `top/left` bilan emas: to'rdagi o'rin
   qimirlamasin va qo'shni elementlar surilmasin. */
@media (prefers-reduced-motion: no-preference) {
  .slide-item.ur-puls   { animation-name: fx-fade, ur-puls; }
  .slide-item.ur-silkin { animation-name: fx-fade, ur-silkin; }
  .slide-item.ur-tebran { animation-name: fx-fade, ur-tebran; }
  .slide-item.fx-slide.ur-puls   { animation-name: fx-slide, ur-puls; }
  .slide-item.fx-slide.ur-silkin { animation-name: fx-slide, ur-silkin; }
  .slide-item.fx-slide.ur-tebran { animation-name: fx-slide, ur-tebran; }
  .slide-item.fx-rise.ur-puls    { animation-name: fx-rise, ur-puls; }
  .slide-item.fx-rise.ur-silkin  { animation-name: fx-rise, ur-silkin; }
  .slide-item.fx-rise.ur-tebran  { animation-name: fx-rise, ur-tebran; }
  .slide-item.fx-zoom.ur-puls    { animation-name: fx-zoom, ur-puls; }
  .slide-item.fx-zoom.ur-silkin  { animation-name: fx-zoom, ur-silkin; }
  .slide-item.fx-zoom.ur-tebran  { animation-name: fx-zoom, ur-tebran; }
  .slide-item.fx-flip.ur-puls    { animation-name: fx-flip, ur-puls; }
  .slide-item.fx-flip.ur-silkin  { animation-name: fx-flip, ur-silkin; }
  .slide-item.fx-flip.ur-tebran  { animation-name: fx-flip, ur-tebran; }
  .slide-item[class*="ur-"] { animation-fill-mode: both, none; }
}

@keyframes ur-puls {
  0%, 100% { transform: scale(1) }
  50%      { transform: scale(1.06) }
}
@keyframes ur-silkin {
  0%, 100%          { transform: translateX(0) }
  15%, 45%, 75%     { transform: translateX(-6px) }
  30%, 60%, 90%     { transform: translateX(6px) }
}
@keyframes ur-tebran {
  0%, 100% { transform: rotate(0) }
  25%      { transform: rotate(-2.5deg) }
  75%      { transform: rotate(2.5deg) }
}
/* Mavzu raqami — ro'yxatdagi o'rni. Bir xil kenglikda tursin, aks holda
   ikki xonali raqamda nomlar qiyshayib ketadi. */
.p-item-i { font-variant-numeric: tabular-nums; }

/* ---------------- Bilimlar xaritasi ----------------
   Radar: olti o'q — soha, uzunligi — o'zlashtirish nisbati. O'lchanmagan
   o'qning nuqtasi BO'SH qoladi: «bilmaydi» va «so'ralmadi» ikki boshqa
   narsa, shakl buni yashirmasligi kerak. */
.dx-radar {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 4px auto 0;
}
.dx-radar-ax text { font-family: inherit; }
.p-map-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 8px;
}
.p-map-head .grow { min-width: 0; }
.p-soha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.p-soha-top { display: flex; align-items: center; gap: 8px; }
.p-soha-top b { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.p-lvl {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.p-lvl.yoq { color: var(--muted); background: var(--panel-2); }
/* Baho tanlash qatori: raqamlar barmoq uchun yetarli kattalikda. */
.p-scroll { display: flex; flex-direction: column; gap: 8px; }
.p-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.p-btn.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.p-cells { display: flex; gap: 6px; }
.p-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
}
.p-cell b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.p-cell span { display: block; font-size: 11px; color: var(--muted); }
.p-cell.off { opacity: .5; }

/* Bir bo'limning ikki ko'rinishi: baholar va xarita. Ular BIR narsaning
   ikki tomoni, shuning uchun alohida bo'lim emas — almashtirgich. */
.p-seg {
  display: flex;
  gap: 6px;
  padding: 2px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border-radius: 11px;
}
.p-seg button {
  flex: 1 1 0;
  padding: 8px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 9px;
}
.p-seg button.on { color: var(--fg); background: var(--panel); }

/* Mavzu qatori + uning yonidagi «reja» havolasi. Reja darsdan OLDIN kerak
   bo'ladi, shuning uchun u ro'yxatning o'zida turadi. */
.p-pickrow { display: flex; align-items: stretch; gap: 6px; }
.p-pickrow > .p-item { flex: 1 1 auto; min-width: 0; }
.p-doc {
  flex: 0 0 auto;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ---------- Toshbaqa sahnasi (kurs mashqlari) ----------
   Sahna KVADRAT bo'lib qoladi: chizma o'lchamiga qarab maydon o'zgarsa,
   har mashqda ekran sakrab, bola chizmasini qidirib qolardi. */
.sahna {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Sahna qat'iy koordinatali bo'lgach kattaroq bo'lishi kerak: lineyka
     raqamlari va katak chiziqlari o'qilsin. */
  max-height: 78vh;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.sahna-svg { width: 100%; height: 100%; display: block; }
.sahna-toshbaqa { fill: var(--accent); }
.sahna-gap {
  fill: var(--fg);
  font-size: 14px;
  font-family: inherit;
  paint-order: stroke;
  stroke: var(--panel-2);
  stroke-width: 4px;
}

/* ---------- Kurs lentasi: dars qatori ----------
   Tugagan dars YIG'IB qo'yiladi (kurs o'sganda lenta uzayib ketmasin),
   lekin yo'qolmaydi: bosilsa ochiladi va har qadamiga qaytish mumkin. */
.k-dars {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  min-height: 46px;
  margin-top: 6px;
}
.k-dars.on { border-color: var(--accent); }
.k-dars[disabled] { opacity: .45; }
.k-dars-i { font-size: 17px; width: 20px; text-align: center; }
/* Sahnadagi boshlang'ich nuqta — toshbaqa qayerdan boshlaganini bola
   ko'rib tursin (3-darsda «o'rtadan boshlaydi» deb o'qiydi). */
.sahna-markaz { fill: var(--muted); opacity: .45; }

/* Sahna to'ri — o'lchov chizig'i, chizmaning bir qismi emas: shuning
   uchun juda xira. Qadami o'zgaruvchan, shuning uchun yonida yozib
   qo'yiladi (aks holda to'r yolg'on ma'lumot berardi). */
.sahna { position: relative; }
.sahna-katak { stroke: var(--line); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; }
.sahna-oq { stroke: var(--muted); stroke-width: 1.5; opacity: .5; vector-effect: non-scaling-stroke; }
.sahna-olcham {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 6px;
  pointer-events: none;
}

/* ---------- Kod muharriri ----------
   Shaffof `textarea` ranglangan nusxa USTIDA turadi. Ikkalasining shrifti,
   o'lchami va ichki chekkasi AYNAN bir xil bo'lishi shart — bir piksel
   farq ham harflarni siljitib yuboradi. */
.kod-muharrir { position: relative; }
.kod-yorug,
.kod-muharrir .kod-kirit {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
.kod-yorug {
  position: absolute;
  inset: 0;
  overflow: hidden;             /* muharrir o'zi o'sadi — siljish yo'q */
  pointer-events: none;
  background: var(--panel-2);
  color: var(--fg);
}
.kod-muharrir .kod-kirit {
  position: relative;
  display: block;
  width: 100%;
  min-height: 170px;
  background: transparent;
  color: transparent;
  caret-color: var(--fg);
  /* Balandlikni skript boshqaradi (matnga qarab o'sadi), shuning uchun
     qo'lda cho'zish ham, ichki prokrutka ham kerak emas. */
  resize: none;
  overflow: hidden;
  /* Matn raqamlar ustunidan KEYIN boshlanadi va o'ralgan qatori ham
     shu chetdan ketadi — ranglangan nusxadagi `.k-t` bilan aynan mos.
     Aniq qiymati quyida, `--kod-chap` bilan birga beriladi. */
}

/* ---- Qator raqamlari ----
   Raqam qatorning ICHIDA turadi (chetdagi ustunda emas): matn o'ralganda
   chetdagi ustun siljib ketardi, bu esa raqamni o'z blokining tepasida
   ushlab qoladi. */
/* Raqamlar ustuni CHETGA yaqin turadi: kod uchun joy ko'proq qolsin
   (telefonda har piksel hisobda). `--kod-chap` — raqamdan oldingi
   chekinish, `--kod-raqam` — ustunning kengligi; matn ikkalasining
   yig'indisidan boshlanadi va `textarea` ham AYNAN shu joydan. */
.kod-yorug,
.kod-muharrir .kod-kirit { --kod-chap: 6px; --kod-raqam: 32px; }
.kod-yorug { padding-left: var(--kod-chap); }
.kod-muharrir .kod-kirit {
  padding-left: calc(var(--kod-chap) + var(--kod-raqam));
}
.k-qator { display: flex; }
.k-n {
  flex: 0 0 var(--kod-raqam);
  padding-right: 8px;
  text-align: right;
  font-style: normal;
  color: var(--muted);
  opacity: .75;
  font-variant-numeric: tabular-nums;
  user-select: none;            /* nusxa olganda raqamlar tushmasin */
}
.k-t { flex: 1 1 auto; min-width: 0; }

/* Chekinish chizig'i — har to'rt bo'shliqqa bitta. KENGLIK QO'SHMAYDI:
   hoshiya o'rniga ichki soya, aks holda har daraja matnni surib yuborib,
   ko'rinmas `textarea` bilan mosligini buzardi. */
.k-chiz {
  font-style: normal;
  /* Qatorning BUTUN balandligini egallaydi: aks holda chiziq har qatorda
     shrift bo'yi qadar bo'lib, orasida uzilib qolardi (ko'rinishi
     punktir bo'lib chiqardi). Kengligi bo'shliqlardan keladi — o'zi
     berilmaydi, shuning uchun ko'rinmas `textarea` bilan mosligi
     saqlanadi. */
  display: inline-block;
  height: 1.5em;                /* `line-height` bilan bir xil */
  vertical-align: top;
  position: relative;
}
/* Chiziq chekinishning OXIRIDA — kod boshlanadigan joyda. Bola uni
   «mana shu chiziqdan boshlab yozaman» degan chegara sifatida ko'radi.
   Yarim harf chapga surilgan: aks holda harflarga tegib turadi.

   Alohida qatlam (`::after`) — hoshiya yoki `box-shadow` bilan bunday
   surib bo'lmasdi, ular faqat chetga yopishadi. Absolyut joylashuv esa
   kenglikka TEGMAYDI, ya'ni ko'rinmas `textarea` bilan mosligi
   saqlanadi (butun muharrir shunga tayanadi). */
.k-chiz::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: .5ch;                  /* yarim harf — matndan nafas oladi */
  width: 3px;
  border-radius: 2px;
  background: var(--kod-chiziq);
}

/* Har blok turiga O'Z rangi — Scratchdagidek. Bola chiziqqa qarab
   «bu takrorlanish» yoki «bu shart» ekanini o'qiy oladi, kalit so'zni
   qayta topib o'tirmaydi. Rang blokni OCHGAN kalit so'zdan olinadi:
   `elif`/`else` — `if` ning davomi, shuning uchun rangi ham o'sha. */
.k-chiz-for   { --kod-chiziq: #3E7BD6; }   /* takrorlash — ko'k */
.k-chiz-while { --kod-chiziq: #8B5CD6; }   /* takrorlash (shartli) — binafsha */
.k-chiz-if    { --kod-chiziq: #D9962B; }   /* shart — sariq-jigar */
.k-chiz-def   { --kod-chiziq: #D6457A; }   /* funksiya — pushti */
.k-chiz-try   { --kod-chiziq: #2E9E74; }   /* xatoni ushlash — yashil */
.k-chiz-with  { --kod-chiziq: #6B7C99; }   /* qolgani — kulrang-ko'k */
.kod-muharrir .kod-kirit:focus { outline: none; border-color: var(--accent); }
.kod-yorug i { font-style: normal; }
.k-kalit { color: #8e4ec6; font-weight: 600; }
.k-fn    { color: #3b82f6; }
/* Toshbaqa buyruqlari — ATAYLAB boshqa rangda. Bola `print` bilan
   `forward` orasidagi farqni ko'rishi kerak: birinchisi tilning o'zida,
   ikkinchisi `turtle` kutubxonasida. Nuqtali chiziq rang ko'rmaydiganlar
   uchun ham farqni saqlaydi. */
.k-sahna { color: #e93d82; border-bottom: 1px dotted rgba(233, 61, 130, .45); }
.k-satr  { color: #30a46c; }
.k-son   { color: #c2410c; }
.k-izoh  { color: var(--muted); font-style: italic !important; }

/* ============================================================
   ALOQA UZILGANDA — bu xato emas, holat.
   Ilgari faqat yuqoridagi kichik belgi o'zgarardi: o'qituvchi tugmani
   bosaverar, sinfga esa hech narsa ketmasdi. Endi boshqaruv ochiq-oydin
   o'chadi va sababi yoziladi. Qayta ulanish 1 soniyada boshlanadi,
   shuning uchun bu holat uzoq turmaydi.
   ============================================================ */
body.pult-off .p-dock::before {
  content: "Aloqa uzildi — boshqaruv vaqtincha o'chiq. Qayta ulanmoqda…";
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tint-bad);
  color: var(--bad);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
body.pult-off #dockMain,
body.pult-off #dockRow {
  opacity: .45;
  pointer-events: none;
}

/* ============================================================
   YUQORI QATORDAGI KICHIK TUGMALAR — 44px bosish maydoni.
   Ko'rinishi o'zgarmaydi (qator balandlashib ketmasin), faqat barmoq
   tegadigan joy kattalashadi: ko'rinmas ::after butun balandlikni oladi.
   ============================================================ */
.p-back, .p-chip { position: relative; }
.p-back::after, .p-chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
/* Orqaga tugmasi eni bo'yicha ham 34px — uni ham 44px ga yetkazamiz. */
.p-back::after {
  left: 50%;
  right: auto;
  width: 44px;
  transform: translate(-50%, -50%);
}

/* ============================================================
   QADAM HISOBLAGICHI — bitta katta raqam + nuqtalar.
   Ilgari «3 / 8 · 2/4» turardi: bitta tugmada ikki xil kasr, dars
   vaqtida bir qarashda o'qib bo'lmasdi.
   ============================================================ */
.p-pos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
}
.p-pos-n { font-size: 19px; font-weight: 700; color: var(--fg); }
.p-pos-t { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: -2px; }
.p-dots { display: flex; gap: 3px; margin-top: 1px; }
.p-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.p-dots i.on { background: var(--accent); }

/* ============================================================
   KIM JAVOB BERMADI — ism bilan, 0 bosishda.
   To'ldirilgan = javob bermadi. Uzuq ramka = aloqasi uzilgan, ya'ni
   bilmagani uchun emas. Bu ikkisini ajratmasa, o'qituvchi noto'g'ri
   bolani so'raydi.
   ============================================================ */
.p-miss-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  max-height: 60px;
  overflow-y: auto;
}
.p-miss {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--fg);
  white-space: nowrap;
}
.p-miss.off {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
}
/* Jonli, lekin vkladka fonда — savolни ko'rmayapti. Sariq: uzilgandan
   farqi bor, o'qituvchi «chaqirsam ko'radi» deб biladi. */
.p-miss.idle {
  background: rgba(178,106,0,.12);
  border: 1px solid var(--warn);
  color: var(--warn);
}
.p-miss.more { background: transparent; color: var(--muted); }

/* ============================================================
   DARS SOATI — bosqich qatorining o'ng chekkasida.
   45 daqiqada 10/10/15: o'qituvchi qancha qolganini bilmasa, oxirgi
   bosqichga vaqt qolmaydi. Oxirgi 5 daqiqada rangi ogohlantiradi,
   vaqt oshsa «+» bilan ko'rsatiladi.
   ============================================================ */
.p-clock {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 4px 0 8px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.p-clock.low { color: var(--warn); }
.p-clock.over { color: var(--bad); }

/* ============================================================
   KO'RINISH — 2-bosqich maketiga burish.
   Bu blok butunlay QO'SHIMCHA: yuqoridagi qoidalarning birortasi ham
   o'zgartirilmagan. Orqaga qaytarish = shu blokni o'chirish.
   ============================================================ */

/* 1. Yuqori qator — namunadagidek BITTA qator: orqaga, sinf, mavzu, holat.
      Mavzu nomi joyiga sig'masa uch nuqta bilan kesiladi. */
.p-bar { padding: 10px 12px; gap: 8px; }
.p-chip { font-size: 14px; font-weight: 600; border-radius: 8px; }
.p-topic { font-size: 13px; }

/* 2. Bosqich qatori — namunadagidek: har tugmada ustida vaqt ulushi,
      ostida nomi. Joriy ko'k, bajarilgani yashil. */
.p-phases {
  padding: 0 12px 10px;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  align-items: stretch;
}
.p-phase {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px 6px;
  border-radius: 10px;
}
.p-phase-m {
  font-size: 10px;
  font-weight: 600;
  opacity: .75;
  letter-spacing: .04em;
}
.p-phase-t { font-size: 13px; font-weight: 600; }
.p-phase.done {
  background: var(--tint-ok);
  border-color: var(--ok);
  color: var(--ok);
}
.p-phase.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 3. Dars ekrani — kartalar. Maketdagi asosiy farq shu edi: har bo'lak
      o'z chegarasi bilan turadi, ko'z qayerdan qayergacha ekanini
      qidirmaydi. */
#liveWrap { gap: 8px; }
.p-mirror {
  /* Formula paneli shu kartaning ustida suzadi (`.dx-f-panel`). */
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  gap: 8px;
}
#mirrorNote {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.p-miss-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px;
  margin-top: 0;
}

/* 4. MAVZU KARTASI — pult birinchi marta ochilganda ko'rinadigan ekran.
      Ilgari bir qatorli ro'yxat edi: raqam, nom va izoh bir chiziqda
      siqilib turardi, «Reja» esa faqat 📄 belgisi edi. Endi har mavzu
      o'z kartasida, ostida ikki amal — o'qituvchi nima qilishini
      qidirmaydi. */
.p-item { border-radius: 12px; }

.p-pickrow {
  flex-direction: column;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 4px 8px;
}
.p-pickrow > .p-item {
  background: transparent;
  border: 0;
  align-items: flex-start;
  padding: 8px;
}
/* Raqam — ko'k yumaloq nishon, maketdagidek */
.p-pickrow .p-item-i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--tint-accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.p-pickrow .p-item > .grow > div:first-child {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
}

.p-pick-act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 8px;
}
/* «Darsni boshlash» — DOIM o'z qatorida, butun kenglikda. Yonига to'rtinchi
   tugma qo'yilgach u ekranga sig'may qolgan edi; ustiga bu asosiy amal va
   telefonda barmoq uchun katta nishon bo'lishi kerak. */
.p-pick-act .p-go { flex: 1 1 100%; }
.p-pick-act .p-doc {
  flex: 0 0 auto;
  width: auto;
  gap: 6px;
  padding: 0 12px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  border-radius: 10px;
}
.p-start {
  flex: 1 1 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.p-start-i { font-size: 12px; }

/* Ko'rib chiqish — ikkinchi darajali amal: bir xil o'lchamda, lekin
   quyuq emas. Bosish narxi bir xil (bitta bosish), ko'rinishi esa qaysi
   biri odatdagi yo'l ekanini aytadi. */
/* Ko'rib chiqish — ikkinchi darajali amal: «Reja» va «Tahrir» bilan bir
   qatorda, bir xil ko'rinishda. Bosish narxi bir xil (bitta bosish),
   ko'rinishi esa qaysi biri odatdagi yo'l ekanini aytadi. */
.p-peek {
  flex: 0 0 auto;
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* ============================================================
   5. BITTA USLUB — HAMMA EKRANDA.
   Pultdagi har qanday qator bitta `item()` dan chiqadi: belgi, sarlavha,
   izoh. Shuning uchun uslubni shu uch nuqtadan bir xillashtirsak,
   Dars, Sinf, Jurnal, Ko'proq va Sinflarim bir tilda gapiradi —
   o'qituvchi bo'lim almashganda «boshqa dunyoga» tushmaydi.
   ============================================================ */

/* Belgi va raqam — hamma joyda bir xil yumaloq nishon ichida.
   Ilgari 🏫, 👥, ⚙️ quruq turardi, mavzu raqami esa boshqacha edi. */
.p-item-i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
/* Mavzu raqami — ko'k, chunki u asosiy amalga olib boradi */
.p-pickrow .p-item-i { background: var(--tint-accent); color: var(--accent); }

/* Sarlavha qalin, izoh mayda — har ekranda bir xil nisbat */
.p-item { min-height: 58px; font-size: 15px; align-items: center; }
.p-item > .grow > div:first-child {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.p-item > .grow > .small.muted,
.p-item .small.muted { font-size: 12px; line-height: 1.35; }

/* Tanlangan qator — ko'k chegara hamma ekranda bir xil ma'noni beradi */
.p-item.on .p-item-i { background: var(--accent); color: #fff; }

/* Ekran sarlavhalari: bo'lim nomi katta harfda, ma'lumot qatori esa
   oddiy — ikkisi aralashib ketmasin. */
#uyTop {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding-top: 4px;
}
#stTop, #jrTop { color: var(--fg); font-size: 13px; font-weight: 600; }

/* O'ngdagi kichik ma'lumot — shaxsiy kod, o'q — bir xil chip */
.p-pin {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.p-go { font-size: 13px; }

/* Ro'yxatlar orasidagi bo'shliq ham bir xil */
.p-list { gap: 8px; }
.p-screen { gap: 10px; }

/* ============================================================
   6. NAMUNAGA KELTIRISH — qolgan bo'laklar.
   Har biri maketdagi o'lcham va rangni takrorlaydi.
   ============================================================ */

/* Dars soati bosqich qatorining o'ng chekkasida, tugmalarni siqmaydi */
.p-clock { align-self: center; padding: 0 2px 0 6px; font-size: 12px; }

/* Mavzu raqami — namunada kulrang, mono shrift (ko'k emas) */
.p-pickrow .p-item-i {
  background: var(--panel-2);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  border-radius: 8px;
}

/* Imkoniyat chiplari */
.p-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 8px 2px;
}
.p-cap {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.p-cap.acc { background: var(--tint-accent); color: var(--accent); }
.p-cap.ok { background: var(--tint-ok); color: var(--ok); }
/* «Jurnalga tushmagan» — ko'zga tashlanishi KERAK: bu o'qituvchining
   adashganini bildiradigan yagona belgi. */
.p-cap.warn { background: var(--tint-warn, #fdf0d5); color: var(--warn); }

/* «Kim javob berdi» — har bolaga bitta ustun */
.p-who {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 9px;
}
.p-who-b {
  flex: 1 1 0;
  min-width: 3px;
  height: 26px;
  border-radius: 4px;
  background: var(--line);
}
.p-who-b.on { background: var(--accent); }
.p-who-b.ok { background: var(--ok); }
.p-who-b.bad { background: var(--bad); }

/* Test yechilishi: har bolaga bosh-harfli aylanача. Yashil — to'g'ri,
   qizil — xato, ko'k — javob berdi (to'g'risi hali ochilmagan), kulrang —
   javob yo'q. Variant yonidagi kichiklari (sm) — kim shu variantni tanladi. */
.p-face {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--tint-accent); color: var(--accent);
  border: 2px solid transparent;
}
.p-face.on  { border-color: var(--accent); }
.p-face.ok  { background: rgba(23,145,74,.14); color: var(--ok); border-color: var(--ok); }
.p-face.bad { background: rgba(196,45,45,.14); color: var(--bad); border-color: var(--bad); }
.p-face.no  { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.p-face.sm  { width: 20px; height: 20px; font-size: 9px; border-width: 1.5px; }
.p-opt-who { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }

.p-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.p-leg { display: inline-flex; align-items: center; gap: 5px; }
.p-leg-d { width: 8px; height: 8px; border-radius: 2px; background: var(--line); }
.p-leg-d.ok { background: var(--ok); }
.p-leg-d.bad { background: var(--bad); }
.p-leg-d.on { background: var(--accent); }
.p-leg-d.no { background: var(--line); }

/* Dokdagi o'rin: namunadagidek bitta mono qator va ostida izoh */
.p-pos-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.p-pos-t { font-size: 11px; color: var(--muted); font-weight: 400; }

/* Tezkor qator: nom va ostida holat */
.p-act {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 48px;
  padding: 4px 6px;
}
.p-act-l { font-size: 13px; font-weight: 600; }
.p-act-h { font-size: 11px; color: var(--muted); line-height: 1.2; }
.p-act.on .p-act-h { color: inherit; opacity: .8; }

/* ============================================================
   7. QOLGAN EKRANLAR — namunadagi o'lchamlar.
   ============================================================ */

/* Qidiruv maydoni — oq karta, ichida lupa belgisi */
#pickFind {
  min-height: 44px;
  padding: 10px 12px 10px 34px;
  background: var(--panel) no-repeat 11px center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M10.5 17a6.5 6.5 0 100-13 6.5 6.5 0 000 13M15.6 15.6L21 21'/%3E%3C/svg%3E");
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
}

/* Bo'lim sarlavhasi: KATTA HARF + yonida son */
.p-sec {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 2px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.p-sec-n { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Bo'sh holat — uzuq ramka, sabab va keyingi qadam */
.p-empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
}
.p-empty-t { font-size: 15px; font-weight: 600; }
.p-empty-s { font-size: 13px; color: var(--muted); margin-top: 5px; }
.p-empty-b {
  margin-top: 12px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--tint-accent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

/* «SINF EKRANI» yorlig'i */
.p-live-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  padding: 0;
}

/* Bo'limlar qatori — tanlangani ko'k fon bilan */
.p-tabs { padding: 6px 6px 8px; gap: 2px; }
.p-tab { min-height: 52px; border-radius: 10px; gap: 3px; font-size: 11px; font-weight: 600; }
.p-tab.on {
  background: var(--tint-accent);
  color: var(--accent);
  box-shadow: none;
}

/* Ikki holatli tanlagich (Baholar / Bilimlar xaritasi) */
.p-seg {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 4px;
  gap: 4px;
}
.p-seg button { min-height: 40px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.p-seg button.on { background: var(--tint-accent); color: var(--accent); }

/* Varaq — namunadagi sarlavha o'lchami */
.p-sheet { border-radius: 16px 16px 0 0; }
.p-sheet-head b { font-size: 16px; font-weight: 700; }
.p-sheet-body .p-item { min-height: 56px; }

/* ============================================================
   8. KO'ZGU SLAYDNI TO'LIQ KO'RSATADI.
   Slayd ko'zgu kengligida chiziladi va bo'yiga sig'maganda butunlay
   kichrayadi — matn ham, rasm ham. Kesib ko'rsatish yaramaydi:
   o'qituvchi doskada AYNAN nima turganini bilishi kerak.
   Juda uzun slayd 0.55 dan pastga tushmaydi (o'qilmay qoladi) —
   qolgani siljitib ko'riladi.
   ============================================================ */
/* Balandlik ANIQ bo'lishi shart: to'r qatorlari ulushga shu asosda
   bo'linadi. Nolga tushirilsa qatorlar yig'ilib, mazmun ustma-ust chiqadi. */

/* ============================================================
   9. SINF: O'QUVCHI QO'SHISH VA TAHRIRLASH.
   Ilgari bu amallar faqat eski pultda edi.
   ============================================================ */
.p-strow { display: flex; gap: 7px; margin-bottom: 8px; }
.p-sbtn {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}
.p-sbtn.acc { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Ro'yxatni yopishtirish maydoni: 30 ta ism bemalol sig'sin */
.p-sheet-body textarea {
  width: 100%;
  min-height: 170px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.45;
  font-family: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  resize: vertical;
}

/* Mavzu kartasidagi «Tahrir» havolasi — «Reja» bilan bir xil ko'rinishda */
.p-edt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  white-space: nowrap;
}

/* Yozuvdan KECH bajarilgan baho. U o'sha dars kuniga yoziladi (bola mavzuni
   o'sha kun bo'yicha baholanadi), lekin darsda bo'lmagani bilinib turishi
   kerak — shuning uchun katak foni boshqacha. */
.p-avg.late {
  background: var(--tint-diqqat);
  color: var(--warn);
  border-color: var(--warn);
}


/* ---------------- Kurs muharriri ----------------
   Daraxt uzun (80+ qadam), forma esa qisqa. Umumiy `.grid.two` da forma
   tepada qotib qolardi: pastdan qadam tanlab, tahrirlash uchun yuqoriga
   chiqishga to'g'ri kelardi. Shuning uchun tahrir paneli YOPISHQOQ va o'z
   ichida siljiydi — u ekran bilan birga tushadi. */
.km-ish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
  align-items: start;
}
.km-panel {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Tor ekranda ustunlar ustma-ust tushadi. Daraxt cheklanadi, aks holda
   yopishqoq panel ekranga umuman sig'may qolardi. */
@media (max-width: 860px) {
  .km-ish { grid-template-columns: 1fr; }
  .km-daraxt { max-height: 38vh; overflow-y: auto; }
  .km-panel { max-height: 62vh; }
}

.km-maydon { margin-top: 10px; }
.km-maydon > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.km-maydon .km-yordam { font-size: 12px; color: var(--muted); margin-top: 2px; }
.km-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.km-qator { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 4px; }
.km-qator > :first-child { flex: 1; min-width: 0; }
.km-quti {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
}
.km-quti > .km-bosh { display: flex; justify-content: space-between; align-items: center; }
.km-joy { display: flex; gap: 4px; }
.km-joy input { width: 100%; text-align: center; }
.km-ok { color: var(--ok); }
.km-bad { color: var(--bad); }

/* Muharrir paneli — ZICH. Umumiy maydon o'lchami (46px, katta ichki bo'shliq)
   barmoq uchun to'g'ri, lekin bu yerda ekranda o'ntacha maydon birga turadi
   va har biri ekranning oltidan birini egallardi. Faqat SHU panel ichida
   qisqartiriladi — qolgan sahifalar tegilmaydi. */
.km-panel input,
.km-panel select,
.km-panel textarea {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
}
.km-panel textarea { min-height: 44px; }
.km-maydon { margin-top: 8px; }
.km-maydon > label { font-size: 12px; margin-bottom: 2px; }
.km-panel .km-qator { margin-bottom: 3px; }
.km-panel button.small { min-height: 30px; padding: 4px 8px; }

/* Variant qatori: [to'g'ri] [matn] [o'chirish] — bitta qatorda.
   Ilgari ✓ belgisi variantning OSTIGA tushib, har variant ikki qator
   bo'lib ketardi. */
.km-variant { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.km-variant > input[type="text"] { flex: 1; min-width: 0; }
.km-togri {
  flex: none;
  width: 30px; min-width: 30px;
  padding: 0 !important;
  border-radius: 999px !important;
  font-weight: 700;
  color: var(--muted);
}
.km-togri.on {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--on-ok);
}

/* Sahna lineykasi — tepadagi va chapdagi raqamlar.
   To'r «necha katak» ni ko'rsatadi, lineyka esa «qaysi nuqta» ni: koordinata
   bilan ishlaydigan masalalarda (goto, nuqta) busiz bola kataklarni
   sanashga majbur bo'lardi. */
.sahna-lineyka text {
  fill: var(--muted);
  opacity: .75;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
  user-select: none;
}

/* «Ekrandan tashqari» belgisi. Bola ekranda hech narsa ko'rmasa, o'z
   kodida xato qidira boshlaydi — aslida toshbaqa shunchaki sahnadan
   chiqib ketgan bo'ladi. Shuni aytib qo'yamiz. */
.sahna-tashqari {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 12px;
  color: var(--bad);
  background: var(--panel-2);
  border-radius: 6px;
  padding: 2px 6px;
  pointer-events: none;
}

/* Toshbaqa buyruqlari haqidagi izoh — kod maydoni ostida */
.k-sahna-izoh {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.k-sahna-izoh b { color: #e93d82; font-weight: 600; }


/* ============================================================
   REJIM: ko'rib chiqish ↔ haqiqiy dars.
   Belgi dars davomida yo'qolmaydi — o'qituvchi qaysi rejimda ekanini
   har lahza bilib turishi kerak, aks holda butun dars axlatga ketadi.
   ============================================================ */
.p-korish {
  margin: 8px 10px;
  padding: 9px 11px;
  border: 1px solid var(--warn);
  border-radius: 12px;
  background: var(--tint-warn, #fdf0d5);
  color: var(--warn);
}
.p-korish-row { display: flex; align-items: center; gap: 8px; }
.p-korish-row b { flex: 1 1 auto; font-size: 13px; }
.p-korish-b {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* Taklif qatori. Yonida RAD ETISH tugmasi bor va u qayta chiqmaslikni
   kafolatlaydi (kafolat serverda). Doim turadigan ogohlantirish ikki xil
   zarar keltiradi: xalaqit beradi va bir kuni adashib bosiladi. */
.p-korish-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.p-korish-h > span { flex: 1 1 auto; }
.p-korish-no {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--warn);
  background: transparent;
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}

/* Dars xulosasi. Savol emas — sukut bo'yicha to'g'ri, e'tibor berilmasa
   ham hech narsa buzilmaydi. */
.p-xulosa {
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.p-xulosa-row { display: flex; align-items: center; gap: 8px; }
.p-xulosa-row b { flex: 1 1 auto; font-size: 13px; }
.p-xulosa-d { margin-top: 4px; font-size: 12px; color: var(--muted); }
.p-xulosa-b {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}


/* ============================================================
   SINF SOZLAMALARI. O'chirish — loyihadagi eng qaytmas amal, shuning
   uchun uning tugmasi boshqa hech nimaga o'xshamaydi va sozlamalardan
   ajratib qo'yiladi.
   ============================================================ */
/* «Sinflarim» qatori: chapda sinfning o'zi, o'ngda ⚙. Tugma tugma ichida
   turmasligi kerak — yaroqsiz HTML va bosish tashqi tugmaga ketib qoladi. */
.p-uy-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.p-uy-row > .p-item { flex: 1 1 auto; min-width: 0; }

.p-mini {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
}
.p-sep {
  height: 1px;
  margin: 16px 0 12px;
  background: var(--line);
}
.p-danger-b {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--warn);
  background: transparent;
  color: var(--warn);
  font-size: 14px;
  font-weight: 700;
}
/* Qaytmas amal — qizil. Arxivlash sariq: u qaytariladi. */
.p-danger-b.on { border-color: var(--bad); color: var(--bad); }
.p-danger-b:disabled { opacity: .4; }

/* ---------------- Tanishtiruv (birinchi kirish) ----------------

   Ekran TELEFONDAN boshlanadi: bot ichidagi Mini App shu ko'rinishni oladi.
   Keng ekranda ustun o'rtada turadi — tanishtiruvni yoyish uni o'qilishini
   yaxshilamaydi.

   Ko'rgazma — mahsulotning EKRANI. Ilgari bu yerda qo'lda chizilgan maket
   turardi («skrinshot eskiradi» degan mulohaza bilan); endi HAQIQIY
   skrinshot turadi, chunki uni `scripts/rasmlar.sh` qayta yozadi.
   Telefonda o'qilishi uchun rasmlar telefon o'lchamida yoki proyektor
   sahifasidan olinadi. */

/* Ko'rgazma rasmi. Balandligi cheklanadi: matn (sarlavha va izoh) ekrandan
   chiqib ketmasligi kerak — tanishtiruvning ma'nosi o'sha matnda. */
.in-img {
  display: block;
  width: 100%;
  max-height: 48vh;
  object-fit: contain;
  object-position: top center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(16, 22, 35, .12);
}
.in-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* varaq (80) ustidan ham yopadi */
  /* Yuqoridan mayin yorug'lik: oq ekran shu fonda «suzib» turadi. */
  background:
    radial-gradient(130% 55% at 50% -8%, var(--tint-accent) 0%, transparent 62%),
    var(--bg);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.in {
  width: 100%;
  max-width: 460px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px var(--pad) 0;
}

.in-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.in-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; letter-spacing: -.01em; }
.in-logo {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(31, 90, 209, .35);
}
.in-skip { color: var(--muted); border: 0; background: none; font-weight: 500; }

/* ---- Qadamlar tasmasi ---- */
.in-track { overflow: hidden; margin: 16px calc(var(--pad) * -1) 0; }
.in-rail { display: flex; transition: transform .38s cubic-bezier(.22, .61, .36, 1); }
.in-slide { flex: 0 0 auto; padding: 0 var(--pad); }

/* Faol qadam ichidagi qismlar navbat bilan ko'tariladi. Bir vaqtda paydo
   bo'lgan blok «tayyor turgan» bo'lib ko'rinadi; ketma-ketlik esa qarashni
   yo'naltiradi — avval ekran, keyin sarlavha, keyin izoh. */
@keyframes in-rise { from { opacity: 0; transform: translateY(14px); } }
.in-slide.on .in-shot { animation: in-rise .44s cubic-bezier(.22, .61, .36, 1) both; }
.in-slide.on .in-kap-b { animation: in-rise .44s cubic-bezier(.22, .61, .36, 1) .07s both; }
.in-slide.on .in-txt h2 { animation: in-rise .44s cubic-bezier(.22, .61, .36, 1) .12s both; }
.in-slide.on .in-txt p { animation: in-rise .44s cubic-bezier(.22, .61, .36, 1) .17s both; }
@media (prefers-reduced-motion: reduce) {
  .in-rail { transition: none; }
  .in-slide.on * { animation: none !important; }
}

.in-txt { padding-top: 18px; }
.in-txt h2 {
  font-size: 25px; font-weight: 700; letter-spacing: -.022em;
  line-height: 1.22; margin: 9px 0 9px;
}
.in-txt p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; }
.in-kap-b {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--accent); background: var(--tint-accent);
  border-radius: 999px; padding: 4px 11px;
}

/* ---- Ko'rgazma: mahsulotning ekrani ---- */
.in-shot {
  /* Qat'iy balandlik: qadamdan qadamga o'tganda sarlavha SAKRAMASLIGI kerak.
     Tarkib undan past bo'lsa pastida havo qoladi — bu ekranning o'z havosi. */
  height: 320px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(16, 22, 35, .05), 0 14px 34px -12px rgba(16, 22, 35, .22);
}
@media (prefers-color-scheme: dark) {
  .in-shot { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -12px rgba(0, 0, 0, .6); }
}
.in-shot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 13px;
}
.in-shot-bar b { font-size: 14.5px; }
.in-shot-body { flex: 1 1 auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.in-shot-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px;
}
.in-grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-chip {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px;
}
.in-shot-body .in-chip { background: var(--panel-2); }
.in-chip.acc { color: var(--accent); border-color: var(--accent); background: var(--tint-accent); }
.in-chip.live { color: var(--ok); border-color: var(--ok); background: var(--tint-ok); }

/* 1. Sinf: kod va shaxsiy kodlar */
.in-kod { display: flex; align-items: baseline; gap: 6px; }
.in-kod u {
  text-decoration: none; font-size: 10.5px; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
}
.in-kod b {
  font-size: 17px; font-weight: 700; letter-spacing: 3px;
  color: var(--accent); background: var(--tint-accent);
  border-radius: 8px; padding: 1px 8px;
}
.in-kid {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px;
}
.in-av {
  flex: 0 0 auto;
  width: 27px; height: 27px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--tint-accent); color: var(--accent);
}
.in-pin {
  flex: 0 0 auto; font-style: normal; font-weight: 700;
  letter-spacing: 1.5px; color: var(--muted);
  background: var(--panel-2); border-radius: 7px; padding: 2px 8px;
}

/* 2. Mavzular */
.in-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px;
}
.in-item.on { border-color: var(--accent); background: var(--tint-accent); }
.in-item.ok { color: var(--muted); }
.in-num {
  flex: 0 0 auto; font-style: normal; font-weight: 700; color: var(--muted);
  width: 20px; text-align: center;
}
.in-item.on .in-num { color: var(--accent); }
.in-item.ok .in-num { color: var(--ok); }
.in-o { flex: 1 1 auto; height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.in-o i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* 3. Jonli dars */
.in-vaqt { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.in-savol { font-weight: 700; font-size: 15px; line-height: 1.35; margin-bottom: 3px; }
.in-opt {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px;
}
.in-opt.ok { border-color: var(--ok); }
.in-opt .in-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--panel-2); border-radius: 0 11px 11px 0;
}
.in-opt.ok .in-fill { background: var(--tint-ok); }
.in-opt > span, .in-opt > b { position: relative; }
.in-opt b { color: var(--muted); font-variant-numeric: tabular-nums; }
.in-opt.ok b { color: var(--ok); }
.in-jav { display: flex; gap: 3px; flex: 1 1 auto; flex-wrap: wrap; }
.in-jav i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); }
.in-jav i.on { background: var(--ok); }

/* 4. Jurnal va bilimlar xaritasi */
.in-baho { display: flex; gap: 5px; flex: 0 0 auto; }
.in-baho b {
  width: 23px; height: 23px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; background: var(--panel-2); color: var(--muted);
}
.in-baho b.ok { background: var(--tint-ok); color: var(--ok); }
.in-baho b.bad { background: var(--tint-bad); color: var(--bad); }
.in-jrow {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px;
}
.in-jrow + .in-jrow { border-top: 1px solid var(--line); }
.in-avg {
  flex: 0 0 auto; min-width: 30px; text-align: center;
  font-weight: 700; font-size: 12.5px; border-radius: 7px; padding: 2px 6px;
  background: var(--tint-accent); color: var(--accent);
}
.in-ajrat { height: 1px; background: var(--line); margin: 4px 0 2px; }
.in-xar {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; line-height: 1.3; color: var(--muted);
}
.in-xar span { flex: 0 0 60px; }
.in-xar i { flex: 1 1 auto; height: 7px; border-radius: 99px; background: var(--panel-2); }
.in-xar u { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.in-xar u.kam { background: var(--warn); }

/* 5. Dars rejasi */
.in-varaq {
  flex: 1 1 auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.in-varaq-h {
  font-weight: 700; font-size: 13px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.in-qator { display: flex; align-items: baseline; gap: 9px; }
.in-rim {
  flex: 0 0 22px; font-style: normal; font-weight: 700;
  font-size: 11px; color: var(--muted); text-align: right;
}
.in-qator u { text-decoration: none; color: var(--muted); font-size: 12px; }

/* ---- Pastki qator ---- */
.in-foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 16px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.in-dots { display: flex; justify-content: center; gap: 6px; padding-bottom: 14px; }
.in-dot {
  min-height: 0; padding: 0; border: 0; border-radius: 99px;
  height: 6px; width: 6px; background: var(--line);
  transition: width .26s, background .26s;
}
.in-dot.on { width: 24px; background: var(--accent); }
.in-nav { display: flex; gap: 10px; align-items: stretch; }
.in-back {
  flex: 0 0 auto; width: 52px; padding: 0;
  font-size: 19px; color: var(--muted); border-radius: 13px;
}
.in-next {
  flex: 1 1 auto; border-radius: 13px; font-size: 16px;
  box-shadow: 0 6px 18px -6px rgba(31, 90, 209, .55);
}
.in-back.in-off { visibility: hidden; }
.in-stu { width: 100%; margin-top: 9px; color: var(--muted); }
.in-never {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: 13.5px; padding-top: 12px; cursor: pointer;
}
.in-never input { width: auto; min-height: 0; }

@media (max-height: 700px) {
  /* Past ekran: KO'RGAZMA qisqarmaydi — u asosiy narsa. Matn zichlashadi,
     qolgani suriladi; pastki qator yopishib turgani uchun tugma har doim
     ko'rinib turadi. */
  .in-txt { padding-top: 13px; }
  .in-txt h2 { font-size: 22px; margin: 8px 0; }
  .in-foot { padding-top: 12px; }
  .in-dots { padding-bottom: 11px; }
}

/* ---------------- O'quvchining kirish oynasi ----------------

   Bola bu oynani ko'pincha SINF KOMPYUTERIDA ochadi. Dars ekrani keng
   ustunga yoyiladi (`body.student` — 1200 px), kirish oynasi esa
   yoyilmasligi kerak: ekran bo'ylab cho'zilgan kod maydoni va tugma sahifani
   tugallanmagan ko'rsatadi. Shuning uchun bu yerda o'z o'lchovi.

   Kod maydoni — sahifaning yagona ishi. U markazda, katta va bir kenglikdagi
   raqamlar bilan turadi: bola uni doskadan ko'chirib teradi va terganini
   uzoqdan ham tekshira olishi kerak. */
.kirish {
  max-width: 430px;
  margin: min(8vh, 56px) auto 0;
  padding: 26px 26px 22px;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 22, 35, .05), 0 18px 42px -20px rgba(16, 22, 35, .32);
}
@media (prefers-color-scheme: dark) {
  .kirish { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 42px -20px rgba(0, 0, 0, .7); }
}

.kirish-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kirish-logo {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--accent); color: #fff;
  font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(31, 90, 209, .35);
}
.kirish h1 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 1px; }

.kirish-lab {
  display: block; text-align: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 16px;
}
.kirish .code-input {
  display: block;
  width: min(258px, 100%);
  margin: 9px auto 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 36px;
  letter-spacing: 12px;
  /* Harflar orasidagi bo'shliq OXIRGI raqamdan keyin ham qo'shiladi va
     markazlashtirilgan matn chapga siljib qoladi — yarmi qaytariladi. */
  text-indent: 12px;
  border-radius: 14px;
  padding: 13px 10px;
}
.kirish .code-input::placeholder { color: var(--line); }
.kirish-b { width: 100%; min-height: 52px; font-size: 17px; border-radius: 14px; }
.kirish-back { width: 100%; margin-top: 10px; color: var(--muted); }
.kirish-alt {
  text-align: center; font-size: 13.5px; color: var(--muted);
  margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--line);
}
.kirish-alt a { color: var(--accent); }
.kirish-note { color: var(--warn); margin-bottom: 8px; }
.kirish-err {
  color: var(--bad); background: var(--tint-bad);
  border-radius: 10px; padding: 9px 12px; margin-top: 12px; text-align: center;
}
.kirish #search { margin-top: 4px; }
.kirish .roster { max-height: 42vh; }
/* Ro'yxatdagi bosh harflar: bola o'zini ismni O'QIMASDAN, shaklidan topadi —
   yigirma qatorli ro'yxatda bu sezilarli tez. */
.kirish .roster .opt { border-radius: 12px; }
.bosh {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--tint-accent); color: var(--accent);
}

/* ---------------- Dars ekrani: tepa tasma ----------------
   Sinf nomi va bolaning ismi doim ko'rinib tursin: bir kompyuterda ikki
   bola o'tirganda «hozir kim javob beryapti» degan savol shu yerda hal
   bo'ladi, sahifa esa pastga suriladi. */
.live-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 12px;
  padding: 10px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
#roomTitle { font-size: 17px; letter-spacing: -.01em; }

/* ---------------- Kutish ----------------
   Bola bu ekranga uzoq qaraydi (dars boshlanishini kutadi). Qotib turgan
   belgi «uzildi» degan taassurot beradi — shuning uchun u sekin nafas oladi. */
#wait { padding: 44px 16px; }
.wait-ic { font-size: 44px; margin-bottom: 12px; animation: kut-nafas 2.6s ease-in-out infinite; }
@keyframes kut-nafas {
  50% { transform: scale(1.09); opacity: .72; }
}
@media (prefers-reduced-motion: reduce) { .wait-ic { animation: none; } }

/* ---------------- Dars ekrani: o'qiladigan kenglik ----------------

   Keng ustun (1200 px) IKKI narsa uchun kerak: slayd (rasm va matn yonma-yon)
   va demo sahnasi. Qolgani — matn: 1200 px ga cho'zilgan javob qatorida ko'z
   bir chetdan ikkinchisiga yuguradi va o'qish sekinlashadi.

   Qoida hammasiga BIRDAY qo'llanadi: bittasi tor, yonidagisi keng bo'lsa
   sahifa buzilgandek ko'rinadi. */
body.student #question,
body.student #activity,
body.student #material,
body.student #korishBar,
body.student #wait,
body.student #kursCard,
body.student #hwCard,
body.student #recsCard {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- Dars ichidagi ekranlar ----------------

   Kirish oynasidan keyin bola SHU yerda o'tiradi — 45 daqiqa. Shuning uchun
   ichkarida ham bitta til: karta sarlavhasi, ro'yxat qatori va holat belgisi
   hamma joyda bir xil ko'rinadi. Ilgari uyga vazifa, yozuv va kurs
   ro'yxatlari JAVOB TUGMASINI (`opt`) qayta ishlatardi — bola uchun
   bosiladigan javob bilan boriladigan havola bir xil ko'rinardi. */

/* Kichik sarlavha: bu blok NIMA ekanini bir so'zda aytadi. */
.kap {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  /* Katta harf — CSS ning ishi: DOM da matn o'qiladigan bo'lib qoladi
     (ekran o'quvchisi «S-A-V-O-L» deb harflab o'qimasin). */
  text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}

/* ---- Karta sarlavhasi ---- */
.karta-bosh { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.karta-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--tint-accent);
}
.karta-ic.sariq { background: var(--tint-diqqat); }
.karta-ic.yashil { background: var(--tint-ok); }
.karta-bosh b { font-size: 17px; letter-spacing: -.01em; }

/* ---- Ro'yxat qatori ---- */
.qator {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel);
  color: inherit; text-decoration: none;
  transition: border-color .14s, transform .14s;
}
.qator:last-child { margin-bottom: 0; }
.qator:hover { border-color: var(--accent); transform: translateX(2px); color: inherit; }
.qator.sunik { opacity: .55; }
.qator-ic {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--panel-2);
}
.qator-ic.sariq { background: var(--tint-diqqat); }
.qator-ic.yashil { background: var(--tint-ok); }
.qator .grow { display: flex; flex-direction: column; gap: 1px; }
.qator b { font-weight: 600; font-size: 16px; }
.qator-izoh { font-size: 13px; color: var(--muted); }
.qator-o { flex: 0 0 auto; color: var(--muted); font-size: 20px; line-height: 1; }

/* ---- Holat belgisi ---- */
.hol {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px;
  background: var(--panel-2); color: var(--muted);
  white-space: nowrap;
}
.hol.ok { background: var(--tint-ok); color: var(--ok); }
.hol.warn { background: var(--tint-diqqat); color: var(--warn); }
.hol.acc { background: var(--tint-accent); color: var(--accent); }

/* ---- Ogohlantirish kartasi (ko'rib chiqish rejimi) ---- */
.ogoh {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-color: var(--warn);
  background: var(--tint-diqqat);
}
.ogoh-ic { flex: 0 0 auto; font-size: 20px; }

/* ---- Savol ---- */
.savol-matn { font-weight: 700; margin-bottom: 14px; line-height: 1.3; }
/* Sinf javoblarining ulushi: yopilgan savolda variant ortida chiziq bo'lib
   turadi. Raqam («5 ta») o'z-o'zicha manzara bermaydi, chiziq beradi. */
.opt { position: relative; overflow: hidden; }
.opt > * { position: relative; }
.ulush {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 0 12px 12px 0;
  background: rgba(16, 22, 35, .06);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-color-scheme: dark) { .ulush { background: rgba(255, 255, 255, .07); } }
.navbat-b { width: 100%; margin-top: 12px; }

/* ---- Material ---- */
.material-sar { font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin-bottom: 6px; }
.material-royxat { margin-top: 12px; font-size: inherit; }

/* ---- Mustahkamlash mashqi ---- */
.mashq-bosh { margin-bottom: 10px; align-items: baseline; }
.mashq-bosh .kap { margin-bottom: 0; }
.timer {
  font-size: 13px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Yakun — darsning hissiy nuqtasi: natija RAQAM bo'lib turadi, jadval esa
   uning yonida. Ilgari ikkalasi bir xil qalinlikdagi matn edi. */
.yakun {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--tint-accent);
}
.yakun-ball { flex: 0 0 auto; display: flex; align-items: baseline; gap: 3px; color: var(--accent); }
.yakun-ball b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.yakun-ball u { text-decoration: none; font-size: 17px; font-weight: 600; opacity: .7; }
.yakun .grow { display: flex; flex-direction: column; gap: 2px; }
.yakun-izoh { font-size: 13.5px; color: var(--muted); }

.mashq-jadval td, .mashq-jadval th { padding: 9px 10px; }
.mashq-jadval th:first-child, .mashq-jadval td:first-child {
  width: 34px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.mashq-jadval td:last-child { font-variant-numeric: tabular-nums; }
.mashq-jadval tr:last-child td { border-bottom: 0; }
.mashq-jadval tr.me td:first-child { color: var(--accent); }

/* ============================================================
   O'QUVCHI FOTOSI — pultda, ism yonida.

   O'qituvchi bir kunda olti sinf ko'radi; ikki yuz ismni yuzga qo'shib
   eslab qolish mumkin emas. Foto shu yerda ishlaydi: pult ro'yxatida,
   jurnalda va «javob bermaganlar» tasmasida.

   Fotosi yo'qda bosh harflar turadi — o'quvchi tomonidagi `.bosh` bilan
   bir xil ko'rinishda, ya'ni ro'yxat teshik-teshik bo'lib qolmaydi.
   ============================================================ */
/* O'lcham — shu bo'limning butun ma'nosi. Yuz TANILISHI kerak, «bor
   ekan» deb bilinishi emas: 34 px da o'qituvchi rasmga tikilib qoladi,
   48 px da esa qarashi bilan taniydi. Ro'yxat uzayadi — mayli, u baribir
   suriladi; tanimaslik esa fotoni ma'nosiz qiladi. */
.p-av {
  position: relative;
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  background: var(--tint-accent); color: var(--accent);
  font-size: 16px; font-weight: 700;
}
.p-av img {
  width: 100%; height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
/* Jonli/ulanmagan belgisi fotoning burchagida. Oq halqa uni har qanday
   rasm ustida ajratib turadi. */
.p-av > .p-dot {
  position: absolute;
  right: 0; bottom: 1px;
  width: 12px; height: 12px;
  border: 2px solid var(--panel);
  box-sizing: content-box;
}
/* Varaq boshi: bu «bu bolami?» degan savolga javob beradigan joy —
   shuning uchun foto ro'yxatdagidan ikki barobar katta. */
.p-shead { display: flex; align-items: center; gap: 12px; padding: 2px 2px 0; }
.p-shead .p-av { width: 92px; height: 92px; font-size: 30px; }
.p-shead .p-av > .p-dot { width: 14px; height: 14px; right: 4px; bottom: 4px; }

/* Javob bermaganlar tasmasi: yuz + ism. Bu yerda tasma dars ekranida
   turadi va joyi tor — foto kichik, lekin ism yonida. */
.p-miss { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; }
.p-miss .p-av { width: 28px; height: 28px; font-size: 11px; }
.p-miss-row { max-height: 84px; }
.p-miss.more { padding: 4px 8px; }

/* ============================================================
   TAYYORGARLIK — olimpiada va attestatsiya kirish sahifasi.

   Bo'lim hali tayyor emas, sahifaning ishi esa shuni ROSTINI aytish.
   Shuning uchun bu yerda soxta yuklanish chizig'i ham, «tez orada» degan
   bo'sh va'da ham yo'q: belgi, nom, holat va nima bo'lishi.
   ============================================================ */
.ta-karta { max-width: 560px; margin: 8vh auto 0; padding: 32px 22px 26px; }
.ta-belgi {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
}
.ta-nom { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
/* Holat — chipda, sarlavhaning ostida: bosh sahifadagi «jonli/ulanmagan»
   belgilari bilan bir tilda gapiradi. */
.ta-holat {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tint-accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.ta-nima {
  margin: 16px auto 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
}
.ta-qachon {
  margin: 12px auto 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.ta-orqaga {
  margin-top: 22px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--fg);
  font-size: 15px;
}

/* ============================================================
   OLIMPIADAGA TAYYORGARLIK — dars sahifasi.

   Dars besh qadam: qoida → namuna → tuzoq → mashq → sinov
   (docs/olimpiada-reja.md). Sahifa telefonga mo'ljallangan: bola uni
   uyda, o'zi o'qiydi, shuning uchun matn kengligi cheklangan va har
   qadam alohida ekran bo'lib keladi.
   ============================================================ */
/* `body.student` 1200 px keng — ustunni MARKAZGA olish kerak, aks
   holda dars ham, mavzular ro'yxati ham chap chekkaga yopishib
   qoladi va o'ng tomonda katta bo'sh joy turadi. */
.ol-wrap { max-width: 720px; margin: 0 auto; }
.ol-bosh { padding: 18px 0 12px; }
.ol-maqsad { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.ol-bosh h1 { font-size: 24px; line-height: 1.2; margin: 6px 0 0; }

/* Qadamlar yo'lakchasi — yuqorida yopishib turadi: bola qayerdaligini
   va nimasi qolganini doim ko'rib tursin. */
.ol-yol {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 6px; padding: 10px 0; margin-bottom: 18px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.ol-yol button {
  flex: 1; min-width: 0; padding: 7px 4px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; border-top: 2px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol-yol button.on { color: var(--accent); border-top-color: var(--accent); }
.ol-yol button.tugadi { color: var(--ok); border-top-color: var(--ok); }

.ol-karta {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
}
.ol-karta h2 { font-size: 18px; margin: 0 0 12px; }
.ol-karta p { margin: 0 0 12px; }
.ol-karta p:last-child { margin-bottom: 0; }

/* Raqam-harf qatori: A = 10 … F = 15 */
.ol-harflar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ol-harflar li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--tint-accent); padding: 5px 9px; border-radius: 8px;
}

/* O'RIN JADVALI — shu mavzuning o'z asbobi: raqam, darajasi, ko'paytmasi. */
.ol-jadval { overflow-x: auto; margin: 4px 0 14px; }
.ol-jadval table {
  border-collapse: collapse; min-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.ol-jadval th, .ol-jadval td {
  padding: 7px 12px; text-align: center; border-bottom: 1px solid var(--line);
}
.ol-jadval tr:last-child td { border-bottom: 0; }
/* USTUN sarlavhasi — mazmun tashiydi («(A ∨ B) ∧ ¬C»), demak to'liq
   o'qiladi: tanadagi bilan bir xil o'lchov, katta harfga aylantirilmaydi.
   Ilgari u qator yorlig'i bilan bitta sinfda edi va 10px, xira, katta
   harfda chiqib, butun jadvalning ma'nosini bo'g'ib qo'yardi. */
.ol-jadval .ol-bosh th {
  font-size: 14px; font-weight: 700; color: var(--fg);
  border-bottom: 2px solid var(--line); padding-bottom: 9px;
  white-space: nowrap;
}
/* QATOR yorlig'i — o'rin jadvalidagi «O'rin darajasi» kabi. U mazmun
   emas, ko'rsatkich; kichik va xira bo'lgani to'g'ri. */
.ol-jadval .yorliq th {
  font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: right; white-space: nowrap;
}
.ol-jadval .raqam td { font-size: 22px; font-weight: 700; color: var(--accent); }
.ol-jadval .yigindi td { font-weight: 700; }
.ol-jadval .yigindi td.jami { color: var(--ok); }
.ol-jadval td.soz { font-family: inherit; font-size: 13px; color: var(--muted); text-align: left; }

.ol-fikr { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.ol-fikr li { position: relative; padding: 0 0 12px 30px; counter-increment: q; }
.ol-fikr li:last-child { padding-bottom: 0; }
.ol-fikr li::before {
  content: counter(q); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--tint-accent); color: var(--accent);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ol-xulosa { background: var(--tint-diqqat); border-radius: 10px; padding: 12px 14px; font-size: 14px; }

/* ---- Savol ---- */
.ol-savol {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
}
.ol-nishonlar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ol-nishon {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 6px;
  background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.ol-matn { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.ol-variantlar { display: grid; gap: 8px; }
.ol-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 13px; font-size: 15px; text-align: left;
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
}
.ol-opt .harf {
  flex: 0 0 auto; padding-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.ol-opt .qiymat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ol-opt.togri { border-color: var(--ok); background: var(--tint-ok); }
.ol-opt.togri .harf { color: var(--ok); }
.ol-opt.xato { border-color: var(--bad); background: var(--tint-bad); }
.ol-opt.xato .harf { color: var(--bad); }

.ol-ochiq { display: flex; gap: 8px; }
.ol-ochiq input {
  flex: 1; min-width: 0; padding: 11px 13px; font-size: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
}
.ol-ochiq input.togri { border-color: var(--ok); background: var(--tint-ok); }
.ol-ochiq input.xato { border-color: var(--bad); background: var(--tint-bad); }

.ol-izoh {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); font-size: 14px; line-height: 1.6;
}
.ol-izoh .bosh {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 5px;
}
.ol-izoh.ok .bosh { color: var(--ok); }
.ol-izoh.yoq .bosh { color: var(--bad); }

/* ---- Sinov ---- */
.ol-sinov-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--tint-accent); margin-bottom: 14px;
}
.ol-soat {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.ol-soat.oz { color: var(--bad); }
.ol-natija { text-align: center; padding: 22px 18px; border-radius: var(--radius); margin-bottom: 14px; }
.ol-natija.otdi { background: var(--tint-ok); }
.ol-natija.yiqildi { background: var(--tint-diqqat); }
.ol-ball {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.ol-natija.otdi .ol-ball { color: var(--ok); }
.ol-natija.yiqildi .ol-ball { color: var(--warn); }

.ol-oyoq { display: flex; gap: 10px; margin: 18px 0 8px; }
.ol-oyoq button { flex: 1; }
.ol-eslatma {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--tint-diqqat); font-size: 14px; margin-top: 14px;
}

/* Sinovdagi qism sarlavhasi — varaqdagidek ajratib turadi.
   Ball shu yerda yoziladi: bola vaqtini nimaga sarflayotganini bilsin. */
.ol-qism {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 18px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}
.ol-qism b { font-size: 15px; color: var(--accent); }

/* ---- Sinovdagi belgilash: NEYTRAL ----
   Tanlangan javob qizil ham, yashil ham bo'lmaydi. Sinov davomida bola
   javobi to'g'rimi-yo'qmi bilmaydi, rang esa uni bilgandek qilib
   ko'rsatadi va bekorga qo'rqitadi. */
.ol-opt.tanlandi {
  border-color: var(--accent);
  background: var(--tint-accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ol-opt.tanlandi .harf { color: var(--accent); }

/* Topshiriq raqami — panel bilan bog'lanish uchun */
.ol-raqam {
  display: inline-block; min-width: 22px; margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; color: var(--muted);
}

/* Yakundagi hukm: to'g'ri variant OCHILMAYDI, faqat bolaning javobi
   baholanadi (bank himoyasi). */
.ol-hukm {
  margin-top: 10px; font-size: 13px; font-weight: 700;
}
.ol-hukm.ok { color: var(--ok); }
.ol-hukm.yoq { color: var(--bad); }

/* ---- Tez o'tish paneli ----
   Uzun varaqda surib qidirish vaqtni yeydi, javobsiz qolgan topshiriq esa
   ko'rinmay ketadi. Panel ikkala muammoni ham yechadi. */
.ol-nav {
  position: sticky; top: 0; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 10px 0; margin-bottom: 14px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.ol-nav-t {
  width: 30px; height: 30px; padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
}
.ol-nav-t.bor { color: var(--accent); border-color: var(--accent); background: var(--tint-accent); }
.ol-nav-t.ok { color: var(--ok); border-color: var(--ok); background: var(--tint-ok); }
.ol-nav-t.yoq { color: var(--bad); border-color: var(--bad); background: var(--tint-bad); }
.ol-nav-t.yangi-qism { margin-left: 12px; }
.ol-nav-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ol-nav-hol {
  flex: 1 0 100%; font-size: 12px; color: var(--muted); padding-top: 2px;
}

/* ============================================================
   OLIMPIADA: CHIZMA VA MINI ILOVA

   Quruq matn bolani charchatadi — ayniqsa o'lchov mavzusida, u yerda
   hamma narsa nisbat va ko'paytuvchi. Rang va o'lcham SHU YERDA
   belgilanadi, mazmun esa faqat nom va parametr beradi.
   ============================================================ */
.ol-chizma { margin: 14px 0; overflow-x: auto; }
.ol-svg { display: block; width: 100%; height: auto; min-width: 320px; }
.ol-chizma-izoh { font-size: 13px; color: var(--muted); margin-top: 6px; }

.ol-sv-quti { fill: var(--panel-2); stroke: var(--line); }
.ol-sv-quti.asos { fill: var(--tint-accent); stroke: var(--accent); }
.ol-sv-nom { font-size: 13px; font-weight: 700; fill: var(--fg); }
.ol-sv-izoh { font-size: 11px; fill: var(--muted); }
.ol-sv-strelka { stroke: var(--accent); stroke-width: 2; marker-end: none; }
.ol-sv-marta {
  font-size: 12px; font-weight: 700; fill: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ol-sv-bit { fill: var(--panel-2); stroke: var(--line); }
.ol-sv-bitraqam {
  font-size: 14px; font-weight: 700; fill: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ol-sv-ustun { fill: var(--line); }
.ol-sv-ustun.asos { fill: var(--accent); }
/* Ustun ichidagi yozuv — uzun ustunda tashqariga joy qolmaganda. */
.ol-sv-ichida { font-size: 11px; font-weight: 700; fill: var(--on-accent); }

/* Mini ilova — bola o'zi son kiritib, natijani jonli ko'radi. */
.ol-vidjet {
  margin: 14px 0; padding: 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
}
.ol-vidjet-bosh {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.ol-vidjet-qator { display: flex; gap: 8px; }
.ol-vidjet-qator input, .ol-vidjet-qator select {
  padding: 10px 12px; font-size: 16px; color: var(--fg);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.ol-vidjet-qator input {
  flex: 1 1 auto; min-width: 90px; width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ol-vidjet-qator select { flex: 0 0 auto; min-width: 96px; }
.ol-vidjet-chiq { margin-top: 12px; display: grid; gap: 4px; }
.ol-vidjet-r {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 8px; font-size: 14px;
}
.ol-vidjet-r.on { background: var(--tint-accent); }
.ol-vidjet-nom { color: var(--muted); font-weight: 600; }
.ol-vidjet-r.on .ol-vidjet-nom { color: var(--accent); }
.ol-vidjet-son {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.ol-vidjet-eslatma {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}

/* Hisoblagichning kiritish maydonlari — yorliq va qiymat yonma-yon. */
.ol-vidjet-maydon {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.ol-vidjet-maydon label { font-size: 14px; color: var(--fg); }
.ol-vidjet-maydon input {
  flex: 0 0 auto; width: 120px; padding: 8px 10px; font-size: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; text-align: right;
}

/* ---- Mantiqiy sxema ----
   Element shakllari varaqdagi kabi. Inkor — chiqishdagi doiracha. */
/* ---- Virtual Excel varag'i ---- */
.ol-vq-bosh { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ol-vq-manzil { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600;
                min-width: 46px; text-align: center; padding: 5px 6px;
                border: 1px solid var(--line); border-radius: 6px;
                background: var(--panel); }
.ol-vq-kirit { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
               padding: 6px 8px; border: 1px solid var(--line);
               border-radius: 6px; background: var(--panel); color: var(--fg); }
.ol-vq-kirit:disabled { opacity: .6; }
.ol-vq-setka { overflow-x: auto; }
.ol-vq-jadval { border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 14px; }
.ol-vq-jadval th, .ol-vq-jadval td { border: 1px solid var(--line);
                                     padding: 5px 9px; }
.ol-vq-uh, .ol-vq-qr, .ol-vq-burchak { background: var(--panel-2);
                                       color: var(--muted); font-weight: 600;
                                       font-size: 12px; text-align: center; }
.ol-vq-qr { min-width: 26px; }
.ol-vq-k { min-width: 74px; max-width: 190px; text-align: left; cursor: pointer;
           background: var(--panel); white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; }
.ol-vq-son { text-align: right; }
.ol-vq-formula { color: var(--accent); }
.ol-vq-tanlangan { outline: 2px solid var(--accent); outline-offset: -2px; }
.ol-vq-belgi { background: var(--tint-accent); }
.ol-blok-kirit { flex: 0 0 88px; text-align: center; }
.ol-blok-ikki { font-weight: 700; color: var(--muted); }
.ol-blok-hisob { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                 font-size: 13px; }
.ol-blok-qator { color: var(--muted); }
.ol-blok-jami { margin-top: 4px; font-size: 15px; font-weight: 700;
                color: var(--accent); }
.ol-blok-xato { color: var(--bad); font-size: 13px; }
.ol-nus-manba { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 14px; margin: 8px 0; padding: 6px 10px;
                border: 1px solid var(--line); border-radius: 6px;
                background: var(--panel-2); }
.ol-nus-manbakatak { background: var(--tint-accent); font-size: 12px; }
.ol-nus-izoh { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: 13px; }
.ol-nus-qator { color: var(--muted); }
.ol-vq-oyoq { display: flex; align-items: center; gap: 10px; margin-top: 8px;
              flex-wrap: wrap; }
.ol-vq-kalit { font-size: 12px; padding: 4px 10px; border-radius: 6px;
               border: 1px solid var(--line); background: var(--panel);
               color: var(--fg); cursor: pointer; }
.ol-vq-izoh { font-size: 12px; color: var(--muted); }

.ol-sv-element { fill: var(--panel); stroke: var(--fg); stroke-width: 1.6; }
.ol-sv-sim { fill: none; stroke: var(--fg); stroke-width: 1.6; }
.ol-sv-doira { fill: var(--panel); stroke: var(--fg); stroke-width: 1.6; }
.ol-sv-tugun { fill: var(--accent); }
.ol-sv-elnom {
  font-size: 10px; font-weight: 700; fill: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Venn — amalning ma'nosini bir qarashda beradi. */
.ol-sv-venn-fon { fill: var(--panel-2); stroke: var(--line); }
.ol-sv-venn { fill: none; stroke: var(--fg); stroke-width: 1.6; }
.ol-sv-venn.on { fill: var(--tint-accent); stroke: var(--accent); }
.ol-sv-venn-teshik { fill: var(--panel-2); stroke: var(--accent); stroke-width: 1.6; }

/* ---- Rostlik jadvali ilovasi ---- */
.ol-ifoda {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; font-weight: 700; color: var(--fg);
  padding: 8px 0 12px;
}
.ol-rost-tug { display: flex; flex-wrap: wrap; gap: 8px; }
.ol-rost-b {
  padding: 9px 14px; font-size: 15px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
}
.ol-rost-b.on { color: var(--accent); border-color: var(--accent);
                background: var(--tint-accent); }
.ol-rost-natija {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 4px;
}
.ol-rost-nom { font-size: 12px; color: var(--muted);
               text-transform: uppercase; letter-spacing: .06em; }
.ol-rost-q {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px; color: var(--muted);
}
.ol-rost-q.on { color: var(--ok); }
.ol-vidjet .ol-jadval table { font-size: 14px; }
.ol-vidjet .ol-jadval .ol-bosh th { font-size: 14px; }
.ol-vidjet .ol-jadval tr.joriy td { background: var(--tint-accent); font-weight: 700; }
.ol-vidjet .ol-jadval td.rost { color: var(--ok); font-weight: 700; }

/* ============================================================
   MASHQ NATIJASI — kim qaysi savolda adashdi.
   `.p-ism` — variant yonidagi bola ismi (bosh harf o'qilmaydi).
   ============================================================ */
.p-ism {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  background: var(--tint-accent); color: var(--accent);
  border: 1px solid transparent;
}
.p-ism.ok  { background: rgba(23,145,74,.14); color: var(--ok); border-color: var(--ok); }
.p-ism.bad { background: rgba(196,45,45,.14); color: var(--bad); border-color: var(--bad); }
.p-ism.no  { background: var(--panel-2); color: var(--muted); border-color: var(--line); }

.p-natija-w { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-natija { border-collapse: collapse; font-size: 13px; width: 100%; }
.p-natija th, .p-natija td {
  border: 1px solid var(--line);
  padding: 5px 6px;
  text-align: center;
  white-space: nowrap;
}
.p-natija .nm {
  text-align: left; position: sticky; left: 0; background: var(--panel);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.p-natija th { background: var(--panel-2); font-weight: 700; }
.p-natija th.nm { background: var(--panel-2); }
.p-natija th.q { cursor: pointer; min-width: 30px; }
.p-natija th.q:hover { color: var(--accent); }
.p-natija th.q.past { color: var(--bad); }
.p-natija td.c { font-weight: 700; min-width: 30px; }
.p-natija td.ok  { color: var(--ok); background: rgba(23,145,74,.10); }
.p-natija td.bad { color: var(--bad); background: rgba(196,45,45,.12); }
.p-natija td.no  { color: var(--muted); }
.p-natija .jm { font-weight: 700; }
.p-natija tr.jami td { background: var(--panel-2); font-weight: 600; color: var(--muted); }
.p-natija tr.jami td.nm { background: var(--panel-2); }

@media (min-width: 900px) {
  body.pult.brauzer #sheet.keng .p-sheet { width: min(1100px, 96vw); max-width: none; }
}

/* O'quvchi javob berdi — QAYSI ekani yashirilgan, faqat shu belgi turadi
   (activity.js dagi KORINISH_MS izohiga qarang). */
.javob-qabul {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--ok);
  background: var(--tint-ok);
  border: 1px solid var(--ok);
}
.javob-yashirin .opt.dimmed { cursor: default; }

/* ============================================================
   JURNAL JADVALI (kompyuterda) — qator: bola, ustun: dars sanasi,
   oxirida o'rtacha. Ism ustuni suriladigan jadvalda joyida qoladi.
   ============================================================ */
body.pult.brauzer #jrWrap.jr-jadval { display: block; }
.jr-w {
  width: fit-content;
  max-width: 100%;
  overflow: auto;
  max-height: calc(100vh - 190px);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.p-jurnal { border-collapse: separate; border-spacing: 0; font-size: 14px; width: auto; }
.p-jurnal th, .p-jurnal td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
.p-jurnal th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2);
  font-weight: 700;
  padding: 6px 4px;
  vertical-align: bottom;
}
.p-jurnal th.d { min-width: 48px; max-width: 64px; }
.p-jurnal th .tm {
  font-size: 10px; font-weight: 400; color: var(--muted);
  max-width: 64px; overflow: hidden; text-overflow: ellipsis;
}
.p-jurnal .nm {
  position: sticky; left: 0; z-index: 1;
  background: var(--panel);
  text-align: left;
  min-width: 170px; max-width: 220px;
}
.p-jurnal th.nm { z-index: 3; background: var(--panel-2); padding-left: 10px; }
.jr-ism {
  all: unset;
  display: block;
  padding: 7px 10px;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.jr-ism:hover { color: var(--accent); }
.p-jurnal td.b { cursor: pointer; font-weight: 700; height: 34px; min-width: 40px; }
.p-jurnal td.b:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.p-jurnal td.b.late { font-style: italic; text-decoration: underline dotted; }
.p-jurnal .av {
  position: sticky; right: 0;
  background: var(--panel-2);
  font-weight: 800;
  min-width: 70px;
  padding: 0 8px;
}
.p-jurnal th.av { z-index: 3; }
.p-jurnal .a5 { color: var(--ok); }
.p-jurnal .a4 { color: var(--accent); }
.p-jurnal .a3 { color: var(--warn); }
.p-jurnal .a2 { color: var(--bad); }

/* O'QITUVCHI QURILMALARI — ikki qurilma ulanganda tepada rol belgisi. */
.p-rol { cursor: pointer; font-weight: 700; white-space: nowrap; }
.p-rol.asosiy { background: var(--tint-accent); color: var(--accent); border-color: var(--accent); }
.p-rol.yordamchi { background: var(--panel-2); color: var(--muted); }
/* QR — oq fonda qora (tungi mavzuda ham): kamera kontrastni shunda oladi. */
.p-qr { width: min(260px, 70vw); margin: 8px auto 12px; background: #fff; border-radius: 12px; padding: 6px; }
.p-qr svg { display: block; width: 100%; height: auto; }

/* TELEFONDA YOZISH REJIMI (pult, `yozishOch`) — o'quvchidagi doska rejimining
   qatlami, kadri va kamerasi; slayd nusxasi esa oddiy 800×600 qolip. */
.dx-yozish .dx-fit { width: var(--fit-w, 960px); height: var(--fit-h, 600px); overflow: hidden; }
.dx-yozish .dx-fit-in { transform: none; }
.dx-yozish .dx-fit-in > .slide { margin-bottom: 0; }
.dx-yozish .dx-doska-panel .dx-doska-b { min-width: 44px; min-height: 40px; }
.dx-yozish-asbob {
  top: 10px; bottom: auto;
  left: max(10px, env(safe-area-inset-left), env(safe-area-inset-right)); right: auto;
  align-items: flex-start;
  max-width: 150px;
}
.dx-yozish-asbob .dx-doska-bqator { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
.dx-yozish-asbob .dx-doska-b { min-width: 44px; min-height: 40px; padding: 4px; }
.dx-yozish-asbob .p-rang i { margin: auto; }
.p-yozish-b { width: 100%; margin-top: 8px; }
@media (max-width: 480px) {
  .p-rol-t { display: none; }
  .p-rol { padding-inline: 8px; }
}
/* Yozish rejimida o'ng pastda — slaydni surish, chap pastda — ko'rinish. */
.dx-yozish-nav { top: auto; bottom: 12px; align-items: flex-end; max-width: 150px; }
.dx-yozish-korinish { top: auto; bottom: 12px; right: auto;
  left: max(10px, env(safe-area-inset-left), env(safe-area-inset-right)); align-items: flex-start; }
.dx-doska-b.dx-yozish-keyingi { min-height: 52px; min-width: 130px; font-size: 16px; font-weight: 700; }
.dx-yozish-pos { font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--panel); border-radius: 8px; padding: 2px 8px; }
.dx-yozish-pos:empty { display: none; }

/* OVOZ — yozilayotgan qurilmada tepada; bosilsa pauza. */
.p-ovoz { cursor: pointer; font-weight: 700; white-space: nowrap;
  background: var(--tint-bad); color: var(--bad); border-color: var(--bad); }
.p-ovoz.pauza { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.rec-ovoz { color: var(--accent); font-weight: 700; margin-top: 4px; }

/* Yozuv: o'girilgan belgining XIRA izi (faqat pultda) va tanlov tugmachalari. */
.dx-xira { opacity: .3; pointer-events: none; z-index: 3; }
.dx-t-nomzod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.dx-t-nomzod:empty { display: none; }
.dx-t-nomzod-y { font-size: 13px; color: var(--muted); }
.dx-t-nomzod-b { min-width: 40px; font-size: 18px; font-weight: 700; }

/* Tanish jurnali (`izChiz`) — vaqtinchalik tahlil paneli, pultning o'ng chetida. */
.dx-iz {
  position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 1500;
  width: 420px; max-width: calc(100vw - 16px); overflow-y: auto;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
  font-size: 13px; line-height: 1.4;
}
.dx-iz-sarlavha { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dx-iz-sarlavha .grow { flex: 1; }
.dx-iz-bos { padding: 16px; color: var(--muted); }
.dx-iz-karta { border-bottom: 1px solid var(--line); padding: 6px 10px; }
.dx-iz-karta.ochiq { background: var(--bg); padding-bottom: 12px; }
.dx-iz-kbosh { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.dx-iz-n { color: var(--muted); font-size: 12px; }
.dx-iz-natija { font-size: 20px; font-weight: 700; }
.dx-iz-tanl { color: var(--ok); font-weight: 600; }
.dx-iz-vaqt { margin-left: auto; color: var(--muted); font-size: 12px; }
.dx-iz-sifat { font-weight: 700; padding: 0 6px; border-radius: 6px; }
.dx-iz-ok { color: var(--ok); } .dx-iz-orta { color: var(--warn); } .dx-iz-yomon { color: var(--bad); }
.dx-iz-sabab { color: var(--muted); margin: 2px 0 6px; }
.dx-iz-qator { display: flex; gap: 8px; }
.dx-iz-qator figure { flex: 1; margin: 0; }
.dx-iz-qator figcaption, .dx-iz-izoh { font-size: 11px; color: var(--muted); }
.dx-iz-svg { display: block; width: 100%; aspect-ratio: 1; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; }
.dx-iz-sol { margin-top: 8px; }
.dx-iz-sol-y { margin-top: 4px; }
.dx-iz-legend { font-size: 11px; color: var(--muted); }
.dx-iz-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: -1px; }
.dx-iz-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.dx-iz-q { display: grid; grid-template-columns: 1fr auto; gap: 0 4px; padding: 4px; text-align: left;
  background: var(--panel); color: var(--fg); border: 2px solid var(--line); border-radius: 8px; cursor: pointer; font: inherit; }
.dx-iz-q .dx-iz-svg { grid-column: 1 / -1; border: 0; }
.dx-iz-q.natija { border-color: var(--ok); }
.dx-iz-q.tanlov { box-shadow: 0 0 0 2px var(--accent); }
.dx-iz-q.chetlandi .dx-iz-q-b { text-decoration: line-through; }
.dx-iz-q-b { font-weight: 700; } .dx-iz-q-d { font-weight: 700; text-align: right; }
.dx-iz-q-t { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.dx-iz-qaror { margin-top: 8px; display: grid; gap: 3px; }
/* TIL MODELI (sinov, faqat admin): panel tepasidagi bo'lim va kartadagi jadval. */
.dx-iz-yuqori { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.dx-iz-yuqori .dx-iz-sarlavha { position: static; }
.dx-iz-til-bolim { padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.dx-iz-til-sar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-iz-til-sar .grow { flex: 1; }
.dx-iz-til-m { color: var(--muted); font-size: 12px; }
.dx-iz-til-yoq { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.dx-iz-til-yoq input { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; }
.dx-iz-til-y { color: var(--muted); margin: 6px 0 3px; }
.dx-iz-til-dav { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-iz-til-v { border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; background: var(--panel); font-size: 15px; }
.dx-iz-til-bosh { color: var(--muted); }
.dx-iz-til-p { color: var(--muted); font-size: 12px; margin-left: 6px; }
.dx-iz-til { margin: 8px 0 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.dx-iz-til.ozgardi { border-color: var(--accent); }
.dx-iz-til-jad { display: grid; grid-template-columns: auto auto auto auto; gap: 2px 12px; justify-content: start; }
.dx-iz-til-h { color: var(--muted); font-size: 11px; }
.dx-iz-til-c.b { font-weight: 700; }
.dx-iz-til-c.taklif { color: var(--accent); font-weight: 700; }
.dx-iz-til-x { margin-top: 4px; }
.dx-iz-til-tez { display: grid; gap: 2px; }
.dx-iz-til-manba { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dx-iz-til-mb { min-height: 28px; padding: 0 12px; font-size: 13px; }
.dx-iz-til-mb.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dx-iz-til-nol { margin-top: 4px; font-size: 12px; }
.dx-iz-tilb { background: var(--panel-2); }
.dx-iz-tilb.ozgardi { color: var(--accent); font-weight: 700; }
.dx-iz-kut { padding: 12px 0; color: var(--muted); }
body.iz-ochiq { padding-right: 436px; }

/* AI tanish (`pult.js`: aiRejim) — yozuv paneli va jurnal kartasi. */
.dx-ai-tugma { font-weight: 800; letter-spacing: .02em; }
.dx-iz-ai { color: var(--accent); }
.dx-iz-ai-top { display: grid; gap: 4px; margin: 8px 0 4px; }
.dx-iz-ai-q { display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 6px;
  padding: 3px 6px; border: 2px solid var(--line); border-radius: 8px; background: var(--panel); }
.dx-iz-ai-q.natija { border-color: var(--ok); }
.dx-iz-ai-chiziq { justify-self: start; height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }

/* AI PANELI (`aiPanelChiz`) — AI asbobi yoqilganda o'ngda: joriy taxmin, qaror, chegara jadvali. */
.dx-ai-panel {
  position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 1500;
  width: 330px; max-width: calc(100vw - 16px); overflow-y: auto;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
  font-size: 13px; line-height: 1.4; display: grid; align-content: start; gap: 10px; padding-bottom: 12px;
}
body.ai-ochiq { padding-right: 346px; }
.dx-ai-panel > div:not(.dx-ai-sar) { padding: 0 12px; }
.dx-ai-sar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dx-ai-sar .grow { flex: 1; }
.dx-ai-model, .dx-ai-izoh { color: var(--muted); font-size: 12px; }
.dx-ai-hozir { display: grid; gap: 6px; }
.dx-ai-holat { font-size: 14px; }
.dx-ai-holat.ok b { color: var(--ok); }
.dx-ai-holat.siyoh b { color: var(--warn); }
.dx-ai-nom { display: grid; gap: 4px; }
.dx-ai-q { display: grid; grid-template-columns: 34px 1fr 42px; align-items: center; gap: 8px; }
.dx-ai-b { font-family: 'Qolyozma', 'Segoe Script', cursive; font-size: 22px; line-height: 1; text-align: center; }
.dx-ai-q.bir .dx-ai-b { color: var(--accent); }
.dx-ai-ch { position: relative; height: 10px; border-radius: 5px; background: var(--panel-2, var(--bg)); }
.dx-ai-ch i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--muted); opacity: .55; }
.dx-ai-q.otdi .dx-ai-ch i { background: var(--ok); opacity: 1; }
.dx-ai-chegara { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--fg); }
.dx-ai-f { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-ai-bolim { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 8px; margin-bottom: 4px; }
.dx-ai-chegara-blok { display: grid; gap: 6px; }
.dx-ai-surgich { display: flex; align-items: center; gap: 10px; }
.dx-ai-surgich input { flex: 1; min-width: 0; }
.dx-ai-cq { font-size: 16px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.dx-ai-natija { font-weight: 600; }
.dx-ai-jadval { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.dx-ai-jadval th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 4px; border-bottom: 1px solid var(--line); }
.dx-ai-jadval td { padding: 3px 4px; }
.dx-ai-jadval tr.joriy td { background: var(--tint-ok, var(--bg)); font-weight: 700; }
.dx-ai-tarix { display: grid; gap: 2px; }
.dx-ai-tq { display: grid; grid-template-columns: 34px 44px 1fr; align-items: center; gap: 8px; }
.dx-ai-tq .ok { color: var(--ok); } .dx-ai-tq .siyoh { color: var(--warn); }

/* Toza yozuv yo'lagi (`tozaYolakChiz`) — husnixat daftaridagidek, faqat pultda. */
.dx-yolak { pointer-events: none; z-index: 2; }
.dx-yolak line { stroke: var(--accent); vector-effect: non-scaling-stroke; }
.dx-yolak .dx-yolak-asos { stroke-width: 1.5; opacity: .55; }
.dx-yolak .dx-yolak-x { stroke-width: 1; opacity: .35; stroke-dasharray: 6 4; }
.dx-yolak .dx-yolak-bosh { stroke-width: 1; opacity: .3; }
.dx-yolak .dx-yolak-past { stroke-width: 1; opacity: .2; stroke-dasharray: 2 4; }
.p-tool-yorliq { display: inline-flex; align-items: center; padding: 0 4px; font-size: 13px; color: var(--muted); min-width: 24px; justify-content: center; }
.dx-iz-ochir { grid-column: 1 / -1; margin-top: 2px; padding: 2px 4px; font: inherit; font-size: 11px;
  color: var(--bad); background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.dx-iz-qolip { margin-top: 10px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; display: grid; gap: 6px; }
.dx-iz-qator2 { display: flex; gap: 6px; align-items: center; }
.dx-iz-inp { width: 64px; font-size: 18px; text-align: center; padding: 4px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--fg); }
.dx-iz-namlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dx-iz-nam { display: grid; gap: 2px; font-size: 11px; text-align: center; }
.dx-iz-nam .dx-iz-svg { border-width: 2px; }
.dx-iz-nam.dx-iz-yomon .dx-iz-svg { border-color: var(--bad); }
.dx-iz-nam.dx-iz-ok .dx-iz-svg { border-color: var(--ok); }
div.dx-iz-yomon { color: var(--bad); font-weight: 600; }
div.dx-iz-ok { color: var(--ok); font-weight: 600; }

/* Tanlash asbobi (`tanlovChiz`) — ramka va burchak tutqichlari, faqat pultda. */
.dx-tanlov { pointer-events: none; z-index: 4; }
.dx-tanlov rect { vector-effect: non-scaling-stroke; }
.dx-tanlov .dx-tanlov-quti { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dx-tanlov .dx-tanlov-tut { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.dx-tanlov .dx-tanlov-ramka { fill: var(--tint-accent); fill-opacity: .35; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.dx-yolak .dx-yolak-kursor { stroke: var(--accent); stroke-width: 2; opacity: .8; }

/* Ustun hisobi (`hisob.js`): katakchalar, chiziqlar, aylanalar. Nuqta —
   hisobning CHAP-YUQORI burchagi (formuladagidek o'rtasi emas). */
.dx-hisob {
  position: absolute;
  /* Qo'lyozma shrift (✎A dagi bilan bir xil) — doskada qo'lda yozilgandek.
     Har raqam o'z katagida markazda, shuning uchun eni teng bo'lmasa ham
     ustunlar tekis turadi. */
  font-family: 'Qolyozma', 'Segoe Script', 'Ink Free', 'Comic Sans MS', cursive;
  font-weight: 400;
  /* Shrift ingichka — doskadagi bo'rdek biroz qalinroq. */
  -webkit-text-stroke: .035em currentColor;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.dx-hisob.r-qizil  { color: var(--bad); }
.dx-hisob.r-kok    { color: var(--accent); }
.dx-hisob.r-yashil { color: var(--ok); }
.dx-hisob.r-sariq  { color: var(--warn); }
.dx-hisob.r-qora   { color: var(--fg); }
.dx-hisob .dx-h-r { text-align: center; }
.dx-hisob .dx-h-r.kichik, .dx-hisob .dx-h-r.eslab { opacity: .85; }
.dx-hisob .dx-h-r.xira { opacity: .4; }
.dx-hisob .dx-h-r.belgi { opacity: .9; }
/* Hozirgi qadamda qo'shilgani — ko'z shu yerga tushsin. */
.dx-hisob .yangi.dx-h-r, .dx-hisob .yangi.dx-h-matn { text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; }
.dx-hisob .dx-h-halqa.yangi, .dx-hisob .dx-h-chiz.yangi, .dx-hisob .dx-h-tik.yangi { filter: drop-shadow(0 0 2px currentColor); }
.dx-hisob .dx-h-izoh { font-weight: 500; color: var(--muted); text-shadow: none;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-stroke: 0; }
.dx-hisob-panel { flex-wrap: wrap; }
.dx-hisob-panel .dx-hisob-oldin { font-size: 13px; color: var(--muted); }
.dx-hisob-panel .dx-hisob-oldin.xato { color: var(--bad); }
.dx-hisob-panel .dx-hisob-javob { width: 120px; flex: 0 0 auto; }
.dx-hisob-panel .dx-hisob-javob.xato { border-color: var(--bad); }
.dx-hisob-panel .dx-hisob-izoh { flex-basis: 100%; font-size: 14px; color: var(--muted); }

/* Qism rangi: formulada `kok(…)` (✎A, T, √x — belgilangan qism) */
.f-rang.r-qizil  { color: var(--bad); }
.f-rang.r-kok    { color: var(--accent); }
.f-rang.r-yashil { color: var(--ok); }
.f-rang.r-sariq  { color: var(--warn); }
.f-rang.r-qora   { color: var(--fg); }
/* Hisob qismlari tanlovi (pult paneli) */
.dx-hisob-panel .dx-hisob-qismlar { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dx-hisob-qism i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dx-hisob-qism i.r-qizil  { background: var(--bad); }
.dx-hisob-qism i.r-kok    { background: var(--accent); }
.dx-hisob-qism i.r-yashil { background: var(--ok); }
.dx-hisob-qism i.r-sariq  { background: var(--warn); }
.dx-hisob-qism i.r-qora   { background: var(--fg); }