/* ══ SHRIFT ══════════════════════════════════════════
   O'Z SERVERIMIZDA. Sayt TASHQARIGA BITTA HAM so'rov
   yubormaydi — bu qasddan qilingan: Google Fonts ga
   ulanish (a) tashrifchi IP sini uchinchi tomonga
   beradi, (b) o'sha xizmat ishlamay qolsa sahifa
   shriftsiz qoladi, (c) Oʻzbekistondan sekin keladi.

   IBM Plex Sans — O'ZGARUVCHI shrift (wght 100→700),
   shuning uchun UCHALA og'irlik uchun BITTA fayl:
   `font-weight: 100 700` deb e'lon qilinadi. IBM Plex
   Mono esa statik — og'irlik uchun alohida fayl.

   `unicode-range` eng muhim qism: lotin yozuvidagi
   tashrifchi KIRILLCHANI YUKLAMAYDI. Shu sababli
   o'zbek tilidagi tashrifchiga 80 KB tushadi, 204 KB
   emas. `U+02BB-02BC` lotin to'plamida — «oʻ» va
   «gʻ» harflari uchun kerak.

   `font-display: optional` — `swap` EMAS. O'lchandi
   (2026-10-07): `swap` bilan CLS 0.15–0.20 edi (chegara
   0.1). Sababi: matn avval tizim shriftida chiziladi,
   Plex kelgach qayta chiziladi va harf o'lchamlari
   boshqa bo'lgani uchun sahifa 7–36px siljiydi.
   `preload` yordam berdi, lekin POYGA bo'lib qoldi:
   ba'zan shrift yetib keladi, ba'zan kelmaydi.

   `optional` da brauzer QAT'IY qoidaga o'tadi: shrift
   birinchi chizishga tayyor bo'lmasa, u SHU TASHRIFDA
   ishlatilmaydi va ALMASHTIRILMAYDI. Ya'ni siljish
   nolga tushadi. Shrift esa keshga tushadi va keyingi
   ochishda darhol ishlaydi — `preload` bilan birga
   birinchi tashrifda ham deyarli har doim yetib keladi.

   Shuning uchun zaxira shrift Plex O'LCHOVIGA
   moslanadi (pastdagi `size-adjust` bloklari): shrift
   yetib kelmagan tashrifchi ham to'g'ri tartibda
   ko'radi, keyin sahifa qayta chizilganda esa hech
   narsa qimirlamaydi. */
