/* ═══════════════════════════════════════════════════════════════
   RANKMYGEO — Design System (Ads Intelligence Layout)
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* ── RankMyGEO Design System — Official Tokens ── */

  /* ── Accent Palette (Forest Green / Lime) ── */
  --primary: #00A884;
  --primary-dark: #008F70;
  --primary-light: #5EEBC2;
  --primary-soft: rgba(0, 168, 132, 0.10);
  --primary-glow: rgba(0, 168, 132, 0.10);
  --primary-glow-md: rgba(0, 168, 132, 0.20);
  --primary-glow-strong: rgba(0, 168, 132, 0.35);
  --accent: #00A884;
  --accent-soft: rgba(0, 168, 132, 0.08);
  --accent-hover: #008F70;
  --accent-light: #5EEBC2;
  --accent-dark: #008F70;
  --accent-glow: rgba(0, 168, 132, 0.10);
  --accent-glow-md: rgba(0, 168, 132, 0.20);
  --accent-glow-strong: rgba(0, 168, 132, 0.35);

  --orange: #FFB020;
  --orange-light: #FFF3D6;
  --gradient-brand: linear-gradient(135deg, #0D1A0A, #162112);
  --gradient-btn: linear-gradient(135deg, #B8E62E, #00A884);
  --gradient-warm: linear-gradient(135deg, #00A884, #2FBF71);
  --gradient-warm-soft: linear-gradient(135deg, rgba(0,168,132,0.15), rgba(184,230,46,0.08));
  --gradient-warm-vibrant: linear-gradient(135deg, #B8E62E 0%, #00A884 50%, #2FBF71 100%);

  /* ── Backgrounds ── */
  --bg-root: #F7FAF0;
  --bg-primary: #FFFFFF;
  --bg-secondary: #EEF2E6;
  --bg-tertiary: #E8F0E4;
  --bg-elevated: #FFFFFF;
  --bg-hover: #E8F0E4;
  --bg-active: #DCE5D1;
  --bg-card: #FFFFFF;
  --bg-subtle: #EEF2E6;

  /* ── Borders ── */
  --border-subtle: #DCE5D1;
  --border-default: #DCE5D1;
  --border-hover: #C5D4B7;
  --border-active: rgba(0, 168, 132, 0.5);
  --border-accent: rgba(0, 168, 132, 0.20);

  /* ── Text hierarchy ── */
  --text-primary: #172014;
  --text-secondary: #52624A;
  --text-tertiary: #7B8874;
  --text-quaternary: #C5D4B7;

  /* ── Semantic ── */
  --success: #2E7D32;
  --success-bg: #E8F5E9;
  --success-border: rgba(46, 125, 50, 0.20);
  --error: #C62828;
  --error-bg: #FDECEC;
  --error-border: rgba(198, 40, 40, 0.20);
  --danger: #C62828;
  --danger-bg: #FDECEC;
  --warning: #F9A825;
  --warning-bg: #FFF8E1;
  --warning-border: rgba(249, 168, 37, 0.20);
  --info: #00A884;
  --info-bg: #DDF8F0;

  /* ── Chart Colors ── */
  --chart-1: #B8E62E;
  --chart-2: #00A884;
  --chart-3: #2FBF71;
  --chart-4: #FFB020;
  --chart-5: #F97066;
  --chart-6: #24451A;

  /* ── Layout ── */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 56px;
  --header-h: 56px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-md: var(--radius);
  --radius-pill: 60px;

  /* ── Typography ── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Motion ── */
  --ease: ease-out;
  --duration: 150ms;
  --duration-normal: 300ms;

  /* ── Shadows (Design System Elevations) ── */
  --shadow-xs: 0 1px 2px rgba(13,26,10,0.06);
  --shadow-sm: 0 2px 8px rgba(13,26,10,0.08);
  --shadow-md: 0 4px 16px rgba(13,26,10,0.12);
  --shadow-lg: 0 8px 32px rgba(13,26,10,0.16);
  --shadow-card: 0 1px 3px rgba(13,26,10,0.04);
  --shadow-card-hover: 0 4px 16px rgba(13,26,10,0.12);
  --shadow-glow: 0 0 40px rgba(0, 168, 132, 0.15);
  --shadow-cta: 0 4px 16px rgba(184, 230, 46, 0.3);
  --shadow-modal: 0 25px 50px -12px rgba(13,26,10,0.15);

  /* Legacy compat */
  --bg: var(--bg-root);
  --surface: var(--bg-secondary);
  --surface-hover: var(--bg-tertiary);
  --border: var(--border-default);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);

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

  /* ── Typography scale ── */
  --fs-xs: 0.6875rem;    /* 11px */
  --fs-sm: 0.75rem;      /* 12px */
  --fs-base: 0.8125rem;  /* 13px */
  --fs-md: 0.875rem;     /* 14px */
  --fs-lg: 1rem;         /* 16px */
  --fs-xl: 1.25rem;      /* 20px */
  --fs-2xl: 1.625rem;    /* 26px */

  /* ── Contrast text (on colored backgrounds) ── */
  --text-on-primary: #FFFFFF;
  --text-on-accent: #263900;
  --text-on-danger: #FFFFFF;
  --text-on-success: #FFFFFF;
  --text-on-warning: #172014;
  --text-on-dark: #FFFFFF;
  --text-on-info: #FFFFFF;
  --icon-on-primary: #FFFFFF;
  --border-on-primary: rgba(255, 255, 255, 0.22);

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-sticky: 110;
  --z-overlay: 140;
  --z-sidebar: 150;
  --z-modal: 200;
  --z-toast: 300;

  /* ── Design System Semantic Tokens ── */
  --color-interactive-accent: #B8E62E;
  --color-interactive-primary: #00A884;
  --color-interactive-control: #263900;
  --color-forest-green: #0D1A0A;
  --color-background-screen: #F7FAF0;
  --color-background-elevated: #FFFFFF;
  --color-background-neutral: #EEF2E6;
  --color-border-neutral: #DCE5D1;
  --color-content-primary: #172014;
  --color-content-secondary: #52624A;
  --color-content-tertiary: #7B8874;
}

/* ════════════════════════════════════════════════════════
   GLOBAL — Theme, Reset, Typography
   ════════════════════════════════════════════════════════ */

html { color-scheme: light; }

::selection {
  background: rgba(0, 168, 132, 0.20);
  color: #0E0E0E;
}

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

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

/* ── 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(0,168,132,0.1); } 50% { box-shadow: 0 0 40px rgba(0,168,132,0.2); } }

/* ── Global focus ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-glow);
}

h1, .h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

h2, .h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

h3, .h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.caption {
  font-size: 12px;
  font-weight: 500;
}

.micro {
  font-size: 11px;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   AUTH PAGES — AdsIntel Dark Card Centered Layout
   ════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  min-height: 100vh;
}

.page { display: none; }
.page.active { display: block; }

#page-login, #page-register, #page-confirm, #page-create-password, #page-verify-whatsapp, #page-change-password {
  display: none;
  min-height: 100vh;
}
#page-login.active, #page-register.active, #page-confirm.active, #page-create-password.active, #page-verify-whatsapp.active, #page-change-password.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Auth Page (full-screen purple bg) ── */
.auth-page {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-root);
  background-image: radial-gradient(at top center, #00A884 12%, #0D1A0A 125%);
  padding: 16px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  overflow: hidden;
}

/* ── Auth Card (dark centered) ── */
.auth-card {
  background: #0D1A0A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 40px 36px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  color: #e8e8e8;
  width: 100%;
  max-width: 380px;
}

/* ── Auth Brand ── */
.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

.auth-brand-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 168, 132, 0.10);
  border: 1px solid rgba(0, 168, 132, 0.20);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.auth-brand-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.auth-brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.auth-brand-sub {
  font-size: 11px;
  color: var(--text-quaternary);
  margin-top: 2px;
  font-weight: 500;
}

/* ── Auth Error ── */
.auth-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--error);
  margin-bottom: 20px;
  line-height: 1.5;
}

.auth-error[hidden] { display: none; }

/* ── Auth Form ── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-align: center;
}

.auth-form-subtitle {
  font-size: 12px;
  color: var(--text-muted, #7B8874);
  text-align: center;
  margin-top: -8px;
}

/* ── Auth Row (side-by-side fields) ── */
.auth-row {
  display: flex;
  gap: 12px;
}
.auth-field--half {
  flex: 1;
  min-width: 0;
}
@media (max-width: 480px) {
  .auth-row { flex-direction: column; gap: 16px; }
}

/* ── Auth Field Group (company-fields etc.) ── */
#company-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Auth Section Title ── */
.auth-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
  padding: 4px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Auth Field ── */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: 12px;
  font-weight: 600;
  color: #999999;
}

.auth-input {
  width: 100%;
  height: 42px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-family: var(--font, inherit);
  font-size: 13px;
  color: #e8e8e8;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-input::placeholder { color: #666666; }

.auth-input:focus {
  border-color: rgba(0, 168, 132, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 168, 132, 0.20);
}

.auth-input:hover:not(:focus) {
  border-color: #3a3a3a;
}

select.auth-input {
  appearance: none;
  cursor: pointer;
  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='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.auth-hint {
  font-size: 11px;
  color: #666666;
  line-height: 1.4;
}

.auth-field-error {
  font-size: 12px;
  font-weight: 600;
  color: #D32F2F;
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Auth Buttons ── */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font, inherit);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  width: 100%;
  text-decoration: none;
  text-align: center;
}

.auth-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 168, 132, 0.3);
}

.auth-btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  box-shadow: none;
}

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

.auth-btn-secondary {
  background: #1e1e1e;
  color: #999999;
  border: 1px solid #2a2a2a;
}

.auth-btn-secondary:hover {
  background: #252525;
  color: #e8e8e8;
  border-color: #333333;
}

/* ── Auth Links ── */
.auth-link-center {
  text-align: center;
}

.auth-link-center a {
  font-size: 12px;
  color: #666666;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.auth-link-center a:hover {
  color: var(--primary);
}

/* ── Auth Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2a2a2a;
}

.auth-divider span {
  font-size: 10px;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ── Auth Footer ── */
.auth-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #2a2a2a;
}

.auth-secured {
  font-size: 10px;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-secured strong {
  font-weight: 600;
  color: #999999;
}

/* ── Auth message overrides (dark card context) ── */
.auth-card .message {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: var(--error);
}
.auth-card .message.success {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.15);
  color: var(--success);
}
.auth-card .message.info {
  background: rgba(6, 182, 212, 0.10);
  border-color: rgba(6, 182, 212, 0.15);
  color: var(--info);
}

/* ── Auth Responsive ── */
@media (max-width: 480px) {
  .auth-card {
    padding: 28px 24px 24px;
  }
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.logo-img {
  max-width: 340px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}

/* Auth screens: login, register, MFA, reset, setup */
.auth-brand-logo {
  width: 80%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  image-rendering: auto;
  padding: 16px 24px;
  background: var(--gradient-brand);
  border-radius: var(--radius-lg);
}

.logo-subtitle {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  letter-spacing: 0.2px;
}

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

.card h2 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.card .subtitle {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-bottom: 20px;
}

/* ════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════ */

.form-group {
  margin-bottom: 14px;
  flex: 1;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font);
  transition: all var(--duration) var(--ease);
}
.form-group textarea {
  height: auto;
  padding: 12px;
  min-height: 100px;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input::placeholder, .form-group textarea::placeholder {
  color: var(--text-tertiary);
}

.form-row {
  display: flex;
  gap: 12px;
}

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent-light);
  color: #0E0E0E;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  box-shadow: var(--shadow-cta);
}

.btn svg { width: 14px; height: 14px; }

.btn:hover:not(:disabled) { background: var(--accent-hover); box-shadow: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.loading { pointer-events: none; opacity: 0.6; }
.btn.loading .btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-success { background: var(--success); color: #fff; box-shadow: none; }
.btn-success:hover { background: #26A65E; }
.btn-danger {
  background: rgba(249, 112, 102, 0.10);
  color: #F97066;
  border: 1px solid rgba(249, 112, 102, 0.20);
  box-shadow: none;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.20); }
.btn-outline, .btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  box-shadow: none;
}
.btn-outline:hover, .btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.btn-ghost {
  background: transparent;
  color: var(--text-tertiary);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--text-secondary); background: var(--bg-tertiary); }

.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* Icon button (reusable) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-family: inherit;
}
.btn-icon:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-accent {
  background: var(--color-interactive-accent);
  color: var(--color-interactive-control);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
}
.btn-accent:hover {
  filter: brightness(0.92);
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   MESSAGES
   ════════════════════════════════════════════════════════ */

.message {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
  display: none;
}
.message.success {
  display: block;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
}
.message.error {
  display: block;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error);
}
.message.info {
  display: block;
  background: var(--info-bg);
  border: 1px solid rgba(6,182,212,0.16);
  color: var(--info);
}

.link-row {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.link-row a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.link-row a:hover { text-decoration: underline; }

.wa-code-input {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════
   APP SHELL -- SIDEBAR LAYOUT
   ════════════════════════════════════════════════════════ */

#page-app {
  display: none;
}
#page-app.active {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar (Dark — Ads Intelligence pattern) ── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: #0D1A0A;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 150;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.25s var(--ease), min-width 0.25s var(--ease);
}
/* Sidebar dark context overrides */
.sidebar, .sidebar * { color: #E8EDE5; }

/* ── Collapsed sidebar ── */
.sidebar.collapsed {
  width: var(--sidebar-w-collapsed);
  min-width: var(--sidebar-w-collapsed);
}
.sidebar.collapsed .sidebar-brand-text { display: none !important; }
.sidebar.collapsed .sidebar-brand-icon { width: 28px; height: 28px; }
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-section-trigger span { display: none; }
.sidebar.collapsed .nav-tab span,
.sidebar.collapsed .nav-tab .alerts-badge { display: none; }
.sidebar.collapsed .nav-tab { justify-content: center; padding: 10px; }
.sidebar.collapsed .nav-tab svg { width: 18px; height: 18px; }
.sidebar.collapsed .nav-tab.active::before { display: none; }
/* sidebar-user-info, sidebar-user collapsed: removed — user menu now in topbar */
.sidebar.collapsed .sidebar-brand { padding: 12px 8px; }
.sidebar.collapsed .sidebar-nav { padding: 0 6px; }

/* ── Collapse toggle ── */
.sidebar-collapse-btn {
  display: none;
  position: absolute;
  top: 12px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0D1A0A;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 160;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #E8EDE5;
  transition: all var(--duration);
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: var(--accent-light); border-color: rgba(255,255,255,0.06); }
@media (min-width: 769px) {
  .sidebar-collapse-btn { display: flex; }
}
.sidebar.collapsed .sidebar-collapse-btn { right: -12px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
/* sidebar-brand-card: legacy — hidden in favor of logo */
.sidebar-brand-card { display: none; }
.sidebar-brand-logo {
  max-height: 49px;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-light);
  flex-shrink: 0;
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sidebar-brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.sidebar-brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.5px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 8px 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.35);
  padding: 12px 10px 6px;
  transition: opacity 0.2s;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  position: relative;
  cursor: pointer;
}
.nav-tab span { transition: opacity 0.2s; }
.nav-tab svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: all var(--duration);
}
.nav-tab-sub {
  padding-left: 40px;
  font-size: 12px;
  opacity: 0.85;
}
.nav-tab-sub::before {
  content: '└';
  position: absolute;
  left: 22px;
  color: #555;
  font-size: 11px;
}
.nav-tab:hover {
  color: #E8EDE5;
  background: rgba(255,255,255,0.08);
  transform: translateX(2px);
}
.nav-tab:hover svg { opacity: 0.8; }
.nav-tab.active {
  color: var(--accent-light);
  background: rgba(0,168,132,0.18);
  font-weight: 600;
}
.nav-tab.active:hover {
  background: rgba(0,168,132,0.25);
}
.nav-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--color-interactive-accent);
  border-radius: 0 2px 2px 0;
}
.nav-tab.active svg {
  opacity: 1;
  color: var(--accent-light);
}

/* ── Sidebar section wrappers (accordion) ── */
.s-section { margin-bottom: 2px; }
.s-section + .s-section { margin-top: 0; }

.sidebar-section-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  font-family: inherit;
}
.sidebar-section-trigger:hover {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
}
.sidebar-section-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.sidebar-section-trigger[aria-expanded="true"] {
  color: rgba(255,255,255,0.6);
}

.sidebar-section-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 220ms ease;
}
.sidebar-section-trigger[aria-expanded="true"] .sidebar-section-chevron {
  transform: rotate(180deg);
}

.sidebar-section-content {
  overflow: hidden;
  max-height: 0px;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 250ms ease, opacity 200ms ease, transform 250ms ease;
}
.s-section.is-open .sidebar-section-content {
  /* max-height set dynamically by JS via scrollHeight */
  opacity: 1;
  transform: translateY(0);
}

/* Collapsed sidebar: hide triggers, show all items flat */
.sidebar.collapsed .sidebar-section-trigger { display: none; }
.sidebar.collapsed .sidebar-section-content {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar-section-content,
  .sidebar-section-chevron {
    transition: none;
  }
}

.nav-tab.locked {
  opacity: 0.45;
  cursor: default;
}
.nav-tab.locked:hover {
  background: transparent;
  color: inherit;
}
.badge-locked {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
}

/* sidebar-divider, sidebar-cta, sidebar-user: removed — user menu now in topbar */

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 140;
}

/* ── Main content area ── */
.app-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-root);
  transition: margin-left 0.25s var(--ease);
}
.sidebar.collapsed ~ .sidebar-overlay ~ .app-main,
.sidebar.collapsed ~ .app-main {
  margin-left: var(--sidebar-w-collapsed);
}

/* ── Content shell (centered container) ── */
.content-shell {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  flex: 1;
}

/* ── Top bar ── */
.app-topbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-default);
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--duration);
}
.sidebar-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: auto;
}

/* btn-logout: removed — logout now in topbar user dropdown */

.project-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.project-selector label {
  font-weight: 500;
}

.project-selector select {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  transition: all var(--duration);
}
.project-selector select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ── Page header ── */
.page-header {
  margin-bottom: 16px;
}
.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.page-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════
   TAB CONTENT
   ════════════════════════════════════════════════════════ */

.tab-content {
  display: none;
  padding: 20px 0 32px;
  width: 100%;
  animation: pageIn 0.2s var(--ease);
}
.tab-content.active { display: block; }

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

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.tab-header h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════
   DASHBOARD -- MAIN INSIGHT BANNER
   ════════════════════════════════════════════════════════ */

.main-insight-card {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0,168,132,0.04) 0%, rgba(0,168,132,0.01) 100%);
}
.main-insight-card.type-negative {
  background: linear-gradient(135deg, rgba(220,38,38,0.06) 0%, rgba(220,38,38,0.02) 100%);
  border-color: var(--error-border);
}
.main-insight-card.type-positive {
  background: linear-gradient(135deg, rgba(22,163,74,0.06) 0%, rgba(22,163,74,0.02) 100%);
  border-color: var(--success-border);
}
.main-insight-card.type-warning {
  background: linear-gradient(135deg, rgba(217,119,6,0.06) 0%, rgba(217,119,6,0.02) 100%);
  border-color: var(--warning-border);
}
.main-insight-card.type-neutral {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%);
}

.main-insight-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.main-insight-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════
   INSIGHT BANNER (new component)
   ════════════════════════════════════════════════════════ */

.insight-banner {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0,168,132,0.06) 0%, rgba(0,168,132,0.02) 100%);
  border: 1px solid rgba(0,168,132,0.15);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
}
.insight-banner--warning {
  background: linear-gradient(135deg, rgba(217,119,6,0.06) 0%, rgba(217,119,6,0.02) 100%);
  border-color: var(--warning-border);
}
.insight-banner--negative {
  background: linear-gradient(135deg, rgba(220,38,38,0.06) 0%, rgba(220,38,38,0.02) 100%);
  border-color: var(--error-border);
}
.insight-banner--positive {
  background: linear-gradient(135deg, rgba(22,163,74,0.06) 0%, rgba(22,163,74,0.02) 100%);
  border-color: var(--success-border);
}
.insight-banner--neutral {
  background: linear-gradient(135deg, rgba(0,168,132,0.06) 0%, rgba(0,168,132,0.02) 100%);
  border-color: rgba(0,168,132,0.15);
}

.insight-banner__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(0,0,0,0.06);
  color: var(--text-primary);
}
.insight-banner--warning .insight-banner__icon {
  background: var(--warning-bg);
  color: var(--warning);
}
.insight-banner--negative .insight-banner__icon {
  background: var(--error-bg);
  color: var(--error);
}
.insight-banner--positive .insight-banner__icon {
  background: var(--success-bg);
  color: var(--success);
}

.insight-banner__content {
  flex: 1;
  min-width: 0;
}

.insight-banner__text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════
   DASHBOARD -- KPI CARDS (stat-card + metric-card)
   ════════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.stat-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card.accent {
  border-color: rgba(0, 168, 132, 0.2);
  background: linear-gradient(135deg, rgba(0,168,132,0.03) 0%, var(--bg-card) 100%);
}

.stat-card .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-card .value,
.stat-card__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat-card__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stat-card.accent .value { color: var(--primary); }

.stat-card .sublabel,
.stat-card .explanation {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}

/* Theme cards in analytics — need smaller value to fit in 4-col grid */
.stat-card.theme-card .value {
  font-size: 20px;
  margin-bottom: 2px;
}
.stat-card.theme-card {
  padding: 14px 16px;
}

.stat-card .delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
}
.delta.positive { color: var(--success); background: var(--success-bg); }
.delta.negative { color: var(--error); background: var(--error-bg); }

.stat-explanation {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
  min-height: 20px;
}

