/* ============================================================================
   Mehnat va bandlik — raqamli huquqiy yordamchi
   Portal uslublari. Tashqi kutubxonasiz, offline ishlaydi.

   Tuzilishi:
     0. Ranglar va o'lchov tokenlari (yorug' / qorong'i)
     1. Asos (reset, tipografiya)
     2. Tartib (wrap, header, menyu, footer)
     3. Bo'laklar (tugma, karta, maydon, nishon, ogohlantirish, akkordeon…)
     4. Sahifalar (bosh, agent, faq, qonunlar, haqida)
     5. Markdown javob tipografiyasi
     6. Moslashuv, harakatni kamaytirish, chop etish
   ============================================================================ */

/* ===== 0. TOKENLAR ======================================================== */

:root {
  /* Yorug' mavzu — asosiy qiymatlar */
  --fon:            #f4f7fb;
  --fon-2:          #ffffff;
  --fon-3:          #eaf0f7;
  --fon-shaffof:    rgba(255, 255, 255, .86);
  --chiziq:         #dce4ee;
  --chiziq-2:       #c3d0e0;
  --matn:           #0e1b2e;
  --matn-2:         #4f6076;
  --matn-3:         #7a8798;
  --brend:          #0f4c81;
  --brend-2:        #0b3a64;
  --brend-3:        #1a6bb0;
  --brend-yumshoq:  #e7f0f9;
  --turkuaz:        #0a92a8;
  --yashil:         #14713f;
  --yashil-yumshoq: #e4f3ea;
  --sariq:          #8a5a00;
  --sariq-yumshoq:  #fdf2df;
  --qizil:          #b3261e;
  --qizil-yumshoq:  #fdeceb;
  --belgi-fon:      #fff8d6;
  --belgi-matn:     #4a3a00;
  --halqa:          rgba(26, 107, 176, .45);
  --soya-1:         0 1px 2px rgba(14, 27, 46, .06), 0 1px 3px rgba(14, 27, 46, .07);
  --soya-2:         0 2px 6px rgba(14, 27, 46, .07), 0 8px 20px rgba(14, 27, 46, .07);
  --soya-3:         0 10px 34px rgba(14, 27, 46, .14);
  --hero-fon-1:     #0f4c81;
  --hero-fon-2:     #0a6f8c;
  --tur-fon:        rgba(255, 255, 255, .14);

  /* O'lchovlar */
  --r-s:   8px;
  --r-m:   12px;
  --r-l:   18px;
  --r-xl:  26px;
  --en:    1180px;
  --bosh-balandlik: 64px;

  --shrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --shrift-sarlavha: Georgia, "Noto Serif", "Times New Roman", serif;
  --shrift-kod: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
                "Liberation Mono", Menlo, monospace;
}

/* Qorong'i mavzu. DIQQAT: quyidagi ikkita blok bir xil bo'lishi shart —
   birinchisi tizim sozlamasi uchun, ikkinchisi qo'lda tanlov uchun. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) {
    --fon:            #0a1120;
    --fon-2:          #111c2c;
    --fon-3:          #18253a;
    --fon-shaffof:    rgba(10, 17, 32, .86);
    --chiziq:         #24344b;
    --chiziq-2:       #32465f;
    --matn:           #e7eef7;
    --matn-2:         #a4b3c8;
    --matn-3:         #7d8ca4;
    --brend:          #58a6e6;
    --brend-2:        #7bbcf0;
    --brend-3:        #8ac7f4;
    --brend-yumshoq:  #12253c;
    --turkuaz:        #35c2d8;
    --yashil:         #4fca8b;
    --yashil-yumshoq: #10291e;
    --sariq:          #e2b563;
    --sariq-yumshoq:  #2c2314;
    --qizil:          #f08a83;
    --qizil-yumshoq:  #2e1816;
    --belgi-fon:      #4a3d0b;
    --belgi-matn:     #ffe9a3;
    --halqa:          rgba(138, 199, 244, .5);
    --soya-1:         0 1px 2px rgba(0, 0, 0, .4);
    --soya-2:         0 2px 6px rgba(0, 0, 0, .38), 0 8px 22px rgba(0, 0, 0, .34);
    --soya-3:         0 12px 36px rgba(0, 0, 0, .5);
    --hero-fon-1:     #10314f;
    --hero-fon-2:     #0c4a5c;
    --tur-fon:        rgba(255, 255, 255, .09);
  }
}

:root[data-mavzu="qorongi"] {
  --fon:            #0a1120;
  --fon-2:          #111c2c;
  --fon-3:          #18253a;
  --fon-shaffof:    rgba(10, 17, 32, .86);
  --chiziq:         #24344b;
  --chiziq-2:       #32465f;
  --matn:           #e7eef7;
  --matn-2:         #a4b3c8;
  --matn-3:         #7d8ca4;
  --brend:          #58a6e6;
  --brend-2:        #7bbcf0;
  --brend-3:        #8ac7f4;
  --brend-yumshoq:  #12253c;
  --turkuaz:        #35c2d8;
  --yashil:         #4fca8b;
  --yashil-yumshoq: #10291e;
  --sariq:          #e2b563;
  --sariq-yumshoq:  #2c2314;
  --qizil:          #f08a83;
  --qizil-yumshoq:  #2e1816;
  --belgi-fon:      #4a3d0b;
  --belgi-matn:     #ffe9a3;
  --halqa:          rgba(138, 199, 244, .5);
  --soya-1:         0 1px 2px rgba(0, 0, 0, .4);
  --soya-2:         0 2px 6px rgba(0, 0, 0, .38), 0 8px 22px rgba(0, 0, 0, .34);
  --soya-3:         0 12px 36px rgba(0, 0, 0, .5);
  --hero-fon-1:     #10314f;
  --hero-fon-2:     #0c4a5c;
  --tur-fon:        rgba(255, 255, 255, .09);
}

/* ===== 1. ASOS =========================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fon);
  color: var(--matn);
  font-family: var(--shrift);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.012em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brend); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brend-3); }

img, svg { max-width: 100%; }
svg { display: block; }

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

:focus-visible {
  outline: 3px solid var(--halqa);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brend-yumshoq); color: var(--matn); }

.faqat-oquvchi {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.otkazish {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--brend);
  color: #fff;
  border-radius: 0 0 var(--r-s) var(--r-s);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.otkazish:focus { top: 0; color: #fff; }

/* ===== 2. TARTIB ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.ilova { flex: 1 0 auto; padding-bottom: 64px; }
.ilova:focus { outline: none; }

/* --- Yuqori panel --- */
.bosh {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fon-shaffof);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--chiziq);
}

