/* Qarz daftari — ko'rinish. Dizayn: ChatGPT (19.10.2026, erkin topshiriq, "A: Zamonaviy daftar"; asl nusxa docs/dizayn/).
   Bu faylda ChatGPT dizayni o'zgartirilmaydi — faqat oxiridagi "Texnik tuzatishlar" bo'limi bizniki (aka, 19.10). */

/* Shaxsiy qarz daftari
   Tashqi kutubxona, shrift va rasm ishlatilmaydi. */

:root {
  font-size: 17px;
  color-scheme: light;
  --bg: #F7F7F3;
  --surface: #FFFFFF;
  --surface-soft: #F0F3EF;
  --ink: #202A27;
  --muted: #606D68;
  --line: #D8E0DA;
  --brand: #175B46;
  --brand-ink: #FFFFFF;
  --brand-soft: #E4F3EA;
  --good: #146447;
  --bad: #A43C36;
  --bad-soft: #FCEDEA;
  --warning: #92550D;
  --warning-soft: #FFF0D7;
  --focus: #167BBA;
  --overlay: rgba(8,22,17,.60);
  --shadow: 0 .3rem 1.4rem rgba(22,46,34,.07);
  --r: 1.1rem;
  --r-sm: .75rem;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101916;
  --surface: #1C2923;
  --surface-soft: #27372E;
  --ink: #F2F6F2;
  --muted: #B6C6BB;
  --line: #405349;
  --brand: #90DCB2;
  --brand-ink: #10261A;
  --brand-soft: #294B39;
  --good: #A6EAC5;
  --bad: #FFAAA2;
  --bad-soft: #51312F;
  --warning: #FFD291;
  --warning-soft: #503D25;
  --focus: #85D4FF;
  --overlay: rgba(0,0,0,.78);
  --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101916;
    --surface: #1C2923;
    --surface-soft: #27372E;
    --ink: #F2F6F2;
    --muted: #B6C6BB;
    --line: #405349;
    --brand: #90DCB2;
    --brand-ink: #10261A;
    --brand-soft: #294B39;
    --good: #A6EAC5;
    --bad: #FFAAA2;
    --bad-soft: #51312F;
    --warning: #FFD291;
    --warning-soft: #503D25;
    --focus: #85D4FF;
    --overlay: rgba(0,0,0,.78);
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { min-width: 0; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button, select { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled {
  opacity: .43;
  cursor: not-allowed;
}
button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible,
a:focus-visible {
  outline: .18rem solid var(--focus);
  outline-offset: .15rem;
}
input, textarea, select { font-size: max(1rem, 16px); }
input, textarea { min-width: 0; }
svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[hidden] { display: none !important; }
button { min-height: 2.95rem; }
a { color: var(--brand); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.45rem; letter-spacing: -.045em; }
h2 { font-size: 1.12rem; letter-spacing: -.02em; }
h3 { font-size: 1rem; }
small { font-size: .79rem; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warning); }
.number {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  font-weight: 750;
  letter-spacing: -.025em;
}
.tiny { font-size: .78rem; }
.eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.between { justify-content: space-between; }
.stack { display: grid; gap: .75rem; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.separator {
  height: .06rem;
  background: var(--line);
  margin: .85rem 0;
}
.shell {
  width: 100%;
  max-width: 43rem;
  min-height: 100dvh;
  margin: auto;
  position: relative;
  background: var(--bg);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: calc(env(safe-area-inset-top) + .7rem)
    1rem .7rem;
  background: var(--bg);
  border-bottom: .06rem solid var(--line);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 900;
  letter-spacing: -.08em;
}
.page-title { font-weight: 800; }
.subtitle { color: var(--muted); font-size: .79rem; }
.icon-btn {
  display: grid;
  place-items: center;
  border: .06rem solid var(--line);
  border-radius: .8rem;
  background: var(--surface);
  min-width: 2.95rem;
  min-height: 2.95rem;
  padding: .6rem;
}
.icon-btn svg { width: 1.35rem; height: 1.35rem; }
main { padding: 1rem 1rem 9.7rem; }
.view { display: none; animation: appear .18s ease; }
.view.active { display: block; }
@keyframes appear {
  from { opacity: .65; transform: translateY(.15rem); }
  to { opacity: 1; transform: translateY(0); }
}
.card {
  background: var(--surface);
  border: .06rem solid var(--line);
  border-radius: var(--r);
  padding: 1rem;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card-flat { box-shadow: none; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin: 1.2rem 0 .65rem;
}
.text-btn {
  padding: .5rem;
  border: 0;
  color: var(--brand);
  background: transparent;
  font-weight: 750;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem .85rem;
  min-height: 3rem;
  min-width: 0;
  border: .06rem solid transparent;
  border-radius: .8rem;
  font-weight: 780;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.btn svg { width: 1.15rem; height: 1.15rem; }
.btn-primary {
  background: var(--brand);
  color: var(--brand-ink);
}
.btn-secondary {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line);
}
.btn-danger {
  background: var(--bad);
  color: #161616;
}
:root[data-theme="light"] .btn-danger {
  color: #FFFFFF;
}
.btn-ghost { background: transparent; color: var(--brand); }
.btn-wide { width: 100%; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.btn-row > * { min-width: 0; }
.hero {
  border-radius: 1.25rem;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 1.15rem;
  margin-bottom: .9rem;
}
.hero small { opacity: .88; }
.hero h1 { margin-top: .2rem; font-size: 1.55rem; }
.hero .hero-currency {
  font-size: 1rem;
  font-weight: 650;
}
.hero .hero-line { padding: .45rem 0; }
.hero .hero-line + .hero-line {
  border-top: .06rem solid rgba(255,255,255,.25);
}
:root[data-theme="dark"] .hero .hero-line +
.hero .hero-line { border-color: rgba(0,0,0,.18); }
.hero-label {
  font-size: .78rem;
  font-weight: 750;
  opacity: .91;
}
.hero-amount { font-size: 1.25rem; line-height: 1.3; }
.hero .arrow { font-size: 1rem; }
.hero-foot {
  display: flex; gap: .5rem;
  align-items: center; flex-wrap: wrap;
  margin-top: .55rem;
  font-size: .75rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  font-size: .74rem;
  font-weight: 750;
  border-radius: 100rem;
  padding: .3rem .6rem;
  background: var(--surface-soft);
  color: var(--ink);
}
.pill.danger { background: var(--bad-soft); color: var(--bad); }
.pill.success { background: var(--brand-soft); color: var(--good); }
.pill.warning { background: var(--warning-soft); color: var(--warning); }
.overdue {
  display: flex;
  width: 100%;
  gap: .7rem;
  align-items: center;
  padding: .85rem;
  background: var(--bad-soft);
  color: var(--bad);
  border: .06rem solid var(--bad);
  border-radius: .9rem;
  text-align: left;
  font-weight: 700;
}
.overdue span { flex: 1; }
.searchbar {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--surface);
  border: .06rem solid var(--line);
  border-radius: .85rem;
  padding: .1rem .7rem;
}
.searchbar input {
  flex: 1;
  width: 100%;
  min-height: 2.95rem;
  border: 0;
  background: transparent;
  outline: none;
}
.searchbar:focus-within { outline: .15rem solid var(--focus); }
.filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  border-radius: 100rem;
  border: .06rem solid var(--line);
  background: var(--surface);
  padding: .45rem .75rem;
  font-size: .84rem;
  font-weight: 700;
}
.chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.field { display: grid; gap: .32rem; min-width: 0; }
.field label, .field-label {
  font-size: .84rem;
  font-weight: 750;
}
.control {
  width: 100%;
  min-height: 3rem;
  background: var(--surface);
  border: .06rem solid var(--line);
  border-radius: .8rem;
  padding: .7rem .75rem;
  outline: none;
}
.control:focus { outline: .15rem solid var(--focus); }
textarea.control { min-height: 5.5rem; resize: vertical; }
select.control { padding-right: .5rem; }
.form-grid { display: grid; gap: .75rem; }
.cols-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.person-list {
  display: grid;
  border-radius: 1rem;
  overflow: hidden;
  border: .06rem solid var(--line);
  background: var(--surface);
}
.person-row, .history-row, .page-row, .menu-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 4.25rem;
  padding: .78rem .8rem;
  border: 0;
  background: var(--surface);
  text-align: left;
  border-bottom: .06rem solid var(--line);
}
.person-row:last-child, .history-row:last-child,
.page-row:last-child, .menu-row:last-child { border-bottom: 0; }
.person-row:active, .page-row:active { background: var(--surface-soft); }
.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--brand-soft);
  color: var(--good);
  border-radius: .82rem;
  font-weight: 850;
}
.person-name { font-weight: 770; }
.balances {
  display: grid; gap: .16rem;
  text-align: right;
  max-width: 56%;
  min-width: 0;
  font-size: .85rem;
}
.person-meta { font-size: .76rem; color: var(--muted); }
.person-row .grow { overflow-wrap: anywhere; }
.balance-line { overflow-wrap: anywhere; }
.balance-line.pos { color: var(--good); }
.balance-line.neg { color: var(--bad); }
.balance-line.zero { color: var(--muted); }
.empty {
  padding: 2.4rem 1rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: .7rem;
}
.empty .symbol {
  display: grid; place-items: center;
  width: 3.8rem; height: 3.8rem;
  background: var(--brand-soft);
  color: var(--good);
  border-radius: 1.1rem;
}
.empty .symbol svg { width: 2rem; height: 2rem; }
.action-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 43rem;
  z-index: 20;
  background: var(--surface);
  border-top: .06rem solid var(--line);
  padding: .65rem 1rem
    calc(env(safe-area-inset-bottom) + .65rem);
  box-shadow: 0 -.35rem 1.5rem rgba(0,0,0,.055);
}
.action-dock .btn { min-height: 3.35rem; font-size: 1rem; }
.tabbar {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .1rem;
  margin-bottom: .5rem;
}
.tab {
  display: grid;
  justify-items: center;
  gap: .18rem;
  padding: .25rem .08rem;
  border: 0;
  border-radius: .7rem;
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  min-width: 0;
}
.tab[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-soft);
}
.tab svg { width: 1.25rem; height: 1.25rem; }
.alert-archive {
  background: var(--warning-soft);
  color: var(--warning);
  padding: .8rem;
  border: .06rem solid var(--warning);
  border-radius: .8rem;
  font-weight: 700;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: .06rem solid var(--line);
}
.kv:last-child { border-bottom: 0; }
.kv > :last-child { text-align: right; overflow-wrap: anywhere; }
.status-statement {
  padding: 1.1rem;
  background: var(--brand-soft);
  border-radius: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.history-row { min-height: 4.4rem; }
.history-row .number { font-size: .93rem; }
.history-copy { flex: 1; min-width: 0; }
.history-status { color: var(--muted); font-size: .75rem; }
.history-status.over { color: var(--bad); font-weight: 800; }
.history-status.paid { color: var(--good); }
.report-total {
  display: grid;
  gap: .3rem;
  padding: .85rem;
  background: var(--surface-soft);
  border-radius: .8rem;
  min-width: 0;
}
.report-total .number { font-size: 1.08rem; }
.menu-row { font-weight: 650; }
.menu-row svg:last-child { margin-left: auto; color: var(--muted); }
.settings-group { display: grid; gap: .75rem; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}
.switch-row input {
  width: 1.4rem; height: 1.4rem;
  accent-color: var(--brand);
}
.lock-screen {
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 3rem)
    1.25rem calc(env(safe-area-inset-bottom) + 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.pin-dots { display: flex; gap: .7rem; margin: .75rem 0; }
.pin-dot {
  height: .85rem; width: .85rem;
  border: .12rem solid var(--brand);
  border-radius: 50%;
}
.pin-dot.filled { background: var(--brand); }
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .7rem;
  width: min(100%,18rem);
}
.pin-key {
  min-height: 3.9rem;
  border: .06rem solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  font-size: 1.4rem;
  font-weight: 750;
}
.pin-key.blank { visibility: hidden; }
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  padding-top: calc(env(safe-area-inset-top) + 1rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}
.dialog {
  width: min(100%,27rem);
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: 1.2rem;
  border: .06rem solid var(--line);
  padding: 1.15rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dialog h2 { margin-bottom: .5rem; }
.dialog-footer { margin-top: 1rem; }
.sheet-backdrop { align-items: flex-end; padding: 0; }
.sheet {
  width: 100%;
  max-width: 43rem;
  max-height: 93dvh;
  background: var(--bg);
  border-radius: 1.3rem 1.3rem 0 0;
  overflow-y: auto;
  padding: 1rem 1rem
    calc(env(safe-area-inset-bottom) + 1.5rem);
}
.sheet-grip {
  width: 2.4rem; height: .28rem;
  background: var(--line);
  border-radius: 5rem;
  margin: -.3rem auto 1rem;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
}
.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  padding: .3rem;
  border-radius: .8rem;
  background: var(--surface-soft);
}
.segment button {
  border: 0;
  background: transparent;
  border-radius: .6rem;
  font-weight: 800;
}
.segment button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-ink);
}
.form-note { font-size: .78rem; color: var(--muted); }
.error-text { color: var(--bad); font-size: .82rem; font-weight: 700; }
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 9.2rem);
  left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: max-content;
  max-width: calc(100% - 2rem);
  background: var(--ink);
  color: var(--bg);
  padding: .75rem 1rem;
  border-radius: .75rem;
  box-shadow: var(--shadow);
  font-size: .86rem;
  font-weight: 750;
}
@media (min-width: 44rem) {
  .shell { border-inline: .06rem solid var(--line); }
  .sheet { border-radius: 1.3rem; max-height: 90dvh; }
  .sheet-backdrop { align-items: center; padding: 1rem; }
}
@media (max-width: 24rem) {
  .cols-2 { grid-template-columns: minmax(0,1fr); }
  .balances { max-width: 54%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ===== ChatGPT, 19.10.2026 — 2-so'rov (docs/dizayn/4-qoshimcha.md) ===== */
/* Odamni o‘chirish — ikkinchi darajali amal */
.person-delete-area {
  margin-top: 1.25rem;
  margin-bottom: .75rem;
  padding-top: 1rem;
  border-top: .06rem solid var(--line);
  display: flex;
  justify-content: center;
}
.person-delete-btn {
  background: transparent;
  color: var(--bad);
  border: .06rem solid var(--line);
  min-height: 3rem;
  padding: .7rem 1rem;
  font-size: .88rem;
  font-weight: 700;
}
.person-delete-btn:active { background: var(--bad-soft); }
.person-delete-btn:disabled { opacity: .4; }
/* PIN almashtirishdan chiqish */
.pin-cancel-btn {
  background: var(--surface);
  color: var(--ink);
  border: .06rem solid var(--line);
  min-height: 3rem;
  max-width: 100%;
  margin-top: .5rem;
  padding: .7rem 1rem;
  font-size: .9rem;
  font-weight: 700;
}
.pin-cancel-btn:active { background: var(--surface-soft); }

/* ===== ChatGPT, 20.10.2026 — 3-so'rov: Berdim/Oldim odam ichida (docs/dizayn/5-odam-ichida.md) ===== */
/* Odam sahifasidagi tezkor amallar */
.person-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: .65rem;
}

.person-actions .btn {
  min-height: 3.5rem;
  font-size: 1rem;
}

/* Forma: tanlangan odam va qoldiq */
.entry-person-context {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  background: var(--brand-soft);
  border: .06rem solid var(--line);
  border-radius: var(--r);
  min-width: 0;
}

.entry-balance {
  display: grid;
  gap: .15rem;
  margin-top: .3rem;
  font-size: .85rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

/* Har yozuvdan keyingi qoldiq bilan tarix */
.ledger {
  overflow: hidden;
  border: .06rem solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.ledger-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: .7rem;
  padding: .7rem .85rem;
  background: var(--surface-soft);
  border-bottom: .06rem solid var(--line);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.ledger-heading span:last-child {
  text-align: right;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 4.6rem;
  padding: .8rem .85rem;
  border: 0;
  border-bottom: .06rem solid var(--line);
  background: var(--surface);
  text-align: left;
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row:active {
  background: var(--surface-soft);
}

.ledger-left,
.ledger-right {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.ledger-right {
  text-align: right;
}

.ledger-amount,
.ledger-balance {
  font-size: .91rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ledger-meta {
  color: var(--muted);
  font-size: .76rem;
}

.ledger-opening {
  padding: .8rem;
  background: var(--surface-soft);
  border-bottom: .06rem solid var(--line);
  font-size: .83rem;
}

/* Jami qoldiq va odamlar sahifasidagi tugma */
.home-add-person {
  margin-top: .8rem;
  width: 100%;
}

.person-totals {
  display: grid;
  gap: .6rem;
}

/* Har xil masshtabda yon tomonga chiqmasin */
@media (max-width: 24rem) {
  .ledger-heading,
  .ledger-row {
    gap: .35rem;
    padding-inline: .55rem;
  }
}

/* ===== ChatGPT, 20.10.2026 — 4-so'rov: internetsiz ishlash (docs/dizayn/6-internetsiz.md) ===== */
/* Internet va sinxronlash paneli */
.sync-banner {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 4.7rem);
  z-index: 9;
  margin: 0;
  padding: .65rem 1rem;
  background: var(--surface);
  border-bottom: .06rem solid var(--line);
}

.sync-banner[data-status="offline"] {
  background: var(--warning-soft);
  color: var(--warning);
}

.sync-banner[data-status="syncing"] {
  background: var(--brand-soft);
}

.sync-banner[data-status="failed"] {
  background: var(--bad-soft);
  color: var(--bad);
}

.sync-topline {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.sync-topline strong {
  font-size: .84rem;
  font-weight: 800;
}

.sync-indicator {
  display: block;
  width: .65rem;
  height: .65rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--good);
}

[data-status="offline"] .sync-indicator {
  background: var(--warning);
}

[data-status="syncing"] .sync-indicator {
  background: var(--focus);
  animation: sync-pulse 1.2s ease-in-out infinite;
}

[data-status="failed"] .sync-indicator {
  background: var(--bad);
}

.sync-time {
  font-size: .75rem;
  opacity: .9;
  overflow-wrap: anywhere;
}

.sync-count {
  flex-shrink: 0;
  max-width: 42%;
  padding: .35rem .55rem;
  border-radius: .6rem;
  background: var(--warning-soft);
  color: var(--warning);
  border: .06rem solid var(--warning);
  font-size: .7rem;
  font-weight: 800;
  text-align: center;
}

.sync-explanation {
  margin-top: .4rem;
  font-size: .75rem;
  line-height: 1.4;
}

@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Tasdiqlangan balans izohi */
.balance-verification {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .55rem;
  font-size: .72rem;
  font-weight: 750;
  opacity: .85;
}

.balance-verification svg {
  width: .9rem;
  height: .9rem;
}

.balance-notice {
  margin-top: .7rem;
  padding: .65rem .75rem;
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: .7rem;
  font-size: .79rem;
  font-weight: 650;
}

/* Offline yozuv */
.offline-entry {
  margin: .55rem;
  padding: .85rem;
  background: var(--warning-soft);
  border: .06rem dashed var(--warning);
  border-radius: .85rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.offline-entry .number {
  margin: .35rem 0;
}

.pending-label {
  border-radius: 100rem;
  padding: .3rem .55rem;
  background: var(--surface);
  color: var(--warning);
  font-size: .72rem;
  font-weight: 800;
}

.offline-entry[data-status="sending"] {
  border-style: solid;
}

.offline-entry[data-status="failed"] {
  background: var(--bad-soft);
  border-color: var(--bad);
}

.offline-entry[data-status="failed"] .pending-label {
  color: var(--bad);
}

.offline-balance {
  margin-top: .65rem;
  padding-top: .55rem;
  border-top: .06rem solid var(--line);
  color: var(--muted);
  font-size: .77rem;
  font-weight: 650;
}

.offline-error {
  margin-top: .5rem;
  color: var(--bad);
  font-size: .79rem;
  overflow-wrap: anywhere;
}

.offline-delete {
  margin-top: .55rem;
  background: var(--surface);
  border: .06rem solid var(--bad);
  color: var(--bad);
  min-height: 2.95rem;
}

/* Odam tafsilotlari keshda yo‘q */
.offline-empty {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: .8rem;
  padding: 2rem 1rem;
}

.offline-empty-icon {
  display: grid;
  place-items: center;
  width: 3.7rem;
  height: 3.7rem;
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: 1rem;
}

.offline-empty-icon svg {
  width: 2rem;
  height: 2rem;
}

/* Offline paytida cheklangan amal */
.offline-restricted {
  opacity: .58;
  cursor: pointer;
}

.offline-restricted::after {
  content: " · Internet kerak";
  font-size: .73rem;
  font-weight: 600;
}

/* 22px masshtabda ham kenglikdan chiqmasin */
@media (max-width: 24rem) {
  .sync-banner {
    padding-inline: .6rem;
  }

  .sync-count {
    max-width: 38%;
    font-size: .67rem;
  }

  .sync-topline {
    gap: .4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-indicator {
    animation: none !important;
  }
}

/* ===== ChatGPT, 20.10.2026 — 5-so'rov: chek surati, akt, PIN 4/6, Face ID (docs/dizayn/7-surat-akt-faceid.md) ===== */
/* Chek surati */
.receipt-picker {
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: 1.3rem .8rem;
  border: .1rem dashed var(--line);
  border-radius: var(--r);
  background: var(--surface-soft);
  text-align: center;
}
.receipt-picker > svg {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--brand);
}
.receipt-preview {
  display: grid;
  gap: .7rem;
  border: .06rem solid var(--line);
  border-radius: var(--r);
  padding: .7rem;
}
.receipt-preview img {
  display: block;
  width: 100%;
  max-height: 13rem;
  object-fit: contain;
  border-radius: .6rem;
  background: var(--surface-soft);
}
.receipt-viewer {
  display: grid;
  gap: 1rem;
  max-height: 90dvh;
}
.receipt-viewer img {
  width: 100%;
  max-height: 70dvh;
  object-fit: contain;
  border-radius: .5rem;
}

/* Tarixdagi chek belgisi */
.receipt-mark {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  width: fit-content;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 750;
}
.receipt-mark svg {
  width: .95rem;
  height: .95rem;
}

/* PIN uzunligi */
.pin-length-choice {
  width: min(100%,19rem);
  display: grid;
  gap: .75rem;
  text-align: left;
}
.pin-length-choice .segment button {
  min-height: 3.2rem;
}

/* A4 akt sverka: PDF adapteriga beriladigan HTML */
.act-paper {
  width: 100%;
  background: #FFFFFF;
  color: #202A27;
  padding: 12mm;
  font-family: Arial, sans-serif;
  font-size: 10pt;
}
.act-paper h1 {
  text-align: center;
  font-size: 17pt;
  margin-bottom: 8mm;
}
.act-paper h2 {
  font-size: 12pt;
  margin: 6mm 0 3mm;
}
.act-paper table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 6mm;
  font-size: 9pt;
}
.act-paper th,
.act-paper td {
  padding: 2.5mm 1.5mm;
  border: .2mm solid #999;
  overflow-wrap: anywhere;
}
.act-paper th {
  background: #EFF2EF;
}
.act-paper td:not(:first-child) {
  text-align: right;
}
.act-paper .act-summary {
  border-top: .3mm solid #444;
  padding-top: 3mm;
}
@page {
  size: A4 portrait;
  margin: 12mm;
}
@media print {
  .act-paper {
    padding: 0;
  }
  .act-paper tr {
    break-inside: avoid;
  }
  .act-paper thead {
    display: table-header-group;
  }
}

/* ===== Texnik tuzatishlar (bizniki — dizayn emas) ===== */
/* iPhone: sana maydoni matn kengligini olib oynadan chiqib, oynani yonga suradigan bo'lardi (xatolar §83) */
input[type="date"].control { min-width: 0; -webkit-appearance: none; appearance: none; display: block; }
.sheet, .dialog { overflow-x: hidden; }
/* Amal paytida tugma o'chadi (ikki marta yozilmasin) — ko'rinib tursin */
button[aria-busy="true"] { opacity: .6; cursor: progress; }