:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --page: #f4f4f2;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.10);
  --gridline: #e1e0d9;
  --accent: #2a78d6;
  --accent-100: #cde2fb;
  --accent-250: #86b6ef;
  --accent-450: #2a78d6;
  --accent-600: #184f95;
  --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 8px 24px rgba(11,11,11,0.06);
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* Header */
header.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
header.top h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}
header.top p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.updated {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

/* Global search (header) */
.global-search {
  position: relative;
  flex: 1;
  max-width: 420px;
  min-width: 220px;
}
.global-search-input,
#global-search-input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text-primary);
}
#global-search-input:focus { outline: none; border-color: var(--accent); }
.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 50;
  padding: 6px 0;
}
.global-search-results[hidden] { display: none; }
.gs-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 14px 4px;
}
.gs-result {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
.gs-result:hover { background: var(--page); }
.gs-result-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.gs-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 720px) {
  .global-search { order: 3; max-width: none; flex-basis: 100%; }
}

/* Stat tiles */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.stat-tile .label {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.stat-tile .value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.stat-tile .sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.benchmark-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  margin-bottom: 40px;
  font-size: 13.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.benchmark-strip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Section heading */
.section-heading {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Agent cards */
.agents-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(11,11,11,0.06), 0 14px 32px rgba(11,11,11,0.09);
}
.agent-card .icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--accent-100);
  color: var(--accent-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.agent-card h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}
.agent-card .role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -6px;
}
.agent-card .metrics {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.agent-card .metrics b {
  color: var(--text-primary);
  font-weight: 600;
}

/* Content Creator page header (agents are now full pages, not modal cards) */
.agent-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.agent-page-head .icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent-100);
  color: var(--accent-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.agent-page-title { margin: 0; font-size: 18px; font-weight: 600; }
.agent-page-head .role { font-size: 13px; color: var(--text-muted); }
.agent-page-head .working { margin-left: auto; flex-shrink: 0; }
.agent-page-body { margin-top: 8px; }

/* Working animation */
.working {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--accent-600);
  font-weight: 500;
}
.working .dots {
  display: flex;
  gap: 3px;
}
.working .dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}
.working .dots span:nth-child(2) { animation-delay: 0.15s; }
.working .dots span:nth-child(3) { animation-delay: 0.3s; }
.working.idle .dots span { background: var(--text-muted); animation: none; opacity: 0.5; }
.working.idle { color: var(--text-muted); }

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.view-hint {
  font-size: 11.5px;
  color: var(--accent-600);
  margin-top: auto;
  font-weight: 500;
}

/* Modal / drill-down */
.overlay {
  position: fixed; inset: 0;
  background: rgba(11,11,11,0.35);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
  z-index: 50;
}
.overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(11,11,11,0.25);
  max-width: 640px;
  width: 100%;
  padding: 28px 28px 24px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.modal-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}
.modal-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.modal-close {
  border: none;
  background: var(--page);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--gridline); }

.modal-body { font-size: 13.5px; color: var(--text-primary); }
.modal-body .idea, .modal-body .hook {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.modal-body .idea h4, .modal-body .hook h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.modal-body .idea p, .modal-body .hook p { margin: 0 0 8px; color: var(--text-secondary); line-height: 1.5; }
.modal-body .source {
  font-size: 12px;
  color: var(--text-muted);
}
.modal-body .source a { color: var(--accent-600); }
.modal-body ol { margin: 8px 0 0; padding-left: 18px; color: var(--text-secondary); }
.modal-body ol li { margin-bottom: 4px; }

table.analyst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.analyst-table th, table.analyst-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gridline);
}
table.analyst-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.analyst-table td.num { font-variant-numeric: tabular-nums; }

.day-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 110px;
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--gridline);
  padding-bottom: 4px;
}
.day-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}
.day-bar {
  width: 100%;
  max-width: 22px;
  border-radius: 4px 4px 0 0;
  background: var(--accent-250);
}
.day-bar.top { background: var(--accent); }
.day-label {
  font-size: 10px;
  color: var(--text-muted);
}

.dm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--page);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
.dm-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }

/* App shell: left sidebar + main content */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.15s ease;
}
.sidebar.collapsed { width: 56px; }
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 16px;
  white-space: nowrap;
}
.sidebar-brand-text { font-weight: 600; font-size: 14.5px; }
.sidebar.collapsed .sidebar-brand-text { display: none; }
.sidebar-toggle {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--page); color: var(--text-primary); }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.main-area { flex: 1; min-width: 0; }

/* Tabs (now rendered as vertical sidebar nav items) */
.tab-bar { display: flex; flex-direction: column; gap: 2px; }
.tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
.tab-btn:hover { background: var(--page); color: var(--text-primary); }
.tab-btn.active {
  background: var(--accent-100);
  color: var(--accent-600);
}
.nav-icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 14px; }
.sidebar.collapsed .nav-label { display: none; }
.tab-btn.nav-subitem { padding-left: 30px; font-size: 13px; }

