/* ===========================================================================
   Pul daftari — Apple (iOS / macOS) uslubidagi dizayn tizimi.

   Bu fayl **qo'lda** yozilgan, Tailwind yo'q. Sababi: Apple uslubi
   aniqlikdan chiqadi — 0.5px ajratgich, 44px tegish maydoni, 34px katta
   sarlavha, sheet egri chizig'i. Bularning har biri shu faylda bir marta
   aytilgan, shablonda esa takrorlanmaydi.

   Tartib: o'zgaruvchilar → asos → joylashuv → qismlar → ekranlar →
   moslashuv → pechat.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. O'zgaruvchilar
   --------------------------------------------------------------------------- */

:root {
  /* Ranglar — iOS tizim palitrasi. O'z rangimizni o'ylab topmaymiz:
     odam iOS ni allaqachon biladi, va tanish rang tanish ma'no beradi. */
  --fon: #f2f2f7;
  --fon-2: #ffffff;
  --karta: #ffffff;
  --karta-2: #f2f2f7;

  --matn: #000000;
  --matn-2: rgba(60, 60, 67, 0.60);
  --matn-3: rgba(60, 60, 67, 0.32);

  --kok: #007aff;
  --kok-och: rgba(0, 122, 255, 0.12);
  --yashil: #34c759;
  --qizil: #ff3b30;
  --sariq: #ff9500;
  --binafsha: #af52de;
  --havorang: #5ac8fa;
  --kul: #8e8e93;

  --ajratgich: rgba(60, 60, 67, 0.20);
  --ajratgich-kuchli: rgba(60, 60, 67, 0.36);

  /* Shisha panellar (pastdagi panel, sheet sarlavhasi) */
  --shisha: rgba(249, 249, 249, 0.82);

  /* Maydon foni */
  --maydon: rgba(118, 118, 128, 0.12);

  /* O'lchov */
  --radius-karta: 12px;
  --radius-qator: 10px;
  --radius-sheet: 22px;
  --radius-pill: 980px;
  --tegish: 44px;               /* iOS: barmoq uchun eng kichik maydon */
  --yon-chekka: 16px;
  --kontent: 980px;
  --yon-panel: 240px;

  /* Harakat. Bu egri chiziq iOS sheet'i uchun xos: tez boshlanadi va
     oxirida sekinlashadi — «qo'yib yuborilgan» hissi shundan. */
  --otish: cubic-bezier(0.32, 0.72, 0, 1);
  --tez: 0.18s;
  --sheet: 0.35s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) {
    --fon: #000000;
    --fon-2: #1c1c1e;
    --karta: #1c1c1e;
    --karta-2: #2c2c2e;

    --matn: #ffffff;
    --matn-2: rgba(235, 235, 245, 0.60);
    --matn-3: rgba(235, 235, 245, 0.30);

    --kok: #0a84ff;
    --kok-och: rgba(10, 132, 255, 0.18);
    --yashil: #30d158;
    --qizil: #ff453a;
    --sariq: #ff9f0a;
    --binafsha: #bf5af2;
    --havorang: #64d2ff;
    --kul: #98989d;

    --ajratgich: rgba(84, 84, 88, 0.60);
    --ajratgich-kuchli: rgba(120, 120, 128, 0.70);
    --shisha: rgba(28, 28, 30, 0.82);
    --maydon: rgba(118, 118, 128, 0.24);
  }
}

/* Qo'lda tanlangan qorong'i mavzu. `prefers-color-scheme` bloki
   `:not([data-mavzu="yorug"])` bilan cheklangan, bu esa aniq satr —
   ikkisi birga ishlaydi va foydalanuvchi tanlovi **har ikki tomonga**
   ustun turadi. */
:root[data-mavzu="qorongu"] {
  --fon: #000000;
  --fon-2: #1c1c1e;
  --karta: #1c1c1e;
  --karta-2: #2c2c2e;
  --matn: #ffffff;
  --matn-2: rgba(235, 235, 245, 0.60);
  --matn-3: rgba(235, 235, 245, 0.30);
  --kok: #0a84ff;
  --kok-och: rgba(10, 132, 255, 0.18);
  --yashil: #30d158;
  --qizil: #ff453a;
  --sariq: #ff9f0a;
  --binafsha: #bf5af2;
  --havorang: #64d2ff;
  --kul: #98989d;
  --ajratgich: rgba(84, 84, 88, 0.60);
  --ajratgich-kuchli: rgba(120, 120, 128, 0.70);
  --shisha: rgba(28, 28, 30, 0.82);
  --maydon: rgba(118, 118, 128, 0.24);
}

