/* ==========================================================================
   ⚠ AVTOMATIK YIG'ILGAN FAYL — QO'LDA TAHRIRLAMANG.

   Manba:  packages/tokens/ekassam-tokens.css
           packages/motion/ek-motion.css
           packages/ui/ek-components.css
           e-kassam-main/landing.css      ← landing uslublari shu yerda

   Qayta yig'ish:  pwsh -File packages/sync-tokens.ps1

   Nega bitta fayl: @import zanjiri deploy'da uzilsa (masalan styles/ papkasi
   commit qilinmasa) sahifa butunlay ranglarsiz va shriftsiz qoladi. Bitta
   fayl bunday xatoni imkonsiz qiladi va uchta render-blocking so'rovni
   yo'qotadi.
   ========================================================================== */


/* ═══ 1/6 — TOKENLAR ═══════════════════════════════════════════════ */

/* ==========================================================================
   ⚠ 1–215 QATORLAR — BREND TO'PLAMIDAN O'ZGARISHSIZ OLINGAN.
   Brend to'plami yangilanganda shu qism butunlay almashtiriladi, shuning
   uchun bu yerga hech narsa qo'shilmaydi. Loyihaga kerak bo'lgan qo'shimcha
   aliaslar fayl OXIRIDAGI "LOYIHA KENGAYTMASI" bo'limida.
   ========================================================================== */

/* ==========================================================================
   e-Kassam Design System — Tokens v1.0
   Yagona manba (single source of truth): web, mobil va desktop uchun.
   Import: @import url("ekassam-tokens.css");
   ========================================================================== */

/* --- 1. FONTLAR ----------------------------------------------------------
   Manrope   → sarlavhalar, brend (Lotin + Kirill + Lotin Ext = oʻzbekcha OK)
   Inter     → interfeys matni (eng zich maʼlumot uchun eng oʻqiluvchan)
   JetBrains Mono → PUL, MIQDOR, BARKOD, CHEK, VAQT (tabular figures)
   -------------------------------------------------------------------------- */
/* Shriftlar index.html dagi <link> orqali yuklanadi (parallel, tezroq). */

:root {
  /* ===== BRAND: E-Kassam Blue (asosiy) ===== */
  --ek-blue-50:  #EAF2FE;
  --ek-blue-100: #D3E4FD;
  --ek-blue-200: #A9C9FA;
  --ek-blue-300: #77A9F5;
  --ek-blue-400: #4187EB;
  --ek-blue-500: #1F6FE0;
  --ek-blue-600: #1663D8;   /* BRAND PRIMARY — #1663D8 */
  --ek-blue-700: #0F4EB3;
  --ek-blue-800: #0E3F92;
  --ek-blue-900: #103676;
  --ek-blue-950: #0A2049;

  /* ===== ACCENT: Som Gold (pul, jami, muhim urgʻu) ===== */
  --ek-green-50:  #E9F9EF;
  --ek-green-100: #CDF1DA;
  --ek-green-200: #9EE3B8;
  --ek-green-300: #63D08F;
  --ek-green-400: #35C863;   /* ACCENT */
  --ek-green-500: #23B851;
  --ek-green-600: #1FAE4C;
  --ek-green-700: #16883A;

  /* ===== NEUTRAL: Ink (sovuq kulrang — maʼlumot zich UI uchun) ===== */
  --ek-ink-0:   #FFFFFF;
  --ek-ink-25:  #FBFCFE;
  --ek-ink-50:  #F6F8FB;
  --ek-ink-100: #EDF0F5;
  --ek-ink-200: #DDE2EB;
  --ek-ink-300: #C3CBD9;
  --ek-ink-400: #93A0B5;
  --ek-ink-500: #6A788F;
  --ek-ink-600: #4E5B71;
  --ek-ink-700: #3A4557;
  --ek-ink-800: #212C3D;
  --ek-ink-900: #131D2C;
  --ek-ink-950: #0B1524;   /* INK — brendning qora rangi */

  /* ===== SEMANTIC ===== */
  --ek-success-50:  #E9F9EF;  --ek-success-500: #23B851;  --ek-success-600: #1FAE4C;  --ek-success-700: #16883A;
  --ek-danger-50:   #FEF3F2;  --ek-danger-500:  #F04438;  --ek-danger-600:  #D92D20;  --ek-danger-700:  #B42318;
  --ek-warning-50:  #FFF4ED;  --ek-warning-500: #FB7A2A;  --ek-warning-600: #F76B15;  --ek-warning-700: #C4500A;
  --ek-info-50:     #EAF6FE;  --ek-info-500:    #17A0E8;  --ek-info-600:    #0B84D6;  --ek-info-700:    #0764A8;

  /* ===== ROL RANGLARI (Egasi / Admin / Kassir / Omborchi / Superadmin) ===== */
  --ek-role-owner:      #B44F06;  --ek-role-owner-bg:      #FFF8EB;
  --ek-role-admin:      #0F4EB3;  --ek-role-admin-bg:      #EEF1FF;
  --ek-role-cashier:    #0E6F86;  --ek-role-cashier-bg:    #E6F7F8;
  --ek-role-stock:      #6E3FC4;  --ek-role-stock-bg:      #F2ECFD;
  --ek-role-superadmin: #B42318;  --ek-role-superadmin-bg: #FEF3F2;

  /* ===== TOʻLOV USULI RANGLARI ===== */
  --ek-pay-cash:  #16883A;   /* Naqd  */
  --ek-pay-card:  #1663D8;   /* Karta */
  --ek-pay-mixed: #F5A524;   /* Aralash */
  --ek-pay-debt:  #D92D20;   /* Qarz  */

  /* ===== SEMANTIC ALIASES — LIGHT (default) ===== */
  --bg-canvas:      var(--ek-ink-50);
  --bg-surface:     var(--ek-ink-0);
  --bg-surface-alt: var(--ek-ink-25);
  --bg-sunken:      var(--ek-ink-100);
  --bg-inverse:     var(--ek-ink-950);
  --bg-brand:       var(--ek-blue-600);
  --bg-brand-soft:  var(--ek-blue-50);

  --fg-primary:   var(--ek-ink-950);
  --fg-secondary: var(--ek-ink-600);
  --fg-tertiary:  var(--ek-ink-400);
  --fg-inverse:   var(--ek-ink-0);
  --fg-brand:     var(--ek-blue-600);
  --fg-on-brand:  #FFFFFF;

  --border-subtle: var(--ek-ink-200);
  --border-strong: var(--ek-ink-300);
  --border-brand:  var(--ek-blue-600);

  --focus-ring: 0 0 0 3px rgba(22, 99, 216, .30);

  /* ===== TIPOGRAFIYA ===== */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-display-2xl: 700 3rem/1.06 var(--font-display);
  --text-display-xl:  700 2.25rem/1.15 var(--font-display);
  --text-display-lg:  700 1.75rem/1.25 var(--font-display);
  --text-display-md:  700 1.375rem/1.3 var(--font-display);
  --text-title-lg:    600 1.125rem/1.45 var(--font-sans);
  --text-title-md:    600 1rem/1.5 var(--font-sans);
  --text-body-lg:     400 1rem/1.55 var(--font-sans);
  --text-body-md:     400 .875rem/1.5 var(--font-sans);
  --text-body-sm:     400 .8125rem/1.45 var(--font-sans);
  --text-label:       600 .6875rem/1.2 var(--font-sans);

  --tracking-display: -.028em;
  --tracking-label:   .06em;

  /* ===== FAZO (4px baza) ===== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ===== RADIUS ===== */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-full: 999px;

  /* ===== SOYA (ink tusli, neytral kulrang emas) ===== */
  --sh-xs: 0 1px 2px rgba(11,21,36,.06);
  --sh-sm: 0 1px 3px rgba(11,21,36,.08), 0 1px 2px rgba(11,21,36,.04);
  --sh-md: 0 4px 12px rgba(11,21,36,.08), 0 1px 3px rgba(11,21,36,.05);
  --sh-lg: 0 12px 28px rgba(11,21,36,.10), 0 2px 6px rgba(11,21,36,.05);
  --sh-xl: 0 24px 56px rgba(11,21,36,.14);
  --sh-brand: 0 6px 18px rgba(22,99,216,.30);

  /* ===== TEGISH NISHONLARI (POS terminal / mobil) ===== */
  --touch-min: 44px;      /* WCAG minimal */
  --touch-pos: 56px;      /* kassir tugmalari */
  --touch-keypad: 64px;   /* raqamli klaviatura */

  /* ===== HARAKAT ===== */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms;

  /* ===== Z-QATLAM ===== */
  --z-sticky: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400;
}

