/* AVTOMATIK YIG'ILGAN — TAHRIRLAMANG.
   Manba: ui/components/*.css
   Qayta yig'ish: bash static/shared/ui/build.sh
   Qo'llanma:    static/shared/ui/README.md

   MUHIM: bu yerda FAQAT hb-components.css da YO'Q bo'lgan bo'laklar.
   Hammasi 'hbk-' prefiksi bilan — mavjud uslublarga tegmaydi. */

/* ── alert.css ── */
/* alert.js uchun — hb-alert da "warn" varianti yo'q edi */
.hbk-alert-warn { border-color: color-mix(in srgb, var(--hb-warning) 45%, transparent);
  background: color-mix(in srgb, var(--hb-warning) 12%, transparent); color: var(--hb-txt); }
.hbk-alert-ic { flex: none; font-size: 16px; line-height: 1.4; }

/* ── avatar.css ── */
/* ── avatar ─────────────────────────────────────────────────────────────
   `.hb-avatar` / `-lg` / `-acc` hb-components.css:277–280 da BOR.
   Bu yerda faqat DETERMINISTIK rang palitrasi (`colorSeed` xossasi):
   `hrm_discuss/discuss.css:170–181` dagi `hbd-c1…hbd-c12` bilan AYNAN bir
   xil formulalar — lekin `hbk-` prefiksi bilan, ya'ni butun tizimda
   ishlaydi (discuss.css faqat Suhbat sahifasida yuklanadi).
   Ranglar hb-tokens.css o'zgaruvchilaridan. */

.hbk-c1 { background: color-mix(in srgb, var(--hb-acc) 22%, var(--hb-sfc2)); color: var(--hb-acc-text) }
.hbk-c2 { background: color-mix(in srgb, var(--hb-info) 22%, var(--hb-sfc2)); color: var(--hb-info) }
.hbk-c3 { background: color-mix(in srgb, var(--hb-violet) 22%, var(--hb-sfc2)); color: var(--hb-violet) }
.hbk-c4 { background: color-mix(in srgb, var(--hb-warning) 22%, var(--hb-sfc2)); color: var(--hb-warning) }
.hbk-c5 { background: color-mix(in srgb, var(--hb-danger) 20%, var(--hb-sfc2)); color: var(--hb-danger) }
.hbk-c6 { background: color-mix(in srgb, var(--hb-ok) 20%, var(--hb-sfc2)); color: var(--hb-acc-text) }
.hbk-c7 { background: var(--hb-sfc2); color: var(--hb-txt) }
.hbk-c8 { background: color-mix(in srgb, var(--hb-info) 34%, var(--hb-sfc2)); color: var(--hb-txt) }
.hbk-c9 { background: color-mix(in srgb, var(--hb-violet) 34%, var(--hb-sfc2)); color: var(--hb-txt) }
.hbk-c10 { background: color-mix(in srgb, var(--hb-warning) 30%, var(--hb-sfc2)); color: var(--hb-txt) }
.hbk-c11 { background: color-mix(in srgb, var(--hb-acc) 34%, var(--hb-sfc2)); color: var(--hb-txt) }
.hbk-c12 { background: color-mix(in srgb, var(--hb-danger) 30%, var(--hb-sfc2)); color: var(--hb-txt) }

/* ── bar.css ── */
/* ── bar ────────────────────────────────────────────────────────────────
   `.hb-bar-*` hb-components.css:471–477 da BOR. Bu yerda faqat `tone`
   to'ldiruvchi rangi (`hbk-bar-fill` — kitning o'z belgisi, mavjud
   `.hb-bar-fill` qoidalariga tegmaydi). */
.hb-bar-row[class*="hbk-tone-"] .hbk-bar-fill { background: var(--hbk-tone); }

/* ── button.css ── */
/* button.js uchun — hb-btn ustiga qo'shimcha */
.hbk-btn-ic { display: inline-flex; align-items: center; margin-right: 2px; }
.hbk-btn-ic svg { width: 15px; height: 15px; }
/* `hb-components.css` da nofaol tugma uslubi UMUMAN yo'q edi. Qoida ATAYLAB
   `.hbk-btn` bilan chegaralangan — mavjud tugmalar o'zgarishsiz qoladi. */
.hbk-btn:disabled, .hbk-btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }
.hbk-btn:disabled:hover, .hbk-btn[disabled]:hover { filter: grayscale(.35); transform: none; }

/* ── card.css ── */
/* card.js uchun — hb-card ustiga sarlavha/tana/futer tuzilmasi */
.hbk-card { display: flex; flex-direction: column; }
.hbk-card-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px 0; }
.hbk-card-titles { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.hbk-card-ic { width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: var(--hb-sfc2); color: var(--hb-txt); }
.hbk-card-title { font-size: 14.5px; font-weight: 800; color: var(--hb-txt); line-height: 1.3; }
.hbk-card-sub { font-size: 12px; color: var(--hb-mut); margin-top: 2px; }
.hbk-card-actions { display: flex; gap: 8px; flex: none; }
.hbk-card-body { padding: 15px 16px; }
.hbk-card-head + .hbk-card-body { padding-top: 12px; }
.hbk-card-foot { padding: 12px 16px; border-top: 1px solid var(--hb-brd);
  display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 560px) {
  .hbk-card-head { padding: 13px 13px 0; }
  .hbk-card-body { padding: 13px; }
}

/* ── chip.css ── */
/* chip.js uchun — "tanlangan" holati */
.hbk-chip-on { background: var(--hb-acc); color: var(--hb-acc-ink); border-color: transparent; }

/* ── combobox.css ── */
/* combobox.js uchun — pill trigger + shisha popover/pastdan-varaq (bottom
   sheet). Popover/varaq `document.body`ga ilova qilinadi (JS) — shu bois
   `hbk-combo-panel` sahifa strukturasidan mustaqil, `position:fixed`.
   z-index: `hbk-modal-ov` (1200) dan YUQORI (forma maydonlari ko'pincha
   modal ICHIDA — masalan surveys "Masul hodim"), `hbk-toasts` (1400) dan
   PASTDA. */

.hbk-combo{ position:relative; }

/* Haqiqiy <select> — DOM'da, forma yuborilishi va .value/.onchange kodi
   uchun, lekin vizual yashirilgan ("visually-hidden" naqsh: display:none
   EMAS — ba'zi brauzer/uzatish holatlarida display:none elementlar forma
   bilan yuborilmasligi mumkin degan noaniqlikdan qochish uchun). */
.hbk-combo-native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hbk-combo-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:var(--hb-sfc2, var(--hb-sfc));
  border:1px solid var(--hb-brd);
  color:var(--hb-text, var(--hb-txt));
  font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; text-align:left;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.hbk-combo-trigger:hover{ border-color:color-mix(in srgb, var(--hb-acc) 40%, var(--hb-brd)); }
.hbk-combo-trigger:focus-visible{ outline:2px solid var(--hb-acc); outline-offset:2px; }
.hbk-combo-trigger.hbk-combo-open{
  border-color:var(--hb-acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--hb-acc) 18%, transparent);
}
.hbk-combo-trigger:disabled{ opacity:.5; cursor:default; }
.hbk-combo-trigger-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hbk-combo-trigger-arrow{
  flex:0 0 auto; font-size:11px; color:var(--hb-mut); transition:transform .15s;
}
.hbk-combo-trigger.hbk-combo-open .hbk-combo-trigger-arrow{ transform:rotate(180deg); }

/* ── Panel (popover desktop / bottom sheet mobil) — .hbk-glass/.hbk-glass-panel
   fon+blur+radius+soya beradi (JS qo'shadi), bu yerda faqat joylashuv/
   o'lcham/tarkib. ── */
.hbk-combo-panel{
  position:fixed; z-index:1260;
  display:flex; flex-direction:column;
  max-height:300px; border-radius:16px; overflow:hidden;
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  animation:hbkComboIn .15s ease both;
}
@keyframes hbkComboIn{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:none; } }

.hbk-combo-sheet-handle{ display:none; }

.hbk-combo-search-wrap{ padding:10px 12px 8px; flex:0 0 auto; }
.hbk-combo-search{
  width:100%; padding:9px 12px; border-radius:10px;
  border:1px solid var(--hb-brd); background:var(--hb-sfc);
  color:var(--hb-text, var(--hb-txt)); font:inherit; font-size:13px;
}
.hbk-combo-search:focus{ outline:none; border-color:var(--hb-acc); }

.hbk-combo-opts{ overflow-y:auto; flex:1 1 auto; padding:4px 6px 8px; scrollbar-width:thin; }
.hbk-combo-grp{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--hb-mut); padding:10px 10px 4px;
}
.hbk-combo-opt{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:10px;
  border:none; background:none; color:var(--hb-text, var(--hb-txt)); font:inherit; font-size:13.5px;
  cursor:pointer;
}
.hbk-combo-opt:hover, .hbk-combo-opt.hover{ background:color-mix(in srgb, var(--hb-acc) 12%, transparent); }
.hbk-combo-opt.active{ font-weight:700; color:var(--hb-acc-text, var(--hb-acc)); }
.hbk-combo-opt.active::after{ content:'✓'; float:right; }
.hbk-combo-opt.disabled{ opacity:.4; cursor:default; }
.hbk-combo-opt.disabled:hover{ background:none; }
.hbk-combo-empty{ padding:16px 12px; text-align:center; color:var(--hb-mut); font-size:13px; }

