/* MERIDIAN PILOT — DIZAYN TIZIMI (D10: tasdiqlangan preview).
   MANBA: /root/preview/project/*.dc.html (egasi tasdiqlagan),
   docs/00-DOIRA-SYSTEM2.md 12.4, 12.4a.

   12.4a: "tokenlar bitta joydan keladi". Xom rang, gradient va
   soya FAQAT ildiz blok da; komponent qoidalari `var()` ishlatadi.
   Bo'shliq (padding / margin / gap) — faqat shkaladan.

   HARAKAT YO'Q: qopqoq ochiq/yopiq va "ushlab turish" — statik
   holatlar, vaqtni JS o'lchaydi. Aurora qimirlamaydi.

   BIRINCHI TIZIMNING TOKENLARIGA TEGILMAYDI (3.1):
   `public/uslub.css` ALOHIDA qoladi. */

/* ============ 0. SHRIFT — O'Z SERVERIDA ============

   Sora (matn) va IBM Plex Mono (raqam) — `public2/fonts/` ichida
   woff2, tashqi manzilga ulanmaydi. OFL litsenziyasi
   `fonts/SORA-OFL.txt`, `fonts/IBM-PLEX-MONO-OFL.txt`.
   Faqat 400 va 600: preview dagi 500 -> 400, 700 -> 600. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* ============ 1. TOKENLAR ============

   FON QAT'IY, TELEGRAM MAVZUSIDAN OLINMAYDI: trade ranglari
   (o'sish / tushish) MA'LUM fonga sozlangan.

   MATN, FON VA BOSHQARUV CHEGARASI RANGLARI — SHAFFOFSIZ (hex):
   kontrast O'LCHANADI (`src/logic/uslub.js`). Shaffof qatlamlar
   (shisha, nur, soya) faqat `background-image` va `box-shadow`
   da; bezak chiziqlari — `--chiziq` va `--chiziq-ich`. */
:root {
  /* Zamin va yuzalar. */
  --fon: #070c16;
  --varaq: #0e1626;
  --varaq-past: #1e2738;
  --sokin: #131a28;
  --sokin-chuqur: #0f1521;
  --sokin-qulf: #151c2b;
  /* D10.2 / B2: qadam tugmasi ("−" / "+") — qulf tugmasidan yorug'roq. */
  --sokin-tugma: #182134;

  /* Siyoh — yorug'dan xiraga. */
  --siyoh: #eef2f8;
  --siyoh-yumshoq: #dce3ee;
  --siyoh-och: #c7d0de;
  --siyoh-xira: #aeb9cb;
  --siyoh-past: #9aa6ba;
  --siyoh-ok: #77869c;

  /* Chiziqlar. `--chiziq` va `--chiziq-ich` — BEZAK (karta ramkasi,
     qator ajratgichi); `--chiziq-quyuq` — boshqaruv chegarasi. */
  --chiziq: rgba(255, 255, 255, 0.11);
  --chiziq-ich: rgba(255, 255, 255, 0.07);
  --chiziq-quyuq: #66758e;
  --yaltiroq: rgba(255, 255, 255, 0.26);

  /* OLTIN — asosiy aksent. */
  --oltin: #e8b44a;
  --oltin-ustida: #1a1306;
  --oltin-chegara: #8a6b2c;
  --oltin-tuman: linear-gradient(rgba(232, 180, 74, 0.10), rgba(232, 180, 74, 0.10));
  --oltin-nur: 0 0 10px #e8b44a;
  --oltin-tola: rgba(232, 180, 74, 0.28);

  /* TRADE RANGLARI — mavzudan KELMAYDI. */
  --osish: #4adba6;
  --osish-fon: #0f2a24;
  --osish-chegara: #2b7460;
  --tushish: #ff8a7d;
  --tushish-fon: #1f1118;
  --tushish-chegara: #a04540;
  --tushish-nuqta: #ff6a5c;
  --tushish-tola: rgba(206, 51, 38, 0.55);
  --diqqat: #d2a73c;
  --diqqat-fon: #24262b;
  /* PROP hisob (PROP-ILOVA 4a): ko'k — oltin (demo) va qizil (real) dan ajraladi. */
  --prop: #8fb3ff;
  --prop-chegara: #4a6aa8;
  /* ZONA (ILOVA-UX 3): 70–80% — to'q sariq (sariq — `--diqqat`, qizil —
     `--tushish`). Trek zonalari — shaffof tuslar (faqat `background-image`). */
  --toq: #f0954a;
  --zona-iz-yoq: rgba(255, 255, 255, 0);
  --zona-iz-sariq: rgba(210, 167, 60, 0.22);
  --zona-iz-toq: rgba(240, 149, 74, 0.26);
  --zona-iz-qizil: rgba(255, 138, 125, 0.28);

  /* AURORA — oltin, ko'k, binafsha nurlar. HARAKATSIZ. */
  --aurora:
    radial-gradient(85% 50% at 10% 0%, rgba(232, 180, 74, 0.18) 0%, rgba(232, 180, 74, 0) 62%),
    radial-gradient(75% 55% at 100% 38%, rgba(64, 108, 214, 0.20) 0%, rgba(64, 108, 214, 0) 66%),
    radial-gradient(90% 55% at 15% 100%, rgba(118, 92, 214, 0.14) 0%, rgba(118, 92, 214, 0) 66%),
    linear-gradient(180deg, #0b1324 0%, #070c16 55%, #05080f 100%);
  /* Ichki sahifa (qavat) nuri. */
  --qavat-nur:
    radial-gradient(120% 38% at 50% 0%, rgba(232, 180, 74, 0.16) 0%, rgba(232, 180, 74, 0) 60%),
    radial-gradient(140% 70% at 50% 8%, #16264a 0%, rgba(22, 38, 74, 0) 70%);

  /* SHISHA — karta yuzalari. */
  --oyna: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.06) 100%);
  --shisha-soya: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 22px 44px rgba(0, 0, 0, 0.45);
  --yuza: linear-gradient(rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045));
  --tasma-yuza: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
  --tugma-yuza: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
  --nav-shisha: linear-gradient(180deg, rgba(30, 40, 62, 0.78) 0%, rgba(12, 18, 31, 0.80) 100%);
  --nav-soya: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 32px rgba(0, 0, 0, 0.5);
  --xabar-soya: 0 10px 24px rgba(0, 0, 0, 0.55);
  /* TORTMA (ekran ustidagi pastki varaq) va uning pardasi. */
  --parda: linear-gradient(rgba(3, 6, 12, 0.66), rgba(3, 6, 12, 0.66));
  --tortma-soya: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 -14px 36px rgba(0, 0, 0, 0.6);

  /* STOP — qizil tugma, xavf tasmasi va qopqoq. */
  --stop-asos: #ce3326;
  --stop-nur: radial-gradient(120% 150% at 50% 0%, #f26355 0%, #ce3326 48%, #84170f 100%);
  --stop-chegara: #4a0b07;
  --stop-soya: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -8px 14px rgba(0, 0, 0, 0.35), 0 4px 0 #4a0b07;
  --stop-mayda-soya: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --stop-matn: #ffffff;
  --xavf-tasma: repeating-linear-gradient(-45deg, #d9a73e 0px, #d9a73e 9px, #16181d 9px, #16181d 18px);
  --xavf-tasma-mayda: repeating-linear-gradient(-45deg, #d9a73e 0px, #d9a73e 5px, #16181d 5px, #16181d 10px);
  --xavf-soya: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --qopqoq: linear-gradient(180deg, rgba(255, 236, 200, 0.34) 0%, rgba(255, 214, 150, 0.14) 45%, rgba(255, 200, 120, 0.10) 100%);
  --qopqoq-chegara: #a8946c;
  --qopqoq-matn: #fff0d7;
  --qopqoq-soya: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 18px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.35);
  --oshiq: linear-gradient(180deg, #b8c2d3, #5b667a);
  --oshiq-soya: 0 1px 2px rgba(0, 0, 0, 0.6);

  /* TSIFERBLAT (SVG). */
  --asbob-halqa-1: #44526a;
  --asbob-halqa-2: #1b2433;
  --asbob-halqa-3: #0a0f18;
  --asbob-yuz-1: #18264a;
  --asbob-yuz-2: #060a13;
  --asbob-iz: #1e2a40;
  --asbob-igna: #f2f5fa;
  --asbob-oq: #2a3446;
  --asbob-oq-chet: #8c99ae;
  --asbob-qora: #000000;
  --zona-yashil: #2fa37a;
  --zona-qizil: #d2493c;

  /* SOKIN YUZA (Sozlamalar) — bo'rtma va botiq soyalar. */
  --sokin-soya: -6px -6px 14px rgba(255, 255, 255, 0.035), 8px 8px 20px rgba(0, 0, 0, 0.55);
  --chuqur-soya: inset 4px 4px 8px rgba(0, 0, 0, 0.6), inset -3px -3px 7px rgba(255, 255, 255, 0.03);
  /* D10.2: qadam tugmasi va kalit (almashtirgich) soyalari. */
  --sokin-tugma-soya: -2px -2px 5px rgba(255, 255, 255, 0.04), 3px 3px 7px rgba(0, 0, 0, 0.5);
  --kalit-soya: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  --kalit-tugma-soya: 0 2px 4px rgba(0, 0, 0, 0.45);

  /* ============ 2. YOZUV O'LCHAMI ============
     Preview dagi pog'onalar. `--o6` va `--o7` — YIRIK yozuv
     (24px dan): kontrast chegarasi 3:1 (WCAG 1.4.3). */
  --y11: 11px;
  --y12: 12px;
  --y13: 13px;
  --y14: 14px;
  --y15: 15px;
  --y16: 16px;
  --y17: 17px;
  --y19: 19px;
  --o6: 24px;
  --o7: 28px;
  --y34: 34px;

  /* ============ 2a. EKRAN BALANDLIGI (scrollsiz) ============
     Besh asosiy ekran AYLANMASDAN sig'adi. `--ekran-b` — sahifa
     balandligi: JS uni Telegram ning `viewportStableHeight` idan
     yozadi (`app.js`, `yol.ekranBalandligi`); yozilmasa shu
     yerdagi qiymat ishlaydi — `100vh`, `dvh` ni biladigan
     brauzerda `100dvh` (fayl oxiridagi `@supports`).

     `--bir` — 0px dan 1px gacha: ekran 660px da 0, 844px da 1px.
     Egiluvchan o'lchamlar shundan: "past ekranda A, baland
     ekranda B" = `calc(A + var(--bir) * (B - A))`. 844px da
     hammasi tasdiqlangan preview o'lchamiga teng. */
  --ekran-b: 100vh;
  --bir: clamp(0px, calc((var(--ekran-b) - 660px) / 184), 1px);

  /* Egiluvchan YOZUV: nomi — past va baland ekrandagi o'lcham.
     Matn 12px dan, mayda yorliq 11px dan kichraymaydi. */
  --ye12-13: calc(12px + var(--bir) * 1);
  --ye15-17: calc(15px + var(--bir) * 2);
  --ye16-19: calc(16px + var(--bir) * 3);
  --ye19-22: calc(19px + var(--bir) * 3);
  --ye30-40: calc(30px + var(--bir) * 10);

  /* Egiluvchan BO'SHLIQ. */
  --e2-6: calc(2px + var(--bir) * 4);
  --e4-8: calc(4px + var(--bir) * 4);
  --e4-10: calc(4px + var(--bir) * 6);
  --e6-12: calc(6px + var(--bir) * 6);
  --e8-14: calc(8px + var(--bir) * 6);
  --e8-16: calc(8px + var(--bir) * 8);
  --e10-18: calc(10px + var(--bir) * 8);
  /* Kartalar orasidagi bo'shliqning TESKARISI: ikki kartani bitta
     blokka biriktirish uchun (siqiq Kabina). */
  --e6-12-teskari: calc(var(--e6-12-past) * -1);
  /* 660px DAN PAST EKRAN (D10.2/CDE o'lchovi: 360x640). `--bir` u
     yerda 0 da qotgan — yuqoridagi tokenlar o'zgarmaydi. `--past`:
     660px da 0, 640px va undan pastda 1px; kontent maydoni va
     kartalarning ICHKI bo'shlig'i shu bilan 2px ga torayadi (640px da
     4 va 6). Yozuv, tsiferblat va bosiladigan joylar KICHRAYMAYDI;
     660px va undan balandda hech narsa o'zgarmaydi. */
  --past: clamp(0px, calc((660px - var(--ekran-b)) / 20), 1px);
  --e6-12-past: calc(var(--e6-12) - var(--past) * 2);
  --e8-14-past: calc(var(--e8-14) - var(--past) * 2);
  /* Sarlavha ichidagi havolaning bosiladigan joyi 44px, sarlavha
     balandligi esa o'smaydi (ochiq pozitsiyalar: "Hammasi (N)"). */
  --k12-teskari: calc(var(--k12) * -1);
  /* ILOVA-UX 4 (B): (i) joyi va kengaytirilgan bosish maydoni. */
  --k36: 36px;
  --k6-teskari: calc(var(--k6) * -1);
  --k8-teskari: calc(var(--k8) * -1);
  --k10-teskari: calc(var(--k10) * -1);
  --k14-teskari: calc(var(--k14) * -1);
  --k22-teskari: calc(var(--k22) * -1);

  /* Egiluvchan BALANDLIK — tsiferblat, STOP, qopqoq, panel. */
  --b-tasma: calc(28px + var(--bir) * 6);
  --b-egri: calc(34px + var(--bir) * 20);
  --b-asbob: calc(72px + var(--bir) * 24);
  --b-stop: calc(54px + var(--bir) * 8);
  --b-qopqoq: calc(62px + var(--bir) * 8);
  --b-nav: calc(56px + var(--bir) * 8);
  --b-segment: calc(36px + var(--bir) * 4);
  /* JADVAL QATORI (bosilmaydi): 660px da 34, 844px da 44 (ILOVA-UX 4 o'lchovi: Robot holati, Savdo tafsiloti 360x640). */
  --b-jadval: calc(34px + var(--bir) * 10);
  --b-sol: calc(24px + var(--bir) * 12);
  --b-qadam: calc(22px + var(--bir) * 4);
  --b-stop-mayda: calc(32px + var(--bir) * 4);
  /* ZICH Kabina ("to'xtatilgan" kartasi yoki risk to'sig'i bor):
     tsiferblat va egri chiziq HAR balandlikda kichik — karta
     balandroq, joy shundan olinadi. */
  --b-asbob-zich: 54px;
  --b-egri-zich: 22px;

  /* ============ 3. BO'SHLIQ SHKALASI ============ */
  --k2: 2px;
  --k3: 3px;
  --k4: 4px;
  --k6: 6px;
  --k8: 8px;
  --k10: 10px;
  --k12: 12px;
  --k14: 14px;
  --k16: 16px;
  --k18: 18px;
  --k22: 22px;

  /* Pastki panel va SAFE-AREA: `env` SHU YERDA, komponent
     qoidalari faqat `var()` ishlatadi. Zaxira 0px. */
  --nav-past: calc(8px + var(--bir) * 4 + env(safe-area-inset-bottom, 0px));
  --xabar-past: calc(88px + env(safe-area-inset-bottom, 0px));
  --tortma-past: calc(16px + env(safe-area-inset-bottom, 0px));

  /* Shrift — Sora va IBM Plex Mono, o'z serverida. TIZIM shrifti
     ZAXIRA: woff2 yetib bormasa ham `tabular-nums` ishlaydi. */
  --shrift: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --shrift-son: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                Consolas, monospace;
}

/* ============ 4. ASOS ============ */
* { box-sizing: border-box; }

/* HUJJAT AYLANMAYDI (scrollsiz). Sahifa — ko'rinadigan joyga
   TENG ustun: tepada `#boshi`, o'rtada `#varaqlar` (aylanadigan
   YAGONA joy), pastda panel. Barmoq bilan tortilganda butun ilova
   "sakramaydi": `overscroll-behavior` hujjatda `none`, aylanadigan
   joyda `contain`. */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--fon);
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: var(--ekran-b);
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--fon);
  background-image: var(--aurora);
  color: var(--siyoh);
  font-family: var(--shrift);
  font-size: var(--y14);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* SOKIN YUZA — Sozlamalar: aurorasiz, bir tekis. */