@font-face {
  font-family: "Plex Sans"; font-style: normal;
  font-weight: 100 700; font-display: optional;
  src: url("shrift/plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Sans"; font-style: normal;
  font-weight: 100 700; font-display: optional;
  src: url("shrift/plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Sans"; font-style: normal;
  font-weight: 100 700; font-display: optional;
  src: url("shrift/plex-sans-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal;
  font-weight: 400; font-display: optional;
  src: url("shrift/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal;
  font-weight: 400; font-display: optional;
  src: url("shrift/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal;
  font-weight: 400; font-display: optional;
  src: url("shrift/plex-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal;
  font-weight: 600; font-display: optional;
  src: url("shrift/plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal;
  font-weight: 600; font-display: optional;
  src: url("shrift/plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono"; font-style: normal;
  font-weight: 600; font-display: optional;
  src: url("shrift/plex-mono-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ═══════════════════════════════════════════════════════
   JMSMMBANK BANK — sayt uslubi
   ───────────────────────────────────────────────────────
   Bank sayti ishonch uyg'otishi kerak: to'q zamin, tinch
   ranglar, katta havo. Rang MA'NO tashiydi — yashil sog'lom
   holat, sariq ogohlantirish, qizil xavf.
   ═══════════════════════════════════════════════════════ */

/* ══ O'LCHOVGA MOSLANGAN ZAXIRA SHRIFT ═══════════════
   Shrift yetib kelmagan (yoki `optional` sababli bu
   tashrifda ishlatilmaydigan) holat uchun.

   Tizim shriftining qator balandligi va harf kengligi
   Plex dan boshqa — shuning uchun tartib siljiydi.
   Bu yerda zaxiraga Plex NING O'LCHOVLARI majburan
   beriladi (fontTools bilan o'qilgan, 2026-10-07):
       unitsPerEm 1000, ascent 1025, descent −275,
       lineGap 0  →  ascent 102.5%, descent 27.5%.

   `size-adjust` — harf KENGLIGINI tenglashtiradi,
   shunda qator xuddi shu joyda tugaydi va matn boshqa
   joyda bo'linmaydi. Qiymatlar BRAUZERDA o'lchangan
   (har yuzning o'z blokida yozilgan), jadvaldagi
   bitta harf kengligidan hisoblanmagan: birinchi
   urinishda «H» harfidan hisoblangan edi va ikkala
   qiymat ham noto'g'ri chiqdi.

   DIQQAT: `local()` faqat KOMPYUTERDA O'RNATILGAN
   shriftni oladi, tarmoqqa chiqmaydi — saytning «0
   tashqi so'rov» qoidasi buzilmaydi. */
@font-face {
  font-family: "Plex Sans zaxira";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"),
       local("DejaVu Sans"), local("Roboto");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  /* BRAUZERDA O'LCHANGAN (2026-10-07), jadvaldan
     hisoblanmagan. Bir xil matn 100px da:
         Plex Sans        2231.7 px
         Arial / Segoe UI / DejaVu Sans / system-ui
                          2458.5 px  (hammasi bir xil)
     2231.7 / 2458.5 = 90.8%.

     Avval 98% deb qo'yilgan edi — «H» harfining
     kengligi jadvalidan hisoblangan. Bu XATO bo'ldi:
     bitta harf butun matn kengligini bermaydi (bo'shliq,
     kerning va boshqa harflar boshqacha). O'lchov
     ko'rsatdi: zaxira 7% kengroq qolib ketgan va menyu
     baribir siljiyotgan edi. */
  size-adjust: 91%;
}
@font-face {
  font-family: "Plex Mono zaxira";
  src: local("Consolas"), local("SF Mono"), local("Menlo"),
       local("DejaVu Sans Mono"), local("Liberation Mono");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  /* BRAUZERDA O'LCHANGAN (2026-10-07). Bir xil xesh
     satri 100px da:
         Plex Mono            1620.0 px
         Consolas             1616.5 px
         DejaVu Sans Mono     1625.5 px
         Liberation Mono      1616.5 px
     Ya'ni mashina yozuvlari KENGLIGI deyarli bir xil —
     moslash KERAK EMAS.

     Avval 109% deb qo'yilgan edi («H» kengligi
     jadvalidan). O'lchov bu XATO ekanini ko'rsatdi:
     zaxira 9% KENGAYTIRILIB, siljish kuchaygan edi.
     Shuning uchun 100%: faqat qator balandligi
     tenglashtiriladi, kenglikka tegilmaydi. */
  size-adjust: 100%;
}

:root {
  /* ══ RANG — «ISBOT» yo'nalishi (2026-10-07) ═════════
     OLDIN: `#070B14` (qoraga yaqin) + `#6366F1` (indigo).
     Bu juftlik sun'iy intellekt chizadigan odatiy sayt
     ko'rinishi — yuzlab bir xil saytda uchraydi va bank
     o'zini ajratib ko'rsatolmaydi.

     ENDI: issiq grafit yer + JEZ urg'u. Jez bankda
     tasodifiy tanlanmagan — u guvoh muhri, notarius
     plombasi, defter qulfi rangi. Bank halolligini
     ISBOTLAYDIGAN muassasa, uning belgisi ham muhr
     bo'lishi mantiqan to'g'ri.

     Neytral ranglar jez tomon ozgina OG'DIRILGAN
     (ko'kish-kulrang emas, issiq-kulrang): shunda rang
     tanlangani ko'rinadi, standart kulrang emas.

     MA'NO ranglari (yashil/qizil/sariq) urg'udan AYRI
     turadi: narx o'sdi/tushdi degani brendga aloqasiz
     va jez bilan aralashib ketmasligi kerak. Shu sababli
     ogohlantirish sarig'i `#FBBF24` dan `#E2863C` ga
     (apelsin tomon) ko'chirildi — jez `#C2A14D` bilan
     yonma-yon turganda farqi ko'rinsin. */
  --fon: #14130F;
  --fon-2: #1A1813;
  --panel: #1F1C16;
  --panel-2: #272319;
  --chegara: #332E22;
  --matn: #F0EDE4;
  --izoh: #A69E8A;
  --asosiy: #C2A14D;
  --asosiy-2: #DFC478;
  --yashil: #5FBF8A;
  --sariq: #E2863C;
  --qizil: #E2655C;
  --lenta-boyi: 38px;     /* pastdagi narx lentasi balandligi */
  /* SAHIFA KENGLIGI. Bank egasi topdi: «sayt kompyuter
     ekraniga moslashmayapti — chrome ekrani katta,
     malumotlar esa kichikroq ekranda». Sababi: hamma
     qismning kengligi 1180px da QOTIB qolgan edi, pastdagi
     narx lentasi esa butun ekranni egallaydi — shu farq
     ko'zga tashlanadi.

     Endi kenglik ekranga qarab o'sadi (pastdagi
     `@media (min-width: …)` bloklarida). */
  --kenglik: 1180px;
  /* ══ SHRIFT ════════════════════════════════════════
     OLDIN tizim shrifti edi — ya'ni sayt har kompyuterda
     BOSHQA ko'rinardi va o'z yuzi yo'q edi.

     ENDI IBM Plex. Tanlash sababi: u IBM uchun
     muassasa shrifti sifatida chizilgan — grotesk, lekin
     harf uchlari insoniy; raqamlari aniq va tor. Bankka
     mos. Inter va Space Grotesk dan ataylab voz kechildi
     (ular «odatiy xavfsiz tanlov» bo'lib ketgan).

     `--sarlavha` — MASHINA yozuvi. Mavzudan kelib
     chiqqan qaror: bank o'z halolligini XESH bilan
     isbotlaydi, xesh esa mashina yozuvida yoziladi.
     Shuning uchun asosiy da'vo va kichik yorliqlar ham
     shu yozuvda. FAQAT ularda — qolgan joyda sayt
     terminal oynasiga aylanib ketardi. */
  --shrift: "Plex Sans", "Plex Sans zaxira", system-ui, sans-serif;
  --raqam: "Plex Mono", "Plex Mono zaxira", ui-monospace, monospace;
  --sarlavha: "Plex Mono", "Plex Mono zaxira", ui-monospace, monospace;

  /* ══ O'LCHOV SHKALASI ══════════════════════════════
     Oldin o'lcham har joyda qo'lda yozilgandi (26px,
     19px, 15px, 13px…) — bir-biriga bog'liq emas.
     Endi bitta shkala: ekran kichraysa sarlavha ham
     kichrayadi, lekin matn 15px dan tushmaydi
     (telefonda o'qilishi kerak). */
  --t-xl: clamp(32px, 5.2vw, 58px);
  --t-l: clamp(23px, 3vw, 34px);
  --t-m: 20px;
  --t-s: 15px;
  --t-xs: 13px;
  /* 12px — PASTKI chegara. Loyihaning mobil sinovi
     shundan kichik matnni rad etadi: telefonda
     11.5px yorliq o'qilmaydi. */
  --t-yor: 12px;
}

/* Katta monitorlarda sahifa kengayadi. Cheklov baribir
   qoladi: juda uzun qator (120+ belgi) o'qishga qiyin. */
@media (min-width: 1500px) { :root { --kenglik: 1380px; } }
@media (min-width: 1800px) { :root { --kenglik: 1600px; } }
@media (min-width: 2200px) { :root { --kenglik: 1820px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* ══ SHAKL ELEMENTLARI SAYT SHRIFTINI OLADI ══════════
   NUQSON (brauzerda o'lchangan, 2026-10-07): menyudagi
   «Kirish», «Ro'yxatdan o'tish», «Kabinet» tugmalari
   hisoblangan shrifti ARIAL edi, qolgan sayt esa Plex
   Sans. Sababi: brauzerning o'z uslubi `button`,
   `input`, `select`, `textarea` ga ALOHIDA shrift
   qo'yadi va u MEROSdan kuchli — `body` dagi shrift
   bu elementlarga yetib kelmaydi.

   `font: inherit` butun shrift tavsifini (familiya,
   o'lcham, og'irlik, qator balandligi) otasidan oladi.
   Shu sababli u har bir tugma qoidasidan OLDIN turishi
   kerak — keyingi qoidalar o'lchamni o'zi belgilaydi. */
/* ══ TARJIMA KUTILAYOTGANDA ══════════════════════════
   `til-oldin.js` tashrifchining tili o'zbek EMASligini
   aniqlasa, `<html>` ga shu sinfni qo'yadi. Sahifa
   vaqtincha ko'rinmas bo'ladi — `til.js` tarjimani
   tugatib sinfni olib tashlashi bilan to'g'ri tilda
   BIRDAN ochiladi.

   NEGA `visibility`, `display` EMAS: `visibility:
   hidden` da element joyini EGALLAB turadi, demak
   brauzer tartibni allaqachon hisoblab qo'yadi va
   ko'ringanda hech narsa siljimaydi. `display: none`
   da esa tartib qaytadan hisoblanardi.

   O'zbek tilidagi tashrifchida bu sinf HECH QACHON
   qo'yilmaydi — ya'ni ko'pchilik uchun sahifa
   ilgarigidek darhol chiziladi.

   Agar `til.js` yuklanmasa, `til-oldin.js` ichidagi
   1200-ms taymer sinfni majburan olib tashlaydi —
   sahifa ko'rinmas qolib ketmaydi. */
.til-kutilmoqda body { visibility: hidden; }

button, input, select, textarea, optgroup {
  font: inherit;
  letter-spacing: inherit;
}

body {
  background: var(--fon);
  color: var(--matn);
  font-family: var(--shrift);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Pastdagi narx lentasi QADALGAN — sahifa oxiridagi matn
     uning ostida qolib ketmasligi uchun joy qoldiriladi. */
  padding-bottom: var(--lenta-boyi);
}

a { color: inherit; text-decoration: none; }

/* ── tepa ──────────────────────────────────────────── */
.tepa {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--fon-2), var(--fon));
  border-bottom: 1px solid var(--chegara);
  padding-bottom: 72px;
  overflow: hidden;
}
/* Matn fondan YUQORIDA. `isolation: isolate` bilan birga —
   fon qatlamlari sahifaning boshqa joyiga chiqib
   ketmaydi. */
.tepa > .qahramon,
.tepa > .ishonch { position: relative; z-index: 1; }

/* ══ QAHRAMON FONI ══════════════════════════════════
   Bank egasi: «dizayn juda sodda, hech qanday orqa fon,
   rasm yoki animatsiya yo'q» (2026-10-07).

   Uch qatlam qo'shildi. HAMMASI brauzerda chiziladi —
   birorta rasm fayli yuklanmaydi. Bu muhim: sayt
   tashqariga NOL so'rov yuboradi va O'zbekistondagi
   sekin ulanishda ham darhol ochiladi.

   Harakat `transform` va `opacity` da — brauzer ularni
   videokartada bajaradi, ya'ni sahifa sekinlashmaydi.
   `width`/`top` kabi xossalar bo'lsa har kadrda butun
   tartib qayta hisoblanardi. */
.tepa-fon {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── 1-qatlam: suzuvchi yorug'lik dog'lari ────────── */
.tepa-shula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}
.shula-1 {
  width: 780px; height: 520px;
  top: -200px; right: -120px;
  background: radial-gradient(ellipse at center,
    rgba(194, 161, 77, .30), transparent 68%);
  animation: shula-suz-1 26s ease-in-out infinite;
}
.shula-2 {
  width: 620px; height: 440px;
  top: 40px; left: -180px;
  background: radial-gradient(ellipse at center,
    rgba(95, 191, 138, .17), transparent 68%);
  animation: shula-suz-2 34s ease-in-out infinite;
}
.shula-3 {
  width: 700px; height: 380px;
  bottom: -160px; left: 38%;
  background: radial-gradient(ellipse at center,
    rgba(223, 196, 120, .16), transparent 70%);
  animation: shula-suz-3 30s ease-in-out infinite;
}
@keyframes shula-suz-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  50%      { transform: translate3d(-60px, 40px, 0) scale(1.12); opacity: 1; }
}
@keyframes shula-suz-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  50%      { transform: translate3d(70px, -30px, 0) scale(1.08); opacity: 1; }
}
@keyframes shula-suz-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
  50%      { transform: translate3d(-80px, -24px, 0) scale(1.1); opacity: .95; }
}

/* ── 2-qatlam: defter katagi ──────────────────────── */
.tepa-setka {
  position: absolute;
  /* Ekrandan KATTAROQ: siljiganda chetida bo'shliq
     ko'rinib qolmasligi uchun. */
  inset: -60px;
  background-image:
    linear-gradient(rgba(194, 161, 77, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 161, 77, .07) 1px, transparent 1px);
  background-size: 54px 54px;
  /* Chetlari so'nib ketadi — katak to'rtburchak bo'lib
     ajralib turmasin. */
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 36% 32%,
                                      #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 70% at 36% 32%,
                              #000 10%, transparent 76%);
  animation: setka-sil 48s linear infinite;
  will-change: transform;
}
@keyframes setka-sil {
  from { transform: translate3d(0, 0, 0); }
  /* Aynan bitta katak masofasi — takrorlanish SEZILMAYDI. */
  to   { transform: translate3d(54px, 54px, 0); }
}

/* ── 3-qatlam: BTC ning haqiqiy to'lqini ──────────── */
.tepa-tolqin {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 260px;
  display: block;
}
#tolqin-chiziq {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: tolqin-chizil 3.2s cubic-bezier(.25, .7, .3, 1) .35s forwards;
}
@keyframes tolqin-chizil { to { stroke-dashoffset: 0; } }
#tolqin-maydon {
  opacity: 0;
  animation: tolqin-toldir 1.6s ease-out 1.5s forwards;
}
@keyframes tolqin-toldir { to { opacity: 1; } }

/* ══ QAHRAMON MATNINING KIRISHI ═════════════════════
   Yuqoridan pastga, ketma-ket. `--navbat` HTML da
   beriladi: yorliq → sarlavha → matn → tugmalar →
   ko'rsatkichlar → ishonch qatori.

   `backwards` SHART: kechikish vaqtida element
   boshlang'ich holatda (ko'rinmas) turishi kerak,
   aks holda avval ko'rinib, keyin yo'qolib qayta
   chiqardi. */
.kiradi-tepa {
  opacity: 0;
  /* `both` — `backwards` EMAS. Ikkalasi ham kerak:
       backwards — kechikish vaqtida element boshlang'ich
                   holatda (ko'rinmas) turadi;
       forwards  — animatsiya TUGAGACH oxirgi holatda
                   (ko'rinadigan) QOLADI.

     Faqat `backwards` yozilgan edi va natijada matn
     chiqib, darhol yana yo'qolardi: animatsiya tugashi
     bilan element asosiy uslubiga — `opacity: 0` ga
     qaytardi. Brauzerda ko'rildi (2026-10-07): butun
     qahramon matni ko'rinmay qoldi. */
  animation: tepa-kir .7s cubic-bezier(.22, .7, .3, 1) both;
  animation-delay: calc(var(--navbat, 0) * 110ms + 120ms);
}
@keyframes tepa-kir {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Urg'u ostidagi jez chiziq CHIZILADI — sarlavha
   kelgandan keyin. */
.qahramon h1 em {
  background-image: linear-gradient(var(--asosiy), var(--asosiy));
  background-repeat: no-repeat;
  background-size: 0 2px;
  animation: urgu-chiz .8s cubic-bezier(.25, .7, .3, 1) .75s forwards;
}
@keyframes urgu-chiz { to { background-size: 100% 2px; } }

@media (prefers-reduced-motion: reduce) {
  /* Harakatni o'chirgan tashrifchi: fon QOLADI (u
     bezak, chalg'itmaydi), lekin hech narsa
     QIMIRLAMAYDI va hamma matn darhol ko'rinadi. */
  .tepa-shula, .tepa-setka,
  #tolqin-chiziq, #tolqin-maydon { animation: none; }
  #tolqin-chiziq { stroke-dashoffset: 0; }
  #tolqin-maydon { opacity: 1; }
  .kiradi-tepa { opacity: 1; animation: none; }
  .qahramon h1 em { animation: none; background-size: 100% 2px; }
}

/* Panelning O'ZI — ekran bo'ylab, ichidagi tartib esa
   `.menyu-ichi` da (yopishqoq panel yonlaridan sahifa
   ko'rinib o'tmasligi uchun). */
.menyu-ichi {
  max-width: var(--kenglik);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* `nowrap` — logotip IKKI QATORGA bo'linmasligi uchun.
   O'lchandi (2026-10-07): menyu havolalari zaxira
   shriftda kengroq bo'lib ketganda logotip siqilib
   «JMSMM / BANK» bo'lib ikkiga tushardi va menyu paneli
   89px dan 106px ga o'sardi — undan pastdagi butun
   sahifa 17px siljirdi.

   Shrift moslandi, lekin bu himoya QOLDIRILADI: bank
   nomi hech qanday holatda ikkiga bo'linmasligi kerak —
   uzun tarjima kelsa ham, foydalanuvchi shriftni
   kattalashtirsa ham. `flex: none` esa logotipni
   siqilishdan saqlaydi. */
.logo {
  font-size: 19px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
  flex: none;
}
.logo span { color: var(--asosiy-2); }

.menyu-yollar { display: flex; align-items: center; gap: 26px; }
/* ══ MENYU HECH QACHON QATORGA BO'LINMAYDI ══════════
   NUQSON (brauzerda kadr-kadr o'lchangan, 2026-10-07):
   «Ro'yxatdan o'tish» tugmasi joyga sig'may ikki
   qatorga tushib qolardi — shunda menyu paneli 51px
   dan 76px ga o'sardi va undan pastdagi butun sahifa
   25px siljirdi (CLS 0.185, chegara 0.1).

   Bu shrift kelishiga bog'liq POYGA edi: matn
   kengligi bir necha foiz o'zgarsa yetarli. Shrift
   o'lchovi moslandi (`size-adjust`), lekin himoya
   SHU YERDA ham qoldiriladi — chunki kenglik
   boshqa sabablardan ham o'zgaradi: uzun tarjima,
   foydalanuvchi shriftni kattalashtirishi, boshqa
   operatsion tizim.

   `min-height` esa qatorning o'zini qotiradi: ichidagi
   nimadir o'zgarsa ham panel balandligi o'zgarmaydi,
   demak sahifa siljimaydi. */
.menyu-yollar a,
.menyu-yollar button,
.menyu-yollar .tugma { white-space: nowrap; }
.menyu-yollar { min-height: 51px; }
/* BOSH MENYU NOMLARI — CHIZIQLI OVALSIMON CHEGARA
   (1.631-qoida). Bank egasi (2026-10-23): «bosh menyu
   nomlariga ham chiziqli ovalsimon chegaralar qo'yilsa
   yanada jozibali bo'lar edi».

   Ilgari ular shunchaki havola edi: chegara yo'q, hover
   faqat rangni o'zgartirardi. Endi har bir nom o'z
   ovalida va sichqoncha ostida chegarasi jezga aylanadi.

   `--lenta-boyi` kabi menyu BALANDLIGI o'zgarmasligi
   kerak (CLS poygasi, yuqoridagi izoh): shuning uchun
   to'ldirish kichik va `min-height: 51px` o'z joyida
   qoladi. */
.menyu-yollar a {
  color: var(--izoh);
  font-size: 15px;
  padding: 7px 14px;
  border: 1px solid var(--chegara);
  border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
}
.menyu-yollar a:hover {
  color: var(--matn);
  border-color: var(--asosiy);
  background: rgba(194, 161, 77, .10);
}
.menyu-yollar a[aria-current="page"],
.menyu-yollar a.joriy {
  color: var(--matn);
  border-color: var(--asosiy);
}
/* Menyuda oval nomlar zich turmasin */
.menyu-yollar { gap: 14px; }

/* MENYU TUGMASI (telefon) — CHEGARALI (1.631-qoida).
   Ilgari `border: none` edi va o'z `:hover` i yo'q edi:
   umumiy `filter: brightness()` esa SHAFFOF tugmada
   hech narsa ko'rsatmaydi — ya'ni tugma reaksiya
   bermayotgandek ko'rinardi. */
.menyu-tugma {
  display: none; background: rgba(194, 161, 77, .10);
  border: 1px solid var(--chegara); color: var(--matn);
  font-size: 24px; cursor: pointer;
  transition: background .15s, border-color .15s;
  /* BARMOQ uchun o'lcham. O'lchandi (2026-09-29): tugma
     22×28 px edi — telefonda bosish qiyin. Tavsiya
     44×44 px (Apple va Google ko'rsatmasi). */
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  border-radius: 10px;
}

.menyu-tugma:hover {
  background: rgba(194, 161, 77, .20);
  border-color: var(--asosiy);
}

/* ── BOSILADIGAN HAR BIR NARSA ───────────────────────────
   Bank egasining talabi (2026-09-29): «tugmalar sichqoncha
   borganda belgi berishini unutma».

   Uchta narsa BIRGA bo'lishi kerak:
     1. `cursor: pointer` — sichqoncha ko'rsatkichi o'zgaradi;
     2. `:hover` — rang yoki fon o'zgaradi (ko'z bilan ko'rinadi);
     3. `:focus-visible` — klaviatura bilan yurganda ham
        qayerdaligi ko'rinadi (sichqonchasiz foydalanuvchi).

   Bu YAGONA joyda turadi: yangi tugma qo'shilganda uni
   qayta yozish shart emas. */
button,
.tugma,
summary,
[role="button"],
[data-kab],
[data-oyna],
[data-oyna-yop],
.kab-yol,
.royxat-jadval tbody tr,
label.tanlov,
select {
  cursor: pointer;
}

/* O'chirilgan tugma — bosib bo'lmasligi KO'RINIB tursin */
button:disabled,
.tugma.ochirilgan,
button[disabled] {
  cursor: not-allowed;
  opacity: .55;
}

/* Har qanday tugma sichqoncha ostida o'zgaradi. Alohida
   sinflarning o'z `:hover` i bundan kuchliroq — bu esa
   «hech bo'lmaganda shu» darajasi. */
button:hover:not(:disabled),
[role="button"]:hover {
  filter: brightness(1.08);
  /* `brightness` SHAFFOF tugmada hech narsa ko'rsatmaydi
     (1.631-qoida): o'zgaradigan narsa yo'q. Shuning uchun
     zaxira qoidaga chegara rangi ham qo'shildi — chegarasi
     bor har bir tugma sichqoncha ostida ANIQ javob
     beradi. */
  border-color: var(--asosiy);
}
button:active:not(:disabled) { transform: translateY(1px); }

/* Klaviatura bilan yurganda ham ko'rinsin */
button:focus-visible,
.tugma:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--asosiy-2);
  outline-offset: 2px;
}

/* JEZ ustida matn QORA. O'lchandi (axe-core, 2026-10-07):
   oq matn (#fff) jez fonda (#C2A14D) kontrast 2.47 beradi —
   WCAG AA uchun 4.5 kerak, ya'ni yorug' kunda telefonda
   o'qilmaydi. `var(--fon)` esa 8.6 : 1 beradi.
   Oldingi ko'k urg'uda (#6366F1) oq to'g'ri edi — rang
   o'zgargach matn rangi ham o'zgarishi kerak. */
/* ASOSIY TUGMA — TO'Q (jez) va CHEGARALI (1.631-qoida).
   Bank egasi (2026-10-23): «asosiy tugmalar to'q rangda,
   boshqa ranglar och yorqin ranglarda berilsin. har bir
   tugmada tugma chegarasi bo'lsin». */
.tugma {
  display: inline-block;
  background: var(--asosiy);
  color: var(--fon) !important;
  padding: 11px 20px;
  border: 1px solid var(--asosiy-2);
  border-radius: 11px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .12s, background .15s, border-color .15s;
}
.tugma:hover {
  background: var(--asosiy-2); border-color: var(--matn);
  transform: translateY(-1px);
}
/* IKKINCHI DARAJALI TUGMA — SHAFFOF EMAS, OCH YORQIN.
   Sayt foni to'q, shuning uchun «och yorqin» degani
   fondan YORQINROQ jez parda: tugma yozuvdan ajralib
   turadi, lekin asosiy tugmani bosib ketmaydi. */
.tugma.tinch {
  background: rgba(194, 161, 77, .14);
  border: 1px solid var(--asosiy);
  color: var(--matn) !important;
}
.tugma.tinch:hover {
  border-color: var(--asosiy-2);
  background: rgba(223, 196, 120, .24);
}
.tugma.katta { padding: 15px 28px; font-size: 16px; }
/* KYC YORDAMCHI TUGMALARI (1.438-qoida) — bank egasining
   talabi: «Pasportni o'qish va jonli selfi olish
   tugmalariga biror rang berish yaxshi edi». Ilgari ular
   `tinch` (shaffof) edi va mijoz ularni bosiladigan deb
   o'ylamasdi. Rang ASOSIY tugmadan farq qiladi: bu
   yordamchi qadam, yakuniy «Yuborish» emas. */
/* KATTA HARF (1.438-qoida). CSS KO'RINISHNI o'zgartiradi,
   serverga ketadigan qiymatni esa `kabinet.js` ko'taradi —
   ikkisi birga: mijoz yozayotganda darhol ko'radi, bankga
   esa haqiqatda KATTA harfda boradi. */
input.katta-harf { text-transform: uppercase; }

/* ══ USTUN KENGLIGI TORTGICHI (1.454-qoida) ═══════════
   Bank egasi: «Saytda bozor bo'limida ustunlar kengligi
   sozlanmasligiga ko'zim tushdi». Sarlavha katagining
   o'ng chekkasida ko'rinmas yo'lak turadi — sichqoncha
   ustiga kelganda belgi o'zgaradi. */
table.jadval thead th, table.royxat-jadval thead th {
  position: relative;
}
.ustun-tortgich {
  position: absolute;
  top: 0;
  right: -7px;
  /* BARMOQ UCHUN KENGROQ (1.465-qoida): 10 piksellik
     maydonni telefonda topib bo'lmasdi. */
  width: 14px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  z-index: 2;
}
/* AJRATUVCHI CHIZIQ DOIMO KO'RINADI (1.465-qoida).
   Ilgari `opacity: 0` edi va faqat sichqoncha ustiga
   kelganda chiqardi. Natijada bank egasi jadvalda hech
   qanday chiziq ko'rmadi va «ustunni sozlash yo'q» deb
   hisobladi — imkoniyat BOR edi, lekin KO'RINMASDI.
   Telefonda esa `:hover` umuman bo'lmaydi, ya'ni
   chiziqni ko'rishning iloji ham yo'q edi. */
.ustun-tortgich::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 6px;
  width: 2px;
  height: 64%;
  background: var(--chegara);
  opacity: .9;
  transition: background .12s, width .12s;
}
.ustun-tortgich:hover::after,
.ustun-tortgich:focus-visible::after {
  width: 3px; background: var(--asosiy);
}
.ustun-tortgich:focus-visible {
  outline: 2px solid var(--asosiy);
  outline-offset: -1px;
}
/* Tortilayotganda butun sahifada matn belgilanib
   ketmasin va belgi bir xil qolsin. */
body.ustun-tortilmoqda { cursor: col-resize; user-select: none; }

/* PROFILIM jadvali (1.447-qoida): chap ustun — maydon
   nomi (xira), o'ng ustun — qiymat (yorqin). */
.royxat-jadval td.qalin { color: var(--matn); font-weight: 600; }

/* NATIJA OYNASI (1.444-qoida): muvaffaqiyat va xatolik
   BITTA oynada ko'rsatiladi, lekin adashtirmasligi uchun
   xatolik sarlavhasi QIZIL. */
#oyna-xabar.xato .oyna-quti h3 { color: var(--qizil); }

/* ── MUVAFFAQIYAT — YASHIL (1.536-qoida) ─────────────
   Bank egasi: «Muvaffaqiyatli ro'yxatdan o'tdingiz so'zi
   qizil rangda chiqyapti. Qizil va taqiq belgisi…
   misol uchun yashil».

   Rang YAKKA xabarchi emas: sarlavha matni ham
   («Muvaffaqiyatli…» / «Xatolik») farq qiladi, ya'ni
   rangni ajratmaydigan odam ham tushunadi. */
#oyna-xabar.muvaffaqiyat .oyna-quti h3 { color: var(--yashil); }

/* ── XABAR MATNIDA QATORLAR SAQLANADI (1.591-qoida) ──
   NUQSON (bank egasining xabari, 2026-10-22): «Hamyon
   balansi … TRON · TSrhb8… Balans: 0.00 USDT. Manzil va
   balns alohida belgilab ko'rsatilsa chiroyli chiqardi».

   Sababi: kodda matn ATAYLAB ikki qatorga bo'lingan
   (`"%1 · %2\n\nBalans: %3"`), lekin HTML yangi qatorni
   oddiy bo'shliqqa aylantiradi va hammasi BITTA qatorga
   yopishib qolardi.

   MIJOZ VA XODIM DASTURLARIDA bu nuqson YO'Q: ular
   `QMessageBox` ishlatadi va Qt `\n` ni o'zi hurmat
   qiladi. Ya'ni ayni bitta matn saytda boshqacha
   ko'rinardi.

   `pre-line` (`pre-wrap` emas): yangi qatorlar
   saqlanadi, lekin ketma-ket bo'shliqlar siqiladi —
   tarjima matnlarida tasodifiy qo'sh bo'shliq bo'lsa
   u ko'rinmaydi. Uzun matn baribir o'raladi.

   Bu BITTA xabarga emas, HAMMA xabar oynasiga tegishli:
   masalan bandlar ro'yxati («\n• …») ham shu oynada
   ko'rsatiladi va u ham yopishib qolardi. */
#xabar-matn { white-space: pre-line; }

/* KYC kartasi RAD etilganda — qizil chegara. */
#kyc-holat-karta.rad { border-color: var(--qizil); }
#kyc-holat-karta.rad #kyc-holat-belgi { color: var(--qizil); }

.tugma.kok {
  background: #0E7490;
  border: 1px solid #0E7490;
  color: #FFFFFF !important;
}
.tugma.kok:hover { background: #0891B2; border-color: #0891B2; }
.tugma.selfi {
  background: #6D28D9;
  border: 1px solid #6D28D9;
  color: #FFFFFF !important;
}
.tugma.selfi:hover { background: #7C3AED; border-color: #7C3AED; }

/* XIZMAT HALI OCHILMAGAN. Tugma o'chirilmaydi — bosilganda
   sabab aytiladi. Lekin ko'rinishidan «hozir emas» ekani
   bilinib turadi. */
.tugma.kutilmoqda {
  background: transparent;
  border: 1px dashed var(--chegara);
  color: var(--izoh) !important;
}
.tugma.kutilmoqda:hover {
  border-color: var(--sariq);
  color: var(--sariq) !important;
  background: rgba(245,158,11,.08);
}
.xizmat-holat { color: var(--sariq); margin-top: 10px; }

/* ── «+» BILAN QO'SHISH QATORI ───────────────────────
   Bank egasining talabi: ro'yxat yonida «+» tursin va u
   bosilganda KICHIK OYNA ochilib, ma'lumot shu yerda
   to'ldirilsin. Shu bilan mijoz boshqa bo'limga o'tib
   ketmaydi — e'lon shakli joyida qoladi. */
.qator-qoshish {
  display: flex; gap: 8px; align-items: center;
}
.qator-qoshish select { flex: 1; min-width: 0; }
.tugma.yangi-qosh {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  padding: 0;
  font-size: 20px; line-height: 1;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── qahramon ──────────────────────────────────────── */
/* ══ QAHRAMON — BITTA USTUN ═════════════════════════
   O'ng tomonda karta turardi. Avval o'ylab topilgan
   «hisobim» raqamlari bilan, keyin jurnal xeshlari,
   keyin jonli bozor narxlari. Bank egasi uchalasini
   ham rad etdi (2026-10-07): bosh sahifada bunday
   quti sahifa yozuvlarini buzadi.

   Shuning uchun qahramon ikki ustunga bo'linmaydi.
   Lekin da'vo yolg'iz qolib, o'ng yarmi bo'sh ko'rinib
   turmasligi kerak — pastdagi uch ko'rsatkich va
   ishonch qatori BUTUN kenglikka yoyiladi va qahramon
   tagini mahkamlab turadi. */
.qahramon {
  max-width: var(--kenglik);
  margin: 0 auto;
  /* 10px — oldin 56px edi. Menyu bilan sarlavha
     orasida 92px bo'sh joy ochilib qolgandi
     (brauzerda o'lchangan, 2026-10-07): sahifa
     ochilganda avval bo'm-bo'sh maydon, keyin matn
     ko'rinardi. Bank egasi ikki marta aytdi.

     Endi oraliq 42px: menyuning o'z pastki bo'shlig'i
     (20px) va yorliqning qator balandligi ham shu
     oraliqqa qo'shiladi, shuning uchun padding kichik
     bo'lsa ham matn menyuga yopishib qolmaydi. */
  padding: 10px 24px 0;
}

.yorliq {
  font-family: var(--sarlavha);
  font-size: var(--t-yor);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--asosiy);
  margin-bottom: 12px;
}

/* ══ ASOSIY DA'VO ═══════════════════════════════════
   MASHINA yozuvida. Mavzudan kelib chiqqan qaror: bank
   o'z halolligini XESH bilan isbotlaydi, xesh esa
   mashina yozuvida yoziladi — sarlavha ham o'sha
   yozuvda bo'lishi da'voni kuchaytiradi.

   Mashina yozuvi harflari KENG, shuning uchun:
     * `letter-spacing: -.02em` — ozgina siqiladi;
     * o'lcham `--t-xl` bilan ekranga moslashadi;
     * `line-height: 1.08` — qatorlar yaqin turadi,
       aks holda mashina yozuvi tarqoq ko'rinadi. */
.qahramon h1 {
  font-family: var(--sarlavha);
  font-size: var(--t-xl);
  font-weight: 600;
  /* 1.18 — oldin 1.08 edi. Sarlavha telefonda to'rt
     qatorga bo'linganda urg'u ostidagi jez chiziq
     KEYINGI QATORGA tegib ketardi (brauzerda ko'rildi,
     2026-10-07): qatorlar juda zich turgani uchun
     chiziqqa joy qolmasdi. Mashina yozuvida qatorlar
     tabiiy ravishda zich turadi, shuning uchun bu
     shriftda 1.3 kerak. */
  line-height: 1.3;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  text-wrap: balance;
}
/* URG'U. Oldin gradient edi (`asosiy-2` → `yashil`) —
   rang o'tishi matnni O'QISHGA qiyinlashtiradi va
   yashil «o'sish» ma'nosini bejiz olib keladi.

   Endi jez rang va OSTIGA chizilgan jez chiziq: muhrdek
   bosilgan, aniq. Chiziq matnga tegib ketmasin uchun
   `text-underline-offset`. */
.qahramon h1 em {
  font-style: normal;
  color: var(--asosiy-2);
  /* Ostidagi chiziq `text-decoration` EMAS, fon
     gradienti: faqat shunda uni chapdan o'ngga
     chizdirib bo'ladi (yuqoridagi `urgu-chiz`).
     Chiziq elementning O'Z qutisi ichida chiziladi —
     `padding-bottom` QO'SHILMAYDI. Padding quti pastini
     keyingi qator tomon cho'zadi va chiziq o'sha
     qatorga tegib ketardi (telefonda ko'rildi,
     2026-10-07: «sotmasdan» ostidagi chiziq «pul
     oling» ustiga tushgandi).

     `calc(100% - 2px)` — chiziq qutining eng pastidan
     2px yuqorida: harf dumiga ham tegmaydi, keyingi
     qatorga ham yetmaydi. */
  background-position: 0 calc(100% - 2px);
}

.kirish {
  color: var(--izoh);
  font-size: 18px;
  line-height: 1.65;
  /* 60-65 belgi — o'qish uchun eng qulay qator uzunligi.
     Oldin 30em edi, ya'ni kengroq va ko'z qatordan
     qatorga o'tayotganda adashardi. */
  max-width: 34ch;
}

.qahramon-tugmalar { display: flex; gap: 14px; margin: 30px 0 34px; flex-wrap: wrap; }

/* Uch ko'rsatkich qatori — BUTUN kenglikda, teng
   ustunlarda. Oldin `flex` edi va ular chap chekkada
   yig'ilib qolardi; karta olib tashlangach o'ng yarim
   bo'm-bo'sh ko'rinardi. Teng setka esa qahramon
   tagini mahkamlaydi va sahifa tugallangan ko'rinadi. */
.raqamlar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--chegara);
  padding-top: 24px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  /* Telefonda uch ustun torayib raqam sig'maydi. */
  .raqamlar { grid-template-columns: 1fr 1fr; }
  .raqamlar > div:first-child { grid-column: 1 / -1; }
}
/* Bank egasi: uchta ko'rsatkich AJRALIB tursin — har biri
   o'z to'rtburchagida. */
.raqamlar > div {
  border: 1px solid var(--chegara);
  border-radius: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  min-width: 150px;
}
.raqamlar dt { font-size: 13px; color: var(--izoh); margin-bottom: 4px; }
.raqamlar dd {
  font-family: var(--raqam); font-size: 26px; font-weight: 700;
  color: var(--yashil);
}

/* Xizmat yopiqligi belgisi — matndan ajratilgan
   (tarjima tugunga qarab ishlaydi, `sayt.js` ga qarang). */
.texnik-belgi { margin-right: 6px; opacity: .8; }
/* ══ ROZILIK BELGISI VA SHARTLAR ═════════════════════
   Bank egasining talabi (2026-10-08): ro'yxatdan o'tishda
   foydalanish shartlariga rozilik uchun belgi qo'yilsin,
   «Foydalanish shartlari» kichik RANGLI yozuv bo'lsin va
   bosilganda shartlar o'qilsin. */
.rozilik-qator {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 6px;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--izoh);
  cursor: pointer;
}
/* Belgi 20×20 — barmoq uchun yetarli, lekin matnni
   bosib ketmaydi. `accent-color` bilan belgilangan
   holatda jez bo'ladi: brauzerning ko'k rangi saytdan
   ajralib turardi. */
.rozilik-qator input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--asosiy);
  cursor: pointer;
}
.rozilik-qator span { min-width: 0; }

/* «Foydalanish shartlari» — matn ICHIDAGI havola.
   `<button>` ishlatilgan, `<a>` emas: u hech qayerga
   OLIB BORMAYDI, oyna ochadi. Ekran o'quvchi uchun bu
   farq muhim — «havola» deb o'qilsa odam sahifa
   almashadi deb o'ylardi. */
.shart-havola {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--asosiy-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--asosiy) 50%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.shart-havola:hover { color: var(--matn); }

/* KYC dagi quti — tugma va belgi birga tursin. */
.shart-quti {
  margin: 18px 0 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  border: 1px solid var(--chegara);
  border-radius: 12px;
}
.shart-quti .tugma { margin-bottom: 4px; }
/* `.shart-ochish` — KYC dagi «Shartlarni o'qish» tugmasi.
   Ko'rinishi `.tugma tinch` dan keladi, lekin o'z qoidasi
   HAM bo'lishi kerak: sinov «HTML dagi hamma sinfning
   uslubi bor» deb tekshiradi va uslubsiz sinf kelajakda
   jimgina yo'qolib ketishi mumkin. */
.shart-ochish { white-space: normal; text-align: left; }

/* ── shartlar oynasi ──────────────────────────────── */
.shart-oyna { max-width: 760px; }
.shart-matn {
  margin-top: 12px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--fon-2);
  border: 1px solid var(--chegara);
  border-radius: 10px;
  /* `pre-wrap` — matn SERVERDAN tayyor qatorlar bilan
     keladi (bandlar, raqamlar, bo'sh qatorlar). HTML
     ularni yo'qotib yuborardi. */
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.7;
  color: var(--matn);
}
.shart-matn:focus-visible {
  outline: 2px solid var(--asosiy);
  outline-offset: 2px;
}
#shart-versiya { font-family: var(--raqam); }

@media (max-width: 600px) {
  .shart-matn { max-height: 64vh; font-size: 13.5px; }
}
.yashil { color: var(--yashil); }

/* ── bo'limlar ─────────────────────────────────────── */
/* HAVO. Bank egasi proxy-seller.com ni namuna qildi: uni
   jiddiy ko'rsatadigan narsa rangi emas — kattaroq kartalar,
   ko'proq bo'sh joy va aniq tuzilma. Shuning uchun bo'lim
   oralig'i va karta ichidagi havo oshirildi. */
.bolim { max-width: var(--kenglik); margin: 0 auto; padding: 104px 28px; }
.bolim.tinch {
  max-width: none;
  background: var(--fon-2);
  border-block: 1px solid var(--chegara);
}
.bolim.tinch > * { max-width: var(--kenglik); margin-inline: auto; }

/* Bo'lim sarlavhasi — SANS, mashina yozuvi emas.
   Mashina yozuvi FAQAT bitta joyda (asosiy da'vo) va
   kichik yorliqlarda ishlatiladi. Agar har sarlavha shu
   yozuvda bo'lsa, sayt bank emas, terminal oynasiga
   o'xshab qolardi. */
.bolim h2 {
  font-size: var(--t-l);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.bolim-izoh {
  color: var(--izoh);
  margin-bottom: 40px;
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
}

/* ══ BO'LIM AJRATGICHI ══════════════════════════════
   Bo'lim sarlavhasi oldida qisqa jez chiziq va uning
   uchida kvadrat tugun. Vazifasi — ko'zga bo'lim
   BOSHLANGANINI aytish: oldin bo'limlar faqat bo'sh
   joy bilan ajralardi va uzun sahifada qaysi
   sarlavha qaysi bo'limga tegishli ekani darhol
   ko'rinmasdi. */
.bolim > h2::before,
.bolim-boshi h2::before {
  content: "";
  display: block;
  width: 29px; height: 5px;
  margin-bottom: 18px;
  /* Ikki qatlam: chapda 1px chiziq, o'ngda 5px kvadrat
     tugun. Qo'shimcha element ham, `box-shadow` hiylasi
     ham kerak emas — ikkala shakl ham FON sifatida
     chiziladi. */
  background:
    linear-gradient(var(--asosiy) 0 0) left center / 22px 1px no-repeat,
    linear-gradient(var(--asosiy) 0 0) right center / 5px 5px no-repeat;
}

.setka { display: grid; gap: 24px; }
.setka.uch { grid-template-columns: repeat(3, 1fr); }
.setka.ikki { grid-template-columns: repeat(2, 1fr); }

.quti {
  background: linear-gradient(162deg, var(--panel), var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 20px;
  padding: 32px 30px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  /* Ustun — tugmani PASTGA tekislash uchun. Kartalardagi
     matn uzunligi har xil (omonatda uchta, eskrouda ikkita
     shart), shuning uchun tugmalar turli balandlikda
     turardi va qator tartibsiz ko'rinardi. */
  display: flex;
  flex-direction: column;
}
/* Tugma kartaning oxirida — qolgan bo'sh joy undan
   YUQORIDA to'planadi. */
.quti > .tugma { margin-top: auto; align-self: flex-start; }
/* Xizmat holati (texnik ishlar) tugmadan KEYIN turadi. */
.quti > .tugma + .xizmat-holat { margin-top: 12px; }
.quti:hover {
  border-color: var(--asosiy);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(6, 5, 3, .45);
}
.quti h3 { font-size: 20.5px; margin-bottom: 10px; }
.quti p { color: var(--izoh); font-size: 15.5px; line-height: 1.7; }
.quti ul { margin: 14px 0 0 18px; color: var(--izoh); font-size: 14px; }
.quti li { margin-bottom: 6px; }
.quti.tor { padding: 22px; }
.belgi {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(194, 161, 77,.14); color: var(--asosiy-2);
  display: grid; place-items: center; font-size: 22px; margin-bottom: 16px;
}
/* Nishonlar SVG: shrift belgilari («◆», «⇄») ba'zi qurilmalarda
   bo'sh kvadrat bo'lib chiqadi — chizma esa hamma joyda bir xil. */
.belgi svg { width: 22px; height: 22px; }
.logo-nishon {
  width: 15px; height: 15px; color: var(--asosiy-2);
  vertical-align: -2px; margin-right: 7px;
}

/* ── jadval ────────────────────────────────────────── */
.jadval-orami { overflow-x: auto; border-radius: 14px; border: 1px solid var(--chegara); }
.jadval { width: 100%; border-collapse: collapse; background: var(--panel); min-width: 640px; }
.jadval th {
  text-align: left; padding: 14px 16px; font-size: 13px;
  color: var(--izoh); text-transform: uppercase; letter-spacing: .8px;
  background: var(--panel-2); border-bottom: 1px solid var(--chegara);
}
.jadval td {
  padding: 14px 16px; border-bottom: 1px solid var(--chegara);
  font-family: var(--raqam); font-size: 15px;
}
.jadval tbody tr:last-child td { border-bottom: none; }
.jadval td:first-child { font-family: var(--shrift); font-weight: 600; }
.kutish { color: var(--izoh); font-family: var(--shrift) !important; }
.eslatma { color: var(--izoh); font-size: 14px; margin-top: 16px; }

/* ── yangiliklar ───────────────────────────────────── */
.yangiliklar { display: grid; gap: 14px; }
.yangilik {
  background: var(--panel); border: 1px solid var(--chegara);
  border-left: 3px solid var(--asosiy);
  border-radius: 12px; padding: 20px 22px;
}
.yangilik.muhim { border-left-color: var(--sariq); }
.yangilik.shoshilinch { border-left-color: var(--qizil); }
.yangilik h3 { font-size: 17px; margin-bottom: 6px; }
.yangilik .sana { color: var(--izoh); font-size: 13px; font-family: var(--raqam); }
.yangilik p { color: var(--izoh); font-size: 15px; margin-top: 8px; white-space: pre-wrap; }
.nishon {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 7px; margin-left: 8px;
  background: rgba(194, 161, 77,.16); color: var(--asosiy-2);
}
.nishon.muhim { background: rgba(251,191,36,.16); color: var(--sariq); }
.nishon.shoshilinch { background: rgba(248,113,113,.16); color: var(--qizil); }

/* ── yuklash ───────────────────────────────────────── */
.yuklash { text-align: center; }
.yuklash .setka { max-width: 720px; margin: 0 auto; }
.yuklash-quti { text-align: left; display: block; }
.yuklash-quti .belgi { margin-bottom: 12px; }

/* ── savollar ──────────────────────────────────────── */
.savollar { display: grid; gap: 10px; }
details {
  background: var(--panel); border: 1px solid var(--chegara);
  border-radius: 12px; padding: 16px 20px;
}
details[open] { border-color: var(--asosiy); }
/* SAVOL SARLAVHASI — CHEGARALI VA JAVOB BERADIGAN
   (1.631-qoida). Brauzer tekshiruvi topdi: `summary`
   bosiladigan, lekin chegarasi YO'Q va sichqoncha
   ostida hech narsa o'zgarmasdi — ya'ni bank egasining
   «faqat yozuv bosiladi» shikoyati aynan shu yerda ham
   bor edi. `details` ning o'z chegarasi savolni emas,
   butun qutini o'raydi. */
summary {
  cursor: pointer; font-weight: 600; font-size: 16px;
  padding: 8px 14px;
  border: 1px solid var(--chegara);
  border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
}
summary:hover {
  background: rgba(194, 161, 77, .12);
  border-color: var(--asosiy);
  color: var(--matn);
}
details[open] > summary {
  border-color: var(--asosiy);
  background: rgba(194, 161, 77, .08);
}
summary::marker { color: var(--asosiy-2); }
details p { color: var(--izoh); margin-top: 10px; font-size: 15px; }

/* ── past ──────────────────────────────────────────── */
.past {
  background: var(--fon-2); border-top: 1px solid var(--chegara);
  padding: 50px 24px 30px;
}
.past-ichi {
  max-width: var(--kenglik); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px;
}
.past .logo { font-size: 17px; margin-bottom: 8px; }
.mayda { color: var(--izoh); font-size: 14px; }
/* Sahifa pastidagi havola 24px dan baland bo'lsin.
   O'lchandi (axe-core target-size, 2026-10-07): «Savollar»
   26×18, «Xavfsizlik» 51×18 edi — WCAG 2.2 AA eng kami
   24×24. Matn o'lchami o'zgarmaydi, faqat bosiladigan
   maydon kattalashadi. */
/* 36px — loyihaning mobil sinovi talabi (WCAG 2.2 AA
   dagi 24px dan qat'iyroq): barmoq bilan aniq bosilsin.
   Matn o'lchami o'zgarmaydi, faqat nishon kattalashadi. */
.mayda a {
  display: inline-flex; align-items: center;
  min-height: 36px;
}
.mayda a:hover { color: var(--matn); }
.mayda-sarlavha {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--izoh); margin-bottom: 10px;
}
.markaz {
  max-width: var(--kenglik); margin: 34px auto 0; padding-top: 22px;
  border-top: 1px solid var(--chegara); text-align: center; font-size: 13px;
}

/* ── kichik ekran ──────────────────────────────────── */
/* ── MENYU TOSHIB KETMASIN ────────────────────────────
   O'LCHANDI (2026-10-07, brauzerda):

     oyna 1366px → menyu o'ng chekkasi 1365   ✓ (1px qoldi!)
     oyna 1320px → 1342   ❌ 22px tashqarida
     oyna 1280px → 1322   ❌ 42px
     oyna 1024px → 1272   ❌ 248px
     oyna  901px → 1272   ❌ 371px

   Gamburger menyu esa faqat 900px dan PASTDA yoqilardi.
   Ya'ni 901–1365px oralig'ida — 1280×720 va 1024×768 kabi
   KENG TARQALGAN noutbuk o'lchamlarida — yuqori menyu
   ekrandan chiqib ketardi va «Ro'yxatdan o'tish» tugmasi
   ko'rinmasdi.

   Yechim ikki bosqichli:
     1101–1365px — menyu IXCHAMLASHADI;
     1100px dan past — gamburger. */
@media (max-width: 1365px) and (min-width: 1101px) {
  .menyu-ichi { padding: 16px 16px; gap: 10px; }
  .menyu-yollar { gap: 15px; }
  .menyu-yollar a { font-size: 14px; }
  .til-tugmalar button { padding: 6px 9px; font-size: 12px; }
  .menyu .tugma { padding: 9px 14px; font-size: 14px; }
  .logo { font-size: 17px; }
}

@media (max-width: 1100px) {
  .qahramon { padding-top: 32px; }
  .setka.uch, .setka.ikki, .past-ichi { grid-template-columns: 1fr; }
  /* `flex` — ichidagi ☰ belgisi MARKAZDA turishi uchun
     (44×44 nishonda). */
  .menyu-tugma { display: inline-flex; }
  .menyu-yollar {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--panel); border-bottom: 1px solid var(--chegara);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px;
    z-index: 20;
  }
  .menyu-yollar.ochiq { display: flex; }
  .menyu-yollar a { padding: 13px 0; border-bottom: 1px solid var(--chegara); }
  .menyu-yollar a:last-child { border-bottom: none; }
  /* `.menyu { position: relative }` OLIB TASHLANDI: pastdagi
     `position: sticky` qoidasi keyin turgani uchun uni
     baribir bosib ketardi (o'lik qator), telefon menyusi
     esa yopishqoq panelga nisbatan joylashadi — shunisi
     to'g'ri. */
  .bolim { padding: 56px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
}

/* ── til tugmalari ──────────────────────────────────── */
.til-tugmalar { display: inline-flex; gap: 2px; margin-right: 8px; }
.til-tugma {
  background: transparent; border: 1px solid var(--chegara);
  color: var(--izoh); font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .4px; padding: 9px 12px; border-radius: 8px;
  cursor: pointer; transition: color .15s, border-color .15s;
  /* Telefonda barmoq bilan bosiladi — kichik bo'lmasin */
  min-height: 38px; min-width: 42px;
}
.til-tugma:hover { color: var(--matn); border-color: var(--asosiy-2); }
.til-tugma.tanlangan {
  color: var(--fon); background: var(--asosiy); border-color: var(--asosiy);
}
@media (max-width: 760px) { .til-tugmalar { margin: 8px 0; } }
/* ═══════════════════════════════════════════════════════
   BOZOR, ANIMATSIYA VA HISOBLAGICH
   ───────────────────────────────────────────────────────
   Animatsiya bu yerda BEZAK emas, ma'no tashiydi: narx
   o'zgarsa raqam yonib oladi, grafik chiziq chiziladi,
   bo'limlar ko'ringanda paydo bo'ladi. Foydalanuvchi
   harakatni kamaytirishni so'rasa — hammasi o'chadi
   (`prefers-reduced-motion`).
   ═══════════════════════════════════════════════════════ */

/* ── yugurik narx qatori ─────────────────────────────── */
.yugurik {
  /* EKRAN PASTIGA QADALGAN, BIR QATORLI. Sahifaning
     boshida ham, oxirida ham ko'rinib turadi. */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;             /* menyu (50) bilan bir qatorda,
                              oynalardan (70) pastda */
  height: var(--lenta-boyi);
  border-top: 1px solid var(--chegara);
  /* Issiq grafit — sahifa yeri bilan bir xil oila.
     Oldin rgb(26, 24, 19) ko'kish-qora edi: fon jezga
     o'tgach lenta sahifadan ajralib, boshqa saytdan
     kesib olingandek ko'rinardi. */
  background: rgba(26, 24, 19, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.yugurik-lenta {
  display: flex;
  /* BIR QATOR: o'ralib ikkinchi qatorga tushmaydi */
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  gap: 34px;
  width: max-content;
  /* Bank egasi: «juda tez aylanyapti — uch barobar sekin
     qil» (46s → 138s), keyin «yana ham bir oz, 2x ga»
     (138s → 276s). */
  animation: yugur 276s linear infinite;
}

.yugurik:hover .yugurik-lenta { animation-play-state: paused; }

@keyframes yugur {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.yugurik-birlik {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  white-space: nowrap;
}

.yugurik-birlik .nom { font-weight: 700; letter-spacing: .4px; }
.yugurik-birlik .narx { font-family: var(--raqam); color: var(--matn); }
.yugurik-birlik .foiz { font-family: var(--raqam); font-size: 13px; }
.foiz.yuqori { color: var(--yashil); }
.foiz.past { color: var(--qizil); }
.foiz.tinch { color: var(--izoh); }

/* ── bo'lim boshi: sarlavha + kayfiyat ───────────────── */
.bolim-boshi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.kayfiyat { min-width: 230px; }

.kayfiyat-chiziq {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--panel-2);
}

.kayfiyat-chiziq i { display: block; height: 100%; transition: width .8s cubic-bezier(.2,.7,.3,1); }
#kayfiyat-yashil { background: var(--yashil); }
#kayfiyat-qizil { background: var(--qizil); }

.kayfiyat-matn { font-size: 13px; color: var(--izoh); margin-top: 8px; }

/* ── bozor kartalari ─────────────────────────────────── */
.bozor-setka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}

.narx-karta {
  background: linear-gradient(160deg, var(--panel), var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 16px;
  padding: 18px 18px 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}

.narx-karta:hover {
  border-color: var(--asosiy);
  transform: translateY(-3px);
}

.narx-karta .boshi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.narx-karta .nom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
}

.tanga {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--fon);
  flex: none;
}

.narx-karta .qiymat {
  font-family: var(--raqam);
  font-size: 25px;
  font-weight: 600;
  margin: 12px 0 2px;
  letter-spacing: -.4px;
}

/* Narx o'zgarganda bir marta yonib oladi — o'zgarish
   ko'zdan qochmasin. */
.qiymat.yondi-yuqori { animation: yonish-yashil .9s ease-out; }
.qiymat.yondi-past { animation: yonish-qizil .9s ease-out; }

@keyframes yonish-yashil {
  0% { color: var(--yashil); text-shadow: 0 0 18px rgba(95, 191, 138,.55); }
  100% { color: var(--matn); text-shadow: none; }
}
@keyframes yonish-qizil {
  0% { color: var(--qizil); text-shadow: 0 0 18px rgba(248,113,113,.55); }
  100% { color: var(--matn); text-shadow: none; }
}

.narx-karta .qator {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--izoh);
  margin-top: 4px;
}

.narx-karta .qator b { font-family: var(--raqam); font-weight: 500; color: var(--matn); }

/* 24 soatlik oraliqdagi o'rin — narx past/yuqori orasida
   qayerda turgani bir qarashda ko'rinsin. */
.oraliq {
  height: 4px;
  border-radius: 99px;
  background: var(--panel-2);
  margin: 10px 0 4px;
  position: relative;
}

.oraliq i {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--asosiy-2);
  box-shadow: 0 0 0 3px rgba(194, 161, 77,.22);
  transform: translateX(-50%);
  transition: left .7s cubic-bezier(.2,.7,.3,1);
}

.uchqun { margin-top: 10px; height: 52px; }
.uchqun svg { width: 100%; height: 100%; display: block; }

/* Chiziq chizilib boradi — ma'lumot «kelayotgani» ko'rinadi */
.uchqun path.yol {
  stroke-dasharray: var(--uzunlik, 600);
  stroke-dashoffset: var(--uzunlik, 600);
  animation: chiz 1.1s ease-out forwards;
}

@keyframes chiz { to { stroke-dashoffset: 0; } }

.narx-karta .past-qator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--izoh);
  border-top: 1px solid var(--chegara);
  margin-top: 10px;
  padding-top: 9px;
}

.manba-nuqta {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yashil);
  margin-right: 6px;
  animation: tepish 2.4s ease-in-out infinite;
}

@keyframes tepish {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(95, 191, 138,.5); }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(95, 191, 138,0); }
}

/* ── eng ko'p o'sgan / tushgan ───────────────────────── */
.harakat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.harakat-quti {
  border: 1px solid var(--chegara);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--panel);
}

.harakat-quti.osdi { border-left: 3px solid var(--yashil); }
.harakat-quti.tushdi { border-left: 3px solid var(--qizil); }
.harakat-yorliq { font-size: 12px; color: var(--izoh); text-transform: uppercase; letter-spacing: .6px; }
.harakat-aktiv { font-size: 21px; font-weight: 700; margin-top: 5px; }
.harakat-foiz { font-family: var(--raqam); font-size: 17px; }
.harakat-quti.osdi .harakat-foiz { color: var(--yashil); }
.harakat-quti.tushdi .harakat-foiz { color: var(--qizil); }

