: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}

/* 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}
.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}
.add-btn{margin-top:10px; width:100%; padding:11px; border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-sm); background:transparent; color:var(--brand); font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit}
.add-btn:disabled{opacity:.4; cursor:default}

/* 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 */
.stepper{display:flex; align-items:center; gap:14px}
.stepper button{width:46px; height:46px; border-radius:12px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:22px; cursor:pointer; flex:none}
.stepper .val{font-size:22px; font-weight:700; min-width:44px; text-align:center; font-variant-numeric:tabular-nums}
.exp-input{flex:1; min-width:0; padding:12px; font-size:20px; font-weight:700; text-align:center;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
  outline:none; font-family:inherit; font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.exp-input:focus{border-color:var(--brand)}
.exp-input::-webkit-outer-spin-button,.exp-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
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}
.roadmap-wrap{position:relative; width:100%; padding:2px 0}

/* 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}
.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}
.rm-sub{margin-top:4px}
.rm-date{font-size:11.5px; font-weight:600; color:var(--brand)}
.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}
.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}

/* --- 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}
.emp-tabs{display:flex; gap:8px; margin-bottom:16px}
.emp-tab{flex:1; text-align:center; padding:11px; border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--border); font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer}
.emp-tab.on{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.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}
.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}
.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}
.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}
.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}

  /* 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 #payAdmList, 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 #payAdmList > *, 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}
.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}
.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-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}
}