body.sokin {
  background-color: var(--sokin);
  background-image: none;
}

/* ICHKI SAHIFA (qavat) — tepadan oltin nur; pastki panel yo'q. */
body.qavat {
  background-image: var(--qavat-nur);
  background-repeat: no-repeat;
}

h1, h2, h3, p { margin: 0; }

button {
  background-color: transparent;
  font-family: var(--shrift);
  font-size: var(--y14);
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 2px solid var(--oltin);
  outline-offset: 2px;
}

/* SONLAR — mono. */
.son { font-family: var(--shrift-son); font-weight: 600; }
.osish { color: var(--osish); }
.tushish { color: var(--tushish); }

/* SARLAVHA EKRANDAN KELADI: `#boshi` ni har ekran o'zi
   to'ldiradi. Bo'sh bo'lsa ko'rinmaydi. */
#boshi { flex: none; }
#boshi:empty { display: none; }

/* BO'SH BO'LAK KO'RINMAYDI: ro'yxat bo'sh bo'lsa karta, matn
   bo'lmasa xatboshi chizilmaydi — ekran shart qo'ymaydi. */
.tasma:empty,
.jurnal:empty,
.sabab-royxat:empty,
.matn-karta:empty,
.bosh-holat:empty,
.royxat-oqim:empty,
.kichik:empty { display: none; }

/* KONTENT MAYDONI — AYLANADIGAN YAGONA JOY. Asosiy ekranlar unga
   sig'adi (hech narsa aylanmaydi); ichki sahifa va Akademiya uzun
   bo'lsa — FAQAT shu maydon aylanadi, `#boshi` va panel joyida.
   Bo'laklar siqilmaydi (`flex: none`): sig'masa qirqilmaydi,
   aylanadi — STOP hech qachon ekrandan tashqarida qolmaydi. */
#varaqlar {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e6-12-past);
  padding: var(--e6-12-past) var(--k16) var(--k4);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#varaqlar > * { flex: none; }

/* RO'YXATLI EKRAN (Savdolar): kontent maydoni QOTADI, faqat
   ro'yxat qatorlari o'z idishida aylanadi — ikki qavatli scroll
   yo'q. Saralash, ochiq pozitsiya va statistika joyida turadi. */
body.royxat-aylanadi #varaqlar { overflow-y: hidden; }
body.royxat-aylanadi #varaqlar > .royxat { flex: 0 1 auto; min-height: 0; }
/* QOIDA: bir nechta qoida bo'lsa FAQAT qoidalar ro'yxati aylanadi
   (o'sha `.royxat-oqim` idishi, kontent maydonining o'z bolasi). */