.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-group-toggle:hover { background: var(--page); color: var(--text-primary); }
.nav-caret { margin-left: auto; font-size: 10px; transition: transform 0.15s ease; flex-shrink: 0; }
.nav-group.collapsed .nav-caret { transform: rotate(-90deg); }
.nav-group-body { display: flex; flex-direction: column; gap: 2px; }
.nav-group.collapsed .nav-group-body { display: none; }
.sidebar.collapsed .nav-caret,
.sidebar.collapsed .nav-group-body { display: none; }

@media (max-width: 720px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; box-shadow: var(--shadow); }
  .sidebar:not(.collapsed) { width: 232px; }
  .sidebar.collapsed { width: 0; padding-left: 0; padding-right: 0; border-right: none; }
}

/* Shared data-table tabs (Commenters, Comments, Posts) */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.toolbar input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text-primary);
}
.toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}
.toolbar select {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text-primary);
}
.result-count {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}
table.data-table th, table.data-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: top;
}
table.data-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.data-table th:hover { color: var(--text-secondary); }
table.data-table th.sorted { color: var(--accent-600); }
table.data-table td.username { font-weight: 500; white-space: nowrap; }
table.data-table td.comment-text, table.data-table td.caption-text { max-width: 340px; }
table.data-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data-table td.muted { color: var(--text-muted); }
table.data-table a { color: var(--accent-600); }
table.data-table a.link-btn,
table.data-table button.link-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-600);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
}
table.data-table button.link-btn:hover { text-decoration: underline; }
.badge-source {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-100);
  color: var(--accent-600);
  white-space: nowrap;
}
.table-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.table-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13.5px;
}

/* DataTable engine (Posts/Comments/Commenters/Compare/Settings) */
.dt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  position: relative;
}
.dt-search, .dt-select-filter {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text-primary);
}
.dt-search { flex: 1 1 200px; min-width: 160px; }
.dt-search:focus { outline: none; border-color: var(--accent); }
.dt-quick {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text-primary);
}
.dt-quick::placeholder { color: var(--text-muted); }
.dt-quick:focus { outline: none; border-color: var(--accent); }
.dt-count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; margin-left: auto; }

.dt-columns-wrap { position: relative; }
.dt-icon-btn {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.dt-icon-btn:hover { color: var(--text-primary); }

.dt-applied {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--accent-100);
  border-radius: 8px;
  padding: 7px 12px;
  margin-bottom: 12px;
}
.dt-applied-label { font-weight: 600; color: var(--accent-600); margin-right: 4px; }
.dt-clear-btn {
  margin-left: 8px;
  border: none;
  background: none;
  color: var(--accent-600);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.sort-icon { color: var(--text-muted); font-size: 11px; margin-left: 3px; }
th.sorted .sort-icon { color: var(--accent-600); }

/* Transcript modal: icon button, timeline, ask-AI */
.transcript-open-btn { border: none; background: none; cursor: pointer; font-size: 13px; padding: 0 2px; }
.transcribe-now-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer; font-size: 11px; padding: 2px 6px; color: var(--accent-600); white-space: nowrap; }
.transcribe-now-btn:hover { background: var(--accent-100); }
.transcribe-now-btn:disabled { opacity: 0.6; cursor: default; }
.transcript-timeline { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px 0; margin-bottom: 14px; }
.transcript-seg { display: flex; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--gridline); font-size: 13px; }
.transcript-seg:last-child { border-bottom: none; }
.transcript-seg-time { color: var(--accent-600); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 40px; }
.transcript-seg-speaker { color: var(--text-muted); flex-shrink: 0; width: 100px; font-size: 12px; }
.transcript-seg-text { color: var(--text-primary); flex: 1; }
.transcript-seg-text mark { background: var(--accent-100); color: var(--accent-600); border-radius: 3px; }
.transcript-ask { display: flex; gap: 8px; margin-bottom: 10px; }
.transcript-ask input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.transcript-answer { background: var(--page); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }

.transcript-speakers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.transcript-speakers:empty { margin-bottom: 0; }
.transcript-speakers-label { font-size: 12px; color: var(--text-muted); width: 100%; }
.speaker-chip { display: flex; align-items: center; gap: 4px; }
.speaker-chip .speaker-rename-input { font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; width: 140px; }
.speaker-chip .speaker-rename-save { font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.speaker-chip .speaker-rename-save:hover { background: var(--accent-100); }

#speakers-table .speaker-name-input { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; width: 100%; }

/* Sentiment badges */
.sentiment-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
.sentiment-badge.sentiment-positive { background: rgba(12,163,12,0.12); color: #0ca30c; }
.sentiment-badge.sentiment-neutral { background: var(--page); color: var(--text-muted); }
.sentiment-badge.sentiment-negative { background: rgba(227,73,72,0.1); color: #e34948; }

/* Klout level badges */
.klout-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.klout-badge.klout-influencer { background: rgba(74,58,167,0.14); color: #4a3aa7; }
.klout-badge.klout-rising { background: rgba(42,120,214,0.14); color: #184f95; }
.klout-badge.klout-engaged { background: rgba(27,175,122,0.14); color: #0f7a54; }
.klout-badge.klout-casual { background: var(--page); color: var(--text-muted); }
.dt-columns-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 0;
  z-index: 10;
  min-width: 170px;
}
.dt-columns-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.dt-columns-menu label:hover { background: var(--page); }

.dt-filters[hidden] { display: none; }
.dt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dt-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.dt-filter-group input {
  width: 84px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--page);
  color: var(--text-primary);
}
.dt-filter-group input[type="date"] { width: 128px; }

table.data-table th.sortable { cursor: pointer; }
table.data-table th.sortable:hover { color: var(--text-secondary); }
table.data-table th.sorted { color: var(--accent-600); }
table.data-table th.col-hidden, table.data-table td.col-hidden { display: none; }
td.media-cell img, td.media-cell video {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block;
}

/* Dashlets */
.dashlets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.dashlet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.dashlet .label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.dashlet .value { font-size: 20px; font-weight: 600; }

/* Settings */
.section-heading { margin-top: 28px; }
.settings-block { margin-bottom: 10px; }
.settings-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-primary); margin-bottom: 8px; cursor: pointer; }
.toggle-row-group { display: flex; flex-wrap: wrap; column-gap: 20px; }
.toggle-row-group .toggle-row { margin-bottom: 4px; }
.account-chip-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; flex-wrap: wrap; }
.account-chip-row select { font-size: 11.5px; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); }

.transcribe-platform-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; flex-wrap: wrap; }
.backfill-inline { display: flex; align-items: center; gap: 6px; }
.backfill-inline .backfill-date { font-size: 11.5px; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border); }
.backfill-inline .backfill-btn { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--accent-600); cursor: pointer; white-space: nowrap; }
.backfill-inline .backfill-btn:hover { background: var(--accent-100); }
.backfill-inline .backfill-btn:disabled { opacity: 0.6; cursor: default; }
.add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.add-row[hidden] { display: none; }
.add-row input, .add-row select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text-primary);
}
.add-row input[type="text"] { flex: 1; min-width: 160px; }
.btn-primary {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-600); }
.btn-danger {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.btn-danger:hover { color: #e34948; border-color: #e34948; }
.btn-secondary {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent-600);
  font-size: 12.5px;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--accent-100); }

/* Lists & Rules (Ad Lists / Advertiser Lists) */
.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.list-row-main { flex: 1; min-width: 0; }
.list-row-name { font-size: 13.5px; font-weight: 600; }
.list-row-desc { font-size: 12px; margin-top: 2px; }
.list-row-counts { font-size: 12px; white-space: nowrap; }

.rule-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.rule-group .rule-group { background: var(--page); margin-left: 8px; }
.rule-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rule-group-head select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; background: var(--surface); color: var(--text-primary); }
.rule-group-body { display: flex; flex-direction: column; gap: 6px; }
.rule-group-actions { display: flex; gap: 8px; margin-top: 8px; }
.rule-leaf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rule-leaf select, .rule-leaf input {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text-primary);
}
.rule-value-between { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }

.list-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.list-member-row:last-child { border-bottom: none; }

/* Read-only member rows on a List's View screen (distinct from the
   editable member rows above, which always carry a Remove button). */
.list-view-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.list-view-row:last-child { border-bottom: none; }
.list-view-row-thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; flex-shrink: 0; }
.list-view-row-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-muted); }
.list-view-row-main { flex: 1; min-width: 0; }
.list-view-row-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.list-view-row-sub { font-size: 12px; margin-top: 2px; }
.list-member-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.list-member-badge.is-manual { background: var(--accent-100); color: var(--accent-600); }
.list-member-badge.is-rule { background: var(--page); color: var(--text-muted); border: 1px solid var(--border); }

.list-membership { position: relative; margin-top: 6px; }
.list-membership-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.list-membership-toggle:hover { border-color: var(--accent-600); color: var(--accent-600); }
.list-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.list-chip { font-size: 10.5px; background: var(--accent-100); color: var(--accent-600); border-radius: 4px; padding: 2px 6px; }
/* position:fixed (with top/left set by JS from the trigger button's
   getBoundingClientRect, not by CSS anchoring) — a card-relative
   position:absolute here was getting clipped by .post-card's own
   overflow:hidden, or painted behind later grid siblings that have no
   lower stacking context to lose to (found via user report, 2026-08-19). */
.list-picker {
  position: fixed;
  z-index: 200;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(11,11,11,0.15);
}
.list-picker-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 0; cursor: pointer; }

/* Tag membership control — parallel to .list-membership/.list-picker above,
   same position:fixed popover technique, distinct color so tags read as a
   different kind of label from Lists at a glance. */
