/* ═══════════════════════════════════════════════════════════════
   LUX — dizayn tizimi
   Brend rangi logotipdan: #01C0F6 qora fonda.
   ⚠️ Rang qiymatlari WCAG kontrast va CVD tekshiruvidan o'tgan —
      o'zgartirmang. Kodda xom hex YOZILMAYDI, faqat var(--...).
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── QORONG'I (default) ─────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:        #000000;
  --surface-1:      #0E1114;
  --surface-2:      #161A1F;
  --surface-3:      #1E242B;
  --overlay:        rgba(0,0,0,.72);

  --border:         #232A32;
  --border-strong:  #313A45;

  --text-primary:   #F2F5F7;
  --text-secondary: #9BA7B4;
  --text-muted:     #6B7885;
  --text-inverse:   #002430;

  --brand:          #01C0F6;
  --brand-hover:    #3FCDF9;
  --brand-active:   #00A6D6;
  --brand-solid:    #01C0F6;
  --brand-subtle:   rgba(1,192,246,.12);
  --brand-ring:     rgba(1,192,246,.40);
  --on-brand:       #002430;

  --good:           #22C55E;
  --warning:        #EAB308;
  --serious:        #F97316;
  --critical:       #EF4444;
  --good-bg:        rgba(34,197,94,.12);
  --warning-bg:     rgba(234,179,8,.12);
  --serious-bg:     rgba(249,115,22,.12);
  --critical-bg:    rgba(239,68,68,.12);

  --series-1: #0FA2CE;  --series-2: #D95926;  --series-3: #199E70;
  --series-4: #C98500;  --series-5: #D55181;  --series-6: #9085E9;
  --series-7: #E66767;

  --seq-1: #0C5570; --seq-2: #0D7597; --seq-3: #0FA2CE; --seq-4: #3FC5EC;
  --heat-0: #0E1114; --heat-1: #0B2C3A; --heat-2: #0C4159;
  --heat-3: #0C5570; --heat-4: #0D7597; --heat-5: #0FA2CE; --heat-6: #3FC5EC;

  --div-neg: #E66767; --div-mid: #313A45; --div-pos: #0FA2CE;

  --grid:      rgba(255,255,255,.06);
  --axis-text: #6B7885;
  --chart-surface: #0E1114;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}

/* ─────────── KUNDUZGI ─────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base:        #F5F7F9;
  --surface-1:      #FFFFFF;
  --surface-2:      #F0F3F6;
  --surface-3:      #FFFFFF;
  --overlay:        rgba(11,17,20,.48);

  --border:         #DFE5EA;
  --border-strong:  #C3CDD6;

  --text-primary:   #0B1114;
  --text-secondary: #48555F;
  --text-muted:     #6B7885;
  --text-inverse:   #FFFFFF;

  --brand:          #0479A3;   /* matn/ikonka uchun to'qroq qadam */
  --brand-hover:    #035B7C;
  --brand-active:   #024A66;
  --brand-solid:    #01C0F6;   /* to'ldirish (tugma foni) */
  --brand-subtle:   rgba(1,192,246,.14);
  --brand-ring:     rgba(4,121,163,.35);
  --on-brand:       #002430;

  --good:           #15803D;
  --warning:        #A16207;
  --serious:        #C2410C;
  --critical:       #DC2626;
  --good-bg:        rgba(21,128,61,.10);
  --warning-bg:     rgba(161,98,7,.10);
  --serious-bg:     rgba(194,65,12,.10);
  --critical-bg:    rgba(220,38,38,.10);

  --series-1: #0490C4;  --series-2: #EB6834;  --series-3: #1BAF7A;
  --series-4: #EDA100;  --series-5: #E87BA4;  --series-6: #4A3AA7;
  --series-7: #E34948;

  --seq-1: #4FC0E6; --seq-2: #12A3D2; --seq-3: #0A7BA3; --seq-4: #075975;
  --heat-0: #F0F3F6; --heat-1: #CFEDF9; --heat-2: #9FDCF3;
  --heat-3: #4FC0E6; --heat-4: #12A3D2; --heat-5: #0A7BA3; --heat-6: #075975;

  --div-neg: #E34948; --div-mid: #C3CDD6; --div-pos: #0490C4;

  --grid:      rgba(11,17,20,.08);
  --axis-text: #6B7885;
  --chart-surface: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(11,17,20,.06);
  --shadow-md: 0 4px 12px rgba(11,17,20,.09);
  --shadow-lg: 0 12px 32px rgba(11,17,20,.13);
}