body.royxat-aylanadi #varaqlar > .royxat-oqim { flex: 0 1 auto; min-height: 0; }
.qoida-oqim { display: flex; flex-direction: column; gap: var(--e6-12); }
.qoida-oqim > * { flex: none; }
.royxat-oqim {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============ 5. NARX TASMASI ============ */
/* TASMA — TUGMA ("Robot holati" sahifasini ochadi: to'liq narxlar
   o'sha yerda). NARX QIRQILMAYDI: nechta narx va qaysi shaklda
   sig'ishi `robot.tasma` da hal bo'ladi. Hisob adashsa ham (boshqa
   shrift) bo'lak YARMIDAN kesilmaydi — sig'magani butunicha keyingi
   qatorga tushadi va ko'rinmaydi (`flex-wrap`, balandlik qotgan). */
.tasma {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--k22);
  row-gap: var(--b-tasma);
  align-items: center;
  width: 100%;
  height: var(--b-tasma);
  padding: 0 var(--k18);
  border: 0;
  border-bottom: 1px solid var(--chiziq-ich);
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--y12);
  line-height: var(--b-tasma);
  color: var(--siyoh-xira);
  background-image: var(--tasma-yuza);
  text-align: left;
  cursor: pointer;
}

.tasma-bolak, .tasma-yana { flex: none; }
.tasma-narx { color: var(--siyoh); font-weight: 600; }
.tasma-yana { color: var(--siyoh-och); }

/* ============ 6. KABINA BOSHI ============ */
.kabina-bosh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k12);
  padding: var(--e8-14) var(--k18) 0;
}

.hisob { display: flex; flex-direction: column; gap: var(--k2); min-width: 0; }
.hisob-qator { display: flex; align-items: center; gap: var(--k8); min-width: 0; }
.hisob-nom { font-size: var(--y17); font-weight: 600; line-height: 1.3; }
.hisob-ost { font-size: var(--y12); color: var(--siyoh-xira); }

/* HISOB TURI NISHONI — DEMO oltin, qolgani qizil. Rang yagona
   belgi emas: so'zning o'zi yozilgan. */
.nishon {
  padding: var(--k3) var(--k8);
  border: 1px solid var(--oltin);
  border-radius: 6px;
  color: var(--oltin);
  font-size: var(--y11);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.3;
}
.nishon.real { border-color: var(--tushish); color: var(--tushish); }

.nishon.katta {
  padding: var(--k8) var(--k14);
  border-width: 2px;
  border-radius: 12px;
  font-size: var(--y15);
  letter-spacing: 1.5px;
}

/* HISOB ALMASHTIRGICH (D10.2/CDE, C-paket).

   `.nishon.keyin` — hali ulanmagan hisob (PROP): xira, rangsiz.
   `.hisob-chip` — nishon TUGMA bo'lganda: ko'rinishi o'sha nishon va
   strelka; bosish maydoni `::after` bilan kengaytirilgan — sarlavha
   balandligi O'ZGARMAYDI (scrollsiz).
   `body.hisob-real` — REAL tanlangan: HAR ekran boshida qizil chiziq
   (ichki soya — joy olmaydi). Rang yagona belgi emas: nishonda
   "REAL" so'zi yozilgan. */
.nishon.keyin { border-color: var(--chiziq-quyuq); color: var(--siyoh-xira); }
.hisob-chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--k4);
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--siyoh-xira);
  font-size: var(--y12);
  cursor: pointer;
}
.hisob-chip::after { content: ""; position: absolute; top: -12px; right: -8px; bottom: -12px; left: -8px; }
.hisob-ok { line-height: 1; }
.bosh-ong { flex: none; display: flex; align-items: center; gap: var(--k12); }
body.hisob-real #boshi { box-shadow: inset 0 3px 0 var(--tushish); }

/* HOLAT TUGMASI — uch tur: faol (oltin), to'xtagan (qizil),
   diqqat (xira). */
.holat-tugma {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--k8);
  padding: var(--k8) var(--k12);
  border: 1px solid var(--oltin-chegara);
  border-radius: 999px;
  background-color: transparent;
  background-image: var(--oltin-tuman);
  color: var(--oltin);
  font-size: var(--y13);
  cursor: pointer;
}
.holat-tugma.toxtagan {
  border-color: var(--tushish-chegara);
  background-color: var(--tushish-fon);
  background-image: none;
  color: var(--tushish);
}
.holat-tugma.diqqat {
  border-color: var(--chiziq-quyuq);
  background-image: var(--tugma-yuza);
  color: var(--siyoh-och);
}

.holat-nuqta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--oltin);
  box-shadow: var(--oltin-nur);
}
.holat-tugma.toxtagan .holat-nuqta { background-color: var(--tushish-nuqta); box-shadow: none; }
.holat-tugma.diqqat .holat-nuqta { background-color: var(--siyoh-past); box-shadow: none; }

/* ============ 7. SHISHA KARTA ============ */
.shisha {
  display: flex;
  flex-direction: column;
  gap: var(--e6-12);
  padding: var(--e10-18);
  border: 1px solid var(--chiziq);
  border-top-color: var(--yaltiroq);
  border-radius: 24px;
  background-image: var(--oyna);
  box-shadow: var(--shisha-soya);
  color: var(--siyoh);
}

/* Yengil yuza — ikkinchi darajali kartalar. */
.yuza {
  display: flex;
  flex-direction: column;
  padding: var(--k4) var(--k16);
  border: 1px solid var(--chiziq);
  border-radius: 18px;
  background-image: var(--yuza);
}

.juft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k12);
}

.karta-nom { font-size: var(--y15); font-weight: 600; }
.kuchli { font-size: var(--y14); font-weight: 600; line-height: 1.4; }
.kichik { font-size: var(--y12); line-height: 1.4; color: var(--siyoh-past); }
.markaz { text-align: center; }

/* BIR QATOR (scrollsiz-2): asosiy ekranda uzun nom — qoida, rad
   sababi, mavzu — pastga O'RALMAYDI: sig'masa uch nuqta bilan
   qirqiladi, to'liq matn ichki sahifada. Ekran balandligi matn
   uzunligiga bog'liq emas. */
.bir-qator { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nom + strelka: nom qirqilsa ham strelka joyida. */
.nom-ok { flex: none; }

/* SON QIRQILMAYDI (scrollsiz-3; egasi, 2026-10-05). Pul, narx,
   foiz, hajm, sanoq va sana turgan bo'lak — `.sonli`: u `.bir-qator`
   bilan birga kelmaydi va qatorda SIQILMAYDI (yonidagi matn siqiladi
   va qirqiladi). Joy yetmasa son ixcham shaklda keladi (qaror toza
   modullarda) yoki shrifti bir pog'ona kichrayadi (`.d1`, `.d2` —
   har yozuvning o'z o'lchami, pastda). */
.sonli { flex-shrink: 0; }
/* MATN + SON bir qatorda: matn qirqiladi, son to'liq turadi. Sonning
   boshidagi bo'sh joy (", H1", " · 5-okt") saqlanadi. */
.matn-son { display: flex; min-width: 0; }
.matn-son > .sonli { white-space: pre; }

/* ============ 8. ROBOT NATIJASI ============ */
.natija-karta {
  gap: var(--k2);
  padding: var(--e10-18) var(--k18) var(--e8-14-past);
  border-radius: 28px;
  text-align: left;
  cursor: pointer;
}
.karta-ust { font-size: var(--y13); line-height: 1.4; color: var(--siyoh-xira); }
.natija-summa {
  margin-top: var(--e2-6);
  font-family: var(--shrift-son);
  font-size: var(--ye30-40);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--siyoh);
}
.karta-ost { font-size: var(--y13); line-height: 1.4; color: var(--siyoh-xira); }
/* YIRIK SUMMA TO'LIQ QOLADI — uzun bo'lsa shrift pog'onasi
   (`robot.natijaKartasi`: 12 belgigacha asosiy, 18 gacha `.d1`). */
.natija-summa.d1 { font-size: var(--o6); }
.natija-summa.d2 { font-size: var(--y17); letter-spacing: 0; }

.egri { display: block; width: 100%; height: var(--b-egri); margin-top: var(--e4-10); }
.egri-nol { stroke: var(--yaltiroq); stroke-width: 1; stroke-dasharray: 3 5; }
.egri-chiziq { fill: none; stroke: var(--oltin); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.egri-nuqta { fill: var(--oltin); }

/* ============ 9. TSIFERBLATLAR ============ */
.asboblar { padding: var(--e8-16) var(--k10) var(--e8-14-past); }
.asbob-panjara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k6); }

.asbob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2-6);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background-color: transparent;
  color: var(--siyoh);
  cursor: pointer;
}
.asbob-foiz { font-family: var(--shrift-son); font-size: var(--ye15-17); font-weight: 600; line-height: 1.3; }
.asbob-nom { font-size: var(--y12); line-height: 1.35; color: var(--siyoh-och); }
/* BIR QATOR: tor ekranda "2.0 / 20 % tushish" ikki qatorga
   bo'linib, butun kartani bir qator balandlatardi. */
.asbob-ost { font-size: var(--y11); line-height: 1.35; color: var(--siyoh-past); white-space: nowrap; }

/* TSIFERBLAT O'LCHAMI EKRAN BALANDLIGIDAN: 660px da 72px, 844px
   da 96px (preview). SVG `viewBox` bilan o'zi kichrayadi. */