/* Zichlik — sozlamalardan. Kichik ekranda ko'proq qator sig'sin. */
:root[data-zichlik="zich"] {
  --tegish: 38px;
}

/* ---------------------------------------------------------------------------
   2. Asos
   --------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Fon **har doim** aniq ko'rsatiladi: ba'zi brauzer o'z rangini
     chizadi va shaffof sahifa kutilmagan rangda ko'rinardi. */
  background: var(--fon);
  color: var(--matn);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 17px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sheet ochilganda orqadagi sahifa surilmasin. */
  overscroll-behavior-y: none;
}

body.sheet-ochiq { overflow: hidden; }

h1, h2, h3, p, figure { margin: 0; }

a { color: var(--kok); text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* Fokus halqasi — faqat klaviatura uchun (`:focus-visible`). Sichqoncha
   bilan bosganda halqa chiqsa, interfeys «siniq» ko'rinadi. */
:focus-visible {
  outline: 3px solid var(--kok);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Ekran o'quvchi uchun yashirin, klaviatura bilan ko'rinadigan havola. */
.otkaz-kirish {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--kok);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-qator) 0;
}
.otkaz-kirish:focus { left: 0; }

/* Pul raqamlari — **tabular-nums**. Usiz ustundagi raqamlar bir tekis
   turmaydi: `1` ingichka, `8` keng, va ko'z bilan solishtirib
   bo'lmaydi. Bu moliyaviy interfeys uchun eng muhim shrift sozlamasi. */
.pul,
.summa-kiritish,
.summa-son,
.qoldiq-son {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.2px;
}

.ikon { display: block; flex: none; }

/* ---------------------------------------------------------------------------
   3. Joylashuv
   --------------------------------------------------------------------------- */

.yon-panel { display: none; }

.sahifa {
  min-height: 100vh;
  padding: 0 0 calc(76px + env(safe-area-inset-bottom));
}

.sahifa-tor {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--yon-chekka);
}

.mazmun {
  max-width: var(--kontent);
  padding: 0 var(--yon-chekka) 32px;
}

.sarlavha-panel {
  padding-top: calc(12px + env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fon);
}

.sarlavha-ichi {
  max-width: var(--kontent);
  padding: 8px var(--yon-chekka) 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

/* Katta sarlavha — iOS ning o'ziga xos belgisi: 34px, qalin, harf orasi
   sal tor. Tor harf orasi shu o'lchamda so'zlarni bir butun qilib
   ko'rsatadi. */
.katta-sarlavha {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.sarlavha-osti {
  font-size: 15px;
  color: var(--matn-2);
  margin-top: 2px;
}

.sarlavha-amallar { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------------------
   4. Chap panel (kompyuter)
   --------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .yon-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--yon-panel);
    padding: 18px 12px 18px;
    background: var(--shisha);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 0.5px solid var(--ajratgich);
    z-index: 30;
  }

  .yon-logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    padding: 8px 12px 18px;
  }

  .yon-qator {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tegish);
    padding: 0 12px;
    border-radius: var(--radius-qator);
    color: var(--matn);
    font-weight: 500;
  }
  .yon-qator .ikon { color: var(--matn-2); }
  .yon-qator:hover { background: var(--maydon); }
  .yon-qator.tanlangan { background: var(--kok); color: #fff; }
  .yon-qator.tanlangan .ikon { color: #fff; }

  .yon-past {
    margin-top: auto;
    padding: 12px 4px 0;
    border-top: 0.5px solid var(--ajratgich);
  }

  .yon-kim {
    padding: 8px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
  }
  .yon-kim span {
    font-weight: 400;
    font-size: 13px;
    color: var(--matn-2);
  }

  /* Panel bor ekan — kontent uning yonidan boshlanadi. */
  .sahifa { margin-left: var(--yon-panel); padding-bottom: 40px; }
  .past-panel { display: none; }
}

/* ---------------------------------------------------------------------------
   5. Pastdagi panel (telefon)
   --------------------------------------------------------------------------- */

.past-panel {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: var(--shisha);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--ajratgich);
  z-index: 30;
}

.past-qator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tegish);
  font-size: 10px;
  letter-spacing: 0.1px;
  color: var(--matn-2);
}
.past-qator.tanlangan { color: var(--kok); }

