/* HiveX New UI - Design System from systemv-recolor-refresh */
/* All styles centralized here — edit modules/*.css only. */
/* Bundle: theme_auth (auth shells) — generated by build_css.py */


/* ============================================
   Module: variables.css
   ============================================ */

/* HiveX New UI - Design System from systemv-recolor-refresh */
/* All styles centralized here - no inline CSS, no hardcoded colors */

/* ============================================
   CSS Variables - Design Tokens
   ============================================ */

:root {
  /* Typography */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Base Colors - HSL format only */
  --background: 240 4% 4%;
  --foreground: 0 0% 100%;

  --card: 240 2% 11%;
  --card-foreground: 0 0% 100%;

  --popover: 240 2% 11%;
  --popover-foreground: 0 0% 100%;

  --primary: 45 63% 49%;
  --primary-foreground: 0 0% 0%;

  --secondary: 240 2% 11%;
  --secondary-foreground: 0 0% 100%;

  --muted: 240 2% 16%;
  --muted-foreground: 0 0% 64%;

  --accent: 45 63% 49%;
  --accent-foreground: 0 0% 0%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;

  --border: 240 2% 16%;
  --input: 240 2% 16%;
  --ring: 45 63% 49%;

  --radius: 0.75rem;
  /* Full pill / circle (avatars, circular crops); required by .avatar and badge radius utilities */
  --radius-full: 9999px;

  /* Unified scrollbars (workspace-manager pattern) */
  --hivex-scrollbar-size: 0.5rem;
  --hivex-scrollbar-thumb: var(--dashboard-border);
  --hivex-scrollbar-thumb-opacity: 0.3;
  --hivex-scrollbar-thumb-hover-opacity: 0.5;

  /* Sidebar Colors */
  --sidebar-background: 240 4% 7%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 45 63% 49%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 240 2% 11%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 240 2% 16%;
  --sidebar-ring: 45 63% 49%;

  /* Dashboard specific colors */
  --dashboard-bg: 240 4% 4%;
  --dashboard-card: 240 2% 11%;
  --dashboard-card-hover: 240 2% 14%;
  --dashboard-border: 45 63% 49%;
  --dashboard-accent: 45 63% 49%;
  /*
   * Outer rim for dashboard section cards (chart tiles, overview shells, Meta/TikTok/Google tiles).
   * One width + alpha everywhere so gold frames match SystemV 1:1 across platforms.
   */
  --dashboard-container-border-width: 1px;
  --dashboard-container-border-alpha: 0.35;
  --dashboard-text: 0 0% 100%;
  --dashboard-text-muted: 0 0% 64%;

  /*
   * In-card icon+title inset for intel/strategic cards:
   * rim padding on .card + padding on each direct child of .dashboard-chart-card.
   */
  --dashboard-card-rim-padding: 0.75rem;
  --dashboard-chart-card-child-padding: 0.5rem;
  --dashboard-in-card-head-padding-x: calc(
    var(--dashboard-card-rim-padding) + var(--dashboard-chart-card-child-padding)
  );
  --dashboard-in-card-head-padding-top: var(--dashboard-in-card-head-padding-x);

  /*
   * Platform dashboards (.tabs-content): flex column gap between major blocks.
   * Subtitle row to divider uses --dashboard-page-section-inner-pad-b on the header inner.
   */
  --dashboard-page-section-gap: 1.5rem;
  --dashboard-page-section-inner-pad-b: 0.75rem;

  /* Status colors (shared across light/dark) */
  --status-active: 142 71% 45%;
  --status-paused: 45 93% 47%;
  --status-learning: 199 89% 48%;
  --status-learning-limited: 25 95% 58%;
  --status-in-review: 262 83% 58%;
  --status-processing: 213 85% 55%;
  --status-disapproved: 0 84% 60%;
  --status-billing: 38 92% 50%;
  --status-with-issues: 330 81% 60%;
  --status-archived: 215 14% 55%;
  --status-off: 215 14% 65%;
  /* Matches .dark / .light — used by shared components (e.g. .btn-danger) before body theme resolves */
  --status-disconnected: 0 84% 60%;

  /* Accessibility / Feedback widgets */
  --a11y-fab-bg: 0 0% 0%;
  --a11y-fab-fg: 0 0% 100%;
  --a11y-overlay: 0 0% 0%;
  --a11y-shadow: 0 0% 0%;
}