/* --- QORONGʻI REJIM ------------------------------------------------------
   Kassir smenasi 8–12 soat davom etadi. Qorongʻi rejim — hashamat emas,
   ergonomika. Toza qora ishlatilmaydi: ko'z toliqishini oshiradi.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-canvas:      #08111D;
  --bg-surface:     #0F1B2B;
  --bg-surface-alt: #142339;
  --bg-sunken:      #0A1523;
  --bg-inverse:     var(--ek-ink-0);
  --bg-brand:       var(--ek-blue-500);
  --bg-brand-soft:  rgba(22,99,216,.18);

  --fg-primary:   #EDF1F7;
  --fg-secondary: #9CAABF;
  --fg-tertiary:  #64748B;
  --fg-inverse:   var(--ek-ink-950);
  --fg-brand:     #77A9F5;
  --fg-on-brand:  #FFFFFF;

  --border-subtle: #1E2E44;
  --border-strong: #2C4059;
  --focus-ring: 0 0 0 3px rgba(119,169,245,.38);

  --ek-role-owner-bg:      rgba(31,174,76,.16);
  --ek-role-admin-bg:      rgba(22,99,216,.18);
  --ek-role-cashier-bg:    rgba(14,124,134,.20);
  --ek-role-stock-bg:      rgba(110,63,196,.20);
  --ek-role-superadmin-bg: rgba(217,45,32,.16);
  --ek-role-owner: #FFC94A; --ek-role-admin: #77A9F5;
  --ek-role-cashier: #4CD4DE; --ek-role-stock: #B79BF5; --ek-role-superadmin: #FF8A80;

  --sh-sm: 0 1px 3px rgba(0,0,0,.5);
  --sh-md: 0 4px 14px rgba(0,0,0,.45);
  --sh-lg: 0 14px 32px rgba(0,0,0,.5);
  --sh-xl: 0 28px 64px rgba(0,0,0,.6);
}

/* --- YUQORI KONTRAST (yorugʻ do'kon, quyosh tushadigan peshtaxta) --------- */
[data-contrast="high"] {
  --border-subtle: var(--ek-ink-400);
  --fg-secondary:  var(--ek-ink-800);
}

/* --- ASOSIY QOIDALAR ------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
  font: var(--text-body-md);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

/* PUL VA RAQAM — har doim mono + tabular. Ustunlar chekdek tekislanadi. */
.ek-num, .ek-money, td[data-num], input[inputmode="numeric"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -.01em;
}

/* Fokus — klaviatura bilan ishlaydigan kassir uchun majburiy */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   LOYIHA KENGAYTMASI — brend to'plamida yo'q, lekin kodda kerak bo'lgan
   aliaslar. Hammasi yuqoridagi XOM qiymatlardan olinadi; yangi rang
   O'YLAB TOPILMAYDI.

   Bu bo'lim ikki ishni bajaradi:
     1. Brend nomlariga sinonim beradi (--focus-ring → --ring-brand va h.k.),
        shunda ikkala nom bilan yozilgan kod ham ishlaydi;
     2. Brendda ko'rsatilmagan holat ranglarini (muvaffaqiyat/xato/ogohlantirish
        foni va chegarasi) semantik qiymatlarga bog'laydi.
   ========================================================================== */

:root {
  /* ── Brend nomlariga sinonimlar ─────────────────────────────────────── */
  --bg-brand-subtle:  var(--bg-brand-soft);
  --bg-elevated:      var(--bg-surface);
  --fg-on-inverse:    var(--fg-inverse);
  --ring-brand:       var(--focus-ring);
  --hit-sm:           32px;
  --hit-md:           40px;
  --hit-min:          var(--touch-min);
  --hit-lg:           48px;
  --hit-pos:          var(--touch-pos);
  --hit-keypad:       var(--touch-keypad);

  /* ── Holat ranglari (brenddagi semantic shkalalardan) ───────────────── */
  --bg-success:        var(--ek-success-600);
  --bg-success-subtle: var(--ek-success-50);
  --fg-success:        var(--ek-success-700);
  --border-success:    var(--ek-green-200);

  --bg-danger:         var(--ek-danger-600);
  --bg-danger-subtle:  var(--ek-danger-50);
  --fg-danger:         var(--ek-danger-600);
  --border-danger:     #FDA29B;
  --ring-danger:       0 0 0 3px rgba(217, 45, 32, .24);

  --bg-warning:        var(--ek-warning-500);
  --bg-warning-subtle: var(--ek-warning-50);
  --fg-warning:        var(--ek-warning-700);
  --border-warning:    #FDBE8C;

  --bg-brand-hover:    var(--ek-blue-700);

  /* Modal/drawer ortidagi qorayish */
  --scrim:             rgba(11, 21, 36, .42);

  /* ── Eski nomlar (kodda hali uchraydi) ──────────────────────────────── */
  /* Brendda ogohlantirish — to'q sariq (#FB7A2A). Oldingi amber shkalasi
     "aralash to'lov" belgisida qolgan, shuning uchun saqlanadi. */
  --ek-amber-500:  var(--ek-pay-mixed);
  --ek-amber-50:   var(--ek-warning-50);
  --ek-amber-200:  #FDBE8C;
  --ek-amber-700:  var(--ek-warning-700);
  --ek-red-50:     var(--ek-danger-50);
  --ek-red-200:    #FDA29B;
  --ek-red-500:    var(--ek-danger-500);
  --ek-red-600:    var(--ek-danger-600);
  --ek-red-700:    var(--ek-danger-700);
  --ek-violet-500: var(--ek-role-stock);
  --ek-cyan-500:   var(--ek-role-cashier);

  /* ── Shrift o'lchamlari ─────────────────────────────────────────────── */
  --fs-2xs: .6875rem;   /* 11 */
  --fs-xs:  .75rem;     /* 12 */
  --fs-sm:  .8125rem;   /* 13 */
  --fs-md:  .875rem;    /* 14 — asosiy */
  --fs-lg:  1rem;       /* 16 */
  --fs-xl:  1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 2rem;       /* 32 */

  /* ── Qatlamlar (brendda yo'q ikkitasi) ──────────────────────────────── */
  --z-sidebar: var(--z-drawer);
  --z-overlay: 250;
}

[data-theme="dark"] {
  --bg-success-subtle: rgba(53, 200, 99, .12);
  --bg-danger-subtle:  rgba(240, 68, 56, .12);
  --bg-warning-subtle: rgba(251, 122, 42, .12);
  --fg-success:        var(--ek-green-400);
  --fg-danger:         #FF8A80;
  --fg-warning:        var(--ek-warning-500);
  --border-success:    rgba(53, 200, 99, .34);
  --border-danger:     rgba(240, 68, 56, .38);
  --border-warning:    rgba(251, 122, 42, .38);
  --bg-brand-hover:    var(--ek-blue-400);
  --scrim:             rgba(2, 8, 16, .68);
  color-scheme: dark;
}

/* ── Faqat ekran o'quvchi uchun ──────────────────────────────────────── */
.ek-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;
}


/* ═══ 2/6 — ANIMATSIYA ═════════════════════════════════════════════ */

/* ==========================================================================
   e-Kassam Motion v1.0
   Import: @import "ek-motion.css";  (tokens fayldan KEYIN)
   Qoida: faqat transform va opacity animatsiya qilinadi.

   MANBA FAYL — `sync-tokens.ps1` bilan ilovalarga ko'chiriladi.
   1–12 bo'limlar redesign to'plamidan o'zgarishsiz olingan.
   13+ bo'limlar shu loyihaga qo'shilgan (chek qirrasi, countup, tugma bosilishi).
   ========================================================================== */

/* ⚠ Brend to'plamidagi tokens fayli ham --dur-fast/base/slow ni belgilaydi
   (120/180/260ms). Bu fayl tokenlardan KEYIN ulangani uchun quyidagi qiymatlar
   ustun keladi. Ular 03-MOTION.md dagi jadvaldan olingan va animatsiya
   katalogi shu vaqtlarga qurilgan (masalan drawer 320ms, stagger 60ms).
   Brend qiymatlariga qaytish kerak bo'lsa, hujjat ham yangilanishi shart. */
:root {
  --dur-instant: 90ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-story:   520ms;

  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-linear: linear;

  --stagger: 60ms;
}

/* --- 0. BARCHA ANIMATSIYALAR USTIDAN — birinchi qoida --------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ek-carousel { --autoplay: none; }
}

/* --- 1. SCROLL OCHILISHI -------------------------------------------------- */
.ek-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-story) var(--ease-out),
              transform var(--dur-story) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.ek-reveal.is-in { opacity: 1; transform: none; }

/* guruh ichida ketma-ketlik */
.ek-stagger > * { transition-delay: calc(var(--stagger) * var(--i, 0)); }

/* --- 2. KIRISH ANIMATSIYALARI --------------------------------------------- */
@keyframes ek-fade-up   { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes ek-fade-in   { from { opacity:0 } to { opacity:1 } }
@keyframes ek-scale-in  { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:none } }
@keyframes ek-slide-down{ from { opacity:0; transform:translateY(-100%) } to { opacity:1; transform:none } }
@keyframes ek-slide-left{ from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } }

.ek-in-up    { animation: ek-fade-up  var(--dur-story) var(--ease-out) both; }
.ek-in-fade  { animation: ek-fade-in  var(--dur-base)  var(--ease-out) both; }
.ek-in-scale { animation: ek-scale-in var(--dur-base)  var(--ease-out) both; }
.ek-in-down  { animation: ek-slide-down var(--dur-slow) var(--ease-out) both; }