/* «Kirim» / «Chiqim» — kuniga o'nlab marta bosiladi, shuning uchun
   panelning o'rtasida va barmoq uchun eng qulay joyda.

   Ikki rang ataylab: yashil = pul kirdi, qizil = pul chiqdi. Bu
   odat allaqachon odamning boshida bor (bank ilovalari, buxgalteriya
   daftarlari), ya'ni uni o'rgatish shart emas. */
.past-qoshishlar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.past-amal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: transform 0.1s var(--otish), filter var(--tez) linear;
}
.past-amal:active { transform: scale(0.94); }
.past-amal-kirim { background: var(--yashil); }
.past-amal-chiqim { background: var(--qizil); }

/* ---------------------------------------------------------------------------
   6. Sheet — pastdan chiqadigan oyna
   --------------------------------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet[hidden] { display: none; }

.sheet-parda {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  transition: opacity var(--sheet) var(--otish);
}

.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--fon-2);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 6px var(--yon-chekka) calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--sheet) var(--otish);
  overscroll-behavior: contain;
}

/* Ochiq holat. JS `hidden` ni olib tashlaydi va keyingi kadrda shu
   sinfni qo'shadi — aks holda `display:none` dan chiqqan element
   o'tishni (transition) boshlamaydi va oyna sakrab paydo bo'lardi. */
.sheet.ochiq .sheet-parda { opacity: 1; }
.sheet.ochiq .sheet-panel { transform: translateY(0); }

.sheet-ushlagich {
  display: block;
  width: 100%;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
}
.sheet-ushlagich span {
  display: block;
  width: 36px;
  height: 5px;
  margin: 6px auto;
  border-radius: 3px;
  background: var(--matn-3);
}

/* Sheet sarlavhasi: chapda «Bekor», o'rtada nom, o'ngda amal. */
.sheet-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 10px;
  min-height: var(--tegish);
}
.sheet-sarlavha {
  font-size: 17px;
  font-weight: 600;
}

@media (min-width: 640px) {
  .sheet { align-items: center; }
  .sheet-panel {
    border-radius: var(--radius-sheet);
    max-height: 88vh;
  }
}

/* ---------------------------------------------------------------------------
   7. Karta, ro'yxat, qator
   --------------------------------------------------------------------------- */

.karta {
  background: var(--karta);
  border-radius: var(--radius-karta);
  padding: 14px var(--yon-chekka);
  margin-bottom: 14px;
}

.karta-sarlavha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--matn-2);
  margin-bottom: 8px;
}
.karta-qiymat {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.karta-havola { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }

.royxat {
  background: var(--karta);
  border-radius: var(--radius-karta);
  overflow: hidden;
}

/* Qator ajratgichi — 0.5px va chapdan 16px ichkaridan. iOS'da chiziq
   qatorning eng chetidan boshlanmaydi, matn bilan bir chiziqda turadi.
   Shu sababli u `::before` bilan, qator ichida chiziladi. */
.qator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tegish);
  padding: 9px var(--yon-chekka);
  color: var(--matn);
  transition: background var(--tez) linear;
}
.qator + .qator::before,
.tafsil-qator + .tafsil-qator::before {
  content: "";
  position: absolute;
  left: var(--yon-chekka);
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--ajratgich);
}
.qator:active { background: var(--maydon); }
.qator:last-child { border-bottom-left-radius: var(--radius-qatar, 0); }

.qator-belgi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--kok-och);
  color: var(--kok);
  flex: none;
}

/* Guruh bo'yicha rang — 22 ta turga 22 xil rang bermaymiz. Odam bitta
   savolga javob izlaydi: «bu pul qayerdan keldi / qayerga ketdi?» */
