/* ============================================================
   Super Optom — investorlar uchun savdo ko'rsatkichlari (mobil-first)
   Uslub: "soft structuralism" — kumush-kulrang asos, suzuvchi sirtlar, bitta amber urg'u.
   Har bir karta ikki qavat: tashqi "tarnov" (.card — sarlavha shu yerda) + ichki oq "plita" (.card__body).
   Filial ranglari admin paneldagi bilan bir xil (Fayz ko'k, Horeca to'q sariq, Depo yashil-moviy);
   dataviz validatoridan o'tgan: yorug' #fff va qorong'i #181b20 sirtlarda — plita rangi o'zgarmasin.
   CSP: inline style yo'q; JS faqat CSSOM orqali (--p, --i, transform) qiymat beradi.
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#eef0f3; --surface:#ffffff; --sunken:#f3f5f7;
  --shell:rgba(21,26,36,.04); --hair:rgba(21,26,36,.07); --hair-firm:rgba(21,26,36,.14);
  --hi:rgba(255,255,255,.9);
  --glass:rgba(246,247,249,.9);
  --text:#14171c; --muted:#5f6874; --faint:#838b97;
  --ink:#171a20; --ink-on:#ffffff;
  --accent:#e0951f; --accent-hi:#eda330; --accent-ink:#241703; --accent-soft:rgba(224,149,31,.18);
  --glow:rgba(237,163,48,.22);
  --grid:#e8ebef; --axis:#c6ccd4; --track:#eceef2; --bar:#7d8896; --thumb:#ffffff;
  --good:#006300; --good-soft:rgba(0,120,0,.10); --live:#17a34a; --bad:#b3261e; --bad-soft:rgba(192,57,47,.10);
  --warn-bg:#fff6e5; --warn-line:#f1d9a6; --warn-ink:#5c4308;
  --sheen:rgba(255,255,255,.75); --glint:rgba(224,149,31,.13); --glow2:rgba(255,255,255,.7); --dot:rgba(21,26,36,.10);
  --shadow-core:inset 0 1px 0 var(--hi), 0 1px 1px rgba(21,26,36,.04), 0 14px 30px -20px rgba(21,26,36,.26);
  --shadow-float:0 0 0 1px var(--hair), inset 0 1px 0 var(--hi), 0 18px 40px -22px rgba(21,26,36,.38);
  --s0:#2a78d6; --s1:#eb6834; --s2:#1baf7a; --s3:#eda100;
  --s4:#e87ba4; --s5:#008300; --s6:#4a3aa7; --s7:#e34948;
  --r-shell:26px; --r-core:21px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.32,.72,0,1); --back:cubic-bezier(.34,1.56,.64,1); --sine:cubic-bezier(.45,0,.55,1);
  --z-island:20; --z-tip:5; --z-fab:25; --z-prog:30; --z-skip:40; --z-splash:100;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#0c0e11; --surface:#181b20; --sunken:#1f2329;
    --shell:rgba(255,255,255,.035); --hair:rgba(255,255,255,.07); --hair-firm:rgba(255,255,255,.16);
    --hi:rgba(255,255,255,.06);
    --glass:rgba(20,23,28,.88);
    --text:#f2f4f7; --muted:#a6adb8; --faint:#7f8793;
    --ink:#f2f4f7; --ink-on:#14171c;
    --accent:#eda330; --accent-hi:#f3b04a; --accent-ink:#241703; --accent-soft:rgba(237,163,48,.22);
    --glow:rgba(237,163,48,.11);
    --grid:#262a31; --axis:#3a404a; --track:#23272e; --bar:#8f99a8; --thumb:#2b3038;
    --good:#2fbf4a; --good-soft:rgba(47,191,74,.14); --live:#2fbf4a; --bad:#f07b72; --bad-soft:rgba(240,123,114,.14);
    --warn-bg:#2a2313; --warn-line:#4d3f1a; --warn-ink:#f1d9a6;
    --sheen:rgba(255,255,255,.07); --glint:rgba(255,255,255,.07); --glow2:rgba(120,140,170,.10); --dot:rgba(255,255,255,.09);
    --shadow-core:inset 0 1px 0 var(--hi), 0 1px 2px rgba(0,0,0,.45);
    --shadow-float:0 0 0 1px var(--hair), inset 0 1px 0 var(--hi), 0 18px 40px -20px rgba(0,0,0,.8);
    --s0:#3987e5; --s1:#d95926; --s2:#199e70; --s3:#c98500;
    --s4:#d55181; --s5:#008300; --s6:#9085e9; --s7:#e66767;
  }
}

*{ box-sizing:border-box }
[hidden]{ display:none !important }
/* Zoom o'chirilgan (ilovadek tursin): touch-action ajdodlar bilan kesishadi -- html'da berilsa hamma joyda ikki barmoq bilan
   kattalashtirish va ikki marta bosish ishlamaydi, vertikal/gorizontal surish qoladi. iOS viewport'dagi user-scalable=no ni
   e'tiborsiz qoldiradi, shuning uchun asosiy himoya shu + app.js dagi gesture* tinglovchilari. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; touch-action:pan-x pan-y }
body{
  margin:0; min-height:100dvh;
  background:var(--bg); color:var(--text);
  font-family:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
/* Muhit: tepada iliq nur + mayin don. Qo'zg'almas, kontent ostida -- skrollda qayta chizilmaydi. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url(/noise.png) 0 0 / 64px 64px;
}
h1,h2,p{ margin:0 }
button{ font:inherit; color:inherit }
.muted{ color:var(--muted) }
.num{ font-variant-numeric:tabular-nums }

:where(button,input,a,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.skip{
  position:absolute; left:12px; top:-60px; z-index:var(--z-skip);
  padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--ink-on);
  font-weight:600; text-decoration:none; transition:transform .4s var(--ease);
}
.skip:focus{ transform:translateY(72px) }

/* filial rangi -- faqat belgi (nuqta, ustun) rangi; matn hech qachon bu rangda emas */
.s0{ fill:var(--s0) } .s1{ fill:var(--s1) } .s2{ fill:var(--s2) } .s3{ fill:var(--s3) }
.s4{ fill:var(--s4) } .s5{ fill:var(--s5) } .s6{ fill:var(--s6) } .s7{ fill:var(--s7) }
.bg-s0{ background:var(--s0) } .bg-s1{ background:var(--s1) } .bg-s2{ background:var(--s2) } .bg-s3{ background:var(--s3) }
.bg-s4{ background:var(--s4) } .bg-s5{ background:var(--s5) } .bg-s6{ background:var(--s6) } .bg-s7{ background:var(--s7) }

/* ---------------- Brend ---------------- */
.brand{ display:flex; align-items:center; gap:12px; min-width:0; margin-right:auto }
.brand__mark{
  width:40px; height:40px; flex:none; border-radius:13px;
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 20% 0%, var(--accent-hi) 0%, #cf7f1e 100%);
  color:var(--accent-ink);
  box-shadow:0 6px 16px -6px rgba(200,125,30,.6), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,66,6,.25);
}
.brand__mark svg{ width:21px; height:21px }
.brand__mark--lg{ width:56px; height:56px; border-radius:18px }
.brand__mark--lg svg{ width:29px; height:29px }
.brand__txt{ min-width:0 }
.brand h1{ font-size:17px; font-weight:600; letter-spacing:-.025em; line-height:1.2 }
.status{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap }
.live{ position:relative; width:7px; height:7px; flex:none; border-radius:50%; background:var(--live) }
.live::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--live);
  animation:ping 2.2s var(--ease) infinite;
}
@keyframes ping{ from{ transform:scale(1); opacity:.55 } 70%,to{ transform:scale(3.2); opacity:0 } }

/* ---------------- Tugmalar ---------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  overflow:hidden; width:100%; min-height:52px; padding:8px 20px;
  font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  border:0; border-radius:999px; cursor:pointer;
  transition:background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:active{ transform:scale(.98) }
.btn[disabled]{ opacity:.6; pointer-events:none }
/* tugma ichidagi tugma: ikonka o'z doirachasida, o'ng chetga taqalgan */
.btn__ico{
  position:absolute; right:7px; top:50%; width:38px; height:38px; margin-top:-19px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(36,23,3,.12);
  transition:transform .5s var(--ease), background .4s var(--ease);
}
.btn__ico svg{ width:18px; height:18px; transition:transform .5s var(--ease) }
.btn--primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -12px rgba(200,125,30,.75);
}
.btn--ghost{ margin-top:14px; min-height:48px; background:var(--sunken); color:var(--text); box-shadow:inset 0 0 0 1px var(--hair) }
.btn--ghost .btn__ico{ width:34px; height:34px; margin-top:-17px; background:var(--surface); box-shadow:0 0 0 1px var(--hair) }
.btn--ghost[aria-expanded=true] .btn__ico svg{ transform:rotate(180deg) }
.btn--ink{ background:var(--ink); color:var(--ink-on) }
.btn--quiet{ background:transparent; color:var(--muted); min-height:46px }
@media (hover:hover){
  .btn--primary:hover{ background:var(--accent-hi) }
  .btn--primary:hover .btn__ico{ transform:translateX(3px) scale(1.05); background:rgba(36,23,3,.18) }
  .btn--ghost:hover{ background:var(--track) }
  .btn--quiet:hover{ background:var(--sunken); color:var(--text) }
}

