/* ==========================================================================
   «FANLAR VA TESTLAR» — katalog daraxti (`core/katalog.html`)

   NEGA ALOHIDA FAYL VA NEGA RANGLARI QAT'IY YOZILGAN: bu sahifa IKKALA
   stekda ham chiziladi — kirmagan odamga reklama sayti qobig'ida
   (`base_public.html`: Tailwind ham, `app.css` ham yo'q), o'quvchiga ilova
   qobig'ida (`base_shell.html`). Ikkalasida ham bir xil ko'rinishi shart,
   shuning uchun na Tailwind utility'si, na `app.css` tokeni ishlatilmaydi —
   aynan `footer.css` dagi `.omm-*` va `navbar.css` dagi qoida.

   Qorong'i rejim: `<html data-theme>` ni `partials/_tema_head.html` ikkala
   qobiqda ham birinchi frame'dan oldin yozadi; `prefers-color-scheme` bloki —
   ehtiyot nusxa (footer.css'dagidek).
   ========================================================================== */

.kat {
  --kat-ink: #11203A;
  --kat-ink-soft: rgba(17, 32, 58, .58);
  --kat-ink-faint: rgba(17, 32, 58, .40);
  --kat-yuza: #FFFFFF;
  --kat-yuza-2: #F5F8FC;
  --kat-chiziq: #E4EBF3;
  --kat-chiziq-2: rgba(17, 32, 58, .10);
  --kat-brend: #1F4E79;
  --kat-brend-2: #2E75B6;
  --kat-brend-yumshoq: #E6F0FA;
  --kat-oltin: #D6860A;
  --kat-oltin-yumshoq: #FDECCB;
  --kat-yashil: #2E7D32;
  --kat-yashil-yumshoq: #E4F2E5;
  --kat-r: 14px;
  --kat-r-sm: 10px;
}

/* --------------------------------------------------------------------------
   Sarlavha
   -------------------------------------------------------------------------- */
.kat-bosh { margin-bottom: 18px; }
.kat-bosh h1 { margin: 0 0 6px; }
.kat-bosh__izoh { color: var(--kat-ink-soft); font-size: .97rem; max-width: 62ch; }

.kat-sonlar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kat-son {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--kat-yuza-2); border: 1px solid var(--kat-chiziq);
  font-size: .84rem; color: var(--kat-ink-soft);
}
.kat-son b {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; color: var(--kat-ink); font-variant-numeric: tabular-nums;
}
.kat-son--bepul { background: var(--kat-yashil-yumshoq); border-color: transparent; }
.kat-son--bepul b { color: var(--kat-yashil); }
.kat-son--pullik { background: var(--kat-oltin-yumshoq); border-color: transparent; }
.kat-son--pullik b { color: var(--kat-oltin); }
.kat-son--ochiq { background: var(--kat-brend-yumshoq); border-color: transparent; }
.kat-son--ochiq b { color: var(--kat-brend); }

/* --------------------------------------------------------------------------
   Filtr paneli — yopishqoq (uzun daraxtda ham qo'l ostida tursin)

   IXCHAM (kursxona, 2026-09-28, 1280×624 ekran skrinshoti: «tepadagi qism
   qancha joyni egallayapti, foydalanish noqulay, asabga tegadi»): navbar +
   filtr ekranning uchdan biriga yaqinini yopib turardi — panel uch qator
   (tanlovlar · ochish/yig'ish · «N ta test topildi») va katta ichki joylar.
   Endi hammasi BITTA qatorda, va pastga aylantirilganda panel navbar ortiga
   yashirinadi — tepaga ozgina aylantirilsa qaytadi (`katalog.js`,
   `kat-filtr--berk`). O'qib borayotganda ustida faqat navbar qoladi.
   -------------------------------------------------------------------------- */
