/* ── #BrandVerse · Upton Station heritage tokens ────────────────────────── */
/* Heritage railroad / Americana: cream canvas, oxblood + forest accents,
   slab-serif display, hairline double-rules, badge ornaments, letterpress
   weight. Warm, archival, hospitality-grade. */
:root {
  /* ── Espresso · Royal Orange · Cream palette (2026-05-13) ──────────────
     Primary: Espresso #2B1810, Royal Orange #F07900, Cream #FFFEF8
     Accent : Warm Gray #A89F94, Coral #FF6B4A
     Support: Honey #F2B544, Sage #5B9279 (used on chips/badges) */
  --color-bg: #FFFEF8;
  --color-bg-2: #FAF3E5;
  --color-surface: rgba(255, 254, 248, 0.82);
  --color-surface-solid: #ffffff;
  --color-surface-2: #EDE0CB;
  --color-divider: rgba(43, 24, 16, 0.10);
  --color-border: rgba(43, 24, 16, 0.18);
  --color-text: #2B1810;
  --color-text-muted: #6b5a4f;
  --color-text-faint: #A89F94;

  /* The token name stays `oxblood` for backward-compat with hundreds of
     existing rules, but the value is now Royal Orange. Every place the
     old theme used oxblood becomes the new primary action colour. */
  --color-oxblood: #F07900;
  --color-oxblood-hover: #ff8a1c;
  --color-oxblood-deep: #c96400;
  --color-forest: #5B9279;
  --color-mustard: #F2B544;
  --color-coral: #FF6B4A;
  --color-coral-hi: #ff8567;
  --color-coral-lo: #e0492a;
  --color-espresso: #2B1810;
  --color-espresso-soft: #3a241a;
  --color-espresso-deep: #1c0e08;

  --color-primary: var(--color-oxblood);
  --color-primary-hover: var(--color-oxblood-hover);
  --color-primary-light: rgba(240, 121, 0, 0.10);
  --color-on-primary: #FFFEF8;
  --color-chrome: linear-gradient(180deg, #2B1810 0%, #F07900 100%);

  --color-danger: #FF6B4A;
  --color-success: #5B9279;

  --glass-bg: rgba(255, 254, 248, 0.82);
  --glass-border: rgba(43, 24, 16, 0.08);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 40px rgba(43,24,16,0.08);
  --glass-blur: saturate(120%) blur(14px);

  /* Softer corners across the system — rounded but not balloon-pill. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43,24,16,0.06);
  --shadow-md: 0 8px 22px rgba(43,24,16,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-lg: 0 26px 60px rgba(43,24,16,0.14), 0 1px 0 rgba(255,255,255,0.7) inset;

  /* 3D button recipe — gradient + dual inner shadow + coloured drop. */
  --btn-3d-primary:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 -3px 0 rgba(0,0,0,0.18) inset,
      0 6px 14px rgba(240, 121, 0, 0.30),
      0 2px 4px rgba(43, 24, 16, 0.10);
  --btn-3d-primary-active:
      0 1px 0 rgba(255,255,255,0.40) inset,
      0 -1px 0 rgba(0,0,0,0.18) inset,
      0 2px 4px rgba(240, 121, 0, 0.20);
  --btn-3d-dark:
      0 1px 0 rgba(255,255,255,0.10) inset,
      0 -3px 0 rgba(0,0,0,0.35) inset,
      0 6px 14px rgba(43, 24, 16, 0.30),
      0 2px 4px rgba(43, 24, 16, 0.18);
  --btn-3d-ghost:
      0 1px 0 rgba(255,255,255,0.85) inset,
      0 -2px 0 rgba(43, 24, 16, 0.08) inset,
      0 4px 10px rgba(43, 24, 16, 0.08),
      0 1px 2px rgba(43, 24, 16, 0.05);
  --btn-3d-coral:
      0 1px 0 rgba(255,255,255,0.50) inset,
      0 -3px 0 rgba(0,0,0,0.18) inset,
      0 6px 14px rgba(255, 107, 74, 0.30),
      0 2px 4px rgba(43, 24, 16, 0.10);

  --transition: 220ms cubic-bezier(0.32, 0.72, 0, 1);
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Zilla Slab', 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-poster: 'Alfa Slab One', 'Zilla Slab', Georgia, serif;
  --font-serif:   'Crimson Pro', 'Zilla Slab', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tracking-tight: -0.015em;
  --tracking-display: -0.018em;
  --tracking-mono: 0.04em;
  --tracking-eyebrow: 0.28em;

  /* Subtle paper grain — an organic texture overlay. SVG noise rendered as a
     fixed-size data URL; tiles repeat for variation. */
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

[data-theme="dark"] {
  --color-bg: #1c0e08;
  --color-bg-2: #251510;
  --color-surface: rgba(37, 21, 16, 0.82);
  --color-surface-solid: #251510;
  --color-surface-2: #321b14;
  --color-divider: rgba(255, 254, 248, 0.08);
  --color-border: rgba(255, 254, 248, 0.14);
  --color-text: #FFFEF8;
  --color-text-muted: #d8c9b8;
  --color-text-faint: #A89F94;
  --color-oxblood: #ff8a1c;
  --color-oxblood-hover: #ffae4d;
  --color-oxblood-deep: #d96a00;
  --color-coral: #FF6B4A;
  --color-coral-hi: #ff8567;
  --color-coral-lo: #e0492a;
  --color-forest: #7ab094;
  --color-mustard: #F2B544;
  --color-espresso: #FFFEF8;
  --color-espresso-soft: #d8c9b8;
  --color-espresso-deep: #FFFEF8;
  --color-primary: var(--color-oxblood);
  --color-primary-hover: var(--color-oxblood-hover);
  --color-primary-light: rgba(255, 138, 28, 0.16);
  --color-on-primary: #1c0e08;
  --color-chrome: linear-gradient(180deg, #FFFEF8 0%, #ff8a1c 100%);
  --color-danger: #FF6B4A;
  --color-success: #7ab094;
  --glass-bg: rgba(37, 21, 16, 0.74);
  --glass-border: rgba(255, 254, 248, 0.08);
  --glass-shadow: 0 1px 0 rgba(255,254,248,0.04) inset, 0 24px 60px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 22px rgba(0,0,0,0.5), 0 1px 0 rgba(255,254,248,0.04) inset;
  --shadow-lg: 0 28px 60px rgba(0,0,0,0.6), 0 1px 0 rgba(255,254,248,0.05) inset;
  --btn-3d-primary:
      0 1px 0 rgba(255,255,255,0.20) inset,
      0 -3px 0 rgba(0,0,0,0.30) inset,
      0 6px 14px rgba(255, 138, 28, 0.30),
      0 2px 4px rgba(0, 0, 0, 0.40);
  --btn-3d-primary-active:
      0 1px 0 rgba(255,255,255,0.10) inset,
      0 -1px 0 rgba(0,0,0,0.30) inset,
      0 2px 4px rgba(255, 138, 28, 0.20);
  --btn-3d-dark:
      0 1px 0 rgba(255,255,255,0.10) inset,
      0 -3px 0 rgba(0,0,0,0.45) inset,
      0 6px 14px rgba(0, 0, 0, 0.40),
      0 2px 4px rgba(0, 0, 0, 0.30);
  --btn-3d-ghost:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 -2px 0 rgba(0, 0, 0, 0.25) inset,
      0 4px 10px rgba(0, 0, 0, 0.30),
      0 1px 2px rgba(0, 0, 0, 0.25);
  --btn-3d-coral:
      0 1px 0 rgba(255,255,255,0.20) inset,
      0 -3px 0 rgba(0,0,0,0.30) inset,
      0 6px 14px rgba(255, 107, 74, 0.30),
      0 2px 4px rgba(0, 0, 0, 0.40);
}

*, *::before, *::after { box-sizing: border-box; }

/* Force the HTML `hidden` attribute to win over later `display: flex`
   / `display: grid` rules that target the same element. Without this
   the empty/form/detail canvases all render at once. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-body); font-size: 1rem;
  background:
      radial-gradient(120% 80% at 100% 0%, #FFF8E6 0%, var(--color-bg) 55%, var(--color-bg-2) 100%);
  background-attachment: fixed;
  color: var(--color-text); line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] body {
  background:
      radial-gradient(120% 80% at 100% 0%, #2a160e 0%, var(--color-bg) 55%, var(--color-bg-2) 100%);
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; transition: all var(--transition); background: transparent; }
img { max-width: 100%; display: block; border-radius: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.app-layout {
  display: grid; grid-template-columns: 320px 1fr;
  height: 100dvh; max-height: 100dvh; overflow: hidden;
}
@media (max-width: 800px) { .app-layout { grid-template-columns: 1fr; } .lhs-panel { display: none; } }

.lhs-panel {
  background: var(--color-bg-2, var(--color-bg));
  border-right: 1px solid var(--color-border);
  display: grid; grid-template-rows: auto auto auto 1fr auto;
  gap: 18px; padding: 22px 18px; overflow: hidden;
  position: relative; z-index: 10;
}
.rhs-panel {
  min-width: 0; padding: 40px 48px;
  display: flex; flex-direction: column; min-height: 0; overflow: auto;
  background: var(--color-bg);
  position: relative;
}
/* Heritage paper grain. Sits below content via z-index. */
.rhs-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--paper-grain);
  background-size: 240px 240px;
  opacity: 0.6;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .rhs-panel::before {
  mix-blend-mode: screen;
  opacity: 0.25;
}
.rhs-panel > * { position: relative; z-index: 1; }

/* ── LHS ────────────────────────────────────────────────────────────────── */
.lhs-header { display: flex; align-items: center; justify-content: space-between; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: var(--tracking-tight);
}
/* Logo: copper 3D mark on transparent bg — already matches the heritage palette.
   No blend mode, no filter in light. Slight brightness lift in dark mode to keep
   the copper readable against the deep oxblood-black canvas. */
.brand-mark {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: transparent;
  position: relative;
}
.brand-mark img {
  width: 100%; height: 100%; object-fit: contain;
  object-position: top;
  display: block;
}
[data-theme="dark"] .brand-mark img {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(201, 90, 64, 0.18));
}
.brand-mark svg { display: block; }
.brand-wordmark {
  display: flex; align-items: baseline; gap: 0;
  line-height: 1;
  font-family: var(--font-display);
}
.brand-hash {
  color: var(--color-oxblood);
  font-weight: 700;
}
.brand-name { color: var(--color-text); font-weight: 600; letter-spacing: -0.01em; font-style: italic; }
.theme-toggle {
  font-size: 0.85rem; padding: 6px 10px; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
}
.theme-toggle:hover { background: var(--color-surface-2); color: var(--color-oxblood); border-color: var(--color-oxblood); }

.lhs-search input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-solid); outline: none;
  font-size: 0.86rem;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-style: italic;
}
.lhs-search input::placeholder { color: var(--color-text-faint); font-style: italic; }
.lhs-search input:focus { border-color: var(--color-oxblood); box-shadow: 0 0 0 3px var(--color-primary-light); }

.lhs-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.lhs-list::-webkit-scrollbar { width: 6px; }
.lhs-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 6px; }

.profile-card {
  background: linear-gradient(180deg, var(--color-surface-solid) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  position: relative;
}
.profile-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}
.profile-card.active {
  border-color: var(--color-oxblood);
  box-shadow:
      0 0 0 1px var(--color-oxblood),
      0 12px 28px rgba(240, 121, 0, 0.18),
      0 1px 0 rgba(255,255,255,0.8) inset;
}
.profile-card.active::before {
  content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px;
  width: 3px; background: var(--color-oxblood);
  border-radius: 3px;
}
.profile-card .pc-name { font-family: var(--font-display); font-weight: 600; }
.profile-card .pc-logo {
  width: 32px; height: 32px; border-radius: 6px; object-fit: contain;
  background: var(--color-surface-2); padding: 2px;
}
.profile-card .pc-fallback {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--color-surface-2); display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); font-weight: 700;
}
.profile-card .pc-name { font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
.profile-card .pc-meta { font-size: 0.72rem; color: var(--color-text-faint); }

.lhs-footer {
  font-size: 0.7rem; color: var(--color-text-faint);
  text-align: center;
  border-top: 1px solid var(--color-border); padding-top: 12px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.lhs-footer .dot { margin: 0 8px; color: var(--color-oxblood); }
.lhs-footer a:hover { color: var(--color-oxblood); }

.empty-msg { color: var(--color-text-faint); font-size: 0.85rem; text-align: center; padding: 24px 12px; font-style: italic; }

/* ── Buttons — rounded 3D pill recipe (gradient fill + dual inset shadow
   for the "lip" + a coloured drop-shadow that lifts off the page). ───── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.76rem;
  font-family: var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  color: var(--color-on-primary);
  background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,0.30), transparent 55%),
      linear-gradient(180deg, var(--color-oxblood-hover) 0%, var(--color-oxblood) 55%, var(--color-oxblood-deep) 100%);
  border-color: var(--color-oxblood-deep);
  box-shadow: var(--btn-3d-primary);
}
.btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--btn-3d-primary-active); }
.btn-primary:disabled { opacity: 0.45; cursor: wait; filter: saturate(0.7); }

.btn-ghost {
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-surface-solid) 0%, var(--color-bg-2) 100%);
  border-color: var(--color-border);
  box-shadow: var(--btn-3d-ghost);
}
.btn-ghost:hover {
  color: var(--color-oxblood); border-color: var(--color-oxblood);
  transform: translateY(-1px);
}

.btn-danger {
  color: var(--color-coral-lo);
  background: linear-gradient(180deg, var(--color-surface-solid) 0%, #fdebe6 100%);
  border-color: rgba(224, 73, 42, 0.45);
  box-shadow: var(--btn-3d-ghost);
}
.btn-danger:hover {
  color: var(--color-on-primary);
  background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,0.30), transparent 55%),
      linear-gradient(180deg, var(--color-coral-hi) 0%, var(--color-coral) 55%, var(--color-coral-lo) 100%);
  border-color: var(--color-coral-lo);
  box-shadow: var(--btn-3d-coral);
  transform: translateY(-1px);
}

.new-btn {
  width: 100%; justify-content: center; padding: 14px 18px;
  color: var(--color-on-primary);
  background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 50%),
      linear-gradient(180deg, var(--color-espresso-soft) 0%, var(--color-espresso-deep) 100%);
  border: 1px solid var(--color-espresso-deep);
  box-shadow: var(--btn-3d-dark);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700; font-size: 0.76rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.new-btn:hover { filter: brightness(1.10); transform: translateY(-1px); }
.new-btn:active { transform: translateY(1px); }

/* ── Canvas + empty + form ─────────────────────────────────────────────── */
.canvas { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.empty-canvas { align-items: center; justify-content: center; }
.empty-inner { max-width: 680px; text-align: center; }
.empty-inner svg { color: var(--color-primary); margin-bottom: 16px; }
.empty-inner p { color: var(--color-text-muted); margin: 14px auto 30px; line-height: 1.6; font-size: 1.05rem; max-width: 560px; font-family: var(--font-serif); }
/* The logo is already a complete heritage lockup — its own ornaments are the
   stamp. Let it stand free, no concentric ring around it. */
.hero-mark {
  display: inline-grid; place-items: center;
  width: 320px; max-width: 70vw; aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  background: transparent;
  position: relative;
}
.hero-mark img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
[data-theme="dark"] .hero-mark img {
  filter: brightness(1.18) drop-shadow(0 4px 24px rgba(201, 90, 64, 0.22));
}
/* Heritage eyebrow — ornament + small caps. */
.eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 0.72rem;
  font-weight: 600; color: var(--color-oxblood);
  font-family: var(--font-display);
  margin: 0 0 16px;
}
.eyebrow::before, .eyebrow::after {
  content: '✦';
  color: var(--color-oxblood);
  font-size: 0.7rem;
  letter-spacing: 0;
  opacity: 0.7;
}
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .eyebrow::before,
[data-theme="dark"] .eyebrow::after { color: var(--color-oxblood); }
.display-accent {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500;
  color: var(--color-oxblood);
}

.display {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700;
  letter-spacing: var(--tracking-display); line-height: 1.02;
  margin: 0 0 10px;
  text-transform: none;
  color: var(--color-text);
}
.muted { color: var(--color-text-muted); font-family: var(--font-serif); font-size: 1.02rem; }

.form-canvas { align-items: center; justify-content: center; }
.form-card {
  width: 100%; max-width: 600px; padding: 28px 30px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.form-card h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; }
.form-card .muted { font-size: 0.92rem; margin-bottom: 18px; }
.form-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.form-row input {
  flex: 1; min-width: 240px; padding: 10px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface-solid); outline: none;
}
.form-row input:focus { border-color: var(--color-primary); }
.form-status { font-size: 0.85rem; color: var(--color-text-muted); min-height: 18px; }
.form-status.error { color: var(--color-danger); }
.form-status.running::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--color-primary); margin-left: 8px;
  animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* Glass card primitive — Apple-style: heavy saturation, subtle border, inset top highlight */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* ── Detail header + tabs ───────────────────────────────────────────────── */
.detail-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.detail-id-row { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
#detailLogo {
  max-height: 56px; max-width: 180px;
  background: white; padding: 8px 14px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); object-fit: contain;
}
.detail-titles { min-width: 0; }
.detail-titles .display { font-size: 1.9rem; }
.detail-titles .muted { font-size: 0.95rem; line-height: 1.4; max-width: 760px; }
.link-mini { font-size: 0.78rem; color: var(--color-text-faint); word-break: break-all; }
.link-mini:hover { color: var(--color-primary); }
.detail-actions { display: flex; gap: 6px; align-items: flex-start; }

/* Heritage tabs: hairline double-rule above + below, slab caps, oxblood active. */
.tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  width: 100%; margin-bottom: 28px;
  padding: 6px 0;
}
.tabs::before {
  content: ''; position: absolute; left: 0; right: 0; top: -4px;
  border-top: 1px solid var(--color-border); opacity: 0.5;
}
.tab {
  padding: 10px 18px; border-radius: 0;
  color: var(--color-text-muted); font-weight: 600; font-size: 0.72rem;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  transition: color var(--transition);
}
.tab + .tab { border-left: 1px solid var(--color-divider); }
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-oxblood); }
.tab.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--color-oxblood);
}

.pane { animation: fade-in 0.25s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Bento (Brand DNA tab) ──────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.bento-left, .bento-right { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
/* Card flagged with .card-fill grows to fill the column's remaining height
   (used by the All Images card to match the LHS content height). */
.bento-right .card-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bento-right .card-fill .image-strip { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr; }
  /* Single-column: drop the JS-pinned height and let images scroll within a fixed cap. */
  #brandRight { height: auto !important; }
  .bento-right .card-fill .image-strip { max-height: 70vh; }
}

.card {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.card::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 6px;
  border-top: 1px solid var(--color-border); opacity: 0.4;
}
.card:hover { border-color: var(--color-oxblood); box-shadow: var(--shadow-md); }
.card h3 {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-oxblood);
  margin: 0 0 16px; font-family: var(--font-display);
  display: flex; align-items: center; gap: 10px;
}
.card h3::after {
  content: ''; flex: 1; height: 1px; background: var(--color-divider);
}
.card p { margin: 0; font-size: 0.94rem; line-height: 1.55; }
.card .field-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-faint); margin: 12px 0 4px;
}
.card .field-value { font-size: 0.92rem; line-height: 1.5; }

.card .editable { background: var(--color-surface-2); border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm); padding: 6px 10px; font-size: 0.92rem; outline: none;
  width: 100%; min-height: 36px; resize: vertical;
}
.card .editable:focus { border-color: var(--color-primary); border-style: solid; background: var(--color-surface-solid); }

.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  background: var(--color-primary-light); color: var(--color-primary);
  padding: 4px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
}
.pill.neutral { background: var(--color-surface-2); color: var(--color-text); }

/* Color swatches */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.color-chip {
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.color-chip .swatch { height: 60px; }
.color-chip .meta { padding: 7px 9px; font-size: 0.74rem; }
.color-chip .meta .hex { color: var(--color-text-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; }

/* Fonts */
.font-card { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.font-card .name { font-size: 1.15rem; }
.font-card .meta { color: var(--color-text-faint); font-size: 0.74rem; }

/* All Images card — distinguishable logo block on top, then editable gallery. */
.logo-block { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--color-divider); }
.logo-block-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-primary); font-weight: 700; }
.logo-tile { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-surface-2));
  border: 1px solid var(--color-divider); overflow: hidden; }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-tile .logo-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; }
.logo-empty { color: var(--color-text-faint); font-style: italic; font-size: 0.85rem; text-align: center; }

/* Image strip — gallery grid, scrollable, height-pinned by JS to LHS column. */
.image-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: min(70vh, 720px); overflow-y: auto; padding-right: 4px; align-content: start; }
.img-tile { position: relative; aspect-ratio: 1/1; }
.img-tile img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-sm); background: var(--color-surface-2);
  border: 1px solid var(--color-divider); }

.tile-action { position: absolute; width: 22px; height: 22px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: white; border: 0; padding: 0;
  font-size: 0.85rem; line-height: 1; display: grid; place-items: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; }
.img-tile:hover .tile-action, .logo-tile:hover .tile-action { opacity: 1; }
.tile-action:hover { background: rgba(0, 0, 0, 0.85); }
.tile-del { top: 4px; right: 4px; }
.tile-del:hover { background: var(--color-danger); }
.tile-star { top: 4px; left: 4px; }
.tile-star:hover { background: var(--color-primary); }
.tile-replace { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 0.95rem; opacity: 0.85; }
.tile-logo-upload { top: 8px; right: 44px; width: 28px; height: 28px; font-size: 0.95rem; opacity: 0.85; }

.add-tile { aspect-ratio: 1/1; border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm); background: transparent; color: var(--color-text-faint);
  font-size: 1.5rem; font-weight: 300; cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.15s, color 0.15s; }
.add-tile:hover { border-color: var(--color-primary); color: var(--color-primary); border-style: solid; }

/* ── Products tab ───────────────────────────────────────────────────────── */
#productsGrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.category-card {
  background: var(--color-surface-solid); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.cat-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.cat-head .count { color: var(--color-text-faint); font-size: 0.8rem; }
.cat-desc { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 14px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.product-card {
  background: var(--color-surface-2); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;
}
.product-card .thumb { aspect-ratio: 16/10; background: var(--color-surface-solid); position: relative; overflow: hidden; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .thumb.thumb-empty::after {
  content: "No image"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--color-text-faint); font-size: 0.78rem; letter-spacing: 0.02em;
}
/* Brand-logo fallback in the thumbnail slot — used when a product
   has no usable image (no `prod.images` candidates, no working
   og:image). Display CONTAINED with breathing room and a neutral
   ground, not cover-cropped, so the logo stays readable. */
.product-card .thumb img.thumb-logo-fallback {
  object-fit: contain;
  padding: 18% 22%;
  background: var(--color-surface-solid);
}
.product-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.product-card .name { font-weight: 600; font-size: 0.94rem; }
.product-card .price { color: var(--color-primary); font-weight: 600; font-size: 0.82rem; }
.product-card .desc { color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .feat { color: var(--color-text-faint); font-size: 0.74rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .link { color: var(--color-primary); font-size: 0.74rem; word-break: break-all; }
.product-card .link:hover { text-decoration: underline; }

/* Flash highlight applied to a freshly-added product card so the user
   can spot it after the page has scrolled to it. */
.product-card.just-added-flash {
  animation: just-added-glow 2.4s ease-out;
  position: relative;
  z-index: 2;
}
@keyframes just-added-glow {
  0%   { box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 8px var(--color-primary-light); transform: scale(1.01); }
  20%  { box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 14px var(--color-primary-light); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; transform: scale(1); }
}

/* ── Missing product / category bar (sticky on Products tab) ──────────── */
.missing-product-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: -4px 0 12px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(140%);
}
.missing-product-prompt {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex: 1 1 280px;
}
.missing-product-prompt strong {
  display: inline;
  margin-right: 4px;
  color: var(--color-text);
  font-weight: 600;
}
#missingProductBtn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ── Ad target selection (Products & Categories tab) ────────────────────── */
.ad-instruction {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--color-primary-light); color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: var(--radius-lg);
  padding: 14px 18px; margin-bottom: 18px;
}
.ad-instruction-icon { font-size: 1.4rem; line-height: 1.2; }
.ad-instruction-body strong { display: block; font-size: 0.95rem; margin-bottom: 4px; font-weight: 700; }
.ad-instruction-body p { margin: 0; color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.5; }

/* Selectable affordances */
.cat-head.selectable { cursor: pointer; padding: 6px 10px; margin: -6px -10px 6px;
  border-radius: var(--radius-sm); transition: background 0.15s; }
.cat-head.selectable:hover { background: var(--color-surface-2); }
.cat-head .select-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--color-border); flex: 0 0 auto;
}
.product-card.selectable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.product-card.selectable:hover { border-color: var(--color-primary); }