.tsiferblat { width: var(--b-asbob); height: var(--b-asbob); }
/* ZICH KABINA — qaror `robot.kabinaZichligi` da. */
body.zich .tsiferblat { width: var(--b-asbob-zich); height: var(--b-asbob-zich); }
body.zich .egri { height: var(--b-egri-zich); }
.ts-halqa-1 { stop-color: var(--asbob-halqa-1); }
.ts-halqa-2 { stop-color: var(--asbob-halqa-2); }
.ts-halqa-3 { stop-color: var(--asbob-halqa-3); }
.ts-yuz-1 { stop-color: var(--asbob-yuz-1); }
.ts-yuz-2 { stop-color: var(--asbob-yuz-2); }
.ts-shisha { stop-color: var(--stop-matn); }
.ts-yuz { stroke: var(--asbob-qora); stroke-opacity: 0.6; }
.ts-belgi { stroke: var(--chiziq-quyuq); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.ts-iz { stroke: var(--asbob-iz); stroke-width: 5; stroke-linecap: round; fill: none; }
.ts-yashil { stroke: var(--zona-yashil); stroke-opacity: 0.85; stroke-width: 2.5; fill: none; }
.ts-sariq { stroke: var(--diqqat); stroke-opacity: 0.9; stroke-width: 2.5; fill: none; }
.ts-qizil { stroke: var(--zona-qizil); stroke-opacity: 0.95; stroke-width: 2.5; fill: none; }
.ts-yoy { stroke: var(--oltin); stroke-width: 5; stroke-linecap: round; fill: none; }
.ts-yogdu { stroke: var(--oltin); stroke-width: 7; stroke-linecap: round; fill: none; opacity: 0.9; }
.ts-igna { stroke: var(--asbob-igna); stroke-width: 2; stroke-linecap: round; }
.ts-oq { fill: var(--asbob-oq); stroke: var(--asbob-oq-chet); stroke-width: 1; }

/* ============ 10. QOIDA KARTASI (Kabina) ============ */
.qoida-karta {
  gap: var(--e4-10);
  padding: var(--e8-14-past) var(--k16);
  border-radius: 18px;
}
.qoida-ust { flex-wrap: wrap; gap: var(--k2) var(--k12); }
.qoida-havola {
  display: flex;
  gap: var(--k4);
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--siyoh);
  font-size: var(--y14);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
/* "Keyingi tekshiruv" nom yonida sig'masa O'Z qatoriga tushadi —
   nomni ikki qatorga bo'lmaydi. */
.qoida-vaqt { flex: none; font-size: var(--y12); line-height: 1.35; color: var(--siyoh-xira); white-space: nowrap; }
.qoida-oxirgi { font-size: var(--y13); line-height: 1.35; color: var(--siyoh-xira); }
.qoida-summa { flex: none; font-size: var(--y13); font-weight: 600; line-height: 1.35; white-space: nowrap; }
/* "Oxirgi savdo" qatori: sana ham, summa ham SON — hech biri
   qirqilmaydi; hisob adashsa summa o'z qatoriga tushadi. */
.qoida-karta > .juft { flex-wrap: wrap; row-gap: var(--k2); }

/* ============ 11. STOP: QOPQOQ + BOSISH ============ */
.stop-joy { display: flex; flex-direction: column; gap: var(--e4-8); margin-top: var(--k2); }

.stop-ramka {
  position: relative;
  padding: var(--k6);
  border-radius: 24px;
  background-image: var(--xavf-tasma);
  box-shadow: var(--xavf-soya);
}

.stop-bosish {
  width: 100%;
  height: var(--b-stop);
  border: 1px solid var(--stop-chegara);
  border-radius: 18px;
  background-color: var(--stop-asos);
  background-image: var(--stop-nur);
  box-shadow: var(--stop-soya);
  color: var(--stop-matn);
  font-size: var(--y16);
  font-weight: 600;
  cursor: pointer;
}

/* QOPQOQ YOPIQ — tugmani to'liq yopadi. OCHIQ — tepaga
   qayrilgan STATIK holat (vaqtni JS o'lchaydi). */
.stop-qopqoq {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: var(--b-qopqoq);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 var(--k6);
  border: 1px solid var(--qopqoq-chegara);
  border-radius: 21px;
  background-image: var(--qopqoq);
  box-shadow: var(--qopqoq-soya);
  color: var(--qopqoq-matn);
  font-size: var(--y11);
  cursor: pointer;
  transform-origin: 50% 0%;
}
.stop-qopqoq.ochiq {
  transform: perspective(500px) rotateX(-112deg);
  opacity: 0.55;
  pointer-events: none;
}
.qopqoq-oshiq {
  position: absolute;
  left: calc(50% - 60px);
  top: -3px;
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background-image: var(--oshiq);
  box-shadow: var(--oshiq-soya);
}

.stop-ishora { font-size: var(--y12); line-height: 1.35; color: var(--siyoh-past); text-align: center; }

/* Boshqa ekranlardagi kichik STOP — Kabinadagi tugmaga olib boradi. */
.stop-havola {
  flex: none;
  display: inline-flex;
  padding: var(--k3);
  border: 0;
  border-radius: 999px;
  background-image: var(--xavf-tasma-mayda);
  cursor: pointer;
}
.stop-havola-ich {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: var(--b-stop-mayda);
  padding: 0 var(--k14);
  border-radius: 999px;
  background-color: var(--stop-asos);
  background-image: var(--stop-nur);
  box-shadow: var(--stop-mayda-soya);
  color: var(--stop-matn);
  font-size: var(--y13);
  font-weight: 600;
  letter-spacing: 0.6px;
}

/* ============ 12. TO'XTATILGAN / RISK KARTASI ============ */
.toxtagan-karta {
  display: flex;
  flex-direction: column;
  gap: var(--e4-10);
  padding: var(--e8-14-past) var(--k16);
  border: 1px solid var(--tushish-chegara);
  border-radius: 20px;
  background-color: var(--tushish-fon);
  color: var(--siyoh-och);
  font-size: var(--y12);
  line-height: 1.4;
}
.toxtagan-nom { font-size: var(--y15); font-weight: 600; color: var(--tushish); }
.toxtagan-qator { display: flex; justify-content: space-between; gap: var(--k12); }
.toxtagan-qiymat { color: var(--siyoh); text-align: right; overflow-wrap: anywhere; }
.toxtagan-karta .javob { min-height: 44px; }

/* RISK TO'SIG'I — KABINADA QISQA (ikki qator): qaysi qatlam va
   qachon ochiladi. Butun karta tugma: to'liq matn "Batafsil"
   sahifasida. */
.risk-qisqa { width: 100%; font-family: var(--shrift); text-align: left; cursor: pointer; }
.risk-havola { flex: none; color: var(--oltin); font-size: var(--y12); font-weight: 600; }
/* "To'xtatilgan" kartasining qisqa qatori (siqiq Kabina): qayerdan
   va qachon + "Batafsil". */
.qisqa-qator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k12);
  width: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--siyoh-och);
  font-size: var(--y12);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
/* SIQIQ KABINA — qo'lda to'xtatilgan VA risk to'sig'i birga (qaror
   `robot.kabinaZichligi`): ikki qizil karta BITTA blok bo'lib
   birikadi (oradagi bo'shliq va ikki chegara tejaladi). Hech narsa
   yashirilmaydi. */
body.siqiq .risk-qisqa {
  padding-bottom: var(--k6);
  border-bottom-color: var(--chiziq-ich);
  border-radius: 20px 20px 0 0;
}
body.siqiq .risk-qisqa + .toxtagan-karta {
  margin-top: var(--e6-12-teskari);
  padding-top: var(--k6);
  border-top: 0;
  border-radius: 0 0 20px 20px;
}

.amal { display: flex; flex-direction: column; gap: var(--k8); }

/* OGOH BLOKI — tasdiq oldidagi jumlalar. */
.ogoh {
  display: flex;
  flex-direction: column;
  gap: var(--k4);
  padding: var(--k10) var(--k12);
  border: 1px solid var(--chiziq);
  border-radius: 12px;
  background-image: var(--yuza);
  color: var(--siyoh-yumshoq);
  font-size: var(--y12);
}
.ogoh h3 { font-size: var(--y13); font-weight: 600; color: var(--siyoh); }
.ogoh.diqqat { border-color: var(--oltin-chegara); }

/* ============ 12a. TORTMA — EKRAN USTIDAGI PASTKI VARAQ ============

   Tasdiq va savol kartani o'stirmaydi: parda sahifani TO'LIQ yopadi
   (orqadagi tugmalar bosilmaydi), tortma pastda turadi. Sahifa
   (`body`) qotgan — parda uning ICHIDA (`absolute`), tartib
   o'zgarmaydi. HARAKATSIZ: tortma chiqmaydi, bor yoki yo'q.
   Juda past ekranda tortmaning O'ZI aylanadi (orqa fon o'lik —
   ikki qavatli scroll yo'q). */
.parda {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: var(--parda);
}
.tortma {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k10);
  padding: var(--k18) var(--k16) var(--tortma-past);
  border: 1px solid var(--chiziq);
  border-top-color: var(--yaltiroq);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background-color: var(--varaq-past);
  box-shadow: var(--tortma-soya);
  color: var(--siyoh-yumshoq);
  font-size: var(--y13);
  line-height: 1.45;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tortma:focus { outline: 0; }
.tortma > * { flex: none; }
.tortma-nom { font-size: var(--y16); font-weight: 600; line-height: 1.3; color: var(--siyoh); }
.tortma-matn { font-size: var(--y13); line-height: 1.45; }
/* REAL hisobdagi tortma belgisi — sarlavhadan oldin, o'z enida. */
.tortma > .nishon { align-self: flex-start; }

/* "HISOBNI TANLANG" VA "HISOB QO'SHISH" (C-paket). Uch qator — har biri
   bir bosishlik; tanlangani tugma emas (oltin hoshiya). Kod — mono,
   to'rttadan guruh: qo'lda ko'chirish uchun. */
.hisob-qatori {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: var(--k12);
  padding: var(--k6) var(--k14);
  border: 1px solid var(--chiziq);
  border-radius: 16px;
  background-color: transparent;
  background-image: var(--yuza);
  color: var(--siyoh);
  font-size: var(--y14);
  text-align: left;
  cursor: pointer;
}
.hisob-qatori.joriy { border-color: var(--oltin-chegara); background-image: var(--oltin-tuman); cursor: default; }
.hisob-matn { flex: 1; }
.hisob-belgi { flex: none; color: var(--oltin); }
.hisob-xabar { font-size: var(--y12); line-height: 1.45; color: var(--siyoh-och); }
.hisob-xabar:empty { display: none; }
.hisob-kod-bosh { display: flex; align-items: center; gap: var(--k8); }
.hisob-kod {
  font-family: var(--shrift-son);
  font-size: var(--y17);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--siyoh);
  text-align: center;
  overflow-wrap: anywhere;
}
.hisob-holat { font-size: var(--y13); line-height: 1.45; color: var(--siyoh); }

