/* ============================================================================
   Boost Boss — Dashboard Polish Layer
   Link AFTER public/dashboard-shell.css on every dashboard. Override-only.
   ----------------------------------------------------------------------------
   PRINCIPLES
   · Polish, never redesign. This file changes ONLY visual properties
     (color, shadow, radius, type, blur, transitions). It never alters
     layout flow, hit targets, hrefs, or anything the SPA's JS depends on.
   · Continuity with the new marketing system: Space Grotesk display,
     Inter body, the refined pink CTA, and a faint aurora-mesh ambient.
   · Work WITH the shell's JS, not against it — the .is-active toggle,
     the data-shell-sidebar="collapsed" width/opacity transitions, and the
     hashchange routing are all preserved. We add effects, never remove
     the shell's own transitions.
   · Selectors match the existing rendered DOM only. No invented classes.
   · BB tokens referenced as var(--bb-*, #hex) so the file is self-sufficient
     even if the design-system token sheet isn't linked on a given page.

   SECTIONS
   [0] Token bridge      — remap --shell-* design tokens to the BB system
   [1] Sidebar chrome    — ambient aurora, brand type, active bar, hover, user pill
   [2] Top chrome        — glass backdrop
   (card / button / table / modal / form passes land in later sections)
   ========================================================================== */

/* ── [0] TOKEN BRIDGE ───────────────────────────────────────────────────────
   Same hex in most cases — this just routes the shell through the BB system so
   later passes inherit one source of truth. Values that intentionally shift are
   noted. Shadows/cards are deliberately left for the card pass.            */