/* Dark mode (default) - same as root for now */
.dark {
  --background: 240 4% 4%;
  --foreground: 0 0% 100%;

  --card: 240 2% 11%;
  --card-foreground: 0 0% 100%;

  --popover: 240 2% 11%;
  --popover-foreground: 0 0% 100%;

  --primary: 45 63% 49%;
  --primary-foreground: 0 0% 0%;

  --secondary: 240 2% 11%;
  --secondary-foreground: 0 0% 100%;

  --muted: 240 2% 16%;
  --muted-foreground: 0 0% 64%;

  --accent: 45 63% 49%;
  --accent-foreground: 0 0% 0%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;

  --border: 240 2% 16%;
  --input: 240 2% 16%;
  --ring: 45 63% 49%;
  
  --sidebar-background: 240 4% 7%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 45 63% 49%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 240 2% 11%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 240 2% 16%;
  --sidebar-ring: 45 63% 49%;

  --dashboard-bg: 240 4% 4%;
  --dashboard-card: 240 2% 11%;
  --dashboard-card-hover: 240 2% 14%;
  --dashboard-border: 45 63% 49%;
  --dashboard-accent: 45 63% 49%;
  /*
   * Outer rim for dashboard section cards — same tokens as :root (dark dashboard chrome).
   */
  --dashboard-container-border-width: 1px;
  --dashboard-container-border-alpha: 0.35;
  --dashboard-text: 0 0% 100%;
  --dashboard-text-muted: 0 0% 64%;

  /* Platform brand colors */
  --platform-meta: 217 89% 51%;
  --platform-instagram: 346 75% 57%;
  --platform-google: 142 56% 48%;
  --platform-tiktok: 0 0% 100%;
  --platform-pinterest: 0 100% 45%;
  --platform-x: 0 0% 42%;
  --platform-linkedin: 201 100% 48%;

  /* Workspace colors palette */
  --workspace-color-1: 45 63% 49%;
  --workspace-color-2: 217 89% 51%;
  --workspace-color-3: 142 71% 45%;
  --workspace-color-4: 45 93% 47%;
  --workspace-color-5: 0 84% 60%;
  --workspace-color-6: 262 83% 58%;
  --workspace-color-7: 330 81% 60%;
  --workspace-color-8: 188 94% 43%;

  /* Status colors - matching systemv green-500, yellow-500, red-500 */
  --status-active: 142 71% 45%;
  --status-paused: 45 93% 47%;
  --status-disconnected: 0 84% 60%;

  /* Red color variants for destructive actions */
  --color-red: 0 84% 60%;
  --color-red-light: 0 72% 58%;

  /* Engagement metric colors (Viral Pulse = pink, Follow Rate = blue) */
  --color-pink: 319 85% 64%;
  --color-blue: 213 93% 67%;
  --color-purple: 270 91% 73%;
  --color-gray: 215 14% 65%;

  /* Badge/chip colors for KPIs and funnel (systemv-style) */
  --badge-red: 0 84% 60%;
  --badge-emerald: 160 84% 39%;
  --badge-amber: 38 92% 50%;
  --badge-yellow: 48 96% 53%;
  --badge-sky: 199 89% 48%;
  --badge-violet: 263 70% 50%;

  /* Campaign table rank rings (systemv GoogleAdsDashboard trophy) */
  --rank-gold: 45 93% 55%;
  --rank-silver: 215 16% 65%;
  --rank-bronze: 32 90% 44%;

  /* Chart.js / canvas */
  --chart-grid: 240 4% 28%;
  --chart-tick: 0 0% 64%;
  --chart-crosshair: 0 0% 75%;
  --chart-tooltip-bg: 240 2% 11%;
  --chart-tooltip-border: 240 6% 28%;
  --chart-tooltip-foreground: 0 0% 96%;
}