.tag-membership { position: relative; margin-top: 6px; }
.tag-membership-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.tag-membership-toggle:hover { border-color: #b8860b; color: #b8860b; }
.tag-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.tag-chip { font-size: 10.5px; background: #fdf3d9; color: #8a6300; border-radius: 4px; padding: 2px 6px; }
.tag-picker {
  position: fixed;
  z-index: 200;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(11,11,11,0.15);
}
.tag-picker-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 0; cursor: pointer; }

/* Searchable multi-select toolbar filter (Ads tab: Advertiser filter) —
   position:absolute is fine here (unlike .list-picker/.tag-picker) since
   the toolbar has no overflow:hidden ancestor to get clipped by. */
.multiselect { position: relative; }
.multiselect-toggle {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 140px;
  text-align: left;
}
.multiselect-toggle:hover { border-color: var(--accent-600); }
.multiselect-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 30;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(11,11,11,0.15);
}
.multiselect-search { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; margin-bottom: 6px; box-sizing: border-box; }
.multiselect-options { display: flex; flex-direction: column; gap: 2px; }
.multiselect-option { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 2px; cursor: pointer; }

/* View toggle (Posts: table vs. social-card view) */
.view-toggle { display: flex; gap: 4px; margin-bottom: 14px; }
.view-toggle-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.view-toggle-btn:first-child { border-radius: 8px 0 0 8px; }
.view-toggle-btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.view-toggle-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Social-media style post cards */
.post-cards-grid[hidden], .bulk-bar[hidden], .review-deck[hidden] { display: none; }
/* Real bug found 2026-08-19: an empty div collapses to 0 height, and an
   IntersectionObserver never reports a zero-area element as intersecting —
   the lazy-load sentinel needs real height to ever actually trigger. */
#ads-load-sentinel { height: 40px; }
#ads-load-sentinel[hidden] { display: none; }
.post-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.post-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 10px 12px;
}
.post-card-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.post-card-handle { font-size: 13px; font-weight: 600; }
/* No margin-left:auto — that pushed the date to the far-right edge of its
   own wrapped line whenever it didn't fit alongside the handle/badges,
   reading as a floating, disconnected line (found via user report,
   2026-08-19). It now flows left, immediately after whatever's above it. */
.post-card-date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.ad-select { flex-shrink: 0; cursor: pointer; width: 15px; height: 15px; }
.advertiser-select { cursor: pointer; width: 15px; height: 15px; }
.post-card-media { width: 100%; aspect-ratio: 1 / 1; background: var(--page); display: flex; align-items: center; justify-content: center; }
.post-card-media img, .post-card-media video { width: 100%; height: 100%; object-fit: cover; }
/* Ad creative (Google Display banners especially) is often landscape and
   frequently has its headline/body baked into the image itself — cropping
   it to a square with object-fit:cover cuts that text off at the edges.
   Ad cards show the whole image at its natural ratio instead. */
/* Padding here (rather than full-bleed width:100%) keeps the ad screenshot
   from touching the card's own edges — with the white background fix above,
   a flush image read as bleeding straight into the card border with no
   visual boundary (found via user report, 2026-08-19). A definite `height`
   (not `max-height` on an auto-sized box) matters for two real reasons,
   also found via user report: (1) the img's `max-height: 100%` only
   resolves against a parent with a DEFINITE height per the CSS percentage
   rules — against an auto-height parent it computes to `none`, so images
   were overflowing past 320px and getting clipped by `overflow: hidden`
   instead of shrinking to fit; (2) every card's media box is now the same
   height regardless of that ad's own image aspect ratio, so margins read
   as consistent across the whole grid instead of varying card to card. */
