/* ════════════════════════════════════════════════════════════════
   Watch-Tower — Premium Design Tokens  [2026-06-27]
   Loaded AFTER the app's inline :root so these override cleanly.
   Non-breaking: we only re-point existing variables + add new ones.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand: blue accent → Watch-Tower indigo ── */
  --accent:    #4F46E5;   /* indigo — primary */
  --accent-h:  #4338CA;   /* hover/pressed */
  --accent-l:  rgba(79,70,229,0.08);
  --accent-m:  rgba(79,70,229,0.15);
  --c-acc:     #4F46E5;

  /* ── Beacon accent (signal / amber) — use sparingly ── */
  --beacon:    #F59E0B;
  --beacon-h:  #D97706;
  --beacon-l:  rgba(245,158,11,0.10);
  --beacon-soft:#FEF3C7;
  --beacon-text:#92400E;

  /* ── Neutrals: Apple-calm slate ── */
  --bg:        #F8FAFC;
  --bg2:       #F1F5F9;
  --surface:   #FFFFFF;
  --surface2:  #F8FAFC;
  --border:    #ECECEC;
  --border2:   #E2E8F0;
  --text:      #0F172A;
  --text2:     #475569;
  --text3:     #64748B;
  --muted:     #94A3B8;

  /* ── Radius: a touch larger = premium ── */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* ── Shadows: soft, layered (Apple depth) ── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-md: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.05);
  --shadow-lg: 0 2px 4px rgba(15,23,42,0.04), 0 16px 40px rgba(15,23,42,0.07);

  /* ── Motion ── */
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --t-fast: 140ms var(--ease);
  --t-med:  200ms var(--ease);

  /* ── Type ── */
  --font: 'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Apply premium font globally ── */
body, button, input, select, textarea{
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings: Inter Tight, tight tracking, near-black ── */
h1,h2,h3{ font-family:var(--font); color:var(--text); letter-spacing:-0.5px; }
h1{ letter-spacing:-1px; font-weight:600; }
h2{ letter-spacing:-0.6px; font-weight:600; }

/* ── Cards: softer, premium depth + hover lift ── */
.card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.card:hover{ box-shadow: var(--shadow-md); }

/* ── Primary buttons: indigo, press-scale ── */
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover{ background: var(--accent-h); }
.btn:active{ transform: scale(0.98); }

/* ── Inputs: indigo focus ring ── */
input:focus, select:focus, textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-l) !important;
  outline: none;
}

/* ── Beam divider (signal-themed) ── */
.wt-beam{
  height:1px; border:none;
  background: linear-gradient(90deg, transparent, rgba(79,70,229,0.25), transparent);
  margin: 24px 0;
}

/* ════════════════════════════════════════════════════════════════
   Watch-Tower signature animations
   ════════════════════════════════════════════════════════════════ */

/* Beacon pulse — for logo light + new-data ping */
@keyframes wt-beacon-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.5; }
}
.wt-beacon{ animation: wt-beacon-pulse 2.2s var(--ease) infinite; }

/* Signal arcs fade outward */
@keyframes wt-signal-1{ 0%,100%{opacity:.2} 50%{opacity:.9} }
@keyframes wt-signal-2{ 0%,100%{opacity:.1} 50%{opacity:.55} }
.wt-sig-1{ animation: wt-signal-1 2.2s var(--ease) infinite; }
.wt-sig-2{ animation: wt-signal-2 2.2s var(--ease) 0.4s infinite; }

/* Radar sweep loader */
@keyframes wt-radar-spin{ to{ transform: rotate(360deg); } }
.wt-radar{ width:48px; height:48px; position:relative; }
.wt-radar::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent-l);
}
.wt-radar::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--accent-l) 300deg, var(--accent) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%);
          mask: radial-gradient(circle, transparent 38%, #000 40%);
  animation: wt-radar-spin 1.1s linear infinite;
}

/* New-data signal ping (amber radar contact) */
@keyframes wt-ping{
  0%{ transform:scale(0.6); opacity:0.9; }
  70%,100%{ transform:scale(2.2); opacity:0; }
}
.wt-ping{ position:relative; }
.wt-ping::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background: var(--beacon); animation: wt-ping 1.6s var(--ease) infinite;
}

/* Card entrance (subtle rise) */
@keyframes wt-rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.wt-rise{ animation: wt-rise 320ms var(--ease) both; }
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — Live Feed PREMIUM restyle  [2026-06-27]
   Restyle-in-place: targets existing classes, zero markup/JS change.
   Matches the design handoff (premium sidebar, nav, KPI, cards).
   ════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR: white, clean, premium ── */
