/* boshqaruv/css/sorovnoma-admin.css — So'rovnoma boshqaruvi (admin-only SPA)
 * uslublari. Manba: surveys/templates/surveys/index.html'ning inline <style>
 * bloki (o'sha sahifada alohida CSS fayl yo'q, hammasi shablon ichida edi) —
 * BUTUNICHA nusxa ko'chirildi (soddaligi/xavfsizligi uchun — faqat qismini
 * ajratib olish tanlab-tashlab ketish xavfini oshirar edi). Bu sahifada
 * employee-facing bo'limlar (#/my, #/fill, "Kunlik hisobotlar" report-runs
 * ro'yxati) YO'Q, shuning uchun ularga tegishli klasslar (.fill-*, .my-head
 * kabi) shu faylda ISHLATILMAYDI, lekin zarar keltirmagani uchun OLIB
 * TASHLANMADI (bir xil manba bilan sinxron qolish osonroq). `.topnav` — bu
 * sahifaning O'Z lokal navigatsiyasi (main.js::route()/_svaNav(), YANGI,
 * platforma sidebar'iga (template/shared/hb_nav_items.html) HECH QANDAY
 * aloqasi yo'q).
 * ═══════════════ TEMA O'ZGARUVCHILARI — hb- yagona tizimga o'tkazildi (2026-07-29) ═══════════════
   Token QIYMATLARI endi hb-tokens.css bilan bir xil (laym-accent, qorong'i-default), lekin bu
   fayldagi barcha eski komponent klasslari (.card/.btn/.pill/.bar-fill va h.k.) o'zgarishsiz
   qoladi — faqat ULAR ISHLATADIGAN o'zgaruvchilar shu yerda hb- qiymatlariga qayta belgilanadi
   (reskin, rewrite emas — 1100+ qatorlik JS/onclick bog'lanishlariga tegilmagan). */
:root{
  color-scheme: dark;
  --bg:#0D0C10; --panel:#1E1D24; --panel-2:#29282F;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.15);
  --text:#F5F4F7; --muted:#9B9AA3; --faint:#9B9AA3;
  --accent:#24C29A; --accent-2:#1FA884; --accent-soft:rgba(36,194,154,.16); --accent-ink:#0B1F19;
  --accent-rgb:36,194,154;
  --danger:#F58B8B; --danger-soft:rgba(245,139,139,.16); --danger-rgb:245,139,139;
  --ok:#24C29A; --ok-soft:rgba(36,194,154,.16); --ok-rgb:36,194,154;
  --warn:#F5C56B; --warn-soft:rgba(245,197,107,.16);
  --violet:#C9B6F5; --violet-soft:rgba(201,182,245,.16);
  --shadow:0 6px 14px rgba(0,0,0,.28); --shadow-lg:0 14px 30px rgba(0,0,0,.40);
  --radius:22px; --radius-sm:14px; --pill:999px;
  --font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:color-mix(in srgb, var(--hb-acc, #16745C) 8%, #fff);
  --border:rgba(0,0,0,.11); --border2:rgba(0,0,0,.17);
  --text:#1B1A20; --muted:#6E6C76; --faint:#6E6C76;
  /* [KONTRAST 2026-08-09, teal ko'chirilganda tekshirildi] Bu faylda alohida
     --accent-btn yo'q — .btn-primary to'g'ridan-to'g'ri `--accent`ni ishlatadi,
     shuning uchun --accent'ning o'zi oq matn bilan >=4.5:1 berishi SHART. Xom
     teal (#24C29A) oq matn bilan 2.27:1 (yetarli emas) — shu bois #16745C
     tanlandi: oq-matnli plomba 5.70:1, --bg fonida matn sifatida 5.04:1. */
  --accent:#16745C; --accent-2:#12614D; --accent-soft:rgba(22,116,92,.12); --accent-ink:#ffffff;
  --accent-rgb:22,116,92;
  --danger:#DC5B5B; --danger-soft:rgba(220,91,91,.12); --danger-rgb:220,91,91;
  --ok:#16745C; --ok-soft:rgba(22,116,92,.12); --ok-rgb:22,116,92;
  --warn:#B8792A; --warn-soft:rgba(184,121,42,.14);
  --violet:#6F4FC9; --violet-soft:rgba(111,79,201,.12);
  --shadow:0 6px 14px rgba(90,80,60,.10); --shadow-lg:0 14px 30px rgba(90,80,60,.14);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme: light;
    --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:color-mix(in srgb, var(--hb-acc, #16745C) 8%, #fff);
    --border:rgba(0,0,0,.11); --border2:rgba(0,0,0,.17);
    --text:#1B1A20; --muted:#6E6C76; --faint:#6E6C76;
    --accent:#16745C; --accent-2:#12614D; --accent-soft:rgba(22,116,92,.12); --accent-ink:#ffffff;
    --accent-rgb:22,116,92;
    --danger:#DC5B5B; --danger-soft:rgba(220,91,91,.12); --danger-rgb:220,91,91;
    --ok:#16745C; --ok-soft:rgba(22,116,92,.12); --ok-rgb:22,116,92;
    --warn:#B8792A; --warn-soft:rgba(184,121,42,.14);
    --violet:#6F4FC9; --violet-soft:rgba(111,79,201,.12);
    --shadow:0 6px 14px rgba(90,80,60,.10); --shadow-lg:0 14px 30px rgba(90,80,60,.14);
  }
}
/* Shell (hb-tokens.css) body'ni allaqachon beradi — bu yerda faqat modul tipografiyasi */
body.hb{font-family:var(--font); font-size:13.5px; line-height:1.45; font-variant-numeric:tabular-nums}
.hb button{cursor:pointer}

/* ═══════════════ LAYOUT — shell'ning .hb-content konteyneri ishlatiladi ═══════════════
   2026-07-29: max-width olib tashlandi — keng ekranda bo'sh joy qoldirmasdan
   .grid (auto-fill) ko'proq ustunga yoyilishi uchun (staff/hrm_launcher bilan
   bir xil qaror). */
.wrap{max-width:100%; margin:0; padding:0}

/* ═══════════════ MODUL BO'LIMLARI (sub-nav) ═══════════════
   `.subtabs` — sahifa ichidagi ikkinchi daraja. 2026-08-19 (UI Kit, 3-to'lqin):
   uning YORLIQLARI endi UI.html.tabs() dan keladi (`hb-tabs`/`hb-tab`, havola
   variantida `as:'a'`), shu bois `.subtabs a` KO'RINISH qoidalari o'chirildi —
   bu yerda faqat qator joylashuvi (gorizontal skroll + pastki bo'shliq) qoldi.
   `.topnav` — SHABLONDA server-render qilingan `<a>` nav (kit qamramaydi),
   shu bois uning o'z qoidalari saqlanadi; ular `.hb-tab` bilan bir xil. */
.topnav,.subtabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:16px; scrollbar-width:none}
.topnav::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}
.topnav a{height:38px; padding:0 18px; display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  white-space:nowrap; border-radius:var(--pill); border:1px solid var(--border); background:var(--panel);
  color:var(--muted); font-weight:700; font-size:12.5px; transition:.15s}
.topnav a:hover{color:var(--text); border-color:var(--border2); text-decoration:none}
.topnav a.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.topnav a.active:hover{color:var(--accent-ink)}

/* [2026-08-25, standart qoida — Kalendar/Muloqot'da ham qo'llanilgan]
   O'CHIRILDI: "Apple/macOS-Sonoma shisha redizayni" (2026-08-19) — asosiy
   bo'lim almashtirgichini (So'rovnomalar/Mening so'rovlarim/Kunlik
   hisobotlar) BITTA yopishqoq shisha kapsulaga o'rab, ichidagi tugmalarni
   chegarasiz qilib qo'ygan edi. Platforma bo'ylab takror tasdiqlangan
   qoidaga ko'ra hech qanday tugma guruhi umumiy qolipga solinmasin — har
   biri alohida, ixcham, o'z chegarasi/foni bilan bo'lishi kerak (xuddi
   Kalendar sana bosqichi/ko'rinish almashtirgichida qilingani kabi,
   qarang: static/hrm_calendar/css/calendar.css "2026-08-25, standart
   qoida"). Yuqorida (78-85 qatorlar) allaqachon TO'G'RI edi — HAR BIR
   yorliq o'z chegarasi/foni/pill-radiusi bilan mustaqil.
   [2026-08-25, KEYINGI TUZATISH — foydalanuvchi aniq talabi] `position:sticky`
   HAM olib tashlandi: foydalanuvchi buni ko'rib "sticky bo'lib qolgan, olib
   tashla, hech qayerda bunday ishlatman" dedi — YANGI QOIDA: tab/bo'lim
   almashtirgich qatorlari ekran tepasiga YOPISHTIRILMAYDI, hech bir
   ilovada. */
.topnav{margin-bottom:20px}

/* 2026-08-21 ("Topshirganlar (N) | Topshirmaganlar (N) | Tarix" tab qatori
   TZ): tab yorlig'iga qo'shiladigan son-nishon — _setTabCounts() (app.js)
   raqamni shu klass bilan a/button ichiga ILOVA qiladi (kit tarjima
   qilmaydigan XOM raqam, alohida <span>). */
.sv-tab-count{margin-left:5px; opacity:.72; font-variant-numeric:tabular-nums}

/* ═══════════════ KUNLIK AI HISOBOT — "insight cards" (2026-08-21) ═══════════════
   Bo'linadigan AI matni (KRITIK/IJOBIY/TAVSIYA — surveys/services/report_ai.py::
   parse_ai_sections) uchun shisha karta setkasi. Tuzilish topilmasa (eski
   hisobot) chaqiruvchi (app.js::aiInsightCardsHtml) bu klasslarni umuman
   ishlatmaydi — o'rniga mavjud .formcard bloki qoladi. */
.ai-insight-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap:14px; margin-top:6px}
.ai-insight-card{border-radius:18px; padding:16px 18px;
  background:color-mix(in srgb, var(--hb-sfc, var(--panel)) 90%, transparent);
  border:1.5px solid var(--hb-brd, var(--border));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 4px 16px rgba(0,0,0,.04)}
