/* Guzal Hayot — Kassa. iOS 27 dizayni (Variant 6). Tashqi resurs yo'q.
   Shartnoma: docs/dizayn/DIZAYN.md. Tokenlar nomi o'zgarmaydi; HEX faqat token ta'rifida.

   ======================================================================
   YANGI KLASSLAR (sahifalar a'zosi ishlatadi). Eski klasslar (tugma, jadval, blok, raqam-karta,
   badge, holat, toast, jadval-quti, forma, maydon, filtr, chip ...) o'z nomida qoldi.
   ----------------------------------------------------------------------
   Tugma:      .tugma (neytral) | .asosiy (primary) | .ikkilamchi (tint) | .xavfli | .ogoh (sariq CTA)
               | .shisha (shisha ikonka tugma) | .ikon (36x36 doira) | .kichik (30px) | .katta (44px, to'liq kenglik)
   Karta:      .karta (surface1 + blur) ; .karta-pad (ichki bo'shliq 16px 18px)
   Sarlavha:   .sarlavha-2 (bo'lim sarlavhasi, 20px) ichida <a class="havola">Hammasi</a> o'ngda
   Hero:       .hero > (.hero-asos > .hero-yorliq + .hero-raqam[<small>so'm</small>]) + .hero-stats > .hero-stat(<b>raqam</b>)
   Kurs pill:  .kurs-pill (bosiladigan kurs, ichida K.ikon('edit',14))
   Segment:    .seg (> .seg-el[.faol]) ; .seg.kichik  — yoki K.segment(...)
   Grafik:     .grafik (karta) > .grafik-bosh(b + span) + .grafik-ustunlar > i[.eski|.manfiy](style height:%)(<em>qiymat</em>) + .grafik-sanalar > span[.faol]
   Nasiya:     .karta.nasiya-karta > .nasiya-bosh(b + .badge) + .nasiya-summa + .nasiya-sana
   Ro'yxat:    .royxat (karta) > .royxat-qator > .avatar + .royxat-nom(b + small) + .royxat-summa(span + small) + K.ikon('chev')
   Avatar:     .avatar[data-r="0..7"] (bosh harflar) — K.avatar(nomi)
   Ogohlantirish kartasi: .ogoh-karta (sariq; ichida b+span, o'ngda .tugma.ogoh) — .eslatma / .ogohlantirish ham shunday ko'rinadi
   Ikonka:     svg.ikona (K.ikon(nom, olcham)) ; matn ranglari: .musbat (yashil), .manfiy (qizil), .xira, .ogoh-matn-kichik
   Holat:      .holat-ikon (holat ichidagi ikonka) ; .holat-bosh (bo'sh), .holat-xato, .holat-yuk
   Jadval:     .jadval(.kartali) ichida .son (o'ngda, tabular) .dt/.kt (yashil/qizil matn), tfoot .jami-qator
   Bosh sahifa: .tarmoq-2.bosh-tarmoq > .ustun.bosh-chap + .ustun.bosh-ong ; .hamkor-el (avatar + nom) ; .nasiya-royxat
   Sahifa o'rami: JS uni <div class="sahifa sahifa--NOM"> (ikki chiziq!) qilib beradi — .sahifa-bosh bilan to'qnashmasin
   Kengaytma tokenlar (DIZAYN.md dagilarga qo'shimcha): --seg-on, --seg-shadow, --scrim, --shadow-pop, --hover, --logo-grad,
               --warn-btn, --on-warn-btn, --wall, --av-0..--av-7, --panel-h, --vq-excel-matn (Excel setka matni, doim qora).
   Grafik/dashboard (js/grafik.js, js/dashboard.js): tokenlar --chart-1, --chart-taqqos, --chart-kirim, --chart-chiqim, --chart-grid;
               .grafik-quti > .grafik-vosita(.grafik-legend + .grafik-jadval-tugma) + .grafik-sahna(svg + .grafik-tip) + .grafik-jadval;
               .grafik-spark; .g-gor (gorizontal ustunlar); .dash-tana, .dash-kpi-qator, .karta.kpi(.kpi-yorliq/.kpi-qiymat/.kpi-ozgarish/.kpi-spark),
               .dash-tarmoq (2fr/1fr), .karta.dash-karta(.dash-osish/.dash-oylik/.dash-oqim/.dash-firma) + .dash-karta-bosh(b + span)
   JS: K.ikon, K.tugma, K.segment(variantlar, joriy, onchange, kichik, ariaLabel), K.avatar, K.sahifaBosh(sarlavha, harakatlar, izoh), K.boshHolat(matn, harakat, ikon).
   ====================================================================== */

