/* ═══════════════════════════════════════════════════════════════
   Monster Targetolog — Zanjir Suite uslubi
   ═══════════════════════════════════════════════════════════════

   Zanjir ilovasidan olingan komponentlar:
     • Yorug' fon, oq kartalar, nozik chegaralar
     • Bo'limlarga ajratilgan yon panel + pastda foydalanuvchi kartasi
     • Segment boshqaruv, tab tugmalar, holat pillari
     • Bir qatorli ogohlantirish tasmasi
     • Katta rangli statistika raqamlari
     • Ro'yxat qatorlari: nuqta + nom + belgi + progress chiziq

   Shrift: Inter. Asosiy rang: indigo #4F46E5 → binafsha #7C3AED.
   Mavzu uch holatda: avto (tizimga qarab) / oq / qora.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Yorug' palitra (asos) ─────────────────────────────────── */
:root {
  --fon: #F7F8FA;
  --fon-past: #F1F3F7;
  --karta: #FFFFFF;
  --karta-ust: #F8F9FC;
  --chegara: #E8EAEF;
  --chegara-quyuq: #D8DCE5;
  --matn: #0F1729;
  --xira: #667085;
  --juda-xira: #98A2B3;

  --asosiy: #4F46E5;
  --asosiy-quyuq: #4338CA;
  --binafsha: #7C3AED;
  --asosiy-fon: #EEF0FE;
  --gradient: linear-gradient(135deg, #4F46E5, #7C3AED);

  --yashil: #16A34A;
  --yashil-fon: #E9F8EF;
  --sariq: #D97706;
  --sariq-fon: #FEF4E6;
  --qizil: #E11D48;
  --qizil-fon: #FDECF1;

  --soya-1: 0 1px 2px rgba(16, 24, 40, .05);
  --soya-2: 0 4px 12px rgba(16, 24, 40, .07);
  --soya-3: 0 12px 32px rgba(16, 24, 40, .12);
  --yogdu: 0 6px 18px rgba(79, 70, 229, .30);

  --radius: 14px;
  --radius-s: 10px;
  --panel: 252px;
}

/* ── Mavzu: oq / qora ──────────────────────────────────────────
   Uch holat:
     • data-mavzu yo'q   → tizim sozlamasiga bo'ysunadi
     • data-mavzu="oq"   → majburiy yorug'
     • data-mavzu="qora" → majburiy qorong'i

   Qorong'i palitra ikki marta yoziladi: biri qo'lda tanlov uchun,
   ikkinchisi tizim sozlamasi uchun. Media so'rovi
   `:not([data-mavzu="oq"])` bilan himoyalangan — aks holda
   foydalanuvchi oqni tanlasa ham tizim uni qoraga qaytarardi. */

:root[data-mavzu="qora"] {
  --fon: #0B0F1A;
  --fon-past: #070A12;
  --karta: #131A2B;
  --karta-ust: #182135;
  --chegara: #232E45;
  --chegara-quyuq: #2E3B55;
  --matn: #E8EBF2;
  --xira: #8792A8;
  --juda-xira: #626E85;

  --asosiy: #7C82F0;
  --asosiy-quyuq: #6366F1;
  --binafsha: #A78BFA;
  --asosiy-fon: #1B2140;
  --gradient: linear-gradient(135deg, #6366F1, #8B5CF6);

  --yashil: #34D399;
  --yashil-fon: #10291F;
  --sariq: #FBBF24;
  --sariq-fon: #2A2010;
  --qizil: #FB7185;
  --qizil-fon: #2E1420;

  --soya-1: 0 1px 2px rgba(0, 0, 0, .4);
  --soya-2: 0 4px 14px rgba(0, 0, 0, .45);
  --soya-3: 0 16px 40px rgba(0, 0, 0, .55);
  --yogdu: 0 6px 20px rgba(99, 102, 241, .40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mavzu="oq"]) {
    --fon: #0B0F1A;
    --fon-past: #070A12;
    --karta: #131A2B;
    --karta-ust: #182135;
    --chegara: #232E45;
    --chegara-quyuq: #2E3B55;
    --matn: #E8EBF2;
    --xira: #8792A8;
    --juda-xira: #626E85;

    --asosiy: #7C82F0;
    --asosiy-quyuq: #6366F1;
    --binafsha: #A78BFA;
    --asosiy-fon: #1B2140;
    --gradient: linear-gradient(135deg, #6366F1, #8B5CF6);

    --yashil: #34D399;
    --yashil-fon: #10291F;
    --sariq: #FBBF24;
    --sariq-fon: #2A2010;
    --qizil: #FB7185;
    --qizil-fon: #2E1420;

    --soya-1: 0 1px 2px rgba(0, 0, 0, .4);
    --soya-2: 0 4px 14px rgba(0, 0, 0, .45);
    --soya-3: 0 16px 40px rgba(0, 0, 0, .55);
    --yogdu: 0 6px 20px rgba(99, 102, 241, .40);
  }
}

/* ── Asos ──────────────────────────────────────────────────── */

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

html { background: var(--fon); }

body {
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fon);
  color: var(--matn);
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

body, .karta, .yon, .quti, .taklif, .elon, table, .tugma, .belgi, .tab {
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease;
}

/* Harakatni kamaytirish — ba'zi odamlarda animatsiya bosh og'rig'i
   yoki ko'ngil aynishiga sabab bo'ladi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: .01ms !important;
  }
}

a { color: var(--asosiy); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

h1 { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   YON PANEL
   ═══════════════════════════════════════════════════════════ */

.yon {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--panel);
  background: var(--karta); border-right: 1px solid var(--chegara);
  padding: 18px 12px 14px; display: flex; flex-direction: column;
  overflow-y: auto; z-index: 10;
}

/* Brend — gradient nishon + nom */
.logo {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  margin: 0 4px 20px; padding: 0;
}
.logo::before {
  content: '🎯'; flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--gradient);
  display: grid; place-items: center; font-size: 18px;
  box-shadow: var(--yogdu);
}
.logo small {
  display: block; font-weight: 450; font-size: 11.5px;
  color: var(--xira); letter-spacing: 0; margin-top: -1px;
}

