/*
 * Ads Intelligence — Design System v4
 * Entry point for Vite build → outputs css/app.css
 *
 * Source files in css/src/ — edit here, build with: npm run build:css
 */

/* Design tokens — CSS variables, :root palette — L1-L312 of app.css */

/* ═══════════════════════════════════════════════════════════════
   ADS INTELLIGENCE — Design System v4
   Ads Intelligence DS — documented at https://design-system.shinp.ai/ads-intelligence
   Source tokens: /data/corrected_color_tokens.json
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Accent Palette (Ads Intelligence DS Ads Intelligence documented) ── */
  /* Source: corrected_color_tokens.json → accent.blue */
  --accent: #5667EA;
  --accent-hover: #4555D4;
  --accent-light: #EEF0FD;
  --accent-dark: #4555D4;
  --accent-glow: rgba(86, 103, 234, 0.10);
  --accent-glow-md: rgba(86, 103, 234, 0.20);
  --accent-glow-strong: rgba(86, 103, 234, 0.35);

  /* Source: corrected_color_tokens.json → accent.lime */
  --accent-lime: #B8E62E;
  --accent-lime-hover: #A5D026;
  --accent-lime-text: #2E4006;
  --accent-lime-bg: #F0FAD4;

  /* Source: corrected_color_tokens.json → accent.purple */
  --accent-purple: #8F4BE8;
  --accent-purple-hover: #7E3DD4;
  --accent-purple-light: #F3ECFC;
  --accent-purple-border: rgba(143, 75, 232, 0.15);

  /* Source: corrected_color_tokens.json → accent.cyan */
  --accent-cyan: #38A9D4;
  --accent-cyan-hover: #2E96BE;
  --accent-cyan-light: #E8F5FA;

  --orange: #F9A825;
  --orange-light: #FFF8E1;
  --gradient-warm: linear-gradient(135deg, #5667EA, #4555D4);
  --gradient-warm-soft: linear-gradient(135deg, rgba(86,103,234,0.15), rgba(69,85,212,0.08));
  --gradient-warm-vibrant: linear-gradient(135deg, #5667EA 0%, #8F4BE8 50%, #4555D4 100%);

  /* ── Backgrounds (Ads Intelligence DS documented) ── */
  /* Source: corrected_color_tokens.json → background */
  --bg-root: #F4F4F5;
  --bg-primary: #F4F4F5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #ECECEE;
  --bg-elevated: #FFFFFF;
  --bg-hover: #ECECEE;
  --bg-active: #D8D8DC;

  /* ── Borders (Ads Intelligence DS documented) ── */
  /* Source: corrected_color_tokens.json → border */
  --border-subtle: #ECECEE;
  --border-default: #D8D8DC;
  --border-hover: #D9D9DD;
  --border-active: rgba(86, 103, 234, 0.5);
  --border-accent: rgba(86, 103, 234, 0.20);

  /* ── Text (Ads Intelligence DS documented) ── */
  /* Source: corrected_color_tokens.json → text */
  --text-primary: #141418;
  --text-secondary: #6B7280;
  --text-tertiary: #8F96A3;
  --text-quaternary: #B0B5BD;

  /* ── Semantic / Feedback (Ads Intelligence DS documented) ── */
  /* Source: corrected_color_tokens.json → feedback */
  --success: #2E7D32;
  --success-bg: #E8F5E9;
  --success-border: rgba(46, 125, 50, 0.20);
  --warning: #F9A825;
  --warning-bg: #FFF8E1;
  --warning-border: rgba(249, 168, 37, 0.20);
  --warning-text: #7B6813;
  --info: #38A9D4;
  --info-bg: #E0F4FB;
  --info-text: #1B6E8A;
  --danger: #C62828;
  --danger-bg: #FFEBEE;

  /* ── Status Tokens (T8F — dark mode token foundation) ── */
  --status-success: #2E7D32;
  --status-warning: #F9A825;
  --status-danger: #C62828;
  --status-info: #38A9D4;
  --status-inactive: #9E9E9E;

  /* ── Chart Colors (Ads Intelligence DS documented for Ads Intelligence) ── */
  /* Source: corrected_color_tokens.json → chart */
  --chart-1: #5667EA;
  --chart-2: #B8E62E;
  --chart-3: #8F4BE8;
  --chart-4: #38A9D4;
  --chart-5: #F9A825;
  --chart-6: #E8457A;
  --chart-track: #D9D9DD;

  /* ── Support Colors (Ads Intelligence DS documented) ── */
  /* Source: corrected_color_tokens.json → support */
  --support-lavender: #E9D9F9;
  --support-ice-blue: #D9EEF7;
  --support-panel: #ECECEE;
  --support-track: #D9D9DD;

  /* ── Layout ── */
  --sidebar-w: 260px;
  --sidebar-collapsed-w: 60px;
  --sidebar-transition-dur: 0.2s;
  --sidebar-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 56px;

  /* ── Radius (Ads Intelligence DS official — wise.design/foundations/radius) ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 9999px;

  /* ── Typography (Ads Intelligence DS official — wise.design/foundations/typography) ── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Motion (Ads Intelligence DS fallback — documented at design-system.shinp.ai/ads-intelligence) ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.15s;
  --duration-normal: 0.3s;

  /* ── Shadows / Elevation (Ads Intelligence DS fallback — documented at design-system.shinp.ai/ads-intelligence) ── */
  --shadow-xs: 0 1px 2px rgba(14,15,12,0.06);
  --shadow-sm: 0 2px 8px rgba(14,15,12,0.08);
  --shadow-md: 0 4px 16px rgba(14,15,12,0.12);
  --shadow-lg: 0 8px 32px rgba(14,15,12,0.16);
  --shadow-glow: 0 0 40px rgba(86, 103, 234, 0.15);
  --shadow-cta: 0 4px 16px rgba(86, 103, 234, 0.25);
  --shadow-modal: 0 25px 50px -12px rgba(14,15,12,0.15);

  /* ── Spacing Scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ═══════════════════════════════════════════════════════════════
     DS Compatibility Layer — Ads Intelligence Design System
     Maps DS semantic (canonical) tokens to product shorthand tokens.
     DS reference: https://design-system.shinp.ai/ads-intelligence

     LEGACY ALIASES: Product shorthand tokens (--accent, --bg-*, --text-*,
     --border-*, --success, --danger, --warning, --info) remain defined above
     for backward compatibility with JS files, page inline styles, and
     third-party integrations. Do NOT use shorthand tokens in new CSS code.
     Use canonical --color-* names instead.
     Scheduled for full removal after all product screens are migrated.
     ═══════════════════════════════════════════════════════════════ */

  /* ── Content ── */
  --color-content-primary: var(--text-primary);
  --color-content-secondary: #6B7280;
  --color-content-tertiary: #8F96A3;
  --color-content-link: var(--accent);

  /* ── Interactive ── */
  --color-interactive-primary: var(--accent);
  --color-interactive-accent: var(--accent-lime);
  --color-interactive-secondary: var(--border-default);
  --color-interactive-control: var(--accent-lime-text);
  --color-interactive-contrast: #FFFFFF;

  /* ── Background ── */
  --color-background-screen: var(--bg-root);
  --color-background-elevated: var(--bg-secondary);
  --color-background-neutral: var(--bg-tertiary);
  --color-background-overlay: rgba(20, 20, 24, 0.06);
  --color-background-scrim: rgba(20, 20, 24, 0.4);    /* solid blocking overlay (drawers, modals) */

  /* ── Border ── */
  --color-border-neutral: var(--border-default);
  --color-border-overlay: var(--border-hover);

  /* ── Sentiment ── */
  --color-sentiment-negative: var(--danger);
  --color-sentiment-positive: var(--success);
  --color-sentiment-warning: var(--warning);

  /* ── Contrast / Named ── */
  --color-contrast: #FFFFFF;
  --color-light: #FFFFFF;
  --color-dark: var(--text-primary);
  --color-forest-green: #1E293B;
  --color-bright-green: var(--accent-lime);

  /* ── Accent aliases ── */
  --color-accent-lime: var(--accent-lime);
  --color-accent-lime-hover: var(--accent-lime-hover);
  --color-accent-lime-text: var(--accent-lime-text);
  --color-accent-blue: var(--accent);
  --color-accent-blue-hover: var(--accent-hover);
  --color-accent-blue-light: var(--accent-light);
  --color-accent-purple: var(--accent-purple);
  --color-accent-purple-hover: var(--accent-purple-hover);
  --color-accent-purple-light: var(--accent-purple-light);
  --color-accent-cyan: var(--accent-cyan);
  --color-accent-cyan-hover: var(--accent-cyan-hover);
  --color-accent-cyan-light: var(--accent-cyan-light);

  /* ── Support aliases ── */
  --color-support-lavender: var(--support-lavender);
  --color-support-ice-blue: var(--support-ice-blue);
  --color-support-panel: var(--support-panel);
  --color-support-track: var(--support-track);
  --color-support-lime-bg: var(--accent-lime-bg);

  /* ── Feedback aliases ── */
  --color-feedback-success-bg: var(--success-bg);
  --color-feedback-warning-bg: var(--warning-bg);
  --color-feedback-error-bg: var(--danger-bg);
  --color-feedback-info-bg: var(--info-bg);
  --color-feedback-warning-text: var(--warning-text);
  --color-feedback-info: var(--info);

  /* ── Chart aliases ── */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-chart-track: var(--chart-track);

  /* ── DS Spacing aliases (px-based names) ── */
  --space-4px: var(--space-1);
  --space-8px: var(--space-2);
  --space-12px: var(--space-3);
  --space-16px: var(--space-4);
  --space-24px: var(--space-5);
  --space-32px: var(--space-6);
  --space-40px: var(--space-7);
  --space-48px: var(--space-8);
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-104: 104px;
  --space-112: 112px;
  --space-120: 120px;
  --space-128: 128px;

  /* ── DS Radius aliases ── */
  --radius-small: var(--radius);
  --radius-medium: var(--radius-lg);
  --radius-large: var(--radius-xl);
  --radius-x-large: 40px;
  --radius-2x-large: 60px;

  /* ── DS Extended Aliases (Phase 3+4 — canonical DS naming coverage) ── */
  /* Background extended — point to product tokens for single source of truth */
  --color-background-primary: var(--bg-primary);
  --color-background-secondary: var(--bg-secondary);
  --color-background-surface: var(--bg-primary);      /* page-level surface */
  --color-background-raised: var(--bg-secondary);     /* card / raised surface */
  --color-background-tertiary: var(--bg-tertiary);
  --color-background-hover: var(--bg-hover);
  --color-background-active: var(--bg-active);

  /* Border extended */
  --color-border-subtle: var(--border-subtle);
  --color-border-default: var(--border-default);
  --color-border-hover: var(--border-hover);
  --color-border-active: var(--border-active);
  --color-border-accent: var(--border-accent);

  /* Text extended */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-quaternary: var(--text-quaternary);

  /* Feedback extended */
  --color-feedback-success: var(--success);
  --color-feedback-success-bg: var(--success-bg);
  --color-feedback-warning: var(--warning);
  --color-feedback-warning-bg: var(--warning-bg);
  --color-feedback-danger: var(--danger);
  --color-danger: var(--danger);
  --color-feedback-danger-bg: var(--danger-bg);
  --color-feedback-info: var(--info);
  --color-feedback-info-bg: var(--info-bg);
  --color-feedback-success-border: var(--success-border);
  --color-feedback-warning-border: var(--warning-border);
  --color-feedback-warning-text: var(--warning-text);
  --color-feedback-info-text: var(--info-text);

  /* Interactive extended */
  --color-interactive-primary-glow: var(--accent-glow);
  --color-interactive-primary-ghost: var(--accent-glow);    /* alias ghost = glow */
  --color-interactive-primary-active: var(--accent-dark);   /* pressed state */
  --color-interactive-primary-subtle: var(--accent-light);  /* soft highlight */
  --color-interactive-primary-hover: var(--accent-hover);
  --color-interactive-primary-light: var(--accent-light);

  /* Shadow extended */
  --shadow-elevation-1: var(--shadow-xs);
  --shadow-elevation-2: var(--shadow-sm);
  --shadow-elevation-3: var(--shadow-md);
  --shadow-elevation-4: var(--shadow-lg);

  /* Motion extended */
  --motion-duration-fast: var(--duration);
  --motion-duration-normal: var(--duration-normal);
  --motion-easing-standard: var(--ease);
}
/* Dark mode + accessibility + base — L313-L687 of app.css */

/* ═══════════════════════════════════════════════════════════════
   Dark Mode — Ads Intelligence DS Phase 3+4
   Activation: ONLY via html[data-theme="dark"] (explicit user choice).
   @media prefers-color-scheme is disabled — light is the absolute default.
   Dark mode is opt-in, never automatic.
   ═══════════════════════════════════════════════════════════════ */

/*
   Disabled: automatic OS dark mode detection.
   Dark mode must be explicit via html[data-theme="dark"].
   Kept for future html[data-theme="system"] support if needed.

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    ... tokens ...
  }
}
*/

/* Manual dark mode test hook — set html[data-theme="dark"] */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-root: #141418;
  --bg-primary: #141418;
  --bg-secondary: #1C1C21;
  --bg-tertiary: #27272B;
  --bg-elevated: #27272B;
  --bg-hover: #27272B;
  --bg-active: #3F3F46;

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-hover: rgba(255,255,255,0.14);
  --border-active: rgba(86, 103, 234, 0.5);
  --border-accent: rgba(86, 103, 234, 0.30);

  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --text-quaternary: #52525B;

  --accent-light: rgba(86, 103, 234, 0.15);
  --accent-glow: rgba(86, 103, 234, 0.15);
  --accent-glow-md: rgba(86, 103, 234, 0.25);
  --accent-glow-strong: rgba(86, 103, 234, 0.40);
  --accent-lime-bg: rgba(184, 230, 46, 0.10);
  --accent-purple-light: rgba(143, 75, 232, 0.15);
  --accent-cyan-light: rgba(56, 169, 212, 0.15);

  --success: #4ADE80;
  --success-bg: rgba(74,222,128,0.10);
  --success-border: rgba(74,222,128,0.20);
  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,0.10);
  --warning-text: #FBBF24;
  --warning-border: rgba(251,191,36,0.20);
  --info: #38BDF8;
  --info-bg: rgba(56,189,248,0.10);
  --info-text: #38BDF8;
  --danger: #F87171;
  --danger-bg: rgba(248,113,113,0.10);

  --support-panel: #27272B;
  --support-track: #3F3F46;
  --support-lavender: rgba(143, 75, 232, 0.15);
  --support-ice-blue: rgba(56, 169, 212, 0.12);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.40);
  --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.50);
  --shadow-glow: 0 0 40px rgba(86, 103, 234, 0.25);
  --shadow-cta: 0 4px 16px rgba(86, 103, 234, 0.35);

  --chart-track: #3F3F46;

  --gradient-warm: linear-gradient(135deg, #5667EA, #4555D4);
  --gradient-warm-soft: linear-gradient(135deg, rgba(86,103,234,0.20), rgba(69,85,212,0.12));

  /* ── T8F: Accent dark overrides (brighter for dark backgrounds) ── */
  --accent: #6B7BF7;
  --accent-hover: #5A6AE6;
  --accent-dark: #5A6AE6;
  --accent-cyan: #4CC0E8;
  --accent-cyan-hover: #3DB0D8;
  --accent-purple: #A66EF0;
  --accent-purple-hover: #955DE0;
  --accent-lime: #C8F04A;
  --accent-lime-hover: #B8E038;
  --accent-lime-text: #1a2e05;

  /* ── T8F: Chart dark overrides (lighter/brighter for dark backgrounds) ── */
  --chart-1: #6B7BF7;
  --chart-2: #C8F04A;
  --chart-3: #A66EF0;
  --chart-4: #4CC0E8;
  --chart-5: #FBBF24;
  --chart-6: #F06292;

  /* ── T8F: Orange dark overrides ── */
  --orange: #FBBF24;
  --orange-light: rgba(251, 191, 36, 0.12);

  /* ── T8F: Gradient dark override ── */
  --gradient-warm-vibrant: linear-gradient(135deg, #6B7BF7 0%, #A66EF0 50%, #5A6AE6 100%);

  /* ── T8F: Status tokens dark overrides ── */
  --status-success: #4ADE80;
  --status-warning: #FBBF24;
  --status-danger: #F87171;
  --status-info: #38BDF8;
  --status-inactive: #71717A;

  /* ── T8O: Background canonical overrides ── */
  --color-background-primary: #141418;
  --color-background-secondary: #1C1C21;
  --color-background-tertiary: #27272B;
  --color-background-elevated: #27272B;
  --color-background-hover: #27272B;
  --color-background-active: #3F3F46;
  --color-background-screen: #141418;
  --color-background-neutral: #27272B;
  --color-background-overlay: rgba(255, 255, 255, 0.06);

  /* ── T8O: Text canonical overrides ── */
  --color-text-primary: #FAFAFA;
  --color-text-secondary: #A1A1AA;
  --color-text-tertiary: #71717A;
  --color-text-quaternary: #52525B;

  /* ── T8O: Border canonical overrides ── */
  --color-border-subtle: rgba(255,255,255,0.06);
  --color-border-default: rgba(255,255,255,0.10);
  --color-border-hover: rgba(255,255,255,0.14);
  --color-border-active: rgba(86, 103, 234, 0.5);
  --color-border-accent: rgba(86, 103, 234, 0.30);
  --color-border-neutral: rgba(255,255,255,0.10);
  --color-border-overlay: rgba(255,255,255,0.14);

  /* ── T8O: Content canonical overrides ── */
  --color-content-primary: #FAFAFA;
  --color-content-secondary: #A1A1AA;
  --color-content-tertiary: #71717A;
  --color-content-link: #6B7BF7;

  /* ── T8O: Interactive canonical overrides ── */
  --color-interactive-primary: #6B7BF7;
  --color-interactive-accent: #C8F04A;
  --color-interactive-secondary: rgba(255,255,255,0.10);
  --color-interactive-control: #D4F07A;
  --color-interactive-contrast: #141418;
  --color-interactive-primary-hover: #5A6AE6;
  --color-interactive-primary-light: rgba(86, 103, 234, 0.15);
  --color-interactive-primary-glow: rgba(86, 103, 234, 0.15);

  /* ── T8O: Accent canonical overrides ── */
  --color-accent-blue: #6B7BF7;
  --color-accent-blue-hover: #5A6AE6;
  --color-accent-blue-light: rgba(86, 103, 234, 0.15);
  --color-accent-purple: #A66EF0;
  --color-accent-purple-hover: #955DE0;
  --color-accent-purple-light: rgba(143, 75, 232, 0.15);
  --color-accent-cyan: #4CC0E8;
  --color-accent-cyan-hover: #3DB0D8;
  --color-accent-cyan-light: rgba(56, 169, 212, 0.15);
  --color-accent-lime: #C8F04A;
  --color-accent-lime-hover: #B8E038;
  --color-accent-lime-text: #1a2e05;

  /* ── T8O: Feedback canonical overrides ── */
  --color-feedback-success: #4ADE80;
  --color-feedback-success-bg: rgba(74,222,128,0.10);
  --color-feedback-danger: #F87171;
  --color-feedback-danger-bg: rgba(248,113,113,0.10);
  --color-feedback-error-bg: rgba(248,113,113,0.10);
  --color-feedback-warning: #FBBF24;
  --color-feedback-warning-bg: rgba(251,191,36,0.10);
  --color-feedback-warning-text: #FBBF24;
  --color-feedback-warning-border: rgba(251,191,36,0.20);
  --color-feedback-info: #38BDF8;
  --color-feedback-info-bg: rgba(56,189,248,0.10);
  --color-feedback-info-text: #38BDF8;
  --color-feedback-success-border: rgba(74,222,128,0.20);
  --color-danger: #F87171;

  /* ── T8O: Sentiment canonical overrides ── */
  --color-sentiment-positive: #4ADE80;
  --color-sentiment-negative: #F87171;
  --color-sentiment-warning: #FBBF24;

  /* ── T8O: Chart canonical overrides ── */
  --color-chart-1: #6B7BF7;
  --color-chart-2: #C8F04A;
  --color-chart-3: #A66EF0;
  --color-chart-4: #4CC0E8;
  --color-chart-5: #FBBF24;
  --color-chart-6: #F06292;
  --color-chart-track: #3F3F46;

  /* ── T8O: Support canonical overrides ── */
  --color-support-lavender: rgba(143, 75, 232, 0.15);
  --color-support-ice-blue: rgba(56, 169, 212, 0.12);
  --color-support-panel: #27272B;
  --color-support-track: #3F3F46;
  --color-support-lime-bg: rgba(184, 230, 46, 0.10);

  /* ── T8O: Contrast / Named canonical overrides ── */
  --color-contrast: #141418;
  --color-light: #FAFAFA;
  --color-dark: #FAFAFA;
  --color-forest-green: #C8D6E5;
  --color-bright-green: #C8F04A;

  /* ── T8O: Shadow elevation overrides ── */
  --shadow-elevation-1: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-elevation-2: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-elevation-3: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-elevation-4: 0 8px 32px rgba(0,0,0,0.40);
}

/* ── Visual Polish: Topbar dark override ── */
html[data-theme="dark"] .topbar {
  background: rgba(20, 20, 24, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── Visual Polish: Sidebar inactive text/icons dark override ── */
html[data-theme="dark"] .s-item {
  color: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .s-item svg {
  opacity: 0.72;
}
html[data-theme="dark"] .s-item:hover {
  color: #FAFAFA;
  background: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .s-item:hover svg {
  opacity: 0.9;
}
html[data-theme="dark"] .s-label {
  color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .s-sublabel {
  color: rgba(255, 255, 255, 0.40);
}
html[data-theme="dark"] .s-section.s-locked .s-item {
  opacity: 0.35;
}
html[data-theme="dark"] .s-section.s-locked .s-label {
  opacity: 0.40;
}

/* ── Visual Polish: Source badge spacing + dark contrast ── */
html[data-theme="dark"] .source-badge--observed {
  background: rgba(107, 123, 247, 0.18);
  color: #818cf8;
}

/* ── Visual Polish: Empty/error retry button dark override ── */
html[data-theme="dark"] .mc-section-error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.20);
}
html[data-theme="dark"] .mc-retry-btn {
  color: var(--color-interactive-primary);
  border-color: var(--color-border-default);
}
html[data-theme="dark"] .mc-retry-btn:hover {
  background: var(--color-background-tertiary);
}
html[data-theme="dark"] .ads-empty-state__cta {
  color: var(--color-interactive-primary);
}
html[data-theme="dark"] .mc-refresh-btn--success {
  background: rgba(74, 222, 128, 0.12);
}

/* Dark mode focus ring — brighter for dark backgrounds (explicit only) */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] [role="button"]:focus-visible,
html[data-theme="dark"] [tabindex]:focus-visible {
  outline-color: #818cf8;
}

/* ── Reduced Motion (Ads Intelligence DS a11y — documented fallback) ── */
@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;
  }
}

/* ══════════════════════════════════════
   ACCESSIBILITY — DS Compliance
   ══════════════════════════════════════ */

/* Global focus-visible ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:focus-visible,
.s-item:focus-visible,
.btn:focus-visible,
.card-filter:focus-visible,
.toggle:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-interactive-primary);
  color: var(--color-light);
  padding: 8px 16px;
  z-index: 10000;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top var(--duration);
}
.skip-to-content:focus {
  top: 0;
}

/* ══════════════════════════════════════
   THEME — Light default, dark opt-in
   ══════════════════════════════════════ */
html { color-scheme: light; }

::selection {
  background: rgba(86, 103, 234, 0.30);
  color: var(--text-primary);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--color-background-screen);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ── Scrollbar (Samurai) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* ── Samurai Animations ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(86, 103, 234, 0.1); } 50% { box-shadow: 0 0 40px rgba(86, 103, 234, 0.2); } }
/* Layout shell — sidebar, topbar, main content — L688-L1793 of app.css */

/* ══════════════════════════════════════
   LAYOUT SHELL
   ══════════════════════════════════════ */
.shell { display: flex; min-height: 100vh; }

/* ══════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--color-background-raised);
  border-right: 1px solid var(--color-border-subtle);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  color: var(--color-content-primary);
}

/* Brand — DS sidebar-logo */
.s-brand {
  padding: 0 var(--space-5) var(--space-5);
  padding-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-4);
}

.s-brand-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.s-brand-icon img { width: 100%; height: 100%; object-fit: contain; }

.s-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.s-brand-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-content-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.s-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-tertiary);
  letter-spacing: 0.3px;
}

/* Nav */
.s-nav {
  flex: 1;
  padding: 0 var(--space-3);
  overflow-y: auto;
}

.s-section { margin-bottom: var(--space-4); }

.s-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-content-tertiary);
  padding: var(--space-4) var(--space-3) var(--space-1);
}

.s-sublabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-quaternary);
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.s-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  padding-left: calc(var(--space-3) + 3px);
  border-radius: 8px;
  color: var(--color-content-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
  position: relative;
  text-decoration: none;
}

.s-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }

.s-item:hover {
  color: var(--color-content-primary);
  background: var(--bg-hover);
  transform: translateX(2px);
}
.s-item:hover svg { opacity: 1; }

.s-item.active {
  color: var(--color-interactive-primary);
  background: var(--color-interactive-primary-subtle);
  font-weight: 600;
}

.s-item.active svg { opacity: 1; color: var(--color-interactive-primary); }

.s-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--color-interactive-primary);
  border-radius: 999px;
}

/* Sidebar focus ring */
.sidebar .s-item:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  color: var(--color-content-primary);
}

.s-section.s-locked .s-item { opacity: 0.4; cursor: default; }
.s-section.s-locked .s-item:hover { background: transparent; color: inherit; transform: none; }
.s-section.s-locked .s-label { opacity: 0.5; }
.s-badge-locked { margin-left: auto; font-size: 11px; opacity: 0.5; }

.s-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-interactive-accent);
  color: var(--color-interactive-control);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sidebar count badges — DS badge pattern */
.s-alert-sidebar-count,
.s-notif-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  border-radius: 4px;
  background: var(--color-sentiment-negative);
  color: var(--color-light);
  letter-spacing: 0.03em;
}

/* Disabled menu items (pages that don't exist yet) */
.s-item.s-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.s-item.s-disabled svg { opacity: 0.3; }

/* Admin section — visually separated */
.s-section--admin {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.s-section--admin .s-label {
  color: var(--color-interactive-primary);
  opacity: 0.7;
}

/* Footer */
.s-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.s-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}

.s-user:hover { background: rgba(255, 255, 255, 0.08); }

.s-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-background-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-interactive-primary);
  flex-shrink: 0;
}

.s-user-name { font-size: 12px; font-weight: 600; color: var(--color-light); }
.s-user-role { font-size: 10px; color: rgba(255, 255, 255, 0.40); }

/* ══════════════════════════════════════
   SIDEBAR COLLAPSE (T9B)
   ══════════════════════════════════════ */

/* Transitions for smooth collapse/expand */
.sidebar {
  transition: width var(--sidebar-transition-dur) var(--sidebar-transition-ease),
              min-width var(--sidebar-transition-dur) var(--sidebar-transition-ease);
}

/* Override --sidebar-w when collapsed */
body.sidebar-collapsed {
  --sidebar-w: var(--sidebar-collapsed-w);
}

/* Elements HIDDEN when collapsed */
body.sidebar-collapsed .s-brand-text,
body.sidebar-collapsed .s-item span,
body.sidebar-collapsed .s-label,
body.sidebar-collapsed .s-sublabel,
body.sidebar-collapsed .s-section-toggle,
body.sidebar-collapsed .s-user > div:not(.s-avatar) {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

/* Elements PRESERVED when collapsed — icons enlarged */
body.sidebar-collapsed .s-item svg {
  width: 20px;
  height: 20px;
}

body.sidebar-collapsed .s-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

body.sidebar-collapsed .s-brand-icon {
  width: 32px;
  height: 32px;
}

/* Sidebar items: center icon when collapsed */
body.sidebar-collapsed .s-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Sidebar brand: center when collapsed */
body.sidebar-collapsed .s-brand {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* Sidebar nav: reduce padding when collapsed */
body.sidebar-collapsed .s-nav {
  padding: 0 var(--space-1);
}

/* Sidebar footer: center when collapsed */
body.sidebar-collapsed .s-footer {
  padding: var(--space-2);
}

body.sidebar-collapsed .s-user {
  justify-content: center;
  gap: 0;
}

/* Hide sidebar logout icon when collapsed */
body.sidebar-collapsed .s-user > svg {
  display: none;
}

/* Hide alert/notif badges when collapsed */
body.sidebar-collapsed .s-alert-sidebar-count,
body.sidebar-collapsed .s-notif-badge,
body.sidebar-collapsed .s-badge,
body.sidebar-collapsed .s-badge-locked {
  display: none;
}

/* Active indicator: thinner when collapsed */
body.sidebar-collapsed .s-item.active::before {
  left: 0;
  top: 8px;
  bottom: 8px;
}

/* ── CSS-only Tooltips (collapsed sidebar) ── */
body.sidebar-collapsed .s-item[data-tooltip] {
  position: relative;
}

body.sidebar-collapsed .s-item[data-tooltip]::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  border: 5px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1001;
}

body.sidebar-collapsed .s-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 14px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-light);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1001;
}

body.sidebar-collapsed .s-item[data-tooltip]:hover::before,
body.sidebar-collapsed .s-item[data-tooltip]:hover::after {
  opacity: 1;
}

/* ── Topbar sidebar toggle button (T9B) ── */
.t-sidebar-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-content-secondary);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  flex-shrink: 0;
  padding: 0;
}

.t-sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--color-content-primary);
  border-color: var(--color-border-default);
}

.t-sidebar-toggle svg {
  width: 16px;
  height: 16px;
}

/* ── Theme toggle button (T8R) ── */
.t-theme-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-content-secondary);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  flex-shrink: 0;
  padding: 0;
}
.t-theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--color-content-primary);
  border-color: var(--color-border-default);
}
.t-theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* ── Topbar brand (shown when sidebar collapsed) ── */
.t-topbar-brand {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  flex-shrink: 0;
}

.t-topbar-brand-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
}

.t-topbar-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.t-topbar-brand-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
  white-space: nowrap;
}

body.sidebar-collapsed .t-topbar-brand {
  display: flex;
}

/* t-product-info collapse rule removed — element no longer exists */

/* Toggle button: only visible at >= 1024px */
@media (max-width: 1023px) {
  .t-sidebar-toggle {
    display: none;
  }
  .t-topbar-brand {
    display: none !important;
  }
}

/* ══════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════ */
.main {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: var(--sidebar-w);
  transition: margin-left var(--sidebar-transition-dur) var(--sidebar-transition-ease);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   HEADER / TOPBAR
   ══════════════════════════════════════ */
.topbar {
  height: var(--header-h);
  border-bottom: 1px solid var(--color-border-neutral);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: sticky;
  top: 0;
  z-index: 50;
}

.t-search {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.t-search svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--color-text-quaternary);
}

.t-search input {
  width: 100%;
  height: 34px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 0 12px 0 32px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--color-text-primary);
  outline: none;
  transition: all var(--duration);
}

.t-search input::placeholder { color: var(--color-text-quaternary); }

.t-search input:focus {
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 1px var(--color-border-accent);
}

.t-search-shortcut {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-quaternary);
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Org Simulator (owner only) ── */

.t-org-simulator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 480px;
}

.t-org-sim-select-wrap {
  flex: 1;
  position: relative;
}

.t-org-sim-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--color-text-quaternary);
  pointer-events: none;
}

.t-org-sim-select-wrap select {
  width: 100%;
  height: 34px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 0 12px 0 32px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--color-text-primary);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.t-org-sim-select-wrap select:focus {
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 1px var(--color-border-active);
}

.t-org-sim-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-interactive-primary);
  background: var(--color-interactive-primary);
  color: var(--color-light);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: box-shadow .2s, background .2s;
}

.t-org-sim-btn:hover {
  opacity: 0.9;
}

/* Destaque quando há seleção pendente de aplicar */
.t-org-sim-btn--pending {
  background: var(--color-warning, #f59e0b);
  border-color: var(--color-warning, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .3);
  animation: sim-btn-pulse 1.8s ease-in-out infinite;
}

.t-org-sim-btn--pending::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--surface-primary, #fff);
}

@keyframes sim-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, .3); }
  50%       { box-shadow: 0 0 0 6px rgba(245, 158, 11, .1); }
}

.t-org-sim-clear {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t-org-sim-clear:hover {
  background: var(--color-background-tertiary);
  color: var(--color-text-primary);
}

.t-org-sim-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-interactive-primary-ghost);
  border: 1px solid var(--border-accent);
  font-size: 11px;
  color: var(--color-interactive-primary);
  white-space: nowrap;
  margin-left: 8px;
}

.t-org-sim-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-interactive-primary);
  flex-shrink: 0;
}

/* Company selector (Fix B — non-owner multi-org) */
.t-company-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 320px;
}

/* t-product-info removed from topbar (2026-08-14 cleanup decision) */

/* Breadcrumb (T4) */
.t-breadcrumb {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.t-breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}
.t-breadcrumb-item {
  font-size: 12px;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-breadcrumb-group {
  color: var(--color-text-quaternary);
}
.t-breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: 500;
}
.t-breadcrumb-separator {
  color: var(--color-text-quaternary);
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
}
@media (max-width: 768px) {
  .t-breadcrumb { display: none; }
}

/* Feature Help Modal */
.fh-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fh-overlay.fh-visible { opacity: 1; }
.fh-modal {
  background: var(--color-background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg, 12px);
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transform: translateY(10px);
  transition: transform 0.2s ease;
}
.fh-visible .fh-modal { transform: translateY(0); }
.fh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}
.fh-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.fh-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration);
}
.fh-close:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.fh-body {
  padding: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  overflow-y: auto;
  white-space: pre-line;
}
.fh-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--color-border-default);
  text-align: right;
}
.fh-version {
  font-size: 10px;
  color: var(--color-text-quaternary);
  font-family: var(--font-mono, monospace);
}

.t-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.t-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--color-border-neutral);
  background: transparent;
  color: var(--color-content-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  position: relative;
}

.t-btn svg { width: 16px; height: 16px; }
.t-btn:hover { background: var(--bg-hover); color: var(--color-content-primary); border-color: var(--color-border-default); }
.t-btn:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 2px; }

.t-btn .dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--color-interactive-primary);
  border-radius: 50%;
  border: 1.5px solid var(--color-background-screen);
}

/* Language Selector (T5) */
.t-lang-menu {
  position: relative;
}
.t-lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border-neutral);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background 0.15s, border-color 0.15s;
}
.t-lang-trigger:hover {
  background: var(--color-background-hover);
  border-color: var(--color-text-tertiary);
}
.t-lang-flag {
  font-size: 1rem;
  line-height: 1;
}
.t-lang-label {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.t-lang-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.t-lang-trigger[aria-expanded="true"] .t-lang-chevron {
  transform: rotate(180deg);
}
.t-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-neutral);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 1000;
  padding: 4px 0;
}
.t-lang-dropdown[hidden] {
  display: none;
}
.t-lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 0.82rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.t-lang-dropdown-item:hover:not(:disabled) {
  background: var(--color-background-hover);
}
.t-lang-dropdown-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.t-lang-dropdown-item--active {
  font-weight: 700;
  color: var(--color-interactive-primary);
}
.t-lang-dropdown-flag {
  font-size: 1.1rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .t-lang-label {
    display: none;
  }
}

/* User Menu (T6) */
.t-user-menu {
  position: relative;
}
.t-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-lg, 20px);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.t-user-trigger:hover {
  background: var(--color-background-neutral);
  border-color: var(--color-border-overlay);
}
.t-user-trigger:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}
.t-user-avatar,
.t-user-dropdown-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-interactive-primary);
  color: var(--color-background-screen);
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.t-user-avatar {
  width: 28px;
  height: 28px;
}
.t-user-dropdown-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.t-user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-user-chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-quaternary);
  flex-shrink: 0;
  transition: transform 150ms ease-out;
}
.t-user-trigger[aria-expanded="true"] .t-user-chevron {
  transform: rotate(180deg);
}
.t-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
}
.t-user-dropdown[hidden] { display: none; }
.t-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.t-user-dropdown-info {
  min-width: 0;
}
.t-user-dropdown-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-user-dropdown-email {
  font-size: 11px;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-user-dropdown-divider {
  height: 1px;
  background: var(--color-border-neutral);
}
.t-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.t-user-dropdown-item:hover {
  background: var(--color-background-neutral);
}
.t-user-dropdown-item:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: -2px;
}
.t-user-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.t-user-dropdown-logout {
  color: var(--color-sentiment-negative);
}
@media (max-width: 768px) {
  .t-user-name { display: none; }
  .t-user-chevron { display: none; }
}

/* ══════════════════════════════════════
   PAGE
   ══════════════════════════════════════ */
.page {
  padding: 28px 28px 40px;
  display: none;
  animation: pageIn 0.35s var(--ease);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.page.active { display: block; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.pg-header > div { min-width: 0; }

.pg-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.pg-desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}
/* Button system — ai-btn + variants — L1794-L1911 of app.css */

/* ══════════════════════════════════════
   BUTTONS — DS: design-system.shinp.ai/ads-intelligence
   Default=48px, Small=40px, Large=56px, pill radius
   ══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 24px;
  border-radius: 60px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 150ms ease-out;
  border: 2px solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-primary);
  white-space: nowrap;
  box-sizing: border-box;
}
.btn:hover {
  border-color: var(--color-border-hover);
  background: var(--color-background-tertiary);
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--accent-lime);
  color: var(--accent-lime-text);
  border: none;
  box-shadow: none;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-lime-hover);
  filter: brightness(0.92);
  box-shadow: none;
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-interactive-primary);
  border: 2px solid var(--color-interactive-primary);
}

.btn-secondary:hover {
  background: var(--color-interactive-primary-subtle);
  border-color: var(--color-interactive-primary-hover);
  color: var(--color-interactive-primary-hover);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--color-feedback-danger);
  border: 1px solid rgba(198, 40, 40, 0.20);
}

.btn-danger:hover { background: rgba(198, 40, 40, 0.15); }

.btn-ghost {
  background: transparent;
  color: var(--color-interactive-primary);
  text-decoration: underline;
}

.btn-ghost:hover {
  color: var(--color-interactive-primary-hover);
  background: transparent;
}

/* DS outline variant — same as base .btn but explicit */
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-default);
}
.btn-outline:hover {
  border-color: var(--color-border-hover);
  background: var(--color-background-tertiary);
}

/* Button sizes (DS: sm=40px, default=48px, lg=56px) */
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 32px; font-size: 16px; }

/* DS negative variant */
.btn-negative {
  background: var(--color-feedback-danger);
  color: var(--color-light);
  border: none;
}
.btn-negative:hover { background: #A52222; }

/* Disabled state for all variants */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* Metric cards, chart cards, tables, tabs, timeline — L1912-L2561 of app.css */

/* ══════════════════════════════════════
   METRIC CARDS
   ══════════════════════════════════════ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.m-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  padding: 20px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.m-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-warm);
  opacity: 0;
  transition: opacity 0.2s;
}

.m-card:hover { border-color: var(--color-border-hover); }
.m-card:hover::after { opacity: 1; }

.m-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.m-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.m-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-icon svg { width: 14px; height: 14px; }

.m-icon.warm { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); }
.m-icon.green { background: var(--success-bg); color: var(--color-feedback-success); }
.m-icon.blue { background: var(--info-bg); color: var(--color-feedback-info); }
.m-icon.orange { background: var(--warning-bg); color: var(--color-feedback-warning); }

.m-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}

.m-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
}

.m-change.up { background: var(--success-bg); color: var(--color-feedback-success); }
.m-change.down { background: var(--danger-bg); color: var(--color-feedback-danger); }
.m-change.neutral { background: var(--info-bg); color: var(--color-feedback-info); }

.m-spark {
  position: absolute;
  bottom: 0; right: 0;
  width: 100px; height: 40px;
  opacity: 0.4;
}

/* ══════════════════════════════════════
   CHART CARDS
   ══════════════════════════════════════ */
.charts {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 14px;
  margin-bottom: 24px;
}

.card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.card:hover { border-color: var(--color-border-hover); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.card-filters {
  display: flex;
  gap: 2px;
  background: var(--color-background-tertiary);
  border-radius: var(--radius-xs);
  padding: 2px;
}

.card-filter {
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-quaternary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all var(--duration);
}

.card-filter:hover { color: var(--color-text-tertiary); }
.card-filter.active { background: var(--color-background-elevated); color: var(--color-text-primary); }

.card-body { padding: 16px 20px 20px; }

/* Line Chart */
.chart-area { height: 200px; position: relative; }
.chart-area svg { width: 100%; height: 100%; }

/* Donut */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 20px 20px;
}

.donut-legend { flex: 1; }

.dl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.dl-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.dl-name {
  flex: 1;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.dl-val {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dl-pct {
  font-size: 10px;
  color: var(--color-text-quaternary);
  width: 36px;
  text-align: right;
}

/* ══════════════════════════════════════
   TABLE
   ══════════════════════════════════════ */
.tbl-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  overflow: hidden;
}

.tbl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}

.tbl-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tbl-title {
  font-size: 13px;
  font-weight: 600;
}

.tbl-count {
  font-size: 10px;
  color: var(--color-text-quaternary);
  background: var(--color-background-tertiary);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
}

table { width: 100%; border-collapse: collapse; }

thead th {
  padding: 12px 20px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-tertiary);
  background: var(--color-background-primary);
  border-bottom: 1px solid var(--color-border-default);
}

tbody td {
  padding: 14px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
}

tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--color-background-tertiary); }
tbody tr:last-child td { border-bottom: none; }

.tbl-entity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tbl-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--color-interactive-primary);
}

.tbl-name { font-weight: 600; font-size: 12px; }
.tbl-id { font-size: 10px; color: var(--color-text-quaternary); font-variant-numeric: tabular-nums; }

/* Provider */
.prov {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
}

.prov.g { color: #4285F4; }
.prov.m { color: #A78BFA; }

/* Status */
.st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.st-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.st-active { background: var(--success-bg); color: var(--color-feedback-success); }
.st-sched { background: var(--warning-bg); color: var(--color-feedback-warning); }
.st-error { background: var(--danger-bg); color: var(--color-feedback-danger); }

/* Change indicator */
.chg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}

.chg.up { background: var(--success-bg); color: var(--color-feedback-success); }
.chg.down { background: var(--danger-bg); color: var(--color-feedback-danger); }
.chg.mod { background: var(--warning-bg); color: var(--color-feedback-warning); }

/* ══════════════════════════════════════
   TABS
   ══════════════════════════════════════ */
.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  margin-bottom: 20px;
  width: fit-content;
}

.tab {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-quaternary);
  cursor: pointer;
  transition: all var(--duration);
  border: none;
  background: transparent;
}

.tab:hover { color: var(--color-text-tertiary); }
.tab.active,
.tab[aria-selected="true"] { background: var(--color-background-tertiary); color: var(--color-text-primary); font-weight: 600; }

/* ── Format filter bar ─────────────────── */
.cc-format-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cc-format-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}
.cc-pill {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-quaternary);
  cursor: pointer;
  border: 1px solid var(--color-border-default);
  background: transparent;
  transition: all var(--duration);
}
.cc-pill:hover { color: var(--color-text-tertiary); border-color: var(--color-text-quaternary); }
.cc-pill.active { background: var(--color-background-tertiary); color: var(--color-text-primary); font-weight: 600; border-color: var(--color-text-quaternary); }
.cc-pill .cc-pill-count { font-weight: 400; opacity: 0.7; margin-left: 2px; }

/* ══════════════════════════════════════
   CREATIVE GALLERY
   ══════════════════════════════════════ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.cr-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cr-card:hover {
  border-color: var(--color-border-active);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.cr-preview {
  aspect-ratio: 16/9;
  background: var(--color-background-primary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cr-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6));
  z-index: 1;
}

.cr-content {
  padding: 16px;
  text-align: center;
  z-index: 0;
}

.cr-headline {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
}

.cr-body {
  font-size: 10px;
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

.cr-type {
  position: absolute;
  top: 8px; right: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 2;
  color: var(--color-text-secondary);
}

.cr-info { padding: 14px 16px; }

.cr-adv {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cr-meta {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--color-text-quaternary);
}

.cr-meta svg { width: 10px; height: 10px; margin-right: 3px; }

.cr-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}

.cr-vars { color: var(--color-text-quaternary); font-weight: 500; }

.cr-status { font-weight: 700; }
.cr-status.new { color: var(--color-feedback-success); }
.cr-status.changed { color: var(--color-feedback-warning); }

/* ══════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════ */
.timeline { padding-left: 28px; position: relative; }

.timeline::before {
  content: '';
  position: absolute;
  left: 9px; top: 0; bottom: 0;
  width: 1px;
  background: var(--color-border-default);
}

.tl-item {
  position: relative;
  padding-bottom: 20px;
}

.tl-item:last-child { padding-bottom: 0; }

.tl-dot {
  position: absolute;
  left: -28px; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-background-secondary);
  border: 1.5px solid var(--color-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-dot svg { width: 8px; height: 8px; color: var(--color-text-quaternary); }

.tl-dot.add { border-color: var(--color-feedback-success); }
.tl-dot.add svg { color: var(--color-feedback-success); }
.tl-dot.edit { border-color: var(--color-feedback-warning); }
.tl-dot.edit svg { color: var(--color-feedback-warning); }
.tl-dot.del { border-color: var(--color-feedback-danger); }
.tl-dot.del svg { color: var(--color-feedback-danger); }

.tl-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color var(--duration);
}

.tl-card:hover { border-color: var(--color-border-hover); }

.tl-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tl-title { font-size: 13px; font-weight: 600; }

.tl-time {
  font-size: 10px;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}

.tl-body {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

.tl-tags {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.tl-tag {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: var(--color-background-tertiary);
  color: var(--color-text-quaternary);
  border: 1px solid var(--color-border-default);
}

/* ══════════════════════════════════════
   INSIGHTS
   ══════════════════════════════════════ */
.insights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.ins-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--duration);
}

.ins-card:hover { border-color: var(--color-border-hover); }

.ins-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ins-icon svg { width: 16px; height: 16px; }

.ins-icon.warm { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); }
.ins-icon.green { background: var(--success-bg); color: var(--color-feedback-success); }
.ins-icon.blue { background: var(--info-bg); color: var(--color-feedback-info); }
.ins-icon.orange { background: var(--warning-bg); color: var(--orange); }

.ins-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

.ins-text {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

.ins-action {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-interactive-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--duration);
}

.ins-action:hover { color: var(--color-interactive-primary-hover); }
.ins-action svg { width: 12px; height: 12px; }
/* Settings, onboarding wizard, competitors setup — L2562-L3486 of app.css */

/* ══════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════ */
.set-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}

.set-nav { display: flex; flex-direction: column; gap: 2px; }

.set-nav-item {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--duration);
}

.set-nav-item:hover { background: var(--color-background-tertiary); color: var(--color-text-secondary); }
.set-nav-item.active { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); font-weight: 600; }

.set-panel {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.set-section-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.set-section-desc { font-size: 12px; color: var(--color-text-quaternary); margin-bottom: 20px; }

.api-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.api-name { font-size: 12px; font-weight: 600; min-width: 110px; }
.api-val { font-size: 11px; color: var(--color-text-quaternary); flex: 1; font-variant-numeric: tabular-nums; }

.api-scopes { display: flex; gap: 4px; flex-wrap: wrap; }

.scope {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--color-interactive-primary-ghost);
  color: var(--color-interactive-primary);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-default);
}

.toggle-row:last-child { border-bottom: none; }

.toggle-label { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.toggle-desc { font-size: 11px; color: var(--color-text-quaternary); }

.toggle {
  width: 36px; height: 20px;
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: all var(--duration);
  flex-shrink: 0;
}

.toggle.on { background: var(--color-interactive-primary); border-color: var(--color-interactive-primary); }

.toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  top: 2px; left: 2px;
  transition: transform var(--duration) var(--ease);
}

.toggle.on::after { transform: translateX(16px); }

/* ARIA switch state support */
.toggle[role="switch"][aria-checked="true"] { background: var(--color-interactive-primary); border-color: var(--color-interactive-primary); }
.toggle[role="switch"][aria-checked="true"]::after { transform: translateX(16px); }

/* DS Checkbox */
.ds-checkbox {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--duration);
  flex-shrink: 0;
  position: relative;
}
.ds-checkbox:checked {
  background: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
}
.ds-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--color-light);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* DS Radio */
.ds-radio {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--duration);
  flex-shrink: 0;
}
.ds-radio:checked {
  border-color: var(--color-interactive-primary);
  border-width: 4px;
}

/* ── Settings: Extended Styles ── */
.set-panels { min-width: 0; }

.st-field { margin-bottom: 16px; }
.st-label { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.st-input-wrap { position: relative; }
.st-input-wrap .ob-input { padding-right: 38px; }
.st-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-text-quaternary); cursor: pointer; padding: 4px; transition: color var(--duration); }
.st-eye:hover { color: var(--color-text-secondary); }

.st-error { font-size: 12px; color: var(--color-feedback-danger); margin-bottom: 12px; min-height: 18px; }
.st-field-error { font-size: 11px; color: var(--color-feedback-danger); margin-top: 4px; min-height: 16px; }
.st-hint { font-size: 10px; color: var(--color-text-quaternary); margin-top: 4px; }

.st-pw-btn { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }

/* Strength meter */
.st-strength { margin-top: 8px; margin-bottom: 4px; }
.st-str-bar { height: 3px; background: var(--color-background-tertiary); border-radius: 4px; overflow: hidden; }
.st-str-fill { height: 100%; border-radius: 4px; transition: width 0.3s var(--ease), background 0.3s; }
.st-str-label { font-size: 10px; margin-top: 4px; display: block; }
.st-str-weak .st-str-fill { background: var(--color-feedback-danger); }
.st-str-weak .st-str-label { color: var(--color-feedback-danger); }
.st-str-fair .st-str-fill { background: var(--color-feedback-warning); }
.st-str-fair .st-str-label { color: var(--color-feedback-warning); }
.st-str-good .st-str-fill { background: var(--color-feedback-info); }
.st-str-good .st-str-label { color: var(--color-feedback-info); }
.st-str-strong .st-str-fill { background: var(--color-feedback-success); }
.st-str-strong .st-str-label { color: var(--color-feedback-success); }

/* Preferences rows */
.st-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--color-border-default); }
.st-pref-row:last-child { border-bottom: none; }
.st-pref-label { font-size: 13px; font-weight: 600; }

/* Segmented control */
.st-seg { display: inline-flex; background: var(--color-background-tertiary); border: 1px solid var(--color-border-default); border-radius: var(--radius); padding: 3px; gap: 2px; }
.st-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: none; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--color-text-tertiary); font-family: var(--font); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--duration); }
.st-seg-btn:hover { color: var(--color-text-secondary); }
.st-seg-btn.active { background: var(--color-background-elevated); color: var(--color-text-primary); box-shadow: var(--shadow-xs); }

/* Select */
.st-select { appearance: none; background: var(--color-background-tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 8px 32px 8px 12px; font-family: var(--font); font-size: 12px; color: var(--color-text-primary); cursor: pointer; transition: all var(--duration); outline: none; }
.st-select:focus { border-color: var(--color-interactive-primary); box-shadow: 0 0 0 1px var(--color-border-active); }
.st-select option { background: var(--color-background-secondary); color: var(--color-text-primary); }

/* Alert cards */
.st-alert-card { background: var(--color-background-tertiary); border: 1px solid var(--color-border-default); border-radius: var(--radius); margin-bottom: 12px; transition: border-color var(--duration); }
.st-alert-card:hover { border-color: var(--color-border-hover); }
.st-alert-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.st-alert-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-alert-info { flex: 1; min-width: 0; }
.st-alert-label { font-size: 13px; font-weight: 600; }
.st-alert-desc { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
.st-alert-body { padding: 0 18px 16px; }
.st-alert-body .ob-input { margin-top: 4px; }
.st-coming-soon { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; padding: 4px 8px; background: var(--color-background-elevated); border-radius: var(--radius-xs); font-size: 10px; color: var(--color-text-quaternary); }

/* Alert Settings */
.as-channels { display: flex; align-items: center; gap: 20px; padding: 12px 18px 16px; flex-wrap: wrap; }
.as-channel { display: flex; align-items: center; gap: 8px; }
.as-ch-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); min-width: 48px; }
.as-severity { display: inline-block; padding: 1px 6px; border-radius: var(--radius-xs); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; margin-left: 6px; }
.as-sev-high { background: var(--danger-bg); color: #EF4444; }
.as-sev-medium { background: var(--warning-bg); color: #F59E0B; }
.as-sev-low { background: rgba(107, 114, 128, 0.15); color: #9CA3AF; }
.as-toggle-disabled { opacity: 0.35; cursor: not-allowed !important; pointer-events: none; }
.as-toggle-readonly { opacity: 0.5; cursor: default !important; pointer-events: none; }
.as-freq-wrap { margin-left: auto; }
.as-freq-select { font-size: 12px; padding: 4px 8px; min-width: 120px; }
.as-divider { height: 1px; background: var(--border); margin: 20px 0; }
.as-loading { text-align: center; padding: 40px; color: var(--color-text-tertiary); font-size: 13px; }
.as-error-msg { text-align: center; padding: 40px; color: var(--color-feedback-danger); font-size: 13px; }
.as-error { font-size: 12px; color: var(--color-feedback-danger); margin-top: 10px; padding: 8px 12px; background: var(--danger-bg); border-radius: var(--radius-xs); }
.as-digest-row { display: flex; gap: 16px; margin-top: 8px; }
.as-card { margin-bottom: 8px; }
.as-card .st-alert-head { border-bottom: none; }

/* Gear link on alerts page */
.as-gear-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius); font-size: 12px; color: var(--color-text-secondary); background: var(--color-background-elevated); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s var(--ease); text-decoration: none; }
.as-gear-link:hover { color: var(--color-text-primary); border-color: var(--color-text-tertiary); }

/* Save footer */
.st-footer { margin-top: 16px; display: flex; justify-content: flex-end; }
.st-save-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Toast */
.st-toast { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 9999; transform: translateY(20px); opacity: 0; transition: all 0.3s var(--ease); pointer-events: none; }
.st-toast.visible { transform: translateY(0); opacity: 1; }
.st-toast-success { background: var(--color-feedback-success); color: #fff; }
.st-toast-error { background: var(--color-feedback-danger); color: #fff; }

/* ══════════════════════════════════════
   ONBOARDING / COMPANY SETUP
   ══════════════════════════════════════ */

/* ── 2-Column Grid ── */
.ob-grid { display:grid; grid-template-columns:1fr 380px; gap:28px; max-width:1100px; }
.ob-left { min-width:0; }
.ob-right { min-width:0; }

.ob-progress { height:3px; background:var(--color-background-tertiary); border-radius:10px; margin-bottom:24px; overflow:hidden; max-width:1100px; }
.ob-progress-fill { height:100%; width:0%; background:var(--gradient-warm); border-radius:10px; transition:width 0.4s var(--ease); }

.ob-card { background:var(--color-background-secondary); border:1px solid var(--color-border-default); border-radius:var(--radius-lg); margin-bottom:14px; transition:border-color var(--duration); }
.ob-card:hover { border-color:var(--color-border-hover); }

.ob-card-head { display:flex; align-items:center; gap:14px; padding:18px 20px; }
.ob-icon { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ob-icon svg { width:18px; height:18px; }
.ob-card-text { flex:1; min-width:0; }
.ob-card-title { font-size:13px; font-weight:600; }
.ob-card-desc { font-size:11px; color:var(--color-text-tertiary); margin-top:2px; }

.ob-pill { display:flex; background:var(--color-background-tertiary); border-radius:var(--radius-xl); padding:3px; gap:2px; flex-shrink:0; }
.ob-pill-btn { padding:5px 16px; border:none; border-radius:var(--radius-xl); background:transparent; color:var(--color-text-tertiary); font-size:12px; font-weight:600; cursor:pointer; transition:all var(--duration) var(--ease); font-family:var(--font); }
.ob-pill-btn:hover { color:var(--color-text-secondary); }
.ob-pill-btn.active[data-v="yes"] { background:var(--gradient-warm); color:var(--color-light); box-shadow:0 2px 8px rgba(86, 103, 234, 0.3); }
.ob-pill-btn.active[data-v="no"] { background:var(--color-background-elevated); color:var(--color-text-primary); }

.ob-card-body { padding:0 20px 18px; border-top:1px solid var(--color-border-default); animation:pageIn 0.25s var(--ease); }
.ob-field { margin-top:14px; }
.ob-label { display:block; font-size:11px; font-weight:600; color:var(--color-text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.ob-input-wrap { position:relative; }
.ob-input { width:100%; height:38px; background:var(--color-background-tertiary); border:1px solid var(--color-border-default); border-radius:var(--radius-sm); padding:0 12px; font-family:var(--font); font-size:13px; color:var(--color-text-primary); outline:none; transition:all var(--duration); box-sizing:border-box; }
.ob-input::placeholder { color:var(--color-text-quaternary); }
.ob-input:focus { border-color:var(--color-interactive-primary); box-shadow: 0 0 0 1px var(--color-border-active); }
.ob-hint { font-size:10px; color:var(--color-text-quaternary); margin-top:4px; }

.ob-drop { position:absolute; top:100%; left:0; right:0; z-index:200; max-height:260px; overflow-y:auto; background:var(--color-background-elevated); border:1px solid var(--color-border-hover); border-top:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); box-shadow:var(--shadow-lg); display:none; }
.ob-drop.open { display:block; }

.ob-drop-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:background 0.1s; border-bottom:1px solid var(--color-border-default); }
.ob-drop-item:last-child { border-bottom:none; }
.ob-drop-item:hover, .ob-drop-item.hl { background:var(--color-background-hover); }
.ob-drop-icon { width:36px; height:36px; border-radius:var(--radius-sm); overflow:hidden; background:var(--color-background-tertiary); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ob-drop-icon img { width:100%; height:100%; object-fit:cover; }
.ob-drop-icon .ob-initial { font-size:14px; font-weight:700; color:var(--color-interactive-primary); }
.ob-drop-name { font-size:12px; font-weight:600; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ob-drop-meta { font-size:10px; color:var(--color-text-tertiary); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ob-drop-loading { display:flex; align-items:center; gap:8px; padding:12px; color:var(--color-text-tertiary); font-size:12px; }
.ob-drop-empty { padding:12px; color:var(--color-text-tertiary); font-size:12px; }

.ob-spinner { width:14px; height:14px; border:2px solid var(--color-border-hover); border-top-color:var(--color-interactive-primary); border-radius:50%; animation:obSpin 0.6s linear infinite; }
@keyframes obSpin { to { transform:rotate(360deg); } }

.ob-chosen { margin-top:10px; display:none; }
.ob-chosen.show { display:block; }
.ob-badge { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--success-bg); border:1px solid var(--success-border); border-radius:var(--radius); }
.ob-badge-check { color:var(--color-feedback-success); font-size:14px; flex-shrink:0; }
.ob-badge-info { flex:1; min-width:0; }
.ob-badge-name { font-size:12px; font-weight:600; }
.ob-badge-sub { font-size:10px; color:var(--color-text-tertiary); }
.ob-badge-actions { display:flex; gap:4px; }
.ob-badge-btn { background:none; border:none; cursor:pointer; font-family:var(--font); font-size:11px; padding:4px 8px; border-radius:var(--radius-xs); transition:all var(--duration); }
.ob-badge-btn.change { color:var(--color-interactive-primary); }
.ob-badge-btn.change:hover { background:var(--color-interactive-primary-ghost); }
.ob-badge-btn.clear { color:var(--color-text-quaternary); font-size:14px; }
.ob-badge-btn.clear:hover { color:var(--color-feedback-danger); background:var(--danger-bg); }

.ob-footer { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:20px; padding-top:16px; border-top:1px solid var(--color-border-default); }
.ob-draft-hint { font-size:11px; color:var(--color-text-quaternary); flex:1; }
.ob-save-btn { min-width:150px; justify-content:center; }
.ob-save-btn:disabled { opacity:0.4; pointer-events:none; }

/* ── Right Panel (sticky) ── */
.ob-panel {
  position:sticky; top:96px;
  background:var(--color-background-secondary);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ob-panel-head {
  display:flex; align-items:center; gap:8px;
  padding:16px 20px;
  border-bottom:1px solid var(--color-border-default);
  font-size:13px; font-weight:600;
  color:var(--color-text-primary);
}
.ob-panel-head svg { color:var(--color-interactive-primary); flex-shrink:0; }
.ob-panel-count {
  margin-left:auto;
  font-size:10px; font-weight:600;
  color:var(--color-text-quaternary);
  background:var(--color-background-tertiary);
  padding:2px 8px; border-radius:8px;
}
.ob-panel-body { padding:12px 16px 16px; }

/* ── Empty state ── */
.ob-panel-empty {
  text-align:center; padding:32px 16px;
  color:var(--color-text-quaternary); font-size:12px; line-height:1.6;
}
.ob-panel-empty-icon {
  width:48px; height:48px; border-radius:50%;
  background:var(--color-background-tertiary); margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
}
.ob-panel-empty-icon svg { width:20px; height:20px; color:var(--color-text-quaternary); opacity:0.5; }

/* ── Preview Card (shared) ── */
.ob-pv {
  background:var(--color-background-primary); border:1px solid var(--color-border-default);
  border-radius:var(--radius); padding:16px;
  margin-bottom:10px; transition:all var(--duration) var(--ease);
  animation:obPvIn 0.3s var(--ease);
}
.ob-pv:last-child { margin-bottom:0; }
.ob-pv:hover { border-color:var(--color-border-hover); }
@keyframes obPvIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Preview card header row */
.ob-pv-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.ob-pv-icon {
  width:48px; height:48px; border-radius:var(--radius);
  overflow:hidden; background:var(--color-background-tertiary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid var(--color-border-default);
}
.ob-pv-icon img { width:100%; height:100%; object-fit:cover; }
.ob-pv-icon .ob-pv-initial {
  font-size:18px; font-weight:800;
  background:var(--gradient-warm); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.ob-pv-info { flex:1; min-width:0; }
.ob-pv-name { font-size:13px; font-weight:700; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ob-pv-sub { font-size:11px; color:var(--color-text-tertiary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Store / Provider badge */
.ob-pv-store {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:var(--radius-xs);
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  background:var(--color-background-tertiary); border:1px solid var(--color-border-default);
  color:var(--color-text-tertiary); flex-shrink:0;
}

/* Metadata pills */
.ob-pv-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.ob-pv-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:var(--radius-xs);
  font-size:10px; font-weight:500;
  background:var(--color-background-tertiary); color:var(--color-text-tertiary);
  border:1px solid var(--color-border-default);
}
.ob-pv-tag svg { width:10px; height:10px; }
.ob-pv-tag.rating { color:#F59E0B; }
.ob-pv-tag.followers { color:#A78BFA; }
.ob-pv-tag.ads { color:var(--color-interactive-primary); }
.ob-pv-tag.location { color:var(--color-feedback-info); }

/* Actions */
.ob-pv-actions { display:flex; gap:6px; }
.ob-pv-btn {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 12px; border-radius:var(--radius-sm); border:none;
  font-family:var(--font); font-size:11px; font-weight:600;
  cursor:pointer; transition:all var(--duration) var(--ease);
}
.ob-pv-btn svg { width:12px; height:12px; }
.ob-pv-btn.change { background:var(--color-interactive-primary-ghost); color:var(--color-interactive-primary); }
.ob-pv-btn.change:hover { background:var(--accent-glow-md); }
.ob-pv-btn.remove { background:var(--color-background-tertiary); color:var(--color-text-quaternary); border:1px solid var(--color-border-default); }
.ob-pv-btn.remove:hover { background:var(--danger-bg); color:var(--color-feedback-danger); border-color:rgba(239, 68, 68, 0.2); }

/* ── Pending card ── */
.ob-pv-pending {
  background:var(--color-background-primary); border:1px dashed var(--color-border-default);
  border-radius:var(--radius); padding:16px;
  margin-bottom:10px;
  display:flex; align-items:center; gap:12px;
  animation:obPvIn 0.3s var(--ease);
}
.ob-pv-pending:last-child { margin-bottom:0; }
.ob-pv-pending-icon {
  width:40px; height:40px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ob-pv-pending-icon svg { width:16px; height:16px; }
.ob-pv-pending-text { flex:1; min-width:0; }
.ob-pv-pending-title { font-size:12px; font-weight:600; color:var(--color-text-secondary); }
.ob-pv-pending-hint { font-size:10px; color:var(--color-text-quaternary); margin-top:2px; }
.ob-pv-pending-pulse {
  width:8px; height:8px; border-radius:50%;
  background:var(--color-feedback-warning); flex-shrink:0;
  animation:obPulse 2s ease-in-out infinite;
}
@keyframes obPulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }

/* ── Mobile: summary toggle ── */
.ob-mobile-toggle {
  display:none;
  width:100%; padding:12px 16px;
  background:var(--color-background-secondary); border:1px solid var(--color-border-default);
  border-radius:var(--radius); cursor:pointer;
  font-family:var(--font); font-size:12px; font-weight:600;
  color:var(--color-text-secondary);
  margin-top:20px; margin-bottom:10px;
  text-align:center; transition:all var(--duration);
}
.ob-mobile-toggle:hover { background:var(--color-background-tertiary); color:var(--color-text-primary); }

/* ── Country card (matches ob-card but at grid top) ── */
.ob-country-card { margin-bottom:20px; max-width:1100px; }
.ob-required { color:var(--color-interactive-primary); font-weight:700; }

/* ── Country Chips ── */
.cc-grid {
  display:flex; flex-wrap:wrap; gap:8px;
}
.cc-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:100px;
  background:var(--color-background-tertiary); border:1px solid var(--color-border-default);
  color:var(--color-text-secondary); font-size:13px; font-weight:500;
  cursor:pointer; user-select:none;
  transition:all 0.15s var(--ease);
}
.cc-chip:hover {
  background:var(--color-background-hover); border-color:var(--color-border-hover);
  color:var(--color-text-primary);
}
.cc-chip:focus-visible {
  outline:none; box-shadow:0 0 0 2px rgba(86, 103, 234, 0.25);
  border-color:var(--color-interactive-primary);
}
.cc-chip.cc-active {
  background:var(--gradient-warm); border-color:transparent;
  color:var(--color-light); font-weight:600;
  box-shadow:0 2px 8px rgba(86, 103, 234, 0.25);
}
.cc-chip.cc-active:hover {
  box-shadow:0 4px 12px var(--accent-glow-strong);
}
.cc-flag { font-size:16px; line-height:1; }
.cc-name { white-space:nowrap; }

/* ── Language / Locale section (inside country card) ── */
.ob-locale-section {
  border-top:1px solid var(--color-border-default);
  padding:14px 20px 18px; margin-top:6px;
}
.ob-locale-head {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.ob-locale-icon {
  width:28px; height:28px; border-radius:8px;
  background:rgba(245, 158, 11, 0.10); color:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ob-locale-title {
  font-size:13px; font-weight:600; color:var(--color-text-primary);
}

/* Auto badge (single-language countries) */
.lc-auto {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:100px;
  background:var(--color-background-tertiary); border:1px solid var(--color-border-default);
  font-size:13px; font-weight:500; color:var(--color-text-secondary);
}
.lc-auto-label { color:var(--color-text-primary); }
.lc-auto-code { font-size:11px; color:var(--color-text-tertiary); font-family:monospace; }
.lc-auto-badge {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;
  padding:2px 7px; border-radius:100px;
  background:rgba(245, 158, 11, 0.12); color:var(--orange);
}

/* ── Disabled card state ── */
.ob-card-disabled { opacity:0.45; pointer-events:none; position:relative; }
.ob-card-disabled .ob-pill-btn { cursor:not-allowed; }
.ob-country-hint {
  font-size:11px; font-weight:500; color:var(--color-interactive-primary);
  white-space:nowrap; flex-shrink:0;
  padding:4px 10px; border-radius:var(--radius);
  background:rgba(86, 103, 234, 0.08);
}

/* ── Country change confirmation modal ── */
.ob-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.15s ease;
}
.ob-modal {
  background:var(--color-background-secondary); border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg); padding:28px 32px;
  max-width:400px; width:90%; text-align:center;
  box-shadow:0 20px 60px rgba(0, 0, 0, 0.4);
  animation:pageIn 0.2s var(--ease);
}
.ob-modal-icon { color:var(--warning, #f59e0b); margin-bottom:12px; }
.ob-modal-title { font-size:16px; font-weight:700; color:var(--color-text-primary); margin-bottom:8px; }
.ob-modal-desc { font-size:13px; color:var(--color-text-secondary); line-height:1.5; margin-bottom:20px; }
.ob-modal-actions { display:flex; gap:10px; justify-content:center; }
.ob-modal-btn-cancel {
  background:var(--color-background-tertiary); border:1px solid var(--color-border-default);
  color:var(--color-text-secondary); padding:8px 20px; border-radius:var(--radius);
  font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer;
  transition:all var(--duration);
}
.ob-modal-btn-cancel:hover { background:var(--color-background-hover); color:var(--color-text-primary); }
.ob-modal-btn-confirm { padding:8px 20px; font-size:13px; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Right panel country badge (premium mini-card) ── */
.ob-pv-country {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; margin-bottom:14px;
  background:var(--gradient-warm-soft);
  border:1px solid rgba(86, 103, 234, 0.12);
  border-radius:var(--radius); transition:border-color var(--duration);
}
.ob-pv-country:hover { border-color:rgba(86, 103, 234, 0.25); }
.ob-pv-country-flag { font-size:22px; line-height:1; flex-shrink:0; }
.ob-pv-country-info { flex:1; min-width:0; }
.ob-pv-country-label { font-size:10px; font-weight:500; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
.ob-pv-country-name { font-size:13px; font-weight:600; color:var(--color-text-primary); margin-top:1px; }
.ob-pv-country-check { color:var(--color-interactive-primary); flex-shrink:0; }

/* ── Right panel locale badge ── */
.ob-pv-locale {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin-bottom:14px;
  background:rgba(245, 158, 11, 0.05);
  border:1px solid rgba(245, 158, 11, 0.10);
  border-radius:var(--radius); transition:border-color var(--duration);
}
.ob-pv-locale:hover { border-color:rgba(245, 158, 11, 0.20); }
.ob-pv-locale-icon {
  width:32px; height:32px; border-radius:8px;
  background:rgba(245, 158, 11, 0.10); color:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ob-pv-locale-code {
  font-size:11px; font-weight:500; color:var(--color-text-tertiary);
  font-family:monospace; flex-shrink:0;
}

/* ══════════════════════════════════════
   COMPETITORS SETUP
   ══════════════════════════════════════ */
.comp-divider {
  height:1px; margin:48px 0 8px;
  background:linear-gradient(90deg, transparent, var(--color-border-hover), transparent);
}
.comp-counter {
  font-size:13px; font-weight:600; color:var(--color-text-tertiary);
  padding:5px 14px; background:var(--color-background-tertiary);
  border-radius:100px; border:1px solid var(--color-border-default);
  white-space:nowrap;
}
.comp-tabs-row {
  display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap;
}
.comp-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.comp-tab {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:100px;
  background:var(--color-background-tertiary); border:1px solid var(--color-border-default);
  color:var(--color-text-secondary); font-size:13px; font-weight:500;
  cursor:pointer; transition:all 0.15s var(--ease);
}
.comp-tab:hover { background:var(--color-background-hover); border-color:var(--color-border-hover); color:var(--color-text-primary); }
.comp-tab-active {
  background:var(--gradient-warm); border-color:transparent;
  color:var(--color-text-primary); font-weight:600; box-shadow:0 2px 8px rgba(86, 103, 234, 0.25);
}
.comp-tab-num {
  width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255, 255, 255, 0.12); font-size:11px; font-weight:700;
}
.comp-tab-active .comp-tab-num { background:rgba(255, 255, 255, 0.25); }
.comp-tab-label { white-space:nowrap; }

.comp-add-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:100px;
  background:transparent; border:1px dashed var(--color-border-hover);
  color:var(--color-text-tertiary); font-size:13px; font-weight:500;
  cursor:pointer; transition:all 0.15s var(--ease);
}
.comp-add-btn:hover { border-color:var(--color-interactive-primary); color:var(--color-interactive-primary); }
.comp-add-btn:disabled { opacity:0.35; cursor:not-allowed; }
.comp-add-btn:disabled:hover { border-color:var(--color-border-hover); color:var(--color-text-tertiary); }

/* ── Collection Status Panel ── */
.coll-status-panel {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 20px;
}
.coll-status-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600; color: var(--color-text-secondary);
}
.coll-status-header span { flex: 1; }
.coll-refresh-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; color: var(--color-text-tertiary); cursor: pointer; transition: all 0.15s;
}
.coll-refresh-btn:hover { border-color: var(--color-interactive-primary); color: var(--color-interactive-primary); }
.coll-refresh-btn.spinning svg { animation: spin-once 0.6s ease; }
@keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.coll-status-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.coll-card {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.coll-card-top {
  display: flex; align-items: center; gap: 8px;
}
.coll-card-provider {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 4px;
}
.coll-card-provider--google { background: rgba(66, 133, 244, 0.12); color: #4285f4; }
.coll-card-provider--meta { background: rgba(24, 119, 242, 0.12); color: #1877f2; }
.coll-card-advid {
  font-size: 12px; color: var(--color-text-secondary); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.coll-card-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.coll-badge-healthy { background: var(--success-bg); color: var(--color-feedback-success); }
.coll-badge-collecting { background: rgba(50, 173, 230, 0.15); color: #32ade6; }
.coll-badge-enriching { background: rgba(175, 130, 255, 0.15); color: #af82ff; }
.coll-badge-waiting { background: rgba(255, 214, 10, 0.15); color: #ffd60a; }
.coll-badge-error { background: var(--danger-bg); color: var(--color-feedback-danger); }
.coll-card-stats {
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--color-text-tertiary);
}
.coll-stat { display: flex; align-items: center; gap: 3px; }
.coll-stat-val { font-weight: 600; color: var(--color-text-secondary); }
.coll-card-time {
  font-size: 11px; color: var(--color-text-tertiary); border-top: 1px solid var(--border);
  padding-top: 6px; margin-top: 2px;
}
.coll-card-error {
  font-size: 11px; color: var(--color-feedback-danger); background: var(--danger-bg);
  padding: 4px 8px; border-radius: 4px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.comp-empty {
  text-align:center; padding:60px 20px; color:var(--color-text-tertiary); font-size:14px; line-height:1.6;
}
.comp-empty-icon { margin-bottom:16px; opacity:0.25; }

.comp-form-header {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; margin-bottom:16px;
  background:var(--color-background-secondary); border:1px solid var(--color-border-default);
  border-radius:var(--radius);
}
.comp-editing-label {
  flex:1; font-size:15px; font-weight:600; color:var(--color-text-primary);
}
.comp-form-actions { display:flex; gap:8px; }
.comp-rename-btn, .comp-remove-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--radius);
  font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid var(--color-border-default); transition:all 0.15s;
}
.comp-rename-btn { background:var(--color-background-tertiary); color:var(--color-text-secondary); }
.comp-rename-btn:hover { color:var(--color-text-primary); border-color:var(--color-border-hover); }
.comp-remove-btn { background:rgba(239, 68, 68, 0.08); color:#ef4444; border-color:rgba(239, 68, 68, 0.15); }
.comp-remove-btn:hover { background:rgba(239, 68, 68, 0.15); }
.comp-rename-input {
  background:var(--color-background-tertiary); border:1px solid var(--color-interactive-primary); border-radius:6px;
  padding:4px 10px; font-size:15px; font-weight:600; color:var(--color-text-primary);
  outline:none; width:220px; box-shadow:0 0 0 2px rgba(86, 103, 234, 0.15);
}

/* Light theme — competitors */

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 1200px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .charts { grid-template-columns: 1fr; }
  .insights { grid-template-columns: 1fr; }
  .ob-grid { grid-template-columns:1fr 320px; gap:20px; }
}

@media (max-width: 1024px) {
  .ob-grid { grid-template-columns:1fr; }
  .ob-right { display:none; }
  .ob-right.mobile-open { display:block; }
  .ob-mobile-toggle { display:block; }
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0 !important; }
  .metrics { grid-template-columns: 1fr; }
  .page { padding: 16px; }
  .set-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .cc-grid { gap:6px; }
  .cc-chip { padding:7px 11px; font-size:12px; }
}

/* ═══════════════════════════════════════════════════════════════
   DRAFT / UNSAVED CHANGES SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Draft badge in page header ── */
.draft-badge {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--color-feedback-warning);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.draft-badge.visible { display: inline-flex; }
.draft-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Sticky unsaved-changes banner ── */
.draft-banner {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 -24px 16px;
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid var(--warning-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.draft-banner.visible { display: flex; }
.draft-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.draft-banner-left svg {
  width: 16px; height: 16px;
  color: var(--color-feedback-warning);
  flex-shrink: 0;
}
.draft-banner-left span { color: var(--color-feedback-warning); font-weight: 500; }
.draft-banner-actions {
  display: flex;
  gap: 8px;
}
.draft-banner-btn {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-secondary);
  transition: all var(--duration) var(--ease);
}
.draft-banner-btn:hover {
  background: var(--color-background-hover);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}
.draft-banner-btn.primary {
  background: var(--color-feedback-warning);
  border-color: var(--color-feedback-warning);
  color: #000;
}
.draft-banner-btn.primary:hover {
  background: #D97706;
  border-color: #D97706;
}

/* ── Competitor tab dirty/saved indicators ── */
.comp-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px;
  transition: background var(--duration) var(--ease);
}
.comp-tab-dot.dirty { background: var(--color-feedback-warning); }
.comp-tab-dot.saved { background: var(--color-feedback-success); }

/* ── Sidebar Competitors section ── */
.s-comp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
  text-decoration: none;
  cursor: pointer;
}
.s-comp-item:hover {
  color: var(--color-text-secondary);
  background: var(--color-background-tertiary);
}
.s-comp-item.active {
  color: var(--color-text-primary);
  background: var(--color-interactive-primary-ghost);
}
.s-comp-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.s-comp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-comp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-feedback-warning);
  flex-shrink: 0;
}

/* ── Auto-save status indicator ── */
.autosave-status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap;
}
.autosave-status.saving {
  opacity: 1;
  color: var(--color-text-tertiary);
}
.autosave-status.saved {
  opacity: 1;
  color: var(--color-feedback-success);
}
.autosave-status.error {
  opacity: 1;
  color: var(--color-feedback-danger);
}
/* My Company page, creative cards, campaign sections — L3487-L4786 of app.css */

/* ══════════════════════════════════════
   MY COMPANY PAGE
   ══════════════════════════════════════ */

.mc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 1rem;
}
.mc-empty-state .mc-empty-icon {
  color: var(--color-text-quaternary);
  margin-bottom: 0.5rem;
}
.mc-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.mc-empty-state p {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 360px;
  line-height: 1.5;
}

.mc-provider-error {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--danger-bg);
  color: var(--color-feedback-danger);
  font-weight: 500;
}

.mc-skel {
  color: transparent !important;
  background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-elevated) 50%, var(--color-background-tertiary) 75%);
  background-size: 200% 100%;
  animation: mc-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  min-width: 60px;
  display: inline-block;
}
@keyframes mc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mc-updating-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--info, #3B82F6);
  background: var(--info-bg, rgba(59,130,246,0.1));
  padding: 3px 10px;
  border-radius: var(--radius-sm, 6px);
  margin-left: 12px;
  animation: mc-pulse 1.5s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.mc-skel-donut {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--color-background-tertiary);
  animation: mc-shimmer 1.5s infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-elevated) 50%, var(--color-background-tertiary) 75%);
}

.mc-fmt {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--color-background-elevated);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}
.mc-fmt.warm { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); }
.mc-fmt.blue { background: var(--info-bg); color: var(--color-feedback-info); }
.mc-fmt.orange { background: var(--warning-bg); color: var(--color-feedback-warning); }

/* ══════════════════════════════════════
   CREATIVE CARDS — Grid + Card
   ══════════════════════════════════════ */

.cc-section { margin-top: 24px; position: relative; }

.cc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cc-section-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-section-title {
  font-size: 13px;
  font-weight: 600;
}
.cc-section-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-quaternary);
}

/* Grid: 3 cols desktop, 2 tablet, 1 mobile */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .cc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cc-grid { grid-template-columns: 1fr; } }

/* Card */
.cc-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration), box-shadow var(--duration);
  position: relative;
}
.cc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-warm);
  opacity: 0;
  transition: opacity var(--duration);
}
.cc-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}
.cc-card:hover::after { opacity: 1; }

/* Card Header: pills row */
.cc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 0;
  flex-wrap: wrap;
}

/* Status pill */
.cc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.2px;
}
.cc-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.cc-status-active {
  background: var(--success-bg);
  color: var(--color-feedback-success);
  border: 1px solid var(--success-border);
}
.cc-status-removed {
  background: var(--danger-bg);
  color: var(--color-feedback-danger);
  border: 1px solid rgba(239,68,68,0.20);
}
.cc-status-inactive {
  background: var(--color-background-elevated);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-default);
}

/* Provider pill (reuses existing .prov but smaller in card context) */
.cc-prov {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}
.cc-prov svg { width: 10px; height: 10px; }

/* Format pill */
.cc-format {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-quaternary);
}

/* Recency status pill (replaces Active/Inactive/Removed) */
.cc-recency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.2px;
}
.cc-recency::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.cc-recency-new {
  background: var(--success-bg);
  color: var(--color-feedback-success);
  border: 1px solid var(--success-border);
}
.cc-recency-recent {
  background: rgba(59,130,246,0.08);
  color: #3B82F6;
  border: 1px solid rgba(59,130,246,0.2);
}
.cc-recency-historic {
  background: var(--color-background-elevated);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-default);
}
.cc-recency-unavailable {
  background: var(--color-background-elevated);
  color: var(--color-text-quaternary);
  border: 1px solid var(--color-border-default);
}

/* Advertiser name row */
.cc-advertiser {
  padding: 6px 16px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-advertiser--market {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  padding: 8px 16px 0;
}

/* Fallback hint */
.creative-unavailable-hint {
  font-size: 11px;
  opacity: 0.5;
}

/* Card Meta */
.cc-meta {
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}
.cc-meta-label {
  color: var(--color-text-quaternary);
  font-weight: 500;
  white-space: nowrap;
}
.cc-meta-val {
  color: var(--color-text-secondary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-copy-btn {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-quaternary);
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration), background var(--duration);
  flex-shrink: 0;
}
.cc-copy-btn:hover {
  color: var(--color-text-secondary);
  background: var(--color-background-elevated);
}

/* Platforms row */
.cc-platforms {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px 0;
}
.cc-plat-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--color-background-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-tertiary);
}
.cc-plat-icon svg { width: 10px; height: 10px; }

/* Card Body Text */
.cc-body-text {
  padding: 10px 16px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Media Preview */
.cc-media {
  margin: 12px 16px 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-background-tertiary);
  position: relative;
  aspect-ratio: 16 / 10;
}
.cc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}
.cc-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-quaternary);
  position: absolute;
  top: 0; left: 0;
}
.cc-media-placeholder svg { width: 32px; height: 32px; opacity: 0.5; }

/* Video play overlay */
.cc-play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.cc-play-overlay svg { width: 16px; height: 16px; margin-left: 2px; }

/* Card Footer */
.cc-footer {
  padding: 12px 16px 14px;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-btn-detail {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--duration);
  text-decoration: none;
}
.cc-btn-detail:hover {
  background: var(--color-background-hover);
  border-color: var(--color-border-hover);
}
.cc-btn-detail svg { width: 12px; height: 12px; flex-shrink: 0; }

.cc-btn-ext {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--duration);
  text-decoration: none;
}
.cc-btn-ext:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-hover);
}
.cc-btn-ext svg { width: 12px; height: 12px; }

/* Empty state in grid */
.cc-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 2rem;
  color: var(--color-text-tertiary);
  font-size: 13px;
  line-height: 1.5;
}

/* Skeleton cards */
.cc-card-skel { pointer-events: none; }
.cc-skel-media {
  margin: 14px 16px 0;
  height: 120px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-elevated) 50%, var(--color-background-tertiary) 75%);
  background-size: 200% 100%;
  animation: mc-shimmer 1.5s infinite;
}
.cc-skel-line {
  margin: 10px 16px 0;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-elevated) 50%, var(--color-background-tertiary) 75%);
  background-size: 200% 100%;
  animation: mc-shimmer 1.5s infinite;
}
.cc-skel-line.w60 { width: 60%; }
.cc-skel-line.w40 { width: 40%; }
.cc-skel-line.w80 { width: 80%; }
.cc-card-skel .cc-skel-line:last-child { margin-bottom: 16px; }

/* ── Creative Detail Modal ── */
.cc-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cc-modal {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: fadeInUp 0.3s ease-out;
}
.cc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}
.cc-modal-title {
  font-size: 14px;
  font-weight: 600;
}
.cc-modal-close {
  background: none; border: none;
  color: var(--color-text-tertiary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color var(--duration), background var(--duration);
}
.cc-modal-close:hover {
  color: var(--color-text-primary);
  background: var(--color-background-elevated);
}
.cc-modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
}
.cc-modal-body .cc-modal-row {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.cc-modal-body .cc-modal-row:last-child { border-bottom: none; }
.cc-modal-body .cc-modal-lbl {
  color: var(--color-text-quaternary);
  font-weight: 500;
  min-width: 110px;
  flex-shrink: 0;
}
.cc-modal-body .cc-modal-val {
  color: var(--color-text-secondary);
  word-break: break-all;
}
.cc-modal-body .cc-modal-img {
  width: 100%;
  border-radius: 8px;
  margin-top: 12px;
}
.cc-modal-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--color-border-default);
  margin-bottom: 4px;
}
.cc-modal-section-title:first-child {
  padding-top: 0;
}
.cc-modal-media-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-background-elevated);
  margin-bottom: 4px;
}
.cc-modal-media-wrap .cc-modal-img {
  margin-top: 0;
  border-radius: 10px;
  display: block;
}
.cc-modal-media-wrap .cc-modal-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  pointer-events: none;
}
.cc-modal-media-wrap .cc-modal-play-overlay svg {
  width: 48px;
  height: 48px;
  opacity: .9;
}

/* Light theme overrides for creative cards — selectors removed (orphan block) */

/* ══════════════════════════════════════
   VARIATION CAROUSEL
   ══════════════════════════════════════ */

.car-wrap {
  position: relative;
  margin: 12px 16px 0;
}

/* Counter badge */
.car-counter {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
}

/* Viewport clips slides */
.car-viewport {
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-background-tertiary);
  aspect-ratio: 16 / 10;
  position: relative;
}
.car-viewport-lg {
  aspect-ratio: auto;
}

/* Track holds slides side by side */
.car-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Each slide */
.car-slide {
  min-width: 100%;
  width: 100%;
  position: relative;
  flex-shrink: 0;
}
.car-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.car-slide .cc-media-placeholder {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-quaternary);
}
.car-slide .cc-media-placeholder svg { width: 32px; height: 32px; opacity: 0.5; }

/* Arrows */
.car-prev, .car-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--duration), opacity var(--duration);
  opacity: 0;
}
.car-wrap:hover .car-prev,
.car-wrap:hover .car-next { opacity: 1; }
.car-prev { left: 6px; }
.car-next { right: 6px; }
.car-prev:hover, .car-next:hover { background: rgba(0,0,0,0.8); }

/* Dots */
.car-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 8px 0 2px;
}
.car-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--color-text-quaternary);
  opacity: 0.4;
  cursor: pointer;
  padding: 0;
  transition: all var(--duration);
}
.car-dot.active {
  opacity: 1;
  background: var(--color-interactive-primary);
  width: 16px;
  border-radius: 3px;
}

/* ── Modal variation slides ── */
.cc-modal-variations {
  margin-top: 4px;
}
.cc-modal-variations .car-wrap {
  margin: 0;
}
.cc-modal-variations .car-viewport-lg {
  border-radius: 10px;
  overflow: hidden;
}
.cc-modal-variations .car-prev,
.cc-modal-variations .car-next {
  opacity: 1;
}

.car-slide-modal {
  display: flex;
  flex-direction: column;
  background: var(--color-background-tertiary);
  overflow: hidden;
}
.car-slide-head {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-quaternary);
  letter-spacing: 0.3px;
}
.car-slide-img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: var(--color-background-screen);
}
.car-slide-noimg {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-quaternary);
  background: var(--color-background-screen);
}
.car-slide-noimg svg { width: 32px; height: 32px; opacity: 0.4; }
.car-slide-text {
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-height: 80px;
  overflow: hidden;
}
.car-slide-cta {
  padding: 0 14px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-interactive-primary);
}

/* Light theme — carousel */

/* ══════════════════════════════════════
   MY COMPANY — Tab count badge + Pagination
   ══════════════════════════════════════ */
.mc-tab-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-quaternary);
  margin-left: 2px;
}

.mca-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 0;
}
.mca-page-info {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  min-width: 100px;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   ASA Integration (Settings → Integrations)
   ══════════════════════════════════════════════════ */

.asa-form-row {
  display: flex;
  gap: 16px;
}
@media (max-width: 600px) {
  .asa-form-row { flex-direction: column; gap: 0; }
}

.asa-textarea {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}

.asa-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Status bar */
.asa-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--color-border-default);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.asa-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.asa-status-dot.asa-status-ok { background: var(--color-feedback-success, #43a047); }
.asa-status-dot.asa-status-warn { background: var(--warning, #f57c00); }

.asa-status-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.asa-status-info strong {
  font-size: 13px;
  color: var(--color-text-primary);
}
.asa-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.asa-status-badge.asa-status-ok {
  background: rgba(67, 160, 71, 0.15);
  color: var(--color-feedback-success, #43a047);
}
.asa-status-badge.asa-status-warn {
  background: rgba(245, 124, 0, 0.15);
  color: var(--warning, #f57c00);
}

.asa-status-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.asa-status-error {
  color: var(--color-feedback-danger, #e53935);
}

/* Overview cards */
.asa-overview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.asa-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.asa-card {
  padding: 16px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--color-border-default);
}
.asa-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.asa-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Setup page ASA badge */
.asa-setup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 16px;
  margin-top: 8px;
}
.asa-setup-badge.not-connected {
  background: rgba(245, 124, 0, 0.12);
  color: var(--warning, #f57c00);
}
.asa-setup-badge.connected {
  background: rgba(67, 160, 71, 0.12);
  color: var(--color-feedback-success, #43a047);
}
.asa-setup-badge a {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN INTELLIGENCE — Components
   ═══════════════════════════════════════════════════════════════ */

/* ── View toggle ────────────────────────────────────────────── */

.camp-view-toggle {
  display: flex;
  background: var(--color-background-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border-default);
  overflow: hidden;
}
.camp-toggle-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.camp-toggle-btn.active {
  color: var(--color-text-primary);
  background: var(--color-background-tertiary);
}
.camp-toggle-btn:hover:not(.active) {
  color: var(--color-text-secondary);
  background: var(--color-background-hover);
}

/* ── Filters ────────────────────────────────────────────────── */

.camp-filters {
  margin-bottom: 20px;
}
.camp-filter-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.camp-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.camp-filter-grow { flex: 1; min-width: 180px; }
.camp-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.camp-select, .camp-input {
  padding: 7px 10px;
  font-size: 0.82rem;
  color: var(--color-text-primary);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}
.camp-select:focus, .camp-input:focus {
  border-color: var(--color-interactive-primary);
}
.camp-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.camp-slider {
  width: 100px;
  accent-color: var(--color-interactive-primary);
}
.camp-slider-val {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  min-width: 30px;
}

/* ── Active filter chips ────────────────────────────────────── */

.camp-active-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}
.camp-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  background: var(--color-background-tertiary);
  border-radius: 9999px;
  border: 1px solid var(--color-border-default);
}
.camp-active-chip button {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 2px;
}
.camp-active-chip button:hover { color: var(--color-interactive-primary); }
.camp-clear-all {
  font-size: 0.72rem;
  color: var(--color-interactive-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Provider status banner ─────────────────────────────────── */

.camp-provider-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--orange);
  background: rgba(255, 106, 0, 0.06);
  border: 1px solid rgba(255, 106, 0, 0.15);
  border-radius: 8px;
}

/* ── Campaign card grid ─────────────────────────────────────── */

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

.camp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.camp-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.camp-card-cross {
  border-left: 3px solid var(--color-interactive-primary);
}

.camp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.camp-card-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}
.camp-card-meta {
  display: flex;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}
.camp-card-meta strong {
  color: var(--color-text-secondary);
  font-weight: 600;
}
.camp-card-count, .camp-card-active {
  display: flex;
  align-items: center;
  gap: 3px;
}
.camp-card-dates {
  font-size: 0.72rem;
  color: var(--color-text-quaternary, var(--color-text-tertiary));
}
.camp-card-format {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Provider badges ────────────────────────────────────────── */

.camp-provider-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.camp-badge-google {
  background: rgba(66, 133, 244, 0.12);
  color: #4285F4;
}
.camp-badge-meta {
  background: rgba(0, 132, 255, 0.12);
  color: #0084FF;
}

/* ── Confidence bar ─────────────────────────────────────────── */

.camp-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
}
.camp-confidence-lg { margin-top: 4px; }
.camp-confidence-bar {
  flex: 1;
  height: 4px;
  background: var(--color-background-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.camp-confidence-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.camp-confidence-val {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  min-width: 30px;
  text-align: right;
}

/* ── Signal chips ───────────────────────────────────────────── */

.camp-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.camp-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.68rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  background: var(--color-background-tertiary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.camp-chip-domain { border-color: rgba(66, 133, 244, 0.2); color: #4285F4; }
.camp-chip-utm { border-color: rgba(255, 106, 0, 0.2); color: var(--orange); }
.camp-chip-strategy { border-color: rgba(168, 85, 247, 0.2); color: #A855F7; }
.camp-chip-offer { border-color: rgba(34, 197, 94, 0.2); color: #22C55E; }
.camp-chip-keyword { border-color: rgba(236, 72, 153, 0.2); color: #EC4899; font-size: 11px; }
.camp-chip-keyword .camp-kw-count { font-size: 9px; opacity: 0.6; margin-left: 3px; }
.camp-chip-keyword-relevant { border-color: rgba(245, 158, 11, 0.25); color: #F59E0B; font-size: 11px; }
.camp-chip-stale { border-color: rgba(245, 158, 11, 0.3); color: #F59E0B; font-size: 10px; font-style: italic; opacity: 0.8; }
.camp-chip-ok { border-color: rgba(34, 197, 94, 0.2); color: #22C55E; }

/* ── Keyword chips in campaign list card ──────────────────── */
.camp-keywords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ── Keywords section in campaign detail ──────────────────── */
.camp-keywords-section { display: flex; flex-wrap: wrap; gap: 16px; }
.camp-kw-group { flex: 1; min-width: 200px; }
.camp-kw-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
.camp-kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-empty-hint { color: var(--color-text-tertiary, #888); font-size: 0.85rem; padding: 12px 0; }

/* ── Skeleton ───────────────────────────────────────────────── */

.camp-card-skeleton { pointer-events: none; }
.skel {
  background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-elevated) 50%, var(--color-background-tertiary) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
.skel-title { width: 60%; height: 18px; margin-bottom: 6px; }
.skel-text { height: 12px; margin-bottom: 4px; }
.skel-chip { width: 60px; height: 20px; border-radius: 9999px; }
@keyframes skel-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Campaign empty state ───────────────────────────────────── */

.camp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  gap: 8px;
}
.camp-empty-icon {
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
.camp-empty h3 {
  font-size: 1.1rem;
  color: var(--color-text-primary);
  margin: 0;
}
.camp-empty p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 400px;
}
.camp-empty-hint {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}
/* Campaign detail, cross-channel, campaign insights — L4787-L6110 of app.css */

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

.camp-detail-back {
  margin-bottom: 16px;
}
.camp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.2s;
}
.camp-back-link:hover { color: var(--color-interactive-primary); }

.camp-detail-header {
  margin-bottom: 24px;
}
.camp-detail-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.camp-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.camp-detail-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.camp-detail-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.camp-stat {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
}
.camp-stat strong {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.camp-detail-section {
  margin-bottom: 28px;
}
.camp-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}
.camp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.camp-section-count {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

.camp-detail-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Signals list (bullet style) ────────────────────────────── */

.camp-signals-grid {
  padding: 0;
}
.camp-signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.camp-signal-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  border-left: 3px solid var(--color-border-default);
  font-size: 0.85rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}
.camp-signal-bullet strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.camp-signal-strategy { border-left-color: #A855F7; }
.camp-signal-domain { border-left-color: #4285F4; }
.camp-signal-utm { border-left-color: var(--orange); }
.camp-signal-time { border-left-color: #22C55E; }
.camp-signal-format { border-left-color: #F59E0B; }
.camp-signal-offer { border-left-color: #EC4899; }
.camp-signal-terms { border-left-color: #06B6D4; }
.camp-signal-visual { border-left-color: #8B5CF6; }
.camp-signal-palette { border-left-color: #F472B6; }
.camp-signal-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
}
.camp-signal-icon svg { flex-shrink: 0; }
.camp-signal-text {
  flex: 1;
  min-width: 0;
}
.camp-cohesion-label {
  font-weight: 600;
  font-size: 0.85rem;
}
.camp-palette-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.camp-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--color-border-default);
  flex-shrink: 0;
  vertical-align: middle;
}
.camp-swatch-label {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono, monospace);
  margin-right: 8px;
}

/* ── Section badge (signal count) ──────────────────────────── */

.camp-section-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-background-tertiary, rgba(255,255,255,0.06));
  color: var(--color-text-tertiary);
}
.camp-section-badge.camp-badge-good { background: var(--success-bg); color: var(--color-feedback-success); }
.camp-section-badge.camp-badge-ok { background: var(--warning-bg); color: var(--color-feedback-warning); }
.camp-section-badge.camp-badge-low { background: var(--danger-bg); color: var(--color-feedback-danger); }

/* ── Confidence Breakdown ──────────────────────────────────── */

.camp-cb-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.camp-cb-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.camp-cb-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  min-width: 140px;
  flex-shrink: 0;
}
.camp-cb-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-background-tertiary, rgba(255,255,255,0.06));
  border-radius: 4px;
  overflow: hidden;
}
.camp-cb-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.camp-cb-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 50px;
  text-align: right;
}

/* ── Data Availability ─────────────────────────────────────── */

.camp-data-avail {
  padding: 14px 16px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 10px;
  border-left: 3px solid rgba(59,130,246,0.4);
}
.camp-data-avail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--color-text-primary);
  font-size: 0.85rem;
}
.camp-data-avail-body {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 8px 0;
}
.camp-data-avail-has {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.75rem;
}
.camp-data-avail-label {
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.camp-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  background: var(--color-background-tertiary, rgba(255,255,255,0.06));
  color: var(--color-text-secondary);
}
.camp-chip-ok {
  background: rgba(34,197,94,0.1);
  color: var(--color-feedback-success);
}

/* ── Before vs After ───────────────────────────────────────── */

.camp-ba-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: start;
}
.camp-ba-col {
  padding: 14px 16px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
}
.camp-ba-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.camp-ba-count {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.camp-ba-formats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.camp-ba-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  font-size: 0.85rem;
  font-weight: 700;
}
.camp-ba-delta-up { color: var(--color-feedback-success); }
.camp-ba-delta-down { color: var(--color-feedback-danger); }
.camp-ba-delta-flat { color: var(--color-text-tertiary); }

@media (max-width: 600px) {
  .camp-ba-grid {
    grid-template-columns: 1fr;
  }
  .camp-ba-divider {
    padding: 4px 0;
  }
}

/* ── Campaign Changes ───────────────────────────────────────── */

.camp-changes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.camp-change-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
}
.camp-change-badge {
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.camp-change-low .camp-change-badge {
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
}
.camp-change-medium .camp-change-badge {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}
.camp-change-high .camp-change-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}
.camp-change-text {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

/* ── Timeline ───────────────────────────────────────────────── */

.camp-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.camp-tl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.camp-tl-week {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  min-width: 70px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.camp-tl-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--color-background-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.camp-tl-bar {
  height: 100%;
  background: var(--gradient-warm);
  border-radius: 3px;
  transition: width 0.3s;
}
.camp-tl-count {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  min-width: 24px;
  text-align: right;
}
.camp-tl-detail {
  font-size: 0.68rem;
  color: var(--color-text-tertiary);
  min-width: 100px;
}

/* ── Creative Gallery ───────────────────────────────────────── */

.camp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.camp-creative-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  transition: border-color 0.2s, transform 0.15s;
}
.camp-creative-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
}
.camp-creative-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.camp-creative-format {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.camp-creative-status {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.camp-status-active { background: rgba(34, 197, 94, 0.1); color: #22C55E; }
.camp-status-removed { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.camp-status-inactive { background: rgba(161, 161, 170, 0.1); color: #A1A1AA; }
.camp-creative-id {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  word-break: break-all;
}
.camp-creative-meta {
  display: flex;
  gap: 10px;
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
}
.camp-creative-score {
  font-size: 0.68rem;
  color: var(--color-text-tertiary);
}

/* ── Visual Families ──────────────────────────────────────────── */

.camp-families-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.camp-fam-card {
  background: var(--bg-card, #1a1a2e);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,.06));
  border-radius: 10px;
  padding: 14px;
  transition: border-color .15s;
}
.camp-fam-card:hover {
  border-color: var(--color-border-active, rgba(255,255,255,.12));
}
.camp-fam-ungrouped {
  opacity: .6;
}
.camp-fam-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.camp-fam-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text-primary);
}
.camp-fam-count {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
}
.camp-fam-palette {
  display: flex;
  gap: 3px;
}
.camp-fam-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.1);
}
.camp-fam-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.camp-fam-formats,
.camp-fam-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.camp-fam-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.camp-fam-id {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  padding: 2px 6px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  color: var(--color-text-tertiary);
}
.camp-fam-more {
  font-size: 0.65rem;
  padding: 2px 6px;
  color: var(--color-text-tertiary);
}
.camp-chip-removed {
  color: var(--color-danger, #ef4444);
  border-color: var(--color-danger, #ef4444);
}

/* ── Pagination ─────────────────────────────────────────────── */

.camp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.camp-page-info {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   CROSS-CHANNEL GROUP PAGE
   ═══════════════════════════════════════════════════════════════ */

.camp-group-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .camp-group-compare { grid-template-columns: 1fr; }
}
.camp-group-side {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.camp-group-side-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.camp-group-side-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
}
.camp-group-detail-link {
  font-size: 0.75rem;
  color: var(--color-interactive-primary);
  text-decoration: none;
}
.camp-group-detail-link:hover { text-decoration: underline; }
.camp-group-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.camp-group-creatives {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
}
.camp-group-creative {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--color-background-tertiary);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.camp-group-creative .camp-creative-format {
  min-width: 40px;
}
.camp-group-creative .camp-creative-id {
  flex: 1;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.camp-group-creative .camp-creative-date {
  font-size: 0.68rem;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN INSIGHTS (.ci-*)
   ═══════════════════════════════════════════════════════════════ */

.ci-filters { margin-bottom: 20px; }
.ci-filter-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }

/* KPI row */
.ci-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.ci-kpi-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.ci-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.1;
}
.ci-kpi-label {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ci-kpi-campaigns .ci-kpi-value { color: var(--color-interactive-primary); }
.ci-kpi-active .ci-kpi-value { color: var(--color-feedback-success); }
.ci-kpi-new .ci-kpi-value { color: var(--color-feedback-info); }

/* Section */
.ci-section {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.ci-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.ci-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

/* Tabs */
.ci-tab-bar { display: flex; gap: 4px; }
.ci-tab {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: transparent;
  border: 1px solid var(--color-border-default);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ci-tab:hover { color: var(--color-text-secondary); border-color: var(--color-border-hover); }
.ci-tab.active {
  background: var(--color-interactive-primary-ghost);
  color: var(--color-interactive-primary);
  border-color: var(--color-border-accent);
}

/* Table */
.ci-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.ci-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border-default);
}
.ci-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}
.ci-row { cursor: pointer; transition: background var(--duration) var(--ease); }
.ci-row:hover { background: var(--color-background-hover); }
.ci-cell-label {
  color: var(--color-text-primary);
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Provider icons */
.ci-prov {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-background-elevated);
}
.ci-prov-google { background: #4285F4; }
.ci-prov-meta { background: #0668E1; }

/* Confidence badges */
.ci-conf {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.ci-conf-high { background: var(--success-bg); color: var(--color-feedback-success); }
.ci-conf-med { background: var(--warning-bg); color: var(--color-feedback-warning); }
.ci-conf-low { background: var(--danger-bg); color: var(--color-feedback-danger); }

/* Charts row */
.ci-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.ci-chart-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  padding: 20px;
}

/* Donut */
.ci-donut-flex { display: flex; align-items: center; gap: 24px; }
.ci-donut-wrap svg { display: block; }
.ci-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.ci-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.ci-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ci-legend-label { color: var(--color-text-primary); font-weight: 500; }
.ci-legend-val { color: var(--color-text-tertiary); }

/* Bar chart */
.ci-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ci-bar-label {
  min-width: 80px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-bar-track {
  flex: 1;
  height: 8px;
  background: var(--color-background-tertiary);
  border-radius: 4px;
  overflow: hidden;
}
.ci-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s var(--ease);
}
.ci-bar-val {
  min-width: 36px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
}

/* Ranked list */
.ci-ranked-list { display: flex; flex-direction: column; gap: 6px; }
.ci-ranked-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-background-tertiary);
  font-size: 0.8rem;
}
.ci-ranked-pos {
  width: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
}
.ci-ranked-name {
  flex: 1;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-ranked-share {
  font-weight: 600;
  color: var(--color-text-tertiary);
}

/* Colors grid */
.ci-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ci-color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-background-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}
.ci-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.ci-color-hex { color: var(--color-text-secondary); font-family: monospace; font-size: 0.72rem; }
.ci-color-pct { color: var(--color-text-tertiary); font-weight: 600; }

/* Cohesion bars — reuse ci-bar-row */
.ci-cohesion-bars { padding-top: 8px; }

/* Changed campaigns */
.ci-changes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ci-change-card {
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ci-change-card:hover { border-color: var(--color-border-hover); background: var(--color-background-hover); }
.ci-change-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ci-change-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-change-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ci-change-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  background: var(--warning-bg);
  color: var(--color-feedback-warning);
  border: 1px solid var(--warning-border);
}
.ci-change-format_shift { background: var(--info-bg); color: var(--color-feedback-info); border-color: rgba(59,130,246,0.2); }
.ci-change-domain_change { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); border-color: var(--color-border-accent); }
.ci-change-status_mix { background: var(--danger-bg); color: var(--color-feedback-danger); border-color: rgba(239,68,68,0.2); }

.ci-empty-section {
  text-align: center;
  padding: 20px;
  color: var(--color-text-tertiary);
  font-size: 0.82rem;
}

/* Responsive */
@media (max-width: 768px) {
  .ci-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ci-charts-row { grid-template-columns: 1fr; }
  .ci-donut-flex { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL — Owner Lead Queue & Detail
   ═══════════════════════════════════════════════════════════════ */

.admin-filters {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}

.admin-search {
  flex: 1; min-width: 200px; height: 38px;
  background: var(--color-background-tertiary); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); padding: 0 12px;
  font-family: var(--font); font-size: 13px; color: var(--color-text-primary);
  outline: none; transition: border-color 0.2s;
}
.admin-search:focus { border-color: var(--color-interactive-primary); box-shadow: 0 0 0 1px var(--color-border-active); }
.admin-search::placeholder { color: var(--color-text-quaternary); }

.admin-select {
  height: 38px; background: var(--color-background-tertiary); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); padding: 0 12px;
  font-family: var(--font); font-size: 12px; color: var(--color-text-primary);
  outline: none; cursor: pointer; min-width: 140px;
}

.admin-input {
  width: 100%; height: 36px; background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-sm);
  padding: 0 10px; font-family: var(--font); font-size: 13px;
  color: var(--color-text-primary); outline: none;
}
.admin-input:focus { border-color: var(--color-interactive-primary); }

.admin-textarea {
  width: 100%; background: var(--color-background-tertiary); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); padding: 10px;
  font-family: var(--font); font-size: 13px; color: var(--color-text-primary);
  outline: none; resize: vertical;
}
.admin-textarea:focus { border-color: var(--color-interactive-primary); }

.admin-table-wrap {
  background: var(--color-background-secondary); border: 1px solid var(--color-border-default);
  border-radius: var(--radius); overflow-x: auto;
}

.admin-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}

.admin-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 600; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-background-primary);
}

.admin-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
}

.admin-row { transition: background 0.15s; }
.admin-row:hover { background: var(--color-background-tertiary); }

.admin-cell-name { font-weight: 500; }
.admin-cell-sub { font-size: 11px; color: var(--color-text-tertiary); }
.admin-cell-email { font-size: 12px; color: var(--color-text-secondary); }
.admin-cell-date { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; }

.admin-empty {
  padding: 32px; text-align: center; color: var(--color-text-tertiary); font-size: 13px;
}

.admin-error { color: var(--color-feedback-danger); }
.admin-hint-card { background: var(--color-background-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }

.admin-link {
  font-size: 12px; font-weight: 600; color: var(--color-interactive-primary);
  text-decoration: none; transition: color 0.2s;
}
.admin-link:hover { color: var(--color-interactive-primary-hover); }

.admin-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 16px;
}

.admin-page-btn {
  height: 32px; padding: 0 14px; background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s;
}
.admin-page-btn:hover { background: var(--color-background-elevated); color: var(--color-text-primary); }

.admin-page-info { font-size: 12px; color: var(--color-text-tertiary); }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
}
.badge--accent { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); }
.badge--success { background: var(--success-bg); color: var(--color-feedback-success); }
.badge--warning { background: var(--warning-bg); color: var(--color-feedback-warning); }
.badge--danger { background: var(--danger-bg); color: var(--color-feedback-danger); }
.badge--info { background: var(--info-bg); color: var(--color-feedback-info); }
.badge--muted { background: rgba(255,255,255,0.05); color: var(--color-text-tertiary); }
.badge--neutral { background: var(--color-background-tertiary); color: var(--color-text-secondary); }
.badge--sm { font-size: 10px; padding: 1px 6px; }
.badge--lg { font-size: 12px; padding: 4px 12px; }
.badge--scope { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.badge--scope-own { background: var(--success-bg); color: var(--color-feedback-success); }
.badge--scope-comp { background: var(--warning-bg); color: var(--color-feedback-warning); }
.badge--scope-unknown { background: rgba(255,255,255,0.06); color: var(--color-text-quaternary); }
.creative-entity { font-size: 10px; color: var(--color-text-tertiary); margin-left: 4px; }
.cc-pill-count { font-size: 10px; color: var(--color-text-quaternary); margin-left: 2px; }

/* ── Detail page ── */
.admin-back {
  font-size: 12px; color: var(--color-text-tertiary); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
}
.admin-back:hover { color: var(--color-interactive-primary); }
.admin-back::before { content: '\2190'; }

.admin-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) { .admin-detail-grid { grid-template-columns: 1fr; } }

.admin-card {
  background: var(--color-background-secondary); border: 1px solid var(--color-border-default);
  border-radius: var(--radius); padding: 20px;
  min-width: 0; max-width: 100%;
}

.admin-card-title {
  font-size: 13px; font-weight: 700; color: var(--color-text-primary);
  margin-bottom: 12px; letter-spacing: -0.2px;
}

.admin-field {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--color-border-default);
  font-size: 13px;
}
.admin-field:last-child { border-bottom: none; }

.admin-label {
  font-weight: 500; color: var(--color-text-tertiary); font-size: 12px;
  min-width: 120px;
}

.admin-actions-card { border-color: var(--color-border-default); }

.admin-action-title {
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}

.admin-action-row {
  margin-bottom: 10px;
}

.admin-divider {
  border: none; border-top: 1px solid var(--color-border-default);
  margin: 20px 0;
}

/* ── Buttons (Phase 6 local .btn-sm removed — use global DS) ── */

.btn-danger {
  background: var(--color-feedback-danger); color: white; width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.2s;
}
.btn-danger:hover:not(:disabled) { background: #dc2626; }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Events ── */
.admin-event {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--color-border-default);
  font-size: 12px;
}
.admin-event:last-child { border-bottom: none; }

.admin-event-type {
  font-weight: 600; color: var(--color-text-primary);
  background: rgba(255,255,255,0.04); padding: 2px 8px;
  border-radius: 4px; font-family: monospace; font-size: 11px;
}

.admin-event-date { color: var(--color-text-tertiary); font-size: 11px; }

.admin-event-payload {
  width: 100%; font-size: 11px; color: var(--color-text-quaternary);
  font-family: monospace; word-break: break-all;
}

/* ── Creatives page ── */
.creative-list-mini { margin-bottom: 12px; }
.creative-empty-mini { color: var(--color-text-tertiary); font-size: 13px; padding: 8px 0; }
.creative-item-mini {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--border-primary);
  font-size: 13px;
}
.creative-item-mini span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icon-sm {
  background: none; border: none; color: var(--color-text-quaternary); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.btn-icon-sm:hover { background: var(--color-background-tertiary); color: var(--color-interactive-primary); }
.creative-add-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.creative-add-form .admin-input,
.creative-add-form .admin-select { flex: 1; min-width: 120px; }

.creatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.creative-card {
  background: var(--color-background-secondary); border: 1px solid var(--border-primary);
  border-radius: 10px; overflow: hidden; transition: border-color 0.15s;
}
.creative-card:hover { border-color: var(--color-interactive-primary); }
.creative-media {
  width: 100%; height: 180px; object-fit: cover; display: block;
  background: var(--color-background-tertiary);
}
.creative-no-media {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-quaternary); font-size: 13px;
}
.creative-placeholder {
  flex-direction: column; gap: 8px;
}
.creative-placeholder svg { opacity: 0.4; }
.creative-placeholder-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  opacity: 0.6;
}
.creative-unavailable, .cc-media--unavailable {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 180px;
  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary, var(--color-background-tertiary)) 100%);
  color: var(--color-text-quaternary);
  border-radius: var(--radius, 8px);
  border: 1px dashed var(--color-border-subtle, rgba(128,128,128,0.15));
  padding: 16px;
  text-align: center;
}
.creative-unavailable svg, .cc-media--unavailable svg { opacity: 0.2; }
.creative-unavailable-label {
  font-size: 12px; font-weight: 500; opacity: 0.7;
}
.creative-unavailable-link {
  font-size: 11px; color: var(--color-interactive-primary); text-decoration: none;
  opacity: 0.8; transition: opacity 0.15s;
}
.creative-unavailable-link:hover { opacity: 1; text-decoration: underline; }
.creative-media-wrapper {
  position: relative; width: 100%; height: 180px; overflow: hidden;
  background: var(--color-background-tertiary);
}
.creative-media-wrapper .creative-media {
  width: 100%; height: 100%; object-fit: cover;
}
.creative-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,0.55); display: flex; align-items: center;
  justify-content: center; pointer-events: none;
}
.creative-play-badge svg { margin-left: 3px; }
.creative-info { padding: 12px; }
.creative-title {
  font-weight: 600; font-size: 14px; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.creative-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.creative-advertiser { font-size: 12px; color: var(--color-text-tertiary); }
.creative-domain { font-size: 11px; color: var(--color-text-quaternary); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creative-domain-label { color: var(--color-text-tertiary); font-weight: 500; }
.creative-source-link { display: block; font-size: 11px; color: var(--color-interactive-primary); text-decoration: none; margin-top: 6px; opacity: 0.7; transition: opacity 0.15s; }
.creative-source-link:hover { opacity: 1; text-decoration: underline; }
.creative-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.4; }
.creative-date { font-size: 11px; color: var(--color-text-quaternary); margin-top: 8px; }

/* History banner (free plan) */
.history-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-text-secondary);
}
.history-banner svg { flex-shrink: 0; color: #F59E0B; }
.history-banner-link {
  margin-left: auto; white-space: nowrap;
  color: var(--color-interactive-primary); font-weight: 600; font-size: 12px; text-decoration: none;
}
.history-banner-link:hover { text-decoration: underline; }

/* Taxonomy badges */
.taxonomy-badges {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.badge--taxonomy {
  background: rgba(139,92,246,0.10);
  color: #A78BFA;
  border: 1px solid rgba(139,92,246,0.18);
  font-size: 11px; padding: 2px 7px;
  border-radius: 4px; text-transform: capitalize;
  white-space: nowrap;
}
.badge--overflow {
  background: rgba(139,92,246,0.05);
  color: var(--color-text-tertiary);
  border-color: rgba(139,92,246,0.10);
}

/* Premium gate */
.premium-gate {
  text-align: center; padding: 32px 24px;
  background: linear-gradient(135deg, var(--color-background-secondary), var(--color-background-tertiary));
  border: 1px dashed var(--color-interactive-primary);
}
.premium-gate-icon { color: var(--color-interactive-primary); margin-bottom: 12px; }
.premium-gate-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; }
.premium-gate-desc { font-size: 14px; color: var(--color-text-secondary); max-width: 400px; margin: 0 auto; }

/* ── Data Sources ────────────────────────────────────────────── */
.ds-connectors-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-top: 12px;
}
.ds-connector-card {
  background: var(--color-background-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; text-align: center;
  transition: border-color 0.15s;
}
.ds-connector-card:hover { border-color: var(--color-interactive-primary); }
.ds-connector-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; margin: 0 auto 8px;
  color: #fff;
}
.ds-icon-meta { background: #1877f2; }
.ds-icon-google { background: #4285f4; }
.ds-icon-appsflyer { background: #12a86c; }
.ds-icon-adjust { background: #ff7a59; }
.ds-connector-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 10px; }
.ds-connection-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 8px;
}
.ds-connection-row:last-child { border-bottom: none; }
.ds-connection-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-connection-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-error { font-size: 11px; color: var(--red); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ds-error-detail { font-size: 11px; color: var(--red); padding: 4px 0; width: 100%; word-break: break-word; }
.ds-sync-info { font-size: 11px; color: var(--color-text-tertiary); }
.ds-connector-status { font-size: 11px; margin-bottom: 6px; font-weight: 500; }
.ds-status-ready { color: var(--color-feedback-success); }
.ds-status-blocked { color: var(--red); }
.ds-connector-warning { font-size: 10px; color: var(--color-text-tertiary); margin-bottom: 8px; line-height: 1.3; max-height: 40px; overflow: hidden; }
.ds-connector-disabled { opacity: 0.6; }
.ds-connector-disabled:hover { border-color: var(--border); }
.btn-xs { font-size: 11px; padding: 3px 8px; border-radius: var(--radius-sm); }
.btn-danger { background: var(--red); color: #fff; border: none; }
.btn-danger:hover { opacity: 0.85; }
.badge--success { background: var(--success-bg); color: var(--color-feedback-success); }
.badge--warn { background: var(--warning-bg); color: var(--color-feedback-warning); }
.badge--danger { background: var(--danger-bg); color: var(--color-feedback-danger); }
/* Product phases, admin panel, progressive pages — L6111-L11993 of app.css */

/* ═══════════════════════════════════════════════════════════════
   PHASE 7 — Creative Insights
   ═══════════════════════════════════════════════════════════════ */

.pg-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.pg-title { font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.pg-desc { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 0; }

/* Legacy Phase 7 .btn overrides removed — use global DS button system */

.ins-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ins-kpi-card { background: var(--color-background-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius); padding: 16px; }
.ins-kpi-label { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.ins-kpi-value { font-size: 28px; font-weight: 700; color: var(--color-text-primary); }
.ins-kpi-success { color: var(--color-feedback-success); }
.ins-kpi-danger { color: var(--color-feedback-danger); }
.ins-kpi-info { color: var(--color-feedback-info); }

.ins-tabs { display: flex; gap: 2px; margin-bottom: 16px; background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 3px; border: 1px solid var(--color-border-default); width: fit-content; }
.ins-tab { padding: 6px 14px; font-size: 12px; font-weight: 500; border: none; background: none; color: var(--color-text-secondary); cursor: pointer; border-radius: var(--radius-xs); transition: all var(--duration) var(--ease); font-family: var(--font); }
.ins-tab.active { background: var(--color-background-elevated); color: var(--color-text-primary); }
.ins-tab:hover:not(.active) { color: var(--color-text-primary); }

.ins-table-wrap { overflow-x: auto; }
.ins-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ins-data-table th { text-align: left; padding: 10px 12px; color: var(--color-text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-border-default); font-weight: 500; }
.ins-data-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.ins-data-table tr:hover td { background: var(--color-background-hover); }

.ins-score-bar { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.ins-score-bar span { font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 32px; }
.ins-score-fill { height: 6px; border-radius: 3px; transition: width 0.3s var(--ease); }
.ins-score-high { background: var(--color-feedback-success); }
.ins-score-mid { background: var(--color-feedback-warning); }
.ins-score-low { background: var(--color-feedback-danger); }

.ins-tier { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.ins-tier-top { background: var(--success-bg); color: var(--color-feedback-success); border: 1px solid var(--success-border); }
.ins-tier-mid { background: var(--warning-bg); color: var(--color-feedback-warning); border: 1px solid var(--warning-border); }
.ins-tier-low { background: var(--danger-bg); color: var(--color-feedback-danger); border: 1px solid rgba(239, 68, 68, 0.20); }

.ins-pct { font-size: 11px; color: var(--color-text-tertiary); }

.ins-signal { display: inline-block; padding: 1px 6px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 600; margin-right: 4px; }
.ins-signal-top { background: var(--success-bg); color: var(--color-feedback-success); }
.ins-signal-under { background: var(--danger-bg); color: var(--color-feedback-danger); }
.ins-signal-outlier { background: var(--info-bg); color: var(--color-feedback-info); }

.ins-loading { text-align: center; padding: 40px; color: var(--color-text-tertiary); font-size: 13px; }
.ins-error { text-align: center; padding: 40px; color: var(--color-feedback-danger); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 8 — Recommendations
   ═══════════════════════════════════════════════════════════════ */

.rec-list { display: flex; flex-direction: column; gap: 12px; }

.rec-card { background: var(--color-background-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius); padding: 16px; transition: border-color var(--duration) var(--ease); }
.rec-card:hover { border-color: var(--color-border-hover); }

.rec-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }

.rec-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; text-transform: capitalize; }
.rec-badge-danger { background: var(--danger-bg); color: var(--color-feedback-danger); }
.rec-badge-success { background: var(--success-bg); color: var(--color-feedback-success); }
.rec-badge-info { background: var(--info-bg); color: var(--color-feedback-info); }
.rec-badge-warning { background: var(--warning-bg); color: var(--color-feedback-warning); }
.rec-badge-neutral { background: var(--color-background-tertiary); color: var(--color-text-secondary); }

.rec-priority { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-xs); }
.rec-priority-high { background: var(--danger-bg); color: var(--color-feedback-danger); }
.rec-priority-mid { background: var(--warning-bg); color: var(--color-feedback-warning); }
.rec-priority-low { background: var(--color-background-tertiary); color: var(--color-text-tertiary); }

.rec-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 6px; }
.rec-desc { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; line-height: 1.5; }

.rec-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.rec-scores { display: flex; gap: 12px; font-size: 11px; color: var(--color-text-tertiary); }
.rec-actions { display: flex; gap: 6px; }

.rec-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-xs); text-transform: capitalize; }
.rec-status-active { background: var(--success-bg); color: var(--color-feedback-success); }
.rec-status-dismissed { background: var(--color-background-tertiary); color: var(--color-text-tertiary); }
.rec-status-applied { background: var(--info-bg); color: var(--color-feedback-info); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 9 — Actions
   ═══════════════════════════════════════════════════════════════ */

.act-list { overflow-x: auto; }

.act-status { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.act-status-pending { background: var(--warning-bg); color: var(--color-feedback-warning); }
.act-status-executing { background: var(--info-bg); color: var(--color-feedback-info); }
.act-status-success { background: var(--success-bg); color: var(--color-feedback-success); }
.act-status-failed { background: var(--danger-bg); color: var(--color-feedback-danger); }

.act-error-row td { padding: 4px 12px 10px !important; border-bottom: 1px solid var(--color-border-default) !important; }
.act-error-msg { font-size: 11px; color: var(--color-feedback-danger); }

.act-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.act-modal { background: var(--color-background-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); width: 90%; max-width: 440px; overflow: hidden; }
.act-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--color-border-default); }
.act-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text-primary); }
.act-modal-close { background: none; border: none; color: var(--color-text-tertiary); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.act-modal-close:hover { color: var(--color-text-primary); }
.act-modal-body { padding: 20px; }
.act-modal-body p { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 12px; line-height: 1.5; }
.act-modal-body strong { color: var(--color-text-primary); }
.act-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--color-border-default); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 10 — Automation
   ═══════════════════════════════════════════════════════════════ */

.pg-header-actions { display: flex; gap: 8px; }

.auto-panel { margin-bottom: 24px; }
.auto-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.auto-panel-header h3 { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin: 0; }

.auto-rules-list { display: flex; flex-direction: column; gap: 10px; }

.auto-rule-card { background: var(--color-background-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius); padding: 16px; transition: border-color var(--duration) var(--ease); }
.auto-rule-card:hover { border-color: var(--color-border-hover); }

.auto-rule-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.auto-rule-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.auto-rule-type { font-size: 11px; color: var(--color-text-tertiary); text-transform: capitalize; }
.auto-rule-desc { font-size: 13px; color: var(--color-text-secondary); margin: 8px 0 0; line-height: 1.4; }
.auto-rule-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--color-text-tertiary); flex-wrap: wrap; }
.auto-rule-meta strong { color: var(--color-text-secondary); }

.auto-rule-controls { display: flex; align-items: center; gap: 10px; }

.auto-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.3px; }
.auto-status-active { background: var(--success-bg); color: var(--color-feedback-success); }
.auto-status-inactive { background: var(--color-background-tertiary); color: var(--color-text-tertiary); }

.auto-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.auto-toggle input { opacity: 0; width: 0; height: 0; }
.auto-toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-background-tertiary); border-radius: 10px; transition: background var(--duration) var(--ease); }
.auto-toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; bottom: 2px; background: var(--color-text-secondary); border-radius: 50%; transition: transform var(--duration) var(--ease); }
.auto-toggle input:checked + .auto-toggle-slider { background: var(--color-feedback-success); }
.auto-toggle input:checked + .auto-toggle-slider::before { transform: translateX(16px); background: #fff; }

.auto-field { margin-bottom: 14px; }
.auto-field label { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 5px; }
.auto-input { width: 100%; padding: 8px 12px; font-size: 13px; font-family: var(--font); background: var(--color-background-tertiary); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); color: var(--color-text-primary); outline: none; box-sizing: border-box; }
.auto-input:focus { border-color: var(--color-interactive-primary); }
.auto-input-sm { width: auto; min-width: 80px; }

.auto-condition-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.auto-policy-form { background: var(--color-background-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius); padding: 20px; max-width: 400px; }

.auto-result-grid { display: flex; flex-direction: column; gap: 6px; }
.auto-result-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--color-border-default); font-size: 13px; color: var(--color-text-secondary); }
.auto-result-row strong { color: var(--color-text-primary); }
.auto-result-row:last-child { border-bottom: none; }

.auto-exec-list { overflow-x: auto; }

/* ── Data Freshness Badge ── */
.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: default;
}
.freshness-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.freshness--fresh { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.freshness--fresh::before { background: #34d399; }
.freshness--stale { color: var(--color-feedback-warning); background: var(--warning-bg); }
.freshness--stale::before { background: var(--color-feedback-warning); }
.freshness--unknown { color: var(--color-text-tertiary); background: var(--color-background-tertiary); }
.freshness--unknown::before { background: var(--color-text-tertiary); }
.freshness--loading { color: var(--color-text-tertiary); background: var(--color-background-tertiary); }
.freshness--loading::before { background: var(--color-text-tertiary); animation: freshness-pulse 1.5s ease-in-out infinite; }
@keyframes freshness-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ── Change Timeline Period Buttons ── */
.ct-period-group { display: flex; gap: 4px; }
.ct-period-btn { background: var(--color-background-tertiary); color: var(--color-text-secondary); border: 1px solid var(--border-primary); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.ct-period-btn:hover { background: var(--color-background-elevated); color: var(--color-text-primary); }
.ct-period-btn--active { background: var(--accent-primary); color: var(--color-text-primary); border-color: var(--accent-primary); }
.ct-period-btn--active:hover { background: var(--accent-primary); }

/* ── Change Timeline ── */
.ct-timeline { position: relative; padding-left: 24px; }
.ct-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-primary);
  border-radius: 1px;
}
.ct-event {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-primary);
}
.ct-event:last-child { border-bottom: none; }
.ct-event::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-background-secondary);
  border: 2px solid var(--color-text-quaternary);
}
.ct-event--new::before { border-color: #34d399; background: rgba(52,211,153,0.15); }
.ct-event--removed::before { border-color: #f87171; background: rgba(248,113,113,0.15); }
.ct-event--modified::before { border-color: #60a5fa; background: rgba(96,165,250,0.15); }
.ct-event-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-event-title { font-weight: 600; font-size: 13px; color: var(--color-text-primary); }
.ct-event-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-background-tertiary);
  color: var(--color-text-tertiary);
}
.ct-event-badge--new { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.ct-event-badge--removed { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.ct-event-badge--modified { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
.ct-event-badge--google { color: var(--color-feedback-warning); background: var(--warning-bg); }
.ct-event-badge--meta { color: #818cf8; background: rgba(129, 140, 248, 0.1); }
.ct-event-desc { font-size: 12px; color: var(--color-text-tertiary); margin-top: 4px; }
.ct-event-time { font-size: 11px; color: var(--color-text-quaternary); margin-top: 2px; }
.ct-event-actions { margin-top: 6px; }
.ct-view-creative {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: #818cf8;
  background: none;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color var(--duration), background var(--duration), border-color var(--duration);
  white-space: nowrap;
  line-height: 1;
}
.ct-view-creative svg { flex-shrink: 0; }
.ct-view-creative:hover {
  color: var(--color-text-primary);
  background: var(--color-background-tertiary);
  border-color: var(--color-border-default);
}

/* ── Strategic Events Timeline ── */
.se-timeline { display: flex; flex-direction: column; gap: 0; }
.se-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.se-event:last-child { border-bottom: none; }
.se-event-date {
  flex: 0 0 64px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  padding-top: 2px;
  line-height: 1.3;
}
.se-event-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  border: 2px solid;
}
.se-event-dot--spike { border-color: #f87171; background: rgba(248, 113, 113, 0.2); }
.se-event-dot--new_campaign { border-color: #34d399; background: rgba(52, 211, 153, 0.2); }
.se-event-dot--pattern_change { border-color: #60a5fa; background: rgba(96, 165, 250, 0.2); }
.se-event-dot--cleanup { border-color: var(--color-feedback-warning); background: var(--warning-bg); }
.se-event-body { flex: 1; min-width: 0; }
.se-event-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.se-event-title { font-weight: 600; font-size: 13px; color: var(--color-text-primary); }
.se-event-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
}
.se-event-badge--spike { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.se-event-badge--new_campaign { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.se-event-badge--pattern_change { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
.se-event-badge--cleanup { color: var(--color-feedback-warning); background: var(--warning-bg); }
.se-event-desc { font-size: 12px; color: var(--color-text-tertiary); margin-top: 4px; }
.se-event-comp { font-size: 11px; color: var(--color-text-quaternary); margin-top: 2px; }

/* ── Competitor Strategy Profiles ── */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cp-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 14px;
}
.cp-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cp-name { font-weight: 700; font-size: 14px; color: var(--color-text-primary); }
.cp-strategy {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.cp-summary { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.5; margin-bottom: 10px; }
.cp-bars { display: flex; flex-direction: column; gap: 6px; }
.cp-bar-row { display: flex; align-items: center; gap: 8px; }
.cp-bar-label { flex: 0 0 100px; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); }
.cp-bar-wrap { flex: 1; height: 6px; background: var(--color-background-tertiary); border-radius: 3px; overflow: hidden; }
.cp-bar { display: block; height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.cp-bar-val { flex: 0 0 32px; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.cp-channels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cp-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border: 1px solid;
  border-radius: 4px;
  padding: 2px 8px;
}
.cp-channel-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ── Market Pressure Ranking ── */
.mp-ranking { display: flex; flex-direction: column; gap: 0; }
.mp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.mp-item:last-child { border-bottom: none; }
.mp-rank {
  flex: 0 0 24px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-tertiary);
  text-align: center;
}
.mp-name {
  flex: 0 0 140px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--color-background-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.mp-bar {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.mp-bar--high { background: #f87171; }
.mp-bar--mid { background: var(--color-feedback-warning); }
.mp-bar--low { background: #60a5fa; }
.mp-score {
  flex: 0 0 40px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mp-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.mp-badge--high { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.mp-badge--mid { color: var(--color-feedback-warning); background: var(--warning-bg); }
.mp-badge--low { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }

/* ── Strategic Correlations ── */
.sc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.sc-item:last-child { border-bottom: none; }
.sc-icon { font-size: 18px; flex: 0 0 28px; text-align: center; padding-top: 1px; }
.sc-body { flex: 1; min-width: 0; }
.sc-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-title { font-weight: 600; font-size: 13px; color: var(--color-text-primary); }
.sc-conf {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.sc-conf--high { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.sc-conf--mid { color: var(--color-feedback-warning); background: var(--warning-bg); }
.sc-conf--low { color: var(--color-text-tertiary); background: var(--color-background-tertiary); }
.sc-desc { font-size: 12px; color: var(--color-text-tertiary); margin-top: 4px; }

/* ── Competitors Snapshot ── */
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-stat { text-align: center; padding: 8px 4px; background: var(--color-background-tertiary); border-radius: 6px; }
.cs-stat-value { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.cs-stat-label { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* ── Smart Alerts ── */
.al-list { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: 100%; }
.al-item { padding: 14px 16px; border-bottom: 1px solid var(--color-border-default); position: relative; transition: background 0.15s; }
.al-item:last-child { border-bottom: none; }
.al-item:not(.al-item--read) { background: rgba(99, 102, 241, 0.03); }
.al-item:not(.al-item--read)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-primary, #6366f1); border-radius: 0 2px 2px 0; }
.al-item--read { opacity: 0.65; }
.al-item-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-competitor { font-weight: 700; font-size: 13px; color: var(--accent-primary, #6366f1); }
.al-item-title { font-weight: 600; font-size: 13px; color: var(--color-text-primary); margin-top: 2px; overflow-wrap: anywhere; word-break: break-word; }
.al-item-desc { font-size: 12px; color: var(--color-text-tertiary); margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; }
.al-item-insight { font-size: 11px; color: var(--color-text-quaternary, #9ca3af); margin-top: 4px; font-style: italic; padding-left: 10px; border-left: 2px solid var(--color-border-default, #e5e7eb); }
.al-item-footer { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.al-view-link { font-size: 11px; color: var(--accent-primary, #6366f1); text-decoration: none; border-color: var(--accent-primary, #6366f1); }
.al-item-time { font-size: 11px; color: var(--color-text-quaternary); }
.al-severity { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; }
.al-severity--high { color: var(--color-feedback-danger); background: var(--danger-bg); }
.al-severity--medium { color: var(--color-feedback-warning); background: var(--warning-bg); }
.al-severity--low { color: var(--color-content-secondary); background: rgba(107, 114, 128, 0.1); }
.al-unread-badge { display: inline-block; font-size: 11px; font-weight: 700; background: var(--color-feedback-danger); color: #fff; border-radius: 10px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.t-alert-count { font-size: 10px; font-weight: 700; background: var(--color-sentiment-negative); color: #fff; border-radius: 4px; padding: 0 5px; min-width: 16px; text-align: center; position: absolute; top: 2px; right: -2px; line-height: 16px; letter-spacing: 0.03em; }

/* ── Alert Hub Tabs ── */
.al-hub-tabs { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.al-hub-tab { padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 6px; }
.al-hub-tab:hover { color: var(--color-text-primary); }
.al-hub-tab--active { color: var(--accent-primary, #6366f1); border-bottom-color: var(--accent-primary, #6366f1); font-weight: 600; }
.al-hub-tab__count { font-size: 10px; font-weight: 700; background: var(--color-background-tertiary, #222); color: var(--color-text-tertiary); border-radius: 8px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 16px; }
.al-hub-tab--active .al-hub-tab__count { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary, #6366f1); }
.al-hub-tab__source-chip { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.al-hub-tab__source-chip--smart_alerts { color: #6366f1; background: rgba(99, 102, 241, 0.1); }
.al-hub-tab__source-chip--market { color: #10b981; background: rgba(16, 185, 129, 0.1); }
.al-hub-tab__source-chip--creative_intelligence { color: var(--color-feedback-warning); background: var(--warning-bg); }

/* ── Chart Unavailable State ── */
.chart-unavailable { display: flex; align-items: center; justify-content: center; padding: 2rem; font-size: 12px; color: var(--color-text-tertiary, #9ca3af); text-align: center; }
.al-chart-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 200px; color: var(--color-text-tertiary, #9ca3af); text-align: center; }
.al-chart-unavailable__icon { opacity: 0.5; }
.al-chart-unavailable__title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary, var(--color-content-secondary)); }
.al-chart-unavailable__desc { font-size: 12px; color: var(--color-text-tertiary, #9ca3af); }
.al-chart-unavailable__retry { margin-top: 4px; }

/* -- Stats Row KPI Cards -- */
.al-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; max-width: 100%; min-width: 0; }
.al-stats-card { background: var(--color-background-secondary, #fff); border: 1px solid var(--color-border-default, #e5e7eb); border-radius: 8px; padding: 14px 16px; min-width: 0; overflow: hidden; }
.al-stats-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-tertiary, #9ca3af); margin-bottom: 4px; }
.al-stats-card__value { font-size: 24px; font-weight: 700; color: var(--color-text-primary, #111827); }
.al-stats-card__names { font-size: 11px; color: var(--color-text-tertiary, #9ca3af); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -- Unread Dot -- */
.al-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-feedback-danger, #EF4444); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }

/* -- Alerts Responsive Breakpoints -- */
@media (max-width: 1279px) {
  .al-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-charts-row { flex-direction: column; }
}
@media (max-width: 767px) {
  .al-stats-row { grid-template-columns: 1fr; }
  .al-hub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .al-hub-tabs::-webkit-scrollbar { display: none; }
  .al-filters-bar .ct-period-group { width: 100%; }
  .al-filters-bar .admin-select { width: 100% !important; }
  .ai-alert-card__footer { flex-wrap: wrap; gap: 6px; }
  .ads-charts-row { display: none !important; }
}
@media (max-width: 480px) {
  .al-stats-card { padding: 10px 12px; }
  .al-stats-card__value { font-size: 20px; }
  .ai-alert-card__header { flex-wrap: wrap; gap: 4px; }
}

/* ── Toast Notifications ── */
.al-toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 360px; }
.al-toast { pointer-events: auto; background: var(--color-background-secondary, #fff); border: 1px solid var(--color-border-default, #e5e7eb); border-radius: 8px; padding: 12px 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); cursor: pointer; opacity: 0; transform: translateX(100%); transition: opacity 0.3s, transform 0.3s; }
.al-toast--visible { opacity: 1; transform: translateX(0); }
.al-toast--exit { opacity: 0; transform: translateX(100%); }
.al-toast--high { border-left: 3px solid var(--color-feedback-danger); }
.al-toast--medium { border-left: 3px solid var(--color-feedback-warning); }
.al-toast--low { border-left: 3px solid var(--color-content-secondary); }
.al-toast-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.al-toast-competitor { font-weight: 700; font-size: 12px; color: var(--accent-primary, #6366f1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-toast-sev { flex-shrink: 0; }
.al-toast-close { background: none; border: none; font-size: 16px; color: var(--color-text-tertiary); cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.al-toast-close:hover { color: var(--color-text-primary); }
.al-toast-title { font-size: 12px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-toast-view { font-size: 11px; padding: 3px 10px; }

/* ── Job Runs Dashboard ── */
.jr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.jr-card { background: var(--color-background-secondary, #1a1a2e); border: 1px solid var(--color-border-default, #2a2a3e); border-radius: 10px; padding: 16px 18px; }
.jr-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary, var(--color-content-secondary)); margin-bottom: 8px; }
.jr-card-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary, #f1f1f1); }
.jr-card-value--ok { color: var(--color-feedback-success); }
.jr-card-value--danger { color: var(--color-feedback-danger); }
.jr-card-value--warning { color: var(--color-feedback-warning); }
.jr-card-value--muted { color: var(--color-content-secondary); }
.jr-card-sub { font-size: 11px; color: var(--color-text-tertiary, var(--color-content-secondary)); margin-top: 4px; }
.jr-cell-job { font-weight: 600; white-space: nowrap; }
.jr-cell-duration { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jr-cell-error { max-width: 200px; }
.jr-error-text { color: var(--color-feedback-danger); font-size: 12px; cursor: help; }
.jr-cell-meta { max-width: 260px; }
.jr-meta-wrap { font-size: 11px; line-height: 1.5; }
.jr-meta-key { font-weight: 600; color: var(--color-text-secondary, #9ca3af); }
.admin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--color-border-default, #2a2a3e); background: var(--color-background-secondary, #1a1a2e); color: var(--color-text-primary, #f1f1f1); border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: background 0.15s; }
.admin-btn:hover { background: var(--color-background-tertiary, #2a2a3e); }
.admin-btn--sm { padding: 5px 10px; font-size: 12px; }
.admin-btn svg { flex-shrink: 0; }

/* ── Competitor Insights ── */
.ci-list { display: flex; flex-direction: column; gap: 16px; }
.ci-loading { text-align: center; padding: 40px 20px; color: var(--color-text-tertiary, var(--color-content-secondary)); }
.ci-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--color-border-default, #2a2a3e); border-top-color: var(--accent-primary, #6366f1); border-radius: 50%; animation: ci-spin 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes ci-spin { to { transform: rotate(360deg); } }
.ci-empty { text-align: center; padding: 60px 20px; color: var(--color-text-tertiary, var(--color-content-secondary)); }
.ci-empty h3 { margin: 16px 0 8px; color: var(--color-text-primary, #f1f1f1); }
.ci-empty svg { color: var(--color-text-tertiary, var(--color-content-secondary)); }
.ci-error { text-align: center; padding: 40px 20px; }
.ci-error-text { color: var(--color-feedback-danger); margin-bottom: 12px; }
.ci-card { background: var(--color-background-secondary, #1a1a2e); border: 1px solid var(--color-border-default, #2a2a3e); border-radius: 12px; padding: 20px 24px; }
.ci-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ci-comp-name { font-size: 16px; font-weight: 700; color: var(--color-text-primary, #f1f1f1); }
.ci-card-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.ci-source { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.ci-conf { font-weight: 600; }
.ci-conf--high { color: var(--color-feedback-success); }
.ci-conf--mid { color: var(--color-feedback-warning); }
.ci-conf--low { color: var(--color-content-secondary); }
.ci-time { color: var(--color-text-tertiary, var(--color-content-secondary)); }
.ci-summary { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary, #d1d5db); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-default, #2a2a3e); }
.ci-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ci-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary, var(--color-content-secondary)); margin-bottom: 8px; }
.ci-section-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ci-section-list li { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary, #d1d5db); padding-left: 14px; position: relative; }
.ci-section-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; }
.ci-signal::before { background: #6366f1; }
.ci-pattern::before { background: #f59e0b; }
.ci-rec::before { background: #22c55e; }
.ci-toast { position: fixed; bottom: 24px; right: 24px; background: var(--color-background-secondary, #1a1a2e); border: 1px solid var(--color-border-default, #2a2a3e); border-radius: 8px; padding: 12px 18px; font-size: 13px; color: var(--color-text-primary, #f1f1f1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 9999; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; }
.ci-toast--visible { opacity: 1; transform: translateY(0); }
.ci-toast--warn { border-color: var(--color-feedback-warning); }

/* ── Smart Digest ──────────────────────────────────────────── */
.sd-period-select { background: var(--color-background-secondary, #1a1a2e); color: var(--color-text-primary, #f1f1f1); border: 1px solid var(--color-border-default, #2a2a3e); border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.sd-timestamp { font-size: 12px; color: var(--color-text-tertiary, var(--color-content-secondary)); }
.sd-loading { text-align: center; padding: 40px 20px; color: var(--color-text-secondary, #94a3b8); }
.sd-narrative { font-size: 14px; line-height: 1.7; color: var(--color-text-primary, #f1f1f1); white-space: pre-wrap; font-family: inherit; background: transparent; border: none; margin: 8px 0 0; padding: 0; }
.sd-competitors-list { display: flex; flex-direction: column; gap: 8px; }
.sd-comp-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--color-background-tertiary, #0f0f1a); border-radius: 8px; border: 1px solid var(--color-border-default, #2a2a3e); }
.sd-comp-rank { font-size: 18px; font-weight: 700; color: var(--color-text-tertiary, var(--color-content-secondary)); min-width: 32px; text-align: center; }
.sd-comp-info { flex: 1; }
.sd-comp-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary, #f1f1f1); }
.sd-comp-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.sd-comp-impact { font-size: 13px; font-weight: 600; }
.sd-comp-strategy { font-size: 12px; color: var(--color-text-tertiary, var(--color-content-secondary)); }
.sd-comp-bar { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.sd-bar-wrap { flex: 1; height: 6px; background: var(--color-background-secondary, #1a1a2e); border-radius: 3px; overflow: hidden; }
.sd-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.sd-bar-val { font-size: 11px; color: var(--color-text-tertiary, var(--color-content-secondary)); min-width: 32px; text-align: right; }
.sd-highlights-list { display: flex; flex-direction: column; gap: 10px; }
.sd-hl-group { padding: 10px 12px; background: var(--color-background-tertiary, #0f0f1a); border-radius: 8px; border: 1px solid var(--color-border-default, #2a2a3e); }
.sd-hl-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #f1f1f1); margin-bottom: 6px; }
.sd-hl-item { font-size: 13px; color: var(--color-text-secondary, #d1d5db); padding: 3px 0; display: flex; align-items: flex-start; gap: 6px; }
.sd-hl-icon { font-size: 14px; flex-shrink: 0; }
.sd-hl-conf { font-size: 11px; color: var(--color-text-tertiary, var(--color-content-secondary)); background: var(--color-background-secondary, #1a1a2e); padding: 1px 6px; border-radius: 4px; }
.sd-actions-list { display: flex; flex-direction: column; gap: 8px; }
.sd-action-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.sd-action-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.sd-action-text { flex: 1; }
.sd-action-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #f1f1f1); }
.sd-action-desc { font-size: 12px; color: var(--color-text-secondary, #94a3b8); margin-top: 2px; }

/* ═══════════════════════════════════════
   CHARTS — Visual Intelligence Layer
   ═══════════════════════════════════════ */
.ai-charts-row {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.ai-charts-row > .admin-card,
.ai-charts-row > .card {
  min-height: 260px;
}
@media (max-width: 768px) {
  .ai-charts-row { flex-direction: column; }
  .ai-charts-row > .admin-card,
  .ai-charts-row > .card { flex: 1 1 100% !important; }
}
.ai-chart-source {
  font-size: 10px;
  color: var(--color-text-quaternary);
  text-align: right;
  padding: 2px 8px 0;
  font-style: italic;
}

/* ── Executive Report (print-friendly) ────────────────────────── */
.report-page { max-width: 900px; margin: 0 auto; }
.report-section { margin-bottom: 28px; }
.report-metric-card {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 12px 20px; background: var(--color-background-tertiary); border-radius: 8px;
  min-width: 120px;
}
.report-metric-card .label {
  font-size: 11px; color: var(--color-text-quaternary);
  text-transform: uppercase; font-weight: 600;
}
.report-metric-card .value { font-size: 22px; font-weight: 700; }
.report-print-actions { text-align: center; margin: 16px 0; }
.report-print-actions button {
  padding: 8px 20px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-primary); background: var(--color-background-secondary);
  color: var(--color-text-primary); border-radius: 6px; cursor: pointer;
}
.report-print-actions button:hover { background: var(--color-background-hover); }
@media print {
  .report-print-actions { display: none !important; }
  .report-section { break-inside: avoid; }
}

/* ── Pricing / Upgrade ────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 32px;
}
.plan-card {
  background: var(--color-background-secondary); border: 1px solid var(--border-primary);
  border-radius: 10px; padding: 20px; display: flex; flex-direction: column;
  transition: border-color 0.15s;
}
.plan-card:hover { border-color: var(--color-border-hover, var(--border-secondary)); }
.plan-card-featured {
  border-color: var(--color-interactive-primary); box-shadow: 0 0 0 1px var(--color-interactive-primary-ghost);
}
.plan-card-header { margin-bottom: 16px; }
.plan-card-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.plan-card-price { font-size: 13px; color: var(--color-text-tertiary); }
.plan-card-footer { margin-top: auto; padding-top: 16px; text-align: center; }
.feature-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.feature-list li {
  padding: 4px 0; font-size: 12px; display: flex; align-items: center; gap: 6px;
}
.feature-list li::before { font-size: 12px; flex-shrink: 0; }
.feature-included::before { content: "\2713"; color: #22C55E; font-weight: 700; }
.feature-excluded::before { content: "\2717"; color: var(--color-text-quaternary); }
.feature-coming::before { content: "\25CB"; color: var(--color-text-quaternary); }
.feature-coming { color: var(--color-text-quaternary); font-style: italic; }
.current-plan-card {
  border-left: 3px solid var(--color-interactive-primary); padding: 20px;
}
.plan-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
  background: var(--color-background-tertiary); color: var(--color-text-secondary);
}
.plan-badge--free { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.plan-badge--paid,
.plan-badge--pro { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.plan-badge--business { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.plan-badge--enterprise { background: rgba(239, 68, 68, 0.12); color: #EF4444; }
.btn-disabled { opacity: 0.4; pointer-events: none; }
.upgrade-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
}
.upgrade-modal {
  background: var(--color-background-secondary); border: 1px solid var(--border-primary);
  border-radius: 10px; padding: 24px; max-width: 440px; width: 90%;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM FOUNDATION — UX Phase 1
   Typography utilities, unified cards, badges, skeletons,
   table polish, empty/error states
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography Scale ── */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-body-sm { font-size: 13px; }
.text-body { font-size: 14px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 20px; }
.text-xl { font-size: 28px; }
.text-2xl { font-size: 36px; }

/* Tabular numbers for metrics */
.metric-value,
.kpi-value,
.stat-value,
.card-metric-value,
.m-value,
.ins-kpi-value,
[data-metric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Unified Card System ── */
.ai-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  position: relative;
}

.ai-card:hover {
  border-color: var(--color-border-hover);
}

.ai-card--interactive:hover {
  border-color: var(--color-border-active);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.ai-card--metric {
  padding: var(--space-5);
  overflow: visible;
}

.ai-card--metric::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-warm);
  opacity: 0;
  transition: opacity var(--duration);
}

.ai-card--metric:hover::after { opacity: 1; }

.ai-card--insight {
  border-left: 3px solid var(--color-interactive-primary);
  padding-left: var(--space-5);
}

.ai-card--content {
  padding: var(--space-6);
}

.ai-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ai-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.1px;
}

.ai-card__subtitle {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.ai-card__body {
  flex: 1;
}

.ai-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

/* ── Unified Badge System ── */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.ai-badge--success { background: var(--success-bg); color: var(--color-feedback-success); }
.ai-badge--warning { background: var(--warning-bg); color: var(--color-feedback-warning); }
.ai-badge--danger { background: var(--danger-bg); color: var(--color-feedback-danger); }
.ai-badge--info { background: var(--info-bg); color: var(--color-feedback-info); }
.ai-badge--neutral { background: rgba(255, 255, 255, 0.05); color: var(--color-text-tertiary); }
.ai-badge--accent { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); }
.ai-badge--premium { background: linear-gradient(135deg, rgba(86, 103, 234, 0.12), rgba(245, 158, 11, 0.12)); color: var(--color-interactive-primary); }
.ai-badge--critical { background: var(--danger-bg); color: var(--color-feedback-danger); font-weight: 700; }

.ai-badge--sm { font-size: 10px; padding: 1px 6px; }
.ai-badge--lg { font-size: 12px; padding: 3px 10px; }

/* Dot indicator inside badge */
.ai-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Skeleton Loader System ── */
@keyframes ai-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ai-skeleton {
  background: linear-gradient(90deg,
    var(--color-background-tertiary) 25%,
    var(--color-background-elevated) 37%,
    var(--color-background-tertiary) 63%
  );
  background-size: 200% 100%;
  animation: ai-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.ai-skeleton-line {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--color-background-tertiary) 25%,
    var(--color-background-elevated) 37%,
    var(--color-background-tertiary) 63%
  );
  background-size: 200% 100%;
  animation: ai-shimmer 1.5s ease-in-out infinite;
}

.ai-skeleton-line:last-child { width: 60%; }

.ai-skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg,
    var(--color-background-tertiary) 25%,
    var(--color-background-elevated) 37%,
    var(--color-background-tertiary) 63%
  );
  background-size: 200% 100%;
  animation: ai-shimmer 1.5s ease-in-out infinite;
}

.ai-skeleton-table-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-default);
}

.ai-skeleton-table-row > span {
  height: 12px;
  border-radius: 4px;
  flex: 1;
  background: linear-gradient(90deg,
    var(--color-background-tertiary) 25%,
    var(--color-background-elevated) 37%,
    var(--color-background-tertiary) 63%
  );
  background-size: 200% 100%;
  animation: ai-shimmer 1.5s ease-in-out infinite;
}

.ai-skeleton-table-row > span:first-child { flex: 2; }
.ai-skeleton-table-row > span:last-child { flex: 0.5; }

/* ── Table Polish ── */
.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-table td .u-numeric,
.admin-table td[data-metric] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Empty State ── */
.ai-empty,
.ai-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.ai-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--color-background-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-text-quaternary);
}

.ai-empty__icon svg { width: 24px; height: 24px; }

.ai-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ai-empty__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.ai-empty__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  background: var(--color-interactive-primary);
  color: var(--color-light);
  border: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
  font-family: var(--font);
}

.ai-empty__action:hover { background: var(--color-interactive-primary-hover); }

/* ── Error State ── */
.ai-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.ai-error__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ai-error__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.ai-error__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  background: var(--color-background-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-family: var(--font);
}

.ai-error__action:hover { background: var(--color-background-elevated); border-color: var(--color-border-hover); }

/* ── Sidebar Section Collapse (CSS-only foundation) ── */
.s-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.s-section-toggle .s-label {
  cursor: pointer;
}

.s-section-toggle__chevron {
  width: 12px;
  height: 12px;
  color: var(--color-text-quaternary);
  transition: transform var(--duration) var(--ease);
  margin-right: 10px;
}

.s-section.s-collapsed .s-section-toggle__chevron {
  transform: rotate(-90deg);
}

.s-section.s-collapsed .s-item {
  display: none;
}

.s-section.s-collapsed #s-competitors-list {
  display: none;
}

/* ── Sidebar Visual Polish ── */
.s-nav::-webkit-scrollbar { width: 4px; }
.s-nav::-webkit-scrollbar-track { background: transparent; }
.s-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }

.s-section + .s-section {
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Admin Card inherits polish ── */
.admin-card {
  transition: border-color var(--duration) var(--ease);
}
.admin-card:hover {
  border-color: var(--color-border-hover);
}

/* ═══════════════════════════════════════════════════════════════
   UX PHASE 2.5 — Visual Premium Pass
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar DS Alignment (replaces legacy "Premium Polish") ── */
/* Styles now consolidated in main sidebar section above.
   This block intentionally left empty to prevent override conflicts. */

/* ── Card Depth & Premium Feel ── */
.ai-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.ai-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.ai-card--metric {
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
}

.ai-card--metric .text-2xl,
.ai-card--metric .ai-card__body [style*="font-weight:700"],
.ai-card--metric .m-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--color-text-primary);
}

/* ── Intelligence Narrative Premium Card ── */
.ai-narrative {
  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

.ai-narrative::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-warm);
  opacity: 0.7;
}

.ai-narrative__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ai-narrative__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-interactive-primary-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-narrative__icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-interactive-primary);
}

.ai-narrative__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-interactive-primary);
}

.ai-narrative__headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.3px;
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.ai-narrative__summary {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.ai-narrative__section {
  margin-bottom: var(--space-4);
}

.ai-narrative__section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-quaternary);
  margin-bottom: var(--space-2);
}

.ai-narrative__section-body {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Action Chips (replacing raw links) ── */
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.ai-chip:hover {
  background: var(--color-background-elevated);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.ai-chip--accent {
  background: var(--color-interactive-primary-ghost);
  border-color: rgba(86, 103, 234, 0.2);
  color: var(--color-interactive-primary);
}

.ai-chip--accent:hover {
  background: var(--accent-glow-md);
  border-color: rgba(86, 103, 234, 0.4);
}

.ai-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Premium Badge Refinements ── */
.ai-badge {
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}

.ai-badge--success { border-color: var(--success-border); }
.ai-badge--warning { border-color: var(--warning-border); }
.ai-badge--danger { border-color: rgba(239, 68, 68, 0.2); }
.ai-badge--info { border-color: rgba(59, 130, 246, 0.2); }
.ai-badge--neutral { border-color: rgba(255, 255, 255, 0.06); }
.ai-badge--accent { border-color: rgba(86, 103, 234, 0.2); }

.ai-badge--high {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.2);
  color: #F87171;
}

.ai-badge--medium {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.2);
  color: var(--color-feedback-warning);
}

.ai-badge--low {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.15);
  color: var(--color-feedback-success);
}

.ai-badge--confidence {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.2);
  color: #A78BFA;
}

/* ── Premium Section Containers ── */
.ai-section-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.2px;
}

.ai-section-header h3::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--color-interactive-primary);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -2px;
}

/* ── Compact List Cards (Trends/Patterns) ── */
.ai-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  transition: background var(--duration) var(--ease);
}

.ai-list-item:last-child {
  border-bottom: none;
}

.ai-list-item:hover {
  background: var(--color-background-tertiary);
}

.ai-list-item__content {
  flex: 1;
  min-width: 0;
}

.ai-list-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 3px;
  line-height: 1.4;
}

.ai-list-item__desc {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.5;
}

.ai-list-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* ── Filter Bar Enhancement (superseded by canonical .ai-filter-bar at CANONICAL FILTER SYSTEM block below) ── */

/* ── Table Premium Polish ── */
.data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-quaternary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-background-tertiary);
}

.data-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}

.data-table thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

.data-table tbody td {
  padding: 10px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}

.data-table tbody tr:hover td {
  background: var(--color-background-tertiary);
}

.data-table tbody td:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Premium Metrics Enhancement ── */
.ai-metrics-grid .ai-card--metric .ai-card__header {
  margin-bottom: var(--space-2);
}

.ai-metrics-grid .ai-card--metric .ai-card__header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

/* ── Insight Card (inline in lists) ── */
.ai-insight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  margin-bottom: var(--space-2);
  transition: border-color var(--duration) var(--ease);
}

.ai-insight-item:hover {
  border-color: var(--color-border-hover);
}

.ai-insight-item__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-interactive-primary-ghost);
}

.ai-insight-item__icon svg {
  width: 12px;
  height: 12px;
  color: var(--color-interactive-primary);
}

.ai-insight-item__text {
  flex: 1;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.ai-insight-item__text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ── Recommendation Card Premium ── */
.rec-card,
.rec-item {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
  transition: all var(--duration) var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rec-card:hover,
.rec-item:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/* ── Donut/Chart Section Polish ── */
.charts {
  margin-bottom: 24px;
}

.card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: border-color var(--duration) var(--ease);
}

.card:hover {
  border-color: var(--color-border-hover);
}

.card-head {
  padding: var(--space-4) var(--space-5) 0;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.1px;
}

/* ── Tabs Polish ── */
.ins-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-background-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.ins-tab {
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.ins-tab:hover {
  color: var(--color-text-secondary);
}

.ins-tab.active {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Period Buttons Polish ── */
.tp-period-btn,
.ca-period-btn {
  border: 1px solid var(--color-border-default) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-xs) !important;
}

.tp-period-btn.active,
.ca-period-btn.active {
  background: var(--color-interactive-primary) !important;
  border-color: var(--color-interactive-primary) !important;
  color: #0E0E0E !important;
}

/* ── Select/Filter Inputs ── */
.select-sm {
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 28px 6px 14px;
  height: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.select-sm:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.select-sm:focus {
  outline: none;
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 2px var(--color-interactive-primary-ghost);
}

/* ── ai-select: alias for select-sm ── */
.ai-select { background: var(--color-background-tertiary); border: 1px solid var(--color-border-default); border-radius: 16px; color: var(--color-text-secondary); font-size: 14px; font-weight: 500; padding: 6px 28px 6px 14px; height: 40px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; cursor: pointer; transition: all var(--duration) var(--ease); }
.ai-select:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); }
.ai-select:focus { outline: none; border-color: var(--color-interactive-primary); box-shadow: 0 0 0 2px var(--color-interactive-primary-ghost); }

/* ── Intelligence Narrative Legacy Override ── */
.s-section[id$="-narrative"] {
  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

.s-section[id$="-narrative"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-warm);
  opacity: 0.7;
}

.s-section[id$="-narrative"] .s-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-interactive-primary);
  margin-bottom: var(--space-3);
}

.s-section[id$="-narrative"] .s-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.3px;
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.s-section[id$="-narrative"] p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.s-section[id$="-narrative"] .s-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s-section[id$="-narrative"] .s-chips a,
.s-section[id$="-narrative"] .s-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}

.s-section[id$="-narrative"] .s-chips a:hover,
.s-section[id$="-narrative"] .s-chips span:hover {
  background: var(--color-background-active);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

/* Narrative why/actions sections */
.s-section[id$="-narrative"] [id$="-narrative-why"],
.s-section[id$="-narrative"] [id$="-narrative-actions"] {
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-default);
}

.s-section[id$="-narrative"] [id$="-narrative-why"]::before {
  content: 'WHY IT MATTERS';
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-quaternary);
  margin-bottom: var(--space-2);
}

.s-section[id$="-narrative"] [id$="-narrative-actions"]::before {
  content: 'RECOMMENDED ACTION';
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-quaternary);
  margin-bottom: var(--space-2);
}

/* ── Narrative Error Banner ── */
.s-banner-warn {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-feedback-warning);
}

/* ── Overview Cards (legacy) polish ── */
.overview-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.overview-cards .admin-card {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ── Metric Cards (legacy m-card) ── */
.m-card {
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.m-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.m-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

/* ── Empty State (within cards) smaller variant ── */
.ai-empty--compact {
  padding: var(--space-6) var(--space-4);
}

.ai-empty--compact .ai-empty__icon svg {
  width: 32px;
  height: 32px;
}

/* ── Responsive sidebar compaction at narrow widths ── */
@media (max-width: 1280px) {
  :root {
    --sidebar-w: 220px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   UX PHASE 4 — Monitoring + Action Pages Premium Components
   Led by Mario (UI) and Leo (UX)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Alert Card (intelligence inbox) ── */
.ai-alert-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  position: relative;
  min-width: 0;
}
.ai-alert-card:hover {
  border-color: var(--color-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ai-alert-card--unread {
  border-left: 3px solid var(--color-interactive-primary);
}
.ai-alert-card--unread::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-interactive-primary);
}
.ai-alert-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ai-alert-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-alert-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-alert-card__insight {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--color-border-default);
}
.ai-alert-card__delta {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-alert-card__delta-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--color-background-tertiary, rgba(99, 102, 241, 0.06));
  border-left: 2px solid var(--color-interactive-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-alert-card__delta-headlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ai-alert-card__delta-pill {
  font-size: 11px;
  color: var(--color-text-tertiary);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  font-style: italic;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-badge--pivot {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
  border: 1px solid rgba(251, 191, 36, 0.4);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}
.ai-alert-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-alert-card__time {
  font-size: 11px;
  color: var(--color-text-quaternary);
}

/* ── Timeline Item (market movement) ── */
.ai-timeline-item {
  position: relative;
  padding: 12px 16px 12px 28px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: border-color var(--duration) var(--ease);
}
.ai-timeline-item:hover {
  border-color: var(--color-border-default);
}
.ai-timeline-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-accent);
}
.ai-timeline-item--new::before { background: #22C55E; }
.ai-timeline-item--modified::before { background: #F59E0B; }
.ai-timeline-item--removed::before { background: #EF4444; }
.ai-timeline-item--reactivated::before { background: #3B82F6; }
.ai-timeline-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ai-timeline-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.ai-timeline-item__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.ai-timeline-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.ai-timeline-item__time {
  font-size: 11px;
  color: var(--color-text-quaternary);
}

/* ── Watch Card (monitoring rule) ── */
.ai-watch-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ai-watch-card:hover {
  border-color: var(--color-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ai-watch-card--active { border-left: 3px solid #22C55E; }
.ai-watch-card--paused { border-left: 3px solid #F59E0B; }
.ai-watch-card--archived { border-left: 3px solid var(--color-border-default); opacity: 0.7; }
.ai-watch-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ai-watch-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.ai-watch-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.ai-watch-card__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Action Card (action plan) ── */
.ai-action-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ai-action-card:hover {
  border-color: var(--color-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ai-action-card--high { border-left: 3px solid #EF4444; }
.ai-action-card--medium { border-left: 3px solid #F59E0B; }
.ai-action-card--low { border-left: 3px solid var(--color-content-secondary); }
.ai-action-card--done { opacity: 0.55; }
.ai-action-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ai-action-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.ai-action-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.ai-action-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ai-action-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Execution Card (history) ── */
.ai-exec-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-exec-card:hover {
  border-color: var(--color-border-default);
}
.ai-exec-card--success { border-left: 3px solid #22C55E; }
.ai-exec-card--failed { border-left: 3px solid #EF4444; }
.ai-exec-card--pending { border-left: 3px solid #F59E0B; }
.ai-exec-card__info {
  flex: 1;
  min-width: 0;
}
.ai-exec-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.ai-exec-card__meta {
  font-size: 11px;
  color: var(--color-text-tertiary);
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* ── Delivery Row (observability) ── */
.ai-delivery-row {
  display: grid;
  grid-template-columns: 100px 1fr 100px 80px 80px 70px 1fr 80px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  font-size: 12px;
  gap: 8px;
  transition: background var(--duration) var(--ease);
}
.ai-delivery-row:hover {
  background: var(--color-background-tertiary);
}
.ai-delivery-row__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Automation Card (command center) ── */
.ai-automation-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ai-automation-card:hover {
  border-color: var(--color-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ai-automation-card--enabled { border-left: 3px solid #10B981; }
.ai-automation-card--disabled { border-left: 3px solid var(--color-content-secondary); }
.ai-automation-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ai-automation-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.ai-automation-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.ai-automation-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-text-quaternary);
}
.ai-automation-card__controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Premium Toggle Switch ── */
.ai-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.ai-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ai-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--color-background-tertiary);
  border-radius: 10px;
  border: 1px solid var(--color-border-default);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.ai-toggle__slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--duration) var(--ease);
}
.ai-toggle input:checked + .ai-toggle__slider {
  background: #10B981;
  border-color: #10B981;
}
.ai-toggle input:checked + .ai-toggle__slider::before {
  transform: translateX(16px);
}

/* ── Status Dot ── */
.ai-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-status-dot--active { background: #22C55E; }
.ai-status-dot--paused { background: #F59E0B; }
.ai-status-dot--failed { background: #EF4444; }
.ai-status-dot--pending { background: #F59E0B; }
.ai-status-dot--sent { background: #22C55E; }
.ai-status-dot--skipped { background: var(--color-content-secondary); }
.ai-status-dot--archived { background: var(--color-content-secondary); }

/* ── Investigation Section (alert-detail) ── */
.ai-investigation-section {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.ai-investigation-section__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

/* ── Evidence Grid ── */
.ai-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.ai-evidence-card {
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease);
}
.ai-evidence-card:hover {
  border-color: var(--color-border-default);
}
.ai-evidence-card__img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--color-background-tertiary);
}
.ai-evidence-card__body {
  padding: 10px 12px;
}
.ai-evidence-card__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-evidence-card__meta {
  font-size: 11px;
  color: var(--color-text-quaternary);
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

/* ── Data Table Premium (Phase 4 upgrade) ── */
.ai-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ai-data-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-background-tertiary);
}
.ai-data-table tbody tr {
  border-bottom: 1px solid var(--color-border-default);
  transition: background var(--duration) var(--ease);
}
.ai-data-table tbody tr:hover {
  background: var(--color-background-tertiary);
}
.ai-data-table td {
  padding: 10px 12px;
  color: var(--color-text-secondary);
  vertical-align: middle;
}
.ai-data-table td:first-child {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   UX PHASE 5 — Empty States + Micro-Interactions + Header Polish
   Led by Mario (UI) and Leo (UX)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Premium Page Header — DS typography ── */
.ai-page-header {
  margin-bottom: var(--space-6);
}
/* Flat class (legacy) */
.ai-page-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
/* BEM class (current) — DS Title Group: 14px/500 uppercase */
.ai-page-header__eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
/* Flat (legacy) */
.ai-page-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 34px;
  letter-spacing: -0.025em;
}
/* BEM — DS Title Screen: 30px/600 */
.ai-page-header__title {
  font-size: 30px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 34px;
  letter-spacing: -0.025em;
}
/* Flat (legacy) */
.ai-page-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 24px;
  letter-spacing: -0.005em;
}
/* BEM — DS Body Large: 16px/400 */
.ai-page-header__subtitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 24px;
  letter-spacing: -0.005em;
}
.mkt-global-filters {
  margin-bottom: var(--space-6);
}
/* Flat (legacy) */
.ai-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
/* BEM */
.ai-page-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   CANONICAL FILTER SYSTEM — DS Standard v1.0
   Referência canônica para page-header + filter-bar + period-group
   ═══════════════════════════════════════════════════════════════ */

/* ── Canonical Page Header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.page-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}
.page-header__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary, var(--color-content-secondary, var(--color-content-secondary)));
  line-height: 1.5;
  margin: 0;
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Canonical Filter Bar ── */
.ai-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  background: var(--color-background-secondary, var(--color-background-raised, #fff));
  border: 1px solid var(--color-border-subtle, var(--color-border-subtle, var(--support-panel)));
  border-radius: 10px;
  padding: 12px 16px;
}
.ai-filter-bar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-filter-bar__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary, var(--color-content-tertiary, var(--color-content-tertiary)));
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-filter-bar__sep {
  width: 1px;
  height: 18px;
  background: var(--color-border-subtle, var(--color-border-subtle, var(--support-panel)));
  flex-shrink: 0;
  align-self: center;
}

/* ── Canonical Period Group (segmented control) ── */
.ai-period-group {
  display: inline-flex;
  background: var(--color-background-tertiary, var(--bg-tertiary, var(--support-panel)));
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.ai-period-group > button {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-content-secondary, var(--color-content-secondary)));
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
  box-shadow: none;
}
.ai-period-group > button:hover {
  color: var(--color-content-primary);
  background: rgba(0, 0, 0, .05);
}
.ai-period-group > button.active,
.ai-period-group > button.selected,
.ai-period-group > button.benchmark-period-btn--active,
.ai-period-group > button[aria-pressed="true"] {
  background: var(--color-background-secondary, var(--color-background-raised, #fff));
  color: var(--color-content-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ── Canonical date input ── */
.ai-date-input {
  padding: 5px 8px;
  border: 1px solid var(--color-border-subtle, var(--color-border-subtle, var(--support-panel)));
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-content-primary);
  background: var(--color-background-primary, var(--bg-root, var(--color-background-surface)));
  font-family: inherit;
  transition: border-color 0.15s;
}
.ai-date-input:focus {
  outline: 2px solid var(--color-accent, var(--color-interactive-primary, var(--chart-1)));
  outline-offset: -1px;
  border-color: var(--color-accent, var(--color-interactive-primary, var(--chart-1)));
}

/* ── Specificity overrides for legacy classes co-applied with canonical ── */
/* When a legacy pill container also gets .ai-period-group, canonical layout wins */
.ai-period-group.benchmark-filters__period-pills,
.ai-period-group.period-pills,
.ai-period-group.ci-pills {
  display: inline-flex;
  gap: 2px;
}
/* benchmark-period-btn border/bg overridden by canonical child selector (specificity 0,2,0 > 0,1,0) */

@media (max-width: 768px) {
  .page-header { flex-direction: column; gap: 12px; }
  .ai-filter-bar__row { flex-direction: column; align-items: flex-start; }
  .ai-period-group { flex-wrap: wrap; }
}

/* ── Contextual Empty State ── */
.ai-empty--contextual {
  text-align: center;
  padding: 48px 24px;
}
.ai-empty--contextual .ai-empty__icon {
  margin-bottom: 16px;
  opacity: 0.5;
}
.ai-empty--contextual .ai-empty__icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--color-text-quaternary);
}
.ai-empty--contextual .ai-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.ai-empty--contextual .ai-empty__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 400px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.ai-empty--contextual .ai-empty__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── Recoverable Error State ── */
.ai-error--recoverable {
  text-align: center;
  padding: 40px 24px;
}
.ai-error--recoverable .ai-error__icon {
  margin-bottom: 12px;
  opacity: 0.5;
}
.ai-error--recoverable .ai-error__icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--color-text-quaternary);
}
.ai-error--recoverable .ai-error__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.ai-error--recoverable .ai-error__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 360px;
  margin: 0 auto 14px;
  line-height: 1.5;
}
.ai-error--recoverable .ai-error__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── Skeleton Loading ── */
.ai-skeleton-card {
  background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-secondary) 50%, var(--color-background-tertiary) 75%);
  background-size: 200% 100%;
  animation: ai-shimmer 1.5s infinite;
  border-radius: var(--radius-lg);
  height: 80px;
  margin-bottom: 10px;
}
.ai-skeleton-row {
  background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-secondary) 50%, var(--color-background-tertiary) 75%);
  background-size: 200% 100%;
  animation: ai-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 16px;
  margin-bottom: 8px;
}
.ai-skeleton-row:nth-child(odd) { width: 85%; }
.ai-skeleton-row:nth-child(even) { width: 65%; }

@keyframes ai-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Micro-Interactions ── */
.ai-hover-lift {
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ai-hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ai-focus-ring:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Subtle active press */
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Card interactive hover enhancement */
.ai-card--interactive:hover,
.ai-alert-card:hover,
.ai-watch-card:hover,
.ai-action-card:hover,
.ai-automation-card:hover {
  transform: translateY(-1px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ai-hover-lift:hover { transform: none; }
  .ai-card--interactive:hover,
  .ai-alert-card:hover,
  .ai-watch-card:hover,
  .ai-action-card:hover,
  .ai-automation-card:hover { transform: none; }
  .btn:active:not(:disabled) { transform: none; }
  .ai-skeleton-card,
  .ai-skeleton-row { animation: none; }
  .ai-toggle__slider,
  .ai-toggle__slider::before { transition: none; }
}

/* ── Section Header ── */
.ai-section-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-default);
}

/* ── Meta Row (key-value pairs) ── */
.ai-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  padding: 6px 0;
}
.ai-meta-row strong {
  color: var(--color-text-secondary);
}

/* ── Muted helper text ── */
.ai-muted {
  font-size: 12px;
  color: var(--color-text-quaternary);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   UX Phase 6 — Visual QA Responsive Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── Global overflow protection ── */
html, body {
  overflow-x: hidden;
}

/* ── pg-header responsive ── */
@media (max-width: 768px) {
  .pg-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .pg-header-actions {
    align-self: flex-start;
  }
}

/* ── ins-tabs wrap on narrow ── */
@media (max-width: 768px) {
  .ins-tabs {
    flex-wrap: wrap;
  }
  .ins-tab {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }
}

/* ── set-grid (settings) mobile stacking ── */
@media (max-width: 768px) {
  .set-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .set-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ── pricing-grid narrow ── */
@media (max-width: 600px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ds-connectors-grid narrow ── */
@media (max-width: 480px) {
  .ds-connectors-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Tables: ensure overflow wrapper fallback ── */
.admin-card > table.admin-table,
.admin-card > div > table.admin-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── overview-cards narrow fix ── */
@media (max-width: 480px) {
  .overview-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Modal responsive ── */
@media (max-width: 600px) {
  .act-modal {
    max-width: 95vw;
    margin: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UX Phase 10B — Mobile Excellence Fix Pass
   ═══════════════════════════════════════════════════════════════ */

/* ── 480px: headers stack actions, filter bars wrap ── */
@media (max-width: 480px) {
  /* P7: pg-header action containers stack vertically */
  .pg-header,
  .page-header,
  .ai-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pg-actions,
  .page-actions,
  .header-actions,
  .ai-page-actions,
  .report-actions,
  .pg-header-actions,
  .pg-header > div[style*="display:flex"],
  .ai-page-header__actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .pg-header > div[style*="display:flex"] > *,
  .pg-actions > *,
  .page-actions > *,
  .header-actions > *,
  .ai-page-actions > *,
  .report-actions > *,
  .pg-header-actions > *,
  .ai-page-header__actions > * {
    width: 100% !important;
    min-height: 40px !important;
  }

  /* P3: filter bar stacks in 1 column */
  .ai-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .ai-filter-bar > select,
  .ai-filter-bar > input,
  .ai-filter-bar > button,
  .ai-filter-bar > .select-sm {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    min-width: 0 !important;
  }

  /* P6: all stat/metric card grids → 2 columns */
  .overview-cards,
  .ai-metrics-grid,
  .m-grid,
  .metrics-grid,
  .stat-grid,
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* P4: cross-channel period selector */
  #cc-period-selector {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #cc-period-selector > button {
    min-height: 40px !important;
    min-width: 56px !important;
  }

  /* P5: settings tabs and buttons */
  .ins-tabs {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .ins-tab {
    min-height: 40px !important;
    flex: 1 1 auto !important;
  }

  /* Global touch target minimum for interactive elements */
  button,
  select,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  .btn,
  .btn-sm,
  .select-sm {
    min-height: 40px !important;
  }
}

/* ── 430px: stat grids go single column ── */
@media (max-width: 430px) {
  .overview-cards,
  .ai-metrics-grid,
  .m-grid,
  .metrics-grid,
  .stat-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }
  .overview-cards .admin-card,
  .overview-cards > * {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ── 375px: tightest mobile — full single column, no clipping ── */
@media (max-width: 375px) {
  /* P1: mycompany overview cards forced single column */
  .overview-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .overview-cards .admin-card,
  .overview-cards > * {
    flex: none !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* P2: executive report buttons full width */
  .pg-header > div[style*="display:flex"] {
    flex-direction: column !important;
    width: 100% !important;
  }
  .pg-header > div[style*="display:flex"] > button,
  .pg-header > div[style*="display:flex"] > select {
    width: 100% !important;
    min-height: 40px !important;
    white-space: normal !important;
  }

  /* P3: campaign explorer selects full width */
  #ce-period,
  #ce-provider,
  #ce-status,
  #ce-sort {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    min-width: 0 !important;
  }

  /* P4: cross-channel period buttons */
  #cc-period-selector {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #cc-period-selector > button {
    min-height: 40px !important;
    min-width: 56px !important;
    flex: 1 1 auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UX Phase 11 — Executive / Agency Commercial Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Commercial Hero Section ── */
.ai-commercial-hero {
  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
}
.ai-commercial-hero__eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-interactive-primary);
  margin-bottom: 8px;
}
.ai-commercial-hero__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: 6px;
}
.ai-commercial-hero__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 640px;
}

/* ── Trust Row ── */
.ai-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ai-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
}
.ai-trust-pill svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-text-quaternary);
  flex-shrink: 0;
}

/* ── Export Toolbar ── */
.ai-export-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.ai-export-toolbar .btn {
  white-space: nowrap;
}

/* ── Commercial Card ── */
.ai-commercial-card {
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ai-commercial-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.ai-commercial-card--featured {
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 1px var(--color-interactive-primary), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.ai-commercial-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-interactive-primary);
  margin-bottom: 8px;
}
.ai-commercial-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.ai-commercial-card__text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Commercial Grid ── */
.ai-commercial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* ── Value Stack ── */
.ai-value-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.ai-value-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.ai-value-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-feedback-success);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Security Note ── */
.ai-security-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-left: 3px solid var(--color-feedback-warning);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.ai-security-note__icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-security-note__icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-feedback-warning);
}
.ai-security-note__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-feedback-warning);
  margin-bottom: 3px;
}
.ai-security-note__text {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Health Score Visual ── */
.ai-health-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ai-health-score::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-interactive-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ai-health-score__value {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ai-health-score__label {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.ai-health-score__caption {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-quaternary);
  margin-bottom: 10px;
}

/* ── Scope Grid ── */
.ai-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.ai-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--color-text-secondary);
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
.ai-scope-chip svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-feedback-success);
  flex-shrink: 0;
}

/* ── Price Card Enhancement ── */
.plan-card-recommended-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--color-interactive-primary);
  color: var(--color-light);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1;
}
.plan-card { position: relative; }
.feature-coming {
  color: var(--color-text-quaternary);
  font-style: italic;
}

/* ── Commercial Empty State ── */
.ai-commercial-empty {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.ai-commercial-empty__icon {
  margin-bottom: 16px;
  opacity: 0.4;
}
.ai-commercial-empty__icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--color-text-quaternary);
}
.ai-commercial-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.ai-commercial-empty__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 440px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

/* ── Section Title Enhancement ── */
.ai-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-section-title__count {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: var(--color-background-tertiary);
  border-radius: 100px;
  color: var(--color-text-tertiary);
}

/* ── Phase 11 Responsive ── */
@media (max-width: 480px) {
  .ai-commercial-hero {
    padding: 20px 16px;
  }
  .ai-commercial-hero__title {
    font-size: 18px;
  }
  .ai-export-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ai-commercial-grid {
    grid-template-columns: 1fr;
  }
  .ai-scope-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Phase 13 — Opportunity Narratives
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-narrative-card {
  background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-primary) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
}
.ai-narrative-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ai-narrative-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}
.ai-narrative-mode--llm {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.ai-narrative-mode--fallback {
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-content-secondary);
}
.ai-focus-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.ai-focus-card__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-interactive-primary);
  margin-bottom: 4px;
}
.ai-focus-card__text {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.ai-evidence-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-evidence-strip .ai-chip {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--color-background-tertiary);
  border-radius: 12px;
  color: var(--color-text-secondary);
}
.ai-risk-note {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid var(--color-feedback-danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.5;
}
.ai-narrative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Phase 14 — Opportunity Actions & Tracking
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-opportunity-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
}
.ai-status-new {
  background: rgba(107, 114, 128, 0.10);
  color: var(--color-content-secondary);
}
.ai-status-tracked {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.ai-status-acted {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.ai-status-dismissed {
  background: rgba(107, 114, 128, 0.12);
  color: #9ca3af;
}
.ai-action-button-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ai-action-button-row .btn {
  min-height: 40px;
  font-size: 12px;
}
.ai-action-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  z-index: 10000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.ai-action-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Phase 15 — Opportunity Impact Analytics
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-impact-section {
  border-top: 1px solid var(--color-border-default);
  padding-top: 20px;
}
.ai-impact-card {
  position: relative;
}
.ai-impact-card--positive { border-left: 3px solid #10b981; }
.ai-impact-card--neutral  { border-left: 3px solid var(--color-feedback-warning); }
.ai-impact-card--negative { border-left: 3px solid var(--color-feedback-danger); }
.ai-impact-card--unknown  { border-left: 3px solid #64748b; }
.ai-impact-metric-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.ai-impact-delta {
  font-variant-numeric: tabular-nums;
}
.ai-impact-delta--up { color: var(--color-feedback-danger); }
.ai-impact-delta--down { color: #10b981; }
.ai-impact-window {
  font-variant-numeric: tabular-nums;
}
.ai-impact-followup {
  font-style: italic;
}

@media (max-width: 430px) {
  .ai-impact-metric-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ai-impact-metric-row span {
    min-width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Phase 16 — Opportunity Lifecycle Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-lifecycle-funnel {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding: 4px 0;
}
.ai-lifecycle-stage {
  flex: 1;
  min-width: 100px;
  padding: 12px;
  background: var(--color-background-tertiary);
  border-radius: 8px;
  opacity: 0.6;
  transition: opacity var(--duration) var(--ease);
}
.ai-lifecycle-stage--active {
  opacity: 1;
}
.ai-lifecycle-stage__count {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.ai-lifecycle-stage__rate {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}
.ai-lifecycle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-quaternary);
  padding: 0 6px;
  flex-shrink: 0;
}
.ai-lifecycle-event {
  transition: background var(--duration) var(--ease);
}
.ai-lifecycle-event:hover {
  background: var(--color-background-tertiary);
}
.ai-lifecycle-event--tracked {}
.ai-lifecycle-event--acted {}
.ai-lifecycle-event--impact {}
.ai-type-breakdown {}
.ai-conversion-bar {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 430px) {
  .ai-lifecycle-funnel {
    flex-direction: column;
    gap: 4px;
  }
  .ai-lifecycle-arrow {
    transform: rotate(90deg);
    padding: 2px 0;
  }
  .ai-lifecycle-stage {
    min-width: auto;
  }
  #ol-charts-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Product Phase 17 — Competitive Intelligence Summary
   ═══════════════════════════════════════════════════════════════ */

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

.ai-ci-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.15s ease;
}
.ai-ci-card:hover {
  border-color: var(--border-primary);
}
.ai-ci-card--high {
  border-left: 3px solid var(--color-feedback-danger);
}
.ai-ci-card--medium {
  border-left: 3px solid var(--color-feedback-warning);
}
.ai-ci-card--low {
  border-left: 3px solid #10b981;
}

.ai-ci-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-ci-risk-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.ai-ci-score-bar {
  height: 6px;
  background: var(--color-background-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ai-ci-score-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ai-ci-card__components {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.ai-ci-component {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-ci-component__label {
  font-size: 11px;
  min-width: 64px;
  color: var(--color-text-quaternary);
}
.ai-ci-component__bar {
  flex: 1;
  height: 4px;
  background: var(--color-background-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.ai-ci-component__fill {
  height: 100%;
  background: var(--color-interactive-primary);
  border-radius: 2px;
}
.ai-ci-component__value {
  font-size: 10px;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}

.ai-ci-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--color-text-quaternary);
  margin-bottom: 10px;
}

.ai-ci-card__insight,
.ai-ci-card__strategy {
  padding: 8px 10px;
  background: var(--color-background-tertiary);
  border-radius: 8px;
  margin-top: 8px;
}

.ai-ci-insight {
  padding: 10px 12px;
  background: var(--color-background-secondary);
  border-radius: 8px;
  margin-bottom: 8px;
}

.ai-ci-leaderboard {
  font-size: 12px;
}

@media (max-width: 430px) {
  .ai-ci-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Product Phase 17 — Campaign Intelligence Recovery + Clustering V2
   ═══════════════════════════════════════════════════════════════ */

.ai-campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-5);
}

.ai-campaign-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--duration), box-shadow var(--duration), transform var(--duration);
}
.ai-campaign-card:hover {
  border-color: var(--color-interactive-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ai-campaign-card--cross {
  border-left: 3px solid var(--color-interactive-primary);
}

.ai-campaign-card__header {
  padding: var(--space-4) var(--space-5) 0;
}
.ai-campaign-card__body {
  padding: var(--space-2) var(--space-5) var(--space-3);
}
.ai-campaign-card__footer {
  padding: 0 var(--space-5) var(--space-4);
  display: flex;
  gap: 8px;
}

.ai-campaign-confidence {
  position: relative;
  height: 10px;
  background: var(--color-background-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ai-campaign-confidence__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-interactive-primary), var(--color-feedback-success, var(--status-success)));
  transition: width 0.3s var(--ease);
}

.ai-campaign-detail {
  max-width: 960px;
}

.ai-campaign-signal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-campaign-signal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--color-background-tertiary);
  border-radius: 6px;
}
.ai-campaign-signal__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.ai-campaign-signal__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ai-campaign-palette {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ai-campaign-color {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-primary);
}

.ai-campaign-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.ai-campaign-family-card {
  background: var(--color-background-tertiary);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-creative-cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.ai-creative-cluster-card {
  background: var(--color-background-tertiary);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  transition: border-color 0.15s;
}
.ai-creative-cluster-card:hover {
  border-color: var(--accent-primary);
}

.ai-cross-match-card {
  background: var(--color-background-tertiary);
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border-primary);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.ai-cross-match-card:hover {
  border-color: var(--accent-primary);
}

.ai-cluster-keyword-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ai-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  color: var(--color-text-secondary);
}

.ai-page-header__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ai-range-sm {
  width: 80px;
  accent-color: var(--accent-primary);
}

.ai-btn-group {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
}
.ai-btn-group .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border-primary);
}
.ai-btn-group .btn:last-child {
  border-right: none;
}
.btn-active {
  background: var(--accent-primary) !important;
  color: #0E0E0E !important;
}

@media (max-width: 768px) {
  .ai-campaign-grid {
    grid-template-columns: 1fr;
  }
  .ai-creative-cluster-grid {
    grid-template-columns: 1fr;
  }
  .ai-filter-bar {
    flex-wrap: wrap;
  }
  .ai-btn-group {
    width: 100%;
  }
  .ai-btn-group .btn {
    flex: 1;
    min-height: 40px;
  }
}

@media (max-width: 430px) {
  .ai-campaign-grid {
    grid-template-columns: 1fr;
  }
  .ai-campaign-family-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Product Phase 18 — Alert Freshness Reconciliation
   ═══════════════════════════════════════════════════════════════ */

.ai-freshness {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.ai-freshness--market-new {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-feedback-success);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.ai-freshness--discovered {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.ai-freshness--historical {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-feedback-warning);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ── Phase 42: Print-friendly styles ─────────────────────────── */
@media print {
  .sidebar, .s-nav, .s-brand, .topbar,
  #cd-filters, #cd-actions, #cd-retry,
  .ai-btn, button, select, input,
  .s-section, .s-toggle-theme {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11px;
  }
  #page-content {
    margin: 0 !important;
    padding: 12px !important;
    max-width: 100% !important;
  }
  .ai-card, .admin-card {
    border: 1px solid #ddd !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #111 !important;
    break-inside: avoid;
  }
  .ai-page-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  .ai-trust-pill {
    border: 1px solid #999 !important;
    background: transparent !important;
    color: #333 !important;
  }
  .ai-table, .admin-table {
    border-collapse: collapse;
  }
  .ai-table th, .ai-table td,
  .admin-table th, .admin-table td {
    border: 1px solid #ccc !important;
    padding: 4px 6px;
    color: #111 !important;
  }
  h3 { color: #111 !important; }
  a { color: #111 !important; text-decoration: none !important; }
  #cd-content { display: block !important; }
}

/* ── Account Context (Phase 48) ── */
.context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.context-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.context-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.context-value {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 500;
}
.role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.role-badge-sm {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}
.status-granted { color: #10B981; font-weight: 500; }
.status-denied { color: var(--color-content-secondary); font-size: 12px; }
.empty-state { text-align: center; padding: 32px 16px; }

/* ── Metric Help Tooltips ─────────────────────────────────────── */
.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-border-default, #333);
  background: transparent;
  color: var(--color-text-quaternary, var(--color-content-secondary));
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: help;
  padding: 0;
  margin-left: 4px;
  vertical-align: middle;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.mh-btn:hover,
.mh-btn:focus {
  border-color: var(--color-interactive-primary, var(--chart-1));
  color: var(--color-interactive-primary, var(--chart-1));
  background: rgba(86, 103, 234, 0.06);
  outline: none;
}
.mh-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-background-secondary, #1a1a1a);
  border: 1px solid var(--color-border-default, #333);
  color: var(--color-text-secondary, #d1d5db);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.mh-tooltip strong {
  color: var(--color-text-primary, #fff);
  font-size: 12px;
}
.mh-proxy-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 4px;
}
@media (max-width: 640px) {
  .mh-tooltip { max-width: calc(100vw - 32px); }
}

/* ── Source Badge — Global Component (G1) ───────────────────── */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 16px;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}
.source-badge--observed {
  background: var(--color-interactive-primary-subtle);
  color: var(--color-interactive-primary);
}
.source-badge--estimated {
  background: rgba(249, 168, 37, 0.12);
  color: var(--warning);
}
[data-theme="dark"] .source-badge--estimated {
  background: rgba(251, 191, 36, 0.12);
}

/* ── Pagination ─────────────────────────────────────────────── */
.cc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0 8px;
}
.cc-page-info {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ── Creative card media — image loading performance ────────── */
.cc-media .cc-thumb {
  opacity: 0;
}
.cc-media .cc-thumb.is-loaded {
  opacity: 1;
}

/* ── Grid loading transition ───────────────────────────────── */
.cc-grid--loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ── Mobile responsive: filters + pagination ───────────────── */
@media (max-width: 640px) {
  .cc-format-bar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .cc-pill {
    font-size: 11px;
    padding: 4px 10px;
  }
  .cc-pagination {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
  }
  .cc-page-info {
    font-size: 11px;
    order: -1;
    width: 100%;
    text-align: center;
  }
}

/* ── Campaigns by Channel Chart ─────────────────────────────── */
.cbc-legend {
  display: flex;
  gap: 16px;
  padding: 0 20px 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.cbc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cbc-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.cbc-color-campaigns { background: #3B82F6; }
.cbc-color-creatives { background: #8B5CF6; }

.cbc-chart {
  display: flex;
  padding: 8px 20px 12px;
  min-height: 200px;
  position: relative;
}
.cbc-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 10px;
  min-width: 36px;
}
.cbc-ytick {
  font-size: 11px;
  color: var(--color-text-quaternary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cbc-bars-area {
  flex: 1;
  position: relative;
  border-left: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
}
.cbc-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cbc-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-background-tertiary);
}
.cbc-groups {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  height: 100%;
  min-height: 180px;
  padding: 0 16px;
}
.cbc-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
  outline: none;
}
.cbc-group:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: 4px; }
.cbc-pair {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
}
.cbc-bar {
  width: 32px;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: opacity .15s;
  min-height: 0;
}
.cbc-group:hover .cbc-bar,
.cbc-group:focus .cbc-bar {
  opacity: .85;
}
.cbc-bar-val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cbc-xlabel {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

/* Tooltip */
.cbc-tooltip {
  position: absolute;
  background: var(--color-background-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
  .cbc-groups { gap: 12px; padding: 0 8px; }
  .cbc-bar { width: 22px; }
  .cbc-chart { padding: 8px 12px 12px; overflow-x: auto; }
}

/* ── Advertising Presence (Channel Intelligence) ── */
.mc-presence {
  margin-top: 24px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 24px;
  background: var(--color-background-raised);
}
.mc-presence__header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mc-presence__header-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-presence__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-content-primary);
  margin: 0;
}
.mc-presence__subtitle {
  font-size: 12px;
  color: var(--color-content-tertiary);
}
/* ── Scope tabs (underline navigation) ── */
.mc-presence__tabs-wrap {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--color-border-subtle);
  position: relative;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.mc-presence__tabs-wrap::-webkit-scrollbar { display: none; }
.mc-presence__tabs-wrap:not(.mc-presence__tabs-wrap--overflow) {
  mask-image: none;
  -webkit-mask-image: none;
}
.mc-presence__tab {
  flex-shrink: 0;
  position: relative;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-content-tertiary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
  outline: none;
}
.mc-presence__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 1px 1px 0 0;
  transition: background 0.15s ease;
}
.mc-presence__tab:hover {
  color: var(--color-content-primary);
}
.mc-presence__tab:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: -2px;
  border-radius: 4px;
}
.mc-presence__tab--active {
  color: var(--color-interactive-primary, #812bdd);
  font-weight: 600;
}
.mc-presence__tab--active::after {
  background: var(--color-interactive-primary, #812bdd);
}
.mc-presence__tab--active:hover {
  color: var(--color-interactive-primary, #812bdd);
}
.mc-presence__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-secondary);
  margin: 0 0 12px;
}

/* Channel Cards */
.mc-presence__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.mc-channel-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 16px;
  background: var(--color-background-surface);
  transition: box-shadow 0.15s ease;
}
.mc-channel-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.mc-channel-card--skeleton {
  min-height: 140px;
  background: var(--bg-tertiary);
  animation: pulse 1.5s ease-in-out infinite;
}
.mc-channel-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mc-channel-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
}
.mc-channel-card__status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}
.mc-status--success { background: var(--success-bg); color: var(--success); }
.mc-status--warning { background: var(--warning-bg); color: var(--warning); }
.mc-status--danger { background: var(--danger-bg); color: var(--danger); }
.mc-status--neutral { background: var(--bg-tertiary); color: var(--text-quaternary); }
.mc-channel-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.mc-channel-card__metric-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.2;
}
.mc-channel-card__metric-label {
  display: block;
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-top: 2px;
}
.mc-channel-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 11px;
}
.mc-channel-card__coverage { font-weight: 500; }
.mc-coverage--high { color: var(--success); }
.mc-coverage--medium { color: var(--warning); }
.mc-coverage--low { color: var(--danger); }
.mc-coverage--none { color: var(--text-quaternary); }
.mc-channel-card__last-seen { color: var(--text-quaternary); }

/* Channel Mix Bars */
.mc-presence__mix {
  margin-bottom: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}
.mc-mix-row { margin-bottom: 14px; }
.mc-mix-row__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  margin-bottom: 6px;
  display: block;
}
.mc-mix-row__bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-tertiary);
  margin-bottom: 4px;
}
.mc-mix-row__segment {
  height: 100%;
  transition: width 0.4s ease;
}
.mc-mix-row__segment--google { background: var(--chart-2); }
.mc-mix-row__segment--meta { background: #3B82F6; }
.mc-mix-row__legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--color-content-tertiary);
}
.mc-mix-row__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mc-mix-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mc-mix-row__dot--google { background: var(--chart-2); }
.mc-mix-row__dot--meta { background: #3B82F6; }

/* Comparison Table */
.mc-presence__comparison {
  margin-bottom: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}
.mc-comparison-table-wrap { overflow-x: auto; }
.mc-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mc-comparison-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-content-tertiary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}
.mc-comparison-table td {
  padding: 10px 12px;
  color: var(--color-content-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}
.mc-comparison-table tr:last-child td { border-bottom: none; }
.mc-activity-rate {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
}

/* Channel Insights */
.mc-presence__insights {
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}
.mc-insight {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.mc-insight--info { background: var(--info-bg, rgba(59, 130, 246, 0.08)); }
.mc-insight--warning { background: var(--warning-bg); }
.mc-insight--success { background: var(--success-bg); }
.mc-insight__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-secondary);
}
.mc-insight--info .mc-insight__icon { color: var(--info); }
.mc-insight--warning .mc-insight__icon { color: var(--warning); }
.mc-insight--success .mc-insight__icon { color: var(--success); }
.mc-insight__body { display: flex; flex-direction: column; gap: 2px; }
.mc-insight__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-content-primary);
}
.mc-insight__desc {
  font-size: 11px;
  color: var(--color-content-tertiary);
  line-height: 1.4;
}

/* Presence Footer */
.mc-presence__footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle);
}
.mc-presence__explanation {
  font-size: 11px;
  color: var(--text-quaternary);
  line-height: 1.4;
}

.mc-empty-padded { padding: 24px; }
.card-subtitle {
  color: var(--text-quaternary);
  font-size: 11px;
}
body.modal-open { overflow: hidden; }

/* ── Company Intelligence KPI Row ── */
.mc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.mc-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-background-raised);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}
.mc-kpi-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.mc-kpi-card__icon--campaigns { background: var(--warning, #f59e0b); }
.mc-kpi-card__icon--creatives { background: var(--info, #3b82f6); }
.mc-kpi-card__icon--channels { background: var(--color-interactive-primary, #812bdd); }
.mc-kpi-card__icon--active { background: var(--success, #10b981); }
.mc-kpi-card__content {
  display: flex;
  flex-direction: column;
}
.mc-kpi-card__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.2;
}
.mc-kpi-card__label {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin-top: 2px;
}
.mc-kpi-card__sub {
  font-size: 10px;
  color: var(--color-content-tertiary);
  margin-top: 2px;
}
.mc-kpi-card__sub--warning {
  color: var(--warning, #f59e0b);
}
@media (max-width: 768px) {
  .mc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mc-kpi-row { grid-template-columns: 1fr; }
}
.mc-kpi-meta {
  margin-top: 8px;
  text-align: right;
}
.mc-kpi-meta__text {
  font-size: 10px;
  color: var(--color-content-tertiary);
}

/* Campaign Group Quality Badge */
.mc-quality-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}
.mc-quality--strong { background: var(--success-bg); color: var(--success); }
.mc-quality--moderate { background: var(--warning-bg); color: var(--warning); }
.mc-quality--weak { background: var(--danger-bg); color: var(--danger); }

/* ── Entity Overview (Company & Competitor Comparative) ── */
/* ── Refresh button (DS outline, visible surface) ── */
.mc-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary, #A1A1AA);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.mc-refresh-btn:hover {
  color: var(--color-text-primary, #FAFAFA);
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.10);
}
.mc-refresh-btn:active:not([disabled]) {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.14);
}
.mc-refresh-btn:focus-visible {
  outline: 2px solid var(--color-interactive-primary, #812bdd);
  outline-offset: 2px;
}
.mc-refresh-btn svg {
  flex-shrink: 0;
}
/* Loading state — accent tint background */
.mc-refresh-btn--loading {
  pointer-events: none;
  cursor: default;
  color: var(--color-interactive-primary, #812bdd);
  border-color: var(--color-interactive-primary, #812bdd);
  background: rgba(129, 43, 221, 0.10);
}
.mc-refresh-btn--loading .mc-refresh-btn__icon {
  animation: mc-spin 0.7s linear infinite;
}
/* Success state — green */
.mc-refresh-btn--success {
  color: var(--color-feedback-success, #4caf50);
  border-color: var(--color-feedback-success, #4caf50);
  background: rgba(76, 175, 80, 0.10);
}
/* Error state — red */
.mc-refresh-btn--error {
  color: var(--color-feedback-danger, #ef5350);
  border-color: var(--color-feedback-danger, #ef5350);
  background: rgba(239, 83, 80, 0.10);
}
@keyframes mc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-refresh-btn--loading .mc-refresh-btn__icon {
    animation: none;
    opacity: 0.5;
  }
}
/* Light theme overrides */
:root:not(.dark) .mc-refresh-btn,
[data-theme="light"] .mc-refresh-btn {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
}
:root:not(.dark) .mc-refresh-btn:hover,
[data-theme="light"] .mc-refresh-btn:hover {
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.06);
}

.mc-entity-overview {
  margin-bottom: 24px;
}
.mc-entity-overview__header {
  margin-bottom: 16px;
}
.mc-entity-overview__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-content-primary);
  margin: 0;
}
.mc-entity-overview__subtitle {
  font-size: 13px;
  color: var(--color-content-tertiary);
  margin: 4px 0 0;
}
.mc-entity-overview__insights {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.mc-entity-insights__heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-secondary);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mc-entity-insight {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-background-raised);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-content-secondary);
  line-height: 1.4;
}
.mc-entity-insight--success { border-color: var(--success, #10b981); }
.mc-entity-insight--warning { border-color: var(--warning, #f59e0b); }
.mc-entity-insight--competitive { border-color: var(--color-interactive-primary, #812bdd); }
.mc-entity-insight__body { display: inline; }
.mc-entity-insight__title { color: var(--color-content-primary); margin-right: 4px; }
.mc-entity-insight__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-interactive-primary, #812bdd);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.mc-entity-insight__icon--success { background: var(--success, #10b981); }
.mc-entity-insight__icon--warning { background: var(--warning, #f59e0b); }
.mc-entity-insight__icon--competitive { background: var(--color-interactive-primary, #812bdd); }
.mc-entity-card {
  padding: 20px 24px;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  background: var(--color-background-raised);
  margin-bottom: 12px;
}
.mc-entity-card--own {
  border-color: var(--color-interactive-primary, #812bdd);
  border-width: 2px;
}
.mc-entity-card--skeleton {
  min-height: 80px;
  animation: mc-skel-pulse 1.5s ease-in-out infinite;
}
@keyframes mc-skel-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}
.mc-entity-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.mc-entity-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-content-primary);
  margin: 0;
}
.mc-entity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mc-entity-badge--own {
  background: var(--color-interactive-primary, #812bdd);
  color: white;
}
.mc-entity-badge--competitor {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.06));
  color: var(--color-content-secondary);
  border: 1px solid var(--border-primary);
}
.mc-entity-health {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}
.mc-entity-health__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.mc-entity-health__dot--healthy { background: var(--success, #10b981); }
.mc-entity-health__dot--stale { background: var(--warning, #f59e0b); }
.mc-entity-health__dot--no_data { background: var(--color-content-tertiary, #666); }
.mc-entity-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}
.mc-entity-metric {
  display: flex;
  flex-direction: column;
}
.mc-entity-metric__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.2;
}
.mc-entity-metric__label {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-top: 2px;
}
.mc-entity-metric__sub {
  font-size: 11px;
  color: var(--color-content-secondary);
  font-weight: 500;
}
/* Campaign group stacked bar indicator */
.mc-cg-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
  max-width: 120px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.06));
}
.mc-cg-bar__active {
  background: var(--success, #10b981);
  border-radius: 2px 0 0 2px;
  transition: width 0.3s ease;
}
.mc-cg-bar__inactive {
  background: var(--color-content-tertiary, #666);
  opacity: 0.3;
  transition: width 0.3s ease;
}
.mc-entity-metric__na {
  font-size: 11px;
  color: var(--color-content-tertiary);
  font-style: italic;
}
.mc-entity-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-entity-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: 11px;
  color: var(--color-content-secondary);
  line-height: 1.3;
}
.mc-entity-provider-chip__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.mc-entity-provider-chip__label {
  font-weight: 600;
  color: var(--color-content-primary);
}
.mc-entity-provider-chip__stats {
  color: var(--color-content-tertiary);
}
.mc-entity-overview__competitors {
  margin-top: 4px;
}
/* Competitor table view */
.mc-entity-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  background: var(--color-background-raised);
}
.mc-entity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mc-entity-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-primary);
  white-space: nowrap;
}
.mc-entity-table td {
  padding: 12px 16px;
  color: var(--color-content-primary);
  border-bottom: 1px solid var(--border-primary);
  vertical-align: middle;
}
.mc-entity-table tr:last-child td {
  border-bottom: none;
}
.mc-entity-table__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.mc-entity-table__th--right { text-align: right; }
.mc-entity-table__td--right { text-align: right; }
.mc-entity-table__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mc-entity-table__value--na {
  color: var(--color-content-tertiary);
  font-weight: 400;
  font-style: italic;
}
.mc-entity-table__value--dim {
  font-weight: 500;
  color: var(--color-content-tertiary);
}
.mc-entity-table__active-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.mc-entity-table__bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--color-interactive-primary, #812bdd);
  min-width: 4px;
  transition: width 0.3s ease;
}
.mc-entity-table__providers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-entity-table__provider-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-content-secondary);
}
@media (max-width: 768px) {
  .mc-entity-metrics { grid-template-columns: repeat(2, 1fr); }
  .mc-entity-table { font-size: 12px; }
  .mc-entity-table th, .mc-entity-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
  .mc-entity-metrics { grid-template-columns: 1fr 1fr; }
}

/* ── Data Coverage ── */
.mc-data-coverage {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  background: var(--color-background-raised);
}
.mc-data-coverage__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.mc-data-coverage__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0 0 4px;
}
.mc-data-coverage__subtitle {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin: 0;
}
.mc-data-coverage__status-line {
  font-size: 12px;
  color: var(--color-content-secondary);
  margin: 8px 0 0;
  padding: 0;
}
.mc-data-coverage__status-line:empty { display: none; }
.mc-data-coverage__summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-coverage-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.mc-coverage-pill--info { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.mc-coverage-pill--healthy { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.mc-coverage-pill--stale { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.mc-coverage-pill--attention { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Own Sources */
.mc-own-sources { margin-bottom: 20px; }
.mc-own-sources__heading,
.mc-competitor-tracking__heading,
.mc-app-assets__heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.mc-own-sources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.mc-source-card {
  padding: 16px;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--color-background-surface);
}
.mc-source-card--own {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-source-card--skeleton {
  height: 120px;
  background: linear-gradient(90deg, var(--color-background-raised) 25%, var(--bg-tertiary) 50%, var(--color-background-raised) 75%);
  background-size: 200% 100%;
  animation: mc-shimmer 1.5s infinite;
}
@keyframes mc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.mc-source-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-source-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-source-card__icon--google { background: #f1f3f4; color: #4285f4; }
.mc-source-card__icon--meta { background: #e7f3ff; color: #1877f2; }
.mc-source-card__icon--apple { background: #f5f5f7; color: #333; }
.mc-source-card__info { flex: 1; }
.mc-source-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-primary);
}
.mc-source-card__asset-name {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-top: 1px;
}
.mc-source-card__badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.mc-source-card__badge--healthy { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.mc-source-card__badge--active { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.mc-source-card__badge--stale { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.mc-source-card__badge--dormant { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.mc-source-card__badge--no_data { background: rgba(107, 114, 128, 0.1); color: var(--color-content-secondary); }
.mc-source-card__badge--no_ads_found { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.mc-source-card__badge--needs_attention { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.mc-source-card__metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.mc-source-card__metric {
  font-size: 11px;
  color: var(--color-content-tertiary);
}
.mc-source-card__metric strong {
  color: var(--color-content-primary);
  font-weight: 600;
}
.mc-source-card__issues {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-source-card__issue {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--warning, #f59e0b);
}
.mc-issue-icon { flex-shrink: 0; color: inherit; }
.mc-source-card__monitor {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}
.mc-source-card__monitor-label {
  font-weight: 500;
}
.mc-source-card__monitor-detail {
  opacity: 0.85;
}
.mc-source-card__monitor--ok {
  color: var(--success, #10b981);
  background: rgba(16, 185, 129, 0.08);
}
.mc-source-card__monitor--warn {
  color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
}
.mc-source-card__sync-ok {
  font-size: 10px;
  color: var(--success, #10b981);
  margin-top: 4px;
  padding: 2px 6px;
  display: inline-block;
}
.mc-source-card__sync-gap {
  font-size: 10px;
  color: var(--warning, #f59e0b);
  margin-top: 4px;
  padding: 2px 6px;
  display: inline-block;
}
.mc-source-card__explanation {
  font-size: 11px;
  color: var(--color-content-secondary);
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--surface-secondary, rgba(255, 255, 255, 0.03));
  border-radius: 4px;
  line-height: 1.4;
}
.mc-source-card__empty {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin: 0;
}

/* Competitor table */
.mc-competitor-tracking { margin-bottom: 20px; }
.mc-competitor-table-wrap { overflow-x: auto; }
.mc-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mc-comp-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 500;
  color: var(--color-content-tertiary);
  border-bottom: 1px solid var(--border-primary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mc-comp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.04));
  vertical-align: middle;
}
.mc-comp-table__name {
  font-weight: 500;
  color: var(--color-content-primary);
}
.mc-comp-table__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-comp-table__count {
  font-size: 10px;
  color: var(--color-content-tertiary);
}
.mc-comp-table__na {
  color: var(--text-quaternary);
}
.mc-comp-table__hint {
  font-size: 10px;
  color: var(--warning, #f59e0b);
  cursor: help;
}
.mc-source-card__badge--partial {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.mc-source-card__badge--no_ads_found {
  background: rgba(156, 163, 175, 0.12);
  color: var(--color-content-secondary);
}

/* App assets */
.mc-app-assets { margin-bottom: 20px; }
.mc-app-assets__grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mc-app-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--color-background-surface);
}
.mc-app-card__info { display: flex; flex-direction: column; gap: 1px; }
.mc-app-card__name { font-size: 12px; font-weight: 500; color: var(--color-content-primary); }
.mc-app-card__provider { font-size: 10px; color: var(--color-content-tertiary); }

/* Coverage recommendations */
.mc-coverage-recs { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-primary); }
.mc-coverage-recs__list { display: flex; flex-direction: column; gap: 8px; }
.mc-coverage-rec {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--color-content-secondary);
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-tertiary);
}
.mc-coverage-rec--medium { color: var(--warning, #f59e0b); }
.mc-coverage-rec--low { color: var(--color-content-secondary); }

/* ── Company Profile Summary ── */
.mc-profile-summary {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--color-background-raised);
}
.mc-profile-summary__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0 0 12px;
}
.mc-profile-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.mc-profile-summary__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-profile-summary__label {
  font-size: 11px;
  color: var(--color-content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mc-profile-summary__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-primary);
}
.mc-profile-summary__value--small {
  font-size: 11px;
  font-weight: 400;
}
.mc-profile-summary__alias-count {
  font-size: 10px;
  color: var(--color-content-tertiary);
  cursor: help;
  border-bottom: 1px dotted var(--color-content-tertiary);
}

/* ── Intelligence Readiness ── */
.mc-readiness {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  background: var(--color-background-raised);
}
.mc-readiness__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.mc-readiness__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0 0 4px;
}
.mc-readiness__hint {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin: 0;
}
.mc-readiness__score-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-readiness__score {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-content-primary);
}
.mc-readiness__tier {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.mc-readiness__tier--excellent { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.mc-readiness__tier--good { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.mc-readiness__tier--needs_attention { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.mc-readiness__tier--setup_incomplete { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.mc-readiness__bar-track {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}
.mc-readiness__bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}
.mc-readiness__bar--excellent { background: #10b981; }
.mc-readiness__bar--good { background: #3b82f6; }
.mc-readiness__bar--needs_attention { background: #f59e0b; }
.mc-readiness__bar--setup_incomplete { background: #ef4444; }

.mc-readiness__dimensions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.mc-readiness__dim {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-readiness__dim-label {
  font-size: 11px;
  color: var(--color-content-tertiary);
  width: 80px;
  flex-shrink: 0;
}
.mc-readiness__dim-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.mc-readiness__dim-fill {
  height: 100%;
  background: var(--color-interactive-primary, #812bdd);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.mc-readiness__dim-fill--good { background: #10b981; }
.mc-readiness__dim-fill--fair { background: #f59e0b; }
.mc-readiness__dim-fill--low { background: #ef4444; }
.mc-readiness__dim-score {
  font-size: 10px;
  color: var(--text-quaternary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.mc-readiness__issues,
.mc-readiness__completed {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-primary);
}
.mc-readiness__issues-title,
.mc-readiness__completed-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}
.mc-readiness__issues-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-readiness__issue {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--warning, #f59e0b);
}
.mc-readiness__explanation {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin: 0 0 10px;
}
.mc-readiness__dim-reason {
  display: block;
  font-size: 10px;
  color: var(--text-quaternary);
  margin-left: 90px;
  margin-top: 2px;
}
.mc-readiness__dim-label[title] {
  cursor: help;
  border-bottom: 1px dotted var(--text-quaternary);
}
/* Attention cards */
.mc-readiness__attention-card {
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.04);
  margin-bottom: 8px;
}
.mc-readiness__attention-card--error {
  border-left-color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.04);
}
.mc-readiness__attention-card--info {
  border-left-color: var(--info, #3b82f6);
  background: rgba(59, 130, 246, 0.04);
}
.mc-readiness__attention-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-readiness__attention-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-content-primary);
}
.mc-readiness__attention-desc {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin: 4px 0 0 20px;
  line-height: 1.4;
}
.mc-readiness__attention-dim {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-quaternary);
  margin-left: 20px;
  margin-top: 4px;
}
/* Checklist toggle */
.mc-checklist__done-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-content-tertiary);
  cursor: pointer;
  padding: 4px 0;
}
.mc-checklist__done-summary:hover { color: var(--color-content-secondary); }
.mc-checklist__chevron {
  transition: transform 0.2s ease;
}
.mc-checklist__done-summary--open .mc-checklist__chevron {
  transform: rotate(180deg);
}
.mc-checklist__done-list {
  margin-top: 4px;
}
.mc-checklist__item--done {
  opacity: 0.6;
}
/* Improve section */
.mc-readiness__improve {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-primary);
}
.mc-readiness__improve-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}
.mc-readiness__improve-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-readiness__improve-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-content-secondary);
}
.mc-readiness__improve-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mc-readiness__improve-badge--high {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.mc-readiness__improve-badge--medium {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.mc-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-content-secondary);
}
.mc-checklist__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mc-checklist__icon--done { color: var(--success, #10b981); }
.mc-checklist__icon--pending { color: var(--text-quaternary); }

/* ── Related Intelligence ── */
.mc-related-intel {
  margin-top: 24px;
}
.mc-related-intel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0 0 4px;
}
.mc-related-intel__desc {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin: 0 0 12px;
}
.mc-related-intel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .mc-related-intel__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mc-related-intel__grid { grid-template-columns: 1fr; }
}
.mc-intel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--color-background-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.mc-intel-card:hover {
  border-color: var(--color-interactive-primary, #812bdd);
}
.mc-intel-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-intel-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  color: var(--color-content-secondary);
}
.mc-intel-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-primary);
}
.mc-intel-card__desc {
  font-size: 11px;
  color: var(--color-content-tertiary);
  line-height: 1.4;
}
.mc-intel-card__meta {
  font-size: 11px;
  color: var(--color-content-secondary);
  font-weight: 500;
}
.mc-intel-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 32px;
}
.mc-intel-card__primary {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.2;
}
.mc-intel-card__primary--loading {
  width: 80px;
  height: 14px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  animation: mc-skel-pulse 1.2s ease-in-out infinite;
}
@keyframes mc-skel-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.mc-intel-card__secondary {
  font-size: 11px;
  color: var(--color-content-tertiary);
  font-weight: 500;
}
.mc-intel-card__cta {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-interactive-primary, #812bdd);
  margin-top: auto;
}
.mc-charts-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .mc-charts-row { grid-template-columns: 1fr; }
}
.mc-chart-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mc-chart-card .donut-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-chart-card .cbc-chart {
  flex: 1;
  min-height: 180px;
}
.mc-chart-card .cbc-legend {
  padding: 0 20px 4px;
}
.mc-chart-card--campaigns .cbc-bar {
  width: 26px;
}
.mc-chart-card--campaigns .cbc-groups {
  gap: 18px;
}
@media (max-width: 900px) {
  .mc-presence__cards { grid-template-columns: 1fr; }
  .mc-presence__tab { font-size: 12px; padding: 8px 12px; }
}

/* ── My Company Section Headers ── */
.mc-section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.mc-section-header__badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mc-section-header__badge--own {
  background: color-mix(in srgb, var(--chart-1) 15%, transparent);
  color: var(--color-interactive-primary);
}
.mc-section-header__badge--market {
  background: color-mix(in srgb, #3B82F6 15%, transparent);
  color: #3B82F6;
}
.mc-section-header__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
  line-height: 1.3;
}
.mc-section-header__subtitle {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
  line-height: 1.4;
}
.mc-section-header__subtitle strong {
  color: var(--color-text-secondary);
  font-weight: 600;
}
.mc-section-divider {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: 36px 0 24px;
}

/* ── Market Empty State ── */
.mc-market-empty-card {
  background: var(--color-background-secondary);
  border: 1px dashed var(--border-primary);
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.mc-market-empty-card__icon {
  color: var(--color-text-quaternary);
  margin-bottom: 16px;
}
.mc-market-empty-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}
.mc-market-empty-card__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0 0 20px;
  line-height: 1.5;
}
.mc-market-empty-card__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Scope Warning Banner ── */
.mc-scope-warning {
  background: var(--color-background-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ── MyCompany metrics column helpers ── */
.metrics--4col { grid-template-columns: repeat(4, 1fr); }
.metrics--2col { grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
/* Mobile responsive, DS compliance, extras — L11994-L15813 of app.css */

/* ══════════════════════════════════════════════════════════════
   MYCOMPANY — MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Tablet: 4-col → 2-col metrics */
@media (max-width: 900px) {
  .metrics--4col { grid-template-columns: repeat(2, 1fr); }
}

/* Small tablet / large phone */
@media (max-width: 640px) {
  /* Metrics → single column */
  .metrics--4col { grid-template-columns: 1fr; }
  .metrics--2col { grid-template-columns: 1fr; }

  /* Smaller metric cards */
  .m-card { padding: 14px; }
  .m-value { font-size: 22px; }
  .m-label { font-size: 10px; }
  .m-change { font-size: 10px; }
  .m-icon { width: 26px; height: 26px; }
  .m-icon svg { width: 13px; height: 13px; }

  /* Page header */
  .ai-page-header__actions { flex-wrap: wrap; gap: 6px; }

  /* Section headers — shrink badge */
  .mc-section-header { gap: 10px; }
  .mc-section-header__badge { width: 34px; height: 34px; border-radius: 8px; }
  .mc-section-header__badge svg { width: 15px; height: 15px; }
  .mc-section-header__title { font-size: 15px; }
  .mc-section-header__subtitle { font-size: 12px; }

  /* Donut chart — stack vertically */
  .donut-wrap { flex-direction: column; gap: 12px; padding: 12px; }

  /* Tabs — allow scroll */
  .tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; font-size: 11px; padding: 5px 12px; }

  /* Market empty card */
  .mc-market-empty-card { padding: 24px 16px; }
  .mc-market-empty-card__title { font-size: 14px; }
  .mc-market-empty-card__text { font-size: 12px; }

  /* Modal — full width on small screens */
  .cc-modal-overlay { padding: 12px; }
  .cc-modal { max-height: 90vh; }
  .cc-modal-body { padding: 14px; }
  .cc-modal-body .cc-modal-row { padding: 10px 0; }

  /* Section divider */
  .mc-section-divider { margin: 24px 0 16px; }

  /* Charts row — already stacks at 900px, reduce padding */
  .mc-chart-card .cbc-chart { min-height: 150px; }

  /* Scope warning */
  .mc-scope-warning { font-size: 11px; padding: 8px 12px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .metrics--4col { gap: 8px; }
  .metrics--2col { gap: 8px; }
  .m-card { padding: 12px; }
  .m-value { font-size: 20px; }
  .cc-pill { padding: 3px 8px; font-size: 10px; }
  .mc-section-header__badge { width: 28px; height: 28px; }
  .mc-section-header__title { font-size: 14px; }
  .cc-modal-overlay { padding: 8px; }

  /* Prevent horizontal overflow */
  .page { padding: 12px; overflow-x: hidden; }
}

/* ═══════════════════════════════════════════════════════════════
   Creative DNA — Detail Page
   ═══════════════════════════════════════════════════════════════ */
.cdna-kv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.cdna-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: 12px;
}
.cdna-kv-row:last-child { border-bottom: none; }
.cdna-kv-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
  min-width: 140px;
  flex-shrink: 0;
  text-transform: capitalize;
}
.cdna-kv-value {
  font-size: 13px;
  color: var(--color-text-primary);
  text-align: right;
  flex: 1;
  word-break: break-word;
}
.cdna-nested {
  text-align: left;
  padding-left: 12px;
  border-left: 2px solid var(--color-border-subtle);
}
.cdna-nested-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 12px;
}
.cdna-explain-summary {
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--color-background-secondary);
  border-radius: 8px;
}
.cdna-explain-group { margin-bottom: 16px; }
.cdna-explain-group:last-child { margin-bottom: 0; }
.cdna-explain-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.cdna-explain-item {
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: var(--color-background-secondary);
  border-left: 3px solid transparent;
}
.cdna-explain-item--strength { border-left-color: var(--color-feedback-success); }
.cdna-explain-item--weakness { border-left-color: var(--color-feedback-warning); }
.cdna-explain-item--insight { border-left-color: var(--color-interactive-primary); }

.badge--success { background: var(--success-bg); color: var(--color-feedback-success); border: 1px solid var(--success-border); }
.badge--danger { background: var(--danger-bg); color: var(--color-feedback-danger); border: 1px solid rgba(198, 40, 40, 0.20); }

/* ═══════════════════════════════════════════════════════════════
   DS COMPLIANCE PHASE 2 — Components, States, Patterns
   Reference: https://design-system.shinp.ai/ads-intelligence
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   ACTION PROMPT (DS: component.action-prompt)
   Variants: neutral, info, success, warning, danger
   ══════════════════════════════════════ */
.ds-action-prompt {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-default);
  background: var(--color-background-secondary);
  align-items: flex-start;
}
.ds-action-prompt__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-action-prompt__content { flex: 1; min-width: 0; }
.ds-action-prompt__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.ds-action-prompt__text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.ds-action-prompt__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
/* Variants */
.ds-action-prompt--info {
  border-color: var(--color-feedback-info);
  background: var(--info-bg);
}
.ds-action-prompt--info .ds-action-prompt__icon { color: var(--color-feedback-info); }
.ds-action-prompt--success {
  border-color: var(--color-feedback-success);
  background: var(--success-bg);
}
.ds-action-prompt--success .ds-action-prompt__icon { color: var(--color-feedback-success); }
.ds-action-prompt--warning {
  border-color: var(--color-feedback-warning);
  background: var(--warning-bg);
}
.ds-action-prompt--warning .ds-action-prompt__icon { color: var(--color-feedback-warning); }
.ds-action-prompt--danger {
  border-color: var(--color-feedback-danger);
  background: var(--danger-bg);
}
.ds-action-prompt--danger .ds-action-prompt__icon { color: var(--color-feedback-danger); }

/* ══════════════════════════════════════
   BOTTOM SHEET (DS: component.bottom-sheet)
   Mobile-first overlay
   ══════════════════════════════════════ */
.ds-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 24, 0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}
.ds-bottom-sheet-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.ds-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-background-secondary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-modal);
  z-index: 1001;
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease);
  max-height: 85vh;
  overflow-y: auto;
}
.ds-bottom-sheet-overlay.is-open .ds-bottom-sheet {
  transform: translateY(0);
}
.ds-bottom-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-default);
  margin: 8px auto 0;
}
.ds-bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}
.ds-bottom-sheet__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.ds-bottom-sheet__close {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.ds-bottom-sheet__close:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.ds-bottom-sheet__body { padding: 20px; }

/* Desktop: show as dialog */
@media (min-width: 769px) {
  .ds-bottom-sheet {
    width: 480px;
    max-width: 90%;
    margin: 0 auto;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(0.95);
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
  .ds-bottom-sheet-overlay.is-open .ds-bottom-sheet {
    transform: translate(-50%, -50%) scale(1);
  }
  .ds-bottom-sheet__handle { display: none; }
}

/* ══════════════════════════════════════
   BREADCRUMB — DS: design-system.shinp.ai/ads-intelligence
   14px, link=#5667EA, current=#141418/600, sep=#6B7280, gap=8px
   ══════════════════════════════════════ */
.ds-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}
.ds-breadcrumb__item {
  color: var(--color-interactive-primary);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.ds-breadcrumb__item:hover {
  color: var(--color-interactive-primary-hover);
  text-decoration: underline;
}
.ds-breadcrumb__item:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.ds-breadcrumb__separator {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0;
  user-select: none;
}
.ds-breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ══════════════════════════════════════
   ACCORDION (DS: component.accordion)
   ══════════════════════════════════════ */
.ds-accordion {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
  overflow: hidden;
}
.ds-accordion__item {
  border-bottom: 1px solid var(--color-border-default);
}
.ds-accordion__item:last-child { border-bottom: none; }
.ds-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-background-secondary);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  transition: background var(--duration);
}
.ds-accordion__trigger:hover { background: var(--color-background-tertiary); }
.ds-accordion__trigger[aria-expanded="true"] { background: var(--color-background-tertiary); }
.ds-accordion__chevron {
  width: 16px; height: 16px;
  color: var(--color-text-quaternary);
  transition: transform var(--duration) var(--ease);
  flex-shrink: 0;
}
.ds-accordion__trigger[aria-expanded="true"] .ds-accordion__chevron {
  transform: rotate(180deg);
}
.ds-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease);
}
.ds-accordion__panel[aria-hidden="false"],
.ds-accordion__panel.is-open {
  max-height: 2000px;
}
.ds-accordion__body {
  padding: 12px 16px 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ══════════════════════════════════════
   DS INPUT (Enhanced)
   States: default, focus, error, disabled, loading
   ══════════════════════════════════════ */
.ds-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  color: var(--color-text-primary);
  outline: none;
  transition: all var(--duration);
}
.ds-input::placeholder { color: var(--color-text-quaternary); }
.ds-input:focus {
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 2px var(--color-interactive-primary-glow);
}
.ds-input:disabled,
.ds-input[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-background-tertiary);
}
.ds-input[aria-invalid="true"],
.ds-input--error {
  border-color: var(--color-feedback-danger);
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.1);
}
.ds-input--sm { height: 32px; font-size: 12px; }
.ds-input--lg { height: 48px; font-size: 14px; padding: 0 16px; }

/* DS Select */
.ds-select {
  width: 100%;
  height: 40px;
  padding: 0 32px 0 12px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  color: var(--color-text-primary);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B7280' stroke-width='1.5'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all var(--duration);
  cursor: pointer;
}
.ds-select:focus {
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 2px var(--color-interactive-primary-glow);
}
.ds-select:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--color-background-tertiary); }

/* DS Textarea */
.ds-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  color: var(--color-text-primary);
  outline: none;
  resize: vertical;
  transition: border-color var(--duration);
}
.ds-textarea:focus {
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 2px var(--color-interactive-primary-glow);
}

/* ══════════════════════════════════════
   DS FORM FIELD (Standardized validation)
   ══════════════════════════════════════ */
.ds-field {
  margin-bottom: 16px;
}
.ds-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.ds-field__label--required::after {
  content: ' *';
  color: var(--color-feedback-danger);
}
.ds-field__helper {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}
.ds-field__error {
  font-size: 11px;
  color: var(--color-feedback-danger);
  margin-top: 4px;
  display: none;
}
.ds-field--error .ds-field__error { display: block; }
.ds-field--error .ds-field__helper { display: none; }
.ds-field--error .ds-input,
.ds-field--error .ds-select,
.ds-field--error .ds-textarea {
  border-color: var(--color-feedback-danger);
}
.ds-field__success {
  font-size: 11px;
  color: var(--color-feedback-success);
  margin-top: 4px;
  display: none;
}
.ds-field--success .ds-field__success { display: block; }
.ds-field--success .ds-input,
.ds-field--success .ds-select {
  border-color: var(--color-feedback-success);
}

/* ══════════════════════════════════════
   DS TOOLTIP (Enhanced)
   ══════════════════════════════════════ */
.ds-tooltip {
  position: relative;
  display: inline-flex;
}
.ds-tooltip__content {
  position: absolute;
  z-index: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-text-primary);
  color: var(--color-background-secondary);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration);
}
.ds-tooltip:hover .ds-tooltip__content,
.ds-tooltip:focus-within .ds-tooltip__content {
  opacity: 1;
}
.ds-tooltip__content--top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.ds-tooltip__content--bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.ds-tooltip__content--left { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.ds-tooltip__content--right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }

/* ══════════════════════════════════════
   DS SNACKBAR / TOAST (Enhanced)
   ══════════════════════════════════════ */
.ds-snackbar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s var(--ease);
  pointer-events: none;
  max-width: 400px;
}
.ds-snackbar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ds-snackbar--default { background: var(--color-text-primary); color: var(--color-background-secondary); }
.ds-snackbar--success { background: var(--color-feedback-success); color: var(--color-light); }
.ds-snackbar--error { background: var(--color-feedback-danger); color: var(--color-light); }
.ds-snackbar--warning { background: var(--color-feedback-warning); color: var(--color-text-primary); }
.ds-snackbar--info { background: var(--color-feedback-info); color: var(--color-light); }
.ds-snackbar__action {
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.ds-snackbar__close {
  width: 20px; height: 20px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
}
.ds-snackbar__close:hover { opacity: 1; }

/* ══════════════════════════════════════
   DS PAGINATION (Enhanced)
   ══════════════════════════════════════ */
.ds-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.ds-pagination__btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration);
  font-family: var(--font);
}
.ds-pagination__btn:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.ds-pagination__btn[aria-current="page"],
.ds-pagination__btn--active {
  background: var(--color-interactive-primary);
  color: var(--color-light);
  border-color: var(--color-interactive-primary);
}
.ds-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.ds-pagination__ellipsis {
  color: var(--color-text-quaternary);
  padding: 0 4px;
}
.ds-pagination__info {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-left: 12px;
}

/* ══════════════════════════════════════
   DS MODAL (Enhanced with focus trap support)
   ══════════════════════════════════════ */
.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 24, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}
.ds-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.ds-modal {
  background: var(--color-background-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 480px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform var(--duration-normal) var(--ease);
}
.ds-modal-overlay.is-open .ds-modal {
  transform: scale(1);
}
.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.ds-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.ds-modal__close {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background var(--duration);
}
.ds-modal__close:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.ds-modal__body { padding: 0 20px 20px; }
.ds-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border-default);
}

/* ══════════════════════════════════════
   DS CHIP (Enhanced)
   ══════════════════════════════════════ */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--color-background-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration);
  white-space: nowrap;
}
.ds-chip:hover { background: var(--color-background-hover); color: var(--color-text-primary); }
.ds-chip[aria-selected="true"],
.ds-chip--active {
  background: var(--color-interactive-primary-glow);
  color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
}
.ds-chip--removable .ds-chip__remove {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  margin-left: 2px;
}
.ds-chip:disabled,
.ds-chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════
   DS SPINNER (Enhanced)
   ══════════════════════════════════════ */
.ds-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-interactive-primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}
.ds-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.ds-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
.ds-spinner--inline { display: inline-block; vertical-align: middle; margin-right: 8px; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   DS PROGRESS BAR (Enhanced)
   ══════════════════════════════════════ */
.ds-progress {
  width: 100%;
  height: 6px;
  background: var(--color-background-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.ds-progress__fill {
  height: 100%;
  background: var(--color-interactive-primary);
  border-radius: 3px;
  transition: width 0.4s var(--ease);
}
.ds-progress--success .ds-progress__fill { background: var(--color-feedback-success); }
.ds-progress--warning .ds-progress__fill { background: var(--color-feedback-warning); }
.ds-progress--danger .ds-progress__fill { background: var(--color-feedback-danger); }
.ds-progress--lg { height: 10px; border-radius: 5px; }
.ds-progress--lg .ds-progress__fill { border-radius: 5px; }

/* ══════════════════════════════════════
   DS DIVIDER
   ══════════════════════════════════════ */
.ds-divider {
  height: 1px;
  background: var(--color-border-default);
  border: none;
  margin: 16px 0;
}
.ds-divider--inset { margin-left: 16px; margin-right: 16px; }
.ds-divider--labeled {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  background: transparent;
}
.ds-divider--labeled::before,
.ds-divider--labeled::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-default);
}
.ds-divider--labeled span {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════
   DS ALERT / BANNER
   ══════════════════════════════════════ */
.ds-alert {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  align-items: flex-start;
}
.ds-alert--info { background: var(--color-feedback-info-bg); color: var(--color-feedback-info-text); border: 1px solid rgba(56, 169, 212, 0.2); }
.ds-alert--success { background: var(--color-feedback-success-bg); color: var(--color-feedback-success); border: 1px solid var(--color-feedback-success-border); }
.ds-alert--warning { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-text); border: 1px solid var(--color-feedback-warning-border); }
.ds-alert--error { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger); border: 1px solid rgba(198, 40, 40, 0.2); }
.ds-alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.ds-alert__content { flex: 1; }
.ds-alert__dismiss {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}
.ds-alert__dismiss:hover { opacity: 1; }

/* ══════════════════════════════════════
   DS DROPDOWN MENU
   ══════════════════════════════════════ */
.ds-dropdown {
  position: relative;
  display: inline-flex;
}
.ds-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--duration);
}
.ds-dropdown.is-open .ds-dropdown__menu,
.ds-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ds-dropdown__menu--right { left: auto; right: 0; }
.ds-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: var(--color-text-primary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  transition: background var(--duration);
}
.ds-dropdown__item:hover { background: var(--color-background-tertiary); }
.ds-dropdown__item--danger { color: var(--color-feedback-danger); }
.ds-dropdown__item--danger:hover { background: var(--color-feedback-danger-bg); }
.ds-dropdown__item:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-dropdown__separator {
  height: 1px;
  background: var(--color-border-default);
  margin: 4px 0;
}

/* ══════════════════════════════════════
   DS AVATAR (Enhanced)
   ══════════════════════════════════════ */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.ds-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar--md { width: 32px; height: 32px; font-size: 12px; }
.ds-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.ds-avatar--xl { width: 56px; height: 56px; font-size: 18px; }
.ds-avatar--initials {
  background: var(--color-interactive-primary-glow);
  color: var(--color-interactive-primary);
}
.ds-avatar--icon {
  background: var(--color-background-tertiary);
  color: var(--color-text-tertiary);
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════
   DS LIST ITEM
   ══════════════════════════════════════ */
.ds-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-default);
  transition: background var(--duration);
}
.ds-list-item:last-child { border-bottom: none; }
.ds-list-item:hover { background: var(--color-background-tertiary); }
.ds-list-item__content { flex: 1; min-width: 0; }
.ds-list-item__title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.ds-list-item__subtitle { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.ds-list-item__action { flex-shrink: 0; }

/* ══════════════════════════════════════
   ENHANCED LOADING / STALE / SYNCING STATES
   ══════════════════════════════════════ */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.ai-loading__spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-interactive-primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
  margin-bottom: var(--space-4);
}
.ai-loading__text {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.ai-stale-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-feedback-warning-bg);
  border: 1px solid var(--color-feedback-warning-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-feedback-warning-text);
  margin-bottom: 12px;
}

.ai-permission-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.ai-permission-denied__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--color-feedback-warning-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--color-feedback-warning);
}
.ai-permission-denied__title {
  font-size: 14px; font-weight: 600; color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.ai-permission-denied__text {
  font-size: 13px; color: var(--color-text-tertiary);
  max-width: 360px; line-height: 1.5;
}

/* ══════════════════════════════════════
   SEGMENTED CONTROL (Enhanced)
   ══════════════════════════════════════ */
.ds-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius);
}
.ds-segmented__option {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--duration);
  border: none;
  background: transparent;
  font-family: var(--font);
}
.ds-segmented__option:hover { color: var(--color-text-primary); }
.ds-segmented__option[aria-selected="true"],
.ds-segmented__option--active {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ═══════════════════════════════════════════════════════════════
   DS RESPONSIVE — Phase 3 Component Responsiveness
   Ensures DS components adapt to mobile/tablet viewports.
   ═══════════════════════════════════════════════════════════════ */

/* Tablet (≤768px) */
@media (max-width: 768px) {
  .ds-modal__content { width: 95vw; max-width: 95vw; margin: 16px; }
  .ds-pagination { flex-wrap: wrap; gap: 4px; }
  .ds-pagination__btn { min-width: 32px; height: 32px; font-size: 12px; }
  .ds-action-prompt { flex-direction: column; text-align: center; }
  .ds-action-prompt__actions { justify-content: center; }
  .ds-segmented { flex-wrap: wrap; }
  .ds-segmented__option { padding: 5px 10px; font-size: 11px; }
  .ds-breadcrumb { font-size: 12px; }
  .ds-breadcrumb__separator { margin: 0 4px; }
  .ai-empty, .ai-error, .ai-permission-denied { padding: 24px 16px; }
  .ds-snackbar { left: 8px; right: 8px; bottom: 8px; transform: translateX(0); min-width: auto; }
  .ds-snackbar.is-visible { transform: translateX(0) translateY(0); }
  .ds-tooltip { max-width: 200px; font-size: 11px; }
}

/* ── P12-P20: Company Intelligence Dashboard sections ─────────── */
.mc-section-block {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--color-background-raised, var(--color-light));
  border: 1px solid var(--color-border-subtle, var(--support-panel));
}
.mc-section-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mc-section-block__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0;
}
.mc-section-block__subtitle {
  font-size: 11px;
  color: var(--color-content-tertiary);
}
.mc-section-block__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-interactive-primary, #812bdd);
  text-decoration: none;
}
.mc-section-block__link:hover {
  text-decoration: underline;
}

/* List items (recommendations, alerts, actions) */
.mc-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--support-panel));
}
.mc-list-item:last-child { border-bottom: none; }
.mc-list-item__title {
  flex: 1;
  font-size: 12px;
  color: var(--color-content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-list-item__priority,
.mc-list-item__severity,
.mc-list-item__status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-list-item__priority--high, .mc-list-item__severity--high, .mc-list-item__severity--critical {
  background: var(--danger-bg, rgba(239, 68, 68, 0.15)); color: var(--danger, #ef4444);
}
.mc-list-item__priority--medium, .mc-list-item__severity--medium {
  background: var(--warning-bg, rgba(245, 158, 11, 0.15)); color: var(--warning-text, #92400e);
}
.mc-list-item__priority--low, .mc-list-item__severity--low {
  background: var(--success-bg, rgba(34, 197, 94, 0.15)); color: var(--success, #16a34a);
}
.mc-list-item__severity--info { background: var(--info-bg, rgba(59, 130, 246, 0.15)); color: var(--info-text, #1d4ed8); }
.mc-list-item__status--open { background: var(--info-bg, rgba(59, 130, 246, 0.15)); color: var(--info-text, #1d4ed8); }
.mc-list-item__status--in_progress { background: var(--warning-bg, rgba(245, 158, 11, 0.15)); color: var(--warning-text, #92400e); }
.mc-list-item__status--completed { background: var(--success-bg, rgba(34, 197, 94, 0.15)); color: var(--success, #16a34a); }
.mc-list-item__status--blocked { background: var(--danger-bg, rgba(239, 68, 68, 0.15)); color: var(--danger, #ef4444); }
.mc-list-item__status--overdue { background: var(--danger-bg, rgba(239, 68, 68, 0.15)); color: var(--danger, #ef4444); }
.mc-list-item__status--pending_review { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.mc-list-item__tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--color-content-secondary);
  flex-shrink: 0;
}
.mc-list-item__meta {
  font-size: 10px;
  color: var(--color-content-tertiary);
  flex-shrink: 0;
}
.mc-list-empty {
  font-size: 12px;
  color: var(--color-content-tertiary);
  padding: 12px 0;
  text-align: center;
}
/* Enriched recommendation cards */
.mc-rec-card {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-primary);
}
.mc-rec-card:last-child { border-bottom: none; }
.mc-rec-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mc-rec-card__priority {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mc-rec-card__priority--high, .mc-rec-card__priority--critical {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.mc-rec-card__priority--medium {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.mc-rec-card__priority--low {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.mc-rec-card__theme {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
  flex-shrink: 0;
}
.mc-rec-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-content-primary);
  flex: 1;
  min-width: 0;
}
.mc-rec-card__cta {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-interactive-primary, #812bdd);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-rec-card__cta:hover { text-decoration: underline; }
.mc-rec-card__why {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin: 4px 0 0;
  line-height: 1.4;
}
.mc-rec-card__evidence {
  font-size: 10px;
  color: var(--text-quaternary);
  margin-top: 2px;
  display: block;
}

/* ── Enriched Alert Cards ────────────────────────────────────── */
.mc-alert-card {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--support-panel));
}
.mc-alert-card:last-child { border-bottom: none; }
.mc-alert-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-alert-card__severity {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-alert-card__severity--high, .mc-alert-card__severity--critical {
  background: var(--danger-bg, rgba(239, 68, 68, 0.15));
  color: var(--danger, #ef4444);
}
.mc-alert-card__severity--medium {
  background: var(--warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--warning-text, #92400e);
}
.mc-alert-card__severity--low {
  background: var(--success-bg, rgba(34, 197, 94, 0.15));
  color: var(--success, #16a34a);
}
.mc-alert-card__severity--info {
  background: var(--info-bg, rgba(59, 130, 246, 0.15));
  color: var(--info-text, #1d4ed8);
}
.mc-alert-card__signal {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--color-content-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-alert-card__title {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-alert-card__time {
  font-size: 10px;
  color: var(--color-content-tertiary);
  flex-shrink: 0;
}
.mc-alert-card__cta {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-interactive-primary, #812bdd);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-alert-card__cta:hover { text-decoration: underline; }
.mc-alert-card__evidence {
  font-size: 10px;
  color: var(--text-quaternary);
  margin-top: 4px;
  display: block;
}
.mc-alert-card__why {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ── Enriched Action Cards ───────────────────────────────────── */
.mc-action-card {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--support-panel));
}
.mc-action-card:last-child { border-bottom: none; }
.mc-action-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-action-card__status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-action-card__status--open {
  background: var(--info-bg, rgba(59, 130, 246, 0.15));
  color: var(--info-text, #1d4ed8);
}
.mc-action-card__status--in_progress {
  background: var(--warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--warning-text, #92400e);
}
.mc-action-card__status--completed {
  background: var(--success-bg, rgba(34, 197, 94, 0.15));
  color: var(--success, #16a34a);
}
.mc-action-card__status--blocked {
  background: var(--danger-bg, rgba(239, 68, 68, 0.15));
  color: var(--danger, #ef4444);
}
.mc-action-card__priority {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-action-card__priority--high, .mc-action-card__priority--critical {
  background: var(--danger-bg, rgba(239, 68, 68, 0.15));
  color: var(--danger, #ef4444);
}
.mc-action-card__priority--medium {
  background: var(--warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--warning-text, #92400e);
}
.mc-action-card__priority--low {
  background: var(--success-bg, rgba(34, 197, 94, 0.15));
  color: var(--success, #16a34a);
}
.mc-action-card__category {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--color-content-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-action-card__title {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-action-card__cta {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-interactive-primary, #812bdd);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-action-card__cta:hover { text-decoration: underline; }
.mc-action-card__why {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin: 4px 0 0;
  line-height: 1.4;
}
.mc-action-card__evidence {
  font-size: 10px;
  color: var(--text-quaternary);
  margin-top: 2px;
  display: block;
}
.mc-action-card__impact {
  font-size: 10px;
  color: var(--text-quaternary);
  margin-top: 2px;
  display: block;
  font-style: italic;
}
.mc-action-card__source {
  font-size: 9px;
  color: var(--text-quaternary);
  margin-top: 2px;
  display: block;
}

/* ── Decision Center ─────────────────────────────────────────── */
.mc-decision-center {
  margin-top: 24px;
  padding: 20px;
  border-radius: 10px;
  background: var(--color-background-raised, var(--color-light));
  border: 1px solid var(--color-border-subtle, var(--support-panel));
}
.mc-decision-center__header {
  margin-bottom: 12px;
}
.mc-decision-center__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-content-primary);
  margin: 0;
}
.mc-decision-center__subtitle {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin: 4px 0 0;
}
.mc-decision-center__summary {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  padding: 8px 12px;
  background: var(--bg-tertiary, #f3f4f6);
  border-radius: 6px;
  margin-bottom: 16px;
}
.mc-decision-center__summary:empty { display: none; }
.mc-decision-center__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .mc-decision-center__columns {
    grid-template-columns: 1fr;
  }
}
.mc-dc-column {
  min-width: 0;
}
.mc-dc-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-border-subtle, var(--support-panel));
}
.mc-dc-column__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0;
}
.mc-dc-column__link {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-interactive-primary, #812bdd);
  text-decoration: none;
  white-space: nowrap;
}
.mc-dc-column__link:hover { text-decoration: underline; }

/* Decision Center unified item */
.mc-dc-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--support-panel));
}
.mc-dc-item:last-child { border-bottom: none; }
.mc-dc-item__header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mc-dc-item__badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-dc-item__badge--high, .mc-dc-item__badge--critical {
  background: var(--danger-bg, rgba(239, 68, 68, 0.15));
  color: var(--danger, #ef4444);
}
.mc-dc-item__badge--medium {
  background: var(--warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--warning-text, #92400e);
}
.mc-dc-item__badge--low, .mc-dc-item__badge--info {
  background: var(--success-bg, rgba(34, 197, 94, 0.15));
  color: var(--success, #16a34a);
}
.mc-dc-item__badge--open {
  background: var(--info-bg, rgba(59, 130, 246, 0.15));
  color: var(--info-text, #1d4ed8);
}
.mc-dc-item__badge--in_progress {
  background: var(--warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--warning-text, #92400e);
}
.mc-dc-item__badge--completed {
  background: var(--success-bg, rgba(34, 197, 94, 0.15));
  color: var(--success, #16a34a);
}
.mc-dc-item__badge--blocked {
  background: var(--danger-bg, rgba(239, 68, 68, 0.15));
  color: var(--danger, #ef4444);
}
.mc-dc-item__tag {
  font-size: 9px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--color-content-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.mc-dc-item__title {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-dc-item__cta {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-interactive-primary, #812bdd);
  text-decoration: none;
  white-space: nowrap;
}
.mc-dc-item__cta:hover { text-decoration: underline; }
.mc-dc-item__cta:active { opacity: 0.8; }
.mc-dc-item__why {
  font-size: 10px;
  color: var(--color-content-tertiary);
  margin: 3px 0 0;
  line-height: 1.3;
}
.mc-dc-item__evidence {
  font-size: 9px;
  color: var(--text-quaternary);
  margin-top: 2px;
  display: block;
}
.mc-dc-item__meta {
  font-size: 9px;
  color: var(--text-quaternary);
  margin-top: 2px;
  display: block;
}
.mc-dc-item__source {
  font-size: 9px;
  color: var(--text-quaternary);
  margin-top: 3px;
  display: inline-block;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
  padding: 1px 6px;
  border-radius: 3px;
}
.mc-dc-empty {
  font-size: 11px;
  color: var(--color-content-tertiary);
  padding: 12px 0;
  text-align: center;
}

/* Text ad preview card */
.cc-media--text-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--color-background-raised, var(--bg-tertiary)) 100%);
  border-radius: var(--radius, 8px);
  border: 1px dashed var(--color-border-subtle, rgba(128, 128, 128, 0.15));
  min-height: 100px;
  text-align: center;
}
.cc-text-preview-icon {
  color: var(--color-content-tertiary);
  opacity: 0.6;
}
.cc-text-preview-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-primary);
  text-align: center;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-text-preview-domain {
  font-size: 10px;
  color: var(--color-content-tertiary);
}

/* ── Synthetic Preview — rich fallback when no media URL available ─────── */
.cc-synthetic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 16px 14px;
  min-height: 120px;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--color-border-subtle, rgba(128, 128, 128, 0.12));
  text-align: left;
  overflow: hidden;
}
.cc-synthetic--text {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
}
[data-theme="dark"] .cc-synthetic--text,
.dark .cc-synthetic--text {
  background: linear-gradient(135deg, rgba(86, 103, 234, 0.08) 0%, rgba(86, 103, 234, 0.04) 100%);
}
.cc-synthetic--video {
  background: linear-gradient(135deg, #fef3f0 0%, #fce8e4 100%);
}
[data-theme="dark"] .cc-synthetic--video,
.dark .cc-synthetic--video {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
}
.cc-synthetic--image {
  background: linear-gradient(135deg, #f0faf4 0%, #e4f4ec 100%);
}
[data-theme="dark"] .cc-synthetic--image,
.dark .cc-synthetic--image {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
}
.cc-synthetic__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cc-synthetic__badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.4;
}
.cc-synthetic__badge--format {
  background: var(--color-interactive-primary, var(--chart-1));
  color: #fff;
}
.cc-synthetic--video .cc-synthetic__badge--format {
  background: #ef4444;
}
.cc-synthetic--image .cc-synthetic__badge--format {
  background: #22c55e;
}
.cc-synthetic__badge--provider {
  background: rgba(128, 128, 128, 0.1);
  color: var(--color-content-secondary, #64748b);
}
.cc-synthetic__play {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.12);
  border-radius: 50%;
  color: #ef4444;
  margin: 2px 0;
}
.cc-synthetic__play svg { width: 16px; height: 16px; }
.cc-synthetic__headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-primary, var(--color-forest-green));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-synthetic__desc {
  font-size: 11px;
  color: var(--color-content-secondary, #64748b);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-synthetic__desc--muted {
  opacity: 0.7;
}
.cc-synthetic__cta {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--color-interactive-primary, var(--chart-1));
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.cc-synthetic__domain {
  font-size: 10px;
  color: var(--color-content-tertiary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Synthetic fallback inside cc-media (shown on onerror) */
.cc-synthetic-fallback { width: 100%; }
.cc-media--has-synthetic { padding: 0; background: none; }
.cc-media--has-synthetic .cc-synthetic { border: none; border-radius: 0; min-height: 100%; }
/* Inside comparison cards */
.ccf-cmp__media .cc-synthetic { min-height: 140px; border: none; border-radius: 0; }

/* P15: Campaign Summary */
.mc-summary-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.mc-summary-stat {
  font-size: 12px;
  color: var(--color-content-secondary);
}
.mc-summary-stat strong {
  color: var(--color-content-primary);
  font-weight: 600;
}
.mc-top-groups { display: flex; flex-direction: column; gap: 6px; }
.mc-top-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
}
.mc-top-group__name { font-size: 12px; color: var(--color-content-primary); font-weight: 500; }
.mc-top-group__count { font-size: 11px; color: var(--color-content-tertiary); }

/* P16: Creative Timeline */
.mc-timeline-chart { padding: 8px 0; }
.mc-timeline-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
}
.mc-timeline-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.mc-timeline-bar {
  width: 100%;
  min-height: 2px;
  background: var(--color-interactive-primary, #812bdd);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}
.mc-timeline-label {
  font-size: 9px;
  color: var(--color-content-tertiary);
  margin-top: 4px;
  white-space: nowrap;
}

/* P17: What Changed */
.mc-period-toggle { display: flex; gap: 4px; }
.mc-period-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, #2a2a4a);
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}
.mc-period-btn.active {
  background: var(--color-interactive-primary, #812bdd);
  color: #fff;
  border-color: var(--color-interactive-primary, #812bdd);
}
.mc-changes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.mc-change-card {
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-change-card__label { font-size: 11px; color: var(--color-content-tertiary); text-transform: capitalize; }
.mc-change-card__value { font-size: 20px; font-weight: 700; color: var(--color-content-primary); }
.mc-change-card__delta { font-size: 12px; font-weight: 500; }
.mc-change--up .mc-change-card__delta { color: #22c55e; }
.mc-change--down .mc-change-card__delta { color: #ef4444; }
.mc-change--stable .mc-change-card__delta { color: var(--color-content-tertiary); }
.mc-change-card__providers {
  font-size: 10px;
  color: var(--color-content-tertiary);
  margin-top: 2px;
}

/* What Changed: scope label */
.mc-wc__scope-label {
  font-size: 12px;
  color: var(--color-content-secondary);
  margin: 0 0 8px 0;
}

/* What Changed: sub-titles */
.mc-wc__sub-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-content-secondary);
  margin: 16px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* What Changed: Channel changes */
.mc-wc__channels-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-wc__channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  font-size: 12px;
}
.mc-wc__channel-name {
  font-weight: 600;
  color: var(--color-content-primary);
  min-width: 80px;
}
.mc-wc__channel-stat {
  color: var(--color-content-secondary);
}
.mc-wc__channel-delta {
  margin-left: auto;
  font-weight: 600;
}
.mc-change--up .mc-wc__channel-delta { color: #22c55e; }
.mc-change--down .mc-wc__channel-delta { color: #ef4444; }
.mc-change--stable .mc-wc__channel-delta { color: var(--color-content-tertiary); }

/* What Changed: Highlights */
.mc-wc__highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-wc__highlight {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--color-border-subtle);
  background: var(--bg-tertiary);
  color: var(--color-content-secondary);
}
.mc-wc__highlight--positive { border-left-color: #22c55e; }
.mc-wc__highlight--warning { border-left-color: #f59e0b; }
.mc-wc__highlight--competitive { border-left-color: var(--color-interactive-primary, #812bdd); }
.mc-wc__highlight--neutral { border-left-color: var(--color-content-tertiary); }

/* What Changed: Competitor changes */
.mc-wc__competitors-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-wc__comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  font-size: 12px;
}
.mc-wc__comp-name {
  font-weight: 600;
  color: var(--color-content-primary);
  min-width: 100px;
}
.mc-wc__comp-active {
  color: var(--color-content-secondary);
}
.mc-wc__comp-delta {
  margin-left: auto;
  font-weight: 600;
}
.mc-change--up .mc-wc__comp-delta { color: #22c55e; }
.mc-change--down .mc-wc__comp-delta { color: #ef4444; }
.mc-change--stable .mc-wc__comp-delta { color: var(--color-content-tertiary); }

/* What Changed: Follow-ups */
.mc-wc__followups-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-wc__followup {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--color-content-secondary);
}
.mc-wc__followup::before {
  content: '→ ';
  color: var(--color-interactive-primary, #812bdd);
  font-weight: 600;
}

/* P18: Creative Health */
.mc-health-badge {
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--color-interactive-primary, #812bdd);
}
.mc-health-signals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-signal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-tertiary);
}
.mc-signal__label { font-size: 12px; color: var(--color-content-primary); flex: 1; }
.mc-signal__score { font-size: 13px; font-weight: 700; min-width: 30px; text-align: right; }
.mc-signal--good .mc-signal__score { color: #22c55e; }
.mc-signal--warning .mc-signal__score { color: #f59e0b; }
.mc-signal--poor .mc-signal__score { color: #ef4444; }
.mc-signal__detail { font-size: 10px; color: var(--color-content-tertiary); }

/* P19: Self Benchmark */
.mc-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.mc-bench-card {
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-bench-card__label { font-size: 11px; color: var(--color-content-tertiary); }
.mc-bench-card__values { display: flex; align-items: baseline; gap: 6px; }
.mc-bench-card__current { font-size: 18px; font-weight: 700; color: var(--color-content-primary); }
.mc-bench-card__vs { font-size: 11px; color: var(--color-content-tertiary); }
.mc-bench-card__delta { font-size: 12px; font-weight: 500; }
.mc-bench--up .mc-bench-card__delta { color: #22c55e; }
.mc-bench--down .mc-bench-card__delta { color: #ef4444; }
.mc-bench--stable .mc-bench-card__delta { color: var(--color-content-tertiary); }

/* P21: Section error/retry and loading states */
.mc-section-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  font-size: 12px;
  color: var(--color-content-secondary);
}
.mc-retry-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border, #2a2a4a);
  background: transparent;
  color: var(--color-interactive-primary, #812bdd);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.mc-retry-btn:hover { background: var(--bg-tertiary); }
.mc-section-loading {
  padding: 12px;
  font-size: 12px;
  color: var(--color-content-tertiary);
}

/* P22: Responsive — KPI row */
@media (max-width: 768px) {
  .mc-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .mc-related-intel__grid { grid-template-columns: repeat(2, 1fr); }
  .mc-changes-grid { grid-template-columns: 1fr 1fr; }
  .mc-benchmark-grid { grid-template-columns: 1fr 1fr; }
  .metrics.metrics--4col { grid-template-columns: repeat(2, 1fr); }
  .metrics.metrics--2col { grid-template-columns: 1fr; }
  .mc-presence__cards { grid-template-columns: 1fr; }
  .cc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .mc-kpi-row { grid-template-columns: 1fr; }
  .mc-related-intel__grid { grid-template-columns: 1fr; }
  .mc-changes-grid { grid-template-columns: 1fr; }
  .mc-benchmark-grid { grid-template-columns: 1fr; }
  .metrics.metrics--4col { grid-template-columns: 1fr; }
  .cc-grid { grid-template-columns: 1fr; }
  .mc-section-block { padding: 12px 14px; }
  .ai-page-header__actions { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mc-timeline-label { display: none; }
  .cc-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
}

@media (max-width: 400px) {
  .mc-kpi-card { padding: 10px; }
  .mc-kpi-card__value { font-size: 18px; }
  .mc-section-block__header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
  .ds-modal__content { width: 100vw; max-width: 100vw; margin: 0; border-radius: 0; min-height: 100vh; }
  .ds-pagination__btn--prev span,
  .ds-pagination__btn--next span { display: none; }
  .ds-segmented { width: 100%; }
  .ds-segmented__option { flex: 1; text-align: center; }
  .ds-dropdown-menu { min-width: auto; width: calc(100vw - 32px); }
  .ds-chip { font-size: 11px; padding: 3px 8px; }
}

/* ── Empty States (Batch 2) ── */

.ads-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  max-width: 420px;
  margin: 0 auto;
}

.ads-empty-state__icon {
  color: var(--color-content-tertiary);
  margin-bottom: 16px;
}

.ads-empty-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.ads-empty-state__body {
  font-size: 13px;
  color: var(--color-content-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.ads-empty-state__actions {
  display: flex;
  gap: 8px;
}

.ads-empty-state__cta {
  font-size: 13px;
  padding: 8px 20px;
  text-decoration: none;
  display: inline-block;
}

.ads-empty-state__meta {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-top: 12px;
}

.ads-empty-state--warning .ads-empty-state__icon { color: var(--warning); }
.ads-empty-state--error .ads-empty-state__icon { color: var(--danger); }
.ads-empty-state--success .ads-empty-state__icon { color: var(--success); }
.ads-empty-state--info .ads-empty-state__icon { color: var(--info); }

/* ═══════════════════════════════════════════════════════════════
   ADS-SKELETON — Shared skeleton loader component (Batch 3)
   ═══════════════════════════════════════════════════════════════ */

@keyframes ads-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ads-skeleton {
  padding: var(--space-5) 0;
}

.ads-skeleton__row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ads-skeleton__block,
.ads-skeleton__line {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: ads-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.ads-skeleton__block--card {
  flex: 1;
  height: 80px;
  border-radius: var(--radius-sm);
}

.ads-skeleton__block--chart {
  width: 100%;
  height: 160px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
}

.ads-skeleton__block--table {
  width: 100%;
  height: 120px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
}

.ads-skeleton__block--media {
  flex: 1;
  height: 200px;
  border-radius: var(--radius-sm);
}

.ads-skeleton__block--list-item {
  width: 100%;
  height: 64px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
}

.ads-skeleton__line {
  height: 14px;
  margin-bottom: var(--space-3);
}

.ads-skeleton__line--full { width: 100%; }
.ads-skeleton__line--lg   { width: 80%; }
.ads-skeleton__line--md   { width: 60%; }
.ads-skeleton__line--sm   { width: 40%; }

/* Variant modifiers */
.ads-skeleton--metric .ads-skeleton__block--card { height: 72px; }
.ads-skeleton--grid .ads-skeleton__block--media  { height: 220px; }
.ads-skeleton--list .ads-skeleton__block--list-item:last-child { margin-bottom: 0; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ads-skeleton__block,
  .ads-skeleton__line {
    animation: none;
    opacity: 0.6;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ADS DESIGN SYSTEM — Canonical component classes (Batch 4)
   Canonical .ads-* classes for standardized component usage.
   These use existing design tokens and align with the ai-* system.
   ═══════════════════════════════════════════════════════════════ */

/* ── Card ── */

.ads-card {
  background: var(--color-background-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.ads-card:hover {
  border-color: var(--border-hover);
}

.ads-card--interactive:hover {
  border-color: var(--border-active);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.ads-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ads-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-primary);
}

.ads-card__subtitle {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-top: 2px;
}

.ads-card__body {
  flex: 1;
}

.ads-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.ads-metric-card {
  background: var(--color-background-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  text-align: center;
}

.ads-metric-card__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.2;
}

.ads-metric-card__label {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-top: var(--space-1);
}

/* ── Badge ── */

.ads-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.ads-badge--success { background: var(--success-bg); color: var(--success); }
.ads-badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.ads-badge--danger  { background: var(--danger-bg); color: var(--danger); }
.ads-badge--info    { background: var(--info-bg); color: var(--info-text); }
.ads-badge--neutral { background: var(--bg-tertiary); color: var(--color-content-tertiary); }
.ads-badge--accent  { background: var(--color-interactive-primary-ghost); color: var(--color-interactive-primary); }

/* ── Button (extends existing .btn system) ── */

.ads-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.ads-button--primary {
  background: var(--color-interactive-primary);
  color: var(--color-contrast);
  border-color: var(--color-interactive-primary);
}

.ads-button--primary:hover {
  background: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
}

.ads-button--secondary {
  background: var(--color-background-raised);
  color: var(--color-content-primary);
  border-color: var(--color-border-default);
}

.ads-button--secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.ads-button--ghost {
  background: transparent;
  color: var(--color-content-secondary);
  border-color: transparent;
}

.ads-button--ghost:hover {
  background: var(--bg-hover);
  color: var(--color-content-primary);
}

.ads-button--danger {
  background: var(--danger);
  color: var(--color-contrast);
  border-color: var(--danger);
}

.ads-button--disabled,
.ads-button:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* ── Table ── */

.ads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ads-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--color-content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
}

.ads-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-content-primary);
  vertical-align: middle;
}

.ads-table tr:hover td {
  background: var(--bg-hover);
}

.ads-table-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-content-tertiary);
  font-size: 13px;
}

/* ── Page Header ── */

.ads-page-header {
  margin-bottom: var(--space-5);
}

.ads-page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.3;
}

.ads-page-subtitle {
  font-size: 13px;
  color: var(--color-content-secondary);
  margin-top: var(--space-1);
}

.ads-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ── Status Chip ── */

.ads-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}

.ads-status-chip--active  { background: var(--success-bg); color: var(--success); }
.ads-status-chip--pending { background: var(--warning-bg); color: var(--warning-text); }
.ads-status-chip--error   { background: var(--danger-bg); color: var(--danger); }
.ads-status-chip--idle    { background: var(--bg-tertiary); color: var(--color-content-tertiary); }

/* ── Utility classes for inline style replacement ── */

.ads-text-center   { text-align: center; }
.ads-text-muted    { color: var(--color-content-tertiary); }
.ads-text-xs       { font-size: 11px; }
.ads-text-sm       { font-size: 13px; }
.ads-mt-4          { margin-top: var(--space-4); }
.ads-mt-3          { margin-top: var(--space-3); }
.ads-mb-2          { margin-top: var(--space-2); }
.ads-p-5           { padding: var(--space-5); }
.ads-gap-3         { gap: var(--space-3); }

/* ── Metric Card grid (replaces admin-card KPI inline grids) ── */

.ads-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ads-kpi-grid > .ads-metric-card {
  border: 1px solid var(--color-border-subtle);
}

/* ── Leaderboard / summary card row ── */

.ads-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ads-summary-row > .ads-metric-card {
  flex: 1 1 140px;
  border: 1px solid var(--color-border-subtle);
}

/* ── Section card (replaces admin-card + inline margin/padding) ── */

.ads-section-card {
  background: var(--color-background-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.ads-section-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin-bottom: var(--space-3);
}

.ads-section-card__subtitle {
  font-size: 11px;
  color: var(--color-content-tertiary);
  margin-bottom: var(--space-2);
}

.ads-section-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

/* ── Charts row ── */

.ads-charts-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  min-width: 0;
  max-width: 100%;
}

.ads-charts-row > .ads-section-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 240px;
  margin-bottom: 0;
}

/* ── Inline state replacements ── */

.ads-empty-state--error .ads-empty-state__title,
.ads-empty-state--gate .ads-empty-state__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin-bottom: var(--space-2);
}

.ads-empty-state--error .ads-empty-state__body,
.ads-empty-state--gate .ads-empty-state__body {
  font-size: 13px;
  color: var(--color-content-tertiary);
  margin-bottom: var(--space-4);
}

.ads-empty-state--centered {
  text-align: center;
  padding: var(--space-8) var(--space-5);
}

.ads-empty-state--gate {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--color-content-tertiary);
}

/* ── Filter bar (replaces inline flex for period/filter rows) ── */

.ads-filter-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

/* ── Channel card grid ── */

.ads-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* ── Warning banner ── */

.ads-warning-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--warning);
}

/* ── Pill profile link (Batch 5B drill-down) ── */

.cc-pill-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--color-content-tertiary);
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
  vertical-align: middle;
  margin-left: -2px;
  margin-right: 4px;
}

.cc-pill-profile-link:hover,
.cc-pill-profile-link:focus-visible {
  opacity: 1;
  color: var(--color-interactive-primary);
}

/* ── Breadcrumb (Batch 5B drill-down) ── */

.ads-breadcrumb {
  font-size: 12px;
  margin-bottom: var(--space-2);
  color: var(--color-content-tertiary);
}

.ads-breadcrumb__link {
  color: var(--color-interactive-primary);
  text-decoration: none;
}

.ads-breadcrumb__link:hover,
.ads-breadcrumb__link:focus-visible {
  text-decoration: underline;
}

.ads-breadcrumb__sep {
  margin: 0 4px;
  color: var(--text-quaternary);
}

/* ── Overview V2 ── */

.ov2-context-bar { position: relative; }
.ov2-context-bar__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Period segmented control */
.ov2-period-control { display: inline-flex; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm, 4px); overflow: hidden; }
.ov2-period-btn { padding: 5px 14px; border: none; background: var(--color-background-surface); color: var(--color-content-secondary); font-size: var(--text-xs, 11px); font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; border-right: 1px solid var(--color-border-subtle); }
.ov2-period-btn:last-child { border-right: none; }
.ov2-period-btn:hover { background: var(--color-background-raised); }
.ov2-period-btn:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: -2px; }
.ov2-period-btn.active { background: var(--color-interactive-primary); color: var(--color-background-surface); font-weight: 600; }

/* Freshness badge */
.ov2-freshness-badge { font-size: var(--text-xs, 11px); color: var(--color-content-tertiary); padding: 3px 8px; border-radius: var(--radius-sm, 4px); background: var(--color-background-raised); }
.ov2-freshness-badge--fresh { color: var(--success); }
.ov2-freshness-badge--stale { color: var(--warning); }
.ov2-freshness-badge--unknown { color: var(--text-quaternary); }

/* CTA link-button (replaces raw ads-link on CTAs) */
.ov2-cta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-sm, 4px); font-size: var(--text-xs, 11px); font-weight: 500; color: var(--color-interactive-primary); text-decoration: none; background: transparent; border: 1px solid var(--color-border-subtle); transition: background 0.15s, border-color 0.15s; cursor: pointer; white-space: nowrap; }
.ov2-cta:hover { background: var(--color-background-raised); border-color: var(--color-interactive-primary); }
.ov2-cta:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 1px; }

/* Section header layout */
.ads-section-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-2, 8px); flex-wrap: wrap; }

.ov2-block { margin-bottom: var(--space-5, 24px); }

/* Entity table */
.ov2-entity-table { width: 100%; font-size: var(--text-sm, 13px); border-collapse: collapse; }
.ov2-entity-table th { color: var(--color-content-tertiary); font-size: var(--text-xs, 11px); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 10px 12px; border-bottom: 2px solid var(--color-border-subtle); }
.ov2-entity-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.ov2-entity-table tbody tr:hover { background: var(--color-background-raised); }
.ov2-entity-row--own { background: var(--color-background-raised); }
.ov2-entity-row--own td { font-weight: 600; }
.ov2-entity-name { white-space: nowrap; }
.ov2-variation--up { color: var(--success, #22C55E); font-weight: 600; }
.ov2-variation--down { color: var(--danger, #EF4444); font-weight: 600; }
.ov2-variation--stable { color: var(--color-content-tertiary, #9ca3af); }

/* What Changed */
.ov2-wc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ov2-wc-kpi { text-align: center; padding: 16px 12px; border-radius: var(--radius-md, 8px); background: var(--color-background-raised); border: 1px solid var(--color-border-subtle); }
.ov2-wc-kpi__value { font-size: var(--text-2xl, 24px); font-weight: 700; }
.ov2-wc-kpi__label { font-size: var(--text-xs, 11px); color: var(--color-content-tertiary); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
.ov2-wc-kpi--up .ov2-wc-kpi__value { color: var(--success); }
.ov2-wc-kpi--down .ov2-wc-kpi__value { color: var(--warning); }

.ov2-wc-event-list { list-style: none; padding: 0; margin: 0; }
.ov2-wc-event { display: grid; grid-template-columns: 40px max-content minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm, 13px); }
.ov2-wc-event:last-child { border-bottom: none; }
.ov2-wc-event__score { display: flex; justify-content: flex-end; font-size: var(--text-sm, 13px); font-weight: 700; color: var(--color-content-secondary); }
.ov2-wc-event--high .ov2-wc-event__score { color: var(--danger); }
.ov2-wc-event--medium .ov2-wc-event__score { color: var(--warning); }
.ov2-wc-event__badge { display: flex; align-items: center; min-width: max-content; }
.ov2-wc-event__badge .source-badge { margin: 0; white-space: nowrap; }
.ov2-wc-event__text,
.ov2-wc-event__message { color: var(--color-content-primary); line-height: 1.45; min-width: 0; }

/* Finance */
.ov2-finance-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.ov2-finance-kpi { text-align: center; padding: 20px 14px; border-radius: var(--radius-md, 8px); background: var(--color-background-raised); border: 1px solid var(--color-border-subtle); }
.ov2-finance-kpi__value { font-size: var(--text-2xl, 24px); font-weight: 700; color: var(--color-content-primary); }
.ov2-finance-kpi__label { font-size: var(--text-xs, 11px); color: var(--color-content-tertiary); margin-top: 6px; cursor: default; }
.ov2-tooltip-icon { cursor: help; opacity: 0.6; font-style: normal; position: relative; display: inline-block; }
.ov2-tooltip-icon:hover { opacity: 1; }
.ov2-tooltip-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-overlay, #1e2330);
  color: var(--text-inverse, #f0f2f7);
  font-size: var(--text-xs, 11px);
  font-style: normal;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: normal;
  width: 220px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
}
.ov2-tooltip-icon[data-tooltip]:hover::after { opacity: 1; }
.ov2-finance-kpi__source { margin-top: 6px; }
.ov2-wc-kpi .source-badge { margin-top: 4px; }

/* Tabs (shared) */
.ov2-tab { padding: 6px 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm, 4px); background: var(--color-background-surface); color: var(--color-content-secondary); font-size: var(--text-sm, 13px); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.ov2-tab:hover { background: var(--color-background-raised); }
.ov2-tab:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 1px; }
.ov2-tab.active { background: var(--color-background-raised); border-color: var(--color-interactive-primary); color: var(--color-content-primary); font-weight: 600; }

/* Related Intelligence */
.ov2-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.ov2-related-card { display: flex; gap: 14px; padding: 18px 16px; border-radius: var(--radius-md, 8px); border: 1px solid var(--color-border-subtle); background: var(--color-background-surface); text-decoration: none; color: var(--color-content-primary); transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; }
.ov2-related-card:hover { border-color: var(--color-interactive-primary); box-shadow: 0 2px 12px var(--shadow-sm, rgba(0, 0, 0, 0.08)); transform: translateY(-1px); }
.ov2-related-card:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 1px; }
.ov2-related-card--disabled { opacity: 0.5; pointer-events: none; }
.ov2-related-card__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, 4px); background: var(--color-background-raised); color: var(--color-interactive-primary); }
.ov2-related-card__body { flex: 1; }
.ov2-related-card__title { font-weight: 600; font-size: var(--text-sm, 13px); }
.ov2-related-card__desc { font-size: var(--text-xs, 11px); color: var(--color-content-tertiary); margin-top: 4px; line-height: 1.4; }
.ov2-related-card__metric { font-size: var(--text-xs, 11px); color: var(--color-interactive-primary); margin-top: 8px; font-weight: 500; }

/* Creative Gallery */
.ov2-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 12px; }
.ov2-gallery-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); overflow: hidden; background: var(--color-background-surface); transition: border-color 0.15s, box-shadow 0.15s; }
.ov2-gallery-card:hover { border-color: var(--color-interactive-primary); box-shadow: 0 2px 8px var(--shadow-sm, rgba(0, 0, 0, 0.06)); }
.ov2-gallery-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-background-raised); display: flex; align-items: center; justify-content: center; }
.ov2-gallery-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ov2-gallery-card__placeholder { color: var(--text-quaternary); font-size: var(--text-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.ov2-gallery-card__body { padding: 12px 14px; }
.ov2-gallery-card__advertiser { font-size: var(--text-xs, 11px); font-weight: 600; color: var(--color-content-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.ov2-gallery-card__title { font-size: var(--text-sm, 13px); color: var(--color-content-primary); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov2-gallery-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: var(--text-xs, 11px); color: var(--color-content-tertiary); }
.ov2-gallery-card__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 10px; border-radius: var(--radius-sm, 4px); font-size: var(--text-xs, 11px); font-weight: 500; color: var(--color-interactive-primary); text-decoration: none; background: transparent; border: 1px solid var(--color-border-subtle); transition: background 0.15s, border-color 0.15s; }
.ov2-gallery-card__cta:hover { background: var(--color-background-raised); border-color: var(--color-interactive-primary); }
.ov2-gallery-card__cta:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 1px; }

/* ── Benchmark Filters (B3) ──────────────────────────────────── */
.benchmark-filters { margin-bottom: var(--space-6, 24px); display: flex; flex-direction: column; gap: 12px; }
.benchmark-filters__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Combobox */
.ai-combobox { position: relative; }
.ai-combobox__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border-subtle, var(--color-border-subtle));
  background: var(--color-background-surface, var(--color-background-primary));
  color: var(--color-content-primary, var(--color-text-primary));
  font-size: var(--text-sm, 13px); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-combobox__trigger:hover { border-color: var(--color-interactive-primary, var(--color-accent)); }
.ai-combobox__trigger:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 1px; }
.ai-combobox__trigger[aria-expanded="true"] { border-color: var(--color-interactive-primary, var(--color-accent)); box-shadow: 0 0 0 1px var(--color-interactive-primary, var(--color-accent)); }
.ai-combobox__chevron { transition: transform 0.15s; flex-shrink: 0; }
.ai-combobox__trigger[aria-expanded="true"] .ai-combobox__chevron { transform: rotate(180deg); }
.ai-combobox__panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  min-width: 220px; max-height: 280px; overflow-y: auto;
  background: var(--color-background-surface, var(--color-background-primary));
  border: 1px solid var(--color-border-subtle, var(--color-border-subtle));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
  padding: 4px 0;
}
.ai-combobox__panel[hidden] { display: none; }
.ai-combobox__search-wrap { padding: 6px 8px; border-bottom: 1px solid var(--color-border-subtle, var(--color-border-subtle)); }
.ai-combobox__search {
  width: 100%; padding: 5px 8px; border: 1px solid var(--color-border-subtle, var(--color-border-subtle));
  border-radius: var(--radius-sm, 4px); font-size: var(--text-sm, 13px);
  background: var(--color-background-raised, var(--color-background-secondary));
  color: var(--color-content-primary, var(--color-text-primary));
}
.ai-combobox__search:focus { outline: 2px solid var(--color-interactive-primary); outline-offset: -1px; border-color: var(--color-interactive-primary); }
.ai-combobox__list { padding: 2px 0; }
.ai-combobox__item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: var(--text-sm, 13px);
  color: var(--color-content-primary, var(--color-text-primary));
  transition: background 0.1s;
}
.ai-combobox__item:hover { background: var(--color-background-raised, var(--color-background-secondary)); }
.ai-combobox__item[hidden] { display: none; }
.ai-combobox__checkbox {
  width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
  border: 1.5px solid var(--color-border-subtle, var(--color-border-subtle));
  display: flex; align-items: center; justify-content: center;
  background: var(--color-background-surface, var(--color-background-primary));
  transition: background 0.1s, border-color 0.1s;
}
.ai-combobox__item[aria-selected="true"] .ai-combobox__checkbox {
  background: var(--color-interactive-primary, var(--color-accent));
  border-color: var(--color-interactive-primary, var(--color-accent));
}
.ai-combobox__item[aria-selected="true"] .ai-combobox__checkbox::after {
  content: ''; display: block; width: 8px; height: 5px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
}
.ai-combobox__count {
  margin-left: auto; font-size: var(--text-xs, 11px);
  color: var(--color-content-tertiary, var(--color-text-tertiary));
}
.ai-combobox__empty, .ai-combobox__error {
  padding: 12px; text-align: center; font-size: var(--text-sm, 13px);
  color: var(--color-content-tertiary, var(--color-text-tertiary));
}
.ai-combobox__error { color: var(--color-danger, var(--danger)); }

/* Period pills */
.benchmark-filters__period-label {
  font-size: var(--text-sm, 13px); font-weight: 500;
  color: var(--color-content-secondary, var(--color-text-secondary));
  white-space: nowrap;
}
.benchmark-filters__period-pills { display: flex; gap: 6px; }
.benchmark-period-btn {
  padding: 5px 12px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border-subtle, var(--color-border-subtle));
  background: var(--color-background-surface, var(--color-background-primary));
  color: var(--color-content-secondary, var(--color-text-secondary));
  font-size: var(--text-sm, 13px); font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.benchmark-period-btn:hover { border-color: var(--color-interactive-primary); color: var(--color-content-primary); }
.benchmark-period-btn:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 1px; }
.benchmark-period-btn--active {
  background: var(--bg-tertiary, var(--color-background-tertiary));
  color: var(--color-content-primary, var(--color-text-primary));
  font-weight: 600; border-color: var(--color-interactive-primary, var(--color-accent));
}

/* Date inputs */
.benchmark-filters__date-sep {
  color: var(--text-quaternary, var(--color-text-quaternary));
  font-size: var(--text-sm, 13px); margin: 0 4px;
}
.benchmark-filters__date-range { display: flex; align-items: center; gap: 6px; }
.benchmark-filters__date-label {
  font-size: var(--text-sm, 13px); font-weight: 500;
  color: var(--color-content-secondary, var(--color-text-secondary));
  white-space: nowrap;
}
.benchmark-filters__date-arrow {
  color: var(--text-quaternary, var(--color-text-quaternary));
  font-size: var(--text-sm, 13px);
}
.benchmark-date-input {
  padding: 5px 8px; border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border-subtle, var(--color-border-subtle));
  background: var(--color-background-surface, var(--color-background-primary));
  color: var(--color-content-primary, var(--color-text-primary));
  font-size: var(--text-sm, 13px); font-family: inherit;
}
.benchmark-date-input:focus { outline: 2px solid var(--color-interactive-primary); outline-offset: -1px; border-color: var(--color-interactive-primary); }
.benchmark-filters__date-error { color: var(--color-danger, #ef4444); font-size: var(--text-xs, 11px); margin-top: 4px; }

/* Responsive */
@media (max-width: 768px) {
  .benchmark-filters__row { flex-direction: column; align-items: stretch; }
  .ai-combobox { width: 100%; }
  .ai-combobox__trigger { width: 100%; justify-content: space-between; }
  .ai-combobox__panel { width: 100%; }
  .benchmark-filters__date-range { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   T9C — Mobile Navigation Drawer
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden by default (desktop) */
.t-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  color: var(--color-content-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.t-hamburger:hover {
  color: var(--color-content-primary);
  background: var(--bg-hover);
}
.t-hamburger svg {
  width: 18px;
  height: 18px;
}

/* Mobile drawer */
.t-mobile-drawer {
  position: fixed;
  top: var(--header-h, 56px);
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--color-background-surface);
  z-index: 850;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  border-right: 1px solid var(--color-border-subtle);
}
.t-mobile-drawer.open {
  transform: translateX(0);
}

/* Drawer backdrop */
.t-mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 840;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.t-mobile-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Body scroll lock when drawer is open */
body.drawer-open {
  overflow: hidden;
}

/* Close button inside drawer */
.t-mobile-drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-content-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-mobile-drawer-close:hover {
  color: var(--color-content-primary);
}
.t-mobile-drawer-close svg {
  width: 18px;
  height: 18px;
}

/* Drawer nav inherits sidebar styling */
.t-mobile-drawer-nav {
  padding: 44px 0 16px 0;
}
.t-mobile-drawer-nav .s-section { padding: 4px 12px; }
.t-mobile-drawer-nav .s-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-content-tertiary);
  padding: 8px 12px 4px;
}
.t-mobile-drawer-nav .s-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-content-secondary);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
.t-mobile-drawer-nav .s-item:hover {
  background: var(--bg-hover);
  color: var(--color-content-primary);
}
.t-mobile-drawer-nav .s-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Mobile: show hamburger, hide desktop sidebar */
@media (max-width: 768px) {
  .t-hamburger { display: flex; }
}

/* Desktop: force-hide mobile-only elements */
@media (min-width: 769px) {
  .t-hamburger { display: none !important; }
  .t-mobile-drawer { display: none !important; }
  .t-mobile-drawer-backdrop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Creative Library O1.3 Scaffold
   ═══════════════════════════════════════════════════════════════ */

.cl-page { max-width: 1440px; margin: 0 auto; }

/* Header */
.cl-header { margin-bottom: 20px; }
.cl-title { font-size: 22px; font-weight: 700; color: var(--color-content-primary); }
.cl-description { font-size: 13px; color: var(--color-content-secondary); margin-top: 4px; }
.cl-actions { display: flex; gap: 8px; align-items: center; }
.cl-export-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cl-export-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Filter card */
.cl-filter-card { padding: 16px 20px; margin-bottom: 20px; }
.cl-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cl-filter-row + .cl-filter-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-subtle); }

/* Filter group */
.cl-filter-group { display: flex; align-items: center; gap: 6px; }
.cl-filter-group__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-quaternary); white-space: nowrap; }
.cl-filter-group--dates { gap: 12px; }

/* Pill selectors */
.cl-period-pills { display: flex; gap: 4px; }
.cl-pill { padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid var(--color-border-default); background: transparent; color: var(--color-content-secondary); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.cl-pill:hover { color: var(--color-content-primary); border-color: var(--border-hover); }
.cl-pill--active { background: var(--bg-tertiary); color: var(--color-content-primary); font-weight: 600; border-color: var(--border-active); }

/* Multi-select dropdown */
.cl-ms { position: relative; }
.cl-ms-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid var(--color-border-default); background: transparent; color: var(--color-content-secondary); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.cl-ms-trigger:hover { color: var(--color-content-primary); border-color: var(--border-hover); }
.cl-ms-trigger__arrow { flex-shrink: 0; opacity: 0.5; }
.cl-ms-trigger[aria-expanded="true"] { border-color: var(--border-active); color: var(--color-content-primary); }
.cl-ms-trigger[aria-expanded="true"] .cl-ms-trigger__arrow { transform: rotate(180deg); }

.cl-ms-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 200px; max-height: 240px; overflow-y: auto; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm, 8px); box-shadow: var(--shadow-md); padding: 4px 0; }

.cl-ms-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: var(--color-content-secondary); cursor: pointer; transition: background 0.1s; }
.cl-ms-item:hover { background: var(--bg-hover); }
.cl-ms-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-interactive-primary); cursor: pointer; flex-shrink: 0; }
.cl-ms-item--checked { color: var(--color-content-primary); font-weight: 500; }
.cl-ms-item__label { flex: 1; }

.cl-ms-empty { padding: 12px; font-size: 11px; color: var(--text-quaternary); text-align: center; }

/* Date inputs */
.cl-date-group { display: flex; align-items: center; gap: 6px; }
.cl-date-input { padding: 4px 8px; border-radius: 6px; font-size: 11px; border: 1px solid var(--color-border-default); background: var(--color-background-surface); color: var(--color-content-primary); transition: border-color 0.15s; }
.cl-date-input:focus { border-color: var(--color-interactive-primary); outline: none; }

/* Section container */
.cl-section { margin-top: 16px; }

/* Top longevity strip (C4) */
.cl-top-section { margin-bottom: 20px; }
.cl-top-section__header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cl-top-section__title { font-size: 15px; font-weight: 600; color: var(--color-content-primary); margin: 0; }
.cl-top-section__note { font-size: 11px; color: var(--text-quaternary); margin-top: 6px; font-style: italic; }
.cl-info-tooltip { display: inline-flex; align-items: center; color: var(--text-quaternary); cursor: help; }
.cl-info-tooltip:hover { color: var(--color-content-secondary); }
.cl-top-strip-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.cl-top-strip-scroll::-webkit-scrollbar { height: 4px; }
.cl-top-strip-scroll::-webkit-scrollbar-track { background: transparent; }
.cl-top-strip-scroll::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 4px; }
.cl-top-strip-empty { font-size: 12px; color: var(--color-content-tertiary); padding: 16px 0; font-style: italic; }
.cl-top-card { flex: 0 0 180px; width: 180px; border-radius: 8px; border: 1px solid var(--color-border-subtle); background: var(--color-background-surface); overflow: hidden; transition: border-color 0.15s; }
.cl-top-card:hover { border-color: var(--border-hover); }
.cl-top-card--skeleton { pointer-events: none; }
.cl-top-card__thumb { position: relative; width: 100%; height: 100px; overflow: hidden; background: var(--bg-tertiary); }
.cl-top-card__img { width: 100%; height: 100%; object-fit: cover; }
.cl-top-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 10px; color: var(--text-quaternary); }
.cl-top-card__placeholder--video { background: var(--bg-quaternary, var(--bg-tertiary)); }
.cl-top-card__rank { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--color-interactive-primary); color: var(--text-inverse, white); }
.cl-top-card__body { padding: 8px 10px; }
.cl-top-card__advertiser { font-size: 11px; font-weight: 600; color: var(--color-content-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-top-card__copy { font-size: 10px; color: var(--color-content-secondary); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 26px; }
.cl-top-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 10px; color: var(--color-content-tertiary); }
.cl-top-card__source { text-transform: capitalize; }
.cl-top-card__format { text-transform: capitalize; }
.cl-top-card__longevity { font-weight: 600; color: var(--color-content-secondary); margin-left: auto; }
.cl-top-card__skel-line { height: 10px; border-radius: 4px; background: var(--bg-tertiary); margin-bottom: 6px; }
.cl-top-card__skel-line--short { width: 60%; }

/* Grid header */
.cl-grid-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.cl-grid-header__left { display: flex; align-items: center; gap: 8px; }
.cl-grid-header__title { font-size: 15px; font-weight: 600; color: var(--color-content-primary); margin: 0; }
.cl-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--bg-tertiary); color: var(--color-content-secondary); }
.cl-grid-header__right { display: flex; align-items: center; gap: 8px; }
.cl-sort-select { padding: 4px 8px; border-radius: 6px; font-size: 11px; border: 1px solid var(--color-border-default); background: var(--color-background-surface); color: var(--color-content-primary); cursor: pointer; }
.cl-sort-select:focus { border-color: var(--color-interactive-primary); outline: none; }
.cl-sort-select[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Filter coverage note */
.cl-filter-coverage-note { width: 100%; font-size: 11px; color: var(--text-quaternary); margin-top: 6px; font-style: italic; }

/* View toggle */
.cl-view-toggle { display: flex; gap: 2px; border: 1px solid var(--color-border-default); border-radius: 6px; overflow: hidden; }
.cl-view-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; color: var(--text-quaternary); cursor: pointer; transition: all 0.15s; }
.cl-view-btn:hover:not([disabled]) { color: var(--color-content-primary); background: var(--bg-hover); }
.cl-view-btn--active { color: var(--color-content-primary); background: var(--bg-tertiary); }
.cl-view-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Creative grid */
.cl-grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Creative card */
.cl-card { background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm, 8px); overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; cursor: pointer; }
.cl-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }

/* Card thumbnail */
.cl-card__thumb { position: relative; width: 100%; height: 140px; overflow: hidden; background: var(--bg-tertiary); }
.cl-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: var(--text-quaternary); text-align: center; padding: 8px; }
.cl-card__placeholder--video { background: var(--bg-quaternary, var(--bg-tertiary)); }

/* Card overlay (hover) */
.cl-card__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s; }
.cl-card:hover .cl-card__overlay { opacity: 1; }
.cl-card__detail-btn { padding: 6px 14px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-inverse, white); background: var(--color-interactive-primary); border: none; cursor: pointer; pointer-events: auto; }

/* Card badges */
.cl-card__badge { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 100px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.cl-card__badge--own { background: var(--color-interactive-primary); color: var(--text-inverse, white); }
.cl-card__badge--competitor { background: var(--bg-warning, orange); color: var(--text-inverse, white); }

/* Card body */
.cl-card__body { padding: 10px 12px; }
.cl-card__advertiser { font-size: 12px; font-weight: 600; color: var(--color-content-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-card__copy { font-size: 11px; color: var(--color-content-secondary); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 30px; }

/* Card meta row */
.cl-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cl-card__format { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px; background: var(--bg-tertiary); color: var(--color-content-secondary); }
.cl-card__source { font-size: 10px; color: var(--text-quaternary); }
.cl-card__status { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cl-card__status--active { background: var(--success, #22c55e); }
.cl-card__status--inactive { background: var(--text-quaternary); }
.cl-card__longevity { font-size: 10px; color: var(--text-quaternary); margin-left: auto; }

/* Pagination */
.cl-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 12px 0; border-top: 1px solid var(--color-border-subtle); flex-wrap: wrap; gap: 8px; }
.cl-pagination__info { font-size: 12px; color: var(--color-content-secondary); }
.cl-pagination__controls { display: flex; align-items: center; gap: 4px; }
.cl-pagination__btn { padding: 4px 10px; border-radius: 6px; font-size: 11px; border: 1px solid var(--color-border-default); background: var(--color-background-surface); color: var(--color-content-secondary); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.cl-pagination__btn:hover:not([disabled]):not(.cl-pagination__btn--active) { color: var(--color-content-primary); border-color: var(--border-hover); }
.cl-pagination__btn--active { background: var(--color-interactive-primary); color: var(--text-inverse, white); border-color: var(--color-interactive-primary); font-weight: 600; }
.cl-pagination__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.cl-pagination__ellipsis { font-size: 11px; color: var(--text-quaternary); padding: 0 4px; }

/* Strip skeleton (top performers placeholder) */
.cl-strip-skeleton { margin-bottom: 24px; }
.cl-strip-skeleton__title { width: 200px; height: 14px; background: var(--bg-tertiary); border-radius: 4px; margin-bottom: 12px; animation: cl-shimmer 1.5s ease-in-out infinite; }
.cl-strip-skeleton__cards { display: flex; gap: 12px; overflow: hidden; }

/* Card skeleton */
.cl-card-skeleton { width: 180px; min-width: 180px; height: 140px; background: var(--bg-tertiary); border-radius: var(--radius-sm, 8px); animation: cl-shimmer 1.5s ease-in-out infinite; }
.cl-card-skeleton--grid { width: auto; min-width: 0; height: 220px; }

/* Grid skeleton */
.cl-grid-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Empty state integration */
.cl-section .ads-empty-state { padding: 60px 20px; text-align: center; }

/* Retry button */
.cl-retry-btn { margin-top: 16px; }

/* Shimmer animation */
@keyframes cl-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.25; }
}

/* C5A+C5B — Creative Detail Modal (polished) */
body.cl-modal-open { overflow: hidden; }
.cl-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); }
.cl-modal-backdrop[hidden] { display: none; }
.cl-modal { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 90vw; max-width: 1100px; max-height: 85vh; border-radius: 12px; background: var(--color-background-surface); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
.cl-modal-close-wrap { position: absolute; top: 12px; right: 12px; z-index: 2; }
.cl-modal-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: var(--text-on-dark, rgba(255, 255, 255, 1)); font-size: 22px; cursor: pointer; transition: background 0.15s; }
.cl-modal-close:hover { background: rgba(0, 0, 0, 0.6); }
.cl-modal-close:focus-visible { outline: 2px solid var(--color-interactive-primary); outline-offset: 2px; }
.cl-modal-preview { position: relative; display: flex; align-items: center; justify-content: center; background: var(--color-background-raised); min-height: 300px; overflow: hidden; }
.cl-modal-media { max-width: 100%; max-height: 70vh; object-fit: contain; }
.cl-modal-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; color: var(--text-quaternary); font-size: 13px; }
.cl-modal-placeholder--video { background: var(--bg-tertiary); }
.cl-modal-info { display: flex; flex-direction: column; overflow-y: auto; max-height: 85vh; padding: 24px; }
.cl-modal-header { margin-bottom: 16px; }
.cl-modal-advertiser { font-size: 18px; font-weight: 700; color: var(--color-content-primary); margin-bottom: 8px; }
.cl-modal-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--color-content-secondary); }
.cl-modal-source, .cl-modal-channel, .cl-modal-format { padding: 2px 8px; border-radius: 4px; background: var(--bg-tertiary); }
.cl-modal-status { padding: 2px 8px; border-radius: 4px; }
.cl-modal-status--active { background: var(--success-subtle, #e6f4ea); color: var(--success, #1e7e34); }
.cl-modal-status--inactive { background: var(--bg-tertiary); color: var(--color-content-tertiary); }
.cl-modal-body { flex: 1; }
.cl-modal-section { margin-bottom: 16px; }
.cl-modal-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-content-tertiary); margin-bottom: 6px; }
.cl-modal-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--color-content-secondary); }
/* Copy box with toggle (C5B) */
.cl-copy-box { font-size: 13px; color: var(--color-content-primary); line-height: 1.5; margin-bottom: 4px; padding: 8px 12px; border-radius: 6px; background: var(--color-background-raised); word-break: break-word; }
.cl-copy-box--clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cl-copy-box--expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cl-copy-box--empty { color: var(--text-quaternary); font-style: italic; }
.cl-copy-toggle { display: inline-block; margin-top: 4px; padding: 0; border: none; background: none; color: var(--color-interactive-primary); font-size: 12px; cursor: pointer; }
.cl-copy-toggle:hover { text-decoration: underline; }
/* Destination (C5B) */
.cl-destination-url { display: block; font-size: 12px; color: var(--color-interactive-primary); word-break: break-all; text-decoration: none; }
.cl-destination-url:hover { text-decoration: underline; }
.cl-destination-empty { font-size: 12px; color: var(--text-quaternary); font-style: italic; }
/* Period (C5B) */
.cl-modal-period { display: flex; flex-direction: column; gap: 6px; }
.cl-modal-period__item { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-content-secondary); }
.cl-modal-period__label { color: var(--color-content-tertiary); }
.cl-modal-period__value { font-weight: 500; color: var(--color-content-primary); }
.cl-modal-period__bar { height: 4px; border-radius: 2px; background: var(--bg-tertiary); margin-top: 4px; overflow: hidden; }
.cl-modal-period__bar-fill { height: 100%; border-radius: 2px; background: var(--color-interactive-primary); }
/* Variations (C5B) */
.cl-modal-variations { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-modal-variation { width: 72px; text-align: center; }
.cl-modal-variation__img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--bg-tertiary); }
.cl-modal-variation__placeholder { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bg-tertiary); font-size: 10px; color: var(--text-quaternary); }
.cl-modal-variation__format { display: block; font-size: 10px; color: var(--color-content-tertiary); margin-top: 2px; }
/* Carousel (C5B) */
.cl-carousel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cl-carousel__viewport { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-height: 200px; }
.cl-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: var(--text-on-dark, rgba(255, 255, 255, 1)); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.cl-carousel__arrow:hover { background: rgba(0, 0, 0, 0.6); }
.cl-carousel__arrow--prev { left: 8px; }
.cl-carousel__arrow--next { right: 8px; }
.cl-carousel__dots { display: flex; gap: 6px; padding: 8px 0; }
.cl-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-quaternary); cursor: pointer; transition: background 0.15s; }
.cl-carousel__dot--active { background: var(--color-interactive-primary); }
/* Footer sticky (C5B) */
.cl-modal-footer { display: flex; gap: 8px; padding: 12px 0 0; margin-top: auto; border-top: 1px solid var(--color-border-subtle); position: sticky; bottom: 0; background: var(--color-background-surface); z-index: 1; }
.cl-modal-action { padding: 8px 16px; border: 1px solid var(--color-border-subtle); border-radius: 6px; background: var(--color-background-surface); color: var(--color-content-tertiary); font-size: 13px; cursor: not-allowed; opacity: 0.5; }
.cl-modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; grid-column: 1 / -1; min-height: 300px; }
.cl-modal-loading__spinner { font-size: 14px; color: var(--color-content-tertiary); }
.cl-modal-error { display: flex; flex-direction: column; align-items: center; justify-content: center; grid-column: 1 / -1; min-height: 300px; }
.cl-modal-error__msg { font-size: 14px; color: var(--color-content-tertiary); margin-top: 16px; }
.cl-top-card { cursor: pointer; }

/* C6A — Export Dropdown */
.cl-export-wrap { position: relative; display: inline-block; }
.cl-export-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; min-width: 180px; padding: 4px 0; border-radius: 8px; background: var(--color-background-surface); border: 1px solid var(--color-border-subtle); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); z-index: 50; }
.cl-export-menu[hidden] { display: none; }
.cl-export-option { display: block; width: 100%; padding: 8px 14px; border: none; background: none; text-align: left; font-size: 13px; color: var(--color-content-primary); cursor: pointer; }
.cl-export-option:hover { background: var(--color-background-raised); }
.cl-export-option--disabled { color: var(--text-quaternary); cursor: not-allowed; }
.cl-export-option--disabled:hover { background: none; }
.cl-export-note { padding: 6px 14px; font-size: 11px; color: var(--text-quaternary); border-top: 1px solid var(--color-border-subtle); margin-top: 4px; line-height: 1.4; }
.cl-export-option--loading { color: var(--text-quaternary); cursor: wait; }
.cl-export-error { position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; padding: 8px 12px; border-radius: 6px; background: var(--bg-danger, #fef2f2); color: var(--text-danger, #b91c1c); font-size: 12px; line-height: 1.4; border: 1px solid var(--border-danger, #fecaca); z-index: 51; white-space: nowrap; }

/* Responsive */
@media (max-width: 1024px) {
  .cl-grid-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cl-filter-row { gap: 8px; }
  .cl-grid-skeleton { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .cl-grid-cards { grid-template-columns: repeat(2, 1fr); }
  .cl-pagination { flex-direction: column; align-items: flex-start; }
  .cl-modal { grid-template-columns: 1fr; width: 100vw; max-width: 100vw; height: 95vh; max-height: 95vh; border-radius: 16px 16px 0 0; align-self: flex-end; }
  .cl-modal-preview { max-height: 40vh; }
  .cl-modal-info { max-height: 55vh; padding: 16px; }
  .cl-modal-footer { padding: 8px 0 0; }
  .cl-carousel__arrow { width: 28px; height: 28px; font-size: 16px; }
  .cl-modal-period__item { font-size: 12px; }
  .cl-modal-variation { width: 56px; }
  .cl-modal-variation__img { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
  .cl-grid-skeleton { grid-template-columns: 1fr; }
  .cl-strip-skeleton__cards { gap: 8px; }
  .cl-card-skeleton { width: 150px; min-width: 150px; height: 120px; }
  .cl-grid-cards { grid-template-columns: 1fr; }
  .cl-card__thumb { height: 120px; }
}

/* ── Alert Rules Slide-over ─────────────────────────────────── */
.ar-slideover-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 900;
  opacity: 0; transition: opacity 0.2s;
}
.ar-slideover-overlay[hidden] { display: none; }
.ar-slideover-overlay.is-open { opacity: 1; }

.ar-slideover {
  position: fixed; top: 0; right: 0;
  width: 480px; max-width: 100vw; height: 100vh;
  background: var(--color-background-raised);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
  z-index: 910;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ar-slideover.is-open { transform: translateX(0); }

.ar-slideover__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0;
}
.ar-slideover__eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-interactive-primary); margin-bottom: 4px;
}
.ar-slideover__title {
  font-size: 16px; font-weight: 700; color: var(--color-content-primary);
  margin: 0; line-height: 1.3; word-break: break-word;
}
.ar-slideover__close {
  background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--color-content-tertiary);
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.ar-slideover__close:hover { background: var(--bg-tertiary); color: var(--color-content-primary); }

.ar-slideover__body {
  flex: 1; overflow-y: auto; padding: 20px 24px 24px;
}

.ar-slideover__footer {
  padding: 16px 24px; border-top: 1px solid var(--color-border-subtle);
  display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}

/* KPI row inside slide-over */
.ar-so-kpis {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 20px;
}
.ar-so-kpi {
  background: var(--bg-tertiary); border-radius: var(--radius-sm);
  padding: 12px; text-align: center;
}
.ar-so-kpi__value { font-size: 20px; font-weight: 700; color: var(--color-content-primary); }
.ar-so-kpi__label { font-size: 11px; color: var(--color-content-tertiary); margin-top: 2px; }

/* Match card */
.ar-so-match {
  background: var(--color-background-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px;
}
.ar-so-match__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ar-so-match__competitor { font-size: 13px; font-weight: 600; color: var(--color-content-primary); }
.ar-so-match__provider {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 20px; background: var(--bg-tertiary); color: var(--color-content-secondary);
}
.ar-so-match__reason { font-size: 12px; color: var(--color-content-secondary); margin-bottom: 6px; }
.ar-so-match__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ar-so-chip {
  font-size: 10px; font-weight: 500; padding: 2px 8px;
  border-radius: 20px; background: var(--accent-lime-bg, rgba(200, 240, 74, 0.1));
  color: var(--color-content-secondary);
}
.ar-so-chip--confidence { background: rgba(99, 102, 241, 0.1); color: var(--color-interactive-primary); }

/* PPC disclaimer */
.ar-so-ppc-disclaimer {
  font-size: 11px; color: var(--warning);
  padding: 6px 10px; margin-top: 6px;
  background: rgba(234, 179, 8, 0.06); border: 1px solid rgba(234, 179, 8, 0.15);
  border-radius: var(--radius-sm);
}

/* Zero / error states */
.ar-so-empty { text-align: center; padding: 32px 16px; color: var(--color-content-tertiary); }
.ar-so-empty__title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--color-content-secondary); }
.ar-so-empty__desc { font-size: 12px; margin-bottom: 16px; }
.ar-so-error { text-align: center; padding: 32px 16px; }
.ar-so-error__msg { font-size: 13px; color: var(--danger); font-weight: 600; margin-bottom: 12px; }

/* Skeleton */
.ar-so-skeleton { animation: ar-pulse 1.5s infinite ease-in-out; }
.ar-so-skeleton-bar {
  background: var(--bg-tertiary); border-radius: 4px;
  height: 14px; margin-bottom: 10px;
}
.ar-so-skeleton-bar--lg { height: 48px; }
@keyframes ar-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Truncation note */
.ar-so-truncation { font-size: 11px; color: var(--color-content-tertiary); text-align: center; padding: 8px; }

/* Toast */
.ar-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--success); color: #fff; padding: 10px 24px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  z-index: 950; opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.ar-toast.is-visible { opacity: 1; }

@media (max-width: 640px) {
  .ar-slideover { width: 100vw; }
  .ar-so-kpis { grid-template-columns: 1fr; }
  .ar-modal { width: calc(100vw - 32px); max-height: 90vh; }
  .ar-type-grid { grid-template-columns: 1fr; }
  .ar-form__group--row { flex-direction: column; }
  .ar-stats-row { grid-template-columns: 1fr; }
  .ar-rules-table th:nth-child(4),
  .ar-rules-table td:nth-child(4) { display: none; }
}

/* ── Alert Rules Stats Row ────────────────────────────────────── */
.ar-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.ar-stat-card {
  background: var(--color-background-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px); padding: 16px; text-align: center;
}
.ar-stat-card__value {
  font-size: 28px; font-weight: 700; color: var(--color-content-primary);
  line-height: 1;
}
.ar-stat-card__label {
  font-size: 11px; color: var(--color-content-tertiary); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ar-stat-card--success .ar-stat-card__value { color: var(--success); }
.ar-stat-card--warning .ar-stat-card__value { color: var(--warning); }

/* ── Alert Rules Table Polish ─────────────────────────────────── */
.ar-rules-table { width: 100%; }
.ar-rules-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-content-tertiary); font-weight: 600;
}
.ar-rules-table td { vertical-align: middle; }
.ar-rule-name { font-size: 13px; font-weight: 600; color: var(--color-content-primary); }
.ar-rule-summary { font-size: 11px; color: var(--color-content-tertiary); margin-top: 2px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-type-tag {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 20px; background: var(--bg-tertiary); color: var(--color-content-secondary);
  white-space: nowrap;
}
.ar-badge {
  font-size: 11px; font-weight: 600; padding: 2px 10px;
  border-radius: 20px; display: inline-block;
}
.ar-badge--draft { background: rgba(234, 179, 8, 0.1); color: var(--warning); }
.ar-badge--active { background: rgba(34, 197, 94, 0.1); color: var(--success); }
.ar-badge--disabled { background: var(--bg-tertiary); color: var(--color-content-tertiary); }
.ar-actions-cell {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.ai-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Alert Rules Empty State ──────────────────────────────────── */
.ar-empty-state {
  text-align: center; padding: 48px 24px; color: var(--color-content-tertiary);
}
.ar-empty-state__icon {
  margin-bottom: 16px; color: var(--color-content-tertiary); opacity: 0.5;
}
.ar-empty-state__title {
  font-size: 16px; font-weight: 600; color: var(--color-content-secondary); margin-bottom: 8px;
}
.ar-empty-state__desc {
  font-size: 13px; color: var(--color-content-tertiary); margin-bottom: 20px;
}

/* ── Alert Rules Modal ────────────────────────────────────────── */
.ar-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 920;
  opacity: 0; transition: opacity 0.2s;
}
.ar-modal-overlay[hidden] { display: none; }
.ar-modal-overlay.is-open { opacity: 1; }

.ar-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 560px; max-width: calc(100vw - 32px);
  max-height: 85vh;
  background: var(--color-background-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 930;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.ar-modal[hidden] { display: none; }
.ar-modal.is-open {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.ar-modal--sm { width: 420px; }

.ar-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ar-modal__title {
  font-size: 16px; font-weight: 700; color: var(--color-content-primary); margin: 0;
}
.ar-modal__close {
  background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--color-content-tertiary);
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.ar-modal__close:hover { background: var(--bg-tertiary); color: var(--color-content-primary); }

.ar-modal__body {
  flex: 1; overflow-y: auto; padding: 20px 24px;
}
.ar-modal__footer {
  padding: 16px 24px; border-top: 1px solid var(--color-border-subtle);
  display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}

/* ── Type Selection Grid (Step 1) ─────────────────────────────── */
.ar-type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ar-type-card {
  background: var(--color-background-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px); padding: 16px; cursor: pointer;
  text-align: center; transition: border-color 0.15s, box-shadow 0.15s;
}
.ar-type-card:hover {
  border-color: var(--color-interactive-primary); box-shadow: 0 0 0 1px var(--color-interactive-primary);
}
.ar-type-card__icon {
  margin-bottom: 8px; color: var(--color-interactive-primary);
}
.ar-type-card__name {
  font-size: 13px; font-weight: 600; color: var(--color-content-primary); margin-bottom: 4px;
}
.ar-type-card__desc {
  font-size: 11px; color: var(--color-content-tertiary); line-height: 1.4;
}

/* ── Form (Step 2) ────────────────────────────────────────────── */
.ar-form__group { margin-bottom: 14px; }
.ar-form__group--row { display: flex; gap: 14px; }
.ar-form__label {
  display: block; font-size: 11px; font-weight: 600; color: var(--color-content-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.ar-form__hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ar-form__input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: var(--color-background-surface); color: var(--color-content-primary);
  box-sizing: border-box;
}
.ar-form__input:focus {
  outline: none; border-color: var(--color-interactive-primary); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.ar-form__static {
  font-size: 13px; font-weight: 600; color: var(--color-content-secondary);
  padding: 8px 12px; background: var(--bg-tertiary); border-radius: 6px;
}
.ar-form__feedback {
  font-size: 12px; padding: 8px 12px; border-radius: 6px;
  background: rgba(239, 68, 68, 0.06);
}
.ar-form__checkboxes {
  display: flex; flex-direction: column; gap: 8px;
}
.ar-form__checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-content-secondary); cursor: pointer;
}
.ar-form__checkbox input[type="checkbox"] {
  accent-color: var(--primary, #6366f1); width: 16px; height: 16px;
}
.ar-form__disclaimer {
  font-size: 11px; color: var(--color-content-tertiary);
  padding: 8px 12px; margin-top: 4px;
  background: rgba(234, 179, 8, 0.06); border: 1px solid rgba(234, 179, 8, 0.15);
  border-radius: 6px;
}

/* ── Alert Rules buttons ─────────────────────────────────────── */
.ai-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 600; border: none; cursor: pointer;
  border-radius: 6px; transition: background 0.15s, opacity 0.15s;
  color: var(--color-content-primary); background: var(--bg-tertiary);
}
.ai-btn:hover { opacity: 0.85; }
.ai-btn:focus-visible {
  outline: 2px solid var(--primary, #6366f1); outline-offset: 2px;
}
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-btn--sm { font-size: 13px; padding: 6px 14px; }
.ai-btn--xs { font-size: 12px; padding: 4px 10px; }
.ai-btn--primary {
  background: var(--primary, #6366f1); color: #fff;
}
.ai-btn--primary:hover { background: var(--primary-hover, #4f46e5); opacity: 1; }
.ai-btn--secondary {
  background: transparent; color: var(--color-interactive-primary, #6366f1);
  border: 1.5px solid var(--color-interactive-primary, #6366f1);
}
.ai-btn--secondary:hover { background: var(--color-interactive-primary-subtle, rgba(99,102,241,0.08)); opacity: 1; }
.ai-btn--danger {
  background: rgba(239, 68, 68, 0.1); color: var(--danger, #ef4444);
}
.ai-btn--danger:hover { background: rgba(239,68,68,0.2); opacity: 1; }
.ai-btn--ghost {
  background: transparent; color: var(--color-content-secondary);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.ai-btn--ghost:hover { background: var(--bg-tertiary); opacity: 1; }

/* ── Alert Rules competitor selector ─────────────────────────── */
.ar-comp-chips {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px;
}
.ar-comp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;
  background: var(--primary, #6366f1); color: #fff;
}
.ar-comp-chip__remove {
  background: none; border: none; color: rgba(255, 255, 255, 0.7); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; font-weight: 700;
}
.ar-comp-chip__remove:hover { color: #fff; }
.ar-comp-dropdown { margin-top: 6px; }
.ar-comp-dropdown__note {
  font-size: 12px; color: var(--color-content-tertiary); padding: 4px 0;
}
.ar-comp-select { max-width: 100%; }
.ar-comp-empty {
  font-size: 12px; color: var(--color-content-tertiary); padding: 8px 0;
}

/* ── Executive Report (er-*) ─────────────────────────────── */

.er-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.er-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Period pills */
.er-period-pills { display: inline-flex; gap: 2px; background: var(--color-background-raised, #f3f4f6); border-radius: var(--radius-md, 8px); padding: 2px; }
.er-period-pill { padding: 4px 14px; font-size: var(--text-xs, 11px); font-weight: 600; border: none; background: transparent; border-radius: var(--radius-sm, 6px); cursor: pointer; color: var(--color-content-secondary, var(--color-content-secondary)); transition: background 0.15s, color 0.15s; }
.er-period-pill:hover { color: var(--color-content-primary, #1a1a2e); }
.er-period-pill--active { background: var(--color-background-surface, #fff); color: var(--color-content-primary, #1a1a2e); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

/* Card */
.er-card { background: var(--color-background-surface, #fff); border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 16px; }

/* Health card */
.er-health-card { display: grid; grid-template-columns: 200px 1fr; gap: 24px; background: var(--color-background-surface, #fff); border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 24px; margin-bottom: 20px; }
@media (max-width: 768px) { .er-health-card { grid-template-columns: 1fr; justify-items: center; } }
.er-health-score-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.er-health-ring { position: relative; width: 130px; height: 130px; }
.er-ring-svg { width: 100%; height: 100%; }
.er-ring-track { fill: none; stroke: var(--color-border-subtle, #e5e7eb); stroke-width: 8; }
.er-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.er-ring-fill--healthy { stroke: var(--success, #22C55E); }
.er-ring-fill--warning { stroke: var(--warning, #F59E0B); }
.er-ring-fill--critical { stroke: var(--danger, #EF4444); }
.er-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.er-ring-number { font-size: 28px; font-weight: 700; line-height: 1; }
.er-ring-label { font-size: 11px; color: var(--color-content-tertiary, #9ca3af); margin-top: 2px; }

/* Status badge */
.er-status-badge { display: inline-block; font-size: var(--text-xs, 11px); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-full, 9999px); text-transform: uppercase; letter-spacing: 0.04em; }
.er-status-badge--healthy { background: rgba(34, 197, 94, 0.12); color: var(--success, #22C55E); }
.er-status-badge--warning { background: rgba(245, 158, 11, 0.12); color: var(--warning, #F59E0B); }
.er-status-badge--critical { background: rgba(239, 68, 68, 0.12); color: var(--danger, #EF4444); }

/* Health content */
.er-health-content { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.er-health-headline { font-size: 15px; color: var(--color-content-secondary, var(--color-content-secondary)); line-height: 1.5; }
.er-health-factors { display: flex; flex-wrap: wrap; gap: 12px; }
.er-health-factor { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm, 13px); }
.er-health-factor__label { color: var(--color-content-tertiary, #9ca3af); }
.er-health-factor__value { font-weight: 700; color: var(--color-content-primary, #1a1a2e); }

/* KPI row */
.er-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 768px) { .er-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.er-kpi-card { background: var(--color-background-surface, #fff); border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 16px; text-align: center; }
.er-kpi-label { font-size: var(--text-xs, 11px); font-weight: 600; color: var(--color-content-tertiary, #9ca3af); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.er-kpi-value { font-size: var(--text-2xl, 24px); font-weight: 700; color: var(--color-content-primary, #1a1a2e); }

/* Charts row */
.er-charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 768px) { .er-charts-row { grid-template-columns: 1fr; } }
.er-section-card { background: var(--color-background-surface, #fff); border: 1px solid var(--color-border-subtle, #e5e7eb); border-radius: var(--radius-md, 8px); padding: 16px; }
.er-chart-title { font-size: var(--text-sm, 13px); font-weight: 600; color: var(--color-content-primary, #1a1a2e); margin-bottom: 12px; }

/* Section title */
.er-section-title { font-size: 16px; font-weight: 600; color: var(--color-content-primary, #1a1a2e); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-subtle, #e5e7eb); }

/* Alert/action rows */
.er-alert-row, .er-action-row { padding: 12px 16px; }
.er-severity-label, .er-priority-badge { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }

/* Section header with "Ver todos" link */
.er-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.er-section-header .er-section-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.er-see-all { font-size: 12px; font-weight: 500; color: var(--brand-primary, #6366f1); text-decoration: none; white-space: nowrap; }
.er-see-all:hover { text-decoration: underline; }

/* Action numbering */
.er-action-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-primary, #6366f1); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }