/* Aria — Shared Design System
   Background: #F0EEE6 (Anthropic ivory)
   Dark cards: #1e1c1a
   Accent: terracotta #c4704b
   Icons: Phosphor Bold
   Fonts: Inter only (regular 400, medium 500, semibold 600, bold 700; italic 400+500)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* =========================================================================
   Aria color system — 8-core palette, shared across light and dark modes.
   Light mode (default): ivory canvas + dark palette for all dark surfaces.
   Dark mode (opt-in via [data-theme="dark"]): full dark palette takeover.
   ========================================================================= */
:root {
  /* === Core palette — atomic hex values === */
  --ivory:          #F0EEE6;   /* bg-1 in light, text on dark surfaces both modes */
  --warm-wash:      #E8E5DA;   /* bg-2 in light, hover/elevated state */
  --warm-off:       #C3C2B6;   /* text on #2C2C2B in dark mode */
  --bg-1:           #1D1D1D;   /* dark-mode page bg, light-mode dark button bg */
  --bg-2:           #2C2C2B;   /* dark-mode cards / content area */
  --bg-selected-dk: #121212;   /* dark-mode recessed (selected / form field / CTA) */
  --bg-selected-lt: #D6D3C9;   /* light-mode recessed — ALL form fields + ALL chips + selected states */
  --border-dk:      #474745;   /* dark-mode border/rim */
  --border-lt:      #DBD6CD;   /* light-mode border/rim — warm subtle, one shade off warm-wash */
  --accent:         #2A6CB8;   /* blue — italic emphasis, links, selected markers */
  --accent-hover:   #3a7bc5;

  /* === Semantic (minimal, user-specified) === */
  --destructive:    #dc2626;   /* pure red for delete / error */
  --success:        #2A6CB8;   /* same as accent — success and action share a color */
  --warning:        #1D1D1D;   /* warnings stay dark, not colored */

  /* === Light-mode active theme variables ===
     LAYOUT FLIP: sidebar/body = warm-wash (darker ivory), content = ivory (lighter).
     Mirrors dark mode's "content floats above canvas": one shade lift for the content
     island vs the surrounding canvas.
     --dark stays #1D1D1D so CTAs (.btn-primary, Create campaign, Apply, etc.) remain
     dark in light mode. Dark-card SURFACES (.wizard-card, .opp-card, .dark-card,
     .stat-card--dark, etc.) are individually overridden in the light-mode block
     below to flip to #D4DAE0 — buttons stay dark, surfaces don't. */
  --bg:             var(--warm-wash);     /* body / sidebar / canvas → #E8E5DA (darker ivory) */
  --card:           var(--ivory);         /* content area / cards → #F0EEE6 (lifted island) */
  --dark:           #2C2C2B;              /* CTA surface (.btn-primary) → #2C2C2B — locked */
  --border:         var(--border-lt);     /* #A8A298 — warm mid-gray, visible everywhere */
  --border-light:   var(--border-lt);
  --text:           #2C2C2B;                  /* body text — one of the 2 allowed light-mode colors */
  --text-mid:       #2C2C2B;                  /* LOCKED: same as --text (no gray hierarchy) */
  --text-light:     rgba(44, 44, 43, 0.55);   /* muted via opacity on #2C2C2B — no new hex */

  /* =========================================================================
     SEMANTIC SURFACE PATTERN (locked rule)
     --surface          = default canvas / element background
     --surface-hover    = state when user hovers over a surface element
     --surface-selected = state when a surface element is active / pressed / open
     Use these on: sidebar items, inbox rows, dropdown items, filter chips,
                   list rows, tab buttons, any row/item in a list.
     DON'T use on: button backgrounds, input backgrounds, cards. Those have
                   their own rules (--dark, --card, etc.).
     ========================================================================= */
  --surface:          var(--warm-wash); /* #E8E5DA — matches new body/sidebar canvas */
  --surface-hover:    var(--ivory);     /* #F0EEE6 — hover LIFTS to lighter ivory (content color) */
  --surface-selected: var(--bg-selected-lt); /* #D6D3C9 slate for pressed / open / active */

  /* Chip default background — locked to #D6D3C9 in light mode (same as form fields).
     No container flip in light mode: every chip, everywhere, is #D6D3C9. */
  --chip-bg:          var(--bg-selected-lt);

  /* === Backward-compat aliases — terracotta variables now point to blue. === */
  --terracotta:      var(--accent);
  --terracotta-bg:   var(--bg-selected-lt);
  --terracotta-dark: var(--accent-hover);

  /* Secondary decorative palette (unchanged) */
  --sage: #4a7a4a;
  --sage-bg: #d4e8d4;
  --olive: #8b8b6e;
  --olive-bg: #edeee3;
  --rust: #b5634b;
  --rust-bg: #f5e0d8;
  --dusty: #8b6e7d;
  --dusty-bg: #ede3ea;
  --slate: #6e7d8b;
  --slate-bg: #e3e8ed;
  --warm-gray: #a09890;
  --warm-gray-bg: #eae6e1;
  --card-alt: #D6D3C9;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 8px;

  /* Lock the browser UA color-scheme to LIGHT in default (light) mode.
     Prevents OS-level "dark mode" from bleeding through to form controls,
     buttons, and scrollbars. Dark mode re-declares this in its own block. */
  color-scheme: light;
}

/* =========================================================================
   Dark mode — manual toggle via [data-theme="dark"] on <html>.
   Flips the canvas variables, keeps the core 8 colors as-is.
   ========================================================================= */
:root[data-theme="dark"] {
  --bg:             var(--bg-1);            /* body / sidebar → #1D1D1D */
  --card:           var(--bg-2);            /* cards → #2C2C2B */
  --dark:           var(--bg-1);            /* "dark" button bg stays #1D1D1D (NO blue fill) */
  --border:         var(--border-dk);       /* borders → #474745 */
  --border-light:   var(--border-dk);
  --text:           var(--warm-off);        /* body text → #C3C2B6 */
  --text-mid:       rgba(195, 194, 182, 0.70);
  --text-light:     rgba(195, 194, 182, 0.50);
  --terracotta-bg:  var(--bg-selected-dk);  /* active/selected tint → recessed #121212 (NO blue tint) */

  /* Semantic surface pattern — dark mode values */
  --surface:          var(--bg-1);          /* #1D1D1D */
  --surface-hover:    var(--bg-2);          /* #2C2C2B — lifts on hover */
  --surface-selected: var(--bg-selected-dk);/* #121212 — recesses when pressed / open */

  /* Contrast flip default: chips sit on bg-2 (cards, dashboards) → recess to bg-1 */
  --chip-bg:          var(--bg-1);

  /* Dark mode uses the dark UA color-scheme — form controls, scrollbars, buttons flip */
  color-scheme: dark;
}

/* =========================================================================
   Contrast flip — containers that sit on bg-1 must explicitly flip their
   children's chip background to bg-2 so chips remain visible.
   Any new bg-1 container: add class="on-bg-1" OR add to this selector list.
   ========================================================================= */
:root[data-theme="dark"] .create-form,
:root[data-theme="dark"] .profile-form,
:root[data-theme="dark"] .dark-field,
:root[data-theme="dark"] .dark-card,
:root[data-theme="dark"] .on-bg-1 {
  --chip-bg: var(--bg-2);
}

