/**
 * © 2026 Oleksandr ViTS / Devils. All rights reserved.
 * Proprietary and confidential.
 * Unauthorized copying, modification, distribution or use of this software,
 * via any medium, is strictly prohibited without the express written permission
 * of the author.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Dark-Ops / Trading-Desk
   Single source of truth: all values via CSS custom properties.
   Не используй hex напрямую вне этого блока.
═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --bg-0: #0B0F14;    /* самый тёмный — body */
  --bg-1: #0F1620;    /* основной фон страниц */
  --bg-2: #141C27;    /* поверхности / карточки */
  --bg-3: #1A2432;    /* hover / active поверхности */
  --bg-4: #1F2C3E;    /* input bg / nested */

  /* ── Borders ── */
  --bd-1: #243244;    /* тонкие разделители */
  --bd-2: #2D3E55;    /* акцентный бордер / таблица */
  --bd-3: rgba(255,255,255,.06); /* ultra-subtle */

  /* ── Text ── */
  --tx-1: #E6EDF3;    /* основной */
  --tx-2: #A8B3C2;    /* вторичный */
  --tx-3: #728096;    /* muted */
  --tx-inv: #0B0F14;  /* на акценте */

  /* ── Accent Purple (new) ── */
  --ac-purple: #a78bfa;
  --ac-purple-dim: rgba(167,139,250,.12);

  /* ── Accent Primary — Blue ── */
  --ac-1:   #4d94ff;
  --ac-2:   #2B8AE8;  /* hover — на 15% темнее */
  --ac-dim: rgba(77,148,255,.10);
  --ac-glow:0 0 0 1px rgba(77,148,255,.30), 0 0 20px rgba(77,148,255,.10);

  /* ── Accent Secondary — Amber ── */
  --ac-s:     #F59E0B;
  --ac-s-2:   #D97706;
  --ac-s-dim: rgba(245,158,11,.12);
  --ac-s-glow:0 0 0 1px rgba(245,158,11,.30), 0 0 16px rgba(245,158,11,.12);

  /* ── Status (приглушённые) ── */
  --st-good: #38D996;
  --st-warn: #F59E0B;
  --st-bad:  #EB5757;
  --st-info: #4DA3FF;

  --st-good-bg: rgba(56,217,150,.11);
  --st-warn-bg: rgba(245,158,11,.11);
  --st-bad-bg:  rgba(235,87,87,.11);
  --st-info-bg: rgba(77,163,255,.11);

  --st-good-bd: rgba(56,217,150,.32);
  --st-warn-bd: rgba(245,158,11,.32);
  --st-bad-bd:  rgba(235,87,87,.32);
  --st-info-bd: rgba(77,163,255,.32);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Spacing (8px grid) ── */
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  20px;
  --sp-xl:  24px;

  /* ── Radii ── */
  --r-card:  12px;
  --r-btn:   10px;
  --r-input: 8px;
  --r-badge: 6px;
  --r-xs:    4px;

  /* ── Shadows ── */
  --shadow:     0 8px 28px rgba(0,0,0,.45);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.30);
  --shadow-card:0 1px 4px rgba(0,0,0,.32), 0 4px 18px rgba(0,0,0,.28), 0 0 0 1px rgba(77,148,255,.04);

  /* ── Layout ── */
  --sidebar-w: 380px;
  --header-h:  52px;

  /* Legacy aliases — не удаляем, используются инлайн */
  --bg:          var(--bg-0);
  --bg2:         var(--bg-2);
  --bg3:         var(--bg-3);
  --bg4:         var(--bg-4);
  --border:      var(--bd-1);
  --text:        var(--tx-2);
  --text-muted:  var(--tx-3);
  --text-bright: var(--tx-1);
  --accent:      var(--ac-1);
  --accent-dim:  var(--ac-dim);
  --green:       var(--st-good);
  --green-dim:   #1a5c40;
  --green-glow:  rgba(56,217,150,.2);
  --red:         var(--st-bad);
  --orange:      var(--st-warn);
  --radius:      var(--r-card);
  --radius-sm:   var(--r-input);

  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--tx-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ac-1); text-decoration: none; }
small { font-size: 11px; }
hr.divider { border: none; border-top: 1px solid var(--bd-1); margin: 16px 0; }

/* Mono numbers utility */
.mono { font-family: var(--font-mono); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(45,62,85,.6); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(77,148,255,.4); }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — Fixed top bar
═══════════════════════════════════════════════════════════════════════════ */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(15,22,32,.96);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--bd-1);
  display: flex; align-items: center;
  padding: 0 var(--sp-lg); gap: var(--sp-sm);
  box-shadow: 0 1px 0 rgba(77,148,255,.12), 0 2px 12px rgba(0,0,0,.25);
}

.header-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--ac-s) 0%, #fbbf24 60%, var(--ac-s) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap; text-transform: uppercase;
}
.header-logo .logo-icon {
  font-size: 20px; line-height: 1;
  -webkit-text-fill-color: var(--ac-s);
  text-shadow: 0 0 16px rgba(245,158,11,.70), 0 0 32px rgba(245,158,11,.30);
}
.header-logo .logo-sub {
  -webkit-text-fill-color: rgba(245,158,11,.60);
  font-weight: 500;
  letter-spacing: .08em;
}

.header-meta {
  flex: 1; padding-left: var(--sp-xs);
  display: flex; align-items: center;
}
.status-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; position: relative; }

.st-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-family: var(--font-mono); font-weight: 500;
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--bd-1);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.st-pill.st-ok {
  border-color: rgba(63,185,80,.4);
  background:   rgba(63,185,80,.08);
  color: #3fb950;
}
.st-pill.st-ok::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #3fb950; margin-right: 4px;
  animation: st-pulse 2.5s ease infinite;
}
.st-pill.st-warn {
  border-color: rgba(245,158,11,.4);
  background:   rgba(245,158,11,.07);
  color: var(--ac-s);
}
.st-pill.st-off  { color: var(--tx-3); opacity: .5; }
.st-pill.st-muted{ color: var(--tx-3); }

/* Watches dropdown */
.watches-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 4px;
  min-width: 220px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.watches-dropdown.hidden { display: none; }
.watches-dd-item {
  background: none;
  border: none;
  color: var(--tx-1);
  font-size: 13px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.watches-dd-item:hover { background: var(--bg-3); }
@keyframes st-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

.header-actions { display: flex; gap: var(--sp-xs); }

/* Status dot in header */
.status-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}
.status-dot.good { background: var(--st-good); box-shadow: 0 0 5px var(--st-good); animation: pulse-good 2.5s ease infinite; }
.status-dot.warn { background: var(--st-warn); }
.status-dot.bad  { background: var(--st-bad); }
@keyframes pulse-good {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════════════════ */
.layout {
  display: flex;
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-1);
  border-right: 1px solid var(--bd-1);
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-sm) var(--sp-xs);
  overflow-y: auto;
  height: calc(100vh - var(--header-h));
  position: sticky; top: var(--header-h);
}

.sidebar-section {
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  padding: var(--sp-xs) var(--sp-sm);
  transition: border-color .18s;
}
.sidebar-section:hover { border-color: var(--bd-2); }

.sidebar-section-header {
  font-size: 10px; font-weight: 700;
  color: var(--ac-1);
  text-transform: uppercase; letter-spacing: .9px;
  margin-bottom: var(--sp-xs);
  display: flex; align-items: center; justify-content: space-between;
}

/* ─── Campaign search ─── */
.campaign-search-wrap { position: relative; margin-bottom: 6px; }
.campaign-search-input {
  width: 100%; box-sizing: border-box;
  padding: 6px 28px 6px 9px;
  background: var(--bg-4);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-input);
  color: var(--tx-1); font-size: 12px; outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-sans);
}
.campaign-search-input:focus {
  border-color: var(--ac-1);
  box-shadow: var(--ac-glow);
}
.campaign-search-input::placeholder { color: var(--tx-3); }

.campaign-search-clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--tx-3); font-size: 11px; padding: 2px 4px;
  border-radius: var(--r-xs); line-height: 1; display: none;
  transition: color .12s;
}
.campaign-search-clear:hover { color: var(--tx-1); }
.campaign-search-clear.visible { display: block; }

.camp-count-badge { font-size: 10px; color: var(--tx-3); font-weight: 400; margin-left: 4px; }

.campaign-list {
  max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.campaign-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: var(--r-badge);
  cursor: pointer; user-select: none;
  transition: background .12s;
}
.campaign-item:hover { background: var(--bg-3); }
.campaign-item.inactive { opacity: .48; }
.camp-check { cursor: pointer; accent-color: var(--ac-1); flex-shrink: 0; }
.camp-name {
  font-size: 12px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; color: var(--tx-2);
}
.camp-state-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-active { background: var(--st-good); box-shadow: 0 0 4px rgba(56,217,150,.4); }
.dot-paused { background: var(--tx-3); }

