/* SAVAT - ishlaydigan UI (Faza 1). Brend token va komponentlar
   docs/TZ-SAVAT/05..08 maketlaridan olingan (00-MASTER "Ko'rinish namunasi"). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --shrift-sarlavha: Fraunces, Georgia, serif;
  --shrift-mono: "IBM Plex Mono", "Courier New", monospace;
  --shrift-matn: Karla, system-ui, -apple-system, sans-serif;
  --ink:#1B2A26;
  --paper:#FAF7F0;
  --accent:#E2601A;
  --good:#2F7D62;
  --bad:#B91C1C;
  --line:#DAD4C6;
  --muted:#6B7A73;
  /* Sirt rangi ALOHIDA token: mavzu almashganda kartochka foni o'zgarishi kerak,
     lekin to'ldirilgan tugma ustidagi matn (#fff) o'zgarmaydi. */
  --card:#FFFFFF;
  --chek:#FFFFFF;
  --shadow:rgba(27,42,38,.06);
  /* Yon menyu va jadval sarlavhasi IKKALA mavzuda ham to'q qoladi -
     aks holda qorong'i mavzuda menyu yorug' bo'lib teskari chiqardi. */
  --nav-bg:#1B2A26; --nav-fg:#FAF7F0;
}

/* ===========================================================================
   MAVZULAR. `<html data-theme="...">` orqali almashadi (app/web/deps.py::
   resolve_theme, `savat_theme` cookie). Faqat TOKEN qiymatlari o'zgaradi -
   joylashuv, o'lcham va komponentlar bir xil qoladi. Shuning uchun yangi
   ekran qo'shilganda u ikkala mavzuda ham avtomatik to'g'ri ko'rinadi.
   =========================================================================== */

/* BOZOR - iliq qog'oz (sukut bo'yicha). Kunduzgi yorug' zal uchun. */
[data-theme="bozor"]{
  --ink:#1B2A26; --paper:#FAF7F0; --accent:#E2601A; --good:#2F7D62;
  --bad:#B91C1C; --line:#DAD4C6; --muted:#6B7A73;
  --card:#FFFFFF; --chek:#FFFFFF; --shadow:rgba(27,42,38,.06);
  --nav-bg:#1B2A26; --nav-fg:#FAF7F0;
}

/* OBSIDIAN - qorong'i. 8 soatlik smenada ko'z kamroq charchaydi.
   `--paper` bu yerda FON degani (nomi tarixiy), `--ink` esa MATN. */
[data-theme="obsidian"]{
  --ink:#E8E5DE; --paper:#0F1412; --accent:#F0812E; --good:#5FD3A3;
  --bad:#F08A6A; --line:#2A322E; --muted:#8C9A93;
  --card:#161D1A; --chek:#FFFDF7; --shadow:rgba(0,0,0,.45);
  --nav-bg:#0A0F0D; --nav-fg:#E8E5DE;
}

body{
  font-family: var(--shrift-matn);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--shrift-sarlavha); font-weight: 900; line-height: 1.2; margin: 0 0 8px; }
.num, .mono { font-family: var(--shrift-mono); font-variant-numeric: tabular-nums; }
a { color: var(--accent); }

/* ===== Layout ===== */
.app-shell{ min-height:100vh; }
.sidebar{
  width:220px; flex-shrink:0; background: var(--nav-bg); color: var(--nav-fg);
  padding: 20px 0; position: fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:20;
}
.sidebar .brand{ font-family: var(--shrift-sarlavha); font-weight:700; font-size:20px; letter-spacing:.1em; padding: 0 20px 18px; border-bottom:1px solid color-mix(in srgb, var(--nav-fg) 18%, transparent); margin-bottom:10px;}
.sidebar .grp{ font-family:var(--shrift-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:color-mix(in srgb, var(--nav-fg) 55%, transparent); padding: 14px 20px 6px; }
.sidebar a.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 20px; color: var(--nav-fg); text-decoration:none; font-size:14px; opacity:.86; border-left:3px solid transparent; }
.sidebar a.nav-item .ic{ width:18px; height:18px; flex-shrink:0; opacity:.9; }
.sidebar a.nav-item.active .ic{ opacity:1; }
.sidebar a.nav-item .nav-tx{ min-width:0; }
.sidebar a.nav-item.active{ opacity:1; border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight:700; }
.sidebar .who{ padding: 16px 20px; margin-top: 14px; border-top:1px solid color-mix(in srgb, var(--nav-fg) 18%, transparent); font-size:12.5px; }
.sidebar .who b{ display:block; font-size:14px; }
.sidebar form{ padding: 0 20px; }
.sidebar .logout-btn{ width:100%; margin-top:10px; background:transparent; border:1px solid color-mix(in srgb, var(--nav-fg) 35%, transparent); color:var(--nav-fg); border-radius:5px; padding:7px; font-size:12px; cursor:pointer; font-family:inherit; }
.sidebar .menu-toggle{ display:none; }

.main{ min-width:0; margin-left:220px; padding: 24px 28px 60px; }
.main .wrap{ max-width: 1100px; margin: 0 auto; }
.page-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:10px 20px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.page-head .eyebrow{ font-family:var(--shrift-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); }

.topbar{ display:none; }

@media (max-width: 860px){
  .sidebar{ position: fixed; left:-240px; top:0; z-index:40; transition: left .18s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .sidebar.open{ left:0; }
  .topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--nav-bg); color:var(--nav-fg); padding:12px 16px; position: sticky; top:0; z-index:30; }
  .topbar .brand{ font-family: var(--shrift-sarlavha); font-weight:700; letter-spacing:.08em; }
  .topbar button{ background:none; border:1px solid color-mix(in srgb, var(--nav-fg) 40%, transparent); color:var(--nav-fg); border-radius:5px; padding:6px 10px; font-family:inherit; }
  .main{ padding: 16px 14px 50px; margin-left:0; }
}

/* ===== Card / Panel ===== */
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:18px; }
.card h3{ font-size:17px; margin-bottom:12px; }
.grid-2{ display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; }
@media (max-width: 760px){ .grid-2{ grid-template-columns: 1fr; } }