/* --- 3. CHEK CHOP ETISH YUKLOVCHISI --------------------------------------- */
.ek-printing { --w: 96px; width: var(--w); }
.ek-printing__slot {
  height: 8px; border-radius: 4px;
  background: var(--fg-tertiary, #93A0B5); opacity: .35;
}
.ek-printing__paper {
  overflow: hidden;
  animation: ek-paper 2.2s var(--ease-out) infinite;
}
@keyframes ek-paper {
  0%       { max-height: 0;    opacity: 0 }
  12%      { opacity: 1 }
  55%, 80% { max-height: 96px; opacity: 1 }
  100%     { max-height: 96px; opacity: 0 }
}
.ek-printing__line {
  height: 5px; border-radius: 3px; margin: 7px 8px 0;
  background: var(--border-subtle, #DDE2EB);
  animation: ek-line 2.2s var(--ease-out) infinite;
  opacity: 0;
}
.ek-printing__line:nth-child(1) { animation-delay: .22s; width: 72% }
.ek-printing__line:nth-child(2) { animation-delay: .40s; width: 54% }
.ek-printing__line:nth-child(3) { animation-delay: .58s; width: 82% }
.ek-printing__line:nth-child(4) { animation-delay: .76s; width: 40%;
  background: var(--ek-green-400, #35C863); height: 7px }
@keyframes ek-line { 0%,8% {opacity:0; transform:translateY(-4px)} 20%,88% {opacity:1;transform:none} 100%{opacity:0} }

/* --- 4. SKELETON ---------------------------------------------------------- */
.ek-skeleton {
  position: relative; overflow: hidden;
  background: var(--bg-sunken, #EDF0F5);
  border-radius: var(--r-sm, 6px);
}
.ek-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  animation: ek-shimmer 1.4s var(--ease-linear) infinite;
}
[data-theme="dark"] .ek-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}
@keyframes ek-shimmer { to { transform: translateX(100%) } }

/* --- 5. SPINNER (faqat kichik, inline) ------------------------------------ */
.ek-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: ek-spin .7s var(--ease-linear) infinite;
  display: inline-block;
}
@keyframes ek-spin { to { transform: rotate(360deg) } }

/* --- 6. MIKRO-O'ZARO TA'SIRLAR -------------------------------------------- */
.ek-press { transition: transform var(--dur-instant) var(--ease-out) }
.ek-press:active { transform: scale(.97) }

@keyframes ek-pop { 0%{transform:scale(1)} 45%{transform:scale(1.045)} 100%{transform:scale(1)} }
.ek-pop { animation: ek-pop 320ms var(--ease-spring) }

@keyframes ek-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
.ek-shake { animation: ek-shake 320ms var(--ease-out) }   /* bir marta, takrorlanmaydi */

@keyframes ek-row-in { from { opacity:0; transform:translateY(-10px) } to { opacity:1; transform:none } }
.ek-row-in { animation: ek-row-in 240ms var(--ease-out) both }

/* --- 7. TASDIQ BELGISI CHIZILISHI ----------------------------------------- */
.ek-check-draw {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: ek-draw 420ms var(--ease-out) forwards;
}
@keyframes ek-draw { to { stroke-dashoffset: 0 } }

/* --- 8. MODAL / DRAWER ---------------------------------------------------- */
.ek-overlay { animation: ek-fade-in var(--dur-base) var(--ease-out) both }
.ek-dialog  { animation: ek-dialog var(--dur-base) var(--ease-out) both }
@keyframes ek-dialog { from { opacity:0; transform:scale(.96) translateY(8px) } to { opacity:1; transform:none } }

.ek-drawer-right { animation: ek-drawer-r var(--dur-slow) var(--ease-out) both }
@keyframes ek-drawer-r { from { transform: translateX(100%) } to { transform: none } }
.ek-drawer-bottom { animation: ek-drawer-b var(--dur-slow) var(--ease-out) both }
@keyframes ek-drawer-b { from { transform: translateY(100%) } to { transform: none } }

/* --- 9. TOAST ------------------------------------------------------------- */
.ek-toast-in  { animation: ek-toast-in 280ms var(--ease-spring) both }
.ek-toast-out { animation: ek-toast-out 180ms var(--ease-in) both }
@keyframes ek-toast-in  { from { opacity:0; transform:translateY(16px) scale(.96) } to { opacity:1; transform:none } }
@keyframes ek-toast-out { to { opacity:0; transform:translateY(8px) scale(.98) } }

/* --- 10. KARUSEL ---------------------------------------------------------- */
.ek-carousel { position: relative; overflow: hidden }
.ek-carousel__track {
  display: flex;
  transition: transform 420ms var(--ease-out);
  will-change: transform;
}
.ek-carousel__slide { flex: 0 0 100%; min-width: 0 }
.ek-carousel__dots { display: flex; gap: 6px; justify-content: center }
.ek-carousel__dot {
  width: 7px; height: 7px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--border-strong, #C3CBD9);
  transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.ek-carousel__dot[aria-selected="true"] { width: 22px; background: var(--bg-brand, #1663D8) }

/* --- 11. OFLAYN TASMASI --------------------------------------------------- */
.ek-offline-bar { animation: ek-slide-down var(--dur-slow) var(--ease-out) both }

/* --- 12. BREND INTROSI — vaqtlar JS bilan boshqariladi -------------------- */
.ek-intro__back  { animation: ek-slide-left 460ms var(--ease-out) both; animation-delay: 0ms }
.ek-intro__front { animation: ek-scale-in 460ms var(--ease-spring) both; animation-delay: 140ms }
.ek-intro__ln    { animation: ek-wipe 300ms var(--ease-out) both }
.ek-intro__ln:nth-of-type(1) { animation-delay: 380ms }
.ek-intro__ln:nth-of-type(2) { animation-delay: 460ms }
@keyframes ek-wipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
.ek-intro__chk   { stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: ek-draw 420ms var(--ease-out) 620ms forwards }
.ek-intro__char  { animation: ek-fade-up 360ms var(--ease-out) both }

/* ==========================================================================
   13+ — LOYIHAGA QO'SHILGANLAR
   ========================================================================== */

/* --- 13. CHEK QIRRASI (brend imzosi) -------------------------------------- */
/* Yirtilgan qog'oz qirrasi. Landing yakuniy CTA, login o'ng panel, chek bloki. */
.ek-tear {
  --tear: 9px;
  position: relative;
}
.ek-tear::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--tear) * -1);
  height: var(--tear);
  background: inherit;
  -webkit-mask-image: radial-gradient(var(--tear) at var(--tear) 0, transparent 99%, #000 100%);
          mask-image: radial-gradient(var(--tear) at var(--tear) 0, transparent 99%, #000 100%);
  -webkit-mask-size: calc(var(--tear) * 2) 100%;
          mask-size: calc(var(--tear) * 2) 100%;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}

/* --- 14. TAB INDIKATORI --------------------------------------------------- */
/* 03-MOTION.md: ostidagi indikator siljiydi (transform), kontent opacity bilan. */
.ek-tab-indicator {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--bg-brand);
  transition: transform var(--dur-base) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}

/* --- 15. SAHIFA O'TISHI --------------------------------------------------- */
/* Faqat opacity, 140ms. Siljish YO'Q — POS'da chalg'itadi. */
.ek-page-in { animation: ek-fade-in var(--dur-fast) var(--ease-out) both }

/* --- 16. KAM QOLDIQ PULSATSIYASI ----------------------------------------- */
/* Bir marta, miltillash yo'q. */
@keyframes ek-pulse-once { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.ek-pulse-once { animation: ek-pulse-once 420ms var(--ease-spring) }

/* --- 17. RAQAM SANASH ----------------------------------------------------- */
/* JS qiymatni yangilaydi; CSS faqat kenglik sakramasligini kafolatlaydi. */
.ek-countup { font-variant-numeric: tabular-nums }


/* ═══ 3/6 — UMUMIY KOMPONENTLAR ════════════════════════════════════ */

/* ==========================================================================
   e-Kassam — umumiy komponent uslublari
   `packages/ui/components/*.jsx` shu fayldagi klasslarga tayanadi.

   Import tartibi: tokens → motion → ek-components → ilovaning o'z stili.
   MANBA FAYL — sync-tokens.ps1 ilovalarga tarqatadi.
   ========================================================================== */

/* ── KPI kartochkasi (07-ADMIN.md, "Bosh sahifa") ────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.kpi__label { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-secondary); }
.kpi__value {
  /* Tabular figures majburiy — sanash paytida kenglik sakramasligi uchun */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15;
  color: var(--fg-primary);
}
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; }
.kpi__delta[data-dir="up"]   { color: var(--fg-success); }
.kpi__delta[data-dir="down"] { color: var(--fg-danger); }
.kpi__delta[data-dir="flat"] { color: var(--fg-tertiary); }

/* ── "E'tibor talab qiladi" — panelning yuragi ───────────────────────────── */
.attn__row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--hit-min); padding: 12px 16px;
  border: 0; border-bottom: 1px solid var(--border-subtle);
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.attn__row:last-child { border-bottom: 0; }
.attn__row:hover { background: var(--bg-sunken); }
.attn__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--r-md); font-size: 13px;
}
.attn__icon[data-tone="danger"]  { background: var(--bg-danger-subtle);  color: var(--fg-danger); }
.attn__icon[data-tone="warning"] { background: var(--bg-warning-subtle); color: var(--fg-warning); }
.attn__icon[data-tone="info"]    { background: var(--bg-brand-subtle);   color: var(--fg-brand); }
.attn__count {
  margin-left: auto; font-weight: 700;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.attn__empty { padding: 30px 20px; text-align: center; color: var(--fg-secondary); font-size: var(--fs-sm); }
.attn__empty i { display: block; margin-bottom: 10px; font-size: 26px; color: var(--fg-success); }

/* ── Jadval shaklidagi skeleton ──────────────────────────────────────────
   Spinner emas: skeleton kelajakdagi kontentning aniq shaklida bo'ladi,
   aks holda ma'lumot kelganda layout sakraydi (03-MOTION.md #3). */
.ek-skel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
}
.ek-skel-row > span { height: 12px; border-radius: var(--r-sm); }
.ek-skel-row > span:nth-child(1) { flex: 2 }
.ek-skel-row > span:nth-child(2) { flex: 3 }
.ek-skel-row > span:nth-child(3) { flex: 1 }