.belgi-savdo      { background: rgba(52, 199, 89, 0.14);  color: var(--yashil); }
.belgi-xarid      { background: rgba(255, 149, 0, 0.14);  color: var(--sariq); }
.belgi-odam       { background: rgba(175, 82, 222, 0.14); color: var(--binafsha); }
.belgi-boshliq    { background: rgba(90, 200, 250, 0.16); color: var(--havorang); }
.belgi-kassa      { background: rgba(142, 142, 147, 0.16); color: var(--kul); }
.belgi-boshqa     { background: rgba(142, 142, 147, 0.16); color: var(--kul); }
.belgi-topshiriq  { background: rgba(90, 200, 250, 0.16); color: var(--havorang); }
.belgi-qarz       { background: rgba(175, 82, 222, 0.14); color: var(--binafsha); }
.belgi-qarz-qaytdi,
.belgi-qarz-berildi,
.belgi-qarz-qaytardi { background: rgba(175, 82, 222, 0.14); color: var(--binafsha); }
.belgi-avans      { background: rgba(175, 82, 222, 0.14); color: var(--binafsha); }
.belgi-avans-qaytdi { background: rgba(52, 199, 89, 0.14); color: var(--yashil); }
.belgi-ish-haqi   { background: rgba(175, 82, 222, 0.14); color: var(--binafsha); }
.belgi-zapchast,
.belgi-xom-ashyo  { background: rgba(255, 149, 0, 0.14);  color: var(--sariq); }
.belgi-yonilgi    { background: rgba(255, 149, 0, 0.14);  color: var(--sariq); }
.belgi-xizmat     { background: rgba(255, 149, 0, 0.14);  color: var(--sariq); }
.belgi-soliq      { background: rgba(255, 149, 0, 0.14);  color: var(--sariq); }
.belgi-boshliqqa  { background: rgba(90, 200, 250, 0.16); color: var(--havorang); }
.belgi-kamomad,
.belgi-ortiqcha   { background: rgba(142, 142, 147, 0.16); color: var(--kul); }
.belgi-kochish    { background: rgba(142, 142, 147, 0.16); color: var(--kul); }
.belgi-bekor      { background: rgba(142, 142, 147, 0.16); color: var(--kul); }

.qator-matn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.qator-nom {
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qator-izoh {
  font-size: 13px;
  line-height: 18px;
  color: var(--matn-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qator-summa {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kirim { color: var(--yashil); }
.chiqim { color: var(--qizil); }

/* Bekor qilingan yozuv. Rang o'chiriladi va ustidan chiziq tortiladi —
   diqqatni tortmaydi, lekin o'chib ham ketmaydi: u tarix. */
.qator-bekor .qator-nom,
.qator-bekor .qator-izoh { text-decoration: line-through; }
.qator-bekor .qator-summa { color: var(--matn-2); text-decoration: line-through; }
.qator-bekor .qator-belgi { opacity: 0.45; }
.qator-bekor-belgi {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--matn-2);
  background: var(--maydon);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   8. Kun guruhi
   --------------------------------------------------------------------------- */

.kun { margin-bottom: 18px; }

/* Yopishqoq sarlavha. Shishasimon fon — ostidagi qatorlar ko'rinib
   turadi va ro'yxat «uzilib qolgan» hissi bermaydi. */
.kun-sarlavha {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--matn-2);
  background: var(--shisha);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-radius: var(--radius-qator);
}
.kun-nomi { letter-spacing: 0.3px; }
.kun-yigindi {
  display: flex;
  gap: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   9. Kassa qoldig'i
   --------------------------------------------------------------------------- */

.qoldiq-karta { padding-bottom: 16px; }

.qoldiq-kassa {
  font-size: 13px;
  color: var(--matn-2);
  margin: 4px 0 2px;
}

.qoldiq-qatorlar { display: flex; flex-wrap: wrap; gap: 4px 26px; }

.qoldiq-qator {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

/* Kassa qoldig'i — ekrandagi eng katta raqam. U «hozir qancha pul bor»
   degan yagona savolga javob beradi, shuning uchun u katta. */
.qoldiq-qator .pul {
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.qoldiq-qator .pul.pul-dollar { font-size: 26px; letter-spacing: -0.5px; }

.qoldiq-nom {
  font-size: 15px;
  color: var(--matn-2);
}

/* Manfiy qoldiq — qizil **va** izoh bilan. Faqat rang bilan
   ogohlantirish rangni ko'rmaydigan odamga yetib bormaydi. */
.qoldiq-manfiy .pul { color: var(--qizil); }
.qoldiq-manfiy .qoldiq-nom::after {
  content: " · kassada yo'q";
  color: var(--qizil);
}

/* ---------------------------------------------------------------------------
   9b. Ikki amal tugmasi — kirim va chiqim
   --------------------------------------------------------------------------- */

/* Telefonda bu qator ko'rinmaydi: u yerda xuddi shu ikki tugma pastdagi
   panelda turadi. Aks holda bitta ekranda ikkita bir xil tugma
   bo'lardi va odam qaysi biri «haqiqiy» ekanini o'ylab qolardi. */
.amal-qator { display: none; }

.amal-tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-qator);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.1s var(--otish), filter var(--tez) linear;
}
.amal-tugma:active { transform: scale(0.98); }
.amal-tugma:hover { filter: brightness(1.06); }
.amal-kirim { background: var(--yashil); }
.amal-chiqim { background: var(--qizil); }

/* Bekor qilinganlar havolasi. Lenta juftlikni **ko'rsatmaydi**, ya'ni
   bu havola bo'lmasa «o'sha pul qayerga ketdi?» degan savolning javobi
   yo'q bo'lardi. Shu sababli u telefonda ham ko'rinadi. */
.bekor-havola {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tegish);
  margin: -4px 0 16px;
  padding: 0 4px;
  color: var(--matn-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.bekor-havola .ikon:first-child { color: var(--matn-3); }
.bekor-havola .ikon:last-child { margin-left: auto; color: var(--matn-3); }
.bekor-havola:hover { color: var(--kok); }

/* ---------------------------------------------------------------------------
   9c. Bekor qilinganlar bo'limi
   --------------------------------------------------------------------------- */

/* Bitta juftlik — bitta voqea. Kartaning o'zi `.karta`, lekin ichidagi
   yozuv qatori uning chekkasidan chiqib ketadi (quyida): aks holda
   qator matni 16px ichkarida boshlanib, kartadagi sarlavha bilan bir
   chiziqqa tushmasdi. */
.bekor-juftlik { padding-bottom: 6px; }

.bekor-juftlik .qator {
  margin: 0 calc(-1 * var(--yon-chekka));
  padding-block: 10px;
}

/* `xabar` odatda ro'yxat orasida turadi va o'z chekkasiga ega; karta
   ichida u faqat sarlavhadan keyin kerak. */
.bekor-juftlik .xabar { margin: 10px 0 0; }

.bekor-bosh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--matn-2);
}
.bekor-sanasi { font-weight: 600; }
.bekor-kim { font-variant-numeric: tabular-nums; color: var(--matn-3); }

/* Sabab — bu sahifadagi eng muhim matn: «nega?» degan savolning
   javobi. Shu sababli u kulrang izohdan kattaroq va quyuqroq. */
.bekor-sabab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.bekor-sabab-kalit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--matn-3);
}
.bekor-sabab-matn { font-size: 15px; line-height: 21px; color: var(--matn); }
.bekor-sabsiz { color: var(--matn-3); font-style: italic; }

/* Teskari yozuvga havola — «pul qaytarildi» ning tasdig'i. */
.bekor-teskari {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 4px;
  color: var(--matn-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.bekor-teskari .ikon { color: var(--matn-3); }
.bekor-teskari .ikon:last-child { margin-left: auto; }
.bekor-teskari:hover { color: var(--kok); }

/* ---------------------------------------------------------------------------
   9d. Odam kartasi
   --------------------------------------------------------------------------- */

/* Kirim / chiqim / qoldiq — uch ustun. Ustunlar soni qat'iy: odam
   ularni yonma-yon solishtiradi, ya'ni raqamlar bir chiziqda turishi
   kerak. */
.odam-hisob { padding: 4px 0; }

.odam-hisob-blok { padding: 12px var(--yon-chekka); }
.odam-hisob-blok + .odam-hisob-blok {
  border-top: 0.5px solid var(--ajratgich);
}

.odam-hisob-valyuta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--matn-2);
}

.odam-hisob-uchlik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.odam-hisob-katak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.odam-hisob-kalit {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--matn-3);
}
.odam-hisob-katak .pul { font-size: 15px; font-weight: 600; }

