/* =====================================================
   AdsCat Clone — refined editorial aesthetic
   Cream background, serif display, sharp accents.
   ===================================================== */

:root {
  /* Bootstrap palette overrides — retarget every Bootstrap component
     (.card, .btn, .badge, .text-secondary, etc.) to our blue palette. */
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --bs-body-bg: #eef1f7;
  --bs-body-color: #1e293b;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-border-color: #e3e7ef;
  --bs-border-radius: 0.625rem;
  --bs-border-radius-sm: 0.45rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-secondary-color: #64748b;
  /* --- New palette (Clickora × Level Up hybrid) ---
     Soft white background, white cards with very subtle border,
     blue/indigo accent for actions and active states, light grey
     surface for the sidebar. Legacy --cream-* and --olive-* names
     kept as aliases so we don't have to repaint every selector. */
  --bg-page:    #eef1f7;   /* outer page wash (cool grey-blue) */
  --bg-surface: #ffffff;   /* cards / panels */
  --bg-soft:    #f5f7fb;   /* sidebar / striped rows */
  --bg-soft-2:  #eef0f6;
  --line:       #e3e7ef;
  --line-soft:  #eef1f7;
  --bg-card:    #ffffff;

  --ink-0:  #0f172a;
  --ink-1:  #1e293b;
  --ink-2:  #475569;
  --ink-3:  #64748b;
  --ink-4:  #94a3b8;

  --accent-1: #2563eb;   /* blue 600 — primary brand */
  --accent-2: #3b82f6;   /* blue 500 — hover / soft */
  --accent-3: #60a5fa;   /* blue 400 — chart secondary */
  --accent-soft: #eff6ff;
  --accent-ring: rgba(37, 99, 235, 0.25);

  --signal-pos: #16a34a;
  --signal-pos-soft: #dcfce7;
  --signal-neg: #dc2626;
  --signal-neg-soft: #fee2e2;
  --signal-warn: #d97706;
  --signal-warn-soft: #fef3c7;

  /* Legacy aliases — keep old selectors working until everything is repainted */
  --cream-0: var(--bg-surface);
  --cream-1: var(--bg-soft);
  --cream-2: var(--bg-soft-2);
  --cream-3: var(--line);
  --olive-1: var(--accent-1);
  --olive-2: var(--accent-2);

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* App shell: sidebar + main */
.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--bg-page);
}
.app-sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.sb-brand-mark {
  color: var(--accent-1);
  display: flex;
  align-items: center;
}
.sb-brand-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.sb-brand-text em {
  font-style: normal;
  color: var(--accent-1);
}
.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.sb-nav-item:hover {
  background: var(--bg-soft);
  color: var(--ink-0);
}
.sb-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-1);
  font-weight: 600;
}
.sb-nav-item svg {
  flex-shrink: 0;
}
.sb-badge {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-1);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.sb-sep {
  height: 1px;
  background: var(--line-soft);
  margin: 10px 6px;
}
.sb-nav-secondary .sb-nav-item {
  color: var(--ink-3);
  font-size: 12.5px;
}
/* Org selector inside sidebar */
.sb-org-wrap {
  position: relative;
  margin: 4px 6px 18px;
}
.sb-org-pill {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sb-org-pill:hover {
  border-color: var(--accent-2);
  background: var(--bg-surface);
}
.sb-org-icon {
  color: var(--accent-1);
  font-size: 12px;
}
.sb-org-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-org-chev {
  color: var(--ink-3);
  font-size: 10px;
}

/* Section labels and collapse groups */
.sb-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 8px 10px 4px;
}
.sb-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 8px);
  margin: 12px 4px 4px;
  padding: 0 10px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  cursor: pointer;
  height: 22px;
}
.sb-group-toggle:hover { color: var(--ink-2); }
.sb-chev {
  font-size: 10px;
  transition: transform .2s ease;
}
.sb-group-toggle[aria-expanded="false"] .sb-chev {
  transform: rotate(-90deg);
}
.sb-collapse {
  overflow: hidden;
  max-height: 600px;
  transition: max-height .25s ease;
}
.sb-collapse:not(.open) {
  max-height: 0;
}

.sb-foot {
  margin-top: auto;
  padding: 12px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
}
.sb-foot-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}
.sb-foot .status-pill {
  font-size: 10.5px;
}
.sb-foot-ap {
  font-size: 10.5px !important;
  padding: 4px 9px !important;
}
.sb-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.sb-last-sync {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.sb-logout {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sb-logout:hover {
  border-color: var(--signal-neg);
  color: var(--signal-neg);
}

/* Main page area now sits to the right of the sidebar */
.page {
  background: var(--bg-page);
  min-width: 0;
  padding: 18px 24px 40px;
}

/* New topbar (slim breadcrumb + actions) */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 18px;
  background: transparent;
  border: none;
}
.tb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}
.tb-crumb-active {
  color: var(--ink-0);
  font-weight: 600;
}
.tb-sep {
  color: var(--ink-4);
}
.tb-spacer {
  flex: 1;
}
/* Topbar range selector — custom dropdown (not native select) so we
   control the popup styling completely. */
.tb-range-pill { position: relative; }
.tb-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tb-range-btn:hover,
.tb-range-btn[aria-expanded="true"] {
  border-color: var(--accent-2);
  color: var(--accent-1);
}
.tb-range-btn[aria-expanded="true"] {
  background: var(--accent-soft);
}
.tb-range-btn svg {
  color: var(--accent-1);
  flex-shrink: 0;
}
.tb-range-label { min-width: 76px; text-align: left; }
.tb-pill-chev {
  color: var(--ink-3);
  font-size: 10px;
  margin-left: 2px;
  transition: transform .2s ease;
}
.tb-range-btn[aria-expanded="true"] .tb-pill-chev { transform: rotate(180deg); }

.tb-range-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tb-range-menu[hidden] { display: none; }
.tb-range-opt {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  font-weight: 500;
}
.tb-range-opt:hover {
  background: var(--bg-soft);
  color: var(--ink-0);
}
.tb-range-opt.active {
  background: var(--accent-soft);
  color: var(--accent-1);
  font-weight: 700;
}
.tb-range-opt.active::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
  color: var(--accent-1);
}
.tb-range-sep {
  height: 1px;
  background: var(--line-soft);
  margin: 4px 6px;
}

/* Topbar Mask button — toggle with eye / eye-off icons */
.tb-mask-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tb-mask-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-1);
}
.tb-mask-btn .tb-mask-icon { color: currentColor; }
.tb-mask-btn .tb-mask-icon-on { display: none; }
.tb-mask-btn.is-on {
  background: var(--accent-1);
  border-color: var(--accent-1);
  color: #fff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.tb-mask-btn.is-on:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}
.tb-mask-btn.is-on .tb-mask-icon-off { display: none; }
.tb-mask-btn.is-on .tb-mask-icon-on { display: inline-block; }

/* Floating tooltip used by the mini KPI bars (and other compact widgets) */
.kpi-bar-tip {
  position: fixed;
  pointer-events: none;
  background: var(--ink-0);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
  z-index: 9999;
  white-space: nowrap;
  text-align: left;
}
.kpi-bar-tip strong { font-weight: 600; color: #fff; }
.kpi-bar-tip-row {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}
.kpi-bar { cursor: help; }
.kpi-bar:hover {
  transform: scaleY(1.06);
  transform-origin: bottom;
  background: var(--accent-3);
}
.kpi-bar.is-highlight:hover {
  background: var(--accent-1);
}
.tb-last-sync {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar-controls .ghost-pill {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--ink-1);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar-controls .ghost-pill:hover {
  border-color: var(--accent-2);
  color: var(--accent-1);
}

/* Status pill — minimalist */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--signal-pos-soft);
  color: var(--signal-pos);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-pos);
}
.status-pill[data-state="mock"] {
  background: var(--signal-warn-soft);
  color: var(--signal-warn);
}
.status-pill[data-state="mock"] .dot {
  background: var(--signal-warn);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.last-sync {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 1px 6px;
  background: var(--cream-2);
  border-radius: 4px;
  margin-left: 2px;
}
.last-sync.syncing {
  color: var(--ink-3);
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.org-pill-wrap {
  position: relative;
}
.org-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
  cursor: pointer;
  min-width: 220px;
  transition: all 0.15s ease;
  text-align: left;
}
.org-pill:hover {
  border-color: var(--ink-3);
}
.org-pill[aria-expanded="true"] {
  border-color: var(--olive-1);
  background: var(--cream-1);
}
.org-pill[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}
.chev {
  transition: transform 0.15s ease;
}
.org-menu {
  position: fixed;            /* escape the sidebar's overflow clip */
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  z-index: 500;
  display: none;
  overflow: hidden;
}
.org-menu.open {
  display: block;
}
.org-menu-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(135deg, var(--cream-1) 0%, var(--cream-2) 100%);
}
.org-menu-title {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.org-menu-sub {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.org-menu-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.org-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-1);
  cursor: pointer;
  text-align: left;
}
.org-option:hover {
  background: var(--cream-1);
}
.org-option.selected {
  background: var(--olive-1);
  color: var(--cream-0);
}
.org-option.selected .org-option-count {
  color: rgba(244, 233, 208, 0.7);
}
.org-option-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}
.org-icon {
  color: var(--ink-3);
  font-size: 14px;
}
.org-name {
  flex: 1;
}
.chev {
  color: var(--ink-3);
  font-size: 12px;
}

.ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ghost-pill:hover {
  border-color: var(--ink-3);
  background: var(--cream-1);
}

.rc-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--olive-1) 70%);
  display: inline-block;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.status-pill[data-state="mock"] {
  background: var(--cream-1);
  color: var(--ink-2);
}
.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-2);
}

/* ============= HERO ============= */
.hero {
  margin-top: 24px;
  margin-bottom: 22px;
}
.hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.dot-pulse {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}
.hero-actions {
  display: flex;
  gap: 10px;
}

.live-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  flex-wrap: wrap;
}
.live-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-2);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42, 37, 32, 0.4); }
  50% { opacity: 0.4; box-shadow: 0 0 0 6px rgba(42, 37, 32, 0); }
}
.live-strip strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1;
}
.live-sep { color: var(--ink-4); }
.live-secondary {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.live-flags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-right: 12px;
}
.cohort-select {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.cohort-select select {
  height: 28px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-card)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%237a7065' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 10px center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
.live-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--cream-1);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink-1);
  font-family: var(--font-mono);
}
.live-flag .emoji {
  font-size: 16px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif;
  font-style: normal;
  font-variant-emoji: emoji;
}
.live-flag .count { font-weight: 600; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2.2fr;
  gap: 16px;
}
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero-roas {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
}
.hero-roas .kpi-label {
  color: var(--ink-3);
}
.hero-roas-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  color: var(--ink-0);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.hero-roas-num {
  font-size: 76px;
  font-weight: 500;
}
.hero-roas-x {
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-3);
  margin-left: 4px;
}