/* Selected state */
.category-card.selected {
  border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light);
}
.category-card.selected .cat-head .select-dot {
  background: var(--color-primary); border-color: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-surface-solid);
}
.product-card.selected {
  border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light);
  position: relative;
}
.product-card.selected::after {
  content: "✓"; position: absolute; top: 8px; right: 8px;
  background: var(--color-primary); color: white;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Sticky CTA bar */
.ad-cta-bar {
  position: sticky; bottom: 0; margin-top: 18px; padding: 14px 18px;
  background: var(--color-surface-solid); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  opacity: 0.6; transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ad-cta-bar.active { opacity: 1; border-color: var(--color-primary); }
.ad-cta-bar .cta-label { font-size: 0.88rem; color: var(--color-text); font-weight: 500; }
.ad-cta-bar button[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Persona-count hint — sits between the selection label and the
   Generate button. Soft chip styling so it reads as an informational
   nudge, not a control. `.is-empty` (zero personas selected) bumps
   the colour to amber so it's visible without being alarming. */
.ad-cta-bar .cta-persona-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted, #6b7280);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-2, #f1f5f9);
  border: 1px solid var(--color-border, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}
.ad-cta-bar .cta-persona-hint.is-empty {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}

/* Plan-card schedule expander — compact details/summary, indented
   block of one-line schedule hints. Matches the rest of the plan
   card's typography so it doesn't introduce visual noise. */
.organic-plan-card-schedule {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
}
.organic-plan-card-schedule summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--color-primary, #2b6cb0);
  user-select: none;
  padding: 2px 0;
}
.organic-plan-card-schedule summary:hover { text-decoration: underline; }
.organic-plan-card-schedule[open] summary { margin-bottom: 6px; }
.organic-plan-card-schedule-line {
  padding: 3px 10px;
  line-height: 1.45;
  color: var(--color-text);
}

/* ── Misc ───────────────────────────────────────────────────────────────── */
.empty { color: var(--color-text-faint); font-style: italic; font-size: 0.85rem; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 0.88rem; font-weight: 500; z-index: 100;
  box-shadow: var(--shadow-lg); animation: toast-in 0.25s ease;
}
.toast.error { background: var(--color-danger); color: white; }
.toast.success { background: var(--color-success); color: white; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Campaign Ideas tab ────────────────────────────────────────────────── */
.campaign-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.campaign-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.campaign-subtab:hover { color: var(--color-text); background: var(--color-surface-solid); }
.campaign-subtab.active {
  background: var(--color-primary);
  color: white;
}
.campaign-subtab-goal   { font-weight: 600; }
.campaign-subtab-target { opacity: 0.8; font-weight: 400; }
.campaign-subtab-sep    { opacity: 0.5; }


.campaign-empty {
  background: var(--color-surface-solid);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  color: var(--color-text-muted);
}
.campaign-empty-title {
  color: var(--color-text);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
}
.campaign-empty p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.campaign-empty strong { color: var(--color-text); }

.campaign-context {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.campaign-context-rows { display: flex; flex-direction: column; gap: 4px; }
.campaign-context-row { display: flex; gap: 10px; align-items: baseline; font-size: 0.88rem; }
.campaign-context-label {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 700; min-width: 40px;
}
.campaign-context-value { color: var(--color-text); font-weight: 500; }
.campaign-context-saved .campaign-context-value {
  color: var(--color-text-muted); font-weight: 400; font-size: 0.78rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.campaign-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 16px; color: var(--color-text-muted);
}
.campaign-loading-text { font-size: 0.9rem; max-width: 420px; text-align: center; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--color-surface-2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.campaign-error {
  background: var(--color-surface-2);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 18px;
}
.campaign-error strong { color: var(--color-danger); display: block; margin-bottom: 6px; }
.campaign-error p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 0.85rem; }

.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.theme-card {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.theme-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.theme-card.selectable { cursor: pointer; position: relative; }
.theme-card.selectable:active { transform: scale(0.998); }
.theme-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light), var(--shadow-md);
}
.theme-card.selected::after {
  content: "✓";
  position: absolute; top: 12px; right: 12px;
  background: var(--color-primary); color: white;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.theme-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--color-divider); padding-bottom: 10px;
}
.theme-index {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem; color: var(--color-text-faint); font-weight: 600;
}
.theme-name {
  margin: 0; font-family: var(--font-display); font-size: 1.05rem;
  flex: 1; min-width: 0;
}
.theme-ad-type {
  background: var(--color-primary); color: white;
  font-size: 0.68rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.theme-narrative {
  margin: 0; font-size: 0.9rem; line-height: 1.55;
  color: var(--color-text);
}
.theme-hook {
  margin: 0; padding: 10px 14px;
  background: var(--color-primary-light); color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-style: italic; line-height: 1.5;
}

.theme-section { display: flex; flex-direction: column; gap: 4px; }
.theme-inline { display: flex; gap: 6px; align-items: baseline; font-size: 0.85rem; }
.theme-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-faint); font-weight: 700;
}
.theme-text { font-size: 0.86rem; line-height: 1.5; color: var(--color-text); }
.theme-text-strong { font-weight: 600; }

.theme-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.theme-pill {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  font-size: 0.74rem;
  padding: 3px 9px;
  border-radius: 999px;
}

.theme-badges {
  display: flex; flex-wrap: wrap; gap: 5px;
  border-top: 1px dashed var(--color-divider);
  padding-top: 10px;
}
.theme-badge {
  font-size: 0.7rem; padding: 3px 9px; border-radius: 4px;
  font-weight: 500;
}
.theme-badge-platform { background: var(--color-primary-light); color: var(--color-primary); }
.theme-badge-format   { background: var(--color-surface-2); color: var(--color-text-muted); }
.theme-badge-cta      { background: var(--color-text); color: var(--color-bg); font-weight: 600; }

.theme-diff {
  font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5;
  border-top: 1px solid var(--color-divider); padding-top: 8px;
}
.theme-diff strong { color: var(--color-text); font-weight: 600; }

/* Sticky CTA bar at the bottom of the Campaign Ideas pane —
   appears greyed-out until a theme is selected. */
.ad-copy-cta-bar {
  position: sticky; bottom: 0;
  margin-top: 18px; padding: 14px 18px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}
.ad-copy-cta-bar.active { opacity: 1; border-color: var(--color-primary); }
.ad-copy-cta-bar .cta-label { font-size: 0.88rem; color: var(--color-text); }
.ad-copy-cta-bar .cta-label-prefix { color: var(--color-text-muted); margin-right: 4px; }
.ad-copy-cta-bar button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Ad Copies tab ─────────────────────────────────────────────────────── */
.adcopy-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 56px 16px 64px; color: var(--color-text-muted);
}
.adcopy-loading-text { max-width: 480px; font-size: 0.9rem; text-align: center; line-height: 1.5; }

/* Heartbeat dot: a solid oxblood core inside a softly-expanding ring.
   The ring is what carries the "heart beat" feel — it pulses outward
   roughly once a second so the user sees movement even when nothing
   else on screen changes. */
.adcopy-heart {
  position: relative; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.adcopy-heart-core {
  position: absolute; width: 18px; height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: adcopy-heart-beat 1.25s ease-in-out infinite;
}
.adcopy-heart-ring {
  position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--color-primary);
  border-radius: 50%; opacity: 0.6;
  animation: adcopy-heart-ring 1.25s ease-out infinite;
}
@keyframes adcopy-heart-beat {
  0%, 100% { transform: scale(1);    }
  20%      { transform: scale(1.35); }
  40%      { transform: scale(1);    }
  60%      { transform: scale(1.15); }
}
@keyframes adcopy-heart-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0;   }
}

.adcopy-loading-title {
  font-size: 1rem; color: var(--color-text); text-align: center;
  max-width: 540px; line-height: 1.5;
}
.adcopy-loading-title strong { color: var(--color-text); font-weight: 600; }

.adcopy-loading-timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  padding: 2px 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface-solid);
}

.adcopy-loading-steps {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 420px;
}
.adcopy-step {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9rem; padding: 6px 10px;
  border-radius: var(--radius-md);
  transition: background 200ms ease, opacity 200ms ease;
}
.adcopy-step-mark {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  flex-shrink: 0;
}
.adcopy-step.pending .adcopy-step-mark {
  border: 1.5px solid var(--color-border);
  background: transparent;
}
.adcopy-step.pending .adcopy-step-label {
  color: var(--color-text-faint);
}
.adcopy-step.active {
  background: var(--color-primary-light);
}
.adcopy-step.active .adcopy-step-mark {
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  animation: adcopy-step-pulse 1.4s ease-in-out infinite;
}
.adcopy-step.active .adcopy-step-label {
  color: var(--color-text); font-weight: 600;
}
.adcopy-step.done .adcopy-step-mark {
  background: var(--color-success);
  border: 1.5px solid var(--color-success);
  color: var(--color-on-primary);
}
.adcopy-step.done .adcopy-step-mark::after { content: "✓"; }
.adcopy-step.done .adcopy-step-label {
  color: var(--color-text-muted);
}
@keyframes adcopy-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0   var(--color-primary-light); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

.adcopy-loading-reassure {
  font-size: 0.86rem; line-height: 1.5;
  color: var(--color-text); text-align: center;
  max-width: 540px; min-height: 1.5em;
  padding: 0 12px;
}

.adcopy-loading-tip {
  font-size: 0.8rem; line-height: 1.5;
  color: var(--color-text-muted); text-align: center;
  max-width: 540px;
  padding: 10px 14px 0;
  border-top: 1px solid var(--color-divider);
  margin-top: 4px;
}

.adcopy-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 14px 18px; margin: 14px 0;
}
.adcopy-header-eyebrow {
  font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.adcopy-header-eyebrow strong { color: var(--color-text); font-weight: 600; font-size: 0.9rem; }
.adcopy-header-summary { font-size: 0.86rem; line-height: 1.5; color: var(--color-text); max-width: 70ch; }
.adcopy-header-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
  margin-left: auto;
}
.adcopy-saved-pill {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem; color: var(--color-text-faint);
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-surface-2);
}

/* Product images strip — sits under the theme header so the user
   can see exactly which product photos belong to the active theme.
   Horizontal-scrolling row of square thumbnails with the product
   name as a caption. Only target-relevant images are rendered;
   nothing else from the profile is shown here. */
.adcopy-product-images {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 12px 14px; margin: 0 0 12px;
}
.adcopy-product-images-label {
  font-size: 0.75rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px;
}
/* + tile that opens the picker — first slot in the strip, same
   shape as a thumbnail so the gallery reads as a single row. */
.adcopy-product-image-add-tile {
  flex: 0 0 auto;
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 300; line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-divider);
  border-radius: 8px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.adcopy-product-image-add-tile:hover,