/* Bo'lim sarlavhasi — PANEL / SAHIFALAR / AGENT */
.yon-bolim {
  font-size: 10.5px; font-weight: 700; color: var(--juda-xira);
  text-transform: uppercase; letter-spacing: .09em;
  margin: 16px 0 6px; padding: 0 11px;
}
.yon-bolim.birinchi { margin-top: 0; }

.yon nav { display: flex; flex-direction: column; gap: 1px; }
.yon nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-s);
  color: var(--xira); font-size: 13.5px; font-weight: 500;
}
.yon nav a:hover {
  background: var(--karta-ust); color: var(--matn); text-decoration: none;
}
.yon nav a.faol {
  background: var(--asosiy-fon); color: var(--asosiy); font-weight: 600;
}

/* O'ng tomondagi kichik nishon: son yoki daraja */
.yon nav a .son,
.yon nav a .nishon {
  margin-left: auto; font-size: 10px; font-weight: 700;
  border-radius: 7px; padding: 2px 7px; line-height: 1.5;
}
.yon nav a .son { background: var(--qizil); color: #fff; }
.yon nav a .nishon { background: var(--asosiy-fon); color: var(--asosiy); }
.yon nav a .yashil-nuqta {
  margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yashil); flex: none;
}

/* Pastdagi foydalanuvchi kartasi */
.yon-user {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--chegara);
  display: flex; align-items: center; gap: 10px;
}
.yon-user .avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--gradient); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.yon-user .kim { flex: 1; min-width: 0; }
.yon-user .kim b { display: block; font-size: 13px; font-weight: 600; }
.yon-user .kim span {
  display: block; font-size: 10.5px; color: var(--juda-xira);
  line-height: 1.35;
}
.yon-user .amal { display: flex; gap: 4px; }
.yon-user .amal a {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  border: 1px solid var(--chegara); background: var(--karta);
  display: grid; place-items: center; font-size: 12px; color: var(--xira);
}
.yon-user .amal a:hover {
  background: var(--karta-ust); color: var(--matn); text-decoration: none;
}

.yon-tag {
  padding-top: 12px; font-size: 11px;
  color: var(--juda-xira); line-height: 1.65;
}
.yon-tag b { color: var(--xira); font-weight: 600; }

/* ── Mavzu tugmasi ─────────────────────────────────────────── */

.mavzu {
  display: flex; gap: 2px; margin: 14px 0 0;
  background: var(--fon-past); border: 1px solid var(--chegara);
  border-radius: var(--radius-s); padding: 3px;
}
.mavzu button {
  flex: 1; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 500; color: var(--xira);
  padding: 5px 2px; border-radius: 7px; line-height: 1.4;
}
.mavzu button:hover { color: var(--matn); }
.mavzu button[aria-pressed="true"] {
  background: var(--karta); color: var(--matn); font-weight: 650;
  box-shadow: var(--soya-1);
}

