:root{
  --bg:#F3F6FB; --surface:#FFFFFF; --surface-2:#EAEFF7;
  --border:#DEE5F0; --border-strong:#C6D0E2;
  --ink:#14203A; --muted:#54607A; --faint:#8590A8;
  --brand:#1E63C4; --brand-ink:#FFFFFF; --brand-soft:#E2ECFA;
  --teal:#0E9891; --teal-soft:#DAF2F0;
  --rose:#D22C5B; --rose-soft:#FBE3EA;
  --amber:#B7791F; --amber-soft:#FAF0DC;
  /* Diagramma ranglari — dataviz validatoridan o'tgan.
     Kategorik SLOTLAR SHU TARTIBDA beriladi va hech qachon aylantirilmaydi:
     ko'k → sariq → firuza → pushti. Tartib muhim — pushti bilan sariq yonma-yon
     tushsa daltonizmda ajratib bo'lmaydi (ΔE 8.4 → 18.4 ga ko'tarildi). */
  --ch1:#1E63C4; --ch2:#B7791F; --ch3:#0E9891; --ch4:#D22C5B;
  /* Tartiblangan qatorlar (voronka, bosqichlar) — BITTA rang, ochdan to'qqa */
  --o1:#8FB4E5; --o2:#6699D8; --o3:#3E77CB; --o4:#1A57AC;
  --ch-grid:#E7EDF7; --ch-ink:#54607A;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(20,32,58,.05),0 10px 26px -16px rgba(20,32,58,.20);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0F1A; --surface:#141A28; --surface-2:#1C2334;
    --border:#273047; --border-strong:#39445F;
    --ink:#ECF0F8; --muted:#9BA6C0; --faint:#6A7690;
    --brand:#5C9BF0; --brand-ink:#08121F; --brand-soft:#152540;
    --teal:#37C7BD; --teal-soft:#0D2C2A; --rose:#F4638D; --rose-soft:#2E1526;
    --amber:#E8A33D; --amber-soft:#33260F;
    --ch1:#4585DC; --ch2:#C08019; --ch3:#1FA79E; --ch4:#DC4E74;
    --o1:#2C5389; --o2:#3C71B4; --o3:#5A96DD; --o4:#8FBBF0;
    --ch-grid:#273047; --ch-ink:#9BA6C0;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0F1A; --surface:#141A28; --surface-2:#1C2334;
  --border:#273047; --border-strong:#39445F;
  --ink:#ECF0F8; --muted:#9BA6C0; --faint:#6A7690;
  --brand:#5C9BF0; --brand-ink:#08121F; --brand-soft:#152540;
  --teal:#37C7BD; --teal-soft:#0D2C2A; --rose:#F4638D; --rose-soft:#2E1526;
  --amber:#E8A33D; --amber-soft:#33260F;
  --ch1:#4585DC; --ch2:#C08019; --ch3:#1FA79E; --ch4:#DC4E74;
  --o1:#2C5389; --o2:#3C71B4; --o3:#5A96DD; --o4:#8FBBF0;
  --ch-grid:#273047; --ch-ink:#9BA6C0;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.app{max-width:520px; margin:0 auto; padding:20px 18px 120px; min-height:100vh; display:flex; flex-direction:column}

/* header */
.brand{display:flex; align-items:center; gap:11px; margin-bottom:20px}
/* Brend belgisi — SVG. Fon rangi belgining o'zida, shuning uchun bu yerda
   background yo'q (mavzu o'zgarsa ham logotip o'zgarmasligi kerak). */
.brand .logo{width:44px; height:44px; border-radius:12px; overflow:hidden;
  flex:none; box-shadow:var(--shadow); line-height:0}
.brand .logo img{width:100%; height:100%; display:block; object-fit:cover}
.brand .bt{font-weight:700; font-size:19px; letter-spacing:-.01em; line-height:1.1}
.brand .bs{font-size:12.5px; color:var(--muted)}

/* progress */
.progress{display:flex; align-items:center; gap:10px; margin-bottom:22px}
.pbar{flex:1; height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.pfill{height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .35s ease}
.pnum{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

/* screens */
.screen{display:none; animation:fade .3s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

h1.title{font-size:24px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em}
p.lead{color:var(--muted); margin:0 0 22px; font-size:15px}
/* anketa ichidagi kichik bo'lim sarlavhasi (uch qadamli forma) */
h2.subtitle{font-size:17px; font-weight:700; margin:26px 0 10px; padding-top:18px;
  border-top:1px solid var(--border); letter-spacing:-.01em}
h2.subtitle + p.lead{margin-bottom:14px}

/* lang grid */
.lang-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.lang-btn{display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; font-size:16px; font-weight:600;
  color:var(--ink); transition:border-color .15s, transform .1s; text-align:left}
.lang-btn:hover{border-color:var(--brand-strong,var(--brand))}
.lang-btn:active{transform:scale(.98)}
.lang-btn .flag{font-size:24px}

/* fields */
.field{margin-bottom:18px}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:7px}
.field .hint{color:var(--faint); font-weight:400; font-size:12.5px}
/* seg ostidagi mustaqil izoh (label ichida emas) */
.field > .hint{display:block; margin-top:7px; line-height:1.45}
/* maydon ostidagi kichik izoh (masalan «ishlamagan bo'lsangiz — bo'sh qoldiring») */
.field-note{margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--faint); font-style:italic}

/* kasb va tajriba bitta ajratilgan kartochkada — bular o'zaro bog'liq
   savollar, qolgan maydonlardan ajralib turgani ma'noni oydinlashtiradi */
.prof-card{background:var(--brand-soft); border-radius:var(--radius-sm);
  padding:16px 14px 2px; margin-bottom:18px}
.prof-card-t{font-size:15px; font-weight:800; color:var(--brand); margin-bottom:14px}
.prof-card .field:last-child{margin-bottom:16px}
.prof-card select{background:var(--surface)}

/* bir nechta tanlanadigan belgilar ro'yxati */
.chk-list{display:flex; flex-direction:column; gap:2px}
/* `.field label{display:block}` dan kuchliroq bo'lishi SHART (ikki klass) — aks holda
   belgi va yozuv bitta qatorga tushmaydi va oralarida bo'shliq qolmaydi */
.chk-list .chk-item{display:flex; align-items:center; gap:11px; padding:11px 12px;
  margin-bottom:0; cursor:pointer; border-radius:var(--radius-sm);
  font-size:15px; font-weight:400; -webkit-tap-highlight-color:transparent}
.chk-list .chk-item:active{background:var(--surface-2)}
.chk-list .chk-item input{width:19px; height:19px; flex:none; accent-color:var(--brand); margin:0}
.input, textarea, select{
  width:100%; padding:13px 14px; font-size:16px; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; font-family:inherit;
  transition:border-color .15s;
}
.input:focus, textarea:focus, select:focus{border-color:var(--brand)}
.input.err, select.err{border-color:var(--rose)}
.errmsg{color:var(--rose); font-size:12.5px; margin-top:5px; display:none}
.errmsg.show{display:block}

.phone-btn{margin-top:9px; width:100%; padding:11px; background:var(--brand-soft); color:var(--brand);
  border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer}

/* specialties */
#specialtyList{display:flex; flex-direction:column; gap:10px}

/* segmented (gender / criminal / deport) */
.seg{display:flex; gap:10px}
.seg-btn{flex:1; padding:14px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-size:15px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .12s}
.seg-btn.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}

/* photo */
.photo-area{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px}
.photo-preview{width:150px; height:150px; border-radius:50%; background:var(--surface-2);
  border:2px dashed var(--border-strong); display:grid; place-items:center; font-size:56px;
  overflow:hidden; color:var(--faint)}
.photo-preview img{width:100%; height:100%; object-fit:cover}
.btn-soft{width:100%; max-width:320px; padding:13px; border:none; border-radius:var(--radius-sm);
  background:var(--brand); color:var(--brand-ink); font-size:15px; font-weight:600; cursor:pointer; font-family:inherit}
.btn-soft.ghost{background:var(--brand-soft); color:var(--brand)}
.photo-note{font-size:13.5px; color:var(--teal); font-weight:500; min-height:18px; text-align:center}

/* chips (languages) */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{padding:9px 15px; border:1.5px solid var(--border); border-radius:99px; background:var(--surface);
  font-size:14px; font-weight:500; cursor:pointer; user-select:none; transition:all .12s}
.chip.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}

/* stepper for experience */
textarea.input{resize:vertical; min-height:76px; line-height:1.5}

/* review */
.rev-list{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:18px}
.rev-row{display:flex; justify-content:space-between; gap:14px; padding:13px 16px; border-bottom:1px solid var(--border); font-size:14.5px}
.rev-row:last-child{border-bottom:none}
.rev-row .rk{color:var(--muted)} .rev-row .rv{font-weight:600; text-align:right}

/* success */
.done{text-align:center; padding-top:40px}
.done .big{width:88px; height:88px; border-radius:50%; background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; font-size:44px; margin:0 auto 22px}
.ref-badge{display:inline-flex; align-items:center; gap:8px; margin:6px 0 18px; padding:12px 20px;
  background:var(--brand-soft); color:var(--brand); border-radius:999px; font-size:15px}
.ref-badge b{font-size:20px; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums}

/* bottom action bar */
.actions{position:fixed; left:0; right:0; bottom:0; padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 70%, transparent); display:flex; gap:12px; max-width:520px; margin:0 auto}
.btn{flex:1; padding:15px; border:none; border-radius:var(--radius-sm); font-size:16px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:transform .1s, opacity .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand); color:var(--brand-ink)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--border); flex:0 0 auto; padding-left:22px; padding-right:22px}
.btn[disabled]{opacity:.55; cursor:default}

/* status: foydalanuvchi kartochkasi */
.user-card{display:flex; align-items:center; gap:15px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.uc-avatar{width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none; background:var(--surface-2);
  display:grid; place-items:center; font-size:32px; border:2px solid var(--brand-soft)}
.uc-avatar img{width:100%; height:100%; object-fit:cover}
.uc-info{min-width:0; flex:1}
.uc-name{font-size:17px; font-weight:700; color:var(--ink); line-height:1.2}
.uc-ref{font-size:13px; color:var(--muted); margin-top:2px}
.uc-ref b{color:var(--brand); font-variant-numeric:tabular-nums}
.uc-prog-row{display:flex; align-items:center; gap:10px; margin-top:11px}
.uc-prog-row .rm-bar{flex:1; margin:0}
.rm-bar{height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.rm-bar-fill{height:100%; background:linear-gradient(90deg,var(--teal),var(--brand)); border-radius:999px; width:0; transition:width .6s ease}
.rm-prog-num{font-size:12.5px; font-weight:700; color:var(--brand); white-space:nowrap; font-variant-numeric:tabular-nums}
.status-state{display:inline-block; margin-top:9px; padding:4px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; background:var(--surface-2); color:var(--ink)}
.status-state.ok{background:var(--teal-soft); color:var(--teal)}
.status-state.wait{background:var(--brand-soft); color:var(--brand)}
.status-state.no{background:var(--rose); color:#fff}

/* interview card (kandidat) */
.iv-card{margin-top:16px; background:var(--surface); border:1.5px solid var(--brand); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow)}
.iv-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; cursor:pointer}
.iv-head-l{display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:700; color:var(--ink)}
.iv-emoji{font-size:19px}
.iv-chev{color:var(--brand); font-size:15px; transition:transform .22s}
.iv-card.open .iv-chev{transform:rotate(180deg)}
.iv-tap{padding:0 16px 14px; font-size:12.5px; font-weight:600; color:var(--brand); cursor:pointer}
.iv-card.open .iv-tap{display:none}
.iv-body{max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; padding:0 16px}
.iv-card.open .iv-body{max-height:600px; padding:0 16px 16px}
.iv-row{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:9px 0; border-bottom:1px dashed var(--border)}
.iv-row:last-of-type{border-bottom:none}
.iv-row span{color:var(--muted); font-size:13px; flex:none}
.iv-row b{color:var(--ink); font-size:13.5px; text-align:right; word-break:break-word}
.iv-when{color:var(--brand) !important; font-size:15px !important}
.iv-link-text{font-size:12px !important; opacity:.85}
.iv-join{display:block; margin-top:12px; padding:13px; border-radius:var(--radius-sm); background:var(--brand);
  color:var(--brand-ink); text-align:center; font-size:14.5px; font-weight:700; text-decoration:none}
.iv-note{margin-top:12px; font-size:12.5px; color:var(--teal); background:var(--teal-soft); padding:9px 12px; border-radius:9px}

/* roadmap — tekis vertikal yo'l (ixcham, o'sish animatsiyasi bilan) */
.roadmap-head{font-size:17px; font-weight:700; color:var(--ink); margin:26px 0 6px}
/* pastdagi bo'shliq: ilgari yo'l xaritasidan keyin tugmalar paneli turardi,
   u olib tashlangach oxirgi qator pastki panelga yopishib qolgan edi */
.roadmap-wrap{position:relative; width:100%; padding:2px 0 18px}

/* chiziq: kul rang punktir + ustidan o'sadigan rangli qism.
   top/height JS da tugunlarning haqiqiy markazlari bo'yicha qo'yiladi. */
.rm-rail{position:absolute; left:21px; width:2px; border-radius:2px;
  background:repeating-linear-gradient(var(--border-strong) 0 4px, transparent 4px 10px)}
/* balandlik --h da (JS qo'yadi). transition emas, keyframe: transition ba'zan
   ishga tushmay qolardi (element endigina innerHTML bilan yaratilgani uchun). */
.rm-rail-fill{position:absolute; left:0; top:0; width:100%; height:var(--h,0px); border-radius:2px;
  background:linear-gradient(180deg, var(--teal), var(--brand))}

.rm-row{position:relative; display:flex; align-items:center; gap:13px; min-height:54px;
  cursor:pointer; -webkit-tap-highlight-color:transparent}
.rm-row:active{opacity:.75}
/* brauzer panelida Tab bilan yurilganda qaysi qator tanlanganini ko'rsatadi */
.rm-row:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--radius-sm)}
.rm-node{position:relative; z-index:1; flex:none; width:30px; height:30px; margin-left:7px;
  border-radius:50%; display:grid; place-items:center; font-size:14px; line-height:1;
  background:var(--surface-2); border:2px solid var(--border); color:var(--faint);
  transition:width .3s ease, height .3s ease, margin .3s ease}
.rm-info{flex:1; min-width:0}
.rm-name{font-size:14px; color:var(--muted); line-height:1.3}
/* chip va sana yonma-yon; joy yetmasa pastga tushadi */
.rm-sub{margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rm-date{font-size:11.5px; font-weight:600; color:var(--brand)}
/* muddati o'tib ketgan bosqich sanasi — diqqatni tortadi */
.rm-date.is-past{color:var(--rose)}
/* yakunlangan bosqich sanasi — tarix, shuning uchun bo'rttirilmaydi */
.rm-row.is-done .rm-date{color:var(--muted)}
.rm-chip{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.2px;
  color:var(--brand-ink); background:var(--brand); padding:3px 9px; border-radius:999px}
.rm-go{flex:none; color:var(--faint); font-size:19px; line-height:1; padding-right:2px}

.rm-row.is-done .rm-node{background:var(--teal); border-color:var(--teal); color:#fff;
  font-size:15px; font-weight:700}
.rm-row.is-done .rm-name{color:var(--ink)}
.rm-row.is-next .rm-node{opacity:.5}
.rm-row.is-next .rm-go{opacity:.45}
.rm-row.is-now .rm-node{width:38px; height:38px; margin-left:3px; font-size:18px;
  background:var(--brand); border-color:var(--brand); color:var(--brand-ink);
  box-shadow:0 0 0 5px var(--brand-soft)}
.rm-row.is-now .rm-name{color:var(--ink); font-weight:700; font-size:14.5px}
.rm-row.is-now .rm-go{color:var(--brand)}

@media (prefers-reduced-motion:no-preference){
  /* qatorlar ketma-ket paydo bo'ladi — «o'sib borish» hissi.
     MUHIM: asosiy holat KO'RINADIGAN (opacity:1). Boshlang'ich yashirinlik
     faqat keyframe ichida + `backwards` bilan beriladi — animatsiya biror
     sababga ko'ra ishga tushmasa ham qatorlar ko'rinib turadi. */
  .roadmap-wrap.rm-anim .rm-row{
    animation:rmIn .5s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay:calc(var(--i) * 55ms)}
  @keyframes rmIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
  /* chiziq tepadan pastga «o'sadi» */
  .roadmap-wrap.rm-anim .rm-rail-fill{
    animation:rmGrow 1.05s cubic-bezier(.22,1,.36,1) .25s both}
  @keyframes rmGrow{from{height:0} to{height:var(--h,0px)}}
  .rm-row.is-now .rm-node{animation:rmpulse 2.2s ease-in-out infinite}
  @keyframes rmpulse{0%,100%{box-shadow:0 0 0 5px var(--brand-soft)}
                     50%{box-shadow:0 0 0 11px var(--brand-soft)}}
}

/* language + level selector */
.lang-list{display:flex; flex-direction:column; gap:10px}
.lang-item{border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); transition:border-color .15s}
.lang-item.on{border-color:var(--brand)}
.lang-head{display:flex; justify-content:space-between; align-items:center; padding:13px 16px; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink)}
.lang-check{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:14px; background:var(--surface-2); color:var(--faint); flex:none}
.lang-item.on .lang-check{background:var(--brand); color:var(--brand-ink)}
.lang-levels{display:flex; flex-direction:column; gap:7px; padding:2px 12px 12px}
.lang-lvl{padding:10px 13px; border:1.5px solid var(--border); border-radius:9px; font-size:13.5px; color:var(--muted); cursor:pointer; background:var(--bg); transition:all .12s}
.lang-lvl.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:600}

/* documents */
.docs-list{display:flex; flex-direction:column; gap:10px}
.doc-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px}
.doc-info{min-width:0}
.doc-name{font-size:14.5px; font-weight:600; color:var(--ink)}
.doc-status{font-size:12.5px; color:var(--muted); margin-top:2px}
.doc-status.ok{color:var(--teal)} .doc-status.no{color:var(--rose)} .doc-status.wait{color:var(--brand)}
.doc-meta{font-size:12px; color:var(--muted); margin-top:3px}
.doc-btn{flex:none; padding:9px 15px; border:none; border-radius:9px; background:var(--brand-soft);
  color:var(--brand); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap}
.doc-btn[disabled]{opacity:.6; cursor:default}

/* admin dashboard */
.adm-head{font-size:19px; font-weight:700; color:var(--ink); margin:4px 0 10px}
.adm-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:9px}
.adm-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 5px 8px; text-align:center; box-shadow:var(--shadow)}
.adm-tile-num{font-size:20px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; line-height:1}
.adm-tile-lbl{font-size:10px; color:var(--muted); margin-top:3px; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.adm-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 13px; margin-bottom:9px; box-shadow:var(--shadow)}
.adm-card-title{font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:8px}
.adm-donut-row{display:flex; align-items:center; gap:0}
.adm-donut-num{font-size:26px; font-weight:800; fill:var(--ink)}
.adm-legend{display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--muted)}
.adm-leg{display:flex; align-items:center; gap:8px}
.adm-leg b{color:var(--ink)}
.adm-dot{width:11px; height:11px; border-radius:3px; flex:none}
.adm-bars{display:flex; flex-direction:column; gap:11px}
.bar-row{display:flex; align-items:center; gap:10px; font-size:12.5px}
.bar-lbl{flex:0 0 42%; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track{flex:1; height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden}
/* Bitta qator — bitta rang. Ilgari firuza→ko'k gradient edi: tartiblangan
   o'lchovda ikki rangli ramp uzunlikni rang bilan takror kodlaydi. */
.bar-fill{height:100%; background:var(--ch1); border-radius:999px}
.bar-val{flex:none; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; min-width:22px; text-align:right}
.adm-mini{font-size:14px; color:var(--ink); line-height:1.5}
.adm-empty{color:var(--faint); font-size:13px; padding:10px 0}
/* Kartochka sarlavhasi va raqamlari BITTA qatorda: nom chapda, raqamlar o'ngda,
   qolgan bo'laklar (diagramma) yangi qatordan. Bu har kartada bir qator joy
   tejaydi. Faqat CSS — DOM'ga tegilmaydi, shuning uchun matnni qayta yozadigan
   kod bilan to'qnashmaydi. */
.adm-vac-card{cursor:pointer; transition:border-color .15s; position:relative;
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; padding-right:26px}
/* «›» kartochkaning eng o'ng chekkasida — sarlavha ichida bo'lsa raqamlardan
   oldin qolib ketardi */
.adm-vac-card::after{content:"›"; position:absolute; top:10px; right:11px;
  color:var(--faint); font-size:17px; line-height:1}
.adm-vac-card:active::after{color:var(--brand)}
.adm-vac-card:active{border-color:var(--brand)}
.adm-vac-card > *{flex:0 0 100%}                    /* standart: har biri yangi qator */
.adm-vac-card > .adm-card-title{flex:1 1 auto; min-width:0; margin-bottom:6px}
.adm-vac-card > .adm-vac-summary{flex:0 1 auto; margin-left:auto; text-align:right;
  font-size:11.5px; line-height:1.4; color:var(--muted); margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.adm-vac-card > .adm-vac-summary b{color:var(--ink); font-weight:700;
  font-variant-numeric:tabular-nums}
/* «Boshqarish →» qatori shart emas — kartochkaning o'zi bosiladi */
.adm-vac-card > .adm-vac-open{display:none}
.adm-vac-summary{font-size:14px; color:var(--ink); line-height:1.6}
.adm-vac-open{margin-top:7px; font-size:12.5px; font-weight:700; color:var(--brand)}

/* vacancy panel */
.vac-topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px}
.vac-title{font-size:18px; font-weight:700; color:var(--ink)}
.vac-icon-btn{width:40px; height:40px; border-radius:11px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); font-size:20px; cursor:pointer; flex:none}
.vac-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:15px; margin-bottom:12px; box-shadow:var(--shadow)}
.vac-card-h{font-size:15px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px}
.vac-badge{font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap}
.vac-badge.on{background:var(--teal-soft); color:var(--teal)}
.vac-badge.off{background:var(--rose-soft); color:var(--rose)}
.vac-card-b{font-size:13.5px; color:var(--muted); line-height:1.6}
.vac-card-b b{color:var(--ink)}
.vac-actions{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.vbtn{padding:8px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
  color:var(--ink); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit}
.vbtn.del{background:var(--rose-soft); color:var(--rose); border-color:transparent}
.vac-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:var(--shadow)}
.vac-form-title{font-size:16px; font-weight:700; color:var(--ink); margin-bottom:14px}
.vac-form .input{margin-bottom:10px}
.vac-form-btns{display:flex; gap:10px; margin-top:6px}
/* formadagi bo'lim ajratgichi — maydonlar ko'payganda yo'l ko'rsatadi */
.vac-form-sec{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin:16px 0 8px; padding-top:12px; border-top:1px solid var(--border)}
.vac-form-sec:first-of-type{padding-top:4px; border-top:0}
.vac-form-hint{font-size:12.5px; color:var(--muted); margin:-4px 0 10px}

/* ===== VAKANSIYA SHARTLARI ===== */
/* Kartochka ichida yig'iladigan blok: bosilmaguncha joy egallamaydi. */
.vac-tag{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px;
  border-radius:7px; background:var(--brand-soft); color:var(--brand); vertical-align:middle}
.vac-terms{margin-top:10px; border-top:1px solid var(--border); padding-top:10px}
.vac-terms summary{list-style:none; cursor:pointer; font-size:13.5px; font-weight:700;
  color:var(--brand); -webkit-tap-highlight-color:transparent}
.vac-terms summary::-webkit-details-marker{display:none}
.vac-terms summary::after{content:" ▾"}
.vac-terms[open] summary::after{content:" ▴"}
.vt-row{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13.5px}
.vt-row:last-child{border-bottom:0}
.vt-row span{flex:none; width:38%; color:var(--muted)}
.vt-row b{flex:1; min-width:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere}
.appl-head{display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:14px}
.appl-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:10px}
.appl-info{font-size:14px; color:var(--ink); min-width:0}
.appl-st{font-size:12.5px; color:var(--muted); margin-top:3px}
.appl-st.ok{color:var(--teal); font-weight:600}

/* bosiladigan dashboard elementlari */
.tap{cursor:pointer; transition:transform .1s, opacity .15s}
.tap:active{transform:scale(.97); opacity:.85}
.adm-tile.tap:active{background:var(--brand-soft)}
.bar-row.tap{padding:3px 4px; margin:-3px -4px; border-radius:8px}
.bar-row.tap:active{background:var(--surface-2)}
.adm-leg.tap:active{color:var(--brand)}
.mini-line{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:9px}
.mini-lbl{color:var(--muted); font-size:13.5px}
.mini-pill{padding:5px 11px; border-radius:999px; background:var(--surface-2); font-size:13px;
  font-weight:600; color:var(--ink)}