/* ── Jadval standarti (07-ADMIN.md) ──────────────────────────────────────
   Qator 44px · sarlavha yopishqoq · summalar o'ngga, monoshriftda */
th { position: sticky; top: 0; z-index: 2; }
tbody td { height: var(--hit-min); }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   TEMA TANLAGICHI
   ══════════════════════════════════════════════════════════════════════════ */
.ek-theme-select {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--hit-md); padding: 0 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--fg-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ek-theme-select:hover { border-color: var(--border-strong); }
.ek-theme-select:focus-within { border-color: var(--border-brand); box-shadow: var(--focus-ring); }
.ek-theme-select > i { font-size: 13px; flex-shrink: 0; }
.ek-theme-select select {
  border: 0; background: none; outline: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  color: inherit; min-width: 0;
}
/* Yig'ilgan yon menyuda faqat ikonka ko'rinadi */
.ek-theme-select.is-compact { padding: 0; width: var(--hit-md); justify-content: center; }
.ek-theme-select.is-compact select {
  position: absolute; opacity: 0; width: var(--hit-md); height: var(--hit-md); cursor: pointer;
}

/* Yon menyu ichida — u o'z fon va matn rangiga ega */
.sb-foot .ek-theme-select,
.sb-footer .ek-theme-select {
  width: 100%;
  background: var(--sb-control-bg, transparent);
  border-color: var(--sb-control-border, transparent);
  color: var(--sb-control-fg, inherit);
}
.sb-foot .ek-theme-select:hover,
.sb-footer .ek-theme-select:hover { background: var(--sb-hover, rgba(255,255,255,.09)); }
.sb-foot .ek-theme-select select,
.sb-footer .ek-theme-select select { flex: 1; }
/* Ochilgan ro'yxat OS chizadi — u har doim o'qiladigan bo'lishi uchun
   variantlarga aniq rang beramiz (qorong'i menyuda oq matn qora ro'yxatda
   ko'rinmay qolardi). */
.ek-theme-select option { background: var(--bg-surface); color: var(--fg-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   SOZLAMALAR SAHIFASI

   Barcha sozlamalar (tema, til, interfeys) shu bitta ekranda. Ilgari tema
   yon menyu tagida turardi va uni topish uchun menyuni ochish kerak edi.

   Qatorlar bir ustunda: chapda nom + izoh, o'ngda boshqaruv. 640px dan
   torda ustma-ust tushadi — boshqaruv siqilib ketmasin.
   ══════════════════════════════════════════════════════════════════════════ */

.set-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.set-card__hint {
  margin: 0;
  padding: 0 18px 4px;
  font-size: 12.5px;
  color: var(--fg-secondary);
  line-height: 1.5;
}

.set-list { padding: 4px 18px 16px; }

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--hit-min);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.set-row:last-child { border-bottom: none; }

.set-row__text { min-width: 0; }

.set-row__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-primary);
}

/* Izoh `--fg-secondary` — `--fg-tertiary` oq fonda 2.65:1 beradi va
   o'qiladigan matnga yaramaydi (09-CHETLANISHLAR.md §1k). */
.set-row__hint {
  margin-top: 3px;
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.45;
}

.set-row__control { flex-shrink: 0; }

.set-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-primary);
}

@media (max-width: 640px) {
  .set-row { flex-direction: column; align-items: stretch; }
  .set-row__control { width: 100%; }
}

/* ── Ikki holatli tugma (switch) ────────────────────────────────────────
   Faqat HOLAT IKKITA bo'lganda. Uch holatli narsa (tema) uchun `Select`
   ishlatiladi — tugma "Tizim" ni ifodalay olmaydi. */
.ek-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--hit-min);
  padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.ek-switch__knob {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg-sunken);
  position: relative;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.ek-switch__knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.ek-switch.on {
  border-color: var(--border-brand);
  color: var(--fg-brand);
}
.ek-switch.on .ek-switch__knob { background: var(--bg-brand); }
.ek-switch.on .ek-switch__knob::after { transform: translateX(14px); }

.ek-switch:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
}

/* Harakat kamaytirilgan bo'lsa — siljish yo'q, faqat rang (CLAUDE.md #4) */
@media (prefers-reduced-motion: reduce) {
  .ek-switch,
  .ek-switch__knob,
  .ek-switch__knob::after { transition: none; }
}

/* ── Ogohlantirish/ma'lumot bloki ───────────────────────────────────────
   Ilgari har sahifada inline `#fffbeb` / `#fcd34d` / `#92400e` yozilardi.
   Ular qorong'i rejimda o'qib bo'lmas darajada och sariq bo'lib chiqardi
   (CLAUDE.md #1: kodda rang yozilmaydi). */
.ek-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-default);
  background: var(--bg-sunken);
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 14px;
}
.ek-note i { margin-top: 2px; flex-shrink: 0; }

.ek-note--warning {
  background: var(--bg-warning-subtle);
  border-color: var(--border-warning);
  color: var(--fg-warning);
}
.ek-note--info {
  background: var(--bg-brand-subtle);
  border-color: var(--border-brand);
  color: var(--fg-brand);
}
.ek-note--danger {
  background: var(--bg-danger-subtle);
  border-color: var(--border-danger);
  color: var(--fg-danger);
}

/* ── Ariza xabari jadval katakchasida ───────────────────────────────────
   Xabar uzun bo'lishi mumkin, lekin qator balandligi 44px bo'lib qolishi
   kerak — aks holda jadval o'qilmaydi. Ikki qatorga qisqartiriladi va
   bosilganda to'liq matn modalda ochiladi. */
.req-msg {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.req-msg:hover { color: var(--fg-brand); }
.req-msg:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* KPI izohi — yorliq ostida, raqamdan keyin. `--fg-secondary`, chunki bu
   o'qilishi kerak bo'lgan matn (09-CHETLANISHLAR.md §1k). */
.kpi__hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-secondary);
  line-height: 1.35;
}


/* ═══ 4/6 — YUKLANISH TIZIMI ═══════════════════════════════════════ */

/* ==========================================================================
   e-Kassam — YUKLANISH TIZIMI
   03-MOTION.md #2 (chek chop etish), #3 (skeleton), "Nima qilinmaydi"

   Beshta a'zo, har biri ANIQ bir vazifa uchun. Tanlash qoidasi:

   ┌ Nima kutilmoqda?                    → Qaysi a'zo
   │ Shakli MA'LUM kontent (jadval,      → SKELETON — kelajakdagi shaklda
   │   ro'yxat, kartochka, forma)
   │ Ekranda kontent BOR, yangilanmoqda  → PROGRESS — yuqorida ingichka chiziq
   │ Mahsulotga xos uzun amal (sotuv,    → CHEK — brendning o'z tili
   │   hisobot, eksport)
   │ Ilova birinchi ko'tarilishi         → BREND BELGISI
   │ Tugma ichida                        → SPINNER (faqat inline, 16px)
   └

   Umumiy spinner bilan butun sahifani qoplash TAQIQLANADI: u hech narsa
   aytmaydi, kontent kelganda esa layout sakraydi.

   MANBA FAYL — packages/ui/ da tahrirlanadi, sync-tokens.ps1 tarqatadi.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. SKELETON — kelajakdagi kontentning ANIQ shaklida
   ══════════════════════════════════════════════════════════════════════════ */