.ai-insight-card.tone-danger{border-left:3px solid var(--danger)}
.ai-insight-card.tone-ok{border-left:3px solid var(--ok)}
.ai-insight-card.tone-violet{border-left:3px solid var(--violet)}
.ai-insight-title{font-weight:800; font-size:13px; margin-bottom:8px; display:flex; align-items:center; gap:7px}
.ai-insight-body{font-size:13px; line-height:1.65; color:var(--text); white-space:pre-wrap; word-break:break-word}
.ai-summary-chip{display:flex; align-items:flex-start; gap:9px; font-size:13px; font-weight:600;
  line-height:1.5; background:var(--panel-2); border:1px solid var(--border); border-radius:14px;
  padding:11px 14px; margin-bottom:14px}

/* Sana/smena/javoblar — bir qatorlik matn o'rniga shisha "hero" plitkalar. */
.rep-stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap:10px; margin-top:12px}
.rep-checklists{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
  gap:10px; margin-top:10px}
.rep-checklist-card{border-radius:14px; padding:12px 14px; background:var(--panel-2);
  border:1px solid var(--border); display:flex; flex-direction:column; gap:6px; cursor:pointer;
  transition:border-color .15s, transform .15s}
.rep-checklist-card:hover{border-color:var(--border2); transform:translateY(-2px)}
.rep-checklist-title{font-weight:700; font-size:13px}

/* ═══════════════ SAHIFA SARLAVHASI (natijalar/javoblar) ═══════════════ */
.pagehead{display:flex; gap:12px; align-items:center; margin-bottom:14px; min-width:0}
.pagehead .ph-main{flex:1; min-width:0}
.pagehead h2{margin:0; font-size:20px; letter-spacing:-.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pagehead .ph-sub{color:var(--muted); font-size:12.5px; font-weight:600; margin-top:2px}

/* ═══════════════ TOOLBAR ═══════════════
   2026-08-19 (UI Kit, 3-to'lqin): qidiruv/tanlov/sana maydonlarining KO'RINISH
   qoidalari o'chirildi — endi ular UI.html.search / .select({native}) /
   .input({type:'date'}) orqali umumiy `hb-search` / `hb-select` / `hb-input`
   uslubini oladi. Bu yerda FAQAT joylashuv qoladi. */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.search{flex:1; min-width:210px}
.dateinput{width:150px}
/* 2026-08-21 (Wave 1, "Dan/Gacha" panjara TZ) — tor ekranda ikkala sana
   maydoni (fDateFrom/fDateTo) BALANSLANGAN 2-ustunli qatorga tushadi
   (avval ikkalasi ham FIKS 150px, boshqa elementlar bilan navbatma-navbat
   noqulay o'ralib qolardi). Toolbar'ning qolgan qismi (qidiruv/tanlov/
   tugma) o'zgarishsiz — faqat shu ikki maydon juftligi. */
@media (max-width:480px){ .dateinput{width:calc(50% - 5px)} }

/* [2026-08-25, foydalanuvchi talabi — "filter va qo'shish tugmalari juda
   katta va boshqacha, sahifa toza tartibli turishi kerak"] Select/sana
   filtrlari endi standart holatda YOPIQ — "Filtr" tugmasi bosilgandagina
   ochiladi. Qidiruv va "Yangi qo'shish" tugmasi HAR DOIM ko'rinadi (eng
   ko'p ishlatiladigan amallar), qolgan filtrlar shu panelga yig'ildi.
   [2026-08-25, IKKINCHI TUZATISH — foydalanuvchi skrinshot bilan aniq
   ko'rsatdi] Filtr tugmasi endi MATNSIZ, faqat "sliders" ikonkasi bilan
   — shu bois qidiruv bilan BIR QATORGA sig'adi (ilgari matnli "Filtr ▾"
   o'zi bitta qatorni band qilardi). Qo'shish tugmasi ham ixchamlashtirildi
   — hammasi (qidiruv + filtr + qo'shish) BITTA qatorda, sig'masagina
   (flex-wrap) navbatdagi qatorga tushadi. */
/* [2026-08-25, UCHINCHI TUZATISH — "qolipga olma, o'zi tursin toza
   holatda"] Chegara/fon butunlay olib tashlandi — endi oddiy, "yalang'och"
   ikonka (hb-btn-ghost'ning standart chegarasi ustidan bekor qilinadi).
   Markazlashtirish: bo'sh matn <span></span> (UI.html.btn matn bo'lmasa
   ham har doim chiqaradi) `display:none` bilan olib tashlanadi — aks
   holda flex qatorida bo'sh, lekin joy egallovchi element ikonkani
   markazdan siljitib qo'yardi. */
.toolbar-filtbtn{
  position:relative; flex:0 0 auto; width:38px; height:38px; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  border:none !important; background:transparent !important; box-shadow:none !important;
  color:var(--muted);
}
.toolbar-filtbtn:hover{ color:var(--text); background:transparent !important }
.toolbar-filtbtn svg{width:18px; height:18px; display:block}
.toolbar-filtbtn .hbk-btn-ic{margin:0; display:flex; align-items:center; justify-content:center}
.toolbar-filtbtn span:empty{display:none}
.toolbar-filtbtn.on{color:var(--accent)}
.toolbar-fdot{position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:99px;
  background:var(--accent); display:none; border:1.5px solid var(--panel)}
.toolbar-fdot.on{display:block}
.toolbar-add-compact{height:38px; padding:0 14px; font-size:12.5px}
.toolbar-filters{display:none; flex-basis:100%; gap:8px; flex-wrap:wrap; align-items:center;
  padding-top:10px; margin-top:2px; border-top:1px dashed var(--border)}
.toolbar-filters.open{display:flex}
.toolbar-filters .selbox, .toolbar-filters .dateinput{height:34px; font-size:12px; padding:0 10px}

/* ═══════════════ TUGMALAR ═══════════════
   2026-08-19 (UI Kit, 3-to'lqin): BUTUN tugma oilasi (.btn / -primary /
   -danger / -ghost / -acc / -sm / [disabled]) O'CHIRILDI — hamma tugma
   UI.html.btn() dan keladi (hb-btn / hb-btn-ghost / hb-btn-danger +
   hbk-tone-acc), PDF va login HAVOLALARI esa `btn({href})` orqali
   `<a class="hb-btn…">` bo'lib chiqadi. */

/* ═══════════════ KARTA SETKASI ═══════════════ */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
/* 2026-08-19 (UI Kit): fon/ramka/radius/padding va hover endi UI.html.card()
   (hb-card + hb-card-hover + hbk-card-body) dan keladi — bu yerda faqat
   holat va ichki joylashuv. */
.card{cursor:pointer; position:relative; overflow:hidden;
  border-radius:20px;
  transition:transform .18s cubic-bezier(.22,.8,.36,1), box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border2)}
.card:active{transform:translateY(-1px)}
.card > .hbk-card-body{display:flex; flex-direction:column}
/* 2026-08-19 REGRESSIYA TUZATISH (buyurtmachi topgan bug #1): .svcard/.subcard
   markupi (renderSurveyCards() — So'rovnomalar ro'yxati/#/list VA viewSubmissions()
   — Javoblar) UI.html.card() ORQALI EMAS, qo'lda `<div class="card svcard">`
   sifatida yoziladi (2026-08-19 refinement round'da shunday qolgan) — yuqoridagi
   izohda aytilgan `hb-card` klassi (fon/ramka manbasi, hb-components.css:352)
   bu markupda UMUMAN YO'Q, shuning uchun karta fon/ramkasiz, matn/pill xom sahifa
   fonida "suzib" ko'rinardi. Aniq ROOT CAUSE: klass mos kelmasligi — .hbk-card-body
   o'rovchisi bor, lekin uni fon bilan ta'minlaydigan .hb-card klassi yo'q edi.
   TUZATISH: JS markupini o'zgartirish o'rniga (xavf ko'proq — 1100+ qatorlik
   onclick bog'lanishlar), shu YERDA to'g'ridan-to'g'ri .svcard/.subcard'ga
   shisha-karta ko'rinishi beriladi (!important — .hb-card mavjud bo'lmagani
   uchun texnik jihatdan shart emas, lekin kelajakda boshqa umumiy qoida bilan
   to'qnashmasligi uchun ataylab qo'yildi). --hb-sfc/--hb-brd — hb-tokens.css'da
   ikkala temada ham HAQIQIY (shaffof emas) qiymatlarga ega ekanligi tekshirildi. */
.svcard, .subcard{
  border-radius:20px !important;
  background:color-mix(in srgb, var(--hb-sfc) 90%, transparent) !important;
  -webkit-backdrop-filter:blur(20px) !important; backdrop-filter:blur(20px) !important;
  border:1.5px solid var(--hb-brd) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.04) !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.svcard:hover, .subcard:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
  border-color:rgba(var(--accent-rgb),.4) !important;
}
.svcard > .hbk-card-body, .subcard > .hbk-card-body{
  padding:20px !important; display:flex !important; flex-direction:column !important;
  justify-content:space-between !important;
}
@media(max-width:640px){
  .svcard > .hbk-card-body, .subcard > .hbk-card-body{ padding:14px !important; }
}
.card.inactive{opacity:.62}
.card-top{display:flex; gap:13px; align-items:flex-start}
/* Savol/so'rovnoma turi ikonkasi — JS'dagi eski qattiq rang (inline style) token bilan qoplanadi */
.type-ic{width:48px; height:48px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:22px;
  background:var(--accent-soft) !important; color:var(--accent); border:1px solid var(--border)}