.bosh-ichi {
  min-height: var(--bosh-balandlik);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.belgi {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--matn);
  padding: 8px 0;
  margin-right: auto;
}
.belgi-nishon { flex: none; filter: drop-shadow(0 2px 6px rgba(15, 76, 129, .25)); }
.belgi-matn { display: flex; flex-direction: column; line-height: 1.15; }
.belgi-matn strong { font-size: 16px; letter-spacing: -.015em; }
.belgi-matn small { font-size: 11.5px; color: var(--matn-2); letter-spacing: .02em; }

.menyu {
  display: flex;
  align-items: center;
  gap: 2px;
  order: 3;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--chiziq);
  padding-block: 4px;
}
.menyu::-webkit-scrollbar { display: none; }

.menyu-havola {
  position: relative;
  padding: 9px 12px;
  border-radius: var(--r-s);
  color: var(--matn-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.menyu-havola:hover { background: var(--fon-3); color: var(--matn); }
.menyu-havola[aria-current="page"] { color: var(--brend); background: var(--brend-yumshoq); }

.menyu-tugma { display: none; }

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

.rejim-nishon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rejim-nishon::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.rejim-nishon.jonli { color: var(--yashil); background: var(--yashil-yumshoq); border-color: currentColor; }
.rejim-nishon.demo  { color: var(--sariq); background: var(--sariq-yumshoq); border-color: currentColor; }
.rejim-nishon.uzuq  { color: var(--qizil); background: var(--qizil-yumshoq); border-color: currentColor; }

.mavzu-tugma {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-s);
  background: var(--fon-2);
  color: var(--matn-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mavzu-tugma:hover { color: var(--brend); border-color: var(--chiziq-2); }
.mavzu-tugma .ikon-oy { display: none; }
:root[data-mavzu="qorongi"] .mavzu-tugma .ikon-quyosh { display: none; }
:root[data-mavzu="qorongi"] .mavzu-tugma .ikon-oy { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) .mavzu-tugma .ikon-quyosh { display: none; }
  :root:not([data-mavzu="yorug"]) .mavzu-tugma .ikon-oy { display: block; }
}

/* --- Hisob (sarlavhadagi foydalanuvchi holati) --- */
.hisob { display: flex; align-items: center; min-width: 0; }
.hisob:empty { display: none; }

.hisob-ichi {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 4px 3px 5px;
  border: 1px solid var(--chiziq);
  border-radius: 999px;
  background: var(--fon-2);
}

.hisob-nom { display: flex; align-items: center; gap: 8px; min-width: 0; }

.hisob-bosh {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brend);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}
:root[data-mavzu="qorongi"] .hisob-bosh { color: #06121f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) .hisob-bosh { color: #06121f; }
}

.hisob-matn { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.hisob-matn strong {
  font-size: 13.5px;
  font-weight: 650;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hisob-matn small { font-size: 11px; color: var(--matn-3); white-space: nowrap; }

.hisob .tugma-kichik { padding: 6px 12px; font-size: 13px; }
.hisob-kirish { white-space: nowrap; }

/* --- Pastki panel --- */
.past {
  flex: none;
  margin-top: auto;
  background: var(--fon-2);
  border-top: 1px solid var(--chiziq);
  font-size: 14px;
}
.past-ichi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  padding-block: 36px 28px;
}
.past-blok { min-width: 0; }
.past-sarlavha {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--matn-3);
  margin-bottom: 10px;
  font-family: var(--shrift);
}
.past-matn { color: var(--matn-2); line-height: 1.6; margin: 0; }
.past-royxat { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.past-royxat a { color: var(--matn-2); text-decoration: none; }
.past-royxat a:hover { color: var(--brend); text-decoration: underline; }
.past-chiziq {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-block: 16px 24px;
  border-top: 1px solid var(--chiziq);
  color: var(--matn-3);
  font-size: 12.5px;
}
.past-manba { color: var(--matn-3); }

/* ===== 3. BO'LAKLAR ====================================================== */

/* --- Tugmalar --- */
.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--brend);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease;
}
.tugma:hover { background: var(--brend-2); color: #fff; box-shadow: var(--soya-2); }
.tugma:active { transform: translateY(1px); }
.tugma[disabled], .tugma[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}
:root[data-mavzu="qorongi"] .tugma { color: #06121f; }
:root[data-mavzu="qorongi"] .tugma:hover { color: #06121f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) .tugma,
  :root:not([data-mavzu="yorug"]) .tugma:hover { color: #06121f; }
}

.tugma-ikkilamchi {
  background: var(--fon-2);
  color: var(--matn);
  border-color: var(--chiziq-2);
}
.tugma-ikkilamchi:hover { background: var(--fon-3); color: var(--matn); border-color: var(--brend); }
:root[data-mavzu="qorongi"] .tugma-ikkilamchi,
:root[data-mavzu="qorongi"] .tugma-ikkilamchi:hover { color: var(--matn); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) .tugma-ikkilamchi,
  :root:not([data-mavzu="yorug"]) .tugma-ikkilamchi:hover { color: var(--matn); }
}

.tugma-shaffof {
  background: transparent;
  color: var(--brend);
  border-color: transparent;
  padding-inline: 12px;
}
.tugma-shaffof:hover { background: var(--brend-yumshoq); color: var(--brend); box-shadow: none; }

.tugma-kichik { padding: 7px 13px; font-size: 13.5px; border-radius: var(--r-s); }
.tugma-katta { padding: 14px 26px; font-size: 16px; }
.tugma-keng { width: 100%; }
.tugma-xavf { background: var(--qizil-yumshoq); color: var(--qizil); border-color: var(--qizil); }
.tugma-xavf:hover { background: var(--qizil); color: #fff; }

/* --- Kartalar --- */
.karta {
  background: var(--fon-2);
  border: 1px solid var(--chiziq);
  border-radius: var(--r-l);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--soya-1);
}
.karta + .karta { margin-top: 20px; }

.karta-sarlavha {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 6px;
}

/* --- Sahifa boshi --- */
.sahifa-bosh { padding-block: clamp(28px, 5vw, 44px) 22px; }
.sahifa-bosh h1 {
  font-size: clamp(26px, 4.4vw, 36px);
  font-family: var(--shrift-sarlavha);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.sahifa-bosh h1:focus { outline: none; }
.sahifa-izoh {
  color: var(--matn-2);
  font-size: clamp(15px, 2vw, 17px);
  max-width: 68ch;
  margin: 0;
}

/* --- Maydonlar --- */
.maydon { display: block; margin-bottom: 14px; }
.maydon-nom {
  display: block;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 7px;
  color: var(--matn);
}
.maydon-yordam { display: block; font-size: 13px; color: var(--matn-3); margin-top: 6px; }

.kiritish, .matn-maydon {
  width: 100%;
  padding: 12px 14px;
  background: var(--fon-2);
  border: 1px solid var(--chiziq-2);
  border-radius: var(--r-m);
  color: var(--matn);
  font-size: 15.5px;
  line-height: 1.55;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kiritish::placeholder, .matn-maydon::placeholder { color: var(--matn-3); }
.kiritish:focus, .matn-maydon:focus {
  outline: none;
  border-color: var(--brend);
  box-shadow: 0 0 0 3px var(--halqa);
}
.matn-maydon { resize: vertical; min-height: 132px; }

.qidiruv-qobiq { position: relative; display: flex; align-items: center; }
.qidiruv-qobiq .kiritish { padding-left: 42px; }
.qidiruv-ikon {
  position: absolute;
  left: 14px;
  width: 18px; height: 18px;
  color: var(--matn-3);
  pointer-events: none;
}

.hisoblagich {
  font-size: 12.5px;
  color: var(--matn-3);
  font-variant-numeric: tabular-nums;
}
/* Chegaraga yaqinlashganda. ATAYLAB `.ogoh` EMAS — u ogohlantirish blokining
   klassi (display:flex, padding, ramka) va hisoblagichni qutiga aylantirib
   yuborardi. */
.hisoblagich.chegarada { color: var(--qizil); font-weight: 650; }

/* --- Namuna "chip"lar --- */
.chiplar { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 14px;
  border: 1px solid var(--chiziq-2);
  border-radius: 999px;
  background: var(--fon-2);
  color: var(--matn-2);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--brend); color: var(--brend); background: var(--brend-yumshoq); }
.chip[aria-pressed="true"] {
  background: var(--brend);
  border-color: var(--brend);
  color: #fff;
}
:root[data-mavzu="qorongi"] .chip[aria-pressed="true"] { color: #06121f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="yorug"]) .chip[aria-pressed="true"] { color: #06121f; }
}
.chip-son { opacity: .7; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* --- Nishonlar --- */
.nishon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .015em;
  background: var(--fon-3);
  color: var(--matn-2);
  white-space: nowrap;
}
.nishon-kuchda { background: var(--yashil-yumshoq); color: var(--yashil); }
.nishon-kuchsiz { background: var(--qizil-yumshoq); color: var(--qizil); }
.nishon-mavzu { background: var(--brend-yumshoq); color: var(--brend); }

/* --- Ogohlantirish bloklari --- */
.ogoh {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-m);
  border: 1px solid var(--chiziq);
  background: var(--fon-3);
  font-size: 14.5px;
  line-height: 1.6;
}
.ogoh strong { font-weight: 700; }
.ogoh-ikon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.ogoh-sariq { background: var(--sariq-yumshoq); border-color: var(--sariq); color: var(--matn); }
.ogoh-sariq .ogoh-ikon { color: var(--sariq); }
.ogoh-qizil { background: var(--qizil-yumshoq); border-color: var(--qizil); color: var(--matn); }
.ogoh-qizil .ogoh-ikon { color: var(--qizil); }
.ogoh-kok { background: var(--brend-yumshoq); border-color: var(--brend); color: var(--matn); }
.ogoh-kok .ogoh-ikon { color: var(--brend); }
.ogoh-yashil { background: var(--yashil-yumshoq); border-color: var(--yashil); color: var(--matn); }
.ogoh-yashil .ogoh-ikon { color: var(--yashil); }

/* --- Yuklanish / spinner --- */
.aylana {
  width: 18px; height: 18px;
  flex: none;
  border: 2.5px solid var(--chiziq-2);
  border-top-color: var(--brend);
  border-radius: 50%;
  animation: aylan .8s linear infinite;
}
@keyframes aylan { to { transform: rotate(360deg); } }

.yuklanmoqda-parda {
  display: flex; align-items: center; gap: 10px;
  padding: 48px 0;
  color: var(--matn-2);
}

.skelet {
  background: linear-gradient(90deg, var(--fon-3) 25%, var(--fon-2) 50%, var(--fon-3) 75%);
  background-size: 400% 100%;
  animation: skelet-oqim 1.4s ease infinite;
  border-radius: var(--r-s);
  height: 14px;
  margin-bottom: 10px;
}
.skelet:nth-child(2n) { width: 92%; }
.skelet:nth-child(3n) { width: 78%; }
@keyframes skelet-oqim { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- Xabar (toast) --- */
.xabarlar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.xabar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-m);
  background: var(--matn);
  color: var(--fon-2);
  box-shadow: var(--soya-3);
  font-size: 14.5px;
  font-weight: 550;
  animation: xabar-kir .22s ease;
}
.xabar.xato-xabar { background: var(--qizil); color: #fff; }
@keyframes xabar-kir { from { opacity: 0; transform: translateY(10px); } }

/* --- Akkordeon --- */
.akkordeon { display: grid; gap: 10px; }
.akkordeon-band {
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  background: var(--fon-2);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.akkordeon-band:hover { border-color: var(--chiziq-2); }
.akkordeon-band.ochiq { border-color: var(--brend); box-shadow: var(--soya-1); }
.akkordeon-boshi {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--matn);
}
.akkordeon-boshi:hover { background: var(--fon-3); }
.akkordeon-savol { flex: 1; font-weight: 600; font-size: 15.5px; line-height: 1.5; }
.akkordeon-belgi {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  color: var(--brend);
  transition: transform .2s ease;
}
.akkordeon-band.ochiq .akkordeon-belgi { transform: rotate(180deg); }
.akkordeon-tana { padding: 2px 16px 18px; border-top: 1px solid var(--chiziq); }

/* --- Natijalar ro'yxati (qonunlar) --- */
.natija-royxat { display: grid; gap: 12px; }
.natija-band {
  border: 1px solid var(--chiziq);
  border-left: 3px solid var(--brend);
  border-radius: var(--r-m);
  background: var(--fon-2);
  padding: 15px 17px;
  transition: box-shadow .15s ease, transform .1s ease;
}
.natija-band:hover { box-shadow: var(--soya-2); }
.natija-sarlavha { font-size: 16px; margin-bottom: 6px; line-height: 1.4; }
.natija-sarlavha a { text-decoration: none; }
.natija-sarlavha a:hover { text-decoration: underline; }
.natija-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 12.5px; color: var(--matn-3);
  margin-bottom: 8px;
}
.natija-parcha { font-size: 14.5px; color: var(--matn-2); line-height: 1.65; margin: 0; }
.natija-parcha mark { background: var(--belgi-fon); color: var(--belgi-matn); padding: 0 2px; border-radius: 3px; }

/* --- Bo'sh holat --- */
.bosh-holat {
  text-align: center;
  padding: 44px 20px;
  color: var(--matn-2);
  border: 1px dashed var(--chiziq-2);
  border-radius: var(--r-l);
  background: var(--fon-2);
}
.bosh-holat h3 { font-size: 17px; color: var(--matn); margin-bottom: 6px; }
.bosh-holat p { margin: 0 auto; max-width: 46ch; font-size: 14.5px; }

/* ===== 4. SAHIFALAR ====================================================== */

/* --- Bosh sahifa: hero --- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 420px at 82% -20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, var(--hero-fon-1), var(--hero-fon-2));
  color: #fff;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin-bottom: 34px;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--tur-fon) 1px, transparent 1px),
    linear-gradient(90deg, var(--tur-fon) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 70%);
  pointer-events: none;
}
.hero-ichi { position: relative; z-index: 1; padding-block: clamp(38px, 7vw, 68px); }
.hero-yorliq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .02em;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--shrift-sarlavha);
  font-size: clamp(29px, 5.6vw, 50px);
  line-height: 1.13;
  letter-spacing: -.025em;
  margin-bottom: 16px;
  max-width: 18ch;
}
.hero h1:focus { outline: none; }
.hero-izoh {
  font-size: clamp(15.5px, 2.2vw, 18.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  max-width: 58ch;
  margin-bottom: 26px;
}
.hero .tugma-ikkilamchi {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.hero .tugma-ikkilamchi:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.hero-tugmalar { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Statistika --- */
.statlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .22);
  border-top: 1px solid rgba(255, 255, 255, .22);
  position: relative;
  z-index: 1;
}
.stat {
  padding: 18px clamp(16px, 4vw, 32px);
  background: linear-gradient(135deg, var(--hero-fon-1), var(--hero-fon-2));
}
.stat-son {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 750;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-nom { font-size: 12.5px; color: rgba(255, 255, 255, .78); letter-spacing: .02em; }

/* --- Amal kartalari --- */
.amallar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.amal-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-l);
  background: var(--fon-2);
  color: var(--matn);
  text-decoration: none;
  box-shadow: var(--soya-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.amal-karta:hover {
  transform: translateY(-3px);
  box-shadow: var(--soya-3);
  border-color: var(--brend);
  color: var(--matn);
}
.amal-ikon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  background: var(--brend-yumshoq);
  color: var(--brend);
  margin-bottom: 4px;
}
.amal-karta h3 { font-size: 19px; margin: 0; }
.amal-karta p { color: var(--matn-2); font-size: 14.5px; margin: 0; flex: 1; }
.amal-oq {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brend); font-weight: 650; font-size: 14.5px;
}
.amal-karta:hover .amal-oq { gap: 10px; }
.amal-oq svg { width: 16px; height: 16px; transition: transform .16s ease; }