.ek-sk {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--bg-sunken);
  border-radius: var(--r-sm);
  /* Kontent kelganda o'lcham o'zgarmasligi uchun balandlik doim beriladi */
  height: 12px;
}
.ek-sk::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--bg-surface) 70%, transparent),
    transparent);
  animation: ek-sk-shimmer 1.4s linear infinite;
}
[data-theme="dark"] .ek-sk::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
@keyframes ek-sk-shimmer { to { transform: translateX(100%) } }

/* Yorug'lik to'lqini harakat — reduced-motion da u o'chadi va statik tus qoladi.
   Skeletonning O'ZI qolishi shart: u kontent shaklini bildiradi, bezak emas. */
@media (prefers-reduced-motion: reduce) {
  .ek-sk::after { animation: none; opacity: .5; }
}

/* Variantlar — balandlik va shakl */
.ek-sk--text   { height: 12px; }
.ek-sk--title  { height: 18px; }
.ek-sk--num    { height: 24px; }
.ek-sk--line   { height: 10px; }
.ek-sk--circle { border-radius: 50%; }
.ek-sk--pill   { border-radius: var(--r-full); height: 22px; }
.ek-sk--block  { border-radius: var(--r-md); }

/* Guruhda to'lqin ketma-ket ketadi — bir vaqtda yonib-o'chish g'alati ko'rinadi */
.ek-sk-group > *:nth-child(2) .ek-sk::after,
.ek-sk-group > *:nth-child(2) > .ek-sk::after { animation-delay: .12s; }
.ek-sk-group > *:nth-child(3) .ek-sk::after,
.ek-sk-group > *:nth-child(3) > .ek-sk::after { animation-delay: .24s; }
.ek-sk-group > *:nth-child(4) .ek-sk::after,
.ek-sk-group > *:nth-child(4) > .ek-sk::after { animation-delay: .36s; }
.ek-sk-group > *:nth-child(n+5) .ek-sk::after { animation-delay: .48s; }

/* ── Jadval skeleti ────────────────────────────────────────────────────────
   Qator balandligi haqiqiy jadvalniki bilan BIR XIL (44px) — aks holda
   ma'lumot kelganda sahifa sakraydi. */
.ek-sk-table { width: 100%; }
.ek-sk-tr {
  display: flex; align-items: center; gap: 14px;
  height: var(--hit-min); padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.ek-sk-tr:last-child { border-bottom: 0; }
.ek-sk-tr > * { flex: 1 1 0; min-width: 0; }
.ek-sk-tr > .is-narrow { flex: 0 0 44px; }
.ek-sk-tr > .is-wide   { flex: 2 1 0; }
/* Summalar ustuni o'ngga tekislangan — haqiqiy jadvaldagidek */
.ek-sk-tr > .is-num .ek-sk { margin-left: auto; width: 62%; }

/* ── Kartochka skeleti ─────────────────────────────────────────────────── */
.ek-sk-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}

/* ── Ro'yxat satri (avatar + ikki qator matn) ──────────────────────────── */
.ek-sk-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.ek-sk-row:last-child { border-bottom: 0; }
.ek-sk-row__body { flex: 1; display: grid; gap: 7px; }

/* ── Kassir katakchalari ───────────────────────────────────────────────── */
.ek-sk-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px; padding: 12px;
}
.ek-sk-tile {
  display: flex; flex-direction: column; gap: 7px;
  min-height: var(--hit-pos); padding: 12px;
  border: 1.5px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-surface);
}

/* ── Forma maydonlari ──────────────────────────────────────────────────── */
.ek-sk-form { display: grid; gap: 14px; }
.ek-sk-field { display: grid; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   2. PROGRESS — ekranda kontent BOR, u yangilanmoqda
   Sahifani qoplamaydi, layoutni surmaydi: `position: fixed`, 2px.
   ══════════════════════════════════════════════════════════════════════════ */
.ek-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: var(--z-toast);
  background: var(--bg-brand-soft);
  overflow: hidden;
  pointer-events: none;
}
.ek-progress__bar {
  position: absolute; inset: 0;
  background: var(--bg-brand);
  transform-origin: 0 50%;
  animation: ek-progress 1.15s var(--ease-out) infinite;
}
/* Ikkita bosqich: tez chiqadi, so'ng sekin cho'ziladi — "ish ketyapti" hissi
   beradi, lekin yolg'on foiz ko'rsatmaydi. */
@keyframes ek-progress {
  0%   { transform: translateX(-100%) scaleX(.35); }
  55%  { transform: translateX(20%)   scaleX(.55); }
  100% { transform: translateX(110%)  scaleX(.35); }
}
@media (prefers-reduced-motion: reduce) {
  .ek-progress__bar { animation: none; transform: none; opacity: .7; }
}

/* Panel ichida (yon menyu hisobga olingan holda) */
.ek-progress--inset { left: var(--current-sw, 0); }

/* ══════════════════════════════════════════════════════════════════════════
   3. CHEK CHOP ETISH — mahsulotning o'z tili
   Sotuv yakunlash, hisobot generatsiyasi, eksport.
   ══════════════════════════════════════════════════════════════════════════ */
.ek-printing { --w: 96px; width: var(--w); }
.ek-printing__slot {
  height: 8px; border-radius: 4px;
  background: var(--fg-tertiary); opacity: .35;
}
.ek-printing__paper {
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  animation: ek-paper 2.2s var(--ease-out) infinite;
}
@keyframes ek-paper {
  0%       { max-height: 0;    opacity: 0 }
  12%      { opacity: 1 }
  55%, 80% { max-height: 96px; opacity: 1 }
  100%     { max-height: 96px; opacity: 0 }
}
.ek-printing__line {
  height: 5px; border-radius: 3px; margin: 7px 8px 0;
  background: var(--border-subtle);
  animation: ek-line 2.2s var(--ease-out) infinite;
  opacity: 0;
}
.ek-printing__line:nth-child(1) { animation-delay: .22s; width: 72% }
.ek-printing__line:nth-child(2) { animation-delay: .40s; width: 54% }
.ek-printing__line:nth-child(3) { animation-delay: .58s; width: 82% }
.ek-printing__line:nth-child(4) { animation-delay: .76s; width: 40%;
  background: var(--ek-green-400); height: 7px }