/* ─── History list ─── */
.history-list {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.history-item {
  padding: 5px 7px; border-radius: var(--r-badge);
  cursor: pointer; transition: background .12s;
  display: flex; flex-direction: column; gap: 1px;
}
.history-item:hover { background: var(--bg-3); }
.history-date  { font-size: 11px; color: var(--tx-3); font-family: var(--font-mono); }
.history-range { font-size: 12px; color: var(--tx-2); }

/* ─── Action log ─── */
.action-log {
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.log-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 6px; border-radius: var(--r-badge);
  border-left: 2px solid transparent;
  transition: background .12s;
}
.log-item:hover { background: var(--bg-3); }
.log-item.log-analysis  { border-left-color: var(--st-info); }
.log-item.log-apply     { border-left-color: var(--st-good); }
.log-item.log-error     { border-left-color: var(--st-bad); }
.log-icon { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.log-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.log-title {
  font-size: 11px; font-weight: 600; color: var(--tx-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log-sub  { font-size: 10px; color: var(--tx-3); font-family: var(--font-mono); }
.log-time { font-size: 10px; color: var(--tx-3); opacity: .65; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--bd-2);
  background: var(--bg-3);
  color: var(--tx-2); font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .08s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-4); border-color: var(--ac-1); color: var(--tx-1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--bg-3); border-color: var(--bd-2); color: var(--tx-2); }

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, var(--ac-1) 0%, #3b82f6 100%);
  border-color: var(--ac-1);
  color: var(--tx-inv); font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 14px rgba(77,148,255,.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--ac-2) 0%, #2563eb 100%);
  border-color: var(--ac-2);
  color: var(--tx-inv); box-shadow: 0 4px 20px rgba(77,148,255,.38);
}
.btn-primary:active { box-shadow: none; }
.btn-full { width: 100%; height: 40px; font-size: 14px; border-radius: var(--r-card); }

/* Apply-all button — жовтий акцент */
.btn-apply-all {
  background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.4);
  color: #eab308; font-weight: 700; margin-top: 6px;
  transition: background .15s, box-shadow .15s;
}
.btn-apply-all:hover:not(:disabled) {
  background: rgba(234,179,8,.25); box-shadow: 0 2px 12px rgba(234,179,8,.2);
  color: #eab308;
}
.btn-apply-all:disabled { opacity: .5; cursor: not-allowed; }

/* Ghost */
.btn-ghost { background: transparent; border-color: transparent; height: 32px; }
.btn-ghost:hover { background: var(--bg-3); border-color: var(--bd-1); color: var(--tx-1); }
.btn-ghost.active { background: var(--bg-3); border-color: var(--ac-1); color: var(--ac-1); }