/* --- Bo'lim sarlavhasi --- */
.bolim { margin-bottom: 40px; }
.bolim-bosh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bolim-bosh h2 {
  font-size: clamp(19px, 2.8vw, 23px);
  margin: 0;
  font-family: var(--shrift-sarlavha);
  letter-spacing: -.015em;
}
.bolim-bosh a { font-size: 14px; font-weight: 600; text-decoration: none; }
.bolim-bosh a:hover { text-decoration: underline; }

/* --- Qadamlar --- */
.qadamlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  counter-reset: qadam;
}
.qadam {
  padding: 20px 22px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-l);
  background: var(--fon-2);
}
.qadam::before {
  counter-increment: qadam;
  content: counter(qadam);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brend);
  color: #fff;
  font-size: 14px; font-weight: 700;
  margin-bottom: 12px;
}
.qadam h3 { font-size: 16px; margin-bottom: 4px; }
.qadam p { font-size: 14px; color: var(--matn-2); margin: 0; }

/* --- Mavzu to'ri --- */
.mavzu-tori {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.mavzu-karta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  background: var(--fon-2);
  color: var(--matn);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.mavzu-karta:hover {
  border-color: var(--brend);
  background: var(--brend-yumshoq);
  color: var(--brend);
  transform: translateY(-2px);
}
.mavzu-karta span:last-child {
  font-size: 12px; color: var(--matn-3); font-variant-numeric: tabular-nums; font-weight: 600;
}

/* --- Agent sahifasi tartibi --- */
.ikki-ustun {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (min-width: 980px) {
  .ikki-ustun { grid-template-columns: minmax(0, 1fr) 296px; }
  .yon-ustun { position: sticky; top: calc(var(--bosh-balandlik) + 60px); }
}

.yon-blok {
  border: 1px solid var(--chiziq);
  border-radius: var(--r-l);
  background: var(--fon-2);
  padding: 18px;
}
.yon-blok + .yon-blok { margin-top: 16px; }
.yon-sarlavha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--matn-3); margin-bottom: 12px; font-weight: 700;
}

