/* ============================================================
   Moliyam — «Daftar» dizayn tizimi (2026-07, to'liq qayta qurish)
   Ohang: qog'oz daftar + lazur (Registon) + atlas zigzag imzosi.
   Ranglar dataviz validatoridan o'tgan (och va tun rejimlari).
   ============================================================ */

/* ---------- Shriftlar (self-hosted) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/bitter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/bitter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/bitter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Tokenlar ---------- */
:root {
  /* qog'oz (och) */
  --bg: #F2F2ED;
  --card: #FFFFFF;
  --card-border: #E5E4DB;
  --ink: #23252B;
  --muted: #6E7178;
  --track: #ECEBE3;

  --brand: #33509E;         /* lazur */
  --brand-ink: #2A4386;
  --on-brand: #FFFFFF;
  --brand-soft: #E9EDF8;

  --pos: #127E5E;           /* kirim (yashil-teal) */
  --neg-mark: #CC4B37;      /* chiqim grafik belgisi */
  --danger: #C03B45;        /* anor — xavf/oshgan limit */
  --danger-soft: #F9E9EA;
  --warn: #B8770F;          /* za'faron */
  --warn-soft: #F7EEDC;
  --pos-soft: #E5F2ED;

  --shadow: 0 1px 2px rgba(35, 37, 43, .05), 0 8px 24px -12px rgba(35, 37, 43, .12);
  --shadow-pop: 0 24px 48px -12px rgba(35, 37, 43, .25);
  --r: 16px;
  --r-sm: 12px;

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bitter', Georgia, serif;

  /* atlas zigzag (lazur + za'faron ipi) */
  --ikat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 8 7 2l7 6 7-6 7 6' fill='none' stroke='%2333509E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 5 7 -1l7 6 7-6 7 6' fill='none' stroke='%23D9A13B' stroke-width='1.4' opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --bg: #131521;            /* tun */
  --card: #1C1F2E;
  --card-border: #2A2E42;
  --ink: #E9EAF2;
  --muted: #9AA0B4;
  --track: #262A3D;

  --brand: #5F7DD6;
  --brand-ink: #8FA7EF;
  --on-brand: #0F1220;
  --brand-soft: #232A45;

  --pos: #46B98C;
  --neg-mark: #E0705C;
  --danger: #E6737C;
  --danger-soft: #3A2530;
  --warn: #E0A33C;
  --warn-soft: #37301F;
  --pos-soft: #1E3230;

  --shadow: none;
  --shadow-pop: 0 24px 48px -12px rgba(0, 0, 0, .55);

  --ikat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 8 7 2l7 6 7-6 7 6' fill='none' stroke='%238FA7EF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 5 7 -1l7 6 7-6 7 6' fill='none' stroke='%23E0A33C' stroke-width='1.4' opacity='.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
}
body.no-scroll { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: inherit;
}
a { color: var(--brand); text-decoration: none; }
select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -.01em;
}
/* Yashirin summalar: yulduzchalar qalinroq va kengroq ko'rinsin. Markazlashgan
   "∗" belgisi bilan birga minus/plus oldida turса ham chiroyli chiqadi.
   (font-size TEGILMAYDI — .hero-balance kabi o'z o'lchamli elementlar buzilmasin.) */
html.amounts-hidden .num,
html.amounts-hidden .sens {
  font-weight: 800;
  letter-spacing: .14em;
}
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pos { color: var(--pos); }
.neg { color: var(--danger); }
.grow { flex: 1; }
.full { width: 100%; }

/* ---------- Ikonkalar ---------- */
.icw { display: inline-flex; }
.ic { width: 22px; height: 22px; flex: none; }
.ic-sm { width: 17px; height: 17px; }
.ic-lg { width: 28px; height: 28px; }
.muted-ic { color: var(--muted); }

/* ---------- Brend belgi (atlas zigzag gerb) ---------- */
.brand-mark {
  display: inline-block; width: 34px; height: 34px; border-radius: 10px;
  background-color: var(--brand);
  background-image: var(--ikat);
  background-size: 24px 9px;
  background-position: center;
  background-repeat: repeat-x;
  position: relative;
  overflow: hidden;
}
:root[data-theme="light"] .brand-mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 8 7 2l7 6 7-6 7 6' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 5 7 -1l7 6 7-6 7 6' fill='none' stroke='%23D9A13B' stroke-width='1.4' opacity='.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.brand-mark.big { width: 56px; height: 56px; border-radius: 16px; background-size: 30px 11px; }