/* ── MetricCard (new component, stat-card redesign) ── */
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.metric-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.metric-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.metric-card__value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--text-primary);
}

.metric-card__explanation {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}

.metric-card__delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
}
.metric-card__delta.positive { color: var(--success); background: var(--success-bg); }
.metric-card__delta.negative { color: var(--error); background: var(--error-bg); }

/* ════════════════════════════════════════════════════════
   EVOLUTION SECTION
   ════════════════════════════════════════════════════════ */

.evolution-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.evolution-item {
  flex: 1;
  min-width: 140px;
}

.evolution-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.evolution-values {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.evolution-prev { color: var(--text-tertiary); }
.evolution-arrow { color: var(--text-tertiary); font-size: 12px; }
.evolution-curr { color: var(--text-primary); }
.evolution-delta {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.evolution-delta.positive { color: var(--success); background: var(--success-bg); }
.evolution-delta.negative { color: var(--error); background: var(--error-bg); }

/* ════════════════════════════════════════════════════════
   RECOMMENDATION CARD
   ════════════════════════════════════════════════════════ */

.recommendation-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary-soft);
  border: 1px solid rgba(0, 168, 132, 0.15);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.recommendation-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.recommendation-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   SECTIONS & PANELS
   ════════════════════════════════════════════════════════ */

.section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.section-half {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color var(--duration);
  box-shadow: var(--shadow-xs);
}
.section-half:hover { border-color: var(--border-hover); }

.section-half h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.list-simple {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.list-simple .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.list-simple .item:last-child { border-bottom: none; }
.list-simple .item .val { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

.empty-inline {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 12px 0;
  line-height: 1.6;
  font-style: italic;
}

/* ── Share of Voice bars ── */
.sov-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 55%;
}
.sov-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.4s var(--ease);
  min-width: 2px;
}
.sov-bar.engine-bar {
  background: var(--info);
}

/* ── Opportunities ── */
.opp-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.opp-item:last-child { border-bottom: none; }

.opp-query {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 500;
}

.opp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.opp-comp { color: var(--text-secondary); }
.opp-pos { color: var(--text-tertiary); }

/* ── Gaps Prioritized ── */
.gap-priority-group {
  margin-bottom: 12px;
}
.gap-priority-group:last-child { margin-bottom: 0; }

.gap-priority-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 8px;
}
.gap-priority-label.high { background: var(--error-bg); color: var(--error); }
.gap-priority-label.medium { background: var(--warning-bg); color: var(--warning); }
.gap-priority-label.low { background: rgba(107,114,128,0.08); color: var(--text-secondary); }

.gap-item {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--border-subtle);
  line-height: 1.5;
}

.section-full {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  transition: border-color var(--duration);
  box-shadow: var(--shadow-xs);
  width: 100%;
}
.section-full:hover { border-color: var(--border-hover); }

.section-full h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: -8px;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  text-align: left;
  padding: 12px 20px;
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}
.data-table th:first-child {
  border-radius: 8px 0 0 0;
}
.data-table th:last-child {
  border-radius: 0 8px 0 0;
}
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  font-size: 12px;
}
.data-table tbody tr {
  transition: background var(--duration);
}
.data-table tbody tr:nth-child(even) {
  background: rgba(241,245,249,0.5);
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table input[type="checkbox"] { accent-color: var(--primary); }

/* ── TableCard (new component) ── */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 24px;
}
.table-card .data-table th:first-child { border-radius: 0; }
.table-card .data-table th:last-child { border-radius: 0; }

/* ════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-approved, .badge-completed, .badge-positive { background: var(--success-bg); color: var(--success); }
.badge-pending, .badge-running, .badge-neutral { background: var(--warning-bg); color: var(--warning); }
.badge-rejected, .badge-failed, .badge-negative { background: var(--error-bg); color: var(--error); }
.badge-open, .badge-unknown, .badge-suggested { background: rgba(107,114,128,0.08); color: var(--text-secondary); }
.badge-accepted, .badge-draft { background: var(--primary-glow); color: var(--primary); }
.badge-high { background: var(--error-bg); color: var(--error); }
.badge-medium { background: var(--warning-bg); color: var(--warning); }
.badge-low { background: rgba(107,114,128,0.08); color: var(--text-secondary); }
.badge-active { background: var(--success-bg); color: var(--success); }
.badge-configured { background: var(--primary-glow); color: var(--primary); }
.badge-needs_attention { background: var(--warning-bg); color: var(--warning); }

/* ── Badge System (extended) ── */
.badge-info {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid rgba(0,168,132,0.16);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}
.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.badge-dot--success { background: var(--success); }
.badge-dot--warning { background: var(--warning); }
.badge-dot--error { background: var(--error); }
.badge-dot--info { background: var(--info); }

/* ── Alert Banner ── */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.alert-banner--info {
  background: var(--info-bg);
  border: 1px solid rgba(0,168,132,0.12);
  color: var(--primary);
}
.alert-banner--warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning);
}
.alert-banner--success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
}
.alert-banner--error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error);
}
.alert-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-banner__dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
}
.alert-banner__dismiss:hover { opacity: 1; }

/* ── Progress Bar ── */
.progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: var(--gradient-btn);
  border-radius: 3px;
  transition: width 0.4s var(--ease);
}
.progress-bar--sm { height: 4px; }
.progress-bar--lg { height: 8px; border-radius: 4px; }
.progress-bar--success .progress-bar__fill { background: var(--success); }
.progress-bar--warning .progress-bar__fill { background: var(--warning); }
.progress-bar--error .progress-bar__fill { background: var(--error); }

/* ════════════════════════════════════════════════════════
   CARD LIST (Projects, Runs, etc.)
   ════════════════════════════════════════════════════════ */

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

.card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.card-item:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.card-item.selected { border-color: rgba(0, 168, 132, 0.3); background: var(--accent-glow); }

.card-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.card-item-header h4 { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; color: var(--text-primary); }

.card-item-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.card-item p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}

.card-item .actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

/* ── Recommendation card footer layout ───────────────── */
.rec-card__footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.rec-card__decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rec-card__next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, #dbe7d3);
}
.rec-card__next-actions .pg-action-menu { width: 100%; }
.rec-card__next-actions .pg-action-locked { width: 100%; }
.rec-card__next-actions .btn,
.rec-card__next-actions button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
}

/* Soft button style for secondary PG actions */
.btn-soft {
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-size: 0.75rem;
  min-height: 36px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.btn-soft:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.pg-action-menu__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Highlight animation for newly created opportunity */
@keyframes rec-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 132, 0); }
  50% { box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.25); }
}
.rec-card--highlight {
  border-color: var(--accent) !important;
  animation: rec-highlight-pulse 1s ease-in-out 3;
}

@media (max-width: 640px) {
  .rec-card__decision-actions,
  .rec-card__next-actions { flex-direction: column; align-items: stretch; }
  .rec-card__decision-actions .btn,
  .rec-card__next-actions .btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════
   LOADING / EMPTY STATES
   ════════════════════════════════════════════════════════ */

.loading-indicator {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
}
.loading-indicator::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-default);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius);
  max-width: 520px;
  margin: 24px auto;
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--primary-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--primary);
  fill: none;
  stroke-width: 1.5;
}
.empty-state strong, .empty-state__title {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}
.empty-state__desc {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.empty-state .btn {
  margin-top: 12px;
}

.empty-state-rich {
  text-align: center;
  padding: 56px 32px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius);
  max-width: 480px;
  margin: 32px auto;
}
.empty-state-rich svg {
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state-rich strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.empty-state-rich p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 4px;
}
.empty-state-rich .empty-state-cta {
  color: var(--primary);
  font-weight: 500;
  margin-top: 12px;
  font-size: 12px;
}

/* ── How It Works (contextual help) ── */
.how-it-works {
  background: var(--primary-soft);
  border: 1px solid rgba(0, 168, 132, 0.1);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.how-it-works__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.how-it-works__toggle:hover {
  background: rgba(0, 168, 132, 0.06);
}
.how-it-works__toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.how-it-works__chevron {
  margin-left: auto;
  transition: transform var(--duration) var(--ease);
}
.how-it-works.open .how-it-works__chevron {
  transform: rotate(180deg);
}
.how-it-works__content {
  display: none;
  padding: 0 16px 16px;
}
.how-it-works.open .how-it-works__content {
  display: block;
}
.how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.how-it-works__step {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.how-it-works__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}
.how-it-works__step strong {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.how-it-works__step p {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* ── Filter row ── */
.filter-row {
  margin-bottom: 14px;
}
.filter-row select {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  transition: all var(--duration);
}
.filter-row select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ════════════════════════════════════════════════════════
   PAGE HEADER (reusable)
   ════════════════════════════════════════════════════════ */

.pg-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.pg-header__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  line-height: 1.2;
}
.pg-header__desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.pg-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   SUMMARY BAR (reusable)
   ════════════════════════════════════════════════════════ */

.summary-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.summary-item {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
  min-width: 0;
}
.summary-item__value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-primary);
}
.summary-item__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.summary-item--success .summary-item__value { color: var(--success); }
.summary-item--danger .summary-item__value { color: var(--error); }
.summary-item--warning .summary-item__value { color: var(--warning); }
.summary-item--muted .summary-item__value { color: var(--text-secondary); }
.summary-item--accent .summary-item__value { color: var(--primary); }

/* ════════════════════════════════════════════════════════
   FILTERS TOOLBAR (reusable)
   ════════════════════════════════════════════════════════ */

.filters-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filters-toolbar select {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  transition: all var(--duration);
  height: 34px;
}
.filters-toolbar select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.filters-toolbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: 34px;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  transition: border-color var(--duration);
}
.filters-toolbar__search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.filters-toolbar__search svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.filters-toolbar__search input {
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary);
  width: 100%;
  padding: 0;
}
.filters-toolbar__search input::placeholder {
  color: var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════
   QUERY ROW CARDS
   ════════════════════════════════════════════════════════ */

.qrow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qrow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: all var(--duration) var(--ease);
}
.qrow:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}
.qrow.qrow--selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.qrow__check {
  flex-shrink: 0;
}
.qrow__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.qrow__body {
  flex: 1;
  min-width: 0;
}
.qrow__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qrow__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.qrow__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qrow__priority {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.qrow__priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.qrow__priority-dot--high { background: var(--error); }
.qrow__priority-dot--medium { background: var(--warning); }
.qrow__priority-dot--low { background: var(--border-active); }
.qrow__priority-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.qrow__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration);
}
.qrow:hover .qrow__actions,
.qrow__actions:focus-within {
  opacity: 1;
}

.qrow__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--duration);
  padding: 0;
}
.qrow__action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.qrow__action-btn--approve:hover {
  border-color: var(--success-border);
  color: var(--success);
  background: var(--success-bg);
}
.qrow__action-btn--reject:hover {
  border-color: var(--error-border);
  color: var(--error);
  background: var(--error-bg);
}

/* ════════════════════════════════════════════════════════
   BULK ACTION BAR (reusable)
   ════════════════════════════════════════════════════════ */

.bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--text-primary);
  color: var(--text-on-dark);
  padding: 10px 20px;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 200;
  animation: bulkBarIn 0.2s var(--ease);
}
@keyframes bulkBarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bulk-bar__count {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.bulk-bar__count strong {
  font-weight: 700;
}
.bulk-bar__actions {
  display: flex;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════
   FILTER TABS (reusable)
   ════════════════════════════════════════════════════════ */

.filter-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-default);
  overflow-x: auto;
}
.filter-tab {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.filter-tab:hover {
  color: var(--text-primary);
}
.filter-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.filter-tab__count--warning { background: var(--warning); color: var(--text-on-warning); }
.filter-tab__count--success { background: var(--success); color: var(--text-on-success); }
.filter-tab__count--accent { background: var(--accent); color: var(--text-on-accent); }
.filter-tab__count--danger { background: var(--error); color: var(--text-on-danger); }

/* ── Run Schedule Card ── */
.run-schedule-card {
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.run-schedule-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.run-schedule-card__info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.run-schedule-card__info svg { color: var(--accent); flex-shrink: 0; }
.run-schedule-card__info strong { color: var(--text-primary); }
.run-schedule-card__freq {
  display: flex;
  align-items: center;
  gap: 8px;
}
.run-schedule-card__freq label {
  font-size: 12px;
  color: var(--text-secondary);
}
.run-schedule-card__freq select {
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-card);
}

/* ── Run Progress Card ── */
.run-progress-card {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.run-progress-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.run-progress-card__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.run-progress-card__pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.run-progress-card__track {
  width: 100%;
  height: 8px;
  background: var(--bg-subtle);
  border-radius: 4px;
  overflow: hidden;
}
.run-progress-card__fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 4px;
  transition: width 0.5s ease;
}
.run-progress-card__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.run-progress-card__footer span:last-child { color: var(--text-tertiary); }

/* ── Table Pagination ── */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.table-pagination__btns {
  display: flex;
  gap: 8px;
}

/* ── Form card ── */
.form-card {
  margin-bottom: 20px;
}
.form-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

/* Project CTA Card */
.project-cta-card {
  text-align: center;
  padding: 32px 24px;
  margin-bottom: 20px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}
.project-cta-card__icon {
  margin-bottom: 12px;
  color: var(--accent);
  opacity: 0.7;
}
.project-cta-card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.project-cta-card__desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.project-cta-card__btn {
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════ */

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.60);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 400px; }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-header h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.modal-footer { margin-top: 16px; text-align: right; }
.btn-close {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--duration);
}
.btn-close:hover { color: var(--error); border-color: var(--error-border); background: var(--error-bg); }

/* ── Global Modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal, 200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s var(--ease);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.2s var(--ease);
}
.modal-panel--sm { max-width: 400px; }
.modal-panel--lg { max-width: 800px; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 {
  font-size: 15px;
  font-weight: 600;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: all var(--duration);
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.modal-body { padding: 20px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
}

/* ── Drawer ── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: var(--z-overlay, 140);
  animation: fadeIn 0.15s var(--ease);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-overlay, 140) + 1);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.2s var(--ease);
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.drawer-header h3 { font-size: 15px; font-weight: 600; }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.drawer-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Drawer overlay variant (used by vertical drawers) ── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: var(--z-overlay, 140);
  animation: fadeIn 0.15s var(--ease);
}
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-overlay, 140) + 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  animation: slideInRight 0.2s var(--ease);
}
.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.drawer-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.drawer-header-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  padding-right: 40px;
}

/* ── Table overflow control ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  min-width: 600px;
}
table td, table th {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Tooltip ── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text-primary);
  color: var(--bg-card);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: var(--z-toast, 300);
}
[data-tooltip]:hover::after {
  opacity: 1;
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
}

/* ════════════════════════════════════════════════════════
   ANSWER DETAIL MODAL (Premium)
   ════════════════════════════════════════════════════════ */

.answer-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  width: 100%;
  max-width: 960px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

.answer-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.answer-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.answer-modal-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.5;
}

.answer-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ── Score strip ── */
.answer-score-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.answer-score-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-elevated);
  min-width: 120px;
  flex: 1;
}
.answer-score-card .score-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}
.answer-score-card .score-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.answer-score-card .score-value .badge {
  font-size: 11px;
}

/* ── Section blocks ── */
.answer-section {
  margin-bottom: 24px;
}
.answer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.answer-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
}

/* ── Answer body card ── */
.answer-body-card {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  padding: 20px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 380px;
  overflow-y: auto;
}
.answer-body-card::-webkit-scrollbar { width: 5px; }
.answer-body-card::-webkit-scrollbar-track { background: transparent; }
.answer-body-card::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }

.answer-highlight-target {
  background: var(--primary-glow-strong);
  color: var(--primary-dark);
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
}
.answer-highlight-competitor {
  background: #fef3c7;
  color: #92400e;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Brands chips ── */
.answer-brands-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Source cards ── */
.answer-source-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.answer-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-card);
  transition: border-color var(--duration);
  text-decoration: none;
  color: inherit;
}
.answer-source-card:hover {
  border-color: var(--primary);
}
.answer-source-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-tertiary);
}
.answer-source-info {
  flex: 1;
  min-width: 0;
}
.answer-source-domain {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.answer-source-url {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.answer-source-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.source-own { background: var(--primary-glow); color: var(--primary); border: 1px solid var(--primary-glow-strong); }
.source-competitor { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.source-third { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.source-ugc { background: var(--info-bg); color: var(--info); border: 1px solid rgba(0,168,132,0.18); }

/* ── Parser grid ── */
.answer-parser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.answer-parser-card {
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-card);
}
.answer-parser-card.full-width {
  grid-column: 1 / -1;
}
.answer-parser-card .parser-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.answer-parser-card .parser-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-primary);
}
.answer-parser-card .parser-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.answer-parser-card .parser-chip {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  color: var(--text-secondary);
}

/* ── Actions footer ── */
.answer-actions {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.answer-actions .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.answer-actions .btn[disabled]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--text-on-dark);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.answer-actions .btn {
  position: relative;
  font-size: 12px;
}

/* ── Separator ── */
.answer-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0 0 24px 0;
}

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .answer-modal { max-width: 100%; border-radius: 12px; max-height: 92vh; }
  .answer-score-strip { flex-direction: column; }
  .answer-parser-grid { grid-template-columns: 1fr; }
  .answer-modal-header { padding: 16px 16px 12px; }
  .answer-modal-body { padding: 16px; }
  .answer-actions { padding: 12px 16px; }
}

/* ── Content preview ── */
.content-preview {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 20px 24px;
  max-height: 60vh;
  overflow-y: auto;
}
.content-preview h1, .content-preview h2, .content-preview h3 {
  color: var(--text-primary);
  margin: 16px 0 8px;
}
.content-preview h1 { font-size: 20px; }
.content-preview h2 { font-size: 17px; }
.content-preview h3 { font-size: 15px; text-transform: none; letter-spacing: 0; border-bottom: none; padding-bottom: 0; }
.content-preview p { margin-bottom: 12px; }
.content-preview ul, .content-preview ol { padding-left: 20px; margin-bottom: 12px; }
.content-preview li { margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════
   RUN CARDS
   ════════════════════════════════════════════════════════ */

.run-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.run-card:hover { border-color: var(--border-hover); }
.run-card-info { flex: 1; }
.run-card-info .run-date { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.run-card-info .run-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.run-card-actions { display: flex; gap: 8px; align-items: center; }

/* ════════════════════════════════════════════════════════
   SCORE HISTORY CHART
   ════════════════════════════════════════════════════════ */

.score-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding: 8px 0;
}

.score-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}

.score-bar {
  width: 100%;
  max-width: 32px;
  border-radius: 6px 6px 0 0;
  transition: height 0.3s var(--ease);
  position: relative;
}