/* ─────────── O'lcham, radius, tipografika ─────────── */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* D-7: spec shkalasi. `md` va `lg` FARQ qiladi (ilgari ikkalasi 7px edi). */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Quti ichki bo'shlig'i: sarlavha lentasi va tanasi uchun bir xil o'lcham */
  --box-pad-x: 15px;
  --box-pad-y: 13px;

  --sidebar-w: 236px;
  --sidebar-collapsed: 60px;
  --max-w: 1440px;

  /* Kirish ekranining ranglari. ⚠️ Ular temaga BOG'LIQ EMAS: `/login`
     ikkala temada ham qorong'i va neon ko'rinishda qoladi — bu ataylab,
     panelga kirishdan oldingi ekran o'z shaxsiga ega.
     `--auth-tg*` — Telegramning brend ko'ki, LUX palitrasiga kirmaydi,
     shuning uchun aynan shu yerda, token sifatida e'lon qilinadi. */
  --auth-lux:      #01C0F6;
  --auth-tg:       #2AABEE;
  --auth-tg-deep:  #1C7FC4;
  --auth-bg-1:     #060B12;
  --auth-bg-2:     #0A1524;
  --auth-surface:  #0C141F;
  --auth-placeholder: #5C6C7E;
  --auth-on-brand:    #04121B;
}

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

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

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* D-1: spec shkalasi — body 14/21 */
  font-size: 14px;
  line-height: 21px;
  transition: background-color .15s, color .15s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

h1, h2, h3 { margin: 0; font-weight: 600; }
/* D-1: shkala spec bilan bir xil. ⚠️ `h2` tana matnidan KATTA bo'lishi shart —
   ilgari ikkalasi 13.5px edi va bo'lim sarlavhalari faqat qalinlik bilan
   ajralardi. */
.display { font-size: 30px; line-height: 36px; font-weight: 650; }
h1 { font-size: 22px; line-height: 28px; }
h2 { font-size: 17px; line-height: 24px; }
h3 { font-size: 15px; line-height: 22px; }
.body { font-size: 14px; line-height: 21px; }
.body-sm { font-size: 13px; line-height: 19px; }
.label {
  font-size: 12px; line-height: 16px; font-weight: 550;
  letter-spacing: .02em; color: var(--text-muted);
}
.caption { font-size: 11px; line-height: 15px; font-weight: 500; color: var(--text-muted); }
/* D-2: raqamlar SANS + `tabular-nums`. Mono kengroq va «kod» kabi ko'rinadi;
   u faqat ID, token va kod uchun. */
.metric {
  font-size: 32px; line-height: 36px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 13px; line-height: 20px;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
/* Jadval ichidagi mono ustunlar fon olmaydi — qator o'zi ajratib turadi */
td .mono, th .mono, td.mono, th.mono { background: transparent; padding: 0; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }

/* Fokus halqasi — BARCHA interaktiv element uchun bir xil */
:focus-visible {
  outline: 2px solid var(--brand-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

.skip-link {
  /* D-8: to'ldirish uchun `--brand-solid` (`--brand` — MATN qadami) */
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-solid); color: var(--on-brand);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ─────────── Tuzilma ─────────── */

.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* Yon panel: yuqorida brend lentasi, pastda kim kirgani — ikkalasi ham
   chiziq bilan ajratilgan (kontent ro'yxati o'rtada suzib turmaydi). */
.sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand-mark {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--box-pad-x);
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 14.5px; letter-spacing: .2px;
  color: var(--text-primary);
}
.brand-mark .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-solid); }

.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2); flex: 1; }
.nav a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13.5px;
  min-height: 34px;
}
.nav a:hover { background: var(--surface-2); color: var(--text-primary); }
/* Faol bandning foni `--brand-subtle`: `--surface-3` kunduzgi temada oq —
   yon panel foni bilan qo'shilib ketardi va tanlangan bo'lim ko'rinmasdi. */
.nav a.on {
  background: var(--brand-subtle);
  color: var(--brand);
  font-weight: 600;
}
.nav .count {
  /* D-8: yagona xom hex edi va qorong'ida 3.4:1 (11px matn uchun AA yiqiladi) */
  margin-left: auto;
  background: var(--critical); color: var(--text-inverse);
  font-size: 11px; font-weight: 600;
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
}