@keyframes ek-line {
  0%,8%   { opacity: 0; transform: translateY(-4px) }
  20%,88% { opacity: 1; transform: none }
  100%    { opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .ek-printing__paper, .ek-printing__line { animation: none; opacity: 1; max-height: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. BREND BELGISI — ilova birinchi ko'tarilishi
   Belgi chizmasi bir tekis "nafas oladi", ✓ esa qayta-qayta chiziladi.
   Bu yerda spinner bo'lishi mumkin edi, lekin birinchi ekran — brend bilan
   birinchi uchrashuv.
   ══════════════════════════════════════════════════════════════════════════ */
.ek-boot {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; gap: 18px;
  align-content: center;
  background: var(--bg-canvas);
}
.ek-boot__mark { width: 72px; height: 72px; overflow: visible; }
.ek-boot__mark .paper {
  transform-origin: 50% 60%;
  animation: ek-boot-breathe 1.8s var(--ease-out) infinite;
}
@keyframes ek-boot-breathe {
  0%, 100% { transform: scale(1);    opacity: .9 }
  50%      { transform: scale(1.04); opacity: 1 }
}
.ek-boot__mark .check {
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: ek-boot-draw 1.8s var(--ease-out) infinite;
}
@keyframes ek-boot-draw {
  0%       { stroke-dashoffset: 22 }
  45%, 75% { stroke-dashoffset: 0 }
  100%     { stroke-dashoffset: 0; opacity: 0 }
}
.ek-boot__text {
  font-size: var(--fs-sm); color: var(--fg-secondary);
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .ek-boot__mark .paper { animation: none; }
  .ek-boot__mark .check { animation: none; stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. INLINE SPINNER — FAQAT tugma yoki matn ichida
   ══════════════════════════════════════════════════════════════════════════ */
.ek-spinner {
  display: inline-block; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: ek-spin .7s linear infinite;
  vertical-align: -3px;
}
.ek-spinner--sm { width: 13px; height: 13px; border-width: 1.5px; }
@keyframes ek-spin { to { transform: rotate(360deg) } }
/* reduced-motion da aylanish sekinlashadi, lekin QOLADI: u yagona
   "ish ketyapti" signali va uni yo'qotish holatni yashiradi. */
@media (prefers-reduced-motion: reduce) {
  .ek-spinner { animation-duration: 2.4s; }
}

/* ── Tugma yuklanish holati ────────────────────────────────────────────────
   Kenglik O'ZGARMAYDI: matn o'rnini spinner egallaydi (02-DESIGN-SYSTEM.md).
   `[data-loading]` bo'lgan tugma bosilmaydi va o'quvchiga `aria-busy` beradi. */
[data-loading="true"] {
  pointer-events: none;
  position: relative;
}
[data-loading="true"] > * { visibility: hidden; }
[data-loading="true"]::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: ek-spin .7s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   Umumiy: yuklanish maydoni
   ══════════════════════════════════════════════════════════════════════════ */
/* Ekran o'quvchi uchun holat matni — ko'z bilan ko'rinmaydi */
.ek-loading-label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ═══ 5/6 — SELECT ═════════════════════════════════════════════════ */

/* ==========================================================================
   e-Kassam — SELECT

   Nega o'zimizniki: brauzerning `<select>` ro'yxati OS tomonidan chiziladi.
   Uni CSS bilan boshqarib bo'lmaydi — na fon, na shrift, na tanlangan
   bandning rangi. Natijada qorong'i rejimda oq tizim oynasi ochilardi va
   variantlar deyarli ko'rinmasdi.

   Shuning uchun: tugma + o'z ro'yxatimiz (`role="listbox"`). Klaviatura,
   ekran o'quvchi va teginish — hammasi qo'lda qilingan, quyida.

   MANBA FAYL — packages/ui/ da tahrirlanadi, sync-tokens.ps1 tarqatadi.
   ========================================================================== */

.ek-select { position: relative; display: inline-block; }
.ek-select--block { display: block; width: 100%; }

/* ── Yopiq holat (tugma) ─────────────────────────────────────────────────── */
.ek-select__btn {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--hit-md);
  padding: 0 10px 0 12px;
  border: 1.5px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--fg-primary);
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 500;
  text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ek-select__btn:hover { border-color: var(--border-strong); }
.ek-select__btn:focus-visible,
.ek-select[data-open="true"] .ek-select__btn {
  outline: none;
  border-color: var(--border-brand); box-shadow: var(--focus-ring);
}
.ek-select__btn[disabled] { opacity: .55; cursor: not-allowed; }

.ek-select__icon  { flex-shrink: 0; font-size: 13px; color: var(--fg-secondary); }
.ek-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-select__value[data-placeholder="true"] { color: var(--fg-tertiary); }

/* Ochilish o'qi — 180° buriladi */
.ek-select__caret {
  flex-shrink: 0; width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--fg-tertiary); font-size: 11px;
  transition: transform var(--dur-base) var(--ease-out);
}
.ek-select[data-open="true"] .ek-select__caret { transform: rotate(180deg); }

/* ── Ochiq ro'yxat ───────────────────────────────────────────────────────── */
.ek-select__list {
  position: absolute; z-index: var(--z-modal);
  left: 0; top: calc(100% + 6px);
  /* ⚠ Kenglik tugmaga bog'lanmaydi. Ilgari `right: 0` turardi va ro'yxat
     tugma kengligiga qisilib qolardi — "Yorug'" o'rniga "Yor…" ko'rinardi.
     `max-content` variantlarning eng uzunini o'lchaydi, `min-width: 100%`
     esa ro'yxat tugmadan tor bo'lib qolishiga yo'l qo'ymaydi. */
  width: max-content;
  min-width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 264px; overflow-y: auto;
  padding: 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  animation: ek-select-in var(--dur-base) var(--ease-out) both;
}
/* Pastda joy bo'lmasa yuqoriga ochiladi (JS `data-drop` qo'yadi) */
.ek-select[data-drop="up"] .ek-select__list { top: auto; bottom: calc(100% + 6px); }
/* Ekranning o'ng chetiga yaqin bo'lsa ro'yxat o'ngga tekislanadi (JS qo'yadi) */
.ek-select[data-align="right"] .ek-select__list { left: auto; right: 0; }
@keyframes ek-select-in {
  from { opacity: 0; transform: translateY(-4px) scale(.985) }
  to   { opacity: 1; transform: none }
}
.ek-select[data-drop="up"] .ek-select__list { animation-name: ek-select-in-up }
@keyframes ek-select-in-up {
  from { opacity: 0; transform: translateY(4px) scale(.985) }
  to   { opacity: 1; transform: none }
}

.ek-select__opt {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: var(--hit-min);
  padding: 8px 10px;
  border: 0; border-radius: var(--r-md);
  background: none; color: var(--fg-primary);
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
/* Klaviatura bilan yurilgan band — sichqoncha hover'i bilan bir xil ko'rinadi */
.ek-select__opt[data-active="true"] { background: var(--bg-sunken); }
.ek-select__opt[aria-selected="true"] { color: var(--fg-brand); font-weight: 600; }
.ek-select__opt-icon { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; }
.ek-select__opt-label { flex: 1; min-width: 0; white-space: nowrap; }
/* Tanlangan bandda ✓ — rang yolg'iz signal bo'lmaydi (CLAUDE.md #6) */
.ek-select__opt-check { flex-shrink: 0; font-size: 11px; color: var(--fg-brand); opacity: 0; }
.ek-select__opt[aria-selected="true"] .ek-select__opt-check { opacity: 1; }

.ek-select__empty { padding: 14px 10px; text-align: center; color: var(--fg-tertiary); font-size: var(--fs-sm); }

/* ── Variantlar ──────────────────────────────────────────────────────────── */
/* Forma maydoni sifatida — `.form-input` / `.fi` bilan bir xil balandlik */
.ek-select--field .ek-select__btn { min-height: var(--hit-lg); font-size: var(--fs-md); }
.ek-select--field .ek-select__btn[aria-invalid="true"] { border-color: var(--border-danger); }

/* Ixcham — yon menyu yig'ilganda, faqat ikonka */
.ek-select--compact .ek-select__btn { width: var(--hit-md); padding: 0; justify-content: center; }
.ek-select--compact .ek-select__value,
.ek-select--compact .ek-select__caret { display: none; }
.ek-select--compact .ek-select__list { left: auto; right: 0; min-width: 172px; }

/* Yon menyu ichida — chegarasiz, menyu bandiga o'xshaydi */
.sb-footer .ek-select__btn,
.sb-foot   .ek-select__btn {
  border-color: transparent; background: transparent; color: var(--fg-secondary);
}
.sb-footer .ek-select__btn:hover,
.sb-foot   .ek-select__btn:hover { background: var(--bg-sunken); border-color: transparent; }

/* Mobil: ro'yxat ekran bo'ylab, barmoq uchun kattaroq */
@media (max-width: 520px) {
  .ek-select__list { max-height: 50vh; }
  .ek-select__opt  { min-height: var(--hit-lg); }
}

/* ── Landing sarlavhasidagi ixcham variant ──────────────────────────────── */
.hdr .ek-select__btn { min-height: 40px; font-size: var(--fs-sm); }


/* ═══ 6/6 — LANDING ════════════════════════════════════════════════ */

/* ==========================================================================
   e-kassam.uz — landing uslublari (MANBA FAYL)

   Bu faylni tahrirlang. `style.css` esa avtomatik yig'iladi:
       pwsh -File ../packages/sync-tokens.ps1
   va tokenlar + animatsiya + umumiy komponentlar + shu fayl birlashadi.

   Bu yerda RANG YOZILMAYDI — faqat semantik aliaslar (var(--bg-brand) ...).
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Scroll-ochilishi FAQAT JS bo'lganda yashiradi (index.html `js` klassini
   qo'yadi). Aks holda skript yiqilsa sahifa bo'sh ko'rinardi. */
html:not(.js) .ek-reveal { opacity: 1; transform: none; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 1.6;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Klaviatura bilan kelganlar uchun — birinchi Tab da paydo bo'ladi */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 10px 18px; border-radius: var(--r-md);
  background: var(--bg-brand); color: var(--fg-on-brand); font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: 12px; }

/* ── Tipografika ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.03em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight: 800; }
h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }

.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-brand);
}
.lead { font-size: var(--fs-lg); color: var(--fg-secondary); max-width: 62ch; }
.muted { color: var(--fg-secondary); }

section { padding: clamp(56px, 8vw, 96px) 0; }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head p { margin-top: 12px; color: var(--fg-secondary); }

/* ── Tugmalar ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--hit-min); padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--bg-brand); color: var(--fg-on-brand); box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--bg-brand-hover); }
.btn--secondary { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--border-brand); color: var(--fg-brand); }
.btn--ghost { color: var(--fg-secondary); }
.btn--ghost:hover { color: var(--fg-primary); }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: var(--fs-lg); border-radius: var(--r-lg); }

/* ══════════════════════════════════════════════════════════════════════════
   1. SARLAVHA — yopishqoq, 64px
   ══════════════════════════════════════════════════════════════════════════ */
.hdr {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hdr.is-scrolled { border-bottom-color: var(--border-subtle); }
.hdr__inner { display: flex; align-items: center; gap: 20px; height: 64px; }
/* Logotip — vektor lockup (rastr PNG emas: har qanday ekranda aniq va yengil).
   Balandlik bilan boshqariladi, kenglik nisbatdan kelib chiqadi.
   Minimal o'lcham 120px (brend kitobi) — 34px balandlikda kenglik ~134px. */
.hdr__logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.hdr__logo img { height: 34px; width: auto; }
@media (max-width: 420px) { .hdr__logo img { height: 27px; } }

/* Logotip temaga qarab almashadi: lockup so'z belgisi to'q siyoh rangida,
   qorong'i fonda u ko'rinmay qoladi. Ikkala variant HTML da turadi,
   CSS keraksizini yashiradi — JS kutilmaydi, almashish bir zumda. */
img.logo--dark { display: none; }
[data-theme="dark"] img.logo--light { display: none; }
[data-theme="dark"] img.logo--dark  { display: block; }
.hdr__nav { display: none; margin-left: auto; gap: 28px; list-style: none; }
@media (min-width: 940px) { .hdr__nav { display: flex; } }
.hdr__nav a { font-size: var(--fs-md); font-weight: 500; color: var(--fg-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.hdr__nav a:hover { color: var(--fg-primary); }
/* ── Sarlavha o'ng qismi ─────────────────────────────────────────────────
   ⚠ Mobilda bu yerga faqat BURGER sig'adi. Ilgari tema tanlagichi, "Kirish"
   va "Demo so'rash" ham shu yerda edi — ular burgerni ekrandan siqib
   chiqarardi va menyuni ochib bo'lmasdi.
   Endi: keng ekranda hammasi shu yerda, mobilda hammasi MENYU ichida.
   Demo so'rash esa mobilda pastki yopishqoq panelda turadi. */
.hdr__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr__desktop-only { display: none; align-items: center; gap: 10px; }
@media (min-width: 940px) {
  .hdr__desktop-only { display: flex; }
  .hdr__cta { margin-left: 0; }
}
.hdr__cta .btn { padding: 0 16px; font-size: var(--fs-sm); min-height: 40px; }

.hdr__burger {
  display: grid; place-items: center; flex-shrink: 0;
  width: var(--hit-min); height: var(--hit-min);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--fg-primary); cursor: pointer; font-size: 16px;
}
@media (min-width: 940px) { .hdr__burger { display: none; } }

/* ── Mobil menyu ─────────────────────────────────────────────────────────── */
.mobile-nav {
  display: grid; gap: 2px; padding: 8px 24px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  max-height: calc(100dvh - 64px); overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav > a {
  display: flex; align-items: center;
  min-height: var(--hit-min); padding: 10px 4px;
  text-decoration: none; font-weight: 500; color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-nav > a:last-of-type { border-bottom: 0; }

.mobile-nav__actions { display: grid; gap: 10px; margin-top: 14px; }
.mobile-nav__actions .btn { width: 100%; }

/* Tema — menyuning eng oxirida: bu kundalik emas, kamdan-kam sozlama */
.mobile-nav__theme {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--fg-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. HERO — chapda va'da, o'ngda JONLI kassa demosi
   ══════════════════════════════════════════════════════════════════════════ */
.hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 88px); }
.hero__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }

.hero h1 { margin-bottom: 18px; }
.hero__lead { margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero__fine { font-size: var(--fs-sm); color: var(--fg-secondary); }

/* ── Jonli POS demo — rasm emas, ishlaydigan blok ─────────────────────────── */
.demo {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.demo__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-xs); color: var(--fg-tertiary);
}
.demo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.demo__body { display: grid; gap: 12px; padding: 14px; }
@media (min-width: 620px) { .demo__body { grid-template-columns: 1fr 232px; } }

.demo__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
@media (min-width: 420px) { .demo__tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .demo__tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  display: flex; flex-direction: column; gap: 4px;
  min-height: var(--hit-pos); padding: 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-surface); text-align: left; cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.tile:hover { border-color: var(--border-brand); }
.tile:active { transform: scale(.97); }
.tile b { font-size: var(--fs-sm); font-weight: 600; }
.tile span { margin-top: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-secondary); }

.demo__cart { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; min-height: 220px; }
.demo__lines { flex: 1; padding: 4px 0; max-height: 170px; overflow: auto; }
.demo__line {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 7px 12px; font-size: var(--fs-xs);
  border-bottom: 1px dashed var(--border-subtle);
}
.demo__line b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.demo__hint { padding: 26px 14px; text-align: center; color: var(--fg-tertiary); font-size: var(--fs-xs); }
.demo__foot { padding: 12px; background: var(--bg-sunken); border-top: 1px solid var(--border-subtle); }
.demo__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.demo__total span { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-secondary); }
.demo__total b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); color: var(--fg-success); }
.demo__pay { width: 100%; min-height: var(--hit-min); border: 0; border-radius: var(--r-md); background: var(--bg-success); color: #FFFFFF; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 600; cursor: pointer; }
.demo__pay:disabled { opacity: .45; cursor: not-allowed; }
.demo__receipt { display: grid; justify-items: center; gap: 10px; padding: 26px 14px; }
.demo__receipt b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); color: var(--fg-success); }
.demo__caption { margin-top: 12px; font-size: var(--fs-sm); color: var(--fg-secondary); text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   3. ISHONCH CHIZIG'I
   ══════════════════════════════════════════════════════════════════════════ */
.trust { border-block: 1px solid var(--border-subtle); background: var(--bg-surface); padding: 34px 0; }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; text-align: center; }
@media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
.trust__lbl { margin-top: 4px; font-size: var(--fs-sm); color: var(--fg-secondary); }

/* ══════════════════════════════════════════════════════════════════════════
   4. MUAMMO → YECHIM
   ══════════════════════════════════════════════════════════════════════════ */
.pain { display: grid; gap: 14px; }
.pain__row { display: grid; gap: 12px; align-items: stretch; }
@media (min-width: 760px) { .pain__row { grid-template-columns: 1fr 44px 1fr; align-items: center; } }
.pain__q, .pain__a { padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--border-subtle); }
.pain__q { background: var(--bg-sunken); color: var(--fg-secondary); font-style: italic; }
.pain__a { background: var(--bg-surface); border-color: var(--border-brand); }
.pain__a b { display: block; color: var(--fg-brand); font-weight: 600; }