.iconbtn{
  position:relative; overflow:hidden;
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--glass); color:var(--muted); cursor:pointer;
  box-shadow:0 0 0 1px var(--hair), inset 0 1px 0 var(--hi), 0 6px 14px -10px rgba(21,26,36,.4);
  transition:transform .4s var(--ease), color .3s var(--ease);
}
.iconbtn svg{ width:19px; height:19px }
.iconbtn:active{ transform:scale(.94) }
@media (hover:hover){ .iconbtn:hover{ color:var(--text) } }
.iconbtn.spin svg{ animation:spin .9s cubic-bezier(.5,.1,.5,.9) infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

.pillbtn{
  position:relative; overflow:hidden; min-height:30px; padding:4px 12px; border:0; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:500; color:var(--muted);
  background:var(--surface); box-shadow:0 0 0 1px var(--hair), 0 1px 2px rgba(21,26,36,.05);
  transition:color .3s var(--ease), transform .4s var(--ease), background .3s var(--ease);
}
.pillbtn:active{ transform:scale(.96) }
.pillbtn[aria-expanded=true]{ background:var(--ink); color:var(--ink-on); box-shadow:none }

/* ---------------- Kirish ---------------- */
.login{
  position:relative; overflow:hidden;
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:32px 14px calc(28px + env(safe-area-inset-bottom));
}
.bezel{
  padding:6px; border-radius:34px;
  background:var(--shell); box-shadow:0 0 0 1px var(--hair);
}
.login__bezel{ position:relative; width:100%; max-width:404px }
.login__card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:28px 22px 22px;
  background:var(--surface); border-radius:28px;
  box-shadow:var(--shadow-core), 0 30px 60px -40px rgba(21,26,36,.45);
}
.eyebrow{
  margin-top:22px; padding:4px 10px; border-radius:999px;
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair);
}
.login__card h1{ margin-top:12px; font-size:30px; font-weight:600; letter-spacing:-.04em; line-height:1.1 }
.login__lead{ margin:8px 0 22px; max-width:30ch; font-size:14.5px; color:var(--muted); text-wrap:pretty }
.fld{ width:100%; display:flex; flex-direction:column; gap:7px; margin-bottom:14px }
.fld label{ font-size:13px; font-weight:500; color:var(--muted); padding-left:4px }
.fld__wrap{ position:relative }
.fld input{
  width:100%; min-height:52px; padding:12px 16px;
  font:inherit; font-size:16px; color:var(--text);       /* 16px: iOS fokusda zoom qilmasin */
  background:var(--sunken); border:0; border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--hair-firm);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.fld__wrap input{ padding-right:54px }
.fld input:focus{ outline:none; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft) }
.fld__eye{
  position:absolute; right:6px; top:6px; width:40px; height:40px;
  display:grid; place-items:center; border:0; border-radius:12px; background:none; color:var(--faint); cursor:pointer;
  transition:color .3s var(--ease);
}
.fld__eye svg{ width:20px; height:20px }
.fld__eye .slash{ opacity:0; transition:opacity .3s var(--ease) }
.fld__eye[aria-pressed=true]{ color:var(--text) }
.fld__eye[aria-pressed=true] .slash{ opacity:1 }
.login__err{
  width:100%; margin:-2px 0 14px; padding:11px 14px; font-size:14px;
  color:var(--bad); background:var(--bad-soft); border-radius:var(--r-sm);
  animation:rise .5s var(--ease) both;
}
.login .btn--primary{ margin-top:6px }
.login__foot{ position:relative; font-size:12.5px; color:var(--faint); text-align:center }

/* ---------------- Sarlavha + suzuvchi filtr paneli ---------------- */
.top{ padding-top:env(safe-area-inset-top) }
.top__in{
  max-width:760px; margin:0 auto;
  padding:16px 16px 10px;
  display:flex; align-items:center; gap:8px;
}

.island{
  position:sticky; top:calc(8px + env(safe-area-inset-top)); z-index:var(--z-island);
  width:calc(100% - 20px); max-width:740px; margin:2px auto 0;
  padding:5px; border-radius:23px; overflow:hidden;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:var(--shadow-float);
}
/* yuklanayotganini bildiruvchi ingichka chiziq (panel pastida) */
.island__bar{
  position:absolute; left:0; right:0; bottom:0; height:2px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:translateX(-100%); transition:opacity .3s var(--ease);
}
.island.busy .island__bar{ opacity:1; animation:sweep 1.1s var(--ease) infinite }
@keyframes sweep{ to{ transform:translateX(100%) } }

/* gorizontal skroll qatorlari: chetlari so'nib turadi -- "yana bor" degan ishora */
.hs{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.hs::-webkit-scrollbar{ display:none }
.hs.fade-r{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent) }
.hs.fade-l{ -webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent) }
.hs.fade-l.fade-r{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent) }

/* Davr: segmentli boshqaruv, tanlangani ostida sirpanuvchi plita */
.seg{ border-radius:18px; background:var(--track) }
.seg__in{ position:relative; display:flex; width:max-content; min-width:100%; padding:3px; gap:2px }
.seg__thumb{
  position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:15px;
  background:var(--thumb);
  box-shadow:0 1px 2px rgba(21,26,36,.14), 0 6px 12px -6px rgba(21,26,36,.22), inset 0 1px 0 var(--hi);
  transition:transform .55s var(--ease), width .55s var(--ease);
}
.seg__thumb.still{ transition:none }
.seg button{
  position:relative; z-index:1; flex:1 0 auto; overflow:hidden;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:36px; padding:6px 14px; border:0; border-radius:15px; background:none; cursor:pointer;
  font-size:14px; font-weight:500; white-space:nowrap; color:var(--muted);
  transition:color .35s var(--ease);
}
/* qalin yozuv kengligi oldindan band qilinadi -- tanlanganda qo'shnilar siljimaydi */
.seg button::after{ content:attr(data-label); height:0; overflow:hidden; visibility:hidden; font-weight:600 }
.seg button[aria-pressed=true]{ color:var(--text); font-weight:600 }

.chips{ position:relative; display:flex; gap:6px; margin-top:6px; padding:1px }
.chip{
  position:relative; overflow:hidden; flex:none; display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:6px 13px;
  font-size:13.5px; font-weight:500; white-space:nowrap;
  color:var(--muted); background:transparent;
  border:0; border-radius:999px; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hair-firm);
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease);
}
.chip:active{ transform:scale(.96) }
.chip[aria-pressed=true]{ color:var(--ink-on); font-weight:600; background:var(--ink); box-shadow:none }
.dot{ width:8px; height:8px; border-radius:50%; flex:none }

.range{ display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--faint); animation:rise .5s var(--ease) both }
.range input{
  flex:1 1 0; min-width:0; min-height:40px; padding:6px 12px;
  font:inherit; font-size:16px; color:var(--text);
  background:var(--surface); border:0; border-radius:14px; box-shadow:inset 0 0 0 1px var(--hair-firm);
}

/* ---------------- Bo'limlar paneli (tabbar): pastda suzuvchi shisha, tanlangan bo'lim ostida sirpanuvchi plita ---------------- */
/* --tabbar-b: panel ekran tubiga yaqin turadi. iPhone'da safe-area (34px) ning hammasi emas, faqat "home" chizig'idan
   yuqori qismi qoldiriladi -- aks holda panel ekran o'rtasiga ko'tarilib qolgandek ko'rinadi. */
:root{ --tabbar-b:max(6px, calc(env(safe-area-inset-bottom) - 18px)) }
.tabbar{
  position:fixed; left:10px; right:10px; bottom:var(--tabbar-b); z-index:var(--z-island);
  width:auto; max-width:calc(100% - 20px); margin:0 auto; padding:5px; border-radius:26px;
  background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  box-shadow:var(--shadow-float), 0 22px 44px -18px rgba(21,26,36,.45);
}
.tabbar__in{ position:relative; display:flex; gap:2px }
.tabbar__thumb{
  position:absolute; left:0; top:0; bottom:0; border-radius:21px; background:var(--ink);
  transition:transform .6s var(--ease), width .6s var(--ease);
}
.tabbar__thumb.still{ transition:none }
.tab{
  position:relative; overflow:hidden; flex:1 1 0; min-width:0; min-height:52px; padding:7px 9px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:0; border-radius:21px; background:none; cursor:pointer;
  font:inherit; font-size:clamp(9.5px, 2.7vw, 11.5px); font-weight:500; letter-spacing:.005em; white-space:nowrap; color:var(--muted);
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.tab:active{ transform:scale(.95) }
/* 6 ta bo'lim: tor telefonda "Kontragent" kabi uzun yozuv kesilib qolmasin */
@media (max-width:430px){ .tab{ padding:7px 3px 6px; font-size:clamp(8.5px, 2.4vw, 11.5px) } }
.tab[aria-current=page]{ color:var(--ink-on); font-weight:600 }
.tab__ico{ width:22px; height:22px; flex:none; transition:transform .6s var(--back) }
.tab[aria-current=page] .tab__ico{ transform:translateY(-1px) scale(1.08) }
@media (hover:hover){ .tab:not([aria-current]):hover{ color:var(--text) } }
@media (min-width:430px){ .tab{ padding-left:12px; padding-right:12px } }
.go .tabbar{ animation:tabbar-rise 1s .45s var(--ease) backwards }
@keyframes tabbar-rise{ from{ opacity:0; transform:translateY(140%) scale(.94) } }

/* qaysi karta qaysi bo'limda: data-t (index.html); data-t siz elementlar (ogohlantirish, izoh) hamma bo'limda */
.wrap[data-tab=tovar] > [data-t]:not([data-t~=tovar]),
.wrap[data-tab=dash] > [data-t]:not([data-t~=dash]),
.wrap[data-tab=kassir] > [data-t]:not([data-t~=kassir]),
.wrap[data-tab=kontr] > [data-t]:not([data-t~=kontr]),
.wrap[data-tab=fin] > [data-t]:not([data-t~=fin]){ display:none }

/* ---------------- Asosiy ---------------- */
.wrap{
  max-width:760px; margin:0 auto;
  padding:14px 10px calc(var(--tabbar-b) + 92px);      /* pastda tabbar uchun joy */
  display:flex; flex-direction:column; gap:12px;
  transition:opacity .4s var(--ease);
  overflow-x:clip;                 /* yondan kirib keladigan elementlar ochilguncha gorizontal skroll hosil qilmasin */
}
@supports not (overflow-x:clip){ .wrap{ overflow-x:hidden } }
.wrap.loading{ opacity:.55 }      /* qayta yuklashda eski ko'rinish xira turadi -- sakrash yo'q */

@keyframes rise{ from{ opacity:0; transform:translateY(14px) } }

/* Karta = tarnov (sarlavha shu qavatda) + plita */
.card{
  min-width:0; padding:5px; border-radius:var(--r-shell);
  background:var(--shell); box-shadow:0 0 0 1px var(--hair);
}
.card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:40px; padding:4px 8px 5px 13px;
}
.card__head h2{ font-size:13.5px; font-weight:600; letter-spacing:-.005em }
.card__head .muted{ font-size:12.5px; text-align:right }
.card__body{
  padding:16px; border-radius:var(--r-core);
  background:var(--surface); box-shadow:var(--shadow-core);
}

.banner{
  padding:12px 16px; font-size:13.5px; line-height:1.45; text-wrap:pretty;
  color:var(--warn-ink); background:var(--warn-bg);
  border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--warn-line);
}
.banner button{
  display:block; margin-top:8px; padding:6px 14px; border:0; border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--warn-bg); background:var(--warn-ink);
}

/* Hero: sahifadagi yagona katta raqam */
.hero{ display:flex; flex-direction:column }
.hero__body{
  position:relative; overflow:hidden; flex:1; padding:20px 18px 18px;
}
.hero__body > *{ position:relative }
.hero__body::before{
  content:''; position:absolute; inset:0; pointer-events:none; transform-origin:100% 0;
  background:radial-gradient(90% 120% at 100% 0%, var(--accent-soft), transparent 58%);
  animation:breathe 9s var(--sine) infinite;
}
.hero__body::after{
  content:''; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; pointer-events:none;
  background:linear-gradient(100deg, transparent, var(--glint), transparent);
  transform:translateX(-130%) skewX(-14deg);
}
.hero__body.sheen::after{ animation:sheen 1.4s var(--ease) .25s }
.hero__value{
  font-size:clamp(36px, 11vw, 56px); font-weight:600; letter-spacing:-.045em; line-height:1.05;
  white-space:nowrap;
}
.hero__value small{ font-size:.34em; font-weight:500; letter-spacing:0; color:var(--muted) }
.hero__exact{ font-size:13px; margin-top:4px }
.hero__note{ display:flex; align-items:center; gap:7px; font-size:12.5px; margin-top:14px }
.hero__note:empty{ display:none }

.delta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:6px; font-size:12.5px; color:var(--muted) }
.delta:empty{ display:none }
.delta b{
  display:inline-flex; align-items:center; gap:3px; padding:2px 7px 2px 5px; border-radius:8px;
  font-weight:600; color:var(--text); background:var(--sunken);
}
.delta b.up{ color:var(--good); background:var(--good-soft) }
.delta b.down{ color:var(--bad); background:var(--bad-soft) }
.delta svg{ width:12px; height:12px }
.delta--lg{ margin-top:14px; font-size:13.5px }
.delta--lg b{ padding:4px 10px 4px 7px; border-radius:10px; font-size:14px }
.delta--lg svg{ width:13px; height:13px }
.delta--mini{ display:inline-flex; margin:0; gap:0 }
.delta--mini b{ padding:0; background:none !important }

/* bu davr / oldingi davr: ikki chiziqli taqqos */
.cmp{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px 12px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--hair);
  font-size:12.5px; color:var(--muted);
}
.cmp b{ font-weight:600; color:var(--text); text-align:right }
.cmp .prev{ font-weight:500; color:var(--muted) }

/* ulush chiziqlari: to'ldirgich siljib kiradi (transform), eni o'zgarmaydi */
.share{ height:6px; border-radius:3px; background:var(--track); overflow:hidden }
.share i{
  display:block; width:100%; height:100%; border-radius:3px;
  transform:translateX(calc(max(var(--p, 0%), 3px) - 100%));
  animation:fill 1s var(--ease) both;
}
@keyframes fill{ from{ transform:translateX(-100%) } }
.share i.neutral{ background:var(--bar) }
.share i.ink{ background:var(--ink) }
.share i.soft{ background:var(--axis) }

/* KPI: bitta tarnovda to'rtta plita */
.kpis{
  display:grid; grid-template-columns:1fr 1fr; gap:5px;
  padding:5px; border-radius:var(--r-shell);
  background:var(--shell); box-shadow:0 0 0 1px var(--hair);
}
.tile{
  min-width:0; padding:14px 14px 13px; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-core); box-shadow:var(--shadow-core);
}
.tile__top{ display:flex; align-items:center; gap:8px; margin-bottom:10px }
.tile__ico{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:9px; color:var(--muted); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair);
}
.tile__ico svg{ width:16px; height:16px }
.tile__label{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tile__value{ font-size:clamp(19px, 5.7vw, 22px); font-weight:600; letter-spacing:-.03em; line-height:1.15 }
.tile__value small{ font-size:.56em; font-weight:500; letter-spacing:0; color:var(--muted) }
.tile__sub{ margin-top:7px; font-size:12.5px; color:var(--muted); min-height:22px; display:flex; align-items:center }
.tile .delta{ margin-top:7px; min-height:22px }

/* ---------------- Grafik ---------------- */
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 12px; font-size:13px; color:var(--muted) }
.legend:empty{ display:none }
.legend span{ display:inline-flex; align-items:center; gap:6px }
.legend i{ width:10px; height:10px; border-radius:3px; flex:none }

.chart{ position:relative; touch-action:pan-y; border-radius:var(--r-sm) }
.chart svg{ display:block; width:100%; height:auto; overflow:visible }
.chart .grid{ stroke:var(--grid); stroke-width:1 }
.chart .axis{ stroke:var(--axis); stroke-width:1 }
.chart text{ fill:var(--faint); font-size:11px; font-family:inherit; font-variant-numeric:tabular-nums }
.chart text.lbl{ fill:var(--text); font-size:11.5px; font-weight:600; animation:lbl-drop .8s .7s var(--back) backwards }
.chart .col{ transition:opacity .3s var(--ease) }
.chart.has-sel .col{ opacity:.35 }
.chart.has-sel .col.sel{ opacity:1 }
.chart .stack{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:grow .9s var(--ease) both; animation-delay:calc(var(--i, 0) * 16ms);
}
@keyframes grow{ from{ transform:scaleY(0) } }
.chart .hit{ fill:transparent; cursor:pointer }
.chart .sel-bg{ fill:var(--track); opacity:0; transition:opacity .3s var(--ease) }
.chart .col.sel .sel-bg{ opacity:.75 }
.chart__empty{ padding:48px 12px; text-align:center; color:var(--muted); font-size:14px }

.tip{
  position:absolute; z-index:var(--z-tip); top:0; left:0; min-width:156px; max-width:240px;
  padding:11px 13px; pointer-events:none; transform-origin:50% 100%;
  transition:transform .32s var(--ease);                 /* ustundan ustunga sirpanib o'tadi */
  animation:tip-pop .45s var(--back) backwards;
  background:var(--surface); border-radius:14px;
  box-shadow:0 0 0 1px var(--hair-firm), 0 18px 36px -16px rgba(21,26,36,.5);
  font-size:13px;
}
.tip__title{ color:var(--muted); font-size:12.5px }
.tip__total{ font-size:16px; font-weight:600; letter-spacing:-.02em; margin:1px 0 6px; font-variant-numeric:tabular-nums }
.tip__row{ display:flex; align-items:center; gap:8px; justify-content:space-between; line-height:1.6 }
.tip__row span{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); min-width:0 }
.tip__row i{ width:12px; height:3px; border-radius:2px; flex:none }
.tip__row b{ font-weight:600; font-variant-numeric:tabular-nums }
.tip__foot{ margin-top:6px; padding-top:6px; border-top:1px solid var(--hair); color:var(--muted); font-size:12.5px }