/* ---------- Qobiq / layout ---------- */
#app { min-height: 100dvh; display: flex; justify-content: center; }
.main-col { width: 100%; max-width: 600px; min-width: 0; }
.content {
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.content.loading { opacity: .55; transition: opacity .15s .1s; }

.sidebar { display: none; }

@media (min-width: 960px) {
  #app { gap: 28px; }
  .sidebar {
    display: flex; flex-direction: column; gap: 22px;
    width: 220px; flex: none;
    padding: 26px 0 26px 22px;
    position: sticky; top: 0; height: 100dvh;
  }
  .sidebar-brand { display: flex; align-items: center; gap: 12px; padding-left: 12px; }
  .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
  .sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
  .side-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px; color: var(--muted); font-weight: 600;
  }
  .side-link:hover { background: var(--card); color: var(--ink); }
  .side-link.active { background: var(--brand); color: var(--on-brand); }
  .side-add { margin-top: 14px; border: 1.5px dashed var(--card-border); color: var(--brand); }
  .side-add:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
  .bottom-nav, .fab { display: none; }
  .content { padding: 26px 0 60px; }
}

/* Splash */
.splash {
  min-height: 70dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
.splash-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--muted); }

/* ---------- Pastki panel + FAB (mobil) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr;
  align-items: stretch;
  background: var(--card);
  border-top: 1px solid var(--card-border);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 4px; color: var(--muted); border-radius: 12px;
}
.nav-btn.active { color: var(--brand); }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; }
.fab {
  position: fixed; z-index: 41;
  left: 50%; transform: translateX(-50%);
  bottom: calc(26px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 20px;
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--brand) 55%, transparent);
}
.fab:active { transform: translateX(-50%) scale(.94); }
@media (min-width: 960px) {
  /* .bottom-nav/.fab dan keyin kelishi shart — aks holda ustidan yozadi */
  .bottom-nav, .fab { display: none; }
}

/* ---------- Kartalar ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card-list { padding: 4px 6px; display: flex; flex-direction: column; }
.sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.sec-head h2 {
  font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px;
}
.link { color: var(--brand); font-weight: 700; font-size: 13.5px; }
.more-link { display: block; text-align: center; padding: 8px 0 2px; width: 100%; }
.sub-head { font-size: 14px; font-weight: 800; margin: 14px 0 8px; }

/* ---------- Sahifa tepasi ---------- */
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.page-back { display: flex; align-items: center; gap: 4px; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hello { display: flex; flex-direction: column; line-height: 1.2; }
.hello-hi { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hello-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; }

/* ---------- Oy tanlagich ---------- */
.month-nav { display: flex; align-items: center; gap: 2px; }
.mn-label {
  min-width: 108px; text-align: center; font-weight: 800; font-size: 14.5px;
  padding: 8px 10px; border-radius: 12px;
}
.mn-label:hover { background: var(--card); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; color: var(--muted); flex: none;
}
.btn-icon:hover, .btn-icon.active-btn { background: var(--card); color: var(--ink); }

/* ---------- Hero (daftar kartasi) ---------- */
.hero {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 18px 22px;
  overflow: hidden;
}
.hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hero-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.hero-balance {
  font-family: var(--font-display);
  font-size: clamp(28px, 8.5vw, 38px);
  font-weight: 700; line-height: 1.15; margin-top: 2px;
}
.hero-eye { color: var(--muted); }
.hero-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-top: 16px; padding-top: 13px;
  border-top: 1px dashed var(--card-border);
}
.hero-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-stat-l { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.hero-stat-v { font-weight: 800; font-size: 15.5px; white-space: nowrap; }
.hero-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background-image: var(--ikat);
  background-size: 26px 9px; background-repeat: repeat-x; background-position: bottom center;
  opacity: .9;
}

/* ---------- Hisoblar lentasi ---------- */
.acct-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px;
  scrollbar-width: none;
}
.acct-strip::-webkit-scrollbar { display: none; }
.acct-card {
  flex: none; min-width: 128px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-sm); padding: 10px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.acct-card:active { transform: scale(.97); }
.acct-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--brand-soft); color: var(--brand);
}
.acct-ic.k-cash { background: var(--pos-soft); color: var(--pos); }
.acct-ic.k-bank { background: var(--warn-soft); color: var(--warn); }
.acct-name { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.acct-bal { font-weight: 800; font-size: 14.5px; }

/* ---------- Bildirishnoma ---------- */
.notice {
  display: flex; align-items: center; gap: 9px;
  background: var(--warn-soft); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--r-sm); padding: 10px 13px; font-size: 13.5px; font-weight: 600;
}
.notice .ic { color: var(--warn); }