.score-bar.up {
  background: linear-gradient(180deg, #2FBF71 0%, #26A65E 100%);
}
.score-bar.down {
  background: linear-gradient(180deg, #F97066 0%, #E04B40 100%);
}
.score-bar.flat {
  background: linear-gradient(180deg, #5EEBC2 0%, var(--primary) 100%);
}
.score-bar.latest {
  box-shadow: 0 0 8px var(--primary-glow-md);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.score-bar-label {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  font-weight: 500;
}

.score-bar-value {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Dashboard Quick Actions ── */
.dash-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* ── ActionCard (new component) ── */
.action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.action-card__header {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.action-card__body {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.action-card__primary {
  display: flex;
  gap: 8px;
}
.action-card__secondary {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ════════════════════════════════════════════════════════
   HIGH IMPACT QUERIES
   ════════════════════════════════════════════════════════ */

.hi-query {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-size: 12px;
  transition: border-color var(--duration);
}
.hi-query:hover { border-color: var(--border-hover); }

.hi-query-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.hi-query-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.hi-query-tag.opportunity { background: var(--warning-bg); color: var(--warning); }
.hi-query-tag.winning { background: var(--success-bg); color: var(--success); }
.hi-query-tag.losing { background: var(--error-bg); color: var(--error); }

/* ════════════════════════════════════════════════════════
   ONBOARDING OVERLAY
   ════════════════════════════════════════════════════════ */

.onboarding-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: color-mix(in srgb, var(--bg-root) 94%, transparent);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}

.onboarding-card, .onboarding-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.onboarding-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.onboarding-header p {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-bottom: 32px;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-tertiary);
  transition: color 0.3s var(--ease);
}

.onboarding-step.active { color: var(--text-primary); font-weight: 500; }
.onboarding-step.done { color: var(--success); }
.onboarding-step.failed { color: var(--error); }

.ob-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.ob-pending { border: 2px solid var(--border-default); }
.ob-active {
  border: 2px solid var(--primary);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.ob-done { background: var(--success); color: var(--text-on-success); }
.ob-done::after { content: '\2713'; }
.ob-failed { background: var(--error); color: var(--text-on-danger); }
.ob-failed::after { content: '\2717'; }

/* ── Auth button centering ─────────────────────────────── */
.auth-btn-center {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.auth-btn-center .btn {
  min-width: 180px;
  padding: 10px 24px;
  font-size: 14px;
}

/* ── Onboarding Step Indicator ── */
.onboarding-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 16px;
}
.onboarding-step-item {
  display: flex;
  align-items: center;
  gap: 0;
}
.onboarding-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-tertiary);
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.onboarding-step-dot.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--text-on-primary);
}
.onboarding-step-dot.completed {
  border-color: var(--success);
  background: var(--success);
  color: var(--text-on-success);
}
.onboarding-step-connector {
  width: 40px;
  height: 2px;
  background: var(--border-default);
  transition: background 0.3s var(--ease);
}
.onboarding-step-connector.completed {
  background: var(--success);
}
.onboarding-step-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 4px;
  max-width: 64px;
}
.onboarding-step-label.active { color: var(--primary); font-weight: 600; }

/* ── Password Strength ── */
.password-strength {
  margin-top: 6px;
}
.password-strength__bar {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.password-strength__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s var(--ease), background 0.3s;
}
.password-strength__fill[data-strength="weak"] { width: 25%; background: var(--error); }
.password-strength__fill[data-strength="fair"] { width: 50%; background: var(--warning); }
.password-strength__fill[data-strength="good"] { width: 75%; background: #2FBF71; }
.password-strength__fill[data-strength="strong"] { width: 100%; background: var(--success); }
.password-strength__label {
  font-size: 10px;
  margin-top: 3px;
  color: var(--text-tertiary);
}

/* ── Premium onboarding card ──────────────────────────── */
.onboarding-premium {
  text-align: center;
  animation: obCardFadeIn 0.6s ease both;
}

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

/* ── Coffee Scene ─────────────────────────────────────── */
.coffee-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 32px;
  width: 120px;
  height: 120px;
}

/* Cup body */
.coffee-scene .coffee-cup {
  position: absolute;
  bottom: 14px;
  width: 72px;
  height: 52px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary, #0F1E0D) 100%);
  border: 2px solid var(--border-default);
  border-radius: 4px 4px 20px 20px;
  z-index: 2;
  overflow: hidden;
}

/* Liquid inside the cup */
.coffee-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, #8B6914 0%, #6B4F10 50%, #5C4010 100%);
  border-radius: 0 0 18px 18px;
  animation: coffeePulse 3s ease-in-out infinite;
}

.coffee-liquid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  border-radius: 50%;
  animation: coffeeShimmer 4s ease-in-out infinite;
}

@keyframes coffeePulse {
  0%, 100% { height: 58%; }
  50%      { height: 63%; }
}

@keyframes coffeeShimmer {
  0%, 100% { left: 10%; opacity: 0.3; }
  50%      { left: 20%; opacity: 0.6; }
}

/* Handle */
.coffee-scene .coffee-handle {
  position: absolute;
  right: -14px;
  top: 10px;
  width: 16px;
  height: 24px;
  border: 2.5px solid var(--border-default);
  border-left: none;
  border-radius: 0 10px 10px 0;
  z-index: 1;
}

/* Saucer */
.coffee-saucer {
  position: absolute;
  bottom: 4px;
  width: 90px;
  height: 10px;
  background: linear-gradient(180deg, var(--bg-secondary, #0F1E0D) 0%, var(--bg-tertiary, #1A2E18) 100%);
  border: 2px solid var(--border-default);
  border-radius: 50%;
  z-index: 3;
}

/* Steam container */
.coffee-steam {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
}

/* Individual steam lines — wavy rising vapor */
.coffee-steam span {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(148,163,184,0) 0%, rgba(148,163,184,0.35) 40%, rgba(148,163,184,0) 100%);
}

.steam-1 {
  height: 22px;
  animation: steamFloat 2.4s ease-in-out infinite;
}

.steam-2 {
  height: 28px;
  animation: steamFloat 2.4s ease-in-out 0.5s infinite;
}

.steam-3 {
  height: 20px;
  animation: steamFloat 2.4s ease-in-out 1.0s infinite;
}

@keyframes steamFloat {
  0% {
    opacity: 0;
    transform: translateY(8px) scaleX(1);
  }
  15% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.35;
    transform: translateY(-10px) scaleX(1.3) translateX(2px);
  }
  85% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scaleX(0.8) translateX(-2px);
  }
}

/* ── Text ─────────────────────────────────────────────── */
.onboarding-premium h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.4px;
}

.onboarding-premium .ob-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ── Steps ────────────────────────────────────────────── */
.onboarding-premium .onboarding-steps {
  margin-bottom: 20px;
}

.onboarding-premium .onboarding-step {
  padding: 9px 0;
  transition: all 0.35s ease;
}

.onboarding-premium .onboarding-step.active span:last-child {
  color: var(--primary);
  font-weight: 600;
}

.onboarding-premium .onboarding-step.done span:last-child {
  color: var(--text-secondary);
}

.onboarding-premium .onboarding-step.failed span:last-child {
  color: var(--error);
}

/* ── WhatsApp notice ──────────────────────────────────── */
.onboarding-premium .ob-whatsapp-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.onboarding-premium .ob-whatsapp-notice svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #25D366;
}
.onboarding-premium .ob-notice-fallback svg {
  color: var(--text-tertiary);
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .onboarding-card {
    padding: 28px 20px;
  }
  .coffee-scene {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
  }
  .coffee-scene .coffee-cup {
    width: 60px;
    height: 44px;
  }
  .coffee-saucer {
    width: 76px;
    height: 8px;
  }
  .coffee-scene .coffee-handle {
    width: 13px;
    height: 20px;
    right: -12px;
    top: 8px;
  }
  .onboarding-premium h2 {
    font-size: 18px;
  }
}

/* ════════════════════════════════════════════════════════
   IMPACT SECTION
   ════════════════════════════════════════════════════════ */

.impact-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  transition: border-color var(--duration);
  box-shadow: var(--shadow-xs);
}
.impact-section:hover { border-color: var(--border-hover); }