/* grafik ostidagi ikki xulosa: eng yuqori va o'rtacha */
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px }
.stat{ min-width:0; padding:11px 13px; border-radius:14px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair) }
.stat__label{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.stat__value{ margin-top:2px; font-size:16px; font-weight:600; letter-spacing:-.02em; white-space:nowrap }
.stat__value small{ font-size:.72em; font-weight:500; letter-spacing:0; color:var(--muted) }
.stat__sub{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.tablewrap{ margin-top:14px; overflow-x:auto; border-radius:14px; box-shadow:inset 0 0 0 1px var(--hair); animation:rise .5s var(--ease) both }
.tablewrap table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums }
.tablewrap th, .tablewrap td{ padding:9px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--hair) }
.tablewrap th{ font-size:12px; font-weight:500; color:var(--muted); background:var(--sunken) }
.tablewrap th:first-child, .tablewrap td:first-child{ text-align:left }
.tablewrap tr:last-child td{ border-bottom:0 }
.tablewrap tfoot td{ font-weight:600; border-top:1px solid var(--hair-firm) }

/* ---------------- Ro'yxatlar ---------------- */
.row{ padding:13px 0; border-top:1px solid var(--hair) }
.row:first-child{ border-top:0; padding-top:2px }
.row:last-child{ padding-bottom:2px }
button.row{
  position:relative; overflow:hidden; display:block; width:100%; text-align:left; background:none; cursor:pointer;
  border-left:0; border-right:0; border-bottom:0;
  transition:opacity .3s var(--ease);
}
button.row:active{ opacity:.6 }
.row__top{ display:flex; align-items:center; gap:8px }
.row__name{ display:inline-flex; align-items:center; gap:8px; font-weight:500; min-width:0; margin-right:auto }
.row__name > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row__val{ font-weight:600; letter-spacing:-.015em; white-space:nowrap; font-variant-numeric:tabular-nums }
.row__val small{ font-size:.85em; font-weight:500; color:var(--muted); letter-spacing:0 }
.row__go{ width:15px; height:15px; flex:none; margin-right:-3px; color:var(--faint); transition:transform .4s var(--ease) }
@media (hover:hover){ button.row:hover .row__go{ transform:translateX(3px); color:var(--text) } }
.row__sub{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:3px 0 9px; font-size:12.5px; color:var(--muted) }
.row__sub .pct{ display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; white-space:nowrap }
.tag{ display:inline-block; padding:1px 8px; font-size:11.5px; font-weight:500; color:var(--warn-ink); background:var(--warn-bg); box-shadow:inset 0 0 0 1px var(--warn-line); border-radius:7px }

.item{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:2px 11px; padding:12px 0; border-top:1px solid var(--hair) }
.item:first-child{ border-top:0; padding-top:2px }
.item__rank{
  width:26px; height:26px; display:grid; place-items:center; border-radius:9px;
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--muted); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair);
}
.item:nth-child(-n+3) .item__rank{ color:var(--ink-on); background:var(--ink); box-shadow:none }
.item__name{ font-size:14px; line-height:1.35; padding-top:3px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
.item__amt{ padding-top:3px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right }
.item__qty{ grid-column:2 / 4; font-size:12.5px; color:var(--muted) }
.item .share{ grid-column:2 / 4; height:3px; margin-top:6px }
.empty{ padding:20px 4px; text-align:center; color:var(--muted); font-size:14px }

/* ---------------- Tovarlar: ro'yxat qatori va kartochka varag'i ---------------- */
.irow .row__sub{ margin-bottom:0 }
.irow__price{ flex:none; font-size:14.5px; font-weight:600; letter-spacing:-.015em; white-space:nowrap }
.irow__price small{ font-size:.82em; font-weight:500; color:var(--muted); margin-left:2px }
.akt__head--it{ display:block }
.it__sec + .it__sec{ margin-top:16px }
.it__sec-h{ margin-bottom:7px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.it__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:8px }
.it__cell{ padding:12px 14px; border-radius:14px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair) }
.it__cell.is-zero{ opacity:.55 }
.it__br{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted) }
.it__qty{ margin-top:3px; font-size:20px; font-weight:600; letter-spacing:-.02em }
.it__prices, .akt__rows{ border-radius:14px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair) }
.it__prow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-top:1px solid var(--hair) }
.akt__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 12px; padding:11px 14px; border-top:1px solid var(--hair) }
.it__prow:first-child, .akt__row:first-child{ border-top:0 }
.it__prow.is-zero{ opacity:.6 }
.it__pname{ display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; font-weight:500 }
.it__pname > span:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.it__role{
  flex:none; padding:1px 8px; border-radius:7px; font-size:11px; font-style:normal; font-weight:600; letter-spacing:.01em;
  color:var(--muted); background:var(--surface); box-shadow:inset 0 0 0 1px var(--hair);
}
.it__role.is-w{ color:var(--accent-ink); background:var(--accent-hi); box-shadow:none }
.it__pval{ flex:none; white-space:nowrap; font-size:12.5px }
.it__pval b{ font-size:17px; font-weight:600; letter-spacing:-.02em }
.it__pval small{ color:var(--muted) }
/* ---------------- Kontragent: qidiruv + akt sverka ---------------- */
/* Kontragent va Tovarlar: davr filtri kerak emas (ikkalasi ham joriy holat, hisobot emas) */
#app[data-tab=kontr] #periodSeg, #app[data-tab=kontr] #range,
#app[data-tab=debt] #periodSeg, #app[data-tab=debt] #range,
#app[data-tab=tovar] #periodSeg, #app[data-tab=tovar] #range{ display:none }
#app[data-tab=kontr] .chips, #app[data-tab=kontr] .island .chips,
#app[data-tab=debt] .chips, #app[data-tab=debt] .island .chips,
#app[data-tab=tovar] .chips, #app[data-tab=tovar] .island .chips{ margin:0 }      /* davr yo'q: filiallar chapdan */
.search{ position:relative; display:flex; align-items:center; margin-bottom:10px }
.search__ico{ position:absolute; left:14px; width:19px; height:19px; color:var(--faint); pointer-events:none; transition:color .3s var(--ease) }
.search:focus-within .search__ico{ color:var(--text) }
.search.busy .search__ico{ animation:now-pulse 1s var(--sine) infinite }
.search input{
  width:100%; min-height:48px; padding:0 46px 0 42px; border:0; border-radius:16px; -webkit-appearance:none; appearance:none;
  font:inherit; font-size:16px; color:var(--text); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.search input::placeholder{ color:var(--faint) }
.search input::-webkit-search-cancel-button{ display:none }
.search input:focus{ outline:none; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft) }
.search__clear{ position:absolute; right:7px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer }
.search__clear svg{ width:17px; height:17px }
.plist__hint{ margin:0 2px 8px; font-size:12.5px }
.plist__hint b{ font-weight:600; color:var(--text) }
.prow .row__top{ min-height:30px }
/* o'ngda qoldiq: "−" biz qarzmiz, "+" bizdan qarz (ishora asosiy belgi, rang -- qo'shimcha) */
.prow__bal{ flex:none; font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; color:var(--faint) }
.prow__bal.is-neg, .akt__sum.is-neg{ color:var(--bad) }
.prow__bal.is-pos, .akt__sum.is-pos{ color:var(--good) }

/* Tushum kartasi ichidagi foyda qatori */
.hero__prof{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-top:12px; font-size:15px }
.hero__prof-k{ color:var(--muted); font-size:13px }
.hero__prof b{ font-size:19px; font-weight:600; letter-spacing:-.015em }
.hero__prof b.is-neg{ color:var(--bad) }
.hero__prof small{ color:var(--muted); font-size:12px }
.hero__prof-m{ margin-left:4px; padding:2px 8px; border-radius:8px; font-style:normal; font-size:12.5px;
  font-weight:600; color:var(--good); background:var(--good-soft) }
.hero__prof-m.is-neg{ color:var(--bad); background:var(--bad-soft) }
.hero__prof-c{ flex-basis:100%; color:var(--faint); font-size:11.5px }

.stat__value.is-neg{ color:var(--bad) }   /* olinmagan xizmat haqi -- yo'qotilgan pul */