/* ---------- Donut ---------- */
.sec-donut .donut-wrap { margin: 4px auto 10px; }
.donut-wrap { position: relative; width: min(210px, 62vw); margin: 0 auto; }
.donut { display: block; width: 100%; height: auto; }
.donut-seg { transition: opacity .12s; cursor: pointer; }
.donut-seg.hot { opacity: .82; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; gap: 1px;
}
.donut-center-t { font-size: 12px; color: var(--muted); font-weight: 700; }
.donut-center-v { font-family: var(--font-display); font-size: 21px; font-weight: 700; }

.chart-tip {
  position: absolute; z-index: 90; display: none; pointer-events: none;
  background: var(--ink); color: var(--bg);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-pop);
}
.tt-inc { color: #7fd6b2; }
.tt-exp { color: #f2a396; }

/* ---------- Kategoriya ro'yxati ---------- */
.cat-list { display: flex; flex-direction: column; }
.cat-row .lrow-sub { margin-top: 5px; }
.pct { color: var(--muted); font-size: 12px; font-weight: 700; }

/* ---------- Ro'yxat qatori ---------- */
.lrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px; border-radius: var(--r-sm);
  width: 100%;
}
.lrow[role="button"], button.lrow, a.lrow { cursor: pointer; }
.lrow[role="button"]:hover, button.lrow:hover, a.lrow:hover { background: var(--bg); }
a.lrow { color: inherit; }
.lrow-main { flex: 1; min-width: 0; }
.lrow-title {
  font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lrow-sub {
  color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lrow-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.lrow-amt { font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.row-dim { opacity: .55; }

.cat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: color-mix(in srgb, var(--c, var(--brand)) 16%, var(--card));
  color: var(--c, var(--brand));
}
:root[data-theme="dark"] .cat-badge {
  background: color-mix(in srgb, var(--c, var(--brand)) 22%, var(--card));
  color: color-mix(in srgb, var(--c, var(--brand)) 70%, #ffffff);
}
.cat-badge-dash { border: 1.5px dashed var(--card-border); background: none; color: var(--muted); }

/* Kun sarlavhalari */
.day-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 0; margin-top: 4px;
}
.day-head-l { font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: capitalize; }
.day-head-v { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.records-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Xulosa chizig'i ---------- */
.sum-strip {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 9px 14px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-sm);
  font-weight: 800; font-size: 14px;
}

/* ---------- Filtr ---------- */
.filter-bar { display: flex; flex-direction: column; gap: 8px; }
.search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-sm); padding: 0 12px;
}
.search-wrap .ic { color: var(--muted); }
.search-inp { border: 0; background: none; padding: 10px 0; flex: 1; min-width: 0; }
.search-inp:focus { outline: none; }
.sel-row { display: flex; gap: 8px; }
.sel-inline { flex: 1; min-width: 0; }

/* ---------- Segmentlar ---------- */
.seg {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--track); border-radius: 12px;
}
.seg-wide { display: flex; }
.seg-wide .seg-btn { flex: 1; }
.seg-btn {
  padding: 7px 13px; border-radius: 9px; font-weight: 700; font-size: 13.5px;
  color: var(--muted); white-space: nowrap; text-align: center;
}
.seg-btn.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg-sm .seg-btn { padding: 5px 10px; font-size: 12.5px; }
.seg-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; }

/* ---------- Tugmalar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: 13px;
  font-weight: 800; font-size: 14.5px;
  transition: transform .06s;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 11px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:disabled { opacity: .55; }
.btn-soft { background: var(--card); border: 1px solid var(--card-border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost-danger { color: var(--danger); background: var(--danger-soft); }
.btn-row { display: flex; gap: 9px; margin-top: 12px; }

/* ---------- Formalar ---------- */
.input {
  width: 100%;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-sm); padding: 10px 12px;
  color: var(--ink);
}
.input:focus { outline: none; border-color: var(--brand); }
select.input { appearance: auto; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field-label { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.field-hint { font-size: 12px; color: var(--muted); }
.input-money { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border);
  font-weight: 700; font-size: 13px; color: var(--muted);
}
.chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip-date { max-width: 150px; }
.chip-date.active { color-scheme: dark; }

/* ---------- Rang / ikonka tanlagich ---------- */
.color-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.color-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c); border: 3px solid transparent;
  box-shadow: inset 0 0 0 2px var(--card);
}
.color-dot.active { border-color: var(--c); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.icon-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 11px; color: var(--muted);
  border: 1.5px solid var(--card-border);
}
.icon-cell.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- Sheet ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 17, 28, .45);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s;
  backdrop-filter: blur(2px);
}
.sheet-overlay.open { opacity: 1; }
.sheet {
  width: 100%; max-width: 600px;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(24px); transition: transform .22s cubic-bezier(.2, .9, .3, 1);
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
}
.sheet-overlay.open .sheet { transform: translateY(0); }
.sheet-full {
  height: calc(100dvh - 28px);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet-full .sheet-head { flex: none; }
.sheet-full .add-body { flex: 1; min-height: 0; }
.sheet-head { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-top: 8px; }
.sheet-grip {
  width: 40px; height: 4px; border-radius: 2px; margin: 0 auto 4px;
  background: var(--card-border);
}
.sheet-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 8px; }
.sheet-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.sheet-body { padding-top: 6px; }
@media (min-width: 700px) {
  .sheet-overlay { align-items: center; padding: 24px; }
  .sheet { border-radius: 22px; max-width: 460px; max-height: calc(100dvh - 80px); }
  .sheet-full { height: auto; min-height: 560px; }
}