/* ── hisoblagich ─────────────────────────────────────── */
.hisob-setka { align-items: start; }
.quti.hisob { text-align: left; }

.maydon { display: block; margin-top: 14px; }
/* BELGILI MAYDON — belgi va matn BIR QATORDA.
   `.maydon span` blok bo'lib yangi qatorga tushadi, bu
   yerda esa belgi yonida turishi kerak (1.579-qoida). */
.maydon.belgili { display: flex; align-items: flex-start; gap: 10px; }
.maydon.belgili input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0; flex: none;
  accent-color: var(--asosiy); cursor: pointer;
}
.maydon.belgili span {
  display: inline; margin: 0; font-size: 14px;
  color: var(--matn); line-height: 1.45; cursor: pointer;
}
.maydon span { display: block; font-size: 13px; color: var(--izoh); margin-bottom: 6px; }

.maydon input, .maydon select {
  width: 100%;
  background: var(--fon-2);
  border: 1px solid var(--chegara);
  border-radius: 10px;
  color: var(--matn);
  /* MATN maydoni oddiy shriftda. Oldin hammasi mashina
     yozuvida edi — «I SELL USDT», «So'm (UZS)» kabi
     tanlovlar terminal buyrug'iga o'xshab qolardi va
     sayt qolgan qismidan uzilib turardi (brauzerda
     ko'rildi, 2026-10-07).

     RAQAM maydonlari esa pastda mashina yozuviga
     qaytariladi: u yerda har raqam bir xil kenglikda
     bo'lishi kerak (summa, karta raqami, manzil). */
  font-family: var(--shrift);
  font-size: 16px;
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}

