:root {
  --bg:           #ffffff;
  --bg-soft:      #f6f6f7;
  --bg-elev:      #ffffff;
  --line:         #e8e8ea;
  --text:         #0a0a0a;
  --text-mute:    #6e6e72;
  --text-dim:     #a8a8ad;
  --accent:       #1818FF;
  --accent-soft:  rgba(24, 24, 255, 0.06);
  --accent-deep:  #0a0acc;
  --hot:          #d92637;
  --warm:         #d88500;
  --green:        #00a058;
  --pad-side:     48px;
}
@media (max-width: 768px) {
  :root { --pad-side: 18px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  isolation: isolate;
  color: white;
  background: #0a0f0c;
}
/* ─── HERO backdrop — V2 (terraced waves) + наш signature post-grade ─── */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  /* Слои сверху вниз: vignette → royal-blue glow → photo → fallback */
  background:
    /* edge vignette — затемнение по краям, светлее по центру */
    radial-gradient(ellipse 90% 70% at center, transparent 35%, rgba(8,12,10,0.55) 90%, rgba(5,8,7,0.85) 100%),
    /* наш signature: royal-blue glow в центре hero — привязка к brand color */
    radial-gradient(circle 45vw at 50% 45%, rgba(24,24,255,0.25) 0%, rgba(24,24,255,0.08) 40%, transparent 70%),
    /* мягкий overall darken для контраста текста */
    linear-gradient(180deg, rgba(10,15,12,0.2) 0%, rgba(10,15,12,0.35) 60%, rgba(10,15,12,0.55) 100%),
    /* photographic backdrop — terraced waves */
    url('/static/hero-v2.webp') center/cover no-repeat,
    #0a0f0c;
  transform: scale(1.02);
  animation: heropan 80s ease-in-out infinite alternate;
}
@keyframes heropan {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.07) translate(-1.5%, 0.8%); }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  /* film grain + субтильные scan lines (наш cyber-tech touch) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
  opacity: 0.7; mix-blend-mode: overlay; pointer-events: none; z-index: 2;
}
/* Backdrop variants (для preview / переключения через ?bg=) */
body.hero-v1 .hero-bg {
  background:
    radial-gradient(ellipse 90% 70% at center, transparent 35%, rgba(8,12,10,0.55) 90%, rgba(5,8,7,0.85) 100%),
    radial-gradient(circle 45vw at 50% 45%, rgba(24,24,255,0.25) 0%, rgba(24,24,255,0.08) 40%, transparent 70%),
    linear-gradient(180deg, rgba(10,15,12,0.2) 0%, rgba(10,15,12,0.35) 60%, rgba(10,15,12,0.55) 100%),
    url('/static/hero-v1.webp') center/cover no-repeat,
    #0a0f0c;
}
body.hero-v3 .hero-bg {
  background:
    radial-gradient(ellipse 90% 70% at center, transparent 35%, rgba(8,12,10,0.55) 90%, rgba(5,8,7,0.85) 100%),
    radial-gradient(circle 45vw at 50% 45%, rgba(24,24,255,0.25) 0%, rgba(24,24,255,0.08) 40%, transparent 70%),
    linear-gradient(180deg, rgba(10,15,12,0.2) 0%, rgba(10,15,12,0.35) 60%, rgba(10,15,12,0.55) 100%),
    url('/static/hero-v3.webp') center/cover no-repeat,
    #0a0f0c;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px var(--pad-side); position: relative; z-index: 3;
}
.topbar-brand {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 14px; letter-spacing: 0.18em;
  font-weight: 500; opacity: 0.95;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 6px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px; font-size: 13px; color: white;
}
.user-chip-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
}
.user-chip-name { font-weight: 500; }
.user-chip-role {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5); margin-top: 1px;
}

.hero-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  z-index: 3;
}
.hero-headline {
  font-family: 'Unbounded', 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(64px, 13vw, 200px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: white;
  text-align: center;
  text-shadow: 0 8px 60px rgba(0,0,0,0.45);
}
/* Hero logo (SVG radar pulse) — заменяет SIGNAL текст в центре */
.hero-logo {
  width: clamp(180px, 22vw, 320px);
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.35)) drop-shadow(0 0 20px rgba(24,24,255,0.25));
}