/* ---------- Yozuv kiritish oynasi ---------- */
.add-body { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.seg-types { display: flex; }
.seg-types .seg-btn { flex: 1; }
.add-body[data-type="income"] .seg-types .seg-btn.active { color: var(--pos); }
.add-body[data-type="expense"] .seg-types .seg-btn.active { color: var(--danger); }

.add-amount-wrap {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 6px 0 2px; min-height: 52px;
}
.add-amount {
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 40px); font-weight: 700; line-height: 1.1;
  word-break: break-all; text-align: center;
}
.add-amount.has-op { font-size: clamp(22px, 6.5vw, 30px); }
.add-cur { color: var(--muted); font-weight: 700; }

.add-cats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 2px;
  overflow-y: auto; flex: 1; min-height: 84px; align-content: start;
  padding: 4px 0;
}
.add-bottom { flex: none; }
.cat-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 2px; border-radius: 12px;
}
.cat-chip:hover { background: var(--card); }
.cat-chip.active { background: var(--card); box-shadow: inset 0 0 0 2px var(--c); }
.cat-chip-name {
  font-size: 11px; font-weight: 700; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-chip.active .cat-chip-name { color: var(--ink); }

.add-bottom { display: flex; flex-direction: column; gap: 8px; }
.acc-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acc-line-label { font-size: 12px; font-weight: 800; color: var(--muted); flex: none; width: 64px; }
.acc-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.acc-scroll::-webkit-scrollbar { display: none; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border);
  font-weight: 700; font-size: 12.5px; color: var(--muted);
}
.acc-chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.add-daterow { display: flex; gap: 6px; align-items: center; }
.add-cprow { display: flex; align-items: center; gap: 8px; }
.add-cp-select { flex: 1; padding: 8px 10px; }
.add-note { background: var(--card); }
.add-del { align-self: center; }