/* ===== Forms ===== */
label{ display:block; font-size:12px; color: var(--muted); margin-bottom:4px; font-family:var(--shrift-mono); text-transform:uppercase; letter-spacing:.04em; }
.field{ margin-bottom:14px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:6px; background: var(--paper);
  font-family: var(--shrift-matn); font-size:14px; color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-row{ display:flex; flex-wrap:wrap; gap:12px; }
.form-row > .field{ flex:1 1 160px; min-width:0; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink); }
.checkbox-row input{ width:auto; }
.hint{ font-size:12px; color: var(--muted); margin-top:3px; }
.majburiy-tag{
  display:inline-flex; align-items:center; gap:5px; border:1.5px dashed var(--bad); color: var(--bad);
  font-family:var(--shrift-mono); font-size:10px; padding:2px 7px; border-radius:4px; background: rgba(185,28,28,.06);
  margin-left:6px; vertical-align:middle;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--shrift-mono); font-size:13px; letter-spacing:.02em;
  padding:9px 16px; border:1.5px solid var(--ink); border-radius:6px; color: var(--ink); background:var(--card);
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff; box-shadow:0 2px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn.good{ background: var(--good); border-color: var(--good); color:#fff; }
.btn.danger{ border-color: var(--bad); color: var(--bad); }
.btn.small{ padding:5px 10px; font-size:11.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
/* Teginish nishoni: barmoq bilan boshqariladigan ekranda (planshet/telefon)
   `.btn.small` 44x44 dan kichik bo'lmasin (WCAG 2.5.5). Sichqonchali
   ekranda o'lcham O'ZGARMAYDI - jadval qatorlari baland bo'lib ketmasin. */
@media (pointer: coarse){
  .btn.small{ min-height:44px; padding:11px 14px; }
}

/* ===== Tables ===== */
.table-scroll{ overflow-x:auto; }
table.jadval{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
table.jadval th{ font-family:var(--shrift-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; text-align:left; background: var(--nav-bg); color: var(--nav-fg); padding:9px 10px; white-space:nowrap; }
table.jadval td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.jadval tbody tr:nth-child(even){ background: rgba(27,42,38,.03); }
table.jadval td.num, table.jadval th.num{ font-family:var(--shrift-mono); text-align:right; }
table.jadval tfoot td{ font-weight:700; border-top:2px solid var(--ink); border-bottom:none; }

/* ===== Badges ===== */
.holat{ display:inline-block; font-family:var(--shrift-mono); font-size:10.5px; letter-spacing:.03em; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.holat.good{ background: rgba(47,125,98,.14); color: var(--good); }
.holat.mid{ background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.holat.bad{ background: rgba(185,28,28,.12); color: var(--bad); }
.holat.muted{ background: rgba(107,122,115,.14); color: var(--muted); }

/* ===== Flash ===== */
.flash{ padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:14px; display:flex; gap:10px; align-items:flex-start; }
.flash.success{ background: rgba(47,125,98,.1); border:1px solid var(--good); color: var(--ink); }
.flash.error{ background: rgba(185,28,28,.08); border:1.5px dashed var(--bad); color: var(--ink); }
.flash.warning{ background: color-mix(in srgb, var(--accent) 10%, transparent); border:1.5px solid var(--accent); color: var(--ink); }
.flash .flash-havola{ margin-left:12px; font-weight:600; color: var(--accent); white-space:nowrap }
.flash .code{ font-family:var(--shrift-mono); font-size:11px; color: var(--muted); display:block; margin-top:4px; }

/* ===== Stat tiles ===== */
.stat-tiles{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom: 20px; }
.stat-tile{ flex:1 1 150px; min-width:150px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.stat-tile .lbl{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); font-family:var(--shrift-mono); }
.stat-tile .val{ display:block; font-family:var(--shrift-mono); font-size:19px; margin-top:6px; font-weight:600; color: var(--ink); }
.stat-tile.jami{ background: var(--nav-bg); border-color: var(--nav-bg); }
.stat-tile.jami .lbl{ color: color-mix(in srgb, var(--nav-fg) 60%, transparent); }
.stat-tile.jami .val{ color: var(--accent); }
.stat-tile.bad{ border-color: var(--bad); } .stat-tile.bad .val{ color: var(--bad); }
.stat-tile.good{ border-color: var(--good); } .stat-tile.good .val{ color: var(--good); }

/* ===== POS ===== */
.pos-scan{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; background: color-mix(in srgb, var(--accent) 7%, transparent); border:1px dashed var(--accent); border-radius:8px; padding:14px 16px; margin-bottom:18px; }
.pos-scan .field{ margin-bottom:0; flex:1 1 220px; }
.pos-row{ display:grid; grid-template-columns:1fr auto auto auto; gap:4px 14px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px; align-items:baseline; }
.pos-row .qty{ color: var(--muted); font-size:12px; font-family:var(--shrift-mono); }
.pos-jami{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; margin-top:8px; border-top:2px solid var(--ink); }
.pos-jami .lbl{ font-size:14px; color: var(--muted); }
.pos-jami .son{ font-size:30px; font-weight:600; color: var(--ink); font-family:var(--shrift-mono); }
.pos-remaining{ font-family:var(--shrift-mono); font-size:13px; margin-top:8px; }
.pos-remaining.zero{ color: var(--good); font-weight:700; }
.pos-remaining.pending{ color: var(--bad); }

.chek-chop{ max-width:340px; margin:0 auto; background:var(--chek); border:1px solid var(--line); border-radius:6px; padding:20px 22px 22px; font-family:var(--shrift-mono); font-size:12px; color: var(--ink); }
.chek-chop .markaz{ text-align:center; }
.chek-chop .dokon-nomi{ font-family: var(--shrift-sarlavha); font-weight:900; font-size:17px; }
.chek-chop .chiziq{ border-top:1px dashed var(--line); margin:10px 0; }
.chek-chop .qator{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.chek-chop .qator b{ font-weight:600; }
.chek-chop .yakun{ text-align:center; margin-top:10px; font-weight:700; letter-spacing:.03em; }

.empty-state{ padding:26px; text-align:center; color: var(--muted); font-size:14px; border:1px dashed var(--line); border-radius:10px; }

/* ===== Utility ===== */
.muted{ color: var(--muted); }
.mb-0{ margin-bottom:0 !important; }
.mt-16{ margin-top:16px; }
.small{ font-size:12.5px; }
/* Vizual yashirish - `hidden` atributi o'rniga: elementni ekrandan olib
   tashlaydi, lekin Tab tartibida va skrin-riderda QOLDIRADI (masalan
   `<label>` ichidagi `<input type=file>` - shunda klaviaturadan ham
   ishlaydi, faqat sichqonchada emas). */
.vizual-yashirin{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ===== Mavzu almashtirgich (yon menyu tagida) ===== */
.mavzu{ display:flex; gap:6px; margin:14px 14px 0; }
.mavzu-btn{
  flex:1; padding:7px 4px; border:1px solid color-mix(in srgb, var(--nav-fg) 22%, transparent); border-radius:7px;
  background:transparent; color:var(--nav-fg); opacity:.62; cursor:pointer;
  font-family:var(--shrift-mono); font-size:11px; letter-spacing:.06em;
  transition:background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .18s var(--ease-out);
}
.mavzu-btn.on{ opacity:1; background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== Kassa sotuv oynasi (maket 08 · 1-ekran) =============================
   Barcha rang TOKEN orqali - shuning uchun `bozor` va `obsidian` mavzularida
   bir xil joylashuv, boshqa palitra. Qotirilgan rang YO'Q. */
.kassa-top{ display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.kassa-top h2{ margin:0; }
.kassa-meta{ margin-left:auto; text-align:right; font-size:11px; color:var(--muted);
  letter-spacing:.05em; line-height:1.5; }
.kassa-h{ font-size:24px; }

.skan-qatori{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card);
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  border-left:4px solid var(--accent); border-radius:0 8px 8px 0;
  padding:11px 15px; margin-bottom:16px; animation:skanKir .12s var(--ease-out); }
@keyframes skanKir{ from{ opacity:0; transform:translateY(-6px); } }
.skan-qatori .kod{ font-size:13px; color:var(--accent); font-weight:600; }
.skan-qatori .nomi{ font-size:14px; }
.skan-qatori .belgi{ margin-left:auto; font-size:12px; color:var(--good); font-weight:600; }

.kassa-panel{ display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start; }
@media (max-width:1100px){ .kassa-panel{ grid-template-columns:1fr; } }

.skan-form{ display:flex; gap:8px; margin-bottom:14px; }
.skan-inp{ flex:1; padding:13px 15px; border:1.5px solid var(--accent); border-radius:9px;
  background:var(--card); color:var(--ink); font-family:var(--shrift-mono); font-size:14px; }
.skan-qty{ width:74px; padding:13px 10px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--ink); font-family:var(--shrift-mono); text-align:center; }
.skan-narx{ width:150px; padding:13px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--ink); font-family:var(--shrift-mono); }

.tovar-tor{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:760px){ .tovar-tor{ grid-template-columns:repeat(2,1fr); } }
/* Kartochka grid katagini TO'LIQ egallashi kerak. `.tovar-kart` - `<form>`,
   ya'ni grid elementi; u `stretch` bilan cho'ziladi, lekin ichidagi tugma
   oddiy blok bo'lgani uchun o'z matniga qarab qisqa qolardi. Natijada nomi
   bir qatorli kartochka past, ikki qatorlisi baland bo'lib, jadval tishli
   ko'rinardi. Forma flex bo'lsa - tugma balandlikni meros oladi. */
.tovar-kart{ margin:0; display:flex; }
.tovar-btn{ width:100%; height:100%; text-align:left; cursor:pointer; padding:13px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); display:flex; flex-direction:column; gap:7px; min-height:78px;
  transition:transform .18s, border-color .18s, box-shadow .18s; }
.tovar-rasm{ width:100%; height:88px; object-fit:cover; border-radius:8px;
  background:var(--paper); display:block; }
.katalog-rasm{ width:34px; height:34px; object-fit:cover; border-radius:6px;
  vertical-align:middle; margin-right:9px; border:1px solid var(--line); }
.rasm-katak{ width:52px; }
.rasm-yuk{ display:inline-block; cursor:pointer; position:relative; line-height:0; }
.rasm-yuk .katalog-rasm{ margin:0; transition:filter .15s ease, box-shadow .15s ease; }
.rasm-yuk:hover .katalog-rasm{ filter:brightness(.82); box-shadow:0 0 0 2px var(--accent); }
.rasm-plus{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px dashed var(--line); border-radius:6px; color:var(--muted); font-size:20px; }
.rasm-yuk:hover .rasm-plus{ border-color:var(--accent); color:var(--accent); }
/* Fayl maydoni endi `.vizual-yashirin` bilan yashirilgan (Tab'da qoladi) -
   klaviaturadan fokus olganda ko'rinadigan halqa kerak (aks holda fokus
   bor-yo'qligi umuman ko'rinmas edi). */
.rasm-yuk:focus-within{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
/* Nom uchun IKKI qatorlik joy zaxiralanadi: shunda bir qatorli va ikki qatorli
   nomlarda narx bir xil balandlikda turadi. Matn KESILMAYDI - uch qatorli nom
   ham to'liq ko'rinadi (kesish uzun tovar nomini yashirib, kassirni adashtiradi). */
.tovar-nom{ font-size:12.5px; line-height:1.3; min-height:2.6em; }
.tovar-narx{ font-size:16px; font-weight:600; color:var(--accent); margin-top:auto; }

.kassa-savat{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; position:sticky; top:14px; }
.savat-bosh{ display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:8px; }
.savat-bosh h3{ margin:0; font-size:19px; }
/* Mijoz bloki (M10). Savatning tepasida, jamiga YAQIN emas - kassir
   bonusni to'lov paytida emas, chek BOSHIDA biriktiradi. */
.mijoz-blok{ display:flex; gap:8px; align-items:center; margin:0 0 10px;
  padding:8px 10px; border:1px dashed var(--line); border-radius:8px; }
.mijoz-blok input{ flex:1; min-width:0; padding:7px 9px; border-radius:6px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:13px; }
.mijoz-blok .btn.kichik{ padding:7px 12px; font-size:13px; }
.mijoz-blok.bor{ border-style:solid; border-color:var(--good);
  flex-wrap:wrap; row-gap:2px; }
.mijoz-blok .mijoz-ism{ font-weight:600; font-size:14px; }
.mijoz-blok .mijoz-tel{ flex:1; }
.mijoz-blok .mijoz-bonus{ color:var(--good); font-weight:600; font-size:14px; }

/* Savat qatori. Har element ANIQ maydonga bog'lanadi - ilgari `.q-storno` da
   faqat `grid-row` bor edi, ustunni grid o'zi tanlardi va `x` tugma qatordan
   qatorga sakrardi. `minmax(0,1fr)` SHART: oddiy `1fr` = `minmax(auto,1fr)`,
   ya'ni ustun kontentdan kichik bo'la olmaydi - uzun tovar nomi narx ustunini
   siqib, summani ikki qatorga bo'lib yuborardi. */
.savat-qator{ display:grid; grid-template-columns:minmax(0,1fr) auto 26px;
  grid-template-areas:"nom sum storno" "izoh izoh storno" "imei imei storno"; gap:4px 8px;
  padding:10px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.savat-qator .q-nom{ grid-area:nom; font-size:13.5px; min-width:0; overflow-wrap:anywhere; }
.savat-qator .q-sum{ grid-area:sum; font-size:15px; font-weight:600; text-align:right;
  white-space:nowrap; }
.savat-qator .q-izoh{ grid-area:izoh; font-size:11.5px; color:var(--muted); }
.savat-qator .eski{ text-decoration:line-through; }
.savat-qator .aksiya{ color:var(--good); font-weight:600; }
.savat-qator .q-imei{ grid-area:imei; font-size:11.5px; color:var(--ink); }
.imei-sorov{ border:2px solid var(--accent); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.imei-sorov-bosh{ font-weight:600; margin-bottom:6px; }
.q-storno{ grid-area:storno; align-self:center; margin:0; }
.ikon-btn{ border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:6px; width:24px; height:24px; cursor:pointer; line-height:1; font-size:15px; }
.savat-jami{ display:flex; justify-content:space-between; align-items:baseline;
  margin-top:12px; padding-top:12px; border-top:2px solid var(--ink); }
.savat-jami .lbl{ font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.savat-jami .son{ font-size:30px; font-weight:600; }
.tejaldi{ font-size:12px; color:var(--good); margin-top:5px; }

.tolov-form{ margin-top:14px; }
/* Faza C: bonus sarflash OTP paneli (karta yonida bo'lmasa) */
.otp-panel{ margin-top:12px; padding:10px 12px; border:1px solid #FED7AA;
  background:#FFF7ED; border-radius:10px; display:flex; flex-direction:column; gap:8px; }
.otp-izoh{ font-size:12.5px; color:#9A3412; line-height:1.4; }
.otp-yubor-form{ display:inline; }
.otp-input{ padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--shrift-mono); font-size:16px; letter-spacing:.15em; width:170px; }
.tolov-uch{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tolov-uch label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--muted); }
.tolov-uch input{ padding:10px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); font-family:var(--shrift-mono); width:100%; }
.btn.katta{ width:100%; margin-top:12px; padding:16px; font-size:16px;
  display:flex; justify-content:center; gap:10px; align-items:center; }
.btn.katta kbd{ font-family:var(--shrift-mono); font-size:11px;
  border:1px solid rgba(255,255,255,.5); border-radius:4px; padding:1px 6px; }

.storno-oyna{ border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  background:var(--card); color:var(--ink); width:min(400px, calc(100vw - 32px)); }
.storno-oyna::backdrop{ background:rgba(27,42,38,.45); }
.storno-oyna h3{ margin:0 0 6px; }
.storno-oyna form{ display:flex; flex-direction:column; gap:10px; }
.storno-oyna .so-nom{ font-size:13px; color:var(--accent); }
.storno-oyna .so-izoh{ font-size:12.5px; color:var(--muted); margin:0; }
.storno-oyna label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.storno-oyna input{ padding:10px 11px; border:1px solid var(--line); border-radius:7px;
  background:var(--paper); color:var(--ink); font-size:14px; }
.storno-oyna .so-tugmalar{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }

.fk-panel{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.fk{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; }
.fk summary{ cursor:pointer; list-style:none; display:flex; gap:9px; align-items:baseline; }
.fk summary::-webkit-details-marker{ display:none; }
.fk b{ font-family:var(--shrift-mono); font-size:12.5px; color:var(--accent); }
.fk span{ font-size:12.5px; color:var(--muted); }
.fk-form{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.fk-form input, .fk-form select{ padding:9px 11px; border:1px solid var(--line);
  border-radius:7px; background:var(--paper); color:var(--ink); font-size:13px; }
.fk-link{ background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; text-decoration:none; display:flex; gap:9px; align-items:baseline; }

/* ===== Obsidian / Obsidian Pro pardozi ====================================
   Maket `10-KASSA-PREMIUM-DIZAYN.html` (A) va `11-KASSA-PREMIUM-2.html` (D).
   Hammasi TOKEN orqali - shuning uchun Tun mavzusida shisha-qorong'i,
   Kunduz mavzusida esa iliq-qog'oz ko'rinishda chiqadi. */

/* jonli holat nuqtasi */
.jonli{ display:inline-flex; align-items:center; gap:6px; color:var(--good); font-size:10px; letter-spacing:.14em; }
.nuqta{ width:6px; height:6px; border-radius:50%; background:var(--good); animation:puls 2.4s infinite; }
@keyframes puls{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
                 70%{ box-shadow:0 0 0 8px transparent; } }

/* bosqich ko'rsatkichi */
.bosqich{ display:flex; gap:8px; margin-bottom:13px; }
.bosqich .q{ font-family:var(--shrift-mono); font-size:10px; letter-spacing:.13em;
  padding:6px 12px; border-radius:100px; border:1px solid var(--line); color:var(--muted); }
.bosqich .q.on{ border-color:var(--accent); color:var(--accent);
  background:transparent;
  background:color-mix(in srgb, var(--accent) 12%, transparent); }

/* shisha kartochka + amber narx (Obsidian) */
.tovar-btn{ background:linear-gradient(160deg,
    color-mix(in srgb, var(--ink) 5%, var(--card)), var(--card)); }
/* Gradient matn FAQAT `color-mix` qo'llab-quvvatlansa yoqiladi. Aks holda
   `background` e'loni tashlanadi, `-webkit-text-fill-color:transparent` esa
   QOLADI va matn BUTUNLAY ko'rinmay qoladi - eski mobil brauzerda narx va
   jami summa yo'qolardi. `@supports` ikkalasini birga yoqadi yoki o'chiradi. */
.tovar-narx{ color:var(--accent); }
@supports (background: color-mix(in srgb, red 50%, blue)){
  .tovar-narx{
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 70%, #F2A65A), var(--accent));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}
.tovar-tor .tovar-kart{ animation:kart .2s var(--ease-out) both; }
.tovar-tor .tovar-kart:nth-child(1){ animation-delay:.02s } .tovar-tor .tovar-kart:nth-child(2){ animation-delay:.05s }
.tovar-tor .tovar-kart:nth-child(3){ animation-delay:.08s } .tovar-tor .tovar-kart:nth-child(4){ animation-delay:.11s }
.tovar-tor .tovar-kart:nth-child(5){ animation-delay:.14s } .tovar-tor .tovar-kart:nth-child(6){ animation-delay:.17s }
.tovar-tor .tovar-kart:nth-child(7){ animation-delay:.2s }  .tovar-tor .tovar-kart:nth-child(8){ animation-delay:.23s }
@keyframes kart{ from{ opacity:0; transform:translateY(6px); } }

/* jami - gradient katta raqam */
.savat-jami .son{ font-size:34px; letter-spacing:-.02em; color:var(--ink); }
@supports (background: color-mix(in srgb, red 50%, blue)){
  .savat-jami .son{
    background:linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 62%, var(--paper)));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}

/* tez summa (Obsidian Pro) */
.tez-summa{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:11px; }
.tz{ padding:11px 4px; border:1px solid var(--line); border-radius:9px; background:transparent;
  color:var(--ink); font-family:var(--shrift-mono); font-size:12px; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .18s var(--ease-out); }
/* QAYTIM - ekrandagi eng yorqin element */
.qaytim-blok{ margin-top:11px; padding:16px 18px; border-radius:14px; text-align:center;
  border:1px solid var(--good);
  border:1px solid color-mix(in srgb, var(--good) 45%, transparent);
  background:transparent;
  background:linear-gradient(150deg, color-mix(in srgb, var(--good) 16%, transparent), transparent);
  animation:kart .22s var(--ease-out); }
.qaytim-blok .ql{ display:block; font-family:var(--shrift-mono); font-size:10.5px;
  letter-spacing:.22em; color:var(--good); }
.qaytim-blok .qs{ display:block; font-size:46px; font-weight:600; line-height:1.05; margin-top:6px;
  color:var(--good); letter-spacing:-.03em; }

/* ekran raqam klaviaturasi */
.raqam-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:11px; }
.rk{ padding:14px 0; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  color:var(--ink); font-family:var(--shrift-mono); font-size:18px; font-weight:600;
  cursor:pointer; transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s var(--ease-out); }
.rk.ochir{ color:var(--bad); }

/* Sensorli kassa terminalida hover tegingandan keyin YOPISHIB QOLADI —
   kassir noto'g'ri tovar tanlangan deb o'ylaydi. Faqat haqiqiy sichqoncha. */
@media (hover:hover) and (pointer:fine){
  .sidebar a.nav-item:hover{opacity:1; background: color-mix(in srgb, var(--nav-fg) 6%, transparent);}
  .btn:hover{background: rgba(27,42,38,.06);}
  .btn.primary:hover{filter:brightness(1.05);}
  .btn.danger:hover{background: rgba(185,28,28,.06);}
  table.jadval tbody tr:hover{background: color-mix(in srgb, var(--accent) 5%, transparent);}
  .mavzu-btn:hover{opacity:1; border-color:var(--accent);}
  .tovar-btn:hover{transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 10px 22px -10px var(--shadow);}
  .ikon-btn:hover{border-color:var(--bad); color:var(--bad);}
  .tz:hover{border-color:var(--accent); color:var(--accent);
  background:transparent;
  background:color-mix(in srgb, var(--accent) 10%, transparent);}
  .rk:hover{background:var(--line);
  background:color-mix(in srgb, var(--ink) 8%, var(--paper)); transform:translateY(-1px);}
}

/* Barmoq tugmani yopadi — bosilganini ko'rsatadigan yagona narsa shu.
   Bo'lmasa kassir «bosildimi?» deb ikkinchi marta bosadi. */
.btn:active, .tz:active, .rk:active, .tovar-btn:active,
.mavzu-btn:active, .ikon-btn:active{ transform:scale(.97) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:1ms !important;
    animation-duration:1ms !important; animation-iteration-count:1 !important }
  .nuqta{ animation:none }   /* cheksiz puls — harakat sezgirlar uchun to'xtaydi */
}


/* ==================== KASSA: TO'LIQ EKRAN (B varianti) ====================
   Kassir 8 soat bitta ekranda turadi va yon menyuga bosmaydi — menyu +
   topbar ekranning ~15% ini egallardi. `body.kassa-tolik` faqat kassa
   sahifasida qo'yiladi, boshqa modullar tegilmaydi. */
body.kassa-tolik .topbar,
body.kassa-tolik .sidebar{ display:none }
body.kassa-tolik .app-shell{ display:block }
body.kassa-tolik .main{ padding:0; margin-left:0 }
body.kassa-tolik .main .wrap{ max-width:none; padding:10px 14px 14px }

/* Ixcham sarlavha — bir qator */
.kassa-tp{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--nav-bg); color:var(--nav-fg); border-radius:10px;
  padding:9px 14px; margin-bottom:10px }
.kassa-tp .tp-nom{ font-size:16px }
.kassa-tp .tp-ong{ margin-left:auto; display:flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.05em; color:#9AA9A1; flex-wrap:wrap }
.kassa-tp .btn.kichik{ background:transparent; color:var(--nav-fg);
  border-color:color-mix(in srgb, var(--nav-fg) 24%, transparent); padding:5px 11px; font-size:12px }

/* `display:contents` — `kassa-chap` bolalari to'g'ridan grid item bo'ladi,
   shunda barkod / savat / tovar to'ri mustaqil joylashadi. HTML tegilmaydi. */
body.kassa-tolik .kassa-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:
    "skan  ong"
    "savat ong"
    "tovar ong"
    "slot  ong";
  gap:10px 12px;
  min-height:calc(100vh - 96px);
}
body.kassa-tolik .kassa-chap{ display:contents }
body.kassa-tolik .skan-form{ grid-area:skan; margin:0 }
body.kassa-tolik .bosqich{ display:none }   /* B da bosqich ko'rsatkichi yo'q */
body.kassa-tolik .kassa-savat{ grid-area:savat; overflow:auto; border-left:none;
  background:transparent; padding:0 }
body.kassa-tolik .tovar-blok{ grid-area:tovar; margin:0; align-self:end }
body.kassa-tolik .tovar-tor{ margin:0; border-top:none; padding-top:0 }
body.kassa-tolik .kassa-ong{ grid-area:ong; background:var(--card);
  border:1px solid var(--line); border-radius:11px; padding:14px;
  display:flex; flex-direction:column; gap:10px; align-self:start;
  position:sticky; top:10px }

/* Barkod — kassirning asosiy kirish nuqtasi, shuning uchun kattaroq */
body.kassa-tolik .skan-inp{ font-size:16px; padding:14px 12px }

/* Savat qatorlari kattaroq — ular endi asosiy maydonda */
body.kassa-tolik .savat-qator .q-nom{ font-size:15.5px }
body.kassa-tolik .savat-qator .q-sum{ font-size:18px; font-weight:600 }

/* Jami — o'ng ustunning eng katta raqami */
body.kassa-tolik .savat-jami{ display:flex; justify-content:space-between;
  align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:9px }
body.kassa-tolik .savat-jami .son{ font-size:32px; letter-spacing:-.01em }

/* Tovar to'ri pastda — zaxira yo'l, asosiysi skanerlash */
body.kassa-tolik .tovar-tor{ grid-template-columns:repeat(auto-fill,minmax(148px,1fr)) }
body.kassa-tolik .tovar-btn{ padding:9px 11px }
body.kassa-tolik .tovar-btn .nom{ font-size:12.5px }

body.kassa-tolik .ong-bosh{ text-align:center; padding:22px 8px; line-height:1.7 }

@media(max-width:1000px){
  body.kassa-tolik .kassa-panel{
    grid-template-columns:1fr;
    grid-template-areas:"skan" "ong" "savat" "tovar";
    min-height:0;
  }
  body.kassa-tolik .kassa-ong{ position:static }
}

/* Sarlavha ixcham — bir qatorga siqiladi, balandlik savatga qoladi */
body.kassa-tolik .kassa-top{ align-items:center; gap:10px; margin-bottom:8px }
body.kassa-tolik .kassa-top .eyebrow{ display:none }
body.kassa-tolik .kassa-h{ font-size:19px }
body.kassa-tolik .kassa-meta{ font-size:10.5px; line-height:1.4 }

/* Barkod qatori: flex hisobida barkod maydoni siqilib qolardi —
   grid bilan aniq ulush beramiz. Barkod eng keng bo'lishi SHART:
   kassirning asosiy kirish nuqtasi shu. */
body.kassa-tolik .skan-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px 140px auto;
  gap:8px; align-items:stretch;
}
body.kassa-tolik .skan-inp{ width:100%; font-size:16px; padding:14px 14px }
body.kassa-tolik .skan-qty,
body.kassa-tolik .skan-narx{ width:100% }

/* Savat ustuni scroll bo'lganda scrollbar «3 qator» yozuvini kesardi */
body.kassa-tolik .kassa-savat{ padding-right:6px }
body.kassa-tolik .savat-bosh{ position:sticky; top:0; z-index:2;
  background:var(--paper); padding-bottom:6px }

/* «NAQD (BERILGAN)» yorlig'i ikki qatorga tushadi, «KARTA»/«BONUS» bir qatorda —
   shuning uchun maydonlar past-baland bo'lib qolardi. `margin-top:auto`
   inputlarni pastdan tekislaydi, yorliq uzunligidan qat'i nazar. */
.tolov-uch label{ justify-content:flex-end; min-height:100% }
.tolov-uch label input{ margin-top:auto }
.tolov-uch{ align-items:stretch }

/* Mijoz biriktirilmaguncha bonus maydoni yopiq — kassir uni bosib ko'rib,
   keyin xato olishdan ko'ra darhol ko'rishi yaxshiroq. */
.tolov-uch label.ochiq-emas{ opacity:.45 }
.tolov-uch label.ochiq-emas input{ cursor:not-allowed; background:var(--line) }

/* ---- Slotlar: bir vaqtda ochiq cheklar ---- */
.slot-blok{ margin-top:12px; padding-top:11px; border-top:1px dashed var(--line) }
.slot-bosh{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap }
.slot-sarlavha{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) }
.slot-hisob{ font-size:12px; color:var(--muted) }
.slot-bosh .yangi{ margin-left:auto; border-color:var(--accent); color:var(--accent) }
.slotlar{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:7px }
.slot{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; min-height:62px;
  text-decoration:none; color:var(--ink); background:var(--card);
  transition:border-color .14s ease, transform .14s var(--ease-out) }
.slot:active{ transform:scale(.97) }
.slot .s-no{ font-size:11px; color:var(--muted) }
.slot .s-sum{ font-size:15px; font-weight:600; line-height:1.2 }
.slot .s-qator{ font-size:11px; color:var(--muted) }
.slot.bosh{ border-style:dashed; background:transparent; justify-content:center }
.slot.bosh .s-bosh{ font-size:12px; color:var(--muted) }
.slot.band{ border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent) }
.slot.faol{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.slot.faol .s-no, .slot.faol .s-qator{ color:#9AA9A1 }
@media (hover:hover) and (pointer:fine){
  .slot.band:hover, .slot.bosh:hover{ border-color:var(--ink) }
}

/* ---- Tovar to'ri: yopiq, tugma bilan ochiladi ---- */
.tovar-blok{ margin-top:10px; border-top:1px dashed var(--line); padding-top:10px }
.tovar-ochish{ display:flex; align-items:center; gap:10px; cursor:pointer;
  list-style:none; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); user-select:none;
  transition:border-color .14s ease, transform .14s var(--ease-out) }
.tovar-ochish::-webkit-details-marker{ display:none }
.tovar-ochish:active{ transform:scale(.99) }
.tovar-ochish::before{ content:"▸"; color:var(--muted); font-size:13px;
  transition:transform .16s var(--ease-out) }
details[open] > .tovar-ochish::before{ transform:rotate(90deg) }
.tb-nom{ font-weight:600; font-size:14px }
.tb-soni{ font-size:12px; color:var(--muted); font-family:var(--shrift-mono) }
.tb-ishora{ margin-left:auto; font-size:11.5px; color:var(--muted) }
.tovar-blok .tovar-tor{ margin-top:9px }

/* Guruh filtri */
.guruh-filtr{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px }
.gf{ border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:17px; padding:6px 13px; font:inherit; font-size:12.5px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, transform .14s var(--ease-out) }
.gf:active{ transform:scale(.97) }
.gf.on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
@media (hover:hover) and (pointer:fine){ .gf:hover{ border-color:var(--ink) } }

/* Chap ustun: savat o'zi scroll qiladi, tovar bloki va slotlar pastda
   QOTIRILGAN turadi — kassir uzun chekni ko'rib turib ham slotlarni
   yo'qotmaydi. `min-height:0` bo'lmasa grid item kontentdan kichrayolmaydi
   va scroll o'rniga butun ustun cho'ziladi. */
body.kassa-tolik .kassa-savat{ min-height:0; overflow-y:auto; overscroll-behavior:contain }
body.kassa-tolik .slot-blok{ grid-area:slot; margin:0; align-self:end }
body.kassa-tolik .tovar-blok{ align-self:end }

/* F-tugmalar endi o'ng ustunda, kalkulyator tagida — ixcham qatorda */
body.kassa-tolik .kassa-ong .fk-panel{ margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line); gap:6px }
body.kassa-tolik .kassa-ong .fk{ padding:7px 10px; flex:1; min-width:0 }
body.kassa-tolik .kassa-ong .fk summary{ font-size:12px; white-space:nowrap }
body.kassa-tolik .kassa-ong .fk-link{ padding:7px 10px; font-size:12px }


/* ============================================================ SOZLAMALAR
   Ekran: /settings. Mijoz o'z faoliyat turini, modullarini va chegaralarini
   shu yerda sozlaydi. Guruhlar alohida forma - bir maydondagi xato boshqa
   guruhdagi kiritilgan qiymatlarni yo'qotmaydi. */

.soz-ogoh{
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius:10px; padding:12px 14px; margin-bottom:18px;
  font-size:13px; line-height:1.55;
}

.soz-nav{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;
  position:sticky; top:0; z-index:5;
  background:var(--paper); padding:8px 0;
}
.soz-nav a{
  font-size:12px; padding:6px 12px; border-radius:99px;
  border:1px solid var(--line); color:var(--muted);
  text-decoration:none; white-space:nowrap;
  transition:color 160ms var(--ease-out), border-color 160ms var(--ease-out),
             background-color 160ms var(--ease-out);
}
.soz-nav a:hover{ color:var(--ink); border-color:var(--accent); }
.soz-nav a:active{ transform:scale(.97); }

/* Rekvizit - o'qish uchun juftliklar */
.soz-rekvizit{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px 24px; margin-top:10px;
}
.soz-rekvizit > div{
  display:flex; flex-direction:column; gap:2px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.soz-k{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* Sozlama qatorlari */
.soz-list{ display:flex; flex-direction:column; }
.soz-qator{
  display:flex; align-items:flex-start; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.soz-qator:last-child{ border-bottom:0; }
.soz-chap{ flex:1 1 auto; min-width:0; }
.soz-chap > label{ font-weight:600; font-size:14px; display:block; margin-bottom:2px; }
.soz-ong{ flex:0 0 220px; display:flex; justify-content:flex-end; padding-top:2px; }

.soz-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; font-size:11px; }
.soz-meta .mono{ color:var(--muted); }
.soz-modul{
  color:var(--muted); padding:1px 7px; border-radius:99px;
  border:1px solid var(--line);
}

.soz-tag{
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:99px; vertical-align:middle; margin-left:6px;
  font-weight:600;
}
.soz-tag.standart{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.soz-tag.ulanmagan{
  background:color-mix(in srgb, var(--muted) 14%, transparent);
  color:var(--muted);
  border:1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}

/* Son maydoni + birlik */
.soz-son{ display:flex; align-items:center; gap:8px; width:100%; }
.soz-son input{ width:100%; text-align:right; }
.soz-birlik{ font-size:12px; color:var(--muted); flex:0 0 auto; min-width:44px; }
.soz-ong select, .soz-ong > input[type=text]{ width:100%; }

/* Bayroq (switch). Nima uchun checkbox emas, switch: bayroq "yoqilgan/o'chiq"
   holatini bildiradi va uni bir qarashda ko'rish kerak. */
.soz-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.soz-switch input{ position:absolute; opacity:0; width:0; height:0; }
.soz-slider{
  flex:0 0 auto; width:42px; height:24px; border-radius:99px;
  background:var(--line); position:relative;
  transition:background-color 180ms var(--ease-out);
}
.soz-slider::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:var(--card);
  box-shadow:0 1px 3px var(--shadow);
  transition:transform 180ms var(--ease-out);
}
.soz-switch input:checked + .soz-slider{ background:var(--good); }
.soz-switch input:checked + .soz-slider::after{ transform:translateX(18px); }
.soz-switch input:focus-visible + .soz-slider{ outline:2px solid var(--accent); outline-offset:2px; }
.soz-switch:active .soz-slider{ transform:scale(.97); }
.soz-holat{ font-size:12px; color:var(--muted); min-width:62px; }

.soz-amal{
  display:flex; align-items:center; gap:14px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}

.soz-tavsiya{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:color-mix(in srgb, var(--good) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--good) 28%, var(--line));
  border-radius:10px; padding:12px 14px; margin:12px 0 4px;
}

.pill{
  display:inline-block; font-size:11px; padding:2px 9px; border-radius:99px;
  border:1px solid var(--line); color:var(--muted);
}
.pill.ok{
  color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent);
  background:color-mix(in srgb, var(--good) 10%, transparent);
}

@media (max-width: 720px){
  .soz-qator{ flex-direction:column; gap:8px; }
  .soz-ong{ flex:1 1 auto; justify-content:flex-start; width:100%; }
  .soz-son{ max-width:220px; }
}

@media (prefers-reduced-motion: reduce){
  .soz-slider, .soz-slider::after, .soz-nav a{ transition:none; }
}

/* Maxfiy maydon (token va h.k.) - qiymat hech qachon ekranga chiqmaydi */
.soz-maxfiy{ display:flex; align-items:center; gap:8px; width:100%; }
.soz-maxfiy input{ width:100%; }
.soz-ornatilgan{
  flex:0 0 auto; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:99px; font-weight:600;
  color:var(--good); border:1px solid color-mix(in srgb, var(--good) 35%, transparent);
  background:color-mix(in srgb, var(--good) 10%, transparent);
}

/* Sinov amali - saqlashdan alohida qator */
.soz-sinov{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  margin-top:14px; padding:12px 14px; border-radius:10px;
  border:1px dashed var(--line);
}
.soz-sinov > div{ flex:1 1 220px; min-width:0; }
.soz-sinov > .btn{ flex:0 0 auto; }
.soz-sinov button[disabled]{ opacity:.5; cursor:not-allowed; }

/* Bosh sahifa ogohlantirish bloki (yopilmagan smena va h.k.) */
.ogoh-blok{
  border-radius:10px; padding:12px 16px; margin-bottom:18px;
  border:1px solid var(--line); background:var(--card);
}
.ogoh-blok.qizil{
  border-color:color-mix(in srgb, var(--bad) 40%, var(--line));
  background:color-mix(in srgb, var(--bad) 7%, var(--card));
}
.ogoh-blok ul{ margin:8px 0; padding-left:20px; }
.ogoh-blok li{ margin:3px 0; font-size:13px; }

/* --- Sozlamalar: oddiy foydalanuvchi ko'rinishi --- */
.soz-kirish{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; margin-bottom:16px; line-height:1.6;
}
.soz-kirish p{ margin:0 0 6px; }
.soz-kirish p:last-child{ margin-bottom:0; }

.soz-rejim{ margin-bottom:18px; }
.soz-rejim-tugmalar{ display:flex; gap:0; margin-bottom:6px; }
.soz-rejim-btn{
  font-family:inherit; font-size:13px; padding:8px 18px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  transition:color 160ms var(--ease-out), background-color 160ms var(--ease-out),
             border-color 160ms var(--ease-out);
}
.soz-rejim-btn:first-child{ border-radius:8px 0 0 8px; }
.soz-rejim-btn:last-child{ border-radius:0 8px 8px 0; border-left:0; }
.soz-rejim-btn.on{
  background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600;
}
.soz-rejim-btn:active{ transform:scale(.97); }

/* Savol - sozlama nomi o'rniga. Oddiy foydalanuvchi «bonus_earn_rate_percent»
   emas, «Xariddan qancha foiz bonus yig'ilsin?» ni o'qiydi. */
.soz-savol{
  font-weight:600; font-size:15px; line-height:1.45; display:block;
  margin-bottom:4px; text-transform:none; letter-spacing:0;
}
.soz-misol{
  font-size:13px; line-height:1.55; color:var(--ink);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border-left:3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:7px 12px; border-radius:0 6px 6px 0; margin:6px 0;
}
.soz-hali{
  font-size:12px; color:var(--muted); margin-top:6px;
  padding:6px 10px; border-radius:6px;
  background:color-mix(in srgb, var(--muted) 8%, transparent);
}

/* `hidden` atributi HAR DOIM kuchli bo'lsin.
   Sababi: `[hidden]` brauzerda oddiy `display:none` qoidasi sifatida
   qo'llaniladi va undan KEYINGI har qanday `display` (masalan
   `.soz-qator{display:flex}`) uni jimgina bekor qiladi. Element DOM da
   `hidden` bo'lib turadi-yu, ekranda ko'rinaveradi. */
[hidden]{ display:none !important; }

/* Brend logotipi. `object-fit:contain` - logo cho'zilmasin, nisbati saqlansin.
   Balandlik cheklangan: mijoz katta rasm yuklasa menyu buzilib ketmasin. */
.brand-logo{ max-width:100%; max-height:44px; object-fit:contain; display:block; }
.sidebar .brand{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.brand-nom{ font-size:13px; font-weight:600; letter-spacing:.02em; opacity:.85; }
.topbar .brand-logo{ max-height:28px; }

/* Logotip yuklash bloki */
.soz-logo{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px; border:1px dashed var(--line); border-radius:10px; margin-top:12px;
}
.soz-logo-oyna{
  flex:0 0 auto; width:160px; height:80px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.soz-logo-oyna img{ max-width:100%; max-height:100%; object-fit:contain; }
.soz-logo-oyna .bosh{ font-size:12px; color:var(--muted); text-align:center; padding:8px; }
.soz-logo-amal{ flex:1 1 220px; display:flex; flex-direction:column; gap:8px; }
.soz-logo-amal input[type=file]{ font-size:13px; }

/* --- Fayldan yuklash (import) --- */
.imp-qadam{ margin:10px 0 12px; padding-left:22px; line-height:1.7; }
.imp-qadam li{ margin-bottom:6px; }

.imp-hisob{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.imp-quti{
  flex:0 0 auto; min-width:110px; padding:12px 18px; border-radius:10px;
  border:1px solid var(--line); background:var(--card);
  display:flex; flex-direction:column; gap:2px;
}
.imp-quti .son{ font-family:var(--shrift-mono); font-size:26px; font-weight:600; }
.imp-quti .izoh{ font-size:12px; color:var(--muted); }
.imp-quti.yaxshi{
  border-color:color-mix(in srgb, var(--good) 40%, var(--line));
  background:color-mix(in srgb, var(--good) 8%, var(--card));
}
.imp-quti.yaxshi .son{ color:var(--good); }
.imp-quti.ogoh{
  border-color:color-mix(in srgb, var(--accent) 40%, var(--line));
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
}
.imp-quti.ogoh .son{ color:var(--accent); }
.imp-quti.yomon{
  border-color:color-mix(in srgb, var(--bad) 40%, var(--line));
  background:color-mix(in srgb, var(--bad) 8%, var(--card));
}
.imp-quti.yomon .son{ color:var(--bad); }

.imp-tasdiq{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:14px; padding:14px 16px; border-radius:10px;
  background:color-mix(in srgb, var(--good) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--good) 30%, var(--line));
}

/* Diagnostika: «nima qilish kerak» bloki.
   Eng muhim qism - topilma aniq QADAM bilan tugashi kerak, «dasturchiga
   ayting» degan xabar hech kimga yordam bermaydi. */
.diag-qadam{
  margin:14px 0; padding:12px 16px; border-radius:10px;
  background:color-mix(in srgb, var(--good) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--good) 30%, var(--line));
}
.diag-qadam-sarlavha{
  font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--good); font-weight:700; margin-bottom:5px;
}
.diag-qadam p{ margin:0; line-height:1.6; }
.diag-qadamlar{ margin:6px 0 0; padding-left:20px; line-height:1.65; }
.diag-qadamlar li{ margin-bottom:5px; }
.diag-qadam.kod{
  background:color-mix(in srgb, var(--bad) 7%, var(--card));
  border-color:color-mix(in srgb, var(--bad) 30%, var(--line));
}
.diag-qadam.kod .diag-qadam-sarlavha{ color:var(--bad); }
.diag-nusxa{ margin-top:14px; }
.diag-matn{
  width:100%; font-family:var(--shrift-mono); font-size:11px;
  line-height:1.5; padding:10px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  resize:vertical;
}
.pill.yomon{
  color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent);
  background:color-mix(in srgb, var(--bad) 10%, transparent); font-weight:600;
}
.fil-yarim{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:10px 14px; border-radius:8px;
  background:color-mix(in srgb, var(--bad) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--bad) 25%, transparent);
}

/* --- Hisobotlar ro'yxati --- */
.hisobot-royxat{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px; margin-top:12px;
}
.hisobot{
  display:block; padding:14px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--card);
  text-decoration:none; color:var(--ink);
  transition:border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.hisobot:hover{ border-color:var(--accent); }
.hisobot:active{ transform:scale(.99); }
.hisobot-nom{ font-weight:600; font-size:15px; margin-bottom:4px; }
/* «Qaysi savolga javob beradi» - foydalanuvchi hisobot NOMINI emas,
   o'z SAVOLINI qidiradi: «bugun qancha sotdik?» */
.hisobot-savol{
  font-size:13px; color:var(--accent); margin-bottom:6px; font-style:italic;
}
.hisobot-izoh{ font-size:12px; color:var(--muted); line-height:1.5; }

/* O'tkazma kamomadi - FAQAT kamomad bo'lganda ko'rinadi (Q-M5-01).
   Oddiy qabulda ortiqcha maydonlar omborchini chalg'itadi. */
.kamomad-blok{
  margin:16px 0; padding:14px 16px; border-radius:10px;
  background:color-mix(in srgb, var(--bad) 6%, var(--card));
  border:1px solid color-mix(in srgb, var(--bad) 28%, var(--line));
}
.kamomad-blok h4{ margin:0 0 4px; color:var(--bad); }

/* ===== Mobil: gorizontal overflow tuzatish (2026-08-29) =====
   Jadval min-width'i (min-width:520px) grid/flex trackni kengaytirib,
   sahifa viewportdan oshardi -> topbar to'liq kenglikka tushmasdi va
   o'ngida bo'sh joy qolardi. min-width:0 track qisqarishga ruxsat beradi,
   table-scroll jadvalni O'Z ICHIDA suradi. */
.card{ min-width:0; }
.grid-2{ grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
@media (max-width:760px){ .grid-2{ grid-template-columns: minmax(0,1fr); } }
.table-scroll{ overflow-x:auto; max-width:100%; }
/* html,body overflow-x:hidden OLIB TASHLANDI (2026-08-31): u position:sticky
   ustun sarlavhasini buzardi. Toshish endi to'g'ri (minmax/table-scroll/fixed
   sidebar) tuzatilgan, shuning uchun kesish kerak emas. */

/* ===== POS mobil tuzatish (2026-08-29) =====
   1) Mobil kassa-panel grid-areas'ida "slot" maydoni yo'q edi -> ochiq
      cheklar tashqariga chiqib kesilardi. Qo'shamiz.
   2) Barkod qatori (barkod+miqdor+narx+tugma) 4 element bir qatorda
      siqilardi -> telefonda barkod to'liq qator, qolgani pastda. */
@media(max-width:1000px){
  body.kassa-tolik .kassa-panel{
    grid-template-areas:"skan" "ong" "savat" "tovar" "slot";
  }
}
@media(max-width:640px){
  body.kassa-tolik .skan-form{ grid-template-columns:1fr 1fr auto; }
  body.kassa-tolik .skan-form .skan-inp{ grid-column:1 / -1; }
}

/* Manfiy marja — tannarxdan past sotuv ogohlantirishi (2026-08-31).
   Narx/marja jadvalida manfiy foizni qizil+qalin ko'rsatadi, shunda
   "zararga savdo" darhol ko'zga tashlanadi. */
.marja-manfiy{ color:var(--bad); font-weight:700; }

/* ===== Nozik scrollbar (2026-08-31) =====
   Qo'pol OS scrollbar o'rniga ingichka, nafis bar. Sidebar (yon menyu)
   va Muddat jadvali kabi joylarda ko'rinib qolgan qalin bar chalg'itardi. */
*{ scrollbar-width: thin; scrollbar-color: rgba(120,120,120,.35) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(120,120,120,.32); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(120,120,120,.5); }
/* Yon menyu to'q fonli — thumb och rangda ko'rinsin */
.sidebar{ scrollbar-color: color-mix(in srgb, var(--nav-fg) 28%, transparent) transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--nav-fg) 24%, transparent); }
.sidebar::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--nav-fg) 42%, transparent); }

