/* ═══════════════════════════════════════════════════════════════════
   GEONAZORAT SRM v2 — Karier Kontrol uslubidagi interfeys tizimi
   ═══════════════════════════════════════════════════════════════════ */
/* Matn ranglari WCAG AA kontrast talabiga moslangan (oq va #f6f6f7 fonlarda
   o'lchangan): --kul 4.5+ (eng och fon #eaf0fc da ham), --kul2 4.5+, --yashil 4.61, --sariq 4.50.
   Bu qiymatlarni ochroq qilish o'qilishni buzadi — o'zgartirishdan oldin qayta o'lchang.
   Palitra my.soliq.uz dan o'lchab olingan: asosiy #325ECD (Ant Design primary),
   fon #F6F6F7, to'q #282F38, chegara #E6E9ED, matn rgba(0,0,0,.85)=#262626,
   karta radiusi 15px, shrift PT Sans.
   O'zgaruvchi nomlari eski holicha (--teal endi = asosiy ko'k). */
:root{
  /* ── ALIAS QATLAMI ─────────────────────────────────────────────────
     Bu blok o'chirilmadi: 12 sahifada va shell.js da bu nomlar yuzlab
     joyda ishlatilgan. Endi ular `belgilar.css` dagi belgilarga havola
     qiladi — qiymat bitta joydan boshqariladi, mavjud kod esa buzilmaydi.
     Yangi kod yozganda TO'G'RIDAN-TO'G'RI belgilarni ishlating
     (--n1, --asos, --k3, --o3 …), bu aliaslarni emas. */
  --fon:var(--n1); --oq:var(--n0);
  --chiziq:var(--n3); --chiziq2:var(--n2);
  --matn:var(--n8); --kul:var(--n6); --kul2:var(--n7);
  --teal:var(--asos); --teal2:var(--asos-toq);
  --teal-soft:var(--asos-och); --teal-soft2:var(--asos-och2);
  --toq:var(--n9); --ochko:#4A73C4;
  --yashil:var(--norma); --yashil-bg:var(--norma-bg);
  --qizil:var(--kritik); --qizil-bg:var(--kritik-bg);
  --sariq:var(--jiddiy); --sariq-bg:var(--jiddiy-bg);
  --binafsha:#6D3BD4;
  --kok:var(--kuzatuv); --kok-bg:var(--kuzatuv-bg);
  /* Radius 15px → 4px. 15px — telefon ilovasi radiusi: 40px balandlikdagi
     qatorda burchak balandlikning 37% ini yeydi va zich ma'lumot
     ko'rsatadigan asbob o'rniga iste'mol ilovasi kabi o'qiladi. */
  --r:var(--r2);
  --soya:var(--soya1);
  --soya2:var(--soya2);
  --tez:.12s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--fon);color:var(--matn);
  /* PT Sans hech qayerda yuklanmagan edi (na @font-face, na <link>), ustiga
     u faqat 400 va 700 og'irlikka ega. Ya'ni sahifa har mashinada boshqa
     shrift bilan chiqardi — sudga dalil bo'ladigan tizimda aniqlanmagan
     render huquqiy zaiflik. Endi tizim shriftlariga tayanamiz: ular
     mavjudligi kafolatlangan va 500/600/700 og'irliklari bor. */
  font-family:"Segoe UI Variable Text","Segoe UI",Inter,-apple-system,
              "Noto Sans",system-ui,sans-serif;
  font-size:var(--k3);line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cdd1dd;border-radius:99px;border:3px solid var(--fon)}
::-webkit-scrollbar-track{background:transparent}
@keyframes kirdi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aylan{to{transform:rotate(360deg)}}

/* ═══ OYNA FORMASI ══════════════════════════════════════════════════
   Sahifalar buni o'z <style> blokida ham e'lon qiladi (ular keyin keladi va
   ustun turadi). Bu yerdagi nusxa shell.js dagi umumiy oynalar uchun —
   ular har sahifada, jumladan kirish sahifasida ham chiqadi. */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .keng{grid-column:1/-1}
.form label{display:block;font-size:11.5px;color:var(--kul);font-weight:600;margin-bottom:5px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--chiziq);border-radius:9px;background:var(--oq);color:var(--matn)}
.form input:focus,.form select:focus{outline:none;border-color:var(--teal)}
.form .izoh{font-size:11px;color:var(--kul2);margin-top:4px}
.oyna-amal{display:flex;justify-content:flex-end;gap:9px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--chiziq)}
.oyna-ogoh{background:var(--sariq-bg);color:var(--sariq);border-radius:10px;
  padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:14px}
.oyna-xato{background:var(--qizil-bg);color:var(--qizil);border-radius:10px;
  padding:9px 12px;font-size:12.5px;font-weight:600;margin-top:12px}
.oyna-ok{background:var(--yashil-bg);color:var(--yashil);border-radius:10px;
  padding:9px 12px;font-size:12.5px;font-weight:600;margin-top:12px}

/* ═══ SHELL: chap panel + yuqori panel ══════════════════════════════ */
body.shelled{display:grid;min-height:100vh;grid-template-columns:250px 1fr;
  grid-template-rows:auto 1fr;grid-template-areas:"side top" "side main"}
body.shelled>main{grid-area:main;padding:22px 28px 40px;max-width:1240px;width:100%}

/* ── YON PANEL: to'q korpus ──────────────────────────────────────────
   Chap panel — tizim KORPUSI (kirish sahifasi bilan bir tilda), o'ng
   tomon esa hujjat maydoni bo'lib och qoladi. Bu «hammasini to'q qilish»
   emas: navigatsiya doimiy va o'zgarmas, ma'lumot esa oq qog'ozda
   o'qiladi — jadval, grafik va bosma hujjat uchun shu to'g'ri.
   Faol bo'lim OLTIN chiziq bilan belgilanadi — kirish sahifasidagi
   kanal relsi bilan bir xil belgi. */