/* ---------------- Tannarx va foyda ---------------- */
.it__cost{ margin-top:2px; font-size:11.5px; color:var(--muted) }          /* kartochkadagi sklad tannarxi */
.it__mrg{ margin-left:6px; font-size:11.5px; font-style:normal; font-weight:600; color:var(--good) }
.it__mrg.is-neg{ color:var(--bad) }
.irow .row__sub > span + span{ margin-left:8px }
.row__val.is-neg, .item__amt.is-neg, .pct.is-neg{ color:var(--bad) }        /* manfiy foyda qizil */
#profList .row__sub{ display:flex; gap:8px; align-items:center }
#profList .row__sub .pct{ margin-left:auto }

/* ---------------- Qarzlar: saralash/filtr tugmalari, qarz yoshi, kechikish belgisi ---------------- */
.debtfil{ display:flex; flex-wrap:wrap; gap:6px; margin:0 2px 10px }
.debtfil button{
  min-height:32px; padding:0 12px; border:0; border-radius:11px; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--muted); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair); cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.debtfil button[aria-pressed=true]{ color:var(--text); background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--accent) }
.debtfil button.is-warn[aria-pressed=true]{ color:var(--bad); box-shadow:inset 0 0 0 1.5px var(--bad) }
/* qarz yoshi: muddati kelmagandan 30+ kungacha, har qatorda ulush chizig'i */
.aging{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hair) }
.aging__row{ padding:7px 0 }
.aging__top{ display:flex; align-items:baseline; gap:10px; font-size:13.5px }
.aging__lbl{ flex:1; min-width:0; color:var(--muted) }
.aging__val{ flex:none; font-weight:600; letter-spacing:-.01em }
.aging__row.is-late .aging__lbl, .aging__row.is-late .aging__val{ color:var(--bad) }
.aging__row.is-zero{ opacity:.45 }
/* kechikkan qarz belgisi ro'yxat qatorida */
.dbadge{ flex:none; padding:1px 7px; border-radius:7px; font-size:11.5px; font-weight:600; white-space:nowrap;
  color:var(--bad); background:var(--bad-soft) }
.drow .row__sub{ display:flex; align-items:center; gap:8px }
.drow .row__sub > span:first-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* kartochka ichidagi rekvizitlar */
.dkv{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 4px; font-size:13px }
.dkv dt{ color:var(--muted) }
.dkv dd{ margin:0; text-align:right; overflow-wrap:anywhere }
.debtfil > span{ align-self:center; margin-left:4px; font-size:12.5px }

/* Akt sverka varag'i: tepada chapda firma nomi, o'ngda qoldiq; pastida akt (hozircha bo'sh) */
.sheet--akt{ max-width:760px }
.sheet--akt .sheet__in{ gap:0; max-height:calc(100dvh - 40px - env(safe-area-inset-bottom)) }
.akt__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--hair) }
.akt__id{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px }
.akt__id .eyebrow{ margin-top:0 }
.sheet .akt__id h2{ margin-top:4px; line-height:1.2; text-wrap:balance }
.sheet .akt__id p{ font-size:13px; margin:0 }
.akt__bal{ flex:none; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:0 5px; max-width:52%; padding-top:26px; text-align:right }
.akt__sum{ font-size:24px; font-weight:600; letter-spacing:-.03em; white-space:nowrap; color:var(--faint) }
.akt__bal small{ font-size:13px; color:var(--muted) }
.akt__lbl{ flex:1 0 100%; font-size:12.5px; color:var(--muted) }
.akt__rname{ min-width:0; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.akt__rsub{ grid-column:1 / -1; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.akt__sum--sm{ flex:none; font-size:16px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; color:var(--faint) }
.akt__asof{ margin-top:10px; color:var(--muted); background:none; box-shadow:none; padding:0 2px }
.akt__body{ flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain; margin:14px 0 }
.akt__empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 16px; text-align:center; color:var(--muted); font-size:14px; line-height:1.5; text-wrap:balance; border-radius:16px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair) }
.akt__empty b{ font-size:15.5px; font-weight:600; color:var(--text) }
.akt__ico{ width:36px; height:36px; margin-bottom:8px; padding:8px; box-sizing:content-box; border-radius:16px; color:var(--muted); background:var(--surface); box-shadow:inset 0 0 0 1px var(--hair) }

/* ---------------- Finance (1C hujjatlari) ---------------- */
.tabnote{ padding:2px 16px 0; font-size:12.5px; line-height:1.5; text-align:center; text-wrap:balance }
.card__body > .stats:first-child{ margin:0 0 14px }
.finsum{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.finsum .stat{ padding:14px 15px }
.finsum .stat__value{ font-size:22px; margin-top:4px }
.finsum .stat__sub{ margin-top:3px; white-space:normal }
.finsum .stat--net{ grid-column:1 / -1 }
.finsum .delta{ margin-top:5px }
.stat__mark{ display:inline-block; width:10px; height:10px; margin-right:7px; border-radius:3px; vertical-align:-1px }
.finsum + .cx__note{ margin-top:12px }

/* ---------------- Reytinglar: kassalar va kassirlar (.item qatori ustiga) ---------------- */
.rk__count{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.item--rk .item__name{ display:flex; align-items:center; gap:9px; min-width:0; overflow:visible; font-weight:500 }
.item--rk .item__name > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* birinchi o'rin -- sahifadagi yagona amber urg'u bilan */
.item--rk:first-child .item__rank{ color:var(--accent-ink); background:radial-gradient(120% 120% at 20% 0%, var(--accent-hi) 0%, #cf7f1e 100%) }
.rk__sub{ display:flex; align-items:flex-start; gap:12px }
.rk__meta{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:1px 10px }
.rk__sub .pct{ flex:none; font-variant-numeric:tabular-nums; white-space:nowrap }
.rk__br{ display:inline-flex; align-items:center; gap:6px; color:var(--text) }
/* ---------------- Bekor qilingan cheklar: kassir qatori = <details>, ichida eng yirik cheklari ---------------- */
#cancelStats{ margin:0 0 14px }
.cx{ border-top:1px solid var(--hair) }
.cx:first-child{ border-top:0 }
.cx > summary{ list-style:none; cursor:pointer; border-top:0; padding:12px 0; border-radius:10px; transition:opacity .3s var(--ease) }
.cx > summary::-webkit-details-marker{ display:none }
.cx > summary:active{ opacity:.6 }
.cx:first-child > summary{ padding-top:2px }
/* bu "top" emas, nazorat ro'yxati -- o'rin raqamlari urg'usiz */
.cx > .item--cx .item__rank{ color:var(--muted); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair) }
.item--rk .item__name > .tag{ flex:none; overflow:visible }
.item.item--plain .item__rank, .item.item--plain:first-child .item__rank{ color:var(--muted); background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair) }
.cx__chev{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--faint); transform:rotate(90deg); transition:transform .5s var(--ease), color .3s var(--ease) }
.cx[open] .cx__chev{ transform:rotate(-90deg); color:var(--text) }
.cx__list{
  margin:0 0 14px; padding:3px 13px; font-size:12.5px; border-radius:13px;
  background:var(--sunken); box-shadow:inset 0 0 0 1px var(--hair);
}
.cx[open] .cx__list{ animation:rise .5s var(--ease) both }
.cx__row{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 0;
  border:0; border-top:1px solid var(--hair); background:none; color:var(--muted); font:inherit; text-align:left; cursor:pointer;
  transition:opacity .3s var(--ease);
}
.cx__row:first-child{ border-top:0 }
.cx__row:active{ opacity:.55 }
.cx__row > span{ flex:1; min-width:0 }
.cx__row b{ font-weight:600; color:var(--text); white-space:nowrap }
.cx__go{ width:13px; height:13px; flex:none; margin-right:-2px; color:var(--faint); transition:transform .4s var(--ease), color .3s var(--ease) }
@media (hover:hover){ .cx__row:hover .cx__go{ transform:translateX(3px); color:var(--text) } .cx__row:hover{ color:var(--text) } }
.cx__rest{ padding:7px 0 8px; border-top:1px solid var(--hair); color:var(--faint); font-size:12px }
.cx__note{ margin-top:14px; font-size:12.5px; line-height:1.45; color:var(--muted); text-wrap:pretty }
@media (hover:hover){ .cx > summary:hover .cx__chev{ color:var(--text) } }

.rk__note{
  margin-top:14px; padding:10px 13px; font-size:12.5px; line-height:1.45; text-wrap:pretty;
  color:var(--warn-ink); background:var(--warn-bg); border-radius:12px; box-shadow:inset 0 0 0 1px var(--warn-line);
}

.foot{ font-size:12.5px; text-align:center; padding:8px 16px 0; line-height:1.5; text-wrap:balance }

/* ---------------- Skelet (faqat birinchi yuklashda) ---------------- */
.sk{ position:relative; display:block; overflow:hidden; border-radius:8px; background:var(--track); color:transparent !important }
.sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--sheen), transparent);
  animation:sweep 1.5s var(--ease) infinite;
}
.sk--line{ height:12px; width:60% }
.sk--val{ height:24px; width:75%; margin:4px 0 9px }
.sk--chart{ height:214px; border-radius:var(--r-sm) }
.sk--row{ height:44px; margin:6px 0 }
.boot #heroValue{ display:inline-block; vertical-align:top; width:6.2ch; height:1.05em; border-radius:12px; background:var(--track); color:transparent }
.boot .hero__value small{ visibility:hidden }

