/* ═══════════════════════════════════════════════════════════════════════
   company-pages.css — Oliy maqsad / Qadriyatlar / Qoidalar / Nizom sahifalari
   va Kompaniya sahifalari boshqaruv konsoli (admin).
   Zamonaviy, nafis, qulay va responsiv dizayn tizimi (2026-09-09 redizayn).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ekran moslashuvi va konteyner ── */
.hb-content:has(.hcp-page),
.hb-content:has(.cpa) {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (max-width: 860px) {
  .hb-content:has(.hcp-page),
  .hb-content:has(.cpa) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── Asosiy sahifa konteyneri (Nafis va mutanosib kenglik) ── */
.hcp-page {
  /* 2026-09-18 (buyurtmachi: "video ustidagi matnni video kengligicha qil")
     — hero iqtibosi va video teatri ALOHIDA `max-width` bilan yozilgan edi
     (1040-40=1000px matn ↔ 1080px video), shu bois matn videodan torroq
     chiqib, ko'zga tashlanardi. Endi ikkalasi ham shu YAGONA
     o'zgaruvchidan o'qiydi — biri o'zgarsa ikkinchisi ergashadi. */
  --hcp-stage-w: 1080px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 8px 4px 80px;
}

/* ── Umumiy karta poydevori (Design System Card) ── */
.hcp-card {
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hcp-card:hover {
  border-color: color-mix(in srgb, var(--hb-acc) 35%, var(--hb-brd));
}

/* ── 1. Flagman Hero: Oliy maqsad bayonoti (Ochiq, markaziy va muhtasham) ── */
.hcp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 2026-09-18: yon to'ldirish `.hcp-hero-main`ga ko'chirildi — aks holda
     iqtibos qutisi videodan har tomondan 16px torroq chiqardi. */
  padding: 32px 0 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 18px;
}

.hcp-hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.hcp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 10%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 25%, transparent);
  padding: 6px 18px;
  border-radius: var(--hb-pill);
}

.hcp-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hb-acc);
  box-shadow: 0 0 8px var(--hb-acc);
  animation: hcp-pulse 2s infinite ease-in-out;
}

/* 2026-09-10 (buyurtmachi: "har bir sahifada boshidagi [sarlavha]
   ajralib alohida rangda va shriftda tursin") — Oliy maqsad/Qadriyatlar/
   Qoidalar/Nizom'ning HAMMASI shu bitta partial'ni ishlatadi
   (hero_big.html), shu bois bitta qoida 4 sahifaga ham tarqaladi.
   Rang — brend accent (--hb-acc-text, eyebrow bilan bir xil oila),
   shrift — italic + kengroq harf oralig'i, atrofdagi qora matndan
   (eyebrow pastida, quote ustida) aniq ajralib tursin. */
.hcp-hero-title {
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--hb-acc-text);
  margin: 0;
  line-height: 1.15;
}

.hcp-hero-quote-wrap {
  position: relative;
  width: 100%;
  max-width: var(--hcp-stage-w, 1080px);
  margin: 18px auto;
  padding: 0;
  box-sizing: border-box;
}

.hcp-hero-quote {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.22;
  font-weight: 900;
  color: var(--hb-txt);
  margin: 0;
  letter-spacing: -0.035em;
  /* 2026-09-18: `text-wrap: balance` qatorlarni "tenglashtirish" uchun
     ataylab QISQARTIRADI — quti kengaytirilsa ham matn baribir torroq
     ko'rinardi (aynan buyurtmachi ko'rsatgan nuqson). `pretty` faqat
     oxirgi qatordagi yolg'iz so'zni oldini oladi, kenglikni to'liq
     ishlatadi. Mobil qoida (@640px) `wrap` bilan avvalgidek qoladi. */
  text-wrap: pretty;
  text-align: center;
}

/* Hero Audio pleyeri */
.hcp-audio-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: var(--hb-pill);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 4px;
}

.hcp-audio-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--hb-acc);
  color: var(--hb-acc-ink, #0B1F19);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.hcp-audio-btn:hover {
  transform: scale(1.08);
}

.hcp-audio-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.hcp-audio-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hb-txt);
}

.hcp-audio-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--hb-mut);
}

.hcp-audio-track {
  width: 110px;
  height: 4px;
  border-radius: 999px;
  background: var(--hb-brd);
  overflow: hidden;
  cursor: pointer;
}

.hcp-audio-progress {
  width: 0%;
  height: 100%;
  background: var(--hb-acc);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* ── 2. Standalone Video Teatr (Katta alohida video + Autoplay) ── */
.hcp-video-theater {
  width: 100%;
  max-width: var(--hcp-stage-w, 1080px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hcp-theater-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--hb-acc) 30%, var(--hb-brd));
  box-shadow:
    0 24px 70px -15px rgba(0, 0, 0, 0.7),
    0 0 50px -10px rgba(var(--hb-acc-rgb), 0.25);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hcp-theater-frame.is-playing {
  border-color: var(--hb-acc);
  box-shadow:
    0 28px 80px -15px rgba(0, 0, 0, 0.8),
    0 0 60px -5px rgba(var(--hb-acc-rgb), 0.4);
}

.hcp-theater-frame iframe,
.hcp-theater-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.hcp-theater-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hcp-theater-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 8px;
  flex-wrap: wrap;
}

.hcp-theater-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-mut);
}

.hcp-theater-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hb-acc);
  box-shadow: 0 0 8px var(--hb-acc);
  animation: hcp-pulse 1.8s infinite ease-in-out;
}

.hcp-theater-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hcp-theater-sound-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--hb-pill);
  background: color-mix(in srgb, var(--hb-acc) 18%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 45%, transparent);
  color: var(--hb-acc-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(var(--hb-acc-rgb), 0.15);
}

.hcp-theater-sound-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: var(--hb-acc);
  color: var(--hb-acc-ink, #0B1F19);
  border-color: var(--hb-acc);
  box-shadow: 0 4px 16px rgba(var(--hb-acc-rgb), 0.35);
}

.hcp-theater-sound-btn.is-active {
  background: var(--hb-acc);
  color: var(--hb-acc-ink, #0B1F19);
  border-color: var(--hb-acc);
}

.hcp-media-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--hb-pill);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  color: var(--hb-txt);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hcp-media-action-btn:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: translateY(-1px);
}

.hcp-media-action-btn svg:first-child {
  color: #ef4444;
}

/* ── Bo'lim sarlavhalari (Section Headers) ── */
.hcp-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.hcp-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hb-brd);
}

.hcp-sec-overline {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-acc-text);
  margin-bottom: 4px;
}

.hcp-sec-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hb-txt);
  margin: 0;
}

.hcp-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--hb-mut);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  padding: 4px 14px;
  border-radius: var(--hb-pill);
}

/* ── 3. Kelajak rejasi (Vizyon Showcase - Ochiq va qulay) ── */
.hcp-vision-showcase {
  position: relative;
  padding: 16px 0 20px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hcp-vision-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hcp-vision-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 12%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 25%, transparent);
  padding: 4px 14px;
  border-radius: var(--hb-pill);
}

.hcp-vision-years {
  font-size: 13px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--hb-acc);
  letter-spacing: 0.05em;
}

.hcp-vision-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hb-txt);
  margin: 0;
  line-height: 1.3;
}

.hcp-vision-text {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--hb-txt);
  margin: 0;
  max-width: 1040px;
  opacity: 0.95;
}

/* ── 4. Strategik ustunlar (3 Pillars Grid) ── */
.hcp-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 980px) {
  .hcp-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.hcp-pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.hcp-pillar-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--hb-acc) 50%, var(--hb-brd));
  box-shadow: 0 22px 50px -8px rgba(0, 0, 0, 0.2);
}

.hcp-pillar-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}

.hcp-pillar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hcp-pillar-card:hover .hcp-pillar-img {
  transform: scale(1.08);
}

.hcp-pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

.hcp-pillar-num-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hcp-pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 0;
}

.hcp-pillar-num {
  font-size: 32px;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--hb-acc);
  line-height: 1;
}

.hcp-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 10%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 25%, transparent);
  padding: 3px 10px;
  border-radius: var(--hb-pill);
}

.hcp-pillar-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.hcp-pillar-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--hb-txt);
  margin: 0;
  letter-spacing: -0.01em;
}

.hcp-pillar-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--hb-mut);
  margin: 0;
}

/* ── 5. Amaliy ijro: Yillik Roadmap va Bo'lim maqsadlari ── */
/* 2026-09-10 (buyurtmachi: "Yillik bosqichlar va Bo'limlar kesimida
   alohida qatorlarda chiqar") — ikki ustunli grid o'rniga bitta ustun,
   ikkalasi ketma-ket (yuqori-past) qator sifatida chiqadi. */
.hcp-exec-split {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hcp-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
}

.hcp-col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--hb-txt);
  margin: 0;
}

.hcp-badge-sm {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hb-mut);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  padding: 2px 10px;
  border-radius: var(--hb-pill);
}

/* Chap ustun: Yillik maqsadlar xronologik Roadmap / Timeline ko'rinishida */
/* 2026-09-10 (buyurtmachi: "ustun emas qator qilib joylashtir") — sahifa
   endi bitta ustunli bo'lgani uchun (avvalgi tuzatish) vertikal
   "timeline" (chiziq+nuqta bilan) endi HAR BIR band to'liq sahifa
   kengligida, bir-birining OSTIDA bo'lib, juda uzun sahifa hosil
   qilardi. Endi Strategik ustunlar bilan BIR XIL — grid, bir nechta
   band bir qatorda. Chiziq/nuqta (vertikal ketma-ketlik belgisi) olib
   tashlandi — gorizontal qatorda mazmunsiz edi. */
/* 2026-09-11 (buyurtmachi: "Strategik ustunlardagi cardlar borku shunday
   card qil Amaliy maqsadlar va bo'limlar dagi cardlarni ham") — bu ikki
   ro'yxat endi Strategik ustunlar bilan AYNAN BIR XIL karta klasslarini
   ishlatadi (`.hcp-pillar-card` va h.k., mission.html'ga qarang) — o'z
   alohida `.hcp-timeline-item`/`.hcp-dept-card` uslubi endi kerak emas,
   faqat GRID konteynerining o'zi qoladi (auto-fit — Strategik ustunlar
   FIXED 3 ustunidan farqli, bosqich/bo'lim soni turlicha bo'lishi mumkin). */
.hcp-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.hcp-dept-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ── 6. KPI & Shaxsiy natija ── */
.hcp-kpi-card {
  padding: 28px 34px;
  border-radius: 18px;
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  border-left: 4px solid var(--hb-acc);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
}

.hcp-kpi-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hcp-kpi-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--hb-txt);
  margin: 0;
}

.hcp-kpi-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--hb-mut);
  margin: 0;
  max-width: 960px;
}

/* ── Qadriyatlar gridi (values.html uchun) ── */
.hcp-values-grid {
  display: grid;
  /* 2026-09-10 (buyurtmachi: "iconlarni olib tashla, kattaroq qil") —
     260px'dan 340px'ga: kamroq, kattaroq ustun. */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  /* 2026-09-10 (buyurtmachi: "ichidagi paddingni yo'qot") — standart
     `align-items:stretch` bir qatordagi qisqaroq kartani (masalan
     tavsifsiz "Yangi qadriyat") eng balandiga TENGLAB CHO'ZARDI, natijada
     karta ichida katta bo'sh joy qolardi (padding emas, cho'zilish edi).
     `start` — har karta faqat o'z tarkibi balandligida qoladi. */
  align-items: start;
}

/* 2026-09-10 (buyurtmachi: "qadriyat nomlarini carddan tashqariga
   chiqar") — sarlavha endi shu wrap ichida, KARTADAN TASHQARIDA (uning
   ustida), karta faqat rasm+tavsifni o'z ichiga oladi. */
.hcp-value-wrap { display: flex; flex-direction: column; gap: 10px; }

/* 2026-09-10 (buyurtmachi: "chetidagi bosh joyni olib tashla, Strategik
   ustunlar cardiga o'xshatib qil") — .hcp-pillar-card bilan BIR XIL
   naqsh: rasm to'liq kenglikda, karta chetlariga tegib turadi (padding
   YO'Q); faqat matn qismi (.hcp-value-body) o'z padding'iga ega. */
.hcp-value {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--hb-radius);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
}

.hcp-value:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hb-acc) 35%, var(--hb-brd));
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
}

.hcp-value-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.hcp-value-body { padding: 20px 22px 24px; }

.hcp-value-title {
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  color: var(--hb-txt);
  line-height: 1.3;
}