.btn-icon { height: 32px; width: 32px; padding: 0; border-radius: var(--r-input); }
.btn-xs   { height: 26px; padding: 0 9px; font-size: 11px; border-radius: var(--r-badge); }
.btn-group { display: flex; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FIELDS / INPUTS
═══════════════════════════════════════════════════════════════════════════ */
.field-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--tx-3); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .5px;
}
.field-input {
  width: 100%; padding: 8px 10px;
  border-radius: var(--r-input); border: 1px solid var(--bd-1);
  background: var(--bg-4); color: var(--tx-1);
  font-size: 13px; font-family: var(--font-sans); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus {
  border-color: var(--ac-1);
  box-shadow: var(--ac-glow);
}
.field-input::placeholder { color: var(--tx-3); }
.field-hint { font-size: 11px; color: var(--tx-3); margin-top: 4px; line-height: 1.5; }
.checkbox-label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--tx-2); }
.checkbox-label input { accent-color: var(--ac-1); }
.input-with-btn { display: flex; gap: 4px; }
.input-with-btn .field-input { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BADGE — единый компонент
═══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-badge);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-good { background: var(--st-good-bg); color: var(--st-good); border-color: var(--st-good-bd); }
.badge-warn { background: var(--st-warn-bg); color: var(--st-warn); border-color: var(--st-warn-bd); }
.badge-bad  { background: var(--st-bad-bg);  color: var(--st-bad);  border-color: var(--st-bad-bd); }
.badge-info { background: var(--st-info-bg); color: var(--st-info); border-color: var(--st-info-bd); }
.badge-muted { background: rgba(114,128,150,.1); color: var(--tx-3); border-color: var(--bd-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════════════════ */
.main-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
.main-inner {
  flex: 1; overflow-y: auto;
  padding: 0 var(--sp-lg) var(--sp-xl);
  min-width: 0;
}

/* ─── Status bar ─── */
.status-bar {
  padding: 10px var(--sp-md); border-radius: var(--r-card);
  margin-bottom: var(--sp-sm); font-size: 13px;
  background: var(--bg-2); border: 1px solid var(--bd-1);
  color: var(--tx-2); font-family: var(--font-mono);
}
.status-bar.err {
  border-color: var(--st-bad-bd);
  background: var(--st-bad-bg); color: var(--st-bad);
}
.hidden { display: none !important; }

/* ─── Empty state ─── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-sm); padding: 80px var(--sp-lg); color: var(--tx-3);
}
.empty-icon {
  font-size: 48px; line-height: 1;
  filter: drop-shadow(0 0 18px rgba(77,163,255,.18));
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
.empty-title { font-size: 17px; font-weight: 800; color: var(--tx-1); }
.empty-sub   { font-size: 13px; color: var(--tx-3); text-align: center; max-width: 320px; line-height: 1.6; }

/* ─── Skeleton loading ─── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-badge);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SUMMARY BAR — KPI row
═══════════════════════════════════════════════════════════════════════════ */
.summary-bar {
  display: flex; gap: var(--sp-xs); flex-wrap: wrap;
  padding: var(--sp-sm) var(--sp-lg);
  background: linear-gradient(180deg, rgba(15,22,32,.92) 0%, rgba(11,15,20,.85) 100%);
  border-bottom: 1px solid var(--bd-1);
  flex-shrink: 0; z-index: 10;
  backdrop-filter: blur(12px);
}
.summary-card {
  flex: 1; min-width: 96px;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  padding: var(--sp-sm) var(--sp-md);
  text-align: center;
  transition: border-color .18s, background .18s;
  cursor: default;
}
.summary-card:hover {
  background: var(--bg-3); border-color: var(--bd-2);
}
.summary-card.accent {
  border-color: var(--ac-1);
  background: linear-gradient(135deg, var(--ac-dim) 0%, rgba(77,148,255,.06) 100%);
  box-shadow: 0 0 20px rgba(77,148,255,.15), 0 0 0 1px rgba(77,148,255,.18);
}
.summary-val {
  font-size: 24px; font-weight: 700;
  color: var(--ac-s); letter-spacing: -.5px; line-height: 1.1;
  font-family: var(--font-mono);
}
.summary-card.accent .summary-val { color: var(--ac-s); }
.summary-lbl {
  font-size: 10px; color: var(--tx-3); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .7px; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN TABS
═══════════════════════════════════════════════════════════════════════════ */
.main-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--bd-1);
  background: rgba(15,22,32,.9);
  backdrop-filter: blur(10px);
  padding: 0 var(--sp-xs);
}
.main-tab {
  height: 44px; padding: 0 var(--sp-lg);
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--tx-3); cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: var(--font-sans);
  transition: color .15s, border-color .15s;
}
.main-tab:hover  { color: var(--tx-2); }
.main-tab.active { color: var(--ac-1); border-bottom-color: var(--ac-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   STREAM CARDS
═══════════════════════════════════════════════════════════════════════════ */
.stream-card {
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  margin-bottom: var(--sp-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.stream-card:hover {
  border-color: rgba(77,148,255,.3);
  box-shadow: 0 4px 24px rgba(0,0,0,.38), 0 0 0 1px rgba(77,148,255,.12);
}

/* Green left bar when auto-apply is ON */
.stream-card.auto-apply-on { border-left: 2px solid var(--st-good); }
.stream-card.auto-apply-on .auto-toggle-label { color: var(--st-good); }

.stream-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px var(--sp-md);
  border-bottom: 1px solid var(--bd-1);
  background: var(--bg-3);
  gap: var(--sp-sm); flex-wrap: wrap;
}
.stream-title { display: flex; align-items: center; gap: 8px; }
.stream-name  { font-size: 14px; font-weight: 700; color: var(--ac-s); letter-spacing: -.1px; }
.stream-meta  { font-size: 12px; color: var(--tx-3); font-family: var(--font-mono); }
.stream-meta strong { color: var(--ac-s); }
.stream-head-right { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }

.country-tag {
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px;
  background: var(--ac-s-dim);
  border: 1px solid rgba(245,158,11,.28);
  color: var(--ac-s); letter-spacing: .5px;
}

/* Apply weights button */
.btn-apply-weights {
  height: 28px; padding: 0 10px; font-size: 11px; font-weight: 700;
  background: transparent;
  border: 1px solid var(--bd-2);
  color: var(--tx-3); border-radius: var(--r-btn);
  cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans);
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.btn-apply-weights:hover:not(:disabled) {
  background: var(--ac-s-dim); border-color: var(--ac-s); color: var(--ac-s);
  box-shadow: 0 0 10px rgba(245,158,11,.20);
}
.btn-apply-weights:disabled { opacity: .35; cursor: default; }
.btn-apply-weights.btn-applied {
  background: var(--st-good-bg); border-color: var(--st-good-bd);
  color: var(--st-good); cursor: default;
  animation: btn-pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Apply Weights Animations ── */

/* 1. Button shimmer while sending */
@keyframes btn-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}
.btn-apply-weights.btn-loading {
  background: linear-gradient(90deg,
    rgba(245,158,11,.15) 0%,
    rgba(245,158,11,.55) 40%,
    rgba(245,158,11,.15) 80%
  );
  background-size: 250% auto;
  animation: btn-shimmer 1s linear infinite;
  border-color: var(--ac-s);
  color: var(--ac-s);
}

/* 2. Card sending — pulsing blue border */
@keyframes card-sending-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(77,163,255,.0); border-color: var(--bd-2); }
  50%       { box-shadow: 0 0 0 3px rgba(77,163,255,.25); border-color: var(--ac-p); }
}
.stream-card.card-sending {
  animation: card-sending-pulse 1.1s ease-in-out infinite;
}

/* 3. Card success flash — green glow */
@keyframes card-success-flash {
  0%   { box-shadow: 0 0 0 0   rgba(63,185,80,.0);  border-color: var(--bd-2); }
  25%  { box-shadow: 0 0 0 5px rgba(63,185,80,.35); border-color: #3fb950; background: rgba(63,185,80,.04); }
  100% { box-shadow: 0 0 0 0   rgba(63,185,80,.0);  border-color: var(--bd-2); background: transparent; }
}
.stream-card.card-applied {
  animation: card-success-flash .9s ease forwards;
}

/* 4. Card error shake */
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX( 5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX( 3px); }
}
.stream-card.card-error {
  animation: card-shake .45s ease;
  border-color: #f85149 !important;
  box-shadow: 0 0 0 3px rgba(248,81,73,.2) !important;
}

/* 5. Button success pop */
@keyframes btn-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 6. Diff rows stagger slide-in */
@keyframes diff-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.apply-diff-row { animation: diff-slide-in .28s ease both; opacity: 0; }
.apply-diff-row:nth-child(1) { animation-delay: .00s; }
.apply-diff-row:nth-child(2) { animation-delay: .07s; }
.apply-diff-row:nth-child(3) { animation-delay: .14s; }
.apply-diff-row:nth-child(4) { animation-delay: .21s; }
.apply-diff-row:nth-child(5) { animation-delay: .28s; }
.apply-diff-row:nth-child(6) { animation-delay: .35s; }

/* Apply result block */
.apply-result {
  padding: 10px var(--sp-md);
  background: rgba(56,217,150,.04);
  border-bottom: 1px solid var(--st-good-bd);
  font-size: 11px;
}
.apply-result-header { color: var(--st-good); margin-bottom: 6px; font-weight: 700; font-family: var(--font-mono); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-rollback { font-size: 11px; padding: 2px 8px; background: var(--bd-2); border: 1px solid var(--bd-1); border-radius: 4px; color: var(--tx-2); cursor: pointer; margin-left: auto; }
.btn-rollback:hover { background: var(--bd-1); color: var(--tx-1); }
.btn-rollback:disabled { opacity: 0.5; cursor: default; }
.apply-diff-list { display: flex; flex-direction: column; }
.apply-diff-block {
  display: flex; flex-direction: column;
  padding: 5px 0; border-bottom: 1px solid var(--bd-1);
}
.apply-diff-block:last-child { border-bottom: none; }
.apply-diff-top { display: flex; justify-content: space-between; align-items: center; }
.apply-diff-row { padding: 1px 0; }
.apply-diff-name {
  color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 65%; flex-shrink: 1;
}
.apply-diff-val { color: var(--tx-3); flex-shrink: 0; font-family: var(--font-mono); }
.apply-diff-disabled .apply-diff-name { color: var(--tx-3); }
.apply-err { color: var(--st-bad); }
.apply-no-changes { color: var(--st-warn); font-size: 11px; padding: 4px 0; opacity: .8; }
.diff-explanation { font-size: 11px; color: var(--tx-3); margin-top: 2px; line-height: 1.4; }
.diff-explanation-skip { color: #7e6a3a; }

/* Новий оффер без даних — авто-застосування заблоковано */
.apply-new-offer-warn {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #b45309;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 6px;
  padding: 7px 10px;
}
.apply-new-offer-warn b { color: #92400e; }
.btn-apply-weights.btn-new-offer-warn {
  background: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.5);
  color: #92400e;
  cursor: default;
}

/* ─── Forecast / Prediction button ─── */
.btn-forecast {
  height: 28px; padding: 0 10px; font-size: 11px; font-weight: 600;
  background: transparent;
  border: 1px solid var(--bd-2);
  color: var(--tx-2);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.btn-forecast:hover {
  background: rgba(77,163,255,.10);
  border-color: var(--st-info);
  color: var(--st-info);
}
.btn-forecast.btn-forecast-active {
  background: rgba(77,163,255,.12);
  border-color: var(--st-info);
  color: var(--st-info);
}

/* ─── Prediction block ─── */
.prediction-block {
  margin: 8px var(--sp-md) 4px;
  border: 1px solid rgba(77,163,255,.25);
  border-radius: var(--r-badge);
  background: rgba(77,163,255,.04);
  overflow: hidden;
  animation: fadeSlideIn .18s ease-out;
}
.prediction-header {
  padding: 8px var(--sp-md) 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--st-info);
  letter-spacing: .03em;
  border-bottom: 1px solid rgba(77,163,255,.15);
}
.prediction-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono);
}
.pred-th {
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tx-3);
  border-bottom: 1px solid var(--bd-1);
  text-align: left;
  background: rgba(77,163,255,.03);
}
.pred-th-r { text-align: right; }
.pred-td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--bd-1);
  white-space: nowrap;
  vertical-align: middle;
}
.prediction-table tbody tr:last-child .pred-td { border-bottom: none; }
.pred-label { font-family: var(--font-sans); font-size: 12px; color: var(--tx-2); }
.pred-cur   { text-align: right; color: var(--tx-3); }
.pred-fore  { text-align: right; color: var(--tx-1); font-weight: 700; }
.pred-delta { text-align: right; font-weight: 700; }
.pred-pct   { text-align: right; font-size: 11px; }
.pred-delta-up   { color: var(--st-good); }
.pred-delta-down { color: var(--st-bad); }
.pred-delta-flat { color: var(--tx-3); }
.prediction-note {
  padding: 6px var(--sp-md) 8px;
  font-size: 11px;
  color: var(--tx-3);
  border-top: 1px solid var(--bd-1);
  line-height: 1.4;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Offer grid ─── */
.offers-grid-head {
  display: grid; padding: 7px var(--sp-md);
  background: rgba(11,15,20,.55);
  border-bottom: 1px solid var(--bd-1);
  font-size: 10px; font-weight: 700; color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .7px;
  gap: 8px;
}
.offer-row {
  display: grid; padding: 9px var(--sp-md); gap: 8px;
  align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--bd-1);
  transition: background .1s;
}
.offer-row:last-child { border-bottom: none; }
.offer-row:hover { background: rgba(77,163,255,.03); }

/* Top performer */
.offer-row.row-top {
  background: linear-gradient(90deg, rgba(56,217,150,.07) 0%, transparent 70%);
  border-left: 3px solid var(--st-good);
}
.offer-row.row-skipped { opacity: .5; }

/* Explanation under offer row */
.offer-explanation {
  font-size: 11px; color: var(--tx-3);
  padding: 2px var(--sp-md) 8px;
  line-height: 1.5;
  border-bottom: 1px solid var(--bd-1);
}
.offer-explanation-skip { color: #8a7040; }
.offer-row:has(+ .offer-explanation) { border-bottom: none; }

.th-r { text-align: right; }
.offer-name-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 500; color: var(--tx-2);
}
.num-cell {
  text-align: right; font-size: 13px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  color: var(--tx-1);
}
.sub-rate { color: var(--tx-3); font-size: 11px; font-family: var(--font-mono); }
.cur-cell     { color: var(--tx-3); font-family: var(--font-mono); }
.td-cell { color: var(--ac-p); font-family: var(--font-mono); font-size: 12px; opacity: .75; }
.td-th   { color: var(--ac-p) !important; opacity: .75; }