/* =========================================================================
   Dark mode — strict rules from the user:
   1. No blue backgrounds anywhere. Every surface is bg-1 or bg-2 only.
   2. Three text colors only:
      - #C3C2B6 (warm-off) = body text, labels, descriptions, form fields
      - #F0EEE6 (ivory) = headings (h1-h6)
      - #2A6CB8 (accent) = italic emphasis (em.accent), inline links,
        active nav text, primary button text, unread dots
   3. Borders = #474745. No other border colors.
   4. Layout: sidebar = bg-1, content area = bg-2.
   ========================================================================= */
:root[data-theme="dark"] body {
  background: var(--bg-1);
  color: var(--warm-off);
}
:root[data-theme="dark"] .content {
  background: var(--bg-2);
  color: var(--warm-off);
}
:root[data-theme="dark"] .sidebar {
  background: var(--bg-1);
  color: var(--warm-off);
}
/* Top header: flips to a bg-1 wash with blur in dark mode (was ivory wash in light) */
:root[data-theme="dark"] header {
  background: rgba(29, 29, 29, 0.85) !important;
}

/* Headings in dark mode = ivory #F0EEE6, Inter Regular (400) — one typeface for all titles.
   No medium weight. em.accent inside a heading also drops to 400 so the whole title
   reads with a single weight. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--ivory) !important;
  font-weight: 400 !important;
}
:root[data-theme="dark"] h1 em.accent,
:root[data-theme="dark"] h2 em.accent,
:root[data-theme="dark"] h3 em.accent,
:root[data-theme="dark"] h4 em.accent,
:root[data-theme="dark"] h5 em.accent,
:root[data-theme="dark"] h6 em.accent,
:root[data-theme="dark"] h1 em,
:root[data-theme="dark"] h2 em,
:root[data-theme="dark"] h3 em,
:root[data-theme="dark"] h4 em,
:root[data-theme="dark"] h5 em,
:root[data-theme="dark"] h6 em {
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Body text everywhere = warm off-white #C3C2B6 (first/main text color) */
:root[data-theme="dark"] .content p,
:root[data-theme="dark"] .content label,
:root[data-theme="dark"] .content span:not(.accent),
:root[data-theme="dark"] .content li {
  color: var(--warm-off);
}

/* === Form elements in dark mode (LOCKED RULE) ===
   Background = #121212 (bg-selected-dk, darkest recessed surface).
   Text = #C3C2B6. No border by default — field sits flush on the surface.
   Focus: 1px #474745 border appears. Background stays #121212. No ring. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--bg-selected-dk) !important;   /* #121212 */
  color: var(--warm-off) !important;
  border: 1px solid transparent !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: rgba(195, 194, 182, 0.50) !important;
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
  background: var(--bg-selected-dk) !important;   /* stays #121212 */
  border: 1px solid var(--border-dk) !important;  /* #474745 border appears */
  outline: none;
  box-shadow: none !important;
}

/* === Buttons in dark mode (LOCKED RULE) ===
   Primary CTA = #121212 recessed surface + BLUE text.
   No border by default. On hover, the fill STAYS #121212 — only a 1px #474745
   border appears to signal interactivity. No lift, no tint change, just a rim. */
:root[data-theme="dark"] .btn-primary {
  background: var(--bg-selected-dk) !important;   /* #121212 — darkest surface */
  color: var(--accent) !important;                 /* blue text */
  border: 1px solid transparent !important;        /* no border at rest */
}
:root[data-theme="dark"] .btn-primary:hover {
  background: var(--bg-selected-dk) !important;   /* same #121212 fill, unchanged */
  color: var(--accent) !important;                 /* same blue text */
  border: 1px solid var(--border-dk) !important;  /* ADD border only */
}
/* Secondary/ghost buttons: transparent default; hover lifts to bg-2 wash */
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-ghost {
  background: transparent !important;
  color: var(--warm-off) !important;
  border-color: var(--border-dk) !important;
}
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-ghost:hover {
  background: var(--bg-2) !important;   /* lift to #2C2C2B */
  color: var(--ivory) !important;
}

/* Sidebar items use the SEMANTIC surface pattern — works in both modes.
   :hover → --surface-hover (lifts in dark, warms in light)
   .active → --surface-selected (recesses in dark, cool slate in light)
   The dark-mode override below only handles COLOR overrides since text/icon
   colors need to change for dark mode; backgrounds flow through the vars. */
:root[data-theme="dark"] .sidebar-item:hover {
  color: var(--warm-off) !important;
}
:root[data-theme="dark"] .sidebar-item.active {
  color: var(--warm-off) !important;
}
:root[data-theme="dark"] .sidebar-item.active i,
:root[data-theme="dark"] .sidebar-item.active .ph-bold {
  color: var(--accent) !important;
}

/* === Cards in dark mode === */
:root[data-theme="dark"] .card {
  background: var(--bg-2);
  border: 1px solid var(--border-dk);
}

/* === Creator card — dark theme (LOCKED IDENTITY EXCEPTION) ===
   Light mode: card background = creator's profile_color.bg (warm pastel).
   Dark mode: card background flips to #1D1D1D (bg-1). The creator name (h4)
   carries the pastel color. The chips INSIDE the card (niches, audience
   indicator) stay bright in the creator's color — they are "islands of
   brightness" that reinforce the creator's identity, not dark-theme surfaces.
   Hover: card border becomes the creator's color. */
:root[data-theme="dark"] .creator-card {
  background: var(--bg-1) !important;
  color: var(--warm-off) !important;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
:root[data-theme="dark"] .creator-card:hover {
  border-color: var(--creator-bg) !important;  /* hover rim uses the creator's identity color */
  transform: none !important;                    /* kill the lift — rim handles the hover signal */
  box-shadow: none !important;
}
:root[data-theme="dark"] .creator-card h4 {
  color: var(--creator-bg) !important;          /* name carries the profile color */
  font-weight: 400 !important;
}
:root[data-theme="dark"] .creator-card .creator-card-handle,
:root[data-theme="dark"] .creator-card .creator-card-metrics span {
  color: rgba(195, 194, 182, 0.70) !important;
  opacity: 1 !important;
}
/* Niche chips inside creator card: stay BRIGHT as the creator color.
   This is a documented identity exception — the dark contrast toolkit
   rules don't apply inside creator cards. The chips sit as warm pastel
   islands on the bg-1 canvas. */
:root[data-theme="dark"] .creator-card .creator-card-niches span {
  background: var(--creator-bg) !important;
  color: var(--creator-fg) !important;
  opacity: 1 !important;
  border: 1px solid transparent;
}
/* Audience indicator (diaspora / local / mixed) — same identity treatment.
   Inline-styled with rgba(255,255,255,0.45) in light mode; we override. */
:root[data-theme="dark"] .creator-card > div > span[title] {
  background: var(--creator-bg) !important;
  color: var(--creator-fg) !important;
}

/* =========================================================================
   Flatpickr calendar — dark theme overrides (LOCKED RULE)
   Uses the 7-token toolkit: 3 surfaces + 1 border + 3 text colors.
   Works anywhere flatpickr is loaded (brand-dashboard, campaign create,
   any future page). Selected day follows the universal "#121212 + blue rim"
   rule. Today marker uses a blue border on the default surface.
   ========================================================================= */

:root[data-theme="dark"] .flatpickr-calendar,
:root[data-theme="dark"] .flatpickr-calendar.light-picker,
:root[data-theme="dark"] .flatpickr-calendar.dark-picker {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-dk) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  color: var(--ivory) !important;
}

:root[data-theme="dark"] .flatpickr-months,
:root[data-theme="dark"] .light-picker .flatpickr-months,
:root[data-theme="dark"] .dark-picker .flatpickr-months {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border-dk) !important;
}