.impact-headline {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.impact-headline.type-negative { color: var(--error); }
.impact-headline.type-warning { color: var(--warning); }
.impact-headline.type-positive { color: var(--success); }
.impact-headline.type-neutral { color: var(--text-primary); }

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

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

.impact-comparison .impact-vs-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.impact-missing {
  flex: 1;
  font-size: 12px;
}

.impact-missing .missing-title {
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.impact-missing .missing-query {
  color: var(--error);
  padding: 6px 0;
  font-size: 11px;
  border-bottom: 1px solid var(--border-subtle);
}

.impact-missing .missing-query:last-child { border-bottom: none; }

.impact-cta {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* ════════════════════════════════════════════════════════
   SCORE META SECTION (inline metric pills)
   ════════════════════════════════════════════════════════ */

.score-meta-section {
  margin: 12px 0 16px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.score-meta-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.score-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-tertiary);
  padding: 10px 16px;
  border-radius: 10px;
  min-width: 100px;
}
.score-meta-item--danger {
  background: var(--error-bg);
}
.score-meta-item--danger .score-meta-value {
  color: var(--error);
}
.score-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.score-meta-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════
   DEEP OPPORTUNITIES (numbered list with accent border)
   ════════════════════════════════════════════════════════ */

.deep-opp-section {
  margin: 0 0 24px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  border-left: 4px solid var(--warning);
  box-shadow: var(--shadow-xs);
}
.deep-opp-header {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.deep-opp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deep-opp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.deep-opp-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.deep-opp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--warning);
  color: var(--text-on-warning);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.deep-opp-text {
  color: var(--text-primary);
  padding-top: 2px;
}

/* ════════════════════════════════════════════════════════
   COMPETITOR SoV CARDS
   ════════════════════════════════════════════════════════ */

.sov-comp-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.sov-comp-item:last-child { border-bottom: none; }

.sov-comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sov-comp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.sov-comp-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.sov-comp-bar-wrap {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  margin-bottom: 6px;
  overflow: hidden;
}
.sov-comp-bar-wrap .sov-bar {
  height: 100%;
  border-radius: 3px;
}
.sov-comp-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.sov-comp-meta span {
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   LEADERBOARD (new component)
   ════════════════════════════════════════════════════════ */

.leaderboard {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration);
}
.leaderboard__row:nth-child(even) {
  background: rgba(241,245,249,0.5);
}
.leaderboard__row:hover {
  background: var(--bg-hover);
}
.leaderboard__row:last-child {
  border-bottom: none;
}

.leaderboard__row--you {
  background: var(--primary-glow) !important;
  border-left: 3px solid var(--primary);
  font-weight: 600;
}

.leaderboard__rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.leaderboard__rank--1 {
  background: linear-gradient(135deg, #FFD060 0%, #FFB020 100%);
  color: var(--text-on-warning);
}
.leaderboard__rank--2 {
  background: linear-gradient(135deg, var(--border-default, #2A3A28) 0%, var(--text-muted, #7B8874) 100%);
  color: var(--text-on-dark);
}
.leaderboard__rank--3 {
  background: linear-gradient(135deg, #d4a574 0%, #b8860b 100%);
  color: var(--text-on-dark);
}

.leaderboard__name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: right;
}

.leaderboard__bar {
  flex: 0 0 120px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.leaderboard__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.4s var(--ease);
}
.leaderboard__row--you .leaderboard__bar-fill {
  background: var(--primary-dark);
}

.leaderboard__bar-wrap {
  flex: 0 0 100px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.leaderboard__bar-wrap .sov-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.4s var(--ease);
}

.leaderboard__stats {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 140px;
  justify-content: flex-end;
}

.leaderboard__sov {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.leaderboard__mentions {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.leaderboard__row--alt {
  background: rgba(241,245,249,0.5);
}

/* ════════════════════════════════════════════════════════
   VISIBILITY CHART (new component, Chart.js container)
   ════════════════════════════════════════════════════════ */

.visibility-chart {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.visibility-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.visibility-chart__title {
  font-size: 16px;
  font-weight: 600;
}
.visibility-chart__canvas {
  width: 100%;
  height: 280px;
}
.visibility-chart__canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.visibility-chart__canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.visibility-chart__legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.visibility-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--duration);
}
.visibility-chart__legend-item:hover {
  color: var(--text-primary);
}
.visibility-chart__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── ChartCard (new component) ── */
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 24px;
}
.chart-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}
.chart-card__header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.chart-card__body {
  padding: 16px 24px 24px;
}

/* ════════════════════════════════════════════════════════
   TEMPLATES
   ════════════════════════════════════════════════════════ */

.template-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.template-card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.template-card-header h4 { font-size: 13px; font-weight: 700; color: var(--text-primary); }

.template-card p {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   ACTION PLAN
   ════════════════════════════════════════════════════════ */

.plan-summary-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  margin-bottom: 20px;
  border-left: 4px solid var(--primary);
}
.plan-summary-icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-summary-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.plan-summary-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
}
.plan-summary-projection {
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

.plan-impact-card {
  padding: 20px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  margin-bottom: 24px;
}
.plan-impact-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-weight: 600;
}
.plan-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.plan-impact-item {
  text-align: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}
.plan-impact-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.plan-impact-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.plan-impact-projection {
  margin-top: 16px;
  padding: 10px 16px;
  background: rgba(0, 168, 132, 0.08);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* Filter buttons */
.plan-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.plan-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.plan-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.plan-filter-btn.active {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

/* Action cards */
.plan-action-card {
  padding: 20px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-action-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.plan-action-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.plan-action-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.plan-action-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.plan-layer-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.plan-action-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.plan-meta-item {
  font-size: 12px;
  color: var(--text-secondary);
}
.plan-gain {
  color: var(--success);
  font-weight: 600;
}
.plan-action-why {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.plan-action-steps {
  margin: 8px 0 0 0;
  padding-left: 24px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.plan-action-steps li {
  margin-bottom: 2px;
}

/* Quick wins */
.plan-qw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-primary);
  transition: border-color var(--duration);
}
.plan-qw-item:hover {
  border-color: var(--border-hover);
}
.plan-qw-check {
  font-size: 16px;
  flex-shrink: 0;
}

/* Content plan */
.plan-content-item {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color var(--duration);
}
.plan-content-item:hover {
  border-color: var(--border-hover);
}
.plan-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.plan-content-priority {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.plan-content-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.plan-content-query {
  font-size: 11px;
  color: var(--text-muted);
}

/* Competitive strategy */
.plan-comp-card {
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.plan-comp-enemy {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.plan-comp-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--error);
}
.plan-comp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.plan-comp-detail {
  margin-bottom: 12px;
}
.plan-comp-detail p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════
   KANBAN
   ════════════════════════════════════════════════════════ */

.kanban-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.plan-kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.plan-kanban-5 {
  grid-template-columns: repeat(5, minmax(260px, 1fr));
}
.plan-kanban-6 {
  grid-template-columns: repeat(6, minmax(260px, 1fr));
}
.kanban-col {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 200px;
  min-width: 260px;
}
.kanban-col-impact {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.15);
}
.kanban-col-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 12px;
  padding: 8px 4px;
  border-bottom: 2px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  z-index: 1;
}
.kanban-count {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  min-width: 18px;
  text-align: center;
}
.kanban-card {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.kanban-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kanban-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
  line-height: 1.4;
}
.kanban-card-query {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-style: italic;
}
.kanban-card-competitor {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.kanban-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.kanban-card-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.btn-kanban {
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-kanban-fwd:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateX(2px);
}
.btn-kanban-back:hover {
  border-color: var(--text-muted);
  color: var(--text-secondary);
  transform: translateX(-2px);
}
.btn-kanban:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.kanban-empty {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 20px 0;
}

/* Impact indicators */
.impact-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.impact-improved {
  color: var(--success);
  background: rgba(16, 185, 129, 0.12);
}
.impact-worsened {
  color: var(--error);
  background: rgba(239, 68, 68, 0.12);
}
.impact-unchanged {
  color: var(--text-muted);
  background: var(--bg-tertiary);
}
.kanban-card-impact {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
}
.kanban-card-url {
  font-size: 11px;
  color: var(--primary);
  word-break: break-all;
  margin-top: 4px;
}

/* Impact summary bar */
.kanban-impact-summary {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  margin-top: 12px;
}
.kanban-impact-stat {
  font-size: 13px;
  color: var(--text-secondary);
}
.kanban-impact-stat strong {
  font-size: 18px;
  display: block;
  margin-bottom: 2px;
}

/* Badge types for tasks */
.badge-action { background: rgba(0, 168, 132, 0.15); color: var(--primary); }
.badge-content { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.badge-optimization { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

/* ════════════════════════════════════════════════════════
   AI GROWTH ASSISTANT
   ════════════════════════════════════════════════════════ */

.assistant-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-xs);
}
.assistant-header {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.assistant-focus {
  background: var(--primary-glow);
  border-left: 3px solid var(--primary);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.assistant-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 16px 0 8px;
}
.assistant-priority-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.assistant-priority-item:last-child { border-bottom: none; }
.assistant-priority-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.assistant-priority-content { flex: 1; }
.assistant-priority-text { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.assistant-priority-reason { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.assistant-priority-impact {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.assistant-priority-impact.high { background: rgba(239,68,68,0.1); color: var(--error); }
.assistant-priority-impact.medium { background: rgba(255,176,32,0.1); color: #FFB020; }
.assistant-priority-impact.low { background: var(--bg-tertiary); color: var(--text-muted); }

.assistant-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  border-left: 3px solid transparent;
}
.assistant-alert.critical {
  background: rgba(239,68,68,0.06);
  border-left-color: var(--error);
  color: var(--error);
}
.assistant-alert.warning {
  background: rgba(255,176,32,0.06);
  border-left-color: #FFB020;
  color: #CC8D1A;
}
.assistant-alert.info {
  background: var(--primary-glow);
  border-left-color: var(--primary);
  color: var(--primary);
}
.assistant-alert-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.assistant-alert.critical .assistant-alert-icon { background: var(--error); color: var(--text-on-danger); }
.assistant-alert.warning .assistant-alert-icon { background: var(--warning); color: var(--text-on-warning); }
.assistant-alert.info .assistant-alert-icon { background: var(--primary); color: var(--text-on-info); }

.assistant-action-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.assistant-action-item:last-child { border-bottom: none; }
.assistant-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.assistant-action-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.assistant-action-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.assistant-cta {
  margin-top: 16px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════
   ALERTS
   ════════════════════════════════════════════════════════ */

.alerts-badge {
  background: var(--error);
  color: var(--text-on-danger);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
}

.alert-item {
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  border-left: 4px solid transparent;
  transition: box-shadow var(--duration);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle, transparent);
  border-left-width: 4px;
}
.alert-item + .alert-item {
  margin-top: 10px;
}
.alert-item:hover {
  box-shadow: var(--shadow-sm);
}
.alert-item.critical {
  background: var(--error-soft, rgba(239,68,68,0.05));
  border-left-color: var(--error);
}
.alert-item.warning {
  background: var(--warning-soft, rgba(255,176,32,0.05));
  border-left-color: var(--warning);
}
.alert-item.info {
  background: var(--primary-glow);
  border-left-color: var(--primary);
}
.alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.alert-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.alert-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.alert-more {
  font-size: 12px;
  color: var(--primary);
  text-align: center;
  padding: 8px;
  cursor: pointer;
}
.alerts-synthetic-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 4px 10px;
  background: var(--primary-glow);
  border-radius: 20px;
  display: inline-block;
}

/* ── Vertical KPI Cards (Product Mentions, Finance Routing, etc.) ── */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius, 12px);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.kpi-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kpi-card__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kpi-card__value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════
   BENCHMARK
   ════════════════════════════════════════════════════════ */

.benchmark-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-xs);
}
.benchmark-header {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.benchmark-headline {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.benchmark-risk {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.benchmark-risk-critical { background: rgba(239,68,68,0.08); color: var(--error); }
.benchmark-risk-warning { background: rgba(245,158,11,0.08); color: #b45309; }
.benchmark-risk-info { background: var(--primary-glow); color: var(--primary); }
.benchmark-incomplete { border-color: rgba(245,158,11,0.3); }
.benchmark-completion-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255,176,32,0.06);
  border-radius: 8px;
  margin-bottom: 14px;
  border-left: 3px solid #FFB020;
}
.benchmark-coverage-progress { margin-bottom: 14px; }
.benchmark-coverage-badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.benchmark-coverage-complete { background: rgba(47,191,113,0.08); color: #26A65E; }
.coverage-widget {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
}
.coverage-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coverage-widget-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.coverage-widget-pct { font-size: 18px; }
.coverage-complete { border-color: rgba(34,197,94,0.3); }
.coverage-partial { border-color: rgba(245,158,11,0.3); }
.coverage-low { border-color: rgba(239,68,68,0.3); }
.benchmark-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.benchmark-stat { text-align: center; }
.benchmark-stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.benchmark-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}
.benchmark-opportunity {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: rgba(255,176,32,0.06);
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid #FFB020;
}
.benchmark-pressure {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 12px;
  background: rgba(239,68,68,0.04);
  border-radius: 8px;
  margin-bottom: 14px;
  border-left: 3px solid var(--error);
}
.benchmark-actions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.benchmark-actions { display: flex; flex-direction: column; gap: 6px; }
.benchmark-action-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.benchmark-action-item:last-child { border-bottom: none; }
.benchmark-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.benchmark-action-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.benchmark-action-detail {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════
   ENGINE DETAIL
   ════════════════════════════════════════════════════════ */

.engine-detail-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.engine-detail-item:last-child { border-bottom: none; }
.engine-detail-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.engine-detail-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════
   DASHBOARD V2 — COMPLETE REWRITE
   ════════════════════════════════════════════════════════ */

/* Container */
.db2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Insight Banner ── */
.db2-insight {
  background: linear-gradient(135deg, rgba(0,168,132,0.06) 0%, rgba(0,168,132,0.01) 100%);
  border: 1px solid rgba(0,168,132,0.12);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.db2-insight--warning {
  background: linear-gradient(135deg, var(--warning-soft, rgba(255,176,32,0.06)) 0%, transparent 100%);
  border-color: var(--warning-border, rgba(255,176,32,0.15));
}
.db2-insight--negative {
  background: linear-gradient(135deg, var(--error-soft, rgba(239,68,68,0.05)) 0%, transparent 100%);
  border-color: var(--error-border, rgba(239,68,68,0.15));
}
.db2-insight--positive {
  background: linear-gradient(135deg, var(--success-soft, rgba(47,191,113,0.06)) 0%, transparent 100%);
  border-color: var(--success-border, rgba(47,191,113,0.15));
}
.db2-insight--neutral {
  background: linear-gradient(135deg, var(--primary-soft, rgba(0,168,132,0.06)) 0%, transparent 100%);
  border-color: var(--primary-border, rgba(0,168,132,0.12));
}
.db2-insight__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--primary-soft, rgba(0,168,132,0.1));
  color: var(--primary);
}
.db2-insight--warning .db2-insight__icon { background: var(--warning-soft, rgba(255,176,32,0.1)); color: var(--warning); }
.db2-insight--negative .db2-insight__icon { background: var(--error-soft, rgba(239,68,68,0.08)); color: var(--error); }
.db2-insight--positive .db2-insight__icon { background: var(--success-soft, rgba(47,191,113,0.08)); color: var(--success); }
.db2-insight__body {
  flex: 1;
  min-width: 0;
}
.db2-insight__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.db2-insight__desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.db2-insight__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ── KPI Grid ── */
.db2-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.db2-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: relative;
  transition: all var(--duration) var(--ease);
  box-shadow: var(--shadow-xs);
}
.db2-kpi:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.db2-kpi--accent {
  border-color: var(--primary-border, rgba(0,168,132,0.15));
  background: linear-gradient(135deg, var(--primary-soft, rgba(0,168,132,0.03)) 0%, var(--bg-card) 100%);
}
.db2-kpi__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.db2-kpi__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.db2-kpi__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.db2-kpi--accent .db2-kpi__value {
  color: var(--primary);
}
.db2-kpi__delta {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.db2-kpi__delta--up { color: var(--success); background: var(--success-bg); }
.db2-kpi__delta--down { color: var(--error); background: var(--error-bg); }
.db2-kpi__explain {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
  line-height: 1.4;
  min-height: 16px;
}

/* ── Section Card (reusable wrapper) ── */
.db2-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: all var(--duration) var(--ease);
}
.db2-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}
.db2-card__header {
  padding: 14px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.db2-card__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.db2-card__body {
  padding: 12px 16px 16px;
}

/* ── Visibility Chart ── */
.db2-chart {
  position: relative;
}
.db2-chart__canvas {
  width: 100%;
  height: 220px;
}

/* ── Leaderboard ── */
.db2-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.db2-lb__row {
  display: grid;
  grid-template-columns: 36px 1fr 140px 100px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.db2-lb__row:last-child { border-bottom: none; }
.db2-lb__rank {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.db2-lb__rank--1 { background: linear-gradient(135deg, var(--warning-soft, rgba(255,176,32,0.2)), var(--warning, #FFB020)); color: var(--bg-primary, #0D1A0A); }
.db2-lb__rank--2 { background: linear-gradient(135deg, var(--bg-tertiary, #1A2E18), var(--text-muted, #7B8874)); color: var(--text-secondary, #B8C4B0); }
.db2-lb__rank--3 { background: linear-gradient(135deg, var(--accent-soft, rgba(184,230,46,0.15)), var(--accent, #B8E62E)); color: var(--bg-primary, #0D1A0A); }
.db2-lb__rank--you {
  background: linear-gradient(135deg, rgba(0,168,132,0.15), rgba(0,168,132,0.3));
  color: var(--primary);
  font-weight: 800;
}
.db2-lb__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db2-lb__name--you {
  color: var(--primary);
  font-weight: 700;
}
.db2-lb__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.db2-lb__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.db2-lb__bar-fill--comp {
  background: var(--text-tertiary);
}
.db2-lb__sov {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Next Actions ── */
.db2-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.db2-action {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.db2-action:last-child { border-bottom: none; }
.db2-action__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.db2-action__content {
  flex: 1;
  min-width: 0;
}
.db2-action__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.db2-action__desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.5;
}
.db2-action__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.db2-action__badge--high { background: var(--error-bg); color: var(--error); }
.db2-action__badge--medium { background: var(--warning-bg); color: var(--warning); }
.db2-action__badge--low { background: rgba(107,114,128,0.08); color: var(--text-secondary); }

/* ── Two-column layout ── */
.db2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.db2-row--single-col {
  grid-template-columns: 1fr;
}
.db2-row--single-col .db2-lb__row {
  grid-template-columns: 36px 1fr 200px 100px;
}
.db2-row--empty {
  grid-template-columns: 1fr;
}
.db2-empty-analysis {
  grid-column: 1 / -1;
}

/* ── Quick Actions Bar ── */
.db2-quickbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 11px 11px;
}

/* ── Score Meta ── */
.db2-score-meta {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
}
.db2-score-meta__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db2-score-meta__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.db2-score-meta__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.db2-score-meta__value--danger { color: var(--error); }

/* ── Dashboard message ── */
.db2-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  display: none;
}
.db2-msg.success { display: block; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.db2-msg.error { display: block; background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error); }

/* ── Dashboard V2 Responsive ── */
@media (max-width: 1024px) {
  .db2-kpis, .m-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .db2-row { grid-template-columns: 1fr; }
  .db2-lb__row { grid-template-columns: 36px 1fr 100px 80px; }
}
@media (max-width: 640px) {
  .db2-kpis, .m-metrics-grid { grid-template-columns: 1fr; }
  .m-card { padding: 14px; }
  .m-value { font-size: 22px; }
  .m-label { font-size: 10px; }
  .db2-insight { flex-direction: column; padding: 20px; }
  .db2-lb__row { grid-template-columns: 28px 1fr 70px; }
  .db2-lb__bar { display: none; }
  .db2 { gap: 16px; }
}

/* ════════════════════════════════════════════════════════
   MICRO-ANIMATIONS
   ════════════════════════════════════════════════════════ */

/* Page entrance */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card entrance (staggered) */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-card, .metric-card, .action-card, .recommendation-card {
  animation: cardIn 0.3s var(--ease) both;
}
.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.1s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }

/* Toast entrance */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Counter animation utility */
@keyframes countUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Subtle pulse for status dots */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.badge-dot--active {
  animation: subtlePulse 2s ease-in-out infinite;
}

/* Smooth hover for cards */
.stat-card, .action-card, .section-half, .section-full {
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

/* Smooth score bar fill */
@keyframes barFill {
  from { width: 0; }
}
.score-bar__fill, .progress-bar__fill {
  animation: barFill 0.6s var(--ease) both;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — CONSOLIDATED BREAKPOINTS
   ════════════════════════════════════════════════════════ */

/* ── Tablet: <= 1024px ── */
@media (max-width: 1024px) {
  .content-shell {
    padding: 0 var(--sp-4);
  }
  .stat-card-grid, .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile landscape / small tablet: <= 768px ── */
@media (max-width: 768px) {
  /* Sidebar → hidden (mobile drawer) */
  .sidebar {
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: none;
    transition: transform 0.25s var(--ease);
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
  }
  .sidebar.mobile-open,
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .sidebar-overlay.visible,
  .sidebar-overlay.open {
    display: block;
    z-index: 190;
  }
  .sidebar-collapse-btn { display: none !important; }
  .sidebar-toggle { display: block; }

  .app-main {
    margin-left: 0 !important;
  }
  .sidebar.collapsed ~ .app-main {
    margin-left: 0;
  }

  .content-shell {
    padding: 0 var(--sp-3);
  }

  /* Page header stacks */
  .page-header-row {
    flex-direction: column;
    gap: 8px;
  }

  /* KPI cards stack */
  .stat-card-grid, .kpi-grid, .m-metrics-grid {
    grid-template-columns: 1fr;
  }

  /* Hide product info on mobile */
  .t-product-info { display: none; }

  /* Grid layouts */
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .section-row { grid-template-columns: 1fr; }

  /* Table responsive */
  .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 600px;
  }

  /* Filter row wraps */
  .filter-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Modals full width */
  .modal-panel, .modal-content {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 8px;
  }

  /* Drawer full width */
  .drawer {
    width: 100%;
    max-width: 100%;
  }

  /* How it works steps stack */
  .how-it-works__steps {
    grid-template-columns: 1fr;
  }

  /* Bulk action bar */
  .bulk-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }

  /* Button groups wrap */
  .btn-group {
    flex-wrap: wrap;
  }

  /* Form rows stack */
  .form-row { flex-direction: column; gap: 0; }

  /* Top bar adjustments */
  .app-topbar {
    padding: 0 var(--sp-3);
  }
  .app-user {
    font-size: 11px;
  }

  /* Existing 768px rules preserved */
  .tab-content { padding: 16px 0 24px; }
  .run-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .impact-details { grid-template-columns: 1fr; gap: 16px; }
  .evolution-grid { flex-direction: column; gap: 12px; }
  .plan-impact-grid { grid-template-columns: 1fr; }
  .plan-kanban, .plan-kanban-5, .plan-kanban-6 { grid-template-columns: 1fr; }
  .plan-filter-row { flex-wrap: wrap; }
  .kanban-header-row { flex-direction: column; }
  .kanban-impact-summary { flex-wrap: wrap; }
  .leaderboard__bar { flex: 0 0 80px; }
  .action-card__body { flex-direction: column; }
  .action-card__secondary { margin-left: 0; }
  .visibility-chart__legend { flex-wrap: wrap; gap: 8px; }
  .pg-header { flex-direction: column; gap: 10px; }
  .pg-header__actions { flex-wrap: wrap; }
  .summary-bar { flex-wrap: wrap; }
  .summary-item { min-width: calc(50% - 8px); }
  .filters-toolbar { flex-wrap: wrap; }
  .filters-toolbar__search { max-width: none; }
  .qrow__actions { opacity: 1; }
  .qrow__priority-label { display: none; }
}

/* ── Mobile: <= 480px ── */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  h1, .h1 {
    font-size: 22px;
  }
  h2, .h2 {
    font-size: 18px;
  }

  .page-title {
    font-size: 18px;
  }

  .card {
    padding: 16px;
    border-radius: var(--radius-sm);
  }

  .stat-card {
    padding: 12px;
  }

  /* Tab content less padding */
  .tab-content {
    padding: 12px 0 24px;
  }

  /* Answer modal takes full screen */
  .answer-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  /* Action plan cards */
  .action-card {
    padding: 16px;
  }

  /* Sidebar label smaller */
  .sidebar-label {
    font-size: 8px;
  }

  /* Existing 480px rules preserved */
  .stat-grid { grid-template-columns: 1fr; }
  .tab-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .leaderboard__row { padding: 10px 12px; }
  .leaderboard__bar { display: none; }
  .score-meta-grid { flex-direction: column; }
  .score-meta-item { min-width: 0; }
  .logo-img { max-width: 260px; }
  .logo { margin-bottom: 24px; }
}

/* ════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

/* ════════════════════════════════════════════════════════
   MIXED SENTIMENT BADGE
   ════════════════════════════════════════════════════════ */
.badge-mixed { background: rgba(0,168,132,0.1); color: var(--primary); }

/* ════════════════════════════════════════════════════════
   ANSWER MENTION TABS
   ════════════════════════════════════════════════════════ */
.mention-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.mention-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.mention-tab-count {
  display: inline-block;
  min-width: 18px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════
   ANSWER ROW CLICKABLE
   ════════════════════════════════════════════════════════ */
.answer-row:hover {
  background: var(--bg-hover);
}
.answer-row td {
  transition: background 0.15s;
}

/* ════════════════════════════════════════════════════════
   ANALYTICS SECTION
   ════════════════════════════════════════════════════════ */
.analytics-section {
  padding-bottom: 24px;
}
.analytics-section h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════
   KEYWORD TAGS
   ════════════════════════════════════════════════════════ */
.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}
.keyword-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: default;
}
.keyword-tag small {
  opacity: 0.6;
  font-size: 0.85em;
}
.keyword-positive {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}
.keyword-negative {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error-border);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE: ANALYTICS KEYWORDS
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .analytics-section div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════
   KANBAN EXECUTION BUTTONS
   ════════════════════════════════════════════════════════ */
.btn-kanban-exec {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-kanban-exec:hover {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* ════════════════════════════════════════════════════════
   RECOMMENDATION STATUS BADGES
   ════════════════════════════════════════════════════════ */
.badge-pendente, .badge-open { background: var(--warning, #FFB020); color: var(--text-on-warning); }
.badge-aceita, .badge-accepted { background: var(--success); color: var(--text-on-success); }
.badge-em\ execução, .badge-in_progress { background: var(--accent); color: var(--text-on-accent); }
.badge-concluída, .badge-completed { background: var(--text-muted); color: var(--text-on-dark); }
.badge-descartada, .badge-dismissed { background: var(--text-tertiary); color: var(--text-on-dark); }

/* ════════════════════════════════════════════════════════
   ALERTS PAGE
   ════════════════════════════════════════════════════════ */
.alert-read { opacity: 0.6; }

/* ════════════════════════════════════════════════════════
   CHAT QUICK-ACTION BUTTONS
   ════════════════════════════════════════════════════════ */
.chat-quick-btn {
  font-size: 13px;
  padding: 8px 16px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-secondary, #B8C4B0);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-quick-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* ════════════════════════════════════════════════════════
   CHAT — ACTION PANEL
   ════════════════════════════════════════════════════════ */

/* Container */
.chat-msg-assistant .chat-bubble-rich {
  background: var(--bg-card);
  border: 1px solid var(--border-default, #2A3A28);
  padding: 20px;
  border-radius: 16px 16px 16px 4px;
  max-width: min(90%, 640px);
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.action-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

/* Header */
.ap-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ap-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #F5F5F0);
  margin: 0;
  line-height: 1.3;
}
.ap-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ap-badge.urgent  { background: #FEE2E2; color: #DC2626; }
.ap-badge.high    { background: #FEF3C7; color: #D97706; }
.ap-badge.medium  { background: var(--primary-soft); color: var(--primary); }
.ap-badge.low     { background: #D1FAE5; color: #059669; }

/* Summary */
.ap-summary {
  background: var(--bg-secondary, #0F1E0D);
  border: 1px solid var(--border-default, #2A3A28);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary, #B8C4B0);
}
.ap-summary strong { color: var(--text-primary, #F5F5F0); }

/* Callout */
.ap-callout {
  background: var(--warning-soft, rgba(255,176,32,0.1));
  border-left: 3px solid #FFB020;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: #7A5A0A;
  line-height: 1.5;
}

/* Priority Section */
.ap-priority {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 12px;
  padding: 16px;
}
.ap-priority.p1 { background: #FEF2F2; border: 1px solid #FECACA; }
.ap-priority.p2 { background: var(--warning-soft, rgba(255,176,32,0.1)); border: 1px solid #FFE88A; }
.ap-priority.p3 { background: #F0FDF4; border: 1px solid #BBF7D0; }
.ap-priority.neutral { background: var(--bg-secondary, #0F1E0D); border: 1px solid var(--border-default, #2A3A28); }

.ap-priority-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ap-priority-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ap-priority.p1 .ap-priority-dot { background: #F97066; }
.ap-priority.p2 .ap-priority-dot { background: #FFB020; }
.ap-priority.p3 .ap-priority-dot { background: #2FBF71; }
.ap-priority.neutral .ap-priority-dot { background: #7B8874; }

.ap-priority-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #F5F5F0);
}
.ap-priority-sublabel {
  font-size: 12px;
  color: #7B8874;
  margin-top: -4px;
}

/* Query Card */
.query-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default, #2A3A28);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.query-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,168,132,0.10);
  transform: translateY(-2px);
}
.query-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #F5F5F0);
  margin-bottom: 6px;
}
.query-card-reason {
  font-size: 12px;
  color: #7B8874;
  line-height: 1.5;
  margin-bottom: 8px;
}
.query-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.qc-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.qc-tag.gap        { background: #FEE2E2; color: #DC2626; }
.qc-tag.competitor  { background: #FEF3C7; color: #D97706; }
.qc-tag.approved    { background: #D1FAE5; color: #059669; }
.qc-tag.comparison  { background: rgba(0,168,132,0.10); color: var(--primary); }
.qc-tag.purchase    { background: var(--primary-soft); color: var(--primary); }
.qc-tag.open-window { background: #ECFDF5; color: #065F46; }

.query-card-actions {
  display: flex;
  gap: 8px;
}
.qc-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.qc-btn.primary {
  background: var(--primary);
  color: var(--text-on-primary);
}
.qc-btn.primary:hover { background: var(--primary-dark); }
.qc-btn.secondary {
  background: var(--bg-tertiary, #1A2E18);
  color: var(--text-secondary, #B8C4B0);
  border: 1px solid var(--border-default);
}
.qc-btn.secondary:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Action Checklist */
.ap-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ap-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary, #B8C4B0);
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default, #2A3A28);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.ap-check-item:hover { border-color: var(--primary); }
.ap-check-icon {
  min-width: 22px;
  height: 22px;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ap-check-text { flex: 1; }
.ap-check-text strong { color: var(--text-primary, #F5F5F0); }

/* Timing label inside checklist */
.ap-check-when {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,168,132,0.10);
  color: var(--primary);
  white-space: nowrap;
  align-self: center;
}

/* Score bar */
.ap-score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary, #0F1E0D);
  border: 1px solid var(--border-default, #2A3A28);
  border-radius: 10px;
}
.ap-score-value {
  font-size: 28px;
  font-weight: 800;
  color: #DC2626;
  line-height: 1;
}
.ap-score-label {
  font-size: 12px;
  color: #7B8874;
}
.ap-score-label strong { color: var(--text-primary, #F5F5F0); }
.ap-score-track {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary, #1A2E18);
  border-radius: 3px;
  overflow: hidden;
}
.ap-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Chat Turn Blocks */
.chat-turn {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default, #2A3A28);
}
.chat-turn:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.chat-turn-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #7B8874);
  margin-bottom: 6px;
}

.chat-user-question {
  background: var(--primary-soft);
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
}

.chat-assistant-answer {
  background: transparent;
}

/* Loading skeleton */
.chat-loading-skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--bg-secondary, #0F1E0D);
  border: 1px solid var(--border-default, #2A3A28);
  border-radius: 12px;
  font-size: 13px;
  color: #7B8874;
}
.chat-loading-dot {
  display: inline-flex;
  gap: 4px;
}
.chat-loading-dot span {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: chatPulse 1.2s ease-in-out infinite;
}
.chat-loading-dot span:nth-child(2) { animation-delay: 0.15s; }
.chat-loading-dot span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
  .chat-msg-assistant .chat-bubble-rich { max-width: 95%; padding: 14px; }
  .ap-priority { padding: 12px; }
  .query-card-actions { flex-direction: column; }
  .qc-btn { width: 100%; text-align: center; }
  .chat-user-question { padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════
   PREMIUM DESIGN SYSTEM ENHANCEMENTS
   ════════════════════════════════════════════════════════ */

/* ── Loading Skeleton (universal) ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-elevated) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 80%;
}
.skeleton-text:last-child { width: 60%; }
.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.skeleton-kpi {
  height: 100px;
  border-radius: var(--radius-lg);
}


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

/* ── Tab Header Premium ── */
.tab-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tab-header h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--gradient-btn);
  border-radius: 2px;
}

/* ── Premium Data Table ── */
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody tr {
  animation: fadeIn 0.3s ease;
}

/* ── Topbar glass effect enhancement ── */
.app-topbar {
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* ── Card hover micro-interactions ── */
.stat-card,
.metric-card,
.section-half,
.section-full,
.plan-action-card,
.kanban-card,
.template-card,
.benchmark-card,
.assistant-card {
  will-change: transform, box-shadow;
}

/* ── Focus ring for accessibility ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Smooth page transitions ── */
.tab-content {
  animation: pageIn 0.25s var(--ease);
}

/* ── Selection color ── */
::selection {
  background: rgba(0, 168, 132, 0.20);
  color: var(--text-primary);
}

/* ── Improved filter row ── */
.filter-row select,
.filter-row input {
  height: 36px;
  border-radius: var(--radius-sm);
}

/* ── Status dot utility ── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot--success { background: var(--success); }
.status-dot--warning { background: var(--warning); }
.status-dot--error { background: var(--error); }
.status-dot--info { background: var(--primary); }

/* ── Gradient text utility ── */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Card group spacing consistency ── */
.card-list .card-item,
.run-card,
.alert-item,
.plan-action-card {
  transition: all 0.2s var(--ease);
}

/* ── Badge pill improvement ── */
.badge {
  line-height: 1;
  white-space: nowrap;
}

/* ── Admin Backoffice Shell ── */
.admin-shell, .agency-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-primary, #0D1A0A);
}
.admin-sidebar, .agency-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--bg-card, #132110);
  border-right: 1px solid var(--border, #243420);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.admin-sidebar-brand, .agency-sidebar-brand {
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--border, #243420);
}
.admin-sidebar-brand strong, .agency-sidebar-brand strong {
  display: block;
  font-size: 15px;
  color: var(--text-primary, #E8EDE5);
}
.admin-sidebar-brand small {
  display: block;
  font-size: 11px;
  color: var(--text-secondary, #8B9A83);
  margin-top: 2px;
}
.admin-sidebar-nav, .agency-sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}
.admin-nav-tab, .agency-nav-tab {
  display: block;
  padding: 10px 20px;
  color: var(--text-secondary, #8B9A83);
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
.admin-nav-tab:hover, .agency-nav-tab:hover {
  color: var(--text-primary, #E8EDE5);
  background: rgba(0,168,132,0.08);
}
.admin-nav-tab.active, .agency-nav-tab.active {
  color: var(--accent, #5EEBC2);
  border-left-color: var(--accent, #5EEBC2);
  background: rgba(0,168,132,0.12);
}
.admin-sidebar-footer, .agency-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #243420);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-sidebar-footer a, .agency-sidebar-footer a {
  color: var(--text-secondary, #8B9A83);
  text-decoration: none;
  font-size: 12px;
}
.admin-sidebar-footer a:hover, .agency-sidebar-footer a:hover {
  color: var(--accent, #5EEBC2);
}
.admin-main, .agency-main {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  max-height: 100vh;
}
.admin-tab-content, .agency-tab-content {
  display: none;
}
.admin-tab-content.active, .agency-tab-content.active {
  display: block;
}

/* ── Product Mentions: Image thumbnails ─────────────────────────────── */
.pm-thumb-cell {
  width: 52px;
  padding: 6px 4px 6px 8px !important;
}
.pm-product-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
}
.pm-product-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.pm-detail-products {
  margin-top: 16px;
}
.pm-detail-products h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pm-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.pm-product-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.pm-detail-img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
}
.pm-detail-img.pm-product-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.pm-product-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-product-card__info strong {
  font-size: 0.85rem;
  text-transform: capitalize;
}
.pm-product-card__category {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pm-product-card__context {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Shopping Intelligence: additional styles ───────────────────────── */
.pm-product-name-cell {
  max-width: 220px;
}
.pm-product-name-cell strong {
  font-size: 0.85rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-merchant-hint {
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.pm-source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.pm-source--own {
  background: var(--primary-soft);
  color: var(--primary);
}
.pm-source--comp {
  background: var(--error-soft, rgba(239,68,68,0.08));
  color: var(--error);
}
.pm-source--third {
  background: var(--warning-soft, rgba(255,176,32,0.08));
  color: var(--warning);
}
.pm-source--unconf {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}
.pm-detail-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.pm-detail-hero-img {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
}
.pm-detail-hero-img.pm-product-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.pm-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pm-metric {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  text-align: center;
}
.pm-metric__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.pm-metric__value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pm-image-source-info {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  font-style: italic;
}
.pm-image-source-info--empty {
  color: var(--text-tertiary);
  opacity: 0.7;
}

.pm-resolve-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.pm-resolve-panel__content strong {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}
.pm-resolve-panel__content p {
  font-size: 0.82rem;
  margin: 0 0 10px;
  color: var(--text-secondary);
}
.pm-resolve-status {
  font-size: 0.8rem;
  margin-left: 10px;
  color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════
   SKELETON LOADING SHIMMER
   ════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-elevated) 50%, var(--bg-tertiary) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}
.skeleton-text:last-child { width: 60%; }
.skeleton-text--sm { height: 11px; }
.skeleton-text--lg { height: 18px; width: 40%; }

.skeleton-card {
  height: 120px;
  border-radius: var(--radius);
}

.skeleton-kpi {
  height: 100px;
  border-radius: var(--radius);
}

.skeleton-row {
  height: 48px;
  margin-bottom: 4px;
  border-radius: var(--radius-xs);
}

.skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-chart {
  height: 200px;
  border-radius: var(--radius);
}

.skeleton-badge {
  display: inline-block;
  width: 64px;
  height: 22px;
  border-radius: 20px;
}

/* ════════════════════════════════════════════════════════
   DARK THEME (unified for all dark contexts)
   ════════════════════════════════════════════════════════ */

[data-theme="dark"],
body.wl-dark,
body.agency-dark {
  --bg-root: #0D1A0A;
  --bg-primary: #0D1A0A;
  --bg-secondary: #132110;
  --bg-tertiary: #0F1C0C;
  --bg-card: #132110;
  --bg-elevated: #1A2B16;
  --bg-hover: rgba(0,168,132,0.08);
  --bg-subtle: #0F1C0C;

  --border-subtle: #243420;
  --border-default: #243420;
  --border-hover: #2D4225;
  --border-active: #364A2E;

  --text-primary: #E8EDE5;
  --text-secondary: #8B9A83;
  --text-tertiary: #6B7B63;
  --text-quaternary: #3D4D35;

  --primary: #5EEBC2;
  --primary-dark: #00A884;
  --primary-light: #5EEBC2;
  --primary-soft: rgba(0,168,132,0.1);
  --primary-glow: rgba(0,168,132,0.15);
  --primary-glow-md: rgba(0,168,132,0.2);
  --primary-glow-strong: rgba(0,168,132,0.3);
  --accent: #5EEBC2;
  --accent-soft: rgba(0,168,132,0.08);

  --gradient-brand: linear-gradient(135deg, #0D1A0A 0%, #00A884 40%, #5EEBC2 100%);
  --gradient-btn: linear-gradient(135deg, #00A884 0%, #5EEBC2 100%);

  --success: #2FBF71;
  --success-bg: rgba(47,191,113,0.1);
  --success-border: rgba(47,191,113,0.3);
  --error: #F97066;
  --error-bg: rgba(249,112,102,0.1);
  --error-border: rgba(249,112,102,0.3);
  --warning: #FFB020;
  --warning-bg: rgba(255,176,32,0.1);
  --warning-border: rgba(255,176,32,0.3);
  --info: #5EEBC2;
  --info-bg: rgba(0,168,132,0.08);

  --shadow-xs: 0 1px 2px rgba(13,26,10,0.2);
  --shadow-sm: 0 2px 8px rgba(13,26,10,0.3);
  --shadow-md: 0 4px 16px rgba(13,26,10,0.4);
  --shadow-lg: 0 12px 32px rgba(13,26,10,0.5);
  --shadow-card: 0 2px 8px rgba(13,26,10,0.25);
  --shadow-card-hover: 0 8px 24px rgba(13,26,10,0.4);

  /* ── Contrast text (dark mode same — always white-on-color) ── */
  --text-on-primary: #ffffff;
  --text-on-accent: #ffffff;
  --text-on-danger: #ffffff;
  --text-on-success: #ffffff;
  --text-on-warning: #172014;
  --text-on-dark: #E8EDE5;
  --text-on-info: #ffffff;
  --icon-on-primary: #ffffff;
  --border-on-primary: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] body,
body.wl-dark,
body.agency-dark {
  background: var(--bg-root);
  color: var(--text-primary);
}

/* ── Dark theme: Topbar ── */
[data-theme="dark"] .app-topbar {
  background: rgba(13,26,10,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border-default);
}
[data-theme="dark"] .t-product-name {
  color: var(--text-primary);
}
[data-theme="dark"] .t-product-by {
  color: var(--text-secondary);
}
[data-theme="dark"] .t-product-separator {
  color: var(--text-quaternary);
}
[data-theme="dark"] .t-product-version {
  color: var(--text-tertiary);
}
[data-theme="dark"] .t-beta-badge {
  background: rgba(234,179,8,0.12);
  color: #fde68a;
}
[data-theme="dark"] .t-btn {
  border-color: var(--border-default);
  color: var(--text-tertiary);
}
[data-theme="dark"] .t-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
[data-theme="dark"] .t-user-btn {
  border-color: var(--border-default);
  color: var(--text-primary);
}
[data-theme="dark"] .t-user-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
[data-theme="dark"] .t-user-dropdown {
  background: var(--bg-card);
  border-color: var(--border-default);
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .t-user-dropdown-item {
  color: var(--text-primary);
}
[data-theme="dark"] .t-user-dropdown-item:hover {
  background: var(--bg-hover);
}
[data-theme="dark"] .t-user-dropdown-item--danger {
  color: var(--error);
}
[data-theme="dark"] .t-user-dropdown-item--danger:hover {
  background: var(--error-bg);
}
[data-theme="dark"] .t-user-dropdown-sep {
  background: var(--border-default);
}
[data-theme="dark"] .project-selector select {
  background: var(--bg-card);
  border-color: var(--border-default);
  color: var(--text-primary);
}
[data-theme="dark"] .project-selector select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
[data-theme="dark"] .project-selector {
  color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-toggle {
  color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════
   DESIGN SYSTEM UTILITIES (P0 inline style extraction)
   ════════════════════════════════════════════════════════ */

/* ── Text color utilities ── */
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }

/* ── Text alignment ── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* ── Font weight utilities ── */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── Font size utilities ── */
.text-xs { font-size: 10px; }
.text-sm { font-size: 11px; }
.text-base { font-size: 12px; }

/* ── Spacing utilities ── */
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* ── Flex layout utilities ── */
.flex-row { display: flex; }
.flex-row-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-gap-4 { gap: 4px; }
.flex-gap-8 { gap: 8px; }
.flex-gap-12 { gap: 12px; }
.flex-gap-16 { gap: 16px; }

/* ── Grid layout utilities ── */
.grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.grid-auto-220 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Toast notification (extracted from app.js cssText) ── */
.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast, 99999);
  padding: 12px 20px;
  border-radius: 10px;
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s;
}

/* ── Modal overlay (extracted from app.js cssText) ── */
.modal-overlay-dynamic {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9999);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

/* ── Badge with dynamic color via CSS vars ── */
.badge-dynamic {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--badge-bg);
  color: var(--badge-color);
  border: 1px solid var(--badge-border, transparent);
}

/* ── Progress bar with CSS variable width (Part 6) ── */
.bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
  width: var(--bar-width, 0%);
  background: var(--bar-color, var(--primary));
}

/* ── Spinner (extracted from inline) ── */
.spinner-inline {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT SYSTEM (ported from Ads Intelligence)
   Page structures, grids, and responsive patterns
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Container ── */
.ai-page {
  padding: 32px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 1024px) {
  .ai-page { padding: 24px; }
}

@media (max-width: 768px) {
  .ai-page { padding: 16px; }
}

/* ── Page Header ── */
.ai-page-header {
  margin-bottom: 28px;
}

.ai-page-header__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent, var(--primary));
  margin-bottom: 6px;
}

.ai-page-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.2;
}

.ai-page-header__subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 600px;
}

.ai-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ai-page-header--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.ai-page-header--row .ai-page-header__actions {
  margin-top: 0;
}

/* ── Metrics Grid ── */
.ai-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .ai-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
}

/* ── Content Grid ── */
.ai-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.ai-content-grid--2col {
  grid-template-columns: 1fr 1fr;
}

.ai-content-grid--sidebar {
  grid-template-columns: 1fr 320px;
}

.ai-content-grid--wide-sidebar {
  grid-template-columns: 1fr 400px;
}

@media (max-width: 1024px) {
  .ai-content-grid--2col,
  .ai-content-grid--sidebar,
  .ai-content-grid--wide-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ── Chart Grid ── */
.ai-chart-grid {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 14px;
  margin-bottom: 24px;
}

.ai-chart-grid--equal {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 1024px) {
  .ai-chart-grid,
  .ai-chart-grid--equal {
    grid-template-columns: 1fr;
  }
}

/* ── Section ── */
.ai-section {
  margin-bottom: 28px;
}

.ai-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}

.ai-section-header__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ai-section-header__subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.ai-section-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Filter Bar ── */
.ai-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ai-filter-bar__group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-filter-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Dashboard Layout ── */
.ai-layout-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Detail Layout ── */
.ai-layout-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .ai-layout-detail {
    grid-template-columns: 1fr;
  }
}

/* ── List Layout ── */
.ai-layout-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Responsive Stack ── */
.ai-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-row--between {
  justify-content: space-between;
}

@media (max-width: 768px) {
  .ai-page-header--row {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES (ported from Ads Intelligence)
   Small, composable helpers for layout and typography
   ═══════════════════════════════════════════════════════════════ */

/* ── Flex ── */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }

/* ── Gap ── */
.u-gap-1 { gap: 4px; }
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 12px; }
.u-gap-4 { gap: 16px; }
.u-gap-5 { gap: 20px; }
.u-gap-6 { gap: 24px; }

/* ── Grid ── */
.u-grid { display: grid; }
.u-grid-2 { grid-template-columns: 1fr 1fr; }
.u-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.u-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 768px) {
  .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}

/* ── Text ── */
.u-text-muted { color: var(--text-tertiary); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-accent { color: var(--accent, var(--primary)); }
.u-text-success { color: var(--success); }
.u-text-warning { color: var(--warning); }
.u-text-danger { color: var(--danger, var(--error)); }

/* ── Numeric / Tabular ── */
.u-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Truncate ── */
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Visually Hidden (accessible) ── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Surface Classes ── */
.u-surface {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.u-surface-elevated {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

/* ── Spacing Helpers ── */
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 16px; }
.u-mb-6 { margin-bottom: 24px; }
.u-mb-8 { margin-bottom: 48px; }

.u-mt-2 { margin-top: 8px; }
.u-mt-4 { margin-top: 16px; }

.u-p-3 { padding: 12px; }
.u-p-4 { padding: 16px; }
.u-p-5 { padding: 20px; }

/* ── Responsive Stack ── */
@media (max-width: 768px) {
  .u-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Divider ── */
.u-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 16px 0;
  border: none;
}

/* ── Width helpers ── */
.u-w-full { width: 100%; }
.u-min-w-0 { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════
   PILL TABS (ported from Ads Intelligence)
   Pill-style tab selector
   ═══════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--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(--text-quaternary);
  cursor: pointer;
  transition: all 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  border: none;
  background: transparent;
  font-family: inherit;
}

.tab:hover { color: var(--text-tertiary); }
.tab.active { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR COMPONENTS (ported from Ads Intelligence)
   Search, product info, action buttons
   ═══════════════════════════════════════════════════════════════ */

.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(--text-quaternary);
}

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

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

.t-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--accent-glow, rgba(0,168,132,0.10));
}

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

.t-product-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-tertiary);
}

.t-product-name {
  color: var(--text-primary);
  font-weight: 600;
}

.t-product-separator {
  color: var(--text-quaternary);
}

.t-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.t-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}

.t-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

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

.t-product-by {
  color: var(--text-secondary);
  font-weight: 400;
}
.t-product-version {
  color: var(--text-quaternary);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}
.t-beta-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   METRIC CARDS (Ads Intelligence m-card pattern)
   ═══════════════════════════════════════════════════════════════ */
.m-card {
  background: var(--bg-secondary);
  border: 1px solid var(--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(--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(--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(--accent-glow); color: var(--accent); }
.m-icon.green { background: var(--success-bg); color: var(--success); }
.m-icon.blue { background: var(--info-bg); color: var(--info); }
.m-icon.orange { background: var(--warning-bg); color: var(--warning); }
.m-icon.red { background: var(--error-bg, rgba(239,68,68,0.1)); color: var(--error, #ef4444); }
.m-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.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(--success); }
.m-change.down { background: var(--danger-bg); color: var(--danger); }
.m-change.neutral { background: var(--info-bg); color: var(--info); }
.m-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   HELP TOOLTIP "?" (AdsIntel pattern)
   ═══════════════════════════════════════════════════════════════ */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--border-default, #d0d5dd);
  background: transparent;
  color: var(--text-tertiary, #98a2b3);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
  z-index: 20;
  transition: color 120ms ease, border-color 120ms ease;
}

/* Tooltip bubble */
.help-tip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 280px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0e0e0e;
  color: #ffffff;
  border: 1px solid #2a2a2a;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 9999;
}

/* Tooltip arrow */
.help-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%) translateY(4px) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #0e0e0e;
  border-right: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  z-index: 9998;
}

/* Show on hover / focus / mobile tap */
.help-tip:hover::after,
.help-tip:focus::after,
.help-tip:focus-visible::after,
.help-tip.is-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.help-tip:hover::before,
.help-tip:focus::before,
.help-tip:focus-visible::before,
.help-tip.is-open::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* Active state */
.help-tip:hover,
.help-tip:focus,
.help-tip:focus-visible,
.help-tip.is-open {
  color: var(--accent, #812bdd);
  border-color: var(--accent, #812bdd);
  outline: none;
}

/* ── Edge-aware positioning (JS adds these classes) ── */

/* Near left edge: align tooltip to left */
.help-tip--edge-left::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.help-tip--edge-left:hover::after,
.help-tip--edge-left:focus::after,
.help-tip--edge-left:focus-visible::after,
.help-tip--edge-left.is-open::after {
  transform: translateX(0) translateY(0);
}
.help-tip--edge-left::before {
  left: 7px;
}

/* Near right edge: align tooltip to right */
.help-tip--edge-right::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.help-tip--edge-right:hover::after,
.help-tip--edge-right:focus::after,
.help-tip--edge-right:focus-visible::after,
.help-tip--edge-right.is-open::after {
  transform: translateX(0) translateY(0);
}
.help-tip--edge-right::before {
  left: auto;
  right: 3px;
}

/* Near top edge: open below instead of above */
.help-tip--below::after {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}
.help-tip--below:hover::after,
.help-tip--below:focus::after,
.help-tip--below:focus-visible::after,
.help-tip--below.is-open::after {
  transform: translateX(-50%) translateY(0);
}
.help-tip--below::before {
  bottom: auto;
  top: calc(100% + 5px);
  transform: translateX(-50%) translateY(-4px) rotate(225deg);
  border-right: none;
  border-bottom: none;
  border-left: 1px solid #2a2a2a;
  border-top: 1px solid #2a2a2a;
}
.help-tip--below:hover::before,
.help-tip--below:focus::before,
.help-tip--below:focus-visible::before,
.help-tip--below.is-open::before {
  transform: translateX(-50%) translateY(0) rotate(225deg);
}

/* Combine edge-left + below */
.help-tip--below.help-tip--edge-left::after {
  transform: translateX(0) translateY(-4px);
}
.help-tip--below.help-tip--edge-left:hover::after,
.help-tip--below.help-tip--edge-left:focus::after,
.help-tip--below.help-tip--edge-left.is-open::after {
  transform: translateX(0) translateY(0);
}

/* Combine edge-right + below */
.help-tip--below.help-tip--edge-right::after {
  transform: translateX(0) translateY(-4px);
}
.help-tip--below.help-tip--edge-right:hover::after,
.help-tip--below.help-tip--edge-right:focus::after,
.help-tip--below.help-tip--edge-right.is-open::after {
  transform: translateX(0) translateY(0);
}

/* ── Rich Tooltip (JS-driven, supports HTML content) ── */
.help-tip--rich,
.help-tip--faq { cursor: pointer; }
.help-tip--rich::after,
.help-tip--rich::before { display: none !important; }

.geo-tooltip-rich {
  position: fixed;
  z-index: 10000;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--radius-md, 10px);
  background: #0e0e0e;
  color: #ffffff;
  border: 1px solid #2a2a2a;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  pointer-events: none;
  overscroll-behavior: contain;
}
.geo-tooltip-rich.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.geo-tooltip-rich__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-light, #5EEBC2);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.geo-tooltip-rich__intro {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.geo-tooltip-rich__section {
  margin-bottom: 12px;
}
.geo-tooltip-rich__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary, #00A884);
  margin-bottom: 3px;
}
.geo-tooltip-rich__text {
  color: rgba(255, 255, 255, 0.8);
}
.geo-tooltip-rich__example {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--primary, #00A884);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1.5;
}
/* Scrollbar inside rich tooltip */
.geo-tooltip-rich::-webkit-scrollbar { width: 4px; }
.geo-tooltip-rich::-webkit-scrollbar-track { background: transparent; }
.geo-tooltip-rich::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

@media (max-width: 600px) {
  .geo-tooltip-rich {
    width: calc(100vw - 24px);
    left: 12px !important;
    right: 12px !important;
    max-height: 60vh;
    padding: 16px;
    font-size: 13px;
  }
}

/* ── Prevent clipping in cards/tables ── */
.card, .m-card, .db2-card, .stat-card, .table-card, .chart-card,
.kpi-card, .summary-bar, .summary-item, .m-label, .db2-kpi__label,
.stat-card__label, .benchmark-stat-label, .benchmark-stat,
.pg-header__left, .pg-header, .analytics-section,
.db2-kpi, .m-card-inner, .form-card, .plan-summary-card,
.filter-tabs, .section-full, .section-half { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE HELP MODAL (AdsIntel fh-* pattern)
   ═══════════════════════════════════════════════════════════════ */
.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(--bg-secondary);
  border: 1px solid var(--border-default);
  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(--border-default);
}
.fh-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.fh-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--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(--bg-tertiary); color: var(--text-primary); }
.fh-body {
  padding: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  overflow-y: auto;
  white-space: pre-line;
}
.fh-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border-default);
  text-align: right;
}
.fh-version {
  font-size: 10px;
  color: var(--text-quaternary);
  font-family: var(--font-mono, monospace);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT CARDS (card / card-head / card-body — AdsIntel pattern)
   ═══════════════════════════════════════════════════════════════ */
.card-head {
  padding: 16px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.card-body {
  padding: 16px 20px 20px;
}
.card-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL (ported from Ads Intelligence)
   Two-column settings layout, nav items, panels, toggles
   ═══════════════════════════════════════════════════════════════ */

.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(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}

.set-nav-item:hover { background: var(--bg-tertiary); color: var(--text-secondary); }
.set-nav-item.active { background: var(--accent-glow, rgba(0,168,132,0.10)); color: var(--accent, var(--primary)); font-weight: 600; }

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

.set-panels { min-width: 0; }

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

.st-field { margin-bottom: 16px; }
.st-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--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(--text-quaternary); }

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

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

.toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  top: 2px; left: 2px;
  transition: transform 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

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

.api-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--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(--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(--accent-glow, rgba(0,168,132,0.10));
  color: var(--accent, var(--primary));
}

@media (max-width: 1024px) {
  .set-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   COPILOT CHAT (ported from Ads Intelligence)
   Chat UI for the copilot assistant
   ═══════════════════════════════════════════════════════════════ */

.cp-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 80px;
  max-width: 720px;
}

.cp-msg {
  display: flex;
  gap: 10px;
  animation: cp-fade-in 0.2s ease;
}

@keyframes cp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cp-msg--user {
  flex-direction: row-reverse;
}

.cp-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.cp-msg--bot .cp-msg-avatar {
  background: var(--accent, var(--primary));
  color: #fff;
}

.cp-msg--user .cp-msg-avatar {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.cp-msg-body {
  max-width: 85%;
  min-width: 0;
}

.cp-msg-text {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.cp-msg--bot .cp-msg-text {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-top-left-radius: 4px;
}

.cp-msg--user .cp-msg-text {
  background: var(--accent, var(--primary));
  color: #fff;
  border-top-right-radius: 4px;
}

.cp-msg-meta {
  font-size: 11px;
  color: var(--text-quaternary);
  margin-top: 4px;
  padding: 0 4px;
}

.cp-msg--user .cp-msg-meta {
  text-align: right;
}

/* Suggestions */
.cp-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cp-suggestion {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.cp-suggestion:hover {
  border-color: var(--accent, var(--primary));
  color: var(--accent, var(--primary));
  background: var(--accent-glow, rgba(0,168,132,0.06));
}

/* Action deep links */
.cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-default);
  color: var(--accent, var(--primary));
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.cp-action-btn:hover {
  background: var(--accent-glow, rgba(0,168,132,0.08));
  border-color: var(--accent, var(--primary));
}

.cp-action-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Intent badge */
.cp-intent {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  background: var(--accent-glow, rgba(0,168,132,0.10));
  color: var(--accent, var(--primary));
}

/* Loading indicator */
.cp-typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
}

.cp-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-quaternary);
  animation: cp-bounce 1.4s infinite ease-in-out both;
}

.cp-typing-dot:nth-child(1) { animation-delay: 0s; }
.cp-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.cp-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes cp-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Proactive messages */
.cp-proactive {
  max-width: 720px;
  margin-bottom: 16px;
}

.cp-proactive-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.cp-proactive-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,168,132,0.06), rgba(184,230,46,0.06));
  border: 1px solid rgba(0,168,132,0.15);
  margin-bottom: 8px;
  animation: cp-fade-in 0.3s ease;
}

.cp-proactive-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.cp-proactive-body {
  flex: 1;
  min-width: 0;
}

.cp-proactive-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cp-proactive-actions {
  display: flex;
  gap: 6px;
}

.cp-proactive-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-primary, #fff);
  cursor: pointer;
  transition: all 0.15s;
}

.cp-proactive-btn--explain {
  background: var(--accent, var(--primary));
  color: #fff;
  border-color: var(--accent, var(--primary));
}

.cp-proactive-btn--explain:hover { opacity: 0.85; }

.cp-proactive-btn--dismiss {
  color: var(--text-tertiary);
}

.cp-proactive-btn--dismiss:hover {
  background: var(--bg-secondary);
}

/* New chat button */
.cp-new-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-primary, #fff);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.cp-new-chat-btn:hover {
  border-color: var(--accent, var(--primary));
  color: var(--accent, var(--primary));
  background: var(--accent-glow, rgba(0,168,132,0.06));
}

.cp-new-chat-btn svg {
  flex-shrink: 0;
}

/* Source citation chips */
.cp-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.cp-sources-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.cp-source-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--accent-glow, rgba(0,168,132,0.08));
  color: var(--accent, var(--primary));
  text-decoration: none;
  border: 1px solid rgba(0,168,132,0.15);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.cp-source-chip:hover {
  background: rgba(0,168,132,0.16);
  border-color: rgba(0,168,132,0.3);
}

/* Input area */
.cp-input-area {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w, 256px);
  right: 0;
  padding: 12px 24px 16px;
  background: var(--bg-primary, #fff);
  border-top: 1px solid var(--border-default);
  z-index: 10;
}

.cp-input-wrap {
  display: flex;
  gap: 8px;
  max-width: 720px;
}

.cp-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  font-size: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--font, inherit);
}

.cp-input:focus {
  border-color: var(--accent, var(--primary));
}

.cp-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent, var(--primary));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.cp-send:hover { opacity: 0.85; }
.cp-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Data cards inside answers */
.cp-data-card {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-default);
  font-size: 12px;
}

.cp-data-card-title {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .cp-input-area {
    left: 0;
  }

  .cp-msg-body {
    max-width: 90%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RANKMYGEO DESIGN SYSTEM — Component Classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons (geo-btn) ── */
.geo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--duration) var(--ease);
  gap: 8px;
}
.geo-btn-primary {
  background: var(--color-interactive-accent);
  color: var(--color-interactive-control);
}
.geo-btn-primary:hover { filter: brightness(0.92); }
.geo-btn-secondary {
  background: transparent;
  color: var(--color-interactive-primary);
  border: 2px solid var(--color-interactive-primary);
}
.geo-btn-secondary:hover { background: var(--color-background-neutral); }
.geo-btn-negative {
  background: var(--error);
  color: var(--text-on-danger);
}
.geo-btn-negative:hover { filter: brightness(0.9); }
.geo-btn:disabled, .geo-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.geo-btn-sm { height: 40px; font-size: 14px; padding: 0 16px; }
.geo-btn-lg { height: 56px; font-size: 16px; padding: 0 32px; }

/* ── Cards (geo-card) ── */
.geo-card {
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-xl);
  background: var(--color-background-elevated);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease);
}
.geo-card-clickable { cursor: pointer; }
.geo-card-clickable:hover { box-shadow: var(--shadow-md); }
.geo-card-body { padding: 16px; }
.geo-card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.geo-card-desc { font-size: 14px; color: var(--color-content-secondary); line-height: 1.5; }

/* ── Tables (geo-table) ── */
.geo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.geo-table th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--color-border-neutral);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.geo-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-neutral);
  vertical-align: top;
}
.geo-table tr:last-child td { border-bottom: none; }
.geo-table tr:hover td { background: var(--color-background-neutral); }

/* ── Badges (design system) ── */
.geo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.geo-badge-accent { background: var(--color-interactive-accent); color: var(--color-interactive-control); }
.geo-badge-success { background: var(--success); color: #fff; }
.geo-badge-warning { background: var(--warning); color: var(--text-primary); }
.geo-badge-error { background: var(--error); color: #fff; }

/* ── Inputs (geo-input) ── */
.geo-input {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 16px;
  color: var(--color-content-primary);
  background: var(--color-background-screen);
  outline: none;
  transition: border-color var(--duration) var(--ease);
  width: 100%;
}
.geo-input::placeholder { color: var(--color-content-tertiary); }
.geo-input:focus { border: 3px solid var(--color-interactive-primary); padding: 0 14px; }

/* ── Tabs (geo-tabs) ── */
.geo-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-neutral);
  gap: 24px;
  margin-bottom: 16px;
}
.geo-tab {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-content-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.geo-tab.active {
  color: var(--color-interactive-primary);
  border-bottom-color: var(--color-interactive-primary);
  font-weight: 600;
}

/* ── State Blocks ── */
.geo-empty-state {
  text-align: center;
  padding: 32px;
  max-width: 340px;
  margin: 24px auto;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-xl);
}
.geo-empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-background-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.geo-empty-state-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.geo-empty-state-desc { font-size: 14px; color: var(--color-content-secondary); margin-bottom: 24px; line-height: 1.5; }

/* ── Spinner ── */
.geo-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid var(--color-background-neutral);
  border-top-color: var(--color-interactive-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Progress ── */
.geo-progress-track {
  height: 8px;
  background: var(--color-background-neutral);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.geo-progress-fill {
  height: 100%;
  background: var(--color-interactive-accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── Sidebar sub-items ── */
.nav-tab-sub {
  padding-left: 40px !important;
  font-size: 12px !important;
}
.nav-tab-sub svg { display: none; }
.nav-tab-sub::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR POWERED-BY FOOTER
   ═══════════════════════════════════════════════════════════════ */
.sidebar-powered-by {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-powered-by {
  font-size: 0;
  padding: 10px 4px;
}
.sidebar.collapsed .sidebar-powered-by::after {
  content: 'RMA';
  font-size: 9px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR USER MENU
   ═══════════════════════════════════════════════════════════════ */
.t-user-menu {
  position: relative;
}
.t-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration);
  color: var(--text-primary);
  font-family: inherit;
}
.t-user-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.t-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.t-user-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-user-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  transition: transform var(--duration);
  flex-shrink: 0;
}
.t-user-btn[aria-expanded="true"] .t-user-chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.t-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 4px 0;
  animation: userDropdownIn 150ms ease;
}
@keyframes userDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.t-user-dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration);
}
.t-user-dropdown-item:hover {
  background: var(--bg-hover);
}
.t-user-dropdown-item--danger {
  color: var(--error);
}
.t-user-dropdown-item--danger:hover {
  background: rgba(239,68,68,0.08);
}
.t-user-dropdown-sep {
  height: 1px;
  background: var(--border-default);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   USER MODAL (profile, edit, password, preferences, language, settings)
   ═══════════════════════════════════════════════════════════════ */
.user-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 180ms ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.user-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  animation: modalSlideIn 180ms ease;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}
.user-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.user-modal__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 18px;
  transition: all var(--duration);
}
.user-modal__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.user-modal__body {
  padding: 20px;
}
.user-modal__body .um-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle, var(--border-default));
  font-size: 13px;
}
.user-modal__body .um-row:last-child { border-bottom: none; }
.user-modal__body .um-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.user-modal__body .um-value {
  color: var(--text-primary);
  font-weight: 400;
  text-align: right;
}
.user-modal__body .um-field {
  margin-bottom: 14px;
}
.user-modal__body .um-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.user-modal__body .um-field input,
.user-modal__body .um-field select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-root);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--duration);
  box-sizing: border-box;
}
.user-modal__body .um-field input:focus,
.user-modal__body .um-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}
.user-modal__body .um-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.user-modal__body .um-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.user-modal__body .um-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-primary);
  transition: all var(--duration);
}
.user-modal__body .um-btn:hover {
  background: var(--bg-hover);
}
.user-modal__body .um-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.user-modal__body .um-btn--primary:hover {
  opacity: 0.9;
}
.user-modal__body .um-msg {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-top: 12px;
}
.user-modal__body .um-msg--success {
  background: rgba(0,168,132,0.1);
  color: var(--primary);
}
.user-modal__body .um-msg--error {
  background: rgba(239,68,68,0.1);
  color: var(--error);
}

/* ── Advanced modal: wider variant ── */
.user-modal--wide { width: 520px; }

/* ── Profile: large avatar + sections ── */
.um-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 16px;
}
.um-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}
.um-profile-info { flex: 1; min-width: 0; }
.um-profile-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.um-profile-email {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 0;
}
.um-profile-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  margin-top: 4px;
}
.um-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin: 16px 0 8px;
}
.um-section-title:first-child { margin-top: 0; }

/* ── Toggle switch ── */
.um-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.um-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.um-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--border-default);
  cursor: pointer;
  transition: background var(--duration);
}
.um-toggle input:checked + .um-toggle-track {
  background: var(--primary);
}
.um-toggle-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform var(--duration);
}
.um-toggle input:checked + .um-toggle-track::after {
  transform: translateX(16px);
}
.um-toggle input:focus-visible + .um-toggle-track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ── Row with toggle ── */
.um-row--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle, var(--border-default));
  font-size: 13px;
}
.um-row--toggle:last-child { border-bottom: none; }
.um-row--toggle .um-label { color: var(--text-secondary); font-weight: 500; }

/* ── Password strength meter ── */
.um-pw-strength {
  display: flex;
  gap: 4px;
  margin: 8px 0 4px;
}
.um-pw-strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border-default);
  transition: background var(--duration);
}
.um-pw-strength-bar.active { background: var(--error); }
.um-pw-strength[data-level="2"] .um-pw-strength-bar.active { background: #f59e0b; }
.um-pw-strength[data-level="3"] .um-pw-strength-bar.active { background: var(--primary); }
.um-pw-strength[data-level="4"] .um-pw-strength-bar.active { background: var(--primary); }
.um-pw-strength-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

/* ── Read-only field ── */
.um-field--readonly input {
  opacity: 0.6;
  cursor: not-allowed;
}
.um-field__hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ── Password toggle visibility button ── */
.um-pw-wrapper {
  position: relative;
}
.um-pw-wrapper input { padding-right: 40px; }
.um-pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px;
  display: flex;
  align-items: center;
  line-height: 1;
}
.um-pw-toggle svg {
  width: 18px;
  height: 18px;
}
.um-pw-toggle:hover { color: var(--text-primary); }

/* ── Password checklist ── */
.um-pw-checklist {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.um-pw-checklist li {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.um-pw-checklist li.pass { color: var(--primary); }
.um-pw-checklist li::before {
  content: '○';
  font-size: 10px;
}
.um-pw-checklist li.pass::before {
  content: '●';
}

/* ── Language cards ── */
.um-lang-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.um-lang-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
}
.um-lang-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.um-lang-card.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.um-lang-flag {
  font-size: 20px;
  flex-shrink: 0;
}
.um-lang-info { flex: 1; }
.um-lang-name {
  font-weight: 500;
  display: block;
}
.um-lang-native {
  font-size: 11px;
  color: var(--text-tertiary);
}
.um-lang-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: transparent;
  transition: all var(--duration);
}
.um-lang-card.active .um-lang-check {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* ── Settings hub cards ── */
.um-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.um-settings-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  width: 100%;
}
.um-settings-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.um-settings-icon {
  font-size: 18px;
  margin-bottom: 2px;
}
.um-settings-label {
  font-size: 13px;
  font-weight: 500;
}
.um-settings-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Logout confirmation ── */
.um-logout-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 16px;
}
.um-logout-msg {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.um-actions--center {
  justify-content: center;
}
.um-btn--danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}
.um-btn--danger:hover {
  opacity: 0.9;
}

/* ── Disabled button ── */
.um-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Select styling ── */
.um-field select {
  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='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ── Responsive: user menu + modal ── */
@media (max-width: 768px) {
  .t-user-name { display: none; }
  .t-user-chevron { display: none; }
  .t-user-btn { padding: 4px; }
  .t-user-dropdown { right: -8px; min-width: 180px; }
  .user-modal { width: 95vw; max-height: 85vh; }
  .user-modal--wide { width: 95vw; }
  .um-settings-grid { grid-template-columns: 1fr; }
  .um-profile-header { flex-direction: column; text-align: center; }
}

/* ── FAQ Page ───────────────────────────────────────────────────────── */

.faq-intro-card {
  margin-bottom: 24px;
  border: 1px solid var(--color-border-neutral, var(--border));
  border-radius: var(--radius-sm);
  background: var(--color-background-elevated, var(--card-bg));
  box-shadow: var(--shadow-card);
}
.faq-intro-card .card-body {
  padding: 20px 24px;
}
.faq-intro-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-content-primary, var(--text-primary));
  margin: 0 0 8px;
}
.faq-intro-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-content-secondary, var(--text-secondary));
  margin: 0;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-accordion__item {
  border: 1px solid var(--color-border-neutral, var(--border));
  border-radius: var(--radius-sm);
  background: var(--color-background-elevated, var(--card-bg));
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.faq-accordion__item:hover {
  box-shadow: var(--shadow-card-hover);
}
.faq-accordion__item[open] {
  box-shadow: var(--shadow-sm);
}

.faq-accordion__trigger {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary, var(--text-primary));
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease;
}
.faq-accordion__trigger::-webkit-details-marker { display: none; }
.faq-accordion__trigger::marker { display: none; content: ''; }
.faq-accordion__trigger:hover {
  background: var(--color-background-neutral, var(--bg-hover));
}
.faq-accordion__trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.faq-accordion__content {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-content-secondary, var(--text-secondary));
}

