/* «CHIROQ» KOMPONENT QATLAMI — SPRINT-75 §4.5, T509.

   Ikkala yuz (`/` va `/m`) yuklaydi, `uslub.css`/`mobil.css` dan KEYIN:
   komponent ikki faylda qo'lda takrorlanmaydi (§7-7). Manba —
   `dizayn/chiroq/maket.html` ning komponent CSS qismi.

   QAMROV. Hamma qoida `.chiroq` ota sinfi ostida. Sabab: `.led`, `.son`,
   `kbd` uslub fayllarida allaqachon bor, `karta`/`chip`/`iz`/`yorliq`
   esa JS yaratadigan sinf nomlarining bo'lagi — yalang'och qoida mavjud
   sahifani jimgina o'zgartirardi. `.chiroq` ni ekran konteyneriga
   T510–T512 qo'yadi; ungacha bu fayl hech narsani chizmaydi. Yagona
   NOMLI istisno — kosmik fon `.koinot` (fayl oxirida, T544).

   RANG. Faqat rol tokenlari (`uslub.css` «CHIROQ QAVATI» izohi): sirt,
   siyoh, chiziq zinalari va oilalar (`--feruza` … `--anor`,
   `--binafsha-chiroq`, `*-matn`). Hex va `rgb(` YO'Q — qulf
   `tests/palitra.rs`. Rang oilasi `.c-*` ikki o'zgaruvchi beradi:
   `--c` (chiroq: nuqta, chiziq, to'ldirish) va `--cm` (matn).

   HARAKAT. Cheksiz animatsiya uchta — `.led.puls`, joriy qadam
   nuqtasining halqasi (`.qadamlar li.joriy::after`, T515) va kutish
   pufagining chirog'i (`.xabar.kutish > .pufak::before`, T516), hammasi
   bitta `chiroq-puls` kadri, faqat `opacity`. `yoq` darajasi,
   kam-harakat va yashirin tab IKKALASINI shu faylning o'zida to'xtatadi
   (uslub fayllaridagi `*` to'xtatgichiga suyanmay) — yangi cheksiz
   animatsiya to'xtatgichlar ro'yxatiga ham yoziladi, qulf
   `tests/harakat_byudjeti.rs`. T544 da ko'chgan kosmik fon va LED/avatar
   primitivlari bundan tashqari: T233 byudjeti (`transform`/`opacity`),
   to'xtatgichi yuz fayllaridagi `*`. `backdrop-filter` YO'Q.

   OYNA. `<dialog>` lar `<body>` ning bevosita bolasi — `chiroq` sinfi
   oynaning O'ZIGA qo'yiladi (`class="… chiroq oyna"`, §4.7), shuning
   uchun ildiz selektori `.chiroq.oyna`. Geometriya (eni, `max-height`,
   `/m` varaq shakli) — oynaning o'z sinfida; bu yerda faqat til.
   Soya `--soya-1`/`--soya-2` Tong'dagina bor; tunda — `none`. */

/* ═══ ESKI KOMPONENTLAR — `uslub.css`/`mobil.css` DAN (SPRINT-80 T549) ═══
   80 gacha eski fayllarda qolgan, «Chiroq» o'rinbosari YO'Q komponentlar:
   suhbat bo'limi ichki joylashuvi (salom, tez kirish, xabarlar ustuni,
   kiritish qatori), xabar bo'laklari (biriktirma, «navbatda», tugun
   holati, vazifa/versiya xabari, «Och»), tanlov chipi va menyusi (AI
   menyusi, panel chiplari, `manba-checkbox`), navbat qatori, «✕»
   (`.blok-yop`), ma'no ranglari (`button[data-amal]`), sayt siri va kirish
   belgisi, argv, jarayon kartasi jadvali (keng: ustun eni; `/m`: karta),
   oyna o'lchamlari, Xizmatlar `/m` boshi. Ko'rinish O'ZGARMADI — qiymatlar
   so'zma-so'z, eski rol tokenlari bilan (`olchovlar/t549/README.md`,
   computed-style solishtirgichi).

   ANIQLIK. Selektorning birinchi sinfi `:where()` ichida:
   `.chiroq :where(.X) …` = eski `.X …`; oyna ildizi — `.chiroq.oyna:where(.X)`;
   `:root button[data-amal]` → `.chiroq button[data-amal]` (teng). `:is()`
   yoyilgan (aniqlik o'sha).
   JOY. Fayl BOSHIDA — eski fayllar `chiroq.css` dan oldin yuklanardi, ya'ni
   teng aniqlikda pastdagi har «Chiroq» qoidasi hamon yutadi.
   YUZ. Ikki yuzda bir xil qoida — bitta nusxa; farqlisi — keng yuz
   `@media (min-width: 1024px)`, `/m` `@media (max-width: 1023px)` ichida
   (yuz 1024px da almashadi, `ozak.js::yuzniMosla`; kirish/ekran sahifalarida
   bu sinflar yo'q). Yangi qoida bu blokka qo'shilmaydi — komponent «Chiroq»
   tiliga o'tganda shu yerdan o'chadi. */
@media (min-width: 1024px) {
  .chiroq :where(.odam-och) {
    margin-inline-start: 0.5rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    vertical-align: baseline;
  }
  .chiroq :where(.panel-bosh) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--chegara);
  }
  .chiroq :where(.panel-tana) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.85rem;
  }
  .chiroq :where(.panel-jumla) {
    margin: 0;
    color: var(--sokin);
    font-size: 0.85rem;
  }
  .chiroq :where(.izoh) {
    color: var(--sokin);
    font-size: 0.85rem;
    margin: 0;
  }
  .chiroq :where(.panel-sarlavha) {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sokin);
    font-weight: 600;
    /* `auto` — panel boshida uchta element bor (nom · «+» · «Yopish»);
       nom chapda qoladi, ikkala tugma esa o'ng chekkada guruhlanadi. */
    margin: 0 auto 0 0;
  }
  .chiroq :where(.suhbat) {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1rem 0.5rem;
    /* Salom bo'sh joyni egallab markazda tursin (`mobil.css` dagi
       `.suhbat-oqim` bilan bir xil naqsh). */
    display: flex;
    flex-direction: column;
  }
  .chiroq :where(.salom) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 2rem 1.5rem 0;
    text-align: center;
  }
  .chiroq :where(.suhbat):has(.xabar) .salom { display: none; }
}
@media (max-width: 1023px) {
  .chiroq :where(.salom) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 2rem 1.25rem 1rem;
    text-align: center;
  }
  .chiroq :where(.suhbat-oqim):has(.xabar) .salom,
  .chiroq :where(.suhbat-oqim):has(.xabar) .tez-kirish { display: none; }
}
.chiroq :where(.salom-holat) { justify-content: center; margin: 0; }
@media (min-width: 1024px) {
  .chiroq :where(.salom-matn) {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--siyoh);
  }
  .chiroq :where(.tez-kirish) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: min(calc(64rem - 50px), calc(100% - 2rem));
    margin: 4px auto 24px;
  }
  .chiroq :where(.suhbat-sarlavha) {
    flex: none;
    width: min(calc(64rem - 50px), calc(100% - 2rem));
    margin: 0 auto;
    padding: 18px 0 12px;
  }
  .chiroq :where(.kiritish) textarea { max-height: 40vh; }
  .chiroq :where(.kiritish-izoh) {
    width: min(calc(64rem - 50px), calc(100% - 2rem));
    margin: -12px auto 12px;
    font-size: 0.75rem;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.salom-matn) {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--siyoh);
  }
  .chiroq :where(.tez-kirish) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 0.75rem 0.5rem;
  }
  .chiroq :where(.xabarlar) {
    list-style: none;
    margin: 0;
    padding: 1rem 1.1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .chiroq :where(.xabarlar):empty { padding: 0; }
  .chiroq :where(.navbat-yorliq) {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 0.5em;
    border: 1px solid var(--sariq);
    border-radius: 999px;
    color: var(--matn);
    font-size: 0.85em;
    font-weight: 600;
    vertical-align: middle;
  }
  .chiroq :where(.navbat-yorliq)[hidden] { display: none; }
  .chiroq :where(.tugun-holati) {
    margin: 0.3rem 0.15rem 0;
    color: var(--sokin);
    font-size: 0.8rem;
  }
  .chiroq :where(.izoh) {
    color: var(--sokin);
    font-size: 0.85rem;
    margin: 0;
  }
  .chiroq :where(.kiritish) { position: relative; }
  .chiroq.korinish-suhbat .kiritish-asboblar > .doira { width: 40px; height: 40px; }
  .chiroq.korinish-suhbat .kiritish-asboblar > .doira.asosiy,
  .chiroq.korinish-suhbat .kiritish-asboblar > .doira.bekor-tugma { width: 44px; height: 44px; }
  .chiroq.korinish-suhbat .kiritish textarea { font-size: 16px; }
  .chiroq.korinish-suhbat .olja .natija-yukla { width: 44px; height: 44px; }
}
.chiroq :where(.kiritish):not(.band) .kiritish-led { display: none; }
.chiroq :where(.kiritish-asboblar) > .kiritish-led { order: 1; margin-left: auto; }
.chiroq :where(.kiritish-asboblar) > .yubor-tugma,
.chiroq :where(.kiritish-asboblar) > .bekor-tugma { order: 2; margin-left: auto; }
.chiroq :where(.kiritish).band .kiritish-asboblar > .bekor-tugma { margin-left: 0; }
@media (min-width: 1024px) {
  .chiroq :where(.xabarlar) {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 64rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .chiroq :where(.xabarlar):empty { flex: none; }
  .chiroq :where(.navbat-yorliq) {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 0.5em;
    border: 1px solid var(--sariq);
    border-radius: 999px;
    color: var(--matn);
    font-size: 0.85em;
    font-weight: 600;
    vertical-align: middle;
  }
  .chiroq :where(.navbat-yorliq)[hidden] { display: none; }
  .chiroq :where(.tugun-holati) {
    margin: 0.3rem 0.15rem 0;
    color: var(--sokin);
    font-size: 0.8rem;
  }
}
.chiroq :where(.pufak-biriktirma) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}
.chiroq :where(.pufak-biriktirma) li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border-radius: calc(8px + var(--yumaloq));
  background: color-mix(in srgb, var(--matn) 7%, transparent);
  color: var(--sokin);
  /* Uzun nom pufakni kengaytirmasin — o'ralsin. */
  overflow-wrap: anywhere;
}
.chiroq :where(.pufak-biriktirma-belgi) {
  flex: none;
  display: inline-flex;
  color: var(--asos-matn);
}
@media (min-width: 1024px) {
  .chiroq :where(.kiritish-asboblar) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .chiroq :where(.ikkilamchi) {
    background: transparent;
    color: var(--sokin);
    border-color: var(--chegara);
  }
  .chiroq :where(.qator) {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
  }
  .chiroq :where(.manba-chip) { max-width: 12rem; }
}
@media (max-width: 1023px) {
  .chiroq :where(.kiritish-izoh) {
    padding: 0.45rem 1rem 0.55rem;
    font-size: 0.72rem;
    text-align: center;
  }
  .chiroq :where(.manba-chip) { max-width: 9rem; }
}
.chiroq :where(.manba-chip)[hidden] { display: none; }
@media (min-width: 1024px) {
  .chiroq :where(.vazifa-xabar-sarlavha) {
    margin: 0;
    color: var(--matn);
    font-weight: 600;
  }
  .chiroq :where(.vazifa-xabar-talablar) {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
  }
  .chiroq :where(.vazifa-xabar-talab) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
  }
  .chiroq :where(.vazifa-xabar-jumla) { color: var(--matn); }
  .chiroq :where(.vazifa-xabar-tugma) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--binafsha);
    border-radius: 999px;
    background: var(--qatlam);
    color: var(--matn);
    font-size: 0.85rem;
  }
  .chiroq :where(.vazifa-xabar-tugma):hover:not(:disabled) { background: var(--qatlam2); }
  .chiroq :where(.vazifa-xabar-tugma):disabled { cursor: default; }
  .chiroq :where(.versiya-xabar) .pufak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
  }
  .chiroq :where(.versiya-xabar-matn) { flex: 1 1 12rem; color: var(--matn); }
  .chiroq :where(.versiya-xabar) .blok-yop {
    position: static;
    order: 0;
    align-self: center;
    margin: 0;
  }
  .chiroq :where(.tanlov) {
    position: relative;
    display: inline-flex;
    min-width: 0;
    gap: 0.4rem;
  }
  .chiroq :where(.tanlov-chip) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.38rem 0.8rem;
    background: var(--qatlam);
    color: var(--matn);
    border: 1px solid var(--chegara);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
  }
}
@media (max-width: 430px) {
  .chiroq :where(.tanlov-chip) {
    gap: 0.25rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.tanlov) {
    /* `position: static` ATAYLAB (2026-09-20): telefon yuzida menyu
       chipdan emas, KARTADAN o'lchanadi — `.kiritish` langar.
       Keng yuzda (`uslub.css`) langar hamon chipning o'zi. */
    position: static;
    display: inline-flex;
    min-width: 0;
    gap: 0.4rem;
  }
  .chiroq :where(.tanlov-chip) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    /* Yon bo'shliq 11px — maketning ixcham chipi (T236). */
    padding: 0.45rem 11px;
    background: var(--qatlam);
    color: var(--matn);
    border: 1px solid var(--chegara);
    border-radius: 999px;
    /* Barmoq nishoni: chip tor telefonda IKONKAGA tushadi (pastdagi
       `@media`), ya'ni eni qisqaradi — bo'yi esa qisqarmasin. */
    min-height: 40px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
  }
}
.chiroq :where(.tanlov-chip)[hidden] { display: none; }
.chiroq :where(.tanlov-chip):hover:not(:disabled) { border-color: color-mix(in srgb, var(--asos) 45%, var(--chegara)); }
.chiroq :where(.tanlov-chip)[aria-expanded="true"] {
  background: var(--qatlam2);
  border-color: color-mix(in srgb, var(--asos) 55%, var(--chegara));
}
.chiroq :where(.tanlov-chip) > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .chiroq :where(.tanlov-oq) {
    flex: none;
    opacity: 0.75;
    transition: transform 120ms ease-out;
  }
  .chiroq :where(.tanlov-chip)[aria-expanded="true"] .tanlov-oq { transform: rotate(180deg); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .chiroq :where(.tanlov-oq) { transition: none; }
}
@media (min-width: 1024px) {
  .chiroq :where(.tanlov-menyu) {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: max-content;
    min-width: 14rem;
    max-width: min(24rem, 84vw);
    padding: 0.4rem;
    background: var(--qatlam2);
    border: 1px solid var(--chegara);
    border-radius: calc(14px + var(--yumaloq));
    box-shadow: 0 10px 30px var(--soya);
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.tanlov-oq) { display: none; }
  .chiroq :where(.tanlov-menyu) {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.45rem;
    background: var(--qatlam2);
    border: 1px solid var(--chegara);
    border-radius: calc(14px + var(--yumaloq));
    box-shadow: 0 10px 30px var(--soya);
  }
}
.chiroq :where(.tanlov-menyu)[hidden] { display: none; }
@media (min-width: 1024px) {
  .chiroq :where(.tanlov-royxat) {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 46vh;
    overflow-y: auto;
  }
  .chiroq :where(.tanlov-band) {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: transparent;
    color: var(--matn);
    border: 0;
    border-radius: calc(9px + var(--yumaloq));
    font-weight: 500;
    text-align: left;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.tanlov-royxat) {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .chiroq :where(.tanlov-band) {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 52px;
    padding: 0.7rem 0.6rem;
    font-size: 0.95rem;
    background: transparent;
    color: var(--matn);
    border: 0;
    border-radius: calc(9px + var(--yumaloq));
    font-weight: 500;
    text-align: left;
  }
}
.chiroq :where(.tanlov-band):hover:not(:disabled) { background: var(--qatlam); }
.chiroq :where(.tanlov-band):disabled {
  opacity: 0.55;
  cursor: default;
}
.chiroq :where(.tanlov-band-nom) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .chiroq :where(.tanlov-jumla) {
    margin: 0;
    padding: 0.45rem 0.55rem;
    color: var(--sokin);
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .chiroq :where(.tanlov-izoh) {
    padding: 0 0.55rem 0.3rem;
    font-size: 0.75rem;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.tanlov-jumla) {
    margin: 0;
    padding: 0.5rem 0.6rem;
    color: var(--sokin);
    font-size: 0.85rem;
    line-height: 1.45;
  }
  .chiroq :where(.tanlov-izoh) {
    padding: 0 0.6rem 0.35rem;
    font-size: 0.8rem;
  }
}
.chiroq :where(.panel-chiplar) { display: contents; }
@media (min-width: 1024px) {
  .chiroq :where(.panel-chip) { max-width: 11rem; }
}
@media (max-width: 1023px) {
  .chiroq :where(.panel-chip) { max-width: 7.5rem; }
}
.chiroq :where(.panel-chip-belgi) {
  flex: none;
  display: inline-flex;
  width: 1rem;
  color: var(--asos-matn);
}
.chiroq :where(.panel-chip-band)[aria-checked="true"] { background: var(--qatlam); }
.chiroq :where(.panel-chip-tafsilot) {
  flex: none;
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--sokin);
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .chiroq :where(.vazifa-xabar-sarlavha) {
    margin: 0;
    color: var(--matn);
    font-weight: 600;
  }
  .chiroq :where(.vazifa-xabar-talablar) {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
  }
  .chiroq :where(.vazifa-xabar-talab) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
  }
  .chiroq :where(.vazifa-xabar-jumla) { color: var(--matn); }
  .chiroq :where(.vazifa-xabar-tugma) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--binafsha);
    border-radius: 999px;
    background: var(--qatlam);
    color: var(--matn);
    font-size: 0.85rem;
  }
  .chiroq :where(.vazifa-xabar-tugma):hover:not(:disabled) { background: var(--qatlam2); }
  .chiroq :where(.vazifa-xabar-tugma):disabled { cursor: default; }
  .chiroq :where(.versiya-xabar) .pufak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
  }
  .chiroq :where(.versiya-xabar-matn) { flex: 1 1 12rem; color: var(--matn); }
  .chiroq :where(.versiya-xabar) .blok-yop {
    position: static;
    order: 0;
    align-self: center;
    margin: 0;
  }
  .chiroq :where(.varaq-tutqich) {
    align-self: center;
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sokin) 50%, transparent);
  }
  .chiroq :where(.manba-sarlavha) {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 600;
  }
  .chiroq :where(.manbalar-sloti) .manba-checkbox-guruh {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }
  .chiroq :where(.manbalar-sloti) .manba-checkbox {
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border-radius: calc(14px + var(--yumaloq));
    background: var(--qatlam);
  }
  .chiroq :where(.manbalar-sloti) .manba-checkbox-nom { font-size: 1rem; }
  .chiroq :where(.manba-yop) { width: 100%; }
  .chiroq :where(.ikkilamchi) {
    background: transparent;
    color: var(--sokin);
    border-color: var(--chegara);
  }
}
.chiroq :where(.manba-checkbox-guruh) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .chiroq :where(.manba-checkbox) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--chegara);
    border-radius: calc(6px + var(--yumaloq));
    background: transparent;
    cursor: pointer;
    user-select: none;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.manba-checkbox) {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--chegara);
    border-radius: calc(8px + var(--yumaloq));
    background: transparent;
    cursor: pointer;
    user-select: none;
  }
}
.chiroq :where(.manba-checkbox):has(input:checked) {
  background: color-mix(in srgb, var(--asos) 15%, transparent);
  border-color: var(--asos);
}
@media (min-width: 1024px) {
  .chiroq :where(.manba-checkbox) input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--asos);
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.manba-checkbox) input[type="checkbox"] {
    margin: 0;
    /* 44×44 nishoni `<label>` ning O'ZI beradi (yuqorida) — checkbox
       piktogrammasining o'zini kattalashtirish shart emas. */
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
    accent-color: var(--asos);
  }
}
.chiroq :where(.manba-checkbox) input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--asos);
  outline-offset: 1px;
}
.chiroq :where(.manba-checkbox-nom) {
  font-size: 0.875rem;
  color: var(--matn);
}
.chiroq :where(.manba-checkbox):has(input:disabled) {
  opacity: 0.55;
  cursor: default;
}
.chiroq :where(.manba-checkbox):has(input:disabled) .manba-checkbox-nom { color: var(--sokin); }
@media (min-width: 1024px) {
  .chiroq :where(.tanlov-menyu) .manba-checkbox-guruh {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.1rem;
  }
  .chiroq :where(.tanlov-menyu) .manba-checkbox {
    gap: 0.55rem;
    padding: 0.3rem 0.5rem;
    border: 0;
    border-radius: calc(9px + var(--yumaloq));
  }
  .chiroq :where(.tanlov-menyu) .manba-checkbox:hover:not(:has(input:disabled)) { background: var(--qatlam); }
  .chiroq :where(.manba-menyu) {
    width: min(23rem, 84vw);
    max-height: min(36rem, 72vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .chiroq :where(.tanlov-sarlavha) {
    position: sticky;
    top: -0.4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: -0.4rem -0.4rem 0;
    padding: 0.4rem 0.4rem 0.35rem 0.9rem;
    background: var(--qatlam2);
    border-bottom: 1px solid var(--chegara);
  }
  .chiroq :where(.tanlov-sarlavha-nom) {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sokin);
  }
  .chiroq :where(.tanlov-sarlavha) .blok-yop {
    position: static;
    order: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.2rem;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.manba-menyu) {
    max-height: min(34rem, 68vh);
    max-height: min(34rem, 68dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .chiroq :where(.tanlov-sarlavha) {
    position: sticky;
    top: -0.45rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: -0.45rem -0.45rem 0;
    padding: 0.45rem 0.45rem 0.35rem 0.9rem;
    background: var(--qatlam2);
    border-bottom: 1px solid var(--chegara);
  }
  .chiroq :where(.tanlov-sarlavha-nom) {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sokin);
  }
  .chiroq :where(.tanlov-sarlavha) .blok-yop {
    position: static;
    order: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
}
.chiroq :where(.manba-checkbox) input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--asos);
}
.chiroq :where(.tanlov-menyu) .manba-checkbox-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .chiroq :where(.navbat-qatori) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0 0 0;
    margin-left: 0.4rem;
    font-size: 0.875rem;
    color: var(--sokin);
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.navbat-qatori) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0;
    font-size: 0.875rem;
    color: var(--sokin);
  }
}
.chiroq :where(.navbat-qatori)[hidden] { display: none; }
.chiroq :where(.navbat-matn) { flex: 1; }
@media (min-width: 1024px) {
  .chiroq.oyna:where(.tasdiq-dialog) { width: min(92vw, 26rem); }
  .chiroq :where(.blok-yop) {
    position: sticky;
    top: 0;
    z-index: 3;
    align-self: flex-end;
    flex: none;
    order: -1; /* idish flex-column bo'lmasa ham tartib buzilmasin */
    margin: 0 0 0.1rem;
    padding: 0.1rem 0.5rem;
    min-width: 2rem;
    border: 1px solid var(--chegara);
    border-radius: calc(8px + var(--yumaloq));
    background: var(--qatlam2);
    color: var(--sokin);
    font-size: 1rem;
    line-height: 1.35;
  }
  .chiroq :where(.blok-yop):hover,
  .chiroq :where(.blok-yop):focus-visible { color: var(--matn); }
}
@media (max-width: 1023px) {
  .chiroq :where(.panel-jumla) {
    margin: 0;
    color: var(--sokin);
    font-size: 0.85rem;
  }
  .chiroq :where(.panel-bosh) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem;
    border-bottom: 1px solid var(--chegara);
  }
  .chiroq :where(.panel-sarlavha) {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
  }
}
.chiroq :where(.chiqish-belgi) {
  display: inline-flex;
  align-items: center;
  color: var(--sokin);
}
.chiroq :where(.sayt-sir) {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .chiroq :where(.sayt-sir-maydon) {
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    background: var(--qatlam);
    color: var(--matn);
    border: 1px solid var(--chegara);
    border-radius: calc(8px + var(--yumaloq));
    font: inherit;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.sayt-sir-maydon) {
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    background: var(--qatlam);
    color: var(--matn);
    border: 1px solid var(--chegara);
    border-radius: calc(8px + var(--yumaloq));
    font: inherit;
    font-size: 16px;
  }
}
.chiroq :where(.sayt-sir-maydon):focus-visible {
  outline: 2px solid var(--asos);
  outline-offset: 2px;
}
.chiroq :where(.sayt-sir) button { min-height: 2.75rem; }
.chiroq :where(.sayt-kirish) {
  font-size: 0.8rem;
  color: var(--sokin);
  overflow-wrap: anywhere;
}
.chiroq :where(.sayt-kirish)[data-ok="ha"] { color: var(--yashil); }
.chiroq :where(.sayt-kirish)[data-ok="yoq"] { color: var(--sariq); }
.chiroq :where(.sayt-rejim-sabab) { color: var(--sariq); }
.chiroq :where(.sayt-xato) { color: var(--qizil); }
@media (min-width: 1024px) {
  .chiroq :where(.ornatilgan-tugunlar-blok),
  .chiroq :where(.agentlar-blok) {
    flex: none;
    border-bottom: 1px solid var(--chegara);
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.panel-tana) { padding: 0.85rem; }
  .chiroq :where(.qator) {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
  }
  .chiroq :where(.blok-yop) {
    position: sticky;
    top: 0;
    z-index: 3;
    align-self: flex-end;
    flex: none;
    order: -1;
    margin: 0 0 0.1rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--chegara);
    border-radius: calc(10px + var(--yumaloq));
    background: var(--qatlam2);
    color: var(--sokin);
    font-size: 1rem;
    line-height: 1.35;
  }
  .chiroq :where(.blok-yop):hover,
  .chiroq :where(.blok-yop):focus-visible { color: var(--matn); }
  .chiroq.oyna:where(.tasdiq-dialog) { width: min(94vw, 26rem); }
  .chiroq.oyna .tasdiq-qator { gap: 0.75rem; }
  .chiroq :where(.tasdiq-tugma) {
    flex: 1 1 7rem;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .chiroq.oyna .tasdiq-maydon { font-size: 16px; min-height: 44px; }
  .chiroq.oyna .blok-yop { width: 44px; height: 44px; }
  .chiroq.oyna .tasdiq-ttl { flex: 1 0 100%; }
  .chiroq :where(.odam-och) {
    margin-inline-start: 0.5rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
  }
  .chiroq :where(.ornatilgan-tugunlar-blok),
  .chiroq :where(.agentlar-blok) {
    flex: none;
    border-bottom: 1px solid var(--chegara);
    padding-bottom: 0.5rem;
  }
}
.chiroq :where(.tugun-argv) {
  margin: 0;
  padding-left: 1.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sokin);
  word-break: break-all;
}
:root[data-tema-joriy="tong"] .chiroq :where(.tanlov-menyu) {
  --qatlam: var(--fon);
  --qatlam2: var(--sirt);
}
:where(:root[data-tema-joriy="tong"]) .chiroq :where(.tanlov-chip),
:where(:root[data-tema-joriy="tong"]) .chiroq :where(.fayl-chip),
:where(:root[data-tema-joriy="tong"]) .chiroq :where(.ikkilamchi) { box-shadow: var(--soya-1); }
:where(:root[data-tema-joriy="tong"]) .chiroq :where(.ikkilamchi) { background: var(--sirt); }
@media (hover: hover) {
  :where(:root[data-tema-joriy="tong"]) .chiroq :where(.tanlov-chip):not(:disabled):hover,
  :where(:root[data-tema-joriy="tong"]) .chiroq :where(.ikkilamchi):not(:disabled):hover {
    translate: 0 -1px;
    box-shadow: var(--soya-2);
  }
}
.chiroq :where(.tongda),
:root[data-tema-joriy="tong"] .chiroq :where(.tunda) { display: none; }
:root[data-tema-joriy="tong"] .chiroq :where(.tongda) { display: inline; }
.chiroq :where(.sayt-kirish) .led { margin-right: 0.45rem; vertical-align: 0.05em; }
.chiroq :where(.sayt-sir-maydon):-webkit-autofill,
.chiroq :where(.sayt-forma-maydon):-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100vmax var(--kiritma), inset 0 0 0 100vmax var(--fon);
  box-shadow: inset 0 0 0 100vmax var(--kiritma), inset 0 0 0 100vmax var(--fon);
  -webkit-text-fill-color: var(--matn);
  caret-color: var(--matn);
}
.chiroq :where(.sayt-sir-maydon):autofill,
.chiroq :where(.sayt-forma-maydon):autofill {
  box-shadow: inset 0 0 0 100vmax var(--kiritma), inset 0 0 0 100vmax var(--fon);
  -webkit-text-fill-color: var(--matn);
  caret-color: var(--matn);
}
.chiroq button[data-amal] {
  --a: var(--asos);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--a) 18%, transparent),
      color-mix(in srgb, var(--a) 5%, transparent)),
    var(--panel2);
  color: color-mix(in srgb, var(--a-matn, var(--a)) 80%, var(--matn));
  border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--a) 24%, transparent);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color var(--orta) ease, box-shadow var(--orta) ease,
    color var(--orta) ease, transform var(--tez) ease;
}
.chiroq button[data-amal]:not(:disabled):hover {
  color: color-mix(in srgb, var(--a-matn, var(--a)) 60%, var(--matn));
  border-color: color-mix(in srgb, var(--a) 75%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--a) 30%, transparent),
    0 0 18px color-mix(in srgb, var(--a) 32%, transparent);
}
.chiroq button[data-amal]:not(:disabled):active { transform: scale(0.96); }
.chiroq button[data-amal]:focus-visible { outline-color: var(--a); }
.chiroq button[data-amal="ochish"] { --a: var(--asos); --a-matn: var(--asos-matn); }
.chiroq button[data-amal="ishga"] { --a: var(--kok); }
.chiroq button[data-amal="tasdiq"] { --a: var(--yashil); }
.chiroq button[data-amal="tahrir"] { --a: var(--binafsha); }
.chiroq button[data-amal="ogoh"] { --a: var(--sariq); }
.chiroq button[data-amal="xavf"] { --a: var(--qizil); }
.chiroq button[data-amal="bekor"] {
  --a: var(--sokin);
  background: transparent;
  color: var(--matn);
  box-shadow: none;
}
@media (min-width: 1024px) {
  .chiroq :where(.tugun-panel-jadval) th.son { width: 1%; }
  .chiroq :where(.tugun-panel-jadval) td.son { width: 1%; white-space: nowrap; }
  .chiroq :where(.tugun-panel-jadval) .tugun-panel-amallar { min-width: 7rem; white-space: normal; }
  .chiroq :where(.tugun-panel-jadval) .tugun-panel-tugma { white-space: nowrap; }
  .chiroq :where(.tugun-panel-amallar) .tugun-panel-tugma { margin: 0 0.3rem 0.3rem 0; }
  .chiroq :where(.tugun-panel-jadval) td.nom {
    min-width: 12rem;
    max-width: 20rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .chiroq :where(.tugun-panel-jadval) td[data-ustun="Izoh"] { max-width: 24rem; }
  .chiroq.jarayon .tugun-panel-karta[data-rasm] {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
  }
  .chiroq :where(.xom-jadval) th.tanla,
  .chiroq :where(.xom-jadval) td.tanla,
  .chiroq :where(.xom-jadval) th.son,
  .chiroq :where(.xom-jadval) td.son,
  .chiroq :where(.xom-jadval) th.amal,
  .chiroq :where(.xom-jadval) td.amal { width: 1%; white-space: nowrap; }
  .chiroq :where(.xom-jadval) td.son { text-align: right; }
  .chiroq :where(.xom-jadval) td.fayl { min-width: 14rem; }
  .chiroq :where(.xom-jadval) td.bosqich { min-width: 16rem; }
  .chiroq.oyna.veb-xizmat-blok,
  .chiroq.oyna.tugun-forma-qatlam { width: min(94vw, 40rem); max-height: 92vh; }
  .chiroq.oyna.sayt-forma-dialog,
  .chiroq.oyna.agent-forma-dialog,
  .chiroq.oyna.agent-sozla-dialog,
  .chiroq.oyna.bog-dialog { width: min(94vw, 36rem); max-height: 92vh; }
  .chiroq.oyna.sayt-ochirish-dialog,
  .chiroq.oyna.tugun-ochirish-dialog,
  .chiroq.oyna.qurilma-ochirish-dialog,
  .chiroq.oyna.oqim-ochirish-dialog { width: min(92vw, 28rem); max-height: 92vh; }
  .chiroq.oyna.tugun-tahrir-dialog { width: min(94vw, 42rem); max-height: 92vh; }
  .chiroq.oyna:where(.muharrir-dialog),
  .chiroq.oyna:where(.tanlov-qadam-dialog) { width: min(94vw, 56rem); max-height: 92vh; }
  .chiroq .muharrir-blok[data-rasm] {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
  }
}
@media (max-width: 1023px) {
  .chiroq :where(.tugun-qator) > .tugun-panel-blok { margin-top: 0.6rem; }
  .chiroq :where(.xabar).jarayon-karta { align-items: stretch; }
  .chiroq.jarayon { padding: 14px; }
  .chiroq.jarayon > .blok-yop { width: 44px; height: 44px; }
  .chiroq.jarayon .tugma-1,
  .chiroq.jarayon .tugma-2 { min-height: 44px; }
  .chiroq.jarayon .tugun-panel-tugma { min-height: 44px; }
  .chiroq.jarayon .tugun-panel-jadval thead,
  .chiroq.jarayon .xom-jadval thead { display: none; }
  .chiroq.jarayon .tugun-panel-jadval,
  .chiroq.jarayon .xom-jadval,
  .chiroq.jarayon .tugun-panel-jadval tbody,
  .chiroq.jarayon .xom-jadval tbody { display: block; width: 100%; }
  .chiroq.jarayon .tugun-panel-jadval tr,
  .chiroq.jarayon .xom-jadval tr {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--chiziq);
    border-radius: 12px;
    background: var(--sirt);
  }
  .chiroq.jarayon .tugun-panel-jadval tbody td,
  .chiroq.jarayon .xom-jadval tbody td {
    display: block;
    padding: 0.15rem 0;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .chiroq.jarayon .tugun-panel-jadval td[data-ustun]::before { content: attr(data-ustun) ": "; color: var(--siyoh-4); }
  .chiroq.jarayon .tugun-panel-jadval td[data-bosh],
  .chiroq.jarayon .xom-jadval td[data-bosh] { display: none; }
  .chiroq.jarayon .tugun-panel-jadval td.tugun-panel-amallar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.4rem;
  }
  .chiroq.jarayon .xom-jadval tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.6rem;
  }
  .chiroq.jarayon .xom-jadval tbody td.fayl { grid-column: 2 / -1; }
  .chiroq.jarayon .xom-jadval tbody td.bosqich,
  .chiroq.jarayon .xom-jadval tbody td.amal { grid-column: 1 / -1; }
  .chiroq.jarayon .xom-jadval tbody td.holat { grid-column: 1 / 3; }
  .chiroq.jarayon .xom-jadval tbody td[data-ustun]::before {
    content: attr(data-ustun);
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--siyoh-4);
  }
  .chiroq.jarayon .xom-jadval tbody td.amal .tugma-1 { width: 100%; justify-content: center; }
  .chiroq.jarayon .xom-katak { width: 1.25rem; height: 1.25rem; }
  .chiroq.jarayon .xom-qator { min-height: 44px; }
  .chiroq.tugunlar-qatlam .xizmatlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .chiroq .xizmatlar-bosh .bolim-bosh-amal { flex: 1 1 100%; }
  .chiroq .xizmatlar-bosh .bolim-bosh-amal > * { flex: 1 1 0; min-height: 44px; justify-content: center; }
}
@media (max-width: 1023px) {
  .chiroq.oyna.veb-xizmat-blok,
  .chiroq.oyna.tugun-forma-qatlam,
  .chiroq.oyna.sayt-forma-dialog,
  .chiroq.oyna.sayt-ochirish-dialog,
  .chiroq.oyna.tugun-tahrir-dialog,
  .chiroq.oyna.agent-forma-dialog,
  .chiroq.oyna.agent-sozla-dialog,
  .chiroq.oyna.tugun-ochirish-dialog,
  .chiroq.oyna.qurilma-ochirish-dialog,
  .chiroq.oyna.oqim-ochirish-dialog,
  .chiroq.oyna.bog-dialog {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
  }
  .chiroq.oyna .maydon input:not([type="checkbox"]):not([type="radio"]),
  .chiroq.korinish .maydon input:not([type="checkbox"]):not([type="radio"]),
  .chiroq.oyna .maydon select:not([type="checkbox"]):not([type="radio"]),
  .chiroq.korinish .maydon select:not([type="checkbox"]):not([type="radio"]),
  .chiroq.oyna .maydon textarea:not([type="checkbox"]):not([type="radio"]),
  .chiroq.korinish .maydon textarea:not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px;
    min-height: 44px;
  }
  .chiroq.oyna.muharrir-dialog,
  .chiroq.oyna.tanlov-qadam-dialog {
    margin: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .chiroq.oyna.muharrir-dialog > .oyna-bosh,
  .chiroq.oyna.tanlov-qadam-dialog > .oyna-bosh { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .chiroq.oyna.muharrir-dialog > .oyna-oyoq,
  .chiroq.oyna.tanlov-qadam-dialog > .oyna-oyoq,
  .chiroq.oyna.veb-xizmat-blok > .oyna-oyoq,
  .chiroq.oyna.tugun-forma-qatlam > .oyna-oyoq,
  .chiroq.oyna.sayt-forma-dialog > .oyna-oyoq,
  .chiroq.oyna.sayt-ochirish-dialog > .oyna-oyoq,
  .chiroq.oyna.tugun-tahrir-dialog > .oyna-oyoq,
  .chiroq.oyna.agent-forma-dialog > .oyna-oyoq,
  .chiroq.oyna.agent-sozla-dialog > .oyna-oyoq,
  .chiroq.oyna.tugun-ochirish-dialog > .oyna-oyoq,
  .chiroq.oyna.qurilma-ochirish-dialog > .oyna-oyoq,
  .chiroq.oyna.oqim-ochirish-dialog > .oyna-oyoq,
  .chiroq.oyna.bog-dialog > .oyna-oyoq {
    border-radius: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .chiroq.oyna .oyna-oyoq .tugma-1,
  .chiroq.oyna .oyna-oyoq .tugma-2 { min-height: 44px; justify-content: center; }
  .chiroq.oyna .muharrir-matn { font-size: 16px; }
  .chiroq.oyna .muharrir-rad,
  .chiroq.oyna .tanlov-qadam-hammasi { min-height: 44px; }
  .chiroq.oyna .tanlov-qadam-variantlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiroq.oyna .rasm .tanlov-qadam-quti { width: 24px; height: 24px; }
  .chiroq.tugunlar-qatlam .kpi-qator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiroq.tugunlar-qatlam .kpi { padding: 14px 14px 12px; gap: 8px; }
  .chiroq.tugunlar-qatlam .kpi .yorliq { white-space: normal; }
  .chiroq.tugunlar-qatlam .kpi-qiymat { font-size: 28px; }
  .chiroq.tugunlar-qatlam .kpi-tag {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chiroq.tugunlar-qatlam .holat-tablar {
    flex-wrap: nowrap;
    width: auto;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .chiroq.tugunlar-qatlam .holat-tablar::-webkit-scrollbar { display: none; }
  .chiroq.tugunlar-qatlam .holat-tab { flex: none; min-height: 44px; }
}

/* ═══ KARKAS — KENG YUZ: NAVIGATOR VA O'NG PANEL (SPRINT-75 T510 → 80 T547) ═══
   Chap navigator (`aside#yon-ustun.yon-ustun.chiroq`) va o'ng «Ish
   paneli» (`aside#ong-panel.ong-panel.chiroq`) maket tilida
   (`dizayn/chiroq/maket.html`): fon ustidagi karta, kafel, yorliq,
   chiroq. Joyi (grid, o'lcham, `overflow`, `[hidden]`) — `uslub.css`
   karkasida; bu yerda faqat ko'rinish, eski sinflar (`.tab-tugma`,
   `.brend-*`, `.suhbat-*`, `.ong-*`) bilan. FAQAT ≥1024px: torroq
   oynada ikkala ustun `display: none`, `/m` ning `dialog#ong-panel.
   ong-panel.chiroq` varag'i esa bu qoidalarni olmasin.
   Fayl BOSHIDA: T510 da `uslub.css` ning oxirida turardi, ya'ni pastdagi
   komponent qoidalaridan (`.kafel`, `.led`, `.yorliq`, `.plitka`) OLDIN —
   teng aniqlikda ular yutadi, o'sha tartib saqlandi. Tez tema tugmasi va
   sahifa foni `uslub.css` da (xom palitra / `<body>` psevdo-elementi). */
@media (min-width: 1024px) {
  /* --- Chap navigator — fon ustidagi karta (shisha emas). --- */
  .chiroq.yon-ustun {
    background: var(--sirt);
    border: 1px solid var(--chiziq);
    border-radius: 16px;
    box-shadow: var(--soya-2, none);
    padding: 0.6rem 0.6rem 0.75rem;
    gap: 0.25rem;
  }
  /* Tong — oq sirt va eng yengil soya (`--soya-2` emas): eski «DARAJALAR VA
     TONG» qoidasi (0,3,0) T549 da shu yerga ko'chdi. */
  :root[data-tema-joriy="tong"] .chiroq.yon-ustun { background: var(--sirt); box-shadow: var(--soya-1); }

  /* Brend — tugma (`.bolim-menyu` ni ochadi): kafel (orb, gradient) +
     nom + «Onlayn» chirog'i. Avatar `.avatar[data-oila="mirzo"]`
     QOLADI (ikki yuzda bir razmetka, `data-aloqa` halqasi —
     `ozak.js::logoHolati`), shakli kafelga o'tadi; orb nuqtasi gradient
     ustida tugma yozuvi rangida. Strelka `aria-expanded` dan buriladi. */
  .chiroq.yon-ustun .brend-tugma {
    border: 0;
    border-radius: calc(12px + var(--yumaloq));
    background: transparent;
    color: var(--matn);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--tez) ease;
  }
  .chiroq.yon-ustun .brend-tugma:hover { background: color-mix(in srgb, var(--asos) 8%, transparent); }
  .chiroq.yon-ustun .brend-ochil { color: var(--sokin); transition: transform var(--orta) ease; }
  .chiroq.yon-ustun .brend-tugma[aria-expanded="true"] .brend-ochil { transform: rotate(180deg); }
  .chiroq.yon-ustun .brend { gap: 0.75rem; padding: 0.55rem 0.5rem; }
  .chiroq.yon-ustun .brend .avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--feruza), var(--binafsha-chiroq));
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--feruza) 70%, transparent);
  }
  .chiroq.yon-ustun .brend .avatar::before {
    background: var(--tugma-matn);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tugma-matn) 70%, transparent);
  }
  .chiroq.yon-ustun .brend-nom {
    color: var(--siyoh);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .chiroq.yon-ustun .brend-holat {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--siyoh-4);
  }

  /* Bo'lim yorlig'i — feruza nuqta + MONO · KATTA HARF. */
  .chiroq.yon-ustun .nav-bolim {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 12px 8px 6px;
  }
  .chiroq.yon-ustun .nav-bolim::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--feruza);
  }
  .chiroq.yon-ustun .suhbat-blok-sarlavha { font-weight: 600; }

  /* Bo'lim bandi — kafel + yozuv; faol band feruza, kafeli gradient.
     Eski LAZER chizig'i va belgining nuri bu tilda yo'q. */
  .chiroq.yon-ustun .tab-tugma {
    gap: 12px;
    min-height: 0;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--siyoh-2);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    transition: background-color var(--tez) ease, border-color var(--tez) ease;
  }
  /* Fokus halqasi bandning ichiga. */
  .chiroq.yon-ustun .tab-tugma:focus-visible { outline-offset: -2px; }
  .chiroq.yon-ustun .tab-tugma:hover {
    color: var(--siyoh);
    background: var(--sirt-2);
    border-color: var(--chiziq);
  }
  .chiroq.yon-ustun .tab-tugma svg {
    width: 18px;
    height: 18px;
    transition: transform var(--orta) ease, filter var(--orta) ease;
  }
  .chiroq.yon-ustun .tab-tugma:not(.tab-yangi)[aria-selected="true"] {
    color: var(--feruza-matn);
    background: color-mix(in srgb, var(--feruza) 10%, var(--sirt));
    border-color: color-mix(in srgb, var(--feruza) 38%, transparent);
  }
  .chiroq.yon-ustun .tab-tugma:not(.tab-yangi)[aria-selected="true"] > .kafel {
    color: var(--tugma-matn);
    border-color: transparent;
    background: var(--tugma-1-fon);
  }
  .chiroq.yon-ustun .kafel > [data-belgi] { display: contents; }
  /* «Yangi suhbat» — amal, bo'lim emas: kafeli uzuq chiziqli, belgilanmaydi. */
  .chiroq.yon-ustun .tab-tugma.tab-yangi { margin: 0.25rem 0 0.25rem; color: var(--feruza-matn); }
  .chiroq.yon-ustun .tab-yangi > .kafel { border-style: dashed; color: var(--feruza-matn); }
  /* «Vazifalar» nishoni — yakunlanmagan ishlar soni: signal, xato emas,
     shuning uchun anor emas, asosiy tugma juftligi (yozuvi qulflangan). */
  .chiroq.yon-ustun #tab-ish-stoli .kafel > .nishon {
    color: var(--tugma-matn);
    background: var(--tugma-1-fon);
  }

  /* Suhbatlar: qator, yoshi mono'da; hover'da qator sal o'ngga suriladi.
     «✕» faqat hover/fokusda ko'rinadi — ro'yxat tinch, lekin tugma
     YASHIRIN emas (klaviatura bilan topiladi). Suhbat qatori faqat suhbat
     oynasi ochiq bo'lganda belgilanadi: boshqa bo'limda belgilangan
     yagona narsa — o'sha bo'lim. */
  .chiroq.yon-ustun .suhbat-qator {
    border-radius: calc(8px + var(--yumaloq));
    transition: background-color var(--tez) ease;
  }
  .chiroq.yon-ustun .suhbat-qator:hover { background: var(--sirt-2); }
  .chiroq.yon-ustun .suhbat-och {
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: calc(10px + var(--yumaloq));
    color: var(--siyoh-3);
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    transition: color var(--tez) ease, transform var(--orta) ease;
  }
  .chiroq.yon-ustun .suhbat-qator:hover .suhbat-och { color: var(--siyoh); transform: translateX(3px); }
  .chiroq.yon-ustun .suhbat-och[aria-current="true"] { background: var(--sirt-3); color: var(--siyoh); font-weight: 500; }
  .chiroq.yon-ustun:has(#tab-suhbat[aria-selected="false"]) .suhbat-och[aria-current="true"] {
    background: transparent;
    font-weight: inherit;
  }
  .chiroq.yon-ustun .suhbat-vaqt {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--siyoh-4);
  }
  .chiroq.yon-ustun .suhbat-ochir {
    padding: 0.3rem 0.4rem;
    background: transparent;
    color: var(--sokin);
    border: 0;
    border-radius: calc(6px + var(--yumaloq));
    opacity: 0;
    font-size: 0.85rem;
  }
  .chiroq.yon-ustun .suhbat-qator:hover .suhbat-ochir,
  .chiroq.yon-ustun .suhbat-ochir:focus-visible,
  .chiroq.yon-ustun .suhbat-ochir.soraldi { opacity: 1; }
  .chiroq.yon-ustun .suhbat-ochir:hover,
  .chiroq.yon-ustun .suhbat-ochir.soraldi { color: var(--qizil); }
  .chiroq.yon-ustun .suhbat-bosh,
  .chiroq.yon-ustun .suhbat-izoh {
    padding: 0.35rem 0.6rem;
    color: var(--sokin);
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* Pastda — mavzu. */
  .chiroq.yon-ustun .yon-past { padding: 0.65rem 0.5rem 0; border-top: 1px solid var(--chiziq); }
  .chiroq.yon-ustun .tema-nomi {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--siyoh-4);
  }

  /* --- O'ng «Ish paneli» — karta; bo'limlar va `.ong-ikonlar` to'ri
     saqlanadi, ikonka kafel + holat chirog'i tiliga o'tadi. Bo'lim va
     guruh sarlavhasi — yorliq + son (`data-son`, `ong-panel.js`); son
     yo'q bo'lsa — bo'sh. --- */
  .chiroq.ong-panel {
    margin: 1rem 1rem 1rem 0;
    background: var(--sirt);
    border: 1px solid var(--chiziq);
    border-radius: 16px;
    box-shadow: var(--soya-2, none);
  }
  .chiroq.ong-panel .ong-panel-bosh {
    padding: 0.8rem 0.6rem 0.65rem 0.9rem;
    border-bottom: 1px solid var(--chiziq);
  }
  .chiroq.ong-panel[data-yigilgan="ha"] .ong-panel-bosh { border-bottom: 0; }
  .chiroq.ong-panel .ong-panel-sarlavha { color: var(--siyoh); font-size: 14px; font-weight: 600; }
  /* Belgi `oldingi` (‹, ikkala yuzdagi to'plamdan — `tests/belgilar.rs`):
     yig'ilganda «ochish» tomonga, ochiqda aylanib «yig'ish» tomonga. */
  .chiroq.ong-panel .ong-panel-yigish {
    padding: 0;
    background: transparent;
    color: var(--sokin);
    border-color: var(--chegara);
  }
  .chiroq.ong-panel .ong-panel-yigish:hover { color: var(--matn); }
  .chiroq.ong-panel .ong-panel-yigish svg { transition: transform 0.15s ease; }
  .chiroq.ong-panel .ong-panel-yigish[aria-expanded="true"] svg { transform: rotate(180deg); }
  .chiroq.ong-panel .ong-panel-tana { padding: 0 0.6rem 1rem; }
  .chiroq.ong-panel .ong-bolim-sarlavha,
  .chiroq.ong-panel .ong-guruh {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 14px 6px 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--siyoh-4);
  }
  .chiroq.ong-panel .ong-bolim-sarlavha::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--feruza);
  }
  .chiroq.ong-panel .ong-guruh {
    padding: 8px 6px 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--siyoh-3);
  }
  .chiroq.ong-panel .ong-bolim-sarlavha[data-son]::after,
  .chiroq.ong-panel .ong-guruh[data-son]::after {
    content: attr(data-son);
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--siyoh-4);
  }
  .chiroq.ong-panel .ong-bolim + .ong-bolim { margin-top: 0.25rem; }
  .chiroq.ong-panel .ong-jumla { margin: 0 6px; color: var(--siyoh-3); font-size: 12.5px; }
  .chiroq.ong-panel .ong-ikonlar { gap: 6px; }
  .chiroq.ong-panel .ong-ikon {
    position: relative;
    gap: 8px;
    padding: 12px 6px 10px;
    background: transparent;
    border: 1px solid var(--chiziq);
    border-radius: 12px;
    color: var(--siyoh-2);
    font-weight: 500;
    text-align: center;
    transition: background-color var(--tez) ease, border-color var(--tez) ease;
  }
  .chiroq.ong-panel button.ong-ikon:hover {
    background: var(--sirt-2);
    border-color: color-mix(in srgb, var(--feruza) 38%, transparent);
  }
  .chiroq.ong-panel .ong-ikon-nom { font-size: 12px; font-weight: 500; }
  /* Harf-kvadrat → kafel: neytral sirt, rang (`data-rang`) faqat
     yupqa tus va harfda. */
  .chiroq.ong-panel .ong-ikon .plitka {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c, var(--siyoh-4)) 12%, var(--sirt));
    border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 30%, var(--chiziq-2));
    color: var(--siyoh);
    font-size: 14px;
    font-weight: 600;
  }
  /* Holat chirog'i — ikonkaning o'ng yuqori burchagida. */
  .chiroq.ong-panel .ong-ikon > .led {
    position: absolute;
    top: 8px;
    right: 8px;
  }
}

