:root{
  --bg:#f7f7f5; --panel:#ffffff;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e5e7eb; --line-2:#eef0ec;
  --accent:#0f7a3f; --accent-soft:#e8f5ec; --accent-ink:#064e2a;
  --danger:#b91c1c; --warn:#7a4a00;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.loading{padding:40px; text-align:center; color:var(--ink-3);}

/* ===== Login ===== */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(800px 400px at 80% -10%, #eef7f0 0%, transparent 60%), var(--bg);
}
.login-card{
  width:100%; max-width:380px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:28px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 12px 30px rgba(15,23,42,0.05);
}
.login-card h1{font-size:22px; font-weight:700;}
.login-card .muted{color:var(--ink-2); font-size:13.5px;}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600;}
.login-card input{
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; color:var(--ink); background:#fff;
}
.login-card input:focus{outline:none; border-color:var(--accent);}
.form-error{color:var(--danger); font-size:13px; min-height:18px;}

/* ===== Layout ===== */
.layout{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.sidebar{
  background:#0f172a; color:#cbd5e1;
  display:flex; flex-direction:column;
  padding:18px 14px;
}
.sidebar .brand{
  font-weight:800; color:#fff; font-size:15px; letter-spacing:-0.01em;
  padding:8px 10px 14px; border-bottom:1px solid #1e293b; margin-bottom:10px;
}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar nav a{
  color:#cbd5e1; text-decoration:none; padding:9px 12px; border-radius:8px;
  font-size:14px; font-weight:600; letter-spacing:-0.005em;
  transition:background .15s, color .15s;
}
.sidebar nav a:hover{background:#1e293b; color:#fff;}
.sidebar nav a.active{background:var(--accent); color:#fff;}
.sidebar-footer{
  border-top:1px solid #1e293b; padding:10px; display:flex; flex-direction:column; gap:8px;
  font-size:13px;
}
.sidebar-footer .docs-link{
  display:block; padding:8px 10px; border-radius:8px;
  background:#1e293b; color:#cbd5e1; text-decoration:none;
  font-size:12.5px; font-weight:600; letter-spacing:-0.005em;
  transition:background .15s, color .15s;
}
.sidebar-footer .docs-link:hover{ background:#243248; color:#fff; }
.sidebar-footer-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 4px;
}
.sidebar-footer a{color:#94a3b8; text-decoration:none;}
.sidebar-footer a:hover{color:#fff;}
.btn-link{
  background:transparent; border:0; color:#94a3b8; cursor:pointer; font:inherit; padding:0;
}
.btn-link:hover{color:#fff;}

/* ===== Main / Views ===== */
.main{padding:28px 32px; max-width:1200px;}
.view-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.view-head h2{font-size:24px; font-weight:700;}
.view-head .actions{display:flex; gap:8px;}

.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 14px; border-radius:10px; font:inherit; font-weight:600; font-size:13.5px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{background:#f9fafb; border-color:#cbd5e1;}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn.primary:hover{background:#0b6634;}
.btn.danger{background:#fff; color:var(--danger); border-color:#fecaca;}
.btn.danger:hover{background:#fef2f2;}
.btn:disabled{opacity:0.6; cursor:not-allowed;}

/* ===== Search input in list-view header ===== */
.search-input{
  appearance:none;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:10px; font:inherit; font-size:13.5px;
  min-width:280px;
  transition:border-color .12s, box-shadow .12s;
}
.search-input::placeholder{ color:var(--ink-3); }
.search-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,122,63,0.12);
}

/* ===== Tables ===== */
.table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
table{width:100%; border-collapse:collapse;}
thead{background:#fafafa;}
th, td{
  padding:12px 14px; text-align:left; font-size:13.5px;
  border-bottom:1px solid var(--line-2);
}
th{font-weight:700; color:var(--ink-2); font-size:12px; text-transform:uppercase; letter-spacing:.06em;}

/* Sortable column header — clickable label + small arrow indicator. */
th.sortable{
  cursor:pointer; user-select:none;
  transition:background .12s, color .12s;
}
th.sortable:hover{ background:#f1f5f9; color:var(--ink); }
th.sortable .sort-arrow{
  display:inline-block; margin-left:6px;
  font-size:11px; color:var(--ink-3); transition:color .12s, opacity .12s;
  opacity:0.5;
}
th.sortable:hover .sort-arrow{ opacity:1; color:var(--ink-2); }
th.sortable.sorted{ color:var(--accent-ink); background:var(--accent-soft); }
th.sortable.sorted .sort-arrow{ color:var(--accent); opacity:1; }
td.actions{text-align:right; white-space:nowrap;}
tbody tr:hover{background:#fafafa;}
.empty{padding:32px; text-align:center; color:var(--ink-3);}

/* ===== Load more / show less pager ===== */
.list-pager{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 14px 14px;
  margin-top:-1px;   /* tuck under the table-wrap's bottom border */
}
.list-pager-count{
  font-size:12.5px; color:var(--ink-3);
  letter-spacing:.01em;
}
.list-pager-count strong{ color:var(--ink); font-weight:700; }
.list-pager-actions{ display:flex; align-items:center; gap:10px; }
.list-pager .btn-link{
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  background:transparent; border:0; cursor:pointer; padding:6px 10px; border-radius:6px;
  transition:background .12s, color .12s;
}
.list-pager .btn-link:hover{ background:#f1f5f9; color:var(--ink); }
.btn.pg-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; padding:7px 14px;
}
.btn.pg-more .pg-arrow{
  font-size:11px; transition:transform .15s ease;
}
.btn.pg-more:hover .pg-arrow{ transform:translateY(2px); }

/* ===== Pills / chips ===== */
.pill-tag{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:#f1f5f9; color:var(--ink-2);
}
.pill-tag.active{background:var(--accent-soft); color:var(--accent-ink);}
.pill-tag.warn{background:#fff7ec; color:var(--warn);}
.pill-tag.muted{background:#eef1f5; color:var(--ink-3);}

/* ===== Offer list row states =====
   Unassigned offers (no campaign / deleted campaign) get a warm tint so
   they stand out for triage; archived offers are muted + struck through.
   Placed after the base `tbody tr:hover` rule so equal-specificity hover
   handling resolves in source order. */
tbody tr.row-unassigned{ background:#fff7ec; }
tbody tr.row-unassigned:hover{ background:#fdefd6; }
tbody tr.row-archived{ opacity:.5; }
tbody tr.row-archived:hover{ opacity:.75; background:#fafafa; }
tbody tr.row-archived td strong{ text-decoration:line-through; text-decoration-color:var(--ink-3); }

/* ===== Vertical-status badge =====
   Renders the live trkreach status next to a campaign — both in the
   Campaigns list column AND inside the Campaign edit form's banner.
   Five states with distinct color signals so the operator can scan
   a long list and immediately spot suppressed campaigns. */
.vstat-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:help; white-space:nowrap;
  border:1px solid transparent;
}
.vstat-badge.vstat-active   { background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 20%, transparent); }
.vstat-badge.vstat-paused   { background:#fff4e0; color:#8a5400; border-color:#f5d49a; }
.vstat-badge.vstat-inactive { background:#fff4e0; color:#8a5400; border-color:#f5d49a; }
.vstat-badge.vstat-missing  { background:#fde7e7; color:#9b1c1c; border-color:#f5b7b7; }
.vstat-badge.vstat-unknown  { background:#f1f5f9; color:var(--ink-3); border-color:#e2e8f0; }

/* Banner inside Campaign edit form. Lives directly below the
   Priority+verticalId row and surfaces what the suppression rule is
   currently doing for this campaign. Color-bar on the left matches
   the badge state. */
.vstat-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:#fff; border:1px solid var(--line); border-left-width:4px;
  font-size:13px; line-height:1.45;
}
.vstat-banner.is-live{
  border-left-color:var(--accent);
  background:color-mix(in srgb, var(--accent-soft) 50%, #fff);
}
.vstat-banner.is-suppressed{
  border-left-color:#d97706;
  background:#fffbf2;
}
.vstat-banner-text{ color:var(--ink-2); }
.vstat-banner-text strong{ color:var(--ink); }

/* ===== Modal / form panel ===== */
.modal-bg{
  position:fixed; inset:0; background:rgba(15,23,42,0.45);
  display:flex; align-items:flex-start; justify-content:center; z-index:50;
  padding:40px 16px; overflow-y:auto;
}
.modal{
  background:var(--panel); border-radius:14px; width:100%; max-width:980px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  display:flex; flex-direction:column;
}
.modal-head{
  padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-radius:14px 14px 0 0;
}
.modal-head h3{font-size:18px; font-weight:700;}
.modal-body{
  /* Tinted background so the white section cards stand out as discrete units. */
  padding:18px; display:flex; flex-direction:column; gap:12px;
  background:#f6f6f3;
}
.modal-foot{
  padding:14px 22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:10px;
  background:#fff; border-radius:0 0 14px 14px;
}
/* Counter the display:flex above so [hidden] actually hides the
   brand-tiles name row (#catTilesRow) — same fix as .trk-filter-row
   and the picker popovers below. */
.modal-foot[hidden]{ display:none; }
/* "✓ Saved" toast — shown inline in the modal-foot after a successful
   save. Modal stays open; the toast auto-fades after ~1.4s. */
.modal-saved-msg{
  display:inline-flex; align-items:center;
  margin-right:auto;                 /* push to left, away from buttons */
  font-size:12.5px; font-weight:600; letter-spacing:0.01em;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border:1px solid #cfe7d6;
  padding:6px 10px; border-radius:999px;
  transition:opacity .9s ease;
}
.modal-saved-msg.fading{ opacity:0; }
.modal-saved-msg[hidden]{ display:none; }

label.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600;}
.field-label-row{display:flex; align-items:center; gap:8px;}

/* AI copy-gen ✨ button — sits in the field label, next to Headline / Body */
.ai-gen{
  appearance:none; border:1px solid #d8c98a; background:linear-gradient(180deg,#fffbf0,#fff5d6);
  color:#7a4a00; font:inherit; font-size:11px; font-weight:700;
  padding:3px 8px 3px 6px; border-radius:999px;
  display:inline-flex; align-items:center; gap:4px;
  cursor:pointer; user-select:none;
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.ai-gen:hover{ background:linear-gradient(180deg,#fff5d6,#ffe9a8); border-color:#c9b56e; transform:translateY(-1px); box-shadow:0 4px 10px rgba(180,140,0,0.15); }
.ai-gen:active{ transform:translateY(0); }
.ai-gen:disabled{ opacity:0.6; cursor:wait; transform:none; }
.ai-gen-icon{ font-size:13px; line-height:1; display:inline-block; }
.ai-gen-label{ letter-spacing:.04em; }
.ai-gen.loading .ai-gen-icon{ animation:aiSpin 1s linear infinite; }
@keyframes aiSpin{ to { transform:rotate(360deg); } }

/* Larger AI generate button used at the top of the Question form. */
.ai-gen.ai-gen-lg{
  font-size:13.5px; padding:8px 16px 8px 12px; border-radius:10px;
}
.ai-gen.ai-gen-lg .ai-gen-icon{ font-size:16px; }
.ai-gen.ai-gen-lg .ai-gen-label{ letter-spacing:.01em; text-transform:none; }

/* Generate-button row — holds the big Generate button, the Strict
   mode checkbox, and the status text on one line (wrapping on narrow
   admin viewports). */
.ai-gen-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
}
.ai-strict{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  padding:6px 10px; border-radius:8px;
  border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.ai-strict:hover{ background:#fffaeb; border-color:#e8d4a6; color:var(--ink); }
.ai-strict input{ margin:0; cursor:pointer; }
.ai-strict input:checked + span{ color:var(--ink); }
.ai-strict:has(input:checked){
  background:#fff5d6; border-color:#c9b56e; color:#6b4f00;
}

/* AI panel — the "Generate with AI" card sits at the top of the
   Question form with a soft amber accent so admins notice the
   shortcut without it competing with the actual form fields. */
.ai-panel{
  background:linear-gradient(180deg,#fffdf4,#fff8e1);
  border:1px solid #e7d99c;
  box-shadow:0 1px 2px rgba(180,140,0,0.08);
}
.ai-panel h4{ color:#5b4205; }
.ai-panel h4 .hint{ color:#7a5e1e; }

.ai-intent-chips{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px; padding:6px 0;
}
.ai-intent-chip{
  align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  line-height:1.35;
  cursor:pointer;
}
.ai-intent-chip input[type=radio]{ margin-top:2px; flex-shrink:0; }
.ai-intent-chip span{ display:block; }
.ai-intent-chip .hint{ font-size:11.5px; margin-top:2px; line-height:1.35; }
.ai-intent-chip:has(input:checked){
  background:#fff5d6; border-color:#c9b56e;
  color:#3d2a00;
}
.ai-intent-chip:has(input:checked) .hint{ color:#6a4f00; }

/* Optional steering input under each AI-enabled field. Slim + muted so
   it reads as a supporting control, not a primary form input. The
   value persists between regenerations so admins can iterate on the hint. */
.ai-hint{
  margin-top:-2px;
  padding:6px 10px !important;
  border:1px dashed #d8c98a !important;
  background:#fffbf0 !important;
  border-radius:8px !important;
  font:inherit; font-size:12px !important;
  color:var(--ink-2) !important;
  font-style:italic;
}
.ai-hint::placeholder{ color:#a89868; font-style:italic; }
.ai-hint:focus{
  outline:none !important;
  border-color:#c9b56e !important;
  background:#fff5d6 !important;
  font-style:normal;
}
.field input[type=text], .field input[type=number], .field input[type=url], .field textarea, .field select{
  padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; color:var(--ink); background:#fff; font-size:13.5px;
}
.field textarea{font-family:'SF Mono','Menlo',ui-monospace,monospace; font-size:12.5px; min-height:80px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:start;}
.field-row-4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; align-items:start;}
/* Asymmetric rows — for "small toggle + wide URL" or "two small + one
   wide". Use when a checkbox or short field would otherwise eat 50%
   of a row that wants to give a URL/text the breathing room. */
.field-row-asym{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:end;}
.field-row-asym-3{display:grid; grid-template-columns:auto auto 1fr; gap:14px; align-items:end;}
.field-row-name{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:end;}
.field-row-name-3{display:grid; grid-template-columns:2fr 1fr auto auto; gap:14px; align-items:end;}
/* When a .field-check (checkbox) lives inside any *-asym or *-name row,
   strip its grid stretch and shrink to its natural pill width so it
   doesn't waste horizontal real estate. */
.field-row-asym .field-check,
.field-row-asym-3 .field-check,
.field-row-name .field-check,
.field-row-name-3 .field-check{
  white-space:nowrap; padding-bottom:9px;   /* align baseline with sibling inputs */
}
/* …but a hint INSIDE such a pill must still wrap — otherwise nowrap forces
   the whole grid column wide and crushes sibling controls. */
.field-row-asym .field-check .hint,
.field-row-asym-3 .field-check .hint,
.field-row-name .field-check .hint,
.field-row-name-3 .field-check .hint{ white-space:normal; }
.hint{ color:var(--ink-3); font-size:12.5px; line-height:1.5; font-weight:400; }
.hint code{ background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.field .hint{font-weight:400; color:var(--ink-3); font-size:11.5px; line-height:1.4;}
.field-check{
  flex-direction:row; align-items:center; gap:8px;
  /* Compact pill — so a checkbox doesn't claim a full grid column */
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; cursor:pointer;
  font-weight:600; color:var(--ink-2); font-size:13.5px;
  transition:border-color .12s, background .12s;
}
.field-check:hover{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.field-check input{width:auto; cursor:pointer; margin:0;}
/* Hint inside a checkbox pill — render below as a small subtitle */
.field-check .hint{
  display:block; width:100%; margin-top:4px;
  font-size:11.5px; font-weight:400; color:var(--ink-3);
}

.repeater{display:flex; flex-direction:column; gap:8px; border:1px dashed var(--line); border-radius:10px; padding:10px;}
.repeater-row{display:grid; gap:8px; grid-template-columns:1fr 1fr 1fr 1fr auto; align-items:center;}
.repeater-row input, .repeater-row select{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; background:#fff;
}
.repeater-row .x{
  background:transparent; border:0; color:var(--ink-3); cursor:pointer; padding:6px;
}
.repeater-row .x:hover{color:var(--danger);}
.section{
  background:#fff;
  border:1px solid var(--line); border-radius:12px;
  padding:14px 18px 16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}

/* Section header: bigger, sentence-case, numbered pill prefix, separator line.
   Numbering is automatic via CSS counter so admins can navigate by index. */
.section h4{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700;
  letter-spacing:-0.005em; color:var(--ink);
  text-transform:none;
  margin:0; padding:0 0 8px;
  border-bottom:1px solid var(--line-2);
}
.section h4::before{
  content: '';
  width:4px; height:16px;
  border-radius:2px;
  background:var(--accent);
  flex-shrink:0;
}
/* Right-aligned slot inside a section header — use for section-level
   ON/OFF toggles so a single checkbox doesn't waste a whole row.
       <h4>Assist dialog <span class="section-toggle">…checkbox…</span></h4>
   The toggle sits flush-right of the title with consistent baseline. */
.section h4 .section-toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--bg-soft, #f6f6f3);
  border:1px solid var(--line);
  padding:4px 10px; border-radius:99px;
  cursor:pointer; user-select:none;
}
.section h4 .section-toggle input{ width:auto; margin:0; cursor:pointer; }
.section h4 .section-toggle:hover{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Inline hint span inside the h4 (e.g. "Targeting — leave any group empty…")
   gets a softer treatment so it reads as a subtitle not a heading. */
.section h4 > .hint,
.section h4 > span{
  font-size:12.5px; font-weight:400;
  color:var(--ink-3); letter-spacing:0;
  text-transform:none;
}
.section h4 .ai-gen{
  margin-left:auto;          /* push the auto-fill button to the right edge */
}

/* ===== Chip selectors (used in targeting + segment-rule editor) ===== */
.chip-row{
  display:flex; flex-wrap:wrap; gap:6px; padding:6px 0;
}
label.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
  user-select:none;
}
label.chip input{ width:auto; margin:0; }
label.chip:hover{ background:#f9fafb; border-color:#cbd5e1; }
label.chip:has(input:checked){
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}

.answer-block{
  border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; margin-bottom:8px;
  background:#fafafa;
}
.answer-q{ font-size:13px; color:var(--ink-2); margin-bottom:4px; }

/* ===== Segment rule editor ===== */
.seg-rule{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  background:#fff; display:flex; flex-direction:column; gap:10px;
}
.seg-rule.fallback{
  border-style:dashed; background:#fbfaf7;
}
.seg-rule-head{
  display:flex; align-items:center; gap:10px;
}
.seg-rule-head .rm-rule{
  margin-left:auto; color:var(--ink-3);
}
.seg-rule-head .rm-rule:hover{ color:var(--danger); }

.badge{
  display:inline-block; padding:3px 8px; border-radius:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.badge.when{ background:var(--accent-soft); color:var(--accent-ink); }
.badge.then{ background:#eef2ff; color:#3730a3; }
.badge.fallback{ background:#fff7ec; color:var(--warn); }

.seg-conds{
  display:flex; flex-direction:column; gap:8px;
  background:#fafafa; border-radius:8px; padding:10px;
}
.seg-cond{
  background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:8px;
}
.seg-cond-row{
  display:flex; align-items:flex-end; gap:10px;
}
.seg-cond-row .field{ flex:1; }
.seg-cond-row .rm-cond{
  margin-bottom:8px; color:var(--ink-3);
}
.seg-cond-row .rm-cond:hover{ color:var(--danger); }

.add-cond{ align-self:flex-start; }

/* ===== Icon picker (searchable grid popover) ===== */
.icon-picker{ position:relative; }
.icon-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:7px 11px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.icon-picker-trigger:hover{ border-color:#cbd5e1; }
.icon-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.icon-picker-svg{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-picker-trigger .icon-picker-svg svg{ width:20px; height:20px; color:var(--ink-2); }
.icon-picker-trigger .icon-picker-name{ flex:1; }
.icon-picker-caret{ color:var(--ink-3); font-size:10px; }

.icon-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:340px;
}
/* The display:flex above otherwise overrides the user-agent's
   `display: none from [hidden]`, leaving the popover always visible. */
.icon-picker-pop[hidden]{ display:none !important; }
.icon-picker-search{
  padding:7px 10px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.icon-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.icon-picker-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  overflow-y:auto;
}
.icon-picker-cell{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px;
  border:1px solid transparent; border-radius:8px; background:transparent;
  cursor:pointer; font:inherit;
  transition:background .1s, border-color .1s, transform .08s;
}
.icon-picker-cell:hover{ background:#f8f9fb; border-color:var(--line); }
.icon-picker-cell.selected{ background:var(--accent-soft); border-color:var(--accent); }
.icon-picker-cell .icon-picker-svg svg{ width:22px; height:22px; color:var(--ink); }
.icon-picker-cell.selected .icon-picker-svg svg{ color:var(--accent-ink); }
.icon-picker-cell-name{
  font-size:9.5px; color:var(--ink-3); letter-spacing:-0.01em;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden; max-width:100%;
}
.icon-picker-cell.selected .icon-picker-cell-name{ color:var(--accent-ink); font-weight:600; }

/* ===== Vertical picker (searchable MULTI-SELECT list popover) =====
   Used in the Question form's AI panel to set domain hint(s)
   (Auto Insurance, Debt Relief, Medicare, etc.). Rows toggle on
   click; popover stays open until the admin clicks outside or
   hits Escape. The footer shows live count + Clear-all button. */
.vertical-picker{ position:relative; }
.vertical-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.vertical-picker-trigger:hover{ border-color:#cbd5e1; }
.vertical-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.vertical-picker-name{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vertical-picker-name.placeholder{ color:var(--ink-3); font-style:italic; }
.vertical-picker-caret{ color:var(--ink-3); font-size:10px; }

.vertical-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:420px;
}
/* Counter display:flex above so [hidden] actually hides the popover. */
.vertical-picker-pop[hidden]{ display:none !important; }
.vertical-picker-search{
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.vertical-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.vertical-picker-list{
  display:flex; flex-direction:column; gap:1px;
  overflow-y:auto;
  flex:1; min-height:0;
}
.vertical-picker-row{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  cursor:pointer; font:inherit; font-size:13px; color:var(--ink);
  text-align:left;
  transition:background .1s, border-color .1s;
}
.vertical-picker-row:hover{ background:#f3f6fa; }
.vertical-picker-row.selected{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.vertical-picker-row.selected:hover{ background:var(--accent-soft); }
.vertical-picker-row .vertical-picker-row-label{ flex:1; }
.vertical-picker-row.selected .vertical-picker-row-label{ font-weight:600; }

/* Checkbox-style indicator drawn entirely in CSS. */
.vertical-picker-row-check{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, border-color .1s;
}
.vertical-picker-row.selected .vertical-picker-row-check{
  background:var(--accent); border-color:var(--accent);
}
/* CSS-drawn checkmark using a rotated rectangle inset shadow trick. */
.vertical-picker-row.selected .vertical-picker-row-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}

.vertical-picker-pop-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px solid var(--line);
  flex-shrink:0;
  font-size:12.5px; color:var(--ink-3);
}
.vertical-picker-count{ font-variant-numeric:tabular-nums; }
.vertical-picker-clear-all{
  padding:4px 10px;
  background:transparent; border:1px solid transparent;
  border-radius:6px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:background .1s, color .1s, border-color .1s;
}
.vertical-picker-clear-all:hover:not(:disabled){
  background:#fff5f3; color:var(--danger); border-color:#fce6e0;
}
.vertical-picker-clear-all:disabled{ opacity:0.4; cursor:default; }

/* ===== Generic multi-select picker (msPicker) =====
   Same chrome as the vertical picker, parameterized for any list of
   { value, label, meta? } items. Used for flow include/exclude
   campaign filters and the Question form "+ Add questions" picker. */
.ms-picker{ position:relative; }
.ms-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.ms-picker-trigger:hover{ border-color:#cbd5e1; }
.ms-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.ms-picker-name{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ms-picker-name.placeholder{ color:var(--ink-3); font-style:italic; }
.ms-picker-caret{ color:var(--ink-3); font-size:10px; }

.ms-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:420px;
}
.ms-picker-pop[hidden]{ display:none !important; }
.ms-picker-search{
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.ms-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.ms-picker-list{
  display:flex; flex-direction:column; gap:1px;
  overflow-y:auto;
  flex:1; min-height:0;
}
.ms-picker-row{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  cursor:pointer; font:inherit; font-size:13px; color:var(--ink);
  text-align:left;
  transition:background .1s, border-color .1s;
}
.ms-picker-row:hover{ background:#f3f6fa; }
.ms-picker-row.selected{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.ms-picker-row.selected:hover{ background:var(--accent-soft); }
.ms-picker-row-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ms-picker-row-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-picker-row-meta{ font-size:11.5px; color:var(--ink-3); }
.ms-picker-row.selected .ms-picker-row-label{ font-weight:600; }
.ms-picker-row.selected .ms-picker-row-meta{ color:var(--accent-ink); opacity:0.75; }

.ms-picker-row-check{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, border-color .1s;
}
.ms-picker-row.selected .ms-picker-row-check{
  background:var(--accent); border-color:var(--accent);
}
.ms-picker-row.selected .ms-picker-row-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}

.ms-picker-pop-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px solid var(--line);
  flex-shrink:0;
  font-size:12.5px; color:var(--ink-3);
}
.ms-picker-count{ font-variant-numeric:tabular-nums; }
.ms-picker-clear-all{
  padding:4px 10px;
  background:transparent; border:1px solid transparent;
  border-radius:6px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:background .1s, color .1s, border-color .1s;
}
.ms-picker-clear-all:hover:not(:disabled){
  background:#fff5f3; color:var(--danger); border-color:#fce6e0;
}
.ms-picker-clear-all:disabled{ opacity:0.4; cursor:default; }

/* ===== Audience profile tree picker (hierarchical multi-select) =====
   Uses the same chrome as the vertical picker but the body is a
   collapsible tree. Groups have a caret toggle + a checkbox tag
   button on the header row. Indentation is created by the nested
   .profile-group-items padding — no JS depth calculations needed. */
.profile-picker{ position:relative; }
.profile-picker-trigger{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; color:var(--ink);
  cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.profile-picker-trigger:hover{ border-color:#cbd5e1; }
.profile-picker-trigger[aria-expanded=true]{ border-color:var(--accent); }
.profile-picker-name{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.profile-picker-name.placeholder{ color:var(--ink-3); font-style:italic; }
.profile-picker-caret{ color:var(--ink-3); font-size:10px; }

.profile-picker-pop{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
  padding:10px;
  display:flex; flex-direction:column; gap:8px;
  max-height:520px;
}
.profile-picker-pop[hidden]{ display:none !important; }
.profile-picker-search{
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:13px; background:#fafafa;
  flex-shrink:0;
}
.profile-picker-search:focus{ outline:none; border-color:var(--accent); background:#fff; }
.profile-picker-tree{
  display:flex; flex-direction:column; gap:1px;
  overflow-y:auto;
  flex:1; min-height:0;
  padding-right:4px;
}

/* Group rows — depth 0 is bold; deeper levels are quieter. */
.profile-group{ display:flex; flex-direction:column; gap:1px; }
.profile-group-header{
  display:flex; align-items:stretch; gap:4px;
}
.profile-group-toggle{
  width:22px; flex-shrink:0;
  background:transparent; border:1px solid transparent; border-radius:5px;
  color:var(--ink-3); font:inherit; font-size:9px;
  cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, color .1s;
}
.profile-group-toggle:hover{ background:#eef2f6; color:var(--ink); }
.profile-group-toggle .profile-caret{ display:block; line-height:1; }

.profile-tag-btn{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:9px;
  padding:7px 10px;
  background:transparent; border:1px solid transparent; border-radius:6px;
  font:inherit; font-size:13px; color:var(--ink);
  text-align:left; cursor:pointer;
  transition:background .1s, border-color .1s;
}
.profile-tag-btn:hover{ background:#f3f6fa; }
.profile-tag-btn.selected{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.profile-tag-btn.selected:hover{ background:var(--accent-soft); }
.profile-tag-btn .profile-tag-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.profile-tag-btn.selected .profile-tag-name{ font-weight:600; }

/* Top-level category headers get slightly heavier type so the
   hierarchy reads even when collapsed. */
.profile-group[data-depth="0"] > .profile-group-header > .profile-tag-btn .profile-tag-name{
  font-weight:600; font-size:13.5px;
}

/* Checkbox indicator — same visual as vertical picker. */
.profile-check{
  width:16px; height:16px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, border-color .1s;
}
.profile-tag-btn.selected .profile-check{
  background:var(--accent); border-color:var(--accent);
}
.profile-tag-btn.selected .profile-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}

/* Nested children get a soft indent + a vertical guide-line. */
.profile-group-items{
  padding-left:22px;
  border-left:1px dashed #eef2f6;
  margin-left:11px;
  display:flex; flex-direction:column; gap:1px;
}

.profile-picker-pop-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px solid var(--line);
  flex-shrink:0;
  font-size:12.5px; color:var(--ink-3);
}
.profile-picker-count{ font-variant-numeric:tabular-nums; }
.profile-picker-clear-all{
  padding:4px 10px;
  background:transparent; border:1px solid transparent;
  border-radius:6px; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:background .1s, color .1s, border-color .1s;
}
.profile-picker-clear-all:hover:not(:disabled){
  background:#fff5f3; color:var(--danger); border-color:#fce6e0;
}
.profile-picker-clear-all:disabled{ opacity:0.4; cursor:default; }

/* ===== Color picker (native swatch + hex text input) ===== */
.color-picker{ display:flex; align-items:stretch; gap:8px; }
.color-picker-swatch{
  width:38px; height:38px; padding:2px; flex-shrink:0;
  border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;
}
.color-picker-swatch::-webkit-color-swatch{ border-radius:6px; border:none; }
.color-picker-swatch::-moz-color-swatch{ border-radius:6px; border:none; }
.color-picker-swatch[data-empty="1"]{ background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f1f5f9 4px,#f1f5f9 8px); }
.color-picker-hex{
  flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; font-family:'SF Mono','Menlo',ui-monospace,monospace;
  background:#fff; color:var(--ink); text-transform:lowercase;
}
.color-picker-hex:focus{ outline:none; border-color:var(--accent); }

/* ===== Catalog import picker modal ===== */
.catalog-modal{ max-width:760px; }
.catalog-modal .modal-body{
  display:flex; flex-direction:column; gap:10px;
  /* Cap the height so the inner list scrolls inside the modal rather
     than the modal growing past the viewport. */
  max-height:70vh;
}
/* Status filter pills for the campaign-import modal. Shown above the
   verticals list once a catalog has been loaded. */
.trk-filter-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:4px 0;
  font-size:12.5px;
}
.trk-filter-row[hidden]{ display:none; }
.trk-filter-label{ color:var(--ink-3); font-weight:600; letter-spacing:0.02em; }
.chip.trk-filter{
  padding:5px 11px; font-size:12.5px; font-weight:600;
}
.chip.trk-filter:has(input:checked){
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}
.trk-filter-count{
  margin-left:auto; color:var(--ink-3); font-variant-numeric:tabular-nums;
}

/* Imported routing URL block — shown at the top of the assigned-offers
   section on campaigns created via the trkreach import. Reminds the
   admin of the source URL and that it'll be pre-filled on Add new offer. */
.imported-url-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin:6px 0 10px;
  background:#fbf7e8; border:1px solid #e8d4a6; border-radius:8px;
  font-size:12.5px;
}
.imported-url-label{
  font-weight:600; color:#6b4f00; letter-spacing:0.01em;
  text-transform:uppercase; font-size:11px;
  flex-shrink:0;
}
.imported-url-value{
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
  font-size:12px; color:var(--ink);
  background:#fff; padding:3px 7px; border-radius:4px;
  border:1px solid #ead9ad;
  user-select:all;
  word-break:break-all; flex:1; min-width:200px;
}
.imported-url-row .hint{ flex-basis:100%; color:#6b4f00; opacity:0.75; }
.catalog-list{
  flex:1; min-height:0;
  overflow-y:auto;
  border:1px solid var(--line); border-radius:10px;
  background:#fff;
  display:flex; flex-direction:column;
}
.catalog-row{
  appearance:none; border:0; background:transparent; text-align:left;
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--line-2);
  cursor:pointer; font:inherit;
  transition:background .12s;
}
.catalog-row:last-child{ border-bottom:0; }
.catalog-row:hover,.catalog-row:focus-visible{
  background:var(--accent-soft); outline:none;
}
/* Selected-state for campaign-import rows. Drives the visual fill of
   the .ms-picker-row-check checkbox span when aria-pressed=true. */
.catalog-row[aria-pressed="true"]{
  background:var(--accent-soft);
}
.catalog-row[aria-pressed="true"] .ms-picker-row-check{
  background:var(--accent); border-color:var(--accent);
}
.catalog-row[aria-pressed="true"] .ms-picker-row-check::after{
  content:''; display:block;
  width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-2px;
}
.catalog-row[aria-pressed="true"] .catalog-row-name{ color:var(--accent-ink); }
.catalog-row-main{ flex:1; min-width:0; }
.catalog-row-name{
  font-weight:700; font-size:14px; color:var(--ink);
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.catalog-row-meta{
  font-size:11.5px; color:var(--ink-3); margin-top:3px;
  display:flex; align-items:center; gap:10px;
}
.catalog-row-meta code{
  background:#f1f5f9; padding:1px 6px; border-radius:4px;
  font-size:10.5px; font-family:'SF Mono','Menlo',ui-monospace,monospace;
}
.catalog-row-url{
  flex:1; min-width:0;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  font-family:'SF Mono','Menlo',ui-monospace,monospace; font-size:10.5px;
}
.catalog-row-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  flex-shrink:0;
}
.catalog-row-epc{
  font-size:10.5px; font-weight:700; color:var(--ink-2);
  letter-spacing:.04em; text-transform:uppercase;
}

/* ===== Master Catalog picker additions =====
   Richer rows for the rebuilt campaign-import modal: banner thumbnail,
   pool badge (lead-gen vs ecom), editorial headline preview, parent
   slug tag on ecom rows and a dimmed already-imported state. */
.catalog-status-select{
  padding:5px 10px; font:inherit; font-size:12.5px; font-weight:600;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink-2); cursor:pointer;
}
.catalog-status-select:focus{ outline:none; border-color:var(--accent); }
.catalog-row-thumb{
  width:72px; height:48px; object-fit:cover; flex-shrink:0;
  border-radius:6px; border:1px solid var(--line-2); background:#f1f5f9;
}
.catalog-row-headline{
  font-size:12px; color:var(--ink-2); margin-top:2px;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.catalog-pool-badge{
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.catalog-pool-badge.pool-v{ background:#eef2ff; color:#3730a3; }
.catalog-pool-badge.pool-e{ background:#fdf2f8; color:#9d174d; }
.catalog-parent-tag{
  background:#f1f5f9; color:var(--ink-3);
  padding:1px 6px; border-radius:4px;
  font-size:10.5px; font-weight:600; white-space:nowrap;
}
.catalog-imported-tag{
  color:var(--ink-3); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.catalog-row.imported{ opacity:.55; }
.catalog-row.imported:hover,
.catalog-row.imported[aria-pressed="true"]{ opacity:.9; }

/* ===== Per-offer chips picker (third import mode) =====
   Expander tag inside the row <button> (span — rows can't nest
   buttons) + per-offer checkbox sub-list rendered as a SIBLING
   element right after the row. */
.catalog-offers-expander{
  display:inline-flex; align-items:center; gap:4px;
  background:#f1f5f9; color:var(--ink-2);
  padding:1px 7px; border-radius:4px;
  font-size:10.5px; font-weight:700; white-space:nowrap;
  cursor:pointer; user-select:none;
}
.catalog-offers-expander:hover{ background:#e2e8f0; color:var(--ink); }
.catalog-offer-sublist{
  border-bottom:1px solid var(--line-2);
  background:#fafcff;
  padding:4px 14px 10px 46px;
  display:flex; flex-direction:column; gap:2px;
}
/* Counter the display:flex above so [hidden] actually collapses the
   sub-list (same pattern as .modal-foot[hidden] etc.). */
.catalog-offer-sublist[hidden]{ display:none; }
.catalog-offer-sublist:last-child{ border-bottom:0; }
.catalog-offer-line{
  display:flex; align-items:center; gap:8px;
  padding:4px 6px; border-radius:6px;
  font-size:12.5px; color:var(--ink);
  cursor:pointer;
}
.catalog-offer-line:hover{ background:var(--accent-soft); }
.catalog-offer-line input[type=checkbox]{ accent-color:var(--accent); flex-shrink:0; }
.catalog-offer-name{
  flex:1; min-width:0; font-weight:600;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.catalog-offer-type{
  font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:4px;
  background:#eef2ff; color:#3730a3;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.catalog-offer-weight{
  font-size:10.5px; color:var(--ink-3); white-space:nowrap;
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
}
.catalog-offer-payout{
  font-size:11px; font-weight:700; color:#065f46; white-space:nowrap;
}

/* ===== Brand chips list inside the Campaign form (offer-group only) ===== */
.brand-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:10px;
}
.brand-list-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:#fafafa; border:1px solid var(--line-2); border-radius:10px;
}
.brand-list-item .brand-mark{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:800; letter-spacing:-0.02em;
  flex-shrink:0;
}
.brand-list-body{ flex:1; min-width:0; }
.brand-list-name{ font-weight:700; font-size:14px; color:var(--ink); }
.brand-list-url{
  font-size:11.5px; color:var(--ink-3);
  font-family:'SF Mono','Menlo',ui-monospace,monospace;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  margin-top:2px;
}
.brand-list-edit{ flex-shrink:0; }

/* ===== Add-style question picker (Flow form) ===== */
.picked-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:12px;
}
.picked-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; transition:border-color .12s, box-shadow .12s;
}
.picked-row:hover{ border-color:#cbd5e1; box-shadow:0 1px 3px rgba(15,23,42,0.04); }
.picked-num{
  width:24px; height:24px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0;
}
.picked-body{ flex:1; min-width:0; }
.picked-title{ font-weight:600; font-size:14px; color:var(--ink); }
.picked-meta{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.picked-meta code{ background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.picked-actions{ display:flex; gap:4px; flex-shrink:0; }
.picked-empty{
  background:#fafafa; border:1px dashed var(--line); border-radius:10px;
  padding:16px; text-align:center; color:var(--ink-3); font-size:13.5px;
  margin-bottom:12px;
}

.btn-icon{
  width:30px; height:30px; border-radius:6px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  cursor:pointer; font-size:14px; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-icon:hover:not(:disabled){
  background:#f9fafb; color:var(--ink); border-color:#cbd5e1;
}
.btn-icon:disabled{ opacity:.35; cursor:not-allowed; }
.btn-icon.danger:hover:not(:disabled){ color:var(--danger); border-color:#fecaca; background:#fef2f2; }

.picker-add{
  display:flex; flex-direction:column; gap:8px;
  padding:12px; background:#fafafa; border:1px dashed var(--line);
  border-radius:10px;
}
.picker-add-label{
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  letter-spacing:0.01em;
}
.picker-add select{
  padding:8px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; background:#fff; min-width:240px; flex:1;
  cursor:pointer;
}
.picker-add select:focus{ outline:none; border-color:var(--accent); }
.picker-new{
  font-size:12.5px; color:var(--accent); text-decoration:none; font-weight:600;
  align-self:flex-end;
}
.picker-new:hover{ text-decoration:underline; }

/* AND/OR mode selector at the top of each rule */
.seg-mode{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-2); font-weight:600;
}
.seg-mode select{
  padding:5px 8px; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:12.5px; font-weight:600; background:#fff;
}
.seg-mode select:focus{ outline:none; border-color:var(--accent); }

/* AND/OR separator chip between conditions — clickable to flip mode */
.seg-sep{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.seg-sep::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line-2);
}
.seg-sep-label{
  position:relative; z-index:1;
  background:#fafafa; padding:2px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.seg-sep-label:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }

/* Tint the rule card subtly so AND vs OR is visually distinguishable */
.seg-rule[data-mode="any"]{
  border-color:#dbe2f0; background:#fbfcff;
}
.seg-rule[data-mode="any"] .badge.when{
  background:#eef2ff; color:#3730a3;
}

.seg-then{
  display:flex; align-items:center; gap:10px;
}
.seg-then input{
  flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px;
}
.seg-then input:focus{ outline:none; border-color:var(--accent); }

/* ===== Dashboard cards ===== */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:24px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;
}
.card .label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700;}
.card .value{font-size:26px; font-weight:700; margin-top:6px; letter-spacing:-0.01em;}
.card .sub{font-size:12px; color:var(--ink-3); margin-top:4px;}

@media (max-width:780px){
  .layout{grid-template-columns:1fr;}
  .sidebar{flex-direction:row; padding:10px; gap:8px; align-items:center; overflow-x:auto;}
  .sidebar .brand{border-bottom:0; padding:8px; flex-shrink:0;}
  .sidebar nav{flex-direction:row; flex-wrap:nowrap; flex:1; overflow-x:auto;}
  .sidebar nav a{flex-shrink:0; padding:8px 10px;}
  .sidebar-footer{display:none;}
  .main{padding:16px;}
  .field-row, .field-row-3{grid-template-columns:1fr;}
  .repeater-row{grid-template-columns:1fr 1fr;}
}

/* ===== Reports view ===== */
.reports-filters{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:16px;
  display:flex; flex-direction:column; gap:10px;
}
.rf-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.rf-field{ display:flex; flex-direction:column; gap:4px; min-width:140px; flex:0 1 auto; }
.rf-field input[type=text], .rf-field input[type=date], .rf-field select{
  padding:8px 10px; border:1px solid var(--line); border-radius:9px;
  font:inherit; font-size:14px; background:#fff;
}
.rf-field input:focus, .rf-field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,122,63,0.10); }
.rf-label{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.rf-quick{ display:flex; gap:4px; align-items:center; margin-left:auto; padding-bottom:6px; }
.rf-quick .btn-link{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.rf-quick .btn-link:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
/* Resolved query window — what UTC range the API actually sees,
   given the local-time From/To inputs. Makes timezone-driven
   discrepancies (the "5/30 EDT vs 5/30 UTC" bug) impossible to miss. */
.rf-window{
  font-size:12px; color:var(--ink-3); margin-top:10px;
  padding:8px 10px; background:var(--surface-2, #f6f7f8); border-radius:8px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:0.01em;
}
.rf-window strong{ color:var(--ink-1); font-weight:700; }
.rf-window .muted{ color:var(--ink-3); }

/* Assist responses view — chips + table cells */
.assist-chip-row{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;
}
.assist-chip{
  appearance:none; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink-2); transition:background .12s, color .12s, border-color .12s;
  display:inline-flex; align-items:center; gap:6px;
}
.assist-chip:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.assist-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.assist-chip-n{ font-size:11px; opacity:0.7; font-weight:500; }
.assist-chip.active .assist-chip-n{ opacity:0.9; }
.assist-cat-badge{
  display:inline-block; padding:3px 9px; font-size:12px; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink); border-radius:999px;
}
.assist-fb-badge{
  display:inline-block; padding:2px 7px; font-size:10px; font-weight:700;
  background:#fef3c7; color:#92400e; border-radius:999px; margin-left:4px;
  text-transform:uppercase; letter-spacing:0.05em;
}
.assist-text-cell{ max-width:420px; }
.assist-open-link{
  color:var(--accent-ink); font-weight:600; font-size:13px; text-decoration:none;
}
.assist-open-link:hover{ text-decoration:underline; }

.reports-kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px; margin-bottom:18px;
}
.kpi-card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.kpi-label{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.kpi-value{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:26px; line-height:1.1; letter-spacing:-0.01em; color:var(--ink); }
.kpi-hint{ font-size:11.5px; color:var(--ink-3); }

/* Warning variant of the KPI card. Renders only when a Reports query
   hits the server-side scan cap (20k events / 5k sessions). Amber
   palette tells the user the displayed numbers are truncated and
   they should narrow the window. */
.kpi-card.kpi-warn{
  background:#fef3c7; border-color:#fbbf24;
}
.kpi-card.kpi-warn .kpi-label{ color:#92400e; }
.kpi-card.kpi-warn .kpi-value{ color:#7c2d12; }
.kpi-card.kpi-warn .kpi-hint { color:#7c2d12; }

.reports-section{ margin-bottom:22px; }
.reports-section h3{
  font-size:15px; font-weight:700; letter-spacing:-0.005em;
  margin:0 0 8px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}
.reports-section .table-wrap{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.reports-section table th.sortable{ cursor:pointer; user-select:none; }
.reports-section table th.sortable:hover{ background:#eef2ee; }
.reports-section table th.sorted-asc::after { content:' ↑'; opacity:0.6; font-size:11px; }
.reports-section table th.sorted-desc::after{ content:' ↓'; opacity:0.6; font-size:11px; }

/* ===========================================================
   Analytics lenses — tabbed dashboard at /analytics
   ===========================================================
   Layout primitives shared across all lens renderers. Reuses
   .kpi-card (defined above for Reports) where shapes match.
   =========================================================== */

/* Filter bar — sits below the view head, above the tabs. */
.lens-filter-bar{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  padding:14px 16px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  margin-bottom:14px;
}
.lens-filter-group{ display:flex; flex-direction:column; gap:4px; }
.lens-filter-label{
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);
}
.lens-filter-sel{
  padding:6px 10px; border-radius:8px; border:1px solid var(--line);
  font:inherit; font-size:13.5px; background:#fff; min-width:140px;
}
.lens-filter-sel:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,122,63,0.10); }
.lens-filter-group .rf-quick{ margin:0; padding:0; }
.lens-filter-group .rf-chip{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.lens-filter-group .rf-chip:hover{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.lens-filter-group .rf-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* Cache-state tag in the view-head actions area. */
.analytics-cache{
  font-size:12px; color:var(--ink-3); padding:4px 10px; border-radius:8px;
  background:#f1f5f9; font-weight:600;
}
.analytics-cache.hit  { background:#dcfce7; color:#166534; }
.analytics-cache.fresh{ background:#dbeafe; color:#1e3a8a; }

/* Tab strip. */
.lens-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.lens-tab{
  background:transparent; border:0; border-bottom:2px solid transparent;
  padding:10px 16px 12px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .12s, border-color .12s, background .12s;
}
.lens-tab:hover{ color:var(--ink); background:#f8fafc; }
.lens-tab.active{
  color:var(--accent-ink); border-bottom-color:var(--accent);
}
.lens-tab-tag{
  font-size:9.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  background:#e2e8f0; color:#475569; padding:2px 6px; border-radius:999px;
}
.lens-tab.active .lens-tab-tag{ background:var(--accent-soft); color:var(--accent-ink); }

/* Lens content shell. */
.lens-content{ min-height:200px; }
.lens-section{ margin-bottom:26px; }
.lens-section > h3{
  font-size:15px; font-weight:700; letter-spacing:-0.005em;
  margin:0 0 10px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}

/* Audience lens KPI strip — 3 small stat cards above each question's
   bucket table. Reuses .lens-* tone but compact. */
.aud-kpi-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px; margin:0 0 10px;
}
.aud-kpi{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.aud-kpi-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.aud-kpi-value{
  font-family:'Fraunces', Georgia, serif;
  font-size:21px; font-weight:600; color:var(--ink);
  line-height:1.1; margin-top:2px;
}
.aud-kpi-hint{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* Highlight the top-EPUU row + the "top" pill that flags it. */
.lens-table tr.is-top-bucket td{
  background:color-mix(in srgb, var(--accent-soft) 65%, transparent);
}

/* Slot-performance heatmap — per-offer × slot CTR matrix. Empty cells
   render as a muted dash so the eye glides past them; populated cells
   carry a tooltip with the underlying imps/clicks/conv/rev counters
   (set via the title attr on the <td>). */
.slot-heatmap td.slot-empty{ color:var(--ink-3); opacity:.55; }
.slot-heatmap td.slot-cell{ font-variant-numeric:tabular-nums; cursor:help; }
.slot-heatmap td.slot-cell:hover{ background:color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.aud-top-pill{
  display:inline-block; padding:1px 7px; margin-left:4px;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:#fff; border-radius:999px;
  vertical-align:1px;
}

/* ===== Audience Sort tab (P1 — observe only) ===== */
.audsort-kpi-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:10px; margin-bottom:10px;
}
.audsort-kpi{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.audsort-kpi-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.audsort-kpi-value{
  font-family:'Fraunces', Georgia, serif;
  font-size:21px; font-weight:600; color:var(--ink);
  line-height:1.1; margin-top:2px;
}
.audsort-kpi-hint{ font-size:11.5px; color:var(--ink-3); margin-top:2px; }

.audsort-actions{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:8px 0 18px;
}

.audsort-explorer{ display:flex; flex-direction:column; gap:12px; }
.audsort-picker{
  display:flex; flex-direction:column; gap:4px;
  min-width:200px;
}
.audsort-picker-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.audsort-picker select{
  padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13.5px; background:#fff; color:var(--ink);
}
.audsort-picker select:focus{ outline:none; border-color:var(--accent); }
.audsort-sig-totals{
  font-size:13px; color:var(--ink-2); margin:6px 0 10px;
}

/* Heatmap — sigs × campaigns. Each cell shows smoothed EPUU $;
   color indicates sample confidence, hover for full metrics. */
.audsort-heatmap-wrap{
  overflow-x:auto; margin-top:10px;
  border:1px solid var(--line); border-radius:10px;
  background:#fff;
}
.audsort-heatmap{
  border-collapse:collapse; width:100%;
  font-size:11.5px;
}
.audsort-heatmap th, .audsort-heatmap td{
  border:1px solid var(--line); padding:6px 8px;
  text-align:right; white-space:nowrap;
}
.audsort-rowhdr{
  position:sticky; left:0; z-index:1; background:#f6f6f3;
  text-align:left; font-weight:600; color:var(--ink-2);
  min-width:120px;
}
.audsort-rowhdr-n{
  display:block; font-size:10px; font-weight:500; color:var(--ink-3); margin-top:1px;
}
.audsort-colhdr{
  background:#f6f6f3; font-weight:600; color:var(--ink-2);
  text-align:center !important; min-width:74px;
}
.audsort-colhdr-id{
  display:block; font-size:11px; color:var(--ink); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; max-width:80px;
}
.audsort-colhdr-net{
  display:block; font-size:10px; color:var(--ink-3); font-weight:500;
}
.audsort-cell{ cursor:help; font-variant-numeric:tabular-nums; }
.audsort-cell-confident{ background:color-mix(in srgb, var(--accent-soft) 80%, transparent); color:var(--accent-ink); font-weight:600; }
.audsort-cell-weak     { background:#fff4e0; color:#8a5400; }
.audsort-cell-empty    { background:#fafafa; color:var(--ink-3); }

.audsort-legend{
  display:inline-block; padding:1px 8px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  margin:0 2px;
}
.audsort-legend-confident{ background:color-mix(in srgb, var(--accent-soft) 80%, transparent); color:var(--accent-ink); }
.audsort-legend-weak     { background:#fff4e0; color:#8a5400; }
.audsort-legend-empty    { background:#fafafa; color:var(--ink-3); border:1px solid var(--line); }

/* Simulator picker row */
.audsort-sim-row{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:12px;
}
.audsort-sim-result{ margin-top:10px; }
.audsort-sim-summary{ font-size:13px; color:var(--ink-2); margin-bottom:8px; }

/* Lift indicators */
.audsort-lift-up   { color:var(--accent-ink); font-weight:700; }
.audsort-lift-down { color:#9b1c1c; font-weight:600; }

/* Small monospace UUID prefix under the campaign name in tables —
   kept visible (not hidden) so the operator can cross-reference
   against Firestore docs / debug logs. */
.audsort-cell-id{
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
  font-size:10.5px; color:var(--ink-3); font-weight:500;
  letter-spacing:0.01em; margin-top:1px;
}
.lens-section-sub{
  font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.lens-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px;
}
.lens-section-head h3{ margin:0; font-size:15px; font-weight:700; }
.lens-warn{
  font-size:11.5px; font-weight:700; color:#92400e;
  background:#fef3c7; padding:3px 9px; border-radius:999px; border:1px solid #fbbf24;
}
.lens-subhead{
  font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px;
}

.lens-grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.lens-grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
@media (max-width: 1000px){
  .lens-grid-2, .lens-grid-3{ grid-template-columns:1fr; }
}

.lens-empty{
  padding:14px; background:#fafafa; border:1px dashed var(--line); border-radius:10px;
  color:var(--ink-3); font-size:13px; text-align:center;
}
.lens-note{
  padding:10px 14px; background:#f8fafc; border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:8px;
  color:var(--ink-2); font-size:12.5px; line-height:1.5;
  margin-bottom:10px;
}
.lens-banner{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:10px; color:#1e3a8a; font-size:13px;
  margin-bottom:14px;
}
.lens-banner-icon{ font-size:16px; }
.lens-banner-meta{ color:#475569; font-size:12px; margin-left:6px; }
.lens-banner strong{ color:#1e40af; font-weight:700; }

/* 4-column KPI grid used by Quality + Attribution lens summaries. */
.kpi-grid-4{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px; margin-bottom:16px;
}
@media (max-width: 900px){ .kpi-grid-4{ grid-template-columns:repeat(2, 1fr); } }

/* Stacked horizontal bars (Quality lens — profile completeness). */
.qual-stack-row{
  display:grid; grid-template-columns:140px 1fr 160px; align-items:center;
  gap:10px; padding:5px 0; font-size:13px;
}
.qual-stack-label{ color:var(--ink-2); font-weight:600; }
.qual-stack-bar{
  background:#f1f5f9; border-radius:999px; height:10px; overflow:hidden;
  border:1px solid var(--line);
}
.qual-stack-fill{
  display:block; height:100%; background:var(--accent);
  border-radius:999px; transition:width .2s;
}
.qual-stack-pct{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:12.5px; }
.qual-stack-pct .muted{ color:var(--ink-3); font-size:11.5px; }

/* Funnel visualization (Funnel lens — overall stages). */
.funnel-viz{
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:18px 20px;
}
.funnel-stage{ display:flex; flex-direction:column; gap:4px; }
.funnel-stage-label{
  font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-2);
}
.funnel-stage-bar{
  background:#f1f5f9; border-radius:8px; height:32px;
  border:1px solid var(--line); overflow:hidden;
  position:relative;
}
.funnel-stage-fill{
  background:linear-gradient(90deg, var(--accent), #0b6634);
  height:100%; border-radius:8px;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 12px; min-width:fit-content;
  transition:width .3s;
}
.funnel-stage-count{
  color:#fff; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.funnel-stage-meta{
  display:flex; gap:14px; font-size:12px; color:var(--ink-3);
}
.funnel-stage-retain{ font-weight:600; color:var(--ink-2); }
.funnel-stage-drop  { color:#b45309; }

/* Trends sparkline + heatmap. */
.trend-spark-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 900px){ .trend-spark-grid{ grid-template-columns:1fr; } }
.trend-spark{
  color:var(--accent); display:block;
  width:100%; height:60px; margin-top:4px;
}
.trend-total{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:18px;
  margin-top:4px; color:var(--ink);
}
.trend-total .muted{ font-family:inherit; font-size:11px; color:var(--ink-3); font-weight:400; letter-spacing:0.04em; text-transform:uppercase; }
.trend-delta{
  display:inline-block; font-variant-numeric:tabular-nums; font-weight:600;
  padding:1px 7px; border-radius:5px; font-size:11.5px;
}
.trend-delta.up  { color:#15803d; background:#dcfce7; }
.trend-delta.down{ color:#b91c1c; background:#fee2e2; }
.trend-delta.flat{ color:var(--ink-3); background:#f1f5f9; }

/* Hour×day heatmap (Trends lens). */
.heatmap{
  border-collapse:collapse; font-size:11px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  overflow:hidden;
}
.heatmap th, .heatmap td{ padding:0; }
.heatmap thead th{
  background:#fafafa; color:var(--ink-3); font-weight:600;
  padding:6px 4px; min-width:24px; text-align:center;
  font-size:10.5px; font-variant-numeric:tabular-nums;
}
.heatmap-row-label{
  background:#fafafa; padding:4px 10px; color:var(--ink-2); font-weight:700;
  font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  white-space:nowrap; border-right:1px solid var(--line);
}
.heatmap-cell{
  height:22px; min-width:24px; border:1px solid #fff;
  cursor:default;
}
.heatmap-cell:hover{ outline:2px solid var(--accent); position:relative; }
.lens-note code{
  background:#e2e8f0; padding:1px 5px; border-radius:4px;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11.5px;
}
.lens-error{
  padding:14px; background:#fee2e2; border:1px solid #fca5a5; border-radius:10px;
  color:#7f1d1d; font-size:13px; font-weight:600;
}

/* Sortable lens tables. Compact, monospace-style numerics.
   Wrapper allows horizontal scroll so wide tables (9+ cols) never
   clip the rightmost columns — Revenue / RPM always visible. */
.lens-content .table-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow-x:auto;
}
.lens-table{ width:100%; border-collapse:collapse; min-width:680px; }
.lens-table th, .lens-table td{
  padding:8px 10px; font-size:13px;
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.lens-table th{
  background:#fafafa; text-align:left;
  font-weight:700; color:var(--ink-2); font-size:11px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.lens-table th.sortable{ cursor:pointer; user-select:none; }
.lens-table th.sortable:hover{ background:#f1f5f9; color:var(--ink); }
.lens-table th .sort-label{ display:inline-block; }
.lens-table th .sort-arrow{ display:inline-block; margin-left:5px; opacity:.6; font-size:10px; }
.lens-table tbody tr:hover{ background:#fafafa; }
.lens-table td.cell-r{ text-align:right; font-variant-numeric:tabular-nums; }
.lens-table td.cell-l{ text-align:left; }
.lens-table td:first-child{ font-weight:600; color:var(--ink); }

/* Pulse KPI variant — wider card, sparkline, delta line.
   .kpi-grid-7 (Sessions, Unique users, Impressions, Clicks, Conversions,
   Revenue, RPUU) is the current Pulse layout. .kpi-grid-6 kept as an
   alias in case any other view still uses the old name — both share
   the same responsive breakpoints. */
.kpi-grid-7, .kpi-grid-6{
  display:grid;
  gap:10px; margin-bottom:16px;
}
.kpi-grid-7{ grid-template-columns:repeat(7, minmax(0, 1fr)); }
.kpi-grid-6{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
@media (max-width: 1440px){ .kpi-grid-7{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 1280px){ .kpi-grid-6, .kpi-grid-7{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 720px) { .kpi-grid-6, .kpi-grid-7{ grid-template-columns:repeat(2, 1fr); } }
.kpi-pulse{ position:relative; }
.kpi-pulse-label{
  font-size:11px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.kpi-pulse-value{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:24px; line-height:1.1;
  letter-spacing:-0.01em; color:var(--ink); margin-top:2px;
}
.kpi-pulse-spark{
  color:var(--accent); margin-top:6px; display:block;
}
.kpi-pulse-delta{
  font-size:11.5px; font-weight:600; margin-top:4px;
}
.kpi-pulse-delta.up  { color:#15803d; }
.kpi-pulse-delta.down{ color:#b91c1c; }
.kpi-pulse-delta.flat{ color:var(--ink-3); }

/* System health chips. */
.health-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.health-chip{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; display:flex; flex-direction:column; gap:3px;
  border-left-width:4px;
}
.health-chip.tone-good{ border-left-color:#22c55e; }
.health-chip.tone-warn{ border-left-color:#f59e0b; }
.health-chip.tone-bad { border-left-color:#ef4444; }
.health-chip-label{
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3);
}
.health-chip-value{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:18px; line-height:1.1; color:var(--ink);
}
.health-chip-sub{ font-size:11.5px; color:var(--ink-3); }

/* Coming-soon placeholder. */
.lens-placeholder{
  padding:48px 24px; text-align:center; background:#fafafa;
  border:1px dashed var(--line); border-radius:12px;
}
.lens-placeholder-icon{ font-size:42px; line-height:1; margin-bottom:12px; }
.lens-placeholder h3{ font-size:18px; font-weight:700; margin-bottom:8px; }
.lens-placeholder p{ color:var(--ink-3); font-size:13.5px; max-width:520px; margin:0 auto; }

/* =========================================================
   Data Segments page
   ---------------------------------------------------------
   List view: status banner, segments table.
   Builder: two-column form + preview panel.
   Rule rows are inline grids so kind/field/op/value all line
   up horizontally and feel like one composed expression.
   ========================================================= */

/* Snapshot status banner at top of list view. */
.data-status{
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px; padding:10px 14px;
  background:#f8fafc; border:1px solid var(--line); border-radius:10px;
  font-size:13px;
}
.data-status-dot{
  width:8px; height:8px; border-radius:50%; background:#cbd5e1;
}
.data-status-dot.ok{ background:#22c55e; }
.data-status-dot.warn{ background:#f59e0b; }
.data-status-label{ font-weight:600; color:var(--ink-2); }
.data-status-value{ color:var(--ink); }
.data-status-sep{ color:var(--ink-3); }

/* Segments list table. */
.data-list{
  width:100%; border-collapse:collapse; font-size:14px;
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.data-list thead{ background:#f8fafc; }
.data-list th, .data-list td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
}
.data-list th.cell-r, .data-list td.cell-r{ text-align:right; font-variant-numeric:tabular-nums; }
.data-list tbody tr:last-child td{ border-bottom:0; }
.data-list tbody tr:hover{ background:#fafafa; }
.data-list-name{
  font-weight:600; color:var(--ink); text-decoration:none;
}
.data-list-name:hover{ color:var(--accent); }
.data-list-desc{
  font-size:12px; color:var(--ink-3); margin-top:2px;
}
.data-tag{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; padding:2px 7px; border-radius:5px;
  background:#f1f5f9; color:#475569;
}
.empty-state{
  text-align:center; padding:60px 24px;
  background:#fafafa; border:1px dashed var(--line); border-radius:12px;
}
.empty-state h3{ font-size:18px; margin-bottom:8px; }
.empty-state p{
  color:var(--ink-3); max-width:480px; margin:0 auto 16px; font-size:14px;
}

/* Builder layout. */
.data-builder{
  display:grid; grid-template-columns:1fr; gap:16px;
}
.data-builder .card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:18px;
}
.data-builder .card h3{
  font-size:15px; font-weight:700; margin-bottom:12px;
}
/* Two-up name+tag, description spans both. */
.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:14px;
}
.form-grid label{
  display:flex; flex-direction:column; gap:4px;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.form-grid label.span2{ grid-column:span 2; }
.form-grid label small{
  font-weight:400; color:var(--ink-3);
}
.form-grid input[type=text]{
  padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; color:var(--ink);
}
.form-grid input[type=text]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Mode (ALL / ANY) toggle row. */
.data-mode{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 12px; background:#f8fafc; border-radius:8px;
  margin-bottom:14px;
}
.data-mode .form-label{
  font-size:12.5px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em;
}
.data-mode .radio{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--ink-2); cursor:pointer;
}
.data-mode .radio strong{ color:var(--ink); }

/* Rules list. */
.data-rules{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.data-rule{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px; background:#fafafa;
  border:1px solid var(--line); border-radius:8px;
}
.data-rule-main{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.data-rule select, .data-rule input[type=text], .data-rule input[type=number]{
  padding:6px 9px; font-size:13.5px;
  border:1px solid var(--line); border-radius:6px; background:#fff;
}
.data-rule select[multiple]{
  min-width:180px; padding:4px;
}
.data-rule-sep{ color:var(--ink-3); font-size:13px; }
.data-rule-hint{ color:var(--ink-3); font-size:13px; font-style:italic; }
.data-rule-remove{
  margin-left:auto; padding:4px 8px; font-size:14px;
  color:var(--ink-3);
}
.data-rule-remove:hover{ color:#dc2626; }
/* Per-campaign scope sub-row (event rules only). Indented to read
   as a refinement of the rule above, with a soft top border so it's
   visually grouped with its parent rule. */
.data-rule-scope{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  margin-top:2px; padding:8px 0 2px 4px;
  border-top:1px dashed var(--line);
}
.data-rule-scope-label{
  display:flex; flex-direction:column; gap:2px;
  min-width:120px; padding-top:4px;
}
.data-rule-scope-label > span{
  font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.02em;
}
.data-rule-scope-sum{
  font-size:11px; color:var(--ink-3); font-weight:500;
}
.data-rule-scope select[multiple]{
  flex:1; min-width:220px; max-width:380px;
}
.data-rule-scope-clear{
  align-self:flex-start; padding:4px 8px;
  font-size:12px; color:var(--ink-3);
}
.data-rule-scope-clear:hover{ color:var(--accent); }

/* Continuous toggle — bigger touch target, descriptive sublabel. */
.data-toggle{
  display:flex; align-items:flex-start; gap:10px; margin-top:14px;
  padding:12px 14px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px;
  cursor:pointer;
}
.data-toggle input[type=checkbox]{
  margin-top:3px; width:16px; height:16px; cursor:pointer;
}
.data-toggle span{ display:flex; flex-direction:column; gap:3px; }
.data-toggle strong{ font-size:13.5px; color:var(--ink); }
.data-toggle small{ color:var(--ink-3); font-size:12px; line-height:1.45; }

/* Preview panel — KPI cards + sample table. */
.data-preview-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px;
}
.data-preview-stat{
  padding:12px 14px; background:#f8fafc; border:1px solid var(--line); border-radius:8px;
  text-align:center;
}
.data-preview-stat .num{
  font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
}
.data-preview-stat .lbl{
  font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;
}
.data-sample td code{
  font-size:12px; color:var(--ink-2);
}
.data-sample h4{
  font-size:13px; font-weight:700; margin:14px 0 8px; color:var(--ink-2);
}

/* Status pill in segments table. */
.badge.ok{
  display:inline-block; padding:2px 8px; font-size:11.5px; font-weight:700;
  color:#166534; background:#dcfce7; border-radius:99px; letter-spacing:.04em; text-transform:uppercase;
}
.muted{ color:var(--ink-3); }

/* Preview-flow icon link in the slug column of the Flows list.
   Opens a new tab to smrt.resourcesify.com/f/<slug>?u=<sample-u> so
   the operator can eyeball the rendered flow with real DMP state
   without leaving the admin. Sits inline with the slug <code>,
   small, muted, brightens to the accent on hover. */
.flow-preview-link{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px; vertical-align:middle;
  width:20px; height:20px; border-radius:5px;
  color:var(--ink-3); text-decoration:none;
  transition:color .15s ease, background .15s ease;
}
.flow-preview-link:hover,
.flow-preview-link:focus-visible{
  color:var(--accent);
  background:var(--accent-soft);
  outline:none;
}
.flow-preview-link svg{ display:block; }

/* ════════════════════════════════════════════════════════════════
   DMP → Profile mapping editor (flow form section)
   ──────────────────────────────────────────────────────────────
   Phase 1 admin UI for building + testing DMP-to-profile value
   maps. Runtime is read-only — the rules persist on the flow doc
   but no live request consumes them yet.
   ════════════════════════════════════════════════════════════════ */
.dpm-buttons{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 2px; }
.dpm-rules-wrap{ display:flex; flex-direction:column; gap:14px; margin:14px 0; }
.dpm-empty{ padding:14px; border:1px dashed var(--line-2); border-radius:8px; }
.dpm-rule{
  border:1px solid var(--line-2); border-radius:10px;
  padding:14px 16px; background:#fafbfc;
}
.dpm-rule-header{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
}
.dpm-rule-grid{
  display:grid; grid-template-columns:1fr 1.5fr; gap:12px; flex:1;
}
.dpm-rule-grid .field{ margin:0; }
.dpm-rule-del{
  flex:0 0 auto; color:var(--ink-3); font-size:16px; line-height:1;
  padding:6px 8px;
}
.dpm-rule-del:hover{ color:#dc2626; }
.dpm-vmap{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-2); }
.dpm-vmap-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.dpm-vmap-empty{ font-style:italic; padding:6px 0; }
.dpm-vmap-row{
  display:grid; grid-template-columns:1fr auto 1fr auto;
  gap:8px; align-items:center; margin-bottom:6px;
}
.dpm-vmap-row input{
  width:100%; padding:6px 10px; font-size:13px;
  border:1px solid var(--line-2); border-radius:6px;
  font-family:'SF Mono', Menlo, Consolas, monospace;
}
.dpm-vmap-arrow{ color:var(--ink-3); font-weight:700; }
.dpm-vmap-del{ color:var(--ink-3); padding:4px 8px; }
.dpm-vmap-del:hover{ color:#dc2626; }

/* Sample-call tester */
.dpm-tester{
  margin-top:16px; padding:14px 16px;
  background:#f8fafc; border:1px solid var(--line-2); border-radius:10px;
}
.dpm-tester-row{
  display:flex; gap:8px; align-items:center; margin-top:8px;
}
.dpm-test-input{
  flex:1; padding:8px 12px; font-size:13px;
  border:1px solid var(--line-2); border-radius:6px;
  font-family:'SF Mono', Menlo, Consolas, monospace;
}
.dpm-test-result{ margin-top:12px; }
.dpm-test-result.is-loading{ opacity:.6; }
.dpm-test-result:empty{ display:none; }
.dpm-test-error{
  padding:10px 14px; background:#fef2f2; border:1px solid #fecaca;
  border-radius:8px; color:#991b1b; font-size:13px;
}
.dpm-test-error code{ background:#fff; padding:1px 4px; border-radius:3px; }
.dpm-test-ok{ font-size:13px; }
.dpm-test-mapped{
  display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 4px;
}
.dpm-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:99px;
  background:#dcfce7; color:#166534; font-size:12.5px;
}
.dpm-pill code{ background:rgba(255,255,255,.7); padding:1px 5px; border-radius:3px; }
.dpm-perrule-table{ margin-top:6px; }
.dpm-status-chip{
  display:inline-block; padding:1px 8px; border-radius:99px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:#e2e8f0; color:#475569;
}
.dpm-status-chip.dpm-status-mapped{ background:#dcfce7; color:#166534; }
.dpm-status-chip.dpm-status-no-valueMap-entry,
.dpm-status-chip.dpm-status-no-valueMap{ background:#fef3c7; color:#92400e; }
.dpm-status-chip.dpm-status-missing-in-dmp{ background:#e2e8f0; color:#64748b; }
.dpm-misses{
  margin-top:10px; padding:10px 14px;
  background:#fef3c7; border:1px solid #fde68a; border-radius:8px;
  color:#92400e; font-size:13px;
}
.dpm-misses ul{ margin:6px 0 0 18px; padding:0; }
.dpm-test-raw{ margin-top:10px; }
.dpm-test-raw summary{
  cursor:pointer; font-size:12.5px; color:var(--ink-2);
  padding:4px 0;
}
.dpm-test-raw pre{
  background:#0f172a; color:#e2e8f0; padding:10px;
  border-radius:6px; font-size:11.5px; line-height:1.5;
  overflow-x:auto; max-height:340px;
}

/* past_conversions multi-checkbox picker (proxy rule value editor) */
.pc-multi{
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:6px; min-width:240px; max-width:340px;
}
.pc-multi-search{
  width:100%; box-sizing:border-box; padding:5px 8px; margin-bottom:4px;
  border:1px solid var(--line); border-radius:6px; font-size:12.5px;
}
.pc-multi-count{ font-size:11px; color:var(--ink-2); padding:0 2px; }
.pc-multi-list{
  max-height:170px; overflow-y:auto; margin-top:4px;
  display:flex; flex-direction:column; gap:1px;
}
.pc-multi-item{
  display:flex; align-items:center; gap:7px; padding:3px 5px;
  font-size:12.5px; border-radius:5px; cursor:pointer;
}
.pc-multi-item:hover{ background:var(--line-2); }
.pc-multi-item input{ margin:0; flex:0 0 auto; }
.pc-multi-sub{ color:var(--ink-2); font-style:normal; font-size:11px; }