/* Campaign Tags / Web Filter */
.web-filter-bar {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 6px;
}
.web-filter-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 10px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--bd); color: var(--tx-2);
  transition: all .15s; white-space: nowrap;
}
.web-filter-btn:hover  { border-color: var(--ac-p); color: var(--tx-1); }
.web-filter-btn.active { background: var(--ac-p); border-color: var(--ac-p); color: #fff; font-weight: 600; }

/* Campaign web badge (shows webmaster name inline) */
.camp-web-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  border: 1px solid; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.stream-web-badge {
  font-size: 10px; padding: 1px 7px; border-radius: 8px;
  font-weight: 600; white-space: nowrap; flex-shrink: 0;
  opacity: 0.9;
}
.stream-naming-badge {
  font-size: 10px; padding: 1px 7px; border-radius: 8px;
  background: #8b5cf622; color: #a78bfa; border: 1px solid #8b5cf644;
  font-weight: 600; white-space: nowrap; flex-shrink: 0;
}

/* Auth user badge in header */
.auth-user-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--bd);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Users */
.user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; background: var(--bg-3); border: 1px solid var(--bd);
  border-radius: 6px; margin-bottom: 5px;
}
.user-name       { font-size: 13px; flex: 1; }
.user-key-status { font-size: 14px; margin: 0 4px; }
.user-tg-status  { font-size: 13px; margin: 0 4px; opacity: 0.5; }
.user-tg-status.tg-ok { opacity: 1; }
.user-actions { display: flex; gap: 6px; }
.btn-xs { font-size: 11px !important; padding: 3px 8px !important; }

/* Recommended weight cell */
.rec-cell { display: flex; flex-direction: column; gap: 4px; }
.rec-bar-wrap {
  height: 4px; background: var(--bg-4); border-radius: 2px; overflow: hidden;
}
.rec-bar {
  height: 100%; background: var(--ac-1); border-radius: 2px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.row-top .rec-bar { background: var(--st-good); }
.rec-label { font-size: 12px; font-weight: 700; font-family: var(--font-mono); display: flex; align-items: center; gap: 5px; color: var(--tx-1); }
.delta-up   { color: var(--st-good); font-size: 11px; font-weight: 700; }
.delta-down { color: var(--st-bad);  font-size: 11px; font-weight: 700; }
.text-muted { color: var(--tx-3); }

.skip-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--st-warn);
  background: var(--st-warn-bg); border: 1px solid var(--st-warn-bd);
  border-radius: var(--r-badge); padding: 2px 7px;
}
.muted { color: var(--tx-3); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RECOMMENDATIONS SECTION
═══════════════════════════════════════════════════════════════════════════ */
.rec-section {
  background: var(--bg-2); border: 1px solid var(--bd-1);
  border-radius: var(--r-card); padding: var(--sp-lg); margin-top: 10px;
  box-shadow: var(--shadow-card);
}
.rec-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-md);
}
.section-title { font-size: 15px; font-weight: 800; color: var(--tx-1); letter-spacing: -.2px; }
.rec-block { margin-bottom: var(--sp-md); }
.rec-block-header {
  font-size: 10px; font-weight: 700; color: var(--tx-3);
  margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--bd-1);
  text-transform: uppercase; letter-spacing: .7px;
}
.rec-line {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .1s;
}
.rec-line:last-of-type { border-bottom: none; }
.rec-line:hover { background: var(--bg-3); border-radius: var(--r-xs); }
.rec-arrow      { font-size: 13px; width: 14px; text-align: center; flex-shrink: 0; }
.rec-offer-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx-2); }
.rec-stats      { font-size: 11px; color: var(--tx-3); white-space: nowrap; font-family: var(--font-mono); }
.rec-pct        { font-weight: 700; color: var(--tx-1); min-width: 32px; text-align: right; font-family: var(--font-mono); }
.rec-delta      { font-size: 11px; min-width: 36px; text-align: right; font-weight: 700; font-family: var(--font-mono); }
.rec-skip-note  {
  font-size: 11px; color: var(--st-warn);
  padding: 5px 8px; margin-top: 4px;
  background: var(--st-warn-bg); border: 1px solid var(--st-warn-bd);
  border-radius: var(--r-badge);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px); z-index: 200;
}
.modal {
  position: fixed; top: 50%; left: 50%;
  z-index: 201; width: 480px; max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow), 0 0 0 1px rgba(77,163,255,.05);
  /* transform, opacity, transition — set in MODAL ANIMATION section below */
}
.modal-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--bd-1);
  font-size: 15px; font-weight: 700; color: var(--tx-1);
}
.modal-body    { padding: var(--sp-md) var(--sp-lg); overflow-y: auto; flex: 1; }
.modal-footer  {
  flex-shrink: 0;
  display: flex; justify-content: flex-end; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-lg); border-top: 1px solid var(--bd-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD VIEW
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Chart row ─── */
.dash-charts {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-md) 0;
}
@media (max-width: 900px) {
  .dash-charts { grid-template-columns: 1fr; }
}
.dash-chart-card {
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s;
}
.dash-chart-card:hover { border-color: var(--bd-2); }
.dash-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
}
.dash-chart-title {
  font-size: 11px; font-weight: 700;
  color: var(--ac-1);
  text-transform: uppercase; letter-spacing: .07em;
}
.dash-chart-body {
  position: relative;
  height: 280px;
}
/* ─── Chart metric tabs ─── */
.dash-ctabs { display: flex; gap: 3px; }
.dash-ctab {
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--bd-2);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--tx-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dash-ctab:hover {
  background: var(--ac-dim); color: var(--ac-1); border-color: var(--ac-1);
}
.dash-ctab.active {
  background: var(--ac-s-dim); color: var(--ac-s); border-color: var(--ac-s);
}
.dash-nodata {
  text-align: center; padding: 72px var(--sp-lg);
  color: var(--tx-3); font-size: 14px; line-height: 1.9;
}
.dash-nodata .empty-icon { font-size: 44px; margin-bottom: 14px; display: block; }
.dash-nodata strong { color: var(--tx-2); }