/* ============ 13. TUGMALAR ============ */
.javob {
  width: 100%;
  min-height: 48px;
  padding: var(--k10) var(--k14);
  border: 1px solid var(--oltin);
  border-radius: 14px;
  background-color: transparent;
  color: var(--oltin);
  font-size: var(--y14);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.javob.ikkilamchi {
  border-color: var(--chiziq-quyuq);
  color: var(--siyoh-och);
  font-weight: 400;
}
/* XAVFLI AMALNING OCHUVCHISI (Savdolar: pozitsiyalarni yopish) —
   o'zi hech narsa yubormaydi, tasdiq tortmasini ochadi. */
.javob.xavf {
  border-color: var(--tushish-chegara);
  background-color: var(--tushish-fon);
  color: var(--tushish);
}
.javob.variant {
  border-color: var(--chiziq-quyuq);
  color: var(--siyoh);
  font-weight: 400;
  text-align: left;
}

/* USHLAB TURISH — 1.5 soniya. To'lgan tola STATIK holat;
   vaqtni JS o'lchaydi. */
.ushla {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 46px;
  padding: var(--k8) var(--k14);
  border: 1px solid var(--oltin);
  border-radius: 14px;
  background-color: transparent;
  color: var(--oltin);
  font-size: var(--y13);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.ushla-tola {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: var(--oltin-tola);
}
.ushla-matn { position: relative; }
.ushla.ushlanmoqda .ushla-tola { width: 100%; }
.ushla.ushlandi { opacity: 0.6; }

.ushla.xavf {
  border-color: var(--tushish-chegara);
  background-color: var(--tushish-fon);
  color: var(--tushish);
}
.ushla.xavf .ushla-tola { background-color: var(--tushish-tola); }

/* ============ 14. SAHIFA BOSHI ============ */
.sahifa-bosh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k12);
  padding: var(--e8-16) var(--k18) 0;
}
.sahifa-nom { font-size: var(--ye19-22); font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
.ustun { flex-direction: column; align-items: stretch; gap: var(--k8); }

/* ICHKI SAHIFA BOSHI — orqaga tugmasi va nom. */
.qavat-bosh {
  display: flex;
  align-items: center;
  gap: var(--k12);
  padding: var(--e8-16) var(--k16) 0;
}
.qavat-nom { min-width: 0; font-size: var(--y19); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.orqaga {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--chiziq);
  border-radius: 14px;
  background-color: transparent;
  background-image: var(--tugma-yuza);
  color: var(--siyoh);
  cursor: pointer;
}
.orqaga-belgi { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 15. CHEGARA SAHIFASI ============ */
.katta-son { font-family: var(--shrift-son); font-size: var(--o7); font-weight: 600; line-height: 1.2; }
.olchov { height: 10px; border-radius: 999px; background-color: var(--asbob-iz); overflow: hidden; }
.olchov-tola { display: block; height: 100%; border-radius: 999px; background-color: var(--oltin); }
.olchov-ost { font-size: var(--y13); color: var(--siyoh-xira); }

.izoh-karta { gap: var(--k6); padding: var(--k16); }
.izoh-karta h3 { font-size: var(--y14); font-weight: 600; }
.izoh-karta p { font-size: var(--y13); line-height: 1.55; color: var(--siyoh-yumshoq); overflow-wrap: anywhere; }

/* ============ 16. HOLAT SAHIFASI VA JADVAL ============ */
.holat-soz { font-size: var(--o6); font-weight: 600; line-height: 1.3; color: var(--oltin); }
.holat-soz.toxtagan { color: var(--tushish); }
.holat-soz.diqqat { color: var(--siyoh-och); }

.jadval { font-size: var(--y13); }
.jadval-qator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k12);
  min-height: var(--b-jadval);
  padding: var(--k6) 0;
  border-bottom: 1px solid var(--chiziq-ich);
}
.jadval-qator:last-child { border-bottom: 0; }
.jadval-nom { flex: none; color: var(--siyoh-xira); }
.jadval-qiymat { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.jadval-qiymat.mono { font-family: var(--shrift-son); }

.havola-tugma {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  padding: 0 var(--k16);
  border: 1px solid var(--chiziq);
  border-radius: 16px;
  background-color: transparent;
  background-image: var(--tugma-yuza);
  color: var(--siyoh);
  font-size: var(--y14);
  font-weight: 600;
  cursor: pointer;
}
.havola-tugma.oltin { border-color: var(--oltin); background-image: none; color: var(--oltin); }
.ok { color: var(--siyoh-ok); }

/* JURNAL. */
.jurnal { padding: var(--k4) var(--k16); border-radius: 20px; font-size: var(--y13); line-height: 1.45; }
.jurnal-qator { display: flex; gap: var(--k12); padding: var(--k12) 0; border-bottom: 1px solid var(--chiziq-ich); }
.jurnal-qator:last-child { border-bottom: 0; }
.jurnal-nuqta { flex: none; width: 8px; height: 8px; margin-top: var(--k6); border-radius: 50%; background-color: var(--siyoh-och); }
.jurnal-nuqta.oltin { background-color: var(--oltin); }
.jurnal-nuqta.osish { background-color: var(--osish); }
.jurnal-nuqta.tushish { background-color: var(--tushish-nuqta); }
.jurnal-matn { flex: 1; display: flex; flex-direction: column; }
.jurnal-sana { font-size: var(--y12); color: var(--siyoh-past); }
/* TAFSILOT (faqat owner ga keladi) — ichki satr: uzun bo'lsa o'raladi. */
.jurnal-tafsilot { font-size: var(--y12); color: var(--siyoh-past); overflow-wrap: anywhere; }
.jurnal-joy { display: flex; flex-direction: column; gap: var(--k12); }

/* ============ 17. SAVDOLAR ============ */
.segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k4);
  padding: var(--k4);
  border: 1px solid var(--chiziq);
  border-radius: 16px;
  background-image: var(--yuza);
}
.segment-tugma {
  height: var(--b-segment);
  border: 0;
  border-radius: 12px;
  background-color: transparent;
  color: var(--siyoh-och);
  font-size: var(--y13);
  font-weight: 600;
  cursor: pointer;
}
.segment-tugma.faol { background-color: var(--oltin); color: var(--oltin-ustida); }

.ochiq-karta { padding: var(--e8-16); border-radius: 22px; }
.poz-nom { font-size: var(--y15); font-weight: 600; }
.poz-nom.toliq { overflow-wrap: anywhere; }
.poz-natija { margin-left: auto; font-size: var(--y17); white-space: nowrap; }
/* Bitta pozitsiyaning nom qatori — tugma ("Ochiq pozitsiya" sahifasi). */
.poz-bosh { width: 100%; padding: 0 0 var(--k6); border: 0; color: var(--siyoh); text-align: left; cursor: pointer; }
.poz-natija.d1 { font-size: var(--y14); }
/* BIR NECHTA OCHIQ POZITSIYA — har biri BIR QATOR (qaror
   `natija.ochiqBolimi`): simvol (matn — sig'masa uch nuqta),
   yo'nalish va hajm, natija (son — qirqilmaydi). Bosilsa "Ochiq
   pozitsiya" sahifasi to'liq qiymatlar bilan ochiladi. */
.poz-qator {
  display: flex;
  align-items: center;
  gap: var(--k8);
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--chiziq-ich);
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.poz-simvol { font-size: var(--y14); font-weight: 600; }
.poz-yon { font-size: var(--y12); color: var(--siyoh-xira); white-space: nowrap; }
.poz-qator-natija { margin-left: auto; font-size: var(--y14); white-space: nowrap; }
/* Sarlavha yonidagi "Hammasi (N)" — qator emas: karta o'smaydi.
   Bosiladigan joy 44px (yuqoriga va pastga manfiy hoshiya bilan). */
.ochiq-bosh { flex-wrap: wrap; }
.ochiq-hammasi {
  min-height: 44px;
  margin: var(--k12-teskari) 0;
  padding: 0 0 0 var(--k12);
  border: 0;
  color: var(--oltin);
  font-size: var(--y13);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.uchlik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k8); }
.katak { display: flex; flex-direction: column; gap: var(--k3); font-size: var(--y12); color: var(--siyoh-past); }
.katak-qiymat { font-size: var(--y13); color: var(--siyoh); }
.katak-qiymat.d1 { font-size: var(--y11); }

.chip {
  flex: none;
  padding: var(--k3) var(--k8);
  border: 1px solid var(--chiziq);
  border-radius: 999px;
  font-size: var(--y11);
  line-height: 1.3;
  color: var(--siyoh-xira);
}
.chip.yaxshi { border-color: var(--osish-chegara); background-color: var(--osish-fon); color: var(--osish); }
.chip.yomon { border-color: var(--tushish-chegara); color: var(--tushish); }
.chip.joriy { border-color: var(--oltin-chegara); color: var(--oltin); }
/* DIQQAT — "faqat kamaytirish" (Sozlamalar, zarar davri; ILOVA-UX 4). */
.chip.diqqat { border-color: var(--oltin-chegara); background-color: var(--diqqat-fon); color: var(--diqqat); }

.statistika {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--e6-12) var(--k6);
  border: 1px solid var(--chiziq);
  border-radius: 18px;
  background-image: var(--yuza);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: var(--k4); }
.stat + .stat { border-left: 1px solid var(--chiziq-ich); }
.stat-nom { font-size: var(--y11); line-height: 1.35; color: var(--siyoh-past); }
.stat-qiymat { font-size: var(--y15); line-height: 1.35; white-space: nowrap; }
/* SON UZUN BO'LSA (`natija.statistikaKorinishi`) — u
   QISQARTIRILMAYDI: avval shrift pog'onasi (qator balandligi o'sha —
   karta sakramaydi), undan ham uzuni — uch ustun o'rniga uch qator
   (nom chapda, to'liq son o'ngda). */