.card-name{font-weight:800; font-size:15px; line-height:1.28; letter-spacing:-.2px; word-break:break-word}
.card-sub{color:var(--muted); font-size:12px; font-weight:600; margin-top:3px}
.card-stats{margin-top:14px; display:flex; gap:18px; padding-top:13px; border-top:1px solid var(--border)}
.card-stats .st{display:flex; flex-direction:column; gap:1px}
.card-stats .st .n{font-weight:800; font-size:17px; line-height:1; letter-spacing:-.4px}
.card-stats .st .l{font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; font-weight:800}
.card-pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
/* ═══════════════ RO'YXAT/JAVOBLAR KARTA SETKASI — footer amal pill qatori
   (2026-08-19, refinement round): So'rovnomalar ro'yxati va Javoblar
   (Submissions) kartalarida umumiy — progress chizig'i + pastki amal
   tugmalari qatori. */
.sv-progress{margin-top:12px}
/* 2026-08-19 REGRESSIYA TUZATISH (buyurtmachi topgan bug #2): "to'ldirish
   darajasi" matni ilgari .hb-progress-lbl (umumiy, xira/kichik) bilan
   chizilardi — HAQIQIY son (javob berganlar/biriktirilganlar) ko'zga
   tashlanmasdi. Endi alohida "ishtirok" nishoni: qalin tabular-nums matn +
   foiz plombasi (100%da zumrad, aks holda xira), pastida zumrad gradientli
   progress-yo'lak. Raqamlar — assigned_count/done_count (HAQIQIY backend
   ma'lumoti, renderSurveyCards() prep bosqichi, api_views.py::
   SurveyListCreateView.get::assigned_count) — bu yerda hech qanday son
   TO'QILMAYDI. */
.sv-ratio{display:flex; align-items:center; justify-content:space-between; gap:8px}
.sv-ratio-txt{font-size:13px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums}
.sv-ratio-txt b{font-weight:800; letter-spacing:-.2px}
.sv-pct-badge{flex-shrink:0; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;
  padding:2px 10px; border-radius:var(--pill);
  background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--muted)}
.sv-pct-badge.full{background:var(--accent); color:var(--accent-ink)}
.sv-track{height:8px; border-radius:999px;
  background:color-mix(in srgb, var(--text) 8%, transparent); margin:10px 0 6px; overflow:hidden}
.sv-track-fill{height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .3s cubic-bezier(.2,.8,.3,1)}
/* Bug #3 (buyurtmachi topgan): 3 amal tugmasi (Natijalar/Javoblar/Tahrirlash)
   ilgari `flex-wrap:wrap` + tugmalarning o'z tabiiy (siqilmaydigan) enligi
   sababli tor kartada 2-qatorga o'ralib ketardi. Endi bitta qator — har
   tugma teng ulush oladi (flex:1), matn sig'masa "…" bilan qisqaradi. */
.sv-footer{display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; gap:8px !important; width:100% !important;
  margin-top:14px !important; padding-top:13px; border-top:1px solid var(--border)}
.sv-footer .hbk-btn{
  flex:1 1 0px !important; min-width:0 !important; white-space:nowrap !important;
  padding:7px 8px !important; font-size:12px !important; border-radius:12px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:4px !important; text-overflow:ellipsis !important; overflow:hidden !important;
  background:color-mix(in srgb, var(--text) 4%, var(--panel)) !important;
  border:1px solid var(--border) !important; color:var(--muted) !important;
  height:auto !important; transition:.15s !important}
.sv-footer .hbk-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.sv-footer .hbk-btn:hover{color:var(--text) !important; border-color:var(--border2) !important;
  background:color-mix(in srgb, var(--text) 7%, var(--panel)) !important; transform:translateY(-1px)}
.svcard, .subcard{cursor:pointer}
/* ═══════════════ JAVOBLAR (kim nima dedi) — karta ichki tafsilot
   (2026-08-19, UI polish TZ, item 4). Fon/ramka/hover — yuqoridagi
   .svcard/.subcard umumiy tuzatishdan (bug #1) MEROS qilinadi, bu yerda
   FAQAT ichki tarkib: ism/sarlavha vazni, sana+holat "muzlatilgan" pill
   qatori va javob oldindan ko'rinishining inset konteyneri. */
#subsGrid{grid-template-columns:repeat(auto-fill, minmax(340px, 1fr))}
.subcard .card-name{font-weight:700; font-size:15px; text-transform:capitalize}
.subcard .card-pills{background:color-mix(in srgb, var(--hb-txt) 4%, transparent);
  border:1px solid var(--hb-brd); border-radius:14px; padding:7px 10px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.sub-answers{margin-top:14px; margin-bottom:0; padding:12px; font-size:13px; line-height:1.5;
  background:color-mix(in srgb, var(--hb-txt) 2.5%, var(--hb-sfc));
  border:1px solid var(--hb-brd); border-radius:14px}
.sub-answers .hb-hint{font-weight:700}
.subcard .sv-footer{margin-top:12px !important}
.subcard .sv-footer .hbk-btn{height:38px !important}

/* ═══════════════ DETAL ═══════════════ */
.detail{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; max-width:1180px; margin:0 auto}
.detail-head{padding:22px 24px; display:flex; gap:16px; align-items:flex-start; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--panel-2) 88%, transparent);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.detail-head .info{flex:1; min-width:0}
.detail-head h2{margin:0; font-size:21px; word-break:break-word}
.detail-head .sub{color:var(--muted); margin-top:4px; font-size:13.5px}
.detail-actions{display:flex; gap:8px; flex-wrap:wrap; padding:16px 24px; border-bottom:1px solid var(--border);
  background:var(--panel)}
.detail-body{padding:20px 24px}

/* ═══════════════ FORMA MAYDONLARI ═══════════════ */
.fgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 20px}

/* ═══════════════ MOBIL (≤640px) ═══════════════ */
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}

  /* Sub-nav tor ekranda ixchamroq (gorizontal skroll allaqachon .topnav'da) */
  .topnav{margin:0 -4px 14px; padding:0 4px 2px; -webkit-overflow-scrolling:touch}
  .topnav a{height:34px; padding:0 13px; font-size:12px}

  /* Toolbar — [2026-08-25, IKKINCHI TUZATISH] qidiruv + filtr (ikonka)
     ENDI BIR QATORDA (filtr matnsiz, 38px — qidiruv bilan sig'adi);
     "Qo'shish" tugmasi sig'masa keyingi qatorga tushadi. Select/sana
     maydonlari hamon `.toolbar-filters` panelida, standart holatda yopiq. */
  .toolbar{gap:8px}
  .search{flex:1 1 160px; min-width:0}
  .toolbar-filters .selbox{flex:1 1 130px}
  .toolbar-filters .dateinput{flex:1 1 130px; width:auto}
  .toolbar #addBtn{flex:1 1 100%; justify-content:center}

  .card > .hbk-card-body{padding:14px}
  .card-stats{gap:10px}
  .card-name{font-size:14.5px}

  /* Detal sahifa */
  .detail-head{padding:16px; gap:12px}
  .detail-head .type-ic{width:44px !important; height:44px !important; font-size:20px !important; border-radius:12px !important}
  .detail-head h2{font-size:18px}
  .detail-actions{padding:10px 12px; gap:6px}
  .detail-body{padding:14px}
  .formcard-h{padding:16px}
  .formcard-b{padding:16px}
  .formcard-f{padding:12px 16px}

  /* Natijalar — tor ekran (barlar .hb-bar-row'ning o'z 560px moslashuvida) */
  .numstats{gap:14px}
  .pagehead h2{font-size:17px}
  /* [2026-08-25 BUGFIX] Bu qoida `.subtabs a` edi — lekin UI.html.tabs()
     bu yerda `as:'a'` bermasdan chaqirilgani uchun HAQIQIY elementlar
     `<button class="hb-tab">`, `<a>` EMAS. Selektor hech qachon mos
     kelmagan, shu bois "So'rovnomalar/Cheklistlar" almashtirgichi
     mobilda ham desktop o'lchamida (38px/18px, hb-components.css bazaviy
     `.hb-tab`) qolib ketardi — yuqoridagi `.topnav a`dan yiriqroq
     ko'rinishining sababi shu edi. */
  .subtabs .hb-tab{height:34px; padding:0 13px; font-size:12px}
  .ans-head .ah-chips{flex-direction:row; flex-wrap:wrap; justify-content:flex-end}

  /* Mening so'rovlarim kirish bloki */
  .my-head{padding:16px}
  .my-head p{max-width:100%}

  /* Savol muharriri variant qatorining mobil setkasi — bazadan KEYIN turishi
     shart bo'lgani uchun pastda, o'z @media blokida (qarang: SAVOL MUHARRIRI). */

  /* Natija va modal */
  .result-hero{margin:6vh auto; padding:30px 18px}

  /* To'ldirish forma */
  .fill-hero{padding:18px}
  .fill-hero p{max-width:100%}
  .fill-q{padding:14px 16px}
  .fill-submit .fs-count{display:none}
  .fill-submit #submitBtn{flex:1; justify-content:center}
}
/* 2026-08-19 (UI Kit): forma maydonlari UI.html.input/select/textarea ga
   ko'chirildi — o'ram/yorliq/boshqaruv uslubi hb-field + hb-input dan.
   Bu yerda faqat setkadagi "butun qator" modifikatori qoldi. */
.full{grid-column:1/-1}
.checkline{display:flex; align-items:center; gap:9px; font-weight:600; color:var(--text); cursor:pointer; padding:4px 0}
.checkline input{width:17px;height:17px;accent-color:var(--accent); cursor:pointer}
.formcard{max-width:720px; margin:0 auto; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden}
.formcard-h{padding:20px 24px; border-bottom:1px solid var(--border); background:var(--panel-2);
  font-size:17px; font-weight:800; letter-spacing:-.2px}