/* ═══════════════════════════════════════════════════════════
   ASOSIY MAYDON
   ═══════════════════════════════════════════════════════════ */

.asos { margin-left: var(--panel); padding: 24px 28px 70px; max-width: 1480px; }

/* Sahifa sarlavhasi: chapda nom + tavsif, o'ngda boshqaruvlar */
.sarlavha {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.sarlavha h1 { margin-bottom: 2px; }
.sarlavha .tavsif { color: var(--xira); font-size: 13px; }
.osma { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Segment boshqaruv — Kunlik / Haftalik / Oylik */
.segment {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--radius-s); box-shadow: var(--soya-1);
}
.segment a, .segment button {
  padding: 6px 15px; border-radius: 8px; border: none; background: none;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--xira);
  cursor: pointer; line-height: 1.5;
}
.segment a:hover, .segment button:hover {
  color: var(--matn); text-decoration: none;
}
.segment .faol, .segment a.faol {
  background: var(--asosiy); color: #fff; font-weight: 600;
}
.segment .faol:hover { color: #fff; }

/* Holat pili — yashil nuqtali */
.holat-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 20px; font-size: 12.5px;
  font-weight: 550; background: var(--yashil-fon); color: var(--yashil);
  border: 1px solid transparent;
}
.holat-pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.holat-pill.p-kul { background: var(--fon-past); color: var(--xira); }

/* Kvadrat ikonli tugma */
.ikon-tugma {
  width: 36px; height: 36px; border-radius: var(--radius-s); flex: none;
  border: 1px solid var(--chegara); background: var(--karta);
  display: grid; place-items: center; cursor: pointer;
  font-size: 15px; color: var(--xira); box-shadow: var(--soya-1);
}
.ikon-tugma:hover {
  background: var(--karta-ust); color: var(--matn); text-decoration: none;
}

/* ── Ogohlantirish tasmasi — bir qatorda muhim raqamlar ─────── */

.tasma {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--radius); padding: 12px 18px; margin-bottom: 18px;
  box-shadow: var(--soya-1); font-size: 13px;
}
.tasma .band {
  display: flex; align-items: center; gap: 7px;
  padding: 0 18px; border-right: 1px solid var(--chegara);
  line-height: 1.5;
}
.tasma .band:first-child { padding-left: 0; }
.tasma .band:last-child { border-right: none; padding-right: 0; }
.tasma .nuqta {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--qizil);
}
.tasma .nuqta.n-yashil { background: var(--yashil); }
.tasma .nuqta.n-sariq { background: var(--sariq); }
.tasma .nuqta.n-kul   { background: var(--juda-xira); }
.tasma b { font-weight: 650; }
.tasma .qizil { color: var(--qizil); font-weight: 650; }

/* ── Tab tugmalar ──────────────────────────────────────────── */

.tab-qator {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: 22px; cursor: pointer;
  background: var(--karta); border: 1px solid var(--chegara);
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--matn);
  box-shadow: var(--soya-1); line-height: 1.4;
}
.tab:hover { background: var(--karta-ust); text-decoration: none; }
.tab.faol {
  background: var(--asosiy); border-color: var(--asosiy); color: #fff;
  font-weight: 600; box-shadow: var(--yogdu);
}
.tab.faol:hover { background: var(--asosiy-quyuq); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   KARTALAR
   ═══════════════════════════════════════════════════════════ */

.setka {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.setka-2 {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.karta {
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--radius); padding: 17px 19px;
  box-shadow: var(--soya-1);
}

/* Karta sarlavhasi: chapda nom, o'ngda kulrang izoh */
.karta-boshi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.karta-boshi h2 { display: flex; align-items: center; gap: 8px; }
.karta-boshi .maslahat {
  font-size: 12px; color: var(--juda-xira); font-weight: 450;
}

.yorliq {
  font-size: 10.5px; font-weight: 650; color: var(--juda-xira);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.raqam {
  font-size: 28px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.12; color: var(--matn);
}
.raqam small { font-size: 14px; font-weight: 500; color: var(--xira); }
.raqam.r-kok { color: var(--asosiy); }
.raqam.r-yashil { color: var(--yashil); }
.raqam.r-qizil { color: var(--qizil); }
.raqam.r-sariq { color: var(--sariq); }
.izoh { font-size: 12px; color: var(--xira); margin-top: 6px; }
.o-raqam { font-variant-numeric: tabular-nums; }

.blok { margin-bottom: 24px; }
.blok h2 { margin-bottom: 11px; }

/* ── Ro'yxat qatori: nuqta + nom + belgi + progress ─────────── */

.qator {
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--radius); padding: 15px 18px; margin-bottom: 10px;
  box-shadow: var(--soya-1);
}
.qator-boshi {
  display: flex; align-items: center; gap: 9px;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 7px;
}
.qator-nom { display: flex; align-items: center; gap: 9px; min-width: 0; }
.qator-nom .nuqta {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--yashil);
}
.qator-nom .nuqta.n-sariq { background: var(--sariq); }
.qator-nom .nuqta.n-qizil { background: var(--qizil); }
.qator-nom b { font-size: 14px; font-weight: 650; }
.qator-nom .meta { font-size: 12px; color: var(--juda-xira); }
.qator-olchov {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--xira); margin-bottom: 10px;
}
.qator-olchov b { color: var(--matn); font-weight: 650; }