/* Bosh sahifa grid: Tez havolalar TOR, Muddat ogohlantirishlari KENG.
   Shunda Muddat jadvali (4 ustun, ~520px) keng ekranda gorizontal scrollsiz
   sig'adi. Tor ekranda (<=1000px) ustma-ust; jadval to'liq enda, mobilda
   sig'masa .table-scroll o'zi scroll chiqaradi. */
.grid-dash{ grid-template-columns: minmax(0,0.8fr) minmax(0,1.4fr); }
@media(max-width:1000px){ .grid-dash{ grid-template-columns: 1fr; } }

/* ===== Tez havolalar — bir xil o'lchamli plitkalar (2026-08-31) =====
   Ilgari .btn-row flex-wrap edi: tugmalar matn uzunligiga qarab turli enda,
   "Tarozi" yolg'iz qatorda qolib betartib ko'rinardi. Endi teng plitkalar:
   matn markazda o'raladi, balandlik teng, nafis hover ko'tarilishi. */
.tez-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin-top:14px; }
.tez-grid .btn{
  width:100%; min-height:64px; padding:12px; border-radius:10px;
  white-space:normal; text-align:center; line-height:1.25;
  border-color:var(--line);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tez-grid .btn:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.09); }
.tez-grid .btn.primary{ border-color:var(--accent); }

