/* ═══════════════════════════════════════════════════════════
   ASOS — ranglar, shrift, tugma va maydonlar.

   ⛔ 2026-09-08: bezak olib tashlandi (egasining qarori).
   Ilgari ko'k gradient fon, shaffof «shisha» kartalar, gradientli
   va soyali tugmalar bor edi. Endi BILLZ dagidek sodda: oq varaq,
   yupqa kulrang chiziq, tekis ko'k tugma.

   ⛔ Bezak ketdi, O'LCHAM QOLDI: `--tap` 52px — barmoq o'lchovi
   (2.1). Bozorda qo'l qo'pol va shoshilgan; kichik tugma BILLZ da
   bor deb kichraytirilmaydi.

   ⛔ Ekranga xos stil bu yerda yozilmaydi (CLAUDE.md 1):
      login.css · shell.css · plan.css
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Varaq va sirt */
  --page:#f4f5f7; --glass:#fff;
  /* Matn */
  --ink:#1f2329; --muted:#8a9099;
  /* Chiziq */
  --line:#e6e8eb;
  /* ⛔ MAYDON FONI — BILLZ dagidek TO'LDIRILGAN (egasi, 2026-09-19:
     «UI dizayni bilzniki bilan bir xil qil»).

     Uning uchala suratida ham maydon oq emas: och kulrang quti,
     ramkasiz va soyasiz. Farq kichik ko'rinadi, lekin ekranning
     umumiy ta'mi shundan chiqadi — oq varaqda oq maydon faqat
     soya bilan ajraladi va u «ko'tarilgan» bo'lib ko'rinadi;
     to'ldirilgan maydon esa varaqning ICHIGA o'yilgan. */
  /* ⛔ TO'Q KULRANG, `--page` DAN AJRALADIGAN.
     Birinchi urinishimda `#f1f3f6` qo'ydim — BILLZ suratidagi
     aynan rang. Suratda u OQ varaqda turadi, bizda esa sahifa
     KULRANG (`--page:#f4f5f7`) va maydon fonda YO'QOLDI:
     «Hozirgi parol» qutisi ko'rinmay qoldi. Rang ko'chirilmaydi —
     KONTRAST ko'chiriladi. */
  --field:#e9ecf1; --field-on:#fff;
  /* Yagona urg'u rangi */
  --mid:#2f6fed; --soft:#eaf1fe;
  /* ⛔ Eski nomlar saqlandi — boshqa fayllar ularga tayanadi */
  --deep:#f4f5f7; --bright:#2f6fed;
  /* Holat */
  --danger:#dc3c39; --ok:#12996b; --warn:#b26a00;
  /* ⛔ Savat narxi — BILLZ da to'q sariq (skrinshotdan 3x
     kattalashtirib olindi). Qora emas: kassir narxni darhol
     ajratsin va u tahrirlanishi mumkinligi ko'rinib tursin. */
  --price:#f5871f;
  /* O'lcham */
  --tap:52px; --tap-lg:52px;
  /* ⛔ Yo'lak toraydi: kompyuterda yozuv yo'q (BILLZ) */
  --rail:60px; --gap:12px;

  /* ⛔ KARTOCHKA — BILLZ ko'rinishi (2026-09-13).
   *
   * Egasi: «UI billzga uxshamayapti, bizda maqsad billzni har bir
   * bolimini ko'chirish, visual birxil qilish edi».
   *
   * Uning suratlarida kartochka RAMKASIZ: oq sirt, yumshoq soya va
   * kattaroq radius. Ramkali kartochka jadvalga o'xshaydi, soyali
   * kartochka esa sirtga o'xshaydi — farq shunda.
   *
   * ⛔ 2026-09-08 da «katta soyalar olib tashlandi» deb yozilgan
   * edi va u ham «BILLZ dagidek» deb asoslangan. O'sha o'qish
   * NOTO'G'RI edi: BILLZ da soya bor, faqat u KATTA emas, yumshoq. */
  --card-r:16px;

  /* ⛔ SOYA — UCH POG'ONA, BITTA MANBA (2026-09-16, egasi:
     «shrift va soyalarni ham UI chiroyli qilgin»).
   *
   * ⛔ RANG NEYTRAL EMAS, KO'KIMTIR: `rgba(28,42,74,…)`.
   * Ilgari `rgba(20,24,31,…)` — deyarli qora — turardi va oq
   * kartochka och kulrang varaqdan AJRALMASDI: soya «kir»
   * bo'lib ko'rinardi, ko'tarilgandek emas. Ko'kimtir soya
   * fonning o'z rangi bilan bir oilada bo'ladi.
   *
   * ⛔ HAR POG'ONA IKKI QATLAM: ingichka «tegish» soyasi
   * (1px, chekkani belgilaydi) va yumshoq «muhit» soyasi
   * (kattaroq blur, balandlikni beradi). Bitta qatlam bilan
   * soya yo yo'qdek, yo iflosdek chiqadi.
   *
   * ⛔ Pog'onani ARALASHTIRMANG: maydon kartochka bilan bir
   * og'irlikda tursa ierarxiya yo'qoladi. */
  --sh-1:0 1px 2px rgba(28,42,74,.06), 0 2px 6px rgba(28,42,74,.05);
  --sh-2:0 1px 2px rgba(28,42,74,.05), 0 8px 24px rgba(28,42,74,.08);
  /* Ustidan ochiladigani: oyna, ochiladigan ro'yxat */
  --sh-3:0 2px 6px rgba(28,42,74,.08), 0 18px 48px rgba(28,42,74,.16);
  /* ⛔ Almashtirgich tugmachasi — pog'onaga KIRMAYDI: u 18px va
     o'z uyasi ICHIDA turadi, sirt emas. Pog'ona soyasi unda
     tugmachani yo'qotib yuborardi. Lekin O'ZGARUVCHI: soya
     CSS ichida bir martalik yozilmasin (DIZAYN.md 1.6). */
  --sh-knob:0 1px 2px rgba(28,42,74,.30);
  /* ⛔ Eski nomlar — yigirmata faylda ishlatiladi, saqlandi */
  --card-sh:var(--sh-2); --ctl-sh:var(--sh-1);

  /* ⛔ FOKUS HALQASI — BITTA joyda. Ilgari ikki faylda ikkita
     BOSHQA ko'k turardi: `rgba(30,95,208,.16)` va `.15`.
     Ikkalasi ham `--mid` (#2f6fed = 47,111,237) EMAS edi, ya'ni
     halqa brend rangidan biroz boshqacha bo'lib chiqardi. */
  --ring:0 0 0 3px rgba(47,111,237,.18);

  /* ⛔ SHRIFT O'LCHAMI — POG'ONA, TASODIF EMAS.
   *
   * Loyihada 19 xil o'lcham yig'ilgan edi: 13 va 13.5, 14 va
   * 14.5, 11 va 11.5 yonma-yon turardi. Yarim piksel farqni
   * ko'z «boshqa o'lcham» deb emas, «qiyshiq» deb o'qiydi —
   * matn tartibsiz ko'rinishining sababi shu edi.
   *
   * Pog'ona ENG KO'P ISHLATILGAN o'lchamlardan yig'ildi, ya'ni
   * ekranlarning ko'pi qayta chizilmadi.
   *
   * `tests/test_design_code.py` yangi o'lchamni ushlaydi. */
  --t-1:11.5px;  /* belgi, yorliq yonidagi son      */
  --t-2:13px;    /* jim izoh, jadval sarlavhasi     */
  --t-3:14px;    /* asosiy matn, tugma, maydon      */
  --t-4:15px;    /* ta'kid                          */
  --t-5:17px;    /* blok sarlavhasi                 */
  --t-6:22px;    /* katta son: jami, qoldiq         */
  --t-7:28px;    /* ekran sarlavhasi                */

  /* ⛔ POG'ONANING O'ZIDA HAM YARIM PIKSEL BO'LMAYDI.
   *
   * Birinchi yozganimda sakkiz pog'ona edi va ikkitasi
   * `12.5px` bilan `13px` — ya'ni men tuzatayotgan xatoni
   * pog'onaning ICHIGA qaytadan kiritgandim. Buni men emas,
   * o'zim yozgan test topdi. Ikkalasi bittaga qo'shildi va
   * kattarog'i tanlandi: bozorda kichraytirish hech qachon
   * to'g'ri yo'nalish emas (DIZAYN.md 5.1). */

  /* ⛔ BELGI VA RAQAM POG'ONAGA KIRMAYDI va bu ataylab.
     `font-size:30px` bo'sh savatdagi `||||||` chizmasi, `24px`
     esa ✕ tugmasi — ular MATN emas, SHAKL. Ularni pog'onaga
     tiqish chizmaning o'lchamini buzardi. */

  /* ⛔ QATOR BALANDLIGI ROLGA QARAB.
   *
   * `body` da 1.5 turadi va u ABZAS uchun to'g'ri. Lekin
   * sarlavha 28px × 1.5 = 42px quti bo'lib, so'zning ostida
   * va ustida bo'sh joy qolardi — suratda sarlavha «osilib»
   * ko'rinardi. Katta matnga 1.5 kerak emas: harflar o'zi
   * baland.
   *
   * ⛔ Bu DIZAYN.md 1.4 ni BEKOR QILMAYDI. U yerdagi qoida
   * `body` haqida va o'z kuchida: 1.5 siz OQIYDIGAN matn
   * o'yilgan ko'rinadi. Bu esa sarlavha haqida. */
  --lh-tight:1.2;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* ⛔ SENSOR (egasi, 2026-09-19: «butun ekranni sensorga mosla —
   POS ekran, sensorli noutbuk, planshet»). `touch-action:
   manipulation` ikki marta bosishda kattalashtirishni va 300 ms
   kechikishni o‘chiradi: kassir «＋» ni tez-tez bossa ekran
   sakramasin. Tugma matni belgilanmaydi — uzoq bosilganda
   nusxa olish menyusi chiqmasin. */