/* Light mode — aligned with marketing landing ([data-theme="light"] in theme.css): cool gray shell, white cards, slate text, SystemV gold accent */
.light {
  /* #F3F4F6 shell, #111827 / #6B7280 text, #E5E7EB borders (HSL equivalents) */
  --background: 220 14% 96%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 45 63% 49%;
  --primary-foreground: 0 0% 0%;

  --secondary: 220 14% 94%;
  --secondary-foreground: 222 47% 11%;

  --muted: 220 14% 94%;
  --muted-foreground: 220 9% 46%;

  --accent: 45 63% 49%;
  --accent-foreground: 0 0% 0%;

  --destructive: 0 72% 46%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 45 63% 49%;

  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-primary: 45 63% 49%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 220 14% 96%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 45 63% 49%;

  --dashboard-bg: 220 14% 96%;
  --dashboard-card: 0 0% 100%;
  --dashboard-card-hover: 220 14% 98%;
  --dashboard-border: 45 63% 49%;
  --dashboard-accent: 45 63% 49%;
  --dashboard-container-border-width: 1px;
  --dashboard-container-border-alpha: 0.35;
  --dashboard-text: 222 47% 11%;
  --dashboard-text-muted: 220 9% 46%;

  --platform-meta: 217 89% 45%;
  --platform-instagram: 346 75% 52%;
  --platform-google: 142 68% 36%;
  --platform-tiktok: 240 12% 8%;
  --platform-pinterest: 0 84% 42%;
  --platform-x: 240 6% 28%;
  --platform-linkedin: 201 100% 38%;

  --workspace-color-1: 45 63% 49%;
  --workspace-color-2: 217 89% 45%;
  --workspace-color-3: 142 64% 36%;
  --workspace-color-4: 38 92% 42%;
  --workspace-color-5: 0 72% 46%;
  --workspace-color-6: 262 70% 48%;
  --workspace-color-7: 330 75% 48%;
  --workspace-color-8: 188 80% 36%;

  --status-active: 142 64% 36%;
  --status-paused: 38 92% 42%;
  --status-learning: 199 80% 40%;
  --status-learning-limited: 25 90% 45%;
  --status-in-review: 262 70% 48%;
  --status-processing: 213 85% 48%;
  --status-disapproved: 0 72% 46%;
  --status-billing: 38 92% 42%;
  --status-with-issues: 330 75% 48%;
  --status-archived: 220 9% 46%;
  --status-disconnected: 0 72% 46%;

  --color-red: 0 72% 46%;
  --color-red-light: 0 65% 48%;

  --color-pink: 319 75% 48%;
  --color-blue: 213 85% 48%;
  --color-purple: 270 80% 48%;
  --color-gray: 220 9% 46%;

  --badge-red: 0 72% 46%;
  --badge-emerald: 160 70% 32%;
  --badge-amber: 38 92% 42%;
  --badge-yellow: 48 90% 44%;
  --badge-sky: 199 82% 40%;
  --badge-violet: 263 65% 46%;

  --rank-gold: 43 100% 42%;
  --rank-silver: 215 16% 48%;
  --rank-bronze: 32 85% 40%;

  --a11y-fab-bg: 43 30% 99%;
  --a11y-fab-fg: 240 3% 10%;
  --a11y-overlay: 240 3% 10%;
  --a11y-shadow: 240 3% 10%;

  --chart-grid: 220 13% 87%;
  --chart-tick: 220 9% 46%;
  --chart-crosshair: 220 9% 55%;
  --chart-tooltip-bg: 222 47% 11%;
  --chart-tooltip-border: 45 63% 49%;
  --chart-tooltip-foreground: 0 0% 98%;
}



/* ============================================
   Module: base.css
   ============================================ */

/* ============================================
   Base Styles
   ============================================ */

* {
  border-color: hsl(var(--border));
}

html {
  /* Reserve space for vertical scrollbar to avoid layout shift / horizontal "jump" while scrolling. */
  scrollbar-gutter: stable;
}

html,
body {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

html.hivex-scroll-lock,
body.hivex-scroll-lock {
  overscroll-behavior: none;
}

/* Unified scrollbars app-wide (matches workspace manager) */
*,
.hivex-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--hivex-scrollbar-thumb) / var(--hivex-scrollbar-thumb-opacity)) transparent;
}

*::-webkit-scrollbar,
.hivex-scrollbar::-webkit-scrollbar {
  width: var(--hivex-scrollbar-size);
  height: var(--hivex-scrollbar-size);
}

*::-webkit-scrollbar-track,
.hivex-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb,
.hivex-scrollbar::-webkit-scrollbar-thumb {
  background-color: hsl(var(--hivex-scrollbar-thumb) / var(--hivex-scrollbar-thumb-opacity));
  border-radius: 0.25rem;
}

*::-webkit-scrollbar-thumb:hover,
.hivex-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--hivex-scrollbar-thumb) / var(--hivex-scrollbar-thumb-hover-opacity));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
}

/*
 * Form controls use the user-agent font stack unless overridden — they do not inherit
 * body font-family consistently across browsers. Inherit from ancestors so dashboard
 * chrome (buttons, inputs, selects) matches --font-sans like the rest of the app.
 */
button,
input,
select,
textarea {
  font-family: inherit;
}



/* ============================================
   Module: auth.css
   ============================================ */

/* Switch input styling */
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Switch with checkbox - using :has() for modern browsers */
.switch:has(.switch-input:checked) {
  background-color: hsl(var(--primary));
}

.switch:has(.switch-input:checked) .switch-thumb {
  transform: translateX(1.25rem);
}

.switch:has(.switch-input:not(:checked)) {
  background-color: hsl(var(--input));
}

.switch:has(.switch-input:not(:checked)) .switch-thumb {
  transform: translateX(0);
}

/* data-state switch rules live in components.css (loaded earlier in theme_new.css) */

/* ============================================
   Feedback Widget
   ============================================ */

.feedback-widget {
  position: relative;
}

.feedback-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 9999px;
  border: 2px solid hsl(var(--dashboard-accent));
  background-color: hsl(var(--a11y-fab-bg));
  color: hsl(var(--a11y-fab-fg));
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 15px -3px hsl(var(--a11y-shadow) / 0.1), 0 4px 6px -4px hsl(var(--a11y-shadow) / 0.1);
}