/* Rich Tooltip FAQ link */
.geo-tooltip-rich__faq-link {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.geo-tooltip-rich__faq-link a {
  color: var(--primary-light, #5EEBC2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.geo-tooltip-rich__faq-link a:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.geo-tooltip-rich__faq-link a:focus-visible {
  outline: 2px solid var(--primary-light, #5EEBC2);
  outline-offset: 2px;
  border-radius: 2px;
}

/* FAQ Toolbar */
.faq-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.faq-toolbar__search {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--color-border-neutral, var(--border));
  border-radius: var(--radius-sm);
  background: var(--color-background-elevated, var(--card-bg));
  color: var(--color-content-primary, var(--text-primary));
  font-size: 14px;
  transition: border-color 0.15s;
}
.faq-toolbar__search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.faq-toolbar__search::placeholder {
  color: var(--color-content-tertiary, var(--text-muted));
}
.faq-toolbar__actions {
  display: flex;
  gap: 8px;
}
.faq-toolbar__btn {
  padding: 8px 14px;
  border: 1px solid var(--color-border-neutral, var(--border));
  border-radius: var(--radius-sm);
  background: var(--color-background-elevated, var(--card-bg));
  color: var(--color-content-secondary, var(--text-secondary));
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.faq-toolbar__btn:hover {
  background: var(--color-background-neutral, var(--bg-hover));
  border-color: var(--primary);
}
.faq-toolbar__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* FAQ Categories */
.faq-category {
  margin-bottom: 24px;
}
.faq-category__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary, #00A884);
  margin: 0 0 10px;
  padding-left: 4px;
}

/* FAQ Empty State */
.faq-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-content-tertiary, var(--text-muted));
  font-size: 14px;
}