button,a,input,select,textarea,[role=button]{touch-action:manipulation}
button{user-select:none;-webkit-user-select:none}
html,body{height:100%}
body{
  font-family:Inter,system-ui,sans-serif;color:var(--ink);
  /* ⛔ Bularsiz matn ekranda O'YILGAN ko'rinadi: harflar qalin,
     qatorlar zich. Egasi buni «dag'al» deb ataydi va sabab rangda
     emas — shu ikki qatorda. */
  line-height:1.5;-webkit-font-smoothing:antialiased;
  background:var(--page);overflow:hidden;font-size:var(--t-3);
}

/* ⛔ Sarlavha ham asosiy shriftda: ikkinchi shrift oilasi olib
   tashlandi. Sabab ikkita — ko'rinish soddaroq, va sekin
   internetda yuklanadigan fayl ikki barobar kam. */
h1{font-size:var(--t-6);font-weight:600;letter-spacing:-.02em;
  line-height:var(--lh-tight);margin-bottom:18px}

/* ⛔ KATTA SON UCHUN UMUMIY QOIDA YOZILMADI — VA BU DARS.
 *
 * Avval bu yerda `.rep-big,.due-box b,.count-row .cnt,…` degan
 * qator turardi: yettita ekranning sinfini `base.css` dan
 * ushlab olgandim. Ikkita qo'riqchi darhol qizardi
 * (`test_bare_layout_class_does_not_leak`,
 * `test_no_new_cross_file_class`) va ular HAQ edi — sinf
 * o'zi ta'riflangan faylda yashaydi (DIZAYN.md 3).
 *
 * Katta sonning qator balandligi kerak bo'lsa, u O'Z faylida
 * yoziladi. Umumiy qoida qulay ko'rinardi, lekin u bitta
 * ekranni o'zgartirganda qolgan oltitasini jimgina
 * o'zgartiradigan qoida edi. */