.feedback-toggle:hover {
  background-color: hsl(var(--a11y-fab-bg) / 0.8);
  transform: scale(1.1);
}

.feedback-toggle svg,
.feedback-toggle-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  object-fit: contain;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Light Mode Support
   ============================================ */

/* ============================================
   Accessibility Logic (applied by JS)
   ============================================ */

html.high-contrast {
  --muted-foreground: var(--foreground);
  --dashboard-text-muted: var(--dashboard-text);
  --border: var(--foreground);
  --input: var(--foreground);
  filter: contrast(1.15);
}

html.a11y-font-80 { font-size: 80%; }
html.a11y-font-90 { font-size: 90%; }
html.a11y-font-110 { font-size: 110%; }
html.a11y-font-120 { font-size: 120%; }
html.a11y-font-130 { font-size: 130%; }
html.a11y-font-140 { font-size: 140%; }
html.a11y-font-150 { font-size: 150%; }

html.readable-font body {
  font-family: Arial, Verdana, Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html.highlight-links a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

html.text-spacing body,
html.text-spacing p,
html.text-spacing li,
html.text-spacing a,
html.text-spacing label,
html.text-spacing button,
html.text-spacing input,
html.text-spacing textarea,
html.text-spacing select {
  letter-spacing: 0.06em;
  word-spacing: 0.12em;
  line-height: 1.6;
}

html.large-cursor,
html.large-cursor * {
  cursor: none;
}

#a11y-large-cursor {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 32px;
  height: 32px;
  background-color: hsl(var(--a11y-fab-fg));
  clip-path: polygon(
    0% 0%,
    0% 75%,
    18% 60%,
    32% 96%,
    44% 92%,
    30% 56%,
    60% 56%
  );
  filter:
    drop-shadow(0 10px 15px hsl(var(--a11y-shadow) / 0.18))
    drop-shadow(0 4px 6px hsl(var(--a11y-shadow) / 0.18));
  pointer-events: none;
  z-index: 2147483646;
  will-change: left, top;
}

#a11y-large-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  clip-path: polygon(
    6% 6%,
    6% 70%,
    20% 58%,
    33% 90%,
    40% 87%,
    28% 56%,
    56% 56%
  );
  background-color: hsl(var(--a11y-shadow) / 0.6);
}

html.keyboard-nav :focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ============================================
   AUTH PAGE STYLES (SystemV Design)
   ============================================ */

.auth-page {
  position: fixed;
  inset: 0;
  min-height: 0;
  background: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Full-screen backdrop during redirect to IdP (client-only; pairs with auth_oauth_leave.js). */
.auth-oauth-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: hsl(var(--background));
  pointer-events: none;
  opacity: 0;
}

body.auth-oauth-transition-pending .auth-oauth-transition-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Soft Aurora canvas container */
.auth-soft-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Main Content — centered single-column */
.auth-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 1.5rem;
}

.auth-content--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-block: 1rem;
  flex-shrink: 0;
}

/* Narrow viewports: horizontal gutter + top-aligned column so logo isn’t clipped by vertical centering */
@media (max-width: 640px) {
  .auth-page {
    align-items: flex-start;
    justify-content: center;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  .auth-content {
    padding-left: calc(1.75rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.75rem + env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .auth-content--centered {
    justify-content: flex-start;
    padding-block: 0.75rem 1rem;
    width: 100%;
  }
}

/* Brand group: logo + headline stacked, sits above the card */
.auth-brand-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.auth-hero-logo-wrap {
  display: flex;
  justify-content: center;
}

.auth-hero-logo {
  width: 5rem;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 20px hsl(var(--accent) / 0.4));
}

.auth-headline {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: hsl(var(--foreground));
  margin: 0;
  line-height: 1;
}

.auth-headline-accent {
  color: hsl(var(--accent));
}

.auth-headline-sub {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

/* Error notification banner */
.auth-error-banner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0.625rem;
  background: hsl(0 60% 12% / 0.85);
  border: 1px solid hsl(0 65% 40% / 0.55);
  color: hsl(0 75% 72%);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  animation: auth-error-in 0.25s ease;
}

.auth-error-banner svg {
  flex-shrink: 0;
  color: hsl(0 75% 65%);
}

@keyframes auth-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-success-banner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0.625rem;
  background: hsl(var(--accent) / 0.12);
  border: 1px solid hsl(var(--accent) / 0.45);
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  animation: auth-error-in 0.25s ease;
}

.auth-success-banner svg {
  flex-shrink: 0;
  color: hsl(var(--accent));
}

.auth-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0.625rem;
  background: hsl(var(--muted) / 0.35);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  animation: auth-error-in 0.25s ease;
}