.hero-roas-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
}
.hero-dot.pos { background: var(--ink-0); }
.hero-dot.mid { background: var(--ink-2); }
.hero-dot.neg { background: var(--ink-4); }
.hero-roas-delta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.hero-roas-foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-card {
  position: relative;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.18s ease;
}
.kpi-card:hover {
  border-color: var(--ink-4);
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variation-settings: "opsz" 60;
}
.kpi-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-body);
}

.dist-bar {
  display: flex;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0 4px;
  background: var(--cream-2);
}
.dist-seg {
  display: block;
  height: 100%;
}
.dist-seg.dist-profit  { background: var(--ink-1); }
.dist-seg.dist-losing  { background: var(--ink-3); }
.dist-seg.dist-passive { background: var(--ink-4); }

.btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  letter-spacing: 0.005em;
}
.btn-primary {
  background: var(--accent-1);
  color: #fff;
  border-color: var(--accent-1);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn-secondary {
  background: var(--bg-surface);
  color: var(--ink-1);
  border-color: var(--line);
}
.btn-secondary:hover {
  border-color: var(--accent-2);
  color: var(--accent-1);
}

/* KPI delta chip — Clickora-style: arrow triangle + % + 'vs last' caption */
.kpi-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kpi-delta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.kpi-delta.pos { background: var(--signal-pos-soft); color: var(--signal-pos); }
.kpi-delta.neg { background: var(--signal-neg-soft); color: var(--signal-neg); }
.kpi-delta.flat { background: var(--bg-soft); color: var(--ink-3); }
.kpi-delta::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.kpi-delta.pos::before { border-bottom: 6px solid var(--signal-pos); }
.kpi-delta.neg::before { border-top: 6px solid var(--signal-neg); }
.kpi-delta.flat::before {
  width: 6px; height: 1px;
  background: var(--ink-3);
  border: none;
}
.kpi-delta-caption {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}

/* Force the hero / KPI panels to the new flat white look (override
   shadows / cream fills inherited from the legacy palette). */
.hero-roas,
.live-strip {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* KPI grid wrapper with a small toolbar (Cards button on the right) */
.kpi-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-grid-toolbar {
  display: flex;
  justify-content: flex-end;
}
.kpi-cards-wrap {
  margin: 0;
}
.kpi-cards-wrap .tt-columns-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}
.kpi-cards-wrap .tt-columns-pop {
  right: 0;
  left: auto;
}
/* Mini bar chart inside KPI cards — bars stretch to fill the full card
   width regardless of how many points are in the series. */
.kpi-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 70px;
  margin-top: 16px;
  width: 100%;
}
.kpi-bar {
  flex: 1 1 0;
  min-width: 4px;
  max-width: 60px;     /* only kicks in if there are very few bars */
  background: #cbd5e1;
  border-radius: 3px;
  min-height: 8px;
  transition: background .15s ease;
}
.kpi-bar.is-highlight {
  background: var(--accent-1);
  border-radius: 3.5px;
  min-width: 6px;
  max-width: 64px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.kpi-card:hover .kpi-bar:not(.is-highlight) {
  background: #94a3b8;        /* slate-400 on hover */
}

/* "Maturing" bars: paying-subs days within the trial window haven't had
   time to convert yet. Draw them as a diagonal-striped, washed-out chip
   so the user knows the 0 isn't a real zero, it just hasn't matured. */
.kpi-bar.is-maturing {
  background: repeating-linear-gradient(
    -45deg,
    #e2e8f0 0,
    #e2e8f0 4px,
    #cbd5e1 4px,
    #cbd5e1 8px
  );
  opacity: 0.7;
  box-shadow: none;
}
.kpi-bar.is-maturing:hover {
  opacity: 0.95;
  transform: scaleY(1.02);
}

/* Distribution section (donut charts) — compact */
.distribution-section { margin-top: 14px; }
.dist-section-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.dist-metric .btn {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--ink-2);
  font-size: 11px;
  padding: 3px 11px;
  font-weight: 600;
}
.dist-metric .btn.active {
  background: var(--bg-surface);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.dist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) {
  .dist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .dist-grid { grid-template-columns: 1fr; }
}
.dist-card.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft) !important;
}
.dist-card .card-body {
  padding: 12px 14px !important;
}
.dist-card .kpi-label {
  display: block;
  margin-bottom: 4px;
  font-size: 9.5px;
}
.dist-donut-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 6px;
}
.dist-donut {
  width: 108px;
  height: 108px;
  display: block;
}
.dist-slice {
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  transform-origin: 50% 50%;
}
.dist-slice:hover { opacity: 0.85; }
.dist-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  max-height: 120px;
  overflow-y: auto;
  min-height: 95px;
}
.dist-legend::-webkit-scrollbar { width: 6px; }
.dist-legend::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.dist-legend-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  gap: 6px;
  padding: 2px 0;
  align-items: center;
}
.dist-leg-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  display: inline-block;
}
.dist-leg-name {
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 12px;
}
.dist-leg-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  font-weight: 600;
}
.dist-leg-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  min-width: 38px;
  text-align: right;
}
.dist-legend-empty {
  color: var(--ink-3);
  font-size: 11px;
  font-style: italic;
}

/* Profitability card — stacked bar instead of donut */
.profit-big {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 14px;
}
.profit-big strong {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1;
}
.profit-big-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profit-stacked {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-soft-2);
  margin-bottom: 12px;
  gap: 1px;
}
.profit-seg {
  display: block;
  min-width: 0;
  transition: filter .15s ease;
}
.profit-seg:hover { filter: brightness(1.08); }
.profit-seg-pos { background: var(--signal-pos); }
.profit-seg-neg { background: var(--signal-neg); }
.profit-seg-mid { background: var(--ink-4); }

.profit-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.profit-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-1);
}
.profit-legend li .dot {
  width: 8px; height: 8px;
  border-radius: 2px;
}
.profit-legend li .dot.pos { background: var(--signal-pos); }
.profit-legend li .dot.neg { background: var(--signal-neg); }
.profit-legend li .dot.mid { background: var(--ink-4); }
.profit-legend li strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-1);
  font-weight: 700;
}
.dist-tip {
  position: fixed;
  pointer-events: none;
  background: var(--ink-0);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  z-index: 1000;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dist-tip strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
}

/* --- New palette applied to legacy modals (drill / manage / settings) --- */
.modal {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
}
.modal-head {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-surface);
}
.modal-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.modal-tabs {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
}
.modal-tabs .tab {
  color: var(--ink-3);
  font-weight: 600;
}
.modal-tabs .tab.active {
  color: var(--accent-1);
  border-bottom-color: var(--accent-1);
  background: var(--bg-surface);
}
.modal-foot {
  background: var(--bg-surface);
  border-top: 1px solid var(--line-soft);
}
.manage-sidebar,
.manage-filters {
  background: var(--bg-soft) !important;
  border-color: var(--line) !important;
}
.manage-detail {
  background: var(--bg-surface);
}
.drill-table,
.data-table.drill-table {
  background: var(--bg-surface);
}
.drill-table th {
  background: var(--bg-soft);
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.drill-table td {
  border-bottom: 1px solid var(--line-soft);
}
.adgroup-block {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.adgroup-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
}
.adgroup-head h5 {
  font-family: var(--font-display);
  color: var(--ink-0);
}
.act-btn {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.act-btn:hover {
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.filter-chip {
  background: var(--bg-surface);
  border-color: var(--line);
  color: var(--ink-2);
}
.filter-chip.active {
  background: var(--accent-1);
  border-color: var(--accent-1);
  color: #fff;
}
.match-type {
  background: var(--bg-soft-2);
  color: var(--ink-2);
}
.status-chip.running .dot { background: var(--signal-pos); }
.status-chip.paused .dot { background: var(--ink-4); }
.drill-section h4 {
  font-family: var(--font-display);
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.kw-toolbar input[type="search"] {
  background: var(--bg-surface);
  border-color: var(--line);
}

/* === Skeleton shimmer (loading state) === */
@keyframes blstShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel,
body.app-loading .skel-on {
  background: linear-gradient(
    90deg,
    #eef1f7 0%,
    #f8fafc 45%,
    #f8fafc 55%,
    #eef1f7 100%
  );
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
  color: transparent !important;
  border-radius: 4px;
  user-select: none;
}
.skel-line {
  display: block;
  height: 12px;
  background: linear-gradient(
    90deg,
    #eef1f7 0%,
    #f8fafc 45%,
    #f8fafc 55%,
    #eef1f7 100%
  );
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
  border-radius: 4px;
}
.skel-circle {
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #eef1f7 0%,
    #f8fafc 45%,
    #f8fafc 55%,
    #eef1f7 100%
  );
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
}

/* Live-strip tiles: shimmer the value, sub and delta during initial load */
body.app-loading .live-strip-v2 .ls-row strong,
body.app-loading .live-strip-v2 #liveBlendedRoas {
  background: linear-gradient(90deg, #eef1f7, #f8fafc, #eef1f7);
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
  color: transparent !important;
  border-radius: 6px;
  min-width: 80px;
  height: 26px;
  display: inline-block;
}
body.app-loading .live-strip-v2 .ls-sub,
body.app-loading .live-strip-v2 .ls-delta {
  background: linear-gradient(90deg, #eef1f7, #f8fafc, #eef1f7);
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
  color: transparent !important;
  border-radius: 4px;
  min-width: 100px;
  height: 12px;
  display: inline-block;
}

/* KPI cards: shimmer the value + sub + delta + bars during initial load */
body.app-loading .kpi-card .kpi-value,
body.app-loading .kpi-card .kpi-sub,
body.app-loading .kpi-card .kpi-delta {
  background: linear-gradient(90deg, #eef1f7, #f8fafc, #eef1f7);
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
  color: transparent !important;
  border-radius: 6px;
  display: inline-block;
}
body.app-loading .kpi-card .kpi-value { min-width: 100px; height: 32px; }
body.app-loading .kpi-card .kpi-sub { min-width: 120px; height: 12px; margin-top: 6px; }
body.app-loading .kpi-card .kpi-delta { min-width: 80px; height: 18px; }
body.app-loading .kpi-card .kpi-delta-caption { display: none; }
body.app-loading .kpi-card .kpi-bars .kpi-bar {
  background: #e3e7ef !important;
  animation: blstShimmer 1.4s linear infinite;
}

/* Distribution donuts: overlay shimmer */
body.app-loading .dist-card .dist-donut {
  visibility: hidden;
}
body.app-loading .dist-card .dist-donut-wrap {
  position: relative;
}
body.app-loading .dist-card .dist-donut-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 38%, #eef1f7 38.5%, #eef1f7 65%, transparent 65.5%);
  animation: blstShimmer 1.4s linear infinite;
  background-size: 200% 200%;
}
body.app-loading .dist-legend li,
body.app-loading .dist-legend-row {
  background: linear-gradient(90deg, #eef1f7, #f8fafc, #eef1f7);
  background-size: 200% 100%;
  animation: blstShimmer 1.4s linear infinite;
  color: transparent !important;
  border-radius: 4px;
  margin-bottom: 4px;
  height: 14px;
}

/* Table: skeleton rows replace empty body during initial load */
body.app-loading #tableBody tr.skel-row td {
  padding: 12px 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line-soft);
}
.skel-row .skel-line { height: 14px; }

/* World map: dim it while loading; the existing #trialsMapLoading text still shows */
body.app-loading #trialsMapSvg { opacity: 0.4; }
body.app-loading #trialsMapLoading {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--ink-2);
}

/* === Live strip v2 — clean tile layout, no "LIVE" tag, no flags === */
.live-strip-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0;
  margin-bottom: 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.live-strip-v2 .ls-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.live-strip-v2 .ls-divider { display: none; }
@media (max-width: 900px) {
  .live-strip-v2 { grid-template-columns: repeat(2, 1fr); }
}
.live-strip-v2 .ls-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.live-strip-v2 .ls-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.live-strip-v2 .ls-row strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1;
}
.live-strip-v2 .ls-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.live-strip-v2 .ls-delta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-soft-2);
  color: var(--ink-3);
}
.live-strip-v2 .ls-delta.pos { background: var(--signal-pos-soft); color: var(--signal-pos); }
.live-strip-v2 .ls-delta.neg { background: var(--signal-neg-soft); color: var(--signal-neg); }
.live-strip-v2 .cohort-select {
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.live-strip-v2 #liveBlendedRoas {
  font-size: 26px;
  font-weight: 700;
}
.live-strip-v2 #liveBlendedRoas.pos { color: var(--signal-pos); }
.live-strip-v2 #liveBlendedRoas.mid { color: var(--accent-1); }
.live-strip-v2 #liveBlendedRoas.neg { color: var(--signal-neg); }