.hbk-combo-scrim{
  position:fixed; inset:0; z-index:1250;
  background:color-mix(in srgb, #000 42%, transparent);
  animation:hbkComboFade .15s ease both;
}
@keyframes hbkComboFade{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width:640px){
  .hbk-combo-panel.hbk-combo-sheet{
    left:0 !important; right:0; top:auto !important; bottom:0; width:auto !important;
    max-width:none; border-radius:20px 20px 0 0; max-height:70vh;
    animation:hbkComboSheetIn .22s cubic-bezier(.32,.72,0,1) both;
  }
  .hbk-combo-sheet .hbk-combo-sheet-handle{
    display:block; width:36px; height:4px; border-radius:2px;
    background:var(--hb-brd); margin:10px auto 4px; flex:0 0 auto;
  }
  .hbk-combo-sheet .hbk-combo-opts{ max-height:none; }
}

@keyframes hbkComboSheetIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .hbk-combo-panel, .hbk-combo-scrim{ animation:none; }
}

/* ── empty.css ── */
/* empty.js uchun — sarlavha va izoh matni */
.hbk-empty-title { font-size: 14px; font-weight: 800; color: var(--hb-txt); }
.hbk-empty-text { font-size: 12.5px; color: var(--hb-mut); max-width: 380px; line-height: 1.6; }

/* ── field.css ── */
/* field.js uchun — maydon o'rami */
.hbk-field { margin-bottom: 12px; }
.hbk-req { color: var(--hb-danger); }

/* `flush` — konteyner o'zi `gap` bilan bo'shliq bergan joylarda o'ramning
   12px pastki bo'shlig'i ortiqcha siljish beradi (1-to'lqinda 5 marta
   `css:{marginBottom:0}` bilan chetlab o'tilgan). */
.hbk-field.hbk-field-flush { margin-bottom: 0; }

/* ── glass.css ── */
/* ── glass.css — Mac-style yumshoq-yumaloq + biroz shaffof "shisha" sirt ──
   2026-08-19 kechqurun, sidebar ikki-bosqichli rail+flyout redizayni
   doirasida qo'shildi (buyurtmachi: "border-radiuslarni mac-style
   ko'rinishda va bir oz shaffof effekt"). Faqat CSS (JS builder shart
   emas — bu klasslar server-render qilingan Django markupga (masalan
   template/shared/hb_nav_items.html, hb_shell_base.html) TO'G'RIDAN-
   TO'G'RI class= sifatida qo'yiladi, UI.* konstruktoriga ehtiyoj yo'q).
   Boshqa QOIDA (README.md): mavjud elementlar o'zgarmaydi, hammasi
   `hbk-` prefiksi bilan — shu bois sidebar/topbar uchun yozilgan bo'lsa
   ham, istalgan KEYINGI sahifa-redizayni (buyurtmachi: "shu ui
   elementlardan foydalana... butun tizim bir xilda") xuddi shu
   klasslarni suzuvchi panel/asbob panelida qayta ishlatishi mumkin.

   Ranglar hb-tokens.css o'zgaruvchilaridan — qotirilgan hex yo'q, shu
   bois yorug'/qorong'i mavzuning ikkalasida ham to'g'ri ishlaydi
   (--hb-sfc/--hb-bg allaqachon har mavzuda qayta belgilangan). */

/* Bazaviy "shisha" sirt — fon (yarim shaffof, color-mix orqali —
   qattiq hex emas, shu bois tema o'zgarganda o'zi to'g'ri qiymatga
   o'tadi) + orqa fonni xiralashtirish. `color-mix`/`backdrop-filter`ni
   qo'llab-quvvatlamaydigan juda eski brauzerlar uchun pastdagi
   @supports zaxira — to'liq qattiq sirt (shaffoflik yo'q, lekin
   o'qilishi/ishlashi buzilmaydi). */
.hbk-glass{
  background: color-mix(in srgb, var(--hb-sfc) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--hb-brd);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .hbk-glass{ background: var(--hb-sfc); }
}

/* Suzuvchi panel (masalan sidebar flyout, kelajakda — dropdown/popover) —
   Mac-style keng radius + yumshoq soya, .hbk-glass bilan birga ishlatiladi. */
.hbk-glass-panel{
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
  padding: 8px;
}
.hbk-glass-panel.hbk-glass{ /* — allaqachon yuqoridagi .hbk-glass fon/blur beradi */ }

/* Gorizontal asbob-panel (masalan topbar) — xuddi shu shisha tili.
   2026-08-22 (buyurtmachi so'rovi): pastki ikkita burchak endi sidebar
   (`#hbSidebar{border-radius:0 24px 24px 0}`) bilan bir xil uslubda
   AYLANTIRILGAN — topbar tepa chekkaga, sidebar chap chekkaga yopishgan,
   ikkalasining "tashqi" chegarasi to'g'ri qoladi, ICHKI (ko'rinadigan)
   burchaklari esa bir xil dumaloqlanadi. Pastki qattiq chiziq o'rniga
   yumshoq soya saqlanadi.
   [MUHIM, tuzatildi 2026-08-24: bu qoida ilgari FAQAT hb-kit.css'ga
   QO'LDA qo'shilgan edi (build.sh manba EMAS), shu bois keyingi
   `build.sh` qayta yig'ishda YO'QOLIB QOLARDI — manba shu yerga
   ko'chirildi, YANA burchak radiusi endi HAR BIRI ALOHIDA
   o'zgaruvchidan (hb-tokens.css --hb-top-rad-*) — "Ranglar" varag'i
   #hbTopbar'ga inline qayta belgilasa (hbApplyNavbarRadius, hb-ui.js)
   burchak mustaqil o'zgaradi, standart qiymat esa qattiq-kodlangan
   bilan bir xil.] */
.hbk-glass-bar{
  /* 2026-08-24 ("Ranglar" varag'i, buyurtmachi topgan kamchilik): ilgari
     shu formula --hb-bg'ga TO'G'RIDAN-TO'G'RI bog'langan edi — navbar accent
     tanlansa ham FON o'zgarmasdi (faqat --hb-acc'ga bog'liq kichik urg'ular
     — til belgisi, avatar — o'zgarardi). --hb-top-bg-mix (standart holatda
     shunchaki var(--hb-bg)ga teng, hbApplyNavbarAccent() accent tanlansa
     uni color-mix(...accent...var(--hb-bg)) bilan qayta belgilaydi, hb-ui.js)
     endi ORALIQ qatlam sifatida qo'shildi — natija shu yerdagi shaffoflik
     formulasi ICHIDA ishlatiladi, "shisha" effekti saqlanadi.

     2026-08-24, UCHINCHI TUZATISH ("baribir bir xil chiqmayabdi" — buyurtmachi
     3-marta takrorladi): --hb-top-bg-mix'ni 85%ga ko'tarish YETARLI EMAS
     edi — SABABI shu FORMULANING O'ZIDAGI IKKINCHI, ALOHIDA shaffoflik
     qatlami: natija yana 74% qattiq / 26% `transparent` bilan
     aralashtirilardi, ya'ni orqadagi (odatda YENGIL/oq) sahifa kontenti
     "ko'rinib", rangni yana bir bor OCHIB yuborardi — sidebar esa BUTUNLAY
     QATTIQ panel, bu ikkinchi qatlamga UMUMAN duch kelmaydi. Standart
     (accent tanlanmagan) holatda bu 74% ATAYLAB saqlanadi — "shisha"
     uslubining o'zi shunga asoslangan. Lekin accent TANLANGANDA
     (--hb-top-opacity, hbApplyNavbarAccent() tomonidan yuqori qiymatga
     o'rnatiladi) — deyarli TO'LIQ qattiq (blur teksturasi hamon qoladi,
     lekin orqa kontent "ko'rinib" rangni ochib yubormaydi). */
  background: color-mix(in srgb, var(--hb-top-bg-mix, var(--hb-bg)) var(--hb-top-opacity, 74%), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--hb-brd);
  box-shadow: var(--hb-shadow-sm);
  border-radius:var(--hb-top-rad-tl,0px) var(--hb-top-rad-tr,0px) var(--hb-top-rad-br,24px) var(--hb-top-rad-bl,24px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .hbk-glass-bar{ background: var(--hb-top-bg-mix, var(--hb-bg)); }
}

/* Aylana-yorliq faol holat ("rounded highlight pill") — istalgan ro'yxat
   qatoriga qo'shib bo'ladigan umumiy belgi. */
.hbk-pill-active{ border-radius: var(--hb-pill) !important; }

/* Brend-langar "chip" — logotip/belgi atrofini asosiy ro'yxatdan
   "ajralib tursin, lekin bachkana bo'lmasin" tarzda ajratadi (buyurtmachi
   so'rovi, 2026-08-19 kechqurun). Faqat statik yumshoq fon+soya+radius —
   animatsiya/sakrash YO'Q, o'lcham katta emas (tashqi konteynerdan
   meros). */
.hbk-brand-tile{
  border-radius: var(--hb-radius-md);
  background: color-mix(in srgb, var(--hb-sfc2) 94%, transparent);
  border: 1px solid var(--hb-brd);
  box-shadow: var(--hb-shadow-sm);
  display: grid;
  place-items: center;
}

/* "Premium widget" karta formasi (2026-08-19 kechqurun, bosh sahifa
   ikkinchi bosqich — mac/Sonoma-uslub ikki ustunli boshqaruv paneli).
   `.hbk-glass` fon/blur/border'ni beradi — bu klass FAQAT forma (radius/
   soya/hover): ikkalasi BIRGA qo'llanadi, masalan
   `class="hb-card hbk-glass hbk-glass-card"`. Ajratilgan sabab: ba'zi
   joyda (masalan topbar) faqat fon kerak, forma emas.
   `var(--hb-radius)` allaqachon 22px (hb-tokens.css) — bosh sahifa TZ'i
   aynan shu qiymatni so'ragan, qattiq raqam YO'Q. Bir martalik/sahifaga
   xos "glass card" CSS o'rniga shu YERGA qo'shildi — istalgan boshqa
   ilova (statistik/kontent kartalarini "premium" qilmoqchi bo'lsa) qayta
   ishlatishi mumkin. */
.hbk-glass-card{
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.hbk-glass-card:hover{ box-shadow: var(--hb-shadow); }

/* ── hero.css ── */
/* hero.css — Shisha-effektli "hero" banner (2026-08-19, Akademiya
   Kurslar/Bosh sahifa redizayni doirasida qo'shildi, buyurtmachi: "Davom
   eting" bo'limi shisha-ko'tarilgan hero banner bo'lsin — sarlavha,
   bo'lim yorlig'i, silliq egri progress, qolgan kun soni, porlovchi CTA").
   hero.js YO'Q — glass.css naqshi bilan bir xil: bu klasslar to'g'ridan-
   to'g'ri sahifa JS'ida (yoki Django markupda) class= sifatida qo'llanadi,
   UI.* konstruktoriga ehtiyoj yo'q. `.hbk-glass` bilan BIRGA ishlatiladi:
   `class="hbk-hero hbk-glass"` — shisha fon/blur .hbk-glass'dan, shakl/
   joylashuv shu fayldan. Istalgan "asosiy CTA banner" ehtiyoji (Akademiya
   "Bugungi dars"dan tashqari, kelajakda boshqa modulning "featured" bloki)
   qayta ishlatishi mumkin — Akademiyaga xos hech narsa yo'q.

   Rang --hbk-tint orqali moslanadi (berilmasa --hb-acc) — Akademiyada
   departament rangi (--pos-accent) shu o'zgaruvchiga bog'lanadi
   (style="--hbk-tint:var(--pos-accent)"), shu bois bo'lim rangi
   o'zgarganda hero ham avtomatik moslashadi. Qattiq hex yo'q — hb-tokens.css
   o'zgaruvchilaridan, ikkala mavzuda ham to'g'ri ishlaydi. */

.hbk-hero{
  position: relative; overflow: hidden;
  border-radius: var(--hb-radius);
  padding: 24px;
  isolation: isolate;
}
/* Dekorativ xiralashtirilgan "orb"lar — matnga xalaqit bermaydi
   (z-index:-1, pointer-events yo'q). */
.hbk-hero::before, .hbk-hero::after{
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 60%, transparent), transparent 70%);
  pointer-events: none;
}
.hbk-hero::before{ width: 260px; height: 260px; top: -120px; right: -70px; opacity: .35; }
.hbk-hero::after{ width: 170px; height: 170px; bottom: -85px; left: -40px; opacity: .22; }