.auth-info-banner svg {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  margin-top: 0.1rem;
}

/* Auth Form Wrapper */
.auth-form-wrapper {
  width: 100%;
  max-width: 32rem;
}

.auth-card {
  background: hsl(0 0% 0% / 0.92);
  backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--accent) / 0.45);
  border-radius: 0.75rem;
  box-shadow:
    0 0 0 1px hsl(var(--accent) / 0.12),
    0 8px 32px hsl(var(--accent) / 0.10);
  /* Do not clip stacked login/register forms (absolute overlay was cutting off social + submit). */
  overflow: visible;
}

.auth-card-accent {
  display: none;
}

.auth-card-content {
  padding: 1.75rem 1.75rem 2rem;
}

/* Auth switch — billing-switch style with golden border & spring animation */
.auth-switch {
  width: 100%;
  margin-bottom: 1.25rem;
}

.auth-switch__track {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 9999px;
  background: hsl(0 0% 0%);
  border: 1px solid hsl(var(--accent) / 0.45);
  overflow: hidden;
  isolation: isolate;
  --auth-switch-inset: 3px;
}

.auth-switch__thumb {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 0;
  border-radius: 9999px;
  background: hsl(var(--accent) / 0.16);
  border: none;
  box-shadow: 0 0 0 1px hsl(var(--accent) / 0.55);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    left  0.38s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-switch__track.auth-switch--thumb-ready .auth-switch__thumb {
  opacity: 1;
}

.auth-switch__opt {
  position: relative;
  z-index: 2;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(0 0% 48%);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color 0.2s ease;
}

.auth-switch__opt.is-active {
  color: hsl(0 0% 96%);
}

.auth-switch__opt:not(.is-active):hover {
  color: hsl(0 0% 80%);
}

.auth-switch__opt:hover,
.auth-switch__opt:active {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.auth-switch__opt:focus { outline: none; }

.auth-switch__opt:focus-visible {
  outline: 2px solid hsl(var(--accent) / 0.7);
  outline-offset: 2px;
}

/* Form — only the active pane contributes height (avoids huge gap + clipped logo scroll issue). */
.auth-form-container {
  display: block;
  width: 100%;
}

.auth-form-container:not(.auth-form-container--signup) #authRegisterForm {
  display: none;
}

.auth-form-container.auth-form-container--signup #authLoginForm {
  display: none;
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

#authLoginForm,
#authRegisterForm {
  position: relative;
  min-width: 0;
}

/* Primary CTAs — single layout slot; inactive button absolutely stacked (no desktop duplicate stack). */
.auth-primary-cta-layer {
  position: relative;
  margin-top: 1rem;
  width: 100%;
  min-height: calc(3.25rem + 2px);
}

.auth-primary-cta-layer > .auth-submit-btn {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  margin: 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.auth-primary-cta-layer:not(.auth-primary-cta-layer--signup) #authCtaLogin {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.auth-primary-cta-layer:not(.auth-primary-cta-layer--signup) #authCtaSignup {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-primary-cta-layer.auth-primary-cta-layer--signup #authCtaLogin {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-primary-cta-layer.auth-primary-cta-layer--signup #authCtaSignup {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.auth-primary-cta-layer.auth-primary-cta-layer--signup {
  margin-top: 1.5rem;
}

.auth-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-form-group-forgot {
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 0.25rem;
}

.auth-form-group-push {
  margin-top: 1rem;
}

.auth-label {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}

.auth-input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--muted-foreground));
  transition: color 0.3s;
  pointer-events: none;
  z-index: 1;
}

.auth-input-wrapper:focus-within .auth-input-icon {
  color: hsl(var(--accent));
}

.auth-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  height: 3rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border) / 0.3);
  border-radius: 0.75rem;
  color: hsl(var(--foreground));
  font-size: 1rem;
  transition: all 0.3s;
  box-sizing: border-box;
}

.auth-input::placeholder {
  color: hsl(var(--muted-foreground) / 0.5);
}

.auth-input:focus {
  outline: none;
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 1px hsl(var(--accent) / 0.2);
}

.auth-password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
  z-index: 1;
}

.auth-password-toggle:hover {
  color: hsl(var(--accent));
}

.auth-password-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.auth-forgot-link {
  font-size: 0.875rem;
  color: hsl(var(--accent));
  text-decoration: none;
  transition: color 0.3s;
}

.auth-forgot-link:hover {
  color: hsl(var(--accent) / 0.8);
}

/* Social rail: optical balance — slightly more air below buttons than divider→buttons matches label + lines */
.auth-social-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 0;
}

.auth-social-wrap .auth-social-buttons {
  margin-block: 0.0625rem;
}

.auth-social-wrap .auth-social-divider {
  margin: 0;
}