/* ===== Katalog: barkod biriktirish formasi (2026-08-31) =====
   Ilgari input width:100% flex ichida to'liq enni egallardi -> checkbox+tugma
   pastga tushib qator ikki-uch qatorli baland bo'lardi, ro'yxat cho'zilardi.
   Endi hammasi BIR qatorda: input flex bilan qisqaradi, asosiy + Biriktirish
   yonida. Qator balandligi yarmiga tushadi.
   ESLATMA (jonli o'lchov, 2026-09-21): `.barkod-form`/`.etiketka-soni-form`
   ENDI `.katalog-amal-forma` orqali GRID konteyner (pastda) - shu sabab
   forma darajasidagi eski `flex-wrap`/`.btn{flex:...}` qoidalari OLIB
   TASHLANDI (o'lik edi, grid konteynerga ta'sir qilmasdi). `.katalog-amal-
   maydon` ICHIDAGI flex qoidalar (input/checkbox-row) esa QOLDI - ular
   haqiqatan ham flex bo'lgan `.katalog-amal-maydon`ga tegishli. */
.barkod-form input[name="barcode"]{ flex:0 1 130px; min-width:0; width:auto; max-width:150px; }
.barkod-form .checkbox-row{ flex:0 0 auto; white-space:nowrap; }

/* ===== Katalog: etiketka soni + chop etish formasi (2026-09-21) ===== */
.etiketka-soni-form{ margin-top:6px; }
.etiketka-soni-input{ flex:0 0 56px; width:56px; }
.etiketka-soni-lbl{ margin:0; font-size:10px; white-space:nowrap; }

