/*
 * RANG TIZIMI — BUTUN ILOVA SHU YERDAN BO'YALADI.
 *
 * Palitra: Midnight Blue #10202d · Muted Gold #c7a667 · Soft White #f7f7f7
 *
 * Har bir qiymat HISOBLANGAN, tanlangan emas: matn ranglari fonga
 * nisbatan aniq kontrast nisbatiga sozlangan (WCAG):
 *   --ink   ~15:1   asosiy matn
 *   --muted  ~7:1   ikkinchi darajali
 *   --faint ~4.6:1  eng zaif, lekin HALI HAM o'qiladigan
 * Ilgari --faint 2.68:1 edi - quyoshda telefonda o'qilmasdi.
 *
 * OLTIN HAQIDA MUHIM QOIDA. Oltin oq fonda 2.16:1 beradi - matn
 * sifatida yaroqsiz. Shuning uchun ikkita alohida o'zgaruvchi bor:
 *   --acc      yuza (fon) sifatida; ustiga --acc-ink yoziladi
 *   --acc-text matn sifatida (yorug' rejimda qoraytirilgan oltin)
 * Ularni almashtirib yubormang.
 *
 * CSS'dan TASHQARIDA rang qattiq yozilgan uch joy - qayta bo'yashda
 * qo'lda yangilanadi:
 *   1. davomat.html <meta name="theme-color">
 *   2. davomat.html GEO_RANG (xarita) va kamera halqasi
 *   3. admin.js integratsiya kartochkalari - ular BREND rangi, tegilmaydi
 */
:root {
  color-scheme: light;

  /* YUZALAR.
     Yorug' rejimda hamma narsa oqqa yaqin bo'lsa, shisha ko'rinmaydi -
     "shaffof oq" oddiy oq bo'lib qoladi. Shuning uchun sahifa foni
     kartochkadan sezilarli quyuqroq va unga palitradan biroz tus
     berilgan (sof kulrang emas, tun ko'kiga moyil). */
  --paper:#EDEEF0; --surface:#FFFFFF; --surface-2:#F2F3F5;
  --line:#D8DBDE; --line-2:#E8EAEC;

  /* matn - hisoblangan kontrast */
  /* eng quyuq yorug' yuzada (sahifa foni #EDEEF0) ham 4.6:1 dan past emas */
  --ink:#10202D; --muted:#4A5660; --faint:#626C74;

  /* asosiy harakat rangi */
  --indigo:#10202D; --indigo-dark:#060E15; --indigo-soft:#E6E9EB;
  --btn-ink:#F7F7F7;

  /* urg'u - oltin */
  --acc:#C7A667; --acc-ink:#10202D; --acc-text:#7E673B; --acc-soft:#F3EADA;

  /* Ma'noli rang FONIDA turadigan matn. Yorug'da ranglar quyuq -
     oq yozuv o'tadi; qorong'ida ular yorug'lashadi va oq yozuv
     yiqiladi, shuning uchun tun rangi. */
  --on-ok:#FFFFFF; --on-bad:#FFFFFF; --on-warn:#FFFFFF;

  /* ma'noli ranglar */
  --ok:#1F7A4D;   --ok-soft:#E6F1EB;
  --bad:#A62F2F;  --bad-soft:#F7E9E9;
  --warn:#8A5F0A; --warn-soft:#F7EFDF;
  --info:#1F5F96; --info-soft:#E5EDF4;
  --lilac:#5B4BA8; --lilac-soft:#ECEAF6;
  --fig:#E6E9EB;

  /* issiqlik xaritasi */
  --h-in:#3E9E77; --h-late:#C08C2B; --h-absent:#C86A6A; --h-leave:#7E71C0; --h-off:#E7E8E9;

  /* SHISHA MATERIALI.
     `--glass` yarim shaffof yuza, `--glass-line` yuqori qirradagi
     yorug'lik. Blur qiymati ataylab kichik: katta blur arzon
     telefonlarda har kadrda qayta chiziladi va ilova sekinlashadi. */
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.42);
  --glass-line:rgba(255,255,255,.85);
  --glass-edge:rgba(16,32,45,.14);
  --glass-blur:16px;

  --video-bg:#0A1219;

  /* fon ambiyenti - shisha ostidan ko'rinadigan yumshoq yorug'lik.
     Kuchli bo'lsa matn kontrasti joyiga qarab o'zgaradi, shuning
     uchun shaffofligi past va faqat SAHIFA fonida - kontent
     kartochkalari qattiq yuzada qoladi. */
  --amb-1:rgba(199,166,103,.42);
  --amb-2:rgba(16,32,45,.14);
  --amb-3:rgba(199,166,103,.20);

  --r:12px; --r-card:18px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(16,32,45,.05);
  --shadow-pop:0 12px 34px rgba(16,32,45,.14);
  --shadow-glass:0 8px 28px rgba(16,32,45,.10);

  /* harakat - bir joyda, shunda butun ilova bir xil "his" beradi */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:.16s; --mid:.26s; --slow:.4s;

  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/*
 * QORONG'I REJIM.
 *
 * Faqat ranglar qayta e'lon qilinadi - o'lchamlar, burchaklar va
 * harakat bir xil qoladi. Shuning uchun har bir komponentni ikki
 * marta yozish kerak emas.
 *
 * Qorong'ida asosiy tugma OLTIN bo'ladi, ustiga tun rangi yoziladi:
 * oltin fonda oq matn 2.16:1 (yiqiladi), tun matn esa 7.17:1.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:#0B1721; --surface:#1E2D39; --surface-2:#293843;
  --line:#3A4751; --line-2:#2E3C47;

  --ink:#F7F7F7; --muted:#B3B8BB; --faint:#8E959B;

  --indigo:#C7A667; --indigo-dark:#B8945A; --indigo-soft:#2A3742;
  --btn-ink:#10202D;

  --acc:#C7A667; --acc-ink:#10202D; --acc-text:#C7A667; --acc-soft:#2E3A36;

  --ok:#6BA88A;   --ok-soft:#1E3730;
  --bad:#C98080;  --bad-soft:#3A2828;
  --warn:#B2965E; --warn-soft:#36302180;
  --on-ok:#10202D; --on-bad:#10202D; --on-warn:#10202D;
  --info:#749CBD; --info-soft:#1F3040;
  --lilac:#9C8FD8; --lilac-soft:#2B2A41;
  --fig:#2A3742;

  --h-in:#3E9E77; --h-late:#B0862F; --h-absent:#B76666; --h-leave:#7E71C0; --h-off:#243139;

  --glass:rgba(41,56,67,.66);
  --glass-2:rgba(41,56,67,.44);
  --glass-line:rgba(255,255,255,.10);
  --glass-edge:rgba(0,0,0,.35);

  --video-bg:#050B10;
  --amb-1:rgba(199,166,103,.16);
  --amb-2:rgba(90,130,175,.14);
  --amb-3:rgba(199,166,103,.08);

  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:0 12px 34px rgba(0,0,0,.55);
  --shadow-glass:0 8px 28px rgba(0,0,0,.45);
}

/* Tizim sozlamasiga ergashish - foydalanuvchi o'zi tanlamagan bo'lsa. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#0B1721; --surface:#1E2D39; --surface-2:#293843;
    --line:#3A4751; --line-2:#2E3C47;
    --ink:#F7F7F7; --muted:#B3B8BB; --faint:#8E959B;
    --indigo:#C7A667; --indigo-dark:#B8945A; --indigo-soft:#2A3742;
    --btn-ink:#10202D;
    --acc:#C7A667; --acc-ink:#10202D; --acc-text:#C7A667; --acc-soft:#2E3A36;
    --ok:#6BA88A;   --ok-soft:#1E3730;
    --bad:#C98080;  --bad-soft:#3A2828;
    --warn:#B2965E; --warn-soft:#36302180;
    --on-ok:#10202D; --on-bad:#10202D; --on-warn:#10202D;
    --info:#749CBD; --info-soft:#1F3040;
    --lilac:#9C8FD8; --lilac-soft:#2B2A41;
    --fig:#2A3742;
    --h-in:#3E9E77; --h-late:#B0862F; --h-absent:#B76666; --h-leave:#7E71C0; --h-off:#243139;
    --glass:rgba(41,56,67,.66);
    --glass-2:rgba(41,56,67,.44);
    --glass-line:rgba(255,255,255,.10);
    --glass-edge:rgba(0,0,0,.35);
    --video-bg:#050B10;
    --amb-1:rgba(199,166,103,.16);
    --amb-2:rgba(90,130,175,.14);
    --amb-3:rgba(199,166,103,.08);
  --amb-1:rgba(199,166,103,.16);
  --amb-2:rgba(90,130,175,.14);
  --amb-3:rgba(199,166,103,.08);
    --shadow-card:0 1px 2px rgba(0,0,0,.35);
    --shadow-pop:0 12px 34px rgba(0,0,0,.55);
    --shadow-glass:0 8px 28px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/*
 * FON.
 *
 * Shisha ostidan nimadir ko'rinishi kerak, aks holda "shisha" oddiy
 * kulrang to'rtburchakka aylanadi. Lekin bu juda YUMSHOQ bo'lishi
 * shart: kuchli gradient matn kontrastini joyiga qarab o'zgartiradi
 * va o'qishni buzadi.
 *
 * `fixed` - aylantirganda fon qimirlamaydi, ya'ni shisha ostidagi
 * manzara barqaror turadi va har kadrda qayta hisoblanmaydi.
 */
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(58rem 40rem at 92% -8%, var(--amb-1) 0%, transparent 58%),
    radial-gradient(48rem 36rem at -8% 10%, var(--amb-2) 0%, transparent 60%),
    radial-gradient(40rem 30rem at 40% 105%, var(--amb-3) 0%, transparent 58%);
  background-attachment:fixed;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.012em}
p{margin:0 0 .8em}
a{color:var(--indigo)}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2.5px solid var(--acc); outline-offset:2px; border-radius:4px}
.hidden{display:none !important}
/* HTML `hidden` atributi sinf qoidalaridan kuchsizroq - shuni to'g'rilaymiz */
[hidden]{display:none !important}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------------- umumiy elementlar ---------------- */
/*
 * TUGMA.
 *
 * Matn rangi `--btn-ink` orqali: qorong'i rejimda asosiy tugma OLTIN
 * bo'ladi va unga oq yozuv yaramaydi (2.16:1). Tun rangi esa 7.17:1.
 *
 * Bosilganda tugma 1% kichrayadi - bu "tactile" hissini beradi va
 * hech qanday rasm yoki soya talab qilmaydi.
 */
.btn{
  display:inline-block; text-decoration:none; text-align:center; position:relative;
  border:1px solid var(--indigo); background:var(--indigo); color:var(--btn-ink);
  padding:.7em 1.35em; border-radius:var(--r-pill); font-weight:500;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
             transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  will-change:transform;
}
.btn:hover:not(:disabled){background:var(--indigo-dark); box-shadow:var(--shadow-card)}
.btn:active:not(:disabled){transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--indigo)}
.btn.ghost:hover:not(:disabled){background:var(--indigo-soft)}

/* Ikkilamchi tugmalar - shisha materiali. Asosiysidan zaifroq
   kontrastda, lekin qirrasi yorug' bo'lgani uchun baribir ko'rinadi. */
.btn.quiet{
  background:var(--glass-2); border-color:var(--glass-line); color:var(--ink);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
}
.btn.quiet:hover:not(:disabled){background:var(--glass); border-color:var(--line)}
.btn.danger{background:transparent; border-color:var(--bad); color:var(--bad)}
.btn.danger:hover:not(:disabled){background:var(--bad-soft)}
.btn.sm{padding:.45em .9em; font-size:.88rem}

label{display:block; font-size:.87rem; color:var(--muted); margin-bottom:.3em}
/*
 * MAYDONLAR.
 *
 * Shisha, lekin YENGIL: maydon ichida matn yoziladi, shuning uchun
 * fon deyarli shaffof emas. Fokus holati oltin halqa bilan - u
 * ikkala rejimda ham ko'rinadi va rangi ma'noli emas (xato/ogohlantirish
 * ranglari band).
 */
input,select,textarea{
  font:inherit; width:100%; padding:.65em .8em; color:var(--ink);
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){
  border-color:var(--muted);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--acc); background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 28%, transparent);
}
input:disabled,select:disabled,textarea:disabled{opacity:.55; cursor:not-allowed}
@supports not (backdrop-filter: blur(1px)) {
  input,select,textarea{background:var(--surface)}
}
input:focus,select:focus,textarea:focus{border-color:var(--indigo); outline:none;
  box-shadow:0 0 0 3px var(--indigo-soft)}
textarea{resize:vertical; min-height:92px; line-height:1.5}

/*
 * BILDIRISHNOMA.
 *
 * Chap qirrada rangli chiziq - rang ko'rmaydigan foydalanuvchi uchun
 * ham shakl farqi qoladi. Faqat fon rangiga tayanish xato bo'lardi.
 */
.notice{padding:.75em 1em .75em 1.05em; border-radius:var(--r); font-size:.92rem;
  margin:0 0 1em; border-left:3px solid transparent;
  animation:noticeKir var(--mid) var(--ease)}
@keyframes noticeKir{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.notice.err{background:var(--bad-soft); color:var(--bad); border-left-color:var(--bad)}
.notice.ok{background:var(--ok-soft); color:var(--ok); border-left-color:var(--ok)}
.notice.warn{background:var(--warn-soft); color:var(--warn); border-left-color:var(--warn)}

/* ---------------- shkala (asosiy vizual element) ---------------- */
.scale{display:flex; gap:3px; align-items:flex-end; height:22px}
.scale i{
  flex:1; height:9px; background:var(--line); border-radius:2px;
  transition:height .18s ease, background .18s ease;
}
.scale i.done{background:var(--indigo); height:14px}
.scale i.now{background:var(--acc); height:22px}

/* ================= KANDIDAT ================= */
.shell{max-width:660px; margin:0 auto; padding:22px 18px 60px}

.intro-mark{display:flex; gap:4px; align-items:flex-end; height:44px; margin-bottom:26px}
.intro-mark i{width:9px; background:var(--indigo); border-radius:2px; opacity:.22}
.intro h1{font-size:1.72rem; line-height:1.2; margin-bottom:.35em}
.intro .lede{color:var(--muted); max-width:52ch}

.facts{
  display:flex; gap:0; margin:22px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.facts div{flex:1; padding:14px 0}
.facts div + div{border-left:1px solid var(--line-2); padding-left:16px}
.facts b{display:block; font-family:var(--mono); font-size:1.35rem; font-weight:500}
.facts span{font-size:.8rem; color:var(--muted)}

.stages{list-style:none; margin:0 0 26px; padding:0; counter-reset:s}
.stages li{
  position:relative; padding:.42em 0 .42em 30px; font-size:.93rem; color:var(--muted);
  counter-increment:s;
}
.stages li::before{
  content:counter(s); position:absolute; left:0; top:.5em; width:19px; height:19px;
  border:1px solid var(--line); border-radius:50%; font-size:.7rem; line-height:17px;
  text-align:center; color:var(--faint); font-family:var(--mono);
}
.stages li:first-child{color:var(--ink); font-weight:500}
.stages li:first-child::before{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}

/*
 * .card - onboarding va ro'yxatdan o'tish uchun. Bu ekranlarda
 * jadval yo'q, matn kalta - shisha xavfsiz va ilovaning materialini
 * birinchi uchrashuvda ko'rsatadi.
 */
.card{
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-card);
  padding:26px;
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-line);
}
@supports not (backdrop-filter: blur(1px)) { .card{background:var(--surface)} }
.field{margin-bottom:14px}
.rules{font-size:.88rem; color:var(--muted); margin:18px 0 0; padding-left:1.1em}
.rules li{margin-bottom:.3em}