/* FAQ Highlight Animation */
.faq-accordion__item--highlighted {
  animation: faqHighlight 3s ease;
}
@keyframes faqHighlight {
  0% { box-shadow: 0 0 0 3px var(--primary-glow-md); }
  70% { box-shadow: 0 0 0 3px var(--primary-glow-md); }
  100% { box-shadow: var(--shadow-xs); }
}

/* FAQ Copy Link Button */
.faq-copy-link {
  float: right;
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
  border-radius: var(--radius-sm);
}
.faq-copy-link:hover {
  opacity: 1;
  background: var(--color-background-neutral, var(--bg-hover));
}
.faq-copy-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  opacity: 1;
}

/* FAQ Deep Content Blocks */
.faq-accordion__content h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #00A884);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.faq-accordion__content h4:first-child {
  margin-top: 0;
}
.faq-accordion__content p {
  margin: 0 0 8px;
}
.faq-accordion__content .faq-example {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  font-size: 13px;
  line-height: 1.6;
}
.faq-accordion__content .faq-warning {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.08);
  border-left: 3px solid var(--warning, #EAB308);
  font-size: 13px;
  line-height: 1.6;
}

/* ── DS Icons ─────────────────────────────────────────── */
.st-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-interactive-primary);
  background: color-mix(in srgb, var(--color-interactive-primary) 10%, transparent);
}
.st-icon--sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.st-icon--lg {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
}
.st-icon__svg {
  width: 20px;
  height: 20px;
  display: block;
}
.st-icon--sm .st-icon__svg {
  width: 16px;
  height: 16px;
}
.st-icon--lg .st-icon__svg {
  width: 28px;
  height: 28px;
}
.st-icon--success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.st-icon--warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}
.st-icon--error {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}
.st-icon--accent {
  color: var(--color-interactive-accent);
  background: color-mix(in srgb, var(--color-interactive-accent) 10%, transparent);
}
.st-icon--muted {
  color: var(--color-content-tertiary);
  background: var(--color-background-neutral);
}
.st-dir-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.st-dir-icon .st-icon__svg {
  width: 20px;
  height: 20px;
}

/* ── Strategic Trends: semantic color classes ──────────── */
.st-color--success { color: var(--success); }
.st-color--error { color: var(--error); }
.st-color--warning { color: var(--warning); }
.st-color--accent { color: var(--accent); }
.st-color--muted { color: var(--text-secondary); }
.st-fw-semibold { font-weight: 600; }
.st-row--projected { opacity: 0.7; }
.st-dim-delta--up { color: var(--success); }
.st-dim-delta--down { color: var(--error); }
.st-dim-delta--flat { color: var(--text-secondary); }

/* ── Strategic Trends ─────────────────────────────────── */
.st-header-selects {
  display: flex;
  gap: 8px;
  align-items: center;
}
.st-header-selects .geo-input {
  height: 40px;
  font-size: 13px;
  padding: 0 12px;
  width: auto;
  min-width: 120px;
}
.st-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.st-filter-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border-neutral);
  background: transparent;
  color: var(--color-content-secondary);
  transition: all var(--duration) var(--ease);
}
.st-filter-pill:hover {
  background: var(--color-background-neutral);
}
.st-filter-pill.active {
  background: var(--color-interactive-accent);
  color: var(--color-interactive-control);
  border-color: var(--color-interactive-accent);
  font-weight: 600;
}
.st-grid { display: grid; gap: 16px; }
.st-grid--2 { grid-template-columns: repeat(2, 1fr); }
.st-grid--3 { grid-template-columns: repeat(3, 1fr); }
.st-grid--4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.st-grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.st-grid--origins { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.st-kpi {
  text-align: center;
  padding: 16px;
  background: var(--color-background-elevated);
  border-radius: var(--radius-lg);
}
.st-kpi__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-content-primary);
  line-height: 1.2;
}
.st-kpi__label {
  font-size: 12px;
  color: var(--color-content-tertiary);
  margin-top: 4px;
}
.st-summary-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.st-summary-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.st-summary-text h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0;
}
.st-summary-meta {
  font-size: 12px;
  color: var(--color-content-secondary);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.st-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin: 0 0 6px;
}
.st-card-desc {
  font-size: 13px;
  color: var(--color-content-secondary);
  margin: 0 0 10px;
  line-height: 1.5;
}
.st-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.st-detail-toggle {
  font-size: 12px;
  color: var(--color-interactive-accent);
  cursor: pointer;
  font-weight: 600;
  margin: 10px 0;
}
.st-detail-toggle p {
  font-size: 12px;
  color: var(--color-content-secondary);
  margin: 6px 0 0;
  padding-left: 4px;
}
.st-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.st-link-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border-neutral);
  background: transparent;
  color: var(--color-content-secondary);
  transition: all var(--duration) var(--ease);
}
.st-link-btn:hover {
  background: var(--color-background-neutral);
  color: var(--color-content-primary);
}
.st-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-content-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-dim-card {
  text-align: center;
  padding: 16px 12px;
}
.st-dim-icon { font-size: 24px; margin-bottom: 4px; }
.st-dim-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.st-dim-value { font-size: 20px; font-weight: 700; color: var(--color-content-primary); }
.st-dim-delta { font-size: 12px; margin-top: 2px; }
.st-ro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.st-ro-column-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-origin-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}
.st-origin-icon {
  flex-shrink: 0;
}
.st-origin-info { flex: 1; min-width: 0; }
.st-origin-label { font-size: 14px; font-weight: 600; }
.st-origin-count { font-size: 22px; font-weight: 700; color: var(--color-content-primary); margin: 2px 0; }
.st-origin-detail { font-size: 12px; color: var(--color-content-tertiary); }
.st-origin-breakdown { font-size: 11px; color: var(--color-content-tertiary); margin-top: 6px; }
.st-checklist { display: grid; gap: 10px; }
.st-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.st-checklist-icon { font-weight: 700; font-size: 14px; }
.st-cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.st-skeleton-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.st-skeleton-grid--kpi {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (max-width: 768px) {
  .st-ro-columns { grid-template-columns: 1fr; }
  .st-grid--2 { grid-template-columns: 1fr; }
  .st-grid--3 { grid-template-columns: 1fr; }
  .st-grid--cards { grid-template-columns: 1fr; }
  .st-grid--origins { grid-template-columns: 1fr; }
  .st-header-selects { flex-direction: column; align-items: stretch; }
  .st-header-selects .geo-input { width: 100%; }
  .st-summary-bar { flex-direction: column; text-align: center; }
}

/* ── AI Positioning: KPI cards ─────────────────────────── */
.perc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.perc-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius, 12px);
  padding: 16px 20px;
  text-align: center;
}
.perc-kpi-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
}
.perc-kpi-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}
.perc-kpi-subtitle {
  font-size: 10px;
  color: var(--text-tertiary, var(--text-secondary));
  margin-top: 2px;
  line-height: 1.3;
  max-width: 180px;
}
/* ── AI Positioning: semantic colors ───────────────────── */
.perc-color--accent    { color: var(--accent); }
.perc-color--success   { color: var(--success); }
.perc-color--error     { color: var(--error); }
.perc-color--warning   { color: var(--warning); }
.perc-color--muted     { color: var(--text-secondary); }
.perc-color--positive  { color: var(--success); }
.perc-color--negative  { color: var(--error); }
.perc-color--neutral   { color: var(--text-secondary); }
.perc-color--mixed     { color: var(--warning); }
/* ── AI Positioning: severity badges ───────────────────── */
.perc-sev--critical { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }
.perc-sev--high     { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.perc-sev--medium   { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.perc-sev--low      { background: color-mix(in srgb, var(--text-secondary) 15%, transparent); color: var(--text-secondary); }
/* ── AI Positioning: gap card ──────────────────────────── */
.perc-gap-card { border-left: 4px solid var(--color-border-neutral); }
.perc-gap-card--critical { border-left-color: var(--error); }
.perc-gap-card--high     { border-left-color: var(--warning); }
.perc-gap-card--medium   { border-left-color: var(--success); }
.perc-gap-card--low      { border-left-color: var(--text-secondary); }
/* ── AI Positioning: attr card ─────────────────────────── */
.perc-attr-card { padding: 14px 18px; }
.perc-attr-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.perc-attr-label { font-size: 13px; font-weight: 600; }
.perc-attr-score { font-size: 18px; font-weight: 700; color: var(--accent); }
.perc-attr-bar { height: 6px; background: var(--bg-secondary); border-radius: 3px; margin-bottom: 8px; }
.perc-attr-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.perc-attr-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-secondary); }
.perc-attr-quote { margin-top: 8px; padding: 8px 10px; background: var(--bg-secondary); border-radius: 6px; font-size: 11px; color: var(--text-secondary); font-style: italic; max-height: 60px; overflow: hidden; }
/* ── AI Positioning: CTA banner ────────────────────────── */
.perc-cta-banner {
  background: linear-gradient(135deg, var(--success) 0%, var(--accent) 100%);
  border-radius: 12px;
  padding: 24px;
  color: #fff;
}
.perc-cta-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.perc-cta-desc { font-size: 12px; opacity: 0.85; margin-bottom: 16px; }
.perc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.perc-cta-btn--primary { background: #fff; color: var(--success); border: none; font-weight: 600; }
.perc-cta-btn--secondary { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
/* ── AI Positioning: gap badge ──────────────────────────── */
.perc-gap-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill, 20px);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--color-border-neutral);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.perc-gap-badge--positive {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}
.perc-gap-badge--negative {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.perc-gap-badge--neutral {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.perc-gap-badge--unknown {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-style: italic;
}
/* ── AI Positioning: opportunity intro ─────────────────── */
.perc-opp-intro {
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius, 12px);
}
/* ── AI Positioning: responsive ────────────────────────── */
@media (max-width: 768px) {
  .perc-kpi-grid { grid-template-columns: 1fr 1fr; }
  .perc-cta-actions { flex-direction: column; }
}

/* Suppress CSS tooltip on FAQ-linked help tips (JS handles it) */
.help-tip--faq::after { display: none !important; }
.help-tip--faq::before { display: none !important; }

@media (max-width: 768px) {
  .faq-accordion__trigger { padding: 14px 16px; }
  .faq-accordion__content { padding: 0 16px 14px; }
  .faq-intro-card .card-body { padding: 16px; }
  .faq-toolbar { flex-direction: column; }
  .faq-toolbar__search { min-width: unset; width: 100%; }
}

/* ── Shelf Space Sortable Headers ── */
.shelf-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.shelf-sort-button:hover {
  color: var(--text-primary);
}
.shelf-sort-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.shelf-sort-button.is-active {
  color: var(--primary);
}
.shelf-sort-indicator {
  display: inline-block;
  width: 14px;
  height: 14px;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.shelf-sort-button:hover .shelf-sort-indicator,
.shelf-sort-button.is-active .shelf-sort-indicator {
  opacity: 1;
}
.shelf-sort-indicator::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 3px auto 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid currentColor;
}
.shelf-sort-indicator::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 1px auto 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}
.shelf-sort-indicator--asc::before {
  opacity: 0.3;
}
.shelf-sort-indicator--asc::after {
  opacity: 1;
}
.shelf-sort-indicator--desc::before {
  opacity: 1;
}
.shelf-sort-indicator--desc::after {
  opacity: 0.3;
}