/* Toolbar */
.dash-toolbar {
  display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap;
  padding: var(--sp-md) 0 var(--sp-sm);
}
.dash-filter-sel { width: 138px; flex-shrink: 0; height: 36px; }
.dash-search-input {
  flex: 1; min-width: 140px; height: 36px;
  background: var(--bg-2); border: 1px solid var(--bd-1);
  border-radius: var(--r-input); padding: 0 11px;
  color: var(--tx-1); font-size: 13px; outline: none;
  font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.dash-search-input:focus { border-color: var(--ac-1); box-shadow: var(--ac-glow); }
.dash-search-input::placeholder { color: var(--tx-3); }
.dash-count-badge { font-size: 12px; color: var(--tx-3); flex-shrink: 0; white-space: nowrap; font-family: var(--font-mono); }

/* Table */
.dash-table-wrap { overflow-x: auto; padding-bottom: 32px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.dash-table thead th {
  padding: 10px 12px; text-align: left; font-weight: 700;
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tx-3); border-bottom: 1px solid var(--bd-2);
  white-space: nowrap; position: sticky; top: 0;
  background: var(--bg-0); z-index: 5;
}
.dash-table thead .th-r { text-align: right; }
.th-rank { width: 36px; }

/* Row */
.dash-row {
  border-bottom: 1px solid var(--bd-1);
  transition: background .1s;
}
.dash-row:nth-child(even) { background: rgba(255,255,255,.015); } /* subtle zebra */
.dash-row:hover  { background: rgba(77,163,255,.04); }
.dash-row:last-child { border-bottom: none; }

.td-rank {
  text-align: center; width: 36px; color: var(--tx-3);
  font-size: 12px; padding: 12px 4px;
  font-family: var(--font-mono);
}
/* Top 3 rank highlight */
.dash-row:nth-child(-n+3) .td-rank {
  color: var(--ac-1); font-weight: 700;
}

.td-offer { padding: 10px 12px; min-width: 200px; max-width: 340px; }
.td-offer-name {
  font-weight: 600; color: var(--tx-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.td-offer-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }

/* GEO badge */
.geo-badge {
  font-size: 10px; font-weight: 700; color: var(--ac-1);
  background: var(--ac-dim);
  border: 1px solid rgba(77,163,255,.25);
  border-radius: 20px; padding: 1px 7px; white-space: nowrap;
}
.geo-more { color: var(--tx-3); background: var(--bg-4); border-color: var(--bd-1); }
.camp-badge { font-size: 10px; color: var(--tx-3); margin-left: 2px; }

/* Mini click bar */
.td-click-bar { margin-top: 5px; height: 3px; background: var(--bg-4); border-radius: 2px; overflow: hidden; }
.td-click-fill { height: 100%; background: var(--ac-1); border-radius: 2px; opacity: .45; transition: width .3s; }

/* Numeric cells */
.td-num {
  text-align: right; padding: 12px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end;
  color: var(--tx-2);
}
.td-ftd-pos { color: var(--st-good); }
.td-epc     { color: var(--ac-1); }

.dash-empty-row { text-align: center; padding: 48px; color: var(--tx-3); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTO-TOGGLE
═══════════════════════════════════════════════════════════════════════════ */
.auto-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.auto-toggle-input { display: none; }
.auto-toggle-slider {
  width: 28px; height: 16px;
  background: var(--bg-4); border: 1px solid var(--bd-2);
  border-radius: 8px; position: relative;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.auto-toggle-slider::after {
  content: ''; position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tx-3); top: 2px; left: 2px;
  transition: transform .2s, background .2s;
}
.auto-toggle-input:checked + .auto-toggle-slider {
  background: rgba(56,217,150,.25); border-color: var(--st-good);
  box-shadow: 0 0 8px rgba(56,217,150,.2);
}
.auto-toggle-input:checked + .auto-toggle-slider::after {
  transform: translateX(12px); background: var(--st-good);
}
.auto-toggle-label { font-size: 11px; color: var(--tx-3); transition: color .2s; font-weight: 600; }

.auto-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 6px; margin-left: 4px;
  background: var(--st-good-bg); color: var(--st-good);
  border: 1px solid var(--st-good-bd);
  border-radius: var(--r-xs); vertical-align: middle;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATE PRESETS
═══════════════════════════════════════════════════════════════════════════ */
.date-presets {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 8px;
}
.preset-btn {
  flex: 1; min-width: 0;
  font-size: 10px; font-weight: 600;
  height: 24px; padding: 0 6px;
  border-radius: var(--r-badge);
  border-color: var(--bd-1);
  background: var(--bg-4); color: var(--tx-3);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.preset-btn:hover { background: var(--bg-3); border-color: var(--bd-2); color: var(--tx-2); }
.preset-btn.active {
  background: var(--ac-dim); border-color: var(--ac-1); color: var(--ac-1);
  box-shadow: 0 0 8px rgba(77,163,255,.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 360px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-3); border: 1px solid var(--bd-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03);
  font-size: 13px; color: var(--tx-1); line-height: 1.45;
  pointer-events: all;
  /* Initial hidden state */
  opacity: 0; transform: translateX(16px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.toast-visible { opacity: 1; transform: translateX(0); }
.toast-success { border-color: var(--st-good-bd); }
.toast-error   { border-color: var(--st-bad-bd);  }
.toast-warn    { border-color: var(--st-warn-bd);  }
.toast-info    { border-color: var(--st-info-bd);  }
.toast-icon  { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.toast-msg   { flex: 1; }
.toast-close {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--tx-3); font-size: 13px; line-height: 1; flex-shrink: 0;
  margin-top: 1px; transition: color .12s;
}
.toast-close:hover { color: var(--tx-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   STREAM CARD — COLLAPSE / EXPAND
═══════════════════════════════════════════════════════════════════════════ */
.stream-card-body { /* wrapper around offers grid — collapsed when hidden */ }
.stream-card.collapsed .stream-card-body { display: none; }
.stream-card.collapsed .stream-card-head { border-bottom: none; }

.btn-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: none; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--r-xs); flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.btn-collapse:hover { background: var(--bg-4); border-color: var(--bd-1); }
.collapse-icon {
  display: inline-block; font-size: 9px; color: var(--tx-3);
  transition: transform .18s ease;
  line-height: 1;
}
.stream-card.collapsed .collapse-icon { transform: rotate(-90deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   WEIGHT BARS — enhanced dual-track
═══════════════════════════════════════════════════════════════════════════ */
.rec-bar-wrap {
  height: 6px; background: var(--bg-4); border-radius: 3px;
  overflow: hidden; position: relative;
  margin-bottom: 3px;
}
.rec-bar-cur {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(168,179,194,.18); border-radius: 3px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.rec-bar {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--ac-1); border-radius: 3px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
.row-top .rec-bar { background: var(--st-good); }
.row-skipped .rec-bar { background: var(--tx-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   SPINNER — Analyze button
═══════════════════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(11,15,20,.35);
  border-top-color: var(--tx-inv);
  border-radius: 50%;
  animation: spin .65s linear infinite;
  vertical-align: -2px; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL ANIMATION
═══════════════════════════════════════════════════════════════════════════ */
.modal {
  /* Base hidden state (used before .modal-open is added) */
  opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity .18s ease-out, transform .18s ease-out;
  pointer-events: none;
}
.modal.modal-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}
.modal-backdrop {
  opacity: 0;
  transition: opacity .18s ease-out;
}
.modal-backdrop.bd-open { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE — Settings button group
═══════════════════════════════════════════════════════════════════════════ */
.theme-toggle-group {
  display: flex; gap: 6px; margin-top: 6px;
}
.theme-btn {
  flex: 1; height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--bd-1);
  border-radius: var(--r-input); cursor: pointer;
  font-size: 13px; font-family: var(--font-sans); color: var(--tx-2);
  transition: background .14s, border-color .14s, color .14s;
}
.theme-btn:hover { border-color: var(--bd-2); color: var(--tx-1); background: var(--bg-4); }
.theme-btn.active {
  background: var(--ac-dim); border-color: var(--ac-1); color: var(--ac-1);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Enterprise / Ops
   Applied via: <html data-theme="light">
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;

  /* ── Backgrounds ── */
  --bg-0: #ECF0F5;    /* page background — cool gray-blue */
  --bg-1: #F5F7FA;    /* sidebar */
  --bg-2: #FFFFFF;    /* card / modal surface */
  --bg-3: #EFF3F8;    /* hover / active surface */
  --bg-4: #E6EBF2;    /* input / nested bg */

  /* ── Borders ── */
  --bd-1: #CDD5DF;
  --bd-2: #B4C0CC;
  --bd-3: rgba(0,0,0,.05);

  /* ── Text ── */
  --tx-1: #0D1A26;    /* near-black navy */
  --tx-2: #3A4E62;    /* primary body text */
  --tx-3: #7A8FA4;    /* muted / labels */
  --tx-inv: #FFFFFF;  /* on accent */

  /* ── Accent Primary — Blue on light bg ── */
  --ac-1:   #1B7ED8;
  --ac-2:   #1567C0;
  --ac-dim: rgba(27,126,216,.10);
  --ac-glow:0 0 0 3px rgba(27,126,216,.22), 0 0 14px rgba(27,126,216,.08);

  /* ── Accent Secondary — Amber on light ── */
  --ac-s:     #D97706;
  --ac-s-2:   #B45309;
  --ac-s-dim: rgba(217,119,6,.11);
  --ac-s-glow:0 0 0 3px rgba(217,119,6,.22), 0 0 14px rgba(217,119,6,.08);

  /* ── Status — vivid on light ── */
  --st-good: #15803D;
  --st-warn: #D97706;
  --st-bad:  #C62828;
  --st-info: #1D4ED8;

  --st-good-bg: rgba(21,128,61,.09);
  --st-warn-bg: rgba(217,119,6,.09);
  --st-bad-bg:  rgba(198,40,40,.09);
  --st-info-bg: rgba(29,78,216,.09);

  --st-good-bd: rgba(21,128,61,.32);
  --st-warn-bd: rgba(217,119,6,.32);
  --st-bad-bd:  rgba(198,40,40,.32);
  --st-info-bd: rgba(29,78,216,.32);

  /* ── Shadows — more pronounced on light ── */
  --shadow:      0 8px 24px rgba(15,26,38,.10);
  --shadow-sm:   0 2px 8px  rgba(15,26,38,.08);
  --shadow-card: 0 1px 3px  rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05);

  /* ── Legacy aliases ── */
  --bg:          var(--bg-0);
  --bg2:         var(--bg-2);
  --bg3:         var(--bg-3);
  --bg4:         var(--bg-4);
  --border:      var(--bd-1);
  --text:        var(--tx-2);
  --text-muted:  var(--tx-3);
  --text-bright: var(--tx-1);
  --accent:      var(--ac-1);
  --accent-dim:  var(--ac-dim);
  --green:       var(--st-good);
  --green-dim:   #dcf5e8;
  --green-glow:  rgba(21,128,61,.15);
  --red:         var(--st-bad);
  --orange:      var(--st-warn);
  --radius:      var(--r-card);
  --radius-sm:   var(--r-input);
}

/* ── Component overrides (hardcoded rgba in base theme) ── */

[data-theme="light"] body { color: var(--tx-2); }

[data-theme="light"] .app-header {
  background: rgba(245,247,250,.95);
  box-shadow: 0 1px 0 var(--bd-1), 0 2px 8px rgba(0,0,0,.05);
}

[data-theme="light"] .main-tabs {
  background: rgba(245,247,250,.97);
  border-bottom-color: var(--bd-1);
}

[data-theme="light"] .summary-bar {
  background: rgba(245,247,250,.92);
  border-bottom-color: var(--bd-1);
}

/* Cache filter badge */
.cache-filter-badge {
  margin: 0 var(--sp-lg) 4px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(56,139,253,.12);
  border: 1px solid rgba(56,139,253,.3);
  color: var(--ac-1);
  font-weight: 500;
}
.cache-filter-badge.warn {
  background: rgba(227,179,65,.12);
  border-color: rgba(227,179,65,.35);
  color: var(--ac-y, #e3b341);
}

[data-theme="light"] .offers-grid-head {
  background: rgba(0,0,0,.028);
}

[data-theme="light"] .offer-row:hover {
  background: rgba(27,126,216,.045);
}

[data-theme="light"] .offer-row.row-top {
  background: linear-gradient(90deg, rgba(21,128,61,.07) 0%, transparent 70%);
}

[data-theme="light"] .dash-row:nth-child(even) {
  background: rgba(0,0,0,.022);
}
[data-theme="light"] .dash-row:hover {
  background: rgba(27,126,216,.05);
}

[data-theme="light"] .rec-bar-cur {
  background: rgba(0,0,0,.15);
}

[data-theme="light"] .modal-backdrop {
  background: rgba(10,20,35,.55);
}

[data-theme="light"] .toast {
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

[data-theme="light"] .log-item:hover,
[data-theme="light"] .history-item:hover,
[data-theme="light"] .campaign-item:hover {
  background: var(--bg-3);
}

[data-theme="light"] .status-bar {
  background: var(--bg-2);
}

[data-theme="light"] .sidebar-section {
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[data-theme="light"] .stream-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
}
[data-theme="light"] .stream-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06);
}

[data-theme="light"] .apply-result {
  background: rgba(21,128,61,.04);
  border-bottom-color: var(--st-good-bd);
}

[data-theme="light"] .dash-table thead th {
  background: var(--bg-0);
}

/* Scrollbar on light */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--bd-2);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #96aabb;
}

/* Skeleton shimmer on light */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 50%, var(--bg-3) 75%);
  background-size: 200% 100%;
}

/* Status dot pulse on light */
[data-theme="light"] .status-dot.good {
  box-shadow: 0 0 5px var(--st-good);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WATCH BUTTON — follow/unfollow stream for TG notifications
═══════════════════════════════════════════════════════════════════════════ */
.btn-watch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--bd-1);
  border-radius: var(--r-badge);
  color: var(--tx-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
  margin-left: 4px;
}
.btn-watch:hover {
  background: var(--ac-s-dim);
  border-color: var(--ac-s);
  color: var(--ac-s);
}
.btn-watch.watching {
  background: var(--ac-s-dim);
  border-color: var(--ac-s);
  color: var(--ac-s);
  box-shadow: var(--ac-s-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELEGRAM SETTINGS SECTION
═══════════════════════════════════════════════════════════════════════════ */
.tg-settings-section {
  background: var(--bg-1);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  padding: var(--sp-md);
  margin-top: 4px;
}
.tg-settings-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-1);
  margin-bottom: 6px;
}
.tg-settings-desc {
  font-size: 12px;
  color: var(--tx-3);
  line-height: 1.55;
  margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════════════ */
.app-footer {
  text-align: center;
  padding: 14px var(--sp-lg);
  font-size: 11px;
  color: var(--tx-3);
  border-top: 1px solid var(--bd-1);
  background: var(--bg-1);
  letter-spacing: .02em;
  line-height: 1.6;
}
.app-footer strong { color: var(--tx-2); font-weight: 600; }
.footer-sep { margin: 0 6px; opacity: .4; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ MODAL
═══════════════════════════════════════════════════════════════════════════ */
.modal-faq { width: 560px; }

.btn-help {
  width: 28px; height: 28px;
  font-size: 15px; font-weight: 700;
  border-radius: 50%;
  border: 1.5px solid var(--ac-p);
  color: var(--ac-p);
  margin-right: 4px;
}
.btn-help:hover { background: rgba(77,163,255,.12); }

.faq-section { margin-bottom: 20px; }
.faq-section:last-child { margin-bottom: 0; }

.faq-section-title {
  font-size: 12px; font-weight: 700;
  color: var(--ac-p);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd-1);
  margin-bottom: 10px;
}

.faq-item {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
}
.faq-item:last-child { margin-bottom: 0; }

.faq-q {
  font-size: 13px; font-weight: 600;
  color: var(--tx-1);
  margin-bottom: 5px;
}
.faq-q::before {
  content: 'Q  ';
  color: var(--ac-p);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.faq-a {
  font-size: 13px;
  color: var(--tx-2);
  line-height: 1.65;
}
.faq-a code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ac-p);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TREND BADGES
═══════════════════════════════════════════════════════════════════════════ */

.trend-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.trend-up {
  background: rgba(63, 185, 80, 0.15);
  color: var(--st-good);
  border: 1px solid rgba(63, 185, 80, 0.3);
}
.trend-down {
  background: rgba(248, 81, 73, 0.15);
  color: var(--st-bad);
  border: 1px solid rgba(248, 81, 73, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EPC CHART (per-offer daily mini chart)
═══════════════════════════════════════════════════════════════════════════ */

/* Chart toggle button inside offer name cell */
.offer-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.offer-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.btn-chart-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .14s, background .14s, border-color .14s;
  line-height: 1;
}
.btn-chart-toggle:hover,
.btn-chart-toggle.btn-chart-active {
  opacity: 1;
  background: var(--ac-s-dim);
  border-color: var(--ac-s);
}

/* Collapsible chart container below each offer row */
.offer-epc-chart {
  grid-column: 1 / -1;
  padding: 8px 12px 12px;
  background: var(--bg-1);
  border-left: 3px solid var(--ac-s);
  border-radius: 0 0 var(--r-card) var(--r-card);
  margin-bottom: 2px;
}
.offer-epc-chart.hidden { display: none; }

.epc-chart-wrap {
  height: 110px;
  position: relative;
}
.epc-mini-canvas {
  width: 100% !important;
  height: 110px !important;
}

.chart-msg {
  font-size: 12px;
  color: var(--tx-3);
  padding: 8px 0;
  text-align: center;
}
.chart-loading { color: var(--ac-p); }
.chart-error   { color: var(--st-bad); }

/* ═══════════════════════════════════════════════════════════════════════════
   PERIOD COMPARISON
═══════════════════════════════════════════════════════════════════════════ */

.period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.btn-compare-toggle {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--bd-1);
  background: transparent;
  color: var(--tx-2);
  border-radius: var(--r-badge);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.btn-compare-toggle:hover,
.btn-compare-toggle.active {
  background: var(--ac-s-dim);
  border-color: var(--ac-s);
  color: var(--ac-s);
}
.compare-extra {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--bd-1);
}
.compare-extra.hidden { display: none; }

/* Summary bar for comparison results */
.compare-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.compare-period {
  flex: 1;
  min-width: 200px;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  padding: 10px 14px;
  font-size: 13px;
}
.compare-period-a { border-left: 3px solid var(--ac-p); }
.compare-period-b { border-left: 3px solid var(--ac-s); }
.compare-period strong { color: var(--tx-1); display: block; margin-bottom: 2px; }
.compare-period-stats  { color: var(--tx-3); font-size: 12px; }

/* Compare stream card */
.compare-stream-card .stream-card-body { padding: 0 0 8px; }

/* Compare table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cmp-th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-3);
  padding: 4px 8px;
  border-bottom: 1px solid var(--bd-1);
  white-space: nowrap;
}
.cmp-th-r { text-align: right; }
.cmp-td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--bd-2);
  color: var(--tx-2);
  vertical-align: middle;
}
.cmp-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx-1);
  font-size: 12px;
}
.cmp-num  { text-align: right; font-family: var(--font-mono); font-size: 11px; }
.cmp-pct  { text-align: right; font-size: 11px; white-space: nowrap; }
.cmp-row:last-child .cmp-td { border-bottom: none; }
.cmp-row:hover .cmp-td { background: var(--bg-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   COHORT ANALYSIS
═══════════════════════════════════════════════════════════════════════════ */
#view-cohort {
  padding: 12px 0;
}

/* Filter bar */
.cohort-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: 6px;
}
.cohort-filter-select {
  background: var(--bg-4);
  border: 1px solid var(--bd-2);
  border-radius: 4px;
  color: var(--tx-2);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 130px;
  max-width: 260px;
  outline: none;
}
#cohort-filter-campaign.cohort-filter-select { min-width: 180px; max-width: 320px; }
.cohort-filter-select:focus { border-color: var(--ac-1); }
.cohort-filter-clear {
  background: transparent;
  border: none;
  color: var(--tx-3);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  transition: color .15s;
}
.cohort-filter-clear:hover { color: var(--st-bad); }
.cohort-filter-count {
  font-size: 11px;
  color: var(--tx-3);
  white-space: nowrap;
  margin-left: 4px;
}
.cohort-filter-count-active {
  color: var(--ac-1);
  font-weight: 600;
}

/* Toolbar */
.cohort-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.cohort-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cohort-toolbar-label {
  font-size: 11px;
  color: var(--tx-3);
  margin-right: 4px;
  white-space: nowrap;
}
.cohort-gran-btn,
.cohort-metric-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--bd-2);
  background: var(--bg-3);
  color: var(--tx-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cohort-gran-btn:hover,
.cohort-metric-btn:hover {
  background: var(--bg-4);
  color: var(--tx-1);
}
.cohort-gran-btn.active,
.cohort-metric-btn.active {
  background: var(--ac-dim);
  border-color: var(--ac-1);
  color: var(--ac-1);
}

/* Section titles */
.cohort-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-2);
  margin-bottom: 4px;
}
.cohort-note {
  font-size: 10px;
  color: var(--tx-3);
  margin-bottom: 8px;
}

/* ── Heatmap grid ── */
.cohort-heatmap-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
}

.cohort-heatmap {
  display: grid;
  /* columns set inline via style="" */
  border: 1px solid var(--bd-1);
  border-radius: 6px;
  overflow: hidden;
  min-width: max-content;
}

.ch-cell {
  padding: 5px 7px;
  font-size: 10px;
  line-height: 1.3;
  border-right: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ch-cell:last-child { border-right: none; }

/* Header cells */
.ch-head {
  background: var(--bg-3);
  color: var(--tx-3);
  font-weight: 600;
  font-size: 10px;
  text-align: center;
  border-bottom: 1px solid var(--bd-1) !important;
}
.ch-label-head {
  text-align: left;
  padding-left: 10px;
}
.ch-period-head {
  line-height: 1.2;
}

/* Offer name column */
.ch-offer-name {
  background: var(--bg-2);
  color: var(--tx-2);
  font-size: 10px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--bd-1) !important;
  padding: 5px 10px;
}

/* Data cells */
.ch-data {
  text-align: center;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  transition: opacity .15s;
  cursor: default;
}
.ch-data:hover { opacity: .7; }

/* ── Cohort summary table ── */
.cohort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.cohort-th {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-3);
  padding: 5px 10px;
  border-bottom: 1px solid var(--bd-1);
  white-space: nowrap;
  background: var(--bg-2);
}
.cohort-th-r { text-align: right; }
.cohort-td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--bd-2);
  color: var(--tx-2);
  vertical-align: middle;
}
.cohort-row:last-child .cohort-td { border-bottom: none; }
.cohort-row:hover .cohort-td { background: var(--bg-1); }
.cohort-period {
  color: var(--tx-1);
  font-size: 11px;
  white-space: nowrap;
}
.cohort-num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
}
.cohort-epc {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--st-good);
}
.cohort-pct {
  text-align: right;
  font-size: 11px;
  color: var(--tx-2);
}

