/* ============================================
   RAYDAR — Design System

   Token naming: everything below is --rdr-* — the one prefix for new work
   going forward (see the Phase 1 UI/UX plan). Older "ins-", "insider-", and
   "inv-" component classes elsewhere in this file are NOT touched here;
   they consume these same base colors already and are migrated separately.
   ============================================ */

:root {
  --rdr-sidebar-w: 240px;

  /* Sidebar is intentionally dark chrome in BOTH themes (not affected by
     data-theme) — a deliberately different surface from the main content
     area, same pattern used by most of this era's premium tools. */
  --rdr-sidebar-bg: #0d0f14;
  --rdr-sidebar-border: rgba(255,255,255,.07);

  /* ── Advizer Design System (v2.0) Tokens ── */
  --rdr-primary-50: #eef2ff;
  --rdr-primary-100: #e0e7ff;
  --rdr-primary-200: #c7d2fe;
  --rdr-primary-500: #6366f1;
  --rdr-primary-600: #4f46e5;
  --rdr-primary-700: #4338ca;
  --rdr-primary-800: #3730a3;

  --rdr-surface-canvas: #f8fafc;
  --rdr-surface-card: #ffffff;
  --rdr-surface-subtle: #f1f5f9;
  --rdr-surface-hover-token: #f8fafc;
  --rdr-border-subtle: #e2e8f0;
  --rdr-border-strong: #cbd5e1;
  --rdr-text-main: #0f172a;
  --rdr-text-muted-token: #64748b;
  --rdr-text-subtle: #94a3b8;

  --rdr-success-text: #059669;
  --rdr-success-badge: #10b981;
  --rdr-success-bg: #ecfdf5;
  --rdr-warning-text: #d97706;
  --rdr-warning-badge: #f59e0b;
  --rdr-warning-bg: #fffbeb;
  --rdr-danger-text: #dc2626;
  --rdr-danger-badge: #ef4444;
  --rdr-danger-bg: #fef2f2;
  --rdr-info-text: #2563eb;
  --rdr-info-badge: #3b82f6;
  --rdr-info-bg: #eff6ff;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06);

  /* ── Accent (primary brand) ── */
  --rdr-accent: #6366f1;
  --rdr-accent-hover: #4f46e5;
  --rdr-accent-light: rgba(99,102,241,.12);
  --rdr-accent-ring: rgba(99,102,241,.25);

  /* ── AI layer — deliberately a different hue from the primary accent
     (cyan, not indigo) so AI-generated content reads as its own subtle
     lane without turning the whole product neon. Used sparingly: small
     badges, a thin left-border on AI cards, icon color — never full-card
     glows. ── */
  --rdr-ai: #0891b2;
  --rdr-ai-light: rgba(8,145,178,.10);
  --rdr-ai-ring: rgba(8,145,178,.22);

  /* ── Semantic status ── */
  --rdr-positive: #16a34a;
  --rdr-positive-light: rgba(22,163,74,.12);
  --rdr-negative: #dc2626;
  --rdr-negative-light: rgba(220,38,38,.12);
  --rdr-warning: #d97706;
  --rdr-warning-light: rgba(217,119,6,.12);
  --rdr-info: #2563eb;
  --rdr-info-light: rgba(37,99,235,.12);
  /* Borders for tinted (-light) panels; mixed from the theme colour, so dark mode follows (UX-06). */
  --rdr-positive-border: color-mix(in srgb, var(--rdr-positive) 35%, transparent);
  --rdr-negative-border: color-mix(in srgb, var(--rdr-negative) 35%, transparent);
  --rdr-warning-border: color-mix(in srgb, var(--rdr-warning) 35%, transparent);
  --rdr-info-border: color-mix(in srgb, var(--rdr-info) 35%, transparent);
  /* Text on those tinted panels (badges, alerts): AA contrast on the tint in both themes (UX-06). */
  --rdr-positive-strong: #166534;
  --rdr-negative-strong: #991b1b;
  --rdr-warning-strong: #92400e;
  --rdr-info-strong: #075985;

  /* ── Surfaces / text / borders (main content area — these DO flip under
     [data-theme="dark"] below) ── */
  --rdr-bg: #f1f4f9;
  --rdr-elevated: #ffffff;
  --rdr-card: #ffffff;
  --rdr-surface-2: #f8fafc;
  --rdr-surface-hover: #eef1f6;
  --rdr-text: #0f172a;
  --rdr-text-secondary: #334155;
  --rdr-text-muted: #64748b;
  --rdr-border: #e2e8f0;
  --rdr-border-hover: #c7d2e0;
  --rdr-topbar-bg: rgba(241,244,249,.8);

  /* ── Radius scale ── */
  --rdr-radius-sm: 8px;
  --rdr-radius: 12px;
  --rdr-radius-lg: 16px;
  --rdr-radius-full: 999px;

  /* ── Shadows — used sparingly; surface/border contrast does most of the
     elevation work (see Phase 1 plan, Section 11 of the brief) ── */
  --rdr-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --rdr-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
  --rdr-shadow-hover: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  /* ── Motion ── */
  --rdr-transition: 0.15s ease;
  --rdr-duration-fast: 120ms;
  --rdr-duration-base: 180ms;
  --rdr-duration-slow: 280ms;
  --rdr-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ── Typography scale ── */
  --fs-display: 32px;
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-caption: 11px;
  --fs-metric: 28px;
  --fs-label: 11px;

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* Intentionally designed dark theme — not an inversion of light values.
   Deep neutral (not pure-black) backgrounds, one restrained elevation step,
   accent/status hues nudged brighter to stay legible at low luminance, no
   glow/neon. Toggled via the sidebar footer control; persisted client-side
   (see _Layout.cshtml's inline theme-init script) and applied before paint
   to avoid a flash of the wrong theme. */
:root[data-theme="dark"] {
  --rdr-positive-strong: #86efac;
  --rdr-negative-strong: #fca5a5;
  --rdr-warning-strong: #fcd34d;
  --rdr-info-strong: #7dd3fc;
  --rdr-accent: #818cf8;
  --rdr-accent-hover: #6366f1;
  --rdr-accent-light: rgba(129,140,248,.16);
  --rdr-accent-ring: rgba(129,140,248,.30);

  --rdr-ai: #22d3ee;
  --rdr-ai-light: rgba(34,211,238,.12);
  --rdr-ai-ring: rgba(34,211,238,.25);

  --rdr-positive: #4ade80;
  --rdr-positive-light: rgba(74,222,128,.14);
  --rdr-negative: #f87171;
  --rdr-negative-light: rgba(248,113,113,.14);
  --rdr-warning: #fbbf24;
  --rdr-warning-light: rgba(251,191,36,.14);
  --rdr-info: #60a5fa;
  --rdr-info-light: rgba(96,165,250,.14);

  --rdr-bg: #0b0d12;
  --rdr-elevated: #14171d;
  --rdr-card: #14171d;
  --rdr-surface-2: #191c23;
  --rdr-surface-hover: #1e222a;
  --rdr-text: #e8eaed;
  --rdr-text-secondary: #b4b9c2;
  --rdr-text-muted: #7b8291;
  --rdr-border: #262b34;
  --rdr-border-hover: #333944;
  --rdr-topbar-bg: rgba(11,13,18,.8);

  --rdr-primary-50: rgba(99,102,241,.12);
  --rdr-primary-100: rgba(99,102,241,.22);
  --rdr-primary-200: rgba(129,140,248,.3);
  --rdr-primary-500: #818cf8;
  --rdr-primary-600: #6366f1;
  --rdr-primary-700: #4f46e5;
  --rdr-primary-800: #4338ca;

  --rdr-surface-canvas: #0b0d12;
  --rdr-surface-card: #14171d;
  --rdr-surface-subtle: #191c23;
  --rdr-surface-hover-token: #1e222a;
  --rdr-border-subtle: #262b34;
  --rdr-border-strong: #333944;
  --rdr-text-main: #e8eaed;
  --rdr-text-muted-token: #7b8291;
  --rdr-text-subtle: #64748b;

  --rdr-success-bg: rgba(16,185,129,.12);
  --rdr-warning-bg: rgba(245,158,11,.12);
  --rdr-danger-bg: rgba(239,68,68,.12);
  --rdr-info-bg: rgba(59,130,246,.12);

  --rdr-shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25);
  --rdr-shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.3);
  --rdr-shadow-hover: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Typography utilities — the type scale above, as ready-to-use classes
   (tokens alone don't set weight/line-height/color, which is most of what
   "using" a typography scale means in practice). ── */
.rdr-text-display { font-size: var(--fs-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.rdr-text-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.25; }
.rdr-text-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; }
.rdr-text-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; }
.rdr-text-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.6; }
.rdr-text-small { font-size: var(--fs-small); font-weight: 400; line-height: 1.5; color: var(--rdr-text-secondary); }
.rdr-text-caption { font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; color: var(--rdr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rdr-text-metric { font-size: var(--fs-metric); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rdr-text-label { font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: var(--rdr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

[x-cloak] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  /* Pre-existing gap, not new: nothing here ever stopped a too-wide descendant (a wide table,
     an unwrapped KPI row) from growing the whole document past the viewport on mobile. Once
     that happens, `.rdr-sidebar`'s `position: fixed` starts rendering relative to the
     horizontally-scrolled layout viewport instead of the visual one on some mobile browsers —
     which is what makes it appear to "float" over unrelated content instead of sitting flush
     left. Contained here at the root so no per-page fix is needed; the individual table/row
     wrappers still have their own intentional overflow-x:auto for horizontal scrolling within
     themselves. */
  overflow-x: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rdr-text);
  background: var(--rdr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; }

/* ============================================
   SHELL
   ============================================ */

.rdr-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ============================================
   SIDEBAR
   ============================================ */

.rdr-sidebar {
  width: var(--rdr-sidebar-w);
  background: var(--rdr-sidebar-bg);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 200;
  border-right: 1px solid var(--rdr-sidebar-border);
}

.rdr-sidebar-header {
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--rdr-sidebar-border);
}

.rdr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.rdr-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--rdr-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,.4);
}

.rdr-brand-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.rdr-brand-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.3);
  margin-top: -2px;
}

/* Nav */
.rdr-nav {
  padding: 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}

.rdr-nav-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.22);
  padding: 14px 10px 6px;
}

.rdr-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.55);
  font-size: 13.5px;
  font-weight: 500;
  transition: all var(--rdr-transition);
  position: relative;
}

.rdr-nav-item i {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.rdr-nav-item:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.07);
}

.rdr-nav-item.active {
  background: var(--rdr-accent-light);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
}

.rdr-nav-item.active i {
  color: var(--rdr-accent);
}

.rdr-nav-badge {
  margin-left: auto;
  background: var(--rdr-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Sidebar footer */
.rdr-sidebar-footer {
  padding: 10px 10px 18px;
  border-top: 1px solid var(--rdr-sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ============================================
   MAIN AREA
   ============================================ */

.rdr-main {
  margin-left: var(--rdr-sidebar-w);
  flex: 1;
  min-width: 0;
  max-width: calc(100vw - var(--rdr-sidebar-w));
  display: flex;
  flex-direction: column;
  transition: margin-left var(--rdr-duration-base) var(--rdr-ease);
  overflow-x: hidden;
  box-sizing: border-box;
}

.rdr-topbar {
  height: 56px;
  background: var(--rdr-topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rdr-border);
  display: flex;
  align-items: center;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.rdr-topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--rdr-text);
}

.rdr-topbar-spacer { flex: 1; }

/* ── Workspace Switcher (No inline styles) ── */
.rdr-ws-switcher-btn {
  position: relative;
  transition: all 0.15s ease;
}
.rdr-ws-current {
  min-width: 0;
}
.rdr-ws-icon {
  font-size: 15px;
  color: #818cf8;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rdr-ws-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.85); /* the sidebar is dark in both themes */
}
.rdr-ws-chevron {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
  margin-left: 6px;
}
.rdr-ws-dropdown-menu {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 100%;
  z-index: 50;
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  overflow-y: auto;
}
.rdr-badge-xs {
  font-size: 10px !important;
}

/* ── Contextual Secondary Navigation (Advizer v2.0) ── */
.rdr-secondary-nav {
  margin: -4px 0 20px 0;
  padding: 0 0 6px 0;
  border-bottom: 1px solid var(--rdr-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rdr-secondary-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
}
.rdr-secondary-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rdr-text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  min-height: 36px;
}
.rdr-secondary-tab:hover {
  color: var(--rdr-text);
  background: var(--rdr-surface-hover);
}
.rdr-secondary-tab.active {
  color: var(--rdr-accent);
  background: var(--rdr-primary-50);
  border-color: var(--rdr-primary-100);
  font-weight: 600;
}
[data-theme="dark"] .rdr-secondary-tab.active {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.25);
}
.rdr-secondary-tab i {
  font-size: 14px;
}

/* ── Overview Dashboard (Advizer v2.0) ── */
/* Home's twelve KPI cards: 6, 4, 3 or 2 per row, so no card ever sits alone on a row. Six columns only on very wide
   screens - at 1440 they pushed "378,994.00 EGP" and the sixth column off the page. minmax(0, 1fr) keeps a long value
   inside its card (it ellipsises) instead of widening the grid. */
.rdr-overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1919.98px) {
  .rdr-overview-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1400px) {
  .rdr-overview-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .rdr-overview-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media (max-width: 440px) {
  .rdr-overview-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.rdr-intel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  min-width: 0;
}
.rdr-intel-grid > * {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 992px) {
  .rdr-intel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rdr-overview-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--rdr-surface-hover);
  border: 1px solid var(--rdr-border);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rdr-overview-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rdr-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  min-height: 38px;
}
.rdr-overview-tab:hover {
  color: var(--rdr-text);
}
.rdr-overview-tab.active {
  background: var(--rdr-card);
  color: var(--rdr-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .rdr-overview-tab.active {
  background: var(--rdr-surface-2);
  color: var(--rdr-text);
}

.rdr-pacing-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--rdr-surface-hover);
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  font-size: 12.5px;
  margin-top: 10px;
}
.rdr-pacing-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rdr-quick-action-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--rdr-border);
  background: var(--rdr-card);
  color: var(--rdr-text);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rdr-quick-action-btn:hover {
  background: var(--rdr-surface-hover);
  border-color: var(--rdr-accent);
  color: var(--rdr-accent);
}

/* ── Overview Header & Controls (Advizer v2.1) ── */
.rdr-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.rdr-overview-header-left {
  display: flex;
  flex-direction: column;
}
.rdr-overview-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rdr-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rdr-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  animation: rdr-pulse 2s infinite ease-in-out;
}
@@keyframes rdr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Dropdown popovers */
.rdr-dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.rdr-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--rdr-shadow-lg);
  z-index: 250;
}
.rdr-dropdown-right {
  right: 0;
  left: auto;
}
.rdr-dropdown-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rdr-text-muted);
  padding: 6px 10px 4px;
}
.rdr-dropdown-body {
  max-height: 240px;
  overflow-y: auto;
}
.rdr-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--rdr-text);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.rdr-dropdown-item:hover {
  background: var(--rdr-surface-hover);
  color: var(--rdr-text);
}
.rdr-check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--rdr-text);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rdr-check-option:hover {
  background: var(--rdr-surface-hover);
}
.rdr-check-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rdr-check-badge {
  font-size: 10.5px;
  color: var(--rdr-text-muted);
  background: var(--rdr-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Date picker dropdown */
.rdr-date-dropdown-menu {
  width: 320px;
  padding: 12px;
}
.rdr-date-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.rdr-date-preset-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--rdr-border);
  background: var(--rdr-surface-2);
  color: var(--rdr-text);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rdr-date-preset-item:hover {
  background: var(--rdr-surface-hover);
  border-color: var(--rdr-accent);
}
.rdr-date-preset-item.active {
  background: var(--rdr-accent);
  color: #ffffff;
  border-color: var(--rdr-accent);
  font-weight: 600;
}
.rdr-date-custom-divider {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  color: var(--rdr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 8px;
  border-top: 1px solid var(--rdr-border);
  padding-top: 8px;
}
.rdr-date-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rdr-date-custom-row input[type="date"] {
  flex: 1;
  padding: 6px 8px;
  font-size: 11.5px;
  border-radius: 6px;
  border: 1px solid var(--rdr-border);
  background: var(--rdr-surface);
  color: var(--rdr-text);
}

/* AI Summary Box & Progressive Disclosure */
.rdr-ai-summary-box {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.rdr-ai-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #818cf8;
  background: rgba(99, 102, 241, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.rdr-ai-summary-headline {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rdr-text);
  line-height: 1.4;
}
.rdr-btn-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.rdr-btn-link:hover {
  color: var(--rdr-text) !important;
}

/* ── Accessibility & Numeric Alignment (WCAG 2.2 AA) ── */
:focus-visible {
  outline: 2px solid var(--rdr-primary-500) !important;
  outline-offset: 2px !important;
}

.tabular-nums, .rdr-text-metric, .ins-td-r, .ins-th-r, .ins-mini-stat-value, .ins-kpi-delta {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   COMMAND PALETTE (Ctrl/Cmd+K)
   ============================================ */
.rdr-cmdk-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  color: var(--rdr-text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--rdr-transition), background var(--rdr-transition);
}
.rdr-cmdk-trigger:hover { border-color: var(--rdr-border-hover); background: var(--rdr-surface-hover); }
.rdr-cmdk-trigger i { font-size: 13px; }
.rdr-cmdk-kbd {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}
@media (max-width: 900px) {
  .rdr-cmdk-trigger span:not(.rdr-cmdk-kbd) { display: none; }
  .rdr-cmdk-kbd { display: none; }
}

.rdr-cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.rdr-cmdk-panel {
  width: 100%;
  max-width: 560px;
  max-height: 70vh;
  background: var(--rdr-elevated);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-lg);
  box-shadow: var(--rdr-shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 16px;
}
.rdr-cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rdr-border);
  color: var(--rdr-text-muted);
}
.rdr-cmdk-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  color: var(--rdr-text);
}
.rdr-cmdk-input-row input::placeholder { color: var(--rdr-text-muted); }
.rdr-cmdk-spinner { animation: ins-shimmer 1s linear infinite; display: inline-flex; }
.rdr-cmdk-esc {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 4px;
  padding: 2px 6px;
}
.rdr-cmdk-results { overflow-y: auto; padding: 8px; }
.rdr-cmdk-group { margin-bottom: 6px; }
.rdr-cmdk-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rdr-text-muted);
  padding: 6px 10px 4px;
}
.rdr-cmdk-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: var(--rdr-radius-sm);
  color: var(--rdr-text);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.rdr-cmdk-item i { color: var(--rdr-text-muted); font-size: 14px; width: 18px; text-align: center; }
.rdr-cmdk-item.active,
.rdr-cmdk-item:hover { background: var(--rdr-accent-light); }
.rdr-cmdk-item.active i,
.rdr-cmdk-item.active span:first-of-type { color: var(--rdr-accent); }
.rdr-cmdk-item-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--rdr-text-muted);
  text-transform: capitalize;
}
.rdr-cmdk-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--rdr-text-muted);
}

.rdr-content {
  padding: 24px 32px 48px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================
   PAGE HEADERS
   ============================================ */

.rdr-page-header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.rdr-page-header-text {}

.rdr-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--rdr-text);
  letter-spacing: -0.5px;
  margin-bottom: 3px;
}

.rdr-page-subtitle {
  color: var(--rdr-text-muted);
  font-size: 13.5px;
}

/* ============================================
   ANALYTICS MODE TOGGLE (Ads Analytics <-> Shopify Analytics)
   Shared across InsiderDashboard/Analytics and InsiderShopifyOverview/Index so both sides of
   the switch look and behave identically no matter which page you land on first.
   ============================================ */

.rdr-analytics-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--rdr-bg-alt, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--rdr-border);
  flex-shrink: 0;
}

.rdr-analytics-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.rdr-analytics-toggle-btn:hover {
  color: var(--rdr-text);
}

.rdr-analytics-toggle-btn.active {
  background: var(--rdr-primary, #5E8E3E);
  color: #fff;
}

/* ============================================
   CARDS
   ============================================ */

.rdr-card {
  background: var(--rdr-card);
  border-radius: var(--rdr-radius);
  border: 1px solid var(--rdr-border);
  box-shadow: var(--rdr-shadow);
}

.rdr-card-body {
  padding: 20px 24px;
}

.rdr-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rdr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--rdr-surface-2);
  border-radius: var(--rdr-radius) var(--rdr-radius) 0 0;
}

.rdr-card-header-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rdr-text);
}

/* ============================================
   FORM CONTROLS
   ============================================ */

.rdr-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 7px;
}

.rdr-input,
.rdr-select {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--rdr-text);
  background: var(--rdr-card);
  outline: none;
  transition: border-color var(--rdr-transition), box-shadow var(--rdr-transition);
  line-height: 1.4;
}

.rdr-input::placeholder { color: #aab4c4; }

.rdr-input:focus,
.rdr-select:focus {
  border-color: var(--rdr-accent);
  box-shadow: 0 0 0 3px var(--rdr-accent-ring);
}

.rdr-select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Reports page's own search/filter bar — had no CSS at all (relying on unstyled browser/Bootstrap
   input defaults, always a stark white box regardless of theme), just never obvious until dark
   mode made it stand out. Same token-based treatment as .rdr-input/.rdr-select above. */
.ins-reports-search-bar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ins-reports-search,
.ins-field-select {
  padding: 9px 13px;
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--rdr-text);
  background: var(--rdr-card);
  outline: none;
}
.ins-reports-search { flex: 1; }
.ins-reports-search:focus,
.ins-field-select:focus {
  border-color: var(--rdr-accent);
  box-shadow: 0 0 0 3px var(--rdr-accent-ring);
}

/* Search box container */
.rdr-search-panel {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--rdr-shadow);
}

.rdr-search-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.rdr-search-col-main { flex: 2; min-width: 180px; }
.rdr-search-col-sm { flex: 1; min-width: 130px; }
.rdr-search-col-xs { min-width: 90px; }

/* ============================================
   BUTTONS
   ============================================ */

.rdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--rdr-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all var(--rdr-transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.rdr-btn-primary {
  background: var(--rdr-accent);
  color: #fff;
}

.rdr-btn-primary:hover {
  background: var(--rdr-accent-hover);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
  transform: translateY(-1px);
}

.rdr-btn-secondary {
  background: var(--rdr-card);
  color: var(--rdr-text);
  border: 1px solid var(--rdr-border);
}

.rdr-btn-secondary:hover {
  background: var(--rdr-surface-hover);
  border-color: var(--rdr-border-hover);
  color: var(--rdr-text);
}

.rdr-btn-ghost {
  background: transparent;
  color: var(--rdr-text-muted);
  border: 1px solid var(--rdr-border);
}

.rdr-btn-ghost:hover {
  background: var(--rdr-bg);
  color: var(--rdr-text);
}

.rdr-btn-danger {
  background: transparent;
  color: var(--rdr-negative);
  border: 1px solid var(--rdr-negative-light);
}

.rdr-btn-danger:hover {
  background: var(--rdr-negative-light);
  border-color: var(--rdr-negative);
}

.rdr-btn-sm {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 6px;
}

.rdr-btn-icon {
  padding: 7px;
  border-radius: 6px;
}

/* ============================================
   BADGES
   ============================================ */

.rdr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Token-based, not hardcoded — these flip correctly under [data-theme="dark"] because the
   tokens themselves do (see :root[data-theme="dark"] near the top of this file). Hardcoded
   pastel hex values here were the actual cause of a real bug: bright light-mode badge colors
   sitting unchanged on top of dark cards once dark mode shipped, reading as a jarring, dated
   color clash instead of an intentional dark theme. */
.rdr-badge-green  { background: var(--rdr-positive-light); color: var(--rdr-positive); }
.rdr-badge-gray   { background: var(--rdr-surface-2); color: var(--rdr-text-muted); }
.rdr-badge-blue   { background: var(--rdr-info-light); color: var(--rdr-info); }
.rdr-badge-purple { background: var(--rdr-accent-light); color: var(--rdr-accent); }

/* ============================================
   AD CARDS GRID
   ============================================ */

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

.rdr-ad-card {
  background: var(--rdr-card);
  border-radius: var(--rdr-radius);
  border: 1px solid var(--rdr-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--rdr-transition), transform var(--rdr-transition), border-color var(--rdr-transition);
}

.rdr-ad-card:hover {
  box-shadow: var(--rdr-shadow-hover);
  border-color: var(--rdr-border-hover);
  transform: translateY(-2px);
}

.rdr-ad-preview {
  position: relative;
  background: #f4f6fa;
  border-bottom: 1px solid var(--rdr-border);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdr-ad-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rdr-ad-preview-placeholder {
  color: #d1d9e6;
  font-size: 36px;
}

.rdr-ad-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rdr-ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rdr-ad-page-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--rdr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdr-ad-text {
  font-size: 12.5px;
  color: var(--rdr-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.rdr-ad-meta {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rdr-ad-meta i { font-size: 10px; }

.rdr-ad-footer {
  padding: 10px 16px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid #f1f4f9;
}

/* ============================================
   RESULTS HEADER
   ============================================ */

.rdr-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.rdr-results-count {
  font-size: 13px;
  color: var(--rdr-text-muted);
}

.rdr-results-count strong {
  font-size: 15px;
  color: var(--rdr-text);
  font-weight: 700;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.rdr-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--rdr-card);
  border-radius: var(--rdr-radius);
  border: 1px solid var(--rdr-border);
}

.rdr-empty-icon {
  font-size: 40px;
  color: #cbd5e1;
  margin-bottom: 14px;
  display: block;
}

.rdr-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rdr-text);
  margin-bottom: 8px;
}

.rdr-empty-body {
  font-size: 13.5px;
  color: var(--rdr-text-muted);
  max-width: 340px;
  margin: 0 auto 20px;
}

/* ============================================
   ALERTS / TOASTS
   ============================================ */

.rdr-alert {
  padding: 11px 16px;
  border-radius: var(--rdr-radius-sm);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  border-width: 1px;
  border-style: solid;
}

.rdr-alert-danger  { background: var(--rdr-negative-light); border-color: var(--rdr-negative-light); color: var(--rdr-negative); }
.rdr-alert-success { background: var(--rdr-positive-light); border-color: var(--rdr-positive-light); color: var(--rdr-positive); }
.rdr-alert-warning { background: var(--rdr-warning-light); border-color: var(--rdr-warning-light); color: var(--rdr-warning); }
.rdr-alert-info    { background: var(--rdr-info-light); border-color: var(--rdr-info-light); color: var(--rdr-info); }

/* ============================================
   ATTENTION / PRIORITY LIST — Command Center's "Needs Attention" section.
   Severity communicated per-row (a colored dot + tinted left edge), not one
   uniform card-level border regardless of how serious each item actually is.
   ============================================ */

.rdr-attention-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rdr-attention-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--rdr-radius-sm);
  background: var(--rdr-surface-2);
  border-left: 3px solid transparent;
}

.rdr-attention-critical { border-left-color: var(--rdr-negative); }
.rdr-attention-warning  { border-left-color: var(--rdr-warning); }

.rdr-attention-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.rdr-attention-critical .rdr-attention-dot { background: var(--rdr-negative); }
.rdr-attention-warning  .rdr-attention-dot { background: var(--rdr-warning); }

.rdr-attention-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdr-attention-title { font-size: var(--fs-body); font-weight: 600; color: var(--rdr-text); }
.rdr-attention-detail { font-size: var(--fs-small); color: var(--rdr-text-muted); }

/* ============================================
   AI CARD / INSIGHT — the AI layer's subtle, restrained visual identity: a
   thin ai-colored left edge and a small AI-tinted icon, never a full glow
   or gradient background (see Section 64 of the redesign brief).
   ============================================ */

.rdr-ai-card { border-left: 3px solid var(--rdr-ai); }

.rdr-ai-insight {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--rdr-radius-sm);
  background: var(--rdr-surface-2);
  border-left: 3px solid var(--rdr-border);
}
.rdr-ai-insight-positive { border-left-color: var(--rdr-positive); }
.rdr-ai-insight-negative { border-left-color: var(--rdr-negative); }
.rdr-ai-insight-neutral  { border-left-color: var(--rdr-ai); }

/* ============================================
   LIST ITEMS (Watchlist / Swipe File)
   ============================================ */

.rdr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rdr-list-item {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: box-shadow var(--rdr-transition);
}

.rdr-list-item:hover {
  box-shadow: var(--rdr-shadow);
  border-color: var(--rdr-border-hover);
}

.rdr-list-item-main { flex: 1; min-width: 0; }
.rdr-list-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rdr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rdr-list-item-sub {
  font-size: 12px;
  color: var(--rdr-text-muted);
  margin-top: 2px;
}

/* Folder card */
.rdr-folder {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--rdr-shadow);
}

.rdr-folder-header {
  padding: 13px 20px;
  background: #fafbfd;
  border-bottom: 1px solid var(--rdr-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.rdr-folder-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--rdr-text);
  flex: 1;
}

.rdr-folder-item {
  padding: 12px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--rdr-text-muted);
}

.rdr-folder-item:last-child { border-bottom: none; }

.rdr-folder-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #b0bcce;
}

/* ============================================
   NOTIFICATIONS
   ============================================ */

.rdr-notification {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 14px 18px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow var(--rdr-transition);
}

.rdr-notification.unread {
  border-left: 3px solid var(--rdr-accent);
  background: var(--rdr-accent-light);
}

.rdr-notification-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--rdr-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rdr-accent);
  font-size: 16px;
  flex-shrink: 0;
}

.rdr-notification.unread .rdr-notification-icon {
  background: var(--rdr-accent);
  color: #fff;
}

.rdr-notification-body { flex: 1; }
.rdr-notification-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rdr-text);
  margin-bottom: 3px;
}
.rdr-notification-text {
  font-size: 13px;
  color: var(--rdr-text-muted);
}
.rdr-notification-time {
  font-size: 11.5px;
  color: var(--rdr-text-muted);
  margin-top: 5px;
}

/* ============================================
   WORKSPACE
   ============================================ */

.rdr-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.rdr-stat {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 18px 20px;
  box-shadow: var(--rdr-shadow);
}

.rdr-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--rdr-accent);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 5px;
}

.rdr-stat-label {
  font-size: 12px;
  color: var(--rdr-text-muted);
  font-weight: 500;
}

.rdr-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.rdr-info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rdr-info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--rdr-text-muted);
}

.rdr-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--rdr-text);
}

/* ============================================
   HOME HERO
   ============================================ */

.rdr-hero {
  padding: 12px 0 32px;
}

.rdr-hero-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--rdr-accent);
  margin-bottom: 10px;
}

.rdr-hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--rdr-text);
}

.rdr-hero-title span {
  background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rdr-hero-sub {
  font-size: 15px;
  color: var(--rdr-text-muted);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 28px;
}

.rdr-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================
   AUTH PAGES
   ============================================ */

.rdr-auth-shell {
  min-height: 100vh;
  background: var(--rdr-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.rdr-auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  text-decoration: none;
}

.rdr-auth-logo-icon {
  width: 38px;
  height: 38px;
  background: var(--rdr-accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(99,102,241,.4);
}

.rdr-auth-logo-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--rdr-text);
  letter-spacing: -0.5px;
}

.rdr-auth-card {
  background: var(--rdr-card);
  border-radius: 16px;
  border: 1px solid var(--rdr-border);
  box-shadow: var(--rdr-shadow-md);
  padding: 36px;
  width: 100%;
  max-width: 420px;
}

.rdr-auth-card h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.4px;
}

.rdr-auth-card p.rdr-page-subtitle {
  margin-bottom: 24px;
}

/* ============================================
   LOAD MORE
   ============================================ */

.rdr-load-more-wrap {
  text-align: center;
  padding: 32px 0 0;
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d9e6; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #b0bcce; }

/* ============================================
   BOOTSTRAP OVERRIDES
   ============================================ */

.form-control, .form-select {
  font-family: inherit;
  font-size: 13.5px;
  border-color: var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  color: var(--rdr-text);
  /* background-color, not the `background` shorthand — .form-select draws its caret via
     background-image. Without this, Bootstrap's hardcoded white background stayed put in dark
     mode while the text flipped to the light dark-mode token: light-on-white, unreadable. */
  background-color: var(--rdr-card);
}

.form-control:focus, .form-select:focus {
  border-color: var(--rdr-accent);
  box-shadow: 0 0 0 3px var(--rdr-accent-ring);
  color: var(--rdr-text);
  background-color: var(--rdr-card);
}

.form-control::placeholder { color: var(--rdr-text-muted); }
.form-control:disabled, .form-select:disabled { background-color: var(--rdr-elevated); color: var(--rdr-text-muted); }

/* A <select>'s open option list is drawn by the browser, not by the page — color-scheme tells it
   to use its dark native popup, and the explicit option colors cover Chromium on Windows. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] .form-select {
  /* Bootstrap 5.1's caret is a hardcoded #343a40 SVG — near-invisible on the dark card. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b4b9c2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background-color: var(--rdr-card); color: var(--rdr-text); }
.form-select option:disabled { color: var(--rdr-text-muted); }

.btn { font-family: inherit; }

/* Raw Bootstrap `.alert-*` used directly in a couple of views (e.g. Connected Accounts' sync
   error boxes) instead of the app's own `.rdr-alert-*` — Bootstrap's own hardcoded pastel
   colors don't adapt to dark mode at all, showing as a jarring light patch on a dark card.
   Same token treatment as `.rdr-alert-*` above, covering these at the source instead of
   hunting down and converting every individual usage. */
.alert-danger  { background-color: var(--rdr-negative-light) !important; border-color: var(--rdr-negative-light) !important; color: var(--rdr-negative) !important; }
.alert-success { background-color: var(--rdr-positive-light) !important; border-color: var(--rdr-positive-light) !important; color: var(--rdr-positive) !important; }
.alert-warning { background-color: var(--rdr-warning-light) !important; border-color: var(--rdr-warning-light) !important; color: var(--rdr-warning) !important; }
.alert-info    { background-color: var(--rdr-info-light) !important; border-color: var(--rdr-info-light) !important; color: var(--rdr-info) !important; }

/* Global Bootstrap 5.1 dark mode and utility overrides */
.bg-body {
  background-color: var(--rdr-card) !important;
  color: var(--rdr-text) !important;
}

:root[data-theme="dark"] {
  --bs-body-bg: #0b0d12;
  --bs-body-color: #e8eaed;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-light-subtle,
:root[data-theme="dark"] .bg-body-tertiary,
:root[data-theme="dark"] .bg-body-secondary {
  background-color: var(--rdr-surface-2) !important;
  color: var(--rdr-text) !important;
}

:root[data-theme="dark"] .card {
  background-color: var(--rdr-card);
  border-color: var(--rdr-border);
  color: var(--rdr-text);
}

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
  background-color: var(--rdr-surface-2);
  border-color: var(--rdr-border);
  color: var(--rdr-text);
}

:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--rdr-card);
  border-color: var(--rdr-border);
  color: var(--rdr-text);
  box-shadow: var(--rdr-shadow-md);
}

:root[data-theme="dark"] .dropdown-item {
  color: var(--rdr-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--rdr-surface-hover);
  color: var(--rdr-text);
}

:root[data-theme="dark"] .dropdown-divider {
  border-color: var(--rdr-border);
}

:root[data-theme="dark"] .modal-content {
  background-color: var(--rdr-card);
  border-color: var(--rdr-border);
  color: var(--rdr-text);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
  border-color: var(--rdr-border);
}

:root[data-theme="dark"] .text-dark {
  color: var(--rdr-text) !important;
}

:root[data-theme="dark"] .text-muted {
  color: var(--rdr-text-muted) !important;
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
  border-color: var(--rdr-border) !important;
}

:root[data-theme="dark"] .table {
  color: var(--rdr-text);
  border-color: var(--rdr-border);
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--rdr-border);
  color: var(--rdr-text);
}

:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--rdr-surface-2);
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--rdr-surface-hover);
}

.form-check-input {
  background-color: var(--rdr-card);
  border-color: var(--rdr-border);
}

.form-check-input:checked {
  background-color: var(--rdr-accent);
  border-color: var(--rdr-accent);
}

.form-check-label {
  color: var(--rdr-text);
}

/* Platform User Management Styling */
.plt-ws-card {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 8px 10px;
  color: var(--rdr-text);
  margin-bottom: 6px;
}

.plt-manage-box {
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 12px;
  color: var(--rdr-text);
}

.plt-manage-panel {
  margin-top: 6px;
  background: var(--rdr-elevated);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 14px;
  width: 400px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--rdr-shadow-md);
  color: var(--rdr-text);
}

.plt-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--rdr-card);
  border: 1px solid var(--rdr-accent);
  border-radius: var(--rdr-radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: var(--rdr-shadow-md);
  color: var(--rdr-text);
}

.plt-bulk-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plt-user-cb {
  cursor: pointer;
}
/* ── Bootstrap bridge (UX-06, one visual language) ─────────────────────────────────────────────
   ~2,400 class uses across ~100 views still say Bootstrap: text-muted, bg-light, badge bg-*, btn-*,
   border, table... Bootstrap 5.1 draws those in its own palette (and several, like .text-muted,
   .border and .table, in fixed light-mode colours that stay put in dark mode). Some views also use
   5.3-only classes (bg-body-tertiary, *-subtle, *-emphasis) that 5.1 does not have, so they rendered
   as nothing. Same approach as the .alert-* rules above: point them all at the --rdr-* tokens here,
   once, instead of rewriting every view. New markup should still use the rdr-* components. */
:root {
  --bs-primary-rgb: 99,102,241;      /* --rdr-accent */
  --bs-secondary-rgb: 100,116,139;   /* --rdr-text-muted */
  --bs-success-rgb: 22,163,74;       /* --rdr-positive */
  --bs-info-rgb: 37,99,235;          /* --rdr-info */
  --bs-warning-rgb: 217,119,6;       /* --rdr-warning */
  --bs-danger-rgb: 220,38,38;        /* --rdr-negative */
  --bs-light-rgb: 248,250,252;       /* --rdr-surface-2 */
  --bs-dark-rgb: 15,23,42;           /* --rdr-text */
  --bs-body-rgb: 15,23,42;
  --bs-primary: #6366f1; --bs-secondary: #64748b; --bs-success: #16a34a; --bs-info: #2563eb;
  --bs-warning: #d97706; --bs-danger: #dc2626; --bs-light: #f8fafc; --bs-dark: #0f172a;
}
:root[data-theme="dark"] {
  --bs-primary-rgb: 129,140,248;     /* dark --rdr-accent #818cf8 */
  --bs-secondary-rgb: 123,130,145;   /* dark --rdr-text-muted #7b8291 */
  --bs-success-rgb: 74,222,128;      /* #4ade80 */
  --bs-info-rgb: 96,165,250;         /* #60a5fa */
  --bs-warning-rgb: 251,191,36;      /* #fbbf24 */
  --bs-danger-rgb: 248,113,113;      /* #f87171 */
  --bs-light-rgb: 25,28,35;          /* dark --rdr-surface-2: "light" panels become the dark surface */
  --bs-dark-rgb: 232,234,237;        /* dark --rdr-text: "dark" text stays readable */
  --bs-body-rgb: 232,234,237;
  --bs-primary: #818cf8; --bs-secondary: #7b8291; --bs-success: #4ade80; --bs-info: #60a5fa;
  --bs-warning: #fbbf24; --bs-danger: #f87171; --bs-light: #191c23; --bs-dark: #e8eaed;
}

/* Fixed-colour 5.1 utilities */
/* bg-dark + text-light mark code/console blocks: they stay dark with light text in both themes */
.bg-dark { background-color: #0f172a !important; }
.text-light { color: #e2e8f0 !important; }
.text-muted { color: var(--rdr-text-muted) !important; }
.bg-white { background-color: var(--rdr-card) !important; }
.border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--rdr-border) !important; }
.border-primary { border-color: var(--rdr-accent) !important; }
.border-secondary { border-color: var(--rdr-border-strong) !important; }
.border-success { border-color: var(--rdr-positive) !important; }
.border-danger { border-color: var(--rdr-negative) !important; }
.border-warning { border-color: var(--rdr-warning) !important; }
.border-info { border-color: var(--rdr-info) !important; }
.border-light { border-color: var(--rdr-border) !important; }

/* 5.3-only classes the views use; 5.1 ignored them */
.bg-body-tertiary { background-color: var(--rdr-surface-2) !important; }
.bg-body-secondary { background-color: var(--rdr-surface-subtle) !important; }
.text-body-secondary { color: var(--rdr-text-muted) !important; }
.bg-primary-subtle { background-color: var(--rdr-accent-light) !important; }
.bg-secondary-subtle, .bg-light-subtle { background-color: var(--rdr-surface-subtle) !important; }
.bg-dark-subtle { background-color: var(--rdr-border) !important; }
.bg-success-subtle { background-color: var(--rdr-positive-light) !important; }
.bg-danger-subtle { background-color: var(--rdr-negative-light) !important; }
.bg-warning-subtle { background-color: var(--rdr-warning-light) !important; }
.bg-info-subtle { background-color: var(--rdr-info-light) !important; }
.border-primary-subtle { border-color: var(--rdr-accent-ring) !important; }
.border-secondary-subtle, .border-light-subtle, .border-dark-subtle { border-color: var(--rdr-border) !important; }
.border-success-subtle { border-color: var(--rdr-positive-border) !important; }
.border-danger-subtle { border-color: var(--rdr-negative-border) !important; }
.border-warning-subtle { border-color: var(--rdr-warning-border) !important; }
.border-info-subtle { border-color: var(--rdr-info-border) !important; }
.text-primary-emphasis { color: var(--rdr-accent-hover) !important; }
.text-secondary-emphasis { color: var(--rdr-text-secondary) !important; }
.text-success-emphasis { color: var(--rdr-positive-strong) !important; }
.text-danger-emphasis { color: var(--rdr-negative-strong) !important; }
.text-warning-emphasis { color: var(--rdr-warning-strong) !important; }
.text-info-emphasis { color: var(--rdr-info-strong) !important; }

/* Badges: Bootstrap's solid blocks become the app's soft pills (.rdr-badge), readable in both themes */
.badge { border-radius: var(--rdr-radius-full); font-weight: 600; }
.badge.bg-primary { background-color: var(--rdr-accent-light) !important; color: var(--rdr-accent) !important; }
.badge.bg-success { background-color: var(--rdr-positive-light) !important; color: var(--rdr-positive-strong) !important; }
.badge.bg-danger { background-color: var(--rdr-negative-light) !important; color: var(--rdr-negative-strong) !important; }
.badge.bg-warning { background-color: var(--rdr-warning-light) !important; color: var(--rdr-warning-strong) !important; }
.badge.bg-info { background-color: var(--rdr-info-light) !important; color: var(--rdr-info-strong) !important; }
.badge.bg-secondary, .badge.bg-light { background-color: var(--rdr-surface-subtle) !important; color: var(--rdr-text-secondary) !important; box-shadow: inset 0 0 0 1px var(--rdr-border); }
.badge.bg-dark { background-color: var(--rdr-text) !important; color: var(--rdr-card) !important; }

/* Buttons: same looks as .rdr-btn-primary / -secondary / -ghost / -danger */
.btn-primary { color: #fff; background-color: var(--rdr-accent); border-color: var(--rdr-accent); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #fff; background-color: var(--rdr-accent-hover); border-color: var(--rdr-accent-hover); }
.btn-outline-primary { color: var(--rdr-accent); border-color: var(--rdr-accent); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { color: #fff; background-color: var(--rdr-accent); border-color: var(--rdr-accent); }
.btn-secondary { color: var(--rdr-text); background-color: var(--rdr-card); border-color: var(--rdr-border); }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active { color: var(--rdr-text); background-color: var(--rdr-surface-hover); border-color: var(--rdr-border-hover); }
.btn-outline-secondary, .btn-outline-light { color: var(--rdr-text-secondary); border-color: var(--rdr-border); background-color: transparent; }
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-outline-light:hover, .btn-outline-light:active { color: var(--rdr-text); background-color: var(--rdr-surface-hover); border-color: var(--rdr-border-hover); }
.btn-success { color: #fff; background-color: var(--rdr-positive); border-color: var(--rdr-positive); }
.btn-outline-success { color: var(--rdr-positive); border-color: var(--rdr-positive-border); }
.btn-outline-success:hover { color: var(--rdr-positive-strong); background-color: var(--rdr-positive-light); border-color: var(--rdr-positive); }
.btn-danger { color: #fff; background-color: var(--rdr-negative); border-color: var(--rdr-negative); }
.btn-outline-danger { color: var(--rdr-negative); border-color: var(--rdr-negative-border); }
.btn-outline-danger:hover, .btn-outline-danger:active { color: var(--rdr-negative-strong); background-color: var(--rdr-negative-light); border-color: var(--rdr-negative); }
.btn-warning { color: var(--rdr-warning-strong); background-color: var(--rdr-warning-light); border-color: var(--rdr-warning-border); }
.btn-outline-warning { color: var(--rdr-warning); border-color: var(--rdr-warning-border); }
.btn-outline-warning:hover { color: var(--rdr-warning-strong); background-color: var(--rdr-warning-light); border-color: var(--rdr-warning); }
.btn-dark { color: var(--rdr-card); background-color: var(--rdr-text); border-color: var(--rdr-text); }

/* Tables: 5.1 hard-codes dark text and light-grey lines */
.table { color: var(--rdr-text); border-color: var(--rdr-border); --bs-table-striped-color: var(--rdr-text); --bs-table-striped-bg: var(--rdr-surface-2);
         --bs-table-active-color: var(--rdr-text); --bs-table-active-bg: var(--rdr-surface-hover); --bs-table-hover-color: var(--rdr-text); --bs-table-hover-bg: var(--rdr-surface-hover); }
.table-light { --bs-table-bg: var(--rdr-surface-2); --bs-table-striped-bg: var(--rdr-surface-subtle); --bs-table-striped-color: var(--rdr-text);
               --bs-table-hover-bg: var(--rdr-surface-hover); --bs-table-hover-color: var(--rdr-text); color: var(--rdr-text); border-color: var(--rdr-border); }
/* ── End of Bootstrap bridge ── */

/* ============================================
   RESPONSIVE
   ============================================ */

/* Sidebar collapse toggle — deliberately NOT gated behind a max-width media query. A media
   query can silently never match (a mobile browser's "Desktop site" mode reports a fake wide
   viewport to both CSS and JS alike — there is no way to see through that from either side),
   which would make the hamburger button permanently invisible and the sidebar permanently
   un-collapsible with zero feedback that anything was wrong. Instead this is a plain class
   toggle that works identically at every screen width; only the *default initial state* (open
   vs collapsed on first load) is decided from the viewport, once, in JS — see _Layout.cshtml's
   toggle script. This also happens to satisfy the redesign brief's own Section 13 ask for a
   collapsible sidebar with remembered state, not just a mobile-only drawer. */
.rdr-mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--rdr-text);
  padding: 4px 10px;
  margin-right: 4px;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) {
  --rdr-sidebar-w: 68px;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  transform: none !important;
  overflow-x: hidden !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-main {
  margin-left: 68px !important;
  max-width: calc(100vw - 68px) !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-content {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
/* The dark backdrop only actually renders visible on narrow screens (see the media query
   below) — on desktop, collapsing the sidebar just lets the main content take the freed space,
   no overlay needed. The backdrop element and its click-to-close handler still exist at every
   width; it simply has nothing to show on wide screens. */
.rdr-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 190;
}

/* ── Insider Analytics ───────────────────────────────────────────────────── */

.rdr-nav-divider {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rdr-text-muted);
  padding: 16px 12px 4px;
  opacity: 0.6;
}

/* Same visual treatment as the Raydar brand mark (.rdr-brand-icon), scaled down for the nav —
   a small accent-colored badge + label instead of a plain uppercase divider string. */
.rdr-nav-divider-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--rdr-text-muted);
}
.rdr-nav-divider-icon {
  width: 20px;
  height: 20px;
  background: var(--rdr-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99,102,241,.35);
}

/* ============================================
   MODULAR SIDEBAR (Advizer Categorized Modules)
   ============================================ */
.rdr-nav-core-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--rdr-text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  transition: all var(--rdr-transition);
}
.rdr-nav-core-item:hover {
  background: var(--rdr-surface-hover);
  border-color: var(--rdr-accent);
  color: #fff;
}
.rdr-nav-core-item.active {
  background: var(--rdr-accent-light);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.4);
}
.rdr-nav-core-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdr-nav-section-title {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  padding: 6px 10px 4px;
}

.rdr-module-accordion {
  margin-bottom: 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.rdr-module-header {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.rdr-module-header:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.rdr-module-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: transform 0.15s ease;
}
.rdr-module-icon-manage {
  background: rgba(24, 119, 242, 0.15);
  color: #1877f2;
  border-color: rgba(24, 119, 242, 0.3);
}
.rdr-module-icon-optimize {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.3);
}
.rdr-module-icon-analyze {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.rdr-module-icon-shopify {
  background: rgba(0, 128, 96, 0.15);
  color: #10b981;
  border-color: rgba(0, 128, 96, 0.3);
}
.rdr-module-icon-research {
  background: rgba(2, 132, 199, 0.15);
  color: #38bdf8;
  border-color: rgba(2, 132, 199, 0.3);
}
.rdr-module-icon-settings {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border-color: rgba(100, 116, 139, 0.3);
}

.rdr-module-name {
  font-size: 12.5px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rdr-module-chevron {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.rdr-module-chevron.is-collapsed {
  transform: rotate(-90deg);
}

.rdr-module-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.rdr-module-badge-core {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.rdr-module-badge-active {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.rdr-module-badge-addon {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.rdr-module-items {
  margin-left: 20px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rdr-module-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.rdr-module-subitem i {
  font-size: 12px;
  width: 15px;
  text-align: center;
  opacity: 0.8;
}
.rdr-module-subitem:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.rdr-module-subitem.active {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
  font-weight: 600;
  border-left: 2px solid var(--rdr-accent);
}
.rdr-subitem-lock {
  font-size: 10px;
  color: #f59e0b;
  opacity: 0.8;
}

/* Modal for Upgrade / Add Module prompt */
.rdr-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rdr-modal-content {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.rdr-nav-group-toggle {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.15s ease;
}
.rdr-nav-group-toggle:hover {
  opacity: 0.85;
}
.rdr-nav-group-chevron {
  font-size: 11px;
  color: var(--rdr-text-muted);
  margin-left: auto;
  transition: transform 0.2s ease;
}
.rdr-nav-group-chevron.is-collapsed {
  transform: rotate(-90deg);
}
.rdr-nav-group-toggle:focus-visible { outline: 2px solid var(--rdr-accent); outline-offset: 2px; border-radius: 6px; }
[x-cloak] { display: none !important; }
[x-show][style*="display: none"] { display: none !important; }

.rdr-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.rdr-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--rdr-text);
  margin: 0;
}
.rdr-page-sub {
  font-size: 13px;
  color: var(--rdr-text-muted);
  margin: 2px 0 0;
}

/* KPI grid */
.insider-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}
.insider-kpi {
  padding: 16px 18px;
}
.insider-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rdr-text-muted);
  margin-bottom: 6px;
}
.insider-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--rdr-text);
}

/* Sparkline / bar chart */
.insider-chart-header {
  margin-bottom: 12px;
}
.insider-sparkline-wrap {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100px;
  padding: 8px 0 0;
}
.insider-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
  cursor: default;
}
.insider-bar {
  width: 100%;
  background: var(--rdr-accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: opacity 0.15s;
}
.insider-bar-col:hover .insider-bar { opacity: 0.75; }
.insider-bar-label {
  font-size: 9px;
  color: var(--rdr-text-muted);
  white-space: nowrap;
}

/* Tables */
.insider-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.insider-table th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rdr-text-muted);
  border-bottom: 1px solid var(--rdr-border);
  white-space: nowrap;
}
.insider-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rdr-border);
  color: var(--rdr-text);
  vertical-align: middle;
}
.insider-table tr:last-child td { border-bottom: none; }
.insider-table tbody tr:hover td { background: var(--rdr-surface-2); }
.insider-table-nested th { background: var(--rdr-surface-2); font-size: 10px; }
.insider-table-nested { border-top: 2px solid var(--rdr-accent); }

.insider-loading {
  padding: 16px;
  color: var(--rdr-text-muted);
  font-size: 13px;
}

/* Creative grid */
.insider-creative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.insider-creative-card { padding: 0; overflow: hidden; }
.insider-creative-thumb {
  aspect-ratio: 1/1;
  background: var(--rdr-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative; /* positioning context for .ins-creative-overlay's inset:0 and any
                          absolutely-positioned carousel controls inside it */
}
.insider-creative-thumb img { width: 100%; height: 100%; object-fit: cover; }
.insider-creative-thumb--empty { color: var(--rdr-text-muted); font-size: 32px; }
.insider-creative-body { padding: 12px 14px 8px; }
.insider-creative-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.insider-creative-copy { font-size: 12px; color: var(--rdr-text-muted); margin-bottom: 6px; line-height: 1.4; }
.insider-creative-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--rdr-border);
  background: var(--rdr-surface-2);
}
.insider-metric { display: flex; flex-direction: column; }
.insider-metric-label { font-size: 10px; color: var(--rdr-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.insider-metric-value { font-size: 13px; font-weight: 600; color: var(--rdr-text); }

/* Audience breakdowns */
.insider-breakdown-row { margin-bottom: 12px; }
.insider-progress { height: 6px; border-radius: 99px; background: var(--rdr-border); }
.insider-progress .progress-bar { background: var(--rdr-accent); border-radius: 99px; }

/* Connected account cards */
.insider-account-card { padding: 18px; }
.insider-account-meta { font-size: 12px; color: var(--rdr-text-muted); display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }

/* Badge extras */
.rdr-badge-red    { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.rdr-badge-indigo { background: var(--rdr-accent-light); color: var(--rdr-accent); }
}

/* ============================================
   INSIDER — Animations & UX Polish
   ============================================ */

/* ── Keyframes ── */
@keyframes ins-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ins-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes ins-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes ins-progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ins-row-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ins-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Page entrance ── */
.ins-page-enter {
  animation: ins-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Skeleton shimmer ── */
.ins-skeleton {
  background: linear-gradient(90deg,
    var(--rdr-border) 25%,
    var(--rdr-surface-hover) 50%,
    var(--rdr-border) 75%);
  background-size: 1200px 100%;
  animation: ins-shimmer 1.5s infinite linear;
  border-radius: 6px;
}
.ins-skel-label { height: 10px; width: 68px; margin-bottom: 10px; }
.ins-skel-value { height: 30px; width: 100px; }
.ins-skel-bar   { border-radius: 3px 3px 0 0; }
.ins-skel-row   { height: 44px; }

/* ── KPI card enhancements ── */
.insider-kpi {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: ins-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.insider-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99,102,241,.14), 0 2px 6px rgba(0,0,0,.06);
}
.insider-kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rdr-accent), #818cf8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.insider-kpi:hover::after { transform: scaleX(1); }

/* KPI stagger */
.insider-kpi:nth-child(1) { animation-delay: 0.00s; }
.insider-kpi:nth-child(2) { animation-delay: 0.06s; }
.insider-kpi:nth-child(3) { animation-delay: 0.12s; }
.insider-kpi:nth-child(4) { animation-delay: 0.18s; }
.insider-kpi:nth-child(5) { animation-delay: 0.24s; }
.insider-kpi:nth-child(6) { animation-delay: 0.30s; }
.insider-kpi:nth-child(7) { animation-delay: 0.36s; }

/* KPI icon pill */
.insider-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--rdr-accent-light);
  color: var(--rdr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 12px;
}

/* ── Bar chart ── */
.insider-bar {
  transform-origin: center bottom;
  animation: ins-bar-grow 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) both;
  cursor: default;
}
.insider-bar-col {
  position: relative;
}
/* Tooltip via data-tooltip */
.insider-bar-col[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(var(--bar-offset, 100%) + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, bottom 0.15s;
  z-index: 20;
}
.insider-bar-col[data-tooltip]:hover::before {
  opacity: 1;
  bottom: calc(var(--bar-offset, 100%) + 10px);
}

/* ── Creative cards ── */
.insider-creative-card {
  animation: ins-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.insider-creative-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}
.insider-creative-card:nth-child(1)  { animation-delay: 0.04s; }
.insider-creative-card:nth-child(2)  { animation-delay: 0.08s; }
.insider-creative-card:nth-child(3)  { animation-delay: 0.12s; }
.insider-creative-card:nth-child(4)  { animation-delay: 0.16s; }
.insider-creative-card:nth-child(5)  { animation-delay: 0.20s; }
.insider-creative-card:nth-child(6)  { animation-delay: 0.24s; }
.insider-creative-card:nth-child(7)  { animation-delay: 0.28s; }
.insider-creative-card:nth-child(8)  { animation-delay: 0.32s; }
.insider-creative-card:nth-child(9)  { animation-delay: 0.36s; }
.insider-creative-card:nth-child(10) { animation-delay: 0.40s; }
.insider-creative-card:nth-child(n+11) { animation-delay: 0.44s; }

/* Image hover zoom + overlay */
.insider-creative-thumb img {
  transition: transform 0.4s ease;
}
.insider-creative-card:hover .insider-creative-thumb img {
  transform: scale(1.07);
}
.ins-creative-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.72) 0%, rgba(15,23,42,.15) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  opacity: 0;
  transition: opacity 0.25s;
}
.insider-creative-card:hover .ins-creative-overlay { opacity: 1; }
.ins-creative-overlay-label {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Table row entrance ── */
.insider-table tbody tr {
  animation: ins-row-in 0.28s ease both;
}
.insider-table tbody tr:nth-child(1)  { animation-delay: 0.04s; }
.insider-table tbody tr:nth-child(2)  { animation-delay: 0.08s; }
.insider-table tbody tr:nth-child(3)  { animation-delay: 0.12s; }
.insider-table tbody tr:nth-child(4)  { animation-delay: 0.16s; }
.insider-table tbody tr:nth-child(5)  { animation-delay: 0.20s; }
.insider-table tbody tr:nth-child(6)  { animation-delay: 0.24s; }
.insider-table tbody tr:nth-child(7)  { animation-delay: 0.28s; }
.insider-table tbody tr:nth-child(8)  { animation-delay: 0.32s; }
.insider-table tbody tr:nth-child(9)  { animation-delay: 0.36s; }
.insider-table tbody tr:nth-child(10) { animation-delay: 0.40s; }
.insider-table tbody tr:nth-child(n+11) { animation-delay: 0.44s; }

/* ── Progress bar animation ── */
.insider-progress .progress-bar {
  transform-origin: left center;
  animation: ins-progress-fill 0.9s cubic-bezier(0.34, 1.1, 0.64, 1) both 0.2s;
}

/* ── Expand button rotate ── */
.insider-expand-btn i {
  transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1);
  display: inline-block;
}
.insider-expand-btn.ins-expanded i {
  transform: rotate(180deg);
}

/* Ad sets reveal */
.insider-adsets-row:not(.d-none) {
  animation: ins-fade-up 0.25s ease both;
}

/* ── Trend badges ── */
.ins-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  margin-top: 5px;
}
.ins-trend-up   { color: #16a34a; background: #dcfce7; }
.ins-trend-down { color: #dc2626; background: #fee2e2; }
.ins-trend-flat { color: #64748b; background: #f1f5f9; }

/* ── Loading skeleton grid ── */
.ins-skeleton-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}
.ins-skeleton-kpi-card {
  background: var(--rdr-card);
  border-radius: var(--rdr-radius);
  box-shadow: var(--rdr-shadow);
  padding: 16px 18px;
}
.ins-skeleton-chart {
  background: var(--rdr-card);
  border-radius: var(--rdr-radius);
  box-shadow: var(--rdr-shadow);
  padding: 20px;
  margin-top: 16px;
}
.ins-skeleton-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
  margin-top: 12px;
}

/* ============================================================
   INSIDER ANALYTICS PLATFORM — Phase 2 Styles
   ============================================================ */

/* Page layout */
.ins-analytics {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
}

/* Toolbar */
.ins-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ins-toolbar-left { display: flex; align-items: center; gap: 12px; }
.ins-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-page-title { font-size: 1.25rem; font-weight: 700; color: var(--rdr-text); display: flex; align-items: center; gap: 8px; }

/* Date range */
.ins-date-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ins-btn-range { padding: 4px 10px; border: 1px solid var(--rdr-border); border-radius: 6px; background: var(--rdr-card); font-size: 12px; font-weight: 500; color: var(--rdr-text-muted); cursor: pointer; transition: var(--rdr-transition); }
.ins-btn-range:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.ins-btn-range.active { background: var(--rdr-accent); border-color: var(--rdr-accent); color: #fff; }
.ins-btn-range-sm { padding: 3px 8px; font-size: 11px; }
.ins-date-input { height: 30px; padding: 0 8px; border: 1px solid var(--rdr-border); border-radius: 6px; font-size: 12px; color: var(--rdr-text); background: var(--rdr-card); }
.ins-date-sep { color: var(--rdr-text-muted); font-size: 12px; }

/* Toggle */
.ins-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rdr-text-muted); cursor: pointer; user-select: none; }
.ins-toggle-cb { display: none; }
.ins-toggle-track { width: 32px; height: 18px; background: var(--rdr-border); border-radius: 9px; position: relative; transition: background 0.2s; }
.ins-toggle-cb:checked + .ins-toggle-track { background: var(--rdr-accent); }
.ins-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.ins-toggle-cb:checked + .ins-toggle-track .ins-toggle-thumb { left: 16px; }

/* Buttons */
.ins-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--rdr-transition); }
.ins-btn-ghost { background: var(--rdr-card); border: 1px solid var(--rdr-border); color: var(--rdr-text); }
.ins-btn-ghost:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.ins-btn-sm { padding: 4px 9px; font-size: 12px; }
.ins-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ins-spin { animation: ins-spin 0.8s linear infinite; }
@keyframes ins-spin { to { transform: rotate(360deg); } }

/* KPI Row */
/* Base rule for every other page using this class (Analytics/Dashboard/Home/Inventory) — flows
   however many equal-width columns fit. Ads Intelligence overrides grid-template-columns inline
   (see kpiColumns()) so its row always wraps into exactly 2 equal-size rows regardless of
   viewport width; grid-auto-rows here still makes both of those rows equal height. */
.ins-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }

/* Responsive Even Grid Columns for KPI Goals */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .ins-kpi-row.ins-kpi-cols-8,
  .ins-kpi-row.ins-kpi-cols-6,
  .ins-kpi-row.ins-kpi-cols-5,
  .ins-kpi-row.ins-kpi-row-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1025px) {
  .ins-kpi-row.ins-kpi-cols-8,
  .ins-kpi-row.ins-kpi-row-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ins-kpi-row.ins-kpi-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ins-kpi-row.ins-kpi-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .ins-kpi-row.ins-kpi-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* 8 per row only when each card gets ~180px; at 1440 (sidebar open) 8 cut off labels and values
   ("IMPRES...", "EGP 381,8..."), so 4 per row until the screen is really wide. */
@media (min-width: 1800px) {
  .ins-kpi-row.ins-kpi-cols-8,
  .ins-kpi-row.ins-kpi-row-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
.ins-kpi-card {
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  min-height: 120px;
}
.ins-kpi-card:hover {
  border-color: #6366f1;
  box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
.ins-kpi-card.selected {
  border-color: #6366f1;
  background: rgba(238, 242, 255, 0.45);
  box-shadow: 0 0 0 1.5px #6366f1, 0 8px 20px -4px rgba(99, 102, 241, 0.15);
}

/* KPI Card Header (Label + Icon Pill) */
.rdr-kpi-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}
.rdr-kpi-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--rdr-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 26px;
  flex: 1;
}
.rdr-kpi-icon-pill {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rdr-bg-subtle, #f1f5f9);
  color: var(--rdr-text-muted, #64748b);
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ins-kpi-card:hover .rdr-kpi-icon-pill {
  background: #e2e8f0;
  color: #334155;
  transform: scale(1.08);
}
.ins-kpi-card.selected .rdr-kpi-icon-pill,
.rdr-kpi-icon-pill.is-active {
  background: #4f46e5 !important;
  color: #ffffff !important;
}

/* KPI Card Body (Value) */
.rdr-kpi-card-body {
  margin: 6px 0 4px 0;
}
.ins-kpi-card .rdr-metric-tile-value {
  font-size: clamp(15px, 1.2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--rdr-text, #0f172a);
}

/* Bottom Active Accent Indicator */
.rdr-kpi-active-indicator {
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  background: #4f46e5;
  border-radius: 3px 3px 0 0;
}

/* KPI Goal Toolbar (Banner UI) */
.rdr-kpi-toolbar {
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.rdr-kpi-toolbar-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rdr-text-muted, #64748b);
}
.rdr-segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--rdr-bg-subtle, #f1f5f9);
  border-radius: 10px;
  padding: 3px;
}
.rdr-seg-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--rdr-text-muted, #64748b);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.rdr-seg-btn:hover {
  color: var(--rdr-text, #1e293b);
  background: rgba(255, 255, 255, 0.6);
}
.rdr-seg-btn.active {
  background: var(--rdr-card, #ffffff);
  color: var(--rdr-accent, #4338ca);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.rdr-seg-count {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.2);
  color: var(--rdr-text-muted, #64748b);
  transition: all 0.16s ease;
}
.rdr-seg-btn.active .rdr-seg-count {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}
.rdr-kpi-hint-pill {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rdr-text-muted, #64748b);
  background: var(--rdr-bg-subtle, #f8fafc);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 9999px;
  padding: 5px 12px;
}
.ins-kpi-label { font-size: 11px; font-weight: 600; color: var(--rdr-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.ins-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--rdr-text); line-height: 1.1; }
/* Big numbers (e.g. revenue in the millions) must shrink rather than spill out of their tile. */
.ins-kpi-card .rdr-text-metric { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; color: var(--rdr-text); }
.ins-kpi-delta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; }
.ins-kpi-delta-label { color: var(--rdr-text-muted); font-size: 11px; }
.ins-delta-pos {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 9999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  font-size: 11px;
}
.ins-delta-neg {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 9999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  font-size: 11px;
}

/* Skeleton */
.ins-skeleton-kpi { width: 80px; height: 28px; }
.ins-skeleton-row { width: 100%; height: 18px; margin: 6px 0; }

/* Grid 2-col */
.ins-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:900px){.ins-grid-2col{grid-template-columns:1fr;}}

/* Cards */
.ins-card { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius); overflow: hidden; }
.ins-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--rdr-border); }
.ins-card-title { font-size: 13px; font-weight: 600; color: var(--rdr-text); }

/* Chart */
.ins-chart-wrap { padding: 8px; position: relative; }
.ins-chart-card .ins-chart-wrap { padding: 4px 8px 8px; }
.ins-chart-empty { text-align: center; color: var(--rdr-text-muted); font-size: 13px; padding: 48px; }
.ins-granularity-group { display: flex; gap: 4px; }
.ins-trend-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Analytics: Top Ad Sets / Campaigns / Creatives tables ─── */
.ins-top-tables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width:1100px){.ins-top-tables-grid{grid-template-columns:1fr;}}
.ins-top-row { cursor: pointer; }
.ins-top-row:hover { background: var(--rdr-accent-light); }
.ins-top-row-active { background: var(--rdr-accent-light); box-shadow: inset 3px 0 0 var(--rdr-accent); }
.ins-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--rdr-accent);
  background: var(--rdr-accent-light); border-radius: 12px; padding: 2px 8px;
  cursor: pointer; white-space: nowrap;
}
.ins-filter-chip:hover { opacity: 0.8; }
.ins-td-thumb { width: 40px; padding: 4px 4px 4px 12px !important; }
.ins-top-creative-thumb {
  width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
  background: var(--rdr-surface-2); cursor: pointer; display: block;
  border: 1px solid var(--rdr-border); transition: transform 0.15s;
}
.ins-top-creative-thumb:hover { transform: scale(1.15); border-color: var(--rdr-accent); }

/* ── Analytics: creative detail modal ────────────────────── */
.ins-creative-detail-modal { max-width: 720px; width: 95vw; max-height: 92vh; overflow-y: auto; padding: 0; position: relative; }
.ins-modal-close-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ins-modal-close-x:hover { background: rgba(0,0,0,0.7); }
.ins-creative-detail-img { width: 100%; max-height: 320px; min-height: 180px; object-fit: contain; background: var(--rdr-surface-2); display: block; }
.ins-creative-detail-body { padding: 18px 20px 20px; }
.ins-creative-detail-title { font-size: 15px; font-weight: 700; color: var(--rdr-text); margin-bottom: 6px; }
.ins-creative-detail-desc { font-size: 13px; color: var(--rdr-text-muted); margin-bottom: 10px; white-space: pre-wrap; }
.ins-creative-detail-cta { margin-bottom: 14px; }
.ins-creative-detail-links { display: flex; gap: 8px; margin-bottom: 14px; }
.ins-creative-detail-links a {
  font-size: 11.5px; font-weight: 700; text-decoration: none;
  color: var(--rdr-accent); border: 1px solid var(--rdr-accent-ring); background: var(--rdr-accent-light);
  border-radius: 6px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 4px;
}
.ins-creative-detail-link-am { color: #7c3aed !important; border-color: #ece4f0 !important; background: #ece4f0 !important; }
.ins-creative-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rdr-border);
}
@media (max-width: 580px) {
  .ins-creative-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ins-creative-stat-card {
  background: var(--rdr-surface-2, #1e293b);
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all var(--rdr-transition, 0.15s ease);
}
[data-bs-theme="dark"] .ins-creative-stat-card,
.dark-theme .ins-creative-stat-card {
  background: #1e293b;
}
.ins-creative-stat-card:hover {
  border-color: var(--rdr-border-hover);
  background: var(--rdr-card, #243044);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.ins-creative-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rdr-text-muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ins-creative-stat-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rdr-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.ins-roas-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.text-emerald {
  color: #10b981 !important;
}
.text-indigo {
  color: #6366f1 !important;
}

/* Select */
.ins-select { height: 30px; padding: 0 8px; border: 1px solid var(--rdr-border); border-radius: 6px; font-size: 12px; color: var(--rdr-text); background: var(--rdr-card); cursor: pointer; }
.ins-select-sm { height: 26px; font-size: 11px; }

/* Tables */
.ins-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ins-table-scroll { max-height: 460px; overflow-y: auto; }
.ins-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Header row stays pinned while a table's own scroll area scrolls (every .ins-table-scroll table). */
.ins-table thead th { padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--rdr-text-muted); border-bottom: 1px solid var(--rdr-border); background: var(--rdr-surface-2); white-space: nowrap; cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 3; }
.ins-table thead th:hover { color: var(--rdr-accent); }
.ins-th-r { text-align: right !important; }
.ins-table tbody td { padding: 9px 12px; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--rdr-text); white-space: nowrap; }
.ins-table tbody tr:hover { background: var(--rdr-surface-2); }
.ins-td-r { text-align: right !important; font-variant-numeric: tabular-nums; }
/* A cell's supporting numbers under its headline value (MET-02): cost and rate under a count, return under a value. */
.ins-cell-sub { display: block; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--rdr-text-muted); white-space: nowrap; }
.ins-cell-sub:empty { display: none; }
.ins-td-name { min-width: 180px; max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-table-expanded-names .ins-td-name,
.ins-table-wrap.is-expanded-names .ins-td-name,
.ins-tree-table.is-expanded-names .ins-td-name,
.ins-table.is-expanded-names .ins-td-name,
.ins-td-name.is-expanded {
  max-width: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  min-width: 300px;
}
.ins-td-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ins-td-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.is-expanded-names .ins-td-name-text,
.ins-table-expanded-names .ins-td-name-text,
.ins-td-name.is-expanded .ins-td-name-text {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.ins-td-clickable-name {
  cursor: pointer;
  color: var(--rdr-text);
  transition: color 0.15s ease;
}
.ins-td-clickable-name:hover {
  color: var(--rdr-accent);
  text-decoration: underline;
}
.ins-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0.25;
  transition: opacity 0.15s ease-in-out;
  margin-left: 6px;
  flex-shrink: 0;
}
tr:hover .ins-row-actions,
.ins-tree-row:hover .ins-row-actions,
.ins-top-row:hover .ins-row-actions {
  opacity: 1;
}
.ins-btn-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--rdr-border);
  background: var(--rdr-card);
  color: var(--rdr-text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ins-btn-icon-action:hover {
  background: var(--rdr-surface-2);
  color: var(--rdr-accent);
  border-color: var(--rdr-accent);
  transform: translateY(-1px);
}
.ins-btn-icon-action.active {
  background: var(--rdr-accent-light);
  color: var(--rdr-accent);
  border-color: var(--rdr-accent);
}
.ins-table-search-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: 6px;
  padding: 3px 8px;
  height: 28px;
  font-size: 12px;
}
.ins-table-search-box i.bi-search {
  color: var(--rdr-text-muted);
  font-size: 11px;
}
.ins-table-search-input {
  border: none;
  background: transparent;
  outline: none;
  color: var(--rdr-text);
  font-size: 12px;
  width: 160px;
  transition: width 0.2s ease;
}
.ins-table-search-input:focus {
  width: 220px;
}
.ins-search-clear {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--rdr-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ins-search-clear:hover {
  color: var(--rdr-text);
}
/* ── Table inline filter bar ───────────────────────────────── */
.ins-table-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ins-table-filter-chips {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.ins-filter-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--rdr-border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  color: var(--rdr-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  height: 24px;
  white-space: nowrap;
}
.ins-filter-chip-btn:hover {
  background: var(--rdr-border);
  color: var(--rdr-text);
}
.ins-filter-chip-btn.active {
  background: var(--rdr-accent);
  border-color: var(--rdr-accent);
  color: #fff;
}
.ins-fchip-active.active {
  background: #10b981;
  border-color: #10b981;
}
.ins-fchip-paused.active {
  background: #6b7280;
  border-color: #6b7280;
}
.ins-table-obj-select {
  flex-shrink: 0;
  max-width: 170px;
}
.ins-active-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--rdr-accent);
  margin-bottom: 12px;
}
.ins-active-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ins-entity-chart-modal {
  width: 92vw;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
}
.ins-entity-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  padding: 10px 14px;
}
.ins-chart-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-bs-theme="dark"] .ins-chart-loading-overlay,
.dark-theme .ins-chart-loading-overlay {
  background: rgba(30, 30, 45, 0.75);
}
.ins-td-empty { text-align: center !important; color: var(--rdr-text-muted); padding: 32px !important; }
.ins-td-sticky { position: sticky; left: 0; background: var(--rdr-card); z-index: 1; }
.ins-th-sticky { position: sticky; left: 0; background: var(--rdr-surface-2); z-index: 2; }
.ins-tfoot-totals td { border-top: 2px solid var(--rdr-border); background: var(--rdr-surface-2); padding: 9px 12px; font-size: 13px; }

/* ROAS colors */
.ins-roas-good { color: #10b981; font-weight: 600; }
.ins-roas-ok   { color: #f59e0b; font-weight: 600; }
.ins-roas-bad  { color: #ef4444; font-weight: 600; }

/* Table controls */
.ins-table-controls { display: flex; align-items: center; gap: 8px; }

/* Pagination */
.ins-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--rdr-border); }
.ins-page-info { font-size: 12px; color: var(--rdr-text-muted); }

/* ── Filter Panel (Phase 3) ──────────────────────────────── */
.ins-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1.5px solid var(--rdr-border);
  border-radius: 20px; background: var(--rdr-card);
  font-size: 12px; font-weight: 500; color: var(--rdr-text-muted);
  cursor: pointer; transition: var(--rdr-transition);
}
.ins-filter-pill:hover, .ins-filter-pill.active {
  border-color: var(--rdr-accent); color: var(--rdr-accent);
  background: var(--rdr-accent-light);
}
.ins-filter-badge {
  background: var(--rdr-accent); color: #fff;
  border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 700;
}

.ins-filter-panel {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 16px;
}
.ins-filter-row {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;
}
.ins-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.ins-filter-group-lg { min-width: 240px; }
.ins-filter-label { font-size: 11px; font-weight: 600; color: var(--rdr-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ins-filter-search { height: 28px; padding: 0 8px; border: 1px solid var(--rdr-border); border-radius: 6px; font-size: 12px; width: 100%; background: var(--rdr-card); color: var(--rdr-text); }
.ins-filter-empty { font-size: 12px; color: var(--rdr-text-muted); }
.ins-filter-actions { display: flex; gap: 6px; }

.ins-multi-check-list { display: flex; flex-direction: column; gap: 2px; }
.ins-check-scroll { max-height: 140px; overflow-y: auto; padding-right: 4px; }
.ins-check-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--rdr-text);
  cursor: pointer; padding: 3px 4px; border-radius: 4px;
}
.ins-check-item:hover { background: var(--rdr-surface-2); }
.ins-check-item input[type=checkbox] { accent-color: var(--rdr-accent); width: 13px; height: 13px; cursor: pointer; }
.ins-check-sub { color: var(--rdr-text-muted); font-size: 10px; margin-left: auto; }
.ins-check-badge { font-size: 9px; padding: 1px 5px; border-radius: 4px; font-weight: 600; margin-left: auto; }
.badge-green { background: var(--rdr-positive-light); color: var(--rdr-positive); }
.badge-red   { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.badge-gray  { background: var(--rdr-surface-2); color: var(--rdr-text-muted); }

/* Modal */
.ins-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.ins-modal { background: var(--rdr-card); border-radius: var(--rdr-radius); padding: 24px; min-width: 320px; box-shadow: var(--rdr-shadow-md); }
.ins-modal-title { font-size: 15px; font-weight: 700; color: var(--rdr-text); margin-bottom: 16px; }
.ins-modal-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ins-modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
.ins-btn-primary { background: var(--rdr-accent); color: #fff; border: none; }
.ins-btn-primary:hover { background: var(--rdr-accent-hover); }
.ins-btn-danger { color: #ef4444 !important; border-color: #fca5a5 !important; }

/* ── Goals & Metrics (Phase 4/5) ─────────────────────────── */
.ins-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.ins-goal-card {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
}
.ins-goal-ring-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.ins-goal-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ins-goal-pct { font-size: 18px; font-weight: 800; color: var(--rdr-text); }
.ins-goal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ins-goal-name { font-size: 14px; font-weight: 700; color: var(--rdr-text); }
.ins-goal-metric { display: flex; align-items: center; gap: 8px; }
.ins-goal-metric-label { font-size: 11px; font-weight: 600; color: var(--rdr-text-muted); text-transform: uppercase; }
.ins-goal-status-badge { font-size: 10px; padding: 2px 7px; border-radius: 12px; font-weight: 600; }
.ins-goal-values { display: flex; align-items: center; gap: 8px; }
.ins-goal-val { display: flex; flex-direction: column; }
.ins-goal-val-num { font-size: 16px; font-weight: 700; color: var(--rdr-text); }
.ins-goal-val-label { font-size: 10px; color: var(--rdr-text-muted); }
.ins-goal-val-sep { font-size: 18px; color: var(--rdr-text-muted); align-self: center; }
.ins-goal-pace { font-size: 11px; color: var(--rdr-text-muted); }
.ins-goal-pace-sep { margin: 0 4px; }
.ins-goal-bar-wrap { background: var(--rdr-border); border-radius: 4px; height: 6px; overflow: hidden; }
.ins-goal-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ins-goal-period { font-size: 10px; color: var(--rdr-text-muted); }
.ins-goal-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.ins-goal-card:hover .ins-goal-actions { opacity: 1; }

/* Status badge colours */
.badge-purple { background: var(--rdr-accent-light); color: var(--rdr-accent); }
.badge-yellow { background: var(--rdr-warning-light); color: var(--rdr-warning); }

/* ── Analytics: wider date inputs ────────────────────────── */
.ins-date-input-lg { width: 150px; }

/* ── Analytics: account balance badge ────────────────────── */
.ins-balance-badge {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  margin-left: auto; margin-right: 4px;
  background: var(--rdr-accent-light); color: var(--rdr-accent);
}

/* ── Analytics: funnel & mini stats (always-visible card) ── */
.ins-filter-stats-card { padding: 16px; }
.ins-filter-stats-row {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch;
}
.ins-mini-stat { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.ins-mini-stat-label {
  font-size: 11px; font-weight: 600; color: var(--rdr-text-muted);
  display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ins-mini-stat-value { font-size: 1.3rem; font-weight: 700; color: var(--rdr-text); }

.ins-funnel { flex: 1; min-width: 260px; }
.ins-funnel-title {
  font-size: 11px; font-weight: 600; color: var(--rdr-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.ins-funnel-stages { display: flex; flex-direction: column; gap: 6px; }
.ins-funnel-stage { display: flex; align-items: center; gap: 10px; }
.ins-funnel-bar-wrap { flex: 1; height: 14px; background: var(--rdr-surface-2); border-radius: 4px; overflow: hidden; }
.ins-funnel-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--rdr-accent), #8b5cf6); transition: width 0.4s ease; }
.ins-funnel-meta { display: flex; align-items: center; gap: 6px; min-width: 150px; font-size: 11px; }
.ins-funnel-label { color: var(--rdr-text-muted); }
.ins-funnel-value { font-weight: 700; color: var(--rdr-text); margin-left: auto; }

/* ── Analytics: full-width, taller trend chart ───────────── */
.ins-chart-card-lg { width: 100%; }
.ins-chart-wrap-lg { padding: 8px 16px 16px; }

/* ── Analytics: card subtitle ─────────────────────────────── */
.ins-card-subtitle { font-size: 11px; color: var(--rdr-text-muted); margin-left: 8px; }

/* ── Analytics: expandable campaign/adset/ad heatmap tree ─── */
.ins-col-preset-label { font-size: 12px; color: var(--rdr-text-muted); font-weight: 500; }
.sync-run-status { text-align: right; }
.sync-run-status.is-working { color: var(--rdr-primary-500); }
.sync-run-status.is-good { color: var(--rdr-success-text); }
.sync-run-status.is-warn { color: var(--rdr-warning-text); }
.sync-run-status.is-bad { color: var(--rdr-danger, #dc2626); }
.sync-breakdown-note { font-size: 12px; color: var(--rdr-text-muted); margin: 0 0 12px; }
.sync-breakdown-note.is-warn { color: var(--rdr-warning-text); }
.camp-ctl-pair { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.camp-ctl-pair .ins-col-preset-label { flex: none; margin: 0; }
.camp-ctl-pair .ins-select { min-width: 0; }
.ins-col-picker { position: relative; }
.ins-col-picker-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  width: 220px; max-height: 320px;
  background: var(--rdr-card); border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius); box-shadow: var(--rdr-shadow-md);
  padding: 10px;
}
.ins-col-picker-title { font-size: 11px; font-weight: 600; color: var(--rdr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.ins-th-c { text-align: center !important; }
/* Tree-table name cell: name on one line (cut with … when long, full name on hover), account underneath. */
.ins-tree-name-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ins-tree-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ins-tree-name-sub { font-size: 11px; font-weight: 400; color: var(--rdr-text-muted); margin: 1px 0 0 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Totals row: pinned to the bottom of the table's scroll area, like the header to the top. */
.ins-total-row td { position: sticky; bottom: 0; background: var(--rdr-card, #fff); border-top: 2px solid var(--rdr-border); box-shadow: 0 -1px 0 var(--rdr-border); font-weight: 700; font-size: 12px; white-space: nowrap; z-index: 2; padding: 10px 14px; }

/* ── Analytics: Tree Table visual polish & clear hierarchy ─── */
.ins-tree-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.ins-tree-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rdr-text-muted);
  border-bottom: 2px solid var(--rdr-border);
  padding: 10px 14px;
}
.ins-tree-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--rdr-border, rgba(0,0,0,0.06));
}
.ins-tree-table .ins-td-name {
  min-width: 280px;
  max-width: 600px;
}
.ins-tree-row {
  cursor: default;
  transition: background-color 0.15s ease;
}
.ins-tree-row:hover {
  background: var(--rdr-surface-2) !important;
}

/* ── Sticky Frozen Columns on Horizontal Scroll ── */
.ins-freeze-1 .ins-tree-table,
.ins-freeze-2 .ins-tree-table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Base definitions for frozen column classes */
.ins-freeze-1 .camp-col-name,
.ins-freeze-2 .camp-col-name,
.ins-freeze-1 .camp-col-select,
.ins-freeze-2 .camp-col-select,
.ins-freeze-2 .camp-col-status {
  position: sticky;
  background-color: var(--rdr-card);
}

/* Header sticky styling */
.ins-freeze-1 thead .camp-col-name,
.ins-freeze-2 thead .camp-col-name,
.ins-freeze-1 thead .camp-col-select,
.ins-freeze-2 thead .camp-col-select,
.ins-freeze-2 thead .camp-col-status {
  top: 0;
  z-index: 12 !important;
  background-color: var(--rdr-surface-2) !important;
}

/* Footer sticky styling */
.ins-freeze-1 tfoot .camp-col-name,
.ins-freeze-2 tfoot .camp-col-name,
.ins-freeze-1 tfoot .camp-col-select,
.ins-freeze-2 tfoot .camp-col-select,
.ins-freeze-2 tfoot .camp-col-status {
  bottom: 0;
  z-index: 10 !important;
  background-color: var(--rdr-surface-2) !important;
}

/* Hover background across all frozen columns */
.ins-freeze-1 .ins-tree-row:hover .camp-col-name,
.ins-freeze-2 .ins-tree-row:hover .camp-col-name,
.ins-freeze-1 .ins-tree-row:hover .camp-col-select,
.ins-freeze-2 .ins-tree-row:hover .camp-col-select,
.ins-freeze-2 .ins-tree-row:hover .camp-col-status {
  background-color: var(--rdr-surface-2) !important;
}

/* ── CASE A: Table WITH Selection Checkbox (.has-select-col) ── */
.has-select-col .camp-col-select {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
}
.ins-freeze-1.has-select-col .camp-col-select,
.ins-freeze-2.has-select-col .camp-col-select {
  left: 0;
  z-index: 6;
}

/* Freeze 1: Checkbox + Name */
.ins-freeze-1.has-select-col .camp-col-name {
  left: 44px;
  min-width: 280px;
  max-width: 460px;
  z-index: 6;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
  border-right: 1px solid var(--rdr-border);
}

/* Freeze 2: Checkbox + Name + Status */
.ins-freeze-2.has-select-col .camp-col-name {
  left: 44px;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  z-index: 6;
}
.ins-freeze-2.has-select-col .camp-col-status {
  left: 344px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align: center;
  z-index: 6;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
  border-right: 1px solid var(--rdr-border);
}

/* ── CASE B: Table WITHOUT Selection Checkbox (Overview, Analytics) ── */
/* Freeze 1: Name */
.ins-freeze-1:not(.has-select-col) .camp-col-name {
  left: 0;
  min-width: 280px;
  max-width: 460px;
  z-index: 6;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
  border-right: 1px solid var(--rdr-border);
}

/* Freeze 2: Name + Status */
.ins-freeze-2:not(.has-select-col) .camp-col-name {
  left: 0;
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  z-index: 6;
}
.ins-freeze-2:not(.has-select-col) .camp-col-status {
  left: 320px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align: center;
  z-index: 6;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.08);
  border-right: 1px solid var(--rdr-border);
}

/* Hierarchy is shown by indentation and a thin coloured edge, not by tinting whole rows (which read as a solid block). */
/* Level 0: Campaign */
.ins-tree-lvl-0 {
  cursor: pointer;
  font-weight: 600;
  background: var(--rdr-card);
}
.ins-tree-lvl-0 td {
  font-size: 13px;
  color: var(--rdr-text);
  border-bottom: 1px solid var(--rdr-border);
  background: inherit;
}
.ins-tree-lvl-0 td:first-child {
  border-left: 2px solid rgba(99, 102, 241, 0.55);
}
.ins-tree-lvl-0:hover,
.ins-tree-lvl-0:hover td {
  background: var(--rdr-surface-2) !important;
}

/* Level 1: Ad Set */
.ins-tree-lvl-1 {
  cursor: pointer;
  background: rgba(148, 163, 184, 0.06);
}
.ins-tree-lvl-1 td {
  font-size: 12.5px;
  background: inherit;
}
.ins-tree-lvl-1 td:first-child {
  border-left: 2px solid rgba(168, 85, 247, 0.5);
}
.ins-tree-lvl-1:hover,
.ins-tree-lvl-1:hover td {
  background: var(--rdr-surface-2) !important;
}
.ins-tree-lvl-1 .ins-td-name {
  padding-left: 28px !important;
  position: relative;
}
.ins-tree-lvl-1 .ins-td-name::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(168, 85, 247, 0.35);
}

/* Level 2: Ad */
.ins-tree-lvl-2 {
  cursor: pointer;
  background: var(--rdr-card);
}
.ins-tree-lvl-2 td {
  font-size: 12.5px;
  color: var(--rdr-text-muted);
  background: inherit;
}
.ins-tree-lvl-2 td:first-child {
  border-left: 2px solid rgba(16, 185, 129, 0.5);
}
.ins-tree-lvl-2:hover,
.ins-tree-lvl-2:hover td {
  background: var(--rdr-surface-2) !important;
}
.ins-tree-lvl-2 .ins-td-name {
  padding-left: 50px !important;
  position: relative;
}
.ins-tree-lvl-2 .ins-td-name::before {
  content: '';
  position: absolute;
  left: 36px;
  top: 0;
  bottom: 50%;
  width: 2px;
  background: rgba(16, 185, 129, 0.35);
}
.ins-tree-lvl-2 .ins-td-name::after {
  content: '';
  position: absolute;
  left: 36px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: rgba(16, 185, 129, 0.35);
}

/* Level 3: Ad (when Account is Level 0) */
.ins-tree-lvl-3 {
  cursor: pointer;
  background: var(--rdr-card);
}
.ins-tree-lvl-3 td {
  font-size: 12.5px;
  color: var(--rdr-text-muted);
  background: inherit;
}
.ins-tree-lvl-3 td:first-child {
  border-left: 2px solid rgba(16, 185, 129, 0.5);
}
.ins-tree-lvl-3:hover,
.ins-tree-lvl-3:hover td {
  background: var(--rdr-surface-2) !important;
}
.ins-tree-lvl-3 .ins-td-name {
  padding-left: 72px !important;
  position: relative;
}
.ins-tree-lvl-3 .ins-td-name::before {
  content: '';
  position: absolute;
  left: 58px;
  top: 0;
  bottom: 50%;
  width: 2px;
  background: rgba(16, 185, 129, 0.35);
}
.ins-tree-lvl-3 .ins-td-name::after {
  content: '';
  position: absolute;
  left: 58px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: rgba(16, 185, 129, 0.35);
}

/* Account Tag Badge in Tree Rows */
.ins-account-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--rdr-accent, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 6px;
  line-height: 1.4;
}

/* Ad Format Icon in Tree Rows */
.ins-ad-format-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--rdr-surface-2, rgba(0, 0, 0, 0.04));
  transition: transform 0.15s ease;
}
.ins-tree-row:hover .ins-ad-format-icon {
  transform: scale(1.1);
}

/* Republication Lineage & Dormant Winner Alert */
.ins-lineage-banner {
  margin-top: 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid;
}
.ins-lineage-banner-active {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--rdr-text);
}
.ins-lineage-banner-warning {
  background: rgba(245, 158, 11, 0.09);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--rdr-text);
}
.ins-lineage-banner-muted {
  background: var(--rdr-surface-2, rgba(0, 0, 0, 0.03));
  border-color: var(--rdr-border);
  color: var(--rdr-text-muted);
}
.ins-lineage-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ins-lineage-active-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ins-lineage-active-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: var(--rdr-surface, #fff);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.ins-lineage-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--rdr-text);
}
.ins-lineage-table-wrap {
  margin-top: 16px;
  border-top: 1px solid var(--rdr-border);
  padding-top: 14px;
}
.ins-lineage-table-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rdr-text);
}
.ins-lineage-table-scroll {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--rdr-border);
  border-radius: 6px;
}
.ins-lineage-table {
  width: 100%;
}
.ins-lineage-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rdr-text-muted);
  background: var(--rdr-surface-2, #f8fafc);
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rdr-border);
}
.ins-lineage-table td {
  font-size: 12px;
  vertical-align: middle;
  padding: 6px 10px;
}
.ins-lineage-current-row {
  background: rgba(99, 102, 241, 0.08) !important;
  font-weight: 500;
}
[data-bs-theme="dark"] .ins-lineage-active-item {
  background: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] .ins-lineage-table th {
  background: #1e293b;
}
/* Clickable lineage items */
.ins-lineage-item-clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ins-lineage-item-clickable:hover {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  transform: translateX(2px);
}
.ins-lineage-item-clickable:hover .ins-lineage-preview-icon {
  opacity: 1;
  transform: scale(1.15);
}
.ins-lineage-preview-icon {
  opacity: 0.4;
  font-size: 16px;
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Clickable table rows */
.ins-lineage-row-clickable {
  cursor: pointer;
  transition: background 0.12s ease;
}
.ins-lineage-row-clickable:hover {
  background: rgba(99, 102, 241, 0.07) !important;
}
.ins-lineage-row-clickable:hover .ins-lineage-row-icon {
  opacity: 0.9;
  color: var(--rdr-accent) !important;
}
.ins-lineage-row-icon {
  opacity: 0;
  font-size: 13px;
  transition: opacity 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}

/* Level Badges */
.ins-lvl-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.4;
}
.lvl-tag-0 {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.lvl-tag-1 {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.lvl-tag-2 {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Toggle & Spacers */
.ins-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--rdr-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.ins-tree-toggle:hover {
  background: rgba(99, 102, 241, 0.12);
  color: var(--rdr-accent, #6366f1);
}
.ins-tree-spacer {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ins-heat-cell {
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease;
}
.ins-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-green {
  background: var(--rdr-positive, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.dot-red {
  background: var(--rdr-negative, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
/* Switched on, but Meta isn't delivering it (parent off, in review, rejected, billing...). */
.dot-amber {
  background: var(--rdr-warning, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* ── Ads Intelligence — table visual polish (Phase 3 of the Ads Intelligence
   redesign) ───────────────────────────────────────────────────────────────
   Scoped entirely under .ins-ads-intel (a class added only to that page's
   root div) so this refines the shared .ins-card/.ins-table look for THAT
   page only — Campaigns/Analytics/Creatives, which reuse the same base
   classes, render exactly as before. Deliberately restrained: no new colors
   beyond what already exists, no shadows, no icons — spacing, hierarchy,
   and emphasis only. */
.ins-ads-intel .ins-card-header { padding: 16px 18px; }
.ins-ads-intel .ins-card-title { font-size: 14px; }
.ins-ads-intel .ins-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
    padding: 11px 14px;
    border-bottom: 2px solid var(--rdr-border);
}
.ins-ads-intel .ins-table tbody td { padding: 11px 14px; }
.ins-ads-intel .ins-table tbody tr { transition: background-color 0.15s ease; }
.ins-ads-intel .ins-table tbody tr:last-child td { border-bottom: none; }
/* Spend/ROAS/Purchases/etc. are the numbers a media buyer scans for first —
   a touch heavier than plain body text makes them findable without adding
   another color. */
.ins-ads-intel .ins-heat-cell { font-weight: 600; }
.ins-ads-intel .ins-td-name { font-weight: 500; }
/* The shared tree-table rule only tints level-0 (top) rows — extending the
   same idea one shade lighter per level makes the Campaign/Ad Set/Ad
   grouping readable at a glance in a tree as deep as Structure's. */
.ins-ads-intel .ins-tree-lvl-1 { background: rgba(99,102,241,0.03); }
.ins-ads-intel .ins-tree-lvl-2 { background: rgba(99,102,241,0.05); }

/* ── Ads Intelligence — Structure tree visualization (Phase 4 of the Ads
   Intelligence redesign) ─────────────────────────────────────────────────
   Scoped under .ins-ads-intel, same as Phase 3 above — new classes only, so
   Campaigns/Analytics/other pages that share .ins-card/.ins-table are
   untouched. Pure CSS org-chart connectors (no charting library): a single
   child gets a straight vertical stub via .ins-org-children; multiple
   children share a top border acting as the horizontal bar, each with its
   own vertical stub up to it. */
.ins-ads-intel .ins-org-canvas {
    flex: 1; min-width: 0; overflow-x: auto; padding: 20px 12px;
    /* Centers the tree when it fits the canvas; "safe" falls back to start-alignment instead of
       clipping the campaign card off-screen to the left when a campaign has enough ad sets to
       overflow horizontally (plain "center" would let overflow content scroll equally off both
       sides, hiding the start). */
    display: flex; justify-content: safe center;
}
.ins-ads-intel .ins-org-tree { display: flex; flex-direction: column; align-items: center; min-width: max-content; }
.ins-ads-intel .ins-org-children { display: flex; justify-content: center; gap: 18px; position: relative; padding-top: 22px; }
.ins-ads-intel .ins-org-children.multi { border-top: 1px solid var(--rdr-border-hover); }
.ins-ads-intel .ins-org-children:not(.multi)::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: var(--rdr-border-hover); }
.ins-ads-intel .ins-org-branch { display: flex; flex-direction: column; align-items: center; position: relative; }
.ins-ads-intel .ins-org-children.multi > .ins-org-branch::before { content: ''; position: absolute; top: -22px; left: 50%; width: 1px; height: 22px; background: var(--rdr-border-hover); }
.ins-ads-intel .ins-org-card { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 9px 12px; min-width: 175px; max-width: 210px; cursor: pointer; transition: var(--rdr-transition); }
.ins-ads-intel .ins-org-card:hover { border-color: var(--rdr-accent); box-shadow: var(--rdr-shadow); }
.ins-ads-intel .ins-org-card-title { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-ads-intel .ins-org-card-metrics { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10.5px; color: var(--rdr-text-muted); }
.ins-ads-intel .ins-org-card-metrics b { color: var(--rdr-text); font-weight: 600; }
.ins-ads-intel .ins-org-toggle { font-size: 10.5px; color: var(--rdr-accent); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.ins-ads-intel .ins-org-signal-group { margin-bottom: 12px; }
.ins-ads-intel .ins-org-signal-group:last-child { margin-bottom: 0; }
.ins-ads-intel .ins-org-signal-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rdr-text-muted); margin-bottom: 5px; }
.ins-ads-intel .ins-org-signal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--rdr-text); }
.ins-ads-intel .ins-org-signal-list li { display: flex; gap: 6px; align-items: flex-start; }

/* Campaigns table (Tree tab) — one row per campaign; selecting a row shows that campaign's
   org-chart tree underneath (see .ins-struct-tree-anchor below). The selected row is the only
   cue for which campaign the tree belongs to, so its accent left-edge + tint need to read
   clearly at rest and hold up (get stronger, not weaker) on hover. */
.ins-ads-intel .ins-struct-camprow { cursor: pointer; transition: var(--rdr-transition); }
.ins-ads-intel .ins-struct-camprow:hover { background: var(--rdr-surface-2); }
.ins-ads-intel .ins-struct-camprow.selected { background: var(--rdr-accent-light); box-shadow: inset 3px 0 0 0 var(--rdr-accent); }
.ins-ads-intel .ins-struct-camprow.selected:hover { background: var(--rdr-accent-light); box-shadow: inset 3px 0 0 0 var(--rdr-accent), inset 0 0 0 1px var(--rdr-accent-ring); }

/* Compact rows, scoped to this one table only — every other table on the page (Activity Log,
   Trends & Anomalies, the detailed Structure table) keeps the normal .ins-table row height.

   The header and the scrolling rows are deliberately TWO separate <table>s (ins-struct-camptable-
   head / ins-struct-camptable-body in Index.cshtml), not one table with a sticky <thead>.
   position: sticky on <th> was the first approach and was verified, via a scripted Playwright
   harness driving this exact markup/CSS repeatedly, to be non-deterministically unreliable in a
   table-inside-a-scrolling-div: it stayed pinned on some page loads and silently scrolled away
   with the rows on others — exactly the "rows appear under the header" bug this replaces. Two
   tables sharing one <colgroup> (table-layout: fixed, identical column widths in both) keeps
   columns aligned while making the header structurally impossible to scroll under, since it
   isn't inside the scrolling element at all. Re-verified with the same harness, 6/6 runs. */
.ins-ads-intel .ins-struct-camp-cols col:nth-child(1) { width: 26%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(2) { width: 6%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(3) { width: 14%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(4) { width: 11%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(5) { width: 12%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(6) { width: 8%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(7) { width: 8%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(8) { width: 7%; }
.ins-ads-intel .ins-struct-camp-cols col:nth-child(9) { width: 8%; }
.ins-ads-intel .ins-struct-camptable-head table,
.ins-ads-intel .ins-struct-camptable-body table { table-layout: fixed; width: 100%; }
/* ~28px/row * 5 rows ≈ 140px — the header's own height sits outside this, in the separate
   non-scrolling table above, so this max-height only needs to cover the 5 body rows themselves. */
.ins-ads-intel .ins-struct-camptable-body { max-height: 140px; overflow-y: auto; overflow-x: hidden; }
.ins-ads-intel .ins-struct-camptable thead th { padding: 6px 10px; }
.ins-ads-intel .ins-struct-camptable tbody td { padding: 5px 10px; line-height: 1.3; }
.ins-ads-intel .ins-struct-camptable .ins-btn-sm { padding: 2px 6px; line-height: 1.2; }

/* The tree's only link back to the selected row above — an accent-colored top border in the
   same color as the row's left-edge indicator, standing in for a repeated "Campaign Name"
   heading (deliberately not shown; the highlighted row already identifies the campaign). */
.ins-ads-intel .ins-struct-tree-anchor { border-top: 2px solid var(--rdr-accent); margin: 0 16px; padding-top: 6px; }

/* Executive Summary — emphasis only, scoped to this page; the shared .ins-kpi-card base rule
   (used by Analytics/Dashboard/Home/Inventory too) is untouched. */
.ins-ads-intel .ins-kpi-primary { border-color: var(--rdr-accent-ring); background: var(--rdr-accent-light); }
.ins-ads-intel .ins-kpi-primary .ins-kpi-value { font-size: 1.7rem; }

/* Mobile: tree canvas keeps its own horizontal scroll rather than clipping ad sets. */
@media (max-width: 640px) {
    .ins-ads-intel .ins-org-canvas { overflow-x: auto; }
}

/* Metric form */
.ins-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ins-form-group { display: flex; flex-direction: column; gap: 4px; }
.ins-formula-input { width: 100%; margin-top: 4px; font-family: monospace; }
.ins-formula-errors { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ins-formula-error { font-size: 12px; color: #ef4444; display: flex; align-items: center; gap: 5px; }
.ins-formula-ok { font-size: 12px; color: #10b981; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.ins-token-ref { margin-top: 10px; }
.ins-token-ref-title { font-size: 11px; font-weight: 600; color: var(--rdr-text-muted); margin-bottom: 6px; }
.ins-token-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ins-token-chip {
  background: var(--rdr-accent-light);
  color: var(--rdr-accent);
  border: 1px solid var(--rdr-accent-ring);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: monospace;
  cursor: pointer;
  transition: var(--rdr-transition);
}
.ins-token-chip:hover { background: var(--rdr-accent); color: #fff; }

/* Alert cards */
.ins-alert-list { display: flex; flex-direction: column; gap: 10px; }
.ins-alert-card {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ins-alert-icon { font-size: 20px; width: 36px; text-align: center; flex-shrink: 0; }
.ins-alert-icon.active { color: #6366f1; }
.ins-alert-icon.inactive { color: #9ca3af; }
.ins-alert-body { flex: 1; min-width: 0; }
.ins-alert-name { font-size: 13px; font-weight: 600; color: var(--rdr-text); }
.ins-alert-desc { font-size: 11px; color: var(--rdr-text-muted); margin-top: 2px; }
.ins-alert-last-fired { font-size: 10px; color: #f59e0b; margin-top: 2px; }
.ins-alert-toggle { cursor: pointer; }

/* AI Insights */
.ins-insights-list { display: flex; flex-direction: column; gap: 12px; }
.ins-insight-card {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  transition: var(--rdr-transition);
}
.ins-insight-card.unread { border-left: 3px solid var(--rdr-accent); }
.ins-insight-icon { font-size: 22px; flex-shrink: 0; width: 32px; }
.ins-insight-body { flex: 1; min-width: 0; }
.ins-insight-title { font-size: 13px; font-weight: 700; color: var(--rdr-text); margin-bottom: 4px; }
.ins-insight-text { font-size: 12px; color: var(--rdr-text-muted); line-height: 1.5; }
.ins-insight-reco { margin-top: 8px; font-size: 12px; color: var(--rdr-accent); font-weight: 500; }
.ins-insight-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ins-insight-time { font-size: 10px; color: var(--rdr-text-muted); }
.ins-insight-actions { display: flex; gap: 6px; margin-left: auto; }
.sentiment-positive { color: var(--rdr-positive); }
.sentiment-negative { color: var(--rdr-negative); }
.sentiment-neutral  { color: var(--rdr-text-muted); }

/* ── AI Insights Chat (Phase 8) ──────────────────────────── */
.ins-chat-history {
  height: 340px;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ins-chat-empty {
  text-align: center;
  color: var(--rdr-text-muted);
  font-size: 13px;
  padding: 20px 0;
}
.ins-chat-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ins-chat-suggestion {
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--rdr-text);
  cursor: pointer;
  text-align: left;
  transition: var(--rdr-transition);
}
.ins-chat-suggestion:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }

.ins-chat-msg { display: flex; }
.ins-chat-msg.user { justify-content: flex-end; }
.ins-chat-msg.assistant { justify-content: flex-start; }
.ins-chat-bubble {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ins-chat-msg.user .ins-chat-bubble {
  background: var(--rdr-accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.ins-chat-msg.assistant .ins-chat-bubble {
  background: var(--rdr-surface-2);
  color: var(--rdr-text);
  border-bottom-left-radius: 3px;
  border: 1px solid var(--rdr-border);
}

/* Typing indicator */
.ins-chat-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px !important; }
.ins-chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rdr-text-muted);
  animation: ins-bounce 1.2s infinite;
}
.ins-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.ins-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ins-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}

.ins-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--rdr-border);
}
.ins-chat-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--rdr-card);
  color: var(--rdr-text);
}

/* ============================================================
   ACCOUNT HEALTH page
   ============================================================ */
.ah-critical-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ah-critical-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ah-critical-title { font-weight: 600; color: var(--rdr-text); }
.ah-critical-detail { color: var(--rdr-text-muted); }

.ah-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ah-card {
  background: var(--rdr-card); border: 1px solid var(--rdr-border); border-left: 4px solid var(--rdr-border);
  border-radius: var(--rdr-radius); padding: 14px 16px;
}
.ah-card-scale { border-left-color: #10b981; }
.ah-card-fix   { border-left-color: #ef4444; }
.ah-card-watch { border-left-color: #f59e0b; }
.ah-card-hold  { border-left-color: #7c3aed; }
.ah-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ah-card-name { font-weight: 700; font-size: 14px; color: var(--rdr-text); }
.ah-card-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--rdr-text-muted); margin-top: 4px; }
.ah-card-row b { color: var(--rdr-text); font-variant-numeric: tabular-nums; }
.ah-card-reason { font-size: 11.5px; color: var(--rdr-text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rdr-border); }
.ah-up { color: var(--rdr-positive); font-weight: 700; margin-left: 4px; }
.ah-dn { color: var(--rdr-negative); font-weight: 700; margin-left: 4px; }

/* Simple pill-toggle chips, reused by the Activity Log filter row */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rdr-border); background: var(--rdr-card); color: var(--rdr-text-muted);
  cursor: pointer; transition: var(--rdr-transition);
}
.chip:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.chip.on { background: var(--rdr-accent); border-color: var(--rdr-accent); color: #fff; }

/* ============================================================
   ACTIVITY LOG page (Argon UI Redesign)
   ============================================================ */
.act-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.act-kpi-card {
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.act-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--rdr-accent, #6366f1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}
.act-kpi-card.active {
  border-color: var(--rdr-accent, #6366f1);
  background: rgba(99, 102, 241, 0.04);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.act-kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.act-kpi-icon-green { background: rgba(16, 185, 129, 0.12); color: #059669; }
.act-kpi-icon-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.act-kpi-icon-emerald { background: rgba(16, 185, 129, 0.15); color: #047857; }
.act-kpi-icon-blue { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.act-kpi-icon-amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.act-kpi-icon-purple { background: rgba(147, 51, 234, 0.12); color: #7c3aed; }
.act-kpi-icon-slate { background: rgba(100, 116, 139, 0.12); color: #475569; }
.act-kpi-val { font-size: 24px; font-weight: 700; color: var(--rdr-text, #0f172a); line-height: 1.1; }
.act-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--rdr-text, #1e293b); margin-top: 2px; }
.act-kpi-sub { font-size: 11px; color: var(--rdr-text-muted, #64748b); }

.act-day-group { margin-bottom: 24px; }
.act-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--rdr-surface-subtle, #f8fafc);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rdr-text, #0f172a);
}
.act-day-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rdr-card, #ffffff); /* was #ffffff: white on white "5 events" in dark mode (audit 2026-11-08) */
  border: 1px solid var(--rdr-border, #e2e8f0);
  color: var(--rdr-text, #334155);
}
.act-card {
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
  transition: all 0.18s ease;
  position: relative;
}
.act-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.act-card.act-card-creative {
  border-left: 4px solid #10b981;
}
.act-card.act-card-campaign {
  border-left: 4px solid #2563eb;
}
.act-card.act-card-adset {
  border-left: 4px solid #6366f1;
}
.act-card.act-card-budget {
  border-left: 4px solid #f59e0b;
}
.act-card.act-card-status {
  border-left: 4px solid #8b5cf6;
}
.act-card.act-card-republished {
  border-left: 4px solid #06b6d4;
}
.act-card.act-card-funding {
  border-left: 4px solid #10b981;
}
.act-card.act-card-billing {
  border-left: 4px solid #6366f1;
}

.act-thumb-wrap {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rdr-border, #e2e8f0);
  background: var(--rdr-surface-subtle, #f1f5f9);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.act-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.act-video-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.act-thumb-wrap:hover .act-thumb-img {
  transform: scale(1.08);
}
.act-icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.act-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.4;
}
.act-badge-creative { background: rgba(16, 185, 129, 0.12); color: #047857; border: 1px solid rgba(16, 185, 129, 0.25); }
.act-badge-republished { background: rgba(6, 182, 212, 0.12); color: #0891b2; border: 1px solid rgba(6, 182, 212, 0.25); }
.act-badge-funding { background: rgba(16, 185, 129, 0.15); color: #047857; border: 1px solid rgba(16, 185, 129, 0.3); }
.act-badge-billing { background: rgba(99, 102, 241, 0.12); color: #4338ca; border: 1px solid rgba(99, 102, 241, 0.25); }
.act-badge-campaign { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; border: 1px solid rgba(37, 99, 235, 0.25); }
.act-badge-adset { background: rgba(99, 102, 241, 0.12); color: #4338ca; border: 1px solid rgba(99, 102, 241, 0.25); }
.act-badge-budget { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.25); }
.act-badge-status { background: rgba(139, 92, 246, 0.12); color: #6d28d9; border: 1px solid rgba(139, 92, 246, 0.25); }
.act-badge-default { background: rgba(100, 116, 139, 0.12); color: #334155; }

.act-diff-pill {
  display: inline-block;
  background: var(--rdr-surface-subtle, #f1f5f9);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: monospace;
  font-size: 11.5px;
  color: var(--rdr-text, #0f172a);
}
.act-actor-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rdr-text-muted, #475569);
  background: var(--rdr-surface-subtle, #f1f5f9);
  padding: 3px 8px;
  border-radius: 999px;
}
.act-time-pill {
  font-size: 11.5px;
  color: var(--rdr-text-muted, #64748b);
  white-space: nowrap;
}
.act-clickable-title {
  cursor: pointer;
  transition: color 0.15s ease;
}
.act-clickable-title:hover {
  color: var(--rdr-accent, #6366f1) !important;
  text-decoration: underline;
}

.act-timeline { display: flex; flex-direction: column; gap: 8px; }
.act-item { display: flex; gap: 10px; align-items: flex-start; }
.act-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.act-dot-budget { background: #f59e0b; }
.act-dot-status { background: var(--rdr-accent); }
.act-dot-creative { background: #10b981; }
.act-dot-billing { background: #7c3aed; }
.act-item-body { flex: 1; min-width: 0; }
.act-item-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 11.5px; color: var(--rdr-text-muted); }
.act-item-account { font-weight: 700; color: var(--rdr-text); }
.act-item-actor { font-weight: 600; }
.act-item-text { font-size: 13px; color: var(--rdr-text); margin-top: 2px; line-height: 1.45; }
.ins-chat-input:focus { outline: none; border-color: var(--rdr-accent); }

/* ============================================================
   INSIGHTS page — narrative bullets
   ============================================================ */
.ins-insight-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ins-insight-list li {
  font-size: 13.5px; line-height: 1.5; color: var(--rdr-text);
  padding-left: 16px; position: relative;
}
.ins-insight-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rdr-accent);
}

/* ============================================================
   RECOMMENDATIONS page
   ============================================================ */
.ins-rec-list { display: flex; flex-direction: column; gap: 10px; }
.ins-rec-card { padding: 14px 16px; }
.ins-rec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ins-rec-account { font-size: 11.5px; color: var(--rdr-text-muted); font-weight: 600; }
.ins-rec-title { font-size: 14px; font-weight: 700; color: var(--rdr-text); margin-bottom: 4px; }
.ins-rec-detail { font-size: 12.5px; color: var(--rdr-text-muted); margin-bottom: 6px; }
.ins-rec-steps { font-size: 12px; color: var(--rdr-text-muted); margin-bottom: 10px; }
.ins-rec-steps b { color: var(--rdr-text); }

/* ============================================================
   INVENTORY ANALYTICS & RESTOCK INTELLIGENCE (Inventory page)
   ============================================================ */
.inv-kpi-static { cursor: default; }
.inv-kpi-static:hover { border-color: var(--rdr-border); box-shadow: none; }
.inv-kpi-na { font-size: 14px; color: var(--rdr-text-muted); font-weight: 600; margin-top: 2px; }

.inv-restock-input-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.inv-budget-input-wrap { display: flex; align-items: center; border: 1px solid var(--rdr-border); border-radius: 6px; overflow: hidden; }
.inv-budget-prefix { padding: 0 8px; font-size: 13px; color: var(--rdr-text-muted); background: var(--rdr-card); }
.inv-budget-input { border: none !important; max-width: 140px; }
.inv-restock-error { color: #b91c1c; font-size: 12.5px; margin-top: 8px; }

.inv-restock-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.inv-restock-summary > div { background: var(--rdr-bg, #f9fafb); border-radius: 8px; padding: 10px 12px; }
.inv-restock-summary-label { display: block; font-size: 11px; color: var(--rdr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.inv-restock-summary b { font-size: 16px; color: var(--rdr-text); }

.inv-subhead { display: block; font-size: 13px; margin-bottom: 8px; }
.inv-restock-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .inv-restock-body { grid-template-columns: 1fr; } }

.inv-restock-list { display: flex; flex-direction: column; gap: 10px; }
.inv-rec-card { border: 1px solid var(--rdr-border); border-radius: 8px; padding: 12px 14px; }
.inv-rec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inv-rec-rank { font-size: 11px; font-weight: 700; color: var(--rdr-accent); }
.inv-rec-title { font-size: 13.5px; font-weight: 700; color: var(--rdr-text); }
.inv-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 8px; }
.inv-rec-grid span { display: block; font-size: 10.5px; color: var(--rdr-text-muted); }
.inv-rec-grid b { font-size: 13px; color: var(--rdr-text); font-variant-numeric: tabular-nums; }
.inv-rec-reasons { font-size: 11.5px; color: var(--rdr-text-muted); line-height: 1.4; }

.inv-unfunded-details { margin-top: 6px; font-size: 12px; }
.inv-unfunded-details summary { cursor: pointer; color: var(--rdr-accent); font-weight: 600; }
.inv-unfunded-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--rdr-text-muted); border-top: 1px dashed var(--rdr-border); }

.inv-alloc-chart-wrap { border: 1px solid var(--rdr-border); border-radius: 8px; padding: 14px; }

.inv-perf-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.inv-perf-search { max-width: 220px; }
.inv-sortable { cursor: pointer; user-select: none; }
.inv-sortable:hover { color: var(--rdr-accent); }

.inv-expand-cell { background: var(--rdr-bg, #f9fafb); padding: 12px 16px !important; }
.inv-expand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.inv-expand-grid span { display: block; font-size: 10.5px; color: var(--rdr-text-muted); }
.inv-expand-grid b { font-size: 13px; color: var(--rdr-text); }
.inv-expand-reasons { font-size: 12px; color: var(--rdr-text-muted); }
.inv-expand-reasons b { color: var(--rdr-text); }

/* ============================================================
   INSIDER HOME
   ============================================================ */
.inv-home-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rdr-border);
  background: var(--rdr-card); color: var(--rdr-text); font-size: 18px; flex: none;
  transition: var(--rdr-transition);
}
.inv-home-bell:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.inv-home-bell-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.inv-home-tabs { display: flex; gap: 8px; margin: 16px 0; border-bottom: 1px solid var(--rdr-border); }
.inv-home-tab {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; background: none;
  font-size: 13.5px; font-weight: 600; color: var(--rdr-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--rdr-transition);
}
.inv-home-tab:hover { color: var(--rdr-text); }
.inv-home-tab.active { color: var(--rdr-accent); border-bottom-color: var(--rdr-accent); }

.inv-apply-error { color: #b91c1c; font-size: 12.5px; margin-bottom: 10px; }
.inv-expand-reasons b { color: var(--rdr-text); }

/* ── Ads Intelligence — print / PDF export ─────────────────────────────────────────────────
   .ins-print-only is invisible on screen and only ever shown by the @media print rule below,
   never by an Alpine x-show toggle — so "Download PDF" is just window.print() with nothing to
   get out of sync between screen and print DOM. .ins-noprint is the reverse: the whole
   interactive toolbar/filters/tabs, hidden only while actually printing. */
.ins-print-only { display: none; }
@media print {
    .ins-noprint { display: none !important; }
    .ins-print-only { display: block !important; }
    body { background: #fff; }
    .ins-print-header h1 { font-size: 20px; margin: 0 0 4px; }
    .ins-print-meta { font-size: 11px; color: #555; margin-bottom: 16px; }
    .ins-print-section { margin-bottom: 20px; page-break-inside: avoid; }
    .ins-print-section h2 { font-size: 14px; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 8px; }
    .ins-print-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
    .ins-print-table th, .ins-print-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #ddd; }
    .ins-print-table th { color: #444; font-weight: 600; }
    .ins-print-section ul { margin: 0; padding-left: 18px; font-size: 11px; }
    .ins-print-section li { margin-bottom: 4px; }
}

/* ============================================
   SHARED TAB NAV — reusable across pages
   ============================================ */
.rdr-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--rdr-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rdr-tab-nav::-webkit-scrollbar { display: none; }
.rdr-tab {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--rdr-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rdr-tab:hover { color: var(--rdr-text); }
.rdr-tab.active { color: var(--rdr-accent); border-bottom-color: var(--rdr-accent); }

/* ============================================
   TOAST / SNACKBAR SYSTEM
   ============================================ */
.rdr-toast-container {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 420px;
}
@media (min-width: 768.02px) {
  .rdr-toast-container { bottom: 24px; }
}
.rdr-toast {
  padding: 12px 18px;
  border-radius: var(--rdr-radius);
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--rdr-shadow-md);
  pointer-events: all;
  animation: rdr-toast-in 0.25s var(--rdr-ease) both;
}
@keyframes rdr-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rdr-toast-success { background: var(--rdr-positive); color: #fff; }
.rdr-toast-error   { background: var(--rdr-negative); color: #fff; }
.rdr-toast-info    { background: var(--rdr-info); color: #fff; }
.rdr-toast-neutral {
  background: var(--rdr-elevated);
  color: var(--rdr-text);
  border: 1px solid var(--rdr-border);
}

/* ============================================
   SKELETON LOADER ALIASES
   ============================================ */
.rdr-skeleton {
  background: linear-gradient(
    90deg,
    var(--rdr-border) 25%,
    var(--rdr-surface-hover) 50%,
    var(--rdr-border) 75%
  );
  background-size: 1200px 100%;
  animation: ins-shimmer 1.5s infinite linear;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
}
.rdr-skeleton-text   { height: 14px; border-radius: 4px; }
.rdr-skeleton-metric { height: 30px; width: 80px; border-radius: 6px; }
.rdr-skeleton-card   { height: 80px; border-radius: var(--rdr-radius); }

/* ============================================
   KPI DELTA — SEMANTIC COLOR HELPERS
   ============================================ */
.ins-kpi-delta-down-good { color: var(--rdr-positive) !important; }
.ins-kpi-delta-up-bad    { color: var(--rdr-negative) !important; }

/* ============================================
   BOTTOM NAVIGATION BAR (Flutter NavigationBar)
   ============================================ */
.rdr-bottom-nav { display: none; }

.rdr-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 4px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.rdr-bnav-item i {
  font-size: 20px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.rdr-bnav-item > span {
  line-height: 1;
  position: relative;
  z-index: 1;
}
.rdr-bnav-pill {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 26px;
  border-radius: 13px;
  background: transparent;
  transition: background 0.2s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.rdr-bnav-item.active { color: #fff; }
.rdr-bnav-item.active .rdr-bnav-pill { background: var(--rdr-accent); }
.rdr-bnav-item:active { opacity: 0.85; }

/* ============================================
   MORE DRAWER (Bottom Sheet on Mobile)
   ============================================ */
.rdr-more-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 300;
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1);
}
@media (min-width: 768.02px) {
  .rdr-more-drawer,
  .rdr-more-backdrop {
    display: none !important;
  }
}
.rdr-more-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #11141c;
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 20px 20px 0 0;
  z-index: 310;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s cubic-bezier(0.4,0,0.2,1);
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 32px));
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
}
.rdr-more-handle {
  width: 44px; height: 5px;
  background: rgba(255,255,255,.3);
  border-radius: 3px;
  margin: 12px auto 14px;
}
.rdr-more-drawer-open .rdr-more-backdrop {
  display: block;
  opacity: 1;
}
.rdr-more-drawer-open .rdr-more-drawer {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.rdr-more-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 12px 20px 6px;
}
.rdr-more-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: #f1f5f9;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: none;
  cursor: pointer;
  width: calc(100% - 24px);
  margin: 2px 12px;
  border-radius: 10px;
  text-align: left;
}
.rdr-more-nav-item i {
  font-size: 18px;
  width: 24px;
  text-align: center;
  color: #818cf8;
}
.rdr-more-nav-item:active, .rdr-more-nav-item.active {
  background: rgba(99,102,241,.2);
  color: #ffffff;
  font-weight: 600;
}
.rdr-more-nav-item.active i { color: #a5b4fc; }
.rdr-more-signout {
  color: #f87171 !important;
}
.rdr-more-signout i {
  color: #f87171 !important;
}
.rdr-more-signout-form {
  margin: 4px 0 calc(28px + env(safe-area-inset-bottom, 20px)) 0 !important;
  padding-bottom: 8px;
}

/* ============================================
   ADVISER AI — PUBLIC LANDING SHELL & SECTIONS
   ============================================ */
.adv-public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--rdr-bg);
  color: var(--rdr-text);
}
.adv-landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: var(--rdr-topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rdr-border);
}
.adv-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--rdr-text);
}
.adv-brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.adv-brand-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rdr-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.adv-badge-ai {
  font-size: 10.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.adv-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.adv-nav-link {
  color: var(--rdr-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.adv-nav-link:hover { color: var(--rdr-text); }
.adv-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.adv-btn-ghost {
  color: var(--rdr-text);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.adv-btn-ghost:hover { background: var(--rdr-surface-hover); }
.adv-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.adv-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99,102,241,.4);
}

/* Landing Hero */
.adv-hero {
  padding: 72px 24px 56px;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
}
.adv-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  color: var(--rdr-accent);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 24px;
}
.adv-hero-h1 {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin-bottom: 20px;
  color: var(--rdr-text);
}
.adv-gradient-text {
  background: linear-gradient(135deg, #6366f1 10%, #a855f7 60%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.adv-hero-p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--rdr-text-muted);
  max-width: 720px;
  margin: 0 auto 36px;
}
.adv-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Stats proof bar */
.adv-stats-banner {
  background: var(--rdr-card);
  border-top: 1px solid var(--rdr-border);
  border-bottom: 1px solid var(--rdr-border);
  padding: 32px 24px;
  margin: 40px 0 64px;
}
.adv-stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.adv-stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rdr-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.adv-stat-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* Pillars grid */
.adv-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.adv-section-head {
  text-align: center;
  margin-bottom: 48px;
}
.adv-section-kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rdr-accent);
  margin-bottom: 8px;
}
.adv-section-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rdr-text);
}
.adv-section-desc {
  font-size: 1rem;
  color: var(--rdr-text-muted);
  max-width: 600px;
  margin: 10px auto 0;
  line-height: 1.5;
}
.adv-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.adv-pillar-card {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
}
.adv-pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rdr-shadow-md);
  border-color: var(--rdr-accent);
}
.adv-pillar-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.adv-pillar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rdr-text);
}
.adv-pillar-desc {
  font-size: 13.5px;
  color: var(--rdr-text-muted);
  line-height: 1.6;
}
.adv-pillar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.adv-feature-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--rdr-surface-hover);
  color: var(--rdr-text);
}

/* CTA Box */
.adv-cta-box {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(168,85,247,.12) 100%);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 20px;
  padding: 56px 32px;
  text-align: center;
  margin: 40px auto 80px;
  max-width: 1040px;
}

/* Footer */
.adv-landing-footer {
  background: var(--rdr-sidebar-bg);
  color: rgba(255,255,255,.65);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 56px 32px 32px;
  margin-top: auto;
}
.adv-footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.adv-footer-col h5 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.adv-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adv-footer-links a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.15s;
}
.adv-footer-links a:hover { color: #fff; }
.adv-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}

/* ============================================
   RESPONSIVE — 768px (Flutter Mobile feel)
   ============================================ */
@media (max-width: 768px) {
  .rdr-sidebar { display: none !important; }
  .rdr-sidebar-backdrop { display: none !important; }
  .rdr-main { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }
  /* A sidebar collapsed on a wider screen stays collapsed here, and the collapsed rule (more specific) kept a 68px
     left margin for a sidebar phones don't show - a blank strip down the left of every page. */
  .rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-main { margin-left: 0 !important; max-width: 100vw !important; }
  .rdr-topbar { padding: 0 12px; height: 52px; gap: 6px; width: 100% !important; max-width: 100vw !important; box-sizing: border-box; overflow-x: hidden; }
  .rdr-mobile-menu-btn { display: none !important; }
  .rdr-topbar-heading { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .rdr-topbar-title { font-size: 13px; max-width: 130px; }
  .adv-topbar-workspace-chip { min-height: 44px; padding: 4px 8px; max-width: 120px; align-items: center; }
  .adv-workspace-name { max-width: 65px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rdr-topbar-icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .adv-user-pill { min-height: 44px; display: inline-flex; align-items: center; }
  .rdr-content {
    padding: 14px 12px 96px !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  .rdr-filter-bar { padding: 8px 10px !important; gap: 8px !important; }
  .rdr-filter-bar-left, .rdr-filter-bar-right { width: 100% !important; justify-content: space-between !important; }
  .rdr-preset-group { max-width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; padding: 2px !important; }
  .rdr-preset-btn { padding: 4px 8px !important; font-size: 11px !important; flex-shrink: 0 !important; }
  .ins-card { max-width: 100% !important; min-width: 0 !important; }
  .ins-card-header { padding: 10px 12px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .ins-card-title { font-size: 12.5px !important; }
  .ins-card-subtitle { margin-left: 0 !important; display: block !important; margin-top: 2px !important; }
  .ins-table-wrap { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .ins-tree-table .ins-td-name { min-width: 200px !important; max-width: 320px !important; }
  .rdr-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--rdr-sidebar-bg);
    border-top: 1px solid rgba(255,255,255,.08);
    z-index: 200;
    align-items: stretch;
    box-shadow: 0 -2px 20px rgba(0,0,0,.3);
  }
  .ins-kpi-row, .insider-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .rdr-overview-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .rdr-overview-header-controls {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
  }
  .rdr-overview-header-controls .rdr-dropdown-wrapper:first-child,
  .rdr-overview-header-controls .rdr-dropdown-wrapper:nth-child(2) {
    flex: 1 !important;
  }
  .rdr-overview-header-controls .rdr-btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    padding: 6px 8px !important;
  }
  .rdr-date-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .rdr-overview-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .rdr-overview-kpi-grid .ins-kpi-card {
    padding: 10px 10px !important;
  }
  .rdr-overview-kpi-grid .rdr-text-label {
    font-size: 10px !important;
  }
  .rdr-overview-kpi-grid .rdr-text-metric {
    font-size: 16px !important;
  }
  .rdr-overview-kpi-grid .ins-kpi-delta {
    font-size: 10.5px !important;
  }
  .rdr-overview-kpi-grid svg {
    display: none !important;
  }
  .rdr-intel-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .adv-hero-h1 { font-size: 2.2rem; }
  .adv-hero-p { font-size: 1rem; }
  .adv-nav-links { display: none; }
  .adv-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .adv-grid-4 { grid-template-columns: 1fr; }
  .adv-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .adv-landing-header { padding: 0 16px; }
  .adv-cta-box { padding: 36px 18px; margin: 24px 12px 48px; }
}

@media (min-width: 768.02px) and (max-width: 1024px) {
  :root {
    --rdr-sidebar-w: 68px;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-sidebar {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    overflow-x: hidden !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-sidebar-header {
    padding: 0 8px !important;
    justify-content: center !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-brand-name,
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-sidebar-collapse-btn {
    display: none !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-brand {
    justify-content: center !important;
    padding: 0 !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-nav-section-title {
    display: none !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-ws-switcher {
    padding: 4px 8px !important;
    overflow: hidden !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-ws-switcher button {
    justify-content: center !important;
    padding: 8px 0 !important;
    width: 44px !important;
    margin: 0 auto !important;
    position: relative !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-current {
    justify-content: center !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-name,
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-chevron {
    display: none !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-icon {
    margin: 0 !important;
    font-size: 18px !important;
    color: var(--rdr-text, #f1f5f9) !important;
    display: inline-flex !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-nav {
    padding: 6px 0 !important;
    overflow-x: hidden !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-nav-item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    position: relative !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-nav-item i {
    font-size: 19px !important;
    margin: 0 !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-nav-item span {
    display: none !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-nav-item.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
    border-left: 3px solid #6366f1 !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-sidebar-footer {
    padding: 8px 0 !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-sidebar-footer .rdr-nav-item {
    justify-content: center !important;
    padding: 10px 0 !important;
  }
  :where(.rdr-shell:not(.rdr-rail-open)) .rdr-sidebar-footer .rdr-nav-item span {
    display: none !important;
  }
  .rdr-main {
    margin-left: 68px !important;
    max-width: calc(100vw - 68px) !important;
    width: calc(100vw - 68px) !important;
    overflow-x: hidden !important;
  }
  .rdr-topbar {
    padding: 0 16px !important;
  }
  .rdr-content {
    padding: 16px 18px 40px !important;
    max-width: 100% !important;
  }
  .rdr-overview-kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .ins-kpi-card {
    padding: 12px 14px !important;
  }
  .ins-kpi-card .rdr-text-metric {
    font-size: 17px !important;
  }
  .rdr-intel-grid {
    grid-template-columns: 1fr !important;
  }
  .ins-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
  .adv-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-grid-4 { grid-template-columns: 1fr; }
}

/* Nav collapsed desktop styling */
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-brand-name,
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-section-title,
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-item span,
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-module-badge,
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-name,
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-chevron,
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-footer .rdr-nav-item span {
  display: none !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-collapse-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 6px auto;
  border-radius: var(--rdr-radius-sm);
  color: var(--rdr-text);
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-header {
  padding: 0 8px !important;
  justify-content: center !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-brand {
  justify-content: center !important;
  padding: 0 !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav {
  padding: 6px 0 !important;
  overflow-x: hidden !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-item {
  justify-content: center !important;
  padding: 12px 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-item i {
  font-size: 19px !important;
  margin: 0 !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-nav-item.active {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
  border-left: 3px solid #6366f1 !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher {
  padding: 4px 8px !important;
  overflow: hidden !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher button {
  justify-content: center !important;
  padding: 8px 0 !important;
  width: 44px !important;
  margin: 0 auto !important;
  position: relative !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-current {
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher button .rdr-ws-icon {
  margin: 0 !important;
  font-size: 18px !important;
  color: var(--rdr-text, #f1f5f9) !important;
  display: inline-flex !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-footer {
  padding: 8px 0 !important;
}
.rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-footer .rdr-nav-item {
  justify-content: center !important;
  padding: 10px 0 !important;
}

/* Tooltip on hover for 68px rail - mouse only (a tap on a phone left it stuck). The old rule joined a selector
   list and an @media with a comma, which is invalid, so browsers dropped it entirely. */
@media (hover: hover) {
  .rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-sidebar-footer .rdr-nav-item[data-tooltip]:hover::after,
  .rdr-shell.rdr-nav-collapsed:where(:not(.rdr-rail-open)) .rdr-ws-switcher button[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #f8fafc;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    z-index: 1000;
    pointer-events: none;
  }
}

/* Sidebar Header & Collapse Controls */
.rdr-sidebar-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rdr-sidebar-collapse-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rdr-sidebar-collapse-btn:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}


/* Topbar Workspace & User Menu */
.adv-topbar-workspace-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: var(--rdr-surface-hover);
  border: 1px solid var(--rdr-border);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rdr-text);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.adv-topbar-workspace-chip:hover {
  border-color: var(--rdr-accent);
  background: rgba(99,102,241,0.08);
  color: var(--rdr-text);
}
.adv-workspace-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .adv-workspace-name {
    max-width: 75px;
  }
}
@media (max-width: 420px) {
  .adv-workspace-name {
    display: none;
  }
}
.adv-workspace-icon {
  color: var(--rdr-accent);
  font-size: 13px;
  display: flex;
}
.adv-workspace-chevron {
  font-size: 10px;
  color: var(--rdr-text-muted);
}

.rdr-topbar-icon-btn {
  background: none;
  border: 1px solid var(--rdr-border);
  color: var(--rdr-text);
  width: 32px;
  height: 32px;
  border-radius: var(--rdr-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rdr-topbar-icon-btn:hover {
  background: var(--rdr-surface-hover);
  border-color: var(--rdr-accent);
  color: var(--rdr-accent);
}

.adv-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 3px;
  background: var(--rdr-surface-hover);
  border: 1px solid var(--rdr-border);
  border-radius: 9999px;
  cursor: pointer;
  color: var(--rdr-text);
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.adv-user-pill::after { display: none; }
.adv-user-pill:hover {
  border-color: var(--rdr-border-hover);
}
.adv-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.adv-user-dropdown {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: 12px;
  box-shadow: var(--rdr-shadow-md);
  min-width: 220px;
  padding: 6px 0;
  margin-top: 6px !important;
}
.adv-user-dropdown .dropdown-item {
  color: var(--rdr-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  display: flex;
  align-items: center;
}
.adv-user-dropdown .dropdown-item:hover {
  background: var(--rdr-surface-hover);
}


/* Fatigue Radar */
.adv-radar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--rdr-surface-hover);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 8px 14px;
}
.adv-fatigue-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.adv-fatigue-badge.fatigue-high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.adv-fatigue-badge.fatigue-mid {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.adv-fatigue-badge.fatigue-low {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ============================================
   PILLAR 4: OMNICHANNEL BLENDED MER WIDGET
   Cross-platform attribution truth (Shopify + Meta)
   ============================================ */

.adv-mer-card {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.adv-mer-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #06b6d4 50%, #10b981 100%);
}
.adv-mer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.adv-mer-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adv-mer-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adv-mer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.adv-mer-badge-primary {
  background: rgba(99, 102, 241, 0.12);
  color: var(--rdr-accent);
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.adv-mer-badge-cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #0891b2;
  border: 1px solid rgba(6, 182, 212, 0.25);
}
.adv-mer-badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.adv-mer-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.adv-mer-sub {
  font-size: 13px;
  color: var(--rdr-text-muted);
  margin: 0;
  max-width: 680px;
  line-height: 1.45;
}
.adv-mer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adv-mer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .adv-mer-columns {
    grid-template-columns: 1fr;
  }
}
.adv-mer-col {
  background: var(--rdr-surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.adv-mer-col-hero {
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
  border-color: rgba(99, 102, 241, 0.3);
}
.adv-mer-col-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rdr-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.adv-mer-col-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--rdr-text);
  line-height: 1.1;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.adv-mer-col-subvalue {
  font-size: 12.5px;
  color: var(--rdr-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.adv-mer-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}
.adv-mer-delta-up {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.adv-mer-delta-down {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.adv-mer-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--rdr-border);
  gap: 16px;
  flex-wrap: wrap;
}
.adv-mer-benchmarks {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.adv-mer-bench-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--rdr-text-muted);
}
.adv-mer-bench-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.adv-mer-progress-wrap {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 8px;
}
.adv-mer-progress-track {
  height: 8px;
  background: var(--rdr-border);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.adv-mer-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #10b981 100%);
  transition: width 0.4s ease;
}

/* Dashboard › Profit after ads: one tile per line of the calculation */
.adv-profit-tile {
  background: var(--rdr-surface);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 10px 12px;
}
.adv-profit-tile-hero { border: 1.5px solid var(--rdr-accent); }

/* ============================================
   PHASE 1: REBUILD SHARED PARTIALS DESIGN SYSTEM
   MetricTile, FilterBar, SafetyConfirmationModal
   ============================================ */

/* ── 1. Reusable Metric Tile ── */
.rdr-metric-tile {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  transition: border-color var(--rdr-duration-base, 0.15s), box-shadow var(--rdr-duration-base, 0.15s);
}
.rdr-metric-tile:hover {
  border-color: var(--rdr-border-hover);
}
.rdr-metric-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rdr-metric-tile-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rdr-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rdr-metric-tile-icon {
  font-size: 14px;
  color: var(--rdr-accent);
}
.rdr-metric-tile-sub {
  font-size: 11px;
  color: var(--rdr-text-muted);
}
.rdr-metric-tile-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--rdr-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* In a KPI row the value scales with its card (Analytics: 4 per row at 980px, 8 at 1920px), so "EGP 378,994.00" fits
   instead of spilling out. The cards are grid items with fixed tracks, so size containment is safe here. */
.ins-kpi-row .rdr-metric-tile { container-type: inline-size; min-width: 0; }
.ins-kpi-row .rdr-metric-tile-header { flex-wrap: wrap; }
.ins-kpi-row .rdr-metric-tile-value { font-size: clamp(15px, 11cqi, 1.8rem); white-space: nowrap; }
/* Narrow cards drop the "Click to view" hint (the selected card is already highlighted) so every value lines up. */
@container (max-width: 200px) { .ins-kpi-row .rdr-metric-tile-header .badge { display: none; } }
.rdr-metric-tile-comparison {
  min-height: 22px;
  display: flex;
  align-items: center;
}
.rdr-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.2;
}
.rdr-delta-up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.rdr-delta-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.rdr-delta-neutral {
  color: var(--rdr-text-muted);
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
}
.rdr-delta-none {
  font-size: 11.5px;
  color: var(--rdr-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  opacity: 0.85;
}
.rdr-delta-sub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  margin-left: 2px;
}

/* ── 2. Standard Filter Bar ── */
.rdr-filter-bar {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rdr-filter-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rdr-preset-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 2px;
  gap: 2px;
}
.rdr-preset-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.rdr-preset-btn:hover {
  color: var(--rdr-text);
}
.rdr-preset-btn.active {
  background: var(--rdr-elevated);
  color: var(--rdr-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.rdr-date-range-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rdr-date-input {
  background: var(--rdr-elevated);
  border: 1px solid var(--rdr-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--rdr-text);
  outline: none;
  transition: border-color 0.15s;
}
.rdr-date-input:focus {
  border-color: var(--rdr-accent);
}
.rdr-date-sep {
  color: var(--rdr-text-muted);
  font-size: 12px;
}
.rdr-filter-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rdr-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.rdr-toggle-input {
  display: none;
}
.rdr-toggle-switch {
  width: 32px;
  height: 18px;
  background: var(--rdr-border);
  border-radius: 9px;
  position: relative;
  transition: background 0.2s;
  display: inline-block;
}
.rdr-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.rdr-toggle-input:checked + .rdr-toggle-switch {
  background: var(--rdr-accent);
}
.rdr-toggle-input:checked + .rdr-toggle-switch::after {
  transform: translateX(14px);
}
.rdr-toggle-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--rdr-text-muted);
}
.rdr-currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  color: var(--rdr-accent);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.rdr-filter-refresh-btn {
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rdr-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.rdr-filter-refresh-btn:hover:not(:disabled) {
  color: var(--rdr-text);
  border-color: var(--rdr-border-hover);
}
.rdr-spin {
  animation: rdr-spin-anim 0.8s linear infinite;
}
@keyframes rdr-spin-anim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── 3. Safety Confirmation Modal ── */
.rdr-safety-modal-root {
  position: relative;
  z-index: 1050;
}
.rdr-safety-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1050;
}
.rdr-safety-dialog-wrap {
  position: fixed;
  inset: 0;
  z-index: 1051;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.rdr-safety-modal {
  pointer-events: auto;
  background: var(--rdr-elevated);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rdr-safety-header {
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--rdr-border);
}
.rdr-safety-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.rdr-safety-icon-primary {
  background: rgba(99, 102, 241, 0.15);
  color: var(--rdr-accent);
}
.rdr-safety-icon-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.rdr-safety-icon-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.rdr-safety-title-wrap {
  flex: 1;
}
.rdr-safety-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin: 0 0 2px 0;
}
.rdr-safety-sub {
  font-size: 12.5px;
  color: var(--rdr-text-muted);
  margin: 0;
}
.rdr-safety-close-btn {
  background: transparent;
  border: none;
  color: var(--rdr-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.rdr-safety-close-btn:hover {
  color: var(--rdr-text);
}
.rdr-safety-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rdr-safety-message {
  font-size: 13.5px;
  color: var(--rdr-text);
  line-height: 1.5;
}
.rdr-safety-policy-callout {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 14px;
}
.rdr-safety-policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #d97706;
  margin-bottom: 6px;
}
.rdr-safety-policy-text {
  font-size: 12.5px;
  color: var(--rdr-text);
  margin: 0;
  line-height: 1.45;
}
.rdr-safety-paused-tag {
  display: inline-block;
  background: #f59e0b;
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
}
.rdr-safety-items-box {
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  padding: 12px;
}
.rdr-safety-items-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  margin-bottom: 8px;
}
.rdr-safety-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rdr-safety-item {
  font-size: 12.5px;
  color: var(--rdr-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rdr-safety-footer {
  padding: 14px 20px;
  background: var(--rdr-surface-2);
  border-top: 1px solid var(--rdr-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Alpine Transitions */
.rdr-transition-enter { transition: all 0.2s ease-out; }
.rdr-transition-leave { transition: all 0.15s ease-in; }
.rdr-opacity-0 { opacity: 0; }
.rdr-opacity-100 { opacity: 1; }
.rdr-scale-95 { opacity: 0; transform: scale(0.95); }
.rdr-scale-100 { opacity: 1; transform: scale(1); }

/* ============================================
   DAYPARTING HEATMAP & CREATIVE HOOK DIAGNOSTICS
   ============================================ */

.adv-dayparting-wrap {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 22px 24px;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.adv-dayparting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.adv-dayparting-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.adv-dayparting-sub {
  font-size: 13px;
  color: var(--rdr-text-muted);
  margin-top: 2px;
}
.adv-metric-btn-group {
  display: inline-flex;
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-sm);
  padding: 2px;
  gap: 2px;
}
.adv-metric-btn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rdr-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.adv-metric-btn.active {
  background: var(--rdr-elevated);
  color: var(--rdr-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.adv-heatmap-table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
}
.adv-heatmap-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  font-size: 11px;
}
.adv-heatmap-table th, .adv-heatmap-table td {
  padding: 8px 4px;
  text-align: center;
  border: 1px solid var(--rdr-border);
}
.adv-heatmap-table th {
  background: var(--rdr-surface-2);
  color: var(--rdr-text-muted);
  font-weight: 600;
  font-size: 10px;
}
.adv-heatmap-day {
  font-weight: 700;
  color: var(--rdr-text);
  text-align: left !important;
  padding-left: 12px !important;
  background: var(--rdr-surface-2);
  width: 90px;
}
.adv-heatmap-cell {
  position: relative;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
  font-weight: 700;
  border-radius: 3px;
}
.adv-heatmap-cell:hover {
  transform: scale(1.12);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.adv-dayparting-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 850px) {
  .adv-dayparting-insights { grid-template-columns: 1fr; }
}
.adv-insight-card {
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.adv-insight-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.adv-insight-card-desc {
  font-size: 12.5px;
  color: var(--rdr-text);
  line-height: 1.4;
  margin: 0;
}

/* Creative Diagnostics Badges */
.adv-hook-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.adv-hook-stopper {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.adv-hook-engine {
  background: rgba(99, 102, 241, 0.14);
  color: var(--rdr-accent);
  border: 1px solid rgba(99, 102, 241, 0.28);
}
.adv-hook-fatigue {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

/* First-run checklist on Home (SetupChecklistService). */
.ins-setup-list { list-style: none; margin: 0; padding: 4px 18px 14px; display: grid; gap: 10px; }
.ins-setup-list li { display: flex; gap: 10px; align-items: flex-start; }
.ins-setup-list li > i { font-size: 16px; color: var(--rdr-text-muted); margin-top: 1px; }
.ins-setup-list li.is-done > i { color: var(--rdr-positive); }
.ins-setup-list li.is-done .fw-semibold { color: var(--rdr-text-muted); text-decoration: line-through; }
.ins-setup-why { display: block; font-size: 12px; color: var(--rdr-text-muted); }

/* Tabs between pages grouped into one sidebar entry (AppNavigation.Hubs), above the page content. */
.rdr-hub-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rdr-border); margin-bottom: 16px; }
.rdr-hub-tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--rdr-text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rdr-hub-tab:hover { color: var(--rdr-text); }
.rdr-hub-tab.active { color: var(--rdr-accent); border-bottom-color: var(--rdr-accent); }
.rdr-hub-tab:focus-visible { outline: 2px solid var(--rdr-accent); outline-offset: 2px; border-radius: 4px; }

/* Creatives: ad-level filters, popup chart and ad timeline. */
.crv-filter-menu { width: 340px; max-height: 75vh; overflow-y: auto; }
.crv-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; }
.crv-popup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--rdr-border); background: var(--rdr-card); }
.crv-chart { min-height: 240px; }
.crv-timeline { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 12px; }
.crv-timeline li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rdr-border); }
.crv-timeline .crv-when { flex: 0 0 140px; color: var(--rdr-text-muted); }
.crv-ad-row-selected { background: rgba(99, 102, 241, 0.08); }
.crv-stuck { font-size: 11px; color: var(--rdr-warning); }
.crv-timeline-col { width: 100%; max-width: 360px; }
.crv-th { min-width: 100px; padding: 8px 10px !important; }
.cursor-pointer { cursor: pointer; }
.crv-roas-note { display: block; font-size: 10px; color: var(--rdr-text-muted); }
.crv-sales-split { display: flex; flex-direction: column; gap: 4px; font-size: 12px; padding: 8px 10px; border: 1px solid var(--rdr-border); border-radius: 8px; }
.crv-sales-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crv-obj-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--rdr-border); color: var(--rdr-text-muted); }
.crv-obj-sales { background: rgba(22, 163, 74, 0.14); color: var(--rdr-positive); }
.crv-roas { color: var(--rdr-positive); font-weight: 700; }
.crv-other-results { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px 10px; font-size: 11px; color: var(--rdr-text-muted); border-top: 1px dashed var(--rdr-border); }
.act-constituent-table-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--rdr-border); border-radius: 8px; }
.crv-thumb-hover { transition: transform 0.15s ease; }
.crv-thumb-hover:hover { transform: scale(1.12); }

/* The shared dialog shell (live-edit dialog in the layout, Campaign Builder dialogs): full-screen dimmed overlay, centred
   card that scrolls when its content is taller than the screen. Was only defined inside the Builder page, so the live-edit
   dialog rendered unstyled (behind the sidebar) everywhere else. */
.ins-builder-modal { position: fixed; z-index: 1050; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 16px; }
.ins-builder-modal-card { display: grid; gap: 12px; background: var(--rdr-elevated); border: 1px solid var(--rdr-border); border-radius: 12px; padding: 22px; width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.ins-builder-modal-card h2 { font-size: 19px; margin: 0; color: var(--rdr-text); }
.rdr-live-edit-card { width: min(600px, calc(100vw - 32px)); display: block; }
/* Live edit dialog: fixed header (what, which step, tabs) and footer (review + actions), the form scrolls between */
.rdr-le.rdr-live-edit-card { width: min(720px, calc(100vw - 32px)); padding: 0; display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: hidden; }
.rdr-le-head { position: relative; padding: 18px 22px 0; border-bottom: 1px solid var(--rdr-border); }
.rdr-le-title { display: flex; flex-direction: column; gap: 4px; padding-right: 36px; }
.rdr-le-title h3 { margin: 0; font-size: 18px; font-weight: 650; color: var(--rdr-text); line-height: 1.3; overflow-wrap: anywhere; }
.rdr-le-level { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rdr-accent); background: var(--rdr-accent-light); border-radius: 999px; padding: 2px 9px; }
.rdr-le-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--rdr-text-muted); }
.rdr-le-close:hover { background: var(--rdr-surface-hover); color: var(--rdr-text); }
.rdr-le-steps { display: flex; gap: 18px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; color: var(--rdr-text-muted); }
.rdr-le-steps li { display: flex; align-items: center; gap: 6px; }
.rdr-le-steps li > span:first-child { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rdr-border); font-size: 11px; font-weight: 600; }
.rdr-le-steps li.is-on { color: var(--rdr-text); font-weight: 600; }
.rdr-le-steps li.is-on > span:first-child { background: var(--rdr-accent); border-color: var(--rdr-accent); color: #fff; }
.rdr-le-steps li.is-done > span:first-child { background: var(--rdr-accent-light); border-color: transparent; color: var(--rdr-accent); }
.rdr-le-tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; }
.rdr-le-tabs button { position: relative; border: 0; background: none; padding: 8px 12px; font-size: 13.5px; color: var(--rdr-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.rdr-le-tabs button.is-on { color: var(--rdr-accent); border-bottom-color: var(--rdr-accent); font-weight: 600; }
.rdr-le-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rdr-warning); margin-left: 6px; vertical-align: middle; }
.rdr-le-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; }
.rdr-le-field { display: block; margin-bottom: 14px; padding: 2px 0 2px 10px; border-left: 3px solid transparent; transition: border-color .15s; }
.rdr-le-field.is-changed { border-left-color: var(--rdr-warning); }
.rdr-le-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--rdr-text); margin-bottom: 5px; }
.rdr-le-label small, .rdr-le-hint, .rdr-le-was { font-weight: 400; color: var(--rdr-text-muted); }
.rdr-le-hint, .rdr-le-was { display: block; font-size: 12px; margin-top: 4px; }
.rdr-le-was { font-style: italic; overflow-wrap: anywhere; }
.rdr-le-note { font-size: 12.5px; color: var(--rdr-text-muted); margin: 0 0 12px; }
.rdr-le-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 14px; }
.rdr-le-grid-3 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.rdr-le-switch { display: inline-flex; border: 1px solid var(--rdr-border); border-radius: 10px; padding: 3px; gap: 3px; background: var(--rdr-surface-hover); }
.rdr-le-switch button { border: 0; background: none; border-radius: 7px; padding: 6px 16px; font-size: 13.5px; font-weight: 600; color: var(--rdr-text-muted); }
.rdr-le-switch button.is-on { background: var(--rdr-success-badge); color: #fff; }
.rdr-le-switch button.is-on.is-off { background: var(--rdr-text-muted); }
.rdr-le-budget { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rdr-le-budget input { flex: 1 1 160px; max-width: 220px; font-variant-numeric: tabular-nums; }
.rdr-le-nudges { display: flex; flex-wrap: wrap; gap: 4px; }
.rdr-le-chip { border: 1px solid var(--rdr-border); background: var(--rdr-elevated); color: var(--rdr-text); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rdr-le-chip:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.rdr-le-box { border: 1px solid var(--rdr-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.rdr-le-tag { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rdr-border); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; background: var(--rdr-elevated); }
.rdr-le-tag button { border: 0; background: none; color: var(--rdr-text-muted); padding: 0 4px; line-height: 1; }
.rdr-le-history { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rdr-border); }
.rdr-le-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rdr-text-muted); margin-bottom: 12px; }
.rdr-le-skel { border-radius: 8px; background: linear-gradient(90deg, var(--rdr-surface-hover) 25%, var(--rdr-border) 50%, var(--rdr-surface-hover) 75%); background-size: 200% 100%; animation: rdr-le-shimmer 1.2s linear infinite; }
@keyframes rdr-le-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rdr-le-foot { border-top: 1px solid var(--rdr-border); padding: 12px 22px 16px; background: var(--rdr-elevated); }
.rdr-le-review { max-height: 30vh; overflow-y: auto; margin-bottom: 8px; font-size: 13px; }
.rdr-le-msg { margin-bottom: 8px; }
.rdr-le-msg.rdr-le-loading { margin-bottom: 8px; }
.rdr-le-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) { .rdr-le-head, .rdr-le-body, .rdr-le-foot { padding-left: 14px; padding-right: 14px; } .rdr-le-steps { gap: 10px; } }

/* Creatives popup: post preview (Meta's own rendering), chart that scrolls sideways on a phone. */
.crv-link-btn { font-size: 11.5px; }
.crv-post-card { width: min(460px, calc(100vw - 24px)); }
.crv-post-frame { display: flex; justify-content: center; min-height: 120px; max-height: 70vh; overflow: auto; }
.crv-post-frame iframe { width: 100%; max-width: 420px; border: 0; border-radius: 8px; background: #fff; }
.crv-chart-scroll { overflow-x: auto; overflow-y: hidden; }
.crv-timeline li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .crv-timeline li { flex-direction: column; gap: 2px; }
  .crv-timeline .crv-when { flex-basis: auto; }
}
.crv-chart-col { min-width: 0; }
/* Hourly / Daily / Weekly: kept together, to the right of the metric buttons (its own line when they wrap). */
.crv-grain { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.crv-stat-pair { display: contents; }

/* App-wide "data on its way" bar (rdrFetch in _Layout). */
.rdr-busy-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, transparent 0%, var(--rdr-accent) 40%, var(--rdr-accent) 60%, transparent 100%);
  background-size: 50% 100%; background-repeat: no-repeat; }
.rdr-busy-bar.is-on { opacity: 1; animation: rdr-busy-slide 1.1s ease-in-out infinite; }
@keyframes rdr-busy-slide { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .rdr-busy-bar.is-on { animation: none; background-size: 100% 100%; } }
/* Table cell that wraps long unbroken names (ad names with underscores) instead of running into the next column. */
.ins-wrap-cell { max-width: 200px; white-space: normal; overflow-wrap: anywhere; }

/* A list being refreshed stays on screen and clickable, just dimmed, with an "Updating..." chip by the title. */
.rdr-updating { opacity: .6; transition: opacity .15s; }
.rdr-updating-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: var(--rdr-accent); }

/* Creatives: rule filters (metric over a window vs a number). */
.crv-filter-menu { width: min(500px, calc(100vw - 24px)); }
.crv-rule-sub { font-weight: 400; text-transform: none; color: var(--rdr-text-muted); }
.crv-rule-group { border: 1px solid var(--rdr-border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.crv-rule-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.crv-rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.crv-rule-row .form-select { width: auto; flex: 1 1 120px; }
.crv-rule-row .form-control { width: 80px; flex: 0 0 80px; }
/* On a phone the filter menu opens as a panel across the screen instead of hanging off the button (it was cut off on the left). */
@media (max-width: 575.98px) {
  .crv-filter-menu { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-height: calc(100vh - 160px); z-index: 1060; }
}
.crv-saved-chip { display: inline-flex; align-items: center; gap: 2px; border-radius: 8px; }
.crv-saved-chip.is-active .ins-btn { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.crv-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.crv-save-row .form-control { flex: 1 1 180px; width: auto; }
/* Rule builder: AND / OR joins, NOT switches. */
.crv-rule-top { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.crv-rule-top .form-select, .crv-rule-head .form-select { width: auto; flex: 0 1 auto; }
.crv-rule-head { flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.crv-rule-group.is-not { border-color: var(--rdr-negative); }
.crv-rule-join { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--rdr-accent); margin: 2px 0 6px; }
.crv-rule-join-sm { text-align: left; margin: 0 0 4px 4px; }
.crv-rule-row-num { display: contents; }
.crv-rule-text { flex: 1 1 160px; width: auto !important; }
.crv-not-btn { font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--rdr-border); background: transparent; color: var(--rdr-text-muted); }
.crv-not-btn.is-on { background: var(--rdr-negative); border-color: var(--rdr-negative); color: var(--rdr-card); }

/* ============================================
   App-wide interaction polish (2026-10-10)
   Everything here is switched off by the prefers-reduced-motion rule at the top.
   ============================================ */
.crv-idle-toggle { font-size: 12px; white-space: nowrap; }
/* The campaign table: press a column to sort by it (INC-2026-10-30). */
.camp-sort-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; }
.camp-sort-btn:hover, .camp-sort-btn:focus-visible { color: var(--rdr-text); }
.camp-sort-btn.is-sorted { color: var(--rdr-accent); }
.camp-sort-ico { font-size: 10px; opacity: 0.35; }
.camp-sort-btn:hover .camp-sort-ico, .camp-sort-btn:focus-visible .camp-sort-ico { opacity: 0.7; }
.camp-sort-btn.is-sorted .camp-sort-ico { opacity: 1; }
.camp-more-row td { padding: 10px 16px; font-size: 12px; color: var(--rdr-text-muted); }
.camp-more-row .ins-btn { margin-left: 8px; }
/* Saved views. */
.camp-view-menu { width: min(320px, calc(100vw - 32px)); }
.camp-view-note { margin: 0 0 8px; font-size: 12px; color: var(--rdr-text-muted); }
.camp-view-error { margin-top: 6px; font-size: 12px; color: var(--rdr-negative); }
.camp-view-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.camp-view-changed { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--rdr-warning-badge); }
.camp-idle-tag { margin-left: 6px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--rdr-surface-2); color: var(--rdr-text-muted); }

/* Buttons answer the press; keyboard focus is always visible. */
.rdr-btn, .ins-btn, .btn, .ins-btn-range, .rdr-nav-item { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
.rdr-btn:active:not(:disabled), .ins-btn:active:not(:disabled), .btn:active:not(:disabled), .ins-btn-range:active { transform: scale(.97); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--rdr-accent); outline-offset: 2px; }
input[type=checkbox], input[type=radio] { accent-color: var(--rdr-accent); }

/* Dialogs fade in and their card rises into place (replays each time one opens). */
@keyframes rdr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rdr-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ins-modal-overlay, .ins-builder-modal { animation: rdr-fade-in .16s ease-out; }
.ins-modal-overlay > .ins-modal, .ins-builder-modal > .ins-builder-modal-card { animation: rdr-pop-in .22s cubic-bezier(.22, 1, .36, 1); }

/* Dropdown panels drop open. */
.ins-col-picker-menu, .dropdown-menu.show { animation: rdr-pop-in .14s ease-out; }

/* Rows highlight under the pointer. */
.ins-tree-row { transition: background-color .12s; }
.ins-tree-row:hover { background: var(--rdr-surface-2); }
.ins-table tbody tr { transition: background-color .12s; }

/* Cards that open something lift slightly. */
.rdr-card, .ins-card { transition: box-shadow .18s, transform .18s, border-color .18s; }
.rdr-card[role="button"]:hover, .rdr-card.is-clickable:hover, a.rdr-card:hover { transform: translateY(-2px); box-shadow: var(--rdr-shadow-hover); }

/* Collapsible sections and tab panels fade in when shown. */
details[open] > :not(summary), [role="tabpanel"] { animation: rdr-fade-in .18s ease-out; }

/* Campaigns: edit a campaign, its ad sets and ads together. */
.tree-edit-card { width: min(860px, calc(100vw - 24px)); }
.tree-edit-list { max-height: 55vh; overflow-y: auto; border: 1px solid var(--rdr-border); border-radius: 8px; }
.tree-edit-row { display: grid; grid-template-columns: 64px minmax(140px, 1fr) 76px 110px minmax(0, 180px); align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--rdr-border); transition: background-color .15s; }
.tree-edit-row:last-child { border-bottom: 0; }
.tree-edit-row.lvl-1 { padding-left: 22px; }
.tree-edit-row.lvl-2 { padding-left: 40px; background: var(--rdr-surface-2); }
.tree-edit-row.is-changed { background: var(--rdr-accent-light); }
.tree-edit-row.is-error { background: var(--rdr-negative-light); }
.tree-edit-row.is-done { background: var(--rdr-positive-light); }
.tree-edit-level { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--rdr-text-muted); }
.tree-edit-result { color: var(--rdr-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-edit-row.is-error .tree-edit-result { color: var(--rdr-negative); white-space: normal; }
@media (max-width: 640px) {
  .tree-edit-row { grid-template-columns: 1fr 76px; }
  .tree-edit-level, .tree-edit-name { grid-column: 1 / -1; }
  .tree-edit-result { grid-column: 1 / -1; }
}
.tree-edit-bulk { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--rdr-border); border-radius: 8px; font-size: 12px; }
.tree-edit-bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tree-edit-bulk-row .form-control { width: 110px; flex: 0 0 auto; }
.tree-edit-row { grid-template-columns: 64px minmax(140px, 1fr) 76px 110px minmax(0, 160px) 40px; }
.tree-edit-more { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 2px; font-size: 12px; }
.tree-edit-more label { display: grid; gap: 2px; }
.tree-edit-more .form-control { width: 130px; }
@media (max-width: 640px) { .tree-edit-more { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .tree-edit-row { grid-template-columns: 1fr 76px; }
  .tree-edit-more-btn { justify-self: start; }
}

/* ============================================
   Creatives: fatigue, rankings, tags, compare, and the popup's deeper views (2026-10-11)
   ============================================ */
.crv-radar-btn { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 2px 6px; color: inherit; cursor: pointer; transition: background-color .15s, border-color .15s; }
.crv-radar-btn:hover { background: var(--rdr-surface-2); }
.crv-radar-btn.is-on { border-color: var(--rdr-negative); background: var(--rdr-negative-light); }

.crv-compare-pick { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--rdr-border); border-radius: 999px; background: var(--rdr-card); color: var(--rdr-text-secondary); opacity: .92; transition: opacity .15s, background-color .15s, color .15s; }
.crv-compare-pick.is-on { background: var(--rdr-accent); border-color: var(--rdr-accent); color: var(--rdr-card); opacity: 1; }
.crv-compare-pick:disabled { opacity: .45; cursor: not-allowed; }
@media (hover: hover) { .insider-creative-card:not(:hover) .crv-compare-pick:not(.is-on) { opacity: 0; } }

.crv-fatigue { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.crv-fatigue.is-fatiguing { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.crv-fatigue.is-watch { background: var(--rdr-warning-light); color: var(--rdr-warning); }
.crv-fatigue.is-fresh { background: var(--rdr-positive-light); color: var(--rdr-positive); }

.crv-rank-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crv-rank { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: var(--rdr-surface-2); color: var(--rdr-text-secondary); white-space: nowrap; }
.crv-rank b { font-weight: 700; }
.crv-rank.is-good { background: var(--rdr-positive-light); color: var(--rdr-positive); }
.crv-rank.is-average { background: var(--rdr-info-light); color: var(--rdr-info); }
.crv-rank.is-poor { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.crv-rank-ad { padding: 6px 0; border-bottom: 1px solid var(--rdr-border); }
.crv-rank-ad:last-child { border-bottom: 0; }

.crv-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crv-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--rdr-border);
  background: var(--rdr-card); color: var(--rdr-text-secondary); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.crv-tag:hover { border-color: var(--rdr-accent); color: var(--rdr-accent); }
.crv-tag.is-on { background: var(--rdr-accent-light); border-color: var(--rdr-accent); color: var(--rdr-accent); }
.crv-tag-add { border-style: dashed; }
.crv-tag-x { border: 0; background: transparent; color: inherit; padding: 0 0 0 2px; line-height: 1; }
.crv-tag-card { width: min(440px, calc(100vw - 24px)); }

.crv-deep-table { font-size: 12px; }
.crv-deep-table th { font-size: 11px; color: var(--rdr-text-muted); font-weight: 600; white-space: nowrap; }
.crv-deep-table td { white-space: nowrap; }
.crv-share-col { min-width: 110px; }
.crv-share { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--rdr-surface-2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.crv-share span, .crv-funnel-bar span { display: block; height: 100%; background: var(--rdr-accent); border-radius: inherit; transition: width .5s var(--rdr-ease); }
.crv-piece { min-width: 220px; max-width: 360px; white-space: normal !important; }
.crv-piece img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; float: left; margin-right: 8px; }
.crv-piece-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.crv-funnel { display: grid; gap: 6px; max-width: 720px; }
.crv-funnel-row { display: grid; grid-template-columns: 120px 1fr 190px; align-items: center; gap: 10px; font-size: 12px; }
.crv-funnel-bar { height: 12px; border-radius: 6px; background: var(--rdr-surface-2); overflow: hidden; }
.crv-funnel-num { display: flex; flex-direction: column; line-height: 1.2; }
@media (max-width: 640px) {
  .crv-funnel-row { grid-template-columns: 1fr; gap: 2px; }
  .crv-funnel-num { flex-direction: row; gap: 6px; align-items: baseline; }
}

.crv-compare-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1040; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 8px 12px; border-radius: 12px; background: var(--rdr-card); border: 1px solid var(--rdr-border); box-shadow: var(--rdr-shadow-md); max-width: calc(100vw - 24px); }
.crv-compare-thumbs { display: flex; gap: 4px; }
.crv-compare-thumbs img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rdr-border); }
@media (max-width: 768px) { .crv-compare-bar { bottom: 76px; } } /* above the phone's bottom menu */
.crv-compare-card { width: min(1000px, calc(100vw - 24px)); }
.crv-compare-table { max-height: 50vh; overflow: auto; border: 1px solid var(--rdr-border); border-radius: 8px; font-size: 12px; }
.crv-compare-table th, .crv-compare-table td { white-space: nowrap; }
.crv-compare-head { min-width: 150px; max-width: 220px; vertical-align: top; }
.crv-compare-head img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 4px; }
.crv-best { background: var(--rdr-positive-light); color: var(--rdr-positive); font-weight: 700; }

/* Campaigns: find a campaign, ad set or ad by name. */
.camp-search { position: relative; min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.camp-search > i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--rdr-text-muted); font-size: 12px; pointer-events: none; }
.camp-search input { padding-left: 28px; }
.camp-search-note { margin: 0 16px 8px; padding: 6px 10px; border-radius: 8px; font-size: 12px; background: var(--rdr-info-light); color: var(--rdr-text-secondary); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ins-tree-row.is-search-hit > td:nth-child(2) { box-shadow: inset 3px 0 0 var(--rdr-accent); }
.ins-tree-row.is-search-hit .ins-tree-name, .ins-tree-row.is-search-hit > td:nth-child(2) strong { color: var(--rdr-accent); }

/* ============================================
   App-wide motion (2026-10-11). Opacity only where it wraps other content: a transform on a wrapper
   would make it the frame for fixed dialogs inside it. All off for reduced motion (rule at the top).
   ============================================ */
/* Every page's content eases in; the old per-page entrance no longer keeps a transform afterwards. */
.rdr-content { animation: rdr-fade-in .22s ease-out backwards; }
.ins-page-enter { animation-fill-mode: backwards; }

/* Whatever Alpine shows - filters, popovers, tab panels, sections, messages, empty states - fades in as it
   appears (a CSS animation restarts each time display goes from none to shown). Zero specificity, so a
   component's own animation still wins; table parts and x-transition elements are left alone. */
:where([x-show]:not(tr, td, th, thead, tbody, option, [x-transition])) { animation: rdr-fade-in .16s ease-out; }

/* Campaigns: ad sets and ads ease in when a row is expanded. */
.ins-tree-row.ins-tree-lvl-1, .ins-tree-row.ins-tree-lvl-2, .ins-tree-row.ins-tree-lvl-3 { animation: rdr-row-drop .2s cubic-bezier(.22, 1, .36, 1); }
@keyframes rdr-row-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* A row that was just changed (edit, on/off, budget) glows once, so it's clear what the change touched. */
@keyframes rdr-flash { from { background-color: var(--rdr-accent-light); } to { background-color: transparent; } }
.is-just-updated, .is-just-updated > td { animation: rdr-flash 1.8s ease-out; }

/* Hub tabs change colour smoothly; expand chevrons turn instead of swapping icons (right -> down, down -> up). */
.rdr-hub-tab { transition: color .15s, border-color .15s; }
.rdr-chev { display: inline-block; transition: transform .18s var(--rdr-ease); }
.rdr-chev.is-open { transform: rotate(90deg); }
.rdr-chev.is-flipped { transform: rotate(180deg); }

/* ── Generated utility classes (inline styles moved out of the views; tools: inline_to_classes.py) ── */
/* Same declarations the inline styles had; 4x specificity keeps them winning like the inline style did. */
.u--webkit-box-orient-vertical.u--webkit-box-orient-vertical.u--webkit-box-orient-vertical.u--webkit-box-orient-vertical { -webkit-box-orient: vertical; }
.u--webkit-line-clamp-1.u--webkit-line-clamp-1.u--webkit-line-clamp-1.u--webkit-line-clamp-1 { -webkit-line-clamp: 1; }
.u--webkit-line-clamp-2.u--webkit-line-clamp-2.u--webkit-line-clamp-2.u--webkit-line-clamp-2 { -webkit-line-clamp: 2; }
.u-align-items-baseline.u-align-items-baseline.u-align-items-baseline.u-align-items-baseline { align-items: baseline; }
.u-align-items-center.u-align-items-center.u-align-items-center.u-align-items-center { align-items: center; }
.u-align-items-flex-end.u-align-items-flex-end.u-align-items-flex-end.u-align-items-flex-end { align-items: flex-end; }
.u-align-items-flex-start.u-align-items-flex-start.u-align-items-flex-start.u-align-items-flex-start { align-items: flex-start; }
.u-align-self-center.u-align-self-center.u-align-self-center.u-align-self-center { align-self: center; }
.u-animation-spin-1s-linear-infinite.u-animation-spin-1s-linear-infinite.u-animation-spin-1s-linear-infinite.u-animation-spin-1s-linear-infinite { animation: spin 1s linear infinite; }
.u-aspect-ratio-1.u-aspect-ratio-1.u-aspect-ratio-1.u-aspect-ratio-1 { aspect-ratio: 1; }
.u-aspect-ratio-1_91-1.u-aspect-ratio-1_91-1.u-aspect-ratio-1_91-1.u-aspect-ratio-1_91-1 { aspect-ratio: 1.91/1; }
.u-background-accent.u-background-accent.u-background-accent.u-background-accent { background: var(--rdr-accent); }
.u-background-accent-light.u-background-accent-light.u-background-accent-light.u-background-accent-light { background: var(--rdr-accent-light); }
.u-background-bg-subtle.u-background-bg-subtle.u-background-bg-subtle.u-background-bg-subtle { background: var(--rdr-bg-subtle); }
.u-background-border.u-background-border.u-background-border.u-background-border { background: var(--rdr-border); }
.u-background-card.u-background-card.u-background-card.u-background-card { background: var(--rdr-card); }
.u-background-danger-lightxfee2e2.u-background-danger-lightxfee2e2.u-background-danger-lightxfee2e2.u-background-danger-lightxfee2e2 { background: var(--rdr-danger-light,#fee2e2); }
.u-background-linear-gradient135degx6366f-ba5de4.u-background-linear-gradient135degx6366f-ba5de4.u-background-linear-gradient135degx6366f-ba5de4.u-background-linear-gradient135degx6366f-ba5de4 { background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); }
.u-background-linear-gradient135degx6366f1x8b5cf6.u-background-linear-gradient135degx6366f1x8b5cf6.u-background-linear-gradient135degx6366f1x8b5cf6.u-background-linear-gradient135degx6366f1x8b5cf6 { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.u-background-linear-gradient135degx6366f1xa855f7.u-background-linear-gradient135degx6366f1xa855f7.u-background-linear-gradient135degx6366f1xa855f7.u-background-linear-gradient135degx6366f1xa855f7 { background: linear-gradient(135deg,#6366f1,#a855f7); }
.u-background-linear-gradient135degx95bf47x5e8e3e.u-background-linear-gradient135degx95bf47x5e8e3e.u-background-linear-gradient135degx95bf47x5e8e3e.u-background-linear-gradient135degx95bf47x5e8e3e { background: linear-gradient(135deg,#95BF47,#5E8E3E); }
.u-background-none.u-background-none.u-background-none.u-background-none { background: none; }
.u-background-rgba0000_6.u-background-rgba0000_6.u-background-rgba0000_6.u-background-rgba0000_6 { background: rgba(0,0,0,0.6); }
.u-background-rgba0000_65.u-background-rgba0000_65.u-background-rgba0000_65.u-background-rgba0000_65 { background: rgba(0,0,0,0.65); }
.u-background-rgba1523420_85.u-background-rgba1523420_85.u-background-rgba1523420_85.u-background-rgba1523420_85 { background: rgba(15,23,42,0.85); }
.u-background-rgba161851290_12.u-background-rgba161851290_12.u-background-rgba161851290_12.u-background-rgba161851290_12 { background: rgba(16,185,129,0.12); }
.u-background-rgba161851290_15.u-background-rgba161851290_15.u-background-rgba161851290_15.u-background-rgba161851290_15 { background: rgba(16,185,129,0.15); }
.u-background-rgba168852470_12.u-background-rgba168852470_12.u-background-rgba168852470_12.u-background-rgba168852470_12 { background: rgba(168,85,247,0.12); }
.u-background-rgba23968680_15.u-background-rgba23968680_15.u-background-rgba23968680_15.u-background-rgba23968680_15 { background: rgba(239,68,68,0.15); }
.u-background-rgba591302460_12.u-background-rgba591302460_12.u-background-rgba591302460_12.u-background-rgba591302460_12 { background: rgba(59,130,246,0.12); }
.u-background-rgba991022410_12.u-background-rgba991022410_12.u-background-rgba991022410_12.u-background-rgba991022410_12 { background: rgba(99,102,241,0.12); }
.u-background-rgba991022410_15.u-background-rgba991022410_15.u-background-rgba991022410_15.u-background-rgba991022410_15 { background: rgba(99,102,241,0.15); }
.u-background-surface-2.u-background-surface-2.u-background-surface-2.u-background-surface-2 { background: var(--rdr-surface-2); }
.u-background-x0f172a.u-background-x0f172a.u-background-x0f172a.u-background-x0f172a { background: #0f172a; }
.u-background-x10b981.u-background-x10b981.u-background-x10b981.u-background-x10b981 { background: #10b981; }
.u-background-x1877f2.u-background-x1877f2.u-background-x1877f2.u-background-x1877f2 { background: #1877f2; }
.u-background-x2563eb.u-background-x2563eb.u-background-x2563eb.u-background-x2563eb { background: #2563eb; }
.u-background-x5e8e3e.u-background-x5e8e3e.u-background-x5e8e3e.u-background-x5e8e3e { background: #5E8E3E; }
.u-background-xb45309.u-background-xb45309.u-background-xb45309.u-background-xb45309 { background: #b45309; }
.u-background-xec4899.u-background-xec4899.u-background-xec4899.u-background-xec4899 { background: #ec4899; }
.u-background-xeee.u-background-xeee.u-background-xeee.u-background-xeee { background: #eee; }
.u-background-xef4444.u-background-xef4444.u-background-xef4444.u-background-xef4444 { background: #ef4444; }
.u-background-xf59e0b.u-background-xf59e0b.u-background-xf59e0b.u-background-xf59e0b { background: #f59e0b; }
.u-border-1_5px-solid-negative.u-border-1_5px-solid-negative.u-border-1_5px-solid-negative.u-border-1_5px-solid-negative { border: 1.5px solid var(--rdr-negative); }
.u-border-1_5px-solid-warning.u-border-1_5px-solid-warning.u-border-1_5px-solid-warning.u-border-1_5px-solid-warning { border: 1.5px solid var(--rdr-warning); }
.u-border-1px-solid-border.u-border-1px-solid-border.u-border-1px-solid-border.u-border-1px-solid-border { border: 1px solid var(--rdr-border); }
.u-border-1px-solid-rgba161851290_3.u-border-1px-solid-rgba161851290_3.u-border-1px-solid-rgba161851290_3.u-border-1px-solid-rgba161851290_3 { border: 1px solid rgba(16,185,129,0.3); }
.u-border-1px-solid-rgba23968680_3.u-border-1px-solid-rgba23968680_3.u-border-1px-solid-rgba23968680_3.u-border-1px-solid-rgba23968680_3 { border: 1px solid rgba(239,68,68,0.3); }
.u-border-1px-solid-rgba991022410_25.u-border-1px-solid-rgba991022410_25.u-border-1px-solid-rgba991022410_25.u-border-1px-solid-rgba991022410_25 { border: 1px solid rgba(99,102,241,0.25); }
.u-border-2px-dashed-accent.u-border-2px-dashed-accent.u-border-2px-dashed-accent.u-border-2px-dashed-accent { border: 2px dashed var(--rdr-accent); }
.u-border-bottom-1_5px-solid-border.u-border-bottom-1_5px-solid-border.u-border-bottom-1_5px-solid-border.u-border-bottom-1_5px-solid-border { border-bottom: 1.5px solid var(--rdr-border); }
.u-border-bottom-1px-solid-border.u-border-bottom-1px-solid-border.u-border-bottom-1px-solid-border.u-border-bottom-1px-solid-border { border-bottom: 1px solid var(--rdr-border); }
.u-border-collapse-collapse.u-border-collapse-collapse.u-border-collapse-collapse.u-border-collapse-collapse { border-collapse: collapse; }
.u-border-color-border.u-border-color-border.u-border-color-border.u-border-color-border { border-color: var(--rdr-border); }
.u-border-color-borderxe5e7eb.u-border-color-borderxe5e7eb.u-border-color-borderxe5e7eb.u-border-color-borderxe5e7eb { border-color: var(--rdr-border,#e5e7eb); }
.u-border-color-negativexef4444.u-border-color-negativexef4444.u-border-color-negativexef4444.u-border-color-negativexef4444 { border-color: var(--rdr-negative,#ef4444); }
.u-border-color-rgba991022410_3.u-border-color-rgba991022410_3.u-border-color-rgba991022410_3.u-border-color-rgba991022410_3 { border-color: rgba(99,102,241,0.3); }
.u-border-color-x5e8e3e.u-border-color-x5e8e3e.u-border-color-x5e8e3e.u-border-color-x5e8e3e { border-color: #5E8E3E; }
.u-border-left-2px-solid-border.u-border-left-2px-solid-border.u-border-left-2px-solid-border.u-border-left-2px-solid-border { border-left: 2px solid var(--rdr-border); }
.u-border-left-3px-solid-accent.u-border-left-3px-solid-accent.u-border-left-3px-solid-accent.u-border-left-3px-solid-accent { border-left: 3px solid var(--rdr-accent); }
.u-border-left-4px-solid-warning-xd97706.u-border-left-4px-solid-warning-xd97706.u-border-left-4px-solid-warning-xd97706.u-border-left-4px-solid-warning-xd97706 { border-left: 4px solid var(--rdr-warning, #d97706); }
.u-border-none.u-border-none.u-border-none.u-border-none { border: none; }
.u-border-radius-10px.u-border-radius-10px.u-border-radius-10px.u-border-radius-10px { border-radius: 10px; }
.u-border-radius-12px.u-border-radius-12px.u-border-radius-12px.u-border-radius-12px { border-radius: 12px; }
.u-border-radius-14px.u-border-radius-14px.u-border-radius-14px.u-border-radius-14px { border-radius: 14px; }
.u-border-radius-16px.u-border-radius-16px.u-border-radius-16px.u-border-radius-16px { border-radius: 16px; }
.u-border-radius-2px.u-border-radius-2px.u-border-radius-2px.u-border-radius-2px { border-radius: 2px; }
.u-border-radius-4px.u-border-radius-4px.u-border-radius-4px.u-border-radius-4px { border-radius: 4px; }
.u-border-radius-50pct.u-border-radius-50pct.u-border-radius-50pct.u-border-radius-50pct { border-radius: 50%; }
.u-border-radius-5px.u-border-radius-5px.u-border-radius-5px.u-border-radius-5px { border-radius: 5px; }
.u-border-radius-6px.u-border-radius-6px.u-border-radius-6px.u-border-radius-6px { border-radius: 6px; }
.u-border-radius-8px.u-border-radius-8px.u-border-radius-8px.u-border-radius-8px { border-radius: 8px; }
.u-border-radius-9px.u-border-radius-9px.u-border-radius-9px.u-border-radius-9px { border-radius: 9px; }
.u-border-top-1px-solid-border.u-border-top-1px-solid-border.u-border-top-1px-solid-border.u-border-top-1px-solid-border { border-top: 1px solid var(--rdr-border); }
.u-border-top-none.u-border-top-none.u-border-top-none.u-border-top-none { border-top: none; }
.u-bottom-3px.u-bottom-3px.u-bottom-3px.u-bottom-3px { bottom: -3px; }
.u-bottom-6px.u-bottom-6px.u-bottom-6px.u-bottom-6px { bottom: 6px; }
.u-bottom-8px.u-bottom-8px.u-bottom-8px.u-bottom-8px { bottom: 8px; }
.u-box-shadow-0-0-8px-x10b981.u-box-shadow-0-0-8px-x10b981.u-box-shadow-0-0-8px-x10b981.u-box-shadow-0-0-8px-x10b981 { box-shadow: 0 0 8px #10b981; }
.u-box-shadow-0-2px-8px-rgba0000_15.u-box-shadow-0-2px-8px-rgba0000_15.u-box-shadow-0-2px-8px-rgba0000_15.u-box-shadow-0-2px-8px-rgba0000_15 { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.u-box-shadow-0-3px-10px-rgba991022410_35.u-box-shadow-0-3px-10px-rgba991022410_35.u-box-shadow-0-3px-10px-rgba991022410_35.u-box-shadow-0-3px-10px-rgba991022410_35 { box-shadow: 0 3px 10px rgba(99,102,241,0.35); }
.u-color-accent.u-color-accent.u-color-accent.u-color-accent { color: var(--rdr-accent); }
.u-color-ai.u-color-ai.u-color-ai.u-color-ai { color: var(--rdr-ai); }
.u-color-border.u-color-border.u-color-border.u-color-border { color: var(--rdr-border); }
.u-color-info.u-color-info.u-color-info.u-color-info { color: var(--rdr-info); }
.u-color-inherit.u-color-inherit.u-color-inherit.u-color-inherit { color: inherit; }
.u-color-negative.u-color-negative.u-color-negative.u-color-negative { color: var(--rdr-negative); }
.u-color-negativexef4444.u-color-negativexef4444.u-color-negativexef4444.u-color-negativexef4444 { color: var(--rdr-negative,#ef4444); }
.u-color-positive.u-color-positive.u-color-positive.u-color-positive { color: var(--rdr-positive); }
.u-color-rgba248113113_5.u-color-rgba248113113_5.u-color-rgba248113113_5.u-color-rgba248113113_5 { color: rgba(248,113,113,.5); }
.u-color-rgba248113113_7.u-color-rgba248113113_7.u-color-rgba248113113_7.u-color-rgba248113113_7 { color: rgba(248,113,113,.7); }
.u-color-rgba255255255_55.u-color-rgba255255255_55.u-color-rgba255255255_55.u-color-rgba255255255_55 { color: rgba(255,255,255,.55); }
.u-color-text.u-color-text.u-color-text.u-color-text { color: var(--rdr-text); }
.u-color-text-main.u-color-text-main.u-color-text-main.u-color-text-main { color: var(--rdr-text-main); }
.u-color-text-muted.u-color-text-muted.u-color-text-muted.u-color-text-muted { color: var(--rdr-text-muted); }
.u-color-text-secondary.u-color-text-secondary.u-color-text-secondary.u-color-text-secondary { color: var(--rdr-text-secondary); }
.u-color-warning.u-color-warning.u-color-warning.u-color-warning { color: var(--rdr-warning); }
.u-color-x000.u-color-x000.u-color-x000.u-color-x000 { color: #000; }
.u-color-x555.u-color-x555.u-color-x555.u-color-x555 { color: #555; }
.u-color-x5e8e3e.u-color-x5e8e3e.u-color-x5e8e3e.u-color-x5e8e3e { color: #5E8E3E; }
.u-color-x726c63.u-color-x726c63.u-color-x726c63.u-color-x726c63 { color: #726c63; }
.u-color-xa855f7.u-color-xa855f7.u-color-xa855f7.u-color-xa855f7 { color: #a855f7; }
.u-color-xb0bcce.u-color-xb0bcce.u-color-xb0bcce.u-color-xb0bcce { color: #b0bcce; }
.u-color-xcbd5e1.u-color-xcbd5e1.u-color-xcbd5e1.u-color-xcbd5e1 { color: #cbd5e1; }
.u-color-xd1d5db.u-color-xd1d5db.u-color-xd1d5db.u-color-xd1d5db { color: #d1d5db; }
.u-color-xeab308.u-color-xeab308.u-color-xeab308.u-color-xeab308 { color: #eab308; }
.u-color-xfff.u-color-xfff.u-color-xfff.u-color-xfff { color: #fff; }
.u-cursor-default.u-cursor-default.u-cursor-default.u-cursor-default { cursor: default; }
.u-cursor-pointer.u-cursor-pointer.u-cursor-pointer.u-cursor-pointer { cursor: pointer; }
.u-display-block.u-display-block.u-display-block.u-display-block { display: block; }
.u-display-flex.u-display-flex.u-display-flex.u-display-flex { display: flex; }
.u-display-grid.u-display-grid.u-display-grid.u-display-grid { display: grid; }
.u-display-inline-block.u-display-inline-block.u-display-inline-block.u-display-inline-block { display: inline-block; }
.u-display-webkit-box.u-display-webkit-box.u-display-webkit-box.u-display-webkit-box { display: -webkit-box; }
.u-flex-0-0-300px.u-flex-0-0-300px.u-flex-0-0-300px.u-flex-0-0-300px { flex: 0 0 300px; }
.u-flex-1.u-flex-1.u-flex-1.u-flex-1 { flex: 1; }
.u-flex-1-1-240px.u-flex-1-1-240px.u-flex-1-1-240px.u-flex-1-1-240px { flex: 1 1 240px; }
.u-flex-direction-column.u-flex-direction-column.u-flex-direction-column.u-flex-direction-column { flex-direction: column; }
.u-flex-shrink-0.u-flex-shrink-0.u-flex-shrink-0.u-flex-shrink-0 { flex-shrink: 0; }
.u-flex-wrap-wrap.u-flex-wrap-wrap.u-flex-wrap-wrap.u-flex-wrap-wrap { flex-wrap: wrap; }
.u-font-family-monospace.u-font-family-monospace.u-font-family-monospace.u-font-family-monospace { font-family: monospace; }
.u-font-family-sans-serif.u-font-family-sans-serif.u-font-family-sans-serif.u-font-family-sans-serif { font-family: sans-serif; }
.u-font-size-0_78rem.u-font-size-0_78rem.u-font-size-0_78rem.u-font-size-0_78rem { font-size: 0.78rem; }
.u-font-size-0_8rem.u-font-size-0_8rem.u-font-size-0_8rem.u-font-size-0_8rem { font-size: 0.8rem; }
.u-font-size-10_5px.u-font-size-10_5px.u-font-size-10_5px.u-font-size-10_5px { font-size: 10.5px; }
.u-font-size-10px.u-font-size-10px.u-font-size-10px.u-font-size-10px { font-size: 10px; }
.u-font-size-11_5px.u-font-size-11_5px.u-font-size-11_5px.u-font-size-11_5px { font-size: 11.5px; }
.u-font-size-11px.u-font-size-11px.u-font-size-11px.u-font-size-11px { font-size: 11px; }
.u-font-size-12_5px.u-font-size-12_5px.u-font-size-12_5px.u-font-size-12_5px { font-size: 12.5px; }
.u-font-size-12px.u-font-size-12px.u-font-size-12px.u-font-size-12px { font-size: 12px; }
.u-font-size-13_5px.u-font-size-13_5px.u-font-size-13_5px.u-font-size-13_5px { font-size: 13.5px; }
.u-font-size-13px.u-font-size-13px.u-font-size-13px.u-font-size-13px { font-size: 13px; }
.u-font-size-14px.u-font-size-14px.u-font-size-14px.u-font-size-14px { font-size: 14px; }
.u-font-size-15px.u-font-size-15px.u-font-size-15px.u-font-size-15px { font-size: 15px; }
.u-font-size-16px.u-font-size-16px.u-font-size-16px.u-font-size-16px { font-size: 16px; }
.u-font-size-17px.u-font-size-17px.u-font-size-17px.u-font-size-17px { font-size: 17px; }
.u-font-size-1_15rem.u-font-size-1_15rem.u-font-size-1_15rem.u-font-size-1_15rem { font-size: 1.15rem; }
.u-font-size-1_1rem.u-font-size-1_1rem.u-font-size-1_1rem.u-font-size-1_1rem { font-size: 1.1rem; }
.u-font-size-1_5rem.u-font-size-1_5rem.u-font-size-1_5rem.u-font-size-1_5rem { font-size: 1.5rem; }
.u-font-size-1_6rem.u-font-size-1_6rem.u-font-size-1_6rem.u-font-size-1_6rem { font-size: 1.6rem; }
.u-font-size-1_75rem.u-font-size-1_75rem.u-font-size-1_75rem.u-font-size-1_75rem { font-size: 1.75rem; }
.u-font-size-20px.u-font-size-20px.u-font-size-20px.u-font-size-20px { font-size: 20px; }
.u-font-size-24px.u-font-size-24px.u-font-size-24px.u-font-size-24px { font-size: 24px; }
.u-font-size-28px.u-font-size-28px.u-font-size-28px.u-font-size-28px { font-size: 28px; }
.u-font-size-2_4rem.u-font-size-2_4rem.u-font-size-2_4rem.u-font-size-2_4rem { font-size: 2.4rem; }
.u-font-size-32px.u-font-size-32px.u-font-size-32px.u-font-size-32px { font-size: 32px; }
.u-font-size-6px.u-font-size-6px.u-font-size-6px.u-font-size-6px { font-size: 6px; }
.u-font-size-7px.u-font-size-7px.u-font-size-7px.u-font-size-7px { font-size: 7px; }
.u-font-size-8px.u-font-size-8px.u-font-size-8px.u-font-size-8px { font-size: 8px; }
.u-font-size-9_5px.u-font-size-9_5px.u-font-size-9_5px.u-font-size-9_5px { font-size: 9.5px; }
.u-font-size-9px.u-font-size-9px.u-font-size-9px.u-font-size-9px { font-size: 9px; }
.u-font-size-_72rem.u-font-size-_72rem.u-font-size-_72rem.u-font-size-_72rem { font-size: .72rem; }
.u-font-size-_75rem.u-font-size-_75rem.u-font-size-_75rem.u-font-size-_75rem { font-size: .75rem; }
.u-font-size-_78rem.u-font-size-_78rem.u-font-size-_78rem.u-font-size-_78rem { font-size: .78rem; }
.u-font-size-_7rem.u-font-size-_7rem.u-font-size-_7rem.u-font-size-_7rem { font-size: .7rem; }
.u-font-size-_82rem.u-font-size-_82rem.u-font-size-_82rem.u-font-size-_82rem { font-size: .82rem; }
.u-font-size-_85rem.u-font-size-_85rem.u-font-size-_85rem.u-font-size-_85rem { font-size: .85rem; }
.u-font-size-_875rem.u-font-size-_875rem.u-font-size-_875rem.u-font-size-_875rem { font-size: .875rem; }
.u-font-size-_8rem.u-font-size-_8rem.u-font-size-_8rem.u-font-size-_8rem { font-size: .8rem; }
.u-font-size-_95rem.u-font-size-_95rem.u-font-size-_95rem.u-font-size-_95rem { font-size: .95rem; }
.u-font-size-_9rem.u-font-size-_9rem.u-font-size-_9rem.u-font-size-_9rem { font-size: .9rem; }
.u-font-size-fs-small.u-font-size-fs-small.u-font-size-fs-small.u-font-size-fs-small { font-size: var(--fs-small); }
.u-font-style-italic.u-font-style-italic.u-font-style-italic.u-font-style-italic { font-style: italic; }
.u-font-weight-400.u-font-weight-400.u-font-weight-400.u-font-weight-400 { font-weight: 400; }
.u-font-weight-600.u-font-weight-600.u-font-weight-600.u-font-weight-600 { font-weight: 600; }
.u-font-weight-700.u-font-weight-700.u-font-weight-700.u-font-weight-700 { font-weight: 700; }
.u-font-weight-800.u-font-weight-800.u-font-weight-800.u-font-weight-800 { font-weight: 800; }
.u-font-weight-bold.u-font-weight-bold.u-font-weight-bold.u-font-weight-bold { font-weight: bold; }
.u-gap-10px.u-gap-10px.u-gap-10px.u-gap-10px { gap: 10px; }
.u-gap-12px.u-gap-12px.u-gap-12px.u-gap-12px { gap: 12px; }
.u-gap-14px.u-gap-14px.u-gap-14px.u-gap-14px { gap: 14px; }
.u-gap-16px.u-gap-16px.u-gap-16px.u-gap-16px { gap: 16px; }
.u-gap-4px.u-gap-4px.u-gap-4px.u-gap-4px { gap: 4px; }
.u-gap-6px.u-gap-6px.u-gap-6px.u-gap-6px { gap: 6px; }
.u-gap-8px.u-gap-8px.u-gap-8px.u-gap-8px { gap: 8px; }
.u-gap-_5rem.u-gap-_5rem.u-gap-_5rem.u-gap-_5rem { gap: .5rem; }
.u-gap-space-3.u-gap-space-3.u-gap-space-3.u-gap-space-3 { gap: var(--space-3); }
.u-grid-column-1-1.u-grid-column-1-1.u-grid-column-1-1.u-grid-column-1-1 { grid-column: 1/-1; }
.u-grid-template-columns-repeat3-1fr.u-grid-template-columns-repeat3-1fr.u-grid-template-columns-repeat3-1fr.u-grid-template-columns-repeat3-1fr { grid-template-columns: repeat(3, 1fr); }
.u-grid-template-columns-repeatauto-fillm-09f249.u-grid-template-columns-repeatauto-fillm-09f249.u-grid-template-columns-repeatauto-fillm-09f249.u-grid-template-columns-repeatauto-fillm-09f249 { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
.u-grid-template-columns-repeatauto-fillm-17fa25.u-grid-template-columns-repeatauto-fillm-17fa25.u-grid-template-columns-repeatauto-fillm-17fa25.u-grid-template-columns-repeatauto-fillm-17fa25 { grid-template-columns: repeat(auto-fill,minmax(360px,1fr)); }
.u-grid-template-columns-repeatauto-fillm-aceff6.u-grid-template-columns-repeatauto-fillm-aceff6.u-grid-template-columns-repeatauto-fillm-aceff6.u-grid-template-columns-repeatauto-fillm-aceff6 { grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); }
.u-grid-template-columns-repeatauto-fillm-f821a3.u-grid-template-columns-repeatauto-fillm-f821a3.u-grid-template-columns-repeatauto-fillm-f821a3.u-grid-template-columns-repeatauto-fillm-f821a3 { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); }
.u-grid-template-columns-repeatauto-fit-m-461abd.u-grid-template-columns-repeatauto-fit-m-461abd.u-grid-template-columns-repeatauto-fit-m-461abd.u-grid-template-columns-repeatauto-fit-m-461abd { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.u-height-100pct.u-height-100pct.u-height-100pct.u-height-100pct { height: 100%; }
.u-height-10px.u-height-10px.u-height-10px.u-height-10px { height: 10px; }
.u-height-110px.u-height-110px.u-height-110px.u-height-110px { height: 110px; }
.u-height-120px.u-height-120px.u-height-120px.u-height-120px { height: 120px; }
.u-height-12px.u-height-12px.u-height-12px.u-height-12px { height: 12px; }
.u-height-140px.u-height-140px.u-height-140px.u-height-140px { height: 140px; }
.u-height-14px.u-height-14px.u-height-14px.u-height-14px { height: 14px; }
.u-height-160px.u-height-160px.u-height-160px.u-height-160px { height: 160px; }
.u-height-180px.u-height-180px.u-height-180px.u-height-180px { height: 180px; }
.u-height-200px.u-height-200px.u-height-200px.u-height-200px { height: 200px; }
.u-height-20px.u-height-20px.u-height-20px.u-height-20px { height: 20px; }
.u-height-220px.u-height-220px.u-height-220px.u-height-220px { height: 220px; }
.u-height-250px.u-height-250px.u-height-250px.u-height-250px { height: 250px; }
.u-height-280px.u-height-280px.u-height-280px.u-height-280px { height: 280px; }
.u-height-28px.u-height-28px.u-height-28px.u-height-28px { height: 28px; }
.u-height-32px.u-height-32px.u-height-32px.u-height-32px { height: 32px; }
.u-height-360px.u-height-360px.u-height-360px.u-height-360px { height: 360px; }
.u-height-36px.u-height-36px.u-height-36px.u-height-36px { height: 36px; }
.u-height-40px.u-height-40px.u-height-40px.u-height-40px { height: 40px; }
.u-height-420px.u-height-420px.u-height-420px.u-height-420px { height: 420px; }
.u-height-44px.u-height-44px.u-height-44px.u-height-44px { height: 44px; }
.u-height-48px.u-height-48px.u-height-48px.u-height-48px { height: 48px; }
.u-height-56px.u-height-56px.u-height-56px.u-height-56px { height: 56px; }
.u-height-64px.u-height-64px.u-height-64px.u-height-64px { height: 64px; }
.u-height-8px.u-height-8px.u-height-8px.u-height-8px { height: 8px; }
.u-justify-content-center.u-justify-content-center.u-justify-content-center.u-justify-content-center { justify-content: center; }
.u-justify-content-space-between.u-justify-content-space-between.u-justify-content-space-between.u-justify-content-space-between { justify-content: space-between; }
.u-left-10px.u-left-10px.u-left-10px.u-left-10px { left: 10px; }
.u-left-8px.u-left-8px.u-left-8px.u-left-8px { left: 8px; }
.u-letter-spacing-0.u-letter-spacing-0.u-letter-spacing-0.u-letter-spacing-0 { letter-spacing: 0; }
.u-letter-spacing-0_02em.u-letter-spacing-0_02em.u-letter-spacing-0_02em.u-letter-spacing-0_02em { letter-spacing: -0.02em; }
.u-letter-spacing-0_03em.u-letter-spacing-0_03em.u-letter-spacing-0_03em.u-letter-spacing-0_03em { letter-spacing: -0.03em; }
.u-letter-spacing-0_4px.u-letter-spacing-0_4px.u-letter-spacing-0_4px.u-letter-spacing-0_4px { letter-spacing: 0.4px; }
.u-letter-spacing-_05em.u-letter-spacing-_05em.u-letter-spacing-_05em.u-letter-spacing-_05em { letter-spacing: .05em; }
.u-letter-spacing-_06em.u-letter-spacing-_06em.u-letter-spacing-_06em.u-letter-spacing-_06em { letter-spacing: .06em; }
.u-letter-spacing-_08em.u-letter-spacing-_08em.u-letter-spacing-_08em.u-letter-spacing-_08em { letter-spacing: .08em; }
.u-line-height-1_3.u-line-height-1_3.u-line-height-1_3.u-line-height-1_3 { line-height: 1.3; }
.u-line-height-1_35.u-line-height-1_35.u-line-height-1_35.u-line-height-1_35 { line-height: 1.35; }
.u-line-height-1_4.u-line-height-1_4.u-line-height-1_4.u-line-height-1_4 { line-height: 1.4; }
.u-line-height-1_5.u-line-height-1_5.u-line-height-1_5.u-line-height-1_5 { line-height: 1.5; }
.u-line-height-1_6.u-line-height-1_6.u-line-height-1_6.u-line-height-1_6 { line-height: 1.6; }
.u-line-height-1_7.u-line-height-1_7.u-line-height-1_7.u-line-height-1_7 { line-height: 1.7; }
.u-list-style-disc.u-list-style-disc.u-list-style-disc.u-list-style-disc { list-style: disc; }
.u-list-style-none.u-list-style-none.u-list-style-none.u-list-style-none { list-style: none; }
.u-margin-0.u-margin-0.u-margin-0.u-margin-0 { margin: 0; }
.u-margin-0-0-12px.u-margin-0-0-12px.u-margin-0-0-12px.u-margin-0-0-12px { margin: 0 0 12px; }
.u-margin-0-0-8px.u-margin-0-0-8px.u-margin-0-0-8px.u-margin-0-0-8px { margin: 0 0 8px; }
.u-margin-0-auto.u-margin-0-auto.u-margin-0-auto.u-margin-0-auto { margin: 0 auto; }
.u-margin-0-auto-1rem.u-margin-0-auto-1rem.u-margin-0-auto-1rem.u-margin-0-auto-1rem { margin: 0 auto 1rem; }
.u-margin-0-auto-28px.u-margin-0-auto-28px.u-margin-0-auto-28px.u-margin-0-auto-28px { margin: 0 auto 28px; }
.u-margin-10px-0.u-margin-10px-0.u-margin-10px-0.u-margin-10px-0 { margin: 10px 0; }
.u-margin-1rem-0.u-margin-1rem-0.u-margin-1rem-0.u-margin-1rem-0 { margin: 1rem 0; }
.u-margin-2px.u-margin-2px.u-margin-2px.u-margin-2px { margin: 2px; }
.u-margin-_35rem-0.u-margin-_35rem-0.u-margin-_35rem-0.u-margin-_35rem-0 { margin: .35rem 0; }
.u-margin-_4rem-0-0.u-margin-_4rem-0-0.u-margin-_4rem-0-0.u-margin-_4rem-0-0 { margin: .4rem 0 0; }
.u-margin-bottom-0.u-margin-bottom-0.u-margin-bottom-0.u-margin-bottom-0 { margin-bottom: 0; }
.u-margin-bottom-10px.u-margin-bottom-10px.u-margin-bottom-10px.u-margin-bottom-10px { margin-bottom: 10px; }
.u-margin-bottom-12px.u-margin-bottom-12px.u-margin-bottom-12px.u-margin-bottom-12px { margin-bottom: 12px; }
.u-margin-bottom-14px.u-margin-bottom-14px.u-margin-bottom-14px.u-margin-bottom-14px { margin-bottom: 14px; }
.u-margin-bottom-15px.u-margin-bottom-15px.u-margin-bottom-15px.u-margin-bottom-15px { margin-bottom: 15px; }
.u-margin-bottom-16px.u-margin-bottom-16px.u-margin-bottom-16px.u-margin-bottom-16px { margin-bottom: 16px; }
.u-margin-bottom-1_25rem.u-margin-bottom-1_25rem.u-margin-bottom-1_25rem.u-margin-bottom-1_25rem { margin-bottom: 1.25rem; }
.u-margin-bottom-1_5rem.u-margin-bottom-1_5rem.u-margin-bottom-1_5rem.u-margin-bottom-1_5rem { margin-bottom: 1.5rem; }
.u-margin-bottom-1rem.u-margin-bottom-1rem.u-margin-bottom-1rem.u-margin-bottom-1rem { margin-bottom: 1rem; }
.u-margin-bottom-20px.u-margin-bottom-20px.u-margin-bottom-20px.u-margin-bottom-20px { margin-bottom: 20px; }
.u-margin-bottom-24px.u-margin-bottom-24px.u-margin-bottom-24px.u-margin-bottom-24px { margin-bottom: 24px; }
.u-margin-bottom-28px.u-margin-bottom-28px.u-margin-bottom-28px.u-margin-bottom-28px { margin-bottom: 28px; }
.u-margin-bottom-2px.u-margin-bottom-2px.u-margin-bottom-2px.u-margin-bottom-2px { margin-bottom: 2px; }
.u-margin-bottom-3px.u-margin-bottom-3px.u-margin-bottom-3px.u-margin-bottom-3px { margin-bottom: 3px; }
.u-margin-bottom-4px.u-margin-bottom-4px.u-margin-bottom-4px.u-margin-bottom-4px { margin-bottom: 4px; }
.u-margin-bottom-5px.u-margin-bottom-5px.u-margin-bottom-5px.u-margin-bottom-5px { margin-bottom: 5px; }
.u-margin-bottom-6px.u-margin-bottom-6px.u-margin-bottom-6px.u-margin-bottom-6px { margin-bottom: 6px; }
.u-margin-bottom-8px.u-margin-bottom-8px.u-margin-bottom-8px.u-margin-bottom-8px { margin-bottom: 8px; }
.u-margin-bottom-_25rem.u-margin-bottom-_25rem.u-margin-bottom-_25rem.u-margin-bottom-_25rem { margin-bottom: .25rem; }
.u-margin-bottom-_5rem.u-margin-bottom-_5rem.u-margin-bottom-_5rem.u-margin-bottom-_5rem { margin-bottom: .5rem; }
.u-margin-bottom-_75rem.u-margin-bottom-_75rem.u-margin-bottom-_75rem.u-margin-bottom-_75rem { margin-bottom: .75rem; }
.u-margin-bottom-space-4.u-margin-bottom-space-4.u-margin-bottom-space-4.u-margin-bottom-space-4 { margin-bottom: var(--space-4); }
.u-margin-bottom-space-5.u-margin-bottom-space-5.u-margin-bottom-space-5.u-margin-bottom-space-5 { margin-bottom: var(--space-5); }
.u-margin-left-4px.u-margin-left-4px.u-margin-left-4px.u-margin-left-4px { margin-left: 4px; }
.u-margin-left-6px.u-margin-left-6px.u-margin-left-6px.u-margin-left-6px { margin-left: 6px; }
.u-margin-left-auto.u-margin-left-auto.u-margin-left-auto.u-margin-left-auto { margin-left: auto; }
.u-margin-right-3px.u-margin-right-3px.u-margin-right-3px.u-margin-right-3px { margin-right: 3px; }
.u-margin-right-4px.u-margin-right-4px.u-margin-right-4px.u-margin-right-4px { margin-right: 4px; }
.u-margin-top-0.u-margin-top-0.u-margin-top-0.u-margin-top-0 { margin-top: 0; }
.u-margin-top-10px.u-margin-top-10px.u-margin-top-10px.u-margin-top-10px { margin-top: 10px; }
.u-margin-top-12px.u-margin-top-12px.u-margin-top-12px.u-margin-top-12px { margin-top: 12px; }
.u-margin-top-14px.u-margin-top-14px.u-margin-top-14px.u-margin-top-14px { margin-top: 14px; }
.u-margin-top-16px.u-margin-top-16px.u-margin-top-16px.u-margin-top-16px { margin-top: 16px; }
.u-margin-top-1px.u-margin-top-1px.u-margin-top-1px.u-margin-top-1px { margin-top: 1px; }
.u-margin-top-1rem.u-margin-top-1rem.u-margin-top-1rem.u-margin-top-1rem { margin-top: 1rem; }
.u-margin-top-20px.u-margin-top-20px.u-margin-top-20px.u-margin-top-20px { margin-top: 20px; }
.u-margin-top-2px.u-margin-top-2px.u-margin-top-2px.u-margin-top-2px { margin-top: 2px; }
.u-margin-top-4px.u-margin-top-4px.u-margin-top-4px.u-margin-top-4px { margin-top: 4px; }
.u-margin-top-6px.u-margin-top-6px.u-margin-top-6px.u-margin-top-6px { margin-top: 6px; }
.u-margin-top-8px.u-margin-top-8px.u-margin-top-8px.u-margin-top-8px { margin-top: 8px; }
.u-margin-top-_25rem.u-margin-top-_25rem.u-margin-top-_25rem.u-margin-top-_25rem { margin-top: .25rem; }
.u-margin-top-_3rem.u-margin-top-_3rem.u-margin-top-_3rem.u-margin-top-_3rem { margin-top: .3rem; }
.u-margin-top-_6rem.u-margin-top-_6rem.u-margin-top-_6rem.u-margin-top-_6rem { margin-top: .6rem; }
.u-margin-top-_75rem.u-margin-top-_75rem.u-margin-top-_75rem.u-margin-top-_75rem { margin-top: .75rem; }
.u-margin-top-space-2.u-margin-top-space-2.u-margin-top-space-2.u-margin-top-space-2 { margin-top: var(--space-2); }
.u-margin-top-space-3.u-margin-top-space-3.u-margin-top-space-3.u-margin-top-space-3 { margin-top: var(--space-3); }
.u-max-height-100px.u-max-height-100px.u-max-height-100px.u-max-height-100px { max-height: 100px; }
.u-max-height-110px.u-max-height-110px.u-max-height-110px.u-max-height-110px { max-height: 110px; }
.u-max-height-140px.u-max-height-140px.u-max-height-140px.u-max-height-140px { max-height: 140px; }
.u-max-height-280px.u-max-height-280px.u-max-height-280px.u-max-height-280px { max-height: 280px; }
.u-max-height-320px.u-max-height-320px.u-max-height-320px.u-max-height-320px { max-height: 320px; }
.u-max-height-460px.u-max-height-460px.u-max-height-460px.u-max-height-460px { max-height: 460px; }
.u-max-height-520px.u-max-height-520px.u-max-height-520px.u-max-height-520px { max-height: 520px; }
.u-max-height-560px.u-max-height-560px.u-max-height-560px.u-max-height-560px { max-height: 560px; }
.u-max-height-60px.u-max-height-60px.u-max-height-60px.u-max-height-60px { max-height: 60px; }
.u-max-height-80px.u-max-height-80px.u-max-height-80px.u-max-height-80px { max-height: 80px; }
.u-max-height-80vh.u-max-height-80vh.u-max-height-80vh.u-max-height-80vh { max-height: 80vh; }
.u-max-height-82vh.u-max-height-82vh.u-max-height-82vh.u-max-height-82vh { max-height: 82vh; }
.u-max-height-85vh.u-max-height-85vh.u-max-height-85vh.u-max-height-85vh { max-height: 85vh; }
.u-max-height-88vh.u-max-height-88vh.u-max-height-88vh.u-max-height-88vh { max-height: 88vh; }
.u-max-height-92vh.u-max-height-92vh.u-max-height-92vh.u-max-height-92vh { max-height: 92vh; }
.u-max-width-1160px.u-max-width-1160px.u-max-width-1160px.u-max-width-1160px { max-width: 1160px; }
.u-max-width-130px.u-max-width-130px.u-max-width-130px.u-max-width-130px { max-width: 130px; }
.u-max-width-180px.u-max-width-180px.u-max-width-180px.u-max-width-180px { max-width: 180px; }
.u-max-width-200px.u-max-width-200px.u-max-width-200px.u-max-width-200px { max-width: 200px; }
.u-max-width-210px.u-max-width-210px.u-max-width-210px.u-max-width-210px { max-width: 210px; }
.u-max-width-220px.u-max-width-220px.u-max-width-220px.u-max-width-220px { max-width: 220px; }
.u-max-width-240px.u-max-width-240px.u-max-width-240px.u-max-width-240px { max-width: 240px; }
.u-max-width-260px.u-max-width-260px.u-max-width-260px.u-max-width-260px { max-width: 260px; }
.u-max-width-280px.u-max-width-280px.u-max-width-280px.u-max-width-280px { max-width: 280px; }
.u-max-width-320px.u-max-width-320px.u-max-width-320px.u-max-width-320px { max-width: 320px; }
.u-max-width-360px.u-max-width-360px.u-max-width-360px.u-max-width-360px { max-width: 360px; }
.u-max-width-420px.u-max-width-420px.u-max-width-420px.u-max-width-420px { max-width: 420px; }
.u-max-width-440px.u-max-width-440px.u-max-width-440px.u-max-width-440px { max-width: 440px; }
.u-max-width-460px.u-max-width-460px.u-max-width-460px.u-max-width-460px { max-width: 460px; }
.u-max-width-480px.u-max-width-480px.u-max-width-480px.u-max-width-480px { max-width: 480px; }
.u-max-width-560px.u-max-width-560px.u-max-width-560px.u-max-width-560px { max-width: 560px; }
.u-max-width-580px.u-max-width-580px.u-max-width-580px.u-max-width-580px { max-width: 580px; }
.u-max-width-620px.u-max-width-620px.u-max-width-620px.u-max-width-620px { max-width: 620px; }
.u-max-width-640px.u-max-width-640px.u-max-width-640px.u-max-width-640px { max-width: 640px; }
.u-max-width-700px.u-max-width-700px.u-max-width-700px.u-max-width-700px { max-width: 700px; }
.u-max-width-720px.u-max-width-720px.u-max-width-720px.u-max-width-720px { max-width: 720px; }
.u-max-width-760px.u-max-width-760px.u-max-width-760px.u-max-width-760px { max-width: 760px; }
.u-max-width-820px.u-max-width-820px.u-max-width-820px.u-max-width-820px { max-width: 820px; }
.u-max-width-860px.u-max-width-860px.u-max-width-860px.u-max-width-860px { max-width: 860px; }
.u-max-width-900px.u-max-width-900px.u-max-width-900px.u-max-width-900px { max-width: 900px; }
.u-min-height-280px.u-min-height-280px.u-min-height-280px.u-min-height-280px { min-height: 280px; }
.u-min-height-300px.u-min-height-300px.u-min-height-300px.u-min-height-300px { min-height: 300px; }
.u-min-height-320px.u-min-height-320px.u-min-height-320px.u-min-height-320px { min-height: 320px; }
.u-min-height-36px.u-min-height-36px.u-min-height-36px.u-min-height-36px { min-height: 36px; }
.u-min-width-0.u-min-width-0.u-min-width-0.u-min-width-0 { min-width: 0; }
.u-min-width-100px.u-min-width-100px.u-min-width-100px.u-min-width-100px { min-width: 100px; }
.u-min-width-110px.u-min-width-110px.u-min-width-110px.u-min-width-110px { min-width: 110px; }
.u-min-width-140px.u-min-width-140px.u-min-width-140px.u-min-width-140px { min-width: 140px; }
.u-min-width-150px.u-min-width-150px.u-min-width-150px.u-min-width-150px { min-width: 150px; }
.u-min-width-200px.u-min-width-200px.u-min-width-200px.u-min-width-200px { min-width: 200px; }
.u-min-width-220px.u-min-width-220px.u-min-width-220px.u-min-width-220px { min-width: 220px; }
.u-min-width-240px.u-min-width-240px.u-min-width-240px.u-min-width-240px { min-width: 240px; }
.u-min-width-260px.u-min-width-260px.u-min-width-260px.u-min-width-260px { min-width: 260px; }
.u-min-width-440px.u-min-width-440px.u-min-width-440px.u-min-width-440px { min-width: 440px; }
.u-min-width-460px.u-min-width-460px.u-min-width-460px.u-min-width-460px { min-width: 460px; }
.u-min-width-480px.u-min-width-480px.u-min-width-480px.u-min-width-480px { min-width: 480px; }
.u-min-width-520px.u-min-width-520px.u-min-width-520px.u-min-width-520px { min-width: 520px; }
.u-min-width-600px.u-min-width-600px.u-min-width-600px.u-min-width-600px { min-width: 600px; }
.u-min-width-80px.u-min-width-80px.u-min-width-80px.u-min-width-80px { min-width: 80px; }
.u-min-width-980px.u-min-width-980px.u-min-width-980px.u-min-width-980px { min-width: 980px; }
.u-object-fit-contain.u-object-fit-contain.u-object-fit-contain.u-object-fit-contain { object-fit: contain; }
.u-object-fit-cover.u-object-fit-cover.u-object-fit-cover.u-object-fit-cover { object-fit: cover; }
.u-opacity-0_55.u-opacity-0_55.u-opacity-0_55.u-opacity-0_55 { opacity: 0.55; }
.u-opacity-0_6.u-opacity-0_6.u-opacity-0_6.u-opacity-0_6 { opacity: 0.6; }
.u-opacity-0_85.u-opacity-0_85.u-opacity-0_85.u-opacity-0_85 { opacity: 0.85; }
.u-opacity-_5.u-opacity-_5.u-opacity-_5.u-opacity-_5 { opacity: .5; }
.u-overflow-auto.u-overflow-auto.u-overflow-auto.u-overflow-auto { overflow: auto; }
.u-overflow-hidden.u-overflow-hidden.u-overflow-hidden.u-overflow-hidden { overflow: hidden; }
.u-overflow-x-auto.u-overflow-x-auto.u-overflow-x-auto.u-overflow-x-auto { overflow-x: auto; }
.u-overflow-y-auto.u-overflow-y-auto.u-overflow-y-auto.u-overflow-y-auto { overflow-y: auto; }
.u-padding-0.u-padding-0.u-padding-0.u-padding-0 { padding: 0; }
.u-padding-0-12px-10px.u-padding-0-12px-10px.u-padding-0-12px-10px.u-padding-0-12px-10px { padding: 0 12px 10px; }
.u-padding-0-16px-12px.u-padding-0-16px-12px.u-padding-0-16px-12px.u-padding-0-16px-12px { padding: 0 16px 12px; }
.u-padding-0-16px-8px.u-padding-0-16px-8px.u-padding-0-16px-8px.u-padding-0-16px-8px { padding: 0 16px 8px; }
.u-padding-0-1rem-1rem.u-padding-0-1rem-1rem.u-padding-0-1rem-1rem.u-padding-0-1rem-1rem { padding: 0 1rem 1rem; }
.u-padding-0-3px.u-padding-0-3px.u-padding-0-3px.u-padding-0-3px { padding: 0 3px; }
.u-padding-0-4px.u-padding-0-4px.u-padding-0-4px.u-padding-0-4px { padding: 0 4px; }
.u-padding-10px.u-padding-10px.u-padding-10px.u-padding-10px { padding: 10px; }
.u-padding-10px-12px.u-padding-10px-12px.u-padding-10px-12px.u-padding-10px-12px { padding: 10px 12px; }
.u-padding-10px-16px.u-padding-10px-16px.u-padding-10px-16px.u-padding-10px-16px { padding: 10px 16px; }
.u-padding-12px-0.u-padding-12px-0.u-padding-12px-0.u-padding-12px-0 { padding: 12px 0; }
.u-padding-12px-16px.u-padding-12px-16px.u-padding-12px-16px.u-padding-12px-16px { padding: 12px 16px; }
.u-padding-12px-22px.u-padding-12px-22px.u-padding-12px-22px.u-padding-12px-22px { padding: 12px 22px; }
.u-padding-12px-26px.u-padding-12px-26px.u-padding-12px-26px.u-padding-12px-26px { padding: 12px 26px; }
.u-padding-12px-28px.u-padding-12px-28px.u-padding-12px-28px.u-padding-12px-28px { padding: 12px 28px; }
.u-padding-14px-0-4px.u-padding-14px-0-4px.u-padding-14px-0-4px.u-padding-14px-0-4px { padding: 14px 0 4px; }
.u-padding-14px-16px.u-padding-14px-16px.u-padding-14px-16px.u-padding-14px-16px { padding: 14px 16px; }
.u-padding-14px-16px-0.u-padding-14px-16px-0.u-padding-14px-16px-0.u-padding-14px-16px-0 { padding: 14px 16px 0; }
.u-padding-14px-20px.u-padding-14px-20px.u-padding-14px-20px.u-padding-14px-20px { padding: 14px 20px; }
.u-padding-16px.u-padding-16px.u-padding-16px.u-padding-16px { padding: 16px; }
.u-padding-16px-0-0.u-padding-16px-0-0.u-padding-16px-0-0.u-padding-16px-0-0 { padding: 16px 0 0; }
.u-padding-16px-20px.u-padding-16px-20px.u-padding-16px-20px.u-padding-16px-20px { padding: 16px 20px; }
.u-padding-1px-5px.u-padding-1px-5px.u-padding-1px-5px.u-padding-1px-5px { padding: 1px 5px; }
.u-padding-1rem.u-padding-1rem.u-padding-1rem.u-padding-1rem { padding: 1rem; }
.u-padding-20px.u-padding-20px.u-padding-20px.u-padding-20px { padding: 20px; }
.u-padding-24px.u-padding-24px.u-padding-24px.u-padding-24px { padding: 24px; }
.u-padding-24px-16px.u-padding-24px-16px.u-padding-24px-16px.u-padding-24px-16px { padding: 24px 16px; }
.u-padding-24px-16px-32px.u-padding-24px-16px-32px.u-padding-24px-16px-32px.u-padding-24px-16px-32px { padding: 24px 16px 32px; }
.u-padding-2px.u-padding-2px.u-padding-2px.u-padding-2px { padding: 2px; }
.u-padding-2px-5px.u-padding-2px-5px.u-padding-2px-5px.u-padding-2px-5px { padding: 2px 5px; }
.u-padding-2px-6px.u-padding-2px-6px.u-padding-2px-6px.u-padding-2px-6px { padding: 2px 6px; }
.u-padding-2px-7px.u-padding-2px-7px.u-padding-2px-7px.u-padding-2px-7px { padding: 2px 7px; }
.u-padding-2px-8px.u-padding-2px-8px.u-padding-2px-8px.u-padding-2px-8px { padding: 2px 8px; }
.u-padding-2rem.u-padding-2rem.u-padding-2rem.u-padding-2rem { padding: 2rem; }
.u-padding-2rem-0.u-padding-2rem-0.u-padding-2rem-0.u-padding-2rem-0 { padding: 2rem 0; }
.u-padding-32px-16px-64px.u-padding-32px-16px-64px.u-padding-32px-16px-64px.u-padding-32px-16px-64px { padding: 32px 16px 64px; }
.u-padding-3px-8px.u-padding-3px-8px.u-padding-3px-8px.u-padding-3px-8px { padding: 3px 8px; }
.u-padding-40px.u-padding-40px.u-padding-40px.u-padding-40px { padding: 40px; }
.u-padding-40px-20px.u-padding-40px-20px.u-padding-40px-20px.u-padding-40px-20px { padding: 40px 20px; }
.u-padding-4px-8px.u-padding-4px-8px.u-padding-4px-8px.u-padding-4px-8px { padding: 4px 8px; }
.u-padding-5px-10px.u-padding-5px-10px.u-padding-5px-10px.u-padding-5px-10px { padding: 5px 10px; }
.u-padding-5px-12px.u-padding-5px-12px.u-padding-5px-12px.u-padding-5px-12px { padding: 5px 12px; }
.u-padding-60px-20px.u-padding-60px-20px.u-padding-60px-20px.u-padding-60px-20px { padding: 60px 20px; }
.u-padding-6px.u-padding-6px.u-padding-6px.u-padding-6px { padding: 6px; }
.u-padding-6px-10px.u-padding-6px-10px.u-padding-6px-10px.u-padding-6px-10px { padding: 6px 10px; }
.u-padding-6px-12px.u-padding-6px-12px.u-padding-6px-12px.u-padding-6px-12px { padding: 6px 12px; }
.u-padding-6px-16px.u-padding-6px-16px.u-padding-6px-16px.u-padding-6px-16px { padding: 6px 16px; }
.u-padding-6px-9px.u-padding-6px-9px.u-padding-6px-9px.u-padding-6px-9px { padding: 6px 9px; }
.u-padding-8px.u-padding-8px.u-padding-8px.u-padding-8px { padding: 8px; }
.u-padding-8px-10px.u-padding-8px-10px.u-padding-8px-10px.u-padding-8px-10px { padding: 8px 10px; }
.u-padding-8px-12px.u-padding-8px-12px.u-padding-8px-12px.u-padding-8px-12px { padding: 8px 12px; }
.u-padding-9px-22px.u-padding-9px-22px.u-padding-9px-22px.u-padding-9px-22px { padding: 9px 22px; }
.u-padding-_5rem-1rem-0.u-padding-_5rem-1rem-0.u-padding-_5rem-1rem-0.u-padding-_5rem-1rem-0 { padding: .5rem 1rem 0; }
.u-padding-_9rem-1_1rem.u-padding-_9rem-1_1rem.u-padding-_9rem-1_1rem.u-padding-_9rem-1_1rem { padding: .9rem 1.1rem; }
.u-padding-bottom-0.u-padding-bottom-0.u-padding-bottom-0.u-padding-bottom-0 { padding-bottom: 0; }
.u-padding-bottom-4px.u-padding-bottom-4px.u-padding-bottom-4px.u-padding-bottom-4px { padding-bottom: 4px; }
.u-padding-left-10px.u-padding-left-10px.u-padding-left-10px.u-padding-left-10px { padding-left: 10px; }
.u-padding-left-14px.u-padding-left-14px.u-padding-left-14px.u-padding-left-14px { padding-left: 14px; }
.u-padding-left-1_25rem.u-padding-left-1_25rem.u-padding-left-1_25rem.u-padding-left-1_25rem { padding-left: 1.25rem; }
.u-padding-left-20px.u-padding-left-20px.u-padding-left-20px.u-padding-left-20px { padding-left: 20px; }
.u-padding-left-30px.u-padding-left-30px.u-padding-left-30px.u-padding-left-30px { padding-left: 30px; }
.u-padding-right-26px.u-padding-right-26px.u-padding-right-26px.u-padding-right-26px { padding-right: 26px; }
.u-padding-space-4-0.u-padding-space-4-0.u-padding-space-4-0.u-padding-space-4-0 { padding: var(--space-4) 0; }
.u-padding-space-5.u-padding-space-5.u-padding-space-5.u-padding-space-5 { padding: var(--space-5); }
.u-padding-top-0.u-padding-top-0.u-padding-top-0.u-padding-top-0 { padding-top: 0; }
.u-padding-top-10px.u-padding-top-10px.u-padding-top-10px.u-padding-top-10px { padding-top: 10px; }
.u-padding-top-14px.u-padding-top-14px.u-padding-top-14px.u-padding-top-14px { padding-top: 14px; }
.u-padding-top-16px.u-padding-top-16px.u-padding-top-16px.u-padding-top-16px { padding-top: 16px; }
.u-padding-top-60px.u-padding-top-60px.u-padding-top-60px.u-padding-top-60px { padding-top: 60px; }
.u-padding-top-_75rem.u-padding-top-_75rem.u-padding-top-_75rem.u-padding-top-_75rem { padding-top: .75rem; }
.u-pointer-events-none.u-pointer-events-none.u-pointer-events-none.u-pointer-events-none { pointer-events: none; }
.u-position-absolute.u-position-absolute.u-position-absolute.u-position-absolute { position: absolute; }
.u-position-relative.u-position-relative.u-position-relative.u-position-relative { position: relative; }
.u-position-sticky.u-position-sticky.u-position-sticky.u-position-sticky { position: sticky; }
.u-right-3px.u-right-3px.u-right-3px.u-right-3px { right: -3px; }
.u-right-4px.u-right-4px.u-right-4px.u-right-4px { right: 4px; }
.u-right-6px.u-right-6px.u-right-6px.u-right-6px { right: 6px; }
.u-right-8px.u-right-8px.u-right-8px.u-right-8px { right: 8px; }
.u-text-align-center.u-text-align-center.u-text-align-center.u-text-align-center { text-align: center; }
.u-text-align-left.u-text-align-left.u-text-align-left.u-text-align-left { text-align: left; }
.u-text-align-right.u-text-align-right.u-text-align-right.u-text-align-right { text-align: right; }
.u-text-decoration-none.u-text-decoration-none.u-text-decoration-none.u-text-decoration-none { text-decoration: none; }
.u-text-overflow-ellipsis.u-text-overflow-ellipsis.u-text-overflow-ellipsis.u-text-overflow-ellipsis { text-overflow: ellipsis; }
.u-text-transform-none.u-text-transform-none.u-text-transform-none.u-text-transform-none { text-transform: none; }
.u-text-transform-uppercase.u-text-transform-uppercase.u-text-transform-uppercase.u-text-transform-uppercase { text-transform: uppercase; }
.u-top-0.u-top-0.u-top-0.u-top-0 { top: 0; }
.u-top-4px.u-top-4px.u-top-4px.u-top-4px { top: 4px; }
.u-top-50pct.u-top-50pct.u-top-50pct.u-top-50pct { top: 50%; }
.u-transform-translatey-50pct.u-transform-translatey-50pct.u-transform-translatey-50pct.u-transform-translatey-50pct { transform: translateY(-50%); }
.u-transition-stroke-dashoffset-0_6s-ease.u-transition-stroke-dashoffset-0_6s-ease.u-transition-stroke-dashoffset-0_6s-ease.u-transition-stroke-dashoffset-0_6s-ease { transition: stroke-dashoffset 0.6s ease; }
.u-transition-transform-0_15s-ease.u-transition-transform-0_15s-ease.u-transition-transform-0_15s-ease.u-transition-transform-0_15s-ease { transition: transform 0.15s ease; }
.u-vertical-align-middle.u-vertical-align-middle.u-vertical-align-middle.u-vertical-align-middle { vertical-align: middle; }
.u-white-space-normal.u-white-space-normal.u-white-space-normal.u-white-space-normal { white-space: normal; }
.u-white-space-nowrap.u-white-space-nowrap.u-white-space-nowrap.u-white-space-nowrap { white-space: nowrap; }
.u-width-100pct.u-width-100pct.u-width-100pct.u-width-100pct { width: 100%; }
.u-width-100px.u-width-100px.u-width-100px.u-width-100px { width: 100px; }
.u-width-10px.u-width-10px.u-width-10px.u-width-10px { width: 10px; }
.u-width-120px.u-width-120px.u-width-120px.u-width-120px { width: 120px; }
.u-width-140px.u-width-140px.u-width-140px.u-width-140px { width: 140px; }
.u-width-160px.u-width-160px.u-width-160px.u-width-160px { width: 160px; }
.u-width-180px.u-width-180px.u-width-180px.u-width-180px { width: 180px; }
.u-width-28px.u-width-28px.u-width-28px.u-width-28px { width: 28px; }
.u-width-32px.u-width-32px.u-width-32px.u-width-32px { width: 32px; }
.u-width-36px.u-width-36px.u-width-36px.u-width-36px { width: 36px; }
.u-width-40px.u-width-40px.u-width-40px.u-width-40px { width: 40px; }
.u-width-420px.u-width-420px.u-width-420px.u-width-420px { width: 420px; }
.u-width-44px.u-width-44px.u-width-44px.u-width-44px { width: 44px; }
.u-width-48px.u-width-48px.u-width-48px.u-width-48px { width: 48px; }
.u-width-50px.u-width-50px.u-width-50px.u-width-50px { width: 50px; }
.u-width-52px.u-width-52px.u-width-52px.u-width-52px { width: 52px; }
.u-width-56px.u-width-56px.u-width-56px.u-width-56px { width: 56px; }
.u-width-60pct.u-width-60pct.u-width-60pct.u-width-60pct { width: 60%; }
.u-width-60px.u-width-60px.u-width-60px.u-width-60px { width: 60px; }
.u-width-64px.u-width-64px.u-width-64px.u-width-64px { width: 64px; }
.u-width-75px.u-width-75px.u-width-75px.u-width-75px { width: 75px; }
.u-width-80pct.u-width-80pct.u-width-80pct.u-width-80pct { width: 80%; }
.u-width-80px.u-width-80px.u-width-80px.u-width-80px { width: 80px; }
.u-width-8px.u-width-8px.u-width-8px.u-width-8px { width: 8px; }
.u-width-90px.u-width-90px.u-width-90px.u-width-90px { width: 90px; }
.u-width-96vw.u-width-96vw.u-width-96vw.u-width-96vw { width: 96vw; }
.u-word-break-break-word.u-word-break-break-word.u-word-break-break-word.u-word-break-break-word { word-break: break-word; }
.u-z-index-10.u-z-index-10.u-z-index-10.u-z-index-10 { z-index: 10; }
.u-z-index-2.u-z-index-2.u-z-index-2.u-z-index-2 { z-index: 2; }
.u-z-index-2000.u-z-index-2000.u-z-index-2000.u-z-index-2000 { z-index: 2000; }
/* ── End of generated utility classes ── */

/* == AI Media Buyer Copilot Studio == */
/* ── Seamless Full-Bleed Studio Integration ── */
    .rdr-main:has(.rdr-agent-container) {
        overflow: hidden !important;
        height: 100vh !important;
        display: flex;
        flex-direction: column;
    }
    .rdr-main:has(.rdr-agent-container) .rdr-content {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: none !important;
    }

    .rdr-agent-container {
        display: flex;
        width: 100%;
        height: calc(100vh - 56px);
        background-color: var(--rdr-bg, #f1f4f9);
        color: var(--rdr-text, #0f172a);
        overflow: hidden;
        position: relative;
    }

    /* ── LEFT SIDEBAR ── */
    .rdr-agent-sidebar {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        border-right: 1px solid var(--rdr-border, #e2e8f0);
        display: flex;
        flex-direction: column;
        background: var(--rdr-card, #ffffff);
        z-index: 20;
    }
    .rdr-agent-sidebar-top {
        padding: 1rem;
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
    }
    .rdr-btn-new-session {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: var(--rdr-accent, #6366f1);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.875rem;
        border-radius: var(--rdr-radius-sm, 8px);
        border: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: all 0.15s ease;
    }
    .rdr-btn-new-session:hover:not(:disabled) {
        background: var(--rdr-accent-hover, #4f46e5);
        box-shadow: 0 3px 10px rgba(99, 102, 241, 0.25);
        transform: translateY(-1px);
    }
    .rdr-btn-new-session:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Autopilot Card in Sidebar */
    .rdr-agent-autopilot-card {
        margin: 0.75rem 0.85rem 0.4rem;
        padding: 0.85rem 1rem;
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
    }
    .rdr-autopilot-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.12));
        color: var(--rdr-accent, #6366f1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }
    .rdr-card-section-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-status-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
    }
    .rdr-status-chip.is-active {
        background: var(--rdr-positive-light, rgba(22, 163, 74, 0.12));
        color: var(--rdr-positive, #16a34a);
    }
    .rdr-status-chip.is-muted {
        background: var(--rdr-surface-hover, #eef1f6);
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }
    .rdr-status-dot.pulse {
        animation: rdr-dot-pulse 1.8s infinite;
    }
    @keyframes rdr-dot-pulse {
        0% { transform: scale(0.9); opacity: 0.8; }
        50% { transform: scale(1.4); opacity: 1; }
        100% { transform: scale(0.9); opacity: 0.8; }
    }
    .rdr-switch-input {
        cursor: pointer;
    }
    .rdr-switch-input:checked {
        background-color: var(--rdr-positive, #16a34a);
        border-color: var(--rdr-positive, #16a34a);
    }
    .rdr-autopilot-desc {
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
        margin-top: 0.4rem;
        line-height: 1.35;
    }

    /* Account Health Gamified Cockpit Widget */
    .rdr-account-health-card {
        margin: 0.4rem 0.85rem;
        padding: 0.75rem 0.95rem;
        background: linear-gradient(135deg, rgba(22, 163, 74, 0.05), rgba(99, 102, 241, 0.04));
        border: 1px solid rgba(22, 163, 74, 0.2);
        border-radius: var(--rdr-radius, 12px);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .rdr-account-health-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
        border-color: var(--rdr-positive, #16a34a);
    }
    .rdr-health-radar {
        color: var(--rdr-positive, #16a34a);
        font-size: 0.875rem;
        animation: rdr-pulse 2s infinite ease-in-out;
    }
    .rdr-health-label {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-health-score {
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--rdr-positive, #16a34a);
    }
    .rdr-health-bar {
        width: 100%;
        height: 5px;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 999px;
        overflow: hidden;
    }
    .rdr-health-progress {
        height: 100%;
        background: linear-gradient(90deg, #10b981, #06b6d4);
        border-radius: 999px;
        transition: width 0.6s ease;
    }
    .rdr-health-status {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--rdr-text-secondary, #334155);
    }
    .rdr-health-action {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--rdr-accent, #6366f1);
    }

    /* Scanner Trigger */
    .rdr-agent-scanner-bar {
        padding: 0 0.85rem 0.5rem;
    }
    .rdr-btn-scanner {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        font-size: 0.8125rem;
        font-weight: 500;
        border-radius: var(--rdr-radius-sm, 8px);
        transition: all 0.15s ease;
    }
    .rdr-btn-scanner:hover:not(:disabled) {
        border-color: var(--rdr-ai, #0891b2);
        color: var(--rdr-ai, #0891b2);
        background: var(--rdr-ai-light, rgba(8, 145, 178, 0.08));
    }
    .rdr-spin {
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Sessions List & Search */
    .rdr-agent-conv-list {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0.85rem;
        display: flex;
        flex-direction: column;
    }
    .rdr-conv-list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.25rem 0.5rem 0.4rem;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-conv-count-badge {
        font-size: 0.6875rem;
        background: var(--rdr-surface-2, #f8fafc);
        color: var(--rdr-text-muted, #64748b);
        border: 1px solid var(--rdr-border, #e2e8f0);
        padding: 0 6px;
        border-radius: 999px;
    }
    .rdr-sidebar-search {
        position: relative;
        display: flex;
        align-items: center;
    }
    .rdr-search-icon {
        position: absolute;
        left: 8px;
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
        pointer-events: none;
    }
    .rdr-search-input {
        width: 100%;
        height: 28px;
        padding: 2px 24px 2px 26px;
        font-size: 0.75rem;
        border-radius: 6px;
        border: 1px solid var(--rdr-border, #e2e8f0);
        background: var(--rdr-surface-2, #f8fafc);
        color: var(--rdr-text, #0f172a);
        outline: none;
        transition: border-color 0.15s ease;
    }
    .rdr-search-input:focus {
        border-color: var(--rdr-accent, #6366f1);
        background: var(--rdr-card, #ffffff); /* was #ffffff: typed text vanished in dark mode (audit 2026-11-08) */
    }
    .rdr-search-clear {
        position: absolute;
        right: 6px;
        background: none;
        border: none;
        font-size: 0.85rem;
        color: var(--rdr-text-muted, #64748b);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    .rdr-conv-items-wrapper {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .rdr-agent-conv-item {
        padding: 0.6rem 0.75rem;
        border-radius: var(--rdr-radius-sm, 8px);
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.15s ease;
        color: var(--rdr-text, #0f172a);
    }
    .rdr-agent-conv-item:hover {
        background: var(--rdr-surface-hover, #eef1f6);
    }
    .rdr-agent-conv-item.active {
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.12));
        border-color: rgba(99, 102, 241, 0.25);
    }
    .rdr-conv-icon {
        font-size: 0.875rem;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-agent-conv-item.active .rdr-conv-icon {
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-conv-title {
        font-size: 0.8125rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }
    .rdr-agent-conv-item.active .rdr-conv-title {
        color: var(--rdr-accent, #6366f1);
        font-weight: 600;
    }
    .rdr-conv-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.6875rem;
        color: var(--rdr-text-muted, #64748b);
        padding-left: 1.35rem;
    }
    .rdr-conv-action-pill {
        font-size: 0.6875rem;
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.12));
        color: var(--rdr-accent, #6366f1);
        padding: 0 6px;
        border-radius: 999px;
        font-weight: 500;
    }

    /* ── MAIN STUDIO AREA ── */
    .rdr-agent-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background: var(--rdr-bg, #f1f4f9);
    }

    /* Studio Header */
    .rdr-icon-btn-ghost {
        width: 28px;
        height: 28px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        color: var(--rdr-text-muted, #64748b);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }
    .rdr-icon-btn-ghost:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        color: var(--rdr-text, #0f172a);
        border-color: var(--rdr-border, #e2e8f0);
    }
    @media (min-width: 1025px) {
        .rdr-agent-sessions-btn {
            display: none !important;
        }
    }
    .rdr-agent-header {
        height: 56px;
        min-height: 56px;
        padding: 0 1.25rem;
        background: var(--rdr-card, #ffffff);
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        z-index: 10;
    }
    .rdr-agent-title-group {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .rdr-active-title-wrap {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 60px;
        overflow: hidden;
    }
    .rdr-active-conv-title {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
        max-width: clamp(110px, 18vw, 300px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Media Buyer Vibe / Persona Selector */
    .rdr-vibe-dropdown-wrap {
        position: relative;
    }
    .rdr-vibe-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        height: 30px;
        padding: 0 0.65rem;
        border-radius: 999px;
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text, #0f172a);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-vibe-btn:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        border-color: var(--rdr-accent, #6366f1);
    }
    .rdr-vibe-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        width: 250px;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        padding: 0.4rem;
        z-index: 100;
    }
    .rdr-vibe-menu-header {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--rdr-text-muted, #64748b);
        padding: 0.35rem 0.6rem;
    }
    .rdr-vibe-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.6rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .rdr-vibe-item:hover {
        background: var(--rdr-surface-hover, #eef1f6);
    }
    .rdr-vibe-item.active {
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.1));
    }
    .rdr-vibe-item-icon {
        font-size: 1.1rem;
    }
    .rdr-vibe-item-body {
        flex: 1;
    }
    .rdr-vibe-item-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
    }
    .rdr-vibe-item-desc {
        font-size: 0.6875rem;
        color: var(--rdr-text-muted, #64748b);
        line-height: 1.25;
    }

    /* Sound FX Toggle */
    .rdr-sfx-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        height: 32px;
        padding: 0 0.65rem;
        border-radius: var(--rdr-radius-sm, 8px);
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-sfx-toggle-btn:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        border-color: var(--rdr-border-hover, #c7d2e0);
    }

    /* AI Status Badges */
    .rdr-ai-connection-indicator {
        display: flex;
        align-items: center;
    }
    .rdr-ai-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 500;
        border: 1px solid transparent;
        transition: all 0.15s ease;
    }
    .rdr-ai-chip.is-online {
        background: var(--rdr-positive-light, rgba(22, 163, 74, 0.12));
        color: var(--rdr-positive, #16a34a);
        border-color: rgba(22, 163, 74, 0.25);
    }
    .rdr-ai-chip.is-standby {
        background: var(--rdr-surface-2, #f8fafc);
        color: var(--rdr-text-muted, #64748b);
        border-color: var(--rdr-border, #e2e8f0);
    }
    .rdr-ai-chip.is-checking {
        background: var(--rdr-surface-2, #f8fafc);
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-ai-model-tag {
        font-size: 0.6875rem;
        opacity: 0.85;
        border-left: 1px solid currentColor;
        padding-left: 0.35rem;
        margin-left: 0.15rem;
    }

    /* Queue Toggle Button */
    .rdr-btn-queue-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        height: 32px;
        padding: 0 0.85rem;
        border-radius: var(--rdr-radius-sm, 8px);
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-btn-queue-toggle:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        border-color: var(--rdr-border-hover, #c7d2e0);
    }
    .rdr-btn-queue-toggle.is-active {
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.12));
        border-color: rgba(99, 102, 241, 0.3);
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-queue-badge {
        font-size: 0.6875rem;
        font-weight: 700;
        background: var(--rdr-accent, #6366f1);
        color: #ffffff;
        padding: 1px 6px;
        border-radius: 999px;
    }

    /* ── STREAM AREA ── */
    .rdr-agent-stream {
        flex: 1;
        overflow-y: auto;
        padding: 2rem 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Notice Banner for Standby */
    .rdr-notice-banner {
        max-width: 860px;
        margin: 0 auto 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.75rem 1rem;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-left: 3px solid var(--rdr-ai, #0891b2);
        border-radius: var(--rdr-radius-sm, 8px);
        box-shadow: var(--rdr-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
    }
    .rdr-notice-icon {
        font-size: 1.25rem;
        color: var(--rdr-ai, #0891b2);
    }
    .rdr-notice-content {
        flex: 1;
    }
    .rdr-notice-title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
    }
    .rdr-notice-text {
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-notice-action {
        background: transparent;
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: 6px;
        padding: 3px 8px;
        font-size: 0.75rem;
        color: var(--rdr-text-secondary, #334155);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-notice-action:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        color: var(--rdr-text, #0f172a);
    }

    /* ── HERO EMPTY STATE ── */
    .rdr-agent-hero-container {
        margin: auto;
        text-align: center;
        max-width: 840px;
        width: 100%;
        padding: 1.5rem 1rem;
    }
    .rdr-hero-badge-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 1.25rem;
    }
    .rdr-hero-ai-badge {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(8, 145, 178, 0.12));
        border: 1px solid rgba(99, 102, 241, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--rdr-accent, #6366f1);
        font-size: 1.6rem;
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.1);
    }
    .rdr-hero-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--rdr-text, #0f172a);
        letter-spacing: -0.02em;
        margin-bottom: 0.5rem;
    }
    .rdr-hero-subtitle {
        font-size: 0.875rem;
        color: var(--rdr-text-muted, #64748b);
        max-width: 620px;
        margin: 0 auto 2rem;
        line-height: 1.5;
    }

    /* Hero Prompt Cards Grid */
    .rdr-hero-prompt-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
        text-align: left;
        margin-bottom: 1.5rem;
    }
    .rdr-prompt-card {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 0.95rem 1.1rem;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--rdr-shadow, 0 1px 3px rgba(0, 0, 0, 0.04));
        position: relative;
    }
    .rdr-prompt-card:hover {
        border-color: var(--rdr-accent, #6366f1);
        transform: translateY(-2px);
        box-shadow: var(--rdr-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
    }
    .rdr-prompt-card-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    .icon-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
    .icon-rose   { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
    .icon-amber  { background: rgba(217, 119, 6, 0.12); color: #d97706; }
    .icon-emerald{ background: rgba(22, 163, 74, 0.12); color: #16a34a; }
    .icon-cyan   { background: rgba(8, 145, 178, 0.12); color: #0891b2; }
    .icon-purple { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
    .icon-flame  { background: rgba(249, 115, 22, 0.15); color: #ea580c; }

    .rdr-prompt-card-body {
        flex: 1;
        min-width: 0;
    }
    .rdr-prompt-card-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
        margin-bottom: 0.2rem;
    }
    .rdr-prompt-card-desc {
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
        line-height: 1.35;
    }
    .rdr-prompt-card-arrow {
        font-size: 1.25rem;
        color: var(--rdr-text-muted, #64748b);
        opacity: 0;
        transition: all 0.2s ease;
        align-self: center;
    }
    .rdr-prompt-card:hover .rdr-prompt-card-arrow {
        opacity: 1;
        color: var(--rdr-accent, #6366f1);
        transform: translateX(2px);
    }

    /* Secondary Hero Pills */
    .rdr-hero-pills-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .rdr-quick-pill {
        display: inline-flex;
        align-items: center;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-quick-pill:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        border-color: var(--rdr-border-hover, #c7d2e0);
        color: var(--rdr-text, #0f172a);
    }

    /* ── MESSAGE ROWS & BUBBLES ── */
    .rdr-msg-row {
        display: flex;
        gap: 0.85rem;
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
    }
    .rdr-msg-enter {
        animation: rdrMsgEnter 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    @keyframes rdrMsgEnter {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .rdr-msg-user {
        margin-left: auto;
        flex-direction: row-reverse;
    }
    .rdr-msg-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9375rem;
        flex-shrink: 0;
    }
    .avatar-user {
        background: var(--rdr-accent, #6366f1);
        color: #ffffff;
    }
    .avatar-assistant {
        background: var(--rdr-surface-2, #f8fafc);
        color: var(--rdr-accent, #6366f1);
        border: 1px solid var(--rdr-border, #e2e8f0);
    }
    .pulse-avatar {
        animation: rdrAvatarGlow 2s infinite ease-in-out;
    }
    @keyframes rdrAvatarGlow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
        50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
    }
    .rdr-msg-bubble {
        border-radius: var(--rdr-radius, 12px);
        padding: 0.95rem 1.25rem;
        position: relative;
        font-size: 0.9rem;
        line-height: 1.55;
    }
    .rdr-msg-user .rdr-msg-bubble {
        background: var(--rdr-accent, #6366f1);
        color: #ffffff;
        border-bottom-right-radius: 4px;
        max-width: 75%;
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    }
    .rdr-msg-assistant .rdr-msg-bubble {
        background: var(--rdr-card, #ffffff);
        color: var(--rdr-text, #0f172a);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-bottom-left-radius: 4px;
        max-width: 90%;
        box-shadow: var(--rdr-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
    }
    .rdr-msg-meta {
        font-size: 0.6875rem;
        margin-bottom: 0.4rem;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        opacity: 0.8;
    }
    .rdr-msg-user .rdr-msg-meta {
        color: rgba(255, 255, 255, 0.85);
    }
    .rdr-msg-assistant .rdr-msg-meta {
        color: var(--rdr-text-muted, #64748b);
    }

    /* Message Action Bar (Copy, Listen, Retry) */
    .rdr-msg-action-bar {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--rdr-border, #e2e8f0);
    }
    .rdr-msg-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 3px 8px;
        border-radius: 6px;
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.15s ease;
        text-decoration: none;
    }
    .rdr-msg-action-btn:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        color: var(--rdr-text, #0f172a);
    }

    /* Markdown Styling Inside Assistant Message */
    .rdr-msg-content p { margin: 0 0 0.6rem; }
    .rdr-msg-content p:last-child { margin-bottom: 0; }
    .rdr-msg-content h4, .rdr-msg-content h5, .rdr-msg-content h6 {
        font-weight: 700;
        margin: 0.85rem 0 0.4rem;
        color: var(--rdr-text, #0f172a);
    }
    .rdr-msg-content h4 { font-size: 1.1rem; }
    .rdr-msg-content h5 { font-size: 0.95rem; }
    .rdr-msg-content h6 { font-size: 0.875rem; }
    .rdr-msg-content ul, .rdr-msg-content ol {
        margin: 0 0 0.6rem;
        padding-inline-start: 1.25rem;
    }
    .rdr-msg-content blockquote {
        margin: 0 0 0.6rem;
        padding: 0.4rem 0.85rem;
        border-inline-start: 3px solid var(--rdr-accent, #6366f1);
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.08));
        border-radius: 4px;
    }
    .rdr-msg-content code {
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        padding: 1px 4px;
        border-radius: 4px;
        font-size: 0.85em;
    }

    /* ── AUTO-EXPANDABLE TABLES WITH TOOLBAR ── */
    .rdr-table-container {
        margin: 0.85rem 0;
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
        background: var(--rdr-card, #ffffff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        overflow: hidden;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }
    .rdr-table-container.is-expanded {
        margin-left: calc(-1 * min(160px, 12vw));
        margin-right: calc(-1 * min(160px, 12vw));
        width: calc(100% + 2 * min(160px, 12vw));
        max-width: 96vw;
        border-color: var(--rdr-accent, #6366f1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        z-index: 10;
    }
    .rdr-table-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0.75rem;
        background: var(--rdr-surface-2, #f8fafc);
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
        font-size: 0.75rem;
    }
    .rdr-table-title {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-weight: 600;
        color: var(--rdr-text-secondary, #334155);
    }
    .rdr-table-actions {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .rdr-table-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 2px 7px;
        font-size: 0.6875rem;
        font-weight: 500;
        border-radius: 5px;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-table-btn:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        color: var(--rdr-text, #0f172a);
        border-color: var(--rdr-accent, #6366f1);
    }
    .rdr-expand-toggle-btn {
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.08));
        color: var(--rdr-accent, #6366f1);
        border-color: rgba(99, 102, 241, 0.2);
    }
    .rdr-expand-toggle-btn:hover {
        background: var(--rdr-accent, #6366f1);
        color: #ffffff;
    }
    .rdr-md-table {
        overflow-x: auto;
        max-height: 480px;
    }
    .rdr-md-table table {
        border-collapse: collapse;
        width: 100%;
        font-size: 0.8125rem;
    }
    .rdr-md-table th, .rdr-md-table td {
        padding: 0.5rem 0.85rem;
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
        text-align: start;
        white-space: nowrap;
    }
    .rdr-md-table th {
        background: var(--rdr-surface-2, #f8fafc);
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .rdr-md-table th.numeric, .rdr-md-table td.numeric {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .rdr-md-table tbody tr:hover {
        background-color: rgba(99, 102, 241, 0.03);
    }
    .rdr-md-table tr:last-child td {
        border-bottom: 0;
    }
    .rdr-table-tag-win {
        display: inline-block;
        padding: 1px 6px;
        border-radius: 999px;
        background: rgba(22, 163, 74, 0.12);
        color: #16a34a;
        font-weight: 700;
        font-size: 0.75rem;
    }

    /* Action Proposals Grid Inside Message */
    .rdr-msg-actions-grid {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--rdr-border, #e2e8f0);
    }
    .rdr-msg-actions-header {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rdr-text-muted, #64748b);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-bottom: 0.5rem;
    }
    .rdr-action-card {
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
        padding: 0.85rem 1rem;
        margin-bottom: 0.5rem;
    }
    .rdr-action-target {
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
        font-size: 0.875rem;
    }
    .rdr-confidence-pill {
        font-size: 0.6875rem;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-muted, #64748b);
        padding: 1px 6px;
        border-radius: 999px;
    }
    .rdr-action-rationale {
        font-size: 0.8125rem;
        color: var(--rdr-text-secondary, #334155);
        margin-bottom: 0.5rem;
    }
    .rdr-metric-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: 6px;
        padding: 2px 7px;
        font-size: 0.75rem;
    }
    .rdr-metric-name {
        color: var(--rdr-text-muted, #64748b);
        text-transform: uppercase;
        font-size: 0.6875rem;
    }
    .rdr-metric-val {
        color: var(--rdr-text, #0f172a);
    }

    /* Suggested Edits */
    .rdr-msg-edits {
        margin-top: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .rdr-msg-edits-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--rdr-text-secondary, #334155);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .rdr-edit-card {
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius-sm, 8px);
        padding: 0.65rem 0.85rem;
        background: var(--rdr-card, #ffffff);
    }
    .rdr-edit-card.is-applied {
        border-color: var(--rdr-positive, #16a34a);
        background: var(--rdr-positive-light, rgba(22, 163, 74, 0.08));
    }
    .rdr-edit-card-head {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .rdr-edit-level {
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 4px;
        background: var(--rdr-accent-light, rgba(99, 102, 241, 0.12));
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-edit-change { font-weight: 600; font-size: 0.8125rem; margin-top: 0.25rem; }
    .rdr-edit-reason { font-size: 0.75rem; color: var(--rdr-text-muted, #64748b); margin-top: 0.15rem; }
    .rdr-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }

    /* Data Used */
    .rdr-msg-data {
        margin-top: 0.6rem;
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-msg-data summary {
        cursor: pointer;
        user-select: none;
    }
    .rdr-data-list {
        margin: 0.35rem 0 0;
        padding-inline-start: 1.15rem;
    }

    /* Multi-Step Reasoning Stepper Bubble */
    .rdr-thinking-bubble {
        padding: 0.85rem 1.15rem !important;
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-left: 3px solid var(--rdr-accent, #6366f1);
    }
    .rdr-telemetry-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.6rem;
    }
    .rdr-telemetry-pulse {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--rdr-accent, #6366f1);
        animation: rdr-pulse 1.2s infinite ease-in-out;
    }
    @keyframes rdr-pulse {
        0%, 100% { opacity: 0.4; transform: scale(0.9); }
        50% { opacity: 1; transform: scale(1.3); }
    }
    .rdr-telemetry-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rdr-text-secondary, #334155);
    }
    .rdr-telemetry-timer {
        font-size: 0.6875rem;
        font-weight: 600;
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        padding: 1px 6px;
        border-radius: 4px;
        color: var(--rdr-text-muted, #64748b);
        font-variant-numeric: tabular-nums;
    }
    .rdr-telemetry-stepper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.3rem;
        margin-bottom: 0.6rem;
        padding: 0.4rem 0.6rem;
        background: var(--rdr-surface-2, #f8fafc);
        border-radius: 8px;
        border: 1px solid var(--rdr-border, #e2e8f0);
    }
    .rdr-stepper-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.6875rem;
        color: var(--rdr-text-muted, #64748b);
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .rdr-stepper-item.active {
        color: var(--rdr-accent, #6366f1);
        font-weight: 700;
    }
    .rdr-stepper-item.done {
        color: var(--rdr-positive, #16a34a);
    }
    .rdr-stepper-sep {
        flex: 1;
        height: 1px;
        background: var(--rdr-border, #e2e8f0);
        margin: 0 2px;
    }
    .rdr-thinking-status-bar {
        display: flex;
        align-items: center;
    }
    .rdr-typing-dots {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .rdr-typing-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--rdr-accent, #6366f1);
        animation: rdr-bounce 1.2s infinite ease-in-out;
    }
    .rdr-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .rdr-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes rdr-bounce {
        0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
        40% { transform: translateY(-5px); opacity: 1; }
    }
    .rdr-thinking-text {
        font-size: 0.8125rem;
        color: var(--rdr-text-secondary, #334155);
    }

    /* ── CHAT INPUT (THE OMNIBOX) ── */
    .rdr-agent-footer {
        padding: 0.75rem 1.5rem 1rem;
        background: var(--rdr-bg, #f1f4f9);
        border-top: 1px solid var(--rdr-border, #e2e8f0);
    }
    .rdr-agent-form {
        max-width: 860px;
        margin: 0 auto;
        width: 100%;
    }
    .rdr-omnibox-prebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.45rem;
    }
    .rdr-timeframe-pills {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        flex-wrap: wrap;
    }
    .rdr-prebar-label {
        font-size: 0.6875rem;
        color: var(--rdr-text-muted, #64748b);
        font-weight: 600;
        text-transform: uppercase;
        margin-right: 0.15rem;
    }
    .rdr-tf-pill {
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
        font-size: 0.6875rem;
        font-weight: 500;
        padding: 2px 7px;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .rdr-tf-pill:hover {
        background: var(--rdr-surface-hover, #eef1f6);
        border-color: var(--rdr-accent, #6366f1);
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-fun-pills {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .rdr-fun-pill {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.15s ease;
        border: 1px solid transparent;
    }
    .pill-roast {
        background: rgba(249, 115, 22, 0.12);
        color: #ea580c;
        border-color: rgba(249, 115, 22, 0.25);
    }
    .pill-roast:hover {
        background: #ea580c;
        color: #ffffff;
    }
    .pill-scale {
        background: rgba(22, 163, 74, 0.12);
        color: #16a34a;
        border-color: rgba(22, 163, 74, 0.25);
    }
    .pill-scale:hover {
        background: #16a34a;
        color: #ffffff;
    }
    .pill-bleed {
        background: rgba(220, 38, 38, 0.12);
        color: #dc2626;
        border-color: rgba(220, 38, 38, 0.25);
    }
    .pill-bleed:hover {
        background: #dc2626;
        color: #ffffff;
    }

    .rdr-omnibox {
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius-lg, 16px);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
        padding: 0.5rem 0.75rem 0.5rem 1rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .rdr-omnibox:focus-within {
        border-color: var(--rdr-accent, #6366f1);
        box-shadow: 0 0 0 3px var(--rdr-accent-ring, rgba(99, 102, 241, 0.2)), 0 4px 18px rgba(0, 0, 0, 0.06);
    }
    .rdr-omnibox-main {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .rdr-omnibox-textarea {
        flex: 1;
        background: transparent;
        border: none;
        color: var(--rdr-text, #0f172a);
        font-size: 0.9rem;
        resize: none;
        padding: 0.35rem 0;
        min-height: 28px;
        max-height: 160px;
        line-height: 1.45;
        box-shadow: none !important;
        outline: none;
    }
    .rdr-omnibox-textarea::placeholder {
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-omnibox-send-btn {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--rdr-accent, #6366f1);
        color: #ffffff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        cursor: pointer;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }
    .rdr-omnibox-send-btn:hover:not(:disabled) {
        background: var(--rdr-accent-hover, #4f46e5);
        transform: scale(1.05);
    }
    .rdr-omnibox-send-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    .rdr-omnibox-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.4rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--rdr-border, #e2e8f0);
        font-size: 0.6875rem;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-omnibox-hints {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    .rdr-kbd-hint kbd {
        font-size: 0.6875rem;
        padding: 1px 4px;
        border-radius: 4px;
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        color: var(--rdr-text-secondary, #334155);
    }
    .rdr-hint-sep {
        opacity: 0.5;
    }
    .rdr-omnibox-safety {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--rdr-positive, #16a34a);
        font-weight: 500;
    }

    /* ── RIGHT DRAWER: APPROVAL QUEUE ── */
    .rdr-agent-queue-drawer {
        width: 330px;
        min-width: 330px;
        max-width: 330px;
        border-left: 1px solid var(--rdr-border, #e2e8f0);
        display: flex;
        flex-direction: column;
        background: var(--rdr-card, #ffffff);
        transition: transform 0.2s ease-in-out;
        z-index: 20;
    }
    .rdr-agent-queue-drawer:not(.open) {
        display: none;
    }
    .rdr-queue-drawer-header {
        height: 56px;
        padding: 0 1.25rem;
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .rdr-queue-batch-bar {
        padding: 0.5rem 1rem;
        background: var(--rdr-surface-2, #f8fafc);
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    .rdr-queue-icon {
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-queue-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }
    .rdr-queue-empty {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-queue-empty-icon {
        font-size: 2.25rem;
        color: var(--rdr-positive, #16a34a);
        margin-bottom: 0.75rem;
        opacity: 0.7;
    }
    .rdr-queue-empty-title {
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--rdr-text, #0f172a);
        margin-bottom: 0.25rem;
    }
    .rdr-queue-empty-desc {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    .rdr-queue-card {
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
        padding: 0.95rem;
        margin-bottom: 0.85rem;
        box-shadow: var(--rdr-shadow, 0 1px 3px rgba(0, 0, 0, 0.04));
    }
    .rdr-queue-date {
        font-size: 0.6875rem;
        color: var(--rdr-text-muted, #64748b);
    }
    .rdr-queue-entity-name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--rdr-text, #0f172a);
        margin: 0.35rem 0 0.25rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rdr-queue-rationale {
        font-size: 0.75rem;
        color: var(--rdr-text-secondary, #334155);
        margin-bottom: 0.5rem;
        line-height: 1.35;
    }
    .rdr-queue-budget-box {
        background: var(--rdr-card, #ffffff);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: 6px;
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* ── MODALS ── */
    .rdr-modal-content {
        background: var(--rdr-card, #ffffff);
        color: var(--rdr-text, #0f172a);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius-lg, 16px);
        box-shadow: var(--rdr-shadow-md, 0 8px 30px rgba(0, 0, 0, 0.12));
    }
    .rdr-modal-header {
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
        padding: 1.25rem 1.5rem;
    }
    .rdr-modal-body {
        padding: 1.5rem;
    }
    .rdr-modal-footer {
        border-top: 1px solid var(--rdr-border, #e2e8f0);
        padding: 1rem 1.5rem;
    }
    .rdr-modal-switch-card {
        padding: 0.85rem 1rem;
        background: var(--rdr-surface-2, #f8fafc);
        border: 1px solid var(--rdr-border, #e2e8f0);
        border-radius: var(--rdr-radius, 12px);
    }
    .rdr-modal-switch-desc {
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
        margin-top: 0.25rem;
    }
    .rdr-modal-section-title {
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rdr-text-muted, #64748b);
        margin-bottom: 0.75rem;
    }
    .rdr-modal-option-row {
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--rdr-border, #e2e8f0);
    }
    .rdr-modal-option-row:last-of-type {
        border-bottom: none;
    }
    .rdr-modal-guardrails-hint {
        font-size: 0.75rem;
        color: var(--rdr-text-muted, #64748b);
        margin-top: 1rem;
        margin-bottom: 0;
        line-height: 1.4;
    }
    .rdr-modal-table th {
        cursor: pointer;
        user-select: none;
    }
    .rdr-modal-table th:hover {
        background: rgba(99, 102, 241, 0.08);
    }
    .rdr-modal-table th.sort-asc::after {
        content: " ▲";
        font-size: 0.7em;
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-modal-table th.sort-desc::after {
        content: " ▼";
        font-size: 0.7em;
        color: var(--rdr-accent, #6366f1);
    }
    .rdr-vibe-arrow {
        font-size: 0.65rem;
    }
    .rdr-modal-search-wrap {
        width: 220px;
    }
    .rdr-modal-table-scroll {
        max-height: 75vh;
        overflow: auto;
    }

    /* ── RESPONSIVE ADAPTATIONS ── */
    @media (max-width: 1024px) {
        .rdr-agent-sidebar {
            position: absolute;
            inset: 0 auto 0 0;
            width: min(300px, 86vw);
            max-width: none;
            box-shadow: var(--rdr-shadow-md);
            transform: translateX(-105%);
            transition: transform 0.22s var(--rdr-ease);
        }
        .rdr-agent-sidebar.is-open { transform: none; }
        .rdr-agent-queue-drawer {
            position: absolute;
            inset: 0 0 0 auto;
            width: min(340px, 92vw);
            max-width: none;
            box-shadow: var(--rdr-shadow-md);
        }
        .rdr-hero-prompt-grid { grid-template-columns: 1fr; }
        .rdr-agent-queue-label { display: none; }
        .rdr-omnibox-footer { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    }

/* AI Copilot on a phone (2026-10-11): the AI chip stays one line (model name hidden - it's in the tooltip), long names in
   suggested-change cards wrap instead of being cut off, and the keyboard hints (no keyboard on a phone) make room for the box. */
@media (max-width: 640px) {
  .rdr-ai-chip { white-space: nowrap; }
  .rdr-ai-chip .rdr-ai-model-tag { display: none; }
  .rdr-edit-card-head { flex-wrap: wrap; min-width: 0; }
  .rdr-edit-card-head strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .rdr-edit-level { white-space: nowrap; }
  .rdr-omnibox-hints { display: none; }
}
@media (max-width: 640px) {
  /* The timeframe and quick-action pills scroll sideways on one line each, so the message box stays above the bottom menu. */
  .rdr-timeframe-pills, .rdr-fun-pills { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rdr-timeframe-pills::-webkit-scrollbar, .rdr-fun-pills::-webkit-scrollbar { display: none; }
  .rdr-timeframe-pills > *, .rdr-fun-pills > * { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 768px) {
  /* The message box is pinned just above the phone's bottom menu (it ended up under it: the page's height didn't count the menu),
     and the conversation keeps room at its end so the last answer isn't hidden behind the box. */
  .rdr-agent-footer { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 150;
    background: var(--rdr-bg); border-top: 1px solid var(--rdr-border); padding: 6px 10px 8px; }
  .rdr-agent-stream { padding-bottom: 190px !important; }
}

/* ==========================================================================
   ADV-BENCHMARK: Industry Intelligence Design Tokens & Components
   ========================================================================== */

:root {
  /* Benchmark Spectrum & Box-Plot Distribution */
  --rdr-benchmark-track: var(--rdr-surface-2, #f1f5f9);
  --rdr-benchmark-iqr: rgba(99, 102, 241, 0.22);
  --rdr-benchmark-median: var(--rdr-accent, #6366f1);
  --rdr-benchmark-marker: #0f172a;
  --rdr-benchmark-marker-border: #ffffff;
  --rdr-benchmark-top-quartile: var(--rdr-positive-light, #ecfdf5);
  --rdr-benchmark-bottom-quartile: var(--rdr-negative-light, #fef2f2);

  /* Performance Comparison Delta Badges */
  --rdr-benchmark-ahead-text: #047857;
  --rdr-benchmark-ahead-bg: #d1fae5;
  --rdr-benchmark-ahead-border: rgba(5, 150, 105, 0.25);

  --rdr-benchmark-behind-text: #b91c1c;
  --rdr-benchmark-behind-bg: #fee2e2;
  --rdr-benchmark-behind-border: rgba(220, 38, 38, 0.25);

  --rdr-benchmark-parity-text: #1d4ed8;
  --rdr-benchmark-parity-bg: #dbeafe;
  --rdr-benchmark-parity-border: rgba(37, 99, 235, 0.25);

  /* Sample & Synthetic Preview Indicators */
  --rdr-sample-badge-text: #1d4ed8;
  --rdr-sample-badge-bg: #eff6ff;
  --rdr-sample-badge-border: rgba(59, 130, 246, 0.35);

  /* Consent & Legal Privacy Cards */
  --rdr-consent-card-bg: var(--rdr-card, #ffffff);
  --rdr-consent-card-border: var(--rdr-border, #e2e8f0);
  --rdr-consent-shield: var(--rdr-accent, #6366f1);

  /* Emergency Kill Switch */
  --rdr-killswitch-bg: #fef2f2;
  --rdr-killswitch-border: #ef4444;
  --rdr-killswitch-text: #991b1b;

  /* Motion Duration & Easing Scale */
  --rdr-duration-micro: 100ms;
  --rdr-duration-fast: 150ms;
  --rdr-duration-medium: 220ms;
  --rdr-duration-chart: 350ms;
  --rdr-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --rdr-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="dark"] {
  /* Dark Mode Distribution Spectrum */
  --rdr-benchmark-track: #1e222b;
  --rdr-benchmark-iqr: rgba(129, 140, 248, 0.26);
  --rdr-benchmark-median: #818cf8;
  --rdr-benchmark-marker: #ffffff;
  --rdr-benchmark-marker-border: #0f172a;
  --rdr-benchmark-top-quartile: rgba(16, 185, 129, 0.16);
  --rdr-benchmark-bottom-quartile: rgba(239, 68, 68, 0.16);

  /* Dark Mode Delta Badges */
  --rdr-benchmark-ahead-text: #34d399;
  --rdr-benchmark-ahead-bg: rgba(5, 150, 105, 0.2);
  --rdr-benchmark-ahead-border: rgba(52, 211, 153, 0.3);

  --rdr-benchmark-behind-text: #f87171;
  --rdr-benchmark-behind-bg: rgba(220, 38, 38, 0.2);
  --rdr-benchmark-behind-border: rgba(248, 113, 113, 0.3);

  --rdr-benchmark-parity-text: #60a5fa;
  --rdr-benchmark-parity-bg: rgba(37, 99, 235, 0.2);
  --rdr-benchmark-parity-border: rgba(96, 165, 250, 0.3);

  /* Dark Mode Sample Badges */
  --rdr-sample-badge-text: #93c5fd;
  --rdr-sample-badge-bg: rgba(30, 58, 138, 0.25);
  --rdr-sample-badge-border: rgba(147, 197, 253, 0.3);

  /* Dark Mode Consent & Kill Switch */
  --rdr-consent-card-bg: #14171d;
  --rdr-consent-card-border: #262b36;
  --rdr-consent-shield: #818cf8;

  --rdr-killswitch-bg: rgba(127, 29, 29, 0.25);
  --rdr-killswitch-border: #f87171;
  --rdr-killswitch-text: #fca5a5;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .rdr-benchmark-spectrum,
  .rdr-benchmark-pin,
  .rdr-benchmark-iqr-band,
  .rdr-benchmark-card,
  .rdr-opportunity-card,
  .rdr-export-drawer,
  .rdr-sample-badge,
  .rdr-spectrum-fill {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* 1. Scorecards Grid */
.rdr-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-5, 1.5rem);
}

.rdr-benchmark-card {
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: var(--rdr-radius, 8px);
  padding: var(--space-4, 1rem);
  display: flex;
  flex-direction: column;
  transition: transform var(--rdr-duration-fast) var(--rdr-ease-out-quad),
              box-shadow var(--rdr-duration-fast) var(--rdr-ease-out-quad);
}

.rdr-benchmark-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.rdr-benchmark-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.rdr-benchmark-metric-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rdr-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rdr-benchmark-metric-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rdr-benchmark-metric-val {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--rdr-text, #0f172a);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.rdr-benchmark-peer-val {
  font-size: 0.8125rem;
  color: var(--rdr-text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 2. Delta Badges */
.rdr-benchmark-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
}

.rdr-benchmark-delta.is-ahead {
  background: var(--rdr-benchmark-ahead-bg);
  color: var(--rdr-benchmark-ahead-text);
  border-color: var(--rdr-benchmark-ahead-border);
}

.rdr-benchmark-delta.is-behind {
  background: var(--rdr-benchmark-behind-bg);
  color: var(--rdr-benchmark-behind-text);
  border-color: var(--rdr-benchmark-behind-border);
}

.rdr-benchmark-delta.is-parity {
  background: var(--rdr-benchmark-parity-bg);
  color: var(--rdr-benchmark-parity-text);
  border-color: var(--rdr-benchmark-parity-border);
}

/* 3. Percentile Distribution Spectrum Bar */
.rdr-benchmark-spectrum {
  position: relative;
  width: 100%;
  height: 36px;
  margin: 0.75rem 0 0.5rem;
}

.rdr-benchmark-track {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 4px;
  background: var(--rdr-benchmark-track);
}

.rdr-benchmark-iqr-band {
  position: absolute;
  top: 14px;
  height: 8px;
  border-radius: 4px;
  background: var(--rdr-benchmark-iqr);
  transition: width var(--rdr-duration-chart) var(--rdr-ease-out-quad),
              left var(--rdr-duration-chart) var(--rdr-ease-out-quad);
}

.rdr-benchmark-median-line {
  position: absolute;
  top: 8px;
  width: 2px;
  height: 20px;
  background: var(--rdr-benchmark-median);
  z-index: 2;
  transform: translateX(-50%);
}

.rdr-benchmark-pin {
  position: absolute;
  top: 4px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left var(--rdr-duration-chart) var(--rdr-ease-bounce);
}

.rdr-benchmark-pin-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rdr-benchmark-marker);
  border: 2px solid var(--rdr-benchmark-marker-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rdr-benchmark-pin-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--rdr-text, #0f172a);
  white-space: nowrap;
  margin-top: 2px;
}

.rdr-benchmark-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--rdr-text-muted, #64748b);
  margin-top: 0.25rem;
}

/* 4. Cohort Metadata Strip */
.rdr-cohort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: 0.625rem 1rem;
  background: var(--rdr-surface-2, #f8fafc);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: var(--rdr-radius, 8px);
  margin-bottom: var(--space-4, 1rem);
  font-size: var(--fs-caption, 0.75rem);
  color: var(--rdr-text-secondary, #475569);
}

.rdr-cohort-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.rdr-cohort-divider {
  color: var(--rdr-border, #cbd5e1);
}

/* 5. Diagnostic Opportunities Grid */
.rdr-opportunity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4, 1rem);
}

.rdr-opportunity-card {
  background: var(--rdr-card, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: var(--rdr-radius, 8px);
  padding: var(--space-4, 1rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--rdr-duration-fast) var(--rdr-ease-out-quad),
              box-shadow var(--rdr-duration-fast) var(--rdr-ease-out-quad);
}

.rdr-opportunity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.rdr-opportunity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.rdr-opportunity-category {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rdr-accent);
}

.rdr-opportunity-impact {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.rdr-opportunity-impact.impact-high {
  background: var(--rdr-negative-light);
  color: var(--rdr-negative);
}

.rdr-opportunity-impact.impact-medium {
  background: var(--rdr-warning-light);
  color: var(--rdr-warning);
}

.rdr-opportunity-impact.impact-low {
  background: var(--rdr-info-light);
  color: var(--rdr-info);
}

.rdr-opportunity-headline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.rdr-opportunity-finding {
  font-size: 0.8125rem;
  color: var(--rdr-text-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.rdr-opportunity-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}

/* 6. Sample / Synthetic Badges */
.rdr-sample-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 600;
  color: var(--rdr-sample-badge-text);
  background: var(--rdr-sample-badge-bg);
  border: 1px solid var(--rdr-sample-badge-border);
}

/* 7. Consent Card */
.rdr-consent-card {
  background: var(--rdr-consent-card-bg);
  border: 1px solid var(--rdr-consent-card-border);
  border-radius: var(--rdr-radius, 8px);
  padding: var(--space-5, 1.5rem);
  margin: var(--space-4, 1rem) 0;
}

.rdr-consent-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.rdr-consent-shield-icon {
  font-size: 1.75rem;
  color: var(--rdr-consent-shield);
  line-height: 1;
}

.rdr-consent-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin-bottom: 0.25rem;
}

.rdr-consent-desc {
  font-size: 0.875rem;
  color: var(--rdr-text-secondary);
  line-height: 1.6;
}

.rdr-consent-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  border-radius: 6px;
  margin-top: 1rem;
}

.rdr-consent-checkbox-wrap input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  cursor: pointer;
  accent-color: var(--rdr-accent);
}

.rdr-consent-checkbox-label {
  font-size: 0.8125rem;
  color: var(--rdr-text);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

/* 8. Emergency Kill Switch Container */
.rdr-killswitch-panel {
  background: var(--rdr-killswitch-bg);
  border: 2px solid var(--rdr-killswitch-border);
  border-radius: var(--rdr-radius, 8px);
  padding: var(--space-4, 1rem);
  color: var(--rdr-killswitch-text);
  margin-bottom: var(--space-5, 1.5rem);
}

.rdr-killswitch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.rdr-killswitch-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rdr-killswitch-btn {
  background: var(--rdr-danger-badge, #ef4444);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity var(--rdr-duration-fast);
}

.rdr-killswitch-btn:hover {
  opacity: 0.9;
}

.rdr-killswitch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 9. Safe Export Drawer */
.rdr-export-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rdr-duration-medium) var(--rdr-ease-out-quad),
              visibility var(--rdr-duration-medium);
}

.rdr-export-overlay.open {
  opacity: 1;
  visibility: visible;
}

.rdr-export-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--rdr-card, #ffffff);
  border-left: 1px solid var(--rdr-border, #e2e8f0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 1055;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--rdr-duration-medium) var(--rdr-ease-out-quad);
}

.rdr-export-drawer.open {
  transform: translateX(0);
}

.rdr-export-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rdr-border);
}

.rdr-export-drawer-body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.rdr-export-card {
  border: 1px solid var(--rdr-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--rdr-surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 10. Industry Trends Chart and Visualizations */
.rdr-trend-chart-box {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.rdr-trend-svg-wrap {
  width: 100%;
  height: 240px;
  position: relative;
}

.rdr-trend-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rdr-trend-grid-line {
  stroke: var(--rdr-border);
  stroke-dasharray: 3 3;
}

.rdr-trend-line-peer {
  stroke: var(--rdr-accent);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

.rdr-trend-line-brand {
  stroke: var(--rdr-text);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 5 4;
}

.rdr-trend-event-pin {
  cursor: pointer;
  transition: transform var(--rdr-duration-fast);
}

.rdr-trend-event-pin:hover {
  transform: scale(1.25);
}

/* 11. Empty States */
.rdr-empty-state-box {
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  max-width: 640px;
  margin: 2rem auto;
}

.rdr-empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rdr-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--rdr-accent);
  margin-bottom: 1.25rem;
}

.rdr-empty-state-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin-bottom: 0.5rem;
}

.rdr-empty-state-desc {
  font-size: 0.875rem;
  color: var(--rdr-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.rdr-empty-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--rdr-surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
}

.rdr-empty-progress-fill {
  height: 100%;
  background: var(--rdr-accent);
  border-radius: 4px;
  transition: width var(--rdr-duration-chart) var(--rdr-ease-out-quad);
}

/* 12. Public Screen Hero & Category Directory */
.rdr-public-hero {
  padding: 4rem 1.5rem 2.5rem;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--rdr-accent-light) 0%, transparent 60%);
}

.rdr-public-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rdr-text);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.rdr-public-subtitle {
  font-size: 1.125rem;
  color: var(--rdr-text-secondary);
  max-width: 720px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.rdr-vertical-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.rdr-vertical-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--rdr-border);
  background: var(--rdr-card);
  color: var(--rdr-text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--rdr-duration-fast);
}

.rdr-vertical-pill:hover,
.rdr-vertical-pill.active {
  border-color: var(--rdr-accent);
  background: var(--rdr-accent);
  color: #ffffff;
}

.rdr-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.rdr-trust-card {
  padding: 1.5rem;
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius);
  text-align: left;
}

.rdr-trust-icon {
  font-size: 1.5rem;
  color: var(--rdr-accent);
  margin-bottom: 0.75rem;
}

.rdr-trust-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rdr-text);
  margin-bottom: 0.5rem;
}

.rdr-trust-desc {
  font-size: 0.8125rem;
  color: var(--rdr-text-secondary);
  line-height: 1.5;
}

/* 13. Percentage Positioning & Width Utilities for Spectrum Bars (Zero-Inline-Style Ratchet Compliant) */
.u-left-0pct { left: 0%; }
.u-left-5pct { left: 5%; }
.u-left-10pct { left: 10%; }
.u-left-15pct { left: 15%; }
.u-left-20pct { left: 20%; }
.u-left-25pct { left: 25%; }
.u-left-30pct { left: 30%; }
.u-left-33pct { left: 33%; }
.u-left-35pct { left: 35%; }
.u-left-40pct { left: 40%; }
.u-left-45pct { left: 45%; }
.u-left-50pct { left: 50%; }
.u-left-55pct { left: 55%; }
.u-left-60pct { left: 60%; }
.u-left-65pct { left: 65%; }
.u-left-66pct { left: 66%; }
.u-left-68pct { left: 68%; }
.u-left-70pct { left: 70%; }
.u-left-75pct { left: 75%; }
.u-left-80pct { left: 80%; }
.u-left-85pct { left: 85%; }
.u-left-90pct { left: 90%; }
.u-left-95pct { left: 95%; }
.u-left-100pct { left: 100%; }

.u-width-0pct { width: 0%; }
.u-width-5pct { width: 5%; }
.u-width-10pct { width: 10%; }
.u-width-15pct { width: 15%; }
.u-width-20pct { width: 20%; }
.u-width-25pct { width: 25%; }
.u-width-30pct { width: 30%; }
.u-width-33pct { width: 33%; }
.u-width-35pct { width: 35%; }
.u-width-40pct { width: 40%; }
.u-width-45pct { width: 45%; }
.u-width-50pct { width: 50%; }
.u-width-55pct { width: 55%; }
.u-width-60pct { width: 60%; }
.u-width-65pct { width: 65%; }
.u-width-66pct { width: 66%; }
.u-width-68pct { width: 68%; }
.u-width-70pct { width: 70%; }
.u-width-75pct { width: 75%; }
.u-width-80pct { width: 80%; }
.u-width-85pct { width: 85%; }
.u-width-90pct { width: 90%; }
.u-width-95pct { width: 95%; }
.u-width-100pct { width: 100%; }

/* ── Industry Intelligence: Funnel & Creative Benchmarking ── */
.rdr-funnel-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rdr-funnel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.rdr-funnel-card {
  background: var(--rdr-surface);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-lg, 12px);
  padding: 1.25rem;
  box-shadow: var(--rdr-shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.rdr-funnel-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rdr-border);
}
.rdr-funnel-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--rdr-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rdr-funnel-stage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rdr-funnel-stage-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rdr-radius-md, 8px);
  background: var(--rdr-surface-hover, rgba(0,0,0,0.02));
  border: 1px solid var(--rdr-border);
}
.rdr-funnel-stage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.rdr-funnel-stage-name {
  font-weight: 600;
  color: var(--rdr-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rdr-funnel-stage-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rdr-text);
}
.rdr-funnel-bar-track {
  width: 100%;
  height: 8px;
  background: var(--rdr-border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.rdr-funnel-bar-fill {
  height: 100%;
  background: var(--rdr-accent, #6366f1);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.rdr-funnel-stage-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--rdr-text-muted);
}
.rdr-funnel-rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.rdr-funnel-rate-ahead {
  color: #166534;
  background: #dcfce7;
}
[data-theme="dark"] .rdr-funnel-rate-ahead {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
}
.rdr-funnel-rate-behind {
  color: #991b1b;
  background: #fee2e2;
}
[data-theme="dark"] .rdr-funnel-rate-behind {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
}
.rdr-funnel-rate-onpar {
  color: var(--rdr-text-muted);
  background: var(--rdr-border);
}
.rdr-creative-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--rdr-surface);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-lg, 12px);
  margin-bottom: 1.25rem;
}
.rdr-creative-filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rdr-creative-filter-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rdr-text-muted);
  white-space: nowrap;
}
.rdr-creative-table-wrap {
  background: var(--rdr-surface);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-lg, 12px);
  overflow-x: auto;
  box-shadow: var(--rdr-shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.rdr-creative-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.rdr-creative-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--rdr-text-muted);
  background: var(--rdr-surface-hover, rgba(0,0,0,0.02));
  border-bottom: 1px solid var(--rdr-border);
  white-space: nowrap;
}
.rdr-creative-table th.is-number,
.rdr-creative-table td.is-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rdr-creative-table td {
  padding: 0.875rem 1rem;
  color: var(--rdr-text);
  border-bottom: 1px solid var(--rdr-border);
  vertical-align: middle;
}
.rdr-creative-table tr:last-child td {
  border-bottom: none;
}
.rdr-creative-table tr:hover td {
  background: var(--rdr-surface-hover, rgba(0,0,0,0.02));
}
.rdr-angle-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--rdr-primary-50, rgba(99, 102, 241, 0.08));
  color: var(--rdr-accent, #6366f1);
  border: 1px solid var(--rdr-primary-100, rgba(99, 102, 241, 0.2));
}
.rdr-badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--rdr-border);
  color: var(--rdr-text-muted);
}


/* ============================================
   LAYOUT SAFETY (2026-10-22)
   Controls must never be pushed out of their card or under a neighbour (a Connected Accounts
   card hid its Disconnect button behind the next card). Checked by scripts/ui/layout-audit.mjs.
   ============================================ */
.u-min-w-0 { min-width: 0; }

/* Connected Accounts card actions: primary row wraps; "Move to" row lets the select shrink. */
.rdr-acc-actions { display: flex; flex-direction: column; gap: 10px; }
.rdr-acc-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rdr-acc-actions-row > form { margin: 0; }
.rdr-acc-move { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.rdr-acc-move-label { margin: 0; font-size: 12px; color: var(--rdr-text-muted); white-space: nowrap; }
.rdr-acc-move-select { flex: 1 1 auto; min-width: 0; width: auto; max-width: 100%; text-overflow: ellipsis; }
/* Latest date-range import on an account card: status text, then Retry when it stopped. */
.rdr-acc-import { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; overflow-wrap: anywhere; }
.rdr-acc-import > form { margin: 0; }

/* Command palette trigger: never wrap its label onto three lines in a crowded top bar. */
.rdr-cmdk-trigger { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1199.98px) {
  .rdr-cmdk-trigger span:not(.rdr-cmdk-kbd) { display: none; }
  .rdr-cmdk-kbd { display: none; }
}

/* ============================================
   AUTH PAGES v3 (2026-11-04): Perfectly balanced 50/50 split layout.
   Left brand panel with compelling SaaS copy + micro-feature cards.
   Right form elevated inside a crisp, centered card.
   ============================================ */
.adv-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--rdr-bg);
}
@media (min-width: 992px) {
  .adv-auth {
    grid-template-columns: 1fr 1fr;
  }
}

.adv-auth-brand {
  display: none;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 64px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
              linear-gradient(150deg, #3730a3 0%, #4338ca 35%, #6366f1 75%, #7c3aed 100%);
}
@media (min-width: 992px) {
  .adv-auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.adv-auth-brand::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,.06);
  pointer-events: none;
}
.adv-auth-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.adv-auth-brand-logo img {
  background: rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 5px;
}
.adv-auth-brand-logo:hover { color: #fff; }

.adv-auth-brand-copy {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: auto 0;
  padding: 32px 0;
}
.adv-auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
.adv-auth-brand-copy h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.8px;
  margin: 0 0 16px;
  color: #fff;
}
.adv-auth-brand-copy > p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  margin: 0 0 24px;
}
.adv-auth-features {
  display: grid;
  gap: 12px;
}
.adv-auth-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}
.adv-auth-feature-icon {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,.16);
  font-size: 16px;
  color: #fff;
}
.adv-auth-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.adv-auth-feature-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.adv-auth-feature-text span {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.84);
}
.adv-auth-brand-foot {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
}

.adv-auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-width: 0;
  background: var(--rdr-bg);
}
.adv-auth-mobile-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  text-decoration: none;
  color: var(--rdr-text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.adv-auth-mobile-logo:hover { color: var(--rdr-text); }
@media (min-width: 992px) { .adv-auth-mobile-logo { display: none; } }

.adv-auth-panel {
  width: 100%;
  max-width: 460px;
  background: var(--rdr-card);
  border: 1px solid var(--rdr-border);
  border-radius: var(--rdr-radius-lg);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 0 20px 40px -15px rgba(99, 102, 241, 0.05);
  padding: 40px 40px 34px;
  min-width: 0;
}
@media (max-width: 480px) {
  .adv-auth-panel {
    padding: 28px 20px 24px;
    border-radius: var(--rdr-radius);
  }
}
.adv-auth-footer-actions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rdr-border);
}
.adv-auth-legal {
  margin: 24px 0 0;
  font-size: 12.5px;
  color: var(--rdr-text-muted);
  text-align: center;
}
.adv-auth-legal a { color: inherit; text-decoration: none; }
.adv-auth-legal a:hover { color: var(--rdr-text); text-decoration: underline; }

.adv-auth-head { margin-bottom: 26px; }
.adv-auth-title { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; margin: 0 0 8px; color: var(--rdr-text); }
.adv-auth-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--rdr-text-muted); }
.adv-auth-form { display: grid; gap: 18px; }
.adv-auth-alert:empty, .adv-auth-alert.validation-summary-valid { display: none; }
.adv-auth-alert { border-radius: var(--rdr-radius-sm); padding: 10px 14px; font-size: 13.5px; background: var(--rdr-negative-light); border: 1px solid var(--rdr-negative-light); color: var(--rdr-negative); }
.adv-auth-alert ul { margin: 0; padding-left: 18px; }
.adv-field { display: grid; gap: 7px; min-width: 0; }
.adv-label { font-size: 13.5px; font-weight: 600; color: var(--rdr-text-secondary); margin: 0; }
.adv-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.adv-link-sm { font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.adv-input { height: 46px; font-size: 15px; width: 100%; }
.adv-field-error { font-size: 12.5px; color: var(--rdr-negative); }
.adv-field-error:empty { display: none; }
.adv-password { position: relative; }
.adv-password .adv-input { padding-right: 46px; }
.adv-password-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--rdr-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.adv-password-toggle:hover, .adv-password-toggle:focus-visible { background: var(--rdr-surface-hover); color: var(--rdr-text); }
.adv-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--rdr-text-secondary); margin: 0; cursor: pointer; }
.adv-check .form-check-input { flex: 0 0 auto; margin: 2px 0 0; width: 17px; height: 17px; }
.adv-check span { min-width: 0; }
.adv-consents { display: grid; gap: 10px; }
.adv-check-optional { padding: 12px 14px; border-radius: var(--rdr-radius-sm); background: var(--rdr-surface-2); border: 1px solid var(--rdr-border); font-size: 12.5px; color: var(--rdr-text-muted); }
.adv-auth-submit { width: 100%; height: 46px; font-size: 15px; font-weight: 600; justify-content: center; }
.adv-auth-next { margin: -6px 0 0; font-size: 12.5px; color: var(--rdr-text-muted); display: flex; gap: 8px; align-items: center; }
.adv-auth-alt { margin: 0 0 6px; font-size: 14px; color: var(--rdr-text-muted); text-align: center; }
.adv-auth-alt a { font-weight: 600; text-decoration: none; }
.adv-auth-fine { margin: 0; font-size: 12.5px; color: var(--rdr-text-muted); text-align: center; }
.adv-auth-panel a:not(.rdr-btn) { color: var(--rdr-accent-hover); }
.adv-auth-panel a:not(.rdr-btn):hover { text-decoration: underline; }

/* Shared headers and toolbars wrap instead of pushing their buttons off-screen (layout audit 2026-10-22:
   "New Workspace", "New Rule", "Upload customer list", Analytics "Excel"/"Screenshot" were unreachable). */
.rdr-page-header { flex-wrap: wrap; row-gap: 12px; }
.rdr-page-header > :first-child { min-width: 0; flex: 1 1 240px; }
.ins-card-header { flex-wrap: wrap; gap: 8px 12px; }
.ins-table-filter-bar { flex-wrap: wrap; min-width: 0; }
@media (max-width: 575.98px) {
  .rdr-page-header > * { max-width: 100%; }
  select[class*="u-min-width-"], input[class*="u-min-width-"],
  select[class*="u-width-"], input[class*="u-width-"] { min-width: 0 !important; max-width: 100%; }
  .ins-select, .form-select, .form-control, .rdr-input { max-width: 100%; }
}
.ins-table-controls { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ins-toolbar-left { flex-wrap: wrap; min-width: 0; }

/* Trial chip in the top bar (SUB-01): every page shows days left; warning colour in the last two days. */
.adv-trial-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; text-decoration: none;
  background: var(--rdr-accent-light); color: var(--rdr-accent-hover); border: 1px solid var(--rdr-accent-ring);
}
.adv-trial-chip:hover { color: var(--rdr-accent-hover); text-decoration: none; filter: brightness(0.97); }
.adv-trial-chip.is-ending { background: var(--rdr-warning-light); color: var(--rdr-warning-text); border-color: var(--rdr-warning); }
.adv-trial-chip.is-ended { background: var(--rdr-surface-2); color: var(--rdr-text-muted); border-color: var(--rdr-border); }
@media (max-width: 575.98px) { .adv-trial-chip span { display: none; } .adv-trial-chip { padding: 4px 8px; } }
/* The user pill shows the full e-mail: cap it so extra top-bar chips (trial) can't push the menu off-screen. */
@media (min-width: 992px) {
  .adv-user-pill .adv-user-email.d-lg-inline { display: inline-block !important; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
}
/* Below 1500px the top bar has no room for every label once a trial chip shows (user menu was pushed off-screen):
   the search box and the Meta Accounts chip keep their icons and drop their text. */
@media (max-width: 1499.98px) {
  .rdr-cmdk-trigger span:not(.rdr-cmdk-kbd), .rdr-cmdk-kbd { display: none; }
  .adv-meta-accounts-chip .adv-workspace-name { display: none; }
}

/* ?embed=1: a page shown inside another page's overlay (Campaigns opens the Creatives panel this way) - no app chrome */
.rdr-embed .rdr-sidebar, .rdr-embed .rdr-sidebar-backdrop, .rdr-embed .rdr-topbar, .rdr-embed .rdr-secondary-tabs, .rdr-embed .rdr-bottom-nav { display: none !important; }
.rdr-embed .rdr-main { margin-left: 0 !important; max-width: 100vw !important; }

/* Campaigns › a row's creative: the Creatives page (embed) in a full-screen frame */
.camp-creative-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--rdr-bg); display: flex; flex-direction: column; }
.camp-creative-overlay-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rdr-border); background: var(--rdr-surface); }
.camp-creative-overlay-bar .camp-creative-overlay-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-creative-overlay iframe { flex: 1; width: 100%; border: 0; }

/* Creatives (both tabs): Combined | Separate */
.crv-combine-switch { display: inline-flex; border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-sm); overflow: hidden; }
.crv-combine-switch button { border: 0; background: var(--rdr-surface); color: var(--rdr-text-muted); font-size: 12px; padding: 4px 10px; }
.crv-combine-switch button + button { border-left: 1px solid var(--rdr-border); }
.crv-combine-switch button.active { background: var(--rdr-accent-light); color: var(--rdr-accent); font-weight: 600; }

/* ── Tracking engine settings panel (_TrackingEngine.cshtml) ── */
.trk { overflow-x: clip; } /* the Bootstrap row gutter must not widen the page */
.trk-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.trk-pill, .trk-cover { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--rdr-radius-full); font-size: 12px; font-weight: 600; border: 1px solid var(--rdr-border); background: var(--rdr-surface-subtle); color: var(--rdr-text-secondary); }
.trk-pill.is-on, .trk-cover.is-on { background: var(--rdr-success-bg); color: var(--rdr-success-text); border-color: transparent; }
.trk-pill.is-warn, .trk-cover.is-warn { background: var(--rdr-warning-bg); color: var(--rdr-warning-text); border-color: transparent; }
.trk-pill.is-off, .trk-cover.is-off { background: var(--rdr-surface-subtle); color: var(--rdr-text-muted); }
.trk-cover.is-off { background: var(--rdr-danger-bg); color: var(--rdr-danger-text); border-color: transparent; }
.trk-body { padding: 16px; }
.trk-body .rdr-label { margin-top: 12px; }
.trk-body .rdr-label:first-child { margin-top: 0; }
.trk-hint { font-size: 12px; color: var(--rdr-text-muted); margin: 4px 0 0; }
.trk-optional { font-weight: 400; font-size: 11px; color: var(--rdr-text-muted); }
.trk-switch { margin-top: 12px; font-size: 13px; }
.trk-inline { display: flex; gap: 8px; align-items: center; }
.trk-inline > .rdr-input, .trk-inline > .form-select { flex: 1 1 auto; min-width: 0; }
.trk-narrow { max-width: 80px; }
.trk-link { background: none; border: 0; padding: 0; color: var(--rdr-accent); font-size: inherit; text-decoration: underline; cursor: pointer; }
.trk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.trk-msg { margin-top: 10px; font-size: 13px; }
.trk-msg.is-ok { color: var(--rdr-success-text); }
.trk-msg.is-bad, .trk-error { color: var(--rdr-danger-text); font-size: 13px; }
.trk-steps { font-size: 13px; color: var(--rdr-text-secondary); padding-left: 18px; margin-bottom: 12px; }
.trk-code { max-height: 360px; overflow: auto; margin: 0; padding: 12px; border-radius: var(--rdr-radius-sm); background: var(--rdr-surface-2); border: 1px solid var(--rdr-border); font-size: 11.5px; line-height: 1.5; white-space: pre; }
.trk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 12px 0; }
.trk-labels { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.trk-labels > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trk-label-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--rdr-text-muted); margin-right: 4px; }
.trk-table { margin-top: 12px; max-height: 360px; overflow: auto; }
.trk-table thead th { position: sticky; top: 0; background: var(--rdr-card); z-index: 1; }
.trk-sub { font-size: 11px; color: var(--rdr-text-muted); word-break: break-all; max-width: 260px; }
@media (max-width: 575.98px) {
    .trk-inline { flex-wrap: wrap; }
    .trk-code { max-height: 260px; }
}

/* ── Finance & General Ledger (InsiderFinance/Index.cshtml) ─────────────────────────────
   Its colours as tokens (dark mode included) and its former inline styles as u-* classes. */
:root {
  /* UX-06 option C (one visual language): Finance uses the shared palette. These names stay so the page's
     classes keep working; each one points at the shared token for its role - text on a tint uses -strong,
     fills the base colour, tints -light, borders -border, Finance's teal is Advizer's accent. */
  --rdr-fin-green: var(--rdr-positive-strong);
  --rdr-fin-green-deep: var(--rdr-positive-strong);
  --rdr-fin-green-bg: var(--rdr-positive-light);
  --rdr-fin-green-border: var(--rdr-positive-border);
  --rdr-fin-green-bg-soft: var(--rdr-success-bg);
  --rdr-fin-teal: var(--rdr-accent);
  --rdr-fin-teal-deep: var(--rdr-accent-hover);
  --rdr-fin-amber: var(--rdr-warning-strong);
  --rdr-fin-amber-deep: var(--rdr-warning-strong);
  --rdr-fin-amber-bg: var(--rdr-warning-light);
  --rdr-fin-amber-border: var(--rdr-warning-border);
  --rdr-fin-red-deep: var(--rdr-negative-strong);
  --rdr-fin-red-bg: var(--rdr-negative-light);
  --rdr-fin-red-border: var(--rdr-negative-border);
  --rdr-fin-red-soft: color-mix(in srgb, var(--rdr-negative) 60%, var(--rdr-card));
  --rdr-fin-rose: var(--rdr-negative);
  --rdr-fin-orange: var(--rdr-warning);
  --rdr-fin-sky: var(--rdr-info);
  --rdr-fin-sky-deep: var(--rdr-info-strong);
  --rdr-fin-sky-bg: var(--rdr-info-light);
  --rdr-fin-sky-border: var(--rdr-info-border);
  --rdr-fin-slate: var(--rdr-text-secondary);
  --rdr-fin-meta: #0081fb; /* Meta's brand blue */
  --rdr-fin-on-accent: #ffffff;
}
:root[data-theme="dark"] {
  /* The shared tokens switch with the theme; only this one differs (the dark accent-hover is darker than the accent). */
  --rdr-fin-teal-deep: var(--rdr-accent);
}
.u-background-danger-badge.u-background-danger-badge.u-background-danger-badge.u-background-danger-badge { background: var(--rdr-danger-badge); }
.u-background-fin-amber-bg.u-background-fin-amber-bg.u-background-fin-amber-bg.u-background-fin-amber-bg { background: var(--rdr-fin-amber-bg); }
.u-background-fin-green-bg.u-background-fin-green-bg.u-background-fin-green-bg.u-background-fin-green-bg { background: var(--rdr-fin-green-bg); }
.u-background-fin-green.u-background-fin-green.u-background-fin-green.u-background-fin-green { background: var(--rdr-positive); }
.u-background-fin-orange.u-background-fin-orange.u-background-fin-orange.u-background-fin-orange { background: var(--rdr-fin-orange); }
.u-background-fin-red-bg.u-background-fin-red-bg.u-background-fin-red-bg.u-background-fin-red-bg { background: var(--rdr-fin-red-bg); }
.u-background-fin-red-soft.u-background-fin-red-soft.u-background-fin-red-soft.u-background-fin-red-soft { background: var(--rdr-fin-red-soft); }
.u-background-fin-rose.u-background-fin-rose.u-background-fin-rose.u-background-fin-rose { background: var(--rdr-fin-rose); }
.u-background-fin-teal.u-background-fin-teal.u-background-fin-teal.u-background-fin-teal { background: var(--rdr-fin-teal); }
.u-background-negative.u-background-negative.u-background-negative.u-background-negative { background: var(--rdr-negative); }
.u-background-track.u-background-track.u-background-track.u-background-track { background: var(--rdr-surface-subtle); }
.u-background-accent-tint-8.u-background-accent-tint-8.u-background-accent-tint-8.u-background-accent-tint-8 { background: color-mix(in srgb, var(--rdr-accent) 8%, transparent); }
.u-background-accent-tint-10.u-background-accent-tint-10.u-background-accent-tint-10.u-background-accent-tint-10 { background: color-mix(in srgb, var(--rdr-accent) 10%, transparent); }
.u-background-success-badge.u-background-success-badge.u-background-success-badge.u-background-success-badge { background: var(--rdr-success-badge); }
.u-border-bottom-2px-solid-border.u-border-bottom-2px-solid-border.u-border-bottom-2px-solid-border.u-border-bottom-2px-solid-border { border-bottom: 2px solid var(--rdr-border); }
.u-border-color-fin-teal.u-border-color-fin-teal.u-border-color-fin-teal.u-border-color-fin-teal { border-color: var(--rdr-fin-teal); }
.u-border-left-1px-solid-border.u-border-left-1px-solid-border.u-border-left-1px-solid-border.u-border-left-1px-solid-border { border-left: 1px solid var(--rdr-border); }
.u-border-left-4px-solid-warning-badge.u-border-left-4px-solid-warning-badge.u-border-left-4px-solid-warning-badge.u-border-left-4px-solid-warning-badge { border-left: 4px solid var(--rdr-warning-badge); }
.u-border-radius-3px-3px-0-0.u-border-radius-3px-3px-0-0.u-border-radius-3px-3px-0-0.u-border-radius-3px-3px-0-0 { border-radius: 3px 3px 0 0; }
.u-border-radius-6px-6px-0-0.u-border-radius-6px-6px-0-0.u-border-radius-6px-6px-0-0.u-border-radius-6px-6px-0-0 { border-radius: 6px 6px 0 0; }
.u-border-radius-999px.u-border-radius-999px.u-border-radius-999px.u-border-radius-999px { border-radius: 999px; }
.u-border-top-2px-solid-border.u-border-top-2px-solid-border.u-border-top-2px-solid-border.u-border-top-2px-solid-border { border-top: 2px solid var(--rdr-border); }
.u-color-fin-amber-deep.u-color-fin-amber-deep.u-color-fin-amber-deep.u-color-fin-amber-deep { color: var(--rdr-fin-amber-deep); }
.u-color-fin-amber.u-color-fin-amber.u-color-fin-amber.u-color-fin-amber { color: var(--rdr-fin-amber); }
.u-color-fin-green.u-color-fin-green.u-color-fin-green.u-color-fin-green { color: var(--rdr-fin-green); }
.u-color-fin-meta.u-color-fin-meta.u-color-fin-meta.u-color-fin-meta { color: var(--rdr-fin-meta); }
.u-color-fin-on-accent.u-color-fin-on-accent.u-color-fin-on-accent.u-color-fin-on-accent { color: var(--rdr-fin-on-accent); }
.u-color-fin-red-deep.u-color-fin-red-deep.u-color-fin-red-deep.u-color-fin-red-deep { color: var(--rdr-fin-red-deep); }
.u-color-fin-sky.u-color-fin-sky.u-color-fin-sky.u-color-fin-sky { color: var(--rdr-fin-sky); }
.u-color-fin-teal-deep.u-color-fin-teal-deep.u-color-fin-teal-deep.u-color-fin-teal-deep { color: var(--rdr-fin-teal-deep); }
.u-color-fin-teal.u-color-fin-teal.u-color-fin-teal.u-color-fin-teal { color: var(--rdr-fin-teal); }
.u-color-primary-500.u-color-primary-500.u-color-primary-500.u-color-primary-500 { color: var(--rdr-primary-500); }
.u-color-warning-badge.u-color-warning-badge.u-color-warning-badge.u-color-warning-badge { color: var(--rdr-warning-badge); }
.u-color-white.u-color-white.u-color-white.u-color-white { color: white; }
.u-display-inline-flex.u-display-inline-flex.u-display-inline-flex.u-display-inline-flex { display: inline-flex; }
.u-display-none.u-display-none.u-display-none.u-display-none { display: none; }
.u-fin-mix-1.u-fin-mix-1.u-fin-mix-1.u-fin-mix-1 { margin-bottom: 1.25rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, color-mix(in srgb, var(--rdr-accent) 8%, transparent) 0%, color-mix(in srgb, var(--rdr-info) 8%, transparent) 100%); border: 1px solid color-mix(in srgb, var(--rdr-accent) 25%, transparent); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.u-fin-mix-10.u-fin-mix-10.u-fin-mix-10.u-fin-mix-10 { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.u-fin-mix-11.u-fin-mix-11.u-fin-mix-11.u-fin-mix-11 { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.u-fin-mix-12.u-fin-mix-12.u-fin-mix-12.u-fin-mix-12 { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.u-fin-mix-13.u-fin-mix-13.u-fin-mix-13.u-fin-mix-13 { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.u-fin-mix-14.u-fin-mix-14.u-fin-mix-14.u-fin-mix-14 { margin-bottom: 1.5rem; padding: 1.25rem; background: var(--rdr-surface-2); border: 1px solid var(--rdr-border); border-radius: 12px; }
.u-fin-mix-15.u-fin-mix-15.u-fin-mix-15.u-fin-mix-15 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; }
.u-fin-mix-16.u-fin-mix-16.u-fin-mix-16.u-fin-mix-16 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; }
.u-fin-mix-17.u-fin-mix-17.u-fin-mix-17.u-fin-mix-17 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; }
.u-fin-mix-18.u-fin-mix-18.u-fin-mix-18.u-fin-mix-18 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; }
.u-fin-mix-19.u-fin-mix-19.u-fin-mix-19.u-fin-mix-19 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; }
.u-fin-mix-2.u-fin-mix-2.u-fin-mix-2.u-fin-mix-2 { margin: 1rem 0; padding: .85rem 1.25rem; background: var(--rdr-surface-2); border: 1px solid var(--rdr-border); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.u-fin-mix-20.u-fin-mix-20.u-fin-mix-20.u-fin-mix-20 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem; }
.u-fin-mix-21.u-fin-mix-21.u-fin-mix-21.u-fin-mix-21 { flex: 1; min-width: 55px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.u-fin-mix-22.u-fin-mix-22.u-fin-mix-22.u-fin-mix-22 { background: var(--rdr-card); border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1rem; }
.u-fin-mix-23.u-fin-mix-23.u-fin-mix-23.u-fin-mix-23 { background: var(--rdr-surface-2); padding: .85rem; border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--rdr-border); }
.u-fin-mix-24.u-fin-mix-24.u-fin-mix-24.u-fin-mix-24 { background: var(--rdr-warning-bg); border: 1px solid var(--rdr-fin-amber-border); padding: .85rem; border-radius: 10px; margin-bottom: 12px; }
.u-fin-mix-25.u-fin-mix-25.u-fin-mix-25.u-fin-mix-25 { border: 2px dashed var(--rdr-fin-teal); border-radius: 8px; background: color-mix(in srgb, var(--rdr-accent) 4%, transparent); text-align: center; }
.u-fin-mix-3.u-fin-mix-3.u-fin-mix-3.u-fin-mix-3 { margin-top: 1.25rem; padding: .85rem 1.25rem; background: var(--rdr-surface-2); border: 1px solid var(--rdr-border); border-radius: 8px; font-size: .84rem; }
.u-fin-mix-4.u-fin-mix-4.u-fin-mix-4.u-fin-mix-4 { border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1.25rem; }
.u-fin-mix-5.u-fin-mix-5.u-fin-mix-5.u-fin-mix-5 { border: 1px solid var(--rdr-border); border-radius: 10px; padding: 1.25rem; }
.u-fin-mix-6.u-fin-mix-6.u-fin-mix-6.u-fin-mix-6 { display: inline-flex; border: 1px solid var(--rdr-border); border-radius: 8px; overflow: hidden; font-size: .78rem; }
.u-fin-mix-7.u-fin-mix-7.u-fin-mix-7.u-fin-mix-7 { margin-bottom: 1.5rem; padding: 1.1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--rdr-accent) 6%, transparent), color-mix(in srgb, var(--rdr-info) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--rdr-accent) 20%, transparent); border-radius: 10px; }
.u-fin-mix-8.u-fin-mix-8.u-fin-mix-8.u-fin-mix-8 { margin-bottom: 1.5rem; padding: 1.25rem; background: var(--rdr-surface-2); border: 1px solid var(--rdr-border); border-radius: 10px; }
.u-fin-mix-9.u-fin-mix-9.u-fin-mix-9.u-fin-mix-9 { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.u-font-size-1_05rem.u-font-size-1_05rem.u-font-size-1_05rem.u-font-size-1_05rem { font-size: 1.05rem; }
.u-font-size-1_25rem.u-font-size-1_25rem.u-font-size-1_25rem.u-font-size-1_25rem { font-size: 1.25rem; }
.u-font-size-1_2rem.u-font-size-1_2rem.u-font-size-1_2rem.u-font-size-1_2rem { font-size: 1.2rem; }
.u-font-size-1_35rem.u-font-size-1_35rem.u-font-size-1_35rem.u-font-size-1_35rem { font-size: 1.35rem; }
.u-font-size-1_3rem.u-font-size-1_3rem.u-font-size-1_3rem.u-font-size-1_3rem { font-size: 1.3rem; }
.u-font-size-1rem.u-font-size-1rem.u-font-size-1rem.u-font-size-1rem { font-size: 1rem; }
.u-font-size-2rem.u-font-size-2rem.u-font-size-2rem.u-font-size-2rem { font-size: 2rem; }
.u-font-size-_65rem.u-font-size-_65rem.u-font-size-_65rem.u-font-size-_65rem { font-size: .65rem; }
.u-font-size-_68rem.u-font-size-_68rem.u-font-size-_68rem.u-font-size-_68rem { font-size: .68rem; }
.u-font-size-_74rem.u-font-size-_74rem.u-font-size-_74rem.u-font-size-_74rem { font-size: .74rem; }
.u-font-size-_76rem.u-font-size-_76rem.u-font-size-_76rem.u-font-size-_76rem { font-size: .76rem; }
.u-font-size-_83rem.u-font-size-_83rem.u-font-size-_83rem.u-font-size-_83rem { font-size: .83rem; }
.u-font-size-_84rem.u-font-size-_84rem.u-font-size-_84rem.u-font-size-_84rem { font-size: .84rem; }
.u-font-size-_88rem.u-font-size-_88rem.u-font-size-_88rem.u-font-size-_88rem { font-size: .88rem; }
.u-font-size-_92rem.u-font-size-_92rem.u-font-size-_92rem.u-font-size-_92rem { font-size: .92rem; }
.u-font-weight-normal.u-font-weight-normal.u-font-weight-normal.u-font-weight-normal { font-weight: normal; }
.u-gap-1_25rem.u-gap-1_25rem.u-gap-1_25rem.u-gap-1_25rem { gap: 1.25rem; }
.u-gap-1rem.u-gap-1rem.u-gap-1rem.u-gap-1rem { gap: 1rem; }
.u-gap-2px.u-gap-2px.u-gap-2px.u-gap-2px { gap: 2px; }
.u-gap-5px.u-gap-5px.u-gap-5px.u-gap-5px { gap: 5px; }
.u-grid-template-columns-1fr-1fr.u-grid-template-columns-1fr-1fr.u-grid-template-columns-1fr-1fr.u-grid-template-columns-1fr-1fr { grid-template-columns: 1fr 1fr; }
.u-grid-template-columns-repeatauto-fit-minmax220px-1fr.u-grid-template-columns-repeatauto-fit-minmax220px-1fr.u-grid-template-columns-repeatauto-fit-minmax220px-1fr.u-grid-template-columns-repeatauto-fit-minmax220px-1fr { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.u-height-25px.u-height-25px.u-height-25px.u-height-25px { height: 25px; }
.u-height-42px.u-height-42px.u-height-42px.u-height-42px { height: 42px; }
.u-height-50px.u-height-50px.u-height-50px.u-height-50px { height: 50px; }
.u-height-60px.u-height-60px.u-height-60px.u-height-60px { height: 60px; }
.u-height-6px.u-height-6px.u-height-6px.u-height-6px { height: 6px; }
.u-height-95px.u-height-95px.u-height-95px.u-height-95px { height: 95px; }
.u-letter-spacing-_04em.u-letter-spacing-_04em.u-letter-spacing-_04em.u-letter-spacing-_04em { letter-spacing: .04em; }
.u-margin-1_5rem-0-1rem.u-margin-1_5rem-0-1rem.u-margin-1_5rem-0-1rem.u-margin-1_5rem-0-1rem { margin: 1.5rem 0 1rem; }
.u-margin-1rem-0-_5rem.u-margin-1rem-0-_5rem.u-margin-1rem-0-_5rem.u-margin-1rem-0-_5rem { margin: 1rem 0 .5rem; }
.u-margin-_4rem-0.u-margin-_4rem-0.u-margin-_4rem-0.u-margin-_4rem-0 { margin: .4rem 0; }
.u-margin-bottom-_4rem.u-margin-bottom-_4rem.u-margin-bottom-_4rem.u-margin-bottom-_4rem { margin-bottom: .4rem; }
.u-margin-bottom-_6rem.u-margin-bottom-_6rem.u-margin-bottom-_6rem.u-margin-bottom-_6rem { margin-bottom: .6rem; }
.u-margin-top-1_25rem.u-margin-top-1_25rem.u-margin-top-1_25rem.u-margin-top-1_25rem { margin-top: 1.25rem; }
.u-margin-top-1_5rem.u-margin-top-1_5rem.u-margin-top-1_5rem.u-margin-top-1_5rem { margin-top: 1.5rem; }
.u-margin-top-2rem.u-margin-top-2rem.u-margin-top-2rem.u-margin-top-2rem { margin-top: 2rem; }
.u-margin-top-_35rem.u-margin-top-_35rem.u-margin-top-_35rem.u-margin-top-_35rem { margin-top: .35rem; }
.u-margin-top-_4rem.u-margin-top-_4rem.u-margin-top-_4rem.u-margin-top-_4rem { margin-top: .4rem; }
.u-max-height-400px.u-max-height-400px.u-max-height-400px.u-max-height-400px { max-height: 400px; }
.u-max-width-60px.u-max-width-60px.u-max-width-60px.u-max-width-60px { max-width: 60px; }
.u-max-width-780px.u-max-width-780px.u-max-width-780px.u-max-width-780px { max-width: 780px; }
.u-min-width-290px.u-min-width-290px.u-min-width-290px.u-min-width-290px { min-width: 290px; }
.u-opacity-0_5.u-opacity-0_5.u-opacity-0_5.u-opacity-0_5 { opacity: 0.5; }
.u-opacity-_9.u-opacity-_9.u-opacity-_9.u-opacity-_9 { opacity: .9; }
.u-padding-0-_5rem-1_25rem.u-padding-0-_5rem-1_25rem.u-padding-0-_5rem-1_25rem.u-padding-0-_5rem-1_25rem { padding: 0 .5rem 1.25rem; }
.u-padding-1_5rem.u-padding-1_5rem.u-padding-1_5rem.u-padding-1_5rem { padding: 1.5rem; }
.u-padding-1rem-0.u-padding-1rem-0.u-padding-1rem-0.u-padding-1rem-0 { padding: 1rem 0; }
.u-padding-2_5rem.u-padding-2_5rem.u-padding-2_5rem.u-padding-2_5rem { padding: 2.5rem; }
.u-padding-4px-10px.u-padding-4px-10px.u-padding-4px-10px.u-padding-4px-10px { padding: 4px 10px; }
.u-padding-4px-12px.u-padding-4px-12px.u-padding-4px-12px.u-padding-4px-12px { padding: 4px 12px; }
.u-padding-_75rem-1rem.u-padding-_75rem-1rem.u-padding-_75rem-1rem.u-padding-_75rem-1rem { padding: .75rem 1rem; }
.u-padding-bottom-_5rem.u-padding-bottom-_5rem.u-padding-bottom-_5rem.u-padding-bottom-_5rem { padding-bottom: .5rem; }
.u-padding-left-16px.u-padding-left-16px.u-padding-left-16px.u-padding-left-16px { padding-left: 16px; }
.u-padding-left-2_25rem.u-padding-left-2_25rem.u-padding-left-2_25rem.u-padding-left-2_25rem { padding-left: 2.25rem; }
.u-text-decoration-underline.u-text-decoration-underline.u-text-decoration-underline.u-text-decoration-underline { text-decoration: underline; }
.u-width-110px.u-width-110px.u-width-110px.u-width-110px { width: 110px; }
.u-width-14px.u-width-14px.u-width-14px.u-width-14px { width: 14px; }
.u-width-42px.u-width-42px.u-width-42px.u-width-42px { width: 42px; }
.u-width-auto.u-width-auto.u-width-auto.u-width-auto { width: auto; }

/* ── Precision Data Cockpit & Global Notification Slide-Over Drawer ────────── */
.rdr-surface-subtle {
    background: var(--rdr-surface-2, #F8FAFC) !important;
    color: var(--rdr-text, #0F172A) !important;
}

.rdr-stale-tab-banner {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    background: var(--rdr-card, #111827);
    color: var(--rdr-text, #F8FAFC);
    border: 1px solid var(--rdr-border, #1E293B);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    max-width: 420px;
}

.rdr-stale-tab-reload {
    background: var(--rdr-accent, #4F46E5);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.rdr-notif-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.rdr-notif-bell-btn {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rdr-notif-bell-btn > i,
.rdr-notif-bell-svg {
    font-size: 15px;
    width: 16px;
    height: 16px;
    line-height: 1;
    display: inline-block;
    color: var(--rdr-text);
    pointer-events: none;
}

.rdr-notif-unread-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rdr-danger, #EF4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--rdr-surface, #fff);
    pointer-events: none;
    z-index: 2;
}

.rdr-notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1080;
}

.rdr-notif-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    z-index: 1090;
    background: var(--rdr-card, #ffffff);
    border-left: 1px solid var(--rdr-border, #E2E8F0);
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
}

html.dark .rdr-notif-drawer,
[data-theme="dark"] .rdr-notif-drawer {
    background: rgba(17, 24, 39, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.rdr-notif-drawer-enter { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.rdr-notif-drawer-enter-start { transform: translateX(100%); }
.rdr-notif-drawer-enter-end { transform: translateX(0); }
.rdr-notif-drawer-leave { transition: transform 0.16s ease-in; }

.rdr-notif-drawer-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--rdr-border, #E2E8F0);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rdr-notif-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--rdr-text, #0F172A);
    display: flex;
    align-items: center;
}

.rdr-notif-drawer-sub {
    font-size: 12px;
    color: var(--rdr-text-muted, #64748B);
    margin-top: 2px;
}

.rdr-notif-drawer-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--rdr-border, #E2E8F0);
    background: var(--rdr-surface-2, #F8FAFC);
    overflow-x: auto;
}

.rdr-notif-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--rdr-text-muted, #64748B);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.rdr-notif-tab:hover {
    color: var(--rdr-text, #0F172A);
    background: var(--rdr-card, #fff);
}

.rdr-notif-tab.active {
    background: var(--rdr-card, #fff);
    color: var(--rdr-accent, #4F46E5);
    border-color: var(--rdr-border, #E2E8F0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.rdr-notif-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

.rdr-notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rdr-notif-item {
    background: var(--rdr-card, #fff);
    border: 1px solid var(--rdr-border, #E2E8F0);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.15s ease;
}

.rdr-notif-item.is-unread {
    border-left: 3px solid var(--rdr-accent, #4F46E5);
    background: var(--rdr-surface-2, #F8FAFC);
}

.rdr-notif-item.is-critical {
    border-left: 3px solid var(--rdr-danger, #EF4444);
}

.rdr-notif-item.is-warning {
    border-left: 3px solid var(--rdr-warning, #F59E0B);
}

.rdr-notif-sev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.rdr-notif-sev-dot.dot-critical { background: var(--rdr-danger, #EF4444); }
.rdr-notif-sev-dot.dot-warning { background: var(--rdr-warning, #F59E0B); }
.rdr-notif-sev-dot.dot-info { background: var(--rdr-accent, #4F46E5); }

.rdr-notif-cat-pill {
    font-size: 11px;
    font-weight: 600;
    color: var(--rdr-text-muted, #64748B);
    background: var(--rdr-surface-2, #F1F5F9);
    border: 1px solid var(--rdr-border, #E2E8F0);
    padding: 1px 7px;
    border-radius: 999px;
}

.rdr-notif-time {
    font-size: 11px;
    color: var(--rdr-text-muted, #64748B);
}

.rdr-notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rdr-text, #0F172A);
    margin-bottom: 3px;
}

.rdr-notif-item-summary {
    font-size: 12px;
    color: var(--rdr-text-muted, #64748B);
    line-height: 1.45;
}

.rdr-notif-item-action-hint {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--rdr-surface-2, #F8FAFC);
    border: 1px solid var(--rdr-border, #E2E8F0);
    font-size: 11.5px;
    color: var(--rdr-text, #0F172A);
}

.rdr-notif-empty {
    padding: 48px 20px;
    text-align: center;
}

.rdr-notif-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.rdr-notif-drawer-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--rdr-border, #E2E8F0);
    background: var(--rdr-surface-2, #F8FAFC);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* === 10/10 Notification Center & Callout System (Zero Bootstrap border-4 Clash) === */
.rdr-notif-kpi-card {
  position: relative;
  border: 1px solid var(--rdr-border) !important;
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rdr-notif-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--rdr-shadow-md);
}
.rdr-accent-left-danger {
  border-left: 3px solid var(--rdr-danger, #e11d48) !important;
}
.rdr-accent-left-warning {
  border-left: 3px solid var(--rdr-warning, #d97706) !important;
}
.rdr-accent-left-primary {
  border-left: 3px solid var(--rdr-accent, #4f46e5) !important;
}
.rdr-accent-left-success {
  border-left: 3px solid var(--rdr-success, #059669) !important;
}
.rdr-notif-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rdr-text-muted, #64748b);
}
.rdr-notif-kpi-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rdr-text, #0f172a);
  margin-bottom: 0.15rem;
}
.rdr-notif-kpi-sub {
  font-size: 0.75rem;
  color: var(--rdr-text-muted, #64748b);
}
.rdr-notif-kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.rdr-notif-kpi-icon.is-danger {
  background: var(--rdr-danger-soft, rgba(225, 29, 72, 0.1));
  color: var(--rdr-danger, #e11d48);
}
.rdr-notif-kpi-icon.is-warning {
  background: var(--rdr-warning-soft, rgba(217, 119, 6, 0.1));
  color: var(--rdr-warning, #d97706);
}
.rdr-notif-kpi-icon.is-primary {
  background: var(--rdr-accent-soft, rgba(79, 70, 229, 0.1));
  color: var(--rdr-accent, #4f46e5);
}
.rdr-notif-kpi-icon.is-success {
  background: var(--rdr-success-soft, rgba(5, 150, 105, 0.1));
  color: var(--rdr-success, #059669);
}

.rdr-notif-feed-card {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rdr-border) !important;
  border-radius: 10px;
  background: var(--rdr-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rdr-notif-feed-card:hover {
  border-color: var(--rdr-border-strong) !important;
  box-shadow: var(--rdr-shadow-sm);
}
.rdr-notif-feed-card.is-unread {
  border-left: 3px solid var(--rdr-accent, #4f46e5) !important;
}
.rdr-notif-feed-card.is-critical {
  border-left: 3px solid var(--rdr-danger, #e11d48) !important;
}
.rdr-notif-feed-card.is-warning {
  border-left: 3px solid var(--rdr-warning, #d97706) !important;
}
.rdr-notif-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.rdr-sev-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rdr-sev-critical {
  background: var(--rdr-danger-soft, rgba(225, 29, 72, 0.12));
  color: var(--rdr-danger, #e11d48);
}
.rdr-sev-warning {
  background: var(--rdr-warning-soft, rgba(217, 119, 6, 0.12));
  color: var(--rdr-warning, #d97706);
}
.rdr-sev-info {
  background: var(--rdr-accent-soft, rgba(79, 70, 229, 0.1));
  color: var(--rdr-accent, #4f46e5);
}
.rdr-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 500;
  background: var(--rdr-surface-2);
  color: var(--rdr-text-secondary);
  border: 1px solid var(--rdr-border);
}
.rdr-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
}
.rdr-status-pill.is-new {
  background: var(--rdr-accent-soft, rgba(79, 70, 229, 0.12));
  color: var(--rdr-accent, #4f46e5);
}
.rdr-status-pill.is-ack {
  background: var(--rdr-surface-2);
  color: var(--rdr-text-muted);
}
.rdr-status-pill.is-resolved {
  background: var(--rdr-success-soft, rgba(5, 150, 105, 0.12));
  color: var(--rdr-success, #059669);
}
.rdr-notif-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rdr-text);
  line-height: 1.35;
}
.rdr-notif-card-summary {
  font-size: 0.8rem;
  color: var(--rdr-text-secondary);
  line-height: 1.45;
}
.rdr-notif-card-time {
  font-size: 0.72rem;
  color: var(--rdr-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rdr-notif-impact-box {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: var(--rdr-surface-2);
  border: 1px solid var(--rdr-border);
  font-size: 0.78rem;
  color: var(--rdr-text-secondary);
}
.rdr-guardrail-row {
  padding: 0.6rem 0.75rem;
  background: var(--rdr-surface-2);
  border-color: var(--rdr-border) !important;
}
.rdr-callout-warning {
  border: 1px solid var(--rdr-border) !important;
  border-left: 3px solid var(--rdr-warning, #d97706) !important;
}
.rdr-callout-info {
  border: 1px solid var(--rdr-border) !important;
  border-left: 3px solid var(--rdr-accent, #4f46e5) !important;
}

/* === Display Currency Selector & Mixed-Currency Prompt Banner === */
.rdr-ccy-prompt-banner {
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-radius: 10px;
  background: var(--rdr-card);
}
.rdr-ccy-pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rdr-accent, #4f46e5);
  background: var(--rdr-accent-soft, rgba(79, 70, 229, 0.1));
  border: 1px solid rgba(79, 70, 229, 0.25);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rdr-ccy-pill-btn:hover {
  background: var(--rdr-accent, #4f46e5);
  color: #ffffff;
  border-color: var(--rdr-accent, #4f46e5);
}
.rdr-ccy-quick-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--rdr-accent, #4f46e5);
  background: var(--rdr-accent-soft, rgba(79, 70, 229, 0.1));
  border: 1px solid rgba(79, 70, 229, 0.22);
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.15s ease;
}
.rdr-ccy-quick-pill:hover {
  background: var(--rdr-accent, #4f46e5);
  color: #ffffff;
}


/* Meta AI Variation Pip & Modal Switcher */
.crv-ai-pip {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.88);
    color: #f8fafc;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.crv-ai-pip img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.crv-ai-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.crv-ai-thumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 8px;
    border: 1px solid var(--rdr-border);
    background: var(--rdr-surface);
    color: var(--rdr-text-main);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.crv-ai-thumb-btn:hover {
    border-color: var(--rdr-accent);
}
.crv-ai-thumb-btn.is-active {
    border-color: var(--rdr-accent);
    background: rgba(79, 70, 229, 0.08);
    color: var(--rdr-accent);
    box-shadow: 0 0 0 1px var(--rdr-accent);
}
.crv-ai-thumb-btn img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
}


/* ── ADVIZER UPGRADE: AD ROW THUMBNAILS (Level 2 Ads) ────────────────────────── */
.ins-tree-ad-thumb-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--rdr-surface-hover);
    border: 1px solid var(--rdr-border);
    margin-right: 8px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.ins-tree-ad-thumb-wrap:hover {
    transform: scale(1.08);
    border-color: var(--rdr-accent);
}
.ins-tree-ad-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ins-tree-ad-thumb-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--rdr-text-muted);
    font-size: 13px;
}

/* ── ADVIZER UPGRADE: 3-AXIS MULTI-TYPE ZOOMABLE CHART TOOLBAR ──────────────── */
.rdr-super-chart-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px;
    background: var(--rdr-surface);
    border-bottom: 1px solid var(--rdr-border);
}
.rdr-chart-axes-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rdr-chart-axis-pill {
    display: inline-flex;
    flex-wrap: wrap;          /* phones: the chart-type buttons drop under the metric instead of off-screen */
    max-width: 100%;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    transition: all 0.15s ease;
}
.rdr-chart-axis-pill.is-axis-1 {
    border-left: 3px solid #6366f1;
}
.rdr-chart-axis-pill.is-axis-2 {
    border-left: 3px solid #10b981;
}
.rdr-chart-axis-pill.is-axis-3 {
    border-left: 3px solid #f59e0b;
}
.rdr-chart-axis-pill.is-axis-off {
    opacity: 0.65;
    border-left-color: var(--rdr-border);
}
.rdr-axis-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-axis-1 { background-color: #6366f1; box-shadow: 0 0 6px rgba(99, 102, 241, 0.5); }
.dot-axis-2 { background-color: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
.dot-axis-3 { background-color: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.rdr-axis-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rdr-text-muted);
}
.rdr-axis-metric-select {
    min-width: 140px;
    max-width: 180px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 24px 3px 8px;
    border-radius: 6px;
    background-color: var(--rdr-surface-hover);
    border: 1px solid var(--rdr-border);
    color: var(--rdr-text);
}
.rdr-axis-type-group {
    display: inline-flex;
    align-items: center;
    background: var(--rdr-surface-hover);
    padding: 2px;
    border-radius: 6px;
    border: 1px solid var(--rdr-border);
}
.rdr-axis-type-btn {
    border: none;
    background: transparent;
    color: var(--rdr-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.rdr-axis-type-btn:hover {
    color: var(--rdr-text);
}
.rdr-axis-type-btn.is-active {
    background: var(--rdr-card);
    color: var(--rdr-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rdr-chart-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.rdr-chart-toggles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rdr-chart-opt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    color: var(--rdr-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.rdr-chart-opt-btn:hover {
    border-color: var(--rdr-border-hover);
    color: var(--rdr-text);
}
.rdr-chart-opt-btn.is-active {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--rdr-accent);
    color: var(--rdr-accent);
}

.rdr-chart-zoom-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rdr-zoom-hint {
    font-size: 11px;
    color: var(--rdr-text-muted);
}
.rdr-zoom-btn-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rdr-border);
    border-radius: 6px;
    background: var(--rdr-card);
    overflow: hidden;
}
.rdr-zoom-btn {
    border: none;
    background: transparent;
    color: var(--rdr-text-muted);
    padding: 4px 9px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-right: 1px solid var(--rdr-border);
}
.rdr-zoom-btn:last-child {
    border-right: none;
}
.rdr-zoom-btn:hover:not(:disabled) {
    background: var(--rdr-surface-hover);
    color: var(--rdr-text);
}
.rdr-zoom-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rdr-zoom-presets {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rdr-zoom-preset-btn {
    border: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    color: var(--rdr-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rdr-zoom-preset-btn:hover:not(:disabled) {
    color: var(--rdr-text);
    border-color: var(--rdr-border-hover);
}
.rdr-zoom-preset-btn.is-active {
    background: var(--rdr-accent);
    border-color: var(--rdr-accent);
    color: #ffffff;
}
.rdr-zoom-preset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rdr-zoom-reset-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid var(--rdr-accent);
    background: rgba(99, 102, 241, 0.1);
    color: var(--rdr-accent);
    cursor: pointer;
    transition: all 0.15s ease;
}
.rdr-zoom-reset-pill:hover {
    background: var(--rdr-accent);
    color: #ffffff;
}

.rdr-super-chart-canvas-wrap {
    position: relative;
    user-select: none;
    cursor: crosshair;
}
.rdr-chart-brush-box {
    position: absolute;
    top: 0;
    bottom: 40px;
    background: rgba(99, 102, 241, 0.18);
    border-left: 2px solid #6366f1;
    border-right: 2px solid #6366f1;
    pointer-events: none;
    z-index: 10;
}

/* ── ADVIZER UPGRADE: CATEGORIZED COLUMN & VIEW STUDIO MODAL ────────────────── */
.camp-studio-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.camp-studio-col-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--rdr-accent);
}

.camp-studio-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.camp-studio-modal {
    width: 96%;
    max-width: 1120px;
    height: 88vh;
    max-height: 840px;
    background: var(--rdr-card);
    border: 1px solid var(--rdr-border);
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.camp-studio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rdr-border);
    background: var(--rdr-card);
}
.camp-studio-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.camp-studio-title-icon {
    font-size: 20px;
    color: var(--rdr-accent);
}
.camp-studio-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--rdr-text);
}
.camp-studio-subtitle-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--rdr-accent);
}
.camp-studio-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--rdr-text-muted);
}
.camp-studio-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.camp-studio-presets-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--rdr-surface);
    border-bottom: 1px solid var(--rdr-border);
    overflow-x: auto;
}
.camp-studio-presets-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rdr-text-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.camp-studio-presets-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}
.camp-studio-preset-pill {
    border: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    color: var(--rdr-text);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.camp-studio-preset-pill:hover {
    border-color: var(--rdr-accent);
    color: var(--rdr-accent);
}
.camp-studio-preset-pill.is-active {
    background: var(--rdr-accent);
    border-color: var(--rdr-accent);
    color: #ffffff;
}
.camp-studio-preset-pill.is-saved-view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Collapsible Custom Metric Builder */
.camp-studio-metric-creator {
    padding: 16px 20px;
    background: var(--rdr-surface-hover);
    border-bottom: 1px solid var(--rdr-border);
}
.camp-metric-creator-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rdr-text);
}
.camp-metric-creator-sub {
    font-size: 11.5px;
    color: var(--rdr-text-muted);
    margin: 0 0 10px 0;
}
.camp-metric-creator-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
.camp-metric-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--rdr-text-muted);
    margin-bottom: 4px;
}
.camp-metric-formula-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}
.camp-formula-input {
    font-family: monospace;
    font-size: 12.5px;
    font-weight: 600;
}
.camp-metric-creator-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.camp-metric-tokens-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.camp-tokens-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--rdr-text-muted);
}
.camp-token-chip {
    border: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    color: var(--rdr-text);
    font-size: 10.5px;
    font-family: monospace;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.camp-token-chip:hover {
    border-color: var(--rdr-accent);
    color: var(--rdr-accent);
}
.camp-token-chip.is-op {
    font-weight: 700;
    color: var(--rdr-accent);
}
.camp-metric-validation-msg {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.camp-metric-validation-msg.is-valid {
    background: rgba(16, 185, 129, 0.1);
    color: var(--rdr-positive);
}
.camp-metric-validation-msg.is-invalid {
    background: rgba(239, 68, 68, 0.1);
    color: var(--rdr-negative);
}

/* 3-Column Studio Body */
.camp-studio-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.camp-studio-pane-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rdr-text-muted);
    margin-bottom: 8px;
}

/* Category Sidebar */
.camp-studio-categories {
    width: 200px;
    border-right: 1px solid var(--rdr-border);
    background: var(--rdr-surface);
    padding: 14px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.camp-studio-cat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--rdr-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.camp-studio-cat-btn:hover {
    background: var(--rdr-surface-hover);
}
.camp-studio-cat-btn.is-active {
    background: rgba(99, 102, 241, 0.12);
    color: var(--rdr-accent);
}
.camp-studio-cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.camp-studio-cat-count {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.7;
}

/* Metrics Library */
.camp-studio-library {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--rdr-card);
    border-right: 1px solid var(--rdr-border);
}
.camp-studio-library-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rdr-border);
    gap: 12px;
}
.camp-studio-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    background: var(--rdr-surface-hover);
    padding: 2px 10px;
    border-radius: 8px;
    border: 1px solid var(--rdr-border);
}
.camp-studio-search-wrap i {
    color: var(--rdr-text-muted);
}
.camp-studio-search-wrap input {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 12.5px;
    padding-left: 0;
}
.camp-studio-library-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.camp-studio-group-block {
    margin-bottom: 18px;
}
.camp-studio-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--rdr-border);
}
.camp-studio-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--rdr-text);
}
.camp-studio-group-count {
    font-size: 11px;
    color: var(--rdr-text-muted);
}
.camp-studio-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.camp-studio-metric-card {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--rdr-border);
    background: var(--rdr-surface);
    cursor: pointer;
    transition: all 0.15s ease;
}
.camp-studio-metric-card:hover {
    border-color: var(--rdr-border-hover);
    background: var(--rdr-surface-hover);
}
.camp-studio-metric-card.is-selected {
    border-color: var(--rdr-accent);
    background: rgba(99, 102, 241, 0.06);
}
.camp-studio-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.camp-studio-card-check {
    cursor: pointer;
}
.camp-studio-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rdr-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.camp-studio-card-fmt {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--rdr-surface-hover);
    color: var(--rdr-text-muted);
}
.camp-studio-card-desc {
    font-size: 10.5px;
    color: var(--rdr-text-muted);
    margin-top: 4px;
    margin-left: 20px;
    line-height: 1.3;
}
.camp-studio-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--rdr-text-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.camp-studio-empty i {
    font-size: 28px;
}

/* Active Columns List (Drag & Drop) */
.camp-studio-selected {
    width: 320px;
    background: var(--rdr-surface);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.camp-studio-selected-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rdr-border);
}
.camp-studio-drag-hint {
    font-size: 10.5px;
    color: var(--rdr-text-muted);
}
.camp-studio-selected-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.camp-studio-order-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    transition: all 0.15s ease;
    cursor: grab;
}
.camp-studio-order-item:active {
    cursor: grabbing;
}
.camp-studio-order-item.is-dragging {
    opacity: 0.4;
    border-style: dashed;
}
.camp-studio-order-item.is-drag-over {
    border-color: var(--rdr-accent);
    background: rgba(99, 102, 241, 0.12);
    transform: translateY(-2px);
}
.camp-order-grip {
    color: var(--rdr-text-muted);
    font-size: 13px;
}
.camp-order-index {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--rdr-text-muted);
    min-width: 16px;
}
.camp-order-info {
    flex: 1;
    min-width: 0;
}
.camp-order-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--rdr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.camp-order-group {
    display: block;
    font-size: 10px;
    color: var(--rdr-text-muted);
}
.camp-order-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.camp-order-btn {
    border: none;
    background: transparent;
    color: var(--rdr-text-muted);
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}
.camp-order-btn:hover:not(:disabled) {
    background: var(--rdr-surface-hover);
    color: var(--rdr-text);
}
.camp-order-btn.is-remove:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    color: var(--rdr-negative);
}
.camp-order-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Studio Footer Save Bar */
.camp-studio-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--rdr-border);
    background: var(--rdr-card);
    gap: 16px;
    flex-wrap: wrap;
}
.camp-studio-save-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.camp-save-icon {
    font-size: 16px;
    color: var(--rdr-accent);
}
.camp-studio-view-input {
    max-width: 260px;
    font-size: 12.5px;
    font-weight: 600;
}
.camp-share-toggle {
    font-size: 11.5px;
    white-space: nowrap;
}
.camp-studio-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ── Modern E-Commerce Conversion Funnel ────────────────── */
.ins-funnel-modern-card {
  padding: 20px;
  background: var(--rdr-surface-1, #ffffff);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ins-funnel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.ins-funnel-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ins-funnel-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--rdr-accent, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.ins-funnel-main-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--rdr-text, #0f172a);
  letter-spacing: -0.01em;
}
.ins-funnel-sub-title {
  font-size: 12px;
  color: var(--rdr-text-muted, #64748b);
  margin-top: 2px;
}
.ins-funnel-header-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ins-funnel-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--rdr-surface-2, #f8fafc);
  border: 1px solid var(--rdr-border, #e2e8f0);
}
.ins-funnel-highlight-pill.is-emerald {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}
.ins-funnel-highlight-pill.is-primary {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}
.ins-funnel-highlight-pill.is-cyan {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.25);
}
.ins-funnel-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ins-funnel-pill-dot.is-emerald { background: #10b981; }
.ins-funnel-pill-dot.is-primary { background: #6366f1; }
.ins-funnel-pill-dot.is-cyan { background: #06b6d4; }
.ins-funnel-pill-label {
  color: var(--rdr-text-muted, #64748b);
  font-size: 11px;
}
.ins-funnel-pill-val {
  font-weight: 700;
  font-size: 13px;
}

/* Funnel Track & Flow */
.ins-funnel-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}
.ins-funnel-step-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 0 170px;
  min-width: 170px;
  scroll-snap-align: start;
}
.ins-funnel-step-card {
  flex: 1 0 160px;
  min-width: 160px;
  background: var(--rdr-surface-2, #f8fafc);
  border: 1px solid var(--rdr-border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ins-funnel-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ins-funnel-step-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ins-funnel-step-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ins-funnel-step-icon.is-purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.ins-funnel-step-icon.is-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.ins-funnel-step-icon.is-blue   { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.ins-funnel-step-icon.is-amber  { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.ins-funnel-step-icon.is-cyan   { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.ins-funnel-step-icon.is-emerald{ background: rgba(16, 185, 129, 0.12); color: #10b981; }

.ins-funnel-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rdr-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ins-funnel-step-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--rdr-text, #0f172a);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ins-funnel-step-sub {
  font-size: 11px;
  color: var(--rdr-text-muted, #64748b);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ins-funnel-step-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.ins-funnel-step-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.ins-funnel-step-bar.is-purple { background: #8b5cf6; }
.ins-funnel-step-bar.is-indigo { background: #6366f1; }
.ins-funnel-step-bar.is-blue   { background: #3b82f6; }
.ins-funnel-step-bar.is-amber  { background: #f59e0b; }
.ins-funnel-step-bar.is-cyan   { background: #06b6d4; }
.ins-funnel-step-bar.is-emerald{ background: #10b981; }

/* Conversion Connectors between Stages */
.ins-funnel-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  flex-shrink: 0;
}
.ins-funnel-arrow-line {
  color: var(--rdr-text-muted, #94a3b8);
  font-size: 12px;
  line-height: 1;
}
.ins-funnel-connector-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--rdr-surface-2, #f1f5f9);
  border: 1px solid var(--rdr-border, #e2e8f0);
}
.ins-funnel-connector-rate {
  font-size: 10px;
  font-weight: 700;
  color: var(--rdr-text, #0f172a);
  line-height: 1;
}
.ins-funnel-connector-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--rdr-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 2px;
  white-space: nowrap;
}

/* Diagnostics Strip */
.ins-funnel-diagnostics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rdr-border, #e2e8f0);
}
.ins-funnel-diag-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--rdr-surface-2, #f8fafc);
  border: 1px solid var(--rdr-border, #e2e8f0);
}
.ins-funnel-diag-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rdr-text-muted, #64748b);
  display: flex;
  align-items: center;
}
.ins-funnel-diag-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rdr-text, #0f172a);
  letter-spacing: -0.01em;
}
.ins-funnel-diag-hint {
  font-size: 10px;
  color: var(--rdr-text-muted, #94a3b8);
}

/* ── Mobile & Tablet Responsive Conversion Funnel ─────────────────── */
.ins-funnel-modern-card {
  container-type: inline-size;
}

@container (max-width: 1150px) {
  .ins-funnel-modern-card {
    padding: 14px 12px;
    border-radius: 10px;
  }
  .ins-funnel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
  }
  .ins-funnel-header-left {
    gap: 10px;
    width: 100%;
  }
  .ins-funnel-header-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .ins-funnel-main-title {
    font-size: 14px;
  }
  .ins-funnel-sub-title {
    font-size: 11px;
    line-height: 1.3;
  }
  .ins-funnel-header-pills {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .ins-funnel-highlight-pill {
    flex: 1 1 160px;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 11px;
  }
  .ins-funnel-pill-val {
    font-size: 12px;
  }

  /* Funnel Track: Switch from wide horizontal scroll to vertical journey */
  .ins-funnel-track {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
    margin-bottom: 14px;
    gap: 0;
  }
  .ins-funnel-step-wrapper {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
  }
  .ins-funnel-step-card {
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .ins-funnel-step-card:hover {
    transform: none;
  }
  .ins-funnel-step-top {
    justify-content: flex-start;
    gap: 8px;
  }
  .ins-funnel-step-label {
    font-size: 11px;
    white-space: normal;
  }
  .ins-funnel-step-value {
    font-size: 1.3rem;
    margin: 3px 0;
  }
  .ins-funnel-step-sub {
    font-size: 11px;
  }

  /* Vertical Downward Connectors */
  .ins-funnel-connector {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    gap: 8px;
  }
  .ins-funnel-arrow-line {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ins-funnel-arrow-line i {
    transform: rotate(90deg);
    display: inline-block;
    font-size: 14px;
    color: var(--rdr-accent, #6366f1);
    line-height: 1;
  }
  .ins-funnel-connector-badge {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
  }
  .ins-funnel-connector-rate {
    font-size: 11px;
    font-weight: 700;
  }
  .ins-funnel-connector-label {
    margin-top: 0;
    font-size: 9px;
  }

  /* Diagnostics: 2-column or 1-column */
  .ins-funnel-diagnostics {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 12px;
  }
  .ins-funnel-diag-item {
    padding: 8px 10px;
  }
  .ins-funnel-diag-label {
    font-size: 10px;
  }
  .ins-funnel-diag-value {
    font-size: 1.05rem;
  }
  .ins-funnel-diag-hint {
    font-size: 9px;
  }
}

@container (max-width: 500px) {
  .ins-funnel-header-pills {
    grid-template-columns: 1fr;
    display: grid;
  }
  .ins-funnel-highlight-pill {
    width: 100%;
  }
  .ins-funnel-diagnostics {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Viewport fallback for older browsers or non-container contexts */
@media (max-width: 1150px) {
  .ins-funnel-modern-card {
    padding: 14px 12px;
    border-radius: 10px;
  }
  .ins-funnel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
  }
  .ins-funnel-header-pills {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .ins-funnel-highlight-pill {
    flex: 1 1 160px;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 11px;
  }
  .ins-funnel-track {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
    margin-bottom: 14px;
    gap: 0;
  }
  .ins-funnel-step-wrapper {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
  }
  .ins-funnel-step-card {
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .ins-funnel-step-card:hover {
    transform: none;
  }
  .ins-funnel-step-top {
    justify-content: flex-start;
    gap: 8px;
  }
  .ins-funnel-step-label {
    font-size: 11px;
    white-space: normal;
  }
  .ins-funnel-step-value {
    font-size: 1.3rem;
    margin: 3px 0;
  }
  .ins-funnel-step-sub {
    font-size: 11px;
  }
  .ins-funnel-connector {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    gap: 8px;
  }
  .ins-funnel-arrow-line i {
    transform: rotate(90deg);
    display: inline-block;
    font-size: 14px;
    color: var(--rdr-accent, #6366f1);
    line-height: 1;
  }
  .ins-funnel-connector-badge {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
  }
  .ins-funnel-connector-rate {
    font-size: 11px;
    font-weight: 700;
  }
  .ins-funnel-connector-label {
    margin-top: 0;
    font-size: 9px;
  }
  .ins-funnel-diagnostics {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 12px;
  }
}

@media (max-width: 500px) {
  .ins-funnel-header-pills {
    grid-template-columns: 1fr;
    display: grid;
  }
  .ins-funnel-highlight-pill {
    width: 100%;
  }
  .ins-funnel-diagnostics {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Real-Time User Presence and Status */
.adv-presence-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--rdr-card, #ffffff);
  box-sizing: content-box;
  display: inline-block;
  pointer-events: none;
}
.adv-presence-dot-inline {
  position: static;
  width: 8px;
  height: 8px;
  border: none;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.adv-presence-dot-online {
  background-color: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  animation: adv-presence-pulse 2.5s infinite;
}
.adv-presence-dot-away {
  background-color: #f59e0b;
}
.adv-presence-dot-busy {
  background-color: #ef4444;
}
.adv-presence-dot-offline {
  background-color: #94a3b8;
}

@keyframes adv-presence-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.adv-user-custom-status {
  font-size: 11px;
  color: var(--rdr-text-muted);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}

.adv-role-badge-admin {
  background-color: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #d8b4fe;
}
.adv-role-badge-mediabuyer {
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.adv-role-badge-creativestrategist {
  background-color: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.adv-role-badge-financemanager {
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.adv-role-badge-analyst {
  background-color: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
}
.adv-role-badge-member {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.adv-role-badge-viewer {
  background-color: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

[data-theme="dark"] .adv-role-badge-admin {
  background-color: rgba(147, 51, 234, 0.15);
  color: #d8b4fe;
  border-color: rgba(147, 51, 234, 0.3);
}
[data-theme="dark"] .adv-role-badge-mediabuyer {
  background-color: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border-color: rgba(37, 99, 235, 0.3);
}
[data-theme="dark"] .adv-role-badge-creativestrategist {
  background-color: rgba(79, 70, 229, 0.15);
  color: #a5b4fc;
  border-color: rgba(79, 70, 229, 0.3);
}
[data-theme="dark"] .adv-role-badge-financemanager {
  background-color: rgba(5, 150, 105, 0.15);
  color: #6ee7b7;
  border-color: rgba(5, 150, 105, 0.3);
}
[data-theme="dark"] .adv-role-badge-analyst {
  background-color: rgba(8, 145, 178, 0.15);
  color: #67e8f9;
  border-color: rgba(8, 145, 178, 0.3);
}
[data-theme="dark"] .adv-role-badge-member {
  background-color: rgba(100, 116, 139, 0.15);
  color: #cbd5e1;
  border-color: rgba(100, 116, 139, 0.3);
}
[data-theme="dark"] .adv-role-badge-viewer {
  background-color: rgba(234, 88, 12, 0.15);
  color: #fdba74;
  border-color: rgba(234, 88, 12, 0.3);
}

.adv-module-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  background-color: var(--rdr-surface-2, #f1f5f9);
  color: var(--rdr-text, #334155);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Online Users & Team Presence Modal ── */
.adv-presence-modal-dialog {
  max-width: 540px;
}
.adv-presence-modal-content {
  background-color: var(--rdr-card);
  color: var(--rdr-text);
  border: 1px solid var(--rdr-border);
  border-radius: 12px;
}
.adv-presence-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rdr-border);
  background-color: var(--rdr-card);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.adv-presence-user-item:hover {
  background-color: var(--rdr-surface-2);
}
.adv-presence-user-item.is-current {
  border-color: var(--rdr-primary, #6366f1);
  background-color: rgba(99, 102, 241, 0.04);
}
.adv-presence-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.adv-presence-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--rdr-surface-2);
  color: var(--rdr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--rdr-border);
}
.adv-presence-user-info {
  flex: 1;
  min-width: 0;
}
.adv-presence-user-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--rdr-text);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-presence-user-status {
  font-size: 11.5px;
  color: var(--rdr-text-muted);
}
.adv-presence-user-custom {
  font-size: 11px;
  color: var(--rdr-text-muted);
  font-style: italic;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-status-choice.active {
  font-weight: 600;
  background-color: var(--rdr-surface-2) !important;
  color: var(--rdr-text) !important;
  border-color: var(--rdr-primary, #6366f1) !important;
}


/* ── Audience Insider (Audiences > Active Audiences, 2026-11-05) ─────────────────────────────────
   KPI row with sparklines, gender ring + per-gender actions, age table, compact countries, platform &
   placement table. Token colours only, so dark mode follows; numbers use tabular figures. */
.aud-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.aud-sync-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-full); background: var(--rdr-card); color: var(--rdr-text-muted); font-size: 12px; white-space: nowrap; }
.aud-sync-badge.is-warn { border-color: var(--rdr-warning); color: var(--rdr-warning); }
.aud-sync-refresh { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--rdr-text-muted); cursor: pointer; }
.aud-sync-refresh:hover { background: var(--rdr-surface-hover); color: var(--rdr-text); }
.aud-sync-refresh.is-spinning i { animation: aud-spin .8s linear infinite; }
@keyframes aud-spin { to { transform: rotate(360deg); } }

.aud-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.aud-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 12px; border: 1px solid var(--rdr-border); border-radius: 12px; background: var(--rdr-card); box-shadow: var(--rdr-shadow); }
.aud-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aud-kpi-label { color: var(--rdr-text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-kpi-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--rdr-accent-light); color: var(--rdr-accent); font-size: 15px; }
.aud-kpi-value { color: var(--rdr-text); font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aud-kpi-sub { color: var(--rdr-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-kpi-sub strong { color: var(--rdr-text); font-weight: 600; }
.aud-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 26px; }
.aud-spark { flex: 1 1 auto; min-width: 0; max-width: 120px; height: 26px; }
.aud-spark polyline { fill: none; stroke: var(--rdr-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.aud-spark polygon { fill: var(--rdr-accent-light); stroke: none; }

.aud-trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--rdr-radius-full); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--rdr-surface-2); color: var(--rdr-text-muted); }
.aud-trend.is-up { background: var(--rdr-positive-light); color: var(--rdr-positive); }
.aud-trend.is-down { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.aud-trend-note { color: var(--rdr-text-muted); font-size: 11px; white-space: nowrap; }

.aud-card { min-width: 0; border: 1px solid var(--rdr-border); border-radius: 12px; background: var(--rdr-card); box-shadow: var(--rdr-shadow); }
.aud-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 14px 16px 10px; }
.aud-card-title { margin: 0; color: var(--rdr-text); font-size: 14px; font-weight: 650; }
.aud-card-hint { color: var(--rdr-text-muted); font-size: 12px; }
.aud-card-body { padding: 0 16px 14px; }
.aud-split { display: grid; grid-template-columns: minmax(340px, 4fr) minmax(0, 8fr); gap: 16px; margin-bottom: 16px; }

.aud-seg { display: inline-flex; padding: 2px; border: 1px solid var(--rdr-border); border-radius: 8px; background: var(--rdr-surface-2); }
.aud-seg button { padding: 3px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--rdr-text-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.aud-seg button.active { background: var(--rdr-card); color: var(--rdr-text); box-shadow: var(--rdr-shadow); }

/* Gender ring */
.aud-gender-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.aud-donut { flex-shrink: 0; width: 132px; height: 132px; }
.aud-donut circle { fill: none; stroke-width: 14; }
.aud-donut .aud-donut-track { stroke: var(--rdr-surface-2); }
.aud-donut-center-value { fill: var(--rdr-text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aud-donut-center-label { fill: var(--rdr-text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.aud-seg-c1 { stroke: var(--rdr-primary-600); color: var(--rdr-primary-600); }
.aud-seg-c2 { stroke: var(--rdr-primary-200); color: var(--rdr-primary-200); }
.aud-seg-c3 { stroke: var(--rdr-text-muted); color: var(--rdr-text-muted); }
.aud-legend { display: grid; gap: 8px; min-width: 150px; max-width: 280px; flex: 1 1 150px; }
.aud-legend-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.aud-legend-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--rdr-surface-2); font-size: 13px; }
.aud-legend-name { color: var(--rdr-text); text-transform: capitalize; }
.aud-legend-pct { color: var(--rdr-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.aud-gender-metrics { margin-top: 14px; }
.aud-gender-metrics .aud-table { font-size: 12.5px; }
.aud-gender-metrics .aud-table td, .aud-gender-metrics .aud-table th { padding: 7px 6px; }

/* Tables */
.aud-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.aud-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.aud-table th { position: sticky; top: 0; z-index: 1; padding: 9px 8px; border-bottom: 1px solid var(--rdr-border); background: var(--rdr-card); color: var(--rdr-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.aud-table th:first-child, .aud-table td:first-child, .aud-table th.aud-th-left { text-align: left; }
.aud-table-dense th, .aud-table-dense td { padding-left: 6px; padding-right: 6px; }
.aud-table-dense .aud-bar-cell { grid-template-columns: auto 52px; gap: 8px; }
.aud-table-dense .aud-bar { width: 52px; }
.aud-table td { padding: 9px 8px; border-bottom: 1px solid var(--rdr-border); color: var(--rdr-text); text-align: right; white-space: nowrap; }
.aud-table tbody tr:hover td { background: var(--rdr-surface-hover); }
.aud-table tfoot td { border-top: 1px solid var(--rdr-border); border-bottom: 0; font-weight: 650; background: var(--rdr-surface-2); }
.aud-table th.is-sortable { cursor: pointer; user-select: none; }
.aud-table th.is-sortable:hover { color: var(--rdr-text); }
.aud-table th .bi { margin-left: 3px; font-size: 10px; }
.aud-table th .aud-th-icon { margin: 0 4px 0 0; font-size: 12px; }
.aud-col-key { background: var(--rdr-accent-light); }
/* the header is sticky: tint over a solid card colour, or scrolled rows show through it */
.aud-table th.aud-col-key { background: linear-gradient(var(--rdr-accent-light), var(--rdr-accent-light)), var(--rdr-card); color: var(--rdr-accent); }
.aud-table tbody tr:hover td.aud-col-key { background: var(--rdr-accent-light); }
.aud-cpp { font-weight: 650; color: var(--rdr-accent); }
.aud-muted { color: var(--rdr-text-muted); }
.aud-partial { margin-left: 4px; color: var(--rdr-warning); font-size: 10px; vertical-align: 1px; }

.aud-age-cell, .aud-place-cell, .aud-country-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.aud-age-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: var(--rdr-accent); font-size: 12px; }
.aud-age-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 17px; line-height: 1; }
.aud-age-t1 { background: color-mix(in srgb, var(--rdr-accent) 10%, transparent); }
.aud-age-t2 { background: color-mix(in srgb, var(--rdr-accent) 16%, transparent); }
.aud-age-t3 { background: color-mix(in srgb, var(--rdr-accent) 22%, transparent); }
.aud-age-t4 { background: color-mix(in srgb, var(--rdr-accent) 28%, transparent); }
.aud-age-t5 { background: color-mix(in srgb, var(--rdr-accent) 34%, transparent); }
.aud-age-t6 { background: color-mix(in srgb, var(--rdr-accent) 40%, transparent); }
.aud-age-t0 { background: var(--rdr-surface-2); color: var(--rdr-text-muted); }

.aud-place-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: var(--rdr-surface-2); font-size: 13px; }
.aud-plat-facebook { color: #1877f2; }
.aud-plat-instagram { color: #e1306c; }
.aud-plat-messenger { color: #0084ff; }
.aud-plat-whatsapp { color: #25d366; }
.aud-plat-threads { color: var(--rdr-text); }
.aud-plat-audience_network { color: var(--rdr-accent); }
.aud-plat-other { color: var(--rdr-text-muted); }
.aud-place-name { color: var(--rdr-text); }
.aud-place-sep { margin: 0 1px; color: var(--rdr-text-muted); }

.aud-bar-cell { display: inline-grid; grid-template-columns: auto 72px; align-items: center; gap: 10px; }
.aud-bar { display: block; width: 72px; height: 6px; overflow: hidden; border-radius: 3px; }
.aud-bar rect.aud-bar-track { fill: var(--rdr-surface-2); }
.aud-bar rect.aud-bar-fill { fill: var(--rdr-accent); }

.aud-flag { font-size: 15px; line-height: 1; }
.aud-iso { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 20px; padding: 0 5px; border: 1px solid var(--rdr-border); border-radius: 5px; color: var(--rdr-text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.aud-country-name { color: var(--rdr-text); }
.aud-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--rdr-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.aud-note { margin: 10px 0 0; color: var(--rdr-text-muted); font-size: 12px; }
.aud-note .bi { margin-right: 4px; }

@media (max-width: 1199.98px) {
  .aud-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .aud-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud-toolbar { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
  /* Phones: the row label stays in view while the numbers scroll, and long placement names wrap. */
  .aud-table td:first-child, .aud-table th:first-child, .aud-table th.aud-th-left { position: sticky; left: 0; z-index: 2; background: var(--rdr-card); }
  .aud-table tfoot td:first-child { background: var(--rdr-surface-2); }
  .aud-place-name { display: inline-block; min-width: 118px; max-width: 150px; white-space: normal; line-height: 1.3; }
}
@media (max-width: 479.98px) {
  .aud-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .aud-donut { width: 112px; height: 112px; }
}

/* Workspace switchers: names may repeat, so every entry shows its short code, owner and ad-account count (2026-11-05). */
.rdr-ws-option { display: block; min-width: 0; overflow: hidden; }
.rdr-ws-option-detail { display: block; margin-top: 1px; color: var(--rdr-text-muted); font-size: 11px; font-weight: 400; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rdr-ws-option-detail.d-inline { display: inline; margin-left: 4px; text-transform: none; letter-spacing: 0; }
/* Campaign Builder > Generate audiences: group headings (Website, Facebook Page, Instagram, Lookalikes). */
.ins-builder-audience-group { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 12px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--rdr-border); color: var(--rdr-text); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.ins-builder-audience-group .text-muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* ── Ad → Product attribution (E-Commerce, 2026-11-06). Builds on the aud-* cards/tables/KPIs. ── */
.apa-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.apa-meter { display: block; width: 100%; height: 6px; margin-top: 2px; overflow: hidden; border-radius: 3px; }
.apa-meter rect.aud-bar-track { fill: var(--rdr-surface-2); }
.apa-meter rect.aud-bar-fill { fill: var(--rdr-accent); }
.apa-callout { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--rdr-warning); border-radius: 10px; background: var(--rdr-warning-light); color: var(--rdr-text); font-size: 13px; }
.apa-callout > .bi { margin-top: 2px; color: var(--rdr-warning); }
.apa-callout code { padding: 1px 5px; border-radius: 4px; background: var(--rdr-card); color: var(--rdr-text); font-size: 12px; }
.apa-callout a { margin-left: 6px; font-weight: 600; white-space: nowrap; }
.apa-search { display: flex; align-items: center; gap: 6px; min-width: 220px; height: 32px; padding: 0 10px; border: 1px solid var(--rdr-border); border-radius: 8px; background: var(--rdr-card); color: var(--rdr-text-muted); }
.apa-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rdr-text); font-size: 13px; }
.apa-table td:nth-child(2), .apa-table th:nth-child(2) { text-align: left; }
.apa-table td:last-child { text-align: left; }
.apa-th-expand, .apa-td-expand { width: 34px; padding-right: 0 !important; }
.apa-row { cursor: pointer; }
.apa-expand { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--rdr-text-muted); cursor: pointer; }
.apa-expand .bi { transition: transform .15s ease; }
.apa-group.is-open .apa-expand { background: var(--rdr-accent-light); color: var(--rdr-accent); }
.apa-group.is-open .apa-expand .bi { transform: rotate(90deg); }
.apa-group.is-open > .apa-row td { background: var(--rdr-surface-2); }
.apa-product, .apa-ad { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 340px; }
.apa-product-name { display: flex; flex-direction: column; min-width: 0; }
.apa-title { color: var(--rdr-text); font-weight: 600; white-space: normal; line-height: 1.3; }
.apa-sub { color: var(--rdr-text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apa-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--rdr-accent-light); color: var(--rdr-accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.apa-thumb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; overflow: hidden; border: 1px solid var(--rdr-border); border-radius: 7px; background: var(--rdr-surface-2); color: var(--rdr-text-muted); }
.apa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.apa-thumb-lg { width: 40px; height: 40px; border-radius: 9px; }
.apa-ad-name { max-width: 200px; overflow: hidden; color: var(--rdr-text); text-overflow: ellipsis; white-space: nowrap; }
.apa-strong { font-weight: 650; }
.apa-pill { display: inline-flex; min-width: 26px; justify-content: center; padding: 1px 8px; border-radius: var(--rdr-radius-full); background: var(--rdr-surface-2); color: var(--rdr-text); font-weight: 600; }
.apa-level { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; background: var(--rdr-surface-2); color: var(--rdr-text-muted); font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.apa-roas { display: inline-flex; min-width: 52px; justify-content: center; padding: 2px 8px; border-radius: var(--rdr-radius-full); background: var(--rdr-surface-2); color: var(--rdr-text-muted); font-weight: 650; }
.apa-roas.is-good { background: var(--rdr-positive-light); color: var(--rdr-positive); }
.apa-roas.is-ok { background: var(--rdr-warning-light); color: var(--rdr-warning); }
.apa-roas.is-bad { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.apa-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.apa-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; padding: 2px 8px; overflow: hidden; border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-full); color: var(--rdr-text); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.apa-chip span { overflow: hidden; text-overflow: ellipsis; }
.apa-chip strong { color: var(--rdr-accent); }
.apa-chip-more { color: var(--rdr-text-muted); }
.apa-sort-idle { opacity: .35; }
.apa-detail > td { padding-top: 0 !important; background: var(--rdr-surface-2); white-space: normal !important; text-align: left !important; }
.apa-detail-head { padding: 10px 0 8px; color: var(--rdr-text-muted); font-size: 12px; }
.apa-list { display: grid; gap: 6px; padding-bottom: 12px; }
.apa-item { display: grid; grid-template-columns: auto minmax(180px, 1fr) repeat(5, minmax(72px, auto)); align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--rdr-border); border-radius: 10px; background: var(--rdr-card); }
.apa-item-main { display: flex; flex-direction: column; min-width: 0; }
.apa-metric { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.apa-metric-label { color: var(--rdr-text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 1199.98px) { .apa-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .apa-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* all five figures stay (ROAS is the point); they wrap under the ad name */
  .apa-list { grid-template-columns: minmax(0, 1fr); }
  .apa-item { display: flex; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
  .apa-item-main { flex: 1 1 calc(100% - 60px); }
  .apa-metric { align-items: flex-start; }
  .apa-search { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 479.98px) { .apa-kpi-grid { grid-template-columns: minmax(0, 1fr); } }
/* Ad -> Product insights strip */
.apa-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.apa-insight { display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 12px 14px; border: 1px solid var(--rdr-border); border-radius: 12px; background: var(--rdr-card); box-shadow: var(--rdr-shadow); }
.apa-insight-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--rdr-accent-light); color: var(--rdr-accent); }
.apa-insight-icon.is-good { background: var(--rdr-positive-light); color: var(--rdr-positive); }
.apa-insight-icon.is-bad { background: var(--rdr-negative-light); color: var(--rdr-negative); }
.apa-insight > div { min-width: 0; }
.apa-insight-label { color: var(--rdr-text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.apa-insight-title { overflow: hidden; color: var(--rdr-text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) { .apa-insights { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================================
   Phone view fixes (2026-11-06, full phone audit 360/390/430 + 980)
   ========================================================================== */

/* A row of tabs that is not inside the scrolling .rdr-secondary-nav (Industry pages, Automation rules) scrolls
   sideways instead of spilling past the screen, where page-level overflow-x:hidden made the last tabs unreachable. */
.rdr-secondary-tabs:not(.rdr-secondary-nav *),
.rdr-tab-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rdr-secondary-tabs:not(.rdr-secondary-nav *)::-webkit-scrollbar,
.rdr-tab-scroll::-webkit-scrollbar { display: none; }
.rdr-tab-scroll > * { flex-shrink: 0; white-space: nowrap; }

/* Performance / Dashboards: the KPI goal buttons wrap under the title and scroll sideways as one row. */
.rdr-kpi-toolbar { flex-wrap: wrap; }
.rdr-kpi-toolbar > * { min-width: 0; max-width: 100%; }
.rdr-segmented-control { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rdr-segmented-control::-webkit-scrollbar { display: none; }
.rdr-segmented-control > .rdr-seg-btn { flex-shrink: 0; }

/* AI Copilot: the sessions drawer is off-canvas below 1024px - hide it properly while closed so its controls are
   not reachable (or focusable) off-screen; the header wraps to two lines on phones instead of pushing buttons out. */
@media (max-width: 1024px) {
  .rdr-agent-sidebar { visibility: hidden; transition: transform 0.22s var(--rdr-ease), visibility 0s linear 0.22s; }
  .rdr-agent-sidebar.is-open { visibility: visible; transition: transform 0.22s var(--rdr-ease); }
}
@media (max-width: 640px) {
  .rdr-agent-header { height: auto; min-height: 56px; flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; }
  .rdr-agent-header > * { min-width: 0; }
  .rdr-agent-title-group { flex-wrap: wrap; min-width: 0; }
  .rdr-active-conv-title { max-width: 52vw; }
}

/* Notifications: on phones the time + actions column moves under the text instead of off the card. */
@media (max-width: 640px) {
  .rdr-notif-feed-card > .d-flex.justify-content-between { flex-wrap: wrap; }
  .rdr-notif-feed-card > .d-flex.justify-content-between > .flex-shrink-0 {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    text-align: left !important;
  }
  .rdr-notif-feed-card > .d-flex.justify-content-between > .flex-shrink-0 > .d-flex { flex-wrap: wrap; margin-top: 0 !important; }
}

/* Top bar stays pinned while scrolling (phone and desktop). overflow-x:hidden on the shell made .rdr-main its own
   scroll container, so the sticky .rdr-topbar stuck to an element that never scrolls and slid away with the page.
   overflow-x:clip clips the same way without creating a scroll container. Older browsers keep the old behaviour. */
@supports (overflow: clip) {
  .rdr-shell, .rdr-main { overflow-x: clip; }
  @media (max-width: 768px) {
    .rdr-main { overflow-x: clip !important; }
    /* Same for the content box: overflow-x:hidden made it a scroll container, so a sticky bar inside a page
       (Analytics phone app bar) stuck to a box that never scrolls. */
    .rdr-content { overflow-x: clip !important; }
  }
}

/* Date menu on phones: it was 100% of its button's wrapper (~200px), so presets were cut off ("This Mo...") and the
   second custom date spilled outside. Now as wide as the screen allows; the date boxes may shrink. */
.rdr-date-custom-row input[type="date"] { min-width: 0; }
@media (max-width: 640px) {
  .rdr-date-dropdown-menu {
    width: min(340px, calc(100vw - 24px)) !important;
    left: 0 !important;
    right: auto !important;
  }
}

/* Notifications drawer on phones: the unread pill drops under the title as one piece instead of breaking "75 / unread". */
.rdr-notif-drawer-header > div:first-child { min-width: 0; }
.rdr-notif-drawer-title { flex-wrap: wrap; row-gap: 4px; }

/* Ad -> Product on phones: product names get room for two lines instead of one word per line, and an opened row's
   ad list stays on screen (pinned to the left of the sideways-scrolling table) with its figures wrapping under it. */
@media (max-width: 640px) {
  .apa-product-name { min-width: 150px; }
  .apa-ad-name { max-width: 150px; }
  .apa-detail > td > * { position: sticky; left: 0; width: calc(100vw - 104px); max-width: calc(100vw - 104px); }
}

/* ==========================================================================
   Zoomed-in desktop (owner, 2026-11-06: "when I zoom in, everything sucks").
   Browser zoom 125-175% on a 1920 screen lays the page out at 1536-1100 CSS px.
   ========================================================================== */

/* Conversion funnel: step names and costs wrap to two lines instead of being cut to "OUTBOUND CLI...", and the
   rate chips between steps wrap their label instead of being clipped ("CHECKOUT I"). Layout unchanged. */
.ins-funnel-step-card { min-width: 0; }
.ins-funnel-step-top { align-items: flex-start; }
.ins-funnel-step-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; overflow-wrap: normal; word-break: normal; }
.ins-funnel-step-sub { white-space: normal; flex-wrap: wrap; column-gap: 4px; }
/* Horizontal funnel (container wider than 1150px): cards may shrink so the rate chips between them keep their
   width - before, fixed-width cards overflowed their slot and covered the chips ("3 OUT", "93.4 LPV R"). */
@container (min-width: 1351px) {
  .ins-funnel-step-wrapper { flex: 1 1 0; min-width: 0; }
  .ins-funnel-step-card { flex: 1 1 0; min-width: 118px; }
  .ins-funnel-connector { flex: 0 0 54px; min-width: 54px; }
  .ins-funnel-connector-badge { max-width: 54px; padding: 3px 4px; }
}
.ins-funnel-connector-label { white-space: normal; text-align: center; line-height: 1.15; }

/* Goal / segmented buttons: the icons used "me-1.5", which Bootstrap 5.1 does not have - icon glued to text */
.rdr-seg-btn { gap: 6px; }

/* Sidebar: room under the last item so it scrolls fully clear of the footer instead of sitting half under it */
.rdr-nav { padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }

/* Audience + Ad -> Product stat cards: the column count followed the WINDOW width (4/5 columns until 1200/992px),
   ignoring the 240px sidebar - zoomed in, cards were squeezed until labels showed "..." and the trend chips ran
   off the card. Now as many columns as the content area really fits, each card at least 230px. */
/* Even rows: 4 cards as 2x2 or 4 across, 5 cards as 3+2 or 5 across (never one card alone on a row). Breakpoints
   are window widths that already account for the 240px sidebar. */
.aud-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1260px) { .aud-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aud-kpi-grid.apa-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .aud-kpi-grid.apa-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .aud-kpi-grid.apa-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .aud-kpi-grid, .aud-kpi-grid.apa-kpi-grid { grid-template-columns: minmax(0, 1fr); } }
.aud-kpi-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.aud-kpi-foot { flex-wrap: wrap; row-gap: 4px; }

/* Top bar at zoom: the page title could not shrink on desktop (only the phone rule allowed it), so long titles
   ("Insider - Meta vs Shopify & ...") pushed the user menu off the screen at 1100-1280 CSS px. The title now
   truncates first; below 1280px the user button shows just the avatar (the e-mail is in its menu). */
.rdr-topbar-heading { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.rdr-topbar-heading .rdr-topbar-title { min-width: 0; }
@media (max-width: 1279.98px) {
  .adv-user-pill .adv-user-email.d-lg-inline { display: none !important; }
  .adv-topbar-workspace-chip .adv-workspace-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* AI Copilot header: its buttons (SFX, Approval queue) only wrapped on phones - at 1100-1280px they ran out of the
   header. Keep single-row on desktop via title truncation; wrap cleanly on narrow viewports. */
.rdr-agent-header { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px 12px; padding-top: 8px; padding-bottom: 8px; }
.rdr-agent-header > * { min-width: 0; }
.rdr-agent-header > :last-child { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
.rdr-vibe-dropdown-wrap, .rdr-ai-connection-indicator { flex-shrink: 0; }
/* Stacked funnel (container <= 1150px): cards kept "flex: 1 0 160px", which in a column means 160px of HEIGHT -
   tall cards with empty space. They now size to their content. Between 600 and 1150px (zoomed-in desktop, tablets)
   the steps form a 3-column grid instead of six full-width rows, each with its conversion rate under it. */
@container (max-width: 1150px) {
  .ins-funnel-step-card { flex: 0 0 auto; }
}
@container (min-width: 600px) and (max-width: 1150px) {
  .ins-funnel-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ins-funnel-step-wrapper { justify-content: flex-start; }
  .ins-funnel-connector { padding: 6px 0 0; }
}

/* 1151-1350px containers (about 125% zoom): too tight for six steps in a row ("IMPRESSIO-NS"), so the same 3-column
   grid as below 1150px, with the rate chip under each card. */
@container (min-width: 1151px) and (max-width: 1350px) {
  .ins-funnel-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow-x: visible; padding-bottom: 0; }
  .ins-funnel-step-wrapper { flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; gap: 0; }
  .ins-funnel-step-card { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
  .ins-funnel-connector { flex-direction: row; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: 6px 0 0; gap: 8px; }
  .ins-funnel-arrow-line i { transform: rotate(90deg); display: inline-block; font-size: 14px; color: var(--rdr-accent); }
  .ins-funnel-connector-badge { flex-direction: row; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 12px; max-width: none; }
  .ins-funnel-connector-label { white-space: nowrap; margin-top: 0; }
}

/* ============================================================================
   ANALYTICS - PHONE VIEW ("Concept A", 2026-11-07)
   In the phone layout (<=768px, the bottom-nav shell) Ads Analytics opens with a compact
   app bar, a one-row date trigger, a 2 x 2 key-results card and a 3 x 2 funnel instead of
   the tall funnel stack and sixteen stacked KPI cards. Desktop is unchanged: every
   .ins-m-* piece below is hidden above 768px. Colours are the Aurora/Midnight tokens.
   ============================================================================ */
.rdr-filter-bar-summary,
.ins-m-ccy,
.ins-m-sheet-head,
.ins-m-sheet-backdrop { display: none; }
@media (min-width: 769px) {
  .ins-m-only { display: none !important; }
}

@media (max-width: 768px) {
  .ins-m-hide { display: none !important; }
  /* one 12px rhythm between the blocks (desktop: 20px gap plus per-block margins) */
  .ins-analytics { gap: 12px; }
  .ins-analytics > .u-margin-bottom-16px,
  .ins-analytics > .u-margin-bottom-12px,
  .ins-analytics > .ins-m-only,
  .ins-analytics .rdr-filter-bar { margin-bottom: 0 !important; }

  /* -- 1. sticky app bar under the top bar: [Ads | Shopify] ........ [EGP v] [filter] -- */
  .ins-analytics .ins-m-appbar {
    position: sticky; top: 52px; z-index: 90;
    margin: -14px -12px 0; padding: 8px 12px;
    flex-wrap: nowrap; gap: 8px;
    background: color-mix(in srgb, var(--rdr-card) 95%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--rdr-border);
  }
  .ins-analytics .ins-m-appbar .ins-toolbar-left,
  .ins-analytics .ins-m-appbar .ins-toolbar-right { display: contents !important; }
  .ins-analytics .ins-m-appbar .ins-page-title,
  .ins-analytics .ins-m-appbar .rdr-ccy-toolbar-wrap { display: none !important; }
  .ins-analytics .ins-m-appbar .rdr-analytics-toggle { order: 0; margin-right: auto; flex: 0 1 auto; min-width: 0; }
  .ins-analytics .ins-m-appbar .rdr-analytics-toggle-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
  .ins-analytics .ins-m-appbar .ins-m-ccy { order: 1; }
  .ins-analytics .ins-m-appbar .ins-filter-pill { order: 2; position: relative; min-width: 44px; min-height: 44px; padding: 0 12px; justify-content: center; flex: none; }
  .ins-analytics .ins-m-appbar .ins-filter-pill-text { display: none; }
  .ins-analytics .ins-m-appbar .ins-filter-pill .ins-filter-badge { position: absolute; top: 2px; right: 0; }

  .ins-m-ccy {
    position: relative; display: inline-flex; align-items: center; flex: none;
    height: 44px; margin: 0; border-radius: 999px;
    border: 1px solid var(--rdr-border); background: var(--rdr-card); color: var(--rdr-text);
    font-size: 13px; font-weight: 700;
  }
  .ins-m-ccy select {
    -webkit-appearance: none; appearance: none; height: 100%; max-width: 104px;
    padding: 0 30px 0 14px; border: 0; border-radius: inherit;
    background: transparent; color: inherit; font: inherit; cursor: pointer;
  }
  .ins-m-ccy select:focus-visible { outline: 2px solid var(--rdr-accent-ring); outline-offset: 1px; }
  .ins-m-ccy option { color: var(--rdr-text); background: var(--rdr-card); }
  .ins-m-ccy i { position: absolute; right: 12px; font-size: 11px; color: var(--rdr-text-muted); pointer-events: none; }
  .ins-m-ccy.is-set { border-color: var(--rdr-accent); color: var(--rdr-accent); }
  .ins-m-ccy.is-mixed { border-color: var(--rdr-warning); }

  /* -- 2. filters as a bottom sheet (below .ins-modal-overlay, 1000, so "Save" still opens over it) -- */
  .ins-analytics .ins-m-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 985;
    background: rgba(8, 10, 22, .48);
  }
  .ins-analytics .ins-filter-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
    max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0; border-bottom: 0;
    background: var(--rdr-card);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .28);
  }
  .ins-analytics .ins-m-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    margin: 0 -16px 12px; padding: 18px 16px 8px;
    background: var(--rdr-card); border-bottom: 1px solid var(--rdr-border);
  }
  .ins-m-sheet-grip { position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--rdr-border-strong); }
  .ins-m-sheet-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--rdr-text); }
  .ins-m-sheet-title i { color: var(--rdr-accent); }
  .ins-m-sheet-close { width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 12px; background: transparent; color: var(--rdr-text-muted); }
  .ins-analytics .ins-filter-panel .ins-filter-row { flex-direction: column; gap: 14px; }
  .ins-analytics .ins-filter-panel .ins-filter-group { min-width: 0; width: 100%; }

  /* -- 3. date bar (shared partial, every page): one row "01 Nov - 07 Nov 2026 [This Month] v" -- */
  .rdr-filter-bar-summary {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
    padding: 0 4px; border: 0; background: transparent; text-align: left;
    color: var(--rdr-text); font-size: 13.5px; font-weight: 600;
  }
  .rdr-filter-bar-summary > .bi-calendar3 { color: var(--rdr-accent); font-size: 15px; }
  .rdr-fbs-range { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rdr-fbs-chip { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--rdr-accent-light); color: var(--rdr-accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  .rdr-fbs-compare { flex: none; color: var(--rdr-highlight-strong); font-size: 11px; font-weight: 700; white-space: nowrap; }
  .rdr-fbs-caret { flex: none; color: var(--rdr-text-muted); font-size: 12px; }
  .rdr-filter-bar:not(.is-m-open) > .rdr-filter-bar-left,
  .rdr-filter-bar:not(.is-m-open) > .rdr-filter-bar-right { display: none !important; }
  .rdr-filter-bar.is-m-open > .rdr-filter-bar-summary { padding-bottom: 8px; border-bottom: 1px solid var(--rdr-border); }
  .rdr-filter-bar.is-m-open .rdr-preset-group {
    display: grid !important; grid-template-columns: 1fr 1fr; width: 100%;
    overflow: visible !important; gap: 4px; padding: 4px !important;
  }
  .rdr-filter-bar.is-m-open .rdr-preset-btn { min-height: 40px; padding: 6px 8px !important; font-size: 12px !important; white-space: normal; }

  /* -- 4. key results, 2 x 2 -- */
  .ins-m-macro { padding: 0 !important; overflow: hidden; }
  .ins-m-macro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .ins-m-macro-tile { min-width: 0; padding: 14px 14px 12px; }
  .ins-m-macro-tile:nth-child(odd) { border-right: 1px solid var(--rdr-border); }
  .ins-m-macro-tile:nth-child(-n+2) { border-bottom: 1px solid var(--rdr-border); }
  .ins-m-macro-tile dt { margin: 0 0 6px; color: var(--rdr-text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .ins-m-macro-tile dd { margin: 0; }
  .ins-m-macro-value {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px;
    color: var(--rdr-text); font-size: clamp(17px, 5.2vw, 22px); font-weight: 800; letter-spacing: -.02em;
    line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .ins-m-macro-value small { color: var(--rdr-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
  .ins-m-macro-value.is-accent { color: var(--rdr-accent); }
  .ins-m-macro-tile dd.ins-m-macro-sub { display: flex; align-items: center; gap: 2px; margin-top: 6px; color: var(--rdr-text-muted); font-size: 11.5px; font-weight: 600; }
  .ins-m-macro-tile dd.ins-m-macro-sub.is-positive { color: var(--rdr-positive); }

  /* -- 5. funnel, 3 x 2 (Traffic row, Store row) -- */
  .ins-m-funnel { padding: 14px 12px 12px !important; }
  .ins-m-funnel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
  .ins-m-funnel-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--rdr-text); font-size: 14px; font-weight: 700; }
  .ins-m-funnel-head h2 i { color: var(--rdr-accent); }
  .ins-m-funnel-cvr { padding: 3px 10px; border-radius: 999px; background: var(--rdr-accent-light); color: var(--rdr-text-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  .ins-m-funnel-cvr strong { color: var(--rdr-accent); }
  .ins-m-funnel-row + .ins-m-funnel-row { margin-top: 10px; }
  .ins-m-funnel-row-label { margin: 0 2px 6px; color: var(--rdr-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .ins-m-funnel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
  .ins-m-funnel-step {
    display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 8px 9px;
    border: 1px solid var(--rdr-border); border-radius: 12px;
    background: color-mix(in srgb, var(--rdr-accent) 5%, var(--rdr-card));
  }
  .ins-m-funnel-label { min-height: 2.4em; color: var(--rdr-text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }
  .ins-m-funnel-value { color: var(--rdr-text); font-size: clamp(15px, 4.6vw, 19px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .ins-m-funnel-sub { color: var(--rdr-text-muted); font-size: 10.5px; font-weight: 600; line-height: 1.25; }
  .ins-m-funnel-step.is-atc { background: var(--rdr-highlight-light); border-color: color-mix(in srgb, var(--rdr-highlight) 32%, transparent); }
  .ins-m-funnel-step.is-atc .ins-m-funnel-value { color: var(--rdr-highlight-strong); }
  .ins-m-funnel-step.is-ic { background: var(--rdr-accent-light); border-color: color-mix(in srgb, var(--rdr-accent) 30%, transparent); }
  .ins-m-funnel-step.is-ic .ins-m-funnel-value { color: var(--rdr-accent); }
  .ins-m-funnel-step.is-purchases { background: var(--rdr-positive-light); border-color: color-mix(in srgb, var(--rdr-positive) 35%, transparent); }
  .ins-m-funnel-step.is-purchases .ins-m-funnel-value { color: var(--rdr-positive); }
  .ins-m-funnel-foot {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; padding-top: 10px;
    border-top: 1px dashed var(--rdr-border); color: var(--rdr-text-muted); font-size: 11.5px; font-weight: 600;
  }
  .ins-m-funnel-foot strong { margin-left: 4px; font-weight: 800; }
  .ins-m-funnel-foot .is-positive { color: var(--rdr-positive); }
  .ins-m-funnel-foot .is-warning { color: var(--rdr-warning-text); }

  /* -- 6. the full KPI card set: folded behind a toggle for Sales/All, compact when open -- */
  .ins-m-kpi-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
    margin: 0; border: 1px dashed var(--rdr-border-strong); border-radius: 12px;
    background: transparent; color: var(--rdr-accent); font-size: 13px; font-weight: 700;
  }
  .ins-analytics .ins-kpi-row.ins-m-folded { display: none !important; }
  .ins-analytics .ins-kpi-row .ins-kpi-card { padding: 10px 12px !important; min-height: 0 !important; }
  .ins-analytics .ins-kpi-row .rdr-kpi-icon-pill { display: none; }
  .ins-analytics .ins-kpi-row .rdr-kpi-card-body { margin: 4px 0 2px; }
  .ins-analytics .ins-kpi-row .rdr-metric-tile-value { font-size: clamp(15px, 4.8vw, 19px) !important; }
  .ins-analytics .ins-kpi-row .rdr-metric-tile-comparison { font-size: 11px; }
}

/* Long Meta names with no spaces ("TestCreative_ABO_July_...") pushed notification titles out of their card
   on phones; badges in the Benchmark cohort bar (e.g. "Estimated FX Conversion") could poke 3px past it. */
.rdr-notif-card-title { overflow-wrap: anywhere; min-width: 0; }
/* .min-w-0 is used by the notification cards but Bootstrap 5.1 has no such class, so those
   flex columns kept min-width:auto and one long name in the summary stretched the whole card. */
.min-w-0 { min-width: 0 !important; }
.rdr-notif-feed-card .min-w-0 { overflow-wrap: anywhere; }
.rdr-cohort-bar { min-width: 0; }
.rdr-cohort-bar .badge { max-width: 100%; white-space: normal; text-align: left; }

/* =====================================================================================================
   ANALYTICS - PHONE TABLES + TREND (owner, 2026-11-07: "the tables and the graph look so cluttered")
   Campaign Performance: search, status and objective stay; the eight other controls fold behind
   "Table options" (the currency already sits in the app bar). Trend: axis/type/zoom controls fold behind
   "Customise"; no value over every point. Top lists: name + spend + ROAS that fit the screen, no
   sideways scroll. Desktop is unchanged (.ins-table-tools is display: contents there).
   ===================================================================================================== */
.ins-table-tools { display: contents; }
@media (max-width: 768px) {
  .ins-m-tools-btn,
  .rdr-chart-m-tools-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--rdr-border); background: var(--rdr-card); color: var(--rdr-text);
    font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  .ins-m-tools-btn.is-active,
  .rdr-chart-m-tools-btn.is-active { border-color: var(--rdr-accent); color: var(--rdr-accent); background: var(--rdr-accent-light); }

  /* Campaign Performance header */
  .ins-analytics .ins-card-header .ins-table-controls { width: 100%; justify-content: flex-start; }
  .ins-analytics .ins-table-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
  .ins-analytics .ins-table-filter-bar .ins-table-search-box { flex: 1 1 100%; max-width: none; }
  .ins-analytics .ins-table-filter-bar .ins-table-search-input { width: 100%; }
  .ins-analytics .ins-table-filter-bar .ins-table-obj-select { flex: 1 1 120px; min-width: 0; width: auto; }
  .ins-analytics .ins-table-filter-bar .ins-m-tools-btn { margin-left: auto; }
  .ins-table-tools:not(.is-m-open) { display: none; }
  .ins-table-tools.is-m-open {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%; padding: 10px; border: 1px solid var(--rdr-border); border-radius: 14px; background: var(--rdr-surface-2);
  }
  .ins-table-tools.is-m-open > * { margin: 0; }

  /* Campaign tree: the name column left room for one number; give the numbers half the width. Tapping a name
     still filters the report (and an ad opens its preview), so the hover-style row icons go on phones. */
  .ins-analytics .ins-tree-table .ins-td-name,
  .ins-analytics .ins-tree-table th.camp-col-name { min-width: 0 !important; width: 48vw; max-width: 48vw !important; }
  .ins-analytics .ins-tree-table .ins-row-actions { display: none !important; }
  /* the status column is a green/red dot - its "STATUS" heading made it ~100px wide */
  .ins-analytics .ins-tree-table th.camp-col-status { font-size: 0; width: 34px; padding-left: 4px; padding-right: 4px; }
  .ins-analytics .ins-tree-table td.camp-col-status { width: 34px; padding-left: 4px; padding-right: 4px; }

  /* Trend */
  .rdr-chart-m-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
  .rdr-chart-m-hint { font-size: 12px; color: var(--rdr-text-muted); min-width: 0; }
  .rdr-super-chart-toolbar:not(.is-m-open) { display: none !important; }

  /* Top ad sets / campaigns / creatives */
  .ins-top-tables-grid .ins-table-wrap { overflow-x: hidden; }
  .ins-top-table { table-layout: fixed; width: 100%; min-width: 0 !important; }
  .ins-top-table th, .ins-top-table td { padding-left: 10px; padding-right: 10px; }
  .ins-top-table th:first-child, .ins-top-table td:first-child { padding-left: 16px; }
  .ins-top-table th:last-child, .ins-top-table td:last-child { padding-right: 16px; }
  .ins-top-table .ins-td-name { min-width: 0 !important; max-width: none !important; white-space: normal; }
  .ins-top-table .ins-td-name-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.3; font-size: 13px;
  }
  .ins-top-table .ins-row-actions { display: none !important; }
  .ins-top-table th:nth-child(2) { width: 38%; }
  .ins-top-table th:nth-child(3) { width: 19%; }
  .ins-top-table td.ins-td-r { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
  .ins-top-table.is-creatives th:nth-child(1) { width: 56px; }
  .ins-top-table.is-creatives th:nth-child(2) { width: auto; }
  .ins-top-table.is-creatives th:nth-child(3) { width: 36%; }
  .ins-top-table.is-creatives th:nth-child(4) { width: 19%; }
  .ins-top-table.is-creatives th:nth-child(5), .ins-top-table.is-creatives td:nth-child(5),
  .ins-top-table.is-creatives th:nth-child(6), .ins-top-table.is-creatives td:nth-child(6) { display: none; }
  .ins-top-table.is-creatives td:first-child { padding-right: 0; }
}

/* Overview account filter (owner, 2026-11-07: "I cannot see the ad accounts"): the menu hung from the button's
   right edge, so with the toolbar on the left (tablets, phones in Desktop-site mode) it opened leftwards under the
   sidebar and only the "Due ..." badges showed. It now opens to the right and is wide enough for the names. */
.rdr-dropdown-menu.rdr-dropdown-left { left: 0; right: auto; }
.rdr-acct-menu { min-width: 300px; max-width: min(380px, calc(100vw - 24px)); }
.rdr-acct-menu .rdr-dropdown-body { max-height: min(360px, 60vh); }
.rdr-acct-menu .rdr-check-name { min-width: 0; }
.rdr-acct-menu .rdr-check-badge { flex-shrink: 0; white-space: nowrap; }

/* "Active only" is hiding rows that count in the cards above - say so where the totals are read (owner, 2026-11-07) */
.camp-search-note.camp-status-note { background: var(--rdr-warning-light); color: var(--rdr-warning-strong); border: 1px solid var(--rdr-warning-border); }
.camp-search-note.camp-status-note .btn-link { font-weight: 700; color: inherit; text-decoration: underline; }

/* Phones (owner, 2026-11-07: "I cannot switch workspace in phone"): the top bar clipped its own overflow
   (overflow-x: hidden makes overflow-y auto), so the workspace, notification and profile menus opened as a strip
   cut off at the bar's 52px edge - drawn, but nothing in them could be tapped. Its content fits (checked at
   360/390), so it no longer clips; a long menu scrolls inside itself instead. */
@media (max-width: 768px) {
  .rdr-topbar { overflow: visible !important; }
  .rdr-topbar .dropdown-menu.show {
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: calc(100vw - 16px);
  }
  .rdr-topbar .dropdown-menu .dropdown-item { min-height: 44px; }
}

/* =====================================================================================================
   PHONE - media-buyer test fixes (owner, 2026-11-07: "act as a media buyer phone user and test everything")
   ===================================================================================================== */
@media (max-width: 768px) {
  /* Overview and Campaigns tables: same fold as Analytics - the controls sit behind "Table options" */
  .ins-card-header .ins-table-controls { width: 100%; justify-content: flex-start; }
  .ins-card-header .ins-table-controls .ins-m-tools-btn { margin-left: auto; }
  .camp-card-header .camp-search { flex: 1 1 100%; }
  /* tree tables: the name column took the whole screen, so on/off, budget and spend were all off to the right */
  .ins-tree-table td.camp-col-name,
  .ins-tree-table th.camp-col-name { min-width: 0 !important; max-width: 56vw !important; width: 56vw; }

  /* tap targets that measured 20-38px tall in the test */
  .ins-filter-chip-btn { min-height: 40px; }
  .rdr-overview-header-controls .rdr-btn,
  .rdr-overview-header-controls .ins-select { min-height: 40px; }
  .rdr-secondary-tab { min-height: 44px; }
  .ins-card-header .ins-btn-sm,
  .ins-table-tools .ins-btn { min-height: 40px; }
  .rdr-date-dropdown-menu button { min-height: 40px; }
  .rdr-topbar .dropdown:last-child > [data-bs-toggle=dropdown] { min-width: 44px; }
  .ins-tree-toggle { position: relative; }
  .ins-tree-toggle::before { content: ""; position: absolute; inset: -12px; }   /* 44px hit area, same look */
  /* campaign row pencils / add were 21px; the name wraps to two lines to make room */
  .ins-row-edit-btn { min-width: 32px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  /* ...and they go on their own line under the name, so the name keeps the column's full width */
  .ins-tree-table .ins-tree-name-line { flex-wrap: wrap; row-gap: 0; }
  .ins-tree-table .ins-tree-name-line .ins-tree-name-text { flex: 1 1 calc(100% - 34px); min-width: 0; }
  .ins-tree-table .ins-tree-name-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; overflow: hidden; }

  /* Overview heading took two lines of 40px type before any number */
  .rdr-overview-header h1 { font-size: 24px !important; line-height: 1.2; }
}
/* the workspace chip showed only an icon and two arrows on phones - you could not tell which workspace you were in */
@media (max-width: 420px) {
  .adv-topbar-workspace-chip .adv-workspace-name { display: inline-block !important; max-width: 64px; }
  .adv-topbar-workspace-chip.dropdown-toggle::after { display: none; }
}
@media (max-width: 370px) {
  .adv-topbar-workspace-chip .adv-workspace-name { max-width: 44px; }
}

/* =====================================================================================================
   Phone report follow-ups (2026-11-07, docs/ui-audit/reports/2026-11-07/REPORT.md "worth doing next")
   ===================================================================================================== */
@media (max-width: 768px) {
  /* KPI cards on Overview / Campaigns: every card kept a 120px minimum height, so six cards filled the screen
     before the table. Content height only now. */
  .rdr-overview-kpi-grid .ins-kpi-card { min-height: 0 !important; gap: 4px; }
  .rdr-overview-kpi-grid .ins-kpi-card .u-margin-top-space-2 { margin-top: 2px !important; }

  /* AI Advisor: timeframe and quick-action pills share ONE sideways-scrolling row (they took two rows plus a label
     above the message box) */
  .rdr-omnibox-prebar { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px;
                        overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rdr-omnibox-prebar::-webkit-scrollbar { display: none; }
  .rdr-omnibox-prebar .rdr-timeframe-pills,
  .rdr-omnibox-prebar .rdr-fun-pills { flex: 0 0 auto; overflow: visible; margin: 0 !important; }
  .rdr-omnibox-prebar .rdr-prebar-label { display: none; }
  .rdr-omnibox-safety { font-size: 11px; }
}
/* Creatives on touch screens: the play/view + spend overlay only appeared on mouse hover, so a phone showed no cue
   that the picture opens the ad. Shown, lighter, wherever there is no hover. */
@media (hover: none) {
  .ins-creative-overlay { opacity: 1; background: linear-gradient(to top, rgba(15,23,42,.6) 0%, rgba(15,23,42,0) 42%); }
}
/* Creatives date presets: inline on desktop; one sideways-scrolling row on phones (they took five rows) */
.crv-range-scroller { display: contents; }
@media (max-width: 768px) {
  .crv-range-scroller { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; width: 100%; padding-bottom: 2px;
                        scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .crv-range-scroller::-webkit-scrollbar { display: none; }
  .crv-range-scroller > .ins-btn-range { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
}

/* Frozen columns on every tree level (owner, 2026-11-07: "the freeze column does not work on expanded rows").
   The level rules (.ins-tree-lvl-1/2/3 .ins-td-name { position: relative } - for the indent lines) came later than
   the freeze rules and won, so ad set and ad names scrolled away while campaign names stayed. Sticky is itself a
   positioned box, so the indent lines (::before/::after) still draw. Solid background so numbers don't show through. */
.ins-freeze-1 .ins-tree-row td.camp-col-name,
.ins-freeze-2 .ins-tree-row td.camp-col-name,
.ins-freeze-1 .ins-tree-row td.camp-col-select,
.ins-freeze-2 .ins-tree-row td.camp-col-select,
.ins-freeze-2 .ins-tree-row td.camp-col-status { position: sticky !important; background-color: var(--rdr-card); }
.ins-freeze-1 .ins-tree-row.ins-tree-lvl-1 td.camp-col-name,
.ins-freeze-2 .ins-tree-row.ins-tree-lvl-1 td.camp-col-name,
.ins-freeze-1 .ins-tree-row.ins-tree-lvl-1 td.camp-col-select,
.ins-freeze-2 .ins-tree-row.ins-tree-lvl-1 td.camp-col-select,
.ins-freeze-2 .ins-tree-row.ins-tree-lvl-1 td.camp-col-status { background-color: color-mix(in srgb, var(--rdr-card) 96%, #94a3b8); }
.ins-freeze-1 .ins-tree-row:hover td.camp-col-name,
.ins-freeze-2 .ins-tree-row:hover td.camp-col-name,
.ins-freeze-1 .ins-tree-row:hover td.camp-col-select,
.ins-freeze-2 .ins-tree-row:hover td.camp-col-select,
.ins-freeze-2 .ins-tree-row:hover td.camp-col-status { background-color: var(--rdr-surface-2) !important; }

/* ── Auth pages (owner 2026-11-08: "the reset password page is very bad", "on mobile everything is very huge") ── */
.adv-auth-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 14px;
  background: var(--rdr-accent-light, rgba(109, 94, 245, .12)); color: var(--rdr-accent, #6d5ef5); }
a.adv-auth-submit { display: inline-flex; align-items: center; text-decoration: none; }
/* Identity pages still on the stock template (Lockout, Access denied, two-factor sign-in): same card look. */
.adv-auth-panel > h1 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; color: var(--rdr-text); }
.adv-auth-panel > h2, .adv-auth-panel > p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--rdr-text-muted); margin: 0 0 18px; }
.adv-auth-panel > hr { display: none; }
.adv-auth-panel > .row { margin: 0; }
.adv-auth-panel > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0; }
.adv-auth-panel .form-floating > .form-control { height: 46px; min-height: 46px; border-radius: var(--rdr-radius-sm, 10px); }
.adv-auth-panel .btn-lg { font-size: 15px; padding: 10px 16px; border-radius: var(--rdr-radius-sm, 10px); }

@media (max-width: 600px) {
  .adv-auth-main { padding: 20px 16px; justify-content: flex-start; }
  .adv-auth-mobile-logo { font-size: 17px; margin-bottom: 14px; }
  .adv-auth-mobile-logo img { width: 24px; height: 24px; }
  .adv-auth-panel { padding: 20px 16px 18px; border-radius: 14px; }
  .adv-auth-head { margin-bottom: 16px; }
  .adv-auth-title, .adv-auth-panel > h1 { font-size: 20px; letter-spacing: -.3px; margin-bottom: 4px; }
  .adv-auth-sub, .adv-auth-panel > h2, .adv-auth-panel > p { font-size: 13px; }
  .adv-auth-form { gap: 12px; }
  .adv-field { gap: 5px; }
  .adv-label { font-size: 12.5px; }
  .adv-input, .adv-auth-panel .form-floating > .form-control { height: 40px; min-height: 40px; font-size: 14px; }
  .adv-password-toggle { width: 32px; height: 32px; }
  .adv-auth-submit, .adv-auth-panel .btn-lg { height: 40px; font-size: 14px; }
  .adv-check { font-size: 12.5px; gap: 8px; }
  .adv-auth-alt { font-size: 13px; }
  .adv-auth-fine, .adv-auth-legal { font-size: 11.5px; }
  .adv-auth-footer-actions { padding-top: 12px; }
  .adv-auth-icon { width: 36px; height: 36px; font-size: 18px; margin-bottom: 10px; }
}
.adv-auth-icon-warn { background: rgba(245, 158, 11, .14); color: #d97706; }

/* Workspace settings (owner 2026-11-08: "the settings page ui is very bad"): sections with label/value rows. */
.ws-section { margin-bottom: 18px; padding: 0; overflow: hidden; }
.ws-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 10px; }
.ws-section-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--rdr-text); }
.ws-section-body { padding: 4px 20px 18px; }
.ws-section-body p { margin: 0; font-size: 13.5px; color: var(--rdr-text-secondary); line-height: 1.55; }
.ws-split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ws-rows { border-top: 1px solid var(--rdr-border); }
.ws-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--rdr-border); }
.ws-row:last-child { border-bottom: 0; }
.ws-row-label { font-size: 13px; font-weight: 600; color: var(--rdr-text-muted); }
.ws-row-value { font-size: 14px; color: var(--rdr-text); min-width: 0; }
.ws-inline-form { display: flex; gap: 8px; max-width: 460px; }
.ws-inline-form .rdr-input { flex: 1; min-width: 0; height: 34px; }
.ws-help { font-size: 12px; color: var(--rdr-text-muted); margin-top: 4px; }
.ws-code { font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--rdr-surface-2); color: var(--rdr-text-secondary); }
.ws-link { margin-left: 10px; font-size: 12.5px; }
.ws-notice { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 18px; border-radius: 12px; font-size: 13px;
  background: var(--rdr-accent-light, rgba(109, 94, 245, .1)); color: var(--rdr-text); }
.ws-notice i { color: var(--rdr-accent); font-size: 17px; }
.ws-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 20px 18px; }
.ws-module { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rdr-border); border-radius: 12px; min-width: 0; }
.ws-module img { border-radius: 8px; flex: 0 0 auto; }
.ws-module-text { flex: 1; min-width: 0; }
.ws-module-name { font-weight: 700; font-size: 13.5px; }
.ws-module-cat { font-size: 11.5px; color: var(--rdr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-module-state { font-size: 12px; font-weight: 600; color: var(--rdr-positive, #10b981); white-space: nowrap; }
.ws-module-state.is-off { color: var(--rdr-text-muted); }
.ws-module.is-off img { filter: grayscale(.8); opacity: .6; }
.ws-danger { border-color: color-mix(in srgb, var(--rdr-negative, #ef4444) 35%, var(--rdr-border)); }
.ws-danger .ws-section-head h2 { color: var(--rdr-negative, #ef4444); }
@media (max-width: 900px) { .ws-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ws-section-head { padding: 12px 14px 8px; }
  .ws-section-body { padding: 2px 14px 14px; }
  .ws-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; }
  .ws-split { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ws-modules { grid-template-columns: 1fr; padding: 2px 14px 14px; gap: 6px; }
  .ws-module { padding: 8px 10px; }
}

/* Your workspaces: a header row you can read (owner 2026-11-08: "I cant read anything from this banner above the table"). */
.ws-list-table thead th { font-size: 12.5px; font-weight: 700; color: var(--rdr-text-secondary); text-transform: none; letter-spacing: 0; padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 600px) { .ws-list-table thead th { font-size: 12px; } }

/* Push notifications card on /notifications */
.push-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--rdr-border); border-radius: 14px; background: var(--rdr-card, #fff); }
.push-card-icon { font-size: 22px; color: var(--rdr-accent); flex: 0 0 auto; }
.push-card-text { flex: 1; min-width: 0; }
.push-card-title { font-weight: 700; font-size: 14px; }
.push-card-sub { font-size: 12.5px; color: var(--rdr-text-muted); }
.push-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.push-card[data-status="on"] .push-card-icon { color: var(--rdr-positive, #10b981); }
.push-card[data-status="blocked"] .push-card-icon, .push-card[data-status="unconfigured"] .push-card-icon { color: var(--rdr-text-muted); }
@media (max-width: 600px) { .push-card { flex-wrap: wrap; padding: 12px; } .push-card-actions { width: 100%; } }

/* "Updating today's numbers" note (auto-refresh.js) */
.adv-auto-refresh { position: fixed; right: 16px; bottom: 16px; z-index: 1060; display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--rdr-card, #fff); color: var(--rdr-text); border: 1px solid var(--rdr-border);
  box-shadow: 0 8px 24px rgba(20, 17, 43, .15); }
.adv-auto-refresh.is-done i { color: var(--rdr-positive, #10b981); }
.adv-auto-refresh-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rdr-border); border-top-color: var(--rdr-accent); animation: adv-spin .8s linear infinite; }
@keyframes adv-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .adv-auto-refresh { right: 10px; left: auto; top: 54px; bottom: auto; font-size: 12px; } }   /* top: never over a message box or the bottom bar */

/* Platform > Users: Manage opens a side panel (owner 2026-11-08: "this admin panel is super hard to use"). */
.plt-drawer { width: min(480px, 100vw) !important; background: var(--rdr-card, #fff); color: var(--rdr-text); }
.plt-drawer .offcanvas-header { border-bottom: 1px solid var(--rdr-border); gap: 12px; }
.plt-drawer .plt-manage-panel { position: static !important; width: auto !important; max-height: none !important; box-shadow: none !important; border: 0 !important; padding: 16px 18px !important; }
.plt-drawer .plt-manage-panel > .small.fw-bold { font-size: 13px !important; margin-top: 18px; }
.plt-drawer .plt-manage-panel > .small.fw-bold:first-child { margin-top: 0; }
.plt-drawer .plt-manage-box { padding: 12px; border: 1px solid var(--rdr-border); border-radius: 12px; }

/* Date bar on wider screens (owner 2026-11-08, "check all the pages for cluttered elements"): one button
   "01 Nov - 08 Nov 2026 [This Month] v" that opens the presets and custom dates as a dropdown, instead of
   eleven preset buttons over two rows. The phone fold-open layout above is unchanged. */
@media (min-width: 769px) {
  .rdr-filter-bar { position: relative; flex-wrap: nowrap; }
  .rdr-filter-bar > .rdr-filter-bar-summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px;
    border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-sm); background: var(--rdr-elevated);
    color: var(--rdr-text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .rdr-filter-bar > .rdr-filter-bar-summary:hover { border-color: var(--rdr-accent); }
  .rdr-filter-bar-summary > .bi-calendar3 { color: var(--rdr-accent); }
  .rdr-fbs-range { font-variant-numeric: tabular-nums; }
  .rdr-fbs-chip { padding: 2px 9px; border-radius: 999px; background: var(--rdr-accent-light); color: var(--rdr-accent); font-size: 11.5px; font-weight: 700; }
  .rdr-fbs-compare { color: var(--rdr-highlight-strong); font-size: 11px; font-weight: 700; }
  .rdr-fbs-caret { color: var(--rdr-text-muted); font-size: 11px; }
  .rdr-filter-bar:not(.is-m-open) > .rdr-filter-bar-left { display: none; }
  .rdr-filter-bar.is-m-open > .rdr-filter-bar-left {
    position: absolute; top: calc(100% + 6px); left: 10px; z-index: 1040;
    width: min(520px, calc(100% - 20px)); flex-direction: column; align-items: stretch; gap: 10px;
    padding: 10px; background: var(--rdr-card); border: 1px solid var(--rdr-border);
    border-radius: var(--rdr-radius); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  }
  .rdr-filter-bar.is-m-open .rdr-preset-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .rdr-filter-bar.is-m-open .rdr-preset-btn { text-align: left; white-space: normal; padding: 7px 10px; }
  .rdr-filter-bar.is-m-open .rdr-date-range-wrap { justify-content: flex-start; }
  .rdr-filter-bar-right { flex-wrap: nowrap; gap: 10px; }
}
/* Creatives: the Fatiguing filter is a button; its hover padding pushed it 7px right of the other radar rows. */
.crv-radar-btn { margin-left: -7px; text-align: left; }
/* Creatives date dropdown: wide enough for "Last 14 Days (excl. today)" without cutting it off. */
.crv-date-picker .rdr-date-dropdown-menu { width: 440px; left: 0; right: auto; }
.crv-date-picker .rdr-date-preset-item { white-space: nowrap; }
@media (max-width: 640px) {
  .crv-date-picker .rdr-date-dropdown-menu { width: calc(100vw - 32px) !important; }
  .crv-date-picker .rdr-date-preset-item { white-space: normal; }
}
/* Activity Log: seven summary cards - 4 + 3 instead of 5 + 2 with "+299,910 EGP" broken over two lines (2026-11-08). */
@media (min-width: 1025px) { .act-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1800px) { .act-kpi-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.act-kpi-val { white-space: nowrap; }
/* The Activity filter card clipped the date dropdown (ins-card has overflow: hidden). */
.ins-card.act-filter-card { overflow: visible; position: relative; z-index: 5; }
/* Activity Log on phones: the seven cards two per row, compact, so the feed starts on the first screen (2026-11-08). */
@media (max-width: 600px) {
  .act-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .act-kpi-card { padding: 10px 12px; gap: 8px; }
  .act-kpi-icon-wrap { display: none; }
  .act-kpi-val { font-size: 18px; }
  .act-kpi-lbl { font-size: 12px; }
  .act-kpi-sub { display: none; }
  .act-kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* AI Advisor composer, folded (owner 2026-11-08): one row - [Timeframe v] [Roast] [Scale] [Kill] - and one slim safety line. */
.rdr-omnibox-prebar.adv-prebar-folded { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rdr-omnibox-prebar.adv-prebar-folded::-webkit-scrollbar { display: none; }
.adv-prebar-folded .rdr-fun-pills { display: flex; flex-wrap: nowrap; gap: 6px; }
.adv-prebar-folded .rdr-fun-pill { white-space: nowrap; }
.adv-tf-picker { position: static; flex: none; }
.adv-tf-menu { bottom: calc(100% + 6px); top: auto; left: 0; right: auto; min-width: 230px; padding: 6px; display: grid; gap: 2px; }
.adv-tf-menu .rdr-tf-pill { text-align: left; width: 100%; border-radius: 6px; }
.adv-omnibox-footer-slim { justify-content: flex-end; padding-top: 2px; font-size: 11px; }
.rdr-agent-form { position: relative; }
/* Creatives card: the three result cells sit in the 3-column metric grid (wrapper adds no box). Objective as a plain value. */
.crv-metric-contents { display: contents; }
.insider-metric-value.crv-obj-value { font-size: 13px; font-weight: 600; white-space: normal; line-height: 1.25; }
/* Campaigns > Catalogs (2026-11-08): catalog list on the left, the chosen catalog's tabs on the right. */
.cat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.cat-account { width: auto; min-width: 200px; }
.cat-list { padding: 0; overflow: hidden; }
.cat-list-head { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--rdr-border); }
.cat-list-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--rdr-border); background: transparent; color: var(--rdr-text); }
.cat-list-item:hover { background: var(--rdr-surface-2); }
.cat-list-item.is-active { background: var(--rdr-accent-light); }
.cat-list-name { font-weight: 600; }
.cat-list-sub { font-size: 12px; color: var(--rdr-text-muted); }
.cat-detail { padding: 16px; }
.cat-detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.cat-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.cat-tabs { margin-bottom: 12px; flex-wrap: nowrap; overflow-x: auto; }
.cat-tabs .nav-link { white-space: nowrap; }
.cat-table td, .cat-table th { vertical-align: middle; }
.cat-filter { font-size: 12px; color: var(--rdr-text-muted); }
.cat-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; margin-top: 12px; border: 1px dashed var(--rdr-border); border-radius: var(--rdr-radius-sm); }
.cat-form > .form-control, .cat-form > .form-select { width: auto; flex: 1 1 160px; }
.cat-form > textarea.form-control { flex-basis: 100%; }
.cat-form-title { flex-basis: 100%; font-weight: 600; font-size: 13px; }
.cat-subpanel { padding: 12px; margin-top: 8px; border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-sm); background: var(--rdr-surface-2); }
.cat-rule { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.cat-checks li { padding: 10px 12px; border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-sm); margin-bottom: 8px; }
.cat-checks li.is-error, .cat-checks li.is-must_fix { border-color: var(--rdr-negative); }
.cat-checks li.is-warning, .cat-checks li.is-opportunity { border-color: var(--rdr-highlight-strong); }
.cat-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-product { border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-sm); padding: 8px; }
.cat-product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--rdr-surface-2); }
.cat-product-name { font-size: 13px; font-weight: 600; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .cat-layout { grid-template-columns: 1fr; } .cat-account { min-width: 0; flex: 1 1 auto; } }
/* AI Advisor > Opportunities: Meta's own recommendations and opportunity score (2026-11-08). */
.meta-advice { margin-bottom: 16px; }
.meta-advice-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.meta-advice-account { width: auto; min-width: 180px; }
.meta-advice-score { display: flex; align-items: baseline; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.meta-advice-score-num { font-size: 1.8rem; font-weight: 800; color: var(--rdr-accent); line-height: 1; }
.meta-advice-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.meta-advice-list li { padding: 10px 12px; border: 1px solid var(--rdr-border); border-radius: var(--rdr-radius-sm); }
/* Experiments: Meta lift studies under the A/B tests (2026-11-08). */
.lift-studies { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rdr-border); }
.lift-studies li { padding: 4px 0; }

/* Page-level card grids (2026-11-08 layout audit): Bootstrap rows need a padded .container; our pages have none, so .row.g-4
   hung 12px past the page edge on both sides. .adv-gap-grid keeps each column's size but uses a plain gap, so the cards
   line up with the page header. Width = share of the row minus that share's part of the gaps. */
.adv-gap-grid { --adv-gap: 1.5rem; display: flex; flex-wrap: wrap; gap: var(--adv-gap); margin: 0 !important; }
.adv-gap-grid > * { padding: 0 !important; margin-top: 0 !important; flex: 0 0 auto; max-width: 100%; width: calc(var(--f, 1) * 100% - var(--adv-gap) * (1 - var(--f, 1))); }
.adv-gap-grid > .col { flex: 1 1 0; width: auto; }
.adv-gap-grid > .col-1 { --f: 0.083333; }
.adv-gap-grid > .col-2 { --f: 0.166667; }
.adv-gap-grid > .col-3 { --f: 0.25; }
.adv-gap-grid > .col-4 { --f: 0.333333; }
.adv-gap-grid > .col-5 { --f: 0.416667; }
.adv-gap-grid > .col-6 { --f: 0.5; }
.adv-gap-grid > .col-7 { --f: 0.583333; }
.adv-gap-grid > .col-8 { --f: 0.666667; }
.adv-gap-grid > .col-9 { --f: 0.75; }
.adv-gap-grid > .col-10 { --f: 0.833333; }
.adv-gap-grid > .col-11 { --f: 0.916667; }
.adv-gap-grid > .col-12 { --f: 1; }
@media (min-width: 576px) {
  .adv-gap-grid > .col-sm-1 { --f: 0.083333; }
  .adv-gap-grid > .col-sm-2 { --f: 0.166667; }
  .adv-gap-grid > .col-sm-3 { --f: 0.25; }
  .adv-gap-grid > .col-sm-4 { --f: 0.333333; }
  .adv-gap-grid > .col-sm-5 { --f: 0.416667; }
  .adv-gap-grid > .col-sm-6 { --f: 0.5; }
  .adv-gap-grid > .col-sm-7 { --f: 0.583333; }
  .adv-gap-grid > .col-sm-8 { --f: 0.666667; }
  .adv-gap-grid > .col-sm-9 { --f: 0.75; }
  .adv-gap-grid > .col-sm-10 { --f: 0.833333; }
  .adv-gap-grid > .col-sm-11 { --f: 0.916667; }
  .adv-gap-grid > .col-sm-12 { --f: 1; }
}
@media (min-width: 768px) {
  .adv-gap-grid > .col-md-1 { --f: 0.083333; }
  .adv-gap-grid > .col-md-2 { --f: 0.166667; }
  .adv-gap-grid > .col-md-3 { --f: 0.25; }
  .adv-gap-grid > .col-md-4 { --f: 0.333333; }
  .adv-gap-grid > .col-md-5 { --f: 0.416667; }
  .adv-gap-grid > .col-md-6 { --f: 0.5; }
  .adv-gap-grid > .col-md-7 { --f: 0.583333; }
  .adv-gap-grid > .col-md-8 { --f: 0.666667; }
  .adv-gap-grid > .col-md-9 { --f: 0.75; }
  .adv-gap-grid > .col-md-10 { --f: 0.833333; }
  .adv-gap-grid > .col-md-11 { --f: 0.916667; }
  .adv-gap-grid > .col-md-12 { --f: 1; }
}
@media (min-width: 992px) {
  .adv-gap-grid > .col-lg-1 { --f: 0.083333; }
  .adv-gap-grid > .col-lg-2 { --f: 0.166667; }
  .adv-gap-grid > .col-lg-3 { --f: 0.25; }
  .adv-gap-grid > .col-lg-4 { --f: 0.333333; }
  .adv-gap-grid > .col-lg-5 { --f: 0.416667; }
  .adv-gap-grid > .col-lg-6 { --f: 0.5; }
  .adv-gap-grid > .col-lg-7 { --f: 0.583333; }
  .adv-gap-grid > .col-lg-8 { --f: 0.666667; }
  .adv-gap-grid > .col-lg-9 { --f: 0.75; }
  .adv-gap-grid > .col-lg-10 { --f: 0.833333; }
  .adv-gap-grid > .col-lg-11 { --f: 0.916667; }
  .adv-gap-grid > .col-lg-12 { --f: 1; }
}
@media (min-width: 1200px) {
  .adv-gap-grid > .col-xl-1 { --f: 0.083333; }
  .adv-gap-grid > .col-xl-2 { --f: 0.166667; }
  .adv-gap-grid > .col-xl-3 { --f: 0.25; }
  .adv-gap-grid > .col-xl-4 { --f: 0.333333; }
  .adv-gap-grid > .col-xl-5 { --f: 0.416667; }
  .adv-gap-grid > .col-xl-6 { --f: 0.5; }
  .adv-gap-grid > .col-xl-7 { --f: 0.583333; }
  .adv-gap-grid > .col-xl-8 { --f: 0.666667; }
  .adv-gap-grid > .col-xl-9 { --f: 0.75; }
  .adv-gap-grid > .col-xl-10 { --f: 0.833333; }
  .adv-gap-grid > .col-xl-11 { --f: 0.916667; }
  .adv-gap-grid > .col-xl-12 { --f: 1; }
}
@media (min-width: 1400px) {
  .adv-gap-grid > .col-xxl-1 { --f: 0.083333; }
  .adv-gap-grid > .col-xxl-2 { --f: 0.166667; }
  .adv-gap-grid > .col-xxl-3 { --f: 0.25; }
  .adv-gap-grid > .col-xxl-4 { --f: 0.333333; }
  .adv-gap-grid > .col-xxl-5 { --f: 0.416667; }
  .adv-gap-grid > .col-xxl-6 { --f: 0.5; }
  .adv-gap-grid > .col-xxl-7 { --f: 0.583333; }
  .adv-gap-grid > .col-xxl-8 { --f: 0.666667; }
  .adv-gap-grid > .col-xxl-9 { --f: 0.75; }
  .adv-gap-grid > .col-xxl-10 { --f: 0.833333; }
  .adv-gap-grid > .col-xxl-11 { --f: 0.916667; }
  .adv-gap-grid > .col-xxl-12 { --f: 1; }
}

/* Layout audit 2026-11-08: admin workspace actions wrap inside their cell; Creative Intelligence metric labels wrap
   instead of running out of their tile ("MESSAGING CONVERSATIONS" was 96px in an 82px tile). */
.plt-actions-cell, .ins-table td.plt-actions-cell, table td.plt-actions-cell { white-space: normal; min-width: 260px; }
.plt-actions-cell > a, .plt-actions-cell > form { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; vertical-align: middle; margin: 2px 0; max-width: 100%; }
.plt-actions-cell > form.d-inline-flex { display: inline-flex !important; }
/* A select that is also .rdr-input: the .rdr-input `background:` shorthand reset background-repeat, so the select arrow
   tiled across the box ("Not linked VVVVVV", Connect Shopify, dark-mode audit 2026-11-08). */
select.rdr-input, select.form-select.rdr-input, select.rdr-select {
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem;
}
/* Dark-mode & phone audit 2026-11-08: Platform .nav-tabs active tab was bright white (#fff) in dark mode, and Watch frequency
   dropdowns were squeezed to "ev v" on 390px phones. */
.nav-tabs { border-bottom-color: var(--rdr-border); gap: 4px; }
.nav-tabs .nav-link { color: var(--rdr-text-secondary); border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link:hover { border-color: var(--rdr-border); color: var(--rdr-text); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  background-color: var(--rdr-surface-2) !important;
  color: var(--rdr-text) !important;
  border-color: var(--rdr-border) var(--rdr-border) var(--rdr-surface-2) !important;
  font-weight: 600;
}
.watch-freq-table select.form-select { min-width: 8.75rem; }
@media (max-width: 640px) {
  .watch-freq-table thead { display: none; }
  .watch-freq-table tbody tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--rdr-border); }
  .watch-freq-table tbody tr:last-child { border-bottom: none; }
  .watch-freq-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; padding: 6px 0; }
  .watch-freq-table tbody td:first-child { display: block; padding-bottom: 8px; }
  .watch-freq-table tbody td[data-label]::before { content: attr(data-label); font-size: 12.5px; font-weight: 600; color: var(--rdr-text-secondary); flex: 0 0 auto; }
  .watch-freq-table tbody td[data-label] select.form-select { max-width: 190px; min-width: 145px; }
  .watch-freq-table tbody td:last-child { justify-content: flex-end; padding-top: 8px; }
}
/* Phone overlays audit 2026-11-08 (390x844): Ad -> Product account picker is on the left of .aud-toolbar so right:0 pushed it
   off the left edge of the screen; date menus on the right side of a toolbar (.rdr-dropdown-right / .aud-toolbar / Overview)
   pushed off the right edge when forced to left:0 on the button. */
.aud-toolbar .ins-col-picker-menu { left: 0; right: auto; max-width: calc(100vw - 24px); }
@media (max-width: 640px) {
  .rdr-date-dropdown-menu.rdr-dropdown-right { left: auto !important; right: 0 !important; }
  .aud-toolbar, .rdr-overview-header-controls { position: relative; }
  .aud-toolbar .rdr-dropdown-wrapper, .rdr-overview-header-controls .rdr-dropdown-wrapper { position: static; }
  .aud-toolbar .rdr-date-dropdown-menu, .rdr-overview-header-controls .rdr-date-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
  }
}