/* test ekrani */
.topbar{
  position:sticky; top:0; z-index:5; background:var(--paper);
  padding:14px 0 12px; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.topbar .row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.qcount{font-size:.85rem; color:var(--muted)}
#timer{font-family:var(--mono); font-size:1.12rem; font-weight:500; letter-spacing:.02em}
#timer.warn{color:var(--acc-text)}
#timer.crit{color:var(--bad)}

.qtext{font-size:1.16rem; line-height:1.45; white-space:pre-line; margin-bottom:16px}
.qhi{
  font-family:var(--mono); font-size:1.2rem; letter-spacing:.06em; padding:14px 16px;
  background:var(--surface); border-left:3px solid var(--acc); border-radius:0 var(--r) var(--r) 0;
  margin-bottom:20px;
}
.stem{margin:0 0 22px; text-align:center}
.stem svg{width:100%; max-width:250px; height:auto}
.stem-cap{font-size:.8rem; color:var(--faint); margin-top:6px}

.opts{display:flex; flex-direction:column; gap:8px; margin-bottom:26px}
.opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; color:var(--ink);
}
.opt:hover{border-color:var(--indigo)}
.opt .k{
  flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:50%;
  font-family:var(--mono); font-size:.82rem; line-height:24px; text-align:center; color:var(--faint);
}
.opt.on{border-color:var(--indigo); background:var(--indigo-soft)}
.opt.on .k{background:var(--indigo); border-color:var(--indigo); color:var(--btn-ink)}
.opts.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.opts.grid .opt{flex-direction:column; align-items:center; gap:6px; padding:10px 8px}
.opts.grid .opt svg{width:100%; max-width:76px; height:auto; display:block}

.nav{display:flex; gap:10px; justify-content:space-between}
.warnbox{
  font-size:.83rem; color:var(--muted); background:var(--acc-soft);
  border-radius:var(--r); padding:.7em .9em; margin-bottom:18px;
}
.done-mark{width:46px; height:46px; margin-bottom:18px}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ================= ADMIN ================= */
.app-shell{display:flex; align-items:flex-start; min-height:100vh}

.sidebar{
  flex:none; width:242px; border-right:1px solid var(--glass-line);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
  overflow-y:auto;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur)) saturate(130%);
}
@supports not (backdrop-filter: blur(1px)) { .sidebar{background:var(--surface)} }
.sidebar-brand{display:flex; align-items:center; gap:9px; padding:6px 10px 22px}
.sidebar-brand .dots{display:flex; gap:2.5px; align-items:flex-end; height:16px; flex:none}
.sidebar-brand .dots i{width:3.5px; background:var(--indigo); border-radius:1px}
.sidebar-brand b{
  font-size:.92rem; font-weight:600; line-height:1.25; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.navgroup{margin-bottom:20px}
/* 11px - eng kichik o'lcham. Kichik matn ko'proq kontrast talab
   qiladi, kamroq emas: --faint bu yerda 3.98:1 berardi. */
.navgroup-label{
  font-size:.68rem; font-weight:600; letter-spacing:.07em; color:var(--muted);
  text-transform:uppercase; padding:0 10px 8px;
}
.navlink{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; border-radius:var(--r); padding:.62em .7em; margin-bottom:2px;
  color:var(--muted); font:inherit; font-size:.91rem; text-decoration:none; cursor:pointer;
  transition:background var(--mid) var(--ease), color var(--fast) var(--ease);
}
.navlink:active{transform:scale(.985)}
.navlink svg{flex:none; width:17px; height:17px}
.navlink:hover{background:var(--surface-2); color:var(--ink)}
/*
 * Faol bo'lim. Ilgari faqat fon rangi bilan ajratilardi; qorong'i
 * rejimda `--indigo` oltinga aylangani uchun fon ham oltin tusda
 * bo'lib, matn bilan yaqinlashib qolardi. Endi chap qirrada yupqa
 * chiziq - u ikkala rejimda ham aniq ko'rinadi.
 */
.navlink.active{
  background:var(--surface); color:var(--ink); font-weight:500;
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--glass-line);
  position:relative;
}
.navlink.active::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%; width:3px;
  background:var(--acc); border-radius:0 3px 3px 0;
}
.navlink.sub{
  padding-left:20px; margin-left:15px; border-left:1.5px solid var(--line);
  border-radius:0 9px 9px 0; font-size:.87rem;
}
.navlink.sub svg{width:15px; height:15px}
.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2)}

.avatar{
  flex:none; width:32px; height:32px; border-radius:50%; overflow:hidden;
  background:var(--indigo-soft); color:var(--indigo); display:flex; align-items:center;
  justify-content:center; font-size:.86rem; font-weight:600;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.acctchip{
  display:flex; align-items:center; gap:9px; width:100%; background:none; border:none;
  border-radius:9px; padding:.5em .6em; cursor:pointer; color:var(--ink); font:inherit;
}
.acctchip:hover{background:var(--surface-2)}
.acctmenu{
  position:absolute; bottom:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:8px; z-index:10;
}
.acctmenu-head{display:flex; align-items:center; gap:10px; padding:8px 8px 12px; margin-bottom:6px; border-bottom:1px solid var(--line-2)}
.acctmenu-head .avatar{width:38px; height:38px; font-size:1rem}
.acctmenu-head b{display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acctmenu-head span{display:block; font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.admin{flex:1; min-width:0; max-width:1180px; margin:0; padding:32px 34px 70px}

@media(max-width:820px){
  /* ustunda align-items:flex-start qolsa, asosiy qism eng keng jadval kengligiga
     cho'zilib, telefonda butun sahifa yon tomonga surilardi */
  .app-shell{flex-direction:column; align-items:stretch}
  .sidebar{
    width:auto; height:auto; position:static; border-right:none;
    border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap;
    align-items:center; padding:12px 14px; overflow:visible;
  }
  .sidebar-brand{padding:4px 10px 4px 0}
  .navgroup{margin-bottom:0; display:flex; align-items:center; flex-wrap:wrap}
  .navgroup-label{display:none}
  .navlink{padding:.5em .65em; margin-bottom:0}
  .navlink.sub{padding-left:.65em; margin-left:0; border-left:none}
  .sidebar-foot{margin-top:0; padding-top:0; border-top:none}
  .admin{max-width:none; padding:24px 18px 60px}
}

.kpis{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); overflow:hidden; margin-bottom:20px}
.kpis div{flex:1 1 140px; padding:15px 18px}
.kpis div + div{border-left:1px solid var(--line-2)}
.kpis b{display:block; font-family:var(--mono); font-size:1.5rem; font-weight:500; line-height:1.2}
.kpis span{font-size:.79rem; color:var(--muted)}

.funnel{display:flex; gap:6px; margin-bottom:22px; flex-wrap:wrap}
.funnel button{
  flex:1 1 120px; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--line); border-radius:0 0 var(--r) var(--r); padding:10px 12px;
}
.funnel button:hover{background:var(--surface-2)}
.funnel button.on{background:var(--surface-2); border-top-width:3px}
.funnel .n{font-family:var(--mono); font-size:1.2rem; font-weight:500; display:block}
.funnel .l{font-size:.75rem; color:var(--muted); display:block; line-height:1.3}
/*
 * Etaplarni sozlash katagi. Voronka kataklaridan ATAYLAB farq qiladi:
 * u son ko'rsatmaydi va filtr emas, shuning uchun uzuq chiziq va
 * cho'zilmaydigan kenglik - bir qarashda "bu boshqa narsa" deyish uchun.
 */
.funnel .funnel-sozla{flex:0 0 auto; min-width:92px; background:none;
  border:1px dashed var(--line); border-top:3px dashed var(--line); color:var(--muted)}
.funnel .funnel-sozla:hover{background:var(--surface-2); color:var(--ink); border-color:var(--indigo)}
.funnel .funnel-sozla .n{font-size:1.05rem; font-family:inherit}

.tools{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center}
.tools input{flex:1 1 200px} .tools select{flex:0 0 auto; width:auto}
.datefield{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted); flex:0 0 auto}
.datefield input{width:auto; flex:none; padding:.55em .6em}
.tools .btn.quiet.sm#clearDates{flex:none; padding:.45em .7em}

.tbl{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; font-size:.92rem;
  box-shadow:var(--shadow-card)}
.tbl th{
  text-align:left; font-weight:600; font-size:.82rem; color:var(--ink);
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.tbl td{padding:14px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px;
  vertical-align:middle}
.bar{display:inline-block; width:52px; height:5px; background:var(--line-2);
  border-radius:3px; overflow:hidden; vertical-align:middle; margin-right:8px}
.bar i{display:block; height:100%; background:var(--indigo)}
.empty{padding:46px 20px; text-align:center; color:var(--muted); background:var(--surface);
  border:1px dashed var(--line); border-radius:var(--r-card)}

.credrow td{padding:10px 13px; background:var(--surface-2)}
.cred{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:.85rem; color:var(--muted);
  padding:12px 14px; background:var(--surface-2); border-radius:var(--r); margin-bottom:14px}
.cred b{color:var(--ink); font-weight:500}

/* ishchi jadvali (davomat) */
.sched-grid{display:flex; flex-direction:column; gap:8px}
.sched-row{display:flex; align-items:center; gap:10px; font-size:.88rem}
.sched-row input[type="time"],.sched-row input[type="number"]{width:auto; flex:none; padding:.4em .5em}
.sched-row input[type="number"]{width:64px}
.sched-off{display:flex; align-items:center; gap:6px; width:120px; flex:none; color:var(--muted); cursor:pointer}
.sched-off input{width:auto}

/* nav yonidagi hisoblagich (kutilayotgan so'rovlar) */
.navbadge{background:var(--bad); color:var(--on-bad); border-radius:999px; font-size:.72rem;
  padding:.05em .5em; margin-left:auto; font-weight:500}

/* modal oyna (jadval qo'shish va h.k.) */
.modal-overlay{position:fixed; inset:0; background:var(--glass-edge); display:flex; align-items:flex-start;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:modalFon var(--mid) var(--ease);
  justify-content:center; z-index:90; padding:28px 16px; overflow-y:auto}
.modal-box{border-radius:var(--r-card); width:100%; max-width:560px; padding:22px 24px;
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--shadow-pop), inset 0 1px 0 var(--glass-line);
  animation:modalKir var(--mid) var(--ease);
  transition:max-width var(--fast) var(--ease)}
.modal-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.modal-head h3{margin:0; font-size:1.05rem}
.modal-x{background:none; border:none; color:var(--muted); font-size:1.3rem; line-height:1; cursor:pointer; padding:0 2px}
.modal-x:hover{color:var(--ink)}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.chiprow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.chip{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.35em .9em;
  font-size:.84rem; color:var(--muted); cursor:pointer}
.chip:hover{border-color:var(--line-2); color:var(--ink)}
.picklist{max-height:190px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r); padding:6px 10px}
.picklist label{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.9rem; cursor:pointer; margin:0}
.picklist input{width:auto; flex:none}

/* kelish/ketishni belgilash - kamera oynasi (davomat) */
/*
 * Kamera ekrani. Fon qora emas, palitraning tungi ko'k rangi - ekran
 * boshqa ilovadan olingandek ko'rinmasin. Video o'zi yorug' bo'lgani
 * uchun ramka ham shishadan: yuz ramkaga tushayotganini ko'rsatadi,
 * lekin videoning o'zini bosib ketmaydi.
 */
.cam-overlay{position:fixed; inset:0; background:rgba(6,14,21,.72); display:flex;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:modalFon var(--mid) var(--ease);
  align-items:center; justify-content:center; z-index:100; padding:16px}
.cam-box{background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--shadow-pop), inset 0 1px 0 var(--glass-line);
  animation:modalKir var(--mid) var(--ease);
  border-radius:var(--r-card); padding:18px; width:100%; max-width:400px}
.cam-video-wrap{position:relative; width:100%; aspect-ratio:4/3; background:var(--video-bg);
  border-radius:var(--r); overflow:hidden}
.cam-video-wrap video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.cam-video-wrap canvas{position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1)}
.cam-status{margin:12px 0 0; text-align:center; font-size:.92rem; min-height:1.4em}
.cam-status.ok{color:var(--ok)}
.cam-status.warn{color:var(--acc-text)}
.cam-status.err{color:var(--bad)}
.cam-actions{display:flex; gap:10px; margin-top:14px}
.cam-actions .btn{flex:1}

/* kandidat profili */
.crumb{background:none; border:none; color:var(--muted); padding:0; margin-bottom:14px; font-size:.9rem}
.crumb:hover{color:var(--indigo)}
.phead{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px}
.phead h2{font-size:1.5rem}
.phead .meta{color:var(--muted); font-size:.92rem; margin-top:4px}
.pcard{display:flex; flex-wrap:wrap; gap:20px; margin-top:12px}
.pcell{display:flex; flex-direction:column; gap:3px; font-size:.92rem; max-width:260px}
.pcell .pl{font-size:.7rem; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.resume-chip{
  display:inline-flex; align-items:center; gap:6px; padding:.32em .7em;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px;
}
.resume-chip:hover{border-color:var(--indigo); background:var(--indigo-soft)}
.resume-chip svg{flex:none; color:var(--muted)}
.cols{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:900px){.cols{grid-template-columns:1.15fr .85fr}}
/*
 * SHISHA MATERIALI.
 *
 * Ataylab faqat "chrome"ga qo'llanadi: yon panel, modal, pastki
 * panel, yopishqoq sarlavha. Jadval, kalendar, kamera va xaritaga
 * QO'LLANMAYDI - u yerda raqam va rasm o'qilishi birinchi o'rinda,
 * shaffoflik esa kontrastni fonga qarab o'zgartiradi.
 *
 * `::before` - yuqori qirradagi yorug'lik chizig'i. Shisha
 * "qalinligi" hissini aynan shu beradi, soya emas.
 */
.shisha{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur)) saturate(130%);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-line);
}
.shisha::before{
  content:''; position:absolute; inset:0 0 auto; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--glass-line) 18%, var(--glass-line) 82%, transparent);
  border-radius:inherit;
}
/* backdrop-filter ishlamasa (eski brauzer) - shaffoflik olib tashlanadi,
   aks holda matn o'qilmay qoladi */