/* ═══ KARKAS — `/m`: TEPALIK, NAVIGATOR VARAG'I, O'NG PANEL VARAG'I (SPRINT-75 T512 → 80 T548) ═══
   Suzuvchi tepalik (`header.tepalik.chiroq`), chapdan chiqadigan
   navigator (`dialog#yon-panel.yon-panel.chiroq`) va o'ng «Ish paneli»
   varag'i (`dialog#ong-panel.ong-panel.ong-panel-varaq.chiroq`) keng
   yuzdagi karkas tilida, TELEFON o'lchovida: barmoq nishoni ≥ 44px
   (§5.3), bo'lim qatori 48px. Joyi (o'lcham, flex, `overflow`, xavfsiz
   hudud, `[hidden]`, varaq geometriyasi) — `mobil.css` karkasida; bu
   yerda faqat ko'rinish. FAQAT <1024px: kengroq oynada `/m` o'zi `/` ga
   almashadi (`ozak.js::yuzniMosla`), keng yuzning `aside#ong-panel.
   ong-panel.chiroq` i esa bu qoidalarni olmasin.
   Fayl BOSHIDA, keng yuz blokidan keyin: T512 da `mobil.css` ning
   oxirida turardi — `mobil.css` bu fayldan OLDIN yuklanadi, ya'ni
   pastdagi komponent qoidalaridan (`.kafel`, `.led`, `.yorliq`,
   `.plitka`) oldin; teng aniqlikda ular yutadi, o'sha tartib saqlandi.
   Yon panel pardasi `mobil.css` da (xom palitra). */