/* Ishoraning ma'nosi. Rang va «−» yetarli emas: «manfiy qoldiq» nima
   ekanini faqat kassir biladi, rahbar esa har safar o'ylab qolardi. */
.odam-hisob-izoh {
  margin-top: 6px;
  font-size: 13px;
  color: var(--matn-3);
}

/* Oyna ichidagi kun sarlavhasi — `.karta-sarlavha` ning kichikroq
   varianti: oynada har bir kun uchun katta chegara ortiqcha. */
.kun-ichi { margin: 16px 0 6px; }
.kun-ichi:first-of-type { margin-top: 6px; }

@media (min-width: 900px) {
  .amal-qator {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 12px;
  }
}

/* ---------------------------------------------------------------------------
   10. Pul ko'rinishi
   --------------------------------------------------------------------------- */

.pul { white-space: nowrap; }
.pul-katta { font-size: 22px; font-weight: 700; }
.pul-dollar .pul-belgi {
  font-size: 0.82em;
  font-weight: 600;
  margin-right: 1px;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   11. Filtr, segment, qidiruv
   --------------------------------------------------------------------------- */

.filtr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Segmentli boshqaruv — iOS ning markaziy elementi. Fon bir butun,
   tanlangan bo'lak oq «suzib turadi». */
.segment {
  display: inline-flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--maydon);
}
.segment-tanlov {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.segment-yorliq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--matn);
  cursor: pointer;
  transition: background var(--tez) var(--otish), box-shadow var(--tez) linear;
  user-select: none;
}
.segment-tanlov:checked + .segment-yorliq {
  background: var(--karta);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.segment-tanlov:focus-visible + .segment-yorliq {
  outline: 3px solid var(--kok);
  outline-offset: 1px;
}
.segment-valyuta .segment-yorliq { padding: 0 12px; }

.qidiruv {
  flex: 1;
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  min-height: 36px;
  border-radius: 9px;
  background: var(--maydon);
  color: var(--matn-2);
}
.qidiruv input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 16px;
}
.qidiruv input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------------------------------------------------------------------------
   12. Tugmalar
   --------------------------------------------------------------------------- */