/* ===== Katalog: amal formalarini bitta ustunda tekislash (audit #8) =====
   Bir katakda IKKI mustaqil forma bo'lishi mumkin (barkod biriktirish +
   ichki barkod YOKI etiketka soni) - avval ikkalasi ham o'z holicha flex
   edi, shuning uchun tugmalar turli x-koordinatada chiqardi (barkodli
   tovarda tugma [56px maydon]dan keyin, barkodsizda chapdan). Endi HAR BIR
   forma "maydonlar | tugma" ikki ustunli grid: tugma har doim `auto`
   ustunda, ya'ni katakning O'NG chetiga tekislanadi - forma tarkibidan
   qat'i nazar, ustma-ust formalarning tugmalari bir vertikalda turadi.

   TUZATISH (jonli o'lchov, 2026-09-21): `.katalog-amal-maydon`da
   `min-width:0` bo'lgani uchun Grid'ning "1fr" ustuni o'z mazmunining
   min-content enidan HAM TORROQ siqilib ketardi (Grid item uchun
   `min-width:0` grid'ning avtomatik minimal himoyasini o'chirib
   qo'yadi - flexbox'dagi kabi ishlamaydi). Natijada `.etiketka-soni-form`da
   ustun ~44px gacha siqilib, ICHIDAGI yorliq+input (~94px kerak) katakdan
   TOSHIB, tugma ustiga chiqib ketardi (o'lchandi: btn.x=1186 < input
   right=1230). `min-width:0` OLIB TASHLANDI - endi Grid ustuni kamida
   mazmun kengligicha (min-content) qoladi, tugma HECH QACHON ustma-ust
   chiqmaydi. Sinov: `tests/unit/test_static_checks.py::
   test_katalog_amal_maydon_min_width_yoq`. */