.sidebar-footer {
  margin-top: auto; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.sidebar-footer .who-name { color: var(--text-primary); font-size: 13px; margin-bottom: 2px; }

main { padding: var(--space-5) var(--space-6) var(--space-8); max-width: var(--max-w); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: 38px; padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  background: transparent; color: var(--text-primary);
  border-color: var(--border-strong);
  white-space: nowrap;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
/* D-6: 4 variant shartnomasi CSS da ham bor bo'lsin —
   `ui.button` default `secondary` beradi va u hech qanday qoidaga
   tushmasdi (tasodifan to'g'ri ko'rinardi, xolos). */
.btn-secondary { background: transparent; color: var(--text-primary);
                 border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary {
  background: var(--brand-solid); color: var(--on-brand);
  border-color: transparent; font-weight: 600;
}
/* D-10: `:active` holati — ilgari `--brand-active` hech qayerda ishlatilmasdi */
.btn-primary:active { background: var(--brand-active); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); }
.btn-danger { background: transparent; color: var(--critical); border-color: var(--border); }
.btn-danger:hover { background: transparent; color: var(--critical); border-color: var(--critical); }
.btn-sm { height: 30px; padding: 0 var(--space-3); font-size: 13px; }
.btn-lg { height: 46px; padding: 0 var(--space-5); font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* D-5: eni balandlikka TENG — ilgari 38×33 va 30×28 bo'lib, tugmalar
   to'rtburchak emas, cho'zilgan ko'rinardi */
.btn-icon { width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }

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

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--space-3); }
.field > label { font-size: 12px; font-weight: 550; color: var(--text-muted); }
.field .hint { font-size: 11.5px; color: var(--text-muted); }
.field .error { font-size: 12px; color: var(--critical); }

input, select, textarea {
  width: 100%;
  min-height: 34px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit; font-size: 13.5px;
}
textarea { min-height: 90px; resize: vertical; font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--critical); }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand-solid); }

/* ⚠️ `flex-wrap: wrap` QO'YMANG: ko'p qatorli flex konteynerning max-content
   eni eng katta BITTA elementga teng bo'lib qoladi, natijada forma siqilib,
   tugmasi pastga tushib ketadi. */
.inline-form {
  display: inline-flex; gap: var(--space-2); align-items: center;
}
/* Checkbox yorlig'i ikki qatorga bo'linib ketmasin */
.inline-form label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  white-space: nowrap; cursor: pointer;
}
.inline-form input[type="checkbox"] { flex: none; }
/* `input { width: 100% }` global qoidasi qatorli formani ustma-ust taxlab
   qo'yardi — bu yerda maydonlar o'z eniga ega bo'ladi */
.inline-form input:not([type="checkbox"]),
.inline-form select { width: auto; }
.inline-form input[type="search"] { flex: 0 1 260px; min-width: 180px; }
.inline-form select { min-width: 140px; }
.row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
/* Qatordagi forma siqilib, tugmasi pastga tushib ketmasin — o'zi butunligicha
   keyingi qatorga ko'chsin (`.row` ning `flex-wrap` i buni bajaradi) */
.row > .inline-form { flex: none; }

/* Sir input.
   E-11: bitta ro'yxatda ikki xil qator uslubi bo'lmasin — sir maydon ham
   oddiy maydon kabi fonsiz; uni «sir» ekani niqob va tugma bildiradi. */
.secret {
  border: none; padding: 0; background: transparent;
}
.secret .value { display: flex; gap: var(--space-2); align-items: center; }
.secret .masked {
  flex: 1; font-family: var(--font-mono); font-size: 13px;
  color: var(--text-secondary); padding: var(--space-2) var(--space-3);
  background: var(--surface-3); border-radius: var(--radius-sm);
  overflow: hidden; text-overflow: ellipsis;
}
.secret .meta { font-size: 12px; color: var(--text-muted); margin-top: var(--space-2); }
.secret .editor { margin-top: var(--space-3); display: none; }
.secret.editing .editor { display: block; }

/* ─────────── Kartochka, KPI ─────────── */

/* «Quti»: sarlavha lentasi + tana. Sarlavha (header yoki birinchi h2)
   manfiy chekka bilan chetga chiqariladi — shablonlarni o'zgartirmasdan
   lenta ko'rinishini beradi. */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--box-pad-y) var(--box-pad-x);
}
.card + .card { margin-top: var(--space-3); }
/* U-1: bu chekka GRIDNING BARCHA turlarida bekor qilinishi shart.
   Ilgari faqat `.grid` yozilgan edi, `.grid-2` va `.grid-kpi` esa
   qolib ketgandi: ular ichidagi IKKINCHI kartochka 12px pastga
   siljib turardi va ikki ustunli har bir qator (bosh sahifadagi
   grafiklar, Grafik, Statistika, Moderatsiya, Daromad, Hamkorlar,
   Profil, Tizim holati) qiyshiq ko'rinardi. */
.grid > .card + .card,
.grid-2 > .card + .card,
.grid-kpi > .card + .card { margin-top: 0; }

/* D-13: lenta FAQAT `<header>` dan. Ilgari `h2:first-child` ham lenta bo'lardi
   va bir xil `<h2>` bir kartochkada banner, boshqasida oddiy sarlavha
   ko'rinishida chiqardi — bitta element, ikki xil vizual shaxs. */
.card > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin: calc(-1 * var(--box-pad-y)) calc(-1 * var(--box-pad-x)) var(--box-pad-y);
  padding: var(--space-3) var(--box-pad-x);
  border-bottom: 1px solid var(--border);
}
.card > header > h2 { border: none; margin: 0; padding: 0; }

