/*
 * POYDEVOR USLUB — barcha temalar uchun.
 *
 * ═══ BU FAYL QANDAY BERILADI ═══
 * `GET /assets/theme.css?v=<hash>` marshruti orqali. Serverda `npm`
 * yo'q, ya'ni Vite bilan build qilish imkonsiz — `ThemeAssets` izohida
 * batafsil.
 *
 * ═══ RANGLAR BU FAYLDA YO'Q ═══
 * `--c-primary` kabi o'zgaruvchilar sahifa `<style>` iga INLINE
 * quyiladi (`PanelTheme::cssVariables()`), chunki ular MIJOZGA XOS va
 * tez o'zgaradi. Bu fayl esa hammaga bir xil va bir yil keshlanadi.
 *
 * Ya'ni bu fayl faqat `var(--c-*)` ga MUROJAAT qiladi, qiymat bermaydi.
 *
 * ═══ TEMA BUNI QANDAY O'ZGARTIRADI ═══
 * `themes/{slug}/theme.css` shu fayldan KEYIN qo'shiladi, ya'ni oddiy
 * CSS ustuvorligi bilan ustiga yozadi. Tema butun faylni ko'chirib
 * olmasligi kerak — faqat farqni yozadi.
 */

/* ══════════════════════ QATLAM NARVONI (z-index) ══════════════════════
 *
 * ═══ NIMA UCHUN BU JADVAL KERAK ═══
 * Ilgari har bir qoida o'z izohida boshqa raqamni asos qilib olardi
 * («`.topbar` — 20, ya'ni menyu 40 bo'lsin»). Raqamlar vaqt o'tib
 * o'zgardi, izohlar esa qolib ketdi va UCHTA yashirin to'qnashuv
 * paydo bo'ldi. Endi yagona manba SHU JADVAL — qiymat o'zgartirilsa
 * shu yerda ham tuzatiladi.
 *
 * ═══ 🔴 ENG MUHIM QOIDA: STACKING KONTEKST SHIFT QO'YADI ═══
 * `position` + musbat `z-index` bo'lgan element STACKING KONTEKST
 * yasaydi. Uning ICHIDAGI hech qanday `z-index` tashqariga chiqmaydi —
 * bola qanchalik baland bo'lsa ham, ildizda OTASINING darajasida
 * chiziladi.
 *
 * Ya'ni `.pick-panel { z-index: 60 }` degani u 60-darajada degani
 * EMAS: u `.card:has(.pick[data-ochiq])` ichida va u karta 50-darajada.
 * Panel ildizda 50 bo'lib chiqadi. Ichki qiymatlar faqat AKA-UKALARGA
 * nisbatan ishlaydi.
 *
 * ═══ ILDIZ DARAJASIDAGI TARTIB (yuqoridan pastga) ═══
 *
 *   100  .skip-link:focus-visible   klaviatura bilan o'tish havolasi.
 *                                   Hech narsa uni bosmasligi kerak —
 *                                   u ekran o'quvchi foydalanuvchining
 *                                   yagona chiqish yo'li.
 *    62  .yon-tugma                 yon menyu tutqichi. `.side` dan
 *                                   YUQORI: menyu ochiq turganda ham
 *                                   bosilib yopilishi kerak.
 *    60  .side (≤900)               yon menyu varag'i.
 *    58  .yon-parda                 menyu pardasi. Menyudan past,
 *                                   qolgan HAMMASIDAN yuqori — ochilganda
 *                                   sahifa ham, reklama ham qoraytiriladi.
 *    55  .topbar, .site-head        ikki maketning yopishqoq yuqori
 *                                   qatori (panel / ommaviy sayt). Ular
 *                                   BIR VAQTDA hech qachon bo'lmaydi,
 *                                   shuning uchun bir daraja.
 *                                   Ochiq tanlagichdan YUQORI: sahifa
 *                                   aylantirilganda qator g'olib bo'ladi.
 *                                   Panellar PASTGA ochiladi, ya'ni bu
 *                                   ularni kesib qo'ymaydi.
 *    52  .site-pick-panel           ommaviy platforma tanlagichi.
 *                                   `.reklama` dan YUQORI (pastda turgan
 *                                   reklama ro'yxat oxirini yopardi).
 *    50  .card:has(.pick[data-ochiq])
 *                                   ochiq tanlagichning KARTASI.
 *                                   `.tabbar` (40) dan YUQORI bo'lishi
 *                                   SHART — aks holda ro'yxat pastki
 *                                   navigatsiya ortida qoladi.
 *    45  .reklama                   suzuvchi reklama. Ochiq tanlagichdan
 *                                   PAST: faol harakat passiv e'londan
 *                                   ustun. `.tabbar` dan yuqori, lekin
 *                                   ≤600 da u tabbar ustiga ko'tariladi,
 *                                   ya'ni geometrik to'qnashuv yo'q.
 *    40  .tabbar                    pastki navigatsiya.
 *
 * ═══ SHU KONTEKSTLAR ICHIDAGI QIYMATLAR ═══
 *   .pick-panel        60  →  `.card:has(...)` (50) ichida
 *   .lang-pick-menu    40  →  `.topbar` (55) ichida
 *   .reklama-yop        1  →  `.reklama` (45) ichida
 *
 * Bu raqamlar ATAYLAB ildiz jadvaliga mos EMAS: ular boshqa o'lchovda
 * o'lchanadi. Ularni "tuzatish" hech narsani o'zgartirmaydi.
 *
 * `.tabbar-more-menu` da `z-index` ATAYLAB YO'Q: u `position:
 * absolute` va aka-ukalari statik, ya'ni qiymatsiz ham ularning
 * ustida chiziladi. `.tabbar` (40) shiftidan chiqib ketolmaydi va bu
 * `.yon-tugma` bilan to'qnashuvga olib kelardi — u qatlam bilan emas,
 * tutqichni yashirish bilan hal qilingan (`.yon-tugma` izohiga
 * qaralsin).
 * ══════════════════════════════════════════════════════════════════ */

/* ── Neytral o'zgaruvchilar ─────────────────────────────────────────
   Bular RANG SLOTLARI emas — ular interfeys karkasi (fon, chegara,
   matn). Tema ularni `theme.css` da bosib o'tishi mumkin.
   ------------------------------------------------------------------- */
:root {
    --bg: #f4f5fa;
    --panel: #ffffff;
    --text: #171a21;
    --muted: #5f6875;
    --border: #dfe3ea;
    --input-bg: #ffffff;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06);
    --radius: 10px;
    --side-width: 244px;
    --main-padding: 18px;

    /* ═══ YOPISHQOQ YUQORI QATOR BALANDLIGI ═══
       Panel ichida IKKI yopishqoq element bor: yuqori qator
       (`.topbar`, tepaga yopishadi) va buyurtma formasining o'ng
       ustuni (`.panel-form-aside`). Ikkinchisi birinchisining
       OSTIDAN boshlanishi kerak, aks holda u qator ostiga kirib
       ketadi va mazmun ustma-ust tushadi.

       Ilgari bu qiymat `.panel-form-aside` da qat'iy `78px` deb
       yozilgan edi va u YOLG'ON bo'lib chiqdi: yuqori qatorda
       maqsad qatori ham turgan va uzun matn ikki qatorga bo'linib
       qator balandligi 94px ga chiqardi. Natijada o'ng ustunning
       tepasi yuqori qator ostida ko'rinmay qolardi.

       Endi maqsad qatori yopishqoq qatordan CHIQARILDI, ya'ni
       balandlik hisoblanadigan bo'ldi:
         yuqori bo'shliq 10px + boshqaruv 38px + pastki bo'shliq
         16px + chegara 1px = 65px

       Token bo'lgani uchun bir joyda o'zgartirilsa ikkinchisi
       avtomatik moslashadi. */
    --topbar-h: 65px;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ═══ OMMAVIY SAYT TOKENLARI ═══
       Panel tokenlaridan ALOHIDA: ommaviy sayt kengroq bo'shliq va
       kuchliroq soya ishlatadi (u sotadi, panel esa ishlatiladi).

       NIMA UCHUN TOKEN, HAR JOYDA QAT'IY SON EMAS: bo'shliq bir
       joyda o'zgartirilsa butun sayt maqomi o'zgaradi. Temalar ham
       aynan shu tokenlarni bosib o'tadi — ya'ni tema faqat rangni
       emas, ZICHLIKNI ham o'zgartira oladi. */
    --s-1: 6px;
    --s-2: 10px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 36px;
    --s-6: 52px;
    --s-7: 76px;

    /* Sayt kartalari uchun uch pog'onali balandlik. */
    --lift-1: 0 1px 2px rgba(16, 24, 40, .05);
    --lift-2: 0 4px 14px rgba(16, 24, 40, .07);
    --lift-3: 0 14px 40px rgba(16, 24, 40, .10);

    /* Sayt burchagi — panel `--radius` idan KATTAROQ.
       Landing sahifada yumshoqroq shakl ishonch beradi; panelda esa
       zich ma'lumot uchun kichik burchak yaxshiroq. */
    --site-radius: 16px;
    --site-radius-sm: 10px;

    /* ═══ URG'U GRADIENTI ═══
       Uch rang slotidan yasaladi, ya'ni tema ranglarini
       o'zgartirganda gradient AVTOMATIK moslashadi. Qat'iy
       yozilsa har tema uchun qo'lda tuzatish kerak bo'lardi. */
    --site-grad: linear-gradient(135deg, var(--c-primary), var(--c-secondary) 55%, var(--c-accent));

    /* ═══ 🔴 MATN UCHUN ALOHIDA GRADIENT ═══
       Yuqoridagi uch rangli gradient KATTA BLOKDA (CTA, lenta)
       chiroyli, lekin MATNDA buzilib chiqadi: uchinchi to'xtash
       `--c-accent` va aurora temasida u sariq (`#F59E0B`).

       Sarlavha ikki-uch qatorga bo'linganda oxirgi qator aynan
       sariq zonaga tushadi va oq fonda u XOKI/ZAYTUN rangida
       ko'rinadi — ataylab qilingandek emas, XATODEK.
       (O'lchov: egasining ekran rasmi, "bilan" so'zi.)

       Matn uchun ikki to'xtash yetadi: asosiy → ikkilamchi. Ikkisi
       ham to'yingan rang va har ikki uchida kontrast saqlanadi. */
    --site-grad-text: linear-gradient(120deg, var(--c-primary), var(--c-secondary));

    /* ═══ 🔴 OQ MATN OSTIDAGI GRADIENT ═══
       `--site-grad` katta blokda ham xavfli: uning uchinchi
       to'xtashi `--c-accent` va aurora temasida u SARIQ. CTA
       blokidagi matn OQ, ya'ni sariq zonada kontrast yo'qoladi —
       oq matn sariq fonda deyarli o'qilmaydi.
       (O'lchov: egasining ikkinchi ekran rasmi, «Ro'yxatdan o'tish
       bepul...» qatori blokning o'ng yarmida yo'qolib ketgan.)

       Yechim: ikki to'xtash va IKKISI HAM qoraga qarab
       quyultirilgan. Oq matn har temada, har nuqtada o'qiladi —
       admin rangni o'zgartirsa ham (quyultirish nisbiy). */
    --site-grad-deep: linear-gradient(
        120deg,
        color-mix(in srgb, var(--c-primary) 92%, #000),
        color-mix(in srgb, var(--c-secondary) 74%, #000)
    );

    /* Sahifa kengligi. Ommaviy sayt panelga qaraganda kengroq: uzun
       matn qatorlari `.prose` bilan alohida cheklanadi. */
    --site-wrap: 1140px;
}

html[data-mode="dark"] {
    --bg: #0d1017;
    --panel: #151922;
    --text: #e9ebf1;
    --muted: #98a1b0;
    --border: #262c38;
    --input-bg: #0f131b;
    --shadow: none;

    /* ═══ NIMA UCHUN TO'Q REJIMDA SOYA BOSHQACHA ═══
       Yorug' fonda soya "ko'tarilgan" tuyg'usini beradi. To'q fonda
       esa qora soya KO'RINMAYDI — element shunchaki fonga singib
       ketadi va ierarxiya yo'qoladi.

       Yechim: to'q rejimda soya o'rniga ichki yorqin chegara
       (`inset`) ishlatiladi — u yuzani fondan ajratadi. */
    --lift-1: inset 0 1px 0 rgba(255, 255, 255, .04);
    --lift-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .35);
    --lift-3: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .45);
}

/*
 * `system` rejimi brauzer sozlamasiga ergashadi.
 *
 * NIMA UCHUN ALOHIDA BLOK: `data-mode="dark"` ni MAJBURAN tanlagan
 * mijoz brauzeri yorug' rejimda bo'lsa ham to'q ko'rishi kerak.
 * Faqat media so'rovi bo'lsa, uning tanlovi e'tiborsiz qolardi.
 */
@media (prefers-color-scheme: dark) {
    html[data-mode="system"] {
        --bg: #0d1017;
        --panel: #151922;
        --text: #e9ebf1;
        --muted: #98a1b0;
        --border: #262c38;
        --input-bg: #0f131b;
        --shadow: none;
        --lift-1: inset 0 1px 0 rgba(255, 255, 255, .04);
        --lift-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .35);
        --lift-3: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 48px rgba(0, 0, 0, .45);
    }
}

/* ══════════════════ 2c. NATIVE CHIZMALAR TEMASI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN `color-scheme` MAJBURIY ═══
 * Yuqoridagi o'zgaruvchilar BIZ chizadigan narsalarni boshqaradi.
 * Lekin sahifada BRAUZER chizadigan qismlar ham bor va ular
 * o'zgaruvchilarni KO'RMAYDI:
 *
 *   - `<select>` ochilganda chiqadigan ro'yxat (popup) — u OS
 *     chizmasi, CSS bilan stillanmaydi
 *   - belgilash katakchasi va radio (24g-2: ular endi native)
 *   - aylantirish chizig'i, matn kursori, autofill foni
 *
 * `color-scheme` bo'lmasa brauzer HAR DOIM yorug' rejimni oladi.
 * Natijada to'q temada sayt qora, ochilgan ro'yxat esa oq
 * ko'zni qamashtiradigan quti bo'lardi — egasi 1-rasmda aynan
 * shuni ko'rsatdi.
 *
 * ═══ NIMA UCHUN UCHTA QOIDA ═══
 * `system` da brauzer o'zi hal qilishi kerak (`light dark`).
 * `dark` va yorug' rejim esa MAJBURAN tanlangan, ya'ni qurilma
 * sozlamasi qanday bo'lsa ham biz aytgan sxema qo'llanadi. Aks
 * holda «to'q» tanlagan mijozda popup oq chiqib qolardi.
 *
 * ═══ NIMA UCHUN `:root` GA `light` BERILADI ═══
 * Standart rejim — yorug'. Atribut yozilmagan bo'lsa ham
 * (masalan 500 xato sahifasi tema atributisiz chiqadi) native
 * chizmalar sayt bilan mos kelishi kerak. */
:root { color-scheme: light; }
html[data-mode="dark"] { color-scheme: dark; }
html[data-mode="system"] { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 var(--font-body);
}

a { color: var(--c-primary); }

/* Fokus KO'RINADI — `outline: none` ataylab yozilmagan: klaviatura
   bilan ishlaydigan foydalanuvchi qayerda turganini bilishi kerak.

   2px, 3px EMAS: 3px maydonlarda chegara va nur bilan qo'shilib
   ~7px og'ir ramka yasardi (egasi «border katta» dedi). 2px WCAG
   uchun yetarli va yengilroq ko'rinadi. Maydonlar bu qiymatni 12g
   bo'limida yana yumshatadi. */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ── Karkas ─────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.side {
    width: var(--side-width);
    flex: 0 0 var(--side-width);
    background: var(--panel);
    border-inline-end: 1px solid var(--border);
    padding: 18px 12px 90px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
}

.main { flex: 1; min-width: 0; padding: var(--main-padding); }

/* Panelning mobil qoidalari (`.side`, `.main`, `.tabbar`) fayl
   OXIRIDAGI moslashuv narvonida — 900px pog'onasida. Sabab
   narvonning boshidagi izohda: barcha `max-width` so'rovlari
   BITTA joyda va kattadan kichikka tartibda bo'lishi kerak. */

/* ═══ 🔴 NIMA UCHUN O'TISH SHU YERDA, NARVONDA EMAS ═══
   Menyu telefonda chetdan suriladi (narvonning 900px pog'onasi) va
   surilish SILLIQ bo'lishi kerak — egasi shuni so'radi.

   O'tish e'loni narvonda YOZILMAYDI: narvon fayl OXIRIDA turadi va
   u yerdan `@media (prefers-reduced-motion: reduce)` ni bosib
   o'tardi — harakatga sezgir foydalanuvchi baribir animatsiya
   ko'rardi.

   Shu yerda esa `reduce` bloki (pastda) undan KEYIN keladi va uni
   haqli ravishda bekor qiladi.

   Desktopda `translate` hech qachon o'zgarmaydi, ya'ni bu e'lon
   u yerda hech narsa qilmaydi.

   ═══ NIMA UCHUN `translate`, `inset-inline-start` EMAS ═══
   `inset` ni animatsiya qilish har kadrda joylashuvni qayta
   hisoblashni talab qiladi va arzon telefonda seskanadi.
   `translate` esa kompozitorda ishlanadi. Bu fayldagi
   `clip-path` qaroriga (public menyu) o'xshash sabab. */
.side { transition: translate .26s cubic-bezier(.22, .61, .36, 1), visibility .26s; }

@media (prefers-reduced-motion: reduce) {
    .side { transition: none; }
}

/* ══ MOBIL YON MENYU: OCHISH TUGMASI VA PARDA ═════════════════════
 *
 * ═══ EGASINING SO'ROVI ═══
 * «chap tomondagi bosh sahifa buyurtma berish va hokozo bo'limlar
 *  iloji bo'lsa berkitilib turilsa ... bir tugmagan o'xshagan
 *  narsa qoldiramiz o'rta chap tomonda, ustiga bossa silliq bo'lib
 *  menyu ochiladi, yana bitta bossa yopiladi»
 *
 * ═══ NIMA UCHUN IKKISI HAM `display: none` ═══
 * Desktopda yon menyu DOIM ochiq, ya'ni tugma ham, parda ham
 * ma'nosiz. Ular narvonning 900px pog'onasida yoqiladi — `.tabbar`
 * bilan bir xil naqsh.
 *
 * ═══ NIMA UCHUN JS SIZ HAM BUZUQ HOLAT YO'Q ═══
 * Tugma JS ga tayanadi. JS ishlamasa u hech narsa qilmaydi, LEKIN
 * navigatsiya yo'qolmaydi: pastdagi `.tabbar` da to'rt asosiy
 * bo'lim va «Ko'proq» varag'i bor, varaqda esa menyudagi QOLGAN
 * hamma havola bor. Ya'ni tugma — qulaylik, yagona yo'l emas.
 * ══════════════════════════════════════════════════════════════════ */
.yon-tugma {
    display: none;
    position: fixed;
    inset-inline-start: 0;
    top: 50%;
    translate: 0 -50%;
    /* `.side` (60) dan yuqorida: menyu ochilganda ham bosiladi. */
    z-index: 62;
    align-items: center;
    justify-content: center;

    /* Tor va baland «tutqich»: barmoq uchun yetarli (26×74), lekin
       mazmunning ustida kam joy egallaydi. */
    width: 26px;
    height: 74px;
    padding: 0;
    border: 1px solid var(--border);
    /* Ichki tomonda chegara kerak emas — u ekran chetiga tegib
       turadi va chegara «uzilgan» ko'rinardi. */
    border-inline-start: 0;
    /* Faqat tashqi burchaklar yumaloq: tutqich chetga YOPISHGAN
       ko'rinadi va «suzib turgan tugma» bilan aralashmaydi. */
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;

    /* ═══ 🔴 NIMA UCHUN FON `--panel` EMAS ═══
       Egasining shikoyati: «buyurtmalar sahifasiga mobile
       versiyada o'tganimda chap menyuni ochish tugmasi yo'q
       bo'lib qolmoqda».

       Tugma HTML da bor edi va joylashuvi ham to'g'ri
       (`position: fixed`, `z-index: 62`, ota-elementda `transform`
       yo'q). Muammo KO'RINISHDA edi.

       Fon `var(--panel)` — kartaning foni bilan AYNAN bir xil.
       Bosh sahifada tugma orqasida sahifa foni (`--bg`) turadi va
       ajralib ko'rinadi. `/orders` da esa jadval kartasi butun
       kenglikni egallaydi, ya'ni tugma OQ ustida OQ bo'lib qoladi
       va faqat 1px chegara ko'rinadi.

       Yechim: fon endi brend rangi bilan yengil bo'yaladi va
       chegara kuchaytiriladi. Endi tugma orqasida NIMA turishidan
       qat'i nazar ko'rinadi. */
    background: color-mix(in srgb, var(--c-primary) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--c-primary) 34%, var(--border));

    /* `--lift-2` — `--lift-1` kartaning o'z soyasi bilan
       qo'shilib yo'qolib ketardi. */
    box-shadow: var(--lift-2);
    color: var(--c-primary);
    cursor: pointer;
}

/* Ochiq holatda o'q teskari tomonga qaraydi — «bosilsa yopiladi»
   degan ishora. O'tish YO'Q: bu harakat emas, holat belgisi. */
html[data-yon="ochiq"] .yon-tugma { color: var(--c-primary); }
html[data-yon="ochiq"] .yon-tugma > svg { rotate: 180deg; }

/* ══ 🔴 «KO'PROQ» VARAG'I OCHIQ BO'LSA TUTQICH YASHIRINADI ═════════
 *
 * Tutqich `z-index: 62`, `.tabbar-more-menu` esa `.tabbar` (40)
 * STACKING KONTEKSTI ichida — ya'ni varaq ildizda 40-darajada
 * chiziladi va tutqich unga qanday qiymat bersak ham TESHIB o'tadi.
 * Varaq balandligi 68vh, tutqich esa `top: 50%` da 74px — ular
 * aynan varaqning chap o'rtasida to'qnashadi.
 *
 * ═══ NIMA UCHUN QATLAM BILAN HAL QILINMADI ═══
 * Varaqni ko'tarish uchun `.tabbar` ni 62 dan yuqoriga chiqarish
 * kerak edi — u holda pastki navigatsiya yon menyuni (60) va
 * pardani (58) bosib qolardi, ya'ni bitta nuqson ikkitaga aylanardi.
 * Varaqni `.tabbar` dan tashqariga chiqarish esa HTML tuzilishini
 * buzardi (`<details>` ichida bo'lishi shart).
 *
 * ═══ NIMA UCHUN YASHIRISH TO'G'RI YECHIM ═══
 * Varaqning MAQSADI — menyudagi qolgan hamma havolani ko'rsatish
 * (yuqoridagi izohga qaralsin). Ya'ni varaq ochiq turganda yon
 * menyu tutqichi KERAK EMAS: u aynan o'sha havolalarni beradi.
 * Navigatsiya yo'qolmaydi, takror boshqaruv yo'qoladi.
 *
 * Ustuvorlik: bu selektor (0,3,1), narvondagi
 * `.yon-tugma { display: flex }` esa (0,1,0) — tartibdan qat'i
 * nazar shu qoida g'olib. */
body:has(.tabbar-more[open]) .yon-tugma { display: none; }

/* Parda menyuni mazmundan ajratadi va bosilganda yopadi.
   `aria-hidden`: u bezak, ekran o'quvchi uni o'qimasligi kerak —
   yopish uchun Escape va tugmaning o'zi bor. */
.yon-parda {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 58;
    background: color-mix(in srgb, #000 45%, transparent);
}

.brand {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 700; margin: 0 8px 16px;
    color: var(--text); text-decoration: none;
}

/* ═══ NIMA UCHUN DOIRA, YUMALOQ KVADRAT EMAS ═══
   Bu nishon logo YUKLANMAGANDA ko'rinadi, ya'ni u amalda saytning
   rasmi. Ilgari `border-radius: 7px` edi va egasi uni to'g'ri
   ta'rifladi: «to'rtburchak».

   Doira `.site-logo` bilan bir xil shakl beradi — logo yuklanganda
   sarlavhadagi shakl O'ZGARMAYDI. Ilgari yuklashdan oldin yumaloq
   kvadrat, keyin doira bo'lardi.

   Temalar bu qiymatni bosib o'tishi mumkin va bu ATAYLAB: `mango`
   qalin chegarali kvadrat, `forest` esa assimetrik burchak
   ishlatadi — ular o'sha temaning imzosi. */
.brand-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
}

/* Doira: sabab `.site-logo` da batafsil yozilgan. */
.brand-logo {
    height: 30px;
    width: 30px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.nav-group { margin-bottom: 14px; }

.nav-title {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 10px 6px;
}

.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 14px;
}

.nav-link:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }

.nav-link[aria-current="page"] {
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary); font-weight: 600;
}

.nav-link svg { flex: 0 0 18px; }

/* ── Yuqori qator ───────────────────────────────────────────────── */
.topbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 16px;
}

.topbar h1 { font-size: 20px; margin: 0; flex: 1; min-width: 160px; }

/* ═══ `.balance` OLIB TASHLANDI ═══
   Yuqori qatordagi balans endi IKKI qismli blok: summa (tranzaksiya
   tarixiga) va «+» tugmasi (to'ldirishga). Sinf nomi `.hamyon` va
   uning qoidalari 26e bo'limida.

   Eski `.balance` qoidalari BUTUNLAY o'chirildi (bu fayldan olti
   joyda va uch temadan). Nima uchun qoldirilmadi: sinf HTML da
   yo'q, ya'ni qoida hech qachon ishlamaydi. Bunday «o'lik» CSS eng
   yomon tur — keyingi odam uni tahrirlaydi va natija ko'rinmaydi. */

/* ── Qo'ng'iroq belgisi ─────────────────────────────────────────── */
/* NIMA UCHUN `inset-inline-end`, `right` EMAS: arabcha (RTL) da
   son belgining CHAP tomonida bo'lishi kerak. `right` bo'lsa u
   qo'ng'iroq ustiga chiqib ketardi. */
.qongiroq {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 999px; box-shadow: var(--shadow);
    color: var(--muted); text-decoration: none;
}

.qongiroq:hover { color: var(--c-primary); }
.qongiroq.bor { color: var(--c-primary); }

.qongiroq-son {
    position: absolute; top: -5px; inset-inline-end: -5px;
    min-width: 18px; padding: 0 4px;
    background: var(--c-danger); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
}

/* Yon menyudagi sanoq — matndan keyin, chetga suriladi.
   `.nav-link` flex bo'lgani uchun `auto` ishlaydi. */
.nishon {
    margin-inline-start: auto;
    min-width: 18px; padding: 0 5px;
    background: var(--c-danger); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
}

/* ── Kartalar ───────────────────────────────────────────────────── */
.card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
    box-shadow: var(--shadow); margin-bottom: 16px;
}

.card h2 { font-size: 15px; margin: 0 0 12px; }
.card h3 { font-size: 14px; margin: 16px 0 8px; }
.card h3:first-of-type { margin-top: 0; }

.grid { display: grid; gap: 12px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.stat {
    padding: 14px; border-radius: var(--radius); background: var(--panel);
    border: 1px solid var(--border); box-shadow: var(--shadow);
}

.stat-label { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.stat-value { font-size: 22px; font-weight: 700; margin: 0; }

/* ── Formalar ───────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }

input, select, textarea {
    width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit;
    color: var(--text); background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 8px;
}

textarea { min-height: 110px; resize: vertical; }

/* ═══ 🔴 NIMA UCHUN `margin: 4px 0 0`, `margin-top: 4px` EMAS ═══
   Ilgari faqat `margin-top` berilgan edi. Pastki bo'shliq esa
   BRAUZER STANDARTI bo'lib qolardi: `<p>` uchun `margin-block: 1em`
   — 12px shriftda ~12px.

   Natijada har maydon ostida hisoblanmagan 12px qo'shilardi:
   `.field { margin-bottom: 14px }` + 12px = 26px. Ya'ni ko'rsatma
   matni BOR maydon bilan YO'Q maydon orasidagi masofa ikki barobar
   farq qilardi.

   Bu egasining «tugmalar so'zlarni joylashishlari» shikoyatining
   bir qismi: bo'shliq tasodifiy edi, endi aniq. */
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.err { font-size: 12px; color: var(--c-danger); margin: 4px 0 0; }

/* ═══ KETMA-KET KO'RSATMA PARAGRAFLARI ═══
   `webhooks` sahifasida to'rtta `.hint` ketma-ket keladi va ular
   MAYDON izohi emas — PROZA (imzoni qanday tekshirish kerak).
   4px bo'shliq bilan ular bitta uzun blokka qo'shilib ketardi va
   o'qish tezligi tushardi. */
.hint + .hint { margin-top: var(--s-2); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; font-size: 14px; font-weight: 600; font-family: inherit;
    color: #fff; background: var(--c-primary);
    border: 0; border-radius: 8px; cursor: pointer; text-decoration: none;
}

.btn:hover { filter: brightness(.92); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--c-danger); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; }

/* ── Xabarlar ───────────────────────────────────────────────────── */
.alert { padding: 10px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.alert-ok { background: color-mix(in srgb, var(--c-success) 14%, transparent); color: var(--c-success); }
.alert-err { background: color-mix(in srgb, var(--c-danger) 14%, transparent); color: var(--c-danger); }
.alert-info { background: color-mix(in srgb, var(--c-secondary) 14%, transparent); color: var(--c-secondary); }

/* ── Jadval ─────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th, td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--border); }

th {
    font-size: 12px; color: var(--muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}

tbody tr:last-child td { border-bottom: 0; }

.badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}

.badge-gray { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.badge-info { background: color-mix(in srgb, var(--c-secondary) 16%, transparent); color: var(--c-secondary); }
.badge-success { background: color-mix(in srgb, var(--c-success) 16%, transparent); color: var(--c-success); }
.badge-warning { background: color-mix(in srgb, var(--c-warning) 18%, transparent); color: var(--c-warning); }
.badge-danger { background: color-mix(in srgb, var(--c-danger) 16%, transparent); color: var(--c-danger); }

.progress { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--c-primary); }

/* ── Mobil menyu ────────────────────────────────────────────────── */
.tabbar {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}

/* `.tabbar` ni ko'rsatish qoidasi narvonda (900px pog'onasi). */

.tabbar-item {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 10px;
    line-height: 1.15;
    color: var(--muted);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.tabbar-item[aria-current="page"] { color: var(--c-primary); }
.tabbar-more { position: static; min-width: 0; }
.tabbar-more > summary { list-style: none; }
.tabbar-more > summary::-webkit-details-marker { display: none; }
.tabbar-more > summary::marker { content: ''; }

.tabbar-more.has-current > summary,
.tabbar-more[open] > summary { color: var(--c-primary); }

.tabbar-more-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: max(4px, 16%);
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--panel);
    border-radius: 999px;
    background: var(--c-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.tabbar-more-menu {
    position: absolute;
    inset-inline: 8px;
    bottom: calc(100% + 8px);
    max-height: min(68vh, 540px);
    overflow-y: auto;
    /* Varaq oxiriga yetganda aylantirish SAHIFAGA o'tmaydi. Busiz
       mijoz ro'yxatni aylantirib tugagach sahifaning o'zi siljib
       ketardi va varaq ko'zdan g'oyib bo'lardi. */
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: var(--lift-3);
    text-align: start;
}

.tabbar-more-title {
    margin: 0 8px 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tabbar-more-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 7px 8px;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.tabbar-more-link:hover,
.tabbar-more-link[aria-current="page"] {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
}

.tabbar-more-label { min-width: 0; flex: 1; }

/* ── Yordamchilar ───────────────────────────────────────────────── */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-form { display: inline; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 13px; }

/* ── Kod (API hujjati) ──────────────────────────────────────────────
   `overflow-x: auto` va satr SINDIRILMAYDI: sindirilsa nusxa olingan
   namuna BUZILADI — masalan `'https://t.me/kanalim'` ikki qatorga
   bo'linib, reseller uni qo'lda to'g'rilashga majbur bo'lardi.
   ------------------------------------------------------------------- */
pre.code {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    tab-size: 4;
}

pre.code code { background: none; padding: 0; font-size: inherit; }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
}

/* Ekran o'quvchilar uchun — ko'rinmaydi, lekin O'QILADI. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Klaviatura bilan birinchi Tab bosilganda asosiy mazmunga o'tish
   havolasi ko'rinadi. Oddiy `.sr-only` ni focusda ochish mumkin emas:
   u table caption kabi ko'rinmasligi shart bo'lgan elementlarda ham
   ishlatiladi. */
.skip-link:not(:focus):not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 100;
    padding: 10px 14px;
    border: 2px solid var(--c-primary);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--lift-3);
    font-weight: 700;
    text-decoration: none;
}

#asosiy { scroll-margin-block-start: 74px; }

/* ── OMMAVIY SAYT (Faza 11) ─────────────────────────────────────────
   ═══ NIMA UCHUN AYNI FAYLDA, ALOHIDA MARSHRUT EMAS ═══
   Ikkinchi uslub marshruti (`/assets/site.css`) qo'shilsa:
     - yana bitta versiyalash, ETag va kesh boshqaruvi kerak bo'lardi
     - tema ustiga yozishi ikki faylga bo'linardi va admin qaysi
       biriga yozishini bilmasdi
     - panel va sayt BIR XIL o'zgaruvchilarni ishlatadi, ya'ni
       ajratish sun'iy bo'lardi

   Narxi: panel ham bu ~3 KB ni yuklaydi. Lekin fayl bir yil
   keshlanadi (`?v=<hash>`), ya'ni bu AMALDA bir marta sodir bo'ladi.

   Sinf nomlari `site-` prefiksi bilan: panel sinflari bilan
   to'qnashmasligi uchun.
   ------------------------------------------------------------------- */

/* ══════════════════════════════════════════════════════════════════
 * OMMAVIY SAYT FONI: TEKIS RANG EMAS, QATLAMLI YUZA
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «orqa fon doim bir xil ekanini payqaysiz»
 *
 * U haq edi. Ilgari bu qoida shunchaki `background: var(--bg)`
 * edi — ya'ni butun sayt, o'nta sahifa, bitta tekis kulrang
 * ustida turardi. Faqat oq kartalar fonni buzardi.
 *
 * ═══ NIMA UCHUN BU MUAMMO ═══
 * Rangli lenta FAQAT bosh sahifada chiziladi (`layouts/public`
 * dagi `@hasSection('hero')` sharti). Qolgan TO'QQIZ sahifa —
 * katalog, platforma, kategoriya, xizmat, API, blog, maqola,
 * savol-javob, statik sahifa — hech qanday rang langariga ega
 * emasdi. Ular tekis kulrangda ochilardi va shu sababli hammasi
 * bir xil, "tugallanmagan" ko'rinardi.
 *
 * ═══ YECHIM: UCH QATLAM ═══
 *   1. Ikki yumshoq radial nur — sahifaning YUQORI qismida, tema
 *      rangidan. Ular mazmunga chuqurlik beradi.
 *   2. Mayda nuqta naqshi — yuzaga "mato" hissi beradi. 22px
 *      qadamda va 0.5px nuqta: u SEZILADI, lekin KO'RINMAYDI
 *      (ya'ni matnni chalg'itmaydi).
 *   3. Tekis `--bg` — eng ostki qatlam, zaxira.
 *
 * ═══ NIMA UCHUN RASM EMAS ═══
 * Naqsh rasmi ~15-40 KB va u qo'shimcha so'rov. O'zbekistondagi
 * mobil internetda bu sezilarli. `radial-gradient` esa nol bayt.
 *
 * ═══ 🔴 NIMA UCHUN `background-attachment: fixed` YO'Q ═══
 * U "parallaks" beradi, lekin iOS Safari da har aylantirishda
 * butun qatlamni QAYTA CHIZADI — sahifa seskanadi. Shu sababli
 * nurlar `background-size` bilan qat'iy o'lchamda va oqim bilan
 * birga suriladi.
 *
 * ═══ NIMA UCHUN `no-repeat` FAQAT NURLARDA ═══
 * Nuqta naqshi TAKRORLANISHI kerak (u butun sahifani qoplaydi),
 * nurlar esa yo'q — ular faqat yuqorida. Har qatlam uchun alohida
 * `background-repeat` qiymati beriladi.
 * ══════════════════════════════════════════════════════════════════ */
body.site {
    display: block;
    background-color: var(--bg);
    background-image:
        radial-gradient(closest-side at 15% 0%,
            color-mix(in srgb, var(--c-primary) 9%, transparent), transparent),
        radial-gradient(closest-side at 85% 4%,
            color-mix(in srgb, var(--c-secondary) 7%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, var(--text) 7%, transparent) .5px, transparent .5px);
    background-size: 130% 900px, 110% 700px, 22px 22px;
    background-position: left top, right top, left top;
    background-repeat: no-repeat, no-repeat, repeat;
}

/* To'q rejimda nuqta naqshi OQ bo'lishi kerak — `--text` allaqachon
   och rang, ya'ni `color-mix` o'zi to'g'ri ishlaydi. Lekin nurlar
   kuchliroq bo'lishi kerak: to'q fonda 9% deyarli ko'rinmaydi. */
html[data-mode="dark"] body.site {
    background-image:
        radial-gradient(closest-side at 15% 0%,
            color-mix(in srgb, var(--c-primary) 16%, transparent), transparent),
        radial-gradient(closest-side at 85% 4%,
            color-mix(in srgb, var(--c-secondary) 13%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, #fff 5%, transparent) .5px, transparent .5px);
}

@media (prefers-color-scheme: dark) {
    html[data-mode="system"] body.site {
        background-image:
            radial-gradient(closest-side at 15% 0%,
                color-mix(in srgb, var(--c-primary) 16%, transparent), transparent),
            radial-gradient(closest-side at 85% 4%,
                color-mix(in srgb, var(--c-secondary) 13%, transparent), transparent),
            radial-gradient(circle,
                color-mix(in srgb, #fff 5%, transparent) .5px, transparent .5px);
    }
}

.site-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 20px;
}

/* ── Sarlavha qatori ────────────────────────────────────────────── */

/* ═══ NIMA UCHUN YARIM SHAFFOF + BLUR ═══
   Yopishqoq sarlavha qat'iy fon bilan sahifadan "ajralib" turadi va
   mazmun uning ostidan keskin kesilgandek ko'rinadi.

   `color-mix` bilan yarim shaffof fon + `backdrop-filter` esa
   mazmunni ostidan sezdiradi — sahifa yaxlit qoladi.

   ZAXIRA: `backdrop-filter` ni qo'llab-quvvatlamaydigan brauzerda
   (eski Android WebView) fon 88% shaffofmas bo'lib qoladi, ya'ni
   matn baribir O'QILADI. Shu sababli alohida `@supports` sharti
   kerak emas. */
.site-head {
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    /* ═══ NIMA UCHUN 55, ILGARI 30 EDI ═══
       30 bo'lganda sarlavha `.site-pick-panel` (o'sha paytda ham 30)
       bilan TENG edi va tenglikda DOM tartibi hal qilardi: panel
       sarlavhadan keyin kelgani uchun u yopishqoq qator ustidan
       o'tardi. Endi qator har doim g'olib — panel esa PASTGA
       ochilgani uchun kesilmaydi.

       55 — paneldagi `.topbar` bilan bir daraja: ikkovi ikki xil
       maketning yopishqoq yuqori qatori va bir vaqtda hech qachon
       bo'lmaydi. Fayl boshidagi jadvalga qaralsin. */
    z-index: 55;
}

.site-head-inner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 66px;
    /* ═══ 🔴 NIMA UCHUN `min-width: 0` ═══
       Flex bolalarining standart `min-width` i `auto`, ya'ni ular
       o'z mazmunidan kichik bo'lolmaydi. Sarlavhada uch element
       bor (brend, burger, amallar) va telefonda ular jami
       kenglikdan oshib ketardi — «Ro'yxatdan o'tish» tugmasi ekran
       chetidan CHIQIB ketgan (egasining ekran rasmi).

       `min-width: 0` brendga qisqarishga ruxsat beradi, `flex: none`
       esa amallarni qisqarishdan saqlaydi — ya'ni tugmalar butun
       qoladi, brend esa kesiladi. */
    flex-wrap: nowrap;
}

.site-brand {
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* ═══ 🔴 SAYT NOMI CHAPDA, QOLGANI O'NGDA ═══
       Egasining shikoyati: «sayt nomi + til + panel tugmalari
       noqulay holatda turibdi, sayt nomi chap tomonda qolgan
       narsalar esa o'ng tomonda tursa yaxshi».

       Ilgari uch element chapdan ketma-ket joylashardi va o'ng
       tomonda katta bo'sh joy qolardi — sarlavha «yarim
       to'ldirilgan» ko'rinardi.

       ═══ NIMA UCHUN BRENDGA `margin-inline-end`, NAVGA
           `margin-inline-start` EMAS ═══
       Desktopda `.site-burger { display: contents }` — ya'ni flex
       bolasi `<nav>` bo'ladi, telefonda esa `.site-burger` ning
       o'zi. Ikkisiga alohida qoida yozish kerak bo'lardi.

       Brend esa HAR IKKI holatda birinchi bola. Unga `auto` margin
       berilsa, o'zidan keyingi BARCHA element o'ngga suriladi —
       bitta qoida, ikki tartib.

       `margin-inline-*` ishlatiladi, `margin-right` emas: arabcha
       (RTL) sahifada tomonlar almashadi va nom o'ng chetda
       qolishi kerak. */
    margin-inline-end: auto;
}

.site-actions { flex: 0 0 auto; }

/* Burger menyusidagi kirish havolalari — standart holatda
   YASHIRIN. Ular faqat ≤620px da ko'rinadi (sabab o'sha
   pog'onada). */
.site-nav-auth { display: none; }

/* ═══ MOBIL MENYU — `<details>` BILAN, JS SIZ ═══
   Ommaviy saytda JavaScript UMUMAN yo'q va bu ataylab (`site/faq`
   izohi bilan bir xil sabab). Hamburger uchun ham JS kerak emas:

   `<details>` klaviatura bilan ishlaydi, ekran o'quvchi holatni
   («yopiq/ochiq») o'zi aytadi va CSP bilan hech qanday ziddiyat
   yo'q — nonce ham, `onclick` ham kerak emas.

   Muqobil variant — yashirin `<input type="checkbox">` + `:checked`
   — vizual jihatdan bir xil, lekin u ekran o'quvchiga «belgilash
   katakchasi» deb e'lon qilinardi va foydalanuvchi nima
   bo'layotganini tushunmasdi.

   Katta ekranda `<summary>` yashiriladi va `<details>` shunchaki
   oddiy qatorga aylanadi (pastdagi media so'rovga qarang). */
.site-burger { display: none; }

.site-burger > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--site-radius-sm);
    background: var(--panel);
    color: var(--text);
}

/* Standart uchburchak belgi olib tashlanadi (Safari/Chrome). */
.site-burger > summary::-webkit-details-marker { display: none; }
.site-burger > summary::marker { content: ''; }

/* ═══ 🔴 NIMA UCHUN BU O'TISH NARVONDA EMAS, SHU YERDA ═══
   Ilgari `transition: rotate .22s ease` narvonning ≤980 va ≤900
   pog'onalarida yozilgan edi (ikki nusxada). Narvon fayl OXIRIGA
   ko'chirilgach u `@media (prefers-reduced-motion: reduce)` dagi
   `transition: none` ni BOSIB O'TA boshladi — ya'ni harakatni
   kamaytirishni so'ragan foydalanuvchi baribir animatsiya
   ko'rardi.

   Endi o'tish shu yerda, `reduce` blokidan OLDIN. Tartib to'g'ri
   bo'ldi: `reduce` uni haqli ravishda bekor qiladi.

   Har kenglikda e'lon qilinishi zarar qilmaydi — element 980px
   dan yuqorida `display: none` (yuqoridagi qoida). */
.site-burger > summary > svg { transition: rotate .22s ease; }

.site-burger[open] > summary {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

/* ═══ NIMA UCHUN `aspect-ratio` + `object-fit` ═══
   Faqat `border-radius: 50%` yozilsa logo kvadrat bo'lmagan holda
   ELLIPSGA aylanadi. `aspect-ratio: 1` maydonni kvadrat qiladi,
   `object-fit: cover` esa rasmni cho'zmasdan markazidan qirqadi —
   ya'ni qanday logo yuklansa ham doira chiqadi. */
.site-logo {
    height: 32px;
    width: 32px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex: 1;
}

/* Havolalar "tabletka" shaklida: bosiladigan maydon kattalashadi
   (mobil barmoq uchun) va joriy sahifa aniq ko'rinadi. */
.site-nav a {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--site-radius-sm);
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

.site-nav a[aria-current="page"] {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

.site-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* ═══ TIL ALMASHTIRGICH ═══
   Ilgari bu shunchaki matn havolalar qatori edi va u sarlavhada
   "chiqib turgan" ko'rinardi. Endi bitta guruhga o'ralgan
   segmentlangan boshqaruv — joriy til ichida to'ldirilgan.

   NIMA UCHUN `<select>` EMAS: har til uchun ALOHIDA `<a href>`
   bo'lishi SEO talabi (`PublicLocale` izohi). `<select>` bilan
   havolalar HTML da qolmasdi va Google boshqa tillarni ko'rmasdi. */
.site-langs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
}

.site-langs a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--muted);
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    line-height: 1;
}

.site-langs a:hover { color: var(--text); }

/* Joriy til AJRALIB turishi kerak: mijoz qaysi tilda ekanini
   bilmasa til tugmalarini tasodifiy bosadi. */
.site-langs a[aria-current="true"] {
    color: #fff;
    background: var(--c-primary);
}

/* ── Asosiy qism ────────────────────────────────────────────────── */
.site-main { padding-block: var(--s-4) var(--s-7); }

/* ══════════════════════════════════════════════════════════════════
 * SAHIFA SARLAVHASI (yalang'och `<h1>`)
 *
 * ═══ 🔴 QANDAY XATO TUZATILDI ═══
 * `faq.blade.php` va `blog-index.blade.php` sarlavhani
 * to'g'ridan-to'g'ri `<h1>{{ $title }}</h1>` deb chiqaradi —
 * hech qanday sinf yo'q.
 *
 * `base.css` da esa FAQAT `.site-hero h1`, `.auth-card h1` va
 * `.topbar h1` qoidalari bor edi. Yalang'och `h1` selektori YO'Q.
 *
 * Natijada bu ikki sahifa BRAUZER STANDARTINI oldi: `font-size: 2em`
 * (30px) va `margin: 0.67em 0` (20px). Boshqa har sahifada sarlavha
 * 26-50px va bo'shliqlar `--s-*` tokenlaridan.
 *
 * Ya'ni savol-javob va blog sahifalari boshqa saytdan kelgandek
 * ko'rinardi. Egasining «tekstlar noto'g'ri joylashgan» degani shu
 * turdagi nomuvofiqlikni ham qamraydi.
 *
 * ═══ NIMA UCHUN SELEKTOR `.site-main > h1` ═══
 * To'g'ridan-to'g'ri farzand (`>`) ATAYLAB: `.site-hero` yoki
 * `.prose` ichidagi `h1` o'z qoidasiga ega va ular buzilmasligi
 * kerak. Faqat "hech qayerga tegishli bo'lmagan" sarlavha
 * ushlanadi.
 *
 * ═══ NIMA UCHUN `.prose h1` HAM QO'SHILDI ═══
 * `blog-show.blade.php` maqola sarlavhasini `.prose` ichida
 * chiqaradi, `.prose` esa faqat `h2`/`h3` ni stillaydi — `h1`
 * yana standart o'lchamda qolardi.
 * ══════════════════════════════════════════════════════════════════ */
.site-main > h1,
.prose > h1 {
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0 0 var(--s-2);
    max-width: 30ch;
}

/* Sarlavha ostidagi tushuntirish qatori — `.site-section-lead` bilan
   bir xil o'lcham, shunda ikki sahifa turi bir xil ko'rinadi. */
.site-main > h1 + .muted,
.prose > h1 + .muted {
    display: block;
    margin: 0 0 var(--s-4);
    font-size: 15px;
    line-height: 1.6;
    max-width: 62ch;
}

/* ── Qahramon bo'lak (landing) ──────────────────────────────────── */

/* ═══ NIMA UCHUN QAHRAMON BO'LAK O'Z FONIGA EGA ═══
   Ilgari u shunchaki markazlashtirilgan matn edi va sahifa
   "bo'sh varaq" ko'rinardi. Endi yumshoq radial nur bor.

   `radial-gradient` + `color-mix` tanlandi, rasm EMAS: rasm
   qo'shimcha so'rov (~100 KB) va u mobil internetda sahifani
   sekinlashtiradi. Gradient esa nol bayt va tema rangiga
   avtomatik moslashadi.

   `overflow: hidden` — nur chetdan chiqib gorizontal aylantirish
   chizig'ini yasamasligi uchun. */
.site-hero {
    position: relative;
    padding-block: var(--s-7) var(--s-5);
    text-align: center;
    overflow: hidden;
}

.site-hero::before {
    content: '';
    position: absolute;
    inset-inline: -20%;
    top: -60%;
    height: 150%;
    background:
        radial-gradient(closest-side, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent),
        radial-gradient(closest-side at 70% 40%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent);
    pointer-events: none;
    z-index: 0;
}

.site-hero > * { position: relative; z-index: 1; }

/* ═══ NIMA UCHUN GRADIENT MATN FAQAT BIR QISMDA ═══
   Butun sarlavhani gradient qilish o'qishni qiyinlashtiradi
   (ba'zi harflar fon bilan kontrastini yo'qotadi). Shuning uchun
   faqat URG'U so'zi `<span class="site-grad-text">` bilan
   belgilanadi.

   `background-clip: text` ni qo'llab-quvvatlamaydigan brauzerda
   matn ODDIY rangda qoladi — `color` zaxira sifatida oldin
   yoziladi. */
.site-hero h1 {
    font-size: clamp(30px, 5.5vw, 50px);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 var(--s-3);
    max-width: 18ch;
    margin-inline: auto;
}

.site-grad-text {
    color: var(--c-primary);
    /* `--site-grad` EMAS — sabab token e'lonida (uchinchi rang
       matnda xoki bo'lib chiqadi). */
    background: var(--site-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Zaxira: `background-clip: text` ishlamasa matn ko'rinmay
   qolmasligi kerak. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .site-grad-text {
        -webkit-text-fill-color: currentColor;
        background: none;
    }
}

.site-hero p {
    font-size: clamp(15px, 2.2vw, 19px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 60ch;
    margin: 0 auto var(--s-4);
}

.site-hero-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
 * QAHRAMON LENTASI: rangli fon + to'lqin + chuqur chiziq
 *
 * ═══ NIMA UCHUN BU QO'SHILDI ═══
 * Egasi solishtirish uchun ikki ekran rasmini berdi: bizniki va
 * boshqa Perfect Panel sayti. Farq RANGDA emas edi — TUZILISHDA:
 *
 *   - u yerda qahramon bo'lak rangli LENTA ustida, pastida to'lqin
 *     va chuqur chiziq bor → sahifa "loyihalangan" ko'rinadi
 *   - bizda hamma narsa deyarli oq fonda suzardi → "bo'sh varaq"
 *
 * Muhim: bu TEMA masalasi EMAS. Temani almashtirish ranglarni
 * o'zgartiradi, lekin tuzilish bosh sahifa shablonida — ya'ni
 * hamma temada bir xil bo'lardi. Shu sababli tuzatish shu yerda.
 * ══════════════════════════════════════════════════════════════════ */

:root {
    /* Lentaning uch qatlami. Uchtasi ham TEMA rangidan yasaladi,
       ya'ni tema almashtirilganda lenta ham o'zgaradi. */
    --site-band: color-mix(in srgb, var(--c-primary) 7%, var(--panel));
    --site-band-mid: color-mix(in srgb, var(--c-primary) 34%, var(--panel));
    --site-band-deep: color-mix(in srgb, var(--c-primary) 72%, #000);
}

.site-hero-band {
    position: relative;
    /* Ikki radial nur + tekis tinta. Rasm ATAYLAB ishlatilmaydi:
       u qo'shimcha so'rov va sekin internetda lenta bo'sh
       ko'rinardi (`.site-hero::before` da ham shu sabab). */
    background:
        radial-gradient(closest-side at 80% 22%,
            color-mix(in srgb, var(--c-secondary) 26%, transparent), transparent),
        radial-gradient(closest-side at 8% 6%,
            color-mix(in srgb, var(--c-primary) 20%, transparent), transparent),
        var(--site-band);
}

/* ═══ NIMA UCHUN `line-height: 0` ═══
   SVG — `inline` element va u qator balandligiga bo'ysunadi. Bu
   to'lqin ostida 4-6px oq chiziq qoldirardi va u lenta bilan
   sahifa orasida "yorilish" kabi ko'rinardi. */
.site-wave { display: block; line-height: 0; }

.site-wave svg {
    display: block;
    width: 100%;
    height: clamp(44px, 6.5vw, 92px);
}

.site-wave-back { fill: var(--site-band-mid); }
.site-wave-front { fill: var(--site-band-deep); }

/* To'lqin ostidagi chuqur chiziq — u to'lqinning old qatlami bilan
   AYNI rangda, ya'ni ikkisi bitta shakl kabi ko'rinadi. */
.site-hero-tail {
    height: clamp(18px, 2.4vw, 32px);
    background: var(--site-band-deep);
}

/* ── Ikki ustunli qahramon (matn + kirish kartasi) ───────────────── */

/* ═══ NIMA UCHUN IKKI USTUN ═══
   Markazlangan qahramon bo'lak faqat MAZMUN KO'P bo'lganda
   ishlaydi. Bizda esa o'ng tomon bo'sh qolardi va sahifa
   "tugallanmagan" ko'rinardi.

   Kirish formasi ikki vazifani bir vaqtda bajaradi: bo'shliqni
   to'ldiradi va qaytib kelgan mijozni bir bosishda panelga
   kiritadi (ilgari u avval "Kirish" ni bosishi kerak edi). */
.site-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 396px);
    gap: var(--s-6);
    align-items: center;
    text-align: start;
    padding-block: var(--s-6);
    overflow: visible;
}

/* Nur endi LENTADA — qahramon bo'lakning o'z nuri ortiqcha
   bo'lardi va ikkisi ustma-ust tushib rang dog'i yasardi. */
.site-hero-split::before { display: none; }

.site-hero-split h1 { max-width: 22ch; margin-inline: 0; }
.site-hero-split p { margin-inline: 0; margin-bottom: var(--s-4); }
.site-hero-split .site-hero-actions { justify-content: flex-start; }
.site-hero-split .site-stats { justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════════════
 * ICHKI SAHIFA QAHRAMONI (katalog, platforma, kategoriya, API)
 *
 * ═══ 🔴 QANDAY XATO TUZATILDI ═══
 * `.site-hero h1` da `max-width: 18ch; margin-inline: auto` bor.
 * Bosh sahifa buni `.site-hero-split` bilan qaytaradi, ichki
 * sahifalar esa QAYTARMAGAN — natijada sarlavha 18ch kenglikdagi
 * blok bo'lib GORIZONTAL MARKAZDA qolardi, uning ustidagi nishon
 * va ostidagi tugmalar esa CHAP chetda. Sarlavha ~200-300px
 * ichkariga surilgandek ko'rinardi.
 *
 * Egasi buni shunday ta'rifladi: «tekstlar noto'g'ri joylashgan».
 *
 * ═══ 🔴 NIMA UCHUN INLINE USLUB YETMADI ═══
 * `platform.blade.php` va `category.blade.php` da tuzatish qo'lda
 * yozilgan edi:
 *
 *     style="text-align:start;padding-block:24px 18px"
 *     style="margin-inline:0;max-width:none"
 *     style="justify-content:flex-start"
 *
 * Uch muammo:
 *   1. `max-width: none` — sarlavha to'liq 1080px ga cho'ziladi.
 *      Rus/arab tarjimasi bir qatorda butun ekranni kesib o'tadi
 *      va O'QILMAYDI.
 *   2. Har yangi sahifada TAKRORLASH kerak. `api-docs` da bir
 *      qismi tushib qolgan.
 *   3. Inline uslub tema bilan o'zgarmaydi — zichlik tokenlari
 *      (`--s-*`) e'tiborsiz qoladi.
 *
 * Endi hammasi bitta sinfda. Blade faqat `.site-hero-inner`
 * yozadi va qolgani CSS ning ishi.
 *
 * ═══ NIMA UCHUN O'Z FONI BOR ═══
 * Rangli lenta faqat bosh sahifada (`@hasSection('hero')`). Ichki
 * sahifalar rang langarisiz qolardi. Bu lenta o'sha vazifani
 * bajaradi — arzon (nol so'rov) va tema rangiga ergashadi.
 * ══════════════════════════════════════════════════════════════════ */
/* ── Qahramon yuzasi (rang langari) ──────────────────────────────
 *
 * ═══ NIMA UCHUN IKKI ALOHIDA SINF ═══
 * `.site-hero-panel` — YUZA (fon, bo'shliq, burchak)
 * `.site-hero-start` — TEKISLASH (chapdan, `max-width`)
 *
 * Ular BIRGA ishlatilishi SHART emas:
 *   - katalog sahifasi markazlashgan qoladi, lekin yuza kerak
 *     → faqat `.site-hero-panel`
 *   - platforma/kategoriya/API chapdan tekislanadi
 *     → ikkisi ham
 *
 * Bitta sinfga birlashtirilsa katalog uchun tekislashni QAYTA
 * bekor qilish kerak bo'lardi — ya'ni yana aniqlik urushi.
 */
/* ═══ 🔴 NIMA UCHUN SELEKTOR IKKI SINFDAN ═══
   `slate/theme.css` da shunday qoida bor:

       .site-hero { padding-block: var(--s-5) var(--s-4); }

   Uning aniqligi (0,1,0) va tema CSS poydevordan KEYIN qo'shiladi.
   Agar bu yerda `.site-hero-panel` (ham 0,1,0) yozilsa, slate temasi
   yuzaning yuqori/pastki bo'shlig'ini bosib o'tardi va lenta
   "yassilashib" qolardi.

   `.site-hero.site-hero-panel` = (0,2,0) — temadan yuqori.

   QOIDA: agar tema fayllari elementga BITTA sinf bilan tegsa,
   poydevor uni bosib o'tishi kerak bo'lganda IKKI sinf ishlatiladi. */
.site-hero.site-hero-panel {
    padding: var(--s-5);
    margin-top: var(--s-3);
    border-radius: calc(var(--site-radius) * 1.5);
    background:
        radial-gradient(closest-side at 92% 0%,
            color-mix(in srgb, var(--c-secondary) 14%, transparent), transparent),
        radial-gradient(closest-side at 0% 100%,
            color-mix(in srgb, var(--c-primary) 12%, transparent), transparent),
        color-mix(in srgb, var(--c-primary) 6%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--border));
}

/* Nur o'chiriladi — yuzaning o'z nuri bor, ikkisi ustma-ust
   tushsa rang dog'i yasaladi (`.site-hero-split` da ham shu). */
.site-hero-panel::before { display: none; }

/* ── Qahramon tekislashi (chapdan) ─────────────────────────────── */
.site-hero-start { text-align: start; }

/* ═══ 🔴 YANA ANIQLIK: `slate` SARLAVHAGA TEGADI ═══
   `slate/theme.css`:  .site-hero h1 { font-size: ...; max-width: 26ch }
   Aniqligi (0,1,1). `.site-hero-start h1` ham (0,1,1) — teng, ya'ni
   temada g'olib va bu yerdagi 30ch YO'QOLARDI.

   `.site-hero.site-hero-start h1` = (0,2,1) — temadan yuqori.

   Sarlavha 30ch bilan cheklanadi: `none` emas (cho'zilib ketardi),
   18ch ham emas (juda tor bo'lib «Instagram uchun SMM xizmatlari»
   to'rt qatorga bo'linardi). */
.site-hero.site-hero-start h1 {
    margin-inline: 0;
    max-width: 30ch;
    font-size: clamp(26px, 4vw, 38px);
}

.site-hero.site-hero-start p {
    margin-inline: 0;
    max-width: 68ch;
}

.site-hero.site-hero-start .site-hero-actions { justify-content: flex-start; }
.site-hero.site-hero-start .site-stats { justify-content: flex-start; }

/* ── Qahramon ichidagi kirish kartasi ───────────────────────────── */
.site-authcard {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    padding: var(--s-4);
    box-shadow: var(--lift-3);
}

.site-authcard h2 {
    margin: 0 0 var(--s-3);
    font-size: 18px;
    letter-spacing: -.01em;
}

.site-authcard .field { margin-bottom: var(--s-3); }

.site-authcard label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
}

.site-authcard .btn { width: 100%; }

/* ═══ 🔴 NIMA UCHUN YORLIQ QATORI, MANFIY CHEGARA EMAS ═══
   Birinchi versiyada "Parolni unutdingizmi?" havolasi maydondan
   KEYIN yozilgan va `margin: -22px` bilan yuqoriga tortilgan.

   Bu `.site-step` dagi bilan AYNI xato turi: joylashuv qo'lda
   hisoblangan songa tayanadi. `-22px` faqat shu shrift o'lchami va
   shu tarjima uzunligida to'g'ri; boshqa tilda yoki brauzer shrift
   o'lchamini kattalashtirganda havola input ustiga chiqadi.

   Endi havola YORLIQ bilan bir qatorda va joyni `flex` egallaydi —
   hech qanday son yo'q, ya'ni buzilishi ham mumkin emas. */
.site-auth-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: 5px;
}

.site-auth-label label { margin: 0; }

.site-auth-label a {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.site-auth-foot {
    margin: var(--s-3) 0 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

.site-auth-foot a { color: var(--c-primary); font-weight: 600; }

/* ═══ 🔴 QAHRAMON BO'LAKNING MOBIL QOIDASI BU YERDA EMAS ═══
   Ilgari shu joyda `@media (max-width: 900px)` bloki turgan va u
   qahramon bo'lakni bitta ustunga tushirardi. U ISHLAMADI.

   Sabab: fayl oxirida moslashuv narvoni bor va uning ichida
   `@media (max-width: 1100px)` bloki `.site-hero-split` ga IKKI
   ustun beradi. 380px kenglikda IKKI shart ham rost, aniqlik ham
   bir xil — ya'ni FAYLDA KEYIN turgani g'alaba qozonadi.

   1100 > 900 bo'lsa ham u KEYIN yozilgani uchun ustun keldi va
   telefonda qahramon bo'lak ikki ustunda qoldi: matn ustuni ~100px
   ga siqilib «Instagram» so'zi HAR HARF ALOHIDA QATORDA chiqdi.
   (Egasining ekran rasmi.)

   ═══ QOIDA ═══
   `max-width` so'rovlari faylda KATTADAN KICHIKKA tartibda
   yozilishi SHART. Aks holda kichikroq chegara kattaroq chegara
   tomonidan jimgina bosib o'tiladi.

   Shu sababli barcha moslashuv qoidalari fayl OXIRIDAGI yagona
   narvonda va u tartib bo'yicha tekshiriladi
   (`ThemeSystemTest`: «media so'rovlari kattadan kichikka»). */

/* ── Eyebrow nishoni (qahramon bo'lak ustidagi kichik yorliq) ────── */
.site-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 6px 14px;
    margin-bottom: var(--s-3);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 30%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 600;
}

.site-eyebrow svg { width: 15px; height: 15px; }

/* ── Ishonch raqamlari ──────────────────────────────────────────── */

/* ═══ NIMA UCHUN RAQAMLAR QAHRAMON BO'LAKDA ═══
   Yangi mijoz uchun eng katta savol — "bu sayt haqiqiymi". Xizmat
   soni, til soni va API mavjudligi shu savolga javob beradi va
   HECH QANDAY maxfiy ma'lumotni oshkor qilmaydi (narx
   ko'rsatilmaydi — sabab `site/home` izohida). */
.site-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
}

.site-stat { text-align: center; min-width: 96px; }

.site-stat b {
    display: block;
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.site-stat span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

/* ── Ishonch raqamlari lentasi (bosh sahifa) ─────────────────────
 *
 * Qahramon bo'lakdagi `.site-stats` dan FARQI: u yerda o'zgarmas
 * faktlar (til soni, API versiyalari), bu yerda esa BAZADAN
 * kelgan haqiqiy raqamlar (mijoz, buyurtma, xizmat).
 *
 * Shu sababli ko'rinishi ham boshqacha: kartada ikonka, katta
 * raqam va tushuntirish qatori. U qahramon bo'lakning takrori
 * bo'lib qolmasligi kerak. */
.site-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    margin-top: calc(var(--s-6) * -1);
    position: relative;
    z-index: 2;
}

/* ═══ NIMA UCHUN MANFIY `margin-top` ═══
   Lenta rangli qahramon bo'lakning chuqur chizig'i USTIGA chiqadi
   va u ikki qismni bir-biriga "tikadi". Aks holda rangli lenta
   tugab, oq bo'shliq, keyin kartalar boshlanardi — uch alohida
   qatlam.

   Bu `.site-step` dagi manfiy chegaradan FARQ QILADI: u yerda
   son MATN joylashuvini boshqarardi (va buzilardi), bu yerda esa
   butun blokni siljitadi — matn ustma-ust tushishi mumkin emas.

   `z-index: 2` — chuqur chiziq ustida turishi uchun. */

.site-metric {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--s-4) var(--s-3);
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    box-shadow: var(--lift-2);
}

.site-metric-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--s-1);
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    color: var(--c-primary);
}

.site-metric-ico svg { width: 20px; height: 20px; }

.site-metric-value {
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.05;
    letter-spacing: -.02em;
    /* Raqam gradient bilan — u sahifadagi eng muhim son. */
    background: var(--site-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--c-primary);
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .site-metric-value { -webkit-text-fill-color: currentColor; background: none; }
}

.site-metric-label {
    font-size: 14px;
    font-weight: 600;
}

.site-metric-hint {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* ── Kartalar to'ri ─────────────────────────────────────────────── */
/* ═══ 🔴 NIMA UCHUN QAT'IY UCH USTUN, `auto-fit` EMAS ═══
   Ilgari `repeat(auto-fit, minmax(230px, 1fr))` edi. Ikki muammo
   chiqdi va ikkisi ham egasining ekran rasmlarida ko'rinadi:

   1. `auto-fit` bo'sh treklarni YIG'ADI, ya'ni to'rda BITTA element
      qolganda u butun kenglikni egallaydi. Katalogda bitta
      platforma bor va «Telegram» kartasi 1140px ga cho'zilib karta
      emas, BANNER ko'rinardi.

   2. 230px minimum 1140px konteynerda TO'RT ustun yasaydi va olti
      kartali to'r 4+2 bo'lib nomutanosib ko'rinardi.

   Qat'iy uch ustun ikkisini ham yopadi: bitta karta uchdan bir
   kenglikda qoladi, olti karta esa 3+3 — bir xil ikki qator.

   Uch ustun `--site-wrap` (1140px) ga bog'langan: har kartaga
   ~360px, uzun sarlavha uchun ham yetarli. Torroq ekranlarda
   moslashuv narvoni 2 va 1 ustunga tushiradi. */
.site-cards {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Ikki ustunli variant — uzun matnli kartalar uchun (xizmat
   sahifasidagi xususiyatlar jadvali). Bu ham QAT'IY: sabab
   yuqorida, `auto-fit` bilan bir xil. */
.site-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.site-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    padding: var(--s-4);
    box-shadow: var(--lift-1);
}

.site-card h3 {
    margin: 0 0 var(--s-1);
    font-size: 16px;
    letter-spacing: -.01em;
}

.site-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ═══ NIMA UCHUN `transition` FAQAT KO'TARILISHDA ═══
   Butun kartani animatsiya qilish (`transition: all`) matn
   ko'chishiga olib keladi va u "titrayotgandek" ko'rinadi.
   Faqat soya, chegara va joylashuv o'zgaradi.

   `prefers-reduced-motion` hurmat qilinadi: harakatga sezgir
   foydalanuvchi uchun animatsiya butunlay o'chadi. */
.site-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.site-card-link:hover {
    border-color: color-mix(in srgb, var(--c-primary) 45%, var(--border));
    box-shadow: var(--lift-3);
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .site-card-link { transition: none; }
    .site-card-link:hover { transform: none; }
}

/* ── Ikonka doirasi (karta boshidagi belgi) ─────────────────────── */
.site-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--s-3);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    color: var(--c-primary);
}

.site-ico svg { width: 21px; height: 21px; }

/* Rang variantlari — bir xil ikonka doiralari qatori zerikarli
   ko'rinadi, turli rang esa ko'zni yo'naltiradi. */
.site-ico-2 { background: color-mix(in srgb, var(--c-secondary) 12%, transparent); color: var(--c-secondary); }
.site-ico-3 { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-accent); }
.site-ico-4 { background: color-mix(in srgb, var(--c-success) 12%, transparent); color: var(--c-success); }

/* ── Bo'lim sarlavhasi ──────────────────────────────────────────── */
.site-section { margin-top: var(--s-7); }

/* ═══ NIMA UCHUN BIRINCHI BO'LIMDA MARGIN YO'Q ═══
   Qahramon bo'lak `.site-wrap` dan tashqarida (rangli lenta) va
   uning ostida `.site-main` ning o'z `padding-block` i bor.
   Birinchi bo'lim margin'ini ham qo'shsa, lenta bilan mazmun
   orasida ikki barobar bo'shliq qolardi. */
.site-main > .site-section:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════
 * BO'LIM LENTASI: ALMASHINUVCHI YUZA
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «orqa fon doim bir xil»
 *
 * Fon qatlami (`body.site`) global chuqurlik beradi, lekin
 * BO'LIMLAR bir-biridan ajralmasdi: `.site-section` da faqat
 * `margin-top` bor edi — na fon, na bo'shliq, na ajratgich. Beshta
 * bo'lim bitta uzun oqim kabi ko'rinardi.
 *
 * ═══ 🔴 NIMA UCHUN TO'LIQ KENGLIK EMAS ═══
 * Odatdagi yechim — lentani ekran chetigacha cho'zish. Buning
 * uchun `margin-inline: calc(50% - 50vw)` kerak, LEKIN `50vw`
 * AYLANTIRISH CHIZIG'INI ham hisoblaydi va Windows/Chrome da
 * sahifa 15px ga gorizontal aylanardi (bu xato loyihada allaqachon
 * uchragan — `layouts/public` izohida yozilgan).
 *
 * Shu sababli lenta `.site-wrap` ICHIDA qoladi va yumaloq burchak
 * oladi. Bu shunchaki zaxira yechim EMAS: yumaloq karta-lenta
 * to'liq kenglikdagi tekis lentadan zamonaviyroq ko'rinadi va
 * mobil ekranda ham to'g'ri ishlaydi.
 *
 * ═══ NIMA UCHUN `--panel` EMAS ═══
 * `--panel` — KARTA rangi (oq). Lenta ham oq bo'lsa, uning ichidagi
 * oq kartalar KO'RINMAY qolardi. Shuning uchun lenta tema rangining
 * juda och tintasi: kartalar unda aniq ajralib turadi.
 * ══════════════════════════════════════════════════════════════════ */
.site-section-band {
    padding: var(--s-6) var(--s-5);
    border-radius: calc(var(--site-radius) * 1.5);
    background:
        radial-gradient(closest-side at 88% 0%,
            color-mix(in srgb, var(--c-secondary) 10%, transparent), transparent),
        color-mix(in srgb, var(--c-primary) 5%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--c-primary) 12%, var(--border));
}

/* Lenta ichidagi karta chegarasi kuchsizroq — lenta o'zi allaqachon
   ramka bergan, ikki qatlam chegara "qafas" kabi ko'rinadi. */
.site-section-band .site-card,
.site-section-band .site-step {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

/* ═══ AJRATGICH CHIZIQ ═══
   Lentasiz bo'limlar uchun — yuqorida ingichka gradient chiziq.
   U bo'lim boshlanganini bildiradi, lekin fonni o'zgartirmaydi.

   `::before` ishlatiladi, `border-top` EMAS: gradient chiziq
   chetlarda YO'QOLIB ketadi (o'rtasi to'q, chetlari shaffof) va u
   qat'iy chiziqdan yumshoqroq ko'rinadi. */
.site-section-rule { position: relative; }

.site-section-rule::before {
    content: '';
    position: absolute;
    top: calc(var(--s-5) * -1);
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--c-primary) 30%, transparent) 20%,
        color-mix(in srgb, var(--c-primary) 30%, transparent) 80%,
        transparent
    );
}

.site-section > h2 {
    font-size: clamp(21px, 3vw, 28px);
    letter-spacing: -.015em;
    margin: 0 0 var(--s-1);
    /* ═══ 🔴 NIMA UCHUN `max-width` KERAK ═══
       Ilgari bu yerda cheklov YO'Q edi va sarlavha to'liq 1080px
       kenglikka cho'zilardi. O'zbekchada bu ko'p sezilmaydi, lekin
       rus va arab tarjimalari 1.4-1.7 baravar uzun — ular bir
       qatorda butun ekranni kesib o'tardi.

       Uzun qator O'QILMAYDI: ko'z qator oxiridan boshiga qaytishda
       yo'nalishni yo'qotadi. Tipografiyada xavfsiz chegara 45-75
       belgi; sarlavha uchun 30-36 optimal. */
    max-width: 34ch;
}

.site-section > .site-section-lead {
    color: var(--muted);
    margin: 0 0 var(--s-4);
    font-size: 15px;
    max-width: 62ch;
}

/* Markazlashtirilgan bo'lim sarlavhasi. */
.site-section-center { text-align: center; }
.site-section-center > h2 { margin-inline: auto; }
.site-section-center > .site-section-lead { margin-inline: auto; }

/* ═══ 🔴 KARTA MATNI HAR DOIM CHAPDA ═══
   Bo'lim sarlavhasi markazda bo'lishi mumkin, lekin karta ICHIDAGI
   matn HECH QACHON markazda bo'lmaydi — ko'p qatorli markazlangan
   matn "sochilgan" ko'rinadi va o'qish tezligi tushadi.

   Ilgari buni har blade `style="text-align:start"` bilan qo'lda
   qilardi (`home.blade.php` da uch joyda). Inline uslub muammo:
   yangi bo'lim qo'shilsa unutiladi va xato JIM chiqadi.

   Endi qoida CSS da bir marta. `.site-metric` ATAYLAB chetda
   qoldirildi — u qisqa raqam va markazda to'g'ri ko'rinadi. */
.site-section-center .site-card,
.site-section-center .site-step,
.site-section-center .site-svc,
.site-section-center .site-faq { text-align: start; }

/* ── Maqola matni ───────────────────────────────────────────────── */
.prose { max-width: 720px; font-size: 16px; line-height: 1.7; }
.prose h2 { font-size: 21px; margin: 32px 0 10px; }
.prose h3 { font-size: 17px; margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-inline-start: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--c-primary); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

.prose blockquote {
    margin: 0 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--border);
    color: var(--muted);
}

/* `pre` da satr SINDIRILMAYDI: nusxa olingan kod namunasi buziladi
   (`base.css` dagi API hujjati bo'limi bilan bir xil sabab). */
.prose pre {
    overflow-x: auto;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 13px;
}

/* ══════════════════ MAQOLA MATNI: QOLGAN ELEMENTLAR ══════════════════
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «aloqa bo'limi juda xunuk turibdi, hech qanday css yo'q,
 *  Foydalanish shartlari, Maxfiylik siyosati, Pul qaytarish
 *  siyosati oynalari ham shunday oddiy»
 *
 * ═══ ASL SABAB ═══
 * `.prose` da FAQAT `h2`, `h3`, `p`, `ul/ol`, `li`, `a`, `img`,
 * `blockquote` va `pre` uchun qoida bor edi.
 *
 * Markdown esa Laravel da GitHub lahjasi bilan ishlanadi
 * (`GithubFlavoredMarkdownConverter`), ya'ni u JADVAL, `code`,
 * `hr`, `del` va vazifa ro'yxatini ham chiqaradi. Ularning
 * hech biri stillanmagan:
 *
 *   - jadval faqat GLOBAL `table/th/td` qoidasini olardi
 *     (chegara ostidan chiziq) va kartasiz, o'ramsiz turardi
 *   - `code` UMUMAN stillanmagan — matndan ajralmasdi
 *   - `hr` brauzer standartida (ikki qatlamli bo'rtgan chiziq)
 *   - `h4`-`h6` standart o'lchamda
 *
 * Aloqa sahifasida aynan JADVAL va sitata bor, shu sababli u
 * «hech qanday css yo'q» ko'rinardi.
 *
 * ═══ 🔴 NIMA UCHUN SAHIFA KARTAGA SOLINMADI ═══
 * Vasvasa bor: butun `.prose` ni `.site-card` kabi yuzaga solish.
 * LEKIN `.prose` YETTI joyda ishlatiladi va ularning to'rttasi
 * ALLAQACHON karta ichida (`.site-faq details`, xizmat tavsifi).
 * Ikkinchi qatlam karta «karta ichida karta» yasab, bo'shliqni
 * ikki barobar qilardi.
 *
 * Shu sababli yuza faqat MUSTAQIL sahifalarga beriladi:
 * `.site-main > .prose` (aloqa, shartlar, maxfiylik, blog
 * maqolasi). To'g'ridan-to'g'ri farzand selektori (`>`) ichki
 * ishlatilishlarni chetlab o'tadi. */
.site-main > .prose {
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    background: var(--panel);
    box-shadow: var(--lift-1);
    /* `max-width: 720px` `.prose` da bor, lekin yuza berilganda
       sahifa chetida yolg'iz qolib «chapga yopishgan» ko'rinardi.
       Markazlash uni sarlavha bilan bir o'qqa qo'yadi. */
    margin-inline: auto;
    max-width: 820px;
}

/* Sarlavhalar: `h4`-`h6` ham stillanadi — Markdown ularni
   chiqaradi va standart o'lchamda ular `p` dan ajralmasdi. */
.prose h4 { font-size: 15.5px; margin: 20px 0 6px; font-weight: 700; }
.prose h5,
.prose h6 { font-size: 14px; margin: 18px 0 6px; font-weight: 700; color: var(--muted); }

/* Birinchi sarlavhaning tepa bo'shlig'i olib tashlanadi — u
   kartaning ichki bo'shlig'i ustiga qo'shilib ikki barobar
   ko'rinardi. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* ═══ NIMA UCHUN `hr` GRADIENT ═══
   Brauzer standarti — ikki qatlamli «bo'rtgan» chiziq va u
   yassi dizaynda begona ko'rinadi. Gradient chiziq esa chetlarga
   qarab so'nadi, ya'ni bo'lim ajratgichi sifatida yumshoq. */
.prose hr {
    height: 1px;
    margin: var(--s-5) 0;
    border: 0;
    background: linear-gradient(
        to right,
        transparent,
        var(--border) 15%,
        var(--border) 85%,
        transparent
    );
}

/* ═══ NIMA UCHUN `code` UCHUN FON KERAK ═══
   Aloqa sahifasida `API kaliti` kabi atamalar `code` bilan
   yoziladi. Fonsiz ular oddiy matndan ajralmasdi va o'quvchi
   «bu aynan yozilishi kerak» degan signalni olmasdi.

   `word-break` — uzun kalit nomi konteynerdan chiqib ketmasligi
   uchun. */
.prose code {
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c-primary) 9%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--c-primary) 16%, var(--border));
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .9em;
    word-break: break-word;
}

/* `pre` ichidagi `code` ikki qatlam fon va chegara olardi. */
.prose pre code {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
}

/* ═══ 🔴 JADVAL: O'RAM VA GORIZONTAL AYLANTIRISH ═══
   Markdown jadvali `.table-wrap` ichida EMAS, ya'ni ustun ko'p
   bo'lsa u konteynerdan chiqib butun sahifani gorizontal
   aylantirardi.

   `display: block` + `overflow-x: auto` jadvalning O'ZIGA
   aylantirish beradi — bu `.table-wrap` o'ramini talab qilmaydi
   va Markdown chiqishini o'zgartirish kerak emas.

   ═══ NIMA UCHUN `min-width` YO'Q ═══
   Qat'iy `min-width` tor ekranda jadvalni majburan aylantirardi.
   Tabiiy min-content kengligi yetarli: ustunlar sig'sa aylanish
   umuman paydo bo'lmaydi. */
.prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 0 0 var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--site-radius-sm);
    font-size: 14px;
    /* `border-collapse: collapse` yumaloq burchakni buzadi —
       `separate` + `border-spacing: 0` ikkisini birlashtiradi. */
    border-collapse: separate;
    border-spacing: 0;
}

.prose thead th {
    background: color-mix(in srgb, var(--c-primary) 7%, var(--bg));
    /* Global `th` qoidasi UPPERCASE va 12px beradi. Maqola
       jadvalida sarlavha O'QILADIGAN bo'lishi kerak — u
       ma'lumot, dekoratsiya emas. */
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.prose th,
.prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }

/* Zebra: uzun jadvalda ko'z qatorni yo'qotmaydi. `nth-child`
   `even` tanlandi — birinchi qator sarlavhadan keyin oq qoladi. */
.prose tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--muted) 5%, transparent);
}

/* ═══ SITATA: OGOHLANTIRISH KO'RINISHIDA ═══
   Aloqa sahifasida sitata «Parolni hech qachon pochtada
   yubormang» kabi OGOHLANTIRISH uchun ishlatiladi. Oddiy kulrang
   chiziq bu ma'noni bermaydi.

   Yuqoridagi `.prose blockquote` qoidasi qoladi va bu unga fon
   qo'shadi — aniqligi teng, fayl tartibi bo'yicha bu keyin. */
.prose blockquote {
    padding: var(--s-3);
    border-inline-start-width: 3px;
    border-inline-start-color: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    border-radius: 0 var(--site-radius-sm) var(--site-radius-sm) 0;
    background: color-mix(in srgb, var(--c-primary) 6%, transparent);
}

.prose blockquote > :last-child { margin-bottom: 0; }

/* `strong` brauzer standartida `bold` (700). Maqola matnida 650
   yumshoqroq va qolgan sarlavhalar bilan bir oilada ko'rinadi. */
.prose strong { font-weight: 650; color: var(--text); }

/* Havola ostidagi chiziq FAQAT matn havolalarida — u o'qishni
   osonlashtiradi va «bu bosiladi» signalini beradi. */
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* Vazifa ro'yxati (`- [x] ...`). Markdown `<input disabled>`
   chiqaradi va global katakcha uslubi unga 19px o'lcham beradi —
   matn qatoridan katta. */
.prose li input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-inline-end: 6px;
    vertical-align: -.12em;
}

/* O'chirilgan matn (`~~matn~~`). */
.prose del { color: var(--muted); }

/* ── Blog ro'yxati ──────────────────────────────────────────────── */
.site-posts { display: grid; gap: 16px; }

.site-post {
    display: flex;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}

.site-post-cover {
    flex: 0 0 140px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius);
}

.site-post h2 { font-size: 17px; margin: 0 0 6px; }
.site-post h2 a { color: var(--text); text-decoration: none; }
.site-post h2 a:hover { color: var(--c-primary); }
.site-post-meta { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.site-post p { margin: 0; font-size: 14px; color: var(--muted); }

/* ── FAQ (akkordeon) ────────────────────────────────────────────── */
.site-faq { display: grid; gap: 10px; }

/* `<details>` ATAYLAB: JavaScript kerak emas, klaviatura bilan
   ishlaydi va ekran o'quvchi holatni o'zi aytadi. */
.site-faq details {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.site-faq summary {
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
}

.site-faq details[open] summary { color: var(--c-primary); margin-bottom: 8px; }
.site-faq p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ══════════════════ FAQ BOSHQARUVI (qidiruv + bo'limlar) ══════════════════
 *
 * ═══ EGASINING SO'ROVI ═══
 * «biz ham shunga o'xshashroq qilishimiz kerak ammo chiroyliroq
 *  qulayroq va qidiruv bolimlari va shunga oxshash narsalar bilan
 *  boyitishimiz kerak»
 *
 * ═══ NIMA UCHUN `hidden` BILAN BOSHLANADI ═══
 * Filtrlash JS bilan ishlaydi. JS o'chirilgan brauzerda boshqaruv
 * CHIQMAYDI — ishlamaydigan qidiruv maydoni ko'rsatishdan ko'ra
 * yaxshi. Savollar esa oddiy ro'yxat bo'lib to'liq ko'rinadi.
 *
 * Naqsh `.pick` va `.reklama` bilan bir xil: `hidden` serverdan,
 * JS uni ochadi. */
.site-faq-boshqaruv {
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

/* Ikonka maydon ICHIDA turadi: alohida ustun bo'lsa qidiruv
   maydoni tor ekranda siqilardi. */
.site-faq-qidiruv {
    position: relative;
    display: flex;
    align-items: center;
}

.site-faq-qidiruv svg {
    position: absolute;
    inset-inline-start: 13px;
    color: var(--muted);
    /* Ikonka bosishni yutmasligi kerak — bosilganda maydon
       fokuslanishi kerak. */
    pointer-events: none;
}

.site-faq-qidiruv input {
    width: 100%;
    /* Ikonka uchun joy: 13px chet + 17px ikonka + 10px bo'shliq. */
    padding-inline-start: 40px;
    border-radius: var(--site-radius-sm);
}

.site-faq-boshqaruv-teglar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* `.site-chip` — mavjud sinf. Tugma sifatida ishlatilganda
   brauzer standartlarini olib tashlash kerak. */
.site-faq-boshqaruv-teglar .site-chip {
    font: inherit;
    cursor: pointer;
    background: var(--panel);
}

/* Faol bo'lim. `aria-current` ishlatiladi, alohida sinf EMAS: holat
   ekran o'quvchiga ham yetib borishi kerak va bitta atribut ikki
   ishni bajaradi. */
.site-faq-boshqaruv-teglar .site-chip[aria-current="true"] {
    border-color: transparent;
    background: var(--site-grad-text);
    color: #fff;
}

/* Bo'limdagi savol soni — mijoz qaysi bo'lim to'laroq ekanini
   ko'radi. */
.site-faq-son {
    margin-inline-start: 5px;
    opacity: .7;
    font-size: 11px;
}

.site-faq-topilmadi {
    margin: 0 0 var(--s-4);
    padding: var(--s-3);
    border: 1px dashed var(--border);
    border-radius: var(--site-radius-sm);
    color: var(--muted);
    text-align: center;
}

/* Qidiruv bo'limni butunlay yashirsa, ostidagi bo'shliq ham
   ketishi kerak — aks holda sahifada «teshik» qolardi. */
.site-faq-bolim[hidden] { display: none; }

/* ── Nishonlar ro'yxati ─────────────────────────────────────────── */
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.site-chip {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}

.site-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ── Futer ──────────────────────────────────────────────────────── */
.site-foot {
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding-block: 32px 20px;
    margin-top: 40px;
}

.site-foot-cols {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.site-foot-brand { font-weight: 700; margin: 0 0 6px; }

.site-foot-title {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--s-2);
}

/* Futerdagi til almashtirgich — sarlavhadagi variant eng kichik
   ekranda yashiriladi (`@media max-width: 420px`), bu esa uni
   qoplaydi. */
.site-foot-langs { margin-top: var(--s-3); }

.site-foot-cols a {
    display: block;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 6px;
}

.site-foot-cols a:hover { color: var(--c-primary); }

.site-copy {
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

/* ── Sahifalash ────────────────────────────────────────────────── */
.site-pager { margin-top: var(--s-5); }

/* ═════════════════════════════════════════════════════════════════
   YANGI KOMPONENTLAR
   ═════════════════════════════════════════════════════════════════ */

/* ── Non ushoqlari (breadcrumb) ─────────────────────────────────── */

/* ═══ NIMA UCHUN KERAK ═══
   Ikki vazifa bajaradi: (1) mijoz qayerda turganini ko'radi;
   (2) Google qidiruv natijasida yo'lni ko'rsatadi — bu bosilish
   ehtimolini oshiradi (`BreadcrumbList` JSON-LD bilan birga
   ishlaydi).

   `<nav>` + `aria-label` MAJBURIY: ekran o'quvchi bu havolalar
   to'plamining nima ekanini aytishi kerak. */
.site-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
    font-size: 13px;
    color: var(--muted);
}

.site-crumbs a { color: var(--muted); text-decoration: none; }
.site-crumbs a:hover { color: var(--c-primary); }

/* Ajratuvchi CSS dan qo'yiladi, HTML dan emas: ekran o'quvchi
   "kesma" so'zini o'qib bermasligi kerak. */
.site-crumbs li + li::before {
    content: '/';
    margin-inline-end: var(--s-1);
    opacity: .5;
}

.site-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ── Nishon (badge) ─────────────────────────────────────────────── */
.site-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
}

.site-badge-ok {
    border-color: color-mix(in srgb, var(--c-success) 35%, transparent);
    background: color-mix(in srgb, var(--c-success) 10%, transparent);
    color: var(--c-success);
}

.site-badge-warn {
    border-color: color-mix(in srgb, var(--c-warning) 35%, transparent);
    background: color-mix(in srgb, var(--c-warning) 12%, transparent);
    color: var(--c-warning);
}

.site-badge-info {
    border-color: color-mix(in srgb, var(--c-primary) 32%, transparent);
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
    color: var(--c-primary);
}

/* ═══ ADMIN QO'YADIGAN TEG OHANGLARI ═══
 *
 * ═══ EGASINING SO'ROVI ═══
 * «xizmatlar tagida min max dan so'ng qo'shimcha taglar ishlatmoqda,
 *  biz ham shunga o'xshash taglarni ishlatsak yaxshi edi»
 *
 * Yuqoridagi uch ohang (`ok`, `warn`, `info`) xizmatning
 * XUSUSIYATLARI uchun (kafolat, drip-feed). Quyidagi ikkitasi esa
 * admin qo'yadigan MARKETING teglari uchun qo'shildi.
 *
 * ═══ 🔴 NIMA UCHUN SINF NOMI ENUMDAN KELADI ═══
 * `ServiceTagTone::cssClass()` qat'iy `match` bilan sinf nomini
 * qaytaradi. Bazada erkin rang ustuni bo'lganda u
 * `class="site-badge {{ $x }}"` ichiga tushib atribut
 * in'ektsiyasiga yo'l ochardi. Batafsil enum izohida. */
.site-badge-danger {
    border-color: color-mix(in srgb, var(--c-danger) 35%, transparent);
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
    color: var(--c-danger);
}

/* ═══ NIMA UCHUN URG'U TEGI TO'LDIRILGAN ═══
 * «Eng ko'p sotilgan» va «Tavsiya etiladi» — mijozning qarorini
 * o'zgartiradigan teglar. Qolganlari bilan bir xil ingichka
 * ko'rinishda bo'lsa, ular qatorda YO'QOLIB ketardi.
 *
 * ═══ NIMA UCHUN `--site-grad-text`, `--site-grad` EMAS ═══
 * Uch rangli `--site-grad` KATTA blokda chiroyli, kichik nishonda
 * esa uchinchi to'xtash ko'rinmaydi va rang «loyqa» bo'lib chiqadi.
 * `--site-grad-text` ikki rangli va u aynan kichik yuzalar uchun
 * qo'shilgan (tokenlar bo'limi izohi). */
.site-badge-accent {
    border-color: transparent;
    background: var(--site-grad-text);
    /* Oq matn — gradient har temada to'yingan brend rangida, ya'ni
       oq har holatda o'qiladi. Tema tokeni ishlatilsa yorug'
       temada oq fon ustida oq matn chiqib qolardi. */
    color: #fff;
}

/* ── Qadamlar (qanday ishlaydi) ─────────────────────────────────── */

/* ═══ NIMA UCHUN RAQAMLANGAN QADAMLAR ═══
   SMM paneli yangi mijoz uchun tushunarsiz: "avval pul
   to'ldiramanmi yoki buyurtma beramanmi?" Uch qadam bu savolni
   bir ko'rishda yopadi.

   Raqam CSS `counter` bilan yasaladi, HTML da yozilmaydi — tartib
   o'zgarsa raqamlar avtomatik to'g'rilanadi va tarjimonlar
   raqamga tegishi kerak bo'lmaydi. */
.site-steps {
    counter-reset: qadam;
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ═══ 🔴 NIMA UCHUN GRID, `position: absolute` EMAS ═══
   Birinchi versiyada raqam nishoni absolyut joylashgan edi:
   karta `padding-top` 36px, nishon esa 16px dan boshlanib 28px
   balandlikda edi.

   ═══ 🔴🔴 DIQQAT: BU IZOHDA ILGARI ICHMA-ICH IZOH BOR EDI ═══
   Yuqoridagi ikki qator ilgari KOD ko'rinishida yozilgan va
   oxirida `slash-star 36px star-slash` izohi bor edi. CSS
   izohlari ICHMA-ICH BO'LMAYDI: izoh birinchi `star-slash` da
   TUGAYDI. Natijada izohning qolgan matni CSS deb o'qildi,
   parser xato holatiga tushdi va TO'LIQ `.site-step` qoidasini
   TASHLAB YUBORDI.

   Oqibati: `counter-increment` yo'qoldi va sahifada «1 2 3»
   o'rniga «0 0 0» chiqdi; grid ham qo'llanmadi.

   Shuning uchun bu izohda `star-slash` ketma-ketligi so'z bilan
   yozilgan. Qoida `docs/09 §33` da va `ThemeSystemTest` da
   qulflangan.

   Nishon 16px dan 44px gacha joy egallaydi, mazmun esa 36px dan
   boshlanadi — ya'ni 8px USTMA-UST tushadi va raqam sarlavha
   harflari ustiga chiqadi. Egasining ekran rasmida aniq ko'rinadi:
   «1» «Ro'yxatdan o'tish» matni ustida turgan.

   Sabab chuqurroq: absolyut nishon oqimdan CHIQARILGAN, ya'ni u
   qancha joy egallaganini konteyner BILMAYDI. Bo'shliq qo'lda
   hisoblanadi va u shrift o'lchami, `--s-*` tokenlari yoki
   tarjima uzunligi o'zgarganda BUZILADI. Ya'ni bu bir marta
   tuzatib qo'yiladigan xato emas — u qaytib keladi.

   Grid da nishon ODDIY element: u o'z ustunini egallaydi va matn
   hech qachon uning ostiga tushmaydi. Sozlash uchun son kerak
   emas, ya'ni buzilishi ham mumkin emas.

   `inset-inline-start` ham kerak emas: grid `direction` ga
   bo'ysunadi, arab tilida nishon o'ziga o'zi o'ngga ko'chadi. */
.site-step {
    counter-increment: qadam;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: var(--s-3);
    row-gap: var(--s-1);
    align-items: start;
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    background: var(--panel);
    box-shadow: var(--lift-1);
}

.site-step::before {
    content: counter(qadam);
    /* Nishon ikki qatorni ham qamraydi (sarlavha + matn), ya'ni u
       kartaning yuqori chap burchagida turadi. */
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--site-grad);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* ═══ NIMA UCHUN `min-height` + `flex`, `line-height: 30px` EMAS ═══
   Nishon 30px, sarlavha 16px. `line-height: 30px` bir qatorli
   sarlavhani to'g'ri tekislaydi, lekin sarlavha IKKI qatorga
   bo'linsa (tarjima uzunroq bo'lganda — arabcha va ruschada shunday)
   qatorlar orasi 30px bo'lib blok "yorilib" ko'rinadi.

   `min-height: 30px` + markazga tekislash ikki holatni ham yopadi:
   bir qatorli sarlavha nishon markaziga to'g'ri keladi, ikki
   qatorli esa tabiiy qator oralig'i bilan cho'ziladi. */
.site-step h3 {
    grid-column: 2;
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    min-height: 30px;
    display: flex;
    align-items: center;
}

.site-step p {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

/* ── Yakuniy chaqiruv (CTA) ─────────────────────────────────────── */
.site-cta {
    margin-top: var(--s-7);
    padding: var(--s-6) var(--s-4);
    border-radius: var(--site-radius);
    /* `--site-grad` EMAS — sabab token e'lonida: uning sariq uchida
       oq matn o'qilmaydi. */
    background: var(--site-grad-deep);
    color: #fff;
    text-align: center;
}

/* ═══ NIMA UCHUN MATN RANGI QAT'IY OQ ═══
   Fon gradient va u har temada boshqa. `var(--text)` ishlatilsa
   yorug' temada qora matn to'q gradient ustida o'qilmasdi.

   Oq matn barcha temalarda ishlaydi, chunki gradient ranglari
   URG'U ranglari — ular hech qachon och bo'lmaydi (rang
   tanlashda bu qoida `docs/05-tema-tizimi.md` da yozilgan). */
.site-cta h2 {
    margin: 0 0 var(--s-2);
    font-size: clamp(22px, 3.4vw, 30px);
    letter-spacing: -.015em;
    color: #fff;
}

.site-cta p {
    margin: 0 auto var(--s-4);
    max-width: 54ch;
    font-size: 16px;
    line-height: 1.6;
    color: color-mix(in srgb, #fff 86%, transparent);
}

/* Gradient ustidagi tugma — oq fon, gradient rangida matn.
 *
 * ═══ 🔴 NIMA UCHUN `:not()` LAR KERAK ═══
 * Ilgari selektor `.site-cta .btn` edi — aniqligi (0,2,0). Har
 * tema esa `theme.css` da shunday yozadi:
 *
 *     .btn:not(.btn-ghost):not(.btn-danger) { background: <gradient> }
 *
 * Uning aniqligi (0,3,0), ya'ni YUQORI, va tema CSS poydevordan
 * KEYIN qo'shiladi. Natijada CTA tugmasi tema gradientini oldi va
 * u CTA blokining O'Z gradienti bilan bir xil rangda bo'lib
 * TUGMA KO'RINMAY QOLDI (egasining ikkinchi ekran rasmi:
 * «Bepul boshlash» so'zi fonga singib ketgan).
 *
 * Bu yerdagi selektor aniqligi (0,4,0) — tema qoidasidan yuqori.
 *
 * ═══ QOIDA ═══
 * Poydevor CSS temaning uslubini bosib o'tishi kerak bo'lsa,
 * selektor aniqligi temadagidan YUQORI bo'lishi shart. Tema
 * fayllari `.btn:not():not()` naqshini ishlatadi, ya'ni (0,3,0) —
 * poydevorda kamida (0,4,0) kerak.
 */
.site-cta .btn:not(.btn-ghost):not(.btn-danger) {
    background: #fff;
    border-color: #fff;
    color: var(--c-primary);
}

.site-cta .btn:not(.btn-ghost):not(.btn-danger):hover {
    background: color-mix(in srgb, #fff 88%, transparent);
}

.site-cta .btn-ghost {
    background: transparent;
    border-color: color-mix(in srgb, #fff 55%, transparent);
    color: #fff;
}

.site-cta .btn-ghost:hover { background: color-mix(in srgb, #fff 14%, transparent); }

/* ── Xizmatlar jadvali (xizmat/kategoriya sahifalari) ───────────── */

/* ═══ NIMA UCHUN JADVAL EMAS, QATORLAR ═══
   `<table>` mobil ekranda gorizontal aylantirishni talab qiladi
   yoki ustunlar siqilib o'qilmas bo'lib qoladi.

   Flex qatorlar esa mobil ekranda tabiiy ravishda ustunga
   aylanadi (pastdagi media so'rov) va hech narsa kesilmaydi. */
.site-svc-list { display: grid; gap: var(--s-2); }

.site-svc {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--site-radius-sm);
    background: var(--panel);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, background .16s ease;
}

.site-svc:hover {
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 4%, var(--panel));
}

@media (prefers-reduced-motion: reduce) {
    .site-svc { transition: none; }
}

.site-svc-main { flex: 1; min-width: 0; }

.site-svc-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.site-svc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    margin-top: 5px;
    font-size: 12px;
    color: var(--muted);
}

.site-svc-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 0 0 auto; }

/* Qahramon yuzasi ichidagi nishonlar qatori — ostida bo'shliq
   kerak. Ilgari bu `style="margin-bottom:18px"` bilan berilgan
   edi; endi token bilan, ya'ni tema zichligiga ergashadi. */
.site-hero-panel .site-svc-tags { margin-top: var(--s-3); }

/* ══════════════════ KATALOG QIDIRUVI VA FILTRI ══════════════════
 *
 * ═══ EGASINING SO'ROVI ═══
 * «boshqa saytlarda xizmatlar yani services degan alohida /path yani
 *  sahifalar bor ekan, biz ham qo'shsak yomon bolmas edi. etibor
 *  bering responsive holatiga ham etibor bering»
 *
 * ═══ NIMA UCHUN `flex-wrap`, GRID EMAS ═══
 * Elementlar soni O'ZGARADI: «Tozalash» tugmasi faqat filtr
 * qo'yilganda chiqadi. Grid ustunlari qat'iy bo'lsa, tugma
 * yo'qolganda bo'sh ustun qolardi.
 *
 * Torayganda elementlar o'zi pastga tushadi — telefonda qidiruv
 * maydoni butun kenglikni oladi. */
.site-katalog-filtr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    background: var(--panel);
}

/* Qidiruv maydoni qolgan joyni oladi, lekin 200px dan tor
   bo'lmaydi — aks holda placeholder o'qilmasdi. */
.site-katalog-qidiruv {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 200px;
    min-width: 0;
}

.site-katalog-qidiruv svg {
    position: absolute;
    inset-inline-start: 13px;
    color: var(--muted);
    /* Ikonka bosishni yutmasligi kerak. */
    pointer-events: none;
}

/* Ikonka uchun joy. Qolgan ko'rinish (chegara, fon, fokus)
   tanlagich bilan BIR qoidada — ikkisi yonma-yon turadi va
   ajralib qolmasligi kerak. Ayni selektorga ikkinchi qoida
   yozilmaydi: teng ustunlikdagi juftlik 24g-2 bo'limida jimgina
   nuqson manbasi bo'lgan. */
.site-katalog-qidiruv input { padding-inline-start: 40px; }

/* ══════════════════ PLATFORMA TANLAGICHI ══════════════════
 *
 * ═══ EGASINING IKKINCHI SHIKOYATI ═══
 * «rasmda barcha platformalar va telegram degan turkumlar turibdi,
 *  shu joy oddiy bo'lib qolgan hech qanday css'siz, shu joyni
 *  chiroyliroq qiling chiqadigan turkumlar ham shaffofroq va
 *  chiroyliroq bo'lsin»
 *
 * ═══ 🔴 NIMA UCHUN `<select>` UMUMAN TASHLANDI ═══
 * Birinchi shikoyatdan keyin YOPIQ holatdagi tugma stillangan edi:
 * shaffof yuza, brend chegara, brend shevron. Egasi esa OCHILGAN
 * ro'yxatni ko'rsatdi — oq quti va ko'k ajratma.
 *
 * U `<select>` ning popup'i, ya'ni OS chizmasi. CSS unga
 * TEGMAYDI: yumaloq burchak, shaffoflik, bo'shliq, hover, belgi —
 * hech biri qo'llanmaydi. `option` uchun faqat rang beriladi va
 * o'sha ham brauzerga bog'liq.
 *
 * Demak «chiroyliroq qilish» iltimosini `<select>` bilan BAJARISH
 * MUMKIN EMAS. Ikkinchi marta CSS qo'shish yana ishlamasdi —
 * element o'zgarishi kerak edi.
 *
 * ═══ 🔴 NIMA UCHUN `<details>`, JS KOMPONENTI EMAS ═══
 * Panelda `.pick` JS komponenti bor va uni ommaviy sahifaga olib
 * chiqish mumkin edi. Lekin ommaviy saytda JavaScript UMUMAN yo'q
 * va bu ATAYLAB qilingan qaror: CSP nonce, qo'shimcha yuklanish va
 * JS o'chirilgan brauzerda buzuq holat.
 *
 * `<details>` — bu qarorni saqlaydi va hammasini beradi:
 * klaviatura bilan ishlaydi, ekran o'quvchi ochiq/yopiq holatni
 * O'ZI aytadi, to'liq stillanadi. Sarlavhadagi mobil menyu ham
 * shu naqshda.
 *
 * ═══ QO'SHIMCHA FOYDA ═══
 * Havola ichida RASM mumkin, `<option>` ichida esa yo'q. Shu
 * sababli har variant brend logosi va xizmat soni bilan chiqadi —
 * egasining eski so'rovi ham shu edi: «TELEGRAM LOGOSI VA YONIDA
 * TELEGRAM deb yozib qo'yilsa». */

/* ═══ QIDIRUV MAYDONI ═══
   Tanlagich bilan BIR oilada: bir xil chegara, shaffof yuza va
   fokus nuri. Ikkisi yonma-yon turadi va ajralib qolmasligi
   kerak. */
.site-katalog-qidiruv input {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--border));
    border-radius: var(--site-radius-sm);
    background-color: color-mix(in srgb, var(--c-primary) 5%, transparent);
    color: var(--text);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

/* ── Tanlagich o'rami ─────────────────────────────────────────── */
.site-pick {
    position: relative;
    flex: 0 1 210px;
    min-width: 0;
}

/* ═══ NIMA UCHUN `list-style: none` VA `::-webkit-details-marker` ═══
   `<summary>` standart holatda uchburchak belgi (marker) chizadi.
   Zamonaviy brauzerda u `list-style` bilan olinadi, WebKit'da esa
   ALOHIDA psevdo-element — ikkovi ham kerak. */
.site-pick > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--border));
    border-radius: var(--site-radius-sm);
    background-color: color-mix(in srgb, var(--c-primary) 5%, transparent);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.site-pick > summary::-webkit-details-marker { display: none; }

.site-pick-ico {
    flex: none;
    display: flex;
    color: color-mix(in srgb, var(--c-primary) 78%, var(--text));
}

/* Uzun platforma nomi tugmani cho'zmasligi kerak. */
.site-pick-matn {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* ═══ SHEVRON — CHEGARADAN ═══
   Data-URI SVG rangi satr ichida yozilgan bo'lardi va CSS
   o'zgaruvchisi u yerga tushmaydi. Chegaradan yasalgan o'q esa
   `color-mix()` bilan brend rangini oladi va temaga ergashadi. */
.site-pick-oq {
    flex: none;
    width: 8px;
    height: 8px;
    /* Ikki chegara qalinligi markazni pastga suradi — 3px yuqoriga
       tortiladi. */
    margin-top: -3px;
    border-right: 2px solid color-mix(in srgb, var(--c-primary) 62%, var(--text));
    border-bottom: 2px solid color-mix(in srgb, var(--c-primary) 62%, var(--text));
    rotate: 45deg;
    transition: rotate .2s ease, border-color .16s ease;
}

/* Ochiq holatda o'q teskari qaraydi va tugma «bosilgan» ko'rinadi. */
.site-pick[open] > summary {
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    background-color: color-mix(in srgb, var(--c-primary) 9%, transparent);
}

.site-pick[open] .site-pick-oq {
    rotate: 225deg;
    margin-top: 3px;
}

/* ── Ochilgan ro'yxat ────────────────────────────────────────── */

/* ═══ 🔴 NIMA UCHUN `position: absolute` ═══
   Oqim ichida qolsa ro'yxat ostidagi butun sahifani PASTGA
   surardi: filtr paneli cho'zilib, «Telegram» bo'limi sakrab
   ketardi. Absolyut joylashuv esa mazmun USTIGA chiqadi.

   ═══ NIMA UCHUN `z-index: 52` ═══
   Ostida xizmat kartalari va `.site-svc` qatorlari bor; ular
   `position: relative` bo'lgani uchun ro'yxatni bosib qolardi.

   ═══ 🔴 NIMA UCHUN 30 YETARLI EMAS EDI ═══
   `.reklama` — 45 va u ommaviy sahifalarda ham chiqadi
   (`layouts/public.blade.php`). ≤600px da reklama ekran PASTIGA
   butun kenglikda yopishadi va aynan shu yerda ochilgan ro'yxatning
   oxiri turadi — turkumlar ro'yxati reklama ortida qolardi.

   52 — reklamadan yuqori, yopishqoq sarlavhadan (55) past.
   `.site-pick` ning o'zi `position: relative` + `z-index: auto`,
   ya'ni u STACKING KONTEKST YASAMAYDI va bu qiymat ildizda
   to'g'ridan-to'g'ri ishlaydi. Fayl boshidagi jadvalga qaralsin. */
.site-pick-panel {
    position: absolute;
    z-index: 52;
    /* ═══ NIMA UCHUN `inset-inline: 0` EMAS ═══
       Ikki tomonni qulflash ro'yxatni tugma kengligiga (210px)
       majburlardi. Belgi + nom + son shunga sig'masdi va nom
       kesilardi.

       Boshlanish chetini qulflab, kenglikni MAZMUNGA qo'yish
       ro'yxatni kerak bo'lganda kengaytiradi. `min-width: 100%` esa
       uni tugmadan tor bo'lishiga yo'l qo'ymaydi.

       Mantiqiy xossalar (`inset-inline-start`) arabchada o'zi
       teskari tomonga o'tadi — fizik `left` bo'lsa ro'yxat ekrandan
       chiqib ketardi. */
    inset-inline-start: 0;
    top: calc(100% + 6px);
    min-width: 100%;
    width: max-content;
    max-width: 300px;
    /* ═══ 🔴 NIMA UCHUN BALANDLIK CHEKLANADI ═══
       Ilgari cheklov YO'Q edi. Platformalar soni ma'lumotga bog'liq
       va admin yangi platforma qo'shgani sayin ro'yxat uzayadi —
       o'n beshta platformada panel ekrandan chiqib ketardi va
       oxirgi variantlar UMUMAN yetib bo'lmas holga tushardi
       (`<details>` panelini aylantirib bo'lmaydi, chunki sahifa
       aylantirilganda tugma bilan birga u ham ketadi).

       `60vh` — ekranning ko'pi bilan uch qismidan ikkisi. Qolgan
       joyda tugmaning o'zi va sarlavha ko'rinib turadi, ya'ni
       ro'yxat QAYSI tugmaga tegishli ekani yo'qolmaydi.

       `overscroll-behavior: contain` — ro'yxat oxiriga yetganda
       aylantirish SAHIFAGA o'tib ketmaydi. Busiz mijoz ro'yxatni
       aylantirib tugagach sahifa sakrab ketardi va panel ko'zdan
       g'oyib bo'lardi. */
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 20%, var(--border));
    border-radius: var(--site-radius-sm);
    /* ═══ SHAFFOFLIK — EGASINING ILTIMOSI ═══
       «chiqadigan turkumlar ham shaffofroq bo'lsin». Yarim shaffof
       yuza + orqa fon blur'i: ostidagi mazmun sezilib turadi,
       lekin matn O'QILADI.

       ZAXIRA: `backdrop-filter` ishlamasa fon 92% shaffofmas
       bo'lib qoladi, ya'ni matn baribir o'qiladi — alohida
       `@supports` sharti kerak emas. */
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--lift-3);
    /* Ro'yxat uzun bo'lsa (ko'p platforma) o'zi aylanadi —
       sahifa emas. */
    max-height: 320px;
    overflow-y: auto;
}

.site-pick-el {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    transition: background-color .14s ease, color .14s ease;
}

.site-pick-el-ico {
    flex: none;
    display: flex;
    color: color-mix(in srgb, var(--c-primary) 72%, var(--muted));
}

.site-pick-el-nom {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* Xizmat soni — mijoz qaysi platformada ko'p tanlov borligini
   oldindan biladi. Paneldagi `.plat-chip-son` bilan bir naqsh. */
.site-pick-el-son {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 11%, transparent);
    color: color-mix(in srgb, var(--c-primary) 84%, var(--text));
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

/* Joriy filtr — brend gradienti. Bu YAGONA tanlov, shu sababli
   kontrast maksimal (paneldagi `.plat-chip[aria-pressed]` bilan
   bir qaror). */
.site-pick-el-faol {
    background: var(--site-grad-text);
    color: #fff;
}

.site-pick-el-faol .site-pick-el-ico { color: #fff; }

.site-pick-el-faol .site-pick-el-son {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

@media (hover: hover) {
    .site-katalog-qidiruv input:hover,
    .site-pick > summary:hover {
        border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border));
        background-color: color-mix(in srgb, var(--c-primary) 9%, transparent);
    }

    .site-pick > summary:hover .site-pick-oq { border-color: var(--c-primary); }

    /* Faol elementga hover BERILMAYDI: u allaqachon gradient va
       ustiga tint qo'yilsa rang loyqalanardi. */
    .site-pick-el:not(.site-pick-el-faol):hover {
        background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
        color: color-mix(in srgb, var(--c-primary) 88%, var(--text));
    }
}

/* ═══ NIMA UCHUN `outline` O'RNIGA NUR ═══
   Standart `outline` yumaloq burchakni takrorlamaydi va maydon
   chetida o'tkir kvadrat chiqaradi. 4px yumshoq nur esa shaklga
   ergashadi. Ko'rinuvchanlik kamaymaydi: chegara ham TO'QROQ
   bo'ladi, ya'ni ikki signal birga ishlaydi. */
.site-katalog-qidiruv input:focus-visible,
.site-pick > summary:focus-visible {
    outline: 0;
    border-color: color-mix(in srgb, var(--c-primary) 62%, var(--border));
    background-color: color-mix(in srgb, var(--c-primary) 7%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 13%, transparent);
}

/* Ro'yxat ichida klaviatura fokusi — `outline` QOLADI: element
   yumaloq, lekin ichki va nur tashqi chetga chiqib qo'shni
   qatorga tegardi. */
.site-pick-el:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: -2px;
}

/* Tugmalar torayganda ham qisqarmaydi. */
.site-katalog-filtr .btn { flex: none; }

/* ── Xizmat qatorining o'ng ustuni (narx + nishonlar) ──────────── */

/* ═══ NIMA UCHUN ALOHIDA USTUN ═══
   Namunadagi saytda narx o'ng chetda, nishonlar esa uning ostida.
   `.site-svc-tags` ni to'g'ridan-to'g'ri ishlatsak narx bilan bir
   qatorda turardi va tor ekranda ular bir-birini siqardi. */
.site-svc-yon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
}

.site-svc-narx {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--c-primary);
    white-space: nowrap;
}

.site-svc-narx-izoh {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

/* Nishonlar o'ng chetdan boshlanadi — narx bilan bir tekislikda. */
.site-svc-yon .site-svc-tags { justify-content: flex-end; }

/* ══════════════════ KATALOG BELGISI ══════════════════
 *
 * ═══ EGASINING SO'ROVI ═══
 * «turkumlar kiritayotganda turli xil emoji yoki sticker kiritadigan
 *  qiling, masalan telegram xizmatlari oldidan yumaloq animatsion
 *  telegram logosi tursa ajoyib bo'ladi»
 *
 * Uch ko'rinish bir xil o'lchamda bo'lishi SHART: emoji, yuklangan
 * rasm va ichki SVG. Aks holda qatorlar har xil balandlikda chiqib,
 * ro'yxat «sakrab» ko'rinardi.
 *
 * ═══ NIMA UCHUN `inline-flex` VA QAT'IY O'LCHAM ═══
 * Emoji shrift bilan chiziladi va uning tabiiy o'lchami shriftga
 * bog'liq — bir platformada 16px, boshqasida 22px. Qat'iy
 * konteyner bu farqni yutadi. */
.kat-belgi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    /* Matn bilan yonma-yon turadi, ya'ni pastki chiziq bo'ylab
       tekislanishi kerak. */
    vertical-align: -.18em;
}

/* ═══ 🔴 NIMA UCHUN BU YERDA `width: 100%` YO'Q ═══
   EGASINING SHIKOYATI: «/uz/xizmatlar?platform=telegram ... rasmlar
   sigmay qolgan», «turkum sahifasida ham shunga o'xshash holat».

   Sabab: `partials/katalog-belgi.blade.php` da IKKI sinf BITTA
   `<img>` ga qo'yiladi — `class="kat-belgi kat-belgi-rasm"`. Ya'ni
   konteyner va rasm AYNI element.

   Ilgari bu yerda `width: 100%; height: 100%` turgan. Aniqligi
   `.kat-belgi` bilan TENG (0,1,0), lekin faylda KEYIN turgani uchun
   g'olib bo'lardi va `1.35em` ni bosib o'tardi. Natijada rasm
   OTA-konteynerning to'liq kengligini olardi:

     `.site-ico` ichida (42px qat'iy)      → 42px   ✓ to'g'ri
     `.site-svc-name` ichida (display:block) → butun qator kengligi ✗
     `<h1>` / `<h3>` ichida (blok)          → yuzlab piksel        ✗

   Shu sababli filtrsiz `/uz/xizmatlar` to'g'ri ko'rinardi (u
   `.site-ico` shoxi), filtrli va turkum sahifalari esa buzilardi —
   512px logotip 600-700px kvadratga aylanib matn ustiga chiqardi.

   HTML `width`/`height` atributlari yordam bermaydi: CSS ularni
   har doim bosib o'tadi.

   Endi o'lchamni FAQAT `.kat-belgi` beradi (`1.35em`), ya'ni belgi
   yonidagi matn o'lchamiga ergashadi va ota-konteyner turidan
   MUSTAQIL. Bu yerda o'lcham qayta e'lon QILINMAYDI. */
.kat-belgi-rasm {
    object-fit: contain;
    /* Yumaloq — egasi «yumaloq animatsion telegram logosi» dedi.
       Kvadrat logotip ham yumaloq maskada tabiiy ko'rinadi. */
    border-radius: 50%;
}

/* Emoji o'z rangida qoladi (`currentColor` ta'sir qilmaydi) va
   shrift o'lchami konteynerga moslashadi. */
.kat-belgi-emoji {
    font-size: 1em;
    line-height: 1;
}

/* Ichki SVG — brend rangi yo'q, matn rangini oladi. Shu sababli u
   har temada o'qiladi. */
.kat-belgi-brend { color: color-mix(in srgb, var(--c-primary) 78%, var(--text)); }

/* Sarlavha ichida belgi bilan matn orasida bo'shliq. `gap` emas:
   `<h3>` blok element va uning ichida matn tuguni bor, ya'ni flex
   qilinsa matn alohida qatorga chiqib ketardi. */
.site-card h3 .kat-belgi,
.site-svc-name .kat-belgi { margin-inline-end: 6px; }

/* ── Xususiyat ro'yxati (belgili) ───────────────────────────────── */
.site-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }

.site-ticks li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: 14px;
    line-height: 1.6;
}

.site-ticks svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--c-success);
}

/* ── Kod bloki (API hujjati) ────────────────────────────────────── */

/* ═══ NIMA UCHUN SARLAVHASI BOR ═══
   API hujjatida o'nlab kod bloki bor va ularning qaysi biri
   so'rov, qaysi biri javob ekanini bilish qiyin edi. Sarlavha
   qatorida usul (`POST`) va manzil ko'rinadi. */
.site-code {
    border: 1px solid var(--border);
    border-radius: var(--site-radius-sm);
    overflow: hidden;
    background: var(--panel);
    margin-block: var(--s-2) var(--s-4);
}

.site-code-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 9px var(--s-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--muted);
}

.site-code-verb {
    padding: 2px 7px;
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: .04em;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
}

/* `pre` da satr SINDIRILMAYDI: nusxa olingan kod namunasi buziladi. */
.site-code pre {
    margin: 0;
    padding: var(--s-3);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
}

/* ── Yon menyu (API hujjati mundarijasi) ────────────────────────── */
.site-doc {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
}

/* ══════════════════ 🔴 TESKARI IKKI USTUN (mazmun chapda) ══════════════════
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «men telegram cheap members turkumiga kirdim, u joyda chiqgan
 *  xizmatni tanladim ... juda xunuk va tartibsiz hamda cho'zilib
 *  turibdi»
 *
 * ═══ ASL SABAB ═══
 * `.site-doc` ning birinchi ustuni QAT'IY 232px va u API hujjati
 * sahifasi uchun mo'ljallangan: u yerda `<aside class="site-toc">`
 * (mundarija) DOMda BIRINCHI turadi va 232px aynan unga tegishli.
 *
 * Xizmat sahifasida esa tartib TESKARI — `<article>` birinchi,
 * `<aside>` keyin. Grid elementlarni DOM tartibida joylashtiradi,
 * ya'ni ASOSIY MAZMUN 232px ustunga tushib qolgan:
 *
 *   - `<h1>` 232px da deyarli har so'zdan keyin bo'linadi
 *   - `.site-cards-2` ichida har karta (232 − 16) / 2 ≈ 108px
 *     bo'lib, «Miqdor chegaralari» so'zi o'rtasidan uziladi
 *   - yon ustun esa qolgan ~800px ni egallaydi
 *
 * Ya'ni ustunlar O'RIN ALMASHGAN. Bu nuqson 981px dan keng
 * ekranlarda ko'rinadi; narvonning 980px pog'onasi gridni bir
 * ustunga tushirib uni yashirgan, shuning uchun telefonda
 * sezilmagan.
 *
 * ═══ NIMA UCHUN DOM TARTIBI O'ZGARTIRILMADI ═══
 * `<aside>` ni birinchi qilish gridni to'g'rilardi, LEKIN telefonda
 * (bir ustunli holatda) «o'xshash xizmatlar» ro'yxati xizmat
 * nomidan OLDIN chiqardi. Mijoz ochgan sahifa boshqa xizmatlar
 * ro'yxati bilan boshlanardi.
 *
 * `order` bilan CSS orqali almashtirish ham yaramaydi: u ekran
 * o'quvchi va Tab tartibini DOM da qoldiradi, ya'ni ko'rinish bilan
 * navigatsiya bir-biriga mos kelmasdi.
 *
 * Shu sababli sahifaga o'z modifikatori beriladi: mazmun keng
 * ustunda, yon ma'lumot esa o'ngda. DOM tartibi tabiiy qoladi.
 *
 * ═══ NIMA UCHUN 300px, 232px EMAS ═══
 * 232px mundarija uchun (qisqa havolalar). Bu yerda esa xizmat
 * NOMLARI turadi va ular uzun («Telegram Members [Zero Drop][90
 * Days Guarantee]»). 300px da nom ikki qatorga sig'adi. */
.site-doc-rev { grid-template-columns: minmax(0, 1fr) 300px; }

/* ═══ NIMA UCHUN `sticky` ═══
   API hujjati uzun (300+ qator). Mundarija sahifa bilan birga
   aylanmasa, o'quvchi boshqa bo'limga o'tish uchun tepaga
   qaytishi kerak bo'lardi. */
.site-toc {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-inline-end: var(--s-2);
}

.site-toc-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--s-2);
}

.site-toc a {
    display: block;
    padding: 6px var(--s-2);
    border-radius: 7px;
    border-inline-start: 2px solid transparent;
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
}

.site-toc a:hover {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 7%, transparent);
    border-inline-start-color: var(--c-primary);
}

/* Ichki daraja — chapdan qo'shimcha surish. */
.site-toc .site-toc-sub { padding-inline-start: var(--s-4); font-size: 13px; }

/* ═══ `scroll-margin-top` — YOPISHQOQ SARLAVHA UCHUN ═══
   Mundarijadagi havola bosilganda brauzer maqsad elementni
   ekranning ENG TEPASIGA qo'yadi va u yopishqoq sarlavha ostida
   YASHIRINIB qoladi. `scroll-margin-top` shu bo'shliqni beradi. */
.site-doc [id] { scroll-margin-top: 86px; }

/* ── Bo'sh holat ────────────────────────────────────────────────── */
.site-empty {
    padding: var(--s-6) var(--s-4);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--site-radius);
    color: var(--muted);
}

.site-empty svg { width: 34px; height: 34px; margin-bottom: var(--s-2); opacity: .55; }

/* ── Kategoriyalar to'ri (platforma sahifasi) ───────────────────── */
.site-cat-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    margin-top: var(--s-2);
    display: block;
}

/* ═════════════════════════════════════════════════════════════════
   MOSLASHUVCHANLIK
   ═════════════════════════════════════════════════════════════════ */

/* Katta ekran: hamburger yashiriladi, `<details>` oddiy qatorga
   aylanadi. `open` holati e'tiborsiz qoldiriladi — aks holda
   mobil ekranda menyuni ochib, keyin ekranni kattalashtirsa
   menyu ikki marta ko'rinardi. */
@media (min-width: 981px) {
    .site-burger > summary { display: none; }

    .site-burger,
    .site-burger[open] {
        display: contents;
    }
}

/* ══════════════════════════════════════════════════════════════════
 * UZUN SO'Z / MANZIL TOSHIB KETISHIDAN HIMOYA
 *
 * ═══ NIMA UCHUN KERAK ═══
 * Xizmat nomlari PROVAYDERDAN keladi va ular ba'zan bo'shliqsiz
 * bo'ladi: `TG_Members_NonDrop_R30_FAST_v2`. Bunday so'z konteyner
 * kengligidan oshsa, brauzer uni BO'LMAYDI — u kartadan chiqib
 * ketadi va sahifa gorizontal aylanadi (telefonda ayniqsa yomon).
 *
 * ═══ 🔴 NIMA UCHUN `break-word`, `anywhere` EMAS ═══
 * Birinchi versiyada `overflow-wrap: anywhere` yozilgan va izohda
 * u «kuchliroq» deb ta'riflangan edi. Bu XATO tushuncha va u
 * saytni telefonda BUZDI.
 *
 * Farqi min-content hisobida:
 *
 *   `break-word` — element eng kichik kengligini ENG UZUN SO'Z
 *                  bo'yicha hisoblaydi. So'z faqat SIG'MASA
 *                  bo'linadi.
 *
 *   `anywhere`   — eng kichik kenglik BITTA HARF bo'ladi. Ya'ni
 *                  element «men bir harf kenglikda ham
 *                  yashayman» deb aytadi.
 *
 * Grid/flex konteyner bola elementining min-content kengligiga
 * qarab joy taqsimlaydi. `anywhere` bilan u matn ustuniga ~100px
 * berishga «ruxsat» oldi va natijada «Instagram» so'zi HAR HARF
 * ALOHIDA QATORDA chiqdi. Egasining ekran rasmida aynan shu.
 *
 * `break-word` uzun provayder nomini ham bo'ladi (u sig'maydi),
 * lekin oddiy matnni bo'lmaydi.
 *
 * ═══ QOIDA ═══
 * `overflow-wrap: anywhere` grid yoki flex bolasida
 * ISHLATILMAYDI. Faqat qat'iy kenglikli konteynerda xavfsiz.
 * ══════════════════════════════════════════════════════════════════ */
.site-card h3,
.site-card p,
.site-step h3,
.site-step p,
.site-svc-name,
.site-svc-meta,
.site-crumbs,
.site-hero p,
.prose,
.site-authcard {
    overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════
 * HARAKAT QATLAMI
 *
 * ═══ 🔴 NIMA UCHUN JAVASCRIPT YO'Q ═══
 * Egasi «nodejs yoki shunga o'xshash narsalardan foydalanib
 * qandaydur animatsiya» deb so'radi. Buni to'g'ridan-to'g'ri
 * bajarish MUMKIN EMAS va sabab uchta:
 *
 *   1. Serverda `node` va `npm` YO'Q (o'lchandi: `which node npm`
 *      bo'sh). Ya'ni `npm run build` ishlamaydi va `public/build`
 *      hech qachon yasalmaydi. Bu shared hosting cheklovi, sozlama
 *      emas.
 *
 *   2. Saytda CSP `nonce` majburlangan (`SecurityHeaders`) va
 *      `onclick=` butunlay taqiqlangan. Har yangi skript uchun
 *      nonce va CSP qoidasi kerak.
 *
 *   3. Animatsiya kutubxonasi (GSAP ~50 KB, Framer Motion ~120 KB)
 *      O'zbekistondagi mobil internetda sahifani SEKINLASHTIRADI.
 *      Ya'ni u "zamonaviy" ko'rinish uchun tezlikni sotadi.
 *
 * ═══ NIMA UCHUN CSS YETADI ═══
 * Zamonaviy CSS aynan shu vazifalarni JS'siz bajaradi:
 *
 *   - `animation-timeline: view()` — AYLANTIRISHGA bog'langan
 *     animatsiya. Ilgari bu faqat IntersectionObserver bilan
 *     mumkin edi
 *   - `@starting-style` va `transition` — kirish animatsiyasi
 *   - `color-mix()` — tema rangidan hosila ranglar
 *
 * Natija: nol bayt JS, nol so'rov, nol CSP xatari, nol build
 * qadami — va animatsiya asosiy ipni (main thread) bloklamaydi,
 * chunki u kompozitorda ishlaydi.
 *
 * ═══ 🔴 `prefers-reduced-motion` MAJBURIY ═══
 * Vestibulyar buzilishi bor foydalanuvchi uchun harakat bosh
 * og'rig'i va ko'ngil aynishiga olib keladi. Butun qatlam
 * `no-preference` ichida, ya'ni tizim sozlamasida "harakatni
 * kamaytir" yoqilgan bo'lsa animatsiya UMUMAN yozilmaydi.
 * ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

    /* ── Kirish animatsiyasi (sahifa yuklanganda) ───────────────────
     *
     * Qahramon bo'lak DARHOL ko'rinadi, keyin yumshoq ko'tariladi.
     * Aylantirishga bog'lanmagan, ya'ni har brauzerda ishlaydi.
     *
     * NIMA UCHUN `backwards` EMAS, `both`: `both` animatsiya
     * tugagach oxirgi holatni SAQLAYDI. `backwards` bo'lsa element
     * tugagandan keyin boshlang'ich holatiga qaytardi. */
    .site-hero-copy > * {
        animation: siteRise .5s cubic-bezier(.22, .61, .36, 1) both;
    }

    /* Zinapoya: har element bir oz keyin chiqadi. Bu "yasalgan"
       hissini beradi, lekin kutish 0.28s dan oshmaydi — aks holda
       mijoz sahifa sekin ochilyapti deb o'ylardi. */
    .site-hero-copy > *:nth-child(1) { animation-delay: 0s; }
    .site-hero-copy > *:nth-child(2) { animation-delay: .06s; }
    .site-hero-copy > *:nth-child(3) { animation-delay: .12s; }
    .site-hero-copy > *:nth-child(4) { animation-delay: .18s; }
    .site-hero-copy > *:nth-child(5) { animation-delay: .24s; }

    .site-hero-form {
        animation: siteRise .55s cubic-bezier(.22, .61, .36, 1) .1s both;
    }

    /* ── Aylantirishga bog'langan ochilish ──────────────────────────
     *
     * ═══ 🔴 NIMA UCHUN `@supports` ICHIDA ═══
     * `animation-timeline` hozircha Chrome/Edge 115+ da bor.
     * Qo'llab-quvvatlamaydigan brauzerda (Safari, Firefox) qoida
     * BUTUNLAY yozilmaydi va element oddiy, animatsiyasiz
     * ko'rinadi.
     *
     * `@supports` bo'lmasa `opacity: 0` boshlang'ich holati qolib,
     * Safari da MAZMUN KO'RINMAY QOLARDI. Bu animatsiyaning eng
     * xavfli xatosi: sahifa ishlaydi, testlar yashil (HTML joyida),
     * lekin odam hech nima ko'rmaydi.
     *
     * ═══ NIMA UCHUN DIAPAZON KENG (`entry 0% cover 26%`) ═══
     * Element ekranga kirishi bilan ochila boshlaydi va ekranning
     * chorak qismiga yetganda TO'LIQ ko'rinadi. Qisqa diapazonda
     * mijoz aylantirib to'xtaganda yarim shaffof matn qolardi. */
    @supports (animation-timeline: view()) {
        .site-metrics,
        .site-main > .site-section,
        .site-main > .site-cta {
            animation: siteReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 26%;
        }
    }

    /* ── Kartalar ustiga kelganda ──────────────────────────────── */
    .site-metric {
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .site-metric:hover {
        transform: translateY(-3px);
        box-shadow: var(--lift-3);
        border-color: color-mix(in srgb, var(--c-primary) 35%, var(--border));
    }

    /* ── CTA gradienti sekin suriladi ──────────────────────────────
     *
     * NIMA UCHUN `background-position`, `background-color` EMAS:
     * pozitsiya kompozitorda ishlanadi, ya'ni animatsiya asosiy ipni
     * bloklamaydi va batareyani yemaydi.
     *
     * 18 sekund ATAYLAB sekin: mijoz harakatni SEZMAYDI, lekin
     * sahifa "tirik" ko'rinadi. Tez gradient esa e'tiborni matndan
     * tortib oladi. */
    .site-cta {
        background-size: 220% 220%;
        animation: siteGradShift 18s ease-in-out infinite;
    }

    /* ── To'lqin yengil suzadi ─────────────────────────────────────
     *
     * Faqat gorizontal siljish va u 1% dan oshmaydi — to'lqin
     * chetlarida bo'shliq ko'rinmasligi kerak. */
    .site-wave svg {
        animation: siteWave 14s ease-in-out infinite alternate;
    }

    /* ── Tugma bosilganda ───────────────────────────────────────── */
    .btn { transition: filter .15s ease, transform .12s ease, background .2s ease; }
    .btn:active { transform: translateY(1px); }

    /* ── Langar havolalari yumshoq siljiydi ────────────────────────
     *
     * API hujjatidagi mundarija uchun: havola bosilganda sahifa
     * "sakramaydi", suriladi. `scroll-padding-top` — yopishqoq
     * sarlavha matnni yopib qolmasligi uchun. */
    html { scroll-behavior: smooth; }
}

html { scroll-padding-top: 84px; }

@keyframes siteRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes siteReveal {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

@keyframes siteGradShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes siteWave {
    from { transform: translateX(0); }
    to { transform: translateX(-1%); }
}

/* ══════════════════════════════════════════════════════════════════
 * KLAVIATURA FOKUSI
 *
 * ═══ NIMA UCHUN `:focus-visible`, `:focus` EMAS ═══
 * `:focus` sichqoncha bilan bosganda ham halqa chizadi va u
 * "buzuq" ko'rinadi — shu sababli ko'p sayt uni butunlay
 * o'chiradi (`outline: none`), va o'shanda klaviatura bilan
 * yuradigan odam QAYERDA turganini bilmaydi.
 *
 * `:focus-visible` faqat KLAVIATURA fokusida ishlaydi: sichqoncha
 * toza qoladi, klaviatura esa ko'rinadi.
 * ══════════════════════════════════════════════════════════════════ */
.site a:focus-visible,
.site .btn:focus-visible,
.site summary:focus-visible,
.site input:focus-visible,
.site button:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--site-radius-sm);
}

/* ══════════════════════════════════════════════════════════════════
 * ZAMONAVIY QATLAM: TUGMALAR, PANEL, AUTH
 *
 * ═══ NIMA UCHUN BU BLOK OXIRIDA ═══
 * Bu qoidalar yuqoridagi poydevor qoidalarini ATAYLAB bosib
 * o'tadi. Poydevorni joyida tahrirlash mumkin edi, lekin o'shanda
 * "nima o'zgargani" va "nima uchun" ko'rinmasdi — 900 qatorli fayl
 * ichida yo'qolardi.
 *
 * ═══ 🔴 NIMA UCHUN `.main` ning `padding` iga TEGILMAYDI ═══
 * Yuqorida `@media (max-width: 900px) { .main { padding: ... } }`
 * bor. Bu blok mediadan KEYIN, ya'ni `.main { padding }` yozilsa u
 * mobil qoidani bosib o'tardi va telefonda pastdagi `.tabbar`
 * mazmunni yopib qolardi.
 *
 * Shu sababli bu blokda `.main` ning `padding` i o'zgartirilmaydi.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 1. TUGMALAR ══════════════════
 *
 * Egasining so'zi: «tugmalar ham ko'rimsiz, ular ajralib turishi
 * kerak».
 *
 * ═══ 🔴 NIMA UCHUN GRADIENT BU YERDA BERILMAYDI ═══
 * Har tema `theme.css` da shunday yozadi:
 *   .btn:not(.btn-ghost):not(.btn-danger) { background: <gradient> }
 * Aniqligi (0,3,0) va tema poydevordan KEYIN qo'shiladi.
 *
 * Ya'ni bu yerda `background` yozish BEHUDA — u har temada bosib
 * o'tiladi. Shuning uchun bu yerda temalar TEGMAYDIGAN xossalar
 * beriladi: soya, ko'tarilish, o'tish. Natijada tugma har temada
 * o'z rangini saqlaydi, lekin "bosiladigan" ko'rinishga keladi.
 *
 * (Bu saboq `docs/09 §33` da: CTA tugmasi aynan shu aniqlik
 * urushida yo'qolgan edi.) */
.btn {
    padding: 10px 18px;
    border-radius: 10px;
    letter-spacing: -.01em;
    /* Ikki qatlamli soya: yaqin qatlam qirrani ajratadi, uzoq
       qatlam esa BREND rangida — tugma "yorib turadi". */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .10),
        0 8px 18px -8px color-mix(in srgb, var(--c-primary) 65%, transparent);
}

.btn:hover {
    filter: brightness(1.04);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .12),
        0 14px 26px -10px color-mix(in srgb, var(--c-primary) 80%, transparent);
}

/* ═══ 🔴 NIMA UCHUN `btn-ghost` SHAFFOF EMAS ═══
   Ilgari `background: transparent` edi va oq kartada u faqat
   ingichka chegara bilan ko'rinardi — egasining panel rasmida
   uchta shunday tugma bor va ular «tugma emas, matn» kabi
   ko'rinadi.

   Endi yengil brend tintasi bor: u ASOSIY tugmadan pastroq
   turadi (ierarxiya saqlanadi), lekin bosiladigan element
   ekani ko'rinadi. */
.btn-ghost {
    background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--c-primary) 26%, var(--border));
    color: var(--c-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--c-primary) 14%, var(--panel));
    border-color: color-mix(in srgb, var(--c-primary) 45%, var(--border));
    filter: none;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}

.btn-danger {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .10),
        0 8px 18px -8px color-mix(in srgb, var(--c-danger) 65%, transparent);
}

.btn-danger:hover {
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .12),
        0 14px 26px -10px color-mix(in srgb, var(--c-danger) 80%, transparent);
}

.btn-sm { padding: 6px 12px; border-radius: 8px; }

/* ══════════════════ 2. YON MENYU ══════════════════ */

.side {
    /* Yuqoridan yengil brend tintasi — yon panel asosiy maydondan
       ajralib turadi va "boshqaruv paneli" hissini beradi. */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--c-primary) 6%, var(--panel)),
        var(--panel) 42%);
    padding: 20px 12px 92px;
}

.brand {
    font-size: 18px;
    letter-spacing: -.015em;
    margin: 0 6px 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.brand-dot { width: 26px; height: 26px; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--c-primary) 70%, transparent); }

.nav-title {
    font-size: 10.5px;
    letter-spacing: .09em;
    margin: 0 12px 8px;
    color: color-mix(in srgb, var(--muted) 85%, var(--c-primary));
}

.nav-group { margin-bottom: 18px; }

.nav-link {
    position: relative;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.nav-link svg { color: var(--muted); }

.nav-link:hover {
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
    color: var(--c-primary);
}

.nav-link:hover svg { color: var(--c-primary); }

.nav-link[aria-current="page"] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--c-primary) 18%, transparent),
        color-mix(in srgb, var(--c-primary) 6%, transparent));
    font-weight: 700;
}

.nav-link[aria-current="page"] svg { color: var(--c-primary); }

/* ═══ NIMA UCHUN KO'RSATGICH `::before`, `border-left` EMAS ═══
   `border-left` FIZIK tomon: arabcha (RTL) sahifada u chap
   tomonda qolardi, menyu esa o'ngda. `inset-inline-start`
   mantiqiy xossa va yo'nalishga o'zi ergashadi. */
.nav-link[aria-current="page"]::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    translate: 0 -50%;
    width: 3px;
    height: 62%;
    background: var(--c-primary);
    border-radius: 999px;
}

/* ══════════════════ 3. YUQORI QATOR ══════════════════ */

.topbar {
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.topbar h1 { font-size: clamp(19px, 2.4vw, 23px); letter-spacing: -.02em; font-weight: 700; }

/* ══════════════════ 4. KARTALAR ══════════════════ */

.card {
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--lift-1);
}

/* Sarlavha ostida ajratgich va oldida brend chizig'i — karta
   "quti" emas, BO'LIM ko'rinadi. */
.card h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    padding-bottom: 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border);
}

.card h2::before {
    content: '';
    flex: none;
    width: 3px;
    height: 15px;
    border-radius: 999px;
    background: var(--site-grad-text);
}

/* ══════════════════ 5. STATISTIKA KARTALARI ══════════════════
 *
 * Egasi: «shunchaki oq fon va rangli tugmalar va qora tekst bu
 * juda juda oddiy».
 *
 * Eng katta o'zgarish shu yerda: raqam GRADIENT bilan chiziladi va
 * kartaning ustida brend chizig'i bor. Qora raqam o'rniga brend
 * rangidagi raqam — sahifa "bo'yalgan" ko'rinadi. */
.stat {
    position: relative;
    padding: 18px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--lift-1);
}

.stat::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--site-grad-text);
}

.stat-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px;
}

.stat-value {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
    background: var(--site-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--c-primary);
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .stat-value { -webkit-text-fill-color: currentColor; background: none; }
}

/* ══════════════════ 6. JADVALLAR ══════════════════ */

.table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    /* NIMA UCHUN `overflow: hidden` YOZILMAYDI: u gorizontal
       aylantirishni o'chiradi va tor ekranda keng jadval
       KESILADI. `overflow-x: auto` esa ikkisini ham beradi —
       aylantirish ishlaydi va burchaklar qirqiladi (chunki
       overflow `visible` emas, ya'ni `border-radius` amal
       qiladi). */
    overflow-x: auto;

    /* ═══ 🔴 NIMA UCHUN `position: relative` — MAJBURIY ═══
       Bu bitta e'lon telefonda BUTUN sahifani buzadigan nosozlikni
       to'xtatadi. Sabab CSS ning eng chalkash qoidalaridan biri:

       `overflow` KESUVI faqat shu o'ram JOYLASHTIRISH BLOKI
       (containing block) bo'lgan avlodlarga tegishli. `position:
       absolute` element uchun joylashtirish bloki eng yaqin
       POZITSIYALANGAN ajdod hisoblanadi. O'ram `static` bo'lsa u
       sanalmaydi va abs-element o'ramdan yuqoriga — `.card` ga
       biriktiriladi. Natijada `overflow-x: auto` uni KESMAYDI.

       Jadval sarlavhasining oxirgi katagida aynan shunday element
       bor:  <th><span class="sr-only">Amallar</span></th>
       (`.sr-only` da `position: absolute`). Toshgan jadvalda u
       ~875px da turadi va toshishni `.card` → `.main` → `body` →
       `html` bo'ylab yuqoriga OLIB CHIQADI.

       ═══ 440px EKRANDA NIMA KO'RINARDI ═══
       `documentElement.scrollWidth` 440 emas, 888 bo'lardi. Mobil
       brauzer esa boshlang'ich joylashtirish blokini (ICB) shu
       kenglikka cho'zadi, ya'ni:

         - sahifa o'ngga ~450px BO'SH joyga suriladi;
         - `.tabbar` (`position: fixed; inset-inline: 0`) 888px
           bo'lib qoladi va beshta tugmasi ekrandan chiqadi;
         - hujjat balandligi ham ikki barobar oshadi va mazmun
           ostida katta bo'shliq paydo bo'ladi.

       Mazmunning O'ZI to'g'ri chiziladi — shu sababli nosozlik
       «tema buzuq» kabi ko'rinadi va uzoq izlanadi.

       ═══ NIMA UCHUN BOSHQA YECHIMLAR RAD ETILDI ═══
         `overflow: hidden`/`clip`  → YORDAM BERMAYDI: abs-element
                                      baribir bu o'ramga tegishli
                                      emas (o'lchab tekshirilgan).
         `.main { overflow-x: hidden }` → belgini yashiradi, sababni
                                      emas; va `position: sticky`
                                      ni buzadi.
         `table-layout: fixed`      → ustun kengliklarini mazmunga
                                      qarab tanlashni yo'qotadi.
         `contain: paint`           → ishlaydi, lekin ustiga
                                      STACKING KONTEKST yasaydi —
                                      bu kerakmas yon ta'sir.

       `position: relative` esa faqat joylashtirish blokini beradi:
       z-index `auto` qoladi, stacking kontekst YASALMAYDI, ya'ni
       yopishqoq `.topbar` (z-index 55) baribir ustida turadi. */
    position: relative;
}

.card .table-wrap { margin: 0 -4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
    padding: 11px 12px;
    text-align: start;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    background: color-mix(in srgb, var(--c-primary) 5%, var(--panel));
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

td { padding: 12px; border-top: 1px solid var(--border); vertical-align: middle; }

tbody tr:first-child td { border-top: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--c-primary) 4%, transparent); }

/* ══════════════════ 7. MAYDONLAR ══════════════════ */

input, select, textarea { border-radius: 10px; padding: 10px 12px; }

/* Maydon fokusining TO'LIQ ta'rifi 12g bo'limida — u bu yerdagi
   qiymatlarni bosib o'tadi. Bu yerda faqat eng zaruriy holat
   qoldirilgan (12g o'chirilsa ham fokus ko'rinadi). */
input:focus, select:focus, textarea:focus {
    border-color: color-mix(in srgb, var(--c-primary) 52%, var(--border));
}

label { font-size: 13px; font-weight: 600; }

/* ══════════════════ 8. XABARLAR ══════════════════
 *
 * Chap chetda rangli chiziq: xabar turi bir ko'rishda ajraladi va
 * u faqat rangga tayanmaydi (rang ko'rmaydigan foydalanuvchi uchun
 * shakl ham signal beradi). */
.alert {
    border-radius: 10px;
    padding: 11px 14px;
    border-inline-start: 3px solid currentColor;
}

/* ══════════════════ 9. BO'SH HOLAT ══════════════════ */
.panel-empty {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-3);
    text-align: center;
    color: var(--muted);
}

/* ══════════════════ 10. AUTH SAHIFALARI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN AUTH SAHIFALARI TEMA CSS'IGA ULANDI ═══
 * `layouts/guest` da uslublar INLINE yozilgan edi va izohda
 * shunday deyilgan: *"VAQTINCHALIK... Faza 8 (tema tizimi) bu
 * sahifalarni to'liq almashtiradi"*. Almashtirilmagan — ya'ni bu
 * ochiq qolgan ish edi.
 *
 * Oqibati egasining so'zi bilan: «ro'yxatdan o'tish va akkauntga
 * kirish qismlari ham oddiy oq fonda turibdi». Ular sayt bilan
 * BOG'LANMAGAN edi: tema almashtirilsa sayt ko'k-yashil, kirish
 * sahifasi esa binafsha qolardi.
 *
 * Endi ular `theme.css` dan rang, shrift va burchakni oladi —
 * ya'ni tema almashtirilganda kirish sahifasi ham o'zgaradi.
 *
 * ═══ NIMA UCHUN SINF NOMLARI SAQLANDI ═══
 * Auth ko'rinishlari `.error`, `.alert-error`, `.links`, `.row`,
 * `.checkbox` sinflarini ishlatadi. Poydevorda ular `.err`,
 * `.alert-err` deb nomlangan. Olti ko'rinishni tahrirlash o'rniga
 * poydevorga taxallus qo'shildi: kamroq o'zgarish, kamroq xato
 * xatari. */

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s-4) var(--s-3);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(closest-side at 18% 12%,
            color-mix(in srgb, var(--c-primary) 20%, transparent), transparent),
        radial-gradient(closest-side at 84% 82%,
            color-mix(in srgb, var(--c-secondary) 18%, transparent), transparent),
        var(--bg);
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--site-radius);
    padding: var(--s-5) var(--s-4);
    box-shadow: var(--lift-3);
}

.auth-card.wide { max-width: 760px; }

/* Kartaning ustidagi brend chizig'i — sayt bilan bir xil signal
   (`.stat::before` da ham shunday). */
.auth-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    border-radius: var(--site-radius) var(--site-radius) 0 0;
    background: var(--site-grad-text);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 var(--s-4);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--text);
    text-decoration: none;
}

.auth-card h1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 var(--s-4);
}

.auth-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .10),
        0 8px 18px -8px color-mix(in srgb, var(--c-primary) 65%, transparent);
}

.auth-card button:hover { filter: brightness(1.05); }

.links {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.links a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.links a:hover { text-decoration: underline; }

.checkbox { display: flex; align-items: center; gap: 9px; }
.checkbox input { width: auto; }
.checkbox label { margin: 0; font-weight: 500; }

.row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.row .field { flex: 1 1 200px; }

/* ── Taxalluslar (auth ko'rinishlari uchun) ─────────────────────── */
.error { font-size: 12px; color: var(--c-danger); margin-top: 4px; }
.alert-error { background: color-mix(in srgb, var(--c-danger) 14%, transparent); color: var(--c-danger); }
.alert-success { background: color-mix(in srgb, var(--c-success) 14%, transparent); color: var(--c-success); }

.alert details { margin-top: 8px; }
.alert summary { cursor: pointer; font-weight: 700; }
.alert ul { margin: 8px 0 0; padding-inline-start: 20px; }
.alert li { margin-bottom: 4px; }
.alert details p { margin: 8px 0 0; }

/* Auth kartasining mobil qoidalari narvonda (600px pog'onasi) —
   barcha `max-width` so'rovlari bitta tartibda bo'lishi kerak. */

/* ══════════════════ 11. PANEL HARAKATI ══════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .card,
    .stat {
        transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
    }

    .stat:hover {
        transform: translateY(-2px);
        box-shadow: var(--lift-2);
        border-color: color-mix(in srgb, var(--c-primary) 30%, var(--border));
    }

    .card:hover { box-shadow: var(--lift-2); }

    .nav-link { transition: background .18s ease, color .18s ease, padding-inline-start .18s ease; }
    .nav-link:hover { padding-inline-start: 15px; }

    .nav-link svg { transition: color .18s ease; }

    .qongiroq { transition: border-color .2s ease, box-shadow .2s ease; }

    tbody tr { transition: background .16s ease; }

    /* Auth kartasi yumshoq ko'tarilib chiqadi. */
    .auth-card { animation: siteRise .45s cubic-bezier(.22, .61, .36, 1) both; }
}

/* ══════════════════════════════════════════════════════════════════
 * 12. INTERAKTIVLIK QATLAMI
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «sichqoncha olib borilganda ranglar almashishi joyidan siljishi
 *  yoki shunga o'xshash qismlar juda kam»
 * «buyurtmalar bolimiga otish tugmalari va boshqa tekstlar,
 *  buttonlar va hokozolar juda oddiy, shunchaki htmlda yozib
 *  qo'yilgandek»
 *
 * ═══ ASL SABAB: `transition` YO'Q EDI ═══
 * Hover qoidalari BOR edi, lekin `transition` YO'Q:
 *
 *     .qongiroq:hover     { color: var(--c-primary); }    ← o'tish YO'Q
 *     .site-langs a:hover { color: var(--text); }         ← o'tish YO'Q
 *     .site-chip:hover    { border-color: ...; }          ← o'tish YO'Q
 *     .site-crumbs a:hover { color: ...; }                ← o'tish YO'Q
 *     .site-toc a:hover   { ... }                         ← o'tish YO'Q
 *     .site-svc:hover     { ... }                         ← o'tish YO'Q
 *
 * `transition` bo'lmaganda rang BIR KADRDA sakraydi. Ko'z buni
 * "harakat" deb qabul qilmaydi — u shunchaki "boshqa rasm" bo'lib
 * ko'rinadi. Aynan shu narsa saytni "htmlda yozib qo'yilgandek"
 * qiladi.
 *
 * Bundan tashqari bu elementlarda hover UMUMAN yo'q edi:
 * `.card`, `.stat` (faqat 11-bo'limda qo'shilgan), `.balance`,
 * `.tabbar-item`, `.site-card` (havola bo'lmagani), `.site-badge`,
 * `.site-faq summary`, `.site-metric-ico`, `.site-ico`.
 *
 * ═══ 🔴 NIMA UCHUN `@media (hover: hover)` ═══
 * Telefonda hover holati bosilgandan KEYIN ham "yopishib" qoladi
 * (brauzer barmoqni "ustida turgan" deb hisoblaydi). Karta
 * ko'tarilgan holatda qotib qolardi va bu buzuq ko'rinadi.
 *
 * `hover: hover` faqat HAQIQIY ko'rsatgich bor qurilmada rost.
 * Sensorli ekranda bu blok butunlay yozilmaydi.
 *
 * ═══ 🔴 NIMA UCHUN HAMMASI `prefers-reduced-motion` ICHIDA EMAS ═══
 * RANG o'zgarishi harakat EMAS — u vestibulyar buzilishga ta'sir
 * qilmaydi va uni o'chirish kerak emas. Faqat SILJISH va
 * MASSHTAB (`transform`) harakat qatlamiga kiradi.
 *
 * Shu sababli:
 *   - rang/chegara/soya o'tishlari — har doim
 *   - `transform` (siljish, 3D, masshtab) — `no-preference` ichida
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
 * 12a. O'TISH POYDEVORI (rang, chegara, soya — har doim)
 * ══════════════════════════════════════════════════════════════════ */

.site-langs a,
.site-chip,
.site-crumbs a,
.site-toc a,
.site-svc,
.site-badge,
.site-foot-cols a,
.site-post h2 a,
.links a,
.prose a,
.site-auth-label a,
.site-auth-foot a,
.tabbar-item,
.qongiroq,
.hamyon,
.hamyon-summa,
.lang-pick > summary,
.ikon-btn,
.quick-item,
.site-card,
.site-step,
.site-metric,
.site-faq summary,
.nav-link,
.card,
.stat,
input,
select,
textarea,
.btn {
    transition:
        color .2s ease,
        background-color .2s ease,
        background-position .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

/* ══════════════════════════════════════════════════════════════════
 * 12b. TANLASH MAYDONI (`<select>`) — XOM HTML EMAS
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «til tanlash qismlari ... juda oddiy, shunchaki htmlda yozib
 *  qo'yilgandek»
 *
 * U haq: paneldagi til almashtirgich (`layouts/panel`) oddiy
 * `<select>` edi va brauzer uni O'Z uslubi bilan chizadi —
 * Windows'da kulrang quti, macOS'da boshqa, Android'da uchinchi
 * xil. Ya'ni u saytning qolgan qismiga HECH QANDAY aloqasi yo'q
 * element kabi ko'rinardi.
 *
 * ═══ NIMA UCHUN `appearance: none` + SVG FON ═══
 * `appearance: none` brauzer chizmasini o'chiradi (o'q ham
 * yo'qoladi), shuning uchun o'q `background-image` bilan qaytadan
 * qo'yiladi.
 *
 * ═══ NIMA UCHUN `data:` URI, ALOHIDA FAYL EMAS ═══
 * Alohida SVG fayl qo'shimcha HTTP so'rov (~1 KB fayl uchun ~300ms
 * mobil internetda). `data:` URI esa CSS ichida keladi va u
 * allaqachon yuklangan.
 *
 * `#` belgisi `%23` deb kodlanadi — aks holda CSS parseri uni
 * URL langari deb o'qib qoladi va rasm ko'rinmaydi.
 * ══════════════════════════════════════════════════════════════════ */

select {
    appearance: none;
    -webkit-appearance: none;
    /* O'q uchun joy: RTL da `padding-inline-end` o'zi o'ngdan
       chapga o'tadi (fizik `padding-right` bo'lsa arabchada o'q
       matn ustiga tushardi). */
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* RTL: o'q chap tomonga o'tadi. `[dir="rtl"]` — `<html dir>` dan
   keladi (`layouts/panel` va `layouts/public` uni yozadi). */
[dir="rtl"] select { background-position: left 12px center; }

select:hover {
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border));
    background-color: color-mix(in srgb, var(--c-primary) 4%, var(--input-bg));
}

/* Paneldagi til formasi — qat'iy `style="display:flex"` o'rniga
   sinf bilan. Blade da inline uslub qoldirilmadi. */
.panel-lang { display: flex; gap: 6px; align-items: center; }
.panel-lang select { width: auto; min-width: 74px; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
 * 12c. TUGMA YALTIRASHI
 *
 * ═══ NIMA UCHUN `::after` GRADIENT, RASM EMAS ═══
 * Ustiga kelganda tugma bo'ylab yorug'lik o'tadi. Bu nol bayt
 * (gradient), kompozitorda ishlanadi (`translate`) va tugmaning
 * rangiga bog'liq EMAS — ya'ni har temada ishlaydi.
 *
 * ═══ 🔴 NIMA UCHUN `overflow: hidden` KERAK ═══
 * Yaltirash tugmadan kengroq (`width: 45%` + qiya burchak) va
 * `overflow` bo'lmasa u chetdan chiqib qo'shni elementlar ustiga
 * tushardi.
 *
 * ═══ 🔴 NIMA UCHUN `.btn-ghost` DA YALTIRASH YO'Q ═══
 * `btn-ghost` — IKKILAMCHI tugma va u ataylab kamroq e'tibor
 * tortishi kerak. Yaltirash unga birlamchi tugma bilan bir xil
 * "vazn" berardi va ierarxiya yo'qolardi.
 * ══════════════════════════════════════════════════════════════════ */

.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn:not(.btn-ghost)::after {
    content: '';
    position: absolute;
    top: -60%;
    /* Boshlang'ich holat: tugmaning CHAP tashqarisida. */
    left: -80%;
    width: 45%;
    height: 220%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, .34),
        transparent
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: -1;
}

/* ══════════════════════════════════════════════════════════════════
 * 12d. KO'RSATGICH BOR QURILMALAR (hover holatlari)
 * ══════════════════════════════════════════════════════════════════ */

@media (hover: hover) {

    /* ── Til almashtirgich: tugma-tabletka ─────────────────────── */
    .site-langs a:hover {
        color: var(--c-primary);
        background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    }

    /* Joriy til ustiga kelganda rang o'zgarmaydi (u allaqachon
       to'ldirilgan), faqat soya chuqurlashadi. */
    .site-langs a[aria-current="true"]:hover {
        color: #fff;
        box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--c-primary) 70%, transparent);
    }

    /* ── Nishonlar (chip) ──────────────────────────────────────── */
    .site-chip:hover {
        background: color-mix(in srgb, var(--c-primary) 10%, var(--panel));
        box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--c-primary) 55%, transparent);
    }

    /* ── Non ushoqlari: pastdan chiziq chiqadi ─────────────────── */
    .site-crumbs a {
        position: relative;
        /* `background` bilan chiziq — `text-decoration` animatsiya
           QILINMAYDI (brauzerlar `text-underline-offset` ni
           qo'llab-quvvatlamaydi barcha holatda). */
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0 1px;
        transition: background-size .22s ease, color .2s ease;
    }

    .site-crumbs a:hover { background-size: 100% 1px; }

    /* ── Futer havolalari: yon tomonga suriladi ────────────────── */
    .site-foot-cols a:hover {
        color: var(--c-primary);
        /* `padding-inline-start` — `margin` EMAS: margin qo'shni
           elementlarni ham suradi va butun ustun "titraydi". */
        padding-inline-start: 6px;
    }

    .site-foot-cols a { transition: color .2s ease, padding-inline-start .2s ease; }

    /* ── Xizmat qatorlari ─────────────────────────────────────── */
    .site-svc:hover {
        box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--c-primary) 60%, transparent);
    }

    /* ── Nishon (badge) ustiga kelganda ────────────────────────── */
    .site-badge:hover { border-color: color-mix(in srgb, var(--c-primary) 50%, var(--border)); }

    /* ── Savol-javob sarlavhasi ────────────────────────────────── */
    .site-faq summary:hover { color: var(--c-primary); }

    .site-faq details:hover {
        border-color: color-mix(in srgb, var(--c-primary) 30%, var(--border));
    }

    /* ── Mundarija (API hujjati) ──────────────────────────────── */
    .site-toc a { border-inline-start: 2px solid transparent; }

    .site-toc a:hover {
        border-inline-start-color: var(--c-primary);
    }

    /* ── Blog kartasi ─────────────────────────────────────────── */
    .site-post { transition: border-color .2s ease, box-shadow .2s ease; }

    .site-post:hover {
        border-color: color-mix(in srgb, var(--c-primary) 30%, var(--border));
        box-shadow: var(--lift-2);
    }

    /* ── Qo'ng'iroq (panel yuqori qatori) ─────────────────────────
       Hamyon (balans) hover holati 26e bo'limida — u ikki qismli
       blok va har qismning O'Z hover'i bor. */
    .qongiroq:hover {
        background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    }

    /* ── Mobil tabbar ─────────────────────────────────────────── */
    .tabbar-item:hover {
        color: var(--c-primary);
        background: color-mix(in srgb, var(--c-primary) 8%, transparent);
        border-radius: 10px;
    }

    /* ── Jadval qatorlari ─────────────────────────────────────── */
    tbody tr:hover { background: color-mix(in srgb, var(--c-primary) 6%, transparent); }

    /* ── Karta (panel) ────────────────────────────────────────── */
    .card:hover { border-color: color-mix(in srgb, var(--c-primary) 22%, var(--border)); }

    /* ── Auth sahifasidagi havolalar ──────────────────────────── */
    .links a:hover { color: color-mix(in srgb, var(--c-primary) 80%, var(--text)); }
}

/* ══════════════════════════════════════════════════════════════════
 * 12e. HARAKAT: SILJISH, MASSHTAB, 3D
 *
 * Hammasi `prefers-reduced-motion: no-preference` VA `hover: hover`
 * ichida. Ikki shart ham kerak: birinchisi foydalanuvchi tanlovini
 * hurmat qiladi, ikkinchisi sensorli ekranda "yopishib qolgan"
 * holatni oldini oladi.
 * ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {

    /* ── Tugma: ko'tariladi va yaltirash o'tadi ───────────────────
     *
     * ═══ NIMA UCHUN `translateY(-1px)`, KO'PROQ EMAS ═══
     * Tugma matn bilan bir qatorda turadi. 3-4px ko'tarilish
     * qo'shni matnga nisbatan sezilarli siljish yasaydi va qator
     * "buzilgandek" ko'rinadi. 1px esa "bosiladigan" signalini
     * beradi, lekin joylashuvni buzmaydi. */
    .btn { transition: transform .16s ease, filter .15s ease, box-shadow .2s ease, background .2s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(1px) scale(.99); }

    /* Yaltirash: chapdan o'ngga o'tadi. `transform` ishlatiladi
       (`left` EMAS) — u kompozitorda ishlanadi va layout qayta
       hisoblanmaydi. */
    .btn:not(.btn-ghost)::after {
        transition: transform .55s cubic-bezier(.25, .6, .3, 1);
    }

    .btn:not(.btn-ghost):hover::after {
        transform: skewX(-18deg) translateX(420%);
    }

    /* ── 3D KARTA QIYALIGI ────────────────────────────────────────
     *
     * ═══ 🔴 NIMA UCHUN `perspective` `transform` ICHIDA ═══
     * `perspective` xossasini OTA elementga berish mumkin, lekin
     * o'shanda U BARCHA bolalarga ta'sir qiladi va to'rdagi
     * kartalar bir-biriga nisbatan qiyshayadi (chetdagilar
     * kuchliroq).
     *
     * `transform: perspective(...)` esa HAR element uchun mustaqil
     * — barcha kartalar bir xil qiyalikda ko'rinadi.
     *
     * ═══ NIMA UCHUN 2deg, KO'PROQ EMAS ═══
     * Kartada MATN bor. 5deg dan katta burilishda harflar
     * qirrasi tishlanadi (subpiksel tekislash yo'qoladi) va matn
     * xiralashgandek ko'rinadi. 2deg chuqurlik beradi, lekin matn
     * o'qilishi buzilmaydi.
     *
     * ═══ NIMA UCHUN `will-change` YO'Q ═══
     * U elementni doimiy alohida qatlamga chiqaradi va sahifada
     * 20+ karta bo'lsa xotira sezilarli oshadi. Bu yerda
     * animatsiya qisqa va `transform` o'zi kompozitorga
     * ko'chiriladi — `will-change` foyda bermaydi. */
    .site-card-link:hover {
        transform: perspective(900px) rotateX(2deg) translateY(-5px);
    }

    /* Havola BO'LMAGAN karta ham javob beradi, lekin kuchsizroq —
       u bosilmaydi, shuning uchun "chaqirmasligi" kerak. */
    .site-card:not(.site-card-link) { transition: transform .22s ease, box-shadow .22s ease, border-color .2s ease; }

    .site-card:not(.site-card-link):hover {
        transform: translateY(-2px);
        box-shadow: var(--lift-2);
        border-color: color-mix(in srgb, var(--c-primary) 20%, var(--border));
    }

    /* ── Ikonka doirasi: karta ustiga kelganda jonlanadi ───────── */
    .site-ico,
    .site-metric-ico {
        transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .22s ease;
    }

    .site-card:hover .site-ico,
    .site-metric:hover .site-metric-ico {
        transform: scale(1.08) rotate(-4deg);
        background: color-mix(in srgb, var(--c-primary) 20%, transparent);
    }

    /* ── Qadam nishoni (1 2 3) ────────────────────────────────── */
    .site-step::before { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease; }

    .site-step { transition: transform .22s ease, box-shadow .22s ease, border-color .2s ease; }

    .site-step:hover {
        transform: translateY(-3px);
        box-shadow: var(--lift-2);
        border-color: color-mix(in srgb, var(--c-primary) 22%, var(--border));
    }

    .site-step:hover::before {
        transform: scale(1.12);
        box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--c-primary) 70%, transparent);
    }

    /* ── Ishonch raqami: 3D ko'tarilish ───────────────────────── */
    .site-metric { transition: transform .24s ease, box-shadow .24s ease, border-color .2s ease; }

    .site-metric:hover {
        transform: perspective(900px) rotateX(2.5deg) translateY(-4px);
    }

    /* ── Xizmat qatori: yon tomonga suriladi ──────────────────── */
    .site-svc { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }

    /* `translateX` mantiqiy yo'nalishga ergashmaydi — RTL uchun
       alohida qoida pastda. */
    .site-svc:hover { transform: translateX(4px); }
    [dir="rtl"] .site-svc:hover { transform: translateX(-4px); }

    /* ── Statistika kartasi (panel): ustidagi chiziq o'sadi ───── */
    .stat::before { transition: height .24s ease; }
    .stat:hover::before { height: 5px; }

    .stat:hover { transform: perspective(900px) rotateX(2deg) translateY(-3px); }

    /* ── Yon menyu: ikonka jonlanadi ──────────────────────────── */
    .nav-link svg { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), color .18s ease; }
    .nav-link:hover svg { transform: scale(1.14); }

    /* ── Qo'ng'iroq: chayqaladi ───────────────────────────────── */
    .qongiroq:hover svg { animation: siteBell .6s ease; }

    /* ── Hamyon: yengil ko'tarilish ───────────────────────────────
       `translate` ishlatiladi, `transform` EMAS: blok ichida
       gradient tugma bor va `transform` yangi qatlam yaratib
       gradientni QAYTA rasterlaydi (chetlari tishli ko'rinadi).
       `translate` esa alohida xossa va bunday ta'siri yo'q. */
    .hamyon { transition: translate .2s ease, border-color .2s ease, box-shadow .2s ease; }
    .hamyon:hover { translate: 0 -1px; }

    /* ── Tabbar: bosilganda bosiladi ──────────────────────────── */
    .tabbar-item { transition: color .2s ease, background .2s ease, transform .16s ease; }
    .tabbar-item:active { transform: scale(.94); }

    /* ── Blog kartasi rasmi: masshtablanadi ───────────────────── */
    .site-post { overflow: hidden; }
    .site-post-cover { transition: transform .4s cubic-bezier(.25, .6, .3, 1); }
    .site-post:hover .site-post-cover { transform: scale(1.05); }

    /* ── Brend nishoni: ustiga kelganda aylanadi ──────────────── */
    .brand-dot { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease; }

    .site-brand:hover .brand-dot,
    .brand:hover .brand-dot,
    .auth-brand:hover .brand-dot {
        transform: rotate(-12deg) scale(1.08);
        box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--c-primary) 75%, transparent);
    }

    /* ── Savol-javob: uchburchak burilishi ────────────────────── */
    .site-faq summary { transition: color .2s ease; }
    .site-faq summary::marker { transition: none; }

    /* ── Sarlavha menyusi havolalari ──────────────────────────── */
    .site-nav a { transition: color .2s ease, background .2s ease; }
}

@keyframes siteBell {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-13deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}

/* ══════════════════════════════════════════════════════════════════
 * 12f. AUTH SAHIFALARI: JONLI FON VA 3D KIRISH
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «foydalanuvchi login qilayotgandagi va royhatdan otayotgandagi
 *  sahifalarni orqa fonlari va shunga o'xshash qismlar ham juda
 *  oddiy bo'lib qolgan»
 *
 * Ilgari `.auth-shell` da ikki QO'ZG'ALMAS radial nur bor edi.
 * Endi:
 *   1. Uchta nur va ular SEKIN suriladi (25s) — fon "tirik"
 *   2. Nuqta naqshi (sayt foni bilan bir xil signal)
 *   3. Karta 3D holatdan chiqib keladi
 *   4. Maydonlarda fokus nuri
 * ══════════════════════════════════════════════════════════════════ */

.auth-shell {
    /* Ikki qatlam: nurlar (`background-image` da) va nuqta naqshi.
       `background-color` alohida beriladi — aks holda naqsh ostida
       fon rangi qolmasdi. */
    background-color: var(--bg);
    background-image:
        radial-gradient(closest-side at 18% 12%,
            color-mix(in srgb, var(--c-primary) 22%, transparent), transparent),
        radial-gradient(closest-side at 84% 82%,
            color-mix(in srgb, var(--c-secondary) 20%, transparent), transparent),
        radial-gradient(closest-side at 55% 45%,
            color-mix(in srgb, var(--c-accent) 12%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, var(--text) 8%, transparent) .5px, transparent .5px);
    background-size: 70% 70%, 65% 65%, 80% 80%, 24px 24px;
    background-position: 18% 12%, 84% 82%, 55% 45%, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* ═══ NIMA UCHUN KARTADA `::after` ═══
   Karta ORQASIDA yumshoq brend nuri — u kartani fondan
   "ko'taradi". `box-shadow` bu effektni bermaydi: soya qora,
   bu esa RANGLI va tema rangiga ergashadi.

   `z-index: -1` + ota elementda `position: relative` — nur
   karta MAZMUNI ostida qoladi. */
.auth-card::after {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--c-primary) 22%, transparent), transparent);
    pointer-events: none;
}

.auth-card { isolation: isolate; }

/* Auth tugmasi ham yaltirash oladi (`.btn` emas, alohida element). */
.auth-card button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.auth-card button::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -80%;
    width: 45%;
    height: 220%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .34), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
    /* Fon nurlari sekin suriladi. 25s ATAYLAB sekin: mijoz
       harakatni sezmaydi, lekin sahifa qotib qolgan ko'rinmaydi.

       `background-position` kompozitorda ishlanadi. */
    .auth-shell { animation: siteAuthDrift 25s ease-in-out infinite alternate; }

    /* ═══ 🔴 KARTA 3D HOLATDAN CHIQADI ═══
       `siteRise` (11-bo'limda) faqat yuqoriga siljitadi. Bu esa
       masshtab va X o'qi bo'ylab burilishni ham qo'shadi — karta
       "yotgan holatdan tik turadi".

       `rotateX(8deg)` boshlanish nuqtasi; oxirida 0. 8deg dan
       ko'p bo'lsa matn animatsiya davomida xiralashadi. */
    .auth-card {
        animation: siteAuthIn .58s cubic-bezier(.22, .61, .36, 1) both;
    }

    /* Karta ichidagi elementlar zinapoya bilan chiqadi. */
    .auth-card > * { animation: siteRise .45s cubic-bezier(.22, .61, .36, 1) both; }
    .auth-card > *:nth-child(1) { animation-delay: .10s; }
    .auth-card > *:nth-child(2) { animation-delay: .16s; }
    .auth-card > *:nth-child(3) { animation-delay: .22s; }
    .auth-card > *:nth-child(4) { animation-delay: .28s; }
    .auth-card > *:nth-child(5) { animation-delay: .34s; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .auth-card button { transition: transform .16s ease, filter .15s ease, box-shadow .2s ease; }

    .auth-card button:hover {
        transform: translateY(-1px);
        box-shadow:
            0 2px 4px rgba(16, 24, 40, .12),
            0 14px 26px -10px color-mix(in srgb, var(--c-primary) 80%, transparent);
    }

    .auth-card button:active { transform: translateY(1px) scale(.99); }

    .auth-card button::after { transition: transform .55s cubic-bezier(.25, .6, .3, 1); }
    .auth-card button:hover::after { transform: skewX(-18deg) translateX(420%); }
}

@keyframes siteAuthDrift {
    from { background-position: 18% 12%, 84% 82%, 55% 45%, 0 0; }
    to { background-position: 26% 20%, 74% 72%, 46% 55%, 0 0; }
}

@keyframes siteAuthIn {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(8deg) translateY(26px) scale(.97);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
    }
}

/* ══════════════════════════════════════════════════════════════════
 * 12g. MAYDON FOKUSI — KUCHLIROQ SIGNAL
 *
 * Yuqorida `input:focus-visible` da halqa bor, lekin `:focus`
 * (sichqoncha bilan bosilganda) faqat chegara rangini
 * o'zgartirardi. Forma to'ldirayotgan odam QAYSI maydonda
 * turganini aniq ko'rishi kerak — bu ayniqsa uzun ro'yxatdan
 * o'tish formasida muhim.
 * ══════════════════════════════════════════════════════════════════ */

/* ══ 🔴 FOKUS YUMSHOQ BO'LISHI KERAK ═══════════════════════════════
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «tanlashni bosganda ... rang tanlanishi bilan tezda paydo bolib
 *  qolmoqda, bundan tashqari u juda to'q rangda va border katta,
 *  men silliqroq va shaffofroq bo'lishini xoxlayman»
 *
 * ═══ SABAB: BIR VAQTDA UCH HALQA ═══
 * Maydon bosilganda quyidagilar BIRGA ishlardi:
 *
 *   1-bo'lim   `:focus-visible { outline: 3px solid var(--c-primary) }`
 *   7-bo'lim   `box-shadow: 0 0 0 3px` (18%) + qattiq brend chegara
 *   12g        yana `box-shadow: 0 0 0 3px` (15%) + qattiq chegara
 *
 * Ya'ni 3px qattiq chiziq + 3px halqa + to'yingan chegara — jami
 * ~7px og'ir ramka. Va o'tish YO'Q edi: hammasi bir kadrda
 * paydo bo'lardi.
 *
 * ═══ YECHIM ═══
 *   - chegara TO'LIQ brend rangi emas, 55% aralashma
 *   - qattiq 3px `outline` o'rniga 1.5px ingichka chiziq
 *   - tashqarida 4px KENG, lekin 10% shaffof nur
 *   - hammasi 0.18s da yumshoq paydo bo'ladi
 *
 * ═══ NIMA UCHUN `outline` BUTUNLAY OLIB TASHLANMADI ═══
 * Faqat shaffof nur qoldirilsa, u WCAG ning fokus ko'rsatkichi
 * uchun kontrast talabini (3:1) qondirmasligi mumkin va Windows
 * ning yuqori kontrast rejimida `box-shadow` UMUMAN chizilmaydi.
 * Ingichka chiziq ikkisini ham hal qiladi.
 *
 * ═══ NIMA UCHUN `prefers-reduced-motion` KERAK EMAS ═══
 * O'tish faqat RANG va soyada — element JOYIDAN ko'chmaydi.
 * Loyihaning o'z qoidasi (12-bo'lim): «RANG o'zgarishi harakat
 * EMAS».
 * ══════════════════════════════════════════════════════════════════ */

/* `background-color`, `background` EMAS: `select` da o'q
   `background-image` bilan chiziladi va shorthand o'tishi uni
   har fokusda miltillatardi. */
input,
select,
textarea {
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 10%, transparent);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 1.5px solid color-mix(in srgb, var(--c-primary) 62%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 10%, transparent);
}

/* Yorliq ham javob beradi, LEKIN yumshoqroq: to'liq brend rangi
   o'rniga matn rangi bilan aralashma. Ilgari u to'yingan binafsha
   bo'lib «xato xabari» kabi ko'rinardi.

   ═══ NIMA UCHUN `:focus-within` ═══
   `.field` ichida `<label>` va `<input>` bor. `label:focus` YO'Q
   (yorliq fokus olmaydi), lekin `.field:focus-within` ichidagi
   biror element fokusda bo'lsa rost bo'ladi. */
.field label { transition: color .18s ease; }

.field:focus-within label {
    color: color-mix(in srgb, var(--c-primary) 72%, var(--text));
}

/* ══════════════════════════════════════════════════════════════════
 * 12h. SAVOL-JAVOB OCHILISHI
 *
 * `<details>` ochilganda mazmun DARHOL paydo bo'ladi — sakrash
 * ko'rinadi. `@starting-style` bilan u yumshoq chiqadi.
 *
 * ═══ NIMA UCHUN `@starting-style` ═══
 * `display: none` dan `display: block` ga o'tishda `transition`
 * ODATDA ishlamaydi (element yo'qdan paydo bo'ladi, boshlang'ich
 * qiymat yo'q). `@starting-style` aynan shu boshlang'ich qiymatni
 * beradi.
 *
 * Qo'llab-quvvatlamaydigan brauzerda mazmun oddiygina darhol
 * chiqadi — HECH NARSA buzilmaydi (bu `animation-timeline` dagi
 * `opacity: 0` tuzog'idan farqli, chunki bu yerda boshlang'ich
 * holat `transition` ichida, doimiy qoidada emas).
 * ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    .site-faq details[open] > *:not(summary) {
        animation: siteFaqOpen .28s ease both;
    }
}

@keyframes siteFaqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Uchburchak (marker) burilishi — `summary` ning standart nishoni
   o'rniga o'z nishonimiz.

   ═══ NIMA UCHUN `list-style` VA `::-webkit-details-marker` IKKISI ═══
   Firefox `list-style: none` ni hurmat qiladi, Safari esa
   `::-webkit-details-marker` ni talab qiladi. Ikkisi ham kerak. */
.site-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.site-faq summary::-webkit-details-marker { display: none; }

.site-faq summary::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: -45deg;
    /* Uchburchak matn markaziga to'g'ri kelishi uchun. */
    translate: 0 -1px;
    transition: rotate .24s ease, color .2s ease;
    color: var(--c-primary);
}

.site-faq details[open] summary::before { rotate: 45deg; translate: 0 -3px; }

/* ══════════════════════════════════════════════════════════════════
 * 12i. TEMA XAVFSIZLIGI
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «admin thema ni o'zgartirganda bazi qismlar buzulib qolmoqda»
 *
 * ═══ TOPILGAN MUAMMO: `--c-accent` HAR TEMADA YO'Q ═══
 * Yuqoridagi `.auth-shell` uchinchi nurda `--c-accent` ishlatadi.
 * Agar tema manifestida `accent` bo'lmasa, `color-mix()` NOTO'G'RI
 * qiymat oladi va BUTUN `background-image` e'loni tashlanadi —
 * ya'ni fon butunlay yo'qoladi (nurlar ham, naqsh ham).
 *
 * `@supports` bu holatni tekshira olmaydi (o'zgaruvchi qiymati
 * ishlash vaqtida ma'lum). Yechim — zaxira qiymat: `var()` ning
 * ikkinchi argumenti.
 *
 * ═══ NIMA UCHUN ZAXIRA `--c-secondary` ═══
 * U barcha temada bor (manifest majburiy maydoni) va urg'u
 * rangiga eng yaqin. Natijada eng yomon holatda nur ikkinchi
 * rangda chiqadi — fon YO'QOLMAYDI.
 * ══════════════════════════════════════════════════════════════════ */

.auth-shell {
    background-image:
        radial-gradient(closest-side at 18% 12%,
            color-mix(in srgb, var(--c-primary) 22%, transparent), transparent),
        radial-gradient(closest-side at 84% 82%,
            color-mix(in srgb, var(--c-secondary) 20%, transparent), transparent),
        radial-gradient(closest-side at 55% 45%,
            color-mix(in srgb, var(--c-accent, var(--c-secondary)) 12%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, var(--text) 8%, transparent) .5px, transparent .5px);
}

body.site {
    background-image:
        radial-gradient(closest-side at 15% 0%,
            color-mix(in srgb, var(--c-primary) 9%, transparent), transparent),
        radial-gradient(closest-side at 85% 4%,
            color-mix(in srgb, var(--c-secondary, var(--c-primary)) 7%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, var(--text) 7%, transparent) .5px, transparent .5px);
}

/* ═══ TOPILGAN MUAMMO: `slate` KARTA SOYASINI O'CHIRADI ═══
 * `slate/theme.css`:
 *     .site-card { box-shadow: none; }
 *     .site-card-link:hover { transform: none; box-shadow: none; }
 *
 * Bu ATAYLAB — slate "zich katalog" temasi va u soyasiz. Yuqoridagi
 * 12e bloki `.site-card-link:hover` ga `transform` beradi (aniqlik
 * 0,2,0), slate ham (0,2,0) va tema KEYIN keladi — ya'ni slate
 * g'olib va qiyalik yo'q.
 *
 * BU TO'G'RI XATTI-HARAKAT: tema o'z uslubini tanlagan. Shu sababli
 * bu yerda aniqlik OSHIRILMAYDI.
 *
 * Lekin slate da hech qanday javob QOLMASLIGI yomon — mijoz
 * kartaning bosiladigan ekanini bilmaydi. Slate o'zi
 * `border-color: var(--c-primary)` beradi, ya'ni javob BOR.
 * Tekshirildi: yetarli.
 */

/* ═══ TOPILGAN MUAMMO: `royal` SARLAVHANI GRADIENTGA BO'YAYDI ═══
 * `royal/theme.css` `.site-head` ga gradient beradi va havolalarni
 * oq qiladi. Yuqoridagi 12d bloki `.site-langs a:hover` ga
 * `color: var(--c-primary)` beradi — TO'Q rang, gradient ustida
 * O'QILMAYDI.
 *
 * Yechim: rang `currentColor` dan hisoblanadi, qat'iy emas.
 * `.site-head` ichidagi til almashtirgich uchun alohida qoida va
 * uning aniqligi (0,2,1) — 12d dagi (0,1,1) dan yuqori.
 */
@media (hover: hover) {
    .site-head .site-langs a:hover {
        /* `currentColor` — royal da oq, boshqa temada to'q. Ikki
           holatda ham fon ustida ko'rinadi. */
        color: currentColor;
        background: color-mix(in srgb, currentColor 16%, transparent);
    }
}

/* ══════════════════════════════════════════════════════════════════
 * 13. PANEL: LOGIN QILGANDAN KEYINGI KO'RINISH
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «muvofaqiyatli login qilgach, til tanlash qismlari, boshqa
 *  bo'limlar masalan buyurtmalar bolimiga otish tugmalari va
 *  boshqa tekstlar, buttonlar va hokozolar juda oddiy, shunchaki
 *  htmlda yozib qo'yilgandek bo'ladi»
 *
 * Aniq joylar (`panel/dashboard.blade.php`):
 *
 *   1. «Hammasini ko'rish →»  — YALANG'OCH `<a>`. Hech qanday sinf
 *      yo'q, ya'ni faqat `a { color }` qoidasini oladi. Bu haqiqatan
 *      "htmlda yozib qo'yilgan" havola.
 *
 *   2. «Birinchisini bering» — xuddi shunday, `<p class="muted">`
 *      ichida ko'milgan.
 *
 *   3. `<dl class="grid grid-3">` — foydalanuvchi nomi, email,
 *      referal kodi. Fon yo'q, chegara yo'q, faqat kulrang yorliq
 *      va qora matn.
 *
 *   4. `.badge` — tekis rangli tabletka, hover yo'q.
 *
 *   5. `.progress` — to'ldirilgan qism harakatsiz.
 *
 * Til almashtirgich 12b bo'limida tuzatildi.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 13a. «DAVOMI» HAVOLASI ══════════════════
 *
 * ═══ NIMA UCHUN O'Q CSS DAN, HTML DAN EMAS ═══
 * Blade da `→` belgisi yozilgan edi. Muammo: ekran o'quvchi uni
 * "o'ngga strelka" deb O'QIYDI va bu ma'nosiz shovqin.
 *
 * `::after` bilan qo'yilgan belgi esa bezak sifatida qabul
 * qilinadi va animatsiya ham qilinadi.
 */
.link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--c-primary);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary) 20%, transparent);
}

.link-more::after {
    content: '';
    width: 6px;
    height: 6px;
    /* Ikki chegaradan yasalgan uchburchak — SVG ham, shrift belgisi
       ham kerak emas. `inset-inline` mantiqiy emas, shu sababli
       RTL uchun pastda `scale(-1, 1)` bor. */
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    rotate: 45deg;
    flex: none;
}

[dir="rtl"] .link-more::after { scale: -1 1; }

/* ══════════════════ 13b. MA'LUMOT PLITKALARI (`dl`) ══════════════════
 *
 * `<dl class="grid grid-3">` ichidagi har juftlik endi o'z yuzasiga
 * ega. Fon `--bg` (karta `--panel` dan bir pog'ona pastroq) — plitka
 * karta ichida "cho'kkan" ko'rinadi va bu ma'lumot ekanini bildiradi.
 *
 * ═══ NIMA UCHUN `dl > div` ═══
 * `dt`/`dd` juftligini o'rash uchun blade da `<div>` ishlatilgan
 * (bu HTML5 da to'g'ri). Selektor shuning uchun `div` ga tegadi.
 */
.card dl.grid > div {
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-primary) 4%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.card dl.grid dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.card dl.grid dd {
    font-size: 14px;
    font-weight: 600;
    /* Uzun email yoki kalit plitkadan chiqib ketmasligi kerak. */
    overflow-wrap: break-word;
}

/* ══════════════════ 13c. NISHON: SHAKL HAM SIGNAL ══════════════════
 *
 * ═══ NIMA UCHUN NUQTA QO'SHILDI ═══
 * Ilgari holat FAQAT rang bilan ko'rsatilardi. Rang ko'rmaydigan
 * foydalanuvchi (erkaklarning ~8%) «Bajarilmoqda» va «Bekor
 * qilingan» ni ajratolmasdi.
 *
 * Nuqta ham rangda, LEKIN uning bo'lishi/bo'lmasligi va matn
 * qo'shimcha signal beradi. To'liq yechim matn (u allaqachon bor) —
 * nuqta esa tezkor skanerlash uchun.
 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ══════════════════ 13d. PROGRESS: JONLI TO'LDIRISH ══════════════════ */

.progress {
    height: 6px;
    background: color-mix(in srgb, var(--border) 70%, transparent);
    position: relative;
}

.progress span {
    background: var(--site-grad-text);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}

/* ══════════════════ 13e. YUQORI QATOR: BALANS ══════════════════
 *
 * Qoidalar 26e bo'limiga KO'CHDI: balans endi bitta yorliq emas,
 * ikki nishonli blok (summa → tranzaksiyalar, «+» → to'ldirish). */

/* ══════════════════ 13f. BO'SH HOLAT ══════════════════
 *
 * «Hali buyurtma yo'q» — bu mijozning BIRINCHI ko'rgan holati va
 * shu sababli u eng muhim ekran. Ilgari kulrang matn + yalang'och
 * havola edi.
 *
 * `.panel-empty` sinfi 9-bo'limda e'lon qilingan (grid + markaz).
 * Bu yerda unga YUZA qo'shiladi: uzuq chegara «bu yerda hali hech
 * narsa yo'q, lekin bo'lishi kerak» degan ma'noni beradi — bu
 * interfeys tilida standart signal.
 */
.panel-empty {
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--c-primary) 26%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 4%, transparent);
}

/* Karta ichidagi oxirgi qator (havola yoki tugma) uchun bo'shliq —
   ilgari blade da `style="margin:12px 0 0"` yozilgan edi. */
.card-foot { margin: var(--s-3) 0 0; }

/* ══════════════════ 13g. INLINE USLUBLAR O'RNIGA SINFLAR ══════════════════
 *
 * `panel/dashboard.blade.php` da yettita statik inline uslub bor
 * edi. Ular tema zichlik tokenlariga ergashmaydi va har yangi
 * sahifada qayta yozilishi kerak.
 *
 * ═══ 🔴 QAYSI INLINE USLUB QOLADI ═══
 * `<span style="width:{{ $order->progressPercent() }}%">` —
 * QIYMAT MA'LUMOTDAN keladi va u har qatorda boshqa. Bunday
 * holatda inline uslub TO'G'RI yechim: CSS o'zgaruvchisi orqali
 * uzatish ham mumkin, lekin u qo'shimcha qatlam qo'shadi va hech
 * qanday foyda bermaydi.
 *
 * QOIDA: inline uslub faqat qiymat MA'LUMOTDAN kelganda.
 */

/* Statistika to'ri ostida bo'shliq. */
.panel-stats { margin-bottom: var(--s-3); }

/* Statistika kartasi ichidagi tugma — raqamdan keyin. */
.stat .btn { margin-top: var(--s-2); }

/* Ma'lumot ro'yxati: tashqi bo'shliq yo'q (karta o'zi beradi) va
   `dd` ning brauzer standarti (`margin-inline-start: 40px`)
   olib tashlanadi. */
.card dl.grid { margin: 0; }
.card dl.grid dd { margin: 0; }

/* Bo'sh holat ichidagi matn. */
.panel-empty p { margin: 0; }

/* Progress chizig'i miqdor matnidan keyin. */
td .progress { margin-top: 4px; }

/* Chiqish formasi yon menyu oxirida. */
.side-logout { margin: var(--s-3) 10px 0; }

/* ══════════════════ 13g. PANEL HARAKATI ══════════════════ */

@media (prefers-reduced-motion: no-preference) {
    /* Kartalar zinapoya bilan chiqadi — sahifa "yasalgan" ko'rinadi.

       ═══ NIMA UCHUN FAQAT BESHTA ═══
       Panel sahifalarida odatda 3-5 karta bor. Ko'proq bo'lsa
       oxirgilari kechikishsiz chiqadi — bu to'g'ri, chunki uzun
       kutish sahifa sekin ochilyapti degan hissni beradi. */
    .main > .card,
    .main > .grid {
        animation: siteRise .42s cubic-bezier(.22, .61, .36, 1) both;
    }

    .main > *:nth-child(2) { animation-delay: .04s; }
    .main > *:nth-child(3) { animation-delay: .09s; }
    .main > *:nth-child(4) { animation-delay: .14s; }
    .main > *:nth-child(5) { animation-delay: .19s; }
    .main > *:nth-child(6) { animation-delay: .24s; }

    /* Progress to'ldirilishi: yorug'lik o'tadi. `::after` `span`
       ichida, ya'ni u faqat TO'LDIRILGAN qismda ko'rinadi. */
    .progress span::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .55),
            transparent
        );
        animation: siteProgressShine 1.9s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .link-more { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
    .link-more::after { transition: translate .2s ease; }

    .link-more:hover {
        background: color-mix(in srgb, var(--c-primary) 15%, transparent);
        border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
        box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--c-primary) 65%, transparent);
    }

    /* O'q o'ngga suriladi. RTL da yo'nalish teskari — `scale(-1,1)`
       allaqachon qo'llangan, shu sababli `translate` ham teskari
       ko'rinadi va qo'shimcha qoida kerak emas. */
    .link-more:hover::after { translate: 3px 0; }

    /* Ma'lumot plitkasi ustiga kelganda ko'tariladi. */
    .card dl.grid > div {
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .card dl.grid > div:hover {
        transform: translateY(-2px);
        background: color-mix(in srgb, var(--c-primary) 7%, var(--bg));
        border-color: color-mix(in srgb, var(--c-primary) 28%, var(--border));
    }

    /* Nishon nuqtasi kattalashadi. */
    .badge::before { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); }
    .badge:hover::before { transform: scale(1.35); }

    .badge { transition: border-color .2s ease, background .2s ease; }
}

@keyframes siteProgressShine {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

/* ══════════════════════════════════════════════════════════════════
 * 14. OXIRGI JILO
 *
 * Bu bo'limdagi narsalar kichik, lekin ular BIRGA saytni
 * "loyihalangan" qiladi. Ularning yo'qligi aynan «shunchaki htmlda
 * yozib qo'yilgandek» hissini beradi:
 *
 *   - belgilash katagi (checkbox) brauzer standarti — Windows'da
 *     kulrang kvadrat, hech qanday brend rangi yo'q
 *   - matn belgilanganda ko'k standart fon (brend rangi emas)
 *   - aylantirish chizig'i (scrollbar) tizim rangida
 *   - xato xabari oddiy qizil matn
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 14a. BELGILASH KATAGI VA RADIO ══════════════════
 *
 * ═══ 🔴 QOIDALAR BU YERDA EMAS, 24g-2 BO'LIMIDA ═══
 * Ilgari shu joyda `input[type="checkbox"], input[type="radio"]`
 * uchun o'lcham va `accent-color` turgan, 24g-2 bo'limida esa
 * AYNI selektor bilan ikkinchi qoida bo'lgan.
 *
 * Ikkovining ustunligi TENG (0-1-1), ya'ni g'olibni faqat FAYLDAGI
 * TARTIB belgilardi. Bunday juftlik jimgina nuqson manbasi: kimdir
 * 14a ga xossa qo'shsa, u 24g-2 dagi bir xil nomli xossa bilan
 * urishib, sababi ko'rinmas holatda yo'qolardi.
 *
 * Shu sababli katakcha va radio uchun BITTA manba qoldirildi —
 * 24g-2. Bu yerda faqat BOSHQA elementlarning brend rangi bor.
 */

.checkbox label { cursor: pointer; }

/* Diapazon (range) va progress ham brend rangida. */
input[type="range"] { accent-color: var(--c-primary); }
progress { accent-color: var(--c-primary); }

/* ══════════════════ 14b. MATN BELGILASH ══════════════════
 *
 * Standart belgilash rangi brauzer ko'ki. Brend rangiga
 * o'zgartirilsa mijoz matnni nusxa olayotganda ham sayt
 * "o'ziga tegishli" ko'rinadi.
 *
 * ═══ NIMA UCHUN 22% ═══
 * To'yingan brend rangi fon bo'lsa qora matn O'QILMAYDI. 22%
 * tinta yetarli signal beradi va kontrast saqlanadi.
 */
::selection {
    background: color-mix(in srgb, var(--c-primary) 22%, transparent);
    /* `color` ATAYLAB berilmaydi: matn o'z rangida qoladi va
       kontrast har temada saqlanadi. Qat'iy `#fff` yozilsa
       yorug' temada oq matn och fonda yo'qolardi. */
}

/* ══════════════════ 14c. AYLANTIRISH CHIZIG'I ══════════════════
 *
 * ═══ NIMA UCHUN IKKI USUL ═══
 * `scrollbar-color` — standart (Firefox, Chrome 121+)
 * `::-webkit-scrollbar` — eski WebKit (Safari, Android WebView)
 *
 * Ikkisi ham yozilishi kerak, aks holda O'zbekistonda keng
 * tarqalgan eski Android brauzerlarda chiziq tizim rangida
 * qolardi.
 *
 * ═══ 🔴 NIMA UCHUN `thin`, `none` EMAS ═══
 * `scrollbar-width: none` chiziqni butunlay yashiradi. Bu
 * "chiroyli" ko'rinadi, lekin foydalanuvchi sahifaning QAYSI
 * qismida turganini bilmaydi va uzun jadvalda gorizontal
 * aylantirish MUMKINLIGINI ham sezmaydi. Bu ochiq
 * qulaylik xatosi.
 */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--c-primary) 35%, var(--border)) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--c-primary) 32%, var(--border));
    border-radius: 999px;
    /* Shaffof chegara "ichki bo'shliq" yasaydi — chiziq yupqaroq
       ko'rinadi, lekin ushlash maydoni katta qoladi. */
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    background-clip: content-box;
}

/* ══════════════════ 14d. XATO XABARI ══════════════════
 *
 * `.error` oddiy qizil matn edi. Endi oldida belgi bor — rang
 * ko'rmaydigan foydalanuvchi uchun ham signal.
 */
.error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-weight: 500;
}

.error::before {
    content: '!';
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--c-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ══════════════════ 14e. SARLAVHA MENYUSI ══════════════════
 *
 * Katta ekranda menyu havolalari faqat rang o'zgartirardi. Endi
 * ostida chiziq o'sadi — bu «bu havola» degan aniq signal.
 */
.site-nav a {
    position: relative;
    border-radius: var(--site-radius-sm);
}

@media (hover: hover) {
    .site-nav a:hover {
        color: var(--c-primary);
        background: color-mix(in srgb, var(--c-primary) 8%, transparent);
    }
}

/* Joriy sahifa: ostida to'liq chiziq. */
.site-nav a[aria-current="page"] { color: var(--c-primary); font-weight: 600; }

/* ══════════════════ 14f. QAHRAMONDAGI KIRISH KARTASI: 3D ══════════════════
 *
 * Bosh sahifadagi kirish kartasi (`.site-authcard`) — sahifadagi
 * eng muhim element (mijoz kunda bir necha marta shu yerdan
 * kiradi). Unga yengil 3D chuqurlik beriladi.
 *
 * ═══ NIMA UCHUN FAQAT 1.5deg ═══
 * Karta ichida FORMA bor. Kuchli burilishda `<input>` maydonlari
 * qiyshayadi va matn kiritish noqulay ko'rinadi. 1.5deg esa faqat
 * "ko'tarilgan" hissini beradi.
 */
.site-authcard { position: relative; isolation: isolate; }

/* Karta orqasida rangli nur — `box-shadow` qora, bu esa BREND
   rangida (auth sahifasidagi `.auth-card::after` bilan bir xil
   naqsh). */
.site-authcard::after {
    content: '';
    position: absolute;
    inset: -24px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--c-primary) 16%, transparent), transparent);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .site-authcard { transition: transform .3s ease, box-shadow .3s ease; }

    .site-authcard:hover {
        transform: perspective(1200px) rotateX(1.5deg) translateY(-3px);
    }
}

/* ══════════════════ 14g. LENTA VA YUZA HARAKATI ══════════════════
 *
 * Bo'lim lentasi va qahramon yuzasi ustiga kelganda nur yengil
 * suriladi — bo'lim "tirik" bo'ladi, lekin mazmun joyidan
 * KO'CHMAYDI (matn siljishi o'qishni buzadi).
 */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .site-section-band,
    .site-hero-panel {
        transition: background-position .6s ease, border-color .3s ease;
        background-size: 140% 140%, 100% 100%;
    }

    .site-section-band:hover,
    .site-hero-panel:hover {
        background-position: 30% 20%, 0 0;
        border-color: color-mix(in srgb, var(--c-primary) 24%, var(--border));
    }
}

/* ══════════════════ 14h. YUKLANISH SKELETI YO'Q — SABABI ══════════════════
 *
 * Skelet (shimmer placeholder) ATAYLAB qo'shilmadi. Sahifalar
 * SERVERDA to'liq render qilinadi (Blade), ya'ni HTML kelganda
 * mazmun ALLAQACHON bor. Skelet faqat mazmun keyin yuklanadigan
 * (SPA, AJAX) holatda ma'noli.
 *
 * Bu yerda u faqat sahifani SEKINLASHTIRARDI — qo'shimcha DOM va
 * animatsiya, hech qanday foyda bermasdan.
 */

/* ══════════════════════════════════════════════════════════════════
 * 15. SAHIFALASH
 *
 * ═══ 🔴 NIMA UCHUN BU BO'LIM PAYDO BO'LDI ═══
 * Laravel'ning standart sahifalash ko'rinishi `pagination::tailwind`
 * va u Tailwind sinflarini chiqaradi. Bu loyihada Tailwind
 * BUILD QILINMAYDI (serverda `node`/`npm` yo'q), ya'ni o'sha
 * sinflarning HECH BIRIDA CSS yo'q edi.
 *
 * Sahifalash yalang'och havolalar qatori bo'lib chiqardi: o'q
 * SVG'lari o'lchamsiz, raqamlar yopishib. Bu YETTI sahifada
 * ko'rinardi: buyurtmalar, tranzaksiyalar, bildirishnomalar,
 * tiketlar, obunalar, blog, kategoriya.
 *
 * Yechim ikki qismdan: o'z Blade ko'rinishi
 * (`vendor/pagination/smmbilan`) va shu CSS.
 * ══════════════════════════════════════════════════════════════════ */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-3);
}

.pager-count {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.pager-count b { color: var(--text); font-weight: 700; }

.pager-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ═══ NIMA UCHUN `li` NING O'ZI TUGMA ═══
   Ichida `<a>` yoki `<span>` bo'lishi mumkin (faol/o'chirilgan).
   O'lcham va shakl `li` da berilsa ikkalasi ham bir xil ko'rinadi
   va ichidagi element faqat rangni hal qiladi. */
.pager-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Kvadratdan kengroq: ikki-uch xonali raqam sig'ishi kerak. */
    min-width: 34px;
    height: 34px;
}

.pager-item > a,
.pager-item > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-inline: 8px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* Joriy sahifa: to'ldirilgan. */
.pager-current > span {
    background: var(--site-grad-text);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--c-primary) 70%, transparent);
}

/* Uch nuqta: tugma emas, shunchaki belgi. */
.pager-gap {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .1em;
    min-width: 22px;
}

.pager-gap > span,
.pager-gap {
    border: 0;
    background: none;
}

/* O'chirilgan navigatsiya (birinchi/oxirgi sahifada).

   ═══ NIMA UCHUN YASHIRILMAYDI ═══
   Yashirilsa qolgan tugmalar joyidan siljib ketardi va mijoz
   «keyingi» ni bosishga urinib boshqa tugmani bosardi. */
.pager-nav[aria-disabled="true"] > span {
    opacity: .4;
    cursor: not-allowed;
    background: var(--bg);
}

/* ═══ O'Q: IKKI CHEGARADAN ═══
   SVG ham, shrift belgisi ham kerak emas — nol bayt.
   `rotate` bilan yo'nalish beriladi. */
.pager-arrow {
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.pager-arrow-next { rotate: 45deg; translate: -1px 0; }
.pager-arrow-prev { rotate: -135deg; translate: 1px 0; }

/* RTL: o'qlar teskari. `scale` ishlatiladi — `rotate` qiymatlarini
   ikki marta yozish kerak bo'lmaydi. */
[dir="rtl"] .pager-arrow-next,
[dir="rtl"] .pager-arrow-prev { scale: -1 1; }

@media (hover: hover) {
    .pager-item > a {
        transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .pager-item > a:hover {
        border-color: color-mix(in srgb, var(--c-primary) 45%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 9%, var(--panel));
        color: var(--c-primary);
        box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--c-primary) 60%, transparent);
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .pager-item > a { transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .16s ease; }
    .pager-item > a:hover { transform: translateY(-1px); }
    .pager-item > a:active { transform: translateY(1px); }
}

/* ══════════════════════════════════════════════════════════════════
 * 16. QOLGAN BO'SHLIQ SINFLARI (inline uslub o'rniga)
 *
 * `panel/orders.blade.php` va boshqa panel sahifalarida statik
 * inline uslublar bor. Ular tema zichlik tokenlariga ergashmaydi.
 * Eng ko'p uchraydiganlari uchun sinf.
 * ══════════════════════════════════════════════════════════════════ */

/* Nol tashqi bo'shliq — karta ichidagi forma va maydonlar uchun. */
.m-0 { margin: 0 !important; }

/* ═══ NIMA UCHUN BU YERDA `!important` ═══
   `.field { margin-bottom: 14px }` va `form.grid` kabi qoidalar
   bor va ular bu sinfdan OLDIN turadi. Aniqlik teng bo'lgani
   uchun keyingi g'olib bo'lardi — lekin bu sinf HAR JOYDA
   ishlatiladi va har holat uchun aniqlik oshirish mumkin emas.

   Yordamchi sinflarda `!important` — standart amaliyot (Tailwind,
   Bootstrap ham shunday qiladi). Muhim: u FAQAT yordamchi
   sinflarda, komponent qoidalarida EMAS. */

/* Yonma-yon joylashgan boshqaruvlar (masalan select + tugma). */
.inline-controls { display: flex; gap: var(--s-2); }
.inline-controls select { flex: 1; min-width: 0; }

/* Uzun havolani kesish (jadval katagida). */
.cell-clip {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nishon oldidagi bo'shliq (xizmat nomidan keyin). */
.badge-gap { margin-inline-start: 4px; }

/* ══════════════════════════════════════════════════════════════════
 * 17. MOBIL MENYU ANIMATSIYASI: KADRLAR VA HARAKATSIZ REJIM
 *
 * Qoidalar narvonning 900px pog'onasida (sabab o'sha yerda).
 * Kadrlar va harakatsiz rejim himoyasi shu yerda — ular media
 * so'roviga bog'liq emas.
 * ══════════════════════════════════════════════════════════════════ */

@keyframes siteMenuIn {
    from {
        /* Yuqoridan pastga ochiladi. `inset(0 0 100% 0)` — pastdan
           100% kesilgan, ya'ni ko'rinmaydi. */
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes siteMenuLink {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ══ 🔴 HARAKATSIZ REJIM QOIDASI BU YERDA EMAS — FAYL OXIRIDA ══════
 *
 * Ilgari shu joyda `@media (prefers-reduced-motion: reduce)` bloki
 * turgan va u menyu animatsiyasini o'chirardi. U ISHLAMAGAN.
 *
 * ═══ NIMA UCHUN ISHLAMAGAN ═══
 * Animatsiyaning O'ZI narvonda e'lon qilinadi
 * (`@media (max-width: 980px)`, fayl oxirida). Ikki selektor AYNI
 * (`.site-burger[open] > .site-nav`), ustuvorlik ham AYNI (0,3,0) —
 * media so'rovi ustuvorlikka ta'sir qilmaydi. Bunday holatda
 * KEYINGISI g'olib bo'ladi va narvon bu blokdan ~6000 qator KEYIN
 * turadi.
 *
 * Natija: harakatni kamaytirishni so'ragan foydalanuvchi menyu
 * animatsiyasini BARIBIR ko'rardi. Vestibulyar buzilishi bor
 * foydalanuvchi uchun bu bosh og'rig'i va ko'ngil aynishi.
 *
 * Xuddi shu tuzoq `.site-burger > summary > svg` o'tishi bilan bir
 * marta yuz bergan va o'sha paytda O'TISHNI ko'chirish bilan hal
 * qilingan (1091-qator izohiga qaralsin). Bu safar animatsiyani
 * ko'chirib bo'lmaydi — u kenglikka bog'liq va narvonda turishi
 * SHART. Shuning uchun HARAKATSIZ REJIM bloki narvondan KEYINGA
 * ko'chirildi; bu narvon qoidasining o'zi ruxsat bergan istisno
 * (narvon boshidagi izohga qaralsin).
 *
 * Yangi qoida: harakatni o'chiruvchi HAR QANDAY blok fayl OXIRIDA
 * yozilishi kerak, aks holda narvon uni jimgina bekor qiladi. */

/* ══════════════════════════════════════════════════════════════════
 * 18. LOGO: YUMALOQ NISHON
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «logo ... to'rtburchak bo'lib qolgan»
 *
 * Ikki joyda ikki xil sabab bor edi:
 *
 *   1. BRAUZER YORLIG'I (tab) — `public/images/brend/icon-32.png`
 *      manba rasmdan kvadrat qirqilgan. Bu CSS bilan tuzatilmaydi:
 *      yorliq ikonkasiga sahifa uslubi TEGMAYDI. Tuzatish
 *      `scripts/brend-yumaloq.php` da — fayllarning O'ZI yumaloq
 *      va shaffof burchakli qilib qayta yasaladi.
 *
 *   2. SAHIFADAGI LOGO — `.site-logo` va `.brand-logo` da
 *      `border-radius: 50%` ALLAQACHON bor edi, ya'ni u yumaloq
 *      chiqardi. Bu yerda qo'shilgani — chegara halqasi.
 *
 * ═══ NIMA UCHUN CHEGARA HALQASI KERAK ═══
 * Logoning foni TO'Q (deyarli qora). Oq sarlavhada to'q doira
 * "teshik" kabi ko'rinadi — chetlari qattiq kesilgan. Yengil
 * ichki halqa (`box-shadow: inset`) va tashqi nur chetni yumshatadi
 * va nishon "qo'yilgan" ko'rinadi.
 * ══════════════════════════════════════════════════════════════════ */

.site-logo,
.brand-logo {
    /* Ichki halqa — to'q disk chetini yumshatadi.
       Tashqi nur — brend rangida, nishonni fondan ko'taradi. */
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent),
        0 2px 8px -2px color-mix(in srgb, var(--c-primary) 55%, transparent);
    /* Shaffof burchakli PNG ostida fon ko'rinmasligi kerak. */
    background: transparent;
}

/* Panel yon menyusidagi sayt nomi — logo yonida. */
.brand-nom {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
 * 19. API HUJJATI
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «api hujjatlar bolimi ham oddiy bo'lib qolgan ekan, foydalanuvchi
 *  uchun chiroyliroq qilishimiz kerak, tugmalar qo'shish, tekslarni
 *  chiroyliroq qilish, kodlarni avto copy qiladigan qilish albatta
 *  ustiga bosganda, bundan tashqari biroz o'zgartirish kiriting
 *  qulayroq bo'lsin»
 *
 * Nima qo'shildi:
 *   - kod bloklari TO'Q fonda (hujjat konventsiyasi) + nusxa tugmasi
 *   - usul nishonlari (GET yashil, POST ko'k, DELETE qizil)
 *   - manzil kartalari (bosilganda nusxa olinadi)
 *   - so'nggi nuqtalar jadval o'rniga SKANERLANADIGAN qatorlar
 *   - tezkor havolalar (sahifa boshida)
 *   - mundarijada joriy bo'lim belgilanadi
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 19a. KOD BLOKI: TO'Q FON ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN QAT'IY TO'Q RANG, TEMA RANGI EMAS ═══
 * Kod bloki YORUG' temada ham to'q bo'lishi kerak — bu sanoat
 * konventsiyasi (GitHub, Stripe, Twilio hammasi shunday). Sabab
 * amaliy: to'q fonda monospace matn kontrasti yuqori va uzun
 * namunani o'qish oson.
 *
 * `var(--panel)` ishlatilsa yorug' temada oq fonda kulrang kod
 * bo'lardi — u "hujjat" emas, "matn" kabi ko'rinadi.
 *
 * Rang tema PRIMARY iga bir oz bo'yaladi (`color-mix`), ya'ni u
 * har temada boshqa tusda bo'ladi, lekin HAR DOIM to'q qoladi. */
.site-code {
    position: relative;
    background: color-mix(in srgb, var(--c-primary) 8%, #0f1420);
    border-color: color-mix(in srgb, var(--c-primary) 22%, #1c2436);
    box-shadow: var(--lift-2);
}

.site-code-head {
    background: color-mix(in srgb, #fff 6%, transparent);
    border-bottom-color: color-mix(in srgb, #fff 10%, transparent);
    color: color-mix(in srgb, #fff 62%, transparent);
    /* Nusxa tugmasi uchun joy — u o'ng chetda absolyut turadi. */
    padding-inline-end: 96px;
}

.site-code-head > span:not(.site-code-verb) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-code-verb {
    flex: none;
    background: color-mix(in srgb, var(--c-primary) 30%, transparent);
    color: color-mix(in srgb, #fff 92%, transparent);
}

.site-code pre {
    color: color-mix(in srgb, #fff 88%, transparent);
    /* Uzun namunada gorizontal aylantirish chizig'i to'q fonda
       ko'rinishi kerak. */
    scrollbar-color: color-mix(in srgb, #fff 30%, transparent) transparent;
}

.site-code pre::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #fff 28%, transparent);
    background-clip: content-box;
}

/* ══════════════════ 19b. NUSXA TUGMASI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN TUGMA JS DAN QO'SHILADI ═══
 * Tugma faqat JS ishlaganda FOYDALI: `navigator.clipboard` bo'lmasa
 * bosish hech narsa qilmasdi va bu "buzuq tugma" — eng yomon
 * holat.
 *
 * Blade da yozilsa u HAR DOIM ko'rinardi. JS qo'shsa esa faqat
 * imkoniyat bor bo'lganda paydo bo'ladi (progressive enhancement).
 *
 * ═══ NIMA UCHUN `position: absolute` ═══
 * Sarlavha qatori `flex` va tugma oxirgi element bo'lsa u
 * manzil matnini SIQARDI (manzil uzun bo'lsa kesilardi).
 * Absolyut joylashuv matnga tegmaydi; joy `padding-inline-end`
 * bilan zaxiralangan. */
.site-code-copy {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: color-mix(in srgb, #fff 78%, transparent);
    font: inherit;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    /* Tugma ustiga kelganda kod matni tanlanmasligi kerak. */
    user-select: none;
}

.site-code-copy svg { width: 13px; height: 13px; flex: none; }

/* Muvaffaqiyat holati — JS `data-holat="olindi"` qo'yadi. */
.site-code-copy[data-holat="olindi"] {
    border-color: color-mix(in srgb, var(--c-success) 60%, transparent);
    background: color-mix(in srgb, var(--c-success) 22%, transparent);
    color: color-mix(in srgb, #fff 95%, transparent);
}

.site-code-copy[data-holat="xato"] {
    border-color: color-mix(in srgb, var(--c-danger) 60%, transparent);
    background: color-mix(in srgb, var(--c-danger) 22%, transparent);
}

/* Kod maydoni bosilganda ham nusxa olinadi — JS `pre` ga
   `role="button"` qo'ymaydi (u kod, tugma emas), lekin kursor
   bosish mumkinligini bildiradi. */
.site-code[data-nusxa] pre { cursor: copy; }

@media (hover: hover) {
    .site-code-copy { transition: background .2s ease, border-color .2s ease, color .2s ease; }

    .site-code-copy:hover {
        background: color-mix(in srgb, #fff 16%, transparent);
        border-color: color-mix(in srgb, #fff 32%, transparent);
        color: #fff;
    }

    .site-code[data-nusxa] pre:hover {
        background: color-mix(in srgb, #fff 3%, transparent);
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .site-code-copy { transition: background .2s ease, border-color .2s ease, color .2s ease, transform .14s ease; }
    .site-code-copy:active { transform: scale(.95); }
}

/* ══════════════════ 19c. USUL NISHONLARI ══════════════════
 *
 * HTTP usuli RANG bilan ajratiladi — hujjatni skanerlashda ko'z
 * usulni matndan oldin topadi.
 *
 * ═══ NIMA UCHUN RANG YETARLI EMAS ═══
 * Usul nomi MATN sifatida ham yozilgan (`GET`, `POST`), ya'ni rang
 * ko'rmaydigan foydalanuvchi ham o'qiydi. Rang faqat tezlashtiradi. */
.api-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    flex: none;
}

.api-method-get {
    background: color-mix(in srgb, var(--c-success) 16%, transparent);
    color: color-mix(in srgb, var(--c-success) 82%, var(--text));
    border: 1px solid color-mix(in srgb, var(--c-success) 34%, transparent);
}

.api-method-post {
    background: color-mix(in srgb, var(--c-primary) 15%, transparent);
    color: color-mix(in srgb, var(--c-primary) 88%, var(--text));
    border: 1px solid color-mix(in srgb, var(--c-primary) 34%, transparent);
}

.api-method-delete {
    background: color-mix(in srgb, var(--c-danger) 15%, transparent);
    color: color-mix(in srgb, var(--c-danger) 82%, var(--text));
    border: 1px solid color-mix(in srgb, var(--c-danger) 34%, transparent);
}

/* ══════════════════ 19d. SO'NGGI NUQTALAR RO'YXATI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN JADVAL EMAS ═══
 * Ilgari v3 so'nggi nuqtalari `<table>` da edi: uch ustun (usul,
 * yo'l, izoh). Muammo — telefonda ustunlar siqilib `POST` so'zi
 * ikki qatorga bo'linardi va yo'l kesilardi.
 *
 * Qatorlar esa telefonda ustunga aylanadi va hech narsa
 * kesilmaydi. Bundan tashqari usul nishoni ko'rinadi.
 *
 * ═══ NIMA UCHUN `<ul>` ═══
 * Bu RO'YXAT (bir turdagi elementlar ketma-ketligi), jadval emas —
 * ustunlar orasida mantiqiy bog'lanish yo'q. Ekran o'quvchi
 * elementlar sonini aytadi, bu foydali. */
.api-eps { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }

.api-ep {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 10px var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--site-radius-sm);
    background: var(--panel);
}

.api-ep-path {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: break-word;
    min-width: 0;
}

.api-ep-note {
    margin-inline-start: auto;
    font-size: 13px;
    color: var(--muted);
    text-align: end;
    flex: 0 1 auto;
    min-width: 0;
}

@media (hover: hover) {
    .api-ep { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }

    .api-ep:hover {
        border-color: color-mix(in srgb, var(--c-primary) 34%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 4%, var(--panel));
        box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--c-primary) 60%, transparent);
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .api-ep { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .18s ease; }
    .api-ep:hover { transform: translateX(3px); }
    [dir="rtl"] .api-ep:hover { transform: translateX(-3px); }
}

/* ══════════════════ 19e. MANZIL KARTALARI ══════════════════
 *
 * Sahifa boshida ikki asosiy manzil (v2, v3) katta va nusxa
 * olinadigan holda turadi — reseller birinchi navbatda shuni
 * izlaydi. Ilgari ular jadvalning ichida ko'milgan edi. */
.api-bases { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.api-base {
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--site-radius-sm);
    background: var(--panel);
}

.api-base-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: 8px;
}

.api-base-name { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }

.api-base-url {
    display: block;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    overflow-wrap: break-word;
}

/* ══════════════════ 19f. TEZKOR HAVOLALAR ══════════════════ */
.api-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }

.api-quick a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 22%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 7%, transparent);
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

@media (hover: hover) {
    .api-quick a { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }

    .api-quick a:hover {
        background: color-mix(in srgb, var(--c-primary) 14%, transparent);
        border-color: color-mix(in srgb, var(--c-primary) 42%, var(--border));
        box-shadow: 0 3px 12px -5px color-mix(in srgb, var(--c-primary) 60%, transparent);
    }
}

/* ══════════════════ 19g. MUNDARIJADA JORIY BO'LIM ══════════════════
 *
 * JS `aria-current="true"` qo'yadi (scroll-spy). CSS esa faqat
 * ko'rinishini beradi — JS ishlamasa mundarija oddiy havolalar
 * ro'yxati bo'lib qoladi va HECH NARSA buzilmaydi. */
.site-toc a[aria-current="true"] {
    color: var(--c-primary);
    font-weight: 700;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    border-inline-start-color: var(--c-primary);
}

/* ══════════════════ 19i. SO'ROV VA JAVOB NAMUNASI ══════════════════
 *
 * ═══ NIMA UCHUN BU BO'LIM KERAK BO'LDI ═══
 * Hujjatda uch nuqtalar JADVAL bilan sanalgan edi: metod, manzil,
 * ruxsat, holat kodi. So'rov va javob TANASI esa hech qayerda
 * ko'rsatilmagan — reseller uni taxmin qilishga majbur bo'lardi.
 *
 * Endi har uch nuqta yig'iladigan blok: sarlavha qatorida jadval
 * bergan AYNI ma'lumot, ichida esa to'liq namuna.
 *
 * ═══ NIMA UCHUN YIG'ILADIGAN ═══
 * v3 da 10 uch nuqta bor. Hammasi ochiq bo'lsa bitta kartada ~250
 * qator kod chiqardi va xato kodlari jadvali sahifaning juda pastiga
 * tushardi — ya'ni namuna qo'shish hujjatni O'QISHNI qiyinlashtirardi.
 *
 * `.form-yigma` (22-bo'lim) bilan ayni naqsh, lekin uslub boshqa:
 * u FORMA maydonlarini yashiradi, bu esa KOD namunasini. */
.api-namunalar {
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.api-namuna {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    overflow: hidden;
}

/* ═══ NIMA UCHUN STANDART UCHBURCHAK OLIB TASHLANADI ═══
   Brauzer markeri har platformada boshqacha ko'rinadi (Safari da
   uchburchak, Firefox da boshqa o'lcham) va u `flex` tartibini
   buzadi. O'rniga o'ng chetdagi burchak belgisi ishlatiladi. */
.api-namuna > summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 10px var(--s-3);
    cursor: pointer;
    list-style: none;
}

.api-namuna > summary::-webkit-details-marker { display: none; }
.api-namuna > summary::marker { content: ''; }

/* Manzil — eng muhim qism, shu sababli o'sadi va qolganini chetga
   suradi. `min-width: 0` uzun manzil nishonlarni ekrandan chiqarib
   yubormasligi uchun. */
.api-namuna-yol {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    /* Manzilda bo'shliq YO'Q, ya'ni oddiy `break-word` hech narsa
       qilmasdi. */
    word-break: break-all;
}

.api-namuna-ruxsat {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    flex: none;
}

.api-namuna-holat {
    flex: none;
    min-width: 34px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    color: var(--muted);
}

.api-namuna-ich { padding: 0 var(--s-3) var(--s-2); }

/* Blok ichida kod namunasi zichroq turadi: tashqi bo'shliq
   `.api-namuna-ich` da allaqachon bor. */
.api-namuna-ich .site-code { margin-block: var(--s-2); }

@media (hover: hover) {
    .api-namuna { transition: border-color .2s ease; }

    .api-namuna:hover {
        border-color: color-mix(in srgb, var(--c-primary) 30%, var(--border));
    }
}

/* Ochilgan blok ajralib turadi — o'qilayotgan joy ko'rinadi. */
.api-namuna[open] {
    border-color: color-mix(in srgb, var(--c-primary) 34%, var(--border));
}

.api-namuna[open] > summary {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--c-primary) 4%, transparent);
}

/* ══ 🔴 OCHILISH YUMSHOQ BO'LADI ══════════════════════════════════
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «apilardagi methodlar ustiga bosganda example request va
 *  response chiqmoqda bu yaxshi ammo, tugma bosillishi bilan
 *  sarzi chiqib qolmoqda, bu xato siliqroq qilishimiz kerak»
 *
 * `<details>` ochilganda brauzer mazmunni BIR KADRDA ko'rsatadi —
 * hech qanday o'tish yo'q. Bu yerda mazmun katta (curl namunasi +
 * JSON javob, ~40 qator), ya'ni sakrash ayniqsa keskin.
 *
 * ═══ NIMA UCHUN `animation`, `transition` EMAS ═══
 * Yopiq `<details>` mazmuni `display: none` da turadi. `transition`
 * `display: none` dan chiqqan elementda ISHLAMAYDI — boshlang'ich
 * qiymat yo'q. `animation` esa ishlaydi.
 *
 * Bu loyihada allaqachon IKKI joyda yechilgan naqsh:
 * `.site-faq details[open]` va `.form-yigma[open]`. Uchinchi marta
 * yangi kadr to'plami yozilMAYDI — mavjud `siteFaqOpen` qayta
 * ishlatiladi.
 *
 * ═══ NIMA UCHUN 0.26s ═══
 * Ikki qardosh blok bilan AYNI qiymat. Interfeys uchun 0.15-0.3s
 * standart: qisqasi sezilmaydi, uzunrog'i sekin tuyuladi.
 *
 * `prefers-reduced-motion` shart: bu HARAKAT (mazmun siljiydi),
 * rang emas. */
@media (prefers-reduced-motion: no-preference) {
    .api-namuna[open] .api-namuna-ich {
        animation: siteFaqOpen .26s ease both;
    }
}

/* ══════════════════ 19h. BOSHLASH QADAMLARI ══════════════════ */
.api-start { display: grid; gap: var(--s-2); counter-reset: apiqadam; list-style: none; margin: 0 0 var(--s-4); padding: 0; }

.api-start li {
    counter-increment: apiqadam;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    font-size: 14px;
    line-height: 1.6;
}

.api-start li::before {
    content: counter(apiqadam);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
 * 20. DOIMIY FON HARAKATI
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «saytni asosiy qismida hech qanday doimiy yurib turadigan
 *  animatsiya yo'q shunni ham qo'shsangiz bo'lar edi, ko'zga
 *  unnchalik tashlanmasa ham bo'lgani yaxshi»
 *
 * Ilgari doimiy harakat FAQAT ikki joyda bor edi: qahramon
 * lentasidagi to'lqin (`siteWave`, 14s) va CTA gradienti
 * (`siteGradShift`, 18s). Ikkisi ham bosh sahifaning ma'lum
 * qismida — sahifaning O'RTASI harakatsiz edi.
 *
 * ═══ NIMA UCHUN FON, MAZMUN EMAS ═══
 * Mazmunni (kartalar, matn) doimiy harakatlantirish MUMKIN EMAS:
 * o'qiyotgan odam uchun bu chalg'itadi va matn "qimirlab" turadi.
 *
 * Fon nurlari esa e'tibor tortmaydi — ular sezilmasdan chuqurlik
 * beradi. Egasi aynan shuni so'radi: «ko'zga unchalik
 * tashlanmasa ham bo'lgani yaxshi».
 *
 * ═══ 🔴 NIMA UCHUN 48 SEKUND ═══
 * Bu ATAYLAB juda sekin. Hisob: 48s davomida nur ~8% masofaga
 * suriladi, ya'ni sekundda 0.17%. Ko'z bunday tezlikni HARAKAT
 * deb qabul qilmaydi — u faqat sahifaga qaytganda "biror narsa
 * o'zgargan" degan tuyg'u qoldiradi.
 *
 * Tez animatsiya (5-10s) esa periferik ko'rishda seziladi va
 * o'qishga xalaqit beradi.
 *
 * ═══ 🔴 NIMA UCHUN `background-position`, `transform` EMAS ═══
 * `transform` butun `<body>` ni ko'chirardi — mazmun ham
 * siljirdi. `background-position` esa FAQAT fon qatlamiga tegadi
 * va u kompozitorda ishlanadi (asosiy ip bloklanmaydi).
 *
 * ═══ NIMA UCHUN `alternate` ═══
 * Aylanma (`infinite` bilan boshlanish nuqtasiga qaytish)
 * sakrash yasardi: oxirgi kadr bilan birinchi kadr orasida
 * keskin o'tish ko'rinardi. `alternate` esa orqaga qaytadi —
 * uzluksiz.
 * ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
    /* Ommaviy sahifalar. */
    body.site {
        animation: siteFonSuruv 48s ease-in-out infinite alternate;
    }

    /* Panel — `body.panel` (5-bo'limda qo'shildi). */
    body.panel {
        animation: siteFonSuruv 60s ease-in-out infinite alternate;
    }

    /* ── Bo'lim lentasi: nur aylanadi ─────────────────────────────
     *
     * Lentaning o'z gradienti ham sekin suriladi. 36s — fon
     * harakatidan boshqa davr, ya'ni ikkisi bir-biriga "qadam
     * bosmaydi" va naqsh takrorlanmaydi. */
    .site-section-band,
    .site-hero-panel {
        background-size: 150% 150%, 100% 100%, 100% 100%;
        animation: siteLentaSuruv 36s ease-in-out infinite alternate;
    }

    /* ── Qahramon lentasi: nurlar suzadi ─────────────────────────
     *
     * `.site-hero-band` da ikki radial nur bor. Ular sekin
     * siljiydi — to'lqin animatsiyasi (`siteWave`) bilan birga
     * lenta "tirik" ko'rinadi. */
    .site-hero-band {
        background-size: 130% 130%, 120% 120%, 100% 100%;
        animation: siteLentaSuruv 42s ease-in-out infinite alternate;
    }

    /* ── Ikonka doiralari: juda yengil "nafas" ───────────────────
     *
     * ═══ 🔴 NIMA UCHUN FAQAT `opacity`, `scale` EMAS ═══
     * `scale` ikonkani kattalashtiradi va u qo'shni matnga
     * nisbatan siljigandek ko'rinardi. `opacity` esa joylashuvga
     * TEGMAYDI — faqat fon tintasi kuchayadi va susayadi.
     *
     * 0.82 → 1.0 diapazoni juda tor: bu "yonib-o'chish" emas,
     * yengil pulsatsiya.
     *
     * ═══ NIMA UCHUN KECHIKISH HAR XIL ═══
     * Barcha ikonka bir vaqtda pulsatsiya qilsa u "signal" kabi
     * ko'rinadi va e'tibor tortadi. Har xil kechikish bilan
     * harakat tarqaladi va sezilmaydi. */
    .site-ico,
    .site-metric-ico {
        animation: siteNafas 9s ease-in-out infinite alternate;
    }

    .site-cards > *:nth-child(2n) .site-ico { animation-delay: -2.4s; }
    .site-cards > *:nth-child(3n) .site-ico { animation-delay: -4.8s; }
    .site-metrics > *:nth-child(2n) .site-metric-ico { animation-delay: -3.1s; }
    .site-metrics > *:nth-child(3n) .site-metric-ico { animation-delay: -6.2s; }

    /* ═══ 🔴 NIMA UCHUN HOVER PULSATSIYANI TO'XTATADI ═══
     * 12e bo'limida `.site-card:hover .site-ico` ga `transform`
     * beriladi. Pulsatsiya davom etsa ikki animatsiya bir xossaga
     * yozib, hover natijasi "sakrab" ko'rinardi. */
    .site-card:hover .site-ico,
    .site-metric:hover .site-metric-ico {
        animation: none;
    }
}

@keyframes siteFonSuruv {
    from { background-position: left top, right top, left top; }
    to { background-position: 8% -3%, 92% 5%, left top; }
}

@keyframes siteLentaSuruv {
    from { background-position: 88% 0%, 0% 100%, 0 0; }
    to { background-position: 62% 26%, 22% 74%, 0 0; }
}

@keyframes siteNafas {
    from { opacity: .82; }
    to { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
 * 21. PANEL: IKKI ALOHIDA TEKISLIK
 *
 * ═══ EGASINING SHIKOYATI (ekran rasmi bilan) ═══
 * «chap tomondagi bolimlar orqa foni ham oddiy asosiy fon ham bir
 *  xil, kamiga teksstlar ham bir xil. bundan tashqari foydalanuvchi
 *  uchun juda noqulay va oddiy bo'lib qolgan»
 *
 * ═══ 🔴 ASL SABAB: `<body>` DA SINF YO'Q EDI ═══
 * 12-bo'limda `body.site` uchun qatlamli fon yozilgan (radial
 * nurlar + nuqta naqshi). Lekin panel layouti `<body>` ni SINFSIZ
 * chiqarardi:
 *
 *     <body>            <- panel
 *     <body class="site">  <- ommaviy sayt
 *
 * Ya'ni qatlamli fon panelga UMUMAN tegmagan va panel tekis
 * `--bg` (#f4f5fa) ustida qolgan.
 *
 * Yon menyu esa `--panel` (#ffffff). Ikki rang orasidagi farq
 * atigi ~4% yorqinlik — ko'z ularni AJRATMAYDI. Egasi buni
 * to'g'ri ta'rifladi: «bir xil».
 *
 * Tuzatish ikki qismdan:
 *   1. `layouts/panel` da `<body class="panel">`
 *   2. Shu bo'limdagi qoidalar
 *
 * ═══ MAQSAD: IKKI TEKISLIK ═══
 * Yon menyu — BOSHQARUV tekisligi (to'qroq, tinta bilan)
 * Asosiy maydon — MAZMUN tekisligi (yorug'roq, naqshli)
 *
 * Ikkisi orasida aniq chegara: rang farqi + chegara chizig'i +
 * ichki soya.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 21a. ASOSIY MAYDON FONI ══════════════════ */

body.panel {
    background-color: var(--bg);
    background-image:
        radial-gradient(closest-side at 78% 0%,
            color-mix(in srgb, var(--c-primary) 8%, transparent), transparent),
        radial-gradient(closest-side at 12% 8%,
            color-mix(in srgb, var(--c-secondary, var(--c-primary)) 6%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, var(--text) 6%, transparent) .5px, transparent .5px);
    background-size: 120% 760px, 100% 620px, 22px 22px;
    background-position: right top, left top, left top;
    background-repeat: no-repeat, no-repeat, repeat;
}

html[data-mode="dark"] body.panel {
    background-image:
        radial-gradient(closest-side at 78% 0%,
            color-mix(in srgb, var(--c-primary) 15%, transparent), transparent),
        radial-gradient(closest-side at 12% 8%,
            color-mix(in srgb, var(--c-secondary, var(--c-primary)) 12%, transparent), transparent),
        radial-gradient(circle,
            color-mix(in srgb, #fff 4%, transparent) .5px, transparent .5px);
}

@media (prefers-color-scheme: dark) {
    html[data-mode="system"] body.panel {
        background-image:
            radial-gradient(closest-side at 78% 0%,
                color-mix(in srgb, var(--c-primary) 15%, transparent), transparent),
            radial-gradient(closest-side at 12% 8%,
                color-mix(in srgb, var(--c-secondary, var(--c-primary)) 12%, transparent), transparent),
            radial-gradient(circle,
                color-mix(in srgb, #fff 4%, transparent) .5px, transparent .5px);
    }
}

/* ══════════════════ 21b. YON MENYU: BOSHQARUV TEKISLIGI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN TINTA KUCHAYTIRILDI ═══
 * Ilgari: `linear-gradient(180deg, primary 6%, panel 42%)` — ya'ni
 * yuqorida 6% tinta, 42% dan keyin TOZA OQ. Asosiy maydon esa
 * #f4f5fa. Natijada menyuning pastki uchdan ikkisi asosiy maydondan
 * YORQINROQ oq bo'lib, chegara yo'qolgan.
 *
 * Endi tinta butun balandlikda saqlanadi (10% → 5%) va u asosiy
 * maydondan TO'QROQ. Ko'z ikki tekislikni darhol ajratadi.
 *
 * ═══ NIMA UCHUN NUQTA NAQSHI YO'Q ═══
 * Asosiy maydonda naqsh bor. Menyuda ham bo'lsa ikkisi bir xil
 * "mato" bo'lib chegara yana yo'qolardi. Menyu TEKIS qoladi —
 * farq shundan ham kuchayadi. */
.side {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--c-primary) 11%, var(--panel)),
            color-mix(in srgb, var(--c-primary) 5%, var(--panel)) 55%,
            color-mix(in srgb, var(--c-primary) 7%, var(--panel)));
    border-inline-end: 1px solid color-mix(in srgb, var(--c-primary) 16%, var(--border));
    /* Ichki soya — menyu asosiy maydondan "chuqurroq" turadi. */
    box-shadow: inset -8px 0 16px -12px color-mix(in srgb, var(--c-primary) 40%, transparent);
}

/* ══════════════════ 21c. BREND ══════════════════ */

.brand {
    font-size: 17px;
    letter-spacing: -.02em;
    /* Ajratgich chizig'i gradient — chetlarda yo'qoladi, qat'iy
       chiziqdan yumshoqroq. */
    border-bottom: 0;
    position: relative;
    padding-bottom: 18px;
}

.brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: 6px;
    height: 1px;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--c-primary) 34%, transparent),
        transparent 85%
    );
}

/* ══════════════════ 21d. GURUH SARLAVHASI ══════════════════
 *
 * ═══ EGASINING SHIKOYATI: «teksstlar ham bir xil» ═══
 * Ilgari guruh sarlavhasi (BUYURTMALAR, MOLIYA, YORDAM, HISOB)
 * 10.5px kulrang matn edi va havolalar 14px kulrang. Farq juda
 * kichik — ierarxiya ko'rinmasdi.
 *
 * Endi sarlavha oldida qisqa rangli chiziq bor va rang brend
 * tomonga siljigan. U «bo'lim boshlanadi» degan aniq signal. */
.nav-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    color: color-mix(in srgb, var(--muted) 62%, var(--c-primary));
    margin: 0 12px 9px;
}

.nav-title::before {
    content: '';
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 55%, transparent);
    flex: none;
}

/* ══════════════════ 21e. NAVIGATSIYA HAVOLALARI ══════════════════ */

.nav-link {
    /* Ikonka va matn orasidagi bo'shliq kattaroq — havola
       "siqilgan" ko'rinmaydi. */
    gap: 10px;
    color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

/* Ikonka o'z maydonida — havola qatorlari aniq tekislanadi va
   ikonka "suzib" ketmaydi. */
.nav-link svg {
    flex: none;
    opacity: .72;
}

.nav-link[aria-current="page"] {
    color: var(--c-primary);
    /* Faol havola YUZAGA ega: gradient + chegara. Ilgari faqat
       gradient bor edi va u oq fonda kuchsiz ko'rinardi. */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--c-primary) 20%, transparent),
        color-mix(in srgb, var(--c-primary) 7%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

.nav-link[aria-current="page"] svg { opacity: 1; }

/* Bildirishnoma sanog'i — havolaning o'ng chetiga suriladi. */
.nishon { margin-inline-start: auto; flex: none; }

/* ══════════════════ 21f. FOYDALANUVCHI KARTASI ══════════════════
 *
 * ═══ NIMA UCHUN QO'SHILDI ═══
 * Egasi: «foydalanuvchi uchun juda noqulay». Panelda mijoz
 * KIM ekani va balansi menyuda KO'RINMASDI — balans faqat yuqori
 * qatorda, foydalanuvchi nomi esa faqat «Hisobim» kartasida
 * (bosh sahifada).
 *
 * Endi menyuning pastida doimiy karta: bosh harf nishoni, nom va
 * balans. U HAR sahifada ko'rinadi.
 *
 * ═══ NIMA UCHUN BOSH HARF, AVATAR EMAS ═══
 * Avatar yuklash imkoniyati yo'q (profil sahifasida bunday maydon
 * yo'q). Bosh harf esa har doim bor va u tema rangida chiziladi —
 * ya'ni bo'sh joy qolmaydi. */
.side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--s-3) 6px 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--border));
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    text-decoration: none;
    color: inherit;
}

.side-user-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--site-grad-text);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.side-user-main { min-width: 0; flex: 1; }

.side-user-nom {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-user-balans {
    display: block;
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {
    .side-user { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }

    .side-user:hover {
        border-color: color-mix(in srgb, var(--c-primary) 42%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
        box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--c-primary) 60%, transparent);
    }
}

/* ══════════════════ 21g. YUQORI QATOR ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN YOPISHQOQ ═══
 * Panel sahifalari uzun (buyurtmalar jadvali 50 qator). Balans va
 * til almashtirgich yuqorida qolib, mijoz ularga qaytish uchun
 * sahifa boshiga aylantirishga majbur bo'lardi.
 *
 * ═══ NIMA UCHUN `backdrop-filter` ═══
 * Qat'iy fon bilan yopishqoq qator mazmunni "kesib" ko'rsatardi.
 * Yarim shaffof + blur esa mazmunni ostidan sezdiradi.
 *
 * ZAXIRA: `backdrop-filter` ishlamasa fon 92% shaffofmas bo'lib
 * qoladi, ya'ni matn baribir O'QILADI. */
.topbar {
    position: sticky;
    top: 0;
    /* ═══ 🔴 NIMA UCHUN 55, ILGARI 20 EDI ═══
       Bu ham STACKING KONTEKST, ya'ni ichidagi til/valyuta menyusi
       (`.lang-pick-menu`, `z-index: 40`) ildizda qatorning
       darajasida chiziladi. 20 bo'lganda menyu `.tabbar` (40),
       `.yon-parda` (58), `.side` (60) va reklamadan PAST edi —
       ya'ni telefonda ochilgan til ro'yxati pastki navigatsiya
       ortida qolardi.

       Teskari nuqson ham bor edi: ochiq tanlagichli karta 30-darajada
       bo'lgani uchun (20 dan yuqori) sahifa aylantirilganda u
       yopishqoq qator USTIDAN o'tib ketardi.

       55 ikkovini ham hal qiladi: qator ochiq tanlagich (50) va
       reklamadan (45) yuqori, menyu qatlamlaridan past. Panellar
       PASTGA ochilgani uchun (`top: calc(100% + 6px)`) qator ularni
       kesib qo'ymaydi. To'liq narvon fayl boshidagi jadvalda. */
    z-index: 55;
    /* ═══ 🔴 NIMA UCHUN MANFIY CHEGARA ANIQ 18px ═══
       `.main` ning `padding` i 18px. Yopishqoq qator o'sha
       bo'shliqni QOPLAMASA, aylantirilganda mazmun qatorning yon
       tomonlaridan ko'rinib o'tadi — qator "suzib turgan quti"
       kabi ko'rinadi.

       `var(--s-3)` (16px) ishlatish MUMKIN EMAS: u temada
       o'zgaradi (`slate` da boshqa qiymat) va `.main` ning
       padding'i esa o'zgarmaydi — natijada 2px oq chiziq qolardi.

       Mobil qiymat (12px) narvonning 900px pog'onasida. */
    margin-inline: -18px;
    padding-inline: 18px;
    padding-top: var(--s-2);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 12%, var(--border));
}

.topbar h1 {
    /* Sarlavha oldida brend chizig'i — karta sarlavhalari bilan
       bir xil signal (`.card h2::before`). */
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar h1::before {
    content: '';
    flex: none;
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: var(--site-grad-text);
}

/* ══════════════════ 21h. TO'Q REJIM ══════════════════
 *
 * To'q rejimda tinta boshqacha ishlaydi: `--panel` allaqachon to'q,
 * shu sababli menyu YORQINROQ bo'lishi kerak (aks holda ikkisi
 * qorayib bir-biriga qo'shilib ketadi). */
html[data-mode="dark"] .side {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--c-primary) 16%, var(--panel)),
            color-mix(in srgb, var(--c-primary) 8%, var(--panel)) 55%,
            color-mix(in srgb, var(--c-primary) 11%, var(--panel)));
    border-inline-end-color: color-mix(in srgb, var(--c-primary) 26%, var(--border));
}

@media (prefers-color-scheme: dark) {
    html[data-mode="system"] .side {
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--c-primary) 16%, var(--panel)),
                color-mix(in srgb, var(--c-primary) 8%, var(--panel)) 55%,
                color-mix(in srgb, var(--c-primary) 11%, var(--panel)));
        border-inline-end-color: color-mix(in srgb, var(--c-primary) 26%, var(--border));
    }
}

/* ══════════════════════════════════════════════════════════════════
 * 22. PANEL FORMALARI: IKKI USTUN + XULOSA
 *
 * ═══ EGASINING SHIKOYATI (ikki ekran rasmi bilan) ═══
 * «buyurtma berish sahifasini tekshirib ko'rdim, ko'rganingizdek
 *  bizniki oddiy html struckturaga o'xshaydi ularniki esa
 *  mukammalroq ... muammo temalarda emas tashqi ko'rinishda
 *  tugmalar so'zlarni joylashishlari va qo'shimcha dizayn yo'qligida»
 *
 * ═══ SOLISHTIRISH: NIMA YETISHMAYDI ═══
 * Raqobatchi sahifasida bor, bizda YO'Q edi:
 *   1. xizmat izlash maydoni
 *   2. xizmat tavsifi paneli (kafolat, yetkazish, tafsilot)
 *   3. miqdor ostida min/max ko'rsatmasi
 *   4. o'rtacha yetkazish vaqti
 *   5. hisoblangan summa ALOHIDA va aniq
 *
 * Ma'lumot bazada BOR edi (`avg_time_seconds`, `refill_days`,
 * `min_quantity`, `max_quantity`, `description`) — u shunchaki
 * KO'RSATILMAGAN.
 *
 * ═══ 🔴 ENG KATTA JOYLASHUV XATOSI: KENGLIK ═══
 * Bizning forma `.card` ichida TO'LIQ kenglikda edi (~1000px).
 * Raqobatchida esa ~590px.
 *
 * Nima uchun bu muhim: `<input>` 1000px kenglikda bo'lsa, mijoz
 * yozgan matn maydonning chap uchdan biriga sig'adi va qolgani
 * BO'SH qoladi. Ko'z uchun bu "tugallanmagan" forma. Bundan
 * tashqari yorliq (chapda) va qiymat (o'rtada) orasidagi masofa
 * o'sadi va bog'lanish yo'qoladi.
 *
 * ═══ YECHIM: IKKI USTUN ═══
 *   chap  — forma (maksimal 620px)
 *   o'ng  — yopishqoq xulosa: xizmat ma'lumoti + summa
 *
 * Xulosa YOPISHQOQ: mijoz miqdorni yozayotganda summa ko'z
 * oldida turadi va pastga aylantirishga majbur bo'lmaydi.
 *
 * Mobil ekranda ikkisi birlashadi va xulosa formadan KEYIN
 * tushadi (`order` bilan) — telefonda avval to'ldirish, keyin
 * tekshirish tabiiyroq.
 * ══════════════════════════════════════════════════════════════════ */

.panel-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s-4);
    align-items: start;
}

.panel-form-main { min-width: 0; }

/* ═══ 🔴 NIMA UCHUN BU QOIDA KERAK ═══
   `.panel-form` ning O'ZI `<form>` elementi: tugma xulosa
   kartasida (o'ng ustunda) turadi va u `<form>` ichida bo'lishi
   SHART, aks holda `type="submit"` ishlamaydi (`form="..."`
   atributi bilan bog'lash mumkin edi, lekin u bir necha eski
   brauzerda e'tiborsiz qoldiriladi).

   Natijada `@csrf` chiqargan `<input type="hidden">` grid ning
   BEVOSITA farzandi bo'ladi. Brauzer standarti bo'yicha u
   `display: none` — ya'ni katak yaratmaydi. Lekin tema yoki
   kelajakdagi qoida `input` ga `display` bersa, u BIRINCHI
   katakni egallab formani o'ngga surib yuborardi.

   Bu xato juda ayyor: hech qanday xato xabari yo'q, shunchaki
   joylashuv «sababsiz» buziladi. Shu sababli qoida aniq
   yoziladi. */
input[type="hidden"] { display: none; }

.panel-form-aside {
    position: sticky;
    /* ═══ 🔴 NIMA UCHUN TOKENDAN HISOBLANADI ═══
       Bu qiymat yopishqoq yuqori qator balandligidan KELIB CHIQADI.
       Ilgari u `78px` deb qo'lda yozilgan va qator balandligi
       o'zgarganda YOLG'ON bo'lib qolgan edi — sabab va o'lchov
       `--topbar-h` tokeni izohida.

       12px — qator ostidagi ko'rinadigan bo'shliq: nolga teng
       bo'lsa karta chegarasi qator chegarasiga yopishib, ikkisi
       bitta chiziqqa qo'shilib ketardi. */
    top: calc(var(--topbar-h) + 12px);
    display: grid;
    gap: var(--s-3);
    min-width: 0;
}

/* ══════════════════ 22a. IZLASH MAYDONI ══════════════════
 *
 * ═══ NIMA UCHUN KERAK ═══
 * Katalogda 678 xizmat bor (kontroller izohida o'lchangan).
 * Kategoriya tanlash ro'yxatni qisqartiradi, lekin mijoz xizmat
 * NOMINI bilsa (masalan «Telegram Premium») uni to'g'ridan-to'g'ri
 * yozishi tezroq.
 *
 * ═══ NIMA UCHUN IKONKA `background`, `<svg>` EMAS ═══
 * `<svg>` qo'shilsa maydonni `position: relative` o'ramga olish
 * kerak bo'lardi va `<label>` bilan bog'lanish buzilardi.
 * `background-image` esa hech narsani o'zgartirmaydi. */
.field-search input {
    padding-inline-start: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 16px 16px;
}

[dir="rtl"] .field-search input {
    padding-inline-start: 11px;
    padding-inline-end: 36px;
    background-position: right 11px center;
}

/* ══════════════════ 22b. XIZMAT MA'LUMOTI KARTASI ══════════════════ */

.svc-card {
    padding: var(--s-3);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--border));
    background:
        radial-gradient(closest-side at 100% 0%,
            color-mix(in srgb, var(--c-primary) 10%, transparent), transparent),
        var(--panel);
    box-shadow: var(--lift-1);
}

.svc-card-bosh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 60%, var(--c-primary));
}

.svc-card-bosh::before {
    content: '';
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 55%, transparent);
    flex: none;
}

.svc-nom {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    /* Xizmat nomlari provayderdan keladi va uzun bo'ladi. */
    overflow-wrap: break-word;
}

.svc-kategoriya { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }

/* ── Nishonlar qatori (kafolat, drip-feed, bekor qilish) ──────────
 *
 * ═══ NIMA UCHUN NISHON, MATN EMAS ═══
 * «Kafolat: bor, Bekor qilish: bor, Drip-feed: yo'q» uch qator
 * matn bo'lardi. Nishonlar esa BIR qatorga sig'adi va ko'z ularni
 * skanerlaydi.
 *
 * Yo'q imkoniyat KO'RSATILMAYDI (nishon chizilmaydi) — «yo'q»
 * yozish sahifani salbiy ma'lumot bilan to'ldiradi. */
.svc-nishonlar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }

.svc-nishon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--c-success) 32%, transparent);
    background: color-mix(in srgb, var(--c-success) 12%, transparent);
    color: color-mix(in srgb, var(--c-success) 78%, var(--text));
}

.svc-nishon-info {
    border-color: color-mix(in srgb, var(--c-primary) 32%, transparent);
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    color: color-mix(in srgb, var(--c-primary) 82%, var(--text));
}

/* ── Ko'rsatkichlar jadvali (narx, chegara, vaqt) ─────────────── */

/* `<dl>` ishlatiladi (ta'rif ro'yxati) — ekran o'quvchi «Narx: 5000
   so'm» juftligini AYTADI. `<div>` + `<span>` bo'lsa u ikki alohida
   matn o'qirdi. Brauzer standarti `margin-block: 1em` bekor
   qilinadi, aks holda karta ichida ortiqcha bo'shliq qolardi. */
.svc-qatorlar { display: grid; gap: 7px; margin: 0; }

.svc-qator {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: 13px;
}

.svc-qator dt { color: var(--muted); flex: none; }

.svc-qator dd {
    margin: 0;
    font-weight: 700;
    text-align: end;
    min-width: 0;
    overflow-wrap: break-word;
}

/* ── Tavsif ────────────────────────────────────────────────────────
 *
 * ═══ 🔴 NIMA UCHUN `white-space: pre-line` ═══
 * Tavsif provayderdan keladi va u QATOR AJRATGICHLAR bilan
 * yozilgan (raqobatchi rasmida ham bulletlar alohida qatorda).
 * HTML da `\n` e'tiborsiz qoldiriladi — hammasi BITTA uzun
 * paragrafga aylanardi.
 *
 * `pre-line` qator ajratgichni saqlaydi, lekin ortiqcha
 * bo'shliqlarni yig'adi — ya'ni provayder xato formatlagan matn
 * ham to'g'ri chiqadi.
 *
 * ═══ NIMA UCHUN `max-height` + aylantirish ═══
 * Ba'zi tavsif 2000 belgi (kontrollerda kesilgan). Cheklovsiz u
 * summa kartasini ekrandan pastga surib yuborardi. */
.svc-tavsif {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--muted);
    white-space: pre-line;
    overflow-wrap: break-word;
    max-height: 260px;
    overflow-y: auto;
}

/* ══════════════════ 22c. SUMMA KARTASI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN ALOHIDA KARTA ═══
 * Ilgari summa shunday edi:
 *
 *   <div class="card" style="background:transparent;box-shadow:none">
 *       <span class="muted">To'lanadigan summa</span>
 *       <strong>—</strong>
 *   </div>
 *
 * Ya'ni shaffof, soyasiz, chegarasiz — amalda shunchaki matn
 * qatori. Sahifadagi ENG MUHIM son e'tibor tortmasdi.
 *
 * Endi u to'q gradient kartada (CTA bloki bilan bir xil signal:
 * «bu yerda pul gapi ketadi»). */
.sum-card {
    padding: var(--s-3);
    border-radius: 14px;
    background: var(--site-grad-deep);
    color: #fff;
    box-shadow: var(--lift-2);
}

.sum-bosh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 72%, transparent);
}

.sum-qatorlar { display: grid; gap: 6px; margin-bottom: 12px; }

.sum-qator {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: 13px;
    color: color-mix(in srgb, #fff 78%, transparent);
}

.sum-qator b { color: #fff; font-weight: 700; }

.sum-jami {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, #fff 22%, transparent);
}

.sum-jami-yorliq { font-size: 12.5px; color: color-mix(in srgb, #fff 80%, transparent); }

.sum-jami-son {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    /* Uzun summa (masalan «12 345 678,90 so'm») sig'ishi kerak. */
    text-align: end;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Ogohlantirish (balans yetmadi / miqdor chegaradan tashqarida). */
.sum-ogoh {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: color-mix(in srgb, #000 24%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

/* Summa kartasidagi tugma — oq fon, gradient rangida matn.
   Aniqlik (0,3,0): tema `.btn:not():not()` ni (0,3,0) bilan
   yozadi va u poydevordan KEYIN keladi. `.sum-card .btn:not()`
   = (0,3,0) + element yo'q... shu sababli ikki `:not()` bilan
   (0,4,0) beriladi (sabab `.site-cta` izohida batafsil). */
.sum-card .btn:not(.btn-ghost):not(.btn-danger) {
    background: #fff;
    border-color: #fff;
    color: var(--c-primary);
    width: 100%;
    margin-top: 12px;
}

.sum-card .btn:not(.btn-ghost):not(.btn-danger):hover {
    background: color-mix(in srgb, #fff 88%, transparent);
}

/* ══════════════════ 22d. MAYDON GURUHI ══════════════════
 *
 * ═══ NIMA UCHUN GURUHLASH ═══
 * Ilgari forma sakkizta maydonning TEKIS ro'yxati edi: kategoriya,
 * xizmat, havola, miqdor, izohlar, drip-feed, promokod, summa.
 * Mijoz qaysi maydon qaysi bosqichga tegishli ekanini bilmasdi.
 *
 * Endi uch guruh: XIZMAT TANLASH → BUYURTMA MA'LUMOTI →
 * QO'SHIMCHA. Har guruhda sarlavha bor.
 *
 * `<fieldset>` ATAYLAB ishlatilmadi: brauzerlar unga o'z
 * `min-width: min-content` ini majburlaydi va u grid ichida
 * toshib ketadi (ma'lum, hujjatlashgan xato). `<div>` +
 * `role` kerak emas, chunki sarlavha oddiy matn. */
.form-guruh { margin-bottom: var(--s-4); }
.form-guruh:last-of-type { margin-bottom: 0; }

.form-guruh-bosh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--s-3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 60%, var(--c-primary));
}

.form-guruh-bosh::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--c-primary) 22%, transparent),
        transparent
    );
}

/* ══════════════════ 22e. YIG'ILADIGAN BLOK ══════════════════
 *
 * Drip-feed va promokod ATAYLAB yopiq turadi: ular ixtiyoriy va
 * aksariyat buyurtmada ishlatilmaydi. Ochiq bo'lsa forma
 * uzunlashib, asosiy yo'l (xizmat → havola → miqdor) ko'rinmay
 * qolardi. */
.form-yigma {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-primary) 3%, var(--panel));
    margin-bottom: var(--s-3);
}

.form-yigma > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px var(--s-3);
    font-size: 13.5px;
    font-weight: 600;
}

.form-yigma > summary::-webkit-details-marker { display: none; }

.form-yigma > summary::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: -45deg;
    translate: 0 -1px;
    color: var(--c-primary);
    transition: rotate .22s ease;
}

.form-yigma[open] > summary::before { rotate: 45deg; translate: 0 -3px; }

.form-yigma-ich { padding: 0 var(--s-3) var(--s-3); }

@media (hover: hover) {
    .form-yigma { transition: border-color .2s ease, background .2s ease; }

    .form-yigma:hover {
        border-color: color-mix(in srgb, var(--c-primary) 28%, var(--border));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .form-yigma[open] .form-yigma-ich {
        animation: siteFaqOpen .26s ease both;
    }
}

/* ══════════════════ 22f. KO'RSATMA MATNI ══════════════════
 *
 * `.hint` faqat `color` va `font-size` bergan. Endi u oldida
 * kichik belgi bilan — ko'z uni yorliqdan ajratadi. */
.field .hint {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.5;
}

.field .hint::before {
    content: 'i';
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 16%, transparent);
    color: var(--c-primary);
    font-size: 9px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
}

/* ══════════════════ 22g. `hidden` ATRIBUTI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN BU QOIDA MAJBURIY ═══
 * Buyurtma sahifasi JS bilan o'nlab elementni yashiradi va ochadi:
 * turga xos maydonlar, drip-feed bloki, xizmat kartasi qatorlari,
 * ogohlantirish. Ilgari bu `style.display` bilan qilinardi:
 *
 *   el.style.display = 'none';   // yashirish
 *   el.style.display = '';       // ochish
 *
 * Bu ikki sababdan yomon:
 *   1. `style.display = ''` elementning ASL `display` ini
 *      tiklamaydi — u shunchaki inline uslubni o'chiradi. Agar
 *      element grid yoki flex bo'lsa hammasi ishlaydi, lekin
 *      inline uslub CSP `style-src` siyosati bilan urishadi.
 *   2. Ekran o'quvchi uchun `display: none` va `hidden` bir xil,
 *      LEKIN `hidden` HTML DA ko'rinadi — ya'ni sahifa manbasini
 *      o'qigan odam ham holatni tushunadi.
 *
 * Endi JS `el.hidden = true/false` ishlatadi. Muammo shu:
 *
 *   ═══ `hidden` NI HAR QANDAY `display` BOSIB O'TADI ═══
 *   `hidden` brauzer uslublar jadvalida `display: none` deb
 *   yozilgan. Bizning `.svc-qator { display: flex }` esa MUALLIF
 *   qoidasi — u brauzer qoidasidan HAR DOIM kuchli.
 *
 *   Natija: `<div class="svc-qator" hidden>` KO'RINIB turardi.
 *
 * Yechim standart: `!important` bilan majburlash. Bu aynan shu
 * holat uchun to'g'ri ishlatilish — `hidden` "bu element YO'Q"
 * degan MA'NO tashiydi va uni hech qanday tashqi ko'rinish
 * qoidasi bekor qilmasligi kerak.
 *
 * `[hidden]` bilan bir qatorda `[hidden="until-found"]` ISTISNO
 * qilinadi: u brauzerga «yashir, lekin Ctrl+F topsa ochib
 * ko'rsat» deydi va `content-visibility: hidden` bilan ishlaydi.
 * `display: none !important` uni buzardi. Bizda hozir
 * ishlatilmaydi, lekin qoida kelajakka tayyor bo'lishi kerak. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* ══════════════════ 22h. BOSH HARFGA MAJBURLASH ══════════════════
 *
 * Promokod maydoni. Ilgari `style="text-transform:uppercase"` inline
 * yozilgan edi — CSP `style-src 'unsafe-inline'` talab qilardi.
 *
 * ═══ NIMA UCHUN FAQAT KO'RINISH ═══
 * `text-transform` YUBORILADIGAN qiymatni O'ZGARTIRMAYDI: mijoz
 * `abc123` yozsa, serverga `abc123` boradi. Kupon kodi esa
 * `CouponRedeemer::find()` da `mb_strtoupper(trim())` bilan
 * normallashtiriladi —
 * ya'ni ikki tomon mos. Agar u yerda normallashtirish bo'lmasa,
 * mijoz KO'RGAN `ABC123` bilan kod topilmasdi. */
.input-upper { text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════════
 * 23. PANEL SAHIFALARI: INLINE USLUBLARNI SINFGA KO'CHIRISH
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «boshqa sahifalarimiz ham oddiy ko'rinishda ularni chiroyliroq
 *  qiling, juda oddiyku axir ... muammo temalarda emas tashqi
 *  ko'rinishda tugmalar so'zlarni joylashishlari va qo'shimcha
 *  dizayn yo'qligida»
 *
 * ═══ 🔴 ASL SABAB: 149 STATIK INLINE USLUB ═══
 * Panel ko'rinishlarida `style="..."` 149 marta yozilgan
 * (o'lchangan). Ularning ENG KO'P uchraydiganlari:
 *
 *   25 × margin:0                      3 × margin-bottom:14px
 *   11 × text-align:end                3 × margin:0;flex:1;min-width:200px
 *    8 × margin-top:12px               3 × display:flex;gap:8px;align-items:center
 *    7 × margin-top:8px                2 × margin-top:-6px
 *    7 × margin-top:0                  2 × text-align:end;font-weight:700
 *    4 × color:var(--c-success)        2 × overflow-x:auto;padding:10px;...
 *
 * Nima uchun bu TASHQI KO'RINISH muammosi:
 *
 *   1. QAT'IY SONLAR TEMAGA ERGASHMAYDI. `margin-top:12px` har
 *      temada 12px qoladi. Tema zichlikni o'zgartirsa (`--s-*`
 *      tokenlari) bu joylar O'ZGARMASDI — natijada bir sahifada
 *      bo'shliqlar bir-biriga mos kelmasdi. Egasi buni «temalar
 *      faqat ranglarni almashtiradi» deb ko'rgan.
 *
 *   2. RITM YO'Q. 4, 6, 8, 10, 12, 14, 16, 18, 24 — to'qqiz xil
 *      bo'shliq. Ko'z buni tartibsizlik deb qabul qiladi. Dizaynda
 *      «tasodifiy bo'shliq» eng ko'p uchraydigan xato.
 *
 *   3. TAKRORLANISH XATO KELTIRADI. Bir sahifada `margin:0`, ikkinchi
 *      sahifada `margin: 0` (bo'shliq bilan) — ular boshqacha
 *      ko'rinmaydi, lekin izlash va tuzatish imkonsiz bo'ladi.
 *
 *   4. CSP. Inline uslub `style-src 'unsafe-inline'` talab qiladi.
 *      U esa XSS himoyasini SEZILARLI zaiflashtiradi.
 *
 * ═══ QOLGAN INLINE USLUBLAR ═══
 * Faqat qiymat MA'LUMOTDAN kelganlar qoladi — masalan
 * `style="width:{{ $order->progressPercent() }}%"`. Ularni sinf
 * bilan ifodalash imkonsiz (100 xil foiz uchun 100 sinf kerak
 * bo'lardi).
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 23a. VERTIKAL BO'SHLIQ ══════════════════
 *
 * ═══ NIMA UCHUN TOKENGA BOG'LANADI ═══
 * `margin-top: 12px` o'rniga `var(--s-3)` (16px). Farq 4px — ko'z
 * uni sezmaydi, LEKIN endi tema zichlikni o'zgartirsa bu joylar
 * ham ergashadi.
 *
 * Narvon ATAYLAB qisqa: besh pog'ona. Ko'proq bo'lsa yana
 * «to'qqiz xil bo'shliq» holatiga qaytardik. */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }

/* ═══ NIMA UCHUN `!important` ═══
   Sabab 16-bo'limdagi `.m-0` bilan AYNI: yordamchi sinf komponent
   qoidasini (`.field { margin-bottom: 14px }`, `p { margin: ... }`)
   bosib o'tishi KERAK, aks holda u ishlamaydi. Bu Tailwind va
   Bootstrap ham qo'llaydigan standart amaliyot.

   Muhim chegara: `!important` FAQAT yordamchi sinflarda.
   Komponent qoidalarida (`.card`, `.svc-card`) hech qachon —
   u yerda tema bosib o'tishi kerak. */

/* ══════════════════ 23b. MATN ══════════════════ */

/* ═══ NIMA UCHUN `end`, `right` EMAS ═══
   Arab tilida (`dir="rtl"`) `right` MANTIQIY boshlanish tomoni
   bo'ladi — ya'ni son chap tomonga tekislanardi. `end` esa
   yozuv yo'nalishiga ergashadi. */
.text-end { text-align: end; }
.text-center { text-align: center; }

.fw-bold { font-weight: 700; }
.fw-normal { font-weight: 400; }

/* Kichik matn — jadval ostidagi izoh, kalit qismlari. */
.fs-sm { font-size: 12.5px; }

/* Holat ranglari: pul kirimi va chiqimi. */
.text-ok { color: var(--c-success); }
.text-danger { color: var(--c-danger); }

/* ═══ NIMA UCHUN `pre-line` KERAK ═══
   Admin kiritgan ko'rsatma matni QATOR AJRATGICHLAR bilan
   yozilgan («1. Kartaga o'tkazing\n2. Chekni yuklang»). HTML da
   `\n` e'tiborsiz qoldiriladi va hammasi BITTA uzun paragrafga
   aylanardi — mijoz qadamlarni ajratmasdi.

   `pre-line` qator ajratgichni saqlaydi, lekin ortiqcha
   bo'shliqlarni yig'adi. Ya'ni admin xato formatlagan matn ham
   to'g'ri chiqadi. */
.pre-line { white-space: pre-line; }

/* ══════════════════ 23c. SARLAVHA OSTIDAGI IZOH ══════════════════
 *
 * `.card h2` ning 16px pastki bo'shlig'i SARLAVHA bilan MAZMUN
 * uchun o'lchangan. Tushuntirish qatori esa sarlavhaga TEGISHLI —
 * u yaqinroq turishi kerak (yaqinlik qonuni: birga turgan narsalar
 * bog'liq ko'rinadi).
 *
 * Ilgari bu `style="margin-top:-6px"` bilan qilinardi. Endi
 * manfiy bo'shliq bir joyda va nima uchun ekani yozilgan. */
.card-lead {
    margin: 0 0 var(--s-3);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.card h2 + .card-lead { margin-top: -8px; }

/* ══════════════════ 23d. QATORLAR ══════════════════
 *
 * Uch xil yonma-yon joylashuv panel bo'ylab TAKRORLANADI. Har
 * biri boshqa masalani hal qiladi:
 *
 *   .row-tight    — nishonlar, kichik tugmalar (markazga tekis)
 *   .row-end      — forma + tugma (tugma maydon PASTIGA tekis)
 *   .row-between  — sarlavha va o'ngdagi harakat (ikki chetga)
 *
 * Hammasida `flex-wrap: wrap` — telefonda elementlar pastga
 * tushadi va gorizontal aylantirish PAYDO BO'LMAYDI. */
.row-tight {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* ═══ NIMA UCHUN `flex-end`, `center` EMAS ═══
   Inline formada `<input>` va tugma yonma-yon turadi. Maydon
   ustida `<label>` bor, ya'ni u tugmadan BALAND. `center` bo'lsa
   tugma maydonning O'RTASIGA tekislanardi va «suzib turgandek»
   ko'rinardi. `flex-end` esa tugmani maydon ostiga tekislaydi. */
.row-end {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* Sarlavha qatori: o'ngdagi element yuqoriga tekislanadi (chapdagi
   sarlavha ikki qatorga bo'linsa ham). */
.row-between-top { align-items: flex-start; }

/* ═══ INLINE FORMADAGI O'SADIGAN MAYDON ═══
   `flex: 1` maydonni bo'sh joyni egallashga majburlaydi, `min-width`
   esa telefonda uni tugma bilan bir qatorda QOLDIRMAYDI — 200px
   dan tor bo'lsa yangi qatorga tushadi.

   `margin: 0` kerak: `.field` ning 14px pastki bo'shlig'i qatorda
   tugmani pastga surib yuborardi. */
.field-grow {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

/* ══════════════════ 23e. ICHKI ELEMENT ══════════════════
 *
 * Karta ICHIDAGI ro'yxat elementi: tugallanmagan to'lov, xabar,
 * webhook urinishi. Ilgari har biri o'z inline chegarasi bilan
 * yozilgan edi (`border:1px solid var(--border);border-radius:8px;
 * padding:12px;margin-bottom:10px`).
 *
 * ═══ NIMA UCHUN JUDA YENGIL FON ═══
 * Karta ichida IKKINCHI oq quti ko'rinmaydi — chegara bo'lsa ham
 * ko'z uni "sathda" deb qabul qiladi. 2% brend rangi elementni
 * kartadan bir pog'ona ichkariga tushiradi. */
.sub-item {
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: var(--s-2);
    background: color-mix(in srgb, var(--c-primary) 2%, var(--panel));
}

.sub-item:last-child { margin-bottom: 0; }

/* Element sarlavhasi: chapda kod va holat, o'ngda summa. */
.sub-item-bosh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

/* Element ichidagi asosiy son (to'lov summasi). */
.sub-item-son {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ═══ `.sub-item` LARDAN TUZILGAN RO'YXAT ═══
 *
 * Qurilmalar sahifasida elementlar `<ul>` ichida turadi va bu
 * ATAYLAB: ekran o'quvchi «5 elementdan 1-si» deb aytishi kerak,
 * `<div>` bo'lsa u sanoqni bilmasdi.
 *
 * Brauzerning standart markeri va chap bo'shligi olib tashlanadi.
 * Elementlar orasidagi masofani `.sub-item` o'zi beradi
 * (`margin-bottom`), shu sababli bu yerda `gap` YOZILMAYDI —
 * ikkisi qo'shilib ikki barobar bo'shliq chiqardi. */
.sessiya-royxat {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (hover: hover) {
    .sub-item { transition: border-color .2s ease, background .2s ease; }

    .sub-item:hover {
        border-color: color-mix(in srgb, var(--c-primary) 26%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 4%, var(--panel));
    }
}

/* ══════════════════ 23f. KOD VA REKVIZIT BLOKI ══════════════════
 *
 * API kaliti, webhook tanasi, karta raqami. Ilgari inline:
 * `overflow-x:auto;padding:10px;border-radius:8px;
 *  background:var(--input-bg);border:1px solid var(--border)`.
 *
 * ═══ NIMA UCHUN SATR SINDIRILMAYDI ═══
 * Kalit yoki JSON `word-wrap` bilan bo'linsa, nusxa olishda
 * qator ajratgich QO'SHILADI (brauzerga qarab). Mijoz uni
 * so'rovga qo'yib "kalit yaroqsiz" xatosini olardi.
 *
 * Shu sababli gorizontal aylantirish — u xunuk, lekin TO'G'RI. */
.code-box {
    overflow-x: auto;
    padding: var(--s-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ══════════════════ 23g. JADVAL KATAGI ══════════════════
 *
 * Uzun kalit yoki manzil. `.cell-clip` (16-bo'lim) uni «...» bilan
 * KESADI — bu qisqa ro'yxat uchun to'g'ri. Lekin kalit YOZILISHI
 * kerak bo'lsa kesish yaramaydi: mijoz uni nusxa olishi kerak.
 *
 * `break-all` — kalit ichida bo'shliq YO'Q, ya'ni `break-word`
 * hech narsa qilmasdi (u faqat SO'ZLAR orasida bo'ladi). */
.cell-break {
    max-width: 280px;
    word-break: break-all;
}

/* ══════════════════ 23h. TUGMA QATORI ══════════════════
 *
 * Karta pastidagi bir necha tugma. Ilgari
 * `style="margin-top:10px;display:flex;flex-wrap:wrap;gap:8px"`.
 *
 * ═══ NIMA UCHUN `wrap` MAJBURIY ═══
 * Uch tugma («Tahrirlash», «O'chirish», «Sinov yuborish») 360px
 * ekranga sig'maydi. `wrap` bo'lmasa ular qisilib matn ichida
 * kesilardi — «Sinov yubo…». */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

/* ══════════════════ 23i. TA'RIF RO'YXATI ══════════════════
 *
 * «Yorliq — qiymat» juftlari (profil, buyurtma tafsiloti). Ilgari
 * har biri `display:flex;justify-content:space-between` bilan
 * qo'lda yozilardi.
 *
 * ═══ NIMA UCHUN `<dl>` ═══
 * Ekran o'quvchi «Balans: 12,40 $» juftligini BIR BUTUN o'qiydi.
 * `<div><span>Balans</span><span>12,40 $</span></div>` bo'lsa u
 * ikki alohida matn — bog'lanish yo'qoladi. */
.pair-list { display: grid; gap: var(--s-1); margin: 0; }

.pair {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.pair:last-child { border-bottom: 0; }

.pair dt { color: var(--muted); flex: none; font-size: 13px; }

.pair dd {
    margin: 0;
    font-weight: 600;
    text-align: end;
    min-width: 0;
    overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════
 * 24. PANEL KOMPONENTLARI: XABAR, RO'YXAT, MUVAFFAQIYAT KARTASI
 *
 * 23-bo'lim BO'SHLIQ va MATN uchun yordamchi sinflar bergan. Bu
 * bo'limda esa KOMPONENTLAR — ular bir necha e'londan iborat va
 * yordamchi sinflar bilan ifodalanmaydi.
 *
 * Har biri panelning aniq bir sahifasidagi «shunchaki htmlda yozib
 * qo'yilgandek» ko'rinishni tuzatadi.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 24a. MUVAFFAQIYAT KARTASI ══════════════════
 *
 * API kaliti yoki webhook siri YARATILGANDA ko'rsatiladigan karta.
 *
 * ═══ NIMA UCHUN ALOHIDA KO'RINISH ═══
 * Bu kartada BIR MARTA ko'rsatiladigan maxfiy qiymat bor. Mijoz uni
 * nusxa olmasa — abadiy yo'qoladi va yangi kalit yaratishga majbur
 * bo'ladi.
 *
 * Ilgari u oddiy `.card` edi, faqat `style="border-color:
 * var(--c-success)"` bilan. Yashil chegara YETARLI SIGNAL EMAS:
 * ko'z 1px chiziqni sezmaydi va mijoz kartani boshqa bo'lim deb
 * o'tib ketardi. */
.card-once {
    border-color: color-mix(in srgb, var(--c-success) 42%, var(--border));
    background:
        radial-gradient(closest-side at 0% 0%,
            color-mix(in srgb, var(--c-success) 9%, transparent), transparent),
        var(--panel);
}

/* Yashil sarlavha + yashil brend chizig'i.
   Aniqlik (0,3,1): tema `.card h2` ni (0,1,1) bilan yozadi, ya'ni
   bu qoida undan kuchli va tema rangni buzmaydi. */
.card.card-once > h2 { color: var(--c-success); }
.card.card-once > h2::before { background: var(--c-success); }

/* ══════════════════ 24b. NUSXA OLINADIGAN QIYMAT ══════════════════
 *
 * Kalit, sir, referal havolasi. `<input readonly>` + tugma.
 *
 * ═══ NIMA UCHUN `<input>`, `<code>` EMAS ═══
 * `<input>` da qiymat BIR BOSISHDA to'liq tanlanadi
 * (`data-belgila` → `select()`). `<code>` bo'lsa mijoz sichqoncha
 * bilan aniq belgilashi kerak va uzun kalitda oxirini o'tkazib
 * yuborardi. */
.copy-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* ═══ NIMA UCHUN `min-width: 240px` ═══
   Kalit 40+ belgi. Maydon undan tor bo'lsa mijoz qiymatning
   BOSHINI ko'radi va «to'g'ri kalitmi?» degan savol qoladi.
   240px dan tor ekranda maydon o'z qatoriga tushadi. */
.copy-row input {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ══════════════════ 24c. RO'YXAT QATORI ══════════════════
 *
 * Bildirishnomalar va shunga o'xshash ro'yxatlar. Ilgari:
 * `style="padding:12px 0;border-bottom:1px solid color-mix(...)"`.
 *
 * ═══ NIMA UCHUN FAQAT PASTKI CHEGARA ═══
 * To'liq quti (`border` + `border-radius`) har element uchun
 * chizilsa, 20 ta bildirishnoma 20 ta quti bo'lardi va sahifa
 * «panjara» ko'rinishini olardi. Ingichka ajratgich esa oqimni
 * saqlaydi. */
.list-row {
    padding: var(--s-2) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row:first-child { padding-top: 0; }

/* O'qilmagan element — chapda rangli chiziq.
   `padding-inline-start` bilan birga: chiziq matnga TEGMASLIGI
   kerak, aks holda o'qish qiyinlashadi. */
.list-row-new {
    padding-inline-start: var(--s-2);
    border-inline-start: 3px solid var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 4%, transparent);
    border-radius: 0 8px 8px 0;
}

[dir="rtl"] .list-row-new { border-radius: 8px 0 0 8px; }

/* Qator ichidagi asosiy blok — o'ngdagi harakat uchun joy qoldiradi. */
.list-row-main { flex: 1 1 60%; min-width: 0; }

/* ══════════════════ 24d. TIKET XABARI ══════════════════
 *
 * ═══ EGASINING SHIKOYATI SHU YERDA HAM ═══
 * Ilgari har xabar shunday edi:
 *
 *   <div style="margin-bottom:14px;padding:12px 14px;border-radius:10px;
 *               background:...;border:...">
 *
 * Ya'ni mijoz xabari bilan xodim javobi ko'rinishida FARQ YO'Q edi
 * (faqat fon rangida ozgina). Suhbatni o'qiyotgan odam «kim
 * yozdi?» ni har safar sarlavhadan tekshirishi kerak edi.
 *
 * ═══ YECHIM: ASIMMETRIYA ═══
 * Mijoz xabari — brend rangida, o'ng tomonga siljigan.
 * Xodim javobi — neytral, chap tomonda.
 *
 * Bu messenjer naqshi va u O'RGATISHNI TALAB QILMAYDI: hamma
 * telefonida shunday ko'rgan. */
.msg {
    margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    max-width: 88%;
}

.msg:last-child { margin-bottom: 0; }

.msg-bosh {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
    font-size: 12.5px;
}

.msg-tana { font-size: 13.5px; line-height: 1.65; overflow-wrap: break-word; }

/* Mijoz xabari — o'ngga siljigan, brend rangida.
   `margin-inline-start: auto` uni o'ng chetga suradi; `max-width`
   esa chapda bo'sh joy qoldiradi — bu «boshqa tomon» signali. */
.msg-mine {
    margin-inline-start: auto;
    border-color: color-mix(in srgb, var(--c-primary) 30%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 7%, var(--panel));
}

/* Ichki (xodimlar orasidagi) izoh — sariq ogohlantirish.
   Bu MIJOZGA ko'rinmaydi, lekin admin panelida bir xil sinf
   ishlatilishi mumkin. */
.msg-internal {
    border-color: color-mix(in srgb, var(--c-warning) 40%, var(--border));
    background: color-mix(in srgb, var(--c-warning) 8%, var(--panel));
}

/* Sana ajratgichi — «Bugun», «12.03.2026». */
.msg-sana {
    margin: var(--s-2) 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* Xabarga ilova qilingan fayllar. */
.msg-fayllar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-2);
}

/* ══════════════════ 24e. OGOHLANTIRISH ICHIDAGI RO'YXAT ══════════════════
 *
 * `.alert` ichidagi `<ul>`. Brauzer standarti `margin: 1em 0` va
 * `padding-inline-start: 40px` — birinchisi ogohlantirish ichida
 * ortiqcha bo'shliq, ikkinchisi esa nuqtalarni matndan juda
 * uzoqqa suradi. */
.alert-list {
    margin: var(--s-1) 0 0;
    padding-inline-start: 20px;
    line-height: 1.65;
}

.alert-list:last-child { margin-bottom: 0; }

/* ══════════════════ 24f. CHEGARASIZ `fieldset` ══════════════════
 *
 * Webhook hodisalarini tanlash. `<fieldset>` SEMANTIK jihatdan
 * to'g'ri (bir necha checkbox bitta savolga tegishli va `<legend>`
 * ekran o'quvchida savol sifatida o'qiladi).
 *
 * ═══ 🔴 NIMA UCHUN `min-width: 0` MAJBURIY ═══
 * Brauzerlar `<fieldset>` ga `min-width: min-content` MAJBURLAYDI
 * (bu spetsifikatsiyada yozilgan, xato emas). Grid katakda bu
 * elementni katakdan CHIQARIB yuboradi — telefonda gorizontal
 * aylantirish paydo bo'ladi.
 *
 * `min-width: 0` uni bekor qiladi. Bu ma'lum va hujjatlashgan
 * yechim. */
.fieldset-plain {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* `<legend>` ni `<label>` ko'rinishiga keltiradi — forma bo'ylab
   bir xil maqom. */
.fieldset-plain > legend {
    padding: 0;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
}

/* ══════════════════ 24g. CHECKBOX YONIDAGI YORLIQ ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN KERAK ═══
 * `input, select, textarea { width: 100% }` (7-bo'lim) checkbox
 * ga ham tegadi — u BUTUN qator kengligida cho'ziladi va
 * «kvadrat» dan «to'rtburchak» ga aylanadi.
 *
 * Ilgari har joyda `style="width:auto;margin-inline-end:6px"`
 * yozilardi (o'lchangan: uch joyda).
 *
 * `.checkbox` sinfi (10-bo'limda) buni hal qiladi, LEKIN u
 * `display: flex` o'ram talab qiladi. Bu yerda esa `<input>`
 * `<label>` NING ICHIDA turadi — o'ram qo'shish HTML ni
 * murakkablashtirardi. */
.check-inline {
    width: auto;
    margin-inline-end: 6px;
    vertical-align: middle;
}

/* Checkbox yonidagi yorliq oddiy og'irlikda — u SAVOL emas,
   VARIANT. Qalin bo'lsa har variant sarlavha kabi ko'rinardi. */
/* ═══ 🔴 NIMA UCHUN `user-select: none` ═══
   ═══ EGASINING SHIKOYATI ═══
   «ptichka qo'yilgan holatdagi radiobox ustiga bossam
    radioboxdan galochka olinmoqda bu to'g'ri, ammo men qayta
    ptichka qoyaman deb ustiga bosganimda hech narsa
    qo'yilmayapti, qo'yishili uchun avval bir marta click
    qilishim va so'ng boshqa xoxlagan joyimga bir marta bosib
    qo'yishimga to'g'ri kelmoqda»

   ═══ SABAB ═══
   Yorliq ichida MATN bor. Ketma-ket ikki marta bosish brauzer
   uchun DOUBLE-CLICK va u matnni BELGILAB oladi. Belgilangan
   matn turgan holatda keyingi bosish yorliqni faollashtirmaydi
   — brauzer avval belgilashni BEKOR qiladi. Ya'ni bosish
   «yo'qoladi».

   Aynan shu sababli «boshqa joyga bosib» ishlaydi: tashqariga
   bosish belgilashni tozalaydi va undan keyingi bosish yorliqqa
   yetib boradi.

   Nuqson faqat TEZ bosganda chiqadi, shuning uchun u
   «ba'zilarida ishlaydi, ba'zilarida yo'q» bo'lib ko'rinadi.

   ═══ NIMA UCHUN MATNNI BELGILASHNI YO'QOTISH ZARAR EMAS ═══
   Yorliq matni — VARIANT nomi («Buyurtma bajarildi»). Uni
   nusxa olish kerak bo'ladigan holat yo'q. Nusxa olinadigan
   qiymatlar (API kaliti, buyurtma ID) `[data-belgila]` bilan
   alohida ishlanadi va ularga bu qoida TEGMAYDI. */
.check-label {
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* ═══ ALOHIDA QATORDAGI CHECKBOX ═══
   Bildirishnoma sozlamalari kabi TIK ro'yxatlar uchun. Har variant
   o'z qatorida va bosish sohasi butun qator kengligida —
   telefonda kichik kvadratni aniq bosish qiyin.

   `padding-block: 6px` bosish sohasini 44px ga yaqinlashtiradi
   (mobil qulaylik uchun tavsiya etilgan eng kichik o'lcham). */
.check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

/* Flex `gap` allaqachon bo'shliq beradi — `.check-inline` ning
   o'z chetini qo'shsa 14px chiqardi. */
.check-line .check-inline { margin-inline-end: 0; }

/* ══════════════════ 24g-2. BELGILASH KATAKCHASI ══════════════════
 *
 * ═══ 🔴 BU BO'LIM UCH MARTA QAYTA YOZILDI — TARIX MUHIM ═══
 * Egasi bir xil nuqsonni UCH marta xabar qildi va har safar
 * tuzatish YETARLI BO'LMADI. Uchinchi xabar:
 *
 *   «yana radioboxlar ustiga bosganimda ptichka yonmayapti, yonishi
 *    uchun yana istagan o'sha oynadagi joyga bosishimga to'g'ri
 *    kelmoqda ... iloji bo'lsa radiobox lar uchun qilgan qismlarni
 *    umuman o'zgartirib chiqing»
 *
 * ═══ AVVALGI URINISHLAR VA NIMA UCHUN YETMADI ═══
 *   1. `user-select: none` yorliqqa — ikki marta bosishda matn
 *      belgilanib qolishini to'xtatdi. Bu HAQIQIY nuqson edi, lekin
 *      ASOSIY sabab emas.
 *   2. `.grid > .check-line` chiqishini nolga tushirish — qo'shni
 *      ustunlar 6px ustma-ust tushishini to'xtatdi. Bu ham haqiqiy
 *      nuqson edi, lekin yana asosiy sabab emas.
 *   3. `transition` dan `background` ni olib tashlash — o'tish
 *      animatsiyasini yo'qotdi, nuqson QOLDI.
 *
 * ═══ 🔴 ASOSIY SABAB: BIZ KATAKCHANI O'ZIMIZ CHIZGANMIZ ═══
 * Uchovining ostida BITTA qaror yotardi: `appearance: none` +
 * chek belgisini `background-image` (data-URI SVG) bilan chizish.
 *
 * `:checked` holatida fon qatlamlari RO'YXATI o'zgaradi: bitta
 * rangdan «SVG + gradient» ga. Bu naqsh bilan Chromium'da
 * ma'lum va keng uchraydigan nuqson bor: belgi qatlami DARHOL
 * chizilmaydi va katakcha keyingi majburiy qayta chizishgacha
 * bo'sh ko'rinadi.
 *
 * Egasining tavsifi buni AYNAN tasdiqlaydi: «boshqa joyga
 * bosishimga to'g'ri kelmoqda» — ya'ni bosish YETIB BORGAN,
 * `:checked` yoqilgan, faqat EKRANDA yo'q. Boshqa joyga bosish
 * qayta chizishga majbur qiladi.
 *
 * Asimmetriya ham shundan: belgini OLIB TASHLASHDA qatlam
 * shunchaki o'chiriladi (chizish kerak emas — ishlaydi), QO'YISHDA
 * esa chizilishi kerak (chizilmaydi).
 *
 * ═══ 🔴 YECHIM: KATAKCHANI BRAUZER CHIZADI ═══
 * `appearance: none` OLIB TASHLANDI. Endi shaklni ham, chek
 * belgisini ham BRAUZERNING O'ZI chizadi, `accent-color` esa uni
 * brend rangiga bo'yaydi.
 *
 * Bu nuqsonni TUZATMAYDI — uni MUMKIN EMAS qiladi. Native
 * boshqaruvning holat o'zgarishida qayta chizilishi brauzerning
 * o'z yo'li: u har sahifada, har kuni, milliardlab marta
 * ishlatiladi va bizning fon qatlamlarimizga bog'liq emas.
 *
 * Yonaki foyda: `indeterminate` holati, yuqori kontrast rejimi,
 * majburlangan ranglar (forced-colors) va ekran o'quvchi
 * bog'lanishi o'zicha to'g'ri ishlaydi — ilgari ularning har biri
 * qo'lda qo'llab-quvvatlanishi kerak edi.
 *
 * ═══ 🔴 «JUDA ODDIY» BO'LIB QOLMASLIGI UCHUN NIMA QILINDI ═══
 * Egasining ENG BIRINCHI shikoyati «juda oddiy» edi va aynan
 * shu sababli o'z chizmamiz yasalgan. Uni tashlab, oddiylikka
 * qaytish yaramaydi. Shu sababli ko'rinish YONIGA ko'chirildi:
 *
 *   - `.check-line` QATORI endi haqiqiy tanlov yuzasi: chegara,
 *     yumaloq burchak, hover va TANLANGAN holat tinti.
 *   - Tanlanganlik ENDI IKKI joyda ko'rinadi — native belgi va
 *     qator tinti (`:has(:checked)`).
 *
 * Ikkinchisi shu nuqson uchun ATAYLAB qo'yildi: qator — oddiy
 * element, uning qayta chizilishi hech qachon muammo bo'lmagan.
 * Ya'ni brauzer belgini chizishda kechiksa ham, foydalanuvchi
 * tanlovi ko'rinadi. Bitta signalga tayanish bizni uch marta
 * shu yerga qaytardi.
 *
 * ═══ NIMA UCHUN `::before` BILAN CHIZILMADI ═══
 * `<input>` — o'rnini bosuvchi element va unda psevdo-element
 * BO'LISHI SHART EMAS. Chromium va WebKit qo'llaydi, Firefox esa
 * ishonchli emas. Ya'ni u nuqsonni bitta brauzerdan boshqasiga
 * KO'CHIRARDI, yo'q qilmasdi.
 * ══════════════════════════════════════════════════════════════════ */
/* ═══ 🔴 NIMA UCHUN SELEKTOR GLOBAL, O'RAM SINFIGA BOG'LI EMAS ═══
   Birinchi versiyada qoidalar `.check-line`, `.check-label` va
   `.checkbox` o'ramlariga bog'langan edi. Egasi darhol topdi:
   «radiobox yoki clickboxlar hali ham to'liq chiroyli holatga
   keltirilmabdi, oddiy isbot api bo'limi».

   Sabab: `panel/api.blade.php` da o'ram sinfi YO'Q —
   `<label><input class="check-inline"> ...</label>`. Ya'ni
   o'ramga tayanish har yangi joyni qo'lda qo'shishni talab qilardi
   va bittasi baribir esdan chiqardi.

   Endi qoida BARCHA katakchalarga tegadi. Ko'rinmasligi kerak
   bo'lganlar (yulduzcha bahosi, segment tanlagich) o'z
   yashirish qoidasini SHU BO'LIMDAN KEYIN beradi
   (`position: absolute; width: 1px`) va ular g'olib qoladi.

   ═══ 🔴 NIMA UCHUN `appearance` UMUMAN YOZILMAYDI ═══
   Hatto `appearance: auto` deb ATAYLAB yozish ham xato bo'lardi:
   u standart qiymat, ya'ni hech narsa qo'shmaydi, lekin keyingi
   dasturchiga «bu yerda appearance bilan ishlanmoqda» degan noto'g'ri
   signal berardi va uni yana `none` ga o'zgartirishga undardi.

   Yo'qligi ANIQ ma'no beradi: chizmaga TEGILMAYDI. */
input[type="checkbox"],
input[type="radio"] {
    /* Brauzerning o'z katakchasi brend rangida bo'yaladi. Belgi,
       yumaloq burchak va bosilgan holat — hammasi native. */
    accent-color: var(--c-primary);
    /* Standart 13px barmoq uchun kichik. 18px — matn qatori
       balandligiga yaqin va nishon yetarli. */
    width: 18px;
    height: 18px;
    /* Flex qatorda katakcha SIQILMASLIGI kerak: uzun yorliq matni
       uni ezib kvadratdan to'rtburchakka aylantirardi. */
    flex: none;
    margin: 0;
    cursor: pointer;
}

/* Fokus KO'RINADI — klaviatura bilan yuruvchi foydalanuvchi
   qaysi variantda turganini bilishi kerak.

   ═══ NIMA UCHUN `outline`, `box-shadow` EMAS ═══
   Native boshqaruvda `box-shadow` brauzerlarda bir xil
   chizilmaydi (ba'zilari uni umuman e'tiborsiz qoldiradi).
   `outline` esa element chizmasidan TASHQARIDA va u har joyda
   ishlaydi. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* ═══ QATOR — HAQIQIY TANLOV YUZASI ═══
   Yorliq butun qator kengligida, lekin ilgari u hech qanday
   ko'rinishga ega emas edi — mijoz faqat kichik kvadratni
   bosiladigan deb o'ylardi.

   ═══ 🔴 NIMA UCHUN QATOR ENDI TANLOVNI HAM KO'RSATADI ═══
   Bo'lim boshidagi izohda: katakcha belgisi UCH marta ko'rinmay
   qolgan. Endi tanlanganlik IKKI mustaqil signal bilan beriladi —
   native belgi va SHU qator tinti.

   Qator — oddiy blok element, ya'ni uning qayta chizilishi
   `<input>` chizmasiga umuman bog'liq emas. Brauzer belgini
   chizishda kechiksa ham, foydalanuvchi tanlovi KO'RINADI.

   ═══ NIMA UCHUN CHEGARA HAR DOIM BOR (shaffof) ═══
   Chegara faqat hover/tanlangan holatda qo'shilsa, qator o'sha
   paytda 2px kengayib qo'shnilarini surardi. Shaffof chegara
   joyni oldindan egallaydi va faqat RANGI o'zgaradi.

   Manfiy chet + ichki bo'shliq: fon qator BO'YLAB cho'ziladi,
   matn esa kartaning qolgan mazmuni bilan bir tekislikda qoladi.

   ═══ 🔴 9 va 10 NOMUVOFIQ EMAS — TUZATMANG ═══
   Qarashda 1px xato ko'rinadi, lekin CHEGARA ham hisobga olinadi:
     9px ichki bo'shliq + 1px chegara = 10px
   ya'ni matn qatorning chetidan aynan 10px da boshlanadi va manfiy
   10px chet uni kartaning mazmun chizig'iga QAYTARADI. Ikkisini
   tenglashtirish (10/-10) matnni 1px ichkariga surib, qatorni
   qo'shni matnlardan qiyshiq qilardi. */
.check-line {
    border: 1px solid transparent;
    border-radius: 10px;
    padding-inline: 9px;
    margin-inline: -10px;
}

/* ═══ 🔴 TANLANGAN QATOR ═══
   `:has()` — barcha joriy brauzerlarda bor (Chromium 105+,
   Safari 15.4+, Firefox 121+). Qo'llamaydigan eski brauzerda qator
   shunchaki tintsiz qoladi va native belgi baribir ko'rinadi —
   ya'ni buzuq holat YO'Q. */
.check-line:has(input:checked) {
    border-color: color-mix(in srgb, var(--c-primary) 32%, transparent);
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
}

/* O'chirilgan variant tanlangan bo'lsa ham urg'u OLMAYDI — u
   o'zgartirilmaydi, ya'ni «faol tanlov» signali chalg'itardi. */
.check-line:has(input:disabled) {
    border-color: transparent;
    background: none;
    cursor: not-allowed;
}

/* ═══ 🔴 GRID USTUNIDA GORIZONTAL CHIQISH BO'LMAYDI ═══
   ═══ EGASINING SHIKOYATI ═══
   «api kalitlar bo'limidagi va bazi boshqa joydagi clickboxlarni
    bosganimda bazilariga click qilinib rangi o'zgarmoqda bazilari
    esa yo'q»

   ═══ SABAB: BOSISH SOHALARI USTMA-UST TUSHGAN ═══
   Yuqoridagi qoida qatorni ikki tomonga 9px chiqaradi, ya'ni
   element o'z ustunidan 18px KENG bo'ladi.

   `.grid` ning ustunlar orasidagi masofasi esa 12px
   (`.grid { gap: 12px }`). 18px > 12px — demak qo'shni
   ustundagi ikki qator bir-birining ustiga 6px KIRADI.

   Ustma-ust tushgan joyda bosish DOMda KEYIN turgan yorliqqa
   tegadi. Foydalanuvchi chap ustundagi katakchani bosadi, o'ng
   ustundagi almashadi — u buni sezmaydi va «bosilmadi» deb
   o'ylaydi. Bosish ustun chetiga qanchalik yaqin bo'lsa, shunga
   qarab «ba'zida ishlaydi» holati chiqadi.

   `.grid-tight` da masofa 16px, ya'ni ustma-ustlik 2px — kamroq,
   lekin baribir bor.

   ═══ NIMA UCHUN FAQAT CHET NOLGA TUSHADI, BO'SHLIQ QOLADI ═══
   Grid elementi ustunni O'ZI TO'LDIRADI (`justify-items: stretch`),
   ya'ni manfiy chet KERAK EMAS — u faqat ustma-ustlik yasaydi.

   Ichki bo'shliq esa QOLADI: qator endi tintlangan yuza va nol
   bo'shliqda tint matnga yopishib turardi. Bo'shliq elementni
   kengaytirmaydi (`box-sizing: border-box` global). */
.grid > .check-line,
.grid-tight > .check-line { margin-inline: 0; }

@media (hover: hover) {
    /* ═══ NIMA UCHUN FAQAT RANG O'TADI ═══
       `background-color` va `border-color` — sof rang o'tishi.
       Ular har doim interpolatsiya qilinadi, ya'ni bo'lim
       boshidagi «tasvir qatlami chizilmaydi» nuqsoni bu yerda
       TAKRORLANMAYDI. */
    .check-line { transition: background-color .16s ease, border-color .16s ease; }

    /* ═══ 🔴 NIMA UCHUN `:not(:has(input:disabled))` ═══
       O'chirilgan qator qoidasi (`:has(input:disabled)`) ustunligi
       0-2-1, hover esa 0-3-1 — ya'ni hover KUCHLIROQ va u
       o'chirilgan variantga ham tint berardi.

       Ustunlik TARTIBDAN kuchli, shuning uchun qoidani pastga
       ko'chirish yordam bermasdi: chetlashtirish selektorda
       bo'lishi SHART. */
    .check-line:hover:not(:has(input:disabled)) {
        border-color: color-mix(in srgb, var(--c-primary) 24%, transparent);
        background: color-mix(in srgb, var(--c-primary) 7%, transparent);
    }

    /* Tanlangan qator ustiga kelganda tint biroz TO'QROQ — aks
       holda hover tanlangan qatorda sezilmasdi. */
    .check-line:has(input:checked):hover:not(:has(input:disabled)) {
        border-color: color-mix(in srgb, var(--c-primary) 44%, transparent);
        background: color-mix(in srgb, var(--c-primary) 13%, transparent);
    }

    /* ═══ 🔴 KATAKCHANING O'ZIGA HOVER USLUBI BERILMAYDI ═══
       Ilgari bu yerda `input:not(:checked):hover { border-color }`
       turgan. U ENDI ISHLAMAYDI va OLIB TASHLANDI: chegara native
       chizmada bizga tegishli emas — brauzer uni o'zi chizadi va
       `border` deklaratsiyasi e'tiborsiz qoladi (yoki chizmani
       buzadi).

       Hover affordansi butunlay QATORGA ko'chirildi. U hatto
       yaxshiroq: nishon 19px kvadrat emas, butun qator kengligi. */
}

/* ══════════════════ 24g-3. FAYL TANLASH MAYDONI ══════════════════
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «supportga rasm yuklash yoki chek yuklash qismidagi file yuklash
 *  tugmasi juda oddiy, oddiy html da yasalganda o'xshaydi, css yoki
 *  nimadir qo'shib chiroyliroq qilish lozim»
 *
 * ═══ ASL SABAB ═══
 * `input[type="file"]` panel qoidalaridan ATAYLAB chiqarilgan
 * (`:not([type="file"])` — 8578 va 8988 qatorlar). Sabab o'rinli
 * edi: matn maydoni uslubi (`padding`, `background`) fayl
 * maydonini buzadi, chunki uning ichida BRAUZER tugmasi turadi.
 *
 * Lekin natijada u HECH QANDAY uslub olmagan va tizim tugmasi
 * bo'lib qolgan — «Choose Files / No file chosen».
 *
 * ═══ 🔴 NIMA UCHUN TUGMANI YASHIRIB, YORLIQ YASALMADI ═══
 * Keng tarqalgan usul: `input` ni yashirib, `<label>` ni tugmaga
 * aylantirish. U chiroyli, LEKIN:
 *
 *   1. Tanlangan fayl NOMI yo'qoladi. Brauzer uni faqat o'z
 *      tugmasi yonida ko'rsatadi; nomni ko'rsatish uchun JS kerak.
 *      Mijoz esa «chek yuklandimi?» degan savolga javob olishi
 *      SHART — aks holda u ikki marta yuklaydi.
 *   2. Markup o'zgaradi, ya'ni to'rt shablonni tahrirlash kerak
 *      (tiket yaratish, tiket javobi, depozit cheki, profil).
 *
 * `::file-selector-button` esa BRAUZER tugmasining o'zini
 * stillaydi: fayl nomi joyida qoladi, markup o'zgarmaydi va JS
 * kerak emas. Barcha zamonaviy brauzerda qo'llab-quvvatlanadi;
 * eski brauzerda tugma shunchaki tizim ko'rinishida qoladi —
 * ya'ni buzuq holat YO'Q. */
input[type="file"] {
    display: block;
    width: 100%;
    padding: var(--s-2);
    border: 1px dashed color-mix(in srgb, var(--c-primary) 32%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-primary) 4%, var(--panel));
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

/* ═══ NIMA UCHUN CHIZIQLI (dashed) CHEGARA ═══
   Yuklash maydoni «bu joyga narsa qo'yiladi» degan ma'noni
   beradi. Uzluksiz chegara uni oddiy matn maydoniga o'xshatib
   qo'yardi. */
input[type="file"]:hover {
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
}

input[type="file"]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* Brauzer tugmasi — paneldagi `.btn` bilan bir oilada.
   `-webkit-` prefiksi eski Safari va Android WebView uchun:
   ular standart nomni bilmaydi va prefikssiz tugma stillanmasdi. */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    margin-inline-end: var(--s-2);
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--site-grad-text);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .16s ease;
}

input[type="file"]:hover::-webkit-file-upload-button,
input[type="file"]:hover::file-selector-button {
    /* `filter` tanlandi, yangi gradient EMAS: gradient qiymatini
       takrorlash uni ikki joyda ushlab turishni talab qilardi. */
    filter: brightness(1.08);
}

input[type="file"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* ══════════════════ 24g. FAYL TANLASH — TARJIMA QILINADIGAN TUGMA ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN YUQORIDAGI QAROR QAYTA KO'RILDI ═══
 * Yuqorida `::file-selector-button` tanlangan va sabablari o'rinli
 * edi: markup o'zgarmaydi, JS kerak emas. Lekin o'sha qaror BITTA
 * narsani hisobga olmagan — tugma MATNI brauzerdan keladi.
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «Choose file tugmasi turibdi, bu so'z ingliz tilida turibdi ammo
 *  meni interfeysim uz tilida edi»
 *
 * `Choose File` va `No file chosen` — brauzerning O'Z matnlari.
 * Ular BRAUZER tiliga bog'liq, sayt tiliga emas, va ularni HTML
 * yoki CSS bilan almashtirish MUMKIN EMAS (`content` bu
 * psevdo-elementda ishlamaydi). Ya'ni besh tilli panelda bu matn
 * mijozning yarmi uchun begona tilda qolardi.
 *
 * Shu sababli tugma o'zimizning `<label>` imiz:
 *   - `<label for>` bosilganda brauzer fayl tanlashni O'ZI ochadi,
 *     ya'ni JS'siz ham ISHLAYDI;
 *   - fayl nomi uchun JS kerak (layoutdagi umumiy `data-fayl`
 *     ishlovchisi). U bo'lmasa yuklash baribir ishlaydi — faqat
 *     tanlangan fayl nomi ko'rinmaydi.
 *
 * Yuqoridagi `::file-selector-button` qoidalari OLIB TASHLANMADI:
 * ular hali `.fayl-tanla` ga o'tmagan boshqa formalar (tiket,
 * profil) uchun kuchda qoladi.
 */
.fayl-tanla {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
}

/* ═══ 🔴 NIMA UCHUN `display: none` EMAS ═══
   Butunlay yashirilgan `required` maydonni brauzer FOKUS QILA
   OLMAYDI va Chrome yuborishda «An invalid form control is not
   focusable» deb to'xtab qoladi — forma umuman yuborilmasdi.
   Shaffof, 1px o'lchamli maydon esa fokus oladi, ya'ni
   brauzerning o'z tekshiruvi ishlashda davom etadi. */
.fayl-tanla input[type="file"] {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

/* ═══ EGASINING TALABI ═══
   «Faylni tanlash tugmasini sal chiroyliroq qilib qo'ying, rang
    barang border va biroz chiroyliroq shrift»

   ═══ NIMA UCHUN `.btn` DAN AJRALGAN ═══
   `.btn` — paneldagi barcha tugmalar uchun bir xil, bosiq
   ko'rinish. Bu tugma esa oqimning ENG muhim qadami: mijoz pulni
   allaqachon o'tkazgan va endi DALILNI yuklashi kerak. Uni
   topa olmasa to'lov admin navbatida qolib ketadi, ya'ni tugma
   ko'zga tashlanishi kerak.

   ═══ 🔴 NIMA UCHUN IKKI FON QATLAMI ═══
   `padding-box` qatlami tugmaning O'ZINI karta rangi bilan
   to'ldiradi, `border-box` qatlami esa faqat chegara zonasida
   ko'rinib qoladi. Natijada haqiqiy gradient («rang barang»)
   chegara chiqadi — CSS da chegaraga gradient berishning boshqa
   to'g'ridan-to'g'ri yo'li yo'q.

   `mask-composite` bilan ichkariligi SHAFFOF chegara ham yasash
   mumkin, lekin uni tanimaydigan brauzer butun tugmani gradientga
   bo'yab, matnni o'qilmas qilardi. Bu usul esa hamma joyda bir
   xil ishlaydi.

   ═══ NIMA UCHUN `--site-grad` ═══
   Uch rangli gradient — egasi so'ragan «rang barang». Ikki rangli
   `--site-grad-text` bu o'lchamda ham chiroyli, lekin uchinchi
   rang chegarani jonliroq qiladi. Matn ostida ishlatilmaydi,
   ya'ni token e'lonidagi kontrast ogohlantirishi bu yerga
   TEGISHLI EMAS. */
.fayl-tugma {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        var(--site-grad) border-box;
    box-shadow: var(--lift-1);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    /* ═══ NIMA UCHUN MATN GRADIENT EMAS ═══
       `background-clip: text` yuqoridagi chegara gradientini
       O'CHIRARDI: bitta elementda `background` ikki maqsadda
       ishlatib bo'lmaydi. To'yingan brend rangi har temada
       kartadan ajralib turadi. */
    color: var(--c-primary);
    text-align: center;
    cursor: pointer;
}

/* Klaviatura bilan kelganda tugma fokusda ekani KO'RINISHI kerak:
   maydonning o'zi shaffof, ya'ni uning konturi ko'rinmaydi. */
.fayl-tanla:focus-within .fayl-tugma {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
}

.fayl-nomi { font-size: 13px; color: var(--muted); }

@media (hover: hover) {
    .fayl-tugma { transition: translate .16s ease, box-shadow .16s ease; }

    .fayl-tugma:hover {
        translate: 0 -1px;
        box-shadow: var(--lift-2);
    }
}

/* ══════════════════ 24h. ZICH GRID ══════════════════
 *
 * Ko'p checkbox ro'yxati (webhook hodisalari). Standart
 * `gap: var(--s-3)` ular orasida 16px qoldiradi — bu bir-biriga
 * tegishli variantlar uchun JUDA ko'p va ro'yxat «sochilgan»
 * ko'rinadi.
 *
 * Vertikal 4px (variantlar zich), gorizontal 16px (ustunlar
 * ajralib turadi). */
.grid-tight { gap: 4px var(--s-3); }

/* ══════════════════════════════════════════════════════════════════
 * 25. OMMAVIY SAYT: QOLGAN INLINE USLUBLAR
 *
 * Panelda 149 inline uslub bo'lgan (23-bo'lim), ommaviy saytda esa
 * 26 ta. Ular kamroq, lekin AYNI muammoni keltiradi: qat'iy sonlar
 * `--s-*` tokenlariga ergashmaydi va tema zichligini o'zgartirsa
 * bo'shliqlar bir-biriga mos kelmaydi.
 *
 * 23a bo'limidagi `.mt-*` / `.mb-*` sinflari SAYT tokenlarini
 * (`--s-1`…`--s-5`) ishlatadi — ya'ni ular ikki joyda ham to'g'ri.
 * Bu bo'limda esa faqat SAYTGA xos komponentlar.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 25a. BLOG MUQOVA RASMI ══════════════════
 *
 * ═══ NIMA UCHUN `aspect-ratio` ═══
 * Ilgari `style="width:100%"` edi va balandlik RASMDAN kelardi.
 * Natijada sahifa yuklanganda mazmun rasm kelgach SILJIB ketardi
 * (Cumulative Layout Shift). Bu Google Core Web Vitals da
 * jarimaga olib keladi va o'quvchi uchun ham noqulay — u
 * o'qiyotgan qatorni yo'qotadi.
 *
 * `aspect-ratio` brauzerga joyni OLDINDAN ayttiradi va siljish
 * NOLGA tushadi.
 *
 * ═══ NIMA UCHUN `cover` ═══
 * Muallif yuklagan rasm nisbati har xil bo'ladi. `contain` bo'lsa
 * yon tomonlarda oq chiziqlar qolardi. `cover` esa kesadi —
 * muqova rasmida chetlar odatda muhim emas. */
.site-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--site-radius);
    margin-bottom: var(--s-3);
}

/* ══════════════════ 25b. O'RAM YUQORI BO'SHLIG'I ══════════════════
 *
 * Sarlavha ostidagi mazmun o'rami. Sarlavha `sticky` va u ostidagi
 * mazmun TEGIB turmasligi kerak, aks holda aylantirishda matn
 * sarlavha ostidan "chiqib" ko'rinadi. */
.site-wrap-top { padding-top: var(--s-3); }

/* ══════════════════ 25c. HAVOLA KO'RINISHIDAGI TUGMA ══════════════════
 *
 * `auth/verify-email` da «xatni qayta yuborish» AMALI POST bo'lishi
 * kerak (CSRF himoyasi), ya'ni u `<button>`. Lekin KO'RINISHI
 * havola bo'lishi kerak: bu ikkinchi darajali amal va tugma
 * ko'rinishida bo'lsa asosiy tugma bilan raqobat qilardi.
 *
 * Ilgari bu inline uslub bilan qilinardi:
 *   style="background:transparent;color:var(--primary);padding:0;
 *          width:auto;font-weight:400;text-decoration:underline"
 *
 * Bundan tashqari u `var(--primary)` ga murojaat qilardi — bunday
 * o'zgaruvchi loyihada YO'Q (to'g'risi `--c-primary`). Ya'ni rang
 * amalda MEROS bo'lib qolardi va tugma matni oddiy qora
 * ko'rinardi. Sinf bu xatoni ham tuzatadi. */
.btn-link {
    display: inline;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-primary);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.btn-link:hover { color: color-mix(in srgb, var(--c-primary) 78%, #000); }

/* ══════════════════ 25d. ZICH XIZMAT QATORI ══════════════════
 *
 * Xizmat sahifasidagi «o'xshash xizmatlar» ro'yxati. Asosiy
 * `.site-svc` katalog uchun o'lchangan (16px bo'shliq, 14px matn).
 * Yon panelda esa 8-10 element bo'ladi va ular ekranga sig'ishi
 * kerak — shu sababli zichroq variant. */
.site-svc-sm { padding: var(--s-2) 12px; }
.site-svc-sm .site-svc-name { font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════
 * 26. PANEL INTERFEYSI: KARKAS, TIL TANLAGICH, HAMYON, KARTALAR
 *
 * ═══ EGASINING SHIKOYATI (ikki ekran rasmi bilan) ═══
 * «faqat foydalanuvchi login qilgandan keyingi sahifalarni ko'rib
 *  chiqing, ular oddiy — til tanlash ham oddiy, joylashuvlari juda
 *  xunuk ... quruq skeletga o'xshaydi»
 *
 * Ekran rasmlarida ANIQ ko'rinadigan muammolar:
 *
 *   1. TIL TANLAGICH — ochilganda BRAUZERNING tizim ro'yxati
 *      chiqadi (UZ/EN/RU/TR/AR kulrang qutida). Sayt dizayni bilan
 *      hech qanday aloqasi yo'q.
 *   2. BALANS — «0 so'm  balans» oq quti ichida ikki matn. Ko'z uni
 *      yorliq deb qabul qiladi, bosiladigan tugma deb emas.
 *   3. STATISTIKA KARTALARI — uch bir xil bo'sh to'rtburchak. Farqni
 *      bilish uchun matnni O'QISH kerak.
 *   4. TEZKOR AMALLAR — to'rt tugma bir qatorda, tushuntirish yo'q.
 *   5. BO'SH HOLAT — uzuq chegara + bir qator kulrang matn.
 *   6. YON MENYU — ikonkalar yalang'och chizma, matn bilan bir
 *      tekislikda. Faol element kuchsiz ajralib turadi.
 *   7. MAYDONLAR — yorliq mayda, input yuzasiz. Forma «skelet».
 *
 * ═══ UMUMIY QOIDA: HAR ELEMENT O'Z MAQOMIGA EGA ═══
 * «Quruq skelet» hissi bitta sababdan keladi: hamma narsa BIR XIL
 * og'irlikda. Yorliq ham, qiymat ham, tugma ham, izoh ham — bir
 * o'lchamda, bir rangda, bir yuzada.
 *
 * Bu bo'limda har element uchun ATAYLAB boshqa og'irlik tanlanadi:
 * ikonka yuzada, sarlavha qalin, izoh kulrang va kichik, asosiy
 * amal to'q. Ko'z shu farqlar bo'ylab harakat qiladi — bu
 * «loyihalangan» hissini beradi.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 26a. YON MENYU KARKASI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN UCH QATLAM ═══
 * Menyuda 15 element bor. 768px balandlikdagi noutbukda ular brend
 * bilan profil kartasi orasiga SIG'MAYDI.
 *
 * Ilgari butun `.side` aylanardi. Natija: pastga aylantirilganda
 * brend ham, «Chiqish» ham ekrandan chiqib ketardi — mijoz chiqish
 * uchun tepaga qaytishi kerak edi.
 *
 * Endi:
 *   brend      — yuqorida MIXLANGAN
 *   .side-nav  — faqat SHU qism aylanadi
 *   .side-foot — pastda MIXLANGAN (profil + chiqish)
 *
 * `min-height: 0` MAJBURIY: flex farzandining standart
 * `min-height: auto` uni mazmun balandligiga cho'zadi va
 * `overflow-y` HECH QACHON ishlamaydi. Bu flexbox ning eng ko'p
 * uchraydigan tuzog'i. */
.side {
    display: flex;
    flex-direction: column;

    /* ═══ 🔴 NIMA UCHUN `height`, `max-height` EMAS ═══
       Poydevorda (`.side`, 1-bo'lim) `max-height: 100vh` bor. U
       menyu QISQA bo'lsa uni mazmun balandligida qoldiradi — ya'ni
       `.side-foot` ekran pastiga MIXLANMASDI, u menyu oxirida
       "suzib" qolardi.

       `height` esa menyuni HAR DOIM to'liq ekran balandligiga
       cho'zadi va shundagina `flex: 1` bilan `.side-nav` qolgan
       joyni egallaydi.

       `100dvh` — telefonda brauzer paneli yashiringanda `100vh`
       eskirib qoladi. Panelda menyu telefonda ko'rinmaydi, lekin
       planshetda ko'rinadi va u yerda bu farq bor. Tartib muhim:
       `dvh` ni bilmagan brauzer birinchi qatorni ishlatadi. */
    height: 100vh;
    height: 100dvh;

    /* ═══ 🔴 TASHQI AYLANTIRISH O'CHIRILADI ═══
       Poydevorda `.side { overflow-y: auto }` bor. Endi aylanadigan
       qism `.side-nav` — ikkisi bir vaqtda bo'lsa IKKI aylantirish
       sohasi paydo bo'lardi va sichqoncha g'ildiragi qaysi birini
       harakatlantirishi tasodifiy bo'lardi. */
    overflow: hidden;

    /* Pastdagi 90px endi kerak emas: `.side-foot` o'z joyida
       mixlangan va u ostida bo'sh joy qoldirmaydi. */
    padding-bottom: 12px;
}

.side-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Aylantirish chegarasida mazmun kesilmasin. */
    padding-block: 2px;
    /* ═══ NIMA UCHUN `overscroll-behavior` ═══
       Menyu oxiriga yetganda aylantirish SAHIFAGA o'tib ketardi
       (scroll chaining) va mijoz menyuni aylantirmoqchi bo'lib
       butun sahifani surib yuborardi. */
    overscroll-behavior: contain;
}

/* Menyu aylanayotganini bildiradigan ingichka chiziq — faqat
   HAQIQATAN aylanadigan bo'lsa ko'rinadi (`scrollbar` ning o'zi
   14-bo'limda ingichka qilingan). */
.side-nav::-webkit-scrollbar { width: 4px; }

.side-foot {
    flex: none;
    padding-top: var(--s-2);
    /* Ajratgich: profil bloki menyudan alohida qatlam. */
    border-top: 1px solid color-mix(in srgb, var(--c-primary) 12%, var(--border));
    margin-inline: 6px;
}

/* Brend endi aylanmaydi — o'z joyida qoladi. */
.brand { flex: none; }

/* ══════════════════ 26b. NAVIGATSIYA IKONKASI ══════════════════
 *
 * ═══ NIMA UCHUN IKONKAGA QUTI BERILDI ═══
 * Ilgari SVG yalang'och edi va matn bilan bir tekislikda turardi.
 * Natijada u «belgi» emas, matnning bir qismi kabi ko'rinardi —
 * ekran rasmida menyu 15 qator BIR XIL matn bo'lib chiqadi.
 *
 * Quti ikonkaga MAQOM beradi: u endi alohida element. Faol
 * holatda quti brend rangiga to'ladi va oq ikonka bilan
 * kontrast beradi — faol element BIR QARASHDA ko'rinadi. */
.nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--c-primary) 7%, transparent);
    color: color-mix(in srgb, var(--c-primary) 72%, var(--muted));
}

/* Matn o'sadi va uzun bo'lsa kesiladi — nishon («3») o'ng chetda
   qolishi kerak, matn uni surib yubormasligi kerak. */
.nav-matn {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link[aria-current="page"] .nav-ico {
    background: var(--site-grad-text);
    color: #fff;
    box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--c-primary) 75%, transparent);
}

@media (hover: hover) {
    .nav-ico { transition: background .2s ease, color .2s ease; }

    .nav-link:hover .nav-ico {
        background: color-mix(in srgb, var(--c-primary) 16%, transparent);
        color: var(--c-primary);
    }
}

/* ══════════════════ 26c. FOYDALANUVCHI KARTASI: O'Q ══════════════════ */

.side-user { margin-top: var(--s-2); }

.side-user-oq {
    flex: none;
    color: var(--muted);
    opacity: .5;
}

.side-user-balans {
    /* Balans SON — u brend rangida va qalinroq. Ilgari u nom bilan
       bir xil kulrang edi va «ikkinchi qator matn» kabi
       ko'rinardi. */
    font-weight: 700;
    color: color-mix(in srgb, var(--c-primary) 82%, var(--text));
}

@media (hover: hover) {
    .side-user-oq { transition: translate .2s ease, opacity .2s ease; }
    .side-user:hover .side-user-oq { translate: 3px 0; opacity: .9; }

    /* RTL da o'q teskari tomonga suriladi. `[dir="rtl"]` da SVG
       allaqachon `scale(-1)` bilan aylantirilmagan, shu sababli
       siljish yo'nalishini QO'LDA teskari qilamiz. */
    [dir="rtl"] .side-user:hover .side-user-oq { translate: -3px 0; }
}

[dir="rtl"] .side-user-oq { scale: -1 1; }

/* ══════════════════ 26d. CHIQISH TUGMASI ══════════════════
 *
 * ═══ NIMA UCHUN `.btn` EMAS ═══
 * `.btn-ghost` chegarali to'rtburchak beradi. Profil kartasi ham
 * chegarali to'rtburchak — ikkisi yonma-yon turganda bir xil
 * maqomda ko'rinardi va ko'z «bu ikki tugma» deb o'qirdi.
 *
 * Chiqish esa IKKINCHI DARAJALI amal: u kerak, lekin mijoz uni
 * kunda bir marta bosadi. Shu sababli u chegarasiz, kulrang va
 * kichik. Ustiga kelganda qizil tomonga siljiydi — «ehtiyot
 * bo'ling» signali, lekin qo'rqitmaydi. */
.side-logout { margin: 4px 0 var(--s-2); }

.side-logout-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
}

.side-logout-btn svg { flex: none; opacity: .7; }

@media (hover: hover) {
    .side-logout-btn { transition: background .2s ease, color .2s ease; }

    .side-logout-btn:hover {
        background: color-mix(in srgb, var(--c-danger) 9%, transparent);
        color: var(--c-danger);
    }

    .side-logout-btn:hover svg { opacity: 1; }
}

/* ══════════════════ 26e. HAMYON (YUQORI QATORDAGI BALANS) ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN IKKI QISM ═══
 * Ilgari bu BITTA havola edi: «0 so'm balans» → to'ldirish
 * sahifasi. Ikki muammo:
 *
 *   1. Mijoz balans TARIXINI ko'rmoqchi bo'lsa (nima uchun pul
 *      kamaydi?) menyuni ochib «Tranzaksiyalar» ni izlashi kerak
 *      edi.
 *   2. «To'ldirish» eng muhim harakat, lekin havola oddiy yorliq
 *      kabi ko'rinardi — hech qanday chaqiruv yo'q.
 *
 * Endi: summa → tranzaksiyalar, «+» → to'ldirish. Ikki niyat, ikki
 * nishon, bitta blok.
 *
 * ═══ NIMA UCHUN `overflow: hidden` ═══
 * Blokning burchagi yumaloq (999px) va ichidagi ikki havolaning
 * o'z foni bor. `hidden` bo'lmasa hover foni yumaloq burchakdan
 * CHIQIB ketadi va to'rtburchak dog' ko'rinadi. */
.hamyon {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 24%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 7%, var(--panel));
    overflow: hidden;
}

.hamyon-summa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
}

.hamyon-summa svg {
    flex: none;
    color: color-mix(in srgb, var(--c-primary) 78%, var(--muted));
}

.hamyon-son {
    font-weight: 700;
    letter-spacing: -.01em;
    /* Uzun summa («12 345 678,90 so'm») blokni cho'zmasligi kerak —
       u yuqori qatorda va joy cheklangan. */
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «+» tugmasi — to'q, ya'ni ASOSIY amal. */
.hamyon-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    border-inline-start: 1px solid color-mix(in srgb, var(--c-primary) 24%, var(--border));
    background: var(--site-grad-text);
    color: #fff;
    text-decoration: none;
}

@media (hover: hover) {
    .hamyon { transition: border-color .2s ease, box-shadow .2s ease; }
    .hamyon-summa { transition: background .2s ease; }
    .hamyon-plus { transition: filter .2s ease; }

    .hamyon:hover {
        border-color: color-mix(in srgb, var(--c-primary) 44%, var(--border));
        box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--c-primary) 70%, transparent);
    }

    .hamyon-summa:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }

    /* `filter` ishlatiladi, `background` EMAS: gradient ustiga
       yangi gradient yozish uni QAYTA hisoblashni talab qiladi va
       o'tish sakrab ko'rinardi. `brightness` esa silliq. */
    .hamyon-plus:hover { filter: brightness(1.12); }
}

/* ══════════════════ 26f. DOIRA IKONKA TUGMASI ══════════════════
 *
 * Qo'ng'iroq va shunga o'xshash bitta belgili tugmalar. Ilgari
 * qo'ng'iroq yalang'och SVG edi — u bosiladigan ko'rinmasdi va
 * bosish sohasi faqat chizmaning o'zi edi (telefonda tegib
 * bo'lmaydi).
 *
 * Endi 38px doira: bu mobil qulaylik uchun tavsiya etilgan eng
 * kichik bosish sohasiga yaqin. */
.ikon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: var(--panel);
    color: var(--muted);
    text-decoration: none;
}

@media (hover: hover) {
    .ikon-btn { transition: border-color .2s ease, background .2s ease, color .2s ease; }

    .ikon-btn:hover {
        border-color: color-mix(in srgb, var(--c-primary) 38%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
        color: var(--c-primary);
    }
}

/* ══ YORUG' / TO'Q REJIM ALMASHTIRGICHI ════════════════════════════
 *
 * Ikki ikonka DOM da, bittasi ko'rinadi. Sabab layout izohida:
 * serverda `system` rejimi qurilmada nimani ko'rsatayotganini
 * bilmaydi, shuning uchun tanlovni CSS qiladi.
 *
 * Qoida: YORUG' da quyosh, TO'Q da oy — egasi aynan shunday
 * so'radi. Ya'ni ikonka HOLATNI ko'rsatadi, keyingi qadamni emas.
 * ══════════════════════════════════════════════════════════════════ */
.rejim-form { display: flex; }

/* Standart holat (`light` yoki e'lon qilinmagan): quyosh. */
.rejim-oy { display: none; }

html[data-mode="dark"] .rejim-quyosh { display: none; }
html[data-mode="dark"] .rejim-oy { display: block; }

/* `system` — qurilma so'rovi hal qiladi. Bu fayldagi boshqa
   `data-mode="system"` bloklari bilan AYNI naqsh. */
@media (prefers-color-scheme: dark) {
    html[data-mode="system"] .rejim-quyosh { display: none; }
    html[data-mode="system"] .rejim-oy { display: block; }
}

/* O'qilmagan xabar bor — tugma brend rangida va yengil to'lgan. */
.ikon-btn.bor {
    border-color: color-mix(in srgb, var(--c-primary) 34%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 9%, var(--panel));
    color: var(--c-primary);
}

/* ══════════════════ 26g. TIL TANLAGICH ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN `<select>` DAN VOZ KECHILDI ═══
 * Egasi: «til tanlash ham oddiy». Sabab TEMADA emas va CSS da ham
 * emas — `<option>` ro'yxatini BRAUZER O'ZI chizadi. U operatsion
 * tizimning menyusi va uni stillash IMKONSIZ:
 *
 *   - `background`, `color`, `font` — Windows'da e'tiborsiz
 *   - `padding`, `border-radius` — hech qaysi brauzerda ishlamaydi
 *   - ochilish animatsiyasi — mumkin emas
 *
 * Ekran rasmida aynan shu ko'rinadi: chiroyli panel ustida
 * kulrang tizim ro'yxati.
 *
 * ═══ YECHIM: `<details>` + havolalar ═══
 * `<details>` — brauzerning O'Z yig'iladigan elementi. U bepul
 * beradi: klaviatura bilan boshqarish, ekran o'quvchi uchun
 * «ochilgan/yopilgan» holati, JS'siz ishlash.
 *
 * Ichida `<option>` emas, `<a>` — ya'ni ular ODDIY HTML va biz
 * ularni to'liq stillay olamiz. */
.lang-pick {
    position: relative;
    flex: none;
}

.lang-pick > summary {
    /* `list-style: none` + `::-webkit-details-marker` — ikkisi ham
       kerak: birinchisi Firefox/Chrome uchun, ikkinchisi eski
       WebKit uchun. Bittasi qoldirilsa uchburchak belgi qoladi. */
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    user-select: none;
}

.lang-pick > summary::-webkit-details-marker { display: none; }

.lang-pick > summary > svg:first-child {
    flex: none;
    color: color-mix(in srgb, var(--c-primary) 70%, var(--muted));
}

.lang-pick-joriy { letter-spacing: .04em; }

.lang-pick-oq {
    flex: none;
    color: var(--muted);
    transition: rotate .2s ease;
}

.lang-pick[open] > summary {
    border-color: color-mix(in srgb, var(--c-primary) 42%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
    color: var(--c-primary);
}

.lang-pick[open] .lang-pick-oq { rotate: 180deg; }

@media (hover: hover) {
    .lang-pick > summary { transition: border-color .2s ease, background .2s ease; }

    .lang-pick > summary:hover {
        border-color: color-mix(in srgb, var(--c-primary) 38%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 7%, var(--panel));
    }
}

/* ── Ochiladigan ro'yxat ──────────────────────────────────────────
 *
 * ═══ 🔴 NIMA UCHUN `inset-inline-end: 0` ═══
 * Tanlagich yuqori qatorning O'NG chetida turadi. Menyu
 * `inset-inline-start: 0` bilan ochilsa u ekrandan CHIQIB ketardi
 * va gorizontal aylantirish paydo bo'lardi.
 *
 * `end` mantiqiy xossa: arabchada (`rtl`) tanlagich CHAPDA bo'ladi
 * va menyu ham o'zi to'g'ri tomonga ochiladi — qo'shimcha qoida
 * kerak emas.
 *
 * ═══ NIMA UCHUN `z-index: 40` ═══
 * Menyu `.topbar` NING ICHIDA, topbar esa stacking kontekst
 * (`position: sticky` + `z-index: 55`). Ya'ni bu 40 ILDIZDA emas,
 * faqat topbar ICHIDA o'lchanadi — u menyuni qo'shni boshqaruvlar
 * (`.hamyon`, `.ikon-btn`, `.qongiroq`) ustiga chiqaradi, xolas.
 *
 * Sahifadagi qolgan hamma narsaga nisbatan menyu OTASINING darajasida
 * (55) chiziladi. Ilgari topbar 20 edi va menyu telefonda pastki
 * navigatsiya (40) ortida qolardi — buni shu yerdagi 40 ni oshirish
 * BILAN HAL QILIB BO'LMAYDI, topbar shifti ko'tarilishi kerak edi.
 * To'liq narvon fayl boshidagi jadvalda. */
.lang-pick-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 40;
    min-width: 178px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 16%, var(--border));
    background: var(--panel);
    box-shadow: var(--lift-3);
}

/* ═══ NIMA UCHUN `a` VA `button` BIRGA ═══
   Til tanlagichida havolalar (`GET` — til sessiyaga yoziladi),
   valyuta tanlagichida esa tugmalar (`POST` — hisobga yoziladi).
   Ko'rinish AYNI bo'lishi kerak: foydalanuvchi uchun bu bir xil
   vidjet va ular yuqori qatorda yonma-yon turadi. */
.lang-pick-menu > a,
.lang-pick-menu > button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
}

/* Brauzerning tugma uchun standart ko'rinishini olib tashlaymiz —
   aks holda kulrang fon, chegara va boshqa shrift qolardi. */
.lang-pick-menu > button {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

/* Kod — qat'iy kenglikda kichik nishon. Qat'iy kenglik MUHIM: aks
   holda «UZ» va «AR» har xil joy egallab, nomlar tekislanmasdi. */
.lang-pick-kod {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 5px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    color: color-mix(in srgb, var(--c-primary) 84%, var(--text));
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
}

.lang-pick-nom {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lang-pick-belgi { flex: none; color: var(--c-primary); }

.lang-pick-menu > a[aria-current="true"],
.lang-pick-menu > button[aria-current="true"] {
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
    font-weight: 700;
}

.lang-pick-menu > a[aria-current="true"] .lang-pick-kod,
.lang-pick-menu > button[aria-current="true"] .lang-pick-kod {
    background: var(--site-grad-text);
    color: #fff;
}

@media (hover: hover) {
    .lang-pick-menu > a,
    .lang-pick-menu > button { transition: background .16s ease, color .16s ease; }

    .lang-pick-menu > a:hover,
    .lang-pick-menu > button:hover {
        background: color-mix(in srgb, var(--c-primary) 13%, transparent);
        color: var(--c-primary);
    }
}

/* Ochilish animatsiyasi — `<details>` mazmuni `display: none` dan
   chiqadi, ya'ni `transition` ISHLAMAYDI (sabab 17-bo'limda
   batafsil). `animation` esa ishlaydi. */
@media (prefers-reduced-motion: no-preference) {
    .lang-pick[open] .lang-pick-menu {
        animation: panelDropIn .18s cubic-bezier(.22, .61, .36, 1) both;
    }
}

@keyframes panelDropIn {
    from { opacity: 0; translate: 0 -6px; scale: .98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

/* ══════════════════ 26h. STATISTIKA KARTALARI ══════════════════
 *
 * ═══ NIMA UCHUN IKONKA O'NG YUQORIDA ═══
 * Ilgari karta shunday o'qilardi: yorliq → raqam → izoh. Uchtasi
 * ham CHAP tomonda, bir ustunda. Ko'z uchun bu «matn bloki».
 *
 * Ikonka o'ng yuqorida bo'lsa karta DIAGONAL bo'ylab o'qiladi:
 * ikonka (nima haqida) → raqam (qancha) → izoh (tafsilot). Bu
 * boshqaruv panellarida standart naqsh.
 *
 * ═══ NIMA UCHUN `position: absolute` ═══
 * Ikonka oqimda bo'lsa u yorliqni pastga surardi va kartalar har
 * xil balandlikda bo'lardi (birida ikonka bor, birida yo'q).
 * Absolut joylashuv esa oqimga TA'SIR QILMAYDI. */
.stat { overflow: hidden; }

.stat-ico {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    color: var(--c-primary);
}

/* Yorliq va raqam ikonkaga TEGMASLIGI kerak — o'ng tomonda joy
   qoldiriladi. 56px = ikonka (36) + chetlar (2 × 14) − 8px
   ehtiyot. */
.stat-label,
.stat-value { padding-inline-end: 56px; }

/* ── Mavzular ─────────────────────────────────────────────────────
 *
 * ═══ NIMA UCHUN UCH RANG ═══
 * Uch karta uch xil MA'NO tashiydi: pul, kutish, tugagan. Ular bir
 * xil rangda bo'lsa ko'z ularni ajratmaydi.
 *
 * Ranglar panelning qolgan qismidan olinadi (`badge-warning`,
 * `badge-success`) — ya'ni mijoz ularni allaqachon «kutish» va
 * «tugagan» deb o'rgangan. Yangi rang tili O'YLAB TOPILMAYDI. */
.stat-mavzu-kutish .stat-ico {
    background: color-mix(in srgb, var(--c-warning) 13%, transparent);
    color: var(--c-warning);
}

.stat-mavzu-kutish::before { background: var(--c-warning); }

.stat-mavzu-tugagan .stat-ico {
    background: color-mix(in srgb, var(--c-success) 13%, transparent);
    color: var(--c-success);
}

.stat-mavzu-tugagan::before { background: var(--c-success); }

/* ═══ 🔴 NIMA UCHUN FAQAT BITTA RAQAM GRADIENTDA ═══
   5-bo'limda `.stat-value` GA GRADIENT berilgan — ya'ni uchta
   raqam ham brend rangida edi. Ekran rasmida bu ko'rinadi: «0 so'm»,
   «0» va «0» — hammasi bir xil ko'k.
 
   Natijasi teskari: hammasi ajralib turganda HECH NARSA ajralib
   turmaydi. Ko'z uchun uchta bir xil ko'k raqam — bitta blok.
 
   Endi faqat BALANS gradientda qoladi (u eng muhim son va mijoz
   uni birinchi izlaydi), qolgan ikkitasi oddiy to'q matn.
   Ierarxiya: bitta yorqin, ikkitasi tinch.
 
   `-webkit-text-fill-color` MAJBURIY: `color` ni qaytarish
   YETARLI EMAS, chunki gradient matn aynan shu xossa bilan
   shaffof qilingan. */
.stat-mavzu-kutish .stat-value,
.stat-mavzu-tugagan .stat-value,
.stat-mavzu-sozlama .stat-value,
.stat-mavzu-xato .stat-value {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}

/* ── Sozlama mavzusi (pul EMAS) ──────────────────────────────────
 *
 * Referal sahifasida uch karta foiz va kun ko'rsatadi, uch karta
 * esa PUL. Ilgari oltisi ham brend gradientida bo'lib, mijoz
 * «qaysi biri mening pulim?» degan savolga javob olmasdi.
 *
 * Sozlama kartalari neytral: ikonka kulrang, raqam oddiy matn.
 * Ular MA'LUMOT, harakatga chaqiruv emas. */
.stat-mavzu-sozlama .stat-ico {
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    color: var(--muted);
}

.stat-mavzu-sozlama::before {
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}

/* ── Xato mavzusi ─────────────────────────────────────────────────
 *
 * Ommaviy buyurtmada balans yetmasa. Bu tasdiqlashni to'sadigan
 * YAGONA sabab va mijoz uni darhol ko'rishi kerak — shu sababli
 * karta chegarasi ham qizil (boshqa mavzularda faqat ikonka va
 * yuqoridagi chiziq rangli). */
.stat-mavzu-xato {
    border-color: color-mix(in srgb, var(--c-danger) 36%, var(--border));
}

.stat-mavzu-xato .stat-ico {
    background: color-mix(in srgb, var(--c-danger) 13%, transparent);
    color: var(--c-danger);
}

.stat-mavzu-xato::before { background: var(--c-danger); }

/* Xato holatida raqam ham qizil: «balansingiz» soni muammoning
   O'ZI va u ko'zga tashlanishi kerak. */
.stat-mavzu-xato .stat-value { color: var(--c-danger); }

/* ══════════════════ 26i. TEZKOR AMALLAR ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN TUGMA QATORI TASHLANDI ═══
 * Ilgari to'rt tugma bir qatorda: bittasi to'q, uchtasi shaffof.
 * Uch muammo:
 *
 *   1. Har tugmada FAQAT nom bor edi. «Ommaviy buyurtma» va «Obuna
 *      yaratish» orasidagi farqni bilish uchun mijoz ularni
 *      BOSISHI kerak edi — ya'ni interfeys savolga javob bermasdi.
 *   2. To'rt tugma bir qatorda «forma tugmalari» kabi ko'rinardi,
 *      «panel boshqaruvi» kabi emas.
 *   3. Telefonda ular to'rt qatorga tushib, har biri to'liq
 *      kenglikda BIR XIL ko'rinardi.
 *
 * Endi har biri karta: ikonka + nom + bir qatorlik tushuntirish.
 * `auto-fit` bilan ular ekranga qarab 1, 2 yoki 4 ustunga
 * joylashadi. */
.quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-2);
}

.quick-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.quick-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    color: var(--c-primary);
}

.quick-main { min-width: 0; flex: 1; }

.quick-nom {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 2px;
}

/* ═══ NIMA UCHUN IZOH IKKI QATORGA CHEKLANMAYDI ═══
   Matnlar qisqa (bir jumla) va tarjimada ular uzayishi mumkin
   (nemis, ruscha). `line-clamp` bilan kesilsa tarjima YARIM
   ko'rinardi. Karta esa balandlashsa hech narsa buzilmaydi —
   grid o'zi tekislaydi. */
.quick-izoh {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.quick-oq {
    flex: none;
    color: var(--muted);
    opacity: .45;
}

[dir="rtl"] .quick-oq { scale: -1 1; }

/* Asosiy amal («Yangi buyurtma») — brend chegarasi va yengil fon.
   U qolgan uchtasidan AJRALIB turishi kerak, lekin to'q bo'lmasligi
   kerak: to'q karta qolganlarini «o'chirilgan» ko'rsatardi. */
.quick-asosiy {
    border-color: color-mix(in srgb, var(--c-primary) 34%, var(--border));
    background:
        radial-gradient(closest-side at 0% 0%,
            color-mix(in srgb, var(--c-primary) 9%, transparent), transparent),
        var(--panel);
}

.quick-asosiy .quick-ico {
    background: var(--site-grad-text);
    color: #fff;
    box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--c-primary) 75%, transparent);
}

@media (hover: hover) {
    .quick-item {
        transition: border-color .2s ease, background .2s ease,
                    box-shadow .2s ease, translate .2s ease;
    }

    .quick-oq { transition: translate .2s ease, opacity .2s ease; }

    .quick-item:hover {
        border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border));
        box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--c-primary) 80%, transparent);
        translate: 0 -2px;
    }

    .quick-item:hover .quick-oq { translate: 3px 0; opacity: .85; }
    [dir="rtl"] .quick-item:hover .quick-oq { translate: -3px 0; }
}

/* ══════════════════ 26j. BO'SH HOLAT: IKONKA VA SARLAVHA ══════════════════
 *
 * ═══ NIMA UCHUN UCH QATLAM ═══
 * Ilgari: «Hali buyurtma yo'q.» + tugma. Bu TEXNIK jihatdan
 * to'g'ri, lekin mijozning BIRINCHI ekrani sifatida sovuq — u
 * faqat YO'Q narsani aytadi.
 *
 * Standart naqsh uch qatlam: ikonka (holat), sarlavha (nima
 * bo'layotgani), tushuntirish (nima qilish kerak). Tugma esa
 * to'rtinchi — keyingi qadam. */
.panel-empty { padding-block: var(--s-4); }

.panel-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    color: color-mix(in srgb, var(--c-primary) 70%, var(--muted));
}

.panel-empty-bosh {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Tushuntirish matni — o'qilishi uchun kengligi cheklanadi. Uzun
   qator (80+ belgi) markazlashgan holda o'qish tezligini
   tushiradi. */
.panel-empty > .muted { max-width: 42ch; line-height: 1.6; }

/* ══════════════════ 26k. MA'LUMOT PLITKALARI: JONLANTIRISH ══════════════════
 *
 * 13b bo'limi plitkalarga yuza bergan. Bu yerda ular BOSILADIGAN
 * ekanini bildiradi (`data-belgila` bilan matn tanlanadi) va
 * qiymat maqomini oshiradi.
 *
 * Ekran rasmida plitkalar kulrang qutilar bo'lib ko'rinadi va
 * ulardagi qiymat (foydalanuvchi nomi, email, referal kod) yorliq
 * bilan bir og'irlikda. Endi qiymat KATTAROQ va to'qroq. */
.card dl.grid dd { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }

.card dl.grid dd.mono { font-size: 13.5px; letter-spacing: 0; }

@media (hover: hover) {
    .card dl.grid > div {
        transition: border-color .2s ease, background .2s ease;
    }

    .card dl.grid > div:hover {
        border-color: color-mix(in srgb, var(--c-primary) 28%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 7%, var(--bg));
    }
}

/* ══════════════════ 26l. MAYDONLAR: YUZA VA FOKUS ══════════════════
 *
 * ═══ 🔴 EGASINING SHIKOYATI: «quruq skeletga o'xshaydi» ═══
 * Buyurtma formasi ekran rasmida aynan shunday ko'rinadi: yorliq
 * kichik kulrang matn, input esa oq to'rtburchak. Ikkisi orasida
 * hech qanday bog'lanish yo'q va input «bo'sh joy» kabi ko'rinadi.
 *
 * Uch o'zgarish:
 *   1. Yorliq QALINROQ va to'qroq — u savol, javob emas.
 *   2. Input foni `--bg` (kartadan bir pog'ona pastroq) — u
 *      «to'ldirilishi kerak» degan ma'noni beradi. Oq fon esa
 *      kartadan ajralmasdi.
 *   3. Fokusda input fon O'ZGARADI (oq bo'ladi) va brend halqasi
 *      chiqadi — mijoz qaysi maydonda ekanini bir qarashda
 *      ko'radi. */
/* ═══ NIMA UCHUN `.field-lab` HAM ═══
   Radio guruhida (`role="radiogroup"`) yorliq `<label>` bo'la
   OLMAYDI: `<label for>` bitta boshqaruvga ishora qiladi, guruhga
   emas. Shu joyda `<span class="field-lab">` + `aria-labelledby`
   ishlatiladi va u xuddi yorliqday ko'rinishi kerak. */
.field label,
.field > .field-lab {
    /* `<span>` inline element — `margin-bottom` unga TA'SIR
       QILMAYDI. `.field` esa oddiy blok (flex emas), ya'ni
       cho'zilish ham avtomatik bo'lmaydi. */
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
    margin-bottom: 6px;
}

/* ═══ NIMA UCHUN `.card` ICHIDA ═══
   Kirish (`auth`) sahifalarida input fon kartadan ajralishi kerak
   emas — u yerda karta O'ZI markazda va boshqa hech narsa yo'q.
   Panelda esa karta ichida 5-8 maydon bor va ular ajralishi
   kerak. */
.card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.card select,
.card textarea {
    background: color-mix(in srgb, var(--c-primary) 3%, var(--bg));
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
}

.card input:focus,
.card select:focus,
.card textarea:focus {
    background: var(--input-bg);
}

/* ══════════════════ 26m. YUQORI QATOR: AJRATGICH ══════════════════
 *
 * Sarlavha bilan boshqaruvlar (hamyon, qo'ng'iroq, til) orasida
 * ingichka vertikal chiziq. U guruhlarni ajratadi — ilgari ular
 * bir oqimda turib «to'rtta alohida element» kabi ko'rinardi.
 *
 * ═══ NIMA UCHUN `::before` VA `flex` DA ═══
 * Alohida `<span>` qo'shish HTML ni bezak elementi bilan
 * to'ldirardi. Chiziq esa MAZMUN emas — u faqat ko'rinish. */
.topbar-tools {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: none;
}

.topbar-tools::before {
    content: '';
    flex: none;
    width: 1px;
    height: 24px;
    margin-inline-end: 2px;
    background: color-mix(in srgb, var(--border) 85%, transparent);
}

/* ══════════════════ 26n. FORMA GURUHLARI: QADAM RAQAMLARI ══════════════════
 *
 * ═══ EGASINING SHIKOYATI: «quruq skeletga o'xshaydi» ═══
 * Buyurtma formasi ekran rasmida shunday ko'rinadi: uch guruh
 * sarlavhasi (XIZMAT TANLASH, BUYURTMA MA'LUMOTI, QO'SHIMCHA) va
 * ular orasida maydonlar. Sarlavhalar bir xil kichik kulrang matn —
 * ular BO'LIM boshlanganini aytadi, lekin TARTIBNI aytmaydi.
 *
 * Mijoz uchun savol: «avval nima, keyin nima?» Forma uzun bo'lsa
 * (sakkiz maydon) bu savol haqiqiy.
 *
 * ═══ YECHIM: CSS HISOBLAGICHI ═══
 * Raqamlar HTML da yozilmaydi — `counter` bilan CSS o'zi sanaydi.
 * Nima uchun bu muhim: guruh qo'shilsa yoki o'chirilsa raqamlar
 * O'ZI to'g'rilanadi. Qo'lda yozilsa «1, 2, 4» holati paydo
 * bo'lardi va uni hech kim payqamasdi.
 *
 * ═══ NIMA UCHUN `aria-hidden` KERAK EMAS ═══
 * `::before` mazmuni ekran o'quvchida o'qilishi MUMKIN, lekin bu
 * yerda u FOYDALI: «bir, xizmat tanlash» — ko'rmaydigan mijoz ham
 * tartibni eshitadi. Bezak emas, ma'no.
 *
 * ═══ NIMA UCHUN `counter-reset` `.panel-form` DA ═══
 * Sahifada bir necha forma bo'lishi mumkin (to'lov sahifasida
 * «Yangi to'lov» va «Sovg'a kodi»). Reset formada bo'lsa har biri
 * BIRDAN boshlanadi. `body` da bo'lsa ikkinchi forma «3, 4» dan
 * davom etardi. */
.panel-form { counter-reset: guruh; }

.form-guruh-bosh { counter-increment: guruh; }

.form-guruh-bosh::before {
    content: counter(guruh);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--site-grad-text);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    /* Harf oralig'i sarlavhadan MEROS bo'ladi (`.1em`) va raqam
       doira ichida o'ngga siljib ketardi. */
    letter-spacing: 0;
    line-height: 1;
}

/* ══════════════════ 26o. XULOSA USTUNI: BOSHLANG'ICH HOLAT ══════════════════
 *
 * Xizmat tanlanmagan holatda o'ng ustun deyarli BO'SH edi: bitta
 * kulrang jumla. Ekran rasmida bu «yarim yasalgan sahifa» kabi
 * ko'rinadi.
 *
 * Endi u ikonka bilan — ya'ni bu ATAYLAB bo'sh holat, tugallanmagan
 * ish emas. */
.svc-bosh-holat {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: var(--s-2) 0;
    text-align: center;
}

.svc-bosh-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
    color: color-mix(in srgb, var(--c-primary) 66%, var(--muted));
}

.svc-bosh-holat p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* ══════════════════ 26p. TANLASH RO'YXATI: O'Z O'QI ══════════════════
 *
 * ═══ NIMA UCHUN KERAK ═══
 * `<select>` ning yopiq holati (tanlangan qiymat + o'q) stillanadi —
 * faqat OCHILGAN ro'yxatni brauzer chizadi. Ilgari o'q brauzerning
 * o'zi qo'yardi: Windows'da kulrang uchburchak, macOS'da ikki
 * strelka. Ya'ni bir sayt ikki tizimda boshqacha ko'rinardi.
 *
 * Endi o'q `background-image` (SVG, `data:` URI) — hamma joyda bir
 * xil va brend rangida.
 *
 * ═══ NIMA UCHUN `appearance: none` XAVFSIZ ═══
 * U faqat KO'RINISHNI o'chiradi. Klaviatura bilan boshqarish,
 * ekran o'quvchi, mobil qurilmadagi tizim ro'yxati — hammasi
 * ishlashda davom etadi. */
.card select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

[dir="rtl"] .card select {
    padding-inline-end: 12px;
    padding-inline-start: 34px;
    background-position: left 12px center;
}

/* ═══ 🔴 NIMA UCHUN IKKI FON BIRGA BERILADI ═══
   26l bo'limi `.card select` ga `background: color-mix(...)` beradi
   — bu QISQARTMA xossa va u `background-image` ni O'CHIRADI.

   Tartib muhim: `background-image` KEYIN yozilgani uchun o'q
   saqlanadi, lekin rang qisqartmadan keladi. Ikkisini bir qoidada
   yozish (`background: url(...) ..., color-mix(...)`) ham mumkin
   edi, lekin unda 26l ni takrorlash kerak bo'lardi.

   Fokusda esa `.card select:focus { background: var(--input-bg) }`
   yana o'qni o'chiradi — shu sababli u yerda ham qayta beriladi. */
.card select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

[dir="rtl"] .card select:focus { background-position: left 12px center; }

/* ══════════════════ 26q. KARTA SARLAVHASI: O'NG TOMONDA AMAL ══════════════════
 *
 * `.card h2` ichida o'ngga suriladigan element (masalan «Hammasini
 * ko'rish» havolasi yoki sanoq nishoni). Ilgari bunday holat uchun
 * blade da alohida `<div class="row-between">` yasalardi va
 * sarlavha ostidagi ajratgich chizig'i YO'QOLARDI. */
.card h2 > .h2-oxir { margin-inline-start: auto; }

/* ══════════════════ 26r. JADVAL SARLAVHASI: AJRALIB TURADI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN YOPISHQOQ SARLAVHA RAD ETILDI ═══
 * Birinchi urinishda `thead th { position: sticky; top: 0 }` yozildi:
 * uzun jadvalda ustun nomlari ko'rinib turishi kerak.
 *
 * Bu ISHLAMAYDI va sababi ikkita:
 *
 *   1. `.topbar` ham yopishqoq, `top: 0`, `z-index: 20`. Jadval
 *      sarlavhasi ham `top: 0` bo'lsa u topbar OSTIGA kirib
 *      ko'rinmay qolardi. To'g'ri `top` esa topbar balandligiga
 *      teng bo'lishi kerak.
 *
 *      DIQQAT: bu yerdagi eski izoh «balandlik o'zgaruvchan» degan
 *      edi va u AYNAN shu nosozlikni buyurtma sahifasida bergan.
 *      Endi qator ichida faqat o'zgarmas balandlikdagi boshqaruvlar
 *      qoladi va balandlik `--topbar-h` tokenida yozilgan (maqsad
 *      qatori qatordan chiqarildi — 28j/28k bo'limlari).
 *
 *      Ya'ni birinchi sabab endi hal qilingan, lekin ikkinchisi
 *      o'z kuchida qoladi va yopishqoq sarlavha baribir ishlamaydi.
 *
 *   2. `.table-wrap` da `overflow-x: auto` bor. Brauzer `overflow-y`
 *      ni ham `auto` ga aylantiradi va yopishqoqlik VIEWPORT emas,
 *      SHU o'ramga nisbatan hisoblanadi. O'ramning balandligi
 *      cheklanmagani uchun u hech qachon vertikal aylanmaydi —
 *      ya'ni sticky HECH NARSA qilmaydi.
 *
 * `max-height` qo'shish mumkin edi, lekin bu jadvalni ichma-ich
 * aylanadigan qutiga aylantirardi — telefonda ikki aylantirish
 * sohasi eng chalkash naqsh.
 *
 * Sarlavha oddiy qoladi. 6-bo'limda unga allaqachon fon, katta
 * harflar va qalin shrift berilgan — bu yerda faqat AJRATGICH
 * kuchaytiriladi: kulrang chiziq o'rniga brend tomonga siljigan
 * chiziq. Ko'z sarlavha bilan birinchi qatorni aniq ajratadi. */
thead th {
    border-bottom-color: color-mix(in srgb, var(--c-primary) 18%, var(--border));
}

/* ══════════════════ 26s. TABBAR: FAOL ELEMENT AJRALIB TURADI ══════════════════
 *
 * Mobil menyuda faol element FAQAT rang bilan belgilangan edi.
 * 10px matnda rang farqi juda kuchsiz — ayniqsa quyosh ostida
 * telefonga qaraganda.
 *
 * Endi faol elementda ikonka ustida yengil fon va yuqorida qisqa
 * chiziq bor. */
.tabbar-item {
    position: relative;
    border-radius: 10px;
    padding: 6px 8px;
}

.tabbar-item[aria-current="page"],
.tabbar-more.has-current > .tabbar-item,
.tabbar-more[open] > .tabbar-item {
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    font-weight: 700;
}

.tabbar-item[aria-current="page"]::before,
.tabbar-more.has-current > .tabbar-item::before {
    content: '';
    position: absolute;
    top: -1px;
    inset-inline: 30%;
    height: 2px;
    border-radius: 999px;
    background: var(--site-grad-text);
}

/* ══════════════════ 26t. FILTR CHIPLARI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN `<select>` DAN VOZ KECHILDI ═══
 * Buyurtmalar sahifasida holat filtri ochiladigan ro'yxatda edi va
 * yonida «Filtr» tugmasi turardi. Uch muammo:
 *
 *   1. IKKI HARAKAT: ro'yxatni ochish → tanlash → tugmani bosish.
 *      Chip esa BIR bosish.
 *   2. YOPIQ `<select>` da faqat tanlangan qiymat ko'rinadi. Mijoz
 *      «qanday variantlar bor?» degan savolga javob olmasdi.
 *   3. Ochilgan ro'yxatni stillash IMKONSIZ (sabab 26g bo'limida).
 *
 * ═══ NIMA UCHUN DESKTOPDA `wrap`, TELEFONDA `scroll` ═══
 * O'nta chip (Hammasi + 9 holat) desktopda ikki qatorga sig'adi —
 * hammasi BIR VAQTDA ko'rinadi, bu eng yaxshi holat.
 *
 * 360px telefonda esa ular BESH qatorga tushardi va butun ekranni
 * egallardi. Gorizontal aylantirish 620px pog'onasida yoqiladi
 * (narvonda) — u yerda chiplar bitta qatorda qoladi. */
.filtr-chips {
    display: flex;
    flex-wrap: wrap;
    /* ═══ NIMA UCHUN 8px, ILGARI 6px EDI ═══
       Chiplar 36px baland va yonma-yon turadi. 6px oraliqda ikki
       qo'shni holat («Kutilmoqda» / «Bajarilmoqda») barmoq uchun
       amalda BITTA nishonga aylanardi — noto'g'ri filtr qo'llanib,
       mijoz buyurtmasini yo'qolgan deb o'ylardi. 8px — qo'shni
       nishonlar uchun eng kichik xavfsiz oraliq. */
    gap: 8px;
}

.filtr-chips > a {
    display: inline-flex;
    align-items: center;
    /* ═══ NIMA UCHUN `min-height` QO'SHILDI ═══
       `padding: 6px 13px` + 12.5px shrift = ~30px balandlik. Bu
       barmoq uchun kichik: chiplar filtr panelida zich joylashgan.
       36px — sarlavhadagi doira tugmalar bilan bir o'lchov.
       `padding` o'zgartirilmadi: u chipning YON tomonini belgilaydi
       va kengaytirilsa o'nta chip 360px ekranda besh qatorga
       tushardi. */
    min-height: 36px;
    padding: 6px 13px;
    /* ═══ GORIZONTAL AYLANTIRISHDAN HIMOYA ═══
       Holat nomlari tarjimadan keladi va uzunligi tilga bog'liq.
       `min-width: 0` chipga qatorga sig'ish uchun qisqarishga ruxsat
       beradi, `overflow: hidden` esa matnni chip ichida ushlab
       qoladi.

       Bu NORMAL holatda ishga tushmaydi: flexbox avval QATORGA
       BO'LADI, qisqartirish faqat bitta chipning o'zi qatorga
       sig'masa qo'llanadi. Ya'ni chiplar odatdagidek to'liq
       ko'rinadi, lekin hech qanday tarjima sahifada gorizontal
       aylantirish paydo qilolmaydi. */
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* Faol chip — to'q gradient. `border-color` ham o'zgaradi, aks
   holda oq chegara gradient ustida ko'rinib qolardi. */
.filtr-chips > a[aria-current="true"] {
    background: var(--site-grad-text);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--c-primary) 70%, transparent);
}

@media (hover: hover) {
    .filtr-chips > a { transition: border-color .18s ease, background .18s ease, color .18s ease; }

    .filtr-chips > a:not([aria-current="true"]):hover {
        border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
        color: var(--c-primary);
    }
}

/* ══════════════════ 26u. YONMA-YON BOSHQARUVLAR: INPUT HAM O'SADI ══════════════════
 *
 * 16-bo'limdagi `.inline-controls select { flex: 1 }` faqat
 * `<select>` ga tegardi. Buyurtmalar sahifasida endi u yerda
 * `<input type="search">` turadi va u `flex: 0 1 auto` bo'lib
 * qisqarib ketardi — izlash maydoni tugmadan kichik bo'lardi.
 *
 * `min-width: 0` MAJBURIY: `<input>` ning standart `size` atributi
 * unga `min-width` beradi va u flex ichida qisqarishga TO'SQINLIK
 * qiladi (ma'lum tuzoq). */
.inline-controls input,
.inline-controls textarea { flex: 1; min-width: 0; }

/* Tugma qisqarmaydi — matni kesilmasligi kerak. */
.inline-controls .btn { flex: none; }

/* ══════════════════════════════════════════════════════════════════
 * 27. KONTRAST: YUZALAR VA TUGMALAR AJRALIB TURADI
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «qismlar bir biridan ajralib turishi kerak, bir xil fon rangida
 *  ajralib turmayapti, eng katta muammolardan biri esa, tugmalar ham
 *  ajralib turmayapti orqa fonga yaqin bo'lib qolgan»
 *
 * ═══ O'LCHANGAN SABAB ═══
 * Standart temada:
 *     --bg:     #f4f5fa   (yorqinlik ~96%)
 *     --panel:  #ffffff   (yorqinlik 100%)
 *     --border: #dfe3ea
 *     --shadow: 0 1px 2px rgba(16, 24, 40, .06)
 *
 * Fon bilan karta orasidagi farq ~4%. Inson ko'zi 4% yorqinlik
 * farqini KATTA yuzalarda deyarli sezmaydi — ayniqsa monitor
 * yorqinligi past bo'lsa yoki quyosh ostida.
 *
 * Soya esa 6% shaffofmaslik bilan 2px — u amalda YO'Q.
 *
 * Tugmalar: `.btn-ghost { background: transparent }` — ya'ni
 * ikkinchi darajali tugmalarning YUZASI UMUMAN YO'Q. Ular faqat
 * 1px och kulrang chegara bilan ko'rinardi.
 *
 * ═══ 🔴 NIMA UCHUN TOKENNI O'ZGARTIRISH YETMAYDI ═══
 * `--bg` ni to'qroq qilish birinchi urinish edi va u ISHLAMAYDI:
 * 12 temadan 10 tasi `--bg`, `--panel` va `--border` ni O'ZI
 * belgilaydi (o'lchandi). Ya'ni poydevordagi o'zgarish faqat
 * standart temaga tegardi va egasi boshqa temada aynan shu
 * muammoni ko'raverardi.
 *
 * ═══ YECHIM: KONTRASTNI `--text` DAN HISOBLASH ═══
 * `--text` har temada FONGA TESKARI (yorug' temada to'q, to'q
 * temada yorug'). Ya'ni `color-mix(... var(--text) N%, var(--border))`
 * chegarani HAR temada kuchaytiradi — yorug'da to'qroq, to'qda
 * yorug'roq qiladi.
 *
 * Bu 12 temaga ham, kelajakda qo'shiladigan temaga ham o'zi
 * moslashadi. Har tema uchun qo'lda qiymat yozish kerak emas.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 27a. YUZA IERARXIYASI ══════════════════
 *
 * Uch pog'ona aniq ajralishi kerak:
 *
 *     fon (`--bg`)  →  karta (`--panel`)  →  maydon/plitka
 *
 * Karta uchun ikki qatlam ishlatiladi:
 *   1. `border` — chegara `--text` dan hisoblanadi, ya'ni har temada
 *      ko'rinadi
 *   2. `box-shadow` — soya kartani fondan «ko'taradi»
 *
 * ═══ NIMA UCHUN IKKISI HAM ═══
 * Faqat chegara «chizilgan quti» beradi (tekis, qog'ozdagi jadval
 * kabi). Faqat soya to'q temada YO'QOLADI (qora ustida qora soya
 * ko'rinmaydi). Ikkisi birga har sharoitda ishlaydi. */
/* ═══ 🔴 NIMA UCHUN `inset` SOYA, `::after` EMAS ═══
   Birinchi urinishda yuqori yorug'lik `::after` bilan chizildi:
   `position: absolute; top: 0; height: 1px`.

   Bu IKKI muammo berdi:
     1. Karta burchagi yumaloq (14px). To'g'ri chiziq esa yumaloq
        burchakdan CHIQIB ketardi va chetlarda «quloq» ko'rinardi.
        `overflow: hidden` bilan tuzatish mumkin edi, LEKIN u karta
        ichidagi ochiladigan menyularni (xizmat tanlash ro'yxati)
        KESARDI.
     2. `.stat::before` allaqachon yuqori qirrada turadi (brend
        chizig'i) va `::after` uni yopib qo'yardi.

   `inset` soya esa `border-radius` ga O'ZI ergashadi va hech
   qanday element qo'shmaydi. */
.card,
.stat {
    border-color: color-mix(in srgb, var(--text) 13%, var(--border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
        0 1px 2px color-mix(in srgb, var(--text) 6%, transparent),
        0 6px 18px -12px color-mix(in srgb, var(--text) 22%, transparent);
}

/* ── Karta ichidagi ikkinchi darajali yuza ────────────────────────
 *
 * Maydonlar, plitkalar, ichki elementlar. Ular kartadan bir
 * pog'ona PASTDA bo'lishi kerak — «bu joy to'ldiriladi» signali. */
.card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.card select,
.card textarea {
    /* 26l bo'limidagi 3% juda kuchsiz edi — oq kartada oq input
       ko'rinmasdi. 6% + `--text` dan hisoblangan chegara. */
    background: color-mix(in srgb, var(--text) 4%, var(--input-bg));
    border-color: color-mix(in srgb, var(--text) 15%, var(--border));
}

.card dl.grid > div,
.sub-item,
.code-box {
    border-color: color-mix(in srgb, var(--text) 11%, var(--border));
}

/* ══════════════════ 27b. TUGMALAR ══════════════════
 *
 * ═══ 🔴 ASOSIY TUGMA: NIMA UCHUN GRADIENT VA SOYA ═══
 * Ilgari `.btn { background: var(--c-primary) }` — tekis rang.
 * Tekis rang FONDAN farq qiladi, lekin u «yuza» hissini bermaydi:
 * u fonda chizilgan rangli to'rtburchak kabi.
 *
 * Uch qo'shimcha:
 *   1. GRADIENT — yuqoridan pastga yengil to'qlashish. Bu jismoniy
 *      yorug'lik va ko'z uni «qavariq» deb o'qiydi.
 *   2. RANGLI SOYA — qora soya emas, BREND rangidagi soya. U tugma
 *      ostida rangli nur qoldiradi va tugmani fondan ko'taradi.
 *   3. ICHKI YUQORI YORUG'LIK — qirrani yoritadi (yuqoridagi
 *      karta bilan bir xil mantiq).
 *
 * ═══ NIMA UCHUN `filter: brightness` HOVER'DAN OLIB TASHLANDI ═══
 * Ilgari `.btn:hover { filter: brightness(.92) }` — tugma
 * QORAYARDI. Bu «o'chirilgan» signali: interfeys tilida hover
 * yorqinlashish yoki ko'tarilish bo'lishi kerak, qorayish esa
 * bosilgan holat.
 *
 * `filter` ning ikkinchi muammosi: u YANGI QATLAM yaratadi va
 * ichidagi soyani ham qoraytiradi — natijada tugma «loyqa»
 * ko'rinardi. */
.btn {
    position: relative;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 14%, var(--c-primary)),
            var(--c-primary) 55%,
            color-mix(in srgb, #000 8%, var(--c-primary)));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
        0 2px 6px -2px color-mix(in srgb, var(--c-primary) 55%, transparent),
        0 6px 16px -8px color-mix(in srgb, var(--c-primary) 45%, transparent);
    /* Matn og'irligi oshirildi: 600 → 650. Rangli fonda oq matn
       yupqaroq ko'rinadi (optik illyuziya) va uni qoplash kerak. */
    font-weight: 650;
    letter-spacing: -.005em;
}

.btn:hover { filter: none; }

/* ═══ 🔴 IKKINCHI DARAJALI TUGMA: YUZA BERILDI ═══
 * Ilgari: `background: transparent` — ya'ni YUZA YO'Q. Tugma faqat
 * 1px och kulrang chegara bilan ko'rinardi va oq karta ustida u
 * deyarli KO'RINMAS edi. Egasi aynan shuni «orqa fonga yaqin bo'lib
 * qolgan» deb aytdi.
 *
 * ═══ NIMA UCHUN BREND TINTASI, KULRANG EMAS ═══
 * Kulrang yuza (`--bg`) oq kartada ko'rinadi, LEKIN kulrang fonda
 * (`--bg` ustida, karta tashqarisida) yana yo'qolardi.
 *
 * Brend tintasi esa HAR IKKI fonda ko'rinadi, chunki u boshqa
 * RANG (nafaqat boshqa yorqinlik). Bundan tashqari u tugma
 * BOSILADIGAN ekanini aytadi — brend rangi interfeysda
 * «harakat» degan ma'noni tashiydi. */
.btn-ghost {
    background: color-mix(in srgb, var(--c-primary) 9%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--c-primary) 30%, var(--border));
    color: color-mix(in srgb, var(--c-primary) 88%, var(--text));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
        0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
    font-weight: 650;
}

.btn-danger {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 14%, var(--c-danger)),
            var(--c-danger) 55%,
            color-mix(in srgb, #000 8%, var(--c-danger)));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
        0 2px 6px -2px color-mix(in srgb, var(--c-danger) 55%, transparent);
}

/* ── O'chirilgan holat ────────────────────────────────────────────
 *
 * `opacity: .55` (poydevorda) YETARLI EMAS: gradient va soya bilan
 * tugma yarim shaffof bo'lsa ham «bosiladigan» ko'rinadi. Soya
 * BUTUNLAY olib tashlanadi — soyasiz element «tekis», ya'ni
 * bosilmaydigan. */
.btn[disabled],
.btn[aria-disabled="true"] {
    box-shadow: none;
    filter: grayscale(.35);
}

@media (hover: hover) {
    .btn {
        transition: translate .16s ease, box-shadow .16s ease, background .16s ease;
    }

    /* Hover: tugma KO'TARILADI va soyasi kuchayadi. Bu «bosishga
       tayyor» signali. */
    .btn:hover {
        translate: 0 -1px;
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
            0 4px 10px -3px color-mix(in srgb, var(--c-primary) 60%, transparent),
            0 10px 24px -10px color-mix(in srgb, var(--c-primary) 50%, transparent);
    }

    .btn-ghost:hover {
        background: color-mix(in srgb, var(--c-primary) 16%, var(--panel));
        border-color: color-mix(in srgb, var(--c-primary) 48%, var(--border));
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
            0 3px 8px -3px color-mix(in srgb, var(--c-primary) 35%, transparent);
    }

    .btn-danger:hover {
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
            0 4px 10px -3px color-mix(in srgb, var(--c-danger) 60%, transparent);
    }
}

/* Bosilganda tugma PASTGA tushadi va soyasi qisqaradi — jismoniy
   tugma harakati. Bu `hover` dan tashqarida: sensorli ekranda ham
   ishlashi kerak. */
.btn:active {
    translate: 0 1px;
    box-shadow:
        inset 0 2px 4px color-mix(in srgb, #000 18%, transparent),
        0 1px 2px color-mix(in srgb, var(--c-primary) 40%, transparent);
}

.btn-ghost:active {
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--text) 12%, transparent);
}

/* ══════════════════ 27c. FOKUS HALQASI KUCHAYTIRILDI ══════════════════
 *
 * Klaviatura bilan ishlaydigan foydalanuvchi uchun fokus QAYERDA
 * ekani eng muhim ma'lumot. Ilgari u ingichka edi va rangli tugma
 * ustida deyarli ko'rinmasdi.
 *
 * ═══ NIMA UCHUN IKKI QATLAM ═══
 * Oq halqa + brend halqa. Oq halqa to'q tugma ustida ko'rinadi,
 * brend halqa esa oq fonda. Ikkisi birga HAR fonda ishlaydi.
 *
 * `:focus-visible` ishlatiladi, `:focus` EMAS: sichqoncha bilan
 * bosilganda halqa chiqmasligi kerak (u faqat klaviatura uchun
 * ma'lumot). */
.btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--panel),
        0 0 0 4px color-mix(in srgb, var(--c-primary) 70%, transparent);
}

/* ══════════════════ 27d. TABLITSA VA RO'YXAT QATORLARI ══════════════════
 *
 * Jadval qatorlari faqat 1px och chegara bilan ajralardi. 20
 * qatorli jadvalda ko'z qatorni «yo'qotadi» — ayniqsa gorizontal
 * aylantirilganda.
 *
 * ═══ NIMA UCHUN ZEBRA, QALIN CHEGARA EMAS ═══
 * Qalin chegara jadvalni «panjara» qiladi (Excel ko'rinishi).
 * Juft qatorlarga yengil fon esa ko'zni qator bo'ylab OLIB BORADI
 * va chegara ingichka qolaveradi.
 *
 * 2.5% — sezilarli, lekin o'qishga xalaqit bermaydi. */
tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--text) 2.5%, transparent);
}

/* Hover zebra'dan KUCHLIROQ bo'lishi kerak, aks holda juft
   qatorda hover ko'rinmasdi. */
tbody tr:hover {
    background: color-mix(in srgb, var(--c-primary) 7%, transparent);
}

th, td {
    border-bottom-color: color-mix(in srgb, var(--text) 9%, var(--border));
}

/* ══════════════════ 27e. XABAR BLOKLARI ══════════════════
 *
 * `.alert` faqat fon rangi bilan edi (14% tinta) va chegara YO'Q.
 * Yengil fon ustida u «rangli dog'» kabi ko'rinardi.
 *
 * Chegara qo'shiladi va chapda qalin chiziq — bu xabar turini
 * (muvaffaqiyat / xato / ma'lumot) BIR QARASHDA aytadi.
 *
 * ═══ 🔴 NIMA UCHUN `display: flex` RAD ETILDI ═══
 * Birinchi urinishda `.alert` flex qilingan edi (ikonka qo'shish
 * uchun joy tayyorlash niyatida). Bu JUMLANI BUZADI:
 *
 *     <p class="alert alert-err">
 *         <strong>Diqqat:</strong>
 *         Bu kalit boshqa ko'rsatilmaydi.
 *     </p>
 *
 * Flex da `<strong>` bitta katak, qolgan matn ikkinchi katak
 * bo'ladi va ular 9px bo'shliq bilan AJRALIB chiqadi — bir jumla
 * ikki ustunga bo'linadi.
 *
 * Bundan tashqari `#method-instructions` da `white-space: pre-line`
 * bor va flex uni ham buzardi.
 *
 * Xabar bloki OQIM elementi bo'lib qoladi. */
.alert {
    padding: 11px 13px;
    border: 1px solid currentColor;
    border-inline-start-width: 3px;
    border-radius: 10px;
    line-height: 1.55;
}

/* ═══ NIMA UCHUN CHEGARA `currentColor` DAN SHAFFOFLASHTIRILADI ═══
   To'liq `currentColor` chegara juda kuchli — xabar «ogohlantirish
   lentasi» kabi ko'rinardi. Fon esa `currentColor` ning 14% i,
   ya'ni chegara ham shu oilada bo'lishi kerak.

   `border-color` ni qayta yozish uchun har variant alohida: CSS da
   `currentColor` ni shaffoflashtirish uchun `color-mix` ga UNI
   uzatish kerak, va u faqat aniq rang bilan ishlaydi. */
.alert-ok {
    border-color: color-mix(in srgb, var(--c-success) 40%, transparent);
    border-inline-start-color: var(--c-success);
}

.alert-err {
    border-color: color-mix(in srgb, var(--c-danger) 40%, transparent);
    border-inline-start-color: var(--c-danger);
}

.alert-info {
    border-color: color-mix(in srgb, var(--c-secondary) 40%, transparent);
    border-inline-start-color: var(--c-secondary);
}

/* Xabar ichidagi ro'yxat va paragraflar oqimni buzmasligi kerak. */
.alert > *:first-child { margin-top: 0; }
.alert > *:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
 * 28. QIDIRUVLI TANLASH (`.pick`) — NATIVE `<select>` O'RNIGA
 *
 * ═══ 🔴 EGASINING SHIKOYATI (to'rt ekran rasmi bilan) ═══
 * «boshqa paneldagi turkum va xizmatlarni tanlash qismlari yumshoq,
 *  yoqimli va qulay ... bizdagi aynan buyurtma berishdagi select
 *  tugmalar emas, balki barcha sahifalarda shunday»
 *
 * ═══ SOLISHTIRISH: RAQOBATCHI QATORIDA NIMA BOR ═══
 * Raqobatchining xizmat ro'yxatidagi BIR qator (o'lchandi):
 *
 *     [15589]  Telegram Premium Members For 30 Days + China…  $4.20
 *     ↓ Min: 50   ↑ Max: 30000   🕐 2 minutes
 *     [Recommended] [Best Seller] [Full Support] [Exclusive]
 *
 * Bizda esa `<option>` da FAQAT matn:
 *
 *     Telegram arzon obunachilar — 5 000 so'm / 1000
 *
 * ═══ 🔴 NIMA UCHUN `<option>` NI BOYITISH IMKONSIZ ═══
 * `<option>` ichida HTML BO'LMAYDI — spetsifikatsiya bo'yicha uning
 * mazmuni faqat matn. `<span>`, `<svg>`, ikkinchi qator — hech biri
 * ishlamaydi. Brauzer teglarni tashlab, matnni bir qatorga
 * yopishtiradi.
 *
 * Ya'ni bu CSS muammosi EMAS. Boy qator uchun `<select>` dan voz
 * kechish KERAK.
 *
 * ═══ NIMA UCHUN HAQIQIY `<select>` DOM DA QOLADI ═══
 * `.pick` — USTIGA qurilgan qatlam. Haqiqiy `<select>` yashiriladi,
 * lekin O'CHIRILMAYDI va u HAMON haqiqat manbasi:
 *
 *   - forma uni yuboradi (`name="service_id"`)
 *   - server validatsiyasi va `old()` o'zgarmaydi
 *   - JS ishlamasa foydalanuvchi ODDIY `<select>` ni ko'radi va
 *     buyurtma bera oladi
 *
 * Ya'ni buzuq holat YO'Q: eng yomon holatda interfeys oddiy
 * bo'ladi, lekin ISHLAYDI.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════ 28a. O'RAM VA TUGMA ══════════════════ */

.pick {
    position: relative;
    /* Grid katakda o'ram cho'zilib ketmasligi kerak. */
    min-width: 0;
}

/* ═══ 🔴 NIMA UCHUN `<select>` TUGMANI TO'LIQ QOPLAYDI ═══
 *
 * Uch variant ko'rib chiqildi:
 *
 *   1. `display: none` — RAD ETILDI. Brauzer bunday maydonni
 *      VALIDATSIYA QILMAYDI: `required` e'tiborsiz qoladi va bo'sh
 *      forma yuboriladi. Server baribir tekshiradi, lekin mijoz
 *      xatoni faqat sahifa qayta yuklangandan keyin bilardi.
 *
 *   2. `sr-only` naqshi (1px, burchakda) — RAD ETILDI. Validatsiya
 *      ishlaydi, LEKIN Chrome xato xabarini (`Bu maydonni
 *      to'ldiring`) O'SHA 1px nuqtada ko'rsatadi — ya'ni maydondan
 *      butunlay boshqa joyda, mijoz uni topmaydi.
 *
 *   3. TUGMANI QOPLASH — tanlandi. Maydon ko'rinmaydi
 *      (`opacity: 0`), lekin O'LCHAMI tugma bilan bir xil. Xato
 *      xabari AYNAN tugma ostida chiqadi.
 *
 * `pointer-events: none` — bosish tugmaga o'tishi kerak, aks holda
 * mijoz ko'rinmas `<select>` ni bosib brauzerning o'z ro'yxatini
 * ochardi.
 *
 * Tab tartibidan chiqarish JS da (`tabindex="-1"`): CSS bilan buni
 * qilish imkonsiz. */
.pick > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    /* Ro'yxat tasodifan ochilib qolsa u tugma OSTIDA qolishi
       kerak. */
    z-index: -1;
}

.pick-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text) 15%, var(--border));
    background: color-mix(in srgb, var(--text) 4%, var(--input-bg));
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    /* Uzun xizmat nomi tugmani cho'zmasligi kerak. */
    min-width: 0;
}

.pick-btn > .pick-tanlangan {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hech narsa tanlanmagan holat — matn kulrang (o'rin egallovchi). */
.pick-btn[data-bosh] > .pick-tanlangan { color: var(--muted); }

.pick-oq {
    flex: none;
    color: var(--muted);
    transition: rotate .2s ease;
}

.pick[data-ochiq] .pick-oq { rotate: 180deg; }

/* ═══ OCHIQ VA FOKUS HOLATI — YUMSHOQ ═══
   Qiymatlar oddiy maydonlar bilan AYNI (12g bo'limi): 55%
   chegara + 4px 10% nur. Ilgari bu yerda to'liq brend chegara va
   3px 18% halqa bo'lgan — egasi uni «juda to'q va border katta»
   deb ta'rifladi va u maydonlar bilan ham mos kelmasdi.

   `outline: none` SAQLANADI, lekin uning o'rniga ingichka chiziq
   `:focus-visible` da alohida beriladi (pastda) — klaviatura
   fokusi ko'rinishi kerak. */
.pick[data-ochiq] .pick-btn,
.pick-btn:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--border));
    background: var(--input-bg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 10%, transparent);
}

/* Klaviatura fokusida ingichka chiziq qo'shiladi — sabab 12g
   bo'limidagi bilan bir xil (kontrast va yuqori kontrast rejimi). */
.pick-btn:focus-visible {
    outline: 1.5px solid color-mix(in srgb, var(--c-primary) 62%, transparent);
    outline-offset: 1px;
}

.pick-btn {
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* ═══ O'CHIRILGAN HOLAT ═══
   Xizmat ro'yxati kategoriya tanlanmaguncha O'CHIRILGAN turadi
   (sabab 28f bo'limida). O'chirilgan tugma bosilmaydigan
   KO'RINISHI kerak, aks holda mijoz bosib javob olmaydi va
   «buzuq» deb o'ylaydi. */
.pick-btn[disabled] {
    cursor: not-allowed;
    opacity: .6;
    background: color-mix(in srgb, var(--text) 6%, var(--input-bg));
}

.pick-btn[disabled] > .pick-tanlangan { color: var(--muted); }

@media (hover: hover) {
    .pick-btn { transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }

    .pick-btn:not([disabled]):hover {
        border-color: color-mix(in srgb, var(--c-primary) 45%, var(--border));
        background: var(--input-bg);
    }
}

/* ══════════════════ 28b. OCHILADIGAN PANEL ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN `position: absolute`, `fixed` EMAS ═══
 * `fixed` panel aylantirilganda tugmadan AJRALIB ketardi (u
 * viewport'ga bog'lanadi). `absolute` esa `.pick` bilan birga
 * harakat qiladi.
 *
 * ═══ NIMA UCHUN `z-index: 60` ═══
 * U kartaning ICHIDA va kartadan chiqib ketishi kerak — 60 uni
 * kartaning qolgan mazmuni (maydonlar, tugmalar) ustiga chiqaradi.
 *
 * ═══ 🔴 BU 60 ILDIZDA ISHLAMAYDI ═══
 * Panel ochilganda `.card:has(.pick[data-ochiq])` qoidasi kartaga
 * `position: relative` + `z-index: 50` beradi, ya'ni karta STACKING
 * KONTEKST bo'ladi. Shu paytdan boshlab panel sahifaga nisbatan
 * KARTANING darajasida (50) chiziladi, 60 esa faqat karta ichida
 * qoladi.
 *
 * Ya'ni panel `.tabbar` (40) yoki `.reklama` (45) ortida qolsa,
 * tuzatish SHU YERDA emas — kartaning 50 qiymatida. Fayl boshidagi
 * jadvalga qaralsin. */
.pick-panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    /* ═══ NIMA UCHUN QAT'IY `max-height` ═══
       Katalogda 678 xizmat bor. Cheklovsiz panel butun sahifadan
       uzun bo'lardi va tanlash uchun sahifani aylantirish kerak
       bo'lardi (panel esa tugmaga bog'langani uchun tepaga
       «qochib» ketardi).

       420px — ekranda ~5 boy qator. Mijoz ro'yxatni PANEL ICHIDA
       aylantiradi. */
    /* ═══ 🔴 `60vh` CHEKLOVI NIMA UCHUN QO'SHILDI ═══
       Egasi: «bosganimda ro'yhatni birinchisi ko'rinib qolgani
       pastdagi oyna ichiga kirib ketyapti».

       Qat'iy 420px maydon sahifaning PASTIDA bo'lganda ekrandan
       chiqib ketardi — mijoz ro'yxatni ko'rish uchun sahifani
       aylantirishi kerak bo'lardi, panel esa tugmaga bog'langani
       uchun u bilan birga ketardi.

       `60vh` bilan panel har doim ekranga sig'adi. Ro'yxat panel
       ICHIDA aylanadi (`.pick-royxat`), ya'ni hech narsa
       kesilmaydi. */
    max-height: min(420px, 60vh);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--c-primary) 22%, var(--border));
    background: var(--panel);
    box-shadow:
        0 4px 12px -4px color-mix(in srgb, var(--text) 18%, transparent),
        0 20px 44px -20px color-mix(in srgb, var(--text) 40%, transparent);
    overflow: hidden;
}

/* ── Qidiruv maydoni panel ichida ─────────────────────────────────
 *
 * ═══ NIMA UCHUN PANEL ICHIDA, TASHQARIDA EMAS ═══
 * Ilgari qidiruv ALOHIDA maydon edi (formada, ro'yxat ustida).
 * Mijoz uchun bu ikki qadam: maydonni topib yozish, keyin
 * ro'yxatni ochish.
 *
 * Panel ichida bo'lsa u OCHILGANDA darhol fokus oladi — mijoz
 * ro'yxatni ochib DARHOL yozishni boshlaydi. Bu barcha zamonaviy
 * tanlagichlardagi naqsh. */
.pick-izlash {
    flex: none;
    position: relative;
    padding: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 4%, var(--panel));
}

.pick-izlash input {
    width: 100%;
    padding: 8px 11px 8px 34px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text) 14%, var(--border));
    background: var(--input-bg);
    font-size: 13.5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
}

[dir="rtl"] .pick-izlash input {
    padding: 8px 34px 8px 11px;
    background-position: right 10px center;
}

/* ── Ro'yxat ──────────────────────────────────────────────────── */
.pick-royxat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Ro'yxat oxirida aylantirish SAHIFAGA o'tib ketmasligi kerak. */
    overscroll-behavior: contain;
    list-style: none;
    margin: 0;
    padding: 6px;
}

/* ══════════════════ 28c. BOY QATOR ══════════════════
 *
 * Uch qatlam:
 *   1-qator: ID nishoni + nom + narx
 *   2-qator: chegara va vaqt (kulrang, kichik)
 *   3-qator: xususiyat nishonlari (kafolat, bekor qilish)
 *
 * ═══ NIMA UCHUN NARX BIRINCHI QATORDA VA O'NGDA ═══
 * Mijoz ro'yxatni NARX bo'yicha solishtiradi. Narx ikkinchi
 * qatorda bo'lsa ko'z uni izlashi kerak; o'ng chetda esa u
 * VERTIKAL ustun bo'lib chiqadi va solishtirish oson. */
.pick-item {
    display: grid;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
}

/* ══ 🔴 QATORLAR ORASIDAGI AJRATGICH ══════════════════════════════
 *
 * ═══ EGASINING SHIKOYATI ═══
 * «kategoriya yoki xizmatlar tanlayotganda orasida chiziq turibdi
 *  ajratib turadigan, u oddiy va ko'rimsiz, biroz boshqacharoq
 *  qiling»
 *
 * ═══ ILGARI NIMA BO'LGAN ═══
 *   border-top: 1px solid (7% matn rangi)
 *   border-radius: 0 0 10px 10px
 *
 * Ikki muammo:
 *
 *   1. Chiziq BUTUN kenglikda va bir tekis — u «jadval panjarasi»
 *      ta'sirini beradi. Zamonaviy ro'yxatlarda ajratgich chetlarga
 *      qarab YO'QOLADI: u seziladi, lekin chizilgan ko'rinmaydi.
 *
 *   2. `border-radius: 0 0 10px 10px` birinchidan keyingi HAR
 *      elementning yuqori burchaklarini to'rtburchak qilardi —
 *      hover foni yuqoridan kesilgan bo'lib chiqardi va ro'yxat
 *      «yopishgan bloklar» kabi ko'rinardi.
 *
 * ═══ YECHIM ═══
 * Chegara emas, psevdo-element: chetdan 10px ichkarida, ikki
 * uchida shaffofga o'tadigan gradient. Burchak esa to'liq 10px
 * qoladi, ya'ni hover foni butun qatorni yumaloq qamrab oladi.
 *
 * ═══ NIMA UCHUN GRADIENT SIMMETRIK ═══
 * `to right` FIZIK yo'nalish va arabchada teskari bo'lardi. Lekin
 * gradient ikki uchida bir xil (shaffof → rang → shaffof), ya'ni
 * teskari aylantirilganda KO'RINISHI o'zgarmaydi — RTL uchun
 * alohida qoida kerak emas.
 *
 * ═══ NIMA UCHUN `pointer-events: none` ═══
 * Psevdo-element qatorning ustida turadi. U bosishni ushlab
 * qolsa, qator chetiga bosish ishlamasdi. */
.pick-item + .pick-item { position: relative; }

.pick-item + .pick-item::before {
    content: '';
    position: absolute;
    inset-inline: 10px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--c-primary) 26%, transparent) 20%,
        color-mix(in srgb, var(--c-primary) 26%, transparent) 80%,
        transparent);
}

.pick-item-bosh {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

/* ═══ TURKUM BELGISI — EMOJI YOKI YUKLANGAN RASM ═══
   Ro'yxat qatorida VA tanlangandan keyin tugmada chiziladi
   (`pickIkonka`). Ommaviy katalogdagi `.kat-belgi` bilan bir xil
   maqsad, lekin o'lchamlar boshqa: bu yerda qator zichroq.

   ═══ NIMA UCHUN `align-self: center` ═══
   O'ram `align-items: baseline` — u MATN uchun to'g'ri (ID
   kapsulasi va nom bir chiziqda turadi). Rasmning tayanch chizig'i
   esa uning PASTKI qirrasi, ya'ni baseline'da rasm matndan
   yuqoriga siljib ketardi. */
.pick-belgi {
    flex: none;
    align-self: center;
}

.pick-belgi-rasm {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    /* Admin kvadrat bo'lmagan rasm yuklashi mumkin — `cover` uni
       cho'zmaydi, balki kesadi. */
    object-fit: cover;
}

.pick-belgi-emoji {
    font-size: 15px;
    line-height: 1;
    /* Emoji shriftlari turlicha kenglikda: qatorlar bir-biriga
       nisbatan siljimasligi uchun kenglik QAT'IY. */
    width: 18px;
    text-align: center;
}

/* Tugmadagi belgi — o'ram `align-items: center`, ya'ni siljish
   muammosi yo'q. Faqat matn ellipsisi belgini siqib qo'ymasligi
   kerak. */
.pick-btn > .pick-belgi { margin-inline-end: -2px; }

/* ID nishoni — raqobatchidagi binafsha kapsula. Reseller aynan shu
   raqamni API so'rovida ishlatadi, ya'ni u FUNKSIONAL ma'lumot. */
.pick-id {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
    color: color-mix(in srgb, var(--c-primary) 88%, var(--text));
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.pick-nom {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    /* Xizmat nomlari provayderdan keladi va 100+ belgi bo'lishi
       mumkin. Ikki qatorga sig'adi, uchinchisi kesiladi. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pick-narx {
    flex: none;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: color-mix(in srgb, var(--c-success) 78%, var(--text));
    white-space: nowrap;
}

/* ── Ikkinchi qator: chegara va vaqt ─────────────────────────── */
.pick-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11.5px;
    color: var(--muted);
}

.pick-meta-el {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pick-meta-el svg { flex: none; opacity: .8; }

/* ── Uchinchi qator: xususiyat nishonlari ────────────────────── */
.pick-nishonlar { display: flex; flex-wrap: wrap; gap: 4px; }

.pick-nishon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
    background: color-mix(in srgb, var(--c-success) 12%, transparent);
    color: color-mix(in srgb, var(--c-success) 80%, var(--text));
}

.pick-nishon-info {
    border-color: color-mix(in srgb, var(--c-primary) 30%, transparent);
    background: color-mix(in srgb, var(--c-primary) 11%, transparent);
    color: color-mix(in srgb, var(--c-primary) 84%, var(--text));
}

.pick-nishon-warn {
    border-color: color-mix(in srgb, var(--c-warning) 34%, transparent);
    background: color-mix(in srgb, var(--c-warning) 13%, transparent);
    color: color-mix(in srgb, var(--c-warning) 82%, var(--text));
}

/* ══════════════════ BUYURTMA TANLOV PANELI ══════════════════
 *
 * ═══ EGASINING SO'ROVI ═══
 * «buyurtmalarni click qilib tanlab chiqganda teparoqda yangi bir 2
 *  tugma hosil bo'lsin, bittasida copy id yani raqamlarni nusxalash
 *  degan va supportga to'g'ridan to'g'ri yozish degan»
 *
 * ═══ NIMA UCHUN JADVAL USTIDA, USTIDA SUZMAYDI ═══
 * `position: sticky` bilan panel aylantirganda ham ko'rinib turardi.
 * Lekin u yuqori qator (`.topbar`, `z-index: 20`) ostiga kirib
 * ketardi va mobil ekranda jadvalning yarmini yopardi. Oddiy blok
 * esa hech narsani to'smaydi va tanlov soni baribir ko'rinadi —
 * mijoz tanlaganidan keyin YUQORIGA qaraydi.
 *
 * ═══ NIMA UCHUN BREND TINTI ═══
 * Panel karta ICHIDA turadi. `var(--panel)` bo'lsa u karta foni
 * bilan aynan bir xil bo'lib, «paydo bo'lgan» hissi yo'qolardi —
 * aynan `.yon-tugma` da bo'lgan nuqson. */
.tanlov-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid color-mix(in srgb, var(--c-primary) 28%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
}

.tanlov-son {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    color: var(--muted);
}

.tanlov-son b {
    font-size: 1.05rem;
    color: var(--c-primary);
}

/* ═══ NIMA UCHUN USTUN QAT'IY KENGLIKDA ═══
   Katakcha 19px (global skin). Ustun `width: 1%` bilan eng kichik
   bo'lib qoladi va qolgan joyni ma'lumot ustunlari oladi.
   `text-align: center` — katakcha sarlavha bilan bir chiziqda. */
.tanlov-ustun {
    width: 1%;
    padding-inline-end: 0;
    text-align: center;
}

/* Katakcha jadval katagida `width: 100%` ga cho'zilmasligi kerak —
   `.check-inline` shu uchun bor (izohi 24g bo'limida). Bu yerda
   qo'shimcha chet ham kerak emas. */
.tanlov-ustun .check-inline { margin-inline-end: 0; }

/* ═══ ADMIN QO'YADIGAN TEG OHANGLARI (panel) ═══
 * Ommaviy saytdagi `.site-badge-*` bilan bir xil to'plam, lekin
 * panel o'lchamida. Sinf nomlari `ServiceTagTone::pickClass()` dan
 * keladi.
 *
 * ═══ 🔴 DIQQAT: ASOS SINF YASHIL ═══
 * `.pick-nishon` ning O'ZI yashil (u «Kafolat» uchun yozilgan).
 * Shu sababli NEYTRAL uchun aniq sinf kerak — aks holda kulrang
 * teg yashil chiqardi. Ommaviy saytda esa teskari: `.site-badge`
 * asosi neytral. */
.pick-nishon-neutral {
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    color: var(--muted);
}

.pick-nishon-danger {
    border-color: color-mix(in srgb, var(--c-danger) 34%, transparent);
    background: color-mix(in srgb, var(--c-danger) 12%, transparent);
    color: color-mix(in srgb, var(--c-danger) 82%, var(--text));
}

.pick-nishon-accent {
    border-color: transparent;
    background: var(--site-grad-text);
    /* Oq — gradient to'yingan brend rangida, ya'ni har temada
       o'qiladi. Sabab `.site-badge-accent` izohida. */
    color: #fff;
}

/* ══════════════════ 28d. HOLATLAR ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN IKKI XIL BELGILASH ═══
 * `[aria-selected]` — TANLANGAN element (mijoz avval tanlagan).
 * `[data-faol]`     — KLAVIATURA fokusi (o'q bilan yurilgan joy).
 *
 * Ular BOSHQA narsa: mijoz o'q bilan ro'yxatda yurganda tanlov
 * hali O'ZGARMAYDI — u Enter bosgandan keyin o'zgaradi. Ikkisi
 * bir xil ko'rinsa mijoz «tanladim» deb o'ylab panelni yopardi. */
.pick-item[data-faol] {
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 30%, transparent);
}

.pick-item[aria-selected="true"] {
    background: color-mix(in srgb, var(--c-primary) 9%, transparent);
}

.pick-item[aria-selected="true"] .pick-nom { font-weight: 800; }

/* Tanlangan elementda chapda brend chizig'i — u ro'yxatda
   AYLANTIRILGANDA ham topiladi. */
.pick-item[aria-selected="true"] .pick-id {
    background: var(--site-grad-text);
    color: #fff;
}

@media (hover: hover) {
    .pick-item { transition: background .14s ease; }
    .pick-item:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }

    /* ═══ AJRATGICH HOVER'DA YO'QOLADI ═══
       Fon bilan chiziq bir vaqtda ko'rinsa, hover qilingan qator
       yuqoridan kesilgan bo'lib chiqadi. iOS va macOS ro'yxatlari
       ham shunday ishlaydi: belgilangan qator atrofidagi chiziqlar
       so'nadi.

       IKKI qoida kerak: qatorning O'Z chizig'i (yuqorisidagi) va
       KEYINGI qatorning chizig'i (ya'ni pastdagi). */
    .pick-item:hover::before,
    .pick-item:hover + .pick-item::before { opacity: 0; }

    .pick-item + .pick-item::before { transition: opacity .14s ease; }
}

/* Klaviatura bilan yurilganda ham xuddi shunday — `data-faol`
   sichqonchasiz tanlovni bildiradi. */
.pick-item[data-faol]::before,
.pick-item[data-faol] + .pick-item::before,
.pick-item[aria-selected="true"]::before,
.pick-item[aria-selected="true"] + .pick-item::before { opacity: 0; }

/* ══ 🔴 OCHIQ TANLAGICH QO'SHNI VA PASTKI QATLAMLAR USTIDA ════════
 *
 * `.pick-panel` da `z-index: 60` bor va u kartadan chiqib ketishi
 * KERAK. Nazariy jihatdan bu yetarli: `.card` statik element va
 * pozitsiyalangan, musbat `z-index` li element uning fonidan
 * YUQORIDA chiziladi.
 *
 * Amalda esa egasi ro'yxat keyingi karta ostiga kirib ketishini
 * ko'rdi va bu qoida qo'shildi: ochiq tanlagichli kartani KO'TARISH.
 *
 * ═══ 🔴 SHU QOIDANING O'ZI YANGI NUQSON YASAGAN EDI ═══
 * `position: relative` + musbat `z-index` — bu STACKING KONTEKST.
 * Ya'ni bu qoida kartani ko'targani bilan bir vaqtda ichidagi
 * `.pick-panel` ni QAMAB qo'ydi: uning `z-index: 60` i endi faqat
 * karta ICHIDA ishlaydi, ildizda esa panel KARTANING darajasida
 * chiziladi.
 *
 * Daraja 30 edi, `.tabbar` esa 40 — natijada ≤900px da ochiq
 * ro'yxatning PASTKI QISMI pastki navigatsiya ortida qolardi:
 * ko'rinmasdi va bosilmasdi. Hisob (360×640 telefon): panel
 * `max-height: min(52vh, 340px)` = 333px, tabbar bandi 84px, ya'ni
 * tugma ekran tepasidan ~215px dan pastda bo'lsa ro'yxat kesilardi.
 *
 * Daraja 50 ga ko'tarildi: `.tabbar` (40) va `.reklama` (45) dan
 * YUQORI, `.topbar`/`.site-head` (55) va menyu qatlamlaridan PAST.
 * To'liq narvon fayl boshidagi jadvalda.
 *
 * NIMA UCHUN tabbar'ni 30 dan pastga tushirish EMAS: tabbar sahifa
 * mazmuni ustida turishi SHART, aks holda uzun jadval qatorlari
 * navigatsiyani bosib ketadi.
 *
 * `:has()` ishlatiladi, JS EMAS: holat allaqachon DOM da
 * (`data-ochiq` atributi JS tomonidan qo'yiladi) va CSS uni
 * o'qishi mumkin — qo'shimcha hodisa tinglovchisi kerak emas. */
.card:has(.pick[data-ochiq]),
.card:has(.lang-pick[open]) {
    position: relative;
    z-index: 50;
}

/* Bo'sh natija — sababi bilan. */
.pick-bosh {
    margin: 0;
    padding: 22px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ══════════════════ 28e. GURUH SARLAVHASI ══════════════════
 *
 * Kategoriya ro'yxatida platformalar bo'yicha guruhlash uchun
 * (`<optgroup>` ning o'rnini bosadi). */
.pick-guruh {
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 60%, var(--c-primary));
}

/* ══════════════════ 28f. OCHILISH ANIMATSIYASI ══════════════════ */

@media (prefers-reduced-motion: no-preference) {
    .pick[data-ochiq] .pick-panel {
        animation: panelDropIn .16s cubic-bezier(.22, .61, .36, 1) both;
    }
}

/* ══════════════════ 28g. TELEFONDA ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN TELEFONDA PANEL EKRANNI EGALLAYDI ═══
 * 360px ekranda 420px balandlikdagi panel tugma ostida ochilsa,
 * u klaviatura chiqqanda (qidiruv maydoni fokus oladi) 100px ga
 * qisqarardi — ya'ni bir yarim qator ko'rinardi.
 *
 * Yechim: panel pastdan chiqadigan varaqqa aylanadi. Bu telefonda
 * standart naqsh (tanlash oynasi) va klaviatura undan pastda
 * qoladi.
 *
 * Qoida narvonning 620px pog'onasida — barcha `max-width`
 * so'rovlari BITTA joyda va kattadan kichikka tartibda bo'lishi
 * kerak (sabab narvon boshidagi izohda). */

/* ══════════════════ 28h. PLATFORMA TEZ TANLASH CHIPLARI ══════════════════
 *
 * ═══ EGASINING FIKRI ═══
 * «TELEGRAM LOGOSI VA YONIDA TELEGRAM deb yozib qo'yilsa
 *  foydalanuvchi telegram deb yozib o'tirmay uni ustiga bossa
 *  avtomatik telegramga aloqador xizmatlar chiqadi»
 *
 * ═══ NIMA UCHUN LOGO MATNDAN OLDIN ═══
 * Brend logosi matndan TEZROQ tanib olinadi — u shakl va rang,
 * matn esa o'qishni talab qiladi. Ko'z «Telegram» so'zini
 * o'qishdan oldin qog'ozsimon samolyotni ko'radi.
 *
 * ═══ NIMA UCHUN `<button>`, `<a>` EMAS ═══
 * Chip sahifani QAYTA YUKLAMAYDI — u kategoriya ro'yxatini
 * filtrlaydi. `<a href="#">` bo'lsa brauzer manzilga `#` qo'shardi
 * va «orqaga» tugmasi buzilardi.
 *
 * `aria-pressed` — bu O'CHIRIB-YOQILADIGAN tugma. Ekran o'quvchi
 * «Telegram, bosilgan» deb aytadi. */
.plat-chips {
    display: flex;
    flex-wrap: wrap;
    /* `.filtr-chips` bilan bir xil sabab: 36px nishonlar orasida 6px
       oraliq noto'g'ri platforma tanlanishiga olib kelardi. */
    gap: 8px;
}

.plat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 7px+7px ichki bo'shliq = ~32px balandlik. Filtr chiplari bilan
       bir tekislikda bo'lishi uchun 36px ga ko'tariladi — ular ayni
       panelda yonma-yon turadi va turli balandlik qiyshiq ko'rinardi.

       `min-width: 0` + `overflow: hidden`: platforma nomi ADMIN
       kiritadigan matn, uzunligi kafolatlanmagan. Himoya faqat bitta
       chip qatorga sig'masa ishga tushadi. */
    min-height: 36px;
    min-width: 0;
    overflow: hidden;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text) 13%, var(--border));
    background: color-mix(in srgb, var(--text) 3%, var(--panel));
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.plat-chip-ico {
    display: inline-flex;
    flex: none;
    color: color-mix(in srgb, var(--c-primary) 76%, var(--muted));
}

/* ═══ NIMA UCHUN SANOQ KO'RSATILADI ═══
   «Telegram 12» — mijoz platformada qancha kategoriya borligini
   BOSISHDAN OLDIN biladi. Bir kategoriyali platformani bosish
   arzimasligini ko'radi. */
.plat-chip-son {
    flex: none;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
}

/* Bosilgan chip — to'q gradient. Bu YAGONA tanlov (radio kabi), shu
   sababli kontrast maksimal bo'lishi kerak. */
.plat-chip[aria-pressed="true"] {
    background: var(--site-grad-text);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--c-primary) 70%, transparent);
}

.plat-chip[aria-pressed="true"] .plat-chip-ico { color: #fff; }

.plat-chip[aria-pressed="true"] .plat-chip-son {
    background: color-mix(in srgb, #fff 26%, transparent);
    color: #fff;
}

@media (hover: hover) {
    .plat-chip { transition: border-color .18s ease, background .18s ease, translate .18s ease; }

    .plat-chip[aria-pressed="false"]:hover {
        border-color: color-mix(in srgb, var(--c-primary) 45%, var(--border));
        background: color-mix(in srgb, var(--c-primary) 9%, var(--panel));
        translate: 0 -1px;
    }
}

.plat-chip:active { translate: 0 1px; }

/* Telefonda chiplar gorizontal aylanadi — sabab 26t bo'limidagi
   filtr chiplari bilan AYNI (besh qatorga tushib ketmasligi
   uchun). Qoida narvonning 620px pog'onasida. */

/* ══════════════════ 28i. XUSUSIYAT PLITKALARI ══════════════════
 *
 * ═══ EGASINING SHIKOYATI (4-rasm) ═══
 * «garantiya bor yoq va shunga o'xshash malumotlar alohida chiroyli
 *  qilib ko'rsatilgan»
 *
 * Raqobatchida har xususiyat O'Z plitkasida: yorliq ustida, ostida
 * ikonka bilan qiymat. Bizda esa `dt`/`dd` juftliklari bir ustunda
 * yopishgan qatorlar edi — ular «jadval» ko'rinardi.
 *
 * ═══ 🔴 NIMA UCHUN IKKI USTUN ═══
 * Xulosa ustuni 320px. Bir ustunda yettita plitka ~600px balandlik
 * olardi va summa kartasi ekrandan CHIQIB ketardi (u yopishqoq,
 * ya'ni ekranga sig'ishi kerak).
 *
 * Ikki ustunda esa to'rt qator — sig'adi. Bundan tashqari
 * plitkalar juft-juft SOLISHTIRILADI: narx/vaqt, min/max,
 * kafolat/bekor qilish. Bu tasodifiy emas — HTML tartibida shunday
 * qo'yilgan.
 *
 * ═══ NIMA UCHUN `minmax(0, 1fr)`, `1fr` EMAS ═══
 * `1fr` = `minmax(auto, 1fr)` va `auto` mazmun kengligini
 * hisoblaydi. Uzun qiymat («12 345 678 so'm») ustunni cho'zib
 * plitkani to'rdan chiqarardi. `minmax(0, ...)` bu tuzoqni
 * yopadi. */
.svc-plitkalar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 12px;
}

.svc-plitka { min-width: 0; }

.svc-plitka dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
    /* Yorliq bir qatorda qolishi kerak: «O'RTACHA YETKAZISH» ikki
       qatorga bo'linsa qo'shni plitka bilan tekislanmasdi. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.svc-plitka dd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text) 10%, var(--border));
    background: color-mix(in srgb, var(--text) 3%, var(--panel));
    font-size: 12.5px;
    font-weight: 700;
    min-width: 0;
}

.svc-plitka dd > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.svc-plitka-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    color: var(--c-primary);
}

/* ═══ HOLAT RANGLARI ═══
   «Bor» yashil, «yo'q» kulrang. Ilgari ikkisi bir xil edi va mijoz
   javobni O'QISHI kerak edi. Rang esa bir qarashda aytadi.

   Rang YAGONA signal EMAS: matn («bor» / «yo'q») ham bor. Rang
   ko'rmaydigan foydalanuvchi matnni o'qiydi. */
.svc-plitka dd[data-holat="bor"] {
    border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
    background: color-mix(in srgb, var(--c-success) 9%, var(--panel));
    color: color-mix(in srgb, var(--c-success) 80%, var(--text));
}

.svc-plitka dd[data-holat="bor"] .svc-plitka-ico {
    background: color-mix(in srgb, var(--c-success) 16%, transparent);
    color: var(--c-success);
}

.svc-plitka dd[data-holat="yoq"] { color: var(--muted); }

.svc-plitka dd[data-holat="yoq"] .svc-plitka-ico {
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    color: var(--muted);
}

/* Xulosa ustuni bir ustunga tushganda plitkalar keng joyga chiqadi
   — qoida narvonning 980px pog'onasida (barcha `max-width`
   so'rovlari BITTA narvonda bo'lishi kerak). */

/* ══════════════════ 28j. SAHIFA SARLAVHASI VA MAQSADI ══════════════════
 *
 * ═══ 🔴 EGASINING SHIKOYATI ═══
 * «/deposit bolimiga otsam "Balansni to'ldirish" degan so'z turibdi
 *  tepada, bunga ham etibor bermagansiz»
 *
 * Muammo: sarlavha YON MENYUDAGI havola bilan AYNAN bir xil edi.
 * Mijoz «Balansni to'ldirish» ni bosib, yana «Balansni to'ldirish»
 * ni ko'rardi — sahifa hech qanday YANGI ma'lumot bermasdi.
 *
 * Yaxshi sahifa sarlavhasi ikki qatlam: NOM (qaysi sahifa) va
 * MAQSAD (bu yerda nima qilinadi, qanday ishlaydi).
 *
 * ═══ NIMA UCHUN `flex: 1` O'RAMDA ═══
 * Ilgari `flex: 1` `h1` da edi (poydevor, 3-bo'lim). Endi o'ram
 * o'sadi va sarlavha uning ichida to'liq kenglikda. `min-width: 0`
 * — uzun sarlavha hamyonni surib yubormasligi uchun.
 *
 * ═══ 🔴 NIMA UCHUN MAQSAD QATORI YOPISHQOQ QATORDAN CHIQARILDI ═══
 * Ilgari u `.topbar-bosh` ichida, sarlavha ostida turgan. Bu
 * HAQIQIY nosozlik bergan: buyurtma va to'lov sahifalarida mazmun
 * ustma-ust tushgan.
 *
 * Zanjir shunday edi:
 *   1. `.topbar` — yopishqoq va `flex-wrap` bilan, ya'ni balandligi
 *      MAZMUNGA bog'liq
 *   2. maqsad qatori 81–96 belgi (eng uzuni tiket sahifasida) va
 *      panelda unga ~446px joy tegadi, ya'ni u IKKI qatorga
 *      bo'linadi
 *   3. natijada qator balandligi 65px dan 94px ga chiqadi
 *   4. `.panel-form-aside` esa 78px da yopishib turadi — ya'ni
 *      qator OSTIDA qoladi va uning tepasi ko'rinmaydi
 *
 * Qator balandligini o'lchash CSS bilan mumkin emas, shu sababli
 * tuzatish sababni olib tashlaydi: yopishqoq qatorda faqat
 * O'ZGARMAS balandlikdagi boshqaruvlar qoladi (sarlavha, hamyon,
 * asboblar — hammasi bir qatorda 38px), maqsad qatori esa qator
 * OSTIGA, oddiy oqimga chiqadi.
 *
 * Ikki qo'shimcha foyda:
 *   - aylantirilganda yopishqoq qator PASTROQ bo'ladi va mazmun
 *     uchun ko'proq joy qoladi
 *   - maqsad qatori endi telefonda ham ko'rinadi (ilgari u 620px
 *     pog'onasida yashirilardi, chunki qatorda joy yo'q edi) */
.topbar-bosh {
    flex: 1;
    min-width: 160px;
}

/* ══════════════════ 28k. SAHIFA MAQSADI ══════════════════
 *
 * Yopishqoq qator OSTIDA, mazmun USTIDA turadigan tushuntirish.
 * Nima uchun u qatordan chiqarilgani — 28j izohida. */
.panel-lead {
    /* `.topbar` ning pastki bo'shligi 20px. Undan bir qismi
       qaytarib olinadi: tushuntirish sarlavhaga TEGISHLI
       ko'rinishi kerak, keyingi kartaga emas. */
    margin: -8px 0 var(--s-3);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
    /* Sarlavhadagi brend chizig'i (3px kenglik + 10px oraliq)
       bilan tekislanadi — tushuntirish sarlavha MATNI ostida
       boshlanadi, chiziq ostida emas. */
    padding-inline-start: 13px;
    /* Juda uzun qatorda ko'z keyingi qator boshini topa olmaydi.
       74ch — o'qish uchun qulay yuqori chegara. Endi bu qiymat
       yopishqoq qator balandligiga TA'SIR QILMAYDI, shu sababli
       ilgarigi 64ch dan kengroq bo'lishi mumkin. */
    max-width: 74ch;
}

/* ══════════════════════════════════════════════════════════════════
 * 29. YULDUZLI BAHO (`.baho`)
 *
 * Tiket yopilgandan keyin mijoz xizmatni 1..5 ga baholaydi. Ilgari
 * bu ochiladigan ro'yxat edi («1 / 5» ... «5 / 5») va uch harakat
 * talab qilardi.
 *
 * ═══ 🔴 QANDAY ISHLAYDI (JS YO'Q) ═══
 * DOM tartibi TESKARI: 5, 4, 3, 2, 1. Sabab — CSS da faqat KEYINGI
 * qardoshni tanlash mumkin (`~`), oldingisini emas. «3 bosilganda
 * 1, 2, 3 to'lsin» degan qoida uchun 1 va 2 DOM da 3 dan KEYIN
 * turishi shart.
 *
 * Ko'z uchun tartibni `row-reverse` tiklaydi: chapdan o'ngga 1..5.
 *
 * Ya'ni butun mantiq CSS da — JS o'chirilgan brauzerda ham baho
 * ishlaydi.
 * ══════════════════════════════════════════════════════════════════ */

.baho {
    display: flex;
    /* Teskari tartib — sabab yuqorida. */
    flex-direction: row-reverse;
    /* `flex-end` bilan birga: teskari yo'nalishda bu CHAP chekka. */
    justify-content: flex-end;
    gap: 2px;
    margin-top: 2px;
}

/* ═══ NIMA UCHUN `sr-only` EMAS, `opacity: 0` EMAS ═══
   Radio KO'RINMASLIGI kerak, lekin FOKUS OLISHI kerak: klaviatura
   foydalanuvchisi o'qlar bilan yuradi va halqa `<label>` da
   ko'rinadi (`:focus-visible + label` qoidasi pastda).

   `display: none` bo'lsa element fokus tartibidan butunlay
   chiqardi va guruh klaviaturaga yopiq bo'lardi. */
.baho input {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    opacity: 0;
    pointer-events: none;
}

.baho label {
    /* ═══ NIMA UCHUN 44px ═══
       Barmoq uchun eng kichik qulay nishon. Yulduz o'zi 26px,
       qolgani — bosish maydoni. Ilgari yozilgan `.field label`
       qoidasi (qalin, kichik shrift) bu yerga TEGMAYDI, chunki
       u faqat matnli yorliq uchun edi — shu sababli o'lchamlar
       to'liq qayta belgilanadi. */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
    border-radius: 12px;
    /* Bo'sh yulduz — chegara rangida, ya'ni «hali tanlanmagan». */
    color: color-mix(in srgb, var(--text) 22%, var(--border));
    transition: color .16s ease, transform .16s cubic-bezier(.34, 1.56, .64, 1),
                background .16s ease;
}

.baho label svg {
    width: 26px;
    height: 26px;
    /* Yulduz TO'LDIRILADI (chizilmaydi): to'liq shakl kichik
       o'lchamda ham aniq o'qiladi, ingichka chiziq esa yo'qoladi. */
    fill: currentColor;
    stroke: none;
    /* `block` — `<svg>` inline element va pastida 4px bo'sh joy
       qoldirardi, ya'ni yulduz katakda markazdan yuqori turardi. */
    display: block;
}

/* ═══ TANLANGAN VA UNDAN OLDINGILAR ═══
   `+ label` — o'zining yorlig'i. `~ label` — DOM da keyingilar,
   ya'ni KICHIKROQ raqamlar, ya'ni ko'zda CHAPDAGILAR. */
.baho input:checked + label,
.baho input:checked ~ label {
    /* Oltin rang temadan KELMAYDI — baho universal belgi va u
       brend rangiga bog'liq bo'lmasligi kerak. Aks holda ko'k
       temada «ko'k yulduz» chiqib, mijoz uni to'ldirilgan deb
       tanimasdi. */
    color: #f5a524;
}

/* Sichqoncha ustida — xuddi shu mantiq, lekin `:hover` bo'yicha.
   `.baho:hover` shartisiz yozilsa, sichqoncha guruhdan chiqqanda
   ham qoida qolardi. */
.baho:hover label:hover,
.baho:hover label:hover ~ label {
    color: #f5a524;
}

.baho label:hover {
    background: color-mix(in srgb, #f5a524 14%, transparent);
    transform: translateY(-2px) scale(1.06);
}

.baho label:active { transform: translateY(0) scale(.96); }

/* ═══ 🔴 KLAVIATURA HALQASI ═══
   Radio ko'rinmaydi, ya'ni brauzerning o'z halqasi HAM ko'rinmaydi.
   Halqa QO'LDA yorliqqa ko'chiriladi — bo'lmasa klaviatura
   foydalanuvchisi qaysi yulduzda turganini bilmasdi. */
.baho input:focus-visible + label {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
 * 30. `.pick` NI YONMA-YON QATORDA
 *
 * `.inline-controls` ichida ilgari faqat `select` cho'zilardi
 * (`flex: 1`). Endi u `.pick` o'ramiga o'ralgan va `select` o'ram
 * ichida yashirin — ya'ni cho'zilishi kerak bo'lgan element
 * O'RAMNING O'ZI.
 *
 * ═══ 🔴 NIMA UCHUN FAQAT `.inline-controls` ═══
 * `.field` oddiy BLOK (flex emas) — u yerda `.pick` kengligini
 * o'zi to'ldiradi va `flex: 1` hech narsa qilmaydi. Bundan
 * yomoni: agar `.field` biror joyda ustunli flex bo'lsa, `flex: 1`
 * o'ramni BALANDLIGI bo'yicha cho'zib, tugmani noto'g'ri
 * o'lchamga keltirardi. Shu sababli qoida faqat haqiqiy QATOR
 * o'ramiga beriladi.
 *
 * `min-width: 0` — flex ichidagi ma'lum tuzoq: usiz o'ram ichidagi
 * uzun matn uni siqilishga qo'ymaydi va tugma qatordan chiqardi.
 * ══════════════════════════════════════════════════════════════════ */

.inline-controls > .pick { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════
 * 31. SEGMENTLI BOSHQARUV (`.segment`)
 *
 * Ikki-to'rt variantli tanlov uchun: ko'rinish rejimi (tizim /
 * yorug' / to'q) kabi. Ochiladigan ro'yxat o'rniga hamma variant
 * BIR VAQTDA ko'rinadi.
 *
 * ═══ QACHON `.segment`, QACHON `.pick` ═══
 *   `.segment` — 2..4 variant, qisqa nomlar, QIYOSIY tanlov
 *                («yorug' yoki to'q?»).
 *   `.pick`    — 5+ variant yoki uzun nomlar (xizmat, valyuta).
 *
 * Chegara qat'iy emas, lekin 4 dan oshsa segmentlar siqilib matni
 * kesiladi — shu joyda `.pick` ga o'tish kerak.
 *
 * ═══ NIMA UCHUN `radio`, TUGMA EMAS ═══
 * JS KERAK EMAS: forma radio qiymatini o'zi yuboradi. Klaviaturada
 * o'qlar ishlaydi, ekran o'quvchi «3 dan 2-si» deb o'qiydi.
 * ══════════════════════════════════════════════════════════════════ */

.segment {
    display: flex;
    gap: 4px;
    /* ═══ NIMA UCHUN ICHKI TO'LDIRISH ═══
       Tanlangan segment CHO'KMA emas, KO'TARILGAN plita bo'lib
       ko'rinadi. Buning uchun uning atrofida 4px joy bo'lishi
       kerak — aks holda plita o'ramning chegarasiga tegib
       «tugma» emas, «bo'lim» bo'lib ko'rinardi. */
    padding: 4px;
    /* Chuqurcha: o'ram fon KARTADAN pastroq, tanlangan plita esa
       tepasida. Ikki pog'ona farq tanlovni aniq ko'rsatadi. */
    background: color-mix(in srgb, var(--text) 6%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--text) 11%, var(--border));
    border-radius: 14px;
    margin-top: 2px;
}

/* Radio ko'rinmaydi, lekin FOKUS OLADI — sabab `.baho` da
   yozilgan (29-bo'lim). */
.segment input {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    opacity: 0;
    pointer-events: none;
}

.segment label {
    /* Teng ulush: uch variant uch teng bo'lak. `min-width: 0` —
       usiz uzun nom («Tizim sozlamasi») ulushni cho'zib yuborardi. */
    flex: 1 1 0;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    /* ═══ NIMA UCHUN `wrap` ═══
       Telefonda uchta «ikonka + nom» bir qatorga sig'masligi mumkin.
       `wrap` bilan nom ikonka OSTIGA tushadi va matn KESILMAYDI.
       Media so'rov kerak emas — o'lchov o'zidan hal bo'ladi. */
    flex-wrap: wrap;
    gap: 7px;

    /* `.field label` qoidasi (12.5px, 700, margin-bottom: 6px) shu
       yerga ham tushadi — ATAYLAB qayta belgilanadi. */
    margin: 0;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;

    cursor: pointer;
    border-radius: 11px;
    color: var(--muted);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.segment label svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.segment label:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
}

/* ═══ TANLANGAN SEGMENT ═══
   Uch signal bir vaqtda: fon YORUG'ROQ (karta darajasi), matn
   TO'QROQ, soya KO'TARILGAN. Bittasi yetmaydi — masalan faqat fon
   bo'lsa to'q temada farq sezilmasdi. */
.segment input:checked + label {
    background: var(--panel);
    color: var(--text);
    font-weight: 700;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--text) 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

.segment input:focus-visible + label {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
}


/* ══════════════════ 30. REKLAMA KARTASI ══════════════════
 *
 * ═══ 🔴 NIMA UCHUN MODAL EMAS ═══
 * Egasining talabi aniq edi: reklama chiqqanda foydalanuvchi saytni
 * ishlatishda davom etsin — login/parol tersin, tugma bossin.
 *
 * Shu sababli orqa fon (backdrop) YO'Q va karta hech narsani
 * to'smaydi. U shunchaki ekranga «yopishib» turadi.
 *
 * ═══ NIMA UCHUN `z-index: 60` ═══
 * Yon menyu pardasi 40, ochiladigan ro'yxatlar 30. Reklama ulardan
 * yuqorida turishi kerak, lekin `2147483647` kabi qiymat KERAK EMAS:
 * u keyingi elementni yozganda «yana kattaroq son» poygasini
 * boshlaydi. 60 — joyi bo'sh va tartibda.
 *
 * Mobil qoidalar narvonning 600px pog'onasida (fayl oxirida) —
 * barcha `max-width` so'rovlari BITTA joyda bo'lishi kerak. */
/* ═══ 🔴 EGASINING SHIKOYATI: KARTA JUDA «QUTI» ═══
   «reklamalar adashmasam to'rtburchak oynada chiqmoqda, chekkalari
    biroz egilgan va chiroyliroq fonda yoki shunga o'xshash bo'lsa
    yaxshi edi»

   ═══ NIMA UCHUN `--site-radius`, `--r-3` EMAS ═══
   `--r-3` — PANEL o'lchovi (zich ma'lumot uchun kichik burchak).
   Reklama esa marketing kartasi va u LANDING tilida gapirishi
   kerak — `--site-radius` (16px) aynan shu maqsad uchun bor
   (izohi tokenlar bo'limida).

   ═══ NIMA UCHUN FON IKKI QATLAM ═══
   Yalang `var(--panel)` karta fonini SAHIFA kartalari bilan aynan
   bir xil qiladi, ya'ni reklama «sayt bo'lagi» kabi ko'rinadi va
   e'tibor tortmaydi.

   Endi ustiga brend rangining juda ingichka tinti qo'yiladi.
   `color-mix` ishlatilgani uchun u HAR temada o'sha temaning
   rangini oladi — qat'iy hex yozilsa 12 temada 12 marta tuzatish
   kerak bo'lardi.

   Pastda `var(--panel)` qatlami QOLADI: tint shaffof bo'lsa
   ommaviy sahifada orqadagi mazmun ko'rinib, matn o'qilmasdi.

   ═══ 🔴 NIMA UCHUN YUQORIDA URG'U CHIZIG'I YO'Q ═══
   Birinchi urinishda kartaning tepasiga gradient chiziq
   qo'yilgan edi. Ikki yo'l ham ishlamadi:

     - `border-image` spetsifikatsiya bo'yicha `border-radius` ni
       BEKOR qiladi, ya'ni karta yana o'tkir to'rtburchak bo'lardi —
       aynan tuzatilayotgan nuqson qaytardi
     - fon qatlami sifatida qo'yilsa, `.reklama-rasm` kartaning
       BIRINCHI farzandi bo'lgani uchun uni bosib ketardi; ko'rinishi
       uchun `padding-top` kerak bo'lardi va u rasmning yuqori
       burchaklarini yumaloqlikdan chiqarardi

   Chuqurlik o'rniga SOYAGA brend nuri qo'shildi: u rasm bilan
   to'qnashmaydi va kartani fondan ko'tarib turadi. */
.reklama {
    position: fixed;
    /* ═══ 🔴 NIMA UCHUN 45, ILGARI 60 EDI ═══
       60 — `.side` (yon menyu) bilan AYNAN bir xil qiymat edi. Teng
       `z-index` da DOM tartibi hal qiladi va reklama menyudan KEYIN
       chaqiriladi (`layouts/panel.blade.php` da menyu 199-qatorda,
       reklama 1593-da). Natijada yon menyu ochilganda parda hamma
       narsani qoraytirardi, LEKIN reklama yorqin holda menyu USTIDA
       qolardi. ≤600px da reklama butun kenglikni egallagani uchun u
       aynan menyuning pastki qismini (`.side-user`, `.side-logout`)
       yopardi.

       45 — parda (58), menyu (60) va yopishqoq qator (55) dan PAST;
       `.tabbar` (40) dan yuqori. Ochiq tanlagich (50) dan ham past:
       foydalanuvchining FAOL harakati passiv e'londan ustun.
       To'liq narvon fayl boshidagi jadvalda. */
    z-index: 45;
    width: min(340px, calc(100vw - 2 * var(--s-3)));
    background:
        /* Ingichka brend tinti — kartani sahifa kartalaridan
           ajratadi. `color-mix` har temada o'sha temaning rangini
           oladi; qat'iy hex yozilsa 12 temada qo'lda tuzatish
           kerak bo'lardi. */
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--c-primary) 10%, transparent),
            color-mix(in srgb, var(--c-secondary) 6%, transparent) 55%,
            transparent 85%
        ),
        /* Asos SHAFFOF BO'LMASLIGI shart: aks holda orqadagi sahifa
           matni ko'rinib reklama o'qilmasdi. */
        var(--panel);
    border: 1px solid color-mix(in srgb, var(--c-primary) 20%, var(--border));
    border-radius: var(--site-radius);
    /* Tema soyasi + brend nuri. Nur juda past to'yinganlikda:
       kuchli bo'lsa karta «yonayotgan» ko'rinib, mazmundan
       e'tiborni tortardi. */
    box-shadow:
        var(--lift-3),
        0 8px 30px color-mix(in srgb, var(--c-primary) 14%, transparent);
    overflow: hidden;

    /* ═══ NIMA UCHUN `animation`, `transition` EMAS ═══
       Karta DOM da `hidden` bilan turadi va JS uni ko'rsatadi.
       `transition` boshlang'ich holatni talab qiladi, `hidden` esa
       elementni butunlay chiqarib tashlaydi — o'tish ishlamasdi.
       Animatsiya esa ko'rinish paytida bir marta ishlaydi. */
    animation: reklamaKir .26s cubic-bezier(.2, .8, .2, 1);
}

/* `[hidden]` ni KUCHAYTIRISH kerak: `.reklama` da `position: fixed`
   bor va ba'zi brauzerlarda u `display: none` ni bosib o'tadi. */
.reklama[hidden] { display: none !important; }

@keyframes reklamaKir {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* ── Joylashuv ─────────────────────────────────────────────────────
   `inset-inline` ishlatiladi, `left/right` emas: arabcha (RTL) tilda
   «chap» va «o'ng» almashadi va reklama noto'g'ri tomonda chiqardi. */
.reklama--center {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    /* Markazda `transform` joylashuv uchun band, shuning uchun
       animatsiya faqat shaffoflikni o'zgartiradi. */
    animation-name: reklamaKirMarkaz;
}

@keyframes reklamaKirMarkaz {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reklama--center-left {
    inset-block-start: 50%;
    inset-inline-start: var(--s-4);
    transform: translateY(-50%);
}

.reklama--center-right {
    inset-block-start: 50%;
    inset-inline-end: var(--s-4);
    transform: translateY(-50%);
}

.reklama--top-left {
    inset-block-start: var(--s-4);
    inset-inline-start: var(--s-4);
}

.reklama--top-right {
    inset-block-start: var(--s-4);
    inset-inline-end: var(--s-4);
}

.reklama--bottom-left {
    inset-block-end: var(--s-4);
    inset-inline-start: var(--s-4);
}

.reklama--bottom-right {
    inset-block-end: var(--s-4);
    inset-inline-end: var(--s-4);
}

/* ── Yopish tugmasi ────────────────────────────────────────────────
   Rasm ustida ham, oq fon ustida ham ko'rinishi kerak, shuning uchun
   o'z foni bor.

   ═══ 🔴 NIMA UCHUN 36px, ILGARI 30px EDI ═══
   Bu butun saytda eng kichik bosish sohasi edi va u eng NOQULAY
   joyda turadi: uning ostidagi hamma narsa reklamaning HAVOLASI.
   Ya'ni 30px ga tegmasa barmoq reklamani OCHADI — mijoz e'lonni
   yopmoqchi bo'lib uni bosgan bo'lib qoladi.

   36px — sarlavhadagi boshqa doira tugmalar (`.ikon-btn`,
   `.qongiroq`) bilan bir o'lchov, ya'ni yangi qiymat kiritilmaydi.
   Kartaning o'zi 340px, tugma esa burchakda — joy muammosi yo'q. */
.reklama-yop {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    backdrop-filter: blur(4px);
    color: var(--text);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.reklama-yop:hover {
    background: var(--panel);
    color: var(--c-danger);
}

.reklama-yop svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ── Mazmun ────────────────────────────────────────────────────── */
.reklama-rasm {
    display: block;
    width: 100%;
    /* Balandlik CHEKLANGAN: admin katta rasm yuklasa karta butun
       ekranni egallab, yopish tugmasi ko'rinmay qolardi. */
    max-height: 180px;
    object-fit: cover;
}

.reklama-ich {
    padding: var(--s-4);
    display: grid;
    gap: var(--s-2);
}

.reklama-nom {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.reklama-izoh {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--muted);
}

.reklama-tugma {
    margin-top: var(--s-1);
    justify-self: start;
}


/* ══════════════════════════════════════════════════════════════════
 * MOSLASHUV NARVONI (7 pog'ona)
 *
 * ═══ NIMA UCHUN KO'P POG'ONA ═══
 * Ilgari uch pog'ona bor edi (980 / 900 / 720 / 420) va oralarda
 * "cho'zilgan" holatlar qolardi: 1000-1200px da qahramon bo'lakning
 * ikki ustuni siqilardi, 760-900px da kartalar juda tor bo'lib
 * matn ikki harfdan bo'linardi.
 *
 * ═══ 🔴 NIMA UCHUN `auto-fit` YETMAYDI ═══
 * Kartalar `repeat(auto-fit, minmax(230px, 1fr))` ishlatadi va u
 * ko'p holatda yaxshi ishlaydi. Lekin `auto-fit` faqat KENGLIKNI
 * biladi — matn uzunligini bilmaydi. 6 kartali to'rda 900px da u
 * uch ustun yasaydi va har karta 280px bo'ladi; sarlavha
 * «Bo'lib yuborish (drip-feed)» esa u yerga sig'may uch qatorga
 * bo'linadi va karta balandligi ikki barobar oshadi.
 *
 * Shu sababli aniq pog'onalarda ustun soni QO'LDA belgilanadi.
 *
 * ═══ 🔴 TARTIB QOIDASI (buzilsa test yiqiladi) ═══
 * Barcha `max-width` so'rovlari SHU narvonda va KATTADAN KICHIKKA
 * bo'lishi SHART.
 *
 * Sabab: `@media` selektor aniqligiga hech narsa QO'SHMAYDI — u
 * shunchaki shart. Ikki qoida bir xil selektorga tegsa va aniqligi
 * teng bo'lsa, faylda KEYINGI turgani g'olib bo'ladi.
 *
 * 380px telefonda `max-width: 900` ham, `max-width: 1100` ham
 * ROST. Agar 1100 bloki keyinroq tursa, u 900 blokini bosib
 * o'tadi va telefon "kichik noutbuk" qoidalarini oladi. Bu
 * loyihada aynan shu xato bo'lgan: telefonda kartalar bir ustunga
 * tushmadi va matn harf-harf bo'lindi (docs/09 §35b).
 *
 * Kichikroq pog'ona KEYINROQ turganda u doim g'olib bo'ladi.
 *
 * YANGI qoida kerak bo'lsa — mavjud pog'onaga QO'SHILADI. Fayl
 * o'rtasiga yangi `@media` bloki yozilMAYDI.
 *
 * `ThemeSystemTest` buni tekshiradi (izohlar hisobga olinmaydi).
 *
 * Pog'onalar:
 *   1280  katta noutbuk
 *   1100  kichik noutbuk
 *    980  planshet gorizontal — public burger menyu
 *    900  planshet vertikal — panel `.tabbar`
 *    760  katta telefon gorizontal
 *    720  o'rta
 *    620  kirish tugmalari menyuga ko'chadi
 *    600  telefon — auth kartasi bir ustun
 *    420  kichik telefon
 *    360  eng kichik (iPhone SE)
 * ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
 * MOSLASHUV NARVONI SHU YERDA — FAYL OXIRIDA.
 *
 * ═══ 🔴 NIMA UCHUN OXIRIDA, O'RTASIDA EMAS ═══
 * Narvon ilgari faylning o'rtasida (~2350-qator) turgan va undan
 * KEYIN ~6800 qator panel qoidasi bor edi.
 *
 * `@media` selektor aniqligiga HECH NARSA qo'shmaydi — u faqat
 * shart. Ya'ni narvondan keyin ayni selektor va ayni xossa qayta
 * e'lon qilinsa, narvondagi qiymat HECH QACHON qo'llanmaydi.
 *
 * O'lchangan natija: narvonning 30 e'loni O'LIK edi. Jumladan:
 *
 *   ≤900  .side          display: none   ← .side display: flex bosardi
 *   ≤1100 .panel-form    bir ustun       ← ikki ustun bosardi
 *   ≤1100 .panel-form-aside  static      ← sticky bosardi
 *   ≤620  .pick-panel    telefon varag'i ← ochiluvchi ro'yxat bosardi
 *   ≤900  .topbar        12px bo'shliq   ← 18px bosardi
 *
 * Ya'ni panelning MOBIL QATLAMI butunlay ishlamayotgan edi: yon
 * menyu telefonda ham ekranning yarmini egallardi, buyurtma va
 * to'lov formasi ikki ustunda qolib mazmun ustma-ust tushardi,
 * gorizontal siljish paydo bo'lardi.
 *
 * ═══ QOIDA ═══
 * Narvon fayldagi ENG OXIRGI qoidalar to'plami bo'lib qolishi
 * SHART. Yangi panel yoki sayt qoidasi qo'shilsa, u narvondan
 * YUQORIGA yoziladi — narvondan keyin EMAS.
 *
 * Istisno: `prefers-reduced-motion` va `hover` bloklari narvondan
 * keyin turishi MUMKIN va turishi KERAK — ular kenglikka emas,
 * foydalanuvchi imkoniyatiga bog'liq va narvonni haqli ravishda
 * bosib o'tadi.
 *
 * Tekshiruv: `scripts/css-tekshir.php` va `ThemeSystemTest`.
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   YUBORILMOQDA HOLATI (ikki marta bosishdan himoya)

   ═══ NIMA UCHUN `aria-disabled`, `disabled` EMAS ═══
   `disabled` tugmani forma ma'lumotlaridan CHIQARIB tashlaydi:
   `<button name="amal" value="...">` qiymati serverga YETIB
   BORMAYDI. Panelda bunday tugmalar bor, ya'ni `disabled` ba'zi
   formani buzardi.

   `aria-disabled` esa faqat MA'NO beradi — brauzer tugmani
   bloklamaydi, shu sababli bosishni JS to'sadi
   (`layouts/panel.blade.php`). Bu qoida esa mijozga NIMA
   bo'layotganini KO'RSATADI: bosim javobsiz qolgandek
   tuyulmasligi kerak, aks holda u yana bosadi.

   ═══ NIMA UCHUN `cursor: progress` ═══
   `not-allowed` «bu tugma ishlamaydi» degan ma'noni beradi.
   Haqiqat esa boshqa: tugma ISHLADI va natija kutilmoqda.
   ══════════════════════════════════════════════════════════════════ */
[aria-disabled="true"][type="submit"] {
    opacity: .6;
    cursor: progress;
}

/* ── 1-pog'ona: katta noutbuk (≤1280) ───────────────────────────── */
@media (max-width: 1280px) {
    :root {
        --s-6: 46px;
        --s-7: 64px;
    }

    .site-hero-split { gap: var(--s-5); }
}

/* ── 2-pog'ona: kichik noutbuk (≤1100) ──────────────────────────── */
@media (max-width: 1100px) {
    /* Kirish kartasi ustuni toraytiriladi, matn ustuni esa
       kengaytiriladi — sarlavha uch qatorga bo'linmasligi kerak. */
    .site-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }

    .site-hero-split h1 { font-size: clamp(28px, 4.4vw, 42px); }
    .site-authcard { padding: var(--s-3); }

    /* Olti kartali to'r uch ustunga qulflanadi (`auto-fit` bu
       kenglikda to'rt ustun yasab matnni siqardi). */
    .site-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* ═══ 🔴 BUYURTMA VA TO'LOV FORMASI BIR USTUNGA ═══
       Bu qoida ilgari 980px pog'onasida turgan va u JUDA KECH edi.

       Sabab: narvon pog'onalari BRAUZER kengligi bo'yicha, panel
       mazmuni esa yon menyudan keyin qoladigan kenglikda yashaydi.
       Yon menyu 244px, `.main` bo'shligi 36px — ya'ni panelda
       mazmun brauzerdan 280px KAM.

       Hisob 981px brauzerda:
         981 − 244 − 36 = 701px mazmun
         701 − 320 (xulosa ustuni) − 24 (oraliq) = 357px forma

       357px — aynan o'sha «Havola» maydoni ikki qatorga bo'linadigan
       kenglik. Ya'ni eski qoida muammoni 981–1100px oralig'ida
       ochiq qoldirgan: forma bir ustunga tushmagan, lekin ikki
       ustun ham sig'magan.

       1100px da esa: 1100 − 280 − 320 − 24 = 476px — forma maydonlari
       bir qatorda joylashadi.

       Xulosa formadan KEYIN tushadi (tartib atributi kerak emas,
       chunki HTML da u allaqachon keyin). Yopishqoqlik
       O'CHIRILADI: bir ustunda yopishqoq blok pastda "muzlab"
       qolib mazmunni to'sib qo'yardi. */
    .panel-form {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-3);
    }

    .panel-form-aside { position: static; top: auto; }

    /* Bir ustunda tavsif uchun joy ko'p — cheklov ko'tariladi. */
    .svc-tavsif { max-height: none; overflow-y: visible; }

    /* Xulosa ustuni to'liq kenglikda — xususiyat plitkalari ikki
       ustundan uch-to'rt ustunga o'tadi va blok balandligi
       qisqaradi (28i bo'limi). */
    .svc-plitkalar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ── 3-pog'ona: planshet gorizontal (≤980) ──────────────────────── */
@media (max-width: 980px) {
    /* Public menyu va desktop holati bitta 980/981 chegarada
       almashadi. Aks holda 901–980px oralig'ida ikkalasi ham yashirin
       bo'lib, asosiy navigatsiya butunlay yo'qolardi. */
    .site-burger { display: block; }

    .site-burger > .site-nav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: var(--s-2);
        background: var(--panel);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--lift-2);
    }

    .site-burger > .site-nav a { padding: 11px var(--s-3); }

    /* ══════════════════════════════════════════════════════════════
     * MENYU OCHILISHI — 0.22 SEKUND
     *
     * ═══ 🔴 EGASINING SHIKOYATI ═══
     * «3 chiziq bosilganda bolimlar tezda chiqib qolmoqda, iloji
     *  bo'lsa 0-1 sonyiada chiqadigan qilishlik kerak»
     *
     * `<details>` ochilganda brauzer mazmunni BIR KADRDA ko'rsatadi.
     * Hech qanday o'tish yo'q — menyu "otilib chiqadi".
     *
     * ═══ 🔴 NIMA UCHUN `height` ANIMATSIYA QILINMAYDI ═══
     * Odatiy yechim `max-height: 0 → 500px`. Uch muammo:
     *   1. Qat'iy son kerak. Menyuda 6 yoki 10 element bo'lishi
     *      mumkin (admin qo'shadi) va 500px yetmasa menyu KESILADI.
     *   2. `height` har kadrda layout qayta hisoblanishini talab
     *      qiladi — animatsiya asosiy ipda ishlaydi va sekin
     *      telefonda seskanadi.
     *   3. `<details>` mazmuni `display: none` dan chiqadi, ya'ni
     *      boshlang'ich qiymat yo'q va `transition` ISHLAMAYDI.
     *
     * ═══ YECHIM: `animation` + `clip-path` ═══
     * `animation` `display: none` dan chiqqan elementda ISHLAYDI
     * (`transition` dan farqi shu). `clip-path: inset()` esa
     * kompozitorda ishlanadi va balandlikni BILISHI kerak emas —
     * foiz bilan beriladi.
     *
     * Natija: menyu yuqoridan pastga "ochiladi", 0.22s, layout
     * qayta hisoblanmaydi.
     *
     * ═══ NIMA UCHUN 0.22s, 1s EMAS ═══
     * Egasi "0-1 soniya" dedi. Interfeys animatsiyasi uchun
     * 0.15-0.3s standart: undan uzun bo'lsa foydalanuvchi KUTADI va
     * sayt SEKIN tuyuladi. 1 sekund menyu uchun juda uzun —
     * bosgandan keyin yarim sekund kutish jonli emas, sekin
     * ko'rinadi. 0.22s "yumshoq, lekin tez". */
    .site-burger[open] > .site-nav {
        animation: siteMenuIn .22s cubic-bezier(.22, .61, .36, 1) both;
    }

    /* Havolalar zinapoya bilan chiqadi — menyu "yasalgan" ko'rinadi.
       Jami kutish 0.22 + 0.12 = 0.34s dan oshmaydi. */
    .site-burger[open] > .site-nav > a {
        animation: siteMenuLink .26s cubic-bezier(.22, .61, .36, 1) both;
    }

    /* ═══ 🔴 BU KECHIKISHLAR ILGARI FAQAT ≤900 DA EDI ═══
       Menyuning O'ZI 980px dan boshlab burgerga aylanadi, zinapoya
       esa 900px dan boshlanardi. Ya'ni 901–980px oralig'ida menyu
       ochilganda hamma havola BIR VAQTDA paydo bo'lardi — boshqa
       kengliklardan farqli, sababsiz. Endi ikkovi bir chegarada. */
    .site-burger[open] > .site-nav > a:nth-child(1) { animation-delay: .04s; }
    .site-burger[open] > .site-nav > a:nth-child(2) { animation-delay: .06s; }
    .site-burger[open] > .site-nav > a:nth-child(3) { animation-delay: .08s; }
    .site-burger[open] > .site-nav > a:nth-child(4) { animation-delay: .10s; }
    .site-burger[open] > .site-nav > a:nth-child(5) { animation-delay: .12s; }
    .site-burger[open] > .site-nav > a:nth-child(n+6) { animation-delay: .14s; }

    /* O'tishning O'ZI narvonda EMAS — u `.site-burger > summary`
       yonida. Sabab: narvon fayl oxirida va u
       `prefers-reduced-motion: reduce` ni bosib o'tardi. */
    .site-burger[open] > summary > svg { rotate: 90deg; }
    .site-head-inner { min-height: 58px; position: relative; }

    .site-doc { grid-template-columns: minmax(0, 1fr); }

    /* Mundarija mobil ekranda yopiladigan blokka aylanadi. */
    .site-toc {
        position: static;
        max-height: none;
        padding: var(--s-3);
        border: 1px solid var(--border);
        border-radius: var(--site-radius-sm);
        background: var(--panel);
    }

    .site-wave svg { height: clamp(38px, 5.5vw, 64px); }
}

/* ── 4-pog'ona: planshet vertikal (≤900) ────────────────────────── */
@media (max-width: 900px) {
    /* ══ 🔴 OMMAVIY BURGER MENYUSI BU YERDA EMAS ══════════════════
     *
     * Ilgari shu joyda `.site-burger` ning ~30 qatorlik to'liq
     * to'plami TAKRORLANARDI: `display: block`, `> .site-nav`
     * qutisi, havola bo'shligi, ikki animatsiya, o'q burilishi va
     * `.site-head-inner` balandligi — hammasi 980px blokidagi bilan
     * BAYT-BAYT bir xil.
     *
     * ═══ NIMA UCHUN OLIB TASHLANDI ═══
     * 900px — 980px ning ICHIDA: 900px dan tor ekran ayni paytda
     * 980px dan ham tor, ya'ni yuqoridagi blok allaqachon
     * qo'llanadi. Takror BIRORTA qiymatni o'zgartirmasdi, faqat
     * xatar yasardi: kimdir birini tuzatib ikkinchisini esdan
     * chiqarsa, 901–980px oralig'i jimgina eski holatda qolardi.
     *
     * Bu xatar NAZARIY emas edi — `:nth-child` kechikishlari aynan
     * shu tarzda faqat bu blokka tushib qolgan va zinapoya
     * animatsiyasi 901–980px da ishlamay turgan edi. Endi hammasi
     * 980px blokida, yagona joyda.
     *
     * Menyu tuzilishi yoki animatsiyasini o'zgartirish kerak bo'lsa
     * — 980px blokiga qaralsin, bu yerga QAYTA yozilmasin. */
    .site-post { flex-direction: column; }
    .site-post-cover { flex: none; width: 100%; }

    /* ═══ PANELNING MOBIL QOIDALARI ═══
       Ilgari ular faylning boshida, panel kodining yonida turgan.
       Ko'chirildi: barcha `max-width` so'rovlari bitta narvonda
       bo'lishi kerak (sabab narvon boshidagi izohda).

       Yon panel yashiriladi va pastdagi `.tabbar` chiqadi.
       `.main` ning pastki bo'shlig'i tabbar va qurilmaning safe-area
       insetini hisoblaydi — mazmun home indicator ostida qolmaydi. */
    /* ═══ 🔴 YON MENYU CHETGA CHIQADI (off-canvas) ═══
       Ilgari bu yerda `display: none` turgan — menyu telefonda
       BUTUNLAY yo'q qilinardi. Ikki muammo bor edi:

         1. Amalda u YASHIRILMASDI: narvon fayl o'rtasida turgan va
            keyingi `.side { display: flex }` uni bosib o'tardi.
            Natijada 430px ekranda menyu ekranning YARMINI egallardi
            (egasi yuborgan rasm), mazmun uchun joy qolmasdi va
            gorizontal siljish paydo bo'lardi.

         2. Yashirilgan bo'lsa ham, menyudagi guruhlangan
            navigatsiya telefonda UMUMAN yo'q edi — faqat pastdagi
            to'rt tugma va «Ko'proq» varag'i qolardi.

       Endi menyu chetda TURADI va `.yon-tugma` bilan suriladi.

       ═══ NIMA UCHUN `display: none` EMAS ═══
       Yopiq element `display: none` bo'lsa, ochilishda uning
       boshlang'ich holati bo'lmaydi va `transition` ISHLAMAYDI
       (bu fayldagi `<details>` animatsiyasi bilan bir xil tuzoq).
       `visibility` esa o'tishga xalaqit bermaydi va shu bilan
       birga yopiq menyuni klaviatura tartibidan ham, ekran
       o'quvchidan ham chiqaradi. */
    .side {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 60;
        /* `min()`: 288px keng ekranda qulay, 82vw esa 360px
           telefonda mazmunning bir qismini ko'rinib turishiga
           imkon beradi — «orqada sahifa bor» degan ishora. */
        width: min(82vw, 288px);
        max-height: none;
        translate: -100% 0;
        visibility: hidden;
        box-shadow: var(--lift-2);
    }

    /* Arabchada menyu O'NG chetdan chiqadi. `translate` fizik
       xossa, ya'ni yo'nalishga o'zi ergashmaydi — qo'lda
       teskarilanadi. Ochilish qoidasi BUNDAN KEYIN turishi shart
       (aniqligi teng, keyingi g'olib). */
    [dir="rtl"] .side { translate: 100% 0; }

    html[data-yon="ochiq"] .side {
        translate: 0 0;
        visibility: visible;
    }

    /* Menyu ochiqda sahifa aylanmaydi — aks holda parda ostidagi
       mazmun surilib ketardi va yopilgandan keyin foydalanuvchi
       boshqa joyda paydo bo'lardi. */
    html[data-yon="ochiq"] { overflow: hidden; }

    .yon-tugma { display: flex; }
    html[data-yon="ochiq"] .yon-parda { display: block; }

    .main { --main-padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }
    .tabbar { display: grid; }

    /* Yopishqoq yuqori qator chetlari `.main` ning MOBIL
       bo'shlig'iga (12px) moslashadi — sabab 21g bo'limida. */
    .topbar { margin-inline: -12px; padding-inline: 12px; }

    /* ═══ 🔴 YUQORI QATOR TELEFONDA: SARLAVHA O'Z QATORIDA ═══
       Desktopda tartib: sarlavha | hamyon | asboblar — bir qatorda.
       360px ekranda esa sarlavha («Xush kelibsiz, Ibrohimjon»)
       o'zi 200px oladi va hamyon bilan til tanlagich siqilib,
       matn KESILARDI.

       Yechim: sarlavha butun kenglikni oladi (`flex-basis: 100%`)
       va boshqaruvlar ostiga tushadi. Ular esa bir qatorda qoladi
       — ular kichik va uchtasi 360px ga sig'adi. */
    .topbar h1 { flex: 1 1 100%; min-width: 0; }

    /* Sarlavha o'rami ham to'liq kenglikni oladi (28j). */
    .topbar-bosh { flex: 1 1 100%; min-width: 0; }

    /* ══ 🔴 IKKINCHI QATOR: BALANS CHAPDA, ASBOBLAR O'NGDA ═══════════
     *
     * ═══ EGASINING SHIKOYATI ═══
     * «tepada turgan xush kelibsiz test foydalanuvchi deb turgan
     *  oyna biroz noqulayroq, u yerdagi til qo'ng'iroqva va til
     *  xunukroq joylashib qolgan»
     *
     * ═══ SABAB ═══
     * Ilgari `.hamyon` VA `.topbar-tools` — IKKISI ham
     * `margin-inline-start: auto` olardi. Flex qatorida ikki `auto`
     * bo'sh joyni O'ZARO TENG bo'lib oladi, ya'ni natija:
     *
     *     [bo'shliq] hamyon [bo'shliq] asboblar
     *
     * Balans ham chetga tegmaydi, ham markazda emas — o'rtada
     * «osilib» qoladi va ikki katta bo'shliq paydo bo'ladi. Egasi
     * yuborgan rasmda aynan shu ko'rinadi.
     *
     * ═══ YECHIM ═══
     * `auto` FAQAT asboblarda qoladi. Shunda balans qator boshida
     * (chapda), asboblar oxirida (o'ngda) va ORASIDA bitta bo'shliq
     * bo'ladi — bu standart va kutilgan tartib.
     *
     * `justify-content: space-between` ISHLATILMADI: qator
     * `flex-wrap` bilan va sarlavha ham shu qatorning a'zosi.
     * `space-between` sarlavha qatoriga ham tegib, uni boshqa
     * joyga surardi. */
    .topbar-tools { margin-inline-start: auto; }

    /* Vertikal ajratgich olib tashlanadi: boshqaruvlar endi
       ALOHIDA qatorda va ajratishga hojat yo'q. */
    .topbar-tools::before { display: none; }

    /* ═══ BOSHQARUVLAR BIR XIL BALANDLIKDA ═══
       Qo'ng'iroq 38px doira, til tanlagich va hamyon esa o'z
       mazmuniga qarab balandlik olardi — uchtasi yonma-yon turganda
       ular bir necha piksel farq qilib «tekislanmagan» ko'rinardi.
       Egasi shuni «xunukroq joylashgan» deb ta'rifladi.

       36px — barmoq uchun yetarli va uchtasi 360px ga sig'adi. */
    .hamyon,
    .ikon-btn,
    .qongiroq,
    .lang-pick > summary {
        height: 36px;
        min-height: 36px;
    }

    .qongiroq,
    .ikon-btn { width: 36px; }

    /* ═══ TIL MENYUSI TELEFONDA ═══
       Menyu 178px va u ekranning o'ng chetiga yopishgan. 360px da
       bu yetarli, LEKIN til tanlagich o'zi o'ng chetda bo'lmasa
       (masalan hamyon uzun bo'lsa) menyu ekrandan chiqib ketishi
       mumkin.

       `max-width` bilan u har doim ekranga sig'adi. `calc` dagi
       24px — ikki chetdagi 12px bo'shliq. */
    .lang-pick-menu { max-width: calc(100vw - 24px); }

    /* ═══ 🔴 QAHRAMON BO'LAK BITTA USTUNGA ═══
       Bu qoida ilgari faylning O'RTASIDA turgan va oxirdagi
       `≤1100` bloki uni bosib o'tgan (sabab o'sha joydagi izohda).
       Endi u narvonning TO'G'RI pog'onasida: `≤1100` dan KEYIN,
       ya'ni g'alaba qozonadi. */
    .site-hero-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
        text-align: center;
        padding-block: var(--s-5);
    }

    .site-hero-split h1 { margin-inline: auto; }
    .site-hero-split p { margin-inline: auto; }
    .site-hero-split .site-hero-actions { justify-content: center; }
    .site-hero-split .site-stats { justify-content: center; }

    /* Kartani biroz toraytirib markazga qo'yamiz — to'liq
       kenglikda u telefonda "cho'zilgan" ko'rinadi. */
    .site-hero-form { max-width: 420px; margin-inline: auto; width: 100%; }
}

/* ── 5-pog'ona: planshet vertikal (≤760) ────────────────────────── */
@media (max-width: 760px) {
    /* Kartalar IKKI ustunga. Uch ustun bu kenglikda har kartaga
       ~210px beradi va sarlavhalar bo'linib ketadi. */
    .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-cards-2 { grid-template-columns: minmax(0, 1fr); }

    /* Qadamlar bitta ustunga: yonma-yon uchta qadam bu kenglikda
       o'qilmaydi (nishon 30px + matn ~150px). */
    .site-steps { grid-template-columns: minmax(0, 1fr); }

    .site-doc { gap: var(--s-4); }

    /* Ishonch raqamlari: 3 → 1 ustun. 760px da uchtasi har biriga
       ~230px beradi va tushuntirish qatori uch qatorga bo'linadi. */
    .site-metrics { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-3); }

    /* API manzil kartalari bir ustunga: manzil monospace va uzun
       (`https://smmbilan.uz/api/v3`), ikki ustunda u kesilardi. */
    .api-bases { grid-template-columns: minmax(0, 1fr); }

    /* So'nggi nuqta qatori ustunga aylanadi — izoh yo'l ostiga
       tushadi va hech narsa siqilmaydi. */
    .api-ep { flex-wrap: wrap; gap: var(--s-2); }
    .api-ep-note { margin-inline-start: 0; text-align: start; flex-basis: 100%; }

    /* ═══ NAMUNA SARLAVHASI IKKI QATORGA ═══
       Qatorda to'rt element bor: metod nishoni (52px), manzil, ruxsat
       va holat kodi. 760px da manzilga ~200px qoladi va
       `/api/v3/orders/{id}/refill` u yerga sig'maydi.

       Manzil TO'LIQ kenglikni oladi, qolganlari ostidagi qatorda
       yonma-yon turadi — ular kichik va uchtasi 360px ga ham
       sig'adi. `.api-ep` dagi bilan ayni yechim. */
    .api-namuna > summary { flex-wrap: wrap; }
    .api-namuna-yol { flex-basis: 100%; order: -1; }
}

/* ── 6-pog'ona: yirik telefon (≤720) ────────────────────────────── */
@media (max-width: 720px) {
    .site-hero { padding-block: var(--s-5) var(--s-4); }
    .site-main { padding-block: var(--s-3) var(--s-6); }
    .site-section { margin-top: var(--s-6); }
    .site-cta { padding: var(--s-5) var(--s-3); }

    /* Yangi lentalar telefonda toraytiriladi: 36px yon bo'shliq
       320px ekranda mazmunga 248px qoldiradi — kartalar siqiladi.
       `--s-3` (16px) esa 288px beradi.

       Aniqlik ikki sinfdan — sabab yuqorida, `.site-hero-panel`
       e'lonida (temalar bitta sinf bilan tegadi). */
    .site-section.site-section-band { padding: var(--s-5) var(--s-3); }
    .site-hero.site-hero-panel { padding: var(--s-4) var(--s-3); }

    /* Xizmat qatori ustunga aylanadi — hech narsa kesilmaydi. */
    .site-svc { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

    /* Qahramondagi kichik raqamlar qatori: bo'shliq kamaytiriladi,
       shunda `flex-wrap` ularni ikki qatorga o'zi taqsimlaydi.
       Ustun soni QO'LDA belgilanmaydi — bu yerda element soni
       o'zgarib turadi (2 yoki 3), qat'iy grid noto'g'ri bo'lardi. */
    .site-stats { gap: var(--s-3) var(--s-4); }

    .site-wave svg { height: 34px; }
    .site-hero-tail { height: 16px; }

    /* Futer ustunlari ikkita bo'ladi — to'rtta bu kenglikda
       har biriga 80px beradi va havolalar bo'linadi. */
    .site-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 6b-pog'ona: sarlavha amallari (≤620) ───────────────────────────
 *
 * ═══ 🔴 NIMA UCHUN TUGMALAR MENYUGA KO'CHADI ═══
 * 360px ekranda hisob: 320px mazmun − brend (~130px) − burger
 * (38px) − bo'shliqlar (32px) = ~120px. «Kirish» + «Ro'yxatdan
 * o'tish» esa siqilgan holatda ham ~160px. Ya'ni ular SIG'MAYDI va
 * ekran chetidan chiqib ketadi.
 *
 * Tugmalarni shunchaki YASHIRISH mumkin emas: o'shanda bosh
 * sahifadan boshqa sahifalarda (masalan `/uz/api`) telefonda
 * kirish yo'li QOLMAYDI.
 *
 * Shu sababli ular burger menyusiga ko'chadi. Havolalar HTML da
 * BITTA marta yozilgan (`partials/site-header`), CSS esa qaysi
 * biri ko'rinishini boshqaradi — takrorlanish yo'q, ya'ni ekran
 * o'quvchi ham ikki marta o'qimaydi. */
@media (max-width: 620px) {
    .site-actions .site-auth-btn { display: none; }
    .site-nav-auth { display: flex; }

    /* Burger menyusidagi kirish havolalari ustida ajratgich —
       ular navigatsiya emas, AMAL. */
    .site-nav-auth:first-of-type {
        margin-top: var(--s-1);
        padding-top: var(--s-2);
        border-top: 1px solid var(--border);
    }

    .site-brand { font-size: 15px; }
    .site-brand .brand-dot { width: 22px; height: 22px; }

    /* ══ 🔴 CHIPLAR: QATORGA BO'LINADI, AYLANMAYDI ══════════════════
     *
     * ═══ EGASINING SHIKOYATI ═══
     * «orders bolimidagi telegram va boshqa xizmatlar sigmay
     *  qolgan» va «hammasi, kutilmoqda va boshqa status tugmalari
     *  sigmay qolgan o'ng tomonda»
     *
     * ═══ NIMA UCHUN AVVALGI QAROR BEKOR QILINDI ═══
     * Ilgari bu yerda gorizontal aylanadigan tasma bo'lgan:
     * `flex-wrap: nowrap` + `overflow-x: auto` + `scroll-snap`.
     * Mantiq to'g'ri edi — o'nta chip 360px da besh qatorga
     * tushardi.
     *
     * LEKIN u AMALDA HECH QACHON ISHLAMAGAN: bu qoida narvon fayl
     * o'rtasida turgani uchun o'lik edi va keyingi
     * `flex-wrap: wrap` uni bosib o'tardi. Narvon oxirga
     * ko'chirilgach tasma birinchi marta jonlandi — va egasi uni
     * DARHOL nosozlik deb ko'rdi.
     *
     * Sabab: tasmada aylantirish mumkinligiga BIRORTA ishora yo'q
     * edi. `scrollbar-width: none` va `::-webkit-scrollbar
     * { display: none }` chiziqni butunlay yashiradi, chetda esa
     * soyalanish (fade) yo'q. Ya'ni sichqonchali qurilmada
     * aylantirishning yo'li ham, belgisi ham yo'q — chiplar
     * shunchaki KESILGAN ko'rinadi.
     *
     * ═══ NIMA UCHUN AYNAN QATORGA BO'LISH TANLANDI ═══
     * Uch variant bor edi:
     *
     *   | Variant | Nima uchun bo'lmadi |
     *   |---|---|
     *   | Tasma + chetda soyalanish | Ishora paydo bo'ladi, lekin sichqoncha bilan aylantirish hamon noqulay; egasi ham «ko'rinsin» deb so'radi |
     *   | Tasma + ko'rinadigan chiziq | Chip ostida 8px chiziq — telefonda bezakdek ko'rinadi va bosishga xalaqit beradi |
     *   | Qatorga bo'lish | Hamma chip KO'RINADI, hech qanday yashirin harakat yo'q |
     *
     * Narxi: to'rtta qator ~140px vertikal joy oladi. Buni qabul
     * qildik — ko'rinmaydigan mazmun zichlikdan muhimroq.
     *
     * Joy sarfini kamaytirish uchun chipning YON bo'shligi telefonda
     * kichraytiriladi.
     *
     * ═══ 🔴 `flex-wrap` VA `gap` BU YERDAN OLIB TASHLANDI ═══
     * Ilgari bu pog'onada `flex-wrap: wrap` va `gap: 6px` qaytadan
     * yozilardi. Ikkisi ham endi keraksiz:
     *
     *   - `flex-wrap: wrap` asosiy qoidada ALLAQACHON bor (tasma
     *     variantidan voz kechilganda o'sha yerga ko'chirilgan), ya'ni
     *     bu takror edi va o'zgartirilsa 621px dan yuqorida jimgina
     *     boshqacha ishlab qolardi
     *   - `gap: 6px` esa ZARARLI edi: asosiy qiymat 8px ga
     *     ko'tarilgani AYNAN barmoq uchun, telefonda esa u yana 6px
     *     ga tushirilardi — ya'ni tuzatish eng kerak joyda bekor
     *     qilinardi. Uchta oraliqda tejaladigan 6px vertikal joy
     *     noto'g'ri filtr bosilishiga arzimaydi. */
    .filtr-chips > a {
        padding: 6px 11px;
        font-size: 12.5px;
    }

    /* ══ 🔴 TANLASH PANELI MAYDONGA YOPISHGAN QOLADI ═════════════════
     *
     * ═══ EGASINING SHIKOYATI ═══
     * «kategoritya tanlash tugmasi bosilganda esa kategoriyalar
     *  ancha pastdan chiqmoqda, kategoriya list tugmasi bilan
     *  yopishgan holda ... tagida chiqishi kerak edi»
     *
     * Xuddi shu shikoyat xizmat tanlash va to'lov usuli
     * tanlash uchun ham aytilgan — ya'ni uchta joyda bir xil.
     *
     * ═══ NIMA UCHUN AVVALGI QAROR BEKOR QILINDI ═══
     * Ilgari bu yerda panel telefonda EKRAN PASTIGA yopishgan
     * varaqqa aylantirilgan edi (`position: fixed; bottom: 10px`).
     * Mantiqi bor edi: qidiruv maydoni fokus olganda klaviatura
     * chiqadi va maydonga yopishgan panelga joy qolmaydi.
     *
     * LEKIN u ham HECH QACHON ISHLAMAGAN — narvon o'lik edi. Birinchi
     * marta jonlaganda natija shu bo'ldi: ro'yxat ekran pastida,
     * bosilgan maydondan UZOQDA paydo bo'ladi va u qaysi maydonga
     * tegishli ekani KO'RINMAYDI. Egasi yuborgan uchta rasmda
     * aynan shu holat.
     *
     * ═══ SAQLANGAN TASHVISH ═══
     * Klaviatura muammosi haqiqiy. Shuning uchun panel balandligi
     * telefonda kichraytiriladi: 340px yoki ekranning yarmi
     * (qaysi kichik bo'lsa). Shunda maydon + panel klaviatura
     * ustidagi joyga sig'adi.
     *
     * Panelning O'ZI `overflow: hidden`, ro'yxat esa ichida
     * aylanadi (`.pick-royxat`), ya'ni balandlikni kamaytirish
     * hech narsani kesib qo'ymaydi — faqat ro'yxat qisqaradi. */
    .pick-panel {
        max-height: min(52vh, 340px);
    }

    .pick-item { padding: 10px; }

    /* Telefonda nom uch qatorga sig'adi: ekran tor va xizmat
       nomlari uzun. */
    .pick-nom { -webkit-line-clamp: 3; }

    /* ═══ SAHIFA MAQSADI TELEFONDA HAM KO'RINADI ═══
       Ilgari bu yerda `.topbar-lead` yashirilardi: u yopishqoq
       qator ICHIDA edi va uchinchi qator bo'lib mazmunni pastga
       surib yuborardi.

       Endi tushuntirish qatordan chiqarilgan (`.panel-lead`,
       28k bo'limi) va oddiy oqimda turadi — ya'ni u hech narsani
       surmaydi va yashirishga sabab yo'q. Telefonda aynan bu
       tushuntirish eng kerak: ekranda kontekst kam.

       Faqat o'lcham kichraytiriladi. */
    .panel-lead { font-size: 12px; margin-bottom: var(--s-2); }
}

/* ── 7-pog'ona: o'rta telefon (≤600) ────────────────────────────── */
@media (max-width: 600px) {
    /* ═══ 🔴 REKLAMA TELEFONDA PASTGA YOPISHADI ═══
       Telefonda «markaz», «yuqori chap» va «pastki o'ng» kabi
       joylashuvlar ma'nosini yo'qotadi: ekran shunchalik tor.

       Markazda turgan karta esa eng yomon variant — u aynan
       kontent ustida qoladi va foydalanuvchi o'qiyotgan joyni
       to'sadi.

       Shuning uchun HAR QANDAY joylashuv pastga tushadi va
       kenglikni to'liq egallaydi. Pastki qism — barmoq eng oson
       yetadigan joy, ya'ni yopish tugmasi ham qulay bo'ladi.

       `env(safe-area-inset-bottom)` — iPhone dagi home indicator
       ostida qolmasligi uchun. */
    .reklama,
    .reklama--center,
    .reklama--center-left,
    .reklama--center-right,
    .reklama--top-left,
    .reklama--top-right,
    .reklama--bottom-left,
    .reklama--bottom-right {
        inset-block-start: auto;
        inset-block-end: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
        inset-inline: var(--s-3);
        width: auto;
        transform: none;
        animation-name: reklamaKir;
    }

    /* ═══ PANELDA TABBAR USTIGA CHIQMAYDI ═══
       Pastdagi `.tabbar` FAQAT panel sahifalarida bor (≤900px).
       Ommaviy saytda va login sahifasida u yo'q, shuning uchun
       qo'shimcha bo'shliq faqat `body.panel` uchun beriladi —
       aks holda saytda karta ostida keraksiz 84px bo'sh joy
       qolardi.

       84px — `.main` ning mobil pastki bo'shlig'i bilan AYNI
       qiymat (narvonning 900px pog'onasi). */
    body.panel .reklama {
        inset-block-end: calc(84px + var(--s-2) + env(safe-area-inset-bottom, 0px));
    }

    /* Rasm pastroq: tor ekranda 180px karta balandligining yarmini
       egallab, matnni pastga surib yuborardi. */
    .reklama-rasm { max-height: 130px; }

    :root {
        --s-5: 28px;
        --s-6: 38px;
        --s-7: 48px;
    }

    /* Kartalar bitta ustunga. Ikki ustun 600px da har kartaga
       ~275px beradi — bu chegarada, lekin `padding` bilan matn
       maydoni 230px ga tushadi va uzun sarlavhalar bo'linadi. */
    .site-cards,
    .site-cards-2 { grid-template-columns: minmax(0, 1fr); }

    .site-hero-split h1 { font-size: clamp(25px, 7.4vw, 34px); }
    .site-hero p { font-size: 15px; }

    /* Tugmalar to'liq kenglikda — barmoq uchun kattaroq nishon va
       ular bir qatorga sig'may "sinmaydi". */
    .site-hero-actions { flex-direction: column; align-items: stretch; }
    .site-hero-actions .btn { width: 100%; }

    .site-crumbs ol { flex-wrap: wrap; row-gap: 4px; }

    /* Auth kartasi: ikki ustunli maydon qatori bitta ustunga
       tushadi (ism/familiya kabi juftliklar). */
    .auth-card { padding: var(--s-4) var(--s-3); }
    .row { gap: 0; }
    .row .field { flex-basis: 100%; }
}

/* ── 8-pog'ona: telefon (≤480) ───────────────────────────────────── */

/* ═══ NIMA UCHUN YANGI POG'ONA QO'SHILDI ═══
   Telegram to'lovi panelidagi ikki tugma («Roziman» va «Bekor
   qilish») yonma-yon turadi. 480px dan tor ekranda ikkisi ham
   siqilib, matn ikki qatorga bo'linadi va tugmalar bir-biriga
   yopishib ko'rinadi.

   600px pog'onasiga qo'shish mumkin edi, lekin u kenglikda tugmalar
   hali BEMALOL joylashadi — bekorga ustun shaklga o'tkazish
   sahifani uzaytirardi. */
@media (max-width: 480px) {
    /* Summa — sahifadagi eng yirik element. Tor ekranda 30px
       konteynerdan chiqib ketadi. */
    .ub-summa-son { font-size: 26px; }

    .ub-taklif-amallar { flex-direction: column; align-items: stretch; }

    /* `.inline-form` `display: inline` — ustun shaklda u tugmani
       cho'zishga yo'l qo'ymaydi. */
    .ub-taklif-amallar .inline-form { display: block; }
    .ub-taklif-amallar .btn { width: 100%; }

    /* Karta raqami maydoni: `min-width: 19ch` tor ekranda
       konteynerdan chiqib ketadi. */
    .ub-karta-input { width: 100%; }
}

/* ── 9-pog'ona: kichik telefon (≤420) ───────────────────────────── */
@media (max-width: 420px) {
    .tabbar-more-menu { grid-template-columns: minmax(0, 1fr); }

    /* Eng kichik ekranda til almashtirgich sarlavhadan chiqib
       ketmasligi kerak — u futerga ko'chiriladi (`.site-langs`
       futerda ham bor). */
    .site-head .site-langs { display: none; }

    .site-authcard { padding: var(--s-3); }
    .site-foot-cols { grid-template-columns: minmax(0, 1fr); }

    /* Yorliq va "Parolni unutdingizmi?" bir qatorga sig'masa
       ustma-ust tushadi. Bu kenglikda ular ikki qatorga
       ajratiladi. */
    .site-auth-label { flex-direction: column; align-items: flex-start; gap: 2px; }
    .site-auth-label a { white-space: normal; }
}

/* ── 10-pog'ona: eng kichik (≤360) ──────────────────────────────── */
@media (max-width: 360px) {
    /* Ishonch raqamlari yonma-yon sig'maydi — ikki ustunga
       majburlanadi (`flex-wrap` o'zi ham qiladi, lekin bu yerda
       kenglik qat'iy beriladi, aks holda oxirgi element yolg'iz
       qatorda qolib "sinib" ko'rinadi). */
    .site-stats { gap: var(--s-2) var(--s-3); }
    .site-stat { min-width: 0; flex: 1 1 42%; }

    .site-hero-split h1 { font-size: 23px; }
    .site-eyebrow { font-size: 12px; padding: 5px 11px; }
}

/* ══════════════════════════════════════════════════════════════════
 * HARAKATSIZ REJIM — NARVONDAN KEYIN
 *
 * ═══ 🔴 NIMA UCHUN AYNAN BU YERDA ═══
 * Narvon qoidasi bo'yicha yangi qoidalar narvondan YUQORIGA
 * yoziladi. Bu blok — narvonning o'z izohida ko'rsatilgan ISTISNO:
 * u kenglikka emas, foydalanuvchi imkoniyatiga bog'liq va narvonni
 * HAQLI ravishda bosib o'tishi kerak.
 *
 * Bu shunchaki uslub masalasi emas. Quyidagi animatsiyalar
 * narvonning O'ZIDA e'lon qilinadi:
 *   - `.site-burger[open] > .site-nav`      (≤980 pog'onasi)
 *   - `.site-burger[open] > .site-nav > a`  (≤980 pog'onasi)
 *   - `.reklama` (`animation-name`)         (≤600 pog'onasi)
 *
 * Ustuvorlik teng bo'lgani uchun faqat TARTIB hal qiladi. Bu blok
 * narvondan oldin turgan paytda u butunlay bekor edi — vestibulyar
 * buzilishi bor foydalanuvchi hamma animatsiyani ko'rardi.
 *
 * ═══ NIMA UCHUN `!important` EMAS ═══
 * Tartib yetarli va u tushunarli. `!important` esa temalarga
 * (`themes/{slug}/theme.css`) bu qoidani mahalliy tuzatish yo'lini
 * yopib qo'yardi.
 * ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    /* ── Ommaviy mobil menyu ────────────────────────────────────────
       `animation: none` YETARLI va menyu YO'QOLMAYDI: `clip-path`
       ning boshlang'ich holati faqat `@keyframes` ichida, doimiy
       qoidada emas. Ya'ni animatsiya o'chsa menyu shunchaki DARHOL
       to'liq ko'rinadi.

       (Bu `animation-timeline` dagi `opacity: 0` tuzog'idan farq
       qiladi — u yerda boshlang'ich holat doimiy qoidada bo'lgani
       uchun animatsiyani o'chirish mazmunni ko'rinmas qoldirardi.) */
    .site-burger[open] > .site-nav,
    .site-burger[open] > .site-nav > a {
        animation: none;
    }

    .site-burger > summary > svg { transition: none; }

    /* ── Suzuvchi reklama ───────────────────────────────────────────
       ═══ 🔴 NIMA UCHUN QO'SHILDI ═══
       `reklamaKir` — `translateY(8px)` + `scale(.98)`, ya'ni HAQIQIY
       harakat, rang emas. U hech qanday harakat shartisiz e'lon
       qilingan edi va sahifa yuklanganda ekranda SAKRAB chiqardi.

       Reklama JS bilan ko'rsatiladi (`hidden` olib tashlanadi), ya'ni
       foydalanuvchi uni kutmaydi — kutilmagan harakat esa harakatga
       sezgir foydalanuvchi uchun eng noqulay tur.

       Barcha joylashuv variantlari sanab o'tiladi, chunki ularning
       har biri `animation-name` ni O'ZGARTIRADI (`reklamaKirMarkaz`)
       va faqat `.reklama` ni yozish ularni qoplamasdi.

       `opacity` bilan paydo bo'lish SAQLANADI: shaffoflik harakat
       hisoblanmaydi va karta «yo'qdan paydo bo'lgandek» ko'rinmaydi. */
    .reklama,
    .reklama--center,
    .reklama--center-left,
    .reklama--center-right,
    .reklama--top-left,
    .reklama--top-right,
    .reklama--bottom-left,
    .reklama--bottom-right {
        animation-name: reklamaKirMarkaz;
    }
}

/* ══════════════════════════════════════════════════════════════════
 * 30. TELEGRAM KUZATUVCHISI ORQALI TO'LOV (avtomatik karta)
 * ══════════════════════════════════════════════════════════════════
 *
 * ═══ 🔴 NIMA UCHUN SUMMA ALOHIDA, KATTA BLOKDA ═══
 * Bu to'lov usulida mijozning to'lovini aniqlaydigan YAGONA belgi —
 * SUMMA. Va u mijoz so'raganidan farq qilishi mumkin: 50 000 band
 * bo'lsa unga 50 001 beriladi.
 *
 * Mijoz farqni KO'RMASDAN eski summani to'lasa ikki yomon natija
 * bo'ladi: o'z to'lovi topilmaydi va to'lagan puli BOSHQA mijozning
 * bandligiga mos kelib, pul o'sha yerga tushishi mumkin.
 *
 * Shu sababli summa oddiy matn qatorida EMAS — u sahifadagi eng
 * yirik element va rangi bilan ajralib turadi. Bu bezak emas,
 * xatoning oldini olish vositasi.
 *
 * ═══ NIMA UCHUN `--c-primary` FONI ═══
 * Yengil bo'yalgan fon (`color-mix`) summani kartadan ajratadi,
 * lekin `.sum-card` kabi to'liq to'q blok yasamaydi: bu yerda faqat
 * BITTA raqam muhim va uni qo'shimcha ranglar bilan raqobatga
 * kiritish kerak emas.
 * ------------------------------------------------------------------ */

.ub-summa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-2);
    margin-bottom: var(--s-3);
    padding: var(--s-3);
    border: 1px solid color-mix(in srgb, var(--c-primary) 30%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--c-primary) 8%, var(--panel));
}

/* Yorliq butun kenglikni oladi — summa o'z qatorida qoladi va
   ikkisi bir-biriga yopishib ketmaydi. */
.ub-summa-yorliq {
    flex: 0 0 100%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ═══ NIMA UCHUN `font-variant-numeric: tabular-nums` ═══
   Raqamlar bir xil kenglikda bo'lsa mijoz ularni guruhlab o'qiydi.
   Proporsional shriftda «1» tor bo'lib, «50 001» va «50 100» bir
   qarashda o'xshab ketadi — bu yerda esa aynan OXIRGI raqam muhim. */
.ub-summa-son {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--c-primary);
}

.ub-summa-valyuta { font-size: 15px; font-weight: 600; color: var(--muted); }

/* To'lov panelidagi nusxa — kartaning ichida, shuning uchun
   kichikroq va fonsiz. */
.ub-summa-kichik {
    margin-block: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: transparent;
}

.ub-summa-kichik .ub-summa-son { font-size: 22px; }

/* ── Karta raqami: bosilganda belgilanadigan maydon ──────────────── */

/* ═══ 🔴 NIMA UCHUN `<input readonly>`, ODDIY MATN EMAS ═══
   Mijoz karta raqamini TELEFONDA ko'chiradi. Oddiy matnni barmoq
   bilan belgilash aniq emas: uzun bosish menyusi chiqadi, belgilash
   chetlari sudraladi va yarim raqam ko'chiriladi.

   `<input readonly data-belgila>` esa bir bosishda BUTUN qiymatni
   belgilaydi (layoutdagi umumiy ishlovchi). Noto'g'ri ko'chirilgan
   karta raqami esa pulni begona hisobga yuboradi va u QAYTMAYDI.

   `readonly`, `disabled` EMAS: `disabled` maydon belgilanmaydi va
   ekran o'quvchi uni o'tkazib yuboradi. */
.ub-karta-input {
    width: auto;
    min-width: 19ch;
    padding: 6px 9px;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    background: var(--input-bg);
    cursor: pointer;
}

/* ── Karta qatorlari (to'lov panelida) ──────────────────────────── */
.ub-qatorlar { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-2); }

.ub-qator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
}

.ub-qator-yorliq { font-size: 13px; font-weight: 600; }
.ub-qator-egasi { font-size: 13px; color: var(--muted); }

/* ═══ EGASINING SHIKOYATI ═══
   «karta raqamlar chiqmoqda bu to'g'ri faqat orasiga kichik hiraroq
    bo'lsa ham ajratib turish uchun liniya o'tkazib qo'yish kerak»

   Ikki karta faqat `gap` bilan ajralgan edi va telefonda qator
   o'ralib ketganda qaysi raqam qaysi bankka tegishli ekani
   ko'rinmasdi. Noto'g'ri kartaga ketgan pul esa QAYTMAYDI.

   Chiziq ATAYLAB juda och: u ajratadi, lekin diqqatni raqamdan
   tortib olmaydi. `+` bilan faqat IKKINCHI va keyingi qatorlarga
   qo'yiladi — birinchisining tepasida chiziq ortiqcha. */
.ub-qator + .ub-qator {
    /* `gap` ustiga qo'shiladi: chiziqning tepasida ham, ostida ham
       teng bo'shliq qoladi. */
    padding-top: var(--s-2);
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

/* ── Kutish holati (bildirishnoma kutilmoqda) ───────────────────── */

/* ═══ NIMA UCHUN ALOHIDA BLOK ═══
   Mijoz pulni o'tkazdi va KUTIB TURADI — bu eng bezovta qiladigan
   daqiqalar. Holat matni oddiy `.hint` bo'lsa u ko'zga tashlanmaydi
   va mijoz «hech narsa bo'lmayapti» deb o'ylab tiket ochadi.

   Blok chegara bilan ajratiladi, ya'ni «bu joy o'zi yangilanadi»
   degan ishora beradi. */
.ub-kutish {
    margin-block: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px dashed color-mix(in srgb, var(--c-secondary) 40%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--c-secondary) 5%, transparent);
}

.ub-kutish-matn { margin: 0; font-size: 14px; font-weight: 600; }

/* Uch holat rangi. JS sinf qo'shadi, CSS esa faqat rangni beradi —
   matn HAR DOIM serverdan yoki tarjimadan keladi. */
.ub-kutish-ok { color: var(--c-success); }
.ub-kutish-xato { color: var(--c-danger); }
.ub-kutish-ogoh { color: var(--c-warning); }

.ub-kutish-yordam { margin: var(--s-2) 0 0; font-size: 13px; }

/* ── Taklif kartasi ─────────────────────────────────────────────── */

/* ═══ NIMA UCHUN URG'ULANGAN CHEGARA ═══
   Taklif — oqimning YARMIDA to'xtab qolgan holat va mijozning
   navbatdagi yagona ishi shu. Oddiy karta bo'lsa u sahifadagi
   boshqa kartalardan ajralmasdi va mijoz «Roziman» tugmasini
   qidirib qolardi. */
.ub-taklif { border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border)); }

.ub-taklif-amallar { margin-top: var(--s-3); }

/* ═══ MOSLASHUV QOIDALARI BU YERDA EMAS ═══
   Telefon uchun qoidalar fayl oxiridagi MOSLASHUV NARVONIDA
   (`≤480` pog'onasi). Sabab narvonning boshida yozilgan: barcha
   `max-width` so'rovlari BITTA joyda va KATTADAN KICHIKKA tartibda
   bo'lishi kerak.

   `scripts/css-tekshir.php` shu tartibni tekshiradi va buzilsa
   xato beradi — ya'ni bu qoida majburiy, tavsiya emas. */

/* ══════════════════════════════════════════════════════════════════
   MAXSUS XIZMATLAR — Telegram raqami, Stars, Premium
   ══════════════════════════════════════════════════════════════════

   ═══ NIMA UCHUN YANGI SINFLAR KERAK BO'LDI ═══
   Bo'lim kartalari (`panel/special-index`) mavjud `.quick` to'rini
   QAYTA ISHLATADI — u yerda yangi CSS yozilmagan. Variant kartalari
   esa boshqacha: ular RADIO tugma va tanlangan holati ko'rinishi
   kerak. `.quick-item` havola uchun yozilgan va unda tanlangan holat
   yo'q.

   ═══ NIMA UCHUN `@media` YO'Q ═══
   Fayl oxiridagi izohda yozilgan qoida: barcha `max-width`
   so'rovlari BITTA joyda (moslashuv narvonida) va KATTADAN KICHIKKA
   tartibda bo'lishi kerak. `scripts/css-tekshir.php` shu tartibni
   tekshiradi.

   Bu blok narvondan KEYIN turadi, ya'ni unga `@media` qo'shish
   tartibni buzardi. Shu sababli moslashuv `auto-fit` grid bilan
   beriladi (`.grid-3` allaqachon shunday) — u qo'shimcha so'rovsiz
   ekran kengligiga moslashadi.
   ══════════════════════════════════════════════════════════════════ */

/* ── Variant kartasi (radio) ─────────────────────────────────────── */

/* ═══ NIMA UCHUN `<label>` KARTA ═══
   Radio tugmaning O'ZI kichik va uni bosish qiyin, ayniqsa
   telefonda. `<label>` esa BUTUN kartani bosiladigan qiladi va bu
   qo'shimcha JS talab qilmaydi — brauzer o'zi bajaradi. */
.variant-karta {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.variant-karta:hover {
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border));
    background: color-mix(in srgb, var(--c-primary) 5%, var(--panel));
}

/* ═══ NIMA UCHUN RADIO KO'RINMAYDI, LEKIN `display: none` EMAS ═══
   `display: none` elementni FOKUS ZANJIRIDAN chiqaradi, ya'ni
   klaviatura bilan tanlash imkonsiz bo'lardi va ekran o'quvchi ham
   uni ko'rmasdi.

   `opacity: 0` + mutlaq joylashuv esa uni ko'rinmas qiladi, lekin
   TIRIK qoldiradi: Tab bilan yetib borish va strelkalar bilan
   tanlash ishlaydi. */
.variant-karta input[type="radio"] {
    position: absolute;
    inset-inline-start: var(--s-3);
    inset-block-start: var(--s-3);
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

/* Tanlangan holat: chegara va fon brend rangida.

   ═══ 🔴 NIMA UCHUN `input[type="radio"]:checked` DEB YOZILMAYDI ═══
   Ikki sabab, ikkisi ham haqiqiy:

   1. RADIO O'ZINI qayta bo'yash Chromium da nuqson beradi: belgi
      qatlami keyingi majburiy qayta chizishgacha chizilmaydi
      (`CheckboxSubmitTest` shu naqshni butun fayl bo'ylab TAQIQLAYDI
      va tekshiruv oddiy matn izlash bilan bajariladi, ya'ni
      `:has()` ichida ham topiladi).

   2. Bu yerda o'ram bo'yaladi, radio emas — ya'ni nuqson yo'q. Lekin
      taqiqni «men bilaman, menda boshqacha» deb chetlab o'tish
      keyingi odamga «ba'zan mumkin» degan signal berardi.

   `:has(:checked)` AYNI natijani beradi: karta ichida bittadan
   ortiq boshqaruv elementi yo'q. `.check-line:has(input:checked)`
   bilan bir naqsh. */
.variant-karta:has(:checked) {
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 10%, var(--panel));
    box-shadow: 0 0 0 1px var(--c-primary);
}

/* ═══ NIMA UCHUN FOKUS ALOHIDA KO'RSATILADI ═══
   Radio ko'rinmas, ya'ni brauzerning standart fokus halqasi ham
   ko'rinmaydi. Klaviatura foydalanuvchisi qaysi kartada turganini
   bilmasdi. */
.variant-karta:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* O'chirilgan bo'limda kartalar bosilmaydi. */
.variant-karta:has(input[type="radio"]:disabled) {
    opacity: .55;
    cursor: not-allowed;
}

/* ═══ NIMA UCHUN BAYROQ KATTA ═══
   Egasining talabi: «barcha davlatlar bayroq stickeri bilan».
   Bayroq emojisi matn o'lchamida (14px) taniqli emas — 22px da u
   haqiqiy belgi bo'lib ko'rinadi va mijoz davlatni O'QIMASDAN
   taniydi. */
.variant-bayroq {
    flex: none;
    font-size: 22px;
    line-height: 1;
}

.variant-matn { min-width: 0; flex: 1; }

.variant-nom {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-izoh {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

/* ═══ NIMA UCHUN NARX O'NG CHETDA ═══
   Mijoz kartalarni SOLISHTIRADI va narx bir ustunda tekis turgani
   uni tez o'qishga imkon beradi. Nom yonida bo'lsa har kartada
   boshqa joyda chiqardi (nom uzunligiga qarab). */
.variant-narx {
    flex: none;
    text-align: end;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.variant-zaxira {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
}

/* ── Qadamlar ro'yxati ───────────────────────────────────────────── */

/* ═══ NIMA UCHUN ALOHIDA SINF ═══
   Raqam olgandan keyin mijoz UCH qadamni ketma-ket bajaradi va
   tartib MUHIM: raqamni kiritmasdan kod so'rasa u bekorga ketadi.
   Oddiy `<ol>` da qadamlar zich turadi va o'qilmaydi. */
.maxsus-qadamlar {
    margin: 0;
    padding-inline-start: 1.35em;
    font-size: 13px;
    color: var(--muted);
}

.maxsus-qadamlar li { margin-block: var(--s-1); }

/* ── Buyurtma sahifasidagi banner ────────────────────────────────── */

/* ═══ NIMA UCHUN PASTDAN BO'SHLIQ ═══
   Banner `.quick-item` ni qayta ishlatadi va u GRID ichida
   ishlatilgan (`.quick`), ya'ni o'z tashqi bo'shlig'i yo'q — bo'shliq
   grid `gap` dan kelardi.

   Bu yerda u YAKKA turadi, shu sababli bo'shliq aniq beriladi. Aks
   holda karta pastdagi formaga yopishib qolardi. */
.maxsus-banner {
    display: flex;
    margin-block-end: var(--s-3);
}


/* ── tema: aurora ── */
/*
 * AURORA — standart tema.
 *
 * ═══ NIMA UCHUN BU FAYL QISQA ═══
 * Aurora poydevor uslubning O'ZI: `resources/theme/base.css` aynan shu
 * temaga qarab yozilgan. Shuning uchun bu yerda faqat temaga XOS
 * qo'shimchalar bor.
 *
 * Butun poydevorni bu yerga KO'CHIRISH mumkin edi, lekin aynan shu
 * `docs/05-tema-tizimi.md` boshida ogohlantirilgan xato: eski skriptda
 * 30+ tema bor edi va har biri mustaqil ko'chirma edi — bitta xatoni
 * tuzatish uchun 30 joyni tahrirlash kerak bo'lardi.
 */

/* Brend belgisidagi gradient — Aurora ning imzosi. */
.brand-dot {
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--c-primary) 35%, transparent);
}

/* Asosiy tugmada yengil gradient: yorqin temada tekis rang "yassi"
   ko'rinadi. */
.btn:not(.btn-ghost):not(.btn-danger) {
    background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 70%, var(--c-secondary)));
}

/* Statistika kartalari yuqori chetida rangli chiziq. */
.stat {
    position: relative;
    overflow: hidden;
}

.stat::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary), var(--c-accent));
}

/*
 * ═══ TANLASH VA SEGMENT ═══
 * Poydevorning 28–31 bo'limlari aynan bu temaga qarab yozilgan,
 * ya'ni ular allaqachon to'g'ri ko'rinadi. Bu yerda faqat AURORA
 * IMZOSI qo'shiladi: yengil gradient.
 *
 * ═══ 🔴 NIMA UCHUN SEGMENTDA GRADIENT YO'Q ═══
 * Tugmada gradient bor, lekin segmentda tanlangan variant AQ
 * plita bo'lib qolishi kerak: u «bosiladigan» emas, «tanlangan»
 * degan ma'noni beradi. Gradient qo'yilsa u tugmaga o'xshab
 * qolardi va mijoz uni bosilishi kutilayotgan element deb
 * o'ylardi.
 *
 * Shu sababli faqat CHEGARA gradientdan rang oladi.
 */
.segment input:checked + label {
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--c-primary), var(--c-secondary)) 1;
}

/* Ochilgan panel ustida yupqa gradient chizig'i — statistika
   kartalaridagi bilan bir xil naqsh (yuqorida).

   `overflow: hidden` chiziqni yumaloq burchakka moslaydi. Ro'yxat
   o'zining `overflow-y: auto` si bilan ichida aylanadi, ya'ni bu
   qoida aylantirishga TEGMAYDI. */
.pick-panel { overflow: hidden; }

.pick-panel::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary), var(--c-accent));
    /* Ro'yxat ustida turishi kerak — aks holda birinchi qator uni
       qoplab qo'yardi. */
    z-index: 1;
}


/* ── admin qo'shgan ── */
.falling-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

.falling-star {
    position: absolute;
    top: -20px;
    border-radius: 50%;
    opacity: 0;
    animation: starFall linear forwards;
}

@keyframes starFall {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) translateX(var(--drift));
        opacity: 0;
    }
}