.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-social-divider-line {
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

.auth-social-divider-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.auth-social-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.auth-social-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.625rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.auth-social-btn:hover {
  border-color: hsl(var(--accent));
  background: hsl(var(--accent) / 0.06);
  color: hsl(var(--foreground));
}

.auth-social-btn:hover .auth-social-btn-icon-wrap {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}

.auth-social-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* Rounded tile so provider marks read clearly at a glance */
.auth-social-btn-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border) / 0.65);
  color: hsl(var(--foreground));
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.auth-social-btn-svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.auth-social-btn-svg--meta {
  width: 1rem;
  height: 1rem;
}

.auth-social-btn-label {
  flex: 1;
  text-align: center;
  line-height: 1.2;
  min-width: 0;
}

@media (max-width: 360px) {
  .auth-social-buttons {
    grid-template-columns: 1fr;
  }
}

/* CTA button — pill shape matching landing-btn-glow, static (no animation) */
.auth-submit-btn {
  width: 100%;
  padding: 1px;
  border-radius: 100px;
  border: none;
  background: hsl(var(--accent) / 0.82);
  box-shadow: none;
  cursor: pointer;
  display: block;
  transition: box-shadow 0.22s ease;
}

.auth-submit-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  height: 3.25rem;
  border-radius: 100px;
  background: hsl(0 0% 3%);
  color: hsl(0 0% 100%);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-sizing: border-box;
}

.auth-submit-btn:hover {
  box-shadow: none;
}

/* Coming Soon */
.auth-form-register {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.auth-signup-methods {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: -0.375rem;
}

/* Sign up: equal flex space above/below Google+Meta between the two dividers */
.auth-signup-oauth-rail {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.auth-signup-oauth-rail .auth-social-divider {
  margin: 0;
  flex: 0 0 auto;
}

.auth-signup-oauth-rail__center {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 7rem;
}

.auth-signup-oauth-rail__spacer {
  flex: 1 1 0;
  min-height: 0.25rem;
  min-width: 0;
}

.auth-signup-oauth-rail .auth-social-buttons {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
}

.auth-register-intro {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
}

.auth-register-footnote {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.auth-signup-email-block {
  margin-bottom: 0;
  margin-top: 0;
}

.auth-signup-email-block > .auth-social-divider {
  margin: 0;
}

.auth-signup-email-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding-top: 1rem;
}

.auth-signup-email-form .auth-input {
  min-height: 3.25rem;
  height: auto;
  padding-top: 0.8125rem;
  padding-bottom: 0.8125rem;
}

.auth-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 1rem;
}

.auth-coming-soon-icon {
  color: hsl(var(--accent));
  margin-bottom: 0.5rem;
}

.auth-coming-soon-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.auth-coming-soon-text {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 20rem;
  margin: 0;
}

/* Terms — hidden on Sign Up via JS opacity toggle */
.auth-terms {
  text-align: center;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 1.5rem;
  margin-bottom: 0;
  transition: opacity 0.2s ease;
}

.auth-terms-link {
  color: hsl(var(--accent));
  text-decoration: none;
  transition: color 0.3s;
}

.auth-terms-link:hover {
  text-decoration: underline;
}

/* ============================================
   Campaign Detail Drawer
   ============================================ */

.campaign-drawer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
}

.campaign-drawer[aria-hidden="false"] {
  pointer-events: auto;
}

.campaign-drawer-overlay {
  position: fixed;
  inset: 0;
  background: hsl(var(--a11y-overlay) / 0.8);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 10020;
}

.campaign-drawer[aria-hidden="false"] .campaign-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.campaign-drawer-content {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 50vw;
  background: hsl(var(--dashboard-bg));
  border-left: 1px solid hsl(var(--dashboard-border));
  box-shadow: -4px 0 24px hsl(var(--a11y-shadow) / 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
  z-index: 10021;
  pointer-events: auto;
}

.campaign-drawer-content.is-resized {
  max-width: 100vw;
  min-width: 24rem;
}

.campaign-drawer-resize-handle {
  position: absolute;
  left: -0.75rem;
  top: 0;
  bottom: 0;
  width: 1.5rem;
  cursor: col-resize;
  z-index: 10022;
  background: transparent;
}

.campaign-drawer-resize-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
  padding: 0;
  color: hsl(var(--dashboard-accent));
  z-index: 1;
}

.campaign-drawer-resize-icon {
  width: 1rem;
  height: 0.75rem;
  color: hsl(var(--dashboard-accent));
}

/* Keep a single visible divider line: the drawer border-left */
.campaign-drawer-resize-handle::before { content: none; }

body.campaign-drawer-resizing {
  cursor: col-resize;
  user-select: none;
}

.campaign-drawer[aria-hidden="false"] .campaign-drawer-content {
  transform: translateX(0);
}