.hero-toc {
  position: absolute; bottom: 32px; left: 0; right: 0;
  display: flex; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 80px); z-index: 3;
  padding: 0 var(--pad-side);
}
.toc-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.85); font-size: 12px; letter-spacing: 0.04em;
}
.toc-icon { width: 20px; height: 20px; opacity: 0.7; }
.toc-label { font-weight: 500; }
.toc-item.admin-only { display: none; }
body.is-admin .toc-item.admin-only { display: flex; }

/* ─── MAIN ─── */
.main { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad-side) 100px; }
.tabs {
  display: flex; gap: 32px; margin: 0 0 48px;
  padding-top: 40px; border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: none; padding: 16px 0;
  color: var(--text-mute); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  position: relative; transition: color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
.tab-count {
  display: inline-block; margin-left: 6px;
  font-size: 11px; color: var(--text-dim);
  font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tab.active .tab-count { color: var(--accent); }
.tab.admin-only { display: none; }
body.is-admin .tab.admin-only { display: inline-block; }

.panel { display: none; }
.panel.active { display: block; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 32px; gap: 24px; flex-wrap: wrap;
}
.section-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500; letter-spacing: -0.025em; line-height: 1;
}
.section-sub {
  font-size: 12px; color: var(--text-mute); margin-top: 8px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}

.toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.tools-left { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; min-width: 0; }
.tools-right { display: flex; gap: 8px; }
.chip {
  padding: 9px 16px; background: var(--bg-elev);
  border: 1px solid var(--line); color: var(--text);
  border-radius: 100px; font-size: 12px;
  font-family: inherit; font-weight: 500;
  cursor: pointer; transition: all .14s;
  letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap;
}
.chip:hover { border-color: var(--text); }
.chip.active { background: var(--text); color: white; border-color: var(--text); }
.chip .num {
  display: inline-block; margin-left: 5px;
  font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; text-transform: none;
}
.chip.active .num { color: rgba(255,255,255,0.6); }

input.search {
  padding: 10px 16px; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--text); font-family: inherit; font-size: 13px;
  outline: none; min-width: 220px; flex: 1; max-width: 360px;
  transition: border-color .14s;
}
input.search:focus { border-color: var(--text); }
input.search::placeholder { color: var(--text-dim); }