/* Brend belgisidagi yashil ✓ — landing bo'ylab tasdiq rangi sifatida takrorlanadi */
.role li i, .plan li i { color: var(--ek-green-600); }
.pain__arrow { display: grid; place-items: center; color: var(--fg-tertiary); }

/* ══════════════════════════════════════════════════════════════════════════
   5. XUSUSIYATLAR
   ══════════════════════════════════════════════════════════════════════════ */
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { padding: 22px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.feature__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--bg-brand-subtle); color: var(--fg-brand); font-size: 16px;
}
.feature h3 { margin-bottom: 6px; }
.feature p { font-size: var(--fs-md); color: var(--fg-secondary); }

/* ══════════════════════════════════════════════════════════════════════════
   6. EKRANLAR KARUSELI
   ══════════════════════════════════════════════════════════════════════════ */
.shots { background: var(--bg-surface); border-block: 1px solid var(--border-subtle); }
.shot {
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  background: var(--bg-canvas); overflow: hidden;
}
.shot__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--fg-tertiary); }
.shot__body { padding: 18px; display: grid; gap: 10px; min-height: 250px; }
.shot__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.shot__kpi { padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.shot__kpi small { display: block; font-size: var(--fs-2xs); color: var(--fg-secondary); }
.shot__kpi b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); }
.shot table { width: 100%; border-collapse: collapse; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; }
.shot th, .shot td { padding: 9px 12px; text-align: left; font-size: var(--fs-xs); border-bottom: 1px solid var(--border-subtle); }
.shot th { background: var(--bg-sunken); font-weight: 600; color: var(--fg-secondary); text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-2xs); }
.shot tr:last-child td { border-bottom: 0; }
.shot .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.shot__cap { margin-top: 14px; text-align: center; font-size: var(--fs-md); color: var(--fg-secondary); }
.ek-carousel__dots { margin-top: 18px; }
.ek-carousel__dot { height: 7px; }

/* ══════════════════════════════════════════════════════════════════════════
   7. ROLLAR
   ══════════════════════════════════════════════════════════════════════════ */
.roles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.role { padding: 22px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.role h3 { margin-bottom: 12px; }
.role ul { list-style: none; display: grid; gap: 8px; }
.role li { display: flex; gap: 9px; font-size: var(--fs-md); color: var(--fg-secondary); }
.role li i { margin-top: 5px; color: var(--fg-success); font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   8. OFLAYN VA XAVFSIZLIK — bu bo'lim sotadi
   ══════════════════════════════════════════════════════════════════════════ */
/* Bu bo'lim ataylab to'q — u sahifada ajralib turishi kerak. Lekin SIYOH
   QORA emas, chuqur BREND KO'KI: yorug' rejimda qora blok "qorong'i rejim
   qoldig'i" bo'lib ko'rinardi, ko'k esa brend sifatida o'qiladi. */
.offline { background: var(--ek-blue-900); color: var(--ek-ink-50); }
[data-theme="dark"] .offline { background: var(--ek-blue-950); }
.offline .lead, .offline .muted { color: rgba(237, 241, 247, .72); }
.offline .eyebrow { color: var(--ek-blue-200); }
.offline__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .offline__grid { grid-template-columns: 1fr 340px; } }
.offline blockquote {
  margin: 22px 0; padding-left: 20px;
  border-left: 3px solid var(--ek-blue-400);
  font-size: var(--fs-xl); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
}
.offline__demo {
  padding: 22px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
}
.offline__wifi { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 600; margin-bottom: 16px; }
.offline__wifi i { font-size: 18px; }
.offline__demo[data-state="off"] .offline__wifi { color: var(--ek-amber-500); }
.offline__demo[data-state="on"]  .offline__wifi { color: var(--ek-green-400); }
.offline__queue { display: grid; gap: 7px; }
.offline__item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  font-size: var(--fs-xs);
}
.offline__item b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.offline__item[data-sent="true"] { color: var(--ek-green-400); }