.sidebar{ background:#fff !important; border-right:1px solid var(--border) !important; }
.sidebar-logo{ border-bottom:none !important; padding:22px 18px 14px !important; }
.sidebar-logo h2{ font-family:var(--font); font-weight:600 !important; letter-spacing:-0.5px !important; font-size:15px !important; }
.sidebar-logo p{ font-weight:600 !important; letter-spacing:1.2px !important; color:var(--muted) !important; }

/* nav section labels */
.nav-section{ font-weight:600 !important; letter-spacing:1.1px !important; color:var(--muted) !important; padding:16px 10px 6px !important; }
.nav-section:first-child{ padding-top:6px !important; }

/* nav items: rounded, calm */
.nav-item{ border-radius:10px !important; padding:9px 11px !important; color:var(--text2) !important;
  font-weight:500 !important; gap:11px !important; margin-bottom:1px; }
.nav-item:hover{ background:var(--bg) !important; color:var(--text) !important; }

/* ACTIVE nav item: premium indigo pill with soft shadow (replaces inset-bar) */
.nav-item.active{ background:var(--accent) !important; color:#fff !important; font-weight:600 !important;
  box-shadow:0 2px 8px rgba(79,70,229,.28) !important; }
.nav-item.active .ni svg{ stroke:#fff !important; }
.nav-item .ni svg{ stroke:var(--muted); }
.nav-item:hover .ni svg{ stroke:var(--accent); }

/* sidebar user footer */
.sidebar-user{ border-top:1px solid var(--border) !important; }

/* ── TOPBAR: cleaner ── */
.topbar{ background:rgba(255,255,255,0.85) !important; -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); }
.topbar-title h1{ font-family:var(--font); font-weight:600 !important; letter-spacing:-0.5px !important; font-size:20px !important; }
.topbar-title .breadcrumb{ color:var(--text3) !important; }

/* ── KPI / STAT row: softer, premium ── */
.kpi-card{ border-radius:14px !important; box-shadow:var(--shadow) !important; border:1px solid var(--border) !important; }
.kpi-card:hover{ box-shadow:var(--shadow-md) !important; transform:translateY(-1px); }
.kpi-accent{ display:none !important; }   /* drop the top color bar — calmer */
.kpi-label{ font-weight:600 !important; letter-spacing:.5px !important; color:var(--text3) !important; }
.kpi-val{ font-family:var(--font); font-weight:600 !important; letter-spacing:-1px !important; }
.kpi-ico{ border-radius:9px !important; }

/* ── FILTER pills (dropdowns) ── */
.cb-select{ border-radius:10px !important; border:1px solid var(--border) !important; font-weight:500 !important; }
.cb-select:hover{ border-color:var(--border2) !important; }

/* ── MENTION CARDS: premium soft ── */
.tweet-item{ border-radius:14px !important; border:1px solid var(--border) !important;
  box-shadow:var(--shadow-sm) !important; transition:box-shadow var(--t-med), transform var(--t-med); }
.tweet-item:hover{ box-shadow:var(--shadow) !important; }

/* sentiment pills: rounder, calmer */
.sent-pill{ border-radius:8px !important; font-weight:600 !important; }

/* AI insight box (the highlighted reason row) — soft indigo tint */
.t-client-reason{ border-radius:9px !important; }

/* card headers */
.card{ border-radius:16px !important; }
.card-head h3{ font-family:var(--font); font-weight:600 !important; letter-spacing:-0.4px !important; }

/* buttons in topbar (Fetch Now etc) — premium */
.topbar .btn-primary{ border-radius:10px !important; font-weight:600 !important; box-shadow:0 2px 8px rgba(79,70,229,.24) !important; }

/* avatars — consistent rounding */
.t-ava{ border-radius:10px !important; }
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — Live Feed FILTER ROW premium (design-accurate)
   Turns the compact <select> dropdowns into design-handoff pills:
   38px tall, 11px radius, white, hairline border, indigo hover.
   Pure CSS — selects stay functional (onchange handlers intact).
   ════════════════════════════════════════════════════════════════ */

/* the filter row container */
.filter-row{ gap:10px !important; align-items:center !important; }

/* the small "Source"/"Sentiment" text labels → design's muted inline label */
.filter-row > .filter-label{
  font:600 12px var(--font) !important; color:var(--muted) !important;
  letter-spacing:0 !important; text-transform:none !important; margin:0 !important;
}

/* the dropdown selects → premium pills (override cb-compact tiny sizing) */
.filter-row .cb-select.cb-compact,
.filter-row .cb-select{
  height:38px !important;
  padding:0 34px 0 14px !important;     /* room for the chevron */
  max-width:none !important; width:auto !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:11px !important;
  font:500 13px var(--font) !important;
  color:var(--text) !important;
  cursor:pointer;
  /* custom chevron */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  transition:border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.filter-row .cb-select:hover{ border-color:#C7D2FE !important; }
.filter-row .cb-select:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-l) !important; }

/* separators between groups → subtle */
.filter-sep{ width:1px !important; height:22px !important; background:var(--border) !important; margin:0 2px !important; }

/* ── SOURCE PICKER (the checkbox source toggles row) — premium chips ── */
[id^="srcToggle"]{
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  padding:7px 13px !important;
  font:600 12px var(--font) !important;
  color:var(--text2) !important;
  background:#fff !important;
  transition:border-color var(--t-fast), background var(--t-fast) !important;
}
[id^="srcToggle"]:hover{ border-color:#C7D2FE !important; background:var(--accent-l) !important; }
/* checked source chip → soft indigo */
[id^="srcToggle"]:has(input:checked){
  background:var(--accent-l) !important;
  border-color:#C7D2FE !important;
  color:var(--accent-h) !important;
}
.filter-row > .filter-label:first-child,
#sourcesFilterRow .filter-label{
  font:600 12px var(--font) !important; color:var(--muted) !important; text-transform:none !important; letter-spacing:0 !important;
}
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — Live Feed FULL premium (design-handoff accurate)
   Mention cards, KPI cards, AI-insight box, sentiment/tag badges,
   engagement row, Open pill, feed header. Pure CSS, JS intact.
   ════════════════════════════════════════════════════════════════ */

/* ── KPI / STAT CARDS — design: clean white, compact, big number ── */
.kpi-row{ gap:12px !important; }
.kpi-card{ padding:16px 18px !important; border-radius:14px !important; }
.kpi-label{ font:600 10px var(--font) !important; letter-spacing:.7px !important; color:var(--muted) !important; text-transform:uppercase !important; }
.kpi-val{ font:600 28px var(--font) !important; letter-spacing:-1.2px !important; }
.kpi-ico{ width:30px !important; height:30px !important; border-radius:9px !important; }
/* sub-label under number (e.g. "71% of total") → muted */
.kpi-card .kpi-sub, .kpi-card small{ color:var(--muted) !important; font-weight:500 !important; }

/* ── FEED HEADER ── */
.feed-head h3{ font:600 16px var(--font) !important; letter-spacing:-0.4px !important; }
.feed-badge{ background:var(--accent-l) !important; color:var(--accent-h) !important;
  font:600 11px var(--font) !important; border-radius:8px !important; padding:3px 9px !important; }

/* ── MENTION CARD (design-exact) ── */
.tweet-item{
  background:#fff !important; border:1px solid var(--border) !important;
  border-radius:16px !important; padding:15px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  transition:box-shadow var(--t-med), transform var(--t-med) !important;
}
.tweet-item:hover{ box-shadow:var(--shadow) !important; transform:translateY(-1px); }

/* avatar → rounded-square indigo tile */
.tweet-item .t-ava{
  width:36px !important; height:36px !important; border-radius:11px !important;
  background:var(--accent-l) !important; color:var(--accent) !important;
  font:600 14px var(--font) !important;
}
.tweet-item .t-ava img{ border-radius:11px !important; }

/* name + handle */
.tweet-item .t-name{ font:600 13px var(--font) !important; color:var(--text) !important; }
.tweet-item .t-handle{ font:400 11px var(--font) !important; color:var(--muted) !important; }
.tweet-item .t-top{ gap:7px !important; }

/* sentiment + tag badges → design (soft tints, 7px radius, tiny caps) */
.tweet-item .sent-pill{
  font:600 9px var(--font) !important; padding:3px 8px !important; border-radius:7px !important;
  letter-spacing:.3px !important; text-transform:uppercase !important;
}
.tweet-item .sent-pill.pos, .sent-pill[class*="pos"]{ background:#F0FDF4 !important; color:#15803D !important; }
.tweet-item .sent-pill.neg, .sent-pill[class*="neg"]{ background:#FEF2F2 !important; color:#B91C1C !important; }
.tweet-item .sent-pill.neu, .sent-pill[class*="neu"]{ background:#F1F5F9 !important; color:#475569 !important; }

/* body text */
.tweet-item .t-text{ font:400 13px/1.5 var(--font) !important; color:#334155 !important; margin-top:10px !important; }

/* AI insight box → soft indigo-tint, rounded */
.tweet-item .t-client-reason{
  font:400 11px var(--font) !important; color:#475569 !important;
  background:#F8FAFF !important; border-left:2px solid var(--accent) !important;
  border-radius:9px !important; padding:8px 11px !important; margin-top:10px !important;
}

/* engagement metric row */
.tweet-item .t-meta{ margin-top:12px !important; gap:14px !important; color:var(--muted) !important; }
.tweet-item .t-metric{ font:500 11px var(--font) !important; color:var(--muted) !important; gap:5px !important; }

/* action icons → calm, rounded */
.tweet-item .t-action-icon{ border-radius:8px !important; color:var(--muted) !important; }
.tweet-item .t-action-icon:hover{ background:var(--bg) !important; }

/* "Open link" → indigo-tint pill (design) */
.tweet-item a[onclick*="open"], .tweet-item .t-open, .tweet-item a[href*="x.com"], .tweet-item a[title*="Open"]{
  color:var(--accent) !important;
}

/* ── RIGHT PANEL cards (Top Topics, Spike, Sentiment Breakdown) ── */
.card{ border-radius:16px !important; box-shadow:var(--shadow) !important; }
.card-head h3, .card h3{ font:600 15px var(--font) !important; letter-spacing:-0.3px !important; }

/* AI Insight banner → premium */
#aiInsightCard, .ai-insight-card{ border-radius:14px !important; }
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — STAT ROW → design strip [2026-06-27]
   6 big KPI cards → one thin horizontal strip (design-handoff).
   IDs untouched (JS keeps updating values). Same 6 stats = same feature.
   ════════════════════════════════════════════════════════════════ */

/* the row becomes ONE white strip-card */
.kpi-row{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:stretch !important;
  gap:0 !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow) !important;
  padding:0 6px !important;
  margin-bottom:18px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto;
}

/* each card → inline cell, no card chrome */
.kpi-row .kpi-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:14px 20px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:9px !important;
  flex:0 0 auto !important;
  position:relative;
}
.kpi-row .kpi-card:hover{ transform:none !important; box-shadow:none !important; }

/* divider between cells */
.kpi-row .kpi-card + .kpi-card::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px;
  width:1px; background:#F1F5F9;
}

/* hide the chrome we don't want in a strip */
.kpi-row .kpi-accent,
.kpi-row .kpi-ico,
.kpi-row .kpi-bar,
.kpi-row .kpi-sub{ display:none !important; }

/* the top wrap (label+icon) → just the label inline */
.kpi-row .kpi-top{ margin:0 !important; display:contents !important; }

/* label: small caps, before the number */
.kpi-row .kpi-label{
  order:1;
  font:600 10px var(--font) !important; letter-spacing:.8px !important;
  color:var(--muted) !important; text-transform:uppercase !important;
}

/* value: the big colored number, inline */
.kpi-row .kpi-val{
  order:2; margin:0 !important;
  font:600 19px var(--font) !important; letter-spacing:-0.8px !important; line-height:1 !important;
}

/* colored dot before sentiment cells (design has dots on pos/neg/neu) */
.kpi-row .kpi-card.c-green .kpi-label::before,
.kpi-row .kpi-card.c-red .kpi-label::before,
.kpi-row .kpi-card.c-yellow .kpi-label::before{
  content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:7px; vertical-align:middle;
}
.kpi-row .kpi-card.c-green .kpi-label::before{ background:var(--green); }
.kpi-row .kpi-card.c-red .kpi-label::before{ background:var(--red); }
.kpi-row .kpi-card.c-yellow .kpi-label::before{ background:#94A3B8; }

/* keep value colors from existing c-* classes (already set), just ensure avg/accuracy slate */
.kpi-row .kpi-card.c-teal .kpi-val{ color:var(--text) !important; font-size:19px !important; }
.kpi-row .kpi-card:last-child .kpi-val{ font-size:19px !important; }

/* AI Accuracy cell → push to the right like the design's amber chip area */
.kpi-row .kpi-card:last-child{ margin-left:auto !important; }

/* [WT-Design 2026-06-27] top filter bar (moved above stats) */
.wt-filter-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:16px; padding:0;
}
.wt-filter-bar #sourcesFilterRow{ margin:0 !important; padding:0 !important; border:none !important; }
.wt-filter-bar #mainFilterRow{ margin:0 !important; }
.wt-filter-bar .filter-row{ margin:0 !important; }

/* [WT-Design 2026-06-27] Section 3: layout — left feed wide, right chart+topics narrow */
.dash-layout{ grid-template-columns: 1.7fr 400px !important; gap:20px !important; }
/* chart now lives in right column — make it fit the narrower width nicely */
.dash-layout > div:last-child #dashGraphCard{ margin-bottom:14px !important; }

/* Section 4: mention card — design exact */
.feed-card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.feed-head{ padding:0 0 14px 0 !important; }
.feed-head h3{ font:600 16px var(--font) !important; letter-spacing:-0.5px !important; }
#tweetsList{ display:flex !important; flex-direction:column !important; gap:14px !important; padding:0 !important; }
.tweet-item{ padding:18px !important; border-radius:16px !important; }
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — INFLUENCERS premium (design-handoff) [2026-06-27]
   Tabs, Classify button, ranked rows, sentiment bar, clean columns.
   ════════════════════════════════════════════════════════════════ */

/* page title premium */
#page-influencers .topbar-title h1{ font:600 21px var(--font) !important; letter-spacing:-0.7px !important; }

/* tabs → design segmented pills */
.inf-tabs{
  background:#F8FAFC !important; border:1px solid var(--border) !important;
  border-radius:11px !important; padding:5px !important; gap:5px !important; margin:14px 0 16px !important;
}
.inf-tab{
  border-radius:8px !important; font:600 13px var(--font) !important; color:#64748B !important;
  padding:9px 14px !important; transition:all var(--t-fast) !important;
}
.inf-tab:hover{ color:var(--text) !important; background:#fff !important; }
.inf-tab.active{
  background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important;
  box-shadow:0 2px 8px rgba(79,70,229,.28) !important;
}

/* Classify with AI button → design indigo */
#infClassifyBtn{
  background:var(--accent) !important; color:#fff !important; border:none !important;
  border-radius:11px !important; font:600 13px var(--font) !important;
  box-shadow:0 2px 10px rgba(79,70,229,.3) !important; padding:0 16px !important; height:38px !important;
}
#infClassifyBtn:hover{ background:var(--accent-h) !important; }

/* search + min-followers filter inputs → design pills */
#infSearchBox{ border-radius:10px !important; height:38px !important; border:1px solid var(--border) !important; background:#F8FAFC !important; }
#infSearchBox:focus{ background:#fff !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-l) !important; }
#infMinFollowers{ border-radius:10px !important; height:38px !important; }
#infCategoryFilter, #infIdeologyFilter{ border-radius:10px !important; height:38px !important; }

/* the table → design ranked rows */
#influencersTable table{ border-collapse:separate !important; border-spacing:0 8px !important; width:100% !important; }
#influencersTable thead th{
  font:600 10px var(--font) !important; letter-spacing:.7px !important; text-transform:uppercase !important;
  color:var(--muted) !important; border:none !important; padding:4px 14px !important; background:transparent !important;
}
#influencersTable tbody tr{
  background:#fff !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  transition:box-shadow var(--t-fast), transform var(--t-fast) !important;
}
#influencersTable tbody tr:hover{ box-shadow:var(--shadow) !important; transform:translateY(-1px); }
#influencersTable tbody td{
  border:none !important; padding:13px 14px !important; vertical-align:middle !important;
  font:500 13px var(--font) !important; color:var(--text) !important;
}
/* round the row corners (first/last cell) */
#influencersTable tbody td:first-child{ border-radius:12px 0 0 12px !important; }
#influencersTable tbody td:last-child{ border-radius:0 12px 12px 0 !important; }