/* ─── STREAM GEO FILTER BAR ─────────────────────────────────────────────── */
.streams-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 4px;
}
.streams-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: 8px;
  padding: 0 10px;
  flex: 0 1 280px;
  transition: border-color .15s;
}
.streams-filter-wrap:focus-within {
  border-color: var(--accent);
}
.streams-filter-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: .7;
}
.streams-filter-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--tx-1);
  font-size: 13px;
  padding: 7px 0;
  flex: 1;
  min-width: 0;
}
.streams-filter-input::placeholder {
  color: var(--tx-3);
}
.streams-filter-clear {
  background: none;
  border: none;
  color: var(--tx-3);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.streams-filter-clear:hover { color: var(--tx-1); background: var(--bg-3); }
.streams-filter-clear.hidden { display: none; }
.streams-filter-count {
  font-size: 12px;
  color: var(--tx-3);
  white-space: nowrap;
}
.streams-filter-count.active {
  color: var(--accent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .layout    { flex-direction: column; }
  .sidebar   { width: 100%; height: auto; position: static; }
  .summary-bar .summary-card { min-width: 80px; }
}

/* ── Country Tier Badges ───────────────────────────────────────────── */

/* Tier badge on stream card header */
.geo-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  cursor: default;
  opacity: .85;
}
.geo-tier-badge.tier-t1 { background: rgba(59,130,246,.18); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.geo-tier-badge.tier-t2 { background: rgba(168,85,247,.18); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }
.geo-tier-badge.tier-t3 { background: rgba(156,163,175,.15); color: var(--tx-3); border: 1px solid var(--bd-1); }

/* Tier inputs row in settings modal */
.tier-inputs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.tier-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.tier-badge-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  flex-shrink: 0;
}
.tier-badge-input.tier-t1 { background: rgba(59,130,246,.2); color: #60a5fa; }
.tier-badge-input.tier-t2 { background: rgba(168,85,247,.2); color: #c084fc; }
.tier-badge-input.tier-t3 { background: rgba(156,163,175,.15); color: var(--tx-3); }
.tier-field { padding: 4px 7px !important; }

/* ── Campaign list: camp-row wrapper (for ⚡ auto button) ─────────────────── */
.camp-row {
  display: flex;
  align-items: center;
  border-radius: var(--r-badge);
}
.camp-row:hover { background: var(--bg-3); }
.camp-row .campaign-item { flex: 1; min-width: 0; }
.camp-row .campaign-item:hover { background: transparent; } /* hover only on camp-row */

/* Campaign-level auto-apply ⚡ button */
.btn-camp-auto {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--r-badge);
  opacity: .3;
  transition: opacity .15s, background .15s, box-shadow .15s;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-camp-auto:hover { opacity: .75; background: var(--bg-3); }
.btn-camp-auto.active {
  opacity: 1;
  background: rgba(234,179,8,.15);
  box-shadow: 0 0 0 1px rgba(234,179,8,.4);
}

/* Campaign-level track 📌 button */
.btn-camp-track {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--r-badge);
  opacity: .3;
  transition: opacity .15s, background .15s, box-shadow .15s;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-camp-track:hover { opacity: .75; background: var(--bg-3); }
.btn-camp-track.tracked {
  opacity: 1;
  background: rgba(88,166,255,.15);
  box-shadow: 0 0 0 1px rgba(88,166,255,.4);
}

/* Tracked campaigns section */
.camp-section { margin-bottom: 2px; }
.camp-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.camp-section-icon { font-size: 13px; }
.camp-section-badge {
  margin-left: auto;
  background: rgba(88,166,255,.15);
  color: #58a6ff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
}
.tracked-section {
  background: rgba(88,166,255,.04);
  border-radius: var(--r-card);
  border: 1px solid rgba(88,166,255,.12);
  margin-bottom: 8px;
}
.tracked-section .camp-row {
  border-left: 2px solid rgba(88,166,255,.3);
}

/* Stream card auto-toggle: campaign-auto mode (★ yellow indicator) */
.auto-toggle.camp-auto-mode .auto-toggle-slider {
  background: rgba(234,179,8,.4);
}
.auto-toggle.camp-auto-mode input:checked ~ .auto-toggle-slider {
  background: rgba(234,179,8,.75);
}
.auto-camp-star {
  font-size: 9px;
  color: #eab308;
  vertical-align: super;
  line-height: 1;
}

/* Campaign-level watch 🔔 button */
.btn-camp-watch {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--r-badge);
  opacity: .3;
  transition: opacity .15s, background .15s, box-shadow .15s;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-camp-watch:hover { opacity: .75; background: var(--bg-3); }
.btn-camp-watch.watching {
  opacity: 1;
  background: rgba(77,163,255,.12);
  box-shadow: 0 0 0 1px rgba(77,163,255,.35);
}

/* Recent EPC badge (adaptive window) — shown next to full-period EPC */
.recent-epc-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: var(--ac-s);
  opacity: .85;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANOMALY TAB BADGE (count on tab button)
───────────────────────────────────────────────────────────────────────────── */
.anomaly-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANOMALY VIEW LAYOUT
───────────────────────────────────────────────────────────────────────────── */
.anomaly-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd-1);
  flex-wrap: wrap;
}
.anomaly-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.anomaly-sev-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sev-critical { background: #ef4444; }
.sev-warning  { background: #f59e0b; }
.sev-info     { background: #22c55e; }

.anomaly-empty-msg {
  font-size: 13px;
  color: var(--text-3);
  margin-left: auto;
}

.anomaly-no-results {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANOMALY GROUPS + CARDS
───────────────────────────────────────────────────────────────────────────── */
.anomaly-groups {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.anomaly-group {}
.anomaly-group-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.anomaly-group-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-3);
  color: var(--text-2);
  border-radius: 8px;
  padding: 1px 6px;
}

.anomaly-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.anomaly-card {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anomaly-card-critical { border-left-color: #ef4444; background: rgba(239,68,68,.06); }
.anomaly-card-warning  { border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.anomaly-card-info     { border-left-color: #22c55e; background: rgba(34,197,94,.06); }

.anomaly-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.anomaly-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.anomaly-type-zero_conv  { background: rgba(239,68,68,.2);  color: #ef4444; }
.anomaly-type-epc_crash  { background: rgba(239,68,68,.2);  color: #ef4444; }
.anomaly-type-epc_drop   { background: rgba(245,158,11,.2); color: #f59e0b; }
.anomaly-type-click_drop { background: rgba(245,158,11,.2); color: #f59e0b; }
.anomaly-type-epc_spike  { background: rgba(34,197,94,.2);  color: #22c55e; }

.anomaly-offer-name {
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.anomaly-card-mid {
  color: var(--text-3);
  font-size: 11px;
}
.anomaly-card-msg {
  color: var(--text-2);
  font-size: 12px;
}
.anomaly-card-epc {
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OFFER ROW ANOMALY — micro-badge and colored left border
───────────────────────────────────────────────────────────────────────────── */
.offer-anomaly-micro {
  margin-left: 4px;
  font-size: 10px;
  cursor: help;
  flex-shrink: 0;
}

/* Subtle colored left stripe on the row */
.row-anomaly-critical { border-left: 2px solid rgba(239,68,68,.6); }
.row-anomaly-warning  { border-left: 2px solid rgba(245,158,11,.5); }
.row-anomaly-info     { border-left: 2px solid rgba(34,197,94,.4); }

/* ─── Autopilot sidebar section ─────────────────────────────────────────── */
.autopilot-section { border-top: 1px solid var(--bd-1); padding-top: 10px; margin-top: 4px; }
.autopilot-status-pill {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
  margin-left: 4px; vertical-align: middle;
}
.autopilot-status-pill.pill-on  { background: rgba(234,179,8,.18); color: #eab308; border: 1px solid rgba(234,179,8,.35); }
.autopilot-status-pill.pill-off { background: var(--bg-3); color: var(--tx-3); border: 1px solid var(--bd-1); }

/* ─────────────────────────────────────────────────────────────────────────────
   DASHBOARD — independent header + KPIs
───────────────────────────────────────────────────────────────────────────── */

/* Header block */
.dash-header {
  padding: var(--sp-md) var(--sp-md) 0;
}
.dash-controls {
  display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap;
}

/* Date range */
.dash-dates {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dash-date-input {
  width: 128px; flex-shrink: 0; height: 34px;
  font-size: 12px;
}
.dash-date-sep {
  color: var(--tx-3); font-size: 12px; flex-shrink: 0;
}
.dash-date-presets {
  display: flex; gap: 4px;
}
.dash-preset-btn {
  font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--bd-2);
  background: transparent; color: var(--tx-3);
  cursor: pointer; border-radius: var(--r-xs);
  transition: background .12s, color .12s, border-color .12s;
}
.dash-preset-btn:hover    { background: var(--ac-dim); color: var(--ac-1); border-color: var(--ac-1); }
.dash-preset-btn.active   { background: var(--ac-s-dim); color: var(--ac-s); border-color: var(--ac-s); }

/* Load button */
.dash-load-btn {
  height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}

/* KPI row */
.dash-kpis {
  display: flex; gap: var(--sp-sm); flex-wrap: wrap;
  padding: var(--sp-md) var(--sp-md) 0;
}
.dash-kpi {
  flex: 1; min-width: 90px;
  background: var(--bg-2);
  border: 1px solid var(--bd-1);
  border-radius: var(--r-card);
  padding: 12px 16px;
  text-align: center;
  transition: border-color .15s;
}
.dash-kpi:hover { border-color: var(--bd-2); }
.dash-kpi-accent {
  border-color: rgba(34,197,94,.3);
  background: rgba(34,197,94,.06);
}
.dash-kpi-val {
  font-size: 22px; font-weight: 700;
  color: var(--tx-1);
  font-family: var(--font-mono);
  line-height: 1.2;
}
.dash-kpi-accent .dash-kpi-val { color: #22c55e; }
.dash-kpi-lbl {
  font-size: 10px; font-weight: 600;
  color: var(--tx-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 4px;
}

/* Campaign chart card — full width above GEO donut */
.dash-camp-card {
  margin: var(--sp-md) var(--sp-md) 0;
}
.dash-camp-body {
  height: 340px; /* taller than the default 280px for campaign list */
}

/* GEO charts wrapper — below campaign chart */
.dash-charts {
  padding-bottom: var(--sp-md);
}

/* Flow ID badge next to offer name */
.flow-id-badge {
  display: inline-block;
  font-size: 10px;
  font-family: var(--ff-mono, monospace);
  color: var(--tx-3, #6e7681);
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Mixed filter warning */
.stream-card-warning {
  border-color: #e3b341 !important;
  opacity: 0.85;
}
.mixed-filter-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(227, 179, 65, .08);
  border-radius: 8px;
  color: #e3b341;
  font-size: 13px;
  line-height: 1.5;
}
.mixed-filter-warning .warning-icon {
  font-size: 24px;
  flex-shrink: 0;
}

/* Logs modal */
.modal-logs { max-width: 1200px; width: 95vw; max-height: 90vh; }
.modal-logs .modal-body { padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }

/* Filter bar */
.logs-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 0;
}
.log-filter-input {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; color: var(--tx-1, #c9d1d9); padding: 4px 8px;
  font-size: 12px; min-width: 100px;
}
.log-filter-input:focus { border-color: var(--ac-1, #4d94ff); outline: none; }
.log-filter-sm { min-width: 80px; max-width: 140px; }
select.log-filter-input { min-width: 90px; }
.log-auto-refresh-label { font-size: 11px; color: var(--tx-3); display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* Stats line */
.log-stats { font-size: 11px; color: var(--tx-3); }
.log-stats .stat-errors { color: #f85149; font-weight: 600; }

/* Table */
.logs-table-wrap {
  flex: 1; overflow-y: auto; max-height: 55vh;
  background: rgba(0,0,0,.3); border-radius: 8px;
}
.logs-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ff-mono, 'JetBrains Mono', monospace); font-size: 11px;
}
.logs-table thead { position: sticky; top: 0; z-index: 1; }
.logs-table th {
  background: rgba(30,30,40,.95); color: var(--tx-3); font-weight: 500;
  text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
}
.logs-table td {
  padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.04);
  max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tx-1, #c9d1d9);
}
.logs-table tr { cursor: pointer; transition: background .1s; }
.logs-table tr:hover { background: rgba(255,255,255,.04); }
.logs-table .log-time-cell { color: var(--tx-3); white-space: nowrap; }
.logs-table .log-level-error { color: #f85149; font-weight: 600; }
.logs-table .log-level-warn { color: #e3b341; font-weight: 600; }
.logs-table .log-level-info { color: #58a6ff; }
.logs-table .log-level-http { color: #8b949e; }
.logs-table .log-level-debug { color: #6e7681; }
.logs-table .log-label-cell { color: #e3b341; }
.logs-table .log-status-ok { color: #3fb950; }
.logs-table .log-status-err { color: #f85149; }
.logs-table .log-dur-slow { color: #e3b341; }
.logs-table .log-camp-cell { color: #a5d6ff; max-width: 140px; }
.logs-table .log-web-cell { color: #d2a8ff; max-width: 140px; }
.log-id-badge { font-size: 9px; color: var(--tx-3); opacity: .7; }
.log-rt-incoming { color: #58a6ff; font-weight: 600; font-size: 10px; }
.log-rt-internal { color: #d2a8ff; font-weight: 600; font-size: 10px; }

/* Expanded detail row */
.log-detail-row td {
  padding: 8px 12px; background: rgba(0,0,0,.25);
  white-space: pre-wrap; word-break: break-all; font-size: 11px;
  color: var(--tx-2, #8b949e); max-width: none;
}
.log-detail-field { margin-bottom: 6px; }
.log-detail-label { color: #58a6ff; font-weight: 600; font-size: 11px; margin-right: 4px; }
.log-detail-pre {
  display: inline-block; margin: 2px 0 0 0; padding: 4px 8px;
  background: rgba(0,0,0,.3); border-radius: 4px; font-size: 11px;
  max-height: 200px; overflow: auto; width: 100%; white-space: pre-wrap; word-break: break-all;
}

/* Pagination */
.logs-pagination {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 8px 0; font-size: 12px; color: var(--tx-3);
}

/* Keep old tab style for backward compat */
.log-tab { transition: all .15s; }
.log-tab.active { background: var(--ac-1, #4d94ff); color: #fff; }

/* ── Market tab ─────────────────────────────────────────────────────────── */
.market-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:16px}
.market-controls label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--tx-3)}
.market-controls input{width:110px;padding:6px 8px;border-radius:6px;
  border:1px solid var(--bd-1);background:var(--bg-2);color:var(--tx-1);font-size:13px}
.market-meta{font-size:11px;color:var(--tx-3);flex:1 1 100%}
.market-section{margin-bottom:22px}
.market-h{font-size:14px;margin:0 0 8px;color:var(--tx-1)}
.market-hint{font-size:11px;font-weight:400;color:var(--tx-3);margin-left:6px}
.market-empty{text-align:center;color:var(--tx-3);padding:14px}
#mk-changes tr.mk-drop .mk-delta{color:#ef4444;font-weight:700}
#mk-changes tr.mk-rise .mk-delta{color:#22c55e;font-weight:700}