/* ---------- 1. Tokenlar ---------- */
:root {
  color-scheme: light;
  --bg: #EEF1F7;
  --surface1: rgba(255, 255, 255, .74);
  --surface1-solid: #FFFFFF;
  --surface2: rgba(118, 118, 128, .12);
  --surface3: #E5E5EA;
  --text1: #000000;
  --text2: rgba(60, 60, 67, .60);
  --text3: rgba(60, 60, 67, .30);
  --separator: rgba(60, 60, 67, .18);
  --accent: #5856D6;
  --accent-tint: rgba(88, 86, 214, .12);
  --on-accent: #FFFFFF;
  --income: #248A3D;
  --income-bg: rgba(52, 199, 89, .14);
  --expense: #D70015;
  --expense-bg: rgba(255, 59, 48, .12);
  --warning: #8A6100;
  --warning-bg: rgba(255, 204, 0, .22);
  --glass: rgba(255, 255, 255, .50);
  --glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .8), 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 28px rgba(0, 0, 0, .08);
  --card-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .05), 0 10px 30px rgba(40, 60, 120, .08);
  --zebra: rgba(118, 118, 128, .07);
  /* kengaytma */
  --seg-on: #FFFFFF;
  --seg-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
  --chart-1: var(--accent);
  --chart-taqqos: #EB6834;
  --chart-kirim: #0F8A6A;
  --chart-chiqim: #E5484D;
  --chart-grid: rgba(60, 60, 67, .12);
  --scrim: rgba(20, 24, 40, .35);
  --shadow-pop: 0 0 0 .5px rgba(0, 0, 0, .08), 0 18px 48px rgba(0, 0, 0, .18);
  --hover: rgba(0, 0, 0, .06);
  --warn-btn: #FFCC00;
  --on-warn-btn: #000000;
  --wall:
    radial-gradient(ellipse 52% 48% at 8% 8%, rgba(90, 200, 250, .55), transparent 70%),
    radial-gradient(ellipse 44% 46% at 92% 16%, rgba(255, 149, 190, .45), transparent 70%),
    radial-gradient(ellipse 60% 52% at 55% 108%, rgba(52, 199, 89, .35), transparent 70%),
    radial-gradient(ellipse 42% 44% at 28% 72%, rgba(175, 130, 255, .30), transparent 70%);
}
/* Tun: atribut yo'q bo'lsa tizim bo'yicha, [data-theme=dark] bo'lsa majburan */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #05060A;
    --surface1: rgba(28, 28, 34, .66);
    --surface1-solid: #1C1C1E;
    --surface2: rgba(118, 118, 128, .24);
    --surface3: #3A3A3C;
    --text1: #FFFFFF;
    --text2: rgba(235, 235, 245, .60);
    --text3: rgba(235, 235, 245, .30);
    --separator: rgba(84, 84, 88, .50);
    --accent: #7D7AFF;
    --accent-tint: rgba(125, 122, 255, .22);
    --on-accent: #FFFFFF;
    --income: #30D158;
    --income-bg: rgba(48, 209, 88, .16);
    --expense: #FF453A;
    --expense-bg: rgba(255, 69, 58, .16);
    --warning: #FFD60A;
    --warning-bg: rgba(255, 214, 10, .18);
    --glass: rgba(40, 40, 48, .42);
    --glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 0 0 .5px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .4);
    --card-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .6);
    --zebra: rgba(255, 255, 255, .05);
    --seg-on: #636366;
    --seg-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .25);
    --chart-1: var(--accent);
    --chart-taqqos: #D95926;
    --chart-kirim: #199E70;
    --chart-chiqim: #E66767;
    --chart-grid: rgba(235, 235, 245, .10);
    --scrim: rgba(0, 0, 0, .55);
    --shadow-pop: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .6), 0 18px 48px rgba(0, 0, 0, .6);
    --hover: rgba(255, 255, 255, .08);
    --wall:
      radial-gradient(ellipse 52% 48% at 8% 8%, rgba(10, 132, 255, .45), transparent 70%),
      radial-gradient(ellipse 44% 46% at 92% 16%, rgba(191, 90, 242, .35), transparent 70%),
      radial-gradient(ellipse 60% 52% at 55% 108%, rgba(48, 209, 88, .25), transparent 70%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05060A;
  --surface1: rgba(28, 28, 34, .66);
  --surface1-solid: #1C1C1E;
  --surface2: rgba(118, 118, 128, .24);
  --surface3: #3A3A3C;
  --text1: #FFFFFF;
  --text2: rgba(235, 235, 245, .60);
  --text3: rgba(235, 235, 245, .30);
  --separator: rgba(84, 84, 88, .50);
  --accent: #7D7AFF;
  --accent-tint: rgba(125, 122, 255, .22);
  --on-accent: #FFFFFF;
  --income: #30D158;
  --income-bg: rgba(48, 209, 88, .16);
  --expense: #FF453A;
  --expense-bg: rgba(255, 69, 58, .16);
  --warning: #FFD60A;
  --warning-bg: rgba(255, 214, 10, .18);
  --glass: rgba(40, 40, 48, .42);
  --glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 0 0 .5px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .4);
  --card-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .6);
  --zebra: rgba(255, 255, 255, .05);
  --seg-on: #636366;
  --seg-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .25);
  --chart-1: var(--accent);
  --chart-taqqos: #D95926;
  --chart-kirim: #199E70;
  --chart-chiqim: #E66767;
  --chart-grid: rgba(235, 235, 245, .10);
  --scrim: rgba(0, 0, 0, .55);
  --shadow-pop: inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 0 0 .5px rgba(0, 0, 0, .6), 0 18px 48px rgba(0, 0, 0, .6);
  --hover: rgba(255, 255, 255, .08);
  --wall:
    radial-gradient(ellipse 52% 48% at 8% 8%, rgba(10, 132, 255, .45), transparent 70%),
    radial-gradient(ellipse 44% 46% at 92% 16%, rgba(191, 90, 242, .35), transparent 70%),
    radial-gradient(ellipse 60% 52% at 55% 108%, rgba(48, 209, 88, .25), transparent 70%);
}
/* Rejimga bog'liq bo'lmagan umumiy tokenlar */
:root {
  --font: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  --r-card: 18px;
  --r-input: 11px;
  --r-chip: 6px;
  --r-pill: 999px;
  --tap: 44px;
  --spring: cubic-bezier(.2, .8, .2, 1);
  --logo-grad: linear-gradient(135deg, #8E8CFF, #5856D6 60%, #3634A3);
  --av-0: #0A84FF; --av-1: #34C759; --av-2: #FF9F0A; --av-3: #BF5AF2;
  --av-4: #FF375F; --av-5: #30B0C7; --av-6: #5E5CE6; --av-7: #8E8E93;
  --panel-h: 72px;
  --vq-excel-matn: #000000; /* Excel setkasi: standart shrift rangi (ikkala rejimda qora) */
}

/* ---------- 2. Asos ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; font: 14px/1.45 var(--font); color: var(--text1); background: transparent;
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
/* Rangli fon (wallpaper): body ostida qotirilgan qatlam */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--wall); pointer-events: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 28px; margin: 0; font-weight: 700; letter-spacing: -.8px; }
h2 { font-size: 20px; margin: 0 0 10px 4px; font-weight: 700; letter-spacing: -.4px; }
small { font-size: 12px; }
::selection { background: var(--accent-tint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.yashirin { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xira { color: var(--text2); }
.son { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.manfiy { color: var(--expense); }
.musbat { color: var(--income); }
.ikona { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* Shisha — faqat navigatsiya: pill-menyu, ikonka tugmalar */
.shisha {
  background-color: var(--glass); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}

/* ---------- 3. Qobiq: tepadagi panel (bitta uzun pill-qator), foydalanuvchi va mavzu menyulari ---------- */
.panel { position: sticky; top: 0; z-index: 40; height: var(--panel-h); padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.panel::before {
  content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent); mask-image: linear-gradient(to bottom, black 55%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; width: 170px; flex: none; font-weight: 600; font-size: 15px; letter-spacing: -.2px; color: var(--text1); }
.brand:hover { text-decoration: none; }
.logo-g { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: 15px; background: var(--logo-grad); flex: none; }
.menyu-joy { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
/* Hamma bo'limlar bitta qatorda; sig'masa gorizontal suriladi (scrollbar yashirin, chetlarida yumshoq fade faqat surish mumkin tomonda) */
.menyu {
  display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; scroll-padding: 0 28px;
}
.menyu::-webkit-scrollbar { display: none; }
.menyu[data-chap="1"] { -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px); mask-image: linear-gradient(to right, transparent 0, black 28px); }
.menyu[data-ong="1"] { -webkit-mask-image: linear-gradient(to left, transparent 0, black 28px); mask-image: linear-gradient(to left, transparent 0, black 28px); }
.menyu[data-chap="1"][data-ong="1"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
}
.menyu-el {
  white-space: nowrap; height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 6px; flex: none;
  border: 0; background: none; border-radius: var(--r-pill); font: 500 13px/1 var(--font); color: var(--text1); cursor: pointer;
  transition: background-color .2s var(--spring), color .2s var(--spring);
}
.menyu-el:hover { text-decoration: none; background: var(--hover); }
.menyu-el:focus-visible { outline-offset: -2px; }
.menyu-el.faol { background: var(--accent); color: var(--on-accent); }
.menyu-el .ikona { width: 15px; height: 15px; display: none; }
.menyu-el.faol .ikona { display: block; }
.panel-ong { display: flex; align-items: center; gap: 8px; flex: none; }
.yuklash .ikona { width: 16px; height: 16px; }
.fd-tugma { padding: 0; overflow: hidden; }
.fd-tugma .avatar { width: 100%; height: 100%; border-radius: 50%; font-size: 12px; background: var(--logo-grad); }

/* Popover-menyular (mavzu, foydalanuvchi): tugma ostida, oddiy disclosure */
.pop-fon { position: fixed; inset: 0; z-index: 55; }
.pop-menyu {
  position: fixed; z-index: 60; width: 224px; padding: 6px; border-radius: 20px;
  background: var(--surface1-solid); box-shadow: var(--shadow-pop); animation: pop-ochil .2s var(--spring);
}
.fd-menyu { width: 250px; }
.pop-el {
  display: flex; align-items: center; gap: 12px; height: var(--tap); padding: 0 12px; border-radius: 14px; width: 100%;
  border: 0; background: none; font: 500 14px/1 var(--font); color: var(--text1); cursor: pointer; text-align: left;
}
.pop-el:hover { background: var(--hover); text-decoration: none; }
.pop-el.faol { background: var(--accent-tint); color: var(--accent); }
.pop-el .ikona { width: 18px; height: 18px; }
.pop-el .tanlandi { margin-left: auto; }
.foydalanuvchi { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; outline: none; }
.fd-ism { font-weight: 600; }
.fd-rol { color: var(--text2); font-size: 12px; margin-bottom: 6px; }
.kirishsiz-belgi { color: var(--text2); font-size: 11.5px; background: var(--surface2); border-radius: var(--r-pill); padding: 3px 10px; }

.kontent { padding: 8px 28px 48px; min-width: 0; }
.sahifa { max-width: 1400px; margin: 0 auto; }
.sahifa-bosh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.orqaga-tugma { margin: 0 0 10px -4px; padding-left: 8px; color: var(--accent); }
.sahifa-bosh h1 { line-height: 1.12; font-size: 30px; letter-spacing: -.9px; }
.sahifa-bosh h1 small { display: block; font-size: 13px; font-weight: 500; color: var(--text2); letter-spacing: 0; margin-top: 4px; }
.harakatlar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sana-belgi { color: var(--text2); font-size: 13px; font-weight: 500; }
.blok { margin: 0 0 22px; }
.tarmoq-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ustun { display: flex; flex-direction: column; min-width: 0; }
.maslahat { color: var(--text2); margin: 0 0 10px; }
.maslahat.sariq { background: var(--warning-bg); color: var(--warning); padding: 9px 14px; border-radius: 14px; }

/* ---------- 4. Tugma va maydonlar ---------- */
.tugma {
  font: 600 13px/1 var(--font); height: 36px; padding: 0 16px; border: 0; background-color: var(--surface2); color: var(--text1);
  border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--spring), transform .2s var(--spring), opacity .2s var(--spring);
}
.tugma:hover { text-decoration: none; background-image: linear-gradient(var(--hover), var(--hover)); }
.tugma:active { transform: scale(.97); }
.tugma .ikona { width: 16px; height: 16px; }
.tugma.asosiy { background-color: var(--accent); color: var(--on-accent); }
.tugma.ikkilamchi { background-color: var(--accent-tint); color: var(--accent); }
.tugma.xavfli { color: var(--expense); }
.tugma.ogoh { background-color: var(--warn-btn); color: var(--on-warn-btn); }
.tugma.shisha { background-color: var(--glass); color: var(--text1); }
.tugma.kichik { height: 30px; padding: 0 12px; font-size: 12.5px; }
.tugma.katta { height: var(--tap); padding: 0 18px; font-size: 15px; width: 100%; }
.tugma.ikon { width: 36px; padding: 0; }
.tugma.ikon .ikona { width: 18px; height: 18px; }
.tugma.kichik.ikon { width: 30px; padding: 0; }
.tugma.kichik.ikon .ikona { width: 16px; height: 16px; }
.tugma:disabled { opacity: .45; cursor: not-allowed; transform: none; background-image: none; }

input[type=text], input[type=search], input[type=tel], input[type=password], input[type=date], input[type=month], input[type=number], select, textarea {
  font: inherit; color: var(--text1); background-color: var(--surface2); border: 0; border-radius: var(--r-input);
  height: 36px; padding: 0 12px; min-width: 0; max-width: 100%;
  transition: box-shadow .2s var(--spring);
}
input::placeholder, textarea::placeholder { color: var(--text3); opacity: 1; }
textarea { width: 100%; height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-tint); }
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; }
input[type=file] { font: 13px/1.3 var(--font); color: var(--text2); background: none; border: 0; padding: 0; height: auto; max-width: 100%; cursor: pointer; }
input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
  font: 600 13px/1 var(--font); height: 36px; padding: 0 16px; margin-right: 12px; border: 0; border-radius: var(--r-pill);
  background-color: var(--surface2); color: var(--text1); cursor: pointer; transition: background-color .2s var(--spring);
}
input[type=file]:hover::file-selector-button { background-image: linear-gradient(var(--hover), var(--hover)); }
input[type=file]:focus-visible { outline: none; }
input[type=file]:focus-visible::file-selector-button { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-tint); }
input[type=file]:disabled { opacity: .5; cursor: not-allowed; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
select:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.maydon { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.maydon-yorliq { font-size: 12px; color: var(--text2); font-weight: 500; }
.maydon-izoh { font-size: 11.5px; color: var(--text2); }
.maydon-izoh.ogoh { color: var(--warning); font-weight: 600; }
.maydon.o-chirilgan { opacity: .45; }
.maydon-xato { color: var(--expense); font-size: 12px; }
.xato-kiritma { box-shadow: 0 0 0 2px var(--expense) !important; }
.forma { display: flex; flex-direction: column; gap: 12px; }
.forma-xato { color: var(--expense); background: var(--expense-bg); border-radius: var(--r-input); padding: 8px 12px; margin-top: 8px; }
.qidiruv { min-width: 220px; }
.filtr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filtr-yorliq { color: var(--text2); }
.qator-forma { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.qator-forma .keng-input { flex: 1; min-width: 220px; }
.qator-gor { margin-top: 10px; max-width: 420px; }

/* Segment (So'm / $, Hafta / Oy / Yil) */
.seg { display: inline-flex; background: var(--surface2); border-radius: var(--r-pill); padding: 2px; height: 30px; }
.seg-el {
  font: 500 12.5px/1 var(--font); color: var(--text1); background: none; border: 0; padding: 0 14px; border-radius: var(--r-pill);
  cursor: pointer; display: flex; align-items: center; transition: background-color .2s var(--spring);
}
.seg-el.faol { background: var(--seg-on); font-weight: 600; box-shadow: var(--seg-shadow); }
.seg.kichik { height: 26px; }
.seg.kichik .seg-el { padding: 0 10px; font-size: 12px; }

/* ---------- 5. Holatlar: yuklanmoqda / xato / bo'sh, toast ---------- */
.holat { padding: 28px 16px; text-align: center; color: var(--text2); background: var(--surface1); box-shadow: var(--card-shadow); border-radius: var(--r-card); display: flex; flex-direction: column; align-items: center; gap: 10px; -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); }
.holat-yuk { flex-direction: row; justify-content: center; }
.holat-xato { background: var(--expense-bg); color: var(--expense); }
.holat-sarlavha { font-weight: 700; }
.holat-ikon { opacity: .7; }
.holat-bosh { background: var(--zebra); box-shadow: none; }
.aylana { width: 18px; height: 18px; border: 2px solid var(--separator); border-top-color: var(--accent); border-radius: 50%; animation: aylan .8s linear infinite; display: inline-block; }
@keyframes aylan { to { transform: rotate(360deg); } }
.toastlar { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--text1); color: var(--bg); padding: 11px 16px; border-radius: 14px; font-weight: 500; box-shadow: var(--shadow-pop); transition: opacity .3s var(--spring); animation: pop-ochil .2s var(--spring); }
.toast-xato { background: var(--expense); color: var(--on-accent); }
.toast.ketdi { opacity: 0; }

/* ---------- 6. Ogohlantirish, bannerlar, kartalar ---------- */
.karta, .raqam-karta, .tez-forma {
  background: var(--surface1); box-shadow: var(--card-shadow); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
}
.karta-pad { padding: 16px 18px; }
.sarlavha-2 { font-size: 20px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 10px 4px; display: flex; align-items: center; justify-content: space-between; }
.sarlavha-2 .havola, .havola { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--accent); }

.ogohlantirish, .eslatma, .ogoh-karta {
  background: var(--warning-bg); color: var(--text1); border-radius: 16px; padding: 10px 12px 10px 16px; margin-bottom: 16px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.ogohlantirish .ogoh-matn, .eslatma .ogoh-matn, .ogoh-karta .ogoh-matn { flex: 1 1 260px; color: var(--text2); font-size: 12.5px; }
.ogohlantirish .ogoh-matn strong, .eslatma .ogoh-matn strong, .ogoh-karta .ogoh-matn strong,
.ogoh-karta > div > b { display: block; font-size: 14px; font-weight: 600; color: var(--text1); }
.ogohlantirish .forma-xato, .eslatma .forma-xato { flex-basis: 100%; margin: 0; }
.ogoh-matn-kichik { color: var(--warning); font-weight: 600; }
.kurs-qator { display: flex; gap: 8px; }
.kurs-input { width: 150px; text-align: right; font-variant-numeric: tabular-nums; }
.kurs-forma { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.kurs-pill { display: inline-flex; width: max-content; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); font: 700 17px/1 var(--font); letter-spacing: -.4px; font-variant-numeric: tabular-nums; cursor: pointer; }
.kurs-pill:hover { text-decoration: none; }
.kurs-pill .ikona { width: 14px; height: 14px; }
.banner { display: block; background: var(--accent-tint); padding: 11px 16px; border-radius: 16px; margin-bottom: 16px; color: var(--text1); transition: background-color .2s var(--spring); }
.banner:hover { text-decoration: none; background-image: linear-gradient(var(--hover), var(--hover)); }
.raqam-kartalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.raqam-karta { padding: 16px 18px; display: flex; flex-direction: column; }
.raqam-karta .yorliq { color: var(--text2); font-size: 12.5px; font-weight: 500; }
.raqam-karta strong { font-size: 24px; font-weight: 700; letter-spacing: -.8px; margin-top: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface2); color: var(--text2); }
.badge.yashil { background: var(--income-bg); color: var(--income); }
.badge.qizil { background: var(--expense-bg); color: var(--expense); }
.badge.sariq { background: var(--warning-bg); color: var(--warning); }
.badge.kok { background: var(--accent-tint); color: var(--accent); }
.badge.kulrang { background: var(--surface2); color: var(--text2); }

/* Hero (bosh sahifa) */
.hero { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 34px; margin: 0 4px 18px; }
.hero-yorliq { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); font-weight: 500; }
.hero-raqam { font-size: 52px; font-weight: 700; letter-spacing: -2.2px; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-raqam small { font-size: 22px; color: var(--text2); margin-left: 6px; letter-spacing: -.4px; font-weight: 700; }
.hero-stats { display: flex; gap: 28px; padding-bottom: 8px; flex-wrap: wrap; }
.hero-stat { font-size: 12.5px; color: var(--text2); }
.hero-stat b { display: block; font-size: 19px; color: var(--text1); letter-spacing: -.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Grafik (faqat haqiqiy ma'lumot bilan chiziladi) */
.grafik { padding: 14px 18px 10px; }
.grafik-bosh { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 22px; gap: 12px; }
.grafik-bosh span { color: var(--text2); font-weight: 500; }
.grafik-ustunlar { height: 84px; display: flex; align-items: flex-end; gap: 6px; }
.grafik-ustunlar i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--accent); position: relative; min-height: 2px; }
.grafik-ustunlar i.eski { opacity: .25; }
.grafik-ustunlar i.manfiy { background: var(--expense); opacity: .7; }
.grafik-ustunlar i.manfiy em { color: var(--expense); }
.grafik-ustunlar i em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.grafik-sanalar { display: flex; gap: 6px; margin-top: 6px; }
.grafik-sanalar span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.grafik-sanalar span.faol { color: var(--accent); font-weight: 600; }

/* Nasiya kartasi */
.nasiya-karta { padding: 12px 14px; }
.nasiya-bosh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nasiya-bosh b { font-weight: 600; }
.nasiya-summa { font-size: 19px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.nasiya-sana { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* Ro'yxat qatorlari va avatar */
.royxat { background: var(--surface1); box-shadow: var(--card-shadow); border-radius: var(--r-card); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); }
.royxat-qator { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; position: relative; color: var(--text1); }
.royxat-qator:hover { text-decoration: none; }
.royxat-qator + .royxat-qator::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: .5px; background: var(--separator); }
.royxat-nom { flex: 1; min-width: 0; }
.royxat-nom b { display: block; font-weight: 500; }
.royxat-nom small { display: block; color: var(--text2); margin-top: 2px; }
.royxat-summa { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.royxat-summa small { display: block; color: var(--text2); font-size: 11.5px; font-weight: 400; margin-top: 2px; }
.royxat-qator > .ikona { color: var(--text3); width: 14px; height: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--on-accent); flex: none; background: var(--av-7); }
.avatar[data-r="0"] { background: var(--av-0); } .avatar[data-r="1"] { background: var(--av-1); }
.avatar[data-r="2"] { background: var(--av-2); } .avatar[data-r="3"] { background: var(--av-3); }
.avatar[data-r="4"] { background: var(--av-4); } .avatar[data-r="5"] { background: var(--av-5); }
.avatar[data-r="6"] { background: var(--av-6); } .avatar[data-r="7"] { background: var(--av-7); }

/* ---------- 7. Jadvallar (4-variant: zebra, UPPERCASE sarlavha, tabular raqam, «Jami») ---------- */
.jadval-quti {
  overflow-x: auto; padding: 0 8px; background: var(--surface1); box-shadow: var(--card-shadow); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
}
.jadval-skroll { max-height: calc(100vh - 340px); max-height: calc(100dvh - 340px); min-height: 200px; overflow: auto; }
.jadval { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin-bottom: 8px; }
.jadval th, .jadval td { padding: 0 12px; text-align: left; vertical-align: middle; }
.jadval td { height: 42px; }
.jadval th {
  height: 38px; padding-top: 8px; font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; position: sticky; top: 0; z-index: 2; background: var(--surface1-solid); box-shadow: inset 0 -.5px 0 var(--separator);
}
.jadval th.son, .jadval td.son { text-align: right; }
.jadval tbody tr:where(:nth-child(odd)) td { background: var(--zebra); }
.jadval td:first-child { border-radius: 10px 0 0 10px; }
.jadval td:last-child { border-radius: 0 10px 10px 0; }
@media (hover: hover) { .jadval tbody tr:hover td { background: var(--accent-tint); } }
.jadval td.dt, .jadval th.dt, .jadval td.dt-hujayra { color: var(--income); }
.jadval td.kt, .jadval th.kt { color: var(--expense); }
.jadval td.nomi-el { min-width: 200px; }
.jadval .matn-el { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jadval tr.bosiladigan { cursor: pointer; }
.jadval tr.bosiladigan:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jadval tbody tr.tanlangan-qator td { background: var(--accent-tint); }
.jadval tbody tr.bekor td { color: var(--text3); text-decoration: line-through; }
.jadval tbody tr.bekor td.amal-el { text-decoration: none; }
.jadval tbody tr.otgan td { background: var(--expense-bg); }
.jadval tbody tr.otgan td:first-child { box-shadow: inset 3px 0 0 var(--expense); }
.jadval tbody tr.ochilish td { background: var(--surface2); font-style: italic; }
.jadval tbody tr.kurs-yoq td { background: var(--warning-bg); }
.jadval tbody tr.dam td { color: var(--text2); }
.jadval tfoot td {
  height: 40px; position: sticky; bottom: 0; z-index: 1; font-weight: 700; border-radius: 0;
  background: var(--surface1-solid); box-shadow: inset 0 .5px 0 var(--separator);
}
.jadval tfoot tr.qoldiq-qator td { bottom: 0; }
.jadval tfoot tr.jami-qator:not(:last-child) td { bottom: 40px; }
.jadval tfoot td.dt { color: var(--income); }
.jadval tfoot td.kt { color: var(--expense); }
.jadval td.jami-yorliq { text-align: right; text-transform: none; }
.jadval td.cb-el, .jadval th.cb-el { width: 28px; text-align: center; }
.jadval td.amal-el { text-align: right; white-space: nowrap; }
.jadval td.n-el { color: var(--text2); width: 44px; }
.jadval.som-rejim .c-usd { display: none; }
.varaq td.sana-el { white-space: nowrap; }
.bosh-td { text-align: center; color: var(--text2); padding: 20px !important; }
.moslash-skroll { max-height: 55vh; overflow: auto; }
.moslash th { vertical-align: top; }
.moslash td { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moslash-korinish { background: var(--surface2); border-radius: var(--r-input); padding: 10px 12px; font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--text2); margin-top: 12px; }
.moslash-korinish b, .moslash-korinish strong, .moslash-korinish .dt-matn, .moslash-korinish .kt-matn { color: var(--text1); font-weight: 600; }
.moslash-eslab { margin-top: 14px; padding-top: 14px; box-shadow: inset 0 .5px 0 var(--separator); }
.moslash-eslab .omm { font-weight: 500; }
.moslash-eslab .maydon-izoh { margin-top: 2px; }
.moslash .ustun-nom { margin-bottom: 4px; color: var(--text2); font-weight: 500; text-transform: none; letter-spacing: 0; }
.jadval input[type=text], .jadval input[type=date], .jadval input[type=month], .jadval select { height: 30px; font-size: 13px; padding: 0 8px; }
.jadval select:not([multiple]) { padding-right: 26px; }

/* ---------- 8. Tez kiritish ---------- */
.tez-forma { margin-top: 16px; padding: 14px 16px; background-image: linear-gradient(var(--accent-tint), var(--accent-tint)); }
.tez-sarlavha { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.tez-qator { display: grid; grid-template-columns: minmax(170px, 1.3fr) 112px minmax(140px, 1.2fr) 130px minmax(130px, 1fr); gap: 10px; align-items: start; }
.tez-qator input, .tez-qator select { width: 100%; }
.tez-qator input[type=text] { text-align: right; font-variant-numeric: tabular-nums; }
.tez-qator .m-sana input { text-align: left; }
.forma-ekstra { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.forma-ekstra input, .forma-ekstra select { width: 100%; }
.tez-past { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.jonli { flex: 1 1 320px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 24px; color: var(--accent); }
.jonli.hisoblanmoqda { opacity: .55; }
.jonli.xato-matn { color: var(--expense); font-weight: 500; }

/* ---------- 9. Vipiska ---------- */
.drop-zona {
  border-radius: var(--r-card); background: var(--accent-tint); text-align: center; padding: 34px 16px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--accent-tint); transition: box-shadow .2s var(--spring), background-color .2s var(--spring);
}
.drop-zona:hover, .drop-zona.ustida { box-shadow: inset 0 0 0 1.5px var(--accent); }
.drop-zona.band { cursor: progress; opacity: .7; }
.drop-sarlavha { font-size: 16px; font-weight: 600; color: var(--accent); }
.drop-izoh { color: var(--text2); margin-top: 4px; }
.partiya-malumot { display: flex; gap: 18px; flex-wrap: wrap; color: var(--text2); margin-bottom: 10px; }
.partiya-malumot b { font-weight: 600; color: var(--text1); }
.chiplar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  font: 500 13px/1 var(--font); height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--surface2); color: var(--text1);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s var(--spring);
}
.chip b { font-variant-numeric: tabular-nums; }
.chip.faol { background: var(--accent); color: var(--on-accent); }
.chip-yashil:not(.faol) { background: var(--income-bg); color: var(--income); }
.chip-qizil:not(.faol) { background: var(--expense-bg); color: var(--expense); }
.chip-sariq:not(.faol) { background: var(--warning-bg); color: var(--warning); }
.amal-panel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tanlov-soni { color: var(--text2); margin-right: auto; }
.omm-panel { gap: 18px; }
.omm { display: flex; align-items: center; gap: 8px; }
.partiya-ogoh { margin: 0 0 10px; padding-left: 18px; color: var(--warning); }
.vipiska-jadval td { vertical-align: middle; }
/* Holat: qator foni zebra bo'lib qoladi; holat faqat chap chetdagi 3px chiziq (--holat) va Holat badge'ida ko'rinadi */
.vipiska-jadval tbody tr.v-aniqlandi { --holat: color-mix(in srgb, var(--income) 55%, transparent); }
.vipiska-jadval tbody tr.v-tasdiqlandi { --holat: var(--income); }
.vipiska-jadval tbody tr.v-nomalum, .vipiska-jadval tbody tr.v-foiz_yoq, .vipiska-jadval tbody tr.v-kurs_yoq { --holat: var(--warning); }
.vipiska-jadval tbody tr.v-dublikat, .vipiska-jadval tbody tr.v-otkazildi { --holat: var(--text3); }
.jadval.vipiska-jadval tbody tr.v-otkazildi td { color: var(--text3); }
@media (min-width: 700px) {
  .jadval.vipiska-jadval tbody tr[class*="v-"] td:first-child { box-shadow: inset 3px 0 0 var(--holat, transparent); }
}
.jadval.vipiska-jadval tbody tr.saqlanmoqda td { opacity: .55; pointer-events: none; }
.vipiska-jadval .maqsad { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ixcham 12 ustunli jadval: katak ichki bo'shlig'i kichraytirilgan */
.vipiska-jadval th, .vipiska-jadval td { padding-left: 6px; padding-right: 6px; }
.vipiska-jadval th.cb-el, .vipiska-jadval td.cb-el { padding-left: 3px; padding-right: 3px; }
.ikki-qator { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.ikki-qator small { font-size: 11.5px; }
.son .ikki-qator { align-items: flex-end; }
.vipiska-jadval td.sana-el { min-width: 88px; white-space: nowrap; }
.kontragent-quti { display: flex; flex-direction: column; gap: 1px; max-width: 340px; min-width: 0; line-height: 1.25; }
.vipiska-jadval td.kontragent-el { min-width: 260px; }
.vipiska-jadval .kontragent-nom { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maqsad-qator { display: block; font-size: 11.5px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; margin-top: 2px; }
.rekvizit-qator { display: block; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.rekvizit-hisob, .rekvizit-qism { white-space: nowrap; }
.vipiska-jadval td.holat-el { min-width: 84px; white-space: nowrap; }
.natija-quti { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.natija-qator { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; }
.natija-qator small { font-size: 11.5px; }
.vipiska-jadval td.natija-el { min-width: 110px; }
.vipiska-jadval .son-input { width: 64px; text-align: right; font-variant-numeric: tabular-nums; padding: 0 8px; }
.vipiska-jadval .son-input[data-ust="kurs"] { width: 84px; }
.vipiska-jadval td.hk-el { min-width: 140px; }
.vipiska-jadval .hk-quti { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 130px; padding: 4px 0; }
.vipiska-jadval .hk-quti > :not(.badge) { flex: 1 1 100%; min-width: 0; }
.vipiska-jadval .hk-quti select, .vipiska-jadval .hk-quti input { width: 100%; }
/* Foydalanuvchi kiritadigan ustunlar: F.I.O. va Izoh */
.matn-quti { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.matn-input { width: 100%; min-width: 0; }
.fio-input, .izoh-input { width: 100%; min-width: 0; }
.vipiska-jadval td.fio-el { min-width: 120px; }
.vipiska-jadval td.izoh-el { min-width: 120px; }
.matn-quti .izoh-input { padding-right: 26px; }
.matn-korsat { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.fio-el .matn-korsat { max-width: 150px; }
td.izoh-el .matn-korsat { max-width: 170px; }
.saqlandi-belgi { position: absolute; right: 8px; top: 0; height: 30px; display: flex; align-items: center; pointer-events: none; font-size: 11px; font-weight: 600; color: var(--income); animation: saqlandi-och 1.5s var(--spring) forwards; }
.saqlandi-belgi .ikona { width: 14px; height: 14px; }
@keyframes saqlandi-och { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.son-quti { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.dt-matn { color: var(--income); font-weight: 600; }
.kt-matn { color: var(--expense); font-weight: 600; }
.xato-royxat { margin: 0; padding-left: 18px; }
.xato-royxat li { margin-bottom: 10px; }

/* ---------- 10. Combobox ---------- */
.combo { position: relative; }
.combo-input { width: 100%; }
.combo-royxat { position: fixed; z-index: 80; margin: 0; padding: 6px; list-style: none; background: var(--surface1-solid); border-radius: 14px; box-shadow: var(--shadow-pop); max-height: 260px; overflow: auto; }
.combo-el { padding: 7px 10px; cursor: pointer; display: flex; flex-direction: column; border-radius: 9px; }
.combo-el small { color: var(--text2); }
.combo-el.faol { background: var(--accent); color: var(--on-accent); }
.combo-el.faol small { color: inherit; opacity: .8; }
.combo-el.tanlangan { font-weight: 700; }
.combo-bosh { color: var(--text2); }
.combo-yoq { padding: 8px 10px; color: var(--text2); }

/* ---------- 11. Modal ---------- */
.modal-fon {
  position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px 12px; z-index: 90; overflow: auto;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: solish .2s var(--spring);
}
.modal { background: var(--surface1-solid); border-radius: 22px; width: 100%; max-width: 480px; box-shadow: var(--shadow-pop); animation: pop-ochil .2s var(--spring); }
.modal-keng { max-width: 1000px; }
.modal-bosh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 10px; }
.modal-bosh h2 { margin: 0; }
.modal-yop { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface2); color: var(--text2); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.modal-yop:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
.modal-yop .ikona { width: 16px; height: 16px; }
.modal-tana { padding: 8px 20px 18px; }
.modal-past { padding: 12px 20px 16px; box-shadow: inset 0 .5px 0 var(--separator); display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- 12. Kirish ---------- */
.kirish-sahifa { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.kirish-quti {
  width: 100%; max-width: 380px; background: var(--surface1); border-radius: 28px; padding: 32px 28px 28px;
  box-shadow: var(--card-shadow); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
}
.kirish-logo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; color: var(--on-accent); font-weight: 700; font-size: 24px; background: var(--logo-grad); }
.kirish-quti h1 { text-align: center; margin-bottom: 22px; line-height: 1.1; font-size: 26px; }
.kirish-quti h1 small { display: block; color: var(--text2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin-top: 5px; }
.kirish-forma { display: flex; flex-direction: column; gap: 14px; }
.kirish-forma input { width: 100%; height: var(--tap); font-size: 15px; }

/* ---------- 13. Maslahat tugmalari, inline tahrir ---------- */
.maslahat-tugma { align-self: flex-start; font: inherit; font-size: 11.5px; color: var(--text2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; }
.maslahat-tugma:hover { color: var(--accent); }
.usdsiz { margin-top: 10px; }
.sahifa--varaq, .sahifa--varaqlar { max-width: none; }
.tahrir-hujayra { cursor: text; }
.tahrir-hujayra:hover { background: var(--accent-tint); }
.tahrir-hujayra:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tahrir-hujayra.tahrirda { padding: 2px 4px; }
.inline-input { width: 100%; min-width: 70px; height: 30px; padding: 0 8px; font: inherit; text-align: inherit; font-variant-numeric: tabular-nums; }
.jadval td.nomi-el .inline-input { min-width: 180px; text-align: left; }
.kurs-qoy, .izoh-belgi { color: var(--text3); font-size: 11.5px; }
.izoh-kichik { display: block; color: var(--text2); font-size: 11.5px; }
.izoh-belgi { display: block; }
.jadval tr.bekor .tahrir-hujayra { cursor: default; }

/* ---------- 14. Animatsiya ---------- */
@keyframes pop-ochil { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes solish { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 15. Moslashuvchanlik ---------- */
@media (max-width: 1100px) {
  .tarmoq-2 { grid-template-columns: minmax(0, 1fr); }
  .tez-qator { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) and (min-width: 900px) {
  .yuklash { width: 36px; padding: 0; }
  .yuklash .yuklash-matn { display: none; }
}
/* 900–1499px: 10 ta pill sig'ishi uchun logo faqat «G» belgisi */
@media (max-width: 1499px) and (min-width: 900px) {
  .brand { width: 36px; }
  .brand-nom { display: none; }
}
/* Telefondan keyingi juda tor kompyuter: pill'lar ichki bo'shlig'i yana ozroq */
@media (min-width: 900px) and (max-width: 1099px) { .menyu-el { padding: 0 9px; } }

/* Telefon va planshet (< 900px): tepada sticky shisha pill-qator (hamma bo'limlar, gorizontal suriladi), ostida katta sarlavha + ikonka tugmalar */
@media (max-width: 899px) {
  .fio-input, .izoh-input { width: 100%; min-width: 0; }
  .matn-quti { width: 100%; }
  :root { --menyu-qator: calc(env(safe-area-inset-top, 0px) + 60px); }
  .panel { display: contents; }
  .panel::before, .brand { display: none; }
  .menyu-joy {
    position: sticky; top: 0; z-index: 40; flex: none; display: block; height: var(--menyu-qator);
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 0;
  }
  /* iOS 27 scroll-edge: sahifa aylantirilganda qator ostida yumshoq xiralashgan tint */
  .menyu-joy::before {
    content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s var(--spring);
    background: linear-gradient(to bottom, var(--surface1), transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); mask-image: linear-gradient(to bottom, black 60%, transparent);
  }
  .skroll .menyu-joy::before { opacity: 1; }
  .menyu { width: 100%; padding: 4px; }
  .menyu-el { height: var(--tap); padding: 0 16px; font-size: 14px; }
  .panel-ong { position: absolute; top: calc(var(--menyu-qator) + 10px); right: 16px; z-index: 30; gap: 8px; }
  .panel-ong .tugma.ikon, .yuklash { width: 40px; height: 40px; padding: 0; }
  .yuklash .yuklash-matn { display: none; }
  .yuklash .ikona { width: 18px; height: 18px; }
  .kontent { padding: 10px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .sahifa-bosh h1 { font-size: 34px; letter-spacing: -1px; flex: 1 1 100%; min-height: 40px; padding-right: 144px; overflow-wrap: anywhere; line-height: 1.18; }
  .sahifa-bosh { align-items: flex-start; margin-bottom: 14px; }
  .hero-raqam { font-size: 40px; letter-spacing: -1.6px; }
  .hero-raqam small { font-size: 18px; }
  .hero-stats { width: 100%; justify-content: space-between; gap: 12px; }
  .hero-stat b { font-size: 16px; }
  .pop-fon { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .pop-menyu { max-width: calc(100vw - 16px); }
  .toastlar { left: 16px; right: 16px; max-width: none; align-items: center; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 699px) {
  .tez-qator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jadval-skroll { max-height: none; overflow: visible; }
  .jadval-quti { box-shadow: none; background: none; padding: 0; overflow: visible; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .jadval.kartali, .jadval.kartali tbody, .jadval.kartali tfoot, .jadval.kartali tr, .jadval.kartali td { display: block; width: 100%; }
  .jadval.kartali { margin-bottom: 0; }
  .jadval.kartali thead { position: absolute; left: -9999px; }
  .jadval.kartali tbody tr, .jadval.kartali tfoot tr {
    background: var(--surface1-solid); box-shadow: var(--card-shadow); border-radius: var(--r-card); margin-bottom: 10px; overflow: hidden;
  }
  .jadval.kartali tfoot tr { background: var(--surface2); }
  .jadval.kartali td {
    display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: right; height: auto; min-height: 40px; padding: 8px 14px;
    border-radius: 0; position: static !important; box-shadow: inset 0 -.5px 0 var(--separator); background: transparent;
  }
  .jadval.kartali tbody tr.otgan td:first-child { box-shadow: inset 3px 0 0 var(--expense), inset 0 -.5px 0 var(--separator); }
  .jadval.kartali td:last-child { box-shadow: none; }
  .jadval.kartali tfoot td { box-shadow: none; background: transparent; }
  .jadval.kartali td::before { content: attr(data-label); color: var(--text2); font-size: 12px; text-align: left; flex-shrink: 0; }
  .jadval.kartali td[data-label=""]::before { content: none; }
  .jadval.kartali td:empty { display: none; }
  .jadval.kartali td.amal-el, .jadval.kartali td.cb-el { justify-content: flex-end; }
  .jadval.kartali td.n-el { width: 100%; }
  .jadval.kartali td.jami-yorliq { justify-content: flex-start; font-weight: 700; }
  .jadval.kartali td.matn-el, .vipiska-jadval .maqsad, .vipiska-jadval .kontragent-nom, .maqsad-qator { max-width: none; white-space: normal; }
  .kontragent-quti { max-width: none; align-items: flex-end; text-align: right; }
  .vipiska-jadval td.sana-el, .vipiska-jadval td.kontragent-el, .vipiska-jadval td.holat-el, .vipiska-jadval td.natija-el { min-width: 0; }
  .natija-quti { min-width: 55%; }
  .vipiska-jadval .son-input, .vipiska-jadval .son-input[data-ust="kurs"] { width: 110px; }
  .jadval.vipiska-jadval.kartali tbody tr[class*="v-"] { box-shadow: inset 3px 0 0 var(--holat, transparent), var(--card-shadow); }
  .jadval.kartali td.nomi-el, .jadval.kartali td.fio-el, .jadval.kartali td.izoh-el, .jadval.kartali td.hk-el { min-width: 0; }
  .jadval.kartali td .matn-quti { flex: 1; width: 100%; }
  .jadval.kartali td .matn-korsat { max-width: 100%; }
  .vipiska-jadval .hk-quti { min-width: 0; width: 60%; }
  .modal-fon { padding-top: 2vh; }
  .raqam-karta strong { font-size: 20px; }
  .royxat-qator + .royxat-qator::before { left: 16px; }
}

/* ---------- 16. Grafik komponentlari (js/grafik.js) va Dashboard (js/dashboard.js) ---------- */
.grafik-quti { display: flex; flex-direction: column; min-width: 0; }
.grafik-vosita { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-bottom: 4px; }
.grafik-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text2); }
.grafik-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.grafik-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--chart-1); }
.grafik-legend i.g-r-taqqos { height: 0; width: 14px; border-top: 2px dashed var(--chart-taqqos); background: none; border-radius: 0; }
.grafik-jadval-tugma { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12px; color: var(--text2); }
.grafik-jadval-tugma[aria-pressed="true"] { background-color: var(--accent-tint); color: var(--accent); }
.grafik-sahna { position: relative; outline: none; border-radius: 12px; min-width: 0; }
.grafik-sahna:focus-visible { box-shadow: 0 0 0 2px var(--accent-tint), 0 0 0 3px var(--accent); }
.grafik-sahna svg { display: block; width: 100%; animation: solish .35s var(--spring); }
.grafik-sahna svg text, .grafik-spark svg text { font: 11px/1 var(--font); fill: var(--text2); font-variant-numeric: tabular-nums; }
.grafik-sahna svg text.g-qiymat { fill: var(--text1); font-weight: 700; }
.grafik-sahna svg text.g-taqqos-yozuv { fill: var(--text2); }
.grafik-sahna svg text.g-oxirgi-yorliq { fill: var(--text1); font-weight: 700; }
.grafik-sahna svg text.g-yozuv-halo { fill: var(--text1); font-weight: 700; paint-order: stroke; stroke: var(--surface1-solid); stroke-width: 3px; stroke-linejoin: round; }
.g-grid { stroke: var(--chart-grid); stroke-width: 1; }
.g-nol { stroke: var(--text3); stroke-width: 1; }
.g-joriy-chiziq { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-taqqos-chiziq { fill: none; stroke: var(--chart-taqqos); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; }
.g-stop { stop-color: var(--chart-1); }
.g-nuqta-joriy { fill: var(--chart-1); stroke: var(--surface1-solid); stroke-width: 2; }
.g-nuqta-taqqos { fill: var(--chart-taqqos); stroke: var(--surface1-solid); stroke-width: 2; }
.g-ustun { fill: var(--chart-1); }
.g-ustun.eski { opacity: .32; }
.g-kirim { fill: var(--chart-kirim); }
.g-chiqim { fill: var(--chart-chiqim); }
.g-kursor { stroke: var(--text3); stroke-width: 1; }
.g-band { fill: var(--chart-grid); }
.grafik-tip { position: absolute; top: 4px; z-index: 3; pointer-events: none; background: var(--surface1-solid); box-shadow: var(--shadow-pop); border-radius: 12px; padding: 8px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; min-width: 110px; }
.g-tip-sarlavha { font-weight: 600; margin-bottom: 3px; }
.g-tip-qator { display: flex; align-items: center; gap: 6px; color: var(--text2); }
.g-tip-qator i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.g-tip-qator b { margin-left: auto; padding-left: 14px; color: var(--text1); font-variant-numeric: tabular-nums; }
.g-r-joriy { background: var(--chart-1); }
.g-r-taqqos { background: var(--chart-taqqos); }
.g-r-kirim { background: var(--chart-kirim); }
.g-r-chiqim { background: var(--chart-chiqim); }
.grafik-jadval-skroll { max-height: 260px; overflow: auto; }
.grafik-jadval .jadval { margin-bottom: 0; }
.grafik-spark { width: 100%; min-width: 0; }
.grafik-spark svg { display: block; width: 100%; }
.g-spark-chiziq { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-spark-nuqta { fill: var(--chart-1); stroke: var(--surface1-solid); stroke-width: 2; }
/* Gorizontal ustunlar (firmalar) */
.g-gor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.g-gor-qator { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.g-gor-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text1); }
a.g-gor-nom { color: var(--accent); }
.g-gor-iz { height: 12px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.g-gor-iz i { display: block; height: 100%; border-radius: 4px; background: var(--chart-1); }
.g-gor-qiymat { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-gor-bosh { padding: 8px 0; }

/* Dashboard tartibi */
.dash-tana { display: flex; flex-direction: column; gap: 16px; }
.dash-kpi-qator { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.karta.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-yorliq { font-size: 12.5px; color: var(--text2); font-weight: 500; }
.kpi-qiymat { font-size: 26px; font-weight: 700; letter-spacing: -.8px; margin-top: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-qiymat small { font-size: 14px; color: var(--text2); margin-left: 3px; letter-spacing: 0; font-weight: 600; }
.kpi-ozgarish { font-size: 12px; font-weight: 600; margin-top: 2px; }
.kpi-ozgarish.musbat { color: var(--income); }
.kpi-ozgarish.xira { color: var(--text2); }
.kpi-spark { margin-top: 6px; min-height: 34px; }
.dash-tarmoq { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.karta.dash-karta { padding: 14px 16px 12px; display: flex; flex-direction: column; min-width: 0; }
.dash-karta-bosh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.dash-karta-bosh span { font-size: 12px; color: var(--text2); font-weight: 500; text-align: right; }
@media (max-width: 899px) {
  .dash-kpi-qator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tarmoq { grid-template-columns: minmax(0, 1fr); }
  .kpi-qiymat { font-size: 22px; }
}

/* ---------- 17. Fallback va qulaylik sozlamalari ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shisha, .tugma.shisha { background-color: var(--surface1-solid); }
  .karta, .raqam-karta, .tez-forma, .royxat, .holat, .jadval-quti, .kirish-quti { background-color: var(--surface1-solid); }
  .panel::before { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .shisha, .tugma.shisha { background-color: var(--surface1-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .karta, .raqam-karta, .tez-forma, .royxat, .holat, .jadval-quti, .kirish-quti { background-color: var(--surface1-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .shisha, .tugma.shisha, .karta, .raqam-karta, .tez-forma, .royxat, .holat, .jadval-quti, .kirish-quti { background-color: var(--surface1-solid); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--separator); }
  .panel::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .badge, .chip { box-shadow: inset 0 0 0 1px var(--separator); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pop-menyu, .toast, .modal { animation-name: solish; }
  .saqlandi-belgi { animation: none; }
  .tugma:active { transform: none; }
  .aylana { animation-duration: 1.6s; }
}
@media print {
  body::before, .panel, .menyu-joy, .pop-menyu, .pop-fon, .tez-forma, .filtr, .toastlar { display: none !important; }
  html { background: transparent; }
  .kontent { padding: 0; }
  .jadval-quti, .karta, .raqam-karta { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- 18. Bosh sahifa tartibi ---------- */
.tarmoq-2.bosh-tarmoq { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
.bosh-chap, .bosh-ong { gap: 16px; }
.bosh-chap > .blok, .bosh-ong > .blok { margin: 0; }
.hamkor-el { display: inline-flex; align-items: center; gap: 10px; }
.nasiya-royxat { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 899px) {
  .tarmoq-2.bosh-tarmoq { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Excel tarixi (js/tarix.js) ---------- */
.tarix-manba { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.tarix-sarlavha { margin-top: 18px; }
.jadval td.matn-tarix { max-width: 340px; white-space: normal; }
.jadval tbody tr.mos-qator td { background: var(--income-bg); }
.jadval tbody tr.farq-qator td { background: var(--expense-bg); }
.tarix-oglar { margin-top: 10px; }
.excel-manzil { display: inline-flex; align-items: center; margin-left: 6px; height: 18px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--accent-tint); color: var(--accent); }
.jadval tbody tr.malumot-qator td { background: var(--zebra); color: var(--text2); }
.jadval tbody tr.xira-qator td { background: var(--zebra); color: var(--text3); }
.tarix-belgi { display: inline-block; margin: 1px 4px 1px 0; }
.tarix-umumiy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.tarix-kichik { font-size: 14px; margin: 10px 0 6px 4px; }

/* tarix.js: matn yonidagi belgi (inline marginLeft o'rniga) */
.tarix-yonida { margin-left: 6px; }

/* Namuna-qiymatli placeholder'lar haqiqiy qiymatdek ko'rinmasin */
.son-input::placeholder { font-size: 12px; }
.omm .son-input { width: 130px; }

/* ---------- Tarix: solishtirma jadval ---------- */
.tarix-skroll { overflow-x: auto; }
.tarix-jadval { min-width: 1250px; }
.tarix-jadval td.son, .tarix-jadval td.xira { white-space: nowrap; }
.tarix-jadval td.sabab-hujayra { min-width: 240px; max-width: 360px; white-space: normal; vertical-align: top; }
.sabab-qisqa { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.sabab-qisqa.ochiq { display: block; -webkit-line-clamp: unset; }
.sabab-oglar summary { cursor: pointer; color: var(--text2); font-size: 12px; }
.sabab-oglar ul { max-height: 220px; overflow: auto; margin: 4px 0 0; }
@media (max-width: 699px) { .tarix-jadval { min-width: 0; } .tarix-jadval td.sabab-hujayra { max-width: none; } }

/* ---------- Oylik haq (shartnomalar, js/shartnoma.js) ---------- */
.tablar { margin-bottom: 14px; }
.tablar a.chip { text-decoration: none; color: var(--text1); }
.tablar a.chip:hover { text-decoration: none; background-image: linear-gradient(var(--hover), var(--hover)); }
.tablar a.chip.faol { background-color: var(--accent); color: var(--on-accent); }
.oy-input { width: 160px; text-align: center; }
.jadval tbody tr.guruh-qator td { background: var(--surface2); font-weight: 600; }
.summa-input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.xato-sarlavha { color: var(--expense); font-weight: 600; margin: 8px 0 4px; }
.banner.banner-sariq, .banner-sariq { background: var(--warning-bg); }
.banner.banner-sariq:hover, .banner-sariq:hover { background-color: var(--warning-bg); background-image: linear-gradient(var(--hover), var(--hover)); }
.jadval td.davr-el { white-space: nowrap; }
.jadval td.firma-el { max-width: 220px; }

/* ---------- Qarzdorliklar ---------- */
.qarz-kpi-qator { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-qiymat.ikkinchi { font-size: 18px; margin-top: 0; letter-spacing: -.4px; }
.qarz-bolim { margin-bottom: 22px; }
.qarz-bolim .jadval td.muddat-el { min-width: 150px; }
.qarz-bolim .jadval td.izoh-el { min-width: 180px; }
.jadval td .ogoh-matn-kichik { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }
.jadval td.kechikish-el { white-space: nowrap; font-weight: 600; }
@media (max-width: 899px) {
  .qarz-kpi-qator { grid-template-columns: minmax(0, 1fr); }
}

/* Kategoriya X/R (hisob boshi) */
.badge.prefiks-belgi { display: inline-flex; margin: 1px 4px 1px 0; font-variant-numeric: tabular-nums; }
.prefiks-royxat { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.prefiks-royxat:empty { display: none; }
.prefiks-qator { font-size: 12px; color: var(--text1); font-variant-numeric: tabular-nums; }
.prefiks-qator.xira { color: var(--text2); }
.prefiks-ornatilgan { display: inline-flex; margin-left: 4px; opacity: .7; vertical-align: middle; }

/* Parol maydoni: ko'z tugmasi (K.parolKozcha) */
.parol-quti { position: relative; display: block; min-width: 0; }
.parol-quti input { padding-right: 44px; }
.parol-kozcha {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: none;
  color: var(--text2); border-radius: var(--r-pill); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--spring), background-color .2s var(--spring);
}
.parol-kozcha:hover { color: var(--text1); background-color: var(--hover); }
.parol-kozcha[aria-pressed="true"] { color: var(--accent); }

/* Ro'yxatdan o'tish (kirish sahifasi) */
.kirish-pastki { margin-top: 12px; }
.kirish-sarlavha { margin: 0 0 4px; font-size: 18px; text-align: center; }
.kirish-xabar { margin: 0 0 6px; text-align: center; color: var(--text1); line-height: 1.5; }

/* Menyu belgisi: tasdiq kutayotgan so'rovlar soni (admin) */
.menyu-belgi {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--r-pill);
  background: var(--expense); color: var(--on-accent); font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums; vertical-align: middle;
}
.menyu-belgi.burchak { position: absolute; top: -3px; right: -3px; margin: 0; }
#sozlama-tugma { position: relative; }