/* ---------------- Chiqish varag'i ---------------- */
.sheet{
  width:100%; max-width:460px; margin:auto auto 0; padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  border:0; border-radius:32px 32px 0 0; color:var(--text);
  background:var(--bg); box-shadow:0 0 0 1px var(--hair), 0 -20px 60px -20px rgba(0,0,0,.35);
}
.sheet[open]{ animation:sheet-in .6s var(--ease) both }
.sheet::backdrop{ background:rgba(10,12,15,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade-in .5s var(--ease) both }
@keyframes sheet-in{ from{ transform:translateY(100%) } }
@keyframes fade-in{ from{ opacity:0 } }
.sheet__in{
  display:flex; flex-direction:column; gap:8px; padding:10px 18px 14px;
  background:var(--surface); border-radius:26px 26px 22px 22px; box-shadow:var(--shadow-core);
}
.sheet__grab{ align-self:center; width:38px; height:4px; margin-bottom:12px; border-radius:2px; background:var(--hair-firm) }
.sheet h2{ font-size:20px; font-weight:600; letter-spacing:-.03em }
.sheet p{ font-size:14px; margin-bottom:12px }

/* ---------------- Chek tarkibi varag'i ---------------- */
.sheet--rc{ max-width:520px }
.sheet--rc .sheet__in{ gap:0; max-height:calc(100dvh - 40px - env(safe-area-inset-bottom)) }
.rc__head{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.rc__head h2{ margin-top:4px }
.sheet .rc__head p{ font-size:13px; line-height:1.55; margin-bottom:12px }
.rc__lines{ flex:1 1 auto; min-height:96px; overflow-y:auto; overscroll-behavior:contain; margin:0 -6px; padding:0 6px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair) }
.rc__lines:focus-visible{ outline-offset:-2px }
.rc__line{
  display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:1px 10px; padding:10px 0; border-top:1px solid var(--hair);
  animation:rise .5s var(--ease) backwards; animation-delay:calc(var(--r, 0) * 35ms + 60ms);
}
.rc__line:first-child{ border-top:0 }
.rc__no{ padding-top:2px; font-size:12px; color:var(--faint) }
.rc__name{ font-size:14px; line-height:1.35 }
.rc__amt{ font-weight:600; white-space:nowrap; text-align:right }
.rc__sub{ grid-column:2 / 4; display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; font-size:12.5px; color:var(--muted) }
.rc__line.is-storno .rc__name, .rc__line.is-storno .rc__amt{ color:var(--faint); text-decoration:line-through }
.rc__total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:13px 0 14px; font-size:12.5px; color:var(--muted) }
.rc__sum{ color:var(--text); font-size:14px; white-space:nowrap }
.rc__sum b{ font-size:19px; font-weight:600; letter-spacing:-.02em }
.rc__sum small{ color:var(--muted) }

/* ---------------- Kengroq ekranlar ---------------- */
@media (min-width:640px){
  .kpis{ grid-template-columns:repeat(4, 1fr) }
  .finsum{ grid-template-columns:repeat(3, 1fr) }
  .finsum .stat--net{ grid-column:auto }
  .finsum .stat__value{ font-size:26px }
  .cx__list{ margin-left:37px }
  .wrap{ gap:14px; padding:18px 10px 96px }
  .tabbar{ width:fit-content }
  .tab{ flex-direction:row; gap:9px; min-width:0; min-height:46px; padding:8px 18px 8px 14px; font-size:13.5px }
  .tab__ico{ width:20px; height:20px }
  .card__body{ padding:20px }
  .hero__body{ padding:26px 24px 22px }
  .sheet{ margin:auto; border-radius:32px; padding:6px }
  .sheet__in{ border-radius:26px }
  .sheet__grab{ display:none }
  .sheet[open]{ animation:rise .5s var(--ease) both }
}
/* Kompyuter: assimetrik bento -- 5/7, 8/4, 6/6, 4/8 */
@media (min-width:1024px){
  /* Sahifa ekran eniga yoyiladi (katta monitorda o'rtada tor ustun bo'lib qolmaydi): chet bo'shlig'i en bilan o'sadi,
     juda keng ekranda 1880px da to'xtaydi. Sarlavha, filtr paneli va kartalar bir xil chetga tekislanadi. */
  :root{ --page:1880px; --gut:clamp(12px, 2.2vw, 44px) }
  .top__in{ max-width:var(--page); padding:22px calc(var(--gut) + 10px) 12px }
  .island{
    width:calc(100% - var(--gut) * 2); max-width:calc(var(--page) - var(--gut) * 2);
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:6px;
  }
  .island .seg{ flex:0 1 auto }
  .island .seg__in{ min-width:0 }
  .island .chips{ margin:0 0 0 auto }
  .island .range{ order:3; flex:1 0 100%; max-width:420px; margin:0 0 2px }
  .wrap{
    max-width:var(--page); display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
    gap:16px; align-items:start; padding:22px var(--gut) 100px;
  }
  .banner, .foot, .ticker, .tabnote{ grid-column:1 / -1 }
  .hero{ grid-column:span 5; align-self:stretch }
  .kpis{ grid-column:span 7; align-self:stretch; grid-template-columns:1fr 1fr; grid-auto-rows:1fr }
  .tile{ padding:18px 20px; justify-content:space-between }
  .tile__value{ font-size:28px }
  .card--chart, .card--items{ grid-column:span 8 }
  .card--wide{ grid-column:1 / -1 }
  /* kontragentlar ro'yxati keng ekranda ustunlarga bo'linadi (qatorlar tugma -- grid: tartib chapdan o'ngga) */
  #partnerList, #itemList2, #debtList{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:36px }
  #partnerList > .empty, #partnerList > .sk, #itemList2 > .empty, #itemList2 > .sk,
  #debtList > .empty, #debtList > .sk{ grid-column:1 / -1 }
  #partnerList .prow:nth-child(2), #itemList2 .prow:nth-child(2), #debtList .prow:nth-child(2){ border-top:0; padding-top:2px }
  .aging{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0 20px }
  .aging__row{ padding-top:0 }
  .search{ max-width:560px }
  .card--half{ grid-column:span 6; align-self:stretch; display:flex; flex-direction:column }
  .card--half .card__body{ flex:1 }
  .card--side{ grid-column:span 4; align-self:stretch; display:flex; flex-direction:column }
  .card--side .card__body{ flex:1; display:flex; flex-direction:column }
  .card--side .row, .card--side button.row{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center }
  /* bitta filial (Filiallar kartasi yo'q): grafik yonida to'lov turlari turadi, keyin reytinglar, tovarlar to'liq enga */
  .solo > .banner, .solo > .hero, .solo > .kpis, .solo > .ticker, .solo > .card--chart[data-t=dash]{ order:-2 }
  .solo > #payCard{ order:-1 }
  .solo .card--items{ grid-column:1 / -1 }
  .hero__value{ font-size:60px }
  #itemList{ columns:2; column-gap:36px }
  #itemList .item{ break-inside:avoid; border-top:1px solid var(--hair); padding-top:12px }
}
/* Katta monitor: setka o'sha-o'sha, lekin oraliqlar, raqamlar va ro'yxat ustunlari en bilan birga kattalashadi */
@media (min-width:1500px){
  .wrap{ gap:20px }
  .card__body{ padding:24px }
  .hero__body{ padding:32px 30px 26px }
  .hero__value{ font-size:76px }
  .finsum .stat{ padding:20px 22px }
  .finsum .stat__value{ font-size:34px }
  .tile{ padding:22px 24px }
  .tile__value{ font-size:34px }
  .card__head h2{ font-size:14.5px }
  .row__top, .item__name, .item__amt{ font-size:15.5px }
  .solo #itemList{ columns:3 }
  #cancelList{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  #cancelList .cx:nth-child(3){ border-top:0 }
  #cancelList .cx:nth-child(3) > summary{ padding-top:2px }
  #partnerList, #itemList2{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  #partnerList .prow:nth-child(3), #itemList2 .prow:nth-child(3){ border-top:0; padding-top:2px }
}


/* ============================================================
   HARAKAT — "epic-design" skili texnikalari, CSP uchun toza CSS/JS ga ko'chirilgan (GSAP yo'q).
   Qoidalar: faqat transform / opacity / clip-path (+ translate/rotate/scale xossalari -- transform bilan to'qnashmaydi);
   kirish animatsiyalari `backwards` -- tugagach elementga tegmaydi; cheksizlari faqat kompozitorda.
   ============================================================ */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* ---- Chuqurlik qatlamlari: 1 = nur dog'lari (sekin suzadi), 2 = nuqtali to'r. Skroll/sichqonga turli tezlikda ---- */