.kat-filtr {
  /* NAVBAR OSTIDA: navbar ikkala qobiqda ham bitta komponent va u
     `position: sticky; top: 0` bilan turadi, balandligi `--nav-h` = 68px
     (`navbar.css`). Shusiz filtr paneli navbar ORQASIGA kirib qolardi.
     z-index navbarnikidan (30) KICHIK — panel uning ostidan o'tsin. */
  position: sticky; top: 74px; z-index: 20;
  background: var(--kat-yuza); border: 1px solid var(--kat-chiziq);
  border-radius: var(--kat-r); padding: 7px;
  box-shadow: 0 4px 14px rgba(17, 32, 58, .06);
  margin-bottom: 12px;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
/* Pastga aylantirilmoqda — panel navbar ortiga (u 30, panel 20) chiqib ketadi */
.kat-filtr--berk { transform: translateY(calc(-100% - 90px)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kat-filtr { transition: none; } }
.kat-filtr__qator { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kat-filtr__qidiruv { position: relative; flex: 1 1 190px; min-width: 0; }
.kat-filtr__qidiruv svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--kat-ink-faint); pointer-events: none;
}
.kat-kiritish, .kat-tanlov {
  font-family: inherit; font-size: .92rem; color: var(--kat-ink);
  background: var(--kat-yuza-2); border: 1px solid var(--kat-chiziq);
  border-radius: var(--kat-r-sm); padding: 7px 11px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.kat-kiritish { width: 100%; padding-left: 36px; }
.kat-kiritish::placeholder { color: var(--kat-ink-faint); }
.kat-kiritish:focus, .kat-tanlov:focus {
  outline: none; border-color: var(--kat-brend-2); background: var(--kat-yuza);
  box-shadow: 0 0 0 3px rgba(46, 117, 182, .16);
}
.kat-tanlov { flex: 0 1 auto; max-width: 100%; cursor: pointer; }
/* Tanlov ishlatilganda ko'zga tashlansin — odam nima yoqib qo'yganini bilsin */
.kat-tanlov[data-faol="1"] {
  background: var(--kat-brend-yumshoq); border-color: var(--kat-brend-2); color: var(--kat-brend);
  font-weight: 600;
}
.kat-filtr__amal { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.kat-matn-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--kat-ink-soft);
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 7px 12px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.kat-matn-btn:hover { background: var(--kat-brend-yumshoq); color: var(--kat-brend); }
.kat-matn-btn svg { width: 17px; height: 17px; }
/* Kompyuterda ochish/yig'ish — faqat belgi (nomi `title` da), qator bitta qolsin */
@media (min-width: 641px) {
  .kat-filtr__amal .kat-matn-btn { padding: 8px; }
  .kat-matn-btn__matn { display: none; }
}
/* «N ta test topildi» — tugmalar yonida, alohida qator emas */
.kat-filtr__holat {
  margin: 0 6px 0 4px; font-size: .82rem; color: var(--kat-ink-soft); white-space: nowrap;
}
.kat-filtr__holat b { color: var(--kat-ink); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Daraxt
   -------------------------------------------------------------------------- */
.kat-daraxt { display: flex; flex-direction: column; gap: 8px; }

.kat-tugun { border-radius: var(--kat-r); }
.kat-tugun--fan {
  background: var(--kat-yuza); border: 1px solid var(--kat-chiziq);
  box-shadow: 0 2px 8px rgba(17, 32, 58, .05);
  overflow: hidden;
}

/* Tugun sarlavhasi — butun qator bosiladi (Explorer'dagidek).
   Element `<summary>`: ochish-yopishni brauzerning o'zi bajaradi, ya'ni JS
   kelmasa ham daraxt kezilaveradi. Brauzerning uchburchagi olib tashlanadi —
   o'rniga bizning `.kat-ok` strelkamiz. */
.kat-bosh-qator {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: none; border: 0; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer;
  list-style: none; transition: background .13s ease;
}
.kat-bosh-qator::-webkit-details-marker { display: none; }
.kat-bosh-qator::marker { content: ''; }
.kat-bosh-qator:hover { background: rgba(17, 32, 58, .035); }
.kat-bosh-qator:focus-visible { outline: 2px solid var(--kat-brend-2); outline-offset: -2px; }

.kat-ok {
  width: 18px; height: 18px; flex: none; color: var(--kat-ink-faint);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.kat-tugun[open] > .kat-bosh-qator .kat-ok { transform: rotate(90deg); }

.kat-ikon {
  display: grid; place-items: center; flex: none;
  border-radius: var(--kat-r-sm); background: var(--kat-brend-yumshoq); color: var(--kat-brend);
}
.kat-ikon svg { width: 60%; height: 60%; }
.kat-tugun--fan > .kat-bosh-qator .kat-ikon {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, #2864A0, #15365B); color: #fff;
}
.kat-tugun--bolim > .kat-bosh-qator .kat-ikon { width: 28px; height: 28px; }
.kat-tugun--papka > .kat-bosh-qator .kat-ikon {
  width: 27px; height: 27px;
  background: var(--kat-oltin-yumshoq); color: var(--kat-oltin);
}

.kat-nomlar { min-width: 0; flex: 1; }
.kat-nom {
  display: block; font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; color: var(--kat-ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kat-tugun--fan > .kat-bosh-qator .kat-nom { font-size: 1.08rem; }
.kat-tugun--bolim > .kat-bosh-qator .kat-nom { font-size: 1rem; }
.kat-tugun--papka > .kat-bosh-qator .kat-nom { font-size: .95rem; font-weight: 600; }
.kat-meta {
  display: block; font-size: .8rem; color: var(--kat-ink-faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bo'lim rangi — `data-bolim` bo'yicha (bir qarashda ajralib tursin) */
.kat-tugun--bolim[data-bolim="milliy"] .kat-ikon { background: #E6F0FA; color: #1F4E79; }
.kat-tugun--bolim[data-bolim="dtm"]    .kat-ikon { background: #EDE9FB; color: #5B3FBF; }
.kat-tugun--bolim[data-bolim="mavzu"]  .kat-ikon { background: #E4F2E5; color: #2E7D32; }
.kat-tugun--bolim[data-bolim="idc"]    .kat-ikon { background: #FDECCB; color: #A9660A; }
.kat-tugun--bolim[data-bolim="ielts"]  .kat-ikon { background: #DCF1F0; color: #0E7C74; }

/* Ichki qism — chap tomonda Explorer'dagi ingichka chiziq */
.kat-ich { padding: 0 0 4px 0; }
/* Ochilish animatsiyasi — faqat ODAM BOSGANDA (kursxona, 2026-09-18: «sahifa
   yuklanish paytidagi animatsiyani olib tashla»): ilgari har yuklanishda hamma
   ochiq papka birdaniga «suzib» chiqardi. `katalog.js` bosilgan tugunga
   `kat-ochilmoqda` qo'yadi; strelka ham faqat sahifa tayyor bo'lgach aylanadi
   (`kat--tayyor` — `transition` qo'shilishi o'zi animatsiya boshlamaydi). */
.kat-tugun.kat-ochilmoqda[open] > .kat-ich { animation: kat-ochil .17s ease both; }
.kat:not(.kat--tayyor) .kat-ok { transition: none; }
@keyframes kat-ochil { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.kat-tugun--fan > .kat-ich { border-top: 1px solid var(--kat-chiziq); padding-top: 2px; }
/* Har daraja ichkariga 42px surilardi, endi 30px (2026-09-28: chetdagi bo'sh
   joyni kichraytirish) — chiziq baribir strelka ostida turadi */
.kat-tugun--bolim > .kat-ich,
.kat-tugun--papka > .kat-ich {
  margin-left: 20px; padding-left: 10px; border-left: 1px solid var(--kat-chiziq-2);
}
.kat-tugun--bolim, .kat-tugun--papka { margin-inline: 5px; }

/* DARAJALAR ORASIDA CHIZIQ (2026-09-17, kursxona telefon skrinshoti: «pastdagisi
   bilan tepadagisi qo'shilib ketyapti — chiziq-chiziq qilib ajratilsa
   tushunarli bo'ladi»). Uch xil chegara:
     · OCHIQ bo'lim/papka sarlavhasi ostida — sarlavha ichidagi ro'yxatdan ajraladi;
     · yonma-yon bo'limlar, papkalar (va papkadan keyingi papkasiz test) orasida;
     · testlar orasida — ingichka punktir (qator o'zi ikki satr bo'lgan telefonda
       har test alohida blok bo'lib o'qiladi). */
.kat-tugun--bolim[open] > .kat-bosh-qator,
.kat-tugun--papka[open] > .kat-bosh-qator {
  border-bottom: 1px solid var(--kat-chiziq);
  border-radius: var(--kat-r-sm) var(--kat-r-sm) 0 0;
}
.kat-tugun--bolim + .kat-tugun--bolim,
.kat-tugun--papka + .kat-tugun--papka,
.kat-tugun--papka + .kat-test { border-top: 1px solid var(--kat-chiziq); }
.kat-test + .kat-test { border-top: 1px dashed var(--kat-chiziq); }
.kat-tugun--bolim > .kat-bosh-qator, .kat-tugun--papka > .kat-bosh-qator {
  border-radius: var(--kat-r-sm); padding: 7px 8px;
}

/* --------------------------------------------------------------------------
   Test qatori
   -------------------------------------------------------------------------- */
.kat-test {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--kat-r-sm);
  transition: background .13s ease;
}
.kat-test:hover { background: rgba(17, 32, 58, .035); }
.kat-test__ikon {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 8px; background: rgba(17, 32, 58, .05); color: var(--kat-ink-faint);
}
.kat-test__ikon svg { width: 15px; height: 15px; }
.kat-test[data-holat="bepul"] .kat-test__ikon { background: var(--kat-yashil-yumshoq); color: var(--kat-yashil); }
.kat-test[data-holat="ochiq"] .kat-test__ikon { background: var(--kat-brend-yumshoq); color: var(--kat-brend); }
.kat-test[data-holat="sotuvda"] .kat-test__ikon { background: var(--kat-oltin-yumshoq); color: var(--kat-oltin); }

.kat-test__nom {
  display: block; font-weight: 600; color: var(--kat-ink); font-size: .94rem; line-height: 1.3;
}
.kat-test__meta {
  display: block; font-size: .78rem; color: var(--kat-ink-faint); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Chip va amal — bir qatorda, lekin tor ekranda O'Z QATORIGA tushadi.
   `.javob-qator` dagi o'sha dars: `shrink-0` chiplar yonidagi `flex-1` matn
   390px da bir harfga qisilib qolardi. */
.kat-amal { display: flex; align-items: center; gap: 8px; flex: none; }

.kat-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: .76rem; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: rgba(17, 32, 58, .06); color: var(--kat-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kat-chip svg { width: 13px; height: 13px; }
.kat-chip--bepul { background: var(--kat-yashil-yumshoq); color: var(--kat-yashil); }
.kat-chip--ochiq { background: var(--kat-brend-yumshoq); color: var(--kat-brend); }
.kat-chip--narx { background: var(--kat-oltin-yumshoq); color: var(--kat-oltin); }
.kat-chip--xarid { background: rgba(46, 117, 182, .12); color: var(--kat-brend); }

.kat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: .84rem; line-height: 1;
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .14s ease, box-shadow .2s ease, background .16s ease, color .16s ease;
}
.kat-btn svg { width: 15px; height: 15px; }
.kat-btn:hover { transform: translateY(-1px); }
.kat-btn--asos {
  background: linear-gradient(135deg, #2864A0, #15365B); color: #fff;
  box-shadow: 0 8px 18px rgba(31, 78, 121, .22);
}
.kat-btn--asos:hover { color: #fff; }
.kat-btn--bepul {
  background: linear-gradient(135deg, #2E9B45, #1F6B30); color: #fff;
  box-shadow: 0 8px 18px rgba(31, 107, 48, .22);
}
.kat-btn--bepul:hover { color: #fff; }
.kat-btn--sotuv {
  background: linear-gradient(135deg, #F5A524, #D6860A); color: #3A2600;
  box-shadow: 0 8px 18px rgba(214, 134, 10, .24);
}
.kat-btn--sotuv:hover { color: #3A2600; }
/* MEHMONNING sotuv tugmasi — to'ldirilgan emas, konturli: u katalogda 30
   qatorda takrorlanadi va to'ldirilgan sariq devor bo'lib ko'rinardi, narx
   chipi esa ko'zdan yo'qolardi. O'quvchining HAQIQIY «Sotib olish» tugmasi
   to'ldirilgan bo'lib qoladi — u amal, bu esa havola. */
.kat-btn--sotuv-och {
  background: transparent; border-color: var(--kat-oltin); color: var(--kat-oltin);
  box-shadow: none;
}
.kat-btn--sotuv-och:hover { background: var(--kat-oltin-yumshoq); color: var(--kat-oltin); }
/* XODIMNING «Ko'rish» tugmasi — konturli: bu o'quvchining «Boshlash»i emas,
   testni muharrirda ochadi, va ko'z ikkalasini adashtirmasin. */
.kat-btn--xodim {
  background: transparent; border-color: var(--kat-brend-2); color: var(--kat-brend);
  box-shadow: none;
}
.kat-btn--xodim:hover { background: var(--kat-brend-yumshoq); color: var(--kat-brend); }

/* Nega bu hisobda «Boshlash»/«Sotib olish» yo'q — xodim va ota-onaga
   (`katalog.tomoshabin_izohi`). Filtr panelining ustida, bir marta. */
.kat-izoh {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 11px 14px;
  background: var(--kat-brend-yumshoq); color: var(--kat-ink);
  border: 1px solid rgba(46, 117, 182, .28); border-radius: var(--kat-r-sm);
  font-size: .9rem; line-height: 1.45;
}
.kat-izoh svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--kat-brend); }
/* Qulflangan qatordagi chaqiruv ATAYIN tugma emas: u katalogdagi har
   uchinchi qatorda takrorlanadi va tugma bo'lsa ko'z bepul testdagi haqiqiy
   tugmadan uziladi (`.omm-test__qulf` dagi o'sha qoida). */
.kat-havola {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: .82rem; font-weight: 600; color: var(--kat-ink-faint);
  text-decoration: none; white-space: nowrap; transition: color .15s ease;
}
.kat-havola:hover { color: var(--kat-brend); }

/* Papka izohi (`IdcFolder.izoh`, `core/_katalog_papka_izoh.html`) — papka
   ochilganda testlardan OLDIN. Chap chiziq bilan «matn», narx blokidan
   (`.kat-sotuv`) ajralib tursin; chetlari o'sha blok bilan bir tekisda. */
.kat-papka-izoh {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 6px 6px 36px; padding: 8px 10px 8px 12px;
  background: var(--kat-brend-yumshoq); color: var(--kat-ink);
  border: 1px solid rgba(46, 117, 182, .22); border-left: 3px solid var(--kat-brend-2);
  border-radius: var(--kat-r-sm);
  font-size: .9rem; line-height: 1.55;
}
.kat-papka-izoh__ikon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--kat-brend); }
.kat-papka-izoh__matn { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.kat-papka-izoh__tahrir { flex: none; margin: -4px -4px -4px 0; }
/* Xodim daraxtida izohsiz papka — «Izoh yozish» */
.kat-papka-izoh-yoq {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin: 2px 6px 6px 36px; font-size: .8rem; color: var(--kat-ink-faint);
}

/* Papka sarlavhasidagi narx bloki — tugma <button> ni <button> ichiga
   qo'yib bo'lmaydi, shuning uchun u sarlavha QATORIDAN TASHQARIDA turadi. */
.kat-sotuv {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 2px 8px 8px 42px; padding: 10px 12px;
  background: var(--kat-yuza-2); border: 1px solid var(--kat-chiziq);
  border-radius: var(--kat-r-sm);
}
.kat-sotuv__matn { flex: 1 1 200px; min-width: 0; font-size: .82rem; color: var(--kat-ink-soft); }
.kat-sotuv__matn b { color: var(--kat-ink); }
/* Ilova qobig'idagi `partials/buy_form.html` shu yerga tushadi — o'z eni
   bilan; `mt-3` ni bosib, qatorga tekis o'tirsin. */
.kat-sotuv form { margin-top: 0 !important; flex: 0 1 auto; }

.kat-sotuv-forma { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kat-tanlov--kichik { padding: 8px 10px; font-size: .84rem; }

/* Ota-ona: «Kim uchun» — farzand tanlovi (2026-10-03, `payments/ota_ona.py`) */
.kat-farzand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--kat-r);
  background: var(--kat-oltin-yumshoq); border: 1px solid rgba(17, 32, 58, .08);
}
.kat-farzand__sarlavha { font-weight: 700; color: var(--kat-ink); font-size: .9rem; }
.kat-farzand__tanlov {
  padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .86rem;
  color: var(--kat-ink-soft); background: var(--kat-yuza); border: 1px solid rgba(17, 32, 58, .1);
  text-decoration: none;
}
.kat-farzand__tanlov:hover { color: var(--kat-ink); }
.kat-farzand__tanlov--faol { background: var(--kat-oltin); border-color: var(--kat-oltin); color: #fff; }
.kat-farzand__tanlov--faol:hover { color: #fff; }
.kat-farzand__xarid { margin-left: auto; font-size: .86rem; }

/* Bo'sh holat */
.kat-yoq {
  text-align: center; padding: 44px 20px; color: var(--kat-ink-faint);
  background: var(--kat-yuza); border: 1px dashed var(--kat-chiziq); border-radius: var(--kat-r);
}
.kat-yoq strong { display: block; color: var(--kat-ink); font-size: 1.05rem; margin-bottom: 6px; }

/* `?joy=` bilan ochilgan tugun bir zum yoritiladi (`katalog.js`) */
.kat-yoritilgan > summary, .kat-test.kat-yoritilgan { animation: kat-yorit 2.4s ease; }
@keyframes kat-yorit {
  0%, 30% { background: var(--kat-oltin-yumshoq); box-shadow: inset 3px 0 0 var(--kat-oltin); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .kat-yoritilgan > summary, .kat-test.kat-yoritilgan { animation: none; }
}

/* Filtrdan o'tmagan tugun */
.kat-yashirin { display: none !important; }
/* Filtr yoqiq — umumiy sonlar berkitiladi (qarang `data-son-chip` izohi) */
.kat--filtrda [data-son-chip] { display: none; }

/* --------------------------------------------------------------------------
   Telefon
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .kat-filtr { position: static; padding: 10px; }
  .kat-tanlov { flex: 1 1 140px; }
  .kat-filtr__amal { margin-left: 0; width: 100%; justify-content: flex-end; }
  .kat-filtr__holat { margin-right: auto; }
  .kat-bosh-qator { padding: 11px 10px; gap: 9px; }
  .kat-tugun--fan > .kat-bosh-qator .kat-ikon { width: 36px; height: 36px; }
  .kat-tugun--fan > .kat-bosh-qator .kat-nom { font-size: 1.02rem; }
  .kat-tugun--bolim > .kat-ich, .kat-tugun--papka > .kat-ich { margin-left: 16px; padding-left: 9px; }
  .kat-tugun--bolim, .kat-tugun--papka { margin-inline: 4px; }
  /* Qator sinadi: chip va tugma O'Z QATORIGA tushadi — aks holda tugma
     qatorni cho'zib, nom bir harfga qisilardi (`.javob-qator` dagi o'sha
     dars: 390px da matnga 24px qolardi).

     Nom esa ikonka bilan BIR QATORDA qoladi (`flex-basis: 60%`, 100% emas):
     100% bo'lsa ikonka o'ziga alohida qator olardi va har qator 139px ga
     cho'zilardi — 49 testli kitobda bu bir necha ekran ortiqcha aylantirish.
     O'lchangan: 139px → 100px, nom kengligi 261px, gorizontal surish yo'q. */
  .kat-test { flex-wrap: wrap; }
  .kat-test .kat-nomlar { flex: 1 1 60%; order: 1; min-width: 0; }
  .kat-test__ikon { order: 0; }
  /* FAQAT test qatori. Ilgari bu qoida `.kat-amal` ning HAMMASIGA tegardi —
     fan/bo'lim/papka sarlavhasida ham: sarlavha qatori sinmasdi, chiplar
     100 % ni olib, NOM nolga siqilardi va telefonda fan, bo'lim, papka nomi
     umuman ko'rinmasdi (2026-09-17 skrinshoti — faqat ikonka va chiplar). */
  .kat-test .kat-amal { flex: 1 1 100%; order: 2; flex-wrap: wrap; margin-top: 2px;
                        padding-left: 39px; }   /* ikonka + gap: chiplar nom ostiga tushsin */
  /* Sarlavha qatori: strelka · ikonka · NOM bir qatorda (nom kerak bo'lsa
     o'raladi), chiplar esa nom OSTIGA, uning chizig'idan boshlab. */
  .kat-bosh-qator { flex-wrap: wrap; }
  .kat-bosh-qator > .kat-nomlar { flex: 1 1 55%; min-width: 0; }
  .kat-bosh-qator .kat-nom { white-space: normal; overflow-wrap: anywhere; }
  .kat-bosh-qator > .kat-amal { flex: 1 1 100%; flex-wrap: wrap; order: 3;
                                padding-left: 64px; }   /* strelka + ikonka + oraliqlar */
  .kat-sotuv, .kat-papka-izoh, .kat-papka-izoh-yoq { margin-left: 10px; margin-right: 4px; }
  .kat-test__nom { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Qorong'i rejim
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .kat {
  --kat-ink: #E8EEF7;
  --kat-ink-soft: rgba(232, 238, 247, .62);
  --kat-ink-faint: rgba(232, 238, 247, .44);
  --kat-yuza: #151F33;
  --kat-yuza-2: #111A2C;
  --kat-chiziq: #253148;
  --kat-chiziq-2: rgba(232, 238, 247, .12);
  --kat-brend: #8FC2EF;
  --kat-brend-2: #3E89D6;
  --kat-brend-yumshoq: #1E2F4B;
  --kat-oltin: #F0B04A;
  --kat-oltin-yumshoq: #3A2C11;
  --kat-yashil: #8BD48F;
  --kat-yashil-yumshoq: #16301B;
}
:root[data-theme="dark"] .kat-bosh-qator:hover,
:root[data-theme="dark"] .kat-test:hover { background: rgba(232, 238, 247, .05); }
:root[data-theme="dark"] .kat-test__ikon,
:root[data-theme="dark"] .kat-chip { background: rgba(232, 238, 247, .08); }
:root[data-theme="dark"] .kat-tugun--fan { box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .kat-filtr { box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .kat-tugun--fan > .kat-bosh-qator .kat-ikon {
  background: linear-gradient(135deg, #2D6DAF, #1F548A); color: #fff;
}
:root[data-theme="dark"] .kat-tugun--bolim[data-bolim="milliy"] .kat-ikon { background: #1E2F4B; color: #8FC2EF; }
:root[data-theme="dark"] .kat-tugun--bolim[data-bolim="dtm"]    .kat-ikon { background: #241F3E; color: #B9A7F0; }
:root[data-theme="dark"] .kat-tugun--bolim[data-bolim="mavzu"]  .kat-ikon { background: #16301B; color: #8BD48F; }
:root[data-theme="dark"] .kat-tugun--bolim[data-bolim="idc"]    .kat-ikon { background: #33260F; color: #F0B04A; }
:root[data-theme="dark"] .kat-tugun--bolim[data-bolim="ielts"]  .kat-ikon { background: #0F2B2A; color: #6FCFC6; }
:root[data-theme="dark"] .kat-btn--asos { background: linear-gradient(135deg, #2D6DAF, #1F548A); }
:root[data-theme="dark"] .kat-btn--bepul { background: linear-gradient(135deg, #2E9B45, #1F6B30); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kat {
    --kat-ink: #E8EEF7;
    --kat-ink-soft: rgba(232, 238, 247, .62);
    --kat-ink-faint: rgba(232, 238, 247, .44);
    --kat-yuza: #151F33;
    --kat-yuza-2: #111A2C;
    --kat-chiziq: #253148;
    --kat-chiziq-2: rgba(232, 238, 247, .12);
    --kat-brend: #8FC2EF;
    --kat-brend-2: #3E89D6;
    --kat-brend-yumshoq: #1E2F4B;
    --kat-oltin: #F0B04A;
    --kat-oltin-yumshoq: #3A2C11;
    --kat-yashil: #8BD48F;
    --kat-yashil-yumshoq: #16301B;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kat-ok { transition: none; }
  .kat-tugun.kat-ochilmoqda[open] > .kat-ich { animation: none; }
  .kat-btn:hover { transform: none; }
}