.hbk-hero-eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--hbk-tint, var(--hb-acc));
}
.hbk-hero-title{
  font-size: 22px; font-weight: 900; letter-spacing: -.01em; line-height: 1.25;
  margin: 6px 0 2px; color: var(--hb-txt);
}
.hbk-hero-tag{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--hb-pill);
  background: color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 16%, transparent);
  color: var(--hbk-tint, var(--hb-acc));
  font-size: 11.5px; font-weight: 800;
}
.hbk-hero-meta{ font-size: 13px; font-weight: 700; color: var(--hb-mut); margin-top: 8px; }

/* Silliq, qalin, egri (pill) progress — oddiy hb-progress'dan (4px, keskin)
   ATAYLAB farqli: balandroq (10px) + to'ldirilgan qismda porlash (glow). */
.hbk-hero-progress{
  margin-top: 16px;
  height: 10px; border-radius: var(--hb-pill);
  background: color-mix(in srgb, var(--hb-txt) 10%, transparent);
  overflow: hidden; position: relative;
}
.hbk-hero-progress-fill{
  height: 100%; border-radius: var(--hb-pill);
  background: linear-gradient(90deg, var(--hbk-tint, var(--hb-acc)), color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 55%, white));
  box-shadow: 0 0 14px color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 70%, transparent);
  transition: width .6s cubic-bezier(.22,.8,.36,1);
}

/* Porlovchi ("glowing") CTA — `.hb-btn`/`.hbk-btn` bilan BIRGA qo'llanadi
   (class="hb-btn hbk-hero-cta"), tugmaning o'z rangini o'zgartirmaydi,
   faqat porlash soyasi + hover'da kuchayishini qo'shadi. */
.hbk-hero-cta{
  margin-top: 16px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 45%, transparent);
  transition: box-shadow .18s ease, transform .12s ease;
}
.hbk-hero-cta:hover{
  box-shadow: 0 12px 32px color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 60%, transparent);
  transform: translateY(-1px);
}

@media (max-width: 560px){
  .hbk-hero{ padding: 18px; }
  .hbk-hero-title{ font-size: 19px; }
}

/* ── hint.css ── */
/* ── hint ───────────────────────────────────────────────────────────────
   `.hb-hint` hb-components.css:412 da BOR — bu yerda faqat `truncate`. */
.hbk-hint-trunc {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── iconbtn.css ── */
/* ── iconbtn ────────────────────────────────────────────────────────────
   `.hb-iconbtn` / `-sm` / `-danger` hb-components.css:450–453 da BOR —
   bu yerda faqat ULARDA YO'Q holatlar to'ldiriladi. Loyihada
   `.hb-iconbtn.is-on` kombinatsiyasi hech qayerda ishlatilmagan
   (tekshirildi), shuning uchun bu qoida mavjud hech narsani buzmaydi.
   Ranglar — faqat hb-tokens.css o'zgaruvchilaridan. */

/* bosilgan / yoqilgan holat (hb-editor `is-on` konvensiyasi bilan bir xil) */
.hb-iconbtn.is-on {
  background: color-mix(in srgb, var(--hb-acc) 18%, var(--hb-sfc2));
  border-color: color-mix(in srgb, var(--hb-acc) 55%, transparent);
  color: var(--hb-acc); }
.hb-iconbtn.is-on:hover {
  background: color-mix(in srgb, var(--hb-acc) 26%, var(--hb-sfc2)); }

/* nofaol */
.hb-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.hb-iconbtn:disabled:hover { border-color: var(--hb-brd); background: var(--hb-sfc2); }

/* size — `sm` ESKI klassda (hb-iconbtn-sm), qolganlari shu yerda */
.hb-iconbtn.hbk-sz-xs { width: 26px; height: 26px; font-size: 11px; }
.hb-iconbtn.hbk-sz-md { width: 36px; height: 36px; font-size: 14px; }
.hb-iconbtn.hbk-sz-lg { width: 44px; height: 44px; font-size: 16.5px; }

/* tone — `danger` ESKI klassda (hb-iconbtn-danger), qolganlari shu yerda */
.hb-iconbtn[class*="hbk-tone-"] { color: var(--hbk-tone); }
.hb-iconbtn[class*="hbk-tone-"]:hover {
  border-color: color-mix(in srgb, var(--hbk-tone) 55%, transparent);
  background: color-mix(in srgb, var(--hbk-tone) 14%, var(--hb-sfc2)); }

/* ikonka ichidagi SVG doim markazda va o'lchamga moslashsin */
.hb-iconbtn > svg { width: 1.15em; height: 1.15em; display: block; }

/* ── loader.css ── */
/* loader.css — Muzlatilgan-shisha ("frosted glass") doiraviy yuklanish
   ko'rsatkichi (2026-08-19, Akademiya Kutubxona flipbook tayyorlash holati
   uchun qo'shildi). `.hbk-glass` bilan BIRGA ishlatiladi: class=
   "hbk-loader-pill hbk-glass". Doira progress SVG `<circle>` orqali —
   aniq foiz bo'lsa chaqiruvchi `stroke-dashoffset`ni inline hisoblab
   qo'yadi (JS, quyidagi izohga qarang), noaniq holatda `.hbk-loader-spin`
   klassi bilan aylanadi. Istalgan "tayyorlanmoqda..." holati (fayl
   yuklash, PDF render, kelajakda boshqa modul) qayta ishlatishi mumkin. */
.hbk-loader-pill{
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 32px; border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
}
.hbk-loader-ring-wrap{ position: relative; width: 64px; height: 64px; }
.hbk-loader-ring{ width: 64px; height: 64px; transform: rotate(-90deg); }
.hbk-loader-ring-track{
  fill: none; stroke: color-mix(in srgb, var(--hb-txt) 10%, transparent); stroke-width: 5;
}
.hbk-loader-ring-fill{
  fill: none; stroke: var(--hb-acc); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .25s ease;
}
/* Noaniq (indeterminate) holat — foiz hali noma'lum bo'lsa, butun halqa
   aylanadi (chaqiruvchi `.hbk-loader-spin`ni qo'shadi, stroke-dasharray'ni
   qisman qoldiradi). */
.hbk-loader-spin .hbk-loader-ring{ animation: hbk-loader-spin 1s linear infinite; }
@keyframes hbk-loader-spin{ to{ transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce){
  .hbk-loader-spin .hbk-loader-ring{ animation-duration: 2.4s; }
}
.hbk-loader-pct{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: var(--hb-txt); font-variant-numeric: tabular-nums;
}
.hbk-loader-label{ font-size: 12.5px; font-weight: 700; color: var(--hb-mut); text-align: center; }

/* ── mobile.css ── */
/* ── mobileList / mobileRow ─────────────────────────────────────────────
   `.hb-mobile-list` (≤760px ko'rinish almashuvi) va `.hb-mobile-row`
   (3 ustunli grid) hb-components.css:346–348 da BOR. Bu yerda faqat
   qator ichidagi matn qatlami. */
.hbk-mrow-lead { display: flex; align-items: center; }
.hbk-mrow-lead:empty { display: none; }
.hbk-mrow-main { min-width: 0; }
.hbk-mrow-title { font-weight: 700; font-size: 13px; line-height: 1.35;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbk-mrow-sub { color: var(--hb-mut); font-size: 11.5px; font-weight: 600;
                margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.hbk-mrow-side { display: flex; align-items: center; gap: 6px; justify-self: end; }
.hbk-mrow-side:empty { display: none; }

/* ── modal.css ── */
/* ── modal ──────────────────────────────────────────────────────────────
   `hb-components.css` da dialog UMUMAN yo'q edi. Hammasi `hbk-` prefiksi
   bilan, ranglar faqat hb-tokens.css o'zgaruvchilaridan. */

/* ── Mobil ko'rish maydoni (2026-08-20, platforma-darajasidagi talab) ────
   IKKI ALOHIDA muammo, ikki alohida yechim — chalkashtirmaslik kerak:

   1) BROUZER PANELI (URL qatori) — `100vh` mobil brauzerda YIG'ILGAN
      paneldagi balandlikni bildiradi, shu bois panel OCHIQ turganda oyna
      ekrandan pastga chiqib ketardi (pastki tugmalar ko'rinmasdi). Yechim
      — `100dvh` (dynamic viewport height), butun platformada standart.

   2) VIRTUAL KLAVIATURA — `dvh` klaviaturani HISOBGA OLMAYDI (u faqat
      brouzer paneliga reaksiya qiladi). Oyna ichidagi maydonga fokus
      berilganda klaviatura oynaning pastki qismini (aynan tugmalarni)
      to'sib qo'yardi. Yechim — `visualViewport` o'lchovi (modal.js) shu
      `--hbk-kb` o'zgaruvchisiga klaviatura balandligini yozadi; oyna
      SHUNCHAGA qisqaradi va parda shunchaga to'ldiriladi. Klaviatura
      yopiq bo'lsa qiymat 0px — ya'ni xatti-harakat AVVALGIDEK qoladi. */
.hbk-modal-ov {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  padding-bottom: calc(20px + var(--hbk-kb, 0px));
  /* 2026-08-19 (yanada kuchliroq fon TZ) — avvalgi 72% color-mix + blur(3px)
     hali ham "yuvilib ketgan" ko'rinardi. Endi qattiq qora + kuchli blur/
     saturate — orqa fon deyarli ko'rinmas bo'lib, modal e'tiborni butunlay
     o'ziga tortadi. FAQAT shu bir qatlam — .hbk-modal (karta) qat'iy solid
     bo'lib qoladi, TEGILMAYDI. */
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  animation: hbk-modal-in .16s ease both; }

.hbk-modal {
  width: 100%; max-width: 520px;
  max-height: calc(100dvh - 40px - var(--hbk-kb, 0px));
  display: flex; flex-direction: column;
  background: var(--hb-sfc); color: var(--hb-txt);
  border: 1px solid var(--hb-brd); border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow); overflow: hidden;
  animation: hbk-modal-up .18s cubic-bezier(.2, .8, .3, 1) both; }
.hbk-modal-sm { max-width: 400px; }
.hbk-modal-lg { max-width: 820px; }

.hbk-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--hb-brd); flex: none; }
.hbk-modal-title { font-weight: 800; font-size: 15px; }
.hbk-modal-body { padding: 16px; overflow: auto; flex: 1; min-height: 0; font-size: 13px; }
.hbk-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--hb-brd);
  background: var(--hb-sfc2); flex: none; flex-wrap: wrap; }