@supports not (backdrop-filter: blur(1px)) {
  .shisha{background:var(--surface)}
}

/*
 * KARTOCHKA - QATTIQ yuza, shisha emas.
 *
 * Ichida raqam va jadval turadi; shaffoflik ular ustida kontrastni
 * fon manzarasiga qarab o'zgartirardi. Shisha o'rniga yupqa yuqori
 * qirra (`inset`) - u ham "qatlam" hissini beradi, lekin o'qishga
 * tegmaydi.
 */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; margin-bottom:18px;
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--glass-line)}
.panel h3{font-size:1rem; margin-bottom:14px}
.blockrow{display:flex; align-items:center; gap:10px; font-size:.9rem; margin-bottom:9px}
.blockrow .nm{flex:1}
.alist{list-style:none; margin:0; padding:0; font-size:.89rem}
.alist li{display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.alist li:last-child{border-bottom:none}
.alist .ix{font-family:var(--mono); color:var(--faint); flex:none; width:20px}
.alist .qq{flex:1}
.alist .ans{color:var(--muted); font-size:.85rem; margin-top:2px}
.alist .tm{font-family:var(--mono); font-size:.8rem; color:var(--faint); flex:none}
.mk{flex:none; width:16px; font-weight:600}
.mk.y{color:var(--ok)} .mk.n{color:var(--bad)}

.verdict{margin-top:14px; padding:11px 13px; border-radius:var(--r); font-size:.86rem}
.verdict b{display:block; margin-bottom:3px}
.verdict p{margin:0; line-height:1.45}
.verdict.y{background:var(--ok-soft); color:var(--ok)}
.verdict.m{background:var(--acc-soft); color:var(--acc-text)}
.verdict.n{background:var(--bad-soft); color:var(--bad)}

details.panel summary{cursor:pointer; list-style:none; margin-bottom:0}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary h3{display:inline-flex; align-items:center; gap:7px; margin-bottom:0}
details.panel summary h3::before{content:'▸'; font-size:.72em; color:var(--faint)}
details.panel[open] summary h3::before{content:'▾'}
details.panel[open] summary{margin-bottom:14px}

.note{border-left:2px solid var(--line); padding:2px 0 2px 12px; margin-bottom:14px}
.note .nh{font-size:.78rem; color:var(--faint); display:flex; gap:8px; align-items:center}
.note .nb{white-space:pre-wrap; font-size:.91rem; margin-top:3px}
.note button{background:none; border:none; color:var(--faint); font-size:.78rem; padding:0}
.note button:hover:not(:disabled){color:var(--bad)}
.note button:disabled{opacity:.3; cursor:not-allowed}
.hist{list-style:none; margin:0; padding:0; font-size:.84rem; color:var(--muted)}
.hist li{padding:5px 0; border-bottom:1px solid var(--line-2)}
.hist li:last-child{border-bottom:none}

/* bo'lim/lavozim ro'yxati (sozlamalar) */
.logo-preview{
  width:76px; height:76px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--indigo-soft); color:var(--indigo); font-size:1.6rem; font-weight:600;
  flex:none;
}
.logo-preview img{width:100%; height:100%; object-fit:cover}
.deptrow{border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden;
  background:var(--surface)}
.deptrow summary{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; cursor:pointer; list-style:none; background:var(--surface-2);
}
.deptrow summary::-webkit-details-marker{display:none}
.deptrow summary .dn{font-weight:500}
.deptrow summary .dc{font-size:.8rem; color:var(--muted); font-weight:400}
.deptrow summary::before{content:'›'; font-size:1.1em; color:var(--faint); transform:rotate(0deg); transition:transform .12s}
.deptrow[open] summary::before{transform:rotate(90deg)}
/* jadval kartasidagi versiyalar tarixi - bo'lim qatorining summary uslubi unga tushmasin */
.smena-tarix{font-size:.8rem; color:var(--muted); margin-top:6px}
.deptrow .smena-tarix summary{display:inline-flex; justify-content:flex-start; gap:6px; padding:0; background:none; color:var(--muted)}
.deptrow .smena-tarix[open] summary{margin-bottom:2px}
.deptrow .smena-tarix[open] summary::before{transform:rotate(90deg)}
.smena-tarix > div{overflow-wrap:anywhere}
.deptrow .positions{padding:8px 14px 12px; border-top:1px solid var(--line)}
.poschip{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 4px; border-bottom:1px solid var(--line-2); font-size:.9rem;
}
.poschip:last-of-type{border-bottom:none}
.poschip button{background:none; border:none; color:var(--faint); font-size:.78rem; padding:0}
.poschip button:hover{color:var(--bad)}
.addpos{display:flex; gap:8px; margin-top:8px}
.addpos input{flex:1}

/*
 * KIRISH SAHIFALARI — suzuvchi shisha kartochka.
 *
 * Bu yerda shisha xavfsiz: ichida atigi ikkita maydon va tugma bor,
 * jadval yoki uzun matn yo'q. Fon ambiyenti shisha ostidan ko'rinadi
 * va ilovaning "materiali" birinchi ekranda ko'zga tashlanadi.
 */
.login{
  max-width:380px; margin:12vh auto; padding:30px 28px;
  background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%);
  box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-line);
  animation:loginKir var(--slow) var(--ease);
}
@keyframes loginKir{
  from{opacity:0; transform:translateY(12px) scale(.985)}
  to{opacity:1; transform:none}
}
@supports not (backdrop-filter: blur(1px)) { .login{background:var(--surface)} }
@media (max-width:480px){ .login{margin:6vh 14px; padding:24px 20px} }

.orsep{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--faint); font-size:.78rem}
.orsep::before,.orsep::after{content:''; flex:1; height:1px; background:var(--line)}

/* ---- rol tanlash kartochkalari (bosh sahifa) ---- */
.rolecards{display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; justify-content:center}
.rolecard{
  flex:1 1 220px; max-width:260px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:26px 20px; text-align:center; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.rolecard:hover{border-color:var(--indigo); transform:translateY(-2px)}
.rolecard .ric{display:block; font-size:1.8rem; margin-bottom:12px}
.rolecard b{display:block; font-size:1.02rem; margin-bottom:6px}
.rolecard span{display:block; font-size:.84rem; color:var(--muted)}

/* ---- onboarding so'rovnomasi ---- */
.wizard{padding:26px 24px; margin-top:8vh}
.wizsteps{display:flex; align-items:center; margin-bottom:22px}
.wdot{
  flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-family:var(--mono);
  color:var(--faint);
}
.wdot.now{border-color:var(--indigo); color:var(--indigo); font-weight:600}
.wdot.done{border-color:var(--indigo); background:var(--indigo); color:var(--btn-ink)}
.wline{flex:1; height:1.5px; background:var(--line); margin:0 4px}
.wizopts{display:flex; flex-direction:column; gap:8px}
.wizopt{
  width:100%; text-align:left; background:var(--glass-2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 15px; color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.wizopt:hover{border-color:var(--acc)}
.wizopt:active{transform:scale(.99)}
.wizopt.on{border-color:var(--acc); background:var(--acc-soft); font-weight:500;
  box-shadow:inset 0 1px 0 var(--glass-line)}
.wiznav{display:flex; justify-content:space-between; margin-top:22px}

/* ================= HISOBOTLAR VA E'LONLAR (umumiy komponentlar) ================= */

/* sahifa sarlavhasi: nom + izoh + o'ng tarafdagi amallar */
.pagehead{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; margin-bottom:20px}
.pagehead h2{font-size:1.6rem; line-height:1.2}
.pagehead .sub{color:var(--muted); font-size:.92rem; margin:.3em 0 0}
.pagehead .acts{display:flex; gap:8px; flex-wrap:wrap}

/* segmentli tab (Davomat / Kechikishlar / ...) - joy yetmasa keyingi qatorga
   o'tadi: ko'rsatkichlar ko'p bo'lsa yoki ru tilida telefonda sahifani surmasin */
.seg{display:inline-flex; flex-wrap:wrap; max-width:100%; gap:2px; padding:3px; border-radius:var(--r-pill);
  background:var(--glass-2); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.seg button{background:none; border:none; border-radius:var(--r-pill); padding:.5em 1em;
  font-size:.9rem; color:var(--muted); white-space:nowrap; cursor:pointer;
  transition:color var(--fast) var(--ease), background var(--mid) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button:active{transform:scale(.97)}
.seg button.on{background:var(--surface); color:var(--ink); font-weight:500;
  box-shadow:var(--shadow-card)}

/* kandidatlar jadvali ustunlari ko'p - telefonda jadval o'z qutisida suriladi,
   butun sahifa emas */
#tableWrap{overflow-x:auto}

/* filtr paneli */
.filterbar{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:14px}
.filterrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.filterrow .spacer{flex:1}
.pillgroup{display:inline-flex; flex-wrap:wrap; gap:2px; background:var(--surface-2); border-radius:11px; padding:3px}
.pillgroup button{background:none; border:none; border-radius:8px; padding:.42em .85em;
  font-size:.86rem; color:var(--muted); white-space:nowrap}
.pillgroup button:hover{color:var(--ink)}
.pillgroup button.on{background:var(--surface); color:var(--ink); font-weight:500;
  box-shadow:0 1px 2px rgba(22,32,46,.08)}
.datepill{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  border-radius:11px; padding:.3em .7em; background:var(--surface)}
.datepill input{border:none; padding:.2em 0; width:auto; background:none; font-size:.88rem}
.datepill input:focus{box-shadow:none}
.datepill svg{width:15px; height:15px; color:var(--faint); flex:none}
.filterrow select{width:auto; padding:.45em 2em .45em .8em; border-radius:11px; font-size:.88rem}

/* KPI kartochkalari */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px;
  margin-bottom:18px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px; box-shadow:var(--shadow-card), inset 0 1px 0 var(--glass-line);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease)}
.stat:hover{transform:translateY(-1px); box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-line)}
.stat-ico{width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; margin-bottom:14px}
.stat-ico svg{width:17px; height:17px}
.stat-label{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stat-value{font-size:1.65rem; font-weight:600; line-height:1.25; margin-top:.15em;
  font-variant-numeric:tabular-nums}
.stat-delta{font-size:.78rem; color:var(--faint); margin-left:.45em; font-weight:400}
.stat-delta.up{color:var(--ok)} .stat-delta.down{color:var(--bad)}
.ico-blue{background:var(--info-soft); color:var(--info)}
.ico-green{background:var(--ok-soft); color:var(--ok)}
.ico-amber{background:var(--warn-soft); color:var(--warn)}
.ico-red{background:var(--bad-soft); color:var(--bad)}
.ico-lilac{background:var(--lilac-soft); color:var(--lilac)}

/* davomat issiqlik xaritasi */
.heat{overflow-x:auto; padding-bottom:4px}
.heat-inner{min-width:max-content}
.heat-row{display:flex; align-items:center; padding:2px 0}
.heat-name{flex:none; width:186px; display:flex; align-items:center; gap:8px; font-size:.87rem;
  position:sticky; left:0; background:var(--surface); z-index:1; padding-right:12px}
.heat-name .avatar{width:24px; height:24px; font-size:.72rem}
.heat-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.heat-days{display:flex; gap:3px}
.heat-cell{flex:none; width:17px; height:17px; border-radius:5px; background:var(--h-off)}
.heat-head .heat-cell{background:none; font-size:.66rem; color:var(--faint); text-align:center;
  line-height:17px; font-variant-numeric:tabular-nums}
.heat-month{font-size:.72rem; color:var(--muted); font-weight:500}
.heat-in{background:var(--h-in)} .heat-late{background:var(--h-late)}
.heat-absent{background:var(--h-absent)} .heat-leave{background:var(--h-leave)}
/*
 * Kuzatuv boshlanmagan kun. To'ldirilmaydi - bo'sh kontur "bu yerda
 * hech narsa o'lchanmagan" deydi; to'ldirilgan katak esa "o'lchandi va
 * natija shu" deb o'qilardi.
 */
.heat-kuzatilmagan{background:none; border:1px dashed var(--line)}
/* jadval biriktirilmagan xodim - butun qator shunday bo'ladi */
.heat-jadvalsiz{background:var(--surface-2); border:1px dashed var(--line)}
.legend i.h-yoq{background:none; border:1px dashed var(--line); border-radius:3px}
.legend i.h-jadvalsiz{background:var(--surface-2); border:1px dashed var(--line); border-radius:3px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--muted)}
.legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px}

/* bo'limlar bo'yicha - chiziqli taqsimot */
.barrow{margin-bottom:16px}
.barrow-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.9rem; margin-bottom:6px}
.barrow-top b{font-weight:500}
.barrow-top span{color:var(--muted); font-size:.85rem; white-space:nowrap}
.barline{height:6px; border-radius:3px; background:var(--line-2); overflow:hidden}
.barline i{display:block; height:100%; background:var(--indigo); border-radius:3px}

/* reyting ro'yxati (eng ko'p ishlaganlar) */
.rank{display:flex; flex-direction:column; gap:4px}
.rankrow{display:flex; align-items:center; gap:12px; padding:8px 0}
.rankrow .n{width:16px; flex:none; color:var(--faint); font-size:.85rem;
  font-variant-numeric:tabular-nums}
.rankrow .who{flex:1; min-width:0}
.rankrow .who b{display:block; font-weight:500; font-size:.92rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.rankrow .who span{display:block; font-size:.8rem; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.tag{border-radius:999px; padding:.2em .7em; font-size:.8rem; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tag.ok{background:var(--ok-soft); color:var(--ok)}
.tag.bad{background:var(--bad-soft); color:var(--bad)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.quiet{background:var(--surface-2); color:var(--muted)}

/* ikki ustunli bo'lim (bo'limlar | reyting) */
.twocol{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}

/* ================= BOSHQARUV PANELI ================= */

/* jonli holat kartochkalari - bosilsa pastdagi ro'yxat filtrlanadi */
.livegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin-bottom:18px}
.livecard{
  background:var(--glass); border:1px solid var(--glass-line); border-radius:14px;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur)) saturate(130%);
  padding:14px 15px; text-align:left;
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--glass-line);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.livecard:hover{border-color:var(--indigo); transform:translateY(-1px);
  box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-line)}