@media (max-width: 1023px) {
  /* --- Tepalik — yarim shaffof karta + gradient chegara (shisha emas).
     Sarlavha ko'ringanda qalinlashadi: ostidan o'tayotgan matn uni
     bosmasin (`mobil.css` «TELEFON: TEPALIK SUZADI»). Maska rangi
     faqat alfa uchun — har qanday to'liq rang (`--fon`). --- */
  .chiroq.tepalik {
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: calc(18px + var(--yumaloq));
    background: color-mix(in srgb, var(--panel-qalin) 55%, transparent);
  }
  .chiroq.tepalik::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, var(--chegara-a), transparent 38%, transparent 62%, var(--chegara-b));
    -webkit-mask: linear-gradient(var(--fon) 0 0) content-box, linear-gradient(var(--fon) 0 0);
    mask: linear-gradient(var(--fon) 0 0) content-box, linear-gradient(var(--fon) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .chiroq.tepalik:has(> .suhbat-sarlavha:not([hidden])) {
    background: color-mix(in srgb, var(--panel-qalin) 92%, transparent);
  }
  .chiroq.tepalik .tepalik-tugma {
    background: transparent;
    color: var(--matn);
    border-radius: calc(12px + var(--yumaloq));
  }
  .chiroq.tepalik .tepalik-tugma:active { background: var(--qatlam2); }
  /* Joriy sahifa nishoni — ramka tepalik fonidagi rangda: gamburgerdan
     «kesib chiqqan» halqa. Bo'lim almashganda bir martalik SAKRASH:
     bir xil ikki kadr orasida almashadi (`mobil.js::tabniOch`) — sinf
     nomi o'zgarsa animatsiya boshidan boshlanadi. «Yo'q»/kam-harakatni
     `mobil.css` dagi `*` to'xtatgichi (`!important`) bosadi. */
  .chiroq.tepalik .joriy-sahifa-belgi {
    border-radius: 50%;
    background: var(--asos);
    color: var(--usti);
    border: 2px solid var(--panel-qalin);
    box-shadow: var(--nur);
  }
  .chiroq.tepalik .joriy-sahifa-belgi.ja { animation: joriy-sahifa-belgi-kir-a var(--orta) var(--sakrash) both; }
  .chiroq.tepalik .joriy-sahifa-belgi.jb { animation: joriy-sahifa-belgi-kir-b var(--orta) var(--sakrash) both; }
  :root[data-harakat="yengil"] .chiroq.tepalik .joriy-sahifa-belgi.ja { animation-name: joriy-sahifa-belgi-yengil-a; }
  :root[data-harakat="yengil"] .chiroq.tepalik .joriy-sahifa-belgi.jb { animation-name: joriy-sahifa-belgi-yengil-b; }
  /* Suhbat sarlavhasi gamburger yonida — iz va nom, chiziqsiz. */
  .chiroq.tepalik .suhbat-sarlavha { gap: 2px; min-width: 0; padding-right: 0.5rem; border-bottom: 0; }
  .chiroq.tepalik .suhbat-sarlavha h2 { font-size: 15px; }

  /* --- Navigator varag'i — fon ustidagi karta, o'ng chekkasi yumaloq,
     chapdan kiradi. --- */
  .chiroq.yon-panel {
    border-radius: 0 22px 22px 0;
    color: var(--matn);
    background: var(--sirt);
    border-right: 1px solid var(--chiziq);
    box-shadow: var(--soya-2, none);
  }
  .chiroq.yon-panel[open] { animation: yon-kirish 180ms ease-out; }

  /* Brend — tugma: kafel (orb, gradient) + nom + holat; strelka
     `aria-expanded` dan buriladi. */
  .chiroq.yon-panel .brend-tugma {
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: calc(12px + var(--yumaloq));
    color: var(--matn);
    font: inherit;
    text-align: left;
  }
  .chiroq.yon-panel .brend-tugma:active { background: var(--sirt-2); }
  .chiroq.yon-panel .brend-tugma .avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--feruza), var(--binafsha-chiroq));
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--feruza) 70%, transparent);
  }
  .chiroq.yon-panel .brend-tugma .avatar::before {
    background: var(--tugma-matn);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tugma-matn) 70%, transparent);
  }
  .chiroq.yon-panel .brend-nom {
    color: var(--siyoh);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .chiroq.yon-panel .brend-holat {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--siyoh-4);
  }
  .chiroq.yon-panel .brend-ochil { color: var(--sokin); transition: transform var(--orta) ease; }
  .chiroq.yon-panel .brend-tugma[aria-expanded="true"] .brend-ochil { transform: rotate(180deg); }

  /* Bo'lim yorlig'i — feruza nuqta + MONO · KATTA HARF. */
  .chiroq.yon-panel .nav-bolim {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 12px 0.75rem 6px;
  }
  .chiroq.yon-panel .nav-bolim::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--feruza);
  }
  .chiroq.yon-panel .yon-royxat { padding: 0.75rem 0.6rem 0.25rem; }

  /* Bo'lim bandi — kafel + yozuv; faol band feruza, kafeli gradient.
     Eski LAZER va belgining nuri yo'q. «Yangi suhbat» — amal tugmasi,
     bo'lim emas: belgilangan ko'rinishi yo'q, shrifti qalin (bu qoida
     teng aniqlikda uni bosmasin — `.tab-yangi` da qayta). */
  .chiroq.yon-panel .tab-tugma {
    gap: 12px;
    padding: 6px 0.6rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--siyoh-2);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background-color var(--tez) ease, border-color var(--tez) ease;
  }
  .chiroq.yon-panel .tab-tugma:active { background: var(--sirt-2); }
  @media (hover: hover) {
    .chiroq.yon-panel .tab-tugma:hover { background: var(--sirt-2); border-color: var(--chiziq); }
  }
  .chiroq.yon-panel .tab-tugma svg { width: 18px; height: 18px; }
  .chiroq.yon-panel .tab-tugma:not(.tab-yangi)[aria-selected="true"] {
    color: var(--feruza-matn);
    background: color-mix(in srgb, var(--feruza) 10%, var(--sirt));
    border-color: color-mix(in srgb, var(--feruza) 38%, transparent);
  }
  .chiroq.yon-panel .tab-tugma:not(.tab-yangi)[aria-selected="true"] > .kafel {
    color: var(--tugma-matn);
    border-color: transparent;
    background: var(--tugma-1-fon);
  }
  .chiroq.yon-panel .tab-tugma.tab-yangi { color: var(--feruza-matn); font-weight: 600; }
  .chiroq.yon-panel .tab-yangi > .kafel { border-style: dashed; color: var(--feruza-matn); }
  .chiroq.yon-panel #tab-ish-stoli .kafel > .nishon {
    color: var(--tugma-matn);
    background: var(--tugma-1-fon);
  }

  /* Suhbatlar — yorliq, nom, yoshi mono'da; «✕» doim ko'rinadi. */
  .chiroq.yon-panel .suhbat-blok { padding-top: 0.75rem; }
  .chiroq.yon-panel .suhbat-blok-sarlavha {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 0.25rem;
    /* `.yon-royxat` chekkasi + `.nav-bolim` chekkasi — yorliqlar bir chiziqda. */
    padding: 0 1.35rem;
    font-weight: 400;
  }
  .chiroq.yon-panel .suhbat-blok-sarlavha::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--feruza);
  }
  .chiroq.yon-panel .suhbat-royxat { padding: 0 0.6rem; }
  .chiroq.yon-panel .suhbat-qator { border-radius: calc(12px + var(--yumaloq)); }
  .chiroq.yon-panel .suhbat-och {
    padding: 0.5rem 0.75rem;
    background: transparent;
    color: var(--siyoh-3);
    border: 0;
    border-radius: calc(12px + var(--yumaloq));
    font: inherit;
    text-align: left;
  }
  .chiroq.yon-panel .suhbat-och[aria-current="true"] { background: var(--sirt-3); color: var(--siyoh); font-weight: 600; }
  /* Faqat suhbat oynasi ochiq bo'lganda (keng yuzdagi egizak). */
  .chiroq.yon-panel:has(#tab-suhbat[aria-selected="false"]) .suhbat-och[aria-current="true"] {
    background: transparent;
    font-weight: inherit;
  }
  /* Sichqonli tor oynada (`/m` kompyuterda ham ochiladi) hover'da qator
     sal o'ngga suriladi. */
  @media (hover: hover) {
    .chiroq.yon-panel .suhbat-och { transition: color var(--tez) ease, transform var(--orta) ease; }
    .chiroq.yon-panel .suhbat-qator:hover .suhbat-och { transform: translateX(3px); }
  }
  .chiroq.yon-panel .suhbat-vaqt {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--siyoh-4);
  }
  .chiroq.yon-panel .suhbat-ochir {
    background: transparent;
    color: var(--sokin);
    border: 0;
    border-radius: calc(12px + var(--yumaloq));
    font: inherit;
    font-size: 0.85rem;
  }
  .chiroq.yon-panel .suhbat-ochir.soraldi { color: var(--qizil); }
  .chiroq.yon-panel .suhbat-bosh,
  .chiroq.yon-panel .suhbat-izoh {
    padding: 0.4rem 0.95rem;
    color: var(--sokin);
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* --- O'ng «Ish paneli» varag'i — keng yuzdagi panel ichi bilan bir
     til: yorliq + son, kafel ikonka, holat chirog'i. Qobig'i —
     pastdagi `.chiroq.ong-panel-varaq` (T546). --- */
  .chiroq.ong-panel .ong-panel-sarlavha { color: var(--siyoh); font-size: 15px; }
  .chiroq.ong-panel .ong-bolim-sarlavha,
  .chiroq.ong-panel .ong-guruh {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 14px 6px 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--siyoh-4);
  }
  .chiroq.ong-panel .ong-bolim-sarlavha::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--feruza);
  }
  .chiroq.ong-panel .ong-guruh {
    padding: 8px 6px 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--siyoh-3);
  }
  .chiroq.ong-panel .ong-bolim-sarlavha[data-son]::after,
  .chiroq.ong-panel .ong-guruh[data-son]::after {
    content: attr(data-son);
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--siyoh-4);
  }
  .chiroq.ong-panel .ong-jumla { margin: 0 6px; color: var(--siyoh-3); font-size: 13px; }
  .chiroq.ong-panel .ong-ikon {
    position: relative;
    gap: 8px;
    padding: 12px 6px 10px;
    background: transparent;
    border: 1px solid var(--chiziq);
    border-radius: 12px;
    color: var(--siyoh-2);
    font-weight: 500;
    text-align: center;
  }
  .chiroq.ong-panel button.ong-ikon:active { background: var(--sirt-2); }
  .chiroq.ong-panel .ong-ikon-nom { font-size: 0.8rem; }
  .chiroq.ong-panel .ong-ikon .plitka {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c, var(--siyoh-4)) 12%, var(--sirt));
    border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 30%, var(--chiziq-2));
    color: var(--siyoh);
    font-size: 14px;
    font-weight: 600;
  }
  .chiroq.ong-panel .ong-ikon > .led {
    position: absolute;
    top: 8px;
    right: 8px;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .chiroq.yon-panel[open] { animation: none; }
}
@keyframes yon-kirish {
  from { transform: translateX(-100%); }
  to { transform: none; }
}
@keyframes joriy-sahifa-belgi-kir-a {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 1; transform: none; }
}
@keyframes joriy-sahifa-belgi-kir-b {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 1; transform: none; }
}
@keyframes joriy-sahifa-belgi-yengil-a {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes joriy-sahifa-belgi-yengil-b {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Primitivlar: LED va avatar (SPRINT-33 T233 → SPRINT-80 T544) ───
   `uslub.css`/`mobil.css` dagi kosmik qatlamdan BITTA nusxa bo'lib
   ko'chdi. Iste'molchilari — `ozak.js::ledElementi` (`data-led`),
   `#brend-led`, javob boshi va brend logosi (`.avatar`) — hammasi
   `.chiroq` ostida. Selektor `.chiroq :where(.X)`: o'ziga xoslik eski
   `.X` bilan AYNAN teng, shuning uchun pastdagi `.c-*` va komponent
   qoidalari bugungidek yutadi (shu sabab bu bo'lak `.c-*` dan OLDIN).
   `data-led` rangi — oila tokeni (`.c-*` bilan bir manba); `kutish`,
   `bajarilmoqda`, `toxtatildi` ning oilasi yo'q — `--led-*` qoladi.
   Animatsiyalar (`led-*`, `avatar-*`) byudjetda (`transform`/`opacity`);
   ularni yuz fayllaridagi `*` to'xtatgichi to'xtatadi. */
/* LED (§3.5) — holat = rang + harakat. Lug'at YOPIQ:
     kutish · onlayn · oylash · bajarilmoqda · tayyor · xato · tasdiq ·
     toxtatildi.
   JS faqat `data-led` qo'yadi. Atributsiz `.led` — onlayn rangi,
   harakatsiz (bezak nuqtasi). O'lcham, shakl va yog'du — pastdagi
   `.chiroq .led`; bu yerda faqat rang va halqa uchun `position`. */
.chiroq :where(.led) {
  --c: var(--feruza);
  position: relative;
  flex: none;
}
.chiroq :where(.led)[data-led="kutish"] { --c: var(--led-kutish); }
.chiroq :where(.led)[data-led="onlayn"] { --c: var(--feruza); animation: led-nafas 2.4s ease-in-out infinite; }
.chiroq :where(.led)[data-led="oylash"] { --c: var(--qahrabo); animation: led-nafas 2.4s ease-in-out infinite; }
.chiroq :where(.led)[data-led="bajarilmoqda"] { --c: var(--led-bajar); animation: led-chaqna 1.1s steps(2, jump-none) infinite; }
.chiroq :where(.led)[data-led="tayyor"] { --c: var(--yalpiz); animation: led-bir-chaqna 650ms var(--chiqish) 1; }
.chiroq :where(.led)[data-led="xato"] { --c: var(--anor); animation: led-chaqna 1.1s steps(2, jump-none) infinite; }
.chiroq :where(.led)[data-led="tasdiq"] { --c: var(--binafsha-chiroq); }
.chiroq :where(.led)[data-led="toxtatildi"] { --c: var(--led-toxtadi); }
/* Halqa — o'ylash va tasdiq: tarqaluvchi doira (`transform: scale`). */
.chiroq :where(.led)[data-led="oylash"]::after,
.chiroq :where(.led)[data-led="tasdiq"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  animation: led-halqa 1.8s ease-out infinite;
}
@keyframes led-nafas {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@keyframes led-chaqna {
  from { opacity: 1; }
  to { opacity: 0.25; }
}
@keyframes led-halqa {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}
@keyframes led-bir-chaqna {
  0% { opacity: 0.3; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* Avatar — «yadro + yoy» (§3.6). Sokin holatda ANIMATSIYA YO'Q;
   `.jonli` (oxirgi javob) — bitta `opacity` nafasi, `.oylayapti` —
   bitta yoy `transform: rotate`. Blur, filter, conic YO'Q. Egasi
   `data-oila` bilan (tiklangan javobda ham — egasi tarixda,
   `tarix.rs::Xabar::egasi`); atributsiz — neytral (egasi noma'lum:
   ism va rang TAXMIN QILINMAYDI). O'lchami `--avatar-o`. */
.chiroq :where(.avatar) {
  --c: var(--agent-boshqa);
  position: relative;
  flex: none;
  width: var(--avatar-o, 32px);
  height: var(--avatar-o, 32px);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 16%, transparent), transparent 68%);
}
.chiroq :where(.avatar)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 28%;
  margin: -14% 0 0 -14%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px var(--c), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
}
.chiroq :where(.avatar)[data-oila="mirzo"] { --c: var(--agent-mirzo); }
.chiroq :where(.avatar)[data-oila="claude"] { --c: var(--agent-claude); }
.chiroq :where(.avatar)[data-oila="chatgpt"] { --c: var(--agent-chatgpt); }
.chiroq :where(.avatar)[data-oila="perplexity"] { --c: var(--agent-perplexity); }
.chiroq :where(.avatar).jonli::before { animation: avatar-yadro 2.8s ease-in-out infinite; }
.chiroq :where(.avatar).oylayapti::after {
  content: "";
  position: absolute;
  inset: -3.5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--c);
  border-right-color: color-mix(in srgb, var(--c) 35%, transparent);
  animation: avatar-yoy 0.9s linear infinite;
}
@keyframes avatar-yadro {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes avatar-yoy { to { transform: rotate(360deg); } }

/* Brend logosi — `mirzod` bilan aloqa va «so'rov havoda» (SPRINT-64
   §3.4, T436; `ozak.js::logoHolati`). HARAKATSIZ: brend avatari qotgan
   (§3.6 — bir vaqtda bitta avatar harakatda), holatni halqa aytadi.
   Atributsiz — neytral (hali hech kim aytmagan).
     bor  — to'liq halqa;
     yoq  — xato rangi, UZUQ halqa (rangsiz ham o'qiladi);
     band — o'ylash rangi, tashqi ikkinchi halqa. */
.chiroq :where(.avatar)[data-aloqa="bor"] { border-color: color-mix(in srgb, var(--c) 85%, transparent); }
.chiroq :where(.avatar)[data-aloqa="yoq"] { --c: var(--anor); border-style: dashed; }
.chiroq :where(.avatar)[data-aloqa="band"] { --c: var(--qahrabo); }
.chiroq :where(.avatar)[data-aloqa="band"]::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
}

/* Tong — oq sirtda chiroq «linza ichidagi» nuqta: yorug' dog', rangli
   halqa va pastga tushgan rangli yog'du («Qog'oz», 2026-10-08). Tong'da
   `--sirt`/`--siyoh` = `tong_sirt`/`tong_matn`. */
:root[data-tema-joriy="tong"] .chiroq :where(.led) {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 30%, var(--sirt)), var(--c) 62%);
  box-shadow:
    0 0 0 2.5px color-mix(in srgb, var(--c) 26%, transparent),
    0 0 9px 1px color-mix(in srgb, var(--c) 80%, transparent),
    0 3px 8px color-mix(in srgb, var(--c) 55%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--siyoh) 25%, transparent);
}

/* ─── Rang oilalari: --c (chiroq) + --cm (matn) ─── */
.chiroq .c-feruza { --c: var(--feruza); --cm: var(--feruza-matn); }
.chiroq .c-yalpiz { --c: var(--yalpiz); --cm: var(--yalpiz-matn); }
.chiroq .c-qahrabo { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .c-anor { --c: var(--anor); --cm: var(--anor-matn); }
/* Binafshaning matn shakli yo'q: siyoh tomon tortiladi — Tong'da
   to'qlashadi, tunda yorishadi. */
.chiroq .c-binafsha { --c: var(--binafsha-chiroq); --cm: color-mix(in srgb, var(--binafsha-chiroq) 70%, var(--siyoh)); }
.chiroq .c-kul { --c: var(--siyoh-4); --cm: var(--siyoh-3); }

/* ─── Yorliq: MONO · KATTA HARF ─── */
.chiroq .yorliq {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--siyoh-4);
}

/* ─── Holat chirog'i ─── */
.chiroq .led {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: var(--c, var(--siyoh-4));
  box-shadow: 0 0 6px var(--c, var(--siyoh-4)), 0 0 12px color-mix(in srgb, var(--c, var(--siyoh-4)) 45%, transparent);
}
/* Ma'lumotsiz chiroq kulrang (§4.6) — oila berilmasa ham shu. */
.chiroq .led.kul,
.chiroq .led.c-kul { box-shadow: none; opacity: 0.6; }
.chiroq .led.puls { animation: chiroq-puls 2s ease-in-out infinite; }
@keyframes chiroq-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* To'xtatgichlar fayldagi HAR cheksiz animatsiyani sanaydi (pastda
   `.qadamlar li.joriy::after` va kutish pufagining chirog'i ham). */
:root[data-harakat="yoq"] .chiroq .led.puls,
:root[data-harakat="yoq"] .chiroq .qadamlar li.joriy::after,
:root[data-harakat="yoq"] .chiroq .xabar.kutish > .pufak::before { animation: none; }
:root[data-yashirin] .chiroq .led.puls,
:root[data-yashirin] .chiroq .qadamlar li.joriy::after,
:root[data-yashirin] .chiroq .xabar.kutish > .pufak::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .chiroq .led.puls,
  .chiroq .qadamlar li.joriy::after,
  .chiroq .xabar.kutish > .pufak::before { animation: none; }
}

/* ─── Holat yorlig'i ─── */
.chiroq .pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--cm, var(--siyoh-3));
  background: color-mix(in srgb, var(--c, var(--siyoh-4)) 11%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 32%, transparent);
}
.chiroq .pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--siyoh-4)); }

/* ─── Karta ─── */
.chiroq .karta {
  background: var(--sirt);
  border: 1px solid var(--chiziq);
  border-radius: 16px;
  box-shadow: var(--soya-2, none);
}

/* ─── Ikonka kafeli va son nishoni ─── */
.chiroq .kafel {
  position: relative; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--siyoh-3);
  background: var(--sirt); border: 1px solid var(--chiziq-2);
}
.chiroq .kafel.faol,
.chiroq [aria-current="page"] > .kafel {
  color: var(--tugma-matn); border-color: transparent;
  background: var(--tugma-1-fon);
}
.chiroq .nishon {
  position: absolute; top: -6px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--tugma-matn);
  background: var(--anor); border: 2px solid var(--sirt);
}
.chiroq .kafel .nishon { top: -6px; right: -6px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }

/* ─── Raqam kartalari ─── */
.chiroq .kpi-qator {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--chiziq);
  border: 1px solid var(--chiziq); border-radius: 16px; overflow: hidden;
  box-shadow: var(--soya-2, none);
}
.chiroq .kpi { position: relative; background: var(--sirt); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chiroq .kpi .yorliq { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.chiroq .kpi-qiymat { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--siyoh); font-variant-numeric: tabular-nums; }
.chiroq .kpi-qiymat.rangli { color: var(--cm, var(--siyoh)); }
.chiroq .kpi-qiymat small { font-size: 13px; font-weight: 400; color: var(--siyoh-4); letter-spacing: 0; margin-left: 4px; }
.chiroq .kpi-tag { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--siyoh-3); }
@media (max-width: 1100px) {
  .chiroq .kpi-qator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .chiroq .kpi-qator { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Holat filtri ─── */
.chiroq .holat-tablar {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; width: fit-content; max-width: 100%;
  background: var(--sirt); border: 1px solid var(--chiziq); border-radius: 12px; box-shadow: var(--soya-1, none);
}
.chiroq .holat-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--siyoh-3); white-space: nowrap; cursor: pointer;
}
.chiroq .holat-tab:hover { color: var(--siyoh); }
.chiroq .holat-tab[aria-selected="true"],
.chiroq .holat-tab[aria-pressed="true"] { color: var(--siyoh); background: var(--sirt-3); box-shadow: inset 0 0 0 1px var(--chiziq-2); }
.chiroq .holat-tab .son { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--siyoh) 6%, transparent); }

/* ─── Sana chiplari, qidiruv, klaviatura belgisi ─── */
.chiroq .chip {
  padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--siyoh-3); background: var(--sirt); border: 1px solid var(--chiziq-2); cursor: pointer;
}
.chiroq .chip:hover { color: var(--siyoh); }
.chiroq .chip[aria-pressed="true"] {
  color: var(--feruza-matn);
  background: color-mix(in srgb, var(--feruza) 11%, var(--sirt));
  border-color: color-mix(in srgb, var(--feruza) 40%, transparent);
}
.chiroq .qidiruv {
  display: flex; align-items: center; gap: 10px; flex: 0 1 340px; min-width: 0;
  padding: 7px 8px 7px 12px; border-radius: 10px;
  background: var(--sirt); border: 1px solid var(--chiziq-2); color: var(--siyoh-4);
}
.chiroq .qidiruv:focus-within { border-color: color-mix(in srgb, var(--feruza) 50%, transparent); }
.chiroq .qidiruv input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--siyoh); }
.chiroq .qidiruv input::placeholder { color: var(--siyoh-4); }
.chiroq kbd { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: var(--sirt-3); border: 1px solid var(--chiziq); color: var(--siyoh-3); white-space: nowrap; }

/* ─── Tugmalar ─── */
.chiroq .tugma-1,
.chiroq .tugma-2 {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: transform var(--tez), box-shadow var(--tez), border-color var(--tez);
}
/* Fon va yozuv — kontrasti qulflangan juftlik
   (`palitra.rs::the_primary_button_gradient_carries_its_label`). */
.chiroq .tugma-1 {
  border: 0; color: var(--tugma-matn);
  background: var(--tugma-1-fon);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--feruza) 80%, transparent);
}
.chiroq .tugma-1:hover { transform: translateY(-1px); }
.chiroq .tugma-2 { border: 1px solid var(--chiziq-2); background: var(--sirt); color: var(--siyoh-2); box-shadow: var(--soya-1, none); }
.chiroq .tugma-2:hover { border-color: color-mix(in srgb, var(--feruza) 45%, transparent); color: var(--siyoh); }

/* ─── Iz va ikki rangli sarlavha ─── */
.chiroq .iz { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chiroq .iz span:last-of-type { color: var(--siyoh-2); }
/* Gradient `--tugma-1-fon` uchlari bilan: ikkalasi ham matn shakli. */
.chiroq h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--feruza-matn), var(--feruza-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══ SUHBAT KOMPONENTLARI — SPRINT-76 §4.4, T515 ═══
   Manba — `dizayn/chiroq/maket.html` 424–523. Sahifalarga sinfni
   T516–T519 qo'yadi. Eski `.kiritish`/`.pufak` (uslub fayllarida) bilan
   nom to'qnashuvini `.chiroq` qamrovi hal qiladi. */

/* ─── Kiritish kartasi ─── */
.chiroq .kiritish {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px 16px;
  background: var(--sirt); border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--feruza) 22%, var(--chiziq));
  box-shadow: var(--soya-2, none);
  transition: border-color var(--tez), box-shadow var(--tez);
}
.chiroq .kiritish:focus-within {
  border-color: color-mix(in srgb, var(--feruza) 55%, transparent);
  box-shadow: var(--soya-2, 0 0 0 0 transparent), 0 0 0 4px color-mix(in srgb, var(--feruza) 12%, transparent);
}
.chiroq .kiritish textarea {
  min-height: 26px; padding: 0; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--siyoh);
}
.chiroq .kiritish textarea::placeholder { color: var(--siyoh-4); }
/* `.kiritish-asboblar` — keng yuz qatorining eski nomi (ikki yuz bir
   razmetka, `tugun_sahifasi.rs`), til bir. */
.chiroq .kiritish-qator,
.chiroq .kiritish-asboblar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

/* «+» va yuborish doiralari. `.asosiy` fon/yozuvi — `.tugma-1` bilan
   bitta juftlik (`--tugma-1-fon` + `--tugma-matn`, kontrasti qulflangan). */
.chiroq .doira {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--chiziq-2); background: var(--sirt); color: var(--siyoh-3);
  transition: color var(--tez), border-color var(--tez);
}
.chiroq .doira:hover { color: var(--siyoh); border-color: color-mix(in srgb, var(--feruza) 45%, transparent); }
.chiroq .doira.asosiy {
  border: 0; color: var(--tugma-matn);
  background: var(--tugma-1-fon);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--feruza) 80%, transparent);
}
.chiroq .doira.asosiy:hover { color: var(--tugma-matn); }
.chiroq .doira:disabled { cursor: default; opacity: 0.5; }

/* ─── Xabar boshi va odam pufagi ─── */
/* Avatar — `.kafel` (rangi `.kafel.faol` dan), ism, `small` — mono
   `HH:MM · yo'l`. */
.chiroq .xabar-bosh {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--siyoh);
}
.chiroq .xabar-bosh .kafel { width: 28px; height: 28px; border-radius: 9px; }
.chiroq .xabar-bosh small {
  font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--siyoh-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.chiroq .pufak-odam,
.chiroq .xabar.foydalanuvchi > .pufak {
  max-width: min(520px, 85%); margin-left: auto; padding: 10px 14px;
  border-radius: 14px 14px 4px 14px; overflow-wrap: anywhere;
  background: var(--sirt-3); border: 1px solid var(--chiziq); color: var(--siyoh);
}
.chiroq .pufak-odam small {
  display: block; margin-top: 4px; text-align: right;
  font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-4);
}

/* ─── Bosqich zanjiri ─── */
/* Holatlar `xomBosqichChizigi` niki: `otdi` · `joriy` · `kutadi` (sinfsiz
   ham shu) · `kerakmas`. Joriy qadam rangi `--c` dan (`li` ga `.c-*`),
   berilmasa feruza — «ketyapti»; odam kutayotgan qadamga `.c-qahrabo`.
   Nuqta (`::before`) yorug'ligi QOTGAN; tirik — faqat halqa (`::after`)
   va u faqat `opacity` ni o'zgartiradi (harakat byudjeti). */
.chiroq .qadamlar {
  list-style: none; margin: 0; padding: 8px 0 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
}
.chiroq .qadamlar li {
  position: relative; min-width: 0; padding-top: 12px;
  border-top: 2px solid var(--chiziq-2); color: var(--siyoh-3);
}
.chiroq .qadamlar li::before,
.chiroq .qadamlar li.joriy::after {
  content: ""; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
}
.chiroq .qadamlar li::before { background: var(--sirt); border: 2px solid var(--chiziq-2); }
.chiroq .qadamlar b {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--siyoh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chiroq .qadamlar small { font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-4); }
.chiroq .qadamlar li.otdi { border-top-color: var(--yalpiz); }
.chiroq .qadamlar li.otdi::before { background: var(--yalpiz); border-color: var(--yalpiz); }
.chiroq .qadamlar li.joriy { border-top-color: var(--c, var(--feruza)); }
.chiroq .qadamlar li.joriy::before {
  background: var(--c, var(--feruza)); border-color: var(--c, var(--feruza));
  box-shadow: 0 0 8px var(--c, var(--feruza));
}
.chiroq .qadamlar li.joriy::after {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--feruza)) 30%, transparent);
  animation: chiroq-puls 2s ease-in-out infinite;
}
.chiroq .qadamlar li.joriy small { color: var(--cm, var(--feruza-matn)); }
.chiroq .qadamlar li.kutadi b { color: var(--siyoh-3); }
.chiroq .qadamlar li.kerakmas { border-top-style: dashed; }
.chiroq .qadamlar li.kerakmas b { color: var(--siyoh-4); font-weight: 400; text-decoration: line-through; }

/* ─── Oyna (odam qadami; 77 dagi oynalar ham) ─── */
.chiroq.oyna {
  padding: 0; border-radius: 16px;
  background: var(--sirt); color: var(--siyoh-2);
  border: 1px solid var(--chiziq-2);
  box-shadow: var(--soya-panel, none);
}
/* `display` FAQAT `[open]` da — `dialog:not([open])` bostirilmaydi
   (`tests/yashirish_qoidasi.rs`). */
.chiroq.oyna[open] { display: flex; flex-direction: column; }
.chiroq.oyna::backdrop { background: color-mix(in srgb, var(--siyoh) 35%, transparent); }
.chiroq .oyna-bosh {
  display: flex; align-items: flex-start; gap: 12px; flex: 0 0 auto;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--chiziq);
}
.chiroq .oyna-bosh h2,
.chiroq .oyna-bosh h3 { flex: 1; min-width: 0; margin: 4px 0 0; font-size: 16px; font-weight: 600; color: var(--siyoh); letter-spacing: -0.01em; }
.chiroq .oyna-tana {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
}
.chiroq .oyna-oyoq {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex: 0 0 auto;
  padding: 12px 18px; border-top: 1px solid var(--chiziq); background: var(--sirt-2);
  border-radius: 0 0 16px 16px;
}

/* ─── Tez kirish kartasi (bo'sh ekran) ─── */
/* Rang oilasi `.c-*` bilan: yorliq chirog'i `--c`, harakat yozuvi `--cm`. */
.chiroq .tez-el {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--sirt); color: var(--siyoh-2);
  border: 1px solid var(--chiziq); border-radius: 14px; box-shadow: var(--soya-1, none);
  transition: border-color var(--tez), transform var(--tez);
}
.chiroq .tez-el:hover { border-color: color-mix(in srgb, var(--c, var(--feruza)) 45%, transparent); transform: translateY(-1px); }
.chiroq .tez-el .yorliq { display: flex; align-items: center; gap: 8px; }
.chiroq .tez-el .raqam {
  font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  color: var(--siyoh); font-variant-numeric: tabular-nums;
}
.chiroq .tez-el p,
.chiroq .tez-el .tez-izoh { margin: 0; font-size: 12.5px; color: var(--siyoh-3); }
.chiroq .tez-el .harakat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 500; color: var(--cm, var(--feruza-matn));
}

/* ─── Tanlov katakchasi ─── */
/* `<button aria-pressed>`; ichida rasm (`img`), `span` — mono nom,
   `.belgilandi` — burchakdagi belgi. */
.chiroq .rasm {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%; padding: 0; overflow: hidden;
  display: flex; align-items: flex-end; cursor: pointer; font: inherit;
  border-radius: 10px; border: 1px solid var(--chiziq-2); background: var(--sirt-2);
}
.chiroq .rasm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chiroq .rasm span {
  position: relative; width: 100%; padding: 4px 6px; text-align: left;
  font-family: var(--mono); font-size: 9.5px; color: var(--siyoh-3);
  background: color-mix(in srgb, var(--sirt) 85%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chiroq .rasm[aria-pressed="true"] {
  border-color: var(--feruza);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--feruza) 40%, transparent);
}
.chiroq .rasm .belgilandi {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tugma-matn); background: var(--tugma-1-fon);
}
.chiroq .rasm[aria-pressed="false"] .belgilandi { background: var(--sirt); border: 1px solid var(--chiziq-2); color: transparent; }
.chiroq .rasm .belgilandi svg { width: 12px; height: 12px; stroke-width: 3; }

/* ═══ KENG YUZ SUHBATI — SPRINT-76 §4.5, T516 ═══
   Razmetka va JS eski nomlarda (`.xabar`, `.pufak`, `.avatar`, `.imzo`,
   `.kutish` … — ikki yuz bir chizuvchi, `chat.js`/`ozak.js`); til shu
   yerda, `.chiroq` qamrovida. Joylashuv (en, markaz, bo'sh ekran) —
   `uslub.css`. Vaqt — `li[data-vaqt]` (`chat.js::xabarVaqti`), psevdo-
   element bilan: yangi DOM elementi yo'q, eski tildagi `/m` uni ko'rmaydi. */

/* ─── Sarlavha ─── */
.chiroq .suhbat-sarlavha { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--chiziq); }
.chiroq .suhbat-sarlavha h2 {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--siyoh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chiroq .suhbat-meta { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); overflow-wrap: anywhere; }

/* ─── Xabar ─── */
.chiroq .xabar { display: flex; flex-direction: column; min-width: 0; }
.chiroq .pufak { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Odam — o'ngda pufak (`.pufak-odam` tili), ostida mono vaqt. */
.chiroq .xabar.foydalanuvchi { align-self: stretch; align-items: flex-end; }
.chiroq .xabar.foydalanuvchi[data-vaqt]::after {
  content: attr(data-vaqt); margin-top: 4px;
  font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-4);
}
/* Mirzo/AI — matn pufaksiz, o'qish eni ≤ 65ch. */
.chiroq .xabar.mirzo { align-self: stretch; align-items: flex-start; color: var(--siyoh-2); }
.chiroq .xabar.mirzo > .pufak { max-width: 65ch; font-size: 14.5px; line-height: 1.65; }
.chiroq .xabar.eski-xabar > .pufak { opacity: 0.8; }

/* Javob boshi — avatar kafel · ism · mono vaqt (`ozak.js::javobBoshiniChiz`
   avatar va imzoni `li` boshiga qo'yadi). Qolgan bolalar (pufak, turkum,
   natija, tugun holati) ism ustunidan boshlanadi. */
.chiroq .xabar.javob {
  display: grid; grid-template-columns: 28px auto minmax(0, 1fr);
  align-items: center; column-gap: 8px; row-gap: 6px;
}
.chiroq .xabar.javob > * { grid-column: 2 / -1; justify-self: start; }
.chiroq .xabar.javob > .avatar { grid-column: 1; grid-row: 1; }
.chiroq .xabar.javob > .imzo { grid-column: 2; grid-row: 1; }
.chiroq .xabar.javob[data-vaqt]::before {
  content: attr(data-vaqt); grid-column: 3; grid-row: 1;
  font-family: var(--mono); font-size: 11px; color: var(--siyoh-4);
}
/* Avatar — kafel; nuqta rangi egasining `--c` si (`.avatar[data-oila]`),
   Mirzo — `.kafel.faol` juftligi. Harakatsiz: kutishni pufak chirog'i
   aytadi (yoy va nafas o'chadi). */
.chiroq .xabar > .avatar {
  width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid var(--chiziq-2); background: var(--sirt); box-shadow: none;
}
.chiroq .xabar > .avatar::before { width: 8px; height: 8px; margin: -4px 0 0 -4px; animation: none; }
.chiroq .xabar > .avatar.oylayapti::after { content: none; }
.chiroq .xabar > .avatar[data-oila="mirzo"] { border-color: transparent; background: var(--tugma-1-fon); }
.chiroq .xabar > .avatar[data-oila="mirzo"]::before {
  background: var(--tugma-matn); box-shadow: 0 0 8px color-mix(in srgb, var(--tugma-matn) 70%, transparent);
}
.chiroq .xabar > .imzo {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--siyoh);
}
.chiroq .imzo-yol { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--siyoh-4); }

/* ─── Holatlar: rang oilasi bilan tasma, ton va mono sarlavha ─── */
/* Sarlavha CSS da: u holatning NOMI, javob matni emas (tarixga
   yozilmaydi). Savol va muddat — qahrabo: xato EMAS (ochiq qaror /
   natija noma'lum). */
.chiroq .xabar.mirzo.xato { --c: var(--anor); --cm: var(--anor-matn); }
.chiroq .xabar.mirzo.savol,
.chiroq .xabar.mirzo.muddat { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .xabar.mirzo.xato > .pufak,
.chiroq .xabar.mirzo.savol > .pufak,
.chiroq .xabar.mirzo.muddat > .pufak {
  padding: 8px 12px 9px; border-left: 2px solid var(--c); border-radius: 4px 10px 10px 4px;
  background: color-mix(in srgb, var(--c) 8%, transparent);
}
.chiroq .xabar.mirzo.xato > .pufak::before,
.chiroq .xabar.mirzo.savol > .pufak::before,
.chiroq .xabar.mirzo.muddat > .pufak::before {
  display: block; margin-bottom: 4px; white-space: normal;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm);
}
.chiroq .xabar.mirzo.xato > .pufak::before { content: "Xato"; }
.chiroq .xabar.mirzo.savol > .pufak::before { content: "Tasdiq kerak"; }
.chiroq .xabar.mirzo.muddat > .pufak::before { content: "Ogohlantirish"; }
/* Kutish — chiroq puls + «yozmoqda… N s» (`chat.js::kutishXabar`). */
.chiroq .xabar.kutish > .pufak {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--siyoh-3);
}
.chiroq .xabar.kutish > .pufak::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--feruza); box-shadow: 0 0 6px var(--feruza);
  animation: chiroq-puls 2s ease-in-out infinite;
}
/* Mono yorliqlar — turkum (`err_kind · manba · HTTP`), tugun holati. */
.chiroq .turkum,
.chiroq .xabar .tugun-holati { margin: 2px 0 0; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }
/* Xizmat qatori — javob emas; vazifa/versiya xabari o'z matni bilan. */
.chiroq .xabar.navbat-izoh > .pufak { font-size: 13px; color: var(--siyoh-3); }
.chiroq .xabar.navbat-izoh:not(.vazifa-xabar):not(.versiya-xabar) > .pufak { font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-4); }
/* Eski suhbat ajratkichi — ikki yon chiziq, mono yorliq o'rtada. */
.chiroq .xabar.tarix-ajratkich > .pufak {
  align-self: stretch; max-width: none; display: flex; align-items: center; gap: 10px;
  white-space: normal; text-align: center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.chiroq .xabar.tarix-ajratkich > .pufak::before,
.chiroq .xabar.tarix-ajratkich > .pufak::after { content: ""; flex: 1; min-width: 1.5rem; height: 1px; background: var(--chiziq-2); }
/* Band radi — odam pufagi ostida, «Qayta yubor» bilan (`chat.js`). */
.chiroq .band-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin-top: 6px; }
.chiroq .band-rad-matn { margin: 0; font-size: 12.5px; color: var(--siyoh-3); }