.btn {
  padding: 10px 18px; background: var(--bg-elev);
  border: 1px solid var(--line); color: var(--text);
  border-radius: 100px; font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .14s;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover { border-color: var(--text); }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─── Lead feed ─── */
.feed { display: flex; flex-direction: column; gap: 0; }
.lead {
  display: grid;
  grid-template-columns: 130px 1fr 220px 110px;
  gap: 28px; padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: start; cursor: pointer;
  transition: background .15s, padding .15s, margin .15s;
  text-decoration: none; color: inherit;
}
.lead:hover {
  background: var(--bg-soft);
  padding-left: 14px; padding-right: 14px;
  margin: 0 -14px; border-radius: 4px;
}
.lead-meta { display: flex; flex-direction: column; gap: 8px; }
.lead-cat-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.lead-cat-tag.photo    { color: #b81e6e; }
.lead-cat-tag.exchange { color: var(--accent); }
.lead-cat-tag.design   { color: #6b1ed4; }
.lead-cat-tag.delivery_ge_ru { color: var(--warm); }
.lead-time {
  font-size: 11px; color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}
.lead-body {
  font-size: 16px; letter-spacing: -0.014em;
  line-height: 1.45; font-weight: 400; color: var(--text);
}
.lead-chat-info { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.lead-chat-name { color: var(--accent); font-weight: 500; text-decoration: none; }
.lead-chat-author { color: var(--text-mute); }
.lead-chat-region {
  color: var(--text-dim); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.lead-mute-btn {
  background: transparent; border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font-size: 12px;
  cursor: pointer; align-self: flex-start; line-height: 1;
  color: var(--text-mute); margin-top: 4px;
}
.lead-mute-btn:hover { background: var(--line); color: #c34; border-color: #c34; }
.lead-temp { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.temp-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.temp-badge.hot  { background: rgba(217,38,55,0.08); color: var(--hot); }
.temp-badge.warm { background: rgba(216,133,0,0.08); color: var(--warm); }
.temp-badge.cool { background: rgba(0,0,0,0.04); color: var(--text-mute); }
.lead-conf-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text-dim);
}
body:not(.is-admin) .lead-conf-num { display: none; }

.empty {
  padding: 60px 0; text-align: center;
  color: var(--text-mute); font-size: 14px;
}
.empty-title {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 8px;
}

/* ─── Subscribers (FLEX чтобы последний ряд центрировался) ─── */
.subs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sub-card {
  background: var(--bg-elev);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer; transition: all .15s;
  position: relative;
  /* flex-basis с min-width даёт ровно 3 в ряду на десктопе, 2 на планшете, 1 на мобиле */
  flex: 0 1 calc(33.333% - 8px);
  min-width: 280px;
}
.sub-card:hover { border-color: var(--text); background: var(--bg-soft); }
.sub-card-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 20px;
}
.sub-card-user-name {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
}
.sub-card-user-uname {
  font-size: 11px; color: var(--text-mute);
  margin-top: 4px; letter-spacing: 0.02em;
}
.sub-status {
  padding: 4px 10px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  border-radius: 100px;
}
.sub-status.active  { background: rgba(0,160,88,0.08); color: var(--green); }
.sub-status.trial   { background: var(--accent-soft); color: var(--accent); }
.sub-status.expired { background: rgba(0,0,0,0.06); color: var(--text-mute); }
.sub-status.admin   { background: #0a0f0c; color: #fff; }
.sub-plan {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.sub-plan-meta {
  font-size: 12px; color: var(--text-mute); margin-bottom: 18px;
}
.sub-plan-meta .mono { color: var(--text); }
.sub-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sub-tag {
  font-size: 10px; padding: 4px 10px;
  background: var(--bg-soft); color: var(--text-mute);
  border-radius: 100px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sub-tag.region {
  color: var(--accent); background: var(--accent-soft);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}

/* ─── Chats ─── */
.chats-list { display: flex; flex-direction: column; }
.chat-line {
  display: grid;
  grid-template-columns: 280px 110px 100px 1fr 100px 40px 36px 36px;
  gap: 20px; padding: 20px 0;
  border-top: 1px solid var(--line); align-items: center;
  font-size: 13px;
  transition: background .15s, padding .15s, margin .15s;
}
.chat-line:hover {
  background: var(--bg-soft);
  padding-left: 14px; padding-right: 14px;
  margin: 0 -14px; border-radius: 4px;
}
.chat-uname { font-weight: 600; font-size: 14px; }
.chat-uname-link { color: var(--accent); text-decoration: none; }
.chat-uname-sub {
  color: var(--text-mute); font-size: 12px;
  font-weight: 400; margin-top: 3px;
}
.chat-type-pill {
  font-size: 9px; padding: 4px 10px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; display: inline-block;
}
.chat-type-pill.general    { background: rgba(0,0,0,0.05); color: var(--text-mute); }
.chat-type-pill.barahooka  { background: rgba(216,133,0,0.08); color: var(--warm); }
.chat-type-pill.broadcast_channel,
.chat-type-pill.broadcast  { background: rgba(217,38,55,0.08); color: var(--hot); }
.chat-type-pill.discussion { background: var(--accent-soft); color: var(--accent); }
.chat-members { color: var(--text-mute); }
.chat-info { color: var(--text-mute); font-size: 12px; letter-spacing: 0.02em; }
.chat-leads {
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.chat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); justify-self: end;
}
.chat-dot.off { background: var(--text-dim); }

/* Per-chat mute toggle — кнопка 🔔/🔕 в правом краю каждого чата.
   Юзер 2026-06-01: «возможность от какого-то чата выключить или включить
   обратно уведомление». Состояние muted приходит из GET /api/chats как
   поле `muted: bool` для current user. */
.chat-mute-btn {
  background: transparent; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; font-size: 14px;
  cursor: pointer; transition: background .15s, border-color .15s;
  justify-self: end; line-height: 1;
}
.chat-mute-btn:hover { background: var(--line); border-color: var(--text-mute); }
.chat-invite-btn {
  background: transparent; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 6px; font-size: 12px;
  cursor: pointer; justify-self: end; line-height: 1;
}
.chat-invite-btn:hover { background: var(--line); border-color: #1818FF; }
.chat-muted { opacity: 0.55; }
.chat-muted .chat-mute-btn { border-color: #c34; opacity: 1; }

/* ─── Per-category mute UI в дереве категорий ─── */
/* Оплаченная категория: чекбокс заблокирован (cursor not-allowed), фон бледнее */
.tree-cb.locked-paid {
  cursor: not-allowed; opacity: 0.6;
  border-style: dashed !important;
}
.row-paid {
  background: rgba(255, 215, 0, 0.04);  /* мягкий жёлтый фон = «оплачено» */
}
.row-muted .tree-name {
  opacity: 0.55; text-decoration: line-through;
}
.cat-mute-inline {
  margin-left: auto; padding: 4px 10px; font-size: 12px;
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; line-height: 1.2; transition: background .15s, border-color .15s;
  white-space: nowrap; font-weight: 500;
}
.cat-mute-inline:hover { background: var(--line); }
/* Замьюченная категория — кнопка ярче, чтобы юзер сразу видел state.
   Эмодзи 🔕/🔔 на Android оба рендерятся как 🚫, поэтому ориентируемся
   на цвет фона + текст («Заглушить» / «Включить»). */
.cat-mute-inline.is-muted {
  background: rgba(220, 80, 40, 0.12);
  border-color: #c34;
  color: #c34;
}
.cat-mute-inline.is-muted:hover { background: rgba(220, 80, 40, 0.22); }
.row-muted .cat-mute-inline { /* legacy compat */ }

.muted-section-title {
  font-weight: 600; font-size: 13px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* ─── Muted sources tab ─── */
.muted-line {
  display: flex; gap: 16px; padding: 14px 0;
  border-top: 1px solid var(--line); align-items: center;
}
.muted-info { flex: 1; }
.muted-uname a { color: var(--accent); font-weight: 500; text-decoration: none; }
.muted-title { font-size: 13px; color: var(--text); margin-top: 2px; }
.muted-meta { font-size: 11px; color: var(--text-mute); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── Admin pricing tab ─── */
.pricing-config-grid { display: flex; flex-direction: column; gap: 12px; }
.pricing-row {
  display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.pricing-input-wrap { display: flex; gap: 8px; align-items: center; }
.pricing-input {
  width: 100px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; font-family: var(--mono); text-align: right;
}
.pricing-default { font-size: 11px; color: var(--text-mute); }
.pricing-override-row {
  display: grid; grid-template-columns: 1fr auto 110px auto; gap: 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.ov-slug { font-size: 13px; }
.ov-slug code { font-size: 11px; color: var(--text-mute); margin-left: 6px; }
.ov-price-input {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--mono); text-align: right;
}
.btn-danger { background: rgba(220,80,40,0.12); color: #c34; }
.btn-danger:hover { background: rgba(220,80,40,0.22); }

@media (max-width: 760px) {
  .pricing-row { grid-template-columns: 1fr; gap: 6px; }
  .pricing-override-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ─── Settings cards (4-up grid, symmetric centered on overflow) ─── */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.info-card {
  background: var(--bg-elev);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  flex: 0 1 calc(50% - 6px);
  min-width: 280px;
}
.info-card h3 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 14px; color: var(--text-mute);
}
.info-card .h-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.info-card p {
  font-size: 13px; color: var(--text-mute);
  margin-bottom: 20px; line-height: 1.55;
}
.slider-wrap { display: flex; flex-direction: column; gap: 10px; }
.slider-wrap input[type=range] {
  width: 100%;
  accent-color: var(--accent);
}
.slider-val { font-size: 12px; color: var(--text-mute); }

/* ─── My subscription (user view) ─── */
.my-sub {
  background: var(--bg-elev); padding: 40px;
  border: 1px solid var(--line); border-radius: 12px;
}
.my-sub-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 32px;
  gap: 16px; flex-wrap: wrap;
}
.my-sub-plan {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1;
}
.my-sub-meta {
  font-size: 13px; color: var(--text-mute); margin-top: 10px;
}
.my-sub-section {
  margin-top: 28px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.my-sub-section h4 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 14px;
}
.toggle-row { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle-chip {
  padding: 9px 18px; background: var(--bg);
  border: 1px solid var(--line); color: var(--text-mute);
  border-radius: 100px; font-size: 13px;
  cursor: pointer; transition: all .14s; user-select: none;
  font-family: inherit;
}
.toggle-chip:hover { border-color: var(--text); }
.toggle-chip.on {
  background: var(--accent); color: white;
  border-color: var(--accent); font-weight: 600;
}

/* ─── Admin-only footer ─── */
.admin-footer-wrap { position: relative; margin-top: 80px; display: none; }
body.is-admin .admin-footer-wrap { display: block; }
.admin-footer {
  padding: 28px 0 0; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
  flex-wrap: wrap; gap: 12px;
}
.admin-footer-tag {
  position: absolute; top: -7px; left: 0;
  background: var(--bg); padding: 0 14px 0 0;
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  font-family: 'Inter', sans-serif; font-weight: 700;
}
.foot-status-line { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); display: inline-block;
  margin-right: 6px; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.loading {
  padding: 80px 0; text-align: center;
  color: var(--text-dim); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ─── Modal ─── */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10, 15, 12, 0.6);
  backdrop-filter: blur(8px);
  z-index: 100;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.show { display: flex; animation: fadein .2s; }
.modal {
  background: var(--bg-elev);
  border-radius: 16px;
  width: 100%; max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.modal-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px; font-weight: 500; letter-spacing: -0.02em;
}
.modal-close {
  background: none; border: none; font-size: 18px;
  color: var(--text-mute); cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  transition: background .12s;
}
.modal-close:hover { background: var(--bg-soft); color: var(--text); }
.modal-body { padding: 28px; }
.modal-body .form-row { margin-bottom: 18px; }
.modal-body label {
  display: block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-mute); margin-bottom: 8px;
}
.modal-body input[type=text],
.modal-body input[type=number],
.modal-body select {
  width: 100%; padding: 12px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 14px;
  outline: none;
}
.modal-body input:focus, .modal-body select:focus { border-color: var(--accent); }
.modal-footer {
  display: flex; gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.modal-footer .btn { flex: 1; padding: 12px 18px; }

/* ─── MOBILE responsive ─── */
@media (max-width: 768px) {
  .hero { min-height: 460px; }
  .topbar { padding: 16px var(--pad-side); }
  .user-chip-name { display: none; }   /* avatar + role-tag только */
  .user-chip-role { font-size: 8px; }
  .topbar-brand { font-size: 12px; }
  .hero-headline { font-size: 80px; letter-spacing: -0.025em; }
  .hero-toc { gap: 20px 28px; bottom: 24px; }
  .toc-item { font-size: 11px; }
  .toc-icon { width: 16px; height: 16px; }

  .main { padding: 0 var(--pad-side) 60px; }
  .tabs { gap: 22px; padding-top: 28px; margin-bottom: 32px; }
  .section-h { flex-direction: column; gap: 4px; align-items: flex-start; }
  .section-title { font-size: 26px; }
  .toolbar { gap: 8px; }
  .chip { padding: 7px 13px; font-size: 11px; }
  input.search { min-width: 100%; max-width: 100%; }

  .lead {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 0;
  }
  .lead-meta { flex-direction: row; align-items: center; gap: 12px; }
  .lead-temp { flex-direction: row; align-items: center; }
  .lead-chat-info { flex-direction: row; gap: 10px; flex-wrap: wrap; }
  .lead-body { font-size: 15px; }
  .lead:hover { padding-left: 0; padding-right: 0; margin: 0; }

  .sub-card { flex: 1 1 100%; }

  .chat-line {
    grid-template-columns: 1fr 1fr auto;  /* +mute-btn column */
    gap: 10px 16px;
  }
  .chat-line > *:nth-child(1) { grid-column: 1 / 3; }  /* uname занимает 2 первых, mute справа */
  .chat-line > *:nth-child(4) { display: none; }  /* info скрываем — есть subtitle */
  .chat-line:hover { padding-left: 0; padding-right: 0; margin: 0; }

  .info-card { flex: 1 1 100%; padding: 24px; }
  .my-sub { padding: 24px; }
}

/* ─── Tree picker (LEADDER-style) ─── */
.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-bar h4 { margin: 0; }
.tree-search {
  flex: 1;
  max-width: 280px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.tree-search:focus { border-color: var(--text); }

.tree-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 0;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-card, #fff);
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 14px;
  cursor: default;
  user-select: none;
  transition: background-color 0.12s;
}
.tree-row:hover { background-color: rgba(0,0,0,0.03); }

.tree-cb {
  width: 18px; height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  background: #fff;
  transition: all 0.12s;
}
.tree-cb:hover { border-color: var(--text); }
.tree-cb.all {
  background: var(--text);
  border-color: var(--text);
}
.tree-cb.all::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tree-cb.some {
  background: var(--text);
  border-color: var(--text);
}
.tree-cb.some::after {
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 10px; height: 2px;
  background: #fff;
}
.tree-arrow {
  width: 12px;
  font-size: 16px;
  color: var(--text-dim);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s;
  cursor: pointer;
  flex-shrink: 0;
}
.tree-arrow.open { transform: rotate(90deg); }
.tree-arrow.empty { visibility: hidden; }
.tree-emoji { font-size: 14px; }
.tree-name {
  flex: 1;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 0;
}
.side-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.side-tag.demand { background: rgba(24,24,255,0.08); color: #1818FF; }
.side-tag.supply { background: rgba(0,128,40,0.08); color: #006830; }

/* Floating mini-CTA — прибит к верху viewport (НЕ sticky, т.к. TG MiniApp
   ломает sticky из-за overflow-родителей). Всегда виден при скролле,
   при клике плавно прокручивает к настоящему footer'у с оплатой.
   Виден на всех вкладках "Моя подписка" — рендерится только при tab='my-sub'. */
.sub-mini-cta {
  position: fixed;
  top: 8px;
  left: 12px;
  right: 12px;
  width: auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 12px 18px;
  background: var(--text, #0a0f0c);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: opacity 0.15s, transform 0.15s;
}
/* Когда mini-CTA активен — даём верхний padding контенту, чтобы первый блок
   («Недвижимость» / «Мексика» в дереве регионов) не лип под кнопку.
   Используем явный padding на panel#my-sub а не :has() — лучшая совместимость
   с TG WebView (на старых Android :has() может не работать). */
#my-sub { padding-top: 56px; }
#my-sub.panel.active { padding-top: 56px; }
.sub-mini-cta:hover { opacity: 0.9; }
.sub-mini-cta:active { transform: scale(0.98); }
.sub-mini-cta-arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  font-size: 14px;
  font-weight: 700;
  animation: mini-cta-bounce 1.6s infinite;
}
@keyframes mini-cta-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* sticky-footer для "Моя подписка" */
.sub-sticky-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg, #fff);
  border-top: 1px solid var(--line);
  padding: 14px var(--pad-side) 18px;
  margin: 24px calc(var(--pad-side) * -1) 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.04);
}
.sub-status-line {
  font-size: 13px;
  color: var(--text-mute);
}
.sub-live-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.sub-live-line .live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: pulse-dot 1.8s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.btn-cta {
  background: var(--text);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.btn-cta:hover { opacity: 0.85; }

/* «Нет моей ниши» — белая кнопка ПОД sticky-footer */
.niche-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-mute);
  cursor: pointer;
  transition: all 0.15s;
}
.niche-btn:hover {
  background: rgba(0,0,0,0.03);
  color: var(--text);
}

textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  outline: none;
}
textarea:focus { border-color: var(--text); }

@media (max-width: 768px) {
  .section-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .tree-search { max-width: 100%; }
  .tree-wrap { max-height: none; }
}

/* ─── Trial banner ─── */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 var(--pad-side);
  padding: 14px 18px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
  border-radius: 14px;
  border: 1px solid #FFD54F;
  color: #5D4037;
  position: relative;
  z-index: 10;
  margin-top: -16px;
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.18);
}
.trial-banner-emoji { font-size: 24px; flex-shrink: 0; }
.trial-banner-text { flex: 1; font-size: 13px; line-height: 1.45; }
.trial-banner-text strong { display: block; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.trial-banner-cta {
  padding: 8px 16px;
  background: #5D4037;
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.trial-banner-cta:hover { opacity: 0.85; }

/* Date-range фильтр для ленты ЛИДЫ */
.date-range {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 14px;
  font-size: 12px;
  color: var(--text-mute, #777);
  flex-wrap: wrap;
}
.date-range label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.date-range input[type="date"] {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  font-family: inherit;
}
.btn-link {
  background: none;
  border: none;
  color: var(--accent, #1818FF);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
}
.btn-link:hover { opacity: 0.75; }

/* Expired-баннер на «Моя подписка» — мягкая деактивация после окончания trial */
.expired-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 18px;
  background: rgba(220, 80, 40, 0.08);
  border: 1px solid rgba(220, 80, 40, 0.22);
  border-radius: 12px;
  color: #b3361f;
}
.expired-banner-icon {
  font-size: 24px;
  line-height: 1;
}
.expired-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.4;
}
.expired-banner-text strong { font-size: 14px; }
.expired-banner-text span { color: rgba(179, 54, 31, 0.78); }

/* Hero region pill — кликабельный, двухстрочный когда регион выбран */
#hero-region-pill {
  transition: opacity 0.15s;
}
#hero-region-pill:hover { opacity: 0.75; }
/* Pill ОДНОСТРОЧНЫЙ — без специальных стилей, обычный .toc-label.
   Раньше был двухстрочный (action+current), что ломало baseline всех stat'ов. */

/* CTA-кнопка в режиме «сохранено» — зелёная. После клика на чекбокс возвращается
   в обычную чёрную (через markCtaDirty). Юзер 30.05: «надо чтобы кнопка изменялась
   на зелёную после save, а потом обратно чёрной при изменении». */
.btn-cta.is-saved,
#renew-btn.is-saved {
  background: #00a058 !important;
  color: #fff !important;
}
.sub-mini-cta.is-saved {
  background: #00a058 !important;
  color: #fff !important;
}

/* tri-state SOME — теперь визуально отличается от ALL (полупрозрачный) */
.tree-cb.some {
  background: rgba(0,0,0,0.18) !important;
  border-color: var(--text);
}
.tree-cb.some::after {
  background: var(--text);
}

@media (max-width: 768px) {
  .trial-banner { flex-wrap: wrap; }
  .trial-banner-text { width: 100%; order: 2; }
  .trial-banner-cta { order: 3; margin-left: auto; }
}

/* ─── Tier selector (3 карточки тарифов) ─── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.tier-card {
  padding: 18px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--bg, #fff);
}
.tier-card:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}
.tier-card.active {
  border-color: var(--text);
  background: var(--text);
  color: white;
}
.tier-card.active .tier-sub,
.tier-card.active .tier-desc {
  color: rgba(255,255,255,0.75);
}
.tier-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.tier-price {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: var(--font-display, "JetBrains Mono", monospace);
}
.tier-price span {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
}
.tier-desc {
  font-size: 11px;
  margin-top: 6px;
  color: var(--text-mute);
}
.tier-sub {
  font-size: 10px;
  margin-top: 8px;
  color: var(--text-dim);
  line-height: 1.4;
}

.sub-price-line {
  font-size: 13px;
  color: var(--text);
  margin: 6px 0 2px;
}
.sub-price-line strong { font-weight: 700; }
.sub-price-line .muted { color: var(--text-mute); font-size: 11px; }

.btn-danger {
  background: transparent;
  color: #d33;
  border: 1px solid #d33;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover {
  background: #d33;
  color: white;
}

@media (max-width: 768px) {
  .tier-grid { grid-template-columns: 1fr; gap: 10px; }
  .tier-card { padding: 14px 14px; }
  .tier-price { font-size: 22px; }
}

/* Lead multi-tags — несколько категорий рядом */
.lead-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lead-cat-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(24,24,255,0.08);
  color: #1818FF;
}

/* Подсветка таба «Моя подписка» — самый важный для юзера */
/* «Моя подписка» — pill-кнопка, НЕ обычный таб. Не active: белая с чёрным
   текстом, active: чёрная с белым. Синее подчёркивание снизу (общее правило
   .tab.active::after) подавлено — оно неуместно на pill-shape (юзер 31.05). */
.tab.tab-highlight {
  background: white;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-weight: 600;
  transition: background .14s, color .14s, border-color .14s;
}
.tab.tab-highlight:hover { background: var(--bg-soft); }
.tab.tab-highlight.active {
  background: var(--text);
  color: white;
  border-color: var(--text);
}
.tab.tab-highlight.active::after { display: none !important; }

/* Admin banner в «Моя подписка» */
.admin-sub-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #F0F0FA, #E8E8F8);
  border: 1px solid #D8D8E8;
  border-radius: 14px;
  margin-bottom: 24px;
}
.admin-sub-icon { font-size: 22px; }
.admin-sub-banner strong { font-size: 14px; display: block; }
.admin-sub-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }

/* Bundle suggestion hint */
.bundle-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border: 1px solid #FFB74D;
  border-radius: 12px;
  margin-bottom: 24px;
  animation: slide-in 0.3s ease-out;
}
@keyframes slide-in {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.bundle-hint-emoji { font-size: 22px; flex-shrink: 0; }
.bundle-hint-text { flex: 1; font-size: 12px; line-height: 1.4; }
.bundle-hint-text strong { display: block; font-weight: 600; font-size: 13px; }
.bundle-hint-text #bundle-hint-sub { color: var(--text-mute); }
.bundle-hint-cta {
  padding: 7px 14px;
  background: #5D4037;
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.bundle-hint-cta:hover { opacity: 0.85; }

@media (max-width: 768px) {
  .admin-sub-banner { padding: 12px 14px; }
  .bundle-hint { flex-wrap: wrap; }
  .bundle-hint-text { width: 100%; order: 2; }
  .bundle-hint-cta { order: 3; margin-left: auto; }
}

/* Autopay toggle в footer */
.autopay-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 6px;
  cursor: pointer;
  flex-wrap: wrap;
}
.autopay-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--text);
  cursor: pointer;
}
.autopay-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.autopay-sub {
  flex-basis: 100%;
  margin-left: 26px;
  font-size: 11px;
  color: var(--text-mute);
}

/* ─── Add-account wizard (multi-select checkboxes) ─── */
.aa-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.aa-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.aa-check:hover { background: var(--bg-soft); }
.aa-check input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.aa-mute { color: var(--text-mute); font-weight: 400; }
.aa-desc { font-size: 11px; color: var(--text-dim); }
.aa-err {
  background: rgba(217,38,55,0.08);
  color: var(--hot);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 12px 0 0;
}

/* ─── Chats: двухуровневая группировка country → audience ─── */
.chats-country-group {
  margin-top: 24px;
}
.chats-country-group:first-child { margin-top: 0; }
.chats-country-head {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.chats-country-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.chats-aud-group {
  margin-top: 16px;
}
.chats-aud-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.chats-aud-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Toolbar c двумя chip-рядами (страны + типы) ─── */
/* Страны получают flex-basis:100% и ложатся отдельной строкой над
   .tools-left + .search. Базовый .toolbar уже flex-wrap → перенос «бесплатный». */
.chip-row-country {
  flex-basis: 100%;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip-row-country .chip {
  font-size: 11px;       /* чуть мельче чем основные chip'ы — это «доп-фильтр» */
  padding: 7px 13px;
  letter-spacing: 0.02em;
}

/* ─── Управление аккаунтами (модалка списка) ─── */
.acc-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.acc-btn-row .btn { flex: 1 1 auto; }

.acc-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--bg-soft);
}
.acc-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 8px;
}
.acc-row-head .chat-dot { margin: 0; }
.acc-phone { font-weight: 600; }
.acc-uname { color: var(--text-mute); }
.acc-row-meta {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
}
.acc-meta-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  margin-right: 4px;
}
.acc-aud-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.acc-aud-pill.admin-only {
  background: rgba(217,38,55,0.08);
  color: var(--hot);
}
.acc-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 11px;
}
.acc-delete {
  color: var(--hot);
  border-color: rgba(217,38,55,0.3);
}
.acc-delete:hover {
  background: rgba(217,38,55,0.08);
}