/* ── Product Mentions: Answer & Link Section ── */
.pm-answer-link {
  margin-top: 16px;
  border-top: 1px solid var(--border-default);
  padding-top: 16px;
}
.pm-answer-link__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-answer-link__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.pm-answer-link__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-answer-link__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-answer-link__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pm-answer-link__value {
  font-size: 0.85rem;
  color: var(--text-primary);
}
.pm-answer-link__snippet blockquote {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--primary);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
}
.pm-answer-link__url {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-answer-link__link-type {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  width: fit-content;
}
.pm-answer-link__link-url {
  font-size: 0.82rem;
  color: var(--primary);
  word-break: break-all;
  text-decoration: none;
}
.pm-answer-link__link-url:hover {
  text-decoration: underline;
}
.pm-answer-link__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pm-answer-link__empty p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* Answers deep link highlighting */
.answers-row--highlighted {
  background: var(--bg-accent-subtle, rgba(var(--primary-rgb, 59, 130, 246), 0.08));
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.answers-deeplink-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.answers-deeplink-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  border: 1px solid var(--border);
}
.btn-chip-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 1.1rem;
  color: var(--text-tertiary);
  line-height: 1;
}
.btn-chip-close:hover {
  color: var(--text-primary);
}

/* ── Premium Growth Module ────────────────────────────────────────── */

.s-section--premium .sidebar-section-trigger--premium {
  color: var(--accent);
}
.s-section--premium .sidebar-section-trigger--premium span {
  font-weight: 600;
}

/* Module Cards Grid */
.premium-growth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.pg-module-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pg-module-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}
.pg-module-card--disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.pg-module-card__icon {
  flex-shrink: 0;
  color: var(--accent);
}
.pg-module-card__body {
  flex: 1;
  min-width: 0;
}
.pg-module-card__title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pg-module-card__desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pg-module-card__status {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 4px;
}
.pg-status--ready {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.pg-status--setup {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
}
.pg-status--soon {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

/* Subpage status */
.pg-subpage-status {
  margin-top: 8px;
}

/* Locked Page */
.premium-growth-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  max-width: 560px;
  margin: 0 auto;
}
.premium-growth-locked__icon {
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.premium-growth-locked__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.premium-growth-locked__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 28px;
}
.premium-growth-locked__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 32px;
  text-align: left;
}
.premium-growth-locked__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.premium-growth-locked__feature svg {
  color: var(--accent);
  flex-shrink: 0;
}
.premium-growth-locked__actions {
  display: flex;
  gap: 12px;
}

/* ═══ Premium Growth Redesign (P101) ═══ */

/* Hero Section */
.pg-hero {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pg-hero__left { flex: 1; min-width: 0; }
.pg-hero__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pg-hero__subtitle {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pg-hero__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.pg-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-tertiary, #666);
}
.pg-hero__meta-item svg { width: 14px; height: 14px; }
.pg-hero__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Premium Button Variants */
.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.pg-btn--primary {
  background: var(--accent);
  color: #fff;
}
.pg-btn--primary:hover { background: var(--accent-hover); }
.pg-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.pg-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
.pg-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 9px 12px;
}
.pg-btn--ghost:hover { color: var(--text-primary); }
.pg-btn--sm { padding: 6px 12px; font-size: 0.76rem; }

/* Quick Flow Card (redesign) */
.pg-quick-flow-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.pg-quick-flow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary-light), var(--accent));
}
.pg-quick-flow-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pg-quick-flow-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pg-quick-flow-card__badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pg-quick-flow-card__desc {
  margin: 0 0 18px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pg-quick-flow-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.pg-quick-flow-card__field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pg-quick-flow-card__field input,
.pg-quick-flow-card__field select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.82rem;
  transition: border-color 0.15s;
}
.pg-quick-flow-card__field input:focus,
.pg-quick-flow-card__field select:focus {
  outline: none;
  border-color: var(--accent);
}
.pg-quick-flow-result {
  margin-top: 18px;
  padding: 16px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
}
.pg-quick-flow-result--success {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.2);
}
.pg-quick-flow-result--error {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Module Cards (enhanced) */
.pg-module-card {
  padding: 22px 24px;
  border-radius: 10px;
  transition: all 0.2s;
}
.pg-module-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
}
.pg-module-card__metric {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pg-module-card__metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pg-module-card__metric-label {
  font-size: 0.72rem;
  color: var(--text-tertiary, #666);
}

/* Status Badges (enhanced) */
.pg-status--beta {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}
.pg-status--demo {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}
.pg-status--connected {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.pg-status--warning {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
.pg-status--action {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

/* Section Headers */
.pg-section {
  margin-bottom: 28px;
}
.pg-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pg-section__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pg-section__subtitle {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Empty States */
.pg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: 12px;
}
.pg-empty-state__icon {
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.pg-empty-state__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pg-empty-state__desc {
  margin: 0 0 20px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  max-width: 380px;
  line-height: 1.5;
}

/* Loading States */
.pg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.pg-loading__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pg-spin 0.7s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* Error States */
.pg-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 10px;
}
.pg-error-state__title {
  margin: 12px 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pg-error-state__desc {
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Metric Cards */
.pg-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.pg-metric-card {
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  text-align: center;
}
.pg-metric-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.pg-metric-card__label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pg-metric-card--accent .pg-metric-card__value { color: var(--accent); }
.pg-metric-card--success .pg-metric-card__value { color: var(--success); }
.pg-metric-card--warning .pg-metric-card__value { color: var(--warning); }

/* Data Tables */
.pg-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: 10px;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.pg-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}
.pg-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}
.pg-table tr:last-child td { border-bottom: none; }
.pg-table tr:hover td { background: rgba(99, 102, 241, 0.03); }

/* Score Visualization */
.pg-score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pg-score-bar__track {
  flex: 1;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}
.pg-score-bar__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.pg-score-bar__fill--good { background: #22c55e; }
.pg-score-bar__fill--warning { background: #f59e0b; }
.pg-score-bar__fill--danger { background: #ef4444; }
.pg-score-bar__value {
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}

/* Stepper */
.pg-stepper {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
}
.pg-stepper__step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  position: relative;
  font-size: 0.78rem;
  color: var(--text-tertiary, #666);
}
.pg-stepper__step--active { color: var(--accent); font-weight: 600; }
.pg-stepper__step--done { color: #22c55e; }
.pg-stepper__step::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 1px;
  background: var(--border-default);
}
.pg-stepper__step:last-child::after { display: none; }
.pg-stepper__num {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.68rem;
  font-weight: 700;
}
.pg-stepper__step--done .pg-stepper__num {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

/* Drawer/Detail Panel */
.pg-drawer {
  position: fixed;
  top: 0;
  right: -480px;
  width: 480px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border-default);
  z-index: 1000;
  transition: right 0.25s ease;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}
.pg-drawer--open { right: 0; }
.pg-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.pg-drawer__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.pg-drawer__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}
.pg-drawer__body { padding: 24px; }

/* Provider Cards (CMS) */
.pg-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.pg-provider-card {
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s;
}
.pg-provider-card:hover { border-color: var(--accent); }
.pg-provider-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pg-provider-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pg-provider-card__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pg-provider-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .pg-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .pg-hero__actions { width: 100%; }
  .pg-quick-flow-card__grid { grid-template-columns: 1fr; }
  .pg-stepper { flex-direction: column; }
  .pg-stepper__step::after { display: none; }
  .pg-drawer { width: 100%; max-width: 100vw; right: -100%; }
  .pg-provider-grid { grid-template-columns: 1fr; }
  .pg-metrics-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .premium-growth-locked__features {
    grid-template-columns: 1fr;
  }
  .premium-growth-grid {
    grid-template-columns: 1fr;
  }
}

/* Content Gap Map */
.cgm-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cgm-summary-card {
  padding: 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  text-align: center;
}
.cgm-summary-card__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cgm-summary-card__label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.cgm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.cgm-filters input,
.cgm-filters select {
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.cgm-filters input { min-width: 180px; }
.cgm-opp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cgm-opp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: border-color 0.15s;
}
.cgm-opp-card:hover {
  border-color: var(--accent);
}
.cgm-opp-card__body { flex: 1; min-width: 0; }
.cgm-opp-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cgm-opp-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.cgm-opp-card__scores {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cgm-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.cgm-score-pill--impact { background: rgba(0, 168, 132, 0.12); color: var(--accent); }
.cgm-score-pill--confidence { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.cgm-detail-panel { color: var(--text-primary); }
.cgm-detail-panel li { color: var(--text-secondary); margin-bottom: 4px; }
.cgm-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.cgm-badge--critical { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.cgm-badge--high { background: rgba(234, 179, 8, 0.12); color: #b45309; }
.cgm-badge--medium { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.cgm-badge--low { background: var(--bg-secondary); color: var(--text-tertiary); }

/* CGM Drawer */
.cgm-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.cgm-drawer.open { display: flex; }
.cgm-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.cgm-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(520px, 90vw);
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 24px;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}
.cgm-drawer__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-secondary);
}
.cgm-detail-section {
  margin-bottom: 20px;
}
.cgm-detail-section h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0 0 8px;
}
.cgm-detail-scores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cgm-detail-score {
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm, 4px);
  text-align: center;
}
.cgm-detail-score__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cgm-detail-score__label {
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.cgm-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.cgm-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}
.cgm-empty-state h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
}
.cgm-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}


/* ── Premium Growth Modal ──────────────────────────────────────────── */
.pg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.pg-modal {
  background: var(--bg-primary);
  border-radius: var(--radius, 8px);
  width: min(480px, 90vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.pg-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.pg-modal__header h3 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.pg-modal__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-tertiary);
}
.pg-modal__body { padding: 20px; }
.pg-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* ── Premium Growth Empty States (P46) ──────────────────────────────── */
.pg-empty-state {
  text-align: center;
  padding: 3rem 2rem;
}
.pg-empty-state__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.pg-empty-state__desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 480px;
  margin-inline: auto;
}
.pg-empty-state__cta {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pg-empty-state__cta button {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--accent);
  color: #fff;
  transition: opacity 0.2s;
}
.pg-empty-state__cta button:hover {
  opacity: 0.85;
}
.pg-empty-state__cta--secondary {
  background: transparent !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-secondary) !important;
}

/* ── Premium Growth Quick Actions (P47) ─────────────────────────────── */
.pg-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.pg-quick-action-card {
  background: var(--bg-card, #1e1e1e);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pg-quick-action-card__label {
  font-weight: 600;
  color: var(--text-primary);
}
.pg-quick-action-card__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex: 1;
}
.pg-quick-action-card__btn {
  align-self: flex-start;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--accent);
  color: #fff;
  margin-top: 0.5rem;
  transition: opacity 0.2s;
}
.pg-quick-action-card__btn:hover {
  opacity: 0.85;
}

/* ── P121-P125: CMS Publisher Wizard & Panels ─────────────────────── */
.pub-wizard { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; padding: 24px; }
.pub-wizard__steps { display: flex; gap: 4px; margin-bottom: 24px; }
.pub-wizard__step { flex: 1; height: 4px; border-radius: 2px; background: var(--border-default); transition: background 0.3s; }
.pub-wizard__step--active { background: var(--accent); }
.pub-wizard__step--done { background: var(--success); }
.pub-wizard__title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.pub-wizard__subtitle { font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 20px; }
.pub-wizard__body { min-height: 180px; }
.pub-wizard__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.pub-wizard__provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pub-wizard__provider-card { background: var(--bg-secondary); border: 2px solid var(--border-default); border-radius: 10px; padding: 16px; text-align: center; cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
.pub-wizard__provider-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pub-wizard__provider-card--selected { border-color: var(--accent); background: var(--primary-soft); }
.pub-wizard__provider-card--disabled { opacity: 0.5; cursor: not-allowed; }
.pub-wizard__provider-card--disabled:hover { border-color: var(--border-default); transform: none; }
.pub-wizard__provider-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); margin-top: 8px; }
.pub-wizard__provider-badge { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 4px; }
.pub-wizard__provider-desc { font-size: 0.7rem; color: var(--text-tertiary); margin-top: 4px; line-height: 1.3; }

/* Wizard Step 0 sections */
.pub-wizard-step0-header { margin-bottom: 16px; }
.pub-wizard-step0-header__title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.pub-wizard-step0-header__subtitle { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
.pub-wizard-section { margin-bottom: 18px; }
.pub-wizard-section__title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 8px; }
.pub-section-desc { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 10px; }

/* Provider cards (rich) */
.pub-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pub-provider-card { background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; }
.pub-provider-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,168,132,0.08); }
.pub-provider-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pub-provider-card__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.pub-provider-card__name { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.pub-provider-card__desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; flex: 1; margin-bottom: 12px; }
.pub-provider-card__cta { margin-top: auto; align-self: flex-start; }

/* Featured card (WordPress) */
.pub-provider-card--featured { border-color: var(--accent); box-shadow: 0 2px 16px rgba(0,168,132,0.10); }
.pub-provider-card__checklist { list-style: none; padding: 0; margin: 0 0 10px; }
.pub-provider-card__checklist li { font-size: 0.75rem; color: var(--text-secondary); padding: 3px 0; padding-left: 16px; position: relative; line-height: 1.4; }
.pub-provider-card__checklist li::before { content: '\2713'; position: absolute; left: 0; color: var(--success); font-weight: 700; font-size: 0.7rem; }
.pub-provider-card__safety { display: inline-block; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 3px; background: var(--success-bg); color: var(--success); margin-bottom: 10px; }