/* ─── Kiritish ichi: tanlangan vazifa, fayl chiplari, doiralar ─── */
.chiroq .vazifa-tanlov { display: flex; flex-direction: column; gap: 4px; }
.chiroq .vazifa-tanlov-bosh {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%;
  padding: 3px 4px 3px 10px; border-radius: 9px; font-size: 12.5px; color: var(--siyoh-2);
  background: color-mix(in srgb, var(--c, var(--binafsha-chiroq)) 10%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c, var(--binafsha-chiroq)) 40%, transparent);
}
.chiroq .vazifa-tanlov.kutyapti { --c: var(--qahrabo); }
.chiroq .vazifa-tanlov.toliq { --c: var(--yalpiz); }
.chiroq .vazifa-tanlov-nom,
.chiroq .vazifa-tanlov-papka-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--siyoh); }
.chiroq .vazifa-tanlov-nom { font-weight: 600; }
.chiroq .vazifa-tanlov-holat { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); white-space: nowrap; }
.chiroq .vazifa-tanlov-izoh { margin: 0; font-size: 12px; color: var(--qahrabo-matn); }
.chiroq .vazifa-tanlov-papka {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%;
  padding: 2px 3px 2px 9px; border-radius: 9px; font-size: 12px; color: var(--siyoh-3);
  background: var(--sirt); border: 1px solid var(--chiziq-2);
}
.chiroq .fayl-royxati { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
/* Fayl chipi — `.chip` tili; holatini chegara aytadi (yuklanmoqda —
   uzuq, tayyor — yalpiz, xato — anor). Cheksiz nafas yo'q. */
.chiroq .fayl-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 4px 4px 10px; border-radius: 9px; font-size: 12.5px; color: var(--siyoh-2);
  background: var(--sirt); border: 1px solid var(--chiziq-2);
}
.chiroq .fayl-chip-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chiroq a.fayl-chip-nom { color: inherit; text-decoration: none; }
.chiroq a.fayl-chip-nom:hover,
.chiroq a.fayl-chip-nom:focus-visible { text-decoration: underline; }
.chiroq .fayl-chip-yon { font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-4); white-space: nowrap; }
.chiroq .fayl-chip.fayl-yuklanmoqda { border-style: dashed; }
.chiroq .fayl-chip.fayl-tayyor { border-color: color-mix(in srgb, var(--yalpiz) 45%, var(--chiziq-2)); }
.chiroq .fayl-chip.fayl-xato { border-color: var(--anor); }
.chiroq .fayl-chip.fayl-xato .fayl-chip-yon { color: var(--anor-matn); }
/* Chipdagi «✕» va natijaning yuklash tugmasi — kichik doira. */
.chiroq .fayl-ochir,
.chiroq .natija-yukla {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer; font-size: 12px; line-height: 1;
  border: 1px solid transparent; background: transparent; color: var(--siyoh-3);
}
.chiroq .fayl-ochir:hover { color: var(--siyoh); background: var(--sirt-3); }
.chiroq .natija-yukla { color: var(--feruza-matn); border-color: color-mix(in srgb, var(--feruza) 40%, transparent); }
.chiroq .natija-yukla:hover:not(:disabled) { background: color-mix(in srgb, var(--feruza) 10%, transparent); }
.chiroq .natija-yukla:disabled { opacity: 0.6; cursor: default; }
/* Maydon bo'sh (va fayl yo'q) — yuborish so'nik: yuboriladigan narsa yo'q. */
.chiroq .kiritish:not(.fayl-bor):has(textarea:placeholder-shown) .doira.asosiy {
  color: var(--siyoh-4); background: var(--sirt-3); box-shadow: none;
}
/* To'xtatish — yuborish o'rnida; kvadrat ikona (`toxtatildi`, to'la). */
.chiroq .doira.bekor-tugma { color: var(--siyoh); }
.chiroq .bekor-tugma svg { width: 30px; height: 30px; }
.chiroq .bekor-tugma svg path { fill: currentColor; }

/* ─── Natija fayli — karta (`fayl.js::natijaChip`, `.olja`) ─── */
/* Tushish, halqa va uchqun — o'ylash bezaklari bilan birga ketdi (§7-7). */
.chiroq .natija-royxati { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; max-width: 100%; }
.chiroq .natija-royxati .olja {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ikon nom tugma" "ikon yon tugma";
  align-items: center; column-gap: 10px; row-gap: 2px;
  max-width: min(100%, 26rem); padding: 8px 8px 8px 10px; border-radius: 12px;
}
.chiroq .olja-ikon {
  grid-area: ikon; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  color: var(--yalpiz-matn); background: color-mix(in srgb, var(--yalpiz) 12%, var(--sirt));
}
.chiroq .olja .fayl-chip-nom { grid-area: nom; font-weight: 500; color: var(--siyoh); }
.chiroq .olja .fayl-chip-yon { grid-area: yon; font-variant-numeric: tabular-nums; }
.chiroq .olja .natija-yukla { grid-area: tugma; width: 30px; height: 30px; }
.chiroq .olja-halqa,
.chiroq .uchqun { display: none; }

/* ─── Jarayon kartasi (SPRINT-76 §4.6, T517) ───
   `karta.js` ning BITTA chizuvchisi, ikki joy (suhbat va «Xizmatlar»),
   ikki yuz. `chiroq` sinfi kartaning O'ZIDA (`karta.js::
   KARTA_ILDIZ_SINFI`): «Xizmatlar» va `/m` suhbati hali eski tilda, ota
   `.chiroq` yo'q — shuning uchun ildiz selektori `.chiroq.jarayon`
   (oynadagi `.chiroq.oyna` kabi). «✕» — birinchi bola (DOM), joyi bosh
   qatorining o'ng cheti (grid). Holat rangi — `.c-*` oilalari, ma'no
   tugma rangi (`data-amal`) — turkumdan, `uslub.css`/`mobil.css` da.
   Joylashuv: keng oyna jadvali (ustun eni, M211/M234) — `uslub.css`,
   `/m` da jadval → karta (`data-ustun`, T512 naqshi) — `mobil.css`. */
.chiroq.jarayon {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 10px;
  min-width: 0; padding: 16px 18px; color: var(--siyoh-2);
  background: var(--sirt); border: 1px solid var(--chiziq); border-radius: 16px; box-shadow: var(--soya-2, none);
}
.chiroq.jarayon > * { grid-column: 1 / -1; min-width: 0; }
.chiroq.jarayon > .tugun-panel-bosh { grid-column: 1; grid-row: 1; }
.chiroq.jarayon .blok-yop {
  position: static; z-index: auto; order: 0; align-self: center; flex: none;
  display: grid; place-items: center; width: 32px; height: 32px; min-width: 0; margin: 0; padding: 0;
  border: 1px solid var(--chiziq-2); border-radius: 9px; background: var(--sirt); color: var(--siyoh-3); cursor: pointer;
}
.chiroq.jarayon .blok-yop:hover { color: var(--siyoh); }
.chiroq.jarayon > .blok-yop { grid-column: 2; grid-row: 1; }
.chiroq.jarayon .tugma-1,
.chiroq.jarayon .tugma-2 { padding: 7px 13px; }
.chiroq.jarayon .tugma-1:disabled,
.chiroq.jarayon .tugma-2:disabled { opacity: 0.5; cursor: default; transform: none; }
/* Suhbatda karta mirzo xabarining butun enini oladi. */
.chiroq .xabar.jarayon-karta { align-items: stretch; }

/* Bosh: kafel + nom va mono `tugun · jarayon` + holat pilli + «Yangilash». */
.chiroq .tugun-panel-bosh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.chiroq .tugun-panel-bosh .kafel {
  width: 36px; height: 36px; color: var(--feruza-matn);
  background: color-mix(in srgb, var(--feruza) 12%, var(--sirt));
  border-color: color-mix(in srgb, var(--feruza) 30%, transparent);
}
.chiroq .jarayon-nom { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chiroq .jarayon-nom .panel-sarlavha {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--siyoh); overflow-wrap: anywhere;
}
.chiroq .jarayon-meta { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); overflow-wrap: anywhere; }
.chiroq .jarayon-holat:empty { display: none; }

/* Holat satri (so'ralmoqda, qulf sababi, `msg`) va natija qatori
   (javob so'zma-so'z; `ok` yalpiz, `xato` anor, `savol` qahrabo). */
.chiroq .tugun-panel-holat { margin: 0; font-size: 12.5px; color: var(--siyoh-3); overflow-wrap: anywhere; }
.chiroq .tugun-panel-holat.sayt-xato { color: var(--anor-matn); }
.chiroq .tugun-panel-tana { min-width: 0; overflow-x: auto; }
.chiroq .tugun-panel-natija {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--siyoh-2);
  background: var(--sirt-2); border: 1px solid var(--chiziq); border-left: 3px solid var(--c, var(--chiziq-2));
}
.chiroq .tugun-panel-natija[data-tur="ok"] { --c: var(--yalpiz); }
.chiroq .tugun-panel-natija[data-tur="xato"] { --c: var(--anor); color: var(--anor-matn); }
.chiroq .tugun-panel-natija[data-tur="savol"] { --c: var(--qahrabo); color: var(--qahrabo-matn); }

/* Panel jadvali, xom fayllar jadvali va Monitoring jurnal jadvali
   (SPRINT-79 §4.2, `ish-stoli.js::jadval`) — bitta til: mono sarlavha,
   chiziq bilan ajratilgan qatorlar, sichqoncha ostida `--sirt-2`.
   Monitoringda aktor nomi `th[scope="row"]` — `td` tilida (pastda). */
.chiroq .tugun-panel-jadval,
.chiroq .xom-jadval,
.chiroq .boshqaruv-jadval { width: 100%; border-collapse: collapse; font-size: 13px; }
.chiroq .tugun-panel-jadval th,
.chiroq .xom-jadval th,
.chiroq .boshqaruv-jadval th {
  padding: 8px 10px; border-bottom: 1px solid var(--chiziq); text-align: left; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--siyoh-4);
}
.chiroq .tugun-panel-jadval td,
.chiroq .xom-jadval td,
.chiroq .boshqaruv-jadval td,
.chiroq .boshqaruv-jadval th[scope="row"] {
  padding: 8px 10px; border-bottom: 1px solid var(--chiziq); vertical-align: top;
  color: var(--siyoh-2); overflow-wrap: break-word;
}
.chiroq .tugun-panel-jadval tbody tr:last-child td,
.chiroq .xom-jadval tbody tr:last-child td,
.chiroq .boshqaruv-jadval tbody tr:last-child td,
.chiroq .boshqaruv-jadval tbody tr:last-child th { border-bottom: 0; }
.chiroq .tugun-panel-jadval tbody tr:hover,
.chiroq .xom-jadval tbody tr:hover,
.chiroq .boshqaruv-jadval tbody tr:hover { background: var(--sirt-2); }
.chiroq .tugun-panel-jadval .son { text-align: right; font-variant-numeric: tabular-nums; }
.chiroq .tugun-panel-jadval td.nom { color: var(--siyoh); font-weight: 500; }

/* Rasmli ko'rib chiqish kartalari (SPRINT-56 §3.11) — shubhali so'z
   `<mark>` qahrabo foni bilan, matn rangi o'zgarmaydi. */
.chiroq .tugun-panel-kartalar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chiroq .tugun-panel-karta {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 12px 14px;
  background: var(--sirt-2); border: 1px solid var(--chiziq); border-radius: 12px;
}
.chiroq .tugun-panel-karta:focus-visible { outline: 2px solid var(--feruza); outline-offset: 2px; }
.chiroq .tugun-panel-rasm { display: block; max-width: 100%; height: auto; border: 1px solid var(--chiziq); border-radius: 10px; background: var(--sirt); }
.chiroq .tugun-panel-karta-tana { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chiroq .tugun-panel-uzun { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--siyoh); }
.chiroq .tugun-panel-uzun mark {
  color: inherit; border-radius: 3px;
  background: color-mix(in srgb, var(--qahrabo) 28%, transparent); box-shadow: inset 0 -2px 0 var(--qahrabo);
}
.chiroq .tugun-panel-maydon { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.chiroq .tugun-panel-maydon[data-ustun]::before { content: attr(data-ustun) ": "; color: var(--siyoh-4); }
.chiroq .tugun-panel-karta .tugun-panel-amallar { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }

/* Xom ko'rgich: asboblar, guruhlar ro'yxati, tanlash rejimi. */
.chiroq .xom-asboblar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chiroq .xom-guruh { font-weight: 600; color: var(--siyoh); overflow-wrap: anywhere; }
.chiroq .xom-royxat { list-style: none; margin: 0; padding: 0; border: 1px solid var(--chiziq); border-radius: 12px; overflow: hidden; }
.chiroq .xom-royxat li + li { border-top: 1px solid var(--chiziq); }
.chiroq .xom-qator {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chiroq .xom-qator svg { flex: none; color: var(--siyoh-4); }
.chiroq .xom-qator[aria-pressed="true"] svg { color: var(--feruza-matn); }
.chiroq .xom-qator:focus-visible { outline: 2px solid var(--feruza); outline-offset: 2px; border-radius: 6px; }
.chiroq .xom-royxat .xom-qator { min-height: 44px; padding: 10px 14px; }
.chiroq .xom-royxat .xom-qator:hover { background: var(--sirt-2); }
.chiroq .xom-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--siyoh); font-weight: 500; }
.chiroq .xom-izoh { flex: none; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); font-variant-numeric: tabular-nums; }
.chiroq .xom-tanlash {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--feruza) 45%, transparent);
  background: color-mix(in srgb, var(--feruza) 7%, var(--sirt)); color: var(--feruza-matn);
}
.chiroq .xom-tanlash p { flex: 1 1 auto; margin: 0; font-size: 13px; }
.chiroq .xom-royxat.xom-tanlanmoqda { border-color: color-mix(in srgb, var(--feruza) 45%, transparent); }
.chiroq .xom-tanlanmoqda .xom-qator svg { color: var(--feruza-matn); }

/* Guruh ichi: «Hammasi» + bosqich tugmalari, taklif, fayllar jadvali. */
.chiroq .xom-tanlov-satri .xom-hammasi { margin-right: auto; }
.chiroq .xom-hammasi { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--siyoh-2); cursor: pointer; }
.chiroq .xom-soni { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); font-variant-numeric: tabular-nums; }
.chiroq .xom-katak { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--feruza); cursor: pointer; }
.chiroq .xom-taklif { margin: 0; font-size: 12.5px; color: var(--siyoh-3); }
.chiroq .xom-havola { padding: 0; border: 0; background: none; font: inherit; color: var(--feruza-matn); text-decoration: underline; cursor: pointer; }
.chiroq .xom-bosqich-tugmalari { display: flex; flex-wrap: wrap; gap: 6px; }
.chiroq .xom-bosqich-raqam {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid currentColor; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.chiroq .xom-bosqich-soni:not(:empty) {
  padding: 0 6px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
  background: var(--tugma-1-fon); color: var(--tugma-matn);
}
.chiroq .xom-bosqich-tugma[data-bor="ha"] { border-color: color-mix(in srgb, var(--feruza) 50%, transparent); color: var(--siyoh); }
.chiroq .xom-jadval td { vertical-align: middle; }
.chiroq .xom-jadval tbody tr:has(.xom-katak:checked) { background: color-mix(in srgb, var(--feruza) 7%, transparent); }
.chiroq .xom-jadval tbody tr[data-holat="takror"] { background: color-mix(in srgb, var(--qahrabo) 9%, transparent); }
.chiroq .xom-jadval td.son { font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-3); font-variant-numeric: tabular-nums; }
.chiroq .xom-jadval .qadamlar { padding-top: 6px; gap: 4px; }
.chiroq .xom-jadval .qadamlar b { font-size: 11.5px; }
.chiroq .xom-matn { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.chiroq .xom-chiplar { display: flex; flex-wrap: wrap; gap: 4px; }
.chiroq .xom-chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-3); background: var(--sirt-2); border: 1px solid var(--chiziq);
}
.chiroq .xom-chip[data-tur="keyingi"] { color: var(--feruza-matn); border-color: color-mix(in srgb, var(--feruza) 40%, transparent); }
.chiroq .xom-chip[data-tur="xato"] { color: var(--anor-matn); border-color: color-mix(in srgb, var(--anor) 40%, transparent); }
.chiroq .xom-chip[data-tur="takror"] { color: var(--qahrabo-matn); border-color: color-mix(in srgb, var(--qahrabo) 40%, transparent); }
.chiroq .xom-yana { display: flex; margin: 10px auto 0; }

/* «Bilimlardan qidirish» (2026-10-20) — jarayon kartasining ichi
   (`karta.js` «BILIMLARDAN QIDIRISH»): guruh katakchalari, so'z, natija —
   har guruh bo'limi, ichida akkordeon (`<details>`), docx qatori
   akkordeondan tashqarida. Katakcha — `.xom-katak`, son — `.xom-soni`. */
.chiroq .qidiruv-karta { display: flex; flex-direction: column; gap: 12px; }
.chiroq .qidiruv-tanlov { margin: 0; padding: 10px 14px 12px; border: 1px solid var(--chiziq); border-radius: 12px; min-width: 0; }
.chiroq .qidiruv-tanlov legend { padding: 0 6px; font-size: 12px; color: var(--siyoh-3); }
.chiroq .qidiruv-katak { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; font-size: 13px; color: var(--siyoh-2); cursor: pointer; }
.chiroq .qidiruv-katak-nom { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chiroq .qidiruv-hammasi { font-weight: 600; color: var(--siyoh); }
.chiroq .qidiruv-guruhlar {
  list-style: none; margin: 4px 0 0; padding: 6px 0 0; border-top: 1px solid var(--chiziq);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 14px;
}
.chiroq .qidiruv-kirish { display: flex; flex-wrap: wrap; gap: 8px; }
.chiroq .qidiruv-soz {
  flex: 1 1 200px; min-width: 0; padding: 8px 12px; border: 1px solid var(--chiziq); border-radius: 10px;
  background: var(--sirt); color: var(--siyoh); font: inherit; font-size: 14px;
}
.chiroq .qidiruv-soz:focus-visible { outline: 2px solid var(--feruza); outline-offset: 1px; }
.chiroq .qidiruv-natija { display: flex; flex-direction: column; gap: 10px; }
.chiroq .qidiruv-natija:empty { display: none; }
.chiroq .qidiruv-guruh { border: 1px solid var(--chiziq); border-radius: 12px; overflow: hidden; }
.chiroq .qidiruv-sarlavha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px 10px 30px;
  position: relative; list-style: none; cursor: pointer;
}
.chiroq .qidiruv-sarlavha::-webkit-details-marker { display: none; }
/* Ochilish belgisi — chegara burchagi (glif yoki emoji emas). */
.chiroq summary.qidiruv-sarlavha::before {
  content: ""; position: absolute; left: 13px; top: 16px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--siyoh-4); border-bottom: 1.5px solid var(--siyoh-4); transform: rotate(-45deg);
}
.chiroq .qidiruv-akkordeon[open] > summary.qidiruv-sarlavha::before { transform: rotate(45deg); top: 14px; }
.chiroq .qidiruv-sarlavha:hover { background: var(--sirt-2); }
.chiroq .qidiruv-sarlavha:focus-visible { outline: 2px solid var(--feruza); outline-offset: -2px; }
.chiroq .qidiruv-bosh { padding-left: 14px; cursor: default; }
.chiroq .qidiruv-bosh:hover { background: none; }
.chiroq .qidiruv-nom { font-weight: 600; color: var(--siyoh); overflow-wrap: anywhere; }
.chiroq .qidiruv-soni { font-family: var(--mono); font-size: 11.5px; color: var(--feruza-matn); font-variant-numeric: tabular-nums; }
.chiroq .qidiruv-izoh { flex: 1 1 100%; font-size: 12px; color: var(--siyoh-4); }
.chiroq .qidiruv-parchalar { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--chiziq); }
.chiroq .qidiruv-parcha { padding: 10px 14px; }
.chiroq .qidiruv-parcha + .qidiruv-parcha { border-top: 1px solid var(--chiziq); }
.chiroq .qidiruv-matn { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--siyoh-2); overflow-wrap: anywhere; }
.chiroq .qidiruv-matn mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--feruza) 24%, transparent); color: inherit; }
.chiroq .qidiruv-manba { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); overflow-wrap: anywhere; }
.chiroq .qidiruv-docx { padding: 8px 14px; border-top: 1px solid var(--chiziq); font-size: 12.5px; color: var(--siyoh-3); }
.chiroq .qidiruv-docx[data-holat="xato"] { color: var(--anor-matn); }
.chiroq .qidiruv-docx .natija-royxati { margin: 0; }
.chiroq .qidiruv-yoq { margin: 0; font-size: 12.5px; color: var(--siyoh-3); }

/* ═══ ODAM QADAMI OYNALARI — SPRINT-76 §4.7, T518 ═══
   `#tasdiq-dialog`, `#muharrir-dialog`, `#tanlov-qadam-dialog` — ikki
   yuzda bir razmetka, `chiroq oyna` oynaning o'zida. Bosh: yorliq +
   sarlavha (`.oyna-nom`) + «✕»; tana skroll qiladi; oyoqda sanoq/muddat
   chapda, tugmalar o'ngda. Geometriya (en, `/m` varag'i, barmoq nishoni)
   — `uslub.css`/`mobil.css`. Xulq (`dastur.js`/`tasdiq.js`, `muharrir.js`,
   `tanlov.js`) o'zgarmagan — bu yerda faqat til. */
.chiroq .oyna-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chiroq .oyna-nom h2,
.chiroq .oyna-nom .tasdiq-savol {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--siyoh);
  letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.chiroq.oyna .blok-yop {
  position: static; z-index: auto; order: 0; align-self: flex-start; flex: none;
  display: grid; place-items: center; width: 32px; height: 32px; min-width: 0; margin: 0; padding: 0;
  border: 1px solid var(--chiziq-2); border-radius: 9px; background: var(--sirt); color: var(--siyoh-3); cursor: pointer;
}
.chiroq.oyna .blok-yop:hover { color: var(--siyoh); }
.chiroq.oyna .blok-yop:disabled { opacity: 0.5; cursor: default; }
.chiroq.oyna .izoh { margin: 0; font-size: 13px; line-height: 1.5; color: var(--siyoh-3); overflow-wrap: anywhere; }
.chiroq.oyna .sayt-xato { color: var(--anor-matn); }
.chiroq.oyna .tugma-1:disabled,
.chiroq.oyna .tugma-2:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Oyoq: holat (mono sanoq, muddat) chapda, tugmalar o'ngda. */
.chiroq .muharrir-holat,
.chiroq .tanlov-qadam-holat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 auto 0 0; min-width: 0;
}
.chiroq .muharrir-sanoq,
.chiroq .tanlov-qadam-sanoq,
.chiroq .muharrir-yorliq {
  font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); font-variant-numeric: tabular-nums;
}
.chiroq .tanlov-qadam-tanlandi { --c: var(--feruza); --cm: var(--feruza-matn); font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.chiroq .tanlov-qadam-tanlandi:empty { display: none; }
/* Muddat sanog'i — mono, oldida qahrabo chiroq: vaqt o'tyapti, odam
   kutilmoqda. Statik (cheksiz animatsiya byudjeti band). */
.chiroq .tasdiq-ttl,
.chiroq .muharrir-ttl,
.chiroq .tanlov-qadam-ttl {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 0 0;
  font-family: var(--mono); font-size: 11px; color: var(--qahrabo-matn); font-variant-numeric: tabular-nums;
}
.chiroq .tasdiq-ttl::before,
.chiroq .muharrir-ttl::before,
.chiroq .tanlov-qadam-ttl::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--qahrabo); box-shadow: 0 0 6px var(--qahrabo);
}

/* Tasdiq: savol boshda, javob maydoni tanada. */
.chiroq .tasdiq-surat { font-family: var(--mono); font-size: 12px; }
.chiroq .tasdiq-maydon {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--siyoh); background: var(--sirt);
  border: 1px solid var(--chiziq-2); outline: 0;
}
.chiroq .tasdiq-maydon:focus-visible { border-color: var(--feruza); box-shadow: 0 0 0 3px color-mix(in srgb, var(--feruza) 25%, transparent); }

/* Muharrir: har blok — karta qatori (rasm + matn). */
.chiroq .muharrir-bloklar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chiroq .muharrir-blok {
  display: grid; gap: 10px; min-width: 0; padding: 12px 14px;
  background: var(--sirt-2); border: 1px solid var(--chiziq); border-radius: 12px;
}
.chiroq .muharrir-blok[data-rad] {
  border-color: color-mix(in srgb, var(--anor) 45%, transparent);
  background: color-mix(in srgb, var(--anor) 6%, var(--sirt-2));
}
.chiroq .muharrir-rasm { display: block; max-width: 100%; height: auto; border: 1px solid var(--chiziq); border-radius: 10px; background: var(--sirt); }
.chiroq .muharrir-blok-tana { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chiroq .muharrir-sozlar { margin: 0; font-size: 12.5px; color: var(--siyoh-3); overflow-wrap: anywhere; }
.chiroq .muharrir-sozlar mark {
  color: inherit; border-radius: 3px;
  background: color-mix(in srgb, var(--qahrabo) 28%, transparent); box-shadow: inset 0 -2px 0 var(--qahrabo);
}
.chiroq .muharrir-matn {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.55; color: var(--siyoh); background: var(--sirt);
  border: 1px solid var(--chiziq-2); outline: 0;
}
.chiroq .muharrir-matn:focus-visible { border-color: var(--feruza); box-shadow: 0 0 0 3px color-mix(in srgb, var(--feruza) 25%, transparent); }
.chiroq .muharrir-blok[data-rad] .muharrir-matn { opacity: 0.55; text-decoration: line-through; }
.chiroq .muharrir-rad { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12.5px; color: var(--siyoh-3); cursor: pointer; }
.chiroq .muharrir-rad input { margin: 0; accent-color: var(--anor); }
.chiroq .muharrir-blok[data-rad] .muharrir-rad { color: var(--anor-matn); }

/* Tanlov: katakchalar `.rasm` tilida. Semantika bugungidek — `<label>`
   ichida haqiqiy `checkbox` (burchakda, rangsiz ham o'qiladi); belgi
   holati `li[data-belgili]` dan (`aria-pressed` o'rnida). */
.chiroq .tanlov-qadam-forma { display: flex; flex-direction: column; gap: 10px; }
.chiroq .tanlov-qadam-hammasi {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px;
  font-size: 13px; color: var(--siyoh-2); cursor: pointer;
  border: 1px solid var(--chiziq-2); border-radius: 999px; background: var(--sirt);
}
.chiroq .tanlov-qadam-hammasi input { margin: 0; accent-color: var(--feruza); }
.chiroq .tanlov-qadam-hammasi:has(input:checked) {
  color: var(--feruza-matn); border-color: color-mix(in srgb, var(--feruza) 50%, transparent);
  background: color-mix(in srgb, var(--feruza) 8%, var(--sirt));
}
.chiroq .tanlov-qadam-variantlar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.chiroq .tanlov-qadam-variant .rasm { width: 100%; }
.chiroq [data-belgili] > .rasm {
  border-color: var(--feruza);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--feruza) 40%, transparent);
}
.chiroq .rasm:has(input:focus-visible) { outline: 2px solid var(--feruza); outline-offset: 2px; }
.chiroq .rasm:has(input:disabled) { cursor: default; }
.chiroq .rasm .tanlov-qadam-quti {
  position: absolute; top: 6px; right: 6px; z-index: 1; width: 18px; height: 18px; margin: 0;
  accent-color: var(--feruza); cursor: inherit;
}
.chiroq .rasm .tanlov-qadam-rasm { object-fit: contain; background: var(--sirt); }
.chiroq .rasm .tanlov-qadam-rasmsiz {
  position: absolute; inset: 0 0 24px; display: grid; place-items: center; padding: 0;
  background: none; white-space: normal; text-align: center; font-size: 10.5px; color: var(--siyoh-4);
}

/* ═══ XIZMATLAR VA AGENTLAR — SPRINT-77 §4.3, T521 ═══
   Manba — `dizayn/chiroq/xizmatlar.html` («SPRINT-77» bo'limi).
   Sahifaga sinfni T522–T525 qo'yadi; bu yerda faqat lug'at.

   Maket tokeni → rol tokeni: `--feruza`, `--yalpiz`, `--qahrabo`,
   `--anor`, `--siyoh*`, `--sirt*`, `--chiziq*`, `--*-matn` — nomi bir;
   `--binafsha` → `--binafsha-chiroq`; `--soya-kichik` → `--soya-1`;
   maketdagi qo'lda yozilgan soyalar → `--soya-*` (tunda `none`).

   Maketning `<table>` i (agentlar, saytlar) bu yerda `ul.qatorlar` >
   `li.qator` — §7-5: chizuvchi (`agentQatoriniChiz`) uch joyda `li`
   qaytaradi va ichida kalit FORMASI bor. Ustunlar `--ustunlar` dan
   (ajdodda — `ul` yoki uning otasi; JS `style.setProperty` bilan ham,
   CSP faqat `style=""` atributini to'sadi). `/m` da qator karta bo'ladi:
   ustun nomi `[data-ustun]::before` dan (T512 naqshi), birinchi ustun
   (nom) yorliqsiz, butun en. */

/* ─── Bo'lim boshi ─── */
.chiroq .bolim-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px;
  flex-wrap: wrap; min-width: 0;
}
.chiroq .bolim-bosh h2,
.chiroq .bolim-bosh h3 {
  margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--siyoh);
}
.chiroq .bolim-bosh h2 small,
.chiroq .bolim-bosh h3 small { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--siyoh-4); }
.chiroq .bolim-bosh-amal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* «Xizmatlar va Agentlar» sahifasi boshi (T522): iz + amal qatori, KPI.
   Ikki yuzda bir razmetka — joylashuv shu yerda. */
.chiroq .xizmatlar-bosh { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 6px; min-width: 0; }