.katalog-amal-forma{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px; }
.katalog-amal-forma + .katalog-amal-forma{ margin-top:6px; }
.katalog-amal-forma .btn{ grid-column:2; }
.katalog-amal-maydon{ grid-column:1; display:flex; align-items:center; gap:5px; flex-wrap:nowrap; }

/* ===== Uzun ro'yxat: sahifalash + sticky sarlavha (2026-08-31) =====
   1000+ tovarda sahifa cheksiz cho'zilmasin. AVVAL balandligi cheklangan
   quti (max-height) ishlatilgandi, lekin u DOUBLE-scroll berardi (sahifa
   + quti alohida surilardi). Endi bitta scrollbar: sahifa tabiiy suriladi,
   sidebar sticky - ko'rinib turadi, ustun sarlavhasi viewport tepasiga
   yopishadi. Sahifa uzunligini sahifalash (50/sahifa) cheklaydi.

   ESLATMA (jonli o'lchov, 2026-09-21, IKKI qatlamli nuqson):

   1) `contain:layout` SHART. Grid to'qnashuvi tuzatilgach jadval haqiqiy
   kengligini oldi va `.katalog-jadval`ning `overflow-x:auto/hidden`i
   BEVOSITA ishlagani holda ham (`.katalog-jadval.scrollWidth/clientWidth`
   to'g'ri: 1052/572 - ICHKARIDA to'g'ri qirqiladi) `document.
   documentElement.scrollWidth` BARIBIR butun sahifani kengaytirib
   yuborardi (o'lchandi: html.scrollWidth=994, lekin body.scrollWidth=890 -
   FARQ faqat `html`da, `body`da EMAS - jadval ICHKARIDA to'g'ri qirqilgan
   bo'lsa ham "scrollable overflow" hisobi qandaydir yo'l bilan `html`
   darajasiga sizib chiqqan). `contain:layout` - aynan shu uchun mo'ljallangan
   CSS xususiyati: konteynerning ICHKI joylashuvini OTA-ONA HISOBLARIDAN
   TO'LIQ IZOLYATSIYA qiladi (oddiy `overflow` kafolat bermagan holatda).
   Qo'shilgach `html.scrollWidth` darhol `890`ga (viewport bilan teng)
   tushdi, ICHKI gorizontal scroll esa ishlashda davom etdi (sinovda
   tasdiqlandi).

   2) `overflow-x:auto` chegarasi `900px`dan `1400px`ga ko'chirildi. Grid
   tuzatilgach jadvalning HAQIQIY kengligi (~1058px, to'ldirish
   ixchamlashtirilgandan keyin) 1366px va undan tor noutbuk kengliklarida
   kartaga SIG'MAYDI (o'lchandi: 1366px'da 13px, 1280px'da 99px, 1024px'da
   355px chiqib ketardi, chunki bu oraliqda ESKI 900px chegara tufayli
   HECH QANDAY overflow-x yo'q edi - jadval to'g'ridan-to'g'ri sahifaga
   toshib chiqardi). 1400px va undan KENG ekranlarda jadval kartaga sig'adi
   (tekshirildi) - shu oraliqda `overflow-x` UMUMAN kerak emas, shuning
   uchun STICKY SARLAVHA to'liq ishlaydi (chunki `overflow-x:auto`
   `overflow-y`ni ham `auto`ga aylantirib, sticky'ning "eng yaqin
   scroll-ota-ona"sini SAHIFADAN shu konteynerga o'zgartiradi - bu holda
   sticky endi SAHIFA scrolliga emas, ICHKI (deyarli hech qachon
   scroll bo'lmaydigan) konteynerga nisbatan hisoblanib, AMALDA
   ishlamay qoladi, degan ma'noni bildiradi).

   QAROR (sticky vs ichki scroll murosasi): >=1400px'da SIG'ADI - sticky
   TO'LIQ ishlaydi. <1400px (planshet/kichik noutbuk, jumladan ESKI
   701-900px oralig'i ham) - jadval KARTA ICHIDA gorizontal aylanadi
   (sahifa esa HECH QACHON aylanmaydi - `contain:layout` buni kafolatlaydi),
   lekin sticky sarlavha bu oraliqda ISHLAMAYDI (u ICHKI konteynerga
   nisbatan hisoblanadi, konteyner esa deyarli hech qachon amalda
   aylantirilmagani uchun "yopishish" ko'rinmaydi - buni max-height bilan
   albatta tuzatish mumkin edi, lekin bu YUQORIDAGI "AVVAL..." tarixiy
   izohda ATAYLAB rad etilgan DOUBLE-SCROLL naqshini qaytaradi). Bu
   murosa TANLANDI, chunki (a) sahifaning HECH QACHON gorizontal
   aylanmasligi (yangi jiddiy nuqson) ustuvor, (b) 701-900px oralig'ida
   sticky ALLAQACHON (ushbu vazifadan OLDIN ham) shu sababdan ishlamas
   edi - demak bu YANGI regressiya EMAS, faqat oraliq 900->1400px ga
   kengaytirildi. <=700px'da (mobil kartochka) muammo umuman yo'q -
   pastdagi qoida `overflow-x:visible`ga qaytaradi, sticky u yerda
   ishlatilmaydi (jadval THEAD'i butunlay `display:none`). */
