/* «Cheklar» ro'yxati va bitta chek kartochkasi. TZ 8.7–8.8.
 *
 * ⛔ Ro'yxat uslubi «Qarz» va «Tovar» bilan BIR XIL: `.found`
 * `debt.css` da, `.found-head` esa `base.css` da. Uchta bo'limda
 * uchta boshqa jadval bo'lsa, kassir har safar qaytadan o'qib
 * chiqadi. Bu yerda faqat ustunlar boshqa.
 *
 * ⛔ Izoh ilgari `.found-head` ni ham `debt.css` ga havola
 * qilardi va u YOLG'ON edi — u yerda bunday qoida yo'q. Sarlavha
 * shu sababdan umuman uslubsiz chizilardi (2026-09-16, suratda). */

/* ═══════════════════════════════════════════════════════════
   CHEK QATORI — AYNAN BILLZ SHAKLIDA (egasi 2026-09-16 da
   «huddi shunaqa qilib ber» dedi va suratni ko'rsatdi).

   ⛔ ENG KATTA FARQ: qator KARTOCHKA EMAS.

   Bizda `.found` oq fon + soya edi, ya'ni har chek alohida
   «ko'tarilgan sirt» bo'lib turardi. BILLZ da esa och kulrang
   fon va SOYA YO'Q. Farq ma'noda: kartochka «bu alohida narsa»
   deydi, chek esa ro'yxatning BO'LAGI — o'ntasiga o'nta soya
   solinsa ekran g'ovlab ketadi (DIZAYN.md 5.6 dagi bir xil
   mulohaza, u yerda jadval uchun aytilgan).

   ⛔ Ustun sarlavhasi ham olib tashlandi: BILLZ da yo'q va
   qator o'zi tushunarli.
   ═══════════════════════════════════════════════════════════ */