:root[data-theme="dark"] .flatpickr-current-month,
:root[data-theme="dark"] .flatpickr-current-month .cur-month,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .light-picker .flatpickr-current-month,
:root[data-theme="dark"] .light-picker .flatpickr-current-month .cur-month,
:root[data-theme="dark"] .light-picker .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .dark-picker .flatpickr-current-month,
:root[data-theme="dark"] .dark-picker .flatpickr-current-month .cur-month,
:root[data-theme="dark"] .dark-picker .flatpickr-current-month input.cur-year {
  color: var(--ivory) !important;
}

:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month,
:root[data-theme="dark"] .light-picker .flatpickr-months .flatpickr-prev-month,
:root[data-theme="dark"] .light-picker .flatpickr-months .flatpickr-next-month,
:root[data-theme="dark"] .dark-picker .flatpickr-months .flatpickr-prev-month,
:root[data-theme="dark"] .dark-picker .flatpickr-months .flatpickr-next-month {
  fill: var(--ivory) !important;
  color: var(--ivory) !important;
}
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
  fill: var(--ivory) !important;
}
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent) !important;
}

:root[data-theme="dark"] .flatpickr-weekdays,
:root[data-theme="dark"] .light-picker .flatpickr-weekdays,
:root[data-theme="dark"] .dark-picker .flatpickr-weekdays {
  background: transparent !important;
}
:root[data-theme="dark"] span.flatpickr-weekday,
:root[data-theme="dark"] .light-picker span.flatpickr-weekday,
:root[data-theme="dark"] .dark-picker span.flatpickr-weekday {
  color: var(--warm-off) !important;
  font-weight: 400 !important;
}

:root[data-theme="dark"] .flatpickr-day,
:root[data-theme="dark"] .light-picker .flatpickr-day,
:root[data-theme="dark"] .dark-picker .flatpickr-day {
  color: var(--warm-off) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

/* Hover: same fill + #474745 rim (chip pattern) */
:root[data-theme="dark"] .flatpickr-day:hover,
:root[data-theme="dark"] .light-picker .flatpickr-day:hover,
:root[data-theme="dark"] .dark-picker .flatpickr-day:hover {
  background: transparent !important;
  border-color: var(--border-dk) !important;
  color: var(--ivory) !important;
}

/* Today: fill unchanged, blue rim signals "today" */
:root[data-theme="dark"] .flatpickr-day.today,
:root[data-theme="dark"] .light-picker .flatpickr-day.today,
:root[data-theme="dark"] .dark-picker .flatpickr-day.today {
  background: transparent !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Selected: #121212 recessed fill + blue rim + blue text (universal selected rule) */
:root[data-theme="dark"] .flatpickr-day.selected,
:root[data-theme="dark"] .flatpickr-day.selected:hover,
:root[data-theme="dark"] .light-picker .flatpickr-day.selected,
:root[data-theme="dark"] .light-picker .flatpickr-day.selected:hover,
:root[data-theme="dark"] .dark-picker .flatpickr-day.selected,
:root[data-theme="dark"] .dark-picker .flatpickr-day.selected:hover {
  background: var(--bg-selected-dk) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Muted prev/next month days */
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay,
:root[data-theme="dark"] .light-picker .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .light-picker .flatpickr-day.nextMonthDay {
  color: rgba(195, 194, 182, 0.35) !important;
}

:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
  color: rgba(195, 194, 182, 0.25) !important;
}

/* Month dropdown */
:root[data-theme="dark"] .flatpickr-monthDropdown-months {
  background: var(--bg-1) !important;
  color: var(--ivory) !important;
}
:root[data-theme="dark"] .flatpickr-monthDropdown-months option,
:root[data-theme="dark"] .light-picker .flatpickr-monthDropdown-months option,
:root[data-theme="dark"] .dark-picker .flatpickr-monthDropdown-months option {
  background: var(--bg-1) !important;
  color: var(--ivory) !important;
}

/* === Chips in dark theme (LOCKED RULE) ===
   Default: background = var(--chip-bg) — flips based on parent container.
   Hover: same fill + #474745 rim. (Same pattern as CTA button.)
   Selected/active: #121212 fill + #2A6CB8 blue rim + blue text.
   The --chip-bg variable inherits from the nearest container; when a container
   sits on bg-1 (e.g. .create-form, .dark-field, .on-bg-1), it sets
   --chip-bg: var(--bg-2) so chips inside stay visible. */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .chip-btn,
:root[data-theme="dark"] .filter-chip,
:root[data-theme="dark"] .edit-chip,
:root[data-theme="dark"] .dark-chip,
:root[data-theme="dark"] .niche-chip,
:root[data-theme="dark"] .profile-chip,
:root[data-theme="dark"] .detail-chip,
:root[data-theme="dark"] .card-chip,
:root[data-theme="dark"] .card-badge,
:root[data-theme="dark"] .filter-more {
  background: var(--chip-bg) !important;
  border: 1px solid transparent !important;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
:root[data-theme="dark"] .chip:hover,
:root[data-theme="dark"] .chip-btn:hover,
:root[data-theme="dark"] .filter-chip:hover,
:root[data-theme="dark"] .edit-chip:hover,
:root[data-theme="dark"] .dark-chip:hover,
:root[data-theme="dark"] .niche-chip:hover,
:root[data-theme="dark"] .profile-chip:hover,
:root[data-theme="dark"] .detail-chip:hover,
:root[data-theme="dark"] .card-chip:hover,
:root[data-theme="dark"] .filter-more:hover {
  border-color: var(--border-dk) !important;   /* #474745 rim — fill and text unchanged */
}
:root[data-theme="dark"] .chip-btn.selected,
:root[data-theme="dark"] .filter-chip.active,
:root[data-theme="dark"] .edit-chip.selected,
:root[data-theme="dark"] .dark-chip.selected,
:root[data-theme="dark"] .filter-more.active {
  background: var(--bg-selected-dk) !important;  /* #121212 — all selected states */
  border-color: var(--accent) !important;        /* #2A6CB8 blue rim */
  color: var(--accent) !important;                /* blue text */
}

/* =========================================================================
   HARD RULE: ZERO blue backgrounds in dark mode.
   Every element that fills itself with var(--terracotta) / var(--accent) /
   rgba(42,108,184,*) gets overridden here. Text and icons can still be blue;
   fills cannot.
   ========================================================================= */

/* Progress bar / chart / checkbox fills → warm off-white (#C3C2B6) */
:root[data-theme="dark"] .budget-bar-fill,
:root[data-theme="dark"] .bar,
:root[data-theme="dark"] .score-bar-fill,
:root[data-theme="dark"] .progress-bar-fill {
  background: var(--warm-off) !important;
}

/* Toggle switches / checked checkboxes */
:root[data-theme="dark"] input[type="checkbox"]:checked,
:root[data-theme="dark"] #new-camp-negotiable:checked {
  background: var(--warm-off) !important;
  border-color: var(--warm-off) !important;
}
:root[data-theme="dark"] #new-camp-negotiable:checked::after {
  border-color: var(--bg-1) !important;   /* the checkmark glyph goes dark on the ivory fill */
}

/* Status / notification / boost pills (background becomes bg-2 with blue text + border) */
:root[data-theme="dark"] .boost-popular-pill,
:root[data-theme="dark"] .bottom-tab .tab-badge,
:root[data-theme="dark"] .tab-badge {
  background: var(--bg-2) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border-dk) !important;
}