/* D-13: jadval FAQAT `<header>` dan keyin chetdan-chetga cho'ziladi —
   shunda «cho'zilgan/cho'zilmagan» farqi tushunarli qoidaga ega bo'ladi
   (ilgari u `:last-child` bo'lishiga qarab tasodifiy edi). */
.card > header + .table-wrap {
  margin: calc(-1 * var(--box-pad-y)) calc(-1 * var(--box-pad-x))
          calc(-1 * var(--box-pad-y));
}

/* ⚠️ `grid-kpi`/`grid-2` O'ZI ham grid bo'lishi shart: shablonlarning
   yarmi ularni `grid` sinfisiz ishlatadi va bu holda plitkalar grid
   bo'lmay, ustma-ust to'liq kenglikda cho'zilib ketardi. */
/* E-5: `align-items: start` — qo'shni kartochka balandligiga cho'zilib,
   yarmi bo'sh qolmasin */
.grid, .grid-kpi, .grid-2 { display: grid; gap: var(--space-3); align-items: start; }
/* Ketma-ket bloklar bir-biriga yopishib qolmasin */
.grid + *, .grid-kpi + *, .grid-2 + * { margin-top: var(--space-3); }
/* U-8: KPI plitkalari teng BALANDLIKDA bo'lsin.
   Sparkline'li ikki plitka balandroq edi va qator pastidan tishli
   ko'rinardi (`align-items: start` kartochkalar uchun to'g'ri, plitkalar
   uchun emas). Kenglik `auto-fit` da qoladi: `auto-fill` bo'sh treklarga
   ham `1fr` ulush berib, qatorni o'ng chetgacha yetkazmasdi. */
.grid-kpi {
  /* 200px — «300 000 so'm» bir qatorga sig'adigan eng kichik kenglik;
     172px da qiymat ikki qatorga bo'linib ketardi. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: stretch;
}
/* HTMX bilan yangilanadigan plitkalar ASOSIY qatorning o'zida tursin —
   ilgari ular alohida grid bo'lgani uchun ikkitasi butun kenglikka
   cho'zilib, yuqoridagi olti plitkaga umuman o'xshamasdi. */
#live-kpi { display: contents; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.kpi { background: var(--surface-1); border: 1px solid var(--border);
       border-radius: var(--radius-lg); padding: var(--box-pad-y) var(--box-pad-x); }
.kpi .label { font-size: 12px; color: var(--text-muted); }
/* D-1/D-2: yagona «katta raqam» ta'rifi — `.metric` bilan bir xil */
.kpi .value { font-size: 26px; line-height: 32px; font-weight: 650;
              font-variant-numeric: tabular-nums; }
.kpi .delta { display: flex; align-items: center; gap: var(--space-1);
              font-size: 12px; margin-top: 2px; }
.kpi .delta.up { color: var(--good); }
.kpi .delta.down { color: var(--critical); }
.kpi .spark { margin-top: var(--space-2); height: 24px; display: block; width: 100%; }

/* ─────────── Jadval ─────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
thead th {
  /* G-9: `position: sticky` faqat VERTIKAL aylanuvchi o'ramda ishlaydi;
     `.table-wrap` esa gorizontal aylanadi — ya'ni u hech qachon ishlamagan.
     Sarlavha fonini saqlaymiz (jadval chetiga chiqqanda ham o'qiladi). */
  background: var(--surface-1);
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
  text-align: left; padding: var(--space-2) var(--box-pad-x);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: var(--space-2) var(--box-pad-x); border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
/* Sonli ustunlar mono — raqamlar ustma-ust tik turadi va tez taqqoslanadi */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* D-14: saralash mumkinligi ko'rinib tursin */
th.is-sortable { cursor: pointer; user-select: none; }
th.is-sortable:hover { color: var(--text-primary); }
th.is-sortable[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
th.is-sortable[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
td.num { white-space: nowrap; }
/* Qatordagi amal tugmalari ikki qatorga bo'linib ketmasin — jadval o'zi
   gorizontal aylanadi (`.table-wrap`), tugmalar esa yonma-yon turadi. */
tbody td .toolbar { flex-wrap: nowrap; }

.empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted); font-size: 13px; }
.empty .icon { display: block; margin-bottom: var(--space-3); opacity: .45; }
.empty .icon .icon { display: inline-block; margin: 0; }

.skeleton {
  height: 16px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.pagination { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }

/* ─────────── Nishon ─────────── */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11.5px; font-weight: 500;
  background: var(--surface-3); color: var(--text-muted);
  white-space: nowrap;
}
.badge-good     { background: var(--good-bg);     color: var(--good); }
.badge-warning  { background: var(--warning-bg);  color: var(--warning); }
.badge-serious  { background: var(--serious-bg);  color: var(--serious); }
.badge-critical { background: var(--critical-bg); color: var(--critical); }
.badge-brand    { background: var(--brand-subtle); color: var(--brand); }