/* ══ KYC HOLAT KARTASI (1.501-qoida) ════════════════
   Tasdiqlangan yoki tekshiruvda turgan mijozga forma
   o'rniga QISQA holat ko'rsatiladi. */
.holat-karta {
  background: var(--panel-2, var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 12px;
}

.holat-karta .holat-belgi {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--matn);
}

/* TASDIQLANGAN — yashil. Rang YAGONA belgi EMAS:
   yonida «✓» turadi, ya'ni rangni ajratmaydigan odam
   ham holatni o'qiydi. */
.holat-karta.yashil { border-color: var(--yashil); }
.holat-karta.yashil .holat-belgi { color: var(--yashil); }

/* ══ FAYL TANLASH — O'Z TUGMAMIZ (1.500-qoida) ══════
   `<input type="file">` tugmasining yozuvini brauzer
   O'ZI chizadi: «Выберите файл», «Choose File», «Fayl
   tanlang» — operatsion tizim tilida. Uni CSS bilan ham,
   JS bilan ham o'zgartirib bo'lmaydi.

   Shuning uchun asl tugma KO'RINMAS qilinadi (lekin
   O'CHIRILMAYDI: `display:none` bo'lsa klaviatura bilan
   fokuslab bo'lmasdi va ekran o'qigich uni topmasdi),
   ustiga o'zimizning yorliq chiziladi. */
.fayl-yashirin {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
}

.fayl-qatori {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fayl-tugma {
  cursor: pointer;
  white-space: nowrap;
}

/* KLAVIATURA BILAN YURGANDA ko'rinsin: fokus ASL
   maydonda bo'ladi, halqa esa bizning tugmada
   chizilishi kerak. */
.fayl-yashirin:focus-visible + .fayl-qatori .fayl-tugma {
  outline: 2px solid var(--asosiy-2);
  outline-offset: 2px;
}

.fayl-nomi {
  font-size: 13px;
  color: var(--izoh);
  word-break: break-all;
}

/* ══ PAROLNI KO'RSATISH TUGMASI (ko'z) ═══════════════
   Bank egasi (2026-10-15): «parol yoniga ko'z qo'y».

   IKKINCHI CHIZISH (2026-10-15). Birinchisida ko'z CSS
   bilan chizilgandi: tashqi oval `border-radius` dan,
   qorachiq `::after` dan. Bank egasi: «g'alati
   ishlayapti, ba'zan bosilmaganga o'xshaydi,
   saytlardagidek kichik va to'g'ri ishlaydigan emas,
   sal bachkanaroq».

   HAQ EDI, uch sababdan:
     * `border-radius` bilan chizilgan oval haqiqiy ko'z
       belgisiga o'xshamaydi — qo'pol chiqadi;
     * OCHIQ holatda qorachiq YO'QOLIB, o'rniga chiziq
       chiqardi — ya'ni ikki holat ikki XIL shakl edi,
       bir shaklning ikki holati emas;
     * holat faqat RANG bilan ham ko'rsatilardi (oltin
       rang) — bu «bosilgan/bosilmagan» degan taassurot
       berardi, holbuki tugma HOLAT ko'rsatadi.

   ENDI SVG: boshqa saytlardagi odatiy ko'z belgisi.
   Yopiq holat — ko'z, ochiq holat — ustidan chiziq
   tortilgan AYNI ko'z. Rang NEYTRAL qoladi. */
.parol-qutisi { position: relative; display: block; }

/* Maydonning o'ng chetida tugma uchun joy: aks holda
   uzun parol tugma tagiga kirib ketadi. */
.parol-qutisi input { padding-right: 42px !important; }

.koz-tugma {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--izoh);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background-color .12s;
}

/* 18 px — namunadagi o'lcham (VK 20, Lucide 18.2). */
.koz-tugma svg { display: block; width: 18px; height: 18px; }

.koz-tugma:hover { color: var(--matn); }

/* BOSILGANDA darhol seziladi — bank egasi «ba'zan
   bosilmaganga o'xshaydi» degani shu edi: bosish
   paytida hech qanday javob yo'q edi. */
.koz-tugma:active { background: var(--panel-2, var(--fon-2)); }

/* OCHIQ holat — matn rangi. Rang YAGONA belgi EMAS:
   belgining o'zi ham o'zgaradi (ustidan chiziq). */
.koz-tugma.ochiq { color: var(--matn); }

/* Raqam, karta, hamyon manzili — MASHINA yozuvida:
   `tabular-nums` bilan har raqam bir xil kenglikda
   bo'ladi va uzun manzil o'qishga qulay bo'ladi. */
.maydon input[type="number"],
.maydon input[inputmode="numeric"],
.maydon input[inputmode="decimal"],
.maydon input[name*="manzil"],
.maydon input[id*="manzil"],
.maydon input[id*="karta"],
.maydon input[id*="summa"],
.maydon input[id*="narx"],
.maydon input[id*="miqdor"] {
  font-family: var(--raqam);
  font-variant-numeric: tabular-nums;
}
.maydon input:focus, .maydon select:focus {
  outline: none;
  border-color: var(--asosiy);
  box-shadow: 0 0 0 3px rgba(194, 161, 77,.2);
}

.tanlov { display: flex; gap: 8px; margin-top: 14px; }

.tanlov button {
  flex: 1;
  background: var(--fon-2);
  border: 1px solid var(--chegara);
  border-radius: 10px;
  color: var(--izoh);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 6px;
  cursor: pointer;
  transition: all .15s;
}

.tanlov button:hover { border-color: var(--asosiy); color: var(--matn); }

.tanlov button.tanlangan {
  background: var(--asosiy);
  border-color: var(--asosiy);
  color: var(--fon);
  font-weight: 600;
}

.natija { margin-top: 18px; border-top: 1px solid var(--chegara); padding-top: 14px; }
.natija > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.natija dt { font-size: 14px; color: var(--izoh); }
.natija dd { font-family: var(--raqam); font-size: 16px; }
.natija .jami { border-top: 1px solid var(--chegara); margin-top: 8px; padding-top: 12px; }
.natija .jami dt { color: var(--matn); font-weight: 600; }
.natija .jami dd { font-size: 21px; font-weight: 700; }

.hisob-eslatma { font-size: 12.5px; color: var(--izoh); margin-top: 12px; line-height: 1.55; }
.hisob-eslatma.ogoh { color: var(--sariq); }

/* ── aylanib ko'rinish ───────────────────────────────── */
.kiradi {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.3,1);
}
.kiradi.kirdi { opacity: 1; transform: none; }

/* ── harakatni kamaytirish so'ralgan bo'lsa ──────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .yugurik-lenta,
  .manba-nuqta,
  .uchqun path.yol { animation: none; }
  .uchqun path.yol { stroke-dashoffset: 0; }
  .qiymat.yondi-yuqori, .qiymat.yondi-past { animation: none; }
  .kiradi { opacity: 1; transform: none; transition: none; }
  .narx-karta:hover { transform: none; }
}

@media (max-width: 720px) {
  .bolim-boshi { flex-direction: column; align-items: stretch; }
  .kayfiyat { min-width: 0; }
  .narx-karta .qiymat { font-size: 22px; }
  .tanlov { flex-wrap: wrap; }
}

/* Narx eskirgan bo'lsa — ochiq aytiladi, jonli deb
   ko'rsatilmaydi. Mijoz shu raqamga qarab qaror qabul
   qiladi, shuning uchun aldash mumkin emas. */
.past-qator .eskirgan { color: var(--sariq); }

.eski-nuqta {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sariq);
  margin-right: 6px;
}

.narx-karta.eskirgan-karta { border-color: rgba(251,191,36,.4); }

/* Likvidatsiya narxigacha qancha zaxira borligi — kredit
   olayotgan odam uchun eng muhim raqam. Ko'rsatkich o'ngda
   tursa xavfsiz, chapga surilsa xavf yaqin. */
.xavf-chiziq { margin-top: 14px; }

.xavf-yolak {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--qizil), var(--sariq) 35%, var(--yashil));
  position: relative;
}

.xavf-yolak i {
  position: absolute;
  top: -4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--matn);
  border: 3px solid var(--fon-2);
  transform: translateX(-50%);
  transition: left .6s cubic-bezier(.2,.7,.3,1);
  left: 50%;
}

.xavf-yorliq {
  display: flex;
  justify-content: space-between;
  font-family: var(--raqam);
  font-size: 11.5px;
  color: var(--izoh);
  margin-top: 7px;
}

.natija dd.sariq { color: var(--sariq); }
.natija dd.qizil { color: var(--qizil); }

/* ═══════════════════════════════════════════════════════
   BIRJA KO'RINISHI — token ro'yxati + svechali grafik
   ───────────────────────────────────────────────────────
   Menyu YOPISHIB turadi: foydalanuvchi «Bozor» ni bosib
   pastga tushgach, boshqa bo'limga o'tish uchun yuqoriga
   qaytishi kerak emas.
   ═══════════════════════════════════════════════════════ */