/* Boost duration selected state (the 4% blue wash) */
:root[data-theme="dark"] .boost-duration-btn.selected {
  background: var(--bg-selected-dk) !important;
  border-color: var(--accent) !important;
}

/* Flatpickr: kill blue in all picker states */
:root[data-theme="dark"] .flatpickr-day.selected,
:root[data-theme="dark"] .light-picker .flatpickr-day.selected,
:root[data-theme="dark"] .dark-picker .flatpickr-day.selected {
  background: var(--warm-off) !important;
  color: var(--bg-1) !important;
}
:root[data-theme="dark"] .flatpickr-day.today,
:root[data-theme="dark"] .light-picker .flatpickr-day.today,
:root[data-theme="dark"] .dark-picker .flatpickr-day.today {
  background: var(--bg-selected-dk) !important;
  color: var(--warm-off) !important;
}

/* Audience split / chart segments that inline-style var(--terracotta):
   these use inline style attrs, so the CSS variable itself must flip.
   We introduce --chart-fill for use in HTML inline styles. */
:root { --chart-fill: var(--accent); }          /* light mode: blue bars */
:root[data-theme="dark"] { --chart-fill: var(--warm-off); }  /* dark mode: warm off-white bars */

/* =========================================================================
   Blue-wash overrides for inline background rgba fills.
   Only matches inline styles where the rgba appears in a `background:`
   declaration — won't affect blue text colors.
   ========================================================================= */
:root[data-theme="dark"] [style*="background:rgba(42, 108, 184"],
:root[data-theme="dark"] [style*="background: rgba(42, 108, 184"],
:root[data-theme="dark"] [style*="background:rgba(42,108,184"],
:root[data-theme="dark"] [style*="background: rgba(42,108,184"] {
  background: var(--bg-2) !important;
}

/* =========================================================================
   LIGHT THEME — MIRROR RULES (locked)
   Parallels the dark-theme contrast toolkit. Uses the 7 light tokens:
     bg-1            = #F0EEE6 ivory (canvas, sidebar)
     bg-2            = #E8E5DA warm wash (content area, hover, elevated)
     bg-selected-lt  = #D4DAE0 slate (form fields, active/pressed, flatpickr selected)
     border-lt       = #A8A298 warm mid-gray (focus/hover rims)
     text-1          = #1D1D1D (headings)
     text-2          = #2C2C2B (body)
     accent          = #2A6CB8 (italic emphasis, links, selected markers)
   ========================================================================= */

/* Layout: sidebar + body canvas are warm-wash (darker ivory); content area lifts to ivory.
   The content's rounded corners + right/bottom margin reveal the warm-wash behind,
   matching the floating-tray effect from dark mode. Mirror: dark mode lifts bg-1 → bg-2,
   light mode lifts warm-wash → ivory (same "content floats above canvas" pattern). */
:root:not([data-theme="dark"]) body {
  background: var(--warm-wash);
}
:root:not([data-theme="dark"]) .sidebar {
  background: var(--warm-wash);
}
:root:not([data-theme="dark"]) .content {
  background: var(--ivory);
}
/* Header blends with the warm-wash canvas (no translucent overlay, just the surface). */
:root:not([data-theme="dark"]) .header {
  background: var(--warm-wash);
}

/* Headings in light mode: text-1 (#1D1D1D), Inter Regular (400) — same typo rule as dark. */
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2,
:root:not([data-theme="dark"]) h3,
:root:not([data-theme="dark"]) h4,
:root:not([data-theme="dark"]) h5,
:root:not([data-theme="dark"]) h6 {
  color: #1D1D1D;
  font-weight: 400;
}
:root:not([data-theme="dark"]) em.accent,
:root:not([data-theme="dark"]) h1 em,
:root:not([data-theme="dark"]) h2 em,
:root:not([data-theme="dark"]) h3 em,
:root:not([data-theme="dark"]) h4 em,
:root:not([data-theme="dark"]) h5 em,
:root:not([data-theme="dark"]) h6 em {
  font-weight: 400;
  font-style: normal;
}

/* === Form elements in light mode (LOCKED — Apr 2026 flat flip) ===
   Fields are FLAT with the nav-bar canvas: bg = #E8E5DA warm-wash, same
   color as sidebar/body, one step LIGHTER than chips. Focus adds the
   #DBD6CD border rim and keeps the warm-wash fill (no fill change on focus).
   No box-shadow ring. Chips and selected states stay at #D6D3C9 (the
   --bg-selected-lt token is untouched by this rule).
   Why flat: Jonathan found the two-step recess (#D6D3C9 on ivory content)
   visually noisy. Flat warm-wash fields stay subtle on ivory content
   (~12 units darker — quiet but visible) and harmonize with the sidebar. */
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) select {
  background: #E8E5DA !important;
  color: #2C2C2B !important;
  border: 1px solid transparent !important;
}
:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder {
  color: rgba(44, 40, 37, 0.50) !important;
}
:root:not([data-theme="dark"]) input:focus,
:root:not([data-theme="dark"]) textarea:focus,
:root:not([data-theme="dark"]) select:focus {
  background: #E8E5DA !important;
  border: 1px solid var(--border-lt) !important;
  outline: none;
  box-shadow: none !important;
}

/* Messaging thread textarea — EXEMPT from the global form-field treatment.
   The composer bar (.aria-thread-input) already sets #2C2C2B on the container.
   The textarea must be TRANSPARENT so it inherits that exact color with no
   intermediate overlay breaking visual continuity. */
:root:not([data-theme="dark"]) .aria-thread-input textarea,
:root:not([data-theme="dark"]) .aria-thread textarea {
  background: transparent !important;
  color: #F0EEE6 !important;
  border: none !important;
}
:root:not([data-theme="dark"]) .aria-thread-input textarea:focus,
:root:not([data-theme="dark"]) .aria-thread textarea:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
:root:not([data-theme="dark"]) .aria-thread-input textarea::placeholder,
:root:not([data-theme="dark"]) .aria-thread textarea::placeholder {
  color: rgba(240, 238, 230, 0.5) !important;
}

/* === Chips in light mode (LOCKED RULE — mirrors dark) ===
   Default: fill from var(--chip-bg). Hover: same fill + #A8A298 rim.
   Selected: #D4DAE0 fill + blue rim + blue text. */