/* ─────────── Modal ─────────── */

.modal-backdrop {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); z-index: 50;
}
/* ⚠️ `display: flex` brauzerning `[hidden]` qoidasidan kuchli — buni
   qaytarmasak, yopiq modal sahifa ochilishida OCHIQ turadi va butun
   sahifani to'sib qo'yadi. */
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: var(--box-pad-y) var(--box-pad-x);
}
.modal.wide { max-width: 900px; }
/* Modal sarlavhasi ham quti lentasi ko'rinishida */
.modal > header {
  display: flex; justify-content: space-between; align-items: center;
  margin: calc(-1 * var(--box-pad-y)) calc(-1 * var(--box-pad-x)) var(--box-pad-y);
  padding: var(--space-3) var(--box-pad-x); border-bottom: 1px solid var(--border);
}
.modal footer { display: flex; gap: var(--space-2); justify-content: flex-end;
                margin-top: var(--space-4); }

/* ─────────── Toast ─────────── */

/* Pastki o'ng burchak — kontentni to'smaydi (yuqorida asboblar paneli bor) */
.toast-host {
  position: fixed; bottom: var(--space-4); right: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  z-index: 100; max-width: 340px;
}
.toast {
  background: var(--surface-3); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-solid);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--box-pad-x); font-size: 13px;
  animation: slide-in .18s ease-out;
}
.toast.good,
.toast.success  { border-left-color: var(--good); }
.toast.info     { border-left-color: var(--brand-solid); }
.toast.warning  { border-left-color: var(--warning); }
.toast.critical,
.toast.error    { border-left-color: var(--critical); }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─────────── Tema almashtirgich ─────────── */

.theme-switch {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px;
}
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted);
  width: 29px; height: 25px; border-radius: var(--radius-full);
  cursor: pointer; line-height: 1;
}
.theme-switch button[aria-pressed="true"] { background: var(--brand-subtle); color: var(--brand); }

/* ─────────── Grafik va issiqlik xaritasi ─────────── */

.chart { position: relative; height: 250px; }
.chart-table { display: none; margin-top: var(--space-3); }
.chart-table.on { display: block; }

.heat { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.heat .cell,
.heat-cell {
  aspect-ratio: 1; border-radius: 3px; background: var(--heat-0);
  /* Fon 0..1 oralig'ida o'zgaradi, shuning uchun matn `--text-muted` emas:
     o'rtacha to'qlikdagi katakda kulrang raqam o'qilmay qolardi. */
  font-size: 9px; color: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; overflow: hidden;
  /* --ratio 0..1 — shablon har katakka o'rnatadi */
  background: color-mix(in srgb, var(--heat-6) calc(var(--ratio, 0) * 100%), var(--heat-0));
}
.heat-cell .heat-val { font-variant-numeric: tabular-nums; opacity: .78; }
/* To'q katakda matn fon rangida bo'ladi (ikkala temada ham to'g'ri:
   qorong'ida --heat-6 yorug', yorug'da to'q). Sinfni shablon qo'yadi —
   ilgari bu inline uslub satrini qidirish orqali qilinardi va faqat soat
   raqamiga tegardi, ko'rish soni esa o'qilmay qolardi. */
.heat-cell.is-strong { color: var(--bg-base); }
/* E-8: «ma'lumot yo'q» (post chiqmagan) va «juda kam ko'rilgan»
   bir xil ko'rinardi — birinchisi endi chiziqli fon bilan ajraladi */
.heat-cell.is-empty {
  background: repeating-linear-gradient(45deg, var(--heat-0), var(--heat-0) 3px,
              var(--surface-2) 3px, var(--surface-2) 6px);
  color: var(--text-muted);
}

/* 24 ta katak telefonda siqilib ketmasin */
@media (max-width: 720px) {
  .heat { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .heat-cell .heat-val { display: none; }
}

.heat-legend { display: flex; align-items: center; gap: var(--space-2);
               margin-top: var(--space-3); font-size: 12px; color: var(--text-muted); }
.heat-legend .swatch { width: 18px; height: 12px; border-radius: 3px; }
.heat-scale {
  flex: 1; max-width: 220px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--heat-0), var(--heat-3), var(--heat-6));
}

.progress {
  height: 8px; background: var(--surface-3); border-radius: var(--radius-full);
  overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--brand-solid); }

/* ─────────── Diqqat bloki ─────────── */

.attention { display: flex; flex-direction: column; gap: var(--space-2); }
.attention .item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-2); font-size: 13px;
}
.attention .item .spacer { margin-left: auto; }
.attention .item.critical { background: var(--critical-bg); }
.attention .item.warning { background: var(--warning-bg); }