.tarix-royxat { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tarix-tugma {
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--matn-2);
  display: block;
}
.tarix-tugma:hover { background: var(--fon-3); color: var(--matn); border-color: var(--chiziq); }
.tarix-matn {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarix-vaqt { display: block; font-size: 11.5px; color: var(--matn-3); margin-top: 3px; }

/* --- Ish holati paneli --- */
.holat-panel {
  border: 1px solid var(--brend);
  background: var(--brend-yumshoq);
  border-radius: var(--r-l);
  padding: 18px 20px;
  margin-top: 18px;
}
.holat-qator { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.holat-matn { flex: 1; min-width: 180px; font-weight: 600; font-size: 15px; }
.holat-vaqt {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--matn-2);
  font-weight: 650;
}
.chiziqcha {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--chiziq);
  overflow: hidden;
  margin-top: 14px;
}
.chiziqcha-ich {
  position: absolute;
  inset-block: 0; left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brend), var(--turkuaz));
  transition: width .6s ease;
}
.holat-izoh { font-size: 13px; color: var(--matn-2); margin: 12px 0 0; }

/* --- Javob paneli --- */
.javob-panel {
  margin-top: 20px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-l);
  background: var(--fon-2);
  box-shadow: var(--soya-1);
  overflow: hidden;
}
.javob-bosh {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--fon-3);
  border-bottom: 1px solid var(--chiziq);
}
.javob-bosh-nom {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--matn-2);
  margin-right: auto;
}
.javob-tana { padding: clamp(18px, 3vw, 30px); }

/* --- Kirish (login) sahifasi --- */
.kirish-wrap { max-width: 580px; }
.kirish-ogoh { margin-bottom: 18px; }
.kirish-karta .maydon { margin-bottom: 18px; }
.kirish-karta .maydon-nom { cursor: pointer; }