.formcard-b{padding:22px 24px}
.formcard-f{padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end}

/* ═══════════════ SAVOLLAR RO'YXATI — savol turi kartalari ═══════════════ */
.qlist{display:flex; flex-direction:column}
/* 2026-08-19 (refinement round): savol qatori — ko'tarilgan squircle karta,
   shisha effekti bilan (backdrop-blur), avvalgi tekis .qitem o'rniga. */
.qitem{border:1.5px solid var(--border); border-radius:18px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  padding:18px 20px; margin-bottom:14px; display:flex; gap:12px;
  transition:border-color .15s, transform .15s ease, box-shadow .15s ease}
.qitem:hover{border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow)}
.qitem .qnum{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.qitem .qmain{flex:1; min-width:0}
.qitem .qtitle{font-weight:700; font-size:14px; word-break:break-word}
.qitem .qtitle .req{color:var(--danger); margin-left:3px}
.qitem .qdesc{color:var(--muted); font-size:12px; font-weight:600; margin-top:3px}
.qmeta{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.qopts{margin-top:10px; display:flex; flex-direction:column; gap:5px}
.qopt{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text)}
.qopt .obox{width:16px;height:16px;border:1.5px solid var(--border2);border-radius:5px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:11px}
.qopt.correct .obox{background:var(--ok); border-color:var(--ok); color:var(--accent-ink)}
.qopt.correct{color:var(--text); font-weight:700}
.qopt .oscore{margin-left:auto; font-size:11.5px; color:var(--faint)}
.qitem .qacts{display:flex; flex-direction:column; gap:6px; flex-shrink:0}
.qpage{background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--violet);
  border-radius:var(--radius-sm); padding:11px 15px;
  font-weight:800; color:var(--violet); display:flex; align-items:center; gap:8px}

/* ═══════════════ SAVOL QURUVCHI — yangi so'rovnoma ichida (2026-07-31) ═══════════════
   Ro'yxat elementi .qitem tilida (detal sahifadagi savollar bilan bir xil ko'rinish),
   qo'shimcha: ↑/↓ tartiblash tugmalari va bo'sh holat plashkasi. */
.qb-empty{border:1.5px dashed var(--border2); border-radius:var(--radius); padding:22px 18px; text-align:center;
  color:var(--muted); font-weight:600; font-size:12.5px; line-height:1.55}
.formcard-h .hb-chip{vertical-align:2px; margin-left:8px}
/* 4 amal (↑↓✏️🗑) ustun bo'lib cho'zilmasin — 2x2 setka
   (.qitem .qacts flex-column'idan ustun kelishi uchun selektor to'liq yozildi) */
.qitem .qacts.qacts-grid{display:grid; grid-template-columns:repeat(2,30px); gap:6px; align-content:start; flex-shrink:0}

/* ═══════════════ SAVOL MUHARRIRI MODALI (2026-07-31 pardoz) ═══════════════
   Fill-ekran tili bilan bir xil mahsulot hissi: harfli chip (.fq-num aka-uka),
   kartasimon variant qatori, "✓ To'g'ri" laym pill-toggle (yalang'och checkbox
   o'rniga), to'liq enli shtrixli "Variant qo'shish" (builder bo'sh holati tili).
   collectQuestionEditor() kontrakti SAQLANGAN: .optrow/.ov/.oc/.os/.rm/#qMand/#qScored. */
.qed-togs{display:flex; gap:8px; flex-wrap:wrap}
.qtog{position:relative; display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 16px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-weight:700;
  font-size:12.5px; color:var(--muted); transition:.15s; user-select:none; white-space:nowrap}