/* rank chip → design */
.inf-rank{
  width:26px !important; height:26px !important; border-radius:8px !important;
  font:600 12px var(--font) !important;
}
.inf-rank.top1{ background:#FEF3C7 !important; color:#92400E !important; }
.inf-rank.top2{ background:#F1F5F9 !important; color:#475569 !important; }
.inf-rank.top3{ background:#FEF2F2 !important; color:#991B1B !important; }

/* account avatar in row → rounded indigo tile */
#influencersTable .t-ava, #influencersTable td img{ border-radius:9px !important; }

/* type/leaning chips already styled inline — keep */

/* sentiment-mix bar → design rounded */
#influencersTable .sent-bar{ border-radius:6px !important; overflow:hidden !important; height:6px !important; }
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — remaining screens premium [2026-06-27]
   Radar, Notifications, Activity Log, Reports, Settings.
   ════════════════════════════════════════════════════════════════ */

/* page titles everywhere → premium */
.page .topbar-title h1{ font:600 21px var(--font) !important; letter-spacing:-0.7px !important; }
.page .topbar-title .breadcrumb{ color:var(--text3) !important; }

/* ── RADAR: velocity cards (design: rounded, sentiment edge, NOTIFIED badge) ── */
.vel-card{
  border-radius:16px !important; padding:16px 16px 16px 18px !important;
  border:1px solid var(--border) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  transition:box-shadow var(--t-med), transform var(--t-med) !important;
}
.vel-card:hover{ box-shadow:var(--shadow) !important; transform:translateY(-1px); }
.vel-card.sent-pos{ --vel-edge:#16A34A; }
.vel-card.sent-neg{ --vel-edge:#DC2626; }
.vel-card.sent-neu{ --vel-edge:#F59E0B; }
.vel-card .t-ava{ border-radius:10px !important; }
/* NOTIFIED / velocity badges */
.vel-card .sent-pill, .vel-card [class*="badge"]{ border-radius:8px !important; font-weight:600 !important; }

/* ── NOTIFICATIONS: channel cards + trigger rules (design) ── */
.notif-chan-grid > .card, .notif-trigger-grid > div{
  border-radius:16px !important; box-shadow:var(--shadow) !important; border:1px solid var(--border) !important;
}
.notif-chan-grid .card-head h3, .notif-trigger-grid h3{ font:600 15px var(--font) !important; letter-spacing:-0.3px !important; }
/* channel icon tiles */
.notif-chan-grid .card-head [class*="ico"], .notif-chan-grid svg{ border-radius:9px !important; }

/* ── ACTIVITY LOG / data tables (design: clean rows) ── */
.data-table{ border-collapse:separate !important; border-spacing:0 !important; width:100% !important; }
.data-table thead th{
  font:600 10px var(--font) !important; letter-spacing:.7px !important; text-transform:uppercase !important;
  color:var(--muted) !important; border:none !important; border-bottom:1px solid var(--border) !important;
  padding:10px 14px !important; background:transparent !important; text-align:left !important;
}
.data-table tbody td{
  border:none !important; border-bottom:1px solid var(--border) !important;
  padding:13px 14px !important; font:400 13px var(--font) !important; color:var(--text2) !important;
  vertical-align:middle !important;
}
.data-table tbody tr:hover{ background:#F8FAFC !important; }
.data-table tbody tr:last-child td{ border-bottom:none !important; }

/* ── REPORTS / SETTINGS: cards + forms premium ── */
#page-reports .card, #page-reports .feed-card, #page-reports .panel-card,
#page-settings .card, #page-settings .panel-card{
  border-radius:16px !important; box-shadow:var(--shadow) !important; border:1px solid var(--border) !important;
}
#page-reports h3, #page-settings h3, #page-activitylog h3{ font:600 15px var(--font) !important; letter-spacing:-0.3px !important; }

/* generic cards across all pages */
.page .card, .page .panel-card, .page .feed-card{ border-radius:16px !important; }

/* buttons everywhere — premium */
.page .btn-primary{ border-radius:10px !important; font-weight:600 !important;
  box-shadow:0 2px 8px rgba(79,70,229,.22) !important; }
.page .btn-secondary, .page .btn-ghost{ border-radius:10px !important; }

/* badges/pills everywhere → softer radius */
.page .sent-pill, .page .badge{ border-radius:8px !important; }

/* segmented tabs anywhere (voices-tabs etc) */
.voices-tabs{ background:#F8FAFC !important; border:1px solid var(--border) !important; border-radius:11px !important; padding:5px !important; }
.voices-tab.active, .voices-tabs .active{ background:var(--accent) !important; color:#fff !important; border-radius:8px !important; box-shadow:0 2px 8px rgba(79,70,229,.28) !important; }

/* [WT-Design 2026-06-27] mobile responsive polish for new layout */
@media (max-width: 900px){
  /* stat strip → horizontal scroll on mobile */
  .kpi-row{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .kpi-row .kpi-card{ flex:0 0 auto !important; }
  .kpi-row .kpi-card:last-child{ margin-left:0 !important; }
  /* filter bar wraps */
  .wt-filter-bar{ gap:8px !important; }
  .wt-filter-bar .filter-row{ flex-wrap:wrap !important; }
  /* layout: single column — chart/topics stack below feed */
  .dash-layout{ grid-template-columns:1fr !important; }
  /* mention card media → full width below text on mobile */
  .tweet-item{ padding:14px !important; }
}
@media (max-width: 560px){
  .page .topbar-title h1{ font-size:18px !important; }
  .kpi-row .kpi-card{ padding:12px 14px !important; }
  .inf-tabs{ overflow-x:auto !important; }
}
/* ════════════════════════════════════════════════════════════════
   Watch-Tower — MOBILE design-accurate [2026-06-27]
   Matches the design-handoff mobile mockups: compact top bar,
   scroll tabs (no stretch), tidy filters, readable lists.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){

  /* ── TOP BAR: compact, title left ── */
  .topbar{ height:auto !important; padding:12px 16px !important; flex-wrap:wrap !important; gap:8px !important; }
  .page .topbar-title h1{ font-size:18px !important; letter-spacing:-0.5px !important; }
  .topbar-actions{ gap:6px !important; flex-wrap:wrap !important; }
  .topbar-actions .btn{ height:34px !important; padding:0 12px !important; font-size:12px !important; }

  /* ── FILTER BAR: tidy, wrap into compact rows ── */
  .wt-filter-bar{ gap:8px !important; margin-bottom:12px !important; }
  .wt-filter-bar #sourcesFilterRow{ display:none !important; }  /* source chips hidden on mobile; dropdown covers it */
  .wt-filter-bar #mainFilterRow{ flex-wrap:wrap !important; gap:8px !important; width:100%; }
  .wt-filter-bar .cb-select{ flex:1 1 auto !important; min-width:0 !important; }

  /* ── STAT STRIP: horizontal scroll, compact ── */
  .kpi-row{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; padding:0 4px !important; }
  .kpi-row::-webkit-scrollbar{ display:none; }
  .kpi-row .kpi-card{ flex:0 0 auto !important; padding:11px 14px !important; }
  .kpi-row .kpi-card:last-child{ margin-left:0 !important; }

  /* ── LAYOUT: single column ── */
  .dash-layout{ grid-template-columns:1fr !important; gap:14px !important; }

  /* ── INFLUENCERS mobile: fix overlap + scroll tabs ── */
  /* tabs row: horizontal scroll, NO stretch */
  .inf-tabs{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; flex-wrap:nowrap !important;
    padding:5px !important; margin:12px 0 14px !important; }
  .inf-tabs::-webkit-scrollbar{ display:none; }
  .inf-tab{ flex:0 0 auto !important; white-space:nowrap !important; min-width:auto !important; padding:8px 13px !important; }
  /* the Classify/Export buttons live in topbar-actions — keep them compact, not overlapping tabs */
  #infClassifyBtn{ height:34px !important; font-size:12px !important; padding:0 12px !important; }

  /* influencer filters: stack tidily */
  #page-influencers .content > div, #page-influencers [style*="display:flex"]{ flex-wrap:wrap !important; }
  #infSearchBox{ width:100% !important; }

  /* table → readable: hide low-priority columns on mobile (Type/Leaning), keep key ones */
  #influencersTable thead th:nth-child(3), #influencersTable tbody td:nth-child(3),  /* Type */
  #influencersTable thead th:nth-child(4), #influencersTable tbody td:nth-child(4){  /* Leaning */
    display:none !important;
  }
  #influencersTable table{ font-size:12px !important; }
  #influencersTable tbody td{ padding:10px 8px !important; }

  /* ── MENTION / VELOCITY cards: full width, media below ── */
  .tweet-item, .vel-card{ padding:14px !important; }
  .tweet-item .tw-media, .vel-card .tw-media{ width:100% !important; max-width:100% !important; }
  .tweet-item .tw-media img, .vel-card .tw-media img{ width:100% !important; height:auto !important; }

  /* ── DATA TABLES (Activity Log): horizontal scroll wrapper ── */
  #page-activitylog, #page-reports{ overflow-x:hidden !important; }
  .data-table{ font-size:12px !important; }
  .data-table thead th, .data-table tbody td{ padding:10px 8px !important; white-space:nowrap !important; }

  /* ── NOTIFICATIONS: channel cards stack ── */
  .notif-chan-grid{ grid-template-columns:1fr !important; }
  .notif-trigger-grid{ grid-template-columns:1fr !important; }

  /* ── cards full width ── */
  .card, .panel-card, .feed-card{ border-radius:14px !important; }
}

/* very small phones */
@media (max-width: 420px){
  .page .topbar-title h1{ font-size:17px !important; }
  .kpi-row .kpi-card{ padding:10px 12px !important; }
  .kpi-row .kpi-val{ font-size:17px !important; }
}

/* [WT-Mobile-Fix 2026-06-27] Influencers topbar buttons overlap with tabs */
@media (max-width: 768px){
  /* topbar wraps cleanly, actions full row below title */
  #page-influencers .topbar{ flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  #page-influencers .topbar-title{ width:100% !important; }
  #page-influencers .topbar-actions{ width:100% !important; flex-wrap:wrap !important; gap:8px !important; justify-content:flex-start !important; }
  #page-influencers .topbar-actions .cb-select{ flex:0 0 auto !important; }
  #page-influencers .topbar-actions .btn{ flex:0 0 auto !important; }
  /* tabs sit clearly below with margin, no overlap */
  #page-influencers .inf-tabs{ margin-top:4px !important; clear:both !important; position:relative !important; z-index:1 !important; }
  /* the content area starts after topbar cleanly */
  #page-influencers .content{ padding-top:8px !important; }
}

/* [WT-Mobile-Fix 2026-06-27] Activity Log table → scroll-wrap + hide noisy Location col */
@media (max-width: 768px){
  #page-activitylog .topbar{ flex-direction:row !important; align-items:flex-start !important; }
  /* make the table area horizontally scrollable so Action/Change/Item are reachable */
  #page-activitylog .card, #page-activitylog .panel-card, #page-activitylog [class*="table-wrap"]{
    overflow-x:auto !important; -webkit-overflow-scrolling:touch;
  }
  #page-activitylog table{ min-width:560px !important; }
  /* hide Location column (3rd) on mobile — 127.0.0.1 is noise on phone */
  #page-activitylog thead th:nth-child(3), #page-activitylog tbody td:nth-child(3){ display:none !important; }
}

/* [WT-Design 2026-06-27] Settings (Edit Project) modal → design-styled (left-tab feel, eyebrow labels) */
/* section headers → design eyebrow (uppercase, tracked, muted) */
.modal .m-sec{
  font:600 10.5px "Inter Tight",Inter,sans-serif !important;
  letter-spacing:0.9px !important; text-transform:uppercase !important;
  color:#94A3B8 !important; margin:22px 0 12px !important; padding:0 !important;
  border:none !important;
}
.modal .m-sec:first-child{ margin-top:4px !important; }
/* tab bar → premium segmented */
.modal .stab-bar{
  display:flex; gap:6px; background:#F8FAFC; border:1px solid #ECECEC;
  border-radius:11px; padding:5px; margin-bottom:20px;
}
.modal .stab{
  flex:1; text-align:center; border-radius:8px !important; cursor:pointer;
  font:600 13px "Inter Tight",Inter,sans-serif !important; color:#64748B !important;
  padding:9px 14px !important; border:none !important; background:transparent !important;
  transition:all .15s ease;
}
.modal .stab:hover{ color:#0F172A !important; background:#fff !important; }
.modal .stab.active{
  background:#4F46E5 !important; color:#fff !important;
  box-shadow:0 2px 8px rgba(79,70,229,.28) !important;
}
/* inputs/textarea in modal → design radius+focus */
.modal .form-group input, .modal .form-group select, .modal .form-group textarea{
  border-radius:10px !important; border:1px solid #ECECEC !important;
}
.modal .form-group input:focus, .modal .form-group select:focus, .modal .form-group textarea:focus{
  border-color:#4F46E5 !important; box-shadow:0 0 0 3px rgba(79,70,229,.12) !important; outline:none !important;
}
.modal .form-group label{ font:500 12px "Inter Tight",Inter,sans-serif !important; color:#475569 !important; }

/* ════════════════════════════════════════════════════════════════
   [WT-Mobile-Cards 2026-06-27] Activity Log + Influencers → design CARD layout on phone
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* ── ACTIVITY LOG: table rows → stacked cards (design mobile) ── */
  #page-activitylog .card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
  #page-activitylog table, #page-activitylog thead, #page-activitylog tbody, #page-activitylog tr, #page-activitylog td{ display:block !important; width:auto !important; }
  #page-activitylog thead{ display:none !important; }           /* hide header row on mobile cards */
  #page-activitylog tr{
    background:#fff !important; border:1px solid #ECECEC !important; border-radius:14px !important;
    padding:13px 15px !important; margin-bottom:11px !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
    position:relative !important;
  }
  #page-activitylog td{ border:none !important; padding:2px 0 !important; white-space:normal !important; }
  /* When = top-right timestamp */
  #page-activitylog td:nth-child(1){ position:absolute !important; top:13px !important; right:15px !important; font-size:11px !important; color:#94A3B8 !important; }
  /* Action (with dot) = card title, first line */
  #page-activitylog td:nth-child(5){ order:-1; font-size:13.5px !important; margin-bottom:6px !important; }
  /* User row hidden on mobile (admin context not needed per-card) */
  #page-activitylog td:nth-child(2){ display:none !important; }
  /* Location hidden (noise on phone) */
  #page-activitylog td:nth-child(3){ display:none !important; }
  /* Platform chip = inline after change */
  #page-activitylog td:nth-child(4){ display:inline-block !important; margin-top:7px !important; }
  /* Change line */
  #page-activitylog td:nth-child(6){ font-size:12.5px !important; margin:2px 0 !important; }
  /* Item text */
  #page-activitylog td:nth-child(7){ max-width:100% !important; font-size:12.5px !important; color:#475569 !important; margin-top:6px !important; line-height:1.4 !important; }
  /* Link button = inline next to platform */
  #page-activitylog td:nth-child(8){ display:inline-block !important; margin-left:8px !important; }
}

/* [WT-Mobile-Cards fix 2026-06-27] override earlier min-width:560 so AL cards fit phone */
@media (max-width: 768px){
  #page-activitylog table{ min-width:0 !important; width:100% !important; }
  #page-activitylog .card{ overflow:visible !important; }
  /* timestamp visible top-right inside card */
  #page-activitylog td:nth-child(1){ position:static !important; display:block !important; order:-2; color:#94A3B8 !important; font-size:11px !important; margin-bottom:4px !important; }
  /* make tr a flex column so order: works predictably */
  #page-activitylog tr{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; }
  #page-activitylog td{ width:100% !important; }
  /* item text wrap, no clip */
  #page-activitylog td:nth-child(7){ overflow:visible !important; white-space:normal !important; text-overflow:clip !important; }
}

/* [WT-Mobile-Cards 2026-06-27] Influencers table → design ranked CARDS on phone */
@media (max-width: 768px){
  #influencersTable table{ min-width:0 !important; width:100% !important; }
  #influencersTable thead{ display:none !important; }
  #influencersTable table, #influencersTable tbody, #influencersTable tr, #influencersTable td{ display:block !important; width:auto !important; }
  #influencersTable tr{
    background:#fff !important; border:1px solid #ECECEC !important; border-radius:14px !important;
    padding:13px 15px !important; margin-bottom:11px !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
    display:grid !important; grid-template-columns:auto 1fr auto !important;
    grid-template-areas:"rank acct reach" "sent sent sent" !important;
    align-items:center !important; gap:4px 11px !important;
  }
  /* hide columns not in the mobile design card */
  #influencersTable td:not(.inf-c-rank):not(.inf-c-acct):not(.inf-c-reach):not(.inf-c-sent){ display:none !important; }
  #influencersTable td.inf-c-rank{ grid-area:rank; padding:0 !important; }
  #influencersTable td.inf-c-acct{ grid-area:acct; padding:0 !important; }
  #influencersTable td.inf-c-reach{ grid-area:reach; padding:0 !important; text-align:right !important; font-size:15px !important; font-weight:700 !important; }
  #influencersTable td.inf-c-reach::after{ content:"reach"; display:block; font-size:9.5px; font-weight:500; color:#94A3B8; text-transform:none; }
  #influencersTable td.inf-c-sent{ grid-area:sent; padding:6px 0 0 !important; }
  #influencersTable td.inf-c-sent .sent-bar{ width:100% !important; }
  /* avatar+handle bigger in card */
  #influencersTable td.inf-c-acct .t-ava, #influencersTable td.inf-c-acct img{ width:34px !important; height:34px !important; }
  #influencersTable .inf-rank{ width:24px !important; height:24px !important; }
}