.amb{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.amb__l, .amb__m{ position:absolute; inset:0 }
.amb__m{ transition:transform 1.4s var(--ease) }
.blob{ position:absolute; border-radius:50%; will-change:transform }
.blob--a{ width:78vmax; height:78vmax; left:-30vmax; top:-36vmax; background:radial-gradient(circle, var(--glow), transparent 64%); animation:float-orbit 24s var(--sine) infinite }
.blob--b{ width:48vmax; height:48vmax; right:-20vmax; top:6vh; background:radial-gradient(circle, var(--accent-soft), transparent 64%); animation:float-breathe 17s var(--sine) -6s infinite }
.blob--c{ width:64vmax; height:64vmax; left:-16vmax; bottom:-34vmax; background:radial-gradient(circle, var(--glow2), transparent 62%); animation:float-y 28s var(--sine) -11s infinite }
.dots{
  position:absolute; inset:-30vh 0; opacity:.9;
  background:radial-gradient(circle, var(--dot) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image:radial-gradient(90% 60% at 50% 35%, #000 10%, transparent 75%); mask-image:radial-gradient(90% 60% at 50% 35%, #000 10%, transparent 75%);
}
@keyframes float-y{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5vh) } }
@keyframes float-breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.14) translateY(3vh) } }
@keyframes float-orbit{ 0%,100%{ transform:translate(0,0) } 25%{ transform:translate(4vw,-2vh) } 50%{ transform:translate(1vw,4vh) scale(1.06) } 75%{ transform:translate(-3vw,1vh) } }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.18); opacity:1 } }

/* skrollga bog'langan harakat brauzerning o'zida (asosiy oqimdan tashqarida); qo'llamasa app.js dagi zaxira ishlaydi */
.prog{
  position:fixed; left:0; right:0; top:0; height:2px; z-index:var(--z-prog); pointer-events:none;
  background:linear-gradient(90deg, var(--accent-hi), var(--accent)); transform-origin:0 50%; transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .amb__l1{ animation:par1 linear both; animation-timeline:scroll(root) }
  .amb__l2{ animation:par2 linear both; animation-timeline:scroll(root) }
  .prog{ animation:prog linear both; animation-timeline:scroll(root) }
  .top__in{ animation:top-away linear both; animation-timeline:scroll(root); animation-range:0px 170px }
  @keyframes par1{ to{ transform:translateY(-12vh) } }
  @keyframes par2{ to{ transform:translateY(-30vh) } }
  @keyframes prog{ to{ transform:scaleX(1) } }
  @keyframes top-away{ to{ opacity:0; transform:translateY(-14px) scale(.96) } }
}

/* ---- Ochilish pardasi (loading-screen curtain lift) ---- */
.splash{
  position:fixed; inset:0; z-index:var(--z-splash); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(60% 40% at 50% 38%, var(--glow), transparent 70%), url(/noise.png) 0 0 / 64px 64px, var(--bg);
  animation:lift 1s 6s var(--ease) forwards;               /* JS ishlamay qolsa ham o'zi ko'tariladi */
}
.splash.lift{ animation:lift 1s var(--ease) forwards }
@keyframes lift{ from{ clip-path:inset(0 0 0 0) } to{ clip-path:inset(0 0 100% 0) } }
.splash__mark{ animation:drop 1s var(--back) backwards, float-y 5s var(--sine) 1s infinite }
.splash__name{ font-size:20px; font-weight:600; letter-spacing:-.03em; animation:rise .8s .25s var(--ease) backwards }
.splash__bar{ width:120px; height:3px; margin-top:6px; border-radius:2px; overflow:hidden; background:var(--track); animation:rise .8s .4s var(--ease) backwards }
.splash__bar i{ display:block; width:45%; height:100%; border-radius:2px; background:var(--accent); animation:ind 1.2s var(--sine) infinite }
@keyframes ind{ from{ transform:translateX(-110%) } to{ transform:translateX(330%) } }
.splash.lift > *{ animation:out-up .55s var(--ease) forwards }
@keyframes out-up{ to{ opacity:0; transform:translateY(-36px) scale(.92) } }
@keyframes drop{ from{ opacity:0; transform:translateY(-46px) scale(.55) rotate(-14deg) } }

/* ---- Logotip ustunlari: o'sib chiqadi, "jonli" paytda ekvalayzerdek nafas oladi ---- */
.eq{ transform-box:fill-box; transform-origin:50% 100% }
.go .eq, .splash .eq{ animation:eq-in .8s var(--back) backwards }
.go .eq2, .splash .eq2{ animation-delay:.1s } .go .eq3, .splash .eq3{ animation-delay:.2s }
.go .eqbase{ transform-box:fill-box; transform-origin:0 50%; animation:drawx .7s var(--ease) backwards }
.is-live .brand .eq, .login .eq, .splash .eq{ animation:eq-in .8s var(--back) backwards, eq 2.8s var(--sine) .9s infinite }
.is-live .brand .eq2, .login .eq2, .splash .eq2{ animation-delay:.1s, 1.5s } .is-live .brand .eq3, .login .eq3, .splash .eq3{ animation-delay:.2s, 2.1s }
@keyframes eq-in{ from{ transform:scaleY(0) } }
@keyframes eq{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.5) } }
@keyframes drawx{ from{ transform:scaleX(0) } }

/* ---- Sarlavha harflari niqob ortidan ko'tariladi (split + masked reveal) ---- */
.split__w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em }
.split .ch{ display:inline-block }
.go .split .ch{ animation:ch-up .9s var(--ease) backwards; animation-delay:calc(var(--i, 0) * 32ms + .15s) }
@keyframes ch-up{ from{ opacity:0; transform:translateY(105%) rotate(9deg) } }
.mask{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.16em; margin-bottom:-.16em }
.mask__in{ display:inline-block }
.rv.in .mask__in{ animation:mask-up .95s var(--ease) .3s backwards }
@keyframes mask-up{ from{ transform:translateY(115%) } }

/* ---- Sahifa kirishi: sarlavha, tugmalar, filtr paneli ---- */
body:not(.go) #app > *, body:not(.go) .login > *{ opacity:0 }
.go .top .brand__mark{ animation:drop 1s var(--back) backwards }
.go .status{ animation:rise .8s .5s var(--ease) backwards }
.go .iconbtn{ animation:pop .7s .35s var(--back) backwards }
.go .iconbtn + .iconbtn{ animation-delay:.45s }
.go .island{ animation:island-drop 1s .1s var(--ease) backwards }
.go .seg button, .go .chip{ animation:rise .7s var(--ease) backwards; animation-delay:calc(var(--i, 0) * 45ms + .35s) }
@keyframes island-drop{ from{ opacity:0; transform:translateY(-130%) scale(.94) } }
@keyframes pop{ from{ opacity:0; scale:.4 } }
.island{ transition:box-shadow .6s var(--ease) }
.island.stuck{ box-shadow:0 0 0 1px var(--hair-firm), inset 0 1px 0 var(--hi), 0 24px 48px -20px rgba(21,26,36,.55) }

/* ---- Bo'limlar "tug'ilishi": har karta o'z yo'nalishidan clip-path bilan ochiladi ---- */
.rv{ opacity:0 }
.rv.in{ opacity:1; animation:birth-up 1s var(--ease) backwards }
.rv.in[data-birth=top]{ animation-name:birth-top }
.rv.in[data-birth=iris]{ animation-name:birth-iris; animation-duration:1.15s }
.rv.in[data-birth=left]{ animation-name:birth-left }
.rv.in[data-birth=right]{ animation-name:birth-right }
@keyframes birth-up{ from{ opacity:0; translate:0 24px } }
@keyframes birth-top{ from{ opacity:0; translate:0 -16px; clip-path:inset(0 0 100% 0 round 26px) } 25%{ opacity:1 } to{ clip-path:inset(-40px -40px -70px -40px round 26px) } }
@keyframes birth-iris{ from{ opacity:0; scale:.95; clip-path:inset(46% 46% 46% 46% round 26px) } 25%{ opacity:1 } to{ clip-path:inset(-40px -40px -70px -40px round 26px) } }
@keyframes birth-left{ from{ opacity:0; translate:-30px 0; clip-path:inset(0 100% 0 0 round 26px) } 25%{ opacity:1 } to{ clip-path:inset(-40px -40px -70px -40px round 26px) } }
@keyframes birth-right{ from{ opacity:0; translate:30px 0; clip-path:inset(0 0 0 100% round 26px) } 25%{ opacity:1 } to{ clip-path:inset(-40px -40px -70px -40px round 26px) } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } }

/* ---- Ichki elementlar ekranga kirganda: turli yo'nalishdan, navbat bilan (JS data-rv + .in beradi) ---- */
[data-rv]{ opacity:0 }
[data-rv=left]{ translate:-34px 0; rotate:-2deg }
[data-rv=right]{ translate:34px 0; rotate:2deg }
[data-rv=up]{ translate:0 20px }
[data-rv].in{
  opacity:1; translate:none; rotate:none;
  transition:opacity .7s var(--ease), translate .9s var(--ease), rotate .9s var(--ease);
}
[data-rv]:not(.in) .share i{ animation-play-state:paused }
.item.in .item__rank{ animation:pop .7s .15s var(--back) backwards }
.dot{ animation:pop .6s .2s var(--back) backwards }