.campaign-drawer-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: hsl(var(--dashboard-bg));
  border-bottom: 1px solid hsl(var(--dashboard-border) / 0.3);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.campaign-drawer-header-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.campaign-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  color: hsl(var(--dashboard-text-muted));
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.campaign-drawer-close:hover {
  background: hsl(var(--dashboard-accent) / 0.1);
  color: hsl(var(--dashboard-accent));
}

.campaign-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Feedback custom selects: menus must not be clipped horizontally */
.hivex-widget-drawer-feedback .campaign-drawer-body {
  overflow-x: visible;
}

/* Feedback + accessibility: same slide-in drawer as campaigns; above floating FABs */
.hivex-widget-drawer.campaign-drawer {
  z-index: 10060;
}

.hivex-widget-drawer .campaign-drawer-content {
  min-height: 0;
}

/* Same drawer width for both FAB drawers (consistent chrome) */
.hivex-widget-drawer-feedback .campaign-drawer-content,
.hivex-widget-drawer-a11y .campaign-drawer-content {
  max-width: min(24rem, 100vw);
  width: min(24rem, 100vw);
}

/* Allow FAB drawers to expand beyond default when user resizes */
.hivex-widget-drawer .campaign-drawer-content.is-resized {
  max-width: min(90vw, 100vw);
  min-width: 18.75rem;
}

.hivex-widget-drawer-body {
  flex: 1;
  min-height: 0;
}

.hivex-widget-drawer-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid hsl(var(--dashboard-border) / 0.3);
  background: hsl(var(--dashboard-bg));
}

.hivex-widget-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.hivex-widget-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--dashboard-text-muted));
}

.hivex-widget-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 520px) {
  .hivex-widget-field-grid {
    grid-template-columns: 1fr;
  }
}

/* Send feedback: match Client Intel / workspace Manager General (.client-intel-editor-section) */
.hivex-feedback-drawer-body {
  gap: 0;
}

.hivex-feedback-drawer-body form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  min-height: 0;
}

.hivex-feedback-drawer-body .accessibility-section {
  gap: 1rem;
}

.hivex-feedback-drawer-body .accessibility-section-header {
  margin-bottom: 0;
}

.hivex-feedback-drawer-body .hivex-widget-field-grid {
  gap: 1rem;
}

.hivex-feedback-upload-field .text-xs-muted {
  display: block;
  margin-top: 0.5rem;
}

/* Submit: full width under Upload Image (no footer bar) */
.hivex-widget-drawer-feedback .hivex-feedback-submit-wrap {
  margin-top: 0.75rem;
}

.hivex-widget-drawer-feedback .hivex-feedback-upload-label.workspace-manager-dialog-logo-upload-btn {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.hivex-widget-drawer-feedback .hivex-feedback-submit-wrap .hivex-feedback-submit-btn {
  width: 100%;
  box-sizing: border-box;
  height: 2.5rem;
  justify-content: center;
}

/* Title + Details: single accent border on focus (match Client Intel) */
.hivex-widget-drawer-feedback .input.input-dashboard:focus-visible,
.hivex-widget-drawer-feedback .textarea.textarea-dashboard:focus-visible,
.hivex-widget-drawer-feedback .input.input-dashboard:focus,
.hivex-widget-drawer-feedback .textarea.textarea-dashboard:focus {
  outline: none;
  border-color: hsl(var(--dashboard-accent));
  box-shadow: none;
}

/* Type / Priority: same shell + list as Meta “All Ad Accounts” (dashboard-control-bar + account-selector-dropdown) */
.hivex-widget-drawer-feedback .hivex-feedback-select {
  position: relative;
  width: 100%;
}

/* Dashboard fallback opens any .account-selector-dropdown on :focus-within; disable unless .show (fixes “stuck open”) */
.hivex-widget-drawer-feedback .hivex-feedback-select .account-selector-wrapper:focus-within .account-selector-dropdown:not(.show) {
  display: none !important;
}

.hivex-widget-drawer-feedback .hivex-feedback-select-control-bar.dashboard-control-bar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-color: hsl(var(--dashboard-accent) / 0.35);
}

.hivex-widget-drawer-feedback .hivex-feedback-select-control-bar .dashboard-control-bar-inner {
  width: 100%;
}

.hivex-widget-drawer-feedback .hivex-feedback-select .account-selector-wrapper {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.hivex-widget-drawer-feedback .hivex-feedback-select .dashboard-control-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
}