.stat-qiymat.d1 { font-size: var(--y13); line-height: 1.56; }
.stat-qiymat.d2 { font-size: var(--y11); line-height: 1.84; }
.statistika.qator { grid-template-columns: minmax(0, 1fr); padding: var(--k2) var(--k14); }
.statistika.qator .stat { flex-direction: row; justify-content: space-between; align-items: baseline; padding: var(--k4) 0; }
.statistika.qator .stat + .stat { border-left: 0; border-top: 1px solid var(--chiziq-ich); }

.royxat { padding: var(--k6) var(--k14) var(--k4); border-radius: 20px; }
.royxat-nom { flex: none; padding: var(--e4-8) var(--k4) var(--k4); font-size: var(--y13); line-height: 1.4; color: var(--siyoh-xira); }
.savdo-qator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k8);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--k4);
  border: 0;
  border-bottom: 1px solid var(--chiziq-ich);
  background-color: transparent;
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.qator-chap { display: flex; align-items: center; gap: var(--k8); min-width: 0; }
.qator-ong { display: flex; align-items: center; gap: var(--k8); }
.qator-sana { min-width: 52px; font-size: var(--y13); color: var(--siyoh-och); white-space: nowrap; }
.qator-summa { font-size: var(--y14); white-space: nowrap; }
.bosh-holat { padding: var(--k14) 0; font-size: var(--y13); color: var(--siyoh-xira); text-align: center; }

.tafsilot-summa { font-family: var(--shrift-son); font-size: var(--y34); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
/* Yirik summa TO'LIQ: 14 belgigacha asosiy, 20 gacha `.d1`. */
.tafsilot-summa.d1 { font-size: var(--o6); }
.tafsilot-summa.d2 { font-size: var(--y17); }

/* ============ 18. QOIDA ============ */
.qoida-bosh { border-radius: 26px; }
.qoida-nom { font-size: var(--ye16-19); font-weight: 600; line-height: 1.3; }
/* Nom — "Qoida tafsiloti" sahifasiga havola; asosiy ekranda bir
   qator, sahifada (`.toliq`) to'liq va o'raladi. */
.qoida-nom.toliq { overflow-wrap: anywhere; }
.nom-havola {
  display: flex;
  gap: var(--k6);
  width: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--siyoh);
  font-size: var(--ye16-19);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.qadam { display: flex; gap: var(--k12); align-items: flex-start; }
.qadam-raqam {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--b-qadam);
  height: var(--b-qadam);
  border-radius: 8px;
  background-color: var(--oltin);
  color: var(--oltin-ustida);
  font-size: var(--y12);
  font-weight: 600;
}
.qadam-matn { font-size: var(--ye12-13); line-height: 1.4; color: var(--siyoh-yumshoq); }

.holat-qator { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--k12); padding: var(--e6-12) var(--k16); }
/* KALIT (D10.2 / B1) — yoqiq qoidaning almashtirgichi: bitta bosish
   o'chiradi. Harakat yo'q: holat serverdan qayta o'qiladi. */
.kalit {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--oltin);
  box-shadow: var(--kalit-soya);
  cursor: pointer;
}
.kalit:disabled { opacity: 0.5; cursor: default; }
.kalit-tugma {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--oltin-ustida);
  box-shadow: var(--kalit-tugma-soya);
}
/* QATORDAGI OCHUVCHI TUGMA ("Yoqish") — tasdiq tortmasini ochadi. */
.qator-tugma {
  flex: none;
  min-height: 36px;
  padding: 0 var(--k14);
  border: 1px solid var(--oltin);
  border-radius: 12px;
  background-color: transparent;
  color: var(--oltin);
  font-size: var(--y13);
  font-weight: 600;
  cursor: pointer;
}
.ikki-qator { display: flex; flex-direction: column; gap: var(--k3); min-width: 0; }

.solishtiruv { padding: var(--e6-12) var(--k16) var(--e4-8); border-radius: 20px; }
.sol-qator {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--k8);
  align-items: center;
  min-height: var(--b-sol);
  border-bottom: 1px solid var(--chiziq-ich);
  font-size: var(--y13);
  line-height: 1.35;
  color: var(--siyoh-och);
}
.sol-qator.bosh { min-height: 0; padding-bottom: var(--e4-8); font-size: var(--y12); color: var(--siyoh-past); }
.sol-ong { text-align: right; }
.sol-backtest { text-align: right; color: var(--siyoh-ok); }
.sol-jonli { text-align: right; color: var(--siyoh); }

.signal-karta {
  display: flex;
  flex-direction: column;
  gap: var(--e2-6);
  width: 100%;
  padding: var(--e6-12) var(--k16);
  border: 1px solid var(--tushish-chegara);
  border-radius: 18px;
  background-color: var(--tushish-fon);
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.signal-matn { font-size: var(--ye12-13); line-height: 1.4; color: var(--siyoh-yumshoq); }
.signal-havola { font-size: var(--y13); font-weight: 600; line-height: 1.35; color: var(--oltin); }

.sabab-royxat { border-radius: 20px; }
.sabab-qator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k12);
  padding: var(--k12) 0;
  border-bottom: 1px solid var(--chiziq-ich);
}
.sabab-qator:last-child { border-bottom: 0; }
.sabab-nom { font-size: var(--y14); }
.sabab-soni { font-family: var(--shrift-son); font-size: var(--y14); color: var(--siyoh-xira); }
.sabab-soni.tushish { color: var(--tushish); }

/* ============ 19. BILIM ============ */
.yol-karta { gap: 0; padding: var(--e8-14) var(--k16) var(--e2-6); }
.mavzu-karta { padding: var(--e8-14) var(--k16) var(--e2-6); border-radius: 22px; }
.karta-bosh { align-items: baseline; padding-bottom: var(--k6); }

.yol-qator {
  display: flex;
  align-items: center;
  gap: var(--k12);
  width: 100%;
  min-height: 48px;
  padding: var(--k4) 0;
  border: 0;
  border-bottom: 1px solid var(--chiziq-ich);
  background-color: transparent;
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.yol-qator:last-child { border-bottom: 0; }
/* BOSQICH BELGISI — FAQAT RANG EMAS (WCAG 1.4.1): o'tilganida
   belgi, qolganida raqam; joriyda chegara ham boshqa. */
.yol-belgi {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--chiziq-quyuq);
  border-radius: 50%;
  color: var(--siyoh-past);
  font-size: var(--y13);
  font-weight: 600;
}
.yol-belgi.otildi { border-color: var(--oltin); background-color: var(--oltin); color: var(--oltin-ustida); }
.yol-belgi.joriy { border-color: var(--oltin); color: var(--oltin); }
.yol-bajarildi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.mavzu-qator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--k8);
  width: 100%;
  min-height: 48px;
  padding: var(--k4) 0;
  border: 0;
  border-bottom: 1px solid var(--chiziq-ich);
  background-color: transparent;
  color: var(--siyoh);
  font-size: var(--y14);
  text-align: left;
  cursor: pointer;
}
.mavzu-qator:last-child { border-bottom: 0; }
.mavzu-qator.yopiq { cursor: default; color: var(--siyoh-xira); }

.matn-karta { gap: var(--k14); font-size: var(--y15); line-height: 1.65; color: var(--siyoh-yumshoq); }
/* BILIM DARSLARI (BILIM-2): "Asosiy fikr" — matn oxirida, oltin chiziq bilan. */
.dars-asosiy { padding-left: var(--k12); border-left: 3px solid var(--oltin); font-weight: 600; color: var(--siyoh); }
.matn { font-size: var(--y15); line-height: 1.65; color: var(--siyoh-yumshoq); }
.bosqich-izoh { font-size: var(--y14); line-height: 1.6; color: var(--siyoh-yumshoq); }
.chap { align-self: flex-start; }

/* AKADEMIYA — bosqich ko'rsatkichi. Bo'laklar FAQAT rang bilan
   ajratilmaydi: joriy bo'lak balandroq (WCAG 1.4.1). */
.bosqich { display: flex; align-items: center; gap: var(--k8); }
.bosqich-son { font-family: var(--shrift-son); font-size: var(--y12); color: var(--siyoh-xira); }
.bosqich-chiziq { flex: 1; display: flex; align-items: center; gap: var(--k4); }
.bosqich-bolak { flex: 1; height: 3px; border-radius: 999px; background-color: var(--chiziq-quyuq); }
.bosqich-bolak.otildi { background-color: var(--osish); }
.bosqich-bolak.joriy { height: 5px; background-color: var(--oltin); }

.savol { border-radius: 22px; }
.savol h2 { font-size: var(--y15); font-weight: 600; }

/* ============ 20. SOZLAMALAR — SOKIN YUZA ============ */
.sokin-karta {
  display: flex;
  flex-direction: column;
  gap: var(--k8);
  padding: var(--e8-14-past) var(--k16);
  border-radius: 22px;
  background-color: var(--sokin);
  box-shadow: var(--sokin-soya);
}
.sokin-karta.yonma { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--k12); border-radius: 20px; }