/* Parol maydoni + "ko'rsatish" tugmasi */
.parol-qobiq { position: relative; display: flex; align-items: center; }
.parol-qobiq .kiritish { padding-right: 48px; }
.parol-tugma {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--matn-3);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.parol-tugma:hover { color: var(--brend); background: var(--fon-3); }
.parol-tugma[aria-pressed="true"] { color: var(--brend); }
.parol-tugma svg { width: 20px; height: 20px; }

.kirish-xato:empty { display: none; }
.kirish-xato { margin-bottom: 16px; }

/* --- Fayl yuklash zonasi (javob xati sahifasi) --- */
.fayl-blok { margin-bottom: 18px; }

/* Haqiqiy <input type="file"> — ko'rinmaydi, lekin tugma orqali ochiladi */
.fayl-kirit {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fayl-zona {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 22px 18px;
  border: 2px dashed var(--chiziq-2);
  border-radius: var(--r-l);
  background: var(--fon-3);
  color: var(--matn-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fayl-zona:hover:not([disabled]) {
  border-color: var(--brend);
  background: var(--brend-yumshoq);
  color: var(--brend);
}
.fayl-zona[disabled] { opacity: .55; cursor: progress; }
.fayl-blok.ustida .fayl-zona {
  border-color: var(--brend);
  background: var(--brend-yumshoq);
  color: var(--brend);
  box-shadow: 0 0 0 3px var(--halqa);
}
.fayl-zona-ikon { color: currentColor; }
.fayl-zona-ikon svg { width: 28px; height: 28px; }
.fayl-zona-nom { font-size: 15px; font-weight: 650; color: var(--matn); }
.fayl-zona:hover:not([disabled]) .fayl-zona-nom,
.fayl-blok.ustida .fayl-zona-nom { color: inherit; }
.fayl-zona-izoh { font-size: 13px; color: var(--matn-3); }

.fayl-holat:empty { display: none; }
.fayl-holat { margin-top: 12px; }

/* Yuklash jarayoni */
.fayl-jarayon {
  border: 1px solid var(--brend);
  background: var(--brend-yumshoq);
  border-radius: var(--r-m);
  padding: 14px 16px;
}
.fayl-jarayon-qator { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fayl-jarayon-nom {
  flex: 1;
  min-width: 140px;
  font-weight: 600;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}
.fayl-foiz {
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--matn-2);
}
.fayl-izoh { font-size: 13px; color: var(--matn-2); margin: 12px 0 0; }

/* Muvaffaqiyatli natija */
.fayl-natija {
  border: 1px solid var(--yashil);
  background: var(--yashil-yumshoq);
  border-radius: var(--r-m);
  padding: 14px 16px;
}
.fayl-natija-qator { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fayl-natija-ikon { flex: none; color: var(--yashil); }
.fayl-natija-ikon svg { width: 22px; height: 22px; }
.fayl-natija-nom {
  flex: 1;
  min-width: 140px;
  font-weight: 650;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}
.fayl-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.fayl-meta li { display: flex; flex-direction: column; line-height: 1.3; }
.fayl-meta span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--matn-3);
}
.fayl-meta strong { font-size: 14px; font-variant-numeric: tabular-nums; }

/* Ogohlantirish blokidagi ro'yxat */
.ogoh-royxat { margin: 6px 0 0; padding-left: 1.2em; }
.ogoh-royxat li { margin-bottom: 3px; }
.ogoh-royxat li:last-child { margin-bottom: 0; }

/* ===== 5. MARKDOWN TIPOGRAFIYASI ========================================= */

.md { font-size: 16px; line-height: 1.72; }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }

.md h1, .md h2, .md h3, .md h4 {
  font-family: var(--shrift-sarlavha);
  letter-spacing: -.015em;
  margin: 1.5em 0 .5em;
  scroll-margin-top: 90px;
}
.md h1 { font-size: 1.5em; }
.md h2 {
  font-size: 1.28em;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--chiziq);
}
.md h3 { font-size: 1.12em; }
.md h4 { font-size: 1em; font-family: var(--shrift); }

.md p { margin: 0 0 1.05em; }
.md ul, .md ol { margin: 0 0 1.05em; padding-left: 1.5em; }
.md li { margin-bottom: .42em; }
.md li > ul, .md li > ol { margin: .42em 0 .2em; }
.md li::marker { color: var(--brend); font-weight: 600; }

.md strong { font-weight: 700; color: var(--matn); }
.md em { font-style: italic; }
.md hr { border: 0; border-top: 1px solid var(--chiziq); margin: 1.8em 0; }

.md blockquote {
  margin: 1.2em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--brend);
  background: var(--brend-yumshoq);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  color: var(--matn-2);
  font-style: italic;
}
.md blockquote p:last-child { margin-bottom: 0; }

.md code {
  font-family: var(--shrift-kod);
  font-size: .88em;
  padding: .14em .4em;
  border-radius: 5px;
  background: var(--fon-3);
  border: 1px solid var(--chiziq);
  white-space: nowrap;
}
.md pre {
  margin: 1.2em 0;
  padding: 14px 16px;
  background: var(--fon-3);
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  overflow-x: auto;
}
.md pre code { background: none; border: 0; padding: 0; white-space: pre; font-size: .86em; }

.md-jadval-qobiq { overflow-x: auto; margin: 1.2em 0; border-radius: var(--r-m); border: 1px solid var(--chiziq); }
.md table { width: 100%; border-collapse: collapse; font-size: .94em; }
.md th, .md td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--chiziq); }
.md th { background: var(--fon-3); font-weight: 700; white-space: nowrap; }
.md tbody tr:last-child td { border-bottom: 0; }
.md tbody tr:hover { background: var(--fon-3); }