/* ══════════════════════════════════════════════════════════════════════════
   9. YUKLAB OLISH — Windows ilovasi
   ══════════════════════════════════════════════════════════════════════════ */
.dl {
  display: grid; gap: 28px; align-items: center;
  padding: 28px 24px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}
@media (min-width: 860px) { .dl { grid-template-columns: 1fr 1fr; gap: 40px; padding: 32px; } }

.dl__main { display: grid; gap: 14px; justify-items: start; }
.dl__btn { gap: 12px; }
.dl__btn i { font-size: 20px; }

/* Versiya qatori raqamli — jadval raqamlari bilan bir xil ko'rinsin.
   Matn skript kelguncha «aniqlanmoqda…» bo'lib turadi, shuning uchun
   balandligi o'zgarmasligi uchun `min-height` beriladi: aks holda reliz
   ma'lumoti kelganda tugma ostidagi blok sakrardi. */
.dl__meta {
  min-height: 1.4em;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--fg-secondary);
}

.dl__note {
  display: flex; gap: 9px;
  font-size: var(--fs-sm); color: var(--fg-tertiary); max-width: 46ch;
}
.dl__note i { margin-top: 4px; flex-shrink: 0; }

.dl__list { list-style: none; display: grid; gap: 12px; }
.dl__list li { display: flex; gap: 11px; font-size: var(--fs-md); color: var(--fg-secondary); }
.dl__list i { margin-top: 4px; width: 18px; flex-shrink: 0; text-align: center; color: var(--fg-brand); }

/* ══════════════════════════════════════════════════════════════════════════
   10. NARXLAR
   ══════════════════════════════════════════════════════════════════════════ */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.plan { padding: 26px 24px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 14px; }
.plan--featured { border-color: var(--border-brand); box-shadow: var(--sh-md); position: relative; }
.plan__tag {
  position: absolute; top: -11px; left: 24px;
  padding: 3px 12px; border-radius: var(--r-full);
  background: var(--bg-brand); color: var(--fg-on-brand);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em;
}
.plan__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.plan__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.plan__price small { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 500; color: var(--fg-secondary); }
.plan__sub { font-size: var(--fs-sm); color: var(--fg-secondary); }
.plan ul { list-style: none; display: grid; gap: 9px; margin-top: 4px; }
.plan li { display: flex; gap: 9px; font-size: var(--fs-md); color: var(--fg-secondary); }
.plan li i { margin-top: 5px; font-size: 11px; color: var(--fg-success); }
.plan .btn { margin-top: auto; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   10. SAVOL-JAVOB
   ══════════════════════════════════════════════════════════════════════════ */
.faq { display: grid; gap: 8px; max-width: 780px; }
.faq details { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.faq summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: var(--hit-min); padding: 16px 20px;
  cursor: pointer; list-style: none; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
/* Ochish/yopish belgisi — MATNSIZ, ikkita chiziqdan chizilgan.
   Ilgari bu yerda `content: "+"` va `content: "−"` turardi. `−` (U+2212)
   ASCII emas: fayl noto'g'ri kodlashda o'qilsa "â^" ga aylanadi, CSS escape
   (`‘2`) esa yig'ish zanjirida buzilishi mumkin. Geometriya bunday
   xatolarga umuman berilmaydi va ustiga bepul animatsiya beradi:
   ochilganda vertikal chiziq 90° buriladi va "+" "−" ga aylanadi. */
.faq summary::after {
  content: "";
  position: relative;
  width: 14px; height: 2px; flex-shrink: 0;
  border-radius: 2px;
  background: var(--fg-tertiary);
  transition: background var(--dur-fast) var(--ease-out);
}
.faq summary::before {
  content: "";
  position: absolute; right: 26px;
  width: 2px; height: 14px;
  border-radius: 2px;
  background: var(--fg-tertiary);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary::after,
.faq details[open] summary::before { background: var(--fg-brand); }
.faq summary:hover::after,
.faq summary:hover::before { background: var(--fg-primary); }
.faq p { padding: 0 20px 18px; color: var(--fg-secondary); font-size: var(--fs-md); max-width: 68ch; }

/* ══════════════════════════════════════════════════════════════════════════
   11. YAKUNIY CTA — chek qirrali blok (brend imzosi)
   ══════════════════════════════════════════════════════════════════════════ */
.cta-wrap { padding-bottom: calc(clamp(56px, 8vw, 96px) + 12px); }
.cta {
  --tear: 10px;
  max-width: 640px; margin: 0 auto;
  padding: 40px 32px 34px; text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-lg);
}
.cta h2 { margin-bottom: 12px; }
.cta p { color: var(--fg-secondary); margin-bottom: 24px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   12. ALOQA FORMASI
   ══════════════════════════════════════════════════════════════════════════ */
.contact { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); }
.contact__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1.1fr; } }
.contact__list { list-style: none; display: grid; gap: 16px; margin-top: 24px; }
.contact__list li { display: flex; gap: 12px; align-items: flex-start; }
.contact__list i { margin-top: 3px; color: var(--fg-brand); width: 18px; text-align: center; }
.contact__list a { text-decoration: none; font-weight: 500; }
.contact__list a:hover { color: var(--fg-brand); }

.form { display: grid; gap: 14px; }
.form__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--fg-secondary); }
.form input, .form textarea {
  width: 100%; min-height: var(--hit-min); padding: 12px 14px;
  border: 1.5px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-canvas); color: var(--fg-primary);
  font-family: var(--font-sans); font-size: var(--fs-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--border-brand); box-shadow: var(--ring-brand); }
.form__msg { padding: 12px 16px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 500; }
.form__msg[data-tone="error"]   { background: var(--bg-danger-subtle);  color: var(--fg-danger);  border: 1px solid var(--border-danger); }
.form__msg[data-tone="success"] { background: var(--bg-success-subtle); color: var(--fg-success); border: 1px solid var(--border-success); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.ftr { padding: 40px 0; border-top: 1px solid var(--border-subtle); }
.ftr__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.ftr .hdr__logo { display: flex; margin-bottom: 8px; }
.ftr .hdr__logo img { height: 30px; }
.ftr__links { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; }
.ftr a { font-size: var(--fs-md); color: var(--fg-secondary); text-decoration: none; }
.ftr a:hover { color: var(--fg-primary); }
.ftr__copy { font-size: var(--fs-sm); color: var(--fg-secondary); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL: yopishqoq pastki panel — 600px dan oshganda paydo bo'ladi
   ══════════════════════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sticky-cta.is-in { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 940px) { .sticky-cta { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   BREND INTROSI — 03-MOTION.md #1
   Sessiyada bir marta, 1.6s. Kassir kuniga 40 marta kirmaydi, lekin landing
   mehmoni ham ikkinchi marta ko'rishni xohlamaydi.
   ══════════════════════════════════════════════════════════════════════════ */
.ek-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg-canvas);
  animation: ek-fade-in 200ms var(--ease-out) both;
}
.ek-intro[hidden] { display: none; }
.ek-intro.is-out { animation: ek-intro-out 320ms var(--ease-in) both; }
@keyframes ek-intro-out { to { opacity: 0; visibility: hidden; } }

.ek-intro__stage { display: grid; justify-items: center; gap: 10px; }
.ek-intro__mark  { overflow: visible; }

/* Wordmark harflari 28ms oraliq bilan ko'tariladi (JS harflarga bo'ladi) */
.ek-intro__word {
  display: flex; gap: .01em;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: -.03em;
  color: var(--fg-primary);
}
.ek-intro__word .dot { color: var(--ek-green-600); }
.ek-intro__tag {
  font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-tertiary);
  animation: ek-fade-in 400ms var(--ease-out) 1400ms both;
}

.ek-intro__skip {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--hit-min); padding: 0 16px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-full);
  background: var(--bg-surface); color: var(--fg-secondary);
  font-family: var(--font-sans); font-size: var(--fs-sm); cursor: pointer;
  animation: ek-fade-in 300ms var(--ease-out) 700ms both;
}
.ek-intro__skip:hover { color: var(--fg-primary); border-color: var(--border-strong); }
.kbd-esc {
  padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
}

/* Vestibulyar buzilishi bo'lgan foydalanuvchida intro umuman ko'rsatilmaydi —
   uni "tezlashtirish" yetarli emas, u butunlay o'tkazib yuboriladi (JS da). */
@media (prefers-reduced-motion: reduce) { .ek-intro { display: none !important; } }