@media (max-width: 1100px) {
  .live-strip-v2 { flex-wrap: wrap; }
  .live-strip-v2 .ls-tile { flex-basis: 45%; padding: 8px 12px; }
  .live-strip-v2 .ls-divider { display: none; }
  .live-strip-v2 .cohort-select { padding-left: 12px; border-left: none; }
}

/* Compact Blended ROAS chip living in the live-strip */
.hero-roas-num-compact {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  line-height: 1;
}
.hero-roas-num-compact.pos { color: var(--signal-pos); }
.hero-roas-num-compact.mid { color: var(--accent-1); }
.hero-roas-num-compact.neg { color: var(--signal-neg); }

/* Trials map card — now the entire left column of the hero-grid */
.trials-map-card.hero-roas {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
}
.trials-map-card .trials-map-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.trials-map-card .trials-map-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.3;
}
.trials-map-card .trials-map-wrap {
  width: 100%;
  flex: 1;
  min-height: 200px;
  aspect-ratio: 720 / 360;
}
.trials-map-card #trialsMapSvg {
  width: 100%;
  height: 100%;
  display: block;
}
.trials-map-card .trials-map-legend {
  font-size: 10px;
}
.trials-map-card .btn-group.trials-map-mode .btn {
  font-size: 11.5px;
  padding: 3px 10px;
}
.trials-map-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.btn-group.trials-map-mode .btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  color: var(--ink-2);
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.btn-group.trials-map-mode .btn:hover {
  background: #e2e8f0;
  color: var(--ink-1);
}
.btn-group.trials-map-mode .btn.active {
  background: #ffffff;
  color: var(--accent-1);
  border-color: var(--accent-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.trials-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.trials-map-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.trials-map-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.trials-map-mode {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 3px;
}
.trials-map-mode .filter-chip {
  border: none;
  background: transparent;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 600;
}
.trials-map-mode .filter-chip.active {
  background: var(--bg-surface);
  color: var(--accent-1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.trials-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 380px;
}
#trialsMapSvg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Skeleton patterns used by modals while their data loads */
.skel-card .skel-line {
  display: inline-block;
  height: 14px;
  border-radius: 4px;
}
.skel-card .mcc-row1,
.skel-card .mcc-row2 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.skel-card .mcc-row1 { margin-bottom: 8px; }
.skel-card .mcc-row2 { margin-bottom: 10px; }
.skel-card .mcc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
}
.skel-card .mcc-kpi {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.skel-card .mcc-kpi .skel-line { height: 11px; }

.skel-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 6px;
}
.skel-detail-head { margin-bottom: 6px; }
.skel-detail-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.skel-detail-block {
  display: flex;
  flex-direction: column;
}
.manage-empty-hint {
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  padding: 60px 24px;
  font-style: italic;
}

/* Live trial pulse markers (red dots that fade in over 3 minutes) */
@keyframes tmap-pulse-ring {
  0%   { r: 4; opacity: 0.65; }
  100% { r: 22; opacity: 0; }
}
@keyframes tmap-pulse-core {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.08); }
}
.tmap-pulse {
  pointer-events: auto;
}
.tmap-pulse-ring {
  fill: rgba(239, 68, 68, 0.55);
  animation: tmap-pulse-ring 1.7s ease-out infinite;
  transform-origin: center;
}
.tmap-pulse-ring-2 {
  animation-delay: 0.85s;
}
.tmap-pulse-core {
  fill: #ef4444;
  stroke: #fff;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.45));
  animation: tmap-pulse-core 1.7s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.tmap-pulse-badge-bg {
  fill: #ef4444;
  stroke: #fff;
  stroke-width: 1.2;
}

/* Choropleth country paths */
.tmap-country {
  fill: #f1f4f9;
  stroke: #cbd5e1;
  stroke-width: 0.35;
  transition: fill 0.15s ease, stroke-width 0.15s ease;
  cursor: default;
}
.tmap-country.has-data { cursor: pointer; }
.tmap-country:hover {
  stroke: var(--accent-1);
  stroke-width: 0.8;
  filter: brightness(1.04);
}
.trials-map-loading {
  font-family: var(--font-mono);
  font-size: 12px;
}
.trials-map-tip {
  position: absolute;
  pointer-events: none;
  background: var(--ink-0);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  min-width: 160px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  z-index: 5;
}
.tmap-tip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}
.tmap-tip-head .emoji { font-size: 14px; }
.tmap-tip-iso {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  margin-left: auto;
}
.tmap-tip-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 0;
}
.tmap-tip-row span { color: var(--ink-4); }
.tmap-tip-row strong { color: #fff; font-weight: 700; }

.trials-map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.tm-leg-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
}
.tm-leg-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.tm-leg-swatch[data-tier="1"]  { background: #93c5fd; }
.tm-leg-swatch[data-tier="5"]  { background: #3b82f6; }
.tm-leg-swatch[data-tier="10"] { background: #2563eb; }
.tm-leg-swatch[data-tier="20"] { background: #1d4ed8; }

/* Override the harsh dark dist-bar palette to fit the new clean look */
.dist-bar {
  background: var(--bg-soft-2);
}
.dist-seg.dist-profit  { background: var(--signal-pos); }
.dist-seg.dist-losing  { background: var(--signal-neg); }
.dist-seg.dist-passive { background: var(--ink-4); }

/* Filters row: cleaner pills */
.filters .filter-select {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 12.5px;
}
.filters .filter-select:hover {
  border-color: var(--accent-2);
}
.refresh-btn {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.refresh-btn:hover { color: var(--accent-1); border-color: var(--accent-2); }

/* Data table — clean white look */
.data-table {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.data-table th {
  background: var(--bg-soft);
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.data-table td {
  border-bottom: 1px solid var(--line-soft);
}
.data-table tr.campaign-row:hover td {
  background: var(--bg-soft);
}

/* ============= FILTERS ============= */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.refresh-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.refresh-btn:hover {
  border-color: var(--ink-3);
  background: var(--cream-1);
  color: var(--ink-0);
}
.refresh-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.filter-select {
  height: 40px;
  padding: 0 36px 0 16px;
  background: var(--bg-card)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%237a7065' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 14px center;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 140px;
}
.filter-select:hover {
  border-color: var(--ink-3);
}
.filter-select:focus {
  outline: 2px solid rgba(20, 17, 13, 0.15);
  outline-offset: 1px;
  border-color: var(--ink-0);
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
}
#nameFilter {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-1);
}
#nameFilter:focus {
  outline: 2px solid rgba(20, 17, 13, 0.15);
  outline-offset: 1px;
  border-color: var(--ink-0);
}

/* ============= TABLE ============= */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 30px -20px rgba(74, 66, 57, 0.25);
}

.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.data-table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-feature-settings: "tnum" 1;
  table-layout: fixed;
  font-family: var(--font-body);
}

.data-table th,
.data-table td {
  padding: 7px 10px;
  text-align: left;
  font-size: 12.5px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-body);
}
.data-table tbody td {
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--line-soft);
}
.data-table tbody tr:hover td {
  background: var(--bg-soft);
}

/* Column widths now controlled per-column via JS (TABLE_COLUMNS config)
   so the user can resize them and persist preferences. */
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

/* Columns button — lives inline with the filter row, sits to the right
   so it visually groups with the search input. Same height as the filter
   selects for a clean alignment. */
.tt-columns-wrap {
  position: relative;
  margin-left: auto;     /* push to the right edge of the filters row */
}
.tt-columns-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 40px;          /* match .filter-select / search input height */
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.tt-columns-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-1);
}
.tt-columns-btn[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.tt-columns-btn svg { color: var(--accent-1); flex-shrink: 0; }
.tt-columns-pop { right: 0; left: auto; }   /* drop towards the left so it doesn't overflow viewport */
.tt-columns-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.14),
    0 4px 8px rgba(15, 23, 42, 0.06);
  z-index: 300;
  overflow: hidden;
}
.tt-columns-pop[hidden] { display: none; }
.tt-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.tt-col-head span:first-child {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.005em;
  text-transform: none;
}
.tt-col-reset {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.tt-col-reset:hover {
  background: var(--accent-soft);
  color: var(--accent-1);
  border-color: var(--accent-2);
  text-decoration: none;
}
.tt-col-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.tt-col-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-1);
  font-weight: 500;
  transition: background .12s ease;
}
.tt-col-row:hover { background: var(--bg-soft); }
.tt-col-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--bg-surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease;
}
.tt-col-row input[type="checkbox"]:hover {
  border-color: var(--accent-2);
}
.tt-col-row input[type="checkbox"]:checked {
  background: var(--accent-1);
  border-color: var(--accent-1);
}
.tt-col-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Column resize handle on each <th> right edge.
   ``overflow: visible`` on header cells is required so the absolutely
   positioned handle (which lives at right:0 of the th) doesn't get
   clipped by the data-table's default `overflow: hidden`. */