.progress {
  height: 7px; border-radius: 4px; background: var(--fon-past);
  overflow: hidden;
}
.progress span {
  display: block; height: 100%; border-radius: 4px;
  background: var(--yashil);
}
.progress span.p-sariq { background: var(--sariq); }
.progress span.p-qizil { background: var(--qizil); }
.progress span.p-kok { background: var(--gradient); }

/* ── Jurnal qatori: ikonli kvadrat + matn + vaqt ────────────── */

.jurnal {
  display: flex; gap: 13px; padding: 13px 0;
  border-bottom: 1px solid var(--chegara);
}
.jurnal:last-child { border-bottom: none; }
.jurnal .ikon {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--asosiy-fon); display: grid; place-items: center;
  font-size: 14px;
}
.jurnal .tana { flex: 1; min-width: 0; }
.jurnal .tana b { display: block; font-size: 13.5px; font-weight: 650; }
.jurnal .tana span { font-size: 12.5px; color: var(--xira); }
.jurnal .vaqt {
  font-size: 11.5px; color: var(--juda-xira); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Chiplar ───────────────────────────────────────────────── */

.chip-qator { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  background: var(--karta); border: 1px solid var(--chegara);
  font: inherit; font-size: 12.5px; color: var(--matn);
  box-shadow: var(--soya-1);
}
.chip:hover { background: var(--karta-ust); text-decoration: none; }

/* ── Belgilar ──────────────────────────────────────────────── */

.belgi {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; border: 1px solid transparent;
}
.b-yashil { background: var(--yashil-fon); color: var(--yashil); }
.b-sariq  { background: var(--sariq-fon);  color: var(--sariq); }
.b-qizil  { background: var(--qizil-fon);  color: var(--qizil); }
.b-kok    { background: var(--asosiy-fon); color: var(--asosiy); }
.b-xira   { background: var(--fon-past);   color: var(--xira); }

/* Xavfsizlik chegarasi buzilganda — nishon emas, matn ichida.
   Byudjet jadvalida 20% qadamdan oshgan qator shu bilan ajraladi. */
.b-qizil-matn { color: var(--qizil); font-weight: 700; }
.b-sariq-fon  {
  background: var(--sariq-fon); color: var(--sariq);
  border-left: 3px solid var(--sariq);
  padding: 8px 10px; border-radius: 0 7px 7px 0; margin-top: 8px;
}

/* ── Ogohlantirish qutilari ────────────────────────────────── */

.quti {
  border: 1px solid var(--chegara); border-left-width: 3px;
  border-radius: var(--radius-s); padding: 13px 16px; margin: 9px 0;
  background: var(--karta); font-size: 13.5px;
}
.q-qizil  { background: var(--qizil-fon);  border-color: var(--qizil);  color: var(--qizil); }
.q-sariq  { background: var(--sariq-fon);  border-color: var(--sariq);  color: var(--sariq); }
.q-yashil { background: var(--yashil-fon); border-color: var(--yashil); color: var(--yashil); }
.q-kok    { background: var(--asosiy-fon); border-color: var(--asosiy); color: var(--asosiy); }

/* ── Tugmalar ──────────────────────────────────────────────── */

.tugma {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 18px; border-radius: var(--radius-s);
  background: var(--asosiy); color: #fff; border: 1px solid var(--asosiy);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: var(--soya-1); line-height: 1.3;
}
.tugma:hover {
  background: var(--asosiy-quyuq); border-color: var(--asosiy-quyuq);
  text-decoration: none; color: #fff;
}
.tugma:active { transform: translateY(1px); }
.tugma:disabled { opacity: .5; cursor: default; transform: none; }

/* Gradient variant — asosiy harakat uchun */
.t-gradient {
  background: var(--gradient); border-color: transparent;
  box-shadow: var(--yogdu);
}
.t-gradient:hover { filter: brightness(1.06); background: var(--gradient); }

.t-oq {
  background: var(--karta); color: var(--matn); border-color: var(--chegara);
}
.t-oq:hover { background: var(--karta-ust); color: var(--matn); }
.t-yashil { background: var(--yashil); border-color: var(--yashil); }
.t-yashil:hover { background: var(--yashil); filter: brightness(1.06); }
.t-qizil  { background: var(--qizil);  border-color: var(--qizil); }
.t-qizil:hover { background: var(--qizil); filter: brightness(1.06); }
.t-qizil-chiziq {
  background: var(--karta); color: var(--qizil); border-color: var(--qizil);
}
.t-qizil-chiziq:hover { background: var(--qizil-fon); color: var(--qizil); }
.t-kichik { padding: 6px 13px; font-size: 12.5px; border-radius: 8px; }
.t-katta { padding: 13px 26px; font-size: 14px; font-weight: 700; }

/* Davr tanlagichdagi faol tugma (`tugma t-oq b-kok`).
   `b-kok` belgi sinfi bo'lgani uchun `t-oq` dan keyin kelmaydi va
   faol holat ko'rinmay qolardi — shuning uchun aniqroq selektor. */
.tugma.b-kok {
  background: var(--asosiy); color: #fff;
  border-color: var(--asosiy); font-weight: 650;
}
.tugma.b-kok:hover { background: var(--asosiy-quyuq); color: #fff; }

/* ── Rejim boshqaruvi: ikki tugmali almashtirgich ───────────── */

.rejim { display: flex; gap: 8px; align-items: center; }
.rejim .tugma { min-width: 84px; }

/* ── Jadvallar ─────────────────────────────────────────────── */

.jadval-quti {
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--soya-1);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 11px 16px; font-size: 10.5px; font-weight: 700;
  color: var(--juda-xira); text-transform: uppercase; letter-spacing: .06em;
  background: var(--karta-ust); border-bottom: 1px solid var(--chegara);
  white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--chegara); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--karta-ust); }