.hcp-value-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--hb-mut);
  margin: 0;
}
/* 2026-09-10: .hcp-value endi <article> emas <button> (bosilganda popup
   ochilishi uchun) — UA-standart tugma ko'rinishini bekor qiladi, boshqa
   xususiyatlar (fon/chegara/joylashuv) yuqoridagi asosiy qoidada qoladi. */
.hcp-value { cursor: pointer; font: inherit; text-align: left; width: 100%; }
.hcp-value:focus-visible { outline: none; border-color: var(--hb-acc); }

/* 2026-09-10: pillar/timeline/dept kartalari endi `role="button"` (bosilsa
   popup ochiladi) — kursor va fokus ko'rinishi qo'shildi, boshqa
   xususiyatlar o'zgarmadi. */
.hcp-pillar-card.hcp-modal-trigger { cursor: pointer; }
.hcp-pillar-card.hcp-modal-trigger:focus-visible { outline: none; border-color: var(--hb-acc); }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN KONSOLI (.cpa-*) — zamonaviy tahrirlash interfeysi
   ═══════════════════════════════════════════════════════════════════════ */

.cpa {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  /* 1600px+ ekranlarda matn qatorlari va formalar cheksiz cho'zilib
     ketmasin deb qulay o'qish kengligi bilan cheklab, markazga olindi
     (2026-09-09 dizayn ko'rigi — bu faqat .cpa konteynerga tegishli,
     boshqa .hcp-* ommaviy sahifalarga ta'sir qilmaydi). */
  max-width: 1320px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 80px;
}

#cpaNoAccess {
  display: none;
  padding: 60px 20px;
  text-align: center;
  color: var(--hb-mut);
  font-weight: 700;
  font-size: 15px;
}

/* ── Topbar / Sarlavha paneli ── */
.cpa-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}

.cpa-topbar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cpa-topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hb-acc-text);
  width: fit-content;
}

.cpa-topbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hb-acc);
  box-shadow: 0 0 8px var(--hb-acc);
  animation: hcp-pulse 2s infinite ease-in-out;
}

.cpa-topbar-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hb-txt);
  margin: 0;
}

.cpa-topbar-desc {
  font-size: 13px;
  color: var(--hb-mut);
  margin: 0;
}

.cpa-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cpa-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 40px;
  border-radius: var(--hb-pill);
  background: color-mix(in srgb, var(--hb-acc) 12%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 30%, transparent);
  color: var(--hb-acc-text);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.cpa-preview-btn:hover {
  background: var(--hb-acc);
  color: var(--hb-acc-ink, #0B1F19) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -2px rgba(var(--hb-acc-rgb), 0.45);
}

.cpa-preview-btn svg {
  flex: none;
  transition: transform 0.15s ease;
}

.cpa-preview-btn:hover svg {
  transform: translate(2px, -2px);
}

/* ── Segmented Tabs ── */
.cpa-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--hb-sfc);
  border-radius: var(--hb-pill);
  border: 1px solid var(--hb-brd);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  overflow-x: auto;
}

.cpa-tab-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: var(--hb-pill);
  background: linear-gradient(135deg, var(--hb-acc), var(--hb-acc-d));
  box-shadow: 0 4px 14px -2px rgba(var(--hb-acc-rgb), 0.45);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.cpa-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 14px;
  border-radius: var(--hb-pill);
  border: none;
  background: transparent;
  color: var(--hb-mut);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.cpa-tab-ic {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  opacity: 0.75;
}