.sl-row{width:100%;display:flex;align-items:center;gap:12px;
  text-align:left;border:0;cursor:pointer;font-family:inherit;
  color:var(--ink);padding:12px 14px;margin-bottom:8px;
  min-height:var(--tap);border-radius:var(--card-r);
  background:#f5f6f7}
.sl-row:active{background:#eef0f2}
/* ⛔ Oxirgi qator varaqning pastida bo'shliq qoldirmasin */
.sl-row:last-child{margin-bottom:0}
/* ⛔ Bekor qilingani JIMROQ: u tarixda qoladi (8.8), lekin
   ko'zni o'ziga tortmasin. */
.sl-row.off{opacity:.72}

/* ⛔ Dona CHAPDA, oq pilyulada — BILLZ dagidek. Ko'z chapdan
   o'qiydi va «nechta» birinchi savol. */
.sl-qty{flex:0 0 auto;min-width:62px;text-align:center;
  background:#fff;border-radius:9px;padding:6px 8px;
  font-size:var(--t-2);color:var(--muted);white-space:nowrap}

.sl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-mid b{font-size:var(--t-3);font-weight:var(--w-bold)}
/* «(−1)» — almashtirishda qaytgan dona, qizil (BILLZ) */
.sl-back{color:var(--danger)}
/* Qaytarish summasi — minus, qizil (qatorda va oynada) */
.sl-sum.sl-minus,.sc-total.sc-minus{color:var(--danger)}
.sl-when{color:var(--muted);font-size:var(--t-2);
  font-variant-numeric:tabular-nums}
/* ⛔ Mijoz ismi PILYULADA — BILLZ da ham shunday. U qatorning
   qo'shimchasi, sarlavhasi emas. */
.sl-who{align-self:flex-start;display:inline-flex;align-items:center;
  gap:5px;margin-top:2px;background:#fff;
  border-radius:8px;padding:3px 9px;font-size:var(--t-2);
  color:var(--muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* ⛔ Odam belgisi — BILLZ dagidek (egasi 2026-09-16 da suratda
   ko'rsatdi: «👤 Murod aka Nam»). Belgi MA'NO tashiydi: pilyula
   do'kon nomi emas, MIJOZ ekanini bir qarashda aytadi. */
.sl-face{font-size:var(--t-1);opacity:.55}

.sl-end{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px}
/* ⛔ Summa KO'K — qatordagi eng muhim raqam (BILLZ da ham). */
.sl-sum{color:var(--mid);font-weight:var(--w-bold);font-size:var(--t-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⛔ O'q DOIRA ichida — BILLZ dagidek (egasi 2026-09-16 da
   suratni ko'rsatdi).
 *
 * ⛔ U TUGMA EMAS: butun qator bosiladi. Doira faqat «bu qator
 * ochiladi» degan ishora — shuning uchun oq fon va jim rang,
 * ko'k tugma emas. Ko'k bo'lsa, kassir aynan o'sha nuqtaga
 * bosishga urinardi va qatorning qolgani «bosilmaydi» deb
 * o'qilardi. */
.sl-go{flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:50%;
  background:#fff;color:#aeb5bf;font-size:var(--t-2);
  line-height:1}
.sl-row:active .sl-go{color:var(--mid)}

@media (max-width:560px){
  /* ⛔ Telefonda o'q ketadi: barmoq butun qatorga tegadi va
     o'q faqat joy egallardi. */
  .sl-go{display:none}
  .sl-qty{min-width:54px;padding:5px 6px}
  .row-4 .debt{width:96px}
}

/* Holat — rangli yozuv, tugma emas: bosiladigan narsa emas. */
.st{font-size:var(--t-1);font-weight:var(--w-mid)}
.st.ok{color:var(--ok)}
.st.bad{color:var(--danger)}
.st.wait{color:var(--warn)}

/* ── Bitta chek — BILLZ «Продажа #…» oynasi (2026-09-26) ──
   ⛔ Kompyuterda o‘ngdan butun balandlikda, ro‘yxat USTIDA (fon
   xiralashadi, bosilsa yopiladi); telefonda pastdan (umumiy `.sheet`
   qoidasi, N4). Naqsh narx va qaytarish panellari bilan bir xil. */
@media (min-width:820px){
  .sc-sheet{justify-content:flex-end;padding:0}
  .sale-card{width:min(560px,100%);height:100vh;max-height:none;
    border-radius:24px 0 0 24px;padding:28px}
}
.sale-card{display:flex;flex-direction:column}
.sc-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.sc-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-kind{color:var(--muted);font-size:var(--t-3)}
.sc-total{font-size:var(--t-6);font-weight:var(--w-head);color:var(--mid)}
.sc-x{margin-left:auto;flex:0 0 auto;width:var(--tap);height:var(--tap);border:0;
  border-radius:50%;background:var(--field);color:var(--muted);font:inherit;
  font-size:var(--t-5);cursor:pointer}
/* ⛔ Bekor qilish sababi CHEK USTIDA turadi, tarixda emas: «nega
   bu chek bekor qilingan» degan savol aynan shu yerda tug'iladi. */
.sc-why{margin-top:10px;padding:8px 10px;border-radius:var(--radius-sm);
  background:rgba(217,58,82,.07);color:var(--danger);font-size:var(--t-2)}
.sc-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:18px 0 8px;color:var(--muted);font-size:var(--t-2)}
.sc-cashier{color:var(--ink)}
.sc-dot{display:inline-block;width:8px;height:8px;margin-right:6px;
  border-radius:50%;vertical-align:1px}
.sc-pays,.sc-infos{display:flex;flex-wrap:wrap;gap:8px}
.sc-pay{display:flex;flex-direction:column;gap:2px;min-width:140px;
  padding:8px 12px;border-radius:10px;background:var(--field);
  font-size:var(--t-2);color:var(--muted)}
.sc-pay b{font-size:var(--t-3);color:var(--mid);font-weight:var(--w-bold)}
.sc-given{color:var(--muted)}
.sc-none{color:var(--muted);font-size:var(--t-2)}
.sc-lines{display:flex;flex-direction:column;gap:8px}
/* ⛔ Qator IKKI qavat: nom va narx, ostida kod va sotuvchi (BILLZ) */
.sc-line{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:10px 12px;border-radius:12px;background:var(--field)}
.sc-name{min-width:0}
.sc-q{color:var(--muted)}
.sc-line b{color:var(--mid);font-weight:var(--w-bold)}
.sc-code{color:var(--muted);font-size:var(--t-2)}
.sc-line.sc-ret b{color:var(--danger)}
.sc-who{font-size:var(--t-2);text-align:right}
.sc-disc{display:flex;justify-content:space-between;margin-top:8px;
  padding:0 12px;color:var(--muted)}
.sc-info{display:flex;flex-direction:column;gap:2px;flex:1 1 180px;
  padding:8px 12px;border-radius:10px;background:var(--field);
  font-size:var(--t-2);color:var(--muted)}
.sc-info b{color:var(--ink);font-weight:var(--w-mid)}
.sc-info.wide{flex-basis:100%}
.sc-info.wide b{white-space:pre-wrap}
/* ⛔ Tugmalar BIR QATORDA (BILLZ: «Печать чека · Изменить · Удалить»);
   tor ekranda o‘zi ikkinchi qatorga o‘tadi. */
.sc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sc-acts > .go,.sc-acts > .ghost{flex:1 1 140px;margin-top:0}
.sc-acts .field{flex:1 1 100%}

/* ── Chek TELEFONDA — butun ekran sahifa (dizayn «Chek tafsiloti»,
   2026-09-28) ─────────────────────────────────────────────────
   ⛔ Bitta HTML: telefon bo‘laklari kompyuterda yashirin, bloklar
   (`.sc-blk`) kompyuterda `display:contents` — ya'ni kompyuterdagi
   oyna avvalgidek tekis ro‘yxat bo‘lib qoladi.
   ⛔ Sahifa faqat `.sc-page` da: tuzatish formasi chizilganda sinf
   olinadi va forma odatdagi pastki oyna bo‘lib chiqadi. */
@media (min-width:820px){
  .sc-top,.sc-ph,.sc-foot{display:none}
  .sc-blk{display:contents}
}
@media (max-width:819px){
  .sc-dk{display:none}
  .sale-card.sc-page{height:100vh;height:100dvh;max-height:none;gap:12px;
    padding:0;border-radius:0;background:var(--page)}
  .sc-page .sc-head,.sc-page .sc-acts,.sc-page .sc-cashier{display:none}
  .sc-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;
    min-height:64px;padding:4px 8px;border-radius:0 0 22px 22px;background:#fff}
  .sc-bk{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    width:var(--tap);height:var(--tap);border:0;border-radius:50%;
    background:transparent;color:var(--mid);cursor:pointer}
  .sc-mid{flex:1;display:flex;flex-direction:column;align-items:center;
    min-width:0;line-height:1.3}
  .sc-mid b{color:var(--ink);font-size:var(--t-5)}
  .sc-mid > span{color:var(--muted);font-size:var(--t-2)}
  .sc-page .sc-why{margin:0 12px}
  .sc-blk{display:flex;flex-direction:column;margin:0 12px;padding:0 16px 4px;
    border-radius:20px;background:#fff}
  .sc-blk .sc-sub{margin:0;padding:14px 0 8px;color:var(--ink);
    font-size:var(--t-5);font-weight:var(--w-bold)}
  .sc-page .sc-pays,.sc-page .sc-infos,.sc-page .sc-lines{flex-direction:column;
    flex-wrap:nowrap;gap:0}
  /* ⛔ Qator: yorliq chapda, qiymat o‘ngda (dizayn). Kulrang kartochka
     emas — oq blok ichida yupqa chiziq, ro‘yxat qatori bilan bir xil. */
  /* ⛔ `flex:0 0 auto` — kompyuterdagi `flex:1 1 180px` ustun
     yo‘nalishida BALANDLIK bo‘lib qolardi: har qator 180px (suratda). */
  .sc-page .sc-pay,.sc-page .sc-info{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;
    justify-content:space-between;align-items:baseline;gap:2px 12px;
    min-width:0;padding:10px 0;border-radius:0;background:transparent;
    border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-3)}
  .sc-page .sc-pay b,.sc-page .sc-info b{color:var(--ink);
    font-weight:var(--w-text);text-align:right}
  .sc-page .sc-given{flex-basis:100%;font-size:var(--t-2)}
  .sc-page .sc-sum,.sc-page .sc-sum b{color:var(--mid);font-weight:var(--w-bold)}
  .sc-page .sc-empty b{color:var(--muted)}
  .sc-page .sc-line{grid-template-columns:minmax(0,1fr) auto;padding:10px 0;
    border-radius:0;background:transparent;border-top:1px solid var(--line)}
  /* ⛔ Tovar surati chapda, ikki qavat bo‘yi (dizayn: 48px). Surati yo‘q
     tovarda — belgi: qator siljimaydi. Qaytgan tovar qatorida surat yo‘q. */
  .sc-page .sc-line:not(.sc-ret){grid-template-columns:48px minmax(0,1fr) auto}
  .sc-page .sc-pic{grid-row:span 2;display:flex;align-items:center;
    justify-content:center;width:48px;height:48px;overflow:hidden;
    border:1px solid var(--line);border-radius:12px;color:var(--muted)}
  .sc-pic img{width:100%;height:100%;object-fit:cover}
  .sc-page .sc-q,.sc-page .sc-code,.sc-page .sc-who{display:none}
  .sc-page .sc-name{font-weight:var(--w-mid)}
  .sc-page .sc-line b{color:var(--ink)}
  .sc-page .sc-line.sc-ret b{color:var(--danger)}
  .sc-each{color:var(--muted);font-size:var(--t-2)}
  .sc-page .sc-disc{margin:0;padding:10px 0;border-top:1px solid var(--line)}
  /* ⛔ Pastki tugma YOPISHGAN: uzun savatda ham bosh barmoq ostida */
  .sc-foot{position:sticky;bottom:0;margin-top:auto;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:#fff}
  .sc-foot > .go{width:100%;max-width:none;margin:0}
}

/* «···» — chek amallari, pastdan oyna (telefon). ⛔ Chek oynasining
   ICHIDA turadi (`sale_card.js`), shuning uchun z-index kerak emas. */
.scm-card{display:flex;flex-direction:column;gap:10px}
.scm-title{align-self:center;padding:4px 0 6px;font-size:var(--t-5)}
.scm-act{display:flex;align-items:center;gap:14px;min-height:60px;
  padding:0 18px;border:0;border-radius:18px;background:var(--page);
  color:var(--ink);font-family:inherit;font-size:var(--t-4);
  font-weight:var(--w-text);text-align:left;cursor:pointer}
.scm-act .ic{flex:0 0 auto;color:var(--mid)}
.scm-word{flex:1}
.scm-note{font-size:var(--t-2)}
.scm-act.scm-bad,.scm-act.scm-bad .ic{color:var(--danger)}
.scm-act.scm-bad{background:rgba(217,58,82,.08);font-weight:var(--w-mid)}
.scm-back{margin-top:6px}

/* ── Chekni TAHRIRLASH — telefon (dizayn «Chekni tahrirlash», «To‘lovni
   tahrirlash», 2026-09-28). `sale_edit_screen.js`.
   ⛔ Faqat `.sed-page` ichida: kompyuterda bu ekran ochilmaydi, u yerda
   BILLZ oynasi va eski ikki forma. Sahifa o‘lchami `.sc-page` dan. */
.sed-page{color:var(--ink)}
.sed-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  gap:8px;min-height:64px;padding:4px 8px;border-radius:0 0 22px 22px;background:#fff}
.sed-title{flex:1;text-align:center;font-size:var(--t-4)}
.sed-link{min-width:var(--tap);min-height:var(--tap);padding:0 8px;border:0;
  background:transparent;color:var(--muted);font-family:inherit;
  font-size:var(--t-4);font-weight:var(--w-text);cursor:pointer}
.sed-save{color:var(--mid);font-weight:var(--w-mid)}
.sed-save:disabled{color:var(--muted);cursor:default}
.sed-tabs{display:flex;gap:8px;margin:0 12px;padding:6px;border-radius:18px;background:#fff}
.sed-tab{flex:1;min-height:var(--tap);border:0;border-radius:14px;background:transparent;
  color:var(--muted);font-family:inherit;font-size:var(--t-3);
  font-weight:var(--w-text);cursor:pointer}
.sed-tab[aria-selected="true"]{background:var(--soft);color:var(--mid);font-weight:var(--w-mid)}
.sed-blk{display:flex;flex-direction:column;gap:10px;margin:0 12px;padding:16px;
  border-radius:20px;background:#fff}
.sed-pane{display:flex;flex-direction:column;gap:12px}
.sed-pane[hidden]{display:none}
.sed-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;
  border:0;border-radius:16px;background:var(--field);color:var(--ink);
  font-family:inherit;font-size:var(--t-3);text-align:left;cursor:pointer}
.sed-key{flex:1;min-width:0;color:var(--muted)}
.sed-val{color:var(--mid);font-weight:var(--w-mid);text-align:right}
select.sed-val{max-width:60%;border:0;background:transparent;font-family:inherit;
  font-size:var(--t-4);appearance:none;cursor:pointer}
.sed-in{flex:1;min-width:0;border:0;outline:0;background:transparent;
  color:var(--ink);font-family:inherit;font-size:var(--t-4)}
.sed-drop{align-self:flex-start}
.sed-lock{flex-direction:row;align-items:center;gap:12px;padding:14px 16px}
.sed-lock .ic{flex:0 0 auto;color:var(--muted)}
.sed-lock-t{display:flex;flex-direction:column;font-size:var(--t-3)}
.sed-lock-t b{font-weight:var(--w-text)}
.sed-lock-t span{color:var(--muted);font-size:var(--t-2)}
.sed-sums{gap:0;padding:0}
.sed-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 16px;color:var(--muted);font-size:var(--t-3)}
.sed-sum b{color:var(--ink);font-size:var(--t-6)}
.sed-sum + .sed-sum,.sed-debt + .sed-sum{border-top:1px solid var(--page)}
.sed-debt{margin-top:-10px;padding:0 16px 12px;color:var(--muted);font-size:var(--t-2)}
.sed-gap b{font-size:var(--t-5)}
.sed-gap.sed-off,.sed-gap.sed-off b{color:var(--warn);font-weight:var(--w-mid)}
.sed-head{font-size:var(--t-4)}
.sed-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sed-chip{display:flex;align-items:center;justify-content:center;gap:4px;
  min-height:44px;padding:0 8px;border:1px solid var(--line);border-radius:22px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:var(--t-3);
  font-weight:var(--w-text);white-space:nowrap;overflow:hidden;
  cursor:pointer}
.sed-note{grid-column:1 / -1;color:var(--muted);font-size:var(--t-2)}
.sed-parts{display:flex;flex-direction:column;gap:8px}
.sed-part{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 8px 0 16px;
  border-radius:16px;background:var(--field)}
/* ⛔ Yorliq `<label>` — umumiy `label` uslubi (kichik, blok) bu yerda kerak emas */
.sed-part .sed-key{margin:0;color:var(--ink);font-size:var(--t-3);font-weight:var(--w-text)}
.sed-amt{width:9em;min-width:0;padding:6px 10px;border:0;border-radius:10px;
  background:var(--field-on);color:var(--ink);font-family:inherit;
  font-size:var(--t-4);font-weight:var(--w-mid);text-align:right}
.sed-x{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:0;border-radius:50%;background:var(--danger);
  color:#fff;cursor:pointer}
.sed-warn{margin:0 12px 16px;padding:12px 16px;border-radius:16px;
  background:rgba(178,106,0,.08);color:var(--warn);font-size:var(--t-2)}

/* ⛔ Bekor qilish — QIZIL YOZUV, qizil tugma emas. Qizil tugma
   ko'zni tortadi va kassir uni tasodifan bosadi; bu esa kamdan-kam
   va qaytarib bo'lmaydigan amal (8.8). */
.danger-text{color:var(--danger)}
.danger-text:hover:not(:disabled){background:rgba(217,58,82,.08)}

/* Ikkita almashtirgich — to'rttalik chiplar bilan bir xil uslubda. */
/* ⛔ Kenglik cheklangan: keng ekranda ikkita chip butun panelni
   egallab, «tugma» emas «tasma» bo'lib qolardi. */
.chips.two{grid-template-columns:repeat(2,1fr);gap:8px;
  max-width:420px;margin:0 0 14px}
.chips.two .chip{min-height:var(--tap)}
/* ⛔ MATN KO‘K FONDA KO‘K EDI — ya'ni KO‘RINMASDI.
 *
 * Bu yerda `--bright` «och rang» deb o‘ylangan; aslida u `--mid`
 * bilan BIR XIL ko‘k (#2f6fed). Natijada tanlangan chip bo‘m-bo‘sh
 * ko‘k to‘rtburchak bo‘lib turardi va «Cheklar» so‘zi yo‘qolgandi.
 *
 * Buni test emas, SURAT topdi (2026-09-12) — DIZAYN.md 6 dagi
 * ro‘yxat yana bir qator uzaydi. */
.chips.two .chip.on{background:var(--mid);color:#fff}

/* ── Sana, qidiruv va kun yakuni (egasi BILLZ ni ko'rsatdi) ──

   ⛔ Ikki marta o'zgardi va ikkalasi ham EGASI ko'rsatgani:

     `‹ sana ›`    →  oltita chip        (2026-09-16 ertalab)
     oltita chip   →  bitta tanlagich   (2026-09-16 kechqurun)

   Ikkinchisi BILLZ kalendarining surati bilan keldi: u yerda
   bitta tugma bosiladi va oynada kalendar ham, tez tugmalar
   ham, qo'lda terish ham bor. Uslub `datepick.css` da — u
   hisobot ekranlariga ham kerak bo'ladi. */
/* ⛔ Faqat ORALIQ: tanlagichning o'zi `.dp-open`. Yalang'och
   sinf global qoida bermasin (DIZAYN.md). */
.sl-period{margin-bottom:12px}

/* ⛔ DO'KON NOMI qator ichida (BILLZ: «● Miss Ferena»).
   Egasida ikki do'kon bor va direktor ikkalasini bir ro'yxatda
   ko'radi — do'kon yozilmasa, qaysi biri ekani bilinmasdi. */
.sl-place{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-2);color:var(--muted);white-space:nowrap}
/* ⛔ O'Z NUQTASI, `debt.css` dagi `.dot` EMAS.
   Avval o'shani ishlatgandim va qo'riqchi darhol qizardi
   (`test_bare_layout_class_does_not_leak`) — u haq: qarz
   ro'yxatida nuqta ikki qatorli matn yonida turadi va
   `margin-top:6px` oladi, bu yerda esa matn bir qatorda.
   Bitta sinf ikki ekranda ikki ma'no olsa, biri jimgina
   buziladi (DIZAYN.md 3). */
.sl-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

/* Kun yakuni — ro'yxat TEPASIDA: «shu kuni qancha» degan savol
   cheklarni birma-bir sanashdan oldin tug'iladi. */
.day-sum{padding:14px 16px;margin-bottom:12px;
  border-radius:var(--card-r);
  background:#fff;box-shadow:var(--card-sh)}
.day-sum-head{font-size:var(--t-2);color:var(--muted);margin-bottom:4px}
/* ⛔ Qator uslubi `sale.css` dagi `.trow` dan keladi va BU YERDA
   qayta ta'riflanmaydi: bitta sinf ikki faylda ikki ma'no olsa,
   ekranlardan biri jimgina buziladi (DIZAYN 3, testi bor). */

/* ⛔ Sana va kun yakuni keng ekranda TASMA bo‘lib qolardi: sana
   900 piksellik qutining o‘rtasida yolg‘iz turardi (2026-09-12,
   suratda ko‘rindi). */
@media (min-width:820px){
  .day-sum{max-width:560px}
}

/* ═══════════════════════════════════════════════════════════
   STATISTIKA USTUNI — BILLZ naqshi (egasi 2026-09-16 da
   «huddi shunaqa qilib ber» dedi va suratni ko'rsatdi).

   ⛔ SHAKL BILLZ dan, MAZMUN bizdan: u yerdagi «Подарочные
   сертификаты» va «Баланс клиентов» bizda umuman yo'q
   narsalar. Ularni «0» qilib chizish nusxa emas, YOLG'ON
   bo'lardi (1.3) — sabab `sales_stats.js` boshida.
   ═══════════════════════════════════════════════════════════ */

/* ⛔ Ustun O'NGDA, ro'yxat CHAPDA — ikkovi bir vaqtda ko'rinsin.
   Telefonda pastga tushadi (bitta ustunli grid), yashirilmaydi:
   do'kondor ko'pincha telefonda qaraydi. */
.sl-wrap{display:grid;gap:14px;align-items:start}
/* ⛔ RO'YXAT OQ VARAQ USTIDA — DIZAYN.md 5.6 dagi birinchi fon
   modeli, va BILLZ da ham aynan shunday.
 *
 * Birinchi urinishimda varaq yo'q edi: sahifa foni `#f4f5f7`,
 * qator foni `#f5f6f7` — ikkovi deyarli bir xil va qator fonga
 * QO'SHILIB ketgandi (suratda ko'rindi). BILLZ da kulrang qator
 * ajralib turadi, chunki u OQ varaq ustida yotadi.
 *
 * ⛔ Zebra YO'Q: bu yerda qatorlar orasida bo'shliq bor, ya'ni
 * ular allaqachon ajralgan. Zebra faqat yopishgan jadvalda
 * kerak (katalog). */
/* ⛔ Chap ustun: qidiruv, filtr va ro‘yxat BIRGA.
   Ilgari qidiruv `.sl-wrap` dan TASHQARIDA edi va butun
   kenglikni egallab, statistika ustunini pastga itarardi. */
.sl-left{display:flex;flex-direction:column;min-width:0}
.sl-main{min-width:0;background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:12px}
.sl-side{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ⛔ 1100px dan: BILLZ da yon ustun ~290px va u SIQILMAYDI —
   «60 885 000 UZS» bir qatorda turishi kerak. */
@media (min-width:1100px){
  .sl-wrap{grid-template-columns:minmax(0,1fr) 300px}
}

/* ⛔ «HISOBOTNI CHOP ETISH» — ustunning ENG TEPASIDA.
   Egasi: «BILLZ dagidek — o'ng tepada, statistika ustuni
   ustida» (2026-09-16). U yerda ham ustun kengligida, ko'k va
   o'ng chekkasida o'q bilan turadi.

   ⛔ `.go` DAN O'SADI, nusxa emas: balandlik, rang va o'chiq
   holat bir joyda (base.css). Bu yerda faqat FARQ — o'q va
   uning joyi. */
.st-print{display:flex;align-items:center;justify-content:center;
  gap:10px;margin:0 0 4px}
/* ⛔ O'q O'NG CHEKKAGA suriladi, matn esa MARKAZDA qoladi —
   BILLZ dagidek. `margin-left:auto` bo'lsa matn chapga siljirdi. */
.st-arrow{position:absolute;right:18px;font-size:var(--t-3)}
.st-print{position:relative}

.st-card{background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:14px 16px}
.st-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px}
/* ⛔ Yorliq JIM, son KATTA va KO'K — BILLZ dagi ierarxiya.
   Ko'z avval raqamga tushadi, yorliq esa uni izohlaydi. */
.st-k{display:block;color:var(--muted);font-size:var(--t-2)}
.st-big{color:var(--mid);font-size:var(--t-6);font-weight:var(--w-head);
  line-height:var(--lh-tight);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
/* ⛔ Belgi JIM kulrang doirada: u bezak, ma'no tashimaydi.
   BILLZ da ham shunday — rangli bo'lsa raqam bilan
   raqobatlashardi. */
.st-mark{flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:var(--page);display:flex;align-items:center;
  justify-content:center;font-size:var(--t-2);opacity:.7}

/* ⛔ CHIZIQ emas, ORALIQ + yupqa chiziq: DIZAYN.md 5.2 chiziqni
   man qilmaydi, u «chiziq bilan KESMA» deydi. Bu yerda chiziq
   kartochka ichidagi ikki qismni ajratadi va BILLZ da ham bor. */
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.st-cell{min-width:0}
.st-cell .st-k{font-size:var(--t-1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* ⛔ Katak qiymati ham KO'K: BILLZ da shunday va sabab bor —
   bular BOSILADIGAN raqamlar bo'lishi mumkin (keyinchalik
   filtrga aylanadi). Hozircha rang shaklni saqlaydi. */
.st-v{display:block;color:var(--mid);font-size:var(--t-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⛔ KAMOMAD QIZIL — yagona rangli katak. Smena farqi raqam
   emas, OGOHLANTIRISH: kassada pul kam chiqqan. Qolgan hamma
   katak ko'k bo'lgani uchun u darhol ko'zga tashlanadi. */
.st-v.st-bad{color:var(--danger)}

/* ⛔ KUN AJRATGICHI — punktir chiziq, o‘rtasida sana (BILLZ).
   Ro‘yxat davr bo‘yicha chiziladi va bitta haftada 40 ta chek
   bo‘lsa, qaysi biri qaysi kunga tegishli ekani bilinmasdi.

   ⛔ Chiziq bu yerda O‘RINLI (DIZAYN.md 5.2 chiziqni man
   qilmaydi, «chiziq bilan KESMA» deydi): u ro‘yxatni kesmaydi,
   ikki kun ORASIDA turadi va sana uni uzib turadi. */
.sl-day{display:flex;align-items:center;gap:10px;
  margin:14px 0 10px;color:var(--muted);font-size:var(--t-2)}
.sl-day::before,.sl-day::after{content:'';flex:1;
  border-top:1px dashed var(--line)}
.sl-day span{flex:0 0 auto;background:var(--page);
  border-radius:20px;padding:3px 12px;white-space:nowrap}
/* ⛔ Birinchi ajratgich tepada bo‘shliq qoldirmasin */
.sl-day:first-child{margin-top:0}
/* Kun jami — faqat telefonda (dizayn «Cheklar 1»); kompyuterda statistika
   ustuni yonida turadi, bir raqam ikki joyda bo‘lmasin */
.sl-day-sum{display:none}
/* Almashtirishda qaytgan summa — faqat telefonda, kun jami yonida */
.sl-swap{display:none}

/* Ko‘rinish tanlash oynasidagi joriy satr */
.sl-view.on .who{color:var(--mid);font-weight:var(--w-bold)}
.sl-view.on .ic{color:var(--mid)}


/* ── FILTR PANELI — BILLZ naqshi (egasi 2026-09-16) ─────────
   ⛔ Qidiruv va «Filtrlar» BIR QATORDA: ikkovi ham ro'yxatni
   toraytiradi, ya'ni bitta savolning ikki yo'li. */
.sf-bar{display:flex;gap:10px;align-items:flex-start;
  flex-wrap:wrap;margin-bottom:10px}
.sf-bar .field{flex:1 1 260px;margin-bottom:0}
.sf-open{margin:0;flex:0 0 auto;height:var(--tap)}
/* ⛔ Nechta filtr qo'yilgani YOPIQ turganda ham ko'rinadi:
   busiz do'kondor «ro'yxat nega bo'sh» deb o'ylardi. BILLZ da
   bu sanoq yo'q va bu ularning kamchiligi. */
.sf-count{background:var(--mid);color:#fff;border-radius:20px;
  padding:1px 7px;font-size:var(--t-1);font-weight:var(--w-mid);
  margin-left:4px}
.sf-open.on{border-color:var(--mid);background:var(--soft);
  color:#2a5bbf}

.sf-card{background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:14px 16px;margin-bottom:12px}
/* ⛔ «dan — gacha» BITTA qutida: ular bitta savolning ikki
   chekkasi, ikkita alohida savol emas (BILLZ dagidek). */
.sf-range{display:flex;align-items:center;gap:8px}
.sf-range input{flex:1;min-width:0}
.sf-dash{flex:0 0 auto;color:var(--muted)}
/* ⛔ CHEGARA OLIB TASHLANDI (2026-09-17). Ilgari bu yerda
   `max-width:700px` turardi — «panel tasma bo‘lmasin» (5.3).
   Qoida to‘g‘ri edi, lekin panel endi CHAP USTUN ichida va
   ustunning o‘zi chegara bo‘lib turibdi. Ikkita chegara qo‘shilib
   panelni ustun ichida ham toraytirardi va yonida yana bo‘sh
   joy qolardi.

   ⛔ QIDIRUV MAYDONIGA TEGILMAYDI. Men uni ham cho‘zmoqchi
   bo‘ldim (`max-width:none`) va ekran YOMONLASHDI: maydon
   930 pikselga cho‘zilib, «Filtrlar» tugmasi ustunning narigi
   chekkasiga uchib ketdi — ikkovi bir qatorda turishining
   ma'nosi yo‘qoldi. Suratda ko‘rindi, qaytarib olindi.

   ⛔ Maydon kengligi UCH joyda cheklangan ekan:
   `base.css` `.field` 560, `shell.css` `input` 520, shu yerda
   panel 700. Uchtasi ham mening qo‘limdan chiqqan va ular
   BIRGA ishlaganda tepa o‘ngda bo‘sh joy qolgandi. Endi
   chegarani USTUN beradi (3.2: bitta manba). */

/* ⛔ «Yuklab olish» sahifalash qatorida — BILLZ dagi «Скачать».
   U ro'yxatning DAVOMI: ekranda ko'rinmagan qatorlar ham faylga
   tushadi, ya'ni savol bitta — «shu ro'yxat». */
.sl-save{color:var(--mid);white-space:nowrap}

/* ── Chekni tuzatish (8.11) ──────────────────────────────── */

/* ⛔ Prefiksli sinflar: yalang‘och sinf boshqa ekranga oqib
   o‘tadi (DIZAYN.md; `.sale-acts` xatosi 2026-09-19). */
.se-log {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--field);
  border-radius: 10px;
  margin-top: 6px;
}

.se-was { color: var(--muted); }

.se-cust:empty { display: none; }

/* ⛔ Izoh maydoni boshqa maydonlar bilan BIR KENGLIKDA va BIR
   KO‘RINISHDA: umumiy qoida `input` ga yozilgan, `textarea`
   undan tashqarida qolgandi — suratda avval kichkina, keyin oq
   ramkali quti bo‘lib ko‘rindi (DIZAYN.md 5.7: maydon
   to‘ldirilgan, soyasiz). */
.se-note {
  width: 100%;
  max-width: 560px;
  background: var(--field);
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
}

.se-note:focus { background: var(--field-on); box-shadow: var(--ring); }

/* ⛔ Sarlavha izohi maydondan AJRALIB tursin: yopishib turganda
   u «Sotuvchi» yorlig‘ining izohidek o‘qilardi. */
[data-se-hint] { margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════
   TELEFON — «Cheklar 1» dizayni (egasi, 2026-09-28).

   ⛔ SUMMA BIRINCHI. Telefonda ko‘z qatorga bir soniya tushadi va
   savol «qancha»; dona, vaqt va raqam — ikkinchi qavatda, jim.
   Kompyuterdagi BILLZ qatori (dona chapda) tegilmadi: u yerda
   ustunlar keng va egasi uni tasdiqlagan.

   ⛔ Kompyuterda telefon bo‘laklari YASHIRIN, telefonda esa
   kompyuter bo‘laklari — bitta qator HTML, ikki joylashuv. Ikki
   xil qator yozilsa, biriga ustun qo‘shilib ikkinchisida unutilardi.
   ═══════════════════════════════════════════════════════════ */
.sl-meta,.sl-pay,.sl-date,.sf-find .ic{display:none}

/* To‘lov turi — rang pul QAYERGA tushishidan (`sales_rows.js`) */
.sl-pay{font-size:var(--t-2);font-weight:var(--w-mid);white-space:nowrap}
.sl-pay.cash{color:var(--ok)}
.sl-pay.term{color:var(--mid)}
.sl-pay.debt{color:var(--price)}
.sl-pay.calm{color:var(--muted)}
.sl-pay.back{color:var(--danger)}

@media (max-width:819px){
  /* ⛔ Sahifalash o‘rnida — ro‘yxat oxiridagi jim yozuv; unga yetilganda
     davomi o‘zi keladi (`sales_list.telMore`, egasi 2026-09-28) */
  .sl-tail{padding:14px 0;text-align:center;color:var(--muted);font-size:var(--t-2)}
  /* ⛔ Oq varaq, qatorlar orasida YUPQA chiziq — kulrang kartochka
     emas. Telefonda 8px oraliqli o‘nta kartochka ekranga to‘rttasini
     sig‘dirardi; dizayndagi zich ro‘yxat oltitasini ko‘rsatadi. */
  .sl-main{padding:4px 16px;border-radius:22px;box-shadow:none}
  .sl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"sum place" "meta pay" "swap swap" "who who";
    gap:4px 12px;align-items:baseline;margin:0;padding:12px 0;
    border-radius:0;background:transparent;
    border-bottom:1px solid var(--line)}
  .sl-row:last-child{border-bottom:0}
  .sl-row:active{background:var(--page)}
  .sl-mid,.sl-end{display:contents}
  .sl-qty,.sl-mid b,.sl-when{display:none}
  .sl-sum{grid-area:sum;color:var(--ink);font-size:var(--t-5)}
  .sl-place{grid-area:place;justify-self:end;color:var(--ink);opacity:.75}
  .sl-dot{width:10px;height:10px}
  .sl-meta{grid-area:meta;display:block;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;color:var(--muted);
    font-size:var(--t-2);font-variant-numeric:tabular-nums}
  .sl-pay,.sl-row .st{grid-area:pay;display:block;justify-self:end}
  .sl-swap{grid-area:swap;display:block;color:var(--muted);
    font-size:var(--t-2)}
  .sl-swap-sum{color:var(--danger);font-weight:var(--w-mid);
    font-variant-numeric:tabular-nums}
  /* ⛔ Mijoz — kulrang pilyulada, ko‘k odam belgisi bilan: bu do‘kon
     nomi emas, ODAM ekanini bir qarashda aytadi. Mijozsiz chekda
     pilyula umuman yo‘q (80% savdo mijozsiz, 10.4.1). */
  .sl-who{grid-area:who;justify-self:start;margin-top:4px;
    padding:5px 12px 5px 8px;border-radius:15px;background:var(--page);
    color:var(--ink);font-weight:var(--w-text)}
  .sl-face{opacity:1;color:var(--mid);display:flex}

  /* Kun sarlavhasi — chapda, qalin; punktir chiziq kompyuterda qoladi */
  .sl-day{margin:14px 0 2px;color:var(--ink);font-size:var(--t-4);
    font-weight:var(--w-mid)}
  .sl-day::before,.sl-day::after{display:none}
  .sl-day span{background:none;padding:0}
  .sl-day-sum{display:block;margin-left:auto;color:var(--mid);
    font-weight:var(--w-bold);font-variant-numeric:tabular-nums}

  /* ⛔ Qidiruv va filtr BITTA kulrang maydonda: ikkovi ham ro‘yxatni
     toraytiradi. Filtr — belgi; so‘z «Filtrlar» ekran o‘quvchida qoladi. */
  .sl-period{display:none}
  .sf-bar{flex-wrap:nowrap;gap:0;align-items:center;
    background:var(--field);border-radius:14px}
  .sf-bar .field.sf-find{flex:1 1 auto;min-width:0;display:flex;
    align-items:center;gap:8px;padding-left:14px;color:var(--muted)}
  .sf-find .ic{display:block;flex:0 0 auto}
  .sf-find input{background:transparent;padding-left:0;box-shadow:none}
  .sf-open{display:flex;align-items:center;gap:6px;width:auto;
    height:var(--tap);padding:0 14px;border:0;border-left:1px solid var(--line);
    border-radius:0 14px 14px 0;background:transparent;color:var(--mid)}
  .sf-word{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}

  /* ⛔ Sana tugmasi PASTDA, ro‘yxat surilganda ham turadi: «kechagi
     chek» degan savol ro‘yxatning o‘rtasida ham tug‘iladi. */
  .sl-date{position:sticky;bottom:0;z-index:5;display:flex;
    align-items:center;justify-content:center;gap:10px;width:100%;
    min-height:var(--tap);margin-top:12px;border:0;border-radius:26px;
    background:#fff;box-shadow:var(--sh-2);color:var(--ink);
    font-family:inherit;font-size:var(--t-4);font-weight:var(--w-mid);
    cursor:pointer}
  .sl-date .ic{color:var(--mid)}
}

/* ── «Sana» va «Filtr» oynalari (telefon) ────────────────────
   ⛔ Pastdan chiqadi — umumiy `.sheet` qoidasi (N4). Bu yerda
   faqat ichi. */
.sd-fast,.sfs-chips{display:flex;flex-wrap:wrap;gap:8px}
.sd-chip,.sfs-chip{display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 16px;border:1px solid var(--line);
  border-radius:22px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:var(--t-3);cursor:pointer}
.sd-chip.on,.sfs-chip.on{border-color:var(--mid);background:var(--mid);
  color:#fff;font-weight:var(--w-mid)}
.sd-month{display:flex;align-items:center;justify-content:space-between;
  margin:16px 0 4px}
.sd-month b{font-size:var(--t-4);font-weight:var(--w-mid)}
.sd-mv{width:44px;height:44px;border:0;border-radius:22px;
  background:transparent;color:var(--mid);font-size:var(--t-5);
  font-family:inherit;cursor:pointer}
.sd-week,.sd-cal .sd-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sd-week span{color:var(--muted);font-size:var(--t-2);text-align:center}
/* ⛔ Katak `date_pick.js` to‘ridan; bu yerda faqat barmoq o‘lchovi (44px) */
.sd-cal [data-date]{height:44px;font-size:var(--t-3)}
.sd-apply{margin-top:14px}

.sfs-block{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.sfs-block > b,.sfs-row b{color:var(--ink);font-size:var(--t-4);
  font-weight:var(--w-mid)}
.sfs-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:var(--tap);margin-bottom:12px}
.sfs-row select{flex:0 1 60%;min-width:0}
.sfs-range{display:flex;gap:10px}
.sfs-range input{flex:1;min-width:0}
/* ⛔ Tugmalar oyna PASTIDA yopishgan: uzun oynada ularni qidirib
   surish kerak bo‘lmasin. */
.sfs-foot{position:sticky;bottom:-16px;display:flex;gap:10px;
  margin:4px -16px -16px;padding:12px 16px 16px;background:#fff}
.sfs-foot > .oc,.sfs-foot > .go{flex:1;margin:0}

/* ── «Statistika» — telefonda alohida sahifa (dizayn «Kun statistikasi»,
   2026-09-28) ──────────────────────────────────────────────────
   ⛔ Kompyuterda tugma YO‘Q: u yerda statistika ro‘yxat yonida turibdi
   (`.sl-side`). Telefonda esa ustun ro‘yxat OSTIDA edi — pastdagi sana
   tugmasi uni yopardi va unga yetish uchun butun ro‘yxatni surish kerak
   edi. Endi u sarlavhadagi tugma ortida, butun ekran sahifa bo‘lib.
   Sahifaning o‘zi `.sc-page` (chek sahifasi bilan bir xil ramka). */
.sl-stats-go{display:none}
@media (max-width:819px){
  .sl-side{display:none}
  /* ⛔ Ustun ketgach ro‘yxat qisqa bo‘lishi mumkin — sana tugmasi
     o‘rtada osilib qolmasin: sahifa ekran bo‘yiga cho‘ziladi va tugma
     pastga tushadi (`margin-top:auto`). Faqat `.sl-date` bor sahifada.
     ⛔ Karkas sinfi (`.pane`) bu yerda YOZILMAYDI — faqat teg va `id`. */
  section:has(.sl-date),#tabBody:has(.sl-date),.op-body:has(> .sl-date){
    display:flex;flex-direction:column}
  #tabBody:has(.sl-date),.op-body:has(> .sl-date){flex:1 0 auto}
  .op-body > .sl-date{margin-top:auto}
  .op-body > .sl-wrap{margin-bottom:12px}
  /* ⛔ Tugma sarlavha QATORIDA (dizayn «Cheklar 68 [▮]»): o‘ralsa u
     ikkinchi qatorga tushib, ro‘yxatni 60px pastga surardi (suratda
     topildi). Sarlavha shu ekranda 26px — «Barcha savdolar ⌄ 68» va
     tugma 390px ga sig‘adi. */
  #tabTitle:has(.sl-stats-go){flex-wrap:nowrap;font-size:var(--t-6)}
  .sl-stats-go{display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:var(--tap);height:var(--tap);margin-left:auto;
    border:0;border-radius:50%;background:var(--field);color:var(--mid);
    cursor:pointer}
  .ss-body{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
  /* «Yuklab olish» — statistika tubida, oq blok kabi (egasi, 2026-09-28) */
  .ss-save{margin:0 12px 16px;min-height:var(--tap);border:0;border-radius:20px;
    background:var(--glass);color:var(--mid);font:inherit;font-size:var(--t-3);
    font-weight:var(--w-mid);cursor:pointer}
  .ss-save:disabled{opacity:.55}
  .ss-blk{display:flex;flex-direction:column;margin:0 12px;
    border-radius:20px;background:#fff}
  .ss-row{display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;padding:12px 16px;border-top:1px solid var(--page);
    font-size:var(--t-3)}
  .ss-blk > .ss-row:first-child{border-top:0;padding-top:14px}
  .ss-row span{color:var(--muted)}
  .ss-row b{color:var(--ink);font-weight:var(--w-bold);
    font-variant-numeric:tabular-nums;text-align:right}
  .ss-row b.ss-debt{color:var(--price)}
  .ss-big{display:flex;align-items:center;gap:14px;padding:16px}
  .ss-big > div{display:flex;flex-direction:column;min-width:0}
  .ss-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%}
  .ss-k{color:var(--muted);font-size:var(--t-3)}
  .ss-sum{font-size:var(--t-6);font-weight:var(--w-bold);line-height:1.2;
    font-variant-numeric:tabular-nums}
  .ss-sum small{color:var(--muted);font-size:var(--t-3);font-weight:var(--w-text)}
  .ss-blue .ss-mark{background:var(--soft);color:var(--mid)}
  .ss-blue .ss-sum{color:var(--mid)}
  .ss-green .ss-mark{background:#e7f6ef;color:var(--ok)}
  .ss-green .ss-sum{color:var(--ok)}
}