/* ── Design system ────────────────────────────────────────────────────────── */
:root {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 62px;
  --bg: #F2F7F6;
  --bg-strong: #FFFFFF;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --surface-soft: #F8FBFA;
  --surface-dark: #0F3A3A;
  --text: #0F3A3A;
  --muted: #4A5E5E;
  --muted-strong: #2E3E3E;
  --border: rgba(15, 58, 58, 0.14);
  --border-strong: rgba(15, 58, 58, 0.24);
  --shadow: 0 20px 60px rgba(11, 32, 32, 0.10);
  --shadow-soft: 0 10px 24px rgba(11, 32, 32, 0.07);
  --shadow-hover: 0 24px 72px rgba(11, 32, 32, 0.14);
  --primary: #0FB8A2;
  --primary-deep: #088E89;
  --primary-soft: #E8F5F4;
  --success: #0FA968;
  --success-soft: #E8F7EF;
  --warning: #E69E25;
  --warning-soft: #FFF6E8;
  --info: #1F6FEB;
  --info-soft: #EEF4FF;
  --radius: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
}

/* ── Bootstrap 5 CSS-variable overrides — Pinnacle Teal palette ────────────
   Override --bs-* tokens so every Bootstrap utility class and component
   automatically uses the brand palette. No HTML changes needed.          */
:root {
  /* Primary → teal */
  --bs-primary:           #0FB8A2;
  --bs-primary-rgb:       15, 184, 162;
  --bs-primary-bg-subtle: #E8F5F4;
  --bs-primary-border-subtle: rgba(15,184,162,0.3);
  --bs-primary-text-emphasis: #088E89;
  --bs-link-color:        #0FB8A2;
  --bs-link-hover-color:  #088E89;
  --bs-link-color-rgb:    15, 184, 162;
  --bs-focus-ring-color:  rgba(15,184,162,0.25);

  /* Success → brand teal-green */
  --bs-success:           #0FA968;
  --bs-success-rgb:       15, 169, 104;
  --bs-success-bg-subtle: #E8F7EF;
  --bs-success-border-subtle: rgba(15,169,104,0.3);
  --bs-success-text-emphasis: #067a4a;

  /* Body text */
  --bs-body-color:        #0F3A3A;
  --bs-body-bg:           #F2F7F6;
  --bs-secondary-color:   #4A5E5E;
  --bs-border-color:      rgba(15,58,58,0.14);
  --bs-border-color-translucent: rgba(15,58,58,0.14);
}

/* btn-primary */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0FB8A2;
  --bs-btn-border-color: #0FB8A2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #088E89;
  --bs-btn-hover-border-color: #088E89;
  --bs-btn-active-bg: #088E89;
  --bs-btn-active-border-color: #088E89;
  --bs-btn-disabled-bg: #0FB8A2;
  --bs-btn-disabled-border-color: #0FB8A2;
  --bs-btn-focus-shadow-rgb: 15, 184, 162;
}

/* btn-outline-primary */
.btn-outline-primary {
  --bs-btn-color: #0FB8A2;
  --bs-btn-border-color: #0FB8A2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0FB8A2;
  --bs-btn-hover-border-color: #0FB8A2;
  --bs-btn-active-bg: #088E89;
  --bs-btn-active-border-color: #088E89;
  --bs-btn-focus-shadow-rgb: 15, 184, 162;
}

/* btn-success */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0FA968;
  --bs-btn-border-color: #0FA968;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #088E57;
  --bs-btn-hover-border-color: #088E57;
  --bs-btn-active-bg: #088E57;
  --bs-btn-active-border-color: #088E57;
  --bs-btn-disabled-bg: #0FA968;
  --bs-btn-disabled-border-color: #0FA968;
  --bs-btn-focus-shadow-rgb: 15, 169, 104;
}

/* btn-outline-success */
.btn-outline-success {
  --bs-btn-color: #0FA968;
  --bs-btn-border-color: #0FA968;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0FA968;
  --bs-btn-hover-border-color: #0FA968;
  --bs-btn-active-bg: #088E57;
  --bs-btn-focus-shadow-rgb: 15, 169, 104;
}

/* btn-secondary / btn-outline-secondary — neutral teal-gray */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4A5E5E;
  --bs-btn-border-color: #4A5E5E;
  --bs-btn-hover-bg: #2E3E3E;
  --bs-btn-hover-border-color: #2E3E3E;
  --bs-btn-active-bg: #2E3E3E;
}
.btn-outline-secondary {
  --bs-btn-color: #4A5E5E;
  --bs-btn-border-color: rgba(15,58,58,0.25);
  --bs-btn-hover-color: #0F3A3A;
  --bs-btn-hover-bg: rgba(15,58,58,0.06);
  --bs-btn-hover-border-color: rgba(15,58,58,0.35);
}

/* Text utilities */
.text-primary { color: #0FB8A2 !important; }
.text-success { color: #0FA968 !important; }

/* Spinner */
.spinner-border.text-primary, .spinner-grow.text-primary { color: #0FB8A2 !important; }
.spinner-border.text-success, .spinner-grow.text-success { color: #0FA968 !important; }

/* Badge */
.bg-primary { background-color: #0FB8A2 !important; }
.bg-success  { background-color: #0FA968 !important; }

/* Focus ring */
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(15,184,162,0.25) !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[ng-cloak], .ng-cloak { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: #eaf6f4;
}

/* Fixed ambient orb layer — renders behind every page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%,  rgba(15,184,162,.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 72%,  rgba(6,182,212,.16)  0%, transparent 60%),
    radial-gradient(ellipse 38% 48% at 72% 12%,  rgba(52,211,153,.14) 0%, transparent 55%),
    radial-gradient(ellipse 42% 38% at 28% 82%,  rgba(8,142,137,.12)  0%, transparent 55%),
    radial-gradient(ellipse 28% 32% at 55% 48%,  rgba(15,184,162,.08) 0%, transparent 50%),
    radial-gradient(ellipse 35% 30% at 92% 22%,  rgba(34,211,238,.10) 0%, transparent 52%),
    radial-gradient(ellipse 32% 28% at 5%  60%,  rgba(20,184,166,.09) 0%, transparent 52%),
    linear-gradient(135deg, #eaf6f4 0%, #e6f4f2 40%, #edf7f5 70%, #eaf6f4 100%);
}

/* Subtle dot-grid texture on top of the orbs */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(15,58,58,.10) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent 85%);
  opacity: .5;
}
a { color: inherit; }

/* ── App shell ────────────────────────────────────────────────────────────── */
.app-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  color: rgba(255,255,255,.88);
  background: #0d1117;
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 4px 0 24px rgba(0,0,0,.22);
  transition: width .22s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(15,184,162,.16) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(59,130,246,.07) 0%, transparent 50%);
  pointer-events: none;
}
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }

/* ── Header (brand + collapse btn) */
.sidebar-header {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  height: 60px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-header { padding: 0; justify-content: center; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-brand { overflow: visible; }

.sidebar-brand-icon {
  position: relative;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(62,207,178,.22), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 18px rgba(0,0,0,.18);
}
.sidebar-brand-mark {
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #f8fffd;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.sidebar-brand-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  right: 8px;
  top: 10px;
  border-radius: 50%;
  background: #3ecfb2;
  box-shadow: 0 0 0 3px rgba(62,207,178,.12);
}
.sidebar-brand-text {
  overflow: hidden; white-space: nowrap;
  opacity: 1; max-width: 160px;
  transition: opacity .18s ease, max-width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed .sidebar-brand-text { max-width: 0; opacity: 0; pointer-events: none; }
.sidebar-brand-name {
  font-size: 13px; font-weight: 700; color: #fff;
  line-height: 1.1; letter-spacing: -.01em;
}
.sidebar-brand-sub {
  font-size: 10px; color: rgba(255,255,255,.38);
  letter-spacing: .03em; margin-top: 1px;
}

/* Collapse button */
.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.40);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
  font-size: 13px;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.10); color: rgba(255,255,255,.85); }
.sidebar.collapsed .sidebar-collapse-btn {
  opacity: 0; pointer-events: none; position: absolute;
}
/* Collapsed: show expand trigger on brand hover */
.sidebar.collapsed .sidebar-header:hover .sidebar-collapse-btn {
  opacity: 1; pointer-events: auto; position: static;
}

/* ── Nav */
.sidebar-nav,
.sidebar-bottom { position: relative; z-index: 1; }

.sidebar-nav {
  flex: 1;
  padding: 12px 8px 8px;
  min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  gap: 2px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section-label {
  padding: 10px 10px 4px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.22);
  white-space: nowrap; overflow: hidden;
  transition: opacity .18s ease, max-height .22s ease;
  max-height: 30px; opacity: 1;
}
.sidebar.collapsed .sidebar-section-label { max-height: 0; opacity: 0; padding: 0; }

/* Nav links with CSS tooltip on collapse */
.sidebar-link {
  position: relative;
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden;
}
.sidebar-link i {
  font-size: 15px; flex-shrink: 0;
  width: 18px; text-align: center;
  color: rgba(255,255,255,.74);
  transition: color .15s, transform .15s, opacity .15s, text-shadow .15s;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.sidebar-link span {
  overflow: hidden; white-space: nowrap;
  opacity: 1; max-width: 160px;
  transition: opacity .18s ease, max-width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar-link:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
}
.sidebar-link:hover i {
  color: rgba(255,255,255,.96);
  transform: translateX(1px);
}
.sidebar-link.active {
  background: rgba(15,184,162,.22);
  color: #fff;
  font-weight: 600;
}
.sidebar-link.active i {
  color: #4fe0c0;
  text-shadow: 0 0 10px rgba(79,224,192,.18);
}
.sidebar-link.active::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: #3ecfb2;
}

/* Collapsed state */
.sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 11px 0;
  overflow: visible;
}
.sidebar.collapsed .sidebar-link span { max-width: 0; opacity: 0; }

/* CSS tooltip for collapsed links */
.sidebar.collapsed .sidebar-link::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  background: #1e2533;
  color: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 200;
}
.sidebar.collapsed .sidebar-link:hover::after { opacity: 1; }

/* ── Sub-nav links (indented children under a parent link) */
.sidebar-sub-link {
  position: relative;
  display: flex; align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 36px;
  margin-top: 1px;
  border-radius: 8px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden;
  cursor: pointer;
}
.sidebar-sub-link::before {
  content: '';
  position: absolute;
  left: 21px; top: 50%;
  width: 6px; height: 1px;
  background: rgba(255,255,255,.2);
  transform: translateY(-50%);
}
.sidebar-sub-link i {
  font-size: 12px; flex-shrink: 0;
  color: rgba(255,255,255,.55);
  transition: color .15s;
}
.sidebar-sub-link span {
  overflow: hidden; white-space: nowrap;
  opacity: 1; max-width: 160px;
  transition: opacity .18s ease, max-width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar-sub-link:hover {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.80);
}
.sidebar-sub-link:hover i { color: rgba(255,255,255,.9); }
.sidebar-sub-link.active {
  background: rgba(15,184,162,.15);
  color: #4fe0c0;
  font-weight: 600;
}
.sidebar-sub-link.active i { color: #4fe0c0; }

/* Collapsed sidebar: hide text, center icon, show tooltip */
.sidebar.collapsed .sidebar-sub-link {
  justify-content: center;
  padding: 8px 0;
  overflow: visible;
}
.sidebar.collapsed .sidebar-sub-link span { max-width: 0; opacity: 0; }
.sidebar.collapsed .sidebar-sub-link::before { display: none; }
.sidebar.collapsed .sidebar-sub-link::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  background: #1e2533;
  color: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 200;
}
.sidebar.collapsed .sidebar-sub-link:hover::after { opacity: 1; }

/* ── Bottom section */
.sidebar-bottom {
  margin-top: auto;
  padding: 10px 8px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 8px;
}

.demo-switcher { overflow: hidden; }
.demo-label {
  margin-bottom: 5px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em;
  color: rgba(255,255,255,.30);
  display: flex; align-items: center; gap: 4px;
}
.demo-select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 12px !important; border-radius: 8px !important;
}
.demo-select option { background: #0d1117; color: #fff; }

.sidebar-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  cursor: default;
  transition: background .15s;
}
.sidebar-user-card:hover { background: rgba(255,255,255,.07); }
.sidebar.collapsed .sidebar-user-card {
  justify-content: center; padding: 10px 0;
  border: none; background: transparent;
}
.sidebar.collapsed .sidebar-user-card:hover { background: rgba(255,255,255,.05); border-radius: 10px; }

.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #0FB8A2, #4a9e8e);
}
.sidebar-user-info {
  flex: 1; overflow: hidden; white-space: nowrap;
  opacity: 1; max-width: 160px;
  transition: opacity .18s ease, max-width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed .sidebar-user-info { max-width: 0; opacity: 0; }
.sidebar-user-name {
  font-size: 12px; font-weight: 600; color: #fff;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role {
  margin-top: 1px; font-size: 10px; color: rgba(255,255,255,.40);
}
.sidebar-signout-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.sidebar-user-card:hover .sidebar-signout-btn { opacity: 1; }
.sidebar-signout-btn:hover { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.30); }
.sidebar.collapsed .sidebar-signout-btn { display: none; }

/* ── Main area ────────────────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  width: calc(100vw - var(--sidebar-width));
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed ~ .app-main {
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100vw - var(--sidebar-collapsed-width));
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 22px;
  flex-shrink: 0;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15,58,58,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.65), 0 8px 26px rgba(11,32,32,.05);
}
.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-strong);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,58,58,.10);
  box-shadow: 0 6px 14px rgba(11,32,32,.03);
}
.breadcrumb-link:hover {
  color: var(--text);
  border-color: rgba(15,58,58,.28);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-email {
  font-size: 12px;
  color: var(--muted-strong);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-signout {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,58,58,.14);
  color: var(--muted-strong);
  border-radius: 12px; padding: 0;
}
.topbar-signout:hover { color: var(--primary); border-color: rgba(15,184,162,.28); background: #fff; }

/* Notification bell */
.notif-wrap { position: relative; display: inline-flex; }
.topbar-icon-btn {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,58,58,.14);
  color: var(--muted-strong);
  border-radius: 10px; padding: 0; cursor: pointer;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.topbar-icon-btn:hover { color: var(--primary); background: #fff; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: #dc3545; color: #fff;
  border-radius: 50%; width: 16px; height: 16px;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 340px; max-height: 460px;
  overflow-y: auto; overflow-x: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  z-index: 9999;
}
.notif-panel-header {
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(15,58,58,0.08);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.notif-panel-header strong { font-size: .85rem; }
.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: .82rem; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.notif-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: .65rem 1rem;
  border-bottom: 1px solid #F8FBFA;
  transition: background .12s;
}
.notif-item:hover { background: #F8FBFA; }
.notif-item--unread { background: #E8F5F4; }
.notif-item--unread:hover { background: rgba(15,184,162,0.12); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: .8rem; font-weight: 600; margin-bottom: 2px; }
.notif-item-msg { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.notif-item-time { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.notif-dismiss {
  flex-shrink: 0; background: none; border: none;
  color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 2px;
}
.notif-dismiss:hover { color: var(--muted); }
.notif-panel-footer {
  padding: .45rem 1rem;
  text-align: center;
  border-top: 1px solid rgba(15,58,58,0.08);
  position: sticky; bottom: 0; background: #fff;
}

.role-pill {
  font-size: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.role-admin        { background: #fff0f0; color: #c0392b; border-color: #ffc7c7; }
.role-analytics    { background: #f1ebff; color: #6d28d9; border-color: #ddc7ff; }
.role-techops      { background: #e8f4ff; color: #0958d9; border-color: #c5e3ff; }
.role-sales_update { background: #fff7e6; color: #d46b08; border-color: #ffd591; }
.role-sales_view   { background: #eefdf2; color: #117a37; border-color: #c6f1d5; }
.role-pending      { background: #f4f6fa; color: #4A5E5E; border-color: #d9e2ef; }

/* ── Warehouse-used indicator pill (topbar) ──────────────────────────────
   Shows which database served the most recent query.
   Blue  = ClickHouse (primary, fast path)
   Orange = BigQuery (fallback — CH was unavailable or errored)
   Purple = mixed (some CH + some BQ across one request)                   */
.warehouse-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
  margin-right: 8px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.warehouse-pill .bi { font-size: 11px; opacity: .9; }
/* Pure single-source colors:
   ClickHouse  → blue   (primary, fastest warehouse)
   BigQuery    → orange (fallback)
   Cache       → teal   (in-memory hot path, fastest of all)
   Mixed/combo → purple                                                  */
.warehouse-pill.wh-ch       { background: #e8f1ff; color: #1d4ed8; border-color: #b9d2ff; }
.warehouse-pill.wh-bq       { background: #fff3e3; color: #c2570c; border-color: #ffd6a8; }
.warehouse-pill.wh-cache    { background: #e6fbf5; color: #0f766e; border-color: #b6efe0; }

/* ── Data source bar (top of channel table) ──────────────────────────────
   A horizontal colored stripe announcing where the table rows came from.
   Color rules match the topbar pill so the visual language is consistent. */
.data-source-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  position: relative;
  cursor: help;
}
.data-source-bar .bi { font-size: 13px; opacity: .85; }
.data-source-bar .dsb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.6);
  flex-shrink: 0;
}
.data-source-bar .dsb-label { letter-spacing: .01em; }
.data-source-bar .dsb-label strong { font-weight: 800; }
.data-source-bar .dsb-tip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 60%;
}
/* Top stripe (1px solid bar) — gives the strong "this is the source" signal */
.data-source-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  opacity: .85;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.data-source-bar.wh-ch       { background: #eff5ff; color: #1d4ed8; border-bottom-color: #d7e4ff; }
.data-source-bar.wh-ch       .dsb-dot { background: #1d4ed8; }
.data-source-bar.wh-bq       { background: #fff7ec; color: #c2570c; border-bottom-color: #ffe4c2; }
.data-source-bar.wh-bq       .dsb-dot { background: #c2570c; }
.data-source-bar.wh-cache    { background: #ecfbf6; color: #0f766e; border-bottom-color: #cdf0e3; }
.data-source-bar.wh-cache    .dsb-dot { background: #0f766e; }
.data-source-bar.wh-cache-ch { background: #eff5ff; color: #1d4ed8; border-bottom-color: #d7e4ff; }
.data-source-bar.wh-cache-ch::before { background: linear-gradient(90deg, #14b8a6 0 30%, #1d4ed8 30% 100%); opacity: 1; }
.data-source-bar.wh-cache-ch .dsb-dot { background: #1d4ed8; }
.data-source-bar.wh-cache-bq { background: #fff7ec; color: #c2570c; border-bottom-color: #ffe4c2; }
.data-source-bar.wh-cache-bq::before { background: linear-gradient(90deg, #14b8a6 0 30%, #c2570c 30% 100%); opacity: 1; }
.data-source-bar.wh-cache-bq .dsb-dot { background: #c2570c; }
.data-source-bar.wh-mix      { background: #f6f1ff; color: #6d28d9; border-bottom-color: #e0d2ff; }
.data-source-bar.wh-mix      .dsb-dot { background: #6d28d9; }
.warehouse-pill.wh-mix       { background: #f3ecff; color: #6d28d9; border-color: #d9c5ff; }
/* Cache-of-CH: blue tone (ClickHouse) with teal left edge to signal "via cache" */
.warehouse-pill.wh-cache-ch  { background: #e8f1ff; color: #1d4ed8; border-color: #b9d2ff; box-shadow: inset 4px 0 0 #14b8a6; padding-left: 12px; }
/* Cache-of-BQ: orange tone (BigQuery) with teal left edge */
.warehouse-pill.wh-cache-bq  { background: #fff3e3; color: #c2570c; border-color: #ffd6a8; box-shadow: inset 4px 0 0 #14b8a6; padding-left: 12px; }
/* Subtle pulse the moment the pill flips, so the user notices */
.warehouse-pill { animation: wh-flash .9s ease; }
@keyframes wh-flash {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
  60%  { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

.app-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px;
}

/* ── Pages / headers ─────────────────────────────────────────────────────── */
.page-content {
  width: 100%;
  max-width: none;
  margin: 0;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.page-header h4,
.page-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.page-header p,
.page-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
}

.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 24px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
    radial-gradient(circle at top right, rgba(15, 184, 162, .06), transparent 42%);
  border: 1px solid rgba(15,58,58,.16);
  box-shadow: var(--shadow);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at top right, rgba(15, 184, 162, .07), transparent 22%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.08), transparent 20%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.hero-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 184, 162, .07);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.hero-description {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,58,58,.16);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-metric {
  min-width: 132px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,58,58,.16);
  box-shadow: 0 8px 20px rgba(11,32,32,.05);
}
.hero-metric-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-metric-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hero-metric-value small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* ── Shared cards ────────────────────────────────────────────────────────── */
.app-card,
.stat-card,
.chart-card,
.section-card,
.kpi-card,
.viz-card,
.login-card,
.modal-content {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(15,58,58,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.app-card {
  overflow: visible;
}
/* card-body and card-header still clip their own content correctly */
.app-card > .card-header,
.app-card > .table-responsive {
  overflow: hidden;
}
.app-card > .table-responsive {
  overflow-x: auto;
  overflow-y: hidden;
}
.app-card .card-header {
  background: rgba(255,255,255,.74);
  border-bottom: 1px solid rgba(15,58,58,.14);
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
}

.admin-table-shell {
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.admin-table-shell .table-responsive {
  border-radius: 0 0 24px 24px;
}
.admin-table-shell .table {
  margin-bottom: 0;
  background: rgba(255,255,255,.94);
}
.admin-table-shell thead th {
  background: #F8FBFA;
}
.admin-table-shell tbody td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.admin-table-shell .card-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), #F8FBFA);
  border-bottom: 1px solid rgba(15,58,58,.14);
}

.admin-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.admin-hero-split .admin-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .95fr);
  gap: 18px;
  align-items: start;
}
.admin-hero-intro {
  padding-right: 8px;
}
.admin-hero-side {
  display: flex;
  align-items: stretch;
}
.admin-hero-card {
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,58,58,.16);
  box-shadow: 0 10px 22px rgba(11,32,32,.04);
  position: relative;
  overflow: hidden;
}
.admin-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -14px -16px auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,.36);
  filter: blur(8px);
  pointer-events: none;
}
.admin-hero-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--muted);
}
.admin-hero-value {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.admin-hero-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.admin-hero-card.accent-pending { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,232,.88)); }
.admin-hero-card.accent-active { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,251,241,.88)); }
.admin-hero-card.accent-admin { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,245,255,.88)); }
.admin-hero-card.accent-blocked { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,239,239,.88)); }

.section-card {
  overflow: hidden;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,58,58,.14);
  font-size: 14px;
  font-weight: 800;
}
.section-header span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.stat-card {
  padding: 20px;
  border-left: 4px solid transparent;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -12px -20px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  filter: blur(8px);
  pointer-events: none;
}
.stat-card-blue   { border-left-color: #3b82f6; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,245,255,.84)); }
.stat-card-green  { border-left-color: #0FA968; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,251,241,.84)); }
.stat-card-orange { border-left-color: #f59e0b; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,232,.84)); }
.stat-card-red    { border-left-color: #ef4444; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,239,239,.84)); }
.stat-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  margin-top: 10px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.chart-card {
  height: 300px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.chart-title {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--muted);
}
.chart-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
}
.chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.bucket-list {
  display: flex;
  flex-direction: column;
}
.bucket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,58,58,.12);
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.bucket-item:last-child { border-bottom: none; }
.bucket-item:hover {
  background: rgba(247,249,253,.92);
  transform: translateX(1px);
}
.bucket-item-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.bucket-item-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.bucket-item-body { min-width: 0; }
.bucket-item-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.badge-assigned,
.badge-draft,
.badge-archived {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: capitalize;
}
.badge-assigned {
  background: var(--success-soft);
  color: #117a37;
  border: 1px solid #bceecf;
}
.badge-draft {
  background: #f4f6fa;
  color: #5f6d83;
  border: 1px solid #dbe2ed;
}
.badge-archived {
  background: #fff1f0;
  color: #c0392b;
  border: 1px solid #ffc7c7;
}

.bucket-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.bucket-card:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

/* ── KPI / Viz cards ─────────────────────────────────────────────────────── */
.kpi-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
}
.kpi-card-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.kpi-card-value {
  margin-top: 10px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}
.kpi-card-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.viz-card {
  padding: 18px;
}
.viz-card-title {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--muted);
}

/* ── Compact KPI / Viz cards (overview row) ─────────────────────────────── */
.kpi-card-sm {
  background: #fff;
  border: 1px solid rgba(15,58,58,0.12);
  border-radius: 10px;
  padding: 12px 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
.kpi-card-sm-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.kpi-card-sm-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-top: 4px;
}
.viz-card-sm {
  background: #fff;
  border: 1px solid rgba(15,58,58,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  height: 100%;
}
.viz-card-sm .viz-card-title {
  font-size: 10px;
  margin-bottom: 6px;
}

/* ── Ranked-list visualisation (replaces cramped horizontal-bar charts
      for Top Categories / Top Countries). One row per item: label + thin
      coloured progress bar + count + percentage. Bar widths are computed
      relative to the maximum value in the controller. */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.25;
  /* Match the height of the older canvas so the dashboard row keeps the
     same visual rhythm. Horizontal scrollbar is avoided by keeping rows
     in a flex column with overflow-y when there are many items. */
  max-height: 150px;
  overflow-y: auto;
  padding-right: 2px;
}
.rank-list--scroll { /* enable vertical scroll only past 7 items */
  scrollbar-width: thin;
  scrollbar-color: #c9d2dc transparent;
}
.rank-list::-webkit-scrollbar           { width: 6px; }
.rank-list::-webkit-scrollbar-thumb     { background: #c9d2dc; border-radius: 3px; }
.rank-list::-webkit-scrollbar-track     { background: transparent; }

.rank-row {
  display: grid;
  grid-template-columns: minmax(0, 7em) 1fr 3.4em 3em;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}
.rank-row-label {
  color: #2b3445;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-row-bar {
  position: relative;
  background: #eef2f7;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.rank-row-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.rank-row-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #2E3E3E;
  font-weight: 600;
}
.rank-row-pct {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #4A5E5E;
  font-size: 10.5px;
}
.cd-rank-with-cpm .rank-row {
  grid-template-columns: minmax(0, 7em) 1fr 3.4em 2.8em 3.6em;
}
.rank-row-cpm {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #0FA968;
  font-size: 10.5px;
  font-weight: 500;
}

/* ── Stat-bar widget — replaces small donut charts for binary/ternary
      distributions (TechOps QC Status, Brand Safety, AI Category Tagged,
      Auto-Generated). Donuts wasted ~70% of their card to circular
      whitespace; the stat bar stacks all segments into a single horizontal
      bar with a compact legend underneath, freeing vertical space and
      reading much faster at a glance. */
.stat-bar-wrap {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 4px 0 2px;
}
.stat-bar-headline {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; color: #4A5E5E;
}
.stat-bar-headline-primary {
  font-size: 16px; font-weight: 700; color: #2b3445;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-bar-headline-suffix { font-weight: 500; color: #4A5E5E; margin-left: 4px; }

.stat-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}
.stat-bar-seg {
  height: 100%;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.stat-bar-seg + .stat-bar-seg {
  /* Subtle white wedge between segments so adjacent shades stay distinct */
  box-shadow: -1px 0 0 #fff inset;
}

.stat-bar-legend {
  display: flex; flex-wrap: wrap;
  row-gap: 4px; column-gap: 12px;
  font-size: 11px;
  color: #2E3E3E;
}
.stat-bar-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.stat-bar-legend-dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.stat-bar-legend-label { color: #4A5E5E; }
.stat-bar-legend-value {
  font-weight: 600; color: #2b3445;
  font-variant-numeric: tabular-nums;
}
.stat-bar-legend-pct {
  color: #8c97a8;
  font-variant-numeric: tabular-nums;
}

/* ── Stat-pair: two stacked stat-bars in one card. Used to combine the
      two binary distributions (AI Category Tagged + Auto-Generated) that
      previously took up two cards but shared the same Yes/No shape. */
.stat-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0;
}
.stat-pair-row + .stat-pair-row {
  border-top: 1px dashed #eef2f7;
  padding-top: 10px;
}
.stat-pair-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px;
  margin-bottom: 5px;
}
.stat-pair-head-title {
  font-weight: 600; color: #2b3445;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 10px;
}
.stat-pair-head-summary {
  color: #4A5E5E;
  font-variant-numeric: tabular-nums;
}
.stat-pair-head-summary strong {
  color: #2b3445; font-weight: 700;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.channel-table {
  width: 100%;
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.channel-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.channel-table thead tr {
  background: #F8FBFA;
  border-bottom: 1px solid rgba(15,58,58,.14);
}
.channel-table th {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.channel-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,58,58,.10);
  vertical-align: middle;
}
/* Freeze: thumbnail (col 1) + channel name (col 2) */
.channel-table th:nth-child(2),
.channel-table td:nth-child(2) {
  box-shadow: 4px 0 8px rgba(15,23,42,.08);
}
/* Last col: actions — sticky right */
.channel-table th:last-child,
.channel-table td:last-child {
  position: sticky;
  right: 0;
  background: rgba(255,255,255,.98);
  z-index: 2;
  box-shadow: -10px 0 14px rgba(15,23,42,.06);
}
.channel-table thead th:last-child {
  z-index: 3;
}
.channel-table tbody tr {
  transition: background .15s ease;
}
.channel-table tbody tr:hover {
  background: rgba(247,249,253,.98);
}
.channel-table tbody tr:hover td:nth-child(1),
.channel-table tbody tr:hover td:nth-child(2) {
  background: rgba(247,249,253,.98);
}
.channel-table tbody tr.row-qc-done {
  background: linear-gradient(90deg, rgba(232,251,241,.95), rgba(255,255,255,.95));
}
.channel-table tbody tr.row-qc-done:hover {
  background: linear-gradient(90deg, rgba(228,249,236,.98), rgba(247,249,253,.98));
}
/* Sticky cells need solid bg so gradient rows don't bleed through on scroll */
.channel-table tbody tr.row-qc-done td:nth-child(1),
.channel-table tbody tr.row-qc-done td:nth-child(2) {
  background: rgba(238,252,245,.97);
}
.channel-table tbody tr.row-qc-done:hover td:nth-child(1),
.channel-table tbody tr.row-qc-done:hover td:nth-child(2) {
  background: rgba(230,250,240,.98);
}
.channel-table td:last-child {
  text-align: right;
}
.sort-th {
  cursor: pointer;
  user-select: none;
}
.sort-th:hover {
  color: var(--text);
}
.sort-inactive {
  opacity: .35;
  font-size: 10px;
}
.sort-active {
  color: var(--primary);
  font-size: 11px;
}
.channel-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.96);
  box-shadow: 0 6px 16px rgba(11,32,32,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.channel-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(11,32,32,.16);
}
.channel-title-link {
  color: inherit;
  text-decoration: none;
}
.channel-title-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ── Filters / badges ────────────────────────────────────────────────────── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid #b2d8d2;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.filter-chip button {
  border: none;
  background: none;
  color: currentColor;
  padding: 0;
  line-height: 1;
  opacity: .75;
}
.filter-chip button:hover { opacity: 1; }

.age-badge,
.category-badge,
.tier2-badge,
.action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.age-badge {
  background: var(--info-soft);
  color: #0958d9;
  border: 1px solid #c5deff;
}
.category-badge {
  background: var(--warning-soft);
  color: #b45309;
  border: 1px solid #ffd591;
}
.tier2-badge {
  background: #f3edff;
  color: #6d28d9;
  border: 1px solid #ddc7ff;
}
.role-badge-sm { font-size: 10px; padding: 2px 6px; border-radius: 20px; }

/* ── Login / auth ────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 26%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(135deg, #0F3A3A 0%, #0F3A3A 42%, #088E89 100%);
}
.login-page::before,
.login-page::after {
  content: "";
  position: fixed;
  inset: auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(32px);
  opacity: .30;
  pointer-events: none;
}
.login-page::before {
  top: -120px;
  left: -80px;
  background: rgba(59,130,246,.30);
}
.login-page::after {
  right: -120px;
  bottom: -120px;
  background: rgba(15, 184, 162, .34);
}
.login-grid {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 20px;
  align-items: stretch;
}
.login-grid--centered {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-grid--centered .login-card {
  margin: 0 auto;
}
.login-marketing,
.login-card {
  position: relative;
  z-index: 1;
}
.login-marketing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 28px;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(12,17,32,.30);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.24);
}
.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.login-marketing h1 {
  margin: 18px 0 12px;
  max-width: 16ch;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .96;
  letter-spacing: -0.05em;
  font-weight: 800;
}
.login-marketing p {
  margin: 0;
  max-width: 56ch;
  color: rgba(255,255,255,.76);
  font-size: 15px;
}
.login-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.login-point {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.login-point strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.login-point span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
}
.login-card {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  padding: 34px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: 0 26px 72px rgba(0,0,0,.24);
}
.login-logo {
  text-align: center;
  margin-bottom: 26px;
}
.login-logo h2 {
  letter-spacing: -0.04em;
}
.login-logo p {
  color: var(--muted);
}
.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,58,58,.18);
  background: #fff;
  color: #253041;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(11,32,32,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn-google:hover {
  transform: translateY(-1px);
  border-color: rgba(15,58,58,.30);
  box-shadow: 0 14px 28px rgba(11,32,32,.08);
}

/* ── Forms / upload / tabs ───────────────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: 12px;
  border-color: rgba(15,58,58,.22);
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(15, 184, 162, .42);
  box-shadow: 0 0 0 .2rem rgba(15, 184, 162, .10);
}
.form-label-sm {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--muted-strong);
  font-weight: 700;
}
.upload-zone {
  border: 1.5px dashed rgba(15,58,58,.34);
  border-radius: 18px;
  padding: 42px 24px;
  text-align: center;
  cursor: pointer;
  background: rgba(248,251,255,.92);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: rgba(15, 184, 162, .42);
  background: #E8F5F4;
  box-shadow: 0 16px 32px rgba(15, 184, 162, .06);
  transform: translateY(-1px);
}
.nav-tabs {
  border-bottom-color: rgba(15,58,58,.16);
}
.nav-tabs .nav-link {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted-strong);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-weight: 700;
  background: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

#adminTabs.admin-tabs-shell {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 18px !important;
  border: 1px solid rgba(15,58,58,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 8px 20px rgba(11,32,32,.04);
}
#adminTabs.admin-tabs-shell .nav-item {
  margin: 0;
}
#adminTabs.admin-tabs-shell .nav-link {
  border: none;
  border-radius: 12px;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted-strong);
}
#adminTabs.admin-tabs-shell .nav-link.active {
  background: #fff;
  color: var(--primary);
  border-bottom-color: transparent;
  box-shadow: 0 6px 18px rgba(11,32,32,.06);
}

/* ── Audit log ───────────────────────────────────────────────────────────── */
.audit-row td { font-size: 12px; }
.action-badge {
  background: #EEF1F0;
  color: #455468;
  border: 1px solid rgba(15,58,58,.16);
}

/* ── Tables / utility elements ───────────────────────────────────────────── */
.table thead th {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.table > :not(caption) > * > * {
  border-bottom-color: rgba(15,58,58,.12);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(247,249,253,.96);
}
.text-truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Empty states / helpers ──────────────────────────────────────────────── */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.empty-state i {
  display: block;
  margin-bottom: 12px;
  color: rgba(15,58,58,.35);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15,58,58,.34);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15,58,58,.52);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .login-grid {
    grid-template-columns: 1fr;
  }
  .login-card {
    max-width: none;
    margin-left: 0;
  }
}
@media (max-width: 992px) {
  .sidebar {
    width: 280px;
  }
  .sidebar.collapsed {
    width: 88px;
  }
  .app-main {
    margin-left: 280px;
    width: calc(100vw - 280px);
  }
  .sidebar.collapsed ~ .app-main {
    margin-left: 88px;
    width: calc(100vw - 88px);
  }
  .app-content {
    padding: 20px;
  }
  .page-header,
  .page-hero {
    gap: 14px;
  }
  .admin-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-hero-split .admin-hero-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
  }
  .sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .sidebar.collapsed {
    width: 100%;
  }
  .app-main,
  .sidebar.collapsed ~ .app-main {
    margin-left: 0;
    width: 100%;
    height: auto;
  }
  .sidebar-toggle {
    display: none;
  }
  .sidebar-nav {
    padding-top: 14px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sidebar-link {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
  .sidebar.collapsed .sidebar-link {
    justify-content: center;
  }
  .sidebar-brand,
  .sidebar-bottom {
    padding-left: 16px;
    padding-right: 16px;
  }
  .app-topbar {
    padding: 0 16px;
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .topbar-email {
    display: none;
  }
  .topbar-right {
    margin-left: auto;
  }
  .page-header {
    flex-direction: column;
  }
  .admin-hero-grid {
    grid-template-columns: 1fr;
  }
  .admin-hero-split .admin-hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-metrics,
  .login-points {
    grid-template-columns: 1fr;
  }
  .hero-metric {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .app-main,
  .sidebar.collapsed ~ .app-main {
    width: 100%;
  }
  .app-content {
    padding: 16px;
  }
  .page-hero,
  .login-card,
  .login-marketing {
    border-radius: 22px;
    padding: 18px;
  }
  .admin-hero-value {
    font-size: 26px;
  }
  .hero-title,
  .page-header h4,
  .page-title {
    font-size: 24px;
  }
  .sidebar-link {
    flex-basis: 100%;
  }
}

/* ── QC Modal ─────────────────────────────────────────────────────────────── */
.qc-modal { border-radius: 16px; overflow: hidden; border: none; }

.qc-modal-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #1a2035 0%, #2d3a6b 100%);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.qc-channel-info { display: flex; align-items: center; gap: 14px; }
.qc-channel-thumb {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0;
}
.qc-channel-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
.qc-channel-id    { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; font-family: monospace; }
.qc-meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
  font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
}

.qc-tabs {
  display: flex; padding: 0 24px;
  background: #F8FBFA; border-bottom: 1px solid rgba(15,58,58,0.12);
}
.qc-tab-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.qc-tab-btn:hover { color: var(--muted-strong); }
.qc-tab-btn.active { color: #0FB8A2; border-bottom-color: #0FB8A2; }
.qc-tab-badge {
  background: #0FB8A2; color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px; line-height: 1.4;
}

.qc-modal-body { padding: 20px 24px; max-height: 420px; overflow-y: auto; }

.qc-section { margin-bottom: 20px; }
.qc-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(15,58,58,0.08);
}

.qc-safety-toggle { display: flex; gap: 8px; }
.qc-safety-btn {
  flex: 1; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 2px solid rgba(15,58,58,0.12); background: #F8FBFA; color: var(--muted); cursor: pointer;
  transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.qc-safety-btn.active        { border-color: #52c41a; background: #f6ffed; color: #389e0d; }
.qc-safety-btn.unsafe.active { border-color: #ff4d4f; background: #fff1f0; color: #cf1322; }
.qc-safety-btn:hover         { border-color: #d0d5dd; }

.history-timeline { display: flex; flex-direction: column; }
.history-entry    { display: flex; gap: 14px; padding: 14px 0; }
.history-entry + .history-entry { border-top: 1px solid rgba(15,58,58,0.06); }
.history-dot-col  { display: flex; flex-direction: column; align-items: center; padding-top: 3px; flex-shrink: 0; }
.history-dot      { width: 10px; height: 10px; border-radius: 50%; background: #0FB8A2; border: 2px solid rgba(15,184,162,0.24); }
.history-line     { flex: 1; width: 2px; background: rgba(15,58,58,0.12); margin-top: 4px; min-height: 16px; }
.history-body     { flex: 1; min-width: 0; }
.history-by       { font-size: 13px; font-weight: 600; color: var(--text); }
.history-time     { font-size: 11px; color: var(--muted); }
.history-changes  { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.field-change {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #F8FBFA; border: 1px solid rgba(15,58,58,0.12);
  border-radius: 6px; padding: 5px 10px; font-size: 12px;
}
.field-name  { color: var(--muted); font-weight: 600; min-width: 110px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.change-from { color: #cf1322; background: #fff1f0; padding: 1px 6px; border-radius: 4px; }
.change-to   { color: #389e0d; background: #f6ffed; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.field-change .bi-arrow-right { color: #ccc; font-size: 10px; }

/* ── Skeleton loading ──────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(90deg, #edf0f5 25%, #e0e6ee 50%, #edf0f5 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 6px;
}
.skeleton-pill  { height: 26px; width: 130px; border-radius: 999px; }
.skeleton-value { height: 42px; width: 70%; margin-top: 10px; border-radius: 8px; }

/* Chart loading overlay */
.chart-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  border-radius: 8px;
}

/* ── Green theme: Bootstrap overrides ────────────────────────────────── */
.btn-danger {
  --bs-btn-bg: #0FB8A2;
  --bs-btn-border-color: #0FB8A2;
  --bs-btn-hover-bg: #1e4840;
  --bs-btn-hover-border-color: #1e4840;
  --bs-btn-active-bg: #163830;
  --bs-btn-active-border-color: #163830;
  --bs-btn-focus-shadow-rgb: 41, 92, 81;
  --bs-btn-disabled-bg: #8ab8b2;
  --bs-btn-disabled-border-color: #8ab8b2;
}
.btn-outline-danger {
  --bs-btn-color: #0FB8A2;
  --bs-btn-border-color: #0FB8A2;
  --bs-btn-hover-bg: #0FB8A2;
  --bs-btn-hover-border-color: #0FB8A2;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1e4840;
  --bs-btn-active-border-color: #1e4840;
  --bs-btn-active-color: #fff;
}
.spinner-border.text-danger,
.spinner-grow.text-danger { color: #0FB8A2 !important; }
.nav-tabs .nav-link.active { color: #0FB8A2; border-bottom-color: #0FB8A2; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUCKETS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.buckets-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.buckets-hero-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0FB8A2;
  margin-bottom: 4px;
}
.buckets-hero-title {
  font-size: 2rem;
  font-weight: 800;
  color: #0F3A3A;
  margin: 0 0 4px;
  line-height: 1.1;
}
.buckets-hero-sub {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
}
.buckets-hero-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bucket-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(11,32,32,.05);
}
.bucket-stat-pill.active  { background: #edf9f3; border-color: #a3e6c0; }
.bucket-stat-pill.draft   { background: #f4f5f7; border-color: #d1d5db; }
.bucket-stat-pill.total-ch{ background: #EEF4FF; border-color: #bfdbfe; }
.bucket-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F3A3A;
  line-height: 1;
}
.bucket-stat-pill.active  .bucket-stat-num { color: #0FA968; }
.bucket-stat-pill.draft   .bucket-stat-num { color: #4A5E5E; }
.bucket-stat-pill.total-ch .bucket-stat-num { color: #3b82f6; }
.bucket-stat-label {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 3px;
}

/* Toolbar */
.buckets-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
/* Each toolbar row: primary group grows on the left, secondary group
   (status tabs / controls) sits flush right; both wrap gracefully. */
.btoolbar-row {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}
.btoolbar-row .bucket-status-tabs { margin-left: auto; }
.btoolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: flex-end;
}
.bucket-search-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 420px;
}
.bucket-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .8rem;
}
.bucket-search-input {
  width: 100%;
  padding: 8px 36px 8px 34px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  font-size: .85rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bucket-search-input:focus {
  border-color: #0FB8A2;
  box-shadow: 0 0 0 3px rgba(15,184,162,.1);
}
.bucket-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 2px;
}
.bucket-status-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.bst {
  background: none;
  border: none;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.bst:hover { color: var(--text); background: rgba(15,58,58,0.08); }
.bst.active { background: #0F3A3A; color: #fff; }
.bst.active-tab.active { background: #0FA968; }
.bst.draft-tab.active  { background: #6b7280; }
.bst.arch-tab.active   { background: #ef4444; }
.bst-count {
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: .68rem;
}
.bst:not(.active) .bst-count {
  background: rgba(15,58,58,0.08);
  color: var(--muted);
}
.bucket-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;          /* controls wrap instead of overflowing at higher zoom / narrow widths */
  row-gap: 8px;
  justify-content: flex-end;
}
.bucket-sort-group {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.bucket-sort-select {
  border: none;
  padding: 7px 10px;
  font-size: .78rem;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  outline: none;
  cursor: pointer;
}
.bucket-sort-dir {
  border: none;
  border-left: 1.5px solid var(--border);
  background: none;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: .85rem;
  transition: color .15s;
}
.bucket-sort-dir:hover { color: #0FB8A2; }
.bucket-view-toggle {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.bvt {
  border: none;
  background: none;
  padding: 7px 11px;
  font-size: .85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.bvt:hover { color: var(--text); }
.bvt.active { background: #0F3A3A; color: #fff; }
.btn-new-bucket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  background: #0FB8A2;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.btn-new-bucket:hover { background: #088E89; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,184,162,.3); }

/* Skeleton loader */
.bucket-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.bucket-skeleton-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skel {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(15,58,58,0.08) 25%, #e8ebf0 50%, rgba(15,58,58,0.08) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite;
}
.skel-icon  { width: 44px; height: 44px; border-radius: 12px; }
.skel-title { height: 18px; width: 70%; }
.skel-sub   { height: 13px; width: 45%; }
.skel-stat  { height: 32px; width: 55%; margin-top: 8px; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
.buckets-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px;
  text-align: center;
}
.buckets-empty-icon {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #E8F5F4, #EEF4FF);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  color: #0FB8A2;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(15,184,162,.12);
}
.buckets-empty-title { font-size: 1.25rem; font-weight: 700; color: #0F3A3A; margin-bottom: 8px; }
.buckets-empty-sub   { font-size: .88rem; color: var(--muted); max-width: 340px; }

/* ── Grid cards ── */
.bucket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
.bucket-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(11,32,32,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.bucket-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11,32,32,.1);
}
.bc-stripe {
  height: 4px;
  width: 100%;
  background: #d1d5db;
}
.bc-active  .bc-stripe { background: linear-gradient(90deg, #0FA968, #22d3ee); }
.bc-draft   .bc-stripe { background: linear-gradient(90deg, #9ca3af, #d1d5db); }
.bc-archived .bc-stripe { background: linear-gradient(90deg, #ef4444, #f97316); }

.bc-body { padding: 18px 18px 12px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.bc-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bc-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.bc-icon-wrap.csv { background: #f0fdf4; color: #0FA968; }
.bc-icon-wrap.bq  { background: #EEF4FF; color: #3b82f6; }
.bc-icon-wrap.se  { background: #E8F5F4; color: #0FB8A2; }
.bc-icon-wrap.deal { background: #FFF5E6; color: #B3792A; }
.bc-meta { flex: 1; min-width: 0; }
.bc-name {
  font-size: .92rem;
  font-weight: 700;
  color: #0F3A3A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: help;
}
.bc-badges { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.bc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.bc-badge.status { }
.bc-active  .bc-badge.status { background: #E8F7EF; color: #0FA968; border: 1px solid rgba(15,184,162,.3); }
.bc-draft   .bc-badge.status { background: #f3f4f6; color: #4A5E5E; border: 1px solid #d1d5db; }
.bc-archived .bc-badge.status { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.bc-badge.source { background: #E8F5F4; color: #0FB8A2; border: 1px solid rgba(15,184,162,.25); }
.bc-icon-wrap.csv ~ .bc-meta .bc-badge.source { background: #f0fdf4; color: #0FA968; border-color: #a7f3d0; }
.bc-icon-wrap.deal ~ .bc-meta .bc-badge.source { background: #FFF5E6; color: #B3792A; border-color: #F5D9A8; }

.bc-actions-hover {
  display: none;
  gap: 4px;
}
.bucket-card:hover .bc-actions-hover { display: flex; }

.bc-desc {
  font-size: .8rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  flex: 1;
}
.bc-desc-empty {
  font-size: .78rem;
  color: #D9E3E3;
  font-style: italic;
  flex: 1;
}
.bc-creator {
  font-size: .75rem;
  color: #8A9999;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-creator .bi { margin-right: 3px; opacity: .7; }
.bc-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(15,58,58,0.08);
  margin-top: auto;
}
.bc-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F3A3A;
  line-height: 1;
}
.bc-stat-key {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 2px;
}
.bc-date { font-size: .75rem; color: var(--muted); text-align: right; }

.bc-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(15,58,58,0.05);
}
.bc-open-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: #0FB8A2;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .18s;
}
.bc-open-btn:hover { background: #1e4840; color: #fff; }
.bc-footer-actions { display: flex; gap: 4px; }

/* Action buttons */
.bca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.bca:hover { border-color: #0FB8A2; color: #0FB8A2; background: #E8F5F4; }
.bca.sm { width: 30px; height: 30px; font-size: .8rem; border-radius: 7px; }
.bca.primary { background: #0FB8A2; color: #fff; border-color: #0FB8A2; }
.bca.primary:hover { background: #1e4840; }

/* ── List view ── */
.bucket-list-view {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(11,32,32,.05);
}
/* Horizontal-scroll fallback: keep columns aligned & readable rather than
   squishing them when the viewport is narrow or zoomed in (e.g. 110%). */
.bucket-list-view { overflow-x: auto; }
.blv-header, .blv-row { min-width: 880px; }
.blv-header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: #F8FBFA;
  border-bottom: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  gap: 0;
}
.blv-row {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  gap: 0;
  border-bottom: 1px solid rgba(15,58,58,0.045);
  transition: background .13s, box-shadow .13s;
  cursor: default;
}
.blv-row:last-child { border-bottom: none; }
.blv-row:hover { background: #F0F8F6; box-shadow: inset 3px 0 0 #0FB8A2; }
.blv-active   { border-left: 3px solid #0FA968; }
.blv-draft    { border-left: 3px solid #d1d5db; }
.blv-archived { border-left: 3px solid #ef4444; }
.blv-col { display: flex; align-items: center; padding-right: 12px; }
.blv-col.name { flex: 1; min-width: 0; gap: 10px; padding-right: 16px; }
.blv-col.src  { width: 135px; flex-shrink: 0; }
.blv-col.stat { width: 88px; flex-shrink: 0; }
.blv-col.ch   { width: 82px; flex-shrink: 0; }
.blv-col.dt   { width: 120px; flex-shrink: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.blv-col.act  { width: 96px; flex-shrink: 0; gap: 3px; justify-content: flex-end; padding-right: 0; }
.blv-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.blv-icon.csv { background: #f0fdf4; color: #0FA968; }
.blv-icon.bq  { background: #EEF4FF; color: #3b82f6; }
.blv-icon.se  { background: #E8F5F4; color: #0FB8A2; }
.blv-icon.split   { background: #eff6ff; color: #3b82f6; }
.blv-icon.derived { background: #E8F5F4; color: #088E89; }
.blv-icon.deal    { background: #FFF5E6; color: #B3792A; }
.blv-name { font-size: .875rem; font-weight: 600; color: #0F3A3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.blv-desc { font-size: .73rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; margin-top: 1px; }
.blv-ch-num { font-size: .9rem; font-weight: 700; color: #0F3A3A; }
/* Borderless icon button for star/expand */
.blv-icon-btn {
  background: transparent; border: none; padding: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: #c0d0ce; cursor: pointer;
  transition: color .13s, background .13s; font-size: .9rem; flex-shrink: 0;
}
.blv-icon-btn:hover { color: #f59e0b; background: rgba(245,158,11,.08); }
.blv-icon-btn.starred { color: #f59e0b; }
/* Source type badge colours */
.bc-badge.src-csv  { background: #f0fdf4; color: #0FA968; border-color: #a7f3d0; }
.bc-badge.src-bq   { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.bc-badge.src-se   { background: #E8F5F4; color: #0FB8A2; border-color: rgba(15,184,162,.35); }
.bc-badge.src-split{ background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }
.bc-badge.src-deal { background: #FFF5E6; color: #B3792A; border-color: #F5D9A8; }
/* Status badge colours in list rows */
.blv-row .bc-badge.st-active   { background: #0FA968; color: #fff; border-color: #0FA968; }
.blv-row .bc-badge.st-draft    { background: #f3f4f6; color: #4A5E5E; border-color: #d1d5db; }
.blv-row .bc-badge.st-archived { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.blv-row .bc-badge.st-locked   { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
/* Action buttons: always show open; fade in edit/share on hover */
.blv-hover-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.blv-row:hover .blv-hover-actions { opacity: 1; }
/* Clickable bucket name in list */
.blv-name-link { color: inherit; text-decoration: none; }
.blv-name-link:hover { color: #0FB8A2; text-decoration: underline; text-decoration-color: rgba(15,184,162,.4); text-underline-offset: 2px; }
/* Pagination */
.bucket-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-top: 1px solid var(--border);
  background: #F8FBFA; border-radius: 0 0 16px 16px;
  font-size: .8rem; color: var(--muted);
}
.bpag-controls { display: flex; align-items: center; gap: 3px; }
.bpag-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--border);
  background: #fff; color: var(--muted-strong);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .13s;
}
.bpag-btn:hover:not([disabled]) { border-color: #0FB8A2; color: #0F3A3A; background: rgba(15,184,162,.06); }
.bpag-btn.active { background: #0F3A3A; color: #fff; border-color: #0F3A3A; }
.bpag-btn[disabled] { opacity: .35; cursor: default; }

/* ── Bucket list tree enhancements ──────────────────────────────────────── */
.blv-col.expand { width: 24px; flex-shrink: 0; justify-content: center; padding-right: 4px; }
.blv-col.star   { width: 30px; flex-shrink: 0; justify-content: center; padding-right: 6px; }
.blv-expand-btn {
  background: transparent; border: none; padding: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; color: #b0c4c4; cursor: pointer;
  transition: all .12s; font-size: .72rem;
}
.blv-expand-btn:hover { background: rgba(15,58,58,.07); color: #0F3A3A; }
.blv-expand-btn.is-expanded { color: #0FB8A2; }
.blv-locked  { border-left: 3px solid #3b82f6; }
.blv-starred { background: #fffef8; }
.blv-starred:hover { background: #fffbeb !important; }
.blv-children { background: #F4F9F8; border-bottom: 1px solid rgba(15,58,58,.045); }
.blv-child-row {
  padding-left: 60px !important;
  background: transparent;
  border-bottom: 1px dashed rgba(15,58,58,.05) !important;
}
.blv-child-row:last-child { border-bottom: none !important; }
.blv-child-row:hover { background: #ebf5f3 !important; box-shadow: none !important; }
.blv-tree-line {
  color: #c0d4d0; font-size: .78rem; margin-right: 6px; flex-shrink: 0; user-select: none;
}
.blv-sub {
  font-size: .71rem; color: #0FB8A2; font-weight: 500; margin-top: 1px;
  display: flex; align-items: center; gap: 3px;
}
/* Type filter chips */
/* Type filter — segmented control, consistent with .bucket-status-tabs / .bucket-view-toggle */
.bucket-type-filter {
  display: flex; align-items: center; gap: 2px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.btf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 8px; border-radius: 7px;
  font-size: .95rem; font-weight: 600; line-height: 1;
  border: none; background: none; color: var(--muted);
  cursor: pointer; transition: background .14s, color .14s; white-space: nowrap;
}
.btf.txt { font-size: .78rem; padding: 0 12px; }
.btf:hover { color: var(--text); background: rgba(15,58,58,.07); }
.btf.active { background: #0F3A3A; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   AUDIT DASHBOARD
   ════════════════════════════════════════════════════════════════════════════ */

/* Hero stats */
.audit-hero-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px; font-size: .82rem; font-weight: 500;
  background: rgba(15,184,162,.10); color: #0FB8A2; border: 1px solid rgba(15,184,162,.18);
  box-shadow: 0 8px 18px rgba(15,184,162,.06);
}
.audit-hero-stat--blue {
  background: rgba(59,130,246,.08); color: #3b82f6; border-color: rgba(59,130,246,.18);
}
.audit-hero-stat-num { font-size: 1rem; font-weight: 800; }
.audit-hero-stat-label { font-size: .74rem; opacity: .8; }
.audit-refresh-btn {
  padding: 7px 14px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: #fff; color: var(--muted-strong);
  display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s;
}
.audit-refresh-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(15,184,162,.05); }

/* ── Charts grid ──────────────────────────────────────────────────────────── */
/* Timeline spans full row; donut + top-users share the second row */
.audit-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  margin-bottom: 12px;
}
.audit-chart-card--wide {
  grid-column: 1 / -1;
}
@media (max-width: 680px) {
  .audit-charts-grid { grid-template-columns: 1fr; }
  .audit-chart-card--wide { grid-column: 1; }
}

.audit-chart-card {
  padding: 12px 14px 10px;
  display: flex; flex-direction: column;
  border-radius: 18px;
  transition: transform .16s ease, box-shadow .16s ease;
  overflow: hidden;
  min-height: 180px;
}
.audit-chart-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.audit-chart-label {
  font-size: .72rem; font-weight: 600; color: var(--muted-strong);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.audit-chart-hint {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.audit-chart-body {
  flex: 1; position: relative; min-height: 74px;
}
.audit-chart-card--wide {
  min-height: 220px;
}
.audit-chart-card--wide .audit-chart-body {
  min-height: 140px;
}
.audit-chart-body--donut { min-height: 96px; }
.audit-chart-body canvas { width: 100% !important; height: 100% !important; }

/* Skeleton charts */
.audit-chart-skeleton {
  flex: 1; display: flex; align-items: flex-end; gap: 3px; padding: 0 4px;
  min-height: 72px;
}
.acs-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #D9E3E3 25%, #EEF1F0 50%, #D9E3E3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.audit-chart-skeleton--donut {
  align-items: center; justify-content: center;
}
.acs-donut {
  width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(#D9E3E3 0%, #EEF1F0 50%, #D9E3E3 100%);
  animation: shimmer 1.4s infinite;
}
.acs-hbar {
  height: 16px; border-radius: 4px; margin-bottom: 8px;
  background: linear-gradient(90deg, #D9E3E3 25%, #EEF1F0 50%, #D9E3E3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.audit-chart-skeleton:not(.audit-chart-skeleton--donut) {
  flex-direction: column; align-items: stretch; justify-content: flex-end;
  padding-bottom: 0;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.audit-filter-card {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(15,23,42,.06);
}
.audit-filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.audit-search-wrap {
  position: relative; flex: 1; min-width: 200px;
}
.audit-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .85rem; pointer-events: none;
}
.audit-search-input {
  padding-left: 30px; padding-right: 28px;
  font-size: .83rem; border-radius: 8px;
  border-color: var(--border-strong);
}
.audit-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,184,162,.12); }
.audit-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 0;
  font-size: .9rem; line-height: 1;
}
.audit-filter-select {
  font-size: .82rem; border-radius: 8px; border-color: var(--border-strong);
  min-width: 130px; max-width: 180px;
  color: var(--text);
}
.audit-filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,184,162,.12); }
.audit-date-wrap { display: flex; align-items: center; gap: 5px; }
.audit-date-label { font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.audit-date-input {
  font-size: .82rem; border-radius: 8px; border-color: var(--border-strong);
  min-width: 130px;
}
.audit-reset-btn {
  font-size: .8rem; color: #ef4444; border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px; padding: 5px 12px; background: rgba(239,68,68,.06);
  display: inline-flex; align-items: center; gap: 4px;
  transition: background .15s;
}
.audit-reset-btn:hover { background: rgba(239,68,68,.12); color: #dc2626; }

/* Filter chips */
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.audit-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(15,184,162,.08); color: #0FB8A2; border: 1px solid rgba(15,184,162,.2);
  border-radius: 14px; padding: 3px 10px; font-size: .76rem; font-weight: 500;
}
.audit-chip button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; opacity: .7; line-height: 1; font-size: .8rem;
  display: flex; align-items: center;
}
.audit-chip button:hover { opacity: 1; }

/* ── Body layout (table + detail panel) ──────────────────────────────────── */
.audit-body-layout {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  align-items: start;
}
.audit-body-layout--split {
  grid-template-columns: minmax(0, 1fr) 340px;
}
@media (max-width: 1000px) {
  .audit-body-layout--split { grid-template-columns: 1fr; }
}

/* ── Table card ───────────────────────────────────────────────────────────── */
.audit-table-card {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(15,23,42,.06);
}
.audit-table-meta {
  padding: 12px 18px 8px;
  display: flex; align-items: center; gap: 8px;
}
.audit-table-count { font-size: .8rem; color: var(--muted); }

/* Skeleton rows */
.audit-skeleton-rows { padding: 0 18px 18px; }
.audit-skeleton-row {
  display: grid; grid-template-columns: 100px 180px 130px 80px 1fr;
  gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.ask-col {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, #D9E3E3 25%, #EEF1F0 50%, #D9E3E3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* Table */
.audit-table thead th {
  font-size: .72rem; font-weight: 700; color: var(--muted-strong);
  text-transform: uppercase; letter-spacing: .04em;
  background: #F8FBFA; border-bottom: 1px solid var(--border-strong);
  padding: 10px 12px; white-space: nowrap;
}
.audit-table thead th:first-child { padding-left: 18px; }
.audit-table tbody tr { transition: background .12s; cursor: pointer; }
.audit-table tbody tr:hover { background: rgba(15,184,162,.05); }
.audit-row--active { background: rgba(15,184,162,.07) !important; }
.audit-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.audit-table td:first-child { padding-left: 18px; }

/* TD variants */
.audit-td-time { white-space: nowrap; min-width: 90px; }
.audit-time-rel { font-size: .8rem; font-weight: 600; color: var(--text); display: block; }
.audit-time-abs { font-size: .72rem; color: var(--muted); display: block; }
.audit-td-user { min-width: 160px; max-width: 220px; }
.audit-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .72rem; font-weight: 700; color: #fff;
  margin-right: 6px; flex-shrink: 0;
  vertical-align: middle;
}
.audit-user-email { font-size: .8rem; color: var(--text); vertical-align: middle; }
.audit-td-action { white-space: nowrap; }
.audit-action-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; padding: 3px 9px;
  border-radius: 12px; border: 1px solid transparent;
  text-transform: capitalize; white-space: nowrap;
}
.audit-td-entity { white-space: nowrap; }
.audit-entity-badge {
  display: inline-block; padding: 2px 8px; border-radius: 8px;
  font-size: .72rem; font-weight: 600; background: #EEF1F0; color: #2E3E3E;
  border: 1px solid var(--border-strong); text-transform: capitalize;
}
.audit-td-summary { max-width: 260px; }
.audit-summary-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.audit-summary-text {
  font-size: .78rem;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.audit-row-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,184,162,.18);
  background: rgba(15,184,162,.06);
  color: #0FB8A2;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.audit-row-btn:hover {
  background: rgba(15,184,162,.12);
  color: #1f433b;
}

/* Empty state */
.audit-empty {
  text-align: center; padding: 48px 24px;
}
.audit-empty-icon { font-size: 2.4rem; color: #D9E3E3; display: block; margin-bottom: 10px; }
.audit-empty-title { font-size: .95rem; font-weight: 600; color: var(--muted-strong); margin: 0 0 4px; }
.audit-empty-sub { font-size: .82rem; color: var(--muted); margin: 0; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.audit-pagination {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.apg-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: transparent; font-size: .8rem; color: var(--text);
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.apg-btn:hover:not(:disabled) { background: #EEF1F0; border-color: var(--primary); color: var(--primary); }
.apg-btn--active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.apg-btn:disabled { opacity: .4; cursor: not-allowed; }
.apg-ellipsis { padding: 0 4px; color: var(--muted); font-size: .85rem; }
.apg-info { margin-left: 8px; font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* ── Detail panel ─────────────────────────────────────────────────────────── */
.audit-detail-panel {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  position: sticky; top: 80px;
  max-height: calc(100vh - 100px);
  overflow: hidden;
}
.adp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.adp-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adp-action-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.adp-action-name {
  font-size: .85rem; font-weight: 700; color: var(--text);
  text-transform: capitalize;
}
.adp-entity-type {
  font-size: .72rem; color: var(--muted); text-transform: capitalize;
}
.adp-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: 6px; font-size: .9rem; flex-shrink: 0;
  transition: background .12s;
}
.adp-close:hover { background: #EEF1F0; color: var(--text); }

.adp-body {
  overflow-y: auto; flex: 1; padding: 0 0 16px;
}
.adp-section {
  padding: 12px 16px 0;
}
.adp-section + .adp-section { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 14px; }
.adp-section-title {
  font-size: .7rem; font-weight: 700; color: var(--muted-strong);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 8px;
}
.adp-row {
  display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start;
}
.adp-key {
  font-size: .75rem; font-weight: 600; color: var(--muted-strong);
  min-width: 90px; white-space: nowrap; padding-top: 1px;
  text-transform: capitalize; display: flex; align-items: center; gap: 4px;
}
.adp-val {
  font-size: .78rem; color: var(--text); word-break: break-word;
}
.adp-val--mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .73rem; background: #EEF1F0; padding: 1px 6px;
  border-radius: 5px; color: #334155;
}
.adp-val--wrap { white-space: pre-wrap; }
.adp-summary-text {
  font-size: .82rem; color: var(--muted-strong); line-height: 1.55; margin: 0;
}

.audit-detail-modal .modal-dialog {
  max-width: 900px;
}
.audit-detail-modal-content {
  border: none;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(15,23,42,.22);
  overflow: hidden;
}
.audit-detail-modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.98));
}
.audit-detail-modal-body {
  padding: 18px 20px 14px;
}
.audit-detail-grid-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.audit-detail-meta {
  padding: 12px 14px;
  border-radius: 16px;
  background: #F8FBFA;
  border: 1px solid var(--border);
}
.audit-detail-meta-label {
  font-size: .68rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.audit-detail-meta-value {
  margin-top: 6px;
  font-size: .85rem;
  color: var(--text);
  word-break: break-word;
}
.audit-mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem;
}
.audit-detail-block {
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.audit-detail-block-title {
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.audit-detail-item {
  background: #F8FBFA;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.audit-detail-key {
  display: block;
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: capitalize;
  letter-spacing: .04em;
}
.audit-detail-val {
  font-size: .8rem;
  color: var(--text);
  word-break: break-word;
}
.audit-detail-summary {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted-strong);
}
.audit-detail-modal-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}

/* Audit chart badge */
.audit-chart-badge {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  background: rgba(15,184,162,.10); color: #0FB8A2;
  padding: 2px 8px; border-radius: 10px;
  text-transform: none; letter-spacing: 0;
}

/* Error state */
.audit-error-state {
  padding: 14px 18px;
  color: #ef4444; font-size: .82rem;
  background: rgba(239,68,68,.04); border-bottom: 1px solid rgba(239,68,68,.12);
  display: flex; align-items: center; gap: 6px;
}

/* Table meta pg info */
.audit-table-pg-info {
  margin-left: auto; font-size: .74rem; color: var(--muted);
}

/* View hint arrow shown on row hover */
.audit-view-hint {
  opacity: 0; transition: opacity .15s;
  color: var(--primary); font-size: 1rem; margin-left: 4px;
  vertical-align: middle;
}
.audit-row:hover .audit-view-hint { opacity: 1; }

.audit-dashboard .page-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.84)),
    radial-gradient(circle at top right, rgba(15,184,162,.08), transparent 24%);
}

@media (max-width: 768px) {
  .audit-detail-grid-head,
  .audit-detail-grid {
    grid-template-columns: 1fr;
  }
  .audit-row-btn {
    display: none;
  }
}

/* Detail grid for key-value pairs */
.adp-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.adp-detail-item {
  background: #F8FBFA; border-radius: 8px; padding: 8px 10px;
  border: 1px solid var(--border);
}
.adp-detail-key {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  text-transform: capitalize; display: block; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adp-detail-val {
  font-size: .78rem; color: var(--text); word-break: break-all;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Prev/Next nav in detail panel */
.adp-nav-section { padding-top: 10px; }
.adp-nav-btns {
  display: flex; gap: 8px;
}
.adp-nav-btn {
  flex: 1; padding: 7px 12px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: transparent; color: var(--muted-strong);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all .15s;
}
.adp-nav-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: rgba(15,184,162,.05); }
.adp-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Admin user panel modal ─────────────────────────────────────────────── */
.user-panel-modal .modal-dialog {
  max-width: 1180px;
}
.user-panel-modal .modal-content {
  border: none;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(15,23,42,.22);
}
.user-panel-header {
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.98)),
    radial-gradient(circle at top right, rgba(15,184,162,.07), transparent 22%);
  border-bottom: 1px solid var(--border);
}
.user-panel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(15,184,162,.16), rgba(59,130,246,.12));
  color: var(--primary);
  font-size: 20px;
  flex-shrink: 0;
}
.user-panel-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.user-panel-sub {
  font-size: .84rem;
  color: var(--muted);
}
.user-panel-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-strong);
  font-weight: 700;
  border-radius: 0;
  padding: 10px 0;
  margin-right: 16px;
}
.user-panel-tabs .nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
}
.user-panel-body {
  padding: 20px;
  background:
    radial-gradient(circle at top left, rgba(15,184,162,.03), transparent 24%),
    linear-gradient(180deg, #fff, #F8FBFA);
}
.user-panel-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,58,58,.16);
  box-shadow: var(--shadow-soft);
}
.user-panel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text);
}
.user-bucket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Edit Limits modal ─────────────────────────────────────────── */
.limits-modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
  overflow: hidden;
}
.limits-modal-header {
  border: 0;
  padding: 20px 24px 14px;
  background: linear-gradient(135deg, #F8FBFA 0%, #E8F5F4 100%);
}
.limits-modal-avatar {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: #0FB8A2;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(15, 184, 162, .15);
}
.limits-modal-eyebrow {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #0FB8A2;
}
.limits-modal-title {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0F3A3A;
  word-break: break-all;
}
.limits-modal-body { padding: 18px 24px; background: #fff; }
.limits-section { margin-bottom: 22px; }
.limits-section + .limits-section {
  padding-top: 18px;
  border-top: 1px dashed #D9E3E3;
}
.limits-section-head {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px;
}
.limits-section-head > i {
  font-size: 1rem;
  color: #0FB8A2;
  margin-top: 2px;
}
.limits-section-title { font-size: .92rem; font-weight: 700; color: #0F3A3A; }
.limits-section-sub { font-size: .78rem; color: #4A5E5E; margin-top: 2px; }
.limits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.limits-grid > .limits-card--toggle { grid-column: 1 / -1; }
.limits-card {
  border: 1px solid #D9E3E3;
  border-radius: 10px;
  padding: 12px 14px;
  background: #F2F7F6;
}
.limits-card--toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.limits-card-label { font-size: .78rem; font-weight: 700; color: #0F3A3A; }
.limits-card-help { font-size: .74rem; color: #4A5E5E; margin-top: 2px; }
.limits-card-row {
  margin-top: 8px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.limits-input { width: 130px; }
.limits-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px;
  border: 1px solid #D9E3E3;
  border-radius: 10px;
  background: #F2F7F6;
  min-height: 44px;
  margin-bottom: 10px;
}
.limits-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.limits-chip i { font-size: .7rem; }
.limits-chip.is-locked {
  background: #EEF1F0; color: #4A5E5E; border-color: #D9E3E3;
}
.limits-chip.is-selected {
  background: #E8F5F4; color: #4338ca; border-color: rgba(15,184,162,0.24);
  cursor: pointer;
}
.limits-chip.is-selected:hover { background: #e0e7ff; }
.limits-hint {
  font-size: .74rem; color: #4A5E5E; margin-top: 8px;
}
.limits-badge-protected {
  font-size: .68rem;
  font-weight: 600;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 999px;
}
.limits-perm-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid #D9E3E3;
}
.limits-perm-group-header > i { font-size: 1rem; flex-shrink: 0; }
.limits-perm-group-title {
  font-size: .78rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.limits-perm-group-sub {
  font-size: .72rem;
  color: #8A9999;
  margin-top: 1px;
}
.limits-yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.limits-yt-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #D9E3E3;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  font-size: .82rem;
  font-weight: 600;
  color: #0F3A3A;
  transition: all .15s ease;
  cursor: pointer;
}
.limits-yt-tile > i:first-child { font-size: 1.1rem; }
.limits-yt-label { flex: 1; }
.limits-yt-state { font-size: 1.05rem; color: #D9E3E3; }
.limits-yt-tile:hover { border-color: rgba(15,184,162,0.24); background: #F2F7F6; }
.limits-yt-tile.is-on {
  border-color: #0FB8A2;
  background: #E8F5F4;
  box-shadow: inset 0 0 0 1px #0FB8A2;
}
.limits-yt-tile.is-on .limits-yt-state { color: #0FB8A2; }
.limits-yt-tile.is-locked { opacity: .65; cursor: not-allowed; }
.limits-modal-footer {
  border-top: 1px solid #EEF1F0;
  padding: 14px 24px;
  background: #F2F7F6;
}

/* ── Admin → Users → Actions cell ─────────────────────────────── */
.user-actions-cell { min-width: 220px; }
.user-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.user-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--border, #D9E3E3);
  background: #fff;
  color: var(--text, #0F3A3A);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.user-action-btn:hover { background: #f4f7fb; border-color: #D9E3E3; }
.user-action-btn:active { transform: translateY(1px); }
.user-action-btn i { font-size: .92rem; line-height: 1; }
.user-action-btn span { line-height: 1; }
.user-action-btn--primary {
  color: #1d4ed8;
  border-color: #c7d8ff;
  background: #f0f5ff;
}
.user-action-btn--primary:hover { background: #e2ecff; border-color: #95b3f7; color: #1d4ed8; }
.user-action-btn--ghost {
  color: #0f766e;
  border-color: #c7e5e1;
  background: #f0faf8;
}
.user-action-btn--ghost:hover { background: #dff3ef; border-color: #8fcfc6; color: #0f766e; }
.user-action-btn--icon {
  width: 30px;
  padding: 0;
  justify-content: center;
  color: #4A5E5E;
}
.user-action-btn--icon:hover { background: #eef2f7; color: #0F3A3A; }
.user-protected-pill,
.user-readonly-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .8rem;
}
.user-protected-pill { background: #EEF1F0; color: #4A5E5E; border: 1px solid #D9E3E3; }
.user-readonly-pill { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.user-action-menu { font-size: .82rem; min-width: 180px; padding: 6px; border-radius: 10px; }
.user-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 6px;
  font-weight: 500;
}
.user-action-menu .dropdown-item:hover { background: #f4f7fb; }
.user-action-menu .dropdown-divider { margin: 4px 2px; }
.user-bucket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #F8FBFA;
  border: 1px solid var(--border);
}
.user-bucket-main {
  min-width: 0;
}
.user-bucket-name {
  font-size: .92rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-bucket-meta {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--muted);
}
.user-bucket-empty,
.user-history-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  background: #F8FBFA;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  font-size: .85rem;
}
.history-stat-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,58,58,.16);
  box-shadow: var(--shadow-soft);
}
.history-stat-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
}
.history-stat-value {
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.user-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.user-history-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,58,58,.16);
  box-shadow: var(--shadow-soft);
}
.user-history-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
.user-history-body {
  min-width: 0;
  flex: 1;
}
.user-history-action {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  text-transform: capitalize;
}
.user-history-entity {
  margin-top: 2px;
  font-size: .78rem;
  color: var(--muted);
  text-transform: capitalize;
}
.user-history-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.user-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #F8FBFA;
  border: 1px solid var(--border);
  color: var(--muted-strong);
  font-size: .76rem;
}

/* ── Searchable Select (searchable-select directive) ────────────────────── */
.ss-wrap {
  position: relative;
  display: block;
  width: 100%;
  font-size: .8rem;
}

.ss-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: .82rem;
  color: #122033;
  transition: border-color .15s ease, box-shadow .15s ease;
  gap: 6px;
  min-height: 32px;
}
.ss-trigger:hover,
.ss-wrap.open .ss-trigger {
  border-color: #9fb4cf;
  box-shadow: 0 0 0 2px rgba(133, 161, 189, .14);
  outline: none;
}

.ss-trigger-core {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.ss-trigger-text {
  color: #122033;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ss-trigger-text.ss-is-placeholder { color: #8a9bae; font-weight: 400; }
.ss-caret       { font-size: .7rem; color: #8a9bae; flex-shrink: 0; transition: color .15s; }
.ss-wrap.open .ss-caret { color: #5f738d; }

.ss-panel {
  /* inline styles (position/top/left/width/maxHeight/zIndex) set by directive */
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ss-search-wrap {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid #edf2f7;
  gap: 6px;
  background: #F8FBFA;
}
.ss-search-icon  { color: #8a9bae; font-size: .75rem; flex-shrink: 0; }
.ss-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .82rem;
  color: #212529;
  padding: 0;
}
.ss-search-input::placeholder { color: #b0bec5; }
.ss-search-clear {
  border: none; background: none; padding: 0; cursor: pointer;
  color: #b0bec5; font-size: .8rem; line-height: 1;
}
.ss-search-clear:hover { color: #ef4444; }

.ss-options {
  overflow-y: auto;
  padding: 4px 0;
  flex: 1 1 auto;
  min-height: 0;
}
.ss-options::-webkit-scrollbar { width: 4px; }
.ss-options::-webkit-scrollbar-thumb { background: #D9E3E3; border-radius: 99px; }

.ss-option {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  font-size: .8rem;
  color: #344054;
  gap: 8px;
  transition: background .12s, color .12s;
  line-height: 1.3;
}
.ss-option:hover     { background: #f6f9fc; color: #122033; }
.ss-option.selected  { background: #eef6ff; color: #17365c; font-weight: 600; }

/* Value text grows to fill, count chip stays at the right edge. */
.ss-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-option-count {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 500;
  color: #6b7a8f;
  background: #eef2f7;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.ss-option.selected .ss-option-count { background: #d8e8ff; color: #1d4ed8; }
.ss-option:hover    .ss-option-count { background: #e3eaf3; }
/* Cold-cache placeholder shown until the count sidecar is seeded.
   Toned down so it reads as transient status, not a real value. */
.ss-option-count.ss-option-count-pending {
  background: transparent;
  color: #94a3b8;
  font-style: italic;
  font-weight: 400;
  font-size: .65rem;
  padding: 1px 4px;
}
.ss-option.selected .ss-option-count.ss-option-count-pending,
.ss-option:hover    .ss-option-count.ss-option-count-pending {
  background: transparent;
  color: #6b7a8f;
}

.ss-check-col {
  width: 14px;
  flex-shrink: 0;
  font-size: .72rem;
  color: #5f84d6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ss-all-option  { font-style: italic; color: #8a9bae; }
.ss-all-option.selected { color: #17365c; font-style: normal; font-weight: 600; }
.ss-null-opt    { color: #92400e; }
.ss-null-opt.selected { background: #fff3cd; color: #92400e; }
.ss-null-opt:hover { background: #fff8d9; color: #92400e; }

.ss-divider { height: 1px; background: #edf2f7; margin: 4px 0; }

.ss-empty {
  padding: 12px;
  font-size: .78rem;
  color: #8a9bae;
  text-align: center;
}

/* Multi-select extras */
.ss-trigger-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #d5dce7;
  background: #fff;
  color: #95a2b3;
  font-size: .7rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, border-color .12s;
}
.ss-trigger-actions:hover {
  color: #dc2626;
  border-color: #f2b8b8;
}

.ss-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #17365c;
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  border-radius: 99px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: auto;
}

.ss-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-top: 1px solid #edf2f7;
  background: #F8FBFA;
}
.ss-footer-count { font-size: .74rem; color: #8a9bae; }
.ss-footer-clear {
  border: none; background: none; padding: 0;
  font-size: .74rem; color: #ef4444; cursor: pointer; font-weight: 600;
}
.ss-footer-clear:hover { text-decoration: underline; }

/* ── Classification Progress Modal ───────────────────────────────────────── */
.cp-progress-clickable { cursor: pointer; transition: opacity .15s; }
.cp-progress-clickable:hover { opacity: .8; }

.cp-modal { border-radius: 16px; overflow: hidden; }

.cp-modal-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #1e2a4a 0%, #2d3a6b 100%);
  padding: 14px 20px; color: #fff;
}
.cp-modal-title {
  font-size: .95rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.cp-modal-title .bi { color: #7c9ef5; font-size: 1.1rem; }
.cp-modal-stats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto;
}
.cp-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.1); border-radius: 8px; padding: 4px 12px; }
.cp-stat-val { font-size: .9rem; font-weight: 700; color: #fff; line-height: 1; }
.cp-stat-lbl { font-size: .65rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.cp-stat.ok .cp-stat-val { color: #4ade80; }
.cp-stat.fail .cp-stat-val { color: #f87171; }
.cp-stat.prog .cp-stat-val { color: #93c5fd; }

.cp-search-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid #D9E3E3; background: #F8FBFA;
}
.cp-search-wrap { display: flex; align-items: center; gap: 0; flex: 1; max-width: 420px; border: 1px solid #d1d9e6; border-radius: 8px; overflow: hidden; background: #fff; }
.cp-search-icon { padding: 0 10px; color: #8A9999; font-size: .85rem; }
.cp-search-input { flex: 1; border: none; outline: none; padding: 7px 4px; font-size: .82rem; background: transparent; }
.cp-search-btn { padding: 6px 14px; background: #0FB8A2; color: #fff; border: none; font-size: .78rem; cursor: pointer; font-weight: 600; }
.cp-search-btn:hover { background: #3451d1; }

.cp-loading { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.cp-empty   { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; color: #8A9999; }

.cp-table { width: 100%; }
.cp-table-head, .cp-row {
  display: grid;
  grid-template-columns: 44px 1fr 110px 180px 200px;
  align-items: center; gap: 8px; padding: 6px 14px;
}
.cp-table-head {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #8A9999; background: #f1f5fb; border-bottom: 1px solid #D9E3E3; position: sticky; top: 0; z-index: 1;
}
.cp-row { border-bottom: 1px solid #f1f5fb; transition: background .1s; }
.cp-row:hover { background: #f8faff; }
.cp-col { overflow: hidden; }

.cp-thumb { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid #D9E3E3; }
.cp-thumb-ph { width: 36px; height: 36px; border-radius: 50%; background: #D9E3E3; display: flex; align-items: center; justify-content: center; color: #8A9999; font-size: .9rem; }

.cp-ch-name { font-size: .82rem; font-weight: 600; color: #0F3A3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ch-id   { font-size: .68rem; color: #8A9999; font-family: monospace; }

.cp-cat-badge { font-size: .72rem; background: #E8F5F4; color: #0FB8A2; border-radius: 6px; padding: 2px 7px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 170px; }

.cp-status-badge { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.cp-s-ok      { background: #dcfce7; color: #15803d; }
.cp-s-done    { background: #bbf7d0; color: #166534; }
.cp-s-fail    { background: #fee2e2; color: #b91c1c; }
.cp-s-running { background: #dbeafe; color: #1d4ed8; }
.cp-s-queued  { background: #fef9c3; color: #854d0e; }
.cp-s-pending { background: #EEF1F0; color: #4A5E5E; }
.cp-s-unknown { background: rgba(15,58,58,0.06); color: #4A5E5E; }
.cp-s-loading { background: #EEF1F0; color: #8A9999; animation: cp-pulse 1.2s ease-in-out infinite; }
@keyframes cp-pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }

.cp-classified-as { font-size: .7rem; color: #0FA968; font-weight: 600; margin-left: 4px; }

.cp-fail-reason {
  display: block; font-size: .7rem; color: #dc2626; margin-top: 2px;
  max-width: 220px; word-break: break-word; line-height: 1.3;
  cursor: help;
}

.cp-footer {
  display: flex; align-items: center; gap: 4px; padding: 10px 16px;
  border-top: 1px solid #D9E3E3; background: #F8FBFA;
}
.cp-pg-btn {
  min-width: 30px; height: 30px; border: 1px solid #d1d9e6; background: #fff;
  border-radius: 6px; font-size: .78rem; cursor: pointer; color: #2E3E3E;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
  transition: all .15s;
}
.cp-pg-btn:hover:not([disabled]) { background: #0FB8A2; color: #fff; border-color: #0FB8A2; }
.cp-pg-btn.active { background: #0FB8A2; color: #fff; border-color: #0FB8A2; font-weight: 700; }

/* ── Search Engine (Google-style SERP) ────────────────────────────────────── */
.se-page { max-width: 940px; margin: 0 auto; }

/* ── Gradient accent bar at top of discovery page ── */
.se-glow-bar {
  height: 3px; border-radius: 0 0 3px 3px; margin-bottom: 0;
  background: linear-gradient(90deg, transparent 0%, #a78bfa 20%, #818cf8 45%, #2dd4bf 72%, #5eead4 88%, transparent 100%);
}

/* Hero / search area */
.se-hero { display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 48px 0 32px; transition: padding .3s; }
.se-hero.se-hero-compact { padding: 16px 0 20px; }
/* In compact mode the title is gone — push the search-wrap down so
   the Saved corner button has a clean band above the search box. */
.se-hero-compact .se-search-wrap { padding-top: 32px; }
.se-hero-title { text-align: center; }

/* ── Discovery Engine badge ── */
.se-disco-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f5f3ff; border: 1.5px solid #ddd6fe;
  border-radius: 20px; padding: 4px 14px; margin-bottom: 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7c3aed;
}
.se-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a78bfa; box-shadow: 0 0 7px #a78bfa;
  animation: se-pulse 2s infinite; flex-shrink: 0;
}
@keyframes se-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

/* ── Hero headline ── */
.se-hero-h1 {
  font-size: 2rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: 10px; color: #162640;
}
.se-hero-gradient {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 40%, #2dd4bf 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.se-hero-p { font-size: .9rem; color: #4A5E5E; max-width: 460px; line-height: 1.7; margin-bottom: 4px; }

.se-logo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #a78bfa, #818cf8 50%, #2dd4bf);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .28);
}

/* Search box */
.se-search-wrap { width: 100%; max-width: 880px; }
.se-search-box {
  --se-h: 48px;
  display: flex; align-items: stretch; background: #fff;
  height: var(--se-h);
  border: 1.5px solid #d8dde8; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .2s, border-color .2s; overflow: hidden;
}
.se-search-box:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.se-search-box.se-search-box-focused {
  border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.14);
}
.se-search-icon-inner {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px 0 18px; font-size: 1rem; color: #8A9999; flex-shrink: 0;
}
.se-search-input {
  flex: 1; border: none; outline: none; font-size: .95rem;
  padding: 0; background: transparent; color: var(--text); min-width: 0;
}
.se-search-input::placeholder { color: #8A9999; }
.se-search-clear {
  background: none; border: none; cursor: pointer; padding: 0 12px;
  color: #8A9999; font-size: .85rem; display: inline-flex; align-items: center;
}
.se-search-clear:hover { color: #4A5E5E; }
.se-search-divider {
  width: 1px; align-self: center; height: 24px; background: #D9E3E3; flex-shrink: 0;
}
.se-search-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 26px;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #0891b2 100%);
  color: #fff; border: none;
  font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: opacity .15s; flex-shrink: 0;
}
.se-search-btn:hover:not([disabled]) { opacity: .88; }
.se-search-btn:disabled { opacity: .6; cursor: not-allowed; }
/* AI provider badge — positioned absolute to the search-wrap so it
   floats just to the right of the rounded search pill (the pill's
   `overflow: hidden` would otherwise clip a half-circle off the badge,
   which is what produced the "((O" sliver in earlier screenshots).
   Soft pastel chip — light fill, mid-weight border, brand-colour
   letter — so it reads as a subtle indicator instead of a heavy dot. */
.se-search-wrap { position: relative; }
.se-ai-badge {
  position: absolute;
  /* Bottom-right of the wrap, vertically centred against the search box
     (which is the wrap's last block child). Pulls 2 px outside the
     box on the right so it sits clearly *next* to the pill, not on it. */
  bottom: 12px;
  right: -34px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: .72rem; font-weight: 700; line-height: 1;
  flex-shrink: 0;
  cursor: default;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  user-select: none;
}
/* OpenAI — light green chip */
.se-ai-badge-o {
  background: #d1fae5;
  color: #047857;
  border: 1.5px solid #a7f3d0;
}
/* Gemini — light blue chip */
.se-ai-badge-g {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1.5px solid #bfdbfe;
}
/* On narrow viewports the wrap can't spill outside the page; tuck the
   badge inside the wrap's right padding instead of off its right edge. */
@media (max-width: 720px) {
  .se-ai-badge { right: 6px; bottom: 14px; }
}

/* Single filter strip — replaces the 3 stacked filter rows */
.se-filter-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 5px; padding: 7px 14px; margin-top: 6px;
  background: #fff; border: 1px solid #edf0f4; border-radius: 10px;
}
.se-filter-strip-div {
  width: 1px; height: 16px; background: #D9E3E3;
  flex-shrink: 0; align-self: center; margin: 0 2px;
}

/* Filter pills */
.se-filter-pill {
  --se-pill-h: 30px;
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--se-pill-h);
  font-size: .72rem; font-weight: 500;
  padding: 0 10px;
  border: 1px solid #e8edf4; border-radius: 20px;
  background: #F8FBFA; color: #4A5E5E; cursor: pointer; transition: all .15s;
  white-space: nowrap; line-height: 1;
}
.se-filter-pill > i { font-size: .78rem; line-height: 1; }
.se-filter-pill:hover { border-color: rgba(15,184,162,.4); color: #088E89; background: #E8F5F4; }
.se-filter-toggle.active { background: #E8F5F4; border-color: rgba(15,184,162,.3); color: #088E89; font-weight: 600; }

/* Max-results numeric box */
.se-results-box {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px;
  padding: 0 10px;
  background: #F8FBFA;
  border: 1px solid #e8edf4;
  border-radius: 20px;
  font-size: .72rem;
  color: #4A5E5E;
  transition: border-color .15s, box-shadow .15s;
}
.se-results-box:hover { border-color: rgba(15,184,162,.45); }
.se-results-box:focus-within {
  border-color: rgba(15,184,162,.55);
  box-shadow: 0 0 0 3px rgba(15,184,162,.1);
}
.se-results-box > i { font-size: .78rem; color: #8A9999; }
.se-results-input {
  width: 36px;
  border: none; outline: none; background: transparent;
  font-size: .72rem; font-weight: 700; color: #0F3A3A;
  text-align: center;
  padding: 0; margin: 0;
  -moz-appearance: textfield;
}
.se-results-input::-webkit-outer-spin-button,
.se-results-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.se-results-suffix { font-weight: 500; color: #4A5E5E; }
.se-filter-pill-lang { padding: 0 0 0 10px; min-width: 140px; gap: 0; overflow: hidden; }
.se-filter-pill-lang > i { margin-right: 5px; }
.se-filter-pill-lang searchable-select {
  flex: 1; display: flex; align-items: stretch; height: 100%;
}
.se-filter-pill-lang searchable-select .ss-wrap { flex: 1; height: 100%; }
.se-filter-pill-lang searchable-select .ss-trigger {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 10px 0 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100%;
  font-size: .72rem;
  color: #4A5E5E;
}
.se-filter-pill-lang searchable-select .ss-trigger:hover,
.se-filter-pill-lang searchable-select .ss-trigger:focus { background: transparent !important; }
.se-filter-pill-lang searchable-select .ss-trigger-text { font-weight: 500; }
.se-filter-pill-lang searchable-select .ss-caret { color: #8A9999; font-size: .8rem; }
.se-pill-select {
  border: none; outline: none; background: transparent; font-size: .72rem;
  font-weight: 500; color: #4A5E5E; cursor: pointer; padding: 0;
  height: 100%;
}

/* Loading */
.se-loading-state { padding: 40px 0; }
.se-loading-bar {
  height: 3px; background: #D9E3E3; border-radius: 2px; overflow: hidden;
}
.se-loading-fill {
  height: 100%; width: 40%; background: linear-gradient(90deg, #0FB8A2, #088E89);
  border-radius: 2px; animation: se-slide 1.2s ease-in-out infinite;
}
@keyframes se-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.se-ai-pulse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #E8F5F4, #f0fdf4);
  font-size: 1.6rem; color: #f59e0b;
  animation: se-pulse 1.5s ease-in-out infinite;
}
@keyframes se-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: .8; }
}

/* AI banner */
.se-ai-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #E8F5F4 0%, #f0fdfa 100%);
  border: 1px solid rgba(15,184,162,.2);
  border-left: 3px solid #0FB8A2;
  border-radius: 10px; margin-bottom: 14px; font-size: .78rem;
}
.se-ai-banner-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  color: #fff; font-size: .7rem;
}
.se-ai-label {
  font-weight: 600; white-space: nowrap;
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.se-ai-query {
  color: #0F3A3A; font-style: italic; font-weight: 500;
}
.se-ai-topics { display: flex; gap: 5px; flex-wrap: wrap; }
.se-topic-chip {
  display: inline-block; font-size: .7rem; font-weight: 500;
  background: #fff; color: #088E89;
  border: 1px solid rgba(15,184,162,.3); border-radius: 20px; padding: 2px 10px;
  box-shadow: 0 1px 3px rgba(124,58,237,.08);
}

/* AI-fillin banner — teal accent for "AI auto-applied filters" callout */
.se-ai-banner-fillin {
  background: linear-gradient(135deg, #f0fdfa 0%, #E8F5F4 100%);
  border-color: #99f6e4;
  border-left-color: #2dd4bf;
}
.se-ai-banner-fillin .se-ai-label {
  background: linear-gradient(135deg, #0d9488, #0FB8A2);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.se-ai-banner-fillin .se-topic-chip {
  background: #fff;
  color: #0d9488;
  border-color: #99f6e4;
  box-shadow: 0 1px 3px rgba(13,148,136,.08);
}

/* Add-more-topics row */
.se-extra-topics-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px;
  background: #F8FBFA;
  border: 1px dashed rgba(15,184,162,.25);
  border-radius: 8px;
  margin-bottom: 12px;
}
.se-extra-topics-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.se-topic-chip-extra {
  background: #E8F5F4; color: #088E89; border-color: rgba(15,184,162,.3);
}
.se-topic-chip-empty {
  background: transparent; color: #8A9999; border-color: #D9E3E3;
  font-style: italic; cursor: default;
}
.se-extra-topics-label {
  font-size: .82rem; font-weight: 600; color: #0F3A3A;
}
.se-extra-topics-input-row {
  display: flex; align-items: center; gap: 8px;
}
.se-extra-topics-input {
  flex: 1; min-width: 0;
  padding: 5px 10px; font-size: .83rem;
  border: 1px solid rgba(15,58,58,.14); border-radius: 6px;
  background: #fff; color: #0F3A3A;
  outline: none;
}
.se-extra-topics-input:focus { border-color: #0FB8A2; box-shadow: 0 0 0 2px rgba(15,184,162,.15); }
.se-extra-topics-add-btn {
  padding: 4px 9px; background: #E8F5F4; color: #088E89;
  border: 1px solid rgba(15,184,162,.3); border-radius: 6px; line-height: 1;
}
.se-extra-topics-add-btn:hover { background: rgba(15,184,162,.15); border-color: rgba(15,184,162,.5); }
.se-extra-topics-search-btn { white-space: nowrap; }

/* Stats bar */
.se-stats-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: .82rem;
}
.se-stat-count { color: #4A5E5E; }
.se-sort-group { display: flex; align-items: center; gap: 4px; }
.se-sort-btn {
  font-size: .75rem; padding: 4px 10px; border: 1px solid #d8dde8;
  border-radius: 20px; background: #fff; cursor: pointer; color: #4A5E5E;
  display: inline-flex; align-items: center; transition: all .15s;
}
.se-sort-btn:hover, .se-sort-btn.active { background: #E8F5F4; border-color: rgba(15,184,162,.35); color: #088E89; }
.sort-active { color: #0FB8A2; }
.sort-inactive { opacity: .4; }

/* ── Channel results section — purple bordered container ── */
.se-ch-section { margin-bottom: 16px; }

.se-ch-section-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px;
  background: #E8F5F4; border: 1.5px solid rgba(15,184,162,.3); border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.se-ch-section-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #088E89;
}
.se-ch-section-count {
  font-size: .68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; background: #fff; color: #088E89; border: 1px solid rgba(15,184,162,.3);
}
.se-ch-section-count-cache { background: #fffbeb; color: #d97706; border-color: #fde68a; }

.se-ch-bulk {
  display: flex; align-items: center; gap: 5px; margin-left: auto; flex-wrap: wrap;
}
.se-ch-bulk-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 7px; font-size: .71rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  border: 1.5px solid #D9E3E3; background: #fff; color: #4A5E5E; transition: all .12s;
}
.se-ch-bulk-btn:hover { border-color: rgba(15,184,162,.35); color: #088E89; background: #E8F5F4; }
.se-ch-bulk-btn-bucket {
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  color: #fff; border: none;
}
.se-ch-bulk-btn-bucket:hover { opacity: .88; color: #fff; background: linear-gradient(135deg,#0FB8A2,#088E89); }

.se-ch-ai-bar {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 6px 16px; font-size: .7rem;
  background: #E8F5F4;
  border-left: 1.5px solid rgba(15,184,162,.3); border-right: 1.5px solid rgba(15,184,162,.3);
  color: #088E89;
}

/* Subtle scrollbar for channel + video lists */
.se-ch-list::-webkit-scrollbar,
.se-vid-list::-webkit-scrollbar { width: 5px; }
.se-ch-list::-webkit-scrollbar-track,
.se-vid-list::-webkit-scrollbar-track { background: transparent; }
.se-ch-list::-webkit-scrollbar-thumb { background: rgba(15,184,162,.3); border-radius: 4px; }
.se-ch-list::-webkit-scrollbar-thumb:hover { background: #0FB8A2; }
.se-vid-list::-webkit-scrollbar-thumb { background: #99f6e4; border-radius: 4px; }
.se-vid-list::-webkit-scrollbar-thumb:hover { background: #2dd4bf; }

/* Collapse toggle button (shared by channels + videos) */
.se-section-collapse-btn {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(15,184,162,.3); background: #fff; color: #088E89;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .72rem; transition: all .15s;
  padding: 0;
}
.se-section-collapse-btn:hover { background: #E8F5F4; }
.se-section-collapse-btn-teal { border-color: #99f6e4; color: #0d9488; }
.se-section-collapse-btn-teal:hover { background: #f0fdfa; }

/* When section is collapsed, round all four corners of the header */
.se-section-collapsed .se-ch-section-header { border-radius: 12px; border-bottom: 1.5px solid rgba(15,184,162,.3); }
.se-section-collapsed .se-vid-section-header { border-radius: 12px; border-bottom: 1.5px solid #99f6e4; }

.se-ch-list {
  border: 1.5px solid rgba(15,184,162,.3); border-top: none;
  border-radius: 0 0 12px 12px; overflow: hidden; background: #fff;
  /* Scrollable — show ~5 cards, user scrolls for the rest */
  max-height: 500px; overflow-y: auto;
}

/* Cards inside .se-ch-list — no gap, use border-bottom separators */
.se-ch-list .se-result-card {
  border-radius: 0; border: none;
  border-bottom: 1px solid rgba(15,58,58,.06);
  box-shadow: none;
}
.se-ch-list .se-result-card:last-child { border-bottom: none; }
.se-ch-list .se-result-card:hover { background: #F8FBFA; box-shadow: none; border-color: rgba(15,58,58,.06); }
.se-ch-list .se-result-card.expanded { background: #F8FBFA; }

/* Standalone card (outside section) — keep original rounded style */
.se-result-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid #D9E3E3; border-radius: 14px;
  padding: 16px; transition: box-shadow .15s, border-color .15s;
}
.se-result-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); border-color: rgba(15,184,162,0.24); }
.se-result-card.expanded { border-color: #0FB8A2; }

.se-rank {
  font-size: .72rem; font-weight: 700; color: #8A9999; min-width: 20px;
  padding-top: 4px; text-align: center; flex-shrink: 0;
}
.se-result-avatar { flex-shrink: 0; display: block; }
.se-avatar-img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid #D9E3E3;
}
.se-avatar-ph {
  width: 48px; height: 48px; border-radius: 50%; background: #E8F5F4;
  align-items: center; justify-content: center; color: #0FB8A2; font-size: 1.1rem;
}
.se-result-body { flex: 1; min-width: 0; }

.se-result-title {
  font-size: .97rem; font-weight: 700; color: #1e3a5f; text-decoration: none;
  line-height: 1.3; display: block;
}
.se-result-title:hover { color: #0FB8A2; text-decoration: underline; }
.se-result-url { font-size: .72rem; color: #4A5E5E; margin-top: 1px; }

/* Meta pills */
.se-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.se-meta-pill {
  display: inline-flex; align-items: center; font-size: .72rem;
  background: #F8FBFA; border: 1px solid #D9E3E3; border-radius: 20px;
  padding: 2px 10px; color: #4A5E5E;
}
.se-meta-pill.se-safe { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.se-meta-pill.se-unsafe { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Inline score */
.se-score-inline { display: flex; align-items: center; gap: 8px; }
.se-score-bar-wrap {
  width: 80px; height: 5px; background: #D9E3E3; border-radius: 3px; overflow: hidden;
}
.se-score-bar-fill { height: 100%; background: linear-gradient(90deg, #0FB8A2, #088E89); border-radius: 3px; }
.se-score-pct { font-size: .75rem; font-weight: 600; color: #0FB8A2; }

/* Expand */
.se-expand-btn {
  display: inline-flex; align-items: center; gap: 4px; font-size: .72rem;
  color: #4A5E5E; background: none; border: none; padding: 0; cursor: pointer;
}
.se-expand-btn:hover { color: #0FB8A2; }
.se-expand-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #D9E3E3; }
.se-kw-chip {
  display: inline-block; font-size: .68rem; background: #E8F5F4; color: #0FB8A2;
  border: 1px solid rgba(15,184,162,0.24); border-radius: 20px; padding: 1px 8px;
  margin: 2px 2px 2px 0;
}

/* Match badge */
.se-match-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  border-radius: 20px; padding: 2px 10px; text-transform: capitalize;
  border: 1px solid transparent;
}
.se-match-semantic { background: #E8F5F4; color: #0FB8A2; border-color: rgba(15,184,162,0.24); }
.se-match-keyword  { background: #fef9ee; color: #b45309; border-color: #fde68a; }
.se-match-hybrid   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.cp-pg-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ============================================================================
   Search Engine — Save Search & Create Bucket
   ============================================================================ */

/* Saved searches launcher pill */
.se-saved-wrap { position: relative; }
.se-saved-btn { cursor: pointer; }
.se-saved-wrap.open .se-saved-btn {
  background: #E8F5F4;
  border-color: rgba(15,184,162,0.24);
  color: #088E89;
}
.se-saved-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #0FB8A2;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.se-saved-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1050;
  width: 360px;
  max-height: 420px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  display: flex;
  flex-direction: column;
}
.se-saved-panel-head {
  padding: 12px 14px;
  font-weight: 600;
  font-size: .85rem;
  color: #0F3A3A;
  border-bottom: 1px solid #EEF1F0;
  background: linear-gradient(180deg, #F2F7F6 0%, #ffffff 100%);
}
.se-saved-empty { padding: 28px 16px; text-align: center; }
.se-saved-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  max-height: 360px;
}
.se-saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.se-saved-item:hover { background: #E8F5F4; }
.se-saved-item-main { flex: 1; min-width: 0; }
.se-saved-item-name {
  font-weight: 600;
  font-size: .88rem;
  color: #0F3A3A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-saved-item-meta {
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .75rem;
}
.se-saved-del {
  border: none;
  background: transparent;
  color: #8A9999;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.se-saved-del:hover { background: #fee2e2; color: #dc2626; }

/* Save / Create Bucket buttons in stats bar */
.se-action-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

/* Modals (light, centered, custom — independent of Bootstrap modal) */
.se-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  z-index: 1080;
  animation: seFade .15s ease;
}
.se-modal {
  position: fixed;
  z-index: 1090;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: seSlide .18s ease;
}
@keyframes seFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes seSlide {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.se-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, #E8F5F4 0%, #f0fdfa 100%);
  border-bottom: 1px solid rgba(15,184,162,.12);
  position: relative;
}
.se-modal-header-bucket {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-bottom-color: #a5f3fc;
}
.se-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0FB8A2 0%, #088E89 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(15,184,162,.35);
}
.se-modal-icon-bucket {
  background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
  box-shadow: 0 4px 12px rgba(6, 182, 212, .35);
}
.se-modal-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0F3A3A;
  line-height: 1.3;
}
.se-modal-sub {
  font-size: .8rem;
  color: #4A5E5E;
  margin-top: 2px;
  line-height: 1.4;
}
.se-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, .6);
  color: #4A5E5E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.se-modal-close:hover { background: #fff; color: #0F3A3A; }

.se-modal-body { padding: 18px 20px; overflow-y: auto; }
.se-modal-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #0F3A3A;
  margin-bottom: 6px;
}

.se-modal-summary {
  margin-top: 14px;
  padding: 12px;
  background: #F8FBFA;
  border: 1px solid #D9E3E3;
  border-radius: 10px;
  font-size: .8rem;
  color: #2E3E3E;
}
.se-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 0;
}

.se-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #EEF1F0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #F2F7F6;
}

/* Toasts */
.se-toast {
  display: inline-flex;
  align-items: center;
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .85rem;
  animation: seFade .2s ease;
}
.se-toast-success {
  background: #E8F5F4;
  color: #088E89;
  border: 1px solid #6ee7b7;
}
.se-toast-success a { color: #0FB8A2; font-weight: 600; }

/* Saved button — lives inline at the right end of the top filter row.
   Previously it was corner-docked on the hero (`position: absolute`),
   which read as a floating element disconnected from the toolbar. Now
   it's a normal flex child of the filter row; `margin-left: auto`
   pushes it to the right edge, keeping the filter pills clustered on
   the left and producing a clean `[filters] ··· [Saved]` toolbar. */
.se-hero { position: relative; }
/* Corner-docked Saved launcher — pinned to top-right of the hero so it
   never competes with the filter row for horizontal space. The dropdown
   panel still anchors via `top: calc(100% + 8px); right: 0` so it falls
   neatly under the button. */
.se-saved-wrap-corner {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
}
/* Compact-hero (results view) — tuck the button slightly closer to the
   corner since the title row is gone. */
.se-hero-compact > .se-saved-wrap-corner { top: 10px; right: 10px; }
.se-saved-corner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #D9E3E3;
  color: #4A5E5E;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: all .15s;
}
.se-saved-corner:hover {
  border-color: rgba(15,184,162,0.24);
  color: #088E89;
  background: #E8F5F4;
  box-shadow: 0 2px 6px rgba(15, 184, 162, .12);
}
.se-saved-corner i { font-size: .95rem; color: #0FB8A2; }
.se-saved-wrap.open .se-saved-corner {
  background: #E8F5F4;
  border-color: rgba(15,184,162,0.24);
  color: #088E89;
}
.se-saved-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0FB8A2;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}

/* ── Search-Engine type selector ──────────────────────────────────────── */
.se-type-selector {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid #D9E3E3; border-radius: 12px;
  padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.se-type-btn {
  flex: 1; padding: 8px 18px; border-radius: 8px; border: 1.5px solid transparent;
  background: transparent; font-size: .81rem; font-weight: 600; cursor: pointer;
  color: #4A5E5E; display: flex; align-items: center; justify-content: center;
  gap: 6px; transition: all .15s; white-space: nowrap;
}
.se-type-btn:hover { background: #F8FBFA; color: #334155; }
.se-type-btn.active-ch   { background: #E8F5F4; border-color: rgba(15,184,162,.35); color: #088E89; }
.se-type-btn.active-vid  { background: #f0fdfa; border-color: #99f6e4; color: #0d9488; }
.se-type-btn.active-both { background: #e8ecf3; border-color: #c5cdd9; color: #162640; }
.se-type-new { font-size: .6rem; background: #f0fdfa; color: #0d9488; border-radius: 8px; padding: 1px 5px; font-weight: 700; }

/* ── Video results section ────────────────────────────────────────────── */
.se-vid-section { margin-top: 20px; }
.se-vid-section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #f0fdfa;
  border: 1.5px solid #99f6e4; border-bottom: none; border-radius: 12px 12px 0 0;
}
.se-vid-section-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: #0d9488;
}
.se-vid-section-count {
  font-size: .68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4;
}
.se-vid-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1.5px solid #99f6e4; border-top: none;
  border-radius: 0 0 12px 12px; background: #fff;
  /* Scrollable — show ~5 cards */
  max-height: 500px; overflow-y: auto; overflow-x: hidden;
}
.se-vid-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #f0fdfa; transition: background .12s;
}
.se-vid-card:last-child { border-bottom: none; }
.se-vid-card:hover { background: #fafffe; }
.se-vid-card.se-vid-card-unsafe { opacity: .7; }
.se-vid-card.se-vid-card-unsafe .se-vid-thumb { border-color: #fca5a5; }
.se-vid-thumb {
  width: 88px; height: 54px; border-radius: 8px; flex-shrink: 0;
  position: relative; overflow: hidden;
  background: #f0fdfa; border: 1.5px solid #99f6e4;
  display: flex; align-items: center; justify-content: center;
}
.se-vid-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.se-vid-thumb-ph {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; color: #0d9488; font-size: 1.2rem;
}
.se-vid-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); opacity: 0; transition: opacity .15s;
  color: #fff; font-size: 1.4rem; text-decoration: none;
}
.se-vid-thumb:hover .se-vid-play-overlay { opacity: 1; }
.se-vid-title { color: #162640; font-weight: 700; font-size: .88rem; line-height: 1.3; }
.se-vid-title:hover { color: #0d9488; text-decoration: underline; }
.se-vid-score-bar-wrap { width: 65px; height: 3px; background: #ccfbf1; border-radius: 3px; overflow: hidden; }
.se-vid-score-fill { height: 100%; background: linear-gradient(90deg, #0d9488, #2dd4bf); border-radius: 3px; }
.se-vid-score-pct { font-size: .75rem; font-weight: 600; color: #0d9488; }

/* ── Video AI info bar ──────────────────────────────────────────────────── */
.se-vid-ai-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; font-size: .71rem;
  background: #f0fdfa; border-left: 1.5px solid #99f6e4; border-right: 1.5px solid #99f6e4;
  color: #0d9488;
}

/* ── Topic chips (teal for video cards) ─────────────────────────────────── */
.se-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.se-chip { font-size: .66rem; border-radius: 20px; padding: 2px 8px; border: 1px solid; display: inline-flex; align-items: center; gap: 3px; }
.se-chip-teal { background: #f0fdfa; color: #0d9488; border-color: #99f6e4; }

/* ── Per-card Details button ─────────────────────────────────────────────── */
.se-card-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; padding-top: 2px; flex-shrink: 0; }
.se-btn-detail {
  padding: 4px 12px; border-radius: 7px; border: 1.5px solid #D9E3E3;
  background: #F8FBFA; font-size: .71rem; font-weight: 600; color: #4A5E5E;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all .12s; display: inline-flex; align-items: center;
}
.se-btn-detail:hover { border-color: rgba(15,184,162,.35); color: #088E89; background: #E8F5F4; }

/* ── Channel-list topbar search pill ──────────────────────────────────────
   Single unified rounded input that hosts the search icon (left) and
   clear-× (right) as overlays — replaces a Bootstrap input-group which
   was rendering each cell with its own border edge. Keeps focus state on
   one element so the focus ring wraps the whole pill. */
.cl-search {
  position: relative;
  width: 280px;
  min-width: 200px;
  flex: 0 0 auto;
}
.cl-search-input {
  width: 100%;
  padding: 6px 32px 6px 32px;       /* room for icon left + clear right */
  border-radius: 999px;
  border: 1px solid #d8dee6;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cl-search-input:hover {
  border-color: #b9c2cd;
}
.cl-search-input:focus {
  outline: none;
  border-color: #0FB8A2;
  box-shadow: 0 0 0 3px rgba(15, 184, 162, 0.15);
}
.cl-search-input::placeholder {
  color: #9aa3b1;
  /* Truncate long placeholders with an ellipsis instead of letting them
     get clipped by padding-right. Browser support is wide enough. */
  text-overflow: ellipsis;
}
.cl-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #8b95a3;
  pointer-events: none;     /* clicks pass through to the input */
}
.cl-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #8b95a3;
  border-radius: 50%;
  font-size: 11px;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cl-search-clear:hover {
  background: #eef2f7;
  color: #2b3445;
}
.cl-search-clear:focus-visible {
  outline: 2px solid #0FB8A2;
  outline-offset: 1px;
}

/* IMP/CPM (6M) cell — twin metrics inline so the column reads as a
   tight numeric block. Impressions get the primary blue; CPM is muted
   so the eye lands on the impressions first. */
.cl-impcpm {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.cl-impcpm-imp { color: #0FB8A2; font-weight: 600; }
.cl-impcpm-sep { color: #D9E3E3; font-weight: 400; }
.cl-impcpm-cpm { color: #4A5E5E; font-size: .85em; }

/* ── Channel-Detail Modal (cd-*) ─────────────────────────────────────────
   Built on top of Bootstrap's `.modal` shell. Header is a gradient strip
   with the channel thumbnail / title / KPI tiles; body hosts the stats
   widgets. Class prefix `cd-` keeps the cascade isolated from the QC /
   Sync / Classify modals. */

.cd-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.cd-header {
  position: relative;
  padding: 12px 20px 10px;
  background: linear-gradient(135deg, #0FB8A2 0%, #088E89 100%);
  color: #fff;
}
/* All content floats above any future absolute elements */
.cd-corner-btns,
.cd-header-main,
.cd-kpis {
  position: relative;
  z-index: 1;
}
.cd-corner-btns {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; align-items: center; gap: 6px;
  z-index: 10;
}

/* About strip — description + keywords rendered from Rapid API meta */
.cd-about {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cd-about-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-about-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cd-kw-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
}
.cd-close {
  filter: invert(1) brightness(2);
  opacity: .85;
  position: static;
}
.cd-close:hover { opacity: 1; }
.cd-refresh-btn {
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}
.cd-refresh-btn:hover  { background: rgba(255,255,255,.32); }
.cd-refresh-btn:disabled { opacity: .5; cursor: default; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
.cd-spin { display: inline-block; animation: cd-spin .7s linear infinite; }

.cd-header-main {
  display: flex; gap: 12px;
  align-items: flex-start;
}
.cd-thumb-wrap {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .35);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cd-thumb { width: 100%; height: 100%; object-fit: cover; }

.cd-title-block { flex: 1 1 auto; min-width: 0; }
.cd-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-sub {
  display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
  font-size: .75rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 5px;
}
.cd-link { color: #fff; text-decoration: none; opacity: .92; }
.cd-link:hover { color: #fff; opacity: 1; text-decoration: underline; }
.cd-sep { opacity: .5; }
.cd-channelid {
  cursor: pointer;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: .7rem;
  background: rgba(255, 255, 255, .12);
  padding: 1px 6px;
  border-radius: 6px;
  transition: background .15s;
}
.cd-channelid:hover { background: rgba(255, 255, 255, .22); }
.cd-user { opacity: .9; }

.cd-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.cd-badge-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.cd-badge-group + .cd-badge-group {
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cd-badge-group-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-right: 2px;
  white-space: nowrap;
}
.cd-badge {
  display: inline-flex; align-items: center;
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  white-space: nowrap;
}
.cd-badge i { font-size: .72rem; }
.cd-badge-label { font-size: .6rem; font-weight: 600; opacity: .75; text-transform: uppercase; letter-spacing: .03em; margin-right: .15rem; }
/* Brand-meaning variants — green/red/etc against the dark header */
.cd-badge-safe-yes  { background: rgba(6,214,160,.22);  border-color: rgba(6,214,160,.55); }
.cd-badge-safe-no   { background: rgba(230,57,70,.22);  border-color: rgba(230,57,70,.55); }
/* Unsafe-category — brighter solid red so the *reason* a channel was
   flagged unsafe (violence / adult / hate / …) is the first thing
   the eye lands on. Heavier weight than the neutral cd-badge-safe-no
   pill it sits next to. */
.cd-badge-unsafe-cat {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}
.cd-badge-techops   { background: rgba(6,214,160,.22);  border-color: rgba(6,214,160,.55); }
.cd-badge-techops-bl{ background: rgba(230,57,70,.22);  border-color: rgba(230,57,70,.55); }
.cd-badge-auto      { background: rgba(255,183,3,.24);  border-color: rgba(255,183,3,.55); }

/* KPI tiles — 4-up on desktop, responsive below */
.cd-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.cd-kpi {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 5px 10px;
  backdrop-filter: blur(2px);
}
.cd-kpi-accent {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .36);
}
.cd-kpi-label {
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
  margin-bottom: 1px;
}
.cd-kpi-value {
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
@media (max-width: 768px) {
  .cd-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cd-kpis { grid-template-columns: 1fr; }
  .cd-thumb-wrap { width: 64px; height: 64px; }
  .cd-title { font-size: 1.15rem; }
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.cd-body { padding: 0 24px 20px; background: #F8FBFA; }

/* Banner at top of scrollable body — scrolls away naturally, no padding */
.cd-body-banner {
  margin: 0 -24px 0;
  overflow: hidden;
  max-height: 160px;
  flex-shrink: 0;
}
.cd-body-banner img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.cd-toolbar-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0F3A3A;
}
.cd-toolbar-actions { display: flex; align-items: center; gap: 6px; }

/* Stat cards inside the body */
.cd-card {
  background: #fff;
  border: 1px solid #D9E3E3;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
}
.cd-card-title {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #4A5E5E;
  margin-bottom: 10px;
}

/* Sparkline canvas wrapper — fixed height keeps the chart proportionate
   regardless of the surrounding layout, and avoids the flicker
   Chart.js can produce when its parent is auto-sized. */
.cd-spark-wrap { position: relative; height: 180px; }

/* Stats grid (Top Countries + Daily Impressions) — stop Bootstrap's
   default row flex from stretching the two cards to equal height.
   Without this, the Daily Impressions card (180 px chart) forces the
   Top Countries card to grow to match, leaving a visible empty band
   below the rank-list (which caps at ~150 px). `flex-start` lets each
   card hug its own content height. */
.cd-stats-row { align-items: flex-start; }
.cd-stats-row > [class*="col-"] { display: flex; }
.cd-stats-row > [class*="col-"] > .cd-card { flex: 1 1 auto; }

/* Per-country table */
.cd-country-table-wrap {
  max-height: 360px;
  overflow-y: auto;
  border-radius: 8px;
}
.cd-country-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .85rem;
}
.cd-country-table thead th {
  position: sticky; top: 0;
  background: #EEF1F0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #4A5E5E;
  padding: 8px 12px;
  font-weight: 600;
  border-bottom: 1px solid #D9E3E3;
  z-index: 1;
}
.cd-country-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #EEF1F0;
  color: #0F3A3A;
  vertical-align: middle;
}
.cd-country-table tbody tr:last-child td { border-bottom: none; }
.cd-country-table tbody tr:hover { background: #F8FBFA; }

/* Inline share-of-total bar inside the table cell */
.cd-share-bar {
  position: relative;
  height: 18px;
  background: #eef2f7;
  border-radius: 999px;
  min-width: 90px;
  margin-left: auto;
}
.cd-share-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, #0FB8A2, #06d6a0);
  border-radius: 999px;
  opacity: .85;
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.cd-share-text {
  position: relative;
  display: block;
  text-align: right;
  padding-right: 6px;
  line-height: 18px;
  font-size: .72rem;
  font-weight: 600;
  color: #0F3A3A;
  font-variant-numeric: tabular-nums;
}

/* Loading skeleton — pulsing grey bars while stats fetch */
.cd-loading { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.cd-skel {
  background: linear-gradient(90deg, #eef2f7 0%, #F8FBFA 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: cd-skel-pulse 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.cd-skel-row { height: 22px; }
@keyframes cd-skel-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state — friendly when the channel has no DV360 data in window */
.cd-empty {
  text-align: center;
  padding: 36px 16px;
  color: #4A5E5E;
}
.cd-empty .bi {
  font-size: 2.2rem;
  color: #D9E3E3;
}

/* Tab nav inside the channel-detail modal — separates Stats and Videos
   panes. Pill-style underline so it doesn't compete with the gradient
   header above. */
.cd-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid #D9E3E3;
  /* Sticky so the Stats / Videos / Curate switcher never scrolls
     out of view while the user reads through a long stats body
     (long countries list, big sparkline, full video grid). The
     scroll container is `.modal-body` (Bootstrap's `modal-dialog-
     scrollable` makes it scrollable), so `top: 0` anchors against
     that parent. The slight negative top + matching pad on the body
     would create a flicker — so we offset the top of the tabs to
     sit flush with the body's padding. `z-index` keeps the bar above
     the stat cards / sparkline canvases as they pass underneath. */
  position: sticky;
  /* `.cd-body` has `padding: 20px 24px`. Pull the tabs to the very
     top of the scroll viewport by negating that vertical pad. */
  top: 0;
  background: #F8FBFA;
  z-index: 5;
  padding-top: 14px;
}
.cd-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 600;
  color: #4A5E5E;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;     /* overlap the parent's bottom border */
  transition: color .15s, border-color .15s;
}
.cd-tab:hover { color: #0F3A3A; }
.cd-tab-active {
  color: #0FB8A2;
  border-bottom-color: #0FB8A2;
}

/* ── Videos pane (embedded YouTube uploads playlist) ─────────────── */
.cd-videos-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-videos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.cd-videos-title {
  font-size: .9rem;
  font-weight: 600;
  color: #0F3A3A;
}
.cd-videos-link {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  color: #4A5E5E;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d8dee6;
  transition: all .15s;
}
.cd-videos-link:hover {
  border-color: #0FB8A2;
  color: #0FB8A2;
  background: #E8F5F4;
}

/* 16:9 responsive iframe wrapper — `padding-top: 56.25%` is the
   classic CSS trick that locks aspect ratio without JS. The iframe
   floats absolutely inside so it always fills the wrapper. */
.cd-videos-frame-wrap {
  position: relative;
  width: 100%;
  max-width: 920px;          /* cap so the iframe never dominates very wide modals */
  padding-top: 56.25%;       /* 16:9 (height derived from constrained width) */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .12);
}
.cd-videos-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.cd-videos-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #F8FBFA;
  color: #4A5E5E;
  padding: 24px;
}
.cd-videos-fallback .bi {
  font-size: 2rem;
  color: #D9E3E3;
}

/* ── Recent uploads grid ─────────────────────────────────────────────
   Built to mirror the YouTube channel /videos layout: 4-up on desktop,
   2-up on tablet, single-column on mobile. Each card is a `<button>`
   so it's keyboard-accessible — Enter / Space plays the video. */
.cd-videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 4px 2px 8px;
}
@media (max-width: 992px) { .cd-videos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cd-videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cd-videos-grid { grid-template-columns: 1fr; } }

.cd-video-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: transform .15s ease, background .15s;
}
.cd-video-card:hover {
  transform: translateY(-2px);
}
.cd-video-card:hover .cd-video-play { opacity: 1; }
.cd-video-card:focus-visible {
  outline: 2px solid #0FB8A2;
  outline-offset: 2px;
}

.cd-video-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%;          /* 16:9 */
  background: #0F3A3A;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}
.cd-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 23, 42, .85);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.cd-video-live {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
}
/* Play-button overlay on hover — gentle pulse, doesn't yell. */
.cd-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: rgba(255, 255, 255, .94);
  background: rgba(15, 23, 42, .35);
  opacity: 0;
  transition: opacity .15s;
}

.cd-video-title {
  margin-top: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: #0F3A3A;
  line-height: 1.35;
  /* 2-line clamp; degrades to single-line truncation in old browsers. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-video-meta {
  margin-top: 2px;
  font-size: .72rem;
  color: #4A5E5E;
  font-variant-numeric: tabular-nums;
}

/* Skeleton card while the scrape lands. */
.cd-video-card-skel {
  pointer-events: none;
}
.cd-video-card-skel .cd-video-thumb {
  background: linear-gradient(90deg, #eef2f7 0%, #F8FBFA 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: cd-skel-pulse 1.4s ease-in-out infinite;
}

/* Active video — replaces the grid in-place. 16:9 player sits at the top of the
   visible scroll area (no toolbar above it). Back + AI-toggle live in cd-player-meta
   directly below the iframe. */
.cd-video-active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Sticky-offset shared with cd-tabs (which is sticky at top:0 z:5).
     Approx height of the tabs strip; tweak here if the strip changes. */
  --cd-tabs-h: 56px;
}

/* Player top bar — back chevron, video title, AI Analysis toggle. Sits ABOVE the iframe. */
.cd-player-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 8px;
}
.cd-player-back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8dee6;
  color: #4A5E5E;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  flex: 0 0 36px;
  font-size: 1rem;
}
.cd-player-back:hover {
  border-color: #0FB8A2;
  color: #0FB8A2;
  background: #E8F5F4;
}
.cd-player-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-player-ai-toggle {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .15s, box-shadow .15s, background .15s, color .15s;
  box-shadow: 0 1px 2px rgba(99, 102, 241, .25);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.cd-player-ai-toggle:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.cd-player-ai-toggle.active {
  background: #fff;
  color: #6366f1;
  border: 1px solid #c7d2fe;
  box-shadow: none;
}

/* Split-stage: player on the left, analysis pane on the right.
   In split mode the stage becomes a fixed-height shell with three
   independent scroll regions (iframe never moves, comments scroll inside
   the player col, AI panel scrolls inside its col). Collapses to a single
   column on narrow screens (≤1100px). */
.cd-video-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Split mode = fixed-height shell with three independent scroll panes.
   - Player col is a flex column: iframe + meta are non-scrolling, comments scroll inside.
   - AI col is its own overflow-y scroll.
   The wheel event hits whichever pane the cursor sits over; the modal-body's
   own scroll is NOT used in split mode (the stage fills the visible area). */
.cd-video-stage-split {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  /* Bootstrap modal-dialog-scrollable: dialog = 100vh - 56px, modal-content
     header (teal banner + tabs) ≈ 180px, in-pane chrome (cd-tabs) ≈ 50px.
     Reserve 325px so the stage fits inside modal-body exactly and the
     modal-body itself doesn't need to scroll on top of the AI col's scroll. */
  height: calc(100dvh - 325px);
  min-height: 320px;
  overflow: hidden;               /* the stage itself never scrolls */
  /* Iframe height drives both columns: player col is sized to the iframe's
     width (height × 16/9), AI col fills the rest. Set on the stage so both
     children inherit. */
  --split-player-h: clamp(220px, calc((100dvh - 325px) * 0.55), 480px);
}
.cd-video-stage-split .cd-video-player-col,
.cd-video-stage-split .cd-video-analysis-col {
  transition: flex-basis .2s ease;
}
.cd-video-stage-split .cd-video-player-col {
  /* Width matches the iframe so there's no whitespace between player and AI col.
     Floor of 360px so the description + comments stay readable on small viewports;
     ceil of 50% so the AI col gets at least half on very tall viewports. */
  flex: 0 0 auto;
  width: clamp(360px, calc(var(--split-player-h) * 16 / 9), 50%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;                  /* let comments pane shrink + scroll */
}
.cd-video-stage-split .cd-videos-frame-wrap {
  flex: 0 0 auto;
  /* Iframe fills the player col (which is already sized to it). Height drives
     the column width via the --split-player-h custom property on the stage. */
  padding-top: 0;
  height: var(--split-player-h);
  width: 100%;
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
.cd-video-stage-split .cd-player-topbar {
  flex: 0 0 auto;
}
/* In split mode the description + comments live inside a single scroll
   region below the (pinned) iframe. Cursor over this region scrolls only
   it — wheel events don't leak to the modal body. */
.cd-video-stage-split .cd-video-below-player {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;             /* breathing room from scrollbar */
  overscroll-behavior: contain;   /* don't propagate scroll to parent at edges */
}
.cd-video-stage-split .cd-video-comments {
  /* Wrapper owns the scroll in split mode; comments just lay out normally. */
  overflow: visible;
}
.cd-video-stage-split .cd-video-analysis-col {
  flex: 1 1 auto;             /* fill all remaining width after player col */
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
/* Single-mode sizing: iframe height derives from the viewport so the
   topbar + iframe always fit above the fold without scrolling the modal.
   Width is then derived from height × 16:9 so there's no horizontal
   whitespace mismatch — the iframe grows to fill the modal as the viewport
   gets taller, capped at 600px height (≈ 1067px width). */
.cd-video-stage:not(.cd-video-stage-split) .cd-video-player-col {
  width: 100%;
  max-width: none;
  --player-h: clamp(320px, calc(100dvh - 420px), 680px);
}
.cd-video-stage:not(.cd-video-stage-split) .cd-player-topbar,
.cd-video-stage:not(.cd-video-stage-split) .cd-videos-frame-wrap,
.cd-video-stage:not(.cd-video-stage-split) .cd-video-description {
  width: calc(var(--player-h) * 16 / 9);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* YouTube-style description card — sits below the iframe.
   Mirrors YouTube watch-page hierarchy: title (bold) → meta (views · date)
   → description (clamped to 3 lines, "Show more" reveals the rest). */
.cd-video-description {
  background: #f2f2f2;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 0.88rem;
}
.cd-video-description-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f0f0f;
  line-height: 1.35;
  margin-bottom: 6px;
  word-break: break-word;
}
.cd-video-description-meta {
  font-weight: 600;
  font-size: 0.82rem;
  color: #606060;
  margin-bottom: 10px;
}
.cd-video-description-text {
  color: #0f0f0f;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-video-description-expanded .cd-video-description-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.cd-video-description-toggle {
  background: none;
  border: none;
  padding: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f0f0f;
  cursor: pointer;
}
.cd-video-description-toggle:hover {
  color: #065fd4;
}
.cd-video-stage:not(.cd-video-stage-split) .cd-videos-frame-wrap {
  /* Override the padding-top aspect trick — use explicit height instead. */
  padding-top: 0;
  height: var(--player-h);
}
@media (max-width: 1100px) {
  .cd-video-stage-split {
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .cd-video-stage-split .cd-video-player-col,
  .cd-video-stage-split .cd-video-analysis-col {
    flex: 1 1 100%;
    height: auto;
    overflow-y: visible;
  }
  .cd-video-stage-split .cd-video-below-player {
    overflow-y: visible;
    min-height: 0;
    flex: 0 1 auto;
  }
}

/* Compact 3-up stat row for the ad-delivery card. */
.cd-stat-num {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.cd-stat-lbl {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7a8f;
  margin-top: 2px;
}

/* ── Hover frame animation ──────────────────────────────────────────── */
/* Static thumb always visible; frame images hidden by default.
   On hover the 4 frames cycle in at 400 ms each via opacity animation. */
.cd-thumb-static {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .15s;
}
.cd-video-card:hover .cd-thumb-static { opacity: 0; }

.cd-thumb-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
@keyframes cd-frame-cycle {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
.cd-video-card:hover .cd-thumb-frame-1 { animation: cd-frame-cycle 1.6s steps(1) infinite; }
.cd-video-card:hover .cd-thumb-frame-2 { animation: cd-frame-cycle 1.6s steps(1) 0.4s infinite; }
.cd-video-card:hover .cd-thumb-frame-3 { animation: cd-frame-cycle 1.6s steps(1) 0.8s infinite; }
.cd-video-card:hover .cd-thumb-frame-4 { animation: cd-frame-cycle 1.6s steps(1) 1.2s infinite; }

.cd-video-meta-sep { margin: 0 3px; }

/* ── Trends section inside Stats pane ──────────────────────────────── */
.cd-trends-section {
  border-top: 1px solid rgba(15,58,58,0.12);
  padding-top: 12px;
}

/* ── Cache hit / miss badges ────────────────────────────────────────── */
.cd-cache-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.cd-cache-hit {
  background: rgba(6, 214, 160, .12);
  color: #0FA968;
  border: 1px solid rgba(6, 214, 160, .35);
}
.cd-cache-miss {
  background: rgba(251, 146, 60, .12);
  color: #d97706;
  border: 1px solid rgba(251, 146, 60, .35);
}
.cd-cache-live {
  background: rgba(15, 184, 162, .10);
  color: #0FB8A2;
  border: 1px solid rgba(99, 102, 241, .3);
}

/* ── Channel meta (from YouTube via RapidAPI) ───────────────────────── */
.cd-channel-meta {
  margin: 0 0 6px;
  padding: 6px 0;
  border-bottom: 1px solid #EEF1F0;
}
.cd-channel-banner {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cd-channel-banner img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  display: block;
}
.cd-meta-section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A9999;
  margin-bottom: 3px;
}
.cd-channel-description {
  font-size: .75rem;
  color: #4A5E5E;
  line-height: 1.45;
  margin-bottom: 2px;
  white-space: pre-line;
}
.cd-channel-description--collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.cd-meta-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 600;
  color: #0FB8A2;
  cursor: pointer;
  gap: 2px;
}
.cd-meta-toggle:hover { text-decoration: underline; }
.cd-channel-keywords,
.cd-channel-tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-bottom: 4px;
}
.cd-kw-chip {
  display: inline-block;
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: #EEF1F0;
  color: #4A5E5E;
  border: 1px solid #D9E3E3;
}
.cd-tab-chip {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .08);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, .25);
}
.cd-meta-divider {
  border-color: #D9E3E3;
  margin: 5px 0 5px;
}
.cd-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}
.cd-load-more-btn {
  min-width: 160px;
}

/* ── Curate pane ─────────────────────────────────────────────────────── */
.cd-curate-pane {
  padding: 4px 0 8px;
}
.cd-curate-pane .qc-section {
  padding: 12px 0;
  border-bottom: 1px solid #f0f4f8;
}
.cd-curate-pane .qc-section:last-of-type {
  border-bottom: none;
}

/* ── AI Analysis pane ──────────────────────────────────────────── */
.cd-analysis-pane {
  padding: 4px 0 8px;
}
.cd-industry-chip {
  background: rgba(16, 185, 129, .08);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, .25);
}
/* Topics are finer-grained than themes — soft amber so they read as a sub-tier. */
.cd-topic-chip {
  background: rgba(245, 158, 11, .08);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, .25);
}
/* Classification / Keywords / Targeted Audience cards: present chip values
   in Title Case regardless of backend canonical casing (tier_2 + keywords
   are stored lowercase, interests vary). Scoped via wrapper class so the
   rest of the analysis panel's chips (topics, themes, …) stay untouched. */
.cd-card-titlecase .cd-tab-chip {
  text-transform: capitalize;
}
.cd-sentiment-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.cd-sentiment-positive { background: rgba(16, 185, 129, .10); color: #065f46; border-color: rgba(16, 185, 129, .30); }
.cd-sentiment-neutral  { background: rgba(100, 116, 139, .10); color: #334155; border-color: rgba(100, 116, 139, .25); }
.cd-sentiment-mixed    { background: rgba(245, 158, 11, .10); color: #92400e; border-color: rgba(245, 158, 11, .30); }
.cd-sentiment-negative { background: rgba(239, 68, 68, .10);  color: #991b1b; border-color: rgba(239, 68, 68, .30); }
/* Premiumness score badge — bootstrap doesn't ship a purple-subtle utility. */
.bg-purple-subtle      { background-color: rgba(139, 92, 246, .12) !important; }
.text-purple-emphasis  { color: #6d28d9 !important; }
.border-purple-subtle  { border-color: rgba(139, 92, 246, .35) !important; }
.cd-analysis-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 2-column links card — Important platforms on the left, Other Links on the right.
   Collapses to a single column on narrow viewports. */
.cd-links-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cd-links-col {
  min-width: 0;          /* let long URLs wrap inside chips */
}
.cd-links-col-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 8px;
}
.cd-links-other .cd-links-col-title {
  color: #94a3b8;        /* slightly softer to de-emphasize the "other" column */
}
@media (max-width: 720px) {
  .cd-links-split {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.cd-social-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: #4361ee;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(67, 97, 238, .25);
  background: rgba(67, 97, 238, .05);
  transition: background .15s, border-color .15s;
}
.cd-social-link:hover {
  background: rgba(67, 97, 238, .12);
  border-color: #4361ee;
  color: #2a4bc4;
}
/* Sub-title annotation, e.g. "— direct from YouTube About panel".
   Same visual weight as .cd-insight-rule used elsewhere in this pane. */
.cd-card-rule {
  font-size: 0.65rem;
  font-weight: 400;
  color: #9ca3af;
  margin-left: 4px;
}
/* Per-platform tints so the Channel Links pills are scannable at a glance.
   Falls back to the default blue when no rule matches. */
.cd-link-instagram { color:#c2185b; border-color: rgba(194,24,91,.25); background: rgba(194,24,91,.05); }
.cd-link-instagram:hover { color:#9a1448; border-color:#c2185b; background: rgba(194,24,91,.12); }
.cd-link-twitter   { color:#0f1419; border-color: rgba(15,20,25,.25);  background: rgba(15,20,25,.05); }
.cd-link-twitter:hover   { color:#000;    border-color:#000;    background: rgba(15,20,25,.10); }
.cd-link-facebook  { color:#1877f2; border-color: rgba(24,119,242,.25); background: rgba(24,119,242,.05); }
.cd-link-facebook:hover  { color:#0c5dc7; border-color:#1877f2; background: rgba(24,119,242,.12); }
.cd-link-tiktok    { color:#010101; border-color: rgba(1,1,1,.25); background: rgba(1,1,1,.04); }
.cd-link-tiktok:hover    { color:#000;    border-color:#000;    background: rgba(1,1,1,.10); }
.cd-link-telegram  { color:#229ed9; border-color: rgba(34,158,217,.25); background: rgba(34,158,217,.05); }
.cd-link-telegram:hover  { color:#177bb0; border-color:#229ed9; background: rgba(34,158,217,.12); }
.cd-link-linkedin  { color:#0a66c2; border-color: rgba(10,102,194,.25); background: rgba(10,102,194,.05); }
.cd-link-linkedin:hover  { color:#08509a; border-color:#0a66c2; background: rgba(10,102,194,.12); }
.cd-link-discord   { color:#5865f2; border-color: rgba(88,101,242,.25); background: rgba(88,101,242,.05); }
.cd-link-discord:hover   { color:#3d4ad6; border-color:#5865f2; background: rgba(88,101,242,.12); }
.cd-link-website   { color:#0f766e; border-color: rgba(15,118,110,.25); background: rgba(15,118,110,.05); }
.cd-link-website:hover   { color:#0c5d57; border-color:#0f766e; background: rgba(15,118,110,.12); }
.cd-link-other     { color:#64748b; border-color: rgba(100,116,139,.25); background: rgba(100,116,139,.05); }
.cd-link-other:hover     { color:#475569; border-color:#64748b; background: rgba(100,116,139,.12); }
/* Business email pill: subtle amber tone to set it apart from social platforms. */
.cd-business-email {
  color: #92400e;
  border-color: rgba(245, 158, 11, .30);
  background: rgba(245, 158, 11, .07);
}
.cd-business-email:hover {
  color: #78350f;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .14);
}
.bg-orange {
  background-color: #f97316 !important;
}

/* ── Ad Intelligence section ──────────────────────────────────── */
.cd-insight-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.cd-badge-pattern { background: #e8f4fd; color: #0d6efd; }
.cd-badge-geo     { background: #e8f8f0; color: #198754; }
.cd-market-table  { font-size: 0.8rem; }
.cd-market-table thead th { font-size: 0.7rem; color: #6c757d; font-weight: 600; padding: 4px 6px; }
.cd-market-table tbody td { padding: 4px 6px; vertical-align: middle; }
.cd-market-label  { font-size: 0.68rem; background: #f0f0f0; color: #555; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.cd-insight-card  { background: #f8f9fa; border-radius: 8px; padding: 10px 12px; }
.cd-insight-card-title { font-size: 0.72rem; font-weight: 700; color: #495057; margin-bottom: 4px; }
.cd-insight-card-body  { font-size: 0.8rem; color: #212529; line-height: 1.55; margin: 0; }
.cd-threshold-legend  { font-size: 0.7rem; color: #6c757d; line-height: 1.6; background: #f8f9fa; border-radius: 6px; padding: 8px 10px; }
.cd-legend-sep        { margin: 0 6px; opacity: 0.4; }
.cd-col-rule          { font-size: 0.65rem; font-weight: 400; color: #9ca3af; }
.cd-insight-rule      { font-size: 0.65rem; font-weight: 400; color: #9ca3af; margin-left: 4px; }
.cd-badge-sub         { font-weight: 400; opacity: 0.85; margin-left: 2px; }
.cd-legend-toggle     { background: none; border: none; padding: 0 2px; color: #6c757d; cursor: pointer; font-size: 0.95rem; line-height: 1; }
.cd-legend-toggle:hover { color: #0d6efd; }

/* ═══════════════════════════════════════════════════════════════
   INTELLIGENCE TAB
   ═══════════════════════════════════════════════════════════════ */

.intel-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Glassmorphism ambient background */
.intel-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(15,184,162,.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(6,182,212,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 15%, rgba(52,211,153,.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 30% 80%, rgba(8,142,137,.12) 0%, transparent 55%),
    radial-gradient(ellipse 30% 35% at 55% 45%, rgba(15,184,162,.08) 0%, transparent 50%),
    linear-gradient(135deg, #eaf6f4 0%, #e8f5f3 50%, #edf7f6 100%);
}
.intel-stars { display: none; }

.intel-wrap {
  position: relative; z-index: 1;
  max-width: 980px; margin: 0 auto;
  padding: 36px 24px 64px;
}

/* ── Header ── */
.intel-header { text-align: center; margin-bottom: 36px; }

.intel-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #0FB8A2;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15,184,162,.1);
}
.intel-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #0FB8A2; box-shadow: 0 0 6px #0FB8A2;
  animation: intel-pulse 2s infinite;
}
@keyframes intel-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.75); }
}

.intel-title {
  font-size: 2rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg, #0F3A3A 0%, #0FB8A2 60%, #088E89 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 8px;
}
.intel-sub { font-size: .84rem; color: #4A5E5E; }

/* ── Chat section ── */
.intel-chat-section {
  position: relative;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 32px rgba(11,32,32,.1), 0 2px 8px rgba(15,184,162,.08);
  overflow: hidden;
  margin-bottom: 28px;
}
.intel-chat-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15,184,162,.8), rgba(8,142,137,.6), transparent);
}
.intel-chat-section::after {
  content: '';
  position: absolute; bottom: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,184,162,.2), transparent);
}

.intel-chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(15,58,58,.07);
  background: rgba(248,251,250,.8);
}
.intel-chat-orb {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff;
  box-shadow: 0 4px 12px rgba(15,184,162,.3);
  animation: intel-orb-glow 3s ease-in-out infinite;
}
@keyframes intel-orb-glow {
  0%,100% { box-shadow: 0 4px 12px rgba(15,184,162,.3); }
  50%      { box-shadow: 0 6px 20px rgba(8,142,137,.45); }
}
.intel-chat-name { font-size: .87rem; font-weight: 700; color: #0F3A3A; }
.intel-chat-status {
  font-size: .65rem; color: #0FA968;
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.intel-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #0FA968; box-shadow: 0 0 5px #0FA968;
  animation: intel-pulse 2.5s infinite;
}
.intel-chat-actions { margin-left: auto; }
.intel-chat-action-btn {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85);
  color: #4A5E5E; font-size: .75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; line-height: 1;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.intel-chat-action-btn:hover { background: rgba(15,184,162,.1); color: #0FB8A2; border-color: rgba(15,184,162,.3); }

.intel-chat-messages {
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 180px; max-height: 440px; overflow-y: auto;
  scroll-behavior: smooth;
  background: rgba(255,255,255,.45);
}
.intel-chat-messages::-webkit-scrollbar { width: 4px; }
.intel-chat-messages::-webkit-scrollbar-track { background: transparent; }
.intel-chat-messages::-webkit-scrollbar-thumb { background: rgba(15,58,58,.12); border-radius: 4px; }

.intel-msg-row { display: flex; gap: 10px; align-items: flex-start; }
.intel-msg-row.intel-msg-user { flex-direction: row-reverse; }

.intel-msg-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: #fff; font-weight: 700;
}
.intel-msg-avatar.intel-msg-avatar-user {
  background: linear-gradient(135deg, #088E89, #0FB8A2);
}

.intel-msg-bubble {
  max-width: 72%; padding: 10px 14px; border-radius: 12px;
  font-size: .8rem; line-height: 1.55; color: #2E3E3E;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(11,32,32,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.intel-msg-bubble.intel-msg-bubble-user {
  background: linear-gradient(135deg, rgba(15,184,162,.18), rgba(8,142,137,.12));
  border-color: rgba(15,184,162,.3);
  color: #0F3A3A;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Message meta row: timestamp + copy. Reveals copy on row hover so it
   stays uncluttered until the user actually wants it. */
.intel-msg-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 3px; padding: 0 2px;
  font-size: .62rem; color: #8A9999;
}
.intel-msg-meta-user { flex-direction: row-reverse; }
.intel-msg-time { line-height: 1; }
.intel-msg-copy {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .62rem; color: #8A9999;
  padding: 2px 5px; border-radius: 6px; line-height: 1;
  display: inline-flex; align-items: center; gap: 3px;
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.intel-msg-row:hover .intel-msg-copy { opacity: 1; }
.intel-msg-copy:hover { background: rgba(15,184,162,.12); color: #088E89; }
.intel-msg-copy:focus-visible { opacity: 1; outline: 2px solid rgba(15,184,162,.45); }

/* Typing dots */
.intel-typing { display: flex; align-items: center; gap: 5px; padding: 12px 14px; }
.intel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #0FB8A2;
  animation: intel-typing-bounce .9s infinite;
}
.intel-dot:nth-child(2) { animation-delay: .15s; }
.intel-dot:nth-child(3) { animation-delay: .3s; }
@keyframes intel-typing-bounce {
  0%,100% { transform: translateY(0); opacity: .35; }
  40%      { transform: translateY(-5px); opacity: 1; }
}

/* Quick prompts */
.intel-quick-prompts {
  padding: 2px 20px 14px;
  display: flex; flex-wrap: wrap; gap: 7px;
  background: rgba(255,255,255,.4);
}
.intel-qp-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px; padding: 5px 13px;
  font-size: .72rem; color: #4A5E5E; cursor: pointer;
  transition: all .15s; white-space: nowrap;
  font-family: inherit;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(11,32,32,.06);
}
.intel-qp-chip:hover { background: #E8F5F4; border-color: rgba(15,184,162,.4); color: #088E89; }
.intel-qp-chip:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Input row */
.intel-chat-input-wrap {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 10px;
  background: rgba(248,251,250,.75);
}
.intel-chat-input {
  flex: 1; background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.9); border-radius: 12px;
  padding: 10px 14px; font-size: .8rem; color: #0F3A3A;
  font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(11,32,32,.06);
}
.intel-chat-input::placeholder { color: #8A9999; }
.intel-chat-input:focus { border-color: rgba(15,184,162,.55); box-shadow: 0 0 0 3px rgba(15,184,162,.1); }
.intel-chat-send {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  border: none; cursor: pointer; color: #fff; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(15,184,162,.35); transition: transform .15s, box-shadow .15s;
}
.intel-chat-send:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 6px 20px rgba(15,184,162,.5); }
.intel-chat-send:disabled { opacity: .4; cursor: default; }

/* ── Modules header ── */
.intel-modules-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.intel-modules-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #4A5E5E; white-space: nowrap;
}
.intel-modules-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(15,58,58,.12), transparent);
}

/* ── Intel grid ── */
.intel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 768px) { .intel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .intel-grid { grid-template-columns: 1fr; } }

/* Base card */
.intel-card {
  position: relative; border-radius: 16px; padding: 22px 18px 18px;
  cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 20px rgba(11,32,32,.08), 0 1px 4px rgba(15,184,162,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.intel-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ic-a), var(--ic-b), transparent);
  opacity: .55; transition: opacity .25s;
}
.intel-card::after { display: none; }

.intel-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 44px rgba(11,32,32,.13), 0 0 0 1px rgba(255,255,255,.95), 0 4px 12px rgba(15,184,162,.1);
  border-color: rgba(255,255,255,.95);
}
.intel-card:hover::before { opacity: 1; }

/* Card colour themes */
.intel-card--purple { --ic-a:#0FB8A2; --ic-b:#088E89; }
.intel-card--orange { --ic-a:#fb923c; --ic-b:#f59e0b; }
.intel-card--teal   { --ic-a:#34d399; --ic-b:#06b6d4; }
.intel-card--sky    { --ic-a:#38bdf8; --ic-b:#818cf8; }
.intel-card--pink   { --ic-a:#f472b6; --ic-b:#e879f9; }
.intel-card--yellow { --ic-a:#fbbf24; --ic-b:#f97316; }

/* Card internals */
.intel-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.intel-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.intel-card--purple .intel-card-icon { background: rgba(15,184,162,.15);  border-color: rgba(15,184,162,.25);  box-shadow: 0 4px 14px rgba(15,184,162,.15); }
.intel-card--orange .intel-card-icon { background: rgba(251,146,60,.15);  border-color: rgba(251,146,60,.25);  box-shadow: 0 4px 14px rgba(251,146,60,.15); }
.intel-card--teal   .intel-card-icon { background: rgba(52,211,153,.15);  border-color: rgba(52,211,153,.25);  box-shadow: 0 4px 14px rgba(52,211,153,.15); }
.intel-card--sky    .intel-card-icon { background: rgba(56,189,248,.15);  border-color: rgba(56,189,248,.25);  box-shadow: 0 4px 14px rgba(56,189,248,.15); }
.intel-card--pink   .intel-card-icon { background: rgba(244,114,182,.15); border-color: rgba(244,114,182,.25); box-shadow: 0 4px 14px rgba(244,114,182,.15); }
.intel-card--yellow .intel-card-icon { background: rgba(251,191,36,.15);  border-color: rgba(251,191,36,.25);  box-shadow: 0 4px 14px rgba(251,191,36,.15); }

.intel-card-pill {
  font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ic-a); background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.85); border-radius: 20px; padding: 2px 9px;
  position: relative; z-index: 1;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.intel-card-title {
  font-size: .92rem; font-weight: 700; color: #0F3A3A;
  margin-bottom: 6px; position: relative; z-index: 1;
}
.intel-card-desc {
  font-size: .71rem; color: #4A5E5E; line-height: 1.5;
  margin-bottom: 10px; position: relative; z-index: 1;
}
.intel-card-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.intel-card-tag {
  font-size: .6rem; font-weight: 600; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(255,255,255,.55);
  color: var(--ic-a);
  border: 1px solid rgba(255,255,255,.8);
  white-space: nowrap;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.intel-card:hover .intel-card-tag {
  background: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.95);
}
.intel-card-bar {
  height: 2px; background: rgba(15,58,58,.1); border-radius: 2px;
  overflow: hidden; margin-bottom: 10px; position: relative; z-index: 1;
}
.intel-card-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--ic-a), var(--ic-b));
}
.intel-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
}
.intel-card-stat {
  font-size: .68rem; color: #4A5E5E;
}
.intel-card-stat strong { color: var(--ic-a); font-weight: 700; }
.intel-card-cta {
  font-size: .65rem; font-weight: 600; color: var(--ic-a);
  opacity: .6; transition: opacity .2s;
}
.intel-card:hover .intel-card-cta { opacity: 1; }

/* ── Intelligence chat: message content wrapper ──────────────────────────── */
.intel-msg-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100% - 40px);
  /* Hug the bubble to its own width and align it to the correct side, so the
     avatar sits flush against the bubble. Without this the column stretches
     and the 72%-capped bubble pins left, leaving a gap before the avatar. */
  align-items: flex-start;
}
.intel-msg-user .intel-msg-content { align-items: flex-end; }

/* ── Intelligence chat: inline result table ──────────────────────────────── */
.intel-chat-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(11,32,32,.07);
}

.intel-chat-table thead tr {
  background: #F2F7F6;
}

.intel-chat-table th {
  color: #0F3A3A;
  font-weight: 600;
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(15,58,58,.1);
  white-space: nowrap;
}

.intel-chat-table td {
  color: #2E3E3E;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(15,58,58,.06);
}

.intel-chat-table tbody tr:last-child td {
  border-bottom: none;
}

.intel-chat-table tbody tr:hover {
  background: #E8F5F4;
}

/* ── Intelligence bar chart ─────────────────────────────────────────────── */
.intel-bar-table {
  width: 100%;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  font-family: inherit;
  margin-top: 6px;
  box-shadow: 0 2px 10px rgba(11,32,32,.07);
}

.intel-bar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #F2F7F6;
  border-bottom: 1px solid rgba(15,58,58,.1);
}

.intel-bar-hcol {
  color: #0F3A3A;
  font-weight: 600;
  width: 130px;
  flex-shrink: 0;
}

.intel-bar-hval {
  color: #0F3A3A;
  font-weight: 600;
  margin-left: auto;
  text-align: right;
  width: 80px;
  flex-shrink: 0;
}

.intel-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(15,58,58,.06);
  transition: background 0.15s;
}

.intel-bar-row:last-child { border-bottom: none; }
.intel-bar-row:hover { background: #E8F5F4; }

.intel-bar-label {
  color: #2E3E3E;
  width: 130px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intel-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(15,58,58,.08);
  border-radius: 99px;
  overflow: hidden;
}

.intel-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.intel-bar-value {
  color: #0F3A3A;
  font-weight: 600;
  width: 80px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.intel-bar-pct {
  color: #4A5E5E;
  width: 44px;
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
}

/* ── AI Filter Fill ──────────────────────────────────────────────────────── */
.bucket-ai-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(62,207,178,.06));
  border: 1.5px solid rgba(124,58,237,.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.bucket-ai-sparkle {
  font-size: 15px;
  flex-shrink: 0;
  color: #7c3aed;
}

.bucket-ai-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #444;
  outline: none;
  min-width: 0;
}

.bucket-ai-input::placeholder { color: var(--muted); }
.bucket-ai-input:disabled { opacity: .6; }

.bucket-ai-btn {
  background: linear-gradient(135deg, #7c3aed, #3ecfb2);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.bucket-ai-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.bucket-ai-error {
  font-size: 11px;
  color: #dc2626;
  flex-shrink: 0;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bucket-undo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(62,207,178,.08);
  border: 1px solid rgba(62,207,178,.3);
  border-radius: 6px;
  padding: 5px 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #0FB8A2;
}

.bucket-undo-strip a {
  color: #7c3aed;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Teal glow on AI-filled col-md-6 wrappers */
.ai-filled {
  position: relative;
}

.ai-filled::after {
  content: '✦';
  position: absolute;
  bottom: 9px;
  right: 18px;
  font-size: 9px;
  color: #3ecfb2;
  opacity: .9;
  z-index: 10;
  pointer-events: none;
}

.ai-filled .ss-trigger {
  border-color: #3ecfb2 !important;
  box-shadow: 0 0 0 2px rgba(62,207,178,.18) !important;
  background: rgba(62,207,178,.04) !important;
}

.ai-filled .form-control {
  border-color: #3ecfb2 !important;
  box-shadow: 0 0 0 2px rgba(62,207,178,.18) !important;
  background: rgba(62,207,178,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Market Intelligence Page
   ═══════════════════════════════════════════════════════════════════════ */

.mi-wrap {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto; padding: 0 0 60px;
}

/* Topbar */
.mi-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(15,58,58,.08);
  background: #F8FBFA;
}
.mi-back {
  font-size: 11px; color: #4A5E5E;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(15,58,58,.14);
  background: #fff;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.mi-back:hover { color: #0FB8A2; border-color: rgba(15,184,162,.4); background: #E8F5F4; }
.mi-breadcrumb { font-size: 10px; color: #8A9999; margin-left: auto; }

/* Hero */
.mi-hero {
  padding: 28px 24px 22px; border-bottom: 1px solid rgba(15,58,58,.08);
  position: relative; overflow: hidden; background: #fff;
}
.mi-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15,184,162,.8), rgba(8,142,137,.6), transparent);
  animation: miShimmerLine 3s ease-in-out infinite;
}
@keyframes miShimmerLine {
  0%,100% { opacity: .6; transform: scaleX(.7); }
  50%      { opacity: 1;  transform: scaleX(1); }
}
.mi-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.mi-country-name {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg, #0F3A3A 0%, #0FB8A2 55%, #088E89 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 4px;
  animation: miGradientShift 4s ease infinite;
}
@keyframes miGradientShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.mi-hero-sub { font-size: 11px; color: #4A5E5E; }
.mi-hero-loading { min-height: 80px; }
.mi-hero-countries { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; }
.mi-hero-ctry-hdr { font-size: 9px; color: #8A9999; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; padding-top: 4px; flex-shrink: 0; }
.mi-ctry-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.mi-ctry-pill { background: #E8F5F4; border: 1px solid rgba(15,184,162,.25); border-radius: 4px; padding: 2px 8px; font-size: 9px; color: #088E89; white-space: nowrap; }
.mi-hero-actions { display: flex; align-items: center; gap: 8px; }
.mi-change-btn {
  font-size: 10px; color: #0FB8A2;
  border: 1px solid rgba(15,184,162,.35); border-radius: 6px;
  padding: 5px 12px; background: rgba(15,184,162,.08);
  cursor: pointer; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.mi-change-btn:hover { background: rgba(15,184,162,.15); border-color: rgba(15,184,162,.55); }
.mi-refresh-btn {
  font-size: 10px; color: #4A5E5E;
  border: 1px solid rgba(15,58,58,.14); border-radius: 6px;
  padding: 5px 12px; background: #fff;
  cursor: pointer; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.mi-refresh-btn:hover:not([disabled]) { background: #E8F5F4; color: #0FB8A2; border-color: rgba(15,184,162,.4); }
.mi-refresh-btn[disabled] { opacity: .4; cursor: default; }

/* Card sections */
.mi-glass-section {
  margin: 10px 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15,58,58,.09);
  box-shadow: 0 1px 8px rgba(11,32,32,.06);
  overflow: hidden; position: relative;
  transition: box-shadow .3s, border-color .3s;
}
.mi-glass-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15,184,162,.6), rgba(8,142,137,.4), transparent);
}
.mi-glass-section:hover {
  box-shadow: 0 4px 18px rgba(15,184,162,.1);
  border-color: rgba(15,184,162,.2);
}
.mi-sec-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px 11px; border-bottom: 1px solid rgba(15,58,58,.07);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #4A5E5E;
  background: #F8FBFA;
}
.mi-accent { color: #0FB8A2; }
.mi-sec-body { padding: 14px 16px; }
.mi-error-msg { font-size: 12px; color: #dc2626; padding: 4px 0; }
.mi-no-data { font-size: 11px; color: #8A9999; }

/* Shimmer skeleton */
.mi-shimmer-line {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, #E8F5F4 0%, #F2F7F6 50%, #E8F5F4 100%);
  background-size: 200% 100%;
  animation: miShimmer 1.4s ease-in-out infinite;
}
@keyframes miShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.mi-hl-shimmer {
  display: flex; align-items: center; gap: 9px;
  background: #F2F7F6; border: 1px solid rgba(15,58,58,.08);
  border-radius: 9px; padding: 12px; margin-bottom: 8px;
}
.mi-hl-shimmer:last-child { margin-bottom: 0; }

/* Highlights */
.mi-hl-item {
  display: flex; align-items: flex-start; gap: 9px;
  background: #F8FBFA; border: 1px solid rgba(15,58,58,.09);
  border-radius: 9px; padding: 9px 12px; margin-bottom: 8px;
  font-size: 11.5px; color: #2E3E3E; line-height: 1.5;
}
.mi-hl-item:last-child { margin-bottom: 0; }
.mi-hl-icon { font-size: 12px; color: #0FB8A2; flex-shrink: 0; margin-top: 2px; }
.mi-hl-text { flex: 1; }

/* Numbers grid */
.mi-numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mi-num-card {
  background: #F8FBFA; border: 1px solid rgba(15,58,58,.09);
  border-radius: 10px; padding: 12px 10px; text-align: center;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.mi-num-card:hover { background: #E8F5F4; border-color: rgba(15,184,162,.3); box-shadow: 0 2px 10px rgba(15,184,162,.1); }
.mi-num-val {
  font-size: 20px; font-weight: 800;
  background: linear-gradient(135deg, #0F3A3A, #0FB8A2);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mi-num-label {
  font-size: 9px; color: #4A5E5E; margin-top: 3px;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.35;
}
.mi-num-card-dual { display: flex; align-items: center; gap: 0; padding: 12px 8px; }
.mi-num-half { flex: 1; text-align: center; }
.mi-num-divider { width: 1px; align-self: stretch; background: rgba(15,58,58,.08); margin: 0 6px; }
.mi-num-card-shimmer { min-height: 62px; }

/* Charts grid */
.mi-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mi-chart-box {
  background: #F8FBFA; border: 1px solid rgba(15,58,58,.09);
  border-radius: 10px; padding: 11px 12px;
  transition: background .2s, border-color .2s;
}
.mi-chart-box:hover { background: #E8F5F4; border-color: rgba(15,184,162,.25); }
.mi-chart-label {
  font-size: 9.5px; color: #4A5E5E; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px;
}

/* Horizontal bars */
.mi-hbar-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.mi-hbar-row:last-child { margin-bottom: 0; }
.mi-hbar-name {
  font-size: 9.5px; color: #2E3E3E; width: 68px;
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 0;
}
.mi-hbar-track {
  flex: 1; background: rgba(15,58,58,.08); border-radius: 3px; height: 6px; overflow: hidden;
}
.mi-hbar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #0FB8A2, #06b6d4);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.mi-hbar-scroll {
  max-height: 128px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(15,58,58,.14) transparent;
}
.mi-hbar-scroll::-webkit-scrollbar { width: 3px; }
.mi-hbar-scroll::-webkit-scrollbar-thumb { background: rgba(15,58,58,.15); border-radius: 3px; }
.mi-hbar-cnt { font-size: 9px; color: #4A5E5E; width: 32px; text-align: right; flex-shrink: 0; }
.mi-hbar-pct { font-size: 9px; color: #8A9999; width: 30px; text-align: right; flex-shrink: 0; }

/* Donut charts */
.mi-donut2-wrap { display: flex; align-items: center; gap: 13px; }
.mi-donut2 {
  width: 86px; height: 86px; border-radius: 50%;
  position: relative; flex-shrink: 0;
}
.mi-donut2-hole {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.mi-donut2-pct { font-size: 15px; font-weight: 800; color: #0F3A3A; line-height: 1; }
.mi-donut2-lbl { font-size: 7px; color: #4A5E5E; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.mi-legend2 { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.mi-legend2-row { display: flex; align-items: center; gap: 7px; }
.mi-legend2-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mi-legend2-name { font-size: 9.5px; color: #4A5E5E; flex: 1; }
.mi-legend2-val { font-size: 10px; font-weight: 700; color: #0F3A3A; }

/* Trend sparkline */
.mi-trend-wrap {
  background: rgba(15,184,162,.05); border: 1px solid rgba(15,184,162,.15);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.mi-trend-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.mi-trend-label { font-size: 9px; color: #4A5E5E; text-transform: uppercase; letter-spacing: .05em; }
.mi-trend-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mi-trend-total { font-size: 12px; font-weight: 700; color: #0FB8A2; }
.mi-trend-peak { font-size: 9px; color: #4A5E5E; }
.mi-trend-body { display: flex; gap: 6px; }
.mi-trend-yaxis {
  width: 36px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 8px; color: #8A9999; text-align: right;
  padding-bottom: 18px;
}
.mi-trend-plot { flex: 1; position: relative; }
.mi-trend-svg { display: block; width: 100%; height: 80px; }
.mi-trend-xaxis { position: relative; height: 16px; margin-top: 2px; }
.mi-trend-xaxis span {
  position: absolute; font-size: 8px; color: #8A9999; white-space: nowrap; top: 0;
}

/* Delivery */
.mi-delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mi-delivery-box {
  background: #F8FBFA; border: 1px solid rgba(15,58,58,.09);
  border-radius: 10px; padding: 11px 12px;
}
.mi-delivery-label {
  font-size: 9.5px; color: #4A5E5E; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px;
}
.mi-ch-scroll {
  max-height: 180px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(15,58,58,.14) transparent;
}
.mi-ch-scroll::-webkit-scrollbar { width: 3px; }
.mi-ch-scroll::-webkit-scrollbar-thumb { background: rgba(15,58,58,.15); border-radius: 3px; }

/* Channel thumbnail / letter-avatar */
.mi-ch-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.mi-ch-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: 0;
}

/* Country-wise delivery card */
.mi-delivery-country { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,58,58,.08); }
.mi-ctry-del-col-hdr { font-size: 9px !important; color: #8A9999 !important; text-transform: uppercase; letter-spacing: .05em; }
.mi-ctry-delivery-list { display: flex; flex-direction: column; gap: 6px; }
.mi-ctry-del-row { display: flex; align-items: center; gap: 8px; }
.mi-ctry-del-rank { width: 16px; flex-shrink: 0; font-size: 9px; color: #8A9999; text-align: right; }
.mi-ctry-del-name { width: 110px; flex-shrink: 0; font-size: 11px; color: #0F3A3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-ctry-del-bar-track { flex: 1; height: 4px; background: rgba(15,58,58,.08); border-radius: 2px; overflow: hidden; min-width: 40px; }
.mi-ctry-del-bar-fill { height: 100%; background: linear-gradient(90deg, #0FB8A2 0%, #06b6d4 100%); border-radius: 2px; transition: width .3s ease; }
.mi-ctry-del-imp { width: 44px; flex-shrink: 0; font-size: 10px; color: #0F3A3A; text-align: right; }
.mi-ctry-del-pct { width: 34px; flex-shrink: 0; font-size: 10px; color: #8A9999; text-align: right; }
.mi-ctry-del-ch  { width: 52px; flex-shrink: 0; font-size: 10px; color: #4A5E5E; text-align: right; }
.mi-ctry-del-cpm { width: 60px; flex-shrink: 0; font-size: 10px; font-weight: 600; text-align: right; padding: 2px 7px; border-radius: 4px; background: rgba(15,184,162,.12); color: #088E89; }
.mi-ctry-del-cpm-na { background: transparent !important; color: #8A9999 !important; font-weight: 400 !important; }


/* Top 20 channels table */
.mi-top-channels-wrap {
  margin-top: 14px;
  border-top: 1px solid rgba(15,58,58,.07);
  padding-top: 12px;
}
.mi-top-channels-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
}
.mi-tch-col-heads {
  display: flex; gap: 0;
}
.mi-tch-col-heads span {
  font-size: 8.5px; color: #8A9999; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  width: 46px; text-align: right;
}
.mi-tch-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 4px; border-radius: 6px;
  text-decoration: none;
  transition: background .15s;
}
.mi-tch-row:hover { background: rgba(15,184,162,.08); }
.mi-tch-info {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
.mi-tch-name {
  font-size: 10.5px; color: #2E3E3E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.mi-tch-meta {
  font-size: 8px; color: #8A9999;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}
.mi-tch-row:hover .mi-tch-name { color: #0FB8A2; }
.mi-tch-stat {
  font-size: 10px; font-weight: 600; color: #4A5E5E;
  width: 46px; text-align: right; flex-shrink: 0;
}

.mi-ch-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid rgba(15,58,58,.06);
}
.mi-ch-row:last-child { border-bottom: none; }
.mi-ch-rank { font-size: 9px; color: #8A9999; width: 12px; flex-shrink: 0; }
.mi-ch-name {
  flex: 1; font-size: 10.5px; color: #2E3E3E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none;
  transition: color .15s;
}
.mi-ch-name:hover { color: #0FB8A2; }
.mi-ch-val { font-size: 10.5px; font-weight: 700; color: #0FB8A2; flex-shrink: 0; }
.mi-ch-imp { font-size: 9.5px; color: #4A5E5E; flex-shrink: 0; margin-left: 4px; }

/* Coming Soon */
.mi-coming-soon {
  border: 1px dashed rgba(15,58,58,.15); border-radius: 10px;
  padding: 22px; text-align: center;
  animation: miBreath 3s ease-in-out infinite;
}
@keyframes miBreath {
  0%,100% { border-color: rgba(15,58,58,.12); }
  50%      { border-color: rgba(15,184,162,.35); }
}
.mi-cs-icon { font-size: 24px; margin-bottom: 6px; opacity: .4; animation: miFloat 3s ease-in-out infinite; }
@keyframes miFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.mi-cs-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #4A5E5E;
}
.mi-cs-sub { font-size: 10px; color: #8A9999; margin-top: 4px; }

/* Picker modal */
.mi-picker-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,58,58,.25); backdrop-filter: blur(4px);
}
.mi-picker-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 1001; width: 100%; max-width: 460px; padding: 0 16px;
}
.mi-picker-box {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid rgba(15,184,162,.45);
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 16px 48px rgba(11,32,32,.15), 0 0 0 1px rgba(15,184,162,.1);
}
.mi-picker-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 15px; color: #0F3A3A;
  font-family: inherit;
}
.mi-picker-input::placeholder { color: #8A9999; }
.mi-picker-hint {
  font-size: 10px; color: #4A5E5E;
  border: 1px solid rgba(15,58,58,.14); border-radius: 5px;
  padding: 2px 7px; background: #F2F7F6; white-space: nowrap;
}
.mi-picker-error {
  margin-top: 8px; font-size: 12px; color: #dc2626;
  text-align: center; padding: 0 4px;
}

/* ── Page section dividers (bucket detail page) ──────────────────────────── */
.pg-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  color: #0FB8A2;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 14px 0 6px;
  padding-left: 2px;
}
.pg-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #E8F5F4, transparent);
  margin-left: 6px;
}
.pg-section-label i {
  font-size: .72rem;
  opacity: .8;
}

/* ── Estimate Inventory ───────────────────────────────────────────────────── */

/* Chip toggle buttons used in the estimate modal */
.est-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 16px; border-radius: 20px; font-size: .82rem; font-weight: 500;
  border: 1.5px solid rgba(15,58,58,0.18); background: #F8FBFA; color: #2E3E3E;
  cursor: pointer; transition: all .15s; line-height: 1.2;
  white-space: nowrap;
}
.est-chip:hover {
  border-color: rgba(15,184,162,0.4); background: #E8F5F4; color: #088E89;
}
.est-chip.est-chip-on {
  background: linear-gradient(135deg, #0FB8A2, #088E89);
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(15,184,162,.3);
}

/* Date inputs — style the native calendar icon to match theme */
.est-date-input::-webkit-calendar-picker-indicator {
  opacity: 0; /* hide default so our overlay icon shows */
  position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer;
}
.est-date-input:focus,
.form-control:focus {
  border-color: #0FB8A2 !important;
  box-shadow: 0 0 0 3px rgba(15,184,162,.15) !important;
}

/* Budget no-spinner */
input[type=number].no-spinner::-webkit-inner-spin-button,
input[type=number].no-spinner::-webkit-outer-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}
input[type=number].no-spinner { -moz-appearance: textfield; }

/* Config chips shown inside estimate job cards */
.est-cfg-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 99px; font-size: .67rem; font-weight: 500;
  background: #E8F5F4; color: #088E89; border: 1px solid rgba(15,184,162,0.3);
  white-space: nowrap; line-height: 1.5;
}
.est-cfg-chip i { font-size: .64rem; opacity: .8; }

/* ── Teal button utilities (theme-aligned replacements for btn-success / btn-outline-primary) */
.btn-teal {
  background: #0FB8A2; border-color: #0FB8A2; color: #fff;
}
.btn-teal:hover, .btn-teal:focus {
  background: #088E89; border-color: #088E89; color: #fff;
}
.btn-teal:disabled, .btn-teal.disabled {
  background: #0FB8A2; border-color: #0FB8A2; color: #fff; opacity: .55;
}
.btn-outline-teal {
  background: transparent; border-color: #0FB8A2; color: #0FB8A2;
}
.btn-outline-teal:hover, .btn-outline-teal:focus {
  background: #E8F5F4; border-color: #088E89; color: #088E89;
}
.btn-outline-teal:disabled, .btn-outline-teal.disabled {
  opacity: .55;
}
/* ── Creative Intelligence module ────────────────────────────────────────── */
.creative-intel { padding: 28px 32px; max-width: 1320px; margin: 0 auto; }
.creative-intel .ci-pane { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 12px 20px; box-shadow: var(--shadow-soft); margin-bottom: 12px; }
.creative-intel .ci-eyebrow { font-size: 10.5px; color: var(--primary); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; margin-bottom: 10px; }
.creative-intel .ci-eyebrow.muted { color: var(--muted); }
.creative-intel .ci-eyebrow .ci-req { color: var(--warning); background: var(--warning-soft); border: 1px solid rgba(245,158,11,.25); padding: 2px 8px; border-radius: 99px; font-size: 9.5px; margin-left: 8px; }
.creative-intel .ci-h { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text); }
.creative-intel .ci-h em { font-style: normal; color: var(--primary); }
.creative-intel .ci-h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.creative-intel .ci-h2 em { font-style: normal; color: var(--primary); }
.creative-intel .ci-sub { color: var(--muted-strong); font-size: 13.5px; line-height: 1.65; margin: 0 0 22px; max-width: 760px; }
.creative-intel .ci-rule { height: 1px; background: var(--border); margin: 14px 0 22px; }
.creative-intel .ci-error { background: var(--danger-soft); color: #b71d1d; border: 1px solid rgba(220,38,38,.25); border-radius: var(--radius-xs); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.creative-intel .ci-empty { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }

/* buttons */
.creative-intel .ci-btn { background: var(--primary); color: #fff; font-weight: 600; font-size: 13px; border: none; border-radius: var(--radius-xs); padding: 11px 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(15,184,162,.22); transition: all .15s; font-family: inherit; }
.creative-intel .ci-btn:hover { background: var(--primary-deep); box-shadow: 0 6px 20px rgba(15,184,162,.3); }
.creative-intel .ci-btn:disabled { opacity: .6; cursor: not-allowed; }
.creative-intel .ci-btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--muted-strong); padding: 10px 18px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.creative-intel .ci-btn-ghost:hover { background: var(--surface-soft); color: var(--text); border-color: var(--primary); }
.creative-intel .ci-btn-soft { background: var(--primary-soft); border: 1px solid rgba(15,184,162,.2); color: var(--primary-deep); padding: 10px 16px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* badges */
.creative-intel .ci-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; background: var(--surface-soft); color: var(--muted-strong); font-size: 11px; font-weight: 600; border: 1px solid var(--border); }
.creative-intel .ci-badge.primary { background: var(--primary-soft); color: var(--primary-deep); border-color: rgba(15,184,162,.2); }
.creative-intel .ci-badge.warn { background: var(--warning-soft); color: #a86808; border-color: rgba(245,158,11,.25); }
.creative-intel .ci-badge.muted { background: transparent; color: var(--muted); }

/* URL row + knobs */
.creative-intel .ci-url-row { display: flex; gap: 10px; margin: 16px 0 22px; }
.creative-intel .ci-input { background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 12px 16px; color: var(--text); font: 13px/1.5 inherit; }
.creative-intel .ci-url { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.creative-intel textarea.ci-input { width: 100%; min-height: 90px; resize: vertical; }
.creative-intel .ci-knobs { display: flex; gap: 18px; font-size: 12.5px; color: var(--muted-strong); align-items: center; margin: 0 0 24px; flex-wrap: wrap; font-weight: 600; }
.creative-intel .ci-knobs label { display: flex; align-items: center; gap: 6px; }
.creative-intel .ci-knobs select { background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 5px 10px; color: var(--text); font: 12.5px inherit; }

/* objective tiles */
.creative-intel .ci-obj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.creative-intel .ci-obj-tile { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; position: relative; transition: all .15s; box-shadow: var(--shadow-soft); }
.creative-intel .ci-obj-tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.creative-intel .ci-obj-tile.on { border-color: var(--primary); background: linear-gradient(135deg, var(--primary-soft), var(--surface-solid)); box-shadow: 0 0 0 1px var(--primary), 0 8px 22px rgba(15,184,162,.15); }
.creative-intel .ci-obj-tile.on::after { content: "✓"; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; background: var(--primary); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.creative-intel .ci-obj-tile .em { font-size: 18px; display: block; margin-bottom: 7px; }
.creative-intel .ci-obj-tile .nm { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.creative-intel .ci-obj-tile .sub { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* capability pills */
.creative-intel .ci-cap-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.creative-intel .ci-cap-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; border: 1px solid var(--border-strong); font-size: 13px; font-weight: 600; color: var(--muted-strong); background: var(--surface); cursor: pointer; transition: all .15s; }
.creative-intel .ci-cap-pill .em { font-size: 14px; }
.creative-intel .ci-cap-pill:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft); }
.creative-intel .ci-cap-pill.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(15,184,162,.25); }
.creative-intel .ci-cap-pill .ct { font-size: 11px; color: var(--muted); margin-left: 4px; background: var(--surface-soft); padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.creative-intel .ci-cap-pill.on .ct { background: rgba(15,58,58,.2); color: #fff; border-color: rgba(15,58,58,.3); }

/* demo report header card — appears above the 13-section one-pager */
.creative-intel .ci-demo-header {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 18px 22px; margin-bottom: 20px;
}
.creative-intel .ci-demo-toprow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.creative-intel .ci-demo-title {
  flex: 1; font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.creative-intel .ci-demo-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* suppress dark chrome from demo template when rendered in-pane */
.ci-pane-report-demo .cid-wrap    { background: transparent; position: static; min-height: auto; }
.ci-pane-report-demo .cid-topbar  { display: none !important; }
.ci-pane-report-demo .cid-sidebar { display: none !important; }
.ci-pane-report-demo .cid-report  { display: block; min-height: auto; }
.ci-pane-report-demo .cid-main    { overflow-y: visible; padding: 0; width: 100%; }
.ci-pane-report-demo .cid-pres    { display: none !important; }

/* format card content */
.cid-fmt-strategy { font-size: 12px; color: #0F3A3A; line-height: 1.6; margin: 8px 0 6px; }
.cid-fmt-row      { font-size: 11px; color: #5a8080; margin-top: 4px; }

/* result meta strip + grid */
.creative-intel .ci-result-meta { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 18px; }
.creative-intel .ci-result-grid { display: grid; grid-template-columns: 1fr 280px; gap: 22px; }
.creative-intel .ci-result-main { min-width: 0; }
.creative-intel .ci-result-side { display: flex; flex-direction: column; }

/* overall score */
.creative-intel .ci-overall { display: flex; align-items: center; gap: 14px; }
.creative-intel .ci-score-ring { width: 72px; height: 72px; border-radius: 50%; position: relative; box-shadow: 0 4px 18px rgba(15,184,162,.18); }
.creative-intel .ci-score-ring::after { content: ""; position: absolute; inset: 7px; background: var(--surface-solid); border-radius: 50%; }
.creative-intel .ci-score-ring .n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 700; letter-spacing: -.025em; z-index: 1; color: var(--text); }
.creative-intel .ci-overall-label { font-size: 14px; font-weight: 700; color: var(--text); }
.creative-intel .ci-overall-sub { font-size: 11px; color: var(--muted); }

/* capability score card (sidebar) */
.creative-intel .ci-cap-card { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: all .15s; margin-bottom: 10px; box-shadow: var(--shadow-soft); }
.creative-intel .ci-cap-card:hover { border-color: var(--primary); box-shadow: 0 14px 32px rgba(15,184,162,.12); }
.creative-intel .ci-cap-card .em { font-size: 18px; display: block; margin-bottom: 6px; }
.creative-intel .ci-cap-card .nm { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 6px; }
.creative-intel .ci-cap-card .sc { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.creative-intel .ci-cap-card .sc small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 4px; }

/* recommendation card */
.creative-intel .ci-rec { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
.creative-intel .ci-rec.pri-high { border-left: 4px solid var(--danger); }
.creative-intel .ci-rec.pri-medium { border-left: 4px solid var(--warning); }
.creative-intel .ci-rec.pri-low { border-left: 4px solid var(--info); }
.creative-intel .ci-rec-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.creative-intel .ci-rec-pri { font-size: 10px; color: var(--danger); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.creative-intel .ci-rec.pri-medium .ci-rec-pri { color: var(--warning); }
.creative-intel .ci-rec.pri-low .ci-rec-pri { color: var(--info); }
.creative-intel .ci-rec h4 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.35; flex: 1; min-width: 60%; color: var(--text); }
.creative-intel .ci-rec-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.creative-intel .ci-rec p { margin: 6px 0 0; color: var(--muted-strong); font-size: 12.5px; line-height: 1.65; }
.creative-intel .ci-rec-evidence { margin: 11px 0 0; padding: 10px 13px; background: var(--surface-soft); border-left: 2px solid var(--primary); border-radius: 0 8px 8px 0; font-size: 11.5px; color: var(--muted-strong); line-height: 1.55; }
.creative-intel .ci-rec-outcome { margin-top: 12px; display: flex; gap: 14px; align-items: center; font-size: 11.5px; color: var(--muted); padding-top: 10px; border-top: 1px dashed var(--border); }
.creative-intel .ci-rec-outcome .uplift { font-size: 18px; color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; }
.creative-intel .ci-rec-outcome .uplift.dn { color: var(--danger); }
.creative-intel .ci-rec-actions { margin-top: 10px; display: flex; gap: 6px; font-size: 11.5px; color: var(--muted); }
.creative-intel .ci-rec-actions span { padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 99px; cursor: pointer; }
.creative-intel .ci-rec-actions span:hover { border-color: var(--primary); color: var(--primary); }

/* loading */
.creative-intel .ci-loading { margin: 18px 0; }
.creative-intel .ci-step { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--text); font-size: 13.5px; }
.creative-intel .ci-si { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; font-weight: 700; }
.creative-intel .ci-si.done { background: var(--success-soft); color: var(--success); }
.creative-intel .ci-si.running { background: var(--primary-soft); color: var(--primary); animation: ciPulse 1.6s infinite; }
.creative-intel .ci-si.pending { background: var(--surface-soft); color: var(--muted); border: 1px solid var(--border); }
@keyframes ciPulse { 50% { opacity: .45; } }
.creative-intel .ci-pbar { height: 8px; background: rgba(15,58,58,.12); border-radius: 99px; overflow: hidden; margin-top: 18px; }
.creative-intel .ci-pbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #088E89); border-radius: 99px; box-shadow: 0 0 12px rgba(15,184,162,.4); transition: width .8s; }
.creative-intel .ci-pbar-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }

/* recent (entry) */
.creative-intel .ci-recent-h { margin-top: 26px; }
.creative-intel .ci-recent { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-top: 8px; }

/* footer button row */
.creative-intel .ci-footer { display: flex; gap: 10px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* feedback modal */
.creative-intel .ci-modal-shade { position: fixed; inset: 0; background: rgba(15,58,58,.5); backdrop-filter: blur(4px); padding: 42px; z-index: 2000; }
.creative-intel .ci-modal { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; max-width: 560px; margin: 0 auto; box-shadow: 0 40px 100px rgba(11,32,32,.25); }
.creative-intel .ci-modal-sub { margin: 0 0 18px; color: var(--muted-strong); font-size: 12.5px; }
.creative-intel .ci-votes { margin: 0 0 18px; display: flex; gap: 10px; }
.creative-intel .ci-vote { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: var(--radius-xs); background: var(--surface-soft); border: 1px solid var(--border-strong); gap: 8px; cursor: pointer; font-size: 13px; color: var(--text); font-weight: 600; }
.creative-intel .ci-vote.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); box-shadow: 0 0 0 3px rgba(15,184,162,.15); }
.creative-intel .ci-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.creative-intel .ci-pill { background: var(--surface-soft); padding: 5px 12px; border-radius: 99px; color: var(--muted-strong); font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); }
.creative-intel .ci-pill.on { background: var(--primary-soft); color: var(--primary-deep); border-color: rgba(15,184,162,.25); }
.creative-intel .ci-modal-footer { display: flex; gap: 10px; margin-top: 22px; justify-content: flex-end; }

/* responsive */
@media (max-width: 980px) {
  .creative-intel .ci-obj-grid { grid-template-columns: repeat(2, 1fr); }
  .creative-intel .ci-result-grid { grid-template-columns: 1fr; }
}

/* ── Creative Intelligence — agency mode (Tier 1/2/3) additions ──────────── */
.creative-intel .ci-entry-tabs { display: flex; gap: 6px; margin: 14px 0 18px; border-bottom: 1px solid var(--border); }
.creative-intel .ci-entry-tab { padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted-strong); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.creative-intel .ci-entry-tab.on { color: var(--primary-deep); border-bottom-color: var(--primary); }

.creative-intel .ci-agency-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin: 18px 0 22px; }
.creative-intel .ci-agency-cell { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow-soft); }
.creative-intel .ci-agency-cell .ci-input { width: 100%; }

.creative-intel .ci-panel { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin: 0 0 14px; box-shadow: var(--shadow-soft); }
.creative-intel .ci-panel .ci-panel-body { margin: 6px 0 8px; color: var(--text); font-size: 12.5px; }
.creative-intel .ci-muted { color: var(--muted); }

.creative-intel .ci-finding { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 12.5px; color: var(--text); border-top: 1px dashed var(--border); }
.creative-intel .ci-finding:first-of-type { border-top: 0; }
.creative-intel .ci-finding .ci-finding-tag { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-soft); color: var(--muted-strong); border: 1px solid var(--border); flex-shrink: 0; }
.creative-intel .ci-finding.sev-info .ci-finding-tag { background: var(--info-soft); color: var(--info); border-color: rgba(59,130,246,.25); }
.creative-intel .ci-finding.sev-warn .ci-finding-tag { background: var(--warning-soft); color: var(--warning); border-color: rgba(245,158,11,.25); }
.creative-intel .ci-finding.sev-block .ci-finding-tag { background: var(--danger-soft); color: var(--danger); border-color: rgba(220,38,38,.25); }

.creative-intel .ci-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.creative-intel .ci-format { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 12px 14px; }
.creative-intel .ci-format-h { font-size: 13px; font-weight: 700; color: var(--primary-deep); margin-bottom: 6px; }
.creative-intel .ci-format-strategy { font-size: 11.5px; color: var(--muted-strong); margin: 0 0 6px; line-height: 1.5; }
.creative-intel .ci-format-row { font-size: 11px; color: var(--text); margin-top: 4px; }

.creative-intel .ci-cost-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.creative-intel .ci-cost-tile { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 12px 14px; text-align: center; }
.creative-intel .ci-cost-tile .lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.creative-intel .ci-cost-tile .val { font-size: 22px; font-weight: 700; color: var(--primary-deep); margin-top: 4px; }

.creative-intel .ci-bulk-board { margin-top: 18px; }
.creative-intel .ci-leaderboard { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; font-size: 12.5px; background: var(--surface-solid); margin-top: 8px; }
.creative-intel .ci-leaderboard thead { background: var(--surface-soft); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.creative-intel .ci-leaderboard th, .creative-intel .ci-leaderboard td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.creative-intel .ci-leaderboard tbody tr { cursor: pointer; }
.creative-intel .ci-leaderboard tbody tr:hover { background: var(--primary-soft); }
.creative-intel .ci-leaderboard td.ci-url-cell { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); font-size: 11px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-intel .ci-badge.success { background: var(--success-soft); color: var(--success); border-color: rgba(18,183,106,.25); }
.creative-intel .ci-badge.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(220,38,38,.25); }

.creative-intel .ci-playbook-filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin: 0 0 18px; }

@media (max-width: 980px) {
  .creative-intel .ci-agency-row { grid-template-columns: 1fr; }
  .creative-intel .ci-playbook-filters { grid-template-columns: 1fr; }
  .creative-intel .ci-cost-tiles { grid-template-columns: 1fr; }
}

/* ── Creative Intelligence — Tier 1.5 additions ──────────────────────────── */

/* Brand-building stars */
.creative-intel .ci-stars-panel { background: linear-gradient(180deg, var(--primary-soft), var(--surface-solid)); }
.creative-intel .ci-stars-row { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.creative-intel .ci-star { font-size: 28px; color: rgba(15,58,58,.25); line-height: 1; }
.creative-intel .ci-star.star-full { color: var(--warning); }
.creative-intel .ci-star.star-half { color: var(--warning); opacity: .55; }
.creative-intel .ci-stars-num { font-size: 16px; font-weight: 700; color: var(--text); margin-left: 10px; font-variant-numeric: tabular-nums; }

/* Platform fit grid */
.creative-intel .ci-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.creative-intel .ci-platform-tile { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 12px 13px; }
.creative-intel .ci-platform-tile.pf-good { border-color: rgba(18,183,106,.3); background: linear-gradient(180deg, var(--success-soft), var(--surface-soft)); }
.creative-intel .ci-platform-tile.pf-mid  { border-color: rgba(245,158,11,.3); background: linear-gradient(180deg, var(--warning-soft), var(--surface-soft)); }
.creative-intel .ci-platform-tile.pf-bad  { border-color: rgba(220,38,38,.3); background: linear-gradient(180deg, var(--danger-soft), var(--surface-soft)); }
.creative-intel .ci-platform-tile .pf-nm { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 4px; }
.creative-intel .ci-platform-tile .pf-score { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.creative-intel .ci-platform-tile .pf-score small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.creative-intel .ci-platform-tile .pf-row { font-size: 11px; color: var(--muted-strong); padding: 3px 0; line-height: 1.4; }
.creative-intel .ci-platform-tile .pf-row.good { color: #0d8a4f; }
.creative-intel .ci-platform-tile .pf-issues { margin-top: 6px; }

/* Cognitive load */
.creative-intel .ci-cog-row { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.creative-intel .ci-cog-score { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text); padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-soft); flex-shrink: 0; }
.creative-intel .ci-cog-score.cog-low  { background: var(--success-soft); border-color: rgba(18,183,106,.3); color: var(--success); }
.creative-intel .ci-cog-score.cog-moderate { background: var(--warning-soft); border-color: rgba(245,158,11,.3); color: var(--warning); }
.creative-intel .ci-cog-score.cog-high { background: var(--danger-soft); border-color: rgba(220,38,38,.3); color: var(--danger); }
.creative-intel .ci-cog-score small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.creative-intel .ci-cog-body { flex: 1; }
.creative-intel .ci-cog-verdict { font-size: 14px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.creative-intel .ci-cog-comment { font-size: 12.5px; color: var(--muted-strong); margin-top: 3px; line-height: 1.55; }
.creative-intel .ci-cog-breakdown { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Frame-level timeline */
.creative-intel .ci-timeline-track { margin-top: 10px; padding: 0 4px; }
.creative-intel .ci-timeline-bar { position: relative; height: 18px; background: rgba(15,58,58,.12); border: 1px solid var(--border); border-radius: 9px; }
.creative-intel .ci-timeline-mark { position: absolute; top: -3px; width: 4px; height: 24px; background: var(--primary); border-radius: 2px; cursor: pointer; transition: transform .12s; }
.creative-intel .ci-timeline-mark:hover { transform: scaleY(1.15); }
.creative-intel .ci-timeline-mark.mark-high   { background: var(--danger); }
.creative-intel .ci-timeline-mark.mark-medium { background: var(--warning); }
.creative-intel .ci-timeline-mark.mark-low    { background: var(--info); }
.creative-intel .ci-timeline-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* Next-creative brief panel */
.creative-intel .ci-brief-panel { background: linear-gradient(180deg, var(--surface-soft), var(--surface-solid)); border-color: var(--primary); }
.creative-intel .ci-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 8px; }
.creative-intel .ci-brief-list { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text); line-height: 1.7; }
.creative-intel .ci-brief-list.good li::marker { color: var(--success); }
.creative-intel .ci-brief-list.bad  li::marker { color: var(--danger); }
.creative-intel .ci-brief-footer { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px dashed var(--border); margin-top: 8px; }

/* Component winners */
.creative-intel .ci-winners-panel { background: var(--surface-soft); }
.creative-intel .ci-winners-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.creative-intel .ci-winner-row { display: grid; grid-template-columns: 1fr 80px 110px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.creative-intel .ci-winner-row:last-child { border-bottom: none; }
.creative-intel .ci-winner-lab { color: var(--text); }
.creative-intel .ci-winner-lift { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.creative-intel .ci-loser-row { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.creative-intel .ci-loser-row:last-child { border-bottom: none; }
.creative-intel .ci-loser-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.creative-intel .ci-loser-head .ci-winner-lift { color: var(--danger); margin-left: auto; }
.creative-intel .ci-loser-body { font-size: 12px; color: var(--text); margin: 4px 0; line-height: 1.5; }

@media (max-width: 980px) {
  .creative-intel .ci-platform-grid { grid-template-columns: repeat(2, 1fr); }
  .creative-intel .ci-brief-grid { grid-template-columns: 1fr; }
  .creative-intel .ci-winners-cols { grid-template-columns: 1fr; }
}

/* ── Creative Intelligence — Pre vs Post-production mode ─────────────────── */

/* Mode toggle (top of Result) */
.creative-intel .ci-mode-toggle { display: flex; gap: 8px; padding: 4px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 99px; margin: 14px 0 18px; width: fit-content; }
.creative-intel .ci-mode-tab { padding: 10px 18px; border-radius: 99px; font-weight: 600; font-size: 13px; color: var(--muted-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .15s; position: relative; }
.creative-intel .ci-mode-tab small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.creative-intel .ci-mode-tab:hover { color: var(--primary-deep); }
.creative-intel .ci-mode-tab.on { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(15,184,162,.25); }
.creative-intel .ci-mode-tab.on small { color: rgba(15,58,58,.7); }
.creative-intel .ci-mock-pill { font-size: 9px; font-weight: 800; letter-spacing: .08em; background: var(--warning); color: #4a2e00; padding: 2px 6px; border-radius: 99px; margin-left: 4px; }

/* Source disclosure bar */
.creative-intel .ci-source-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); margin-bottom: 14px; font-size: 12px; }
.creative-intel .ci-source-bar.src-mock { background: var(--warning-soft); border-color: rgba(245,158,11,.4); }
.creative-intel .ci-src-label { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; }
.creative-intel .ci-src-value { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--text); }
.creative-intel .ci-mock-warn { color: #a86808; font-size: 11.5px; line-height: 1.4; }

/* Campaign strip */
.creative-intel .ci-campaign-strip { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 18px; align-items: center; padding: 18px 22px; background: linear-gradient(180deg, var(--primary-soft), var(--surface-solid)); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; box-shadow: var(--shadow-soft); }
.creative-intel .ci-campaign-info .ci-campaign-nm { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.creative-intel .ci-campaign-info .ci-campaign-sub { font-size: 11.5px; color: var(--muted); }
.creative-intel .ci-flight .ci-flight-day { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.creative-intel .ci-flight-bar { height: 7px; background: rgba(15,58,58,.15); border-radius: 99px; overflow: hidden; }
.creative-intel .ci-flight-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #088E89); border-radius: 99px; }
.creative-intel .ci-flight-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.creative-intel .ci-spend .ci-spend-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); padding: 4px 0; }
.creative-intel .ci-spend .ci-spend-row span { color: var(--muted); }
.creative-intel .ci-spend .ci-spend-row b { font-variant-numeric: tabular-nums; }

/* Lifecycle banner */
.creative-intel .ci-lifecycle { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); margin-bottom: 14px; border: 1px solid var(--border); }
.creative-intel .ci-lifecycle.lc-ramp    { background: linear-gradient(180deg, var(--success-soft), var(--surface-solid)); border-color: rgba(18,183,106,.3); }
.creative-intel .ci-lifecycle.lc-peak    { background: linear-gradient(180deg, var(--primary-soft), var(--surface-solid)); border-color: rgba(15,184,162,.3); }
.creative-intel .ci-lifecycle.lc-plateau { background: linear-gradient(180deg, var(--info-soft), var(--surface-solid)); border-color: rgba(59,130,246,.3); }
.creative-intel .ci-lifecycle.lc-fatigue { background: linear-gradient(180deg, var(--warning-soft), var(--surface-solid)); border-color: rgba(245,158,11,.3); }
.creative-intel .ci-lifecycle.lc-dying   { background: linear-gradient(180deg, var(--danger-soft), var(--surface-solid)); border-color: rgba(220,38,38,.3); }
.creative-intel .ci-lifecycle .ci-lc-icon { font-size: 28px; flex-shrink: 0; }
.creative-intel .ci-lifecycle .ci-lc-body { flex: 1; }
.creative-intel .ci-lc-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.creative-intel .ci-lc-stage { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--text); }
.creative-intel .ci-lc-verdict { font-size: 12px; color: var(--muted-strong); }
.creative-intel .ci-lc-verdict b { color: var(--text); text-transform: capitalize; }
.creative-intel .ci-lc-trend { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.creative-intel .ci-lc-trend.up { background: var(--success-soft); color: var(--success); }
.creative-intel .ci-lc-trend.dn { background: var(--danger-soft); color: var(--danger); }
.creative-intel .ci-lc-fatigue { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.creative-intel .ci-lc-comment { font-size: 12.5px; color: var(--text); margin: 0; line-height: 1.55; }

/* Performance KPI tiles */
.creative-intel .ci-perf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.creative-intel .ci-perf-tile { background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-soft); }
.creative-intel .ci-perf-tile .lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.creative-intel .ci-perf-tile .val { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.creative-intel .ci-perf-tile .delta { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.creative-intel .ci-perf-tile .delta.up { color: var(--success); }
.creative-intel .ci-perf-tile .delta.dn { color: var(--danger); }

/* Trend curve */
.creative-intel .ci-trend-svg { width: 100%; height: 80px; display: block; }
.creative-intel .ci-trend-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* Prediction reconciliation */
.creative-intel .ci-recon { display: flex; gap: 16px; align-items: center; padding: 8px 0; }
.creative-intel .ci-recon-cell { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-soft); }
.creative-intel .ci-recon-cell.ok { border-color: rgba(18,183,106,.3); background: var(--success-soft); }
.creative-intel .ci-recon-cell .lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.creative-intel .ci-recon-cell .val { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.creative-intel .ci-recon-arrow { color: var(--muted); font-size: 18px; }
.creative-intel .ci-recon-verdict { color: var(--muted-strong); font-size: 12px; margin-left: auto; font-style: italic; }

@media (max-width: 980px) {
  .creative-intel .ci-campaign-strip { grid-template-columns: 1fr; }
  .creative-intel .ci-perf-grid { grid-template-columns: repeat(2, 1fr); }
  .creative-intel .ci-recon { flex-direction: column; align-items: stretch; }
}

/* ── Result dashboard — hero + capability tiles + recs grid ────────────── */
.creative-intel .ci-hero {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--primary-soft, #E8F5F4) 0%, #ffffff 60%, var(--surface-soft, #F8FBFA) 100%);
  border: 1px solid rgba(15,184,162,.18);
  border-radius: 18px;
  margin: 12px 0 18px;
  box-shadow: 0 1px 2px rgba(11,32,32,.04), 0 12px 32px rgba(11,32,32,.06);
}
.creative-intel .ci-hero-ring {
  position: relative;
  width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--ci-ring, var(--primary)) 0 var(--pct, 0%), rgba(15,58,58,.14) 0);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(15,184,162,.18);
}
.creative-intel .ci-hero-ring.good { --ci-ring: #0FA968; }
.creative-intel .ci-hero-ring.warn { --ci-ring: #f59e0b; }
.creative-intel .ci-hero-ring.bad  { --ci-ring: #dc2626; }
.creative-intel .ci-hero-ring::after {
  content: ""; position: absolute; inset: 10px;
  background: #fff; border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(11,32,32,.05);
}
.creative-intel .ci-hero-n {
  position: relative; z-index: 1;
  font-size: 44px; font-weight: 800; letter-spacing: -.04em;
  color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.creative-intel .ci-hero-lbl {
  position: relative; z-index: 1;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-top: 4px;
}
.creative-intel .ci-hero-body { min-width: 0; }
.creative-intel .ci-hero-title {
  font-size: 26px; font-weight: 800; letter-spacing: -.025em;
  margin: 2px 0 6px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.creative-intel .ci-hero-sub {
  font-size: 13.5px; color: var(--muted-strong);
  line-height: 1.5; margin-bottom: 12px;
}
.creative-intel .ci-hero-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.creative-intel .ci-hero-aside {
  background: rgba(15,58,58,.78);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.creative-intel .ci-hero-stars {
  display: flex; gap: 2px; justify-content: center;
  margin: 6px 0 4px; line-height: 1;
}
.creative-intel .ci-hero-stars .ci-star { font-size: 24px; color: rgba(15,58,58,.28); }
.creative-intel .ci-hero-stars .ci-star.star-full { color: #f59e0b; }
.creative-intel .ci-hero-stars .ci-star.star-half {
  background: linear-gradient(90deg, #f59e0b 50%, rgba(15,58,58,.28) 50%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.creative-intel .ci-hero-stars-num { font-size: 16px; font-weight: 800; color: var(--text); }
.creative-intel .ci-hero-stars-num b { font-size: 22px; }
.creative-intel .ci-hero-stars-msg {
  font-size: 11.5px; color: var(--muted-strong);
  line-height: 1.5; margin-top: 4px;
}

/* Verdict summary box */
.creative-intel .ci-summary {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 18px;
  box-shadow: var(--shadow-soft);
}
.creative-intel .ci-summary p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}

/* Section header */
.creative-intel .ci-section-h {
  margin: 22px 0 10px;
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.creative-intel .ci-section-h .ci-h2 { margin: 0; }
.creative-intel .ci-active-score {
  font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--surface-soft, #F8FBFA);
  border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 99px;
  margin-left: 6px;
}

/* 6 capability composite tiles */
.creative-intel .ci-cap-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.creative-intel .ci-cap-tile {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px 12px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.creative-intel .ci-cap-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(11,32,32,.05), 0 16px 32px rgba(11,32,32,.08);
}
.creative-intel .ci-cap-tile.on {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-soft, #E8F5F4), #fff);
  box-shadow: 0 0 0 3px rgba(15,184,162,.15), 0 12px 24px rgba(15,184,162,.12);
}
.creative-intel .ci-cap-tile.good { border-top: 3px solid #0FA968; }
.creative-intel .ci-cap-tile.warn { border-top: 3px solid #f59e0b; }
.creative-intel .ci-cap-tile.bad  { border-top: 3px solid #dc2626; }
.creative-intel .ci-cap-tile .em { font-size: 20px; display: block; margin-bottom: 6px; }
.creative-intel .ci-cap-tile .nm {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; line-height: 1.3;
  margin-bottom: 8px;
  min-height: 26px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.creative-intel .ci-cap-tile .sc {
  font-size: 28px; font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.creative-intel .ci-cap-tile.good .sc { color: #0FA968; }
.creative-intel .ci-cap-tile.warn .sc { color: #f59e0b; }
.creative-intel .ci-cap-tile.bad  .sc { color: #dc2626; }
.creative-intel .ci-cap-tile-count {
  margin-top: 6px;
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}
.creative-intel .ci-cap-tile.on .ci-cap-tile-count { color: var(--primary-deep, #088E89); }

/* Info row: cognitive load + platform fit */
.creative-intel .ci-info-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  margin-bottom: 18px;
}
.creative-intel .ci-info-row .ci-panel { margin-bottom: 0; }
.creative-intel .ci-cog-row { display: flex; gap: 16px; align-items: center; margin-top: 10px; }
.creative-intel .ci-cog-ring {
  width: 80px; height: 80px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ci-cog-bg, #fff8e8);
  border: 1px solid var(--ci-cog-border, rgba(245,158,11,.3));
  flex-shrink: 0;
}
.creative-intel .ci-cog-ring.good { --ci-cog-bg: #e9fbf3; --ci-cog-border: rgba(18,183,106,.3); }
.creative-intel .ci-cog-ring.good .n { color: #0FA968; }
.creative-intel .ci-cog-ring.warn .n { color: #f59e0b; }
.creative-intel .ci-cog-ring.bad  { --ci-cog-bg: #fef2f2; --ci-cog-border: rgba(220,38,38,.3); }
.creative-intel .ci-cog-ring.bad  .n { color: #dc2626; }
.creative-intel .ci-cog-ring .n {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.creative-intel .ci-cog-ring .lbl {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-top: 3px;
}
.creative-intel .ci-cog-body { flex: 1; min-width: 0; }
.creative-intel .ci-cog-verdict {
  font-size: 14px; font-weight: 700;
  text-transform: capitalize;
  color: var(--text);
}
.creative-intel .ci-cog-comment {
  font-size: 12px; color: var(--muted-strong);
  line-height: 1.5; margin-top: 4px;
}
.creative-intel .ci-cog-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.creative-intel .ci-platforms-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.creative-intel .ci-platform-mini {
  background: var(--surface-soft, #F8FBFA);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.creative-intel .ci-platform-mini.good { background: linear-gradient(180deg, #e9fbf3, #fff); border-color: rgba(18,183,106,.3); }
.creative-intel .ci-platform-mini.warn { background: linear-gradient(180deg, #fff8e8, #fff); border-color: rgba(245,158,11,.3); }
.creative-intel .ci-platform-mini.bad  { background: linear-gradient(180deg, #fef2f2, #fff); border-color: rgba(220,38,38,.3); }
.creative-intel .ci-platform-mini .nm {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
  font-weight: 800;
}
.creative-intel .ci-platform-mini .sc {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.creative-intel .ci-platform-mini .sc small { font-size: 10px; color: var(--muted); margin-left: 2px; }
.creative-intel .ci-platform-mini .li {
  font-size: 10.5px; color: var(--muted-strong);
  line-height: 1.45; margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Recommendations grid (2-up on wide, 1-up on narrow) */
.creative-intel .ci-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.creative-intel .ci-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 99px;
  background: var(--surface-soft, #F8FBFA);
  color: var(--muted-strong);
  font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--border);
}

@media (max-width: 1180px) {
  .creative-intel .ci-cap-grid { grid-template-columns: repeat(3, 1fr); }
  .creative-intel .ci-info-row { grid-template-columns: 1fr; }
  .creative-intel .ci-platforms-mini { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .creative-intel .ci-hero { grid-template-columns: 1fr; text-align: center; }
  .creative-intel .ci-hero-ring { margin: 0 auto; }
  .creative-intel .ci-hero-title { white-space: normal; }
  .creative-intel .ci-hero-meta { justify-content: center; }
  .creative-intel .ci-recs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .creative-intel .ci-cap-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Related winners + contrasts (peer cards) + History list ───────────── */
.creative-intel .ci-peers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.creative-intel .ci-peer { position: relative; display: block; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.creative-intel .ci-peer:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--primary); }
.creative-intel .ci-peer-strict { position: absolute; top: 8px; right: 8px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 3px 7px; border-radius: 99px; text-transform: uppercase; }
.creative-intel .ci-peer-cid { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--muted); }
.creative-intel .ci-peer-title { font-size: 11.5px; font-weight: 600; margin-top: 4px; line-height: 1.35; min-height: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.creative-intel .ci-peer-tier2 { font-size: 10px; color: var(--primary); margin-top: 4px; font-weight: 600; }
.creative-intel .ci-peer-pctile { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; margin-top: 6px; background: var(--surface-soft); color: var(--muted); }
.creative-intel .ci-peer-pctile.good { background: var(--success-soft, #e9fbf3); color: #0d8a4f; }
.creative-intel .ci-peer-pctile.warn { background: var(--warning-soft, #fff8e8); color: #a86808; }
.creative-intel .ci-peer-pctile.bad { background: var(--danger-soft, #fef2f2); color: #b71d1d; }

.creative-intel .ci-history-list { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: 0; }
.creative-intel .ci-history-row {
  display: grid;
  grid-template-columns: 78px minmax(0,1fr) repeat(4, minmax(0,auto)) 36px;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(11,32,32,.04), 0 6px 18px rgba(11,32,32,.04);
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-width: 0;
}
.creative-intel .ci-history-row::before {
  content: "";
  position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 3px;
  background: var(--ci-row-accent, var(--primary, #0FB8A2));
  opacity: .85;
}
.creative-intel .ci-history-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(11,32,32,.06), 0 16px 32px rgba(11,32,32,.08);
  border-color: rgba(15,184,162,.35);
}
.creative-intel .ci-history-row:hover .ci-history-go { transform: translateX(3px); color: var(--primary); }

/* Score donut */
.creative-intel .ci-history-score {
  width: 68px; height: 68px; border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
  background: conic-gradient(from -90deg, var(--ci-score-color, #D9E3E3) 0 var(--ci-score-pct, 0%), rgba(15,58,58,.12) 0);
  flex-shrink: 0;
}
.creative-intel .ci-history-score::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: #fff;
}
.creative-intel .ci-history-score .n {
  position: relative; z-index: 1;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ci-score-color, var(--muted-strong));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.creative-intel .ci-history-score .lbl {
  position: relative; z-index: 1;
  font-size: 8.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
  margin-top: 2px;
}

/* Title block */
.creative-intel .ci-history-main { min-width: 0; }
.creative-intel .ci-history-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -.01em; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.creative-intel .ci-history-meta {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 6px; font-size: 11px;
}
.creative-intel .ci-history-meta .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  background: var(--surface-soft, #F8FBFA);
  color: var(--muted-strong);
  border: 1px solid var(--border);
  font-weight: 600;
}
.creative-intel .ci-history-meta .chip code {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  background: transparent; padding: 0; color: var(--primary-deep, #088E89);
}
.creative-intel .ci-history-meta .chip.iab { background: var(--primary-soft, #E8F5F4); color: var(--primary-deep, #088E89); border-color: rgba(15,184,162,.18); }

/* Compact cells (objective, stars, owner, date) */
.creative-intel .ci-history-cell { min-width: 0; }
.creative-intel .ci-history-cell .lab {
  font-size: 9px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .14em; font-weight: 800; margin-bottom: 4px;
}
.creative-intel .ci-history-cell .val {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.creative-intel .ci-history-cell.owner .val { max-width: 200px; }
.creative-intel .ci-history-cell.date .val { font-variant-numeric: tabular-nums; color: var(--muted-strong); }

/* Stars */
.creative-intel .ci-stars { display: inline-flex; gap: 1px; line-height: 1; }
.creative-intel .ci-stars span { font-size: 14px; color: rgba(15,58,58,.28); }
.creative-intel .ci-stars span.on { color: #f59e0b; }
.creative-intel .ci-stars span.half {
  background: linear-gradient(90deg, #f59e0b 50%, rgba(15,58,58,.28) 50%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.creative-intel .ci-stars-num { font-size: 11px; color: var(--muted); font-weight: 700; margin-left: 4px; vertical-align: 2px; }

.creative-intel .ci-history-go {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 99px; color: var(--muted); font-size: 18px;
  background: var(--surface-soft, #F8FBFA);
  border: 1px solid var(--border);
  transition: transform .15s ease, color .15s ease, background .15s ease;
}

/* Top action bar */
.creative-intel .ci-history-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 0 18px; flex-wrap: wrap;
}
.creative-intel .ci-history-bar input {
  flex: 1; min-width: 240px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13.5px; transition: border-color .15s ease, box-shadow .15s ease;
}
.creative-intel .ci-history-bar input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,184,162,.12);
}
.creative-intel .ci-history-bar .ci-history-scope {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-soft, #F8FBFA);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 600; color: var(--muted-strong);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.creative-intel .ci-history-bar .ci-history-scope.on {
  background: var(--primary-soft, #E8F5F4);
  color: var(--primary-deep, #088E89);
  border-color: rgba(15,184,162,.3);
}

/* Header summary line */
.creative-intel .ci-history-count {
  font-size: 12.5px; color: var(--muted);
  margin: 4px 0 0;
}
.creative-intel .ci-history-count b { color: var(--text); font-weight: 700; }

@media (max-width: 1100px) {
  .creative-intel .ci-history-row {
    grid-template-columns: 64px minmax(0,1fr) auto auto 30px;
  }
  .creative-intel .ci-history-cell.objective,
  .creative-intel .ci-history-cell.owner { display: none; }
}
@media (max-width: 720px) {
  .creative-intel .ci-history-row {
    grid-template-columns: 56px minmax(0,1fr) auto;
    padding: 12px 14px;
  }
  .creative-intel .ci-history-cell.stars,
  .creative-intel .ci-history-cell.date { font-size: 11px; }
  .creative-intel .ci-history-go { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Creative Intelligence v2 — dashboard redesign
 * IBM Plex Sans (matches the rest of the app) + teal accent.
 * Applies to both fresh-analysis result view AND History Detail (same template).
 * ═══════════════════════════════════════════════════════════════════════════ */

.creative-intel {
  /* Alias kept for any downstream rule that still references --ci-serif —
     points at the app's primary sans family so we stay on-theme. */
  --ci-serif: var(--sans);
  --ci-ink: var(--text);
  --ci-ink-soft: var(--muted);
  --ci-paper: var(--bg);
  --ci-rule: var(--border);
  --ci-rule-strong: var(--border-strong);
  --ci-good: var(--success);
  --ci-warn: var(--warning);
  --ci-bad: #DA2D2D;
  --ci-accent: var(--primary);
  --ci-accent-tint: var(--primary-soft);
}

/* ── In-page nav (sticky pill) ──────────────────────────────────────────── */
.creative-intel .ci-toc {
  position: sticky; top: 12px; z-index: 30;
  display: inline-flex; gap: 2px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ci-rule);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 18px;
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(11,32,32,.04), 0 12px 28px rgba(11,32,32,.06);
}
.creative-intel .ci-toc-link {
  all: unset; cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  color: var(--ci-ink-soft);
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.creative-intel .ci-toc-link:hover {
  background: var(--ci-accent-tint);
  color: var(--ci-accent);
}

/* ── Editorial hero ─────────────────────────────────────────────────────── */
.creative-intel .ci-hero-v2 {
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 18px;
  padding: 32px 36px;
  margin: 0 0 22px;
  box-shadow: 0 1px 2px rgba(11,32,32,.03), 0 16px 36px rgba(11,32,32,.05);
}
.creative-intel .ci-hero-v2-eyebrow {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ci-accent);
  margin-bottom: 14px;
}
.creative-intel .ci-hero-v2-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 40px; line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 8px;
  color: var(--ci-ink);
}
.creative-intel .ci-hero-v2-byline {
  font-size: 13px; color: var(--ci-ink-soft);
  margin-bottom: 28px;
  letter-spacing: -.005em;
}
.creative-intel .ci-hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) 1.4fr;
  gap: 32px;
  align-items: center;
  border-top: 1px solid var(--ci-rule);
  border-bottom: 1px solid var(--ci-rule);
  padding: 24px 0;
}

/* Score donut + narrative */
.creative-intel .ci-hero-v2-score { display: flex; gap: 20px; align-items: center; }
.creative-intel .ci-hero-v2-ring {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--ci-ring, var(--ci-accent)) 0 var(--pct, 0%), rgba(11,32,32,.07) 0);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.creative-intel .ci-hero-v2-ring.good { --ci-ring: var(--ci-good); }
.creative-intel .ci-hero-v2-ring.warn { --ci-ring: var(--ci-warn); }
.creative-intel .ci-hero-v2-ring.bad  { --ci-ring: var(--ci-bad); }
.creative-intel .ci-hero-v2-ring::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%; background: #fff;
}
.creative-intel .ci-hero-v2-ring .n {
  position: relative; z-index: 1;
  font-family: var(--sans);
  font-size: 48px; font-weight: 600;
  letter-spacing: -.04em;
  color: var(--ci-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.creative-intel .ci-hero-v2-ring .lbl {
  position: relative; z-index: 1;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--ci-ink-soft);
  margin-top: 4px;
}
.creative-intel .ci-hero-v2-score-narrative {
  font-family: var(--sans);
  font-size: 17px; line-height: 1.5;
  color: var(--ci-ink-soft);
  letter-spacing: -.005em;
}

/* Stat strip — 4 KPIs */
.creative-intel .ci-hero-v2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
}
.creative-intel .ci-stat {
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--ci-rule);
}
.creative-intel .ci-stat:first-child { border-left: none; padding-left: 0; }
.creative-intel .ci-stat dt {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ci-ink-soft);
  margin-bottom: 6px;
}
.creative-intel .ci-stat dd { margin: 0; }
.creative-intel .ci-stat .ci-stat-num {
  font-family: var(--sans);
  font-size: 28px; font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.creative-intel .ci-stat .ci-stat-num.good { color: var(--ci-good); }
.creative-intel .ci-stat .ci-stat-num.warn { color: var(--ci-warn); }
.creative-intel .ci-stat .ci-stat-num.bad  { color: var(--ci-bad); }
.creative-intel .ci-stat .ci-stat-num small {
  font-size: 12px; font-weight: 500;
  color: var(--ci-ink-soft);
  margin-left: 2px;
}
.creative-intel .ci-stat .ci-stat-stars { display: inline-flex; gap: 1px; margin-right: 4px; }
.creative-intel .ci-stat .ci-stat-stars .ci-star { font-size: 13px; }
.creative-intel .ci-stat .ci-stat-foot {
  font-size: 11px; color: var(--ci-ink-soft);
  margin-top: 6px;
  line-height: 1.45;
}

/* Verdict pull-quote */
.creative-intel .ci-verdict {
  margin: 24px 0 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--ci-accent);
}
.creative-intel .ci-verdict p {
  font-family: var(--sans);
  font-size: 18px; line-height: 1.55;
  color: var(--ci-ink);
  letter-spacing: -.005em;
  margin: 0;
}

/* ── Section header (used by all sections below hero) ───────────────────── */
.creative-intel .ci-section {
  margin: 38px 0 0;
}
.creative-intel .ci-section + .ci-section { margin-top: 38px; }
.creative-intel .ci-section-eyebrow {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--ci-accent);
  margin-bottom: 6px;
}
.creative-intel .ci-section-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 28px; line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--ci-ink);
  margin: 0 0 8px;
}
.creative-intel .ci-section-title em {
  font-style: italic;
  color: var(--ci-accent);
}
.creative-intel .ci-section-pill {
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11.5px; font-weight: 700;
  background: var(--ci-accent-tint);
  color: var(--ci-accent);
  padding: 3px 11px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 4px;
}
.creative-intel .ci-section-pill.ghost {
  background: transparent;
  color: var(--ci-ink-soft);
  border: 1px solid var(--ci-rule);
}
.creative-intel .ci-section-lede {
  font-family: var(--sans);
  font-size: 15px; line-height: 1.55;
  color: var(--ci-ink-soft);
  letter-spacing: -.003em;
  margin: 0 0 18px;
  max-width: 720px;
}

/* ── Capability bento ───────────────────────────────────────────────────── */
.creative-intel .ci-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.creative-intel .ci-bento-tile {
  all: unset; cursor: pointer;
  display: block;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 14px;
  padding: 18px 16px 14px;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  min-width: 0;
}
.creative-intel .ci-bento-tile:hover {
  transform: translateY(-2px);
  border-color: var(--ci-rule-strong);
  box-shadow: 0 2px 4px rgba(11,32,32,.04), 0 18px 36px rgba(11,32,32,.08);
}
.creative-intel .ci-bento-tile.on {
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 3px var(--ci-accent-tint), 0 18px 36px rgba(11,32,32,.08);
  background: linear-gradient(180deg, var(--ci-accent-tint), #fff 60%);
}
.creative-intel .ci-bento-em {
  display: block; font-size: 22px; line-height: 1;
  margin-bottom: 10px;
}
.creative-intel .ci-bento-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ci-ink-soft);
  line-height: 1.3;
  min-height: 28px;
  margin-bottom: 8px;
}
.creative-intel .ci-bento-score {
  font-family: var(--sans);
  font-size: 36px; font-weight: 600;
  letter-spacing: -.035em;
  color: var(--ci-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.creative-intel .ci-bento-tile.good .ci-bento-score { color: var(--ci-good); }
.creative-intel .ci-bento-tile.warn .ci-bento-score { color: var(--ci-warn); }
.creative-intel .ci-bento-tile.bad  .ci-bento-score { color: var(--ci-bad); }
.creative-intel .ci-bento-meter {
  margin-top: 10px;
  height: 4px; border-radius: 99px;
  background: rgba(11,32,32,.06);
  overflow: hidden;
}
.creative-intel .ci-bento-meter > i {
  display: block; height: 100%;
  background: var(--ci-accent);
  border-radius: 99px;
  transition: width .5s ease;
}
.creative-intel .ci-bento-tile.good .ci-bento-meter > i { background: var(--ci-good); }
.creative-intel .ci-bento-tile.warn .ci-bento-meter > i { background: var(--ci-warn); }
.creative-intel .ci-bento-tile.bad  .ci-bento-meter > i { background: var(--ci-bad); }
.creative-intel .ci-bento-count {
  margin-top: 8px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ci-ink-soft);
}
.creative-intel .ci-bento-tile.on .ci-bento-count { color: var(--ci-accent); }

/* ── Figures (cognitive load + platform fit side-by-side) ───────────────── */
.creative-intel .ci-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  margin-bottom: 18px;
}
.creative-intel .ci-figure {
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 14px;
  padding: 20px 22px;
}
.creative-intel .ci-figure-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ci-rule);
  margin-bottom: 14px;
}
.creative-intel .ci-figure-label {
  font-family: var(--sans);
  font-size: 16px; font-weight: 600;
  color: var(--ci-ink);
  letter-spacing: -.01em;
}
.creative-intel .ci-figure-cite {
  font-size: 10.5px; font-weight: 600;
  color: var(--ci-ink-soft);
  font-style: italic;
}
.creative-intel .ci-figure-body { display: flex; flex-direction: column; gap: 10px; }
.creative-intel .ci-figure-num {
  font-family: var(--sans);
  font-size: 40px; font-weight: 600;
  letter-spacing: -.035em;
  color: var(--ci-ink);
  line-height: 1;
  display: flex; align-items: baseline; gap: 12px;
}
.creative-intel .ci-figure-num.good { color: var(--ci-good); }
.creative-intel .ci-figure-num.warn { color: var(--ci-warn); }
.creative-intel .ci-figure-num.bad  { color: var(--ci-bad); }
.creative-intel .ci-figure-num small {
  font-size: 13px; font-weight: 500;
  color: var(--ci-ink-soft);
  letter-spacing: 0;
}
.creative-intel .ci-figure-verdict {
  font-family: "Inter", sans-serif;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: currentColor;
  background: currentColor;
  padding: 4px 9px;
  border-radius: 99px;
  align-self: center;
}
.creative-intel .ci-figure-num.good .ci-figure-verdict,
.creative-intel .ci-figure-num.warn .ci-figure-verdict,
.creative-intel .ci-figure-num.bad  .ci-figure-verdict { color: #fff; }
.creative-intel .ci-figure-caption {
  font-size: 13px; line-height: 1.55;
  color: var(--ci-ink-soft);
  margin: 0;
}
.creative-intel .ci-microstats {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ci-ink-soft);
  padding-top: 10px;
  border-top: 1px dashed var(--ci-rule);
}
.creative-intel .ci-microstats b {
  font-family: var(--sans);
  font-weight: 600; color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
}

.creative-intel .ci-platforms-v2 { display: flex; flex-direction: column; gap: 10px; }
.creative-intel .ci-platform-v2 {
  padding: 10px 0;
  border-bottom: 1px solid var(--ci-rule);
}
.creative-intel .ci-platform-v2:last-child { border-bottom: none; }
.creative-intel .ci-platform-v2-row {
  display: flex; align-items: baseline; justify-content: space-between;
}
.creative-intel .ci-platform-v2-nm {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ci-ink);
}
.creative-intel .ci-platform-v2-sc {
  font-family: var(--sans);
  font-size: 20px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ci-ink);
}
.creative-intel .ci-platform-v2.good .ci-platform-v2-sc { color: var(--ci-good); }
.creative-intel .ci-platform-v2.warn .ci-platform-v2-sc { color: var(--ci-warn); }
.creative-intel .ci-platform-v2.bad  .ci-platform-v2-sc { color: var(--ci-bad); }
.creative-intel .ci-platform-v2-sc small { font-size: 10px; color: var(--ci-ink-soft); margin-left: 2px; }
.creative-intel .ci-platform-v2-meter {
  height: 3px; border-radius: 99px;
  background: rgba(11,32,32,.06);
  margin: 6px 0 6px;
  overflow: hidden;
}
.creative-intel .ci-platform-v2-meter > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--ci-accent);
}
.creative-intel .ci-platform-v2.good .ci-platform-v2-meter > i { background: var(--ci-good); }
.creative-intel .ci-platform-v2.warn .ci-platform-v2-meter > i { background: var(--ci-warn); }
.creative-intel .ci-platform-v2.bad  .ci-platform-v2-meter > i { background: var(--ci-bad); }
.creative-intel .ci-platform-v2-issue {
  font-size: 12px; color: var(--ci-ink-soft);
  line-height: 1.45;
}

/* ── Recommendations feed (Linear-style) ────────────────────────────────── */
.creative-intel .ci-rec-feed { display: flex; flex-direction: column; gap: 12px; }
.creative-intel .ci-rec-v2 {
  position: relative;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 14px;
  padding: 18px 22px 16px 26px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.creative-intel .ci-rec-v2:hover {
  border-color: var(--ci-rule-strong);
  box-shadow: 0 1px 2px rgba(11,32,32,.03), 0 12px 24px rgba(11,32,32,.05);
}
.creative-intel .ci-rec-v2-rail {
  position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 3px;
  background: var(--ci-rule-strong);
}
.creative-intel .ci-rec-v2.pri-high .ci-rec-v2-rail { background: var(--ci-bad); }
.creative-intel .ci-rec-v2.pri-medium .ci-rec-v2-rail { background: var(--ci-warn); }
.creative-intel .ci-rec-v2.pri-low .ci-rec-v2-rail { background: var(--ci-ink-soft); opacity: .35; }
.creative-intel .ci-rec-highlight {
  animation: ci-rec-pulse 1.5s ease-out;
}
@keyframes ci-rec-pulse {
  0% { box-shadow: 0 0 0 0 var(--primary); background: rgba(15, 184, 162, 0.08); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

.creative-intel .ci-rec-v2-head {
  display: flex; gap: 12px; align-items: baseline;
  margin-bottom: 8px;
}
.creative-intel .ci-rec-v2-pri {
  display: inline-flex;
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: "Inter", sans-serif;
}
.creative-intel .ci-rec-v2.pri-high .ci-rec-v2-pri {
  background: rgba(220,38,38,.1); color: var(--ci-bad);
}
.creative-intel .ci-rec-v2.pri-medium .ci-rec-v2-pri {
  background: rgba(217,119,6,.1); color: var(--ci-warn);
}
.creative-intel .ci-rec-v2.pri-low .ci-rec-v2-pri {
  background: rgba(58,70,96,.08); color: var(--ci-ink-soft);
}
.creative-intel .ci-rec-v2-title {
  font-family: var(--sans);
  font-size: 18px; font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ci-ink);
  margin: 0; line-height: 1.35;
  flex: 1; min-width: 0;
}
.creative-intel .ci-rec-v2-uplift {
  font-family: var(--sans);
  font-size: 22px; font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ci-good);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.creative-intel .ci-rec-v2-uplift.dn { color: var(--ci-bad); }
.creative-intel .ci-rec-v2-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.creative-intel .ci-rec-v2-body {
  font-size: 13.5px; line-height: 1.6;
  color: var(--ci-ink-soft);
  margin: 0 0 10px;
}
.creative-intel .ci-rec-v2-evidence {
  font-family: var(--sans);
  font-size: 13.5px; font-style: italic;
  line-height: 1.55;
  color: var(--ci-ink);
  margin: 0 0 12px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--ci-accent);
}
.creative-intel .ci-rec-v2-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--ci-rule);
}
.creative-intel .ci-action-btn {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: var(--ci-ink-soft);
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  padding: 5px 11px;
  border-radius: 99px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.creative-intel .ci-action-btn:hover {
  background: #fff; color: var(--ci-ink);
  border-color: var(--ci-rule-strong);
}
.creative-intel .ci-action-btn.primary {
  background: var(--ci-accent);
  color: #fff; border-color: var(--ci-accent);
}
.creative-intel .ci-action-btn.primary:hover {
  background: #0f2823; border-color: #0f2823;
}

/* ── Peer cards v2 (YouTube thumbnails) ─────────────────────────────────── */
.creative-intel .ci-peers-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.creative-intel .ci-peer-v2 {
  display: block; text-decoration: none; color: inherit;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.creative-intel .ci-peer-v2:hover {
  transform: translateY(-3px);
  border-color: var(--ci-rule-strong);
  box-shadow: 0 2px 6px rgba(11,32,32,.05), 0 24px 40px rgba(11,32,32,.1);
}
.creative-intel .ci-peer-v2-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #088E89 0%, #0FB8A2 60%, #3a8071 100%);
  overflow: hidden;
}
.creative-intel .ci-peer-v2-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .3s ease;
}
.creative-intel .ci-peer-v2:hover .ci-peer-v2-thumb img { transform: scale(1.04); }
.creative-intel .ci-peer-v2-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 16px;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s ease;
}
.creative-intel .ci-peer-v2:hover .ci-peer-v2-play { opacity: 1; }
.creative-intel .ci-peer-v2-pctile {
  position: absolute; top: 8px; right: 8px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--ci-ink);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.creative-intel .ci-peer-v2-pctile.good { background: var(--ci-good); color: #fff; }
.creative-intel .ci-peer-v2-pctile.warn { background: var(--ci-warn); color: #fff; }
.creative-intel .ci-peer-v2-pctile.bad  { background: var(--ci-bad);  color: #fff; }
.creative-intel .ci-peer-v2-strict {
  position: absolute; bottom: 8px; left: 8px;
  font-family: "Inter", sans-serif;
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  background: rgba(11,32,32,.78);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.creative-intel .ci-peer-v2-body { padding: 12px 14px 14px; }
.creative-intel .ci-peer-v2-title {
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ci-ink);
  line-height: 1.35;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.creative-intel .ci-peer-v2-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 11px; color: var(--ci-ink-soft);
}
.creative-intel .ci-peer-v2-cid {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; color: var(--ci-ink-soft);
  background: transparent; padding: 0;
}
.creative-intel .ci-peer-v2.contrast { opacity: .82; filter: saturate(.7); }
.creative-intel .ci-peer-v2.contrast:hover { opacity: 1; filter: none; }

/* ── History page v2 (editorial card grid) ─────────────────────────────── */
.creative-intel .ci-hist-header {
  padding: 8px 0 18px;
  border-bottom: 1px solid var(--ci-rule);
  margin-bottom: 22px;
}
.creative-intel .ci-hist-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 44px; line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ci-ink);
  margin: 4px 0 8px;
}
.creative-intel .ci-hist-lede {
  font-family: var(--sans);
  font-size: 16px; color: var(--ci-ink-soft);
  margin: 0; line-height: 1.55;
  letter-spacing: -.005em;
}
.creative-intel .ci-hist-lede b { color: var(--ci-ink); font-weight: 600; }

.creative-intel .ci-hist-toolbar {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.creative-intel .ci-hist-search {
  flex: 1; min-width: 280px;
  position: relative;
  display: flex; align-items: center;
}
.creative-intel .ci-hist-search-icon {
  position: absolute; left: 14px;
  color: var(--ci-ink-soft);
  font-size: 16px;
  pointer-events: none;
}
.creative-intel .ci-hist-search input {
  width: 100%;
  padding: 11px 16px 11px 38px;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  color: var(--ci-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.creative-intel .ci-hist-search input:focus {
  outline: none;
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 3px var(--ci-accent-tint);
}
.creative-intel .ci-hist-scope {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--ci-ink-soft);
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
  padding: 11px 16px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.creative-intel .ci-hist-scope.on {
  background: var(--ci-accent);
  color: #fff;
  border-color: var(--ci-accent);
}
.creative-intel .ci-hist-scope:hover { border-color: var(--ci-rule-strong); }

.creative-intel .ci-hist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.creative-intel .ci-hist-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.creative-intel .ci-hist-card:hover {
  transform: translateY(-3px);
  border-color: var(--ci-rule-strong);
  box-shadow: 0 2px 6px rgba(11,32,32,.05), 0 24px 44px rgba(11,32,32,.1);
}
.creative-intel .ci-hist-card:hover .ci-hist-card-arrow { transform: translateX(4px); color: var(--ci-accent); }

.creative-intel .ci-hist-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #088E89 0%, #0FB8A2 60%, #3a8071 100%);
  overflow: hidden;
}
.creative-intel .ci-hist-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, opacity .3s ease;
}
.creative-intel .ci-hist-card:hover .ci-hist-thumb img { transform: scale(1.05); }
.creative-intel .ci-hist-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,32,32,.65) 100%);
}
.creative-intel .ci-hist-score-badge {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  padding: 8px 14px;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(11,32,32,.18);
}
.creative-intel .ci-hist-card.good .ci-hist-score-badge { background: var(--ci-good); }
.creative-intel .ci-hist-card.warn .ci-hist-score-badge { background: var(--ci-warn); }
.creative-intel .ci-hist-card.bad  .ci-hist-score-badge { background: var(--ci-bad);  }
.creative-intel .ci-hist-card.good .ci-hist-score-badge .n,
.creative-intel .ci-hist-card.warn .ci-hist-score-badge .n,
.creative-intel .ci-hist-card.bad  .ci-hist-score-badge .n,
.creative-intel .ci-hist-card.good .ci-hist-score-badge .lbl,
.creative-intel .ci-hist-card.warn .ci-hist-score-badge .lbl,
.creative-intel .ci-hist-card.bad  .ci-hist-score-badge .lbl { color: #fff; }
.creative-intel .ci-hist-score-badge .n {
  font-family: var(--sans);
  font-size: 26px; font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ci-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.creative-intel .ci-hist-score-badge .lbl {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ci-ink-soft);
  margin-top: 2px;
}
.creative-intel .ci-hist-thumb-meta {
  position: absolute; bottom: 10px; left: 12px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.92);
}

.creative-intel .ci-hist-body { padding: 16px 18px 18px; }
.creative-intel .ci-hist-card-title {
  font-family: var(--sans);
  font-size: 18px; font-weight: 600;
  letter-spacing: -.018em;
  color: var(--ci-ink);
  line-height: 1.3;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 46px;
}
.creative-intel .ci-hist-card-cid {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ci-ink-soft);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.creative-intel .ci-hist-card-cid code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  background: var(--ci-paper);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--ci-ink-soft);
}
.creative-intel .ci-hist-card-obj {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ci-accent);
  background: var(--ci-accent-tint);
  padding: 3px 9px;
  border-radius: 999px;
}
.creative-intel .ci-hist-card-stars {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ci-rule);
  border-bottom: 1px solid var(--ci-rule);
}
.creative-intel .ci-hist-stars-icons { display: inline-flex; gap: 1px; }
.creative-intel .ci-hist-stars-icons .ci-star { font-size: 15px; color: rgba(11,32,32,.18); }
.creative-intel .ci-hist-stars-icons .ci-star.star-full { color: var(--ci-warn); }
.creative-intel .ci-hist-stars-icons .ci-star.star-half {
  background: linear-gradient(90deg, var(--ci-warn) 50%, rgba(11,32,32,.18) 50%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.creative-intel .ci-hist-stars-num {
  font-size: 11px; font-weight: 700;
  color: var(--ci-ink-soft);
  font-variant-numeric: tabular-nums;
}

.creative-intel .ci-hist-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--ci-ink-soft);
}
.creative-intel .ci-hist-owner {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 60%;
}
.creative-intel .ci-hist-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.creative-intel .ci-hist-card-arrow {
  position: absolute; right: 18px; bottom: 18px;
  font-size: 16px;
  color: var(--ci-ink-soft);
  transition: transform .18s ease, color .18s ease;
}
.creative-intel .ci-link {
  color: var(--ci-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .creative-intel .ci-bento { grid-template-columns: repeat(3, 1fr); }
  .creative-intel .ci-side-by-side { grid-template-columns: 1fr; }
  .creative-intel .ci-hero-v2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .creative-intel .ci-hero-v2 { padding: 22px 22px; }
  .creative-intel .ci-hero-v2-title { font-size: 30px; }
  .creative-intel .ci-section-title { font-size: 22px; }
  .creative-intel .ci-hist-title { font-size: 32px; }
  .creative-intel .ci-toc { overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  .creative-intel .ci-bento { grid-template-columns: repeat(2, 1fr); }
  .creative-intel .ci-hero-v2-score { flex-direction: column; align-items: flex-start; }
  .creative-intel .ci-hist-grid { grid-template-columns: 1fr; }
}

html { scroll-behavior: smooth; }

/* ── Smarter empty-state card for a capability with no recs ─────────────── */
.creative-intel .ci-empty-cap {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 14px;
  margin-bottom: 18px;
}
.creative-intel .ci-empty-cap.good {
  background: linear-gradient(180deg, rgba(13,153,98,.05), #fff 70%);
  border-color: rgba(13,153,98,.25);
}
.creative-intel .ci-empty-cap.warn {
  background: linear-gradient(180deg, rgba(58,70,96,.04), #fff 70%);
}
.creative-intel .ci-empty-cap .ci-empty-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  background: var(--ci-paper);
  color: var(--ci-ink-soft);
}
.creative-intel .ci-empty-cap.good .ci-empty-icon {
  background: rgba(13,153,98,.12);
  color: var(--ci-good);
}
.creative-intel .ci-empty-cap.warn .ci-empty-icon {
  background: var(--ci-accent-tint);
  color: var(--ci-accent);
}
.creative-intel .ci-empty-cap .ci-empty-body { flex: 1; min-width: 0; }
.creative-intel .ci-empty-cap h4 {
  font-family: var(--sans);
  font-size: 16px; font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ci-ink);
  margin: 2px 0 6px;
  line-height: 1.3;
}
.creative-intel .ci-empty-cap h4 em {
  font-style: normal;
  color: var(--ci-accent);
}
.creative-intel .ci-empty-cap p {
  font-size: 13px; line-height: 1.55;
  color: var(--ci-ink-soft);
  margin: 0;
}
.creative-intel .ci-empty-cap p b {
  color: var(--ci-ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACTIVATION INTELLIGENCE — 6-tile bento + drawer + Chart.js wrappers
 * Sits between Recommendations and Peer Evidence in the result view.
 * Same editorial language as the rest of the page.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Creative-id / YouTube-URL pill row in the hero */
.creative-intel .ci-hero-v2-ids {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 14px 0 0;
}
.creative-intel .ci-hero-v2-id-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  border-radius: 999px;
  padding: 6px 12px 6px 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ci-ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.creative-intel .ci-hero-v2-id-pill:hover {
  border-color: var(--ci-accent);
  color: var(--ci-ink);
  background: #fff;
}
.creative-intel .ci-hero-v2-id-pill .lbl {
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ci-accent);
}
.creative-intel .ci-hero-v2-id-pill code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: transparent; padding: 0;
  color: var(--ci-ink);
}
.creative-intel .ci-hero-v2-id-pill.yt {
  background: linear-gradient(180deg, rgba(255,0,0,.04), #fff 70%);
  border-color: rgba(255,0,0,.18);
}
.creative-intel .ci-hero-v2-id-pill.yt:hover { border-color: rgba(255,0,0,.5); }
.creative-intel .ci-copy-btn {
  border: none; background: transparent;
  cursor: pointer; padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ci-ink-soft);
  transition: background .15s, color .15s;
}
.creative-intel .ci-copy-btn:hover { background: var(--ci-accent-tint); color: var(--ci-accent); }

/* Bento — 3 columns × 2 rows on wide, 2×3 on tablet, 1×6 on mobile */
.creative-intel .ai-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 18px;
}
.creative-intel .ai-tile {
  all: unset; cursor: pointer;
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 16px;
  padding: 18px 20px 16px;
  min-width: 0;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.creative-intel .ai-tile:hover {
  transform: translateY(-2px);
  border-color: var(--ci-rule-strong);
  box-shadow: 0 2px 6px rgba(11,32,32,.04), 0 18px 32px rgba(11,32,32,.07);
}
.creative-intel .ai-tile.on {
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 3px var(--ci-accent-tint), 0 18px 32px rgba(11,32,32,.08);
  background: linear-gradient(180deg, var(--ci-accent-tint), #fff 60%);
}
.creative-intel .ai-tile-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ci-accent);
  margin-bottom: 12px;
}
.creative-intel .ai-tile-icon { font-size: 16px; }
.creative-intel .ai-tile-pill {
  margin-left: auto;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ci-ink-soft);
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  padding: 2px 7px; border-radius: 999px;
}
.creative-intel .ai-tile-headline {
  font-family: var(--sans);
  font-size: 32px; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ci-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.creative-intel .ai-tile-headline small {
  font-size: 11px; font-weight: 600;
  color: var(--ci-ink-soft);
  margin-left: 6px;
  letter-spacing: 0;
}
.creative-intel .ai-tile-sub {
  font-size: 12px;
  color: var(--ci-ink-soft);
  margin-top: 8px;
  line-height: 1.45;
}

/* DRAWER — expanded panel below the bento */
.creative-intel .ai-drawer {
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 1px 2px rgba(11,32,32,.03), 0 16px 36px rgba(11,32,32,.06);
  margin-bottom: 22px;
}
.creative-intel .ai-drawer-h h3 {
  font-family: var(--sans);
  font-size: 20px; font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ci-ink);
  margin: 0 0 6px;
}
.creative-intel .ai-drawer-h p {
  font-size: 13px; line-height: 1.55;
  color: var(--ci-ink-soft);
  margin: 0 0 14px;
  max-width: 720px;
}
.creative-intel .ai-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.creative-intel .ai-stat-card {
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  border-radius: 12px;
  padding: 14px 16px;
}
.creative-intel .ai-stat-card .lbl {
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ci-ink-soft);
  margin-bottom: 6px;
}
.creative-intel .ai-stat-card .val {
  font-family: var(--sans);
  font-size: 26px; font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ci-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.creative-intel .ai-stat-card .val small { font-size: 12px; color: var(--ci-ink-soft); margin-left: 2px; font-weight: 500; }
.creative-intel .ai-stat-card .foot { font-size: 11px; color: var(--ci-ink-soft); margin-top: 6px; line-height: 1.4; }
.creative-intel .ai-stat-card.big { margin-bottom: 10px; }

.creative-intel .ai-chart-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 12px;
  padding: 18px;
  margin-top: 8px;
  height: 320px;
}

.creative-intel .ai-sub-h {
  font-family: var(--sans);
  font-size: 14px; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ci-ink);
  margin: 10px 0 8px;
}

.creative-intel .ai-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 1080px) { .creative-intel .ai-2col { grid-template-columns: 1fr; } }

/* KPI prediction cards */
.creative-intel .ai-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.creative-intel .ai-kpi-card {
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-left: 3px solid var(--ci-rule-strong);
  border-radius: 12px;
  padding: 14px 16px;
}
.creative-intel .ai-kpi-card.good { border-left-color: var(--ci-good); }
.creative-intel .ai-kpi-card.bad  { border-left-color: var(--ci-bad);  }
.creative-intel .ai-kpi-h {
  font-size: 11.5px; font-weight: 700;
  color: var(--ci-ink);
  margin-bottom: 6px;
  line-height: 1.3;
}
.creative-intel .ai-kpi-val {
  font-family: var(--sans);
  font-size: 24px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.creative-intel .ai-kpi-delta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ci-ink-soft);
}
.creative-intel .ai-kpi-delta .sign { font-weight: 800; margin-right: 4px; }
.creative-intel .ai-kpi-card.good .ai-kpi-delta b { color: var(--ci-good); }
.creative-intel .ai-kpi-card.bad  .ai-kpi-delta b { color: var(--ci-bad); }
.creative-intel .ai-kpi-drivers {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 8px;
}
.creative-intel .ai-chip {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ci-ink-soft);
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  padding: 2px 8px; border-radius: 999px;
}
.creative-intel .ai-chip.tight { padding: 1px 6px; }
.creative-intel .ai-kpi-formula {
  margin-top: 8px;
  font-size: 10px;
  color: var(--ci-ink-soft);
  overflow: hidden; text-overflow: ellipsis;
}
.creative-intel .ai-kpi-formula code {
  font-family: ui-monospace, Menlo, monospace;
  background: var(--ci-paper);
  padding: 2px 6px;
  border-radius: 5px;
}

/* Audience list rows */
.creative-intel .ai-list { display: flex; flex-direction: column; gap: 8px; }
.creative-intel .ai-row {
  display: grid;
  grid-template-columns: 4px 1fr 44px;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
  min-width: 0;
}
.creative-intel .ai-row-bar {
  width: 4px; align-self: stretch;
  background: rgba(11,32,32,.06);
  border-radius: 99px;
  position: relative;
}
.creative-intel .ai-row-bar i {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  background: var(--ci-accent);
  border-radius: 99px;
}
.creative-intel .ai-row-body { min-width: 0; }
.creative-intel .ai-row-title { font-size: 13px; font-weight: 600; color: var(--ci-ink); }
.creative-intel .ai-row-sub   { font-size: 11px; color: var(--ci-ink-soft); margin-top: 2px; }
.creative-intel .ai-row-score {
  font-family: var(--sans);
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ci-ink);
  text-align: right;
}

/* Channel allowlist */
.creative-intel .ai-channel-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow: auto; }
.creative-intel .ai-channel {
  display: grid;
  grid-template-columns: 80px 1fr 56px;
  gap: 12px; align-items: center;
  padding: 8px 10px;
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.creative-intel .ai-channel:hover { border-color: var(--ci-accent); background: #fff; }
.creative-intel .ai-channel-thumb { width: 80px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.creative-intel .ai-channel-nm { font-size: 12.5px; font-weight: 700; color: var(--ci-ink); }
.creative-intel .ai-channel-sub { font-size: 11px; color: var(--ci-ink-soft); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.creative-intel .ai-channel-pctile {
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px; border-radius: 999px;
  background: var(--ci-paper);
  color: var(--ci-ink);
  border: 1px solid var(--ci-rule);
  text-align: center;
}
.creative-intel .ai-channel-pctile.good { background: var(--ci-good); color: #fff; border-color: var(--ci-good); }
.creative-intel .ai-channel-pctile.warn { background: var(--ci-warn); color: #fff; border-color: var(--ci-warn); }
.creative-intel .ai-channel-pctile.bad  { background: var(--ci-bad);  color: #fff; border-color: var(--ci-bad); }

/* Tables (A/B + DCO) */
.creative-intel .ai-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 12px;
  overflow: hidden;
  font-size: 12.5px;
}
.creative-intel .ai-table th, .creative-intel .ai-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ci-rule);
}
.creative-intel .ai-table th {
  background: var(--ci-paper);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ci-ink-soft);
}
.creative-intel .ai-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ci-good); }
.creative-intel .ai-table tr:last-child td { border-bottom: none; }
.creative-intel .ai-table code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: var(--ci-paper);
  padding: 2px 6px; border-radius: 5px;
}

/* Companion creative cards */
.creative-intel .ai-peers-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.creative-intel .ai-peer-mini {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center;
  padding: 8px;
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
  text-decoration: none; color: inherit;
}
.creative-intel .ai-peer-mini:hover { border-color: var(--ci-accent); background: #fff; }
.creative-intel .ai-peer-mini img { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }

/* DBA coverage matrix */
.creative-intel .ai-dba-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.creative-intel .ai-dba-cell {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--ci-paper);
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
}
.creative-intel .ai-dba-cell.present {
  background: linear-gradient(180deg, rgba(13,153,98,.06), #fff 70%);
  border-color: rgba(13,153,98,.25);
}
.creative-intel .ai-dba-cell.absent {
  background: linear-gradient(180deg, rgba(220,38,38,.04), #fff 70%);
  border-color: rgba(220,38,38,.18);
  opacity: .9;
}
.creative-intel .ai-dba-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 14px; font-weight: 800;
  color: #fff;
  background: var(--ci-good);
}
.creative-intel .ai-dba-cell.absent .ai-dba-icon { background: rgba(220,38,38,.4); }
.creative-intel .ai-dba-asset { font-size: 13px; font-weight: 700; color: var(--ci-ink); }
.creative-intel .ai-dba-bar {
  height: 4px; background: rgba(11,32,32,.06);
  border-radius: 99px;
  margin: 6px 0 4px;
  overflow: hidden;
}
.creative-intel .ai-dba-bar i {
  display: block; height: 100%;
  background: var(--ci-good);
  border-radius: 99px;
}
.creative-intel .ai-dba-cell.absent .ai-dba-bar i { background: var(--ci-bad); }
.creative-intel .ai-dba-note { font-size: 11.5px; color: var(--ci-ink-soft); line-height: 1.4; }

.creative-intel .ai-actions {
  margin: 0; padding: 0;
  list-style: none;
}
.creative-intel .ai-actions li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 13px;
  color: var(--ci-ink);
  line-height: 1.5;
  border-bottom: 1px dashed var(--ci-rule);
}
.creative-intel .ai-actions li:last-child { border-bottom: none; }
.creative-intel .ai-actions li::before {
  content: "→";
  position: absolute; left: 0;
  color: var(--ci-accent);
  font-weight: 800;
}

@media (max-width: 1080px) {
  .creative-intel .ai-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .creative-intel .ai-bento { grid-template-columns: 1fr; }
  .creative-intel .ai-channel { grid-template-columns: 64px 1fr 50px; }
  .creative-intel .ai-channel-thumb { width: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * INVENTORY REPORT — faceted leaderboard inside Creative Intelligence
 * Matches the editorial design system (IBM Plex Sans + teal accent).
 * ═══════════════════════════════════════════════════════════════════════════ */
.creative-intel .inv-pane { padding-top: 0; padding-bottom: 0; }

/* Filter panel: chips row on top, actions row pinned bottom-right */
.creative-intel .inv-filter-row {
  display: flex; flex-direction: column; gap: 0;
  padding: 12px 16px; background: #fff;
  border: 1px solid var(--ci-rule);
  border-radius: 14px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(11,32,32,.02);
}
/* Chips row — wraps naturally at narrow widths */
.creative-intel .inv-chips-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.creative-intel .inv-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ci-accent); margin-right: 4px;
  white-space: nowrap;
}
.creative-intel .inv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ci-rule);
  color: var(--ci-ink-soft); cursor: pointer; white-space: nowrap;
}
.creative-intel .inv-chip:hover { border-color: var(--ci-rule-strong); background: var(--ci-paper); }
.creative-intel .inv-chip.on {
  background: var(--ci-accent-tint); border-color: var(--ci-accent);
  color: var(--ci-accent);
}
.creative-intel .inv-chip b { color: var(--ci-ink); font-weight: 700; }
.creative-intel .inv-chip-add {
  all: unset; cursor: pointer;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  border: 1px dashed var(--ci-rule-strong); color: var(--ci-ink-soft);
  white-space: nowrap;
}
.creative-intel .inv-chip-add:hover { border-color: var(--ci-accent); color: var(--ci-accent); }
/* Actions row — always below chips, always right-aligned */
.creative-intel .inv-meta {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ci-rule);
  font-size: 11px; color: var(--ci-ink-soft);
}
.creative-intel .inv-meta select {
  font-size: 11px; padding: 4px 10px; border: 1px solid var(--ci-rule);
  border-radius: 8px; background: #fff;
}
.creative-intel .inv-btn-soft, .creative-intel .inv-btn-ghost {
  all: unset; cursor: pointer;
  font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; white-space: nowrap;
}
.creative-intel .inv-btn-soft { background: var(--ci-accent); color: #fff; }
.creative-intel .inv-btn-ghost { background: #fff; color: var(--ci-ink-soft); border: 1px solid var(--ci-rule); }

/* Export button: spinner + loading state + click-blocking */
.creative-intel .inv-export-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 160px; justify-content: center;          /* prevents width shift */
  transition: opacity .15s, background .15s;
}
.creative-intel .inv-export-btn[disabled] {
  cursor: not-allowed; opacity: .85;
}
.creative-intel .inv-export-btn.is-loading {
  pointer-events: none;                               /* block double-clicks */
  background: var(--ci-accent); opacity: .9;
}
.creative-intel .inv-export-spinner {
  width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: inv-spin 0.7s linear infinite;
}
@keyframes inv-spin {
  to { transform: rotate(360deg); }
}

.creative-intel .inv-kpi-band {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.creative-intel .inv-kpi-tile {
  background: #fff; border: 1px solid var(--ci-rule);
  border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 1px 3px rgba(11,32,32,.05);
  display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow .15s;
}
.creative-intel .inv-kpi-tile:hover {
  box-shadow: 0 4px 14px rgba(11,32,32,.08);
}
.creative-intel .inv-kpi-accent {
  background: linear-gradient(135deg, #e8f5f0 0%, #fff 60%);
  border-color: rgba(4,180,107,.22);
}
.creative-intel .inv-kpi-icon {
  font-size: 13px; color: var(--ci-accent); margin-bottom: 4px;
  font-style: normal; line-height: 1;
}
.creative-intel .inv-kpi-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ci-ink-soft);
  white-space: nowrap; margin-bottom: 4px;
}
.creative-intel .inv-kpi-val {
  font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ci-ink); font-variant-numeric: tabular-nums;
  line-height: 1.1; margin-bottom: 4px;
}
.creative-intel .inv-kpi-val-good { color: var(--ci-good); }
.creative-intel .inv-kpi-val-sm { font-size: 18px; }
.creative-intel .inv-kpi-val small {
  font-size: 11px; font-weight: 500; color: var(--ci-ink-soft); margin-left: 3px;
}
.creative-intel .inv-kpi-foot {
  font-size: 10px; color: var(--ci-ink-soft); margin-top: 2px; line-height: 1.4;
}
.creative-intel .inv-delta-pos { color: var(--ci-good); font-weight: 700; }
.creative-intel .inv-delta-neg { color: var(--ci-bad); font-weight: 700; }

.creative-intel .inv-tbl-wrap {
  background: #fff; border: 1px solid var(--ci-rule);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(11,32,32,.05);
}
.creative-intel .inv-tbl-h {
  padding: 14px 20px 12px; display: flex; justify-content: space-between; align-items: baseline;
}
.creative-intel .inv-tbl-scroll {
  overflow-x: auto;
}
/* Sticky header only within the scroll box */
.creative-intel .inv-tbl-scroll table.inv-lb th {
  position: sticky; top: 0; z-index: 2;
}
.creative-intel .inv-tbl-h h3 { font-size: 15px; font-weight: 700; margin: 0; }
.creative-intel .inv-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: var(--ci-accent-tint); color: var(--ci-accent);
  padding: 2px 8px; border-radius: 99px; margin-left: 6px;
}
.creative-intel .inv-sort-bar { font-size: 11px; color: var(--ci-ink-soft); }
.creative-intel .inv-sort-bar select { font-size: 11px; padding: 4px 8px; border: 1px solid var(--ci-rule); border-radius: 6px; }

/* ── Popover overlay ─────────────────────────────────────────────────── */
.creative-intel .inv-popover-overlay {
  position: fixed; inset: 0; z-index: 99;
}
/* ── Chip groups with dropdown ───────────────────────────────────────── */
.creative-intel .inv-chip-group {
  position: relative; display: inline-flex; align-items: center;
}
.creative-intel .inv-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  background: #fff; border: 1px solid var(--ci-rule);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(11,32,32,.12);
  min-width: 200px;
}
.creative-intel .inv-dropdown-wide { min-width: 280px; }
.creative-intel .inv-drop-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ci-ink-soft);
  border-bottom: 1px solid var(--ci-rule);
}
.creative-intel .inv-drop-clear {
  all: unset; cursor: pointer; font-size: 10px; font-weight: 600;
  color: var(--ci-accent); text-transform: none; letter-spacing: 0;
}
.creative-intel .inv-drop-clear:hover { text-decoration: underline; }
.creative-intel .inv-drop-scroll {
  max-height: 220px; overflow-y: auto; padding: 6px 4px;
}
.creative-intel .inv-drop-body { padding: 10px 14px; }
.creative-intel .inv-drop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--ci-ink);
  cursor: pointer; border-radius: 6px;
}
.creative-intel .inv-drop-row:hover { background: var(--ci-paper); }
.creative-intel .inv-drop-row input[type=checkbox] { cursor: pointer; accent-color: var(--ci-accent); }
.creative-intel .inv-drop-range-row {
  display: flex; align-items: center; gap: 8px;
}
.creative-intel .inv-drop-num {
  width: 72px; padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--ci-rule); border-radius: 6px; text-align: center;
}
.creative-intel .inv-drop-date {
  padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--ci-rule); border-radius: 6px;
}
.creative-intel .inv-drop-dash { color: var(--ci-ink-soft); font-weight: 600; }
.creative-intel .inv-drop-score-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
}
.creative-intel .inv-drop-score-lbl {
  font-size: 11px; color: var(--ci-ink); width: 110px; flex-shrink: 0;
}
.creative-intel .inv-range {
  flex: 1; accent-color: var(--ci-accent);
}
.creative-intel .inv-drop-score-val {
  width: 28px; text-align: right; font-size: 11px; font-weight: 700;
  color: var(--ci-ink); font-variant-numeric: tabular-nums;
}

/* ── Leaderboard table ───────────────────────────────────────────────── */
.creative-intel .inv-tbl-hint {
  font-size: 10.5px; color: var(--ci-ink-soft);
}
.creative-intel table.inv-lb {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  table-layout: fixed;
}
.creative-intel table.inv-lb th {
  font-size: 9px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ci-ink-soft);
  text-align: left; padding: 9px 10px;
  border-top: 1px solid var(--ci-rule); border-bottom: 2px solid var(--ci-rule);
  background: var(--ci-paper); white-space: nowrap;
}
.creative-intel table.inv-lb th.sortable { cursor: pointer; user-select: none; }
.creative-intel table.inv-lb th.sortable:hover { color: var(--ci-accent); }
.creative-intel .inv-sort-ico { font-style: normal; color: var(--ci-accent); margin-left: 2px; }
.creative-intel .inv-th-rank    { width: 52px; padding-left: 14px; }
.creative-intel .inv-th-creative { width: 32%; }    /* truncates if too long */
.creative-intel .inv-th-cat     { width: 12%; }
.creative-intel .inv-th-dur     { width: 6%; min-width: 56px; text-align: right; }
.creative-intel .inv-th-num     { width: 8.4%; min-width: 84px; text-align: right; }

.creative-intel table.inv-lb td {
  padding: 10px 10px; border-bottom: 1px solid var(--ci-rule); vertical-align: middle;
}
.creative-intel .inv-lb-row { cursor: pointer; transition: background .1s; }
.creative-intel .inv-lb-row:hover td { background: #f7fbff; }
.creative-intel .inv-lb-row:last-child td { border-bottom: none; }

/* Rank badge */
.creative-intel .inv-td-rank { width: 38px; text-align: center; }
.creative-intel .inv-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  font-size: 11px; font-weight: 800;
  background: var(--ci-paper); color: var(--ci-ink-soft);
}
.creative-intel .inv-lb-row:nth-child(1) .inv-rank-badge { background: #fff8e1; color: #d97706; }
.creative-intel .inv-lb-row:nth-child(2) .inv-rank-badge { background: #f3f4f6; color: #4A5E5E; }
.creative-intel .inv-lb-row:nth-child(3) .inv-rank-badge { background: #fef3ea; color: #b45309; }

/* Creative cell */
.creative-intel .inv-td-creative {
  overflow: hidden; padding-left: 14px;
}
.creative-intel .inv-creative-inner {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.creative-intel .inv-row-info { min-width: 0; flex: 1; }
.creative-intel .inv-thumb {
  width: 52px; min-width: 52px; aspect-ratio: 16/9;
  object-fit: cover; border-radius: 5px; display: block;
  background: var(--ci-paper);
}
.creative-intel .inv-row-title {
  font-size: 12.5px; font-weight: 700; color: var(--ci-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creative-intel .inv-row-meta {
  display: flex; gap: 8px; align-items: center; margin-top: 3px;
}
.creative-intel .inv-row-id {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  color: var(--ci-accent); background: rgba(4,180,107,.07);
  padding: 1px 5px; border-radius: 3px;
}
.creative-intel .inv-row-dur {
  font-size: 10.5px; color: var(--ci-ink-soft);
}

/* Category cell */
.creative-intel .inv-td-cat { vertical-align: middle; }
.creative-intel .inv-cat-badge {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--ci-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creative-intel .inv-cat-sub {
  display: block; font-size: 10px; color: var(--ci-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* Numeric cells */
.creative-intel .inv-td-num, .creative-intel .inv-td-dur {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.creative-intel .inv-td-dur { color: var(--ci-ink-soft); font-size: 12px; }
.creative-intel .inv-muted { color: var(--ci-rule-strong); font-size: 11px; }

/* Pctile mini-bar */
.creative-intel .inv-pctile-cell {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.creative-intel .inv-pctile-bar-bg {
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--ci-rule); overflow: hidden; flex-shrink: 0;
}
.creative-intel .inv-pctile-bar-fill {
  height: 100%; border-radius: 99px; transition: width .3s;
  background: var(--ci-rule-strong);
}
.creative-intel .inv-pctile-bar-fill.good { background: var(--ci-good); }
.creative-intel .inv-pctile-bar-fill.warn { background: var(--ci-warn); }
.creative-intel .inv-pctile-bar-fill.bad  { background: var(--ci-bad); }
.creative-intel .inv-pctile-num {
  font-size: 11.5px; font-weight: 800; min-width: 20px; text-align: right;
  color: var(--ci-ink);
}
.creative-intel .inv-pctile-num.good { color: var(--ci-good); }
.creative-intel .inv-pctile-num.warn { color: var(--ci-warn); }
.creative-intel .inv-pctile-num.bad  { color: var(--ci-bad); }

/* Metric coloring */
.creative-intel .inv-metric-good { color: var(--ci-good); font-weight: 700; }
.creative-intel .inv-metric-warn { color: var(--ci-warn); }
.creative-intel .inv-metric-bad  { color: var(--ci-bad); }

/* ── Table footer ────────────────────────────────────────────────────── */
/* ── Table footer / pager ──────────────────────────────────────────── */
.creative-intel .inv-tbl-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; gap: 16px;
  background: linear-gradient(180deg, transparent, rgba(11,32,32,.015));
  border-top: 1px solid var(--ci-rule);
  font-size: 12px; color: var(--ci-ink-soft);
}
.creative-intel .inv-foot-info {
  display: flex; align-items: center; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.creative-intel .inv-foot-range b,
.creative-intel .inv-foot-page b {
  color: var(--ci-ink); font-weight: 700;
}
.creative-intel .inv-foot-sep { color: var(--ci-ink-soft); margin: 0 2px; }
.creative-intel .inv-foot-divider {
  width: 1px; height: 14px; background: var(--ci-rule);
}
.creative-intel .inv-foot-page { font-size: 11.5px; }

.creative-intel .inv-pager {
  display: flex; align-items: center; gap: 6px;
}
.creative-intel .inv-pager-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--ci-rule);
  border-radius: 8px; padding: 6px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--ci-ink);
  cursor: pointer; transition: all .15s;
  font-variant-numeric: tabular-nums;
}
.creative-intel .inv-pager-btn:hover:not([disabled]) {
  border-color: var(--ci-accent); color: var(--ci-accent);
  background: var(--ci-accent-tint);
}
.creative-intel .inv-pager-btn[disabled] {
  opacity: .35; cursor: not-allowed;
}
.creative-intel .inv-pager-arrow {
  font-size: 13px; line-height: 1;
}

/* ── Polish: hidden/thin scrollbar for table overflow ─────────────── */
.creative-intel .inv-tbl-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--ci-rule-strong) transparent;
}
.creative-intel .inv-tbl-scroll::-webkit-scrollbar {
  height: 6px;
}
.creative-intel .inv-tbl-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.creative-intel .inv-tbl-scroll::-webkit-scrollbar-thumb {
  background: var(--ci-rule); border-radius: 99px;
}
.creative-intel .inv-tbl-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ci-rule-strong);
}

/* Remove last-row bottom border so it doesn't double with footer's top border */
.creative-intel table.inv-lb tbody tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * INTELLIGENCE PACK v2 — additive Bento tiles
 * Pinnacle Teal tokens only — no new colours.
 * ═══════════════════════════════════════════════════════════════════════════ */
.ip-section { margin-top: 32px; }
.ip-section .ci-section-title em { color: var(--primary); font-style: normal; }

/* Peer context strip */
.ip-peer-context {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ip-peer-context b { color: var(--text); font-weight: 600; }
.ip-peer-context .ip-peer-num { color: var(--primary); font-family: 'IBM Plex Mono', monospace; font-size: 14px; }
.ip-peer-context .ip-peer-divider { width: 1px; height: 14px; background: var(--border-strong); margin: 0 4px; }
.ip-peer-context .ip-peer-key { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); }
.ip-peer-context .ip-peer-key b { color: var(--primary); }
.ip-peer-context .ip-peer-fallback { color: var(--warning); font-style: italic; }

/* Bento grid layout */
.ip-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.ip-grid-top { grid-template-columns: 1fr 1fr; }
.ip-grid-bottom { grid-template-columns: 7fr 5fr; }

@media (max-width: 1000px) {
  .ip-grid-top, .ip-grid-bottom { grid-template-columns: 1fr; }
}

/* Generic tile */
.ip-tile {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.ip-tile-h {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ip-tile-h small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: auto;
}

/* ── ABCD tile ── */
.ip-tile-abcd .ip-abcd-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ip-ab {
  padding: 14px 12px 12px;
  border-radius: var(--radius-xs);
  text-align: center;
  border: 1px solid var(--border);
  cursor: help;
  transition: transform .12s;
}
.ip-ab.pass { background: var(--success-soft); border-color: rgba(15,169,104,.25); }
.ip-ab.fail { background: #FEE8E8; border-color: rgba(218,45,45,.22); }
.ip-ab:hover { transform: translateY(-2px); }
.ip-ab-letter { font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ip-ab.pass .ip-ab-letter { color: var(--success); }
.ip-ab.fail .ip-ab-letter { color: #DA2D2D; }
.ip-ab-name { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin-top: 4px; }
.ip-ab-status { font-family: 'IBM Plex Mono', monospace; font-size: 10px; margin-top: 6px; }
.ip-ab.pass .ip-ab-status { color: var(--success); }
.ip-ab.fail .ip-ab-status { color: #DA2D2D; }
.ip-abcd-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.ip-abcd-score {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.ip-abcd-score small { color: var(--muted); }
.ip-abcd-note { color: var(--muted); }

/* ── Forecast tile ── */
.ip-vtr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ip-vtr-row:last-of-type { margin-bottom: 0; }
.ip-vtr-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  width: 76px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ip-vtr-bar {
  flex: 1;
  height: 28px;
  background: var(--tint, #E8F0EF);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}
.ip-vtr-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--primary);
  border-radius: var(--radius-xs);
  opacity: .9;
}
.ip-vtr-fill.fixes { background: var(--success); }
.ip-vtr-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: white;
  font-variant-numeric: tabular-nums;
  font-family: 'IBM Plex Mono', monospace;
  z-index: 1;
}
.ip-vtr-note {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ip-vtr-note b { color: var(--text); font-style: normal; }

/* ── Gap analysis tile ── */
.ip-tile-gap .ip-gap-row {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.ip-tile-gap .ip-gap-row:last-child { border-bottom: none; }
.ip-gap-dim {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
}
.ip-gap-label { color: var(--text); line-height: 1.45; }
.ip-gap-delta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.ip-gap-delta.above { color: var(--warning); }
.ip-gap-delta.below { color: #DA2D2D; }
.ip-gap-delta.mismatch { color: var(--warning); }
.ip-empty {
  padding: 14px 0;
  font-size: 13px;
  color: var(--success);
  font-style: italic;
}

/* ── Wow signals tile ── */
.ip-tile-wow .ip-wow-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.ip-tile-wow .ip-wow-row:last-child { border-bottom: none; }
.ip-wow-ic { font-size: 16px; flex-shrink: 0; line-height: 1.2; padding-top: 1px; }
.ip-wow-text { flex: 1; line-height: 1.5; color: var(--text); }
.ip-wow-text b { font-weight: 600; color: var(--text); }
.ip-wow-clean { color: var(--muted); font-style: italic; }
.ip-wow-row.muted .ip-wow-text { opacity: .55; }
.ip-wow-row.muted .ip-wow-ic { opacity: .45; }
.ip-wow-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}
.ip-wow-stat.sev-good { background: var(--success-soft); color: var(--success); }
.ip-wow-stat.sev-warn { background: var(--warning-soft); color: var(--warning); }
.ip-wow-stat.sev-bad  { background: #FEE8E8; color: #DA2D2D; }
.ip-wow-stat.sev-info { background: var(--tint, #E8F0EF); color: var(--muted); }
.ip-wow-stat.clean    { background: var(--tint, #E8F0EF); color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
 * REVIEW MARKERS — red flags on sections flagged as removal candidates.
 * User will pick which to actually remove after seeing the page.
 * Toggle with: <body class="show-review-flags"> (default ON).
 * ═══════════════════════════════════════════════════════════════════════════ */
.review-flag {
  position: relative;
}
.review-flag::before {
  content: '🚩 REVIEW · ' attr(data-review);
  position: absolute;
  top: -10px;
  right: 12px;
  background: #DA2D2D;
  color: white;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 12px rgba(218,45,45,.30);
  z-index: 5;
  white-space: nowrap;
  pointer-events: none;
}
.review-flag {
  outline: 2px dashed rgba(218,45,45,.40);
  outline-offset: 4px;
}
/* Easy global off-switch when reviewing is done */
body.review-flags-off .review-flag::before { display: none; }
body.review-flags-off .review-flag { outline: none; }

.creative-intel .ci-hero-meta-history {
  font-size: 12px;
  color: var(--ci-ink-soft);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * History Detail right rail (renders only when vm.fromHistory)
 * Sticky right column on desktop (≥1280px); stacks below content on narrow.
 * ═══════════════════════════════════════════════════════════════════════════ */
.creative-intel .ci-hist-rail {
  position: sticky;
  top: 16px;
  float: right;
  width: 280px;
  margin: 16px 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}
.creative-intel .ci-hist-rail-card {
  background: var(--surface-solid);
  border: 1px solid var(--ci-rule);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15,58,58,0.04);
}
.creative-intel .ci-hist-rail-card h4 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ci-ink-soft);
  margin: 0 0 10px 0;
}
.creative-intel .ci-hist-rail-empty {
  font-size: 12px;
  color: var(--ci-ink-soft);
  font-style: italic;
}
.creative-intel .ci-hist-rail-actions button {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}
.creative-intel .ci-hist-rail-toast {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ci-good);
  font-weight: 600;
}
.creative-intel .ci-hist-rail-run {
  padding: 10px 0;
  border-bottom: 1px dashed var(--ci-rule);
}
.creative-intel .ci-hist-rail-run:last-child { border-bottom: 0; }
.creative-intel .ci-hist-rail-run-h {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ci-ink-soft);
}
.creative-intel .ci-hist-rail-run-deltas {
  margin: 6px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.creative-intel .ci-hist-rail-run-deltas .lbl { color: var(--ci-ink-soft); margin-right: 6px; }
.creative-intel .ci-hist-rail-run-deltas .val { color: var(--ci-ink); font-weight: 600; }
.creative-intel .ci-hist-rail-run-link {
  font-size: 11px;
  color: var(--primary-deep, #088E89);
  text-decoration: none;
}
.creative-intel .ci-hist-rail-run-link:hover { text-decoration: underline; }
.creative-intel .ci-hist-rail-fb-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--ci-rule);
}
.creative-intel .ci-hist-rail-fb-item:last-child { border-bottom: 0; }
.creative-intel .ci-hist-rail-fb-h {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--ci-ink-soft);
}
.creative-intel .ci-hist-rail-fb-h .thumbs { font-size: 14px; }
.creative-intel .ci-hist-rail-fb-h .who { font-weight: 600; color: var(--ci-ink); }
.creative-intel .ci-hist-rail-fb-h .when { margin-left: auto; opacity: 0.7; }
.creative-intel .ci-hist-rail-fb-note { font-size: 12px; color: var(--ci-ink); margin-top: 4px; }
.creative-intel .ci-hist-rail-fb-tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 1280px) {
  .creative-intel .ci-hist-rail {
    position: static;
    float: none;
    width: auto;
    margin: 16px 0;
  }
}

/* ── Creative Intelligence tab bar ──────────────────────────────────────── */
.ci-shell { display: flex; flex-direction: column; height: 100%; }

.ci-tab-bar {
  display: flex;
  border-bottom: 1.5px solid var(--border);
  background: rgba(255,255,255,.75);
  padding: 0 20px;
  flex-shrink: 0;
  gap: 0;
}
.ci-tab {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ci-tab:hover { color: var(--text); text-decoration: none; }
.ci-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}
.ci-tab-icon { font-style: normal; font-size: 15px; }
.ci-tab-new {
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}
.ci-tab-content { flex: 1; overflow: auto; }

/* Analyse tab: input card + history */
.ci-analyse-input-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.ci-analyse-history-section {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
}
.ci-analyse-history-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.ci-analyse-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  gap: 6px;
}
.ci-analyse-empty-icon { font-size: 28px; }
.ci-analyse-empty-title { font-size: 14px; font-weight: 700; color: var(--text); }
.ci-analyse-empty-sub { font-size: 12px; color: var(--muted); text-align: center; }

/* AI Insights tab */
.ci-insights-wrap {
  padding: 24px;
  display: flex;
  gap: 20px;
  height: 100%;
  box-sizing: border-box;
}
.ci-insights-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ci-insights-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
}
.ci-insights-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-insights-stat-row { display: flex; gap: 10px; margin-bottom: 14px; }
.ci-insights-stat {
  flex: 1;
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.ci-insights-stat-val { font-size: 22px; font-weight: 800; color: var(--primary); }
.ci-insights-stat-label { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.ci-insights-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ci-insights-bar-label { font-size: 11px; color: var(--muted); width: 52px; flex-shrink: 0; }
.ci-insights-bar-track { flex: 1; height: 7px; background: var(--primary-soft); border-radius: 4px; overflow: hidden; }
.ci-insights-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }
.ci-insights-bar-val { font-size: 11px; font-weight: 700; color: var(--text); width: 30px; text-align: right; }
.ci-insights-filter-row { display: flex; gap: 8px; margin-bottom: 14px; }
.ci-insights-filter-row select {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
}
.ci-rec-list { display: flex; flex-direction: column; gap: 10px; }
.ci-rec-item { display: flex; align-items: flex-start; gap: 10px; }
.ci-rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 4px;
}
.ci-rec-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ci-rec-text strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════
   Creative Detail Drawer — light mint theme
═══════════════════════════════════════════════════════ */
.cid-drawer-overlay {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(10,30,30,.18);
  backdrop-filter: blur(1px);
}
.cid-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1041;
  width: 480px;
  background: #EDF7F5;
  border-left: 1px solid rgba(15,184,162,.2);
  display: flex; flex-direction: column;
  animation: cid-slide-in .22s cubic-bezier(.25,.46,.45,.94) both;
  box-shadow: -8px 0 32px rgba(10,30,30,.12);
  overflow: hidden;
}
@keyframes cid-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.cid-drawer-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,184,162,.15);
  flex-shrink: 0;
}
.cid-drawer-header-title {
  flex: 1; font-size: 11px; font-weight: 700; color: #0F3A3A;
}
.cid-drawer-close {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(15,58,58,.06); border: none; cursor: pointer;
  font-size: 12px; color: #4A7A7A;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.cid-drawer-close:hover { background: rgba(15,58,58,.12); color: #0F3A3A; }

/* ES badge */
.cid-es-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.18);
  border-radius: 4px; padding: 1px 6px;
  font-size: 8px; font-weight: 700; color: #6366f1;
}
.cid-es-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #6366f1;
  animation: cid-es-pulse 1.5s infinite;
}
@keyframes cid-es-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.cid-es-badge-loading { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); color: #d97706; }
.cid-es-badge-loading .cid-es-dot { background: #d97706; }
.cid-es-badge-err { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); color: #dc2626; }
.cid-es-badge-err .cid-es-dot { background: #dc2626; }

/* Hero */
.cid-drawer-hero {
  display: flex; gap: 10px;
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(15,184,162,.1);
  padding: 12px 14px; flex-shrink: 0;
}
.cid-drawer-thumb-wrap {
  width: 96px; height: 60px; border-radius: 6px; overflow: hidden;
  flex-shrink: 0; position: relative; background: #c8e0dc;
}
.cid-drawer-thumb { width: 100%; height: 100%; object-fit: cover; }
.cid-drawer-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.22);
}
.cid-drawer-play-btn {
  width: 20px; height: 20px; background: rgba(255,255,255,.92); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: #0F3A3A; padding-left: 2px;
}
.cid-drawer-meta { flex: 1; min-width: 0; }
.cid-drawer-meta-title {
  font-size: 11px; font-weight: 700; color: #0F3A3A;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; margin-bottom: 3px;
}
.cid-drawer-meta-sub { font-size: 9px; color: #4A7A7A; margin-bottom: 5px; }
.cid-drawer-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.cid-drawer-tag {
  padding: 2px 6px; border-radius: 8px; font-size: 8px; font-weight: 600;
  background: rgba(15,184,162,.1); border: 1px solid rgba(15,184,162,.2); color: #0F5E58;
}

/* Inner tabs */
.cid-drawer-dtabs {
  display: flex; border-bottom: 1px solid rgba(15,184,162,.12);
  background: rgba(255,255,255,.5); flex-shrink: 0;
}
.cid-dtab {
  flex: 1; padding: 8px 4px; font-size: 9.5px; font-weight: 600;
  color: #4A7A7A; text-align: center; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.cid-dtab:hover { color: #0F5E58; }
.cid-dtab.active { color: #0FB8A2; border-bottom-color: #0FB8A2; background: rgba(15,184,162,.04); }

/* Body */
.cid-drawer-body {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: rgba(15,184,162,.3) transparent;
}
.cid-drawer-body::-webkit-scrollbar { width: 4px; }
.cid-drawer-body::-webkit-scrollbar-thumb { background: rgba(15,184,162,.3); border-radius: 2px; }

/* Card */
.cid-dcard {
  background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9);
  border-radius: 10px; padding: 11px 12px;
  box-shadow: 0 1px 8px rgba(10,30,30,.05);
}
.cid-dcard-label {
  font-size: 8px; font-weight: 700; color: #4A7A7A;
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 9px; display: flex; align-items: center; gap: 6px;
}
.cid-dcard-label::after { content: ''; flex: 1; height: 1px; background: rgba(15,184,162,.12); }

/* Skeleton */
.cid-drawer-skeleton {
  background: rgba(15,184,162,.1); border-radius: 4px;
  animation: cid-skel-pulse 1.2s ease-in-out infinite;
}
@keyframes cid-skel-pulse { 0%,100% { opacity:.35; } 50% { opacity:.8; } }
.cid-drawer-err { font-size: 11px; color: #dc2626; text-align: center; padding: 10px 0; }

/* Performance — featured 2-col + inline row */
.cid-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cid-perf-box {
  background: rgba(15,184,162,.04); border: 1px solid rgba(15,184,162,.12);
  border-radius: 8px; padding: 8px 10px;
}
.cid-perf-val { font-size: 18px; font-weight: 700; color: #0F3A3A; line-height: 1.1; margin-bottom: 2px; }
.cid-perf-lbl { font-size: 8px; color: #4A7A7A; font-weight: 500; }
.cid-perf-sub { font-size: 8px; color: #0FB8A2; font-weight: 600; margin-top: 3px; }
.cid-perf-bar-track { height: 3px; background: rgba(15,184,162,.12); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.cid-perf-bar-fill  { height: 100%; border-radius: 2px; background: linear-gradient(90deg,#0FB8A2,#06b6d4); }
.cid-perf-row { display: flex; gap: 7px; margin-top: 7px; }
.cid-perf-inline {
  flex: 1; background: rgba(15,184,162,.04); border: 1px solid rgba(15,184,162,.12);
  border-radius: 8px; padding: 6px 10px;
}
.cid-perf-inline-val { font-size: 13px; font-weight: 700; color: #0F3A3A; }
.cid-perf-inline-lbl { font-size: 8px; color: #4A7A7A; }

/* DNA grid */
.cid-dna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cid-dna-row  { display: flex; flex-direction: column; gap: 2px; }
.cid-dna-key  { font-size: 8px; color: #4A7A7A; font-weight: 600; }
.cid-dna-val  { font-size: 10px; font-weight: 700; color: #0F3A3A; }
.cid-dna-check { color: #0FB8A2; }
.cid-dna-cross { color: #ef4444; }
.cid-tag-hook { display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:600; background:rgba(99,102,241,.1); color:#6366f1; }
.cid-tag-sent-pos { display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:600; background:rgba(34,197,94,.1); color:#16a34a; }
.cid-tag-sent-neg { display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:600; background:rgba(239,68,68,.1); color:#dc2626; }

/* ABCD */
.cid-abcd-row { display: flex; align-items: center; gap: 8px; }
.cid-abcd-letter {
  width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: white; flex-shrink: 0;
}
.cid-abcd-label { font-size: 9px; color: #4A7A7A; width: 64px; flex-shrink: 0; }
.cid-abcd-track { flex: 1; height: 6px; background: rgba(15,184,162,.1); border-radius: 3px; overflow: hidden; }
.cid-abcd-fill  { height: 100%; border-radius: 3px; transition: width .4s ease; }
.cid-abcd-score { font-size: 10px; font-weight: 700; color: #0F3A3A; width: 24px; text-align: right; }

/* Brand / product chips */
.cid-brand-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(15,184,162,.06); border: 1px solid rgba(15,184,162,.2);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 6px;
}
.cid-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #0FB8A2; flex-shrink: 0; }
.cid-brand-info { flex: 1; min-width: 0; }
.cid-brand-name { font-size: 10px; font-weight: 700; color: #0F3A3A; }
.cid-brand-evidence { font-size: 8px; color: #4A7A7A; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cid-brand-conf { font-size: 9px; font-weight: 700; color: #0FB8A2; flex-shrink: 0; }
.cid-product-chip {
  background: rgba(99,102,241,.05); border: 1px solid rgba(99,102,241,.15);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 6px;
}
.cid-product-name { font-size: 10px; font-weight: 700; color: #3730a3; margin-bottom: 2px; }
.cid-product-cat {
  display: inline-block; background: rgba(99,102,241,.1); color: #6366f1;
  font-size: 8px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin-bottom: 4px;
}
.cid-product-ev { font-size: 8px; color: #4A7A7A; line-height: 1.4; }

/* Pills */
.cid-pill { padding: 2px 8px; border-radius: 10px; font-size: 8px; font-weight: 600; display: inline-block; margin: 2px; }
.cid-pill-teal   { background: rgba(15,184,162,.1); color: #0F5E58; border: 1px solid rgba(15,184,162,.2); }
.cid-pill-violet { background: rgba(99,102,241,.08); color: #6366f1; border: 1px solid rgba(99,102,241,.18); }
.cid-pill-amber  { background: rgba(245,158,11,.1); color: #b45309; border: 1px solid rgba(245,158,11,.2); }

/* Emotional arc steps */
.cid-arc-steps { display: flex; align-items: flex-start; gap: 0; margin: 8px 0; }
.cid-arc-step  { flex: 1; text-align: center; position: relative; }
.cid-arc-step::after { content: '→'; position: absolute; right: -7px; top: 10px; font-size: 10px; color: #4A7A7A; }
.cid-arc-step:last-child::after { display: none; }
.cid-arc-circle {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; margin: 0 auto 3px;
}
.cid-arc-neg { background: rgba(239,68,68,.1); }
.cid-arc-neu { background: rgba(251,191,36,.12); }
.cid-arc-pos { background: rgba(15,184,162,.12); }
.cid-arc-lbl { font-size: 7px; color: #4A7A7A; font-weight: 600; line-height: 1.3; }

/* kv list */
.cid-kv-list { display: flex; flex-direction: column; gap: 5px; }
.cid-kv-row  { display: flex; gap: 6px; align-items: flex-start; }
.cid-kv-key  { font-size: 8px; font-weight: 700; color: #4A7A7A; min-width: 72px; flex-shrink: 0; padding-top: 1px; }
.cid-kv-val  { font-size: 9px; color: #0F3A3A; line-height: 1.4; }

/* Scene timeline */
.cid-timeline { position: relative; padding-left: 14px; display: flex; flex-direction: column; }
.cid-timeline::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg,#0FB8A2,#06b6d4); border-radius: 2px; }
.cid-tl-item { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; position: relative; }
.cid-tl-dot  { width: 8px; height: 8px; border-radius: 50%; background: #0FB8A2; flex-shrink: 0; margin-top: 2px; border: 1.5px solid #EDF7F5; position: absolute; left: -13px; }
.cid-tl-time { font-size: 8px; color: #0FB8A2; font-weight: 600; width: 28px; flex-shrink: 0; }
.cid-tl-text { font-size: 8.5px; color: #1a2e2e; line-height: 1.4; }

/* Engagement rows */
.cid-eng-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(15,184,162,.07); }
.cid-eng-row:last-child { border: none; }
.cid-eng-icon { font-size: 13px; width: 22px; text-align: center; flex-shrink: 0; }
.cid-eng-info { flex: 1; }
.cid-eng-lbl  { font-size: 8.5px; font-weight: 600; color: #0F3A3A; }
.cid-eng-sub  { font-size: 7.5px; color: #4A7A7A; }
.cid-eng-val  { font-size: 9px; font-weight: 700; color: #0F3A3A; }

/* Persona box */
.cid-persona-box {
  background: linear-gradient(135deg,rgba(15,184,162,.08),rgba(6,182,212,.06));
  border: 1px solid rgba(15,184,162,.18); border-radius: 8px;
  padding: 9px 11px; margin-bottom: 8px;
}
.cid-persona-title { font-size: 10px; font-weight: 700; color: #0F3A3A; margin-bottom: 2px; }
.cid-persona-sub   { font-size: 8px; color: #4A7A7A; line-height: 1.4; }

/* Platform grid */
.cid-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cid-plat-box  { border: 1px solid rgba(15,184,162,.12); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,.5); }
.cid-plat-name { font-size: 9px; font-weight: 700; color: #0F3A3A; margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.cid-plat-score { font-size: 15px; font-weight: 700; }
.cid-plat-score-high   { color: #0FB8A2; }
.cid-plat-score-medium { color: #f59e0b; }
.cid-plat-score-low    { color: #ef4444; }
.cid-plat-lbl  { font-size: 7.5px; color: #4A7A7A; margin-bottom: 5px; }
.cid-plat-bar-track { height: 4px; background: rgba(15,184,162,.1); border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
.cid-plat-bar-fill  { height: 100%; border-radius: 2px; }
.cid-fit-pill { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 7.5px; font-weight: 700; }
.cid-fit-high   { background: rgba(15,184,162,.12); color: #0FB8A2; }
.cid-fit-medium { background: rgba(245,158,11,.1); color: #d97706; }
.cid-fit-low    { background: rgba(239,68,68,.08); color: #ef4444; }

/* CTA */
.cid-drawer-cta {
  padding: 12px 14px;
  border-top: 1px solid rgba(15,184,162,.12);
  background: rgba(255,255,255,.5); flex-shrink: 0;
}
.cid-drawer-cta-btn {
  width: 100%; padding: 11px;
  background: linear-gradient(135deg, #0FB8A2, #06b6d4);
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: white;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 14px rgba(15,184,162,.35);
  transition: opacity .15s;
}
.cid-drawer-cta-btn:hover { opacity: .88; }

/* ── Analyse Tab Redesign (cia-*) ───────────────────────────────────────── */
.cia-wrap { background: #EDF7F5; border-radius: 14px; padding: 16px; }
.cia-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 6px rgba(0,0,0,.06); margin-bottom: 12px; }
.cia-card:last-child { margin-bottom: 0; }

/* Form row */
.cia-url-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cia-url-input { flex: 1; height: 36px; border-radius: 8px; background: #f4faf8; border: 1px solid #cde8e2; padding: 0 12px; font-size: 13px; color: var(--text); font-family: inherit; outline: none; }
.cia-url-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,184,162,.12); }
.cia-analyse-btn { height: 36px; padding: 0 18px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.cia-analyse-btn:hover { background: #0da896; }
.cia-analyse-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Objective chips */
.cia-obj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.cia-obj-label { font-size: 10px; font-weight: 700; color: var(--muted-strong); white-space: nowrap; margin-right: 2px; }
.cia-chip { display: inline-flex; align-items: center; gap: 3px; background: #EDF7F5; border: 1px solid #b8e5de; border-radius: 20px; padding: 4px 11px; font-size: 10.5px; color: #1a7a6e; cursor: pointer; transition: all .12s; line-height: 1; font-family: inherit; }
.cia-chip:hover { border-color: var(--primary); background: #d6f5ef; }
.cia-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Advanced toggle */
.cia-adv-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted-strong); cursor: pointer; padding: 6px 10px; border-radius: 7px; border: 1px dashed #cde8e2; background: #f8fffe; user-select: none; transition: border-color .15s, color .15s; margin-top: 4px; }
.cia-adv-toggle:hover, .cia-adv-toggle.open { border-color: var(--primary); color: var(--primary); border-style: solid; }
.cia-adv-hint { font-size: 10px; color: var(--muted); font-weight: 400; }
.cia-adv-caret { margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .2s; }
.cia-adv-toggle.open .cia-adv-caret { transform: rotate(90deg); }
.cia-adv-body { background: #f8fffe; border: 1px solid #ddf0ec; border-radius: 8px; padding: 12px 14px; margin-top: 6px; }
.cia-adv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cia-adv-field-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-strong); margin-bottom: 4px; }
.cia-adv-input { width: 100%; height: 30px; border-radius: 6px; background: #fff; border: 1px solid #cde8e2; font-size: 11.5px; color: var(--text); padding: 0 9px; font-family: inherit; outline: none; }
.cia-adv-input:focus { border-color: var(--primary); }
.cia-adv-textarea { width: 100%; height: 58px; border-radius: 6px; background: #fff; border: 1px solid #cde8e2; font-size: 11.5px; color: var(--text); padding: 8px 9px; font-family: inherit; outline: none; resize: none; }
.cia-adv-textarea:focus { border-color: var(--primary); }
.cia-adv-select { width: 100%; height: 30px; border-radius: 6px; background: #fff; border: 1px solid #cde8e2; font-size: 11.5px; color: var(--text); padding: 0 9px; font-family: inherit; outline: none; }

/* Error banner */
.cia-error-banner { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #dc2626; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cia-error-banner button { margin-left: auto; background: none; border: none; color: #dc2626; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }

/* History card header */
.cia-hist-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cia-hist-section-label { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong); flex: none; }
.cia-hist-search { flex: 1; height: 28px; border-radius: 20px; background: #f4faf8; border: 1px solid #cde8e2; padding: 0 12px; font-size: 11.5px; color: var(--text); font-family: inherit; outline: none; }
.cia-hist-search:focus { border-color: var(--primary); }
.cia-hist-view-all { font-size: 10.5px; color: var(--primary); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.cia-hist-view-all:hover { text-decoration: underline; }

/* History grid */
.cia-hist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cia-hist-card { border-radius: 9px; border: 1px solid #e8f4f2; overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cia-hist-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(15,184,162,.14); }
.cia-hist-card-thumb { width: 100%; height: 56px; position: relative; overflow: hidden; background: #cbd5e1; }
.cia-hist-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cia-hist-card-body { padding: 8px 9px; }
.cia-hist-card-title { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cia-hist-card-meta { font-size: 9.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cia-hist-obj-badge { display: inline-block; background: #EDF7F5; color: var(--primary); border-radius: 4px; font-size: 9px; font-weight: 600; padding: 1px 5px; }

/* In-progress overlay on history thumb */
.cia-hist-progress-overlay { position: absolute; inset: 0; background: rgba(15,184,162,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cia-hist-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: cia-pulse 1.2s infinite; }
.cia-hist-progress-lbl { font-size: 9px; font-weight: 700; color: #fff; letter-spacing: .04em; }
@keyframes cia-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* Skeleton cards */
.cia-skel { border-radius: 9px; border: 1px solid #e8f4f2; overflow: hidden; }
.cia-skel-thumb { width: 100%; height: 56px; background: linear-gradient(90deg,#e8f4f2 25%,#d4ede8 50%,#e8f4f2 75%); background-size: 200% 100%; animation: cia-shimmer 1.4s infinite; }
.cia-skel-body { padding: 8px 9px; }
.cia-skel-line { height: 9px; border-radius: 4px; background: linear-gradient(90deg,#e8f4f2 25%,#d4ede8 50%,#e8f4f2 75%); background-size: 200% 100%; animation: cia-shimmer 1.4s infinite; margin-bottom: 5px; }
.cia-skel-line.short { width: 55%; }
@keyframes cia-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Empty state */
.cia-hist-empty { text-align: center; padding: 24px 0 8px; }
.cia-hist-empty-icon { font-size: 28px; margin-bottom: 6px; }
.cia-hist-empty-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.cia-hist-empty-sub { font-size: 11.5px; color: var(--muted); }

@media (max-width: 768px) {
  .cia-hist-grid { grid-template-columns: repeat(2, 1fr); }
  .cia-adv-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   Creative Intelligence — Demo Mode  (.cid-*)
   Presentation: full-screen overlay, centered slides, keyboard nav
   Report: fixed 220px sidebar + scrollable main
══════════════════════════════════════════════════════════════════════ */

.cid-wrap {
  position: relative;
  background: #eaf6f4;
  min-height: calc(100vh - 60px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #0F3A3A;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.cid-topbar {
  position: sticky; top: 0; z-index: 100; height: 52px;
  background: #0d1117; display: flex; align-items: center;
  justify-content: space-between; padding: 0 20px; gap: 12px;
}
.cid-topbar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.cid-topbar-brand { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.cid-topbar-sep   { width: 1px; height: 20px; background: #333; flex-shrink: 0; }
.cid-topbar-title { font-size: 12px; color: #8899aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cid-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.cid-mode-toggle  { display: flex; background: #1a2535; border-radius: 8px; padding: 3px; gap: 2px; }
.cid-mode-btn {
  padding: 5px 14px; border-radius: 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; color: #8899aa; border: none; background: transparent; transition: all .2s;
}
.cid-mode-btn.active { background: #0FB8A2; color: #fff; }

.cid-nav-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid #333;
  background: transparent; color: #ccc; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.cid-nav-btn:hover { background: #1a2535; border-color: #0FB8A2; color: #0FB8A2; }

.cid-counter { font-size: 11px; color: #8899aa; min-width: 40px; text-align: center; }

.cid-dots { display: flex; gap: 4px; align-items: center; }
.cid-dot  { width: 6px; height: 6px; border-radius: 50%; background: #333; cursor: pointer; transition: all .2s; }
.cid-dot.active { background: #0FB8A2; width: 18px; border-radius: 3px; }

/* ── Presentation mode ───────────────────────────────────────────── */
.cid-pres {
  height: calc(100vh - 112px); overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
}
.cid-slide {
  display: none; width: 100%; max-width: 860px;
  height: 100%; overflow-y: auto; padding: 28px 36px;
}
.cid-slide.active { display: block; }

/* ── Report mode ─────────────────────────────────────────────────── */
.cid-report   { display: flex; min-height: calc(100vh - 112px); }
.cid-sidebar  {
  width: 220px; flex-shrink: 0; background: #0d1117; overflow-y: auto;
  padding: 16px 0; border-right: 1px solid #1a2535;
  position: sticky; top: 52px; height: calc(100vh - 112px);
}
.cid-sidebar a {
  display: block; padding: 8px 20px; font-size: 11px; color: #8899aa;
  text-decoration: none; transition: all .15s;
  border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cid-sidebar a:hover, .cid-sidebar a.active {
  color: #fff; border-left-color: #0FB8A2; background: #1a2535;
}
.cid-sidebar-group {
  font-size: 9px; font-weight: 700; color: #444; letter-spacing: .1em;
  text-transform: uppercase; padding: 12px 20px 4px;
}
.cid-main    { flex: 1; overflow-y: auto; padding: 28px 36px; }
.cid-section { margin-bottom: 44px; scroll-margin-top: 20px; }

/* ── Shared card components ──────────────────────────────────────── */
.cid-card   { background: #fff; border-radius: 14px; padding: 18px 22px; box-shadow: 0 1px 8px rgba(0,0,0,.06); margin-bottom: 14px; }
.cid-card-sm { background: #fff; border-radius: 10px; padding: 13px 15px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }

.cid-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #0FB8A2; margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.cid-section-label::after { content: ''; flex: 1; height: 1px; background: #cde8e2; }

.cid-label { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #5a8080; margin-bottom: 4px; }

.cid-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
.cid-badge-teal   { background: #E8F5F4; color: #0FB8A2; }
.cid-badge-good   { background: #d1fae5; color: #059669; }
.cid-badge-warn   { background: #fef3c7; color: #d97706; }
.cid-badge-danger { background: #fee2e2; color: #dc2626; }
.cid-badge-muted  { background: #f1f5f9; color: #64748b; }

/* ── Score ring ──────────────────────────────────────────────────── */
.cid-ring         { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.cid-ring svg     { transform: rotate(-90deg); }
.cid-ring-inner   { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cid-ring-score   { font-size: 28px; font-weight: 900; color: #0F3A3A; }
.cid-ring-grade   { font-size: 13px; font-weight: 700; color: #0FB8A2; }

/* ── Capability bars ─────────────────────────────────────────────── */
.cid-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cid-cap-card { background: #E8F5F4; border-radius: 10px; padding: 13px 15px; }
.cid-cap-card.cid-cap-warn   { background: #fffbeb; }
.cid-cap-card.cid-cap-danger { background: #fff5f5; }
.cid-cap-name { font-size: 11px; font-weight: 700; color: #0F3A3A; margin-bottom: 7px; }
.cid-cap-row  { display: flex; align-items: center; gap: 8px; }
.cid-cap-num  { font-size: 22px; font-weight: 800; color: #0FB8A2; min-width: 36px; }
.cid-cap-num.low    { color: #d97706; }
.cid-cap-num.danger { color: #ef4444; }
.cid-cap-track { flex: 1; height: 6px; background: #cde8e2; border-radius: 3px; overflow: hidden; }
.cid-cap-fill  { height: 100%; background: linear-gradient(90deg, #0FB8A2, #06b6d4); border-radius: 3px; }
.cid-cap-fill.low    { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.cid-cap-fill.danger { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ── KPI grid ────────────────────────────────────────────────────── */
.cid-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cid-kpi-box  { background: #fff; border: 1px solid #cde8e2; border-radius: 10px; padding: 11px; text-align: center; }
.cid-kpi-val  { font-size: 18px; font-weight: 800; color: #0F3A3A; margin: 4px 0; }
.cid-kpi-lbl  { font-size: 9px; color: #5a8080; text-transform: uppercase; letter-spacing: .04em; }
.cid-kpi-chg  { font-size: 9px; font-weight: 700; }
.cid-kpi-chg.up   { color: #059669; }
.cid-kpi-chg.down { color: #dc2626; }

/* ── Forecast tiles ──────────────────────────────────────────────── */
.cid-fcast-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cid-fcast-card { background: #E8F5F4; border-radius: 10px; padding: 14px; text-align: center; }
.cid-fcast-val  { font-size: 22px; font-weight: 900; color: #0FB8A2; margin: 4px 0; }
.cid-fcast-lbl  { font-size: 9px; color: #5a8080; text-transform: uppercase; letter-spacing: .05em; }
.cid-fcast-sub  { font-size: 10px; color: #5a8080; margin-top: 2px; }

/* ── Recommendation cards ────────────────────────────────────────── */
.cid-rec { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #cde8e2; border-radius: 10px; padding: 12px 14px; margin-bottom: 9px; }
.cid-rec-rank { width: 26px; height: 26px; border-radius: 50%; background: #0FB8A2; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.cid-rec-body { flex: 1; }
.cid-rec-title  { font-size: 12px; font-weight: 700; color: #0F3A3A; margin-bottom: 3px; }
.cid-rec-detail { font-size: 11px; color: #5a8080; line-height: 1.5; margin-bottom: 5px; }
.cid-rec-ts     { font-size: 10px; color: #0FB8A2; font-weight: 600; font-style: italic; }
.cid-rec-uplift { font-size: 13px; font-weight: 800; color: #059669; flex-shrink: 0; white-space: nowrap; }

/* ── Audience table ──────────────────────────────────────────────── */
.cid-aud-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cid-aud-table th { text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5a8080; border-bottom: 2px solid #cde8e2; }
.cid-aud-table td { padding: 8px 12px; border-bottom: 1px solid #cde8e2; vertical-align: middle; }
.cid-aud-table tr:last-child td { border-bottom: none; }
.cid-fit-pill { padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; display: inline-block; }
.cid-fit-high   { background: #d1fae5; color: #059669; }
.cid-fit-medium { background: #fef3c7; color: #d97706; }
.cid-fit-low    { background: #fee2e2; color: #dc2626; }

/* ── Platform cards ──────────────────────────────────────────────── */
.cid-plat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cid-plat-card { background: #fff; border: 2px solid #cde8e2; border-radius: 12px; padding: 14px; }
.cid-plat-card.top { border-color: #0FB8A2; }
.cid-plat-name  { font-size: 13px; font-weight: 800; color: #0F3A3A; margin-bottom: 4px; }
.cid-plat-score { font-size: 26px; font-weight: 900; }
.cid-plat-track { height: 5px; background: #cde8e2; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.cid-plat-fill  { height: 100%; border-radius: 3px; }
.cid-plat-detail { font-size: 10px; color: #5a8080; line-height: 1.6; }
.cid-plat-issue  { font-size: 10px; color: #dc2626; margin-top: 4px; }

/* ── Format cards ────────────────────────────────────────────────── */
.cid-fmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cid-fmt-card { background: #fff; border: 1px solid #cde8e2; border-radius: 12px; padding: 14px; }
.cid-fmt-name { font-size: 13px; font-weight: 800; color: #0F3A3A; margin-bottom: 8px; }
.cid-fmt-steps { font-size: 10px; color: #5a8080; line-height: 1.9; }
.cid-fmt-steps b { color: #0FB8A2; font-weight: 700; }

/* ── Variant table ───────────────────────────────────────────────── */
.cid-var-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cid-var-table th { text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5a8080; background: #E8F5F4; }
.cid-var-table td { padding: 9px 12px; border-bottom: 1px solid #cde8e2; }
.cid-var-table tr:last-child td { border-bottom: none; }
.cid-var-a { background: #ede9fe; color: #6366f1; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.cid-var-b { background: #fef3c7; color: #d97706; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; }

/* ── Peer cards ──────────────────────────────────────────────────── */
.cid-peer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.cid-peer-card { background: #fff; border: 2px solid #cde8e2; border-radius: 12px; overflow: hidden; }
.cid-peer-card.you { border-color: #0FB8A2; background: #f0fdf9; }
.cid-peer-thumb { height: 72px; display: flex; align-items: center; justify-content: center; position: relative; font-size: 24px; }
.cid-peer-score-badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px; }
.cid-peer-body    { padding: 10px 11px; }
.cid-peer-brand   { font-size: 11px; font-weight: 800; color: #0F3A3A; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cid-peer-title   { font-size: 9px; color: #5a8080; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cid-peer-metrics { font-size: 9px; display: flex; flex-direction: column; gap: 3px; }
.cid-peer-metric  { display: flex; justify-content: space-between; }
.cid-peer-metric-lbl { color: #5a8080; }
.cid-peer-metric-val { font-weight: 700; color: #0F3A3A; }
.cid-sim-bar-wrap { height: 3px; background: #cde8e2; border-radius: 2px; margin: 6px 0 3px; overflow: hidden; }
.cid-sim-bar      { height: 100%; background: linear-gradient(90deg, #0FB8A2, #06b6d4); border-radius: 2px; }
.cid-sim-label    { font-size: 8px; color: #5a8080; }

/* ── Compliance ──────────────────────────────────────────────────── */
.cid-comp { border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 0 10px 10px 0; padding: 11px 15px; margin-bottom: 10px; }
.cid-comp.danger { border-left-color: #ef4444; background: #fff5f5; }
.cid-comp-title  { font-size: 12px; font-weight: 700; color: #0F3A3A; margin-bottom: 4px; }
.cid-comp-detail { font-size: 11px; color: #5a8080; }

/* ── Utility ─────────────────────────────────────────────────────── */
.cid-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cid-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.cid-mt-12  { margin-top: 12px; }
.cid-mt-16  { margin-top: 16px; }
.cid-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cid-stars    { color: #0FB8A2; font-size: 18px; letter-spacing: 2px; }
.cid-asset-tag { display: inline-block; padding: 4px 10px; background: #E8F5F4; color: #0FB8A2; border-radius: 20px; font-size: 11px; font-weight: 600; margin: 3px; }
.cid-brief-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #cde8e2; }
.cid-brief-item:last-child { border-bottom: none; }
.cid-brief-num  { width: 22px; height: 22px; border-radius: 50%; background: #0FB8A2; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.cid-brief-text { font-size: 12px; color: #0F3A3A; line-height: 1.5; }
.cid-meta-tbl   { font-size: 11px; width: 100%; border-collapse: collapse; }
.cid-meta-tbl tr td:first-child { color: #5a8080; padding: 3px 0; width: 45%; }
.cid-meta-tbl tr td:last-child  { font-weight: 600; padding: 3px 0; border-bottom: 1px solid #cde8e2; }
.cid-meta-tbl tr:last-child td  { border-bottom: none; }
.cid-loading    { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 14px; color: #5a8080; }
.cid-error      { display: flex; align-items: center; justify-content: center; height: 100%; }
.cid-error-box  { background: #fff5f5; border: 1px solid #fca5a5; border-radius: 12px; padding: 24px 32px; text-align: center; font-size: 14px; color: #dc2626; }
.cid-close-btn  { background: transparent; border: 1px solid #333; color: #ccc; border-radius: 8px; padding: 5px 14px; font-size: 11px; cursor: pointer; }
.cid-close-btn:hover { background: #1a2535; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   CREATIVE INTELLIGENCE — RICH ONE-PAGER REPORT  (.ci-report)
   ════════════════════════════════════════════════════════════════════════════ */

.ci-report { background: #f6f9fb; min-height: calc(100vh - 60px); padding-bottom: 60px; }

/* Top bar */
.ci-rpt-topbar {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; flex-wrap: wrap;
}
.ci-rpt-back-btn { flex-shrink: 0; }
.ci-rpt-topbar-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ci-rpt-topbar-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* Section cards */
.ci-rpt-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px 24px; margin: 14px 20px; }
.ci-rpt-section-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #0FB8A2; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1.5px solid #e8f5f4; }

/* 01 Summary */
.ci-rpt-summary-row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.ci-rpt-ring-wrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.ci-rpt-ring-svg  { width: 100%; height: 100%; }
.ci-rpt-ring-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; line-height: 1; }
.ci-rpt-ring-score { font-size: 24px; font-weight: 900; color: var(--text); }
.ci-rpt-ring-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-top: 2px; }
.ci-rpt-summary-body { flex: 1; min-width: 0; }
.ci-rpt-title  { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 5px; }
.ci-rpt-byline { font-size: 12px; color: #64748b; margin-bottom: 8px; }
.ci-rpt-stars  { display: flex; align-items: center; gap: 3px; margin-bottom: 8px; font-size: 15px; }
.ci-rpt-stars .ci-star-full  { color: #f59e0b; }
.ci-rpt-stars .ci-star-half  { color: #f59e0b; opacity: 0.6; }
.ci-rpt-stars .ci-star-empty { color: #d1d5db; }
.ci-rpt-stars-label { font-size: 11px; color: #64748b; margin-left: 5px; }
.ci-rpt-narrative { font-size: 13.5px; line-height: 1.7; color: #334155; margin: 0; }
.ci-rpt-summary-kpis { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; min-width: 110px; }
.ci-rpt-kpi { text-align: center; background: #f8fafb; border-radius: 10px; padding: 10px 14px; border: 1px solid #e2e8f0; transition: border-color .2s, background .2s; }
.ci-rpt-kpi.kpi-good { background: #ecfdf5; border-color: #6ee7b7; }
.ci-rpt-kpi.kpi-warn { background: #fff7ed; border-color: #fcd34d; }
.ci-rpt-kpi.kpi-bad  { background: #fff1f2; border-color: #fca5a5; }
.ci-rpt-kpi-val { font-size: 22px; font-weight: 900; line-height: 1; margin-bottom: 4px; color: #1e293b; }
.ci-rpt-kpi-val.good { color: #16a34a; } .ci-rpt-kpi-val.warn { color: #d97706; } .ci-rpt-kpi-val.bad { color: #dc2626; }
.ci-rpt-kpi-val small { font-size: 11px; font-weight: 600; color: #94a3b8; }
.ci-rpt-kpi-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.ci-rpt-insight-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ci-rpt-insight { border-radius: 10px; padding: 13px 15px; border-left: 4px solid; }
.ci-rpt-insight.good   { background: #f0fdf4; border-left-color: #22c55e; }
.ci-rpt-insight.warn   { background: #fffbeb; border-left-color: #f59e0b; }
.ci-rpt-insight.danger { background: #fff1f2; border-left-color: #ef4444; }
.ci-rpt-insight-label  { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; margin-bottom: 5px; }
.ci-rpt-insight-body   { font-size: 12px; font-weight: 400; color: #334155; line-height: 1.55; }

/* 02 Wow Factors */
.ci-rpt-wow-signals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ci-rpt-wow-pill    { display:inline-flex; align-items:center; gap:4px; padding: 5px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.ci-rpt-wow-good    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.ci-rpt-wow-bad     { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.ci-rpt-wow-warn    { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.ci-rpt-wow-info    { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.ci-rpt-wow-reason  { font-weight:400; opacity:.8; font-size:11.5px; }
.ci-rpt-peer-context { font-size: 12px; color: #64748b; margin-top: 8px; }
.ci-rpt-empty-note   { font-size: 12.5px; color: #94a3b8; padding: 8px 0; }

/* 03 Six Capabilities */
.ci-rpt-caps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ci-rpt-cap-card  { background: #f8fafb; border-radius: 10px; padding: 13px 15px; border: 1px solid #e2e8f0; border-left: 4px solid #e2e8f0; transition: box-shadow .2s; }
.ci-rpt-cap-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.ci-rpt-cap-card.good { border-left-color: #16a34a; background: #ecfdf5; border-color: #6ee7b7; }
.ci-rpt-cap-card.warn { border-left-color: #d97706; background: #fffbeb; border-color: #fcd34d; }
.ci-rpt-cap-card.bad  { border-left-color: #dc2626; background: #fff1f2; border-color: #fca5a5; }
.ci-rpt-cap-head  { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ci-rpt-cap-em    { font-size: 15px; flex-shrink: 0; }
.ci-rpt-cap-name  { flex: 1; font-size: 12px; font-weight: 600; color: #334155; }
.ci-rpt-cap-score { font-size: 15px; font-weight: 800; }
.ci-rpt-cap-score.good { color: #16a34a; } .ci-rpt-cap-score.warn { color: #d97706; } .ci-rpt-cap-score.bad { color: #dc2626; }
.ci-rpt-cap-bar   { height: 7px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 9px; }
.ci-rpt-cap-fill  { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ci-rpt-cap-card.good .ci-rpt-cap-fill { background: linear-gradient(90deg,#22c55e,#4ade80); }
.ci-rpt-cap-card.warn .ci-rpt-cap-fill { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.ci-rpt-cap-card.bad  .ci-rpt-cap-fill { background: linear-gradient(90deg,#ef4444,#f87171); }
.ci-rpt-cap-card:not(.good):not(.warn):not(.bad) .ci-rpt-cap-fill { background: linear-gradient(90deg,#0FB8A2,#34d399); }

.ci-rpt-cap-rec  { font-size: 11.5px; color: #475569; margin-top: 4px; line-height: 1.4; display: flex; gap: 5px; align-items: flex-start; }
.ci-rpt-cap-rec-pri { font-size: 9px; font-weight: 800; border-radius: 3px; padding: 2px 4px; flex-shrink: 0; margin-top: 1px; }
.ci-rpt-cap-rec-pri.pri-high   { background: #fee2e2; color: #dc2626; }
.ci-rpt-cap-rec-pri.pri-medium { background: #fef3c7; color: #d97706; }
.ci-rpt-cap-rec-pri.pri-low    { background: #dcfce7; color: #16a34a; }
.ci-rpt-cap-empty { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }

/* ── Risk Timeline (ci-rpt-rl-*) redesign ──────────────────────────────── */

/* Card wrapper */
.ci-rpt-rl-card { overflow: visible; }

/* Key / legend row */
.ci-rpt-rl-key-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.ci-rpt-rl-key-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
.ci-rpt-rl-key-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ci-rpt-rl-key-high  { color: #dc2626; }
.ci-rpt-rl-key-high  .ci-rpt-rl-key-dot  { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.18); }
.ci-rpt-rl-key-medium { color: #b45309; }
.ci-rpt-rl-key-medium .ci-rpt-rl-key-dot { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.18); }
.ci-rpt-rl-key-low   { color: #0a7d6e; }
.ci-rpt-rl-key-low   .ci-rpt-rl-key-dot  { background: #0FB8A2; box-shadow: 0 0 0 2px rgba(15,184,162,0.18); }
.ci-rpt-rl-key-sep   { flex: 1; }
.ci-rpt-rl-key-hint  { font-size: 10.5px; color: #94a3b8; font-style: italic; font-weight: 400; letter-spacing: 0; }

/* Hero ribbon (optional strip above the axis) */
.ci-rpt-rl-hero-ribbon {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.ci-rpt-rl-ribbon-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: 0.18em; color: #0FB8A2;
  text-transform: uppercase; flex-shrink: 0; width: 46px;
}
.ci-rpt-rl-hero-axis {
  position: relative; flex: 1; height: 26px;
}
.ci-rpt-rl-hero-bubble {
  position: absolute; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #0FB8A2, #06b6d4);
  color: #fff; font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15,184,162,0.35);
  cursor: default;
  transition: transform 0.18s, box-shadow 0.18s;
}
.ci-rpt-rl-hero-bubble:hover {
  transform: translateX(-50%) scale(1.2);
  box-shadow: 0 4px 14px rgba(15,184,162,0.45);
}

/* Stage wrapping the axis + detail panel */
.ci-rpt-rl-track-wrap { margin-bottom: 24px; }
.ci-rpt-rl-stage      { position: relative; }

/* 6px axis track */
.ci-rpt-rl-axis {
  height: 6px;
  background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 3px;
  position: relative;
  margin: 16px 0 6px;
}

/* Quarter-tick marks */
.ci-rpt-rl-tick {
  position: absolute; top: -5px; bottom: -5px;
  width: 1px; background: rgba(148,163,184,0.5);
  pointer-events: none;
}

/* Timestamp labels */
.ci-rpt-rl-tick-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #94a3b8;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Interactive marker bubbles */
.ci-rpt-rl-marker {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: #fff;
  cursor: pointer; line-height: 1;
  box-sizing: border-box;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
  outline: none;
  z-index: 2;
}
.ci-rpt-rl-marker:hover {
  transform: translate(-50%, -50%) scale(1.22);
  z-index: 5;
}
.ci-rpt-rl-marker.ci-rpt-rl-m-active {
  transform: translate(-50%, -50%) scale(1.28);
  z-index: 6;
  filter: brightness(1.08);
}
.ci-rpt-rl-m-high   {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 3px 10px rgba(239,68,68,0.40);
}
.ci-rpt-rl-m-high:hover, .ci-rpt-rl-m-high.ci-rpt-rl-m-active {
  box-shadow: 0 5px 18px rgba(239,68,68,0.55);
}
.ci-rpt-rl-m-medium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 3px 10px rgba(245,158,11,0.38);
}
.ci-rpt-rl-m-medium:hover, .ci-rpt-rl-m-medium.ci-rpt-rl-m-active {
  box-shadow: 0 5px 18px rgba(245,158,11,0.52);
}
.ci-rpt-rl-m-low {
  background: linear-gradient(135deg, #0FB8A2, #06b6d4);
  box-shadow: 0 3px 10px rgba(15,184,162,0.35);
}
.ci-rpt-rl-m-low:hover, .ci-rpt-rl-m-low.ci-rpt-rl-m-active {
  box-shadow: 0 5px 18px rgba(15,184,162,0.50);
}

/* Detail panel that appears below the axis on click */
.ci-rpt-rl-detail-panel {
  margin-top: 10px;
  animation: ci-rl-slide-in 0.22s ease;
}
@keyframes ci-rl-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ci-rpt-rl-detail-inner {
  border-radius: 12px;
  border: 1.5px solid transparent;
  padding: 14px 16px;
  background: #f8fafc;
}
.ci-rpt-rl-dp-high   { background: #fff5f5; border-color: rgba(239,68,68,0.22); }
.ci-rpt-rl-dp-medium { background: #fffbeb; border-color: rgba(245,158,11,0.22); }
.ci-rpt-rl-dp-low    { background: #f0fdfb; border-color: rgba(15,184,162,0.22); }

.ci-rpt-rl-dp-header {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.ci-rpt-rl-dp-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
  color: #fff;
}
.ci-rpt-rl-badge-high   { background: #ef4444; }
.ci-rpt-rl-badge-medium { background: #f59e0b; }
.ci-rpt-rl-badge-low    { background: #0FB8A2; }

.ci-rpt-rl-dp-ts {
  font-size: 12px; font-weight: 700; color: #334155;
  font-variant-numeric: tabular-nums;
}
.ci-rpt-rl-dp-dim {
  font-size: 11px; font-weight: 600; color: #64748b;
  background: #f1f5f9; border-radius: 6px; padding: 2px 7px;
}
.ci-rpt-rl-dp-uplift {
  margin-left: auto; font-size: 12px; font-weight: 800;
  color: #0FB8A2; white-space: nowrap;
}
.ci-rpt-rl-dp-close {
  margin-left: 4px; background: none; border: none;
  cursor: pointer; font-size: 13px; color: #94a3b8; padding: 2px 5px;
  border-radius: 4px; line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.ci-rpt-rl-dp-close:hover { color: #475569; background: #e2e8f0; }

.ci-rpt-rl-dp-body { display: flex; flex-direction: column; gap: 6px; }
.ci-rpt-rl-dp-issue, .ci-rpt-rl-dp-change {
  font-size: 13px; line-height: 1.5; color: #1e293b;
}
.ci-rpt-rl-dp-row-lbl {
  display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #94a3b8; margin-right: 6px;
}

/* ── Recommendation Cards List ─────────────────────────────────────────── */
.ci-rpt-rl-rec-list { border-top: 1.5px solid #e2e8f0; padding-top: 18px; }
.ci-rpt-rl-rec-list-head {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: 10px;
}

.ci-rpt-rl-rec-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 10px 10px 0;
  border-radius: 10px;
  border: 1px solid transparent;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.ci-rpt-rl-rec-accent {
  width: 4px; align-self: stretch; border-radius: 4px; flex-shrink: 0;
  min-height: 36px;
}
.ci-rpt-rl-rec-high   .ci-rpt-rl-rec-accent { background: #ef4444; }
.ci-rpt-rl-rec-medium .ci-rpt-rl-rec-accent { background: #f59e0b; }
.ci-rpt-rl-rec-low    .ci-rpt-rl-rec-accent { background: #0FB8A2; }

.ci-rpt-rl-rec-row:hover {
  background: #f8fafc; border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(15,58,58,0.06);
}
.ci-rpt-rl-rec-open {
  background: #f8fafc; border-color: #cbd5e1;
  box-shadow: 0 3px 12px rgba(15,58,58,0.08);
}
.ci-rpt-rl-rec-high.ci-rpt-rl-rec-open   { background: #fff5f5; border-color: rgba(239,68,68,0.20); }
.ci-rpt-rl-rec-medium.ci-rpt-rl-rec-open { background: #fffbeb; border-color: rgba(245,158,11,0.20); }
.ci-rpt-rl-rec-low.ci-rpt-rl-rec-open    { background: #f0fdfb; border-color: rgba(15,184,162,0.20); }

.ci-rpt-rl-rec-pri {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  color: #fff; flex-shrink: 0;
  white-space: nowrap;
}
.ci-rpt-rl-rec-ts {
  font-size: 12px; font-weight: 700; color: #334155;
  font-variant-numeric: tabular-nums; flex-shrink: 0; width: 36px;
}
.ci-rpt-rl-rec-dim {
  font-size: 10.5px; font-weight: 600; color: #64748b;
  background: #f1f5f9; border-radius: 5px; padding: 2px 7px;
  flex-shrink: 0; white-space: nowrap; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis;
}
.ci-rpt-rl-rec-issue {
  font-size: 12.5px; color: #334155; line-height: 1.4;
  flex: 1; min-width: 0;
}
.ci-rpt-rl-rec-uplift {
  font-size: 11.5px; font-weight: 800; color: #0FB8A2;
  flex-shrink: 0; white-space: nowrap;
}
.ci-rpt-rl-rec-chevron {
  font-size: 18px; color: #cbd5e1; flex-shrink: 0;
  transition: transform 0.2s, color 0.15s;
  line-height: 1; width: 18px; text-align: center;
}
.ci-rpt-rl-chevron-open {
  transform: rotate(90deg);
  color: #64748b;
}

/* Expandable detail row (full-width child of the flex row) */
.ci-rpt-rl-rec-expand {
  width: 100%; flex-basis: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(241,245,249,0.7);
  border-left: 3px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 6px;
  animation: ci-rl-slide-in 0.2s ease;
}
.ci-rpt-rl-rec-high   .ci-rpt-rl-rec-expand { border-left-color: #fca5a5; }
.ci-rpt-rl-rec-medium .ci-rpt-rl-rec-expand { border-left-color: #fcd34d; }
.ci-rpt-rl-rec-low    .ci-rpt-rl-rec-expand { border-left-color: #5eead4; }

.ci-rpt-rl-rec-exp-issue,
.ci-rpt-rl-rec-exp-change {
  font-size: 12.5px; line-height: 1.5; color: #1e293b;
}
.ci-rpt-rl-rec-exp-uplift {
  font-size: 12px; color: #475569; margin-top: 2px;
}
.ci-rpt-rl-rec-exp-uplift strong { color: #0FB8A2; }

/* 04 Audience */
.ci-rpt-aud-grid { display: grid; grid-template-columns: 1fr 180px; gap: 18px; align-items: start; }
.ci-rpt-table-wrap { overflow-x: auto; }
.ci-rpt-table   { width: 100%; border-collapse: collapse; font-size: 13px; }
.ci-rpt-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; padding: 6px 10px; border-bottom: 1.5px solid #e2e8f0; }
.ci-rpt-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: top; }
.ci-rpt-table tbody tr:last-child td { border-bottom: none; }
.ci-rpt-td-muted { font-size: 11.5px; color: #64748b; } .ci-rpt-td-num { text-align: center; color: #94a3b8; font-size: 12px; }
.ci-rpt-fit-badge { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; }
.ci-rpt-fit-badge.fit-high   { background: #dcfce7; color: #15803d; }
.ci-rpt-fit-badge.fit-medium { background: #fef3c7; color: #92400e; }
.ci-rpt-fit-badge.fit-low    { background: #fee2e2; color: #b91c1c; }
.ci-rpt-aud-meta { display: flex; flex-direction: column; gap: 10px; }
.ci-rpt-in-flight { font-size: 12px; color: #475569; line-height: 1.8; background: #f8fafb; border-radius: 10px; padding: 10px 14px; border: 1px solid #e2e8f0; }
.ci-rpt-stat-card { text-align: center; background: #f8fafb; border-radius: 10px; padding: 12px 16px; border: 1px solid #e2e8f0; }
.ci-rpt-stat-val  { font-size: 22px; font-weight: 900; color: #0FB8A2; line-height: 1; margin-bottom: 4px; }
.ci-rpt-stat-val small { font-size: 12px; font-weight: 600; color: #94a3b8; }
.ci-rpt-stat-lbl  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; }

/* 05 Brand Equity */
.ci-rpt-brand-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.ci-rpt-brand-assets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ci-rpt-brand-asset-tag { background: #e8f5f4; color: #0d5c56; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.ci-rpt-brand-love { display: flex; align-items: center; gap: 12px; }
.ci-rpt-brand-love .ci-rpt-stat-lbl { flex-shrink: 0; }
.ci-rpt-brand-love-bar { flex: 1; height: 7px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.ci-rpt-brand-love-bar > div { height: 100%; background: linear-gradient(90deg,#0FB8A2,#06b6d4); border-radius: 4px; transition: width 0.5s; }
.ci-rpt-brand-love-val { font-size: 13px; font-weight: 800; color: #0FB8A2; white-space: nowrap; }

/* 06 Peer grid */
.ci-rpt-peer-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 12px; }
.ci-rpt-peer-card { background: #f8fafb; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; }
.ci-rpt-peer-you  { border: 2px solid #0FB8A2; }
.ci-rpt-peer-thumb { height: 76px; position: relative; background: linear-gradient(135deg,#0FB8A2,#06b6d4); }
.ci-rpt-peer-score-badge { position: absolute; bottom: 6px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 7px; }
.ci-rpt-peer-you-label { position: absolute; top: 6px; left: 8px; background: #0FB8A2; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.05em; }
.ci-rpt-peer-body  { padding: 9px 11px; }
.ci-rpt-peer-brand { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 2px; }
.ci-rpt-peer-title { font-size: 11.5px; color: #334155; margin-bottom: 7px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ci-rpt-peer-metrics { display: flex; flex-wrap: wrap; gap: 5px; }
.ci-rpt-peer-metrics span { font-size: 10.5px; background: #e8f5f4; color: #0d5c56; padding: 2px 6px; border-radius: 7px; font-weight: 600; }

/* 07 Format expansions */
.ci-rpt-formats-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 12px; }
.ci-rpt-format-card { background: #f8fafb; border-radius: 10px; padding: 13px 15px; border: 1px solid #e2e8f0; }
.ci-rpt-format-name { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.ci-rpt-format-strategy { font-size: 12.5px; color: #475569; line-height: 1.6; margin: 0 0 8px; }
.ci-rpt-format-row { font-size: 11.5px; color: #64748b; margin-top: 4px; line-height: 1.5; }
.ci-rpt-format-warn { color: #d97706; }
.ci-rpt-format-row-lbl { font-weight: 700; margin-right: 4px; }
.ci-rpt-format-row-lbl.good { color: #16a34a; } .ci-rpt-format-row-lbl.bad { color: #dc2626; }

/* 08 Platform fit */
.ci-rpt-platforms-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; }
.ci-rpt-platform-card  { background: #f8fafb; border-radius: 12px; padding: 16px 18px; border: 1px solid #e2e8f0; border-top: 3px solid #e2e8f0; transition: box-shadow .2s; }
.ci-rpt-platform-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.ci-rpt-platform-card.good { border-top-color: #22c55e; background: #f0fdf4; border-color: #bbf7d0; }
.ci-rpt-platform-card.warn { border-top-color: #f59e0b; background: #fffbeb; border-color: #fde68a; }
.ci-rpt-platform-card.bad  { border-top-color: #ef4444; background: #fff1f2; border-color: #fecaca; }
.ci-rpt-platform-head  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ci-rpt-platform-name  { font-size: 14px; font-weight: 700; color: #1e293b; }
.ci-rpt-platform-score { font-size: 20px; font-weight: 900; line-height: 1; }
.ci-rpt-platform-score.good small, .ci-rpt-platform-score.good { color: #16a34a; }
.ci-rpt-platform-score.warn small, .ci-rpt-platform-score.warn { color: #d97706; }
.ci-rpt-platform-score.bad  small, .ci-rpt-platform-score.bad  { color: #dc2626; }
.ci-rpt-platform-score small { font-size: 12px; font-weight: 600; }
.ci-rpt-platform-bar   { height: 5px; background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.ci-rpt-platform-fill  { height: 100%; border-radius: 3px; transition: width 0.5s; }
.ci-rpt-platform-detail { font-size: 12px; color: #475569; line-height: 1.6; }
.ci-rpt-platform-strengths { font-size: 12px; color: #475569; line-height: 1.6; margin-bottom: 4px; }
.ci-rpt-platform-issues { margin-top: 6px; }
.ci-rpt-platform-issue-item { font-size: 11.5px; color: #d97706; line-height: 1.5; padding: 1px 0; display: flex; gap: 4px; }
.ci-rpt-platform-issue-item::before { content: "⚠"; flex-shrink: 0; }

/* 09 A/B variants */
.ci-rpt-var-a { background: #dbeafe; color: #1d4ed8; font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.ci-rpt-var-b { background: #fce7f3; color: #be185d; font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }

/* 10 Frame-level recs */
.ci-rpt-frame-recs { display: flex; flex-direction: column; gap: 9px; }
.ci-rpt-frame-rec { display: flex; gap: 13px; align-items: flex-start; background: #f8fafb; border-radius: 10px; padding: 11px 15px; border-left: 4px solid #e2e8f0; }
.ci-rpt-frame-rec.rpt-pri-high   { border-left-color: #ef4444; }
.ci-rpt-frame-rec.rpt-pri-medium { border-left-color: #f59e0b; }
.ci-rpt-frame-rec.rpt-pri-low    { border-left-color: #22c55e; }
.ci-rpt-frame-num  { font-size: 16px; font-weight: 900; color: #d1d5db; min-width: 22px; text-align: center; line-height: 1; margin-top: 1px; }
.ci-rpt-frame-body { flex: 1; }
.ci-rpt-frame-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ci-rpt-frame-ts   { background: #e8f5f4; color: #0d5c56; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.ci-rpt-frame-issue { font-size: 12.5px; font-weight: 600; color: #334155; flex: 1; }
.ci-rpt-frame-uplift { font-size: 12px; font-weight: 700; color: #16a34a; }
.ci-rpt-frame-evidence { font-size: 11.5px; color: #64748b; line-height: 1.5; }

/* 11 Compliance */
.ci-rpt-compliance-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ci-rpt-findings  { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ci-rpt-finding   { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.ci-rpt-finding.sev-high { background: #fff1f2; } .ci-rpt-finding.sev-warn { background: #fffbeb; } .ci-rpt-finding.sev-info { background: #eff6ff; }
.ci-rpt-finding-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; color: #64748b; margin-top: 2px; }

/* 12 Next brief */
.ci-rpt-brief-head   { margin-bottom: 14px; }
.ci-rpt-brief-title  { font-size: 15px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.ci-rpt-brief-peer   { font-size: 12px; color: #64748b; }
.ci-rpt-brief-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.ci-rpt-brief-col-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 6px; }
.ci-rpt-brief-list   { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-rpt-brief-list li { font-size: 12.5px; color: #334155; padding: 4px 0; border-bottom: 1px solid #f1f5f9; line-height: 1.5; }
.ci-rpt-brief-list li:last-child { border-bottom: none; }
.ci-rpt-brief-list.good li::before { content: '✓ '; color: #16a34a; font-weight: 700; }
.ci-rpt-brief-list.bad  li::before { content: '✗ '; color: #dc2626; font-weight: 700; }
.ci-rpt-brief-footer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ci-rpt-brief-evidence { font-size: 11px; color: #94a3b8; margin-left: auto; }

/* Responsive */
/* KPI Predictions & Performance section */
.ci-rpt-fcast-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.ci-rpt-fcast-grid .ci-rpt-stat-val.good { color: #22c55e; }
.ci-rpt-fcast-grid .ci-rpt-stat-card     { text-align: center; }

/* Insight box title line */
.ci-rpt-insight-title { font-size: 13px; font-weight: 700; color: inherit; margin-bottom: 4px; opacity: .85; }

/* Wow section separator */
.ci-rpt-wow-section-sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }

/* Wow Factors sub-panels */
.ci-rpt-wow-sub-panel  { background: #f8fafc; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.ci-rpt-arc-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ci-rpt-arc-grid.ci-rpt-arc-grid-single { grid-template-columns: 1fr; }
.ci-rpt-arc-card       { background: #f8fafc; border-radius: 10px; padding: 14px 16px; }
.ci-rpt-wow-meta-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.ci-rpt-wow-meta-card  { background: #f8fafc; border-radius: 10px; padding: 14px 16px; }
.ci-rpt-wow-meta-item  { font-size: 12px; color: var(--text); padding: 4px 0; border-bottom: 1px solid #e2e8f0; line-height: 1.5; }
.ci-rpt-wow-meta-item:last-child { border-bottom: none; }
.ci-rpt-wow-persona    { font-size: 12px; color: var(--text); line-height: 1.6; }

/* Hero's Moment — 2-col layout with animated ring */
.ci-rpt-hero-moment    { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; position: relative; background: linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); border: 1px solid #fde68a; border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; overflow: hidden; cursor: default; transition: box-shadow .2s, transform .18s; }
.ci-rpt-hero-moment:hover { box-shadow: 0 6px 24px rgba(245,158,11,.2); transform: translateY(-2px); }
.ci-rpt-hero-bg-glow   { position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: radial-gradient(circle,rgba(251,191,36,.22) 0%,transparent 70%); pointer-events: none; }

/* Ring */
.ci-rpt-hero-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.ci-rpt-hero-ring      { width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid #fbbf24; background: #fff8e7; }
.ci-rpt-hero-peak      { border-color: #d97706; animation: heroPulse 2.5s ease-in-out infinite; }
.ci-rpt-hero-mid       { border-color: #f59e0b; }
.ci-rpt-hero-low       { border-color: #b45309; opacity: .75; }
.ci-rpt-hero-ring-num  { font-size: 24px; font-weight: 800; color: #d97706; line-height: 1; }
.ci-rpt-hero-ring-denom { font-size: 9px; font-weight: 600; color: #b45309; margin-top: 1px; }
.ci-rpt-hero-ring-phase { font-size: 10px; font-weight: 700; color: #78350f; text-transform: uppercase; letter-spacing: .07em; text-align: center; max-width: 76px; }
@keyframes heroPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(217,119,6,.12), 0 0 0 9px rgba(217,119,6,.06); } 50% { box-shadow: 0 0 0 7px rgba(217,119,6,.18), 0 0 0 13px rgba(217,119,6,.09); } }

/* Body */
.ci-rpt-hero-body      { flex: 1; min-width: 0; }
.ci-rpt-hero-badge     { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #b45309; margin-bottom: 6px; }
.ci-rpt-hero-desc      { font-size: 12.5px; color: #78350f; line-height: 1.55; margin: 0 0 8px; }
.ci-rpt-hero-timed     { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ci-rpt-hero-toggle    { font-size: 11px; font-weight: 600; color: #d97706; cursor: pointer; user-select: none; }
.ci-rpt-hero-toggle:hover { color: #b45309; text-decoration: underline; }

/* Detail */
.ci-rpt-hero-detail    { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid #fde68a; }
.ci-rpt-hero-detail-row { font-size: 12px; color: #78350f; line-height: 1.6; margin-bottom: 5px; }
.ci-rpt-hero-detail-row strong { font-weight: 700; color: #92400e; }

/* Story arc bar chart — uniform teal, explicit pixel heights via ng-style */
.ci-rpt-story-bars  { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 4px; }
.ci-rpt-story-seg   { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ci-rpt-story-bar   { width: 100%; border-radius: 4px 4px 0 0; background: #5cbfb4; min-height: 3px; transition: background .2s; }
.ci-rpt-story-bar:hover { background: #3da89e; }
.ci-rpt-story-label { font-size: 9px; color: var(--muted); text-align: center; white-space: nowrap; }

/* Emotional arc chart — uniform indigo, dynamic heights */
.ci-rpt-arc-wrap    { margin-top: 16px; }
.ci-rpt-arc-bars    { display: flex; gap: 6px; height: 80px; align-items: flex-end; }
.ci-rpt-arc-seg     { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: default; }
.ci-rpt-arc-bar     { width: 100%; border-radius: 4px 4px 0 0; background: #8b85e8; transition: height .4s ease, background .2s; min-height: 4px; }
.ci-rpt-arc-seg:hover .ci-rpt-arc-bar { background: #7267e0; }
.ci-rpt-arc-label   { font-size: 8.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ci-rpt-arc-timeline { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); margin-top: 4px; }

/* ROI one-liner banner */
.ci-rpt-roi-banner { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: #15803d; font-weight: 500; margin-top: 12px; line-height: 1.5; }

/* Dayparting bar chart */
.ci-rpt-daypart-row   { margin-top: 4px; }
.ci-rpt-daypart-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ci-rpt-daypart-tile  { text-align: center; padding: 10px 4px; border-radius: 9px; background: #f1f5f9; border: 1px solid #e2e8f0; transition: transform .15s; }
.ci-rpt-daypart-tile:hover { transform: translateY(-1px); }
.ci-rpt-daypart-tile.dp-peak { background: #0FB8A2; border-color: #0d9e8a; }
.ci-rpt-daypart-tile.dp-hot  { background: #d1fae5; border-color: #6ee7b7; }
.ci-rpt-daypart-tile.dp-cold { opacity: 0.55; }
.ci-rpt-daypart-tile-lbl   { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 5px; line-height: 1; }
.ci-rpt-daypart-tile.dp-peak .ci-rpt-daypart-tile-lbl { color: rgba(255,255,255,0.85); }
.ci-rpt-daypart-tile-score { font-size: 16px; font-weight: 800; color: #334155; line-height: 1; }
.ci-rpt-daypart-tile.dp-peak .ci-rpt-daypart-tile-score { color: white; }
.ci-rpt-daypart-tile.dp-hot  .ci-rpt-daypart-tile-score { color: #047857; }

/* Keyword / affinity pills */
.ci-rpt-kw-row           { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.ci-rpt-section-sublabel { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 4px; flex-shrink: 0; }
.ci-rpt-kw-pill          { font-size: 11px; }

/* DBA Coverage table */
.ci-rpt-dba-table-wrap        { margin-top: 14px; }
.ci-rpt-dba-table td          { vertical-align: middle; }
.ci-rpt-dba-strength-bar      { width: 80px; height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.ci-rpt-dba-strength-fill     { height: 100%; border-radius: 3px; }
.ci-rpt-dba-strength-fill.str-high { background: #22c55e; }
.ci-rpt-dba-strength-fill.str-mid  { background: #f59e0b; }
.ci-rpt-dba-strength-fill.str-low  { background: #ef4444; }
.ci-rpt-binet-row             { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* A/B Variant cards */
.ci-rpt-variant-list          { display: flex; flex-direction: column; gap: 10px; }
.ci-rpt-variant-card          { border: 1px solid #e2e8f0; border-radius: 10px; padding: 13px 15px; border-left: 3px solid #e2e8f0; }
.ci-rpt-variant-card.var-pri-high   { border-left-color: #ef4444; }
.ci-rpt-variant-card.var-pri-medium { border-left-color: #f59e0b; }
.ci-rpt-variant-card.var-pri-low    { border-left-color: #94a3b8; }
.ci-rpt-variant-head          { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ci-rpt-variant-id            { font-size: 11px; font-weight: 800; color: var(--primary); min-width: 40px; }
.ci-rpt-variant-cap           { font-size: 10px; color: var(--muted); text-transform: capitalize; flex: 1; }
.ci-rpt-variant-hypothesis    { font-size: 11.5px; color: var(--text); line-height: 1.55; margin-bottom: 7px; }
.ci-rpt-variant-change        { font-size: 11px; color: var(--muted); line-height: 1.55; }
.ci-rpt-variant-change-label  { font-weight: 700; color: var(--text); margin-right: 4px; }

/* Production cost + in-flight */
.ci-rpt-cost-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.ci-rpt-action-list    { padding-left: 18px; margin: 0; }
.ci-rpt-action-list li { font-size: 12px; color: var(--muted); line-height: 1.7; }

@media (max-width: 860px) {
  .ci-rpt-caps-grid    { grid-template-columns: repeat(2,1fr); }
  .ci-rpt-brand-kpis   { grid-template-columns: repeat(2,1fr); }
  .ci-rpt-fcast-grid   { grid-template-columns: repeat(2,1fr); }
  .ci-rpt-aud-grid     { grid-template-columns: 1fr; }
  .ci-rpt-brief-grid   { grid-template-columns: 1fr; }
  .ci-rpt-insight-row  { grid-template-columns: 1fr; }
  .ci-rpt-summary-row  { flex-wrap: wrap; }
  .ci-rpt-summary-kpis { flex-direction: row; min-width: auto; width: 100%; }
  .ci-rpt-cost-grid    { grid-template-columns: 1fr 1fr; }
  .ci-rpt-arc-grid, .ci-rpt-arc-grid.ci-rpt-arc-grid-single { grid-template-columns: 1fr; }
  .ci-rpt-wow-meta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ci-rpt-caps-grid     { grid-template-columns: 1fr; }
  .ci-rpt-card          { margin: 10px; padding: 16px 14px; }
  .ci-rpt-topbar        { padding: 8px 12px; }
  .ci-rpt-wow-meta-grid { grid-template-columns: 1fr; }
}

/* ── Active Jobs Panel ───────────────────────────────────────────────────── */
.ci-jobs-panel { margin-bottom: 16px; }
.ci-jobs-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ci-jobs-panel-title { font-size: 11px; font-weight: 700; color: #334155; letter-spacing: 0.06em; text-transform: uppercase; }
.ci-jobs-count { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #0FB8A2; color: white; font-size: 10px; font-weight: 800; margin-left: 4px; }
.ci-jobs-panel-hint { font-size: 11px; color: #94a3b8; }

.ci-job-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #f8fafb; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 6px; transition: border-color .2s; }
.ci-job-card.ci-job-done   { border-left: 3px solid #22c55e; }
.ci-job-card.ci-job-error  { border-left: 3px solid #ef4444; background: #fff1f2; }
.ci-job-card.ci-job-running { border-left: 3px solid #0FB8A2; }

.ci-job-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #e2e8f0; }
.ci-job-dot.dot-spin { background: #0FB8A2; animation: ciDotPulse 1.4s ease-in-out infinite; }
.ci-job-dot.dot-done { background: #22c55e; }
.ci-job-dot.dot-err  { background: #ef4444; }
@keyframes ciDotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.ci-job-body { flex: 1; min-width: 0; }
.ci-job-title { font-size: 12.5px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.ci-job-stage { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.ci-job-done-lbl { color: #16a34a; font-weight: 600; }
.ci-job-err-lbl  { color: #dc2626; }

.ci-job-bar { height: 3px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }
.ci-job-bar-fill { height: 100%; background: linear-gradient(90deg, #0FB8A2, #06b6d4); border-radius: 2px; transition: width .4s ease; }

.ci-job-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ci-btn-sm { font-size: 11px; padding: 4px 10px; }
.ci-job-cached-lbl  { color: #0d9488; font-weight: 600; }
.ci-job-reanalyze   { font-size: 11px; color: #64748b; }
.ci-job-reanalyze:hover { color: #0FB8A2; }

/* Lightweight result-fetch spinner (history/cache load, no progress stepper) */
.ci-result-loading { display: flex; align-items: center; gap: 10px; padding: 40px 24px; color: #64748b; font-size: 13px; }
.ci-result-loading-dot { width: 14px; height: 14px; border-radius: 50%; background: #0FB8A2; animation: ciDotPulse 1.2s ease-in-out infinite; }

/* ── Creative Intelligence Skeleton Loaders ─────────────────────────────── */
@keyframes ci-skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.ci-skel-line,
.ci-skel-back,
.ci-skel-thumb,
.ci-skel-ring,
.ci-skel-kpi,
.ci-skel-insight,
.ci-skel-num,
.ci-skel-cap {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 600px 100%;
  animation: ci-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

.ci-skel-report { padding: 0; }
.ci-skel-topbar { display: flex; align-items: center; padding: 10px 0 14px; border-bottom: 1px solid #f1f5f9; margin-bottom: 12px; }
.ci-skel-back   { width: 130px; height: 34px; border-radius: 20px; flex-shrink: 0; }
.ci-skel-card   { background: white; border: 1px solid #f1f5f9; border-radius: 14px; padding: 20px 24px; margin-bottom: 12px; }
.ci-skel-thumb  { width: 200px; height: 113px; border-radius: 10px; }
.ci-skel-ring   { width: 130px; height: 130px; border-radius: 50%; }
.ci-skel-kpi    { height: 72px; border-radius: 10px; }
.ci-skel-insight { height: 80px; border-radius: 10px; }

.ci-skel-section { }
.ci-skel-section-head { display: flex; align-items: center; gap: 10px; }
.ci-skel-num    { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.ci-skel-cap    { height: 90px; border-radius: 10px; }

.ci-skel-label  { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 13px; padding: 16px 0 8px; }
.ci-skel-dot-pulse { width: 10px; height: 10px; border-radius: 50%; background: #0FB8A2; animation: ciDotPulse 1.2s ease-in-out infinite; flex-shrink: 0; }

/* History list skeleton */
.ci-hist-skel { display: flex; flex-direction: column; gap: 8px; }
.ci-hist-skel-card { display: flex; align-items: center; gap: 14px; background: white; border: 1px solid #f1f5f9; border-radius: 10px; padding: 12px 16px; }
.ci-hist-skel-thumb { width: 80px; height: 45px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 600px 100%; animation: ci-skel-shimmer 1.4s ease-in-out infinite; }
.ci-hist-skel-body { flex: 1; }
.ci-hist-skel-score { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 600px 100%; animation: ci-skel-shimmer 1.4s ease-in-out infinite; }

/* Top-comments block under the video player. YouTube-style hierarchy:
   circular initial avatar on the left, author + body + action row on the right.
   Whitespace-led separation between rows (no border lines), matching YouTube. */
.cd-video-comments {
  margin-top: 18px;
  padding: 0 4px;
}
.cd-video-comments .cd-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f0f0f;
  margin-bottom: 6px;
}
.cd-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: none;
}
.cd-comment-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  background: #6b7280;
  user-select: none;
}
.cd-comment-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cd-comment-author {
  font-weight: 600;
  font-size: 0.82rem;
  color: #0f0f0f;
  margin-bottom: 2px;
  word-break: break-word;
}
.cd-comment-text {
  font-size: 0.88rem;
  color: #0f0f0f;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cd-comment-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #606060;
}
.cd-comment-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cd-comments-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #065fd4;            /* YouTube link-blue */
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
}
.cd-comments-toggle:hover {
  background: rgba(6, 95, 212, .08);
  color: #044a9e;
}

/* ══════════════════════════════════════════════════════════════════════
   Social Presence Insights — dashboard layout
   ════════════════════════════════════════════════════════════════════════ */
.cd-si { margin-top: 4px; }

/* Section header */
.cd-si-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cd-si-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 700;
  color: #1F2A2A;
}
.cd-si-head-title i {
  font-size: 1.05rem;
  color: var(--primary, #0FB8A2);
}
.cd-si-platforms { display: flex; gap: 6px; }
.cd-si-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft, #E8F5F4);
  color: var(--primary-deep, #088E89);
  border: 1px solid rgba(15, 184, 162, .25);
}

/* Generate CTA */
.cd-si-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px 18px;
  border: 1px dashed #C7D6D6;
  border-radius: 14px;
  background: linear-gradient(180deg, #FBFEFE 0%, #F4FAF9 100%);
}
.cd-si-cta-icon { font-size: 1.7rem; color: var(--primary, #0FB8A2); }
.cd-si-cta-text { font-size: .84rem; color: #5A6E6E; max-width: 380px; margin: 0; line-height: 1.5; }

/* Loading */
.cd-si-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  font-size: .85rem;
  color: #5A6E6E;
}

/* Hero summary */
.cd-si-hero {
  position: relative;
  padding: 14px 16px 14px 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8F5F4 0%, #F1F5FF 100%);
  border: 1px solid rgba(15, 184, 162, .18);
  margin-bottom: 12px;
}
.cd-si-hero p { margin: 0; font-size: .9rem; line-height: 1.55; color: #2A3838; }
.cd-si-hero-quote {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.3rem;
  color: var(--primary, #0FB8A2);
  opacity: .55;
}

/* YouTube ↔ Social content-match bar */
.cd-si-match { margin-bottom: 12px; }
.cd-si-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #4A5E5E;
  margin-bottom: 6px;
}
.cd-si-match-head i { color: var(--primary, #0FB8A2); }
.cd-si-match-pct { font-size: .95rem; font-weight: 700; color: var(--primary-deep, #088E89); }
.cd-si-match-track {
  height: 8px;
  border-radius: 999px;
  background: #EAF2F1;
  overflow: hidden;
}
.cd-si-match-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0FB8A2 0%, #088E89 100%);
  transition: width .4s ease;
}

/* Audience metric tiles */
.cd-si-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.cd-si-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #E2EAEA;
}
.cd-si-metric-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8A9A9A;
}
.cd-si-metric-label i { color: var(--primary, #0FB8A2); font-size: .8rem; }
.cd-si-metric-val { font-size: .82rem; font-weight: 600; color: #2A3838; line-height: 1.35; }
.cd-si-sentiment {
  align-self: flex-start;
  font-size: .76rem;
  font-weight: 700;
  text-transform: capitalize;
  padding: 2px 10px;
  border-radius: 999px;
}
.cd-si-sentiment--positive { background: rgba(16, 185, 129, .12); color: #0f9d76; }
.cd-si-sentiment--mixed    { background: rgba(217, 119, 87, .14); color: #b85a38; }
.cd-si-sentiment--negative { background: rgba(225, 75, 75, .12);  color: #c23b3b; }
.cd-si-sentiment--unknown  { background: #EEF2F2; color: #7A8A8A; }

/* Brand safety banner */
.cd-si-safety {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.cd-si-safety-icon { font-size: 1.25rem; line-height: 1.3; }
.cd-si-safety--safe { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .25); }
.cd-si-safety--safe .cd-si-safety-icon { color: #0f9d76; }
.cd-si-safety--risk { background: rgba(217, 119, 87, .10); border-color: rgba(217, 119, 87, .30); }
.cd-si-safety--risk .cd-si-safety-icon { color: #b85a38; }
.cd-si-safety-body { flex: 1; }
.cd-si-safety-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 700;
  color: #2A3838;
}
.cd-si-safety-risk {
  font-size: .68rem;
  font-weight: 600;
  text-transform: capitalize;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: #5A6E6E;
}
.cd-si-safety-notes { font-size: .8rem; color: #5A6E6E; line-height: 1.45; margin-top: 3px; }

/* Section tiles grid */
.cd-si-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cd-si-tile {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E2EAEA;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.cd-si-tile:hover {
  border-color: #C7D6D6;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
.cd-si-tile--full { grid-column: 1 / -1; }
.cd-si-tile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #4A5E5E;
  margin-bottom: 9px;
}
.cd-si-tile-head i { color: var(--primary, #0FB8A2); font-size: .85rem; }
.cd-si-tile-text { font-size: .84rem; line-height: 1.5; color: #3A4A4A; margin: 0; }

/* Tile chips — semantic colours */
.cd-si-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-si-chip {
  display: inline-block;
  font-size: .74rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cd-si-chip--pillar { background: rgba(99, 102, 241, .08);  color: #5457d6; border-color: rgba(99, 102, 241, .22); }
.cd-si-chip--brand  { background: rgba(217, 119, 87, .10);  color: #b85a38; border-color: rgba(217, 119, 87, .26); }
.cd-si-chip--fit    { background: rgba(16, 185, 129, .10);  color: #0f9d76; border-color: rgba(16, 185, 129, .26); }

/* Tile lists */
.cd-si-list { margin: 0; padding-left: 18px; }
.cd-si-list li { font-size: .83rem; line-height: 1.5; color: #3A4A4A; margin-bottom: 4px; }
.cd-si-list li::marker { color: var(--primary, #0FB8A2); }

/* Footer */
.cd-si-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ECF1F1;
}
.cd-si-caveat { font-size: .72rem; color: #8A9A9A; line-height: 1.4; }
.cd-si-regen { font-weight: 600; white-space: nowrap; }

/* Narrow drawers — collapse the grids to single column */
@media (max-width: 900px) {
  .cd-si-metrics, .cd-si-grid { grid-template-columns: 1fr; }
}

/* US Market Context page runs wider — the merged stat card + trending grid
   fill the reclaimed horizontal space instead of leaving big side gutters. */
.mi-wrap-wide { max-width: 1180px; }

/* ════════════════════════════════════════════════════════════════════════
   US Market Context page (mi-ctx-*) — demand-side market intelligence.
   Reuses the mi-* palette (teal #0FB8A2, #F8FBFA cards) from Market Intelligence.
   ════════════════════════════════════════════════════════════════════════ */
.mi-ctx-srcline {
  margin-top: 8px; font-size: 11px; color: #8A9999; font-style: italic;
}

/* Featured KPI — first card in the "YouTube in the US" strip grabs focus */
.mi-numbers-grid-featured { align-items: stretch; }
.mi-num-card-featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #0FB8A2, #0E7C70);
  border-color: #0FB8A2 !important;
  box-shadow: 0 6px 20px rgba(15,184,162,.30);
  position: relative; overflow: hidden;
}
.mi-num-card-featured .mi-num-val {
  font-size: 30px;
  /* base .mi-num-val uses gradient text (text-fill transparent) — reset to solid white */
  background: none;
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff;
}
.mi-num-card-featured .mi-num-label { color: rgba(255,255,255,.85); font-weight: 600; }
.mi-num-card-featured:hover { background: linear-gradient(135deg, #0FB8A2, #0E7C70); }
@media (max-width: 640px) { .mi-num-card-featured { grid-column: span 1; } }

/* ── Top row: AI Highlights (left ~40%) | YouTube in the US (right ~60%) ── */
.mi-top-row {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 14px; margin: 10px 16px; align-items: start;
}
.mi-top-row > .mi-glass-section { margin: 0; }   /* the row owns the gutters */
@media (max-width: 900px) { .mi-top-row { grid-template-columns: 1fr; } }

/* ── Merged "YouTube in the US" card: Market Size stacked above Audience ── */
.mi-us-split { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.mi-us-group-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #4A5E5E; margin-bottom: 9px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(15,58,58,.08);
}
/* horizontal divider above the Advertising Audience group (stacked layout) */
.mi-us-col-aud { border-top: 1px solid rgba(15,58,58,.08); padding-top: 12px; }
/* Market Size: hero on the left spanning both rows, 4 tiles in a 2×2 beside it */
.mi-us-col-size .mi-numbers-grid-featured { grid-template-columns: 1.5fr 1fr 1fr; }
.mi-us-col-size .mi-num-card-featured {
  grid-column: 1; grid-row: 1 / span 2;
  display: flex; flex-direction: column;        /* vertically center the hero text */
  align-items: center; justify-content: center;
}
/* smaller Market Size numbers (were oversized) — scoped to this card only */
.mi-us-col-size .mi-num-card-featured .mi-num-val { font-size: 22px; }
.mi-us-col-size .mi-num-val { font-size: 16px; }
/* Audience tiles: 4 cols → 8 tiles fill exactly 2 rows with no empty slots */
.mi-us-col-aud .mi-ctx-kpis { grid-template-columns: repeat(4, 1fr); }

/* on narrow viewports the hero drops to full width above its tiles */
@media (max-width: 640px) {
  .mi-us-col-size .mi-numbers-grid-featured { grid-template-columns: repeat(2, 1fr); }
  .mi-us-col-size .mi-num-card-featured { grid-column: 1 / -1; grid-row: auto; }
  .mi-us-col-aud .mi-ctx-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Merged-insight source tag */
.mi-hl-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  background: rgba(67,97,238,.12); color: #4361EE; vertical-align: middle;
}
.mi-hl-tag.mi-hl-tag-inv { background: rgba(15,184,162,.14); color: #0E7C70; }
.mi-ctx-link { text-decoration: none; display: inline-flex; align-items: center; }

/* Per-section card. Bars/insights need more room than the inventory charts. */
.mi-ctx-box { padding: 13px 14px; }
.mi-ctx-box-wide { grid-column: 1 / -1; }          /* trends + KPI blocks span full width */
.mi-ctx-caption {
  font-size: 9.5px; color: #8A9999; font-weight: 600; text-transform: none;
  margin: -5px 0 10px; letter-spacing: 0;
}
/* wider name column + taller scroll for the longer demand-side labels */
.mi-ctx-box .mi-hbar-scroll { max-height: 280px; }
.mi-ctx-box .mi-hbar-name { width: 130px; font-size: 10px; }
.mi-ctx-val { width: auto !important; min-width: 46px; color: #0E7C70 !important; font-weight: 700; }

/* KPI mini-cards inside a section */
.mi-ctx-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
}
.mi-ctx-kpi {
  background: #fff; border: 1px solid rgba(15,58,58,.09);
  border-radius: 9px; padding: 10px 12px;
}
.mi-ctx-kpi-val { font-size: 18px; font-weight: 800; color: #0E7C70; line-height: 1.1; }
.mi-ctx-kpi-lbl { font-size: 10px; color: #4A5E5E; margin-top: 4px; line-height: 1.35; }

/* Reach trend */
.mi-ctx-trend .mi-trend-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 11px;
}
.mi-ctx-trend .mi-trend-total { font-weight: 800; color: #0E7C70; }
.mi-ctx-trend .mi-trend-peak  { color: #8A9999; }
.mi-ctx-trend .mi-trend-plot { height: 90px; }
.mi-ctx-trend .mi-trend-svg { width: 100%; height: 100%; display: block; }
.mi-ctx-trend-xaxis {
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: #8A9999; margin-top: 4px;
}

/* Age × gender profile */
.mi-ctx-prof-legend {
  display: flex; gap: 16px; font-size: 10px; color: #4A5E5E; margin-bottom: 10px;
}
.mi-ctx-prof-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mi-ctx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mi-ctx-prof-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.mi-ctx-prof-band { width: 52px; font-size: 10px; color: #2E3E3E; flex-shrink: 0; font-weight: 600; }
.mi-ctx-prof-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mi-ctx-prof-track { background: rgba(15,58,58,.07); border-radius: 3px; height: 5px; overflow: hidden; }
.mi-ctx-prof-fill { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.mi-ctx-prof-vals { width: 78px; text-align: right; font-size: 9.5px; color: #8A9999; flex-shrink: 0; }

/* Key insights footer */
.mi-ctx-insights { margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(15,58,58,.12); }
.mi-ctx-insight { font-size: 10.5px; color: #4A5E5E; line-height: 1.45; margin-bottom: 5px; display: flex; gap: 6px; }
.mi-ctx-insight-icon { color: #0FB8A2; font-weight: 800; flex-shrink: 0; }

/* ── Trending (live POC) ────────────────────────────────────────────── */
.mi-tr-live {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #fff;
  background: #ef4444; border-radius: 4px; padding: 2px 6px; margin-left: 6px;
  vertical-align: middle; animation: mi-tr-pulse 2s ease-in-out infinite;
}
@keyframes mi-tr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* Flex header (replaces the old float:right refresh) */
.mi-tr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mi-tr-title { display: inline-flex; align-items: center; }
.mi-tr-head-right { display: inline-flex; align-items: center; gap: 10px; }
.mi-tr-updated { font-size: 10.5px; font-weight: 600; color: #8A9999; text-transform: none; letter-spacing: 0; }
.mi-tr-refresh {
  border: none; background: transparent; cursor: pointer; color: #0FB8A2;
  font-size: 17px; line-height: 1; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.mi-tr-refresh:hover { background: rgba(15,184,162,.12); }
.mi-tr-refresh:disabled { cursor: default; }
.mi-tr-refresh-spin { animation: mi-tr-spin .8s linear infinite; }
@keyframes mi-tr-spin { to { transform: rotate(360deg); } }

/* Segmented control */
.mi-tr-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.mi-tr-tab {
  border: 1px solid rgba(15,58,58,.14); background: #fff; color: #4A5E5E;
  border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.mi-tr-tab:hover { background: #F0FAF8; border-color: rgba(15,184,162,.4); }
.mi-tr-tab:active { transform: translateY(1px); }
.mi-tr-tab:focus-visible { outline: 2px solid #0FB8A2; outline-offset: 2px; }
.mi-tr-tab.mi-tr-tab-on {
  background: #0FB8A2; color: #fff; border-color: #0FB8A2;
  font-weight: 700; box-shadow: 0 2px 8px rgba(15,184,162,.35);
}
.mi-tr-tab-count {
  font-size: 10.5px; font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 999px;
  background: rgba(15,58,58,.08); color: #4A5E5E;
}
.mi-tr-tab.mi-tr-tab-on .mi-tr-tab-count { background: rgba(255,255,255,.25); color: #fff; }
.mi-tr-source { margin-left: auto; font-size: 10px; color: #aab6b6; font-style: italic; }

/* Loading skeleton */
.mi-tr-skel { pointer-events: none; }
.mi-tr-skel-thumb { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 10px; }

.mi-tr-video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
}
.mi-tr-video { text-decoration: none; color: inherit; display: block; transition: transform .18s ease; }
.mi-tr-video:hover { transform: translateY(-3px); }
.mi-tr-thumb-wrap { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; background: #e7eeee; transition: box-shadow .18s ease; }
.mi-tr-video:hover .mi-tr-thumb-wrap { box-shadow: 0 8px 20px rgba(15,23,42,.18); }
.mi-tr-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.mi-tr-video:hover .mi-tr-thumb { transform: scale(1.05); }
.mi-tr-rank {
  position: absolute; top: 6px; left: 6px; background: rgba(15,23,42,.82); color: #fff;
  font-size: 11px; font-weight: 800; border-radius: 6px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.mi-tr-len {
  position: absolute; bottom: 6px; right: 6px; background: rgba(15,23,42,.85); color: #fff;
  font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 5px;
}
.mi-tr-vtitle {
  font-size: 12.5px; font-weight: 600; color: #0f0f0f; margin-top: 7px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mi-tr-vmeta { font-size: 11.5px; color: #606060; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-tr-vstats { font-size: 11px; color: #8A9999; margin-top: 1px; }

.mi-tr-channel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.mi-tr-channel {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  padding: 9px 11px; border: 1px solid rgba(15,58,58,.09); border-radius: 10px; background: #F8FBFA;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.mi-tr-channel:hover {
  background: #E8F5F4; border-color: rgba(15,184,162,.25);
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,58,58,.10);
}
.mi-tr-channel .mi-ch-avatar, .mi-tr-channel .mi-ch-thumb { box-shadow: 0 0 0 2px rgba(15,184,162,.18); }
.mi-tr-cinfo { display: flex; flex-direction: column; min-width: 0; }
.mi-tr-cname { font-size: 12.5px; font-weight: 600; color: #2E3E3E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-tr-cmeta { font-size: 10.5px; color: #8A9999; }

/* Trending pager (Prev / Page X of Y / Next) */
.mi-tr-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.mi-tr-pager-btn {
  border: 1px solid rgba(15,58,58,.14); background: #fff; color: #0E7C70;
  border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.mi-tr-pager-btn:hover:not(:disabled) { background: #0FB8A2; color: #fff; border-color: #0FB8A2; box-shadow: 0 2px 8px rgba(15,184,162,.3); }
.mi-tr-pager-btn:active:not(:disabled) { transform: translateY(1px); }
.mi-tr-pager-btn:disabled { opacity: .4; cursor: default; }
.mi-tr-pager-info { font-size: 12px; font-weight: 600; color: #4A5E5E; min-width: 92px; text-align: center; }

/* ════════════════════════════════════════════════════════════════════════
   Market Context — port refinements (top-channels alignment + full-width,
   page/section loaders). Scoped to .mi-tch-card so the shared mi-ch-*/mi-tch-*
   classes used by the Trending channel list are untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Top Channels table — header now mirrors the row geometry so columns align,
   and the table is sized for its full-width slot under YouTube Inventory. */
.mi-tch-card .mi-top-channels-head {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-start;                 /* override stale space-between */
  padding: 0 10px 9px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(15,58,58,.08);
}
.mi-tch-h-rank  { width: 24px; flex-shrink: 0; }
.mi-tch-h-thumb { width: 32px; flex-shrink: 0; }
.mi-tch-h-name  { flex: 1; min-width: 0; }
.mi-tch-h-name, .mi-tch-h-stat {
  font-size: 10px; color: #8A9999; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.mi-tch-h-stat  { width: 110px; flex-shrink: 0; text-align: right; }

.mi-tch-card .mi-ch-scroll { max-height: 460px; }
.mi-tch-card .mi-tch-row   { gap: 12px; padding: 10px; }
.mi-tch-card .mi-ch-rank   { width: 24px; font-size: 12px; text-align: center; }
.mi-tch-card .mi-ch-thumb,
.mi-tch-card .mi-ch-avatar { width: 32px; height: 32px; }
.mi-tch-card .mi-ch-avatar { font-size: 12px; }
.mi-tch-card .mi-tch-name  { font-size: 13px; }
.mi-tch-card .mi-tch-meta  { font-size: 10.5px; }
.mi-tch-card .mi-tch-stat  { width: 110px; font-size: 13px; }

/* Page-level loader (markup existed but was unstyled → no visible loader). */
.mi-page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 60vh; text-align: center;
}
.mi-page-loading-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(15,184,162,.18); border-top-color: #0FB8A2;
  animation: mi-tr-spin .8s linear infinite;
}
.mi-page-loading-name { font-size: 22px; font-weight: 800; color: #0F3A3A; }
.mi-page-loading-sub  { font-size: 13px; color: #8A9999; }
/* (.mi-section-loading already renders a shimmer skeleton — no extra styling needed.) */

/* Subscriber Tiers + Inventory Breakdown are meant to span the full 2-col
   charts grid (the class existed in markup but was never styled, so they were
   squished into one half-width column → cramped bars/donuts). */
.mi-chart-box-wide { grid-column: 1 / -1; }

/* Inventory Breakdown — lay the 3 donuts (brand-safety / AI-tagged / content-
   type) in a row inside the now full-width card (mi-donut-trio was unstyled,
   so the cells stacked vertically). */
.mi-donut-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.mi-donut-cell { display: flex; flex-direction: column; gap: 8px; }
.mi-donut-cell-lbl {
  font-size: 11px; font-weight: 700; color: #4A5E5E;
  text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 760px) { .mi-donut-trio { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   Campaign Audit — ported from buckets-merge-approval-workflow.
   ca-*/cu-*/cbw-*/clp-*/cl-pill/qc-seg/bd-kpi/appr-/db-hero/cd-miniseg families.
   ════════════════════════════════════════════════════════════════════ */
/* ── Status segmented control ─────────────────────────────────────────────── */
.qc-seg { display:inline-flex; flex-wrap:wrap; border:1px solid #e1e7ea; border-radius:10px; overflow:hidden; background:#fff; }
.qc-seg-btn { border:0; background:#fff; padding:7px 13px; font-size:12.5px; font-weight:600; color:#56707e;
  border-right:1px solid #eef2f4; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.qc-seg-btn:last-child { border-right:0; }
.qc-seg-btn:hover { background:#f5fafa; }
.qc-seg-btn.on { background:#0aa28e; color:#fff; }
/* Replace the browser's default blue focus ring with a teal-themed one so a
   clicked/focused status reads as teal (matches the active "All" pill). */
.qc-seg-btn:focus { outline:none; }
.qc-seg-btn:focus-visible { outline:none; box-shadow: inset 0 0 0 2px rgba(10,162,142,.45); }
.qc-seg-n { font-size:10px; font-weight:700; background:rgba(0,0,0,.06); color:inherit; border-radius:999px; padding:0 6px; }
.qc-seg-btn.on .qc-seg-n { background:rgba(255,255,255,.25); }
/* Transition on active state for smooth switching */
.qc-seg-btn {
  transition: background .15s ease, color .15s ease;
  /* prevent wrapping inside each button */
  white-space: nowrap;
}
/* Give the seg control a subtle shadow so it reads as a control surface */
.qc-seg {
  box-shadow: 0 1px 4px rgba(15,58,58,.07);
}
/* ── Teal button utilities (theme-aligned replacements for btn-success / btn-outline-primary) */
.btn-teal {
  background: #0FB8A2; border-color: #0FB8A2; color: #fff;
}
.btn-teal:hover, .btn-teal:focus {
  background: #088E89; border-color: #088E89; color: #fff;
}
.btn-teal:disabled, .btn-teal.disabled {
  background: #0FB8A2; border-color: #0FB8A2; color: #fff; opacity: .55;
}
.btn-outline-teal {
  background: transparent; border-color: #0FB8A2; color: #0FB8A2;
}
.btn-outline-teal:hover, .btn-outline-teal:focus {
  background: #E8F5F4; border-color: #088E89; color: #088E89;
}
.btn-outline-teal:disabled, .btn-outline-teal.disabled {
  opacity: .55;
}
/* ── Approval card list (replaces table) ─────────────────────────────────
   Each approval is a rich card row. Works at any panel width.
*/
.appr-list { list-style: none; margin: 0; padding: 0; }
.appr-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  cursor: pointer; position: relative;
  transition: background 0.12s ease;
}
.appr-card:hover { background: var(--surface-soft); }
.appr-card.selected {
  background: rgba(15, 184, 162, 0.06);
  box-shadow: inset 3px 0 0 var(--primary);
}
.appr-card:last-child { border-bottom: 0; }
/* Left accent icon */
.appr-card__icon {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--info-soft); color: var(--info);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: 1px solid rgba(31,111,235,0.15);
}
.appr-card__icon--merge { background: var(--primary-soft); color: var(--primary-deep); border-color: rgba(15,184,162,0.2); }
/* Main body */
.appr-card__body {
  flex: 1; min-width: 0;
}
.appr-card__title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.appr-card__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--muted);
}
.appr-card__meta-sep { color: var(--border-strong); user-select: none; }
/* Right-side status + action */
.appr-card__right {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px;
}
.appr-card__time { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* Requester */
.appr-requester { display: flex; align-items: center; gap: 6px; }
.appr-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 10px; flex-shrink: 0;
  border: 1px solid var(--border); overflow: hidden;
  text-transform: uppercase;
}
.appr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.appr-requester__name {
  font-weight: 500; color: var(--muted-strong); font-size: 12px;
  white-space: nowrap;
}
/* Requester cell */
.appr-requester { display: flex; align-items: center; gap: 8px; min-width: 0; }
.appr-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0;
  border: 1px solid var(--border); overflow: hidden;
  text-transform: uppercase;
}
.appr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.appr-requester__name {
  font-weight: 600; color: var(--text); font-size: 13px;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 110px;
}
/* Detail panel requester email — truncate cleanly */
.approval-detail .appr-requester__name { max-width: none; }
.approval-detail .appr-requester .appr-req-email {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 160px;
}
/* Subject cell */
.appr-subject { min-width: 0; }
.appr-subject__title {
  font-weight: 600; color: var(--text); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appr-subject__sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Status chip */
.appr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  border: 1px solid; line-height: 1.55;
}
.appr-chip i { font-size: 11px; }
.appr-chip--type     { background: var(--info-soft);    color: var(--info);    border-color: rgba(31,111,235,0.25); }
.appr-chip--pending  { background: var(--warning-soft); color: var(--warning); border-color: rgba(230,158,37,0.3); }
.appr-chip--approved { background: var(--success-soft); color: var(--success); border-color: rgba(15,169,104,0.25); }
.appr-chip--rejected { background: #FFEAEA;             color: #DC3545;        border-color: rgba(220,53,69,0.25); }
/* ── Campaign Audit sidebar disabled state ───────────────────── */
.sidebar-link--disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Campaign Audit — editable cells */
.editable-cell { cursor: pointer; border-radius: 3px; padding: 2px 4px; transition: background 0.12s; }
.editable-cell:hover { background: var(--primary-soft); }
/* ── Campaign Audit (Pinnacle Teal + React frontend structure) ──────── */

/* Breadcrumb */
.ca-breadcrumb { font-size: 13px; color: var(--muted); }
.ca-breadcrumb a { color: var(--muted-strong); font-weight: 500; }
.ca-breadcrumb a:hover { color: var(--primary-deep); }
/* Detail header */
.ca-detail-header h4 { color: var(--text); }
.ca-meta-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.ca-meta-sep { color: var(--border-strong); }
.ca-mono-id {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  background: var(--primary-soft); color: var(--primary-deep);
  padding: 2px 6px; border-radius: 4px;
}
.ca-chip-type {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--info-soft); color: var(--info);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid rgba(31,111,235,0.2);
}
/* Status badge (processing/idle/error) */
.ca-status-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid;
}
.ca-status-idle       { background: var(--success-soft); color: var(--success); border-color: rgba(15,169,104,0.25); }
.ca-status-processing { background: var(--warning-soft); color: var(--warning); border-color: rgba(230,158,37,0.3); }
.ca-status-error      { background: #FFEAEA; color: #DC3545; border-color: rgba(220,53,69,0.25); }
/* KPI cards */
.ca-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ca-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ca-kpi:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }
.ca-kpi__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.ca-kpi__icon--neutral { background: var(--surface-soft); color: var(--muted-strong); border: 1px solid var(--border); }
.ca-kpi__icon--info    { background: var(--info-soft); color: var(--info); }
.ca-kpi__icon--success { background: var(--success-soft); color: var(--success); }
.ca-kpi__icon--warning { background: var(--warning-soft); color: var(--warning); }
.ca-kpi__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
}
.ca-kpi__value {
  font-size: 22px; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.ca-kpi__sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Sub-nav buttons */
.ca-subnav {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-soft); border-radius: 10px;
}
.ca-subnav-btn {
  background: transparent; border: 0;
  color: var(--muted-strong); padding: 6px 12px;
  border-radius: 7px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.ca-subnav-btn:hover { color: var(--text); }
.ca-subnav-btn.active {
  background: var(--surface-solid); color: var(--primary-deep);
  box-shadow: 0 1px 3px rgba(11,32,32,0.08);
}
/* Filter row */
.ca-filter-grid {
  display: grid;
  grid-template-columns: 180px 220px 160px 160px auto;
  gap: 10px; align-items: end;
}
@media (max-width: 900px) { .ca-filter-grid { grid-template-columns: 1fr 1fr; } }
.ca-filter-label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
/* Bulk action bar */
.ca-bulk-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--primary-soft); border: 1px solid rgba(15,184,162,0.3);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 10px;
  color: var(--primary-deep);
}
/* Audit table — rich layout */
.ca-audit-table-wrap { overflow: hidden; }
.ca-audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ca-audit-table thead th {
  background: var(--surface-soft);
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.ca-th-check { width: 36px; }
.ca-th-placement { min-width: 280px; }
.ca-audit-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text);
}
.ca-audit-table tbody tr { transition: background 0.1s; }
.ca-audit-table tbody tr:hover { background: var(--surface-soft); }
.ca-audit-table tbody tr.ca-row-selected { background: var(--primary-soft); }
.ca-audit-table tbody tr:last-child td { border-bottom: 0; }
/* Placement cell */
.ca-placement-cell {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.ca-thumb {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover;
  background: var(--surface-soft); border: 1px solid var(--border);
}
.ca-thumb--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px;
}
.ca-placement-meta { min-width: 0; flex: 1; }
.ca-placement-title {
  display: block; font-weight: 600; color: var(--text);
  font-size: 13px; line-height: 1.2;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.ca-placement-title:hover { color: var(--primary-deep); text-decoration: underline; }
.ca-placement-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.ca-placement-id {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  color: var(--muted); background: transparent;
}
/* Mini chips */
.ca-chip-mini {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 4px;
  border: 1px solid;
}
.ca-chip-mini--type {
  background: var(--info-soft); color: var(--info);
  border-color: rgba(31,111,235,0.2); text-transform: capitalize;
}
.ca-chip-mini--tier {
  background: var(--primary-soft); color: var(--primary-deep);
  border-color: rgba(15,184,162,0.2);
}
/* Soft cell text (segment, language, etc.) */
.ca-cell-soft { color: var(--muted-strong); }
/* Right-aligned numeric */
.ca-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--text);
}
/* Status pills (Safe / Unsafe / Aligned / Misaligned / Off-target) */
.ca-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.ca-pill i { font-size: 10px; }
.ca-pill--safe       { background: var(--success-soft); color: var(--success); border-color: rgba(15,169,104,0.3); }
.ca-pill--aligned    { background: var(--success-soft); color: var(--success); border-color: rgba(15,169,104,0.3); }
.ca-pill--unsafe     { background: #FFEAEA; color: #DC3545; border-color: rgba(220,53,69,0.3); }
.ca-pill--misaligned { background: var(--warning-soft); color: var(--warning); border-color: rgba(230,158,37,0.35); }
/* Empty state */
.ca-empty { color: var(--muted); font-size: 13px; }
.ca-empty i {
  font-size: 36px; opacity: 0.35;
  color: var(--primary); display: block; margin-bottom: 8px;
}
/* Outline-teal button helper (used by Export CSV / BQ Sync) */
.btn-outline-teal {
  border: 1px solid var(--primary); color: var(--primary-deep);
  background: transparent;
}
.btn-outline-teal:hover {
  background: var(--primary-soft); color: var(--primary-deep);
  border-color: var(--primary);
}
/* ── Campaign Overview table ─────────────────────────────────────────── */
.ca-overview-table { font-size: 13px; }
.ca-overview-table thead th {
  background: var(--surface-soft); color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.ca-overview-table tbody td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ca-overview-table tbody tr:last-child td { border-bottom: 0; }
.ca-overview-table tbody tr:hover { background: var(--surface-soft); }
.ca-brand-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff; flex-shrink: 0;
}
/* ── Campaign Upload page ────────────────────────────────────────────── */
.ca-upload-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary-deep);
  font-size: 18px; border: 1px solid rgba(15,184,162,0.25);
}
.ca-upload-icon--warning {
  background: var(--warning-soft); color: var(--warning);
  border-color: rgba(230,158,37,0.25);
}
.ca-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 36px 24px; text-align: center;
  background: var(--surface-soft); cursor: pointer;
  transition: all 0.15s ease;
}
.ca-dropzone:hover { border-color: var(--primary); background: var(--primary-soft); }
.ca-dropzone--over { border-color: var(--primary); background: var(--primary-soft); transform: scale(1.005); }
.ca-dropzone--filled { border-style: solid; border-color: var(--primary); background: var(--primary-soft); }
.ca-dropzone-icon {
  width: 56px; height: 56px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-solid); color: var(--primary-deep);
  border-radius: 14px; font-size: 26px;
  box-shadow: var(--shadow-soft);
}
.ca-dropzone-icon--success {
  background: var(--success-soft); color: var(--success);
}
/* Stepper */
.ca-stepper { display: flex; flex-direction: column; gap: 10px; }
.ca-stepper-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--surface-soft);
  border-left: 3px solid var(--border-strong);
}
.ca-stepper-row--running { border-left-color: var(--primary); background: var(--primary-soft); }
.ca-stepper-row--done    { border-left-color: var(--success); }
.ca-stepper-row--error   { border-left-color: #DC3545; background: #FFEAEA; }
.ca-stepper-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-solid); border: 1px solid var(--border-strong);
  color: var(--muted);
}
.ca-stepper-row--running .ca-stepper-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.ca-stepper-row--done    .ca-stepper-dot { background: var(--success); border-color: var(--success); color: #fff; }
.ca-stepper-row--error   .ca-stepper-dot { background: #DC3545; border-color: #DC3545; color: #fff; }
.ca-stepper-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ca-stepper-msg  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ca-stepper-err  { font-size: 11px; color: #DC3545; margin-top: 2px; font-weight: 500; }
/* ── KPI card "Top Geos" variant ─────────────────────────────────────── */
.ca-kpi__topgeos { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.ca-kpi__topgeo-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--text); font-weight: 600;
}
.ca-kpi__topgeo-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ca-kpi__topgeo-count {
  background: var(--surface-soft); color: var(--muted-strong);
  padding: 0 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; flex-shrink: 0;
}
/* ── Upload page v2 ──────────────────────────────────────────────────── */

/* Step indicator strip at top of card */
.ca-upload-steps {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.ca-upload-step {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted);
  font-size: 12.5px; font-weight: 600;
}
.ca-upload-step__num {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-solid);
  border: 1.5px solid var(--border-strong);
  color: var(--muted);
  font-size: 12px; font-weight: 700;
}
.ca-upload-step__label { color: var(--muted-strong); }
.ca-upload-step__sep {
  flex: 1; height: 2px;
  background: var(--border);
  max-width: 80px; border-radius: 999px;
}
.ca-upload-step--active .ca-upload-step__num {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.ca-upload-step--active .ca-upload-step__label { color: var(--primary-deep); }
.ca-upload-step--done .ca-upload-step__num {
  background: var(--success); color: #fff; border-color: var(--success);
}
.ca-upload-step--done .ca-upload-step__label { color: var(--success); }
/* Field label (larger, more deliberate) */
.ca-upload-field-label {
  display: block; font-weight: 700; font-size: 13.5px;
  color: var(--text); margin-bottom: 8px;
}
/* Input wrapper with inline validation icon */
.ca-upload-input-wrap {
  position: relative;
}
.ca-upload-input-wrap input { padding-right: 36px; }
.ca-upload-input-wrap--valid input {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(15,169,104,0.10);
}
.ca-upload-input-wrap--invalid input {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px rgba(230,158,37,0.10);
}
.ca-upload-check, .ca-upload-warn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 16px;
}
.ca-upload-check { color: var(--success); }
.ca-upload-warn  { color: var(--warning); }
.ca-upload-help {
  font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5;
}
/* Drop zone v2 — bigger, more polished */
.ca-dropzone-v2 {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ca-dropzone-v2:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.ca-dropzone-v2--over {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: scale(1.005);
  box-shadow: 0 0 0 6px rgba(15,184,162,0.08);
}
.ca-dropzone-v2__inner {
  padding: 36px 24px; text-align: center;
}
.ca-dropzone-v2__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--surface-solid);
  color: var(--primary-deep);
  border-radius: 16px;
  font-size: 30px; margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.ca-dropzone-v2__title {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.ca-dropzone-v2__sub {
  font-size: 13px; color: var(--muted); margin-top: 4px;
}
.ca-dropzone-v2__browse {
  color: var(--primary-deep); font-weight: 600; text-decoration: underline;
}
.ca-dropzone-v2__hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.ca-dropzone-v2__chip {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--muted-strong);
  padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
}
/* File preview after drop */
.ca-file-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
}
.ca-file-preview__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface-solid); color: var(--primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.ca-file-preview__meta { flex: 1; min-width: 0; }
.ca-file-preview__name {
  font-weight: 600; color: var(--text); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-file-preview__sub {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--muted); margin-top: 4px;
}
.ca-file-preview__check {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--success); font-weight: 600;
}
.ca-file-preview__remove {
  padding: 6px 8px !important;
  border-radius: 6px;
}
/* Action button row */
.ca-upload-actions {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 18px !important;
}
/* "What happens next" pipeline preview */
.ca-pipeline-preview {
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.ca-pipeline-preview::before {
  content: ""; position: absolute;
  left: 13px; top: 12px; bottom: 12px;
  width: 2px; background: var(--border);
}
.ca-pipeline-step {
  display: flex; align-items: flex-start; gap: 12px;
  position: relative;
}
.ca-pipeline-step__num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-solid);
  border: 1.5px solid var(--border-strong);
  color: var(--primary-deep);
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; position: relative; z-index: 1;
}
.ca-pipeline-step__name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ca-pipeline-step__desc {
  font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4;
}
/* CSV format reference */
.ca-format-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.ca-format-row:last-child { border-bottom: 0; }
.ca-format-row code {
  background: var(--primary-soft); color: var(--primary-deep);
  padding: 2px 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600;
  min-width: 130px; display: inline-block;
}
.ca-format-row span { color: var(--muted-strong); }
.ca-format-row span code {
  min-width: 0; padding: 1px 6px; font-size: 10.5px;
  background: var(--surface-soft); color: var(--text);
}
/* Neutral icon variant */
.ca-upload-icon--neutral {
  background: var(--surface-soft); color: var(--muted-strong);
  border-color: var(--border);
}
/* ══════════════════════════════════════════════════════════════════════
   Campaign Detail v2 — industry-level layout
   ══════════════════════════════════════════════════════════════════════ */

.ca-detail-page,
.ca-log-page {
  padding-bottom: 96px;   /* breathing room above sticky save bar */
}
.ca-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4px;
}
/* Sync flash banner */
.ca-sync-flash {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, var(--primary-soft), rgba(15,184,162,0.06));
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
  animation: ca-flash-in 200ms ease-out;
}
.ca-sync-flash > .bi { color: var(--success); font-size: 18px; margin-top: 2px; }
.ca-sync-flash__body { flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.ca-sync-flash__chip {
  display: inline-block; margin-left: 6px;
  background: var(--surface-solid); color: var(--primary-deep);
  border: 1px solid var(--primary);
  padding: 1px 8px; border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
}
.ca-sync-flash__close {
  background: transparent; border: 0; color: var(--muted);
  padding: 4px 6px; cursor: pointer; border-radius: 4px;
}
.ca-sync-flash__close:hover { background: var(--surface-soft); color: var(--text); }
/* Breadcrumb */
.ca-breadcrumb-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin-bottom: 14px;
}
.ca-breadcrumb-link {
  color: var(--muted-strong); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 4px;
  transition: background 0.15s ease;
}
.ca-breadcrumb-link:hover { background: var(--surface-soft); color: var(--primary-deep); }
.ca-breadcrumb-sep { color: var(--muted); }
.ca-breadcrumb-current { color: var(--text); font-weight: 600; }
/* Hero header */
.ca-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}
.ca-hero__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.ca-hero__title-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ca-hero__title {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin: 0; letter-spacing: -0.01em;
}
.ca-hero__actions {
  display: flex; align-items: center; gap: 8px;
}
.ca-hero__meta {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 12px;
  color: var(--muted-strong); font-size: 12.5px;
}
.ca-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.ca-meta-item .bi { opacity: 0.6; }
/* Sub-nav bar */
.ca-subnav-bar {
  margin: 16px 0 12px;
}
/* Toolbar */
.ca-toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
}
.ca-toolbar__search {
  position: relative;
  flex: 0 0 280px; max-width: 320px;
}
.ca-toolbar__search .bi {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px;
}
.ca-toolbar__search input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  font-size: 13px;
  color: var(--text);
  transition: all 0.15s ease;
}
.ca-toolbar__search input:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  background: var(--surface-solid);
}
.ca-toolbar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-solid);
  color: var(--text);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ca-toolbar__btn:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
  background: var(--primary-soft);
}
.ca-toolbar__btn--active {
  border-color: var(--primary);
  color: var(--primary-deep);
  background: var(--primary-soft);
}
.ca-toolbar__btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ca-toolbar__btn--primary:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: #fff;
}
.ca-toolbar__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  font-size: 10.5px; font-weight: 700;
  margin-left: 2px;
}
.ca-toolbar__spacer { flex: 1; }
.ca-toolbar__meta { font-size: 12px; color: var(--text); white-space: nowrap; }
.ca-toolbar__meta-soft { color: var(--muted); }
/* Filter panel */
.ca-filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
  animation: ca-flash-in 180ms ease-out;
}
.ca-filter-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 14px;
}
.ca-filter-field {
  display: flex; flex-direction: column; gap: 4px;
}
.ca-filter-field label {
  font-size: 10.5px; font-weight: 700;
  color: var(--muted-strong);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ca-filter-field input,
.ca-filter-field select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-soft);
  font-size: 12.5px;
  color: var(--text);
}
.ca-filter-field input:focus,
.ca-filter-field select:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.ca-filter-panel__actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* Table card */
.ca-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.ca-table-scroll { overflow-x: auto; }
.ca-audit-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 12.5px;
}
.ca-audit-table thead {
  background: var(--surface-soft);
  position: sticky; top: 0;
}
.ca-audit-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-strong);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.ca-audit-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ca-audit-table tbody tr:last-child td { border-bottom: 0; }
.ca-audit-table tbody tr:hover { background: var(--primary-soft); }
.ca-th-sortable { cursor: pointer; user-select: none; }
.ca-th-sortable:hover { color: var(--primary-deep); }
.ca-th-sortable .bi { margin-left: 4px; opacity: 0.6; font-size: 10px; }
.ca-th-placement { min-width: 320px; }
.ca-row-dirty {
  background: rgba(15,184,162,0.04) !important;
  box-shadow: inset 3px 0 0 0 var(--primary);
}
/* Inline edit input */
.ca-cell-input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-solid);
  font-size: 12.5px;
  color: var(--text);
  transition: all 0.12s ease;
}
.ca-cell-input:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.ca-cell-input--dirty {
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 600;
}
/* Boolean toggle (Safe/Unsafe etc.) */
.ca-bool-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-solid);
}
.ca-bool-toggle button {
  border: 0; background: transparent;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  color: var(--muted-strong);
  cursor: pointer;
  transition: all 0.12s ease;
}
.ca-bool-toggle button + button { border-left: 1px solid var(--border); }
.ca-bool-toggle button:hover { background: var(--surface-soft); }
.ca-bool-toggle__btn--on-safe   { background: rgba(15,169,104,0.14) !important; color: var(--success) !important; }
.ca-bool-toggle__btn--on-danger { background: rgba(217,72,72,0.14)  !important; color: var(--danger)  !important; }
.ca-bool-toggle__btn--on-warn   { background: rgba(230,158,37,0.14) !important; color: var(--warning) !important; }
.ca-bool-toggle--dirty { box-shadow: 0 0 0 2px var(--primary-soft); }
/* Pager */
.ca-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.ca-pager__meta { font-size: 12px; color: var(--muted-strong); }
.ca-pager__meta strong { color: var(--text); }
.ca-pager__nav { display: flex; gap: 4px; }
.ca-pager__btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-solid);
  color: var(--muted-strong);
  cursor: pointer;
  transition: all 0.12s ease;
}
.ca-pager__btn:hover:not(:disabled) {
  border-color: var(--primary); color: var(--primary-deep);
  background: var(--primary-soft);
}
.ca-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Save bar (sticky bottom) */
.ca-save-bar {
  position: fixed; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(15,184,162,0.18), 0 4px 12px rgba(0,0,0,0.08);
  z-index: 60;
  font-size: 13px;
  animation: ca-flash-in 180ms ease-out;
}
.ca-save-bar > .bi { color: var(--primary-deep); }
.ca-save-bar strong { color: var(--primary-deep); font-weight: 700; }
.ca-save-bar__discard,
.ca-save-bar__save {
  border: 0; padding: 6px 14px;
  border-radius: 5px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.ca-save-bar__discard {
  background: transparent; color: var(--muted-strong);
}
.ca-save-bar__discard:hover { background: var(--surface-soft); color: var(--danger); }
.ca-save-bar__save {
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.ca-save-bar__save:hover:not(:disabled) { background: var(--primary-deep); }
.ca-save-bar__save:disabled { opacity: 0.6; cursor: not-allowed; }
/* Modal */
.ca-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,33,38,0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: ca-flash-in 150ms ease-out;
}
.ca-modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  z-index: 101;
  display: flex; flex-direction: column;
  animation: ca-flash-in 180ms ease-out;
}
.ca-modal__header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.ca-modal__header .bi { color: var(--primary); font-size: 18px; }
.ca-modal__header h3 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; }
.ca-modal__close {
  background: transparent; border: 0;
  width: 30px; height: 30px;
  border-radius: 5px;
  color: var(--muted); cursor: pointer;
}
.ca-modal__close:hover { background: var(--surface-soft); color: var(--text); }
.ca-modal__body {
  padding: 16px 18px;
  overflow-y: auto;
}
.ca-modal__lead {
  font-size: 12.5px; color: var(--muted-strong); margin: 0 0 16px; line-height: 1.5;
}
.ca-modal__footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ca-bulk-section { margin-bottom: 16px; }
.ca-bulk-section__title {
  font-size: 11px; font-weight: 700;
  color: var(--primary-deep);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.ca-bulk-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ca-bulk-row label {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.ca-bulk-row input,
.ca-bulk-row select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-solid);
  font-size: 12.5px;
  color: var(--text);
}
.ca-bulk-row input:focus,
.ca-bulk-row select:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.ca-bulk-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--primary-soft);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--primary-deep);
}
.ca-bulk-preview .bi { font-size: 14px; }
/* ══════════════════════════════════════════════════════════════════════
   Campaign Log v2
   ══════════════════════════════════════════════════════════════════════ */

.ca-log-hero {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
  padding: 4px 0;
}
.ca-log-hero__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-soft), rgba(15,184,162,0.15));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary-deep);
  font-size: 22px;
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-soft);
}
.ca-log-hero__text { flex: 1; }
.ca-log-hero__text h1 {
  font-size: 22px; font-weight: 700; margin: 0;
  color: var(--text); letter-spacing: -0.01em;
}
.ca-log-hero__text p {
  margin: 2px 0 0; font-size: 13px; color: var(--muted-strong);
}
.ca-log-hero__actions { display: flex; gap: 8px; }
.ca-log-filters {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.ca-log-picker { display: flex; flex-direction: column; gap: 4px; }
.ca-log-picker__label {
  font-size: 10.5px; font-weight: 700;
  color: var(--muted-strong);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ca-log-picker__control {
  position: relative;
  display: flex; align-items: center;
}
.ca-log-picker__control .bi {
  position: absolute; left: 9px; color: var(--muted); font-size: 13px;
  pointer-events: none;
}
.ca-log-picker__control select {
  width: 240px; height: 32px;
  padding: 0 30px 0 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  font-size: 13px; color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2370858a'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}
.ca-log-picker__clear {
  position: absolute; right: 30px;
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer; font-size: 14px;
  padding: 2px 4px;
}
.ca-log-search {
  position: relative; flex: 0 0 260px;
}
.ca-log-search .bi {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px;
}
.ca-log-search input {
  width: 100%; height: 32px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  font-size: 13px; color: var(--text);
}
.ca-log-search input:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.ca-log-action-pills {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-solid);
}
.ca-log-action-pills__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 0; background: transparent;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted-strong);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ca-log-action-pills__btn + .ca-log-action-pills__btn { border-left: 1px solid var(--border); }
.ca-log-action-pills__btn:hover { background: var(--surface-soft); color: var(--text); }
.ca-log-action-pills__btn--active {
  background: var(--primary) !important;
  color: #fff !important;
}
.ca-log-action-pills__btn--active .ca-log-action-pills__count {
  background: rgba(255,255,255,0.25); color: #fff;
}
.ca-log-action-pills__count {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px; height: 16px;
  background: var(--surface-soft); color: var(--muted-strong);
  border-radius: 8px;
  font-size: 10.5px; font-weight: 700;
}
.ca-log-filters__spacer { flex: 1; }
.ca-log-filters__count { font-size: 12px; color: var(--text); white-space: nowrap; }
.ca-log-filters__count-soft { color: var(--muted); }
/* Loading skeletons */
.ca-log-loading {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ca-log-skel {
  height: 44px;
  background: linear-gradient(90deg, var(--surface-soft) 0%, var(--surface-solid) 50%, var(--surface-soft) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: ca-skel-pulse 1.4s ease-in-out infinite;
}
.ca-log-empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 48px 24px !important;
}
.ca-empty__title { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 8px; }
.ca-empty__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Log table */
.ca-log-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.ca-log-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.ca-log-table thead {
  background: var(--surface-soft);
}
.ca-log-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-strong);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.ca-log-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ca-log-table tbody tr:last-child td { border-bottom: 0; }
.ca-log-table tbody tr:hover { background: var(--primary-soft); }
.ca-log-th-time   { width: 110px; }
.ca-log-th-action { width: 140px; }
.ca-log-th-rows   { width: 90px; text-align: right; }
.ca-log-cell-time {
  font-size: 12px; color: var(--muted-strong);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ca-log-cell-campaign { max-width: 220px; }
.ca-log-campaign-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text); text-decoration: none;
  font-size: 12.5px;
}
.ca-log-campaign-link:hover { color: var(--primary-deep); }
.ca-log-campaign-link .bi { font-size: 10px; opacity: 0; transition: opacity 0.15s ease; }
.ca-log-campaign-link:hover .bi { opacity: 0.6; }
.ca-log-campaign-brand {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-log-campaign-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: var(--muted);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-log-cell-desc {
  color: var(--text); font-size: 12.5px;
  max-width: 480px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-log-cell-rows { text-align: right; }
.ca-log-rows-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-soft);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* Action pills */
.ca-log-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.ca-log-pill .bi { font-size: 11px; }
.ca-log-pill--blue   { background: rgba(56,128,255,0.12);  color: #1e5fcf;  box-shadow: inset 0 0 0 1px rgba(56,128,255,0.25);  }
.ca-log-pill--amber  { background: rgba(230,158,37,0.14);  color: #a86913;  box-shadow: inset 0 0 0 1px rgba(230,158,37,0.30);  }
.ca-log-pill--green  { background: rgba(15,169,104,0.14);  color: #0b6b45;  box-shadow: inset 0 0 0 1px rgba(15,169,104,0.30);  }
.ca-log-pill--gray   { background: var(--surface-soft);    color: var(--muted-strong); box-shadow: inset 0 0 0 1px var(--border); }
/* ══════════════════════════════════════════════════════════════════════
   Campaign Upload v2 — alignment & rhythm polish
   ══════════════════════════════════════════════════════════════════════ */

.ca-upload-page { padding-bottom: 32px; }
/* Page header (title row, aligned with container) */
.ca-page-header {
  margin: 4px 0 20px;
}
.ca-page-header__title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text); margin: 0 0 4px;
}
.ca-page-header__sub {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--muted-strong);
  max-width: 70ch;
}
/* Card base */
.ca-upload-card {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ca-upload-card .card-body { padding: 28px 28px !important; }
/* Tighten step indicator — narrower separators, balanced gaps */
.ca-upload-steps {
  padding: 14px 28px;
  gap: 14px;
}
.ca-upload-step { font-size: 13px; }
.ca-upload-step__num {
  width: 26px; height: 26px;
  font-size: 12.5px;
}
.ca-upload-step__sep {
  max-width: 56px;
  flex: 1 1 auto;
}
/* Field rhythm: equal vertical spacing between fields */
.ca-upload-card .mb-3,
.ca-upload-card .mb-4 { margin-bottom: 22px !important; }
.ca-upload-card .mb-3:last-of-type,
.ca-upload-card .mb-4:last-of-type { margin-bottom: 0 !important; }
.ca-upload-field-label {
  margin-bottom: 10px;
  font-size: 13px;
}
/* Inputs: more breathing height */
.ca-upload-input-wrap input,
.ca-upload-card .form-control {
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13.5px;
  border-color: var(--border);
  background: var(--surface-solid);
}
.ca-upload-input-wrap input { padding-right: 38px; }
.ca-upload-input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.ca-upload-help { margin-top: 8px; line-height: 1.5; }
/* Drop zone v2: balance internal rhythm */
.ca-dropzone-v2__inner { padding: 44px 24px 38px; }
.ca-dropzone-v2__icon {
  width: 60px; height: 60px;
  font-size: 28px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.ca-dropzone-v2__title { font-size: 15px; }
.ca-dropzone-v2__sub { margin-top: 6px; }
.ca-dropzone-v2__hint {
  margin-top: 18px; padding-top: 16px;
  display: flex; justify-content: center; gap: 8px;
  border-top: 1px dashed var(--border);
}
/* Actions row: balanced action bar */
.ca-upload-actions {
  margin-top: 10px !important;
  padding-top: 22px !important;
}
.ca-upload-actions .btn { height: 40px; padding: 0 18px; border-radius: 8px; font-size: 13px; }
.ca-upload-actions .btn-primary { min-width: 200px; font-weight: 600; }
/* ── Sidebar cards ───────────────────────────────────────────────── */

.ca-upload-page .col-xl-5 .app-card,
.ca-upload-page .col-lg-5 .app-card {
  border-radius: var(--radius-md);
}
.ca-upload-page .col-xl-5 .card-header,
.ca-upload-page .col-lg-5 .card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.ca-upload-page .col-xl-5 .card-body,
.ca-upload-page .col-lg-5 .card-body {
  padding: 18px 22px !important;
}
/* Sidebar icon badge — same as steps for visual rhythm */
.ca-upload-page .ca-upload-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary-soft), rgba(15,184,162,0.10));
  color: var(--primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  box-shadow: inset 0 0 0 1px var(--primary);
  flex-shrink: 0;
}
.ca-upload-page .card-header .fw-bold { font-size: 14px; }
/* Pipeline preview — tighter spacing between numbered steps */
.ca-pipeline-preview { gap: 10px; }
.ca-pipeline-preview::before {
  left: 12px; top: 14px; bottom: 14px;
}
.ca-pipeline-step__num {
  width: 26px; height: 26px;
  font-size: 11.5px;
}
.ca-pipeline-step__name { font-size: 13px; }
.ca-pipeline-step__desc {
  font-size: 12px; line-height: 1.5;
  margin-top: 1px;
}
/* CSV format: tighten row rhythm, consistent left alignment */
.ca-upload-page .col-xl-5 .app-card + .app-card,
.ca-upload-page .col-lg-5 .app-card + .app-card { margin-top: 16px !important; }
.ca-format-row {
  padding: 9px 0;
  font-size: 12.5px;
}
.ca-format-row code {
  min-width: 120px;
  padding: 3px 9px;
  font-size: 11px;
}
/* Make left/right columns reach the same baseline */
.ca-upload-page .row { align-items: stretch; }
.ca-upload-page .row > [class*="col-"] { display: flex; flex-direction: column; }
.ca-upload-page .row > [class*="col-"] > .app-card { width: 100%; }
.ca-upload-optional {
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
  margin-left: 4px;
}
.ca-upload-card .row.g-3 input[type="date"] {
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  width: 100%;
}
.ca-upload-card .row.g-3 input[type="date"]:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
/* KPI strip */
.bd-kpis { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.bd-kpi { flex:1; min-width:120px; background:#fff; border:1px solid #eef2f4; border-radius:12px; padding:11px 13px; }
.bd-kpi-n { font-size:20px; font-weight:800; color:#0a8d7c; line-height:1; }
.bd-kpi-k { font-size:10px; color:#9aa7b2; text-transform:uppercase; letter-spacing:.05em; margin-top:5px; }
/* Unified status pill family */
.cl-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:600; white-space:nowrap; }
.clp-green { background:#e7f7ed; color:#137a43; }
.clp-blue { background:#e7f0ff; color:#1d4ed8; }
.clp-indigo { background:#eaf0ff; color:#4338ca; }
.clp-amber { background:#fdf3d8; color:#9a6a00; }
.clp-red { background:#fde8e8; color:#c0322b; }
.clp-grey { background:#eef2f4; color:#8a9aa9; }
/* ===== Approvals redesign ===== */
.appr-head { margin-bottom: 14px; }
.appr-head h2 { font-size: 20px; font-weight: 800; color: var(--text, #0F3A3A); margin: 0; }
.appr-head p { font-size: 13px; color: var(--muted, #6c7884); margin: 3px 0 0; }
.appr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
/* KPI row */
/* KPI tiles — inside .appr-qc-wrap they act as header tabs, not floating cards */
.appr-qc-wrap { padding: 0 !important; overflow: hidden; }
.appr-qc-wrap .appr-kpi-row { display: flex; gap: 0; margin: 0; padding: 0; border-bottom: 1px solid #e8eef2; background: #f8fbfa; border-radius: 12px 12px 0 0; }
.appr-qc-wrap .appr-kpi-card { flex: 1; min-width: 0; border: none; border-right: 1px solid #e8eef2; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; background: transparent; padding: 14px 20px; cursor: pointer; display: flex; align-items: center; gap: 12px; user-select: none; transition: background .15s, border-bottom-color .15s; }
.appr-qc-wrap .appr-kpi-card:first-child { border-radius: 12px 0 0 0; }
.appr-qc-wrap .appr-kpi-card:last-child { border-right: none; border-radius: 0 12px 0 0; }
.appr-qc-wrap .appr-kpi-card:hover:not(.active) { background: #eef8f5; }
.appr-qc-wrap .appr-kpi-card.active { background: #0fb8a2; border-bottom-color: #088e79; border-right-color: #0ca899; }
.appr-qc-wrap .appr-kpi-card.active .appr-kpi-icon { background: rgba(255,255,255,.25) !important; color: #fff !important; }
.appr-qc-wrap .appr-kpi-card.active .appr-kpi-val { color: #fff; }
.appr-qc-wrap .appr-kpi-card.active .appr-kpi-lbl { color: rgba(255,255,255,.85); font-weight: 800; }
.appr-qc-empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px 24px; color: #8a9aa9; font-size: 14px; }
.appr-kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.appr-kpi-val { font-size: 22px; font-weight: 800; color: var(--text, #0f2d2d); line-height: 1; }
.appr-kpi-lbl { font-size: 11px; color: var(--muted, #6c7884); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Change diff chips */
.appr-diff-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.appr-diff-chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px; background: #fff3cd; color: #92610b;
  border: 1px solid #f5d68b; letter-spacing: .02em; text-transform: uppercase; }
/* Sortable table headers */
.appr-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.appr-th-sort:hover { color: #0fb8a2; }
.appr-th-sort .bi { font-size: 11px; opacity: 0.5; margin-left: 3px; }
.appr-th-sort:hover .bi { opacity: 1; color: #0fb8a2; }
.appr-toolbar .spacer { flex: 1; }
.appr-card2 { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--surface, #fff);
  border: 1px solid var(--border, #eef2f4); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.appr-card2:hover { box-shadow: 0 4px 16px rgba(15,58,58,.07); border-color: #dbe6e6; }
.appr-card2.sel { border-color: #0aa28e; box-shadow: 0 0 0 2px rgba(10,162,142,.12); }
.appr-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.appr-ic.merge { background: #e6f5f1; color: #0a7a6e; }
.appr-ic.qc { background: #e7f0ff; color: #1d4ed8; }
.appr-c-body { flex: 1; min-width: 0; }
.appr-c-title { font-weight: 600; color: #1f2d3d; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.appr-c-title .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appr-type-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; flex-shrink: 0; }
.appr-type-tag.merge { background: #e6f5f1; color: #0a7a6e; }
.appr-type-tag.qc { background: #e7f0ff; color: #1d4ed8; }
.appr-c-meta { font-size: 11.5px; color: #9aa7b2; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.appr-c-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.appr-ap { background: #0aa28e; color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.appr-ap:hover { background: #0b8d7c; }
.appr-ap.confirm { background: #9a6a00; }
.appr-ap:disabled { opacity: .55; cursor: not-allowed; }
.appr-rj { background: #fff; border: 1px solid #e3e8eb; color: #c0322b; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.appr-rj:hover { background: #fff5f5; }
.appr-rj:disabled { opacity: .55; cursor: not-allowed; }
.appr-backdrop { position: fixed; inset: 0; background: rgba(15,40,40,.28); z-index: 1040; }
.appr-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 92vw; background: #fff; z-index: 1050;
  box-shadow: -12px 0 40px rgba(15,58,58,.16); display: flex; flex-direction: column; overflow-y: auto; }
.appr-dr-head { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid #f1f4f6; }
.appr-dr-title { font-weight: 700; color: #1f2d3d; font-size: 14.5px; }
.appr-dr-x { margin-left: auto; background: none; border: none; color: #9aa7b2; font-size: 16px; cursor: pointer; }
.appr-dl { display: grid; grid-template-columns: 96px 1fr; gap: 9px 12px; padding: 15px 17px; font-size: 12.5px; margin: 0; }
.appr-dl dt { color: #8a9aa9; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; font-weight: 700; }
.appr-dl dd { color: #1f2d3d; margin: 0; }
.appr-note-box { background: #f7fafa; border-radius: 8px; padding: 8px 10px; font-style: italic; color: #6c7884; font-size: 12px; }
.appr-dr-foot { margin-top: auto; padding: 14px 17px; border-top: 1px solid #f1f4f6; }
.appr-dr-foot textarea { width: 100%; min-height: 70px; border: 1px solid #e1e7ea; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; resize: vertical; }
.appr-dr-foot textarea:focus { outline: none; border-color: #0aa28e; box-shadow: 0 0 0 3px rgba(10,162,142,.15); }
.appr-dr-btns { display: flex; gap: 8px; margin-top: 10px; }
.appr-dr-btns .appr-ap, .appr-dr-btns .appr-rj { flex: 1; padding: 9px; font-size: 12.5px; text-align: center; }
.appr-resolved { margin: 4px 17px 17px; padding: 11px 13px; border-radius: 10px; background: #f7fafa; font-size: 12.5px; color: #46606e; }
.appr-skel { height: 62px; border-radius: 12px; margin-bottom: 8px; background: linear-gradient(90deg,#f1f4f6 25%,#e7edef 37%,#f1f4f6 63%); background-size: 400% 100%; animation: appr-shimmer 1.3s ease infinite; }
.appr-empty2 { text-align: center; padding: 48px 16px; color: #6c7884; }
.appr-empty2 i { font-size: 40px; color: #c2ccd2; display: block; margin-bottom: 10px; }
@media (max-width: 640px) { .appr-drawer { width: 100vw; } }
/* ===== Dashboard redesign ===== */
.db-hero { background: linear-gradient(120deg, #0f3a3a, #0a8d7c); color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.db-hero h2 { font-size: 20px; font-weight: 800; margin: 0; }
.db-hero p { opacity: .85; font-size: 12.5px; margin: 4px 0 0; }
.db-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.db-hero-actions .btn, .db-hero-actions a { white-space: nowrap; }
/* Dashboard hero buttons — glass style on the teal hero */
.db-hero-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.30); transition: background .12s, transform .12s; }
.db-hero-btn:hover { background: rgba(255,255,255,.26); color: #fff; transform: translateY(-1px); }
.db-hero-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.db-hero-btn.db-hero-cta { background: #fff; color: #0a7a6e; border-color: #fff; font-weight: 700; }
.db-hero-btn.db-hero-cta:hover { background: #eafaf6; color: #0a7a6e; }
/* ===== Create Bucket wizard ===== */
.cbw-steps { display:flex; align-items:center; gap:10px; margin:14px 0 18px; font-size:12px; font-weight:700; color:#9aa7b2; }
.cbw-steps .s { display:flex; align-items:center; gap:7px; }
.cbw-steps .n { width:22px; height:22px; border-radius:50%; background:#e8eef0; color:#7a8a94; display:flex; align-items:center; justify-content:center; font-size:11px; }
.cbw-steps .s.on { color:#0a7a6e; }
.cbw-steps .s.on .n { background:#0aa28e; color:#fff; }
.cbw-steps .s.done .n { background:#0a7a6e; color:#fff; }
.cbw-steps .sep { flex:1; height:2px; background:#e8eef0; border-radius:2px; max-width:64px; }
.cbw-sources { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:680px; }
.cbw-source { border:2px solid #e1e7ea; border-radius:14px; padding:18px; cursor:pointer; background:#fff; transition:border-color .12s, box-shadow .12s, background .12s; }
.cbw-source:hover { border-color:#bdeae3; }
.cbw-source.sel { border-color:#0aa28e; background:#f3fbf9; box-shadow:0 0 0 3px rgba(10,162,142,.12); }
.cbw-source h4 { font-size:14px; font-weight:700; color:#1f2d3d; margin:10px 0 3px; }
.cbw-source p { font-size:12px; color:#7c8a94; margin:0; }
.cbw-card { background:#fff; border:1px solid #eef2f4; border-radius:13px; padding:15px; margin-bottom:12px; }
.cbw-ct { font-size:12px; font-weight:700; color:#1f2d3d; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.cbw-ct i:first-child { color:#0aa28e; }
.cbw-ct .hint { margin-left:auto; font-size:10.5px; font-weight:600; color:#7c8a94; background:#f0f4f5; border-radius:999px; padding:1px 9px; }
.cbw-grp { font-size:10px; font-weight:700; color:#0a8d7c; text-transform:uppercase; letter-spacing:.05em; margin:2px 0 8px; }
.cbw-acc-head { display:flex; align-items:center; gap:9px; padding:13px 15px; font-size:12.5px; font-weight:700; color:#1f2d3d; background:#f8fbfb; border:1px solid #eef2f4; border-radius:12px; cursor:pointer; }
.cbw-acc-head i:first-child { color:#0aa28e; }
.cbw-acc-head .chev { margin-left:auto; color:#9aa7b2; }
.cbw-acc-head .hint { font-size:10.5px; font-weight:600; color:#7c8a94; background:#eef3f5; border-radius:999px; padding:1px 8px; }
.cbw-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0; }
.cbw-kpi { border:1px solid #eef2f4; border-radius:11px; padding:12px; text-align:center; position:relative; overflow:hidden; }
.cbw-kpi b { font-size:21px; font-weight:800; display:block; line-height:1; }
.cbw-kpi s { font-size:10px; color:#8a98a2; text-transform:uppercase; text-decoration:none; letter-spacing:.03em; }
.cbw-kpi .edge { position:absolute; left:0; top:0; bottom:0; width:3px; }
.cbw-kpi.t b { color:#46606e; }
.cbw-kpi.v { background:#f0faf6; }
.cbw-kpi.v b { color:#137a43; }
.cbw-kpi.d { background:#fdf8ea; }
.cbw-kpi.d b { color:#9a6a00; }
.cbw-kpi.x { background:#fdeef0; }
.cbw-kpi.x b { color:#c0322b; }
.cbw-chips { display:flex; flex-wrap:wrap; gap:7px; }
.cbw-chip { border:1px solid #e5eaec; background:#f5f7f8; color:#9aa7b2; border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.cbw-chip.on { border-color:#d7e7e3; background:#f3fbf9; color:#0a6a5e; }
.cbw-chip.lock { cursor:not-allowed; opacity:.7; }
.cbw-more { font-size:11px; color:#0a8d7c; font-weight:600; cursor:pointer; margin-top:9px; display:inline-block; }
.cbw-review { display:grid; grid-template-columns:1fr 320px; gap:14px; }
.cbw-rail { position:sticky; top:14px; align-self:start; }
.cbw-est { background:linear-gradient(120deg,#0f3a3a,#0a8d7c); color:#fff; border-radius:13px; padding:17px; text-align:center; margin-bottom:11px; }
.cbw-est b { font-size:28px; font-weight:800; display:block; line-height:1.1; }
.cbw-est s { font-size:11px; opacity:.85; text-decoration:none; }
.cbw-est .wh { display:inline-block; margin-top:8px; background:rgba(255,255,255,.18); border-radius:999px; padding:2px 10px; font-size:10px; font-weight:600; }
.cbw-est a { color:#cdebe4; font-size:11px; text-decoration:underline; cursor:pointer; }
.cbw-sum { font-size:12px; color:#46606e; }
.cbw-sum div { padding:6px 0; border-bottom:1px solid #f1f4f6; display:flex; justify-content:space-between; }
.cbw-sum b { color:#1f2d3d; }
.cbw-nav { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
@media (max-width:820px){ .cbw-sources{grid-template-columns:1fr;} .cbw-review{grid-template-columns:1fr;} .cbw-rail{position:static;} .cbw-kpis{grid-template-columns:1fr 1fr;} }
/* ===== Campaign section — align KPI cards to shared .bd-kpi tokens ===== */
.ca-kpi { border: 1px solid #eef2f4; border-radius: 12px; background: #fff; }
.ca-kpi__value { color: #0a8d7c; font-weight: 800; }
.ca-kpi__label { color: #9aa7b2; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
/* Campaign overview — sortable headers */
.ca-overview-table th.ca-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ca-overview-table th.ca-sortable i { font-size: .72rem; opacity: .5; margin-left: 2px; }
.ca-overview-table th.ca-sortable:hover { color: #0a8d7c; }
/* ===== Campaign Detail — alignment helpers ===== */
.cd-miniseg { display: inline-flex; border: 1px solid #e1e7ea; border-radius: 7px; overflow: hidden; }
.cd-miniseg button { padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: #8a98a2; background: #fff; border: 0; border-right: 1px solid #eef1f3; cursor: pointer; }
.cd-miniseg button:last-child { border-right: 0; }
.cd-miniseg button.on-g { background: #137a43; color: #fff; }
.cd-miniseg button.on-r { background: #c0322b; color: #fff; }
.cd-miniseg.dirty { box-shadow: 0 0 0 2px rgba(10,162,142,.35); border-radius: 8px; }
.ca-audit-table tbody tr.ca-row-dirty td:first-child { box-shadow: inset 3px 0 0 #0aa28e; }
.ca-sync-flash { background: #eafaf6; border: 1px solid #bfeae2; color: #0a6a5e; }
/* ===== Campaign Upload — deeper pass ===== */
.cu-sec { font-size: 11px; font-weight: 700; color: #0a8d7c; text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 12px; display: flex; align-items: center; gap: 6px; }
.cu-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa7b2; padding: 3px 0; }
.cu-check.on { color: #137a43; }
.cu-check .ic { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cdd6da; display: flex; align-items: center; justify-content: center; font-size: 8px; }
.cu-check.on .ic { background: #137a43; border-color: #137a43; color: #fff; }
.cu-checklist { border-top: 1px solid #f1f4f6; margin-top: 6px; padding-top: 10px; }
.cu-fileprog { height: 8px; border-radius: 5px; background: #eef3f5; overflow: hidden; margin-top: 7px; }
.cu-fileprog > i { display: block; height: 100%; background: #0aa28e; transition: width .2s; }
.cu-vstep { position: relative; }
.cu-vrow { display: flex; gap: 11px; padding-bottom: 16px; position: relative; }
.cu-vrow:last-child { padding-bottom: 0; }
.cu-vrow::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: -2px; width: 2px; background: #e8eef0; }
.cu-vrow:last-child::before { display: none; }
.cu-vrow.done::before { background: #137a43; }
.cu-vdot { width: 24px; height: 24px; border-radius: 50%; background: #eef1f3; color: #9aa7b2; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; z-index: 1; border: 2px solid #fff; }
.cu-vrow.done .cu-vdot { background: #137a43; color: #fff; }
.cu-vrow.running .cu-vdot { background: #0aa28e; color: #fff; }
.cu-vrow.error .cu-vdot { background: #c0322b; color: #fff; }
.cu-vname { font-weight: 700; font-size: 12.5px; color: #1f2d3d; }
.cu-vrow.pending .cu-vname { color: #9aa7b2; }
.cu-vmsg { font-size: 11px; color: #9aa7b2; }
.cu-verr { font-size: 11px; color: #c0322b; }
.ca-dropzone-v2.cu-bad { border-color: #f1b9c0; background: #fff8f9; }
.cu-fileerr { font-size: 11.5px; color: #c0322b; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
/* Campaign Upload — inset the cbw-steps stepper inside the card (was flush to edge) */
.ca-upload-card .cbw-steps { padding: 4px 1.5rem 0; }
.ca-upload-page, .ca-detail-page, .ca-log-page { padding-top: 16px; }

/* Campaign Audit — toolbar control button base */
.ctl-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid #e1e7ea; border-radius:9px;
  background:#fff; padding:7px 11px; font-size:12.5px; font-weight:600; color:#56707e; cursor:pointer; }
.ctl-btn:hover { background:#f5fafa; }
.ctl-btn.on { background:#0aa28e; color:#fff; border-color:#0aa28e; }

/* ════════════ QC flow + Approvals + channel-detail-modal (ported) ════════════
   Curation-page (.curation-page) redesign, approvals (appr-*), and channel-detail
   modal styles. Scoped so the bucket-details (channel-list) page is unaffected. */
/* ── Curation-page scoped overrides ─────────────────────────────────────── */
.curation-page .channel-table thead th { position: sticky; top: 0; background:#fbfdfd; z-index:2; }
.curation-page .channel-table td { padding: 11px 10px; }
.curation-page .channel-table tbody tr:hover { background: #fafdfd; }
.curation-page .channel-title-link { font-weight: 600; color:#1f2d3d; }
/* Cancel the generic last-child sticky — curation manages it via .qc-actions-cell */
.curation-page .channel-table th:last-child,
.curation-page .channel-table td:last-child {
  position: static;
  box-shadow: none;
}
.curation-page .channel-table td:last-child { text-align: left; }
/* ── Curation filter popovers ──────────────────────────────────────────────── */
.qc-filter-menu {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: #1f2d3d; min-width: 230px; max-height: 300px; overflow-y: auto;
  padding: 6px; border: 1px solid rgba(15,58,58,.10);
  box-shadow: 0 8px 24px rgba(15,58,58,.12); border-radius: 10px;
}
/* History popover (anchored, scrollable timeline) */
.qc-hist-backdrop { position: fixed; inset: 0; z-index: 1080; background: transparent; }
.qc-hist-pop {
  position: fixed; z-index: 1081; background: #fff;
  border: 1px solid rgba(15,58,58,.10); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(15,58,58,.20);
  display: flex; flex-direction: column; overflow: hidden;
  animation: qcHistIn .12s ease-out;
}
.qc-hist-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid rgba(15,58,58,.08); background: #f7fbfb;
  text-transform: none; letter-spacing: normal;
}
.qc-hist-title { font-size: .8rem; font-weight: 700; color: #1f2d3d; text-transform: none; letter-spacing: normal; }
.qc-hist-sub { font-size: .7rem; color: #8a9aa9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-hist-body { padding: 12px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.qc-hist-pop .history-timeline, .qc-hist-pop .history-timeline * { text-transform: none; letter-spacing: normal; }
.qc-filter-menu .qcf-head {
  display:flex; align-items:center; justify-content:space-between;
  font-size: .68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:#8a9aa9; padding: 4px 8px 6px;
}
.qc-filter-menu .qcf-head a { font-size:.7rem; text-transform:none; letter-spacing:normal; }
.qc-filter-menu .form-check {
  margin:0; padding: 5px 8px; border-radius: 7px; display:flex; align-items:center; gap:8px;
}
.qc-filter-menu .form-check:hover { background: rgba(15,184,162,.08); border-radius:7px; }
.qc-filter-menu .form-check-input:checked { background-color:#0aa28e; border-color:#0aa28e; }
.qcf-search { font-size:.82rem; }
/* Curations row actions: ghost History (with count) + filled Edit QC */
.qc-hist-btn { position:relative; width:34px; height:34px; border:1px solid #e3e8eb; border-radius:9px;
  background:#fff; color:#56707e; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.qc-hist-btn:hover { background:#f5fafa; color:#0aa28e; border-color:#bdeae3; }
.qc-hist-ct { position:absolute; top:-6px; right:-6px; background:#0aa28e; color:#fff; font-size:9px; font-weight:700;
  min-width:15px; height:15px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.qc-edit-btn { display:inline-flex; align-items:center; border:1px solid #0aa28e; background:#0aa28e; color:#fff;
  border-radius:9px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.qc-edit-btn:hover:not(:disabled) { background:#0b8d7c; border-color:#0b8d7c; }
.qc-edit-btn:disabled { background:#e9eef1; border-color:#e9eef1; color:#9aa7b2; cursor:not-allowed; }
.qc-filter-menu .form-check-label {
  text-transform:none !important; letter-spacing:normal !important; font-weight:400 !important;
  font-size:.84rem !important; color:#1f2d3d !important; cursor:pointer; margin:0;
}
/* Reset Bootstrap's float + negative left margin so the checkbox sits inside the
   flex row (it was being pulled outside the popover and clipped → invisible). */
.qc-filter-menu .form-check-input {
  float:none; margin:0; width:16px; height:16px; border:1.5px solid #c4ced4;
  border-radius:4px; cursor:pointer; flex-shrink:0;
}
.qc-filter-menu .form-check-input:checked { background-color:#0aa28e; border-color:#0aa28e; }
.qc-filter-empty { color:#8a9aa9; font-size:.8rem; padding:6px 8px; }
/* ══════════════════════════════════════════════════════════════════════════════
   CURATION PAGE — SENIOR POLISH PASS
   All rules scoped under .curation-page or component classes to avoid bleed.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Segmented control refinements ─────────────────────────────────────── */
/* Count badge: balanced min-width so "0" isn't a squashed oval */
.qc-seg-n {
  min-width: 18px;
  text-align: center;
  line-height: 1.6;
}
/* ── 2. Toolbar: search box height consistency ────────────────────────────── */
/* input-group-sm gives ~31px; nudge to 34px to match seg-btn height */
.curation-page .input-group.input-group-sm .form-control,
.curation-page .input-group.input-group-sm .input-group-text,
.curation-page .input-group.input-group-sm .btn {
  height: 34px;
  font-size: 13px;
}
.curation-page .input-group.input-group-sm .input-group-text {
  color: #8a9aa9;
  border-color: #e1e7ea;
  background: #fff;
}
.curation-page .input-group.input-group-sm .form-control {
  border-color: #e1e7ea;
  border-left: 0;
}
.curation-page .input-group.input-group-sm .form-control:focus {
  border-color: #0aa28e;
  box-shadow: none;
}
/* Keep the left border-radius on the search group's text addon */
.curation-page .input-group.input-group-sm .input-group-text:first-child {
  border-radius: 9px 0 0 9px;
}
.curation-page .input-group.input-group-sm .form-control:last-child,
.curation-page .input-group.input-group-sm .btn:last-child {
  border-radius: 0 9px 9px 0;
}
/* ── 3. Active filter chips ───────────────────────────────────────────────── */
.qc-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 10px;
  border-radius: 999px;
  background: #e8f5f4;
  border: 1px solid rgba(10,162,142,.22);
  color: #0a7a6e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  height: 26px;
  text-transform: none;
  letter-spacing: normal;
}
.qc-chip-remove {
  font-size: 11px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .12s;
  flex-shrink: 0;
  color: #0a7a6e;
}
.qc-chip-remove:hover { opacity: 1; }
/* ── 4. Filter popover ────────────────────────────────────────────────────── */
/* Wider, roomier, cleaner shadow, better padding */
.qc-filter-menu {
  min-width: 260px !important;
  max-height: 320px;
  padding: 4px !important;
  border: 1px solid rgba(15,58,58,.11) !important;
  box-shadow: 0 10px 32px rgba(15,58,58,.14), 0 2px 8px rgba(15,58,58,.06) !important;
  border-radius: 12px !important;
  overflow-y: auto;
}
/* Header row: "FILTER" label + Clear link */
.qc-filter-menu .qcf-head {
  padding: 6px 10px 8px;
  border-bottom: 1px solid rgba(15,58,58,.08);
  margin-bottom: 2px;
}
.qc-filter-menu .qcf-head span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a9aa9;
}
.qc-filter-menu .qcf-head a {
  font-size: .75rem;
  color: #0aa28e !important;
  text-decoration: none;
  font-weight: 500;
  transition: color .12s;
}
.qc-filter-menu .qcf-head a:hover { color: #088776 !important; text-decoration: underline; }
/* Facet search input */
.qc-filter-menu .px-1.pb-1 { padding: 0 4px 4px !important; }
.qcf-search {
  font-size: .82rem !important;
  border-color: #e1e7ea !important;
  border-radius: 7px !important;
}
.qcf-search:focus { border-color: #0aa28e !important; box-shadow: none !important; }
/* Checkbox rows */
.qc-filter-menu .form-check {
  padding: 6px 10px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background .1s;
}
.qc-filter-menu .form-check:hover {
  background: rgba(10,162,142,.09) !important;
}
/* Checkbox itself — already fixed (float:none, 16px, teal checked) — preserve */
.qc-filter-menu .form-check-input {
  margin-top: 0 !important;  /* flex row — no top nudge needed */
  flex-shrink: 0;
}
/* Empty state */
.qc-filter-empty {
  padding: 8px 10px !important;
  color: #aab7bf;
  font-size: .8rem;
  text-align: center;
}
/* ── 5. Assignee chip — dedicated class (not shared with Tier 2) ──────────── */
.qc-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3edff;
  border: 1px solid #ddc7ff;
  color: #6d28d9;
  font-size: 11.5px;
  font-weight: 500;          /* was inheriting 700 — now normal weight */
  text-transform: none;
  letter-spacing: normal;
  max-width: 160px;          /* prevent very long names blowing out column */
  height: 24px;
  line-height: 1;
}
.qc-assignee-chip .bi {
  font-size: 12px;
  flex-shrink: 0;
  opacity: .75;
}
.qc-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* ── 6. Status pill + tier badges — consistent height & vertical align ────── */
.curation-page .badge.rounded-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  vertical-align: middle;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}
.curation-page .category-badge,
.curation-page .tier2-badge {
  font-size: 11.5px;
  font-weight: 500;          /* was 700 — content values don't need heavy weight */
  padding: 3px 9px;
  height: 22px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
}
/* ── 7. Table — column header alignment vs body cells ─────────────────────── */
/* th padding matches td padding on curation page */
.curation-page .channel-table th {
  padding: 11px 10px;
  font-size: 10.5px;
  letter-spacing: .07em;
}
/* Channel cell: tighter channel-id sub-line */
.curation-page .channel-table .text-muted.small {
  font-size: 11px;
  margin-top: 2px;
  font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
  color: #8a9aa9;
}
/* Last-updated cell consistent with muted style */
.curation-page .channel-table td.text-muted.small.text-nowrap {
  font-size: 11.5px;
  color: #8a9aa9;
}
/* ── 8. Row actions cell — combined History + Edit QC in one sticky cell ──── */
.curation-page .channel-table .qc-actions-th {
  width: 160px;
  min-width: 160px;
}
.qc-actions-cell {
  display: flex !important;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}
/* Override the generic last-child text-align:right — flex handles it */
.curation-page .channel-table td.qc-actions-cell {
  text-align: left;
  padding-right: 12px;
}
/* Sticky actions column */
.curation-page .channel-table th.qc-actions-th,
.curation-page .channel-table td.qc-actions-cell {
  position: sticky;
  right: 0;
  background: rgba(255,255,255,.98);
  z-index: 2;
  box-shadow: -8px 0 16px rgba(15,23,42,.05);
}
.curation-page .channel-table th.qc-actions-th { z-index: 3; background: #fbfdfd; }
/* History button refinements */
.qc-hist-btn {
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
/* Count badge: ensure it never clips at 34px button edge */
.qc-hist-ct {
  border: 2px solid #fff;       /* white border separates it from the button */
  box-shadow: 0 1px 3px rgba(15,58,58,.18);
}
/* Edit QC button refinements */
.qc-edit-btn {
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
  gap: 5px;
  height: 34px;                  /* match qc-hist-btn height exactly */
  padding: 0 12px;
}
.qc-edit-label {
  /* allow label to hide on very narrow screens if needed */
  overflow: hidden;
}
/* ── 9. History popover refinements ──────────────────────────────────────── */
/* Close button — dedicated class, never gets squeezed */
.qc-hist-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: rgba(15,58,58,.06);
  color: #56707e;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s, color .12s;
  align-self: flex-start;
}
.qc-hist-close-btn:hover {
  background: rgba(15,58,58,.12);
  color: #1f2d3d;
}
/* Title line: allow wrap instead of hard-clip on long channel names */
.qc-hist-title {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
/* Sub line: channel ID + "now" + pill — allow wrapping */
.qc-hist-sub {
  white-space: normal !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin-top: 2px;
}
/* Status pill inside history popover header */
.qc-hist-pop .qc-hist-sub .badge {
  font-size: .65rem;
  padding: 2px 7px;
  vertical-align: middle;
}
/* Timeline dot alignment: the 22px icon-dot in the popover */
.qc-hist-pop .history-dot-col {
  padding-top: 1px;
}
/* Timeline connector line gap */
.qc-hist-pop .history-line {
  margin-top: 6px;
}
/* Edit-chips inside history events */
.qc-hist-pop .badge.bg-white.border {
  font-size: .75rem;
  padding: 2px 7px;
  border-color: rgba(15,58,58,.12) !important;
  line-height: 1.4;
}
/* ── 10. Sticky header background — prevent bleed-through when scrolling ──── */
.curation-page .channel-table thead th {
  background: #f8fbfa;
  border-bottom: 1.5px solid rgba(15,58,58,.13);
}
/* ── 11. Empty/no-match states — better vertical rhythm ──────────────────── */
.curation-page .text-center.py-5 i.bi {
  display: block;
  margin-bottom: 8px;
}
.curation-page tbody tr td.text-center.py-5 p {
  margin-bottom: 6px;
}
/* ── 12. Pagination footer — tighten and style ───────────────────────────── */
.curation-page .card-footer {
  padding: 10px 16px;
  background: #f8fbfa;
  border-top: 1px solid rgba(15,58,58,.10);
  font-size: 12.5px;
}
.curation-page .pagination-sm .page-link {
  font-size: 12px;
  padding: 4px 10px;
  color: #56707e;
  border-color: #e1e7ea;
}
.curation-page .pagination-sm .page-item.disabled .page-link {
  color: #8a9aa9;
}
/* ── 13. Remove double-defined checked rule (was harmlessly duplicated) ────── */
/* Canonical rule kept at original location; this comment marks intentional de-dup */

/* ── 14. Clear all filters btn — teal danger-link style ─────────────────── */
.curation-page .btn-link.text-danger {
  color: #cf1322 !important;
  font-size: 12px;
  font-weight: 500;
}
.curation-page .btn-link.text-danger:hover {
  color: #a8001b !important;
  text-decoration: underline;
}
.bc-av { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }
.bc-av.creator { background:#eef2f4; color:#56707e; }
.bc-av.qc { background:#e7f7ed; color:#137a43; }
.notif-bell .badge {
  position: absolute; top: -4px; right: -4px;
  background: #DC3545; color: #fff;
  border-radius: 999px; font-size: 0.62rem; line-height: 1;
  padding: 3px 5px; min-width: 18px; text-align: center;
  border: 2px solid var(--surface-solid); font-weight: 700;
}
.ca-upload-page .card-header .text-muted { font-size: 11.5px !important; }
/* ── Curation: Manage Assignments view (Task 8) ─────────────────────────────── */
.qc-kpi { font-size:12px; color:#6c7884; }
.qc-kpi b { color:#0a8d7c; font-size:14px; }
.qc-ch-thumb { width:30px; height:30px; border-radius:7px; object-fit:cover; background:#eef2f4; }
.qc-ch-name { font-weight:600; color:#1f2d3d; font-size:12.5px; }
.qc-ch-id { font-size:10.5px; color:#9aa7b2; }
/* ── Curation bulk-assign mode + assignee picker (Task 9) ──────────────────── */
.qc-bulkbar { display:flex; align-items:center; gap:10px; background:#0f3a3a; color:#fff; border-radius:10px; padding:8px 14px; font-size:12px; margin-bottom:10px; position:sticky; top:8px; z-index:5; }
.qc-bulk-spacer { flex:1; }
.qc-picker-wrap { position:relative; }
.qc-btn-teal { background:#0aa28e; color:#fff; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.qc-btn-teal:disabled { opacity:.5; cursor:not-allowed; }
.qc-btn-ghost { background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:8px; padding:6px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.qc-picker { position:absolute; right:0; top:calc(100% + 6px); width:300px; background:#fff; border:1px solid #eef2f4; border-radius:12px; box-shadow:0 12px 36px rgba(15,58,58,.16); z-index:20; overflow:hidden; }
.qc-picker-h { padding:11px 13px; border-bottom:1px solid #f1f4f6; font-size:12px; font-weight:700; color:#1f2d3d; display:flex; align-items:center; gap:7px; }
.qc-picker-search { display:flex; align-items:center; gap:7px; border:1px solid #e1e7ea; border-radius:8px; padding:5px 10px; margin:10px 12px; color:#9aa7b2; }
.qc-picker-search input { border:none; outline:none; font-size:12px; flex:1; background:transparent; }
.qc-picker-list { max-height:220px; overflow:auto; }
.qc-picker-row { display:flex; align-items:center; gap:9px; padding:8px 13px; cursor:pointer; }
.qc-picker-row:hover { background:#f5fafa; }
.qc-picker-row.on { background:#e7f7ed; }
.qc-picker-foot { display:flex; gap:8px; padding:10px 12px; border-top:1px solid #f1f4f6; }
.qc-picker-foot button { flex:1; }
.qc-picker-foot .qc-btn-ghost { background:#fff; border:1px solid #e1e7ea; color:#56707e; }
/* ── "Done by admin" QC tag (admin-completed channels) ──────────────────── */
.qc-admin-tag{display:inline-flex;gap:4px;align-items:center;margin-left:6px;
  background:#EDE9FE;color:#6D28D9;border:1px solid rgba(109,40,217,.3);
  font-size:10px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.qc-admin-tag i{font-size:10px;}

/* ===== Notification tray (ported from buckets-merge-approval-workflow) ===== */
/* ── Notification bell (top-nav) ────────────────────────────────────────── */
.notif-bell {
  position: relative; background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 0.4rem 0.55rem; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-bell:hover { background: var(--surface-soft); border-color: var(--border-strong); }
.notif-bell .badge {
  position: absolute; top: -4px; right: -4px;
  background: #DC3545; color: #fff;
  border-radius: 999px; font-size: 0.62rem; line-height: 1;
  padding: 3px 5px; min-width: 18px; text-align: center;
  border: 2px solid var(--surface-solid); font-weight: 700;
}

/* ── Notification dropdown (Jira-style) ─────────────────────────────────── */
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 420px; max-height: 76vh; overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 1050;
  display: flex; flex-direction: column;
}
.notif-dropdown__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.notif-dropdown__title { font-weight: 700; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.notif-dropdown__count {
  background: var(--primary-soft); color: var(--primary-deep);
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.notif-dropdown__mark {
  background: none; border: none; color: var(--primary-deep);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px;
  border-radius: 6px; transition: background 0.15s;
}
.notif-dropdown__mark:hover:not(:disabled) { background: var(--primary-soft); }
.notif-dropdown__mark:disabled { opacity: 0.4; cursor: default; }
.notif-dropdown__tabs {
  display: flex; gap: 4px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-solid);
}
.notif-dropdown__tab {
  background: transparent; border: 1px solid transparent;
  color: var(--muted); padding: 4px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
}
.notif-dropdown__tab:hover { background: var(--surface-soft); color: var(--text); }
.notif-dropdown__tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.notif-dropdown__list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; flex: 1; min-height: 120px;
}
.notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; position: relative;
  transition: background 0.12s ease;
}
.notif-row:hover { background: var(--surface-soft); }
.notif-row.unread { background: rgba(15, 184, 162, 0.05); }
.notif-row.unread:hover { background: rgba(15, 184, 162, 0.09); }
.notif-row.unread::before {
  content: ""; position: absolute; left: 5px; top: 22px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.notif-row__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
  border: 1px solid var(--border); overflow: hidden;
}
.notif-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-row__avatar--system {
  background: var(--info-soft); color: var(--info);
}
.notif-row__body { flex: 1; min-width: 0; }
.notif-row__head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.45;
}
.notif-row__actor { font-weight: 700; color: var(--text); }
.notif-row__time { font-size: 11px; color: var(--muted); margin-left: auto; flex-shrink: 0; }
.notif-row__msg { color: var(--text); font-size: 13px; line-height: 1.45; margin: 2px 0 4px; word-wrap: break-word; }
.notif-row__msg .notif-row__subject { font-weight: 600; color: var(--primary-deep); }
.notif-row__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.notif-row__chip {
  font-size: 10px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px;
  background: var(--surface-soft); color: var(--muted-strong);
  border: 1px solid var(--border);
}
.notif-row__chip--success { background: var(--success-soft); color: var(--success); border-color: rgba(15,169,104,0.25); }
.notif-row__chip--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(230,158,37,0.25); }
.notif-row__chip--info    { background: var(--info-soft);    color: var(--info);    border-color: rgba(31,111,235,0.25); }
.notif-row__chip--error   { background: #FFEAEA; color: #DC3545; border-color: rgba(220,53,69,0.25); }

.notif-dropdown__empty {
  padding: 48px 24px; text-align: center; color: var(--muted);
}
.notif-dropdown__empty i { font-size: 32px; opacity: 0.4; }
.notif-dropdown__empty-title { margin-top: 12px; font-weight: 600; color: var(--text); }
.notif-dropdown__empty-sub { font-size: 12px; margin-top: 4px; }

.notif-dropdown__footer {
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--surface-soft); display: flex; justify-content: center;
}
.notif-dropdown__loadmore {
  background: transparent; border: 1px solid var(--border);
  color: var(--primary-deep); font-weight: 600; font-size: 12px;
  padding: 6px 14px; border-radius: 999px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.notif-dropdown__loadmore:hover:not(:disabled) {
  background: var(--surface-solid); border-color: var(--primary);
}
.notif-dropdown__loadmore:disabled { opacity: 0.5; cursor: default; }

/* ===== Notification tray redesign ===== */
.nt-tabs { padding: 8px 14px 2px; }
.nt-grouplabel { position: sticky; top: 0; z-index: 1; font-size: 10.5px; font-weight: 700; color: #9aa7b2; text-transform: uppercase; letter-spacing: .05em; padding: 9px 16px 4px; background: #fbfdfd; border-bottom: 1px solid #f3f6f7; }
.nt-row { display: flex; gap: 11px; padding: 11px 15px; border-bottom: 1px solid #f3f6f7; position: relative; cursor: pointer; }
.nt-row:hover { background: #fafdfd; }
.nt-row.unread { background: rgba(15,184,162,.055); }
.nt-row.unread:hover { background: rgba(15,184,162,.09); }
.nt-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.nt-ic.bucket { background: #e7eefe; color: #1d4ed8; }
.nt-ic.approval { background: #e7f7ed; color: #137a43; }
.nt-ic.qc { background: #fdf3e0; color: #9a6a00; }
.nt-ic.user { background: #eef0fb; color: #4f46e5; }
.nt-ic.media { background: #e7eefe; color: #1d4ed8; }
.nt-ic.system { background: #eef1f3; color: #6b7a84; }
.nt-body { flex: 1; min-width: 0; }
.nt-msg { font-size: 12.7px; color: #28323a; line-height: 1.4; }
.nt-msg b { font-weight: 700; color: #0f2d2a; }
.nt-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; color: #9aa7b2; flex-wrap: wrap; }
.nt-meta .nt-foryou { color: #0a8d7c; font-weight: 600; }
.nt-time { margin-left: auto; white-space: nowrap; }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: #0aa28e; flex-shrink: 0; align-self: center; }
.nt-mark { width: 26px; height: 26px; border-radius: 7px; border: 0; background: #f0f4f5; color: #6b7a84; display: none; align-items: center; justify-content: center; font-size: 13px; align-self: center; cursor: pointer; }
.nt-row:hover .nt-mark { display: flex; }
.nt-mark:hover { background: #0aa28e; color: #fff; }
.nt-skel { display: flex; gap: 11px; padding: 12px 15px; border-bottom: 1px solid #f3f6f7; align-items: center; }
.nt-skel-sq { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(90deg,#eef2f4,#f6f9fa,#eef2f4); background-size: 200% 100%; animation: nt-sh 1.2s infinite; }
.nt-skel-bars { flex: 1; }
.nt-skel-bar { height: 9px; border-radius: 5px; margin-bottom: 7px; background: linear-gradient(90deg,#eef2f4,#f6f9fa,#eef2f4); background-size: 200% 100%; animation: nt-sh 1.2s infinite; }
@keyframes nt-sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.nt-empty { padding: 44px 20px; text-align: center; }
.nt-empty-ic { width: 60px; height: 60px; border-radius: 50%; background: #eafaf6; color: #0aa28e; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px; }
.nt-empty h4 { font-size: 14px; font-weight: 700; color: #1f2d3d; margin: 0 0 3px; }
.nt-empty p { font-size: 12px; color: #9aa7b2; margin: 0; }