/* bosilganda barmoq ostida bosilgandek - "silliq" talabi shuni so'raydi */
.livecard:active{transform:translateY(0) scale(.99)}
.livecard.on{border-color:var(--indigo); background:var(--indigo-soft)}
.livecard .top{display:flex; align-items:center; gap:7px; margin-bottom:8px}
.livecard .top i{width:8px; height:8px; border-radius:50%; flex:none}
.livecard .top span{font-size:.78rem; color:var(--muted); line-height:1.25}
.livecard b{font-size:1.55rem; font-weight:600; font-variant-numeric:tabular-nums; display:block}

/* "e'tiboringiz kerak" - rahbarning qiladigan ishlari */
.todo{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--glass-line);
  padding:6px 18px; margin-bottom:18px; box-shadow:var(--shadow-card)}
.todo-item{display:flex; align-items:center; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--line-2)}
.todo-item:last-child{border-bottom:none}
.todo-ico{width:30px; height:30px; border-radius:9px; flex:none; display:flex;
  align-items:center; justify-content:center}
.todo-ico svg{width:15px; height:15px}
.todo-txt{flex:1; min-width:0; font-size:.92rem}
.todo-txt span{display:block; font-size:.8rem; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.todo-act{flex:none; font-size:.85rem; color:var(--indigo); background:none; border:none;
  padding:.3em .2em; white-space:nowrap}
.todo-act:hover{text-decoration:underline}

/* dashboard ikki ustun: asosiy ro'yxat + yon ustun */
.dashcols{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:14px;
  align-items:start}
@media(max-width:1000px){.dashcols{grid-template-columns:minmax(0,1fr)}}

/* 7 kunlik dinamika - oddiy ustunli diagramma (kutubxonasiz) */
.trend{display:flex; align-items:flex-end; gap:8px; height:132px; margin:6px 0 10px}
.trend-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  gap:2px; height:100%; cursor:default}
.trend-seg{border-radius:3px; min-height:0}
/* dam olish kuni - ustun emas, past chiziqcha ("nol" emas, "o'lchanmagan") */
.trend-col.dam i{display:block; height:3px; border-radius:2px; background:var(--line)}
.trend-x{display:flex; gap:8px; font-size:.72rem; color:var(--faint); text-align:center}
.trend-x span{flex:1}
.trend-empty{height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:.86rem}

/* xodim ko'p bo'lganda bugungi ro'yxat cheksiz cho'zilmasin */
.prowlist{max-height:min(62vh,560px); overflow-y:auto; margin:0 -4px; padding:0 4px}