/* ── yopishqoq menyu ─────────────────────────────────── */
.menyu {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Sahifa ostidan o'tayotgani ko'rinib tursin, lekin
     matn o'qilsin — shaffof fon + blur. */
  /* Issiq grafit — qahramon foni bilan bir oilada
     (oldin ko'kish-qora rgb(20, 19, 15) edi). */
  background: rgba(20, 19, 15, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}

.menyu.surildi {
  border-bottom-color: var(--chegara);
  background: rgba(20, 19, 15, .94);
}

/* Havola bosilganda sarlavha menyu ostida qolib
   ketmasin — har bo'limga yuqoridan joy beriladi. */
.bolim, header.tepa { scroll-margin-top: 78px; }

.menyu-yollar a.joriy { color: var(--matn); }

.logo-nishon {
  width: 34px; height: 34px;
  display: inline-block;
  vertical-align: -9px;
  margin-right: 9px;
}
.past .logo-nishon { width: 30px; height: 30px; vertical-align: -8px; }

/* ── birja tartibi ───────────────────────────────────── */
.birja {
  display: grid;
  /* Chap ustun keng ekranda biroz kengayadi — endi sahifa
     ham kengroq (`--kenglik`), 290px unda ingichka ko'rinadi. */
  grid-template-columns: minmax(280px, 22%) 1fr;
  gap: 16px;
  align-items: stretch;
}

.birja-royxat,
.birja-grafik {
  background: linear-gradient(160deg, var(--panel), var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 16px;
  overflow: hidden;
}

/* CHAP USTUN: CHEKLANGAN BALANDLIK + SICHQONCHA BILAN AYLANTIRISH

   IKKI XATO KETMA-KET TOPILDI (bank egasi):
     1) «malumot bu uzunlik bo'ylab yoyilmagan» — ro'yxat
        qat'iy 520px da kesilgan, o'ng ustun esa ~900px
        bo'lgani uchun pastda bo'sh joy qolardi;
     2) cheklovni butunlay olib tashlagach — «chap ustun
        uzayib ketgan»: ro'yxatda 129 token bor va setka
        qatori ularning HAMMASIGA moslashib, bo'lim bir
        necha ming piksel bo'lib ketdi.

   To'g'ri o'rta: balandlik EKRANGA bog'lanadi. Shunda
   ro'yxat katta monitorda uzunroq, kichikida kaltaroq
   bo'ladi va hech qachon sahifani cho'zib yubormaydi.
   Sig'magan tokenlar sichqoncha g'ildiragi bilan
   aylantiriladi. */
.birja-royxat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* `height: 0` + `min-height: 100%` — setka qatorining
     balandligini FAQAT o'ng ustun belgilaydi, chap ustun
     esa o'sha balandlikni to'liq egallaydi.

     Nega aynan shunday: setka qatori standart holda ikkala
     ustunning TARKIBIGA moslashadi. 129 token esa bir necha
     ming piksel — natijada chap ustun sahifani cho'zib
     yuboradi (bank egasi «chap ustun uzayib ketgan» dedi).
     `height: 0` qatorni hisoblashda chap ustunni chetlab
     o'tadi, `min-height: 100%` esa uni o'ng ustun bilan
     TENG qiladi.

     Ikkinchi qator — zaxira: `max()` ni tushunmaydigan eski
     brauzerda ro'yxat ko'rinmay qolmasligi uchun.

     360px POLI OLIB TASHLANDI (1.684/1.685-qoida):
     u 151 tokenli ro'yxatni jilovlash uchun qo'yilgandi.
     Endi ro'yxatda 10 token va svecha grafigi ham yo'q,
     ya'ni o'ng ustun 328px — pol esa chap ustunni 360px
     da ushlab, IKKI USTUNNI TENGSIZ qilardi (o'lchandi:
     chap 360 / o'ng 328). Zaxira pol kichraytirildi:
     `max()` ishlamaydigan brauzerda ham ro'yxat
     ko'rinadi, lekin tenglikni buzmaydi. */
  height: 0;
  min-height: 240px;
  min-height: 100%;
}

.birja-royxat .jadval-orami {
  min-height: 0;
  overflow-y: auto;
  /* Ro'yxat oxiriga yetganda sahifa o'zi surilib ketmasin */
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
}

.birja-royxat .royxat-jadval thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}

.royxat-boshi { padding: 12px; border-bottom: 1px solid var(--chegara); }

.royxat-boshi input {
  width: 100%;
  background: var(--fon-2);
  border: 1px solid var(--chegara);
  border-radius: 9px;
  color: var(--matn);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
}
.royxat-boshi input:focus {
  outline: none; border-color: var(--asosiy);
  box-shadow: 0 0 0 3px rgba(194, 161, 77,.2);
}

.royxat-jadval { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.royxat-jadval th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--izoh);
  padding: 9px 12px;
  border-bottom: 1px solid var(--chegara);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.royxat-jadval th:hover { color: var(--matn); }
.royxat-jadval th.ong { text-align: right; }
.royxat-jadval th .oq { opacity: .5; font-size: 10px; margin-left: 3px; }

.royxat-jadval td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(51, 46, 34,.55);
  font-family: var(--raqam);
}

/* ══ JADVAL IDISH KENGLIGIGA MOSLASHADI (1.628-qoida) ══
   Bank egasi topdi (2026-10-23): «bozor bo'limidagi chap
   ustundagi token va narx ustuni yaxshi ammo 24s ustuni
   ushbu oynaga biroz sig'may qolyapti… telefonda kirganda
   ham moslashish bo'lishi kerak, noutbuk va personal
   kompyuterda ham».

   O'LCHANDI (jonli saytda, puppeteer bilan):

     360px telefon   → idish 318, jadval 318  — sig'adi
     390px telefon   → idish 348, jadval 348  — sig'adi
     1366px noutbuk  → idish 278, jadval 302  — 24px CHIQIB KETADI
     1920px kompyuter→ idish 338, jadval 338  — sig'adi

   Ya'ni muammo EKRAN kengligida emas, USTUN IDISHINING
   kengligida: 1366px da chap ustun 278px ga tushadi,
   jadvalning eng kichik kengligi esa 302px.

   Shuning uchun `@media` YARAMAYDI — u ekranni o'lchaydi,
   idishni emas. `@container` idishning O'ZINI o'lchaydi.

   ASOS sifatida to'ldirish ham kamaytirildi: container
   query qo'llab-quvvatlanmagan brauzerda ham sig'sin. */
.jadval-orami { container-type: inline-size; }

@container (max-width: 330px) {
  .royxat-jadval th { padding: 9px 7px; }
  .royxat-jadval td { padding: 10px 7px; }
}

@container (max-width: 290px) {
  .royxat-jadval th { padding: 8px 5px; font-size: 10.5px; }
  .royxat-jadval td { padding: 9px 5px; font-size: 12.5px; }
}
.royxat-jadval td.ong { text-align: right; }
.royxat-jadval tbody tr { cursor: pointer; transition: background .12s; }
.royxat-jadval tbody tr:hover { background: var(--panel-2); }

.royxat-jadval tbody tr.tanlangan {
  background: rgba(194, 161, 77,.16);
  box-shadow: inset 3px 0 0 var(--asosiy-2);
}

.token-nom { display: flex; align-items: center; gap: 9px; font-family: var(--shrift); }
.token-nom b { font-weight: 700; letter-spacing: .3px; }
.token-nom .tanga { width: 24px; height: 24px; font-size: 9.5px; }

/* ── grafik paneli ───────────────────────────────────── */
.grafik-boshi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--chegara);
}

.grafik-nom { display: flex; align-items: center; gap: 12px; }
.grafik-nom .tanga { width: 38px; height: 38px; font-size: 13px; }
.juftlik { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
.juftlik-izoh { font-size: 12px; color: var(--izoh); }
.juftlik-izoh.ogoh { color: var(--sariq); }

.grafik-narx { text-align: right; }
.grafik-narx .qiymat {
  font-family: var(--raqam); font-size: 26px; font-weight: 600;
  letter-spacing: -.5px;
}
.grafik-narx .foiz { font-family: var(--raqam); font-size: 14px; }

.grafik-qator {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--chegara);
}

.oraliqlar, .tur-tanlov { display: flex; gap: 5px; }

.oraliqlar button, .tur-tanlov button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--izoh);
  font-family: var(--raqam);
  font-size: 13px;
  padding: 6px 11px;
  cursor: pointer;
  transition: all .14s;
}
.oraliqlar button:hover, .tur-tanlov button:hover {
  color: var(--matn); border-color: var(--chegara);
}
.oraliqlar button.tanlangan, .tur-tanlov button.tanlangan {
  background: var(--asosiy); border-color: var(--asosiy);
  color: var(--fon); font-weight: 600;
}
.tur-tanlov button { font-size: 15px; line-height: 1; padding: 6px 10px; }

.grafik-maydon { position: relative; }
.grafik-oyna { height: 340px; width: 100%; position: relative; }

.grafik-holat {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--izoh); font-size: 14px;
  background: var(--fon-2);
  text-align: center; padding: 20px;
}
.grafik-holat.yashirin { display: none; }

.grafik-raqamlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border-top: 1px solid var(--chegara);
}
.grafik-raqamlar > div { padding: 11px 16px; border-right: 1px solid var(--chegara); }
.grafik-raqamlar > div:last-child { border-right: none; }
.grafik-raqamlar dt { font-size: 11px; color: var(--izoh); text-transform: uppercase; letter-spacing: .5px; }
.grafik-raqamlar dd { font-family: var(--raqam); font-size: 15px; margin-top: 3px; }

/* ── hisoblagichdagi birlik ──────────────────────────── */
.birlikli { position: relative; display: flex; align-items: center; }
.birlikli input { padding-right: 62px; }
.birlikli .birlik {
  position: absolute; right: 12px;
  font-family: var(--raqam); font-size: 13px; font-weight: 600;
  color: var(--izoh); pointer-events: none;
}
.yordam { display: block; margin-top: 6px; font-size: 12px; color: var(--izoh); }

/* ── PAROL MOSLIGI BELGISI (1.510-qoida) ─────────────
   Ro'yxatdan o'tishda parol ikki marta kiritiladi.
   Rang YAKKA xabarchi emas — matn ham o'zgaradi
   («parollar mos» / «parollar bir xil emas»), shuning
   uchun rangni ajratmaydigan odam ham tushunadi. */
.yordam.mos { color: var(--yashil); }
.yordam.nomos { color: var(--qizil); }

/* ── PAROL QOIDASI RO'YXATI (1.514-qoida) ────────────
   Har talab alohida qator. Rang YAKKA xabarchi emas:
   belgi ham o'zgaradi (· → ✓), ya'ni rangni
   ajratmaydigan odam ham holatni ko'radi. */
.parol-qoida {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--izoh);
}
.parol-qoida li::before {
  content: "·";
  display: inline-block;
  width: 14px;
  font-weight: 700;
}
.parol-qoida li.mos { color: var(--yashil); }
.parol-qoida li.mos::before { content: "✓"; }
.parol-qoida li.nomos { color: var(--qizil); }
.parol-qoida li.nomos::before { content: "×"; }

@media (max-width: 980px) {
  .birja { grid-template-columns: 1fr; }
  /* BITTA USTUNGA tushganda `height: 0` NI BEKOR QILISH.
     ═══════════════════════════════════════════════════
     TOPILGAN XATO (bank egasi telefondan skrinshot
     yubordi, 2026-09-30): bozor bo'limida token ro'yxati
     va grafik paneli BIR-BIRINING USTIGA chizilgan —
     «$83,437.54» narxi ZRO va PUMP qatorlari ustida
     turardi.

     Sababi: yuqoridagi `.birja-royxat { height: 0 }`
     qoidasi IKKI USTUNLI setka uchun yozilgan (qator
     balandligini faqat o'ng ustun belgilasin degan
     hiyla). Bitta ustunda esa u tom ma'noda NOL
     BALANDLIK beradi: element oqimda joy egallamaydi va
     keyingi blok uning ustiga tushadi.

     Telefonda hiyla KERAK EMAS — ro'yxat o'z balandligini
     oladi va 320px dan oshsa ichida suriladi. */
  .birja-royxat {
    height: auto;
    min-height: 0;
    max-height: 320px;
  }
  .grafik-oyna { height: 280px; }
  .mayda-yashir { display: none; }
}

@media (max-width: 720px) {
  .grafik-boshi { flex-direction: column; align-items: flex-start; gap: 10px; }
  .grafik-narx { text-align: left; }
  .bolim, header.tepa { scroll-margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .menyu { transition: none; }
  .royxat-jadval tbody tr { transition: none; }
}

/* Muddat tugmasida foiz ham ko'rinadi: «12 oy / 14%».
   Shunda mijoz tanlashdan OLDIN farqni ko'radi. */
.tanlov button { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.tanlov button .tugma-foiz {
  font-family: var(--raqam); font-size: 12.5px; font-weight: 700;
  color: var(--yashil);
}
.tanlov button.tanlangan .tugma-foiz { color: #D1FAE5; }

/* Ro'yxatdagi token belgisi — faqat RANG. Matn yozilsa
   yonidagi token nomi bilan «TON TON» bo'lib takrorlanadi. */
.tanga.nuqta { width: 12px; height: 12px; border-radius: 50%; }
.token-nom .tanga.nuqta { width: 10px; height: 10px; }
.grafik-nom .tanga { font-size: 17px; font-weight: 800; }

/* Yuklab olishga TAYYOR EMAS paket. Havola olib tashlanadi,
   shuning uchun quti bosilmaydi — mijoz 404 olmaydi. */
.yuklash-quti.tayyor-emas {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(1);
}
.yuklash-quti.tayyor-emas:hover {
  transform: none;
  border-color: var(--chegara);
}

/* Bo'lim ichidagi ikkinchi darajali sarlavha (to'lovlar
   jadvali kabi) — asosiy h2 dan kichik, lekin ajralib
   turadi. */
.kichik-sarlavha {
  margin: 28px 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--matn);
  letter-spacing: .01em;
}
.jadval td.raqam {
  font-family: var(--raqam-shrift, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── KABINET ─────────────────────────────────────────── */
/* Kabinet bo'limi — kirish, kartalar, hamyonlar, bitimlar.
   Boshqa bo'limlardan farqi: u YOPIQ turadi va «Kirish»
   tugmasi bosilganda ochiladi. */
/* ══ KABINET TEPASIDAGI BO'SH JOY (1.688-qoida) ══════════
   Bank egasi (2026-10-25): «mijoz login qilganida chapda
   yuqoridagi JMSMMBANK logotipi bilan bo'limlar boshlanishi
   orasida ko'p ochiq joy bor. uni qisqartirish kerak» va
   «u ham huddi bosh menyudagi logotip va USDT · BTC · ETH …
   yozuvi orasi kabi qisqa bo'lishi kerak».

   O'LCHANGAN NAMUNA: logotip pastki qirrasi 63px, «USDT ·
   BTC · ETH …» qatori 105px da boshlanadi — ORALIQ 43px.

   SABAB: `.bolim` ning tepa to'ldirmasi 104px. U BOSH
   SAHIFA bo'limlari uchun — ular bir-biridan ajralib
   turishi kerak. Kabinet esa kirgan mijoz uchun YAGONA
   ko'rinadigan bo'lim, ya'ni uni pastga surishning ma'nosi
   yo'q: mijoz har safar aylantirishga majbur bo'lardi.

   Qat'iy menyu balandligi 92px, demak 16px to'ldirma
   sarlavhani 108px ga qo'yadi — namunadagi 105px bilan
   bir xil qator. */
.kabinet .setka { align-items: start; }
.yashirin { display: none !important; }

.kabinet-bosh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--panel-2);
  border: 1px solid var(--chegara);
  border-radius: 12px;
}
.kabinet-amallar { display: flex; gap: 8px; flex-wrap: wrap; }

.royxat { list-style: none; padding: 0; margin: 0 0 12px; }
.royxat li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--chegara);
  font-size: .92rem;
}
.royxat li:last-child { border-bottom: 0; }

.mayda-tugma {
  background: transparent;
  border: 1px solid var(--chegara);
  color: var(--izoh);
  border-radius: 8px;
  /* BARMOQ UCHUN YETARLI (1.453-qoida): telefon sinovi
     «52×29» deb yiqildi — nishon balandligi kamida 36 px
     bo'lishi kerak, aks holda mijoz tugmani ura olmaydi
     va yonidagi matnni bosib yuboradi. */
  min-height: 36px;
  padding: 7px 12px;
  font-size: .8rem;
  cursor: pointer;
}
.mayda-tugma:hover { color: var(--matn); border-color: var(--asosiy); }
/* HAVOLA SIFATIDA ishlatilganda (footerdagi
   qo'llab-quvvatlash markazi): `min-height` oddiy
   `inline` elementga QO'LLANMAYDI — balandlik matn
   bo'yicha qolib, barmoq nishoni 36px dan kichik
   bo'lardi (1.453-qoida). `inline-flex` buni yopadi. */
a.mayda-tugma {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-top: 4px;
}
/* O'CHIRISH tugmasi (1.445-qoida) — qaytarib bo'lmaydigan
   amal, shuning uchun ko'rinishidan ham farq qiladi. */