.yon{
  grid-area:side;position:sticky;top:0;height:100vh;overflow:auto;z-index:30;
  /* nav-rels absolute joylashadi — tayanch shu panel */
  isolation:isolate;
  background:#0B162C;border-right:1px solid rgba(148,178,224,.14);
  display:flex;flex-direction:column;padding:18px 14px;
}
.yon .brend{display:flex;align-items:center;gap:11px;padding:2px 8px 20px;
  border-bottom:1px solid rgba(148,178,224,.10);margin-bottom:8px}
.yon .brend .belgi{width:40px;height:40px;flex:none;border-radius:11px;overflow:hidden}
.yon .brend .belgi svg,.yon .brend .belgi img{width:100%;height:100%;display:block}
.yon .brend b{font-size:14.5px;letter-spacing:.4px;display:block;line-height:1.2;
  color:#EAF1FB}
.yon .brend span{font-size:11px;color:#8FA4C4}
.yon .bolim{font-size:10px;letter-spacing:1.4px;color:#5E7191;font-weight:700;
  padding:8px 12px 7px}
.nav{
  position:relative;
  display:flex;align-items:center;gap:11px;padding:10px 12px;margin:1px 0;
  border-radius:8px;color:#B9C8DF;font-weight:500;font-size:13.5px;cursor:pointer;
  text-decoration:none;transition:background var(--tez),color var(--tez);
}
.nav svg{width:19px;height:19px;flex:none;stroke-width:1.7;opacity:.75}
.nav:hover{background:rgba(148,178,224,.09);color:#EAF1FB}
.nav:hover svg{opacity:1}
.nav.on{background:rgba(62,142,247,.16);color:#FFFFFF;font-weight:600}
.nav.on svg{color:#6BA5FF;opacity:1}
/* Faol bo'lim indikatori endi `.nav-rels` alohida elementida —
   u ikki hujjat orasida siljiy oladi (pseudo-element qila olmaydi). */
/* To'q panelda scrollbar ham to'q bo'lsin */
.yon::-webkit-scrollbar-thumb{background:#25354F;border-color:#0B162C}

.top{
  grid-area:top;position:sticky;top:0;z-index:25;
  display:flex;align-items:center;gap:16px;padding:13px 28px;
  background:var(--oq);border-bottom:1px solid var(--chiziq);
}
.iz{display:flex;align-items:center;gap:8px;font-size:14px}
.iz .b1{color:var(--kul)}
.iz .aj{color:var(--kul2)}
.iz .b2{font-weight:700;font-size:15px}
.top .bosh{margin-left:auto;display:flex;align-items:center;gap:14px}
/* `.tillar` qoidalari o'chirildi: til almashtirgich markupdan olib
   tashlangan (loyihada bironta `class="tillar"` qolmagan) — qoidalar
   hech qachon qo'llanmasdi. */
.foydalanuvchi{display:flex;align-items:center;gap:9px;position:relative;cursor:pointer;
  padding:4px 6px;border-radius:10px;transition:background var(--tez)}
.foydalanuvchi:hover{background:var(--fon)}
.foydalanuvchi .ava{
  width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}
.foydalanuvchi b{font-size:13.5px}
.foydalanuvchi .rol{font-size:11.3px;color:var(--kul)}
.fmenu{position:absolute;top:calc(100% + 9px);right:0;z-index:60;width:262px;
  background:var(--oq);border:1px solid var(--chiziq);border-radius:12px;
  box-shadow:var(--soya2);padding:11px 13px;display:none;cursor:default}
.fmenu.on{display:block}
.fmenu .fq{display:flex;justify-content:space-between;gap:10px;font-size:12.3px;
  padding:6px 0;border-bottom:1px solid var(--chiziq2)}
.fmenu .fq span{color:var(--kul)}
.fmenu .fq b{font-weight:600}
.fmenu .btn{width:100%;justify-content:center;margin-top:11px}
.btn.qizil-btn{border-color:#f6c3ce;color:var(--qizil);background:var(--qizil-bg)}
/* `.chiqbtn` qoidalari o'chirildi — chiqish tugmasi allaqachon `.btn
   .qizil-btn` bilan chiziladi va butun `veb/` da bironta `class="chiqbtn"`
   qolmagan, ya'ni bu qoidalar hech qachon qo'llanmasdi. */

/* ═══ KARTALAR / KPI ════════════════════════════════════════════════ */
.karta{background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--soya)}
.karta h3{font-size:15px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.karta .izoh{font-size:12.5px;color:var(--kul);margin-bottom:10px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi{background:var(--oq);border:1px solid var(--chiziq);border-radius:var(--r);
  padding:16px 18px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--soya)}
.kpi .ik{width:42px;height:42px;flex:none;border-radius:11px;background:var(--teal-soft);
  color:var(--teal);display:flex;align-items:center;justify-content:center}
.kpi .ik svg{width:21px;height:21px;stroke-width:1.7}
.kpi .l{font-size:12.3px;color:var(--kul);line-height:1.35}
.kpi .v{font-size:23px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:12px;color:var(--kul);font-weight:600;margin-left:2px}
.grid2{display:grid;grid-template-columns:1fr 1.6fr;gap:16px}
@media(max-width:980px){.grid2,.kpis{grid-template-columns:1fr 1fr}body.shelled{grid-template-columns:210px 1fr}}

/* ═══ MOBIL (≤760px) ══════════════════════════════════════════════════
   760px dan pastda yon panel sig'maydi: 375px ekranda u 210px olsa,
   kontentga 165px qoladi va sahifa gorizontal siljiydi. Shuning uchun
   yon panel ekrandan chiqariladi va burger tugmasi bilan chaqiriladi. */
@media(max-width:760px){
  body.shelled{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  body.shelled>main{padding:16px 14px 32px}

  /* Yon panel — ustma-ust qatlam, sukut bo'yicha yashirin.
     PANEL YUQORI PANEL OSTIDAN BOSHLANADI (`--top-bal` — shell.js o'lchaydi).
     Ilgari `top:0` va fon `inset:0` edi: ochiq panel burger tugmasini
     to'liq berkitardi va ikkinchi bosish burgerga umuman yetib bormasdi
     (o'lchandi: burger markazida `elementFromPoint` → `.yon` ichidagi
     element). Ya'ni `classList.toggle` yozilgan bo'lsa ham menyu
     yopilmasdi. Endi burger doim ochiq turadi va haqiqiy o'zgartirgich. */
  .yon{
    position:fixed;top:var(--top-bal,56px);left:0;bottom:0;width:264px;height:auto;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(40,47,56,.22);
  }
  body.yon-ochiq .yon{transform:none}
  /* Ochiq panel ortidagi qorong'i fon — u ham burgerni to'smaydi */
  body.yon-ochiq::before{
    content:"";position:fixed;left:0;right:0;top:var(--top-bal,56px);bottom:0;
    z-index:29;background:rgba(15,21,32,.45);
  }

  .burger{display:inline-flex!important}
  .top{padding:10px 14px;gap:10px}
  .top .iz{display:none}                    /* «Nazorat › Asosiy oyna» — joy yetmaydi */
  .top .foydalanuvchi .ism{display:none}    /* avatar qoladi, ism yashiriladi */

  .kpis,.kpis4,.grid2{grid-template-columns:1fr}
  .filtrbar{flex-wrap:wrap}
  .filtrbar input,.filtrbar select{width:100%!important;min-width:0}

  /* Jadval sahifani kengaytirmasin: o'zi siljiydigan blokka aylanadi.
     `display:block` + `overflow-x:auto` — o'ramsiz ham ishlaydi, chunki
     mavjud sahifalarda jadvallar <div> ichiga olinmagan. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table thead,table tbody{display:table;width:100%;min-width:520px}

  /* Yuqori panel elementlari siqilsin — aks holda panel sahifani kengaytiradi */
  .top{flex-wrap:nowrap;min-width:0;overflow:hidden}
  .top>*{min-width:0}
  .top .bosh{min-width:0;overflow:hidden}
  .foydalanuvchi{min-width:0}
  .foydalanuvchi .ism,.foydalanuvchi .rol{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Sahifa hech qachon gorizontal siljimasin — ichki bloklar o'zi siljiydi */
  body.shelled>main{overflow-x:hidden;min-width:0}
  .karyer-bosh,.filtrbar,.kpis,.kpis4,.grid2{min-width:0;max-width:100%}

  .modal{max-width:calc(100vw - 24px)!important;margin:12px}
  .oyna-amal{flex-wrap:wrap}
  .oyna-amal .btn{flex:1 1 auto}
}

/* Burger tugmasi — faqat mobilda ko'rinadi */
.burger{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border:1px solid var(--chiziq);
  background:var(--oq);border-radius:10px;cursor:pointer;padding:0;
}
.burger svg{width:19px;height:19px;stroke:var(--matn);stroke-width:2}
.burger:active{background:var(--fon)}

/* ═══ CHIPLAR / HOLATLAR ════════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  border-radius:99px;padding:3px 11px}
.chip.ok{background:var(--yashil-bg);color:var(--yashil)}
.chip.xato{background:var(--qizil-bg);color:var(--qizil)}
.chip.kut{background:var(--sariq-bg);color:var(--sariq)}
.chip.teal{background:var(--teal-soft);color:var(--teal2)}
.chip.kok{background:var(--kok-bg);color:var(--kok)}
/* NEYTRAL — «yaxshi ham, yomon ham emas» holat (nofaol kon, o'lchanmadi).
   Holat ranglari zaxiralangan: yashil `ok` faqat haqiqatan norma bo'lganda
   ishlatiladi, aks holda ekran yolg'on gapiradi. */
.chip.neytral{background:var(--olchanmadi-bg);color:var(--olchanmadi)}
.chip .nq{width:7px;height:7px;border-radius:50%;background:currentColor}
.cam{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  background:var(--oq);border:1px solid var(--chiziq);border-radius:99px;padding:4px 12px}
/* Kamera nuqtasi HOLATGA ergashadi. Ilgari rang qattiq yashil edi va
   bazada «xato» deb belgilangan kamera ham sog'lom ko'rinardi — nazoratchi
   nosoz nuqtani tekshirmay o'tib ketardi. Rang yolg'iz ma'no tashimasin
   uchun har chipda `title` bilan holat yozuvi ham bor. */
.cam .nq{width:8px;height:8px;border-radius:50%;background:var(--olchanmadi)}
.cam.ok .nq{background:var(--norma)}
.cam.xato{border-color:var(--kritik);color:var(--kritik)}
.cam.xato .nq{background:var(--kritik)}
.cam.neytral .nq{background:var(--olchanmadi)}
.nq-qizil{width:9px;height:9px;border-radius:50%;background:var(--kritik);flex:none}
.nq-neytral{width:9px;height:9px;border-radius:50%;background:var(--olchanmadi);flex:none}

/* Agent holat paneli */
.agent{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--oq);border:1px solid var(--chiziq);border-radius:12px;
  padding:11px 16px;font-size:12.8px;color:var(--kul)}
.agent b{color:var(--matn)}
.agent .yashil-nq{width:9px;height:9px;border-radius:50%;background:var(--yashil);
  box-shadow:0 0 0 3px var(--yashil-bg)}

/* ═══ DAVLAT RAQAMI ═════════════════════════════════════════════════ */
.plate{display:inline-flex;align-items:stretch;border:2px solid #16181c;border-radius:5px;
  overflow:hidden;background:#fff;font-weight:800;font-size:12px;letter-spacing:.5px;
  line-height:1;white-space:nowrap;vertical-align:middle}
.plate .hud{padding:3px 5px;border-right:1.5px solid #16181c;font-size:11px;display:flex;align-items:center}
.plate .rq{padding:3px 7px;display:flex;align-items:center;letter-spacing:1.5px}
.plate .uz{background:#1d4ed8;color:#fff;font-size:8px;font-weight:800;padding:0 4px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}
.plate .uz::before{content:"";width:10px;height:6px;border-radius:1px;
  background:linear-gradient(180deg,#3ec1e7 33%,#fff 33% 66%,#3aa655 66%)}
.plate.sariq{background:#fbbf24}
.plate.sariq .rq,.plate.sariq .hud{color:#111}
.raqamsiz{color:var(--qizil);background:var(--qizil-bg);border-radius:7px;
  padding:3px 10px;font-size:11.5px;font-weight:700}

/* ═══ JADVALLAR ═════════════════════════════════════════════════════ */
.twrap{overflow:auto;border:1px solid var(--chiziq);border-radius:12px;background:var(--oq)}
table{width:100%;border-collapse:collapse;background:var(--oq)}
th{font-size:10.5px;letter-spacing:.8px;color:var(--kul);text-align:left;font-weight:700;
  padding:11px 12px;border-bottom:1px solid var(--chiziq);white-space:nowrap;background:var(--oq)}
th.guruh{text-align:center;background:#f7f9fd;border-left:1px solid var(--chiziq2);
  border-right:1px solid var(--chiziq2)}
th.ai{background:#eaf0fc}
/* ── Saralanadigan sarlavha ──────────────────────────────────────────
   `data-sar` — saralash kaliti (sahifa JS i qo'yadi). Belgi DOIM ko'rinadi:
   bosilmaydigan sarlavhadan farqi bosishdan OLDIN bilinishi kerak.
   Uchta holat: tartibsiz (↕ so'nik) · o'sish (↑) · kamayish (↓). */
th[data-sar]{cursor:pointer;user-select:none}
th[data-sar]:hover{color:var(--teal2)}
th[data-sar]::after{content:"↕";margin-left:5px;opacity:.34;font-size:10px}
th[data-sar][data-sar-on="osish"]::after{content:"↑";opacity:1;color:var(--teal)}
th[data-sar][data-sar-on="kamayish"]::after{content:"↓";opacity:1;color:var(--teal)}
th[data-sar]:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
td{padding:11px 12px;border-bottom:1px solid var(--chiziq2);font-size:12.8px;vertical-align:middle}
td.ai{background:#f5f8fe}
tbody tr:hover td{background:#fafbfe}
tbody tr:hover td.ai{background:#eaf0fc}
tbody tr:last-child td{border-bottom:none}
.num{font-variant-numeric:tabular-nums}
.vaqt2{line-height:1.4}
.vaqt2 b{font-size:12.5px}
.vaqt2 .og{color:var(--teal2);font-weight:700}
.turi-sotuv{color:var(--binafsha);font-weight:600}
.turi-hom{color:var(--kok);font-weight:600}
.yon-teal{color:var(--teal2);font-weight:700}

/* Rasm/video ikon tugmalari */
.ikb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;
  border:1px solid var(--chiziq);border-radius:7px;background:var(--oq);cursor:pointer;
  color:var(--teal2);vertical-align:middle;margin-left:4px;transition:all var(--tez);position:relative}
.ikb:hover{background:var(--teal-soft);border-color:var(--teal)}
.ikb svg{width:14px;height:14px;stroke-width:1.8}
.ikb .prev{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);z-index:40;border-radius:10px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.35);border:2px solid #16181c}
.ikb .prev img{display:block;width:300px;height:auto}
.ikb:hover .prev{display:block}

/* ═══ TUGMALAR / FILTRLAR ═══════════════════════════════════════════ */
.btn{border:1px solid var(--chiziq);background:var(--oq);color:var(--matn);
  border-radius:10px;padding:8px 16px;font-size:12.8px;font-weight:600;cursor:pointer;
  transition:all var(--tez);display:inline-flex;align-items:center;gap:7px}
.btn svg{width:15px;height:15px;stroke-width:1.8;flex:none}
.btn:hover{border-color:var(--teal);color:var(--teal2)}
.btn.asosiy{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.asosiy:hover{background:var(--teal2);color:#fff}
.btn.excel{background:var(--yashil-bg);border-color:#bbe7cd;color:var(--yashil)}
.btn.excel:hover{background:#dcf3e6}
.fchip{border:1.5px solid var(--chiziq);background:var(--oq);color:var(--kul);
  border-radius:99px;padding:7px 16px;font-size:12.8px;font-weight:600;cursor:pointer;
  transition:all var(--tez);display:inline-flex;gap:7px;align-items:center}
.fchip b{font-weight:700}
.fchip:hover{border-color:var(--teal)}
.fchip.on{border-color:var(--teal);color:var(--teal2);background:var(--teal-soft2)}
.fqator{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.filtrbar{display:flex;align-items:center;gap:10px;background:var(--oq);
  border:1px solid var(--chiziq);border-radius:12px;padding:10px 16px;margin-bottom:14px}
.filtrbar .toza{margin-left:auto;color:var(--kul2);cursor:pointer;font-size:12.5px}
.filtrbar .toza:hover{color:var(--qizil)}
.filtrbar input{border:1px solid var(--chiziq);border-radius:9px;padding:7px 12px;
  font-size:12.8px;width:190px}
.filtrbar input:focus{outline:none;border-color:var(--teal)}
select.tanla{border:1px solid var(--chiziq);border-radius:10px;padding:8px 12px;
  font-size:12.8px;background:var(--oq);font-weight:600;cursor:pointer}
select.tanla:focus{outline:none;border-color:var(--teal)}

/* Tab (Ma'lumotlar / Hodisalar) */
.tabs{display:inline-flex;background:#eff1f5;border-radius:12px;padding:4px;margin:4px 0 2px}
.tabs button{border:none;background:none;padding:8px 20px;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--kul)}
.tabs button.on{background:var(--oq);color:var(--matn);box-shadow:var(--soya)}

/* ═══ SAHIFALASH ════════════════════════════════════════════════════ */
.sahifa-satr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;font-size:12.8px;color:var(--kul)}
.sahifa-satr b{color:var(--matn)}
.sahifa-satr .ong{margin-left:auto;display:flex;align-items:center;gap:10px}
.sahifa-satr .ok{width:30px;height:30px;border:1px solid var(--chiziq);border-radius:8px;
  background:var(--oq);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--kul);font-size:14px}
.sahifa-satr .ok:hover:not(:disabled){border-color:var(--teal);color:var(--teal2)}
.sahifa-satr .ok:disabled{opacity:.4;cursor:default}

/* ═══ SOATLIK GRAFIK — OLIB TASHLANDI ════════════════════════════════
   `.soatlik`, `.soatlik .ust/.b/.tip/.oq-chiz/.yq` va `.soatlik-x`
   qoidalari o'chirildi. Ular `div` ustunlaridan yasalgan eski grafikni
   bezardi; o'sha grafik endi umumiy tizimga (`grafik.css` + `grafik.js`)
   o'tkazildi. Tekshirildi: butun `veb/` da bironta `class="soatlik"`
   yoki `class="soatlik-x"` qolmagan, ya'ni bu qoidalar hech qachon
   qo'llanmasdi. */

/* ═══ MODAL ═════════════════════════════════════════════════════════ */
.mfon{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,23,42,.55)}
.mfon.on{display:flex}
.modal{background:var(--oq);border-radius:16px;max-width:760px;width:100%;max-height:92vh;
  overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:20px;animation:kirdi .25s ease}
.modal h3{font-size:15.5px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.modal .yop{margin-left:auto}
.modal img.katta{width:100%;border-radius:12px;display:block;border:1px solid var(--chiziq)}

/* Jonli ko'rish kartalari */
.jgrid{display:grid;gap:16px}
.jgrid.g1{grid-template-columns:1fr}
.jgrid.g2{grid-template-columns:1fr 1fr}
.jgrid.g3{grid-template-columns:1fr 1fr 1fr}
.jgrid.g4{grid-template-columns:1fr 1fr 1fr 1fr}
.jkam{background:var(--oq);border:1px solid var(--chiziq);border-radius:14px;
  overflow:hidden;box-shadow:var(--soya)}
.jkam .sarl{display:flex;align-items:center;gap:9px;padding:11px 15px}
.jkam .sarl b{font-size:13.5px;letter-spacing:.5px}
.jkam img{width:100%;display:block;background:#0b0d10;aspect-ratio:16/9;object-fit:cover}

.bosh-holat{padding:34px;text-align:center;color:var(--kul2);font-size:13px}
/* `.yuk-spin` o'chirildi: aylanuvchi doira o'rniga telemetrik kanal
   (`.kanal-yuk`) ishlatiladi va butun `veb/` da bironta `yuk-spin`
   qolmagan. `@keyframes aylan` esa boshqa joyda kerak bo'lishi mumkin —
   u qoldirildi. */
.srm{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(135deg,#f7b524,#e09a0a);color:#3a2c00;border-radius:4px;
  padding:1.5px 5px;vertical-align:2px;margin-left:5px}

/* ═══ XARITA TOOLTIP ═════════════════════════════════════════════════
   Leaflet sukut bo'yicha oq fon ustiga oq matn beradi (kontrast 1.22) —
   xarita ustidagi izohlar o'qilmaydi. To'q fonga o'tkazamiz. */
.leaflet-tooltip{
  background:var(--toq);color:#fff;border:none;border-radius:7px;
  padding:5px 9px;font-size:11.5px;font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,.28)}
.leaflet-tooltip-top:before{border-top-color:var(--toq)}
.leaflet-tooltip-bottom:before{border-bottom-color:var(--toq)}
.leaflet-tooltip-left:before{border-left-color:var(--toq)}
.leaflet-tooltip-right:before{border-right-color:var(--toq)}

/* Dasturiy fokus (modal ochilganda) ko'rinadigan halqa chizmasin —
   u sichqoncha bilan ochganda ham chiqib, chalg'itadi. Klaviatura bilan
   yurgan foydalanuvchi uchun ichki elementlar o'z halqasini saqlaydi. */
.modal:focus{outline:none}
.modal :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
/* Oyna yopilgach fokus qaytadigan zaxira nishon (shell.js → _fokusQaytar).
   Dasturiy nishon bo'lgani uchun halqa chizilmaydi — u sichqoncha bilan
   yopganda ham butun sahifa atrofida chiqib, chalg'itardi. */
main[tabindex="-1"]:focus{outline:none}
/* Profil bloki endi klaviatura tugmasi — fokus halqasi KO'RINISHI shart */
.foydalanuvchi:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Tasdiq oynasi (shell.js → tasdiq()) */
.tasdiq-matn{font-size:13.5px;line-height:1.62;color:var(--matn);padding:2px 0 4px}
.btn.qizil{background:var(--qizil);border-color:var(--qizil);color:#fff}
.btn.qizil:hover{filter:brightness(.93)}

/* ═══════════════════════════════════════════════════════════════════════
   №5 QOTGAN QOBIQ · №6 PUSHBROOM SKAN — sahifalararo o'tish
   ═══════════════════════════════════════════════════════════════════════
   Bu ko'p sahifali ilova: har havola TO'LIQ sahifa yuklaydi va odatda
   ekran oqarib qayta quriladi. Nazoratchi kuniga 100+ marta bo'lim
   almashtiradi — bu eng ko'p takrorlanadigan uzilish.

   Hujjatlararo View Transitions bilan:
     • yon panel va yuqori panel UMUMAN qimirlamaydi (qobiq qotadi),
     • faol bo'lim oltin chizig'i eski bo'limdan yangisiga SILJIYDI —
       ikki xil HTML hujjat orasida, freymvorksiz,
     • sahna esa oltin skan nuri ostidan ochiladi (pushbroom — sputnik
       tasviri aynan shunday olinadi).

   Qo'llab-quvvatlamaydigan brauzerda (Firefox) bu qoidalar JIMGINA
   e'tiborsiz qoldiriladi — navigatsiya bugungidek darhol bo'ladi.
   Ya'ni zaxira xatti-harakat = hozirgi holat, xavf nol.
   ═══════════════════════════════════════════════════════════════════════ */
@view-transition{navigation:auto}

/* Qobiq elementlari — o'tishda umuman animatsiya qilinmaydi */
.yon{view-transition-name:yon}
.top{view-transition-name:top}
::view-transition-old(yon),::view-transition-new(yon),
::view-transition-old(top),::view-transition-new(top){animation:none}
/* Eski qobiq surati umuman chizilmasin — aks holda 1 kadr «arvoh» chiqadi */
::view-transition-old(yon),::view-transition-old(top){display:none}

/* Sahifa nomi — o'chib-yonmaydi, qirqilib almashadi */
.iz .b2{view-transition-name:sahifa-nom}
::view-transition-old(sahifa-nom){
  animation:nom-chiq .18s var(--egri-qatiy) both}
::view-transition-new(sahifa-nom){
  animation:nom-kir .26s var(--egri-uch) both}
@keyframes nom-chiq{to{clip-path:inset(0 0 0 100%);opacity:0}}
@keyframes nom-kir{from{clip-path:inset(0 100% 0 0);opacity:.4}
  to{clip-path:inset(0);opacity:1}}

/* Faol bo'lim relsi — ikki hujjat orasida SILJIYDI */
.nav-rels{position:absolute;left:0;width:3px;border-radius:0 2px 2px 0;
  background:var(--oltin);view-transition-name:nav-rels;
  contain:layout paint;pointer-events:none;opacity:0}
.nav-rels.bor{opacity:1}
::view-transition-group(nav-rels){animation-duration:var(--v-joy);
  animation-timing-function:var(--egri-uch);z-index:6}

/* Sahna — pushbroom: yangi sahifa nur ortidan TO'LIQ holatda ochiladi.
   HALOLLIK: bu NIQOB. Grafik ustuni niqob ostidan to'liq balandligida
   chiqadi — hech qanday oraliq qiymat chizilmaydi.

   NIQOB `root` GURUHIGA QO'YILADI, `main` ga EMAS. Sababi o'lchangan:
   `main` ga alohida `view-transition-name` berilganda uning surati BUTUN
   HUJJAT balandligida olinadi (/transport da 3370px, /jonli da 682px) va
   guruh shu ikki balandlik orasida interpolatsiya qiladi — yangi kadr
   o'tish boshida bir necha barobar vertikal cho'ziladi, ekranda esa
   uning tepasidagi bo'sh joy ko'rinadi. `root` surati esa HAR DOIM
   ko'rish maydoni o'lchamida (o'lchandi: 757×1440, sahifadan qat'i
   nazar) — cho'zilish printsipial ravishda yo'q va ~1200×3400 px
   tekstura tayyorlash ham kerak emas.
   QO'SHIMCHA: `/sputnik-profil` da `body.shelled` qo'yilmaydi, ya'ni eski
   qoida u yerda umuman ishlamagan; `root` hamma sahifani qamrab oladi. */
::view-transition-new(root){
  animation:pushbroom var(--v-otish) var(--egri-otish) both}
::view-transition-old(root){animation:none;opacity:1}
@keyframes pushbroom{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* Orqaga navigatsiya — pastdan tepaga (qatlamdan chiqish) */
html[data-nav="orqaga"]::view-transition-new(root){
  animation-name:pushbroom-teskari}
@keyframes pushbroom-teskari{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
/* Yangilash (F5) — skan yo'q, qisqa chaqnash */
html[data-nav="yangilash"]::view-transition-new(root){
  animation:chaqnash .2s ease both}
@keyframes chaqnash{from{opacity:.55}to{opacity:1}}

/* VT UMUMAN BO'LMAGANDA — zaxira yo'l.
   O'lchandi: haqiqiy yon-panel bosishlarining qariyb yarmida yangi
   hujjatda `pagereveal.viewTransition` bo'sh keladi (o'tish o'tkazib
   yuboriladi) va bo'lim bitta kadrda qattiq kesim bilan almashadi.
   Shunda `shell.js` `html[data-vt="yoq"]` qo'yadi va aynan shu pushbroom
   jonli `main` ga qo'llanadi. HALOLLIK: bu ham NIQOB — hech qanday
   oraliq qiymat chizilmaydi, printsip VT yo'lidagi bilan bir xil. */
html[data-vt="yoq"] main{
  animation:pushbroom var(--v-otish) var(--egri-otish) both}

/* Skan nuri — sahna ochilishi bilan birga yuguradi */
.skan-nur{position:fixed;left:0;right:0;height:2px;z-index:40;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--oltin) 18%,
             #fff 50%,var(--oltin) 82%,transparent);
  box-shadow:0 0 22px 6px rgba(247,181,36,.35)}
html[data-nav]:not([data-nav="yangilash"]) .skan-nur{
  animation:skan-tush var(--v-otish) var(--egri-otish) both}
html[data-nav="orqaga"] .skan-nur{animation-name:skan-koter}
/* Nur niqob chetidan 30 px ORQADA yuradi — aks holda ko'rinmaydi.
   Sabab o'lchangan: niqob ham, nur ham bir xil davomiylik va bir xil egri
   bilan yuradi, ya'ni nur AYNAN niqob chetida turadi; chet esa kesish
   chegarasi, ya'ni nur kesilgan tomonda qoladi (t=170 ms da niqob cheti
   y=603, nur ham y=603 — ekranda 100 px dan keng bironta oltin qator
   qolmagan edi).
   `view-transition-name` bilan guruhdan chiqarish YARAMAYDI: nomlangan
   element o'z o'rnida emas, guruh pseudo-elementi ichida chiziladi, guruh
   esa surat olingan paytdagi joyda qotadi — o'lchandi, `skan` guruhining
   ikkala kadri ham `matrix(1,0,0,1,0,0)`, ya'ni nur ekran tepasida
   qimirlamay turib qolardi.
   30 px — nurning o'zi (2 px) ochilgan tomonda to'liq qoladi, yolqini esa
   chetga to'kiladi. 757 px yugurishda bu 4% — sezilmaydi. */
@keyframes skan-tush{0%{top:0;transform:translateY(-30px);opacity:0}
  8%{opacity:1}92%{opacity:1}
  100%{top:100vh;transform:translateY(-30px);opacity:0}}
@keyframes skan-koter{0%{top:100vh;transform:translateY(30px);opacity:0}
  8%{opacity:1}92%{opacity:1}
  100%{top:0;transform:translateY(30px);opacity:0}}

/* Leaflet xaritasiga ALOHIDA NOM BERILMAYDI. Niqob `root` da bo'lgani
   uchun nomlangan xarita guruhdan chiqib ketardi va kesilmagan holda
   nur ostida ko'rinib turardi. Nomsiz bo'lgach u `root` surati ichiga
   kiradi; eski tomon `opacity:1` bilan turgani uchun «arvoh» chiqmaydi. */

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
  .skan-nur{display:none}
  /* Zaxira yo'l ham o'tkazib yuboriladi — sekinlashtirilmaydi */
  html[data-vt="yoq"] main{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   №15 DIAFRAGMA VA TELEMETRIK KANAL — modal va yuklanish
   ═══════════════════════════════════════════════════════════════════════
   Modal 5 funksiyada, o'nlab joyda ishlatiladi — tizimning eng ko'p
   ko'riladigan o'tishi. «Pastdan suzish» iste'mol ilovasi tili; diafragma
   esa asbob tili (optika, gerkon, seyf) va BOSILGAN NUQTADAN ochilishi
   fizik sababiyat beradi: operator nimani ochganini adashtirmaydi.
   ═══════════════════════════════════════════════════════════════════════ */
.mfon{--mx:50%;--my:50%}
.mfon.on{animation:fon-diafragma .28s var(--egri-diafragma) both}
@keyframes fon-diafragma{
  from{clip-path:circle(0 at var(--mx) var(--my))}
  to{clip-path:circle(145% at var(--mx) var(--my))}}
/* Panel — gorizontal markazdan yuqoriga va pastga ochiladi */
.mfon.on .modal{animation:panel-diafragma .22s var(--egri-diafragma) both}
@keyframes panel-diafragma{
  from{clip-path:inset(46% 0 46% 0);transform:scale(.985)}
  to{clip-path:inset(0);transform:none}}
/* Yopilish — ALOHIDA kadrlar, `reverse` EMAS.
   Sabab o'lchangan: `modalYop()` `on` sinfini olib tashlamaydi, shuning
   uchun ochilish bilan bir xil nomni `reverse` bilan qayta ishlatganda
   brauzer uchun bu YANGI animatsiya emas — allaqachon tugagan (`fill:both`)
   animatsiyaning xossasi o'zgargan bo'ladi. `currentTime` davomiylikdan
   katta bo'lgani uchun holat darhol `from` kadriga sakraydi: oyna bitta
   kadrda yo'q bo'ladi va `animationstart` umuman otilmaydi.
   Nom boshqa bo'lgach brauzer haqiqiy yangi animatsiya boshlaydi. */
.mfon.yopilmoqda{animation:fon-diafragma-yop .24s var(--egri-diafragma) both}
@keyframes fon-diafragma-yop{
  from{clip-path:circle(145% at var(--mx) var(--my))}
  to{clip-path:circle(0 at var(--mx) var(--my))}}
.mfon.yopilmoqda .modal{animation:panel-diafragma-yop .2s var(--egri-diafragma) both}
@keyframes panel-diafragma-yop{
  from{clip-path:inset(0);transform:none}
  to{clip-path:inset(46% 0 46% 0);transform:scale(.985)}}

/* ── Telemetrik kanal — yuklanish ────────────────────────────────────
   `.yuk-spin` aylanuvchi doira o'rniga: yuqori panel ostida 3px kanal.
   TASHUVCHI TO'LQIN surilib turadi — foiz emas, «kanal ochiq» degani.
   Ustida 3 ta oltin nazorat nuqtasi HAQIQIY fetch hodisalarida qo'yiladi:
   (1) javob keldi · (2) JSON o'qildi · (3) sahifa chizildi.
   Tugagach o'lchangan TTFB yoziladi — sanalmaydi, bir marta chiqadi. */
.kanal-yuk{position:fixed;left:0;right:0;height:3px;z-index:45;
  pointer-events:none;opacity:0;transition:opacity .22s ease;
  background:rgba(148,178,224,.14);overflow:hidden}
body.shelled .kanal-yuk{top:57px;left:250px}
.kanal-yuk.on{opacity:1}
.kanal-yuk .tolqin{position:absolute;top:0;bottom:0;width:220px;
  background:radial-gradient(closest-side,var(--teal),transparent);
  transform:translateX(-100%)}
.kanal-yuk.on .tolqin{animation:tolqin-yur 1.15s linear infinite}
@keyframes tolqin-yur{to{transform:translateX(calc(100vw + 220px))}}
.kanal-yuk i{position:absolute;top:-1px;width:2px;height:5px;
  background:var(--oltin);opacity:0;transform:scaleY(0);
  transition:opacity var(--v-holat) ease,transform var(--v-holat) var(--egri-uch)}
.kanal-yuk i.on{opacity:1;transform:scaleY(1)}
.ttfb{position:fixed;z-index:46;font-size:10px;letter-spacing:.1em;
  color:var(--kul2);font-family:"JetBrains Mono","SF Mono",Consolas,monospace;
  opacity:0;transition:opacity .3s ease;pointer-events:none}
body.shelled .ttfb{top:38px;right:20px}
.ttfb.on{opacity:1}

@media(max-width:760px){body.shelled .kanal-yuk{left:0;top:52px}}
@media (prefers-reduced-motion:reduce){
  .mfon.on,.mfon.on .modal,.mfon.yopilmoqda,.mfon.yopilmoqda .modal{animation:none}
  .kanal-yuk .tolqin,.kanal-yuk.on .tolqin{animation:none}
}

/* ── Xarita izohi: «Masshtab uchun xaritani bosing» ──
   Faqat g'ildirak faollashmagan xaritada aylantirilganda chiqadi.
   Doimiy yozuv EMAS — xarita ustidagi doimiy matn ma'lumotni to'sadi. */
.xar-izoh{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(6px);
  z-index:900;pointer-events:none;background:rgba(11,22,44,.86);color:#EAF1FB;
  font-size:12.3px;font-weight:600;letter-spacing:.2px;padding:7px 14px;border-radius:99px;
  box-shadow:0 6px 20px rgba(0,0,0,.32);opacity:0;
  transition:opacity var(--v-holat,120ms) var(--egri-uch,ease),
             transform var(--v-holat,120ms) var(--egri-uch,ease)}
.xar-izoh.on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){
  .xar-izoh{transition:none;transform:translateX(-50%)}
  /* Mobil yon panel ham SEKINLASHTIRILMAYDI, siljish butunlay o'tkazib
     yuboriladi (2-qoida): burger bosilgan zahoti menyu joyida bo'ladi. */
  .yon{transition:none}}

/* ═══════════════════════════════════════════════════════════════════════
   KAMERA JOYLASHUVI VA KO'RSATMA (texnik.html, boshqaruv.html)
   ═══════════════════════════════════════════════════════════════════════
   Nima uchun ro'yxat emas, ikki KARTA: «server ko'radi» va «boshqa
   tarmoq» — bu ikkisi bir sozlamaning ikki qiymati emas, ikki xil
   FIZIK holat. Birida server kameraga o'zi ulanadi, ikkinchisida
   umuman ulana olmaydi (NAT). Ro'yxatga yashirilsa, tanlaganidan keyin
   nima ishlashi va nima ishlamasligi ko'rinmay qoladi — shuning uchun
   har kartaning tagida oqibati yozilgan. */
.joy-tanlov{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.joy-kart{position:relative;border:1.5px solid var(--chiziq);border-radius:12px;
  padding:11px 13px;cursor:pointer;background:var(--fon);
  transition:border-color .12s ease,background .12s ease}
.joy-kart:hover{border-color:var(--n4)}
.joy-kart.on{border-color:var(--teal);background:var(--teal-soft2)}
.joy-kart input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.joy-kart:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.joy-kart .jb{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.joy-kart .jb .nq{width:12px;height:12px;border-radius:50%;flex:none;
  border:2px solid var(--n4);background:var(--fon)}
.joy-kart.on .jb .nq{border-color:var(--teal);box-shadow:inset 0 0 0 2.5px var(--teal)}
.joy-kart .ji{font-size:11.4px;color:var(--kul);line-height:1.62;margin-top:6px}
@media(max-width:620px){.joy-tanlov{grid-template-columns:1fr}}

/* Ko'rsatma jadvali — kameraning o'z interfeysiga AYNAN nima yoziladi.
   Qiymat ustuni monoshrift: bo'shliq va nuqta ko'rinib tursin. */
.kors-jad{width:100%;border-collapse:collapse;font-size:12.2px;margin-top:6px}
.kors-jad th,.kors-jad td{text-align:left;padding:6px 8px;vertical-align:top;
  border-bottom:1px solid var(--chiziq2)}
.kors-jad th{font-size:10.5px;color:var(--kul2);font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;white-space:nowrap}
.kors-jad td:first-child{color:var(--kul);white-space:nowrap;width:1%}
.kors-jad td.q{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.8px;
  word-break:break-all;color:var(--matn);font-weight:600}
.kors-jad td.yoq{color:var(--olchanmadi);font-style:italic}

/* Izoh bloklari — texnik.html va boshqaruv.html da BIRGA ishlatiladi
   (ilgari faqat texnik.html ning ichki uslubida edi). Sariq — diqqat
   talab qiladigan haqiqat, teal — ko'rsatma. */
.ogoh-blok{margin-top:12px;background:var(--sariq-bg);border-left:3px solid var(--sariq);
  padding:10px 12px;font-size:12.3px;line-height:1.65;border-radius:0 8px 8px 0}
.qoida-blok{margin-top:12px;background:var(--teal-soft2);border-left:3px solid var(--teal);
  padding:10px 12px;font-size:12.3px;line-height:1.65;border-radius:0 8px 8px 0}
.izoh-kod{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.8px;
  background:var(--n2);border-radius:4px;padding:1px 5px;word-break:break-all}