/* ─── Xizmat kartasi (`li.xizmat.karta` + `.c-*`) ─── */
/* To'r — kartalar `minmax(330px, 1fr)`; paneli ochiq karta (panel
   kartaning ostida, T517 jarayon kartasi) butun enni oladi. */
.chiroq .xizmatlar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px;
}
.chiroq .xizmatlar > [data-panel="ochiq"] { grid-column: 1 / -1; }
.chiroq .xizmat { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.chiroq .xizmat-bosh { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.chiroq .xizmat-kafel {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  color: var(--cm, var(--siyoh-3));
  background: color-mix(in srgb, var(--c, var(--siyoh-4)) 12%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 30%, transparent);
}
.chiroq .xizmat-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chiroq .xizmat-nom b { font-size: 14px; font-weight: 600; color: var(--siyoh); overflow-wrap: anywhere; }
.chiroq .xizmat-nom small { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); overflow-wrap: anywhere; }
.chiroq .xizmat details { border-top: 1px dashed var(--chiziq-2); padding-top: 10px; }
.chiroq .xizmat summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--siyoh-3);
}
.chiroq .xizmat summary::-webkit-details-marker { display: none; }
.chiroq .xizmat summary:hover { color: var(--siyoh); }
.chiroq .xizmat summary svg { flex: none; transition: transform var(--tez); }
.chiroq .xizmat details[open] > summary svg { transform: rotate(90deg); }
.chiroq .xizmat-oyoq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* Huquq bandlari — mono; «bor» qahrabo nuqta, «yo'q» kul. */
.chiroq .huquq { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chiroq .huquq li {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-3);
  background: var(--sirt-2); border: 1px solid var(--chiziq);
}
.chiroq .huquq li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--siyoh-4); }
.chiroq .huquq li.bor { color: var(--siyoh-2); }
.chiroq .huquq li.bor::before { background: var(--qahrabo); }

/* «Amallar (N)» — nom (mono) va izoh ikki ustunda. */
.chiroq .amal-royxat { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chiroq .amal-royxat li {
  display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); gap: 2px 12px;
  padding: 6px 8px; border-radius: 8px; font-size: 12px; color: var(--siyoh-3); background: var(--sirt-2);
}
.chiroq .amal-royxat code,
.chiroq .amal-royxat .mono { font-family: var(--mono); font-size: 11px; color: var(--siyoh); overflow-wrap: anywhere; }
.chiroq .amal-royxat small { grid-column: 2; font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-4); }

/* Buzuq sababi — otaning so'zi aynan, anor. */
.chiroq .sabab {
  margin: 0; padding: 9px 12px; border-radius: 10px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--anor-matn); background: color-mix(in srgb, var(--anor) 8%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--anor) 28%, transparent);
}

/* ─── Ro'yxat-jadval ─── */
.chiroq .qatorlar { list-style: none; margin: 0; padding: 0; min-width: 0; }
.chiroq .qatorlar-bosh,
.chiroq .qator {
  display: grid; grid-template-columns: var(--ustunlar, minmax(0, 1fr));
  align-items: center; gap: 8px 12px; padding: 12px;
}
.chiroq .qatorlar-bosh {
  padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--chiziq);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--siyoh-4); white-space: nowrap;
}
/* `margin: 0` — eski yalang'och `.qator` (`mobil.css`, qo'shish oynasi
   tugmalar qatori) `margin-top` i ro'yxat qatoriga oqmasin (T532). */
.chiroq .qator {
  margin: 0; font-size: 13px; color: var(--siyoh-2); border-bottom: 1px solid var(--chiziq);
  transition: background-color var(--tez);
}
.chiroq .qator:last-child { border-bottom: 0; }
.chiroq .qator:hover { background: var(--sirt-2); }
.chiroq .qatorlar-bosh > *,
.chiroq .qator > * { min-width: 0; }
.chiroq .qator-keng { grid-column: 1 / -1; }
/* Guruh sarlavhasi — mono yorliq, oldida feruza nuqta. */
.chiroq .qator-guruh {
  display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px;
  border-bottom: 1px solid var(--chiziq);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siyoh-4);
}
.chiroq .qator-guruh::before { content: ""; width: 4px; height: 4px; border-radius: 50%; flex: none; background: var(--feruza); }
/* Birinchi ustun: nom + mono tafsilot (+ iboralar). */
.chiroq .qator-nom b { display: block; font-weight: 500; color: var(--siyoh); overflow-wrap: anywhere; }
.chiroq .qator-nom small { display: block; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); overflow-wrap: anywhere; }
.chiroq .qator-nom .ibora { color: var(--feruza-matn); }
/* Ikonka amallar — nomi `aria-label`/`title` da (§7-7). */
.chiroq .qator .amallar { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.chiroq .qator .amallar button {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--siyoh-4);
  transition: color var(--tez), background-color var(--tez);
}
.chiroq .qator .amallar button:hover:not(:disabled) { background: var(--sirt-3); color: var(--siyoh); }
.chiroq .qator .amallar button.asosiy { color: var(--feruza-matn); }
.chiroq .qator .amallar button.xavf:hover:not(:disabled) { color: var(--anor-matn); }
.chiroq .qator .amallar button:disabled { opacity: 0.38; cursor: not-allowed; }
.chiroq .qator .amallar button:focus-visible { outline: 2px solid var(--feruza); outline-offset: 1px; }

/* Agentlar jadvali (T523) — olti ustun (`ozak.js::AGENT_USTUNLAR`);
   amallar ustuni qat'iy: to'rt ikonka sig'adi, `fr` lar qatordan
   qatorga bir xil bo'linadi. */
.chiroq .agent-qatorlar { --ustunlar: minmax(0, 2.2fr) 92px minmax(0, 1.1fr) 104px minmax(0, 1fr) 124px; }
/* Saytlarga kirish (T524) — besh ustun (`ozak.js::SAYT_USTUNLAR`); ikki
   guruh (katalog, boshqa) bitta kartada, ustunlari bir xil. Login/Rejim
   mono; «Parol» katagidagi `.kalit` uzun matnda o'raladi; qulf belgisi —
   tugma (Sozlamalar ombor tabiga). Tekshiruv javobi kartaning ostida. */
.chiroq .sayt-bolim { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-width: 0; }
.chiroq .sayt-qatorlar { --ustunlar: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 100px; }
.chiroq .sayt-karta > div:not([hidden]) + div > .sayt-qatorlar { border-top: 1px solid var(--chiziq); }
.chiroq .sayt-qatorlar .qator > [data-ustun="Login"],
.chiroq .sayt-qatorlar .qator > [data-ustun="Rejim"] { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.chiroq .sayt-qatorlar .kalit { white-space: normal; align-items: baseline; overflow-wrap: anywhere; }
.chiroq .sayt-qatorlar button.kalit {
  padding: 0; border: 0; background: none; font: inherit; font-family: var(--mono); font-size: 11px;
  color: var(--cm, var(--siyoh-3)); text-align: left; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.chiroq .sayt-qatorlar button.kalit:focus-visible { outline: 2px solid var(--feruza); outline-offset: 2px; border-radius: 4px; }
.chiroq .sayt-qatorlar .sayt-kirish { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--siyoh-3); overflow-wrap: anywhere; }
.chiroq .sayt-kirish .led[data-led="tayyor"] { --c: var(--yalpiz); margin-right: 6px; }
.chiroq .sayt-kirish .led[data-led="xato"] { --c: var(--anor); margin-right: 6px; }
.chiroq .sayt-karta > .ota-javob { margin: 12px; }
.chiroq .qator .yoq-katak { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }
.chiroq .qator-keng > * + * { margin-top: 6px; }

/* ─── Belgi, kalit, kunlik hisob ─── */
.chiroq .belgilar { display: flex; flex-wrap: wrap; gap: 4px; }
.chiroq .belgi-chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--cm, var(--siyoh-3));
  background: color-mix(in srgb, var(--c, var(--siyoh-4)) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 28%, transparent);
}
/* Kalit holati — led (`.c-*` dan) + mono matn (`agentKalitHolati`). */
.chiroq .kalit {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; color: var(--cm, var(--siyoh-3));
}
/* `n / m` + chiziqcha; chiziqcha eni JS dan (`span.style.width`). */
.chiroq .hisob-katak { min-width: 96px; }
.chiroq .hisob-katak .mono {
  display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 11px;
  color: var(--cm, var(--siyoh-3)); font-variant-numeric: tabular-nums;
}
.chiroq .chiziqcha { height: 4px; border-radius: 2px; overflow: hidden; background: var(--sirt-3); }
.chiroq .chiziqcha span { display: block; height: 100%; max-width: 100%; border-radius: 2px; background: var(--c, var(--feruza)); }

/* ─── Yopiq bo'lim (`details.yopiq.karta`) — tizim agentlari ─── */
.chiroq .yopiq { padding: 0; overflow: hidden; }
.chiroq .yopiq > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px;
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--siyoh);
}
.chiroq .yopiq > summary::-webkit-details-marker { display: none; }
.chiroq .yopiq > summary small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--siyoh-4); }
.chiroq .yopiq > summary svg { flex: none; color: var(--siyoh-4); transition: transform var(--tez); }
.chiroq .yopiq[open] > summary svg { transform: rotate(90deg); }
.chiroq .yopiq[open] > summary { border-bottom: 1px solid var(--chiziq); }

/* ─── Otaning javobi — so'zma-so'z, yuz xulosa qo'shmaydi ─── */
.chiroq .ota-javob {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--siyoh-2); background: var(--sirt-2); border: 1px solid var(--chiziq);
}
.chiroq .ota-javob .yorliq { display: block; margin-bottom: 4px; }

/* ─── Forma maydoni ─── */
/* `div.maydon` > yorliq (`label`) + boshqaruv + izoh (`p`). */
.chiroq .maydon { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Sahifa karkasining eski `.maydon` i (`uslub.css`, keng oynada
   `grid-column: 2; grid-row: 3`) shu nomni oladi — grid ichidagi maydonlar
   (`.meta-uch`, `.maydon-juft`, kanvas tugun maydonlari) bitta katakka
   tushardi (T537 ko'rigi). Joylashuv to'rniki. */
.chiroq .maydon { grid-column: auto; grid-row: auto; }
.chiroq .maydon > label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siyoh-4);
}
.chiroq .maydon input:not([type="checkbox"]):not([type="radio"]),
.chiroq .maydon select,
.chiroq .maydon textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px;
  font: inherit; font-size: 13.5px; color: var(--siyoh); background: var(--sirt);
  border: 1px solid var(--chiziq-2); outline: 0;
  transition: border-color var(--tez), box-shadow var(--tez);
}
.chiroq .maydon textarea { resize: vertical; line-height: 1.5; }
.chiroq .maydon input::placeholder,
.chiroq .maydon textarea::placeholder { color: var(--siyoh-4); }
.chiroq .maydon input:focus-visible,
.chiroq .maydon select:focus-visible,
.chiroq .maydon textarea:focus-visible {
  border-color: color-mix(in srgb, var(--feruza) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--feruza) 14%, transparent);
}
.chiroq .maydon input.mono,
.chiroq .maydon textarea.mono { font-family: var(--mono); font-size: 12.5px; }
.chiroq .maydon > p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--siyoh-4); overflow-wrap: anywhere; }
.chiroq .maydon-juft { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Segmentli tanlov — 78 uchun lug'at (§7-10: 77 da daraja `select`). */
.chiroq .daraja {
  display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 3px;
  border-radius: 10px; background: var(--sirt-3); border: 1px solid var(--chiziq);
}
.chiroq .daraja button {
  padding: 5px 12px; border: 0; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--siyoh-3); background: transparent;
}
.chiroq .daraja button[aria-pressed="true"] { color: var(--siyoh); background: var(--sirt); box-shadow: var(--soya-1, none); }
/* Amal turkumi satri. `.chiroq .turkum` suhbatda boshqa narsa (mono
   `err_kind · manba`, T516) — forma turkumi oyna ichida. */
.chiroq.oyna .turkum {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 8px 12px; border-radius: 10px;
  font-family: inherit; font-size: 12.5px; color: var(--siyoh-3);
  background: color-mix(in srgb, var(--feruza) 7%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--feruza) 22%, transparent);
}
.chiroq.oyna .turkum code,
.chiroq.oyna .turkum .mono { font-family: var(--mono); font-size: 11px; color: var(--feruza-matn); }

/* ═══ XIZMATLAR OYNALARI — SPRINT-77 §4.8, T525 ═══
   Sakkiz oyna (veb xizmat, sinov, sayt, sayt o'chirish, panel tahriri,
   agent qo'shish/sozlash/o'chirish) — `chiroq oyna`, `id` va xulq
   o'zgarmagan. Forma `.oyna-tana` ichida, asosiy tugma `.oyna-oyoq` da
   (`form="…"` bilan): oyna ostidagi agentlar ro'yxatining tugmalari
   formaga kirmasin. Geometriya — `uslub.css`/`mobil.css`. */
.chiroq.oyna form { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
/* Sayt oynasi (T526 — `uslub.css`/`mobil.css` dagi ikki nusxadan):
   langar nomzodlari — belgisiz ustun, har biri butun enli tugma, matn
   chapda (uzun nomzod markazda «sakramasin»); «Qo'lda tahrirlash»
   yig'ma bandi — 44px barmoq nishoni; TOML parchasi O'RALMAYDI (o'ralgan
   TOML ni nusxalab bo'lmaydi). */
.chiroq.oyna .sayt-olcha-royxat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chiroq.oyna .sayt-olcha-royxat button { width: 100%; text-align: left; }
.chiroq.oyna .sayt-qolda { border-top: 1px solid var(--chiziq); }
.chiroq.oyna .sayt-qolda summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--siyoh-3);
}
.chiroq.oyna .sayt-qolda summary::-webkit-details-marker { display: none; }
.chiroq.oyna .sayt-qolda summary:hover { color: var(--siyoh); }
.chiroq.oyna .sayt-qolda[open] summary .sayt-qolda-ochil { transform: rotate(180deg); }
.chiroq.oyna .qoshish-yol,
.chiroq.oyna .qoshish-namuna {
  padding: 8px 10px; border-radius: 10px; background: var(--sirt-2); border: 1px solid var(--chiziq);
  font-family: var(--mono); font-size: 12px; color: var(--siyoh-2);
}
/* Yo'l uzun bo'lsa o'raladi — qisqartirish «aynan qaysi fayl» javobini
   yo'q qilardi (eski `.qoshish-*` asosidan, T546). */
.chiroq.oyna .qoshish-yol { margin: 0; overflow-wrap: anywhere; }
.chiroq.oyna .qoshish-namuna { margin: 0 0 12px; overflow-x: auto; white-space: pre; }
/* Sxema chizadigan guruh (`sxemaFormasiniChiz`): daraja, sozlama,
   qadamlar. Bo'sh guruh joy olmaydi; ikkinchi to'la guruh chiziq bilan
   ajraladi. */
.chiroq .maydon-guruh { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.chiroq .maydon-guruh:empty { display: none; }
.chiroq .maydon-guruh:not(:empty) ~ .maydon-guruh:not(:empty) { padding-top: 12px; border-top: 1px solid var(--chiziq); }
.chiroq .maydon .izoh { font-size: 12px; }
/* O'chiriladigan narsaning nomi — mono, so'zma-so'z. */
.chiroq .oyna-nishon {
  margin: 0; padding: 8px 12px; border-radius: 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--siyoh); overflow-wrap: anywhere;
  background: var(--sirt-2); border: 1px solid var(--chiziq);
}
/* Qaytarilmas amal — anor. Tong'da `--anor-matn` (to'q) ustida oq yozuv,
   tunda yorqin anor ustida to'q yozuv: `--tugma-matn` juftligi o'sha. */
.chiroq .tugma-1.xavf {
  background: var(--anor-matn);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--anor) 80%, transparent);
}

@media (max-width: 1023px) {
  /* `/m`: qator → karta. Ustun nomlari qatori yo'q — har katak o'z
     yorlig'ini `data-ustun` dan oladi; nom va keng bolalar butun en. */
  .chiroq .qatorlar-bosh { display: none; }
  .chiroq .qator { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 12px 16px; }
  .chiroq .qator > :first-child,
  .chiroq .qator > .amallar { grid-column: 1 / -1; }
  .chiroq .qator > [data-ustun]:not(:first-child):not(.amallar)::before {
    content: attr(data-ustun); display: block; margin-bottom: 3px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siyoh-4);
  }
  .chiroq .qator .amallar { justify-content: flex-start; }
  .chiroq .qator-guruh { padding: 14px 16px 6px; }
  .chiroq .maydon-juft { grid-template-columns: minmax(0, 1fr); }
}

/* `[hidden]` darvozasi — `display: grid` UA ning `[hidden]` ini
   bostirardi (`tests/yashirish_qoidasi.rs`); nishonni JS yashiradi
   (T510, `ong-panel.js::navNishonlariniQoy`). Suhbat komponentlari
   (T515) ham `display` beradi — yuborish/to'xtatish doiralarini va
   kartalarni JS `hidden` bilan almashtiradi. */
.chiroq .nishon[hidden],
.chiroq .kiritish[hidden],
.chiroq .kiritish-qator[hidden],
.chiroq .doira[hidden],
.chiroq .xabar-bosh[hidden],
.chiroq .qadamlar[hidden],
.chiroq .oyna-bosh[hidden],
.chiroq .oyna-tana[hidden],
.chiroq .oyna-oyoq[hidden],
.chiroq .tez-el[hidden],
.chiroq .rasm[hidden],
.chiroq .rasm .belgilandi[hidden],
.chiroq .iz[hidden],
.chiroq .suhbat-sarlavha[hidden],
.chiroq .xabar[hidden],
.chiroq .band-rad[hidden],
.chiroq .vazifa-tanlov[hidden],
.chiroq .vazifa-tanlov-papka[hidden],
.chiroq .fayl-royxati[hidden],
.chiroq .fayl-chip[hidden],
.chiroq .fayl-ochir[hidden],
.chiroq .natija-yukla[hidden],
.chiroq .tasdiq-ttl[hidden],
.chiroq .muharrir-ttl[hidden],
.chiroq .tanlov-qadam-ttl[hidden],
.chiroq .tanlov-qadam-hammasi[hidden],
.chiroq .holat-tablar[hidden],
.chiroq .holat-tab[hidden],
.chiroq .bolim-bosh[hidden],
.chiroq .bolim-bosh-amal[hidden],
.chiroq .xizmat[hidden],
.chiroq .xizmatlar[hidden],
.chiroq .xizmat-oyoq[hidden],
.chiroq .huquq[hidden],
.chiroq .qatorlar-bosh[hidden],
.chiroq .qator[hidden],
.chiroq .qator-guruh[hidden],
.chiroq .qator .amallar[hidden],
.chiroq .belgilar[hidden],
.chiroq .belgi-chip[hidden],
.chiroq .kalit[hidden],
.chiroq .maydon[hidden],
.chiroq .maydon-juft[hidden],
.chiroq .maydon-guruh[hidden],
.chiroq .daraja[hidden],
.chiroq.oyna .turkum[hidden],
.chiroq.oyna .sayt-olcha-royxat[hidden],
.chiroq.jarayon[hidden] { display: none; }

/* ═══ SOZLAMALAR KOMPONENTLARI — SPRINT-78 §4.3, T528 ═══
   Manba — `dizayn/chiroq/sozlamalar.html` 729–855. Razmetkada sinfni
   T529–T531 qo'yadi; ungacha bu qoidalar hech narsani chizmaydi.
   Maketdagi hex sirtlar (`--tong-*`/`--tun-*`) rol tokenlariga
   almashtirildi: namuna ranglari `--nt-*` (tun) va `--ng-*` (tong)
   — palitradan, `.namuna-oyna` ning o'zida e'lon qilinadi. */

/* ─── Tab satri va ikki ustunli to'r ─── */
.chiroq .tab-qator { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Tab satri BITTA qatorda: sig'masa oxirgi tablar «…» menyusiga o'tadi
   (`sozlama-tablar.js::sozlamaTablarSigdir`, data-yana). Surish YO'Q. */
.chiroq .tab-qator .holat-tablar { flex: 0 1 auto; min-width: 0; overflow: hidden; flex-wrap: nowrap; }
.chiroq .tab-qator .holat-tab { flex: none; }
.chiroq .holat-tab[data-yana] { display: none; }
.chiroq .tab-yana { position: relative; flex: none; margin-right: auto; }
.chiroq .tab-yana[hidden] { display: none; }
.chiroq .tab-yana-tugma { padding: 7px 12px; background: var(--sirt); border: 1px solid var(--chiziq); border-radius: 12px; line-height: 1; }
.chiroq .tab-yana-menyu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 180px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--sirt); border: 1px solid var(--chiziq); border-radius: 12px; box-shadow: var(--soya-2, var(--soya-1, none));
}
.chiroq .tab-yana-menyu[hidden] { display: none; }
.chiroq .tab-yana-menyu .holat-tab { width: 100%; justify-content: flex-start; min-height: 40px; }
.chiroq .sozlama-tor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* ─── Karta ichi: bosh · tana · oyoq ─── */
.chiroq .karta-bosh {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--chiziq);
}
.chiroq .karta-bosh .kafel {
  width: 36px; height: 36px;
  color: var(--cm, var(--siyoh-3));
  background: color-mix(in srgb, var(--c, var(--siyoh-4)) 12%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 30%, transparent);
}
.chiroq .karta-nom { flex: 1; min-width: 140px; }
.chiroq .karta-nom b { display: block; font-size: 14px; font-weight: 600; color: var(--siyoh); }
.chiroq .karta-nom .mono { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }
.chiroq .karta-tana { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.chiroq .karta-oyoq {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--chiziq);
  background: var(--sirt-2); border-radius: 0 0 16px 16px;
}
.chiroq .karta-oyoq .izoh-kichik { margin-right: auto; max-width: 52ch; }
.chiroq .izoh-kichik { font-size: 12px; line-height: 1.5; color: var(--siyoh-4); }
.chiroq .izoh-kichik code { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--sirt-3); }

/* ─── Amal qatori: matn + tugma ─── */
.chiroq .amal-qator { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.chiroq .amal-qator + .amal-qator { border-top: 1px solid var(--chiziq); }
.chiroq .amal-qator > div { flex: 1; min-width: 200px; }
.chiroq .amal-qator b { display: block; font-size: 13.5px; font-weight: 500; color: var(--siyoh); }

/* ─── Kalit–qiymat ro'yxati (`dl`; guruh = kalitning birinchi bo'lagi) ─── */
.chiroq .kv { margin: 0; display: grid; grid-template-columns: minmax(150px, 32%) minmax(0, 1fr); }
.chiroq .kv dt,
.chiroq .kv dd { margin: 0; padding: 8px 18px; border-bottom: 1px solid var(--chiziq); min-width: 0; overflow-wrap: anywhere; }
.chiroq .kv dt { font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-3); }
.chiroq .kv dd { font-family: var(--mono); font-size: 12px; color: var(--siyoh); font-variant-numeric: tabular-nums; }
.chiroq .kv dd.uzun { font-size: 11px; line-height: 1.55; color: var(--siyoh-3); }
/* Guruh sarlavhasi `dl` ning QO'SHNISI (`h3.kv-guruh` + `dl.kv`, T529):
   `dl` bolasi faqat `dt`/`dd` bo'la oladi. */
.chiroq .kv-guruh {
  margin: 0; display: flex; align-items: center; gap: 8px;
  padding: 14px 18px 6px; border-bottom: 1px solid var(--chiziq);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siyoh-4);
}
.chiroq .kv-guruh::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--feruza); }
.chiroq .kv-guruh .son { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0; color: var(--siyoh-4); }
.chiroq .kv > :nth-last-child(-n+2) { border-bottom: 0; }
.chiroq .kv-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--chiziq);
}
.chiroq .kv-bosh .qidiruv { flex: 0 1 300px; }
.chiroq .kv-yoq { margin: 0; padding: 22px 18px; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-4); }

/* ─── Tanlov kartasi (tema, shrift) — `aria-pressed` ─── */
.chiroq .tanlov-kartalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 10px; }
.chiroq .tanlov-karta {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 12px;
  font: inherit; text-align: left; cursor: pointer; border-radius: 12px;
  border: 1px solid var(--chiziq-2); background: var(--sirt);
  transition: border-color var(--tez), box-shadow var(--tez);
}
.chiroq .tanlov-karta:hover { border-color: color-mix(in srgb, var(--feruza) 45%, transparent); }
.chiroq .tanlov-karta[aria-pressed="true"] {
  border-color: var(--feruza);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--feruza) 16%, transparent);
}
.chiroq .tanlov-karta[disabled] { opacity: 0.45; cursor: not-allowed; }
.chiroq .tanlov-karta b { font-size: 13px; font-weight: 600; color: var(--siyoh); }
.chiroq .tanlov-karta small { font-family: var(--mono); font-size: 10.5px; color: var(--siyoh-4); }
.chiroq .tanlov-karta .belgilandi {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tugma-matn); background: var(--feruza);
}
.chiroq .tanlov-karta[aria-pressed="false"] .belgilandi { display: none; }
.chiroq .tanlov-karta .belgilandi svg { width: 12px; height: 12px; stroke-width: 3; }

/* Tema namunasi: ikki temaning sirtlari ikkala rejimda ham bir xil
   (Tong'da «Tun» namunasi Tun bo'lib qoladi). Ranglar — `--nt-*` (tun)
   va `--ng-*` (tong) tokenlari; ularni `uslub.css`/`mobil.css` dagi
   `.namuna-oyna` e'loni palitradan beradi (`chiroq.css` xom palitrani
   o'qimaydi; T531). Nuqta ham o'z temasining asosi — joriyniki emas. */
.chiroq .namuna-oyna {
  aspect-ratio: 16 / 9; max-width: 100%; margin-bottom: 7px; padding: 8px;
  display: grid; grid-template-columns: 26% 1fr; gap: 5px;
  border-radius: 8px; border: 1px solid var(--chiziq);
}
.chiroq .namuna-oyna i { display: block; border-radius: 4px; }
.chiroq .namuna-oyna i:nth-child(2) { display: flex; }
.chiroq .namuna-oyna[data-namuna="tong"] { background: var(--ng-fon); }
.chiroq .namuna-oyna[data-namuna="tong"] i { background: var(--ng-panel); border: 1px solid var(--ng-chiziq); }
.chiroq .namuna-oyna[data-namuna="tun"] { background: var(--nt-fon); }
.chiroq .namuna-oyna[data-namuna="tun"] i { background: var(--nt-panel); border: 1px solid var(--nt-chiziq); }
.chiroq .namuna-oyna[data-namuna="tizim"] { background: linear-gradient(105deg, var(--ng-fon) 50%, var(--nt-fon) 50%); }
.chiroq .namuna-oyna[data-namuna="tizim"] i:first-child { background: var(--ng-panel); border: 1px solid var(--ng-chiziq); }
.chiroq .namuna-oyna[data-namuna="tizim"] i:last-child { background: var(--nt-panel); border: 1px solid var(--nt-chiziq); }
.chiroq .namuna-oyna i::after {
  content: ""; margin: auto 6px 6px auto; width: 9px; height: 9px; border-radius: 50%;
  --n-asos: var(--nt-asos);
  background: var(--n-asos); box-shadow: 0 0 6px var(--n-asos);
}
.chiroq .namuna-oyna[data-namuna="tong"] i::after { --n-asos: var(--ng-asos); }
.chiroq .namuna-oyna i:first-child::after { display: none; }
/* Shrift namunasi — har karta O'Z shriftida: joriy tanlov (`--shrift`)
   «Geist» kartasini ham OS shriftiga bo'yamasin. «Mirzo OS shrifti» —
   `korinish.js` ning `FontFace` i; yuklanmaguncha — serif zaxira. */
.chiroq .aa { margin: 4px 0 8px; font-family: "Geist", system-ui, sans-serif; font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--siyoh); }
.chiroq .aa.os { font-family: "Mirzo OS shrifti", ui-serif, Georgia, "DejaVu Serif", serif; font-weight: 500; }

/* ─── Ombor formasi va sanoq ─── */
.chiroq .qulf-forma { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.chiroq .qulf-forma .maydon { flex: 1; min-width: 180px; }
.chiroq .sanoq-qator { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-3); }
.chiroq .sanoq-qator b { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--siyoh); }

/* ─── Ikki qadamli xavfli amalning 1-qadami (anor ton) ─── */
.chiroq .tugma-2.soraldi {
  color: var(--anor-matn);
  border-color: color-mix(in srgb, var(--anor) 50%, transparent);
  background: color-mix(in srgb, var(--anor) 7%, var(--sirt));
}

/* `[hidden]` darvozasi — yuqoridagi `display` qiymatlari UA ning
   `[hidden]` ini bostirmasin (`tests/yashirish_qoidasi.rs`). */
.chiroq .karta-bosh[hidden],
.chiroq .karta-tana[hidden],
.chiroq .karta-oyoq[hidden],
.chiroq .amal-qator[hidden],
.chiroq .kv[hidden],
.chiroq .kv-bosh[hidden],
.chiroq .kv-yoq[hidden],
.chiroq .tanlov-kartalar[hidden],
.chiroq .tanlov-karta[hidden],
.chiroq .qulf-forma[hidden],
.chiroq .sanoq-qator[hidden],
.chiroq .sozlama-tor[hidden],
.chiroq .sozlama-bosh[hidden],
.chiroq .tizim-qatlam[hidden] { display: none; }

/* ─── Sozlamalar sahifasi (T529, §4.4–§4.5): bosh, bo'lim paneli ───
   Bosh — iz + tab satri; bo'lim — kartalar ustuni. Ikki yuzda bir
   razmetka; `/m` joylashuvi — T532. */
.chiroq .sozlama-bosh { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 10px; min-width: 0; }
.chiroq .tizim-qatlam { display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 16px; min-width: 0; }
.chiroq .tizim-qatlam .karta { overflow: hidden; }

/* ─── Xavfsizlik (T530, §4.6): parol ∥ ombor, egasiz, qurilmalar ───
   Kartalar `#qurilmalar-qatlam` panelida ustun bo'lib; `.sozlama-tor`
   ikki kartani yonma-yon qo'yadi. */
.chiroq .qurilmalar-qatlam { display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 16px; min-width: 0; }
.chiroq .qurilmalar-qatlam .karta { overflow: hidden; }
.chiroq .karta-tana p,
.chiroq .karta-oyoq p { margin: 0; }
/* Ombor holati — matn `#ombor-holat` da (bitta manba), pill rangi uning
   `data-holat` idan: ochiq — yalpiz, qulflangan — qahrabo. */
.chiroq .ombor-pill:has(> [data-holat="ochiq"]) { --c: var(--yalpiz); --cm: var(--yalpiz-matn); }
.chiroq .ombor-pill:has(> [data-holat="qulf"]) { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
/* Xato satri — otaning/serverning matni AYNAN, anor tonda. */
.chiroq .xato-satr {
  margin: 0; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; overflow-wrap: anywhere;
  color: var(--anor-matn); background: color-mix(in srgb, var(--anor) 8%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--anor) 28%, transparent);
}
.chiroq .karta > .xato-satr { margin: 0 18px 14px; }
/* Jadvallar: qurilmalar (to'rt ustun, `ozak.js::QURILMA_USTUNLAR`) va
   egasiz sirlar (id + tugma). Qator chekkasi karta boshi bilan bir. */