.qtog:hover{border-color:var(--border2); background:var(--panel-2)}
.qtog.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.qtog input{position:absolute; opacity:0; pointer-events:none}
.qed-opts{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px}
.optedit{display:flex; flex-direction:column; gap:8px}
.optrow{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 9px; transition:border-color .15s}
.optrow:focus-within{border-color:var(--accent)}
.oletter{width:26px; height:26px; border-radius:9px; background:var(--accent-soft); color:var(--accent);
  font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
.optrow .ov{flex:1; min-width:0; border:none; background:transparent; color:var(--text); font-family:inherit;
  font-size:13.5px; font-weight:600; outline:none; padding:9px 4px}
.optrow .ov::placeholder{color:var(--muted); font-weight:600}
.oc-tog{position:relative; display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 12px;
  border-radius:var(--pill); border:1.5px solid var(--border); color:var(--faint); font-size:11.5px;
  font-weight:800; cursor:pointer; flex-shrink:0; transition:.15s; user-select:none; white-space:nowrap}
.oc-tog:hover{border-color:var(--border2); color:var(--muted)}
.oc-tog.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.oc-tog input{position:absolute; opacity:0; pointer-events:none}
.oscw{display:inline-flex; align-items:center; gap:5px; flex-shrink:0}
.oscw .os{width:60px; height:32px; padding:0 6px; border:1px solid var(--border); border-radius:10px;
  background:var(--panel-2); color:var(--text); font-family:inherit; font-size:12.5px; font-weight:700;
  outline:none; text-align:center}
.oscw .os:focus{border-color:var(--accent)}
.oscw em{font-style:normal; font-size:10px; font-weight:800; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.optrow .rm{width:30px; height:30px; border-radius:10px; border:1px solid transparent; background:transparent;
  color:var(--faint); flex-shrink:0; font-size:13px; display:inline-flex; align-items:center; justify-content:center;
  transition:.15s}
.optrow .rm:hover{color:var(--danger); border-color:var(--danger); background:var(--danger-soft)}
.opt-add{width:100%; margin-top:10px; height:42px; border:1.5px dashed var(--border2); border-radius:var(--radius-sm);
  background:transparent; color:var(--muted); font-weight:700; font-size:12.5px; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:.15s}
.opt-add:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.qed-opthint{margin-top:9px; font-size:11.5px; font-weight:600; color:var(--faint)}
/* Tor ekranda variant qatori 2 qatorli aniq setka: 1-qator harf+matn+o'chirish,
   2-qator "✓ To'g'ri" + ball. DIQQAT: bu blok bazadagi .optrow{display:flex}dan
   KEYIN turishi shart — bir xil aniqlikda keyingi qoida yutadi (2026-07-31,
   media-blok fayl boshida turganda .ov 0 gacha siqilib yo'qolgan edi). */
@media(max-width:640px){
  .optrow{display:grid; grid-template-columns:26px 1fr auto auto; align-items:center}
  .optrow .ov{grid-area:1/2/2/4}
  .optrow .rm{grid-area:1/4}
  .oc-tog{grid-area:2/2; justify-self:start}
  .oscw{grid-area:2/3; justify-self:start}
}

/* ═══════════════ NATIJALAR ═══════════════
   Stat kartalari — hb-components.css'dagi .hb-stat/.hb-grid-auto (yagona tizim);
   bar-chart — o'sha yerdagi .hb-bar-row naqshi (560px mobil moslashuvi bilan). */
/* 2026-08-19 (UI polish TZ): to'liq-kenglik refaktor — 2 muvozanatli "hero"
   KPI kartasi (.results-hero, real Jami topshiriq/Tugatganlar soni,
   UI.html.stat({primary:true})) + har savol o'z oyna kartasida (spetsifikatsiya
   bo'yicha aniq o'lcham: border 1.5px, radius 20px, padding 20px, margin 18px).
   Chastota nishonlari ("1×"/"3×") — haqiqiy javob sonidan, o'zgarishsiz. */
/* 2026-08-20: hero endi 3 ta ko'rsatkich — "Biriktirilgan xodimlar"
   (auditoriya) / "Tugatganlar soni" (aniq XODIMLAR) / "Jami topshiriq"
   (QATORLAR). Ilgari 2 ta edi va ikkalasi ham qator soni bo'lgani uchun
   ro'yxat kartasidagi maxraj (auditoriya) bilan mos kelmasdi. */
.results-hero{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px}
.results-hero .hb-stat-primary{grid-column:auto}
@media(max-width:900px){ .results-hero{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .results-hero{grid-template-columns:1fr} }
.rblock{border:1.5px solid var(--hb-brd); border-radius:20px;
  background:var(--hb-sfc);
  padding:20px; margin-bottom:18px;
  transition:transform .15s ease, box-shadow .15s ease}
.rblock:hover{transform:translateY(-2px); box-shadow:var(--hb-shadow)}
.rblock .rq{font-weight:800; font-size:14px; margin-bottom:3px; word-break:break-word}
.rblock .rqmeta{font-size:11.5px; font-weight:600; color:var(--hb-mut); margin-bottom:12px}
.rblock .hb-bar-val, .qsum .hb-bar-val{width:96px; color:var(--hb-mut); font-weight:600; font-variant-numeric:tabular-nums}
.rblock .hb-bar-val b{color:var(--hb-txt); font-weight:800}
@media(max-width:560px){ .rblock .hb-bar-val, .qsum .hb-bar-val{width:78px; font-size:11px} }
.toplist{display:flex; flex-direction:column; gap:6px}
.topline{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 13px; background:var(--hb-sfc2);
  border-radius:var(--hb-radius-sm); font-size:13px}
/* Chastota nishoni ("1×"/"3×" — haqiqiy javob sonidan) — ko'zga tashlanadigan pill. */
.topline .tc{color:var(--hb-acc); font-weight:800; flex-shrink:0; background:var(--accent-soft);
  padding:3px 10px; border-radius:var(--pill); font-size:11.5px; font-variant-numeric:tabular-nums}
.numstats{display:flex; gap:22px; flex-wrap:wrap}
.numstats .ns{text-align:center}
.numstats .ns .nn{font-size:22px; font-weight:800; letter-spacing:-.4px; font-variant-numeric:tabular-nums}
.numstats .ns .nl{font-size:11px; color:var(--hb-mut); text-transform:uppercase; letter-spacing:.05em; font-weight:800}

/* ═══════════════ JADVALLAR — hb-table/hb-mobile-list (yagona tizim) ═══════════════
   Eski lokal .tbl olib tashlandi (2026-07-30) — ro'yxatlar endi hb-components.css'dagi
   .hb-table-wrap/.hb-table (desktop) + .hb-mobile-list/.hb-mobile-row (≤760px) juftligida. */
.hb-table tr.dim, .hb-mobile-row.dim{opacity:.55}
.hb-table tr:last-child td{border-bottom:none}
.hb-mobile-row:last-child{border-bottom:none}
.rowacts{display:inline-flex; gap:6px; align-items:center}
.pager{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px}
.pager .pinfo{color:var(--muted); font-size:12.5px; font-weight:700}

/* ═══════════════ KUNLIK TARIX + KUNLIK KARTA HOLATI (2026-07-31) ═══════════════
   "Mening so'rovlarim → 📜 Tarix" — sana bo'yicha guruh sarlavhalari (desktop
   jadval qatori + mobil ro'yxat sarlavhasi) va kunlik "bugun to'ldirilgan" karta. */
.hb-table tr.hist-date td{background:var(--panel-2); color:var(--muted); font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; padding:7px 14px}
.hist-dhead{padding:10px 14px 6px; color:var(--muted); font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; background:var(--panel-2); border-bottom:1px solid var(--border)}
.card.filled-today{cursor:default; border-color:var(--ok)}
.card.filled-today:hover{transform:none; border-color:var(--ok)}
.done-note{display:flex; align-items:center; justify-content:center; gap:7px; height:38px;
  border-radius:var(--radius-sm); background:var(--ok-soft); color:var(--ok); font-weight:800; font-size:12.5px}
/* Hero ichida muhlat o'tgan chip — accent fon ustida ham ikkala temada o'qiladi */
.fh-chip.danger{background:var(--danger); color:#fff}

/* ═══════════════ TO'LDIRISH ═══════════════
   2026-07-31 qayta pardoz: hero (my-head'ning accent tili), sticky progress-karta,
   javob berilgan savolda raqam chipi laymga to'ladi, sticky yuborish paneli. */
.fillcard{max-width:720px; margin:0 auto}
/* [2026-08-19, shisha redizayni] Ilgari to'liq accent-fon "banner" edi
   (katta xira emoji bilan) — endi minimalist: nozik shisha karta + chapda
   ikonka-nishon (icon-badge), sarlavha oddiy matn rangida. Kontent/matn
   JS'da o'zgarmadi, faqat qobiq. */
.fill-hero{background:color-mix(in srgb, var(--panel) 92%, var(--accent));
  color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px 16px 78px; margin-bottom:14px;
  box-shadow:none; position:relative; overflow:hidden;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.fill-hero::after{content:''; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:14px; opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316745C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v5h6'/%3E%3Cpath d='M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E") center/20px no-repeat, color-mix(in srgb, var(--accent) 16%, transparent);
  display:flex; align-items:center; justify-content:center; font-size:19px}
.fill-hero h2{margin:0; font-size:19px; letter-spacing:-.4px; word-break:break-word; position:relative; color:var(--text)}
.fill-hero p{margin:5px 0 0; opacity:1; color:var(--muted); font-size:12.5px; font-weight:700; max-width:85%; position:relative}
.fh-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; position:relative}
.fh-chip{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--pill);
  font-size:11.5px; font-weight:800; background:var(--panel-2); color:var(--muted); border:1px solid var(--border)}
.fill-q{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s}
.fill-q.err{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.fill-q.done{border-color:rgba(var(--accent-rgb),.55)}
.fill-q.done .fq-num{background:var(--accent); color:var(--accent-ink)}
.fill-q .fq-t{display:flex; gap:10px; align-items:flex-start; font-weight:800; font-size:14.5px;
  line-height:1.35; margin-bottom:3px}
.fill-q .fq-t .t{flex:1; min-width:0; word-break:break-word; padding-top:3px}
.fill-q .fq-num{min-width:28px; height:28px; padding:0 5px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent); font-weight:800; font-size:12.5px; display:inline-flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:background .15s,color .15s}
.fill-q .fq-t .req{color:var(--danger); margin-left:3px}
.fill-q .fq-d{color:var(--muted); font-size:12px; font-weight:600; margin:4px 0 12px; padding-left:38px}
.opt-choice{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1.5px solid var(--border);
  border-radius:14px; margin-top:9px; cursor:pointer; transition:border-color .12s,background .12s,transform .08s;
  font-weight:600; font-size:13.5px; min-height:48px; user-select:none}
.opt-choice:hover{border-color:var(--border2); background:var(--panel-2)}
.opt-choice:active{transform:scale(.995)}
.opt-choice input{width:19px;height:19px;accent-color:var(--accent); flex-shrink:0; margin:0}
.opt-choice.sel{border-color:var(--accent); background:var(--accent-soft); color:var(--text); font-weight:800}
/* 2026-08-21 (Wave 1, global klaviatura arxitekturasi TZ): AVVAL sticky
   panel edi (savollar ostidan "suzib" turardi) — mobil virtual klaviatura
   ochilganda oxirgi savol input/textarea'sini panel bilan birga TO'SIB
   qo'yardi (ikkalasi ham pastda joy talashardi). Endi ODDIY oqim ichidagi
   blok — forma oxirida, katta pastki padding bilan (klaviatura yopilgan
   holatda ham "Yuborish" tugmasi bottomnav/safe-area ostida qolib
   ketmasin). scroll-margin-bottom (hb-components.css, global qoida)
   fokusdagi so'nggi input shu panel ortida yashirin qolmasligini
   ta'minlaydi. */
.fill-submit{display:flex; gap:10px; align-items:center;
  justify-content:flex-end; margin-top:16px;
  padding:16px 0 calc(90px + env(safe-area-inset-bottom,0px))}
.fill-submit .fs-count{margin-right:auto; font-size:12px; font-weight:800; color:var(--muted);
  background:var(--panel); border:1px solid var(--border); padding:7px 13px; border-radius:var(--pill)}
.fill-submit #submitBtn{height:48px; padding:0 26px; font-size:14px}
.result-hero{max-width:540px; margin:8vh auto; text-align:center; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:44px 32px}
.result-hero .rh-ic{font-size:56px; margin-bottom:10px}
.result-hero .rh-pct{font-size:52px; font-weight:800; line-height:1; margin:12px 0; letter-spacing:-1.5px}
.result-hero h2{margin:0 0 6px; letter-spacing:-.4px}
.result-hero p{color:var(--muted); margin:0 0 20px; font-weight:600}

/* ═══════════════ MODAL ═══════════════
   2026-08-19 (UI Kit, 3-to'lqin): lokal `.modal-bg/.modal/.modal-h/-b/-f`
   o'chirildi — `modal()` yordamchisi endi `UI.openModal()` ni o'raydi
   (hbk-modal-*), ESC/fon/✕/fokus tuzog'i kitda. */

/* ═══════════════ BITTA XODIMNING TO'LIQ JAVOBLARI (HR modali) ═══════════════
   2026-08-19 (UI polish TZ): kartalar hb- tokenlariga o'tkazildi (glass Q&A
   karta + inset javob kapsulasi), sarlavhaga HAQIQIY bo'lim/lavozim qo'shildi
   (backend: _respondent_dept_role(), api_views.py — StaffProfile.job_title
   ustuvor, TrainingUser.department/role zaxira). Modal o'zi (fon/tirqish)
   TEGILMAGAN — hbk-modal-ov 2026-08-19'da allaqachon kuchaytirilgan. */
.ans-modal-ov .hbk-modal{max-width:680px; width:92vw; border-radius:26px !important}
@media(max-width:560px){
  /* Kit'ning mobil "bottom-sheet" xulqi (faqat yuqori burchaklar) SAQLANADI —
     faqat radius kattaligi shu modalga xos 26px'ga moslashtiriladi. */
  .ans-modal-ov .hbk-modal{border-radius:26px 26px 0 0 !important}
}
.ans-head{display:flex; gap:12px; align-items:center; margin-bottom:14px; padding-bottom:14px;
  border-bottom:1px solid var(--hb-brd)}
.ans-head .ah-main{flex:1; min-width:0}
.ans-head .ah-name{font-weight:800; font-size:16px; letter-spacing:-.2px; word-break:break-word;
  text-transform:capitalize}
.ans-head .ah-sub{color:var(--hb-txt); font-size:12.5px; font-weight:700; margin-top:3px}
.ans-head .ah-meta{color:var(--hb-mut); font-size:11.5px; font-weight:600; margin-top:3px}
.ans-head .ah-chips{display:flex; flex-direction:column; gap:5px; align-items:flex-end; flex-shrink:0}
.ans-q{border:1px solid var(--hb-brd); border-radius:16px;
  background:color-mix(in srgb, var(--hb-txt) 3%, var(--hb-sfc));
  padding:14px 16px; margin-bottom:12px}
.ans-q.unanswered{opacity:.6}
.ans-qt{display:flex; gap:9px; align-items:flex-start; font-weight:700; font-size:13.5px; line-height:1.35}
.ans-qt .t{flex:1; min-width:0; word-break:break-word}
.ans-qt .req{color:var(--hb-danger)}
.ans-num{min-width:24px; height:24px; padding:0 4px; border-radius:8px; background:var(--accent-soft);
  color:var(--hb-acc); font-weight:800; font-size:12px; display:inline-flex; align-items:center;
  justify-content:center; flex-shrink:0}
.ans-qmark{flex-shrink:0}
.ans-opts{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.ans-opt{display:flex; align-items:center; gap:9px; padding:9px 12px; border:1.5px solid var(--hb-brd);
  border-radius:10px; background:var(--hb-sfc); font-size:12.5px; font-weight:600; color:var(--hb-mut)}
.ans-opt .ob{width:16px; height:16px; border-radius:var(--pill); border:2px solid var(--hb-brd2);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800}
.ans-opt .ot{flex:1; min-width:0; word-break:break-word}
.ans-opt.sel{border-color:var(--hb-acc); background:var(--accent-soft); color:var(--hb-txt); font-weight:700}
.ans-opt.sel .ob{background:var(--hb-acc); border-color:var(--hb-acc); color:var(--accent-ink)}
.ans-opt .ocorr{flex-shrink:0; font-size:10.5px; font-weight:800; color:var(--hb-ok)}
/* Javob kapsulasi — ilgari chap-chiziqli "quote" ko'rinishi edi, endi
   spetsifikatsiya bo'yicha to'liq ramkali inset kapsula. */
.ans-val{margin-top:10px; padding:10px 14px; background:var(--hb-sfc); border:1px solid var(--hb-brd);
  border-radius:10px; font-weight:500; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word}
.ans-none{margin-top:10px; color:var(--hb-mut); font-weight:600; font-size:12.5px}

/* ═══════════════ HOLATLAR ═══════════════ */
/* ═══════════════ HOLATLAR ═══════════════
   2026-08-19 (UI Kit, 3-to'lqin): bo'sh holat (.empty), skeleton (.skel/.ln),
   yorliq (.pill*) va yuklagich (.spin) — hammasi kitga ko'chirildi
   (UI.html.empty / .skeleton / .chip / .spinner). */

/* ═══════════════ TOAST ═══════════════
   2026-08-19 (UI Kit, 3-to'lqin): lokal `.toast-wrap/.toast` O'CHIRILDI —
   `toast()` endi `UI.toast()` ni chaqiradi va kit o'z konteynerini
   (`.hbk-toasts`) TO'G'RIDAN-TO'G'RI document.body ga qo'yadi, ya'ni
   2026-08-04 da tuzatilgan `hb-screenin` containing-block tuzog'i bu yerda
   umuman yuzaga kelmaydi. */

/* auth blocker */
.authblock{max-width:440px; margin:10vh auto; text-align:center; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:40px 30px; box-shadow:var(--shadow-lg)}
.authblock .ai{font-size:48px; margin-bottom:14px}

/* ═══════════════ AUDITORIYA TANLAGICHI (HR) ═══════════════ */
.aud-box{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel-2); padding:12px; margin-top:8px}
.aud-box.dim{opacity:.5; pointer-events:none; filter:grayscale(.3)}
/* 2026-08-19 (UI Kit): auditoriya qidiruvi UI.html.search() ga ko'chirildi (hb-search). */
.aud-list{max-height:230px; overflow:auto; margin-top:10px; display:flex; flex-direction:column; gap:2px}
.aud-dept{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--faint);
  padding:8px 4px 3px; position:sticky; top:0; background:var(--panel-2)}
.aud-item{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-weight:600}
.aud-item:hover{background:var(--panel)}
.aud-item input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.aud-item.on{background:var(--accent-soft); color:var(--accent); font-weight:700}
.aud-item .cnt{margin-left:auto; font-size:11px; color:var(--faint)}
.aud-hint{font-size:11.5px; font-weight:600; color:var(--faint); margin-top:9px; padding-top:9px; border-top:1px dashed var(--border2)}

/* Individual xodim tanlagichi (2026-08-06) — tanlangan xodimlar "chip" sifatida,
   har birida ✕ o'chirish; ostida jonli qidiruv natijalari (aud-list qayta
   ishlatiladi). Chip ICHIDA yashirin checkbox — collectSurvey()/collectSurveySimple()
   boshqa 3 oyoq bilan BIR XIL ".aud-ck-user:checked" naqshi orqali o'qiy oladi. */
.aud-sel-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.aud-sel-chips:empty{margin-bottom:0}
.aud-chip-sel{display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 12px; border-radius:var(--pill);
  font-size:12px; font-weight:700; background:var(--accent-soft); color:var(--accent)}
.aud-chip-sel button{border:none; background:transparent; color:inherit; cursor:pointer; font-size:14px; line-height:1;
  padding:2px; opacity:.7; border-radius:50%}
.aud-chip-sel button:hover{opacity:1; background:color-mix(in srgb, var(--accent) 22%, transparent)}

/* Auditoriya rejimi — 3 tanlovli segmentlangan tugma (2026-08-06, mijoz so'rovi:
   oddiy so'rovnoma yaratish formasi — Hammaga/Bo'limlarga/Individual xodimlar).
   .subtabs bilan bir xil vizual til (faol=to'ldirilgan accent), lekin checkbox/link
   emas — radio, forma ichida (submit qilinmaydi, faqat JS holatini boshqaradi). */
.audseg{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 12px}
.audseg label{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:var(--pill);
  border:1px solid var(--border); background:var(--panel); font-size:13px; font-weight:700; cursor:pointer; user-select:none}
.audseg label:hover{border-color:var(--border2)}
.audseg input{position:absolute; opacity:0; width:0; height:0}
.audseg label.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* ═══════════════ AUDITORIYA — DETAL bloki ═══════════════ */
.aud-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-2); padding:14px 16px; margin-bottom:18px}
.aud-card .ac-h{display:flex; align-items:center; gap:8px; font-weight:800; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--faint); margin-bottom:10px}
.aud-chips{display:flex; flex-wrap:wrap; gap:6px}
.aud-chip{display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:var(--pill); font-size:12px;
  font-weight:700; background:var(--violet-soft); color:var(--violet)}