/* ─────────── Filtr tablari (U-5) ─────────── */

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tabs .tab-count {
  margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
  font-variant-numeric: tabular-nums; font-size: 11px;
}
/* Faol tabda sanoq fon ustida o'qilishi kerak */
.tabs .btn-primary .tab-count { background: rgba(0, 0, 0, .22); color: inherit; }

/* ─────────── Kirish sahifasi ───────────
   ⚠️ Bu blok FAQAT `/login` uchun. Panelning qolgan qismi neytral
   yuzalarda ishlaydi; kirish ekrani esa ataylab ajralib turadi.
   Ikki rang: LUX (`--brand`, ochiq moviy) va Telegram (chuqurroq ko'k).
   Ular ramkaning qarama-qarshi uchlaridan bir-biriga o'tadi. */

.auth {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--space-4);
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(1, 192, 246, .10), transparent 62%),
    radial-gradient(900px 560px at 88% 108%, rgba(42, 171, 238, .14), transparent 60%),
    linear-gradient(168deg, var(--auth-bg-2), var(--auth-bg-1));
}

/* Kartochka. Neon ramka `::before` bilan chiziladi va kartochkaning
   o'zidan SURILGAN — namunadagi «ikki qavat» effekti shundan. */
.auth-card {
  position: relative;
  width: 100%; max-width: 380px;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: transparent;
  border-radius: 26px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6),
              0 0 26px rgba(1, 192, 246, .10);
}
/* Ikki nur ramka bo'ylab AYLANIB yuradi: biri LUX moviysi, ikkinchisi
   Telegram ko'ki, bir-biriga qarama-qarshi tomonda.

   Qanday ishlaydi: `.auth-frame` — kartochkadan 2px kattaroq, burchagi
   yumaloq va `overflow: hidden` bo'lgan qatlam. Uning ichida KATTA
   kvadrat (`::before`) markaz atrofida aylanadi; kvadrat konus
   gradient bilan bo'yalgan, ya'ni aylanganda yorug'lik dog'lari
   chetlab o'tadi. Kartochkaning o'z foni o'rtani yopib turgani uchun
   faqat 2px halqa ko'rinadi.

   ⚠️ Kvadratni aylantiramiz, HALQANI emas — aks holda yumaloq burchak
   ham aylanib, ramka qiyshiq ko'rinardi. */
.auth-frame {
  position: absolute; inset: -3px;
  border-radius: 29px;
  filter: drop-shadow(0 0 9px rgba(1, 192, 246, .22));
  overflow: hidden; pointer-events: none;
}
/* Halqaning ICHKI qismini kartochka rangi bilan yopamiz — shunda faqat
   2px chekka ko'rinadi. ⚠️ `z-index: -1` ishlatilmaydi: `.auth-card`
   stacking kontekst yaratmagani uchun ramka `.auth` ning fonidan ham
   orqaga tushib, butunlay ko'rinmay qolardi. */
.auth-frame::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 26px; background: var(--auth-surface);
}
/* Ramka absolyut, ya'ni oddiy sheriklaridan YUQORIDA chiziladi.
   Shuning uchun mazmun ataylab pozitsiyalanadi va tepaga chiqadi. */
.auth-card > *:not(.auth-frame) { position: relative; }
.auth-frame::before {
  content: ""; position: absolute;
  left: 50%; top: 50%; width: 210%; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    rgba(42, 171, 238, .18) 0deg 16deg,
    var(--auth-lux) 34deg,
    var(--auth-lux) 66deg,
    rgba(42, 171, 238, .18) 104deg 196deg,
    var(--auth-tg) 214deg,
    var(--auth-tg) 246deg,
    rgba(42, 171, 238, .18) 284deg 360deg
  );
  animation: auth-orbit 6s linear infinite;
}
@keyframes auth-orbit {
  to { rotate: 360deg; }
}
/* Harakatni kamaytirish so'ralsa — nurlar joyida turadi, yo'qolmaydi */
@media (prefers-reduced-motion: reduce) {
  .auth-frame::before { animation: none; rotate: 45deg; }
}

.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; letter-spacing: .14em; font-size: 12px;
  color: var(--auth-tg); text-transform: uppercase;
}
.auth-brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--auth-lux); box-shadow: 0 0 10px var(--auth-lux);
}
.auth-title {
  margin: var(--space-3) 0 var(--space-6);
  text-align: center; font-size: 30px; line-height: 1.15;
  letter-spacing: .01em; color: var(--auth-lux);
  text-shadow: 0 0 22px rgba(1, 192, 246, .28);
}