.data-table thead .header-row th {
  position: relative;
  overflow: visible;
}
.col-resizer {
  position: absolute;
  top: 0;
  right: -4px;        /* sits half on the gap, half on the cell — easier grab */
  width: 9px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
  display: block;
}
.col-resizer::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 4px;
  width: 1px;
  height: 50%;
  background: var(--line);
  transition: background .15s ease, width .15s ease, left .15s ease;
}
.col-resizer:hover::after {
  width: 2px;
  left: 3px;
  background: var(--accent-1);
  top: 10%;
  height: 80%;
}
body.is-resizing-col {
  cursor: col-resize !important;
  user-select: none;
}
body.is-resizing-col .col-resizer::after {
  background: var(--accent-1);
  width: 2px;
  left: 3px;
}
body.is-resizing-col * {
  cursor: col-resize !important;
}

.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-row th {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--cream-1) 100%);
  padding: 10px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cell-stack .label {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cell-stack strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 24;
}
.cell-stack .muted {
  font-size: 10.5px;
  color: var(--ink-3);
}

.summary-row .label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.summary-row .big {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-0);
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.012em;
}
.summary-row .big.pos,
.summary-row .big.neg,
.summary-row .big.money {
  color: var(--ink-0);
}
.summary-row .big.roas {
  color: var(--ink-0);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.summary-row .big.roas::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.summary-row .big.roas.pos::before {
  background: var(--ink-0);
}
.summary-row .big.roas.mid::before {
  background: var(--ink-3);
}
.summary-row .big.roas.neg::before {
  background: transparent;
  border: 1px solid var(--ink-4);
  width: 6px;
  height: 6px;
}

.summary-row .delta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  margin-top: 2px;
  color: var(--ink-3);
}

.header-row th {
  background: var(--cream-1);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody tr {
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background 0.12s ease;
}
tbody tr:hover {
  background: var(--bg-soft);
}
tbody tr:last-child {
  border-bottom: none;
}

.profit-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.profit-bar.profitable {
  background: var(--ink-1);
}
.profit-bar.losing {
  background: transparent;
  border-left: 1px dashed var(--ink-4);
  left: 1px;
}
.profit-bar.passive {
  background: var(--cream-2);
}

.campaign-cell {
  position: relative;
  padding-left: 16px !important;
  font-weight: 500;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  background: transparent;
}
.status-chip.running {
  color: var(--ink-1);
}
.status-chip.paused {
  color: var(--ink-4);
}
.status-chip .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status-chip.paused .dot {
  background: transparent;
  border: 1px solid currentColor;
}

.num-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.num-stack .val {
  font-weight: 500;
  color: var(--ink-1);
}
.num-stack .val.money {
  color: var(--ink-1);
  font-weight: 500;
}
.num-stack .val.pos,
.num-stack .val.neg {
  color: var(--ink-1);
  font-weight: 500;
}
.num-stack .val.roas {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.02em;
  position: relative;
  padding-right: 12px;
  color: var(--ink-1);
}
.num-stack .val.roas::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-4);
}
.num-stack .val.roas.pos {
  color: var(--ink-0);
  font-weight: 600;
}
.num-stack .val.roas.pos::after {
  background: var(--ink-0);
}
.num-stack .val.roas.neg {
  color: var(--ink-3);
}
.num-stack .val.roas.neg::after {
  background: transparent;
  border: 1px solid var(--ink-4);
  width: 5px;
  height: 5px;
}
.num-stack .val.roas.mid::after {
  background: var(--ink-3);
}
.num-stack .delta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-4);
}
.num-stack .delta.up,
.num-stack .delta.down {
  color: var(--ink-3);
}

.loading-cell {
  text-align: center;
  padding: 60px 20px !important;
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--font-display);
  font-size: 16px;
}

/* ============= FOOTER ============= */
.footer {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
.footer a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pill-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink-2);
  margin: 0 3px;
}

/* ============= MASKED MODE ============= */
/* === Mask data (clean twin-span pattern, no absolute overlays) ===
   For each maskable label we hide the real text and reveal a sibling
   span with bullets. Predictable layout, no overlap with neighboring
   widgets (AP toggle, AI badge, etc.). */
.camp-name-mask,
.mcc-name-mask,
.dist-leg-name-mask,
.ap-change-target-mask,
.org-name-mask,
.sb-org-name-mask {
  display: none;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  font-weight: 500;
}
body.masked .camp-name { display: none; }
body.masked .camp-name-mask { display: inline; }

body.masked .org-name,
body.masked .sb-org-name {
  color: transparent;
  text-shadow: 0 0 0 var(--ink-1);
}
body.masked .org-name::after,
body.masked .sb-org-name::after {
  content: "•••••••";
  color: var(--ink-1);
  letter-spacing: 0.06em;
  margin-left: -100%;
}

/* For donut legend and manage cards, replace the visible text with bullets.
   These are simple text spans without sibling widgets so the previous
   absolute-overlay approach works fine here. */
body.masked .dist-leg-name,
body.masked .manage-camp-name,
body.masked .mcc-name,
body.masked .mcc-app,
body.masked .ap-change-target,
body.masked .tmap-tip-head strong {
  color: transparent !important;
  position: relative;
}
body.masked .dist-leg-name::before,
body.masked .manage-camp-name::before,
body.masked .mcc-name::before,
body.masked .mcc-app::before,
body.masked .ap-change-target::before,
body.masked .tmap-tip-head strong::before {
  content: "•••••••";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}
/* AI suggest badge is NOT sensitive ("AI" letters only) — don't mask it. */

/* ============= SETTINGS MODAL ============= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  font-family: var(--font-body);
}
.modal-backdrop.open {
  display: flex;
}
.modal-backdrop * { font-family: var(--font-body); }
.modal-backdrop code,
.modal-backdrop .font-mono,
.modal-backdrop .label,
.modal-backdrop .field-hint code {
  font-family: var(--font-mono);
}
/* Sub-modals launched from inside another modal must stack above their parent. */
#aiNewCampModal,
#apHistModal,
#apHistMainModal,
#blankCampaignModal {
  z-index: 250;
}
/* Bootstrap ships its own .modal { position:fixed; top:0; left:0; ... }
   that conflicts with ours. Use a parent-scoped selector so we win on
   specificity without needing !important — that way modal-fullscreen
   and modal-wide can still set their own height/width below. */
.modal-backdrop > .modal {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 24px 50px -12px rgba(15, 23, 42, 0.25),
    0 8px 16px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  font-family: var(--font-body);
}
.modal-backdrop > .modal.modal-wide {
  max-width: 1100px;
}
.modal-backdrop > .modal.modal-fullscreen {
  max-width: calc(100vw - 32px);
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
}
/* Roomy modals — most analytical modals look cramped at 720x420. Force
   a comfortable working area for AI account review, Auto Pilot history,
   AI Campaign planner, etc. */
.modal-backdrop > .modal.modal-tall {
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  min-height: 560px;
}
/* Head icon + title block in the new modal layout */
.modal-head-titlebox {
  display: flex;
  align-items: center;
  gap: 14px;
}
.modal-head-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-head .modal-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--font-body);
}
/* Controls section (sits between header and body) */
.modal-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.modal-section-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.ms-block { flex: 1 1 auto; min-width: 0; }
.ms-block-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.ms-block-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.ms-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.btn-lg {
  font-size: 13px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Roomy body — extra padding for analytical reports */
.modal-body.modal-body-roomy {
  padding: 24px 22px;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Empty state for analytical modals — replaces "Pick X" text with a card */
.ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  max-width: 480px;
  margin: 40px auto 0;
  color: var(--ink-2);
}
.ai-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ai-empty-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-0);
}
.ai-empty-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}
.ai-empty-sub strong { color: var(--ink-1); font-weight: 600; }

/* ============= DRILL MODAL V2 (Campaign detail redesign) ============= */
.drv2-hero {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 18px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.drv2-hero-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px;
}
.drv2-hero-tile:first-child { padding-left: 0; }
.drv2-divider {
  width: 1px;
  background: var(--line);
  margin: 4px 0;
}
.drv2-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.drv2-hero-tile strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.drv2-hero-tile strong.roas.pos { color: var(--signal-pos); }
.drv2-hero-tile strong.roas.mid { color: var(--accent-1); }
.drv2-hero-tile strong.roas.neg { color: var(--signal-neg); }
.drv2-sub {
  font-size: 11.5px;
  color: var(--ink-3);
}

.drv2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.drv2-panel {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.drv2-panel-wide { grid-column: 1 / -1; }
.drv2-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.drv2-panel-head h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.005em;
}
.drv2-panel-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* Daily revenue chart inside panel */
.drv2-daily-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
  width: 100%;
}
.drv2-bar {
  flex: 1 1 0;
  min-width: 5px;
  max-width: 30px;
  background: #cbd5e1;
  border-radius: 3px;
  min-height: 6px;
  cursor: help;
  transition: background .15s ease, transform .12s ease;
}
.drv2-bar:hover { background: var(--accent-3); transform: scaleY(1.04); transform-origin: bottom; }
.drv2-bar.is-today { background: var(--accent-1); }
.drv2-daily-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.drv2-daily-foot strong { color: var(--ink-0); font-weight: 700; }

/* Funnel rows */
.drv2-funnel { display: flex; flex-direction: column; gap: 10px; }
.drv2-fnl-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: 12px;
  align-items: center;
}
.drv2-fnl-label { font-size: 12px; color: var(--ink-2); }
.drv2-fnl-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-soft-2);
  border-radius: 4px;
  overflow: hidden;
}
.drv2-fnl-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.drv2-fnl-val {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-1);
  font-weight: 700;
}
.drv2-fnl-foot {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-3);
}
.drv2-fnl-foot strong { color: var(--ink-0); }

/* Country list */
.drv2-country-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drv2-ctry-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.drv2-ctry-row:last-child { border-bottom: none; }
.drv2-ctry-name { font-size: 12.5px; color: var(--ink-1); font-weight: 500; }
.drv2-ctry-bar {
  display: block;
  height: 6px;
  background: var(--bg-soft-2);
  border-radius: 3px;
  overflow: hidden;
}
.drv2-ctry-bar span {
  display: block;
  height: 100%;
  background: var(--accent-1);
  border-radius: 3px;
}
.drv2-ctry-val {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-1);
  font-weight: 600;
}

.drv2-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  font-size: 12.5px;
}

/* Responsive: stack panels on narrow screens */
@media (max-width: 980px) {
  .drv2-grid { grid-template-columns: 1fr; }
  .drv2-hero { flex-wrap: wrap; }
  .drv2-hero-tile { flex-basis: 45%; padding: 8px 12px; }
  .drv2-divider { display: none; }
}
/* Keep the legacy .modal selector empty (overridden by the scoped one
   above). It's only here as a no-op so any stale references still match. */