/* ═══════════════ MENING SO'ROVLARIM — kirish ═══════════════ */
/* [2026-08-19, shisha redizayni] .fill-hero bilan bir xil mantiq — og'ir
   accent banner o'rniga minimalist sarlavha + ikonka-nishon. */
.my-head{background:color-mix(in srgb, var(--panel) 92%, var(--accent));
  color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px 16px 78px; margin-bottom:18px;
  box-shadow:none; position:relative; overflow:hidden;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.my-head::after{content:''; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:14px; opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316745C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E") center/20px no-repeat, color-mix(in srgb, var(--accent) 16%, transparent);
  display:flex; align-items:center; justify-content:center; font-size:19px}
.my-head h2{margin:0; font-size:19px; letter-spacing:-.4px; color:var(--text)}
.my-head p{margin:5px 0 0; opacity:1; color:var(--muted); font-size:12.5px; font-weight:700; max-width:80%}

/* ═══════════════ TO'LDIRISH — progress (sticky karta, hb-progress uslubi) ═══════════════ */
.fill-progress{position:sticky; top:0; z-index:20; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 15px; margin-bottom:14px; box-shadow:var(--shadow)}
.fpg-track{height:8px; background:var(--panel-2); border-radius:var(--pill); overflow:hidden}
.fpg-fill{height:100%; width:0; background:var(--accent); border-radius:var(--pill); transition:width .3s cubic-bezier(.2,.8,.3,1)}
.fpg-lbl{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted);
  margin-bottom:7px; font-weight:700}
.fpg-lbl b{color:var(--text); font-weight:800}
#fpgPct{font-weight:800}
#fpgPct.full{color:var(--ok)}
.fq-opts{display:flex; flex-direction:column}
/* 2026-08-19 (UI Kit): javob maydonlari UI.html.input/textarea({bare}) —
   ramka/fon/radius `hb-input` dan. Bu yerda faqat to'ldirish ekraniga xos
   kattaroq shrift va uzun matn maydonining minimal balandligi. */
.fq-in{font-size:14px}
textarea.fq-in{min-height:100px; resize:vertical; padding:12px 14px; height:auto}
/* ── 2026-08-20 ("tasodifan chala topshirib yubordim") ──────────────────
   .fq-err  — majburiy savol ostidagi INLINE xato matni (ilgari faqat
              qizil ramka + umumiy toast bor edi: xodim QAYSI savol
              muammoli ekanini ko'rmasdi).
   .cf-*    — yuborish/saqlashdan oldingi TASDIQ oynasi ichki matni.
   .ans-editbar — "To'liq javoblar" modalidagi "muhlatgacha tahrirlash"
              chizig'i (xodimning O'Z javobi ochilganda). */
.fq-err{margin-top:9px; font-size:12.5px; font-weight:700; color:var(--danger);
  background:var(--danger-soft); border-radius:10px; padding:8px 11px}
.fq-err[hidden]{display:none}
/* 2026-08-29 ("Majburiy ishtirok + so'rovnoma"): WEEKLY "Qatnashmayman"
   tanlansa ochiladigan MAJBURIY sabab maydoni — .fq-err bilan bir xil
   vizual til (qizil ramka .err holatida), lekin alohida blok (o'z
   ichida ham .fq-in, ham ichki .fq-reason-err bor). */
.fq-reason{margin-top:10px; padding:11px 13px; border:1.5px dashed var(--border2);
  border-radius:12px; background:var(--panel-2)}
.fq-reason[hidden]{display:none}
.fq-reason.err{border-color:var(--danger); border-style:solid}
.fq-reason .fq-in{margin-top:2px}
.cf-wrap{font-size:13.5px; font-weight:600; color:var(--text); line-height:1.5}
.cf-count{font-size:15px; font-weight:800; margin-bottom:10px}
.cf-ok{color:var(--muted)}
.cf-blank{background:var(--warn-soft); border:1px solid var(--border);
  border-radius:12px; padding:11px 13px; margin-bottom:4px}