.post-card-media.ad-card-media { height: 280px; overflow: hidden; background: #fff; padding: 10px; box-sizing: border-box; }
.post-card-media.ad-card-media img, .post-card-media.ad-card-media video { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.ad-media-nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px 0; }
.ad-media-nav-btn { background: none; border: 1px solid var(--border); border-radius: 4px; width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 14px; color: var(--text-muted); }
.ad-media-nav-btn:hover { border-color: var(--accent-600); color: var(--accent-600); }
.ad-media-position { font-size: 11px; color: var(--text-muted); min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.ad-thumb-strip { display: flex; gap: 4px; padding: 6px 12px 0; overflow-x: auto; }
.ad-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; opacity: 0.75; }
.ad-thumb:hover { opacity: 1; border-color: var(--accent-600); }
.ad-card-menu-item { background: none; border: none; border-radius: 6px; padding: 6px 8px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; white-space: nowrap; text-align: left; width: 100%; }
.ad-card-menu-item:hover { background: var(--page); }
.ad-card-menu-item:disabled { opacity: 0.6; cursor: default; }
.ad-card-media { cursor: zoom-in; }

/* Card-corner "..." menu — holds the download action (and room for more
   later) so it doesn't compete for space with the </> variation nav above
   the image (found via user report, 2026-08-19). */
.ad-card-menu { position: relative; margin-left: auto; }
.ad-card-menu-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.ad-card-menu-toggle:hover { border-color: var(--accent-600); color: var(--accent-600); }
/* position:fixed, coordinates set by JS — see the .list-picker comment
   above for why (same clipping/stacking bug, same fix). */
.ad-card-menu-panel {
  position: fixed;
  z-index: 200;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(11,11,11,0.15);
}

/* Google ad creative, split into its real sections instead of one blob of
   OCR'd text (found via user report, 2026-08-19: a flat blob mixed
   "Sponsored" chrome, advertiser info, headline, description and sitelinks
   together with no visual separation). */
.ad-creative-line { margin-top: 4px; }
/* A rule here marks where the raw Google-served ad image ends and our
   separately OCR-parsed text begins — without it the two ran together as
   one undifferentiated block (found via user report, 2026-08-19). */
.ad-creative-advertiser { font-size: 11.5px; color: var(--text-primary); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ad-creative-domain { font-size: 11px; color: var(--text-muted); margin-top: 0; }
.ad-creative-headline { font-size: 14px; font-weight: 600; color: var(--accent-600); }
.ad-creative-description { font-size: 13px; color: var(--text-primary); }
/* Real distinct sitelinks, each its own list row (not a run of pills) —
   see the "Multiple links" fix in ocr.js: Google sometimes renders these
   as several separate stacked rows, and each is a genuinely separate link.
   A rule above separates the list from the description, and a rule
   between each item mirrors how Google's own UI divides them. */
.ad-creative-sitelinks-row { display: flex; flex-direction: column; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.ad-creative-sitelink-pill { font-size: 11.5px; color: var(--accent-600); border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 5px 0; }
.ad-creative-sitelink-pill:last-child { border-bottom: none; }
/* display:contents makes this wrapper invisible to the flex layout so its
   pills join the same vertical list as the always-visible ones above
   (gap/divider included) rather than nesting one level deep. */
.sitelinks-tail { display: contents; }
.sitelinks-tail[hidden] { display: none; }
.sitelinks-toggle { font-size: 11.5px; color: var(--text-muted); text-decoration: none; padding: 4px 0; }
.sitelinks-toggle:hover { color: var(--accent-600); }
.post-card-body { padding: 10px 12px; }
.post-card-caption { font-size: 13px; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; }
.post-card-transcript { font-size: 12px; color: var(--text-secondary); font-style: italic; line-height: 1.4; margin-bottom: 8px; }
.post-card-stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-secondary); }
.post-card-stats span { display: flex; align-items: center; gap: 4px; }
.post-card-link { display: block; padding: 8px 12px; border-top: 1px solid var(--gridline); text-align: center; font-size: 12.5px; }

.post-card-badge {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 20px; margin-left: 6px;
}
.post-card-badge.is-active { background: #e6f4ea; color: #2a7d3f; }
.post-card-badge.is-inactive { background: var(--page); color: var(--text-muted); }

.ad-alerts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ad-alert-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #fff8e6; border: 1px solid #f2dca0; border-radius: var(--radius);
  font-size: 13px;
}
.ad-alert-item .ad-alert-icon { font-size: 15px; }
.ad-alert-item .ad-alert-text { flex: 1; }
.ad-alert-item .ad-alert-ack-btn {
  font-size: 11.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); cursor: pointer;
}

/* Bulk-select bar (Commenters, Ads, Advertiser Profiles) — sticky so it
   stays reachable while scrolling through a long list of selected rows
   (found via user report, 2026-08-19); only ever visible once something is
   selected (toggled via the `hidden` attribute in JS), never on page load. */
.bulk-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-100); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--accent-600);
  position: sticky; top: 8px; z-index: 30; box-shadow: var(--shadow);
}
.bulk-bar select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; }
.dt-select-col { width: 28px; text-align: center; }

/* Review-card deck (Commenters triage) */
.review-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.review-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.review-card.status-ignored { opacity: 0.5; }
.review-card-head { display: flex; align-items: center; gap: 10px; }
.review-card-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--accent-100); flex-shrink: 0; }
.review-card-avatar-fallback {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-100); color: var(--accent-600);
  display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0;
}
.review-card-name { font-weight: 600; font-size: 14px; }
.review-card-handle { font-size: 12px; color: var(--text-muted); }
.review-card-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.review-card-bio { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; max-height: 4em; overflow: hidden; }
.review-card-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.review-card-actions button {
  flex: 1; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--page);
  font-size: 12.5px; cursor: pointer; color: var(--text-secondary);
}
.review-card-actions button.action-add:hover { background: rgba(12,163,12,0.12); color: #0ca30c; border-color: rgba(12,163,12,0.3); }
.review-card-actions button.action-ignore:hover { background: rgba(227,73,72,0.1); color: #e34948; border-color: rgba(227,73,72,0.3); }
.review-card-actions button.action-skip:hover { background: var(--gridline); }
.review-card-link { font-size: 12px; color: var(--accent-600); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
.review-card-attach { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--page); color: var(--text-primary); }

/* Side panel: profile iframe */
.profile-frame-overlay[hidden], .profile-frame-panel[hidden] { display: none; }
.profile-frame-overlay { position: fixed; inset: 0; background: rgba(11,11,11,0.25); z-index: 60; }
.profile-frame-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 90vw);
  background: var(--surface); box-shadow: -8px 0 30px rgba(11,11,11,0.2);
  z-index: 61; display: flex; flex-direction: column;
}
.profile-frame-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--gridline); font-size: 13px; font-weight: 600; }
.profile-frame-head a { font-size: 12px; font-weight: 500; color: var(--accent-600); margin-left: auto; }
.profile-frame-note { font-size: 11.5px; color: var(--text-muted); padding: 8px 16px; background: var(--page); border-bottom: 1px solid var(--gridline); }
.profile-frame-panel iframe { flex: 1; border: none; width: 100%; }