.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tegish);
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--maydon);
  color: var(--matn);
  font-size: 17px;
  font-weight: 600;
  transition: transform 0.1s var(--otish), opacity var(--tez) linear,
              background var(--tez) linear;
}
.tugma:active { transform: scale(0.97); }
.tugma:disabled { opacity: 0.45; }

.tugma-keng { width: 100%; }
.tugma-kok { background: var(--kok); color: #fff; }
.tugma-qizil { background: var(--qizil); color: #fff; }
.tugma-sariq { background: var(--sariq); color: #fff; }
.tugma-kulrang { background: var(--maydon); color: var(--matn); }
.tugma-matn {
  background: none;
  color: var(--kok);
  padding: 0 8px;
  font-weight: 500;
}
.tugma-matn:active { opacity: 0.5; }

/* Tor ekranda tugmalar tekst kabi ko'rinmasin. */
@media (max-width: 380px) {
  .segment-yorliq { padding: 0 10px; font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   13. Xabarlar va ogohlantirishlar
   --------------------------------------------------------------------------- */

.xabarlar {
  position: fixed;
  left: var(--yon-chekka);
  right: var(--yon-chekka);
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  pointer-events: none;
}
.xabarlar .xabar { pointer-events: auto; }

@media (min-width: 900px) {
  .xabarlar { bottom: 22px; left: auto; right: 22px; margin: 0; }
}

.xabar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-karta);
  background: var(--karta);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  animation: xabar-kir 0.24s var(--otish);
}
@keyframes xabar-kir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.xabar-belgi { color: var(--kok); margin-top: 1px; }
.xabar-matn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 20px;
}
.xabar-matn strong { font-weight: 600; }
.xabar-matn span { color: var(--matn-2); font-size: 13px; line-height: 18px; }

.xabar-yopish {
  border: 0;
  background: none;
  color: var(--matn-3);
  padding: 2px;
  border-radius: 6px;
}

.xabar-ok .xabar-belgi { color: var(--yashil); }
.xabar-qizil .xabar-belgi { color: var(--qizil); }
.xabar-sariq .xabar-belgi { color: var(--sariq); }
.xabar-kul .xabar-belgi { color: var(--kul); }

/* Xato va savol — yon tomonidagi rangli chiziq bilan ham belgilanadi,
   ya'ni rang ko'rmaydigan odam ham ajratadi. */
.xabar-qizil { box-shadow: inset 3px 0 0 var(--qizil), 0 6px 22px rgba(0, 0, 0, 0.14); }
.xabar-sariq { box-shadow: inset 3px 0 0 var(--sariq), 0 6px 22px rgba(0, 0, 0, 0.14); }

/* Sheet ichidagi xabarlar — joyida, suzmaydi. */
.sheet-ichi .xabar { box-shadow: inset 3px 0 0 var(--kok); margin-bottom: 10px; }
.sheet-ichi .xabar-qizil { box-shadow: inset 3px 0 0 var(--qizil); }
.sheet-ichi .xabar-sariq { box-shadow: inset 3px 0 0 var(--sariq); }

/* ---------------------------------------------------------------------------
   14. Bo'sh holat
   --------------------------------------------------------------------------- */

.bosh-joy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  text-align: center;
  color: var(--matn-2);
}
.bosh-joy .ikon { color: var(--matn-3); margin-bottom: 4px; }
.bosh-sarlavha { font-size: 17px; font-weight: 600; color: var(--matn); }
.bosh-matn { font-size: 15px; line-height: 20px; max-width: 340px; }

/* ---------------------------------------------------------------------------
   15. Yozish formasi
   --------------------------------------------------------------------------- */

.yozish-forma { display: flex; flex-direction: column; gap: 16px; }

/* Summa — ekrandagi eng katta element. Klaviatura darhol shunga
   qaratiladi: yozuv qo'shishda birinchi va deyarli yagona majburiy
   narsa — raqam. */
.summa-qator {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
}

.summa-kiritish {
  width: 100%;
  max-width: 340px;
  border: 0;
  background: none;
  outline: none;
  text-align: right;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -1px;
}
.summa-kiritish::placeholder { color: var(--matn-3); }

.summa-valyuta {
  font-size: 20px;
  font-weight: 500;
  color: var(--matn-2);
}

.summa-izoh {
  text-align: center;
  font-size: 12px;
  color: var(--matn-3);
  margin-top: -12px;
}

.forma-bolim { display: flex; flex-direction: column; gap: 8px; }

.forma-sarlavha {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--matn-2);
}
.forma-ixtiyoriy {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--matn-3);
}