.modal { display: flex; flex-direction: column; }
.modal.modal-wide {
  max-width: 1100px;
}
.modal.modal-fullscreen {
  max-width: calc(100vw - 32px);
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
}
.manage-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1200px) {
  .manage-layout { grid-template-columns: 320px 1fr; }
}
.manage-sidebar {
  border-right: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--cream-1);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.manage-filters {
  background: var(--cream-1);
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.manage-filters input[type="search"] {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-1);
  margin-bottom: 10px;
}
.manage-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.manage-filter-row:last-child { margin-bottom: 0; }
.manage-filter-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 44px;
}
.manage-status-chips,
.manage-app-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.manage-status-chips .filter-chip,
.manage-app-chips .filter-chip {
  font-size: 11px;
  padding: 3px 9px;
}
.manage-app-chips .filter-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ---- Manage modal: app selector (replaces the chip strip) ---- */
.manage-app-select-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.manage-app-select {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-1);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.manage-app-select:hover { border-color: var(--ink-3); }
.manage-app-select-wrap.open .manage-app-select {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.manage-app-select-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-app-select-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-soft);
}
.manage-app-select-chev {
  font-size: 9px;
  color: var(--ink-3);
  transition: transform 0.15s ease;
}
.manage-app-select-wrap.open .manage-app-select-chev { transform: rotate(180deg); }
.manage-app-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 4px;
  display: none;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}
.manage-app-select-wrap.open .manage-app-menu { display: block; }
.manage-app-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  text-align: left;
}
.manage-app-opt:hover { background: var(--bg-soft); }
.manage-app-opt.selected {
  background: var(--accent-1);
  color: #fff;
}
.manage-app-opt.selected .opt-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.manage-app-opt .opt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-app-opt .opt-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-soft);
}

/* ============================================================
   AI Campaign Planner modal (redesigned)
   ============================================================ */
.aip-controls {
  background: var(--bg-soft);
}
.aip-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
/* When the CTA is inline with the inputs the grid becomes 4 fields +
   button — narrower columns so the button fits the row. The button column
   is sized to its content. */
.aip-form-with-cta {
  grid-template-columns: 1.1fr 1.1fr 1.1fr 0.8fr auto;
  margin-bottom: 0;
}
.aip-field-cta { display: flex; flex-direction: column; gap: 4px; }
.aip-cta-btn {
  height: 38px;
  padding: 0 18px;
  white-space: nowrap;
  align-self: end;
}
@media (max-width: 880px) {
  .aip-form-with-cta {
    grid-template-columns: repeat(2, 1fr);
  }
  .aip-field-cta { grid-column: 1 / -1; }
  .aip-cta-btn { width: 100%; }
}
.aip-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.aip-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.aip-input:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Country picker — visually identical to the sibling <select> inputs so
   the form row reads as one cohesive control strip. */
.aip-country-wrap { position: relative; }
.aip-country-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.aip-country-btn:hover { border-color: var(--ink-3); }
.aip-country-wrap.open .aip-country-btn {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.aip-country-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aip-country-chev {
  color: var(--ink-3);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.aip-country-wrap.open .aip-country-chev { transform: rotate(180deg); }
.aip-country-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  display: none;
  z-index: 100;
  overflow: hidden;
}
.aip-country-wrap.open .aip-country-pop { display: block; }
.aip-country-search {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-1);
  outline: none;
  box-sizing: border-box;
}
.aip-country-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.aip-country-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-1);
}
.aip-country-opt:hover { background: var(--bg-soft); }
.aip-country-opt.selected {
  background: var(--accent-1);
  color: #fff;
}
.aip-country-opt.selected .opt-code { background: rgba(255,255,255,0.22); color: #fff; }
.aip-country-opt .opt-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aip-country-opt .opt-code {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--ink-3);
}

/* Boot shimmer shown only until ASA apps + metadata finish loading. */
.aip-skeleton-idle .skel-block { opacity: 0.85; }

/* Static "Ready to plan" state shown once the form is fully populated. */
.aip-ready-state {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 4px 12px;
}
.aip-ready-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(37,99,235,0.07) 0%, rgba(37,99,235,0) 70%);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.aip-ready-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-1);
  color: #fff;
  border-radius: 12px;
}
.aip-ready-title {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
}
.aip-ready-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.aip-ready-sub strong { color: var(--ink-1); font-weight: 600; }

/* Stat strip showing what the AI is about to analyse */
.aip-ready-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.aip-ready-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.aip-ready-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1;
}
.aip-ready-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .aip-ready-stats { grid-template-columns: repeat(3, 1fr); }
}

/* Three quick-start archetypes that pre-fill the form */
.aip-quickstarts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aip-quickstarts-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 4px;
}
.aip-qs-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.aip-qs-card:hover {
  border-color: var(--accent-1);
  transform: translateX(2px);
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.15);
}
.aip-qs-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-1);
  border-radius: 9px;
}
.aip-qs-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.aip-qs-text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
}
.aip-qs-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}
.aip-qs-arrow {
  color: var(--ink-3);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.12s ease, color 0.12s ease;
}
.aip-qs-card:hover .aip-qs-arrow {
  transform: translateX(3px);
  color: var(--accent-1);
}

/* Brief flash when a quick-start pre-fills a select */
@keyframes aipFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  30% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22); }
}
.aip-flash { animation: aipFlash 0.55s ease; }

/* ============================================================
   Custom prompt / confirm dialog (replaces native window.prompt
   and window.confirm) — used by Manage actions: rename, bid,
   budget, target CPA, ad group create, keyword bulk add, etc.
   ============================================================ */
#customDialogHost {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  pointer-events: none;
}
#customDialogHost.open {
  display: block;
  pointer-events: auto;
}
.dlg-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
#customDialogHost.open .dlg-backdrop { opacity: 1; }
.dlg {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 32px 64px -16px rgba(15, 23, 42, 0.36),
              0 12px 24px -6px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}
#customDialogHost.open .dlg {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.dlg-compact { max-width: 420px; }
.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.dlg-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
}
.dlg-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.dlg-close:hover { background: var(--bg-soft); color: var(--ink-1); border-color: var(--ink-3); }
.dlg-desc {
  margin: 12px 18px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.dlg-body {
  padding: 14px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dlg-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-1);
}
.dlg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dlg-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dlg-field input[type="text"],
.dlg-field input[type="number"],
.dlg-field input[type="email"],
.dlg-field input[type="password"],
.dlg-field select,
.dlg-field textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-1);
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dlg-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.dlg-field input:focus,
.dlg-field select:focus,
.dlg-field textarea:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.dlg-field-check {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.dlg-field-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--accent-1); }
.dlg-check-label {
  font-size: 13.5px;
  color: var(--ink-1);
}
.dlg-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.dlg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.btn.btn-danger {
  background: var(--signal-neg);
  color: #fff;
  border-color: var(--signal-neg);
}
.btn.btn-danger:hover { filter: brightness(1.05); }

/* Full-page empty state shown when server-side dedup removed every
   proposed campaign (no hero, no projection, no Apply). */
.aip-empty-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 28px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.aip-empty-full h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.4;
}
.aip-empty-full h4 strong { color: var(--accent-1); }
.aip-empty-full > p {
  margin: 0;
  max-width: 540px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.aip-empty-skipped {
  width: 100%;
  max-width: 560px;
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
}
.aip-empty-skipped h5 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.aip-empty-skipped ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.aip-empty-skipped li { margin-bottom: 4px; }
.aip-empty-skipped li:last-child { margin-bottom: 0; }
.aip-empty-actions {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}
.aip-empty-actions .btn { display: inline-flex; align-items: center; gap: 7px; }

/* Compact empty result (kept for backward compat — when AI returns 0 camps
   without dedup intervention, still useful for templating). */
.aip-empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.aip-empty-result-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 163, 74, 0.12);
  color: var(--signal-pos);
  border-radius: 12px;
  margin-bottom: 4px;
}
.aip-empty-result h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
}
.aip-empty-result p {
  margin: 0;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.aip-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aip-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 720px) {
  .aip-form { grid-template-columns: repeat(2, 1fr); }
}

/* Hero */
.aip-hero {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07) 0%, rgba(37, 99, 235, 0) 60%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.aip-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.aip-hero-target {
  display: flex;
  align-items: center;
  gap: 14px;
}
.aip-country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--accent-1);
  color: #fff;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.aip-hero-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.aip-hero-app {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.2;
}
.aip-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.aip-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
.aip-chip-conf.aip-chip-high {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.4);
  color: var(--signal-pos);
}
.aip-chip-conf.aip-chip-medium {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.35);
  color: #b45309;
}
.aip-chip-conf.aip-chip-low {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--signal-neg);
}
.aip-hero-rationale {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Sections */
.aip-section { margin-bottom: 18px; }
.aip-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.aip-section-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
}
.aip-section-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* Metrics row */
.aip-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.aip-metric {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aip-metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.aip-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1;
}
.aip-metric-headline { background: var(--bg-soft); }
.aip-metric-value.v-up { color: var(--signal-pos); }
.aip-metric-value.v-mid { color: #b45309; }
.aip-metric-value.v-down { color: var(--signal-neg); }
@media (max-width: 720px) { .aip-metrics { grid-template-columns: repeat(2, 1fr); } }

/* Campaigns */
.aip-camps { display: flex; flex-direction: column; gap: 14px; }
.aip-camp {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.aip-camp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.aip-camp-title { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; }
.aip-camp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--accent-1);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.aip-camp-title h4 {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-1);
}
.aip-camp-rationale {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.aip-archetype {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.aip-arch-discovery { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.35); color: var(--accent-1); }
.aip-arch-brand { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.35); color: var(--signal-pos); }
.aip-arch-generic { background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.35); color: #b45309; }
.aip-arch-competitors { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); color: var(--signal-neg); }