:root {
  --shell-brand-pink:        var(--bb-pink, #FF2D78);
  --shell-brand-pink-dark:   var(--bb-pink-dark, #E01E65);
  --shell-brand-cyan:        var(--bb-cyan-link, #04BEFE);
  --shell-ink:               var(--bb-ink, #111111);   /* #1E1E2E → #111111, deeper */
  --shell-font-sans:         var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  --shell-font-display:      var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
  --shell-sidebar-border:    rgba(255,255,255,0.06);   /* refined from #1F2030 */

  /* polish-local vars (scoped names, won't collide with --shell-*) */
  --polish-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── [1] SIDEBAR CHROME ─────────────────────────────────────────────────── */

/* Ambient aurora — a very low-opacity pink+cyan mesh over the dark sidebar,
   echoing the marketing hero. Layered ABOVE the base bg so the bg token still
   shows through; fixed attachment keeps it calm while the nav scrolls. */
.shell-sidebar {
  background-image:
    radial-gradient(120% 42% at 0% 0%,   rgba(255, 45, 120, 0.10), transparent 60%),
    radial-gradient(120% 38% at 100% 100%, rgba(4, 190, 254, 0.07), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: local;
  border-right: 1px solid var(--shell-sidebar-border);
}

/* Brand block — tighten the wordmark with the display face. */
.shell-sidebar__product {
  font-family: var(--shell-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.shell-sidebar__product .accent { color: var(--bb-pink, #FF2D78); }
.shell-sidebar__product .powered-by {
  font-family: var(--shell-font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.shell-sidebar__product .powered-by em {
  color: var(--bb-violet, #9D7AFF);
  font-style: normal;
  font-weight: 600;
}

/* Section labels — quieter, wider tracking. */
.shell-nav-section-label {
  font-family: var(--shell-font-sans);
  letter-spacing: 0.10em;
  color: var(--shell-sidebar-text-muted, #7C7E89);
}

/* Nav rows — smoother hover, no layout change. (Adds a background/color
   transition only; the shell's own label-opacity transition is untouched.) */
.shell-nav-item {
  transition: background-color 0.16s var(--polish-ease),
              color 0.16s var(--polish-ease);
}
.shell-nav-item:hover {
  background: rgba(255, 255, 255, 0.045);
}
.shell-nav-item__label {
  font-family: var(--shell-font-sans);
  letter-spacing: -0.005em;
}

/* Active row — keep the signature pink edge bar, refine to a soft gradient
   with a faint glow and slightly crisper width. */
.shell-nav-item.is-active {
  background: rgba(255, 45, 120, 0.10);
  color: var(--shell-sidebar-text-active, #fff);
}
.shell-nav-item.is-active::before {
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #FF2D78 0%, #E01E65 100%);
  box-shadow: 0 0 12px rgba(255, 45, 120, 0.55);
}
.shell-nav-item.is-active .shell-nav-item__icon { color: var(--bb-pink, #FF2D78); }

/* Bottom user pill — give it a contained card treatment. */
.shell-sidebar__user {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--shell-radius-lg, 12px);
  transition: background-color 0.16s var(--polish-ease),
              border-color 0.16s var(--polish-ease);
}
.shell-sidebar__user:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.shell-sidebar__user-text { font-family: var(--shell-font-sans); }

/* Collapse toggle — gentler resting state, pink on hover. */
.shell-collapse-btn {
  transition: background-color 0.16s var(--polish-ease), color 0.16s var(--polish-ease);
}
.shell-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--bb-pink, #FF2D78);
}

/* ── [2] TOP CHROME ─────────────────────────────────────────────────────── */

/* Kill browser autofill's white/yellow field background across the console. */
.shell-main input:-webkit-autofill,
.shell-main input:-webkit-autofill:hover,
.shell-main input:-webkit-autofill:focus,
.shell-main input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1E2024 inset !important;
  -webkit-text-fill-color: #F0F0F8 !important;
  caret-color: #F0F0F8;
  transition: background-color 9999s ease-in-out 0s;
}

/* Dark top bar — X-style. Opaque so scrolled content never bleeds through. */
.shell-topbar {
  background: #0D0D16;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Search bar */
.shell-topbar__search {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(231,233,234,0.55);
}
.shell-topbar__search:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.shell-topbar__search kbd {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(231,233,234,0.40);
}

/* Icon buttons */
.shell-icon-btn {
  color: rgba(231,233,234,0.55);
}
.shell-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: transparent;
  color: #E7E9EA;
}

/* Breadcrumb text */
.shell-topbar__breadcrumb {
  color: #E7E9EA;
}

/* ── [3] CARDS ──────────────────────────────────────────────────────────────
   Refines surface only: shadow, radius, border, hover smoothness.
   NEVER touches the .stat-card::before accent bars (the 4-variant semantic
   color system) or any card's background/padding/layout.

   Two target groups:
   A) .stat-card        — class-based, base CSS is specificity 010, ours is
                          010 and loads later, so plain overrides win. No !important.
   B) inline-styled panels — border/radius are inline (1000), so the three
                          surface props need !important to override. Add new
                          panel IDs to the --polish-card-list selector below;
                          do NOT add !important to anything else.            */

/* ---- polish shadow tokens (scoped names) ---- */
:root {
  --polish-card-shadow:
    0 1px 2px rgba(15, 15, 26, 0.04),
    0 8px 24px rgba(15, 15, 26, 0.05);
  --polish-card-shadow-hover:
    0 2px 4px rgba(15, 15, 26, 0.05),
    0 14px 32px rgba(255, 45, 120, 0.10);
  --polish-card-radius: 16px;   /* gentle bump from 14 */
}

/* ── [3A] KPI STAT CARDS (class-based) ── */
.stat-card {
  border-color: var(--bb-line, #EAEAEF);
  border-radius: var(--polish-card-radius);
  box-shadow: var(--polish-card-shadow);
  transition: transform 0.22s var(--polish-ease),
              box-shadow 0.22s var(--polish-ease),
              border-color 0.22s var(--polish-ease);
}
/* keep the deliberate lift — just smoother easing + refined shadow color */
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-card-shadow-hover);
  border-color: rgba(255, 45, 120, 0.35);
}
/* DO NOT style .stat-card::before — the 4 accent gradients stay exactly as-is */

/* slight type refinement inside the tile (no structure change) */
.stat-card .stat-label {
  letter-spacing: 0.01em;
  color: var(--bb-muted, #6B7280);
}
.stat-card .stat-value {
  font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
  letter-spacing: -0.02em;
}

/* ── [3B] INLINE-STYLED CONTENT PANELS (target by ID) ──
   Add each white inline-styled panel's ID to this list as we go.
   The three surface props use !important ONLY to beat the inline border/radius. */

/* shared help-text hint pattern ("Click a row to open…") — consistent quiet style */

/* ── [4] BUTTONS ────────────────────────────────────────────────────────────
   Override-only. PROTECTS every hit area: no padding, height, font-size, or
   line-height is touched on any variant. We refine color, gradient, shadow,
   hover/active, and add focus-visible rings (none existed before).

   All 5 button classes are independent (no .btn base) and specificity 010;
   this file loads later so plain overrides win. Inline-styled buttons
   (Settings/wizard pixel callouts, detail panel) are deferred to a [4B]
   ID list as we sweep them.

   FIXES baked in:
   · .new-campaign-btn hover shadow was rgba(249,115,22) ORANGE → now pink
   · .action-btn hover was solid ORANGE (read as destructive) → soft pink tint
   · primary CTA solid #FF2D78 → real pink→pink-dark gradient (marketing parity)
   · added :focus-visible pink ring to all variants (a11y)                    */

/* shared focus ring — applies to every button variant */
.action-btn:focus-visible,
.launch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.40);
}

/* ── [4A] PRIMARY CTA (.new-campaign-btn) ──
   Gradient + pink glow apply ONLY to true primaries. The inline "Cancel"
   variant (style="background:#fff;…") is excluded so it keeps its ghost look. */
/* the inline-white "Cancel" variant: give it a calm ghost hover */

/* ── [4A] ROW ACTION BUTTONS (.action-btn) ──
   Hit area (6px 12px) untouched. Hover goes soft-pink instead of orange. */
.action-btn {
  transition: background-color 0.18s ease, color 0.18s ease;
}
.action-btn:hover {
  background-color: rgba(255, 45, 120, 0.12);   /* was solid #F59E0B orange */
  color: #E01E65;
}

   Already the cleanest pattern — just gradient parity + smoother glow. */



/* ── [4A] LEGACY .launch-btn — refine, don't break (may be off-screen) ── */
.launch-btn {
  transition: filter 0.15s ease, box-shadow 0.18s ease;
}
.launch-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 6px 16px rgba(255, 45, 120, 0.28);
}

/* ── [5] FORMS ───────────────────────────────────────────────────────────────
   Override-only. Touches color / focus-ring / hover-border / radius parity.
   PROTECTED: padding, font-size, accent-color (native checks stay #FF2D78),
   the .ncw-* :has(input:checked) pink-tint, and the toggle knob's JS-driven
   left/transition/size. Two pre-existing bugs fixed here (see [5a]).
   ------------------------------------------------------------------------- */

/* [5a] BUGFIX — legacy .form-textarea / .form-select used an ORANGE focus
   border + glow (palette leak) and a different bg (#FAFAF7) than .form-input
   (#FFFFFF). Repaint focus to pink and unify the field bg to white. */
.form-textarea,
.form-select {
  background-color: var(--bg-surface, #FFFFFF);
}
.form-textarea:focus,
.form-select:focus {
  border-color: var(--bb-pink, #FF2D78);
  box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.12);
}

/* [5b] Hover affordance on the legacy controls — border only, no box change. */
.form-input:hover:not(:focus),
.form-textarea:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: #D1D5DB;
}

/* [5c] Universal keyboard focus ring for inline-styled inputs that have no
   class hook (Settings fields, product modal, Creatives library). This file
   only loads on dashboards, so bare element selectors are safe. Excludes the
   already-styled .form-*/.ncw-* controls (they own their :focus) and native
   checks/radios (they use accent-color). border-color is !important because
   these inputs carry an inline border that would otherwise win. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.form-input):focus-visible,
textarea:not(.form-textarea):focus-visible,
select:not(.form-select):focus-visible {
  outline: none;
  border-color: var(--bb-pink, #FF2D78) !important;
  box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.18);
}


/* [5e] TOGGLE (#settingsNotify) — the track is the first <span> after the
   native input; the knob (#settingsToggleKnob) is the second span and is
   JS-positioned. Color the track pink when checked (overrides the hardcoded
   inline #D1D5DB) and add a perceived focus ring. We NEVER touch the knob. */
#settingsNotify:checked + span {
  background: var(--bb-pink, #FF2D78) !important;
}
#settingsNotify:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.25);
}

/* [5f] Conversion-tracking snippet — keep the dark "code / read-only" surface;
   just bring its Copy button up to the ghost-hover language from the Buttons
   pass. Color only; position/size stay inline. */
#aSetPixelCopy {
  transition: background 0.15s ease, color 0.15s ease;
}
#aSetPixelCopy:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

/* ── [6] TABS ────────────────────────────────────────────────────────────────
   Three systems, all inline-styled. We refine active color/underline, add the
   missing hover + focus-visible affordances, and give the wizard dots a glow —
   without touching padding, font-size, the -1px overlap, or the JS-owned dot
   background. Where JS writes inline (pilot tabs, dots) we use !important or
   box-shadow (a property the JS never sets) so we never fight the script.
   --------------------------------------------------------------------------- */

/* [6A] Product-modal tabs (.pf-tab) — class-based active, easiest to refine.
   The existing .pf-tab-active rule already wins with !important; we extend it
   with a soft pink underglow and smooth the color/border transition.        */
.pf-tab {
  transition: color 0.16s var(--polish-ease),
              border-bottom-color 0.16s var(--polish-ease);
}
.pf-tab.pf-tab-active {
  color: var(--bb-pink, #FF2D78) !important;
  border-bottom-color: var(--bb-pink, #FF2D78) !important;
  /* faint glow cast just below the 2px underline — box-shadow doesn't disturb
     the margin-bottom:-1px overlap or add any layout box */
  box-shadow: 0 6px 12px -9px rgba(255, 45, 120, 0.55);
}
.pf-tab:hover:not(.pf-tab-active) {
  color: #374151;   /* matches the existing hover token */
}

/* [6B] Boost Ads sub-tabs (.pilot-tab) — JS double-writes inline color +
   borderBottomColor, so active styling needs !important to win. We also add
   the hover state it was missing (with !important to beat the inline gray)
   and a transition so the JS color flip animates instead of snapping.       */
/* hover affordance on inactive tabs — !important to override the inline #6B7280;
   :not(.pilot-tab-active) keeps the active tab pink on hover */

/* [6C] Shared tab a11y — focus-visible ring on every tab. outline+offset adds
   no layout box and won't shift the -1px overlap. Keyboard-only (focus-visible
   excludes mouse clicks) so it never flashes on pointer use.                 */
.pf-tab:focus-visible{
  outline: 2px solid var(--bb-pink, #FF2D78);
  outline-offset: 2px;
  border-radius: 5px;
}

/* [6D] Wizard progress dots (.ncw-dot) — JS owns background (done/active both
   #FF2D78, upcoming #E5E7EB). We never touch background; we add a soft pink
   halo to whichever dots are pink, via an attribute-substring match on the
   inline style the JS writes. box-shadow is untouched by the JS, so no fight.
   NOTE: depends on the JS writing the exact hex "#FF2D78". If the JS ever
   switches to rgb() or a CSS token, the halo silently no-ops (dot still
   works); revisit this selector then. */
/* upcoming (gray) dots stay flat — explicit reset in case a dot flips back */

/* ── [7] TABLES ──────────────────────────────────────────────────────────────
   Two flavors: one class table (.campaigns-table) + ~5 inline tables. This pass
   is mostly bug-fix + missing-affordance: kill the orange hover, add pink row
   hover to the clickable inline tables, smooth the transitions. It touches
   ONLY hover background + cursor + transition. No widths, no row heights, no
   table-layout, no tabular-nums, no thead bg, no A/B header colors.          */

/* [7A] campaigns-table — THE fix: hover tint was orange on a pink product.
   !important so it wins even if the page's inline <style> loads after this
   sheet. Only the hover *color* changes; the 0.15s transition already exists
   and the 64px row height / fixed widths are never referenced here.          */

/* [7B] Inline clickable table — Pilot "Active boosts" picker. Rows route to a
   boost on click but had no hover affordance. The <tr> carries no inline
   background, so a stylesheet rule paints cleanly; JS-owned *selection* writes
   an inline background that (correctly) outranks this hover, so selected rows
   keep their marker. cursor:pointer signals the rows are clickable.          */

/* [7C] Inline read-back tables — Settings billing + Compare results. Not
   clickable, so a *quiet* neutral hover for row-tracking only (no cursor
   change, no pink — pink would imply interactivity these rows don't have).
   Compare A/B pink+blue header colors live inline and are never touched.     */
#aSetBillingTableBody tr,
#compareTableBody tr {
  transition: background-color 0.15s var(--polish-ease);
}
#aSetBillingTableBody tr:hover,
#compareTableBody tr:hover {
  background-color: rgba(15, 15, 26, 0.025);
}

/* [7D] Empty-state polish — the .empty-state class table only. Inline empty
   <td> rows keep their inline #9CA3AF (inline wins; consistent already).
   This just warms the class-based empty state to match and centers calmly.   */
.empty-state {
  color: var(--bb-ink-50, #9CA3AF);
}

/* ── [8] MODALS ──────────────────────────────────────────────────────────────
   Two systems: .modal class (3 modals) + 4 inline-styled modals. Bug-fix +
   consistency: kill the orange close-X hover, unify the inline backdrops to one
   shade with blur, add hover to the gray-square closes. Touches ONLY close-btn
   color/bg + overlay background/blur. Never the sticky header, the flex-start
   /padding-top anti-fat-band geometry, content max-height, or the JS display
   toggle. Inline-styled props need !important to win (inline applies in every
   state, including :hover); class props ride normal cascade order.            */

/* [8A] THE fix — Pattern-A bare-X close hover was orange on a pink product.
   Pink ties it back to brand, consistent with every other orange→pink
   correction in this sheet. Covers the class close + the inline convert close.
   !important guarantees the win over the inline color on #convertModalClose.  */
.modal-close:hover {
  color: var(--bb-pink, #FF2D78) !important;
}

/* [8B] Pattern-B gray-square closes (compare + settings) — keep the distinct
   "quick-read modal" treatment, just add the missing hover. Inline bg #F3F4F6
   → a touch darker. !important to beat the inline background; transition rides
   free (no inline transition to fight).                                       */
#settingsCloseBtn,
#compareModal button[style*="F3F4F6"] {
  transition: background-color 0.16s var(--polish-ease),
              color 0.16s var(--polish-ease);
}
#settingsCloseBtn:hover,
#compareModal button[style*="F3F4F6"]:hover {
  background: #E5E7EB !important;
  color: #111827 !important;
}

/* [8C] Inline backdrop unification — the 4 inline modals ran .5 / .55 / .4 / .4
   with blur on only two. Unify to one calm shade + blur(4) so they feel like
   one system. The .modal CLASS stays at its heavier .7 (dense forms, longer
   dwell) — intentionally NOT touched here. !important overrides the inline
   background/filter on each overlay root.                                     */
#depositModal,
#compareModal,
#settingsModal {
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── [9] STATUS PILLS ─────────────────────────────────────────────────────────
   Two parallel systems. The JS-built inline map (pilot picker + audit) is the
   RIGHT language: pastel-50 bg, dark-900 fg, 999px, 11px/700, +.02em, no
   capitalize, in_review = BLUE. This pass migrates the CLASS system (.badge.*,
   used in the campaigns table + detail header) onto that exact palette so the
   two read as one. The .review → blue swap is the last orange-on-pink fix in
   the product. Pure class overrides (cascade order); !important only on the
   .review bug pair. The JS map, the CREDIT gradient pill, and the APPROVED
   audit pills are already in-language — untouched. Pill geometry stays well
   under the protected 64px campaigns-table row.                               */

/* [9A] Base shape + typography → match the JS-built pill.
   20px→999px, .8rem→11px, 600→700, +.02em, capitalize→none, padding to a
   table-comfortable 4px/10px (JS uses 3px/9px; the extra px keeps the in-cell
   pill tappable without changing row height).                                 */
.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* [9B] Color variants → JS-built pastel-50 / dark-900 pairs. Explicit hex
   (not the saturated var(--success)/--warning tints) so the class system and
   the JS map are byte-identical. The tokens themselves are left alone for
   their other uses.                                                           */
.badge.live {
  background: #ECFDF5;
  color: #065F46;
}
.badge.paused {
  background: #FFFBEB;
  color: #92400E;
}

/* [9C] THE last-orange fix — .review was orange-tint/orange-fg; → blue, exactly
   the JS map's in_review. !important guarantees it beats the inline <style>
   regardless of sheet order — this is the headline correction of the pass.    */
.badge.review {
  background: #EFF6FF !important;
  color: #1E40AF !important;
}

.badge.rejected {
  background: #FEF2F2;
  color: #991B1B;
}

/* [9D] Parity variants the class system was missing — so JS states that fall
   through to a bare class badge (completed / depleted) render in-language
   instead of unstyled. Mirrors the JS map 1:1.                                */
.badge.completed {
  background: #F3F4F6;
  color: #6B7280;
}
.badge.depleted {
  background: #FEF2F2;
  color: #991B1B;
}

/* ── [11] PHASE 2 — 2-COLUMN HOME LAYOUT + NOTIFICATION BANNER ───────────────

   Layout: full-width stat cards row stays on top, then below splits into:
     [left col — ~65%]  chart / benna engine / existing content
     [right col — ~35%] notification banner + quick-actions panel

   Notification banner: contextual callout at top of right col (X Dev pattern).
   Quick actions: chevron-row list for the most common next actions.
   ─────────────────────────────────────────────────────────────────────────── */

/* Home 2-col wrapper — wraps everything BELOW the stats row */
.home-2col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
@media (max-width: 1100px) {
  .home-2col { grid-template-columns: 1fr; }
}

/* Right column stacks its children vertically */
.home-right-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Notification banner */
.dash-notif-banner {
  background: linear-gradient(135deg, rgba(255,45,120,0.10), rgba(4,190,254,0.07));
  border: 1px solid rgba(255,45,120,0.22);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.dash-notif-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #FF2D78, #04BEFE);
}
.dash-notif-banner__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #FF2D78;
  margin-bottom: 5px;
}
.dash-notif-banner__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #F0F0F8;
  margin-bottom: 5px;
  line-height: 1.3;
}
.dash-notif-banner__body {
  font-size: 12.5px;
  color: #7C7E8F;
  line-height: 1.5;
  margin-bottom: 12px;
}
.dash-notif-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #FF2D78;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.dash-notif-banner__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dash-notif-banner__dismiss {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: #5A5C6E;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.dash-notif-banner__dismiss:hover { background: rgba(255,255,255,0.06); color: #F0F0F8; }

/* Quick actions panel */
.dash-quick-actions {
  background: #13131E;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}
.dash-quick-actions__head {
  padding: 14px 16px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A5C6E;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.14s ease;
}
.dash-quick-action:last-child { border-bottom: none; }
.dash-quick-action:hover { background: rgba(255,255,255,0.04); }
.dash-quick-action__icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.dash-quick-action__text { flex: 1; min-width: 0; }
.dash-quick-action__label {
  font-size: 13px;
  font-weight: 600;
  color: #D0D0DC;
  display: block;
  line-height: 1.3;
}
.dash-quick-action__sub {
  font-size: 11.5px;
  color: #5A5C6E;
  display: block;
  margin-top: 1px;
}
.dash-quick-action__chevron {
  color: #3A3C4E;
  font-size: 14px;
  flex-shrink: 0;
  transition: color 0.14s, transform 0.14s;
}
.dash-quick-action:hover .dash-quick-action__chevron {
  color: #FF2D78;
  transform: translateX(2px);
}

/* Date range buttons — dark-friendly override for the inline-styled pills */
.date-range-btn, .pub-range-btn {
  background: rgba(255,255,255,0.06) !important;
  color: #7C7E8F !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.date-range-btn.active, .pub-range-btn.active {
  background: #FF2D78 !important;
  color: #fff !important;
  border-color: #FF2D78 !important;
}
.date-range-btn:hover:not(.active), .pub-range-btn:hover:not(.active) {
  background: rgba(255,255,255,0.10) !important;
  color: #F0F0F8 !important;
}

/* Integration filter select — dark override */
#integrationFilter {
  background: #1E1E2E !important;
  color: #F0F0F8 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Cross-door card — dark override */
#crossDoorCard {
  background: linear-gradient(135deg, rgba(255,45,120,0.06), rgba(4,190,254,0.04)) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Date inputs — dark override */
#dateRangeFrom, #dateRangeTo {
  background: #1E1E2E !important;
  color: #F0F0F8 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color-scheme: dark;
}

/* ── [10] DARK CONTENT AREA — card / page-head / table / pill overrides ──────
   Phase 1: all content surfaces flip to dark. Scoped to dashboard shell only. */

/* Page heading border — soften for dark bg */
.shell-page-head {
  border-bottom-color: rgba(255,255,255,0.07);
}
.shell-page-title {
  color: #F0F0F8;
}
.shell-page-sub {
  color: #7C7E8F;
}

/* Stat cards — X-style surface */
.stat-card {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.20) !important;
}
.stat-card:hover {
  border-color: rgba(255,45,120,0.40) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 14px 32px rgba(255,45,120,0.14) !important;
}
.stat-card .stat-label {
  color: #71767B !important;
}
.stat-card .stat-value {
  color: #E7E9EA !important;
}
.stat-card .stat-value.earnings { color: #FF2D78 !important; }
.stat-card .stat-value.spend    { color: #F59E0B !important; }
.stat-card .stat-trend {
  color: #5A5C6E !important;
}
.stat-card .stat-trend.positive { color: #34D399 !important; }
.stat-card .stat-trend.negative { color: #F87171 !important; }

/* Chart / section containers — X-style surface */
.chart-section,
.section {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
}
/* Card-style sections on API & Billing routes — these routes stack bare
   .section bands (no radius/padding/border), so they read as flat full-bleed
   strips instead of cards. Give the top-level route sections real card
   treatment to match the Creatives / Campaigns reference (#1B1D22 panels). */
[data-shell-route="api"] > .section,
[data-shell-route="performance"] > .section,
[data-shell-route="boosts"] > .section,
[data-shell-route="settings"] > .section {
  background: #13131E !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  padding: 24px 26px !important;
  margin-bottom: 16px !important;
}
.chart-title,
.section-title{
  color: #F0F0F8 !important;
}
.chart-summary {
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
.chart-summary-label {
  color: #7C7E8F !important;
}

/* Tables — dark row hover */

/* Status pills — dark-friendly pastel tints */
.badge.live     { background: rgba(16,185,129,0.15); color: #34D399; }
.badge.paused   { background: rgba(245,158,11,0.15); color: #FCD34D; }
.badge.review   { background: rgba(59,130,246,0.15) !important; color: #93C5FD !important; }
.badge.rejected { background: rgba(239,68,68,0.15);  color: #FCA5A5; }
.badge.completed{ background: rgba(255,255,255,0.07); color: #9CA3AF; }
.badge.depleted { background: rgba(239,68,68,0.15);  color: #FCA5A5; }

/* Form inputs on dark bg */
.form-input,
.form-textarea,
.form-select {
  background-color: #1E1E2E !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #F0F0F8 !important;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: #5A5C6E !important;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  background-color: #242436 !important;
  border-color: var(--bb-pink, #FF2D78) !important;
}

/* Inline panel overrides for dark bg */
#aSetBillingTableBody tr:hover,
#compareTableBody tr:hover {
  background-color: rgba(255,255,255,0.03) !important;
}

/* ── [12] PHASE 3 — COMPREHENSIVE DARK COMPLETION ────────────────────────────
   Catches every remaining white/light inline-styled surface.
   Strategy: broadest safe selectors first, then IDs for specific offenders.
   All !important — these are overriding inline `style=""` attributes.
   ─────────────────────────────────────────────────────────────────────────── */

/* Settings modal and all inline white → X-style */
#settingsModal > div,
#settingsModal [style*="background:#fff"],
#settingsModal [style*="background: #fff"],
#settingsModal [style*="background: rgb(255"],
#settingsModal [style*="background:#FFFFFF"],
#settingsModal [style*="background: #FFFFFF"] {
  background: #13131E !important;
  color: #D0D0DC !important;
}
/* Settings nav panel */
#aSetNav, #settingsModal nav {
  background: #111111 !important;
  border-right-color: rgba(255,255,255,0.07) !important;
}
#aSetNav button, #settingsModal nav button {
  color: #9CA3AF !important;
  background: transparent !important;
}
/* Settings inner body */
#aSetBody, #settingsModal [id$="Body"] {
  background: #13131E !important;
  color: #D0D0DC !important;
}
/* Settings close / cancel buttons (ghost style) */
#aSetCancel, #aSetClose, #sSetCancel, #settingsCloseBtn,
#sSetPayoutCancel, #sSetPayoutBack, #sSetMfaDisable,
#sSetMfaEnrollCancel, #sSetMfaDisableCancel,
#settingsModal button[style*="#fff"],
#settingsModal button[style*="background:#fff"],
#settingsModal button[style*="background: #fff"] {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #D0D0DC !important;
}
/* Settings inner panels / card sections */
#settingsModal [style*="border-radius"][style*="padding"],
#settingsModal [style*="background:#F9FAFB"],
#settingsModal [style*="background: #F9FAFB"],
#settingsModal [style*="background:#F3F4F6"],
#settingsModal [style*="background: #F3F4F6"] {
  background: #1E1E2E !important;
  color: #D0D0DC !important;
  border-color: rgba(255,255,255,0.08) !important;
}
/* Settings labels / headings */
#settingsModal label, #settingsModal h3,
#settingsModal [style*="color:#374151"],
#settingsModal [style*="color: #374151"],
#settingsModal [style*="color:#111827"],
#settingsModal [style*="color:#111111"],
#settingsModal [style*="color:#6B7280"] {
  color: #9CA3AF !important;
}
/* Settings text inputs (inline-styled via FLD variable) */
#settingsModal input:not([type=checkbox]):not([type=radio]),
#settingsModal textarea,
#settingsModal select {
  background: #1E1E2E !important;
  background-color: #1E1E2E !important;
  color: #F0F0F8 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
/* MFA QR code container needs white bg for scannability — keep it */
#sSetMfaQR { background: #fff !important; }
/* Disabled/read-only fields */
#settingsModal input[disabled] {
  background: #111120 !important;
  color: #5A5C6E !important;
}
/* Copy buttons inside settings */
.aSetCopy, #aSetReveal, #sSetRegen, #sSetPayoutEdit {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #B0B0C7 !important;
}
/* Export billing button */
#aSetExportBilling {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #B0B0C7 !important;
}
/* Settings billing table */
#settingsModal table th {
  background: #181828 !important;
  color: #7C7E8F !important;
  border-color: rgba(255,255,255,0.07) !important;
}
#settingsModal table td {
  color: #D0D0DC !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* ── NOTIFICATIONS DROPDOWN ── */
#notifDropdown {
  background: #13131E !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}
#notifDropdown * {
  color: #D0D0DC !important;
  border-color: rgba(255,255,255,0.07) !important;
}
#notifDropdown [style*="background:#fff"],
#notifDropdown [style*="background: #fff"],
#notifDropdown [style*="background: #F"] {
  background: #1E1E2E !important;
}

/* ── AUCTION INTELLIGENCE + BENNA ENGINE PANELS ── */
#bbxAuctionSummary,
.performance-group{
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #D0D0DC !important;
}
#bbxAuctionSummary [style*="color:#9CA3AF"],
#bbxAuctionSummary [style*="color: #9CA3AF"] {
  color: #5A5C6E !important;
}

/* ── CAMPAIGNS PAGE — filter pills + search ── */
/* Filter tab buttons (All / Live / Paused / In Review) */
button[style*="border-radius: 100px"],
button[style*="border-radius:100px"] {
  background: rgba(255,255,255,0.06) !important;
  color: #9CA3AF !important;
  border-color: rgba(255,255,255,0.10) !important;
}
/* Active filter pill — pink */
button.active[style*="border-radius: 100px"],
button.active[style*="border-radius:100px"]{
  background: #FF2D78 !important;
  color: #fff !important;
  border-color: #FF2D78 !important;
}
/* Export CSV / Compare ghost buttons */
button[onclick*="exportCSV"], button[onclick*="openCompareModal"],
button[style*="Export"], button[style*="Compare"] {
  background: #1E1E2E !important;
  color: #D0D0DC !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── MODALS — cashout, compare, payout method, deposit ── */
#cashoutModal > div, #cashoutErrModal > div,
#compareModal > div,
div[style*="background:#fff"][style*="border-radius"][style*="box-shadow"],
div[style*="background: #fff"][style*="border-radius"][style*="box-shadow"] {
  background: #13131E !important;
  color: #D0D0DC !important;
  border-color: rgba(255,255,255,0.08) !important;
}
/* Modal ghost buttons */
#cashoutCancel, #cashoutErrCancel,
button[style*="background:#fff"][style*="border"],
button[style*="background: #fff"][style*="border"] {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #D0D0DC !important;
}
/* Modal headings */
div[style*="box-shadow"] h2,
div[style*="box-shadow"] h3 {
  color: #F0F0F8 !important;
}
div[style*="box-shadow"] p,
div[style*="box-shadow"] span:not(.badge) {
  color: #9CA3AF !important;
}

/* ── PILOT / BOOST ADS TABLE ── */
/* Active boosts container */
[style*="Active boosts"],
div[style*="border-radius:12px"][style*="border:1px solid"] {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── PUBLISHER: CREDENTIALS PANELS + PAYOUT MODAL ── */
[id*="Credential"], [id*="credential"],
div[style*="background:#FFFFFF"][style*="border-radius"] {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #D0D0DC !important;
}
/* Payout method modal */
div[style*="background:#fff"][style*="border-radius:14px"],
div[style*="background: #fff"][style*="border-radius:14px"] {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── INLINE CODE TAGS (integration docs) ── */
code[style*="background:#fff"],
code[style*="background: #fff"] {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #04BEFE !important;
}

/* ── GLOBAL INLINE TEXT COLOR RESET ── */
/* Light grey body copy hardcoded to dark-mode-unfriendly hex */
[style*="color:#374151"] { color: #B0B0C7 !important; }
[style*="color: #374151"] { color: #B0B0C7 !important; }
[style*="color:#4B5563"] { color: #9CA3AF !important; }
[style*="color: #4B5563"] { color: #9CA3AF !important; }
[style*="color:#1F2937"] { color: #D0D0DC !important; }
[style*="color: #1F2937"] { color: #D0D0DC !important; }
[style*="color:#111827"] { color: #E0E0EC !important; }
[style*="color: #111827"] { color: #E0E0EC !important; }
[style*="color:#111111"]:not(.shell-sidebar *) { color: #E0E0EC !important; }

/* ── DATA-IS-LIVE / STATUS CHIP ── */
.data-status-chip,
div[style*="Data is live"],
div[style*="Updated just now"] {
  background: rgba(16,185,129,0.12) !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
  color: #34D399 !important;
}
div[style*="Data is live"] *,
div[style*="Updated just now"] * {
  color: #34D399 !important;
}

/* ── INLINE LIGHT CONTAINER BACKGROUNDS (catch-all) ── */
/* Any div with explicit white/near-white background that's NOT a button,
   NOT in the sidebar, NOT a modal overlay, NOT a QR code */
.shell-main div[style*="background:#fff"]:not(button):not(.shell-sidebar *),
.shell-main div[style*="background: #fff"]:not(button):not(.shell-sidebar *),
.shell-main div[style*="background:#FFFFFF"]:not(button),
.shell-main div[style*="background: #FFFFFF"]:not(button),
.shell-main div[style*="background: #F9FAFB"]:not(button),
.shell-main div[style*="background:#F9FAFB"]:not(button),
.shell-main div[style*="background: #F3F4F6"]:not(button),
.shell-main div[style*="background:#F3F4F6"]:not(button),
.shell-main section[style*="background:#fff"],
.shell-main section[style*="background: #fff"] {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #D0D0DC !important;
}

/* Settings modal footer strip */
#settingsModal [style*="border-top"][style*="padding"],
#settingsModal > div > div:last-child,
#settingsModal footer {
  background: #111111 !important;
  border-top-color: rgba(255,255,255,0.07) !important;
}

/* ── LIGHT GRADIENT CONTAINERS → dark gradient ── */
.shell-main [style*="background:linear-gradient"][style*="#fff"],
.shell-main [style*="background: linear-gradient"][style*="#fff"],
.shell-main [style*="background:linear-gradient"][style*="#FFF"],
.shell-main [style*="background: linear-gradient"][style*="rgb(255"] {
  background: linear-gradient(135deg, rgba(255,45,120,0.06), rgba(4,190,254,0.04)) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── [13] INTEGRATIONS PAGE — FULL DARK COMPLETION ───────────────────────────  */

/* Integration door cards (ic-card — JS-rendered) */
.ic-card {
  background: #13131E !important;
  border-color: rgba(255,255,255,0.09) !important;
  color: #D0D0DC !important;
}
.ic-card:hover {
  background: #1E1E2E !important;
  border-color: rgba(255,45,120,0.28) !important;
}
.ic-card .ic-name,
.ic-card [style*="color:#1E1E2E"],
.ic-card [style*="color: #1E1E2E"],
.ic-card [style*="color:#374151"],
.ic-card [style*="color:#111111"] { color: #F0F0F8 !important; }
.ic-card [style*="color:#6B7280"],
.ic-card [style*="color: #6B7280"] { color: #7C7E8F !important; }

/* Verify badges — bottom status row */
.verify-badge {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.09) !important;
  color: #D0D0DC !important;
}
.verify-badge.active {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.30) !important;
}
.verify-badge.detecting {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.30) !important;
}
.verify-badge.test-only {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.25) !important;
}
.verify-badge .verify-name { color: #D0D0DC !important; }
.verify-badge .verify-status { color: #7C7E8F !important; }
.verify-badge.active .verify-status { color: #34D399 !important; }

/* Placements door nav tab strip */
.placement-door-tab {
  color: #7C7E8F !important;
}
.placement-door-tab:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #F0F0F8 !important;
}
.placement-door-tab.is-active {
  background: rgba(255,45,120,0.12) !important;
  border-color: rgba(255,45,120,0.28) !important;
  color: #FF2D78 !important;
}

/* Feature sub-cards inside fw-panel (Electron, Tauri, Sound+Video, etc.) */
.fw-panel div[style*="background:#F9FAFB"],
.fw-panel div[style*="background: #F9FAFB"] {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.fw-panel div[style*="color:#4B5563"],
.fw-panel div[style*="color: #4B5563"] { color: #9CA3AF !important; }
.fw-panel div[style*="color:#6B7280"],
.fw-panel div[style*="color: #6B7280"] { color: #7C7E8F !important; }
.fw-panel h4[style*="color:#6B7280"] { color: #5A5C6E !important; }
.fw-panel h5[style*="color:#6B7280"] { color: #5A5C6E !important; }

/* iOS / Android info banners (light blue) */
.fw-panel div[style*="background:#E0F2FE"],
.fw-panel div[style*="background: #E0F2FE"] {
  background: rgba(3,105,161,0.15) !important;
  border-color: rgba(3,105,161,0.30) !important;
  color: #93C5FD !important;
}
.fw-panel div[style*="background:#E0F2FE"] strong,
.fw-panel div[style*="background: #E0F2FE"] strong { color: #BFDBFE !important; }

/* Mobile flavor tabs (React Native / Native iOS / Native Android) */
.mobile-flavor-tab[style*="background:#F3F4F6"],
.mobile-flavor-tab[style*="background: #F3F4F6"] {
  background: rgba(255,255,255,0.07) !important;
  color: #B0B0C7 !important;
}

/* Verify panel border + heading */
#integrationVerifyPanel {
  border-top-color: rgba(255,255,255,0.07) !important;
}
#integrationVerifyPanel [style*="color:#1E1E2E"] { color: #F0F0F8 !important; }
#integrationVerifyPanel [style*="color:#6B7280"] { color: #7C7E8F !important; }



/* Onboarding banner (ob-step items) */
.ob-step {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.ob-title { color: #F0F0F8 !important; }
.ob-desc  { color: #9CA3AF !important; }
.ob-cta {
  background: #1E1E2E !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #D0D0DC !important;
}
.ob-cta:hover { background: #242436 !important; color: #F0F0F8 !important; }
.ob-cta-primary {
  background: #FF2D78 !important;
  color: #fff !important;
}
.ob-bullet {
  background: rgba(255,255,255,0.08) !important;
  color: #9CA3AF !important;
}

/* Section intro text (inline #6B7280 paragraphs) */
.section > p[style*="color: #6B7280"],
.section > p[style*="color:#6B7280"] {
  color: #7C7E8F !important;
}

/* Placements page footnote text */
.shell-main [style*="color: #9CA3AF"],
.shell-main [style*="color:#9CA3AF"] {
  color: #5A5C6E !important;
}

/* Inline F3F4F6 code backgrounds (inline install commands within text) */
.shell-main code[style*="background:#F3F4F6"],
.shell-main code[style*="background: #F3F4F6"],
.fw-panel code[style*="background:#F3F4F6"],
.fw-panel code[style*="background: #F3F4F6"] {
  background: #1E1E2E !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #04BEFE !important;
}

/* ── [14] LANGUAGE PICKER + COLLAPSIBLE ACCOUNT SECTION ─────────────────────*/

/* Language picker button */
.shell-lang-picker {
  position: relative;
}
.shell-lang-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  color: #E7E9EA;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.shell-lang-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

/* Language dropdown */
.shell-lang-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #1A2433;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.60);
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
.shell-lang-opt {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #E7E9EA;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.shell-lang-opt:hover { background: rgba(255,255,255,0.06); }
.shell-lang-opt.is-active {
  color: #FF2D78;
  font-weight: 700;
}

/* ── COLLAPSIBLE ACCOUNT SECTION (sidebar footer) ── */
.shell-account-section {
  width: 100%;
}

/* Toggle row — avatar + name + chevron */
.shell-account-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.14s;
}
.shell-account-toggle:hover {
  background: rgba(255,255,255,0.05);
}

.shell-account-chevron {
  margin-left: auto;
  color: #4E5256;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.14s;
}
.shell-account-section.is-open .shell-account-chevron {
  transform: rotate(180deg);
  color: #9DA3A6;
}

/* Collapsible menu — hidden by default, slides open */
.shell-account-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.shell-account-section.is-open .shell-account-menu {
  max-height: 200px;
}

/* Menu items */
.shell-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px 10px 18px;
  background: transparent;
  border: none;
  border-left: 2px solid rgba(255,255,255,0.08);
  margin-left: 14px;
  width: calc(100% - 14px);
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: #9DA3A6;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.14s, background 0.14s;
}
.shell-account-item:hover {
  color: #E7E9EA;
  background: rgba(255,255,255,0.04);
}
.shell-account-item svg {
  flex-shrink: 0;
  color: #4E5256;
}
.shell-account-item:hover svg { color: #9DA3A6; }

/* Account nav item — last tab in sidebar, same shell-nav-item style */
.shell-nav-item--account { height: auto; min-height: 40px; }
.shell-nav-item--account .shell-nav-item__label { line-height: 1.2; }

/* Collapsible account wrapper */
.shell-account-expand { width: 100%; }

/* Chevron — points right (collapsed), rotates down (expanded) */
.shell-acct-chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: rgba(255,255,255,0.08);
  transition: transform 0.2s ease, color 0.15s;
}
.shell-account-expand.is-open .shell-acct-chevron {
  transform: rotate(90deg);
  color: #8B98A5;
}

/* Children list — hidden by default, slides open */
.shell-account-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.shell-account-expand.is-open .shell-account-children {
  max-height: 120px;
}

/* Child items — indented with left border, X Dev style */
.shell-account-child {
  display: block;
  width: calc(100% - 18px);
  margin-left: 18px;
  padding: 9px 10px;
  border: none;
  border-left: 2px solid rgba(255,255,255,0.08);
  background: transparent;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: #8B98A5;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.13s, background 0.13s;
  border-radius: 0;
}
.shell-account-child:hover {
  color: #E7E9EA;
  background: rgba(255,255,255,0.04);
}
.shell-account-child--logout {
  color: #EF4444;
}
.shell-account-child--logout:hover {
  color: #F87171;
  background: rgba(239,68,68,0.06);
}

/* X-style active nav item — rounded rectangle rgba(255,255,255,0.08) */
.shell-nav-item.is-active {
  background: rgba(255,255,255,0.08) !important;
  border-color: transparent !important;
}

/* Sidebar section labels */
.shell-nav-section-label {
  color: rgba(255,255,255,0.08);
}
.shell-account-item--danger { color: #EF4444; }
.shell-account-item--danger:hover { color: #F87171; background: rgba(239,68,68,0.06); }
.shell-account-item--danger svg { color: #EF4444; }

/* ── FLAT ACCOUNT ROW (X Dev style) ── */
.shell-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.shell-account-row .shell-sidebar__user-text { flex: 1; min-width: 0; }

/* Settings + Logout icon buttons inside account row */
.shell-account-settings-btn,
.shell-account-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  padding: 0;
}
.shell-account-settings-btn { color: #4E5256; }
.shell-account-settings-btn:hover { background: rgba(255,255,255,0.07); color: #E7E9EA; }
.shell-account-logout-btn { color: #4E5256; }
.shell-account-logout-btn:hover { background: rgba(239,68,68,0.10); color: #F87171; }

/* ══════════════════════════════════════════════════════════════════════
   THEME COMPLETION (2026-07-03) — dark-ify content surfaces the shell
   re-theme missed. Scoped to .shell-main. Ad-preview / wireframe / placement
   mockups stay light on purpose (they simulate real ads), so those classes
   are excluded from the background overrides. Covers every light color format
   the JS-rendered content uses: #fff, #ffffff, white, rgb(255,255,255), and
   the light-grey greys.
   ══════════════════════════════════════════════════════════════════════ */
/* --- light card / panel / empty-state backgrounds → dark surface --- */
.shell-main [style*="background:#fff"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background: #fff"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background:#ffffff" i]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background: #ffffff" i]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background:white"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background: white"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background:rgb(255, 255, 255)"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background: rgb(255, 255, 255)"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background:rgb(255,255,255)"]:not([class*="preview"]):not([class*="ad-"]):not([class*="mock"]):not([class*="sponsor"]):not([class*="wf-"]):not([class*="pl-"]),
.shell-main [style*="background:#fafafa" i], .shell-main [style*="background: #fafafa" i],
.shell-main [style*="background:#f9fafb" i], .shell-main [style*="background: #f9fafb" i],
.shell-main [style*="background:#f3f4f6" i], .shell-main [style*="background: #f3f4f6" i],
.shell-main [style*="background:#f8f9fa" i], .shell-main [style*="background: #f8f9fa" i]{
  background:#13131E !important;
}
/* --- amber/cream callouts (Library %, readiness, warnings) → dark amber chip --- */
.shell-main [style*="rgb(255, 251, 235)"], .shell-main [style*="background:#fffbeb" i], .shell-main [style*="background: #fffbeb" i],
.shell-main [style*="#fef3c7" i], .shell-main [style*="rgb(254, 243, 199)"]{
  background:rgba(245,158,11,0.13) !important; border-color:rgba(245,158,11,0.32) !important; color:#FBBF24 !important;
}
/* --- light-grey borders → subtle dark border --- */
.shell-main [style*="#E5E7EB" i], .shell-main [style*="rgb(229, 231, 235)"],
.shell-main [style*="#E2E8F0" i], .shell-main [style*="#EEEEEE" i]{ border-color:rgba(255,255,255,.10) !important; }
/* --- known advertiser content classes --- */
.ca-section,.ca-summary,.ca-variant-row{
  background:#13131E !important; border-color:rgba(255,255,255,.10) !important; color:#E7E9EA !important;
}
/* --- form fields --- */
.shell-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.shell-main select, .shell-main textarea,
.ca-input,.ca-image-add,.ca-upload-btn,.wf-input{
  background:#1E2024 !important; color:#E7E9EA !important; border-color:rgba(255,255,255,.10) !important;
}
.shell-main input::placeholder, .shell-main textarea::placeholder{ color:#9DA3A6 !important; }
.shell-main select option{ background:#16181C; color:#E7E9EA; }
/* --- SVG chart plot backgrounds that render white --- */
.shell-main svg rect[fill="#fff"], .shell-main svg rect[fill="#ffffff"],
.shell-main svg rect[fill="#FFFFFF"], .shell-main svg rect[fill="#FAFAFA"]{ fill:transparent !important; }
/* --- dark-on-white text now on dark → lighten (all common dark greys) --- */
.shell-main [style*="color:#0F0F1A" i],.shell-main [style*="color: #0F0F1A" i],
.shell-main [style*="color:#111111" i],.shell-main [style*="color: #111111" i],
.shell-main [style*="color:#111827" i],.shell-main [style*="color: #111827" i],
.shell-main [style*="color:#0F172A" i],.shell-main [style*="color: #0F172A" i],
.shell-main [style*="color:#1F2937" i],.shell-main [style*="color: #1F2937" i],
.shell-main [style*="color:#030712" i],.shell-main [style*="color:#18181B" i],
.shell-main [style*="color:#0B0B14" i],.shell-main [style*="color:#1A1A2E" i],
.shell-main [style*="color:#000000" i],.shell-main [style*="color:#000;" i],
.shell-main [style*="color: #000;" i],.shell-main [style*="color:#1E293B" i]{ color:#E7E9EA !important; }
/* --- stragglers: add/variant buttons, status badges, progress tracks --- */
.ca-variant-add, .ca-add, .ca-chip{ background:#1E2024 !important; color:#E7E9EA !important; border-color:rgba(255,255,255,.10) !important; }
.shell-main [style*="#FEE2E2" i], .shell-main [style*="#FEF2F2" i]{ background:rgba(244,33,46,.14) !important; color:#F87171 !important; }
.shell-main [style*="#DCFCE7" i], .shell-main [style*="#D1FAE5" i]{ background:rgba(52,211,153,.14) !important; color:#34D399 !important; }
.shell-main [style*="#FEF3C7" i], .shell-main [style*="#FEF9C3" i], .shell-main [style*="#FFFBEB" i]{ background:rgba(251,191,36,.16) !important; color:#FBBF24 !important; }
.shell-main [style*="#DBEAFE" i], .shell-main [style*="#EFF6FF" i]{ background:rgba(96,165,250,.14) !important; color:#93C5FD !important; }
.shell-main [class*="progress"]:not([class*="fill"]):not([class*="__fill"]):not([class*="label"]):not([class*="__label"]){ background:rgba(255,255,255,.08) !important; }