.cf-blank ul{margin:7px 0 9px; padding-left:19px}
.cf-blank li{margin:3px 0}
.ans-editbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;
  background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 14px; margin-bottom:14px; font-size:12.5px; font-weight:700; color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL RESPONSIVE — 2-BOSQICH (2026-08-25, "Muloqot bo'limi responsive" TZ)

   NEGA FAYL OXIRIDA: yuqoridagi «MOBIL (≤640px)» bloki fayl O'RTASIDA
   turadi, lekin u nishonga olgan klasslarning bir qismi (.my-head,
   .fill-hero, .fill-q, .formcard-*, .result-hero, .ans-head .ah-chips)
   O'SHA BLOKDAN KEYIN e'lon qilingan — bir xil aniqlikda keyingi qoida
   yutgani uchun ular MOBILDA UMUMAN ISHLAMAYDI (brauzerda o'lchab
   tasdiqlandi: 360px'da .my-head computed padding = "16px 20px 16px 78px",
   ya'ni mobil qiymat emas). Shu bois mobil tuzatishlar shu yerga —
   eng oxirga — yig'ildi. Yuqoridagi eski blok ATAYIN o'chirilmadi
   (undagi TIRIK qoidalar: .fgrid, .topnav, .toolbar, .detail-head,
   .detail-body, .card-stats — o'z joyida ishlayapti).

   ⚠️ TUZOQ: CSS izohi ichida yulduzcha va qiyshiq chiziq YONMA-YON
   kelmasin — u izohni ERTA yopadi va keyingi qoidani parser yutib
   yuboradi. Aynan shu qatorda `.detail-` + `.card-` joker belgilar
   bilan yozilgan edi va `.subtabs .hb-tab` qoidasi CSSOM'ga umuman
   tushmagan (matn HTML'da bor, `cssRules`da yo'q — getComputedStyle
   bilan topildi).

   FAQAT KO'RINISH: hech bir `id`, DOM tartibi, hodisa yoki API
   o'zgarmadi. `collectQuestionEditor()` bog'langan .optrow ichki
   tartibiga (.ov/.oc/.os/.rm) TEGILMAGAN — faqat o'lchamlar.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sub-nav yorliqlari matn o'rtasidan ikki qatorga bo'linmasin
      ("Topshirganlar / (34)" ikki qator bo'lib, qator balandligini
      buzardi). .topnav a'da nowrap allaqachon bor edi, kit'dan kelgan
      .hb-tab'da yo'q edi. */
/* Kit'dagi `.hb-tab` — `display:grid; place-items:center`
   (hb-components.css:764). Yorlig'i IKKI tugundan iborat bo'lgan tab
   (matn + `<span class="sv-tab-count">(34)</span>`, app.js::_setTabCounts)
   grid'da IKKI QATORGA bo'linib ketardi: mobilda pill ikki qatorlik
   bo'lib qatorni buzardi, ish stolida esa qat'iy `height:38px` ichida
   son ko'rinmay qolardi. `.sv-tab-count{margin-left:5px}` qoidasining
   o'zi ham son INLINE bo'lishi ko'zda tutilganini ko'rsatadi.
   Bir qatorli flex — grid'ning `place-items:center` bilan bir xil
   markazlashtirish beradi, boshqa hech narsa o'zgarmaydi. */
.subtabs .hb-tab{display:inline-flex; align-items:center; justify-content:center; white-space:nowrap}

@media (max-width:640px){
  /* ── Yorliq qatorlari ───────────────────────────────────────────────
     .subtabs: tor ekranda gorizontal skroll o'rniga O'RALADI — aks holda
     FAOL yorliq (masalan "Topshirmaganlar") ekrandan tashqarida qolib,
     foydalanuvchi qayerdaligini ko'rmasdi. */
  .subtabs{flex-wrap:wrap; overflow-x:visible; row-gap:8px}

  /* ── "Kirish" bloklari (.my-head / .fill-hero) — QAYTA TIKLANDI ─────
     Ikonka-nishon ilgari `top:50%` bilan VERTIKAL MARKAZDA edi: mobilda
     sarlavha 3–4 qatorga cho'zilganda nishon matnning o'rtasida "suzib"
     qolardi. Endi birinchi qator bilan tekislanadi va chap padding
     78px → 60px (tor ekranda ~18px matn eni yutuq). */
  .my-head, .fill-hero{padding:14px 16px 14px 60px}
  .my-head::after, .fill-hero::after{
    left:14px; top:14px; transform:none; width:34px; height:34px;
    border-radius:11px; font-size:16px}
  .my-head h2, .fill-hero h2{font-size:17px}
  .my-head p, .fill-hero p{max-width:100%}

  /* ── Sahifa sarlavhasi — mobilda uzun so'rovnoma nomi bitta qatorga
        "…" bilan kesilardi; endi 2 qatorgacha ochiladi. */
  .pagehead h2{white-space:normal; overflow:hidden; font-size:17px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

  /* ── Forma kartasi (Yangi so'rovnoma / savol muharriri) ── */
  .formcard-h{padding:15px 16px; font-size:15.5px}
  .formcard-b{padding:16px}
  .formcard-f{padding:12px 16px}
  .checkline{padding:8px 0}
  .checkline input{width:20px; height:20px}

  /* ── Toolbar filtr paneli: "Dan/Gacha" juftligi BITTA muvozanatli
     qatorda, tanlagich (select) o'z alohida qatorida ── */
  .toolbar-filters .selbox{flex:1 1 100%}
  .toolbar-filters .dateinput{flex:1 1 calc(50% - 4px); width:auto; min-width:0}

  /* ── Karta pastidagi 3 amal tugmasi — 31px juda past tegish maydoni ── */
  .sv-footer .hbk-btn{min-height:40px !important; padding:8px 6px !important; font-size:11.5px !important}

  /* ── Detal sahifa amallari — 6 tugma nolg'in 3 qatorga o'ralardi;
        endi teng 2 ustunli setka. `<span style="flex:1">` — faqat
        desktop uchun fleks-ajratgich, setkada bo'sh katak qoldirardi. */
  .detail-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .detail-actions > span{display:none}
  .detail-actions > .hbk-btn{width:100%; min-width:0; min-height:42px; justify-content:center}

  /* ── Savol qatori (detal + savol quruvchi) ── */
  .qitem{padding:14px; gap:10px}
  .qitem .qacts{gap:8px}
  .qitem .qacts .hb-iconbtn-sm{width:36px; height:36px; font-size:14px}
  .qitem .qacts.qacts-grid{grid-template-columns:repeat(2,36px)}

  /* ── Savol muharriri: tegish maydonlari ── */
  .qtog{height:42px}
  .oc-tog{height:36px}
  .optrow .rm{width:34px; height:34px}

  /* ── Auditoriya tanlagichi ── */
  .audseg{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .audseg label{height:42px; padding:0 10px; font-size:12.5px; justify-content:center; text-align:center}
  .aud-item{padding:10px; font-size:13.5px}
  .aud-item input{width:19px; height:19px}
  .aud-list{max-height:44vh}

  /* ── To'ldirish ekrani ── */
  .fill-q{padding:14px 15px}
  .result-hero{margin:5vh auto; padding:28px 18px}
  .result-hero .rh-ic{font-size:46px}
  .result-hero .rh-pct{font-size:42px}
}

/* ── Natijalar: 3 ta KPI plitkasi ───────────────────────────────────────
   ≤520px'da ilgari BITTA ustunga tushardi — uchta plitka butun ekranni
   egallab, ostidagi savol taqsimotiga yetib borish uchun uzoq skroll
   kerak edi. Endi ixcham 3 ustunli "KPI qatori" (raqamlar HAQIQIY
   backend qiymatlari — faqat shrift/padding kichraytirildi). */
@media (max-width:520px){
  .results-hero{grid-template-columns:repeat(3,1fr); gap:8px}
  .results-hero .hb-stat{padding:11px 10px; gap:5px}
  .results-hero .hb-stat-label{font-size:10px; line-height:1.25; letter-spacing:0}
  .results-hero .hb-stat-val{font-size:21px; letter-spacing:-.4px}
  .results-hero .hb-stat-primary .hb-stat-val{font-size:23px}
  .results-hero .hb-stat-sub{font-size:10px}
}

/* ── Javob taqsimoti chizig'i (Natijalar + Javoblar) ────────────────────
   Tor ekranda `hb-bar-row` uch ustunli qator edi: yorliq 88px'ga
   "…" bilan kesilardi ("Ha qatnasha…"), qiymat esa ikki qatorga
   sinardi ("28 kishi · / 82.4%"). Endi ikki qatorli setka: yuqorida
   TO'LIQ yorliq + qiymat, ostida to'liq kenglikdagi yo'lak.
   HISOB-KITOBGA TEGILMAGAN — foiz/son o'sha JS'dan keladi. */
@media (max-width:560px){
  .rblock .hb-bar-row, .qsum .hb-bar-row{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"lbl val" "trk trk";
    gap:3px 8px; align-items:center; margin-bottom:12px}
  .rblock .hb-bar-row .hb-bar-label, .qsum .hb-bar-row .hb-bar-label{
    grid-area:lbl; width:auto; text-align:left; white-space:normal;
    overflow:visible; text-overflow:clip; font-size:12px; line-height:1.35}
  .rblock .hb-bar-row .hb-bar-val, .qsum .hb-bar-row .hb-bar-val{
    grid-area:val; width:auto; white-space:nowrap; font-size:11.5px}
  .rblock .hb-bar-row .hb-bar-track, .qsum .hb-bar-row .hb-bar-track{
    grid-area:trk; height:12px}
}

/* ── "To'liq javoblar" modali (HR) ──────────────────────────────────────
   1) Kit ≤560px'da modalni pastki varaqqa (bottom-sheet) aylantiradi,
      lekin lokal `width:92vw` uni yon tomonlardan uzib qo'yar edi —
      pastki burchaklari to'g'ri, yonlarida bo'shliq: "sinib qolgan"
      ko'rinish. Endi to'liq kenglik.
   2) Sarlavha qatori: holat nishoni ("Tugatilgan") o'ng ustunni
      egallab, ism/lavozim 4–5 qatorga siqilardi. Endi nishonlar
      ismning OSTIDA, o'z qatorida. */
@media (max-width:560px){
  .ans-modal-ov .hbk-modal{width:100%; max-width:100%}
  .ans-head{align-items:flex-start; flex-wrap:wrap}
  .ans-head .ah-chips{flex:1 1 100%; flex-direction:row; flex-wrap:wrap;
    align-items:center; justify-content:flex-start; margin-top:4px}
}

/* ── Bosh yorliq qatori (.topnav) mobilda ────────────────────────────
   1) SIG'ISH: 430px'da "Kunlik hisobotlar" tashqariga chiqib kesilardi
      (skroll bor edi, lekin ko'rinish "buzilgan" edi). O'lchandi: 390px'da
      0px toshish, 360px'da 18px toshish qolgan edi — shu bois 380px'da
      yana bir pog'ona.
   2) SHAFFOFLIK: [2026-08-25, standart qoida — qarang 78-85/99-qatorlar]
      Ilgari BU YERDA butun qatorni bitta umumiy fon bilan o'rab, ichidagi
      chegaralangan tugmalarni "kapsula" ga aylantirilardi (platforma
      bo'ylab taqiqlangan naqsh — Kalendar/Muloqot'da ham xuddi shu sabab
      bilan olib tashlandi). Muammoning O'ZI (mobil skrollda ostidagi
      kartalar yorliqlar orasidan ko'rinib turishi) HAR BIR yorliqning O'Z
      foni bilan (`background:var(--panel)`, 81-qator) hal qilindi — umumiy
      o'ram foni SHART EMAS edi. Bu yerda faqat teng kenglik + yopishqoq
      joylashuv qoldi. */
@media (max-width:640px){
  /* Kapsula EMAS — faqat teng ulushli joylashuv (ilgari `inline-flex`
     bo'lgani uchun o'ngida bo'sh joy qolardi). */
  .topnav{display:flex; width:100%}
  .topnav a{flex:1 1 auto; justify-content:center}
}
@media (max-width:430px){
  .topnav a{padding:0 11px; font-size:11.5px}
}
@media (max-width:380px){
  .topnav a{padding:0 8px; font-size:11px}
}

/* ── VIRTUAL KLAVIATURA (core.js: --hbk-kb / .hbk-kb-open) ──────────────
   To'ldirish ekranida klaviatura ochilganda ~336px vertikal joy yo'qoladi.
   Ikkita "bo'sh" element joyni band qilib turardi:
     • .fill-progress — yopishqoq (sticky) karta, ekran tepasidan ~56px;
     • .fill-submit — pastida bottomnav/safe-area uchun 90px+ padding.
   Klaviatura ochiq bo'lganda ikkalasi ham kerak emas: bottomnav
   ko'rinmaydi, progress esa oddiy oqimga qaytadi. */
/* Brauzer fokusdagi maydonni ko'rinishga sudraganda savol MATNI ham
   birga kelsin: hb-components.css:1389 barcha maydonlarga faqat
   `scroll-margin-bottom:120px` beradi, tepadan esa maydon shell'ning
   yopishqoq topbar'i ostiga tegib qolardi. */
.fill-q .fq-in{scroll-margin-top:110px}
.hbk-kb-open .fill-progress{position:static}
.hbk-kb-open .fill-submit{padding-bottom:16px}
/* Bosh yorliq qatori ham klaviatura ochiqda kerak emas — yozayotgan
   xodim uchun yana ~48px matn maydoni (o'lchandi: 360px telefonda
   klaviatura ochiq bo'lganda ko'rinadigan balandlik atigi 404px). */
.hbk-kb-open .topnav{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   KUNLIK AI HISOBOTLAR (#/digests) — 2026-09-16 redizayn
   (buyurtmachi: "sana filtri o'zimizning tayyor tanlagich bo'lsin,
   sahifa platforma dizayn standartida bo'lsin"; TZ/ui-audit-2026-09-15/
   TZ.md §0 — emoji yo'q, qaymoq/kulrang fon yo'q, kit komponentlari,
   ixcham ikonka-tugmalar, 390px'da gorizontal skroll yo'q).
   FAQAT KO'RINISH: digest.js dagi id'lar (#dfShift, #dgDateIn, #dgToday,
   #dgYday, #digestListBody) va API so'rovi o'zgarmagan.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sahifa sarlavhasi — oq yuza + yashil aksentli ikonka nishoni ── */
.dg-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;
  padding:16px 18px; border-radius:var(--radius); background:var(--panel);
  border:1px solid var(--border)}
.dg-head h2{margin:0; font-size:18px; letter-spacing:-.3px; line-height:1.25}
.dg-head p{margin:5px 0 0; color:var(--muted); font-size:12.5px; font-weight:600; line-height:1.5}
.dg-head-ic{flex:0 0 auto; width:40px; height:40px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent)}
/* ── "Avtomatik yuborish" tugmachasi (digest.js, 2026-09-16) — sarlavha
   kartasining o'ng chekkasi; tor ekranda matn ostiga tushadi (dg-head
   flex-wrap). Oq yuza, qaymoq/kulrang yo'q (TZ §0.1). ── */
.dg-head{flex-wrap:wrap}
.dg-auto{flex:0 1 auto; min-width:0; max-width:100%; margin-left:auto;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.dg-auto .hbk-switch{flex-direction:row-reverse}
.dg-auto-sub{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  font-size:12px; font-weight:600; color:var(--muted); line-height:1.4; text-align:right}
.dg-auto-st{display:inline-flex; align-items:center; gap:4px; min-height:20px}
.dg-auto-st:empty{display:none}
.dg-auto-st.is-ok{color:var(--ok, #16a34a)}
.dg-auto-st.is-err{color:var(--danger, #dc2626)}
.dg-auto-st .hb-btn{height:24px; padding:0 8px; font-size:12px}
@media (max-width:640px){
  .dg-auto{flex:1 1 100%; margin-left:0; align-items:flex-start}
  .dg-auto .hbk-switch{flex-direction:row}
  .dg-auto-sub{justify-content:flex-start; text-align:left}
}

/* ── Filtr paneli: smena (combobox) + sana (kit daterange) + tezkor chip ── */
.dg-toolbar{align-items:center; gap:8px}
.dg-shift{width:186px; max-width:100%}
.dg-date{max-width:100%}
/* Qaymoq/kulrang emas — tanlagichlar OQ yuzada turadi (TZ §0.1). */
.dg-toolbar .hbk-combo-trigger,
.dg-toolbar .hbk-daterange-trigger{background:var(--panel); height:38px; padding:0 14px}
.dg-toolbar .hbk-combo-trigger{font-size:13.5px}
.dg-quick{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.dg-quick-chip{height:32px; padding:0 14px; cursor:pointer; font-weight:700;
  background:var(--panel); border:1px solid var(--border); color:var(--muted)}
.dg-quick-chip:hover{border-color:var(--accent); color:var(--accent)}
.dg-quick-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.dg-quick-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink)}

/* ── Kalendar popoveri SHU sahifada: digest BITTA kunga tegishli, shu
   bois "Yillik"/"Butun tarix" va "oraliq" maslahati ortiqcha.
   DIQQAT: panel `document.body` ga qo'yiladi (daterange.js), shu bois
   tanlagich ham sahifa o'ramidan TASHQARIDA — bu fayl esa faqat shu
   sahifada ulanadi (boshqaruv/sorovnoma.html), demak boshqa modullarga
   ta'sir qilmaydi. ── */
.hbk-daterange-panel[data-owner-id="dgDateIn"] [data-dr-quick="year"],
.hbk-daterange-panel[data-owner-id="dgDateIn"] [data-dr-quick="all"],
.hbk-daterange-panel[data-owner-id="dgDateIn"] .hbk-dr-hint{display:none !important}
.hbk-daterange-panel[data-owner-id="dgDateIn"] .hbk-dr-foot{justify-content:center}

/* ── Ro'yxat kartasi ── */
.dg-ic{flex:0 0 auto; width:40px; height:40px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--border)}
.dg-card .card-top{align-items:center}
.dg-acts{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.dg-acts .hb-iconbtn{text-decoration:none}
.dg-acts .hb-iconbtn:hover{color:var(--accent)}
/* To'sqinlik qilgan so'rovnoma nomlari uzun bo'lishi mumkin — chip
   kartadan chiqib ketmasin (to'liq matn `title` da qoladi). */
.dg-chip-blocked{flex:1 1 100%; max-width:100%; min-width:0; justify-content:flex-start}
.dg-blocked-txt{display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width:640px){
  .dg-head{padding:14px; gap:10px}
  .dg-head h2{font-size:16px}
  .dg-head-ic{width:34px; height:34px; border-radius:11px}
  /* Tanlagichlar tor ekranda to'liq enni oladi, tezkor chiplar esa
     ostidagi qatorda teng bo'linadi — gorizontal skroll yo'q. */
  .dg-toolbar{gap:8px}
  .dg-shift{width:100%; flex:1 1 100%}
  .dg-date{flex:1 1 100%}
  .dg-toolbar .hbk-daterange{display:flex; width:100%}
  .dg-toolbar .hbk-daterange-trigger{width:100%; justify-content:flex-start}
  .dg-toolbar .hbk-daterange-trigger-lbl{flex:1}
  .dg-quick{flex:1 1 100%}
  .dg-quick-chip{flex:1 1 0; justify-content:center; min-width:0}
}