/* Qonun havolalari — ko'zga tashlansin */
.md a { font-weight: 550; }
.md a[href*="lex.uz"] {
  display: inline;
  background: var(--brend-yumshoq);
  padding: .08em .4em;
  border-radius: 5px;
  text-decoration: none;
  border-bottom: 1px solid var(--brend);
}
.md a[href*="lex.uz"]::after {
  content: "↗";
  font-size: .8em;
  margin-left: 3px;
  opacity: .75;
}
.md a[href*="lex.uz"]:hover { background: var(--brend); color: #fff; }

/* ===== 6. MOSLASHUV / QO'SHIMCHA ========================================= */

@media (min-width: 860px) {
  .menyu {
    order: 0;
    width: auto;
    border-top: 0;
    padding-block: 0;
    margin-left: 8px;
  }
  .bosh-ichi { flex-wrap: nowrap; }
  .belgi { margin-right: 12px; }
  .bosh-ichi > .menyu { margin-right: auto; }
}

@media (max-width: 859px) {
  .menyu-tugma {
    display: grid;
    place-items: center;
    gap: 4px;
    width: 40px; height: 40px;
    border: 1px solid var(--chiziq);
    border-radius: var(--r-s);
    background: var(--fon-2);
    cursor: pointer;
    order: 2;
  }
  .menyu-chiziq {
    width: 18px; height: 2px;
    background: var(--matn);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menyu-tugma[aria-expanded="true"] .menyu-chiziq:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menyu-tugma[aria-expanded="true"] .menyu-chiziq:nth-child(2) { opacity: 0; }
  .menyu-tugma[aria-expanded="true"] .menyu-chiziq:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .menyu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-block: 10px 14px;
  }
  .menyu.ochiq { display: flex; }
  .menyu-havola { padding: 12px 14px; font-size: 15.5px; }
  .bosh-amallar { order: 1; }
  .belgi-matn small { display: none; }
}

@media (max-width: 560px) {
  .hisob-matn small { display: none; }
  .hisob-matn strong { max-width: 11ch; }
}

@media (max-width: 400px) {
  .rejim-nishon { display: none; }
  .tugma { padding: 11px 16px; }
  /* Tor ekranda faqat avatar va "Chiqish" qoladi */
  .hisob-matn { display: none; }
  .hisob-ichi { gap: 4px; }
  .fayl-zona { padding: 18px 14px; }
}

/* Foydalanuvchi harakatni kamaytirishni so'raganda */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aylana { border-top-color: var(--brend); animation: none !important; }
  .amal-karta:hover, .mavzu-karta:hover { transform: none; }
}

/* Kontrast talab qilinganda */
@media (prefers-contrast: more) {
  .karta, .natija-band, .akkordeon-band, .yon-blok, .qadam { border-width: 2px; }
  .menyu-havola[aria-current="page"] { outline: 2px solid var(--brend); }
}