.aip-camp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.aip-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aip-stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.aip-stat strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
}
.aip-camp-body { padding: 14px 18px; }
.aip-ag {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.aip-ag:last-of-type { margin-bottom: 8px; }
.aip-ag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.aip-ag-head h5 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}
.aip-ag-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.aip-ag-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg-soft);
}
.aip-kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.aip-kw-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.aip-kw-table th.num { text-align: right; }
.aip-kw-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-1);
}
.aip-kw-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
}
.aip-kw-table tr:last-child td { border-bottom: none; }
.aip-match {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--ink-2);
}
.aip-ag-empty {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}
.aip-negs {
  margin-top: 6px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.aip-negs > summary {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.aip-negs > summary::before { content: "▸ "; color: var(--ink-3); }
.aip-negs[open] > summary::before { content: "▾ "; }
.aip-negs p {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aip-neg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
}
.aip-neg em {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Footer with apply / regenerate */
.aip-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.aip-footer .btn { display: inline-flex; align-items: center; gap: 7px; }
.aip-footer .test-result { margin-left: auto; }

/* Skeleton shimmer while the AI is thinking */
@keyframes aipShimmer {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.aip-skeleton { display: flex; flex-direction: column; gap: 18px; }
.skel-block {
  background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(255,255,255,0.6) 50%, var(--bg-soft) 100%);
  background-size: 600px 100%;
  animation: aipShimmer 1.4s linear infinite;
  border-radius: 8px;
}
.aip-skel-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.skel-circle { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.skel-stack { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skel-line { height: 12px; }
.skel-w-40 { width: 40%; }
.skel-w-50 { width: 50%; }
.skel-w-65 { width: 65%; }
.skel-w-75 { width: 75%; }
.skel-w-90 { width: 90%; }
.skel-pill { width: 110px; height: 22px; border-radius: 999px; flex-shrink: 0; }
.aip-skel-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.skel-metric { height: 72px; border-radius: 12px; }
.aip-skel-camp {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.skel-grid-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.skel-row { height: 26px; border-radius: 6px; }
@media (max-width: 720px) { .aip-skel-metrics { grid-template-columns: repeat(2, 1fr); } }
.chip-count {
  margin-left: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  opacity: 0.7;
}
.filter-chip.active .chip-count { color: var(--cream-2); opacity: 0.85; }

#manageCampaignList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 8px 10px;
}

/* Sidebar footer: create-campaign buttons, visually separated */
.manage-sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--cream-1);
}
.btn-create {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.btn-create:hover {
  border-color: var(--olive-2);
  transform: translateY(-1px);
}
.btn-create:active {
  transform: translateY(0);
}
.btn-create-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.btn-create-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.btn-create-text strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-1);
}
.btn-create-text em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.btn-create-primary .btn-create-icon {
  background: var(--olive-1);
  color: var(--cream-0);
}
.btn-create-primary:hover {
  background: var(--cream-2);
}
.btn-create-secondary .btn-create-icon {
  background: var(--cream-2);
  color: var(--ink-2);
}

/* Blank Campaign modal form */
.bc-form .field { margin-bottom: 14px; }
.bc-form .field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.bc-form .field-row-2 .field { margin-bottom: 0; }
.field-money {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-card);
  overflow: hidden;
}
.field-money .prefix,
.field-money .suffix {
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: var(--cream-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  flex-shrink: 0;
}
.field-money .suffix {
  font-size: 11px;
  color: var(--ink-3);
}
.field-money input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 10px;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-1);
  min-width: 0;
}
.field-money input:focus { outline: none; }
.manage-detail {
  overflow-y: auto;
  padding: 18px 20px;
}
.manage-camp-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  margin-bottom: 2px;
}
.manage-camp-item:hover { background: var(--cream-2); }
.manage-camp-item.selected {
  background: var(--olive-1);
  color: var(--cream-0);
  border-color: var(--olive-1);
}
.manage-camp-item .meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.manage-camp-item.selected .meta { color: rgba(244, 233, 208, 0.6); }
.status-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  margin-left: 4px;
}
.status-tag.enabled, .status-tag.active, .status-tag.running { background: var(--cream-1); color: var(--ink-1); border: 1px solid var(--line); }
.status-tag.paused { background: transparent; color: var(--ink-3); border: 1px solid var(--ink-4); }

.adgroup-block {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  margin-bottom: 14px;
  background: var(--bg-card);
  overflow: hidden;
}
.adgroup-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cream-1);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.adgroup-head h5 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.adgroup-head .stats {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  text-align: right;
}
.adgroup-head .stats strong { color: var(--ink-0); }
.adgroup-body { padding: 12px 16px; display: none; }
.adgroup-block.open .adgroup-body { display: block; }
.adgroup-body h6 {
  margin: 12px 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.adgroup-body h6:first-child { margin-top: 0; }
.empty-line { font-size: 12px; color: var(--ink-4); font-style: italic; }

.act-btn {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  cursor: pointer;
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.act-btn:hover { border-color: var(--ink-2); color: var(--ink-0); }
.act-btn:active { background: var(--cream-2); }
.act-btn[disabled],
.act-btn.locked {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
  font-style: italic;
}
.ag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.ag-actions .act-btn { margin-left: 0; }

.delta-cell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.delta-cell.delta-up { color: var(--signal-pos); }
.delta-cell.delta-down { color: var(--signal-neg); }

.verdict {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.verdict.v-up { color: var(--signal-pos); border-color: var(--signal-pos); }
.verdict.v-down { color: var(--signal-neg); border-color: var(--signal-neg); }
.verdict.v-flat { color: var(--ink-3); }
.verdict.v-wait { color: var(--ink-3); font-style: italic; }

.history-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hk-card {
  flex: 1;
  min-width: 110px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
}
.hk-card.big { background: var(--cream-1); border-color: var(--line); }
.hk-card.pos strong { color: var(--signal-pos); }
.hk-card.neg strong { color: var(--signal-neg); }
.hk-card .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.hk-card strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 28;
}
.history-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.filter-chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.filter-chip:hover { border-color: var(--ink-2); }
.filter-chip.active { background: var(--ink-1); color: var(--cream-0); border-color: var(--ink-1); }
.filter-chip .ct {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.8;
  margin-left: 2px;
}

.history-row { cursor: pointer; }
.history-row .exp-toggle {
  width: 18px;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.history-row:hover td { background: rgba(232, 217, 179, 0.18); }
.history-expand td { background: var(--cream-1); padding: 12px 16px !important; }
.history-expand-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .history-expand-body { grid-template-columns: 1fr; }
}
.sl-block {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.sl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.sl-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.sl-avg { color: var(--ink-3); font-size: 11px; font-family: var(--font-mono); }
.sl-avg .delta-cell { margin-left: 6px; font-size: 11px; }

/* AI advisor panel */
.ai-panel {
  background: var(--cream-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ai-head strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.ai-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.ai-head .act-btn { margin-left: auto; }
.ai-summary {
  font-size: 13px;
  color: var(--ink-1);
  margin-bottom: 10px;
  line-height: 1.45;
}
.ai-flag {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.ai-actions { display: flex; flex-direction: column; gap: 8px; }
.ai-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
}
.ai-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ai-card-head strong {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.ai-label { font-size: 13px; color: var(--ink-0); flex: 1; font-weight: 500; }
.ai-priority {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.ai-conf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.ai-conf-dot.high { background: var(--ink-0); }
.ai-conf-dot.med { background: var(--ink-2); }
.ai-conf-dot.low { background: transparent; border: 1px solid var(--ink-4); }
.ai-reason { font-size: 12.5px; color: var(--ink-1); line-height: 1.45; margin: 4px 0; }
.ai-impact { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.ai-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-params { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-param {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--cream-1);
  padding: 1px 6px;
  border-radius: 3px;
}
.ai-card.applied {
  background: var(--cream-1);
  opacity: 0.75;
}
.ai-card.applied .ai-card-head strong { text-decoration: line-through; }
.kw-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.kw-toolbar input[type="search"] {
  flex: 1;
  min-width: 180px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-1);
}
.kw-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.kw-chips .filter-chip { font-size: 11px; padding: 3px 9px; }

.manage-summary-bar {
  display: flex;
  gap: 18px;
  padding: 10px 12px;
  background: var(--cream-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.manage-summary-bar .item {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.manage-summary-bar .item strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-0);
  margin-left: 6px;
  letter-spacing: -0.015em;
}
.modal.modal-wide .drill-grid {
  grid-template-columns: 1.6fr 1fr;
}
@media (max-width: 880px) {
  .modal.modal-wide .drill-grid { grid-template-columns: 1fr; }
}
.modal-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.campaign-row { cursor: pointer; }
.campaign-row:hover td.campaign-cell { color: var(--ink-0); }
/* Force the row hover background to be uniform across every visible cell,
   including the status cell where the inline-flex chip + icon button could
   otherwise leave odd dead-zones around the children. */
.data-table tbody tr.campaign-row:hover td {
  background: var(--bg-soft);
}
.data-table tbody tr.campaign-row:hover td.status-cell {
  background: var(--bg-soft);
}
.status-cell .status-chip,
.status-cell .row-status-btn {
  background-color: transparent;
}
.data-table tbody tr.campaign-row:hover td.status-cell .row-status-btn:hover {
  background: var(--bg-surface);
}

/* Drill-down sections */
.drill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) {
  .drill-grid { grid-template-columns: 1fr; }
}
.drill-section {
  background: var(--cream-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 16px;
}
.drill-section h4 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.drill-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.drill-table th,
.drill-table td {
  padding: 6px 4px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.drill-table th {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.drill-table td.num,
.drill-table th.num { text-align: right; font-family: var(--font-mono); }
.drill-table .roas.pos { color: var(--ink-0); font-weight: 600; }
.drill-table .roas.mid { color: var(--ink-1); font-weight: 500; }
.drill-table .roas.neg { color: var(--ink-3); }
.match-type {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  padding: 1px 5px;
  background: var(--cream-2);
  border-radius: 3px;
  text-transform: lowercase;
  margin-left: 4px;
}

.drill-health {
  margin-bottom: 14px;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .health-grid { grid-template-columns: repeat(2, 1fr); }
}
.health-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.health-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.health-card strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variation-settings: "opsz" 30;
}
.health-card .sub {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.drill-empty {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
}
.funnel-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.funnel-stage {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.funnel-stage .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-0);
}
.funnel-stage .label {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.funnel-rate {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-1);
}
.funnel-rate strong { color: var(--ink-0); font-weight: 600; }
.sparkline {
  width: 100%;
  height: 80px;
}
.recs-list { margin: 0; padding-left: 18px; }
.recs-list li { font-size: 12.5px; color: var(--ink-1); margin-bottom: 4px; }
.drill-warning {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-surface);
}
.modal-head h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  background: var(--bg-soft);
  border-color: var(--accent-2);
  color: var(--accent-1);
}
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.modal-tabs .tab {
  background: transparent;
  border: none;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.modal-tabs .tab:hover {
  color: var(--ink-1);
}
.modal-tabs .tab.active {
  color: var(--ink-0);
  border-bottom-color: var(--olive-1);
  font-weight: 600;
}
.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}
.panel-note {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.panel-h {
  margin: 18px 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-1);
  font-weight: 600;
}
.panel-h:first-child {
  margin-top: 0;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.field-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-0);
}
.field input:focus,
.field select:focus {
  outline: 2px solid rgba(20, 17, 13, 0.15);
  outline-offset: 1px;
  border-color: var(--ink-0);
}
.field-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.field-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--cream-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.test-result,
.save-result {
  font-size: 12.5px;
  color: var(--ink-3);
}
.test-result.ok,
.save-result.ok {
  color: var(--signal-pos);
  font-weight: 500;
}
.test-result.err,
.save-result.err {
  color: var(--signal-neg);
  font-weight: 500;
}
.btn-link {
  background: transparent;
  color: var(--ink-2);
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  font-size: 12.5px;
}
.btn-link:hover {
  color: var(--olive-1);
}
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  background: var(--cream-1);
  flex-wrap: wrap;
}
.modal-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ============= RC PROJECTS LIST ============= */
.rc-projects {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.rc-project-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.6fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--cream-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.rc-project-row input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-0);
}
.rc-project-row input:focus {
  outline: 2px solid rgba(20, 17, 13, 0.15);
  outline-offset: 1px;
  border-color: var(--ink-2);
}
.rc-project-row .rc-test-btn,
.rc-project-row .rc-remove-btn {
  height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.rc-project-row .rc-remove-btn {
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
  padding: 0 8px;
  font-size: 18px;
  line-height: 1;
}
.rc-project-row .rc-remove-btn:hover {
  color: var(--signal-neg);
}
.rc-project-row .rc-test-btn:hover {
  border-color: var(--ink-2);
}
.rc-project-row .rc-row-result {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Google Ads account rows — wider grid to fit label + customer_id + MCC + app + token + actions */
.ga-account-row {
  padding: 10px;
  background: var(--cream-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 8px;
}
.ga-account-row .ga-row-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1.8fr auto auto;
  gap: 8px;
  align-items: center;
}
.ga-account-row input, .ga-account-row select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-0);
  min-width: 0;
}
.ga-account-row input:focus, .ga-account-row select:focus {
  outline: 2px solid rgba(37, 99, 235, 0.18);
  outline-offset: 1px;
  border-color: var(--accent-1);
}
.ga-account-row .ga-test-btn,
.ga-account-row .ga-remove-btn {
  height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.ga-account-row .ga-remove-btn {
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
  padding: 0 8px;
  font-size: 18px;
  line-height: 1;
}
.ga-account-row .ga-remove-btn:hover { color: var(--signal-neg); }
.ga-account-row .ga-test-btn:hover { border-color: var(--accent-1); color: var(--accent-1); }
.ga-account-row .ga-row-result {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  padding-left: 2px;
}
.ga-account-row .ga-row-result.ok { color: var(--signal-pos); }
.ga-account-row .ga-row-result.err { color: var(--signal-neg); }
@media (max-width: 920px) {
  .ga-account-row .ga-row-grid {
    grid-template-columns: repeat(2, 1fr) auto auto;
  }
  .ga-account-row .ga-row-grid > *:nth-child(5) { grid-column: 1 / -1; }
}
.rc-project-row .rc-row-result.ok {
  color: var(--signal-pos);
}
.rc-project-row .rc-row-result.err {
  color: var(--signal-neg);
}
@media (max-width: 720px) {
  .rc-project-row {
    grid-template-columns: 1fr;
  }
}

/* ============= TOAST ============= */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink-0);
  color: var(--cream-0);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
  z-index: 300;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.ok {
  background: var(--signal-pos);
}
.toast.err {
  background: var(--signal-neg);
}

/* ============= MOBILE FALLBACK ============= */
@media (max-width: 900px) {
  .page {
    padding: 16px;
  }
  .topbar,
  .title-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .title-bar h2 {
    font-size: 32px;
  }
  .data-table th,
  .data-table td {
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* Per-campaign Auto Pilot toggle in the Manage sidebar */
.manage-camp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  margin-bottom: 2px;
}
.manage-camp-row > .manage-camp-item {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.manage-camp-row.selected .manage-camp-item {
  background: var(--olive-1);
  color: var(--cream-0);
  border-color: var(--olive-1);
}

/* Manage sidebar: campaign cards (new rich layout) */
.manage-camp-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  position: relative;
}
.manage-camp-card:hover {
  border-color: var(--line);
  background: var(--cream-1);
}
.manage-camp-card.selected {
  border-color: var(--olive-1);
  box-shadow: inset 3px 0 0 var(--olive-1);
  background: var(--cream-1);
}
.manage-camp-card.paused {
  opacity: 0.65;
}
.mcc-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mcc-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-4);
}
.mcc-status-enabled,
.mcc-status-running {
  background: #4ade80;
  box-shadow: 0 0 5px rgba(74, 222, 128, 0.55);
}
.mcc-status-paused {
  background: var(--ink-4);
}
.mcc-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  word-break: break-word;
  line-height: 1.3;
}
.manage-camp-card.selected .mcc-name {
  color: var(--olive-1);
  font-weight: 600;
}
.mcc-row2 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.mcc-app {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--olive-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mcc-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--cream-2);
  color: var(--ink-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.mcc-tag-geo {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.mcc-tag-strat {
  background: var(--olive-1);
  color: var(--cream-0);
}
.mcc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 2px;
}
.mcc-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mcc-kpi .k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcc-kpi strong {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-1);
  font-weight: 600;
}
.mcc-kpi .k-suffix {
  font-weight: 400;
  color: var(--ink-3);
  font-size: 9.5px;
}
.mcc-kpi-window strong {
  font-size: 11px;
  color: var(--ink-3);
}
.mcc-kpi-roas strong.roas.pos { color: var(--signal-pos); }
.mcc-kpi-roas strong.roas.mid { color: #b08515; }
.mcc-kpi-roas strong.roas.neg { color: var(--signal-neg); }
.mcc-kpi-roas strong.roas.zero { color: var(--ink-4); }
.ap-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  cursor: pointer;
  outline: none;
}
.ap-toggle.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ap-toggle-track {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.35);
  border: 1px solid rgba(120, 120, 120, 0.5);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.ap-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.ap-toggle.on .ap-toggle-track {
  background: rgba(74, 222, 128, 0.85);
  border-color: rgba(74, 222, 128, 1);
}
.ap-toggle.on .ap-toggle-thumb {
  transform: translateX(12px);
}
.ap-toggle:hover:not(.is-disabled) .ap-toggle-track {
  border-color: rgba(255, 255, 255, 0.6);
}
.ap-toggle-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.ap-toggle.on .ap-toggle-label {
  color: #4ade80;
}
/* Inline variant inside the main campaigns table — sits next to the name */
.campaign-cell .ap-toggle {
  vertical-align: middle;
  margin-right: 14px;
  margin-left: 4px;
}

/* Pause / Resume — minimal icon-only button per row.
   Note: we MUST keep .status-cell as a regular table-cell (no display
   override) or the td loses its column width and the row hover shows
   weird dead-zones. We use margin/vertical-align to align children. */
.status-cell {
  white-space: nowrap;
}
.status-cell .status-chip {
  vertical-align: middle;
}
.status-cell .row-status-btn {
  margin-left: 6px;
  vertical-align: middle;
}
.row-status-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.row-status-btn:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--accent-1);
  border-color: var(--line);
}
.row-status-btn.is-paused {
  color: var(--accent-1);
}
.row-status-btn.is-paused:hover {
  background: var(--accent-soft);
}
.row-status-btn:disabled {
  opacity: 0.4;
  cursor: wait;
}
.row-status-btn svg { display: block; }