.mini-pill:active{background:var(--brand-soft); color:var(--brand)}
.cand-extra{margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cand-clear{font-size:12.5px; color:var(--rose); cursor:pointer; font-weight:600}
/* IXCHAM KARTOCHKA — barcha ro'yxatlarda bir xil.
   Avatar flex ichida markazlashadi (absolyut emas), shuning uchun 2 qator
   matn yonida aniq o'rtada turadi. */
.cmp{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:8px; box-shadow:var(--shadow); overflow:hidden}
.cmp-h{display:flex; align-items:center; gap:11px; padding:9px 11px; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.cmp-h:active{background:var(--surface-2)}
.cmp-h > .av{width:40px; height:40px; position:static; margin:0}
.cmp-ico{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--border); font-size:17px}
.cmp-txt{flex:1; min-width:0}
.cmp-t{font-size:14px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp-s{font-size:12px; line-height:1.3; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp-s .vac-badge{font-size:10.5px; padding:1px 7px; margin-left:2px; vertical-align:1px}
.cmp-x{flex:none; color:var(--faint); font-size:15px; line-height:1; transition:transform .25s ease}
.cmp.open .cmp-x{transform:rotate(180deg)}
.cmp-b{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1)}
.cmp.open .cmp-b{grid-template-rows:1fr}
.cmp-bw{overflow:hidden; min-height:0}
.cmp.open .cmp-bw{padding:0 11px 11px}
.cmp.late{border-color:var(--rose)}
.cmp.warn{border-color:var(--amber, var(--rose))}
@media (prefers-reduced-motion:reduce){ .cmp-b, .cmp-x{transition:none} }

/* ko'rish rejimi lentasi — rahbar xodim ko'zi bilan ko'rayotganda */
.viewas{position:fixed; left:0; right:0; top:0; z-index:80; display:flex; align-items:center;
  gap:10px; padding:8px 14px; padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--amber, #B45309); color:#fff; font-size:12.5px; font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.viewas-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.viewas-x{flex:none; border:none; cursor:pointer; font-family:inherit; font-weight:700;
  background:rgba(255,255,255,.22); color:#fff; padding:5px 11px; border-radius:999px; font-size:12px}
body.has-viewas .app{padding-top:44px}

/* hujjatlar guruhi: bitta kandidat kartochkasi ichidagi hujjatlar */
.dg-item{padding:9px 0; border-bottom:1px solid var(--border)}
.dg-item:last-of-type{border-bottom:none}
.dg-h{display:flex; align-items:center; justify-content:space-between; gap:9px;
  font-size:13.5px; color:var(--ink); margin-bottom:7px}
.dg-item .vac-actions{margin-top:0}
/* hujjat qatoridagi qo'shimcha ma'lumot: manba, sana, fayl nomi, izoh */
.dg-meta{font-size:12px; color:var(--muted); margin:-4px 0 6px}
.dg-note{font-size:12.5px; color:var(--ink); margin:-2px 0 7px; opacity:.85}

/* ===== Hujjatlar: arizachilar bo'yicha ro'yxat (kelgan · qabul qilingan · biz yuborgan) =====
   Har arizachi — bitta qator; «+» bosilsa ikkala yo'nalishdagi hujjatlar ochiladi. */
body.web #docsAdminList.dl-list{display:block}
/* tor ko'rinish OYNA emas, RO'YXAT kengligiga qarab yoqiladi: panel keng oynada ham
   tor ustunda ochilishi mumkin (Telegram desktop, planshet) */
.dl-list{container:dlist / inline-size}
.dl-table{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.dl-row{display:grid; grid-template-columns:minmax(0,1.8fr) repeat(3, minmax(0,1fr)) 32px;
  align-items:center; gap:10px; padding:10px 14px}
.dl-head{background:var(--surface-2); border-bottom:1px solid var(--border)}
.dl-head .dl-c{border:0; background:none; padding:0; font-family:inherit; font-size:11.5px; font-weight:600;
  line-height:1.3; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; cursor:pointer; text-align:left;
  white-space:normal}
.dl-head .dl-num{justify-content:flex-end; text-align:right}
.dl-head .dl-c:focus-visible, .dl-line:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.dl-c{min-width:0}
.dl-num{display:flex; align-items:baseline; justify-content:flex-end; gap:5px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.dl-num b{font-size:15px; font-weight:700; color:var(--ink)}
.dl-num b.ok{color:var(--teal)}
.dl-num b.dl-zero{color:var(--faint); font-weight:500}
.dl-num small{font-size:11.5px; color:var(--muted)}
.dl-name{display:flex; align-items:center; gap:10px}
.dl-name > .av{width:34px; height:34px; position:static; margin:0; flex:none; font-size:12px}
.dl-who{display:flex; flex-direction:column; min-width:0}
.dl-who b{font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dl-who small{font-size:11.5px; color:var(--muted)}
.dl-x{justify-self:center; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); color:var(--muted); font-size:18px; line-height:1; transition:transform .2s ease}
.dl-head .dl-x{background:none}
.dl-grp{border-bottom:1px solid var(--border)}
.dl-grp:last-child{border-bottom:none}
.dl-grp.wait .dl-line{box-shadow:inset 3px 0 0 var(--amber)}
.dl-line{cursor:pointer; -webkit-tap-highlight-color:transparent}
.dl-line:hover{background:var(--surface-2)}
.dl-grp.open .dl-line{background:var(--brand-soft)}
.dl-grp.open .dl-x{transform:rotate(45deg); background:var(--brand); color:var(--brand-ink)}
.dl-body{padding:10px 14px 14px; background:var(--bg)}
.dl-secs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-items:start}
.dl-sec{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px 12px 6px}
.dl-sec-t{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0 6px;
  font-size:12.5px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--border)}
.dl-empty{font-size:12.5px; color:var(--faint); padding:9px 0}
.dl-body > .vac-actions{margin-top:10px}
@media (prefers-reduced-motion:reduce){ .dl-x{transition:none} }
@container dlist (max-width:640px){
  .dl-head{display:none}
  .dl-row{grid-template-columns:repeat(3, minmax(0,1fr)) 28px; gap:6px 10px; padding:10px 12px}
  .dl-line .dl-name{grid-column:1 / 4; grid-row:1}
  .dl-line .dl-x{grid-column:4; grid-row:1}
  .dl-num{display:block; align-self:end; text-align:left; white-space:normal}
  .dl-num::before{content:attr(data-l); display:block; margin-bottom:1px; font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
  .dl-num small{margin-left:4px}
  .dl-secs{grid-template-columns:minmax(0,1fr)}
  .dl-body{padding:8px 10px 12px}
}

/* --- xodim hujjat qo'shadi (s-doc-add) --- */
.docs-add{width:100%; margin-bottom:12px}
.dad-cands{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.dad-cand{padding:10px 13px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); font-size:13.5px; color:var(--ink); cursor:pointer}
.dad-cand:active{opacity:.7}
.dad-picked{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink); margin-bottom:9px}
.dad-file{font-size:12.5px; color:var(--muted); margin-top:7px; word-break:break-all}
/* tahrirda yo'nalish o'zgarmaydi — chiplar ko'rinadi, lekin bosilmaydi */
.dad-locked{opacity:.55; pointer-events:none}
/* kandidat kartochkasidagi ichki sarlavha (chiquvchi hujjatlar ro'yxati ustida) */
.cd-sub{margin-top:11px; font-size:12.5px; color:var(--muted)}

/* ariza kartasi: ixcham (rasm + 2 qator), bosilsa ochiladi */
.app-c{padding:9px 34px 9px 68px; margin-bottom:8px; cursor:pointer}
.app-c > .av{left:13px; top:9px; width:40px; height:40px}
.app-h{min-width:0}
.app-t{font-size:14px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-s{font-size:12px; line-height:1.3; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-s .vac-badge{font-size:10.5px; padding:1px 7px; margin-left:2px; vertical-align:1px}
.app-x{position:absolute; right:11px; top:50%; transform:translateY(-50%);
  color:var(--faint); font-size:15px; line-height:1; transition:transform .25s ease}
.app-c.open .app-x{transform:translateY(-50%) rotate(180deg)}
/* tafsilot: 0fr -> 1fr, balandlikni bilmasdan silliq ochiladi */
.app-b{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1)}
.app-c.open .app-b{grid-template-rows:1fr}
.app-bw{overflow:hidden; min-height:0}
.app-c.open .app-bw{padding-top:8px}
.app-c .vac-card-b{margin-top:0}
@media (prefers-reduced-motion:reduce){ .app-b, .app-x{transition:none} }

/* shartnoma: bo'lib to'lash bo'laklari */
.ctr-parts{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.ctr-part{background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 11px}
.ctr-part-h{font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:5px}
.ctr-part .input{margin:0; padding:8px 10px; font-size:13.5px}
.ctr-parts-sum{margin-top:9px; font-size:12.5px; font-weight:700; color:var(--teal)}
.ctr-parts-sum.warn{color:var(--rose)}

/* dashboard kartasidagi kichik grafik */
.ch-mini{position:relative; margin-top:10px}
.ch-mini .ch-stack{height:14px; border-radius:5px}
.ch-mini .ch-stack i:first-child{border-radius:5px 0 0 5px}
.ch-mini .ch-stack i:last-child{border-radius:0 5px 5px 0}
.ch-mini .ch-meter{height:8px}
.ch-mini .ch-meter-row{font-size:11px}
.ch-mini .ch-empty{font-size:11px; padding:4px 0}

/* sarlavhada kim bo'lib kirgani */
.brand-txt{flex:1; min-width:0}
.brand .bs{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who{flex:none; margin-left:auto}
.who.hidden{display:none}
.who-role{display:inline-block; padding:5px 11px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand);
  font-size:11.5px; font-weight:700; white-space:nowrap}

/* bo'lim svodkasi — ro'yxat tepasidagi kichik dashboard */
.sum-grid{margin-bottom:12px}
.sum-grid .iv-stat{padding:10px 6px; cursor:default}
.sum-grid .iv-stat b{font-size:19px}
.sum-grid .iv-stat.tap{cursor:pointer}
.sum-grid .iv-stat.tap:active{background:var(--surface-2)}
.sum-grid .iv-stat.on{border-color:var(--brand); background:var(--brand-soft)}
.sum-grid .iv-stat.on b{color:var(--brand)}

/* yumaloq avatar — kartochkalarda arizachining o'z rasmi */
.av{flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border)}
.av img{width:100%; height:100%; object-fit:cover; display:block}
.av-txt{font-size:15px; font-weight:800; letter-spacing:.3px}
/* kandidat qatori — avatar chapda, matn yonida */
/* .cand-row allaqachon flex + gap:12px — qo'shimcha margin kerak emas */
/* karta ko'rinishidagilar: avatar chap yuqorida, matn uning yonidan boshlanadi */
.vac-card.has-av, .pay-card.has-av{position:relative; padding-left:70px}
.vac-card.has-av > .av, .pay-card.has-av > .av{position:absolute; left:16px; top:16px}

/* davr filtri (kunlik / haftalik / oylik / sana oralig'i) */
.period-bar{margin-bottom:10px}
.per-row{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.per-chip{padding:7px 13px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--muted); font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent}
.per-chip.on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.per-chip:active{opacity:.75}
.per-range{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:9px;
  padding:11px 12px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border)}
.per-range.hidden{display:none}
.per-range .input{flex:1; min-width:132px; margin:0; padding:8px 10px; font-size:13px}
.per-range .vbtn{flex:none}
.per-sep{font-size:12.5px; color:var(--faint)}
.per-note{margin-top:7px; font-size:11.5px; color:var(--brand); font-weight:600}

/* pastki bo'limlar paneli — barcha panellarda bir xil, qotib turadi */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
  background:var(--surface); border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px rgba(0,0,0,.06)}
.tabbar.hidden{display:none}
/* 8 ta bo'lim tor ekranga sig'masligi mumkin — panel gorizontal suriladi */
.tabbar{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tabbar::-webkit-scrollbar{display:none}
.tab-item{flex:1 0 auto; min-width:60px; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:6px 2px; border:none; background:none; cursor:pointer;
  font-family:inherit; color:var(--faint); border-radius:10px;
  -webkit-tap-highlight-color:transparent}
.tab-item:active{background:var(--surface-2)}
.tab-ico{position:relative; font-size:19px; line-height:1}
.tab-lbl{font-size:10px; font-weight:600; line-height:1.1; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tab-item.on{color:var(--brand)}
.tab-item.on .tab-lbl{font-weight:800}
.tab-badge{position:absolute; top:-5px; left:12px; min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:var(--rose); color:#fff;
  font-size:9.5px; font-weight:800; line-height:16px; text-align:center}
/* panel ochiq bo'lsa kontent panel ostida qolib ketmasin */
body.has-tabbar .app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
body.has-tabbar .actions{bottom:calc(64px + env(safe-area-inset-bottom))}
@media (min-width: 900px){
  body.web .tabbar{padding-left:calc(50% - 590px); padding-right:calc(50% - 590px)}
  body.web .tab-item{flex:0 0 auto; min-width:104px}
}

/* hujjat ko'ruvchi oyna — to'liq ekran, barcha panellarda bir xil */
.dv-overlay{position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:rgba(8,11,18,.94); backdrop-filter:blur(4px)}
.dv-overlay.hidden{display:none}
.dv-bar{flex:none; display:flex; align-items:center; gap:10px; padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top))}
.dv-title{flex:1; min-width:0; color:#fff; font-size:14.5px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dv-btn{flex:none; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:16px; line-height:36px;
  text-align:center; text-decoration:none; font-family:inherit}
.dv-btn:active{background:rgba(255,255,255,.26)}
.dv-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:0 12px calc(16px + env(safe-area-inset-bottom)); overflow:auto}
.dv-stage img{max-width:100%; max-height:100%; border-radius:10px; object-fit:contain}
.dv-msg{color:rgba(255,255,255,.72); font-size:13.5px; text-align:center; padding:24px}

/* bosiladigan hujjat qatori */
.doc-row.tapable{cursor:pointer}
.doc-row.tapable:active{opacity:.75}
.doc-eye{flex:none; margin-left:2px; font-size:15px; opacity:.55}
.doc-chips{display:flex; flex-wrap:wrap; gap:6px}
.doc-chip{padding:5px 10px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--border); font-size:12px; color:var(--ink); cursor:pointer}
.doc-chip:active{opacity:.7}

.doc-view{margin-top:10px}
.doc-view img{width:100%; border-radius:var(--radius-sm); border:1px solid var(--border)}

/* ish beruvchi kabineti */
.emp-head{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.emp-logo{width:52px; height:52px; border-radius:14px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-size:26px; flex:none}
.emp-company{font-size:18px; font-weight:700; color:var(--ink); line-height:1.2}
.emp-sub{font-size:12.5px; color:var(--muted); margin-top:2px}
/* bildirishnoma sozlamasi: qator + kalit tugma */
.emp-notif-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; color:var(--ink)}
.emp-notif-row:last-child{border-bottom:none}
.emp-sw{width:46px; height:26px; flex:none; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-2); position:relative; cursor:pointer; padding:0; transition:.15s}
.emp-sw i{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); box-shadow:var(--shadow); transition:.15s; display:block}
.emp-sw.on{background:var(--brand); border-color:var(--brand)}
.emp-sw.on i{left:22px}
/* hisobot: CSV tugmasi kartalardan ajralib tursin */
#empRepCsv{margin-top:4px}
/* kelgan hujjat: ochilgan rasm */
.emp-doc-view img{width:100%; border-radius:var(--radius-sm); margin:8px 0 2px; display:block}
/* tanlangan hujjat nomi (ish beruvchi formasi) */
.emp-doc-file{font-size:12px; color:var(--brand); font-weight:600; margin:2px 0 6px;
  word-break:break-all}
/* vakansiya yo'nalishi (soha) — kartada birinchi qator */
.vac-dir{display:inline-block; font-size:12px; font-weight:700; color:var(--brand);
  background:var(--brand-soft); padding:2px 8px; border-radius:999px}
.vac-dir.none{color:var(--muted); background:var(--surface-2); font-weight:600}
.emp-note{margin-top:10px; font-size:11.5px; color:var(--muted); background:var(--surface-2);
  padding:8px 11px; border-radius:8px; line-height:1.4}
.emp-cand-h{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.emp-cand-av{width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--surface-2);
  display:grid; place-items:center; font-size:24px; flex:none; border:2px solid var(--brand-soft)}
.emp-cand-av img{width:100%; height:100%; object-fit:cover}
.emp-cand-h > div:nth-child(2){flex:1; min-width:0; font-size:14.5px; color:var(--ink)}
.emp-match{flex:none; font-size:17px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums}
.emp-code{margin-top:10px; font-size:11.5px; color:var(--muted); background:var(--surface-2);
  padding:9px 11px; border-radius:8px; word-break:break-all; line-height:1.5}
.emp-code code{color:var(--brand); font-size:11px}
/* panel: yaqin intervyular qatori */
.emp-iv-row{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:8px 0;
  border-bottom:1px solid var(--border); font-size:13px; color:var(--ink)}
.emp-iv-row:last-child{border-bottom:none}
.emp-iv-row b{font-variant-numeric:tabular-nums; color:var(--brand)}
.emp-iv-nm{flex:1; min-width:0}
.emp-iv-row .cand-sub{flex-basis:100%}
.emp-lang{display:flex; gap:4px; flex:none}
.emp-lang-btn{padding:5px 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface);
  color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit}
.emp-lang-btn.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}


/* chat */
.chat-box{display:flex; flex-direction:column; gap:10px; max-height:58vh; overflow-y:auto;
  padding:4px 2px 12px}
.msg{display:flex}
.msg.mine{justify-content:flex-end}
.msg-b{max-width:82%; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:10px 13px; box-shadow:var(--shadow)}
.msg.mine .msg-b{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.msg-who{font-size:11px; font-weight:700; color:var(--brand); margin-bottom:3px}
.msg.mine .msg-who{color:var(--brand-ink); opacity:.85}
.msg-t{font-size:14px; line-height:1.5; color:var(--ink); white-space:pre-wrap; word-break:break-word}
.msg.mine .msg-t{color:var(--brand-ink)}
.msg-at{font-size:10.5px; color:var(--faint); margin-top:4px; text-align:right}
/* Iqtibos — xodim CRM'dan javob bergan xabar */
.msg-q{margin:0 0 4px; padding:3px 8px; border-left:3px solid var(--brand); border-radius:6px; background:rgba(127,127,127,.12);
  font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg-q b{display:block; font-size:11px; color:var(--brand)}
.msg-del{font-size:11px; font-weight:700; color:#d33; margin-bottom:2px}
.msg-t.is-del{text-decoration:line-through; color:var(--faint)}
.msg.mine .msg-at{color:var(--brand-ink); opacity:.7}
.chat-input{display:flex; gap:9px; align-items:flex-end; padding-top:8px; border-top:1px solid var(--border)}
.chat-input textarea{flex:1; resize:none; min-height:48px}
.chat-input .btn{flex:none; padding:14px 18px}
.chat-badge{flex:none; min-width:24px; height:24px; border-radius:999px; background:var(--rose);
  color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; padding:0 7px}

/* kandidat vakansiyalari */
/* mening arizam — ko'rish va tahrirlash */
.pr-ref{font-size:12.5px; color:var(--muted); margin-bottom:12px}
.pr-row{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--border)}
.pr-row:last-child{border-bottom:none}
.pr-label{flex:none; width:42%; font-size:12.5px; color:var(--muted); line-height:1.35}
.pr-value{flex:1; min-width:0; font-size:13.5px; color:var(--ink); font-weight:600;
  line-height:1.35; word-break:break-word}
.pr-lbl{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:12px 0 6px}
.pr-lbl:first-child{margin-top:0}
.pr-hint{font-size:12px; color:var(--faint); margin:6px 0 0; line-height:1.45}

/* ===== QAYTA ROZILIK EKRANI ===== */
/* Oferta yangilanganda ilova shu ekranni ko'rsatadi va boshqa hech qayerga
   o'tkazmaydi — rozilik berilmaguncha holat ekrani ochilmaydi. */
#s-consent{padding-top:22px}
.cns-icon{font-size:40px; text-align:center; margin-bottom:12px}
.cns-title{font-size:20px; font-weight:700; color:var(--ink); margin:0 0 10px; text-align:center; line-height:1.3}
.cns-text{font-size:15px; color:var(--muted); margin:0 0 14px; line-height:1.55}
.cns-list{margin:0 0 16px; padding-left:20px}
.cns-list li{font-size:14.5px; color:var(--ink); margin:6px 0; line-height:1.5}
.cns-link{display:block; width:100%; text-align:center; text-decoration:none; margin-bottom:10px}
.cns-ok{width:100%}
.cns-note{font-size:12.5px; color:var(--faint); margin:12px 0 0; text-align:center; line-height:1.45}
.adm-card .pr-prof{margin-bottom:8px}
.pr-chips{display:flex; gap:8px; flex-wrap:wrap}
.pr-chip{padding:8px 14px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer}
.pr-chip.on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.pr-photo-note{font-size:12px; color:var(--teal); margin-top:8px; min-height:16px}
.pr-main{width:100%; padding:13px; font-size:14px; margin-top:4px}
.pr-actions{display:flex; gap:10px; margin-top:4px}
.pr-actions .vbtn{flex:1; padding:13px; font-size:14px}
.vbtn.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}

.cv-note{font-size:12.5px; color:var(--muted); margin-bottom:14px; padding:9px 12px;
  background:var(--surface-2); border-radius:9px}
.cv-note.warn{color:var(--amber); background:var(--amber-soft, var(--surface-2))}
.cv-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px}
.cv-head > div:first-child{flex:1; min-width:0; font-size:15px; color:var(--ink)}
.cv-match{flex:none; text-align:center; font-size:18px; font-weight:800; color:var(--faint);
  font-variant-numeric:tabular-nums; line-height:1.1}
.cv-match span{display:block; font-size:9.5px; font-weight:600; color:var(--muted); margin-top:2px}
.cv-match.mid{color:var(--brand)} .cv-match.hi{color:var(--teal)}
.vbtn[disabled]{opacity:.6; cursor:default}

/* onboarding */
.ob-hero{text-align:center; padding:10px 0 22px}
.ob-flags{font-size:34px; letter-spacing:6px; margin-bottom:14px}
.ob-arrow{color:var(--brand); font-size:24px; vertical-align:middle}
.ob-title{font-size:24px; font-weight:800; color:var(--ink); line-height:1.25; margin:0 0 10px; text-wrap:balance}
.ob-sub{font-size:15px; color:var(--muted); line-height:1.55; margin:0}
.ob-stats{display:flex; gap:10px; margin-bottom:18px}
.ob-stat{flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px 8px; text-align:center; box-shadow:var(--shadow)}
.ob-stat b{display:block; font-size:21px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums}
.ob-stat span{font-size:11px; color:var(--muted); line-height:1.2; display:block; margin-top:3px}
.ob-benefits{display:flex; flex-direction:column; gap:11px; margin-bottom:26px}
.ob-ben{display:flex; gap:13px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:15px; box-shadow:var(--shadow)}
.ob-ben-ic{width:42px; height:42px; border-radius:11px; background:var(--brand-soft); display:grid;
  place-items:center; font-size:21px; flex:none}
.ob-ben-t{font-size:15px; font-weight:700; color:var(--ink); line-height:1.3}
.ob-ben-d{font-size:13px; color:var(--muted); margin-top:4px; line-height:1.5}
.ob-how-title{font-size:16px; font-weight:700; color:var(--ink); margin-bottom:14px}
.ob-steps{display:flex; flex-direction:column; gap:0; margin-bottom:24px}
.ob-step{display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--ink);
  padding-bottom:16px; position:relative}
.ob-step:not(:last-child)::before{content:""; position:absolute; left:15px; top:32px; bottom:0;
  width:2px; background:var(--border)}
.ob-step-n{width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-size:14px; font-weight:800; flex:none; z-index:1}
.ob-free{text-align:center; font-size:13.5px; font-weight:600; color:var(--teal); margin-bottom:14px}
.ob-start{width:100%; padding:16px; font-size:16.5px}
.bc-count{margin-top:12px; font-size:14px; color:var(--muted)}
.bc-count b{color:var(--brand); font-size:17px}
.bc-hint{margin-top:8px; font-size:12px; color:var(--faint)}
.bc-progress{margin-top:14px}
.bc-prog-num{margin-top:6px; font-size:12.5px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums}
#bcText{min-height:120px; resize:vertical}
.cand-lang{justify-content:flex-end; margin-bottom:10px}
.adm-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.emp-entry{margin-top:22px; text-align:center; font-size:13.5px; font-weight:600; color:var(--brand);
  padding:13px; border:1px dashed var(--border-strong); border-radius:var(--radius-sm); cursor:pointer}

/* interviews admin */
.adm-iv-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:4px 0 10px}
.iv-tile{background:var(--surface-2); border-radius:10px; padding:10px 6px; text-align:center}
.iv-tile b{display:block; font-size:19px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.iv-tile span{font-size:10.5px; color:var(--muted); line-height:1.2; display:block; margin-top:3px}
.iv-tile.b b{color:var(--brand)} .iv-tile.g b{color:var(--teal)} .iv-tile.r b{color:var(--rose)}
.iv-stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.iv-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 8px; text-align:center}
.iv-stat b{display:block; font-size:21px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums}
.iv-stat span{font-size:11px; color:var(--muted); display:block; margin-top:3px; line-height:1.2}
.vac-card.iv-warn{border-color:var(--rose)}