.chiroq .qurilma-qatorlar { --ustunlar: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 44px; }
.chiroq .egasiz-qatorlar { --ustunlar: minmax(0, 1fr) auto; }
.chiroq .qurilma-qatorlar > li,
.chiroq .egasiz-qatorlar > li { padding-left: 18px; padding-right: 18px; }
.chiroq .qurilma-qatorlar .mono,
.chiroq .egasiz-qatorlar b.mono { font-family: var(--mono); font-size: 12px; color: var(--siyoh-3); font-variant-numeric: tabular-nums; }
.chiroq .qurilma-qatorlar .qator-nom .pill { margin-top: 4px; }
/* Brauzer parolni o'zi to'ldirsa fonni o'z rangiga bo'yaydi — ichki
   soya maydonning o'z sirtini qaytaradi. Ikki psevdo-sinf ALOHIDA
   qoidada: birini tanimagan brauzer butun ro'yxatni tashlardi. */
.chiroq .maydon input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100vmax var(--sirt);
  box-shadow: inset 0 0 0 100vmax var(--sirt);
  -webkit-text-fill-color: var(--siyoh);
  caret-color: var(--siyoh);
}
.chiroq .maydon input:autofill {
  box-shadow: inset 0 0 0 100vmax var(--sirt);
  -webkit-text-fill-color: var(--siyoh);
  caret-color: var(--siyoh);
}
.chiroq .xato-satr[hidden],
.chiroq .qurilmalar-qatlam[hidden] { display: none; }

/* ─── Ko'rinish va e'lon qilinmagan dasturlar (T531, §4.7) ───
   Ikki panel — Xavfsizlik ustunining o'zi. Dasturlar jadvali: nom, mono
   `id`, «Agent qil» (`sozlama.js::dasturElonChiz`). Darajaning izohi
   `html[data-harakat]` dan — `uslub.css`/`mobil.css` da (`.daraja-izoh`;
   `:root[data-harakat="yengil"]` bu qatlam skaneridan o'tmaydi). */
.chiroq .korinish-qatlam,
.chiroq .dastur-elon-qatlam { display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 16px; min-width: 0; }
.chiroq .korinish-qatlam .karta,
.chiroq .dastur-elon-qatlam .karta { overflow: hidden; }
.chiroq .dastur-qatorlar { --ustunlar: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.chiroq .dastur-qatorlar > li { padding-left: 18px; padding-right: 18px; }
.chiroq .dastur-qatorlar .mono { font-family: var(--mono); font-size: 12px; color: var(--siyoh-3); overflow-wrap: anywhere; }
.chiroq .korinish-qatlam[hidden],
.chiroq .dastur-elon-qatlam[data-bor="false"] { display: none; }

@media (max-width: 1023px) {
  .chiroq .sozlama-tor { grid-template-columns: minmax(0, 1fr); }
  .chiroq .kv { grid-template-columns: minmax(0, 1fr); }
  .chiroq .kv dt { border-bottom: 0; padding-bottom: 0; }
  .chiroq .kv dd { padding-top: 2px; }
  /* Tab satri va «Chiqish» — BITTA qator (2026-09-19 talabi, ikki yuzda
     bir): satr qolgan enni oladi va o'zi yoniga suriladi, tugma
     qisqarmaydi — o'ng chekkada. 44px — barmoq nishoni (T532). */
  .chiroq .tab-qator .holat-tab { min-height: 44px; }
  .chiroq .tab-yana-tugma { min-height: 44px; }
  .chiroq .tab-qator #chiqish-tugma { flex: none; min-height: 44px; }
}

/* ═══ VAZIFALAR TABLARI, KANVAS VA MONITORING — SPRINT-79 §4.2, T534 ═══
   Manba — `dizayn/chiroq/vazifalar.html` (`SPRINT-79` bloki). Maketdagi
   `.plitka`/`.varaq`/`.k-*` nomlari bu yerda HAQIQIY sinflarda: kanvas
   `.kanvas-*` nomlari saqlanadi (§7-7 — JS ilgaklari va qulflar),
   palitra guruhi `.kanvas-guruh`, bo'lim `.kanvas-bolim`. Razmetkada
   `chiroq` ildizini T535–T538 qo'yadi; ungacha bu qoidalar hech narsani
   chizmaydi. `display` bergan har sinfga `[hidden]` qaytariladi —
   `uslub.css` dagi `[hidden]` qoidasi bilan teng vaznda bu fayl keyin
   keladi va yutardi. */

/* ─── Tab satri: «+ Yangi vazifa» va karta ichidagi filtr ─── */
.chiroq .holat-tab.tab-yangi { color: var(--feruza-matn); }
.chiroq .holat-tab.tab-yangi svg { width: 14px; height: 14px; }
.chiroq .holat-tab.tab-yangi[aria-selected="true"] {
  background: color-mix(in srgb, var(--feruza) 12%, var(--sirt));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feruza) 40%, transparent);
}
.chiroq .karta-filtr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--chiziq);
}
.chiroq .karta-filtr[hidden] { display: none; }
.chiroq .karta-filtr .holat-tablar { box-shadow: none; background: var(--sirt-2); }
.chiroq .tugma-2.ixcham { padding: 6px 11px; font-size: 12.5px; box-shadow: none; }

/* ─── Ikonka to'ri — OS Dasturlar va Rejalash katalogi (bitta to'r) ─── */
.chiroq .ilova-tor {
  list-style: none; margin: 0; padding: 16px 18px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
}
.chiroq .ilova-tor[hidden] { display: none; }
.chiroq .ilova-tor button {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px;
  border-radius: 14px; border: 1px solid var(--chiziq); background: var(--sirt-2); color: var(--siyoh); text-align: center;
  font: inherit; cursor: pointer;
  transition: border-color var(--tez, 120ms), background-color var(--tez, 120ms), transform var(--tez, 120ms);
}
.chiroq .ilova-tor button:hover { border-color: color-mix(in srgb, var(--feruza) 45%, transparent); transform: translateY(-1px); }
.chiroq .ilova-tor button:focus-visible { outline: 2px solid var(--feruza); outline-offset: 2px; }
.chiroq .ilova-tor button[aria-pressed="true"] {
  border-color: var(--feruza); background: color-mix(in srgb, var(--feruza) 8%, var(--sirt));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--feruza) 14%, transparent);
}
.chiroq .ilova-tor .ilova-belgi,
.chiroq .reja-tanlangan .ilova-belgi {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--cm, var(--feruza-matn));
  background: color-mix(in srgb, var(--c, var(--feruza)) 12%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c, var(--feruza)) 30%, transparent);
}
.chiroq .ilova-tor .ilova-belgi svg { width: 22px; height: 22px; }
.chiroq .ilova-tor b { font-size: 12.5px; font-weight: 500; color: var(--siyoh); line-height: 1.3; }
.chiroq .ilova-tor small { font-family: var(--mono); font-size: 10px; color: var(--siyoh-4); overflow-wrap: anywhere; }

/* ─── Rejalash: chapda reja kartasi, o'ngda katalog ─── */
.chiroq .reja-tor { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.chiroq .reja-tor[hidden] { display: none; }
.chiroq .reja-tanlangan {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 12px; background: var(--sirt-2); border: 1px solid var(--chiziq);
}
.chiroq .reja-tanlangan[hidden] { display: none; }
.chiroq .reja-tanlangan b { display: block; font-size: 13.5px; font-weight: 500; color: var(--siyoh); }
.chiroq .reja-tanlangan small { display: block; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }
.chiroq .reja-bosh-yoq {
  padding: 16px 12px; border-radius: 12px; border: 1px dashed var(--chiziq-2);
  text-align: center; font-size: 12.5px; color: var(--siyoh-4);
}
.chiroq .ogoh {
  margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  color: var(--qahrabo-matn); background: color-mix(in srgb, var(--qahrabo) 9%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--qahrabo) 30%, transparent);
}

/* ─── Vazifalar ro'yxati: qadamlar zanjiri, qator izohi, bo'sh katak ─── */
.chiroq .zanjir {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--siyoh-3);
}
.chiroq .zanjir i {
  font-style: normal; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
  background: var(--sirt-3); border: 1px solid var(--chiziq);
}
.chiroq .zanjir i.c-yalpiz,
.chiroq .zanjir i.c-qahrabo {
  color: var(--cm); background: color-mix(in srgb, var(--c) 9%, var(--sirt));
  border-color: color-mix(in srgb, var(--c) 26%, transparent);
}
.chiroq .zanjir .o { color: var(--siyoh-4); }
.chiroq .qator-izoh {
  grid-column: 1 / -1; margin: -2px 0 0; display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--siyoh-3);
}
.chiroq .qator-izoh[hidden] { display: none; }
.chiroq .sokin { font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-4); }
/* Vazifalar jadvali (T536) — besh ustun (`kanvas.js::OQIM_USTUNLAR`).
   «Ochish» — matnli `tugma-2`: ikonka amallarining 28px qutisi unga
   tegmasin. Chiqish belgisi chip ichida chip rangini oladi. */
.chiroq .oqim-qatorlar { --ustunlar: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr) auto; }
.chiroq .qator .amallar button.tugma-2 {
  width: auto; height: auto; padding: 6px 11px; display: inline-flex;
  border: 1px solid var(--chiziq-2); background: var(--sirt); color: var(--siyoh-2);
}
.chiroq .belgi-chip .chiqish-belgi { color: inherit; }

/* ─── Kanvas karkasi: meta · palitra ∥ ish maydoni ─── */
.chiroq .meta-uch {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.6fr); gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--chiziq);
}
.chiroq .kanvas-ichi { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 460px; }
.chiroq .palitra {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 12px 12px 16px;
  border-right: 1px solid var(--chiziq); background: var(--sirt-2); border-radius: 0 0 0 16px;
}
.chiroq .palitra .yorliq,
.chiroq .kanvas-palitra .kanvas-bolim {
  display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 4px 2px; border: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siyoh-4);
}
.chiroq .palitra .yorliq::before,
.chiroq .kanvas-palitra .kanvas-bolim::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--feruza);
}
.chiroq .kanvas-palitra .kanvas-guruh { margin: 0; padding: 6px 4px 0; font-size: 11.5px; font-weight: 600; color: var(--siyoh-3); }
.chiroq .palitra .izoh { margin: 8px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--siyoh-4); }

/* Plitka — chap tasma `--c`; rang MA'NOGA bog'lanadi (§7-6): manba
   yalpiz, agent feruza, chiqish qahrabo, yadro ichki tuguni (odam
   qadami) binafsha. `data-rang` (xesh 0–4) bu yerda o'qilmaydi. */
.chiroq .kanvas-plitka {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  flex: none; width: 100%; min-height: 44px; text-align: left;
  padding: 8px 10px 8px 14px; border-radius: 10px; border: 1px solid var(--chiziq);
  background: var(--sirt); color: var(--siyoh); font: inherit; cursor: grab;
  transition: border-color var(--tez, 120ms), background-color var(--tez, 120ms);
}
.chiroq .kanvas-plitka::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: var(--c, var(--siyoh-4));
}
.chiroq .kanvas-plitka[data-tur="manba"],
.chiroq .kanvas-tugun[data-tur="manba"] { --c: var(--yalpiz); --cm: var(--yalpiz-matn); }
.chiroq .kanvas-plitka[data-tur="agent"],
.chiroq .kanvas-tugun[data-tur="agent"] { --c: var(--feruza); --cm: var(--feruza-matn); }
.chiroq .kanvas-plitka[data-tur="chiqish"],
.chiroq .kanvas-tugun[data-tur="chiqish"] { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .kanvas-plitka[data-ichki="ha"],
.chiroq .kanvas-tugun[data-ichki="ha"] {
  --c: var(--binafsha-chiroq); --cm: color-mix(in srgb, var(--binafsha-chiroq) 70%, var(--siyoh));
}
.chiroq .kanvas-plitka:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c, var(--siyoh-4)) 50%, transparent); }
.chiroq .kanvas-plitka:focus-visible { outline: 2px solid var(--feruza); outline-offset: 2px; }
.chiroq .kanvas-plitka-nom { font-size: 12.5px; font-weight: 500; color: var(--siyoh); }
.chiroq .kanvas-plitka-tafsilot { font-family: var(--mono); font-size: 10px; color: var(--siyoh-4); }
/* O'chiq plitka chiziladi — sababi yonida (e'lon qilinmagan dastur). */
.chiroq .kanvas-plitka:disabled { cursor: not-allowed; opacity: 0.55; background: var(--sirt-2); }
.chiroq .kanvas-plitka-sabab { font-family: var(--mono); font-size: 10px; color: var(--qahrabo-matn); }

.chiroq .ish-maydon { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chiroq .ish-maydon-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--chiziq);
}
.chiroq .ish-maydon-bosh .mono,
.chiroq .ish-maydon .kanvas-holat { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }
.chiroq .ish-maydon .kanvas-tugun-amallar { display: flex; gap: 6px; flex-wrap: wrap; }
.chiroq .ish-maydon .kanvas-tugun-maydonlar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--chiziq);
  background: color-mix(in srgb, var(--feruza) 4%, var(--sirt));
}
.chiroq .ish-maydon .kanvas-tugun-amallar[hidden],
.chiroq .ish-maydon .kanvas-tugun-maydonlar[hidden] { display: none; }

/* Varaq — nuqtali to'r; chizma o'z skrolli bilan (kesish, masshtab emas). */
.chiroq .kanvas-varaq {
  flex: 1; min-height: 380px; overflow: auto; position: relative;
  border: 0; border-radius: 0; background-color: var(--sirt);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--siyoh) 14%, transparent) 1px, transparent 1.2px);
  background-size: 20px 20px;
}

/* ─── Kanvas SVG — `fill`/`stroke` faqat token ─── */
.chiroq .kanvas-tugun { cursor: pointer; outline: none; }
.chiroq .kanvas-quti { fill: var(--sirt); stroke: var(--chiziq-2); stroke-width: 1; }
.chiroq .kanvas-tugun-belgi { fill: var(--c, var(--siyoh-4)); }
.chiroq .kanvas-tugun-nom { fill: var(--siyoh); font-family: var(--shrift); font-size: 12.5px; font-weight: 500; }
.chiroq .kanvas-tugun-raqam { fill: var(--siyoh-4); font-family: var(--mono); font-size: 10px; font-weight: 400; }
.chiroq .kanvas-tugun[data-tanlangan="ha"] .kanvas-quti,
.chiroq .kanvas-tugun:focus-visible .kanvas-quti {
  stroke: var(--feruza); stroke-width: 2;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--feruza) 40%, transparent));
}
/* Ulash holati ham feruza, lekin UZUQ — tanlovdan rangsiz ham ajraladi. */
.chiroq .kanvas-tugun[data-ulash="ha"] .kanvas-quti { stroke: var(--feruza); stroke-width: 2; stroke-dasharray: 6 4; }
/* Nuqta: kirish — kul halqa (ip shu yerga keladi), chiqish — to'la
   feruza doira (ip shu yerdan tortiladi). */
.chiroq .kanvas-nuqta { stroke-width: 1.6; }
.chiroq .kanvas-nuqta[data-rol="kirish"] { fill: var(--sirt); stroke: var(--siyoh-4); }
.chiroq .kanvas-nuqta[data-rol="chiqish"] { fill: var(--feruza); stroke: var(--sirt); cursor: crosshair; }
.chiroq .kanvas-chiziq { fill: none; stroke: var(--siyoh-4); stroke-width: 1.6; }
.chiroq .kanvas-chiziq[data-shart="ha"] { stroke-dasharray: 7 5; }
/* Yaroqsiz — anor va uzuq; shartlidan KEYIN, ikkalasi bo'lsa shu yutadi. */
.chiroq .kanvas-chiziq[data-yaroqli="yoq"] { stroke: var(--anor); stroke-dasharray: 5 4; }
.chiroq .kanvas-chiziq-nishon { fill: none; stroke: transparent; stroke-width: 24; cursor: pointer; outline: none; }
.chiroq .kanvas-chiziq-nishon:focus-visible { stroke: color-mix(in srgb, var(--feruza) 45%, transparent); stroke-width: 6; }
.chiroq .kanvas-korsatma { fill: var(--siyoh-3); font-family: var(--mono); font-size: 10px; }
.chiroq .kanvas-korsatma[data-yaroqli="yoq"] { fill: var(--anor-matn); }
.chiroq .kanvas-shart { fill: var(--qahrabo-matn); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.chiroq .kanvas-strelka path { fill: var(--siyoh-4); }
.chiroq .kanvas-vaqtinchalik { fill: none; stroke: var(--feruza); stroke-width: 1.6; stroke-dasharray: 4 4; pointer-events: none; }

/* ─── Monitoring: turkum kartasi ─── */
.chiroq .holat-satr {
  margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--siyoh-4);
}
.chiroq .turkum-izohlar { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--chiziq); }
.chiroq .turkum-izohlar:empty { display: none; }
.chiroq .turkum-izohlar .izoh-kichik { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.chiroq .turkum-izohlar .izoh-kichik::before {
  content: ""; flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%;
  background: var(--siyoh-4); transform: translateY(-2px);
}
.chiroq .turkum-izohlar .sabab { margin: 0; font-size: 11px; }
.chiroq .boshqaruv-jadval-idish { overflow-x: auto; }
.chiroq .boshqaruv-jadval { min-width: 720px; }
.chiroq .boshqaruv-jadval th[scope="row"] {
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none;
  white-space: normal; color: var(--siyoh);
}
.chiroq .boshqaruv-jadval td.mono {
  font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chiroq .aktor { display: inline-flex; align-items: center; gap: 10px; min-width: 180px; color: var(--siyoh); font-weight: 500; }
.chiroq .aktor .kv-k {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  color: var(--cm, var(--siyoh-3));
  background: color-mix(in srgb, var(--c, var(--siyoh-4)) 12%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c, var(--siyoh-4)) 28%, transparent);
}
.chiroq .aktor .kv-k svg { width: 15px; height: 15px; }
.chiroq .hozir { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--siyoh-2); }
.chiroq .hozir.sokin { font-family: inherit; font-size: 12.5px; color: var(--siyoh-4); }
.chiroq .sahifalash {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--chiziq);
}
.chiroq .sahifalash[hidden] { display: none; }
.chiroq .sahifalash .mono { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }

/* Monitoring sahifasi (T538, §4.8): bosh — iz + holat satri, o'ngda
   «Ekran»; tana — turkum kartalari ustma-ust. Skroll idishi
   (`.boshqaruv-tana` ning `flex`/`overflow`) karkasniki — eski faylda. */
.chiroq .monitoring-bosh { padding: 14px 16px 6px; }
.chiroq .boshqaruv-tana { display: flex; flex-direction: column; gap: 14px; padding: 8px 16px 16px; }
.chiroq .boshqaruv-tana .karta-nom h3 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--siyoh); overflow-wrap: anywhere;
}
/* Ikonka katagi: harf yoki haqiqiy OS ikonkasi (`kvadratYarat` `<img>`
   i — eski `.plitka-belgi` o'lchami shu yerda kesiladi). */
.chiroq .aktor .kv-k { font-size: 12px; font-weight: 600; }
.chiroq .aktor .kv-k .plitka-belgi { width: 18px; height: 18px; border-radius: 4px; }

@media (max-width: 1023px) {
  /* Tor oyna: reja va meta bitta ustun, katalog TEPADA (bugungi
     qoida); palitra gorizontal tasma — bosish yetadi, tortish shart
     emas; ichki holat filtri gorizontal aylanadi. */
  .chiroq .reja-tor,
  .chiroq .meta-uch { grid-template-columns: minmax(0, 1fr); }
  .chiroq .reja-tor > :last-child { order: -1; }
  .chiroq .kanvas-ichi { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .chiroq .palitra {
    flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--chiziq); border-radius: 0;
  }
  .chiroq .palitra .yorliq,
  .chiroq .palitra .kanvas-bolim,
  .chiroq .palitra .kanvas-guruh,
  .chiroq .palitra .izoh { display: none; }
  .chiroq .kanvas-plitka { flex: 0 0 150px; width: auto; }
  .chiroq .karta-filtr .holat-tablar { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .chiroq .ilova-tor { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding: 12px 14px; }
  .chiroq .ilova-tor button { min-height: 44px; }
  .chiroq .ish-maydon .kanvas-tugun-maydonlar { grid-template-columns: minmax(0, 1fr); }
  .chiroq .aktor { min-width: 0; }
}

/* ═══ VAZIFALAR: TAB SATRI, REJALASH, OS DASTURLAR — SPRINT-79 §4.3–§4.5, T535 ═══
   T534 komponentlarining shu yuzadagi joylashuvi. Tab satri Sozlamalar
   tilida (`.tab-qator` + `.holat-tablar`), lekin «…» menyusi YO'Q (§7-3):
   sig'masa satr gorizontal aylanadi. Ikonka katagi (`.ilova-belgi`) —
   `menyu.js::ilovaBelgisi`: OS ikonkasi `<img>` yoki bosh harf. */
.chiroq .ish-tab-qator { flex: none; padding: 0 1.1rem 0.6rem; }
.chiroq .ish-tab-qator .holat-tablar { overflow-x: auto; scrollbar-width: none; }
.chiroq .ish-tab-qator .holat-tablar::-webkit-scrollbar { display: none; }
.chiroq .ish-yangi-qatlam,
.chiroq .ish-dasturlar-qatlam { padding: 0.9rem 1.1rem 1.1rem; }
.chiroq .karta-tana > .ilova-tor { padding: 0; }
.chiroq .karta-tana > .panel-jumla { margin: 0; }
.chiroq .ilova-belgi { font-size: 17px; font-weight: 600; text-transform: uppercase; }
.chiroq .ilova-belgi img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.chiroq .reja-tanlangan .ilova-belgi { flex: none; width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.chiroq .reja-tanlangan .ilova-belgi img { width: 24px; height: 24px; }
.chiroq .reja-tana { display: flex; flex-direction: column; gap: 10px; }
.chiroq .reja-tana[hidden] { display: none; }

/* ═══ KANVAS MUHARRIRI VA CHIZIQ OYNASI — SPRINT-79 §4.7, T537 ═══
   T534 kanvas tilining shu yuzadagi joylashuvi: muharrir — bitta
   `.karta` (`#kanvas-yangi`), `#bog-dialog` — `chiroq oyna`. `kanvas-*`
   nomlari saqlangan (§7-7); eski fayllardagi kanvas qoidalari o'chdi
   (uslub.css va mobil.css). Telefonning ikki farqi — meta `<details>`
   (`.kanvas-elon`) va palitra varag'i (`#palitra-dialog`, `chiroq`
   sinfi bilan) — shu yerda, joylashuvi T539 da. */
.chiroq .ish-muharrir-qatlam { padding: 0.9rem 1.1rem 1.1rem; }
.chiroq .kanvas-yangi .karta-nom h2 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--siyoh); overflow-wrap: anywhere;
}
.chiroq .kanvas-yangi > .xato-satr { margin: 12px 18px 0; }

/* Palitra: plitkalar idishi (`#kanvas-palitra`) keng yuzda `.palitra`
   ustunining o'zi bo'lib oqadi; varaqda (`/m`) — o'z ustuni. */
.chiroq .kanvas-palitra { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chiroq .palitra > .kanvas-palitra { display: contents; }
.chiroq .kanvas-palitra-sarlavha { margin: 0 4px 2px; font-size: 13px; font-weight: 600; color: var(--siyoh); }
.chiroq .kanvas-palitra .panel-jumla,
.chiroq .kanvas-tugun-maydonlar .panel-jumla { margin: 0; font-size: 12px; line-height: 1.5; color: var(--siyoh-4); }

/* Ish maydoni boshi: holat yozuvi chapda, tanlangan qadam amallari
   o'ngda; «Qadamni o'chir» — anor matn tonida. */
.chiroq .ish-maydon-bosh .kanvas-holat { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.chiroq .tugma-2.xavf { color: var(--anor-matn); }
.chiroq .tugma-2.xavf:hover { border-color: color-mix(in srgb, var(--anor) 45%, transparent); color: var(--anor-matn); }
/* Tugun maydonlari — har biri `.maydon` katagi; eski qadam belgisi va
   amal qatorlari to'rning butun enini oladi. */
.chiroq .kanvas-tugun-maydonlar > :not(.maydon) { grid-column: 1 / -1; }
.chiroq .maydon > p code { font-family: var(--mono); font-size: 11px; }
/* Bayroq (T287) — checkbox + jumla, butun qator bosiladi (44px nishon).
   U ham `.maydon` ning bevosita `<label>` i — yorliq tili (mono, katta
   harf) bekor qilinadi: bu jumla, yorliq emas. */
.chiroq .maydon > .kanvas-bayroq,
.chiroq .kanvas-bayroq {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--siyoh-2);
}
.chiroq .kanvas-bayroq input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--feruza); }
.chiroq .kanvas-bayroq input[type="checkbox"]:focus-visible { outline: 2px solid var(--feruza); outline-offset: 2px; }
.chiroq .kanvas-svg { display: block; }

/* Oyoq: «Saqlash» ning sababi tugma YONIDA (§9.3) — `.pill` tilida,
   rang `data-ok` dan; matn uzun bo'lishi mumkin (BOSH tekshiruvi
   jumlasi), shuning uchun o'raladi. Bo'sh kanvasda jim (`hidden`). */
.chiroq .kanvas-sabab {
  align-items: flex-start; margin: 0 auto 0 0; max-width: 64ch; padding: 5px 11px;
  border-radius: 12px; white-space: normal; line-height: 1.45; overflow-wrap: anywhere;
}
.chiroq .kanvas-sabab::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%;
  background: var(--c, var(--siyoh-4));
}
.chiroq .kanvas-sabab[data-ok="ha"] { --c: var(--yalpiz); --cm: var(--yalpiz-matn); }
.chiroq .kanvas-sabab[data-ok="yoq"] { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .kanvas-sabab:empty { display: none; }
.chiroq .kanvas-sabab[hidden] { display: none; }

/* Keng oyna: kanvas bloki ekranning kamida 70 foizi (2026-09-14,
   foydalanuvchi talabi) — bo'yi qat'iy, ortig'ini varaqning va
   palitraning O'Z skrolli oladi (T114: kesish, masshtab emas). */
@media (min-width: 1024px) {
  .chiroq .kanvas-ichi { height: max(460px, 70dvh); grid-template-rows: minmax(0, 1fr); }
  .chiroq .kanvas-ichi .palitra { min-height: 0; overflow-y: auto; }
  .chiroq .kanvas-ichi .kanvas-varaq { min-height: 240px; }
}
@media (max-width: 1023px) {
  .chiroq .ish-muharrir-qatlam { padding: 0.6rem 0 0.9rem; }
  .chiroq .kanvas-palitra-sarlavha { display: none; }
  .chiroq .kanvas-ichi .kanvas-varaq { flex: none; height: max(320px, 60dvh); min-height: 0; }
  .chiroq .kanvas-sabab { flex: 1 1 100%; max-width: none; }
  .chiroq .kanvas-amallar .tugma-1,
  .chiroq .kanvas-amallar .tugma-2 { min-height: 44px; justify-content: center; }
}

/* `/m`: meta yig'iladigan blok (`<details>`, 2026-09-15) — yopiq holatda
   bitta 44px qator. Ochish/yopishni brauzer beradi. */
.chiroq .kanvas-elon { border-bottom: 1px solid var(--chiziq); }
.chiroq .kanvas-elon-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 0 18px; list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--siyoh-3);
}
.chiroq .kanvas-elon-bosh::-webkit-details-marker { display: none; }
.chiroq .kanvas-elon-ochil { display: inline-flex; color: var(--siyoh-4); }
.chiroq .kanvas-elon[open] .kanvas-elon-ochil { transform: rotate(180deg); }
.chiroq .kanvas-elon .meta-uch { border-top: 1px solid var(--chiziq); border-bottom: 0; }

/* ═══ VAZIFALAR (HOLATLAR) VA MONITORING — SPRINT-75 T511, 79 T539, 80 T547 ═══
   BITTA qoidalar to'plami: keng yuz — asos (`@media` siz, ikkala yuzga),
   `/m` — faqat farq (`@media (max-width: 1023px)`). Asos `/m` ga ham
   tushadi, shuning uchun tor blok jadval tilini (chegara, `min-width`,
   `nowrap`, hover) karta tiliga QAYTARADI — har qaytarish o'sha qatorda.
   Bo'lim qobiqlari (`.ish-stoli-bolim`, `.ish-qatlam`, `.ish-stoli-tana`,
   `.boshqaruv-bolim`) karkas — eski faylda: `chiroq` sinfi o'sha
   elementning o'zida, bu qatlam esa faqat ichini tanlaydi. Komponentlar
   (`.kpi`, `.holat-tab`, `.pill`, `.led`, `.karta`, `.iz`) — yuqorida. */
.chiroq .ish-bosh { display: block; padding: 0.9rem 1.1rem 0.75rem; }
.chiroq .ish-sarlavha {
  margin: 0.4rem 0 0.3rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; font-weight: 700;
  letter-spacing: -0.035em; color: var(--siyoh);
}
.chiroq .ish-meta {
  margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--siyoh-3);
}
.chiroq .ish-meta[hidden] { display: none; }
.chiroq .ish-meta b { color: var(--siyoh); }
.chiroq .ish-meta .mono {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--siyoh-4);
}

.chiroq .ish-korinish { display: grid; gap: 0.9rem; padding: 0.9rem 1.1rem 1.1rem; }
.chiroq .ish-korinish[hidden] { display: none; }
.chiroq .ish-jadval-karta { overflow: hidden; }
.chiroq .ish-jadval-bosh { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--chiziq); }
.chiroq .ish-jadval-bosh h2 {
  margin: 0; display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; font-weight: 600; color: var(--siyoh);
}
.chiroq .ish-jadval-bosh h2 .mono { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--siyoh-4); }
.chiroq .ish-jadval-izoh:empty { display: none; }
.chiroq .ish-jadval-izoh { padding: 0.6rem 1.1rem 0; }
.chiroq .ish-jadval-oyna { overflow-x: auto; }
.chiroq .ish-jadval { width: 100%; min-width: 760px; border-collapse: collapse; }
.chiroq .ish-jadval th {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--siyoh-4); text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--chiziq); white-space: nowrap;
}
.chiroq .ish-jadval td {
  padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--chiziq); vertical-align: middle;
  font-size: 0.82rem; color: var(--siyoh-2);
}
.chiroq .ish-jadval tbody tr:hover { background: var(--sirt-2); }
.chiroq .ish-jadval tbody tr:last-child td { border-bottom: 0; }
.chiroq .ish-jadval td.mono {
  font-family: var(--mono); font-size: 0.75rem; color: var(--siyoh-3); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chiroq .ish-jadval .vz-id {
  font-family: var(--mono); font-size: 0.72rem; color: var(--siyoh-3); padding: 0.25rem 0.5rem; border-radius: 7px;
  background: var(--sirt-3); border: 1px solid var(--chiziq); white-space: nowrap;
}
.chiroq .ish-jadval .vz { min-width: 11rem; }
.chiroq .ish-jadval .vz b { display: block; color: var(--siyoh); font-weight: 500; }
.chiroq .ish-jadval .vz small,
.chiroq .ish-jadval .ish-qadam small { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--siyoh-4); }
.chiroq .ish-jadval .ish-qadam { min-width: 9rem; overflow-wrap: anywhere; }
.chiroq .ish-jadval .ish-qadam .ish-soralgan { color: var(--sariq); }
.chiroq .ish-jadval .ish-amallar { justify-content: flex-end; }
.chiroq .ish-jadval-bosh-qator td { text-align: center; color: var(--siyoh-4); padding: 1.6rem; }
.chiroq .ish-jadval-bosh-qator td.ish-sabab { color: var(--sariq); }
.chiroq .ish-korinish .kpi-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Amal javobi — BOSH yozgan jumla. `[hidden]` darvozasi SHART: ustki
   darajada `display` berilgan (`tests/yashirish_qoidasi.rs`). */
