/* ==========================================================================
   TORTINMANG — DIZAYN TIZIMI v2
   «Qattiq suv. Kuchli quyosh. Quruq havo.»

   Tuzilishi:
     01 BELGILAR (ranglar, shrift, oraliq, soya, harakat)
     02 ASOS (reset, tipografika)
     03 KARKAS (sahifa, panjara, yordamchilar)
     04 SARLAVHA PANELI
     05 MOBIL NAVIGATSIYA (chekka menyu + pastki panel)
     06 KARTOCHKA / STATISTIKA
     07 JADVAL (telefonda kartochkaga aylanadi)
     08 NISHON / CHIP
     09 TUGMA
     10 FORMA
     11 XABAR BLOKLARI
     12 MAHSULOT
     13 HERO
     14 JAMOA DARAXTI
     15 PROGRESS / HALQA
     16 TO'LOV
     17 BUYURTMA VA BOSHQA BLOKLAR
     18 OYOQ QISMI / XATO SAHIFALARI
     19 MOSLASHUVCHANLIK
     20 QORONG'I REJIM / CHOP ETISH / IMKONIYAT

   Qoida: brend rangi faqat :root ichida. Emoji yo'q — barcha belgi inline SVG.
   ========================================================================== */

/* ==========================================================================
   01  BELGILAR
   ========================================================================== */
:root{
  /* --- Brend (logotipdagi ranglar bilan bir xil) --- */
  --ink:#5C3733;          /* asosiy — qoramtir jigarrang */
  --ink-900:#3A2522;      /* eng to'q */
  --ink-700:#4A2C29;
  --ui:#8E4B4F;           /* interfeys urg'usi */
  --rose:#A9636A;         /* yumshoq pushti-qizil */
  --rose-400:#C08A90;
  --rose-200:#E4C7CA;
  --rose-100:#F4E6E7;
  --rose-50:#FBF4F4;
  --gold:#B07C2A;
  --gold-300:#D9B978;
  --gold-100:#F3E7CC;
  --terra:#B9643C;
  --sand:#C59458;

  /* --- Neytral (iliq) --- */
  --ink-2:#6E4A46;        /* ikkilamchi matn — oq fonda 7.7:1 */
  /* --muted va --faint ilgari #96766F / #B6A098 edi: oq fonda 4.10 va
     2.48 — WCAG AA (4.5:1) dan past. Ohang saqlangan holda qoraytirildi. */
  --muted:#846761;        /* uchinchi daraja — 5.13:1 */
  --faint:#796B65;        /* placeholder va yordamchi — 5.12:1 */
  --line:rgba(92,55,51,.13);
  --line-2:rgba(92,55,51,.07);
  --line-3:rgba(92,55,51,.04);
  --paper:#F6F3EE;        /* sahifa foni */

  /* DOIMIY TO'Q YUZALAR — matn tokeni EMAS.
     Sabab: --ink va --ui qorong'i rejimda MATN rangi bo'lgani uchun oqarib
     ketadi. Ularni fon sifatida ishlatish hero ni oppoq qilib qo'ygan va
     ustidagi oq matn o'qilmay qolgan edi. Bu uchtasi hech qachon
     ag'darilmaydi — faqat qorong'i rejimda bir oz chuqurlashadi. */
  --toq-1:#3A2522;        /* eng to'q — gradient boshi */
  --toq-2:#5C3733;        /* o'rta */
  --toq-3:#8E4B4F;        /* eng ochiq — gradient oxiri */
  --toq-0:#2C1D1B;        /* lenta uchun qo'shimcha */
  --cream:#F2EBE0;
  /* Krem fonda ikkilamchi matn. --faint/--muted krem ustida AA dan o'tmaydi
     (4.32 va 4.33), shuning uchun alohida token. */
  --krem-ink:#6E5A54;
  --surface:#FFFFFF;
  --surface-2:#FDFBF8;
  --surface-3:#F9F5F0;

  /* --- Holat --- */
  --ok:#2F6B45;    --ok-bg:#EDF6F0;   --ok-line:#C3E0CE;   --ok-ink:#1F4E31;
  --warn:#8A6412;  --warn-bg:#FDF5E3; --warn-line:#EBD6A4; --warn-ink:#6B4C06;
  --gold-ink:#6B4C06;     /* oltin nishon ustidagi matn */
  --err:#A93B2B;   --err-bg:#FCEFEC;  --err-line:#EFC8C0;  --err-ink:#842618;
  --info:#2A5A78;  --info-bg:#EDF3F7; --info-line:#C6DAE7; --info-ink:#1C4256;

  /* --- Shakl --- */
  --r-xs:7px; --r-sm:10px; --r:14px; --r-md:17px; --r-lg:21px; --r-xl:28px;
  --r-full:999px;

  /* --- Oraliq (4px panjara) --- */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px; --s7:32px;  --s8:40px;  --s9:56px;  --s10:72px;
  --chet:16px;            /* sahifa yon chekkasi — mobil */

  /* --- Soya (iliq tusda, ikki qatlamli) --- */
  --sh-xs:0 1px 2px rgba(58,37,34,.05);
  --sh-sm:0 1px 2px rgba(58,37,34,.04), 0 3px 8px -2px rgba(58,37,34,.06);
  --sh:0 2px 4px rgba(58,37,34,.04), 0 10px 22px -8px rgba(58,37,34,.10);
  --sh-md:0 4px 8px rgba(58,37,34,.05), 0 18px 36px -12px rgba(58,37,34,.14);
  --sh-lg:0 8px 18px rgba(58,37,34,.06), 0 32px 62px -18px rgba(58,37,34,.20);
  --sh-glow:0 0 0 4px rgba(169,99,106,.16);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.55);

  /* --- Harakat --- */
  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.15s; --t:.24s; --t-slow:.42s;

  /* --- Gradient --- */
  /* Brend gradienti — DOIMIY ranglar.
     Ilgari --rose/--ui/--ink dan yasalardi, ular esa matn tokenlari bo'lgani
     uchun qorong'i rejimda oqarib ketardi (hero bilan bir xil nuqson).
     Eng ochiq nuqta #99545B qilib tanlandi: oq matn 5.56, 90% oq 4.86 —
     ikkalasi ham WCAG AA dan o'tadi. */
  --grad-brand:linear-gradient(135deg,#99545B 0%,#7E4247 55%,#5C3733 100%);
  --grad-deep:linear-gradient(135deg,var(--ink) 0%,var(--ink-900) 100%);
  --grad-gold:linear-gradient(135deg,var(--gold-300) 0%,var(--gold) 55%,#8E6318 100%);
  --grad-sheen:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);

  /* --- Qatlam tartibi --- */
  --z-top:60; --z-tab:100; --z-parda:110; --z-menyu:120;

  /* --- ESKI NOMLAR (moslik) ---
     Sahifa ichidagi <style> bloklari (11 ta ko'rinish) shu nomlarga
     bog'langan. Ularni o'zgartirmaslik uchun taxallus qilib qo'yamiz.
     --bg-soft ilgari HECH QAYERDA aniqlanmagan edi — shu sababli
     verify / control / neworder sahifalaridagi bloklar fonsiz chiqardi. */
  --plum:var(--ink);
  --plum-900:var(--ink-900);
  --plum-700:var(--ink-700);
  --bg:var(--paper);
  --bg-soft:var(--surface-3);
  --rose-600:var(--ui);
  --rose-300:var(--rose-400);
  --fg:var(--ink);
  --sec:var(--ink-2);
  --hint:var(--muted);
  --link:var(--ui);
  --btn:var(--ui);
  --btn-fg:#ffffff;
  --gold-soft:var(--gold-300);
}

/* ==========================================================================
   02  ASOS
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;
  overflow-x:clip;
}
html { overflow-x: clip; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
              "Noto Sans",Arial,sans-serif;
  font-size:15.5px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  overflow-x:clip;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums;
  text-rendering:optimizeLegibility;
}

/* Fon — juda yumshoq iliq nur dog'lari */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 560px at 6% -8%,  rgba(169,99,106,.10), transparent 62%),
    radial-gradient(720px 500px at 98% 0%,  rgba(176,124,42,.075), transparent 60%),
    radial-gradient(960px 640px at 50% 112%,rgba(92,55,51,.055),  transparent 64%);
}

a{color:var(--ui);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--ink)}
img,svg,video,canvas,iframe,embed,object{max-width:100%}
img,video{height:auto}
img{display:block}
svg{display:block;flex:none}
button{font-family:inherit;color:inherit}
ul,ol{list-style-position:inside}
::selection{background:var(--rose-100);color:var(--ink)}

/* Uzun uzilmas satrlar sahifani kengaytirmasin */
.mono,.codebox,.sku,.cd,td .mono,
a[href^="mailto"],a[href^="tel"]{overflow-wrap:anywhere}

/* --- Tipografika --- */
h1{
  font-size:clamp(23px,1.1rem + 2.2vw,32px);
  font-weight:800;line-height:1.16;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance;overflow-wrap:break-word;
}
h2{
  font-size:clamp(17px,.95rem + .7vw,20px);
  font-weight:800;line-height:1.3;letter-spacing:-.012em;
  color:var(--ink);margin-bottom:var(--s3);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;overflow-wrap:break-word;
}
h3{
  font-size:14.8px;font-weight:750;line-height:1.35;letter-spacing:-.006em;
  color:var(--ink);margin-bottom:var(--s2);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;overflow-wrap:break-word;
}
h2 svg{width:19px;height:19px;color:var(--rose)}
h3 svg{width:15px;height:15px;color:var(--rose)}
p{text-wrap:pretty}

.sub{color:var(--muted);font-size:14.2px;margin-top:5px;font-weight:450;line-height:1.55}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.4px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}

/* Ikonka o'lchami — har bir kontekst uchun aniq.
   DIQQAT: bu yerda ilgari «width:auto» turgan va butun saytdagi
   SVG larni 58-86px gacha shishirib yuborgan. Hech qachon auto yozmang. */
svg.ic{width:16px;height:16px;flex:none}

/* ==========================================================================
   03  KARKAS
   ========================================================================== */
.wrap{
  max-width:1240px;margin:0 auto;
  padding:var(--s6) var(--chet) var(--s10);
}
main.wrap{min-height:52vh}
.narrow{max-width:560px}

.page-h{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap;
}
.page-h > *{min-width:0}

.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* Flex/grid bolalari min-content dan kichrayishni rad etadi va
   konteynerni yorib chiqadi — moslashuvchan tartibdagi eng keng
   tarqalgan nosozlik. */
.grid > *,.row > *,.hero-in > *,.auth-split > *,.legal > *,.stat > *,
.form > *,.pager > *,.paylist > *,.payopt > *,.plist > *,.oinfo,
.top .in > *,.me > *,.act > *,.form .two > *,.spread > *,
.tnode > *,.rfrow > *,.prow > *{min-width:0}

.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
/* TUZOQ: `.wrap` — bu SAHIFA KONTEYNERI (yuqoridagi 234-qator), flex-wrap
   yordamchisi EMAS. `class="row wrap"` deb yozilganda element konteyner
   to'ldirishini (24px / 16px / 72px) meros qilib oladi va qator ostida
   72 piksel bo'sh joy paydo bo'ladi. `.row` da allaqachon flex-wrap:wrap
   bor, shuning uchun bu yerda faqat to'ldirishni qaytarib olamiz —
   15 ta joyda bir vaqtda tuzaladi. */
.row.wrap{flex-wrap:wrap;padding:0;margin-left:0;margin-right:0;
  max-width:none;width:auto}
.row.between{justify-content:space-between}
.row.center{justify-content:center}
.spread{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s4);flex-wrap:wrap}
.divider{height:1px;background:var(--line);margin:var(--s6) 0;border:0}

/* --- Yordamchilar --- */
.muted{color:var(--muted)}
.accent{color:var(--ui)}
.ok-t{color:var(--ok)}
.err-t{color:var(--err)}
.sm{font-size:13.2px}
.xs{font-size:12px}
.lg{font-size:17px}
.b{font-weight:750}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide,.hidden{display:none !important}
.mt{margin-top:var(--s4)}
.mt2{margin-top:var(--s7)}
.mb{margin-bottom:var(--s4)}
.pad{padding:var(--s5)}
.pad0{padding:0}
.w-auto{width:auto}
.w-lg{max-width:760px}
/* .w-lg matn kengligini cheklash uchun. Jadvalga qo'yilganda u ustunlarni
   siqib, o'ramning o'ng tomonida bo'sh joy qoldirardi — jadval bundan
   mustasno. */
table.w-lg{max-width:none;width:100%}
.w-xl{max-width:1020px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.mono{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:.93em;letter-spacing:.01em;
}

/* --- Harakat --- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes slideRight{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-12px) rotate(1.2deg)}}
@keyframes sheen{0%{background-position:-180% 0}60%,100%{background-position:180% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes growW{from{width:0}}
@keyframes drawRing{from{stroke-dashoffset:var(--circ)}}
@keyframes popIn{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.03)}
  100%{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.stagger > *{animation:rise .55s var(--ease-out) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.07s}
.stagger > *:nth-child(3){animation-delay:.12s}
.stagger > *:nth-child(4){animation-delay:.17s}
.stagger > *:nth-child(5){animation-delay:.22s}
.stagger > *:nth-child(6){animation-delay:.27s}
.stagger > *:nth-child(7){animation-delay:.32s}
.stagger > *:nth-child(8){animation-delay:.37s}
.stagger > *:nth-child(n+9){animation-delay:.42s}

.anim-rise{animation:rise .55s var(--ease-out) both}
.anim-fade{animation:fade .6s var(--ease) both}
.anim-pop{animation:popIn .45s var(--ease-spring) both}
/* DIQQAT: .reveal faqat JS ishlayotgani tasdiqlangandagina yashiradi.
   Ilgari shartsiz edi — JS yuklanmasa butun kontent ko'rinmay qolardi. */
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}

/* ==========================================================================
   04  SARLAVHA PANELI
   ========================================================================== */