/* candidates panel */
.cand-filters{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 16px}
.cand-chip{padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer}
.cand-chip.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.cand-row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:10px; cursor:pointer}
.cand-row:active{border-color:var(--brand)}
.cand-main{flex:1; min-width:0; font-size:14.5px; color:var(--ink)}
.cand-sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.cand-st{font-size:12px; color:var(--brand); margin-top:4px; font-weight:600}
/* ixcham kandidat qatori: 2 qator, rasm o'lchami o'zgarmaydi.
   Bir ekranga imkon qadar ko'p kandidat sig'ishi uchun. */
.cand-row.tight{padding:8px 12px; margin-bottom:7px; gap:11px}
.cand-row.tight .cand-t{font-size:14px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cand-row.tight .cand-sub{font-size:12px; margin-top:2px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cand-row.tight .cand-stx{color:var(--brand); font-weight:600}
.cand-arrow{color:var(--faint); font-size:22px; flex:none}
.cd-rows{display:flex; flex-direction:column; gap:9px; font-size:13.5px}
.cd-rows > div{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.cd-rows span{color:var(--muted); flex:none}
.cd-rows b{color:var(--ink); text-align:right; word-break:break-word}
.cd-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.cd-actions .vbtn{text-decoration:none; display:inline-block}

/* roadmap bosqich tafsiloti */
.step-hero{text-align:center; padding:18px 16px 22px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:14px; box-shadow:var(--shadow)}
.step-hero.current{border-color:var(--brand)}
.step-hero.done{border-color:var(--teal)}
.step-icon{width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:34px;
  margin:0 auto 12px; background:var(--surface-2); border:2px solid var(--border)}
.step-hero.done .step-icon{background:var(--teal-soft); border-color:var(--teal)}
.step-hero.current .step-icon{background:var(--brand-soft); border-color:var(--brand)}
.step-name{font-size:18px; font-weight:700; color:var(--ink); line-height:1.25; text-wrap:balance}
.step-badge{display:inline-block; margin-top:10px; padding:5px 14px; border-radius:999px; font-size:12.5px;
  font-weight:700; background:var(--surface-2); color:var(--muted)}
.step-badge.done{background:var(--teal-soft); color:var(--teal)}
.step-badge.current{background:var(--brand-soft); color:var(--brand)}
.step-desc{margin:0; font-size:14.5px; color:var(--ink); line-height:1.55}
.step-need{margin-top:16px; font-size:13px; font-weight:700; color:var(--brand)}
.step-items{margin:8px 0 0; padding-left:20px; color:var(--muted); font-size:13.5px; line-height:1.65}
.step-items li{margin:5px 0}

/* info / FAQ */
.info-open-btn{width:100%; margin-top:22px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--brand); font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit}
/* Shartnoma qatori hujjatlar bo'limi tepasida — bo'lim ichidagi alohida
   yo'l, shuning uchun markazlashgan tugma emas, chapga tekislangan qator */
#cdocCtr{display:flex; align-items:center; gap:10px; margin-top:14px; text-align:left;
  background:var(--brand-soft); border-color:transparent}
.cdoc-ctr-t{font-weight:700}
.cdoc-ctr-s{font-size:12.5px; font-weight:600; color:var(--muted)}
.cdoc-ctr-s.ok{color:var(--teal)}
.cdoc-ctr-s.wait{color:var(--amber)}
.cdoc-ctr-go{margin-left:auto; font-size:19px; line-height:1; color:var(--brand)}

.faq-list{display:flex; flex-direction:column; gap:10px}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.faq-q{padding:14px 16px; font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq-arrow{transition:transform .2s; color:var(--faint); flex:none}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0; overflow:hidden; padding:0 16px; font-size:13.5px; color:var(--muted); line-height:1.55;
  transition:max-height .25s ease, padding .25s ease}
.faq-item.open .faq-a{max-height:500px; padding:0 16px 14px}

.hidden{display:none !important}

/* ===== to'lovlar ===== */
.pay-sum{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:14px; box-shadow:var(--shadow)}
.pay-sum:empty{display:none}
.pay-sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:14px; color:var(--muted); padding:3px 0}
.pay-sum-row b{color:var(--ink); font-size:15px; font-weight:700}
.pay-sum-row b.ok{color:var(--teal)}
.pay-bar{height:7px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:11px}
.pay-bar-f{height:100%; border-radius:999px; background:var(--teal); transition:width .4s ease}

.pay-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px; margin-bottom:12px; box-shadow:var(--shadow)}
.pay-card.late{border-color:var(--rose)}
.pay-card-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px}
.pay-card-h b{font-size:15px; color:var(--ink); line-height:1.35}
.pay-amount{font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.3px}
.pay-sub{font-size:13px; color:var(--muted); margin-top:5px}
.pay-due{font-size:12.5px; color:var(--muted); margin-top:6px}
.pay-late{color:var(--rose); font-weight:700}
.pay-note{font-size:12.5px; color:var(--faint); margin-top:6px; line-height:1.5}
.pay-view{margin-top:10px}
.pay-view img{width:100%; border-radius:var(--radius-sm); border:1px solid var(--border)}
.pay-form:not(.hidden){margin-top:12px}
.pay-dash-sum{font-size:12.5px; color:var(--muted); margin-top:9px; grid-column:1/-1}
.vac-badge.rev{background:var(--brand-soft); color:var(--brand)}
.vac-badge.wait{background:var(--surface-2); color:var(--muted)}
.vbtn.pm{background:var(--brand-soft); color:var(--brand); border-color:transparent}
.vbtn.cl{background:var(--teal-soft); color:var(--teal); border-color:transparent}

/* tarif (to'lov rejasi) */
.plan-item-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  font-size:15px; color:var(--ink)}
.plan-item .input{margin-bottom:9px}
.plan-row2{display:flex; gap:9px; align-items:flex-end}
.plan-row2 > *{flex:1; min-width:0}
.plan-auto{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); cursor:pointer}
.plan-auto input{width:19px; height:19px; accent-color:var(--brand)}

/* chat: biriktirma va shablonlar */
.chat-tools{display:flex; gap:8px; padding-top:9px}
.chat-tpl{display:flex; flex-wrap:wrap; gap:7px; padding-top:9px}
.chat-tpl-chip{padding:7px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--ink); font-size:12.5px; font-weight:600; cursor:pointer}
.chat-tpl-chip:active{border-color:var(--brand)}
.msg-file{margin-top:6px}
.msg-file img{width:100%; border-radius:10px; display:block}
.msg-fbtn{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink);
  font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit}
.msg.mine .msg-fbtn{background:rgba(255,255,255,.18); border-color:transparent; color:var(--brand-ink)}
.msg-fname{font-size:12.5px; color:var(--ink); word-break:break-all}
.msg.mine .msg-fname{color:var(--brand-ink)}
.tpl-item-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  font-size:15px; color:var(--ink)}
.tpl-item .input{margin-bottom:9px}
.tpl-item textarea{resize:vertical; min-height:120px; line-height:1.5}

/* ===== veb panelga kirish ===== */
.wl-wrap{max-width:460px; margin:0 auto; text-align:center; padding:4px 0 16px}
/* `.wl-logo` — «noto'g'ri panel» va «Telegramdan oching» ekranlaridagi katta
   emoji (⛔️ / 🔒). Kirish sahifasida logotip yo'q: sahifa bitta ekranga
   sig'ishi kerak, brend esa yuqoridagi sarlavhada allaqachon turibdi. */
.wl-logo{font-size:46px; line-height:1; margin-bottom:12px}
.wl-title{font-size:21px; font-weight:800; color:var(--ink); margin:0 0 3px; letter-spacing:-.3px}
.wl-sub{font-size:13.5px; color:var(--muted); margin-bottom:9px}
.wl-lang{justify-content:center; margin-bottom:11px}
.wl-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px 16px; box-shadow:var(--shadow); text-align:left}
.wl-steps{font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:12px}
.wl-btn{display:block; text-align:center; text-decoration:none}
.wl-code-wrap{margin-top:8px; text-align:center}
.wl-code-lbl{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px}
.wl-code{font-size:28px; font-weight:800; color:var(--brand); letter-spacing:5px;
  font-variant-numeric:tabular-nums; margin-top:4px}
.wl-status{font-size:12.5px; color:var(--muted); text-align:center; margin-top:9px; min-height:16px}
.wl-status.err{color:var(--rose)} .wl-status.ok{color:var(--teal)}
.wl-card .vbtn{display:block; width:100%; margin-top:12px; text-align:center}
.wl-cand{margin-top:8px; font-size:12.5px; color:var(--faint); line-height:1.55}
.wl-cand .vbtn{display:inline-block; margin-top:8px; text-decoration:none}

/* ===================================================================
   VEB (brauzer) MAKETI — body.web + keng ekran.
   Telegram Mini App ichida bu qoidalar ishlamaydi (body.web qo'yilmaydi).
   =================================================================== */
@media (min-width: 900px) {
  body.web .app{max-width:1180px; padding:26px 28px 60px}
  body.web .brand{margin-bottom:24px}
  body.web .brand .logo{width:40px; height:40px}

  /* dashboard — ko'p ustunli */
  body.web #s-admin.active{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap:16px; align-items:start}
  body.web #s-admin > .adm-head,
  body.web #s-admin > #admLogout,
  body.web #s-admin > #admTiles,
  /* Reja kartasi va «Batafsil» ajratgichi — butun kenglikda.
     Reja 1/3 ustunda ~700px cho'zilib, yonidagi kartalar ostida katta
     bo'sh joy qoldirardi. */
  body.web #s-admin > #admPlanCard,
  body.web #s-admin > #admDetailsCard{grid-column:1 / -1}

  /* ish beruvchi paneli — o'sha maket: keng ekranda kartalar ustunlarga yoyiladi,
     aks holda 1180px kenglikda bitta ustun bo'lib cho'zilib ketardi */
  body.web #empDashWrap{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap:16px; align-items:start}
  body.web #empDashWrap > #empTiles{grid-column:1 / -1}
  body.web #empDashWrap > .cal-card.open{grid-column:1 / -1}
  body.web #empDashWrap > .adm-card{margin:0}
  body.web #empDashWrap > .ch-card{margin:0; min-height:196px}

  /* Reja bandlari keng ekranda yonma-yon: to'rt bo'lim — to'rt ustun */
  body.web #admPlanChart{display:grid; gap:0 20px;
    grid-template-columns:repeat(auto-fit, minmax(178px, 1fr))}
  body.web #admPlanChart .pln-band + .pln-band{margin-top:0; padding-top:0;
    border-top:none; border-left:1px solid var(--border); padding-left:22px}
  body.web #admPlanChart .pln-band{padding-top:2px}

  /* «Batafsil tahlil» — karta emas, bo'lim ajratgichi */
  body.web #admDetailsCard{display:flex; align-items:center; gap:14px; margin:6px 0 0}
  body.web #admDetailsCard::before,
  body.web #admDetailsCard::after{content:""; flex:1; height:1px; background:var(--border)}
  body.web #admDetailsCard .btn{width:auto; flex:0 0 auto; padding:7px 18px}

  /* Bir oilaga tegishli kartalar bir xil balandlikda — qatorlar tekis chiqadi */
  body.web #admAppsCard, body.web #admCtrCard, body.web #admPayCard,
  body.web #admDocsCard, body.web #admIvCard, body.web #admVacCard{min-height:196px}
  body.web #admTrendCard, body.web #admFunnelCard,
  body.web #admDonutCard, body.web #admBarsCard{min-height:232px}
  body.web #admIssCard, body.web #admChatCard, body.web #admCandCard,
  body.web #admEmpCard, body.web #admStaffCard, body.web #admBcCard,
  body.web #admExpCard{min-height:64px}
  body.web #s-admin > .adm-card{margin:0}
  body.web #s-admin > .cal-card.open{grid-column:1 / -1}
  body.web #admTiles{grid-template-columns:repeat(4, 1fr)}
  body.web #admLogout{justify-self:end; width:auto}

  /* panellar — kartalar to'ri */
  body.web #vacList, body.web #docsAdminList,
  body.web #appsList, body.web #ivList, body.web #empAdmList,
  body.web #stfList, body.web #cvList, body.web #payList{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
    gap:14px; align-items:start}
  body.web #vacList > *, body.web #docsAdminList > *,
  body.web #appsList > *, body.web #ivList > *, body.web #empAdmList > *,
  body.web #stfList > *, body.web #cvList > *, body.web #payList > *{margin-bottom:0}
  body.web .adm-empty{grid-column:1 / -1}

  /* ro'yxat qatorlari va yozishmalar — keng, lekin bitta ustun */
  body.web #s-candidates, body.web #s-chats{max-width:920px}
  body.web .chat-box{max-height:64vh}
  body.web #s-chat, body.web #s-cand-detail, body.web #s-plan,
  body.web #s-chat-tpl, body.web #s-broadcast{max-width:820px}

  /* pastdagi qotirilgan tugmalar paneli — konteyner kengligida */
  body.web .actions{max-width:1180px; padding-left:28px; padding-right:28px}

  /* kirish ekrani markazda qolsin */
  body.web #s-weblogin.active{display:block}
}

/* brauzerda kontent ekranga yopishmasin */
body.web .app{padding-bottom:60px}

/* QR kirish */
.wl-panel{font-size:12px; font-weight:700; color:var(--brand); margin-bottom:9px;
  text-transform:uppercase; letter-spacing:.7px}
.wl-qr-wrap{text-align:center; margin-bottom:11px}
.wl-qr{display:inline-block; background:#fff; padding:9px; border-radius:12px; line-height:0;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.5)}
.wl-qr svg{width:138px; height:138px; display:block; shape-rendering:crispEdges}
.wl-scan-note{font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:8px}

/* QR yangilanishigacha qolgan vaqt — yumaloq jonli taymer */
.wl-qr-timer{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:10px}
.wl-qr-dial{position:relative; display:block; width:34px; height:34px; flex:none}
.wl-qr-dial svg{width:34px; height:34px; display:block; transform:rotate(-90deg)}
.wl-qr-dial circle{fill:none; stroke-width:3.5; stroke-linecap:round}
.wl-qr-ring-bg{stroke:var(--brand-soft)}
.wl-qr-ring-fg{stroke:var(--brand)}
.wl-qr-sec{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums}
.wl-qr-rot{font-size:11.5px; color:var(--muted); line-height:1.35; text-align:left}
/* oxirgi 10 soniya — ogohlantirish rangi */
.wl-qr-timer.low .wl-qr-ring-fg{stroke:var(--rose)}
.wl-qr-timer.low .wl-qr-ring-bg{stroke:var(--rose-soft)}
.wl-qr-timer.low .wl-qr-sec{color:var(--rose)}
.adm-toolbar{display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px}
.wl-card #wpLinks .vbtn{display:block; width:100%; margin-bottom:9px; text-align:center; text-decoration:none}

/* QR skaner tugmasi — kartochka/sarlavha yonida */
.qr-chip{flex:none; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; width:66px; padding:9px 4px; border-radius:14px; cursor:pointer; font-family:inherit;
  background:var(--brand-soft); border:1px solid transparent; color:var(--brand);
  transition:transform .12s ease, border-color .12s ease}
.qr-chip:active{transform:scale(.94); border-color:var(--brand)}
.qr-chip svg{width:24px; height:24px; display:block}
.qr-chip span{font-size:9px; font-weight:700; letter-spacing:.2px; line-height:1; white-space:nowrap}
.adm-head-r{display:flex; align-items:center; gap:10px}
.adm-head .qr-chip{width:auto; flex-direction:row; padding:7px 11px; gap:6px}
.adm-head .qr-chip span{font-size:11px}
.emp-head .qr-chip{width:auto; flex-direction:row; padding:7px 11px; gap:6px}
.emp-head .qr-chip span{font-size:11px}
.adm-toolbar:empty{display:none}
.uc-ref{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* sarlavha qatori tor ekranda ikkiga bo'linsin */
.adm-head{flex-wrap:wrap}
.adm-head > span{min-width:0}
.adm-head-r{margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
.emp-lang{flex-wrap:wrap}
.emp-head{flex-wrap:wrap}

/* chiqish chipi */
.out-chip{background:var(--rose-soft); color:var(--rose)}
.out-chip:active{border-color:var(--rose)}
/* kartochka tor ekranda buzilmasin: chiplar kerak bo'lsa pastki qatorga tushadi */
.user-card{flex-wrap:wrap}
.uc-info{flex:1 1 150px}
.uc-chips{display:flex; gap:8px; margin-left:auto}
.uc-chips:empty{display:none}
.emp-head-info{flex:1 1 150px; min-width:0}

/* rozilik bandi */
.consent{display:flex; gap:12px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:15px 16px;
  margin-top:18px; cursor:pointer; box-shadow:var(--shadow)}
.consent input{width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--brand)}
.consent b{display:block; font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.4}
.consent-note{display:block; font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:6px}
.consent a{display:inline-block; font-size:12.5px; font-weight:700; color:var(--brand);
  margin-top:7px; text-decoration:none}
.consent.err{border-color:var(--rose)}
#consentErr{display:none; margin-top:8px}
#consentErr.show{display:block; color:var(--rose); font-size:12.5px}

/* ma'lumotni o'chirish */
.dl-warn{font-size:40px; text-align:center; margin-bottom:10px}
.dl-text{font-size:14.5px; color:var(--muted); line-height:1.65; margin:0 0 18px}
.dl-btn{width:100%}
.dl-state{background:var(--rose-soft); color:var(--rose); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:13.5px; font-weight:600; margin-bottom:14px; text-align:center}
.del-req{border-color:var(--rose); color:var(--rose); font-size:14px}

/* eksport */
.exp-list{display:flex; flex-direction:column; gap:2px}
.exp-item{display:flex; align-items:center; gap:12px; padding:11px 2px; cursor:pointer;
  border-bottom:1px solid var(--border)}
.exp-item:last-child{border-bottom:none}
.exp-item input{width:20px; height:20px; flex:none; accent-color:var(--brand)}
.exp-item span{font-size:14.5px; color:var(--ink)}
.exp-state{margin-top:14px; text-align:center; font-size:13.5px; color:var(--muted); min-height:22px}
.exp-state.ok{color:var(--teal)} .exp-state.err{color:var(--rose)}

/* bosqich sanalari */
.uc-next{margin-top:8px; font-size:13px; color:var(--brand); background:var(--brand-soft);
  padding:7px 11px; border-radius:9px; display:inline-block}
.step-ms{background:var(--brand-soft); border-radius:var(--radius-sm); padding:12px 14px; margin:12px 0}
.step-ms-date{font-size:14.5px; color:var(--ink)}
.step-ms-date b{color:var(--brand)}
.step-ms-note{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5}
.step-ms-past{color:var(--rose); font-weight:600}
.ms-row{border-bottom:1px solid var(--border); padding:9px 0}
.ms-row:last-child{border-bottom:none}
.ms-head{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); cursor:pointer}
.ms-row.on .ms-head{color:var(--ink); font-weight:600}
.ms-n{flex:none; width:22px; height:22px; border-radius:50%; background:var(--surface-2);
  color:var(--muted); font-size:11px; font-weight:700; display:grid; place-items:center}
.ms-row.on .ms-n{background:var(--brand); color:var(--brand-ink)}
.ms-val{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--brand); white-space:nowrap}
.ms-edit{padding:10px 0 4px}
.ms-edit .input{margin-bottom:8px}
.ms-note{font-size:12.5px; color:var(--faint); padding-left:31px; margin-top:3px}

/* ichki eslatmalar */
.n-hint{font-size:12px; color:var(--faint); margin:-4px 0 12px}
.n-form{display:flex; gap:9px; align-items:flex-end; margin-bottom:14px}
.n-form textarea{flex:1; resize:vertical; min-height:46px}
.n-form .btn{flex:none; padding:12px 16px}
.n-item{border-left:3px solid var(--brand-soft); padding:8px 0 8px 11px; margin-bottom:10px}
.n-meta{font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:6px}
.n-meta b{color:var(--brand)}
.n-del{margin-left:auto; background:none; border:none; cursor:pointer; font-size:13px; opacity:.55; padding:0}
.n-del:active{opacity:1}
.n-txt{font-size:13.5px; color:var(--ink); line-height:1.45; margin-top:3px;
  white-space:pre-wrap; word-break:break-word}
.n-text{font-size:14px; color:var(--ink); line-height:1.55; white-space:pre-wrap; margin-top:3px}
.guide-chip{background:var(--teal-soft); color:var(--teal); text-decoration:none}
.guide-chip:active{border-color:var(--teal)}

/* ===== kalendar ===== */
/* ---- kalendar: yig'iladigan karta (ikon ko'rinishida, bosilsa ochiladi) ---- */
.cal-card{padding:0; overflow:hidden}
.cal-head{display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px;
  background:none; border:0; margin:0; cursor:pointer; text-align:left; color:inherit;
  font:inherit; -webkit-tap-highlight-color:transparent}
.cal-head:hover{background:var(--surface-2)}
.cal-head:active{transform:scale(.995)}
.cal-ico{flex:none; width:42px; height:42px; border-radius:11px; overflow:hidden;
  display:flex; flex-direction:column; background:var(--surface-2);
  border:1px solid var(--border); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cal-ico-m{background:var(--brand); color:var(--brand-ink); font-size:8.5px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; text-align:center; padding:2.5px 0; line-height:1}
.cal-ico-d{flex:1; display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; color:var(--ink); line-height:1}
.cal-head-b{flex:1; min-width:0}
.cal-head .cal-h{margin:0; font-size:14.5px; line-height:1.25}
.cal-head-s{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}
.cal-badge{flex:none; min-width:21px; height:21px; padding:0 7px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center}
.cal-chev{flex:none; width:22px; height:22px; color:var(--faint);
  display:flex; align-items:center; justify-content:center; transition:transform .28s ease}
.cal-chev svg{width:18px; height:18px}
.cal-card.open .cal-chev{transform:rotate(180deg)}
.cal-card.open .cal-head{border-bottom:1px solid var(--border)}
/* 0fr -> 1fr: balandlikni bilmasdan silliq ochiladi */
.cal-inner{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.cal-card.open .cal-inner{grid-template-rows:1fr}
.cal-wrap{overflow:hidden; min-height:0}
.cal-pad{padding:14px 15px 16px}
@media (prefers-reduced-motion:reduce){
  .cal-inner, .cal-chev{transition:none}
}
.cal-top{display:flex; align-items:center; gap:10px}
.cal-views{display:flex; gap:5px; flex:1}
.cal-views .cal-view{flex:1; text-align:center}
.cal-view{padding:5px 11px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--muted); font-size:12px; font-weight:700; cursor:pointer}
.cal-view.on{background:var(--brand); color:var(--brand-ink); border-color:transparent}
.cal-nav{display:flex; align-items:center; gap:8px; margin:14px 0 10px}
.cal-arrow{width:32px; height:32px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--ink); font-size:18px; cursor:pointer; line-height:1}
.cal-label{flex:1; text-align:center; font-size:15px; font-weight:700; color:var(--ink)}
.cal-today-btn{padding:6px 11px; font-size:12px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-wd{text-align:center; font-size:10.5px; font-weight:700; color:var(--faint); padding:4px 0}
.cal-day-cell{aspect-ratio:1; border-radius:9px; background:var(--surface-2); border:1px solid transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; position:relative; transition:transform .1s}
.cal-day-cell:active{transform:scale(.94)}
.cal-day-cell.out{opacity:.32}
.cal-day-cell.today{border-color:var(--brand)}
.cal-day-cell.sel{background:var(--brand); }
.cal-day-cell.sel .cal-num{color:var(--brand-ink)}
.cal-num{font-size:13px; font-weight:600; color:var(--ink); line-height:1}
.cal-dots{display:flex; gap:2.5px; height:5px}
.cal-dot{width:5px; height:5px; border-radius:50%}
.cal-dot.new{background:var(--brand)} .cal-dot.iv{background:#A855F7}
.cal-dot.due{background:var(--rose)} .cal-dot.paid{background:var(--teal)}
.cal-dot.ms{background:#F59E0B}
.cal-list{display:flex; flex-direction:column; gap:8px}
.cal-strip{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--surface-2); cursor:pointer; border:1px solid transparent}
.cal-strip.today{border-color:var(--brand)}
.cal-strip.sel{background:var(--brand-soft); border-color:var(--brand)}
.cal-strip-d{flex:none; text-align:center; min-width:44px}
.cal-strip-d b{display:block; font-size:19px; font-weight:800; color:var(--ink); line-height:1}
.cal-strip-d span{font-size:10.5px; color:var(--muted)}
.cal-strip-e{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:5px}
.cal-chip{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap}
.cal-chip.new{background:var(--brand-soft); color:var(--brand)}
.cal-chip.iv{background:#A855F722; color:#A855F7}
.cal-chip.due{background:var(--rose-soft); color:var(--rose)}
.cal-chip.paid{background:var(--teal-soft); color:var(--teal)}
.cal-chip.ms{background:#F59E0B22; color:#F59E0B}
.cal-empty{font-size:12px; color:var(--faint)}
.cal-legend{display:flex; flex-wrap:wrap; gap:11px; margin-top:12px; font-size:11px; color:var(--muted)}
.cal-legend i{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px}
.cal-day-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.cal-day-head b{font-size:16px; color:var(--ink)}
.cal-ev{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); cursor:pointer}
.cal-ev:last-child{border-bottom:none}
.cal-ev-i{flex:none; font-size:16px}
.cal-ev-b{flex:1; min-width:0}
.cal-ev-t{font-size:14px; color:var(--ink)}
.cal-ev-s{font-size:12px; color:var(--muted); margin-top:2px}
.cal-day-sum{grid-column:1/-1; text-align:center; font-size:13px; color:var(--muted); padding-top:4px}
.adm-tile-num.b{color:#A855F7} .adm-tile-num.r{color:var(--rose)} .adm-tile-num.g{color:var(--teal)}
.cal-dayview{margin-top:14px; padding-top:12px; border-top:1px solid var(--border)}
.cal-dayview .cal-day-head{margin-bottom:8px}

/* ===== SHARTNOMA ===== */
.ctr-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 15px; margin-bottom:12px; box-shadow:var(--shadow)}
.ctr-card-h{display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom:10px; font-size:15px}
.ctr-row{display:flex; justify-content:space-between; gap:12px; font-size:13.5px;
  color:var(--muted); padding:4px 0}
.ctr-row b{color:var(--ink); font-weight:650; text-align:right}
.ctr-hash{margin-top:9px; padding-top:9px; border-top:1px solid var(--border);
  font-size:11px; color:var(--faint)}
.ctr-hash code{display:block; margin-top:3px; color:var(--muted); word-break:break-all;
  font-size:10.5px; line-height:1.4}
.ctr-hash.sm{margin:8px 0 0; padding-top:6px}
.ctr-card.paper{border-color:var(--brand-soft)}
.ctr-card.paper.verified{border-color:var(--teal)}
.ctr-card.paper.uploaded{border-color:var(--brand)}
.ctr-paper-txt{font-size:13px; color:var(--muted); line-height:1.5}

/* shartnoma matni — o'qishga qulay bo'lishi uchun hujjatga o'xshash */
.ctr-doc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 17px; margin-bottom:14px; box-shadow:var(--shadow);
  font-size:14px; line-height:1.62; color:var(--ink)}
.ctr-doc:empty{display:none}
.ctr-doc h2{font-size:15px; font-weight:700; margin:20px 0 7px; color:var(--ink)}
.ctr-doc h2:first-child{margin-top:0}
.ctr-doc h3{font-size:14px; font-weight:650; margin:14px 0 5px}
.ctr-doc p{margin:0 0 9px}
.ctr-doc ul,.ctr-doc ol{margin:0 0 11px; padding-left:20px}
.ctr-doc li{margin-bottom:5px}
.ctr-doc hr{border:0; border-top:1px solid var(--border); margin:18px 0}
.ctr-doc table{width:100%; border-collapse:collapse; margin:8px 0 12px; font-size:12.5px}
/* word-break:break-word bo'lsa brauzer ustunni "Mudd/at" qilib siqib qo'yadi —
   overflow-wrap faqat chorasiz qolganda so'zni bo'ladi */
.ctr-doc td,.ctr-doc th{border:1px solid var(--border); padding:7px 8px; vertical-align:top;
  text-align:left; overflow-wrap:break-word; word-break:normal; hyphens:none}
.ctr-actions{display:flex; flex-direction:column; gap:10px; margin-bottom:10px}

/* imzo maydoni */
.sign-pad-wrap{position:relative; background:var(--surface); border:1px dashed var(--border-strong);
  border-radius:var(--radius); margin-bottom:10px; overflow:hidden}
#signPad{display:block; width:100%; height:170px; touch-action:none; cursor:crosshair}
.sign-line{position:absolute; left:22px; right:22px; bottom:38px; height:1px;
  background:var(--border-strong); pointer-events:none}
.sign-ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--faint); pointer-events:none}
.sign-ph.hidden{display:none}
.sign-tools{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:14px}
.sign-name{font-size:12px; color:var(--faint)}
.ctr-otp{display:flex; gap:10px; align-items:center; margin:12px 0 4px}
.ctr-otp .vbtn{white-space:nowrap}
.otp-input{flex:1; text-align:center; letter-spacing:.42em; font-size:20px; font-weight:700;
  padding:11px 8px; font-variant-numeric:tabular-nums}