/* ── Grafik ────────────────────────────────────────────────── */

.grafik {
  display: flex; align-items: flex-end; gap: 4px; height: 130px;
  padding: 14px 0 0;
}
.grafik .ustun { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.grafik .sarf {
  background: var(--gradient); border-radius: 5px 5px 2px 2px; min-height: 2px;
}
.grafik .sifat-nuqta {
  width: 6px; height: 6px; border-radius: 50%; background: var(--yashil);
  margin: 0 auto 4px;
}
.grafik-izoh {
  display: flex; gap: 16px; font-size: 11.5px; color: var(--xira);
  margin-top: 10px; flex-wrap: wrap;
}

/* Gorizontal chiziqli grafik — kunlik hisobot uchun */
.bar-qator {
  display: flex; align-items: center; gap: 14px; padding: 5px 0;
  font-size: 12.5px;
}
.bar-qator .kun { width: 46px; color: var(--xira); flex: none; }
.bar-qator .yol {
  flex: 1; height: 9px; border-radius: 5px; background: var(--fon-past);
  overflow: hidden;
}
.bar-qator .yol span {
  display: block; height: 100%; border-radius: 5px; background: var(--yashil);
}
.bar-qator .yol span.p-sariq { background: var(--sariq); }
.bar-qator .son, .bar-qator .pul {
  width: 66px; text-align: right; flex: none; font-weight: 600;
}
.bar-qator .pul.yashil { color: var(--yashil); }
.bar-qator .pul.sariq { color: var(--sariq); }

/* ── Takliflar va e'lonlar ─────────────────────────────────── */

.taklif, .elon {
  background: var(--karta); border: 1px solid var(--chegara);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 11px;
  box-shadow: var(--soya-1);
}
.taklif-boshi, .elon-boshi {
  display: flex; align-items: center; gap: 9px;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 9px;
}
.taklif-amal { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.taklif.qoida { border-left: 3px solid var(--sariq); }
.taklif.ai { border-left: 3px solid var(--asosiy); }
.elon-boshi .nusxa { margin-left: auto; }

/* ── Formalar ──────────────────────────────────────────────── */

.maydon { margin-bottom: 15px; }
.maydon label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--xira); margin-bottom: 6px;
}
.maydon .yordam {
  font-size: 12px; color: var(--juda-xira); margin: -2px 0 7px;
}
.maydon input, .maydon select, .maydon textarea {
  width: 100%; padding: 11px 14px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--chegara); border-radius: var(--radius-s);
  background: var(--karta); color: var(--matn); outline: none;
}
.maydon input:focus, .maydon select:focus, .maydon textarea:focus {
  border-color: var(--asosiy);
  box-shadow: 0 0 0 3px var(--asosiy-fon);
}
.maydon textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.majburiy { color: var(--qizil); }