.chiroq .ish-amal-javob {
  display: block; margin: 0; padding: 0.4rem 0.85rem; font-size: 0.85rem; color: var(--sokin); overflow-wrap: anywhere;
}
.chiroq .ish-amal-javob[hidden] { display: none; }
.chiroq .ish-amal-javob[data-xato="ha"] { color: var(--sariq); }
/* Qatlam fokus halqasi ichkariga — u skroll idishining chekkasida. */
.chiroq .ish-qatlam:focus-visible { outline-offset: -2px; }
/* Sabab (`mirzod` javob bermadi, ro'yxat eskirdi) va «to'xtatish
   so'raldi» — matn o'zi aytadi, rang takrorlaydi. */
.chiroq .ish-sabab { margin: 0; color: var(--sariq); font-size: 0.85rem; overflow-wrap: anywhere; }
.chiroq .ish-soralgan { margin: 0; font-size: 0.8rem; color: var(--sariq); }
.chiroq .ish-amallar { display: flex; gap: 0.3rem; align-items: center; }
/* Tugmalar kichik, lekin barmoq uchun yetarli: 2rem ≈ 32px. */
.chiroq .ish-tugma { min-width: 2rem; padding: 0.3rem 0.5rem; font-size: 0.8rem; }
/* `#ish-stoli-holat` ning sinfi (nomi tarixiy). */
.chiroq .boshqaruv-holat { margin: 0; overflow-wrap: anywhere; }
/* Qator amallari — maketning `.tugma`: panel foni, hover'da nur. Nur va
   bosilish faqat keng yuzda: `/m` da tugmaning harakati Tong mikro
   harakatiniki (`mobil.css` «e.»), uni bu yerdan bosib bo'lmaydi. */
.chiroq .ish-amallar .ikkilamchi { background: var(--panel2); color: var(--matn); border-color: var(--chiziq2); font-weight: 500; }
@media (min-width: 1024px) {
  .chiroq .ish-amallar .ikkilamchi {
    transition: border-color var(--orta) ease, box-shadow var(--orta) ease, transform var(--tez) ease;
  }
  .chiroq .ish-amallar .ikkilamchi:not(:disabled):hover { border-color: var(--chegara-a); box-shadow: var(--nur); }
  .chiroq .ish-amallar .ikkilamchi:not(:disabled):active { transform: scale(0.96); }
}

@media (max-width: 1023px) {
  /* Vazifalar boshi: iz, sarlavha, meta satri. */
  .chiroq .ish-bosh { padding: 0 0 0.25rem; border-bottom: 0; }
  .chiroq .ish-sarlavha { margin: 0.35rem 0 0.25rem; font-size: 1.6rem; line-height: 1.1; }
  .chiroq .ish-meta { margin: 0 0 0.2rem; gap: 0.5rem; font-size: 0.82rem; }
  .chiroq .ish-amal-javob { padding: 0; color: var(--siyoh-3); }
  .chiroq .ish-amal-javob[data-xato="ha"] { color: var(--qahrabo-matn); }
  .chiroq .ish-sabab { color: var(--qahrabo-matn); }
  .chiroq .ish-soralgan { color: var(--qahrabo-matn); }

  /* Holatlar: KPI 2×2 (to'rt son bir qarashda — 560px dagi bir ustun
     shu yerda bosiladi), holat tablari bitta qator va gorizontal
     aylanadi (yetti nom 390px ga sig'maydi). Xizmatlar boshi (77 T526)
     — o'sha qaror, uning nusxasi `mobil.css` da. */
  .chiroq .ish-korinish { gap: 0.75rem; padding: 0.75rem 0 0.5rem; }
  .chiroq .ish-korinish .kpi-qator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiroq .ish-korinish .kpi { padding: 14px 14px 12px; gap: 8px; }
  .chiroq .ish-korinish .kpi .yorliq { white-space: normal; }
  .chiroq .ish-korinish .kpi-qiymat { font-size: 28px; }
  .chiroq .ish-korinish .holat-tablar {
    flex-wrap: nowrap; width: auto; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .chiroq .ish-korinish .holat-tablar::-webkit-scrollbar { display: none; }
  .chiroq .ish-korinish .holat-tab { flex: none; min-height: 44px; }

  /* Holatlar jadvali → karta: `<table>` semantikasi o'chadi, `thead`
     ekrandan yashiriladi, yorliq har katakda (`data-ustun`). Ikki
     ustunli to'r: `#` | Holat, Vazifa, Qadam (butun en), Boshlandi |
     Davomiylik, amallar. DOM tartibi jadvalniki — `dense` Holat'ni
     birinchi qatorning bo'sh o'ng katagiga qaytaradi. */
  .chiroq .ish-jadval-bosh { padding: 0.75rem 0.9rem; }
  .chiroq .ish-jadval-bosh h2 { font-size: 0.95rem; }
  .chiroq .ish-jadval-izoh { padding: 0.6rem 0.9rem 0; }
  .chiroq .ish-jadval-oyna { padding: 0.6rem; overflow-x: visible; }
  .chiroq .ish-jadval,
  .chiroq .ish-jadval tbody,
  .chiroq .ish-jadval tr,
  .chiroq .ish-jadval td { display: block; }
  .chiroq .ish-jadval { min-width: auto; border-collapse: separate; }
  .chiroq .ish-jadval thead,
  .chiroq .boshqaruv-jadval thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .chiroq .ish-jadval tbody { display: grid; gap: 0.5rem; }
  .chiroq .ish-jadval tbody tr,
  .chiroq .ish-jadval tbody tr:hover {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense;
    column-gap: 0.75rem; padding: 0.6rem 0.8rem 0.7rem;
    border: 1px solid var(--chiziq); border-radius: 12px; background: var(--sirt);
  }
  .chiroq .ish-jadval tbody tr.ish-jadval-bosh-qator { display: block; }
  /* Sarlavha katagi 1px qutida — asosning jadval sarlavhasi tushmasin
     (`revert` — UA ga; `*` ning `box-sizing`i va UA katak chekkasi qaytadi). */
  .chiroq .ish-jadval th { all: revert; box-sizing: border-box; padding: 1px; }
  .chiroq .ish-jadval td { padding: 0.3rem 0; border-bottom: 0; font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
  .chiroq .ish-jadval td.vz,
  .chiroq .ish-jadval td.ish-qadam,
  .chiroq .ish-jadval td.ish-amal-katak { grid-column: 1 / -1; min-width: 0; }
  .chiroq .ish-jadval td.vz,
  .chiroq .ish-jadval td.ish-qadam,
  .chiroq .ish-jadval td.ish-qadam + td,
  .chiroq .ish-jadval td.ish-qadam + td + td { border-top: 1px solid var(--chiziq); padding-top: 0.5rem; }
  .chiroq .ish-jadval td[data-ustun]::before,
  .chiroq .boshqaruv-jadval td[data-ustun]::before {
    content: attr(data-ustun); display: block; margin-bottom: 0.2rem;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siyoh-4);
  }
  .chiroq .ish-jadval td.mono { font-size: 0.8rem; white-space: normal; }
  .chiroq .ish-jadval .vz-id { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.75rem; white-space: normal; }
  .chiroq .ish-jadval .vz small,
  .chiroq .ish-jadval .ish-qadam small { font-size: 0.72rem; }
  .chiroq .ish-jadval .ish-qadam .ish-soralgan { color: var(--qahrabo-matn); }
  .chiroq .ish-jadval td.ish-amal-katak { padding-top: 0.6rem; }
  .chiroq .ish-jadval td.ish-amal-katak:has(.ish-amallar:empty) { display: none; }
  .chiroq .ish-jadval-bosh-qator td { padding: 1.4rem 0.5rem; }
  .chiroq .ish-jadval-bosh-qator td.ish-sabab { color: var(--qahrabo-matn); }

  /* Qator amallari: tugmalar chapdan o'raladi, barmoq nishoni 44px;
     ko'rinishi `.tugma-2` niki (eski `.ikkilamchi` sinfi JS da qoldi). */
  .chiroq .ish-amallar { flex-wrap: wrap; }
  .chiroq .ish-jadval .ish-amallar { justify-content: flex-start; }
  .chiroq .ish-tugma { min-width: 44px; min-height: 44px; padding: 0.35rem 0.6rem; }
  .chiroq .ish-amallar .ikkilamchi,
  .chiroq .boshqaruv-bosh > .ikkilamchi {
    border: 1px solid var(--chiziq-2); background: var(--sirt); color: var(--siyoh-2); font-weight: 500;
  }

  /* Monitoring boshi: iz + holat satri chapda, «Ekran» o'ngda va
     siqilmaydi — joyni holat jumlasi beradi (2026-09-24). Yon chekka
     tananing 16px i bilan bir. */
  .chiroq .boshqaruv-bosh { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0 16px; }
  .chiroq .boshqaruv-bosh > button { flex-shrink: 0; white-space: nowrap; }

  /* Monitoring jadvallari → karta (`data-ustun`): nom (`th[scope=row]`)
     butun en, qolgan to'rt katak ikki ustunda; gorizontal surish yo'q. */
  .chiroq .boshqaruv-jadval-idish { overflow-x: visible; padding: 10px 12px; }
  .chiroq .boshqaruv-jadval { min-width: 0; }
  .chiroq .boshqaruv-jadval,
  .chiroq .boshqaruv-jadval tbody,
  .chiroq .boshqaruv-jadval tr,
  .chiroq .boshqaruv-jadval th,
  .chiroq .boshqaruv-jadval td { display: block; }
  .chiroq .boshqaruv-jadval tbody { display: grid; gap: 8px; }
  .chiroq .boshqaruv-jadval tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding: 8px 12px;
    border: 1px solid var(--chiziq); border-radius: 12px; background: var(--sirt);
  }
  .chiroq .boshqaruv-jadval th[scope="row"] { grid-column: 1 / -1; }
  .chiroq .boshqaruv-jadval td,
  .chiroq .boshqaruv-jadval th[scope="row"],
  .chiroq .boshqaruv-jadval tbody tr:last-child td { padding: 6px 0; border-bottom: 0; min-width: 0; overflow-wrap: anywhere; }
  .chiroq .boshqaruv-jadval td.mono { white-space: normal; }

  /* Palitra varag'i (`#palitra-dialog`, `/m`): plitkalar bo'yi
     cheklanadi — uch bo'lim ekranning hammasini egallamasin, varaq
     o'z ichida skroll qilsin (T537 dan qolgan joylashuv). */
  .chiroq .kanvas-palitra { max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain; }
}

/* ═══ KIRISH, EKRAN VA UMUMIY OYNALAR — SPRINT-80 §4.2, T542 ═══
   Manba — `dizayn/chiroq/kirish.html` («SPRINT-80 maketi» bloki); maket
   tokenlari (`--feruza` …) shu fayldagi rol nomlari. Razmetkada `chiroq`
   ildizini T543 (kirish), T545 (ekran), T546 (papka, banner, toast,
   kontekst menyu) qo'yadi; ungacha bu qoidalar o'sha yuzalarni
   chizmaydi. Istisno — `#ong-panel` (allaqachon `chiroq`): undagi
   `.plitka` shu blokdan oladi.

   ILDIZ O'ZIDA. Banner (`class="aloqa chiroq c-anor"`) va kontekst
   menyusi (`kontekstOch` — `<body>` ga qo'shiladi) `.chiroq` ni o'z
   ildiziga oladi (§4.6) — selektor `.chiroq.aloqa` /
   `.chiroq.kontekst-menyu`, `.chiroq.oyna` naqshi. Ular ichidagi
   `.c-*` oilasi ildizning o'zida bo'lgani uchun `--c` shu yerda
   beriladi (`.chiroq .c-anor` avlod selektori ildizni tanlamaydi).

   `[hidden]`. Kirish formasi (`kirish.js::boshla`) va banner `hidden`
   bilan boshqariladi — ularning `display` i faqat `:not([hidden])` da;
   `.ekran-sabab` va `.ekran-chegara` ga `display` umuman berilmaydi
   (`tests/yashirish_qoidasi.rs`). */

/* ─── Kirish kartasi ─── */
/* Sahna — `main.kirish-sahna.chiroq` (T543), ildiz o'zida (`.chiroq.aloqa`
   naqshi): kartani ekran markaziga qo'yadi. Fon — `body` ning `--fon` i
   va Tun'da `.koinot`; eski `.kirish-body` yog'dusi olindi. */
.chiroq.kirish-sahna {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}
/* Holat — bugungi sinflar (`kirish.js::kartaHolat`) yoki `data-holat`:
   kutmoqda feruza (standart), tekshirilmoqda qahrabo, rad anor + chegara.
   Rang `--c` da — yuqori qirra chizig'i, orb halqasi va holat LED i
   uni bitta joydan oladi. */
.chiroq .kirish-karta {
  --c: var(--feruza); --cm: var(--feruza-matn);
  position: relative; overflow: hidden; width: min(400px, 100%); max-width: 400px; padding: 0;
  background: var(--sirt); border: 1px solid var(--chiziq); border-radius: 16px;
  box-shadow: var(--soya-2, none);
  transition: border-color var(--tez, 120ms);
}
.chiroq .kirish-karta::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
}
.chiroq .kirish-karta.tekshirilmoqda,
.chiroq .kirish-karta[data-holat="tekshirilmoqda"] { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .kirish-karta.xato,
.chiroq .kirish-karta[data-holat="xato"] {
  --c: var(--anor); --cm: var(--anor-matn);
  border-color: color-mix(in srgb, var(--anor) 40%, var(--chiziq));
}
.chiroq .kirish-yuqori {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 24px 8px; text-align: center;
}
/* Orb kanvasi (yoki `orb.js` ning CSS doirasi `.orb-iqtisod`) — bugungi
   o'lcham; halqa `outline` bilan: kanvasda `::after` yo'q. */
.chiroq .orb {
  display: block; flex: none; width: 96px; height: 96px; margin: 10px auto 4px; border-radius: 50%;
  outline: 1px solid color-mix(in srgb, var(--c, var(--feruza)) 30%, transparent); outline-offset: 10px;
  transition: outline-color var(--tez, 120ms);
}
@media (min-width: 421px) {
  .chiroq .orb { width: 128px; height: 128px; }
}
.chiroq .kirish-brend { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.chiroq .kirish-brend h1,
.chiroq .kirish-brend h2 {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  text-transform: none; color: var(--siyoh);
}
.chiroq .kirish-brend .mono { font-family: var(--mono); font-size: 11px; color: var(--siyoh-4); }
.chiroq .kirish-forma:not([hidden]) { display: flex; flex-direction: column; gap: 14px; padding: 14px 24px 22px; }
.chiroq .kirish-forma .tugma-1 { width: 100%; justify-content: center; padding-block: 11px; font-size: 14px; }
.chiroq .kirish-forma .tugma-1:disabled { opacity: 0.7; cursor: progress; transform: none; }
/* Holat satri — mono + LED (karta `--c` sidan). LED `::before`:
   `#kirish-holat` ning o'zi ko'rinadigan va jonli mintaqa (T543 — bitta
   manba), `kirish.js` unga `textContent` yozadi, ya'ni ichki `span.led`
   har yozuvda o'chardi. Matn bo'lmasa LED ham yo'q; puls yo'q (yangi
   cheksiz animatsiya — `harakat_byudjeti`). */
.chiroq .kirish-holat {
  margin: 0; min-height: 18px; display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--siyoh-4);
}
.chiroq .kirish-holat:not(:empty)::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--c); box-shadow: 0 0 6px var(--c), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
}
/* Rad — parol maydonining hoshiyasi ham anor (DOIMIY signal: orb
   chaqnashi o'tib ketadi, hoshiya odam qayta tera boshlaguncha qoladi —
   `kirish.js` `input` tinglovchisi). */
.chiroq .kirish-karta.xato .maydon input,
.chiroq .kirish-karta.xato .maydon input:focus-visible {
  border-color: color-mix(in srgb, var(--anor) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--anor) 14%, transparent);
}
/* Xato — `.xato-satr` toni; bo'sh bo'lsa ham joyi saqlanadi (maket
   sakramaydi), shuning uchun chegara/fon faqat matn bo'lganda. */
.chiroq .kirish-xato {
  margin: 0; min-height: 1.3em; padding: 0; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--anor-matn); overflow-wrap: anywhere;
}
.chiroq .kirish-xato:not(:empty) {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--anor) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--anor) 28%, transparent);
}

/* ─── Ekran: bosh qatori, ogoh, sabab, tasma, tuval ─── */
/* Sahna — `main.ekran-sahna.chiroq` (T545), ildiz o'zida. LOGIN qobig'i
   EMAS (`ekran.html` izohi, 2026-09-05): sahifa balandligi = oyna
   balandligi, bolalar ustun bo'lib turadi, tuval qolganini oladi. */
.chiroq.ekran-sahna {
  height: 100dvh; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px;
}
.chiroq .ekran-bosh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; padding: 10px 14px; }
.chiroq .ekran-bosh b { font-size: 14px; color: var(--siyoh); }
.chiroq .ekran-bosh .bosh-ong { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Holat — mono matn + LED. Oila `data-holat` dan (T545,
   `ekran.js::holat`): `ulanmoqda` qahrabo, `ulandi` yalpiz, `uzildi`/`xato`
   anor, yo'q bo'lsa kul. LED — `.ekran-holat` ichidagi `span.led`;
   puls — mavjud `.led.puls` (yangi cheksiz animatsiya yo'q), faqat
   `ulanmoqda` da yonib-o'chadi. */
.chiroq .ekran-holat {
  --c: var(--siyoh-4); --cm: var(--siyoh-3);
  margin: 0; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--siyoh-3);
}
.chiroq .ekran-holat[data-holat="ulanmoqda"] { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .ekran-holat[data-holat="ulandi"] { --c: var(--yalpiz); --cm: var(--yalpiz-matn); }
.chiroq .ekran-holat[data-holat="uzildi"],
.chiroq .ekran-holat[data-holat="xato"] { --c: var(--anor); --cm: var(--anor-matn); }
.chiroq .ekran-holat:not([data-holat="ulanmoqda"]) .led.puls { animation: none; }
.chiroq .ekran-holat-matn { min-width: 0; overflow-wrap: anywhere; }
.chiroq .ekran-ogoh {
  flex: 0 0 auto; margin: 0; display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--siyoh-2);
  background: color-mix(in srgb, var(--qahrabo) 9%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--qahrabo) 32%, transparent);
}
.chiroq .ekran-ogoh svg { flex: none; margin-top: 2px; color: var(--qahrabo-matn); }
.chiroq .ekran-ogoh b { color: var(--siyoh); }
/* Sabab (M79) — `display` YO'Q: `hidden` darvozasi (`ekran.js`). */
.chiroq .ekran-sabab {
  flex: 0 0 auto; margin: 0; padding: 9px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--anor-matn); overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--anor) 8%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--anor) 28%, transparent);
}
.chiroq .ekran-chegara { flex: 0 0 auto; margin: 0; padding: 0 4px; font-size: 12px; color: var(--siyoh-3); }
/* Tasma — `.holat-tablar` tili. Balandlik QAT'IY 40px va o'ralmaydi:
   `ekran.js::TASMA_BALANDLIK` (40 + 6) shu qiymatga tayanadi. */
.chiroq .ekran-tasma {
  flex: 0 0 auto; height: 40px; display: flex; align-items: center; gap: 4px; padding: 4px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  background: var(--sirt); border: 1px solid var(--chiziq); border-radius: 12px; box-shadow: var(--soya-1, none);
}
.chiroq .ekran-tasma-jumla { margin: 0; padding: 0 8px; white-space: nowrap; font-size: 12.5px; color: var(--siyoh-3); }
.chiroq .ekran-tab {
  flex: 0 0 auto; max-width: 14rem; height: 100%; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--siyoh-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.chiroq .ekran-tab:hover { color: var(--siyoh); }
.chiroq .ekran-tab:focus-visible { outline: 2px solid var(--feruza); outline-offset: -2px; }
/* Faol — rangdan tashqari sirt va ichki chegara; yig'ilgan — uzuk tag
   chiziq (so'z `title`/`aria-label` da ham bor). */
.chiroq .ekran-tab[aria-current="true"] { color: var(--siyoh); background: var(--sirt-3); box-shadow: inset 0 0 0 1px var(--chiziq-2); }
.chiroq .ekran-tab.yigilgan { color: var(--siyoh-4); text-decoration: underline dashed; text-underline-offset: 4px; }
.chiroq .ekran-tab .mono { font-family: var(--mono); font-size: 10px; color: var(--siyoh-4); }
/* Tuval qobig'i (`#ekran-nishon.tuval`) — qolgan bo'shliqning HAMMASI;
   `min-height: 0` shart (2026-09-05: ansiz flex bolasi mazmuni bo'yicha
   cho'ziladi va noVNC ning `scaleViewport` hisobi noaniq qutiga — jonli
   o'lchovda `→ 0px` — tayanardi). */
.chiroq .tuval {
  flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 14px; border: 1px solid var(--chiziq-2); background: var(--sirt-3);
}

/* Yashirin kiritish maydoni (`#ekran-klavish`) — mobil klaviaturani
   ochadigan YAGONA element (`<canvas>` ga klaviatura chiqmaydi).
   `display: none` YO'Q: ko'rinmaydigan element fokus OLMAYDI, ya'ni
   klaviatura ham ochilmasdi — shuning uchun u ekrandan tashqarida. */
.chiroq .ekran-klavish {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ─── Keng oyna (`#ekran-dialog`) ─── */
/* Eni ~1040px; tana oyoqqacha — iframe qolgan balandlikni oladi. */
.chiroq.oyna.katta { width: min(1040px, 96vw); max-width: none; height: min(90vh, 56rem); max-height: 90vh; }
.chiroq.oyna.katta .oyna-tana { padding: 0; gap: 0; overflow: hidden; }
.chiroq.oyna.katta .ekran-ogoh { margin: 12px 18px; }
.chiroq.oyna.katta .ekran-oyna {
  display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: auto; margin: 0;
  border: 0; border-top: 1px solid var(--chiziq); border-radius: 0 0 16px 16px; background: var(--sirt-3);
}
.chiroq.oyna .oyna-bosh .bosh-ong { display: flex; gap: 8px; align-items: center; flex: none; }

/* ─── «Ekran» tugmasi: holat `aria-pressed` dan, rang faqat shu yerda ─── */
.chiroq .tugma-2[aria-pressed] .led { margin-right: 2px; box-shadow: none; opacity: 0.6; }
.chiroq .tugma-2[aria-pressed="true"] { border-color: color-mix(in srgb, var(--yalpiz) 50%, transparent); color: var(--siyoh); }
.chiroq .tugma-2[aria-pressed="true"] .led {
  --c: var(--yalpiz); opacity: 1;
  box-shadow: 0 0 6px var(--c), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
}

/* ─── Papka oynasi (`#papka-dialog`) ─── */
.chiroq.oyna.papka-dialog { width: min(520px, 94vw); max-height: 86vh; }
.chiroq .papka-bosh-qator { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Yo'l — mono non-bo'laklar, `/` ajratgich; `vazifa.js` qo'yadigan
   `keyingi` belgisi shu ajratgich bilan almashadi. Joriy bo'lak
   (`[aria-current]`) — siyoh, qolganlari bosiladigan feruza. */
.chiroq .papka-yol {
  margin: 0; padding: 8px 10px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  min-width: 0; border-radius: 10px; background: var(--sirt-2); border: 1px solid var(--chiziq);
  font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere;
}
.chiroq .papka-yol li { display: inline-flex; align-items: center; gap: 4px; color: var(--siyoh-4); }
.chiroq .papka-yol li > svg { display: none; }
.chiroq .papka-yol li + li::before { content: "/"; color: var(--siyoh-4); }
.chiroq .papka-yol button {
  padding: 2px 4px; border: 0; border-radius: 5px; background: transparent;
  font: inherit; color: var(--feruza-matn); cursor: pointer;
}
.chiroq .papka-yol button:hover { background: color-mix(in srgb, var(--feruza) 10%, transparent); }
.chiroq .papka-yol [aria-current] { padding: 2px 4px; color: var(--siyoh); font-weight: 600; }
.chiroq .papka-royxat {
  margin: 0; padding: 0; list-style: none; max-height: min(50vh, 260px); overflow-y: auto;
  border: 1px solid var(--chiziq); border-radius: 12px;
}
.chiroq .papka-royxat li + li { border-top: 1px solid var(--chiziq); }
.chiroq .papka-band {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500;
  text-align: left; color: var(--siyoh-2); overflow-wrap: anywhere; cursor: pointer;
}
.chiroq .papka-band:hover { background: var(--sirt-2); color: var(--siyoh); }
.chiroq .papka-band:focus-visible { outline: 2px solid var(--feruza); outline-offset: -2px; }
.chiroq .papka-band svg { flex: none; color: var(--feruza-matn); }
.chiroq .papka-bosh { padding: 10px 12px; font-size: 12.5px; color: var(--siyoh-4); }

/* ─── Ulanish banneri (`#aloqa`) ─── */
/* Anor — standart (banner faqat aloqa yo'qligida chiqadi); matn
   otaniki, so'zma-so'z. */
.chiroq.aloqa {
  --c: var(--anor); --cm: var(--anor-matn);
  margin: 0; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 9%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.chiroq.aloqa:not([hidden]) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chiroq.aloqa .yorliq { color: var(--cm); }
.chiroq.aloqa .aloqa-matn {
  margin: 0; flex: 1; min-width: 200px; font-size: 13px; line-height: 1.45; color: var(--siyoh-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ─── Toast (`#toast-joy` ichida, `ozak.js::toastKorsat`) ─── */
/* Karta; nishon — yalpiz kafel, sarlavha — mono yorliq yalpiz LED bilan,
   nom — mono. Hudud (`#toast-joy.chiroq`, ildiz o'zida) doim turadi:
   keng yuzda o'ng yuqorida, `/m` da tepada to'liq enda (pastdagi
   @media). Animatsiya CHEKLI va `TOAST_MS` (5 s) bilan bir uzunlik —
   kirish 8 %, chiqish oxirgi 8 %; «Yengil» — faqat shaffoflik, «Yo'q» —
   animatsiyasiz, ikkalasida vaqt chizig'i yo'q (T546, eski ikki fayldan). */
.chiroq.toast-joy { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 20; pointer-events: none; }
.chiroq .toast {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-width: 18rem; max-width: min(24rem, calc(100vw - 3rem)); padding: 10px 14px 12px 12px;
  overflow: hidden; border-radius: 12px; pointer-events: auto;
  background: var(--sirt); border: 1px solid var(--chiziq-2); box-shadow: var(--soya-panel, none);
}
.chiroq .toast { animation: chiroq-toast-kir 5s var(--sakrash, ease) both; }
.chiroq .toast::before { content: none; }
@keyframes chiroq-toast-kir {
  0% { opacity: 0; transform: translateX(40px) scale(0.95); }
  8%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(40px); }
}
@keyframes chiroq-toast-tush {
  0% { opacity: 0; transform: translateY(-24px) scale(0.97); }
  8%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-24px); }
}
@keyframes chiroq-toast-yengil {
  0% { opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes chiroq-toast-vaqt {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
.chiroq .toast-nishon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--yalpiz-matn); box-shadow: none;
  background: color-mix(in srgb, var(--yalpiz) 12%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--yalpiz) 30%, transparent);
}
.chiroq .toast-tana { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chiroq .toast-sarlavha {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--yalpiz-matn);
}
.chiroq .toast-sarlavha::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--yalpiz);
  box-shadow: 0 0 6px var(--yalpiz), 0 0 12px color-mix(in srgb, var(--yalpiz) 45%, transparent);
}
.chiroq .toast-nom {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--siyoh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Qolgan vaqt chizig'i — `TOAST_MS` bilan bir uzunlik. */
.chiroq .toast-chiziq {
  position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--yalpiz); opacity: 0.7; transform-origin: left;
  animation: chiroq-toast-vaqt 5s linear both;
}
:root[data-harakat="yengil"] .chiroq .toast { animation-name: chiroq-toast-yengil; }
:root[data-harakat="yoq"] .chiroq .toast { animation: none; }
:root[data-harakat="yengil"] .chiroq .toast-chiziq,
:root[data-harakat="yoq"] .chiroq .toast-chiziq { display: none; }

/* ─── Kontekst menyusi (`menyu.js::kontekstOch`) ─── */
/* `position: fixed` — panel `overflow` i kesmasin; koordinatani JS qo'yadi. */
.chiroq.kontekst-menyu {
  position: fixed; z-index: 5; min-width: 9rem; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--sirt); border: 1px solid var(--chiziq-2); border-radius: 12px;
  box-shadow: var(--soya-panel, none);
}
.chiroq.kontekst-menyu .kontekst-amal {
  padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; color: var(--siyoh-2); cursor: pointer;
}
.chiroq.kontekst-menyu .kontekst-amal:hover { background: var(--sirt-3); color: var(--siyoh); }
.chiroq.kontekst-menyu .kontekst-amal:focus-visible { outline: 2px solid var(--feruza); outline-offset: -2px; }

/* ─── Ikonka katagi: harf-plitka va OS ikonkasi ─── */
/* O'lcham — bugungi (2.5rem); `.ilova-tor` dagi `.ilova-belgi` ichiga
   sig'adi. Harf-plitka rangi `data-rang` (0–4) → rang oilasi, `.ilova-belgi`
   tili (fon 12 %, chegara 30 %). `.aktor .kv-k` dagi 18px kesimi yuqorida. */