/* Maydonlar — quti emas, CHIZIQ (namunadagidek), chapda ikonka */
.auth-field { position: relative; margin-bottom: var(--space-5); }
.auth-field .auth-icon {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  color: var(--auth-tg); pointer-events: none;
}
.auth-field input {
  width: 100%; padding: 10px 2px 10px 28px;
  background: transparent; color: var(--text-primary);
  border: 0; border-bottom: 1px solid rgba(42, 171, 238, .75);
  border-radius: 0; font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-field input::placeholder { color: var(--auth-placeholder); }
.auth-field input:focus {
  outline: none;
  border-bottom-color: var(--auth-lux);
  box-shadow: 0 1px 0 0 var(--auth-lux);
}
.auth-field input:focus + .auth-icon,
.auth-field input:not(:placeholder-shown) ~ .auth-icon { color: var(--auth-lux); }

/* Yuborish — namunadagidek to'liq yumaloq, ichi bo'sh */
.auth-submit {
  width: 100%; margin-top: var(--space-2);
  padding: 11px 20px; border-radius: 999px;
  background: transparent; color: var(--auth-lux);
  border: 1px solid var(--auth-lux);
  font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.auth-submit:hover {
  background: linear-gradient(135deg, var(--auth-lux), var(--auth-tg));
  color: var(--auth-on-brand); border-color: transparent;
  box-shadow: 0 0 22px rgba(1, 192, 246, .35);
}
.auth-submit:focus-visible {
  outline: 2px solid var(--auth-lux); outline-offset: 3px;
}

.auth-error {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: var(--space-4); padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--critical-bg); color: var(--text-primary);
  font-size: 12.5px; line-height: 1.45;
}
.auth-error .icon { color: var(--critical); flex: none; margin-top: 1px; }

.auth-hint { margin-top: var(--space-4); font-size: 12.5px; }
.auth-hint summary {
  cursor: pointer; color: var(--auth-tg); font-weight: 600;
  list-style: none;
}
.auth-hint summary::-webkit-details-marker { display: none; }
.auth-hint summary:hover { color: var(--auth-lux); }
.auth-hint p {
  margin-top: var(--space-2); color: var(--text-secondary); line-height: 1.55;
}
.auth-hint code {
  display: inline-block; margin-top: 4px; padding: 2px 5px;
  background: rgba(255, 255, 255, .05); border-radius: 4px;
  font-size: 11.5px; word-break: break-all;
}

/* Faqat skrinriderga: maydon yorlig'i ko'rinmaydi, lekin AYTILADI */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 420px) {
  .auth-card { padding: var(--space-5) var(--space-4); border-radius: 20px; }
  .auth-frame { border-radius: 22px; }
  .auth-title { font-size: 26px; }
}

/* Xabar chizig'i — «note» uslubi: yumshoq fon, chegara emas */
.flash {
  background: var(--brand-subtle); border: 1px solid transparent;
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); font-size: 12.5px; line-height: 1.5;
  color: var(--text-primary);
}
.flash.critical,
.flash-error { background: var(--critical-bg); color: var(--critical); }
.flash-warning { background: var(--warning-bg); color: var(--warning); }
.flash-success { background: var(--good-bg); color: var(--good); }
.flash-info { background: var(--brand-subtle); color: var(--text-primary); }

/* ─────────── Responsiv ─────────── */

@media (max-width: 1279px) {
  .layout { grid-template-columns: var(--sidebar-collapsed) 1fr; }
  .brand-mark { justify-content: center; padding: var(--space-4) 0; }
  .nav { padding: var(--space-3) var(--space-2); }
  .nav a span.text, .brand-mark span.text, .sidebar-footer .who-name { display: none; }
  .nav a { justify-content: center; }
  .sidebar-footer { padding: var(--space-3) var(--space-2); text-align: center; }
  main { padding: var(--space-5) var(--space-4) var(--space-8); }
}

@media (max-width: 767px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; flex-direction: row; overflow-x: auto;
    border-right: none; border-top: 1px solid var(--border);
    z-index: 40;
  }
  .brand-mark, .sidebar-footer { display: none; }
  .nav { flex-direction: row; padding: var(--space-2); gap: var(--space-1); }
  .nav a { min-width: 44px; min-height: 44px; border-bottom: 3px solid transparent; }
  .nav a.on { border-bottom-color: var(--brand-solid); }
  main { padding: var(--space-4) var(--space-3) 84px; }
  .modal { max-width: none; height: 100%; max-height: 100%; border-radius: 0; }
  .modal-backdrop { padding: 0; }
  table { min-width: 0; }
}

/* Barcha bosiladigan element ≥44px (mobil) */
@media (pointer: coarse) {
  .btn, .nav a, .theme-switch button { min-height: 44px; }
}


/* ─────────── Sozlamalar qatori ─────────── */
.setting-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: var(--space-4); align-items: start;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-of-type { border-bottom: none; }
.setting-main { min-width: 0; }
.setting-main textarea {
  width: 100%; font: inherit; color: var(--text-primary);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.setting-main textarea:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.setting-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); padding-top: var(--space-5);
}
/* Har maydonning o'z «Saqlash» tugmasi — kutish belgisi yonida turadi */
.setting-actions { display: flex; align-items: center; gap: var(--space-2); }