/* sahifa orqa fonda siljimasin */
body.hbk-modal-lock { overflow: hidden; }

@keyframes hbk-modal-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes hbk-modal-up {
  from { opacity: 0; transform: translateY(12px) scale(.985) }
  to   { opacity: 1; transform: none } }

@media (max-width: 560px) {
  .hbk-modal-ov { padding: 0; padding-bottom: var(--hbk-kb, 0px); align-items: flex-end; }
  .hbk-modal { max-width: none;
               max-height: calc(92dvh - var(--hbk-kb, 0px));
               border-radius: var(--hb-radius) var(--hb-radius) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hbk-modal-ov, .hbk-modal { animation: none; }
}

/* ── progress.css ── */
/* progress.js uchun — chiziq ustidagi sarlavha */
.hbk-progress-top { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--hb-mut); }
.hbk-progress-top b { color: var(--hb-txt); font-variant-numeric: tabular-nums; }

/* ── prose.css ── */
/* prose.css — AI/markdown javobi ichidagi jadval uslubi (2026-08-19,
   Akademiya Tez-yordam/AI Yordamchi redizayni doirasida qo'shildi —
   haqiqiy bug: AI javobidagi `| ustun |` jadval sintaksisi HTML
   `<table>`ga aylantirilardi (hb_shell_base.html::hbAiRenderMarkdown),
   lekin hech qanday uslub yo'q edi — brauzerning standart chiziqli
   jadvali ko'rinardi). Bu klasslar hbAiRenderMarkdown chiqargan
   `<table class="hbk-md-table">` ustiga to'g'ridan-to'g'ri tushadi —
   global suzuvchi AI vidjeti (hb_shell_base.html) VA Akademiyaning
   #/quickref sahifasi (quickref.js, xuddi shu funksiyani qayta
   ishlatadi) ikkalasida ham bir xil ko'rinish. Istalgan kelajakdagi
   "AI javobi/markdown matn" ehtiyoji qayta ishlatishi mumkin. */
.hbk-md-table-wrap{
  overflow-x: auto; margin: 8px 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hb-txt) 8%, transparent);
}
.hbk-md-table{
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.hbk-md-table th, .hbk-md-table td{
  padding: 9px 13px; text-align: left; white-space: normal;
  border-bottom: 1px solid color-mix(in srgb, var(--hb-txt) 8%, transparent);
}
.hbk-md-table th{
  background: color-mix(in srgb, var(--hb-txt) 6%, transparent);
  font-weight: 800; color: var(--hb-txt);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
}
.hbk-md-table tbody tr:nth-child(even) td{
  background: color-mix(in srgb, var(--hb-txt) 3%, transparent);
}
.hbk-md-table tbody tr:last-child td{ border-bottom: none; }

/* 2026-08-19 QO'SHIMCHA: sarlavha (#/##/###) va gorizontal ajratuvchi
   (---) — hbAiRenderMarkdown xuddi shu jadval bilan bir qatorda
   ishlaydigan qo'shimcha blok turlari, shu bois bir xil faylda. */
.hb-ai-h2, .hb-ai-h3, .hb-ai-h4{ font-weight: 700; margin: 14px 0 6px; color: var(--hb-txt); line-height: 1.3; }
.hb-ai-h2{ font-size: 17px; }
.hb-ai-h3{ font-size: 15.5px; }
.hb-ai-h4{ font-size: 14px; }
.hb-ai-hr{ border: none; border-top: 1px solid var(--hb-brd); margin: 12px 0; }

/* ── row.css ── */
/* row.js uchun — umumiy ro'yxat qatori (hb- to'plamida yo'q edi) */
.hbk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--hb-brd); border-radius: var(--hb-radius-md, 18px);
  background: var(--hb-sfc); margin-bottom: 8px; }