.katalog-jadval{ contain: layout; }
.katalog-jadval thead th{ position:sticky; top:0; z-index:2; }
@media(max-width:1400px){ .katalog-jadval{ overflow-x:auto; } }
.sahifalash{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.sahifalash .btn.oq{ opacity:.4; pointer-events:none; }
.sahifalash .sahifa-uch{ opacity:.5; padding:0 2px; }
.sahifalash .sahifa-info{ margin-left:auto; opacity:.6; font-size:12.5px; }

/* ===== Katalog: qator bo'yi ixchamlashtirish (audit #10) =====
   FAQAT shu jadvalga tegishli - boshqa `table.jadval` larga tegilmadi.
   Global qoida `padding:9px 10px` + kirim/select'ning o'z padding'i qator
   bo'yini keragidan baland qilardi (bitta katakda 1-2 forma bor).
   ESLATMA (jonli o'lchov, 2026-09-21): gorizontal to'ldirish 10px->8px ga
   kamaytirildi - grid to'qnashuvi tuzatilgach (yuqoridagi eslatmaga
   qarang) jadvalning HAQIQIY kengligi ochildi va kartadan 37px chiqib
   ketgan edi. Bu TARJIMAGA bog'liq matn EMAS - faqat katak bo'shlig'i,
   shuning uchun i18n xavfi yo'q (audit #9dagi min-width'ga tegilmadi). */
.katalog-jadval table.jadval td{ padding:6px 8px; }
.katalog-jadval input[type=text], .katalog-jadval input[type=number], .katalog-jadval select{
  padding:4px 8px; font-size:12.5px;
}
/* ===== Katalog: "Cheklovsiz" torroq ustunga sig'maydi (audit #9) =====
   Jadval `table-layout` avtomatik bo'lgani uchun ustun eni matn+strelka
   kengligiga qarab noaniq siqilib qolishi mumkin edi (faqat strelka
   ko'rinardi). `min-width` bilan kafolatlanadi - i18n (ru) matni ham
   sig'adi (`feat-i18n-uzru` shoxi, bu yerga tegilmadi). Yorliqni
   qisqartirish ("Yo'q") o'rniga shu yo'l tanlandi - "Cheklovsiz" aniqroq. */
.yosh-select{ min-width:112px; }
.imei-forma{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
.imei-forma .input-qisqa{ width:64px; }
.imei-blok{ padding:8px 0; border-top:1px solid var(--line); }
.imei-blok h4{ margin:0 0 6px; }
.imei-royxat{ margin:0 0 8px; padding-left:18px; }
.imei-forma-kirim{ display:flex; flex-direction:column; gap:6px; max-width:520px; }
.imei-forma-kirim textarea{ width:100%; }

/* ===== Katalog: mobil kartochka (audit #11, ≤700px) =====
   9 ustunli jadval telefonda gorizontal aylantirilmaydi - HAR TOVAR
   alohida kartochka. HTML BITTA: shu CSS `<td data-label="...">`larni
   qayta tartiblaydi (`order`) va psevdo-`::before` bilan yorliq chiqaradi -
   ikkinchi markup YO'Q. Amallar (barkod/etiketka) pastda, to'liq kengliqda. */
@media (max-width:700px){
  .katalog-jadval{ overflow-x:visible; }
  .katalog-jadval table.jadval{ min-width:0; width:100%; }
  .katalog-jadval thead{ display:none; }
  .katalog-jadval tbody{ display:block; }
  .katalog-jadval tbody tr{
    display:flex; flex-direction:column; width:100%;
    border:1px solid var(--line); border-radius:10px; padding:12px 14px;
    margin-bottom:12px; background:var(--card);
  }
  .katalog-jadval tbody tr:nth-child(even){ background:var(--card); }
  .katalog-jadval table.jadval td{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:7px 0; border-bottom:1px dashed var(--line); text-align:right;
  }
  .katalog-jadval table.jadval td:last-child{ border-bottom:none; }
  .katalog-jadval table.jadval td::before{
    content:attr(data-label); font-family:var(--shrift-mono); font-size:10.5px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
    text-align:left; flex:0 0 auto; padding-right:10px;
  }

  /* Sarlavha bloki: Rasm -> Nomi -> SKU, yorliqsiz, tepada birlashgan. */
  .katalog-jadval table.jadval td[data-label="Rasm"]{ order:1; display:block; text-align:left; border-bottom:none; padding-bottom:6px; }
  .katalog-jadval table.jadval td[data-label="Nomi"]{ order:2; display:block; text-align:left; font-weight:700; font-size:15px; border-bottom:none; padding:0 0 2px; }
  .katalog-jadval table.jadval td[data-label="SKU"]{ order:3; display:block; text-align:left; font-size:11px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:4px; }
  .katalog-jadval table.jadval td[data-label="Rasm"]::before,
  .katalog-jadval table.jadval td[data-label="Nomi"]::before,
  .katalog-jadval table.jadval td[data-label="SKU"]::before{ content:none; }

  .katalog-jadval table.jadval td[data-label="Guruh"]{ order:4; }
  .katalog-jadval table.jadval td[data-label="O'lchov"]{ order:5; }
  .katalog-jadval table.jadval td[data-label="Turi"]{ order:6; }
  .katalog-jadval table.jadval td[data-label="Yosh"]{ order:7; }
  .katalog-jadval table.jadval td[data-label="Barkodlar"]{ order:8; display:block; text-align:left; }
  .katalog-jadval table.jadval td[data-label="Barkodlar"]::before{ display:block; margin-bottom:4px; }

  /* Amallar - pastda, to'liq kenglikda, tugmalar teginishga qulay. */
  .katalog-jadval table.jadval td[data-label="Barkod biriktirish"]{
    order:9; display:block; text-align:left; border-bottom:none;
    padding-top:10px; margin-top:4px; border-top:1px solid var(--line);
  }
  .katalog-jadval table.jadval td[data-label="Barkod biriktirish"]::before{ content:none; }
  .katalog-jadval .katalog-amal-forma{ grid-template-columns:1fr; }
  .katalog-jadval .katalog-amal-forma .btn{ grid-column:1; width:100%; justify-content:center; }
  .katalog-jadval .katalog-amal-maydon{ margin-bottom:6px; }
}

/* ===== Yig'iladigan "Yangi tovar qo'shish" (2026-08-31) =====
   Forma sahifaning yarmini egallardi; endi sukut bo'yicha yopiq, faqat
   kerak bo'lganda ochiladi -> ro'yxat yuqoriga chiqadi. */
details.qoshish-karta > summary.qoshish-summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--shrift-sarlavha); font-weight:700; font-size:18px; color:var(--ink);
}
details.qoshish-karta > summary.qoshish-summary::-webkit-details-marker{ display:none; }
details.qoshish-karta > summary.qoshish-summary::after{
  content:"Ochish +"; font-family:var(--shrift-mono); font-size:12px; font-weight:600;
  color:var(--accent); border:1px solid var(--accent); border-radius:6px; padding:5px 12px; white-space:nowrap;
}
details.qoshish-karta[open] > summary.qoshish-summary::after{ content:"Yopish –"; }
details.qoshish-karta > form{ margin-top:16px; }

/* Narx yaxlitlash qatori (POS savat) */
.savat .yaxlit, .yaxlit{ font-size:12.5px; color:var(--muted); text-align:right; margin:2px 0 4px; }

/* Yosh cheklovi tasdig'i (POS) - alkogol/tamaki, kassir belgilashi shart */
.yosh-tasdiq{ display:flex; align-items:flex-start; gap:9px; padding:11px 13px; margin:4px 0 10px;
  background:rgba(185,28,28,.08); border:1px solid var(--bad); border-radius:9px;
  font-size:13.5px; line-height:1.35; cursor:pointer; }
.yosh-tasdiq input{ margin-top:2px; width:18px; height:18px; flex-shrink:0; accent-color:var(--bad); }
.yosh-tasdiq b{ color:var(--bad); }

/* n_plus_m ("2+1") aksiya tejamkorligi (POS savat) - yashil, ijobiy */
.savat .yaxlit.aksiya, .yaxlit.aksiya{ color:var(--good); font-weight:600; }

/* ---------- Hisobot: KPI kartalar + grafik + nozik jadval ---------- */
.rep-kpi-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.rep-kpi{ flex:1 1 175px; position:relative; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:17px 20px;
  box-shadow:0 2px 10px var(--shadow); overflow:hidden;
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.rep-kpi:hover{ transform:translateY(-2px); box-shadow:0 6px 20px var(--shadow); }
.rep-kpi .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:600; }
.rep-kpi .val{ font-size:27px; font-weight:750; margin-top:9px; color:var(--ink);
  font-family:var(--shrift-mono); letter-spacing:-.02em; line-height:1.05; }
.rep-kpi .val .cur{ font-size:13px; font-weight:500; color:var(--muted); margin-left:4px; }
.rep-kpi .sub{ font-size:12px; color:var(--muted); margin-top:5px; }
/* Asosiy karta - nozik gradient fon + tepada rangli chiziq */
.rep-kpi.accent{ background:linear-gradient(160deg,
  color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card)); }
.rep-kpi.accent::before, .rep-kpi.good::before{ content:""; position:absolute;
  top:0; left:0; right:0; height:3px; }
.rep-kpi.accent::before{ background:var(--accent); }
.rep-kpi.good::before{ background:var(--good); }
.rep-kpi.good .val{ color:var(--good); }
/* Grafik karta */
.rep-chart{ margin-top:2px; }
.rep-xaxis{ display:flex; margin-top:6px; padding:0 10px; font-size:10px;
  color:var(--muted); font-family:var(--shrift-mono); }
.rep-xaxis span{ flex:1; text-align:center; white-space:nowrap; }
/* nozik gorizontal mikro-bar (jadval qatorida) */
.rep-bar{ background:var(--line); border-radius:6px; height:10px; width:100%;
  overflow:hidden; min-width:70px; }
.rep-bar > span{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--good), var(--accent)); }
.rep-table td.bar-cell{ width:32%; vertical-align:middle; }

/* ---------- Hisobot: donut + gorizontal ustunlar ---------- */
.rep-donut-wrap{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.rep-donut{ position:relative; flex:0 0 auto; }
.rep-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none; }
.rep-donut-center .lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.rep-donut-center .val{ font-size:15px; font-weight:700; color:var(--ink);
  font-family:var(--shrift-mono); margin-top:2px; }
.rep-legend{ flex:1 1 240px; display:flex; flex-direction:column; gap:10px; }
.rep-legend-row{ display:flex; align-items:center; gap:10px; }
.rep-legend-row .dot{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; }
.rep-legend-row .nm{ flex:1 1 auto; font-size:14px; color:var(--ink); }
.rep-legend-row .pc{ font-weight:700; color:var(--ink); }
.rep-legend-row .sm{ font-size:12px; color:var(--muted); min-width:90px; text-align:right; }

.hbar-list{ display:flex; flex-direction:column; gap:11px; }
.hbar-row{ display:flex; align-items:center; gap:12px; }
.hbar-lbl{ flex:0 0 190px; font-size:13.5px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar-track{ flex:1 1 auto; background:var(--line); border-radius:7px; height:16px; overflow:hidden; }
.hbar-track > span{ display:block; height:100%; border-radius:7px;
  background:linear-gradient(90deg, var(--good), var(--accent)); min-width:2px; }
.hbar-val{ flex:0 0 auto; font-size:12.5px; color:var(--muted); min-width:95px; text-align:right; }
@media (max-width:640px){ .hbar-lbl{ flex-basis:110px; } }

.rep-swatch{ display:inline-block; width:9px; height:9px; border-radius:3px;
  margin-right:8px; vertical-align:middle; }

/* ---------- Umumiy .table uslubi (hisobotlar, import va h.k.) ---------- */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; color:var(--muted); font-weight:600; padding:11px 18px;
  white-space:nowrap; border-bottom:2px solid var(--line); }
.table td{ padding:12px 18px; border-bottom:1px solid var(--line);
  vertical-align:middle; color:var(--ink); }
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.table th.num, .table td.num{ text-align:right; white-space:nowrap; }
.table td.mono, .table td .mono{ font-family:var(--shrift-mono); }
.table tfoot th{ border-top:2px solid var(--line); border-bottom:none; color:var(--ink);
  padding-top:12px; }

/* ---------- Hisobot: donut va jadval yonma-yon ---------- */
.rep-cols{ display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; }
.rep-col-donut{ flex:0 0 300px; display:flex; flex-direction:column; }
.rep-col-donut .rep-donut{ margin:auto; padding:8px 0; }
.rep-col-table{ flex:1 1 400px; min-width:0; }
@media (max-width:760px){ .rep-col-donut{ flex-basis:100%; } }

/* ---------- Hisobotlar ro'yxati: karta ikonkalari ---------- */
.hisobot-bosh{ display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.hisobot-bosh .hisobot-nom{ margin-bottom:0; }
.hisobot-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--accent);
  transition:background .18s var(--ease-out), color .18s var(--ease-out); }