.sign-do{width:100%; padding:14px; font-size:15px; font-weight:650; margin-top:6px}

/* xodim: audit jurnali va skaner */
.ctr-log{margin-top:10px; padding-top:10px; border-top:1px solid var(--border)}
.ctr-log.hidden{display:none}
.ctr-log-h{font-size:12px; font-weight:650; color:var(--muted); margin-bottom:6px}
.ctr-log-row{font-size:11.5px; color:var(--muted); padding:3px 0; word-break:break-word}
.ctr-log-row code{color:var(--faint); font-size:11px}
.ctr-scan{width:100%; border-radius:var(--radius-sm); border:1px solid var(--border)}
.ctr-tpl-area{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  line-height:1.5; min-height:280px; margin-top:10px}
.ctr-warn{margin-top:8px; padding:7px 10px; border-radius:var(--radius-sm);
  background:var(--rose-soft); color:var(--rose); font-size:12px; line-height:1.45}

/* imzolar juftligi (xodim paneli: shartnomani ko'rish) */
.sig-pair{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.sig-box{border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface-2)}
.sig-lbl{font-size:10.5px; font-weight:650; color:var(--muted); padding:6px 8px 0;
  letter-spacing:.02em}
.sig-img{height:78px; display:flex; align-items:center; justify-content:center; padding:4px 8px 8px}
.sig-img img{max-width:100%; max-height:100%; object-fit:contain}
.sig-none{font-size:11px; color:var(--faint)}
.ctr-audit{border-top:1px solid var(--border); padding-top:9px}
.ctr-audit .ctr-row b{font-size:12px; font-weight:600}
.app-sent{margin:8px 0 2px; font-size:11.5px; color:var(--teal); background:var(--teal-soft);
  padding:5px 9px; border-radius:var(--radius-sm); display:inline-block}
.app-wait{margin:8px 0 2px; font-size:11.5px; color:var(--brand); background:var(--brand-soft);
  padding:5px 9px; border-radius:var(--radius-sm); display:inline-block}

/* ===== DASHBOARD DIAGRAMMALARI ===== */
.ch-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:11px 13px 10px; margin-bottom:9px; box-shadow:var(--shadow)}
.ch-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px}
.ch-title{font-size:14px; font-weight:700; color:var(--ink)}
.ch-sub{font-size:11.5px; color:var(--muted)}
.ch-wrap{position:relative}
.ch-wrap svg{display:block; width:100%; height:auto; overflow:visible}
.ch-empty{font-size:12.5px; color:var(--faint); padding:14px 0; text-align:center}

/* o'q va to'r — orqa fonda qolsin */
.ch-grid{stroke:var(--ch-grid); stroke-width:1}
.ch-axis{fill:var(--ch-ink); font-size:9.5px}
.ch-val{fill:var(--ink); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums}
.ch-lbl{fill:var(--muted); font-size:10.5px}

/* legend — 2+ qatorda doim bo'ladi */
.ch-leg{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px}
.ch-leg-i{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted);
  cursor:pointer; border-radius:6px; padding:2px 4px; margin:-2px -4px}
.ch-leg-i:active{background:var(--surface-2)}
.ch-leg-i b{color:var(--ink); font-variant-numeric:tabular-nums}
.ch-dot{width:9px; height:9px; border-radius:3px; flex:0 0 auto}

/* voronka / gorizontal ustunlar */
.ch-fn{display:flex; flex-direction:column; gap:5px}
.ch-fn-row{display:grid; grid-template-columns:98px 1fr 34px; align-items:center; gap:9px;
  cursor:pointer; border-radius:8px; padding:2px 3px; margin:0 -3px}
.ch-fn-row:active{background:var(--surface-2)}
.ch-fn-lbl{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-fn-track{height:14px; background:var(--surface-2); border-radius:5px; overflow:hidden}
/* <i> — inline element: display:block bo'lmasa width/height e'tiborsiz qoladi
   va ustun umuman ko'rinmaydi (fillRectW = 0) */
.ch-fn-fill{display:block; height:100%; border-radius:5px;
  transition:width .5s cubic-bezier(.3,.8,.4,1)}
.ch-fn-val{font-size:11.5px; font-weight:700; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums}

/* bitta qatorli stacked bar */
.ch-stack{display:flex; height:22px; border-radius:6px; overflow:hidden; background:var(--surface-2);
  gap:2px}                                   /* 2px oraliq — segmentlar qo'shilib ketmasin */
.ch-stack i{display:block; height:100%; cursor:pointer; transition:width .5s cubic-bezier(.3,.8,.4,1)}
.ch-stack i:first-child{border-radius:6px 0 0 6px}
.ch-stack i:last-child{border-radius:0 6px 6px 0}

/* o'lchov (meter) */
.ch-meter{height:12px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin:2px 0 8px}
.ch-meter i{display:block; height:100%; border-radius:6px; background:var(--ch3);
  transition:width .6s cubic-bezier(.3,.8,.4,1)}
.ch-meter-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:12px; color:var(--muted)}
.ch-meter-row b{color:var(--ink); font-size:14px; font-variant-numeric:tabular-nums}

/* KPI plitkasidagi sparkline */
.adm-tile-spark{margin-top:4px; height:16px}
.adm-tile-spark svg{display:block; width:100%; height:16px; overflow:visible}

/* tooltip */
.ch-tip{position:absolute; pointer-events:none; z-index:5; background:var(--ink);
  color:var(--surface); font-size:11px; line-height:1.35; padding:5px 8px; border-radius:7px;
  white-space:nowrap; transform:translate(-50%,-125%); opacity:0; transition:opacity .12s}
.ch-tip.on{opacity:1}
.ch-tip b{font-variant-numeric:tabular-nums}


/* ===== DOIRAVIY DIAGRAMMA (qism-butun) ===== */
/* Halqa chapda, legend o'ngda — bitta qatorda. Ilgari halqa markazda 132px
   bo'lib, legend tagida turardi: bitta karta 2 barobar balandlashardi. */
.ch-share{display:flex; align-items:center; gap:12px}
.ch-donut{flex:0 0 auto; display:flex}
.ch-donut svg{width:86px; height:86px; overflow:visible}
.ch-share .ch-leg{flex:1; min-width:0; margin-top:0; gap:3px}
.ch-donut-num{font-size:27px; font-weight:800; fill:var(--ink);
  font-variant-numeric:tabular-nums}
.ch-donut-lbl{font-size:9.5px; fill:var(--muted)}
.ch-arc{cursor:pointer; transition:opacity .15s}
.ch-arc:hover{opacity:.82}
/* legend qatorlari: nom — son — ulush */
.ch-leg-i{display:flex; align-items:center; gap:6px; width:100%; font-size:11.5px;
  padding:1px 3px; margin:0 -3px}
.ch-leg-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-leg-p{color:var(--faint); font-size:11px; font-variant-numeric:tabular-nums;
  min-width:34px; text-align:right}
.ch-leg{flex-direction:column; gap:4px}

/* Eski tashqi legend elementlari endi bo'sh — joy egallamasin */
.adm-legend:empty, .ch-leg:empty{display:none}

/* Kirish sahifasi bitta ekranga sig'sin: pastdagi zaxira bo'shliq va sarlavha
   ostidagi oraliq faqat SHU ekranda qisqartiriladi. `:has()` qo'llab-quvvatlanmasa
   sahifa shunchaki bir oz uzunroq bo'ladi — buziladigan narsa yo'q. */
body:has(#s-weblogin.active) .app{padding-bottom:20px}
body:has(#s-weblogin.active) .brand{margin-bottom:12px}
body:has(#s-weblogin.active) .wl-code{font-size:24px; letter-spacing:4px}

/* ===== Ichki dialog (vacAlert / vacConfirm) =====
   Native alert()/confirm() Telegram webview'ida va sandbox iframe ichida jimgina
   bloklanadi — confirm() darrov false qaytaradi va foydalanuvchi hech narsa ko'rmaydi.
   Shuning uchun Telegram tashqarisidagi barcha dialoglar shu oyna orqali chiqadi. */
.ui-dlg{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(15,23,42,.5)}
.ui-dlg.hidden{display:none}
.ui-dlg-card{width:100%; max-width:340px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:20px 18px 16px; box-shadow:0 18px 44px rgba(15,23,42,.28)}
.ui-dlg-text{color:var(--ink); font-size:15px; line-height:1.45; white-space:pre-wrap;
  word-break:break-word; max-height:52vh; overflow:auto}
.ui-dlg-btns{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.ui-dlg-btn{flex:none; min-width:92px; padding:10px 16px; border:none; border-radius:10px;
  cursor:pointer; font-size:14px; font-weight:700; background:var(--brand); color:#fff}
.ui-dlg-btn:active{transform:scale(.97)}
.ui-dlg-btn.ghost{background:var(--surface-2); color:var(--muted)}
.ui-dlg-btn.hidden{display:none}

/* Hujjatlar → «Hujjat qo'shish» sahifasi */
#cdocAdd .btn{width:100%}
#docsExtraList{margin-top:18px}

/* ===== Oylik rejalar (reja / fakt yonma-yon) ===== */
.pln-row{display:grid; grid-template-columns:1fr auto auto; gap:6px 12px;
  align-items:baseline; padding:11px 0; border-bottom:1px solid var(--border)}
.pln-row:last-child{border-bottom:0}
.pln-lbl{font-size:14.5px; color:var(--ink); font-weight:600}
.pln-unit{color:var(--faint); font-weight:400; font-size:12.5px}
.pln-fact{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.pln-sep{color:var(--faint); font-weight:400}
.pln-pct{font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.pln-inp{width:76px; padding:4px 7px; border:1.5px solid var(--border-strong);
  border-radius:8px; background:var(--surface); color:var(--ink);
  font-size:15px; font-weight:700; font-family:inherit; text-align:right;
  font-variant-numeric:tabular-nums}
.pln-inp:focus{outline:none; border-color:var(--brand)}
.pln-track{grid-column:1 / -1; height:5px; border-radius:3px;
  background:var(--surface-2); overflow:hidden; margin-top:2px}
.pln-track i{display:block; height:100%; border-radius:3px; transition:width .25s ease}

/* Rejalar kartasidagi bo'lim bandlari (dashboard birinchi ekrani) */
.pln-band + .pln-band{margin-top:14px; padding-top:12px; border-top:1px solid var(--border)}
.pln-band-h{font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:4px;
  letter-spacing:.02em}
.adm-details-bar{padding:0; background:none; border:none; box-shadow:none}
.adm-details-bar .btn{width:100%}

/* ============================================================
   SUV EFFEKTI (glass) — FAQAT brauzerdagi keng ekran uchun.
   Telegram ilovasidagi ko'rinishga tegilmaydi: hamma qoida
   `body.web` va `min-width:900px` ichida.
   Ranglar brend palitrasidan: --brand ko'k va --teal feruza.
   ============================================================ */
@media (min-width: 900px){

  /* --- 1. Fon: brend ranglaridagi yumshoq dog'lar, harakatsiz.
         Shisha ko'rinishi uchun ORQADA rang bo'lishi shart — oq fonda
         blur hech narsa ko'rsatmaydi. --- */
  body.web{
    background:
      radial-gradient(1100px 760px at 8% -12%,  rgba(30,99,196,.42), transparent 60%),
      radial-gradient(900px 700px at 96% 4%,    rgba(14,152,145,.36), transparent 58%),
      radial-gradient(820px 640px at 72% 104%,  rgba(30,99,196,.30), transparent 60%),
      linear-gradient(165deg, #DCE7F8 0%, #CFE0F3 45%, #D6EAE8 100%);
    background-attachment:fixed;
  }
  /* DIQQAT: `:not([data-theme="light"])` O'ZI qorong'ilikni bildirmaydi —
     u faqat "foydalanuvchi yorug'ni tanlamagan" degani. Shuning uchun u
     ALBATTA prefers-color-scheme ichida turishi kerak, aks holda qoida
     yorug' mavzuda ham qo'llanadi va matn ko'rinmay qoladi. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body.web{
      background:
        radial-gradient(1100px 760px at 8% -12%,  rgba(92,155,240,.34), transparent 60%),
        radial-gradient(900px 700px at 96% 4%,    rgba(55,199,189,.26), transparent 58%),
        radial-gradient(820px 640px at 72% 104%,  rgba(92,155,240,.22), transparent 60%),
        linear-gradient(165deg, #070C16 0%, #0B1322 45%, #0A1620 100%);
      background-attachment:fixed;
    }
  }
  :root[data-theme="dark"] body.web{
    background:
      radial-gradient(1100px 760px at 8% -12%,  rgba(92,155,240,.34), transparent 60%),
      radial-gradient(900px 700px at 96% 4%,    rgba(55,199,189,.26), transparent 58%),
      radial-gradient(820px 640px at 72% 104%,  rgba(92,155,240,.22), transparent 60%),
      linear-gradient(165deg, #070C16 0%, #0B1322 45%, #0A1620 100%);
    background-attachment:fixed;
  }

  /* --- 2. Shisha yuza: bitta ta'rif, hamma karta shundan oladi --- */
  body.web{
    --glass:rgba(255,255,255,.46);
    --glass-strong:rgba(255,255,255,.62);
    --glass-line:rgba(255,255,255,.68);
    --glass-shadow:0 1px 1px rgba(20,32,58,.05),
                   0 18px 42px -22px rgba(20,42,90,.45),
                   inset 0 1px 0 rgba(255,255,255,.65);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body.web{
      --glass:rgba(22,29,46,.46);
      --glass-strong:rgba(22,29,46,.66);
      --glass-line:rgba(255,255,255,.12);
      --glass-shadow:0 1px 1px rgba(0,0,0,.30),
                     0 20px 48px -24px rgba(0,0,0,.85),
                     inset 0 1px 0 rgba(255,255,255,.08);
    }
  }
  :root[data-theme="dark"] body.web{
    --glass:rgba(22,29,46,.46);
    --glass-strong:rgba(22,29,46,.66);
    --glass-line:rgba(255,255,255,.12);
    --glass-shadow:0 1px 1px rgba(0,0,0,.30),
                   0 20px 48px -24px rgba(0,0,0,.85),
                   inset 0 1px 0 rgba(255,255,255,.08);
  }

  body.web .adm-card, body.web .ch-card, body.web .adm-tile,
  body.web .cal-card, body.web .cmp-card, body.web .vac-form,
  body.web .iv-stat, body.web .adm-empty{
    background:var(--glass);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
    border:1px solid var(--glass-line);
    box-shadow:var(--glass-shadow);
  }

  /* Bosiladigan kartalar — sichqoncha tegsa yuza ko'tariladi */
  body.web .adm-vac-card{transition:transform .18s ease, box-shadow .18s ease,
    background .18s ease, border-color .18s ease}
  body.web .adm-vac-card:hover{
    transform:translateY(-2px);
    background:var(--glass-strong);
    border-color:rgba(30,99,196,.34);
    box-shadow:0 2px 2px rgba(20,32,58,.05),
               0 26px 52px -24px rgba(30,99,196,.60),
               inset 0 1px 0 rgba(255,255,255,.7);
  }
  body.web .adm-tile.tap{transition:transform .18s ease, box-shadow .18s ease}
  body.web .adm-tile.tap:hover{transform:translateY(-2px);
    box-shadow:0 22px 44px -24px rgba(30,99,196,.60), inset 0 1px 0 rgba(255,255,255,.7)}

  /* --- 3. Navigatsiya: pastdan CHAPGA, suzuvchi shisha ustun --- */
  body.web .tabbar{
    top:16px; bottom:16px; left:16px; right:auto; width:80px;
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:4px;
    padding:14px 9px; border-radius:26px;
    border:1px solid var(--glass-line); border-top:1px solid var(--glass-line);
    background:var(--glass-strong);
    -webkit-backdrop-filter:blur(30px) saturate(190%);
    backdrop-filter:blur(30px) saturate(190%);
    box-shadow:0 2px 2px rgba(20,32,58,.04),
               0 26px 64px -28px rgba(20,42,90,.60),
               inset 0 1px 0 rgba(255,255,255,.70);
    overflow-y:auto; overflow-x:hidden;
  }
  body.web .tab-item{
    flex:0 0 auto; min-width:0; width:100%; padding:10px 2px 9px;
    border-radius:16px; gap:4px;
    transition:background .16s ease, color .16s ease;
  }
  body.web .tab-item:hover{background:rgba(30,99,196,.10); color:var(--brand)}
  body.web .tab-item.on{background:rgba(30,99,196,.16); color:var(--brand)}
  body.web .tab-ico{font-size:20px}
  body.web .tab-lbl{font-size:9.5px; letter-spacing:.01em}
  body.web .tab-badge{left:14px}

  /* Kontent ustun ostida qolmasin — joyni tanadan beramiz, markazlash saqlanadi */
  body.web.has-tabbar{padding-left:112px}
  body.web.has-tabbar .app{padding-bottom:48px}

  /* --- 4. Kartalar ochilishi: pastdan yumshoq ko'tarilib chiqadi --- */
  @keyframes vp-rise{
    from{opacity:0; transform:translateY(12px) scale(.985)}
    to  {opacity:1; transform:none}
  }
  body.web #s-admin.active > *{animation:vp-rise .5s cubic-bezier(.22,.8,.28,1) backwards}
  body.web #s-admin.active > *:nth-child(1){animation-delay:.00s}
  body.web #s-admin.active > *:nth-child(2){animation-delay:.03s}
  body.web #s-admin.active > *:nth-child(3){animation-delay:.06s}
  body.web #s-admin.active > *:nth-child(4){animation-delay:.09s}
  body.web #s-admin.active > *:nth-child(5){animation-delay:.12s}
  body.web #s-admin.active > *:nth-child(6){animation-delay:.15s}
  body.web #s-admin.active > *:nth-child(7){animation-delay:.18s}
  body.web #s-admin.active > *:nth-child(n+8){animation-delay:.21s}

  @media (prefers-reduced-motion: reduce){
    body.web #s-admin.active > *{animation:none}
    body.web .adm-vac-card, body.web .adm-tile.tap{transition:none}
    body.web .adm-vac-card:hover, body.web .adm-tile.tap:hover{transform:none}
  }
}

/* ============================================================
   UCH USTUNLI TUZILMA (faqat brauzer)
   Chapda navigatsiya · o'rtada kontent · o'ngda kalendar va eksport
   ============================================================ */
@media (min-width: 900px){
  /* Navigatsiya endi suzmaydi — to'liq balandlikda, chekkaga tegib turadi */
  body.web .tabbar{
    top:0; bottom:0; left:0; width:96px;
    border-radius:0; padding:16px 10px;
    border:none; border-right:1px solid var(--glass-line);
    box-shadow:12px 0 40px -28px rgba(20,42,90,.55);
  }
  body.web.has-tabbar{padding-left:96px}
  body.web .tab-item{padding:11px 2px 10px}
}

@media (min-width: 1200px){
  /* O'ng ustun: kalendar tepada, eksport eng pastda */
  body.web .web-right{
    position:fixed; top:0; right:0; bottom:0; width:344px; z-index:55;
    display:flex; flex-direction:column; gap:14px;
    padding:16px 16px 18px; overflow-y:auto;
    border-left:1px solid var(--glass-line);
    background:var(--glass);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
    box-shadow:-12px 0 40px -28px rgba(20,42,90,.55);
  }
  body.web .web-right.hidden{display:none}
  body.web.has-right{padding-right:344px}

  /* Kalendar ochiq turadi va ustunning yarmidan pastrog'ini egallaydi */
  body.web .web-right > #calAdm{flex:0 0 auto; min-height:56vh; margin:0}
  body.web .web-right > #calAdm .cal-inner{grid-template-rows:1fr}

  /* Eksport — pastda, kattaroq va ko'zga tashlanadigan */
  body.web .web-right > #admExpCard{
    margin:auto 0 0; padding:20px 18px; border-radius:20px;
    background:linear-gradient(160deg, rgba(30,99,196,.16), rgba(14,152,145,.14));
    border:1px solid rgba(30,99,196,.30);
    text-align:center; display:block;
  }
  body.web .web-right > #admExpCard .adm-card-title{
    font-size:17px; margin-bottom:6px; display:block; text-align:center}
  body.web .web-right > #admExpCard .adm-vac-summary{
    font-size:13px; color:var(--muted); text-align:center; margin:0 0 2px}
  body.web .web-right > #admExpCard::after{display:none}
  body.web .web-right > #admExpCard:hover{
    background:linear-gradient(160deg, rgba(30,99,196,.24), rgba(14,152,145,.20));
    border-color:rgba(30,99,196,.48)}

  /* Kontent o'rtada emas, chaproqda — o'ng ustunga joy beriladi */
  body.web.has-right .app{max-width:1120px; margin-left:0; margin-right:auto;
    padding-left:34px; padding-right:26px}

}

/* --- Chap panel o'ng ustun bilan BIR XIL enda va elementlar gorizontal
       qator shaklida: belgi chapda, matn yonida.
       1440px dan boshlanadi: ikkita 344px yon panel undan tor oynada
       kontentga joy qoldirmaydi. --- */
@media (min-width: 1440px){
  body.web.has-tabbar{padding-left:344px}
  body.web .tabbar{width:344px; padding:16px 12px}
  body.web .tab-item{
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:13px; padding:12px 14px; border-radius:14px; text-align:left;
  }
  body.web .tab-ico{font-size:21px; flex:0 0 auto; width:26px; text-align:center}
  body.web .tab-lbl{font-size:14.5px; font-weight:600; letter-spacing:0;
    max-width:none; text-align:left}
  body.web .tab-item.on .tab-lbl{font-weight:700}
  body.web .tab-badge{position:static; margin-left:auto; top:auto; left:auto}
}

/* Fon animatsiyasi (neyron to'r) — kontentdan orqada, hodisalarni ushlamaydi.
   Shisha kartalar aynan shu qatlamni loyqalatadi. */
.bg-fx{display:none}
@media (min-width: 900px){
  /* DIQQAT: z-index:-1 ishlamadi — kanvas sahifa foni ostida qolib ketdi.
     Shuning uchun kanvas 0-qatlamda, kontent esa undan yuqorida. */
  body.web .bg-fx{
    display:block; position:fixed; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
  }
  body.web .app{position:relative; z-index:1}
}
@media (prefers-reduced-motion: reduce){
  body.web .bg-fx{display:none}
}

/* ===================================================================
   CRM — ish quroli ko'rinishi (brauzer). `body.crm-on` yoqilganda
   eski panel ekranlari yashiriladi, CRM karkasi ochiladi.
   Ranglar yuqoridagi tokenlardan olinadi — alohida palitra YO'Q,
   shuning uchun tungi rejim ham avtomat ishlaydi.
   =================================================================== */
.crm-root{display:none}
/* CRM butun ekranni EGALLAYDI: `position:fixed` bo'lgani uchun ostidagi
   sahifadan hech narsa ko'rinmaydi va ikkita scroll paydo bo'lmaydi.
   Ilgari u oddiy oqimda turardi — o'shanda ustida qolgan biror element
   (masalan `.app` o'rami) CRM'ni ekrandan pastga surib yuborardi.
   Balandlik uchun `dvh`: mobil brauzerda manzil paneli yig'ilganda
   `vh` o'zgarib, pastdan bo'sh joy chiqib qolardi. */
body.crm-on .crm-root{position:fixed; inset:0; z-index:40; display:grid;
  grid-template-columns:auto 1fr; height:100vh; height:100dvh; overflow:hidden}
body.crm-on{overflow:hidden}
/* Eski panel butunlay yashiriladi: `.app` — Mini App o'rami (sarlavha +
   43 ta ekran), u ochiq qolsa CRM undan KEYIN chizilib, ekrandan pastga
   tushib ketardi (birinchi sinovda aynan shunday bo'ldi). `.bg-fx` — bezak
   kanvasi, ish qurolida keraksiz va GPU ni bekorga band qiladi. */
body.crm-on .app, body.crm-on .bg-fx, body.crm-on .actions,
body.crm-on .tabbar, body.crm-on .web-right{display:none!important}
/* Keng ekranda `body.web` ga bezakli gradient tushadi (uchta radial dog').
   Ish qurolida fon TEKIS bo'lishi kerak: gradient jadval qatorlari ostidan
   o'tib o'qishni qiyinlashtiradi va zichlik hissini buzadi.
   DIQQAT: gradientni tungi rejimda `:root:not([data-theme="light"]) body.web`
   qo'yadi — aniqligi yuqori (0,3,1). Shuning uchun bekor qilish ham SHU
   uch shaklda takrorlanadi, aks holda oddiy `body.crm-on` unga yeta olmaydi. */
body.crm-on{background:var(--bg)}
@media (min-width:900px){
  body.web.crm-on,
  :root:not([data-theme="light"]) body.web.crm-on,
  :root[data-theme="dark"] body.web.crm-on{background:var(--bg); background-attachment:scroll}
}
body.crm-locked{overflow:hidden}

/* ---- yon panel ---- */
.crm-side{height:100%; width:232px;
  display:flex; flex-direction:column; gap:2px; padding:12px 10px;
  background:var(--surface); border-right:1px solid var(--border); transition:width .16s ease}
body.crm-collapsed .crm-side{width:60px}
.crm-side-top{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 6px 12px}
.crm-logo{display:flex; align-items:center; gap:9px; min-width:0}
.crm-logo-mark{display:grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:8px; background:var(--brand); color:var(--brand-ink); font:700 11px/1 system-ui}
.crm-logo-txt{font:600 13.5px/1.2 system-ui; color:var(--ink); white-space:nowrap; overflow:hidden}
.crm-collapse{border:0; background:none; color:var(--faint); cursor:pointer; font-size:13px; padding:4px}
.crm-collapse:hover{color:var(--ink)}
body.crm-collapsed .crm-logo-txt, body.crm-collapsed .crm-nav-lbl,
body.crm-collapsed .crm-user-txt{display:none}

.crm-nav{display:flex; flex-direction:column; gap:1px; flex:1; overflow:auto}
.crm-nav-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px;
  border:0; border-radius:9px; background:none; color:var(--muted); cursor:pointer;
  font:500 13.5px/1.2 system-ui; text-align:left}
.crm-nav-item:hover{background:var(--surface-2); color:var(--ink)}
.crm-nav-item.is-active{background:var(--brand-soft); color:var(--brand); font-weight:600}
.crm-nav-ico{width:18px; text-align:center; font-size:14px; flex:none}
.crm-side-foot{border-top:1px solid var(--border); padding-top:8px}
.crm-user{display:flex; align-items:center; gap:9px; width:100%; padding:6px;
  border:0; border-radius:9px; background:none; cursor:pointer; text-align:left}
.crm-user:hover{background:var(--surface-2)}
.crm-ava{display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--surface-2); color:var(--ink); font:600 11px/1 system-ui}
.crm-user-txt{display:flex; flex-direction:column; min-width:0}
.crm-user-name{font:600 12.5px/1.3 system-ui; color:var(--ink); overflow:hidden; text-overflow:ellipsis}
.crm-user-role{font:400 11px/1.3 system-ui; color:var(--faint)}

/* ---- topbar ---- */
/* Faqat ish maydoni suriladi — yon panel va topbar joyida qoladi. */
.crm-main{display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden}
.crm-top{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  height:48px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border)}
.crm-burger{display:none; border:0; background:none; font-size:17px; color:var(--ink); cursor:pointer}
.crm-search{display:flex; align-items:center; gap:8px; flex:1; max-width:420px; height:30px;
  padding:0 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg);
  color:var(--faint); font:400 13px/1 system-ui; cursor:pointer}