/* Page header (CMS Publisher) */
.pub-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pub-page-header__text { flex: 1; }
.pub-page-header__title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.pub-page-header__subtitle { font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 4px; }
.pub-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Badge variants */
.pub-card-badge { display: inline-block; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 3px; }
.pub-card-badge--ready { background: var(--success-bg); color: var(--success); }
.pub-card-badge--beta { background: rgba(249, 168, 37, 0.12); color: #b45309; }
.pub-card-badge--roadmap { background: var(--bg-secondary); color: var(--text-tertiary); }
.pub-card-badge--demo { background: rgba(99,102,241,0.12); color: #6366f1; }

/* Webhook tiles */
.pub-webhook-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-webhook-tile { padding: 8px 14px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 6px; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.pub-webhook-tile:hover { border-color: var(--accent); color: var(--accent); }

/* Roadmap grid */
.pub-roadmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pub-roadmap-card { padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px; }
.pub-roadmap-card__name { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); margin-bottom: 3px; }
.pub-roadmap-card__desc { font-size: 0.7rem; color: var(--text-tertiary); margin-bottom: 8px; }
.pub-roadmap-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Roadmap compact list (wizard) */
.pub-roadmap-list { margin-top: 6px; }
.pub-roadmap-list__items { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-roadmap-list__item { display: inline-block; padding: 3px 8px; background: var(--bg-secondary); border-radius: 4px; font-size: 0.7rem; color: var(--text-tertiary); }

/* Don't see your CMS */
.pub-dont-see-cta { margin-top: 20px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 10px; }
.pub-dont-see-cta__title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.pub-dont-see-cta__text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.pub-dont-see-cta__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-dont-see-cta__payload { margin-top: 12px; }
.pub-code-block { background: var(--bg-tertiary); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px; font-size: 0.72rem; color: var(--text-primary); overflow-x: auto; white-space: pre; font-family: monospace; }

.pub-field { margin-bottom: 14px; }
.pub-field__label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.pub-field__input { width: 100%; padding: 9px 12px; background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); font-size: 0.8125rem; outline: none; transition: border-color 0.2s; }
.pub-field__input:focus { border-color: var(--accent); }
.pub-field__input--error { border-color: var(--error); }
.pub-field__hint { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 3px; }
.pub-field__error { font-size: 0.75rem; color: var(--error); margin-top: 3px; }
.pub-field__select { width: 100%; padding: 9px 12px; background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-primary); font-size: 0.8125rem; outline: none; }

.pub-checklist { list-style: none; padding: 0; margin: 0; }
.pub-checklist__item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.8125rem; color: var(--text-secondary); }
.pub-checklist__item:last-child { border-bottom: none; }
.pub-checklist__icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.pub-checklist__icon--pass { background: var(--success); color: #fff; }
.pub-checklist__icon--fail { background: var(--error); color: #fff; }
.pub-checklist__icon--pending { background: var(--border-default); color: var(--text-tertiary); }
.pub-checklist__icon--running { background: var(--accent); color: #fff; animation: pub-pulse 1s infinite; }
@keyframes pub-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.pub-guide { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.pub-guide__title { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.pub-guide__step { display: flex; gap: 8px; margin-bottom: 6px; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }
.pub-guide__step-num { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }

.pub-error-banner { background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.pub-error-banner__title { font-size: 0.8125rem; font-weight: 600; color: var(--error); margin-bottom: 4px; }
.pub-error-banner__message { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }
.pub-error-banner__action { font-size: 0.75rem; color: var(--accent); cursor: pointer; margin-top: 6px; text-decoration: underline; }

.pub-send-panel { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; padding: 20px; }
.pub-send-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pub-send-panel__title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.pub-send-panel__draft-card { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px; padding: 14px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.pub-send-panel__draft-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.pub-send-panel__draft-meta { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; }
.pub-send-panel__target { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 12px; }
.pub-send-panel__target-badge { padding: 2px 8px; border-radius: 4px; background: var(--primary-soft); color: var(--accent); font-size: 0.6875rem; font-weight: 500; }
.pub-send-panel__status { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; font-size: 0.8125rem; }
.pub-send-panel__status--success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.pub-send-panel__status--error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error); }
.pub-send-panel__status--sending { background: var(--primary-soft); border: 1px solid var(--border-accent); color: var(--accent); }

.pub-jobs-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.pub-jobs-table th { text-align: left; font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px; border-bottom: 1px solid var(--border-default); }
.pub-jobs-table td { font-size: 0.8125rem; color: var(--text-secondary); padding: 10px; border-bottom: 1px solid var(--border-subtle); }
.pub-jobs-table__status { padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; font-weight: 500; }
.pub-jobs-table__status--draft_created { background: var(--success-bg); color: var(--success); }
.pub-jobs-table__status--failed { background: var(--error-bg); color: var(--error); }
.pub-jobs-table__status--pending { background: var(--warning-bg); color: var(--warning); }
.pub-jobs-table__status--published { background: var(--info-bg); color: var(--info); }
.pub-jobs-table__status--draft_updated { background: var(--success-bg); color: var(--success); }
.pub-jobs-table__remote-id { font-family: monospace; font-size: 0.75rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-jobs-table__link { color: var(--accent); font-size: 0.75rem; margin-left: 6px; text-decoration: none; }
.pub-jobs-table__link:hover { text-decoration: underline; }

/* ── P126-P134: Premium Growth Page Shell & Components ─────────────── */
.pg-page-shell { max-width: 1100px; }
.pg-page-header { margin-bottom: 20px; }
.pg-page-header__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pg-page-header__title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.pg-page-header__subtitle { font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 4px; }
.pg-page-header__badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; margin-left: 8px; vertical-align: middle; }
.pg-page-header__badge--beta { background: var(--warning-bg); color: #92400E; }
.pg-page-header__badge--ready { background: var(--success-bg); color: var(--success); }
.pg-page-header__badge--coming-soon { background: var(--bg-secondary); color: var(--text-tertiary); }
.pg-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pg-metric-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pg-metric-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 16px; text-align: center; }
.pg-metric-card__value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.pg-metric-card__label { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 4px; }

.pg-empty-state { text-align: center; padding: 48px 24px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; margin: 16px 0; }
.pg-empty-state__icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.7; }
.pg-empty-state__title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.pg-empty-state__text { font-size: 0.8125rem; color: var(--text-tertiary); max-width: 440px; margin: 0 auto 20px; line-height: 1.6; }
.pg-empty-state__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Pipeline tabs */
.pg-pipeline-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border-default); padding-bottom: 0; }
.pg-pipeline-tab { background: none; border: none; padding: 8px 16px; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.pg-pipeline-tab:hover { color: var(--text-primary); }
.pg-pipeline-tab--active { color: var(--accent); border-bottom-color: var(--accent); }

/* Pipeline kanban */
.pg-pipeline-kanban { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pg-pipeline-column { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 12px; min-height: 120px; }
.pg-pipeline-column__header { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; letter-spacing: 0.02em; }
.pg-pipeline-column__count { font-weight: 400; color: var(--text-tertiary); }
.pg-pipeline-card { margin-bottom: 6px; padding: 8px 10px; }
.pg-pipeline-card--movable { cursor: pointer; }
.pg-pipeline-card--movable:hover { border-color: var(--accent); }

/* Pipeline calendar view */
.pg-pipeline-calendar-view { display: flex; flex-direction: column; gap: 16px; }
.pg-pipeline-date-group { }
.pg-pipeline-date-group__header { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle, var(--border-default)); }

/* Pipeline list view */
.pg-pipeline-list-view { overflow-x: auto; }
.pg-pipeline-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.pg-pipeline-table th { text-align: left; padding: 8px 12px; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid var(--border-default); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.pg-pipeline-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); }
.pg-pipeline-table tr:hover td { background: var(--bg-hover, rgba(255,255,255,0.02)); }
.pg-pipeline-table__title { font-weight: 500; }
.pg-pipeline-status-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.6875rem; font-weight: 500; background: var(--bg-card); border: 1px solid var(--border-default); }
.pg-pipeline-status-chip--published { background: rgba(34,197,94,0.1); color: #22c55e; border-color: rgba(34,197,94,0.2); }
.pg-pipeline-status-chip--in_progress { background: rgba(59,130,246,0.1); color: #3b82f6; border-color: rgba(59,130,246,0.2); }
.pg-pipeline-status-chip--review { background: rgba(168,85,247,0.1); color: #a855f7; border-color: rgba(168,85,247,0.2); }

.pg-how-it-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
.pg-how-it-works__step { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 16px; text-align: center; }
.pg-how-it-works__num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; margin-bottom: 8px; }
.pg-how-it-works__label { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.pg-how-it-works__desc { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 4px; }

.pg-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; overflow-x: auto; }
.pg-tab-bar__item { padding: 10px 16px; font-size: 0.8125rem; font-weight: 500; color: var(--text-tertiary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.pg-tab-bar__item:hover { color: var(--text-secondary); }
.pg-tab-bar__item--active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Quality Criteria (P155) ──────────────────────────────────────── */
.pg-criteria-card--disabled { opacity: 0.55; }
.pg-criteria-card__tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pg-criteria-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; font-weight: 500; border: 1px solid var(--border-default); color: var(--text-secondary); }
.pg-criteria-tag--off { background: var(--bg-tertiary, #f3f4f6); color: var(--text-tertiary); border-color: transparent; }

.pg-field { margin-bottom: 14px; }
.pg-field__label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.pg-field__input { width: 100%; padding: 8px 10px; font-size: 0.8125rem; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); box-sizing: border-box; transition: border-color 0.2s; }
.pg-field__input:focus { outline: none; border-color: var(--accent); }
select.pg-field__input { appearance: auto; }
textarea.pg-field__input { resize: vertical; font-family: inherit; }

.pg-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.pg-toggle input { opacity: 0; width: 0; height: 0; }
.pg-toggle__slider { position: absolute; inset: 0; background: var(--border-default); border-radius: 20px; transition: background 0.2s; }
.pg-toggle__slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.pg-toggle input:checked + .pg-toggle__slider { background: var(--accent, #6366f1); }
.pg-toggle input:checked + .pg-toggle__slider::before { transform: translateX(16px); }

/* ── Validation Context (P155) ─────────────────────────────────────── */
.pg-vctx-section { margin-bottom: 20px; }
.pg-vctx-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pg-vctx-section__title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.pg-vctx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pg-vctx-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary); border: 1px solid var(--border-default); }
.pg-vctx-chip--off { opacity: 0.45; text-decoration: line-through; }
.pg-section-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.pg-empty-state--compact { padding: 1.5rem 1rem; }

.pg-data-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.2s; }
.pg-data-card:hover { border-color: var(--accent); }
.pg-data-card__title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.pg-data-card__meta { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 3px; }
.pg-data-card__actions { display: flex; gap: 6px; align-items: center; }

.pg-status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; }
.pg-status-badge--passed { background: var(--success-bg); color: var(--success); }
.pg-status-badge--failed { background: var(--error-bg); color: var(--error); }
.pg-status-badge--needs_review { background: var(--warning-bg); color: #92400E; }
.pg-status-badge--not_run { background: var(--bg-secondary); color: var(--text-tertiary); }
.pg-status-badge--draft { background: var(--bg-secondary); color: var(--text-tertiary); }
.pg-status-badge--connected { background: var(--success-bg); color: var(--success); }
.pg-status-badge--beta { background: var(--warning-bg); color: #92400E; }

.pg-stepper { display: flex; gap: 4px; margin-bottom: 20px; align-items: center; }
.pg-stepper__step { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-tertiary); }
.pg-stepper__step--active { color: var(--accent); }
.pg-stepper__step--done { color: var(--success); }
.pg-stepper__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); }
.pg-stepper__step--active .pg-stepper__dot { background: var(--accent); }
.pg-stepper__step--done .pg-stepper__dot { background: var(--success); }
.pg-stepper__separator { flex: 1; height: 1px; background: var(--border-default); min-width: 20px; }

.pg-provider-group { margin-bottom: 20px; }
.pg-provider-group__title { font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }

.pg-score-card { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 8px; }
.pg-score-card__value { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.pg-score-card__label { font-size: 0.6875rem; color: var(--text-tertiary); }

/* ── Radar GEO Intelligence Feed ────────────────────────────────── */

.rg-stats-strip { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rg-stat { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; min-width: 100px; }
.rg-stat strong { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.rg-stat span { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; }

.rg-controls { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rg-search-input { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 0.875rem; }
.rg-search-input:focus { outline: none; border-color: var(--accent); }
.rg-filter-select { padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 0.875rem; min-width: 150px; }
.rg-filter-select:focus { outline: none; border-color: var(--accent); }

.rg-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.rg-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.rg-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.rg-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.rg-card__badges { display: flex; gap: 6px; }
.rg-card__category { font-size: 0.6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.rg-card__title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; line-height: 1.4; }
.rg-card__summary { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px 0; }
.rg-card__footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-tertiary); }
.rg-card__source { font-weight: 500; }
.rg-card__date { opacity: 0.8; }

.rg-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; }
.rg-badge--critical { background: #FEE2E2; color: #B91C1C; }
.rg-badge--high { background: #FEF3C7; color: #92400E; }
.rg-badge--medium { background: #DBEAFE; color: #1E40AF; }
.rg-badge--low { background: #E5E7EB; color: #374151; }
.rg-badge--urgency-breaking { background: #FEE2E2; color: #B91C1C; }
.rg-badge--urgency-urgent { background: #FEF3C7; color: #92400E; }
.rg-badge--urgency-developing { background: #DBEAFE; color: #1E40AF; }
.rg-badge--urgency-informational { background: #E5E7EB; color: #374151; }

.rg-error-state { padding: 24px; text-align: center; color: #B91C1C; background: #FEE2E2; border-radius: 10px; }
.rg-empty-state { padding: 48px 24px; text-align: center; color: var(--text-tertiary); }
.rg-empty-state p { font-size: 0.9375rem; }

.rg-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.rg-page-btn { padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 0.8125rem; cursor: pointer; }
.rg-page-btn:hover { border-color: var(--accent); }
.rg-page-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Radar GEO Modal */
.rg-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rg-modal { background: var(--bg-card); border-radius: 14px; max-width: 700px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; padding: 32px; }
.rg-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.5rem; color: var(--text-tertiary); cursor: pointer; line-height: 1; }
.rg-modal-close:hover { color: var(--text-primary); }
.rg-modal-badges { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.rg-modal-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 10px 0; line-height: 1.3; }
.rg-modal-meta { display: flex; gap: 16px; font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 20px; }
.rg-modal-section { margin-bottom: 16px; }
.rg-modal-section h4 { font-size: 0.8125rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px 0; }
.rg-modal-section p { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.6; margin: 0; }
.rg-modal-action { background: rgba(0,168,132,0.06); padding: 14px 16px; border-radius: 10px; border-left: 3px solid var(--accent); }
.rg-modal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.rg-tag { display: inline-flex; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; background: var(--bg-surface, #F3F4F6); color: var(--text-secondary); }
.rg-modal-source-link { display: inline-block; margin-top: 16px; color: var(--accent); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.rg-modal-source-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .rg-card-grid { grid-template-columns: 1fr; }
  .rg-controls { flex-direction: column; }
  .rg-search-input { min-width: unset; }
  .rg-modal { padding: 20px; margin: 10px; max-height: 90vh; }
  .rg-stats-strip { gap: 8px; }
  .rg-stat { min-width: 80px; padding: 8px 12px; }
}

/* ── Radar GEO Sources Backoffice ───────────────────────────── */

.rgs-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rgs-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border-default); color: var(--text-tertiary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rgs-table td { padding: 10px; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.rgs-table tr:hover { background: rgba(0,168,132,0.04); }
.rgs-name-cell strong { display: block; color: var(--text-primary); }
.rgs-url-hint { color: var(--text-tertiary); font-size: 0.6875rem; word-break: break-all; }
.rgs-actions-cell { white-space: nowrap; }
.rgs-btn { padding: 3px 8px; font-size: 0.6875rem; border: 1px solid var(--border-default); border-radius: 5px; background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.rgs-btn:hover { border-color: var(--accent); color: var(--accent); }
.rgs-on { color: #16a34a; font-weight: 600; }
.rgs-off { color: #9ca3af; font-weight: 600; }

.rgs-health { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.6875rem; font-weight: 600; }
.rgs-health--healthy { background: #D1FAE5; color: #065F46; }
.rgs-health--degraded { background: #FEF3C7; color: #92400E; }
.rgs-health--unhealthy { background: #FEE2E2; color: #B91C1C; }
.rgs-health--new { background: #DBEAFE; color: #1E40AF; }
.rgs-health--disabled { background: #E5E7EB; color: #374151; }
.rgs-health--unknown { background: #E5E7EB; color: #6B7280; }
.rgs-health--error { background: #FEE2E2; color: #B91C1C; }
.rgs-health--never_crawled { background: #DBEAFE; color: #1E40AF; }

.rgs-modal-wide { max-width: 800px; }
.rgs-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 16px 0; font-size: 0.8125rem; }
.rgs-detail-grid div { line-height: 1.5; }
.rgs-detail-grid a { color: var(--accent); word-break: break-all; }
.rgs-detail-actions { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.rgs-diag-section { margin-top: 16px; padding: 14px 16px; background: rgba(0,168,132,0.04); border-radius: 10px; border-left: 3px solid var(--accent); }
.rgs-diag-section h4 { margin: 0 0 8px 0; font-size: 0.875rem; }
.rgs-diag-section ul { margin: 0; padding-left: 20px; font-size: 0.8125rem; }

.rgs-form { display: flex; flex-direction: column; gap: 12px; }
.rgs-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
.rgs-form input, .rgs-form select, .rgs-form textarea { padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 0.8125rem; }
.rgs-form input:focus, .rgs-form select:focus, .rgs-form textarea:focus { outline: none; border-color: var(--accent); }
.rgs-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

@media (max-width: 768px) {
  .rgs-detail-grid { grid-template-columns: 1fr; }
  .rgs-table { font-size: 0.75rem; }
  .rgs-table th, .rgs-table td { padding: 6px; }
}

/* ── Onboarding Wizard v2 ──────────────────────────────────────────── */
.obw-container { max-width: 780px; margin: 0 auto; padding: 32px 16px; }
.obw-header { text-align: center; margin-bottom: 32px; }
.obw-header__title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.obw-header__subtitle { font-size: 0.875rem; color: var(--text-secondary); }

/* Stepper */
.obw-stepper { display: flex; gap: 0; margin-bottom: 32px; position: relative; }
.obw-stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; cursor: default; }
.obw-stepper__num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; border: 2px solid var(--border-default); background: var(--bg-card); color: var(--text-tertiary); transition: all 0.3s; z-index: 1; }
.obw-stepper__label { font-size: 0.6875rem; color: var(--text-tertiary); text-align: center; line-height: 1.3; transition: color 0.3s; }
.obw-stepper__step--active .obw-stepper__num { border-color: var(--accent); background: var(--accent); color: #fff; }
.obw-stepper__step--active .obw-stepper__label { color: var(--accent); font-weight: 600; }
.obw-stepper__step--done .obw-stepper__num { border-color: #22c55e; background: #22c55e; color: #fff; }
.obw-stepper__step--done .obw-stepper__label { color: #22c55e; }
.obw-stepper__step--done .obw-stepper__num::after { content: '\2713'; }
.obw-stepper__step:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--border-default); z-index: 0; }
.obw-stepper__step--done:not(:last-child)::after { background: #22c55e; }

/* Step panel */
.obw-panel { display: none; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; padding: 28px; }
.obw-panel--active { display: block; animation: obwFadeIn 0.3s ease; }
@keyframes obwFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.obw-panel__title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.obw-panel__desc { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 20px; }

/* Form fields */
.obw-field { margin-bottom: 16px; }
.obw-field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.obw-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.875rem; box-sizing: border-box; }
.obw-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,168,132,0.12); }
.obw-field input.obw-error { border-color: var(--danger, #ef4444); }
.obw-field .obw-field-error { font-size: 0.75rem; color: var(--danger, #ef4444); margin-top: 4px; display: none; }

/* Variation chips / list */
.obw-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.obw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 20px; font-size: 0.8125rem; color: var(--text-tertiary); background: var(--bg-tertiary, var(--bg-secondary)); cursor: pointer; transition: all 0.2s; user-select: none; opacity: 0.55; }
.obw-chip:hover { border-color: var(--accent); opacity: 0.75; }
.obw-chip--selected { border-color: var(--accent); background: var(--primary-soft, rgba(0,168,132,0.10)); color: var(--accent); opacity: 1; font-weight: 500; }
.obw-chip--selected:hover { opacity: 0.9; }
.obw-chip__check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-default); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; transition: all 0.2s; color: transparent; }
.obw-chip--selected .obw-chip__check { background: var(--accent); border-color: var(--accent); color: #fff; }
.obw-chip__confidence { font-size: 0.6875rem; color: var(--text-tertiary); margin-left: 2px; opacity: 0.7; }
.obw-chip--selected .obw-chip__confidence { opacity: 1; color: var(--accent); }

/* Competitor cards */
.obw-competitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.obw-competitor-card { border: 1.5px solid var(--border-default); border-radius: 10px; padding: 14px; cursor: pointer; transition: all 0.2s; background: var(--bg-card); }
.obw-competitor-card:hover { border-color: var(--accent); }
.obw-competitor-card--selected { border-color: var(--accent); background: var(--primary-soft, rgba(0,168,132,0.08)); }
.obw-competitor-card__name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.obw-competitor-card__url { font-size: 0.75rem; color: var(--text-tertiary); word-break: break-all; }
.obw-competitor-card__reason { font-size: 0.75rem; color: var(--text-secondary); margin-top: 6px; }
.obw-competitor-card__check { float: right; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-default); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; }
.obw-competitor-card--selected .obw-competitor-card__check { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Add manual row */
.obw-add-row { display: flex; gap: 8px; margin-bottom: 16px; align-items: flex-end; }
.obw-add-row input { flex: 1; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.8125rem; }
.obw-add-row input:focus { outline: none; border-color: var(--accent); }

/* Competitor variations accordion */
.obw-cv-section { border: 1px solid var(--border-default); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.obw-cv-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; background: var(--bg-secondary); font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.obw-cv-header:hover { background: var(--bg-tertiary, var(--bg-secondary)); }
.obw-cv-body { padding: 12px 16px; display: none; }
.obw-cv-section--open .obw-cv-body { display: block; }
.obw-cv-add-row { display: flex; gap: 8px; margin-top: 10px; }
.obw-cv-add-input { flex: 1; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 6px; font-size: 0.8125rem; background: var(--bg-primary); color: var(--text-primary); }
.obw-cv-add-input::placeholder { color: var(--text-tertiary); }
.obw-cv-add-btn { white-space: nowrap; }
.obw-cv-dup-msg { font-size: 0.75rem; color: var(--warning, #e6a700); margin-top: 4px; min-height: 1em; }

/* Confirmation summary */
.obw-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.obw-summary__section { background: var(--bg-secondary); border-radius: 10px; padding: 16px; }
.obw-summary__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.obw-summary__header h4 { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.obw-summary__edit { font-size: 0.75rem; color: var(--accent); padding: 2px 8px; }
.obw-summary__section ul { list-style: none; padding: 0; margin: 0; }
.obw-summary__section li { font-size: 0.8125rem; color: var(--text-primary); padding: 3px 0; }
.obw-summary__section li::before { content: '\2022'; color: var(--accent); margin-right: 8px; }
.obw-summary__section--full { grid-column: 1 / -1; }

/* Validation rules checklist */
.obw-rules-list { display: flex; flex-direction: column; gap: 8px; }
.obw-rule { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-card); }
.obw-rule__toggle { width: 36px; height: 20px; border-radius: 10px; background: var(--border-default); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.obw-rule__toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.obw-rule--enabled .obw-rule__toggle { background: var(--accent); }
.obw-rule--enabled .obw-rule__toggle::after { transform: translateX(16px); }
.obw-rule__info { flex: 1; }
.obw-rule__title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.obw-rule__desc { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }

/* Footer navigation */
.obw-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; }
.obw-footer .btn { min-width: 120px; }

/* AI suggest button */
.obw-ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--accent); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.obw-ai-btn:hover { background: var(--primary-soft, rgba(0,168,132,0.08)); }
.obw-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.obw-ai-btn .spinner-sm { width: 14px; height: 14px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }

/* Loading skeleton for chips */
.obw-loading { display: flex; flex-wrap: wrap; gap: 8px; }
.obw-loading .skeleton { width: 100px; height: 32px; border-radius: 16px; }

/* Messages */
.obw-cancel-btn { color: var(--text-tertiary); font-size: 0.75rem; }
.obw-cancel-btn:hover { color: var(--danger, #ef4444); }
.obw-msg { padding: 10px 14px; border-radius: 8px; font-size: 0.8125rem; margin-bottom: 16px; display: none; }
.obw-msg--error { background: rgba(239,68,68,0.08); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.2); display: block; }
.obw-msg--success { background: rgba(34,197,94,0.08); color: #22c55e; border: 1px solid rgba(34,197,94,0.2); display: block; }
.obw-msg--info { background: rgba(59,130,246,0.08); color: var(--info, #3b82f6); border: 1px solid rgba(59,130,246,0.2); display: block; }

/* Completion animation */
.obw-complete { text-align: center; padding: 48px 24px; }
.obw-complete__icon { font-size: 3rem; margin-bottom: 16px; animation: obwBounce 0.6s ease; }
@keyframes obwBounce { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.obw-complete__title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.obw-complete__desc { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 24px; }

@media (max-width: 768px) {
  .obw-stepper__label { display: none; }
  .obw-stepper__step:not(:last-child)::after { left: calc(50% + 18px); right: calc(-50% + 18px); }
  .obw-summary { grid-template-columns: 1fr; }
  .obw-competitor-grid { grid-template-columns: 1fr; }
  .obw-add-row { flex-direction: column; }
}