/* ⛔ BELGI VA BOSHQARUV O'LCHAMI POG'ONADAN TASHQARIDA.
 *
 * `16px` uchta boshqa sababga ko'ra qoladi va uchalasi ham
 * ta'm emas:
 *
 *   maydon   iOS 16px dan KICHIK maydonga bosilganda sahifani
 *            o'zi kattalashtiradi va kassir «sakrab ketdi» deb
 *            o'ylardi (`login.css`, `plan.css` dagi sana)
 *   belgi    ⚙, ＋, … — bular matn emas, SHAKL
 *   raqam    sanalgan miqdor: qatordagi eng muhim son
 *
 * Shuning uchun `test_font_sizes_have_no_half_pixel_twins`
 * o'lchamni emas, YAQIN JUFTLIKNI qidiradi. */

/* ⛔ Yorliqlar BOSH HARFDA emas: «CHAKANA» emas, «Chakana».
   Bosh harf kengroq joy egallaydi va aralash yozuvda (kirill +
   lotin) o'qishni sekinlashtiradi. */
label{display:block;font-size:var(--t-2);font-weight:400;letter-spacing:0;
  color:var(--muted);margin-bottom:6px}
.field{margin-bottom:14px}
.wrap{position:relative;display:flex;align-items:center}

/* ⛔ TO'LDIRILGAN, soyasiz — BILLZ naqshi (egasi, 2026-09-19).
 *
 * 2026-09-13 da bu yerda «ramka emas, soya» deb yozilgandi va
 * maydon oq + soyali edi. Egasining BILLZ suratlarida esa maydon
 * och kulrang va soyasiz: u varaqdan KO'TARILMAYDI, ichiga
 * o'yiladi. Soya kartochkada qoladi — u haqiqatan alohida sirt. */