/* Ad Monitoring: click-to-enlarge media modal */
.ad-media-modal-overlay[hidden], .ad-media-modal[hidden] { display: none; }
.ad-media-modal-overlay { position: fixed; inset: 0; background: rgba(11,11,11,0.6); z-index: 70; }
/* Fixed width AND height (not max-*) — found via user report, 2026-08-19:
   with max-height, the box shrank to fit each variation's own aspect ratio,
   so the ‹ › nav below the image moved on screen every time a differently-
   shaped variation was shown. A fixed-size box with the image area as the
   flexible child (object-fit: contain lets a smaller/differently-shaped
   image letterbox within it) keeps the nav's own position constant instead. */
.ad-media-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 71; width: min(90vw, 900px); height: min(85vh, 820px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ad-media-modal-close { position: absolute; top: -14px; right: -14px; background: var(--surface); box-shadow: 0 2px 8px rgba(11,11,11,0.25); }
.ad-media-modal-media { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.ad-media-modal-media img, .ad-media-modal-media video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.ad-media-modal-nav { flex-shrink: 0; display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 8px; padding: 6px 12px; }
.ad-media-modal-nav .ad-media-nav-btn { width: 30px; height: 30px; font-size: 16px; }
.ad-media-modal-nav .ad-media-position { font-size: 12.5px; }

/* Time-series trend charts (Source drill-down) */
.trend-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 28px; }
.trend-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.trend-chart-title { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; }
.trend-chart-empty { font-size: 12.5px; color: var(--text-muted); padding: 20px 0; text-align: center; }
.trend-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.trend-area { fill: var(--accent); opacity: 0.08; }
.trend-dot { fill: var(--accent); }
.trend-axis-label { font-size: 9.5px; fill: var(--text-muted); }

/* Word cloud (Keywords tab) */
.word-cloud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 24px; margin-bottom: 20px; min-height: 140px;
}
.word-cloud-item { color: var(--accent-600); font-weight: 600; line-height: 1; cursor: default; white-space: nowrap; }
.word-cloud-item:nth-child(3n+1) { color: var(--text-primary); }
.word-cloud-item:nth-child(3n+2) { color: var(--accent); }

/* Compare */
.compare-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.compare-controls-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.compare-controls-row input, .compare-controls-row select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--page); color: var(--text-primary);
}
.compare-controls-row input { flex: 1; min-width: 180px; }
.compare-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.compare-picker .compare-group-label {
  flex-basis: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); margin: 8px 0 2px;
}
.compare-picker label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--page); cursor: pointer;
}
.compare-picker label.checked { background: var(--accent-100); border-color: var(--accent); color: var(--accent-600); }

/* Universal red->green metric box (used standalone via colorScaleSpan(), and
   inside Compare's td.metric-* cells for the discrete high/mid/low/na case) */