/* ─── Side-presets и group-label'ы внутри tree (Спрос/Предложение/Всё) ─── */
.side-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-right: 12px;
}
.side-preset {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: all .15s;
  white-space: nowrap;
}
.side-preset:hover {
  background: var(--bg-elev);
  border-color: var(--text-dim);
}
.side-preset.active.demand {
  background: rgba(0,160,88,0.1);
  color: var(--green);
  border-color: rgba(0,160,88,0.35);
  font-weight: 600;
}
.side-preset.active.supply {
  background: rgba(216,133,0,0.1);
  color: var(--warm);
  border-color: rgba(216,133,0,0.35);
  font-weight: 600;
}
.side-preset.active.all {
  background: var(--text);
  color: white;
  border-color: var(--text);
  font-weight: 600;
}

.side-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 4px;
  color: var(--text-dim);
}
.side-group-label.demand { color: var(--green); }
.side-group-label.supply { color: var(--warm); }

/* ─── Manage categories modal ─── */
.cat-mgr-list { max-height: 60vh; overflow-y: auto; padding-right: 6px; }
.cat-mgr-group { margin-bottom: 18px; }
.cat-mgr-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  font-size: 14px;
}
.cat-mgr-emoji { font-size: 16px; }
.cat-mgr-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.cat-mgr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.cat-mgr-row:hover { background: var(--bg-soft); }
.cat-mgr-row input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.cat-mgr-name { flex: 1; font-size: 13px; }
.cat-mgr-hashtag {
  font-size: 10px;
  color: var(--text-dim);
}
.cat-mgr-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 10px;
}