.adcopy-product-image-add-tile:focus {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  background: var(--color-surface-solid);
  outline: none;
}
.adcopy-product-images-strip {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.adcopy-product-image {
  flex: 0 0 auto;
  width: 120px;
  margin: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.adcopy-product-image img {
  width: 120px; height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface-2);
}
/* Logo slot — first tile in every strip, locked-on. Logos are
   typically wide-aspect lockups, so we 'contain' rather than 'cover'
   to avoid cropping the wordmark, and sit them on a soft surface so
   transparent PNGs read on light + dark themes alike. The accent
   ring makes the locked state distinguishable from a regular
   checked tile at a glance. */
.adcopy-product-image-logo img {
  object-fit: contain;
  padding: 12px;
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-accent, #1aa3a3) 35%, var(--color-divider));
}
.adcopy-product-image-logo .adcopy-product-image-caption {
  font-weight: 600;
  color: color-mix(in srgb, var(--color-accent, #1aa3a3) 75%, var(--color-text));
}
/* Help line under the panel label — explains the checkbox / × UX
   so the affordance is discoverable on first encounter. */
.adcopy-product-images-help {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 10px;
  max-width: 80ch;
}
/* Selection checkbox — top-left corner, ALWAYS visible (unlike the
   × which only shows on hover). Acts as the primary creative-gate
   toggle: checked images flow into ad-copy generation, unchecked
   are excluded. */
.adcopy-product-image-select {
  position: absolute;
  top: 4px; left: 4px;
  width: 22px; height: 22px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; font-weight: 700;
  color: white;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  z-index: 1;
}
.adcopy-product-image-select.checked {
  background: var(--color-accent, #1aa3a3);
  border-color: var(--color-accent, #1aa3a3);
}
.adcopy-product-image-select:hover { transform: scale(1.05); }
.adcopy-product-image-select:focus { outline: 2px solid var(--color-accent, #1aa3a3); outline-offset: 2px; }
/* Locked checkbox on the brand-logo tile — visually identical to the
   regular checked state but reads as non-interactive. The disabled
   attribute on the button drops the hover scale + cursor; we layer
   a subtle ring so it's clearly distinguishable from a normal
   checked tile. */
.adcopy-product-image-select.locked {
  cursor: not-allowed;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #1aa3a3) 25%, transparent);
}
.adcopy-product-image-select.locked:hover { transform: none; }
/* Unselected thumbnails dim down so the user can see at a glance
   which images are excluded from creative generation. The × and
   checkbox stay full-opacity so they remain operable. */
.adcopy-product-image.unselected img {
  opacity: 0.35;
  filter: grayscale(0.7);
  transition: opacity 0.15s, filter 0.15s;
}
.adcopy-product-image.unselected .adcopy-product-image-caption {
  opacity: 0.5;
  text-decoration: line-through;
}
/* × overlay anchored to the top-right corner of the thumbnail.
   Hidden until the figure is hovered or focused, so the gallery
   stays visually clean but is editable on demand. Always visible
   on touch via :focus-within fallback below. */
.adcopy-product-image-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.adcopy-product-image:hover .adcopy-product-image-remove,
.adcopy-product-image:focus-within .adcopy-product-image-remove,
.adcopy-product-image-remove:focus {
  opacity: 1;
}
.adcopy-product-image-remove:hover {
  background: rgba(176, 32, 32, 0.9);
}
.adcopy-product-image-caption {
  font-size: 0.7rem; color: var(--color-text-muted);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Inline image picker — appears under the strip when the + tile
   is clicked. Two paths combined:
   1. URL input row at the top ("bring your own image")
   2. Multi-selectable grid of every brand image we know about. */
.adcopy-image-picker {
  margin-top: 14px;
  padding: 14px;
  border-top: 1px dashed var(--color-divider);
  background: var(--color-surface-2);
  border-radius: 8px;
}
.adcopy-image-picker-top {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.adcopy-image-picker-url {
  flex: 1 1 280px; min-width: 220px;
  padding: 7px 10px;
  font-size: 0.85rem;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background: var(--color-surface-solid);
  color: var(--color-text);
}
.adcopy-image-picker-url:focus {
  outline: none;
  border-color: var(--color-text-muted);
}
.adcopy-image-picker-prod-select {
  padding: 7px 10px;
  font-size: 0.82rem;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background: var(--color-surface-solid);
  color: var(--color-text);
  max-width: 240px;
}
.adcopy-image-picker-section-label {
  font-size: 0.72rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px;
}
/* Hidden file input — triggered by the "+" upload tile in the
   library grid (no visible button). Multiple selection enabled. */
.adcopy-image-picker-file-input { display: none; }
/* "+" upload tile — first cell of the library grid. Same square
   silhouette as the library tiles around it so it reads as part of
   the same row, but with a dashed border + plus glyph that signals
   "add" the same way the strip's add tile does. */
.adcopy-image-picker-upload-tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  font-size: 30px; font-weight: 300; line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-divider);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.adcopy-image-picker-upload-tile:hover,
.adcopy-image-picker-upload-tile:focus {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  background: var(--color-surface-solid);
  outline: none;
}
/* Uploaded-thumbs strip — appears under the upload button after
   files come back from the backend. Tiles look like the library
   tiles in selected state (accent border + ✓) so the user knows
   they're already counted in the "Add N" total. */
.adcopy-image-picker-uploaded {
  margin-bottom: 14px;
}
.adcopy-image-picker-uploaded:empty { margin-bottom: 0; }
.adcopy-image-picker-uploaded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.adcopy-image-picker-uploaded-tile {
  position: relative;
  margin: 0;
  border: 2px solid var(--color-accent, #1aa3a3);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-solid);
  display: flex; flex-direction: column;
}
.adcopy-image-picker-uploaded-tile img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-surface-2);
  display: block;
}
.adcopy-image-picker-uploaded-name {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  padding: 4px 6px 5px;
  text-align: left;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.adcopy-image-picker-uploaded-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.adcopy-image-picker-uploaded-tile:hover .adcopy-image-picker-uploaded-remove,
.adcopy-image-picker-uploaded-remove:focus {
  opacity: 1;
}
.adcopy-image-picker-uploaded-remove:hover {
  background: rgba(176, 32, 32, 0.9);
}
.adcopy-image-picker-uploading {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 8px 0;
  font-style: italic;
}
.adcopy-image-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  max-height: 340px; overflow-y: auto;
  padding: 4px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}
.adcopy-image-picker-empty {
  padding: 18px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
  background: var(--color-surface-solid);
  border: 1px dashed var(--color-divider);
  border-radius: 6px;
}
/* Each library tile is click-to-toggle. Selected state is a thick
   accent border + check overlay top-right. */
.adcopy-image-picker-tile {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.08s;
}
.adcopy-image-picker-tile:hover { transform: translateY(-1px); }
.adcopy-image-picker-tile img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-surface-2);
  display: block;
}
.adcopy-image-picker-tile-source {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  padding: 4px 6px 5px;
  text-align: left;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  background: var(--color-surface-solid);
}
.adcopy-image-picker-tile-check {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: white;
  background: var(--color-accent, #1aa3a3);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.12s;
}
.adcopy-image-picker-tile.selected {
  border-color: var(--color-accent, #1aa3a3);
}
.adcopy-image-picker-tile.selected .adcopy-image-picker-tile-check {
  opacity: 1;
}
.adcopy-image-picker-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}

/* "Why this route" promoted to the top of the route view. Same
   surface treatment as the theme header so the two strips read as
   a coherent header band. */
.adcopy-rationale-top {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent, var(--color-text));
  border-radius: var(--radius-lg);
  padding: 12px 16px; margin: 0 0 14px;
}
.adcopy-rationale-top-label {
  font-size: 0.72rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.adcopy-rationale-top-text {
  font-size: 0.88rem; line-height: 1.55;
  color: var(--color-text);
  max-width: 90ch;
}

.adcopy-route-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--color-surface-2);
  border-radius: 10px;
  width: fit-content;
}
.adcopy-route-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 500; color: var(--color-text-muted);
  background: transparent; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.adcopy-route-tab:hover { color: var(--color-text); background: var(--color-surface-solid); }
.adcopy-route-tab.active {
  background: var(--color-surface-solid); color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.adcopy-route-platform { font-weight: 700; }
.adcopy-route-sep { opacity: 0.4; }
.adcopy-route-placement, .adcopy-route-type { opacity: 0.85; }

/* ── Platform / ad-type icons ───────────────────────────────────────── */
/* Inline SVG marks for Facebook / Instagram / LinkedIn / "Both" / Meta.
   Brand colours are applied via the wrapper so the SVG itself can be
   monochrome (single white path inside a coloured square). The icons
   are 16×16 by default; size is overridable at the call site. */
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 0;          /* prevents extra vertical space around the SVG */
}
.platform-icon svg { display: block; }
.platform-icon-fb { background: #1877F2; }
.platform-icon-ig {
  /* Instagram's official gradient: yellow → pink → purple. */
  background: radial-gradient(circle at 30% 105%, #fdf497 0%, #fdf497 5%,
              #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.platform-icon-li { background: #0A66C2; }
.platform-icon-generic {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.platform-icon-group {
  display: inline-flex; align-items: center; gap: 3px;
  flex-shrink: 0;
}
.platform-icon-group .platform-icon { width: 16px; height: 16px; }

/* Ad-type glyph sits inline with text; takes its colour from the
   current text colour so it adapts to active / inactive tab state. */
.adtype-icon {
  display: inline-flex; align-items: center;
  color: var(--color-text-muted);
  line-height: 0;
  flex-shrink: 0;
}
.adcopy-route-tab.active .adtype-icon { color: var(--color-text); }

/* ── Funnel-stage badge (B2B) ───────────────────────────────────────── */
/* TOFU / MOFU / BOFU colour-coded so the campaign's buying-journey
   spread is visible without reading copy. */
.funnel-stage-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  flex-shrink: 0;
  line-height: 1.4;
}
.funnel-tofu { background: rgba(244, 196, 48, 0.16); color: #8a6800;  border-color: rgba(244, 196, 48, 0.35); }
.funnel-mofu { background: rgba(232, 121, 56, 0.16); color: #8a3a00;  border-color: rgba(232, 121, 56, 0.35); }
.funnel-bofu { background: rgba(52, 168, 83, 0.16);  color: #1f6a36;  border-color: rgba(52, 168, 83, 0.35); }

/* ── B2B context chips (above the rationale prose) ──────────────────── */
.b2b-context-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 4px;
}
.b2b-context-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  white-space: nowrap;
}
.b2b-chip-role    { font-weight: 600; color: var(--color-text); }
.b2b-chip-stage   { text-transform: capitalize; }
.b2b-chip-segment { font-style: italic; }
.b2b-chip-asset   { background: rgba(0, 0, 0, 0.04); }

/* ── Campaign-plan overview (bird's-eye strip) ──────────────────────── */
/* Sits at the very top of the ad-copy view: shows every route's
   platform icon + ad-type glyph + funnel-stage badge so the user
   reads the SHAPE of the campaign before opening any single route. */
/* ── Stage legend (click-to-expand popover) ─────────────────────────── */
/* Native <details> + <summary> = accessible toggle with no JS state.
   Closed state shows just an "ⓘ Stage colours" affordance; open
   reveals the 3-tier mapping table with example goals per tier.
   Mounted both on the Campaign Ideas page (above the themes grid)
   and the Ad Copies page (next to the Campaign Plan label). */
.stage-legend {
  display: inline-block;
}
.stage-legend-summary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #0A66C2;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  user-select: none;
  list-style: none;
  background: rgba(10, 102, 194, 0.08);
  border: 1px solid rgba(10, 102, 194, 0.35);
  box-shadow: 0 1px 2px rgba(10, 102, 194, 0.12);
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.15s;
}
.stage-legend-summary::-webkit-details-marker { display: none; }
.stage-legend-summary:hover {
  background: rgba(10, 102, 194, 0.14);
  border-color: #0A66C2;
  color: #0A66C2;
  box-shadow: 0 2px 6px rgba(10, 102, 194, 0.22);
  transform: translateY(-1px);
}
.stage-legend[open] .stage-legend-summary {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #fff;
  box-shadow: 0 2px 6px rgba(10, 102, 194, 0.28);
}
.stage-legend-icon {
  font-size: 0.9rem;
  line-height: 1;
}

/* Content panel sits below the summary in normal flow. On wider
   layouts it stays full-width so the 3-tile grid breathes; on
   narrow layouts the tiles stack. */
.stage-legend-content {
  position: relative;
  margin-top: 10px;
  padding: 16px 18px;
  background: #f4f8fd; /* very light blue tint to set apart from page */
  border: 2px solid #0A66C2; /* contrasting theme-blue outline */
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(10, 102, 194, 0.18),
              0 2px 6px rgba(10, 30, 60, 0.12);
  /* `<details>` shows/hides this via native CSS; no JS needed. */
}
/* Accent header bar — short coloured line along the top edge that
   reinforces this is a related-but-distinct surface from the page
   behind it. */
.stage-legend-content::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: linear-gradient(90deg, #0A66C2 0%, #34a8e8 100%);
  border-top-left-radius: var(--radius-md, 8px);
  border-top-right-radius: var(--radius-md, 8px);
}
.stage-legend-close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #0A66C2;
  border: 2px solid #0A66C2;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(10, 102, 194, 0.32);
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.15s;
  z-index: 2;
}
.stage-legend-close:hover {
  background: #084d92;
  border-color: #084d92;
  color: #fff;
  box-shadow: 0 4px 10px rgba(10, 102, 194, 0.42);
  transform: translateY(-1px);
}
.stage-legend-close:focus-visible {
  outline: 2px solid #0A66C2;
  outline-offset: 2px;
}
.stage-legend-intro {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 12px;
}

/* Audience-type strip — 2-line explainer of who the brand sells to,
   sits at the top of the legend. Background tint shifts subtly per
   business model so a glance reveals the audience type. */
.stage-legend-audience {
  padding: 10px 12px;
  padding-right: 110px; /* leave room for the absolute-positioned close button */
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-divider);
  background: var(--color-surface-solid, #fff);
  margin-bottom: 12px;
}
.stage-legend-audience-headline {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.stage-legend-audience-summary {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
/* Rationale line — sits below the summary, set apart visually so
   it reads as the "so what" beneath the factual description. */
.stage-legend-audience-why {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 0.74rem;
  line-height: 1.5;
  font-weight: 700;
  font-style: italic;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.03);
  border-left: 2px solid var(--color-divider);
  border-radius: 4px;
}
/* Subtle per-mode left-border tint so the audience type is
   colour-readable too. */
.stage-legend-audience-b2c        { border-left: 3px solid #C97A4A; }
.stage-legend-audience-b2b        { border-left: 3px solid #0A66C2; }
.stage-legend-audience-b2b2c      { border-left: 3px solid #6b3b1f; }
.stage-legend-audience-marketplace{ border-left: 3px solid #6a8c3f; }
.stage-legend-audience-unknown    { border-left: 3px solid var(--color-text-faint, #999); }

/* Single-column goals layout — used when the tenant is single-
   audience (b2c or b2b only). One full-width column reads cleaner
   than a half-width column with empty space. */
.stage-legend-goal-cols-single {
  grid-template-columns: 1fr;
}
.stage-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.stage-legend-tile {
  padding: 12px 14px;
  background: var(--color-surface-solid, #fff);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 8px);
  display: flex; flex-direction: column; gap: 6px;
}
.stage-legend-tile-head {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.stage-legend-tile-headline {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2px;
}
.stage-legend-tile-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
/* Per-stage "why this matters" rationale — italic + indented
   accent so it reads as commentary, not as another factual line. */
.stage-legend-tile-why {
  margin-top: 2px;
  padding: 6px 8px;
  font-size: 0.73rem;
  line-height: 1.45;
  font-weight: 700;
  font-style: italic;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.03);
  border-left: 2px solid var(--color-divider);
  border-radius: 4px;
}
.stage-legend-goal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-divider);
}
.stage-legend-goal-col {
  display: flex; flex-direction: column; gap: 2px;
}
.stage-legend-goal-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-faint, var(--color-text-muted));
  margin-bottom: 2px;
}
.stage-legend-goal-item {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-text);
}
.stage-legend-footnote {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-divider);
  font-style: italic;
}

/* Campaign Ideas page — the legend row sits above the themes grid
   with a bit of breathing room so it reads as a help affordance,
   not a primary action. */
.campaign-themes-legend-row {
  display: flex; justify-content: flex-end;
  margin-bottom: 12px;
}

/* Ad Copies page — the legend sits inline with the "Campaign plan"
   label so the header reads "Campaign plan  ⓘ Stage colours". When
   the user opens it, the content panel pushes the cards down. */
.adcopy-plan-label-wrap {
  display: flex; align-items: center; gap: 12px; flex: 1 1 auto;
}
.adcopy-plan-label-wrap .stage-legend-content {
  /* When the inline legend is open inside the plan-overview header,
     break it out to full width below the label so the tile grid
     has room. */
  position: absolute;
  left: 14px;
  right: 14px;
  top: 100%;
  z-index: 5;
  margin-top: 6px;
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.08));
}
.adcopy-plan-overview { position: relative; }

.adcopy-plan-overview {
  background: var(--color-surface-solid, #fff);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg, 12px);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.adcopy-plan-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.adcopy-plan-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.adcopy-plan-count {
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.adcopy-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.adcopy-plan-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.adcopy-plan-card:hover {
  border-color: var(--color-primary, #6b3b1f);
  transform: translateY(-1px);
}
.adcopy-plan-card.active {
  border-color: var(--color-primary, #6b3b1f);
  background: var(--color-surface-solid, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.adcopy-plan-card-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.adcopy-plan-card-platform {
  font-size: 0.82rem; font-weight: 600;
  color: var(--color-text);
}
.adcopy-plan-card-type {
  font-size: 0.74rem;
  color: var(--color-text-muted);
}
.adcopy-plan-card-placement {
  font-size: 0.7rem;
  color: var(--color-text-faint, var(--color-text-muted));
  font-style: italic;
}

.adcopy-route { display: flex; flex-direction: column; gap: 18px; }

.adcopy-publish-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-radius: var(--radius-lg);
  position: sticky;
  bottom: 12px;
}
.adcopy-publish-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.adcopy-publish-btn { white-space: nowrap; }
@media (max-width: 700px) {
  .adcopy-publish-bar { flex-direction: column; align-items: stretch; }
  .adcopy-publish-btn { width: 100%; justify-content: center; }
}
.adcopy-main {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .adcopy-main { grid-template-columns: 1fr; }
}

/* Mockup wrap */
.adcopy-mockup-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  position: sticky; top: 12px;
}
.adcopy-mockup-caption {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}

/* Visual placeholder used inside every mockup */
.ad-visual-placeholder {
  width: 100%; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: rgba(255, 255, 255, 0.92);
  padding: 18px; gap: 6px;
}
.ad-visual-title {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
}
.ad-visual-desc {
  font-size: 0.74rem; line-height: 1.45; opacity: 0.92;
  max-width: 320px;
}
.ad-visual-style {
  font-size: 0.66rem; opacity: 0.8; font-style: italic;
  max-width: 320px;
}

/* Avatar (brand logo) used by every mockup header */
.ad-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.95rem;
}
.ad-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* ── Facebook Feed mockup ────────────────────────────────────────────────── */
.ad-fb-card {
  /* 540px gives the Single Image hero room to breathe at the
     creative team's preferred preview size — important when
     snap-to-natural-aspect (see _renderFBFeedMockup in script.js)
     means the image fills the box at its full 3:2 aspect instead
     of being centre-cropped to 1.91:1. IG Feed (.ad-ig-card) stays
     at 410px since its 1:1 box already matches the backend-
     rendered 1:1 image with no crop. Phone mockups (Story / Reel)
     stay narrower (320px) — they imitate a phone shell shape. */
  width: 100%; max-width: 540px;
  background: #fff; color: #1c1e21;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
.ad-fb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.ad-fb-titles { flex: 1; min-width: 0; }
.ad-fb-name { font-weight: 600; font-size: 0.88rem; color: #050505; }
.ad-fb-meta { font-size: 0.72rem; color: #65676B; margin-top: 1px; }
.ad-fb-more { color: #65676B; font-size: 1.2rem; font-weight: 600; }
.ad-fb-text { padding: 0 14px 10px; font-size: 0.92rem; line-height: 1.4; color: #050505; white-space: pre-wrap; }
.ad-fb-card .ad-visual-placeholder { aspect-ratio: 1.91 / 1; }
.ad-fb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #F0F2F5;
}
.ad-fb-link-body { flex: 1; min-width: 0; }
.ad-fb-link-domain {
  font-size: 0.7rem; text-transform: uppercase;
  color: #65676B; letter-spacing: 0.04em;
}
.ad-fb-link-headline {
  font-size: 1rem; font-weight: 600; color: #050505;
  margin: 2px 0 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-fb-link-desc {
  font-size: 0.78rem; color: #65676B;
  margin-top: 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-fb-cta {
  background: #E4E6EB; color: #050505;
  font-weight: 600; font-size: 0.82rem;
  padding: 8px 14px; border-radius: 6px;
  white-space: nowrap;
}
.ad-fb-cta-sm { padding: 5px 10px; font-size: 0.72rem; }
.ad-fb-actions {
  display: flex; gap: 24px;
  padding: 8px 14px;
  border-top: 1px solid #CED0D4;
  font-size: 0.82rem; color: #65676B; font-weight: 600;
}

/* ── Instagram Feed mockup ──────────────────────────────────────────────── */
.ad-ig-card {
  width: 100%; max-width: 410px;
  background: #fff; color: #262626;
  border: 1px solid #DBDBDB; border-radius: 8px;
  font-family: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
.ad-ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ad-ig-handle { flex: 1; min-width: 0; }
.ad-ig-username { font-size: 0.82rem; font-weight: 600; color: #262626; }
.ad-ig-sponsored { font-size: 0.7rem; color: #8E8E8E; margin-top: 1px; }
.ad-ig-more { color: #262626; font-size: 1.1rem; font-weight: 700; }
.ad-ig-card .ad-visual-placeholder { aspect-ratio: 1 / 1; }
.ad-ig-cta-strip {
  background: #F5F5F5; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 0.82rem; color: #262626;
}
.ad-ig-cta-arrow { color: #8E8E8E; font-size: 1rem; }
.ad-ig-actions {
  display: flex; gap: 14px;
  padding: 8px 12px;
  font-size: 1.4rem;
  position: relative;
}
.ad-ig-icon { line-height: 1; }
.ad-ig-bookmark { margin-left: auto; }
.ad-ig-likes { padding: 0 12px 4px; font-size: 0.82rem; font-weight: 600; }
.ad-ig-text {
  padding: 0 12px 10px;
  font-size: 0.82rem; line-height: 1.4; color: #262626;
}
.ad-ig-text strong { font-weight: 600; }
.ad-ig-headline {
  padding: 0 12px 12px; font-size: 0.78rem; color: #8E8E8E;
}

/* ── Stories / Reels (vertical) phone mockup ────────────────────────────── */
.ad-phone {
  width: 100%; max-width: 320px;
  padding: 10px;
  background: #1c1c1e;
  border-radius: 36px;
  box-shadow: 0 0 0 2px #2c2c2e, 0 14px 30px rgba(0, 0, 0, 0.4);
  position: relative;
}
.ad-phone-screen {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
}
.ad-phone-bg { position: absolute; inset: 0; height: 100%; }
.ad-phone-bg.ad-visual-placeholder {
  aspect-ratio: auto;
  height: 100%;
}
/* When the phone-bg slot is wrapped by the visual-switcher (so the
   user can step through visual concepts inside the phone screen),
   the wrapper takes on the absolute-fill behaviour and the inner
   placeholder fills the wrapper instead of constraining its aspect. */
.ad-phone-bg.ad-visual-switcher > .ad-visual-placeholder {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
/* Story / Reel: the creative is 1:1 but the phone screen is 9:16, so
   `object-fit: cover` would crop the left/right edges of a square
   image — hiding logos and label copy that sit near the horizontal
   extents. Fit-to-contain instead: the full square sits centred
   vertically with black bands top + bottom, which is exactly where
   IG's chrome (progress + profile + reply + CTA sticker) lives. This
   also matches what Meta does on publish — a 1:1 in Stories is
   letterboxed, not centre-cropped. */
.ad-phone-bg .ad-visual-image-el {
  object-fit: contain;
  background: #000;
}
.ad-phone-top {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
}
.ad-phone-top .ad-avatar { width: 30px; height: 30px; font-size: 0.8rem;
  border: 1.5px solid rgba(255,255,255,0.9); }
.ad-phone-handle { color: #fff; }
.ad-phone-name { font-size: 0.8rem; font-weight: 600; line-height: 1.1; }
.ad-phone-sponsored { font-size: 0.66rem; opacity: 0.85; }
.ad-phone-side {
  position: absolute; right: 10px; bottom: 80px;
  display: flex; flex-direction: column; gap: 18px;
  color: #fff; z-index: 2;
}
.ad-phone-side-icon { font-size: 1.4rem; }
.ad-phone-caption {
  position: absolute; left: 14px; right: 56px; bottom: 90px;
  color: #fff; font-size: 0.84rem; line-height: 1.35;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 2;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-phone-cta {
  position: absolute; left: 14px; right: 14px; bottom: 18px;
  background: rgba(255, 255, 255, 0.95);
  color: #000; padding: 10px 14px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 0.82rem;
  z-index: 2;
}
.ad-phone-cta-chevron { font-size: 1.1rem; }

/* ── Instagram Story mockup (paid Story spec, 1080×1920 / 9:16) ──────────── */
/* Wraps the phone with a small below-it hint about the safe zone.
   The phone itself stays the same shape as the Reel mockup
   (.ad-phone), but Story-specific chrome (progress bars, profile
   pill, close, reply prompt, CTA sticker, caption gradient) sits
   inside the screen at fixed Meta-correct positions. */
.ad-story-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
.ad-story-safezone-hint {
  max-width: 320px;
  font-size: 0.7rem; line-height: 1.45;
  color: var(--color-text-muted);
  text-align: center;
}

/* Top progress bar strip — sits in the very top of the unsafe zone.
   Four segments with small gaps; the active one is half-filled to
   sell the "you're mid-Story" illusion. */
.ad-story-progress {
  position: absolute; top: 8px; left: 10px; right: 10px;
  display: flex; gap: 4px;
  z-index: 4;
}
.ad-story-progress-seg {
  flex: 1; height: 2px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  overflow: hidden;
}
.ad-story-progress-seg.done { background: #fff; }
.ad-story-progress-seg.partial {
  background: linear-gradient(to right,
    #fff 0%, #fff 45%,
    rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.35) 100%);
}

/* Profile pill row — sits below the progress bars. Avatar +
   brand handle + Sponsored tag on the left, ⋯ and × on the right. */
.ad-story-top {
  position: absolute; top: 18px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 8px;
  z-index: 4;
}
.ad-story-top .ad-avatar {
  width: 30px; height: 30px; font-size: 0.78rem;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
}
.ad-story-handle {
  flex: 1; min-width: 0; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ad-story-name {
  font-size: 0.78rem; font-weight: 600; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-story-sponsored { font-size: 0.65rem; opacity: 0.92; }
.ad-story-more, .ad-story-close {
  color: #fff; flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.ad-story-more { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.ad-story-close { font-size: 1.4rem; line-height: 1; padding-left: 4px; }

/* Caption — sits in the safe zone, just above the CTA sticker.
   Soft bottom-up gradient under it so white copy reads against
   a bright creative. */
.ad-story-caption-wrap {
  position: absolute; left: 0; right: 0;
  bottom: 110px;        /* clears the CTA sticker (≈ 56px) + reply prompt (≈ 50px) */
  padding: 28px 16px 12px;
  z-index: 3;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.32) 65%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.ad-story-caption {
  color: #fff;
  font-size: 0.84rem; font-weight: 500; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Native CTA sticker — Meta now renders the CTA as a movable
   sticker chip rather than a full-width bar. Glass-pill style sits
   in the lower safe zone just above the reply prompt. */
.ad-story-cta-wrap {
  position: absolute; left: 0; right: 0;
  bottom: 64px;         /* clears the reply prompt (≈ 50px + 14px gap) */
  display: flex; justify-content: center;
  z-index: 4;
  pointer-events: none;
}
.ad-story-cta-sticker {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  white-space: nowrap;
}
.ad-story-cta-arrow {
  font-size: 0.85rem; line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}
.ad-story-cta-label { font-weight: 700; }

/* Reply prompt — anchored to the very bottom (unsafe zone). The
   "Send message" pill plus heart + share icons mirror what
   Instagram shows under every Story. */
.ad-story-reply {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  z-index: 3;
}
.ad-story-reply-input {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  background: transparent;
}
.ad-story-reply-icon {
  color: #fff;
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ── Carousel (Meta Feed style) ─────────────────────────────────────────── */
/* Sized to match Meta's actual published Feed carousel: one full
   card visible at a time with ~10% of the next card peeking on the
   right edge to signal "swipe for more". This matches what the user
   actually sees when their ad goes live, instead of the previous
   2.5-cards-cramped layout. Scroll-snap aligns to card edges. */
.ad-carousel-strip {
  display: flex; gap: 8px; padding: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 12px;
  scrollbar-width: thin;
}
.ad-carousel-strip::-webkit-scrollbar { height: 6px; }
.ad-carousel-strip::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.ad-carousel-card {
  /* ~90% of the strip width → 1 full card + ~10% peek of the next.
     Floor of 300px so cards stay readable on a narrow mockup column;
     cap of 420px so they don't dominate on wide layouts. */
  flex: 0 0 90%;
  min-width: 300px;
  max-width: 420px;
  background: #fff;
  border: 1px solid #CED0D4;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.ad-carousel-card .ad-visual-placeholder {
  aspect-ratio: 1 / 1;
  background: #f0f2f5;
}
/* No carousel-specific .ad-visual-image-el override — the base rule
   above already absolute-pins the image to the placeholder bounds,
   which is exactly what carousel cards want. */
.ad-carousel-meta {
  /* Meta block sits below the image — matches Facebook's actual
     published layout. The light grey background mirrors what
     Facebook draws when the carousel renders in-feed. */
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto;
  background: #F0F2F5;
}
.ad-carousel-domain {
  font-size: 0.68rem; text-transform: uppercase; color: #65676B;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.ad-carousel-headline {
  font-size: 0.95rem; font-weight: 600; color: #050505;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.ad-carousel-desc {
  font-size: 0.82rem; color: #65676B;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px;
}
/* Carousel CTA — Meta's actual button style: light grey ground,
   black text, medium-weight, rounded. Sits right-aligned at the
   bottom of the meta block. */
.ad-carousel-card .ad-carousel-cta {
  margin-top: 8px;
  align-self: flex-start;
  background: #E4E6EB;
  color: #050505;
  font-size: 0.86rem;
  font-weight: 600;
  border: 0;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

/* ── Carousel: Instagram variant ─────────────────────────────────────── */
/* Instagram carousels are image-only cards with dot indicators
   below the strip; the brand handle / caption / CTA strip sit
   below the WHOLE carousel, not per-card. */
.ad-carousel-strip-ig {
  padding: 0;
  gap: 0;
  background: #000;
}
.ad-carousel-card-ig {
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}
.ad-carousel-card-ig .ad-visual-placeholder {
  background: #000;
}
.ad-ig-carousel-card {
  /* Override the ad-ig-card padding so the carousel can be
     full-bleed under the header. */
}
.ad-ig-carousel-dots {
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 0 4px;
}
.ad-ig-carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C7C7CC;
}
.ad-ig-carousel-dot.active {
  background: #0095F6;
}

/* ── Carousel: LinkedIn variant ──────────────────────────────────────── */
/* LinkedIn's Sponsored Content frame around a carousel — same
   layout as Facebook but with LinkedIn's blue CTA + cooler grey. */
.ad-li-card {
  /* Inherits .ad-fb-card; tweaks below adjust the chrome. */
}
.ad-carousel-meta-li {
  background: #F3F2EF;
}
.ad-carousel-card .ad-li-cta {
  background: #0A66C2;
  color: #fff;
}
.ad-li-card .ad-fb-meta {
  /* "Promoted · LinkedIn" line under the brand name. */
}
.ad-li-actions {
  /* LinkedIn shows a 4th action (Send) — handled in JS; CSS just
     wraps the row the same way as Facebook. */
}

/* ── Field switcher (right column) ──────────────────────────────────────── */
.adcopy-controls { display: flex; flex-direction: column; gap: 16px; }
.adcopy-dco-note {
  background: rgba(91,146,121,.16);
  border: 1px solid rgba(91,146,121,.45);
  border-left: 4px solid var(--color-forest-deep, #3f6a55);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-forest-deep, #3f6a55);
  box-shadow: 0 1px 0 rgba(43,24,16,.04), 0 6px 18px -12px rgba(63,106,85,.30);
}
.adcopy-control-block {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.adcopy-control-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.adcopy-control-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary); font-weight: 700;
}
.adcopy-control-count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem; color: var(--color-text-faint);
}
.adcopy-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.adcopy-chip {
  font-size: 0.74rem; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.adcopy-chip:hover { color: var(--color-text); border-color: var(--color-primary); }
.adcopy-chip.active {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.adcopy-current {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.84rem; line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
}
/* Click-to-edit affordance on the active option text. The hover ring
 * and pencil glyph signal "editable" without spending a separate row
 * on a button — the whole block is the target. */
.adcopy-editable {
  cursor: text;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}
.adcopy-editable:hover,
.adcopy-editable:focus-visible {
  background: var(--color-surface-3, var(--color-surface-2));
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-muted, rgba(0, 0, 0, 0.08));
}
.adcopy-editable::after {
  content: "✎";
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.78rem;
  color: var(--color-text-faint);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.adcopy-editable:hover::after,
.adcopy-editable:focus-visible::after { opacity: 0.85; }
/* Active editor — same visual block, but a real input/textarea. The
 * left accent bar is preserved so the section identity doesn't jump
 * when entering edit mode. */
textarea.adcopy-current.adcopy-editing,
input.adcopy-current.adcopy-editing {
  width: 100%;
  display: block;
  font: inherit;
  resize: vertical;
  border: 1px solid var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-muted, rgba(0, 0, 0, 0.08));
}

/* ── Below-the-mockup details ───────────────────────────────────────────── */
.adcopy-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.adcopy-detail-block {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.adcopy-detail-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-faint); font-weight: 700;
  margin-bottom: 8px;
}
.adcopy-detail-text {
  font-size: 0.86rem; line-height: 1.55; color: var(--color-text);
}
.adcopy-detail-list {
  margin: 0; padding-left: 18px;
  font-size: 0.84rem; line-height: 1.5; color: var(--color-text);
}
.adcopy-detail-list li { margin-bottom: 4px; }
.adcopy-visual-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.adcopy-visual-card {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.adcopy-visual-card-title { font-weight: 600; font-size: 0.86rem; margin-bottom: 4px; }
.adcopy-visual-card-text { font-size: 0.8rem; line-height: 1.5; color: var(--color-text-muted); margin-bottom: 6px; }
.adcopy-visual-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }

/* Side-by-side container for the conversational brief + structured
   prompt. Equal-width columns on wide cards; collapses to a stack
   when the card narrows below ~640px so neither block becomes
   unreadably narrow. */
.adcopy-image-prompts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  border-top: 1px dashed var(--color-divider);
  padding-top: 10px;
  align-items: stretch;
}
.adcopy-image-prompts-row > .adcopy-image-prompt-wrap {
  flex: 1 1 320px;
  min-width: 0;     /* allow children with whitespace pre-wrap to shrink */
  margin-top: 0;    /* the row owns the top spacing now */
  border-top: none; /* and the row owns the divider */
  padding-top: 0;
  display: flex;
  flex-direction: column;
}
.adcopy-image-prompts-row > .adcopy-image-prompt-wrap > .adcopy-image-prompt-body,
.adcopy-image-prompts-row > .adcopy-image-prompt-wrap > .adcopy-creative-brief-body {
  flex: 1 1 auto;   /* equalise heights when both blocks are present */
}
.adcopy-image-prompt-wrap {
  margin-top: 10px;
  border-top: 1px dashed var(--color-divider);
  padding-top: 10px;
}
.adcopy-image-prompt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.adcopy-image-prompt-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-faint); font-weight: 700;
}
.adcopy-image-prompt-copy {
  font-size: 0.7rem; padding: 3px 9px; border-radius: 6px;
  background: var(--color-surface-solid); color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  cursor: pointer;
}
.adcopy-image-prompt-copy:hover { color: var(--color-primary); border-color: var(--color-primary); }
.adcopy-image-prompt-body {
  margin: 0; padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  max-height: 240px; overflow-y: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem; line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap; word-wrap: break-word;
}
/* Conversational creative brief — distinct from the structured
   prompt: serif-leaning prose, no monospace, slightly tinted ground
   so the user can tell at a glance which block is which. */
.adcopy-creative-brief-body {
  margin: 0; padding: 10px 12px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent, var(--color-text));
  border-radius: var(--radius-sm);
  max-height: 240px; overflow-y: auto;
  font-size: 0.82rem; line-height: 1.55;
  color: var(--color-text);
}

/* ── Modal + goal picker ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: grid; place-items: center;
  padding: 24px;
  animation: fade-in 0.18s ease;
}
.modal-dialog {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px 24px;
  animation: modal-pop 0.2s ease;
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.modal-title { margin: 0 0 4px; font-size: 1.1rem; font-family: var(--font-display); }
.modal-subtitle { margin: 0 0 16px; color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.5; }

.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.goal-row:hover { border-color: var(--color-primary); }
.goal-row input[type="radio"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--color-primary); }
.goal-row:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
.goal-row:has(input[type="radio"]:checked) .goal-name { color: var(--color-primary); }
.goal-row-body { flex: 1; min-width: 0; }
.goal-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 2px; color: var(--color-text); }
.goal-meaning { color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.5; }
.goal-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.goal-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.goal-tag-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: transparent;
  font-weight: 600;
}
.goal-row-custom { flex-direction: row; }
.goal-custom-input {
  display: block; width: 100%; margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-solid);
  font-family: inherit; font-size: 0.9rem;
  color: var(--color-text);
}
.goal-custom-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--color-divider);
}
.modal-actions .btn-primary:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ── Integrations modal (platform OAuth connections) ─────────────────────── */
/* List of one row per platform. Each row reads as a ledger line:
   left = platform + status, right = action button. Always one row per
   platform regardless of connection state — keeps layout stable when
   the user connects / disconnects. */
.integrations-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 4px;
}
.integrations-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.integrations-info { flex: 1; min-width: 0; }
.integrations-platform {
  font-weight: 600; font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 4px;
}
.integrations-meta {
  font-size: 0.8rem; line-height: 1.5;
  color: var(--color-text-muted);
  word-break: break-word;
}
.integrations-meta-muted { font-style: italic; opacity: 0.8; }
.integrations-actions { flex-shrink: 0; }
.integrations-actions .btn { white-space: nowrap; }

/* ── WaveSpeed image generation (Ad Copies tab) ──────────────────────────── */
/* Generated-image render inside any mockup placeholder. The wrapper's
   aspect-ratio is snapped to the image's natural dimensions on load
   (see _visualPlaceholder in script.js), so `object-fit: cover`
   below ends up filling the box edge-to-edge with no crop and no
   letterbox — the mockup adapts to the creative the model actually
   produced. Mirrors how Meta's apps reflow image cards to fit the
   uploaded aspect. */
.ad-visual-image {
  padding: 0;                /* placeholder default has 18px — image
                                fills the box edge-to-edge */
  background: #000;          /* fallback while the image loads */
}
.ad-visual-image-el {
  /* Absolute-pin to the placeholder's box so the image fills it
     regardless of the placeholder's display mode (flex / grid /
     block). The placeholder has `position: relative` so `inset: 0`
     anchors here. Without absolute positioning, the image is a flex
     child inside `.ad-visual-placeholder` (display: flex; flex-
     direction: column; align-items: center) — and flex sizing can
     fight object-fit, letting the image's intrinsic dimensions push
     the box larger and overflow the surrounding card. Position
     absolute pulls it out of flex flow entirely. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ad-visual-drop-badge {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 0.68rem; font-weight: 500;
  padding: 4px 8px;
  background: rgba(180, 130, 20, 0.9);
  color: #fff;
  border-radius: 4px;
  cursor: help;
  max-width: calc(100% - 16px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-visual-gen-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.ad-visual-gen-overlay .spinner {
  width: 28px; height: 28px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
}
.ad-visual-gen-error {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  font-size: 0.7rem;
  background: rgba(180, 30, 30, 0.85);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: left;
}

/* Per-route header CTA — "Generate all <ad-type> creatives". */
.adcopy-gen-all-btn {
  display: inline-flex; align-items: center; gap: 6px;
}

/* Header row of each visual concept card — title left, generate
   button right. */
.adcopy-visual-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.adcopy-visual-card-head .adcopy-visual-card-title {
  margin-bottom: 0;
}
.adcopy-visual-gen-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; padding: 6px 10px; flex-shrink: 0;
}
.adcopy-visual-card-thumb {
  display: block; width: 100%; max-width: 360px;
  border-radius: var(--radius-sm);
  margin: 6px 0 8px;
  border: 1px solid var(--color-divider);
}
.adcopy-visual-gen-error-line {
  font-size: 0.74rem;
  color: #b32424;
  background: rgba(179, 36, 36, 0.08);
  padding: 4px 8px; border-radius: 4px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Inline Reclaim affordance — only rendered when the failure line
   wraps a `deadline exceeded; last=processing` error AND we still
   know the original job_id. Compact, low-key so it doesn't compete
   with the primary Generate / Regenerate button up top. */
.adcopy-visual-reclaim-btn {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Smaller spinner variant for inline button use. */
.spinner-sm {
  width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  display: inline-block;
}

/* ── In-placeholder visual switcher (prev/next arrows + dot strip) ───────── */
/* The switcher wrapper is the positioning context for the absolute
   arrows and dot strip; it carries no shape of its own — the inner
   .ad-visual-placeholder defines the aspect ratio (or, in the
   phone-bg case, the rule above lets the placeholder fill the
   wrapper instead). */
.ad-visual-switcher {
  position: relative;
  display: block;
  width: 100%;
}
.ad-visual-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 3;
  user-select: none;
}
.ad-visual-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}
.ad-visual-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
.ad-visual-arrow-prev { left: 8px; }
.ad-visual-arrow-next { right: 8px; }

.ad-visual-dots {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  z-index: 3;
}
.ad-visual-dot {
  width: 7px; height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ad-visual-dot:hover { background: rgba(255, 255, 255, 0.85); }
.ad-visual-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* ── Performance tab (CRM Phase A skeleton) ────────────────────────────────
   Visual language inspired by the Crextio dashboard reference: oversized
   rounded cards, display-weight numbers, pill chips, severity-edged
   recommendation rows. Colours come from the existing app tokens so the
   tab inherits light/dark theming for free; only the four severity hues
   are CRM-specific. */

:root {
  --crm-sev-high:   #e03131;
  --crm-sev-medium: #f59f00;
  --crm-sev-low:    #2f9e44;
  --crm-sev-info:   var(--color-primary);
  --crm-radius:     22px;
  --crm-radius-sm:  14px;
}

.pane[data-pane="performance"] { padding: 20px 28px 32px; }

#performanceCanvas { display: flex; flex-direction: column; gap: 24px; }

/* ── Header (title block + range picker) ────────────────────────────────── */
.crm-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.crm-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 600; letter-spacing: -0.01em;
  margin: 4px 0 6px;
}
.crm-sub { font-size: 0.85rem; color: var(--color-text-muted); }

.crm-range-picker {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--color-surface-2);
  border-radius: 999px;
  border: 1px solid var(--color-border);
}
.crm-range-pill {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted);
  background: transparent; transition: all 0.18s ease;
}
.crm-range-pill:hover { color: var(--color-text); }
.crm-range-pill.active {
  background: var(--color-text); color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

/* ── Loading / empty / error states ─────────────────────────────────────── */
.crm-body { display: flex; flex-direction: column; gap: 24px; }
.crm-empty {
  padding: 48px 24px; text-align: center;
  color: var(--color-text-muted); font-size: 0.92rem;
}
.crm-empty--inline { padding: 24px; }
.crm-error {
  padding: 16px 20px; border-radius: var(--crm-radius-sm);
  background: rgba(224, 49, 49, 0.08); color: var(--color-danger);
  font-size: 0.88rem;
}
.crm-skeleton {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.crm-skel-tile, .crm-skel-card {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius);
  animation: crm-pulse 1.6s ease-in-out infinite;
}
.crm-skel-tile { height: 140px; }
.crm-skel-card { grid-column: span 5; height: 220px; }
@keyframes crm-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.crm-kpi-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .crm-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .crm-kpi-strip { grid-template-columns: 1fr; } }

.crm-kpi-tile {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.crm-kpi-tile:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.crm-kpi-label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-kpi-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--color-text); line-height: 1.1;
}
.crm-kpi-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto;
}

.crm-tone-good .crm-kpi-value { color: var(--color-text); }
.crm-tone-warn .crm-kpi-value { color: var(--color-danger); }

/* Delta pill — used in KPI strip + money panel + anywhere a delta is shown */
.crm-delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600;
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.crm-delta--good { background: rgba(47, 158, 68, 0.12); color: var(--color-success); }
.crm-delta--bad  { background: rgba(224, 49, 49, 0.12); color: var(--color-danger); }
.crm-delta--flat { background: var(--color-surface-2); color: var(--color-text-faint); }

/* Sparkline svg lives inside the KPI tile meta row */
.crm-spark { display: block; }
.crm-spark polyline {
  fill: none; stroke: var(--color-primary);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Card chrome shared by funnel / money / insights ────────────────────── */
.crm-card {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.crm-card-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600; color: var(--color-text);
  margin-top: -10px;
}

/* ── Two-column band: funnel + money ────────────────────────────────────── */
.crm-band {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px; align-items: stretch;
}
@media (max-width: 1100px) { .crm-band { grid-template-columns: 1fr; } }

/* ── Funnel waterfall ───────────────────────────────────────────────────── */
.crm-funnel-card { min-height: 360px; }
.crm-funnel-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end; gap: 8px;
  flex: 1; min-height: 240px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-divider);
}
.crm-funnel-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; position: relative;
}
.crm-funnel-top {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.7rem; min-height: 32px;
  text-align: center;
}
.crm-funnel-count {
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.92rem;
  color: var(--color-text);
}
.crm-funnel-cr {
  font-size: 0.65rem; color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.crm-funnel-bar {
  width: 60%; max-width: 64px; min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 100%);
  position: relative;
  flex-shrink: 0;
  margin-top: auto;
}
.crm-funnel-dot {
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-text);
  border: 2px solid var(--color-surface-solid);
}
.crm-funnel-label {
  font-size: 0.72rem; color: var(--color-text-muted);
  text-align: center; font-weight: 500;
  margin-top: 6px;
}

/* ── Money panel ────────────────────────────────────────────────────────── */
.crm-money-card { min-height: 360px; }
.crm-money-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.crm-money-stat {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.crm-money-stat-label {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-money-stat-value {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600;
  color: var(--color-text); letter-spacing: -0.01em;
}
.crm-money-stat .crm-delta { align-self: flex-start; }

/* ROAS donut takes 2 columns inside the grid for visual weight */
.crm-roas-tile {
  grid-column: span 2;
  align-items: center; padding: 18px;
}
.crm-roas-ring {
  position: relative; width: 132px; height: 132px;
  margin: 6px 0;
}
.crm-roas-ring-track {
  fill: none; stroke: var(--color-surface-solid);
  opacity: 0.7;
}
.crm-roas-ring-arc {
  fill: none; stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}
.crm-roas-ring-arc.above-goal { stroke: var(--color-success); }
.crm-roas-ring-arc.below-goal { stroke: var(--color-danger); }
.crm-roas-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.crm-roas-value {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 700;
  color: var(--color-text); letter-spacing: -0.02em;
}
.crm-roas-goal {
  font-size: 0.68rem; color: var(--color-text-muted);
  margin-top: 2px; text-align: center;
}

/* ── Recommendations / insights cards ───────────────────────────────────── */
.crm-insights-card { gap: 16px; }
.crm-insights-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
}
.crm-insights-head .crm-card-title { margin-top: 0; }
.crm-insights-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}

.crm-insight {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 16px; align-items: center;
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 14px 18px 14px 22px;
  border-left: 4px solid transparent;
}
.crm-sev-high   { border-left-color: var(--crm-sev-high); }
.crm-sev-medium { border-left-color: var(--crm-sev-medium); }
.crm-sev-low    { border-left-color: var(--crm-sev-low); }
.crm-sev-info   { border-left-color: var(--crm-sev-info); }

.crm-insight-left {
  display: flex; flex-direction: column; gap: 4px;
}
.crm-insight-sev {
  font-size: 0.62rem; letter-spacing: 0.16em; font-weight: 700;
}
.crm-sev-high .crm-insight-sev   { color: var(--crm-sev-high); }
.crm-sev-medium .crm-insight-sev { color: var(--crm-sev-medium); }
.crm-sev-low .crm-insight-sev    { color: var(--crm-sev-low); }
.crm-sev-info .crm-insight-sev   { color: var(--crm-sev-info); }
.crm-insight-platform {
  font-size: 0.7rem; color: var(--color-text-muted); font-weight: 500;
}
.crm-insight-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-insight-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.crm-insight-headline {
  font-size: 0.95rem; font-weight: 600; color: var(--color-text);
  line-height: 1.3;
}
.crm-insight-autochip {
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-primary-light); color: var(--color-primary);
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
}
.crm-insight-evidence {
  font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.45;
}
.crm-insight-rec {
  font-size: 0.78rem; color: var(--color-text); font-weight: 500;
  font-style: italic;
}
.crm-insight-actions {
  display: flex; flex-direction: column; gap: 6px;
}

.crm-btn {
  appearance: none; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.crm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.crm-btn-primary {
  background: var(--color-primary); color: white;
}
.crm-btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.crm-btn-ghost {
  background: var(--color-surface-solid);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.crm-btn-ghost:hover { color: var(--color-text); border-color: var(--color-text-muted); }

/* On narrow screens the 3-column insight collapses to a stack */
@media (max-width: 640px) {
  .crm-insight {
    grid-template-columns: 1fr;
    gap: 8px; padding-left: 18px;
  }
  .crm-insight-actions { flex-direction: row; }
}

/* Footer stamp — small "mock data" disclosure so users see at a glance
   that numbers aren't real yet */
.crm-stamp {
  font-size: 0.7rem; color: var(--color-text-faint);
  text-align: center; padding: 8px 0;
  letter-spacing: 0.04em;
}

/* ── Leads tab (CRM Phase B) ───────────────────────────────────────────────
   6-stage kanban + slide-in lead detail drawer. Visual language stays
   in the same family as Performance: rounded cards, primary-colour
   accents for active states, severity-style left edges on cards using
   a score-tier colour system (high / mid / low). */

:root {
  --crm-tier-high: #2f9e44;
  --crm-tier-mid:  #f59f00;
  --crm-tier-low:  #868e96;
}

.pane[data-pane="leads"] {
  padding: 20px 28px 32px;
  /* Let the kanban scroll horizontally on narrow screens without
     pushing the whole pane. The pane itself stays fixed-width. */
}

#leadsCanvas { display: flex; flex-direction: column; gap: 24px; }

.crm-leads-actions { display: flex; gap: 8px; }

.crm-leads-body { display: flex; flex-direction: column; gap: 16px; }

/* Skeleton shown while fetching */
.crm-leads-skel {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 12px;
}
.crm-leads-skel-col {
  height: 360px;
  background: var(--color-surface-2);
  border-radius: var(--crm-radius);
  animation: crm-pulse 1.6s ease-in-out infinite;
}

/* ── Kanban board ───────────────────────────────────────────────────────── */
.crm-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
  /* On narrow screens: scroll horizontally, fixed column width */
  overflow-x: auto;
  padding-bottom: 8px;
}
@media (max-width: 1300px) {
  .crm-kanban { grid-template-columns: repeat(6, 240px); }
}

.crm-kanban-col {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius);
  padding: 14px 12px;
  display: flex; flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.crm-kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}
.crm-kanban-col-label {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text);
}
.crm-kanban-col-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 8px;
  border-radius: 999px;
  background: var(--color-surface-solid);
  font-size: 0.72rem; font-weight: 700;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Per-stage accent strip across the column header. Subtle, but
   distinguishes Won (green) and Lost (red) at a glance. */
.crm-stage-new       .crm-kanban-col-count { background: var(--color-primary-light); color: var(--color-primary); }
.crm-stage-contacted .crm-kanban-col-count { background: rgba(245, 159, 0, 0.12); color: #b87800; }
.crm-stage-qualified .crm-kanban-col-count { background: rgba(245, 159, 0, 0.18); color: #8a5400; }
.crm-stage-proposal  .crm-kanban-col-count { background: rgba(47, 158, 68, 0.12);  color: #1d7032; }
.crm-stage-won       .crm-kanban-col-count { background: rgba(47, 158, 68, 0.22);  color: #1d7032; }
.crm-stage-lost      .crm-kanban-col-count { background: rgba(224, 49, 49, 0.10);  color: var(--color-danger); }

.crm-kanban-cards {
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 60px;
}
.crm-kanban-empty {
  font-size: 0.78rem; color: var(--color-text-faint);
  text-align: center; padding: 12px 0;
}

/* ── Lead card ─────────────────────────────────────────────────────────── */
.crm-lead-card {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--crm-tier-low);
  border-radius: var(--crm-radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.crm-lead-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.crm-lead-tier-high { border-left-color: var(--crm-tier-high); }
.crm-lead-tier-mid  { border-left-color: var(--crm-tier-mid); }
.crm-lead-tier-low  { border-left-color: var(--crm-tier-low); }

.crm-lead-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.crm-lead-name {
  font-size: 0.92rem; font-weight: 600; color: var(--color-text);
  line-height: 1.2; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-lead-score {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.crm-lead-score--high { background: rgba(47, 158, 68, 0.16); color: var(--crm-tier-high); }
.crm-lead-score--mid  { background: rgba(245, 159, 0, 0.16);  color: #b87800; }
.crm-lead-score--low  { background: var(--color-surface-2);    color: var(--color-text-muted); }

.crm-lead-company {
  font-size: 0.74rem; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.crm-lead-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 4px;
  font-size: 0.7rem;
}
.crm-lead-source {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.crm-lead-platform {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 0.6rem; font-weight: 700;
  background: var(--color-surface-2); color: var(--color-text-muted);
  flex-shrink: 0;
}
.crm-platform-instagram { background: #fce4ec; color: #c2185b; }
.crm-platform-facebook  { background: #e3f2fd; color: #1565c0; }
.crm-platform-google    { background: #fff8e1; color: #ef6c00; }
.crm-platform-linkedin  { background: #e1f5fe; color: #0277bd; }
.crm-platform-email     { background: #f3e5f5; color: #6a1b9a; }
.crm-platform-site      { background: var(--color-surface-2); color: var(--color-text-muted); }
.crm-lead-source-label {
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.crm-lead-foot-right { display: flex; align-items: center; gap: 6px; }
.crm-lead-overdue {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 0 2px rgba(224, 49, 49, 0.18);
}
.crm-lead-time { color: var(--color-text-faint); }

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.crm-drawer-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0);
  transition: background 0.22s ease;
  pointer-events: none;
}
.crm-drawer-overlay.open {
  background: rgba(0, 0, 0, 0.32);
  pointer-events: auto;
}
.crm-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9100;
  width: min(560px, 100vw);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.crm-drawer.open { transform: translateX(0); }
.crm-drawer-loading,
.crm-drawer-error {
  padding: 60px 28px; text-align: center;
  color: var(--color-text-muted); font-size: 0.92rem;
}
.crm-drawer-error { color: var(--color-danger); }

.crm-drawer-inner {
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 26px 28px;
}
.crm-drawer-close {
  appearance: none; border: 0; cursor: pointer;
  position: absolute; top: 16px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface-2); color: var(--color-text);
  font-size: 1.4rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s ease;
}
.crm-drawer-close:hover { background: var(--color-border); }

/* Drawer header — avatar + identity + score */
.crm-drawer-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px; align-items: center;
  padding-right: 36px;  /* leave room for the absolute close button */
}
.crm-drawer-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 2px solid transparent;
}
.crm-drawer-avatar.crm-lead-tier-high { border-color: var(--crm-tier-high); }
.crm-drawer-avatar.crm-lead-tier-mid  { border-color: var(--crm-tier-mid); }
.crm-drawer-avatar.crm-lead-tier-low  { border-color: var(--crm-tier-low); }

.crm-drawer-titles { min-width: 0; }
.crm-drawer-name {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-drawer-meta {
  font-size: 0.82rem; color: var(--color-text-muted);
  margin: 2px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-drawer-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.crm-drawer-stage {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
}
.crm-drawer-stage.crm-stage-new       { background: var(--color-primary-light); color: var(--color-primary); }
.crm-drawer-stage.crm-stage-contacted { background: rgba(245, 159, 0, 0.16);  color: #8a5400; }
.crm-drawer-stage.crm-stage-qualified { background: rgba(245, 159, 0, 0.22);  color: #6b3f00; }
.crm-drawer-stage.crm-stage-proposal  { background: rgba(47, 158, 68, 0.18);  color: #1d7032; }
.crm-drawer-stage.crm-stage-won       { background: rgba(47, 158, 68, 0.28);  color: #1d7032; }
.crm-drawer-stage.crm-stage-lost      { background: rgba(224, 49, 49, 0.16);  color: var(--color-danger); }
.crm-drawer-tag {
  font-size: 0.66rem;
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
}

.crm-drawer-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 8px 14px;
  border-radius: var(--crm-radius-sm);
  background: var(--color-surface-2);
}
.crm-drawer-score-num {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1;
}
.crm-drawer-score-label {
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
  margin-top: 4px;
}

/* Quick-action row */
.crm-drawer-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Featured "next best action" panel */
.crm-drawer-nba {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--crm-radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.crm-drawer-nba-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary); font-weight: 700;
}
.crm-drawer-nba-headline {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; color: var(--color-text);
}
.crm-drawer-nba-evidence {
  font-size: 0.82rem; color: var(--color-text-muted);
}
.crm-drawer-nba-rec {
  font-size: 0.82rem; color: var(--color-text); font-style: italic;
}

/* Drawer sub-tab nav */
.crm-drawer-subnav {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--color-divider);
  overflow-x: auto;
}
.crm-drawer-subtab {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 14px;
  background: transparent; color: var(--color-text-muted);
  font-size: 0.84rem; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
  white-space: nowrap;
}
.crm-drawer-subtab:hover { color: var(--color-text); }
.crm-drawer-subtab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.crm-drawer-subpane {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 8px;
}

/* ── Touchpoint timeline (the centrepiece sub-pane) ─────────────────────── */
.crm-timeline {
  position: relative;
  padding-left: 8px;
}
.crm-tl-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  position: relative;
  padding-bottom: 14px;
}
/* Vertical connector line linking the dots */
.crm-tl-row::before {
  content: ""; position: absolute;
  left: 15px; top: 28px; bottom: -2px;
  width: 2px; background: var(--color-divider);
}
.crm-tl-row:last-child::before { display: none; }
.crm-tl-dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 2px solid var(--color-bg);
}
.crm-tl-dot.crm-platform-instagram,
.crm-tl-dot.crm-platform-facebook,
.crm-tl-dot.crm-platform-google,
.crm-tl-dot.crm-platform-linkedin,
.crm-tl-dot.crm-platform-email,
.crm-tl-dot.crm-platform-site {
  /* Reuse the platform colour map from the lead card footer */
}
.crm-tl-body { min-width: 0; padding-top: 4px; }
.crm-tl-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.crm-tl-title {
  font-size: 0.88rem; font-weight: 600; color: var(--color-text);
}
.crm-tl-time {
  font-size: 0.72rem; color: var(--color-text-faint);
  flex-shrink: 0;
}
.crm-tl-desc {
  font-size: 0.78rem; color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Score breakdown sub-pane ───────────────────────────────────────────── */
.crm-score-pane { gap: 16px; }
.crm-score-head {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--color-divider);
}
.crm-score-total {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700;
}
.crm-score-head-label {
  font-size: 0.82rem; color: var(--color-text-muted);
}
.crm-score-row {
  display: flex; flex-direction: column; gap: 6px;
}
.crm-score-row-top {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.84rem;
}
.crm-score-row-label { color: var(--color-text); font-weight: 500; }
.crm-score-row-value { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.crm-score-track {
  height: 8px; border-radius: 999px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.crm-score-fill {
  height: 100%; border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.4s ease;
}

/* ── Attribution sub-pane ───────────────────────────────────────────────── */
.crm-attr-tabs {
  display: flex; gap: 4px;
  background: var(--color-surface-2);
  padding: 4px;
  border-radius: 999px;
  align-self: flex-start;
}
.crm-attr-tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600;
  background: transparent; color: var(--color-text-muted);
  transition: all 0.14s ease;
}
.crm-attr-tab:hover { color: var(--color-text); }
.crm-attr-tab.active {
  background: var(--color-text); color: var(--color-bg);
}
.crm-attr-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0;
}
.crm-attr-row-top {
  display: flex; align-items: center; gap: 8px;
}
.crm-attr-row-label {
  flex: 1; min-width: 0;
  font-size: 0.86rem; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-attr-row-weight {
  font-size: 0.86rem; font-weight: 600;
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.crm-attr-track {
  height: 6px; border-radius: 999px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.crm-attr-fill {
  height: 100%; border-radius: 999px;
  background: var(--color-primary);
}

/* ── Identity sub-pane ──────────────────────────────────────────────────── */
.crm-identity-pane { gap: 0; }
.crm-id-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.86rem;
}
.crm-id-row:last-child { border-bottom: 0; }
.crm-id-label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.crm-id-value {
  color: var(--color-text);
  word-break: break-word;
}

/* ── Notes sub-pane ─────────────────────────────────────────────────────── */
.crm-notes-pane { gap: 12px; }
.crm-notes-head {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 700;
  margin-top: 6px;
}
.crm-note-row {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.crm-note-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem; color: var(--color-text-muted);
}
.crm-note-author {
  font-weight: 600; color: var(--color-text);
  text-transform: capitalize;
}
.crm-note-body {
  font-size: 0.86rem; color: var(--color-text);
  line-height: 1.45;
}
.crm-note-composer {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px;
}
.crm-note-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius-sm);
  font-family: inherit; font-size: 0.86rem;
  color: var(--color-text);
  resize: vertical;
}
.crm-note-input:focus {
  outline: none; border-color: var(--color-primary);
}
.crm-note-composer .crm-btn { align-self: flex-end; }

/* Drawer narrows further on phone */
@media (max-width: 600px) {
  .crm-drawer { width: 100vw; }
  .crm-drawer-head { grid-template-columns: 48px 1fr; }
  .crm-drawer-score { display: none; }  /* score still shown in score sub-pane */
}

/* "via Campaign Theme · Ad Set" line in drawer header */
.crm-drawer-via {
  font-size: 0.74rem; color: var(--color-primary);
  font-weight: 500; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Insight scope label (real ad-set name surfaced inside the
   left-column tag stack of the Performance-tab recommendation cards) */
.crm-insight-scope {
  font-size: 0.66rem; color: var(--color-text-faint);
  letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 84px;
}

/* ── Campaigns rollup card (Performance tab) ───────────────────────────── */
.crm-campaigns-card { gap: 14px; }
.crm-campaigns-list {
  display: flex; flex-direction: column; gap: 10px;
}
.crm-campaign-row {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.crm-campaign-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
}
.crm-campaign-title-block { min-width: 0; }
.crm-campaign-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.02rem;
  color: var(--color-text);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-campaign-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 6px;
  font-size: 0.74rem; color: var(--color-text-muted);
}
.crm-campaign-goal-pill {
  background: var(--color-primary-light); color: var(--color-primary);
  padding: 2px 10px; border-radius: 999px;
  font-weight: 600; font-size: 0.7rem;
}
.crm-campaign-meta-bit { color: var(--color-text-muted); }
.crm-campaign-demo-pill {
  background: var(--color-surface-solid);
  color: var(--color-text-faint);
  padding: 2px 10px; border-radius: 999px;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px dashed var(--color-border);
}

.crm-campaign-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(72px, auto));
  gap: 14px; align-items: center;
}
.crm-campaign-metric {
  display: flex; flex-direction: column; gap: 2px;
  text-align: right; min-width: 0;
}
.crm-campaign-metric-label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-campaign-metric-value {
  font-family: var(--font-display);
  font-size: 0.92rem; font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.crm-campaign-metric-value.crm-tone-good { color: var(--color-success); }
.crm-campaign-metric-value.crm-tone-warn { color: var(--color-danger); }

.crm-campaign-toggle {
  appearance: none; border: 0; cursor: pointer;
  align-self: flex-start;
  font-size: 0.74rem; color: var(--color-primary);
  background: transparent;
  font-weight: 600;
  padding: 2px 0;
}
.crm-campaign-toggle:hover { text-decoration: underline; }

.crm-campaign-adsets {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0 0;
  border-top: 1px solid var(--color-divider);
}
.crm-campaign-adset {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--color-text);
  flex-wrap: wrap;
}
.crm-campaign-adset-label { font-weight: 600; }
.crm-campaign-adset-meta  { color: var(--color-text-muted); }
.crm-campaign-adset-visual {
  color: var(--color-text-faint); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}

@media (max-width: 800px) {
  .crm-campaign-top { grid-template-columns: 1fr; }
  .crm-campaign-metrics { justify-content: flex-start; }
}

/* ── Trends chart (CRM-D) ──────────────────────────────────────────────── */
.crm-trends-card { gap: 14px; }

/* Chip row — pill-shaped toggles for series visibility */
.crm-trends-chips {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.crm-trends-chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid transparent;
  font-size: 0.78rem; font-weight: 600;
  transition: all 0.14s ease;
}
.crm-trends-chip:hover { color: var(--color-text); }
.crm-trends-chip-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--chip-color, var(--color-text-faint));
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.14s ease;
}
.crm-trends-chip.active {
  background: var(--color-surface-solid);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.crm-trends-chip.active .crm-trends-chip-dot { opacity: 1; }
.crm-trends-hint {
  margin-left: auto;
  font-size: 0.72rem; color: var(--color-text-faint);
  letter-spacing: 0.04em;
}

/* Chart container + SVG */
.crm-trends-chart {
  position: relative;
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 6px 8px 4px;
  /* Allow tooltip to overflow the SVG bounds without showing
     scrollbars on the card. */
  overflow: hidden;
}
.crm-trends-svg {
  display: block; width: 100%; height: auto;
}

/* Soft grid lines */
.crm-trends-grid {
  stroke: var(--color-divider); stroke-width: 1;
  stroke-dasharray: 2 4;
}

/* Lines + dots */
.crm-trends-line {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}
.crm-trends-dot {
  /* Thin halo so dots stay visible against the line */
  stroke: var(--color-surface-2);
  stroke-width: 1;
}

/* Event vertical markers */
.crm-trends-event-line {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.45;
}
.crm-trends-event-tag {
  fill: var(--color-primary);
  stroke: var(--color-surface-solid);
  stroke-width: 2;
}
.crm-trends-event-tag-text {
  fill: white;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: none;
}

/* X-axis date labels */
.crm-trends-xlabel {
  fill: var(--color-text-faint);
  font-size: 10px;
  font-family: inherit;
}

/* Hover crosshair */
.crm-trends-hover-line {
  stroke: var(--color-text);
  stroke-width: 1;
  opacity: 0.18;
  pointer-events: none;
}

/* Tooltip — absolutely positioned within the chart wrap */
.crm-trends-tip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  font-size: 0.78rem;
  min-width: 180px;
  display: flex; flex-direction: column; gap: 4px;
}
.crm-trends-tip-date {
  font-size: 0.7rem; color: var(--color-text-faint);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 4px; margin-bottom: 2px;
}
.crm-trends-tip-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem;
}
.crm-trends-tip-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.crm-trends-tip-label {
  color: var(--color-text-muted);
  flex: 1;
}
.crm-trends-tip-value {
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Creatives grid (CRM-E) ────────────────────────────────────────────── */
.crm-creatives-card { gap: 14px; }
.crm-creatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.crm-creative-card {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.crm-creative-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Thumbnail — image fills, overlays sit on top */
.crm-creative-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-solid);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.crm-creative-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.crm-creative-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  background: linear-gradient(135deg,
    var(--color-surface-2) 0%, var(--color-surface-solid) 100%);
}

/* Platform glyph in top-left corner of the thumbnail */
.crm-creative-platform {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 700;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .crm-creative-platform {
  background: rgba(20, 20, 20, 0.7);
}

/* Status badge in top-right of the thumbnail */
.crm-creative-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.66rem; letter-spacing: 0.06em;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.crm-badge-winner         { background: rgba(47, 158, 68, 0.92);  color: white; }
.crm-badge-fatigued       { background: rgba(245, 159, 0, 0.92);  color: white; }
.crm-badge-underperformer { background: rgba(224, 49, 49, 0.92);  color: white; }
.crm-badge-testing        { background: rgba(0, 0, 0, 0.55);      color: white; }

.crm-creative-body {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
}
.crm-creative-title {
  font-family: var(--font-display);
  font-size: 0.92rem; font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.crm-creative-adset {
  font-size: 0.74rem; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Compact metrics strip — 5 stats arranged horizontally */
.crm-creative-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background: var(--color-surface-solid);
  border-radius: var(--crm-radius-sm);
  padding: 8px 6px;
}
.crm-creative-metric {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; min-width: 0;
}
.crm-creative-metric-label {
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-creative-metric-value {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.crm-creative-metric-value.crm-tone-good { color: var(--color-success); }
.crm-creative-metric-value.crm-tone-warn { color: var(--color-danger); }

.crm-creative-actions {
  display: flex; gap: 6px; margin-top: 2px;
}
.crm-creative-actions .crm-btn { flex: 1; padding: 6px 8px; font-size: 0.72rem; }

/* ── Audiences (CRM-E) ─────────────────────────────────────────────────── */
.crm-audiences-card { gap: 18px; }

/* Heatmap — table with coloured cells */
.crm-heatmap-wrap {
  overflow-x: auto;
  border-radius: var(--crm-radius-sm);
  border: 1px solid var(--color-border);
}
.crm-heatmap {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
  min-width: 540px;
}
.crm-heatmap th, .crm-heatmap td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--color-divider);
}
.crm-heatmap thead th {
  background: var(--color-surface-2);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 700;
  border-bottom: 1px solid var(--color-border);
}
.crm-heatmap-th-segment, .crm-heatmap-segment {
  text-align: left !important;
  width: 32%;
}
.crm-heatmap-segment {
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-solid);
  position: sticky; left: 0; z-index: 1;
}
.crm-heatmap-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-text);
  /* Inline `style.background` carries the heat colour */
}
.crm-heatmap-value { white-space: nowrap; }

/* Demographic slicers — 3-col grid of small bar lists */
.crm-slicers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.crm-slicer {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.crm-slicer-label {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 700;
}
.crm-slicer-bars {
  display: flex; flex-direction: column; gap: 6px;
}
.crm-slicer-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  gap: 8px; align-items: center;
  font-size: 0.74rem;
}
.crm-slicer-row-label {
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-slicer-track {
  height: 6px; border-radius: 999px;
  background: var(--color-surface-solid);
  overflow: hidden;
}
.crm-slicer-fill {
  height: 100%; border-radius: 999px;
  background: var(--color-text-faint);
  transition: width 0.4s ease;
}
.crm-slicer-fill--top {
  background: var(--color-primary);
}
.crm-slicer-row-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-weight: 500;
}

@media (max-width: 720px) {
  .crm-creatives-grid { grid-template-columns: 1fr; }
  .crm-creative-metrics { grid-template-columns: repeat(5, 1fr); }
}

/* ── Customers tab (CRM-F) ─────────────────────────────────────────────── */
:root {
  --crm-tier-vip:    #9c36b5;   /* purple */
  --crm-tier-loyal:  #f59f00;   /* amber */
  --crm-tier-repeat: #1971c2;   /* blue  */
  --crm-tier-new:    #868e96;   /* grey  */

  --crm-cstatus-active:  #2f9e44;
  --crm-cstatus-dormant: #f59f00;
  --crm-cstatus-churned: #868e96;
}

.pane[data-pane="customers"] { padding: 20px 28px 32px; }
#customersCanvas { display: flex; flex-direction: column; gap: 24px; }

.crm-customers-skel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.crm-customers-body { display: flex; flex-direction: column; gap: 18px; }

/* Stats strip across the top — KPIs + status mix */
.crm-customer-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 2fr;
  gap: 12px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius);
  padding: 14px 16px;
}
.crm-customer-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.crm-customer-stat-label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-customer-stat-value {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.crm-customer-stat-value.crm-tone-good { color: var(--color-success); }
.crm-customer-stat-value.crm-tone-warn { color: var(--color-danger); }

.crm-customer-breakdown {
  display: flex; flex-direction: column; gap: 6px;
}
.crm-customer-stack {
  height: 12px; width: 100%; border-radius: 999px;
  background: var(--color-surface-2);
  overflow: hidden;
  display: flex;
}
.crm-customer-stack-seg { height: 100%; }
.crm-cstatus-active  { background: var(--crm-cstatus-active); }
.crm-cstatus-dormant { background: var(--crm-cstatus-dormant); }
.crm-cstatus-churned { background: var(--crm-cstatus-churned); }
.crm-customer-stack-legend {
  display: flex; gap: 12px; font-size: 0.74rem; color: var(--color-text-muted);
}
.crm-customer-stack-leg { display: inline-flex; align-items: center; gap: 6px; }
.crm-customer-stack-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}

/* Filter rail — re-uses inbox classes (crm-inbox-chip etc.) */
.crm-customer-filters {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius);
  padding: 12px 16px;
}

/* Card grid */
.crm-customers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.crm-customer-card {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  border-radius: var(--crm-radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.crm-customer-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.crm-customer-card.crm-tier-vip    { border-left-color: var(--crm-tier-vip); }
.crm-customer-card.crm-tier-loyal  { border-left-color: var(--crm-tier-loyal); }
.crm-customer-card.crm-tier-repeat { border-left-color: var(--crm-tier-repeat); }
.crm-customer-card.crm-tier-new    { border-left-color: var(--crm-tier-new); }

.crm-customer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.crm-customer-name-block { min-width: 0; }
.crm-customer-name {
  font-family: var(--font-display);
  font-size: 0.96rem; font-weight: 600; color: var(--color-text);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-customer-company {
  font-size: 0.74rem; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crm-customer-tier-pill {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  flex-shrink: 0;
}
.crm-customer-tier-pill.crm-tier-vip    { background: rgba(156, 54, 181, 0.16);  color: var(--crm-tier-vip); }
.crm-customer-tier-pill.crm-tier-loyal  { background: rgba(245, 159, 0, 0.18);   color: #8a5400; }
.crm-customer-tier-pill.crm-tier-repeat { background: rgba(25, 113, 194, 0.16);  color: var(--crm-tier-repeat); }
.crm-customer-tier-pill.crm-tier-new    { background: var(--color-surface-2);    color: var(--color-text-muted); }

/* Hero LTV — the dominant number on each card */
.crm-customer-hero {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.crm-customer-hero-label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-customer-hero-value {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 700; color: var(--color-text);
  letter-spacing: -0.02em;
}
.crm-customer-hero-pred {
  font-size: 0.74rem; color: var(--color-primary); font-weight: 500;
}

.crm-customer-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.crm-customer-metric {
  display: flex; flex-direction: column; gap: 2px;
}
.crm-customer-metric-label {
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.crm-customer-metric-value {
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.9rem; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.crm-customer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
}
.crm-customer-status {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
  flex-shrink: 0;
}
.crm-customer-status.crm-cstatus-active  { background: rgba(47, 158, 68, 0.16);  color: var(--crm-cstatus-active); }
.crm-customer-status.crm-cstatus-dormant { background: rgba(245, 159, 0, 0.18);  color: #8a5400; }
.crm-customer-status.crm-cstatus-churned { background: var(--color-surface-2);    color: var(--color-text-muted); }

.crm-customer-acq {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
  color: var(--color-text-muted);
}
.crm-customer-acq-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.72rem;
}

/* ── Customer drawer additions ─────────────────────────────────────────── */
.crm-customer-drawer-hero {
  background: var(--color-primary-light);
  border-radius: var(--crm-radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.crm-drawer-ltv-value {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.crm-drawer-ltv-pred {
  display: flex; gap: 12px; font-size: 0.78rem;
  color: var(--color-primary); font-weight: 500;
}

.crm-drawer-money-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.crm-drawer-money-grid .crm-money-stat {
  /* Re-uses .crm-money-stat from money panel CSS */
  background: var(--color-surface-2);
}

/* LTV trajectory chart inside the drawer */
.crm-customer-ltv-card,
.crm-customer-orders-card {
  background: var(--color-surface-2);
  border-radius: var(--crm-radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.crm-customer-ltv-svg {
  display: block; width: 100%; height: auto;
  max-height: 180px;
}
.crm-customer-ltv-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.crm-customer-ltv-dot {
  fill: var(--color-primary);
  stroke: var(--color-surface-2);
  stroke-width: 1.5;
}
.crm-customer-ltv-pred-line {
  fill: none;
  stroke: var(--color-text-faint);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}
.crm-customer-ltv-pred-dot {
  fill: var(--color-bg);
  stroke: var(--color-text-faint);
  stroke-width: 1.5;
}
.crm-customer-ltv-legend {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--color-text-faint);
}

/* Order history list */
.crm-customer-orders-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.crm-customer-order-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.84rem;
}
.crm-customer-order-row:last-child { border-bottom: none; }
.crm-customer-order-num {
  font-family: var(--font-display);
  font-size: 0.78rem; color: var(--color-text-faint);
  font-weight: 600;
}
.crm-customer-order-date { color: var(--color-text); }
.crm-customer-order-items {
  font-size: 0.74rem; color: var(--color-text-muted);
}
.crm-customer-order-amount {
  font-family: var(--font-display);
  font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Drawer avatar tinting by tier (overrides the lead-tier rules) */
.crm-drawer-avatar.crm-tier-vip    { border-color: var(--crm-tier-vip); }
.crm-drawer-avatar.crm-tier-loyal  { border-color: var(--crm-tier-loyal); }
.crm-drawer-avatar.crm-tier-repeat { border-color: var(--crm-tier-repeat); }
.crm-drawer-avatar.crm-tier-new    { border-color: var(--crm-tier-new); }

@media (max-width: 1100px) {
  .crm-customer-stats { grid-template-columns: repeat(2, 1fr); }
  .crm-customer-stats .crm-customer-breakdown { grid-column: span 2; }
}
@media (max-width: 600px) {
  .crm-customer-stats { grid-template-columns: 1fr; }
  .crm-customer-stats .crm-customer-breakdown { grid-column: span 1; }
  .crm-drawer-money-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Event legend below the chart — compact list of numbered annotations */
.crm-trends-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
  font-size: 0.78rem;
}
.crm-trends-legend-row {
  display: flex; align-items: center; gap: 8px;
}
.crm-trends-legend-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-primary); color: white;
  font-size: 0.66rem; font-weight: 700;
  flex-shrink: 0;
}
.crm-trends-legend-date {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 64px;
}
.crm-trends-legend-label {
  color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* ── Insights inbox (CRM-C) ────────────────────────────────────────────── */
.pane[data-pane="insights"] { padding: 20px 28px 32px; }
#insightsCanvas { display: flex; flex-direction: column; gap: 24px; }

.crm-insights-skel {
  display: flex; flex-direction: column; gap: 8px;
}

.crm-insights-inbox {
  display: flex; flex-direction: column; gap: 18px;
}

/* ── Filter rail ─────────────────────────────────────────────────────────── */
.crm-inbox-filters {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius);
}
.crm-inbox-filter-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.crm-inbox-filter-label {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
  width: 70px; flex-shrink: 0;
}
.crm-inbox-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.crm-inbox-chip {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--color-surface-2); color: var(--color-text-muted);
  transition: all 0.14s ease;
}
.crm-inbox-chip:hover { color: var(--color-text); }
.crm-inbox-chip.active {
  background: var(--color-text); color: var(--color-bg);
}
.crm-inbox-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--color-surface-solid); color: var(--color-text);
  border-radius: 999px;
  font-size: 0.66rem; font-weight: 700;
}
.crm-inbox-chip.active .crm-inbox-chip-count {
  background: var(--color-bg); color: var(--color-text);
}

/* ── Inbox list rows ───────────────────────────────────────────────────── */
.crm-inbox-list {
  display: flex; flex-direction: column; gap: 8px;
}
.crm-inbox-row {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  border-radius: var(--crm-radius-sm);
  overflow: hidden;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.crm-inbox-row.crm-sev-high   { border-left-color: var(--crm-sev-high); }
.crm-inbox-row.crm-sev-medium { border-left-color: var(--crm-sev-medium); }
.crm-inbox-row.crm-sev-low    { border-left-color: var(--crm-sev-low); }
.crm-inbox-row.crm-sev-info   { border-left-color: var(--crm-sev-info); }
.crm-inbox-row:hover { box-shadow: var(--shadow-sm); }

.crm-inbox-row-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  flex-wrap: wrap;
}
.crm-inbox-sev {
  font-size: 0.62rem; letter-spacing: 0.16em; font-weight: 700;
  flex-shrink: 0;
}
.crm-sev-high   .crm-inbox-sev { color: var(--crm-sev-high); }
.crm-sev-medium .crm-inbox-sev { color: var(--crm-sev-medium); }
.crm-sev-low    .crm-inbox-sev { color: var(--crm-sev-low); }
.crm-sev-info   .crm-inbox-sev { color: var(--crm-sev-info); }

.crm-inbox-status {
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-muted);
  flex-shrink: 0;
}
.crm-inbox-status--open      { background: var(--color-primary-light); color: var(--color-primary); }
.crm-inbox-status--acted     { background: rgba(47, 158, 68, 0.16); color: var(--color-success); }
.crm-inbox-status--dismissed { background: rgba(0, 0, 0, 0.06); color: var(--color-text-faint); }
.crm-inbox-status--snoozed   { background: rgba(245, 159, 0, 0.18); color: #8a5400; }

.crm-inbox-stage {
  font-size: 0.7rem; color: var(--color-text-muted);
  text-transform: capitalize;
  flex-shrink: 0;
}
.crm-inbox-scope {
  font-size: 0.74rem; color: var(--color-text);
  font-weight: 500; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.crm-inbox-headline {
  flex: 1; min-width: 0;
  font-size: 0.92rem; color: var(--color-text); font-weight: 500;
  line-height: 1.3;
}
.crm-inbox-chev {
  flex-shrink: 0; color: var(--color-text-faint);
  font-size: 0.8rem;
}

.crm-inbox-row-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 16px 14px 32px;
  border-top: 1px solid var(--color-divider);
  padding-top: 12px;
}
.crm-inbox-evidence-label {
  font-size: 0.62rem; letter-spacing: 0.14em; font-weight: 700;
  color: var(--color-text-faint);
  margin-top: 4px;
}
.crm-inbox-evidence {
  font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.45;
}
.crm-inbox-rec {
  font-size: 0.86rem; color: var(--color-text);
  font-style: italic; line-height: 1.45;
}
.crm-inbox-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .crm-inbox-filter-label { width: 100%; }
  .crm-inbox-row-top { gap: 8px; padding: 10px 12px; }
  .crm-inbox-scope { max-width: 100%; }
  .crm-inbox-row-body { padding-left: 16px; }
}

/* ── Auth state visibility gates ───────────────────────────────────────────
   The root <html data-auth-state="…"> attribute drives whether we show
   the loading splash, the auth screens, or the existing app. The
   loading splash is `position: fixed; z-index: 9999`, so it MUST be
   hidden explicitly in BOTH `signed-out` and `signed-in` — otherwise
   it covers the underlying view (the splash sits on top of the auth
   card and looks like a blank page with a tiny pulsing dot). */
html[data-auth-state="loading"]    .app-layout,
html[data-auth-state="loading"]    #authRoot,
html[data-auth-state="signed-out"] .app-layout,
html[data-auth-state="signed-out"] .auth-loading,
html[data-auth-state="signed-in"]  .auth-loading,
html[data-auth-state="signed-in"]  #authRoot {
  display: none !important;
}
html[data-auth-state="loading"]    .auth-loading,
html[data-auth-state="signed-out"] #authRoot {
  display: flex !important;
}

/* ── Loading splash ──────────────────────────────────────────────────────── */
.auth-loading {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  z-index: 9999;
}
.auth-loading-pulse {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary-light);
  animation: auth-pulse 1.4s ease-in-out infinite;
}
@keyframes auth-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1);   opacity: 1;   }
}

/* ── Auth screen layout ──────────────────────────────────────────────────── */
.auth-root {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--color-primary-light) 0%, transparent 60%),
    radial-gradient(800px 400px at 0% 110%, hsla(var(--h-primary), 60%, 50%, 0.06) 0%, transparent 60%),
    var(--color-bg);
  overflow: auto;
  z-index: 100;
}

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
}

.auth-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.auth-banner {
  background: var(--color-primary-light);
  color: var(--color-text);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.auth-sub {
  margin: 0; color: var(--color-text-muted);
  font-size: 0.95rem;
}
.auth-form form {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px;
}

.auth-field {
  display: flex; flex-direction: column; gap: 6px;
}
.auth-field-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.auth-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-solid);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.auth-field input:disabled {
  opacity: 0.6; cursor: not-allowed;
}

.auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.auth-btn-primary {
  background: var(--color-primary); color: #fff;
}
.auth-btn-primary:hover { background: var(--color-primary-hover); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-status {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}
.auth-status.err { color: var(--color-danger); }
.auth-status.ok  { color: var(--color-success); }
.auth-status.info { color: var(--color-text-muted); }

.auth-links {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 0.9rem; color: var(--color-text-muted);
  margin-top: 4px;
}
.auth-links a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link-sep { color: var(--color-text-faint); }
.auth-muted { color: var(--color-text-muted); }

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; }
  .auth-form h1 { font-size: 1.4rem; }
}

/* ── User menu (top-right of LHS panel when signed in) ───────────────────── */
.lhs-header-actions {
  display: flex; align-items: center; gap: 8px;
}

.user-menu {
  position: relative;
}
.user-menu-trigger {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem;
  border: 1px solid var(--color-border);
  transition: background var(--transition);
}
.user-menu-trigger:hover { background: var(--color-primary); color: #fff; }
.user-menu-avatar { letter-spacing: 0.5px; }

.user-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: none;
  z-index: 50;
}
.user-menu.open .user-menu-dropdown { display: block; }

.user-menu-row { padding: 8px 10px; font-size: 0.88rem; }
.user-menu-info { display: flex; flex-direction: column; gap: 2px; }
.user-menu-email  { font-weight: 600; word-break: break-all; }
.user-menu-tenant { color: var(--color-text-muted); font-size: 0.82rem; }
.user-menu-badge {
  margin: 4px 10px 0;
  display: inline-block;
  padding: 1px 8px; border-radius: 999px;
  background: var(--color-primary-light); color: var(--color-primary);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}
.user-menu-sep {
  height: 1px; background: var(--color-divider); margin: 6px 4px;
}
.user-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--color-text);
  background: transparent;
}
.user-menu-item:hover { background: var(--color-surface-2); }


/* ── Per-profile B2B/B2C mode chip ───────────────────────────────────────── */
.detail-mode {
  margin-top: 8px;
  position: relative;
  display: inline-block;
}
.detail-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.detail-mode-chip:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.detail-mode-chip.detail-mode-chip-unset {
  /* Subdued styling when no mode is set yet — nudges the user to
     pick one without screaming for attention. */
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-style: dashed;
}
.detail-mode-chip.detail-mode-chip-unset:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-style: solid;
}
.detail-mode-chevron {
  font-size: 0.7em;
  opacity: 0.7;
}

.detail-mode-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 260px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-mode-popover-head {
  padding: 6px 10px 4px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.detail-mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  width: 100%;
}
.detail-mode-option:hover {
  background: var(--color-surface-2);
}
.detail-mode-option.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.detail-mode-option-short {
  font-weight: 600;
  font-size: 0.86rem;
}
.detail-mode-option-long {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.detail-mode-option.active .detail-mode-option-long {
  color: var(--color-primary);
  opacity: 0.85;
}
.detail-mode-popover-sep {
  height: 1px;
  background: var(--color-divider);
  margin: 4px 4px;
}
.detail-mode-option-clear {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.detail-mode-option-clear:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* ── B2B theme card styling ──────────────────────────────────────────────── */
/* Subtle visual differentiation so a B2B-flavoured theme reads as
   B2B at a glance: a left-edge accent stripe (using the brand's
   primary teal so it stays on-palette in both light and dark) plus
   a small "B2B" tag in the header. The card body otherwise renders
   identically — preserving the established theme-card layout that
   B2C output already uses. */
.theme-card-b2b {
  border-left: 3px solid var(--color-primary);
  position: relative;
}
.theme-mode-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Context strip — buying-committee / stage / funnel / segment / proof.
   Sits BETWEEN the header and the narrative because the role-and-
   stage signal is the most actionable information for a creative
   team deciding which theme to build first. */
.theme-b2b-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
}
.theme-b2b-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-surface-solid);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-size: 0.74rem;
  line-height: 1.4;
}
/* Per-field accents — kept low-saturation so the strip doesn't
   compete with proof_points pills further down the card. */
.theme-b2b-role    { color: var(--color-primary);   border-color: var(--color-primary); font-weight: 600; }
.theme-b2b-stage   { color: var(--color-text); }
.theme-b2b-funnel  { font-weight: 700; letter-spacing: 0.04em; color: var(--color-primary); }
.theme-b2b-segment { color: var(--color-text-muted); font-style: italic; }
.theme-b2b-proof   { color: var(--color-text); }

/* LinkedIn platform badge — keep the existing platform-pill layout
   but tint blue so a B2B batch reads at a glance. */
.theme-badge-platform-linkedin {
  background: #0a66c2 !important;  /* LinkedIn brand blue */
  color: #fff !important;
  border-color: #0a66c2 !important;
}

@media (max-width: 720px) {
  .theme-b2b-strip { padding: 6px 8px; }
  .theme-b2b-badge { font-size: 0.7rem; padding: 2px 7px; }
}


/* ── Phase F.14 / G — Real-data CRM additions ─────────────────────────
   data_source pill: a tiny dot+label badge surfaced on every CRM tile
   whose numbers can vary between "real Meta-imported" and "synthesized
   mock". Lets the user trust-but-verify at a glance.
*/
.crm-ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.4;
}
.crm-ds-badge-real {
  color: #0a8a4a;            /* desaturated green */
  background: #ebf7ee;
  border-color: #cfe9d6;
}
.crm-ds-badge-mock {
  color: var(--color-text-muted, #888);
  background: transparent;
  border-color: var(--color-border, #ddd);
}
.crm-ds-badge-empty { display: none; }

/* Title + badge composition on Creatives cards. */
.crm-creative-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

/* Money tile label row — label + optional ds-badge side by side. */
.crm-money-stat-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Insights inbox — structured-evidence grid (rule engine output) */
.crm-inbox-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 16px;
  padding: 8px 0;
}
.crm-evidence-cell {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  border-left: 2px solid var(--color-border, #ddd);
  padding-left: 8px;
}
.crm-evidence-key {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
}
.crm-evidence-val {
  font-weight: 600;
  color: var(--color-text, #111);
}

/* Predicted-impact chip — rendered above the evidence grid in the
   expanded inbox row. Confidence drives the accent colour so users
   can read "this is rough" at a glance:
     high   → strong green
     medium → muted green
     low    → amber/grey
*/
.crm-impact-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--color-border, #ddd);
}
.crm-impact-high   { background: rgba(34, 139, 90, 0.10); border-color: #2c9966; }
.crm-impact-medium { background: rgba(34, 139, 90, 0.05); border-color: #8bbf9f; }
.crm-impact-low    { background: rgba(216, 153, 39, 0.07); border-color: #d89927; }
.crm-impact-value {
  font-weight: 700;
  color: var(--color-text, #111);
  font-variant-numeric: tabular-nums;
}
.crm-impact-conf {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
}
.crm-impact-caveat {
  font-size: 0.9rem;
  cursor: help;
  color: var(--color-text-muted, #888);
}

/* Statistical-rigor strip — rendered between impact chip and evidence
   grid. Tells the user HOW we judged the insight: method, CI, n, p_adj,
   effect size. Tabular-nums everywhere so columns line up.
*/
.crm-stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 4px 0 10px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border, #ddd);
  font-variant-numeric: tabular-nums;
}
.crm-stat-strip--underpowered {
  background: rgba(216, 153, 39, 0.10);
  border-color: #d89927;
}
.crm-stat-method {
  font-size: 0.70rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #777);
  border-right: 1px solid var(--color-border, #ddd);
  padding-right: 12px;
  margin-right: -4px;
}
.crm-stat-strip > span:not(.crm-stat-method):not(.crm-stat-tag) {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.crm-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
}
.crm-stat-value {
  font-weight: 600;
  color: var(--color-text, #111);
}
.crm-stat-n--low .crm-stat-value {
  color: #c25e00;
}
.crm-stat-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(216, 153, 39, 0.18);
  color: #8a5a00;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Step 3 rollup tile — lives in the KPI strip alongside the existing
   KPI tiles but has no delta-pill / sparkline. Subtitle is a count
   of contributing insights instead. Tone class drives the accent. */
.crm-rollup-tile {
  border-left: 3px solid var(--color-border, #ddd);
}
.crm-rollup-tile.crm-tone-good    { border-left-color: #2c9966; }
.crm-rollup-tile.crm-tone-neutral { border-left-color: #888; }
.crm-rollup-tile.crm-tone-warn    { border-left-color: #c25e00; }
.crm-rollup-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted, #888);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Step 3 inbox rollup banner — compact pill-chip row above the
   filter rail. Each chip is one rollup number. */
.crm-inbox-rollup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}
.crm-inbox-rollup-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border, #ddd);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #111);
}
.crm-inbox-rollup-chip.crm-tone-good {
  background: rgba(34, 139, 90, 0.10);
  border-color: #2c9966;
  color: #1d6a3f;
}
.crm-inbox-rollup-chip.crm-tone-warn {
  background: rgba(194, 94, 0, 0.10);
  border-color: #c25e00;
  color: #8a4400;
}

/* Compact button size variants used by the brief card's header
   (Refresh / Hide) and the CTA. The base .crm-btn provides typography
   and border; xs/sm override padding + font-size only. */
.crm-btn-sm {
  padding: 5px 12px;
  font-size: 0.82rem;
}
.crm-btn-xs {
  padding: 3px 9px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* Step 5 — "This week's read" narrator brief card. Sits at the top of
   the inbox body. Visual weight is deliberately light so the rollup
   chips + filter rail below it stay readable. */
.crm-inbox-brief {
  margin: 4px 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 10px;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.6),
              rgba(0, 0, 0, 0.02));
}
.crm-inbox-brief-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.crm-inbox-brief-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
}
.crm-inbox-brief-head-actions {
  display: flex;
  gap: 6px;
}
.crm-inbox-brief-body { min-height: 28px; }

/* Empty-state CTA: "Generate this week's read" */
.crm-inbox-brief-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.crm-inbox-brief-cta-lede {
  font-size: 0.92rem;
  color: var(--color-text, #111);
}
.crm-inbox-brief-cta-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

/* Loading skeleton */
.crm-inbox-brief-skel {
  display: flex; flex-direction: column; gap: 6px; padding: 6px 0;
}
.crm-inbox-brief-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
              rgba(0,0,0,0.06), rgba(0,0,0,0.10), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: crm-brief-skel 1.2s linear infinite;
}
.crm-inbox-brief-skel-line:nth-child(2) { width: 92%; }
.crm-inbox-brief-skel-line:nth-child(3) { width: 78%; }
@keyframes crm-brief-skel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Error state */
.crm-inbox-brief-error {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
  color: var(--crm-sev-medium, #8a4400);
  font-size: 0.85rem;
}
.crm-inbox-brief-error-msg { flex: 1; }

/* Rendered content */
.crm-inbox-brief-content { display: flex; flex-direction: column; gap: 12px; }
.crm-inbox-brief-summary {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text, #111);
}
.crm-inbox-brief-paragraphs {
  display: flex; flex-direction: column; gap: 10px;
}
.crm-inbox-brief-para {
  padding: 10px 12px 10px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.025);
  border-left: 3px solid var(--color-border, #ddd);
}
/* Confidence accent — left border colour mirrors the verb's strength.
   Recommend → primary; suggest → neutral; watch → amber; wait → muted. */
.crm-inbox-brief-conf-high     { border-left-color: var(--color-primary, #117a55); }
.crm-inbox-brief-conf-medium   { border-left-color: #5b6470; }
.crm-inbox-brief-conf-low      { border-left-color: #c79100; }
.crm-inbox-brief-conf-very_low { border-left-color: #9a9a9a; }

.crm-inbox-brief-para-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.crm-inbox-brief-para-verb {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-muted, #888);
}
.crm-inbox-brief-conf-high     .crm-inbox-brief-para-verb {
  background: rgba(17, 122, 85, 0.14); color: #0a5a3f;
}
.crm-inbox-brief-conf-low      .crm-inbox-brief-para-verb {
  background: rgba(199, 145, 0, 0.14); color: #7d5a00;
}
.crm-inbox-brief-conf-very_low .crm-inbox-brief-para-verb {
  background: rgba(0, 0, 0, 0.06); color: #5a5a5a;
}
.crm-inbox-brief-para-headline {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text, #111);
  line-height: 1.35;
}
.crm-inbox-brief-para-body {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text, #222);
}
.crm-inbox-brief-cites {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.crm-inbox-brief-cite {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--color-border, #ddd);
  background: var(--color-surface-solid, #fff);
  color: var(--color-text-muted, #666);
  cursor: pointer;
  transition: all 0.14s ease;
}
.crm-inbox-brief-cite:hover {
  color: var(--color-text, #111);
  border-color: var(--color-text-muted, #888);
}

/* Caveats — small print at the bottom of the brief. */
.crm-inbox-brief-caveats {
  border-top: 1px dashed var(--color-border, #ddd);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.crm-inbox-brief-caveat {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted, #888);
  line-height: 1.4;
}

.crm-inbox-brief-stamp {
  font-size: 0.70rem;
  color: var(--color-text-muted, #999);
  text-align: right;
  letter-spacing: 0.02em;
}

/* Step 2 — trend chip on the collapsed inbox row. Inline next to the
   headline. Tone drives the colour: down = warn (red), up = good
   (green). Power-user tooltip carries the observation count. */
.crm-inbox-trend-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.crm-inbox-trend-chip.crm-tone-good {
  background: rgba(34, 139, 90, 0.12);
  color: #1d6a3f;
}
.crm-inbox-trend-chip.crm-tone-warn {
  background: rgba(194, 94, 0, 0.12);
  color: #8a4400;
}
.crm-inbox-trend-chip.crm-tone-neutral {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-muted, #777);
}
.crm-inbox-trend-chip.crm-tone-muted {
  background: transparent;
  color: var(--color-text-muted, #999);
  font-weight: 500;
  font-style: italic;
}

/* Step 2 — trend explanation card. Rendered in the expanded inbox
   row between the impact chip and the stat strip. Always present on
   per-ad insights so the user can see WHY the headline chip says
   what it says, without hovering. Three style variants by status. */
.crm-trend-card {
  margin: 4px 0 10px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #ddd);
}
.crm-trend-trending.crm-trend-card { background: rgba(0, 0, 0, 0.02); }
.crm-trend-steady.crm-trend-card   { background: rgba(0, 0, 0, 0.02); }
.crm-trend-insufficient.crm-trend-card,
.crm-trend-not_applicable.crm-trend-card,
.crm-trend-missing.crm-trend-card {
  background: rgba(0, 0, 0, 0.01);
  border-style: dashed;
}
.crm-trend-card-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
  font-weight: 700;
  margin-bottom: 4px;
}
.crm-trend-card-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.92rem;
}
.crm-trend-card-arrow {
  font-size: 1.1rem;
  font-weight: 700;
}
.crm-trend-card-text {
  font-weight: 500;
  color: var(--color-text, #111);
}
.crm-trend-card-hint {
  margin-top: 4px;
  font-size: 0.80rem;
  color: var(--color-text-muted, #777);
  line-height: 1.45;
}

/* Step A — Cross-signal Related chips inside the expanded row body.
   Sits between RECOMMENDATION and the Apply/Dismiss action row.
   Each chip is a small button that scrolls + pulses the sibling. */
.crm-inbox-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed var(--color-border, #ddd);
}
.crm-inbox-related-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
  font-weight: 700;
  margin-right: 4px;
}
.crm-inbox-related-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border, #ddd);
  color: var(--color-text, #111);
  cursor: pointer;
  transition: background 100ms ease, transform 100ms ease;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-inbox-related-chip:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
/* Tone variants — encode the action without saying it twice.
   pause / refresh = warn (something to remove or replace),
   scale = good (something to do more of),
   everything else = neutral. */
.crm-inbox-related-chip.crm-tone-good {
  background: rgba(34, 139, 90, 0.10);
  border-color: #2c9966;
  color: #1d6a3f;
}
.crm-inbox-related-chip.crm-tone-good:hover {
  background: rgba(34, 139, 90, 0.18);
}
.crm-inbox-related-chip.crm-tone-warn {
  background: rgba(194, 94, 0, 0.10);
  border-color: #c25e00;
  color: #8a4400;
}
.crm-inbox-related-chip.crm-tone-warn:hover {
  background: rgba(194, 94, 0, 0.18);
}
.crm-inbox-related-more {
  align-self: center;
  font-size: 0.78rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
  cursor: help;
  margin-left: 4px;
}

/* Step B — Floating "Ask the analyst" launcher.
   Bottom-right of the page when the CRM inbox is active. Click opens
   a slide-up drawer (the chat interface). */
.crm-analyst-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 998;
  padding: 12px 20px;
  border-radius: 999px;
  background: #2c1a0e;
  color: #fffaef;
  border: none;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.crm-analyst-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

/* Slide-up chat drawer. Anchored to bottom-right, takes ~480px wide
   and ~78vh tall on desktop. On narrow viewports collapses to full-
   width / full-height. */
.crm-analyst-drawer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: min(480px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.crm-analyst-head {
  position: relative;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--color-border, #e0d8c8);
  background: #fffaef;
}
.crm-analyst-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
  font-weight: 700;
}
.crm-analyst-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2px;
  padding-right: 90px;
}
.crm-analyst-head-actions {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crm-analyst-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted, #777);
}

/* Message list — flex-grow to fill drawer; scroll overflows. */
.crm-analyst-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg, #fff);
}
.crm-analyst-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.crm-analyst-bubble--user {
  align-self: flex-end;
  background: #2c1a0e;
  color: #fffaef;
  border-bottom-right-radius: 4px;
}
.crm-analyst-bubble--assistant {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text, #111);
  border-bottom-left-radius: 4px;
}
.crm-analyst-pending {
  opacity: 0.6;
  font-style: italic;
}
/* Markdown-lite formatting inside assistant bubbles. The bubble keeps
   pre-wrap so plain user text still respects newlines; the assistant
   body resets it so paragraph / list spacing comes from CSS instead. */
.crm-analyst-md {
  white-space: normal;
}
.crm-analyst-md > p,
.crm-analyst-md > ul,
.crm-analyst-md > ol {
  margin: 0 0 8px 0;
}
.crm-analyst-md > *:last-child {
  margin-bottom: 0;
}
.crm-analyst-md ul,
.crm-analyst-md ol {
  padding-left: 22px;
}
.crm-analyst-md li {
  margin: 2px 0;
}
.crm-analyst-md li::marker {
  color: var(--color-text-muted, #888);
}
.crm-analyst-md strong {
  font-weight: 600;
  color: #2c1a0e;
}
.crm-analyst-md-p {
  margin: 0;
}
/* Citation chips embedded in assistant messages. Inline-flex so they
   sit on the same line as the surrounding prose; click to scroll +
   pulse the source insight. */
.crm-analyst-cite {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(240, 121, 0, 0.10);
  border: 1px solid #f07900;
  color: #c96400;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
.crm-analyst-cite:hover {
  background: rgba(240, 121, 0, 0.20);
}
/* Tool-trace disclosure. Shows what data the agent consulted; users
   typically don't need it but it's there for transparency. */
.crm-analyst-trace {
  margin-bottom: 6px;
  font-size: 0.74rem;
  color: var(--color-text-muted, #888);
}
.crm-analyst-trace summary {
  cursor: pointer;
  font-style: italic;
}
.crm-analyst-trace-item {
  margin: 2px 0 0 12px;
  font-family: monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

/* Composer — textarea + send button. */
.crm-analyst-composer {
  display: flex;
  gap: 8px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--color-border, #e0d8c8);
  background: #fffaef;
}
.crm-analyst-input {
  flex: 1 1 auto;
  resize: none;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #d0c8b8);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  outline: none;
}
.crm-analyst-input:focus {
  border-color: #f07900;
  box-shadow: 0 0 0 2px rgba(240, 121, 0, 0.20);
}
/* Step B-stream — live tool-call trace at the top of an assistant
   bubble while text streams in below. Hidden until the first
   tool_call_start event arrives. */
.crm-analyst-stream-trace {
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.74rem;
  color: var(--color-text-muted, #888);
}
.crm-analyst-stream-tool {
  font-family: monospace;
  margin: 1px 0;
}
.crm-analyst-stream-tool--done {
  color: #1d6a3f;
}
.crm-analyst-stream-body {
  white-space: pre-wrap;
}
.crm-analyst-stream-error {
  color: #8a4400;
  font-style: italic;
}

.crm-analyst-hint {
  padding: 4px 18px 12px;
  font-size: 0.72rem;
  color: var(--color-text-muted, #999);
  font-style: italic;
  background: #fffaef;
  border-top: 1px solid var(--color-border, #f0e8d8);
}

/* Pulse highlight used by _jumpToInsight when the user clicks a
   Related chip. Fades the target row's outline in and out so it's
   visible without being garish. */
.crm-inbox-row--pulse {
  animation: crmInboxPulse 1.4s ease;
}
@keyframes crmInboxPulse {
  0%   { box-shadow: 0 0 0 0   rgba(240, 121,   0, 0.0);  }
  20%  { box-shadow: 0 0 0 6px rgba(240, 121,   0, 0.35); }
  60%  { box-shadow: 0 0 0 6px rgba(240, 121,   0, 0.15); }
  100% { box-shadow: 0 0 0 0   rgba(240, 121,   0, 0.0);  }
}

/* Clickable Health metric — same look as the other campaign-row
   metrics, just with a cursor + hover affordance. */
.crm-health-clickable {
  cursor: pointer;
  border-radius: 4px;
  transition: background 120ms ease;
}
.crm-health-clickable:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* "Why this score?" panel — slide-in centred modal. Triggered from
   the Health metric on a campaign row. Renders the 4-factor + 5-check
   + biggest-lever structured data immediately, and replaces the
   skeleton with the LLM explanation once it lands. */
.crm-health-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.36);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.crm-health-panel {
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-bg, #fff);
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
  padding: 22px 26px;
}
.crm-health-panel-head {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #ddd);
  margin-bottom: 14px;
}
.crm-health-panel-eyebrow {
  font-size: 0.70rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #777);
}
.crm-health-panel-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 4px;
  word-break: break-word;
}
.crm-health-panel-scoreline {
  display: flex; gap: 12px; align-items: baseline;
  margin-top: 8px;
}
.crm-health-panel-score {
  font-size: 1.8rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.crm-health-panel-score.crm-tone-good { color: #1d6a3f; }
.crm-health-panel-score.crm-tone-warn { color: #8a4400; }
.crm-health-panel-score.crm-tone-neutral { color: var(--color-text, #111); }
.crm-health-panel-confidence {
  font-size: 0.85rem;
  color: var(--color-text-muted, #777);
}
.crm-health-panel-close {
  position: absolute; top: -6px; right: -8px;
  width: 32px; height: 32px;
  background: transparent; border: none;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--color-text-muted, #777);
}

/* KPI line */
.crm-health-panel-kpi {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 0;
  margin-bottom: 6px;
}
.crm-health-panel-kpi-label {
  font-size: 0.85rem; color: var(--color-text-muted, #777);
  font-weight: 600;
}
.crm-health-panel-kpi-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.crm-health-panel-kpi-verdict {
  font-size: 0.85rem; color: var(--color-text-muted, #777);
  font-style: italic;
}

/* Section labels — match the inbox grid's eyebrow style */
.crm-health-panel-section-label {
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted, #777);
  margin: 14px 0 8px;
  font-weight: 700;
}
.crm-health-panel-explanation { margin-top: 6px; }
.crm-health-panel-explanation--loading .crm-health-panel-skeleton {
  font-style: italic; color: var(--color-text-muted, #888);
  padding: 6px 0;
}
.crm-health-panel-tldr {
  font-weight: 700; font-size: 1.05rem;
  margin: 6px 0 12px;
}
.crm-health-panel-para {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 10px;
}
.crm-health-panel-nextstep {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid #2c9966;
  background: rgba(34, 139, 90, 0.07);
  border-radius: 4px;
}
.crm-health-panel-nextstep-verb {
  display: inline-block;
  font-weight: 700; font-size: 0.70rem;
  letter-spacing: 0.10em;
  margin-right: 10px;
  color: #1d6a3f;
}
.crm-health-panel-nextstep-text {
  font-size: 0.95rem;
}
.crm-health-panel-trustnote {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted, #888);
  border-top: 1px dashed var(--color-border, #ddd);
}
.crm-health-panel-fallback {
  padding: 10px 0;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

/* Factor bars */
.crm-health-factor {
  display: grid;
  grid-template-columns: 110px 1fr 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.crm-health-factor-name {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: capitalize;
}
.crm-health-factor-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.crm-health-factor-fill {
  height: 100%;
  border-radius: 4px;
}
.crm-health-factor-fill.crm-tone-good    { background: #2c9966; }
.crm-health-factor-fill.crm-tone-neutral { background: #888; }
.crm-health-factor-fill.crm-tone-warn    { background: #c25e00; }
.crm-health-factor-score {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}
.crm-health-factor-verdict {
  font-size: 0.80rem;
  color: var(--color-text-muted, #777);
  font-style: italic;
}

/* Confidence checks */
.crm-health-panel-confidence-card { margin-top: 8px; }
.crm-health-panel-confidence-headline {
  font-size: 0.90rem;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}
.crm-health-check {
  display: grid;
  grid-template-columns: 24px 140px 1fr;
  gap: 10px;
  padding: 3px 0;
  align-items: baseline;
  font-size: 0.85rem;
}
.crm-health-check-icon {
  font-weight: 800;
  text-align: center;
}
.crm-health-check-icon.crm-tone-good { color: #1d6a3f; }
.crm-health-check-icon.crm-tone-warn { color: #c25e00; }
.crm-health-check-label {
  color: var(--color-text-muted, #777);
}
.crm-health-check-human {
  color: var(--color-text, #111);
  font-variant-numeric: tabular-nums;
}

/* Biggest-lever pointer */
.crm-health-panel-lever {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
}
.crm-health-panel-lever-rationale {
  font-size: 0.92rem;
  line-height: 1.5;
}
.crm-health-panel-lever-delta {
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1d6a3f;
}
.crm-health-panel-lever-guardrail {
  margin-top: 6px;
  font-size: 0.82rem;
  color: #8a4400;
  font-style: italic;
}

/* Insights header: right-side action row (Regenerate button) */
.crm-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Import campaigns modal ─────────────────────────────────────────── */
.modal-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.modal-form-label {
  flex: 0 0 110px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #555);
  letter-spacing: 0.02em;
}
.modal-form-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--radius-md, 6px);
  background: var(--color-surface, #fff);
  font: inherit;
}
.modal-form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.import-content {
  margin: 12px 0;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--radius-md, 6px);
}
.import-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface-2, #f7f5f1);
  border-bottom: 1px solid var(--color-border, #ddd);
  font-size: 0.85rem;
  font-weight: 600;
}
.import-list { padding: 4px 0; }
.import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-soft, #eee);
}
.import-row:hover { background: var(--color-surface-2, #f7f5f1); }
.import-row.selected { background: #ebf7ee; }
.import-row-info { flex: 1; min-width: 0; }
.import-row-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-row-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  margin-top: 2px;
}

/* Inline help text for the import-modal preset row. */
.modal-form-help {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  margin: -4px 0 8px 122px;   /* aligns under the input, past the label */
  line-height: 1.4;
}

/* ── Import campaigns: floating background-job widget ───────────────────
   Pinned bottom-right while a Meta import runs in the background. Polls
   /import-campaigns/{job_id} every 2s and shows a live progress bar,
   the runner's status message, and Meta's rate-limit countdown when
   we're sleeping between retries. The user can navigate freely while
   this is on screen. Sized to be informative without dominating.
*/
.import-widget-host {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1500;          /* above modals' backdrop but visually peripheral */
  pointer-events: none;   /* let mouse-through to widgets only */
}

.import-widget {
  pointer-events: auto;
  width: 320px;
  background: var(--color-surface-solid, #fff);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(43, 24, 16, 0.18),
              0 2px 6px rgba(43, 24, 16, 0.08);
  font-size: 0.92rem;
  color: var(--color-text);
}

.import-widget-done   { border-left-color: var(--color-forest, #5B9279); }
.import-widget-failed { border-left-color: var(--color-coral, #FF6B4A); }

.import-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.import-widget-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.import-widget-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.import-widget-close,
.import-widget-min {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.import-widget-close:hover,
.import-widget-min:hover { background: var(--color-bg-2); color: var(--color-text); }

/* The minimize glyph is an em-dash — slightly smaller and nudged up so
   it visually centers as a "—" instead of a dropped baseline. */
.import-widget-min {
  font-size: 1.1rem;
  padding-bottom: 4px;
}

.import-widget-bar {
  height: 8px;
  background: var(--color-bg-2);
  border-radius: 6px;
  overflow: hidden;
  margin: 6px 0 4px;
}

.import-widget-bar-fill {
  height: 100%;
  background: var(--color-primary);
  /* Animate width changes — bar grows smoothly between polls instead of
     snapping. 400ms is just long enough to feel responsive. */
  transition: width 0.4s ease-out;
}

.import-widget-done .import-widget-bar-fill   { background: var(--color-forest, #5B9279); }
.import-widget-failed .import-widget-bar-fill { background: var(--color-coral, #FF6B4A); }

.import-widget-counts {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.import-widget-message {
  font-size: 0.88rem;
  line-height: 1.4;
  margin-top: 4px;
}

.import-widget-eta {
  font-size: 0.78rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 4px;
}

.import-widget-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* Compact button variant used by the widget's terminal-state actions
   and the failures modal close button. Inherits the existing
   .btn-primary / .btn-ghost colour scheme; just shrinks padding. */
.btn-small {
  padding: 5px 12px;
  font-size: 0.82rem;
  border-radius: 6px;
}

/* Failures modal — a simple read-only list of {campaign_id, error}.
   Triggered from the widget's "View failures" button on completion. */
.import-failures-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 10px 0 16px;
}

.import-failures-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.85rem;
}
.import-failures-row:last-child { border-bottom: none; }

.import-failures-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  word-break: break-all;
}

.import-failures-err {
  color: var(--color-text);
  line-height: 1.4;
}

/* ── Collapsed "pill" state ───────────────────────────────────────────
   The import widget can collapse into a compact pill that the user
   can carry around the app while an import runs in the background.
   Shows the live counters directly (no hover) plus a status dot.
   Click anywhere on the pill body to expand back to the full panel;
   the × dismisses outright. */
.import-widget.import-widget-pill {
  /* Override the expanded panel's box shape. The pill is one row of
     content with a coloured dot, the counter text, and a tiny ×. */
  width: auto;
  max-width: 240px;
  padding: 7px 8px 7px 12px;
  border-left-width: 1px;        /* drop the 4px accent stripe */
  border-radius: 999px;          /* fully rounded pill */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  /* Subtle hover lift so users notice the pill is interactive without
     it competing with real content. */
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.import-widget.import-widget-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(43, 24, 16, 0.22),
              0 3px 8px rgba(43, 24, 16, 0.10);
}

.import-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  /* The running variant adds a pulse via keyframes below; other
     variants stay static. Default colour mirrors --color-primary so
     the dot reads as "import-related" even before status resolves. */
  background: var(--color-primary);
}

.import-pill-dot-running {
  background: var(--color-primary);
  /* The pulse is a soft ring expanding from the dot — communicates
     "active" without the dot itself flashing (which would feel noisy
     when read in the user's peripheral vision while they work).
     `--color-primary-light` is already declared per-theme so the
     pulse picks up the right warm-orange in both light and dark. */
  animation: import-pill-pulse 1.6s ease-out infinite;
}

.import-pill-dot-done   { background: var(--color-forest, #5B9279); }
.import-pill-dot-failed { background: var(--color-coral,  #FF6B4A); }
.import-pill-dot-queued { background: var(--color-text-muted); }

@keyframes import-pill-pulse {
  /* Two-phase: the ring fades from full at 0 spread to transparent at
     ~10px spread, then resets. The dot's own colour stays solid; only
     the expanding halo animates. */
  0%   { box-shadow: 0 0 0 0    var(--color-primary-light); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0    rgba(0, 0, 0, 0); }
}

.import-pill-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Tabular figures so the counter doesn't jitter horizontally as
     digits change width (e.g., 9→10→23 in "9/23"). */
  font-variant-numeric: tabular-nums;
}

/* The × inside the pill — smaller than the expanded panel's close
   so it doesn't dominate the small pill width. stopPropagation is
   handled in the click handler so clicking × dismisses without
   bubbling up to the expand-on-click on the pill body. */
.import-pill-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.import-pill-close:hover {
  background: var(--color-bg-2);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .import-widget-bar-fill { transition: none; }
  /* Keep the dot coloured but skip the pulse animation — users with
     reduced-motion preferences shouldn't see a continuous ripple in
     their peripheral vision. */
  .import-pill-dot-running { animation: none; box-shadow: none; }
  .import-widget.import-widget-pill { transition: none; }
  .import-widget.import-widget-pill:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Insights v2 — kanban Action board · clickable brief · KPI tiles · rich
   filter strip · lazy LLM detailed-explain panel · bulk-apply modal.
   All selectors namespaced `iv2-*` so they can't collide with the older
   `.crm-inbox-*` styles still living in this file.
   ═══════════════════════════════════════════════════════════════════════ */

.iv2-root {
  display: flex; flex-direction: column; gap: 24px;
}
.iv2-empty {
  padding: 32px; text-align: center; color: var(--color-text-muted);
  font-style: italic;
}

/* ── Section heads ────────────────────────────────────────────────── */
.iv2-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 0 0;
}
.iv2-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-text);
}

/* ── This week's read (narrator brief) ────────────────────────────── */
.iv2-brief {
  background: linear-gradient(180deg, var(--color-surface-solid) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 18px);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}
.iv2-brief-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.iv2-brief-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-oxblood-deep);
}
.iv2-brief-head-actions { display: flex; gap: 6px; }
.iv2-brief-body { min-height: 28px; }

.iv2-brief-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.iv2-brief-cta-lede { font-size: 0.96rem; color: var(--color-text); }
.iv2-brief-cta-hint {
  font-size: 0.88rem; color: var(--color-text-muted); font-style: italic;
}

.iv2-brief-skel { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.iv2-ai-loading-hint, .iv2-brief-loading-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px;
}
.iv2-ai-loading-hint::before, .iv2-brief-loading-hint::before {
  content: "✨"; animation: iv2-pulse 1.4s ease-in-out infinite;
}
@keyframes iv2-pulse { 50% { opacity: 0.35; } }
.iv2-brief-skel-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(43,24,16,0.06), rgba(43,24,16,0.12), rgba(43,24,16,0.06));
  background-size: 200% 100%;
  animation: iv2-shimmer 1.2s linear infinite;
}
.iv2-brief-skel-line:nth-child(2) { width: 92%; }
.iv2-brief-skel-line:nth-child(3) { width: 78%; }
@keyframes iv2-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.iv2-brief-error {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-coral-lo); font-size: 0.88rem;
}

.iv2-brief-content { display: flex; flex-direction: column; gap: 14px; }
.iv2-brief-summary {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--color-text);
  letter-spacing: -0.005em;
}

.iv2-brief-paras { display: flex; flex-direction: column; gap: 10px; }
.iv2-brief-para {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 12px 14px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 12px);
  transition: background 160ms ease, border-color 160ms ease;
}
.iv2-brief-para--applied {
  background: linear-gradient(180deg, rgba(91,146,121,0.06), rgba(91,146,121,0.10));
  border-color: rgba(91,146,121,0.40);
}
.iv2-brief-para-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.iv2-brief-para-headline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv2-brief-headline { font-weight: 600; color: var(--color-text); font-size: 0.95rem; line-height: 1.35; }
.iv2-brief-body-text {
  margin: 0; font-size: 0.84rem; line-height: 1.5;
  color: var(--color-text); padding-left: 0;
}
.iv2-brief-verb {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  background: rgba(43,24,16,0.06); color: var(--color-text-muted);
}
.iv2-brief-verb--recommend { background: rgba(91,146,121,0.18); color: #2e6147; }
.iv2-brief-verb--suggest   { background: rgba(242,181,68,0.22); color: #87600c; }
.iv2-brief-verb--watch     { background: rgba(168,159,148,0.25); color: #5c5247; }
.iv2-brief-verb--wait      { background: rgba(43,24,16,0.08);    color: var(--color-text-muted); }

.iv2-brief-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iv2-brief-para-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.iv2-brief-applied-flag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--color-success);
}

.iv2-brief-caveats {
  border-top: 1px dashed var(--color-divider);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.iv2-brief-caveat {
  font-size: 0.78rem; font-style: italic;
  color: var(--color-text-muted); line-height: 1.4;
}
.iv2-brief-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 4px; padding-top: 12px;
  border-top: 1px dashed var(--color-divider);
  flex-wrap: wrap;
}
.iv2-brief-stamp { font-size: 11px; color: var(--color-text-faint); }
.iv2-brief-foot-actions { display: flex; gap: 6px; }

/* ── Action chips (used in brief paragraphs AND elsewhere) ────────── */
.iv2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg-2);
  font: 600 12px/1 var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  transition: all 140ms ease;
  max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv2-chip:hover {
  background: var(--color-surface-solid);
  border-color: var(--color-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.iv2-chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; flex-shrink: 0;
}
.iv2-chip-check { color: var(--color-success); font-weight: 800; margin-left: 2px; }
.iv2-chip--pause    .iv2-chip-icon { background: rgba(255,107,74,0.22); color: var(--color-coral-lo); }
.iv2-chip--boost    .iv2-chip-icon { background: rgba(91,146,121,0.22); color: #2e6147; }
.iv2-chip--audience .iv2-chip-icon { background: rgba(240,121,0,0.22);  color: var(--color-oxblood-deep); }
.iv2-chip--refresh  .iv2-chip-icon { background: rgba(242,181,68,0.30); color: #87600c; }
.iv2-chip--watch    .iv2-chip-icon { background: rgba(168,159,148,0.30); color: var(--color-text-muted); }
.iv2-chip--applied {
  background: rgba(91,146,121,0.15);
  border-color: var(--color-success);
  color: #2e6147; cursor: default;
}
.iv2-chip--applied .iv2-chip-icon { background: var(--color-success); color: #fff; }
.iv2-chip--applied:hover { transform: none; box-shadow: none; }
.iv2-chip--applying {
  background: var(--color-surface-solid);
  border-color: var(--color-primary);
  color: var(--color-oxblood-deep);
}
.iv2-chip--applying .iv2-chip-icon { animation: iv2-spin 1s linear infinite; }
@keyframes iv2-spin { to { transform: rotate(360deg); } }

/* ── Small button variants used by v2 ─────────────────────────────── */
.iv2-btn-sm { padding: 6px 12px; font-size: 12px; }
.iv2-btn-xs { padding: 4px 10px; font-size: 11px; letter-spacing: 0.02em; }
.iv2-btn-disabled { opacity: 0.45; cursor: not-allowed; }

/* ── At-a-glance KPI tiles ────────────────────────────────────────── */
.iv2-glance {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.iv2-tile {
  padding: 18px 18px 16px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.iv2-tile-icon {
  position: absolute; top: 14px; right: 14px;
  font-size: 22px; opacity: 0.30;
}
.iv2-tile-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.iv2-tile-value {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600; color: var(--color-text);
  letter-spacing: -0.015em; line-height: 1.1;
}
.iv2-tile-value-sub { font-size: 16px; color: var(--color-text-muted); }
.iv2-tile-sub { font-size: 12px; color: var(--color-text-muted); }
.iv2-tile-good .iv2-tile-value { color: var(--color-success); }
.iv2-tile-warn .iv2-tile-value { color: var(--color-oxblood-deep); }
.iv2-tile-apply {
  background: linear-gradient(135deg, var(--color-oxblood) 0%, var(--color-oxblood-deep) 100%);
  color: var(--color-on-primary); border-color: var(--color-oxblood-deep);
}
.iv2-tile-apply .iv2-tile-label,
.iv2-tile-apply .iv2-tile-sub  { color: rgba(255,254,248,0.85); }
.iv2-tile-apply .iv2-tile-value { color: var(--color-on-primary); }
.iv2-tile-apply--clickable { cursor: pointer; }
.iv2-tile-apply--clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ── Rich filter strip ────────────────────────────────────────────── */
.iv2-filters {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm);
}
.iv2-filter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.iv2-filter-row-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-faint); width: 72px;
}
.iv2-seg {
  display: inline-flex; background: var(--color-bg-2);
  border: 1px solid var(--color-divider);
  border-radius: 999px; padding: 3px;
}
.iv2-seg button {
  padding: 6px 13px; border: none; background: transparent;
  font: 600 12px/1 var(--font-body); color: var(--color-text-muted);
  border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 140ms ease;
}
.iv2-seg button:hover { color: var(--color-text); }
.iv2-seg button.iv2-seg-on {
  background: var(--color-surface-solid); color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.iv2-seg-ct {
  display: inline-block; font-size: 10px; font-weight: 800; opacity: 0.7;
  padding: 1px 6px; border-radius: 999px; background: rgba(43,24,16,0.08);
}
.iv2-seg button.iv2-seg-on .iv2-seg-ct {
  background: var(--color-primary); color: var(--color-on-primary); opacity: 1;
}

.iv2-chip-row { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.iv2-chip-filter {
  padding: 5px 11px;
  font: 600 12px/1 var(--font-body);
  border-radius: 999px;
  background: var(--color-bg-2); color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 140ms ease;
}
.iv2-chip-filter:hover { color: var(--color-text); border-color: var(--color-text); }
.iv2-chip-ct { font-size: 10px; opacity: 0.7; }
.iv2-chip-filter-on {
  background: var(--color-text); color: var(--color-on-primary); border-color: var(--color-text);
}
.iv2-chip-filter-on .iv2-chip-ct { opacity: 1; }
.iv2-chip-filter--solid.iv2-chip-filter-on { background: #2e6147; border-color: #2e6147; }
.iv2-chip-filter--early.iv2-chip-filter-on { background: #87600c; border-color: #87600c; }

.iv2-search-box {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 6px 12px; min-width: 220px;
}
.iv2-search-box::before { content: "🔍"; opacity: 0.5; font-size: 12px; }
.iv2-search-box input {
  border: none; outline: none; background: transparent;
  font: 500 13px/1 var(--font-body); color: var(--color-text);
  flex: 1; min-width: 0;
}
.iv2-inline-select {
  appearance: none; -webkit-appearance: none;
  padding: 6px 30px 6px 11px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font: 600 12px/1 var(--font-body); color: var(--color-text);
  cursor: pointer;
  background-image: 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 5l3 3 3-3' stroke='%236b5a4f' fill='none' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.iv2-inline-select:hover { border-color: var(--color-text); }
.iv2-filter-spacer { flex: 1; }
.iv2-filter-result-count {
  font-size: 12px; color: var(--color-text-muted);
}

.iv2-filter-active-row {
  border-top: 1px dashed var(--color-divider);
  padding-top: 10px;
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--color-text-muted);
}
.iv2-filter-active-label { font-weight: 700; }
.iv2-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px;
  background: var(--color-oxblood-deep); color: var(--color-on-primary);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.iv2-filter-pill-x {
  background: rgba(255,254,248,0.20); color: var(--color-on-primary);
  border: none; border-radius: 50%;
  width: 16px; height: 16px; font: 700 12px/1 var(--font-body);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iv2-filter-pill-x:hover { background: rgba(255,254,248,0.35); }
.iv2-filter-clear-all { color: var(--color-oxblood-deep); font-weight: 700; cursor: pointer; }
.iv2-filter-clear-all:hover { text-decoration: underline; }

/* ── Kanban Action board ──────────────────────────────────────────── */
.iv2-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.iv2-col {
  background: var(--color-bg-2);
  border-radius: var(--radius-md, 12px);
  padding: 12px;
  min-height: 200px;
}
.iv2-col[data-bucket="watch"] { background: rgba(168,159,148,0.12); }
.iv2-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 10px;
}
.iv2-col-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.10em;
  color: var(--color-text);
}
.iv2-col-icon { font-size: 16px; }
.iv2-col[data-bucket="pause"]    .iv2-col-icon { color: var(--color-coral); }
.iv2-col[data-bucket="boost"]    .iv2-col-icon { color: var(--color-success); }
.iv2-col[data-bucket="audience"] .iv2-col-icon { color: var(--color-primary); }
.iv2-col[data-bucket="refresh"]  .iv2-col-icon { color: var(--color-mustard); }
.iv2-col[data-bucket="watch"]    .iv2-col-icon { color: var(--color-text-muted); }
.iv2-col-count {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--color-surface-solid); color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
}
.iv2-cards { display: flex; flex-direction: column; gap: 10px; }
.iv2-col-empty {
  display: flex; align-items: center; justify-content: center;
  height: 80px; color: var(--color-text-faint); font-size: 13px; font-style: italic;
  border: 1px dashed var(--color-divider); border-radius: var(--radius-sm, 8px);
}

/* ── Insight card ─────────────────────────────────────────────────── */
.iv2-card {
  background: var(--color-surface-solid);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px 10px;
  border: 1px solid transparent;
  border-left: 4px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  cursor: default;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  position: relative;
}
.iv2-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.iv2-card-sev-high   { border-left-color: var(--color-coral); }
.iv2-card-sev-medium { border-left-color: var(--color-mustard); }
.iv2-card-sev-low    { border-left-color: var(--color-success); }
.iv2-card-sev-info   { border-left-color: var(--color-text-faint); }

.iv2-card--cued { animation: iv2-cue 1.4s ease-out; }
@keyframes iv2-cue {
  0%   { background: rgba(242,181,68,0.45); transform: scale(1.01); }
  100% { background: var(--color-surface-solid); transform: scale(1); }
}
.iv2-card--related-cued { box-shadow: 0 0 0 3px rgba(240,121,0,0.45), var(--shadow-md); }
.iv2-card--applied {
  border-left-color: var(--color-success) !important;
  background: linear-gradient(180deg, rgba(91,146,121,0.05), rgba(91,146,121,0.12));
}
.iv2-card--applied::after {
  content: "✓ APPLIED";
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  color: #fff; background: var(--color-success);
  padding: 3px 8px; border-radius: 4px;
}
.iv2-card--applying::after {
  content: "APPLYING…";
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  color: var(--color-oxblood-deep); background: rgba(240,121,0,0.18);
  padding: 3px 8px; border-radius: 4px;
}
.iv2-card--failed::after {
  content: "✕ FAILED";
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  color: #fff; background: var(--color-coral-lo);
  padding: 3px 8px; border-radius: 4px;
}

.iv2-card-target {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-text-muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv2-card-headline {
  font-weight: 600; color: var(--color-text); font-size: 14px;
  margin: 4px 0 8px; line-height: 1.35;
}
.iv2-card-why {
  font-size: 12px; line-height: 1.4; color: var(--color-text-muted);
  font-style: italic; margin: 0 0 10px;
  padding-left: 8px; border-left: 2px solid var(--color-divider);
}

.iv2-card-mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: var(--color-bg-2); border-radius: 6px;
  padding: 8px 6px; margin-bottom: 10px;
}
.iv2-card-mini-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.iv2-card-mini-v {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--color-text); letter-spacing: -0.01em; line-height: 1;
}
.iv2-tone-good { color: var(--color-success); }
.iv2-tone-bad  { color: var(--color-coral-lo); }
.iv2-card-mini-l {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-faint);
}

.iv2-card-cluster {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(240,121,0,0.10); color: var(--color-oxblood-deep);
  border: 1px solid rgba(240,121,0,0.25);
  cursor: pointer; margin-bottom: 10px;
  transition: all 140ms ease;
}
.iv2-card-cluster:hover {
  background: rgba(240,121,0,0.18); border-color: var(--color-primary);
}
.iv2-card-cluster-icon { font-size: 11px; }

.iv2-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; border-top: 1px dashed var(--color-divider);
}
.iv2-card-conf-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.iv2-card-conf-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-text-faint);
}
.iv2-card-conf-solid .iv2-card-conf-dot { color: #2e6147; }
.iv2-card-conf-solid .iv2-card-conf-dot::before { background: var(--color-success); }
.iv2-card-conf-early .iv2-card-conf-dot { color: #87600c; }
.iv2-card-conf-early .iv2-card-conf-dot::before { background: var(--color-mustard); }

.iv2-card-foot-right { display: flex; align-items: center; gap: 8px; }
.iv2-card-expand-toggle {
  font: 700 11px/1 var(--font-body); color: var(--color-text-muted);
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 4px 6px;
}
.iv2-card-expand-toggle:hover { color: var(--color-text); }
.iv2-chev { display: inline-block; transition: transform 160ms ease; }
.iv2-card--expanded .iv2-card-expand-toggle .iv2-chev { transform: rotate(90deg); }
.iv2-card-done     { font-size: 11px; font-weight: 700; color: #2e6147; }
.iv2-card-progress { font-size: 11px; font-weight: 700; color: var(--color-oxblood-deep); }

/* ── LLM explain panel inside expanded card ───────────────────────── */
.iv2-card-explain { display: none; margin: 10px 0; }
.iv2-card--expanded .iv2-card-explain {
  display: block;
  padding: 12px 14px;
  background: var(--color-bg-2);
  border-radius: 6px;
  font-size: 12px; line-height: 1.55; color: var(--color-text);
}
.iv2-ai-skel { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.iv2-ai-skel-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px;
}
.iv2-ai-skel-hint::before { content: "✨"; animation: iv2-pulse 1.4s ease-in-out infinite; }
.iv2-ai-skel-line {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(43,24,16,0.05), rgba(43,24,16,0.12), rgba(43,24,16,0.05));
  background-size: 200% 100%;
  animation: iv2-shimmer 1.2s linear infinite;
}
.iv2-ai-skel-line:nth-child(2) { width: 92%; }
.iv2-ai-skel-line:nth-child(3) { width: 80%; }
.iv2-ai-skel-line:nth-child(4) { width: 88%; }
.iv2-ai-skel-line:nth-child(5) { width: 65%; }

.iv2-ai-body p { margin: 0 0 4px; }
.iv2-ai-body ul { margin: 4px 0 0; padding-left: 16px; }
.iv2-ai-body li { margin-bottom: 2px; }
.iv2-ai-body code {
  background: var(--color-surface-solid);
  padding: 1px 5px; border-radius: 4px;
  font: 600 11px/1.4 var(--font-mono); color: var(--color-text);
}
.iv2-ai-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-oxblood-deep); margin-top: 12px; margin-bottom: 4px;
}
.iv2-ai-section-label:first-child { margin-top: 0; }
.iv2-ai-siblings { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.iv2-ai-sibling {
  font-size: 11px; padding: 3px 8px;
  background: var(--color-surface-solid); border: 1px solid var(--color-divider);
  border-radius: 999px; cursor: pointer;
}
.iv2-ai-sibling:hover { border-color: var(--color-text); }
.iv2-ai-attribution {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px dashed var(--color-divider);
  font-size: 11px; color: var(--color-text-muted);
}
.iv2-ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700;
}
.iv2-ai-badge::before { content: "✨"; font-size: 12px; }
.iv2-ai-actions { display: flex; gap: 6px; }
.iv2-ai-actions button {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-oxblood-deep); font-weight: 700; font-size: 11px;
}
.iv2-ai-actions button:hover { text-decoration: underline; }
.iv2-ai-error { color: var(--color-coral-lo); font-style: italic; margin-bottom: 6px; }

/* ── Confirm strip (single apply) ─────────────────────────────────── */
.iv2-confirm-strip {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 14px;
  background: var(--color-text); color: var(--color-on-primary);
  padding: 12px 16px; border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg);
  z-index: 200; max-width: 92vw;
}
.iv2-confirm-strip--open { display: flex; }
.iv2-confirm-q { font-size: 14px; font-weight: 500; }
.iv2-confirm-q b { color: #ffd6a5; font-weight: 700; }
.iv2-confirm-actions { display: flex; gap: 6px; }

/* ── Bulk-apply preview modal ─────────────────────────────────────── */
.iv2-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(43,24,16,0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 300; backdrop-filter: blur(2px);
}
.iv2-modal-overlay--open { display: flex; }
.iv2-modal {
  width: 100%; max-width: 760px; max-height: 86vh;
  background: var(--color-surface-solid);
  border-radius: var(--radius-lg, 18px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.iv2-modal-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--color-divider); }
.iv2-modal-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.iv2-modal-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-text);
}
.iv2-modal-sub { color: var(--color-text-muted); font-size: 13px; margin-top: 4px; }
.iv2-modal-body { padding: 16px 26px; overflow-y: auto; flex: 1; }
.iv2-modal-foot {
  padding: 16px 26px; border-top: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-bg-2);
}
.iv2-modal-foot-left { font-size: 13px; color: var(--color-text-muted); }
.iv2-modal-foot-actions { display: flex; gap: 8px; }

.iv2-preview-row {
  display: grid;
  grid-template-columns: 28px 120px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-divider);
}
.iv2-preview-row:last-child { border-bottom: none; }
.iv2-preview-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer;
}
.iv2-preview-skip-tick {
  font-size: 14px; color: var(--color-text-faint); text-align: center;
}
.iv2-preview-action {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.iv2-preview-action-icon { font-size: 14px; }
.iv2-preview-target {
  font-size: 11px; color: var(--color-text-muted); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600;
}
.iv2-preview-headline { font-weight: 600; color: var(--color-text); font-size: 14px; line-height: 1.3; }
.iv2-preview-note { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; font-style: italic; }
.iv2-preview-impact {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: #2e6147; white-space: nowrap;
}
.iv2-preview-impact--neutral { color: var(--color-text-muted); }
.iv2-preview-row--skipped { opacity: 0.5; background: var(--color-bg-2); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .iv2-board { grid-template-columns: repeat(3, 1fr); }
  .iv2-glance { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .iv2-board { grid-template-columns: repeat(2, 1fr); }
  .iv2-filter-row-label { width: auto; }
}
@media (max-width: 600px) {
  .iv2-board, .iv2-glance { grid-template-columns: 1fr; }
  .iv2-brief-para { grid-template-columns: 1fr; }
  .iv2-brief-summary { font-size: 17px; }
}

/* ──────────────────────────────────────────────────────────────────────── */
/*  Organic Content tab — cadence chat + calendar grid + review modal       */
/* ──────────────────────────────────────────────────────────────────────── */

#organicCanvas { padding: 16px; }

/* Topbar — title + action buttons */
.organic-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.organic-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
}
.organic-topbar-actions { display: flex; gap: 8px; }

.organic-empty {
  padding: 32px;
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Cadence chat surface ─────────────────────────────────────────────── */
.organic-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.organic-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.organic-chat-message {
  display: flex;
  width: 100%;
}
.organic-chat-message.user { justify-content: flex-end; }
.organic-chat-message.assistant { justify-content: flex-start; }
.organic-chat-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 14px;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 14px;
}
.organic-chat-message.user .organic-chat-bubble {
  background: var(--color-primary, #2b6cb0);
  color: white;
  border-bottom-right-radius: 4px;
}
.organic-chat-message.assistant .organic-chat-bubble {
  background: var(--color-surface-2, #f1f5f9);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}
.organic-chat-message.assistant.pending .organic-chat-bubble {
  font-style: italic;
  color: var(--color-text-muted);
}
/* Streaming caret on the in-progress assistant bubble. The bubble
   itself keeps growing as text deltas arrive; the caret marks
   where the next token will land. */
.organic-chat-bubble.streaming::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: var(--color-text-muted);
  animation: organic-caret-blink 1s steps(2, start) infinite;
}
@keyframes organic-caret-blink {
  to { visibility: hidden; }
}

/* Plan-confirmation card — shown under the chat log after the agent
   commits a plan. The user must click "Generate content" to actually
   start producing drafts. */
.organic-plan-card {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2, #f1f5f9);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.organic-plan-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.organic-plan-card-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.organic-plan-stat {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border);
  font-size: 13px;
}
.organic-plan-stat.total {
  background: var(--color-primary, #2b6cb0);
  color: white;
  border-color: transparent;
}
.organic-plan-stat.total span { color: white; }
.organic-plan-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.organic-plan-meta-label {
  font-weight: 600;
  color: var(--color-text);
}
.organic-plan-card-rationale {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
  padding: 8px 10px;
  background: var(--color-surface, #ffffff);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary, #2b6cb0);
}
.organic-plan-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.organic-chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-border);
}
.organic-chat-textarea {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 44px;
}
.organic-chat-textarea:focus {
  outline: 2px solid var(--color-primary, #2b6cb0);
  outline-offset: -1px;
}

/* ── Calendar surface ─────────────────────────────────────────────────── */
.organic-calendar { display: flex; flex-direction: column; gap: 12px; }

.organic-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.organic-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.organic-month-label {
  font-size: 18px;
  font-weight: 600;
  min-width: 180px;
  text-align: center;
}
.btn-icon { padding: 4px 10px; font-size: 16px; }

.organic-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.organic-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.organic-filter-chip {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 13px;
}

.organic-summary-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.organic-summary-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-surface-2, #f1f5f9);
  font-size: 13px;
}
.organic-summary-chip strong { margin-right: 4px; }
.organic-summary-chip.total { background: var(--color-primary, #2b6cb0); color: white; }
.organic-summary-chip.status-draft     { background: #e2e8f0; color: #475569; }
.organic-summary-chip.status-approved  { background: #dcfce7; color: #166534; }
.organic-summary-chip.status-published { background: #c7d2fe; color: #3730a3; }
.organic-summary-chip.status-failed    { background: #fecaca; color: #991b1b; }
.organic-summary-chip.status-stale     { background: #fde68a; color: #854d0e; }
.organic-summary-chip.status-rejected  { background: #fbcfe8; color: #9d174d; }

/* ── "Creating your content calendar" surface ────────────────────────── */
.organic-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  min-height: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  gap: 4px;
}
.organic-generating-title {
  margin: 16px 0 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
}
.organic-generating-eta {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 6px 0 0;
}
.organic-generating-sub {
  max-width: 520px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 8px 0 0;
}
.organic-generating-peek {
  margin-top: 22px;
}

/* Heartbeat — double-pulse like a real heartbeat. The outer ring
   sits behind the solid dot and pulses on a 1.2s loop. */
.organic-heartbeat {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary, #2b6cb0);
  position: relative;
  animation: organic-heartbeat-core 1.2s ease-in-out infinite;
}
.organic-heartbeat::before,
.organic-heartbeat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary, #2b6cb0);
  opacity: 0.5;
  animation: organic-heartbeat-ring 1.2s ease-out infinite;
}
.organic-heartbeat::after { animation-delay: 0.6s; }

@keyframes organic-heartbeat-core {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.15); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.1); }
  60%      { transform: scale(1); }
}
@keyframes organic-heartbeat-ring {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Compact inline heartbeat for the "still working" footer on the
   calendar view (when the user peeked mid-generation). */
.organic-heartbeat-small {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-primary, #2b6cb0);
  animation: organic-heartbeat-core 1.2s ease-in-out infinite;
}

.organic-still-working {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f0f9ff;
  color: #075985;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid #bae6fd;
}

/* Month grid */
.organic-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.organic-dow {
  padding: 8px 12px;
  background: var(--color-surface-2, #f8fafc);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.organic-day-cell {
  min-height: 120px;
  padding: 6px 8px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.organic-day-cell.empty { background: var(--color-surface-2, #f8fafc); }

/* TODAY highlight — prominent so the user immediately spots where
   "now" sits in the 4-week window. Inner border so the cell pops
   without shifting layout; tinted background for at-a-glance. */
.organic-day-cell.today {
  background: linear-gradient(180deg, #fef3c7 0%, #fffbeb 100%);
  box-shadow: inset 0 0 0 2px #f59e0b;
  position: relative;
}

.organic-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.organic-day-month {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.organic-day-cell.today .organic-day-num { color: #92400e; }
.organic-day-today-pill {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: #f59e0b;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Post cards inside day cells */
.organic-post-card {
  border-left: 3px solid var(--color-border);
  padding: 6px 8px;
  background: var(--color-surface-2, #f8fafc);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.organic-post-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.organic-post-card.status-draft      { border-left-color: #94a3b8; }
.organic-post-card.status-approved   { border-left-color: #22c55e; background: #f0fdf4; }
.organic-post-card.status-publishing { border-left-color: #6366f1; }
.organic-post-card.status-published  { border-left-color: #4338ca; background: #eef2ff; }
.organic-post-card.status-failed     { border-left-color: #ef4444; background: #fef2f2; }
.organic-post-card.status-stale      { border-left-color: #f59e0b; background: #fffbeb; }
.organic-post-card.status-rejected   { border-left-color: #db2777; background: #fdf2f8; opacity: 0.7; }

.organic-post-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.organic-post-card-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.organic-post-card-hook {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.organic-modal-title {
  margin: 12px 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

/* Promotion / boost */
.organic-boost-banner {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-surface-2, #f3f4f6);
  color: var(--color-text);
}
.organic-boost-banner.boost-ACTIVE    { background: #dcfce7; color: #166534; }
.organic-boost-banner.boost-IN_REVIEW { background: #fef9c3; color: #854d0e; }
.organic-boost-banner.boost-PAUSED    { background: #e5e7eb; color: #374151; }
.organic-boost-banner.boost-COMPLETED { background: #e0e7ff; color: #3730a3; }
.organic-boost-banner.boost-FAILED    { background: #fee2e2; color: #991b1b; }
.organic-boost-window { font-weight: 400; opacity: 0.85; }
.organic-boost-error  { margin-top: 4px; font-weight: 400; font-size: 12px; }
.organic-boost-help {
  font-size: 13px; line-height: 1.5; color: var(--color-text-muted);
  margin: 4px 0 12px;
}
.organic-boost-total {
  margin: 8px 0; font-size: 13px; font-weight: 600; color: var(--color-text);
}
.organic-boost-err { color: #991b1b; font-size: 13px; min-height: 1.2em; }
.organic-post-status {
  margin-top: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 500;
}
.organic-time {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Pills (platform / bucket / cta / status badges) */
.organic-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-surface-2, #f1f5f9);
  color: var(--color-text-muted);
}
.organic-pill.platform { background: #dbeafe; color: #1e40af; }
.organic-pill.bucket   { background: #f1f5f9; color: #475569; }
.organic-pill.bucket-educational        { background: #ddd6fe; color: #5b21b6; }
.organic-pill.bucket-community          { background: #fce7f3; color: #9d174d; }
.organic-pill.bucket-social_proof       { background: #d1fae5; color: #065f46; }
.organic-pill.bucket-behind_scenes      { background: #fef3c7; color: #92400e; }
.organic-pill.bucket-promo              { background: #fee2e2; color: #991b1b; }
.organic-pill.bucket-thought_leadership { background: #e0e7ff; color: #3730a3; }
.organic-pill.cta { background: #f1f5f9; color: #475569; }
.organic-pill.status-draft      { background: #e2e8f0; color: #475569; }
.organic-pill.status-approved   { background: #dcfce7; color: #166534; }
.organic-pill.status-publishing { background: #c7d2fe; color: #3730a3; }
.organic-pill.status-published  { background: #c7d2fe; color: #3730a3; }
.organic-pill.status-failed     { background: #fecaca; color: #991b1b; }
.organic-pill.status-stale      { background: #fde68a; color: #854d0e; }
.organic-pill.status-rejected   { background: #fbcfe8; color: #9d174d; }

/* ── Review modal ─────────────────────────────────────────────────────── */
.organic-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.organic-modal {
  background: var(--color-surface);
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}
.organic-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.organic-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.organic-modal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.organic-modal-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.organic-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px 8px;
}
.organic-modal-close:hover { color: var(--color-text); }

.organic-modal-visual {
  position: relative;            /* anchor for the .ad-visual-gen-overlay during regen */
  border-radius: 10px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 240px;
}
.organic-modal-visual img {
  max-width: 100%;
  max-height: 420px;
  display: block;
}
.organic-modal-no-image {
  padding: 40px;
  text-align: center;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.organic-modal-caption { display: flex; flex-direction: column; gap: 8px; }
.organic-modal-body-text {
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.organic-modal-cta {
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
}
.organic-modal-cta-url {
  font-size: 13px;
  word-break: break-all;
  color: var(--color-text);
}
.organic-modal-cta-url-label {
  color: var(--color-text-muted);
  font-weight: 500;
  margin-right: 4px;
}
.organic-modal-cta-url a {
  color: var(--color-primary, #2b6cb0);
  text-decoration: underline;
}
.organic-modal-hashtags {
  font-size: 13px;
  color: var(--color-primary, #2b6cb0);
  word-wrap: break-word;
}

.organic-modal-rationale {
  font-size: 13px;
  background: var(--color-surface-2, #f8fafc);
  border-radius: 8px;
  padding: 8px 12px;
}
.organic-modal-rationale summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text-muted);
}
.organic-modal-rationale-body {
  margin-top: 8px;
  color: var(--color-text);
  line-height: 1.5;
}

.organic-modal-error {
  padding: 10px 14px;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
  font-size: 13px;
}

.organic-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* Edit form */
.organic-modal-body.editing .organic-modal-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.organic-edit-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.organic-edit-field {
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.organic-edit-field:focus {
  outline: 2px solid var(--color-primary, #2b6cb0);
  outline-offset: -1px;
}
textarea.organic-edit-field { resize: vertical; }

/* Compact modal on narrow viewports */
@media (max-width: 700px) {
  .organic-calendar-grid { grid-template-columns: repeat(7, minmax(60px, 1fr)); font-size: 11px; }
  .organic-day-cell { min-height: 80px; padding: 4px; }
  .organic-modal { max-height: 95vh; }
}

/* ───────────────────────────────────────────────────────────────────────
   Organic insights (Phase 4) — per-post panel, calendar-card footer,
   Performance sub-view. Reuses the global palette tokens so it reads as
   native CRM surface.
   ─────────────────────────────────────────────────────────────────────── */

/* Calendar-card metric footer */
.organic-post-card-metrics {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--color-divider, var(--color-border));
  font-size: 12px; color: var(--color-text-muted);
}
.organic-card-boosted {
  color: var(--color-primary); font-weight: 600;
}

/* Per-post insights panel (review modal) */
.organic-insights-panel {
  margin: 12px 0; padding: 12px 14px;
  background: var(--color-surface-2, var(--color-bg-2));
  border: 1px solid var(--color-border);
  border-radius: var(--crm-radius, 12px);
}
.organic-insights-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.organic-insights-title { font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.organic-insights-sync { font-size: 11px; color: var(--color-text-faint, var(--color-text-muted)); margin-left: auto; }
.organic-insights-empty { font-size: 13px; color: var(--color-text-muted); padding: 6px 0; }
.organic-insights-group { margin-top: 8px; }
.organic-insights-group.promoted { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border); }
.organic-insights-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin-bottom: 6px;
}

/* Shared stat tiles (modal groups + KPI strip) */
.organic-stat-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.organic-stat-tile {
  flex: 1 1 0; min-width: 76px; text-align: center;
  padding: 8px 6px;
  background: var(--color-surface, var(--color-bg));
  border: 1px solid var(--color-border); border-radius: 10px;
}
.organic-stat-value { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--color-text); }
.organic-stat-label { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.organic-insights-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.organic-insights-chip {
  font-size: 12px; color: var(--color-text-muted);
  padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 999px;
}

/* Calendar ↔ Performance toggle */
.organic-view-toggle {
  display: inline-flex; border: 1px solid var(--color-border);
  border-radius: 999px; overflow: hidden; margin-right: 8px;
}
.organic-view-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; font-size: 13px; color: var(--color-text-muted);
}
.organic-view-tab.active { background: var(--color-primary); color: var(--color-on-primary, #fff); font-weight: 600; }

/* Performance sub-view */
.organic-performance { padding: 4px 2px 24px; }
.organic-perf-header { display: flex; align-items: center; margin-bottom: 14px; }
.organic-perf-title { margin: 0; font-size: 18px; }
.organic-perf-head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.organic-kpi-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.organic-kpi-strip .organic-stat-tile { padding: 14px 10px; }
.organic-kpi-strip .organic-stat-value { font-size: 26px; }

.organic-trend {
  margin-bottom: 18px; padding: 12px 14px;
  border: 1px solid var(--color-border); border-radius: var(--crm-radius, 12px);
  background: var(--color-surface-2, var(--color-bg-2));
}
.organic-trend-label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 8px; }
.organic-trend-svg { width: 100%; height: 90px; display: block; }
.organic-trend-line { stroke: var(--color-primary); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }

.organic-split { margin-bottom: 18px; }
.organic-split-label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.organic-split-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); }
.organic-split-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; white-space: nowrap; }
.organic-split-seg.organic { background: var(--color-primary); }
.organic-split-seg.paid { background: var(--color-mustard, var(--color-coral)); color: var(--color-espresso-deep, #2a2118); }

.organic-top-wrap { margin-top: 6px; }
.organic-top-caption { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.organic-top-table { border: 1px solid var(--color-border); border-radius: var(--crm-radius, 12px); overflow: hidden; }
.organic-top-row {
  display: grid; grid-template-columns: 1fr 80px 80px 96px; gap: 8px;
  align-items: center; padding: 10px 12px; cursor: pointer;
  border-top: 1px solid var(--color-divider, var(--color-border)); font-size: 13px;
}
.organic-top-promote { padding: 3px 10px; font-size: 12px; justify-self: end; }
.organic-top-row:first-child { border-top: 0; }
.organic-top-row:not(.organic-top-head):hover { background: var(--color-surface-2, var(--color-bg-2)); }
.organic-top-head { cursor: default; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); background: var(--color-surface-2, var(--color-bg-2)); }
.organic-top-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.organic-top-flag { color: var(--color-primary); text-align: center; }

/* Scheduled promotion ("promote on publish") — modal section + card badge */
.organic-promote-sched {
  margin: 12px 0; padding: 12px 14px;
  background: var(--color-surface-2, var(--color-bg-2));
  border: 1px solid var(--color-border); border-radius: var(--crm-radius, 12px);
}
.organic-promote-head { display: flex; align-items: center; gap: 10px; }
.organic-promote-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.organic-promote-toggle .organic-promote-check { width: 16px; height: 16px; cursor: pointer; }
.organic-promote-head .btn { margin-left: auto; }
.organic-promote-fields { display: flex; gap: 12px; margin-top: 10px; }
.organic-promote-fields .organic-edit-label { flex: 1; }
.organic-promote-fields.disabled { opacity: .45; pointer-events: none; }
.organic-promote-note { font-size: 11px; color: var(--color-text-muted); margin-top: 8px; }
.organic-promote-status { font-size: 12px; color: var(--color-primary); margin-top: 6px; font-weight: 600; }
.organic-pill.promote-armed { background: var(--color-mustard, var(--color-coral)); color: var(--color-espresso-deep, #2a2118); }

/* ───────────────────────────────────────────────────────────────────────
   Social Inbox tab (Phase 4) — list + conversation + composer
   ─────────────────────────────────────────────────────────────────────── */
.inbox-wrap { display: flex; flex-direction: column; height: 100%; }
.inbox-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.inbox-title { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.inbox-unread-badge { background: var(--color-coral, #e0533d); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.inbox-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.inbox-filter { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface, var(--color-bg)); font-size: 13px; color: var(--color-text); }

.inbox-body { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: var(--crm-radius, 12px); overflow: hidden; height: 70vh; min-height: 420px; }

/* Left — conversation list */
.inbox-list { width: 320px; flex: none; border-right: 1px solid var(--color-border); overflow-y: auto; background: var(--color-surface, var(--color-bg)); }
.inbox-list-row { padding: 10px 12px; border-bottom: 1px solid var(--color-divider, var(--color-border)); cursor: pointer; }
.inbox-list-row:hover { background: var(--color-surface-2, var(--color-bg-2)); }
.inbox-list-row.active { background: var(--color-primary-light, var(--color-surface-2)); box-shadow: inset 3px 0 0 var(--color-primary); }
.inbox-list-row.unread .inbox-row-name { font-weight: 700; }
.inbox-row-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.inbox-row-name { font-size: 13px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-coral, #e0533d); margin-left: auto; flex: none; }
.inbox-row-preview { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-meta { font-size: 11px; color: var(--color-text-faint, var(--color-text-muted)); margin-top: 3px; }

.inbox-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; background: var(--color-surface-2, var(--color-bg-2)); color: var(--color-text-muted); flex: none; }
.inbox-pill.plat-fb_comment, .inbox-pill.plat-fb_dm { background: #e7f0ff; color: #1b62d6; }
.inbox-pill.plat-ig_comment, .inbox-pill.plat-ig_dm { background: #fce7f3; color: #c026a3; }
.inbox-pill.plat-whatsapp { background: #e3f6e9; color: #1c7c3e; }

/* Right — conversation + composer */
.inbox-convo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inbox-convo-empty { margin: auto; }
.inbox-convo-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.inbox-convo-name { font-weight: 600; margin-left: 8px; }
.inbox-convo-ctx { font-size: 12px; color: var(--color-text-muted); }
.inbox-msglog { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.inbox-msg { max-width: 78%; padding: 8px 11px; border-radius: 12px; }
.inbox-msg.inbound { align-self: flex-start; background: var(--color-surface-2, var(--color-bg-2)); border: 1px solid var(--color-border); }
.inbox-msg.outbound { align-self: flex-end; background: var(--color-primary); color: var(--color-on-primary, #fff); }
.inbox-msg-text { font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.inbox-msg-meta { font-size: 10px; opacity: .7; margin-top: 3px; }

.inbox-composer { border-top: 1px solid var(--color-border); padding: 10px 14px; background: var(--color-surface, var(--color-bg)); }
.inbox-window { font-size: 11px; padding: 4px 8px; border-radius: 8px; margin-bottom: 8px; }
.inbox-window.open { background: #e3f6e9; color: #1c7c3e; }
.inbox-window.closed { background: #fdeaea; color: var(--color-danger, #b3261e); }
.inbox-textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; font-size: 14px; background: var(--color-surface-solid, var(--color-bg)); color: var(--color-text); }
.inbox-composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.inbox-suggest-note { font-size: 11px; color: var(--color-text-muted); margin-top: 6px; }

.inbox-empty { padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 13px; }

/* ───────────────────────────────────────────────────────────────────────
   Social Inbox v2 (channel rail + status segments + per-platform styling).
   Uses the app's theme tokens so it adapts to light/dark; platform colours
   are fixed brand hues. Supersedes the older .inbox-* rules above.
   ─────────────────────────────────────────────────────────────────────── */
.ib-wrap{display:flex;flex-direction:column;height:100%;}
.ib-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:22px;font-weight:700;}
.ib-total{background:var(--color-coral,#e0533d);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:1px 9px;}

.ib-shell{display:flex;border:1px solid var(--color-border);border-radius:var(--crm-radius,16px);overflow:hidden;height:74vh;min-height:500px;background:var(--color-surface,var(--color-bg));}

/* Channel rail */
.ib-rail{width:208px;flex:none;border-right:1px solid var(--color-border);padding:12px 10px;background:var(--color-surface-2,var(--color-bg-2));overflow-y:auto;}
.ib-rail-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin:4px 8px 8px;}
.ib-chan{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;margin-bottom:3px;}
.ib-chan:hover{background:#80808018;}
.ib-chan.active{background:var(--color-surface,var(--color-bg));box-shadow:0 1px 4px #0000001a;}
.ib-chan.active .ib-chan-name{font-weight:700;}
.ib-ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;}
.ic-all{background:#5b5247;}
.ic-facebook{background:#1877F2;}
.ic-instagram{background:linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888);}
.ic-whatsapp{background:#25D366;}
.ib-chan-name{flex:1;font-size:14px;color:var(--color-text);}
.ib-chan-sub{font-size:10.5px;color:var(--color-text-faint,var(--color-text-muted));}
.ib-chan-count{font-size:12px;font-weight:700;min-width:20px;text-align:center;color:#fff;background:var(--color-coral,#e0533d);border-radius:999px;padding:0 6px;}
.ib-chan-count.zero{background:#80808033;color:var(--color-text-muted);}

/* List column */
.ib-listcol{width:360px;flex:none;border-right:1px solid var(--color-border);display:flex;flex-direction:column;min-width:0;}
.ib-seg{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--color-border);}
.ib-seg button{flex:1;border:1px solid var(--color-border);background:var(--color-surface,var(--color-bg));border-radius:9px;padding:7px 4px;font:inherit;font-size:12px;cursor:pointer;color:var(--color-text-muted);}
.ib-seg button.on{background:var(--color-text);color:var(--color-bg,#fff);border-color:var(--color-text);font-weight:600;}
.ib-seg .n{font-weight:700;}
.ib-list{overflow-y:auto;flex:1;}
.ib-empty{padding:30px 20px;text-align:center;color:var(--color-text-muted);font-size:13px;}
.ib-wa-soon{font-size:11px;color:#0f8a54;background:#e3f6e9;border:1px solid #bfe9cf;border-radius:8px;padding:5px 10px;margin:9px 10px 2px;}

.ib-row{position:relative;display:flex;gap:11px;padding:12px 13px 12px 14px;border-bottom:1px solid var(--color-divider,var(--color-border));cursor:pointer;}
.ib-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;}
.ib-row[data-awaiting="1"]::before{background:var(--rowcolor);}
.ib-row.responded{opacity:.6;}
.ib-row:hover{background:var(--color-surface-2,var(--color-bg-2));}
.ib-row.active{background:rgba(240,121,0,.12);}
.ib-av{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;position:relative;}
.ib-av .ib-type{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;background:var(--color-surface,#fff);border:1px solid var(--color-border);font-size:10px;display:flex;align-items:center;justify-content:center;}
.ib-rmain{flex:1;min-width:0;}
.ib-rtop{display:flex;align-items:center;gap:7px;}
.ib-name{font-size:14px;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ib-row[data-awaiting="1"] .ib-name{font-weight:700;}
.ib-typechip{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:1px 6px;border-radius:999px;border:1px solid currentColor;flex:none;}
.ib-dot{width:9px;height:9px;border-radius:50%;background:var(--color-coral,#e0533d);margin-left:auto;flex:none;}
.ib-prev{font-size:12.5px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.ib-rbot{display:flex;align-items:center;gap:8px;margin-top:5px;}
.ib-status{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;}
.ib-status.awaiting{background:#fde7d6;color:#c2560a;}
.ib-status.responded{background:#e3f6e9;color:#1c7c3e;}
.ib-time{font-size:11px;color:var(--color-text-faint,var(--color-text-muted));}
.ib-onpost{font-size:11px;color:var(--color-text-faint,var(--color-text-muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Conversation */
.ib-convo{flex:1;display:flex;flex-direction:column;min-width:0;}
.ib-cv-empty{margin:auto;color:var(--color-text-muted);}
.ib-cv-head{display:flex;align-items:center;gap:11px;padding:13px 16px;color:#fff;}
.ib-cv-head .ib-av{box-shadow:0 0 0 2px #ffffff55;}
.ib-cv-name{font-weight:700;font-size:15px;}
.ib-cv-sub{font-size:11.5px;opacity:.92;}
.ib-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--color-bg);}
.ib-bub{max-width:74%;padding:9px 13px;border-radius:14px;font-size:14px;white-space:pre-wrap;word-wrap:break-word;}
.ib-bub.inbound{align-self:flex-start;background:var(--color-surface,var(--color-bg));border:1px solid var(--color-border);border-bottom-left-radius:5px;color:var(--color-text);}
.ib-bub.outbound{align-self:flex-end;color:#fff;border-bottom-right-radius:5px;}
.ib-meta{font-size:10px;opacity:.65;margin-top:4px;}

.ib-comp{border-top:1px solid var(--color-border);padding:12px 16px;background:var(--color-surface,var(--color-bg));}
.ib-win{font-size:11px;padding:4px 9px;border-radius:8px;margin-bottom:8px;display:inline-block;font-weight:600;}
.ib-win.open{background:#e3f6e9;color:#1c7c3e;}
.ib-win.closed{background:#fdeaea;color:var(--color-danger,#b3261e);}
.ib-ta{width:100%;box-sizing:border-box;resize:vertical;padding:10px 12px;border:1px solid var(--color-border);border-radius:11px;font:inherit;font-size:14px;background:var(--color-surface-solid,var(--color-bg));color:var(--color-text);}
.ib-comp-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
.ib-note{font-size:11px;color:var(--color-text-muted);margin-top:7px;}
.ib-escal{font-size:11.5px;color:#9a5b00;background:#fff4e6;border:1px solid #ffe0b3;border-radius:8px;padding:6px 10px;margin-top:7px;}
.ib-facts{font-size:11px;color:var(--color-text-faint,var(--color-text-muted));margin-top:6px;}
.ib-facts b{color:var(--color-text-muted);}

/* Inbox message attachments */
.ib-bub-text{white-space:pre-wrap;word-wrap:break-word;}
.ib-att-img{display:block;max-width:230px;max-height:230px;border-radius:9px;margin-top:6px;border:1px solid #ffffff40;}
.ib-att-link,.ib-att-chip{display:inline-block;margin-top:6px;font-size:12px;padding:3px 8px;border-radius:8px;background:#80808022;color:inherit;text-decoration:none;}