.hbk-row-main { flex: 1; min-width: 0; }
.hbk-row-title { font-size: 14px; font-weight: 700; color: var(--hb-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbk-row-sub { font-size: 12px; color: var(--hb-mut); margin-top: 2px; }
.hbk-row-side { flex: none; display: flex; align-items: center; gap: 8px; }
.hbk-row-click { cursor: pointer; transition: border-color .15s, transform .1s, box-shadow .15s; }
.hbk-row-click:hover { border-color: var(--hb-acc); box-shadow: var(--hb-shadow-sm); }
.hbk-row-click:active { transform: scale(.995); }
.hbk-row-click:focus-visible { outline: 2px solid var(--hb-acc); outline-offset: 2px; }
.hbk-row-active { border-color: var(--hb-acc);
  background: color-mix(in srgb, var(--hb-acc) 8%, var(--hb-sfc)); }
@media (max-width: 560px) { .hbk-row { padding: 11px 12px; gap: 10px; } }

/* ── section_title.css ── */
/* ── sectionTitle ───────────────────────────────────────────────────────
   `.hb-section-title` hb-components.css:413 da BOR — bu yerda faqat
   `side` (o'ngdagi amal) berilgan holatdagi qator. */
.hbk-sect { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hbk-sect > .hb-section-title { flex: 1; min-width: 0; }
.hbk-sect-side { display: flex; align-items: center; gap: 8px; flex: none; }

/* ── segmented.css ── */
/* ── segmented ──────────────────────────────────────────────────────────
   2026-08-24 (buyurtmachi, UCH MARTA takrorlangan qat'iy qoida: "hech
   qachon, hech qayerda tugmalarni bitta qolipga solma — har doim
   dona-dona alohida tursin") — bu YAGONA, PLATFORMA BO'YLAB ishlatiladigan
   segment-kontrol komponenti (`UI.html.segmented`/`UI.segmented`, 27+
   joyda ishlatiladi). Avvalgi dizayn — BITTA umumiy kapsula foni
   (`.hbk-seg{background:var(--hb-sfc2)}`) + ichida sirpanadigan "thumb"
   (`.hbk-seg-thumb`) — ANIQ shu "bitta qolip" ko'rinishini berardi.
   Endi HAR BIR tugma O'ZINING alohida foni/chegarasi bilan chiziladi,
   umumiy kapsula fon/thumb BUTUNLAY OLIB TASHLANDI. `.hbk-seg-thumb`
   DOM tuguni segmented.js'da hamon yaratiladi (JS'ga tegilmadi — sof
   vizual qatlam edi, funksional rolga ega emas), lekin endi HECH QANDAY
   ko'rinadigan stilga ega emas (pastga qarang) — xavfsiz, chunki
   tugmalarning o'zi `.active`/`aria-selected` orqali ALLAQACHON to'g'ri
   ishlaydi (segmented.js'ning click-handleri thumb'ga bog'liq emas). */

.hbk-seg {
  position: relative; display: inline-flex; align-items: stretch;
  gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hbk-seg::-webkit-scrollbar { display: none; }

.hbk-seg-thumb { display: none; }

.hbk-seg-btn {
  position: relative; z-index: 1; flex: none; min-width: 0;
  height: 32px; padding: 0 14px; border-radius: var(--hb-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--hb-brd); background: var(--hb-sfc2); cursor: pointer;
  color: var(--hb-mut); font-family: inherit;
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s; }
.hbk-seg-btn:hover { color: var(--hb-txt); }
.hbk-seg-btn.active {
  color: var(--hb-txt); background: var(--hb-sfc);
  border-color: var(--hb-brd2); box-shadow: var(--hb-shadow-sm); }
.hbk-seg-btn > svg { width: 1.05em; height: 1.05em; }

.hbk-seg.hbk-sz-xs .hbk-seg-btn { height: 26px; padding: 0 10px; font-size: 11px; }
.hbk-seg.hbk-sz-sm .hbk-seg-btn { height: 29px; padding: 0 12px; font-size: 12px; }
.hbk-seg.hbk-sz-lg .hbk-seg-btn { height: 40px; padding: 0 20px; font-size: 13.5px; }

.hbk-seg[class*="hbk-tone-"] .hbk-seg-btn.active {
  color: var(--hbk-tone);
  border-color: color-mix(in srgb, var(--hbk-tone) 45%, transparent); }

/* ── select.css ── */
/* select.js uchun — brauzer strelkasi o'rniga o'zimizniki */
.hbk-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--hb-mut) 50%),
                    linear-gradient(135deg, var(--hb-mut) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ── _sizes.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   _sizes.css — UMUMIY (UNIVERSAL) XOSSALAR uslubi
   AGENT_GUIDE.md §4. Bu yerda UCHTA sinf oilasi:

     .hbk-sz-<xs|sm|md|lg>              ← `size`
     .hbk-tone-<acc|ok|warn|danger|info|violet|muted>   ← `tone`
     .hbk-r-<none|sm|md|lg|pill>        ← `radius`

   QOIDALAR
   • Hammasi `hbk-` prefiksi bilan — mavjud `hb-*` uslublariga TEGMAYDI.
   • Bu sinflar FAQAT ochiq so'ralganda qo'shiladi (xossa berilmasa — HTML
     bir bayt ham o'zgarmaydi), shu bois radius'da `!important` xavfsiz:
     u aynan "shu elementga shu radius" degan buyruq.
   • Rang QOTIRILMAGAN — hammasi hb-tokens.css o'zgaruvchilaridan.
   • `tone` ni ALLAQACHON o'zi qamragan elementlar (chip, alert, stat,
     progress-'ok') bu yerdagi qoidalarga UMUMAN tushmaydi — ularda eski
     `hb-chip-soft-*` / `hb-alert-*` xatti-harakati saqlanadi.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Token taxalluslari ────────────────────────────────────────────────
   `stat` ohangni `color:var(--hb-<tone>)` sifatida qo'llaydi, lekin
   tokenlarda `--hb-warning` va `--hb-mut` deb nomlangan. Kanonik ettita
   nom ishlashi uchun ikkita taxallus (hb-tokens.css TEGILMAGAN). */
:root { --hb-warn: var(--hb-warning); --hb-muted: var(--hb-mut); }

/* ═════════════ 1. TONE — semantik rang ═══════════════════════════════ */
.hbk-tone-acc    { --hbk-tone: var(--hb-acc); }
.hbk-tone-ok     { --hbk-tone: var(--hb-ok); }
.hbk-tone-warn   { --hbk-tone: var(--hb-warning); }
.hbk-tone-danger { --hbk-tone: var(--hb-danger); }
.hbk-tone-info   { --hbk-tone: var(--hb-info); }
.hbk-tone-violet { --hbk-tone: var(--hb-violet); }
.hbk-tone-muted  { --hbk-tone: var(--hb-mut); }

/* Qo'llash — ATAYLAB "yumshoq" (tint) uslubda: ohang rangi ham matn, ham
   fon uchun ishlatilsa, qorong'i va yorug' mavzuda kontrast o'z-o'zidan
   to'g'ri chiqadi (tokenlar ikki mavzuda qarama-qarshi yorqinlikda). */

/* tugma */
.hbk-btn[class*="hbk-tone-"] {
  background: color-mix(in srgb, var(--hbk-tone) 16%, transparent);
  color: var(--hbk-tone);
  border: 1px solid color-mix(in srgb, var(--hbk-tone) 45%, transparent); }
.hbk-btn[class*="hbk-tone-"]:hover {
  background: color-mix(in srgb, var(--hbk-tone) 26%, transparent); }

/* karta va ro'yxat qatori — chekka chizig'i + chapdagi ohang tasmasi */
.hb-card[class*="hbk-tone-"], .hbk-row[class*="hbk-tone-"] {
  border-color: color-mix(in srgb, var(--hbk-tone) 45%, transparent);
  box-shadow: inset 3px 0 0 var(--hbk-tone); }

/* nishon */
.hb-badge[class*="hbk-tone-"] {
  background: color-mix(in srgb, var(--hbk-tone) 22%, transparent);
  color: var(--hbk-tone); }

/* avatar */
.hb-avatar[class*="hbk-tone-"] {
  background: color-mix(in srgb, var(--hbk-tone) 20%, transparent);
  color: var(--hbk-tone); }

/* xabar — FAQAT eski mantiq qamramagan ohanglar (acc/danger/info/violet/muted) */
.hb-alert[class*="hbk-tone-"] {
  border-color: color-mix(in srgb, var(--hbk-tone) 45%, transparent);
  background: color-mix(in srgb, var(--hbk-tone) 12%, transparent);
  color: var(--hb-txt); }

/* jarayon chizig'i — FAQAT 'ok' dan boshqa ohanglar */
.hbk-progress-wrap[class*="hbk-tone-"] .hb-progress-fill { background: var(--hbk-tone); }
.hbk-progress-wrap[class*="hbk-tone-"] .hbk-progress-top b { color: var(--hbk-tone); }

/* maydonlar (input / textarea / select) */
.hbk-field[class*="hbk-tone-"] .hb-input {
  border-color: color-mix(in srgb, var(--hbk-tone) 50%, transparent); }
.hbk-field[class*="hbk-tone-"] > label { color: var(--hbk-tone); }

/* qidiruv */
.hb-search[class*="hbk-tone-"] {
  border-color: color-mix(in srgb, var(--hbk-tone) 50%, transparent); }

/* tugmacha */
.hbk-switch[class*="hbk-tone-"] input:checked + .hbk-switch-track {
  background: var(--hbk-tone); border-color: var(--hbk-tone); }

/* tablar */
.hb-tabs[class*="hbk-tone-"] .hb-tab.active {
  background: color-mix(in srgb, var(--hbk-tone) 20%, transparent);
  border-color: color-mix(in srgb, var(--hbk-tone) 50%, transparent);
  color: var(--hbk-tone); }

/* jadval */
.hb-table[class*="hbk-tone-"] thead tr {
  background: color-mix(in srgb, var(--hbk-tone) 12%, transparent); }
.hb-table[class*="hbk-tone-"] th { color: var(--hbk-tone); }

/* bo'sh holat va skeleton */
.hb-empty[class*="hbk-tone-"] .hb-empty-ic { color: var(--hbk-tone); }
.hb-empty[class*="hbk-tone-"] .hbk-empty-title { color: var(--hbk-tone); }
.hb-skel[class*="hbk-tone-"] .hb-ln {
  background: color-mix(in srgb, var(--hbk-tone) 18%, var(--hb-sfc2)); }

/* ═════════════ 2. SIZE — o'lcham shkalasi ════════════════════════════ */
/* Umumiy matn shkalasi — o'z qoidasi bo'lmagan elementlar uchun tayanch. */
.hbk-sz-xs { font-size: 11px; }
.hbk-sz-sm { font-size: 12px; }
.hbk-sz-md { font-size: 13px; }
.hbk-sz-lg { font-size: 15px; }

/* tugma  (ESLATMA: btn'da `size:'sm'` ESKI `hb-btn-sm` ga ketadi —
   bu qoidalarga xs / md / lg orqali tushiladi) */
.hb-btn.hbk-sz-xs { height: 30px; padding: 0 11px; font-size: 11px; gap: 5px; }
.hb-btn.hbk-sz-sm { height: 36px; padding: 0 14px; font-size: 12px; gap: 6px; }
.hb-btn.hbk-sz-md { height: 44px; padding: 0 18px; font-size: 13px; }
.hb-btn.hbk-sz-lg { height: 52px; padding: 0 26px; font-size: 14.5px; gap: 10px; }

/* avatar  (`size:'lg'` ESKI `hb-avatar-lg` da) */
.hb-avatar.hbk-sz-xs { width: 24px; height: 24px; font-size: 9.5px; }
.hb-avatar.hbk-sz-sm { width: 28px; height: 28px; font-size: 10.5px; }
.hb-avatar.hbk-sz-md { width: 34px; height: 34px; font-size: 12px; }
.hb-avatar.hbk-sz-lg { width: 44px; height: 44px; font-size: 15px; }

/* chip / nishon */
.hb-chip.hbk-sz-xs  { padding: 2px 7px;  font-size: 10px; gap: 4px; }
.hb-chip.hbk-sz-sm  { padding: 3px 9px;  font-size: 10.5px; }
.hb-chip.hbk-sz-md  { padding: 4px 10px; font-size: 11px; }
.hb-chip.hbk-sz-lg  { padding: 6px 14px; font-size: 12.5px; gap: 8px; }
.hb-badge.hbk-sz-xs { padding: 1px 5px; font-size: 9px; }
.hb-badge.hbk-sz-sm { padding: 2px 6px; font-size: 9.5px; }
.hb-badge.hbk-sz-md { padding: 2px 7px; font-size: 10px; }
.hb-badge.hbk-sz-lg { padding: 3px 10px; font-size: 12px; }

/* maydonlar — balandlik FAQAT input/select'ga (textarea'ni `rows` boshqaradi) */
.hbk-field.hbk-sz-xs input.hb-input, .hbk-field.hbk-sz-xs select.hb-input { height: 32px; padding: 0 10px; }
.hbk-field.hbk-sz-sm input.hb-input, .hbk-field.hbk-sz-sm select.hb-input { height: 38px; padding: 0 12px; }
.hbk-field.hbk-sz-md input.hb-input, .hbk-field.hbk-sz-md select.hb-input { height: 44px; }
.hbk-field.hbk-sz-lg input.hb-input, .hbk-field.hbk-sz-lg select.hb-input { height: 52px; padding: 0 17px; }
.hbk-field.hbk-sz-xs .hb-input { font-size: 11.5px; }
.hbk-field.hbk-sz-sm .hb-input { font-size: 12px; }
.hbk-field.hbk-sz-md .hb-input { font-size: 13px; }
.hbk-field.hbk-sz-lg .hb-input { font-size: 14.5px; }
.hbk-field.hbk-sz-xs textarea.hb-input,
.hbk-field.hbk-sz-sm textarea.hb-input { padding: 8px 11px; }
.hbk-field.hbk-sz-lg textarea.hb-input { padding: 12px 17px; }
/* select strelkasi balandlikka bog'langan — har o'lchamda qayta joylash */
.hbk-field.hbk-sz-xs .hbk-select { background-position: calc(100% - 17px) 13px, calc(100% - 12px) 13px; }
.hbk-field.hbk-sz-sm .hbk-select { background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px; }
.hbk-field.hbk-sz-lg .hbk-select { background-position: calc(100% - 20px) 23px, calc(100% - 15px) 23px; }

/* qidiruv */
.hb-search.hbk-sz-xs { height: 30px; padding: 0 10px; }
.hb-search.hbk-sz-sm { height: 34px; padding: 0 12px; }
.hb-search.hbk-sz-md { height: 40px; }
.hb-search.hbk-sz-lg { height: 48px; padding: 0 18px; }
.hb-search.hbk-sz-xs input { font-size: 11.5px; }
.hb-search.hbk-sz-lg input { font-size: 14px; }

/* tugmacha */
.hbk-switch.hbk-sz-xs .hbk-switch-track { width: 30px; height: 18px; }
.hbk-switch.hbk-sz-xs .hbk-switch-knob  { width: 12px; height: 12px; }
.hbk-switch.hbk-sz-xs input:checked + .hbk-switch-track .hbk-switch-knob { transform: translateX(12px); }
.hbk-switch.hbk-sz-sm .hbk-switch-track { width: 35px; height: 20px; }
.hbk-switch.hbk-sz-sm .hbk-switch-knob  { width: 14px; height: 14px; }
.hbk-switch.hbk-sz-sm input:checked + .hbk-switch-track .hbk-switch-knob { transform: translateX(15px); }
.hbk-switch.hbk-sz-lg .hbk-switch-track { width: 50px; height: 29px; }
.hbk-switch.hbk-sz-lg .hbk-switch-knob  { width: 23px; height: 23px; }
.hbk-switch.hbk-sz-lg input:checked + .hbk-switch-track .hbk-switch-knob { transform: translateX(21px); }
.hbk-switch.hbk-sz-xs .hbk-switch-lbl { font-size: 11px; }
.hbk-switch.hbk-sz-lg .hbk-switch-lbl { font-size: 14.5px; }

/* karta */
.hb-card.hbk-sz-xs .hbk-card-head { padding: 10px 11px 0; }
.hb-card.hbk-sz-xs .hbk-card-body { padding: 10px 11px; }
.hb-card.hbk-sz-xs .hbk-card-foot { padding: 8px 11px; }
.hb-card.hbk-sz-sm .hbk-card-head { padding: 12px 13px 0; }
.hb-card.hbk-sz-sm .hbk-card-body { padding: 12px 13px; }
.hb-card.hbk-sz-sm .hbk-card-foot { padding: 10px 13px; }
.hb-card.hbk-sz-lg .hbk-card-head { padding: 20px 22px 0; }
.hb-card.hbk-sz-lg .hbk-card-body { padding: 20px 22px; }
.hb-card.hbk-sz-lg .hbk-card-foot { padding: 16px 22px; }
.hb-card.hbk-sz-lg .hbk-card-title { font-size: 17px; }

/* ko'rsatkich */
.hb-stat.hbk-sz-xs { padding: 10px; gap: 5px; }
.hb-stat.hbk-sz-sm { padding: 13px; gap: 6px; }
.hb-stat.hbk-sz-lg { padding: 22px; gap: 10px; }
.hb-stat.hbk-sz-xs .hb-stat-val { font-size: 17px; }
.hb-stat.hbk-sz-sm .hb-stat-val { font-size: 20px; }
.hb-stat.hbk-sz-lg .hb-stat-val { font-size: 32px; }

/* ro'yxat qatori */
.hbk-row.hbk-sz-xs { padding: 7px 10px; gap: 8px; }
.hbk-row.hbk-sz-sm { padding: 9px 12px; gap: 10px; }
.hbk-row.hbk-sz-lg { padding: 16px 18px; gap: 14px; }
.hbk-row.hbk-sz-xs .hbk-row-title { font-size: 12.5px; }
.hbk-row.hbk-sz-lg .hbk-row-title { font-size: 15.5px; }

/* jadval */
.hb-table.hbk-sz-xs th, .hb-table.hbk-sz-xs td { padding: 6px 10px; font-size: 11.5px; }
.hb-table.hbk-sz-sm th, .hb-table.hbk-sz-sm td { padding: 8px 13px; font-size: 12.5px; }
.hb-table.hbk-sz-lg th, .hb-table.hbk-sz-lg td { padding: 15px 22px; font-size: 14px; }

/* tablar */
.hb-tabs.hbk-sz-xs .hb-tab { height: 28px; padding: 0 12px; font-size: 11px; }
.hb-tabs.hbk-sz-sm .hb-tab { height: 33px; padding: 0 15px; font-size: 12px; }
.hb-tabs.hbk-sz-lg .hb-tab { height: 46px; padding: 0 24px; font-size: 14px; }

/* xabar */
.hb-alert.hbk-sz-xs { padding: 8px 10px; font-size: 11.5px; }
.hb-alert.hbk-sz-sm { padding: 10px 12px; font-size: 12px; }
.hb-alert.hbk-sz-lg { padding: 16px 20px; font-size: 14px; }

/* jarayon chizig'i */
.hbk-progress-wrap.hbk-sz-xs .hb-progress { height: 5px; }
.hbk-progress-wrap.hbk-sz-sm .hb-progress { height: 6px; }
.hbk-progress-wrap.hbk-sz-lg .hb-progress { height: 12px; }

/* bo'sh holat / skeleton */
.hb-empty.hbk-sz-xs { padding: 16px 12px; gap: 6px; }
.hb-empty.hbk-sz-sm { padding: 26px 14px; gap: 8px; }
.hb-empty.hbk-sz-lg { padding: 54px 24px; gap: 14px; }
.hb-empty.hbk-sz-lg .hb-empty-ic { font-size: 46px; }
.hb-skel.hbk-sz-xs { padding: 10px; }
.hb-skel.hbk-sz-sm { padding: 14px; }
.hb-skel.hbk-sz-lg { padding: 26px; }
.hb-skel.hbk-sz-xs .hb-ln { height: 8px; margin: 6px 0; }
.hb-skel.hbk-sz-lg .hb-ln { height: 16px; margin: 11px 0; }

/* ═════════════ 3. RADIUS ═════════════════════════════════════════════ */
/* `!important` — bu sinf faqat ochiq so'ralganda qo'yiladi, ya'ni
   "aynan shu radius" degan buyruq; yig'ma faylda qoidalar tartibi
   o'zgarib qolsa ham natija bir xil bo'lishi kerak. */
.hbk-r-none { border-radius: 0 !important; }
.hbk-r-sm   { border-radius: var(--hb-radius-sm) !important; }
.hbk-r-md   { border-radius: var(--hb-radius-md) !important; }
.hbk-r-lg   { border-radius: var(--hb-radius) !important; }
.hbk-r-pill { border-radius: var(--hb-pill) !important; }

/* Maydon o'rami — radius boshqaruv elementiga o'tishi kerak (o'ramning
   o'zida fon/chekka yo'q, ko'rinadigan burchak `.hb-input` da). */
.hbk-field[class*="hbk-r-"] .hb-input { border-radius: inherit !important; }
/* ESLATMA: `table` da `border-collapse:collapse` — burchak yumaloqlanmaydi.
   `radius` ni jadvalga bermang, kerak bo'lsa uni o'rab turgan kartaga bering. */

/* ── spinner.css ── */
/* ── spinner ────────────────────────────────────────────────────────────
   Ranglar faqat hb-tokens.css o'zgaruvchilaridan. */

.hbk-spin {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 8px; color: var(--hb-mut);
  font-size: 12.5px; font-weight: 700; }
.hbk-spin-inline { display: inline-flex; padding: 0; vertical-align: middle; }

.hbk-spin-ring {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--hb-brd2) 70%, transparent);
  border-top-color: var(--hbk-tone, var(--hb-acc));
  animation: hbk-spin-rot .75s linear infinite; }

.hbk-spin.hbk-sz-xs .hbk-spin-ring { width: 14px; height: 14px; border-width: 2px; }
.hbk-spin.hbk-sz-sm .hbk-spin-ring { width: 18px; height: 18px; border-width: 2px; }
.hbk-spin.hbk-sz-lg .hbk-spin-ring { width: 32px; height: 32px; border-width: 3px; }
.hbk-spin.hbk-sz-xs { font-size: 11px; padding: 8px 4px; }
.hbk-spin.hbk-sz-lg { font-size: 14px; padding: 26px 8px; }
.hbk-spin[class*="hbk-tone-"] .hbk-spin-lbl { color: var(--hbk-tone); }

@keyframes hbk-spin-rot { to { transform: rotate(360deg) } }

/* Harakatni kamaytirish so'ralgan bo'lsa — aylanmaydi, "nafas oladi". */
@media (prefers-reduced-motion: reduce) {
  .hbk-spin-ring {
    animation: hbk-spin-pulse 1.2s ease-in-out infinite;
    border-top-color: var(--hbk-tone, var(--hb-acc)); }
  @keyframes hbk-spin-pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
}

/* ── squircle.css ── */
/* squircle.css — App-Store uslubidagi "squircle" karta + pastel ikonka
   konteyner + son-pill (2026-08-19, Akademiya Kurslar/Kutubxona redizayni
   doirasida qo'shildi). `.hb-card`ning O'RNIGA emas, USTIGA qo'llanadi:
   class="hb-card hb-card-pad hbk-squircle-card" — mavjud `.hb-card` fon/
   asosiy border'ini beradi (README qoidasi — eski klasslar o'zgarmaydi),
   bu klass FAQAT radius/border-nozik/hover-lift'ni kuchaytiradi. Katalog-
   kartasi ehtiyoji (bo'lim plitkasi, kutubxona hujjati, kelajakda boshqa
   modulning "katalog" grid'i) qayta ishlatishi mumkin — Akademiyaga xos
   hech narsa yo'q. */
.hbk-squircle-card{
  border-radius: 20px;
  border-color: color-mix(in srgb, var(--hb-txt) 8%, transparent);
  transition: transform .18s cubic-bezier(.22,.8,.36,1), box-shadow .18s ease, border-color .18s ease;
}
.hbk-squircle-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--hb-shadow);
  border-color: color-mix(in srgb, var(--hb-txt) 16%, transparent);
}
.hbk-squircle-card:active{ transform: translateY(-1px); }