/* Delete-campaign button: same footprint as the pause/play button so the
   action cluster stays visually balanced. Stronger red on hover so the
   destructive intent is clear without screaming all the time. */
.status-cell .row-delete-btn {
  margin-left: 4px;
  vertical-align: middle;
}
.row-delete-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.row-delete-btn:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.1);
  color: var(--signal-neg);
  border-color: rgba(220, 38, 38, 0.4);
}
.row-delete-btn:disabled {
  opacity: 0.4;
  cursor: wait;
}
.row-delete-btn svg { display: block; }
.data-table tbody tr.campaign-row:hover td.status-cell .row-delete-btn:hover {
  background: rgba(220, 38, 38, 0.14);
}

/* AI suggest result card — replaces the native browser alert */
.ai-result-card {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow:
    0 24px 50px -12px rgba(15, 23, 42, 0.22),
    0 6px 14px rgba(15, 23, 42, 0.08);
  z-index: 9999;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity .25s ease, transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-result-card.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ai-result-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
}
.ai-result-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent-1);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-result-text {
  flex: 1;
  min-width: 0;
}
.ai-result-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-0);
  margin-bottom: 4px;
}
.ai-result-text p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.ai-result-close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-result-close:hover { background: var(--bg-soft); color: var(--ink-0); }

/* AI suggestion: subtle, on-brand marker matching the cream/olive palette. */
.ai-suggest-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 1px 6px 1px 5px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--olive-2);
  color: var(--olive-1);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: help;
  line-height: 1.4;
}
.ai-suggest-badge::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive-2);
  display: inline-block;
}
.ai-suggest-badge[data-conf="low"] {
  opacity: 0.55;
}
.ap-toggle.ai-suggested:not(.on) .ap-toggle-track {
  border-color: var(--olive-2);
}
.campaign-row.ai-suggested-row .campaign-cell {
  box-shadow: inset 3px 0 0 var(--olive-2);
}