:root:not([data-theme="dark"]) .chip,
:root:not([data-theme="dark"]) .chip-btn,
:root:not([data-theme="dark"]) .filter-chip,
:root:not([data-theme="dark"]) .edit-chip,
:root:not([data-theme="dark"]) .dark-chip,
:root:not([data-theme="dark"]) .niche-chip,
:root:not([data-theme="dark"]) .profile-chip,
:root:not([data-theme="dark"]) .detail-chip,
:root:not([data-theme="dark"]) .card-chip,
:root:not([data-theme="dark"]) .card-badge,
:root:not([data-theme="dark"]) .filter-more {
  background: var(--chip-bg);
  border: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
:root:not([data-theme="dark"]) .chip:hover,
:root:not([data-theme="dark"]) .chip-btn:hover,
:root:not([data-theme="dark"]) .filter-chip:hover,
:root:not([data-theme="dark"]) .edit-chip:hover,
:root:not([data-theme="dark"]) .dark-chip:hover,
:root:not([data-theme="dark"]) .niche-chip:hover,
:root:not([data-theme="dark"]) .profile-chip:hover,
:root:not([data-theme="dark"]) .detail-chip:hover,
:root:not([data-theme="dark"]) .card-chip:hover,
:root:not([data-theme="dark"]) .filter-more:hover {
  border-color: var(--border-lt);  /* #A8A298 rim only, fill unchanged */
}
:root:not([data-theme="dark"]) .chip-btn.selected,
:root:not([data-theme="dark"]) .filter-chip.active,
:root:not([data-theme="dark"]) .edit-chip.selected,
:root:not([data-theme="dark"]) .dark-chip.selected,
:root:not([data-theme="dark"]) .filter-more.active {
  background: var(--bg-selected-lt) !important;   /* #D4DAE0 slate recess */
  border-color: var(--border-lt) !important;       /* #DBD6CD — light mode borders are ALWAYS one color */
  color: var(--accent) !important;                 /* blue text marks selected, not blue border */
}

/* Sidebar items in light mode — sidebar is warm-wash, items lift to ivory on hover,
   recess to slate (#D4DAE0) when active. Mirrors dark mode sidebar-item flow. */
:root:not([data-theme="dark"]) .sidebar-item:hover {
  background: var(--ivory);
}
:root:not([data-theme="dark"]) .sidebar-item.active {
  background: var(--bg-selected-lt);
  color: var(--accent);
}

/* === Flatpickr calendar — light theme (LOCKED RULE — mirrors dark) === */
:root:not([data-theme="dark"]) .flatpickr-calendar,
:root:not([data-theme="dark"]) .flatpickr-calendar.light-picker,
:root:not([data-theme="dark"]) .flatpickr-calendar.dark-picker {
  background: var(--warm-wash) !important;
  border: 1px solid var(--border-lt) !important;
  box-shadow: none !important;
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .flatpickr-months,
:root:not([data-theme="dark"]) .light-picker .flatpickr-months,
:root:not([data-theme="dark"]) .dark-picker .flatpickr-months {
  background: var(--ivory) !important;
  border-bottom: 1px solid var(--border-lt) !important;
}
:root:not([data-theme="dark"]) .flatpickr-current-month,
:root:not([data-theme="dark"]) .flatpickr-current-month .cur-month,
:root:not([data-theme="dark"]) .flatpickr-current-month input.cur-year,
:root:not([data-theme="dark"]) .light-picker .flatpickr-current-month,
:root:not([data-theme="dark"]) .light-picker .flatpickr-current-month .cur-month,
:root:not([data-theme="dark"]) .light-picker .flatpickr-current-month input.cur-year {
  color: #1D1D1D !important;
  font-weight: 400 !important;
}
:root:not([data-theme="dark"]) .flatpickr-months .flatpickr-prev-month svg,
:root:not([data-theme="dark"]) .flatpickr-months .flatpickr-next-month svg {
  fill: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .flatpickr-months .flatpickr-prev-month:hover svg,
:root:not([data-theme="dark"]) .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent) !important;
}
:root:not([data-theme="dark"]) span.flatpickr-weekday,
:root:not([data-theme="dark"]) .light-picker span.flatpickr-weekday {
  color: #2C2C2B !important;
  font-weight: 400 !important;
}
:root:not([data-theme="dark"]) .flatpickr-day,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day {
  color: #2C2C2B !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}
:root:not([data-theme="dark"]) .flatpickr-day:hover,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day:hover {
  background: transparent !important;
  border-color: var(--border-lt) !important;
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .flatpickr-day.today,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day.today {
  background: transparent !important;
  border-color: var(--border-lt) !important;  /* always #DBD6CD — one border color */
  color: var(--accent) !important;            /* blue text marks "today", not blue border */
}
:root:not([data-theme="dark"]) .flatpickr-day.selected,
:root:not([data-theme="dark"]) .flatpickr-day.selected:hover,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day.selected,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day.selected:hover {
  background: var(--bg-selected-lt) !important;  /* slate fill marks selected */
  border-color: var(--border-lt) !important;     /* always #DBD6CD */
  color: var(--accent) !important;                /* blue text marks selected */
}
:root:not([data-theme="dark"]) .flatpickr-day.prevMonthDay,
:root:not([data-theme="dark"]) .flatpickr-day.nextMonthDay,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day.prevMonthDay,
:root:not([data-theme="dark"]) .light-picker .flatpickr-day.nextMonthDay {
  color: rgba(44, 40, 37, 0.35) !important;
}

/* In light mode, chips are ALWAYS #D6D3C9 — no container flip, no contrast dance.
   All chips everywhere share the same fill as form fields. This is intentional:
   one recessed slate color for every recessed element in light mode. */

/* Kill box-shadows everywhere in light mode — no lift via shadow, only surface + border */
:root:not([data-theme="dark"]) .creator-card:hover,
:root:not([data-theme="dark"]) .card:hover,
:root:not([data-theme="dark"]) .btn:hover,
:root:not([data-theme="dark"]) .btn-primary:hover {
  box-shadow: none !important;
}

/* =========================================================================
   LIGHT THEME — NO BLACK ON SURFACES (but CTAs stay dark)
   The user-locked split: CTA BUTTONS (.btn-primary and any explicit "dark button"
   like Create campaign, Apply, Send, Get help) STAY DARK #1D1D1D in light mode.
   SURFACES / CARDS / CONTAINERS (.wizard-card, .opp-card, .browse-card,
   .stat-card--dark, etc.) FLIP to a light surface — no black backgrounds on
   cards, hero banners, modals, or form containers.
   --dark remains #1D1D1D in :root so buttons using var(--dark) stay dark.
   The rules below override ONLY the SURFACE classes that mis-used var(--dark)
   or hardcoded dark hexes for backgrounds.
   ========================================================================= */

/* Dark-card SURFACES flip to warm-wash in light mode (the "darker ivory" surface).
   No box-shadows. Text inside flips to #1D1D1D (heading) / #2C2C2B (body).
   NOTE: .auth-modal is NOT in this list — auth modals stay dark in light mode
   (brand-feel, CTA-like context) and are handled by a separate rule below. */
:root:not([data-theme="dark"]) .dark-card,
:root:not([data-theme="dark"]) .wizard-card,
:root:not([data-theme="dark"]) .claim-card,
:root:not([data-theme="dark"]) .apply-form,
:root:not([data-theme="dark"]) .apply-section,
:root:not([data-theme="dark"]) .campaign-hero,
:root:not([data-theme="dark"]) .contact-section,
:root:not([data-theme="dark"]) .opp-card,
:root:not([data-theme="dark"]) .browse-card,
:root:not([data-theme="dark"]) .campaign-row,
:root:not([data-theme="dark"]) .budget-card,
:root:not([data-theme="dark"]) .stat-card--dark,
:root:not([data-theme="dark"]) .detail-metric--dark {
  background: var(--warm-wash) !important;
  color: #1D1D1D !important;
  box-shadow: none !important;
}

/* Auth modal stays DARK in light mode — all text inside becomes ivory */
:root:not([data-theme="dark"]) .auth-modal,
:root:not([data-theme="dark"]) .auth-modal h1,
:root:not([data-theme="dark"]) .auth-modal h2,
:root:not([data-theme="dark"]) .auth-modal h3,
:root:not([data-theme="dark"]) .auth-modal h4,
:root:not([data-theme="dark"]) .auth-modal p,
:root:not([data-theme="dark"]) .auth-modal span,
:root:not([data-theme="dark"]) .auth-modal label,
:root:not([data-theme="dark"]) .auth-modal a,
:root:not([data-theme="dark"]) .auth-modal button {
  color: var(--ivory) !important;
}
:root:not([data-theme="dark"]) .auth-modal input,
:root:not([data-theme="dark"]) .auth-modal textarea {
  color: var(--ivory) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
:root:not([data-theme="dark"]) .auth-modal input::placeholder,
:root:not([data-theme="dark"]) .auth-modal textarea::placeholder {
  color: rgba(240, 238, 230, 0.55) !important;
}
/* Campaign row, budget card, stat-card--dark, detail-metric--dark children.
   All hardcoded #f0ebe4 / #fff / #ffffff / #7a746e text colors inside flipped
   surfaces get neutralized to the 2 allowed light-mode text colors:
   #1D1D1D (heading/value) or #2C2C2B (label/description). */
:root:not([data-theme="dark"]) .campaign-row h4,
:root:not([data-theme="dark"]) .campaign-row .metric .v,
:root:not([data-theme="dark"]) .campaign-row .metric .val,
:root:not([data-theme="dark"]) .budget-card-header h4,
:root:not([data-theme="dark"]) .budget-metrics .v,
:root:not([data-theme="dark"]) .budget-metrics .val,
:root:not([data-theme="dark"]) .stat-card--dark .val,
:root:not([data-theme="dark"]) .stat-card--dark .v,
:root:not([data-theme="dark"]) .detail-metric--dark .val,
:root:not([data-theme="dark"]) .detail-metric--dark .v {
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .campaign-row .row-meta,
:root:not([data-theme="dark"]) .campaign-row .metric .l,
:root:not([data-theme="dark"]) .budget-card-header span,
:root:not([data-theme="dark"]) .budget-metrics .lbl,
:root:not([data-theme="dark"]) .stat-card--dark .lbl,
:root:not([data-theme="dark"]) .stat-card--dark .l,
:root:not([data-theme="dark"]) .detail-metric--dark .lbl,
:root:not([data-theme="dark"]) .detail-metric--dark .l {
  color: #2C2C2B !important;
}
/* Campaign row icon — hardcoded #2C2C2B background, flip to ivory */
:root:not([data-theme="dark"]) .campaign-row .row-icon {
  background: var(--ivory) !important;
}
/* Budget card hover */
:root:not([data-theme="dark"]) .budget-card:hover {
  background: rgba(0,0,0,0.03) !important;
}

/* Text inside those flipped cards — headings use #1D1D1D, body uses #2C2C2B (two text colors total). */
:root:not([data-theme="dark"]) .wizard-card h1,
:root:not([data-theme="dark"]) .wizard-card h2,
:root:not([data-theme="dark"]) .wizard-card h3,
:root:not([data-theme="dark"]) .wizard-card h4,
:root:not([data-theme="dark"]) .claim-card h1,
:root:not([data-theme="dark"]) .claim-card h2,
:root:not([data-theme="dark"]) .claim-card h3,
:root:not([data-theme="dark"]) .auth-modal h1,
:root:not([data-theme="dark"]) .auth-modal h2,
:root:not([data-theme="dark"]) .auth-modal h3,
:root:not([data-theme="dark"]) .apply-form h3,
:root:not([data-theme="dark"]) .campaign-hero h1,
:root:not([data-theme="dark"]) .contact-section h3,
:root:not([data-theme="dark"]) .opp-card .opp-left h4,
:root:not([data-theme="dark"]) .browse-card h4 {
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .wizard-card p,
:root:not([data-theme="dark"]) .claim-card p,
:root:not([data-theme="dark"]) .auth-modal p,
:root:not([data-theme="dark"]) .apply-form p,
:root:not([data-theme="dark"]) .apply-form .apply-sub,
:root:not([data-theme="dark"]) .apply-form label,
:root:not([data-theme="dark"]) .campaign-hero p,
:root:not([data-theme="dark"]) .contact-section p,
:root:not([data-theme="dark"]) .opp-card .opp-left p,
:root:not([data-theme="dark"]) .browse-card-brand,
:root:not([data-theme="dark"]) .browse-card-brief {
  color: #2C2C2B !important;
}
/* Meta pills inside flipped cards — flip to ivory fill with #2C2C2B text */
:root:not([data-theme="dark"]) .browse-card-meta span {
  background: var(--ivory) !important;
  color: #2C2C2B !important;
}

/* Rate-card selects/inputs — flat warm-wash per the Apr 2026 field flip. */
:root:not([data-theme="dark"]) .rate-card-row .rc-select,
:root:not([data-theme="dark"]) .rate-card-row .rc-input {
  background: #E8E5DA !important;
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .rate-card-row .rc-select:hover {
  background: var(--ivory) !important;
}

/* Filter chip hardcoded #1D1D1D in brand-dashboard — chip must follow chip-bg token */
:root:not([data-theme="dark"]) .filter-chip {
  background: var(--chip-bg) !important;
  color: var(--text) !important;
}

/* =========================================================================
   KILL ALL WHITE FONTS IN LIGHT MODE
   User rule: "all fonts are only two colors" (#1D1D1D + #2C2C2B).
   Dark CTAs (.btn-primary and friends) use var(--ivory) = #F0EEE6 — this is
   the palette's "ivory" token, not literal white. Everything else flips to
   the 2 allowed text colors.
   ========================================================================= */

/* Dark CTA buttons — text is ivory (palette token), never pure white */
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .info-popover-close,
:root:not([data-theme="dark"]) .drawer-link,
:root:not([data-theme="dark"]) .sidebar-cta-btn,
:root:not([data-theme="dark"]) .accept-btn,
:root:not([data-theme="dark"]) .strategist-submit {
  color: var(--ivory) !important;
}
:root:not([data-theme="dark"]) #strategist-modal input,
:root:not([data-theme="dark"]) #strategist-modal textarea {
  background: transparent !important;
  border: 1px solid var(--border-lt) !important;
}

/* Inline dark buttons using style="background:#1D1D1D;color:#fff" — flip text to ivory */
:root:not([data-theme="dark"]) [style*="background:#1D1D1D"],
:root:not([data-theme="dark"]) [style*="background: #1D1D1D"],
:root:not([data-theme="dark"]) [style*="background:#1e1c1a"],
:root:not([data-theme="dark"]) [style*="background: #1e1c1a"],
:root:not([data-theme="dark"]) [style*="background:#121212"],
:root:not([data-theme="dark"]) [style*="background: #121212"] {
  color: var(--ivory) !important;
}
:root:not([data-theme="dark"]) [style*="background:#1D1D1D"] *,
:root:not([data-theme="dark"]) [style*="background: #1D1D1D"] *,
:root:not([data-theme="dark"]) [style*="background:#1e1c1a"] *,
:root:not([data-theme="dark"]) [style*="background: #1e1c1a"] *,
:root:not([data-theme="dark"]) [style*="background:#121212"] *,
:root:not([data-theme="dark"]) [style*="background: #121212"] * {
  color: var(--ivory) !important;
}

/* Any remaining class with hardcoded #fff/#f0ebe4 on a FLIPPED surface:
   force to the 2 light-mode text colors. */
:root:not([data-theme="dark"]) .info-popover,
:root:not([data-theme="dark"]) .info-popover p,
:root:not([data-theme="dark"]) .info-popover p strong,
:root:not([data-theme="dark"]) .info-popover-header h3,
:root:not([data-theme="dark"]) .apply-form input,
:root:not([data-theme="dark"]) .apply-form textarea,
:root:not([data-theme="dark"]) .apply-form label {
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .info-popover {
  background: var(--warm-wash) !important;
}
:root:not([data-theme="dark"]) .apply-form input,
:root:not([data-theme="dark"]) .apply-form textarea {
  background: #E8E5DA !important;
  border-color: transparent !important;
}

/* TOS banner — flip to warm-wash surface with #1D1D1D text, no white anywhere */
:root:not([data-theme="dark"]) .tos-banner {
  background: var(--warm-wash) !important;
  color: #1D1D1D !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-lt) !important;
}
:root:not([data-theme="dark"]) .tos-banner-title {
  color: #1D1D1D !important;
}
:root:not([data-theme="dark"]) .tos-banner-sub {
  color: #2C2C2B !important;
  opacity: 0.7;
}
:root:not([data-theme="dark"]) .tos-banner-cta {
  background: var(--bg-1) !important;
  color: var(--ivory) !important;
}
:root:not([data-theme="dark"]) .tos-banner-icon {
  color: #2C2C2B !important;
}

/* Small badges with colored backgrounds + hardcoded white text: force ivory */
:root:not([data-theme="dark"]) .tab-badge,
:root:not([data-theme="dark"]) .bottom-tab .tab-badge,
:root:not([data-theme="dark"]) .strategist-tier-badge,
:root:not([data-theme="dark"]) .boost-popular-pill {
  color: var(--ivory) !important;
}

/* Remaining leak-throughs: any element using color:white / color:#fff / color:#ffffff
   as inline attribute, that sits on a NON-dark background, gets caught via
   attribute selector and flipped. The dark-button attribute selectors above
   already handled buttons; this catches smaller elements. */
:root:not([data-theme="dark"]) [style*="color:#fff"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color: #fff"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#ffffff"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]),
:root:not([data-theme="dark"]) [style*="color:white"],
:root:not([data-theme="dark"]) [style*="color: white"] {
  color: var(--ivory) !important;
}

/* ===== Inline gray hex sweep =====
   Any element with an inline color:#XXXXXX from the legacy gray family
   (#6b6560, #7a746e, #8a847e, #9b9590, #C3C2B6, #c3c2b6, #4a506b, #4a4540)
   gets flipped to #2C2C2B in light mode — UNLESS it sits on a known dark
   background (where it becomes muted ivory instead).
   This is the safety net for JS-injected content. */
:root:not([data-theme="dark"]) [style*="color:#6b6560"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color: #6b6560"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#7a746e"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color: #7a746e"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#8a847e"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color: #8a847e"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#9b9590"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color: #9b9590"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#C3C2B6"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#c3c2b6"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#4a506b"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color:#4a4540"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]) {
  color: #2C2C2B !important;
}

/* Inline #f0ebe4 on light surfaces — flip to #1D1D1D (not a valid body color on light) */
:root:not([data-theme="dark"]) [style*="color:#f0ebe4"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]),
:root:not([data-theme="dark"]) [style*="color: #f0ebe4"]:not([style*="background:#1D1D1D"]):not([style*="background: #1D1D1D"]):not([style*="background:#1e1c1a"]):not([style*="background: #1e1c1a"]):not([style*="background:#121212"]):not([style*="background: #121212"]) {
  color: #1D1D1D !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); }
button, select, input, textarea { font-family: inherit; }

/* Typography polish: balance short text, prettify body, tabular numbers for dynamic values */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
.tabular, .stat-card .val, .score-val, [data-tabular] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Image outlines: subtle 1px border-inside for consistent depth on any background */
img.avatar, .avatar img { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }

/* Scale-on-press for buttons (tactile feedback) */
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active { scale: 0.96; }
.btn, .btn-primary, .btn-secondary, .btn-ghost { transition-property: background-color, color, border-color, scale, box-shadow; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }

/* Emphasis text: Inter Medium upright, inherits parent color — no italic, no tint */
em.accent { font-family: 'Inter', sans-serif; font-style: normal; color: inherit; font-weight: 500; }

/* Cards */
.card { background: var(--card); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.dark-card { background: var(--dark); color: var(--ivory); border-radius: 20px; box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06); }

/* Badges */
.badge { font-size: 10px; letter-spacing: 0.4px; font-weight: 600; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); display: inline-block; white-space: nowrap; }
.badge-sent, .badge-contacted { background: var(--sage-bg); color: var(--sage); }
.badge-pending { background: #fef3c7; color: #b5890a; }
.badge-draft, .badge-discovered { background: var(--warm-gray-bg); color: var(--warm-gray); }
.badge-responded { background: var(--dusty-bg); color: var(--dusty); }
.badge-booked { background: var(--slate-bg); color: var(--slate); }
.badge-followed_up { background: var(--olive-bg); color: var(--olive); }
.badge-delivered { background: var(--sage-bg); color: var(--sage); }
.badge-public { background: var(--sage-bg); color: var(--sage); }
.badge-closed { background: var(--warm-gray-bg); color: var(--warm-gray); }

/* Platform chips */
.chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0.3px; white-space: nowrap; }
.chip-youtube { background: var(--rust-bg); color: var(--rust); }
.chip-tiktok { background: #2c2825; color: #faf7f2; }
.chip-instagram { background: #f5dce8; color: #a34d78; }
.chip-facebook { background: var(--slate-bg); color: var(--slate); }

/* Niche chips */
.niche-chip { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warm-gray-bg); color: var(--text-mid); white-space: nowrap; }

/* Selectable chips */
.checkbox-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; transition-property: background-color, color, border-color, scale; transition-duration: 0.15s; user-select: none; background: var(--card); white-space: nowrap; }
.checkbox-item:hover { border-color: var(--terracotta); }
.checkbox-item.selected { background: var(--terracotta-bg); border-color: var(--terracotta); color: var(--terracotta); font-weight: 500; }

/* Avatar */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-placeholder { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; background: var(--warm-gray-bg); color: var(--text-mid); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; border: none; transition-property: background-color, color, border-color, scale, box-shadow; transition-duration: 0.15s; text-decoration: none; }
/* Default: buttons sit on the off-white page background → dark style */
.btn-primary { background: var(--dark, #1D1D1D); color: var(--ivory); }
.btn-primary:hover { background: #2a2825; }
/* Buttons inside dark surfaces stay terracotta */
.dark-form .btn-primary,
.drawer .btn-primary,
.stat-card--dark .btn-primary,
.detail-metric--dark .btn-primary,
.modal-dark .btn-primary,
[data-surface="dark"] .btn-primary,
.wizard-card .btn-primary,
.auth-modal .btn-primary,
.border-glow-card .btn-primary { background: var(--terracotta); color: var(--ivory); }
.dark-form .btn-primary:hover,
.drawer .btn-primary:hover,
.stat-card--dark .btn-primary:hover,
.detail-metric--dark .btn-primary:hover,
.modal-dark .btn-primary:hover,
[data-surface="dark"] .btn-primary:hover,
.wizard-card .btn-primary:hover,
.auth-modal .btn-primary:hover,
.border-glow-card .btn-primary:hover { background: var(--terracotta-dark); }
.btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-ghost { background-color: transparent; color: var(--text-mid); border: 1px solid var(--border); }
.btn-ghost:hover { background-color: #D6D3C9; }
.btn-large { padding: 14px 28px; font-size: 15px; font-weight: 600; border-radius: var(--radius); }
.btn-google { background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.btn-google:hover { background: var(--bg); }
.btn-google img { width: 18px; height: 18px; }

/* Inputs */
.input-select { background: var(--card); border: 1px solid var(--border); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 30px; white-space: nowrap; }
.form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: var(--card); transition: border-color 0.15s, box-shadow 0.15s; }
.form-input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-bg); }
.form-input::placeholder { color: var(--text-light); }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.form-group { margin-bottom: 16px; }

/* Score ring */
.score { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
.score-high { background: var(--sage-bg); color: var(--sage); }
.score-mid { background: var(--olive-bg); color: var(--olive); }
.score-low { background: var(--warm-gray-bg); color: var(--warm-gray); }

/* Phosphor icon sizing — Bold weight */
[class*="ph-bold"], [class*="ph-fill"] { font-size: 20px; line-height: 1; vertical-align: middle; }

/* Mobile: swap Phosphor weight to LIGHT across the board.
   We don't rewrite every `ph-bold` / `ph-fill` class in markup — instead we
   override the font-family for those classes on small screens. The Phosphor
   glyphs share Unicode code points across weights, so flipping `font-family`
   from `Phosphor-Bold` / `Phosphor-Fill` to `Phosphor-Light` renders every
   icon in the thin-outline weight without touching any HTML.
   Requires the light weight CSS to be loaded in each dashboard (added). */
@media (max-width: 768px) {
  [class*="ph-bold"],
  [class*="ph-fill"] {
    font-family: "Phosphor-Light" !important;
  }
}

/* Icon + text alignment */
.icon-text { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.icon-text [class*="ph-"] { font-size: 1.4em; flex-shrink: 0; }

/* Nav pills */
.nav-pill { font-size: 13px; color: var(--text-mid); text-decoration: none; padding: 8px 16px; border-radius: 50px; transition: background 0.15s, color 0.15s; }
.nav-pill:hover { background: #E8E5DA; color: var(--text); }

/* Custom dropdowns */
.dropdown { position: relative; display: inline-block; }
.dropdown-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; font-family: inherit; line-height: 1.4; white-space: nowrap; transition: border-color 0.15s, box-shadow 0.15s; }
.dropdown-trigger:hover { border-color: var(--warm-gray); }
.dropdown-trigger:focus, .dropdown-trigger.open { border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-bg); outline: none; }
.dropdown-trigger [class*="ph-"] { font-size: 14px; color: var(--text-light); transition: transform 0.2s; }
.dropdown-trigger.open [class*="ph-"] { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); z-index: 50; display: none; overflow: hidden; animation: dropIn 0.15s ease; }
.dropdown-menu-inner { max-height: 280px; overflow-y: auto; padding: 4px; }
.dropdown-menu.open { display: block; }
.dropdown-item { padding: 10px 14px; font-size: 13px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background 0.1s, color 0.1s; border-radius: 8px; margin: 1px 0; }
.dropdown-item:hover { background: var(--bg); }
.dropdown-item.selected { background: var(--terracotta-bg); color: var(--terracotta); font-weight: 500; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Toast */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.1); animation: toastIn 0.3s ease; display: flex; align-items: center; gap: 8px; transition: opacity 0.3s; }
.toast-success { background: var(--sage-bg); color: var(--sage); }
.toast-error { background: var(--rust-bg); color: var(--rust); }
.toast-info { background: var(--slate-bg); color: var(--slate); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: none; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--card); border-radius: var(--radius); width: 480px; max-width: calc(100% - 32px); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }

/* Table header */
.table-header { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); padding: 12px 16px; }

/* Sidebar */
.sidebar-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: none; background: none; font-size: 13px; font-weight: 400; color: var(--text-mid); cursor: pointer; text-align: left; font-family: inherit; transition: background 0.1s, color 0.1s; }
.sidebar-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }
.sidebar-item.active { background: var(--terracotta-bg); color: var(--terracotta); font-weight: 500; }
.sidebar-item [class*="ph-"] { font-size: 20px; flex-shrink: 0; width: 20px; text-align: center; }

/* Bar chart */
.bar { height: 18px; border-radius: var(--radius-pill); transition: width 0.5s ease; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

/* Smooth scroll */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }

/* ===== SKELETON LOADING ===== */
.skeleton { background: #D6D3C9; border-radius: 8px; position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-card { height: 200px; border-radius: 20px; background: #D6D3C9; }
.skeleton-row { height: 64px; border-radius: 16px; background: #D6D3C9; margin-bottom: 10px; }
.skeleton-text { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* ===== SECTION TRANSITIONS ===== */
.section-fade { animation: sectionIn 0.2s ease; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== EMPTY STATES ===== */
.empty-state { text-align: center; padding: 60px 24px; }
.empty-state-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 26px; }
.empty-state h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: var(--text-light); line-height: 1.5; max-width: 320px; margin: 0 auto 16px; }

/* ===== GLOBAL SEARCH MODAL (Cmd+K) ===== */
.search-overlay { position: fixed; inset: 0; background: rgba(20,18,16,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 250; display: none; align-items: flex-start; justify-content: center; padding-top: 15vh; }
.search-overlay.open { display: flex; }
.search-modal { background: #F0EEE6; border-radius: 18px; width: 560px; max-width: calc(100% - 32px); box-shadow: 0 24px 80px rgba(0,0,0,0.3); overflow: hidden; animation: searchModalIn 0.2s ease; }
@keyframes searchModalIn { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.search-input-wrap { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.search-input-wrap input { flex: 1; border: none; background: none; font-size: 16px; font-family: inherit; color: var(--text); outline: none; }
.search-input-wrap input::placeholder { color: var(--text-light); }
.search-kbd { padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06); font-size: 11px; color: var(--text-light); font-family: inherit; }
.search-results { max-height: 400px; overflow-y: auto; }
.search-result { display: flex; align-items: center; gap: 12px; padding: 12px 24px; cursor: pointer; transition: background 0.1s; text-decoration: none; color: inherit; }
.search-result:hover { background: rgba(0,0,0,0.04); }
.search-result-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.search-result-text h4 { font-size: 14px; font-weight: 500; }
.search-result-text p { font-size: 12px; color: var(--text-light); }
.search-section-label { padding: 10px 24px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); }

/* ===== MOBILE DRAWER ===== */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-mid); }
.mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; display: none; }
.mobile-drawer-overlay.open { display: block; }
.mobile-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; background: var(--bg); z-index: 151; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.25,1,0.5,1); box-shadow: 4px 0 24px rgba(0,0,0,0.1); overflow-y: auto; padding: 20px 0; }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-header { padding: 0 16px 16px; display: flex; align-items: center; justify-content: space-between; }
.mobile-drawer-close { background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-mid); font-size: 20px; }

@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; }
}

/* ===== LOCALE TOGGLE ===== */
.locale-toggle {
  display: inline-flex; align-items: center;
  background: var(--card-alt); border-radius: 8px;
  padding: 3px;
}
.locale-btn {
  padding: 5px 12px; border: none; background: none;
  font-size: 11px; font-weight: 600; color: var(--text-light);
  cursor: pointer; font-family: inherit;
  border-radius: 8px; letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s;
}
.locale-btn:hover { color: var(--text-mid); }
.locale-btn.active { background: var(--card); color: var(--terracotta); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* On dark headers (landing page hero, dark cards) */
.locale-toggle.locale-toggle-dark { background: rgba(255,255,255,0.08); }
.locale-toggle.locale-toggle-dark .locale-btn { color: #8a847e; }
.locale-toggle.locale-toggle-dark .locale-btn:hover { color: #c8c2ba; }
.locale-toggle.locale-toggle-dark .locale-btn.active { background: rgba(255,255,255,0.12); color: var(--terracotta); }

/* Responsive */
@media (max-width: 768px) {
  .btn-large { padding: 12px 20px; font-size: 14px; }
  .modal { width: calc(100% - 32px); }
}