@media (max-width: 900px) {
  .setting-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .setting-meta { flex-direction: row; flex-wrap: wrap; padding-top: 0; align-items: center; }
}

/* ─────────── «Sinash» natijasi va saqlash javobi ─────────── */
.test-result, .save-note {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2);
}
.test-result strong { display: block; font-size: 13px; }
.test-result.ok, .save-note.ok { border-color: var(--good); background: var(--good-bg); }
.test-result.bad, .save-note.bad { border-color: var(--critical); background: var(--critical-bg); }
.save-note { font-size: 13px; }

/* HTMX kutish belgisi — so'rov ketayotganda ko'rinadi */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline; }

/* ─────────── Sozlash sehrgari ─────────── */
.wizard-steps {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  font-size: 13px;
}
.wizard-steps a { color: var(--text-muted); text-decoration: none; }
/* D-4: `--text` aniqlanmagan token edi — deklaratsiya bekor bo'lib,
   tugallangan qadamlar tugallanmaganlardan FARQ QILMASDI */
.wizard-steps li.done a { color: var(--good); }
.wizard-steps li.on a { color: var(--brand); font-weight: 600; }
.wizard-steps li:not(:last-child)::after { content: "›"; margin-left: var(--space-2); color: var(--text-muted); }

/* ─────────── Kontent preview (P2-22) ─────────── */
.preview-post { display: flex; flex-direction: column; gap: var(--space-3); }
.preview-media { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.preview-tile {
  width: 96px; height: 96px; border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; color: var(--text-muted); text-align: center;
}
.preview-kind { font-weight: 600; color: var(--text-secondary); }
.preview-caption {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3);
  white-space: pre-wrap; word-break: break-word;
}
.preview-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.preview-meta div { display: flex; gap: var(--space-2); }
.preview-meta dt { font-weight: 600; }
.preview-meta dd { margin: 0; }


/* ─────────── Ikonkalar ───────────
   Inline SVG rangni `currentColor` dan oladi: tugma/badge qanday rangda
   bo'lsa, ikonka ham o'shanday. Emoji buni qila olmasdi — u OS ranglarida
   qotib qolardi va temaga moslashmasdi.
   O'lcham `width`/`height` atributlaridan keladi (shablonda beriladi). */
.icon {
  flex: none;
  vertical-align: -0.15em;
}
.badge .icon,
.btn .icon,
.nav a .icon { opacity: .92; }

/* Faqat ikonkadan iborat tugma kvadrat bo'ladi */
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

/* Bo'sh holat ikonkasi */
.empty .icon { opacity: .5; }
.ok-text { color: var(--good); }

/* ═══ To'plam almashtirgichi — SPEC v5 (Telegram Desktop uslubi) ═══ */
.ws-switcher {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.ws-switcher > summary { list-style: none; }
.ws-switcher > summary::-webkit-details-marker { display: none; }

.ws-current {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 48px;
  padding: var(--space-2);
  background: transparent; border: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer; text-align: left;
}
.ws-current:hover { background: var(--surface-2); }
.ws-current .name { flex: 1; font-size: 15px; font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-current .chev { color: var(--text-muted); transition: transform .15s; }
.ws-switcher[open] .ws-current .chev { transform: rotate(180deg); }

.ws-avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-subtle); color: var(--brand);
  font-weight: 650; font-size: 14px;
}

.ws-panel {
  position: absolute; left: var(--space-3); right: var(--space-3);
  top: calc(100% - var(--space-2));
  z-index: 60;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  max-height: 60vh; overflow-y: auto;
}

.ws-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); min-height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
}
.ws-item:hover { background: var(--surface-3); color: var(--text-primary); }
.ws-item.on { background: var(--brand-subtle); color: var(--brand); font-weight: 600; }
.ws-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item .count {
  margin-left: auto; background: var(--critical); color: var(--text-inverse);
  font-size: 11px; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
}

.ws-add-wrap { margin-top: var(--space-1); border-top: 1px solid var(--border); }
.ws-add-wrap > summary { list-style: none; }
.ws-add-wrap > summary::-webkit-details-marker { display: none; }
.ws-add {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); min-height: 44px;
  border-radius: var(--radius-md);
  color: var(--brand); font-weight: 600; cursor: pointer;
}
.ws-add:hover { background: var(--brand-subtle); }
.ws-add-form { padding: var(--space-2); }

/* Yig'ilgan yon panelda faqat avatar ko'rinadi */
@media (min-width: 768px) and (max-width: 1279px) {
  .ws-current .name, .ws-current .chev { display: none; }
  .ws-panel { left: 4px; right: auto; min-width: 240px; }
}