.crm-search:hover{border-color:var(--border-strong)}
.crm-search-txt{flex:1; text-align:left}
.crm-kbd{font:500 10.5px/1 system-ui; color:var(--faint); border:1px solid var(--border);
  border-radius:5px; padding:3px 5px; background:var(--surface)}
.crm-top-right{margin-left:auto; display:flex; align-items:center; gap:4px}
.crm-icon-btn{position:relative; display:grid; place-items:center; width:30px; height:30px;
  border:0; border-radius:8px; background:none; color:var(--muted); font-size:14px; cursor:pointer}
.crm-icon-btn:hover{background:var(--surface-2); color:var(--ink)}
.crm-bell-dot{position:absolute; top:1px; right:0; min-width:15px; height:15px; padding:0 4px;
  border-radius:99px; background:var(--rose); color:#fff; font:700 9.5px/15px system-ui; text-align:center}
.crm-body{flex:1; padding:16px; min-width:0; overflow:auto}

/* ---- zich jadval ---- */
.crm-table{display:flex; flex-direction:column; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface); overflow:hidden}
.crm-tscroll{overflow:auto}
.crm-tr{display:grid; align-items:center; gap:10px; padding:0 12px;
  border-bottom:1px solid var(--border); min-height:42px}
.crm-tr--head{position:sticky; top:0; z-index:2; min-height:36px;
  background:var(--surface-2); border-bottom:1px solid var(--border-strong)}
.crm-tbody .crm-tr{cursor:pointer}
.crm-tbody .crm-tr:hover{background:var(--surface-2)}
.crm-tbody .crm-tr:last-child{border-bottom:0}
.crm-th{display:flex; align-items:center; gap:5px; font:600 11.5px/1.2 system-ui;
  color:var(--muted); text-transform:uppercase; letter-spacing:.03em; user-select:none}
.crm-th.is-sortable{cursor:pointer}
.crm-th.is-sortable:hover{color:var(--ink)}
.crm-th.is-active{color:var(--brand)}
.crm-sort{font-size:9px; opacity:.7}
.crm-td{font:400 13px/1.35 system-ui; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-td.is-muted{color:var(--muted)}
.crm-tfoot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; border-top:1px solid var(--border); background:var(--surface)}
.crm-tcount{font:400 12px/1 system-ui; color:var(--faint)}
.crm-pager{display:flex; align-items:center; gap:6px}
.crm-page{font:500 12px/1 system-ui; color:var(--muted); min-width:52px; text-align:center}

/* ---- badge ---- */
.crm-badge{display:inline-block; padding:2px 8px; border-radius:99px;
  font:600 11.5px/1.5 system-ui; white-space:nowrap}
.crm-badge--slate{background:var(--surface-2); color:var(--muted)}
.crm-badge--brand{background:var(--brand-soft); color:var(--brand)}
.crm-badge--teal{background:var(--teal-soft); color:var(--teal)}
.crm-badge--amber{background:var(--amber-soft); color:var(--amber)}
.crm-badge--rose{background:var(--rose-soft); color:var(--rose)}

/* ---- tugmalar ---- */
.crm-btn{height:30px; padding:0 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink); font:500 12.5px/1 system-ui; cursor:pointer}
.crm-btn:hover{border-color:var(--border-strong)}
.crm-btn:disabled{opacity:.45; cursor:default}
.crm-btn--primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.crm-btn--ghost{border-color:transparent; background:none; color:var(--muted)}
.crm-btn--danger{background:var(--rose); border-color:var(--rose); color:#fff}
.crm-muted{color:var(--muted); font:400 13px/1.5 system-ui}

/* ---- holatlar ---- */
.crm-state{display:flex; flex-direction:column; align-items:center; gap:8px; padding:56px 20px; text-align:center}
.crm-state-ico{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--surface-2); color:var(--faint); font-size:16px}
.crm-state-title{font:600 14px/1.3 system-ui; color:var(--ink)}
.crm-state-hint{font:400 13px/1.5 system-ui; color:var(--muted); max-width:380px}
.crm-state--err .crm-state-ico{background:var(--rose-soft); color:var(--rose)}
.crm-skel{padding:6px 12px}
.crm-skel-row{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--border)}
.crm-skel-cell{flex:1; height:11px; border-radius:5px; background:var(--surface-2);
  animation:crmPulse 1.25s ease-in-out infinite}
.crm-skel-row:nth-child(2n) .crm-skel-cell{animation-delay:.15s}
@keyframes crmPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- sheet / modal ---- */
.crm-layer{position:relative; z-index:60}
.crm-backdrop{position:fixed; inset:0; background:rgba(10,16,30,.42); backdrop-filter:blur(1.5px)}
.crm-modal-wrap{position:fixed; inset:0; z-index:60}
.crm-sheet{position:absolute; top:0; right:0; bottom:0; width:min(480px,100%);
  display:flex; flex-direction:column; background:var(--surface);
  border-left:1px solid var(--border); box-shadow:var(--shadow); animation:crmSlide .16s ease}
.crm-sheet--wide{width:min(760px,100%)}
@keyframes crmSlide{from{transform:translateX(18px); opacity:.6}to{transform:none; opacity:1}}
.crm-sheet-top{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border)}
.crm-sheet-title{font:600 14.5px/1.3 system-ui; color:var(--ink)}
.crm-sheet-body{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.crm-sheet-foot{display:flex; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--border)}
.crm-menu-item{width:100%; padding:10px 12px; border:0; border-radius:9px; background:none;
  color:var(--ink); font:500 13.5px/1 system-ui; text-align:left; cursor:pointer}
.crm-menu-item:hover{background:var(--surface-2)}
.crm-menu-item.is-danger{color:var(--rose)}

/* ---- Cmd+K ---- */
.crm-cmd-wrap{position:fixed; inset:0; z-index:70; display:grid; place-items:start center; padding-top:12vh}
.crm-cmd{position:relative; width:min(560px,92vw); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.crm-cmd-top{display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--border)}
.crm-cmd-k{color:var(--faint); font-size:14px}
.crm-cmd-input{flex:1; border:0; outline:0; background:none; color:var(--ink); font:400 14px/1 system-ui}
.crm-cmd-list{max-height:min(380px,52vh); overflow:auto; padding:6px}
.crm-cmd-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  border:0; border-radius:8px; background:none; cursor:pointer; text-align:left}
.crm-cmd-item.is-cur{background:var(--brand-soft)}
.crm-cmd-ico{width:16px; text-align:center; color:var(--muted); font-size:12.5px}
.crm-cmd-lbl{flex:1; font:500 13.5px/1.3 system-ui; color:var(--ink)}
.crm-cmd-hint{font:400 11.5px/1 system-ui; color:var(--faint)}
.crm-cmd-none{padding:18px; text-align:center; color:var(--faint); font:400 13px/1 system-ui}

/* ---- bildirishnomalar ---- */
.crm-notif{display:flex; flex-direction:column; gap:3px; width:100%; padding:10px 11px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface); text-align:left; cursor:pointer}
.crm-notif:hover{border-color:var(--border-strong)}
.crm-notif.is-unread{border-left:2px solid var(--brand); background:var(--brand-soft)}
.crm-notif-title{font:600 13px/1.35 system-ui; color:var(--ink)}
.crm-notif-body{font:400 12.5px/1.4 system-ui; color:var(--muted)}
.crm-notif-when{font:400 11px/1 system-ui; color:var(--faint)}
.crm-mark-all{align-self:flex-end}

/* ---- mobil: yon panel tortmaga, jadval kartochkaga ---- */
.crm-scrim{display:none}
@media (max-width:860px){
  body.crm-on .crm-root{grid-template-columns:1fr}
  .crm-side{position:fixed; z-index:50; left:0; top:0; height:100%; width:250px;
    transform:translateX(-100%); transition:transform .18s ease}
  body.crm-drawer .crm-side{transform:none; box-shadow:var(--shadow)}
  body.crm-drawer .crm-scrim{display:block; position:fixed; inset:0; z-index:45; background:rgba(10,16,30,.4)}
  .crm-burger{display:block}
  .crm-body{padding:12px}
  .crm-tscroll{max-height:none}
  .crm-tr--head{display:none}
  .crm-tbody .crm-tr{display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    padding:11px 12px; min-height:0}
  .crm-td{white-space:normal; width:100%; display:flex; gap:8px; justify-content:space-between}
  .crm-td::before{content:attr(data-label); color:var(--faint); font:500 11px/1.5 system-ui; flex:none}
  .crm-td[data-card="title"]{font:600 14px/1.35 system-ui}
  .crm-td[data-card="title"]::before{display:none}
  .crm-sheet{width:100%; border-left:0}
}

/* ===== CRM: asboblar paneli, Kanban, kartochka ===== */
.crm-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.crm-toolbar-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.crm-input{height:30px; padding:0 9px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink); font:400 13px/1 system-ui}
.crm-input:focus{outline:0; border-color:var(--brand)}
.crm-search-input{min-width:230px}
.crm-f{max-width:190px; color:var(--muted)}
.crm-seg{display:inline-flex; padding:2px; border:1px solid var(--border); border-radius:9px; background:var(--surface)}
.crm-seg-btn{height:24px; padding:0 10px; border:0; border-radius:7px; background:none;
  color:var(--muted); font:500 12.5px/1 system-ui; cursor:pointer}
.crm-seg-btn.is-active{background:var(--brand-soft); color:var(--brand); font-weight:600}
.crm-area{min-height:200px}

/* ---- Kanban ---- */
.crm-kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr);
  gap:10px; align-items:start; overflow-x:auto; padding-bottom:6px}
.crm-kcol{display:flex; flex-direction:column; gap:8px; padding:9px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2);
  min-height:120px; transition:background .12s ease, border-color .12s ease}
.crm-kcol.is-over{border-color:var(--brand); background:var(--brand-soft)}
.crm-kcol-top{display:flex; align-items:center; justify-content:space-between; gap:6px}
.crm-kcount{font:600 11.5px/1 system-ui; color:var(--faint)}
.crm-kcol-list{display:flex; flex-direction:column; gap:6px; min-height:36px}
.crm-kcard{display:flex; flex-direction:column; gap:3px; padding:9px 10px; cursor:grab;
  border:1px solid var(--border); border-radius:9px; background:var(--surface)}
.crm-kcard:hover{border-color:var(--border-strong)}
.crm-kcard.is-dragging{opacity:.45; cursor:grabbing}
.crm-kcard-name{font:600 13px/1.3 system-ui; color:var(--ink)}
.crm-kcard-sub{font:400 12px/1.3 system-ui; color:var(--muted)}
.crm-kcard-foot{display:flex; gap:6px; justify-content:space-between; margin-top:2px;
  font:400 11px/1.3 system-ui; color:var(--faint)}
.crm-kempty{padding:10px 4px; text-align:center; font:400 12px/1 system-ui; color:var(--faint)}
.crm-kmore{padding:6px 4px; text-align:center; font:500 11.5px/1 system-ui; color:var(--brand)}

/* ---- kartochka maydonlari ---- */
.crm-lc-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.crm-lc-name{font:600 16px/1.3 system-ui; color:var(--ink)}
.crm-field{display:flex; flex-direction:column; gap:4px}
.crm-field-lbl{font:500 11.5px/1 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
.crm-field .crm-input{height:32px; width:100%}
.crm-input.is-saving{border-color:var(--amber)}
.crm-input.is-saved{border-color:var(--teal)}
.crm-lc-static{font:400 13.5px/1.4 system-ui; color:var(--muted); padding:6px 0}
.crm-lc-sep{margin-top:6px; padding-top:10px; border-top:1px solid var(--border);
  font:600 11.5px/1 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}

/* ---- timeline ---- */
.crm-tl{display:flex; flex-direction:column; gap:2px}
.crm-tl-row{display:flex; gap:9px; padding:7px 0; border-bottom:1px solid var(--border)}
.crm-tl-row:last-child{border-bottom:0}
.crm-tl-ico{display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:6px;
  background:var(--surface-2); color:var(--muted); font-size:11px}
.crm-tl-title{font:400 13px/1.4 system-ui; color:var(--ink)}
.crm-tl-meta{font:400 11.5px/1.4 system-ui; color:var(--faint)}

/* ---- lid kartochkasi: butun ekran, chapda ma'lumot, o'ngda tarix ---- */
.crm-sheet--full{left:0; width:100%; border-left:0; animation:crmFade .14s ease}
/* Kartochka ochiq: keng ekranda yon panel YIG'ILGAN holda (faqat belgilar)
   ko'rinib qoladi — boshqa bo'limga bir bosishda o'tiladi, kartochka qolgan
   joyni egallaydi. Saqlangan «yig'ish» tanlovi o'zgarmaydi: kartochka
   yopilgach panel avvalgi kengligiga qaytadi. Telefonda panel — tortma,
   u yerda kartochka avvalgidek butun ekran. */
@media (min-width:861px){
  body.crm-card-full .crm-side{width:60px}
  body.crm-card-full .crm-logo-txt, body.crm-card-full .crm-nav-lbl,
  body.crm-card-full .crm-user-txt, body.crm-card-full .crm-collapse{display:none}
  .crm-modal-wrap.is-full{left:60px}
  /* Qoraytirish odatda `fixed; inset:0` — butun ekranni qoplaydi va yig'ilgan
     panelni ham bosib bo'lmas qilib qo'yardi. Bu yerda u faqat o'ram ichida. */
  .crm-modal-wrap.is-full .crm-backdrop{position:absolute}
}
@keyframes crmFade{from{opacity:.4}to{opacity:1}}
.crm-sheet-body.is-full{padding:0; gap:0; overflow:hidden}
.crm-lcx{display:flex; flex-direction:column; height:100%; min-height:0}
.crm-lcx-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:14px 20px 12px; border-bottom:1px solid var(--border); background:var(--surface)}
.crm-lcx-id{flex:1 1 260px; min-width:0}
.crm-lcx-name{font:650 19px/1.25 system-ui; color:var(--ink); overflow-wrap:anywhere}
.crm-lcx-sub{margin-top:3px; font:400 12.5px/1.4 system-ui; color:var(--faint)}
.crm-lcx-actions{display:flex; flex-wrap:wrap; gap:6px}
.crm-lcx-actions .crm-btn{display:inline-flex; align-items:center; gap:5px; text-decoration:none; white-space:nowrap}

/* voronka: strelka shaklidagi bosqichlar */
.crm-pipe{flex:1 0 100%; display:flex; gap:3px; overflow-x:auto; padding-bottom:2px}
.crm-pipe-step{flex:1 1 0; min-width:96px; height:30px; padding:0 16px; border:0;
  background:var(--surface-2); color:var(--muted); font:600 12px/1 system-ui; white-space:nowrap; cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%)}