/* Auto Pilot panel */
.autopilot-status {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.ap-status > div {
  font-size: 13px;
  margin: 2px 0;
}
.ap-status .ok { color: #4ade80; }
.ap-status .err { color: #f87171; }

.ap-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--font-body);
}
.ap-hist-table th,
.ap-hist-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.ap-hist-table th {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.ap-hist-table td.ok { color: var(--signal-pos); font-family: var(--font-mono); font-size: 11.5px; }
.ap-hist-table td.err { color: var(--signal-neg); font-family: var(--font-mono); font-size: 11.5px; }
.ap-hist-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.ap-hist-action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  background: var(--cream-2);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink-1);
}
.ap-hist-target {
  font-size: 12.5px;
  color: var(--ink-1);
  max-width: 220px;
  word-break: break-word;
}
.ap-hist-change {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.ap-hist-change code {
  background: var(--cream-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.ap-hist-reason {
  font-size: 11.5px;
  color: var(--ink-3);
  max-width: 280px;
  font-style: italic;
}
.ap-hist-empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--ink-3);
}
.ap-hist-empty p { margin: 6px 0; }

/* Drill modal: Auto Pilot panel */
.drill-autopilot {
  background: var(--cream-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.drill-autopilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.drill-autopilot-head h4 {
  margin: 0;
}
.drill-autopilot .ap-toggle .ap-toggle-label {
  font-size: 11px;
  letter-spacing: 0.08em;
}
.ap-drill-aisug {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--cream-2);
  border-left: 3px solid var(--olive-2);
}
.ap-drill-aisug.no { border-left-color: var(--ink-4); opacity: 0.85; }
.ap-drill-aisug-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive-1);
}
.ap-drill-aisug.no .ap-drill-aisug-tag { color: var(--ink-3); }
.ap-drill-aisug-conf {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.ap-drill-aisug-reason {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.45;
}
.ap-drill-aisug-foot {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.ap-drill-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 12px;
}
.ap-drill-summary.net-positive {
  background: rgba(42, 74, 48, 0.10);
  color: var(--signal-pos);
}
.ap-drill-summary.net-negative {
  background: rgba(138, 58, 58, 0.10);
  color: var(--signal-neg);
}
.ap-drill-summary.net-neutral {
  background: var(--cream-2);
  color: var(--ink-2);
}
.ap-drill-summary-head {
  font-weight: 600;
  font-size: 12.5px;
}
.ap-drill-summary-body {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.ap-change-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-change-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ap-change-item:last-child { border-bottom: none; }
.ap-change-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ap-change-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  min-width: 56px;
}
.ap-change-action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--cream-2);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink-1);
}
.ap-change-target {
  font-size: 12px;
  color: var(--ink-1);
  flex: 1 1 auto;
  min-width: 80px;
}
.ap-verdict {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 3px;
}
.ap-verdict.pos { background: rgba(42, 74, 48, 0.15); color: var(--signal-pos); }
.ap-verdict.neg { background: rgba(138, 58, 58, 0.15); color: var(--signal-neg); }
.ap-verdict.mid { background: var(--cream-2); color: var(--ink-3); }
.ap-change-row2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.ap-change-row2 code {
  background: var(--cream-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.ap-change-deltas span { font-family: var(--font-mono); font-size: 10.5px; }
.ap-change-deltas .pos { color: var(--signal-pos); }
.ap-change-deltas .neg { color: var(--signal-neg); }
.ap-change-deltas .mid { color: var(--ink-3); }
.ap-change-reason {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   History impact card (Account Review / AI Review)
   ============================================================ */
.hist-card {
  margin-top: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.hist-head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hist-action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-1);
}
.hist-target {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.hist-verdict {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hist-verdict.v-up {
  background: rgba(22, 163, 74, 0.12);
  color: var(--signal-pos);
}
.hist-verdict.v-down {
  background: rgba(220, 38, 38, 0.12);
  color: var(--signal-neg);
}
.hist-verdict.v-mid {
  background: var(--bg-soft);
  color: var(--ink-2);
}
.hist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.hist-meta strong {
  font-weight: 600;
  color: var(--ink-2);
}

/* 2x2 grid of metric tiles */
.hist-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hist-tile {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hist-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hist-tile-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hist-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.hist-delta.pos {
  background: rgba(22, 163, 74, 0.12);
  color: var(--signal-pos);
}
.hist-delta.neg {
  background: rgba(220, 38, 38, 0.12);
  color: var(--signal-neg);
}
.hist-delta.flat {
  background: var(--bg-card);
  color: var(--ink-3);
}
.hist-tile-values {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-1);
  font-weight: 600;
}
.hist-tile-before {
  color: var(--ink-3);
  font-family: var(--font-mono);
}
.hist-tile-after {
  color: var(--ink-1);
  font-family: var(--font-mono);
}
.hist-arrow {
  color: var(--ink-3);
  flex-shrink: 0;
}
.hist-spark {
  width: 100%;
  height: 48px;
  display: block;
}

.hist-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.hist-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hist-legend-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.hist-legend-swatch.hist-before { background: var(--ink-3); }
.hist-legend-swatch.hist-after { background: var(--accent-1); }

.hist-no-data {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.hist-no-data svg { flex-shrink: 0; }

.hist-empty {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
}
.hist-empty-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-1);
  border-radius: 10px;
  flex-shrink: 0;
}
.hist-empty strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.hist-empty p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.hist-error {
  padding: 12px 14px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: var(--signal-neg);
  font-size: 12.5px;
}

/* Loading shimmer for the history card */
@keyframes histShimmer {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.hist-card-loading { padding: 14px 16px; }
.hist-shimmer {
  background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(255,255,255,0.6) 50%, var(--bg-soft) 100%);
  background-size: 600px 100%;
  animation: histShimmer 1.4s linear infinite;
  border-radius: 6px;
}
.hist-shimmer-head { height: 24px; width: 60%; margin-bottom: 14px; }
.hist-shimmer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hist-shimmer-tile { height: 80px; border-radius: 10px; }

@media (max-width: 560px) {
  .hist-tiles { grid-template-columns: 1fr; }
  .hist-shimmer-row { grid-template-columns: 1fr; }
}

/* Security audit panel */
.security-audit { margin-bottom: 16px; }
.sa-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.sa-banner.sa-ok {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: var(--signal-pos);
}
.sa-banner.sa-warn {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.32);
  color: var(--signal-neg);
}
.sa-banner strong { font-weight: 700; }
.sa-counts { display: flex; gap: 6px; }
.sa-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.sa-pill.sa-critical { background: var(--signal-neg); color: #fff; }
.sa-pill.sa-high { background: #b45309; color: #fff; }
.sa-pill.sa-medium { background: #d97706; color: #fff; }
.sa-pill.sa-low { background: var(--ink-3); color: #fff; }
.sa-pill.sa-ok-pill { background: var(--signal-pos); color: #fff; }
.sa-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sa-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sa-sev {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sa-row.sa-critical .sa-sev { background: var(--signal-neg); color: #fff; }
.sa-row.sa-high .sa-sev { background: #b45309; color: #fff; }
.sa-row.sa-medium .sa-sev { background: #d97706; color: #fff; }
.sa-row.sa-low .sa-sev { background: var(--ink-3); color: #fff; }
.sa-msg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-1);
}
.sa-loading { color: var(--ink-3); font-style: italic; padding: 6px 0; }
.sa-error { color: var(--signal-neg); padding: 8px 0; }

/* Google Ads modal */
.sb-badge-beta {
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
}
.ga-controls { background: var(--bg-soft); }
.ga-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ga-controls-row .btn { display: inline-flex; align-items: center; gap: 6px; }
.ga-totals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.ga-totals > div {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ga-totals .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ga-totals strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-1);
}
.ga-roas.pos { color: var(--signal-pos); }
.ga-roas.mid { color: #b45309; }
.ga-roas.neg { color: var(--signal-neg); }
.ga-table { width: 100%; }
.ga-row-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.ga-disclaimer {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent-1);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ga-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}
.ga-empty p { margin: 4px 0; }
.ga-shimmer { display: flex; flex-direction: column; gap: 8px; }
.ga-shimmer .skel-block.skel-row { height: 38px; border-radius: 8px; }
@media (max-width: 920px) {
  .ga-totals { grid-template-columns: repeat(3, 1fr); }
}

/* Divider + special "show as chart" row inside the Pick-cards popover. */
.tt-col-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 8px;
  opacity: 0.6;
}
.tt-col-row-special {
  background: var(--accent-soft);
  font-weight: 600;
  color: var(--accent-1);
}
.tt-col-row-special:hover { background: var(--accent-soft); filter: brightness(0.98); }
/* When the chart replaces the cards, give it the full kpi-grid-wrap width. */
.spend-rev-wrap { width: 100%; }

/* Inline checkbox-with-label control used inside Settings → General. */
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-1);
  user-select: none;
}
.inline-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.inline-check input[type="checkbox"]:hover { border-color: var(--accent-2); }
.inline-check input[type="checkbox"]:checked {
  background: var(--accent-1);
  border-color: var(--accent-1);
}
.inline-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- Spend vs Revenue chart card --------------------------------------- */
.spend-rev-wrap { background: #ffffff; }
.spend-rev-wrap .sr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 6px;
}
.spend-rev-wrap .sr-sub {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
}
.spend-rev-wrap .srs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-soft-2, #f1f5f9);
  color: var(--ink-3);
}
.spend-rev-wrap .srs-period {
  background: var(--accent-soft);
  color: var(--accent-1);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.spend-rev-wrap .srs-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.spend-rev-wrap .srs-stat .srs-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spend-rev-wrap .srs-stat strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.spend-rev-wrap .srs-rate strong {
  font-weight: 700;
  font-size: 11px;
}
.spend-rev-wrap .srs-rate-up {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.spend-rev-wrap .srs-rate-mid {
  background: rgba(37, 99, 235, 0.10);
  color: var(--accent-1);
}
.spend-rev-wrap .srs-rate-down {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.spend-rev-wrap .sr-legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-2);
}
.spend-rev-wrap .sr-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.spend-rev-wrap .sr-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.spend-rev-wrap .sr-swatch.sr-spend { background: #ef4444; }
.spend-rev-wrap .sr-swatch.sr-rev { background: #10b981; }
.spend-rev-wrap .sr-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.spend-rev-wrap .sr-mode .btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  color: var(--ink-2);
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.spend-rev-wrap .sr-mode .btn:hover { background: #e2e8f0; color: var(--ink-1); }
.spend-rev-wrap .sr-mode .btn.active {
  background: #ffffff;
  color: var(--accent-1);
  border-color: var(--accent-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.spend-rev-wrap .sr-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.spend-rev-wrap .sr-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.spend-rev-wrap .sr-revtype .btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  color: var(--ink-2);
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.spend-rev-wrap .sr-revtype .btn:hover {
  background: #e2e8f0;
  color: var(--ink-1);
}
.spend-rev-wrap .sr-revtype .btn.active {
  background: #ffffff;
  color: var(--accent-1);
  border-color: var(--accent-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.spend-rev-wrap[hidden] { display: none !important; }
.spend-rev-wrap {
  /* Grow vertically inside kpi-grid-wrap so the card matches the height of
     the trials map sitting in the other column of .hero-grid. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.spend-rev-wrap > .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.spend-rev-wrap .sr-chart-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 200px;
  margin-top: 4px;
}
.spend-rev-wrap .sr-chart {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

/* Hover tooltip — floats with the cursor inside the chart wrap. */
.spend-rev-wrap .sr-tooltip {
  position: absolute;
  pointer-events: none;
  background: #0f172a;
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  min-width: 150px;
  z-index: 5;
  line-height: 1.4;
  transition: opacity 90ms ease;
}
.spend-rev-wrap .sr-tooltip[hidden] { display: none; }
.spend-rev-wrap .srt-date {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.spend-rev-wrap .srt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.spend-rev-wrap .srt-sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.spend-rev-wrap .srt-sw.sr-rev { background: #10b981; }
.spend-rev-wrap .srt-sw.sr-spend { background: #ef4444; }
.spend-rev-wrap .srt-lbl {
  color: #cbd5e1;
  flex: 1;
}
.spend-rev-wrap .srt-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #f8fafc;
}
.spend-rev-wrap .srt-roas {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #1f2937;
}
.spend-rev-wrap .srt-roas .srt-val { color: #60a5fa; }

/* Shimmer placeholder while RC data is loading. */
.spend-rev-wrap .sr-skel,
.spend-rev-wrap .sr-skel-band {
  fill: #e2e8f0;
  animation: srSkelPulse 1.2s ease-in-out infinite;
}
.spend-rev-wrap .sr-skel-band { opacity: 0.55; }
@keyframes srSkelPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

@media (max-width: 720px) {
  .spend-rev-wrap .sr-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .spend-rev-wrap .sr-sub { margin-left: 0; display: block; margin-top: 2px; }
  .spend-rev-wrap .sr-controls { flex-wrap: wrap; gap: 10px; }
}