.metric-box {
  display: inline-block; min-width: 56px; padding: 4px 9px; border-radius: 7px;
  font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.metric-box.metric-na { background: var(--page); color: var(--text-muted); border-color: var(--border); }
td.metric-high, td.metric-mid, td.metric-low, td.metric-na { text-align: center; }
td.metric-high .metric-box { background: rgba(12,163,12,0.14); color: #0ca30c; border-color: rgba(12,163,12,0.3); }
td.metric-mid .metric-box { background: rgba(250,178,25,0.16); color: #a06a00; border-color: rgba(250,178,25,0.35); }
td.metric-low .metric-box { background: rgba(227,73,72,0.12); color: #e34948; border-color: rgba(227,73,72,0.3); }
td.metric-na .metric-box { background: var(--page); color: var(--text-muted); border-color: var(--border); }

@media (max-width: 900px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .agents-row { grid-template-columns: repeat(2, 1fr); }
  .dashlets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stats-row { grid-template-columns: 1fr; }
  .agents-row { grid-template-columns: 1fr; }
  .dashlets { grid-template-columns: 1fr; }
}

/* ---- Analytics tab: heatmap, share-of-voice ---- */
.section-subheading {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 20px 0 10px;
}
.heatmap-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.heatmap-col-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}
@media (max-width: 900px) {
  .heatmap-pair { grid-template-columns: 1fr; }
}
.heatmap-grid {
  display: grid;
  grid-template-columns: 40px repeat(24, 1fr);
  gap: 2px;
  margin-bottom: 8px;
  overflow-x: auto;
}
.heatmap-cell {
  aspect-ratio: 1;
  min-width: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-muted);
}
.heatmap-label {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  padding-right: 6px;
}
.heatmap-hour-label {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
}
.sov-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.sov-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.sov-bar-track {
  background: var(--gridline);
  border-radius: 6px;
  height: 18px;
  overflow: hidden;
}
.sov-bar-fill {
  height: 100%;
  background: var(--accent-450);
  border-radius: 6px;
}
.sov-pct {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.et-toggle {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  margin-left: 2px;
}
.et-toggle:hover {
  text-decoration: underline;
}

/* ---------------- API Costs tab ---------------- */
.cost-range-select { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.cost-range-select select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

.cost-stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  margin: 14px 0 24px;
}
.cost-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.cost-stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cost-stat-card .value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }

.budget-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.budget-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.budget-card .bc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.budget-card .bc-name { font-weight: 600; text-transform: capitalize; }
.budget-card .bc-period { font-size: 12px; color: var(--text-muted); }
.budget-card .bc-amounts { font-size: 13px; color: var(--text-secondary); margin-top: 6px; font-variant-numeric: tabular-nums; }
.budget-bar-track { height: 8px; border-radius: 5px; background: var(--gridline); overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 5px; transition: width .3s ease; }
.budget-bar-fill.ok { background: #2f9e5b; }
.budget-bar-fill.near { background: #d99a1f; }
.budget-bar-fill.over { background: #d1443c; }
.bc-status-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.bc-status-pill.ok { background: #e3f5eb; color: #1f7a48; }
.bc-status-pill.near { background: #fbf0d9; color: #92650f; }
.bc-status-pill.over { background: #fbe4e2; color: #a4302a; }
.bc-delete { margin-left: 8px; font-size: 11px; color: var(--text-muted); background: none; border: none; cursor: pointer; }
.bc-delete:hover { color: #a4302a; }

.budget-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
}
.budget-form select, .budget-form input {
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); font-size: 13px;
}
.budget-form input[type="number"] { width: 130px; }

.cost-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 10px; }
@media (max-width: 800px) { .cost-breakdown-grid { grid-template-columns: 1fr; } }
.cost-bar-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.cost-bar-row .cbr-label { text-transform: capitalize; color: var(--text-secondary); }
.cost-bar-track { height: 10px; border-radius: 5px; background: var(--gridline); overflow: hidden; }
.cost-bar-fill { height: 100%; border-radius: 5px; background: var(--accent-450); }
.cost-bar-row .cbr-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }

.provider-settings-rows { display: flex; flex-direction: column; gap: 8px; }
.provider-platform-row {
  display: flex; align-items: center; gap: 20px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.provider-platform-row .provider-platform-name { min-width: 90px; font-weight: 600; }
.provider-platform-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.provider-platform-row select.provider-select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); }

.settings-subheading { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin: 18px 0 8px; }
.settings-subheading:first-of-type { margin-top: 4px; }
.settings-hint-inline { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.api-key-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.api-key-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap;
}
.api-key-row .api-key-name { min-width: 150px; font-weight: 600; font-size: 13px; }
.api-key-row .api-key-input-group { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; }
.api-key-row input.api-key-input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--page); color: var(--text-primary); font-size: 13px; font-family: monospace;
}
.api-key-row .api-key-toggle-btn, .api-key-row .api-key-save-btn {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--page); color: var(--text-secondary); font-size: 12px; cursor: pointer;
}
.api-key-row .api-key-save-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.api-key-row .api-key-status { font-size: 11.5px; color: var(--text-secondary); min-width: 70px; }
.api-key-row .api-key-status.is-set { color: var(--success, #2a9d5c); }

/* ---- On-demand post pull (Posts tab) ---- */
/* Sits above the dashlets as a single quiet row, so it reads as a tool rather
   than competing with the data it produces. */
.pull-now {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.pull-now-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pull-now-label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* The input takes the slack: it holds the longest value (a full profile URL),
   while the selects and the count stay at their natural size. */
.pull-now-row #pull-now-input { flex: 1 1 260px; min-width: 200px; }
.pull-now-row #pull-now-count { width: 72px; }
.pull-now-row input,
.pull-now-row select {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: inherit;
}
.pull-now-status {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
/* State is carried by a left border plus the text itself, never colour alone —
   the message always says what happened. */
.pull-now-status.is-working { border-left: 3px solid var(--accent, #4f7cff); }
.pull-now-status.is-ok { border-left: 3px solid #2e9e5b; }
.pull-now-status.is-error { border-left: 3px solid #d64545; }
.pull-now-status code {
  font-size: 12px;
  background: var(--border);
  padding: 1px 4px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Capability Explorer
   Numbered steps here are not decoration: the order is a real dependency chain
   (a URL identifies a platform, which decides the options, which decide the
   cost, which gates the run), so the numbers carry information the reader needs.
   --------------------------------------------------------------------------- */
.exp-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.exp-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.exp-step-head .section-heading { margin: 0; }
.exp-step-num {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-100); color: var(--accent-600);
  font-size: 12px; font-weight: 600;
}

.exp-url-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.exp-url-row input { flex: 1 1 auto; }

.exp-detect { margin-top: 10px; }
.exp-detect-grid { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.exp-detect-field { display: flex; flex-direction: column; gap: 2px; }
.exp-detect-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.exp-detect-value { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.exp-detect-bad { color: var(--text-secondary); font-size: 13px; }

.exp-samples { margin-top: 14px; }
.exp-samples > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.exp-samples-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.exp-sample-btn {
  border: 1px solid var(--border); background: var(--page);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer;
  color: var(--text-primary);
}
.exp-sample-btn:hover { border-color: var(--accent-250); }
.exp-sample-btn .exp-sample-meta { color: var(--text-muted); margin-left: 6px; }

/* One row per data set. A row that cannot be run still appears, with the reason:
   a greyed box is information, a missing box is a mystery. */
.exp-groups { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.exp-group {
  display: grid; grid-template-columns: 22px minmax(190px, 1.1fr) auto;
  gap: 10px; align-items: start;
  padding: 10px 4px; border-bottom: 1px solid var(--gridline);
}
.exp-group:last-child { border-bottom: none; }
.exp-group-off { opacity: 0.62; }
.exp-group-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.exp-group-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.exp-group-sub strong { font-weight: 600; }
.exp-group-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.exp-group-controls label { font-size: 11px; color: var(--text-muted); }
.exp-group-controls input[type="number"] { width: 84px; }
.exp-group-controls input[type="date"] { width: 132px; }

.exp-pill {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 6px;
  vertical-align: 1px;
}
.exp-pill-free { background: #dff0e2; color: #1d5c31; }
.exp-pill-paid { background: var(--accent-100); color: var(--accent-600); }
.exp-pill-person { background: #fbe7cd; color: #8a4b09; }
.exp-pill-off { background: rgba(11,11,11,0.07); color: var(--text-secondary); }
.exp-pill-warn { background: #fbdcd8; color: #8c2d20; }

.exp-problems { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.exp-problems div { margin-top: 3px; }

.exp-calc { margin-top: 16px; border-top: 1px solid var(--gridline); padding-top: 14px; }
.exp-calc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exp-calc-row label { font-size: 12px; color: var(--text-muted); }
.exp-calc-row input[type="number"] { width: 84px; }
.exp-calc-out { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.exp-calc-tile {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  background: var(--page); min-width: 132px;
}
.exp-calc-tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.exp-calc-tile-value { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }

.exp-confirm {
  border: 1px solid #e4b9b1; background: #fdf4f2;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.exp-confirm-text { margin: 0 0 8px; font-size: 13px; color: #7a2c1e; }
.exp-confirm label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
.exp-confirm input { width: 130px; }

.exp-run-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.exp-run-row input { flex: 1 1 240px; }
.exp-run-status { font-size: 13px; color: var(--text-secondary); }
.exp-spend { margin-top: 12px; }

.exp-result { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.exp-result-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--page); border-bottom: 1px solid var(--border);
}
.exp-result-title { font-weight: 600; font-size: 14px; }
.exp-result-body { padding: 12px 14px; }
.exp-result-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--text-secondary); white-space: pre-wrap; margin-top: 8px;
}
.exp-json { margin-top: 10px; }
.exp-json > summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.exp-json pre {
  max-height: 320px; overflow: auto; background: var(--page);
  border: 1px solid var(--gridline); border-radius: 8px;
  padding: 10px 12px; font-size: 11.5px; line-height: 1.5; margin-top: 8px;
}

.exp-extract-scopes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; }
.exp-ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.exp-ex-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.exp-ex-card h4 { margin: 0 0 8px; font-size: 13px; }
.exp-ex-empty { font-size: 12.5px; color: var(--text-muted); }
.exp-ex-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid var(--gridline); font-size: 13px;
}
.exp-ex-row:last-child { border-bottom: none; }
.exp-ex-row-key { overflow-wrap: anywhere; }
.exp-ex-row-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-ex-scopes { font-size: 11px; color: var(--text-muted); }

.exp-snippet {
  font-size: 12px; color: var(--text-secondary); background: var(--page);
  border-left: 2px solid var(--accent-250); padding: 4px 8px; margin-top: 4px;
  overflow-wrap: anywhere;
}

/* Media in Explorer results. Small on purpose: the table is for scanning, and a
   full-size image per row would push the actual fields off screen. */
.exp-media-strip { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.exp-media {
  max-width: 84px; max-height: 84px; border-radius: 6px;
  border: 1px solid var(--border); object-fit: cover; display: block;
}
video.exp-media { max-width: 132px; max-height: 84px; }