.mayda-tugma.xavfli { color: var(--qizil); border-color: var(--qizil); }
.mayda-tugma.xavfli:hover { color: #fff; background: var(--qizil); }

.bitim-royxat { display: flex; flex-direction: column; gap: 10px; }
.bitim-karta {
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--chegara);
  border-radius: 10px;
}
.bitim-karta.yangi { border-color: var(--asosiy); }
.bitim-karta b { display: block; margin-bottom: 4px; }
.bitim-yoriq { font-size: .88rem; margin: 6px 0 10px; line-height: 1.5; }
.bitim-yoriq code {
  display: inline-block;
  padding: 2px 6px;
  background: var(--fon);
  border-radius: 6px;
  font-size: .82rem;
  word-break: break-all;
}
.bitim-karta .tugma { margin-top: 4px; }

/* ── TOPSHIRISH QADAMLARI (1.699-qoida) ───────────────
   Xaridor akkauntni haqiqatan o'ziga o'tkazganini
   belgilaydigan ro'yxat. «Tovarni oldim» tugmasi hamma
   qadam belgilanmaguncha ishlamaydi (qulf SERVERDA).

   TEGISH BALANDLIGI 36px dan kam bo'lmasin: bu telefonda
   bosiladigan element (1.688-qoidaning ayni sababi). */
.qadamlar {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--chegara);
  border-radius: 10px;
  /* Blok BITIM KARTASI (`--panel-2`) ichida turadi,
     shuning uchun foni `--panel`: bir-biridan ajralib
     turadi. Yo'q o'zgaruvchi yozilsa rang JIMGINA
     shaffof bo'lib qolardi. */
  background: var(--panel);
}
.qadamlar-sarlavha {
  margin: 0 0 4px;
  font-size: .86rem;
  font-weight: 600;
}
.qadam {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 4px 0;
  font-size: .86rem;
  line-height: 1.45;
  cursor: pointer;
}
.qadam input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
/* BELGILANGAN QADAM — xaridor nimani bajarganini bir
   qarashda ko'rsin. */
.qadam input:checked + span { color: var(--izoh); }
.qadam input:disabled { cursor: default; }
.qadam input:disabled + span { opacity: .85; }

/* ── JONLI SELFI oynasi ───────────────────────────────── */
.selfi-qator {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.selfi-qator .tugma { margin: 0; }
.selfi-orqa {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 5, 3, .82);
}
.selfi-oyna {
  width: min(520px, 100%);
  padding: 18px 20px 20px;
  background: var(--panel);
  border: 1px solid var(--chegara);
  border-radius: 14px;
  text-align: center;
}
.selfi-sarlavha { margin: 0 0 8px; }
.selfi-ishora {
  min-height: 3em;
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.5;
}
/* TASDIQ OYNASI tugmalari (1.437-qoida). «Yo'q» chapda,
   «Ha» o'ngda — odam o'ngdagini bosishga o'rgangan,
   shuning uchun xavfli amal O'NGDA va u asosiy rangda. */
.tasdiq-tugmalar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

/* YUMALOQ KAMERA (1.434-qoida).
   Bank egasining talabi (2026-10-12): «xuddi binance
   baybit birjalaridagi kabi yumaloq kamera».

   Nega to'g'ri: doira odamga yuzini QAYERGA qo'yishni
   aytadi — to'rtburchakda odam chetga chiqib qoladi va
   kadrda yuzning yarmi tushadi. Doira ustidagi halqa esa
   ishora bajarilishini ko'rsatadi.

   `aspect-ratio: 1` + `border-radius: 50%` — kvadrat
   maydon, doira ko'rinish. `max-width` bilan telefonda
   ham ekranga sig'adi. */
.selfi-ekran {
  position: relative;
  overflow: hidden;
  background: #000;
  /* CHEGARA YO'Q (1.476-qoida). Bank egasi ikkinchi
     marta: «yuzni ishorani tasdiqlashda chiqadigan
     yashil yoki ko'k oynaning kalinligi juda qalin».
     Halqa 2 px ga tushirilgan edi, LEKIN uning ostida
     yana 2 px chegara turardi — ekranda ular qo'shilib
     4 px bo'lib ko'rinardi. Endi HALQANING O'ZI
     chegara vazifasini bajaradi: to'lmagan qismi xira,
     to'lgani ko'k, bajarilganda yashil. */
  border: none;
  border-radius: 50%;
  aspect-ratio: 1;
  width: min(280px, 72vw);
  margin: 0 auto;
}
/* HALQA — ishora bajarilishi ko'rsatkichi. `conic-gradient`
   burchak bo'yicha to'ladi, ya'ni doira atrofida aylanadi.
   `--foiz` ni JS qo'yadi (0..100). */
.selfi-ekran::after {
  content: "";
  position: absolute;
  /* HALQA — AYNAN 2 PIKSEL (1.478-qoida).
     ═══════════════════════════════════════════════════
     `closest-side` VA `100%` SHART. Ilgari bu yerda
     `radial-gradient(circle, … calc(50% - 2px) …)`
     turardi va u BUTUNLAY boshqa narsa chizardi.

     Sabab: `radial-gradient` ning sukut o'lchami —
     `farthest-corner`, ya'ni radius element markazidan
     eng uzoq BURCHAKKACHA. 280 piksellik doirada bu
     198 piksel (140×√2), `50%` esa 99 piksel. Natijada
     mask 99 pikseldan TASHQARIDAGI hamma narsani
     ko'rsatardi — halqa 2 emas, 140−99 = **41 piksel**
     qalinlikda chiqardi va yuz uchun joyni yeb qo'yardi.

     `closest-side` radiusni element YARMIGA (140 px)
     tenglashtiradi, `calc(100% - 2px)` esa 138 px —
     shundan 140 gacha aynan 2 piksel qoladi.

     O'LCHANDI: brauzer surati piksel bo'yicha
     tekshirildi (sinov `sinov_brauzer.js` da). */
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    var(--asosiy) calc(var(--foiz, 0) * 1%),
    var(--chegara) 0);
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2px), #000 calc(100% - 2px));
  transition: background 120ms linear;
}
/* ISHORA BAJARILDI — halqa yashil bo'lib to'ladi.
   Chegara YO'Q, shuning uchun qalinlik o'zgarmaydi
   (1.476-qoida). */
.selfi-ekran.bajarildi::after {
  background: conic-gradient(var(--yashil, #3FB950) 100%, transparent 0);
}
.selfi-ekran video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Oyna ko'rinishi: odam o'zini ko'zgudek ko'rsa
     ishorani to'g'ri bajaradi. */
  transform: scaleX(-1);
}
.selfi-holat {
  margin: 10px 0 12px;
  font-variant-numeric: tabular-nums;
  color: var(--asosiy-2);
}
.selfi-tugmalar {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Bitim oynasi — selfi oynasining o'lchamini oladi, lekin
   ichida maydonlar bor, shuning uchun chapga tekislanadi. */
.bitim-oyna { text-align: left; }
.bitim-oyna .maydon { margin-bottom: 10px; }
.bitim-oyna .selfi-tugmalar { justify-content: flex-start; }

/* Ogohlantirish — sariq chegarali qator. Mijoz «pul
   qaytmaydi» deb o'ylab qolmasligi uchun aniq matn. */
.ogohlantirish {
  padding: 8px 10px;
  border-left: 3px solid var(--sariq, #F59E0B);
  background: rgba(245, 158, 11, .08);
  border-radius: 6px;
  line-height: 1.5;
}

/* Zaxira grafik — kutubxonasiz ko'rinish */
.zaxira-grafik { width: 100%; height: 100%; display: block; }
.zaxira-yorliq {
  position: absolute;
  top: 8px;
  left: 12px;
  padding: 4px 8px;
  font-family: var(--raqam);
  font-size: 12px;
  color: var(--matn);
  background: rgba(20, 19, 15, .82);
  border: 1px solid var(--chegara);
  border-radius: 6px;
  pointer-events: none;
}


/* ── OYNA (kirish / ro'yxat) ─────────────────────────────
   Bank egasi: «oyna tugma bosilganda ochilishi kerak».
   Shakllar sahifada ochiq turmaydi — shu qatlamda chiqadi.
   Uslub `selfi-orqa` bilan bir xil ko'rinishda. */
.oyna-orqa {
  position: fixed;
  inset: 0;
  z-index: 70;            /* menyudan (50) va selfidan (60) tepada */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 5, 3, .84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.oyna-orqa.yashirin { display: none; }

/* Oyna ochiq turganda orqa fon SURILMAYDI — aks holda
   oynadagi maydonga yozayotganda sahifa siljib ketadi. */
body.oyna-ochiq { overflow: hidden; }


.oyna-quti {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px 22px 20px;
  background: linear-gradient(160deg, var(--panel), var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.oyna-quti h3 { margin: 0 20px 14px 0; }

.oyna-yop {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--izoh);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.oyna-yop:hover { color: var(--matn); background: var(--fon-2); }

/* Kirish taklifi — oyna ochilmagan holat */
.kirish-panel { display: flex; justify-content: center; }
.kirish-taklif { max-width: 520px; text-align: center; }
.kirish-tugmalar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 12px;
}

/* Yassi tugma — matn havolasidek, lekin tugma */
.tugma.yassi {
  background: transparent;
  border-color: transparent;
  color: var(--asosiy-2);
  padding-left: 6px;
  padding-right: 6px;
}
.tugma.yassi:hover { color: var(--matn); text-decoration: underline; }

/* Bank egasi: «Hisobingiz yo'qmi?» dagi tugma yozuvdan
   AJRALIB tursin — shuning uchun kichik to'rtburchak
   chiziqqa olinadi. */
.tugma.chegarali {
  background: transparent;
  border: 1px solid var(--asosiy-2);
  color: var(--asosiy-2);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 6px;
}
.tugma.chegarali:hover {
  background: var(--asosiy-2);
  color: var(--fon);
}


/* Muvaffaqiyat xabari (ro'yxatdan o'tish, saqlandi…) */
.hisob-eslatma.yaxshi { color: var(--yashil); }

/* ── KABINET TARTIBI ─────────────────────────────────────
   Bank egasi so'radi: «kabinet funksiyalarini menyu
   ko'rinishida oynaning chap tomonida ko'rsatish… menyu chap
   oynada qadalib turadi. asosiy oynada esa tanlangan
   funksiyaga oid malumotlar» va «har bir funksiya yangi oyna
   sifatida ochilishi kerak». */
.kabinet-tartib {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.kabinet-menyu {
  position: sticky;
  /* Yuqoridagi qadalgan menyu ostida qolmasin */
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: linear-gradient(160deg, var(--panel), var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 14px;
}

/* KABINET BO'LIM YO'LLARI — CHEGARA BILAN AJRALADI
   (1.631-qoida). Ilgari `border: 0` edi: bosilmagan
   bo'lim shunchaki yozuv bo'lib turardi. */
.kab-yol {
  display: block;
  width: 100%;
  padding: 10px 13px;
  margin-bottom: 6px;
  text-align: left;
  font: inherit;
  font-size: 14.5px;
  color: var(--izoh);
  background: rgba(194, 161, 77, .07);
  border: 1px solid var(--chegara);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}

.kab-yol:hover {
  background: rgba(194, 161, 77, .16);
  color: var(--matn);
  border-color: var(--asosiy);
}

.kab-yol.joriy {
  background: var(--asosiy);
  color: var(--fon);
  border-color: var(--asosiy-2);
  font-weight: 600;
}

.kab-yol b {
  font-family: var(--raqam);
  font-size: 12px;
  color: var(--sariq);
}
.kab-yol.joriy b { color: var(--fon); }

/* O'ng tomon — tanlangan funksiya joyi.
   `min-width: 0` SHART: ichida keng jadval bor (bozor
   e'lonlari 8 ustun). Grid elementi standart holda o'z
   tarkibiga qarab kengayadi va butun sahifa yonga
   suriladi — bu qator shuni to'xtatadi, jadval esa o'z
   o'rami ichida suriladi. */
.kabinet-asos { min-width: 0; }

/* Tanlangan funksiya — O'Z oynasi (quti) */
.kab-oyna {
  padding: 18px 20px 20px;
  background: linear-gradient(160deg, var(--panel), var(--fon-2));
  border: 1px solid var(--chegara);
  border-radius: 16px;
}

.kab-oyna > h3:first-child { margin-top: 0; }

/* PLANSHET: menyu bir qatorda, kerak bo'lsa suriladi. */
@media (max-width: 900px) {
  .kabinet-tartib { grid-template-columns: 1fr; }
  .kabinet-menyu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }
  .kab-yol { white-space: nowrap; }
}

/* ── TELEFON UCHUN O'LCHAMLAR ────────────────────────────
   O'lchandi (2026-09-29, haqiqiy brauzerda, 360–393 px):
     * pastdagi havolalar («FAQ», «Xavfsizlik») balandligi
       16 px edi — barmoq bilan bosish qiyin;
     * grafik ko'rsatkichlari 11 px — telefonda mayda.
   Kompyuterda o'lchamlar o'zgarmaydi: bu qoidalar faqat
   tor ekranda ishlaydi. */
/* PLANSHET ham SENSORLI: nishon va matn o'lchamlari
   telefonda ham, planshetda ham bir xil qoidaga bo'ysunadi
   (o'lchandi: 768 px da havolalar 27×16 px edi). */
@media (max-width: 900px) {
  .royxat-jadval th,
  .narx-karta .past-qator,
  .xavf-yorliq { font-size: 12.5px; }
  .grafik-raqamlar dt { font-size: 12.5px; }
  .grafik-raqamlar dd { font-size: 16px; }
  .til-tugma { min-height: 40px; }
  .past-ichi a {
    display: inline-block;
    padding: 11px 10px;
    min-height: 40px;
    min-width: 44px;
  }
}

@media (max-width: 620px) {
  /* Pastdagi havolalar — barmoq uchun keng nishon */
  .past-ichi a {
    display: inline-block;
    /* Yon tomondan ham bo'shliq: «FAQ» kabi qisqa so'z
       ham barmoq sig'adigan nishon bo'lsin. */
    padding: 11px 10px;
    min-height: 40px;
    min-width: 44px;
  }
  /* Grafik ko'rsatkichlari — o'qiladigan o'lcham */
  .grafik-raqamlar dt { font-size: 12.5px; }
  .grafik-raqamlar dd { font-size: 16px; }
  /* Jadval va ro'yxatlardagi mayda matn ham */
  .mayda { font-size: 13px; }
  small.yordam { font-size: 12.5px; }
}

/* TELEFON: bandlar IKKI USTUNGA yoyiladi.
   O'LCHANDI (2026-09-29): 375 px ekranda gorizontal
   surilma ichida o'n bandning faqat uchtasi ko'rinardi —
   qolganini topish uchun yonga surish kerak edi va mijoz
   «Kartalarim» ni umuman ko'rmasligi mumkin.
   Ikki ustunda hammasi BIR KO'RISHDA. */
@media (max-width: 620px) {
  .kabinet-menyu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
    gap: 6px;
  }
  .kab-yol {
    white-space: normal;
    text-align: center;
    padding: 12px 8px;
    font-size: 13.5px;
    /* Barmoq uchun: ikki qatorli nom ham sig'adi */
    min-height: 44px;
  }
}

/* ── KIRGAN HOLAT: faqat KABINET ──────────────────────────
   Bank egasi: «login qilingach saytdagi barcha boshqa
   malumotlar ko'rinmay faqat kabinetga aloqador malumotlar
   qolishi kerak». */
body.kirgan header.tepa,
body.kirgan #yugurik,
body.kirgan main > section:not(#kabinet) { display: none !important; }

/* Menyudagi bo'lim havolalari ham kerak emas — mijoz
   kabinetda ishlaydi. Til tanlash va «Chiqish» qoladi. */
body.kirgan .menyu-yollar a { display: none; }

/* O'LIK HAVOLA BO'LMASIN (1.443-qoida).
   Bank egasi topdi: «Login qilinganda pastdagi savollar
   bosilsa havola …/#savollar bo'lyapti ammo hech narsa
   o'zgarmayapti».
   Sabab: kirgan holatda `main > section:not(#kabinet)`
   yashiriladi, pastdagi havolalar esa O'SHA yashirin
   bo'limlarga ishora qilib turardi — bosilsa manzil
   o'zgarardi, ekran esa o'zgarmasdi. Yashirin bo'limga
   olib boradigan havola KO'RSATILMAYDI. */
body.kirgan footer.past a[href^="#"] { display: none; }

/* Pastdagi narx lentasi yo'q — uning joyi ham kerak emas */
body.kirgan { padding-bottom: 0; }


/* ── BUTUN SAYT FONI ─────────────────────────────────────
   Bank egasi: «fon qo'yildi ammo eng pastki aloqa qismiga va
   bu fon ham bachkana».

   Ikki xato tan olinadi: fon FAQAT footerda edi, va harakatli
   kanvas (suzuvchi svechalar) jiddiy bank saytiga
   yarashmaydi — o'yin sahifasiga o'xshaydi. Kanvas butunlay
   olib tashlandi (`fon.js` o'chirildi).

   O'rniga — BUTUN sahifa ostida turuvchi, harakatsiz va
   xarajatsiz ikki qatlam:
     1) yumshoq rangli yoyilmalar — chuqurlik beradi, matnni
        bosmaydi;
     2) juda xira to'r — «moliyaviy panel» hissi; chetlari
        so'nadi, aks holda qafasga o'xshaydi.

   Ikkisi ham `fixed`: sahifa surilganda fon joyida qoladi va
   har bo'lim ostida bir xil ko'rinadi. JS yo'q, rasm yo'q,
   animatsiya yo'q — protsessor ham, tarmoq ham yuklanmaydi. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background:
    radial-gradient(1150px 620px at 12% -6%,
                    rgba(194, 161, 77, .17), transparent 62%),
    radial-gradient(900px 540px at 88% 4%,
                    rgba(95, 191, 138, .10), transparent 64%),
    radial-gradient(760px 460px at 52% 104%,
                    rgba(223, 196, 120, .11), transparent 62%);
}

body::after {
  z-index: -1;
  background-image:
    linear-gradient(rgba(51, 46, 34, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 46, 34, .22) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 22%,
                                      #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 22%,
                              #000 15%, transparent 78%);
}

/* Footer fon ustida turadi */
.past { position: relative; isolation: isolate; }
.past-ichi,
.past > p { position: relative; z-index: 1; }


/* ── RAQAMLANGAN KARTALAR (/01 /02 /03) ──────────────────
   Raqam bezak emas: mijoz uchta xizmatning nechtasi borligini
   va qaysi biri qaysi ekanini bir qarashda ko'radi. */
.quti[data-raqam]::before {
  content: "/" attr(data-raqam);
  display: block;
  margin-bottom: 14px;
  font-family: var(--raqam);
  font-size: 13px;
  letter-spacing: 1.6px;
  color: var(--asosiy-2);
  opacity: .85;
}

/* Bo'lim ustidagi kichik yorliq — «qaysi bo'limdaman» */
.bolim-yorliq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 5px 12px;
  font-family: var(--raqam);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--asosiy-2);
  background: rgba(194, 161, 77, .12);
  border: 1px solid rgba(194, 161, 77, .28);
  border-radius: 999px;
}

/* ── ISHONCH QATORI ──────────────────────────────────────
   Bu yerda FAQAT tizimda haqiqatan bor narsa yoziladi.
   O'zi yo'q sertifikat («ISO») yozish — mijozni aldash. */
.ishonch {
  /* Qahramon bilan BIR chizig'da turadi (o'sha kenglik va
     chekka) — aks holda qatordagi belgilar sahifa chetiga
     yopishib qoladi. */
  max-width: var(--kenglik);
  margin: 38px auto 0;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ishonch-belgi {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--izoh);
  background: rgba(31, 28, 22, .6);
  border: 1px solid var(--chegara);
  border-radius: 12px;
}

.ishonch-belgi b { color: var(--matn); font-weight: 600; }
.ishonch-belgi i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yashil); font-style: normal;
  box-shadow: 0 0 10px rgba(95, 191, 138, .8);
}

@media (max-width: 720px) {
  .bolim { padding: 72px 20px; }
  .quti { padding: 24px 22px; }
}


/* ── NIZO CHATI (uch tomonlama) ──────────────────────────
   Bank egasi: «3 tomon ham bir birini yozganini ko'rib
   turadi». Shuning uchun xabarlar BITTA ustunda, xodimniki
   esa ajratib ko'rsatiladi — kim yozgani darrov bilinsin. */
.nizo-chat {
  margin-top: 14px;
  padding: 14px;
  background: var(--fon-2);
  border: 1px solid var(--chegara);
  border-radius: 12px;
}

.nizo-xabarlar {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.nizo-xabar {
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--chegara);
  border-radius: 10px;
  font-size: 14px;
}

.nizo-xabar b { color: var(--izoh); font-size: 12.5px; }
.nizo-xabar p { margin-top: 4px; line-height: 1.55; }

/* Xodim xabari ajralib tursin — u qaror qabul qiladi. */
.nizo-xabar.xodim {
  border-color: var(--asosiy);
  background: rgba(194, 161, 77, .1);
}

.nizo-rasm {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--chegara);
}

.nizo-maydon {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--matn);
  background: var(--fon);
  border: 1px solid var(--chegara);
  border-radius: 10px;
  resize: vertical;
}