/* Chop etish */
@media print {
  .bosh, .past, .xabarlar, .otkazish, .yon-ustun, .hisob,
  .javob-bosh, .holat-panel, .chiplar, .fayl-blok, form { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .karta, .javob-panel { border: 0; box-shadow: none; padding: 0; }
  .md a { color: #000; text-decoration: underline; }
  .md a[href*="lex.uz"] { background: none; border: 0; }
  .md a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* ===== SUHBAT (ko'p bosqichli savol-javob) ================================ */
/* Yozishma: har bir bo'lak — foydalanuvchi savoli + agent javobi. Savol
   chapdan raqamli belgi bilan ajratiladi, javob esa odatdagi .javob-panel. */

.suhbat-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0 -4px;
  padding: 10px 14px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  background: var(--fon-3);
}

.suhbat-hisob {
  font-size: 13px;
  font-weight: 600;
  color: var(--matn-2);
  letter-spacing: .01em;
}

.suhbat-tur { scroll-margin-top: calc(var(--bosh-balandlik) + 16px); }

/* Bo'laklar orasidagi ingichka ajratgich — birinchisidan tashqari */
.suhbat-tur + .suhbat-tur {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px dashed var(--chiziq-2);
}

.suhbat-savol {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
}

.suhbat-belgi {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brend);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.suhbat-savol-matn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 13px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  background: var(--brend-yumshoq);
  color: var(--matn);
  font-size: 15px;
  line-height: 1.5;
  /* Uzun matn (masalan yuklangan murojaat) qatorlarni saqlab ko'rsatilsin */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Suhbatdagi javob paneli sarlavhadan keyin darrov kelsin */
.suhbat-tur .javob-panel { margin-top: 12px; }

/* Chop etishda faqat yozishma qolsin */
@media print {
  .suhbat-bosh { display: none; }
  .suhbat-tur + .suhbat-tur { border-top: 1px solid #999; }
}

/* ===== CHAT TARTIBI ======================================================= */
/* Yozishma tepadan pastga o'sadi, yozish maydoni esa ekran pastida yopishib
   turadi — shunda uzun suhbatda ham savol yozish uchun tepaga qaytish shart
   emas. `position: sticky` — JS'siz, sahifa oqimini buzmaydi. */

.yozish-karta {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  margin-top: 18px;
  box-shadow: var(--soya-2);
  /* Yozishma orqada sirg'alib o'tayotganda karta ostidan ko'rinmasin */
  background: var(--fon-2);
}

#namunalar-karta { margin-top: 18px; }
#namunalar-karta[hidden] { display: none; }

.yozish-past {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: -6px 0 14px;
}

.yozish-tugmalar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Chat rejimida maydon o'zi o'sadi — qo'lda cho'zish shart emas */
.yozish-karta .matn-maydon {
  resize: none;
  min-height: 62px;
  transition: height .12s ease;
}

/* Ish holati paneli yozishma oxirida, javob paydo bo'ladigan joyda turadi */
#ish-joyi:not(:empty) { margin-bottom: 4px; }

/* Kichik ekranda yopishtirish foydadan ko'ra xalaqit beradi:
   klaviatura ochilganda maydon ekranning yarmini egallaydi. */
@media (max-width: 700px) {
  .yozish-karta { position: static; }
}

/* Foydalanuvchi animatsiyani o'chirgan bo'lsa — maydon sakramasin */
@media (prefers-reduced-motion: reduce) {
  .yozish-karta .matn-maydon { transition: none; }
}

@media print {
  .yozish-karta, #namunalar-karta { display: none; }
}

/* ===== IQTIBOS BILAN JAVOB BERISH ======================================== */
/* Javobning bir bo'lagi belgilanganda chiqadigan suzuvchi tugma. */

.iqtibos-tugma {
  position: fixed;
  /* Yuqori panel (.bosh) z-index: 60 — tugma undan ustun turishi kerak,
     aks holda sahifa tepasidagi iqtibos panel ostida ko'rinmay qolardi. */
  z-index: 70;
  padding: 7px 13px;
  border: 1px solid var(--brend-2);
  border-radius: 999px;
  background: var(--brend);
  color: #fff;
  font-family: var(--shrift);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--soya-2);
  white-space: nowrap;
}

.iqtibos-tugma:hover { background: var(--brend-3); }
.iqtibos-tugma:focus-visible { outline: 2px solid var(--halqa); outline-offset: 2px; }
.iqtibos-tugma[hidden] { display: none; }

/* Savol ko'pigi ichidagi iqtibos bo'lagi */
.suhbat-savol-matn { display: flex; flex-direction: column; gap: 8px; }

.suhbat-iqtibos {
  display: block;
  padding: 7px 11px;
  border-left: 3px solid var(--brend-3);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--fon-2);
  color: var(--matn-2);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.suhbat-savol-tana { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Uzun iqtibos butun ekranni egallamasin */
.suhbat-iqtibos { max-height: 190px; overflow-y: auto; }

@media print {
  .iqtibos-tugma { display: none; }
  .suhbat-iqtibos { max-height: none; overflow: visible; }
}

/* ===== YON PANELDAGI SUHBATLAR RO'YXATI ================================== */
/* Har bir satr — bitta suhbat (savol emas): sarlavha + o'chirish tugmasi.
   O'chirish tugmasi faqat sichqoncha ustiga kelganda yoki fokusda ko'rinadi,
   shunda ro'yxat tinch ko'rinishda qoladi. */

.tarix-qator {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.tarix-qator .tarix-tugma { flex: 1 1 auto; min-width: 0; }

/* Sarlavha bir qatorda — ikki qator emas: ro'yxat ixcham bo'lsin */
.tarix-qator .tarix-matn {
  -webkit-line-clamp: 1;
  font-weight: 600;
  color: var(--matn);
}

.tarix-ochir {
  flex: none;
  width: 26px;
  align-self: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  color: var(--matn-3);
  font-size: 17px;
  line-height: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}

.tarix-qator:hover .tarix-ochir,
.tarix-qator:focus-within .tarix-ochir { opacity: 1; }
.tarix-ochir:hover { color: var(--qizil); background: var(--qizil-yumshoq); }
.tarix-ochir:focus-visible { opacity: 1; }

/* Hozir ochiq turgan suhbat */
.tarix-joriy .tarix-tugma {
  background: var(--brend-yumshoq);
  border-color: var(--chiziq-2);
  color: var(--matn);
}
.tarix-joriy .tarix-tugma .tarix-matn { color: var(--brend); }

/* Sensorli qurilmada "ustiga kelish" yo'q — tugma doim ko'rinsin */
@media (hover: none) {
  .tarix-ochir { opacity: .65; }
}

/* ===== JAVOB XATI — HUJJAT KO'RINISHI ==================================== */
/* Xat markdown emas: u rasmiy hujjat. Shuning uchun A4 varaqqa o'xshash
   panelda, serif shriftda va BO'SH JOYLARI SAQLANGAN holda chiziladi —
   adresat bloki xatda probellar bilan o'ngga surilgan bo'ladi, `pre-wrap`
   bo'lmasa u chapga yopishib qolardi. */

.xat-panel .javob-bosh { flex-wrap: wrap; }

.xat-varaq-qobiq {
  padding: clamp(10px, 2vw, 20px);
  background: var(--fon-3);
  /* Uzun xat panel ichida siljisin, sahifani cho'zmasin */
  max-height: 70vh;
  overflow: auto;
}

.xat-varaq {
  max-width: 82ch;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 42px) clamp(18px, 4vw, 46px);
  background: #fff;
  color: #10151d;
  border: 1px solid var(--chiziq);
  border-radius: 2px;
  box-shadow: var(--soya-2);

  font-family: var(--shrift-sarlavha);
  font-size: 15px;
  line-height: 1.55;
  /* Xatdagi bo'sh joylar va satr uzilishlari aynan saqlanadi */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* Uzun tekislash probellari kichik ekranda gorizontal siljish bermasin */
  tab-size: 4;
}

/* Qorong'i mavzuda ham varaq oq qoladi — hujjat qanday chop etilsa,
   ekranda ham shunday ko'rinsin. Matn rangi shuning uchun qattiq belgilangan. */

.xat-izoh {
  margin-top: 14px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  background: var(--fon-2);
  padding: 12px 16px;
}

.xat-izoh > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--matn-2);
  list-style: none;
}
.xat-izoh > summary::-webkit-details-marker { display: none; }
.xat-izoh > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .12s ease;
}
.xat-izoh[open] > summary::before { content: "▾ "; }
.xat-izoh > summary:hover { color: var(--matn); }
.xat-izoh .md { margin-top: 10px; font-size: 14.5px; }

/* Yuklab olish havolalari tugmaga o'xshasin */
.javob-bosh a.tugma { text-decoration: none; }

/* Chop etishda faqat xat varag'i qolsin */
@media print {
  .xat-varaq-qobiq { max-height: none; overflow: visible; padding: 0; background: #fff; }
  .xat-varaq { box-shadow: none; border: 0; max-width: none; padding: 0; }
  .xat-izoh, .javob-bosh { display: none; }
}

/* ===== HUJJATLI TARTIB (javob xati sahifasi) ============================= */
/* claude.ai kabi: chapda so'zlashuv, o'ngda tayyor hujjat.
   Sabab: xat 3000+ belgi va har tuzatishda yangilanadi — uni yozishmaga
   qayta-qayta qo'ysak, ekran bir xil matnning nusxalari bilan to'ladi. */

.hujjatli-tartib {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 1100px) {
  .hujjatli-tartib { grid-template-columns: minmax(0, 1fr) minmax(400px, 44%); }
  .hujjat-ustun {
    position: sticky;
    top: calc(var(--bosh-balandlik) + 16px);
    /* Panel ekranga sig'sin, ichidagi varaq o'zi siljisin */
    max-height: calc(100vh - var(--bosh-balandlik) - 32px);
    display: flex;
    flex-direction: column;
  }
}

.hujjat-ustun[hidden] { display: none; }

.hujjat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-l);
  background: var(--fon-2);
  box-shadow: var(--soya-2);
  overflow: hidden;
}

.hujjat-bosh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--chiziq);
  background: var(--fon-3);
}

.hujjat-nom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
}
.hujjat-ikon { display: flex; color: var(--brend); }
.hujjat-ikon svg { width: 18px; height: 18px; }

/* --- Versiya boshqaruvi --- */
.versiya-boshqaruv {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--chiziq-2);
  border-radius: 999px;
  background: var(--fon-2);
  padding: 2px;
}

.versiya-tugma {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--matn-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.versiya-tugma:hover:not(:disabled) { background: var(--fon-3); color: var(--matn); }
.versiya-tugma:disabled { opacity: .35; cursor: default; }

.versiya-hisob {
  min-width: 62px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--matn-2);
  font-variant-numeric: tabular-nums;
}

.hujjat-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px 0;
  font-size: 12.5px;
  color: var(--matn-3);
}
.hujjat-ozgarish {
  font-style: italic;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hujjat-tugmalar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px 12px;
}
.hujjat-tugmalar a.tugma { text-decoration: none; }

/* Hujjat panelidagi varaq ustundan oshib ketmasin */
.hujjat-panel .xat-varaq-qobiq {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  border-top: 1px solid var(--chiziq);
}