.chiroq .plitka {
  --c: var(--feruza); --cm: var(--feruza-matn);
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase; color: var(--cm);
  background: color-mix(in srgb, var(--c) 12%, var(--sirt));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.chiroq .plitka[data-rang="1"] { --c: var(--qahrabo); --cm: var(--qahrabo-matn); }
.chiroq .plitka[data-rang="2"] { --c: var(--anor); --cm: var(--anor-matn); }
.chiroq .plitka[data-rang="3"] { --c: var(--yalpiz); --cm: var(--yalpiz-matn); }
.chiroq .plitka[data-rang="4"] { --c: var(--binafsha-chiroq); --cm: color-mix(in srgb, var(--binafsha-chiroq) 70%, var(--siyoh)); }
.chiroq .plitka-belgi { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; object-fit: contain; }

/* ─── Tor oyna: katta va papka oynasi — pastki varaq, kirish to'la en ─── */
@media (max-width: 1023px) {
  .chiroq.oyna.katta,
  .chiroq.oyna.papka-dialog {
    margin: auto 0 0; width: 100%; max-width: none; max-height: 92dvh;
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
  }
  .chiroq.oyna.katta { height: 92dvh; }
  .chiroq.oyna.katta .ekran-oyna { border-radius: 0; }
  .chiroq.oyna.katta > .oyna-oyoq,
  .chiroq.oyna.papka-dialog > .oyna-oyoq { border-radius: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .chiroq.oyna.papka-dialog .oyna-oyoq .tugma-1 { min-height: 44px; justify-content: center; }
  .chiroq .papka-band { min-height: 44px; }
  .chiroq .ekran-bosh .bosh-ong { margin-left: 0; width: 100%; }
  .chiroq .ekran-bosh .bosh-ong .tugma-2 { flex: 1; justify-content: center; }
  .chiroq .kirish-karta { width: 100%; }
  /* Toast — tepalikning tagida, chetlardan 12px, tepadan tushadi. */
  .chiroq.toast-joy {
    top: calc(4.6rem + env(safe-area-inset-top, 0px));
    left: calc(0.75rem + env(safe-area-inset-left, 0px));
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
  }
  .chiroq .toast { min-width: 0; max-width: none; animation-name: chiroq-toast-tush; }
  /* `/m` o'ng panel varag'i (`dialog#ong-panel.chiroq`, SPRINT-70 T480) —
     pastki varaq; eski «+» oynasi asosidan ko'chdi (T546). `display`
     FAQAT `[open]` da (`tests/yashirish_qoidasi.rs`). */
  .chiroq.ong-panel-varaq {
    margin: auto 0 0; width: 100%; max-width: none; max-height: 80dvh;
    border: 0; border-radius: 22px 22px 0 0;
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--sirt); color: var(--siyoh-2);
  }
  .chiroq.ong-panel-varaq[open] { display: flex; flex-direction: column; }
  .chiroq.ong-panel-varaq::backdrop { background: color-mix(in srgb, var(--siyoh) 35%, transparent); }
  .chiroq.ong-panel-varaq .varaq-tutqich { margin-bottom: 0.25rem; }
  .chiroq.ong-panel-varaq .ong-panel-sarlavha { margin: 0 0 0.6rem; }
}

/* ==== KOSMIK QATLAM — FON (`.koinot`) ====
   SPRINT-33 T233 (§3.5–§3.8), SPRINT-80 T544 da `uslub.css` va
   `mobil.css` dan BITTA nusxa bo'lib ko'chdi. Tun'ning o'z tili (75 §7-8):
   Tun'da chiziladi, Tong'da yo'q.

   QAMROV ISTISNOSI. `.koinot` — uch sahifada `<body>` ning birinchi
   bolasi, `.chiroq` ostida EMAS; `<body>` ga `chiroq` qo'yilmaydi (hamma
   eski qoidaning vaznini o'zgartirardi). Shu sabab bu bo'lak qamrov
   qulfida NOMLI istisno (`tests/chiroq_qatlami.rs::
   every_rule_is_scoped_under_chiroq`): `.koinot` bilan boshlanuvchi
   selektor va uning `:root[data-harakat|data-tema-joriy]` prefiksi.

   BYUDJET (`tests/harakat_byudjeti.rs`, §3.7):
     a. `infinite` animatsiyaning `@keyframes` i FAQAT `transform` va
        `opacity` ni o'zgartiradi;
     b. `backdrop-filter` (none emas) ko'pi bilan UCHTA qoidada — T544 dan
        buyon NOLTA (`.shisha` iste'molchisiz o'chdi);
     c. `yengil` va `yoq` da `backdrop-filter: none`;
     d. cheksiz `@property` animatsiyasi yo'q (maketdagi aylanuvchi
        `--burchak` chegarasi shu sabab chiqarilmadi).
   `yoq`, kam-harakat va yashirin tab — yuz fayllaridagi `*`
   to'xtatgichlari (`chiroq.css` ulardan keyin yuklanadi, hech qachon
   ularsiz emas). */

/* --- 1. FON -----------------------------------------------------------
   `position: fixed` + `z-index: -1`: `<body>` foni kanvasga tushadi,
   koinot uning USTIDA, sahifaning qolgani esa koinot ustida. `contain:
   strict` — ichidagi har o'zgarish tashqariga maket/bo'yoq so'ramaydi. */
.koinot {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* Tumanlik — `filter: blur` O'RNIGA `radial-gradient` (§3.7-3 dan ham
   yengil: xira dog' umuman filtrsiz, rasterlash bir marta). 40% gacha
   to'liq rang — maketdagi 60px blur'ning «tanasi». Siljish `transform`. */
.koinot-tuman {
  position: absolute;
  background: radial-gradient(closest-side, var(--tuman-rang) 0%, var(--tuman-rang) 40%, transparent 100%);
  animation: koinot-suzish 28s ease-in-out infinite alternate;
}
.koinot-tuman-a { --tuman-rang: var(--tuman1); width: 720px; height: 520px; left: -120px; top: -160px; }
.koinot-tuman-b { --tuman-rang: var(--tuman2); width: 620px; height: 460px; right: -160px; top: 120px; animation-duration: 34s; }
.koinot-tuman-c { --tuman-rang: var(--tuman3); width: 760px; height: 420px; left: 30%; bottom: -220px; animation-duration: 40s; }
@keyframes koinot-suzish {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.12); }
}

/* Yulduzlar — uch qatlam. Har qatlam BITTA element: yulduzlar uning
   `box-shadow` ro'yxati, koordinatalari markazdan (quyidagi hosila blok,
   `scripts/yulduzlar.py`). Rang faqat `var(--yulduz)`.

   UCHISH (2026-09-24, foydalanuvchi tanlovi — ufq to'ri o'rniga): qatlam
   ekran markazidan `scale` bilan kattalashadi — yulduzlar chetga tarqalib
   yaqinlashadi, koinot ichida oldinga uchilayotgandek. Chuqurlikdan
   xira chiqadi, chetga yetganda so'nadi. Har qatlamning IKKINCHI nusxasi
   (`.juft`, o'sha yulduzlar) yarim davr keyin keladi — biri so'nganda
   ikkinchisi to'lib turadi, ekran hech qachon bo'shamaydi.

   Oldingi parallaks (`translate` bilan 50–90 s da 30–110px) sekundiga
   1–2px yurardi: 1–3px lik yulduz piksel to'riga yopishib, har yarim
   sekundda bir piksel SAKRARDI (foydalanuvchi: «plavniy emas»).
   `will-change` qatlamni kompozitorga beradi — `scale` subpiksel
   aniqlikda, qayta bo'yoqsiz yuradi. Milt (`opacity` bilan butun qatlam
   birdan o'chib-yonardi) olib tashlandi: tiriklikni uchish beradi. */
.koinot-yulduz {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  opacity: var(--yulduz-kuch);
  will-change: transform, opacity;
}
.koinot-yulduz.y1 { width: 1px; height: 1px; animation: koinot-uchish 64s cubic-bezier(0.55, 0, 0.9, 0.6) infinite; }
.koinot-yulduz.y2 { width: 2px; height: 2px; animation: koinot-uchish 52s cubic-bezier(0.55, 0, 0.9, 0.6) -17s infinite; }
.koinot-yulduz.y3 { width: 3px; height: 3px; animation: koinot-uchish 40s cubic-bezier(0.55, 0, 0.9, 0.6) -29s infinite; }
.koinot-yulduz.y1.juft { animation-delay: -32s; }
.koinot-yulduz.y2.juft { animation-delay: -43s; }
.koinot-yulduz.y3.juft { animation-delay: -9s; }
@keyframes koinot-uchish {
  0% { transform: scale(0.3); opacity: 0; }
  30%, 70% { opacity: var(--yulduz-kuch); }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ==== YULDUZLAR: HOSILA — QO'LDA TAHRIRLANMAYDI ==== */
.koinot-yulduz.y1 {
  box-shadow:
    -1038px 469px var(--yulduz), -506px 494px var(--yulduz), -866px 223px var(--yulduz), 39px 103px var(--yulduz), 714px 453px var(--yulduz), 264px 56px var(--yulduz),
    708px 456px var(--yulduz), -100px -531px var(--yulduz), -20px -228px var(--yulduz), -12px -577px var(--yulduz), -746px 564px var(--yulduz), 413px 313px var(--yulduz),
    229px -496px var(--yulduz), -56px 299px var(--yulduz), -200px 378px var(--yulduz), 922px 290px var(--yulduz), 754px 236px var(--yulduz), 727px -83px var(--yulduz),
    -942px 493px var(--yulduz), -417px 474px var(--yulduz), 507px 587px var(--yulduz), 588px -409px var(--yulduz), 963px -90px var(--yulduz), -394px 283px var(--yulduz),
    1014px 529px var(--yulduz), 622px 389px var(--yulduz), -118px -409px var(--yulduz), -1008px 348px var(--yulduz), -188px 560px var(--yulduz), 94px 199px var(--yulduz),
    -668px -389px var(--yulduz), 714px -368px var(--yulduz), -1001px -623px var(--yulduz), 171px 185px var(--yulduz), -323px 123px var(--yulduz), 332px 533px var(--yulduz),
    887px -203px var(--yulduz), 910px -201px var(--yulduz), 429px -527px var(--yulduz), 1073px -22px var(--yulduz), 443px 526px var(--yulduz), -1016px -427px var(--yulduz),
    -84px 349px var(--yulduz), 189px 168px var(--yulduz), 420px 387px var(--yulduz), -1100px -341px var(--yulduz), 112px -606px var(--yulduz), -707px -54px var(--yulduz),
    -238px -424px var(--yulduz), 1006px -378px var(--yulduz), -853px 594px var(--yulduz), -991px -31px var(--yulduz), 320px -501px var(--yulduz), -936px 377px var(--yulduz),
    -735px -206px var(--yulduz), -37px 499px var(--yulduz), -326px -438px var(--yulduz), -775px 430px var(--yulduz), -867px 380px var(--yulduz), 84px -628px var(--yulduz),
    335px 350px var(--yulduz), 455px -429px var(--yulduz), 751px 238px var(--yulduz), 671px 141px var(--yulduz), 375px 634px var(--yulduz), 920px -312px var(--yulduz),
    745px -536px var(--yulduz), 481px 11px var(--yulduz), -130px -81px var(--yulduz), 289px -397px var(--yulduz), 780px -336px var(--yulduz), -717px -329px var(--yulduz),
    905px 519px var(--yulduz), -756px -129px var(--yulduz), 669px 508px var(--yulduz), 77px -29px var(--yulduz), 573px -2px var(--yulduz), -411px -621px var(--yulduz),
    -1028px 527px var(--yulduz), -1046px -365px var(--yulduz), -313px -445px var(--yulduz), 210px 128px var(--yulduz), 595px -75px var(--yulduz), 673px -524px var(--yulduz),
    -417px -240px var(--yulduz), -151px 89px var(--yulduz), -320px 321px var(--yulduz), 609px 466px var(--yulduz), -175px -509px var(--yulduz), 688px -160px var(--yulduz),
    -802px 4px var(--yulduz), 256px -191px var(--yulduz), -686px 547px var(--yulduz), 921px 101px var(--yulduz), 612px 41px var(--yulduz), 793px -258px var(--yulduz),
    -233px -162px var(--yulduz), -779px 443px var(--yulduz), -622px 182px var(--yulduz), -1088px 432px var(--yulduz), 127px 287px var(--yulduz), -924px -312px var(--yulduz),
    292px 346px var(--yulduz), 490px -603px var(--yulduz), 182px 407px var(--yulduz), -441px 639px var(--yulduz), 1013px 590px var(--yulduz), -783px -439px var(--yulduz),
    1050px 234px var(--yulduz), -1040px -441px var(--yulduz), 649px -383px var(--yulduz), -404px 372px var(--yulduz), 767px 461px var(--yulduz), 577px 345px var(--yulduz),
    -378px 411px var(--yulduz), -1099px -330px var(--yulduz), 959px 363px var(--yulduz), 477px -6px var(--yulduz), 172px -465px var(--yulduz), -327px -187px var(--yulduz),
    -311px -607px var(--yulduz), 559px 96px var(--yulduz), 989px 13px var(--yulduz), -889px -497px var(--yulduz), 420px -122px var(--yulduz), 974px -501px var(--yulduz),
    828px -474px var(--yulduz), -146px 259px var(--yulduz), 53px -413px var(--yulduz), -180px 101px var(--yulduz), -379px -493px var(--yulduz), -918px -105px var(--yulduz),
    747px -279px var(--yulduz), -933px 640px var(--yulduz), -491px 219px var(--yulduz), -857px 226px var(--yulduz), 683px 591px var(--yulduz), 133px 88px var(--yulduz),
    829px -521px var(--yulduz), 840px -499px var(--yulduz), -1051px 63px var(--yulduz), -1045px 121px var(--yulduz), 266px -161px var(--yulduz), 933px -546px var(--yulduz),
    -465px 139px var(--yulduz), 215px 530px var(--yulduz), -288px 491px var(--yulduz), 284px 627px var(--yulduz), -575px -589px var(--yulduz), -489px -49px var(--yulduz),
    190px -619px var(--yulduz), 81px -304px var(--yulduz), -206px 633px var(--yulduz), -427px -58px var(--yulduz), 903px 275px var(--yulduz), 867px 277px var(--yulduz),
    226px -127px var(--yulduz), 542px -246px var(--yulduz), -424px -220px var(--yulduz), -1088px -646px var(--yulduz), 76px 627px var(--yulduz), -116px 339px var(--yulduz),
    -1052px -61px var(--yulduz), 546px 383px var(--yulduz), 368px -529px var(--yulduz), 311px -202px var(--yulduz), -578px 86px var(--yulduz), 851px -212px var(--yulduz),
    69px 96px var(--yulduz), 169px -638px var(--yulduz), 484px 622px var(--yulduz), 35px 7px var(--yulduz), -515px -414px var(--yulduz), -1092px -471px var(--yulduz),
    1093px 568px var(--yulduz), 536px 350px var(--yulduz), 527px -6px var(--yulduz), 1100px 576px var(--yulduz), -843px 556px var(--yulduz), 962px -424px var(--yulduz),
    -401px -548px var(--yulduz), 783px -309px var(--yulduz), 259px -225px var(--yulduz), 695px 137px var(--yulduz), -11px -41px var(--yulduz), 789px -473px var(--yulduz),
    -1051px 548px var(--yulduz), 261px 402px var(--yulduz), -555px -501px var(--yulduz), 730px -146px var(--yulduz), 1003px -308px var(--yulduz), -436px -230px var(--yulduz),
    857px -25px var(--yulduz), 177px -377px var(--yulduz), -1011px -510px var(--yulduz), -427px 184px var(--yulduz), -399px 344px var(--yulduz), 831px 503px var(--yulduz),
    125px -40px var(--yulduz), 339px 189px var(--yulduz), 127px 119px var(--yulduz), 424px -425px var(--yulduz), 839px -468px var(--yulduz), -393px -301px var(--yulduz),
    112px -53px var(--yulduz), -1015px 607px var(--yulduz), -126px 372px var(--yulduz), 978px 36px var(--yulduz), 413px 278px var(--yulduz), -368px -49px var(--yulduz),
    578px -144px var(--yulduz), 626px 108px var(--yulduz), 143px 507px var(--yulduz), -390px -376px var(--yulduz), 966px 409px var(--yulduz), -451px -63px var(--yulduz),
    447px -405px var(--yulduz), -922px -551px var(--yulduz), -599px 15px var(--yulduz), 632px 39px var(--yulduz), -811px -364px var(--yulduz), 215px 207px var(--yulduz),
    643px 218px var(--yulduz), 965px 21px var(--yulduz), -411px -58px var(--yulduz), -1092px 52px var(--yulduz), -426px 334px var(--yulduz), 856px -65px var(--yulduz),
    -278px -114px var(--yulduz), -1036px -432px var(--yulduz), 461px 557px var(--yulduz), 984px 80px var(--yulduz), -454px 9px var(--yulduz), -237px 375px var(--yulduz),
    -698px 302px var(--yulduz), -164px 341px var(--yulduz), 400px -608px var(--yulduz), 51px 555px var(--yulduz), -543px -39px var(--yulduz), 175px -239px var(--yulduz),
    202px -149px var(--yulduz), -488px -578px var(--yulduz), -628px 16px var(--yulduz), 817px 320px var(--yulduz), -87px 270px var(--yulduz), 110px -433px var(--yulduz),
    558px -267px var(--yulduz), -1011px -79px var(--yulduz), 659px 570px var(--yulduz), -864px 238px var(--yulduz), -528px -337px var(--yulduz), 109px 648px var(--yulduz),
    -224px -413px var(--yulduz), 402px -442px var(--yulduz), -996px -298px var(--yulduz), -95px -617px var(--yulduz), -959px -422px var(--yulduz), -462px -148px var(--yulduz),
    -168px -399px var(--yulduz), 8px 49px var(--yulduz), 100px 364px var(--yulduz), 1060px -12px var(--yulduz), 91px 408px var(--yulduz), -488px 544px var(--yulduz),
    1053px -449px var(--yulduz), -686px -148px var(--yulduz), 368px -233px var(--yulduz), -144px -115px var(--yulduz), 964px 512px var(--yulduz), 202px 515px var(--yulduz),
    -215px 85px var(--yulduz), 432px -400px var(--yulduz), 471px 234px var(--yulduz), -151px -255px var(--yulduz), -835px -359px var(--yulduz), -300px -553px var(--yulduz),
    94px -107px var(--yulduz), -571px -4px var(--yulduz), -3px 374px var(--yulduz), 581px 114px var(--yulduz), -223px -94px var(--yulduz), 360px 401px var(--yulduz),
    809px -25px var(--yulduz), -372px -568px var(--yulduz), -309px -515px var(--yulduz), 744px 617px var(--yulduz), -556px 39px var(--yulduz), 702px -235px var(--yulduz),
    -749px 633px var(--yulduz), 734px 158px var(--yulduz), 321px -31px var(--yulduz), 106px 301px var(--yulduz), -419px -397px var(--yulduz), 990px 193px var(--yulduz),
    556px -439px var(--yulduz), -703px -113px var(--yulduz), 193px -479px var(--yulduz), 873px 118px var(--yulduz), 135px 300px var(--yulduz), -365px -406px var(--yulduz),
    536px -309px var(--yulduz), 24px -6px var(--yulduz), 336px 281px var(--yulduz), -1019px 338px var(--yulduz), -666px -66px var(--yulduz), -489px 583px var(--yulduz),
    706px -79px var(--yulduz), 647px -368px var(--yulduz), 230px -53px var(--yulduz);
}
.koinot-yulduz.y2 {
  box-shadow:
    802px 448px var(--yulduz), -480px -369px var(--yulduz), -420px -181px var(--yulduz), 45px 492px var(--yulduz), -407px -269px var(--yulduz), 983px -559px var(--yulduz),
    772px -594px var(--yulduz), -260px 109px var(--yulduz), 930px -595px var(--yulduz), 759px 88px var(--yulduz), 616px 516px var(--yulduz), -1059px 615px var(--yulduz),
    -506px -77px var(--yulduz), 1041px -228px var(--yulduz), -408px -332px var(--yulduz), -900px 615px var(--yulduz), 1008px -128px var(--yulduz), 457px -492px var(--yulduz),
    -118px -84px var(--yulduz), -1025px 143px var(--yulduz), -809px 630px var(--yulduz), 31px 238px var(--yulduz), 721px -470px var(--yulduz), -931px 195px var(--yulduz),
    506px -12px var(--yulduz), -523px -24px var(--yulduz), 931px -552px var(--yulduz), -1007px 136px var(--yulduz), 1057px -117px var(--yulduz), 807px 186px var(--yulduz),
    205px -184px var(--yulduz), -77px 239px var(--yulduz), 538px 381px var(--yulduz), 442px 610px var(--yulduz), -654px 381px var(--yulduz), 138px 293px var(--yulduz),
    -898px -569px var(--yulduz), -897px -611px var(--yulduz), 616px 554px var(--yulduz), 319px 5px var(--yulduz), -506px 282px var(--yulduz), 722px -522px var(--yulduz),
    139px -425px var(--yulduz), -338px 78px var(--yulduz), 238px -511px var(--yulduz), 946px -358px var(--yulduz), 101px 587px var(--yulduz), 493px -575px var(--yulduz),
    1025px -269px var(--yulduz), 134px 560px var(--yulduz), -63px -184px var(--yulduz), 711px -470px var(--yulduz), -303px -67px var(--yulduz), -281px 305px var(--yulduz),
    791px 283px var(--yulduz), -522px -631px var(--yulduz), -292px 380px var(--yulduz), 503px 377px var(--yulduz), 751px 249px var(--yulduz), 1059px -404px var(--yulduz),
    505px 243px var(--yulduz), 53px 7px var(--yulduz), 415px -325px var(--yulduz), -856px -415px var(--yulduz), -685px -19px var(--yulduz), 732px -14px var(--yulduz),
    -519px 285px var(--yulduz), -276px -425px var(--yulduz), 1031px -406px var(--yulduz), -729px -420px var(--yulduz), -958px -175px var(--yulduz), 654px -378px var(--yulduz),
    1047px 464px var(--yulduz), -978px -82px var(--yulduz), -343px 135px var(--yulduz), -147px -87px var(--yulduz), 923px 165px var(--yulduz), 1030px -412px var(--yulduz),
    -406px 302px var(--yulduz), -105px 301px var(--yulduz), 903px -166px var(--yulduz), -816px 490px var(--yulduz), 274px 272px var(--yulduz), -791px 82px var(--yulduz),
    797px 549px var(--yulduz), -937px -272px var(--yulduz), -1017px 221px var(--yulduz), 301px 335px var(--yulduz), 1031px 553px var(--yulduz), -133px 87px var(--yulduz),
    -666px 232px var(--yulduz), 384px 148px var(--yulduz), 26px 234px var(--yulduz), -86px -160px var(--yulduz), -172px -62px var(--yulduz), 847px -230px var(--yulduz),
    -452px 280px var(--yulduz), 1038px -586px var(--yulduz), -7px -487px var(--yulduz), -645px 415px var(--yulduz), -563px -477px var(--yulduz), 320px -357px var(--yulduz),
    -20px 423px var(--yulduz), 1051px 126px var(--yulduz), -507px -80px var(--yulduz), -496px -554px var(--yulduz), -230px -335px var(--yulduz), -520px 503px var(--yulduz),
    -733px 489px var(--yulduz), 887px -604px var(--yulduz), -355px 32px var(--yulduz), 627px 535px var(--yulduz), 9px -403px var(--yulduz), -477px -100px var(--yulduz),
    148px -438px var(--yulduz), 977px 137px var(--yulduz), 378px -421px var(--yulduz), 450px 326px var(--yulduz), 686px -336px var(--yulduz), 1050px 233px var(--yulduz),
    -610px -517px var(--yulduz), 627px -330px var(--yulduz), -363px 39px var(--yulduz), 508px -411px var(--yulduz), 565px 572px var(--yulduz), 98px -632px var(--yulduz),
    839px -245px var(--yulduz), 619px 45px var(--yulduz), 377px -417px var(--yulduz), 877px -309px var(--yulduz), -868px 540px var(--yulduz), 935px -325px var(--yulduz);
}
.koinot-yulduz.y3 {
  box-shadow:
    310px -135px var(--yulduz), 310px -135px 4px 1px var(--yulduz-nur), 842px -49px var(--yulduz), 842px -49px 4px 1px var(--yulduz-nur), 148px -284px var(--yulduz), 148px -284px 4px 1px var(--yulduz-nur),
    602px 582px var(--yulduz), 602px 582px 4px 1px var(--yulduz-nur), -300px -634px var(--yulduz), -300px -634px 4px 1px var(--yulduz-nur), 78px 376px var(--yulduz), 78px 376px 4px 1px var(--yulduz-nur),
    -643px -385px var(--yulduz), -643px -385px 4px 1px var(--yulduz-nur), 678px 42px var(--yulduz), 678px 42px 4px 1px var(--yulduz-nur), 7px -374px var(--yulduz), 7px -374px 4px 1px var(--yulduz-nur),
    -1039px 502px var(--yulduz), -1039px 502px 4px 1px var(--yulduz-nur), -361px -54px var(--yulduz), -361px -54px 4px 1px var(--yulduz-nur), -963px 514px var(--yulduz), -963px 514px 4px 1px var(--yulduz-nur),
    150px 572px var(--yulduz), 150px 572px 4px 1px var(--yulduz-nur), -978px 112px var(--yulduz), -978px 112px 4px 1px var(--yulduz-nur), 692px -210px var(--yulduz), 692px -210px 4px 1px var(--yulduz-nur),
    883px -62px var(--yulduz), 883px -62px 4px 1px var(--yulduz-nur), 162px -410px var(--yulduz), 162px -410px 4px 1px var(--yulduz-nur), -488px -340px var(--yulduz), -488px -340px 4px 1px var(--yulduz-nur),
    591px 397px var(--yulduz), 591px 397px 4px 1px var(--yulduz-nur), -974px 78px var(--yulduz), -974px 78px 4px 1px var(--yulduz-nur), 750px -465px var(--yulduz), 750px -465px 4px 1px var(--yulduz-nur),
    -564px 562px var(--yulduz), -564px 562px 4px 1px var(--yulduz-nur), 559px -219px var(--yulduz), 559px -219px 4px 1px var(--yulduz-nur), -354px 385px var(--yulduz), -354px 385px 4px 1px var(--yulduz-nur),
    -160px -478px var(--yulduz), -160px -478px 4px 1px var(--yulduz-nur), -304px 65px var(--yulduz), -304px 65px 4px 1px var(--yulduz-nur), -698px -558px var(--yulduz), -698px -558px 4px 1px var(--yulduz-nur),
    -412px 621px var(--yulduz), -412px 621px 4px 1px var(--yulduz-nur), 956px -422px var(--yulduz), 956px -422px 4px 1px var(--yulduz-nur), 686px 381px var(--yulduz), 686px 381px 4px 1px var(--yulduz-nur),
    -1053px -75px var(--yulduz), -1053px -75px 4px 1px var(--yulduz-nur), 477px -136px var(--yulduz), 477px -136px 4px 1px var(--yulduz-nur), 567px -628px var(--yulduz), 567px -628px 4px 1px var(--yulduz-nur),
    -616px -584px var(--yulduz), -616px -584px 4px 1px var(--yulduz-nur), 130px -533px var(--yulduz), 130px -533px 4px 1px var(--yulduz-nur), 773px 186px var(--yulduz), 773px 186px 4px 1px var(--yulduz-nur),
    -663px 361px var(--yulduz), -663px 361px 4px 1px var(--yulduz-nur), 632px -557px var(--yulduz), 632px -557px 4px 1px var(--yulduz-nur), -557px 548px var(--yulduz), -557px 548px 4px 1px var(--yulduz-nur),
    991px -310px var(--yulduz), 991px -310px 4px 1px var(--yulduz-nur), -1054px -14px var(--yulduz), -1054px -14px 4px 1px var(--yulduz-nur), 985px 46px var(--yulduz), 985px 46px 4px 1px var(--yulduz-nur),
    -707px -633px var(--yulduz), -707px -633px 4px 1px var(--yulduz-nur), -606px -260px var(--yulduz), -606px -260px 4px 1px var(--yulduz-nur), -914px -636px var(--yulduz), -914px -636px 4px 1px var(--yulduz-nur),
    155px -544px var(--yulduz), 155px -544px 4px 1px var(--yulduz-nur), -396px -224px var(--yulduz), -396px -224px 4px 1px var(--yulduz-nur), 921px 612px var(--yulduz), 921px 612px 4px 1px var(--yulduz-nur),
    904px -151px var(--yulduz), 904px -151px 4px 1px var(--yulduz-nur);
}
/* ==== YULDUZLAR HOSILASI TUGADI ==== */

/* Uchar yulduz — faqat tunda. */
.koinot-uchar {
  position: absolute;
  top: 12%;
  left: 62%;
  width: 180px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--asos), var(--yulduz));
  opacity: 0;
  transform: rotate(-24deg);
  animation: koinot-uchar 11s ease-in 3s infinite;
}
@keyframes koinot-uchar {
  0% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  2% { opacity: 1; }
  7%, 100% { opacity: 0; transform: rotate(-24deg) translateX(-520px); }
}

/* --- Darajalar (§3.7 jadvali; `yoq` — yuz fayllaridagi `*`) ---------
   | | To'liq | Yengil | Yo'q |
   | Yulduzlar (uchish), tumanlik | harakatda | QOTGAN | qotgan |
   | Juft yulduz qatlami, uchar yulduz | bor | YO'Q | yo'q |
   | Avatar, LED | bor | bor | QOTGAN | */
:root[data-harakat="yengil"] .koinot-tuman,
:root[data-harakat="yengil"] .koinot-yulduz {
  animation: none;
}
/* Juft qatlam qotgan holda asl qatlamning USTIGA tushardi (bir xil
   yulduzlar, bir xil `scale`) — ikki baravar yorug' bo'lmasin. */
:root[data-harakat="yengil"] .koinot-yulduz.juft,
:root[data-harakat="yengil"] .koinot-uchar,
:root[data-harakat="yoq"] .koinot-yulduz.juft,
:root[data-harakat="yoq"] .koinot-uchar {
  display: none;
}

/* Telefon miltillashi (SPRINT-33 T236, T544 gacha `mobil.css` da) —
   tegish ekranida Android tilelarni tashlab yuborardi: suhbat matni bo'sh
   joyga aylanib, qaytib chiqardi. Juft yulduz qatlamlari (6 → 3 ta katta
   qatlam) va `will-change` olinadi; uchish/tuman animatsiyasi (`toliq`)
   QOLADI. Kenglik — `/m` yuzi chegarasi (`ozak.js::YUZ_KENG`); qoida shu
   faylda, chunki `mobil.css` dan keyin yuklanadigan asosiy
   `.koinot-yulduz` uni bosib ketardi. */
@media (pointer: coarse) and (max-width: 1023px) {
  .koinot-yulduz.juft { display: none; }
  .koinot-yulduz { will-change: auto; }
}

/* Tong — fon chizilmaydi (foydalanuvchi: «Light mode'da yulduzlar
   umuman kerak emas»). Qatlam DOM da qoladi (uch sahifa u bilan
   ochiladi) — animatsiyasi ham yurmaydi. */
:root[data-tema-joriy="tong"] .koinot { display: none; }
/* ==== KOSMIK QATLAM TUGADI ==== */