.top{
  position:sticky;top:0;z-index:var(--z-top);
  background:rgba(58,37,34,.88);
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.top .in{
  max-width:1500px;margin:0 auto;
  padding:0 var(--chet);
  display:flex;align-items:center;gap:var(--s3);
  min-height:62px;flex-wrap:nowrap;
}

.logo{
  display:flex;align-items:center;gap:10px;flex:none;min-width:0;min-height:44px;
  color:#fff;font-weight:800;font-size:17.5px;letter-spacing:.11em;
}
.logo:hover{color:#fff}
.logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo .mark,.fmark{width:32px;height:32px;flex:none}
.logo .mark{filter:drop-shadow(0 3px 7px rgba(169,99,106,.45))}

/* Keng ekrandagi gorizontal menyu (≤1100px da yashiriladi).
   Chegara 980 emas, 1100: admin lentasi 9 ta elementdan iborat va
   981-1100px oralig'ida sarlavhaga sig'masdi. */
/* flex:0 0 auto SHART. Ilgari `flex:0 1 auto; min-width:0; overflow:visible`
   edi: joy yetmaganda konteyner siqilar, lekin havolalar ko'rinib turgan
   holda tashqariga chiqib, o'ngdagi foydalanuvchi bloki ustiga yozilardi
   (admin lentasida 1061-1240px oralig'ida "Boshqaruv" "Administrator"
   ustiga tushib qolgan edi). Endi lenta o'z o'lchamini saqlaydi,
   o'rniga foydalanuvchi bloki qisqaradi (pastga qarang). */
.nav{
  display:flex;gap:2px;flex:0 0 auto;
  flex-wrap:nowrap;overflow:visible;
  scrollbar-width:none;-ms-overflow-style:none;
}
.nav::-webkit-scrollbar{height:0;display:none}
.nav a{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  scroll-snap-align:start;white-space:nowrap;
  padding:8px 12px;border-radius:var(--r-sm);
  color:rgba(255,255,255,.74);font-size:13.6px;font-weight:600;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav a svg{width:16px;height:16px;opacity:.72;transition:opacity var(--t-fast)}
.nav a svg.ic{width:16px;height:16px}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a:hover svg{opacity:1}
.nav a.on{background:var(--grad-brand);color:#fff;
  box-shadow:0 4px 13px -4px rgba(169,99,106,.8)}
.nav a.on svg{opacity:1}

/* ---- 06.1  Guruhlangan menyu (nav-dd) --------------------------------
   Admin uchun yuqori panelda 17 ta havola bor edi — ular hech qanday
   ekranga sig'masdi va «Boshqaruv» qismi kesilib qolardi. Endi ikkinchi
   darajali havolalar <details> ichiga yig'ildi: ochish uchun JS shart
   emas, klaviatura va skrinriderlar bilan ham ishlaydi. */
.nav-dd{position:relative;flex:none}
.nav-dd > summary{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 11px 8px 12px;border-radius:var(--r-sm);cursor:pointer;
  color:rgba(255,255,255,.74);font-size:13.6px;font-weight:600;
  list-style:none;user-select:none;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-dd > summary::-webkit-details-marker{display:none}
.nav-dd > summary::marker{content:''}
.nav-dd > summary svg{width:16px;height:16px;opacity:.72}
.nav-dd > summary .kch{width:13px;height:13px;margin-left:-2px;
  transition:transform var(--t-fast) var(--ease)}
.nav-dd > summary:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-dd > summary:hover svg{opacity:1}
.nav-dd[open] > summary{background:rgba(255,255,255,.14);color:#fff}
.nav-dd[open] > summary .kch{transform:rotate(180deg)}
.nav-dd.on > summary{background:var(--grad-brand);color:#fff;
  box-shadow:0 4px 13px -4px rgba(169,99,106,.8)}
.nav-dd.on > summary svg{opacity:1}

.nav-dd-ro{
  position:absolute;top:calc(100% + 9px);left:0;z-index:var(--z-menyu);
  min-width:218px;padding:7px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;gap:1px;
  animation:ddKir .16s var(--ease) both;
}
.nav-dd.keng .nav-dd-ro{
  min-width:430px;display:grid;grid-template-columns:1fr 1fr;gap:1px 4px}
@keyframes ddKir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* O'ngga chiqib ketmasin */
.nav-dd:last-child .nav-dd-ro{left:auto;right:0}

.nav .nav-dd-ro a{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border-radius:var(--r-sm);
  color:var(--ink);font-size:13.8px;font-weight:600;white-space:nowrap;
}
.nav .nav-dd-ro a svg{width:16px;height:16px;opacity:.6;color:var(--ui)}
.nav .nav-dd-ro a:hover{background:var(--surface-2);color:var(--ink-900)}
.nav .nav-dd-ro a:hover svg{opacity:1}
.nav .nav-dd-ro a.on{
  background:var(--rose-50);color:var(--ui);box-shadow:none}
.nav .nav-dd-ro a.on svg{opacity:1}

/* Eslatma: .nav ga mask-image qo'yib bo'lmaydi — u ochilgan .nav-dd-ro
   ni kesib tashlaydi. Chekka ishorasi endi keng jadvallarga tegishli
   (JS .skroll-bor klassini qo'yadi). */
.tw.skroll-bor{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent 100%);
}
.tw.skroll-bor::after{
  content:'';position:sticky;right:0;top:0;display:block;width:0;height:0;
}
@media (max-width:760px){ .tw.skroll-bor{-webkit-mask-image:none;mask-image:none} }

.top .me{display:flex;align-items:center;gap:10px;margin-left:auto;
  flex:0 1 auto;min-width:0;
  font-size:13px;color:rgba(255,255,255,.9)}
/* Lenta keng bo'lsa, ism-sharif birinchi bo'lib qisqaradi — lentani
   yoki chiqish tugmasini yo'qotgandan ko'ra yaxshiroq. */
.top .me > div:not(.avatar){min-width:0}
.top .me b,.top .me > div:not(.avatar) span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .me b{color:#fff;font-size:13.4px}
.me-kirish{color:#fff;font-size:14px;display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 4px}
.me-kirish:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.avatar,.ava{
  width:36px;height:36px;flex:none;border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-brand);color:#fff;font-weight:800;font-size:14px;
  letter-spacing:.02em;
  box-shadow:0 4px 11px -3px rgba(169,99,106,.6),var(--sh-inset);
  border:1.5px solid rgba(255,255,255,.2);
}
.ava{box-shadow:var(--sh-xs);border:0}
.ava.sm{width:30px;height:30px;font-size:12px}
.ava.lg{width:54px;height:54px;font-size:19px}

.icon-btn{
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.66);
  width:38px;height:38px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--t-fast),background var(--t-fast);
}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.icon-btn svg,.icon-btn svg.ic{width:17px;height:17px}

/* Burger — faqat ≤1100px */
.burger{
  width:44px;height:44px;flex:none;
  display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);color:#fff;cursor:pointer;
  transition:background var(--t-fast);
}
.burger:hover{background:rgba(255,255,255,.2)}
.burger svg{width:21px;height:21px}

/* ==========================================================================
   05  MOBIL NAVIGATSIYA
   Telefonda yuqoridagi lenta o'rniga chekka menyu + pastki panel.
   Sabab: admin uchun lentada 17 ta havola bor edi — yon tomonga surib
   qidirish kerak bo'lardi, ba'zi sahifalar esa umuman yo'q edi.
   ========================================================================== */
.menyu,.menyu-parda,.tabpanel{display:none}

/* --- chekka menyu --- */
.menyu{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-menyu);
  width:min(82vw,330px);
  background:var(--surface);
  box-shadow:-18px 0 46px -16px rgba(58,37,34,.42);
  display:flex;flex-direction:column;
  transform:translateX(102%);
  transition:transform .26s var(--ease-out);
  overscroll-behavior:contain;
}
.menyu[hidden]{display:flex}          /* o'tish animatsiyasi uchun DOM da qoladi */
.menyu:not(.ochiq){
  /* Ekran tashqarisidagi panel gorizontal skroll yaratmasligi uchun */
  visibility: hidden;
  pointer-events:none;
}
.menyu.ochiq{transform:translateX(0);visibility:visible;pointer-events:auto}

.menyu-parda{
  position:fixed;inset:0;z-index:var(--z-parda);
  background:rgba(58,37,34,.55);
  opacity:0;transition:opacity .26s var(--ease);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.menyu-parda[hidden]{display:block;pointer-events:none}
.menyu-parda:not(.ochiq){visibility:hidden}
.menyu-parda.ochiq{opacity:1;pointer-events:auto}

.menyu-bosh{
  flex:none;display:flex;align-items:center;gap:11px;
  padding:var(--s4) 14px 15px;
  padding-top:calc(var(--s4) + env(safe-area-inset-top,0px));
  background:var(--grad-brand);color:#fff;
}
.menyu-kim{flex:1;min-width:0;line-height:1.32}
.menyu-kim b{display:block;font-size:15px;overflow-wrap:anywhere}
.menyu-kim span{font-size:12.2px;opacity:.8}
.menyu-yop{
  width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  background:rgba(255,255,255,.15);border:0;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.menyu-yop:hover{background:rgba(255,255,255,.28)}

.menyu-ro{flex:1;overflow-y:auto;padding:var(--s1) 0 var(--s3);
  -webkit-overflow-scrolling:touch}
.menyu-guruh{
  font-size:11.4px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:15px 18px 6px;
}
.menyu-ro a{
  display:flex;align-items:center;gap:13px;
  min-height:50px;padding:11px 18px;
  color:var(--ink);font-size:15.2px;
  border-left:3px solid transparent;
}
.menyu-ro a svg{width:19px;height:19px;opacity:.6}
.menyu-ro a span{overflow-wrap:anywhere}
.menyu-ro a:active{background:var(--surface-3)}
.menyu-ro a.on{background:var(--rose-50);color:var(--ui);font-weight:700;
  border-left-color:var(--rose)}
.menyu-ro a.on svg{opacity:1;color:var(--rose)}

.menyu-oyoq{
  flex:none;padding:13px var(--s4);
  padding-bottom:calc(13px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-2);background:var(--surface-2);
}
.menyu-chiq{
  width:100%;min-height:48px;margin-top:var(--s2);
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--surface);color:var(--ui);
  border:1.5px solid var(--rose-200);border-radius:var(--r);
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
}
.menyu-chiq:first-child{margin-top:0}
.menyu-chiq svg{width:17px;height:17px}
.menyu-oyoq .btn.blok,.btn.blok{width:100%;justify-content:center}

/* --- pastki panel --- */
.tabpanel{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tab);
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
  border-top:1px solid var(--line-2);
  box-shadow:0 -6px 20px -12px rgba(58,37,34,.3);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabpanel > a,.tabpanel > button{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:58px;padding:7px 2px 6px;position:relative;
  background:none;border:0;cursor:pointer;font-family:inherit;
  color:var(--muted);font-size:11.2px;font-weight:600;line-height:1.15;
}
.tabpanel svg{width:21px;height:21px}
.tabpanel span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabpanel > a.on{color:var(--ui)}
.tabpanel > a.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 3px 3px;background:var(--grad-brand);
}
.tabpanel > a:active,.tabpanel > button:active{background:var(--surface-3)}
.tab-menyu[aria-expanded="true"]{color:var(--ui)}

body.menyu-ochiq{overflow:hidden}

/* ==========================================================================
   06  KARTOCHKA / STATISTIKA
   ========================================================================== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  box-shadow:var(--sh-sm);
  position:relative;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.card + .card{margin-top:var(--s4)}
.card.glass{background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%)}
.card.lift:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.card.accent{
  border-top:3px solid transparent;
  background-image:linear-gradient(var(--surface),var(--surface)),var(--grad-brand);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.card.pad0{padding:0}
.card > h2:first-child,.card > h3:first-child{margin-top:0}

.stat{
  display:flex;align-items:flex-start;gap:var(--s3);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);
  box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.stat:not(:has(.body)){display:block}
.stat .ico,.stat svg.ico{width:46px;height:46px;flex:none;
  filter:drop-shadow(0 6px 10px rgba(58,37,34,.2))}
.stat .body{flex:1;min-width:0}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:800}
.stat .v{font-size:clamp(21px,1rem + 1.4vw,25px);font-weight:800;color:var(--ink);
  margin-top:3px;line-height:1.1;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.stat .v.sm{font-size:18px;letter-spacing:-.012em}
.stat .d{font-size:12.2px;color:var(--muted);margin-top:4px;line-height:1.42}

.stat.hl{background:var(--grad-brand);border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(92,55,51,.55)}
.stat.hl .k{color:rgba(255,255,255,.9)}
.stat.hl .v{color:#fff}
.stat.hl .d{color:rgba(255,255,255,.92)}
.stat.hl::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.08);top:-70px;right:-50px}
.stat.hl:hover{box-shadow:0 16px 36px -12px rgba(92,55,51,.65)}

/* ==========================================================================
   07  JADVAL
   ========================================================================== */
.tw,.tbl-wrap{
  position:relative;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--sh-xs);
}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
thead th{
  background:var(--grad-deep);color:#fff;text-align:left;
  padding:11px 14px;font-size:11.2px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
thead th:first-child{border-top-left-radius:calc(var(--r-lg) - 1px)}
thead th:last-child{border-top-right-radius:calc(var(--r-lg) - 1px)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line-3);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--rose-50)}
tbody tr.picked{background:var(--rose-50);box-shadow:inset 3px 0 0 var(--rose)}
td.r,th.r,table.tbl th.r,table.tbl td.r{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
td.c,th.c,table.tbl th.c,table.tbl td.c{text-align:center}
table.tbl td.mono,table.tbl td .mono{font-variant-numeric:tabular-nums}

/* Jadval ichidagi forma qatorni buzmasin */
table form{display:inline-flex;align-items:center;gap:6px;margin:0}
table form select{width:auto;padding:5px 26px 5px 9px;font-size:12.5px;border-radius:var(--r-xs)}
table input.qty{padding:6px 8px;font-size:13.5px}

/* O'ralmagan jadval qolib ketsa ham sahifa buzilmasin */
.card:has(> table),.card:has(> form > table){overflow-x:auto}

/* Yon tomonga surish mumkinligini bildiruvchi soya */
@media (hover:none){
  .tw,.tbl-wrap{
    background-image:linear-gradient(to left,rgba(92,55,51,.1),rgba(92,55,51,0) 26px);
    background-position:right center;background-repeat:no-repeat;
    background-size:26px 100%;background-attachment:local,scroll;
  }
}

/* ==========================================================================
   08  NISHON / CHIP
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3.5px 10px;border-radius:var(--r-full);
  font-size:11.3px;font-weight:800;letter-spacing:.015em;
  white-space:nowrap;border:1px solid transparent;
}
.badge svg,.badge svg.ic{width:11px;height:11px}
.b-new{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.b-paid{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.b-ship,.badge.b-deliv{background:#EFEAF7;color:#5B4A8E;border-color:#D9CFEE}
.b-done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.b-cancel{background:#F3F0EF;color:#6F6360;border-color:#E3DBD9}
.badge.b-ret{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
.b-rank{background:var(--rose-100);color:var(--ui);border-color:var(--rose-200)}
.b-gold{background:var(--gold-100);color:var(--gold-ink);border-color:var(--gold-300)}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--rose-100);color:var(--ui);
  padding:2.5px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:800;
}
.tier{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:var(--r-full);font-size:12px;font-weight:700;
  background:var(--grad-brand);color:#fff;
}
.rwin{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:2px 9px;border-radius:var(--r-full);
  background:var(--surface-3);border:1px solid var(--line);
  color:var(--muted);white-space:nowrap;
}
.rwin.open{border-color:var(--gold-300);color:#7E5A14;background:var(--gold-100)}
.rwin.closed{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-full);
  background:var(--surface);border:1.5px solid var(--line);
  font-size:13.2px;font-weight:700;color:var(--ink-2);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.chip svg,.chip svg.ic{width:13px;height:13px}
.chip:hover{border-color:var(--rose-200);background:var(--rose-50);color:var(--ui)}
.chip.on{background:var(--grad-brand);border-color:transparent;color:#fff;
  box-shadow:0 4px 12px -4px rgba(169,99,106,.7)}
.chip.on:hover{color:#fff}
.chip .n{background:rgba(92,55,51,.1);padding:1px 7px;border-radius:var(--r-full);
  font-size:12px}
.chip.on .n{background:rgba(255,255,255,.26)}

/* ==========================================================================
   09  TUGMA
   ========================================================================== */
.btn{min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:0;border-radius:var(--r);
  background:var(--grad-brand);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:750;white-space:nowrap;
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 4px 13px -5px rgba(142,75,79,.8),var(--sh-inset);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease);
}
.btn svg,.btn svg.ic{width:16px;height:16px;flex:none}
.btn::before{content:"";position:absolute;inset:0;background:var(--grad-sheen);
  background-size:250% 100%;background-position:-180% 0;pointer-events:none}
.btn:hover{transform:translateY(-2px);color:#fff;
  box-shadow:0 8px 20px -6px rgba(142,75,79,.85),var(--sh-inset)}
.btn:hover::before{animation:sheen .8s var(--ease) forwards}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.btn.ghost{background:var(--surface);color:var(--ui);
  border:1.5px solid var(--line);box-shadow:var(--sh-xs)}
.btn.ghost:hover{background:var(--rose-50);border-color:var(--rose-200);
  color:var(--ui);box-shadow:var(--sh-sm)}
.btn.dark{background:var(--grad-deep);
  box-shadow:0 4px 13px -5px rgba(58,37,34,.8),var(--sh-inset)}
.btn.gold{background:var(--grad-gold);color:#3E2B06;
  box-shadow:0 4px 13px -5px rgba(176,124,42,.8),var(--sh-inset)}