/* Klaviatura */
.keypad {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  padding-bottom: 4px;
}
.key {
  height: 54px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--card-border);
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.key:active { transform: scale(.95); background: var(--track); }
.key-op { color: var(--brand); font-weight: 800; }
.key-save { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (max-height: 700px) {
  .key { height: 46px; font-size: 18px; }
  .add-amount { font-size: 28px; }
}

/* ---------- Byudjet / progress ---------- */
.budget-row { padding: 8px 0; }
.budget-row + .budget-row { border-top: 1px dashed var(--card-border); }
.budget-line1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.budget-name { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.prog { height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; }
.prog-fill { height: 100%; border-radius: 4px; background: var(--c, var(--brand)); min-width: 3px; }
.tag {
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-ok { background: var(--pos-soft); color: var(--pos); }

/* ---------- Plitkalar ---------- */
.tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-row:has(> :only-child) { grid-template-columns: 1fr; }
.tile {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.tile:active { transform: scale(.98); }
.tile-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: color-mix(in srgb, var(--c, var(--brand)) 15%, var(--card));
  color: var(--c, var(--brand));
}
:root[data-theme="dark"] .tile-ic {
  background: color-mix(in srgb, var(--c, var(--brand)) 24%, var(--card));
  color: color-mix(in srgb, var(--c, var(--brand)) 70%, #fff);
}
.tile-t { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.tile-v { font-weight: 800; font-size: 13.5px; white-space: nowrap; }

/* ---------- Statistika ---------- */
.totals-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.total-box {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-sm);
  padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.total-l { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.total-v { font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-inline { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 13.5px; font-weight: 700; }

.legend { display: flex; gap: 16px; margin-bottom: 8px; }
.legend-i { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-inc { background: var(--pos); }
.sw-exp { background: var(--neg-mark); }

.bars-wrap { position: relative; }
.bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: var(--h, 180px); overflow-x: auto; scrollbar-width: none;
}
.bars::-webkit-scrollbar { display: none; }
.bar-g {
  flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  justify-content: flex-end; height: 100%;
  border-radius: 8px; padding: 4px 2px 2px;
}
.bar-g:hover, .bar-g.active { background: var(--bg); }
.bar-cols { display: flex; align-items: flex-end; gap: 2px; }
.bar { width: 9px; border-radius: 4px 4px 2px 2px; display: inline-block; }
.bar-inc { background: var(--pos); }
.bar-exp { background: var(--neg-mark); }
.bar-label { font-size: 10.5px; color: var(--muted); font-weight: 700; }

.spark-wrap { position: relative; }
.spark { width: 100%; height: 120px; display: block; }
.spark-line { fill: none; stroke: var(--neg-mark); stroke-width: 2; stroke-linejoin: round; }
.spark-fill { fill: color-mix(in srgb, var(--neg-mark) 12%, transparent); stroke: none; }
.spark-dot { fill: var(--neg-mark); stroke: var(--card); stroke-width: 2; }

.ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ring-track { fill: none; stroke: var(--track); stroke-width: 6; }
.ring-val { fill: none; stroke-width: 6; stroke-linecap: round; }
.ring-label { position: absolute; font-size: 12px; font-weight: 800; }

/* ---------- Kalendar ---------- */
.card-cal { padding: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 0; }
.cal-cell {
  min-height: 52px; border-radius: 9px; padding: 3px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 11px; border: 1px solid transparent;
}
.cal-cell:hover { background: var(--bg); }
.cal-off { pointer-events: none; }
.cal-day { font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-today { border-color: var(--brand); }
.cal-today .cal-day { color: var(--brand); font-weight: 800; }
.cal-has .cal-day { color: var(--ink); }
.cal-v { font-size: 9.5px; font-weight: 700; line-height: 1.2; }

/* ---------- Qarz / maqsad ---------- */
.debt-hero { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.debt-remaining { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.goal-grid { display: flex; flex-direction: column; gap: 10px; }
.goal-card { display: flex; align-items: center; gap: 14px; width: 100%; }
.goal-card:active { transform: scale(.98); }
.goal-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.goal-nums { font-size: 13.5px; color: var(--muted); font-weight: 700; }
.goal-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.cp-saldo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }

/* ---------- Boshqa sahifasi ---------- */
.user-card { display: flex; align-items: center; gap: 13px; width: 100%; }
.user-ava {
  width: 46px; height: 46px; border-radius: 15px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.user-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.user-name { font-weight: 800; font-size: 16px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.more-tile {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.more-tile:active { transform: scale(.96); }
.more-tile-t { font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }
.ai-card .sec-head h2 .ic { color: var(--brand); }
.ai-content p { margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
.logout-form { margin-top: 4px; }

.total-card { display: flex; flex-direction: column; gap: 3px; }
.total-big { font-family: var(--font-display); font-size: 26px; font-weight: 700; }

.arch-details summary {
  cursor: pointer; color: var(--muted); font-weight: 700; font-size: 13.5px;
  padding: 4px 6px; margin-bottom: 6px;
}

/* ---------- Bo'sh holat / xato ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 16px; color: var(--muted); text-align: center; font-size: 13.5px;
}
.error-card { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--danger); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translate(-50%, 16px);
  bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 80;
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 13px; font-weight: 700; font-size: 13.5px;
  box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .2s, transform .2s;
  max-width: min(92vw, 480px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-ok .ic { color: #7fd6b2; }
.toast-err .ic { color: #f2a396; }
@media (min-width: 960px) { .toast { bottom: 32px; } }

/* ---------- Auth sahifalari ---------- */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 20px;
  background:
    var(--ikat) left 18px top 0 / 28px 10px repeat-x,
    var(--bg);
  background-blend-mode: normal;
}
.auth-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.auth-sub { color: var(--muted); font-size: 14px; }
.auth-card { padding: 20px; }
.auth-form { display: flex; flex-direction: column; }
.auth-foot { text-align: center; color: var(--muted); font-size: 14px; }
.auth-foot a { font-weight: 700; }
.flash {
  border-radius: var(--r-sm); padding: 10px 13px; font-size: 13.5px; font-weight: 600;
  margin-bottom: 12px;
}
.flash-error { background: var(--danger-soft); color: var(--danger); }
.flash-success { background: var(--pos-soft); color: var(--pos); }