/* Pastel-tint ikonka konteyner — rang --hbk-tint orqali (berilmasa
   --hb-acc). Squircle shakl (o'rtacha radius) — doira avatardan ATAYLAB
   farqli, "bu katalog obyekti" degan vizual signal. */
.hbk-icon-tile{
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hbk-tint, var(--hb-acc)) 15%, var(--hb-sfc2));
  color: var(--hbk-tint, var(--hb-acc));
}
.hbk-icon-tile svg{ width: 26px; height: 26px; }
.hbk-icon-tile-sm{ width: 40px; height: 40px; border-radius: 13px; }
.hbk-icon-tile-sm svg{ width: 20px; height: 20px; }
.hbk-icon-tile-lg{ width: 64px; height: 64px; border-radius: 20px; }
.hbk-icon-tile-lg svg{ width: 32px; height: 32px; }

/* Son-pill — "4 ta kurs" / "81.5 KB · PDF" kabi ixcham hisoblagich/meta
   nishon. */
.hbk-count-pill{
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 4px 11px; border-radius: var(--hb-pill);
  background: color-mix(in srgb, var(--hb-txt) 7%, transparent);
  color: var(--hb-mut);
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
}

/* Hover'da paydo bo'ladigan shisha-amal tugmasi — kartaning pastki
   burchagida, sukut holatda ko'rinmas (opacity 0), egasi .hbk-squircle-card
   ustiga sichqoncha kelganda ochiladi. Klaviatura/tach uchun ham
   ko'rinadigan bo'lishi kerak bo'lgan joyda chaqiruvchi shunchaki bu
   klassni tashlab, doim ko'rinadigan holatda qoldirishi mumkin. */