.cpa-tab.active {
  color: var(--hb-acc-ink, #0B1F19);
}

.cpa-tab.active .cpa-tab-ic {
  opacity: 1;
}

.cpa-tab:not(.active):hover {
  color: var(--hb-txt);
}

/* ── Panel almashish: yumshoq fade o'tish ── */
.cpa-panel[hidden] {
  display: none !important;
}

.cpa-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cpa-panel.cpa-panel-out {
  opacity: 0;
  transform: translateY(6px);
}

.cpa-panel.cpa-panel-in {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Admin Bloklari ── */
.cpa-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  border-radius: var(--hb-radius);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cpa-block:focus-within {
  border-color: var(--hb-brd2);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.cpa-block-hero {
  padding: 28px 32px;
  border-radius: calc(var(--hb-radius) + 2px);
  background:
    radial-gradient(ellipse 500px 220px at 100% 0%, color-mix(in srgb, var(--hb-acc) 14%, transparent), transparent 70%),
    var(--hb-sfc);
  border: 1px solid color-mix(in srgb, var(--hb-acc) 26%, var(--hb-brd));
}

.cpa-block-hero.violet {
  background:
    radial-gradient(ellipse 500px 220px at 100% 0%, color-mix(in srgb, var(--hb-violet, #8b5cf6) 16%, transparent), transparent 70%),
    var(--hb-sfc);
  border-color: color-mix(in srgb, var(--hb-violet, #8b5cf6) 28%, var(--hb-brd));
}

.cpa-shead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

/* Bo'lim sarlavhasidagi rangli belgi — har bir blokni bir-biridan rangi
   bilan darhol ajratib turadi ("Oliy maqsad" tabidagi ~7 bo'limning
   qaysi biri qaysi ekanini bir qarashda ko'rish" talabi, 2026-09-09
   dizayn ko'rigi). Ilgari shablon `.hcp-section-icon`/`.c-acc` va h.k.
   sinflarini ishlatgan, lekin ular butun loyihada HECH QAYERDA
   CSS'siz edi — belgilar rangsiz va bezaksiz chiqardi. O'sha sinflar
   ommaviy sahifalarga (`.hcp-*`) tegishli va bu faylda tegilmaydi;
   shu sabab bu yerda o'zining `.cpa-shead-icon` sinfi yaratildi. */
.cpa-shead-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--hb-acc) 14%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 26%, transparent);
  color: var(--hb-acc-text);
}

.cpa-shead-icon.violet {
  background: color-mix(in srgb, var(--hb-violet, #8b5cf6) 16%, var(--hb-sfc));
  border-color: color-mix(in srgb, var(--hb-violet, #8b5cf6) 28%, transparent);
  color: var(--hb-violet, #8b5cf6);
}

.cpa-shead-icon.info {
  background: color-mix(in srgb, var(--hb-info, #0ea5e9) 16%, var(--hb-sfc));
  border-color: color-mix(in srgb, var(--hb-info, #0ea5e9) 28%, transparent);
  color: var(--hb-info, #0ea5e9);
}

.cpa-shead-icon.warning {
  background: color-mix(in srgb, var(--hb-warning, #f59e0b) 16%, var(--hb-sfc));
  border-color: color-mix(in srgb, var(--hb-warning, #f59e0b) 28%, transparent);
  color: var(--hb-warning, #f59e0b);
}

.cpa-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--hb-txt);
  margin: 0;
}

.cpa-count-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 16%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-acc) 25%, transparent);
  border-radius: var(--hb-pill);
  padding: 2px 10px;
  min-width: 20px;
  text-align: center;
}

.cpa-block-hint {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hb-mut);
  margin: -6px 0 4px;
}

.cpa-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  padding: 14px 16px;
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc);
  color: var(--hb-txt);
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cpa-textarea:focus {
  outline: none;
  background: var(--hb-sfc);
  border-color: var(--hb-acc);
  box-shadow: 0 0 0 3px rgba(var(--hb-acc-rgb), 0.16);
}

.cpa-block-hero .cpa-textarea {
  min-height: 120px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

/* 2026-09-10 (buyurtmachi: "boshidagi matn va videoni tahrirlash cmsda
   yo'q ekan") — Qadriyatlar/Qoidalar/Nizom hero'siga eyebrow/sarlavha
   uchun bir qatorli input, .cpa-textarea bilan bir xil uslub. */
.cpa-hero-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc);
  color: var(--hb-txt);
  font: inherit;
  font-size: 14px;
}
.cpa-hero-input:focus {
  outline: none;
  border-color: var(--hb-acc);
  box-shadow: 0 0 0 3px rgba(var(--hb-acc-rgb), 0.16);
}
.cpa-block-hero .cpa-hero-input:first-of-type { font-size: 13px; color: var(--hb-mut); }
.cpa-block-hero .cpa-hero-input + .cpa-hero-input { font-size: 18px; font-weight: 800; }
.cpa-block-hero .cpa-hero-input + .cpa-hero-input + .cpa-textarea { margin-top: 0; }

.cpa-save {
  align-self: flex-start;
  padding: 0 22px;
  height: 40px;
  border-radius: var(--hb-pill);
  border: none;
  background: linear-gradient(135deg, var(--hb-acc), var(--hb-acc-d));
  color: var(--hb-acc-ink, #0B1F19);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px -2px rgba(var(--hb-acc-rgb), 0.4);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.cpa-save:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -2px rgba(var(--hb-acc-rgb), 0.5);
}

.cpa-save:active {
  transform: scale(0.97);
}

.cpa-save:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* "Saqlanmagan o'zgarish bormi?" holati — ilgari 3 ta erkin textarea
   (Oliy maqsad/Kelajak rejasi/KPI izohi) uchun bunday signal umuman
   yo'q edi: faqat Saqlash bosilgach lahzalik toast chiqardi, shundan
   oldin foydalanuvchi "o'zgartirdimmi-yo'qmi, saqlandimi" deb
   bilolmasdi (2026-09-09 dizayn ko'rigi — buyurtmachining aniq
   ta'kidlagan muammosi). JS (company_pages_admin.js, initMissionTexts)
   matn `data-saved` bazaviy qiymatidan farq qilganda shu ikki sinfni
   qo'shadi/olib tashlaydi — boshqa hech qanday saqlash/API mantig'i
   o'zgartirilmagan. */
.cpa-textarea.is-dirty {
  border-color: color-mix(in srgb, var(--hb-warning, #f59e0b) 55%, var(--hb-brd));
  background: color-mix(in srgb, var(--hb-warning, #f59e0b) 5%, var(--hb-sfc));
}

.cpa-save {
  position: relative;
}

.cpa-save.is-pending {
  box-shadow: 0 4px 14px -2px rgba(var(--hb-acc-rgb), 0.4), 0 0 0 3px color-mix(in srgb, var(--hb-warning, #f59e0b) 35%, transparent);
}

.cpa-save.is-pending::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hb-warning, #f59e0b);
  border: 2px solid var(--hb-sfc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-warning, #f59e0b) 45%, transparent);
}

/* ── Ro'yxat qatorlari (Drag-and-Drop) ── */
.cpa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cpa-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--hb-brd);
  border-left: 4px solid var(--hb-brd2);
  border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc);
  cursor: grab;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cpa-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.08);
  background: var(--hb-sfc);
  border-color: var(--hb-brd2);
}

.cpa-row:focus-within {
  border-left-color: var(--hb-acc);
}

.cpa-row.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.cpa-row.over {
  outline: 2px dashed var(--hb-acc);
  outline-offset: -2px;
}

.cpa-row.inactive {
  opacity: 0.55;
  filter: grayscale(0.2);
}

#cpaGoalsRoot .cpa-row { border-left-color: var(--hb-acc); }
#cpaTacticalRoot .cpa-row { border-left-color: var(--hb-info, #0ea5e9); }
#cpaDeptGoalsRoot .cpa-row { border-left-color: var(--hb-warning, #f59e0b); }
#cpaValuesRoot .cpa-row { border-left-color: var(--hb-violet, #8b5cf6); }

.cpa-drag {
  flex: none;
  color: var(--hb-mut);
  display: grid;
  place-items: center;
  cursor: grab;
  padding: 2px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.cpa-drag:hover {
  opacity: 1;
}

.cpa-row-input {
  flex: 1;
  min-width: 140px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--hb-txt);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cpa-row-input:focus {
  outline: none;
  background: var(--hb-sfc);
  /* Ilgari faqat neytral `--hb-brd` ranggacha o'zgarardi — bu deyarli
     ko'rinmas edi va `.cpa-textarea:focus`dagi urg'u halqasidan farq
     qilardi. Endi qolgan barcha maydonlar bilan bir xil aksent+halqa
     naqshi (2026-09-09 dizayn ko'rigi: "fokus holatlari izchil bo'lsin"). */
  border-color: var(--hb-acc);
  box-shadow: 0 0 0 3px rgba(var(--hb-acc-rgb), 0.14);
}

.cpa-row-period {
  flex: none;
  width: 110px;
  border: 1px solid color-mix(in srgb, var(--hb-info, #0ea5e9) 30%, transparent);
  border-radius: var(--hb-pill);
  background: color-mix(in srgb, var(--hb-info, #0ea5e9) 12%, var(--hb-sfc));
  color: var(--hb-info, #38bdf8);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 12px;
  text-align: center;
  transition: border-color 0.15s ease;
}

.cpa-row-period:focus {
  outline: none;
  border-color: var(--hb-info, #0ea5e9);
}

.cpa-row-dept {
  flex: none;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--hb-warning, #fbbf24);
  background: color-mix(in srgb, var(--hb-warning, #f59e0b) 16%, var(--hb-sfc));
  border: 1px solid color-mix(in srgb, var(--hb-warning, #f59e0b) 28%, transparent);
  border-radius: var(--hb-pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.cpa-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hb-mut);
  cursor: pointer;
  user-select: none;
  flex: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.cpa-row-toggle:hover {
  background: color-mix(in srgb, var(--hb-acc) 8%, transparent);
  color: var(--hb-txt);
}

.cpa-row-toggle input {
  accent-color: var(--hb-acc);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.cpa-row-num {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--hb-mut);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-pill);
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
}

.cpa-row-static {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hb-txt);
  padding: 6px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpa-row-edit {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--hb-acc-text);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-pill);
  background: var(--hb-sfc);
  transition: all 0.15s ease;
}

.cpa-row-edit:hover {
  border-color: var(--hb-acc);
  background: color-mix(in srgb, var(--hb-acc) 10%, var(--hb-sfc));
}

/* Tugmachalar (Action icon buttons) */
.cpa-ib {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--hb-brd);
  background: var(--hb-sfc);
  color: var(--hb-txt);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cpa-ib:hover {
  border-color: var(--hb-acc);
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 8%, var(--hb-sfc));
  transform: translateY(-1px);
}

.cpa-ib:active {
  transform: scale(0.92);
}

.cpa-ib.danger:hover {
  border-color: var(--hb-danger, #ef4444);
  color: var(--hb-danger, #ef4444);
  background: color-mix(in srgb, var(--hb-danger, #ef4444) 10%, var(--hb-sfc));
}

.cpa-ib:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* Media panelini ochish tugmasi — qator ichida yuqoriga/pastga/o'chirish
   tugmalari bilan bir xil `.cpa-ib` ko'rinishida bo'lgani uchun ko'zga
   tashlanmas edi ("panel discoverable emas" — 2026-09-09 dizayn ko'rigi).
   `data-act="media"` orqali JS'ni o'zgartirmasdan, faqat shu bitta
   tugmani doimiy (hover kutmasdan) ozgina rang bilan ajratib turamiz.
   Bu qoida atayin `.has-media`/`.is-open`dan OLDIN turadi — ikkalasi
   ham xuddi shu specifikatsiyaga ega, shuning uchun keyingi qoidalar
   "media biriktirilgan/panel ochiq" holatlarida ustunlik qilishi kerak. */
.cpa-ib[data-act="media"] {
  border-color: color-mix(in srgb, var(--hb-violet, #8b5cf6) 30%, var(--hb-brd));
  color: color-mix(in srgb, var(--hb-violet, #8b5cf6) 75%, var(--hb-txt));
}

.cpa-ib[data-act="media"]:hover {
  border-color: var(--hb-violet, #8b5cf6);
  color: var(--hb-violet, #8b5cf6);
  background: color-mix(in srgb, var(--hb-violet, #8b5cf6) 10%, var(--hb-sfc));
}

.cpa-ib.has-media {
  border-color: color-mix(in srgb, var(--hb-acc) 50%, var(--hb-brd));
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 10%, var(--hb-sfc));
  position: relative;
}

.cpa-ib.has-media .cpa-ib-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hb-acc);
  box-shadow: 0 0 6px var(--hb-acc);
}

/* `.is-open` — JS (bindMediaPanel) panel ochilganda shu sinfni qo'shadi,
   lekin ilgari uning uchun HECH QANDAY CSS yo'q edi (haqiqiy bug: tugma
   "bosilgan/ochiq" holatini hech qanday ko'rsatmasdi). Eng oxirida
   turgani uchun `.has-media` bilan birga bo'lganda ham ustunlik qiladi. */
.cpa-ib.is-open {
  border-color: var(--hb-violet, #8b5cf6);
  color: #fff;
  background: var(--hb-violet, #8b5cf6);
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--hb-violet, #8b5cf6) 55%, transparent);
}

.cpa-row-media-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.cpa-row-thumb-link {
  display: inline-block;
  line-height: 0;
  flex: none;
}

.cpa-row-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--hb-brd);
  background: var(--hb-sfc);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: block;
}

.cpa-row-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.cpa-row-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  color: var(--hb-mut);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
}

.cpa-row-chip:hover {
  transform: translateY(-1px);
}

.cpa-row-chip.chip-video {
  border-color: color-mix(in srgb, var(--hb-danger, #ef4444) 40%, transparent);
  color: var(--hb-danger, #ef4444);
  background: color-mix(in srgb, var(--hb-danger, #ef4444) 8%, var(--hb-sfc));
}

.cpa-row-chip.chip-audio {
  border-color: color-mix(in srgb, var(--hb-info, #0ea5e9) 40%, transparent);
  color: var(--hb-info, #0ea5e9);
  background: color-mix(in srgb, var(--hb-info, #0ea5e9) 8%, var(--hb-sfc));
}

.cpa-row-chip.chip-desc {
  border-color: color-mix(in srgb, var(--hb-violet, #8b5cf6) 40%, transparent);
  color: var(--hb-violet, #8b5cf6);
  background: color-mix(in srgb, var(--hb-violet, #8b5cf6) 8%, var(--hb-sfc));
}

/* Yangi element qo'shish tugmasi */
.cpa-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 38px;
  border-radius: var(--hb-pill);
  border: 1px dashed var(--hb-brd2);
  background: transparent;
  color: var(--hb-mut);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.cpa-add:hover {
  border-color: var(--hb-acc);
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 8%, transparent);
  transform: translateY(-1px);
}

.cpa-add:active {
  transform: scale(0.97);
}

/* ── Redirect Bloklari (Qoidalar / Nizom CMS havolalari) ── */
.cpa-redirect {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.cpa-redirect-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--hb-acc) 14%, var(--hb-sfc));
  color: var(--hb-acc-text);
  border: 1px solid color-mix(in srgb, var(--hb-acc) 25%, transparent);
}

.cpa-redirect-icon svg {
  display: block;
}

.cpa-redirect-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cpa-redirect-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--hb-txt);
  margin: 0;
}

.cpa-redirect-lead {
  font-size: 13px;
  line-height: 1.65;
  color: var(--hb-mut);
  margin: 0;
  max-width: 60ch;
}

.cpa-redirect-btn {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 38px;
  border-radius: var(--hb-pill);
  background: linear-gradient(135deg, var(--hb-acc), var(--hb-acc-d));
  color: var(--hb-acc-ink, #0B1F19) !important;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px -2px rgba(var(--hb-acc-rgb), 0.35);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.cpa-redirect-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -2px rgba(var(--hb-acc-rgb), 0.45);
}

.cpa-redirect-btn:active {
  transform: scale(0.97);
}

.cpa-redirect-btn svg {
  flex: none;
  transition: transform 0.15s ease;
}

.cpa-redirect-btn:hover svg {
  transform: translateX(3px);
}

/* ── Kichikroq Bloklar (KPI izohi) ── */
.cpa-block-sm {
  padding: 16px 22px;
  opacity: 0.95;
}

.cpa-block-sm .cpa-block-title {
  font-size: 13.5px;
  color: var(--hb-mut);
}

.cpa-block-sm .cpa-textarea {
  min-height: 70px;
  font-size: 13px;
  background: var(--hb-sfc);
}

.cpa-block-sm .cpa-save {
  background: transparent;
  border: 1px solid var(--hb-brd);
  color: var(--hb-mut);
  height: 34px;
  font-size: 12.5px;
  box-shadow: none;
}

.cpa-block-sm .cpa-save:hover {
  color: var(--hb-txt);
  border-color: var(--hb-brd2);
  background: var(--hb-sfc);
  filter: none;
  transform: none;
}

/* ── Eslatmalar va Hero Media ── */
.cpa-note {
  padding: 14px 18px;
  border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc);
  border: 1px dashed var(--hb-brd);
  color: var(--hb-mut);
  font-size: 13px;
  line-height: 1.6;
}

.cpa-note a {
  font-weight: 700;
  color: var(--hb-acc-text);
}

.cpa-hero-media .cpa-media {
  display: flex;
  margin-top: 12px;
}

.cpa-hero-row,
.cpa-hero-row:hover {
  cursor: default;
  transform: none;
  box-shadow: none;
  padding: 0;
  border: none;
  background: transparent;
}

/* ── Inline Media Panel (.cpa-media) ── */
.cpa-media {
  flex: 1 1 100%;
  order: 99;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: var(--hb-radius);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  cursor: default;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.cpa-media[hidden] {
  display: none;
}

.cpa-media-desc {
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--hb-brd);
  border-radius: 8px;
  background: var(--hb-sfc);
  color: var(--hb-txt);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.cpa-media-desc:focus {
  outline: none;
  border-color: var(--hb-acc);
}

.cpa-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.cpa-media-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--hb-radius-sm);
  background: var(--hb-sfc);
  border: 1px dashed transparent;
  outline: 1px solid var(--hb-brd);
  outline-offset: -1px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* 2026-09-10 (buyurtmachi: "fayllarni surib ham qo'ya olish") — butun
   ustun tashlash maydoni; fayl tortib kelinganda ko'rinadigan signal. */
.cpa-media-col.is-dragover {
  border-color: var(--hb-acc);
  background: color-mix(in srgb, var(--hb-acc) 10%, var(--hb-sfc));
}

.cpa-media-col-t {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hb-mut);
}

.cpa-media-prev {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
}

video.cpa-media-prev {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #000;
}

audio.cpa-media-prev {
  height: 36px;
}

.cpa-media-prev-empty {
  width: 100%;
  height: 72px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hb-sfc) 60%, transparent);
  border: 1px dashed var(--hb-brd);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  color: var(--hb-mut);
  text-align: center;
  padding: 6px;
  box-sizing: border-box;
}

.cpa-media-prev-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.cpa-media-hint-link {
  font-size: 11px;
  text-align: right;
  line-height: 1.2;
}

.cpa-media-hint-link a {
  color: var(--hb-acc-text);
  font-weight: 700;
  text-decoration: none;
}

.cpa-media-hint-link a:hover {
  text-decoration: underline;
}

.cpa-media-btns {
  display: flex;
  gap: 6px;
}

.cpa-media-btns > * {
  flex: 1 1 0;
}

.cpa-media-upload-btn {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--hb-brd);
  background: var(--hb-sfc);
  color: var(--hb-txt);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cpa-media-upload-btn:hover {
  border-color: var(--hb-acc);
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 8%, var(--hb-sfc));
}

.cpa-media-upload-btn.is-busy {
  opacity: 0.6;
  pointer-events: none;
}
.cpa-media-upload-btn.is-busy::after {
  content: '…';
}

/* Standart (fallback) surat belgisi — buyurtmachi HR o'z fayli deb
   adashtirmasin (2026-09-10, "sahifada chiqayotgan rasmlar cmsda
   chiqmayabdi" bugidan keyin qo'shildi). */
.cpa-media-default-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--hb-pill, 999px);
  color: var(--hb-warning);
  background: color-mix(in srgb, var(--hb-warning) 16%, transparent);
}

.cpa-media-img-del {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--hb-danger, #ef4444) 30%, transparent);
  background: transparent;
  color: var(--hb-danger, #ef4444);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.cpa-media-img-del:hover {
  background: color-mix(in srgb, var(--hb-danger, #ef4444) 12%, transparent);
}

.cpa-media-url {
  border: 1px solid var(--hb-brd);
  border-radius: 7px;
  background: var(--hb-sfc);
  color: var(--hb-txt);
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  transition: border-color 0.15s ease;
}

.cpa-media-url:focus {
  outline: none;
  border-color: var(--hb-acc);
}

/* ── Bo'lim maqsadlari Admin Grid ── */
#cpaDeptGoalsRoot .cpa-list {
  display: grid;
  /* 2026-09-15 (UI audit B21): 260px da matn maydoni, tugmacha va uchta
     amal tugmasi bir-biriga siqilib, matn deyarli ko'rinmay qolardi. */
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
#cpaDeptGoalsRoot .cpa-row-input { flex: 1 1 100%; min-width: 0; }

#cpaDeptGoalsRoot .cpa-row {
  flex-wrap: wrap;
  row-gap: 8px;
  align-items: center;
  padding: 14px 14px 12px;
}

#cpaDeptGoalsRoot .cpa-row-dept {
  order: -1;
  flex: 1 1 100%;
}

#cpaDeptGoalsRoot .cpa-row:has(.cpa-media:not([hidden])) {
  grid-column: 1 / -1;
}

.cpa-dept-add {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px dashed var(--hb-brd2);
  border-radius: var(--hb-radius-sm);
  background: color-mix(in srgb, var(--hb-sfc) 50%, transparent);
}

.cpa-dept-select,
.cpa-dept-text {
  border: 1px solid var(--hb-brd);
  border-radius: 8px;
  background: var(--hb-sfc);
  color: var(--hb-txt);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
}

.cpa-dept-select {
  flex: none;
  min-width: 160px;
}

.cpa-dept-text {
  flex: 1;
  min-width: 200px;
}

/* Ilgari bu ikkalasida fokus holati umuman yo'q edi (haqiqiy
   qulaylik/erishuvchanlik kamchiligi — klaviatura bilan navigatsiya
   qilganda qaysi maydon faolligi ko'rinmasdi). */
.cpa-dept-select:focus,
.cpa-dept-text:focus {
  outline: none;
  border-color: var(--hb-acc);
  box-shadow: 0 0 0 3px rgba(var(--hb-acc-rgb), 0.14);
}

/* ── 2026-09-15 (UI audit B21, TZ/ui-audit-2026-09-15 §0) — faqat .cpa (admin) ──
   Auto-save holat belgisi, SVG bo'sh holatlar, qator amallari (trash doim
   qizil, faol holat yashil), kit switch/combobox o'lchamlari. */
.cpa-autosave {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  font-size: 12px;
  font-weight: 700;
  color: var(--hb-mut);
}
.cpa-autosave:empty { display: none; }
.cpa-autosave[data-state="ok"] { color: var(--hb-acc-text); }
.cpa-autosave[data-state="err"] { color: var(--hb-danger, #ef4444); }
.cpa-as-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--hb-acc) 30%, transparent);
  border-top-color: var(--hb-acc);
  animation: cpa-as-rot .7s linear infinite;
}
@keyframes cpa-as-rot { to { transform: rotate(360deg); } }
.cpa-as-retry {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px; padding: 3px 10px; height: 26px;
  border-radius: var(--hb-pill); border: 1px solid color-mix(in srgb, var(--hb-danger, #ef4444) 40%, transparent);
  background: var(--hb-sfc); color: var(--hb-danger, #ef4444);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cpa-as-retry:hover { background: color-mix(in srgb, var(--hb-danger, #ef4444) 8%, var(--hb-sfc)); }
.cpa-empty {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--hb-acc) 5%, var(--hb-sfc));
}
.cpa-empty .hb-ico { flex: none; color: var(--hb-acc-text); }
.cpa-media-prev-empty { gap: 4px; align-content: center; background: var(--hb-sfc); }
.cpa-media-prev-empty .hb-ico { color: var(--hb-mut); opacity: .8; justify-self: center; }
.cpa-ib .hb-ico { display: block; }
.cpa-ib.danger { color: var(--hb-danger, #ef4444); }
a.cpa-ib { text-decoration: none; color: var(--hb-acc-text); }
.cpa-media-btns > .cpa-ib { flex: none; height: auto; min-height: 30px; }
/* Faol/ochiq holat — brend yashil (ilgari binafsha edi). */
.cpa-ib[data-act="media"] {
  border-color: color-mix(in srgb, var(--hb-acc) 35%, var(--hb-brd));
  color: var(--hb-acc-text);
}
.cpa-ib[data-act="media"]:hover {
  border-color: var(--hb-acc);
  color: var(--hb-acc-text);
  background: color-mix(in srgb, var(--hb-acc) 10%, var(--hb-sfc));
}
.cpa-ib.is-open {
  border-color: var(--hb-acc);
  color: var(--hb-acc-ink, #0B1F19);
  background: var(--hb-acc);
  box-shadow: 0 3px 10px -2px rgba(var(--hb-acc-rgb), 0.45);
}
span.cpa-row-toggle { padding: 2px 4px; }
.cpa-row-toggle .hbk-switch { cursor: pointer; }
.cpa-dept-add .cpa-dept-combo { flex: 0 1 260px; min-width: 180px; }

/* ── Responsiv moslashuv ── */
@media (max-width: 900px) {
  .hcp-hero {
    padding: 28px 0;
  }
  .hcp-hero-main {
    padding: 0 24px;
  }
  .cpa-media-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hcp-page, .cpa {
    gap: 24px;
  }
  .hcp-hero {
    padding: 22px 0;
  }
  .hcp-hero-main {
    padding: 0 18px;
  }
  /* 2026-09-10 (buyurtmachi mobil skrinshotda ko'rsatdi): `clamp(36px,
     4.2vw, 58px)` mobil kenglikda 4.2vw juda kichik chiqib, doim
     MINIMUM 36px'ga qulflanardi — 9 so'zlik gap butun ekranni egallab,
     pastdagi tarkib ko'rinmay qolardi. Mobilga mos aniq o'lcham. */
  .hcp-hero-title { font-size: clamp(24px, 8vw, 32px); }
  /* 2026-09-10 (buyurtmachi: "mobildeda asosiy yozuv kengroq yozilsin")
     — `text-wrap:balance` mobil tor kenglikda qatorlarni "tenglashtirish"
     uchun KERAKSIZ tor qilib qisqartirardi (bir qatorga 3-4 so'z, butun
     matn baland "quti" bo'lib chiqardi — skrinshotda ko'rsatilgan qizil
     ramka). Oddiy tabiiy o'ralishga qaytarildi — mavjud kenglik TO'LIQ
     ishlatiladi, qatorlar tabiiy uzunlikda. */
  .hcp-hero-quote { font-size: clamp(17px, 5.2vw, 22px); line-height: 1.45; text-wrap: wrap; }
  .hcp-hero-quote-wrap { margin: 10px auto; padding: 0; }
  .hcp-goal-card, .cpa-block {
    padding: 16px 18px;
  }
  .hcp-dept-grid, .hcp-values-grid, .hcm-grid {
    grid-template-columns: 1fr;
  }
  /* ~390px'da sarlavha + "Saytda ko'rish" tugmasi bir qatorga
     sig'may siqilib qolardi — endi tugma pastga tushadi va to'liq
     kenglikda, bosish qulay bo'ladi (2026-09-09 dizayn ko'rigi). */
  .cpa-topbar {
    flex-wrap: wrap;
    padding: 18px;
  }
  .cpa-topbar-actions {
    width: 100%;
  }
  .cpa-preview-btn {
    width: 100%;
    justify-content: center;
  }
  .cpa-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .cpa-row-input {
    flex: 1 1 100%;
  }
  .cpa-dept-add {
    flex-direction: column;
    align-items: stretch;
  }
  .cpa-dept-select, .cpa-dept-text {
    width: 100%;
  }
  .cpa-dept-add .cpa-dept-combo {
    flex: none;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Scroll Animation ── */
.hcp-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hcp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hcp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hcp-goal::before, .hcp-badge-dot {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   .hbo-* — /kompaniya/jamoa/<team_key>/ (team_org.html), 2026-09-10
   redizayn (buyurtmachi tasdiqlagan chizma): logotip → sardor katta
   surati → xodimlar tekis to'ri (yonma-yon, ekranga siqqanicha, birinchi
   kishi kattaroq) → bosilganda pastda batafsil panel. Rang FAQAT
   --hb-* tokenlar + jamoaning HAQIQIY --panel-accent'i (TEAM_CONFIG,
   qizil/zumrad/oltin) — hech qanday yangi qattiq rang yo'q, qorong'i
   rejim avtomatik ishlaydi.
   ═══════════════════════════════════════════════════════════════════════ */

.hbo-hero2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 16px 8px;
}

.hbo-hero2-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hb-txt);
  margin: 4px 0 0;
}

.hbo-hero2-lead {
  font-size: 15px;
  color: var(--hb-mut);
  max-width: 46ch;
  margin: 0;
  line-height: 1.6;
}

.hbo-count-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--panel-accent, var(--hb-acc));
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 12%, transparent);
  padding: 5px 14px;
  border-radius: var(--hb-pill, 999px);
  margin-top: 6px;
}
.hbo-count-tag-sm { margin-top: 0; margin-left: auto; }

/* ── Logotip + sardor — BITTA qatorda (2026-09-10, buyurtmachi tuzatishi:
   "logo va rahbarni bitta qatorga qo'y", logotip orqasida rang/quti
   BO'LMASIN — o'zi katta aylana bo'lib tursin). ── */
.hbo-lead-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hbo-logo-bare {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
  flex: none;
}

.hbo-leader2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hbo-leader2-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 14%, var(--hb-sfc2));
  box-shadow: none;
  flex: none;
}
.hbo-leader2-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.hbo-leader2-name { font-size: 16px; font-weight: 800; color: var(--hb-txt); margin-top: 2px; }
.hbo-leader2-role { font-size: 12.5px; color: var(--hb-mut); font-weight: 600; }

@media (max-width: 480px) {
  .hbo-logo-bare, .hbo-leader2-avatar { width: 96px; height: 96px; }
}

/* ── "Boshqa jamoalar" almashtirgich pillari ── */
.hbo-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 4px;
}
.hbo-switch-label { font-size: 12.5px; color: var(--hb-mut); font-weight: 600; }
.hbo-switch-pill {
  font-size: 13px;
  font-weight: 700;
  color: var(--hb-txt);
  background: var(--hb-sfc2);
  border: 1px solid var(--hb-brd);
  border-radius: var(--hb-pill, 999px);
  padding: 6px 16px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.hbo-switch-pill:hover { border-color: var(--panel-accent, var(--hb-acc)); background: var(--hb-sfc); }

/* ── Xodimlar to'ri — yonma-yon, ekranga siqqanicha, keyin pastki
   qatorga tushadi (buyurtmachi chizmasi) ── */
.hbo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.hbo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 132px;
  padding: 16px 8px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hbo-card:hover { background: var(--hb-sfc2); }
.hbo-card.is-active { background: var(--hb-sfc2); border-color: var(--panel-accent, var(--hb-acc)); }

.hbo-card-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 16%, var(--hb-sfc2));
  color: var(--panel-accent, var(--hb-acc));
  font-weight: 800;
  font-size: 22px;
  flex: none;
}
.hbo-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hbo-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hb-txt);
  text-align: center;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hbo-card-role { font-size: 11px; color: var(--hb-mut); font-weight: 600; }

/* Birinchi kishi — odatda eng katta bo'lim rahbari — kattaroq ajratiladi. */
.hbo-card-big {
  width: 190px;
  padding: 22px 12px;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 8%, var(--hb-sfc2));
  border-color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 30%, var(--hb-brd));
}
.hbo-card-big .hbo-card-avatar { width: 140px; height: 140px; font-size: 32px; }
.hbo-card-big .hbo-card-name { font-size: 16px; }

/* ── Bosilganda ochiladigan batafsil panel (real ma'lumot — ism/lavozim/
   bo'lim, boshqa hech narsa: home_sections.py::_person() qoidasi) ── */
.hbo-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--hb-sfc2);
  border: 1px solid var(--panel-accent, var(--hb-brd));
  position: relative;
}
.hbo-detail-avatar {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 16%, var(--hb-sfc));
  color: var(--panel-accent, var(--hb-acc)); font-weight: 800; font-size: 16px; flex: none;
}
.hbo-detail-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbo-detail-info { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.hbo-detail-name { font-size: 16px; font-weight: 800; color: var(--hb-txt); }
.hbo-detail-role { font-size: 13px; color: var(--panel-accent, var(--hb-acc)); font-weight: 700; }
.hbo-detail-dept { font-size: 12.5px; color: var(--hb-mut); }
.hbo-detail-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--hb-mut); cursor: pointer;
}
.hbo-detail-close:hover { background: var(--hb-sfc); color: var(--hb-txt); }

@media (max-width: 640px) {
  .hbo-card { width: 104px; }
  .hbo-card-big { width: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3-TUR (2026-09-10, buyurtmachi belgilagan rasm) — sahifa doimiy
   qorong'i-ko'k fonga o'tadi (jamoaning o'z rangidan MUSTAQIL, umumiy
   uslub — buyurtmachi so'rovi: "rang ham shunday ko'k bo'laversin").
   `.hbo-dark` — --hb-* saytning umumiy tokenlaridan MUSTAQIL o'z
   palitrasini e'lon qiladi (xuddi shared/hb_shell_base.html'dagi
   `.hb-authgate` "iliq qog'oz" palitrasi bilan bir xil naqsh) — shu bois
   sayt och/qorong'i rejimidan qat'i nazar bu sahifa doim ko'k bo'lib
   qoladi, lekin `color-mix` orqali asosiy fonga ozgina bog'liq (butunlay
   qattiq kod emas).
   ═══════════════════════════════════════════════════════════════════════ */
.hbo-dark {
  --hbo-bg: color-mix(in srgb, #0a1130 92%, var(--hb-bg) 8%);
  --hbo-card: color-mix(in srgb, #171f52 88%, var(--hb-bg) 12%);
  --hbo-card2: color-mix(in srgb, #1f2a68 88%, var(--hb-bg) 12%);
  --hbo-ink: #f4f6ff;
  --hbo-mut: #a6afd9;
  --hbo-brd: rgba(255, 255, 255, 0.14);
  background: var(--hbo-bg);
  color: var(--hbo-ink);
  border-radius: 28px;
  padding: 26px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   5-TUR (2026-09-10, buyurtmachi: "boshidan yozamiz, qadam-baqadam") —
   1-qadam: bitta qator, CHAPDA logotip+jamoa nomi, O'NGDA rahbar
   ismi+surati. Oldingi filtr/karusel/sirg'anuvchi ro'yxat BUTUNLAY
   olib tashlandi (shablonda ham yo'q endi).
   ═══════════════════════════════════════════════════════════════════════ */
.hbo-simple-hero {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 28px;
}

.hbo-simple-left, .hbo-simple-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hbo-simple-hero .hbo-logo-bare { width: 52px; height: 52px; }

.hbo-simple-teamname {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--hbo-ink);
  letter-spacing: -0.01em;
}

.hbo-simple-leadername {
  font-size: 16px;
  font-weight: 700;
  color: var(--hbo-ink);
  text-align: right;
}

.hbo-simple-leaderphoto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--hbo-card2);
  border: 2px solid color-mix(in srgb, var(--panel-accent, #8ea2ff) 55%, transparent);
}
.hbo-simple-leaderphoto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

@media (max-width: 640px) {
  .hbo-simple-hero { flex-direction: column; align-items: stretch; }
  .hbo-simple-left, .hbo-simple-right { justify-content: space-between; }
  .hbo-simple-right { flex-direction: row-reverse; justify-content: flex-end; }
}

/* ── Oddiy xodimlar ro'yxati (filtr/karusel YO'Q, faqat pastga qarab
   ko'rinadigan oddiy qator-qator ro'yxat) ── */
.hbo-simple-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hbo-simple-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--hb-brd);
}
.hbo-simple-person:last-child { border-bottom: none; }

.hbo-simple-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 16%, var(--hb-sfc2));
  color: var(--panel-accent, var(--hb-acc));
  font-weight: 800;
  font-size: 14px;
  flex: none;
}
.hbo-simple-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hbo-simple-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hbo-simple-person-name { font-size: 14px; font-weight: 700; color: var(--hb-txt); }
.hbo-simple-person-role { font-size: 12.5px; color: var(--hb-mut); }

.hbo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.hbo-topbar .hbo-logo-bare { width: 56px; height: 56px; }

.hbo-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hbo-filter-pill {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hbo-mut);
  background: var(--hbo-card);
  border: 1px solid var(--hbo-brd);
  border-radius: var(--hb-pill, 999px);
  padding: 7px 15px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hbo-filter-pill:hover { color: var(--hbo-ink); }
.hbo-filter-pill.is-active { background: #fff; color: #0a1130; border-color: #fff; }

.hbo-eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-top: 18px;
}
.hbo-eyebrow-dark { color: var(--hbo-mut) !important; }
.hbo-title-dark { color: var(--hbo-ink) !important; }

/* ── "Podium" — markazda jamoa rahbari (ENG KATTA), ikki yonida
   ikkita yirik bo'limning rahbari (kichikroq). ── */
.hbo-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hbo-podium-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hbo-podium-photo {
  border-radius: 24px;
  overflow: hidden;
  background: var(--hbo-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-accent, #8ea2ff);
  font-weight: 800;
}
.hbo-podium-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.hbo-podium-side .hbo-podium-photo { width: 108px; height: 140px; font-size: 26px; }
.hbo-podium-main .hbo-podium-photo {
  width: 190px;
  height: 240px;
  font-size: 40px;
  border: 2px solid color-mix(in srgb, var(--panel-accent, #8ea2ff) 55%, transparent);
}

.hbo-podium-name { font-size: 14px; font-weight: 800; color: var(--hbo-ink); text-align: center; }
.hbo-podium-main .hbo-podium-name { font-size: 19px; }
.hbo-podium-role { font-size: 11.5px; font-weight: 600; color: var(--hbo-mut); text-align: center; }

/* ── "Boshqa jamoalar" va bo'lim, qorong'i fonga moslab ── */
.hbo-switch-dark { margin-top: 26px; }
.hbo-switch-dark .hbo-switch-label { color: var(--hbo-mut); }
.hbo-switch-dark .hbo-switch-pill {
  color: var(--hbo-ink);
  background: var(--hbo-card);
  border-color: var(--hbo-brd);
}
.hbo-switch-dark .hbo-switch-pill:hover { border-color: var(--panel-accent, #8ea2ff); }

.hbo-section-dark { margin-top: 8px; }
.hbo-section-dark .hcp-section-title,
.hbo-section-dark .hcp-section-icon { color: var(--hbo-ink) !important; }
.hbo-section-dark .hcp-section-icon { background: var(--hbo-card) !important; }
.hbo-empty-dark { color: var(--hbo-mut); }

/* ── Xodim kartasi — to'liq surat + ustida ism (2026-09-10, buyurtmachi
   tuzatishi #2), endi qorong'i fon ustida ── */
.hbo-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hbo-card2, color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 16%, var(--hb-sfc2)));
  display: flex;
  align-items: center;
  justify-content: center;
}
.hbo-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbo-card-initials { font-size: 24px; font-weight: 800; color: var(--panel-accent, #8ea2ff); }

.hbo-card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hbo-card-photo { position: relative; }
.hbo-card { position: relative; padding: 0; width: 130px; }
.hbo-card-overlay .hbo-card-name { color: #fff; font-size: 12.5px; -webkit-line-clamp: 2; }
.hbo-card-overlay .hbo-card-role { color: rgba(255, 255, 255, 0.78); font-size: 10.5px; }

.hbo-card-big { width: 210px; padding: 0; background: transparent; border-color: transparent; }
.hbo-card-big .hbo-card-photo { aspect-ratio: 3 / 4.4; }
.hbo-card-big .hbo-card-overlay .hbo-card-name { font-size: 16px; }
.hbo-card-big .hbo-card-overlay .hbo-card-role { font-size: 12px; }

.hbo-dark .hbo-card:hover .hbo-card-photo,
.hbo-dark .hbo-card.is-active .hbo-card-photo { box-shadow: 0 0 0 2px var(--panel-accent, #8ea2ff); }

/* ── Batafsil panel — qorong'i fonga moslab ── */
.hbo-dark .hbo-detail {
  background: var(--hbo-card);
  border-color: var(--hbo-brd);
}
.hbo-dark .hbo-detail-avatar { background: var(--hbo-card2); color: var(--panel-accent, #8ea2ff); }
.hbo-dark .hbo-detail-name { color: var(--hbo-ink); }
.hbo-dark .hbo-detail-dept { color: var(--hbo-mut); }
.hbo-dark .hbo-detail-close { color: var(--hbo-mut); }
.hbo-dark .hbo-detail-close:hover { background: var(--hbo-card2); color: var(--hbo-ink); }

@media (max-width: 640px) {
  .hbo-podium-side .hbo-podium-photo { width: 80px; height: 104px; }
  .hbo-podium-main .hbo-podium-photo { width: 140px; height: 176px; }
  .hbo-card { width: 104px; }
  .hbo-card-big { width: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4-TUR (2026-09-10) — buyurtmachi tayyor kod bergan naqsh: markazda
   KATTA "featured" xodim, ikki yonida oldingi/keyingi kichikroq
   xodimlar (o'q tugmalari bilan aylantiriladi), pastda gorizontal
   sirg'anuvchi to'liq ro'yxat, undan pastda tanlangan xodimning HAQIQIY
   ma'lumoti. `.hbo-podium`/`.hbo-grid`/`.hbo-card`/`.hbo-detail`
   yuqoridagi qoidalar endi ISHLATILMAYDI (eski, 3-TUR) — o'chirilmadi,
   chunki hech narsaga zarar bermaydi (klasslar shablonda yo'q).
   ═══════════════════════════════════════════════════════════════════════ */
.hbo-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 20px;
  margin-top: 34px;
  padding: 0 44px;
}

.hbo-arrow {
  position: absolute;
  top: 46%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hbo-brd);
  background: rgba(255, 255, 255, 0.06);
  color: var(--hbo-ink);
  transition: background .15s ease, transform .15s ease;
}
.hbo-arrow:hover { background: #fff; color: #0a1130; transform: translateY(-2px); }
.hbo-arrow.left { left: 0; }
.hbo-arrow.right { right: 0; }

.hbo-rail {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 16px;
  min-height: 150px;
}

.hbo-rail-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 82px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--hbo-ink);
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}
.hbo-rail-card:hover { opacity: 1; transform: translateY(-3px); }

.hbo-rail-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hbo-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-accent, #8ea2ff);
  font-weight: 800;
}
.hbo-rail-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hbo-rail-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.hbo-featured { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.hbo-featured-frame {
  width: min(230px, 46vw);
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--hbo-card2);
  border: 2px solid color-mix(in srgb, var(--panel-accent, #8ea2ff) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-accent, #8ea2ff);
  font-weight: 800;
  font-size: 42px;
}
.hbo-featured-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hbo-featured-copy { text-align: center; }
.hbo-featured-copy strong { display: block; font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; color: var(--hbo-ink); }
.hbo-featured-copy small { color: var(--hbo-mut); font-size: 12.5px; font-weight: 600; }

/* ── Gorizontal sirg'anuvchi ro'yxat — barcha xodim ── */
.hbo-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding: 30px 4px 6px;
  margin-top: 4px;
}
.hbo-strip::-webkit-scrollbar { height: 5px; }
.hbo-strip::-webkit-scrollbar-thumb { background: var(--hbo-brd); border-radius: 10px; }
.hbo-strip-item {
  flex: 0 0 190px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--hbo-ink);
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
  min-width: 0;
}
.hbo-strip-item:hover, .hbo-strip-item.is-active { background: var(--hbo-card); border-color: var(--hbo-brd); }
.hbo-strip-thumb {
  width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--hbo-card2); color: var(--panel-accent, #8ea2ff); font-weight: 800; font-size: 13px;
}
.hbo-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbo-strip-text { display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
.hbo-strip-text b { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbo-strip-text small { color: var(--hbo-mut); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pastdagi ochiq info-bo'lim — tanlangan xodimning HAQIQIY ma'lumoti
   + jamoa umumiy sonlari (soxta statistika YO'Q). Yorug' fon — qorong'i
   podium'dan keyin bosqichma-bosqich o'tish, DESIGN.md "band" naqshiga
   mos. ── */
.hbo-info-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
  padding: 26px 28px;
  background: var(--hb-sfc2);
  border-radius: 20px;
}
.hbo-info-eyebrow { color: var(--hb-mut); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hbo-info-person h2 { margin: 6px 0 0; font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--hb-txt); letter-spacing: -0.01em; }
.hbo-info-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--hb-mut); font-size: 13px; font-weight: 600; }
.hbo-info-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hb-mut); }
.hbo-info-stats { display: flex; gap: 28px; }
.hbo-stat-card { display: flex; flex-direction: column; gap: 2px; }
.hbo-stat-card strong { font-size: 30px; font-weight: 800; color: var(--panel-accent, var(--hb-acc)); }
.hbo-stat-card span { color: var(--hb-mut); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 780px) {
  .hbo-showcase { padding: 0 6px; grid-template-columns: 1fr; }
  .hbo-rail { display: none; }
  .hbo-arrow { top: -18px; }
  .hbo-arrow.left { left: 6px; }
  .hbo-arrow.right { right: 6px; }
  .hbo-featured-frame { width: min(220px, 60vw); margin: 0 auto; }
  .hbo-info-section { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6-TUR (2026-09-10, buyurtmachi chizmasi: "shunday logotiplar bular") —
   ingichka qora qatordan PASTDA, alohida: ikkita katta aylana — chapda
   jamoa logotipi, o'ngda rahbar surati.
   ═══════════════════════════════════════════════════════════════════════ */
.hbo-big-circles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}

.hbo-big-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hb-sfc2);
  border: 1px solid var(--hb-brd);
  flex: none;
}
.hbo-big-circle img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hbo-big-circle:first-child img { object-fit: contain; padding: 18px; }

@media (max-width: 520px) {
  .hbo-big-circle { width: 140px; height: 140px; }
  .hbo-big-circles { gap: 20px; }
}

/* [2026-09-10, 7-TUR] Qora panel o'chirilgach, doiralar YANADA
   kattalashtirildi (buyurtmachi chizmasi: o'q bilan "kattalashtir"
   belgilangan) — sahifaning yagona bosh vizual elementi. */
.hbo-big-circles-xl {
  margin-top: 24px;
  gap: 90px;
}
.hbo-big-circles-xl .hbo-big-circle {
  /* [2026-09-10, 9-TUR] To'liq 2x (640px) matnlar bilan yonma-yon
     sig'masligi aniqlandi (skrinshotda ko'rsatildi) — buyurtmachi
     tanlovi: o'rtacha kattalashtirish, hammasi bitta qatorda qolsin. */
  width: 420px;
  height: 420px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 40%, var(--hb-brd));
}
@media (max-width: 1400px) {
  .hbo-big-circles-xl .hbo-big-circle { width: 320px; height: 320px; }
}
@media (max-width: 780px) {
  .hbo-big-circles-xl .hbo-big-circle { width: 220px; height: 220px; }
  .hbo-big-circles-xl { gap: 32px; }
}
@media (max-width: 480px) {
  .hbo-big-circles-xl .hbo-big-circle { width: 170px; height: 170px; }
  .hbo-big-circles-xl { gap: 16px; }
}

/* ── Doiralar atrofidagi matn qutilari (8-TUR): chapda jamoa maqsadi
   (team.tagline), o'ngda rahbar ismi+lavozimi — ikkalasi HAQIQIY
   ma'lumot. ── */
.hbo-circles-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hbo-circle-text {
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* [2026-09-10, 10-TUR] "yozuvlarni kattalashtir, shriftlarni o'zgartir"
   — matn kattaroq, qalinroq, alohida shrift oilasi (hbo-hero2-title
   bilan bir xil qalin sarlavha shrifti) bilan ajratildi. */
.hbo-circle-text p {
  margin: 0;
  color: var(--hb-txt);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.hbo-circle-text-left { text-align: right; align-items: flex-end; }
.hbo-circle-text-right { text-align: left; align-items: flex-start; }
.hbo-circle-text-right strong { font-size: 28px; font-weight: 800; color: var(--hb-txt); letter-spacing: -0.01em; }
.hbo-circle-text-right span { font-size: 16px; color: var(--panel-accent, var(--hb-acc)); font-weight: 700; }
.hbo-circle-text-right em {
  font-style: normal;
  font-size: 15px;
  color: var(--hb-mut);
  font-weight: 600;
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Doiralarni bog'lovchi chiziq (2026-09-10, 10-TUR: "o'zaro
   bog'liqligini ifodalovchi nimadir qo'y") ── */
.hbo-big-circles-xl { position: relative; }
.hbo-circles-link {
  flex: none;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 60%, transparent), color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 60%, transparent));
  position: relative;
}
.hbo-circles-link::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--panel-accent, var(--hb-acc));
  transform: translate(-50%, -50%);
}
@media (max-width: 1400px) {
  .hbo-circles-link { display: none; }
}
@media (max-width: 1400px) {
  .hbo-circle-text-left, .hbo-circle-text-right { order: 3; max-width: 100%; text-align: center; align-items: center; }
  .hbo-circles-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════
   11-TUR (2026-09-10, buyurtmachi tayyor maket rasmi berdi) — oq karta:
   chapda logotip+nom+tavsif, o'ngda rahbar surati+lavozimi+ismi+shiori.
   Pastda xodimlar to'ri (davra-avatar + yashil "faol" nuqtasi — HAQIQIY,
   ro'yxat allaqachon faqat faol xodimlarni o'z ichiga oladi). Bosilsa —
   shaffof, 80vw/80vh popup (qora tuman fon + surat/ma'lumot).
   ═══════════════════════════════════════════════════════════════════════ */
.hbo-card11 {
  position: relative;
  display: flex;
  align-items: center;
  /* 12-tur: "qolibni olib tashla" — o'rtadagi bo'sh joy yo'q, ikki blok markazda */
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 28px;
  border-radius: 28px;
  background: var(--hb-sfc);
  /* 12-tur/3 (buyurtmachi X bilan chizdi): karta chizig'i, pushti bezak
     doiralar va surat halqasi — hammasi YO'Q */
  border: none;
  overflow: hidden;
}
.hbo-card11::before, .hbo-card11::after {
  display: none;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 10%, transparent);
  pointer-events: none;
}
.hbo-card11::before { width: 260px; height: 260px; top: -120px; left: -70px; }
.hbo-card11::after { width: 180px; height: 180px; bottom: -90px; right: 20%; }

.hbo-card11-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; min-width: 0; }
/* 12-tur/2: "atrofidagi qolibni olib tashla" — halqa/fon YO'Q, faqat logotipning o'zi */
/* 2026-09-10, 5-tur (buyurtmachi: "logo bilan rasm teng bo'lsin, bir oz
   kattalashtir ikkalasini ham" — 4-tur'da ikkisi turli hajmda edi, bitta
   qatorga sig'may ikki qatorga bo'linib qolgan edi) — ikkalasi BIR XIL
   o'lcham, .hbo-card11-leader-photo bilan bir joyda ushlab turiladi. */
.hbo-card11-logo { width: 260px; height: 260px; object-fit: cover; border-radius: 50%; flex: none; border: 2px solid var(--hb-ok); }
.hbo-card11-brand { min-width: 0; }
.hbo-card11-name { margin: 0 0 6px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--hb-txt); letter-spacing: -0.01em; }
.hbo-card11-desc { margin: 0; max-width: 24ch; color: var(--hb-mut); font-size: 15px; line-height: 1.6; }

.hbo-card11-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; min-width: 0; }
/* 2026-09-10: rahbar bloki bosiladigan (popup ochiladi) */
.hbo-card11-leader-trigger { cursor: pointer; border-radius: 20px; transition: background .15s ease; }
.hbo-card11-leader-trigger:hover, .hbo-card11-leader-trigger:focus-visible { background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 8%, transparent); outline: none; }
.hbo-card11-leader-photo {
  width: 260px; height: 260px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  /* 2026-09-10 (buyurtmachi: "rahbar logosi atrofida ingichka yashil border") */
  border: 2px solid var(--hb-ok);
}
.hbo-card11-leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hbo-card11-leader-text { display: flex; flex-direction: column; gap: 4px; max-width: 240px; min-width: 0; }
.hbo-card11-leader-role {
  align-self: flex-start;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--panel-accent, var(--hb-acc));
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 14%, transparent);
  padding: 4px 10px; border-radius: var(--hb-pill, 999px);
}
.hbo-card11-leader-name { font-size: 22px; font-weight: 800; color: var(--hb-txt); margin-top: 2px; }
.hbo-card11-quote { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.hbo-card11-quote-mark { font-size: 34px; line-height: .6; color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 55%, transparent); font-weight: 800; flex: none; }
.hbo-card11-quote p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--hb-mut); font-style: italic; }

/* [2026-09-15, IKKINCHI tur — buyurtmachi jonli sahifada ko'rsatib
   tuzatdi] "Mehmon" rahbar (masalan Oybek Niyazov — Bittada'da) sarlavha
   kartochkasida, logoning CHAP tarafida — tartib: mehmon | logo (O'RTADA
   qoladi) | asosiy rahbar. `.hbo-card11-trio` shu uchtasini TENG
   ustunlarga bo'ladi (grid — matn uzunligidan qat'i nazar aniq teng). */
.hbo-card11.hbo-card11-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: initial;
  gap: 20px;
}
.hbo-card11-trio .hbo-card11-left,
.hbo-card11-trio .hbo-card11-right,
.hbo-card11-trio .hbo-card11-guest {
  flex-direction: column; text-align: center; align-items: center; gap: 12px; min-width: 0;
}
.hbo-card11-trio .hbo-card11-logo,
.hbo-card11-trio .hbo-card11-leader-photo,
.hbo-card11-trio .hbo-card11-guest-photo { width: 168px; height: 168px; }
.hbo-card11-trio .hbo-card11-brand,
.hbo-card11-trio .hbo-card11-leader-text,
.hbo-card11-trio .hbo-card11-guest-text { max-width: none; align-items: center; }
.hbo-card11-trio .hbo-card11-quote { justify-content: center; text-align: left; }
.hbo-card11-trio .hbo-card11-desc { max-width: 26ch; }

.hbo-card11-guest { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; min-width: 0; }
.hbo-card11-guest-trigger { cursor: pointer; border-radius: 20px; transition: background .15s ease; }
.hbo-card11-guest-trigger:hover, .hbo-card11-guest-trigger:focus-visible { background: color-mix(in srgb, #D4AF37 8%, transparent); outline: none; }
/* Rangi jamoaning O'ZI (--panel-accent) emas, neytral oltin — "maxsus/
   faxriy" his beradi, jamoa a'zolaridan ajratiladi. */
.hbo-card11-guest-photo {
  width: 168px; height: 168px; flex: none; border-radius: 50%; overflow: hidden;
  border: 2px solid #D4AF37; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #D4AF37 14%, var(--hb-sfc)); color: #8a6d1a; font-weight: 800; font-size: 40px;
}
.hbo-card11-guest-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hbo-card11-guest-text { display: flex; flex-direction: column; gap: 4px; max-width: 240px; min-width: 0; }
.hbo-card11-guest-badge {
  align-self: flex-start;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #8a6d1a; background: color-mix(in srgb, #D4AF37 22%, transparent);
  padding: 4px 10px; border-radius: var(--hb-pill, 999px);
}
.hbo-card11-guest-name { font-size: 22px; font-weight: 800; color: var(--hb-txt); margin-top: 2px; }
.hbo-card11-guest-origin { font-size: 13px; color: var(--hb-mut); }

@media (max-width: 900px) {
  .hbo-card11 { flex-direction: column; align-items: flex-start; text-align: left; gap: 28px; }
  .hbo-card11-right, .hbo-card11-guest { flex-direction: row; }
  /* [TUZOQ, 2026-09-15 topildi] `.hbo-card11.hbo-card11-trio` (ikki
     sinf, (0,2,0)) — asosiy qoidada. Bu yerda `.hbo-card11-trio`
     (bitta sinf, (0,1,0)) yozilsa, o'ziga xoslik PASTROQ bo'lgani
     uchun HECH QACHON g'olib chiqmaydi (media so'rovi to'g'ri kelsa
     ham) — Playwright 390px skrinshotida aniq ko'ringan haqiqiy xato:
     3 ustun mobilda ham yonma-yon siqilib, bir-birining ustiga
     chiqib qolgan edi. Tuzatish: bir xil (0,2,0) selektor. */
  .hbo-card11.hbo-card11-trio { grid-template-columns: 1fr; }
  .hbo-card11-trio .hbo-card11-left, .hbo-card11-trio .hbo-card11-right, .hbo-card11-trio .hbo-card11-guest {
    flex-direction: row; text-align: left; align-items: center;
  }
  .hbo-card11-trio .hbo-card11-brand, .hbo-card11-trio .hbo-card11-leader-text, .hbo-card11-trio .hbo-card11-guest-text {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  /* Buyurtmachi (2026-09-10): "jamoa logosi bilan rahbar bir qatorda tursin" —
     ikki ustun yonma-yon, har birida rasm ustida, matn ostida */
  .hbo-card11 { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 22px 12px; }
  .hbo-card11-left, .hbo-card11-right { flex: 1 1 0; flex-direction: column; align-items: center; text-align: center; min-width: 0; gap: 10px; }
  .hbo-card11-brand, .hbo-card11-leader-text { min-width: 0; max-width: 100%; align-items: center; }
  .hbo-card11-name { font-size: 20px; margin-bottom: 4px; }
  .hbo-card11-desc { max-width: none; font-size: 12px; line-height: 1.45; }
  .hbo-card11-leader-role { align-self: center; }
  .hbo-card11-leader-name { font-size: 17px; }
  .hbo-card11-quote { margin-top: 4px; }
  .hbo-card11-quote-mark { font-size: 26px; }
  .hbo-card11-quote p { font-size: 12px; text-align: left; }
  .hbo-card11-logo { width: 136px; height: 136px; }
  .hbo-card11-leader-photo { width: 148px; height: 148px; }
  /* Trio (mehmon rahbarli sahifa) — mobilda 3 ustun torlashib ketmasin
     uchun UCHALASI bitta ustunga tushadi (grid-template-columns:1fr —
     yuqoridagi @media(900px) qoidasidan meros, bu yerda faqat ichki
     qatorlar tekislanadi). */
  .hbo-card11.hbo-card11-trio { align-items: stretch; }
  .hbo-card11-trio .hbo-card11-left, .hbo-card11-trio .hbo-card11-right, .hbo-card11-trio .hbo-card11-guest {
    flex-direction: row; text-align: left; align-items: center; flex: none;
  }
  .hbo-card11-trio .hbo-card11-brand, .hbo-card11-trio .hbo-card11-leader-text, .hbo-card11-trio .hbo-card11-guest-text {
    align-items: flex-start;
  }
  .hbo-card11-trio .hbo-card11-logo, .hbo-card11-trio .hbo-card11-leader-photo, .hbo-card11-trio .hbo-card11-guest-photo {
    width: 84px; height: 84px;
  }
  .hbo-card11-guest-name { font-size: 17px; }
}

/* ── Xodimlar daraxti (2026-09-15, buyurtmachi: "Xodimlar bo'limidagi
   org struktura ko'rinishida, ochilib-yopiladigan qilib qo'y") ──
   .hbo-grid11/.hbo-card11-person (flat grid) O'CHIRILDI — o'rniga
   ochilib-yopiladigan daraxt (.hbo-tree), lekin ilovaning O'Z davra-
   avatar vizual tili saqlangan (staff/js/app.js::renderOrgNode() bilan
   BIR XIL FUNKSIYA, boshqa vizual shakl). `.hbo-card11-dot` (yashil
   "faol" nuqta) — o'sha eski komponentdan MEROS, hali ham ishlatiladi. */
.hcp-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hbo-tree-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* [2026-09-15, IKKINCHI tur — buyurtmachi: "so'zsiz SVG bilan ifodala,
   kulrang qaymoq rangdan umuman foydalanma"] Matn/emoji YO'Q — ikonka-
   dumaloq tugma, oq fon (--hb-sfc2 qaymoq BU YERDA ATAYLAB ishlatilmaydi,
   Xodimlar toolbar tuzatishi bilan BIR XIL qoida). */
.hbo-tree-actbtn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--hb-brd); background: var(--hb-sfc); color: var(--hb-mut);
  border-radius: var(--hb-pill, 999px); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.hbo-tree-actbtn:hover { color: var(--hb-txt); border-color: var(--panel-accent, var(--hb-acc)); }

/* [2026-09-15, IKKINCHI tur — buyurtmachi: "kattalashtir, ancha
   kattalashtir, 2-3 barobar"] Tugun kartochkalari ~2.2x kattalashtirildi
   (avatar 40→92px va h.k.) — UCHALA jamoa sahifasida ham (Mebel City/
   Bittada/Big One), chunki bu umumiy .hbo-tnode-* qoidasi. Chuqurlik
   ko'rsatkichi (bolalar chekinishi) esa faqat O'RTACHA oshirilgan —
   Mebel City'da 4+ pog'ona bor, to'liq 2-3x chekinish qatorlarni
   ekrandan chiqarib yuborardi. */
.hbo-tree-wrap { overflow-x: auto; }
.hbo-tree, .hbo-tnode-children { list-style: none; margin: 0; padding: 0; }
.hbo-tnode { margin: 0 0 10px; }
.hbo-tnode-row { display: flex; align-items: center; gap: 8px; }
.hbo-tnode-toggle {
  width: 40px; height: 40px; flex: none; border: none; background: transparent; color: var(--hb-mut);
  cursor: pointer; display: grid; place-items: center; border-radius: 10px; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.hbo-tnode-toggle svg { width: 20px; height: 20px; transition: transform .15s ease; }
.hbo-tnode-toggle:hover { background: var(--hb-sfc); border: 1px solid var(--hb-brd); color: var(--hb-txt); }
.hbo-tnode-toggle.collapsed svg { transform: rotate(-90deg); }
.hbo-tnode-spacer { width: 40px; flex: none; }
.hbo-tnode-card {
  display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0;
  padding: 12px 20px 12px 10px; border: 1px solid transparent; border-radius: 20px;
  background: transparent; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.hbo-tnode-card:hover { background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 6%, var(--hb-sfc)); border-color: var(--hb-brd); }
/* [2026-09-15, buyurtmachi skrinshotda strelka bilan ko'rsatdi: "shu
   yerga lavozim nomlari chiqsin"] — qator o'ng tomonidagi bo'sh joyga
   HAQIQIY lavozim (job title) pill sifatida, sarlavhadagi
   .hbo-card11-leader-role BILAN BIR XIL rang tili. */
.hbo-tnode-role {
  margin-left: auto; flex: none; max-width: 40%;
  font-size: 13px; font-weight: 700; text-align: right;
  color: var(--panel-accent, var(--hb-acc));
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 12%, transparent);
  padding: 5px 14px; border-radius: var(--hb-pill, 999px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
  .hbo-tnode-role { display: none; } /* tor ekranda ism/bo'lim uchun joy tor — chiqarilmaydi (Xodimlar org-chartidagi .onode-job bilan bir xil qoida) */
}
.hbo-tnode-avatar {
  position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 16%, var(--hb-sfc));
  color: var(--panel-accent, var(--hb-acc)); font-weight: 800; font-size: 28px;
}
.hbo-tnode-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbo-tnode-avatar .hbo-card11-dot { width: 18px; height: 18px; border-width: 2.5px; }
.hbo-tnode-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hbo-tnode-name { font-size: 21px; font-weight: 700; color: var(--hb-txt); display: flex; align-items: center; gap: 6px; }
.hbo-tnode-dept { font-size: 14px; color: var(--hb-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Mehmon" ildiz tugun (2026-09-15, UCHINCHI tur) — masalan Oybek
   Niyazov Bittada/Big One daraxtida. Rangi jamoaning O'ZI emas, neytral
   oltin — sarlavhadagi .hbo-card11-guest BILAN BIR XIL rang tili. */
.hbo-tnode-guest .hbo-tnode-avatar { box-shadow: 0 0 0 2px var(--hb-sfc), 0 0 0 3.5px #D4AF37; }
.hbo-tnode-guest-badge {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: #8a6d1a; background: color-mix(in srgb, #D4AF37 22%, transparent);
  border-radius: 999px; padding: 2px 10px; flex: none;
}
.hbo-tnode-children {
  margin: 8px 0 0 44px; padding-left: 26px;
  border-left: 2px dashed color-mix(in srgb, var(--hb-txt) 14%, transparent);
}
@media (max-width: 640px) {
  .hbo-tnode-children { margin-left: 30px; padding-left: 16px; }
  .hbo-tnode-toggle, .hbo-tnode-spacer { width: 32px; }
  .hbo-tnode-avatar { width: 60px; height: 60px; font-size: 19px; }
  .hbo-tnode-name { font-size: 16px; }
  .hbo-tnode-dept { font-size: 12px; }
}

/* ── Shaffof popup — qora tuman fon, 80vw/80vh, chapda surat o'ngda ma'lumot ── */
.hbo-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 20, 0.74);
  /* Sahifani XIRALASHTIRUVCHI yagona filtr shu yerda — ichkaridagi
     .hbo-modal'ga qo'yilgan backdrop-filter sahifani emas, faqat shu
     fonning o'zini ko'radi (backdrop root), shuning uchun u yerda yo'q. */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity .2s ease;
}
/* [BAG, 2026-09-10] `display:flex` yuqorida `[hidden]` UA-standart
   `display:none`ni bosib ketardi (ikkalasi ham 0,1,0 xususiylik,
   author qoidasi keyinroq keladi) — natijada `hidden` atributi
   bo'lsa ham element ko'rinmas holda joy egallab, bosishlarni
   to'sib turardi (Playwright buni "intercepts pointer events" deb
   aniqladi). Aniq `[hidden]` qoidasi bilan tuzatildi. */
.hbo-modal-backdrop[hidden] { display: none; }
.hbo-modal-backdrop.is-open { opacity: 1; }
.hbo-modal {
  display: flex;
  width: 80vw;
  height: 80vh;
  max-width: 1100px;
  position: relative;
  /* 12-tur/2 (buyurtmachi: "orqa fonda umuman rang qo'yma, shunchaki
     havoda rasm bilan matn tursin") — panel YO'Q: fon, ramka, soya yo'q,
     faqat surat va oq matn qora tuman ustida. */
  background: transparent;
  border: none;
  box-shadow: none;
  transform: scale(.96);
  transition: transform .2s ease;
}
.hbo-modal-backdrop.is-open .hbo-modal { transform: scale(1); }
.hbo-modal-photo {
  flex: 1 1 50%;
  min-width: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.hbo-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-radius: 24px; }
.hbo-modal-initials { font-size: 96px; font-weight: 800; color: #fff; }
.hbo-modal-info {
  flex: 1 1 50%;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 10px;
  padding: 48px;
}
.hbo-modal-dept {
  align-self: flex-start;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #fff;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 70%, #000);
  padding: 5px 12px; border-radius: var(--hb-pill, 999px);
}
/* Panel yo'q — matn to'g'ridan-to'g'ri qora tuman ustida: ism oq,
   qolgani jamoa rangining och tusi (buyurtmachi: "mos rang tanla") */
.hbo-modal-info h3 { margin: 4px 0 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.hbo-modal-role { font-size: 17px; color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 45%, #fff); font-weight: 700; }
.hbo-modal-age { font-size: 15px; color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 35%, #fff); font-weight: 600; letter-spacing: .02em; }
.hbo-modal-quote { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; max-width: 40ch; }
.hbo-modal-quote-mark { font-size: 38px; line-height: .6; color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 60%, #fff); font-weight: 800; flex: none; }
.hbo-modal-quote p { margin: 6px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); font-style: italic; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
/* Ketma-ket "yozilib" chiqish: qator o'z navbati kelguncha ko'rinmaydi,
   yozilayotgan matn oxirida miltillovchi kursor. `[hidden]` — display
   beruvchi `.hbo-modal-quote{display:flex}` UA qoidasini bosmasin. */
.hbo-modal-line { opacity: 0; transition: opacity .25s ease; }
.hbo-modal-line.is-on { opacity: 1; }
.hbo-modal-line[hidden] { display: none; }
.is-typing::after { content: '\258D'; margin-left: 2px; color: #fff; animation: hboBlink .7s steps(1) infinite; }
@keyframes hboBlink { 50% { opacity: 0; } }
.hbo-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35); color: #fff; border: none; cursor: pointer;
}
.hbo-modal-close:hover { background: rgba(0, 0, 0, 0.55); }
@media (max-width: 780px) {
  /* 2026-09-10, 2-tur (buyurtmachi: "sen shunchaki rasmni kichiklashtirib
     qo'yibsanku, rasmni kattalashtir") — 1-tur `height:86vh`'ni
     `max-height`ga almashtirdi, lekin bu BUTUN modalni kichraytirib,
     surat ham 45% ulush bo'yicha kichrayib qoldi. To'g'ri yechim: modal
     avvalgidek TO'LIQ 86vh (surat katta qoladi), faqat MATN ustuni
     (.hbo-modal-info) o'zining ulushi ichida aylanadi — surat o'lchamiga
     tegmaydi. */
  .hbo-modal { width: 92vw; height: 86vh; flex-direction: column; }
  .hbo-modal-photo { flex: 1 1 50%; min-height: 0; }
  .hbo-modal-info { flex: 1 1 50%; min-height: 0; padding: 24px; overflow-y: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   QOIDALAR — .hcp-rule kartalari.
   [2026-09-16, buyurtmachi tuzatishi #4: "chetlari bir-biriga yopishib
   qolgan — orasini och. Hozirgidan sal kichikroq qil (2x dan sal
   pastroq). Rasm chegarasi: darrov rasm YOKI darrov fon boshlanmasin —
   orada rasm xiralashib fonga, fon xiralashib rasmga aylanadigan ORALIQ
   zona bo'lsin (bir chiziq bilan kesilganday emas)."] Gap kattalashtirildi,
   o'lcham biroz pasaytirildi (680->600, 480->420), mask endi KO'P
   bosqichli (faqat 2 ta nuqta — qattiq/tekis chiziqqa o'xshab ko'ringan —
   endi 6 ta oraliq nuqta bilan sekin-asta erийdi). */
.hcp-page:has(.hcp-rules) {
  max-width: 2000px;
  /* [2026-09-16, buyurtmachi: "qolganlar ikki chetidan bir oz joy
     qoldir"] — ekran juda kengayganda kartalar chekkaga yopishib
     qolmasin uchun ichki bo'shliq (gutter) kattalashtirildi. */
  padding-left: 32px; padding-right: 32px;
}
@media (max-width: 640px) {
  .hcp-page:has(.hcp-rules) { padding-left: 12px; padding-right: 12px; }
}
/* [2026-09-16, buyurtmachi: "'E'tirof va mukofot' va 'Jarima qoidalari'
   yozuvlarini katta-katta yoz"] — bo'lim sarlavhasi (h2.hcp-section-title)
   uchun avval maxsus qoida YO'Q edi (brauzer standart h2 o'lchami). */
.hcp-section-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--hb-txt);
  margin: 0 0 4px;
  text-align: center;
}
@media (max-width: 640px) {
  .hcp-section-title { font-size: 27px; }
}
.hcp-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 56px 48px;
  align-items: stretch;
}
.hcp-rule {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  overflow: visible;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.hcp-rule:hover, .hcp-rule:focus-visible {
  opacity: 0.82;
  outline: none;
}
.hcp-rule-photo {
  /* [2026-09-16, "buzuldiku" — mask-image asosidagi usul brauzerda kutilgandek
     chiqmadi, qattiq to'rtburchak bo'lib qoldi] BUTUNLAY BOSHQA, oddiyroq va
     ishonchli usulga o'tildi: mask-image OLIB TASHLANDI. Buning o'rniga:
     qutining o'zi FONGA (--hb-bg) TENG rangda — object-fit:contain
     bo'yicha bo'sh qolgan chekka/burchaklar sahifa foni bilan AYNAN bir
     xil, ya'ni umuman "quti" ko'rinmaydi. Rasmning o'zi ustiga esa (pastda,
     ::after) yumshoq gradient bosiladi — shu ikkisi birga "rasm sekin
     fonga singib ketayotgandek" taassurot beradi, hech qanday brauzer-
     moslik xavfisiz (oddiy background-gradient, mask emas). */
  position: relative; flex: 0 0 42%; aspect-ratio: 4/3;
  border-radius: 0; background: var(--hb-bg); overflow: hidden;
}
.hcp-rule-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 68% 68% at center, transparent 45%, var(--hb-bg) 100%);
  pointer-events: none;
}
.hcp-rule-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hcp-rule-n { display: none; } /* buyurtmachi: raqam belgisi rasm ustida chiqmasin */
.hcp-rule-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.hcp-rule-num-label {
  font-size: 16px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--hb-mut); text-transform: uppercase;
}
.hcp-rule-title { font-weight: 800; font-size: 24px; color: var(--hb-txt); line-height: 1.3; }
.hcp-rule-desc {
  font-size: 16px; color: var(--hb-mut); line-height: 1.65;
  white-space: normal;
}
.hcp-rule-side { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.hcp-rule-amt { font-size: 14px; font-weight: 800; color: var(--hb-txt); white-space: nowrap; }
.hcp-rule-score {
  font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: var(--hb-pill, 999px);
  white-space: nowrap;
}
.hcp-rule-score.neg { color: var(--hb-danger); background: color-mix(in srgb, var(--hb-danger) 14%, transparent); }
.hcp-rule-score.pos { color: var(--hb-ok); background: color-mix(in srgb, var(--hb-ok) 14%, transparent); }
.hcp-rule-media { display: none; } /* item_media.html video/audio — modalda ko'rsatiladi, kartada emas */
@media (max-width: 900px) {
  .hcp-rules { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 28px 20px; }
}
@media (max-width: 560px) {
  .hcp-rules { grid-template-columns: 1fr; }
  .hcp-rule { flex-direction: column; }
  .hcp-rule-photo { flex: none; width: 100%; aspect-ratio: 4/3; }
}

/* NIZOM — Qoidalar kartasi, rasm o'rnida katta tartib raqami (2026-09-23,
   buyurtmachi: "Nizomni Qoidalar kabi struktura va dizaynda qil, faqat
   rasm o'rniga raqamlab chiq"). Faqat `.hcp-rule-photo--num` qo'shiladi —
   Qoidalar kartalari tegilmaydi. Tavsif kartada 4 qatorda kesiladi,
   to'liq matn popup oynada. */
.hcp-rule-photo--num {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hb-acc) 9%, transparent);
  border-radius: 28px;
}
.hcp-rule-photo--num::after { content: none; }
.hcp-rule-bignum {
  font-size: clamp(88px, 9vw, 168px); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: var(--hb-acc-text);
  font-variant-numeric: tabular-nums;
}
.hcp-rules--nizom .hcp-rule-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
@media (max-width: 560px) {
  .hcp-rule-photo--num { aspect-ratio: 16/9; border-radius: 22px; }
  .hcp-rule-bignum { font-size: 96px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NIZOM — .hcp-chapter qatorlari (2026-09-10). Endi "Tamoyillar" bo'limi
   ham AYNAN shu klasslarni ishlatadi (2026-09-10, buyurtmachi: "buni ham
   rasm video audio kabilarni birlashtiradigan qilib bosganda ochiladigan
   qilib ber" — statik .hcp-principle-card o'rniga bosiladigan modal
   qator, boblar bilan bir xil ko'rinish/xulq — charter_data.py::
   principle_cards()). Ilgari native <details> akkordeon edi, HECH QANDAY
   CSS YO'Q edi (tasdiqlangan, audit).
   Buyurtmachi: "oyna ochilishi" — akkordeon o'rniga bosilganda popup
   ochiladigan qatorga aylantirildi (matn/rasm modalda, uzun HTML
   `<template>` orqali — data-atributga sig'maydi).
   ═══════════════════════════════════════════════════════════════════════ */
/* [2026-09-10, 4-tur] "Qoidalar/Nizom sahifalarini ham qolgan ikki
   sahifadagi kabi kattaroq, to'rtburchakroq qil" — gorizontal qator
   (kichik 52px ikonka + matn bir qatorda) O'RNIGA endi `.hcp-rule`/
   `.hcp-value` bilan bir xil naqsh: katta to'rtburchak rasm YUQORIDA
   (16:10, to'liq kenglik), sarlavha+strelka PASTDAGI qatorda. */
.hcp-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}
.hcp-chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--hb-radius);
  background: var(--hb-sfc);
  border: 1px solid var(--hb-brd);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.hcp-chapter:hover, .hcp-chapter:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hb-acc) 35%, var(--hb-brd));
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
  outline: none;
}
.hcp-chapter-img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; flex: none; }
.hcp-chapter-n {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16/10; flex: none;
  font-size: 32px; font-weight: 800;
  background: color-mix(in srgb, var(--hb-acc) 14%, var(--hb-sfc));
  color: var(--hb-acc-text);
}
.hcp-chapter-foot { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.hcp-chapter-title {
  min-width: 0; font-weight: 700; font-size: 15px; color: var(--hb-txt); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hcp-chapter-desc {
  min-width: 0; font-size: 13.5px; line-height: 1.55; color: var(--hb-mut);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
  .hcp-chapters { grid-template-columns: 1fr; }
}
.hcp-modal-body-tpl { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   UMUMIY BATAFSIL POPUP — .hcp-modal-* (2026-09-10, buyurtmachi: "shunga
   qiyosa" — jamoa sahifasidagi xodim popupi bilan BIR XIL uslub: qora
   tuman fon, panel YO'Q, chapda rasm o'ngda matn, ketma-ket "yozilib"
   chiqish). YAGONA umumiy komponent — 7 xil ro'yxat (oliy maqsad ustuni/
   yillik/bo'lim maqsadi, qadriyat, qoida, nizom bobi) shu bittasini
   ishlatadi (company_item_modal.js). team_org.html'dagi `.hbo-modal-*`
   bilan ATAYLAB TAKRORLANMAGAN — u alohida, ishlab turgan tizim, bu esa
   umumiy komponent (ikkalasi ham bir xil vizual natija beradi).
   ═══════════════════════════════════════════════════════════════════════ */
.hcp-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 20, 0.74);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity .2s ease;
}
.hcp-modal-backdrop[hidden] { display: none; }
.hcp-modal-backdrop.is-open { opacity: 1; }
.hcp-modal {
  position: relative;
  display: flex;
  width: 80vw;
  height: 80vh;
  max-width: 1100px;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  transform: scale(.96);
  transition: transform .2s ease;
}
.hcp-modal-backdrop.is-open .hcp-modal { transform: scale(1); }
.hcp-modal-photo {
  flex: 1 1 50%;
  min-width: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.hcp-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 24px; }
/* 2026-09-23 (Nizom): rasm o'rnida tartib raqami; vizual yo'q bo'lsa ustun
   yashiriladi. `display:flex` `hidden`ni bosib ketmasin — alohida qoida. */
.hcp-modal-photo[hidden] { display: none; }
.hcp-modal-bignum {
  width: 100%; height: 100%; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hb-acc) 14%, var(--hb-sfc));
  color: var(--hb-acc-text); font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  font-size: clamp(120px, 16vw, 260px); font-variant-numeric: tabular-nums;
}
/* 2026-09-10, 3-tur (buyurtmachi: "cmsda video ham bor lekin saytda
   faqat rasm chiqayabdi") — video bo'lsa shu asosiy joyni egallaydi,
   rasm bilan bir xil o'lchamda. */
.hcp-modal-photo iframe, .hcp-modal-photo video { width: 100%; height: 100%; border: none; border-radius: 24px; display: block; background: #000; }
.hcp-modal-info {
  flex: 1 1 50%;
  min-width: 0;
  /* 2-tur bug: `justify-content:center` uzun bob matnini (nizom) markazga
     tortib, sarlavha/rasmni ko'rinmas holda YUQORIGA suriб yuborardi
     (screenshot bilan tasdiqlangan — popup ochilganda o'rtadagi ro'yxat
     ko'rinardi, sarlavha yo'q). Boshidan boshlanadigan qildik — qisqa
     matn (qadriyat/maqsad) uchun ham yomon ko'rinmaydi. */
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 10px;
  padding: 56px 48px;
  overflow-y: auto;
}
.hcp-modal-badge {
  align-self: flex-start;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #fff;
  background: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 70%, #000);
  padding: 5px 12px; border-radius: var(--hb-pill, 999px);
}
.hcp-modal-info h3 { margin: 4px 0 0; font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.hcp-modal-meta { font-size: 15px; color: color-mix(in srgb, var(--panel-accent, var(--hb-acc)) 45%, #fff); font-weight: 700; }
.hcp-modal-body {
  margin-top: 8px; max-width: 52ch;
  font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.hcp-modal-body p { margin: 0 0 10px; }
.hcp-modal-body ul, .hcp-modal-body ol { margin: 0 0 10px; padding-left: 20px; }
/* 2026-09-10, 2-tur (buyurtmachi: "video+rasm+audio bittasiga birga
   yuklansa dizayni buzilayabdi") — video/audio ENDI kartada emas, shu
   yerda (popup ochilganda) ko'rsatiladi, aniq o'lchov bilan — brauzer
   standart o'lchamiga tashlab qo'yilmaydi. */
.hcp-modal-media { margin-top: 12px; max-width: 44ch; display: flex; flex-direction: column; gap: 10px; }
.hcp-modal-media iframe, .hcp-modal-media video { width: 100%; aspect-ratio: 16/9; border-radius: 12px; border: none; }
.hcp-modal-media audio { width: 100%; }
/* 2026-09-10 (buyurtmachi: "audioning dizaynini yaxshilab ber") —
   .hcp-audio-pill (mission.html "Ovozli sharh" bilan bir xil komponent)
   qora tuman fon ustida — oq/tiniq chip, panel yo'q falsafasiga mos. */
.hcp-modal-audio-pill {
  width: 100%; max-width: 100%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}
.hcp-modal-audio-pill .hcp-audio-btn { background: var(--panel-accent, var(--hb-acc)); color: #fff; }
.hcp-modal-audio-pill .hcp-audio-title { color: #fff; }
.hcp-modal-audio-pill .hcp-audio-time { color: rgba(255, 255, 255, 0.7); }
.hcp-modal-audio-pill .hcp-audio-track { background: rgba(255, 255, 255, 0.25); flex: 1 1 auto; }
.hcp-modal-audio-pill .hcp-audio-progress { background: var(--panel-accent, var(--hb-acc)); }
.hcp-modal-line { opacity: 0; transition: opacity .25s ease; }
.hcp-modal-line.is-on { opacity: 1; }
.hcp-modal-line[hidden] { display: none; }
.hcp-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35); color: #fff; border: none; cursor: pointer;
}
.hcp-modal-close:hover { background: rgba(0, 0, 0, 0.55); }
@media (max-width: 780px) {
  .hcp-modal { width: 92vw; height: 86vh; flex-direction: column; }
  .hcp-modal-photo { flex: 1 1 40%; }
  .hcp-modal-info { padding: 24px; }
}