.nizo-tugmalar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.nizo-fail, .nizo-fayl { font-size: 13px; color: var(--izoh); }

/* ── BITIM TAYMERI ───────────────────────────────────────
   Ortga sanash BIR QATORDA — bank egasining talabi. */
.bitim-taymer {
  margin: 6px 0;
  padding: 7px 11px;
  font-family: var(--raqam);
  font-size: 13.5px;
  color: var(--matn);
  background: rgba(194, 161, 77, .12);
  border: 1px solid rgba(194, 161, 77, .3);
  border-radius: 9px;
  display: inline-block;
}

.bitim-taymer.ogohlantirish {
  color: var(--sariq);
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .35);
}

/* Ikki bosqichli kirish bo'limini ajratuvchi chiziq */
.ajratgich {
  border: 0;
  border-top: 1px solid var(--chegara);
  margin: 26px 0 18px;
}

/* ══ ICHKI BO'LIMCHALAR (1.459-qoida) ═════════════════
   Bank egasi: «bu bo'limni ham shu bo'lim ichida ikki
   kichik bo'limchaga ajrat… har biri bosilganda alohida
   faqat o'ziga tegishli malumotlar bilan». */
.ichki-yollar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.ichki-yol {
  background: transparent;
  border: 1px solid var(--chegara);
  color: var(--izoh);
  border-radius: 10px;
  padding: 9px 16px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.ichki-yol:hover { color: var(--matn); border-color: var(--asosiy-2); }
.ichki-yol.joriy {
  color: var(--fon);
  background: var(--asosiy);
  border-color: var(--asosiy);
}

/* ── HUJJAT TOMONLARI VA KAMERA (1.542, 1.543) ───────
   Bank egasi (2026-10-17): «old orqasini yuklash
   majburiy» va «ham yuklash, ham pryamoy kamera orqali
   suratga olishni qo'shish kerak».

   `ochiq-emas` — orqa tomon maydoni oldi yuklanmaguncha
   SO'LG'IN turadi. `disabled` atributi faqat `input` da,
   ko'rinadigan tugma esa `span` — shuning uchun holat
   SINF bilan ham ko'rsatiladi. */
.fayl-tugma.ochiq-emas {
  opacity: .45;
  cursor: not-allowed;
}

/* Kamera tugmasi fayl tanlashdan PASTDA, ensiz qator. */
.kamera-qatori {
  margin-top: -6px;
}

.kamera-qatori .fayl-tugma {
  display: inline-block;
  width: auto;
}

/* ── TEPADAGI BILDIRISHNOMA TUGMASI (1.664-qoida) ──────
   Bank egasi (2026-10-24): «bildirishnomalar bo'limlar
   bo'limida pastda bo'lib qolgan. uni tepaga chiqish va
   til almashtirishlar qatoriga qo'yish mumkinmi?» */
/* QO'NG'IROQCHA KATTA (bank egasi, 2026-10-24):
   «katta qo'ng'iroqcha qo'ysang ham bo'ladi. muhimi u
   yuqorida ajrab turishi kerak». */
#xabar-tugma { position: relative; padding: 6px 12px; }
#xabar-tugma .qongiroq { font-size: 20px; line-height: 1; }
.xabar-sanoq:empty { display: none; }
.xabar-sanoq {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #DC2626; color: #FFFFFF;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}
#xabar-tugma.yangi-bor { border-color: #DC2626; }

/* ── BILDIRISHNOMA OYNASI (1.665-qoida) ───────────────
   Bank egasi (2026-10-25): «barcha bildirishnomalar
   qo'ng'iroqchada ko'rinsiz tarixdagilar ham, ko'p bo'lsa
   sichqoncha g'ildiragi bilan aylantirib pastga tushib
   ko'rish mumkin bo'lsin».

   Shuning uchun ro'yxat O'Z ICHIDA aylanadi: oyna
   ekrandan oshib ketmaydi, ro'yxat esa to'liq. */
.oyna-quti.keng { max-width: min(680px, 94vw); }
.xabar-oyna-royxat {
  max-height: min(60vh, 460px);
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 4px;
  text-align: left;
}
/* Aylantirgich ko'rinib tursin — ro'yxat davom etishini
   mijoz BILISHI kerak. */
.xabar-oyna-royxat::-webkit-scrollbar { width: 8px; }
.xabar-oyna-royxat::-webkit-scrollbar-thumb {
  background: #CBD5E1; border-radius: 4px;
}
.xabar-oyna-royxat::-webkit-scrollbar-track { background: transparent; }

/* ══ O'QILMAGAN XABAR BOSILADIGAN (1.682-qoida) ═══════════
   Bank egasi: «o'qilmagan xabarga bir tegish bilan o'qilgan
   qilib belgilash yaxshi yechim».

   Bosiladigan ekani KO'RINISHDAN bilinishi kerak — aks holda
   mijoz bosish mumkinligini bilmaydi. */
.bitim-karta.bosiladigan { cursor: pointer; }
.bitim-karta.bosiladigan:hover {
  border-color: var(--asosiy, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}
.bitim-karta.bosiladigan:active { transform: translateY(1px); }

/* 1.688 — KABINET TEPASIDAGI BO'SH JOY.
   `.bolim` ning 104px padding'i qo'nish sahifasining nafas
   olishi uchun. Kabinet esa KIRGANDAN keyin suriladi: mijoz
   menyuning TAGIDA darhol «Kabinet» sarlavhasini ko'rishi
   kerak, 104px bo'shliqni emas.

   O'lchangan nishon (egasi ko'rsatgan namuna — bosh menyudagi
   logotip bilan «USDT · BTC · ETH …» lentasi orasi):
     logotip pastki qirrasi      63px
     lenta tepasi               105px
     FARQ                        43px
   Menyu `sticky`, balandligi 92px. Demak:
     scroll-margin-top 92px  → bo'lim tepasi aynan menyu tagida
     padding-top       14px  → matn 106px da boshlanadi
     logotipdan farq         106 − 63 = 43px  ✓ namuna bilan bir xil

   Telefonda menyu 85px — 92 bilan 7px bo'sh joy qoladi,
   bu zararsiz; 85 qilsak keng telefonlarda sarlavha menyu
   ostiga kirib ketardi.

   QOIDA SHU YERDA — FAYL OXIRIDA — turadi. `.bolim` ning
   padding'i 1100px va 720px media bloklarida qayta yoziladi;
   aniqlik bir xil (bitta klass) bo'lgani uchun KEYINGI qoida
   yutadi. Qoidani yuqoriga ko'chirsangiz telefonda padding
   yana 72px bo'lib qoladi — sinov buni ushlaydi.

   `scroll-margin-top` ni 92 dan KAMAYTIRMANG: u holda sarlavha
   menyu ostida qolib ko'rinmaydi. KO'PAYTIRMANG ham: bo'shliq
   yana paydo bo'ladi. */
.kabinet { scroll-margin-top: 92px; padding-top: 14px; }

/* ══════════════════════════════════════════════════════
   KATTA HARFLI OGOHLANTIRISH — e'lon va bitim oldidan
   ══════════════════════════════════════════════════════
   Bank egasining qarori (2026-10-27): ogohlantirish KO'ZGA
   TASHLANISHI kerak, oddiy mayda yozuv bo'lmasligi kerak.
   Shuning uchun qalin ramka, ogohlantirish rangi va
   o'zgarmas enlikdagi shrift — matn serverda qanday
   tekislangan bo'lsa, ekranda ham shunday turadi. */
.ogohlik {
  border: 2px solid var(--ogoh-chegara, #b3261e);
  background: var(--ogoh-fon, rgba(179, 38, 30, .06));
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
.ogohlik-matn {
  margin: 0 0 10px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.45;
  /* Uzun qator mobil ekranda SINADI — gorizontal
     aylantirish paydo bo'lmasin. */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 46vh;
  overflow-y: auto;
  color: var(--matn, #1a1a1a);
}
.ogohlik-belgi {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.ogohlik-belgi input {
  /* Barmoq bilan bosiladigan o'lcham: mobil ekranda
     kichik belgini bosish qiyin. */
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* Telefonda belgini barmoq bilan bosish mumkin bo'lishi
   kerak: 20px juda kichik. Mobil nishon o'lchami
   kamida 36px (sinov `sinov_sayt_mobil.js` da 375px
   ekranda shu o'lchamni talab qiladi, iOS tavsiyasi
   44pt). Kompyuterda esa ixcham qoladi — sichqoncha
   aniqroq. */
@media (max-width: 720px) {
  .ogohlik-belgi input {
    width: 36px;
    height: 36px;
    margin-top: 0;
  }
  .ogohlik-belgi { align-items: center; }
}

/* ══════════════════════════════════════════════════════
   MAJBURIY ONBOARDING TASMASI (2026-10-27)
   ══════════════════════════════════════════════════════
   Mijoz ro'yxatdan o'tgach avval TOTP, keyin KYC
   topshiradi. Tasma kabinetning yuqorisida turadi va
   KO'ZGA TASHLANADI: u yo'riqnoma, mayda eslatma emas. */
.onboarding {
  border: 2px solid var(--asosiy, #1b6ef3);
  background: var(--onboarding-fon, rgba(27, 110, 243, .07));
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.onboarding b { display: block; font-size: 1.02rem; margin-bottom: 6px; }
.onboarding p { margin: 0 0 12px; line-height: 1.5; }
.onboarding .tugma { margin: 0; }