.hivex-widget-drawer-feedback .hivex-feedback-select .dashboard-control-label {
  max-width: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.hivex-widget-drawer-feedback .hivex-feedback-select .account-selector-dropdown {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  border-color: hsl(var(--dashboard-accent) / 0.35);
}


/* ============================================
   Module: responsive.css
   ============================================ */

/* Responsive */

/* Campaign card toolbar: search + filters — scroll when wider than viewport */
@media (max-width: 1023px) {
  .meta-campaigns-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    min-width: 0;
    padding-bottom: 0.25rem;
  }

  .meta-campaigns-search {
    width: min(16rem, 85vw);
    min-width: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  /* Shell: full-width main column; fixed sidebar overlays when open */
  html:not(.sidebar-closed) .page-container,
  html:not(.sidebar-closed) .settings-page {
    margin-left: 0;
  }

  .sidebar {
    z-index: 100;
  }

  .page-container {
    padding: 1rem;
    padding-right: 1rem;
  }

  .settings-content {
    padding: 1rem;
    padding-right: 1rem;
  }

  .workspace-manager-content {
    padding: 1rem;
    padding-right: 1rem;
  }

  .campaign-drawer-content {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
  }

  .campaign-drawer-resize-handle {
    display: none;
  }

  .campaign-drawer-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .campaign-drawer-charts-grid {
    grid-template-columns: 1fr;
  }

  .campaign-drawer-demographics-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 480px) {
  .campaign-drawer-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Campaign tables (Meta 10-col): narrow = Name, Delivery, Spent, Results (+ hide Platform, Budget, metrics, Cost/result) */
@media (max-width: 639px) {
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) thead th:nth-child(3),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) thead th:nth-child(4),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) thead th:nth-child(6),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) thead th:nth-child(7),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) thead th:nth-child(8),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) thead th:nth-child(9),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) tbody td:nth-child(3),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) tbody td:nth-child(4),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) tbody td:nth-child(6),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) tbody td:nth-child(7),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) tbody td:nth-child(8),
  .meta-campaigns-card .meta-campaigns-table:not(.meta-audience-targeting-table):not(.tiktok-campaigns-table):not(.google-campaigns-table) tbody td:nth-child(9) {
    display: none;
  }

  /* Google Ads systemv 13-col: keep expand, rank, campaign, delivery, cost, conv., cost/conv. */
  .meta-campaigns-table.google-campaigns-table thead th:nth-child(5),
  .meta-campaigns-table.google-campaigns-table thead th:nth-child(6),
  .meta-campaigns-table.google-campaigns-table thead th:nth-child(8),
  .meta-campaigns-table.google-campaigns-table thead th:nth-child(9),
  .meta-campaigns-table.google-campaigns-table thead th:nth-child(10),
  .meta-campaigns-table.google-campaigns-table thead th:nth-child(11),
  .meta-campaigns-table.google-campaigns-table tbody td:nth-child(5),
  .meta-campaigns-table.google-campaigns-table tbody td:nth-child(6),
  .meta-campaigns-table.google-campaigns-table tbody td:nth-child(8),
  .meta-campaigns-table.google-campaigns-table tbody td:nth-child(9),
  .meta-campaigns-table.google-campaigns-table tbody td:nth-child(10),
  .meta-campaigns-table.google-campaigns-table tbody td:nth-child(11) {
    display: none;
  }

  /* TikTok campaigns: Campaign, Status, Spent, CPA */
  .meta-campaigns-table.tiktok-campaigns-table thead th:nth-child(2),
  .meta-campaigns-table.tiktok-campaigns-table thead th:nth-child(4),
  .meta-campaigns-table.tiktok-campaigns-table thead th:nth-child(6),
  .meta-campaigns-table.tiktok-campaigns-table thead th:nth-child(7),
  .meta-campaigns-table.tiktok-campaigns-table thead th:nth-child(8),
  .meta-campaigns-table.tiktok-campaigns-table tbody td:nth-child(2),
  .meta-campaigns-table.tiktok-campaigns-table tbody td:nth-child(4),
  .meta-campaigns-table.tiktok-campaigns-table tbody td:nth-child(6),
  .meta-campaigns-table.tiktok-campaigns-table tbody td:nth-child(7),
  .meta-campaigns-table.tiktok-campaigns-table tbody td:nth-child(8) {
    display: none;
  }

  /* Google overview: Top Keywords — Keyword, Clicks, CTR, Conv. */
  .meta-campaigns-table:has(#googleKeywordsTableBody) thead th:nth-child(2),
  .meta-campaigns-table:has(#googleKeywordsTableBody) thead th:nth-child(3),
  .meta-campaigns-table:has(#googleKeywordsTableBody) thead th:nth-child(6),
  .meta-campaigns-table:has(#googleKeywordsTableBody) thead th:nth-child(8),
  .meta-campaigns-table:has(#googleKeywordsTableBody) tbody td:nth-child(2),
  .meta-campaigns-table:has(#googleKeywordsTableBody) tbody td:nth-child(3),
  .meta-campaigns-table:has(#googleKeywordsTableBody) tbody td:nth-child(6),
  .meta-campaigns-table:has(#googleKeywordsTableBody) tbody td:nth-child(8) {
    display: none;
  }
}