.crm-pipe-step:first-child{border-radius:8px 0 0 8px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%)}
.crm-pipe-step:hover{color:var(--ink)}
.crm-pipe-step.is-past{background:var(--brand-soft); color:var(--brand)}
.crm-pipe-step.is-cur{background:var(--brand); color:var(--brand-ink)}
.crm-pipe-step.is-won.is-cur{background:var(--teal); color:#fff}
.crm-pipe-lost{flex:0 0 auto; min-width:0; margin-left:10px; border-radius:8px; clip-path:none}
.crm-pipe-lost:hover{color:var(--rose)}
.crm-pipe-lost.is-cur{background:var(--rose); color:#fff}

.crm-lcx-tabs{display:none}
.crm-lcx-cols{flex:1; min-height:0; display:grid; grid-template-columns:minmax(320px,420px) minmax(0,1fr)}
.crm-lcx-left{display:flex; flex-direction:column; gap:14px; overflow:auto;
  padding:16px 18px 28px; border-right:1px solid var(--border); background:var(--surface)}
.crm-lcx-right{display:flex; flex-direction:column; gap:12px; overflow:auto; min-width:0;
  padding:16px 24px 28px; background:var(--bg)}
.crm-lcx-right > *{width:100%; max-width:860px}

.crm-lcx-sec{display:flex; flex-direction:column; gap:2px}
.crm-lcx-sec + .crm-lcx-sec{padding-top:14px; border-top:1px solid var(--border)}
.crm-lcx-sec-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.crm-lcx-sec-title{font:600 11.5px/1 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.crm-lcx-row{display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:8px; min-height:32px}
.crm-lcx-lbl{font:400 12.5px/1.3 system-ui; color:var(--muted)}
.crm-lcx-val{padding:5px 0; font:400 13px/1.45 system-ui; color:var(--ink); overflow-wrap:anywhere}
/* Maydon ko'rinishda matndek turadi, ustiga kelganda ramka chiqadi. */
.crm-lcx-row .crm-input{width:calc(100% + 9px); margin-left:-9px; border-color:transparent; background:transparent}
.crm-lcx-row .crm-input:hover{border-color:var(--border)}
.crm-lcx-row .crm-input:focus{border-color:var(--brand); background:var(--surface)}
.crm-lcx-row .crm-input.is-saving{border-color:var(--amber)}
.crm-lcx-row .crm-input.is-saved{border-color:var(--teal)}
.crm-lcx-empty{padding:4px 0; font:400 12.5px/1.4 system-ui; color:var(--faint)}
.crm-lcx-list{display:flex; flex-direction:column; gap:6px}
.crm-lcx-item{display:flex; flex-direction:column; gap:3px; width:100%; padding:8px 10px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface); text-align:left; cursor:pointer; font:inherit}
.crm-lcx-item:hover{border-color:var(--border-strong)}
.crm-lcx-item.is-late{box-shadow:inset 2px 0 0 var(--rose)}
.crm-lcx-item-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.crm-lcx-item-title{font:500 13px/1.35 system-ui; color:var(--ink)}
.crm-lcx-item-meta{font:400 11.5px/1.3 system-ui; color:var(--faint)}
.crm-lcx-money{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px;
  padding:5px 0; border-bottom:1px dashed var(--border)}
.crm-lcx-money-title{font:400 12.5px/1.35 system-ui; color:var(--ink)}
.crm-lcx-money-sum{font:600 12.5px/1 system-ui; color:var(--ink); white-space:nowrap}
.crm-lcx-money-total{display:flex; justify-content:space-between; gap:8px; padding-top:4px;
  font:500 12px/1.3 system-ui; color:var(--muted)}

/* izoh yozish joyi */
.crm-note-box{display:flex; flex-direction:column; gap:6px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
.crm-note-box:focus-within{border-color:var(--brand)}
.crm-note-box .crm-textarea{width:100%; min-height:56px; padding:2px 0; border:0; background:none}
.crm-note-foot{display:flex; align-items:center; justify-content:space-between; gap:8px}
.crm-note-hint{font:400 11.5px/1.3 system-ui; color:var(--faint)}

/* lenta filtrlari va yozuvlar */
.crm-tlf{display:flex; flex-wrap:wrap; gap:6px}
.crm-tlf-chip{height:26px; padding:0 11px; border:1px solid var(--border); border-radius:99px;
  background:var(--surface); color:var(--muted); font:500 12px/1 system-ui; cursor:pointer}
.crm-tlf-chip:hover{color:var(--ink)}
.crm-tlf-chip.is-active{border-color:transparent; background:var(--brand-soft); color:var(--brand); font-weight:600}
.crm-tlx{display:flex; flex-direction:column; gap:8px}
.crm-tlx-day{align-self:center; margin:6px 0 2px; padding:3px 11px; border-radius:99px;
  background:var(--surface-2); color:var(--muted); font:600 11px/1.3 system-ui}
.crm-tlx-item{display:flex; gap:10px; width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:inherit; font:inherit; text-align:left}
.crm-tlx-item.is-click{cursor:pointer}
.crm-tlx-item.is-click:hover{border-color:var(--border-strong)}
.crm-tlx-ico{display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:8px;
  background:var(--surface-2); color:var(--muted); font-size:12.5px}
.crm-tlx--note{border-left:3px solid var(--amber)}
.crm-tlx--note .crm-tlx-ico{background:var(--amber-soft); color:var(--amber)}
.crm-tlx--stage .crm-tlx-ico, .crm-tlx--chat .crm-tlx-ico{background:var(--brand-soft); color:var(--brand)}
.crm-tlx--task .crm-tlx-ico, .crm-tlx--invoice .crm-tlx-ico,
.crm-tlx--payment .crm-tlx-ico, .crm-tlx--contract .crm-tlx-ico{background:var(--teal-soft); color:var(--teal)}
.crm-tlx-body{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.crm-tlx-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.crm-tlx-kind{font:600 12px/1.3 system-ui; color:var(--muted)}
.crm-tlx-when{font:400 11.5px/1.3 system-ui; color:var(--faint); white-space:nowrap}
.crm-tlx-text{font:400 13.5px/1.5 system-ui; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.crm-tlx-foot{display:flex; gap:6px; margin-top:2px}
.crm-tlx-note{font:400 12.5px/1.45 system-ui; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere}
.crm-tlx--stage.is-lost .crm-tlx-ico{background:var(--rose-soft); color:var(--rose)}
.crm-tlx--edit .crm-tlx-ico{background:var(--amber-soft); color:var(--amber)}

/* teglar: chip + kiritish maydoni bir qatorda */
.crm-lcx-row--top{align-items:start}
.crm-lcx-row--top > .crm-lcx-lbl{padding-top:8px}
.crm-tags{display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:32px; padding:3px 0}
.crm-tag{display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 3px 0 9px; border-radius:99px;
  background:var(--brand-soft); color:var(--brand); font:600 12px/1 system-ui; max-width:100%}
.crm-tag-x{display:grid; place-items:center; width:18px; height:18px; border:0; border-radius:50%;
  background:none; color:inherit; font-size:14px; line-height:1; cursor:pointer; opacity:.65}
.crm-tag-x:hover{opacity:1; background:var(--surface-2)}
.crm-tag-input{flex:1; min-width:110px; height:26px; padding:0 4px; border:0; outline:0;
  background:none; color:var(--ink); font:400 13px/1 system-ui}
.crm-lcx-reason{display:flex; align-items:center; flex-wrap:wrap; gap:8px}

/* «Nega yutqazildi?» oynasi */
.crm-reasons{display:flex; flex-direction:column; gap:6px}
.crm-reason{display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface); color:var(--ink); font:500 13px/1.3 system-ui; cursor:pointer}
.crm-reason:hover{border-color:var(--border-strong)}
.crm-reason:has(input:checked){border-color:var(--rose); background:var(--rose-soft)}
.crm-reason input{accent-color:var(--rose); margin:0}

/* anketa tahriri */
.crm-form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px}
.crm-field--wide{grid-column:1/-1}
.crm-field-hint{font:400 11.5px/1.3 system-ui; color:var(--faint)}
.crm-field .crm-input:disabled{opacity:.5}
.crm-langs{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px}
.crm-langs .crm-field-lbl{text-transform:none; letter-spacing:0; font-size:12px}
.crm-checks{display:flex; flex-wrap:wrap; gap:6px}
.crm-check{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border);
  border-radius:8px; color:var(--ink); font:500 12.5px/1.2 system-ui; cursor:pointer}
.crm-check:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.crm-check input{margin:0}
.crm-form-err{padding:8px 10px; border-radius:8px; background:var(--rose-soft); color:var(--rose);
  font:600 12.5px/1.35 system-ui}
@media (max-width:860px){
  .crm-form-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .crm-lcx-head{padding:12px 14px 10px}
  .crm-lcx-name{font-size:17px}
  .crm-pipe-step{min-width:88px; padding:0 12px}
  .crm-pipe{position:relative}
  /* Tez amallar bitta qatorda yonga aylanadi — uch qatorga tushib, kartochkani pastga surmasin. */
  .crm-lcx-actions{flex:1 0 100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px}
  .crm-lcx-tabs{display:flex; gap:4px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--surface)}
  .crm-lcx-tab{flex:1; height:32px; border:0; border-radius:8px; background:none;
    color:var(--muted); font:600 13px/1 system-ui; cursor:pointer}
  .crm-lcx-tab.is-active{background:var(--brand-soft); color:var(--brand)}
  .crm-lcx-cols{grid-template-columns:minmax(0,1fr)}
  .crm-lcx-left{border-right:0}
  .crm-lcx-right{padding:12px}
  .crm-lcx[data-view="info"] .crm-lcx-right,
  .crm-lcx[data-view="history"] .crm-lcx-left{display:none}
}

@media (max-width:860px){
  .crm-kanban{grid-auto-flow:row; grid-auto-columns:auto}
  .crm-kcard{cursor:pointer}
  .crm-search-input{min-width:0; flex:1}
  .crm-toolbar-right{width:100%; justify-content:space-between}
}

/* ===== CRM: zadachalar ===== */
.crm-textarea{height:auto; padding:7px 9px; line-height:1.45; resize:vertical; font-family:inherit}
.crm-warn{padding:7px 10px; border-radius:8px; background:var(--rose-soft); color:var(--rose);
  font:600 12.5px/1.3 system-ui}
.crm-due-late{color:var(--rose); font-weight:600}
.crm-tbody .crm-tr.is-overdue{box-shadow:inset 2px 0 0 var(--rose)}
.crm-link{border:0; background:none; padding:0; color:var(--brand); cursor:pointer;
  font:500 13px/1.4 system-ui; text-align:left}
.crm-link:hover{text-decoration:underline}

.crm-thread{display:flex; flex-direction:column; gap:7px}
.crm-cmt{padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface)}
.crm-cmt-top{display:flex; justify-content:space-between; gap:8px; margin-bottom:2px}
.crm-cmt-who{font:600 12px/1.3 system-ui; color:var(--ink)}
.crm-cmt-when{font:400 11px/1.3 system-ui; color:var(--faint)}
.crm-cmt-txt{font:400 13px/1.45 system-ui; color:var(--ink); white-space:pre-wrap}
.crm-cmt-box{display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.crm-cmt-box .crm-textarea{width:100%}

.crm-files{display:flex; flex-direction:column; gap:5px}
.crm-file{display:flex; align-items:center; gap:8px}
.crm-file-ico{font-size:12px}
.crm-file-meta{margin-left:auto; font:400 11px/1.3 system-ui; color:var(--faint)}
.crm-file-add{margin-top:4px}

/* ===== CRM: buyurtmalar ===== */
.crm-sums{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.crm-sums--card{margin:2px 0 6px}
.crm-sum{display:flex; flex-direction:column; gap:1px; padding:7px 12px; min-width:120px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
.crm-sum-lbl{font:500 10.5px/1.2 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
.crm-sum-val{font:600 15px/1.3 system-ui; color:var(--ink); font-variant-numeric:tabular-nums}
.crm-sum--due .crm-sum-val{color:var(--rose)}
.crm-sum--count .crm-sum-val{color:var(--muted)}

.crm-step{display:flex; align-items:center; gap:9px}
.crm-step-bar{flex:1; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.crm-step-fill{height:100%; background:var(--brand); border-radius:99px}
.crm-step-txt{font:600 12px/1 system-ui; color:var(--muted); font-variant-numeric:tabular-nums}

.crm-lines{display:flex; flex-direction:column; gap:5px}
.crm-line{display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface)}
.crm-line-main{flex:1; min-width:0}
.crm-line-title{font:500 13px/1.35 system-ui; color:var(--ink)}
.crm-line-meta{font:400 11px/1.3 system-ui; color:var(--faint)}
.crm-line-sum{font:600 13px/1 system-ui; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.crm-hint{font-size:12px; line-height:1.45}

/* ===== CRM: xodimlar ===== */
.crm-kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.crm-kpi-cell{display:flex; flex-direction:column; gap:1px; padding:9px 10px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface)}
.crm-kpi-val{font:600 18px/1.1 system-ui; color:var(--ink); font-variant-numeric:tabular-nums}
.crm-kpi-lbl{font:400 11px/1.3 system-ui; color:var(--faint)}
.crm-kpi-cell.is-warn .crm-kpi-val{color:var(--rose)}
.crm-linkbox{display:flex; gap:6px}
.crm-linkbox .crm-input{flex:1; font-size:12px}

/* ===== CRM: hisobotlar =====
   Ranglar dataviz palitrasidan: kategorik slotlar TARTIB bilan (ch1 → ch2),
   voronkaning ochiq bosqichlari tartiblangan bitta rang (o1…o4), yakunlari
   esa ma'no bo'yicha — teal/rose, CRM badge'lari bilan bir xil. */
.crm-card{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  padding:13px 14px; margin-bottom:12px}
.crm-card-top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:11px}
.crm-card-title{margin:0; font:600 14px/1.3 system-ui; color:var(--ink)}
.crm-card-hint{font:400 11.5px/1.4 system-ui; color:var(--faint)}

.crm-chart{width:100%; height:130px; display:block}
.crm-bar{transition:opacity .12s ease}
.crm-bar--ch1{fill:var(--ch1)}
.crm-bar--ch2{fill:var(--ch2)}
.crm-xaxis{display:flex; margin-top:3px}
.crm-xlab{flex:1; text-align:center; font:400 10.5px/1.3 system-ui; color:var(--faint)}
.crm-legend{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:9px}
.crm-leg{display:flex; align-items:center; gap:6px}
.crm-leg-dot{width:9px; height:9px; border-radius:3px; display:inline-block}
.crm-leg-dot--ch1{background:var(--ch1)}
.crm-leg-dot--ch2{background:var(--ch2)}
.crm-leg-lbl{font:400 12px/1 system-ui; color:var(--muted)}
.crm-leg-val{font:600 12.5px/1 system-ui; color:var(--ink); font-variant-numeric:tabular-nums}

.crm-funnel{display:flex; flex-direction:column; gap:6px}
.crm-fun-row{display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:9px}
.crm-fun-lbl{font:400 12.5px/1.3 system-ui; color:var(--muted)}
.crm-fun-track{height:16px; border-radius:5px; background:var(--surface-2); overflow:hidden}
.crm-fun-bar{height:100%; border-radius:5px; min-width:2px}
.crm-fun-bar--o1{background:var(--o1)} .crm-fun-bar--o2{background:var(--o2)}
.crm-fun-bar--o3{background:var(--o3)} .crm-fun-bar--o4{background:var(--o4)}
.crm-fun-bar--teal{background:var(--teal)} .crm-fun-bar--rose{background:var(--rose)}
.crm-fun-val{font:600 12.5px/1 system-ui; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.crm-rep-foot{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

/* Yutqazish sabablari: nomlar uzunroq, qiymatda son + ulush; «sababsiz»
   qatori ma'lumot yetishmasligini bildiradi — rang emas, neytral kulrang. */
.crm-card-seg{margin-left:auto}
.crm-funnel--lost .crm-fun-row{grid-template-columns:190px 1fr 76px}
.crm-fun-bar--none{background:var(--border-strong)}
.crm-fun-row.is-unknown .crm-fun-lbl{font-style:italic; color:var(--faint)}
.crm-sum-val--text{font-size:13.5px}

@media (max-width:860px){
  .crm-fun-row{grid-template-columns:96px 1fr 36px}
  .crm-funnel--lost .crm-fun-row{grid-template-columns:118px 1fr 66px}
  .crm-card-seg{margin-left:0}
  .crm-chart{height:110px}
}

/* Sarlavhadagi CRM tugmasi — brend rangida, boshqa chiplardan ajralib tursin:
   bu asosiy o'tish yo'li, qolganlari yordamchi amallar. */
.qr-chip.crm-chip{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.qr-chip.crm-chip:hover{filter:brightness(1.06)}
.qr-chip.crm-chip svg{stroke:currentColor}

/* ===== CRM: mobil filtrlar =====
   Keng ekranda tanlovlar ochiq turadi (qaysi filtr yoqilgani bir qarashda
   ko'rinadi), tor ekranda esa «Filtr» tugmasi ostiga yig'iladi — uchta
   tanlov telefonda ekranning oltidan birini egallardi. */
.crm-filters{display:contents}
.crm-filter-btn{display:none; align-items:center; gap:6px}
.crm-filter-btn.is-on{border-color:var(--brand); color:var(--brand)}
.crm-filter-count{display:inline-grid; place-items:center; min-width:16px; height:16px;
  padding:0 4px; border-radius:99px; background:var(--brand); color:var(--brand-ink);
  font:700 10px/1 system-ui}
@media (max-width:860px){
  .crm-filters{display:none}
  .crm-filter-btn{display:inline-flex}
  /* Oyna ichida esa ustma-ust va to'liq kenglikda */
  .crm-sheet-body .crm-filters{display:flex; flex-direction:column; gap:9px}
  .crm-sheet-body .crm-filters .crm-input{width:100%; max-width:none; height:36px}
}

/* ===== Chap ustundagi «Chiqish» =====
   Chap ustun faqat keng brauzer oynasida bor (`min-width:900px`, yuqoridagi
   «Navigatsiya: pastdan CHAPGA» bloki). Shuning uchun chegarasi AYNAN O'SHA:
     · keng oyna — chiqish ustunning eng pastida, sarlavhadagi chip yashirin;
     · tor oyna  — ustun yo'q, panel pastda gorizontal: u yerda chiqish
                   navigatsiyadan joy o'g'irlagan bo'lardi, chip esa qoladi;
     · Telegram  — ikkalasi ham yo'q (sessiya Telegramniki).
   CSS bilan qilingani uchun oyna o'lchami o'zgarganda ham to'g'ri almashadi.
   `margin-top:auto` tugmani eng pastga bosadi, ustidagi chiziq esa uni
   navigatsiyadan ajratadi — chiqish tasodifan bosiladigan tugma emas. */
.tab-out{display:none}
@media (min-width: 900px){
  body.web .tab-out{
    display:flex; margin-top:auto;
    padding-top:11px; border-top:1px solid var(--glass-line);
    border-radius:16px; color:var(--muted);
  }
  body.web .tab-out:hover{background:rgba(210,44,91,.10); color:var(--rose)}
  body.web .tab-out .tab-ico svg{width:20px; height:20px; display:block}
  /* Uchala panelning sarlavhadagi chiqish chipi — ustunda allaqachon bor */
  body.web #admLogout, body.web #candLogout, body.web #empLogout{display:none!important}
}

/* ===== CRM: Ijro bo'limi =====
   Kanban 9 ta ustun (yo'l bosqichlari 4–12) — gorizontal aylanadi. Kartochkada
   bosqichda necha kun turgani va shartnoma holati; 14 kundan ortiq o'zgarmagani
   chap chetida qizil chiziq bilan ajraladi. */
.crm-kcol-name{font:600 12px/1.25 system-ui; color:var(--ink); min-width:0}
.crm-kcard-meta{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.crm-kcard-meta:empty{display:none}
.crm-kcard-tag{display:inline-block; padding:2px 7px; border-radius:99px; background:var(--surface-2);
  color:var(--muted); font:600 10.5px/1.4 system-ui; white-space:nowrap}
.crm-kcard-tag.is-warn{background:var(--rose-soft); color:var(--rose)}
.crm-kcard-tag.is-amber{background:var(--amber-soft); color:var(--amber)}
.crm-kcard.is-stuck{box-shadow:inset 3px 0 0 var(--rose)}
.crm-toggle.is-on{border-color:transparent; background:var(--rose-soft); color:var(--rose); font-weight:600}

.crm-kpi--ijro{grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:12px}
.crm-kpi-hint{font:400 10.5px/1.3 system-ui; color:var(--faint)}
.crm-funnel--ijro .crm-fun-row{grid-template-columns:190px 1fr 96px}
.crm-ij-note{margin:2px 0 12px; font:400 11.5px/1.45 system-ui; color:var(--faint)}

/* Mijoz kartochkasi: Ijro ogohlantirishi va «Ijro'ga o'tdi» xabari */
.crm-lcx-warn{flex:1 0 100%}
.crm-lcx-notice{flex:1 0 100%; padding:7px 10px; border-radius:8px; background:var(--teal-soft);
  color:var(--teal); font:600 12.5px/1.35 system-ui}

@media (max-width:860px){
  .crm-kpi--ijro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-funnel--ijro .crm-fun-row{grid-template-columns:118px 1fr 80px}
}

/* ===== CRM: Marketing ===== */
.crm-kpi--mk{grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:12px}
.crm-mk-name{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font:500 13px/1.3 system-ui; color:var(--ink)}
.crm-mk-medium{font:400 11.5px/1.3 system-ui; color:var(--faint)}
.crm-mk-code, .crm-mk-preview{font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted)}
.crm-mk-preview{display:block; padding:8px 10px; border:1px dashed var(--border); border-radius:8px;
  overflow-wrap:anywhere; min-height:34px}
.crm-mk-preview:empty{display:none}
.crm-mk-code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.crm-mk-num b{font-weight:600; color:var(--ink)}
.crm-mk-rate{font:400 11.5px/1 system-ui; color:var(--faint)}
.crm-mk-actions{display:flex; gap:2px}
.crm-tbody .crm-tr.is-off .crm-td{opacity:.55}
@media (max-width:860px){ .crm-kpi--mk{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Ijro toolbar: mobilda qidiruv alohida qatorda, filtr va «tiqilganlar» yonma-yon */
@media (max-width:860px){
  .crm-ij-toolbar .crm-search-input{flex:1 0 100%}
}

/* ===== Telefoniya bo'limi ===== */
.crm-tel-dir{font-weight:700}
.crm-tel-dir.is-out{color:var(--ch1)}
.crm-tel-dir.is-in{color:var(--ch3)}
.crm-tel-who{display:flex;flex-direction:column;gap:2px}
.crm-tel-num{font-variant-numeric:tabular-nums;color:var(--muted)}
.crm-tel-actions{display:flex;gap:4px}
.crm-tel-player{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;margin:8px 0}
.crm-tel-player audio{flex:1;min-width:200px}
.crm-tel-player-meta{font-size:13px;color:var(--muted)}

/* CRM tugmasi chap ustunda (xodim panellari, brauzer). Tor ekranda ustun yo'q —
   u yerda sarlavhadagi CRM chipi qoladi, keng ekranda esa chip yashiriladi. */
.tab-crm{display:none}
@media (min-width:900px){
  body.web .tab-crm{display:flex; margin-top:auto; color:var(--brand)}
  body.web .tab-crm:hover{background:rgba(30,99,196,.14)}
  body.web .tab-crm .tab-ico svg{width:20px; height:20px; display:block}
  body.web .tab-crm + .tab-out{margin-top:6px}
  body.web #admCrm{display:none!important}
}

/* ===== CRM: Chat =====
   Chapda dialoglar, o'ngda oyna; telefonda ro'yxat ↔ oyna almashadi. Xodim
   xabarlari o'ngda brend rangda, arizachiniki chapda — messenjerlardagidek. */
.crm-nav-badge{margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  background:var(--rose); color:#fff; font:700 10.5px/18px system-ui; text-align:center}
body.crm-collapsed .crm-nav-badge{position:absolute; top:4px; right:4px; margin:0; min-width:14px; height:14px; padding:0 3px; font-size:9px; line-height:14px}
body.crm-collapsed .crm-nav-item{position:relative}
.crm-chat{display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; height:calc(100dvh - 48px - 32px); min-height:360px}
.crm-chat-list{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface); overflow:hidden}
.crm-chat-list-top{display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--border)}
.crm-chat-search{flex:1; min-width:0}
.crm-chat-items{flex:1; overflow:auto; padding:6px}
.crm-chat-item{display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; border:0; border-radius:9px;
  background:none; text-align:left; cursor:pointer; color:var(--ink)}
.crm-chat-item:hover{background:var(--surface-2)}
.crm-chat-item.is-cur{background:var(--brand-soft)}
.crm-chat-item-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.crm-chat-item-top{display:flex; justify-content:space-between; gap:8px}
.crm-chat-item-name{font:600 13px/1.3 system-ui; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-chat-item-when{font:400 11px/1.3 system-ui; color:var(--faint); flex:none}
.crm-chat-item-last{font:400 12px/1.3 system-ui; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-chat-item.is-unread .crm-chat-item-name, .crm-chat-item.is-unread .crm-chat-item-last{color:var(--ink); font-weight:600}
.crm-chat-unread{min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--brand); color:var(--brand-ink);
  font:700 10.5px/18px system-ui; text-align:center; flex:none}
.crm-chat-thread{display:flex; flex-direction:column; min-height:0; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface); overflow:hidden}
.crm-chat-head{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border)}
.crm-chat-head-name{flex:1; min-width:0; font:600 14px/1.3 system-ui; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-chat-back{font-size:20px}
.crm-msgs{flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:6px; background:var(--bg)}
.crm-msg{max-width:min(78%,560px); align-self:flex-start; padding:8px 11px; border-radius:12px 12px 12px 4px;
  background:var(--surface); border:1px solid var(--border)}
.crm-msg.is-mine{align-self:flex-end; border-radius:12px 12px 4px 12px; background:var(--brand-soft); border-color:transparent}
.crm-msg-txt{font:400 13.5px/1.45 system-ui; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.crm-msg-meta{margin-top:3px; font:400 10.5px/1.3 system-ui; color:var(--faint); text-align:right}
.crm-msg-file{margin-top:4px}
.crm-msg-img{display:block; max-width:100%; max-height:320px; border-radius:8px}
.crm-chat-composer{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-top:1px solid var(--border)}
.crm-chat-input{width:100%; min-height:44px}
.crm-chat-composer-foot{display:flex; align-items:center; justify-content:space-between; gap:8px}
.crm-chat-tools{display:flex; align-items:center; gap:4px; min-width:0}
.crm-chat-filetag{padding:3px 8px; border-radius:99px; background:var(--surface-2); color:var(--muted);
  font:500 11.5px/1.4 system-ui; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-chat-pick{display:flex; flex-direction:column; gap:2px; margin-top:8px}
.crm-chat-tpl-prev{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
/* lid kartochkasidagi chat oynasi (sheet) */
.crm-chat-sheet{padding:0!important; gap:0!important; overflow:hidden!important}
.crm-chat-sheet .crm-msgs{min-height:240px}
@media (max-width:860px){
  .crm-chat{grid-template-columns:minmax(0,1fr); height:calc(100dvh - 48px - 24px)}
  .crm-chat[data-view="list"] .crm-chat-thread, .crm-chat[data-view="thread"] .crm-chat-list{display:none}
  .crm-msg{max-width:88%}
}

/* Chat: tablar, kontakt guruhlari, xodim avatari, oynada sarlavha ostki matni */
.crm-chat-list-top{padding:8px}
.crm-chat-tabs{width:100%}
.crm-chat-tabs .crm-seg-btn{flex:1}
.crm-chat-list-search{padding:0 8px 8px}
.crm-chat-group{padding:8px 9px 4px; font:600 10.5px/1.3 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.crm-ava.is-staff{background:var(--brand-soft); color:var(--brand)}
.crm-chat-head-txt{flex:1; min-width:0}
.crm-chat-head-sub{font:400 11px/1.3 system-ui; color:var(--faint)}
.crm-msg-who{font:600 11px/1.3 system-ui; color:var(--brand); margin-bottom:2px}

/* Chat: «✓ / ✓✓», iqtibos (javob), javob/tahrir chizig'i — Telegram'dagidek */
.crm-msg{cursor:default; transition:box-shadow .3s}
.crm-msg.is-flash{box-shadow:0 0 0 2px var(--brand)}
.crm-msg-meta{display:flex; justify-content:flex-end; align-items:center; gap:5px}
.crm-msg-tick{font:600 11px/1 system-ui; letter-spacing:-2px; color:var(--faint)}
.crm-msg-tick.is-read{color:var(--brand)}
.crm-msg-quote{margin:0 0 5px; padding:4px 8px; border-left:3px solid var(--brand); border-radius:6px;
  background:var(--surface-2); cursor:pointer; min-width:0}
.crm-msg.is-mine .crm-msg-quote{background:var(--surface)}
.crm-msg-quote-who{font:600 11px/1.3 system-ui; color:var(--brand)}
.crm-msg-quote-txt{font:400 12px/1.35 system-ui; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-chat-cbar{display:flex; align-items:center; gap:8px; padding:4px 4px 4px 8px; border-left:3px solid var(--brand);
  border-radius:6px; background:var(--surface-2)}
.crm-chat-cbar-ico{font-size:15px; color:var(--brand); flex:none}
.crm-chat-cbar-txt{flex:1; min-width:0; display:flex; flex-direction:column; font:400 12px/1.35 system-ui; color:var(--muted)}
.crm-chat-cbar-txt b{font:600 11px/1.3 system-ui; color:var(--brand)}
.crm-chat-cbar-txt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* o'chirilgan xabar — faqat rahbar ko'radi */
.crm-msg.is-deleted{border-style:dashed; opacity:.75}
.crm-msg-del{font:600 11px/1.3 system-ui; color:var(--rose); margin-bottom:2px}
.crm-msg-txt.is-del{text-decoration:line-through; color:var(--muted)}

/* ===== CRM: Muammo (rad etish, pul qaytarish) ===== */
.crm-kpi--ref{grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:12px}
.crm-ref-refund{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:6px}
.crm-lcx-refuse{color:var(--rose)}
.crm-lcx-refuse:hover{background:var(--rose-soft)}
.crm-tlx--refusal .crm-tlx-ico{background:var(--rose-soft); color:var(--rose)}
@media (max-width:860px){
  .crm-kpi--ref{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-ref-refund{grid-template-columns:minmax(0,1fr)}
}

/* ===== CRM: «Yangi lid» va bot havolasi ===== */
.crm-form-err{margin-top:10px; padding:8px 10px; border-radius:8px; background:var(--danger-soft, #fde8e8); color:var(--danger, #b42318); font:500 12.5px/1.4 system-ui}
.crm-dup-card{margin:10px 0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2)}
.crm-dup-name{font:600 14px/1.3 system-ui; margin-bottom:3px}
.crm-invite-row{display:flex; gap:8px; margin-top:8px}
.crm-invite-inp{flex:1; min-width:0; font:400 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace}
.crm-invite-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}

/* ===== CRM: Sozlamalar ===== */
.crm-set{padding:12px 16px 32px; max-width:980px}
.crm-set-tabs{flex-wrap:wrap; margin-bottom:12px}
.crm-set-card{margin:0 0 14px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.crm-set-title{margin:0 0 4px; font:600 14px/1.3 system-ui}
.crm-set-hint{margin:0 0 12px; font:400 12.5px/1.45 system-ui}
.crm-set-fhint{font:400 11.5px/1.4 system-ui}
.crm-set-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.crm-set-check{display:flex; align-items:center; gap:8px; margin-top:10px; font:400 13px/1.3 system-ui; cursor:pointer}
.crm-set-names{display:flex; flex-direction:column; gap:6px; overflow-x:auto}
.crm-set-names-head, .crm-set-names-row{display:grid; grid-template-columns:150px repeat(4,minmax(120px,1fr)); gap:6px; align-items:center; min-width:640px}
.crm-set-names-head span{font:600 10.5px/1.3 system-ui; color:var(--faint); letter-spacing:.04em}
.crm-set-names-lbl{font:500 12.5px/1.3 system-ui; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-set-names .crm-input{height:30px}
.crm-set-table{width:100%; border-collapse:collapse; font:400 13px/1.3 system-ui}
.crm-set-table th, .crm-set-table td{padding:7px 8px; border-bottom:1px solid var(--line); text-align:left}
.crm-set-table th{font:600 11px/1.3 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.crm-set-table td:not(:first-child), .crm-set-table th:not(:first-child){text-align:center; width:110px}
.crm-set-staff{display:flex; flex-direction:column; gap:2px; margin-top:10px}
.crm-set-pct-row{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line)}
.crm-set-pct{display:flex; align-items:center; gap:6px}
.crm-set-pct .crm-input{width:80px; height:30px}
.crm-set-tpls{display:flex; flex-direction:column; gap:10px}
.crm-set-tpl{display:grid; grid-template-columns:200px minmax(0,1fr) 32px; gap:8px; align-items:start}
.crm-set-hist{padding:8px 0; border-bottom:1px solid var(--line)}
.crm-set-hist-top{display:flex; justify-content:space-between; gap:8px; font:400 12.5px/1.3 system-ui}
.crm-set-hist-val{display:block; margin-top:4px; font:400 11.5px/1.4 ui-monospace, Menlo, monospace; color:var(--muted); white-space:pre-wrap; word-break:break-word}
@media (max-width:720px){
  .crm-set{padding:10px 10px 28px}
  .crm-set-tpl{grid-template-columns:minmax(0,1fr) 32px}
  .crm-set-tpl textarea{grid-column:1 / -1}
}
/* ===== Dalolatnoma (bajarilgan ish, Ijro 5..12) — arizachi ===== */
.act-banner{display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--amber-soft); border:1px solid var(--amber)}
.act-banner-t{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink)}
.act-banner .vbtn{flex:none}
.rm-act{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px; font-size:11px; font-weight:600;
  background:var(--surface-2); color:var(--muted); vertical-align:middle}
.rm-act.wait{background:var(--amber-soft); color:var(--amber)}
.rm-act.ok{background:var(--teal-soft); color:var(--teal)}
.rm-act.no{background:var(--rose-soft); color:var(--rose)}
.act-card.declined{border-color:var(--rose)}
.act-decline{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.cdoc-acts{display:flex; flex-direction:column; gap:6px; margin-bottom:8px}
/* CRM: lid kartochkasida dalolatnomalar ro'yxati */
.crm-lcx-act{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font:400 12.5px/1.35 system-ui}
.crm-lcx-act:last-child{border-bottom:0}
.crm-lcx-act-t{flex:1; min-width:0}
.crm-lcx-act-note{display:block; font-size:11.5px; color:var(--rose)}

/* ===== CRM: Hujjatlar ===== */
.crm-docs-kpi{margin:0 16px 10px}
.crm-docs-scope{grid-column:1 / -1; font:400 12px/1.4 system-ui; padding:4px 2px}
.crm-docs-cand{height:32px; padding:0 10px; border:1px solid var(--brand); border-radius:9px; background:var(--brand-soft); color:var(--brand); font:500 12.5px/1 system-ui; cursor:pointer}
.crm-doc-head{margin-bottom:12px}
.crm-doc-title{font:600 16px/1.3 system-ui; margin-bottom:4px}
.crm-doc-badges{display:flex; gap:10px; align-items:center; margin-top:6px}
.crm-doc-note{margin-top:8px; padding:8px 10px; border-radius:8px; background:var(--surface-2); font:400 13px/1.4 system-ui}
.crm-doc-preview{margin:10px 0}
.crm-doc-img{max-width:100%; max-height:70vh; border-radius:10px; border:1px solid var(--line)}
.crm-doc-edit{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.crm-doc-results{display:flex; flex-direction:column; gap:2px; margin-top:6px}
.crm-doc-actions{flex-wrap:wrap; overflow:visible}

/* ===== Moliya: mijozlar bo'yicha ro'yxat (umumiy · to'langan · qarzdorlik · qoldiq) ===== */
.fin-kpi{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.fin-kpi-i{display:flex; flex-direction:column; gap:3px; min-width:0}
.fin-kpi-i span{font-size:12px; color:var(--muted)}
.fin-kpi-i b{font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.fin-kpi-i.ok b{color:var(--teal)}
.fin-kpi-i.late b{color:var(--rose)}
.fin-hint{margin-top:8px; font-size:11.5px; color:var(--faint)}
.fin-table{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.fin-row{display:grid; grid-template-columns:minmax(200px,1.6fr) repeat(4, minmax(110px,1fr)) 28px;
  align-items:center; gap:10px; padding:10px 14px}
.fin-head{background:var(--surface-2); border-bottom:1px solid var(--border)}
.fin-head .fin-c{border:0; background:none; padding:0; font:600 11.5px/1.3 system-ui; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; cursor:pointer; text-align:left}
.fin-head .fin-num{text-align:right}
.fin-c{min-width:0}
.fin-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.fin-num b{font-size:14px; font-weight:700; color:var(--ink)}
.fin-num b.ok{color:var(--teal)}
.fin-num b.late{color:var(--rose)}
.fin-num b.fin-zero{color:var(--faint); font-weight:400}
.fin-name{display:flex; align-items:center; gap:10px}
.fin-name > .av{width:34px; height:34px; position:static; margin:0; flex:none; font-size:12px}
.fin-who{display:flex; flex-direction:column; min-width:0}
.fin-who b{font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fin-who small{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fin-x{color:var(--faint); text-align:center; transition:transform .2s}
.fin-grp{border-bottom:1px solid var(--border)}
.fin-grp.late .fin-line{box-shadow:inset 3px 0 0 var(--rose)}
.fin-line{cursor:pointer}
.fin-line:hover{background:var(--surface-2)}
.fin-grp.open .fin-x{transform:rotate(180deg)}
.fin-grp.open .fin-line{background:var(--brand-soft)}
.fin-inv:empty{display:none}
.fin-inv{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:8px;
  padding:10px 14px 14px; background:var(--bg)}
.fin-inv > .cmp{margin:0}
.fin-foot{background:var(--surface-2)}
/* Tor holat EKRAN kengligiga emas, KONTEYNERGA qarab: ilova 900px dan tor oynada
   520px ustunga o'tadi va keng monitorda ham jadval sig'may qolardi (ustunlar kesilardi).
   Container query bo'lmagan eski webview uchun — ekran bo'yicha zaxira qoidasi. */
#s-pay-admin{container-type:inline-size; container-name:finpay}
@container finpay (max-width:720px){
  .fin-kpi{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fin-head{display:none}
  .fin-row{grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 12px; padding:10px 12px}
  .fin-name{grid-column:1 / -1}
  .fin-x{display:none}
  .fin-num{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
  .fin-num::before{content:attr(data-l); font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
  .fin-inv{grid-template-columns:minmax(0,1fr); padding:8px 10px 12px}
}
@media (max-width:720px){
  .fin-kpi{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fin-head{display:none}
  .fin-row{grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 12px; padding:10px 12px}
  .fin-name{grid-column:1 / -1}
  .fin-x{display:none}
  .fin-num{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
  .fin-num::before{content:attr(data-l); font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.03em}
  .fin-inv{grid-template-columns:minmax(0,1fr); padding:8px 10px 12px}
}

/* ===== Moliya: bosh sahifa kartasi (4 qator) va CRM Buyurtmalar ===== */
.fin-mini{display:flex; flex-direction:column; margin:4px 0 10px}
.fin-mini-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:13px; color:var(--muted)}
.fin-mini-row:last-child{border-bottom:0}
.fin-mini-row b{font-size:14.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.fin-mini-row b.ok{color:var(--teal)}
.fin-mini-row b.late{color:var(--rose)}
.fin-mini-row b.fin-zero{color:var(--faint); font-weight:400}
.crm-money-ok{color:var(--teal); font-weight:600}
.crm-sum--paid .crm-sum-val{color:var(--teal)}

/* ===== CRM: mijoz kartochkasidan qo'ng'iroq ===== */
.crm-lcall-opt{padding:12px 0; border-bottom:1px solid var(--line)}
.crm-lcall-opt:last-child{border-bottom:0}
.crm-lcall-h{font:600 14px/1.3 system-ui; margin-bottom:4px}
.crm-lcall-p{margin:0 0 8px; font:400 12.5px/1.45 system-ui}
.crm-lcall-warn{margin:6px 0 0; padding:8px 10px; border-radius:8px; background:var(--amber-soft, #fff4e0); color:var(--amber, #8a5a00); font:400 12.5px/1.45 system-ui}
.crm-lcall-status{margin-top:8px; font:400 12.5px/1.4 system-ui}
.crm-tlx-audio audio{width:100%; max-width:420px; height:36px; margin-top:6px}
.crm-btn--sm{height:24px; padding:0 8px; font-size:12px}
.crm-lcall-opt a.crm-btn{text-decoration:none; display:inline-flex; align-items:center}
.crm-lcall-status{padding:0}
.crm-lcall-status.is-wait{color:var(--muted)}
.crm-lcall-status.is-ok{padding:8px 10px; border-radius:8px; background:var(--teal-soft); color:var(--teal); font-weight:600}
.crm-lcall-status.is-warn{padding:8px 10px; border-radius:8px; background:var(--amber-soft); color:var(--amber)}
.crm-lcall-status.is-bad{padding:8px 10px; border-radius:8px; background:var(--rose-soft); color:var(--rose)}
.crm-tel-qr{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:12px}
.crm-tel-qr-box{width:220px; max-width:70vw; padding:10px; background:#fff; border:1px solid var(--line); border-radius:12px}
.crm-tel-qr-box svg{width:100%; height:auto; display:block}
.crm-tel-qr-name{margin:0; font:600 14px/1.3 system-ui; color:var(--ink)}

/* ===== Dastur tanlash (mehnat migratsiyasi / Work & Travel) ===== */
.prg-grid{display:flex; flex-direction:column; gap:12px; margin-top:8px}
.prg-card{display:flex; flex-direction:column; gap:4px; text-align:left; padding:16px 18px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); cursor:pointer; color:var(--ink)}
.prg-card:active{transform:scale(.99)}
.prg-card:hover{border-color:var(--brand)}
.prg-ico{font-size:26px; line-height:1}
.prg-t{font-size:16px; font-weight:700}
.prg-d{font-size:13px; line-height:1.45; color:var(--muted)}
.crm-tel-diag{padding:4px 12px 10px; font:400 12px/1.45 system-ui; border-bottom:1px solid var(--line)}
.crm-tel-diag.is-ok{color:var(--teal)}
.crm-tel-diag.is-warn{color:var(--amber)}

/* =====================================================================
   CRM — YANGI KO'RINISH (2026-09-17): oq yon panel, keng topbar, yumshoq
   kartalar, chiziqli ikonkalar va «Bosh sahifa» dashboardi.
   Ranglar CRM ochiq bo'lganda (body.crm-on) ustma-ust qo'yiladi: eski panel
   o'z tokenlarida qoladi, CRM oynalari (sheet) ham shu rangni oladi.
   ===================================================================== */
:root:not([data-theme="dark"]) body.crm-on{
  --bg:#F4F7FC; --surface:#FFFFFF; --surface-2:#F1F4F9;
  --border:#E7ECF3; --border-strong:#D5DCE8;
  --ink:#0F172A; --muted:#566079; --faint:#8B94A7;
  --brand:#2563EB; --brand-ink:#FFFFFF; --brand-soft:#EAF1FE;
  --radius:18px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -18px rgba(15,23,42,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.crm-on{
    --bg:#0B1020; --surface:#121829; --surface-2:#1A2236; --border:#232C43; --border-strong:#34405C;
    --ink:#EEF2FA; --muted:#A1ABC2; --faint:#6E7A94; --brand:#5B8DEF; --brand-ink:#07101F; --brand-soft:#16254A;
    --radius:18px; --radius-sm:14px;
  }
}
:root[data-theme="dark"] body.crm-on{
  --bg:#0B1020; --surface:#121829; --surface-2:#1A2236; --border:#232C43; --border-strong:#34405C;
  --ink:#EEF2FA; --muted:#A1ABC2; --faint:#6E7A94; --brand:#5B8DEF; --brand-ink:#07101F; --brand-soft:#16254A;
  --radius:18px; --radius-sm:14px;
}
body.crm-on .crm-svg{display:block; flex:none}

/* ---- yon panel ---- */
.crm-side{width:252px; padding:18px 14px 14px; gap:6px; background:var(--surface); border-right:1px solid var(--border)}
.crm-side-top{padding:2px 6px 18px}
.crm-logo{gap:11px}
.crm-logo-mark{width:38px; height:38px; border-radius:12px; font:800 18px/1 system-ui;
  background:linear-gradient(135deg,#3B82F6 0%,#1D4ED8 100%); color:#fff; box-shadow:0 6px 16px -6px rgba(37,99,235,.55)}
.crm-logo-txt{display:flex; flex-direction:column; line-height:1.05}
.crm-logo-txt b{font:750 18px/1.1 system-ui; color:var(--ink); letter-spacing:-.01em}
.crm-logo-txt small{font:600 10.5px/1.2 system-ui; color:var(--faint); letter-spacing:.14em; text-transform:uppercase}
.crm-collapse{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--faint)}
.crm-collapse:hover{background:var(--surface-2); color:var(--ink)}
.crm-collapse .crm-svg{transition:transform .16s ease}
.crm-collapse.is-flipped .crm-svg, body.crm-collapsed .crm-collapse .crm-svg{transform:rotate(180deg)}
.crm-nav{gap:3px}
.crm-nav-item{gap:13px; min-height:44px; padding:0 13px; border-radius:12px; font:500 14.5px/1.2 system-ui; color:var(--muted)}
.crm-nav-item .crm-nav-ico{display:grid; place-items:center; width:22px; color:var(--faint)}
.crm-nav-item:hover{background:var(--surface-2); color:var(--ink)}
.crm-nav-item:hover .crm-nav-ico{color:var(--ink)}
.crm-nav-item.is-active{background:var(--brand-soft); color:var(--brand); font-weight:650}
.crm-nav-item.is-active .crm-nav-ico{color:var(--brand)}
.crm-nav-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  background:var(--rose); color:#fff; font:700 11px/20px system-ui; text-align:center}
.crm-side-foot{border-top:1px solid var(--border); padding-top:10px}
body.crm-collapsed .crm-side{padding:18px 8px 14px}
body.crm-collapsed .crm-side-top{flex-direction:column; gap:10px; padding:2px 0 14px}
body.crm-collapsed .crm-nav-item{justify-content:center; padding:0}
body.crm-collapsed .crm-nav-badge{position:absolute; transform:translate(12px,-10px); min-width:16px; height:16px; font-size:9.5px; line-height:16px; padding:0 4px}
body.crm-collapsed .crm-nav-item{position:relative}
body.crm-collapsed .crm-logo-mark{width:34px; height:34px; font-size:16px}

/* ---- topbar ---- */
.crm-top{height:70px; padding:0 26px; gap:16px; background:var(--surface); border-bottom:1px solid var(--border)}
.crm-burger{place-items:center; width:40px; height:40px; border-radius:12px; color:var(--ink)}
.crm-search{height:44px; max-width:460px; padding:0 14px; gap:10px; border-radius:14px; border:1px solid transparent;
  background:var(--surface-2); color:var(--faint); font:400 14px/1 system-ui}
.crm-search:hover{border-color:var(--border-strong); background:var(--surface)}
.crm-search-ico{display:grid; place-items:center}
.crm-kbd{border-radius:7px; padding:4px 7px; background:var(--surface); border-color:var(--border)}
.crm-top-right{gap:8px}
.crm-icon-btn{width:42px; height:42px; border-radius:13px; color:var(--muted)}
.crm-icon-btn:hover{background:var(--surface-2); color:var(--ink)}
.crm-bell-dot{top:5px; right:5px; min-width:17px; height:17px; font:700 10px/17px system-ui; border:2px solid var(--surface); box-sizing:content-box}
.crm-top-sep{width:1px; height:30px; background:var(--border); margin:0 6px}
.crm-top .crm-user{width:auto; gap:11px; padding:5px 8px 5px 5px; border-radius:14px}
.crm-top .crm-user:hover{background:var(--surface-2)}
.crm-top .crm-ava{width:40px; height:40px; font:700 15px/1 system-ui; color:#fff;
  background:linear-gradient(135deg,#60A5FA 0%,#2563EB 100%)}
.crm-top .crm-user-name{font:650 14px/1.25 system-ui}
.crm-top .crm-user-role{font:400 12.5px/1.3 system-ui}
.crm-user-chev{color:var(--faint); display:grid; place-items:center}
.crm-body{padding:26px 28px 40px}
@media (max-width:860px){
  .crm-top{height:60px; padding:0 12px; gap:8px}
  .crm-burger{display:grid}
  .crm-kbd, .crm-top .crm-user-txt, .crm-user-chev, .crm-top-sep{display:none}
  .crm-top .crm-user{padding:2px}
  .crm-top .crm-ava{width:36px; height:36px}
  .crm-body{padding:16px 12px 32px}
  .crm-side{width:272px}
}

/* ---- umumiy elementlar: yumshoqroq ---- */
body.crm-on .crm-btn{height:38px; padding:0 15px; border-radius:11px; font:550 13.5px/1 system-ui;
  display:inline-flex; align-items:center; gap:8px; background:var(--surface)}
body.crm-on .crm-btn--primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink);
  box-shadow:0 8px 18px -10px rgba(37,99,235,.7)}
body.crm-on .crm-btn--ghost{background:transparent}
body.crm-on .crm-input{height:38px; border-radius:11px; padding:0 12px; background:var(--surface)}
body.crm-on textarea.crm-input{height:auto; padding:9px 12px}
body.crm-on .crm-seg{border-radius:12px; padding:3px; background:var(--surface-2); border-color:transparent}
body.crm-on .crm-seg-btn{height:30px; border-radius:9px; padding:0 13px; font-size:13px}
body.crm-on .crm-seg-btn.is-active{background:var(--surface); color:var(--brand); box-shadow:0 1px 3px rgba(15,23,42,.12)}
body.crm-on .crm-table{border-radius:16px; border-color:var(--border); box-shadow:var(--shadow)}
body.crm-on .crm-tr{min-height:52px; padding:0 16px}
body.crm-on .crm-tr--head{min-height:42px; background:var(--surface); border-bottom:1px solid var(--border)}
body.crm-on .crm-th{font:600 11.5px/1.2 system-ui; color:var(--faint); letter-spacing:.04em}
body.crm-on .crm-td{font-size:13.5px}
body.crm-on .crm-card{border-radius:18px; border-color:var(--border); box-shadow:var(--shadow); padding:18px 20px}
body.crm-on .crm-kpi{gap:14px}
body.crm-on .crm-kpi-cell{padding:16px 18px; border-radius:16px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow)}
body.crm-on .crm-kpi-val{font:700 22px/1.15 system-ui}
body.crm-on .crm-kpi-lbl{font-size:12.5px; color:var(--muted)}
body.crm-on .crm-badge{padding:3px 10px; font-size:12px}
body.crm-on .crm-toolbar{gap:10px; margin-bottom:16px}

/* ---- tonlar (ikonka plitkalari, avatarlar, voronka) — ikkala mavzuda ishlaydi ---- */
.tone-blue{background:rgba(37,99,235,.12); color:#2563EB}
.tone-sky{background:rgba(14,165,233,.14); color:#0284C7}
.tone-teal{background:rgba(20,184,166,.15); color:#0F9488}
.tone-green{background:rgba(34,197,94,.15); color:#16A34A}
.tone-amber{background:rgba(245,158,11,.17); color:#C2780A}
.tone-violet{background:rgba(139,92,246,.15); color:#7C3AED}
.tone-rose{background:rgba(244,63,94,.13); color:#E11D48}
.tone-solid{background:linear-gradient(135deg,#3B82F6,#1D4ED8); color:#fff; box-shadow:0 8px 18px -10px rgba(37,99,235,.8)}
.tone-bg-blue{background:#2563EB} .tone-bg-sky{background:#0EA5E9} .tone-bg-teal{background:#2DD4BF}
.tone-bg-amber{background:#FBBF24} .tone-bg-violet{background:#A78BFA}
.tone-fg-blue{color:#2563EB} .tone-fg-sky{color:#0284C7} .tone-fg-teal{color:#0F9488}
.tone-fg-amber{color:#C2780A} .tone-fg-violet{color:#7C3AED}

/* ---- Bosh sahifa ---- */
.crm-dash{display:flex; flex-direction:column; gap:20px; max-width:1480px; margin:0 auto}
.crm-dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.crm-dash-title{margin:0; font:750 26px/1.2 system-ui; color:var(--ink); letter-spacing:-.02em}
.crm-dash-sub{margin:4px 0 0; font:400 14px/1.4 system-ui; color:var(--muted)}
.crm-dash-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.crm-dash-row{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start}
.crm-dash-row--b{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.crm-dash-row--c{grid-template-columns:repeat(3,minmax(0,1fr))}
.crm-dcard{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:20px 22px; min-width:0}
.crm-dcard-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; min-height:30px}
.crm-dcard-h h3{margin:0; font:650 16px/1.3 system-ui; color:var(--ink)}
.crm-dlink{border:0; background:none; color:var(--brand); font:600 13px/1 system-ui; cursor:pointer; padding:6px 0}
.crm-dlink:hover{text-decoration:underline}
.crm-dcard-empty{padding:22px 0; text-align:center; font:400 13px/1.4 system-ui; color:var(--faint)}

.crm-dkpi{display:flex; align-items:center; gap:16px; padding:20px 20px}
.crm-dkpi-ico{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; flex:none}
.crm-dkpi-txt{min-width:0}
.crm-dkpi-lbl{font:500 13.5px/1.3 system-ui; color:var(--muted)}
.crm-dkpi-val{margin:3px 0 6px; font:750 30px/1.1 system-ui; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.crm-dkpi-trend{display:flex; align-items:center; gap:5px; font:500 12.5px/1.2 system-ui; color:var(--faint); flex-wrap:wrap}
.crm-dkpi-trend b{font-weight:650}
.crm-dkpi-trend.is-up .crm-svg, .crm-dkpi-trend.is-up b{color:#16A34A}
.crm-dkpi-trend.is-down .crm-svg, .crm-dkpi-trend.is-down b{color:#E11D48}

.crm-pipe2{display:flex; gap:3px; height:30px; margin:4px 0 18px}
.crm-pipe2-seg{flex:1; clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%)}
.crm-pipe2-seg:first-child{clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%); border-radius:8px 0 0 8px}
.crm-pipe2-seg:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,13px 50%); border-radius:0 8px 8px 0}
.crm-pipe2-cols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.crm-pipe2-col{display:flex; flex-direction:column; gap:6px; padding:4px 12px; border:0; border-left:1px solid var(--border);
  background:none; text-align:left; cursor:pointer; min-width:0}
.crm-pipe2-col:first-child{border-left:0; padding-left:2px}
.crm-pipe2-col:hover .crm-pipe2-n{color:var(--brand)}
.crm-pipe2-lbl{font:600 12.5px/1.2 system-ui; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crm-pipe2-n{font:750 24px/1.1 system-ui; color:var(--ink); font-variant-numeric:tabular-nums}
.crm-pipe2-amt{font:500 12.5px/1.2 system-ui; color:var(--faint); white-space:nowrap}
.crm-pipe2-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--border); font:500 13.5px/1.2 system-ui; color:var(--muted)}
.crm-pipe2-foot b{font:750 22px/1.1 system-ui; color:var(--ink); font-variant-numeric:tabular-nums}

.crm-feed{display:flex; flex-direction:column}
.crm-feed-item, .crm-mini-item{display:flex; align-items:center; gap:13px; width:100%; padding:10px 6px; margin:0 -6px;
  border:0; border-radius:12px; background:none; text-align:left; cursor:pointer; box-sizing:content-box}
.crm-feed-item:hover, .crm-mini-item:hover{background:var(--surface-2)}
.crm-feed-ico{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none}
.crm-feed-txt, .crm-mini-txt{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.crm-feed-title, .crm-mini-title{font:550 13.5px/1.3 system-ui; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-feed-sub, .crm-mini-sub{font:400 12px/1.3 system-ui; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-feed-when, .crm-mini-when{display:flex; align-items:center; gap:5px; flex:none; font:400 12px/1 system-ui; color:var(--faint); white-space:nowrap}
.crm-mini-when.is-late{color:#E11D48}

.crm-team{display:flex; flex-direction:column; gap:6px}
.crm-team-row{display:grid; grid-template-columns:36px minmax(80px,1fr) minmax(60px,1.2fr) auto 44px; align-items:center; gap:12px; padding:7px 0}
.crm-team-name{font:550 13.5px/1.3 system-ui; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-team-bar{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.crm-team-fill{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#60A5FA,#2563EB)}
.crm-team-val{font:650 13.5px/1 system-ui; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.crm-team-pct{font:600 12.5px/1 system-ui; color:#16A34A; text-align:right}
.crm-dava{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex:none; font:700 14px/1 system-ui}

.crm-lchart{position:relative; width:100%; min-height:230px}
.crm-lchart-svg{display:block; overflow:visible}
.crm-lchart-grid{stroke:var(--border); stroke-dasharray:3 4}
.crm-lchart-axis{fill:var(--faint); font:400 11.5px system-ui}
.crm-lchart-line{fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.crm-lchart-dot{fill:var(--surface); stroke:var(--brand); stroke-width:2}
.crm-lchart-dot.is-last{fill:var(--brand); stroke:var(--surface); stroke-width:3}
.crm-lchart-tip{position:absolute; display:flex; flex-direction:column; align-items:center; min-width:70px; padding:6px 10px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); pointer-events:none}
.crm-lchart-tip b{font:700 13px/1.2 system-ui; color:var(--brand)}
.crm-lchart-tip span{font:400 11px/1.2 system-ui; color:var(--faint)}

.crm-mini{display:flex; flex-direction:column; gap:2px}
.crm-mini-tile{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none; font:700 15px/1 system-ui}
.crm-date-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; width:44px; height:48px; flex:none;
  border-radius:12px; background:var(--surface-2); border:1px solid var(--border)}
.crm-date-tile small{font:650 9.5px/1 system-ui; color:var(--brand); text-transform:uppercase; letter-spacing:.06em}
.crm-date-tile b{font:750 18px/1.15 system-ui; color:var(--ink)}
.crm-date-tile.is-late small{color:#E11D48}
.crm-pill{flex:none; padding:5px 11px; border-radius:99px; font:650 12px/1 system-ui; white-space:nowrap}

@media (max-width:1280px){
  .crm-dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-dash-row--c{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .crm-dash-row, .crm-dash-row--b, .crm-dash-row--c{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .crm-dash-kpis{grid-template-columns:minmax(0,1fr)}
  .crm-dash-title{font-size:21px}
  .crm-dcard{padding:16px}
  .crm-dkpi-val{font-size:26px}
  .crm-pipe2-cols{grid-template-columns:repeat(5,minmax(64px,1fr)); overflow-x:auto}
  .crm-pipe2-n{font-size:19px}
  .crm-team-row{grid-template-columns:32px minmax(60px,1fr) auto 40px}
  .crm-team-bar{display:none}
}
/* Yig'ilgan yon panel faqat panelning o'zini yig'adi — topbardagi ism qoladi. */
@media (min-width:861px){ body.crm-collapsed .crm-top .crm-user-txt{display:flex} }
.crm-search-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
@media (max-width:860px){
  .crm-search{min-width:0; flex:1 1 auto}
  .crm-top-right{gap:0; flex:none}
  .crm-icon-btn{width:38px; height:38px}
}
@media (max-width:640px){
  .crm-pipe2-foot{flex-wrap:wrap}
  .crm-pipe2-foot b{font-size:18px; white-space:nowrap}
}

/* ===== CRM yangi ko'rinish — qolgan bo'limlar (2026-09-17) ===== */
/* Bo'lim sarlavhasi */
.crm-page-head{display:flex; align-items:center; gap:14px; margin:0 0 20px}
.crm-page-ico{display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:14px;
  background:var(--brand-soft); color:var(--brand)}
.crm-page-txt{min-width:0}
.crm-page-title{margin:0; font:750 24px/1.2 system-ui; color:var(--ink); letter-spacing:-.02em}
.crm-page-sub{margin:3px 0 0; font:400 13.5px/1.4 system-ui; color:var(--muted)}
@media (max-width:640px){
  .crm-page-head{gap:11px; margin-bottom:14px}
  .crm-page-ico{width:40px; height:40px; border-radius:12px}
  .crm-page-title{font-size:20px}
  .crm-page-sub{font-size:12.5px}
}

/* Asboblar paneli va filtrlar */
body.crm-on .crm-toolbar{gap:10px; margin-bottom:18px}
body.crm-on .crm-f{max-width:220px; color:var(--ink)}
body.crm-on select.crm-input{padding-right:30px}
body.crm-on .crm-search-input{min-width:260px}
body.crm-on .crm-input:focus, body.crm-on .crm-btn:focus-visible, body.crm-on .crm-seg-btn:focus-visible{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}

/* Kanban */
body.crm-on .crm-kanban{gap:16px; grid-auto-columns:minmax(264px,1fr); padding-bottom:10px}
body.crm-on .crm-kcol{gap:10px; padding:12px; border:1px solid var(--border); border-radius:18px; background:var(--surface-2)}
body.crm-on .crm-kcol.is-over{border-color:var(--brand); background:var(--brand-soft)}
body.crm-on .crm-kcol-top{padding:2px 4px 4px}
body.crm-on .crm-kcol-name{font:650 13.5px/1.25 system-ui}
body.crm-on .crm-kcount{min-width:24px; padding:3px 8px; border-radius:99px; background:var(--surface); color:var(--muted);
  font:650 12px/1.2 system-ui; text-align:center; box-shadow:0 1px 2px rgba(15,23,42,.06)}
body.crm-on .crm-kcol-list{gap:10px}
body.crm-on .crm-kcard{gap:5px; padding:13px 14px; border-radius:14px; border-color:var(--border);
  box-shadow:0 1px 2px rgba(15,23,42,.05); transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease}
body.crm-on .crm-kcard:hover{border-color:var(--border-strong); box-shadow:0 10px 22px -14px rgba(15,23,42,.35); transform:translateY(-1px)}
/* Kartochkalar bir-biridan ajralib tursin: aniq ramka + chap tomonda rangli chiziq */
body.crm-on .crm-kcard{border:1px solid var(--border-strong); border-left:4px solid var(--brand);
  background:var(--surface); box-shadow:0 2px 6px -2px rgba(15,23,42,.12)}
body.crm-on .crm-kcard:hover{border-color:var(--brand); border-left-color:var(--brand)}
body.crm-on .crm-kcard.is-stuck{border-left-color:var(--rose)}
body.crm-on .crm-kcard-name{font:650 14px/1.3 system-ui}
body.crm-on .crm-kcard-sub{font-size:12.5px}
body.crm-on .crm-kcard-foot{margin-top:6px; padding-top:8px; border-top:1px dashed var(--border); font-size:11.5px}
body.crm-on .crm-kempty{padding:18px 6px; border:1.5px dashed var(--border-strong); border-radius:12px; font-size:12.5px}

/* Oynalar (sheet), menyu */
body.crm-on .crm-backdrop{background:rgba(15,23,42,.38); backdrop-filter:blur(3px)}
body.crm-on .crm-sheet{border-radius:22px 0 0 22px; border-left:0; box-shadow:-24px 0 60px -30px rgba(15,23,42,.45)}
body.crm-on .crm-sheet--full{border-radius:0}
body.crm-on .crm-sheet-top{padding:18px 22px; min-height:64px}
body.crm-on .crm-sheet-title{font:700 17px/1.3 system-ui}
body.crm-on .crm-sheet-body{padding:20px 22px; gap:14px}
body.crm-on .crm-sheet-foot{padding:14px 22px; gap:10px; background:var(--surface)}
body.crm-on .crm-menu-item{padding:12px 14px; border-radius:12px; font-size:14px}
body.crm-on .crm-field{gap:6px}
body.crm-on .crm-field-lbl{font:600 11.5px/1 system-ui; letter-spacing:.04em}
body.crm-on .crm-field .crm-input{height:40px}
@media (max-width:640px){ body.crm-on .crm-sheet{border-radius:0} }

/* Mijoz kartochkasi */
body.crm-on .crm-lcx-name{font:750 22px/1.25 system-ui; letter-spacing:-.01em}
body.crm-on .crm-lcx-actions{gap:8px}
body.crm-on .crm-lcx-sec-title{font:650 11.5px/1 system-ui; letter-spacing:.06em}
body.crm-on .crm-tlf-chip{height:32px; padding:0 14px; font-size:13px; background:var(--surface)}
body.crm-on .crm-tlf-chip.is-active{background:var(--brand); color:var(--brand-ink); box-shadow:0 6px 14px -8px rgba(37,99,235,.7)}

/* Chat */
body.crm-on .crm-chat{gap:18px; height:calc(100dvh - 70px - 66px - 70px)}
body.crm-on .crm-chat-list, body.crm-on .crm-chat-thread{border-radius:20px; border-color:var(--border); box-shadow:var(--shadow)}
body.crm-on .crm-chat-list-top{padding:14px 14px 10px; border-bottom:0}
body.crm-on .crm-chat-list-search{padding:0 14px 12px}
body.crm-on .crm-chat-items{padding:4px 8px 10px}
body.crm-on .crm-chat-item{gap:12px; padding:10px 10px; border-radius:14px}
body.crm-on .crm-chat-item:hover{background:var(--surface-2)}
body.crm-on .crm-chat-item.is-cur{background:var(--brand-soft)}
body.crm-on .crm-chat-item-name{font:650 14px/1.3 system-ui}
body.crm-on .crm-chat-item .crm-ava, body.crm-on .crm-chat-head .crm-ava{width:40px; height:40px; font:700 15px/1 system-ui;
  color:#fff; background:linear-gradient(135deg,#60A5FA,#2563EB)}
body.crm-on .crm-chat-item .crm-ava.is-staff, body.crm-on .crm-chat-head .crm-ava.is-staff{background:linear-gradient(135deg,#34D399,#0F9488)}
body.crm-on .crm-chat-head{padding:14px 18px; gap:12px}
body.crm-on .crm-chat-head-name{font:700 15px/1.3 system-ui}
body.crm-on .crm-msgs{padding:18px 20px; gap:8px; background:var(--bg)}
body.crm-on .crm-msg{padding:10px 14px; border-radius:16px 16px 16px 5px; box-shadow:0 1px 2px rgba(15,23,42,.05)}
body.crm-on .crm-msg.is-mine{border-radius:16px 16px 5px 16px; background:var(--brand-soft)}
body.crm-on .crm-chat-composer{padding:12px 16px 14px; gap:8px}
body.crm-on .crm-chat-input{border-radius:14px; min-height:48px}
body.crm-on .crm-chat-group{padding:12px 10px 6px}
@media (max-width:860px){ body.crm-on .crm-chat{height:calc(100dvh - 60px - 48px - 62px)} }

/* Sozlamalar va boshqa kartalar */
body.crm-on .crm-set-card{padding:20px 22px; margin-bottom:18px; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow)}
body.crm-on .crm-set-title{font:700 16px/1.3 system-ui}
body.crm-on .crm-set-tabs{margin-bottom:18px}
body.crm-on .crm-dup-card, body.crm-on .crm-doc-note{border-radius:14px}

/* Bo'sh holat va skelet */
body.crm-on .crm-state{padding:64px 20px; gap:10px}
body.crm-on .crm-state-title{font:650 16px/1.3 system-ui}
body.crm-on .crm-state-hint{font-size:13.5px}
body.crm-on .crm-tfoot{padding:12px 16px}
body.crm-on .crm-tbody .crm-tr:hover{background:var(--brand-soft)}
body.crm-on .crm-kpi-cell.is-warn{border-color:rgba(244,63,94,.35)}
/* Tuzatishlar: telefon ro'yxati, segmentlar, summalar, Kanban kartasi */
body.crm-on .crm-kcard-foot{padding-top:0; border-top:0}
body.crm-on .crm-kcard-foot:empty{display:none}
body.crm-on .crm-seg{max-width:100%; overflow-x:auto; scrollbar-width:none}
body.crm-on .crm-seg::-webkit-scrollbar{display:none}
body.crm-on .crm-seg-btn{white-space:nowrap; flex:none}
body.crm-on .crm-sums{gap:12px; margin-bottom:18px}
body.crm-on .crm-sum{padding:14px 18px; min-width:170px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow)}
body.crm-on .crm-sum-val{font:750 19px/1.25 system-ui}
body.crm-on .crm-sums--card .crm-sum{box-shadow:none; padding:10px 14px; min-width:130px}
@media (max-width:860px){
  body.crm-on .crm-tbody .crm-tr{padding:14px 16px; gap:6px; min-height:0}
  body.crm-on .crm-sums{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  body.crm-on .crm-sum{min-width:0; padding:12px 14px}
  body.crm-on .crm-sum-val{font-size:16px}
}
body.crm-on .crm-docs-kpi{margin:0 0 18px}
@media (max-width:640px){
  body.crm-on .crm-kpi{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  body.crm-on .crm-toolbar-right, body.crm-on .crm-toolbar-left{flex-wrap:wrap; width:100%; margin-left:0}
  body.crm-on .crm-toolbar select.crm-input{flex:1 1 140px; min-width:0; max-width:none}
  body.crm-on .crm-toolbar .crm-search-input, body.crm-on .crm-toolbar input[type="search"]{flex:1 1 100%; min-width:0}
}

/* ===== CRM — Xodimlar → Davomat (crm/attend.js) ===== */
.crm-staff-top{flex-wrap:wrap}
.crm-att-date{width:auto; min-width:150px}
.crm-att-chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px}
.crm-att-chip{display:flex; align-items:baseline; gap:8px; padding:10px 16px; border-radius:14px; border:1px solid var(--border);
  font:500 13px/1.2 system-ui}
.crm-att-chip b{font:750 20px/1 system-ui}
.crm-att-who{display:flex; flex-direction:column; gap:2px; min-width:0}
.crm-att-warn{font:500 11px/1.2 system-ui; color:var(--amber, #B45309)}
.crm-att-time{display:inline-flex; align-items:center; gap:6px}
.crm-att-tag{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
  font:600 10.5px/1 system-ui; background:var(--surface-2); color:var(--muted)}
.crm-att-tag.is-ok{background:transparent}
.crm-att-tag.is-warn{background:var(--rose-soft); color:var(--rose)}
.crm-att-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.crm-att-photo{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface)}
.crm-att-photo-img{aspect-ratio:3/4; display:grid; place-items:center; background:var(--surface-2); color:var(--faint);
  font:500 12.5px/1.3 system-ui; text-align:center; padding:8px}
.crm-att-photo-img:has(img){padding:0}
.crm-att-photo-img img{width:100%; height:100%; object-fit:cover; display:block}
.crm-att-photo-cap{padding:8px 10px; font:600 12.5px/1.2 system-ui}
.crm-att-pair{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end}
.crm-att-hist{display:flex; flex-direction:column; gap:2px}
.crm-att-hrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 2px; border-bottom:1px solid var(--border);
  font-size:13px}
.crm-att-hrow:last-child{border-bottom:0}
.crm-att-hrow .crm-btn{margin-left:auto}
.crm-att-hday{min-width:44px; font:600 12.5px/1 system-ui; font-variant-numeric:tabular-nums}
.crm-att-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.crm-att-day{height:40px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted);
  font:650 13px/1 system-ui; cursor:pointer}
.crm-att-day.is-on{background:var(--brand); border-color:var(--brand); color:var(--brand-ink, #fff)}
.crm-att-presets{display:flex; flex-wrap:wrap; gap:8px}
.crm-att-cb{width:18px; height:18px; accent-color:var(--brand); cursor:pointer}
.crm-att-kiosks{display:flex; flex-direction:column}
@media (max-width:640px){
  .crm-att-pair{grid-template-columns:1fr}
  .crm-staff-top .crm-seg{width:100%; overflow-x:auto}
}
/* Qizil tugma yangi dizayndagi `body.crm-on .crm-btn` foni ostida oq bo'lib qolgan edi (matn ko'rinmasdi) */
body.crm-on .crm-btn--danger{background:var(--rose); border-color:var(--rose); color:#fff}
body.crm-on .crm-btn--danger:hover{filter:brightness(.95)}

/* ===== CRM — Xodimlar dashboardi (crm/attend.js mountDash, bosh sahifa kartasi) ===== */
.crm-att-kpi{font:inherit; text-align:left; cursor:pointer; color:inherit; width:100%}
.crm-att-kpi:hover{border-color:var(--border-strong)}
.crm-att-home .crm-dcard-h{margin-bottom:12px}
.crm-att-notice{display:flex; flex-direction:column; gap:8px; border-color:var(--brand); background:var(--brand-soft)}
.crm-att-notice p{margin:0}
.crm-dash-row--eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.crm-att-live{display:flex; flex-direction:column; max-height:320px; overflow:auto}
.crm-att-live-row{display:grid; grid-template-columns:10px minmax(0,1fr) auto 96px; align-items:center; gap:10px;
  padding:9px 2px; border-bottom:1px solid var(--border); font-size:13.5px}
.crm-att-live-row:last-child{border-bottom:0}
.crm-att-live-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-att-live-when{display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; color:var(--muted); font-size:12.5px}
.crm-att-live-st{text-align:right; color:var(--muted); font-size:12.5px}
.crm-att-dot{width:10px; height:10px; border-radius:50%; background:var(--border-strong)}
.crm-att-dot.is-green{background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.crm-att-dot.is-blue{background:#3B82F6}
.crm-att-dot.is-rose{background:#E11D48}
.crm-att-chart{width:100%; min-height:220px}
.crm-att-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12.5px; color:var(--muted)}
.crm-att-legend > span{display:inline-flex; align-items:center; gap:6px}
.crm-att-legend i{width:10px; height:10px; border-radius:3px; display:inline-block}
.crm-att-bar-row{grid-template-columns:22px minmax(90px,1.1fr) minmax(60px,1.2fr) auto}
.crm-att-bar-row .crm-team-name{display:flex; align-items:center; gap:6px}
.crm-att-rank{font:650 12px/1 system-ui; color:var(--faint); text-align:center; font-variant-numeric:tabular-nums}
.crm-att-pill{flex:none; padding:2px 7px; border-radius:99px; font:650 10.5px/1.3 system-ui}
.crm-att-pill.is-green{background:rgba(22,163,74,.14); color:#15803D}
.crm-att-pill.is-rose{background:rgba(225,29,72,.12); color:#BE123C}
.crm-team-fill.is-amber{background:linear-gradient(90deg,#FCD34D,#F59E0B)}
.crm-team-fill.is-great{background:linear-gradient(90deg,#4ADE80,#16A34A)}
.crm-team-fill.is-good{background:linear-gradient(90deg,#60A5FA,#2563EB)}
.crm-team-fill.is-mid{background:linear-gradient(90deg,#FCD34D,#F59E0B)}
.crm-team-fill.is-bad{background:linear-gradient(90deg,#FDA4AF,#E11D48)}
.crm-att-rank-tbl{display:flex; flex-direction:column}
.crm-att-rank-row{display:grid; grid-template-columns:28px minmax(120px,1.2fr) minmax(200px,1.6fr) 90px 90px 100px 110px;
  align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--border); font-size:13.5px; font-variant-numeric:tabular-nums}
.crm-att-rank-row:last-child{border-bottom:0}
.crm-att-rank-row.is-head{font:600 11.5px/1.2 system-ui; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; padding-top:0}
.crm-att-rank-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-att-score{display:grid; grid-template-columns:minmax(50px,1fr) 30px auto; align-items:center; gap:8px}
.crm-att-score b{text-align:right}
@media (max-width:1100px){ .crm-dash-row--eq{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){
  .crm-att-rank-row.is-head{display:none}
  .crm-att-rank-row{grid-template-columns:24px minmax(0,1fr); row-gap:6px}
  .crm-att-rank-row > .crm-att-score{grid-column:2}
  .crm-att-rank-row > span[data-l]{grid-column:2; display:flex; justify-content:space-between; font-size:12.5px}
  .crm-att-rank-row > span[data-l]::before{content:attr(data-l); color:var(--faint)}
  .crm-att-live-row{grid-template-columns:10px minmax(0,1fr) auto; row-gap:2px}
  .crm-att-live-when{grid-column:2}
  .crm-att-live-st{grid-column:3; grid-row:1}
}
/* Telefon: bosh sahifa jamoa kartasidagi «chiziqni yashirish» qoidasi davomat kartalariga tegmasin */
@media (max-width:860px){
  .crm-att-bar-row{grid-template-columns:18px minmax(0,1fr) auto; row-gap:6px}
  .crm-att-bar-row .crm-team-bar{display:block; grid-column:2 / 4; grid-row:2}
  .crm-att-dash .crm-team-bar, .crm-att-score .crm-team-bar{display:block}
  .crm-att-rank-row > *{min-width:0}
  .crm-att-score{grid-template-columns:minmax(40px,1fr) 28px auto}
}
/* Telefon: xodimlar kartalari 2 ustunda, ixcham — bosh sahifani cho'zib yubormasin */
@media (max-width:640px){
  .crm-att-kpi.crm-dkpi{flex-direction:column; align-items:flex-start; gap:8px; padding:14px}
  .crm-dash-kpis:has(.crm-att-kpi){grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .crm-att-kpi .crm-dkpi-ico{width:38px; height:38px}
  .crm-att-kpi .crm-dkpi-ico .crm-svg{width:19px; height:19px}
  .crm-att-kpi .crm-dkpi-val{font-size:24px; margin:2px 0 4px}
  .crm-att-kpi .crm-dkpi-trend{font-size:11.5px}
}
@media (max-width:860px){
  .crm-att-live-row{grid-template-columns:10px minmax(0,1fr) auto; grid-template-areas:"dot name st" ". when when"}
  .crm-att-live-row > .crm-att-dot{grid-area:dot}
  .crm-att-live-row > .crm-att-live-name{grid-area:name}
  .crm-att-live-row > .crm-att-live-st{grid-area:st}
  .crm-att-live-row > .crm-att-live-when{grid-area:when; display:flex; gap:8px; align-items:center}
  .crm-att-live-when:empty{display:none}
}

/* Chat → Hujjatlar: fayl xabaridagi «saqlash» tugmasi, sarlavhadagi havolalar */
.crm-msg-file{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.crm-msg-save{width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:14px; line-height:1}
.crm-msg-save:hover{border-color:var(--brand)}
.crm-msg-save.is-done{color:#16A34A; border-color:#16A34A}
.crm-chat-filetag.is-fixed{cursor:default}
@media (max-width:640px){ .crm-chat-head{flex-wrap:wrap} .crm-chat-head .crm-link{font-size:12px} }
/* `hidden` atributi display:flex/grid berilgan maydonlarda ishlamay qolgan edi (hujjat qo'shish oynasi) */
.crm-field[hidden], .crm-set-check[hidden], .crm-chat-filetag[hidden]{display:none !important}
/* Chat sarlavhasi: havolalar ko'paygach ism «Z.» gacha siqilib qolardi — joy yetmasa havolalar pastki qatorga tushadi */
.crm-chat-head{flex-wrap:wrap; row-gap:6px}
.crm-chat-head-txt{min-width:150px}
.crm-chat-head .crm-link{white-space:nowrap}