/* «majburiy» — sariq, chunki bu ogohlantirish emas, lekin yo'q
   bo'lsa yozuv saqlanmaydi. Qizil qilsak «xato» degan taassurot
   berardi, holbuki hali xato yo'q. */
.forma-majburiy {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 149, 0, 0.16);
  color: var(--sariq);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: lowercase;
}

.forma-qator { display: flex; flex-direction: column; gap: 6px; }

.forma-qator-yon {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tegish);
}
.forma-qator-yon .forma-sarlavha { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 500; }

/* Chiplar — gorizontal suriladi. Turlar ko'p, lekin ular bir qatorga
   sig'maydi; ustiga qator qo'shish esa formani cho'zib yuborardi. */
.chiplar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip-tanlov {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--maydon);
  color: var(--matn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--tez) linear, color var(--tez) linear,
              transform 0.1s var(--otish);
  user-select: none;
}
.chip .ikon { color: var(--matn-2); }
.chip:active { transform: scale(0.96); }

.chip-tanlov:checked + .chip {
  background: var(--kok);
  color: #fff;
}
.chip-tanlov:checked + .chip .ikon { color: #fff; }
.chip-tanlov:focus-visible + .chip {
  outline: 3px solid var(--kok);
  outline-offset: 2px;
}

.chip-tanlanuvchi { }
.chip-tanlangan { background: var(--kok); color: #fff; }

/* «＋ Yangi ism» — chiplar qatorining oxirida, lekin oddiy odam
   chipidan farq qiladi: u tanlanmaydi, u **yangi yo'l ochadi**.
   Shuning uchun chizilgan hoshiya va ko'k matn. */
.chip-qoshish {
  background: none;
  border: 1px dashed var(--ajratgich-kuchli);
  color: var(--kok);
}
.chip-qoshish .ikon { color: var(--kok); }

/* Ochiladigan «Boshqa turlar» tugmasi — qator ko'rinishida. */
.qator-tugma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: var(--tegish);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--kok);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}
.qator-tugma-tanlov { color: var(--matn); font-weight: 400; }

.turlar { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 2px; }
.tur-guruh { display: flex; flex-direction: column; gap: 7px; }
.tur-guruh-nomi {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--matn-3);
}

/* Guruh izohi — chiplarni **o'qimasdan** turkumni tanib olish uchun.
   «Kassa tuzatishi» ostidagi «Sanovdagi farq yoki kassalar orasidagi
   ko'chirish» ni odam ikkinchi kunda o'qimaydi, lekin birinchi kunda
   noto'g'ri turni tanlashdan saqlaydi. */
.tur-guruh-izoh {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--matn-3);
  opacity: 0.85;
}

/* Maydonlar */
.forma-maydon,
.forma-son,
.forma-sana,
.tanlov {
  width: 100%;
  min-height: var(--tegish);
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-qator);
  background: var(--maydon);
  font-size: 16px;
  outline: none;
}
.forma-maydon { resize: vertical; min-height: 60px; line-height: 21px; }
.forma-son { text-align: right; font-variant-numeric: tabular-nums; }
.forma-sana { width: auto; min-width: 150px; text-align: right; }
.tanlov { appearance: none; }

.forma-izoh {
  font-size: 13px;
  line-height: 18px;
  color: var(--matn-2);
}
.forma-izoh-mayda { font-size: 12px; line-height: 17px; color: var(--matn-3); }
.forma-yorliq {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--matn-2);
}

/* ---------------------------------------------------------------------------
   16. Yozuv tafsiloti
   --------------------------------------------------------------------------- */

.tafsil-bosh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 18px;
  text-align: center;
}