.hbk-hover-reveal{
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.hbk-squircle-card:hover .hbk-hover-reveal,
.hbk-squircle-card:focus-within .hbk-hover-reveal{
  opacity: 1; transform: none; pointer-events: auto;
}
@media (hover: none){
  /* Tach qurilmada hover yo'q — amal doim ko'rinadi. */
  .hbk-hover-reveal{ opacity: 1; transform: none; pointer-events: auto; }
}

/* ── stat.css ── */
/* stat.js uchun — qiymat yonidagi birlik */
.hbk-stat-unit { font-size: 13px; font-weight: 700; opacity: .7; }

/* ── steps.css ── */
/* steps.css — Gamifikatsiya "qadam-tugun" (step node) + ulash treki
   (2026-08-19, Akademiya route-map redizayni doirasida qo'shildi). Umumiy
   vizual til (locked/active/done/perfect/exhausted) — istalgan bosqichli-
   jarayon UI'si (masalan kelajakda onboarding checklist) qayta ishlatishi
   mumkin. O'lcham sahifa CSS'ida --hbk-step-size orqali moslanadi (standart
   68px). Holat klassi FAQAT rang/soya/animatsiyani belgilaydi — joylashuv
   (zigzag/vertikal ketma-ketlik) chaqiruvchi sahifaning o'zida qoladi
   (Akademiyada .ac-rm-node-wrap:nth-child(4n±) — bu yerga TEGILMAYDI). */
.hbk-step-node{
  --hbk-step-size: 68px;
  width: var(--hbk-step-size); height: var(--hbk-step-size);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-size: 26px; font-weight: 900; cursor: pointer;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.hbk-step-node:hover{ transform: translateY(-2px) scale(1.04); }
.hbk-step-node:active{ transform: translateY(0) scale(.97); }

/* Yopiq — yarim shaffof, xira "mute" squircle + qulf belgisi. */
.hbk-step-locked{
  background: color-mix(in srgb, var(--hb-sfc2) 80%, transparent);
  color: var(--hb-mut);
  border: 1.5px solid color-mix(in srgb, var(--hb-txt) 8%, transparent);
  opacity: .78;
  box-shadow: none;
  cursor: not-allowed;
}
.hbk-step-locked:hover{ transform: none; }

/* Tugallangan — qattiq zumrad HALQA (border) + och tint fon + belgi. */
.hbk-step-done{
  background: color-mix(in srgb, var(--hb-ok) 16%, var(--hb-sfc));
  color: var(--hb-ok);
  border: 2.5px solid var(--hb-ok);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--hb-ok) 30%, transparent);
}

/* A'lo (100%, aynan hb-warning oilasidan — "oltin" hissi, kit alohida
   qattiq hex ushlamaydi). */
.hbk-step-perfect{
  background: color-mix(in srgb, var(--hb-warning) 20%, var(--hb-sfc));
  color: var(--hb-warning);
  border: 2.5px solid var(--hb-warning);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--hb-warning) 35%, transparent);
}

/* Qayta ko'rish kerak (exhausted) — ogohlantirish oilasi, done bilan bir
   xil shakl (ikonka glifi farqlaydi — chaqiruvchi tomonidan beriladi). */
.hbk-step-exhausted{
  background: color-mix(in srgb, var(--hb-warning) 14%, var(--hb-sfc));
  color: var(--hb-warning);
  border: 2px dashed var(--hb-warning);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--hb-warning) 25%, transparent);
}

/* Faol (joriy) — to'liq zumrad fon (hb-acc, tugma bilan bir xil "ink"
   juftligi — isbotlangan kontrast) + porlovchi puls-halqa + "Boshlash"
   tooltip callout (pastda). */