/* KPI ikonkasi chizilib chiqadi; qiymatlar JS da sanab boradi */
.tile__ico path{ stroke-dasharray:1 }
.tile.in .tile__ico path{ animation:draw 1.2s .3s var(--ease) backwards }
@keyframes draw{ from{ stroke-dashoffset:1 } }

/* ---- Hero: raqamlar g'ildiragi (odometr), yaltirash, o'zgarish belgisi, jonli "+" belgisi ---- */
.odo{ display:inline-flex; align-items:flex-start }
.odo__c{ display:inline-block; height:1.05em; overflow:hidden; margin-right:-.045em }
.odo__s{ display:block; transition:transform 1.5s var(--ease); will-change:transform }
.odo__s > span{ display:block; height:1.05em }
.odo__t{ display:inline-block; white-space:pre }
@keyframes sheen{ to{ transform:translateX(400%) skewX(-14deg) } }
.delta b{ animation:pop .7s .4s var(--back) backwards }
.delta b.up svg{ animation:nudge-up 1.5s 1.1s var(--sine) 2 }
.delta b.down svg{ animation:nudge-down 1.5s 1.1s var(--sine) 2 }
@keyframes nudge-up{ 50%{ transform:translateY(-3px) } }
@keyframes nudge-down{ 50%{ transform:translateY(3px) } }
.bump{
  margin-left:auto; padding:3px 9px; border-radius:9px; pointer-events:none;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--good); background:var(--good-soft);
  animation:bump 2.8s var(--ease) forwards;
}
@keyframes bump{ 0%{ opacity:0; translate:0 14px; scale:.7 } 14%{ opacity:1; translate:0 0; scale:1 } 78%{ opacity:1; translate:0 0 } 100%{ opacity:0; translate:0 -20px } }

/* ---- Tiker: ko'p sotilganlar lentasi ---- */
.ticker{
  overflow:hidden; padding:4px 0; border-radius:999px; background:var(--shell); box-shadow:0 0 0 1px var(--hair);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__in{ display:flex; width:max-content; animation:marquee 40s linear infinite; will-change:transform }
.ticker:hover .ticker__in, .ticker:active .ticker__in{ animation-play-state:paused }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.tick{ display:inline-flex; align-items:center; gap:8px; padding:5px 18px 5px 5px; white-space:nowrap; font-size:12.5px; color:var(--muted) }
.tick b{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:600; color:var(--muted); background:var(--surface); box-shadow:0 0 0 1px var(--hair) }
.tick span{ max-width:24ch; overflow:hidden; text-overflow:ellipsis }
.tick strong{ font-weight:600; color:var(--text); font-variant-numeric:tabular-nums }

/* ---- Grafik: to'r chiziladi, yozuvlar navbat bilan, joriy ustun "nafas oladi", podskazka sakrab chiqadi ---- */
.chart .grid, .chart .axis{ transform-box:fill-box; transform-origin:0 50%; animation:drawx 1.1s var(--ease) backwards }
.chart svg > text{ animation:fade-in .8s .35s var(--ease) backwards }
.chart .col > text:not(.lbl){ animation:fade-in .7s var(--ease) backwards; animation-delay:calc(var(--i, 0) * 16ms + .45s) }
.chart .col.now .stack{ animation:grow .9s var(--ease) both, now-pulse 2.6s var(--sine) 1.4s infinite; animation-delay:calc(var(--i, 0) * 16ms), 1.4s }
@keyframes now-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@keyframes lbl-drop{ from{ opacity:0; transform:translateY(-12px) } }
@keyframes tip-pop{ from{ opacity:0; scale:.86 } }
.legend span{ animation:rise .7s var(--ease) backwards }
.legend span:nth-child(2){ animation-delay:.08s } .legend span:nth-child(3){ animation-delay:.16s } .legend span:nth-child(n+4){ animation-delay:.24s }
.tablewrap tbody tr, .tablewrap tfoot tr{ animation:rise .55s var(--ease) backwards; animation-delay:calc(var(--r, 0) * 22ms + .1s) }
.banner{ animation:island-drop .8s var(--ease) backwards }

/* ---- Kirish sahifasi: jonli "grafik siluet", bosqichma-bosqich kirish, tugmada yaltirash, yuklanish halqasi ---- */
.login__sky{
  position:absolute; left:0; right:0; bottom:0; height:40vh; padding:0 4vw; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(5px, 1.6vw, 14px); opacity:.075;
  -webkit-mask-image:linear-gradient(0deg, #000 25%, transparent); mask-image:linear-gradient(0deg, #000 25%, transparent);
}
.login__sky i{
  flex:1 1 0; max-width:48px; height:calc(var(--h) * 1%); border-radius:9px 9px 0 0; background:var(--ink);
  transform-origin:50% 100%; animation:sky 5.5s var(--sine) infinite; animation-delay:calc(var(--d) * -1s);
}
@keyframes sky{ 0%,100%{ transform:scaleY(.5) } 50%{ transform:scaleY(1) } }
.go .login__bezel{ animation:rise 1s var(--ease) backwards }
.go .login__card > *{ animation:rise .8s var(--ease) backwards }
.go .login__card > :nth-child(1){ animation:drop 1s .15s var(--back) backwards }
.go .login__card > :nth-child(2){ animation-delay:.3s } .go .login__card > :nth-child(3){ animation-delay:.36s }
.go .login__card > :nth-child(4){ animation-delay:.46s } .go .login__card > :nth-child(5){ animation-delay:.54s }
.go .login__card > :nth-child(6){ animation-delay:.62s } .go .login__card > :nth-child(n+7){ animation-delay:.72s }
.go .login__card > .login__err{ animation:rise .5s var(--ease) backwards }
.go .login__foot{ animation:rise .9s .85s var(--ease) backwards }
.btn--primary::before{
  content:''; position:absolute; top:-10%; bottom:-10%; left:0; width:30%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-160%) skewX(-16deg); animation:cta-sheen 4.4s var(--ease) 1.8s infinite;
}
@keyframes cta-sheen{ 0%{ transform:translateX(-160%) skewX(-16deg) } 38%,100%{ transform:translateX(520%) skewX(-16deg) } }
.btn.loading .btn__ico svg{ opacity:0 }
.btn.loading .btn__ico::after{
  content:''; position:absolute; inset:10px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite;
}

/* ---- Bosish to'lqini, "tepaga" tugmasi ---- */
.ripple{ position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:0 }
.fab{
  position:fixed; right:16px; bottom:calc(var(--tabbar-b) + 74px); z-index:var(--z-fab);      /* tabbar ustida */
  width:48px; height:48px; display:grid; place-items:center; overflow:hidden;
  border:0; border-radius:50%; cursor:pointer; color:var(--text);
  background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-float);
  opacity:0; translate:0 90px; pointer-events:none;
  transition:translate .7s var(--back), opacity .4s var(--ease), scale .4s var(--ease);
}
.fab svg{ width:20px; height:20px }
.fab.show{ opacity:1; translate:none; pointer-events:auto }
.fab:active{ scale:.92 }

/* ---- Sichqonli qurilmalar: karta chetida kursorga ergashuvchi nur, 3D og'ish ---- */
@media (hover:hover) and (pointer:fine){
  .card, .kpis{ position:relative }
  .card::before, .kpis::before{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
    background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 70%);
    transition:opacity .5s var(--ease);
  }
  .card:hover::before, .kpis:hover::before{ opacity:1 }
  .card__head, .card__body, .tile{ position:relative; z-index:1 }
  .tilt{ transition:transform .7s var(--ease); transform-style:preserve-3d }
  .tilt.tilting{ transition:transform .2s var(--ease) }
  .tile{ transition:translate .5s var(--ease), box-shadow .5s var(--ease) }
  .tile:hover{ translate:0 -3px; box-shadow:var(--shadow-core), 0 22px 36px -24px rgba(21,26,36,.45) }
  .iconbtn:hover svg{ transform:rotate(-30deg); transition:transform .6s var(--back) }
  .iconbtn svg{ transition:transform .6s var(--ease) }
}
@keyframes fade-in{ from{ opacity:0 } }

/* ---- Harakatni kamaytirish: hamma narsa darhol o'z joyida, cheksizlar to'xtaydi ---- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important }
  .rv, [data-rv], body:not(.go) #app > *, body:not(.go) .login > *{ opacity:1; translate:none; rotate:none }
  .amb__l, .prog, .top__in, .ticker__in, .blob{ animation:none !important }
  .ticker{ overflow-x:auto }
  .splash{ display:none }
  html{ scroll-behavior:auto }
}
/* fon yangilanishida (har 60 s) hech narsa qayta "o'ynamaydi" -- faqat raqamlar aylanadi va joriy ustun nafas oladi */
.quiet .share i, .quiet .chart .stack, .quiet .chart text, .quiet .chart .grid, .quiet .chart .axis,
.quiet .delta b, .quiet .delta svg, .quiet .legend span, .quiet .dot{ animation:none }
.quiet .chart .col.now .stack{ animation:now-pulse 2.6s var(--sine) infinite }