/* --- Yozishmadagi hujjat chiptasi --- */
.xat-xabar { margin-top: 20px; }
.xat-chipta { padding: 12px 14px; }

.hujjat-chipta {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--chiziq-2);
  border-radius: var(--r-m);
  background: var(--brend-yumshoq);
  color: var(--matn);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, transform .08s ease;
}
.hujjat-chipta:hover { border-color: var(--brend-3); }
.hujjat-chipta:active { transform: translateY(1px); }

.hujjat-chipta-ikon { flex: none; display: flex; color: var(--brend); }
.hujjat-chipta-ikon svg { width: 22px; height: 22px; }
.hujjat-chipta-matn { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.hujjat-chipta-matn strong { font-size: 14.5px; }
.hujjat-chipta-matn span { font-size: 12.5px; color: var(--matn-2); }

/* --- Yozishmalar ro'yxati yig'iladigan blokda (hujjatli sahifada) --- */
.tarix-yigma {
  margin-bottom: 16px;
  border: 1px solid var(--chiziq);
  border-radius: var(--r-m);
  background: var(--fon-2);
  padding: 10px 14px;
}
.tarix-yigma > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--matn-2);
  list-style: none;
}
.tarix-yigma > summary::-webkit-details-marker { display: none; }
.tarix-yigma > summary > span::before { content: "▸ "; }
.tarix-yigma[open] > summary > span::before { content: "▾ "; }
.tarix-yigma #tarix-joyi { margin-top: 10px; }

@media print {
  .hujjat-bosh, .hujjat-meta, .hujjat-tugmalar,
  .hujjat-chipta, .tarix-yigma { display: none; }
  .hujjat-ustun { position: static; max-height: none; }
  .hujjat-panel { border: 0; box-shadow: none; }
}

/* ========================================================================= */
/* ===== CHAT (so'zlashuv) — claude.ai / ChatGPT / Telegram uslubida ======== */
/* ========================================================================= */
/* Asosiy tamoyil: xabar — bu KARTOCHKA EMAS.
   Foydalanuvchi xabari o'ngda, yumshoq ko'pikda. Agent javobi chapda, hech
   qanday ramka va sarlavhasiz — matn to'g'ridan-to'g'ri sahifada turadi.
   Amallar xabar ostida, xira; ustiga kelganda yorqinlashadi. */

/* Yuqoridagi eski "kartochka" ko'rinishini bekor qilamiz */
.suhbat-tur + .suhbat-tur {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.suhbat-tur { margin-top: 26px; }
.suhbat-tur:first-child { margin-top: 8px; }

.suhbat-savol,
.suhbat-belgi { display: none; }

/* --- Xabar umumiy --- */
.xabar {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

/* --- Foydalanuvchi xabari: o'ngda, ko'pikda --- */
.xabar-men {
  align-items: flex-end;
  margin-bottom: 18px;
}

.xabar-men .xabar-tana {
  max-width: min(78%, 60ch);
  padding: 11px 15px;
  border-radius: 18px 18px 4px 18px;
  background: var(--brend-yumshoq);
  border: 1px solid var(--chiziq);
  color: var(--matn);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: left;
}

/* --- Agent xabari: chapda, ramkasiz --- */
.xabar-agent {
  align-items: flex-start;
  max-width: 74ch;
}

.xabar-agent .xabar-tana {
  width: 100%;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--matn);
}

.xabar-agent .xabar-tana.md > :first-child { margin-top: 0; }
.xabar-agent .xabar-tana.md > :last-child { margin-bottom: 0; }

/* --- Xabar ostidagi amallar: xira, ustiga kelganda ko'rinadi --- */
.xabar-amallar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
  opacity: 0;
  transition: opacity .14s ease;
}
.xabar:hover .xabar-amallar,
.xabar:focus-within .xabar-amallar { opacity: 1; }

.xabar-amal {
  padding: 4px 9px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--matn-3);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.xabar-amal:hover { background: var(--fon-3); color: var(--matn); }
.xabar-amal-xavf { color: var(--qizil); }
.xabar-amal-xavf:hover { background: var(--qizil-yumshoq); color: var(--qizil); }

.xabar-vaqt {
  font-size: 12px;
  color: var(--matn-3);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

/* Sensorli qurilmada "ustiga kelish" yo'q — amallar doim ko'rinsin */
@media (hover: none) {
  .xabar-amallar { opacity: 1; }
}

/* --- Iqtibos foydalanuvchi ko'pigi ichida --- */
.xabar-men .suhbat-savol-matn,
.xabar-men .xabar-tana { display: flex; flex-direction: column; gap: 7px; }

.xabar-men .suhbat-iqtibos {
  border-left: 3px solid var(--brend-3);
  border-radius: 0 6px 6px 0;
  background: var(--fon-2);
  padding: 6px 10px;
  font-size: 13.5px;
  max-height: 150px;
}

/* --- "Yozmoqda" belgisi --- */
.kutilmoqda .xabar-men { margin-bottom: 18px; }

.yozmoqda {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--matn-2);
  font-size: 14px;
}

.yozmoqda-nuqtalar { display: inline-flex; gap: 4px; align-items: center; }
.yozmoqda-nuqtalar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brend);
  opacity: .35;
  animation: nuqta 1.25s ease-in-out infinite;
}
.yozmoqda-nuqtalar i:nth-child(2) { animation-delay: .18s; }
.yozmoqda-nuqtalar i:nth-child(3) { animation-delay: .36s; }

@keyframes nuqta {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35%           { opacity: 1;  transform: translateY(-3px); }
}

.yozmoqda + .chiziqcha { margin-top: 12px; max-width: 260px; }

@media (prefers-reduced-motion: reduce) {
  .yozmoqda-nuqtalar i { animation: none; opacity: .6; }
}

/* --- Hujjat chiptasi chat ichida --- */
.xabar-agent .hujjat-chipta { max-width: 380px; margin-bottom: 4px; }
.xat-chipta { padding: 0; }

/* --- Yozishma va yozish maydoni orasidagi nafas --- */
#suhbat-oqim:not(:empty) { padding-bottom: 6px; }

/* Suhbat sarlavhasi ixchamroq bo'lsin — u chat tepasida turadi */
.suhbat-bosh {
  margin: 10px 0 4px;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--chiziq);
  border-radius: 0;
}

@media (max-width: 560px) {
  .xabar-men .xabar-tana { max-width: 88%; }
  .xabar-agent { max-width: 100%; }
}

@media print {
  .xabar-amallar, .yozmoqda { display: none; }
  .xabar-men .xabar-tana { border: 1px solid #999; background: none; }
}