/* Cheklovlar setkasi — yonma-yon kichik maydonlar */
.maydon-setka {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ── Chat (strategiya) ─────────────────────────────────────── */

.chat { display: flex; flex-direction: column; gap: 11px; }
.xabar {
  padding: 12px 15px; border-radius: var(--radius-s); font-size: 13.5px;
  max-width: 78%; line-height: 1.6;
}
.x-men { align-self: flex-end; background: var(--asosiy); color: #fff; }
.x-ai {
  align-self: flex-start; background: var(--karta);
  border: 1px solid var(--chegara); box-shadow: var(--soya-1);
}

/* ── Kirish sahifasi ───────────────────────────────────────── */

.kirish-sahifa {
  min-height: 100vh; display: grid; place-items: center;
  background: #0B0F1A; position: relative; overflow: hidden;
}
.kirish-sahifa::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(700px 500px at 15% 0%, rgba(79, 70, 229, .35), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, rgba(124, 58, 237, .30), transparent 60%),
    radial-gradient(500px 500px at 90% 0%, rgba(20, 184, 166, .18), transparent 60%);
}
.kirish-quti {
  position: relative; z-index: 1;
  width: 392px; max-width: 92vw; background: var(--karta);
  border: 1px solid var(--chegara); border-radius: 22px;
  padding: 34px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.kirish-brend {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.kirish-nishon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: var(--gradient); display: grid; place-items: center;
  font-size: 21px; box-shadow: var(--yogdu);
}
.kirish-brend b { font-size: 16px; display: block; letter-spacing: -.01em; }
.kirish-brend span { font-size: 12px; color: var(--xira); }
.kirish-sarlavha { font-size: 19px; font-weight: 700; margin-bottom: 3px; }
.kirish-tavsif { color: var(--xira); font-size: 13px; margin-bottom: 20px; }
.kirish-tugma { width: 100%; margin-top: 22px; padding: 13px; }
.kirish-oyoq {
  margin-top: 20px; text-align: center;
  font-size: 11px; color: var(--juda-xira);
}

/* ── Bo'sh holat ───────────────────────────────────────────── */

.bosh {
  text-align: center; padding: 40px 22px; color: var(--juda-xira);
  font-size: 13.5px; background: var(--karta);
  border: 1px dashed var(--chegara); border-radius: var(--radius);
}

/* ── Yuklanish belgisi ─────────────────────────────────────── */

.yuklanish {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: aylan .7s linear infinite;
  vertical-align: -2px;
}
@keyframes aylan { to { transform: rotate(360deg); } }

/* ── Suzuvchi yordam tugmasi ───────────────────────────────── */

.fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; border: none;
  background: var(--gradient); color: #fff; cursor: pointer;
  font-size: 24px; display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(79, 70, 229, .45);
}
.fab:hover { filter: brightness(1.07); text-decoration: none; color: #fff; }
.fab::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22C55E; border: 2px solid var(--karta);
}

/* ── Kichik ekranlar ───────────────────────────────────────── */

@media (max-width: 980px) {
  .yon {
    position: static; width: auto; flex-direction: row;
    align-items: center; flex-wrap: wrap; gap: 10px;
    border-right: none; border-bottom: 1px solid var(--chegara);
    padding: 12px 16px;
  }
  .logo { margin: 0; }
  .yon-bolim { display: none; }
  .yon nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .yon-user, .yon-tag { display: none; }
  .mavzu { margin: 0; width: auto; }
  .asos { margin-left: 0; padding: 18px 16px 80px; }
  .tasma .band { border-right: none; padding: 4px 0; width: 100%; }
  .fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}