.btn.danger{background:linear-gradient(135deg,#C4553F,#A93B2B);
  box-shadow:0 4px 13px -5px rgba(169,59,43,.8),var(--sh-inset)}
.btn.sm{min-height:38px;padding:7px 13px;font-size:13px;border-radius:var(--r-sm);gap:6px}
.btn.sm svg,.btn.sm svg.ic{width:14px;height:14px}
.btn.xs{min-height:32px;padding:5px 10px;font-size:12px;border-radius:var(--r-xs);gap:5px}
/* Qaytarib bo'lmaydigan amal uchun tugma */
.btn.xavfli{background:linear-gradient(135deg,#C04A38,#A93B2B 60%,#842618);
  color:#fff;box-shadow:0 4px 14px -5px rgba(169,59,43,.7)}
.btn.xavfli:hover{background:linear-gradient(135deg,#CB5341,#B24232 60%,#8E2A1B)}
.btn.xs svg,.btn.xs svg.ic{width:12px;height:12px}
.btn.lg{min-height:52px;padding:14px 26px;font-size:16px;border-radius:var(--r-lg)}
.btn.lg svg,.btn.lg svg.ic{width:18px;height:18px}
.btn.wide{width:100%}

.qbtn{
  width:36px;height:36px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  color:var(--ink);font-size:17px;font-weight:800;line-height:1;
  cursor:pointer;user-select:none;
  transition:background var(--t-fast),border-color var(--t-fast),transform .08s;
}
.qbtn:hover{background:var(--rose-50);border-color:var(--rose-200)}
.qbtn:active{transform:scale(.93)}
.qbtn:disabled{opacity:.4;cursor:not-allowed}

.sbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:12.6px;font-weight:700;color:var(--ink-2);cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.sbtn:hover{border-color:var(--rose-200);background:var(--rose-50);color:var(--ui)}
.sbtn.on,.sbtn.active{background:var(--grad-brand);border-color:transparent;color:#fff}

.pager{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.pager a,.pager span{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:7px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:13.5px;font-weight:700;color:var(--ink-2);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.pager a:hover{border-color:var(--rose-200);background:var(--rose-50);color:var(--ui)}
.pager span{opacity:.45}
.pager svg,.pager svg.ic{width:14px;height:14px}

.back{display:inline-flex;align-items:center;gap:6px;font-size:13.4px;
  font-weight:700;color:var(--muted);margin-bottom:var(--s3)}
.back:hover{color:var(--ui)}
.back svg{width:14px;height:14px}

/* ==========================================================================
   10  FORMA
   iOS Safari 16px dan kichik maydonni fokuslaganda sahifani zumlaydi —
   shuning uchun barcha kirish maydoni 16px.
   ========================================================================== */
label{display:block;font-size:12.8px;font-weight:750;color:var(--ink);
  margin-bottom:6px;letter-spacing:.005em}

input[type=text],input[type=password],input[type=number],input[type=email],
input[type=tel],input[type=search],input[type=date],input[type=url],
input[type=month],input[type=week],input[type=time],input[type=datetime-local],
select,textarea{
  width:100%;min-height:46px;padding:11px 14px;
  border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:16px;line-height:1.45;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--faint)}

/* Katakcha va radio — brauzer standarti 13x13px, barmoq uchun kichik.
   22px kvadrat + 44px ko'rinmas tegish maydoni (::after). */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;
  width:22px;height:22px;margin:0;cursor:pointer;vertical-align:-5px;
  border:1.5px solid var(--rose-200);background:var(--surface);
  border-radius:var(--r-xs);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
input[type=radio]{border-radius:50%}
input[type=checkbox]::after,input[type=radio]::after{
  content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--rose)}
input[type=checkbox]:checked,input[type=radio]:checked{
  background:var(--grad-brand);border-color:transparent}
input[type=checkbox]:checked::before{
  content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg)}
input[type=radio]:checked::before{
  content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff}
input[type=checkbox]:disabled,input[type=radio]:disabled{
  background:var(--surface-3);border-color:var(--line);cursor:not-allowed}
/* Yoniga yozuvi bo'lgan katakcha — butun qator bosiladi */
label:has(> input[type=checkbox]),label:has(> input[type=radio]){
  display:flex;align-items:center;gap:10px;min-height:44px;
  margin-bottom:0;font-size:14.6px;font-weight:600;cursor:pointer}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--rose);
  box-shadow:var(--sh-glow)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);
  color:var(--muted);cursor:not-allowed}
textarea{resize:vertical;min-height:88px;line-height:1.55}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2396766F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

.field{margin-bottom:var(--s4)}
.hint{font-size:12.4px;color:var(--muted);margin-top:6px;line-height:1.5}

/* Maydon + o'lchov birligi ("6" + "oy"). Yalang'och raqamli maydon nimani
   anglatishini ko'rsatmaydi — birlik har doim yonida turishi kerak. */
.birlik{display:flex;align-items:center;gap:var(--s2)}
.birlik > input{width:84px;flex:none;text-align:center;
  font-variant-numeric:tabular-nums}
.birlik > span{font-size:max(13px,.87em);color:var(--muted);white-space:nowrap}
.qty{width:82px;text-align:center;padding:9px 6px;font-weight:800;
  font-variant-numeric:tabular-nums}

.form{display:grid;gap:var(--s3)}
.form .fld,.fld{display:grid;gap:6px}
.form label{font-size:12.6px;font-weight:750;color:var(--ink-2);letter-spacing:.015em}
.form .hint{margin-top:0}
.form .two,.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.form .act,.act{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;
  margin-top:var(--s1)}

.check{
  display:flex;align-items:flex-start;gap:11px;
  font-size:13.8px;font-weight:500;color:var(--ink-2);
  cursor:pointer;margin-bottom:var(--s1);min-height:44px;
  padding:6px 0;
}
.check input[type=checkbox],.check input[type=radio]{
  width:22px;height:22px;min-width:22px;min-height:22px;
  margin:0;flex:none;cursor:pointer;padding:0}
.check > span{flex:1 1 auto;min-width:0;padding-top:2px;line-height:1.5}

.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  margin-bottom:var(--s4)}
.filters input,.filters select{width:auto;min-width:150px;flex:1 1 150px}

/* ==========================================================================
   11  XABAR BLOKLARI
   .note / .alert ichida <b> va <a> bevosita yotadi — display:flex ularni
   alohida flex-elementga aylantirib bitta uzun qatorga tizib qo'yardi.
   Shuning uchun blok + suzuvchi ikonka.
   ========================================================================== */
.alert,.note{
  display:block;position:relative;
  padding:13px 16px;border-radius:var(--r);
  border:1px solid;font-size:14px;line-height:1.55;
  box-shadow:var(--sh-xs);
}
.alert{margin-bottom:var(--s4);animation:rise .4s var(--ease-out) both}
.alert > svg:first-child,.note > svg:first-child{float:left;margin:2px 10px 2px 0}
.alert::after,.note::after{content:"";display:block;clear:both}
.alert p,.note p{margin:0}
.alert svg,.alert svg.ic,.note svg,.note svg.ic{width:18px;height:18px}
.note a,.alert a{color:inherit;font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.note b,.alert b{font-weight:800}

.a-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.a-ok svg{color:var(--ok)}
.a-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.a-err svg{color:var(--err)}
.a-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.a-warn svg{color:var(--warn)}
.a-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.a-info svg{color:var(--info)}

.note{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.note svg{color:var(--info);opacity:.9}
.note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.note.warn svg{color:var(--warn)}
.note.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.note.err svg{color:var(--err)}
.note.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.note.ok svg{color:var(--ok)}
.note.alarm{background:var(--err-bg);border-color:var(--err);color:var(--err-ink);
  box-shadow:0 0 0 3px rgba(169,59,43,.08)}

.legal{
  display:flex;gap:var(--s3);flex-wrap:wrap;
  background:linear-gradient(135deg,var(--ok-bg),#E6F2EA);
  border:1px solid var(--ok-line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);font-size:13.4px;color:var(--ok-ink);
  line-height:1.6;box-shadow:var(--sh-xs);
}
.legal > div{flex:1 1 220px;min-width:0}
.legal svg,.legal svg.ic{width:22px;height:22px;color:var(--ok);margin-top:1px}
.legal b{color:var(--ok-ink)}

.empty{text-align:center;padding:var(--s8) var(--s5);color:var(--muted)}
.empty .ic,.empty svg.ic{width:76px;height:76px;display:block;margin:0 auto var(--s3);
  opacity:.9;animation:float 5s var(--ease) infinite}
.empty b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:5px}

.codebox{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  background:var(--grad-deep);color:#fff;
  padding:13px 17px;border-radius:var(--r);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  letter-spacing:.04em;line-height:1.6;word-break:break-all;
  box-shadow:var(--sh-sm),var(--sh-inset);
}
.codebox .copy{
  flex:none;background:rgba(255,255,255,.15);border:0;color:#fff;cursor:pointer;
  width:34px;height:34px;border-radius:var(--r-xs);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t-fast);
}
.codebox .copy:hover{background:rgba(255,255,255,.28)}
.codebox .copy svg,.codebox .copy svg.ic{width:15px;height:15px}
.copy.copied{background:rgba(47,107,69,.6) !important}

/* ==========================================================================
   12  MAHSULOT
   ========================================================================== */
.plist{display:grid;gap:var(--s5);
  /* `auto-fill` keng ekranda 4 ta ustun yasab, 3 tadan iborat har bir
     guruhda bo'sh katak qoldirardi. Guruhlarda 2-3 tadan mahsulot bor,
     shuning uchun ustunlar soni 3 bilan cheklanadi — suratlar ham
     kattaroq chiqadi. */
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  max-width:1120px}
@media (min-width:981px){ .plist{grid-template-columns:repeat(3,1fr)} }

.pcard{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}

.pcap{
  height:188px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 95% at 50% 8%,#fff 0%,var(--rose-50) 48%,#F3E7E7 100%);
  border-bottom:1px solid var(--line-3);
}
.pcap.bundle{background:radial-gradient(120% 95% at 50% 8%,#fff 0%,#F2EFE4 48%,#E9E3D3 100%)}
.pcap::after{content:"";position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  width:96px;height:13px;border-radius:50%;background:rgba(92,55,51,.16);filter:blur(9px)}
.pcap .art{height:140px;width:auto;position:relative;z-index:1;
  animation:floatSlow 6.5s var(--ease) infinite;transform-origin:50% 90%}
.pcard:hover .pcap .art{animation-duration:3.4s}
.pcap .sku{
  position:absolute;top:11px;left:12px;z-index:2;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  /* Fon DOIMIY oq — demak matn ham doimiy to'q bo'lishi shart.
     Ilgari var(--ink) edi: qorong'i rejimda u oqarib ketib,
     oq fonda oq yozuv hosil bo'lardi (SKU umuman ko'rinmasdi). */
  color:var(--toq-1);font-size:11px;font-weight:850;letter-spacing:.09em;
  padding:3.5px 9px;border-radius:var(--r-full);border:1px solid var(--line);
}
.pcap .wv{
  position:absolute;top:11px;right:12px;z-index:2;
  background:rgba(58,37,34,.76);backdrop-filter:blur(8px);color:#fff;
  padding:3.5px 9px;border-radius:var(--r-full);
  font-size:11.2px;font-weight:800;letter-spacing:.05em;
}

.pbody{padding:var(--s4) 17px 17px;flex:1;display:flex;flex-direction:column}
.pname{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.3;
  letter-spacing:-.012em}
.pvol{font-size:12.3px;color:var(--muted);margin-top:3px;
  display:flex;align-items:center;gap:6px}
.pvol svg,.pvol svg.ic{width:12px;height:12px;opacity:.6}
.phook{font-size:12.8px;color:var(--ink-2);margin-top:var(--s3);flex:1;line-height:1.55}
.prow{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2);
  margin-top:var(--s3);padding-top:13px;border-top:1px dashed var(--line)}
.pprice{font-size:20.5px;font-weight:800;color:var(--ink);line-height:1;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.pprice small{display:block;font-size:11.4px;color:var(--muted);font-weight:700;
  margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.pagent{font-size:12.3px;color:var(--ok);font-weight:800;text-align:right;line-height:1.45}
.pagent span{color:var(--muted);font-weight:600}
.catbanner{
  background:linear-gradient(135deg,var(--cream),var(--surface-3));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);margin-bottom:var(--s6);
}

/* ==========================================================================
   13  HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);margin-bottom:var(--s7);
  padding:clamp(28px,4vw,52px) clamp(20px,3.5vw,46px);
  background:linear-gradient(135deg,var(--toq-1) 0%,var(--toq-2) 44%,var(--toq-3) 100%);
  color:#fff;box-shadow:0 22px 54px -20px rgba(58,37,34,.6);
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(600px 400px at 88% 8%,rgba(217,185,120,.22),transparent 60%),
    radial-gradient(500px 360px at 12% 100%,rgba(255,255,255,.12),transparent 62%)}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(255,255,255,.09);top:-150px;right:-90px;z-index:-1}
.hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s7);align-items:center}
.hero .eyebrow{
  color:var(--gold-300);margin-bottom:var(--s3);
  padding:5px 12px;border:1px solid rgba(217,185,120,.32);
  border-radius:var(--r-full);background:rgba(176,124,42,.12);
}
.hero .eyebrow svg,.hero .eyebrow svg.ic{width:13px;height:13px}
.hero h1{color:#fff;font-size:clamp(26px,2vw + 1.2rem,40px);line-height:1.12;
  margin-bottom:var(--s3);letter-spacing:-.034em}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,#E8D4A4,#F7ECCF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(14.6px,.85rem + .35vw,16px);opacity:.9;max-width:560px;
  line-height:1.65}
.hero .cta{margin-top:var(--s6);display:flex;gap:var(--s3);flex-wrap:wrap}
.hero .btn:not(.ghost){background:#fff;color:var(--ink);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.5)}
.hero .btn:not(.ghost):hover{background:#FFF7F6}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);box-shadow:none;backdrop-filter:blur(8px)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.17);color:#fff;
  border-color:rgba(255,255,255,.5)}

.hero-art{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:270px}
.hero-art img{width:100%;max-width:290px;border-radius:var(--r-xl);
  box-shadow:0 26px 58px -18px rgba(0,0,0,.6);animation:floatSlow 8s var(--ease) infinite}
.hero-art .halo{position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,185,120,.28),transparent 68%);filter:blur(22px)}

.hero-marks{display:flex;gap:var(--s6);margin-top:var(--s6);flex-wrap:wrap;
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.14)}
.hero-marks div{display:flex;align-items:center;gap:10px}
.hero-marks svg,.hero-marks svg.ic{width:28px;height:28px}
.hero-marks b{display:block;font-size:18px;font-weight:800;line-height:1.1}
.hero-marks span{font-size:11.5px;opacity:.74;letter-spacing:.03em}

/* ==========================================================================
   14  JAMOA DARAXTI
   ========================================================================== */
.tree{list-style:none}
.tree ul{list-style:none;margin-left:var(--s6);padding-left:var(--s5);
  border-left:2px dashed var(--rose-200)}
.tnode{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s3);flex-wrap:wrap;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 15px;margin:9px 0;box-shadow:var(--sh-xs);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t);
  animation:slideRight .45s var(--ease-out) both;
}
.tnode:hover{transform:translateX(4px);box-shadow:var(--sh-sm);border-color:var(--rose-200)}
.tnode .who{display:flex;align-items:center;gap:11px;min-width:0}
.tnode .nm{font-weight:750;font-size:14px;color:var(--ink)}
.tnode .cd{font-size:11.4px;color:var(--muted);
  font-family:ui-monospace,Menlo,monospace;margin-top:2px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tnode .st{display:flex;gap:var(--s5);font-size:11.5px;color:var(--muted);
  flex-wrap:wrap;text-align:right}
.tnode .st b{display:block;color:var(--ink);font-size:14.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.vlink{font-size:12.4px;font-weight:700}
.vdot{width:7px;height:7px;border-radius:50%;background:var(--rose);flex:none;
  display:inline-block}

/* ==========================================================================
   15  PROGRESS / HALQA / QADAMLAR
   ========================================================================== */
.progress{height:9px;background:var(--rose-100);border-radius:var(--r-full);
  overflow:hidden;margin-top:var(--s2);
  box-shadow:inset 0 1px 2px rgba(92,55,51,.08)}
.progress i{display:block;height:100%;background:var(--grad-brand);
  border-radius:var(--r-full);position:relative;overflow:hidden;
  animation:growW 1s var(--ease-out) both}
.progress i::after{content:"";position:absolute;inset:0;background:var(--grad-sheen);
  background-size:220% 100%;animation:sheen 2.4s var(--ease) infinite 1s}

.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--rose-100);stroke-width:11}
.ring .bar{fill:none;stroke:url(#ringGrad);stroke-width:11;stroke-linecap:round;
  animation:drawRing 1.2s var(--ease-out) both}
.ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.ring .lbl b{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.04em;
  line-height:1}
.ring .lbl span{font-size:11.6px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;margin-top:3px}

.bar{height:9px;background:var(--rose-100);border-radius:var(--r-full);overflow:hidden}
.track{background:var(--rose-100)}

/* Tasdiqlash qadamlari */
.vsteps{display:grid;gap:var(--s3);counter-reset:qadam}
.vstep{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s3) var(--s4);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
}
.vstep .vnum,.vnum{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-brand);color:#fff;font-size:13px;font-weight:800;
}
.vwait{color:var(--warn);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.step,.ostep{display:flex;align-items:center;gap:var(--s2);font-size:13.4px}

/* ==========================================================================
   16  TO'LOV
   ========================================================================== */
.paylist{display:flex;flex-direction:column;gap:var(--s2)}
.payopt{
  display:flex;align-items:center;gap:var(--s3);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:inherit;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast),
             box-shadow var(--t-fast);
}
.payopt:hover{transform:translateY(-2px);border-color:var(--rose-200);
  box-shadow:var(--sh-sm);color:inherit}
.payopt svg,.payopt svg.ic{width:16px;height:16px;opacity:.5}
.paymark{
  width:38px;height:38px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:17px;letter-spacing:-.02em;
}
.paymark.payme{background:linear-gradient(135deg,#31D0AA,#19B391)}
.paymark.click{background:linear-gradient(135deg,#3FA9F5,#0A7CD6)}
.paystate{width:62px;height:62px;margin:var(--s1) auto var(--s3);border-radius:50%;
  display:grid;place-items:center}
.paystate svg{filter:drop-shadow(0 5px 10px rgba(58,37,34,.22))}
.paystate.wait{animation:pulse 1.4s ease-in-out infinite}
.taxcmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:var(--s3)}
.taxcol{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4)}

/* ==========================================================================
   17  BUYURTMA VA BOSHQA BLOKLAR
   ========================================================================== */
.oinfo{flex:1;min-width:0}
.oinfo .oname,.oname{font-weight:750;font-size:14.5px;color:var(--ink);line-height:1.35}
.oinfo .ometa,.ometa{font-size:12.2px;color:var(--muted);margin-top:3px;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.order-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:var(--s5);align-items:start}
.olist,.rflist,.thx-list{display:flex;flex-direction:column;gap:var(--s2)}
.orow,.oline,.rfrow,.thx-row{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:11px 14px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
}
.olines{display:grid;gap:var(--s2)}
.oart{width:44px;height:44px;flex:none;object-fit:contain}
.oprice,.sum,.total,.sumtotal{font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap}
.osum,.sumbox{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);
}
.sumline{display:flex;justify-content:space-between;gap:var(--s3);
  padding:7px 0;font-size:14px;border-bottom:1px dashed var(--line-2)}
.sumline:last-child{border-bottom:0}
.sumtotal{display:flex;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s3);padding-top:var(--s3);border-top:2px solid var(--line);
  font-size:17px}

.rfname{font-weight:750;color:var(--ink)}
.rfwhen{font-size:12.2px;color:var(--muted)}
.rfside{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.rfbody{flex:1;min-width:0}
.soon{color:var(--warn);font-weight:700}
.late{color:var(--err);font-weight:700}
.wait{color:var(--muted)}
.off{opacity:.5}
.alarm{color:var(--err);font-weight:750}

.dtabs,.dlv-tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
/* DIQQAT: `.dlv-tabs` ning haqiqiy ko'rinishi `cabinet/neworder.blade.php`
   ichidagi <style> blokida — u app.css dan KEYIN yuklanadi va bir xil
   aniqlikdagi qoidalarni bosib ketadi. O'sha sahifa uchun o'zgartirish
   kiritmoqchi bo'lsangiz, shu yerni emas, o'sha blokni tahrirlang. */
.dtab,.dlv-tab{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:8px 14px;border-radius:var(--r-full);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:13.2px;font-weight:700;color:var(--ink-2);
}
.dtab:hover,.dlv-tab:hover{border-color:var(--rose-200);background:var(--rose-50);
  color:var(--ui)}
.dtab.on,.dlv-tab.on,.dtab.active,.dlv-tab.active{background:var(--grad-brand);
  border-color:transparent;color:#fff}
.kuryer{color:var(--info);font-weight:700}
.pochta{color:var(--gold);font-weight:700}
.olib_ketish{color:var(--ok);font-weight:700}
.shipform{display:grid;gap:var(--s2)}
.track{font-family:ui-monospace,Menlo,monospace;font-size:13px}

.funbar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.fun,.funrow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.funlab{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.funval{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

.rk{display:inline-flex;align-items:center;gap:6px;font-weight:750}
.sp{display:inline-block;width:var(--s2)}
.i{font-style:italic}
.hl{background:linear-gradient(transparent 62%,var(--gold-100) 0);font-weight:750}
.lift{transition:transform var(--t) var(--ease)}
.lift:hover{transform:translateY(-3px)}

.auth-split{display:grid;grid-template-columns:1fr .85fr;gap:var(--s7);align-items:center}
.auth-aside{display:grid;gap:var(--s3)}
.auth-list{display:grid;gap:var(--s2);font-size:13.8px;color:var(--ink-2)}
.auth-list div{display:flex;align-items:flex-start;gap:9px}
.auth-list svg,.auth-list svg.ic{width:16px;height:16px;color:var(--ok);margin-top:3px}
.auth-price{font-size:19px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}

.thx-agent{display:flex;align-items:center;gap:var(--s3);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4)}

.shop{display:grid;gap:var(--s4)}
.danger{color:var(--err)}
.open{color:var(--ok)}
.closed{color:var(--muted)}
.active,.on{}
.tg{color:#2AABEE;font-weight:700}

/* ==========================================================================
   18  OYOQ QISMI / XATO SAHIFALARI
   ========================================================================== */
footer.ft{
  border-top:1px solid var(--line);margin-top:var(--s9);
  padding:var(--s6) var(--chet);text-align:center;
  color:var(--muted);font-size:13px;background:var(--surface);
}
footer.ft .fmark{width:30px;height:30px;margin:0 auto var(--s2)}
footer.ft b{color:var(--ink)}
footer.ft .legal-row{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;
  margin-top:var(--s3);font-size:11.8px}
footer.ft .legal-row span{display:inline-flex;align-items:center;gap:5px}
footer.ft .legal-row svg,footer.ft .legal-row svg.ic{width:13px;height:13px;color:var(--ok)}

.errpage{min-height:64vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:var(--s1)}
.errpage .big{font-size:clamp(56px,14vw,84px);font-weight:800;letter-spacing:-.05em;
  line-height:1;background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.errpage .art{width:110px;height:110px;margin-bottom:var(--s3);
  animation:float 5s var(--ease) infinite}

/* ==========================================================================
   19  MOSLASHUVCHANLIK
   Pog'onalar: 1440 / 1100 / 980 / 760 / 560 / 400
   Asosiy o'lchamlar clamp() orqali uzluksiz o'zgaradi — pog'onalar
   faqat tartib o'zgaradigan joyda.
   ========================================================================== */

/* --- Katta monitor --- */
@media (min-width:1440px){
  :root{--chet:24px}
  .wrap{max-width:1360px}
  body{font-size:16px}
}

/* --- Noutbuk --- */
@media (max-width:1280px){
  .nav a,.nav-dd > summary{padding:8px 10px;font-size:13.2px;gap:6px}
  .order-grid{grid-template-columns:1fr}
  .auth-split{grid-template-columns:1fr;gap:var(--s5)}
}
/* 1101-1240px: menyu bilan foydalanuvchi bloki tirkashmasin —
   ism-sharif yashiriladi, avatar va chiqish tugmasi qoladi. */
@media (max-width:1240px) and (min-width:1101px){
  .nav a,.nav-dd > summary{padding:8px 8px;font-size:12.8px;gap:5px}
  .nav a svg,.nav-dd > summary svg{width:15px;height:15px}
  .top .me > div:not(.avatar){display:none}
  .top .in{gap:10px}
}

/* --- Planshet: gorizontal menyu o'rniga mobil navigatsiya --- */
@media (max-width:1100px){
  /* Lenta butunlay olib tashlanadi — uning o'rniga chekka menyu */
  .top .nav { display: none !important; }
  .burger{display:inline-flex}
  .tabpanel{display:flex}
  .menyu,.menyu-parda{display:flex}
  .menyu-parda{display:block}

  .top .in{gap:10px}
  /* Telefonda sarlavhada faqat: logo — avatar — burger.
     Ism, unvon, «Chiqish», «Agent bo‘lish», «Kirish» menyuga ko‘chdi,
     aks holda burger ekrandan chiqib ketardi. */
  .top .me > div:not(.avatar){display:none !important}
  .top .me form{display:none !important}          /* inline uslubni yengadi */
  .top .me .me-royxat{display:none !important}
  .top .me .me-kirish{display:none !important}

  /* Pastki panel sahifa oxirini to'smasligi uchun joy */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  footer.ft{margin-bottom:var(--s2)}
  html{scroll-padding-top:74px}

  .hero-in{grid-template-columns:1fr}
  .hero-art{display:none}
  .ring{width:112px;height:112px}
}
@media (min-width:1101px){
  .menyu,.menyu-parda{display:none !important}
}

/* --- Telefon --- */
@media (max-width:760px){
  :root{--chet:15px}
  .wrap{padding:var(--s5) var(--chet) var(--s9)}
  .top .in{min-height:58px}
  .card{padding:var(--s4)}
  .stat{padding:var(--s3) var(--s4);gap:var(--s3)}
  .stat .ico,.stat svg.ico{width:40px;height:40px}
  .grid{gap:var(--s3)}
  .plist{gap:var(--s4)}
  .page-h{margin-bottom:var(--s5);align-items:flex-start;flex-direction:column;gap:var(--s3)}
  .page-h > :last-child{width:100%}
  .hero{padding:var(--s7) var(--s5);border-radius:var(--r-lg)}
  .hero-marks{gap:var(--s4)}
  .taxcmp{grid-template-columns:1fr}
  .form .two,.two{grid-template-columns:1fr}
  .sumtotal{font-size:16px}
}

/* --- Filtr tugmalari: telefonda bitta siljuvchi qator ---
   Ilgari 8 ta filtr 4 qatorga yoyilib, birinchi buyurtmagacha
   ~900px skroll qilish kerak edi. */
@media (max-width:680px){
  .row.wrap.chip-lenta,
  .row.wrap:has(> .chip),
  .dtabs,.dlv-tabs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:calc(-1 * var(--chet));margin-right:calc(-1 * var(--chet));
    padding:2px var(--chet) 7px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12px,
                       #000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 12px,
                       #000 calc(100% - 18px),transparent 100%);
  }
  .row.wrap.chip-lenta::-webkit-scrollbar,
  .row.wrap:has(> .chip)::-webkit-scrollbar,
  .dtabs::-webkit-scrollbar,.dlv-tabs::-webkit-scrollbar{height:0;display:none}
  .row.wrap.chip-lenta > .chip,
  .row.wrap:has(> .chip) > .chip,
  .dtabs > *,.dlv-tabs > *{flex:none;scroll-snap-align:start;min-height:40px}
}

/* Chip filtri lentasi — asosiy (keng ekran) ko'rinishi.
   <=680px da u yon tomonga suriladigan lentaga aylanadi (yuqoriga qarang). */
.chip-lenta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}

/* --- JADVAL -> KARTOCHKA  (JS .karta-jadval sinfini qo'yadi) ---
   Telefonda 7 ustunli jadvalni yon tomonga surish o'rniga
   har bir qator mustaqil kartochkaga aylanadi. --- */
@media (max-width:760px){
  .tw,.tbl-wrap{border:0;background:none;box-shadow:none;overflow-x:visible;
    background-image:none}

  table.karta-jadval{min-width:0;width:100%;display:block;font-size:14px}
  /* Karta rejimida sarlavha qatori butunlay olib tashlanadi.
     Ilgari u `position:absolute;clip:rect(0,0,0,0)` bilan yashirilgan edi,
     lekin yashiringan <th> lar baribir kenglikni egallab, viewport dan
     toshib chiqqandek ko'rinardi. Sarlavha matni endi har bir katakning
     `td::before{content:attr(data-label)}` ida ko'rinadi va o'qiladi,
     shu sabab yashirin thead keraksiz. */
  table.karta-jadval thead{display:none}
  table.karta-jadval tbody{display:block}
  table.karta-jadval tbody tr{
    display:block;margin-bottom:var(--s3);
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:var(--s1) var(--s4);
    box-shadow:var(--sh-sm);
  }
  table.karta-jadval tbody tr:hover{background:var(--surface)}
  table.karta-jadval tbody tr.picked{box-shadow:var(--sh-sm),inset 3px 0 0 var(--rose)}
  table.karta-jadval tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
    padding:9px 0;border-bottom:1px dashed var(--line-2);
    text-align:right;white-space:normal;
  }
  table.karta-jadval tbody tr td:last-child{border-bottom:0}
  .karta-jadval td::before{
    content:attr(data-label);
    flex:none;max-width:45%;text-align:left;
    font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);
  }
  .karta-jadval td:empty{display:none}
  .karta-jadval td.r,.karta-jadval td.c{text-align:right}
  .karta-jadval td form{justify-content:flex-end}

  /* Kartochka ichidagi havola 21px balandlikda edi — barmoq bilan tegib
     bo'lmasdi. Endi har bir bosiladigan element kamida 38px. */
  .karta-jadval td a:not(.btn):not(.chip):not(.badge){
    display:inline-flex;align-items:center;min-height:38px;
    padding:2px 0;text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:var(--rose-200);
  }
  .karta-jadval td a:not(.btn):not(.chip):not(.badge):hover{
    text-decoration-color:var(--ui)}
  .karta-jadval td .btn,.karta-jadval td .sbtn{min-height:38px}
  .karta-jadval td select{min-height:40px;font-size:15px;padding:7px 30px 7px 11px}

  /* Jadvalga aylanmagan (4 ustundan kam) jadvallar skrollanadi */
  table:not(.karta-jadval){min-width:520px}
  .tw:has(table:not(.karta-jadval)),
  .tbl-wrap:has(table:not(.karta-jadval)){
    overflow-x:auto;border:1px solid var(--line);
    border-radius:var(--r-lg);background:var(--surface);
  }
}

/* --- Kichik telefon --- */
@media (max-width:560px){
  .btn.wide,.page-h .btn:not(.sm):not(.ghost){width:100%}
  .row.act,.form .act{width:100%}
  .row.act > .btn,.form .act > .btn{flex:1 1 auto}
  .tnode{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .tnode .st{text-align:left;gap:var(--s4)}
  .codebox{flex-direction:column;align-items:stretch;gap:var(--s2);text-align:center}
  .codebox .copy{width:100%}
  .hero-marks{gap:var(--s3);flex-direction:column}
  .legal{padding:var(--s4)}
  .empty{padding:var(--s7) var(--s4)}
  .empty .ic,.empty svg.ic{width:62px;height:62px}
  .ring{width:104px;height:104px}
  .ring .lbl b{font-size:22px}
}

/* --- Juda tor --- */
@media (max-width:400px){
  :root{--chet:13px}
  .logo{font-size:16px;letter-spacing:.07em}
  .logo .mark{width:28px;height:28px}
  .tabpanel > a,.tabpanel > button{font-size:11px;min-height:56px;gap:2px}
  .tabpanel svg{width:19px;height:19px}
  .stat .v{font-size:20px}
  .pcap{height:166px}
  .pcap .art{height:124px}
  h2{font-size:16.5px}
}

/* --- Yotiq holatdagi past ekran --- */
@media (max-height:460px) and (orientation:landscape){
  .menyu-bosh{padding:10px 14px}
  .menyu-ro a{min-height:42px;padding:8px 18px}
  .tabpanel > a,.tabpanel > button{min-height:48px}
}

/* --- Sensorli ekran: hover effektlari o'rinsiz --- */
@media (hover:none){
  .card.lift:hover,.stat:hover,.pcard:hover,.payopt:hover,.btn:hover,.lift:hover{
    transform:none}
  .tnode:hover{transform:none}
  .pcard:hover .pcap .art{animation-duration:6.5s}
}

/* ---- 19.9  Telefonda qidiruv maydoni + filtr chiplari ---------------- */
@media (max-width:680px){
  /* Qidiruv maydonining ichki `min-width:220px` i tufayli u chip yoniga
     siqilib qolardi va matn kesilardi — endi doim butun qatorni oladi. */
  .card > .row > div:has(> input[type=text]),
  .card > .row > div:has(> input[type=search]),
  .card > .row > div:has(> select){
    flex:1 0 100% !important;min-width:0 !important;width:100%
  }
}
@media (max-width:560px){
  /* Bir nechta chip qolganda ular qatorni teng bo'lib oladi:
     tishli chekka o'rniga tekis panjara. */
  .card > .row > .chip{flex:1 1 auto;justify-content:center;text-align:center}
}

/* ---- 19.10  Barmoq uchun eng kichik o'lcham (hover yo'q qurilmalar) ---
   WCAG 2.5.8 «Target Size (Minimum)» — 24x24 CSS px majburiy, 44px esa
   tavsiya. Sensorli ekranda biz 40px dan pastga tushmaymiz. */
@media (hover:none),(max-width:980px){
  .btn.xs{min-height:38px;padding:7px 12px}
  .btn.sm{min-height:40px}
  .sbtn,.icon-btn,.codebox .copy,.chip{min-height:40px}
  .tabs a,.tabs button{min-height:40px}
  td .btn,td button,td a.btn{min-height:38px}
}

/* ---- 19.11  O'qilishi qiyin mayda matnlar ----------------------------
   <small> brauzerda 0.8em — 13.1px li matn ichida 10.5px ga tushadi.
   Pol qo'yamiz, lekin nisbiy o'lchamni saqlaymiz. */
small{font-size:max(11.6px,.84em);line-height:1.5}

/* Kartochka sarlavhasidagi «hammasi» kabi yakka havolalar */
a.sm,.card-h a,.panel-h a{display:inline-flex;align-items:center;gap:5px;
  min-height:36px}

/* ---- 19.12  PWA o'rnatish lentasi ------------------------------------
   Pastda, tab panelining ustida chiqadi. Bir marta yopilsa
   localStorage ga belgi qo'yiladi va qayta bezovta qilmaydi. */
.pwa-lenta{
  position:fixed;left:var(--chet);right:var(--chet);
  bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  z-index:var(--z-parda);
  display:flex;align-items:center;gap:var(--s3);
  padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  transform:translateY(130%);opacity:0;
  transition:transform .34s var(--ease-out),opacity .28s var(--ease);
  max-width:520px;margin-inline:auto;
}
.pwa-lenta.ochiq{transform:none;opacity:1}
.pwa-ikon{flex:none;display:flex;line-height:0}
.pwa-ikon svg{border-radius:9px;box-shadow:0 4px 12px -4px rgba(58,37,34,.5)}
.pwa-matn{flex:1 1 auto;min-width:0;line-height:1.35}
.pwa-matn b{display:block;font-size:14.6px;font-weight:800;color:var(--ink)}
.pwa-matn span{display:block;font-size:12.6px;color:var(--muted);margin-top:2px}
.pwa-matn .pwa-ulash{display:inline;font-size:inherit;color:var(--ui)}
.pwa-orna{flex:none}
.pwa-yop{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:50%;transition:background var(--t-fast),color var(--t-fast);
}
.pwa-yop:hover{background:var(--surface-3);color:var(--ink)}

/* Pastki panel bor sahifalarda uning ustiga chiqadi */
@media (max-width:1100px){
  .pwa-lenta{bottom:calc(62px + var(--s3) + env(safe-area-inset-bottom))}
}
@media (max-width:400px){
  .pwa-lenta{gap:10px;padding:11px 12px}
  .pwa-matn span{font-size:12px}
}
/* Ilova sifatida ochilgan bo'lsa lenta umuman kerak emas */
@media (display-mode:standalone){
  .pwa-lenta{display:none !important}
}

/* ---- 19.13  Modal oyna (<dialog>) ------------------------------------
   Native element: Esc, fokus qulfi va ::backdrop brauzerdan tekin
   keladi. JS faqat ochish uchun bitta qator. */
.oyna{
  /* <dialog> brauzer uslubida `margin:auto` bilan markazlashadi, lekin
     boshqa qoidalar uni bosib ketishi mumkin — aniq yozib qo'yamiz. */
  position:fixed;inset:0;margin:auto;
  width:min(640px,calc(100vw - 2*var(--chet)));
  max-height:min(88dvh,900px);
  padding:0;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.oyna.keng{width:min(880px,calc(100vw - 2*var(--chet)))}
.oyna::backdrop{
  background:rgba(58,37,34,.52);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.oyna[open]{animation:oynaKir .22s var(--ease-out) both}
@keyframes oynaKir{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.oyna-bosh{
  padding:var(--s5) var(--s6) var(--s3);
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
}
.oyna-bosh h2{margin:0;font-size:20px;letter-spacing:-.01em;padding-right:42px}
.oyna-bosh .sub{margin:5px 0 0;font-size:13.6px;color:var(--muted)}

.oyna-ich{
  padding:var(--s5) var(--s6) var(--s6);
  overflow-y:auto;max-height:calc(88dvh - 110px);
  overscroll-behavior:contain;
}

.oyna-yop-shakl{position:absolute;top:0;right:0;z-index:2;margin:0}
.oyna-yop{
  display:grid;place-items:center;width:42px;height:42px;margin:12px 14px 0 0;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:50%;transition:background var(--t-fast),color var(--t-fast);
}
.oyna-yop:hover{background:var(--surface-3);color:var(--ink)}
.oyna-yop svg{width:19px;height:19px}

/* Oyna ichidagi tugmalar qatori — pastga yopishadi */
.oyna-oyoq{
  display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line-2);
}
.oyna-oyoq .chapga{margin-right:auto}

/* Ikki ustunli maydon panjarasi */
.maydon-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
.maydon-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3) var(--s4)}
.maydon-2 .keng-2,.maydon-3 .keng-3{grid-column:1/-1}

/* Xavfli amal bloki */
.xavf{
  margin-top:var(--s5);padding:var(--s4);
  background:var(--err-bg);border:1px solid var(--err-line);
  border-radius:var(--r);color:var(--err-ink);font-size:13.6px;line-height:1.55;
}
.xavf b{display:block;margin-bottom:4px;color:var(--err)}
.xavf .row{margin-top:10px}

@media (max-width:680px){
  .oyna{
    width:100vw;max-width:100vw;max-height:94dvh;
    margin:auto auto 0;border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0;
  }
  .oyna[open]{animation:oynaPast .26s var(--ease-out) both}
  @keyframes oynaPast{from{transform:translateY(100%)}to{transform:none}}
  .oyna-bosh{padding:var(--s4) var(--s4) var(--s3)}
  .oyna-ich{padding:var(--s4);max-height:calc(94dvh - 104px);
    padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  .maydon-2,.maydon-3{grid-template-columns:1fr}
  .oyna-oyoq{flex-direction:column-reverse}
  .oyna-oyoq .btn{width:100%}
  .oyna-oyoq .chapga{margin-right:0}
}

/* ---- 19.14  Huquqiy hujjatlar va rozilik -----------------------------*/
.ft-huq{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  margin-top:var(--s4);font-size:13px}
/* min-height:26px — WCAG 2.5.8 (AA) sichqonchali ekranda ham 24px talab
   qiladi; .ft-huq flex bo'lgani uchun havolalar `inline` emas va
   "matn ichidagi havola" istisnosi bu yerda ishlamaydi. */
.ft-huq a{color:var(--ui);font-weight:650;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  display:inline-flex;align-items:center;min-height:26px;padding:0 2px}
.ft-huq a:hover{color:var(--ink)}
/* Ajratgich alohida <span> emas: matn tuguni qorong'i rejimda 4.5:1 ga
   yetmaydi. ::before havola rangini meros oladi — kontrast muammosi yo'q. */
.ft-huq a + a::before{content:"·";margin-right:9px;text-decoration:none;
  display:inline-block}
/* Sensorli ekranda bosish maydoni 36 px dan kichik bo'lmasligi kerak:
   .ft-huq flex bo'lgani uchun havolalar inline emas — padding bilan o'stiramiz */
@media (hover:none),(max-width:1100px){
  .ft-huq{gap:4px}
  .ft-huq a{min-height:38px;padding:0 8px}
}

/* Hujjat sahifalari — o'qish uchun qulay kenglik va tipografiya */
.huq{max-width:780px;margin-inline:auto}
.huq h2{
  margin:var(--s8) 0 var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--line-2);
  font-size:20px;letter-spacing:-.01em;scroll-margin-top:84px;
}
.huq h2:first-of-type{border-top:0;padding-top:0}
.huq p{margin:0 0 var(--s3);line-height:1.72}
.huq ul{margin:0 0 var(--s4);padding-left:22px}
.huq li{margin:7px 0;line-height:1.65}
.huq table{margin:var(--s3) 0 var(--s5)}
.huq td:first-child{color:var(--ink-2);width:40%}
.huq .alert,.huq .note{margin:var(--s4) 0}
.huq code{background:var(--surface-3);padding:2px 7px;border-radius:var(--r-xs);
  font-size:13.4px;border:1px solid var(--line-2)}
@media (max-width:560px){
  .huq h2{font-size:18px;margin-top:var(--s7)}
  .huq td:first-child{width:auto}
}

/* Ro'yxatdan o'tishdagi rozilik bloki */
.rozilik-blok{
  margin-top:var(--s5);padding:var(--s4);
  background:var(--surface-3);border:1px solid var(--line-2);
  border-radius:var(--r);
}
.rozilik-blok .check{align-items:flex-start;margin-bottom:2px}
.rozilik-blok .check span{font-size:13.8px;line-height:1.55}
.rozilik-blok .check a{color:var(--ui);font-weight:700;
  text-decoration:underline;text-underline-offset:2px}
.rozilik-blok .check.ixtiyoriy{
  margin-top:6px;padding-top:12px;border-top:1px dashed var(--line)}
.rozilik-blok .check.ixtiyoriy span b{
  display:inline-block;margin-left:5px;padding:1px 7px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-weight:700;font-size:11.2px;vertical-align:1px}
.rozilik-blok .hint{margin-bottom:0}

/* ==========================================================================
   20  QORONG'I REJIM / CHOP ETISH / IMKONIYAT
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#F2E7E3;      --ink-900:#F7F0ED;  --ink-700:#E8D9D4;
    --ink-2:#CDB8B2;    --muted:#A08D88;    --faint:#A08C87;
    --ui:#D79AA0;       --rose:#C98D94;     --rose-400:#B0747C;
    --rose-200:#4E3336; --rose-100:#3C2729; --rose-50:#2E1E20;
    --gold:#D9B978;     --gold-300:#B07C2A; --gold-100:#3A2E1A;
    --line:rgba(255,255,255,.12);
    --line-2:rgba(255,255,255,.07);
    --line-3:rgba(255,255,255,.045);
    --paper:#1B1312;    --cream:#241A18;   --krem-ink:#B3A09B;
    /* To'q yuzalar qorong'i rejimda ham TO'Q qoladi — faqat chuqurlashadi */
    --toq-1:#2A1C1A;    --toq-2:#3B2724;    --toq-3:#6E3C40;  --toq-0:#231715;
    --surface:#241A18;  --surface-2:#2A1E1C; --surface-3:#312321;
    --ok:#7FC79B;  --ok-bg:#1E2E24;  --ok-line:#2F5740;  --ok-ink:#BFE4CD;
    --warn:#E0BB6B;--warn-bg:#2F2718;--warn-line:#5A4A26;--warn-ink:#EBD6A4;
    --gold-ink:#EFD79C;
    --err:#E39185; --err-bg:#2F1E1B; --err-line:#5C3A33; --err-ink:#F3C8C0;
    --info:#8FBBD6;--info-bg:#1B262D;--info-line:#345062;--info-ink:#C6DAE7;
    --sh-xs:0 1px 2px rgba(0,0,0,.3);
    --sh-sm:0 1px 2px rgba(0,0,0,.3), 0 3px 8px -2px rgba(0,0,0,.4);
    --sh:0 2px 4px rgba(0,0,0,.3), 0 10px 22px -8px rgba(0,0,0,.5);
    --sh-md:0 4px 8px rgba(0,0,0,.35), 0 18px 36px -12px rgba(0,0,0,.55);
    --sh-lg:0 8px 18px rgba(0,0,0,.4), 0 32px 62px -18px rgba(0,0,0,.6);
    --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --grad-deep:linear-gradient(135deg,#3A2A27 0%,#241A18 100%);
  }
  body::before{
    background:
      radial-gradient(820px 560px at 6% -8%,rgba(201,141,148,.1),transparent 62%),
      radial-gradient(720px 500px at 98% 0%,rgba(217,185,120,.07),transparent 60%);
  }
  .top{background:rgba(20,14,13,.9)}
  .tabpanel{background:rgba(36,26,24,.97)}
  .menyu{background:var(--surface)}
  .pcap{background:radial-gradient(120% 95% at 50% 8%,#312421 0%,#2A1E1C 48%,#241A18 100%)}
  .pcap.bundle{background:radial-gradient(120% 95% at 50% 8%,#2F2A22 0%,#272219 100%)}
  .hero .btn:not(.ghost){background:var(--ink);color:var(--paper)}
  .hero .btn:not(.ghost):hover{background:#FFF}
  .legal{background:linear-gradient(135deg,var(--ok-bg),#1A2920)}
  img.art,.oart{filter:brightness(.94)}
  .errpage .big{filter:brightness(1.3)}
}

/* Harakatni kamaytirish rejimi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
  .menyu,.menyu-parda{transition:none}
}

/* Yuqori kontrast */
@media (prefers-contrast:more){
  :root{--line:rgba(92,55,51,.4);--line-2:rgba(92,55,51,.25);--muted:#6E4A46}
  .btn{box-shadow:none;outline:1px solid rgba(0,0,0,.25)}
  .badge,.chip{border-width:2px}
}

/* Fokus — klaviatura bilan yurish */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--rose);outline-offset:2px;border-radius:var(--r-xs);
}
.top a:focus-visible,.top button:focus-visible,
.menyu-bosh button:focus-visible{outline-color:#fff}

/* Chop etish */
@media print{
  .top,.nav,.burger,.menyu,.menyu-parda,.tabpanel,footer.ft,.btn,.pager{
    display:none !important}
  body{padding-bottom:0;background:#fff;color:#000;font-size:11pt}
  body::before{display:none}
  .card,.tw,.tbl-wrap,.stat{box-shadow:none;border:1px solid #CCC;break-inside:avoid}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  thead th{background:#EEE !important;color:#000 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- 19.15 Mahsulot kartasida "kuniga qancha" -----------------------
   Bazadagi use_days ustuni ilgari hech qayerda ko'rsatilmasdi. Narxga
   e'tirozni yopadigan eng kuchli raqam shu: 95 000 so'm qimmat tuyuladi,
   kuniga 1 580 so'm esa yo'q. */
.pkun{display:flex;align-items:center;gap:6px;margin-top:var(--s3);
      padding-top:var(--s3);border-top:1px dashed var(--line);
      font-size:max(12.4px,.82em);color:var(--muted);line-height:1.45}
.pkun .ik{width:15px;height:15px;flex:none;opacity:.75}
.pkun b{color:var(--gold-ink);font-weight:750;white-space:nowrap}
@media (max-width:400px){ .pkun{font-size:max(11.8px,.8em)} }

/* Narxlar ustma-ust tushsin — jadvalda va kartalar qatorida tinch ko'rinadi */
.pprice,.pagent,.narx,.summa,td.son{font-variant-numeric:tabular-nums}

/* ---------- 19.16 "Biz nima qilmaymiz" bloki ------------------------------
   Da'vo emas, inkor. Chizilgan matn — o'quvchi qo'rqayotgan narsa; yonida
   nima bo'lishi tushuntiriladi. Oxirida bitta ijobiy xulosa. */
.yoq-blok{background:var(--paper);border:1px solid var(--line);
          border-radius:var(--r-lg);padding:var(--s6) var(--s6) var(--s5)}
.yoq-sarlavha{display:flex;gap:var(--s4);align-items:flex-start;margin-bottom:var(--s5)}
.yoq-sarlavha > .ik{width:26px;height:26px;flex:none;color:var(--ui);margin-top:2px}
.yoq-sarlavha h2{margin:0;font-size:max(19px,1.18em);line-height:1.25}
.yoq-sarlavha h2 em{font-style:normal;color:var(--rose)}
.yoq-sarlavha .sub{margin-top:3px;font-size:max(12.6px,.82em);color:var(--muted)}

.yoq-royxat{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.yoq-royxat li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);
               padding:var(--s3) var(--s4);background:var(--surface);
               border:1px solid var(--line);border-radius:var(--r-sm);
               min-height:40px}
.yoq-royxat s{color:var(--ink);text-decoration-color:var(--rose);
              text-decoration-thickness:2px;font-weight:700;
              font-size:max(14px,.94em)}
.yoq-royxat span{color:var(--muted);font-size:max(12.6px,.84em)}

.yoq-xulosa{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5);
            padding:var(--s4);border-radius:var(--r-sm);
            background:color-mix(in srgb,var(--ok,#2E7D4F) 9%,transparent);
            font-size:max(13.4px,.88em);line-height:1.6}
.yoq-xulosa .ik{width:19px;height:19px;flex:none;color:var(--ok);margin-top:2px}
.yoq-xulosa b{color:var(--ink-900)}

@media (max-width:560px){
  .yoq-blok{padding:var(--s5) var(--s4) var(--s4)}
  .yoq-royxat li{flex-direction:column;gap:2px;min-height:44px}
}

/* ---------- 19.17 To'q lenta — sahifa ritmi -------------------------------
   Ilgari bosh sahifadagi hamma bo'lim krem fonda oq karta edi: ko'z
   ilashadigan joy yo'q, sahifa bir tekis o'qilardi. Bitta to'q bo'lim
   sahifaga umurtqa beradi va ko'zni "Daromad qanday shakllanadi"
   bo'limida to'xtatadi. */
.card.lenta-toq{background:linear-gradient(160deg,var(--toq-1) 0%,var(--toq-0,#2C1D1B) 100%);
                border-color:transparent;color:#F0E4DC}
.card.lenta-toq h2{color:#fff}
.card.lenta-toq h2 > .ik{color:var(--gold)}
.card.lenta-toq h3{color:#F7EFE8;font-size:max(14.6px,.96em)}
.card.lenta-toq h3 > .ik{color:var(--gold)}
.card.lenta-toq p,.card.lenta-toq .muted,.card.lenta-toq .sm{color:#D9C7BF}
.card.lenta-toq a:not(.btn){color:#EFD79C}
.card.lenta-toq .ik{color:inherit}
/* To'q fonda ajratuvchi chiziqlar ham to'q bo'lsin */
.card.lenta-toq hr,.card.lenta-toq .grid > * + *{border-color:rgba(255,255,255,.14)}


/* ---------- 19.18 Mahsulot sahifasida yopishqoq narx paneli ---------------
   Faqat telefonda. Pastki tab panel ustida turadi, shuning uchun uning
   balandligi hisobga olingan. Sahifa oxiridagi kontent panel ostida
   qolib ketmasligi uchun body ga qo'shimcha bo'shliq beriladi. */
.yopishqoq-narx{display:none}
@media (max-width:900px){
  .yopishqoq-narx{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    position:fixed;left:0;right:0;bottom:var(--tab-h,58px);z-index:var(--z-tab,100);
    padding:10px var(--chet,16px) calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--paper) 94%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(58,37,34,.07)}
  .yopishqoq-narx .yn-narx{min-width:0;line-height:1.25}
  .yopishqoq-narx .yn-narx b{display:block;font-size:19px;font-weight:800;
    color:var(--ink);font-variant-numeric:tabular-nums}
  .yopishqoq-narx .yn-narx span{display:block;font-size:11.6px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .yopishqoq-narx .btn{flex:none;min-height:40px}
  /* panel kontentni yopib qo'ymasin */
  body:has(.yopishqoq-narx){padding-bottom:72px}
}

/* ---------- 19.19 To'lov kartasi bloki ------------------------------------
   Mijoz buyurtmadan keyin shu blokdan raqamni ko'chiradi. Shuning uchun
   raqam katta, monoshrift va 4 talik guruhda — qo'lda terishda adashmaslik
   uchun. Nusxalash tugmasi qulaylik, lekin JSsiz ham raqam o'qiladi. */
.tolov-karta{margin:var(--s5) 0;padding:var(--s5);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);text-align:left}
.tk-bosh{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.tk-bosh > .ik{width:22px;height:22px;flex:none;color:var(--ui)}
.tk-bosh b{display:block;font-size:max(14.5px,.95em);color:var(--ink)}
.tk-bosh span{display:block;font-size:max(12.2px,.8em);color:var(--muted)}
/* DIQQAT: `.tk-bosh span` (0-1-1) bu qoidadan (0-1-0) kuchliroq va
   rangni --muted ga tushirib yuboradi (oltin fonda 4.18 — AA dan past).
   Shuning uchun tanlagich ataylab ota element bilan kuchaytirilgan. */
.tk-bosh .tk-turi,
.tk-turi{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-full);
  background:var(--gold-100,rgba(176,124,42,.12));color:var(--gold-ink)}

.tk-raqam{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4);border-radius:var(--r-sm);background:var(--surface-2);
  border:1px dashed var(--line);margin-bottom:var(--s3)}
.tk-raqam code{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:2px 10px;
  font-size:clamp(16.5px,4.4vw,21px);
  font-weight:800;letter-spacing:.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.tk-raqam code span{white-space:nowrap}   /* to'rtlik hech qachon uzilmaydi */
.tk-raqam .btn{flex:none}

.tk-qator{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);padding:7px 0;border-bottom:1px solid var(--line-2)}
.tk-qator:last-of-type{border-bottom:0}
.tk-qator span{font-size:max(12.4px,.82em);color:var(--muted)}
.tk-qator b{font-size:max(13.4px,.88em);color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.tk-summa b{color:var(--gold-ink);font-size:max(15px,.98em);font-weight:850}

.tk-izoh{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s4);
  padding:var(--s3);border-radius:var(--r-xs);background:var(--info-bg,rgba(143,187,214,.1));
  font-size:max(12.4px,.82em);color:var(--info-ink,var(--muted));line-height:1.5}
.tk-izoh .ik{width:16px;height:16px;flex:none;margin-top:1px}

@media (max-width:420px){
  .tk-raqam{flex-direction:column;align-items:stretch}
  .tk-raqam .btn{width:100%;justify-content:center}
}

/* ---------- 19.20 "Birinchi qadamlar" ro'yxati ----------------------------
   Yangi agent kabinetga kirganda birinchi ko'radigan narsa — raqam emas,
   keyingi aniq qadam. Bajarilgan qadam so'niq, keyingisi ajratilgan. */
.card.boshl{border-color:var(--gold-300,var(--gold))}
.bq-bosh{display:flex;align-items:flex-start;gap:var(--s4);justify-content:space-between}
.bq-bosh h2{margin:0}
.bq-bosh .sub{margin-top:3px;font-size:max(12.4px,.82em);color:var(--muted)}
.bq-son{flex:none;text-align:right;line-height:1.1}
.bq-son b{font-size:24px;font-weight:850;color:var(--gold-ink);
  font-variant-numeric:tabular-nums}
.bq-son span{font-size:12.5px;color:var(--muted)}

.bq-chiziq{height:7px;border-radius:var(--r-full);background:var(--line-2);
  overflow:hidden;margin:var(--s4) 0 var(--s5)}
.bq-chiziq i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold-300,#B07C2A),var(--gold));
  transition:width .6s var(--ease-out)}

.bq-royxat{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.bq-royxat li{display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2)}
.bq-royxat li.keyingi{border-color:var(--gold);background:var(--gold-100,rgba(176,124,42,.08))}
.bq-royxat li.tayyor{opacity:.58}

.bq-belgi{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center}
.bq-royxat li.tayyor .bq-belgi{background:var(--ok);border-color:var(--ok)}
.bq-royxat li.tayyor .bq-belgi .ik{width:12px;height:12px;color:#fff}
.bq-royxat li.keyingi .bq-belgi{border-color:var(--gold)}
/* Oltin fonda --muted 4.18 beradi — AA dan past. Oltin ustida matn
   HAR DOIM --gold-ink bo'ladi. */
.bq-royxat li.keyingi .bq-matn span{color:var(--gold-ink)}

.bq-matn{flex:1 1 auto;min-width:0}
.bq-matn b{display:block;font-size:max(13.6px,.9em);color:var(--ink);line-height:1.35}
.bq-matn span{display:block;margin-top:2px;font-size:max(12.2px,.8em);
  color:var(--muted);line-height:1.5}
.bq-royxat li.tayyor .bq-matn b{text-decoration:line-through;
  text-decoration-color:var(--line)}
.bq-royxat .btn{flex:none;align-self:center}

@media (max-width:560px){
  .bq-royxat li{flex-wrap:wrap}
  .bq-royxat .btn{width:100%;justify-content:center;margin-top:var(--s2)}
}

/* ---------- 19.21 Agentlikka taklif bloki --------------------------------
   Mijoz kartochkasida: tayyor matn va nusxalash. Matn maydoni o'qiladigan
   bo'lishi uchun alohida fon va biroz kattaroq qator oralig'i. */
.card.taklif{border-color:var(--gold-300,var(--gold))}
.taklif-matn{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px dashed var(--line)}
.taklif-matn p{margin:0 0 var(--s3);font-size:max(13.2px,.87em);
  line-height:1.65;color:var(--ink-700,var(--ink))}
.taklif-matn .btn{width:auto}
@media (max-width:560px){ .taklif-matn .btn{width:100%;justify-content:center} }

/* ---------- 19.22 Vitrinani shaxsiylashtirish (yig'iladigan panel) -------
   <details> ishlatilgan: JS o'chiq bo'lsa ham ochiladi-yopiladi.
   Vitrina bo'sh bo'lsa panel ochiq chiqadi — agent uni ko'rmay o'tmasin. */
.card.vitrina{padding:0}
.card.vitrina > summary{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);cursor:pointer;list-style:none;min-height:56px}
.card.vitrina > summary::-webkit-details-marker{display:none}
.card.vitrina > summary:focus-visible{outline:2px solid var(--ui);outline-offset:-2px;
  border-radius:var(--r-lg)}
.card.vitrina > summary > .ic{width:20px;height:20px;flex:none;color:var(--ui)}
.vit-sarl{display:flex;flex-direction:column;gap:1px;min-width:0}
.vit-sarl b{font-size:max(14.4px,.95em);color:var(--ink);line-height:1.25}
.vit-sarl span{font-size:max(12.2px,.8em);color:var(--muted);line-height:1.3}
.card.vitrina > summary::after{content:"";flex:none;width:8px;height:8px;
  margin-left:auto;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--ease)}
.card.vitrina[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.card.vitrina > form,
.card.vitrina > .alert{margin:0 var(--s5) var(--s5)}
.card.vitrina textarea{min-height:104px;resize:vertical;line-height:1.55}

/* Mahsulot tanlovi. Katakcha ko'rinmaydi — butun karta bosiladigan maydon,
   shuning uchun sensorli ekranda ham 44px dan katta. */
.sev-tanlov{display:grid;gap:var(--s2);margin-top:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(188px,1fr))}
.sev-kat{display:flex;align-items:center;gap:var(--s3);cursor:pointer;
  padding:9px 11px;min-height:48px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.sev-kat:hover{border-color:var(--ui)}
.sev-kat input{position:absolute;opacity:0;width:0;height:0}
.sev-belgi{flex:none;width:20px;height:20px;border-radius:6px;
  border:2px solid var(--muted);background:var(--paper);
  position:relative;transition:background .15s var(--ease),border-color .15s var(--ease)}
.sev-belgi::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--paper);border-width:0 2.5px 2.5px 0;transform:rotate(42deg) scale(.4);
  opacity:0;transition:opacity .12s var(--ease),transform .12s var(--ease)}
.sev-matn{display:flex;flex-direction:column;gap:1px;min-width:0}
.sev-matn b{font-size:13.2px;font-weight:700;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.sev-matn i{font-size:11.6px;font-style:normal;color:var(--faint);
  font-variant-numeric:tabular-nums}

/* Tanlangan holat: ramka + fon + belgi. Faqat rang bilan emas, shakl bilan ham
   farqlanadi — rang ko'rmaydigan foydalanuvchi uchun ham aniq. */
.sev-kat.on,
.sev-kat:has(input:checked){border-color:var(--ui);background:var(--cream)}
.sev-kat.on .sev-matn i,
.sev-kat:has(input:checked) .sev-matn i{color:var(--krem-ink)}
.sev-kat.on .sev-belgi,
.sev-kat:has(input:checked) .sev-belgi{background:var(--ui);border-color:var(--ui)}
.sev-kat.on .sev-belgi::after,
.sev-kat:has(input:checked) .sev-belgi::after{opacity:1;transform:rotate(42deg) scale(1)}
.sev-kat:focus-within{outline:2px solid var(--ui);outline-offset:2px}

@media (max-width:560px){
  .card.vitrina > summary{padding:var(--s4)}
  .card.vitrina > form,
  .card.vitrina > .alert{margin:0 var(--s4) var(--s4)}
  .sev-tanlov{grid-template-columns:1fr 1fr;gap:6px}
  .sev-kat{padding:8px 9px;gap:8px}
  .sev-matn b{font-size:12.6px}
}
@media (max-width:400px){
  .sev-tanlov{grid-template-columns:1fr}
}

/* ---------- 19.23 Bo'sh holat (<x-bosh>) ---------------------------------
   "Ma'lumot yo'q" — foydalanuvchini boshi berk ko'chada qoldirish. Har bir
   bo'sh ekran uch narsani beradi: nima bo'layotgani, nega bo'sh, keyingi
   qadam. Shuning uchun komponent sarlavha + matn + tugmadan iborat. */
.bosh-holat{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s3);padding:var(--s8) var(--s5);
  border:1px dashed var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);
}
.bosh-holat.kichik{padding:var(--s6) var(--s4);gap:var(--s2)}
.bosh-nishon{
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:var(--r-full);background:var(--surface-3);
  border:1px solid var(--line-2);color:var(--muted);
}
.bosh-holat.kichik .bosh-nishon{width:42px;height:42px}
.bosh-nishon svg,.bosh-nishon svg.ic{width:22px;height:22px}
.bosh-sarl{margin:0;font-weight:650;font-size:max(14.6px,.97em);color:var(--ink)}
.bosh-matn{margin:0;max-width:46ch;font-size:max(13px,.87em);line-height:1.6;
  color:var(--muted)}
.bosh-qoshimcha{width:100%;max-width:46ch}
.bosh-amal{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  margin-top:var(--s1)}
@media (max-width:560px){
  .bosh-holat{padding:var(--s6) var(--s4)}
  .bosh-amal{width:100%}
  .bosh-amal .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 19.24 Daraja narvoni ----------------------------------------
   Halqa foizni ko'rsatadi, ro'yxat esa butun yo'lni. Asosiy g'oya: ball
   emas, "≈ N ta buyurtma" — agent o'z ishiga bog'lay oladigan birlik. */
.nr-karta{overflow:hidden}
.nr-bosh{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.nr-halqa{width:150px;height:150px;flex:none;transform:rotate(-90deg)}
.nr-halqa .nr-fon{fill:none;stroke:var(--line);stroke-width:10}
.nr-halqa .nr-yoy{fill:none;stroke:var(--ui);stroke-width:10;
  transition:stroke-dasharray .8s var(--ease-out)}
.nr-halqa text{transform:rotate(90deg);transform-origin:60px 60px;
  text-anchor:middle;font-weight:700}
.nr-halqa .nr-foiz{font-size:26px;fill:var(--ink)}
.nr-halqa .nr-kichik{font-size:11px;font-weight:600;fill:var(--muted)}
.nr-matn{flex:1 1 280px;min-width:0}
.nr-xulosa{margin:0 0 var(--s3);font-size:max(14.4px,.96em);line-height:1.55;
  color:var(--ink)}
.nr-qator{display:flex;justify-content:space-between;gap:var(--s3);
  padding:7px 0;border-top:1px solid var(--line-2);font-size:max(13.2px,.88em)}
.nr-yorliq{color:var(--muted)}
.nr-qator b{color:var(--ink);white-space:nowrap}
.nr-qoldi{border-top-color:var(--line)}
.nr-qoldi b{color:var(--ui)}
.nr-qoida{margin:var(--s3) 0 0;font-size:max(12.4px,.82em);line-height:1.6;
  color:var(--muted)}

.nr-royxat{list-style:none;margin:var(--s4) 0 0;padding:0;
  display:flex;flex-direction:column;gap:2px}
.nr-royxat li{
  display:grid;align-items:center;gap:2px var(--s3);
  grid-template-columns:28px 1fr auto;
  padding:10px var(--s3);border-radius:var(--r-sm);
  border:1px solid transparent;
}
.nr-royxat li.joriy{background:var(--cream);border-color:var(--line)}
.nr-royxat li.keyingi{background:var(--gold-100);border-color:var(--gold-300)}
.nr-belgi{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;
  border-radius:var(--r-full);background:var(--surface-3);color:var(--faint)}
.nr-royxat li.bor .nr-belgi{background:var(--ok-bg);color:var(--ok)}
.nr-belgi svg,.nr-belgi svg.ic{width:14px;height:14px}
.nr-nom{font-weight:650;color:var(--ink);display:flex;align-items:center;
  gap:var(--s2);flex-wrap:wrap}
.nr-shart{color:var(--muted);font-size:max(12.6px,.84em);white-space:nowrap}
.nr-holat{grid-column:2;font-size:max(12.6px,.84em);color:var(--muted)}
.nr-foyda{grid-column:3;font-size:max(12.2px,.81em);color:var(--muted);
  white-space:nowrap}
.nr-royxat li.joriy .nr-holat,
.nr-royxat li.joriy .nr-shart,
.nr-royxat li.joriy .nr-foyda{color:var(--krem-ink)}
.nr-royxat li.keyingi .nr-holat,
.nr-royxat li.keyingi .nr-shart,
.nr-royxat li.keyingi .nr-foyda{color:var(--gold-ink)}
@media (max-width:620px){
  .nr-bosh{gap:var(--s4);justify-content:center}
  .nr-halqa{width:128px;height:128px}
  .nr-royxat li{grid-template-columns:28px 1fr}
  .nr-shart{grid-column:2;grid-row:2}
  .nr-holat{grid-row:3}
  .nr-foyda{grid-column:2;grid-row:4}
}

/* ---------- 19.25 Zaxira bozori -----------------------------------------
   Ikki tanlovli radio (ortib qoldi / kerak) va e'lonlar qatori. */
.zx-tanla{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.zx-tur{position:relative;display:block;cursor:pointer}
.zx-tur input{position:absolute;inset:0;opacity:0;cursor:pointer}
.zx-belgi{display:flex;flex-direction:column;gap:2px;
  padding:10px var(--s3);min-height:56px;justify-content:center;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);transition:border-color var(--t),background var(--t)}
.zx-belgi b{font-size:max(13.4px,.89em);color:var(--ink)}
.zx-belgi em{font-style:normal;font-size:max(12px,.8em);color:var(--muted)}
.zx-tur input:checked + .zx-belgi{border-color:var(--ui);background:var(--cream)}
.zx-tur input:checked + .zx-belgi em{color:var(--krem-ink)}
.zx-tur input:focus-visible + .zx-belgi{outline:2px solid var(--ui);outline-offset:2px}

.zx-qator{display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-top:1px solid var(--line-2)}
.zx-qator:first-of-type{border-top:0}
/* align-items:flex-start SHART: ustunli flexda bolalar sukut bo'yicha
   cho'ziladi va nishon (badge) butun qatorni egallab oladi. */
.zx-asos{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:4px}
.zx-asos b{color:var(--ink)}
.zx-sarl{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.zx-amal{flex:none;display:flex;gap:var(--s2);align-items:center}
@media (max-width:560px){
  .zx-tanla{grid-template-columns:1fr}
  .zx-amal{width:100%}
  .zx-amal .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- 19.26 Sovg'a sertifikatlari ---------------------------------
   Ro'yxat + chop etish varaqasi. Karta o'lchami 85x54 mm — bank kartasi
   bilan bir xil, shuning uchun hamyonga sig'adi. */
.srt-qator{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s4) 0;border-top:1px solid var(--line-2)}
.srt-qator:first-of-type{border-top:0}
.srt-kod{flex:0 0 190px;display:flex;flex-direction:column;gap:5px;
  align-items:flex-start}
.srt-kod .badge{align-self:flex-start}
.srt-kod .mono{font-size:max(14px,.93em);font-weight:700;color:var(--ink);
  letter-spacing:.04em}
.srt-info{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:3px}
.srt-sarl{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.srt-info b{color:var(--ink)}
.srt-amal{flex:none;display:flex;flex-direction:column;gap:var(--s2);
  align-items:flex-start}
.srt-sotish{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);padding:0}
.srt-sotish > summary{list-style:none;cursor:pointer}
.srt-sotish > summary::-webkit-details-marker{display:none}
.srt-sotish[open]{padding:var(--s3);width:min(320px,100%)}
.srt-sotish[open] > summary{margin-bottom:var(--s3)}

.srt-varaq{display:grid;grid-template-columns:repeat(2,1fr);gap:6mm}
/* Bosma karta ranglari QATTIQ yozilgan: u qog'ozga chiqadi, shuning uchun
   qorong'i rejimda ham oq qog'ozdek ko'rinishi kerak. --cream ishlatilsa,
   qorong'i rejimda fon #241A18 ga aylanib, ustidagi to'q matn 1.04 ga
   tushib ketadi (umuman o'qilmaydi). */
.srt-kart{
  border:1px dashed #C9B9A8;border-radius:var(--r-sm);
  padding:var(--s4);min-height:54mm;
  display:flex;flex-direction:column;gap:var(--s2);
  background:#F7F1E6;
}
.srt-kart-bosh{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s2)}
.srt-brend{font-weight:800;letter-spacing:.08em;color:#4A2E2A;
  font-size:max(13px,.87em)}
.srt-tur{font-size:max(11.6px,.78em);color:#6E5A54}
.srt-kart-nominal{font-size:28px;font-weight:800;color:#3A2522;
  line-height:1.1}
.srt-kart-kod{font-size:19px;font-weight:700;letter-spacing:.1em;
  color:#4A2E2A;padding:7px 0;border-top:1px solid #DCCDBB;
  border-bottom:1px solid #DCCDBB}
.srt-kart-oyoq{display:flex;justify-content:space-between;gap:var(--s2);
  font-size:max(11.4px,.76em);color:#6E5A54}
.srt-kart-qoida{margin:0;font-size:max(10.8px,.72em);line-height:1.45;
  color:#6E5A54}
@media (max-width:680px){
  .srt-varaq{grid-template-columns:1fr}
  .srt-kod{flex:1 1 100%}
  .srt-amal{flex-direction:row;flex-wrap:wrap;width:100%}
}
@media print{
  .no-print,.menyu,.tab-panel,.pwa-lenta,.site-oyoq{display:none !important}
  body{background:#fff}
  .srt-varaq{gap:4mm}
  .srt-kart{break-inside:avoid;background:#fff;border-color:#999}
  .srt-brend,.srt-kart-nominal,.srt-kart-kod{color:#000}
  .srt-tur,.srt-kart-oyoq,.srt-kart-qoida{color:#444}
}

/* ---------- 19.27 Mahalla nuqtalari -------------------------------------- */
.mh-qator{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s4) 0;border-top:1px solid var(--line-2)}
.mh-qator:first-of-type{border-top:0}
.mh-asos{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:4px}
.mh-sarl{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.mh-asos b{color:var(--ink)}
.mh-amal{flex:none;display:flex;gap:var(--s2);align-items:flex-start;
  flex-wrap:wrap}
.mh-tanlov{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2)}
.mh-tanlov > summary{list-style:none;cursor:pointer}
.mh-tanlov > summary::-webkit-details-marker{display:none}
.mh-tanlov[open]{padding:var(--s3);width:min(380px,100%)}
.mh-tanlov[open] > summary{margin-bottom:var(--s3)}
.mh-kart{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer}
.mh-kart:has(input:checked){border-color:var(--ui);background:var(--cream)}
@media (max-width:560px){
  .mh-amal{width:100%}
  .mh-amal > form{flex:1 1 auto}
  .mh-amal .btn{width:100%;justify-content:center}
}

/* ---------- 19.28 Bo'sh qadoq qaytarish ---------------------------------
   Mijoz kartochkasidagi panel: nechta topshirgan, nechta kupon, keyingi
   kuponga qancha qolgan. Chiziq to'lishi odamni oxiriga yetkazadi. */
.qd-karta{border-color:var(--ok-line)}
.qd-holat{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3)}
.qd-raqam{font-size:30px;font-weight:800;color:var(--ok-ink);line-height:1}
.qd-chiziq{height:10px;border-radius:var(--r-full);background:var(--surface-3);
  overflow:hidden;border:1px solid var(--line-2)}
.qd-chiziq span{display:block;height:100%;background:var(--ok);
  transition:width .6s var(--ease-out)}
.qd-shakl{display:flex;gap:var(--s2);align-items:flex-end;flex-wrap:wrap;
  margin-top:var(--s4)}
/* Yorliq butun qatorni egallaydi, boshqaruvlar esa ostida bir qatorda:
   [ 1 ] ta  [Qabul qilindi]. Ilgari yorliq maydon kengligini belgilab,
   maydon bilan tugma orasida sababsiz bo'shliq qolardi. */
.qd-shakl .fld{flex:1 1 100%}
.qd-shakl .fld label{white-space:normal}
.qd-shakl .birlik > .btn{margin-left:var(--s2)}
.qd-tarix{list-style:none;margin:var(--s4) 0 0;padding:0;
  display:flex;flex-direction:column;gap:4px;
  font-size:max(12.6px,.84em);color:var(--muted)}
.qd-tarix li{display:flex;justify-content:space-between;gap:var(--s3);
  padding-top:4px;border-top:1px solid var(--line-3)}
@media (max-width:560px){
  .qd-shakl .fld{flex:1 1 100%}
  .qd-shakl .btn{width:100%;justify-content:center}
}

/* ---------- 19.29 Til almashtirgich -------------------------------------
   Faqat ommaviy sahifalarda. Kabinet va boshqaruv paneli o'zbekcha
   qoladi — noto'g'ri tarjima qilingan tugma noto'g'ri bosiladi. */
.til-tanla{display:inline-flex;gap:2px;padding:3px;
  border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface-2)}
.til-tanla > svg,.til-tanla > svg.ic{width:15px;height:15px;flex:none;
  align-self:center;margin-left:7px;color:var(--faint)}
.til-tanla a,.til-tanla .on{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:36px;padding:0 12px;
  border-radius:var(--r-full);
  font-size:max(12.6px,.84em);font-weight:650;letter-spacing:.03em;
  text-decoration:none;
  transition:background var(--t),color var(--t);
}
.til-tanla a{color:var(--muted)}
.til-tanla a:hover{color:var(--ui);background:var(--rose-50)}
/* Tanlangan til: to'q yuzada DOIMIY ochiq matn. --paper qorong'i rejimda
   qorayib ketadi va 1.31 kontrast beradi, shuning uchun qo'lda yozilgan.
   Belgi <span> — havola emas, shuning uchun .on tanlagichi element
   turiga bog'lanmaydi. */
.til-tanla .on{background:var(--toq-2);color:#F7ECE9;cursor:default}
.til-tanla a:focus-visible{outline:2px solid var(--ui);outline-offset:2px}

/* Ulashish sahifasida to'q kartochka ichidagi ajratgich. .yoq-blok bu
   yerda fon bilan qo'shilib ketgan edi (1.13) — alohida chegara. */
.uls-chegara{list-style:none;margin:var(--s4) 0 0;padding:var(--s4) 0 0;
  border-top:1px solid rgba(247,236,233,.22);display:grid;gap:var(--s3)}
.uls-chegara li{position:relative;padding-left:24px;
  font-size:max(13.2px,.88em);line-height:1.55;color:#E8D8D1}
.uls-chegara li::before{content:"";position:absolute;left:3px;top:.52em;
  width:11px;height:11px;border-radius:50%;
  border:2px solid #E6938A;background:transparent}
.uls-chegara li::after{content:"";position:absolute;left:6.5px;top:calc(.52em + 4.5px);
  width:8px;height:2px;border-radius:1px;background:#E6938A;
  transform:rotate(-45deg);transform-origin:left center}

/* ═══════════════════════════════════════════════════════════════════
   BILDIRISHNOMALAR

   Agentning xabar ro'yxati. Har bir qator —
   bosiladigan karta: chapda tur belgisi, o'ngda sarlavha, matn va vaqt.
   O'qilmaganlari chapdan oltin chiziq va sarlavha yonidagi nuqta bilan
   ajralib turadi — rang bilan emas, chunki rang ko'r-ko'rona signal.
   ═══════════════════════════════════════════════════════════════════ */
.bld{display:flex;gap:var(--s3);align-items:flex-start;
  margin-bottom:var(--s2);text-decoration:none;color:inherit;
  border-left:3px solid transparent;transition:border-color .15s,transform .15s}
.bld:hover{transform:translateX(2px);border-left-color:var(--gold-300)}
.bld.yangi{border-left-color:var(--gold);background:var(--gold-100)}

.bld-b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:var(--cream);color:var(--ink-2);margin-top:1px}
.bld.yangi .bld-b{background:var(--gold);color:var(--gold-ink)}

.bld-ic{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}

.bld-s{font-weight:650;font-size:14.5px;line-height:1.35;
  display:flex;align-items:center;gap:7px}
.bld-m{font-size:13.5px;line-height:1.5;color:var(--ink-2);
  overflow-wrap:anywhere;white-space:pre-line}
.bld-v{font-size:12px;color:var(--kul,#8A7A72);letter-spacing:.01em}

.nuqta{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--gold);display:inline-block}

/* Yon menyudagi o'qilmaganlar sanog'i */
.nav-son{display:inline-grid;place-items:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:6px;border-radius:9px;
  background:var(--gold);color:var(--gold-ink);
  font-size:11px;font-weight:700;line-height:1;vertical-align:middle}

/* ═══════════════════════════════════════════════════════════════════
   XABAR LENTASI — sayt ochiq turganda yangi xabar kelsa
   Pastdan chiqadi, 7 soniyada o'zi ketadi. Bosilsa xabarlar ochiladi.
   ═══════════════════════════════════════════════════════════════════ */
.xabar-lenta{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  transform:translate(-50%,120%);z-index:70;
  display:flex;gap:10px;align-items:center;
  max-width:min(420px,calc(100vw - 2*var(--chet)));
  padding:12px var(--s4);border-radius:14px;
  background:var(--ink-900);color:#F7ECE9;text-decoration:none;
  box-shadow:0 8px 28px rgba(58,37,34,.3);
  opacity:0;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s}
.xabar-lenta.ochiq{transform:translate(-50%,0);opacity:1}
.xl-b{flex:0 0 auto;color:var(--gold-300);font-size:11px;line-height:1}
.xl-m{display:flex;flex-direction:column;gap:1px;min-width:0}
.xl-m b{font-size:14px;font-weight:650}
.xl-m span{font-size:13px;opacity:.82;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Pastki panel bor ekranlarda lenta undan tepada tursin */
@media (max-width:1100px){
  .xabar-lenta{bottom:calc(var(--s10) + var(--s2) + env(safe-area-inset-bottom))}
}

/* ═══ BUGUN NIMA QILAY? ═══ */
.bugun{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s5);box-shadow:var(--sh-sm)}
.bugun-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.bugun-h h2{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.bugun-son{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--gold-100);color:var(--gold-ink);font-size:12.5px;font-weight:800}
.bugun-list{display:flex;flex-direction:column;gap:var(--s2)}
.bugun-k{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s3);border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-2)}
.bugun-k.tez{background:var(--warn-bg);border-color:var(--warn-line)}
.bugun-ic{flex:none;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.bugun-ic svg{width:17px;height:17px}
.bugun-k.tez .bugun-ic{background:#fff;border-color:var(--warn-line);color:var(--warn-ink)}
.bugun-m{flex:1 1 auto;min-width:0}
.bugun-m h3{margin:0;font-size:13.8px;font-weight:700;color:var(--ink-900);line-height:1.3}
.bugun-m p{margin:2px 0 0;font-size:12.6px;color:var(--ink-2);line-height:1.45}
.bugun-k.tez .bugun-m h3,.bugun-k.tez .bugun-m p{color:var(--warn-ink)}
.bugun-k .btn{flex:none}
@media (max-width:560px){.bugun{padding:var(--s4)}.bugun-k{flex-wrap:wrap}.bugun-m{flex:1 1 100%;order:2}.bugun-k .btn{order:3;margin-left:auto}}

/* ═══ PUSH BILDIRISHNOMALAR ═══
   Belgilar cabinet/bildirishnomalar.blade.php dagi aniq nomlarga mos:
   .push-h > .push-ic + .push-m + .push-tugmalar, .push-qurilma > .push-royxat */
#push-boshqaruv{padding:var(--s4) var(--s5)}
.push-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.push-ic{flex:none;width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--gold-100);color:var(--gold-ink)}
.push-ic svg{width:19px;height:19px}
.push-m{flex:1 1 220px;min-width:0}
.push-m h2{margin:0 0 3px;font-size:15px;font-weight:700;color:var(--ink-900);line-height:1.3}
.push-tugmalar{flex:none;display:flex;gap:var(--s2);flex-wrap:wrap}
.push-holat{margin:0;display:inline-flex;align-items:center;gap:6px;font-size:12.6px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--surface-3);color:var(--muted)}
.push-holat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.push-holat.bor{background:var(--ok-bg);color:var(--ok-ink)}
.push-holat.yoq{background:var(--surface-3);color:var(--muted)}
.push-qurilma{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-2)}
.push-qurilma>summary{list-style:none;display:inline-flex;cursor:pointer}
.push-qurilma>summary::-webkit-details-marker{display:none}
.push-royxat{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.push-royxat li{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);border-radius:var(--r-xs);background:var(--surface-2);border:1px solid var(--line-2)}
.push-royxat li>div{flex:1 1 auto;min-width:0}
.push-royxat li b{display:block;font-size:13.2px;font-weight:650;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.push-royxat li span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.push-royxat li form{flex:none}
@media (max-width:560px){.push-h{align-items:flex-start}.push-tugmalar{width:100%}.push-tugmalar .btn{flex:1 1 auto}}

/* ═══ Kichik yordamchi belgilar ═══ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.err-ink{color:var(--err-ink) !important}
h2.h3,.h3{font-size:15px !important;font-weight:700;letter-spacing:0;display:flex;align-items:center;gap:7px}
.h3 svg{width:16px;height:16px;opacity:.8}
.note.huq-til{font-size:12.6px;line-height:1.6}
.btn.nusxa{white-space:nowrap}
ul.tick{list-style:none;margin:0 0 var(--s3);padding:0;display:flex;flex-direction:column;gap:7px}
ul.tick>li{position:relative;padding-left:24px;font-size:14px;line-height:1.6;color:var(--ink-2)}
ul.tick>li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ok);font-weight:800}
ul.tick.sm>li{font-size:13px;padding-left:21px}
.sf-sev-item{font-size:13px;line-height:1.6;color:var(--ink-2)}
.sf-sev-item b{color:var(--ink-900);font-weight:700;margin-right:5px}
.card.tn-natija{border-color:var(--gold-300);background:var(--cream)}

/* ═══ Admin xabar tarixi ═══ */
.xt{padding:var(--s3) 0;border-bottom:1px solid var(--line-2)}
.xt:last-of-type{border-bottom:0}
.xt-h{display:flex;align-items:flex-start;gap:var(--s2);justify-content:space-between}
.xt-h b{font-size:14px;font-weight:700;color:var(--ink-900);line-height:1.35}
.xt-m{margin:4px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.xt-f{margin-top:6px;font-size:12px;color:var(--muted)}

/* ═══ MIJOZ BUYURTMANI KUZATADI ═══ */
.kuz-tor{max-width:620px;margin:0 auto}
.kuz-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.kuz-h h2{margin:0;font-size:17px;font-weight:700;letter-spacing:.02em}
.kuz-yol{list-style:none;margin:0;padding:0;position:relative}
.kuz-b{display:flex;gap:var(--s3);padding-bottom:var(--s5);position:relative}
.kuz-b:last-child{padding-bottom:0}
.kuz-b:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:4px;width:2px;background:var(--line);border-radius:1px}
.kuz-b.otdi:not(:last-child)::before{background:var(--ok)}
.kuz-nuqta{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;z-index:1;background:var(--surface);border:2px solid var(--line);color:transparent}
.kuz-nuqta svg{width:14px;height:14px}
.kuz-b.otdi .kuz-nuqta{background:var(--ok);border-color:var(--ok);color:#fff}
.kuz-b.hozir .kuz-nuqta{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-100)}
.kuz-b.bekor .kuz-nuqta{background:var(--err);border-color:var(--err);color:#fff}
.kuz-m{flex:1 1 auto;min-width:0;padding-top:2px}
.kuz-m b{display:block;font-size:14.5px;font-weight:700;color:var(--ink-900);line-height:1.35}
.kuz-b.kutilmoqda .kuz-m b{color:var(--muted);font-weight:600}
.kuz-m p{margin:3px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.kuz-b.kutilmoqda .kuz-m p{color:var(--faint)}
.kuz-m time{display:block;margin-top:4px;font-size:12px;color:var(--muted)}

/* ═══ IKKI BOSQICHLI HIMOYA ═══ */
.ikki-tor{max-width:560px;margin:0 auto}
.ikki-bosh{text-align:center;margin-bottom:var(--s5)}
.ikki-bosh h1{margin:var(--s3) 0 var(--s2);font-size:20px}
.ikki-bosh p{margin:0}
.ikki-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:var(--gold-100);color:var(--gold-ink)}
.ikki-ic svg{width:26px;height:26px}
.ikki-holat{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.ikki-holat h2{margin:0 0 2px;font-size:16px}
.ikki-holat p{margin:0}
.ikki-holat .ikki-ic{background:var(--ok-bg);color:var(--ok-ink)}
.qadam{list-style:none;counter-reset:q;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s5)}
.qadam>li{counter-increment:q;position:relative;padding-left:40px}
.qadam>li::before{content:counter(q);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink-900);color:#fff;font-size:13px;font-weight:700}
.qadam>li>b{display:block;font-size:14.5px;color:var(--ink-900);margin-bottom:4px;line-height:1.4}
.qadam .hint{display:block}
.qr-quti{margin:var(--s3) 0;padding:var(--s3);display:inline-block;background:#fff;border:1px solid var(--line);border-radius:var(--r);line-height:0}
.qr-quti svg{display:block;width:220px;height:220px}
.sir-kalit{margin-top:var(--s2);padding:10px var(--s3);border-radius:var(--r-sm);background:var(--surface-3);border:1px dashed var(--line);font-size:14px;letter-spacing:.14em;word-break:break-all;color:var(--ink-900)}
.kod-kiritish{font-size:21px !important;letter-spacing:.34em;text-align:center}
.zaxira-karta{border-color:var(--warn-line);background:var(--warn-bg)}
.zaxira-karta h2{color:var(--warn-ink)}
.zaxira-royxat{list-style:none;margin:var(--s4) 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.zaxira-royxat li{padding:9px var(--s3);border-radius:var(--r-sm);background:#fff;border:1px solid var(--warn-line);font-size:15px;letter-spacing:.06em;text-align:center;color:var(--ink-900)}
@media (max-width:520px){.zaxira-royxat{grid-template-columns:1fr}.qr-quti svg{width:min(220px,62vw);height:auto}}
@media print{.zaxira-karta{border:2px solid #000;background:#fff}}

/* ═══ VILOYATLAR XARITASI ═══ */
.xarita-orash{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--s2)}
.xarita{display:grid;grid-template-columns:repeat(10,minmax(78px,1fr));grid-auto-rows:62px;gap:5px;min-width:820px}
.vil{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:7px 9px;border-radius:var(--r-sm);border:1px solid var(--line);text-decoration:none;transition:transform .14s ease,box-shadow .14s ease;overflow:hidden}
.vil:hover{transform:translateY(-2px);box-shadow:var(--sh-sm);border-color:var(--gold-300)}
.vil:target,.vil:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.vil b{font-size:12px;font-weight:700;color:var(--ink-900);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vil span{font-size:11px;color:var(--ink-2);line-height:1.3}
.vil.bosh{border-style:dashed}
.vil.bosh b,.vil.bosh span{color:var(--muted)}
.xarita-izoh{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);font-size:12px;color:var(--muted)}
.xi{display:inline-flex;align-items:center;gap:6px}
.xi i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);display:inline-block}
tr:target td{background:var(--gold-100)}
@media (max-width:620px){.xarita{grid-auto-rows:56px}}

/* ═══ ALOQASIZ BUYURTMA LENTASI ═══ */
.oflayn-lenta{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom));transform:translate(-50%,130%);z-index:72;max-width:min(440px,calc(100vw - 2*var(--chet)));padding:12px var(--s4);border-radius:14px;background:var(--ink-900);color:#F7ECE9;font-size:13.5px;line-height:1.5;box-shadow:0 8px 28px rgba(58,37,34,.3);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s}
.oflayn-lenta.ochiq{transform:translate(-50%,0);opacity:1}
.oflayn-lenta.saqlandi{background:var(--ok-ink)}
.oflayn-lenta.xato{background:var(--err-ink)}
@media (max-width:1100px){.oflayn-lenta{bottom:calc(var(--s10) + var(--s2) + env(safe-area-inset-bottom))}}

/* ═══ QO'LLANMALAR ═══ */
.qol{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--s6);align-items:start}
.qol-yon{position:sticky;top:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);box-shadow:var(--sh-sm)}
.qol-yon-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:4px var(--s2) var(--s2)}
.qol-yon ol{list-style:none;margin:0;padding:0;counter-reset:qy}
.qol-yon li{counter-increment:qy}
.qol-yon a{display:flex;align-items:center;gap:9px;padding:9px var(--s2);border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;line-height:1.3}
.qol-yon a:hover{background:var(--surface-2);color:var(--ink-900)}
.qol-yon a.on{background:var(--gold-100);color:var(--gold-ink);font-weight:750}
.qol-yon svg{width:16px;height:16px;flex:none;opacity:.75}
.qol-yon a.on svg{opacity:1}
.qol-yon span{min-width:0}
.qol-matn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s6);box-shadow:var(--sh-sm);max-width:72ch}
.qol-qadam{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--s2)}
.qol-matn h2{margin:0 0 var(--s4);font-size:23px;line-height:1.25;color:var(--ink-900);letter-spacing:-.01em}
.qol-matn h3{margin:var(--s7) 0 var(--s3);font-size:16.5px;color:var(--ink-900);line-height:1.3}
.qol-matn h4{margin:0 0 var(--s2);font-size:14.5px;color:var(--ink-900)}
.qol-matn p{margin:0 0 var(--s3);font-size:14.6px;line-height:1.72;color:var(--ink-2)}
.qol-matn ul,.qol-matn ol{margin:0 0 var(--s4);padding-left:1.35em}
.qol-matn li{font-size:14.4px;line-height:1.68;color:var(--ink-2);margin-bottom:7px}
.qol-matn li>b{color:var(--ink-900)}
.qol-matn a{color:var(--ui);font-weight:650}
.qol-matn .note,.qol-matn .alert{margin:var(--s4) 0}
.qol-matn .tw{margin:0 0 var(--s4)}
.qol-matn code{font-size:12.8px;padding:2px 6px;border-radius:5px;background:var(--surface-3);color:var(--ink-900)}
.qol-kirish{font-size:15.6px !important;line-height:1.75 !important;color:var(--ink) !important;padding-bottom:var(--s3);border-bottom:1px solid var(--line-2)}
.qol-matn blockquote{margin:var(--s4) 0;padding:var(--s3) var(--s4);border-left:3px solid var(--gold-300);background:var(--cream);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14.6px;line-height:1.7;color:var(--ink-900);font-style:italic}
.qol-matn blockquote p{margin:0;color:inherit;font-size:inherit}
.qol-matn blockquote p+p{margin-top:var(--s2)}
.qol-tartib{list-style:none !important;counter-reset:qt;padding-left:0 !important}
.qol-tartib>li{counter-increment:qt;position:relative;padding-left:34px;margin-bottom:var(--s3)}
.qol-tartib>li::before{content:counter(qt);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--gold-100);color:var(--gold-ink);font-size:12px;font-weight:800}
.qol-ha,.qol-yoq{list-style:none !important;padding-left:0 !important}
.qol-ha>li,.qol-yoq>li{position:relative;padding-left:28px;margin-bottom:9px}
.qol-ha>li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ok);font-weight:800;font-size:15px}
.qol-yoq>li::before{content:"\2715";position:absolute;left:0;top:0;color:var(--err);font-weight:800;font-size:14px}
.qol-mahsulot{margin:0 0 var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.qol-mahsulot p{margin:0 0 6px;font-size:13.8px}
.qol-mahsulot p:last-child{margin-bottom:0}
.qol-muhim{padding:10px var(--s3) !important;border-radius:var(--r-sm);background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink) !important;font-size:13.6px !important}
.qol-taqqos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:0 0 var(--s4)}
.qol-yaxshi,.qol-yomon{padding:var(--s4);border-radius:var(--r-sm);border:1px solid}
.qol-yaxshi{background:var(--ok-bg);border-color:var(--ok-line)}
.qol-yomon{background:var(--err-bg);border-color:var(--err-line)}
.qol-yaxshi h4{color:var(--ok-ink)}
.qol-yomon h4{color:var(--err-ink)}
.qol-taqqos p,.qol-taqqos li{font-size:13.5px;margin-bottom:6px}
.qol-taqqos ul{margin:0;padding-left:1.2em}
.qol-natija{margin:var(--s6) 0 0;padding:var(--s4) var(--s5);border-radius:var(--r-md);background:var(--gold-100);border:1px solid var(--gold-300)}
.qol-natija h4{color:var(--gold-ink);margin-bottom:var(--s3)}
.qol-natija ul{margin:0;padding-left:1.25em}
.qol-natija li{color:var(--gold-ink);font-size:14px}
.qol-savol{margin:0 0 var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden}
.qol-savol>summary{padding:12px var(--s4);cursor:pointer;font-size:14.2px;font-weight:650;color:var(--ink-900);list-style:none;position:relative;padding-right:40px}
.qol-savol>summary::-webkit-details-marker{display:none}
.qol-savol>summary::after{content:"+";position:absolute;right:var(--s4);top:11px;font-size:19px;font-weight:400;color:var(--muted);line-height:1}
.qol-savol[open]>summary::after{content:"\2013"}
.qol-savol>summary:hover{background:var(--surface-3)}
.qol-savol p{margin:0;padding:0 var(--s4) var(--s4);font-size:13.9px}
.qol-jami td{border-top:1.5px solid var(--line-3) !important;padding-top:11px !important}
.qol-foyda td{color:var(--ok-ink)}
.qol-kod{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--toq-0);color:#E8DFD2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.6px;line-height:1.65;overflow-x:auto;white-space:pre}
.qol-oyoq{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line-2);flex-wrap:wrap}
@media (max-width:900px){.qol{grid-template-columns:1fr;gap:var(--s4)}.qol-yon{position:static}.qol-yon ol{display:grid;grid-template-columns:1fr 1fr;gap:2px}.qol-matn{padding:var(--s4)}.qol-matn h2{font-size:20px}.qol-taqqos{grid-template-columns:1fr}}
@media (max-width:520px){.qol-yon ol{grid-template-columns:1fr}}
@media print{.qol{grid-template-columns:1fr}.qol-yon,.qol-oyoq{display:none !important}.qol-matn{border:0;box-shadow:none;padding:0;max-width:none}.qol-savol{break-inside:avoid}.qol-savol>summary::after{display:none}}

/* ═══ OYLIK HISOBOT (chop etish uchun alohida sahifa) ═══
   Ranglar ataylab qotirilgan: qog'oz doim oq, qorong'i rejim
   hisobotni o'qib bo'lmaydigan qilib qo'ymasligi kerak. */
.hisobot-sahifa{background:#fff;margin:0;padding:24px;color:#2B2B2B;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hisobot-sahifa .varaq{max-width:760px;margin:0 auto}
.hisobot-sahifa .h-bosh{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:16px;border-bottom:2px solid #B07C2A;margin-bottom:20px}
.hisobot-sahifa .h-brend{font-size:20px;font-weight:800;letter-spacing:.06em;color:#3A2522}
.hisobot-sahifa .h-brend small{display:block;font-size:11px;font-weight:500;letter-spacing:.02em;color:#6E4A46;margin-top:2px;text-transform:none}
.hisobot-sahifa .h-davr{text-align:right;font-size:13px;color:#6E4A46;line-height:1.6}
.hisobot-sahifa .h-davr b{display:block;font-size:16px;color:#3A2522}
.hisobot-sahifa .h-kim{background:#F9F5F0;border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:13px;line-height:1.7;color:#4A2C29}
.hisobot-sahifa .h-kim b{color:#3A2522}
.hisobot-sahifa .h-jami{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.hisobot-sahifa .h-j{border:1px solid #E8DFD2;border-radius:10px;padding:12px 14px}
.hisobot-sahifa .h-j .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#846761}
.hisobot-sahifa .h-j .v{font-size:19px;font-weight:800;color:#3A2522;margin-top:3px}
.hisobot-sahifa .h-j.asosiy{background:#FDF8EE;border-color:#D9B978}
.hisobot-sahifa .h-j.asosiy .v{color:#6B4C06}
.hisobot-sahifa h2.h-b{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:#846761;margin:22px 0 8px;font-weight:700}
.hisobot-sahifa .tw{overflow-x:auto;margin:0}
.hisobot-sahifa table.h-t{width:100%;border-collapse:collapse;font-size:12.5px}
.hisobot-sahifa table.h-t th{text-align:left;padding:7px 8px;border-bottom:1.5px solid #D8CCBC;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#846761;font-weight:700}
.hisobot-sahifa table.h-t td{padding:7px 8px;border-bottom:1px solid #EFE8DE;color:#3A2522}
.hisobot-sahifa table.h-t .r{text-align:right;white-space:nowrap}
.hisobot-sahifa table.h-t tfoot td{border-top:1.5px solid #D8CCBC;border-bottom:0;font-weight:800;padding-top:9px}
.hisobot-sahifa .bosh-qator td{color:#846761;font-style:italic;text-align:center;padding:16px}
.hisobot-sahifa .h-tolov{margin-top:22px;border:1px solid #E8DFD2;border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.7}
.hisobot-sahifa .h-tolov.tolandi{background:#EDF6F0;border-color:#C3E0CE;color:#1F4E31}
.hisobot-sahifa .h-tolov.kutilmoqda{background:#FDF5E3;border-color:#EBD6A4;color:#6B4C06}
.hisobot-sahifa .h-oyoq{margin-top:26px;padding-top:14px;border-top:1px solid #E8DFD2;font-size:11px;color:#846761;line-height:1.7}
.hisobot-sahifa .chop-tugma{position:fixed;right:20px;bottom:20px;display:flex;gap:8px;z-index:9}
.hisobot-sahifa .chop-tugma button,.hisobot-sahifa .chop-tugma a{font:inherit;font-size:14px;font-weight:650;padding:11px 18px;border-radius:999px;border:1px solid #D8CCBC;cursor:pointer;text-decoration:none;background:#fff;color:#3A2522;box-shadow:0 4px 14px rgba(58,37,34,.14)}
.hisobot-sahifa .chop-tugma button{background:#3A2522;color:#fff;border-color:#3A2522}
@media (max-width:620px){.hisobot-sahifa .h-jami{grid-template-columns:1fr}.hisobot-sahifa .h-bosh{flex-direction:column;gap:10px}.hisobot-sahifa .h-davr{text-align:left}}
@media print{.hisobot-sahifa{padding:0}.hisobot-sahifa .chop-tugma{display:none !important}.hisobot-sahifa .h-j,.hisobot-sahifa .h-kim,.hisobot-sahifa .h-tolov{break-inside:avoid}.hisobot-sahifa .tw{overflow:visible}.hisobot-sahifa table.h-t tr{break-inside:avoid}}

/* Chop etishda varaq chekkasi */
@page{margin:14mm}