/* AvtoPay dizayn tizimi — tokenlar panel bilan bir xil. */
:root{
  --c-bg:#f6f7f9; --c-surface:#fff; --c-border:#e7eaef; --c-border-strong:#d4d9e1;
  --c-text:#1a1d23; --c-text-muted:#6b7280; --c-text-soft:#9aa1ab;
  --c-accent:#1a1d23;
  --c-gold:#f2b21c; --c-gold-deep:#d99b0a; --c-navy:#111a35;
  --shadow-panel:0 1px 2px 0 rgb(0 0 0/.04), 0 1px 3px 0 rgb(0 0 0/.06);
  --shadow-soft:0 4px 12px -2px rgb(0 0 0/.08), 0 2px 4px -2px rgb(0 0 0/.04);
  --t-fast:150ms cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}

/**
 * `hidden` atributi HAR DOIM ishlasin. Brauzerning o'z qoidasi ikki holatda
 * kuchsiz qoladi va element yashirilmay ochiq turib qoladi:
 *   1) elementga sinf orqali `display` berilgan bo'lsa (u UA qoidasini bosadi);
 *   2) element SVG ichida bo'lsa — UA jadvali faqat HTML nom fazosiga tegadi.
 * Ikkalasi ham grafikda uchradi (kutish yozuvi va kursor chizig'i).
 */
[hidden]{display:none !important}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font:400 14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.center{min-height:100vh; display:grid; place-items:center; padding:24px}

.card{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:16px; padding:28px 30px; box-shadow:var(--shadow-panel);
  max-width:520px; width:100%;
}
.card h1{margin:14px 0 8px; font-size:21px; letter-spacing:-.02em}
.card p{margin:0 0 18px; color:var(--c-text-muted); line-height:1.6}

.badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border-radius:999px; background:#eefaf2; color:#047857; border:1px solid #bfe6cd;
  font-size:12px; font-weight:600;
}
.badge::before{content:''; width:7px; height:7px; border-radius:50%; background:#059669}
.badge.err{background:#fff5f6; color:#be123c; border-color:#fecdd3}
.badge.err::before{background:#e11d48}

.row{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 20px; border-radius:11px; border:0; cursor:pointer;
  background:var(--c-accent); color:#fff; font:600 14px/1 inherit;
  text-decoration:none; transition:filter var(--t-fast), transform 80ms;
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--c-text); box-shadow:inset 0 0 0 1px var(--c-border-strong)}
.btn.ghost:hover{background:#f1f3f6; filter:none}

/* Toast — yuqori markazda */
.toasts{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:10px;
  width:max-content; max-width:min(92vw,520px);
}
.toast{
  padding:13px 16px; border-radius:14px; background:#fff; border:1px solid var(--c-border);
  box-shadow:var(--shadow-soft); font-weight:500; transition:opacity .25s;
}
.toast.ok{border-left:4px solid #059669}
.toast.err{border-left:4px solid #e11d48}

@media (prefers-reduced-motion:reduce){ .btn,.toast{transition:none} }

/* ═══════════ KABINET QOBIG'I ═══════════
   Yandex Fleet uslubi (yandex.avtopay.uz paneli bilan bir xil xatti-harakat):
   60px oq tasma → kursor tekkanda 264px gacha ochiladi, ortidagi kontent
   xiralashadi. Yig'ilgan holatda tugmalarda tooltip chiqadi.
   ≤1023px — tasma o'rniga chetdan chiqadigan 280px panel. */
body.app{background:var(--c-bg)}
.shell{display:flex; min-height:100vh}

/* Kontentni xiralashtiruvchi qatlam — faqat menyu ochilganda */
.sb-dim{
  position:fixed; inset:0 0 0 60px; z-index:275;
  background:rgba(15,17,21,.42); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s, visibility .26s;
}
.shell:has(.sb:hover) .sb-dim{opacity:1; visibility:visible}

.sb{
  position:fixed; left:0; top:0; bottom:0; width:60px; z-index:280;
  background:#fff; border-right:1px solid var(--c-border);
  display:none; flex-direction:column; padding:14px 8px 16px; overflow:hidden;
  box-shadow:inset -1px 0 0 rgba(15,23,42,.04), 1px 0 12px rgba(15,23,42,.04);
  transition:width .26s cubic-bezier(.4,0,.2,1), box-shadow .26s, border-radius .26s;
}
/**
 * Yon tasma qachondan ko'rinadi.
 *
 * Chegara ilgari 1024px edi va bu noutbukda tasmani BUTUNLAY yo'qotardi:
 * brauzer masshtabi 125-150% bo'lsa (odatiy hol) 1366px ekran CSS'da
 * 911-1093px ga tushadi va menyu burger ortiga yashirinadi — foydalanuvchi
 * chap tomonda hech qanday tugma ko'rmaydi.
 *
 * Yig'ilgan tasma bor-yo'g'i 60px joy oladi, shuning uchun uni imkon
 * qadar uzoq saqlash arzonroq.
 */
@media (min-width:860px){
  .sb{display:flex}
  /* Mobil panel keng ekranda BUTUNLAY yo'q — aks holda u tasmaning ustiga
     tushib, yorliqlarni ochiq holatda ko'rsatib yuboradi. */
  .sb--mob{display:none !important}
}
.sb:hover{
  width:264px; border-radius:0 18px 18px 0;
  box-shadow:8px 0 28px -8px rgba(15,23,42,.30);
}

/* ─── Logo: yig'ilganda kvadrat belgi, ochilganda keng logo ─── */
.sb-brand{position:relative; width:36px; height:36px; margin:0 auto 16px; display:block;
  border-radius:10px; overflow:hidden; flex:none;
  transition:width .26s cubic-bezier(.4,0,.2,1), height .26s, margin .26s}
.sb:hover .sb-brand{width:230px; height:44px; margin:0 0 16px}
.sb-brand img{position:absolute; left:0; top:0; height:36px; display:block;
  border-radius:10px; transition:opacity .22s ease-out, height .26s cubic-bezier(.4,0,.2,1)}
.sb-brand .mark{width:36px; object-fit:cover; opacity:1}
.sb-brand .full{width:230px; object-fit:cover; object-position:center; opacity:0}
.sb:hover .sb-brand .mark{opacity:0}
.sb:hover .sb-brand .full{opacity:1; height:44px}

/* ─── Bo'lim yorlig'i (faqat ochiq holatda ko'rinadi) ─── */
.sb-sec{height:16px; margin:12px 0 4px; padding:0 12px; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-soft);
  white-space:nowrap; opacity:0; transition:opacity .2s}
.sb:hover .sb-sec, .sb--mob .sb-sec{opacity:1}

/**
 * `min-height:0` SHART.
 *
 * Ustunli flex konteynerda bandning standart `min-height:auto` qiymati uni
 * tarkibidan kichrayishga qo'ymaydi. Natijada past ekranda `.sb-nav` yon
 * tasmadan oshib ketadi, `.sb{overflow:hidden}` esa oshgan qismni KESADI —
 * tugmalar yo'qolgandek ko'rinadi va aylantirib ham topib bo'lmaydi.
 * `min-height:0` bilan band to'g'ri kichrayadi va o'z ichida aylanadi.
 */
.sb-nav{flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column;
  gap:2px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.sb-brand{flex:none}

/* Yig'ilgan holatda bo'lim yorlig'i ko'rinmaydi — joyni ham egallamasin.
   Past ekranda bu 32px bo'shatadi, ya'ni tugmalar sig'ish ehtimoli ortadi. */
.sb:not(:hover):not(.sb--mob) .sb-sec{height:0; margin:0; overflow:hidden}
.sb-bottom{width:100%; display:flex; flex-direction:column; gap:2px;
  padding-top:8px; margin-top:8px; border-top:1px solid var(--c-border)}

.sb-btn{
  position:relative; height:40px; border-radius:10px; padding:0; gap:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-muted); text-decoration:none; white-space:nowrap;
  font-size:13.5px; font-weight:500; -webkit-tap-highlight-color:transparent;
  transition:background .14s, color .14s, padding .26s, gap .26s, justify-content .26s;
}
.sb:hover .sb-btn, .sb--mob .sb-btn{justify-content:flex-start; padding:0 12px; gap:12px}
.sb-btn:hover{background:#f3f4f6; color:var(--c-navy)}
/* Faol band. Chapdagi tayoqcha SHART: yig'ilgan tasmada tepadagi oltin logo
   ham, yonib turgan band ham bir xil o'lchamdagi yumaloq kvadrat bo'lib
   qoladi va ular bir-biriga qo'shilib ketadi — tugma yo'qolgandek ko'rinadi. */
.sb-btn.on{background:#fff6e0; color:var(--c-navy); font-weight:600}
.sb-btn.on .ic{color:var(--c-gold-deep)}
.sb-btn.on::before{
  content:''; position:absolute; left:-8px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--c-gold-deep);
}
.sb-btn--danger:hover{background:#fff5f6; color:#be123c}
.sb-btn .ic{width:22px; height:22px; flex:none; display:grid; place-items:center}
.sb-btn .ic svg{width:21px; height:21px; display:block}
.sb-btn .lb{flex:1; opacity:0; max-width:0; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; transition:opacity .2s, max-width .26s}
.sb:hover .sb-btn .lb, .sb--mob .sb-btn .lb{opacity:1; max-width:180px; pointer-events:auto}

/* Tooltip — faqat yig'ilgan holatda */
.sb-btn[data-tip]::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  padding:6px 10px; border-radius:7px; background:var(--c-navy); color:#fff;
  font-size:12px; font-weight:500; white-space:nowrap; z-index:50;
  opacity:0; pointer-events:none; box-shadow:var(--shadow-soft);
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.sb:not(:hover) .sb-btn[data-tip]:hover::after{opacity:1; transform:translateY(-50%)}
.sb--mob .sb-btn[data-tip]::after{display:none}

/* ─── Tor ekran: chetdan chiqadigan panel ─── */
.sb-veil{display:none}
.burger{display:none}
@media (max-width:859.98px){
  .sb--mob{display:flex; position:fixed; left:0; top:0; bottom:0; width:min(280px,85vw);
    z-index:300; transform:translateX(-100%); border-radius:0;
    transition:transform .24s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-soft)}
  body.sb-on .sb--mob{transform:none}
  .sb--mob .sb-brand{width:210px; height:42px; margin:0 0 16px}
  .sb--mob .sb-brand .mark{opacity:0}
  .sb--mob .sb-brand .full{opacity:1; height:42px}
  .sb-veil{display:block; position:fixed; inset:0; z-index:290; background:rgba(15,23,42,.5);
    backdrop-filter:blur(3px)}
  .sb-veil[hidden]{display:none}
  .burger{display:grid; place-items:center; width:38px; height:38px; flex:none;
    border:0; border-radius:10px; background:transparent; cursor:pointer;
    color:var(--c-text-muted); transition:background var(--t-fast)}
  .burger:hover{background:#eef0f4}
  .burger svg{width:20px; height:20px}
}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
@media (min-width:860px){ .main{margin-left:60px} }

/* ─── Yuqori panel: SHAFFOF (oq tasma emas) ─── */
.topbar{
  position:sticky; top:0; z-index:20; height:64px; flex:none;
  display:flex; align-items:center; gap:10px; background:transparent;
  padding:0 clamp(14px, 2vw, 28px);
}
.tb-l{flex:1; min-width:0}
.topbar .tt{margin:0; font-size:16px; font-weight:600; line-height:1.2;
  letter-spacing:-.015em; color:var(--c-navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .st{display:none; margin-top:1px; font-size:11.5px; color:var(--c-text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (min-width:640px){ .topbar .st{display:block} }

/* Balans tabletkasi */
.tb-bal{display:none; align-items:center; gap:7px; height:36px; padding:0 13px;
  border-radius:999px; background:#fff; border:1px solid var(--c-border);
  color:var(--c-navy); font-size:13px; font-weight:600; text-decoration:none;
  transition:border-color var(--t-fast)}
.tb-bal:hover{border-color:var(--c-border-strong)}
.tb-bal svg{width:15px; height:15px; color:var(--c-text-soft)}
.tb-bal .v{font-variant-numeric:tabular-nums}
.tb-bal .c{font-size:11px; font-weight:500; color:var(--c-text-soft)}
@media (min-width:520px){ .tb-bal{display:flex} }

/* Profil tugmasi + ochiladigan menyu */
.tb-u{position:relative}
.tb-u-btn{display:flex; align-items:center; gap:9px; padding:4px 8px 4px 4px;
  border:0; border-radius:12px; background:transparent; cursor:pointer; font:inherit;
  color:inherit; transition:background var(--t-fast)}
.tb-u-btn:hover{background:#eef0f4}
.tb-u-btn .av{width:34px; height:34px; flex:none; border-radius:50%; display:grid;
  place-items:center; background:linear-gradient(160deg,#fde68a,var(--c-gold));
  color:var(--c-navy); font-size:13px; font-weight:700}
.tb-u-btn .nm{display:none; max-width:150px; font-size:13px; font-weight:600;
  color:var(--c-navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (min-width:640px){ .tb-u-btn .nm{display:block} }
.tb-u-btn .cv{width:14px; height:14px; color:var(--c-text-soft); transition:transform .15s}
.tb-u.open .tb-u-btn .cv{transform:rotate(180deg)}

.tb-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:262px; z-index:60;
  background:#fff; border:1px solid var(--c-border); border-radius:14px; padding:8px;
  box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s}
.tb-u.open .tb-menu{opacity:1; visibility:visible; transform:none}
.tb-menu .hdr{display:flex; align-items:center; gap:11px; padding:9px 10px 12px;
  border-bottom:1px solid var(--c-border); margin-bottom:6px}
.tb-menu .hdr .av{width:40px; height:40px; flex:none; border-radius:50%; display:grid;
  place-items:center; background:linear-gradient(160deg,#fde68a,var(--c-gold));
  color:var(--c-navy); font-size:15px; font-weight:700}
.tb-menu .hdr .i{min-width:0; flex:1}
.tb-menu .hdr .i b{display:block; font-size:13.5px; font-weight:600; color:var(--c-navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tb-menu .hdr .i span{display:block; font-size:12px; color:var(--c-text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tb-menu a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  font-size:13.5px; color:var(--c-text-muted); text-decoration:none;
  transition:background var(--t-fast), color var(--t-fast)}
.tb-menu a:hover{background:#f4f6f9; color:var(--c-navy)}
.tb-menu a.danger:hover{background:#fff5f6; color:#be123c}
.tb-menu a svg{width:17px; height:17px; flex:none}

/* Kontent ustun bo'lib cho'ziladi — shuning uchun bo'sh holat kartochkasi
   yuqoriga qisilib qolmasdan, qolgan BUTUN balandlikni egallaydi. */
.content{flex:1; display:flex; flex-direction:column;
  width:100%; max-width:1440px; margin:0 auto;
  padding:8px clamp(14px, 2vw, 28px) 28px}

/* ═══════════ Sahifa elementlari ═══════════ */
.head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:20px; flex-wrap:wrap}
.head h2{margin:0; font-size:20px; letter-spacing:-.025em; color:var(--c-navy)}
.sub{margin:5px 0 0; color:var(--c-text-muted); font-size:13.5px}
.back{display:inline-flex; align-items:center; gap:5px; margin-bottom:14px;
  color:var(--c-text-muted); text-decoration:none; font-size:13px}
.back:hover{color:var(--c-navy)}
.back svg{width:15px; height:15px}

.list{display:flex; flex-direction:column; gap:10px}
.row{
  display:flex; align-items:center; gap:14px; padding:15px 17px;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px;
  text-decoration:none; color:inherit;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform 80ms;
}
.row:hover{border-color:var(--c-border-strong); box-shadow:var(--shadow-soft)}
.row:active{transform:translateY(1px)}
.row .l{flex:1; min-width:0}
/* span bo'lsa ham alohida qatorda tursin */
.row .nm{display:block; font-weight:600; font-size:14.5px; color:var(--c-navy)}
.row .meta{display:block; font-size:12px; color:var(--c-text-soft); margin-top:3px}
.row .chev{color:var(--c-text-soft); display:grid; place-items:center}
.row .chev svg{width:17px; height:17px}
/* Kassa turi belgisi */
.row .kd{width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:#f4f6f9; color:var(--c-navy)}
.row .kd svg{width:19px; height:19px}
.row .amt{flex:none; font-size:14.5px; font-weight:600; color:var(--c-navy);
  font-variant-numeric:tabular-nums; white-space:nowrap}

.pill{padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap}
.pill.ok{background:#eefaf2; color:#047857}
.pill.warn{background:#fff7ed; color:#9a3412}
.pill.err{background:#fff5f6; color:#be123c}
.pill.muted{background:#f1f3f6; color:var(--c-text-muted)}

/* Bo'sh holat: mavjud bo'shliqni to'liq egallaydi va mazmuni MARKAZDA turadi.
   Ilgari u yuqorida kichkina kartochka bo'lib qolib, ostida katta bo'sh
   kulrang maydon qolardi. */
.empty{
  flex:1; min-height:min(420px, 60vh);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:18px;
  padding:52px 26px; text-align:center;
}
.empty .ic{width:56px; height:56px; margin:0 auto; border-radius:17px; display:grid; place-items:center;
  background:#fff6e0; color:var(--c-gold-deep)}
.empty .ic svg{width:26px; height:26px}
.empty h3{margin:16px 0 7px; font-size:17px; letter-spacing:-.02em; color:var(--c-navy)}
.empty p{margin:0 auto 20px; max-width:42ch; color:var(--c-text-muted); font-size:13.5px; line-height:1.6}

/* ═══════════ Ko'rsatkich kartochkalari ═══════════ */
.stats{display:grid; gap:14px; margin-bottom:22px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr))}
.stat{background:var(--c-surface); border:1px solid var(--c-border); border-radius:16px;
  padding:17px 19px; box-shadow:var(--shadow-panel)}
.stat .k{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--c-text-muted)}
.stat .k svg{width:15px; height:15px; color:var(--c-text-soft)}
.stat .v{display:block; margin-top:9px; font-size:25px; font-weight:600; letter-spacing:-.035em;
  color:var(--c-navy); font-variant-numeric:tabular-nums; white-space:nowrap}
.stat .v small{font-size:13px; font-weight:500; color:var(--c-text-soft); letter-spacing:0}
.stat .n{display:block; margin-top:5px; font-size:11.5px; color:var(--c-text-soft)}

/* ══════════════════════════════════════════════════════════════════════
   BOSH SAHIFA — jonli panel
   ══════════════════════════════════════════════════════════════════════
   Sahifadagi yagona to'q maydon. O'zgarib turadigan raqamlar shu yerda,
   statik ma'lumot pastda. Rang chegarasi buni izohsiz tushuntiradi.
   Barcha animatsiyalar `prefers-reduced-motion` da o'chadi (fayl oxirida). */

.dash > * + *{margin-top:0}

.live{
  position:relative; overflow:hidden;
  border-radius:20px; padding:22px 26px 26px;
  background:
    radial-gradient(120% 140% at 88% 0%, #1c2a53 0%, transparent 55%),
    linear-gradient(160deg, #16203f 0%, #0e1529 100%);
  box-shadow:0 18px 40px -22px rgb(17 26 53/.55), inset 0 1px 0 rgb(255 255 255/.06);
}
/* Yangi to'lov kelganda panel bir marta yorishadi */
.live::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(70% 120% at 24% 40%, rgb(242 178 28/.20) 0%, transparent 62%);
}
.live.hit::after{animation:live-hit 1400ms cubic-bezier(.22,.61,.36,1)}
@keyframes live-hit{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

.live-top{display:flex; align-items:center; justify-content:space-between; gap:14px}
.live-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#9fb0d8;
}
.live-tag .dot{
  position:relative; width:7px; height:7px; border-radius:50%;
  background:#4ade80; box-shadow:0 0 0 0 rgb(74 222 128/.65);
  animation:live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgb(74 222 128/.55)}
  70%{box-shadow:0 0 0 9px rgb(74 222 128/0)}
  100%{box-shadow:0 0 0 0 rgb(74 222 128/0)}
}
.live-clock{
  font-size:12px; color:#7f8db4; font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

.live-body{
  display:grid; gap:26px; margin-top:22px;
  grid-template-columns:minmax(240px,auto) minmax(0,1fr); align-items:end;
}
.live-sum .lb{display:block; font-size:12.5px; color:#8d9cc4}
.live-sum .amt{display:flex; align-items:baseline; gap:10px; margin-top:10px}
/* Pul — sahifaning sarlavhasi. Shuning uchun eng katta va eng zich terilgan;
   tabular-nums raqam o'zgarganda kenglik sakramasligi uchun. */
.live-sum .n{
  font-size:clamp(34px, 6vw, 52px); font-weight:650; line-height:.95;
  letter-spacing:-.045em; color:#fff; font-variant-numeric:tabular-nums;
}
.live-sum .cur{font-size:15px; font-weight:500; color:#8d9cc4}
.live-sum .sub{display:block; margin-top:12px; font-size:12.5px; color:#7f8db4}
.live-sum .sub b{color:#c3cee8; font-weight:600}

/* ─── Kelib tushish tasmasi ───
   Har chiziq = bitta to'lov. Yig'indi grafigi kunni bitta songa siqadi,
   bu esa hodisalarni o'z vaqtida ko'rsatadi. */
.strip{min-width:0}
.strip-plot{
  position:relative; height:96px; border-radius:12px;
  background:linear-gradient(180deg, rgb(255 255 255/.035) 0%, rgb(255 255 255/.015) 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.06);
  overflow:hidden;
}
.strip-plot .tk{
  position:absolute; bottom:0; width:3px; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--c-gold) 0%, rgb(217 155 10/.35) 100%);
  transform:translateX(-50%); transform-origin:bottom;
}
.strip-plot .tk-new{animation:tk-in 620ms cubic-bezier(.22,.61,.36,1)}
@keyframes tk-in{
  0%{transform:translateX(-50%) scaleY(0); opacity:0}
  60%{opacity:1}
  100%{transform:translateX(-50%) scaleY(1); opacity:1}
}
/* Bo'sh holat: kutish — bo'shliq emas. Sekin o'tuvchi nur "tinglayapmiz"
   degan ma'noni beradi. */
.strip-empty{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden}
.strip-empty .scan{
  position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg, transparent 0%, rgb(242 178 28/.10) 50%, transparent 100%);
  animation:scan 3.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}
.strip-empty .txt{position:relative; font-size:12.5px; color:#6f7da3; letter-spacing:.01em}

.strip-axis{
  display:flex; justify-content:space-between; margin-top:9px;
  font-size:11px; color:#68759a; letter-spacing:.02em;
}

/* ══════════ Ko'rsatkichlar — quti emas, hairline ══════════
   Beshta kartochka beshta soya bergandan ko'ra, bitta panel ichida
   chiziq bilan bo'lingani tinchroq va jonli paneldan diqqatni olmaydi. */
.tiles{
  display:grid; margin-top:20px;
  grid-template-columns:repeat(auto-fit, minmax(168px,1fr));
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:16px; box-shadow:var(--shadow-panel); overflow:hidden;
}
.tile{padding:16px 18px; box-shadow:inset 1px 0 0 var(--c-border)}
.tile:first-child{box-shadow:none}
.tile .k{display:block; font-size:12px; color:var(--c-text-muted)}
.tile .v{
  display:block; margin-top:8px; font-size:22px; font-weight:620; letter-spacing:-.035em;
  color:var(--c-navy); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tile .v small{font-size:13px; font-weight:500; color:var(--c-text-soft); letter-spacing:0}
.tile .n{display:block; margin-top:4px; font-size:11.5px; color:var(--c-text-soft)}

/* ══════════ Tushum analitikasi ══════════ */
.panel{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-panel);
}
.panel.flush{padding:0; overflow:hidden}
.panel.quiet{color:var(--c-text-muted); font-size:13.5px; line-height:1.6}

/* Davr tanlash — segment boshqaruvi */
.rangebar{display:inline-flex; padding:3px; gap:2px; border-radius:11px;
  background:#eceef2; box-shadow:inset 0 0 0 1px rgb(0 0 0/.02)}
.rangebar .rb{
  padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:500;
  color:var(--c-text-muted); text-decoration:none; white-space:nowrap;
  transition:color var(--t-fast), background var(--t-fast);
}
.rangebar .rb:hover{color:var(--c-navy)}
.rangebar .rb.on{background:var(--c-surface); color:var(--c-navy); font-weight:600;
  box-shadow:var(--shadow-panel)}
.rangebar .rb:focus-visible{outline:2px solid var(--c-gold-deep); outline-offset:1px}

/* Sarlavha: davr yig'indisi + oldingi davrga nisbatan farq */
.chart-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px}
.chart-sum{display:flex; align-items:baseline; gap:9px}
.chart-sum .n{font-size:26px; font-weight:640; letter-spacing:-.04em; color:var(--c-navy);
  font-variant-numeric:tabular-nums}
.chart-sum .cur{font-size:13px; color:var(--c-text-soft)}
.delta{padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.delta.up{background:#eefaf2; color:#047857}
.delta.down{background:#fff5f6; color:#be123c}
.delta.flat{background:#f1f3f6; color:var(--c-text-muted)}
.chart-cmp{font-size:12px; color:var(--c-text-soft)}

/* O'q + maydon. Y yorliqlari chap chekkada — grafikning bo'sh yonini
   to'ldiradi va "qancha" degan savolga chiziqqa tegmasdan javob beradi. */
.chart-body{display:flex; gap:12px}
.chart-y{display:flex; flex-direction:column; justify-content:space-between;
  width:56px; flex:none; height:190px; padding:14px 0 16px; text-align:right;
  font-size:11px; color:var(--c-text-soft); font-variant-numeric:tabular-nums}
.chart-plot{position:relative; flex:1; min-width:0; touch-action:pan-y}

.chart-svg{display:block; width:100%; height:190px; overflow:visible}
.chart-svg .gl{stroke:var(--c-border); stroke-width:1; vector-effect:non-scaling-stroke}
.chart-line{
  fill:none; stroke:var(--c-gold-deep); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.chart-fill{fill:url(#cgFill); stroke:none}
.chart-svg .dt{fill:var(--c-surface); stroke:var(--c-border-strong);
  stroke-width:2; vector-effect:non-scaling-stroke}
.chart-svg .dt.on{stroke:var(--c-gold-deep)}
.chart-cur{stroke:var(--c-navy); stroke-width:1; stroke-dasharray:3 3;
  opacity:.35; vector-effect:non-scaling-stroke}

/* Kursor yozuvi */
.chart-tip{
  position:absolute; top:-4px; transform:translateX(-50%);
  padding:7px 11px; border-radius:10px; pointer-events:none; white-space:nowrap;
  background:var(--c-navy); color:#fff; box-shadow:var(--shadow-soft); z-index:2;
}
.chart-tip.flip{transform:translateX(-100%)}
.chart-tip b{display:block; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.chart-tip span{display:block; margin-top:2px; font-size:11px; color:#9fb0d8}

/* X yorliqlari nuqtalar ustida turadi — grid emas, foizli o'rin:
   davr almashganda soni o'zgaradi. */
.chart-x{position:relative; height:16px; margin-top:8px; margin-left:68px;
  font-size:11.5px; color:var(--c-text-soft)}
.chart-x span{position:absolute; transform:translateX(-50%); white-space:nowrap}
.chart-x .on{color:var(--c-navy); font-weight:600}
.chart-note{margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--c-text-soft)}

/* ══════════ Ikki ustun: kassalar | oxirgi to'lovlar ══════════
   Ikkalasi bir ekranda o'qiladi. `align-items:start` — ustunlar bir-birining
   balandligiga cho'zilmaydi, har biri o'z tarkibicha turadi. */
/* 440px — jadval 4 ta ustuni qisilmasdan sig'adigan eng kichik kenglik.
   Bundan tor bo'lsa ustunlar ustma-ust tushadi va jadval to'liq kenglikni
   oladi (yonma-yon turib kesilib qolgandan ko'ra shunisi o'qiladi). */
.duo{
  display:grid; gap:22px; margin-top:26px; align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(440px, 1fr));
}
.duo-col{min-width:0}
.duo .sec{margin-top:0}          /* ustun boshidagi qo'sh bo'shliq olib tashlanadi */

/* `table-layout:fixed` SHART: avtomatik joylashtirishda katakning `max-width`
   qiymati e'tiborga olinmaydi, shuning uchun uzun kassa nomi jadvalni
   ustundan kengaytirib yuborardi. Fixed'da ustun ulushi hurmat qilinadi va
   ortiqcha matn "…" bilan kesiladi. */
.duo .tbl{min-width:0; width:100%; table-layout:fixed; font-size:13px}
.duo .tbl th, .duo .tbl td{padding-left:12px; padding-right:12px}
.duo .tbl th:nth-child(1), .duo .tbl td:nth-child(1){width:30%}
.duo .tbl th:nth-child(2), .duo .tbl td:nth-child(2){
  width:26%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.duo .tbl th:nth-child(3), .duo .tbl td:nth-child(3){width:25%}
.duo .tbl th:nth-child(4), .duo .tbl td:nth-child(4){width:19%}

/* Kassa yo'q — taklif, bo'sh ekran emas */
.invite{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.invite-t b{display:block; font-size:15px; color:var(--c-navy); letter-spacing:-.015em}
.invite-t span{display:block; margin-top:5px; max-width:56ch; font-size:13px;
  color:var(--c-text-muted); line-height:1.6}

/* Yangi kelgan qator bir marta yorishadi */
.tr-new{animation:tr-in 1600ms ease-out}
@keyframes tr-in{0%{background:#fff6e0}100%{background:transparent}}

/* Sahifa ochilishi — bloklar ketma-ket ko'tariladi */
.dash > .live{animation:rise 620ms cubic-bezier(.22,.61,.36,1) both}
.dash > .tiles{animation:rise 620ms cubic-bezier(.22,.61,.36,1) 90ms both}
.dash > .sec, .dash > .panel{animation:rise 620ms cubic-bezier(.22,.61,.36,1) 170ms both}
.dash > .duo{animation:rise 620ms cubic-bezier(.22,.61,.36,1) 240ms both}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

@media (max-width:720px){
  .live{padding:18px 18px 22px; border-radius:16px}
  .live-body{grid-template-columns:1fr; gap:20px}
  .strip-plot{height:74px}
  .tile{box-shadow:inset 0 1px 0 var(--c-border)}
  .tile:first-child{box-shadow:none}
  /* Tor ekranda Y o'qi joyni yeydi — grafikning o'zi muhimroq */
  .chart-y{display:none}
  .chart-x{margin-left:0}
  .rangebar .rb{padding:6px 9px; font-size:12px}
  .sec{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  .live-tag .dot, .strip-empty .scan, .live.hit::after,
  .strip-plot .tk-new, .tr-new,
  .dash > .live, .dash > .tiles, .dash > .sec, .dash > .panel, .dash > .duo{
    animation:none !important;
  }
  .chart-line{transition:none !important; stroke-dasharray:none !important; stroke-dashoffset:0 !important}
}

/* Bo'lim sarlavhasi */
.sec{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:26px 0 12px}
.sec h3{margin:0; font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--c-navy)}
.sec a{font-size:13px; color:var(--c-gold-deep); text-decoration:none}
.sec a:hover{text-decoration:underline}

/* Kabinetda kartochka kengligi sahifa bilan belgilanadi */
body.app .card{max-width:none; padding:22px 24px}
.card.wide{max-width:none}
.card.auth{max-width:400px; text-align:center}
.card.auth .brand{display:flex; align-items:center; justify-content:center; gap:9px; font-weight:700; margin-bottom:14px}
.card.auth .brand .mark{width:30px; height:30px; border-radius:9px; background:var(--c-accent); color:#fff; display:grid; place-items:center}
.btn.wide{width:100%; gap:9px}
.hint{margin-top:12px; font-size:12px; color:var(--c-text-soft)}

.form{display:flex; flex-direction:column; gap:17px; margin-top:20px}
.fld{display:flex; flex-direction:column; gap:7px}
.fld > span{font-size:12.5px; font-weight:600; color:var(--c-navy)}
.fld em{font-style:normal; color:var(--c-text-soft); font-weight:400}
.fld input, .fld select, .fld textarea{
  border:1px solid var(--c-border-strong); border-radius:11px; padding:11px 13px;
  font:inherit; font-size:14px; color:var(--c-text); background:#fff; outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.fld textarea{resize:vertical; min-height:88px}
.fld input::placeholder, .fld textarea::placeholder{color:#b9c0ca}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  border-color:var(--c-gold); box-shadow:0 0 0 3px rgb(242 178 28/.16);
}
.fld small{color:var(--c-text-soft); font-size:11.5px; line-height:1.5}
.acts{display:flex; gap:10px; margin-top:6px; flex-wrap:wrap}

/* Tanlov kartochkalari (radio) — "select" o'rniga ko'rinadigan variantlar */
.picks{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
.pick{position:relative; display:block; cursor:pointer}
.pick input{position:absolute; opacity:0; pointer-events:none}
.pick .bx{display:block; height:100%; padding:13px 15px; border:1px solid var(--c-border-strong);
  border-radius:13px; background:#fff; transition:border-color var(--t-fast), background var(--t-fast)}
.pick .bx b{display:block; font-size:13.5px; font-weight:600; color:var(--c-navy)}
.pick .bx span{display:block; margin-top:3px; font-size:11.5px; color:var(--c-text-soft); line-height:1.45}
.pick:hover .bx{border-color:var(--c-gold)}
.pick input:checked + .bx{border-color:var(--c-gold); background:#fffbf0; box-shadow:0 0 0 3px rgb(242 178 28/.14)}
.pick input:focus-visible + .bx{outline:2px solid var(--c-gold-deep); outline-offset:2px}

/* ═══════════ Jadval (tranzaksiyalar) ═══════════ */
.tbl-wrap{overflow-x:auto; border:1px solid var(--c-border); border-radius:16px; background:#fff}
.tbl{width:100%; border-collapse:collapse; min-width:640px}
.tbl th{padding:12px 16px; text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--c-text-soft); background:#fafbfc;
  border-bottom:1px solid var(--c-border); white-space:nowrap}
.tbl td{padding:13px 16px; border-bottom:1px solid #f1f3f6; font-size:13.5px; vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fafbfc}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--c-navy); white-space:nowrap}
.tbl .dim{color:var(--c-text-soft); font-size:12.5px; white-space:nowrap}
.tbl code{font-family:ui-monospace,'SF Mono',monospace; font-size:12px;
  background:#f4f6f9; padding:3px 7px; border-radius:6px; color:var(--c-text-muted)}

.props{display:grid; gap:0}
.props .p{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid #f1f3f6}
.props .p:last-child{border-bottom:0}
.props .p > span{color:var(--c-text-muted); font-size:13px}
.props code{font-family:ui-monospace,'SF Mono',monospace; background:#f1f3f6; padding:3px 8px; border-radius:6px}

.note{background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:12px 14px;
  border-radius:11px; font-size:13px; margin-top:14px}
.note.err{background:#fff5f6; border-color:#fecdd3; color:#be123c}
.soon{margin-top:14px; opacity:.75}
.soon h3{margin:0 0 6px; font-size:14px}
.soon p{margin:0; color:var(--c-text-muted); font-size:13px}

/* ===== Checkout ===== */
.amount{font-size:32px; font-weight:700; letter-spacing:-.03em; margin:6px 0 2px; font-variant-numeric:tabular-nums}
.amount span{font-size:16px; font-weight:600; color:var(--c-text-muted)}
.to{font-size:14px; color:var(--c-text-muted)}
.desc{margin-top:8px; font-size:13px; color:var(--c-text-soft)}
.methods{display:flex; flex-direction:column; gap:9px; margin:20px 0 10px}
.method{
  height:46px; border-radius:11px; border:1px solid var(--c-border); background:#fff;
  font:600 14px/1 inherit; color:var(--c-text); cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.method:hover{border-color:var(--c-accent); background:#fafbfc}
.note.ok-note{background:#eefaf2; border:1px solid #bfe6cd; color:#047857; margin-top:18px}
.oid{margin-top:16px; font-size:11.5px; color:var(--c-text-soft)}
.oid code{font-family:ui-monospace,'SF Mono',monospace}



/* ================= Kirish / parol sahifalari ================= */
body.auth{display:block; min-height:100vh; padding:0; background:#fff}
/* Ustun kengliklari ≥980px uchun quyidagi "YAKUNIY joylashuv" blokida. */
.pm{display:grid; grid-template-columns:1fr; min-height:100vh}
.pm--solo{grid-template-columns:1fr !important}
.pm--solo .pm-left{max-width:520px; margin:0 auto}

/* ---------- Chap ustun ---------- */
.pm-left{display:flex; flex-direction:column; padding:34px 40px 26px; background:#fff}
@media (max-width:600px){ .pm-left{padding:24px 20px} }

.pm-logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; align-self:flex-start}
.pm-logo img{border-radius:11px; display:block}
.pm-logo .wm{display:flex; flex-direction:column; line-height:1.06}
.pm-logo .wm b{font-size:21px; font-weight:800; letter-spacing:-.025em; color:var(--c-navy)}
.pm-logo .wm i{font-size:16.5px; font-style:normal; font-weight:500; color:var(--c-text-muted)}

.pm-form{max-width:376px; width:100%; margin:auto 0; padding:22px 0 4px}
/* Tor ekranda o'ng panel yo'q — forma chetda osilib qolmasin, markazda tursin */
@media (max-width:979px){ .pm-form{margin:auto} }

.pm-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px}
.pm-head h1{margin:0; font-size:25px; font-weight:600; letter-spacing:-.025em; color:var(--c-navy)}

/* Til */
.pm-lang{position:relative}
.pm-lang .cur{display:inline-flex; align-items:center; gap:6px; border:0; background:transparent;
  font:inherit; font-size:14px; color:var(--c-gold-deep); cursor:pointer; padding:4px 2px}
.pm-lang .cur svg{width:15px; height:15px; transition:transform var(--t-fast)}
.pm-lang.open .cur svg{transform:rotate(180deg)}
.pm-lang .menu{position:absolute; right:0; top:calc(100% + 6px); min-width:152px; z-index:20;
  background:#fff; border:1px solid var(--c-border); border-radius:11px; padding:5px;
  box-shadow:var(--shadow-soft); display:none}
.pm-lang.open .menu{display:block}
.pm-lang .menu button{display:block; width:100%; text-align:left; border:0; background:transparent;
  font:inherit; font-size:13.5px; padding:8px 10px; border-radius:7px; cursor:pointer; color:var(--c-text)}
.pm-lang .menu button:hover{background:#f4f6f9}
.pm-lang .menu button.on{font-weight:600}

.pm-lead{margin:0 0 22px; font-size:13.5px; color:var(--c-text-muted); line-height:1.62}

/* ---------- Maydonlar ---------- */
.pm-fields{display:flex; flex-direction:column; gap:18px}
body.auth .fld{display:block}
body.auth .fld .lb{display:block; font-size:12.5px; color:var(--c-text-muted); margin-bottom:6px}
body.auth .fld .lb b{color:var(--c-gold-deep); font-weight:600}
body.auth .fld .in{display:flex; align-items:center; gap:2px; border-bottom:1.5px solid var(--c-border-strong);
  padding:7px 2px; transition:border-color var(--t-fast), background var(--t-fast); border-radius:6px 6px 0 0}
body.auth .fld .in:focus-within{border-bottom-color:var(--c-gold); background:#fffbf0}
body.auth .fld .pre{font-size:15.5px; color:var(--c-text-muted); padding-right:8px; flex:none}
body.auth .fld input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
  font-size:15.5px; color:var(--c-text); letter-spacing:.01em; padding:2px 0}
body.auth .fld input::placeholder{color:#b9c0ca}
body.auth .fld .eye{flex:none; border:0; background:transparent; padding:2px 4px; cursor:pointer;
  color:var(--c-text-soft); display:grid; place-items:center}
body.auth .fld .eye svg{width:19px; height:19px}
body.auth .fld .eye.on{color:var(--c-gold-deep)}

.pm-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:6px}
.pm-row .lnk{font-size:13.5px; color:var(--c-gold-deep); text-decoration:none}
.pm-row .lnk:hover{text-decoration:underline}

.pm-btn{border:0; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600;
  height:46px; padding:0 30px; border-radius:11px; background:var(--c-navy); color:#fff;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  transition:filter var(--t-fast), transform 80ms}
.pm-btn:hover{filter:brightness(1.35)}
.pm-btn:active{transform:translateY(1px)}
.pm-btn--block{width:100%}

/* "yoki" ajratgich */
.pm-or{display:flex; align-items:center; gap:14px; margin:26px 0 18px; color:var(--c-text-soft); font-size:12.5px}
.pm-or::before,.pm-or::after{content:""; flex:1; height:1px; background:var(--c-border)}

.pm-alt{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:46px;
  border:1.5px solid var(--c-border-strong); border-radius:11px; text-decoration:none;
  font-size:14px; font-weight:600; color:var(--c-navy); background:#fff;
  transition:border-color var(--t-fast), background var(--t-fast)}
.pm-alt:hover{border-color:var(--c-gold); background:#fffbf0}
.pm-alt img{border-radius:6px; display:block}

.pm-links{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:24px;
  font-size:13.5px; color:var(--c-text-muted)}
.pm-links a{color:var(--c-gold-deep); text-decoration:none; font-weight:500}
.pm-links a:hover{text-decoration:underline}

/* Yordam — chap PAST burchakda, formadan mustaqil.
   Ataylab JIM: to'ldirilgan oltin nishon yuqoridagi logo bilan bellashib,
   ikkita bir xil "medal" taassurotini berardi. Endi yupqa konturli tugma —
   oltin rang faqat kursor tekkanda paydo bo'ladi. */
.pm-help{display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  margin-top:30px; height:40px; padding:0 17px 0 13px; border:1px solid var(--c-border);
  border-radius:999px; background:#fff; cursor:pointer; font:inherit; font-size:13.5px;
  font-weight:500; color:var(--c-text-muted); -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(17,26,53,.04);
  transition:border-color var(--t-fast), color var(--t-fast),
             background var(--t-fast), transform 80ms}
.pm-help:hover{border-color:var(--c-gold); background:#fffbf0; color:var(--c-navy)}
.pm-help:active{transform:translateY(1px)}
.pm-help .ic{width:20px; height:20px; flex:none; display:grid; place-items:center;
  color:var(--c-text-soft); transition:color var(--t-fast)}
.pm-help:hover .ic{color:var(--c-gold-deep)}
.pm-help .ic svg{width:19px; height:19px}
.pm-help:focus-visible{outline:2px solid var(--c-gold-deep); outline-offset:3px}

/* ---------- O'ng ustun: mahsulot ko'rinishi ----------
   Payme uslubidagi joylashuv: YUQORIDA rasm o'rni (panel mokapi), uning
   pastki chap burchagi oq egri chiziq bilan kesiladi, kesim OSTIDA slayd
   matni va nuqtalar turadi. O'lchovlar `--pm-inset` / `--pm-gutter` dan
   oziqlanadi — ustiga yangi qatlam qo'shmang, SHU BLOKNI tahrirlang. */
.pm-right{display:none; position:relative; overflow:hidden; background:#fff}
@media (min-width:980px){ .pm-right{display:block} }

/* --- Rasm o'rni: yuqoridan va o'ngdan ekran chetiga tegib turadi --- */
.pm-visual{position:absolute; inset:0 0 38% 0; overflow:hidden;
  background:
    radial-gradient(120% 88% at 88% 0%, rgba(250,201,60,.52), transparent 62%),
    radial-gradient(84% 70% at 2% 100%, rgba(17,26,53,.16), transparent 66%),
    linear-gradient(152deg,#f7f8fb 0%,#e8eaf1 100%)}

/* Pastki chegara: KESIM YO'Q. Rasmning pastki qismi oq fonga asta-sekin
   singib ketadi — chegara chizig'i umuman ko'rinmaydi.
   `height` = singish balandligi. */
/* MUHIM: gradient pastki chegaraga YETMASDAN oldin to'liq oq bo'lishi kerak
   (`#fff 80%`), aks holda oxirgi piksellarda mazmun yarim ko'rinib qoladi va
   "kesilgan" chiziq paydo bo'ladi. */
.pm-visual::after{content:''; position:absolute; left:0; right:0; bottom:0; height:50%;
  pointer-events:none; background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 26%,
    rgba(255,255,255,.72) 52%, rgba(255,255,255,.96) 70%,
    #fff 80%, #fff 100%)}
.pm-cut{display:none}

/* --- Panel mokapi (brauzer oynasi) ---
   Oyna butun rasm o'rnini to'ldiradi — ekran chetlariga tegib turadi.
   Egri kesim uning pastki chap burchagidagi RANGLI lentadan o'tadi,
   shuning uchun chiziq aniq ko'rinadi. */
.mk{position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(92% 58% at 100% 0%, rgba(250,201,60,.16), transparent 62%), #fff}
.mk-bar{display:flex; align-items:center; gap:12px; height:38px; flex:none;
  padding:0 14px; border-bottom:1px solid #f0f2f6; background:#fafbfc}
.mk-dots{display:flex; gap:6px}
.mk-dots i{width:8px; height:8px; border-radius:50%; background:#dfe3ea}
.mk-url{font-family:ui-monospace,'SF Mono',monospace; font-size:11px; color:var(--c-text-soft);
  background:#fff; border:1px solid #eef0f4; border-radius:999px; padding:3px 12px}

.mk-body{display:flex; height:calc(100% - 38px)}
.mk-side{width:52px; flex:none; border-right:1px solid #f0f2f6; padding:14px 0;
  display:flex; flex-direction:column; align-items:center; gap:10px}
.mk-logo{width:28px; height:28px; border-radius:9px; background:var(--c-navy); color:var(--c-gold);
  display:grid; place-items:center; font-size:13px; font-weight:800; margin-bottom:6px}
.mk-side i{width:22px; height:7px; border-radius:3px; background:#eceef3}
.mk-side i.on{background:var(--c-gold)}

/* Chap padding shunday: mokap ichidagi matn pastdagi slayd matni bilan
   bitta vertikal chiziqda tursin (yon panel 52px + qolgani). */
.mk-main{flex:1; min-width:0; display:flex; flex-direction:column;
  padding:26px var(--pm-gutter) 0 max(18px, calc(var(--pm-inset) - 52px))}
.mk-main .pc-bars{flex:none; height:78px; margin-top:20px}

/* Pastki lenta — to'liq kenglikda; oxirgi qatorlar oq fonga singib ketadi. */
.mk-feed{flex:1; min-height:0;
  margin:22px calc(-1 * var(--pm-gutter)) 0 max(-18px, calc(52px - var(--pm-inset)));
  padding:14px var(--pm-gutter) 0 max(18px, calc(var(--pm-inset) - 52px));
  background:#f6f7fa; border-top:1px solid #eef0f4}
.mk-fr{display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid #edeff4}
.mk-fr:last-child{border-bottom:0}
.mk-fr .t{flex:none; font-family:ui-monospace,'SF Mono',monospace; font-size:11.5px; color:var(--c-text-soft)}
.mk-fr .m{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; color:var(--c-text-muted)}
.mk-fr .s{flex:none; font-size:13px; font-weight:600; color:#199a50; font-variant-numeric:tabular-nums}
/* Tor ekranda qator siqiladi — vaqt ustuni olib tashlanadi */
@media (max-width:1199px){ .mk-fr .t{display:none} }
.mk-head{display:flex; align-items:center; gap:12px}
.mk-tt{flex:1; min-width:0}
.mk-tt b{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.012em; color:var(--c-navy)}
.mk-tt span{display:block; font-size:11.5px; color:var(--c-text-soft); margin-top:3px}
.mk-sum{display:block; margin-top:10px; font-size:29px; font-weight:600; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:var(--c-navy); white-space:nowrap}
.mk-sum i{font-style:normal; font-size:14px; font-weight:500; color:var(--c-text-soft)}

.mk-tiles{display:flex; gap:10px; margin-top:16px}
.mk-tile{flex:1; min-width:0; background:#f7f8fa; border:1px solid #eef0f4; border-radius:11px; padding:10px 12px}
.mk-tile span{display:block; font-size:10.5px; color:var(--c-text-soft); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.mk-tile b{display:block; margin-top:3px; font-size:15px; font-weight:600; color:var(--c-navy);
  font-variant-numeric:tabular-nums}

/* --- Mokap ustida suzuvchi "to'lov keldi" kartochkasi --- */
.pc{background:#fff; border:1px solid #eceef3; border-radius:16px; padding:16px 18px;
  box-shadow:0 24px 46px -24px rgba(17,26,53,.40), 0 2px 6px rgba(17,26,53,.05)}
.pc--in{position:absolute; z-index:2; width:262px;
  top:var(--pm-corner-y, 16px); right:var(--pm-corner, 30px)}
/* Tor panelda kartochka mokapning asosiy raqamini bosib qoladi */
@media (max-width:1279px){ .pc--in{display:none} }

.pc-top{display:flex; align-items:center; gap:12px}
.pc-tt{min-width:0; flex:1}
.pc-tt b{display:block; font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--c-navy)}
.pc-tt span{display:block; font-size:11.5px; color:var(--c-text-soft); margin-top:3px}

.pc-ic{width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center}
.pc-ic svg{width:17px; height:17px}
.pc-ic--ok{background:#e8f7ee; color:#199a50}

.pc-sum{display:block; margin-top:12px; font-size:26px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--c-navy)}
.pc-sum i{font-style:normal; font-size:14px; font-weight:500; color:var(--c-text-soft)}
.pc-sum--ok{color:#199a50}

.pc-up{flex:none; display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:999px;
  background:#e8f7ee; color:#199a50; font-size:11.5px; font-weight:600}
.pc-up svg{width:11px; height:11px}

.pc-live{flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background:#fff6e0; color:var(--c-gold-deep); font-size:11.5px; font-weight:600}
.pc-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--c-gold)}

/* Ustunchali mini grafik */
.pc-bars{display:flex; align-items:flex-end; gap:6px; height:56px; margin-top:16px}
.pc-bars span{flex:1; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,rgba(26,35,66,.30),rgba(26,35,66,.16))}
.pc-bars span.hi{background:linear-gradient(180deg,#fbd24e,var(--c-gold))}

/* Havola qatori */
.pc-url{display:flex; align-items:center; gap:10px; margin-top:13px; padding:10px 12px;
  background:#f7f8fa; border:1px solid #edeff4; border-radius:11px}
.pc-url code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,'SF Mono',monospace; font-size:12.5px; color:var(--c-text-muted)}
.pc-url .pc-copy{flex:none; color:var(--c-text-soft); display:grid; place-items:center}
.pc-url .pc-copy svg{width:15px; height:15px}
.pm-slides{position:absolute; left:0; right:0; bottom:0; height:34%; padding:0 58px 0}
/* top:36% — matn blokning o'rtasida emas, sal YUQORIROQDA turadi */
.pm-slides .slide{position:absolute; left:58px; right:58px; top:36%; transform:translateY(calc(-50% + 8px));
  opacity:0; transition:opacity .55s, transform .55s; pointer-events:none}
.pm-slides .slide.on{opacity:1; transform:translateY(-50%)}
.pm-slides h2{margin:0 0 10px; font-size:26px; line-height:1.22; letter-spacing:-.028em;
  font-weight:600; color:var(--c-navy); max-width:17ch}
.pm-slides p{margin:0; font-size:14px; color:var(--c-text-muted); line-height:1.65; max-width:52ch}

.pm-dots{position:absolute; right:var(--pm-corner, 58px); bottom:var(--pm-corner-y, 30px);
  display:flex; gap:7px}
.pm-dots button{width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:#d6dbe3; cursor:pointer; transition:background var(--t-fast), width var(--t-fast)}
.pm-dots button.on{background:var(--c-gold); width:20px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .pm-slides .slide{transition:none}
  .pm-btn:active{transform:none}
}

/* ================= Kirish sahifasi: YAKUNIY joylashuv =================
   Bitta manba — quyidagi blok chap ustun kengligi, forma va logo o'rnini
   to'liq belgilaydi. Avvalgi bir necha "tuzatish" qatlamlari shu yerga
   jamlandi; ustiga yangi qatlam qo'shmang, SHU BLOKNI tahrirlang.

   Tamoyil: logo CHAP YUQORI burchakda, "Yordam" CHAP PAST burchakda qotib
   turadi (absolyut) — ular formadan mustaqil. Ustunning `padding-left`i
   esa FAQAT formani boshqaradi, shuning uchun formani o'ngga surish
   burchaklardagi elementlarni qimirlatmaydi.

   Barcha o'lchovlar `clamp()` bilan — qat'iy piksel breakpoint'lar yo'q,
   shuning uchun har qanday ekran kengligida uzluksiz moslashadi va
   kichik ekranda buzilmaydi. Ikkita tugma:
     --pm-corner    → burchaklarning chetdan uzoqligi (gorizontal)
     --pm-corner-y  → burchaklarning chetdan uzoqligi (vertikal) */
@media (min-width:980px){
  .pm{
    grid-template-columns:minmax(0,53%) minmax(0,47%);
    --pm-corner:clamp(30px, 3.4vw, 62px);
    --pm-corner-y:clamp(24px, 2.6vw, 42px);
  }
  .pm-left{position:relative; align-items:flex-start;
    padding:32px 40px 26px clamp(116px, 16.5vw, 310px)}
  .pm-form{width:100%; max-width:clamp(320px, 23vw, 356px); margin:auto 0}

  /* To'rt burchak — hammasi bitta o'lchovdan oziqlanadi */
  .pm-logo{position:absolute; top:var(--pm-corner-y); left:var(--pm-corner)}
  .pm-help{position:absolute; left:var(--pm-corner); bottom:var(--pm-corner-y); margin-top:0}

  .pm--solo .pm-left{align-items:center; padding-left:40px}
  .pm--solo .pm-form{max-width:360px; margin:auto}
}

/* Fokus: faqat pastki chiziq rangi o'zgaradi — ortiqcha quti yo'q */
body.auth .fld .in:focus-within{background:transparent}
body.auth .fld input:focus,body.auth .fld input:focus-visible{outline:0; box-shadow:none}
body.auth .fld input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #fff inset}
/* Klaviatura bilan yurganda ko'rinadigan fokus (qulaylik uchun saqlanadi) */
.pm-btn:focus-visible,.pm-alt:focus-visible,.fld .eye:focus-visible,
.pm-row .lnk:focus-visible,.pm-links a:focus-visible{outline:2px solid var(--c-gold-deep); outline-offset:3px}

/* ---- O'ng panel: rasm va uning ostidagi matn BIR chiziqda ----
   Ilgari matn `left:58px` da qotib turardi — oq burchak kesimining egri
   chizig'iga tegib, siqilib ko'rinardi. Endi ikkalasi ham bitta
   `--pm-inset` o'lchovidan oziqlanadi, shuning uchun ekran kengligi
   o'zgarganda ular birga suriladi. */
/* Ichkariga surish o'lchovi panel kengligiga moslangan: panel endi torroq
   (46–48%), shuning uchun inset ham kichikroq — aks holda rasm siqiladi. */
.pm-right{--pm-inset:64px; --pm-gutter:30px}
@media (min-width:1200px){ .pm-right{--pm-inset:78px} }
@media (min-width:1440px){ .pm-right{--pm-inset:92px} }
@media (min-width:1700px){ .pm-right{--pm-inset:110px} }

@media (min-width:980px){
  .pm-slides{padding:0}
  .pm-slides .slide{
    left:var(--pm-inset);
    right:var(--pm-gutter);
  }
  /* Matn endi qotib qolgan `ch` chegarasi bilan emas, mavjud joyga qarab
     yoyiladi — tor ekranda ham burchakka qisilmaydi. */
  .pm-slides h2{max-width:min(100%, 20ch)}
  .pm-slides p{max-width:min(100%, 60ch); padding-right:96px}

}

/* Matn kengligi: nuqtalar egallagan joyni hisobga olgan holda,
   lekin ortiqcha toraytirmasdan. */
@media (min-width:980px){
  .pm-slides p{max-width:min(100%, 58ch); padding-right:24px}
  .pm-slides{height:34%}
}

/* Rasm ostidagi matn: `ch` chegarasi uni sun'iy toraytirib, ikki-uch qatorga
   bo'lib tashlagan edi. Endi mavjud kenglikni to'liq egallaydi va o'lchami
   ekranga qarab o'sadi. */
@media (min-width:980px){
  .pm-slides h2{
    max-width:none;
    font-size:clamp(27px, 2.25vw, 38px);
    line-height:1.18;
    margin-bottom:12px;
  }
  .pm-slides p{
    max-width:none;
    padding-right:0;
    font-size:clamp(14.5px, 1.05vw, 17px);
    line-height:1.6;
  }
  /* Nuqtalar matn bilan to'qnashmasin */
  .pm-slides .slide{padding-bottom:14px}
}

/* Tor ekranda panel juda siqilib, raqamlar qatorga sig'may qolgan edi:
   shu kenglikda ichkariga surish kamaytiriladi. */
@media (min-width:980px) and (max-width:1199px){
  .pm-right{--pm-inset:48px; --pm-gutter:22px}
}
/* Summalar hech qachon qatorga bo'linmasin */
.pc-sum{white-space:nowrap}

/* ================= Yordam oynasi (modal) =================
   Ilgari bu oynaning CSS'i umuman yo'q edi — brauzer uni sahifa oxiriga
   oddiy blok qilib chizardi. Endi markazda qalqib chiquvchi oyna. */
.hm{position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:20px}
.hm[hidden]{display:none}
.hm-back{position:absolute; inset:0; background:rgba(17,26,53,.44); backdrop-filter:blur(3px);
  animation:hm-fade .18s ease-out}
.hm-box{position:relative; width:100%; max-width:400px; background:#fff; border-radius:20px;
  padding:28px 26px 24px; box-shadow:0 32px 64px -24px rgba(17,26,53,.42);
  animation:hm-rise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes hm-fade{from{opacity:0}}
@keyframes hm-rise{from{opacity:0; transform:translateY(12px) scale(.98)}}

.hm-x{position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; padding:0;
  border-radius:50%; background:#f4f6f9; color:var(--c-text-muted); cursor:pointer;
  display:grid; place-items:center; transition:background var(--t-fast), color var(--t-fast)}
.hm-x:hover{background:#e9ecf1; color:var(--c-text)}
.hm-x svg{width:16px; height:16px}

.hm-ic{width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(160deg,#fde68a,var(--c-gold)); color:var(--c-navy)}
.hm-ic svg{width:24px; height:24px}
.hm-box h2{margin:16px 0 6px; font-size:19px; font-weight:600; letter-spacing:-.025em; color:var(--c-navy)}
.hm-lead{margin:0 0 18px; font-size:13.5px; line-height:1.6; color:var(--c-text-muted)}
.hm-lead b{color:var(--c-navy); font-weight:600}

.hm-tel{display:flex; align-items:center; gap:13px; padding:12px 14px; margin-bottom:9px;
  border:1px solid var(--c-border); border-radius:14px; text-decoration:none; background:#fff;
  transition:border-color var(--t-fast), background var(--t-fast)}
.hm-tel:last-of-type{margin-bottom:0}
.hm-tel:hover{border-color:var(--c-gold); background:#fffbf0}
.hm-tel-ic{width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:#f4f6f9; color:var(--c-navy)}
.hm-tel-ic svg{width:18px; height:18px}
.hm-tel-t{min-width:0; flex:1}
.hm-tel-t b{display:block; font-size:14px; font-weight:600; color:var(--c-navy); letter-spacing:-.01em}
.hm-tel-t span{display:block; font-size:11.5px; color:var(--c-text-soft); margin-top:2px}
.hm-tel .chev{flex:none; color:var(--c-text-soft)}
.hm-tel .chev svg{width:15px; height:15px}

.hm-note{margin:16px 0 0; font-size:12px; color:var(--c-text-soft); line-height:1.55}

.hm-x:focus-visible,.hm-tel:focus-visible{outline:2px solid var(--c-gold-deep); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .hm-back,.hm-box{animation:none} }

/* ================= Kirish sahifasi: PANELLAR =================
   Kirish / parol tiklash / ro'yxatdan o'tish — uchalasi BITTA sahifada,
   sahifa qayta yuklanmasdan almashadi. */
.pn[hidden]{display:none}
.pn h1:focus{outline:none}

.pn-back{display:inline-flex; align-items:center; gap:5px; margin-bottom:18px;
  font-size:13px; color:var(--c-text-muted); text-decoration:none;
  transition:color var(--t-fast)}
.pn-back:hover{color:var(--c-navy)}
.pn-back svg{width:15px; height:15px}

.pn-steps{margin:0 0 22px; padding:0; list-style:none; counter-reset:s}
.pn-steps li{position:relative; counter-increment:s; padding:0 0 0 30px; margin-bottom:11px;
  font-size:13.5px; line-height:1.5; color:var(--c-text-muted)}
.pn-steps li::before{content:counter(s); position:absolute; left:0; top:-1px;
  width:21px; height:21px; border-radius:50%; background:#fff6e0; color:var(--c-gold-deep);
  font-size:11.5px; font-weight:700; display:grid; place-items:center}
.pn-steps b{color:var(--c-navy); font-weight:600}

.pn-warn{margin:0; padding:12px 14px; border-radius:11px; font-size:13px; line-height:1.55;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412}
.pn-fine{margin:16px 0 0; font-size:11.5px; line-height:1.55; color:var(--c-text-soft)}

/* Tasdiqlash tugmasi panellarda asosiy amal — shuning uchun to'lachaproq */
.pm-alt--go{border-color:var(--c-gold); background:#fffbf0}
.pm-alt--go:hover{background:#fff6e0}

/* Tugma bosilgach kutish holati */
.pm-alt.busy,.acct .go.busy{opacity:.6; pointer-events:none}

/* ---- Qurilmada eslab qolingan hisob ---- */
.acct{display:flex; align-items:center; gap:12px; padding:12px 13px; margin-bottom:10px;
  border:1px solid var(--c-border); border-radius:14px; background:#fff;
  box-shadow:0 1px 2px rgba(17,26,53,.04)}
.acct .av{width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,#fde68a,var(--c-gold)); color:var(--c-navy);
  font-size:15px; font-weight:700}
.acct .who{flex:1; min-width:0}
.acct .who b{display:block; font-size:14px; font-weight:600; color:var(--c-navy);
  letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct .who span{display:block; font-size:11.5px; color:var(--c-text-soft); margin-top:2px}
.acct .go{flex:none; height:34px; padding:0 15px; border-radius:9px; background:var(--c-navy);
  color:#fff; font-size:13px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; transition:filter var(--t-fast)}
.acct .go:hover{filter:brightness(1.35)}

.acct-x{display:inline-block; margin-top:2px; font-size:12.5px;
  color:var(--c-text-soft); text-decoration:none}
.acct-x:hover{color:var(--c-text-muted); text-decoration:underline}

.pn-back:focus-visible,.acct .go:focus-visible,.acct-x:focus-visible{
  outline:2px solid var(--c-gold-deep); outline-offset:3px}

/* ═══════════ Filtr yorliqlari va sahifalash ═══════════ */
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tab{padding:8px 15px; border-radius:999px; font-size:13px; font-weight:500;
  color:var(--c-text-muted); text-decoration:none; border:1px solid var(--c-border);
  background:#fff; transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast)}
.tab:hover{border-color:var(--c-border-strong); color:var(--c-navy)}
.tab.on{background:var(--c-navy); border-color:var(--c-navy); color:#fff; font-weight:600}

.pager{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px}
.pager .pg{font-size:13px; color:var(--c-text-muted); font-variant-numeric:tabular-nums}

.note{background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:13px 16px;
  border-radius:12px; font-size:13.5px; line-height:1.55; margin-top:16px}
.note.err{background:#fff5f6; border-color:#fecdd3; color:#be123c}
.dim{color:var(--c-text-soft)}

/* Tor ekran: kassa qatorida summa va holat pastki qatorga tushadi
   (kd 40px + gap 14px = 54px — matn ustuni aynan shu qoldiqni oladi). */
@media (max-width:560px){
  .row{flex-wrap:wrap; row-gap:10px}
  .row .l{flex:1 1 calc(100% - 54px)}
  .row .amt{margin-left:54px}
  .row .pill{margin-left:auto}
  .row .chev{display:none}
  .stats{grid-template-columns:1fr}
}

/* ═══════════ Yuqori paneldagi filtr tugmalari ═══════════
   Sahifa sarlavhasi o'rnida yonma-yon turadi; tor ekranda gorizontal
   suriladi (o'ralib ketmaydi — yuqori panel balandligi qat'iy). */
.tb-tabs{flex:1; min-width:0; display:flex; align-items:center; gap:6px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.tb-tabs::-webkit-scrollbar{display:none}
.tb-tabs .tab{flex:none}

/* Jadval poyasi — yozuvlar soni */
.tbl tfoot td{padding:11px 16px; background:#fafbfc; border-top:1px solid var(--c-border);
  border-bottom:0}

/* ══════════ Kassa sozlamalari ══════════ */
.keyout{border-color:#f2c94c; background:linear-gradient(180deg,#fffdf5 0%,#fff 100%)}
.keyout-h b{display:block; font-size:14.5px; color:var(--c-navy)}
.keyout-h span{display:block; margin-top:4px; font-size:12.5px; color:var(--c-text-muted); line-height:1.6}
.keyout-v{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap}
.keyout-v code{
  flex:1; min-width:240px; padding:11px 13px; border-radius:10px;
  background:var(--c-navy); color:#ffd77a; font-size:13px;
  word-break:break-all; user-select:all;
}
.keyrow{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.keyrow-t{flex:1; min-width:240px}
.keyrow-t b{display:block; font-size:14.5px; color:var(--c-navy)}
.keyrow-t span{display:block; margin-top:4px; font-size:12.5px; color:var(--c-text-muted); line-height:1.6}
pre.code{
  margin:0 0 14px; padding:14px 16px; border-radius:12px; overflow-x:auto;
  background:#0e1529; color:#c3cee8; font-size:12.5px; line-height:1.65;
}
pre.code code{color:inherit; background:none; padding:0}

/* ══════════════════════════════════════════════════════════════
   API HUJJATLARI
   ══════════════════════════════════════════════════════════════
   Uch ustun: menyu | tushuntirish | kod. Kod misollari O'NG tomonda
   yonma-yon turadi — o'qiyotgan odam tushuntirishdan kodga ko'z
   yugurtiradi, pastga aylantirmaydi. Tor ekranda ustma-ust tushadi. */

.docs--solo{max-width:1560px; margin:0 auto; padding:0 clamp(14px,2.5vw,32px) 60px}
.docs-top{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 0 22px}
.docs-brand{display:flex; align-items:baseline; gap:7px; color:var(--c-navy);
  font-size:16px; font-weight:650; letter-spacing:-.02em; text-decoration:none}
.docs-brand span{padding:2px 7px; border-radius:5px; font-size:10px; font-weight:700;
  letter-spacing:.09em; background:#fff6e0; color:var(--c-gold-deep)}

.docs-grid{display:grid; gap:38px; grid-template-columns:184px minmax(0,1fr); align-items:start}

/* ─── Yon menyu ─── */
.docs-side{position:sticky; top:18px; display:flex; flex-direction:column; gap:1px}
.docs-side-h{padding:0 11px 8px; font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--c-text-soft)}
.docs-side a{padding:7px 11px; border-radius:8px; font-size:13px;
  color:var(--c-text-muted); text-decoration:none;
  border-left:2px solid transparent; transition:color var(--t-fast), background var(--t-fast)}
.docs-side a:hover{background:#fff; color:var(--c-navy)}
.docs-side a.on{background:#fff6e0; color:var(--c-navy); font-weight:600;
  border-left-color:var(--c-gold-deep)}

.docs-body{min-width:0}

/* ─── Sarlavha ─── */
.docs-hero{display:grid; gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  align-items:start; padding-bottom:30px}
.docs-hero h1{margin:0 0 10px; font-size:30px; font-weight:650;
  letter-spacing:-.04em; color:var(--c-navy)}
.docs-hero .lead{margin:0; font-size:15px; line-height:1.75; color:var(--c-text-muted)}
.docs-hero-c{display:flex; flex-direction:column; gap:6px; padding:16px 18px;
  border-radius:14px; background:var(--c-surface); border:1px solid var(--c-border)}
.docs-hero-c .cap{font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-text-soft)}
.docs-hero-c .cap + .baseurl{margin-bottom:8px}
.baseurl{display:block; font-size:12.5px; color:var(--c-navy); word-break:break-all}

/* ─── Blok: chapda matn, o'ngda kod ─── */
.blk{display:grid; gap:38px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start; padding:30px 0; border-top:1px solid var(--c-border);
  scroll-margin-top:18px}
.blk-t{min-width:0}
.blk-c{min-width:0; position:sticky; top:18px; display:flex; flex-direction:column; gap:14px}

.blk-t h2{margin:0 0 12px; font-size:20px; font-weight:640;
  letter-spacing:-.028em; color:var(--c-navy)}
.blk-t p{margin:0 0 13px; line-height:1.75; color:var(--c-text)}
.blk-t code{padding:2px 6px; border-radius:5px; background:#eef0f4;
  font-size:12.5px; color:#9a3412}

.steps{margin:0 0 16px; padding-left:19px}
.steps li{margin-bottom:9px; line-height:1.75}
.steps b{color:var(--c-navy)}

.endpoint{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.endpoint code{background:var(--c-surface); border:1px solid var(--c-border);
  padding:7px 11px; border-radius:9px; color:var(--c-navy); font-size:13px}
.mth{padding:4px 9px; border-radius:6px; font-size:11px; font-weight:700;
  letter-spacing:.05em; color:#fff}
.mth.post{background:#047857}
.mth.get{background:#1d4ed8}

/* ─── Parametr jadvali ─── */
.tbl.params{background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:12px; overflow:hidden; min-width:0; margin-bottom:14px}
.tbl.params td{font-size:13px; vertical-align:top; line-height:1.65}
.tbl.params td:first-child{white-space:nowrap}
.req{display:block; margin-top:3px; font-size:10px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:#be123c}

/* ─── Kod qutisi ─── */
.cbox{border-radius:14px; overflow:hidden; background:#0e1529;
  box-shadow:0 14px 34px -20px rgb(15 23 42/.55)}
.cbox-h{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 15px; background:rgb(255 255 255/.04);
  border-bottom:1px solid rgb(255 255 255/.07)}
.cbox-h .ttl{font-size:11.5px; font-weight:600; letter-spacing:.03em; color:#c3cee8}
.cbox-h .tag{padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700;
  letter-spacing:.06em; background:rgb(255 255 255/.09); color:#9fb0d8}
.cbox.ok .cbox-h .tag{background:rgb(74 222 128/.16); color:#4ade80}
.cbox.err .cbox-h .tag{background:rgb(251 113 133/.16); color:#fb7185}
.cbox pre.code{margin:0; border-radius:0; background:transparent; padding:14px 16px}
.c-c{color:#6f7da3}                       /* kod ichidagi izoh */

pre.code{margin:0 0 14px; padding:14px 16px; border-radius:12px; overflow-x:auto;
  background:#0e1529; color:#c3cee8; font-size:12.5px; line-height:1.7}
pre.code code{color:inherit; background:none; padding:0}

/* ─── Ogohlantirish qutilari ─── */
.note-box{margin:0 0 14px; padding:13px 16px; border-radius:12px;
  border:1px solid var(--c-border); background:var(--c-surface);
  font-size:13.5px; line-height:1.75; color:var(--c-text-muted)}
.note-box b{color:var(--c-navy)}
.note-box code{background:#eef0f4; padding:2px 6px; border-radius:5px;
  font-size:12.5px; color:#9a3412}
.note-box.warn{border-color:#fcd9a4; background:#fffbf3}
.note-box.ok{border-color:#a7e3c2; background:#f4fdf8}

.docs-mine{margin:16px 0 0; padding:16px 18px; border-radius:14px;
  background:var(--c-surface); border:1px solid var(--c-border)}
.docs-mine b{display:block; margin-bottom:10px; font-size:13.5px; color:var(--c-navy)}
.docs-mine .tbl{min-width:0; font-size:13px}

/* Kod ustuni yopishib turishi faqat baland ekranda ma'noli */
@media (max-height:760px){ .blk-c{position:static} }

@media (max-width:1180px){
  .blk, .docs-hero{grid-template-columns:1fr; gap:20px}
  .blk-c{position:static}
}
@media (max-width:860px){
  .docs-grid{grid-template-columns:1fr; gap:16px}
  .docs-side{position:static; flex-direction:row; flex-wrap:wrap; gap:4px;
    padding-bottom:12px; border-bottom:1px solid var(--c-border)}
  .docs-side-h{display:none}
  .docs-side a{border-left:0; background:var(--c-surface); border:1px solid var(--c-border)}
  .docs-side a.on{border-color:var(--c-gold-deep)}
}