.risk-qator { display: flex; justify-content: space-between; align-items: center; gap: var(--k10); }
.risk-nom { font-size: var(--y13); }
.risk-izoh { font-size: var(--y11); color: var(--siyoh-xira); }
.chuqur {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--k4);
  min-height: 46px;
  padding: var(--k3);
  border-radius: 14px;
  background-color: var(--sokin-chuqur);
  box-shadow: var(--chuqur-soya);
}
.chuqur-qiymat { min-width: 44px; padding: 0 var(--k4); text-align: center; font-size: var(--y15); white-space: nowrap; }
/* Qadam tugmali qatorda qulf ham 40px: yozuvga joy qolsin (360px ekran, yetti xonali chegara). */
.qadam-tugma + .chuqur-qiymat + .qulf { width: 40px; }
/* QADAM TUGMASI "−" / "+" (D10.2 / B2) — tasdiq tortmasini ochadi. */
.qadam-tugma {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background-color: var(--sokin-tugma);
  box-shadow: var(--sokin-tugma-soya);
  color: var(--siyoh);
  font-size: var(--y19);
  line-height: 1;
  cursor: pointer;
}
.qulf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background-color: var(--sokin-qulf);
  color: var(--siyoh-past);
  cursor: pointer;
}
.qulf.oltin { color: var(--oltin); }
.qulf-belgi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.holat-satr { display: flex; gap: var(--k8); align-items: flex-start; font-size: var(--y12); line-height: 1.5; color: var(--siyoh-yumshoq); }
.satr-nuqta { flex: none; width: 8px; height: 8px; margin-top: var(--k4); border-radius: 50%; background-color: var(--osish); }
.satr-nuqta.qizil { background-color: var(--tushish-nuqta); }

/* ============ 21. XABAR (toast) ============ */
.xabar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: var(--xabar-past);
  z-index: 5;
  padding: var(--k12) var(--k14);
  border: 1px solid var(--chiziq);
  border-radius: 14px;
  background-color: var(--varaq-past);
  box-shadow: var(--xabar-soya);
  color: var(--siyoh);
  font-size: var(--y13);
  line-height: 1.45;
}

/* ============ 22. PASTKI PANEL ============

   ZAXIRA FON BIRINCHI: blur qo'llab-quvvatlanmasa panel shaffof
   qolmaydi (pastdagi `@supports`). Bo'sh panel ko'rinmaydi —
   Akademiya va ichki sahifada u bo'shatiladi. */
.qatlam {
  background: var(--varaq);
}

/* PANEL OQIMDA, OXIRIDA (`order`): `index.html` da u `main` dan
   OLDIN turadi, ustun ichida esa pastga tushadi. `fixed` EMAS —
   panel Telegram aytgan balandlik ICHIDA turadi va kontent uning
   ostiga kirib qolmaydi. */
#tablar {
  order: 2;
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  height: var(--b-nav);
  margin: 0 var(--k12) var(--nav-past);
  border: 1px solid var(--chiziq);
  border-top-color: var(--yaltiroq);
  border-radius: 22px;
  background-image: var(--nav-shisha);
  box-shadow: var(--nav-soya);
}
#tablar:empty { display: none; }

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--k4);
  min-height: 48px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--siyoh-past);
  font-size: var(--y11);
  cursor: pointer;
}
/* FAOL TAB FAQAT RANG BILAN EMAS (WCAG 1.4.1): yozuvi qalin va
   `aria-current` bor. */
.tab.faol { color: var(--oltin); font-weight: 600; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 23. BLUR — FAQAT QO'LLAB-QUVVATLANSA ============ */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .qatlam {
    background-color: transparent;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
  .shisha {
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  .tasma {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .stop-qopqoq {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* ============ 24. EKRAN BALANDLIGI — ZAXIRA ============

   Telegram balandlikni aytmasa (`viewportStableHeight` yo'q)
   sahifa brauzerning O'Z ko'rinadigan balandligini oladi. `dvh`
   manzil satri yig'ilganda ham to'g'ri; uni bilmaydigan brauzerda
   ildizdagi `100vh` qoladi. */
@supports (height: 100dvh) {
  :root { --ekran-b: 100dvh; }
}

/* ===================================================================
   PROP HISOB — yo'l-yo'riq va PROP ekrani (PROP-ILOVA 2, 4b)
   Bosqich tanlovi — mavjud `.segment` (Savdolar filtri bilan bir).
   =================================================================== */
.nishon.prop { border-color: var(--prop-chegara); color: var(--prop); }
.prop-karta { border-color: var(--prop-chegara); }
.maydon { display: grid; gap: var(--k4); }
.maydon-nom { font-size: var(--y12); color: var(--siyoh-och); }
.maydon-izoh { font-size: var(--y12); color: var(--siyoh-past); }
.maydon-qiymat {
  font: inherit; font-size: var(--y14); color: var(--siyoh); background: var(--sokin-chuqur);
  border: 1px solid var(--chiziq-quyuq); border-radius: var(--k10); padding: var(--k8) var(--k10); min-width: 0; width: 100%;
}
.maydon-qiymat:focus { outline: 2px solid var(--prop-chegara); }
.ogoh-matn { font-size: var(--y13); color: var(--diqqat); }
.hisob-guruh { margin: var(--k10) var(--k2) var(--k2); color: var(--siyoh-past); }

/* ===================================================================
   25. DIZAYN TIZIMI — `k-` BO'LAKLARI (ILOVA-UX 3, PROP 2-versiya)
   Karta, (i), qiymat qatori, zarar tasmasi, plita, qator-tugma,
   ro'yxat, jadval, nusxa tugmasi, amal qatori. Ramka yo'q — kartalar
   shisha tusi bilan ajraladi; rang faqat ma'no (zona, PROP); 8 px
   setka. Past ekranda (660px gacha) ichki bo'shliq `--bir` bilan
   torayadi, yozuv va bosish maydoni kichraymaydi.
   =================================================================== */
.k-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--k8);
  padding: var(--e8-16) var(--k16);
  border: 0;
  border-radius: 16px;
  background-image: var(--yuza);
  box-shadow: inset 0 1px 0 var(--chiziq-ich);
  color: var(--siyoh);
  text-align: left;
}
.k-bosildi { width: 100%; cursor: pointer; }
.k-sarl { min-height: 20px; padding-right: var(--k22); font-size: var(--y12); line-height: 20px; color: var(--siyoh-past); }
.k-qiy { font-size: var(--o6); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.k-izoh { font-size: var(--y12); color: var(--siyoh-past); overflow-wrap: anywhere; }
.k-ustma { position: relative; }
.k-ustma > .k-info { top: 0; right: 0; }
.k-info {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.k-info-belgi {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--chiziq-quyuq);
  border-radius: 50%;
  font-family: var(--shrift-son);
  font-size: var(--y11);
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  color: var(--siyoh-xira);
}
.k-holat { display: flex; align-items: center; gap: var(--k8); min-width: 0; }
.k-holat-qator {
  width: 100%;
  min-height: 44px;
  padding: 0 0 0 var(--k4);
  border: 0;
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.k-holat-qator > .k-info-belgi { flex: none; margin: 0 var(--k12); }
.k-holat-matn { flex: 0 1 auto; font-size: var(--y15); font-weight: 600; }
.k-holat-ost { flex: 0 1 auto; margin-left: auto; font-size: var(--y12); color: var(--siyoh-past); }
.k-holat-nom { flex: 1; font-size: var(--y15); font-weight: 600; color: var(--siyoh); }
.k-nuqta { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* Ma'no ranglari: matn va to'ldirish. */
.k-yashil { color: var(--osish); }
.k-sariq { color: var(--diqqat); }
.k-toq { color: var(--toq); }
.k-qizil { color: var(--tushish); }
.k-prop { color: var(--prop); }
.k-xira { color: var(--siyoh-ok); }
.k-fon-yashil { background-color: var(--osish); }
.k-fon-sariq { background-color: var(--diqqat); }
.k-fon-toq { background-color: var(--toq); }
.k-fon-qizil { background-color: var(--tushish); }
.k-fon-prop { background-color: var(--prop); }
.k-fon-xira, .k-fon-nomalum { background-color: var(--siyoh-ok); }

/* QIYMAT QATORI: xira sarlavha · katta son · xira limit · foiz chipi. */
.k-qator { display: flex; align-items: baseline; gap: var(--k8); min-width: 0; }
.k-qator-sarl { flex: 1; min-width: 0; font-size: var(--y12); color: var(--siyoh-past); }
.k-qator-son { font-family: var(--shrift-son); font-size: var(--y17); font-weight: 600; }
.k-qator-lim { font-family: var(--shrift-son); font-size: var(--y13); color: var(--siyoh-past); }
.k-foiz {
  align-self: center;
  min-width: 44px;
  padding: var(--k2) var(--k8);
  border-radius: 999px;
  background-image: var(--tugma-yuza);
  font-family: var(--shrift-son);
  font-size: var(--y11);
  font-weight: 600;
  text-align: center;
}

/* ZARAR TASMASI: zona treki (chegaralar profildan: `--b1..3`),
   to'ldirish (`--o`) joriy zona rangida, bosqich belgilari. */
.k-tasma { display: flex; flex-direction: column; gap: var(--k4); }
.k-trek {
  position: relative;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--asbob-iz);
  background-image: linear-gradient(90deg,
    var(--zona-iz-yoq) 0 var(--b1, 50%),
    var(--zona-iz-sariq) var(--b1, 50%) var(--b2, 70%),
    var(--zona-iz-toq) var(--b2, 70%) var(--b3, 80%),
    var(--zona-iz-qizil) var(--b3, 80%) 100%);
}
.k-trek-tola { position: absolute; top: 0; bottom: 0; left: 0; width: var(--o, 0%); border-radius: 4px; }
.k-trek-belgi { position: absolute; top: 0; bottom: 0; left: var(--o, 0%); width: 1px; background-image: linear-gradient(var(--yaltiroq), var(--yaltiroq)); }
.k-belgilar { position: relative; height: 14px; font-family: var(--shrift-son); font-size: var(--y11); line-height: 14px; color: var(--siyoh-ok); }
.k-belgilar > span { position: absolute; top: 0; left: calc(var(--o, 0%) - var(--k14)); width: 28px; text-align: center; }

/* MAQSAD — ingichka tasma; savdo kunlari — nuqtalar. */
.k-ingichka { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background-color: var(--asbob-iz); }
.k-ingichka-tola { position: absolute; top: 0; bottom: 0; left: 0; width: var(--o, 0%); border-radius: 2px; background-color: var(--prop); }
.k-nuqtalar { display: flex; align-self: center; gap: var(--k8); }
.k-nuqtalar > b { width: 10px; height: 10px; border-radius: 50%; background-color: var(--asbob-iz); }
.k-nuqtalar > b.bor { background-color: var(--prop); }

/* PLITALAR — 3 ustun; keng qator (Amallar / Yoqish) to'liq enda. */
.k-plitalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k8); }
.k-plita {
  display: grid;
  align-content: start;
  gap: var(--k4);
  min-width: 0;
  min-height: calc(64px + var(--bir) * 16);
  padding: var(--k12);
  border: 0;
  border-radius: 16px;
  background-image: var(--yuza);
  box-shadow: inset 0 1px 0 var(--chiziq-ich);
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.k-plita-sarl { font-size: var(--y12); color: var(--siyoh-past); }
.k-plita-qiy { font-size: var(--y16); font-weight: 600; }
.k-plita-izoh { font-size: var(--y11); color: var(--siyoh-ok); }
.k-plita.k-keng { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--k8); min-height: 48px; }
.k-plita.k-keng > .k-plita-izoh { flex: 1; min-width: 0; }

/* QATOR-TUGMA (guruh, amal): nom, bir qatorli izoh, strelka. */
.k-guruhlar { display: flex; flex-direction: column; gap: var(--k8); }
.k-qt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--k2) var(--k8);
  width: 100%;
  min-height: 56px;
  padding: var(--k8) var(--k16);
  border: 0;
  border-radius: 16px;
  background-image: var(--yuza);
  box-shadow: inset 0 1px 0 var(--chiziq-ich);
  color: var(--siyoh);
  text-align: left;
  cursor: pointer;
}
.k-qt-nom { grid-column: 1; font-size: var(--y14); }
.k-qt-izoh { grid-column: 1; font-size: var(--y12); color: var(--siyoh-past); overflow-wrap: anywhere; }
.k-qt-ok { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--siyoh-ok); }