.tafsil-belgi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--kok-och);
  color: var(--kok);
}

.tafsil-nom { font-size: 17px; font-weight: 600; margin-top: 6px; }

.tafsil-summa {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}
.tafsil-summa.bekor { color: var(--matn-2); text-decoration: line-through; }

.tafsil-valyuta { font-size: 15px; color: var(--matn-2); }

.tafsil-royxat { margin: 14px 0; }

.tafsil-qator {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px var(--yon-chekka);
  min-height: var(--tegish);
}
.tafsil-kalit { font-size: 16px; color: var(--matn-2); flex: none; }
.tafsil-qiymat {
  flex: 1;
  text-align: right;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.tafsil-izoh {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: var(--matn-3);
}

/* Tafsilotdagi havola qatori («Kim» → odam kartasi). Ko'rinishi oddiy
   qatordan farq qilmaydi — faqat o'ng chetida strelka turadi va
   bosilganda fon o'zgaradi. Uni havola qilib ajratib ko'rsatish
   ro'yxatni «tugmalar to'plami»ga aylantirardi. */
.tafsil-havola { color: var(--matn); text-decoration: none; }
.tafsil-havola:active { background: var(--maydon); }
.tafsil-havola .ikon { color: var(--matn-3); flex: none; align-self: center; }
.tafsil-havola:hover .tafsil-qiymat { color: var(--kok); }

/* «Ma'lumotni tuzatish» — bekor qilish tugmasidan tepada, lekin
   ochiladigan qism emas (u kundalik amal). */
.tuzat-och { margin: 14px 0 0; }

/* Bekor qilish — ataylab **ochiladigan** qism ichida. Bu qaytarib
   bo'lmaydigan amal, shuning uchun u tasodifan bosilmasligi kerak. */
.bekor-och { margin: 14px 0; }
.bekor-och > summary {
  list-style: none;
  cursor: pointer;
}
.bekor-och > summary::-webkit-details-marker { display: none; }
.bekor-forma {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 2px 0;
}

/* ---------------------------------------------------------------------------
   17. Kirish sahifasi
   --------------------------------------------------------------------------- */

.kirish-qobi {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kirish-bosh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 6px;
}

.kirish-belgi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--kok);
  color: #fff;
  margin-bottom: 6px;
}

.kirish-nom { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.kirish-izoh { font-size: 15px; color: var(--matn-2); }

.kirish-forma { display: flex; flex-direction: column; gap: 2px; }

.kirish-qator {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
}
.kirish-qator + .kirish-qator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--ajratgich);
}

.kirish-yorliq { font-size: 13px; color: var(--matn-2); }

.kirish-maydon {
  border: 0;
  background: none;
  outline: none;
  font-size: 17px;
  padding: 2px 0;
}

.kirish-tugma { margin-top: 16px; }

.kirish-oyoq {
  text-align: center;
  font-size: 13px;
  color: var(--matn-3);
}

/* ---------------------------------------------------------------------------
   18. Sozlamalar va xato
   --------------------------------------------------------------------------- */

.sahifa-ichi { display: flex; flex-direction: column; }

.tekshir-joy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
  color: var(--matn-2);
  font-size: 15px;
}
.tekshir-joy .ikon { color: var(--yashil); }

.xato-qobi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}
.xato-belgi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 17px;
  background: rgba(255, 149, 0, 0.14);
  color: var(--sariq);
}
.xato-sarlavha { font-size: 22px; font-weight: 700; margin-top: 6px; }
.xato-matn { font-size: 15px; line-height: 21px; color: var(--matn-2); max-width: 400px; }
.xato-qobi .tugma { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   19. Harakatni kamaytirish
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   20. Pechat — hisobot qog'ozga chiqadi
   --------------------------------------------------------------------------- */

@media print {
  :root {
    --fon: #fff;
    --karta: #fff;
    --matn: #000;
    --matn-2: #444;
    --ajratgich: #ccc;
  }
  body { font-size: 12pt; background: #fff; }
  .yon-panel,
  .past-panel,
  .xabarlar,
  .sheet,
  .filtr,
  .qator-tugma,
  .tugma { display: none !important; }
  .sahifa { margin: 0; padding: 0; }
  .mazmun { max-width: none; padding: 0; }
  .karta,
  .royxat { border: 0.5pt solid #ccc; }
  .qator { break-inside: avoid; }
  .kun { break-inside: avoid-page; }
  .kun-sarlavha {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0.5pt solid #ccc;
  }
  a { color: #000; text-decoration: none; }
}