.hisobot:hover .hisobot-ic{ background:var(--accent); color:#fff; }
.hisobot-svg{ width:20px; height:20px; }

/* Hisobot kartasidan bo'limga to'g'ridan-to'g'ri o'tish (deep-link).
   Anchor bo'limga tushganda qisqa yoritiladi - "qayerga tushdim" chalkashligini
   yo'qotadi. scroll-margin sticky sarlavha ostidan chiqmasligi uchun. */
.card[id] { scroll-margin-top: 80px; }
@keyframes hisobot-target-glow {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.card[id]:target {
  animation: hisobot-target-glow 1.8s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .card[id]:target { animation: none; box-shadow: 0 0 0 2px var(--accent); }
}

/* ===========================================================================
   OB-HAVO va MB KURSI bo'lagi (`partials/havo_kurs.html`).
   Ikkita ko'rinishi bor va ular ATAYLAB boshqacha:
     .bosh  - bosh sahifa, keng kartochka (joy bor, bezak mumkin);
     .kassa - kassa sarlavhasidagi `.kassa-meta` ichida, IXCHAM va o'ngga
              tekislangan: u yerda savdo ketyapti, blok diqqatni tortmasligi
              kerak (shuning uchun kichik shrift va farq ko'rsatkichi yashirin).
   Barcha rang TOKEN orqali - ikkala mavzuda ham to'g'ri chiqadi.
   =========================================================================== */
.havo-kurs{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.havo-kurs .hk-havo, .havo-kurs .hk-kurs{ display:inline-flex; align-items:center; gap:9px;
  min-width:0; }
.havo-kurs .hk-matn{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:7px;
  min-width:0; }
.havo-kurs .hk-ic{ flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; color:var(--accent); }
.havo-kurs .hk-svg{ display:block; width:18px; height:18px; }
.havo-kurs .hk-joy{ font-weight:600; color:var(--ink); }
.havo-kurs .hk-harorat{ font-weight:700; color:var(--ink); }
.havo-kurs .hk-holat{ color:var(--muted); }
.havo-kurs .hk-qiymat{ font-weight:700; color:var(--ink); }
.havo-kurs .hk-eski{ flex:0 0 auto; border:1px solid var(--line); border-radius:999px;
  padding:1px 9px; line-height:1.6; }

/* Kurs o'zgarishi (MB "Diff"). Dollar KO'TARILSA do'kon uchun bu yomon xabar
   (narx qimmatlashadi) - shuning uchun o'sish `--bad`, tushish `--good`.
   Belgini teskari qilish kerak bo'lsa - shu ikki qatorni almashtirish yetarli. */
.havo-kurs .hk-farq{ display:inline-flex; align-items:center; gap:3px; font-size:.85em;
  font-weight:600; }
.havo-kurs .hk-farq .hk-svg{ width:12px; height:12px; }
.havo-kurs .hk-farq.osdi{ color:var(--bad); }
.havo-kurs .hk-farq.tushdi{ color:var(--good); }

/* ---------- Bosh sahifa: kartochka ---------- */
.havo-kurs.bosh{ margin:0 0 16px; padding:11px 15px; gap:14px; font-size:13.5px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--card)) 0%, var(--card) 62%);
  box-shadow:0 1px 2px var(--shadow); }
.havo-kurs.bosh .hk-ic{ width:36px; height:36px; border-radius:10px;
  background:color-mix(in srgb, var(--accent) 12%, var(--card)); }
/* 20px da yog'ingarchilik oilasi (mayda/yomg'ir/jala/qor) BIR XIL dog'ga
   aylanardi - tomchi va parchalar shunchaki ko'rinmasdi. Ikonkaning butun
   maqsadi bir qarashda tanilish, shuning uchun bosh sahifada 26px. */
.havo-kurs.bosh .hk-svg{ width:26px; height:26px; }
.havo-kurs.bosh .hk-harorat{ font-size:16px; }
/* Ajratgich bosh sahifada NUQTA emas, ingichka chiziq: `&middot;` belgisi
   qoladi (skrinreader uchun `aria-hidden`), lekin ko'zga chiziq ko'rinadi. */
.havo-kurs.bosh .hk-ajratgich{ flex:0 0 auto; width:1px; align-self:stretch;
  min-height:24px; overflow:hidden; color:transparent; background:var(--line); }

/* ---------- Kassa: ixcham qator ---------- */
.havo-kurs.kassa{ justify-content:flex-end; gap:7px; margin-top:3px; font-size:10.5px;
  letter-spacing:0; }
.havo-kurs.kassa .hk-havo, .havo-kurs.kassa .hk-kurs{ gap:5px; }
.havo-kurs.kassa .hk-matn{ gap:5px; }
.havo-kurs.kassa .hk-svg{ width:13px; height:13px; }
.havo-kurs.kassa .hk-joy, .havo-kurs.kassa .hk-harorat,
.havo-kurs.kassa .hk-qiymat{ color:inherit; font-weight:600; }
.havo-kurs.kassa .hk-farq{ display:none; }   /* kassada joy tor - faqat qiymat */
.havo-kurs.kassa .hk-eski{ padding:0 6px; }

/* ---------- Telefon ---------- */
@media (max-width:480px){
  .havo-kurs.bosh{ gap:10px; padding:10px 12px; font-size:12.5px; }
  .havo-kurs.bosh .hk-ic{ width:31px; height:31px; }
  .havo-kurs.bosh .hk-svg{ width:22px; height:22px; }
  .havo-kurs.bosh .hk-ajratgich{ display:none; }  /* qator o'ralganda chalkashtiradi */
  .havo-kurs.bosh .hk-harorat{ font-size:15px; }
}

/* ===========================================================================
   ANIMATSIYA. Kassa ekrani kun bo'yi ochiq turadi - shuning uchun harakat
   SEKIN va mayin, miltillash YO'Q. Boshlang'ich holat animatsiyasiz ham
   to'g'ri ko'rinadi (opacity:1), ya'ni `animation:none` hech narsani
   yo'qotmaydi - `prefers-reduced-motion` shunga tayanadi.
   =========================================================================== */
.havo-kurs .hk-nur{ transform-box:view-box; transform-origin:12px 12px;
  animation:hk-aylan 36s linear infinite; }
@keyframes hk-aylan{ to{ transform:rotate(360deg); } }

.havo-kurs .hk-nur-yarim{ opacity:1; animation:hk-nafas 6s var(--ease-out) infinite alternate; }
@keyframes hk-nafas{ from{ opacity:.45; } to{ opacity:1; } }

.havo-kurs .hk-bulut{ transform-box:view-box; transform-origin:center;
  animation:hk-suz 9s ease-in-out infinite alternate; }
@keyframes hk-suz{ from{ transform:translateX(-1.2px); } to{ transform:translateX(1.2px); } }

.havo-kurs .hk-sis{ opacity:1; transform-box:view-box;
  animation:hk-sis-suz 7s ease-in-out infinite alternate; }
.havo-kurs .hk-sis:nth-of-type(odd){ animation-duration:8.5s; animation-direction:alternate-reverse; }
@keyframes hk-sis-suz{ from{ transform:translateX(-1.6px); opacity:.5; }
  to{ transform:translateX(1.6px); opacity:1; } }

/* Tomchi va qor parchasi: bittadan tushadi (kechikish bilan), ya'ni bir vaqtda
   sakramaydi - shuning uchun harakat tinch ko'rinadi. */
.havo-kurs .hk-tomchi{ opacity:1; transform-box:view-box;
  animation:hk-tushish 2.4s ease-in infinite; }
.havo-kurs .hk-tomchi:nth-of-type(2){ animation-delay:.8s; }
.havo-kurs .hk-tomchi:nth-of-type(3){ animation-delay:1.6s; }
.havo-kurs .hk-ic-mayda .hk-tomchi{ animation-duration:3.4s; }
.havo-kurs .hk-ic-jala .hk-tomchi{ animation-duration:1.8s; }
@keyframes hk-tushish{
  0%{ opacity:0; transform:translateY(-2.5px); }
  30%{ opacity:1; }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translateY(3.5px); }
}

.havo-kurs .hk-parcha{ opacity:1; transform-box:view-box;
  animation:hk-qor-tushish 4.2s ease-in-out infinite; }
.havo-kurs .hk-parcha:nth-of-type(2){ animation-delay:1.4s; }
.havo-kurs .hk-parcha:nth-of-type(3){ animation-delay:2.8s; }
@keyframes hk-qor-tushish{
  0%{ opacity:0; transform:translate(0, -2.5px); }
  30%{ opacity:1; }
  70%{ opacity:1; transform:translate(.8px, 1.5px); }
  100%{ opacity:0; transform:translate(0, 3px); }
}

/* Chaqmoq MILTILLAMAYDI - sekin "nafas oladi" (kassada ko'z charchamasin). */
.havo-kurs .hk-chaqmoq{ opacity:1; animation:hk-chaqnash 4s ease-in-out infinite alternate; }
@keyframes hk-chaqnash{ from{ opacity:.45; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .havo-kurs .hk-nur, .havo-kurs .hk-nur-yarim, .havo-kurs .hk-bulut,
  .havo-kurs .hk-sis, .havo-kurs .hk-tomchi, .havo-kurs .hk-parcha,
  .havo-kurs .hk-chaqmoq{ animation:none; opacity:1; transform:none; }
}

/* --- Litsenziya (2026-09-18) ------------------------------------------- */
/* Banner HAR sahifada, `base.html` da. Matn bo'sh bo'lsa umuman chizilmaydi -
   normal ishlayotgan do'konda ekran toza qoladi. */
.lits-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:14px}
.lits-banner a{white-space:nowrap;font-weight:600}
.lits-karta{padding:14px 16px;border-radius:10px;margin:14px 0}
.lits-karta .lits-holat{font-weight:700;font-size:16px;margin-bottom:6px}
.lits-sariq,.lits-banner.lits-sariq,.lits-karta.lits-sariq{background:#fff6e0;
  border:1px solid #e8b84b;color:#6b4c00}
.lits-qizil,.lits-banner.lits-qizil,.lits-karta.lits-qizil{background:#fdeaea;
  border:1px solid #d9534f;color:#7a1f1c}
.lits-yashil,.lits-banner.lits-yashil,.lits-karta.lits-yashil{background:#eaf7ee;
  border:1px solid #4caf74;color:#1d5c37}
/* Chekdagi belgi - kichik va bir qator (spec 10: 12 belgidan kam) */
.lits-belgi{font-size:9px;opacity:.65;letter-spacing:.5px}

/* ---------- M18 tabel: 31 kunlik jadval ixcham (2026-09-22) ----------
   Umumiy `.table` 18px chetlik bilan oyning faqat 12 kuni ko'rinardi;
   ism ustuni torayib 6 qatorga bo'linardi. Jadval baribir `.table-scroll`
   ichida suriladi - bu faqat zichlik. */
.table.tabel-grid th, .table.tabel-grid td{ padding:7px 6px; }
.table.tabel-grid th:first-child, .table.tabel-grid td:first-child{ min-width:190px;
  padding-left:12px; }