/* RO'YXAT — o'z ichida aylanadi (`body.royxat-aylanadi`). */
.k-royxat {
  min-height: 0;
  padding: 0 var(--k16);
  border-radius: 16px;
  background-image: var(--yuza);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.royxat-aylanadi #varaqlar > .k-royxat { flex: 0 1 auto; min-height: 0; }
.k-rq { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--k2) var(--k8); padding: var(--k12) 0; }
.k-rq + .k-rq { border-top: 1px solid var(--chiziq-ich); }
.k-rq-nom { font-size: var(--y13); overflow-wrap: anywhere; }
.k-rq-qiy { font-family: var(--shrift-son); font-size: var(--y12); color: var(--siyoh-xira); }
.k-rq-ost { grid-column: 1 / -1; font-size: var(--y12); color: var(--siyoh-past); }

/* JADVAL (ramkasiz) va NUSXA tugmasi (44 px). */
.k-jadval { padding: 0 var(--k16); border-radius: 16px; background-image: var(--yuza); }
.k-jq { display: flex; align-items: center; gap: var(--k8); min-height: 44px; }
.k-jq + .k-jq { border-top: 1px solid var(--chiziq-ich); }
.k-jq-nom { flex: none; font-size: var(--y13); color: var(--siyoh-xira); }
.k-jq-qiy { flex: 1; min-width: 0; font-family: var(--shrift-son); font-size: var(--y13); text-align: right; overflow-wrap: anywhere; }
.k-nusxa {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: var(--k12-teskari);
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--siyoh-xira);
  cursor: pointer;
}
.k-nusxa-belgi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-nusxa-joy { position: absolute; width: 1px; height: 1px; opacity: 0; }
.k-kod-qator { display: flex; align-items: center; justify-content: space-between; gap: var(--k8); }
.k-kod { font-family: var(--shrift-son); font-size: var(--y19); font-weight: 600; letter-spacing: 1px; color: var(--oltin); overflow-wrap: anywhere; }

/* SEHRGAR: qadamlar tasmasi va sarlavha. */
.k-qadamlar { display: flex; gap: var(--k4); }
.k-qadamlar > b { flex: 1; height: 4px; border-radius: 2px; background-color: var(--asbob-iz); }
.k-qadamlar > b.bor { background-color: var(--prop); }
.k-sehr { display: flex; align-items: center; gap: var(--k8); }
.k-sehr > .k-info { position: static; }
.k-sehr-sarl { flex: 1; min-width: 0; font-size: var(--y19); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.k-forma { display: flex; flex-direction: column; gap: var(--k12); }

/* AMAL QATORI — ekran pastida (kontent maydonining oxiri). */
.k-bar { display: flex; gap: var(--k8); margin-top: auto; padding-top: var(--k8); }
.k-bar > * { flex: 1; min-width: 0; }

/* SARLAVHADAGI "YANGILASH" (44 px). */
.k-yangila {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--chiziq);
  border-radius: 14px;
  background-image: var(--tugma-yuza);
  color: var(--siyoh);
  cursor: pointer;
}
/* Kabina PROP kartasi (tugma, `align-items: flex-start`): holat qatori va tasma — to'liq enda. */
.prop-karta > .k-holat,
.prop-karta > .k-ingichka { align-self: stretch; }

/* ===================================================================
   26. BUTUN PILOT — v3 (ILOVA-UX 4, B). A dagi `k-` bo'laklari B
   ekranlarida: (i) kartaning o'ng yuqori burchagida (izoh paragrafi
   ekranda yo'q), nusxa tugmasi jadvalda, ro'yxat / o'qish matni o'z
   ichida aylanadi, bosish maydoni >= 44 px.
   =================================================================== */
/* (i) uchun joy: sarlavha o'ng chetga (i) ostiga kirmaydi. */
.k-ustma-bosh { padding-right: var(--k36); }
.ustma-orta > .k-info { top: 50%; right: var(--k8-teskari); margin-top: var(--k22-teskari); }
.shisha.k-ustma > .k-info,
.sokin-karta.k-ustma > .k-info,
.izoh-karta.k-ustma > .k-info,
.yol-karta.k-ustma > .k-info { top: 2px; right: 2px; }
.shisha.k-ustma,
.sokin-karta.k-ustma { position: relative; }
/* Jadval sarlavhasidagi (i) — oqimda (ustunlar siljimaydi), qator balandligi o'smaydi. */
.sol-nom { display: flex; align-items: center; min-width: 0; }
.sol-nom > .k-info { position: relative; flex: none; margin-block: var(--k12-teskari); }

/* NUSXA JADVALDA: qiymat qatorni egallaydi, tugma o'ng chetda. */
/* Nusxa tugmali qator — bosiladi: 44 px. */
.jadval-qator.nusxali { min-height: 44px; }
.jadval-qator.nusxali .jadval-qiymat { flex: 1; }
.hisob-kod-qator { display: flex; align-items: center; gap: var(--k8); }
.hisob-kod-qator > .hisob-kod { flex: 1; min-width: 0; }

/* RO'YXATLI ICHKI SAHIFALAR (`yol.ROYXATLI_SAHIFALAR`): Voqealar va
   "Nega savdo ochilmadi" — FAQAT ro'yxat aylanadi; Bilim mavzusi — matn. */
body.royxat-aylanadi #varaqlar > .jurnal-joy { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--k8); }
.jurnal-joy > * { flex: none; }
.jurnal-joy > .jurnal { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.royxat-aylanadi #varaqlar > .sabab-royxat,
body.royxat-aylanadi #varaqlar > .matn-karta { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.matn-karta:focus-visible { outline: 2px solid var(--oltin); outline-offset: 2px; }
body.royxat-aylanadi #varaqlar > .k-bar { flex: none; margin-top: 0; padding-top: 0; }
.k-bar > .chip { flex: none; align-self: center; }

/* BOSQICH YO'LI BIR QATORDA (v3): besh doira yonma-yon, nom ostida. */
.yol-qadamlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--k4); padding-bottom: var(--k6); }
.yol-qadamlar > .yol-qator {
  flex-direction: column;
  justify-content: center;
  gap: var(--k4);
  min-height: 60px;
  padding: var(--k4) 0;
  border-bottom: 0;
  text-align: center;
}
.yol-nom { max-width: 100%; font-size: var(--y11); color: var(--siyoh-och); }

/* BOSISH MAYDONI >= 44 px (B1 auditi: hisob nishoni 69×22, filtr 103×38,
   "−" / qulf 40×40, qoida havolasi 198×18, holat tugmasi 118×35).
   Ko'rinish o'zgarmaydi — maydon `::after` yoki balandlik bilan. */
.hisob-chip::after { top: var(--k14-teskari); bottom: var(--k14-teskari); left: var(--k10-teskari); right: var(--k10-teskari); }
.segment-tugma { min-height: 44px; }
.qadam-tugma { width: 44px; height: 44px; }
.qadam-tugma + .chuqur-qiymat + .qulf { width: 44px; }
.qulf { height: 44px; }
.holat-tugma { position: relative; }
.holat-tugma::after { content: ""; position: absolute; top: var(--k6-teskari); bottom: var(--k6-teskari); left: 0; right: 0; }
.qoida-havola { position: relative; }
.qoida-havola::after { content: ""; position: absolute; top: var(--k14-teskari); bottom: var(--k14-teskari); left: 0; right: 0; }

/* QOIDA "Oxirgi signal": uzun sabab o'ngdan chiqib ketmaydi (B1 — 4 o'lchamda toshardi). */
.signal-karta { min-width: 0; max-width: 100%; }
.signal-karta > * { min-width: 0; max-width: 100%; }