.hbk-step-active{
  background: linear-gradient(150deg, var(--hb-acc), color-mix(in srgb, var(--hb-acc) 55%, white));
  color: var(--hb-acc-ink);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hb-acc) 45%, transparent);
}
.hbk-step-active::before{
  content: ''; position: absolute; inset: -6px; border-radius: 26px;
  border: 2px solid color-mix(in srgb, var(--hb-acc) 65%, transparent);
  animation: hbk-step-pulse 1.8s cubic-bezier(.22,.8,.36,1) infinite;
  pointer-events: none;
}
@keyframes hbk-step-pulse{
  0%{ transform: scale(1); opacity: .85; }
  100%{ transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .hbk-step-active::before{ animation: none; }
}

/* "Boshlash" chaqiruv-pufakcha — faol tugun ustida, doimiy ko'rinadi. */
.hbk-step-tooltip{
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--hb-sfc); color: var(--hb-acc-text, var(--hb-acc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 55%, var(--hb-brd));
  font-size: 11px; font-weight: 900; letter-spacing: .02em;
  padding: 6px 14px; border-radius: 14px; white-space: normal;
  max-width: 190px; width: max-content; text-align: center; text-transform: none;
  box-shadow: var(--hb-shadow-sm);
  animation: hb-fabbob 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.hbk-step-tooltip::after{
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: var(--hb-sfc);
  border-right: 1px solid color-mix(in srgb, var(--hb-acc) 55%, var(--hb-brd));
  border-bottom: 1px solid color-mix(in srgb, var(--hb-acc) 55%, var(--hb-brd));
}

/* Yangi-kun belgisi — mavjud .ac-node-newdot bilan bir xil vazifa, endi
   kit shaklida (istalgan step-node ustida qayta ishlatiladi). */
.hbk-step-newdot{
  position: absolute; top: -4px; right: -4px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--hb-info); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; box-shadow: var(--hb-shadow-sm);
  z-index: 2;
}

/* Ulash chizig'i ("connector spine") — qalin, aylana-uchli, progress bilan
   "yorishadigan" trek. Yo'nalish (vertikal/gorizontal) va aniq egri-chiziq
   joylashuvi (masalan zigzag transform) chaqiruvchi sahifada qoladi — bu
   yerda FAQAT vizual til (qalinlik/rang/porlash). */
.hbk-step-track{
  position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%);
  background: color-mix(in srgb, var(--hb-txt) 8%, transparent);
  border-radius: var(--hb-pill);
  z-index: 0;
}
.hbk-step-track-fill{
  position: absolute; left: 0; top: 0; width: 100%; border-radius: var(--hb-pill);
  background: linear-gradient(180deg, var(--hb-acc), color-mix(in srgb, var(--hb-acc) 55%, white));
  box-shadow: 0 0 16px color-mix(in srgb, var(--hb-acc) 55%, transparent);
  transition: height .7s cubic-bezier(.22,.8,.36,1);
}

/* ── switch.css ── */
/* switch.js uchun — hb- to'plamida bunday element YO'Q edi */
.hbk-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.hbk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.hbk-switch-track { width: 40px; height: 23px; border-radius: 999px; flex: none;
  background: var(--hb-sfc2); border: 1px solid var(--hb-brd); position: relative;
  transition: background-color .16s, border-color .16s; }
.hbk-switch-knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--hb-mut);
  transition: transform .16s, background-color .16s; }
.hbk-switch input:checked + .hbk-switch-track { background: var(--hb-acc); border-color: var(--hb-acc); }
.hbk-switch input:checked + .hbk-switch-track .hbk-switch-knob {
  transform: translateX(17px); background: var(--hb-acc-ink, #fff); }
.hbk-switch input:disabled + .hbk-switch-track { opacity: .5; cursor: not-allowed; }
.hbk-switch input:focus-visible + .hbk-switch-track { outline: 2px solid var(--hb-acc); outline-offset: 2px; }
.hbk-switch-lbl { font-size: 13px; font-weight: 700; color: var(--hb-txt); }

/* ── tabs.css ── */
/* tabs.js uchun — FAQAT `as:'a'` rejimi.
   `hb-components.css:243-245` da `.hb-tab` rangi bor, lekin u `<button>`
   uchun yozilgan. `<a class="hb-tab">` da `.hb a{color:var(--hb-acc-text)}`
   (aniqlik 0,1,1) `.hb-tab{color:var(--hb-mut)}` (0,1,0) ni yutadi va FAOL
   BO'LMAGAN yorliq aksent rangida chiqadi (2026-08-19, so'rovnomalar
   redizaynida topildi). `hb-components.css` da `a.hb-btn` uchun xuddi shu
   tuzatish bor (517-qator), `a.hb-tab` uchun yo'q edi.
   Umumiy faylga TEGMAYMIZ — tuzatish kitning o'z qatlamida. */
a.hb-tab,
.hb a.hb-tab { color: var(--hb-mut); text-decoration: none; }
a.hb-tab:hover,
.hb a.hb-tab:hover { color: var(--hb-txt); text-decoration: none; }
a.hb-tab.active,
.hb a.hb-tab.active { color: var(--hb-acc-ink); text-decoration: none; }

/* ── toast.css ── */
/* ── toast ──────────────────────────────────────────────────────────────
   Ranglar faqat hb-tokens.css o'zgaruvchilaridan. */

.hbk-toasts {
  position: fixed; z-index: 1400; right: 16px; bottom: 16px;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px;
  pointer-events: none; max-width: min(360px, calc(100vw - 32px)); }

.hbk-toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc); color: var(--hb-txt);
  border: 1px solid var(--hb-brd); box-shadow: var(--hb-shadow-sm);
  font-size: 12.5px; font-weight: 700; line-height: 1.45;
  animation: hbk-toast-in .18s cubic-bezier(.2, .8, .3, 1) both; }
.hbk-toast-ic { flex: none; font-size: 14px; display: grid; place-items: center; }
.hbk-toast-txt { min-width: 0; }

.hbk-toast-ok   { border-color: color-mix(in srgb, var(--hb-ok) 55%, transparent);
                  background: color-mix(in srgb, var(--hb-ok) 12%, var(--hb-sfc)); }
.hbk-toast-warn { border-color: color-mix(in srgb, var(--hb-warning) 55%, transparent);
                  background: color-mix(in srgb, var(--hb-warning) 12%, var(--hb-sfc)); }
.hbk-toast-err  { border-color: color-mix(in srgb, var(--hb-danger) 55%, transparent);
                  background: color-mix(in srgb, var(--hb-danger) 12%, var(--hb-sfc)); }
.hbk-toast-info { border-color: color-mix(in srgb, var(--hb-info) 55%, transparent);
                  background: color-mix(in srgb, var(--hb-info) 12%, var(--hb-sfc)); }

.hbk-toast-out { animation: hbk-toast-out .2s ease both; }

@keyframes hbk-toast-in {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none } }
@keyframes hbk-toast-out {
  from { opacity: 1 } to { opacity: 0; transform: translateY(6px) } }

@media (max-width: 560px) {
  .hbk-toasts { left: 16px; right: 16px; align-items: stretch; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hbk-toast, .hbk-toast-out { animation: none; }
}

/* ── toolbar.css ── */
/* toolbar.css — Suzuvchi shisha asbob-panel "pill" (2026-08-19, Akademiya
   Kutubxona hujjat-o'quvchisi redizayni doirasida qo'shildi, buyurtmachi:
   "Apple Books uslubidagi bitta birlashgan shisha panel"). `.hbk-glass`
   bilan BIRGA ishlatiladi: class="hbk-toolbar-pill hbk-glass" — shisha
   fon/blur .hbk-glass'dan, shakl/tugmalar shu fayldan. Istalgan suzuvchi
   boshqaruv paneli (hujjat o'quvchisi, media pleer, kelajakda boshqa
   modulning "floating controls"i) qayta ishlatishi mumkin — Akademiyaga
   xos hech narsa yo'q. */
.hbk-toolbar-pill{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: var(--hb-pill);
  box-shadow: var(--hb-shadow);
}
.hbk-toolbar-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: transparent; border: none; color: var(--hb-mut);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.hbk-toolbar-btn svg{ width: 17px; height: 17px; }
.hbk-toolbar-btn:hover{ background: color-mix(in srgb, var(--hb-txt) 8%, transparent); color: var(--hb-txt); }
.hbk-toolbar-btn:active{ transform: scale(.92); }
.hbk-toolbar-btn:disabled{ opacity: .35; cursor: not-allowed; }
.hbk-toolbar-btn:disabled:hover{ background: transparent; color: var(--hb-mut); }
.hbk-toolbar-btn.hbk-toolbar-btn-active{ background: color-mix(in srgb, var(--hb-acc) 18%, transparent); color: var(--hb-acc-text, var(--hb-acc)); }

/* Yopish tugmasi — bir oz kattaroq, alohida ohang (danger hover). */
.hbk-toolbar-close{
  width: 34px; height: 34px; border-radius: 50%;
}
.hbk-toolbar-close:hover{ background: color-mix(in srgb, var(--hb-danger) 16%, transparent); color: var(--hb-danger); }

.hbk-toolbar-label{
  padding: 0 10px; font-size: 12.5px; font-weight: 800; color: var(--hb-txt);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbk-toolbar-step{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 6px; font-size: 12px; font-weight: 800; color: var(--hb-mut);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hbk-toolbar-sep{
  width: 1px; height: 20px; margin: 0 3px; flex: none;
  background: color-mix(in srgb, var(--hb-txt) 12%, transparent);
}

@media (max-width: 560px){
  .hbk-toolbar-btn{ width: 30px; height: 30px; }
  .hbk-toolbar-label{ max-width: 120px; font-size: 11.5px; }
}