/* xodim qatori (bugungi ro'yxat) */
.prow{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line-2); cursor:pointer}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--surface-2)}
.prow .who{flex:1; min-width:0}
.prow .who b{display:block; font-weight:500; font-size:.93rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.prow .who span{display:block; font-size:.79rem; color:var(--muted)}
.prow .tm{font-family:var(--mono); font-size:.85rem; color:var(--muted); flex:none;
  text-align:right; min-width:76px}

/* ================= XODIM SAHIFASI: TELEFON UCHUN ================= */

/* Sahifa telefonda ochiladi - shuning uchun asosiy o'lchov shu yerdan boshlanadi.
   `dvh` klaviatura ochilganda ham to'g'ri ishlaydi (`vh` dan farqli). */
.emp-page{
  max-width:460px; margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.emp-head{text-align:center; margin-bottom:18px}
.emp-head h1{font-size:1.3rem; margin-bottom:.15em}
.emp-head p{color:var(--muted); font-size:.9rem; margin:0}

/* katta, barmoq bilan bosish oson tugmalar */
.emp-actions .btn{
  width:100%; min-height:54px; font-size:1.05rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.emp-actions{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}

/* bugungi holat kartochkasi */
.emp-status{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px; text-align:center; margin-bottom:14px; box-shadow:var(--shadow-card);
}
.emp-status .big{font-size:1.15rem; font-weight:600; margin-bottom:.15em}
.emp-status .sub{font-size:.86rem; color:var(--muted)}
.emp-status.in{border-color:var(--ok); background:var(--ok-soft)}
.emp-status.in .big{color:var(--ok)}
.emp-status.pause{border-color:var(--info); background:var(--info-soft)}
.emp-status.pause .big{color:var(--info)}
/* telefonda saqlangan, hali serverga yetmagan belgi - "saqlandi, lekin hali tugamadi" */
.emp-status .kutish{margin-top:8px; font-size:.84rem; font-weight:500; color:var(--warn)}
.emp-status .oflayn-izoh{margin-top:6px; font-size:.78rem; color:var(--faint)}
/* 2 kundan ortiq yuborilmay qolgan belgi: yuborilmaydi, lekin so'rov kutib telefonda turadi */
.emp-eskirgan{background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--r-card);
  padding:12px 14px; margin-bottom:14px; font-size:.86rem; color:var(--ink)}
.emp-eskirgan > b{color:var(--warn)}
.emp-eskirgan > p{margin:4px 0 8px; color:var(--muted); font-size:.8rem}
.emp-eskirgan .eg{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 0; border-top:1px solid var(--line-2)}
.emp-eskirgan .eg-q{font-family:var(--mono); min-width:0; overflow-wrap:anywhere}
.emp-eskirgan .eg-t{display:flex; gap:6px; flex:none}

/* kun hodisalari - vaqt chizig'i */
.emp-timeline{list-style:none; margin:0 0 16px; padding:0; font-size:.88rem}
.emp-timeline li{display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--line-2)}
.emp-timeline li:last-child{border-bottom:none}
.emp-timeline i{width:8px; height:8px; border-radius:50%; flex:none; background:var(--indigo)}
.emp-timeline .t{font-family:var(--mono); font-weight:500; flex:none}
.emp-timeline .w{flex:1; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* navbatdagi belgi: bo'sh doiracha - hali serverda yo'q */
.emp-timeline i.kutish{background:transparent; border:2px solid var(--warn); width:10px; height:10px; box-sizing:border-box}
.emp-timeline .w .kutish{color:var(--warn)}

/* tabel qatorlari telefonda ham siqilmasin */
.emp-day{display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--line-2); font-size:.88rem}
.emp-day:last-child{border-bottom:none}
.emp-day .d{width:32px; flex:none; font-family:var(--mono); color:var(--faint)}
.emp-day .r{flex:1}
.emp-day .h{flex:none; font-family:var(--mono); color:var(--muted); font-size:.84rem}

/* telefonda kamera to'liq ekranni egallaydi - yuzni to'g'rilash osonroq */
@media(max-width:560px){
  .cam-overlay{padding:0; align-items:stretch}
  .cam-box{
    max-width:none; border-radius:0; display:flex; flex-direction:column;
    height:100dvh; padding:calc(12px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  }
  .cam-video-wrap{flex:1; aspect-ratio:auto; min-height:0}
  .cam-actions{margin-top:auto; padding-top:14px}
  .cam-actions .btn{min-height:52px; font-size:1.02rem; border-radius:14px}
  .cam-status{font-size:1rem; padding:10px 0}
  .seg button{padding:.55em .5em; font-size:.88rem}
  .seg{border-radius:16px}   /* ikki qatorga o'tganda pill shakli cho'zilib ketmasin */
}

/* iOS'da 16px dan kichik input avtomatik kattalashtiradi (zoom) - shundan qochamiz */
@media(max-width:560px){
  input,select,textarea{font-size:16px}
  .btn{min-height:46px}
  .crumb{min-height:34px}
}

/* ================= XODIM ILOVASI: PASTKI MENYU VA XARITA ================= */

/* pastki menyu ochiq turgani uchun sahifa oxirida joy qoldiramiz */
.emp-page.has-tabbar{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

.emp-topbar{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.emp-topbar-txt{flex:1; min-width:0}
.emp-topbar-txt b{display:block; font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.emp-topbar-txt span{display:block; font-size:.8rem; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.emp-icon-btn{background:none; border:1px solid var(--line); border-radius:11px; color:var(--muted);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none}
.emp-icon-btn svg{width:17px; height:17px}
.emp-icon-btn:hover{color:var(--ink); border-color:var(--line-2)}
/* til tugmasi - belgi emas, matn ("UZ"/"RU"/"EN"): qaysi til faol ekani
   bir qarashda ko'rinsin, bayroqcha esa tilni emas, davlatni bildiradi */
.tilbtn{font-size:.72rem; font-weight:600; letter-spacing:.04em}

/*
 * Kirish sahifalaridagi til tugmasi - suzuvchi.
 *
 * Bosh sahifa, kirish, ro'yxatdan o'tish, so'rovnoma va kandidat
 * testida sarlavha satri yo'q, shuning uchun tugma sahifa ustida
 * o'ng yuqori burchakda turadi. `til-tugma.js` uni o'zi qo'shadi.
 */
.tilbtn-suzuvchi{
  position:fixed; top:14px; right:14px; z-index:40;
  min-width:38px; height:32px; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--muted); background:var(--bg-2); border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tilbtn-suzuvchi:hover{color:var(--ink); border-color:var(--line-2)}
.tilbtn-suzuvchi:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}

/* ---- parol maydoni: ko'z tugmasi, kuch chizig'i, izoh ---- */
/*
 * Ko'z tugmasi maydonning USTIDA turadi, yonida emas: yonida tursa kichik
 * ekranda maydon torayib, uzun parol ko'rinmay qolardi.
 */
.parolqator{position:relative}
.parolqator input{padding-right:42px; width:100%}
.parolkoz{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:7px; cursor:pointer;
  font-size:.95rem; line-height:1; opacity:.6;
  transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.parolkoz:hover{opacity:1; background:var(--bg-2)}
.parolkoz:focus-visible{outline:2px solid var(--indigo); outline-offset:1px}

.kuchchiziq{height:3px; border-radius:2px; background:var(--line); margin-top:7px; overflow:hidden}
.kuchchiziq i{display:block; height:100%; width:0; border-radius:2px; transition:width var(--mid) var(--ease), background var(--mid) var(--ease)}
.kuchchiziq[data-daraja="1"] i{width:33%; background:var(--bad)}
.kuchchiziq[data-daraja="2"] i{width:66%; background:var(--warn)}
.kuchchiziq[data-daraja="3"] i{width:100%; background:var(--ok)}

.parolizoh{font-size:.78rem; margin:5px 0 0; min-height:1.1em; color:var(--faint)}
.parolizoh.d1{color:var(--bad)}
.parolizoh.d2{color:var(--warn)}
.parolizoh.d3{color:var(--ok)}
.parolizoh.ogoh{color:var(--warn); font-weight:500}

/* "Meni eslab qol" va "Parolni unutdingizmi?" - bitta qatorda, ikki chetda */
.kirishqator{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:-4px 0 16px; font-size:.86rem;
}
.eslab{display:flex; align-items:center; gap:7px; color:var(--muted); cursor:pointer}
.eslab input{width:15px; height:15px; margin:0; accent-color:var(--indigo); cursor:pointer}

/* So'rovnomada "Boshqa" tanlanganda chiqadigan matn maydoni */
.wizboshqa{width:100%; margin-top:10px}

/* So'rovnoma tepasidagi salomlashuv: kim kirgani va nega bu qadam kerakligi */
.wizsalom{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:6px;
}
.wizchiq{
  background:none; border:0; padding:0; font:inherit; color:var(--indigo);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.wizchiq:hover{opacity:.75}
.wizizoh{font-size:.85rem; color:var(--faint); margin:0 0 18px}

/* ---- kunlik ko'rsatkich: oyning kunlari chizig'i ---- */
/*
 * Maqsad - "qaysi kunda ma'lumot bor?" degan savolga bir qarashda javob
 * berish. Ilgari buni bilishning yagona yo'li 30 ta kunni qo'lda bosib
 * chiqish edi va ko'pchilik "ma'lumot umuman yo'q" degan xulosaga kelardi.
 */
.mtkunlar{margin:0 0 14px}
.mtkunlar-qator{display:flex; flex-wrap:wrap; gap:4px}
.mtkun{
  width:30px; height:28px; padding:0; border-radius:7px; cursor:pointer;
  font:inherit; font-size:.76rem; line-height:1;
  color:var(--faint); background:var(--bg-2); border:1px solid var(--line);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mtkun:hover{border-color:var(--line-2); color:var(--ink)}
/* ma'lumot bor kun - to'ldirilgan */
.mtkun.bor{background:var(--ok-soft); border-color:var(--ok); color:var(--ink); font-weight:500}
/* bugun - ostidan chiziq */
.mtkun.bugun{box-shadow:inset 0 -2px 0 var(--faint)}
/* tanlangan kun */
.mtkun.on{background:var(--indigo); border-color:var(--indigo); color:#fff; font-weight:600}
.mtkun:focus-visible{outline:2px solid var(--indigo); outline-offset:1px}
.mtkunlar-izoh{font-size:.78rem; color:var(--muted); margin:8px 0 0}

/* ---- CRM tahlili: xulosa plitkalari ---- */
.ctplitkalar{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.ctplitka{
  flex:1 1 150px; min-width:140px; padding:12px 14px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
}
.ctplitka b{display:block; font-size:1.45rem; font-weight:600; line-height:1.1; color:var(--ink)}
.ctplitka span{display:block; font-size:.8rem; color:var(--muted); margin-top:3px}
.ctplitka i{display:block; font-size:.74rem; color:var(--faint); font-style:normal; margin-top:2px}
/* filtr qatorining o'ng chetida - oxirgi sinxron vaqti; pastda - ma'lumot to'liqligi */
.ctyangilandi{margin-left:auto; font-size:.78rem; color:var(--faint); white-space:nowrap}
.cttoliq{color:var(--muted); font-size:.8rem; margin:10px 0 0}
/* Sdelka qatori o'z joyida ochiladi: ostida asosiy maydonlar (modal oyna yo'q) */
.tbl tbody tr.ctochilgan{background:var(--surface-2)}
.tbl tbody tr.ctochiq{cursor:default}
/* CRM tahlilida faqat bosilganda biror narsa qiladigan qatorda qo'l belgisi */
#ctJadval tbody tr:not([data-ctemp]):not([data-ctlead]){cursor:default}
.tbl tbody tr.ctochiq:hover{background:none}
.tbl tr.ctochiq td{background:var(--surface-2); padding:10px 16px 14px}
.cttafsilot{display:flex; flex-wrap:wrap; gap:6px 24px; font-size:.86rem}
.cttafsilot i{font-style:normal; color:var(--muted); margin-right:6px}

/* ---- tayyor qoida namunalari ---- */
/*
 * Ro'yxat emas, KARTOCHKA: har biri o'zi javob beradigan savolni aytib
 * turadi ("qancha qo'ng'iroq qilindi"), texnik atamalar bilan emas.
 */
.namunalar{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px}
.namuna{
  display:block; text-align:left; padding:12px 14px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  font:inherit; color:inherit;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.namuna:hover{border-color:var(--indigo); background:var(--bg)}
.namuna:focus-visible{outline:2px solid var(--indigo); outline-offset:2px}
.namuna b{display:block; font-weight:500; font-size:.92rem; margin-bottom:3px}
.namuna span{display:block; font-size:.78rem; color:var(--muted); line-height:1.35}
.namuna.bosh{border-style:dashed}
.namuna.bosh b{color:var(--muted)}

/* Ko'rsatkichlar sahifasida CRM qachon yangilangani */
.mtcrm{font-size:.8rem; color:var(--faint); margin:8px 0 0}
.mtcrm button{
  background:none; border:0; padding:0 0 0 8px; font:inherit; font-size:.8rem;
  color:var(--indigo); cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.mtcrm button:hover{opacity:.75}
.mtcrm button:disabled{color:var(--faint); cursor:default; text-decoration:none}

/* Sxema blokida "+ CRM'dan ko'rsatkich olish" */
.metrikaqosh{
  display:inline-block; margin-top:8px; padding:0;
  background:none; border:0; font:inherit; font-size:.8rem;
  color:var(--indigo); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.metrikaqosh:hover{opacity:.75}
.metrikaqosh:focus-visible{outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px}

/* ko'rsatkich tanlovi (sxema bloki): tanlov ostidagi holat satri, amallar, qo'lda yaratish */
.ktanlov .kamallar{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.ktanlov .kamallar .metrikaqosh{margin-top:6px}
.kholat{
  font-size:.8rem; line-height:1.45; margin-top:8px; padding:7px 10px;
  border-radius:8px; background:var(--warn-soft); color:var(--ink);
}
.kholat.ok{background:var(--ok-soft)}
.kholat .metrikaqosh{margin:0 0 0 4px}
.kholat a{color:var(--indigo)}
.kizoh{font-size:.78rem; color:var(--faint)}
.kyangi{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.kyangi input{flex:1; min-width:180px}

/* bog'lanish xaritasi (sxema muharriri tepasida): qoida -> ko'rsatkich -> blok */
.xarita{margin:0 0 16px; padding:14px 16px}
.xarita-bosh{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.xarita-bosh b{font-size:.98rem}
.xtbl{margin-top:10px; background:transparent}
.xtbl th{padding:6px 8px; font-size:.72rem}
.xtbl td{padding:7px 8px; font-size:.84rem; vertical-align:top; line-height:1.4}
.xtbl td.xok{color:var(--faint); padding:7px 2px; width:14px}
.xtbl td.ok{color:var(--ok)}
.xtbl td.warn, .xtbl .warn{color:var(--warn)}
.xtbl tr.xsust td{color:var(--faint)}
.xtbl td a{color:var(--indigo)}
.xblok{
  display:inline-block; margin:0 6px 4px 0; padding:2px 9px;
  border:1px solid var(--line); border-radius:999px; background:var(--bg-2);
  font:inherit; font-size:.8rem; color:var(--ink); cursor:pointer;
}
.xblok:hover{border-color:var(--indigo); color:var(--indigo)}
.xtbl .metrikaqosh{margin:0 0 0 6px}
@media (max-width:700px){
  .xtbl th:nth-child(2), .xtbl td:nth-child(2), .xtbl th:nth-child(4), .xtbl td:nth-child(4){display:none}
}

/* ---------------- maosh qoidasi (retsept) - jumla ko'rinishidagi sozlash ---------------- */
/* --- jonli hisob satrlari (usta va varaqa) --- */
.rt-faktlar{
  background:var(--surface-2); border-radius:10px; padding:9px 12px; font-size:.82rem;
  color:var(--muted); display:flex; flex-direction:column; gap:3px;
}
.rt-faktlar > b{color:var(--ink); font-weight:500}
.rt-satrlar{display:flex; flex-direction:column; font-size:.9rem}
.rt-satr{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.rt-satr > span:first-child{display:flex; flex-direction:column; gap:2px; min-width:0}
.rt-satr b{font-weight:500}
.rt-satr i{font-style:normal; font-size:.76rem; color:var(--faint); word-break:break-word}
.rt-satr.minus .mono{color:var(--bad)}
.rt-jami{display:flex; justify-content:space-between; gap:12px; padding:12px 0 0; font-size:1rem}
.rt-jami .mono{font-size:1.25rem}
.rt-ogoh{display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--warn)}

/* --- Maosh > Sxemalar: katalog, usta (4 qadam), kartalar --- */
.faint{color:var(--faint)}
.minus{color:var(--bad)}
.plus{color:var(--ok)}
.kizoh.warn{color:var(--warn)}
.katalog{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.katalog-karta{
  display:flex; flex-direction:column; gap:6px; text-align:left; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 16px;
  cursor:pointer; text-decoration:none; transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.katalog-karta:hover{border-color:var(--acc); transform:translateY(-1px)}
.katalog-karta.on{border-color:var(--acc); background:var(--acc-soft)}
.katalog-karta.yoq{opacity:.6; cursor:not-allowed}
.katalog-karta b{font-size:1rem}
.katalog-karta span{font-size:.86rem; color:var(--muted); line-height:1.45}
.katalog-karta i{font-style:normal; font-size:.76rem; color:var(--faint); margin-top:auto}
.katalog-karta i.minus{color:var(--bad)}

.us-qadamlar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.us-qadamlar button{
  display:flex; align-items:center; gap:8px; font:inherit; font-size:.9rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.45em 1em .45em .5em; cursor:pointer;
}
.us-qadamlar button:disabled{opacity:.5; cursor:default}
.us-qadamlar button.on{color:var(--ink); border-color:var(--acc); font-weight:500}
.us-qadamlar button.otdi{color:var(--ok)}
.us-raqam{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; background:var(--surface-2); color:var(--muted)}
.us-qadamlar button.on .us-raqam{background:var(--acc); color:#fff}
.us-qadamlar button.otdi .us-raqam{background:var(--ok-soft); color:var(--ok)}

.us-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start}
.us-chap{display:flex; flex-direction:column; gap:12px}
.us-ong{display:flex; flex-direction:column; gap:12px; position:sticky; top:16px}
.us-blok{
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.us-blok.xato{border-color:var(--bad)}
.us-blok.yoq{background:transparent; border-style:dashed}
.us-blok-bosh{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.us-blok-bosh > div{display:flex; flex-direction:column; gap:2px}
.us-blok-bosh b{font-size:.98rem}
.us-blok-bosh span{font-size:.82rem; color:var(--muted); line-height:1.4}
.us-almash{display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--muted); cursor:pointer; white-space:nowrap}
.us-almash input{width:auto; margin:0}
.us-jumla{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.95rem}
.us-jumla input[type=number], .us-jumla select{margin:0}
.us-jumla select{width:auto; max-width:100%}
.us-chk{display:flex; align-items:center; gap:8px; margin-left:10px; color:var(--muted); font-size:.9rem; cursor:pointer}
.us-chk input{width:auto; margin:0}
.us-manba{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.86rem; color:var(--muted)}
.us-manba select{margin:0; width:auto; max-width:260px}
.us-manba input{margin:0}
.us-pog{display:flex; flex-direction:column; gap:6px}
.us-ich{border:1px dashed var(--line-2); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.us-ich-bosh{display:flex; align-items:center; justify-content:space-between; gap:10px}
.us-kpi{border-top:1px solid var(--line-2); padding-top:8px; display:flex; flex-direction:column; gap:6px}
.us-x{background:none; border:0; color:var(--faint); font:inherit; font-size:.9rem; cursor:pointer; padding:2px 6px; border-radius:6px}
.us-x:hover{color:var(--bad); background:var(--bad-soft)}
.us-xato{font-size:.82rem; color:var(--bad); background:var(--bad-soft); padding:6px 10px; border-radius:8px}
.us-jonli{margin:0; display:flex; flex-direction:column; gap:12px}
.us-jonli-bosh{display:flex; align-items:center; justify-content:space-between; gap:8px}
.us-jonli-bosh b{font-size:.98rem}
.us-kimga{margin:0; display:flex; flex-direction:column; gap:8px}
.us-kimga > b{font-size:.98rem}
.us-kimga-amal{display:flex; gap:8px}
.us-xodim{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid var(--line-2); border-radius:10px; cursor:pointer; font-size:.92rem;
}
.us-xodim input{width:auto; margin:0}
.us-xodim .avatar{width:28px; height:28px; font-size:.76rem}
.us-xnom{flex:1; min-width:0}
.us-nav{display:flex; justify-content:space-between; gap:10px; margin-top:18px}
.us-sinov-bosh{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.sinovtbl tfoot td{border-top:2px solid var(--line); font-weight:500}
.us-yakun{display:flex; flex-direction:column; gap:8px; margin-top:16px; border-color:var(--ok)}
.us-yakun > b{color:var(--ok); font-size:1.05rem}
.us-yakun > div{display:flex; gap:8px; margin-top:6px}

.sxkartalar{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.sxkarta{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 16px;
  display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:border-color var(--fast) var(--ease);
}
.sxkarta:hover{border-color:var(--acc)}
.sxkarta-bosh{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sxkarta-bosh b{font-size:1.02rem}
.sxkarta-jumla{font-size:.88rem; line-height:1.5}
.sxkarta-xodimlar{display:flex; align-items:center; gap:4px; margin-top:auto}
.sxkarta-xodimlar .avatar{width:24px; height:24px; font-size:.7rem; margin-right:-4px}
.sxkarta-xodimlar .kizoh{margin-left:10px}
.us-ikki{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
.us-ikki .panel{margin:0}
.us-panel-bosh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.jm-qator{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line-2)}
.jm-qator > div{display:flex; flex-direction:column; gap:2px; cursor:pointer; min-width:0}
.us-kengaytirilgan{margin-top:22px; color:var(--muted)}
.us-kengaytirilgan summary{cursor:pointer; font-size:.9rem}
.us-kengaytirilgan > *:not(summary){margin-top:10px}
@media (max-width:900px){
  .us-grid{grid-template-columns:1fr}
  .us-ong{position:static}
  .us-ikki{grid-template-columns:1fr}
}

/* pastki menyu */
/*
 * XODIM ILOVASINING PASTKI PANELI — suzuvchi shisha.
 *
 * Ekran chetidan uzilgan holda turadi: kontent uning ostidan o'tib
 * ketadi va shisha ostida ko'rinadi. Aynan shu narsa "qatlam" hissini
 * beradi.
 *
 * Blur bu yerda kichik (12px): xodim ilovasi arzon telefonda ishlaydi
 * va panel doim ekranda turadi - har aylantirishda qayta chiziladi.
 */
.tabbar{
  position:fixed; z-index:40;
  left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right));
  bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-line);
  padding:6px 6px;
}
@supports not (backdrop-filter: blur(1px)) { .tabbar{background:var(--surface)} }
/* 11px yozuv - eng kichik o'lcham, ko'proq kontrast talab qiladi.
   --faint bu yerda 3.98:1 berardi. */
.tabbtn{
  position:relative; flex:1; background:none; border:none; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px; font-size:.7rem; min-height:52px; border-radius:var(--r-pill);
  transition:color var(--fast) var(--ease), background var(--mid) var(--ease);
}
.tabbtn:active{transform:scale(.96); transition:transform .08s var(--ease)}
/* faol bo'lim - ichki shisha "tabletkasi" */
.tabbtn.on{background:var(--glass-2); box-shadow:inset 0 1px 0 var(--glass-line)}
.tabbtn svg{width:21px; height:21px}
.tabbtn.on{color:var(--indigo)}
.tabbtn.on svg{stroke-width:2.2}
.tabdot{position:absolute; top:5px; right:calc(50% - 17px); width:8px; height:8px;
  border-radius:50%; background:var(--bad)}

/* --- ish joyi xaritasi (jonli) --- */
.geo{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; margin-bottom:14px; box-shadow:var(--shadow-card)}
.geo-map{position:relative; width:100%; aspect-ratio:1/1; max-height:330px;
  background:var(--surface-2); overflow:hidden}
.geo-tiles{position:absolute; inset:0}
.geo-tiles img{position:absolute; width:256px; height:256px; image-rendering:auto;
  opacity:.92; user-select:none; -webkit-user-drag:none}

/* geofence doirasi - zonaga kirilganda yashilga o'tadi */
.geo-ring{
  position:absolute; border-radius:50%; border:2px dashed var(--bad);
  background:rgba(178,58,58,.10); transform:translate(-50%,-50%);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.geo.inside .geo-ring{
  border-style:solid; border-color:var(--ok); background:rgba(46,125,82,.16);
  box-shadow:0 0 0 3px rgba(46,125,82,.12);
}
.geo-office{position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2.5px solid #fff; transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.geo-me{position:absolute; transform:translate(-50%,-50%); pointer-events:none}
.geo-me i{display:block; width:16px; height:16px; border-radius:50%;
  background:var(--info); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.4)}
.geo-me::before{
  content:''; position:absolute; left:50%; top:50%; width:38px; height:38px;
  margin:-19px 0 0 -19px; border-radius:50%; background:rgba(44,110,168,.28);
  animation:geopulse 2s ease-out infinite;
}
@keyframes geopulse{
  0%{transform:scale(.55); opacity:.85}
  100%{transform:scale(1.5); opacity:0}
}
.geo.inside .geo-me i{background:var(--ok)}
.geo.inside .geo-me::before{background:rgba(46,125,82,.28)}

.geo-badge{
  /* xarita ustidagi yorliq - foni DOIM quyuq, shuning uchun oq matn
     ikkala rejimda ham to'g'ri */
  position:absolute; left:10px; top:10px; background:rgba(22,32,46,.82); color:#fff;
  border-radius:999px; padding:.3em .8em; font-size:.76rem; backdrop-filter:blur(6px);
}
.geo.inside .geo-badge{background:var(--ok)}
.geo-foot{display:flex; align-items:center; gap:12px; padding:13px 16px}
.geo-txt{flex:1; min-width:0}
.geo-txt b{display:block; font-size:.95rem}
.geo-txt span{display:block; font-size:.82rem; color:var(--muted)}
.geo.inside .geo-txt b{color:var(--ok)}

/* zonadan tashqarida asosiy tugma yopiq turadi */
.emp-actions .btn:disabled{opacity:.45}

/* --- KPI kartochkasiga bosilsa tafsilot ochiladi --- */
.stat.drill{cursor:pointer; transition:border-color .12s ease}
.stat.drill:hover{border-color:var(--indigo)}
.stat-more{float:right; text-transform:none; letter-spacing:0; color:var(--indigo);
  font-size:.74rem; opacity:0; transition:opacity .12s ease}
.stat.drill:hover .stat-more{opacity:1}

/* --- issiqlik xaritasi katagi ustidagi ma'lumot oynasi --- */
.heat-cell[data-cell]{cursor:pointer; transition:transform var(--fast) var(--ease)}
.heat-cell[data-cell]:hover{outline:2px solid var(--ink); outline-offset:1px; transform:scale(1.18)}
.heat-tip{
  position:fixed; z-index:120; display:none; pointer-events:none;
  /* fon --ink, shuning uchun matn --paper: qorong'i rejimda --ink
     oq bo'ladi va qattiq #fff u yerda ko'rinmay qolardi */
  background:var(--ink); color:var(--paper); border-radius:10px; padding:9px 12px;
  font-size:.82rem; line-height:1.45; max-width:230px; box-shadow:var(--shadow-pop);
}
.heat-tip-h{font-weight:600; margin-bottom:1px}
.heat-tip-d{opacity:.72; font-size:.78rem}
.heat-tip-b{margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.18)}
.heat-tip-b i{font-style:normal; opacity:.7; font-size:.76rem}

/* xodim ko'p bo'lsa xarita cheksiz cho'zilmasin */
.heat{max-height:min(58vh,520px); overflow:auto}
.heat-row.heat-head{position:sticky; top:0; z-index:2; background:var(--surface)}

/* maosh jadvalidagi summalar bo'linib ketmasin */
.tbl td.num{white-space:nowrap}

/* import oynasi - oldindan ko'rish jadvali olti ustunli, kengroq joy kerak */
.modal-box.wide{max-width:820px}

/* --- yuzni ro'yxatdan o'tkazish: uch bosqich --- */
.face-steps{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.face-step{display:flex; align-items:center; gap:11px; font-size:.9rem; color:var(--faint)}
.face-step i{
  flex:none; width:26px; height:26px; border-radius:50%; font-style:normal;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
}
.face-step.now{color:var(--ink); font-weight:500}
.face-step.now i{border-color:var(--indigo); color:var(--indigo)}
.face-step.done{color:var(--ok)}
.face-step.done i{background:var(--ok); border-color:var(--ok); color:var(--on-ok)}

/* --- belgilash paytidagi selfie (faqat rahbar ko'radi) --- */
.sthumbs{display:flex; gap:4px; align-items:center}
.sthumb{display:block; width:34px; height:34px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); flex:none; background:var(--surface-2)}
.sthumb img{width:100%; height:100%; object-fit:cover; display:block}
.sthumb:hover{border-color:var(--indigo)}

/* --- xodim profilidagi kunlik tarix: qator ochilib, o'sha kunning barcha
       belgilashlari (va rad etilgan urinishlari) suratlari bilan ko'rinadi --- */
.dayblock{border-bottom:1px solid var(--line)}
.dayrow{display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer}
.dayrow:hover{background:var(--surface-2)}
.daycaret{color:var(--faint); font-size:.76rem; min-width:28px; text-align:right}
.dayrow.open .daycaret{color:var(--indigo)}
.daydetail{padding:2px 0 10px 32px; background:var(--surface-2)}
.markrow{display:flex; align-items:center; gap:10px; padding:6px 10px 6px 0}
.sthumb.lg{width:52px; height:52px; border-radius:10px}
/* xodim profilida davomat tarixi (suratlar bilan) kengroq ustunda turadi */
@media(min-width:900px){.cols.cols-r{grid-template-columns:.9fr 1.1fr}}

/* --- "ilovani o'rnating" kartochkasi (xodim ilovasi) --- */
.install-card{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:12px;
  background:var(--indigo-soft); border:1px solid var(--line); border-radius:14px}
.install-card img{border-radius:9px; flex:none}
.install-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.install-txt b{font-size:.9rem}
.install-txt span{font-size:.78rem; color:var(--muted); line-height:1.35}
.notif-ico{width:40px; height:40px; flex:none; border-radius:9px; background:var(--surface);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--indigo)}
.notif-ico svg{width:20px; height:20px}

/* --- pastdan chiqadigan varaqcha (tanaffus sababi) --- */
.sheet{position:fixed; inset:0; z-index:50; background:rgba(22,32,46,.45);
  display:flex; align-items:flex-end; justify-content:center; padding:0}
.sheet-box{background:var(--surface); width:100%; max-width:480px;
  border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
.sheet-opts{display:flex; flex-direction:column; gap:8px}
.sheet-opts .btn{width:100%; justify-content:center}
/* tanaffusda xarita so'nadi - joylashuv kuzatilmayotgani ko'rinib tursin */
.geo.paused .geo-map{filter:grayscale(1) opacity(.45)}
.geo.paused .geo-me{display:none}

/* --- xodim oylik kalendari: har kun rangi bilan (vaqtida/kechikkan/kelmagan) --- */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:10px}
.cal-wd{text-align:center; font-size:.68rem; color:var(--faint); padding-bottom:2px}
.cal-d{position:relative; aspect-ratio:1; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:.82rem; font-weight:500;
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease)}
/* bosiladigan panjarada sichqoncha qayerdaligi ko'rinsin */
.cal-d:hover{transform:scale(1.06); box-shadow:var(--shadow-card); z-index:1}
.cal-d:active{transform:scale(.97)}
.cal-d.today{outline:2px solid var(--indigo); outline-offset:1px}
.cal-d.sel{border-color:var(--indigo); box-shadow:0 0 0 2px var(--indigo-soft)}
.cal-d.ok{background:var(--ok-soft); border-color:transparent; color:var(--ok)}
.cal-d.warn{background:var(--warn-soft); border-color:transparent; color:var(--warn)}
.cal-d.bad{background:var(--bad-soft); border-color:transparent; color:var(--bad)}
.cal-d.holiday{background:var(--acc-soft); border-color:transparent; color:var(--acc-text)}
.cal-d.leave{background:var(--lilac-soft); border-color:transparent; color:var(--lilac)}
.cal-d.off{background:var(--surface-2); color:var(--muted)}
.cal-d.future{background:transparent; color:var(--faint); border-style:dashed}
/* tizim hali ulanmagan kun - o'lchanmagan, shuning uchun bo'sh kontur */
.cal-d.kuzatilmagan{background:transparent; color:var(--faint); border-style:dashed}
/* jadval yo'q: kun bor, lekin ish kunimi yoki dammi - noma'lum */
.cal-d.jadvalsiz{background:var(--surface-2); color:var(--muted); border-style:dashed}
/* bugun, hali belgilanmagan - qizil emas, neytral */
.cal-d.bugun{background:var(--surface); color:var(--muted); border-style:dashed;
  border-color:var(--muted)}
.cal-late{position:absolute; right:3px; top:2px; font-size:.56rem; font-style:normal;
  color:var(--warn); font-weight:600}
/* kunlik blok pul keltirgan/ushlagan kun - katakcha ostidagi nuqta */
.cal-pul{position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; display:block}
.cal-pul.ok{background:var(--ok)} .cal-pul.bad{background:var(--bad)}
.emp-day .p{flex:none; font-family:var(--mono); font-size:.8rem; min-width:62px;
  text-align:right; color:var(--faint)}
.emp-day .p.plus{color:var(--ok)} .emp-day .p.minus{color:var(--bad)}

/* tabeldagi kunlik natija kartasi */
.kunlik{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; margin-bottom:12px}
.kunlik-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.kunlik-top b{font-size:.92rem} .kunlik-top div{display:flex; flex-direction:column}
.kunlik-top span{font-size:.74rem; color:var(--muted)}
.kunlik-ikki{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;
  font-size:.78rem; color:var(--muted)}
.kunlik-ikki .minus{color:var(--bad)}
.kunlik-ogoh{margin-top:8px; font-size:.76rem; color:var(--warn)}
.kunlik-maosh{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.kunlik-maosh span{font-size:.8rem; color:var(--muted)}
.kunlik-maosh b{font-size:1.02rem}
.kunlik-izoh{margin-top:6px; font-size:.73rem; color:var(--faint); line-height:1.5}

.cal-legend{display:flex; flex-wrap:wrap; gap:4px 12px; margin-bottom:12px}
.cal-lg{display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--muted)}
.cal-lg i{width:9px; height:9px; border-radius:3px; display:block}
.cal-lg i.ok{background:var(--ok)} .cal-lg i.warn{background:var(--warn)}
.cal-lg i.bad{background:var(--bad)} .cal-lg i.holiday{background:var(--acc)}
.cal-lg i.leave{background:var(--lilac)} .cal-lg i.off{background:var(--line)}
.cal-lg i.bugun{background:transparent; border:1px dashed var(--muted)}
.cal-lg i.kuzatilmagan{background:transparent; border:1px dashed var(--line)}
.cal-lg i.jadvalsiz{background:var(--surface-2); border:1px dashed var(--line)}
/* nechta kun ekani - "Kelmagan 0" o'zi javob bo'lsin */
.cal-lg b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.royxatbosh{font-size:.74rem; color:var(--faint); text-transform:uppercase;
  letter-spacing:.04em; margin:16px 0 2px}
.cal-day{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px; margin-bottom:12px; font-size:.84rem}
.cal-day b{display:block; margin-bottom:3px; font-size:.9rem}
.cal-day div{color:var(--muted); line-height:1.5}

/* --- xodimning intizom balli va nishonlari --- */
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 16px; margin-bottom:12px}
.kpi-top{display:flex; align-items:center; gap:14px}
.kpi-ring{width:62px; height:62px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--line-2) 0)}
.kpi-ring b{width:48px; height:48px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; font-size:1.05rem; color:var(--c)}
.kpi-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.kpi-txt b{font-size:.94rem}
.kpi-txt span{font-size:.79rem; color:var(--muted); line-height:1.4}
.kpi-note{font-size:.73rem; color:var(--faint); margin-top:10px; line-height:1.4}
.kpi-none{font-size:.86rem; color:var(--muted); line-height:1.5}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
/* Nishon oltin fonda. Matn `--acc` emas, `--acc-text` bo'lishi shart:
   yorug' rejimda sof oltin o'z ochiq foni ustida 1.94:1 beradi.
   `--acc-text` qorong'ida ham oltin bo'lib qoladi (u yerda fon quyuq). */
.badge{font-size:.74rem; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--acc-soft); color:var(--acc-text); font-weight:500}

/* --- ish haqi sxemasi konstruktori --- */
.sxgrid{display:grid; grid-template-columns:1fr; gap:14px}
/* grid bolasi eng keng ichki elementga qarab kengayib, telefonda sahifani surmasin */
.sxgrid > *{min-width:0}
@media(min-width:1000px){.sxgrid{grid-template-columns:minmax(320px,.85fr) 1.15fr; align-items:start}}

.blok{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px; cursor:pointer}
.blok:hover{border-color:var(--indigo)}
.blok.on{border-color:var(--indigo); box-shadow:0 0 0 2px var(--indigo-soft)}
.blok.off{opacity:.5}
.blok-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.blok-txt b{font-size:.92rem; font-weight:500}
.blok-txt span{font-size:.78rem; color:var(--muted)}
.blok-txt i{font-size:.75rem; color:var(--faint); font-style:normal}
.blok-act{display:flex; gap:2px; flex:none}
.blok-act button{background:none; border:none; color:var(--faint); padding:3px 5px;
  border-radius:6px; font-size:.85rem; line-height:1}
.blok-act button:hover:not(:disabled){background:var(--surface); color:var(--ink)}
.blok-act button:disabled{opacity:.3}

.vqator{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:.85rem;
  border-bottom:1px solid var(--line-2); cursor:pointer}
.vqator:hover{color:var(--indigo)}
.vqator.on{font-weight:500}
.vqator .mono{margin-left:auto; color:var(--muted); font-size:.78rem}

/* jonli hisob */
.hqator{display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.hqator > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.hqator b{font-size:.9rem; font-weight:500}
.hqator span{font-size:.76rem; color:var(--muted); line-height:1.4; word-break:break-word}
.hqator .mono{flex:none; font-size:.92rem}
.mono.minus{color:var(--bad)}
.hogoh{font-size:.8rem; color:var(--warn); padding:6px 0 0}
.hogoh.quiet{color:var(--faint)}
.hjami{margin-top:12px; padding-top:12px; border-top:2px solid var(--line)}
.hjami > div{display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; font-size:.9rem}
.hjami > div span{color:var(--muted)}
.hjami .katta{font-size:1.05rem; padding-top:8px}
.hjami .katta b{font-size:1.15rem}

/* ta'sir tahlili */
.tasirgrid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:560px){.tasirgrid{grid-template-columns:1fr 1fr}}
.tasirgrid > div{background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:3px}
.tasirgrid span{font-size:.78rem; color:var(--muted)}
.tasirgrid b{font-size:1.25rem}
.tasirgrid i{font-size:.76rem; color:var(--faint); font-style:normal}

/* forma ichidagi ko'p ustunli qatorlar */
.qatorforma{display:flex; gap:6px; margin-bottom:6px; align-items:center}
.qatorforma input, .qatorforma select{flex:1; min-width:0; margin:0}
.qatorforma.kpi{flex-wrap:wrap}
.qatorforma.kpi input{flex:1 1 80px}
.qatorforma button{flex:none; background:none; border:none; color:var(--faint); padding:4px 6px}
.qatorforma button:hover{color:var(--bad)}
.chk{display:flex; align-items:center; gap:9px; cursor:pointer; margin-bottom:12px}
.chk input{width:auto; flex:none; margin:0}
.chk span{color:var(--ink); font-size:.9rem}

/* --- blok turini tanlash: kartochkalar + qo'llanma --- */
.turgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin-bottom:12px}
.turkarta{text-align:left; background:var(--surface-2); border:1px solid var(--line);
  border-radius:11px; padding:9px 11px; display:flex; flex-direction:column; gap:2px; cursor:pointer}
.turkarta:hover{border-color:var(--indigo); background:var(--surface)}
.turkarta.on{border-color:var(--indigo); background:var(--indigo-soft)}
.turkarta b{font-size:.88rem; font-weight:500; color:var(--ink)}
.turkarta span{font-size:.74rem; color:var(--muted); line-height:1.35}
.turizoh{background:var(--surface-2); border:1px solid var(--line); border-radius:11px;
  padding:11px 13px; font-size:.84rem; line-height:1.5}
.turizoh b{color:var(--ink)}
.turizoh p{margin:0 0 6px; color:var(--muted)}
.turizoh p:last-child{margin-bottom:0}
.turizoh .qachon{color:var(--ink)}
/* faqat ko'rish uchun qator (xodim kartasidagi ish haqi) */
.oqish{display:flex; align-items:center; gap:12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:11px; padding:10px 12px}
.oqish > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.oqish b{font-size:.92rem; font-weight:500}
.oqish span{font-size:.78rem; color:var(--muted)}

/* --- sxema qo'llanmasi va "nega 0" izohi --- */
.qollanma{border:1px solid var(--line); border-radius:12px; background:var(--surface);
  margin-bottom:16px; overflow:hidden}
.qollanma > button{width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:11px 14px; font-size:.9rem; color:var(--indigo);
  font-weight:500; cursor:pointer}
.qollanma > button:hover{background:var(--surface-2)}
.qollanma-ichi{padding:2px 16px 16px; font-size:.87rem; line-height:1.6; color:var(--muted);
  border-top:1px solid var(--line-2)}
.qollanma-ichi p{margin:10px 0}
.qollanma-ichi b{color:var(--ink)}
.qollanma-ichi ol, .qollanma-ichi ul{margin:8px 0; padding-left:20px}
.qollanma-ichi li{margin-bottom:6px}
.qollanma-ichi .mono{background:var(--surface-2); padding:1px 5px; border-radius:5px; font-size:.85em}
.qollanma-ichi .ogoh{background:var(--warn-soft); border-radius:9px; padding:9px 12px; color:var(--ink)}
.kodchip{font-family:var(--mono,monospace); font-size:.68rem; color:var(--faint);
  background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:0 4px;
  font-weight:400}
.nolsabab{background:var(--warn-soft); border-radius:10px; padding:10px 12px; margin-top:12px;
  font-size:.84rem; line-height:1.5; color:var(--ink)}
.nolsabab > div{color:var(--muted); margin-top:4px}
/* sxema konstruktoridagi sinov qiymatlari */
.sinovm{background:var(--warn-soft); border-radius:11px; padding:11px 13px; margin-bottom:14px}
.sinovm > b{font-size:.86rem; display:block; margin-bottom:2px}
.sinovm > span{font-size:.77rem; color:var(--muted); line-height:1.4; display:block; margin-bottom:9px}
.sinovm-qatorlar{display:flex; flex-wrap:wrap; gap:8px}
.sinovm-qatorlar label{display:flex; align-items:center; gap:6px; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:4px 8px}
.sinovm-qatorlar i{font-family:var(--mono,monospace); font-size:.76rem; font-style:normal; color:var(--muted)}
.sinovm-qatorlar input{width:120px; margin:0; border:none; padding:2px 0; font-size:.86rem; background:none}

/*
 * Ma'lumot BOR holat - sariq ogohlantirish emas, oddiy panel.
 *
 * Sariq rang "diqqat, bu sinov raqami" degani edi. Haqiqiy qiymatlar
 * kelib turganda esa ogohlantiradigan narsa yo'q - aksincha, hammasi
 * joyida.
 */
.sinovm.bor{background:var(--bg-2); border:1px solid var(--line)}
.sinovm-qatorlar label{flex-wrap:wrap}
.sinovm-qatorlar u{
  flex-basis:100%; font-size:.68rem; text-decoration:none;
  color:var(--ok); letter-spacing:.01em;
}
.sinovm-qatorlar u.yoq{color:var(--faint)}
.sinovm-qatorlar label.haqiqiy{border-color:var(--ok)}

/* --- ko'rsatkichlar --- */
.mtbosh{display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:14px}
.mtbosh > div:first-child{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.mtbosh b{font-size:.95rem}

/* Ko'rsatkich qayerdan kelishi - egasi bu ekranga tegishi kerakmi yo'qmi */
.mtmanba{
  font-size:.82rem; line-height:1.45; margin:-8px 0 14px;
  padding:9px 12px; border-radius:10px;
  background:var(--ok-soft); color:var(--ink);
}
.mtmanba.qolda{background:var(--bg-2); border:1px solid var(--line); color:var(--muted)}
.mtbosh span{font-size:.78rem; color:var(--muted)}
.mtbosh-act{display:flex; gap:6px; flex:none}
.mtinput{margin:0; text-align:right}
.mtinput.ozgargan{border-color:var(--warn); background:var(--warn-soft)}
.mtsaqla{display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:14px 0; position:sticky; bottom:0; background:var(--paper)}
.mtsaqla span{font-size:.85rem; color:var(--muted)}
.mtsaqla span.bor{color:var(--warn); font-weight:500}
.mcnat{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin-top:12px}
.mcnat > div{background:var(--surface-2); border-radius:10px; padding:9px 10px; text-align:center}
.mcnat b{display:block; font-size:1.2rem}
.mcnat span{font-size:.72rem; color:var(--muted)}
.mcxato{background:var(--bad-soft); border-radius:10px; padding:10px 12px; margin-top:10px; font-size:.82rem}
.mcxato b{display:block; margin-bottom:5px}
.mcxato > div{color:var(--muted); line-height:1.5}
.tkqator{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.tkqator > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.tkqator .mono{font-size:.78rem; color:var(--muted)}
.tkqator i{font-size:.74rem; color:var(--faint); font-style:normal}
.tkqator button{background:none; border:none; color:var(--faint); padding:4px 6px}
.tkqator button:hover{color:var(--bad)}
.tkyangi{background:var(--ok-soft); border-radius:10px; padding:11px 13px; margin-bottom:14px}
.tkyangi b{display:block; font-size:.86rem; margin-bottom:6px}
.tkyangi code{display:block; font-family:var(--mono,monospace); font-size:.82rem; word-break:break-all;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.tkyangi span{display:block; font-size:.76rem; color:var(--muted); margin-top:6px}
.kod{background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font-size:.78rem; overflow-x:auto; margin:8px 0 0; line-height:1.5}

/* --- oylik hisob-kitob --- */
.tekshir{border-radius:10px; padding:10px 12px; margin-top:10px; font-size:.84rem; line-height:1.5}
.tekshir.bad{background:var(--bad-soft)}
.tekshir.warn{background:var(--warn-soft)}
.tekshir b{display:block; margin-bottom:4px; color:var(--ink)}
.tekshir > div{color:var(--muted)}
.runact{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.psqator{display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.psqator > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.psqator b{font-size:.9rem; font-weight:500}
.psqator span{font-size:.75rem; color:var(--muted); line-height:1.4; word-break:break-word}
.psjami{margin-top:12px; padding-top:12px; border-top:2px solid var(--line)}
.psjami > div{display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; font-size:.9rem}
.psjami > div span{color:var(--muted)}
.psjami .katta{font-size:1.05rem; padding-top:8px}
.psjami .katta b{font-size:1.15rem}

/* --- xodim ilovasidagi hisob varaqasi --- */
.psoylar{display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; margin-bottom:4px}
.psoylar button{flex:none; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; font-size:.82rem; color:var(--muted)}
.psoylar button.on{background:var(--indigo); border-color:var(--indigo); color:var(--btn-ink)}
.pskarta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px}
.pshead{padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line-2)}
.pshead b{display:block; font-size:1rem}
.pshead span{font-size:.8rem; color:var(--muted)}
.psq{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.psq > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.psq b{font-size:.88rem; font-weight:500}
.psq span{font-size:.73rem; color:var(--muted); line-height:1.4; word-break:break-word}
.psq .mono{flex:none; font-size:.9rem}
.psjam{margin-top:12px; padding-top:12px; border-top:2px solid var(--line)}
.psjam > div{display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; font-size:.88rem}
.psjam > div span{color:var(--muted)}
.psjam .katta{font-size:1rem; padding-top:8px}
.psjam .katta b{font-size:1.2rem}
.psizoh{font-size:.75rem; color:var(--faint); margin:12px 0 0; line-height:1.45}

/* --- KPI ko'rsatkich kartochkasi --- */
.ogirlikbar{border-radius:9px; padding:8px 12px; font-size:.85rem; margin-bottom:12px}
.ogirlikbar.ok{background:var(--ok-soft); color:var(--ok)}
.ogirlikbar.xato{background:var(--warn-soft); color:var(--warn)}
.ogirlikbar b{color:inherit}
.indkarta{background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:12px; margin-bottom:10px}
.indbosh{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.indbosh b{font-size:.88rem; color:var(--ink)}
.indbosh button{background:none; border:none; color:var(--faint); padding:2px 6px; font-size:.9rem}
.indbosh button:hover{color:var(--bad)}
.indmaydon{display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.indmaydon label{flex:1; min-width:140px; display:flex; flex-direction:column; gap:3px; margin:0}
.indmaydon label span{font-size:.78rem; color:var(--muted)}
.indmaydon label input{margin:0}
.indmaydon label i{font-size:.71rem; color:var(--faint); font-style:normal; line-height:1.35}
.tierbosh{display:flex; gap:6px; margin-bottom:4px}
.tierbosh span{flex:1; font-size:.74rem; color:var(--muted)}
.tierbosh span:last-child{flex:none; width:26px}
/* kunlik pog'onada yo'nalish ustuni bor - u kengroq, chegaralar torroq */
.kuntier > :nth-child(1), .kuntier > :nth-child(2){flex:0 1 70px}
.kuntier > :nth-child(3){flex:0 1 130px}
.kuntier > :nth-child(4){flex:1 1 100px}
@media (max-width:560px){
  .qatorforma.kuntier{flex-wrap:wrap}
  .qatorforma.kuntier > :nth-child(1), .qatorforma.kuntier > :nth-child(2){flex:1 1 45%}
  .qatorforma.kuntier > :nth-child(3), .qatorforma.kuntier > :nth-child(4){flex:1 1 45%}
  .tierbosh.kuntier{display:none}
}
/* xato ko'rsatish */
.xatoro{margin:8px 0 0; padding-left:18px}
.xatoro li{margin-bottom:4px; line-height:1.5}
.xatoizoh{font-size:.8rem; color:var(--muted); margin-top:8px}
.blok.xato{border-color:var(--bad); background:var(--bad-soft)}

/* hisob varaqasidagi kunlik taqsimot */
.kundetal{margin-top:6px; border-left:2px solid var(--line); padding-left:8px}
.kundetal > div{display:flex; gap:10px; font-size:.75rem; color:var(--muted); line-height:1.7}
.kundetal > div > :first-child{min-width:64px}
.kundetal > div > :nth-child(2){min-width:52px}
.kundetal .minus{color:var(--bad)}

/* xodimga: tasdiqlangan oyda varaqasi tuzilmagan */
.psogoh{background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--r);
  padding:11px 13px; margin-bottom:12px; display:flex; flex-direction:column; gap:4px}
.psogoh b{font-size:.86rem} .psogoh span{font-size:.78rem; color:var(--muted); line-height:1.5}

/* qisqa tasdiq xabari */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%, 16px) scale(.96);
  background:var(--glass); color:var(--ink); padding:11px 20px; border-radius:var(--r-pill);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  font-size:.87rem; box-shadow:var(--shadow-pop), inset 0 1px 0 var(--glass-line); z-index:9999;
  opacity:0; pointer-events:none; max-width:90vw;
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease)}
.toast.on{opacity:1; transform:translate(-50%, 0) scale(1)}
.toast.bad{background:var(--bad); color:var(--on-bad); border-color:transparent}
@supports not (backdrop-filter: blur(1px)) { .toast{background:var(--surface)} }

/* xodimga alohida qiymatlar - JSON o'rniga maydonlar */
.alohida{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.alohida-q{display:flex; align-items:center; gap:12px; justify-content:space-between}
.alohida-q > div{display:flex; flex-direction:column; min-width:0}
.alohida-q b{font-size:.88rem; font-weight:500}
.alohida-q span{font-size:.75rem; color:var(--muted)}
.alohida-q input{width:170px; flex:none; margin:0}
.alohida-yoq{font-size:.8rem; color:var(--faint); margin:2px 0}
@media (max-width:560px){
  .alohida-q{flex-direction:column; align-items:stretch; gap:4px}
  .alohida-q input{width:100%}
}

/* ko'rsatkich qayerda ishlatiladi */
.mtqayer{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px}
.mtqayer > b{font-size:.84rem}
.mtqayer.bosh{background:var(--warn-soft); border-color:var(--warn)}
.mtqayer.bosh span{font-size:.8rem; color:var(--muted); line-height:1.55}
.mtqayer-q{display:flex; flex-direction:column; gap:3px; padding-left:10px;
  border-left:2px solid var(--line)}
.mtqayer-q > div{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.86rem}
.mtqayer-q i{color:var(--faint); font-style:normal; font-size:.78rem}
.mtqayer-q > span{font-size:.78rem; color:var(--muted); font-family:var(--mono)}

/* CRM ko'rsatkichlari katalogi */
.kat-list{display:flex; flex-direction:column; gap:18px; max-height:56vh; overflow-y:auto;
  padding-right:4px}
.kat-g{display:flex; flex-direction:column; gap:2px}
.kat-gbosh{margin-bottom:4px}
.kat-gbosh b{font-size:.95rem; display:block}
.kat-gbosh span{font-size:.78rem; color:var(--muted); line-height:1.5}
.kat-q{display:flex; gap:10px; align-items:flex-start; padding:9px 10px;
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer; background:var(--surface)}
.kat-q:hover{border-color:var(--indigo)}
.kat-q.bor{opacity:.55; cursor:default}
.kat-q.bor:hover{border-color:var(--line)}
.kat-q input{margin:3px 0 0; flex:none; width:16px; height:16px}
.kat-q > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.kat-nom{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.kat-nom b{font-size:.88rem; font-weight:500}
.kat-nima{font-size:.79rem; color:var(--muted); line-height:1.5}
.kat-crm{font-size:.75rem; color:var(--faint); line-height:1.5}
.tag.ok{background:var(--ok-soft); color:var(--ok)}

/* CRM uchun topshiriq */
.tkspec{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px}
.tkspec > b{font-size:.88rem}
.tkspec-t{width:100%; border-collapse:collapse; font-size:.82rem}
.tkspec-t th{text-align:left; font-weight:500; color:var(--muted); font-size:.74rem;
  text-transform:uppercase; letter-spacing:.03em; padding:0 8px 5px 0}
.tkspec-t td{padding:5px 8px 5px 0; border-top:1px solid var(--line); vertical-align:top}
.tkspec-yoq{font-size:.78rem; color:var(--muted); line-height:1.55}

/* CRM ulanishi */
.crmbosh{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line)}
.crmbosh > div{display:flex; flex-direction:column; min-width:0}
.crmbosh b{font-size:1rem}
.crmbosh span{font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.crmqator{font-size:.82rem; color:var(--muted); padding:8px 0; line-height:1.5}
.crmstat{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.crmstat > div{flex:1; min-width:78px; background:var(--surface-2); border-radius:var(--r);
  padding:9px 10px; text-align:center}
.crmstat b{display:block; font-size:1.05rem}
.crmstat span{font-size:.7rem; color:var(--muted)}
.crmvor{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.crmvor > div{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.crmvor b{width:100%; font-size:.84rem; font-weight:500}
.crmmap{display:flex; flex-direction:column; gap:7px; max-height:38vh; overflow-y:auto}
.crmmap-q{display:flex; align-items:center; gap:10px; justify-content:space-between}
.crmmap-q > div{display:flex; flex-direction:column; min-width:0}
.crmmap-q b{font-size:.86rem; font-weight:500}
.crmmap-q span{font-size:.73rem; color:var(--faint); overflow:hidden; text-overflow:ellipsis}
.crmmap-q select{width:190px; flex:none; margin:0}
.crmogoh{font-size:.78rem; color:var(--warn); margin:10px 0 0; line-height:1.5}
/* bog'lash taklifi va yo'qolayotgan raqamlar - CRM xodimi qatorida */
.crmmap-q .taklif{font-size:.74rem; color:var(--indigo); margin-top:2px; overflow:visible; white-space:normal}
.crmmap-q .taklif b{font-size:.74rem; color:var(--indigo)}
.crmmap-q .taklif .metrikaqosh{margin:0 0 0 6px; font-size:.74rem}
.crmmap-q .yoq{font-size:.73rem; color:var(--warn); overflow:visible; white-space:normal}
.crmmap-q.taklifqollandi select{border-color:var(--indigo)}
@media (max-width:560px){
  .crmmap-q{flex-direction:column; align-items:stretch; gap:4px}
  .crmmap-q select{width:100%}
}

/* CRM: "Ma'lumot yig'ish holati" - ixcham jadval (Integratsiya > amoCRM) */
.crmyig-joy{margin:4px 0 16px}
.crmyig-izoh{color:var(--faint); font-size:.78rem; margin:2px 0 10px}
.tbl.crmyig th, .tbl.crmyig td{padding:8px 12px; font-size:.82rem}
.tbl.crmyig tbody tr{cursor:default}
.tbl.crmyig tbody tr:hover{background:none}
.tbl.crmyig b{font-weight:600; font-variant-numeric:tabular-nums}
.tbl.crmyig small{display:block; color:var(--faint); font-size:.72rem; margin-top:2px}

/* CRM qoidalari */
.crmbol{border-top:1px solid var(--line); margin-top:18px; padding-top:14px}
.crmbol-bosh{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.crmbol-bosh > div{display:flex; flex-direction:column}
.crmbol-bosh b{font-size:.9rem}
.crmbol-bosh span{font-size:.75rem; color:var(--muted)}
.crmqlist{display:flex; flex-direction:column; gap:7px}
.crmq{display:flex; align-items:flex-start; gap:10px; justify-content:space-between;
  border:1px solid var(--line); border-radius:var(--r); padding:9px 11px;
  background:var(--surface); cursor:pointer}
.crmq:hover{border-color:var(--indigo)}
.crmq > div{display:flex; flex-direction:column; gap:3px; min-width:0}
.crmq-bosh{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.crmq-bosh b{font-size:.87rem; font-weight:500}
.crmq-tav{font-size:.77rem; color:var(--muted); line-height:1.5}
.crmq button{flex:none; background:none; border:none; color:var(--faint); padding:2px 5px; cursor:pointer}
.crmq button:hover{color:var(--bad)}
.crmq-yoq{font-size:.8rem; color:var(--faint); margin:2px 0; line-height:1.55}
.qsinov{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.qsinov > b{font-size:.88rem}
.qsinov-jami{font-size:.79rem; color:var(--muted); margin:5px 0 10px; line-height:1.55}
.qsinov .tbl{font-size:.85rem}

/* Integratsiya bo'limi */
.intlist{display:flex; flex-direction:column; gap:10px}
.intkarta{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; cursor:pointer; font:inherit; color:inherit}
.intkarta:hover{border-color:var(--indigo)}
.intkarta.rejada{opacity:.72; cursor:default}
.intkarta.rejada:hover{border-color:var(--line)}
/* integratsiya logotipi - foni BREND rangi (amoCRM ko'ki va h.k.),
   palitraga bog'liq emas, shuning uchun matn ham qattiq oq */
.intlogo{flex:none; width:40px; height:40px; border-radius:10px; color:#fff;
  display:grid; place-items:center; font-size:1.15rem; font-weight:700}
.intmatn{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.intbosh{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.intbosh b{font-size:.98rem}
.intmatn > span{font-size:.8rem; color:var(--muted); line-height:1.5}
.intnima{font-size:.77rem; color:var(--faint) !important; line-height:1.5}
.intulan{font-size:.79rem; color:var(--ok) !important}
.intstrelka{flex:none; color:var(--faint); font-size:1.4rem; line-height:1}

/* varaqadagi "olib tashlash" tugmasi */
.psolib{flex:none; background:none; border:none; color:var(--faint); cursor:pointer;
  padding:2px 4px; font-size:.95rem; line-height:1}
.psolib:hover{color:var(--bad)}
.psjami > div{display:flex; align-items:center; gap:8px}
.psjami > div > span:first-child{flex:1}

/* xodim: yuborilgan so'rovni bekor qilish */
.reqbekor{background:none; border:none; color:var(--muted); font-size:.78rem;
  padding:3px 0 0; cursor:pointer; text-decoration:underline}
.reqbekor:hover{color:var(--bad)}

/* modal harakati - pastdan ko'tarilib, yaqinlashadi */
@keyframes modalFon{ from{opacity:0} to{opacity:1} }
@keyframes modalKir{
  from{opacity:0; transform:translateY(14px) scale(.98)}
  to{opacity:1; transform:none}
}
@supports not (backdrop-filter: blur(1px)) {
  .modal-overlay{background:rgba(15,17,21,.5)}
  .modal-box, .cam-box, .livecard{background:var(--surface)}
}

/*
 * HARAKATNI KAMAYTIRISH.
 *
 * Tizim sozlamasida "harakatni kamaytir" yoqilgan bo'lsa (bosh
 * aylanishi, vestibulyar sezgirlik) - animatsiya o'chadi. Bu
 * tanlov emas, hurmat.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* mavzu almashtirgich - uch holatli segment */
.mavzutan{display:flex; gap:2px; padding:3px; margin:4px 0 6px;
  background:var(--glass-2); border:1px solid var(--glass-line); border-radius:var(--r-pill)}
.mavzutan button{flex:1; background:none; border:none; cursor:pointer; color:var(--faint);
  padding:6px 2px; border-radius:var(--r-pill); display:flex; flex-direction:column;
  align-items:center; gap:2px; font:inherit;
  transition:background var(--mid) var(--ease), color var(--fast) var(--ease)}
.mavzutan button svg{width:15px; height:15px}
.mavzutan button span{font-size:.66rem; line-height:1; color:var(--muted)}
.mavzutan button.on span{color:var(--ink)}
.mavzutan button:hover{color:var(--ink)}
.mavzutan button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card)}
/* til almashtirgichda belgi yo'q - faqat kod, shuning uchun biroz kattaroq */
.tiltan button span{font-size:.72rem; font-weight:600; letter-spacing:.04em}

/*
 * IKONKALAR.
 *
 * Ataylab SODDA chiziqli shaklda qoladi. "Shisha ikonka" chiroyli
 * ko'rinadi, lekin tanilish tezligini pasaytiradi - foydalanuvchi
 * ikonkani o'qimaydi, TANIYDI. Bezak qancha ko'p bo'lsa, tanish
 * shuncha sekin.
 *
 * Shu sababli faqat bir xillik ta'minlanadi: hamma ikonka 24x24
 * to'rda, chiziq qalinligi 2, uchlari va burchaklari yumaloq.
 */
svg{ stroke-linecap:round; stroke-linejoin:round }
.navlink svg, .tabbtn svg, .btn svg, .emp-icon-btn svg{ transition:transform var(--mid) var(--ease) }
.navlink:active svg, .tabbtn:active svg{ transform:scale(.92) }

/* jadval qatorlari - yumshoq javob */
.tbl tbody tr{ transition:background var(--fast) var(--ease) }

/* yozuvlar ro'yxati va kartochkalar ham bosilganda javob bersin */
.crmq:active, .kat-q:active, .intkarta:active{ transform:scale(.995) }
.crmq, .kat-q, .intkarta{ transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease) }

/* ------------------------------------------------------------------ *
 * KANDIDAT VORONKASI MUHARRIRI (Sozlamalar)
 *
 * Har qator: rang, nom, qulf (tizim etapi), kandidat soni va uchta
 * tugma. Tartib tugmalari ATAYLAB tortib-surish emas: telefonda
 * tortish noaniq ishlaydi va tasodifan tartibni buzadi.
 * ------------------------------------------------------------------ */
.etapqator{display:flex; align-items:center; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--line-2)}
.etapqator:last-child{border-bottom:none}
.etapqator input[type="color"]{width:26px; height:26px; padding:0; border:1px solid var(--line);
  border-radius:7px; background:none; cursor:pointer; flex:none}
.etapqator input[type="text"], .etapqator input:not([type]){flex:1; min-width:0}
.etapqulf{font-size:.82rem; flex:none; cursor:help}
.etapsoni{font-size:.74rem; color:var(--muted); white-space:nowrap; flex:none}
.etapqator button{background:none; border:1px solid var(--line); border-radius:8px;
  width:26px; height:26px; cursor:pointer; color:var(--muted); flex:none; font:inherit;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease)}
.etapqator button:hover:not(:disabled){color:var(--ink); border-color:var(--line-2)}
.etapqator button:disabled{opacity:.35; cursor:default}

/* ------------------------------------------------------------------ *
 * SAVOL RO'YXATIDAGI TANLOV AMALLARI
 *
 * "Barchasini tanlash" / "Hech birini tanlamaslik" ilgari `.crumb`
 * edi - ya'ni oddiy matn-havola. Ostidagi savollar ham matn bo'lgani
 * uchun ular qo'shilib ketardi va amal ekani bilinmasdi.
 *
 * Endi ular kichik tugma ko'rinishida va ostidagi ro'yxatdan chiziq
 * bilan ajratilgan: matn emas, BOSILADIGAN narsa ekani ko'rinib tursin.
 * ------------------------------------------------------------------ */
.tanlovpanel{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line)}
.tanlovamal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--muted); font:inherit; font-size:.76rem; padding:.34em .9em; cursor:pointer;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.tanlovamal:hover{color:var(--ink); border-color:var(--indigo); background:var(--surface-2)}
.tanlovamal:active{transform:scale(.97)}

/* ------------------------------------------------------------------ *
 * BO'LIM ALMASHUVI
 *
 * Ilgari bo'limlar butunlay animatsiyasiz almashardi: `display:none`
 * olib tashlanardi va yangi sahifa birdan paydo bo'lardi. Ko'z qayerga
 * qarashni bilmasdi.
 *
 * Endi qisqa kirish harakati bor - pastdan biroz ko'tarilib, ochiladi.
 * ATAYLAB sekin emas (.24s) va ATAYLAB 3D emas: rahbar kuniga o'nlab
 * marta bo'lim almashtiradi, har safar uzun animatsiya kutish ma'lumotni
 * kechiktiradi va tezda charchatadi.
 *
 * `display:none` dan chiqqan element CSS animatsiyasini qaytadan
 * ishga tushiradi - shuning uchun qo'shimcha JS kerak emas.
 * ------------------------------------------------------------------ */
@keyframes bolimKir {
  from { opacity:0; transform:translateY(6px) }
  to   { opacity:1; transform:none }
}
main > [id$="View"]:not(.hidden) { animation:bolimKir var(--mid) var(--ease) }

/* --- Bu oy: varaqa qadamlar bo'yicha, manbalar, tuzatish formasi --- */
.tekshir b a{font-weight:400; margin-left:6px}
.ps-guruh{margin-top:14px}
.ps-guruh-bosh{display:flex; justify-content:space-between; gap:10px; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding-bottom:6px; border-bottom:1px solid var(--line)}
.ps-manbalar{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.ps-manba{margin-top:12px; background:var(--surface-2); border-radius:10px; padding:10px 12px; font-size:.86rem}
.ps-manba-bosh{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.ps-manba-bosh .mono{margin-left:auto}
.ps-yozuv{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-top:1px solid var(--line-2); color:var(--muted)}
.ps-yozuv b{color:var(--ink); font-weight:500; font-family:var(--mono); white-space:nowrap}
.ps-yozuv a{color:var(--indigo)}
.ps-amallar{border-top:1px solid var(--line); margin-top:16px; padding-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.ps-amallar #psForma{flex-basis:100%}
.ps-forma{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px}
.ps-forma input{margin:0; flex:1; min-width:160px}
.mtinput.kerak{border-color:var(--warn)}
.qchk{display:flex; align-items:center; gap:8px; font-size:.92rem; cursor:pointer}
.qchk input{width:auto; margin:0}
/* xodim qo'shishda jamoa taklifi */
.taklif{background:var(--acc-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px; margin-bottom:14px; display:flex; flex-direction:column; gap:4px}
.taklif label{display:flex; align-items:flex-start; gap:9px; margin:0; cursor:pointer; font-size:.92rem; font-weight:400}
.taklif input{width:auto; margin:2px 0 0}
.taklif .kizoh{margin:0}
/* bo'limlar paneli (Xodimlar sahifasi pastida) */
.bolimlar{margin-top:22px; max-width:640px}
.bolimlar > summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none}
.bolimlar > summary::-webkit-details-marker{display:none}
.bolimlar > summary::before{content:'▸'; color:var(--faint); transition:transform var(--fast) var(--ease)}
.bolimlar[open] > summary::before{transform:rotate(90deg)}
.bolimlar > *:not(summary){margin-top:12px}
.us-sekund{display:inline-flex; align-items:center; gap:6px; color:var(--muted)}
.manba-belgi{font-size:.74rem; padding:.15em .6em; border-radius:999px; white-space:nowrap}
.manba-belgi.crm{background:var(--ok-soft); color:var(--ok)}
.manba-belgi.qolda{background:var(--surface-2); color:var(--muted)}
.kunchiziq{display:flex; flex-wrap:wrap; gap:4px; align-items:baseline; margin:0}
.kunchiziq b{font-family:var(--mono); font-weight:500}