input,select{width:100%;height:var(--tap);padding:0 14px;
  background:var(--field);border:0;box-shadow:none;border-radius:10px;
  font-family:inherit;
  font-size:var(--t-3);font-weight:400;font-variant-numeric:tabular-nums;
  letter-spacing:0;color:var(--ink);outline:none;
  transition:background .12s,box-shadow .12s}
/* ⛔ Yozilayotgan maydon OQARADI: to'ldirilgan maydonlar orasida
   qaysi biri faol ekani faqat halqadan bilinardi. */
input:focus,select:focus{background:var(--field-on);box-shadow:var(--ring)}
input::placeholder{color:#a8aeb8;font-weight:400}
.hint{margin-top:6px;font-size:var(--t-2);color:var(--muted);min-height:16px}

/* ⛔ Asosiy tugma tekis: gradient, 3D soya va bosilganda pastga
   tushish olib tashlandi. Balandligi o'zgarmadi. */
.go{width:100%;height:var(--tap-lg);margin-top:4px;border:none;border-radius:10px;
  background:var(--mid);color:#fff;font-family:inherit;font-size:var(--t-3);
  font-weight:500;letter-spacing:0;cursor:pointer;transition:background .12s}
.go:active:not(:disabled){background:#2a61d2}
.go:disabled{cursor:not-allowed;background:#c7cdd6;color:#fff}

.msg{margin-top:12px;padding:11px 13px;border-radius:10px;font-size:var(--t-3);
  line-height:1.45;display:none}
.msg.show{display:block}
.msg.err{background:#fdecec;color:var(--danger)}
.msg.ok{background:#e7f6ef;color:var(--ok)}
/* ⛔ Yaxshi holat ham RANG bilan aytilsin: «faol» kulrang
   yozuvda turganda kassir uni o'qimay o'tib ketardi
   (`.hint.bad` allaqachon qizil). */
/* ⛔ `hidden` HAR DOIM KUCHLI. Bu tuzoqqa TO‘RT marta tushildi:
   `.nav-btn`, `.pane.secondary`, `.gap`, `.note-field` — har
   safar alohida qoida yozildi, dars umumlashtirilmadi. To‘rtinchisi
   2026-09-08 da chiqdi: `.two{display:grid}` (debt.css) tasdiq
   tugmalarini `hidden` bo‘lsa ham ko‘rsatib turdi, ya‘ni "bekor
   qilish" ikki bosishga aylanmasdi.

   Sinf selektori atribut selektoridan kuchli, shuning uchun
   `!important` — bu yerda u to‘g‘ri vosita: yashiringan element
   HECH QACHON ko‘rinmasligi kerak. Yuqoridagi alohida qoidalar
   endi ortiqcha, lekin zarar qilmaydi. */
[hidden]{display:none!important}

.hint.ok{color:var(--ok);font-weight:600}
/* Ro'yxat qatoridagi holat ham rang bilan: «bekor qilingan»
   kulrang yozuvda ko'zga tashlanmasdi. */
.found .sub.bad{color:var(--danger)}
.found .sub.ok{color:var(--ok)}

/* ⛔ `nowrap` MAJBURIY: 2026-09-08 da suratdan topildi — tor
   ekranda «450 000» ikki qatorga bo'linib, «450» va «000»
   bo'lib turardi. Summa hech qachon sinmaydi. */
.money{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}

/* ⛔ RO'YXAT SARLAVHASI — HECH QAYERDA TA'RIFLANMAGAN EDI.
 *
 * `.found-head` uchta ekranda ishlatiladi (cheklar, ombor
 * qoldig'i, xodimlar), lekin CSS da qoidasi YO'Q edi: sarlavha
 * oddiy `div` bo'lib qolgan va «Chek Vaqt Dona Summa» to'rtta
 * so'z chap chekkada yonma-yon turardi, ustunlar esa o'ngda.
 *
 * ⛔ `sales.css` boshidagi izoh «`.found-head` — `debt.css`»
 * deb turardi va bu YOLG'ON edi: u yerda bunday qoida yo'q.
 * Qachondir bo'lgan va refaktorda yo'qolgan. Izoh qolgan.
 *
 * Suratda ko'rindi (2026-09-16) — mantiq testi buni ko'rmaydi:
 * DOM da hamma katak joyida, matn ham to'g'ri.
 *
 * ⛔ `base.css` da, chunki u BITTA ekranniki emas: uchtasi ham
 * bir xil ro'yxat shaklini ishlatadi va shakl bir joyda tursin. */
.found-head{display:flex;align-items:baseline;gap:10px;
  padding:0 16px 6px;color:var(--muted);font-size:var(--t-2)}
/* ⛔ Birinchi katak QATORDAGIDEK cho'ziladi (`debt.css`:
   `.found .who{flex:1}`). Shusiz sarlavha chap chekkada
   siqilib qolib, «Vaqt» yozuvi soatdan 800 piksel narida
   turardi — ya'ni sarlavha bor-u, ustunni ko'rsatmasdi. */
.found-head .who{flex:1;min-width:0}

/* ⛔ MAYDON 1000 PIKSEL BO‘LMAYDI (2.1).
 *
 * «Tovar» ekranida qidiruv maydoni butun kenglikni egallardi:
 * ko‘z chap chekkadan o‘ng chekkagacha yurishi kerak edi va
 * terilgan matn maydonning chap burchagida yolg‘iz qolardi
 * (2026-09-12, suratda ko‘rindi).
 *
 * ⛔ KASSA ISTISNO: savat ekranidagi skaner maydoni ataylab keng —
 * u ekranning eng muhim elementi va kassir unga qaramay uradi. */
@media (min-width:820px){
  main:not(:has(.sale-wrap)) .field{max-width:560px}
  /* ⛔ TUGMA HAM MAYDONDAN KENG BO‘LMAYDI (DIZAYN.md 5.3).
   *
   * 5.3 qoidasi 2026-09-14 da yozilgan, lekin `.go` uchun CSS ga
   * hech qachon tushmagan: har ekran o‘z ustunini o‘zi
   * toraytirardi va OLTITA sahifa unutildi — «Yangi buyurtma»
   * (qoidaning o‘z misoli!) 1920 px monitorda 1400 piksellik
   * tasma bo‘lib turardi (2026-09-20, o‘lchandi). Endi qoida
   * maydon qoidasining YONIDA: ikkalasi bitta son, bitta shart.
   *
   * ⛔ 720 lik ustunlar (chek kartochkasi, oylik) o‘z enini
   * saqlaydi — istisno o‘sha sinf egasining faylida. */
  main:not(:has(.sale-wrap)) .go{max-width:560px}
}

/* ── Hisob qatorlari ─────────────────────────── */

/* ⛔ OLTI ekran ishlatadi: savdo, to‘lov, qaytarish, smena,
   chek kartochkasi va qaytarishlar ro‘yxati. Ilgari ular
   `sale.css` da edi, ya'ni bitta ekran fayli qolganlarini
   «boqib» turardi. */
.sums{margin-top:12px}
.trow{display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:6px 10px;font-size:var(--t-3);color:var(--muted)}
.trow .money{color:var(--ink);font-weight:600}
.trow.big{font-size:var(--t-5);color:var(--ink);font-weight:600;
  border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.trow.big .money{font-size:20px}

/* ── «To‘lanadi» qutisi ────────────────────────── */

/* ⛔ SHU YERDA, chunki IKKI ekran ishlatadi: savdo to‘lovi
   (`sale_pay.js`) va qaytarishda «mijozga qaytadi»
   (`return_who.js`). Bittasining faylida tursa, nomi yolg‘on
   bo‘lardi va yalang‘och sinf global qoida berardi
   (DIZAYN.md 3). */
.due-box{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:14px;margin-bottom:14px;
  background:#fff;box-shadow:var(--card-sh);
  color:var(--muted);font-size:var(--t-3)}
.due-box b{font-size:24px;color:var(--mid)}