/* ─── Builder theme tokens ──────────────────────────────────────────────
   The builder used to hard-code dark colours everywhere; we now drive it
   with CSS custom properties scoped to the builder root
   (.tb-fullscreen-modal[data-theme]). Flipping data-theme on that root
   switches the whole builder — topbar, panels, canvas chrome, modals —
   to light or dark. Accents stay identical in both themes.

   Two token families are defined in each block:
     --tb-* — new builder-local tokens for the chrome
     --rw-* — existing global tokens (bg/card-bg/text/border/primary…)
                are re-declared locally so rules inside the builder that
                already use var(--rw-*) follow the scoped toggle instead
                of the app-wide one.                                     */

.tb-fullscreen-modal[data-theme="dark"] {
  --tb-bg:             #0d0f1a;
  --tb-surface:        #13141f;
  --tb-surface-2:      #1a1d2e;
  --tb-surface-3:      #1e2035;
  --tb-overlay-1:      rgba(255,255,255,0.03);
  --tb-overlay-2:      rgba(255,255,255,0.06);
  --tb-overlay-3:      rgba(255,255,255,0.1);
  --tb-text-1:         #ffffff;
  --tb-text-2:         rgba(255,255,255,0.75);
  --tb-text-3:         rgba(255,255,255,0.5);
  --tb-text-4:         rgba(255,255,255,0.3);
  --tb-border-1:       rgba(255,255,255,0.08);
  --tb-border-2:       rgba(255,255,255,0.12);
  --tb-accent:         #4f6ae8;
  --tb-accent-2:       #6b4fd8;
  --tb-accent-soft:    rgba(79,106,232,0.15);
  --tb-accent-border:  rgba(79,106,232,0.3);
  --tb-input-bg:       rgba(255,255,255,0.05);
  --tb-input-border:   rgba(255,255,255,0.1);
  --tb-backdrop:       rgba(0,0,0,0.7);
  --tb-shadow-lg:      0 48px 120px rgba(0,0,0,0.85);

  /* Re-declare global tokens so builder chrome rules that use var(--rw-*)
     also follow the scoped switch. */
  --rw-bg:             #0d0f1a;
  --rw-card-bg:        #1a1d2e;
  --rw-surface:        #13141f;
  --rw-text:           #ffffff;
  --rw-text-light:     rgba(255,255,255,0.55);
  --rw-border:         rgba(255,255,255,0.1);
  --rw-input-bg:       rgba(255,255,255,0.05);
  --rw-hover-bg:       rgba(255,255,255,0.05);
  --rw-nav-bg:         #13141f;
  --rw-sidebar-bg:     #1a1d2e;
  --rw-tab-bg:         rgba(255,255,255,0.04);
}

.tb-fullscreen-modal[data-theme="light"] {
  /* Palette matches cxm-tokens.css so the builder feels continuous with
     the rest of the CX management panel once you switch into it. */
  --tb-bg:             #F9FAFB;
  --tb-surface:        #FFFFFF;
  --tb-surface-2:      #FFFFFF;
  --tb-surface-3:      #F9FAFB;
  --tb-overlay-1:      #F9FAFB;
  --tb-overlay-2:      #F1F2F5;
  --tb-overlay-3:      #E7EAEE;
  --tb-text-1:         #040911;
  --tb-text-2:         #373C44;
  --tb-text-3:         #6A6F77;
  --tb-text-4:         #9DA2AA;
  --tb-border-1:       #E7EAEE;
  --tb-border-2:       #DEE2E7;
  --tb-accent:         #4185F4;
  --tb-accent-2:       #0E52C1;
  --tb-accent-soft:    #ECF3FE;
  --tb-accent-border:  rgba(65,133,244,.35);
  --tb-input-bg:       #FFFFFF;
  --tb-input-border:   #E7EAEE;
  --tb-backdrop:       rgba(4,9,17,.45);
  --tb-shadow-lg:      0 12px 32px -4px rgba(4,9,17,.12), 0 4px 8px -2px rgba(4,9,17,.06);

  --rw-bg:             #F9FAFB;
  --rw-card-bg:        #FFFFFF;
  --rw-surface:        #FFFFFF;
  --rw-text:           #040911;
  --rw-text-light:     #6A6F77;
  --rw-border:         #E7EAEE;
  --rw-input-bg:       #FFFFFF;
  --rw-hover-bg:       #F9FAFB;
  --rw-nav-bg:         #FFFFFF;
  --rw-sidebar-bg:     #FFFFFF;
  --rw-tab-bg:         #F1F2F5;
}

/* Outer shell paint — uses the scoped tokens directly. */
.tb-fullscreen-modal { background: var(--tb-bg, #f5f6f8); }

/* Dark-mode fix: the canvas panel container (.tb-layout) hard-codes #1e1e2a
   via the base CSS. That's fine in dark mode but needs flipping in light. */
.tb-fullscreen-modal[data-theme="light"] .tb-layout {
  background: var(--tb-surface) !important;
  border-color: var(--tb-border-1) !important;
}

/* Duration field — was originally designed for a light topbar (hard-coded
   white background). Override per-theme so it blends properly. */
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field i       { color: rgba(255,255,255,0.55) !important; }
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field input   { color: #ffffff !important; }
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field span    { color: rgba(255,255,255,0.55) !important; }
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field input::placeholder { color: rgba(255,255,255,0.3) !important; }
/* Native <select> inside duration field — dark mode (white chevron via SVG fill) */
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field select {
  color: #ffffff !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M3 4.5l3 3 3-3' stroke='rgba(255,255,255,0.55)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field select option { background: #1a1d24; color: #fff; }

/* ─── Light-theme override layer ────────────────────────────────────────
   The HTML carries ~2000 lines of inline styles authored against the dark
   palette. Instead of rewriting each one, the rules below use higher
   specificity + !important to flip the surfaces that dominate visually
   when data-theme="light" is active on the builder root.                */

.tb-fullscreen-modal[data-theme="light"] .tb-fullscreen-inner {
  color: var(--tb-text-1);
}

/* Topbar + config bar — already themed via --rw-* tokens, but text/borders
   need extra help on the chrome rows. */
.tb-fullscreen-modal[data-theme="light"] .tb-topbar-dirty { color: #b45309 !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-topbar-name { color: var(--tb-text-1) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-topbar-name::placeholder { color: var(--tb-text-4) !important; }

/* Left widget panel + right config panel — these hard-code dark. */
.tb-fullscreen-modal[data-theme="light"] .tb-lp,
.tb-fullscreen-modal[data-theme="light"] .tb-rp,
.tb-fullscreen-modal[data-theme="light"] .tb-left-panel,
.tb-fullscreen-modal[data-theme="light"] .tb-right-panel,
.tb-fullscreen-modal[data-theme="light"] .tb-palette-simple {
  background: var(--tb-surface) !important;
  color: var(--tb-text-1) !important;
  border-color: var(--tb-border-1) !important;
}

/* Generic text utility flip — u-muted / u-muted-2 are hard-coded rgba(white). */
.tb-fullscreen-modal[data-theme="light"] .tb-u-muted     { color: var(--tb-text-4) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-u-muted-2   { color: var(--tb-text-2) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-u-text-10-muted { color: var(--tb-text-4) !important; }

/* Row cards / scroll cards (dark rgba surfaces in base CSS). */
.tb-fullscreen-modal[data-theme="light"] .tb-row-card,
.tb-fullscreen-modal[data-theme="light"] .we-scroll-card {
  background: var(--tb-overlay-1) !important;
  border-color: var(--tb-border-1) !important;
  color: var(--tb-text-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-scroll-row,
.tb-fullscreen-modal[data-theme="light"] .we-scroll-row__label i,
.tb-fullscreen-modal[data-theme="light"] .tb-focus-label { color: var(--tb-text-2) !important; }

/* Segmented control */
.tb-fullscreen-modal[data-theme="light"] .we-seg {
  background: var(--tb-overlay-2) !important;
  border-color: var(--tb-border-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-seg__btn { color: var(--tb-text-3) !important; }
.tb-fullscreen-modal[data-theme="light"] .we-seg__btn:hover { color: var(--tb-text-1) !important; }
.tb-fullscreen-modal[data-theme="light"] .we-seg__btn--active {
  background: var(--tb-accent-soft) !important;
  color: var(--tb-accent) !important;
  box-shadow: inset 0 0 0 1px var(--tb-accent-border) !important;
}

/* Inline speed input */
.tb-fullscreen-modal[data-theme="light"] .we-scroll-speed input {
  background: var(--tb-input-bg) !important;
  border-color: var(--tb-input-border) !important;
  color: var(--tb-text-1) !important;
}

/* Widget palette search */
.tb-fullscreen-modal[data-theme="light"] .tb-palette-search input {
  background: var(--tb-input-bg) !important;
  border-color: var(--tb-input-border) !important;
  color: var(--tb-text-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-palette-search input::placeholder { color: var(--tb-text-4) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-palette-title  { color: var(--tb-text-2) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-palette-empty  { color: var(--tb-text-4) !important; }

/* Help overlay + card */
.tb-fullscreen-modal[data-theme="light"] .tb-help-overlay { background: var(--tb-backdrop) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-help-card {
  background: var(--tb-surface) !important;
  color: var(--tb-text-1) !important;
  border-color: var(--tb-border-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-help-card__sub { color: var(--tb-text-3) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-help-list li { color: var(--tb-text-2) !important; border-color: var(--tb-border-1) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-help-keys kbd {
  background: var(--tb-overlay-2) !important;
  color: var(--tb-text-1) !important;
  border-color: var(--tb-border-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-help-close {
  background: var(--tb-overlay-2) !important;
  color: var(--tb-text-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-help-close:hover { background: var(--tb-overlay-3) !important; }

/* Simple cards (widget palette cards) */
.tb-fullscreen-modal[data-theme="light"] .tb-simple-card {
  background: var(--tb-overlay-1) !important;
  border-color: var(--tb-border-1) !important;
  color: var(--tb-text-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-simple-card:hover { background: var(--tb-overlay-2) !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-simple-card-title { color: var(--tb-text-1) !important; }

/* Stepper / quick-edit modals */
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop { background: var(--tb-backdrop) !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-modal,
.tb-fullscreen-modal[data-theme="light"] .stepper-body,
.tb-fullscreen-modal[data-theme="light"] .stepper-header,
.tb-fullscreen-modal[data-theme="light"] .stepper-footer {
  background: var(--tb-surface) !important;
  color: var(--tb-text-1) !important;
  border-color: var(--tb-border-1) !important;
}
/* Bump header padding to give the new 48px gradient tile breathing room.
   Drop the bottom border on header — the new .stepper-progress strip
   below it owns the divider so we don't double-up. */
.tb-fullscreen-modal[data-theme="light"] .stepper-header {
  padding: 22px 26px 18px !important;
  border-bottom-color: transparent !important;
}

/* ── Nuclear text override for stepper + preview picker ──
   The stepper modal body has ~200 inline style="color: rgba(255,255,255,*)"
   on text elements. Inline styles beat any non-!important CSS rule, so
   we tag element-type selectors with !important here. <i> (icons) and
   any class that starts with "tb-cb-chip" are excluded — those keep
   their original accent colours. */
.tb-fullscreen-modal[data-theme="light"] .stepper-modal h1,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal h2,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal h3,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal h4,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal h5,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal h6,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal p,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal span,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal label,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal div,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal li,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal td,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal th,
.tb-fullscreen-modal[data-theme="light"] .stepper-body h1,
.tb-fullscreen-modal[data-theme="light"] .stepper-body h2,
.tb-fullscreen-modal[data-theme="light"] .stepper-body h3,
.tb-fullscreen-modal[data-theme="light"] .stepper-body h4,
.tb-fullscreen-modal[data-theme="light"] .stepper-body h5,
.tb-fullscreen-modal[data-theme="light"] .stepper-body h6,
.tb-fullscreen-modal[data-theme="light"] .stepper-body p,
.tb-fullscreen-modal[data-theme="light"] .stepper-body span,
.tb-fullscreen-modal[data-theme="light"] .stepper-body label,
.tb-fullscreen-modal[data-theme="light"] .stepper-body div,
.tb-fullscreen-modal[data-theme="light"] .stepper-body li,
.tb-fullscreen-modal[data-theme="light"] .stepper-body td,
.tb-fullscreen-modal[data-theme="light"] .stepper-body th {
  color: var(--tb-text-1) !important;
}

/* Keep accent / semantic classes visible */
.tb-fullscreen-modal[data-theme="light"] .stepper-modal .text-primary,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal [class*="text-blue"] { color: var(--tb-accent) !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-modal .text-success,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal [class*="text-green"] { color: #059669 !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-modal .text-danger,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal [class*="text-red"]  { color: #dc2626 !important; }

/* Muted text signals (placeholders, step counts, unit labels) — drop to --tb-text-3 */
.tb-fullscreen-modal[data-theme="light"] .stepper-modal .text-muted,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal small { color: var(--tb-text-3) !important; }

/* ── Same broad text flip for the preview picker + iframe modals ──
   Both modals use heavy inline style="color: rgba(255,255,255,*)"
   on headings, pill chips, labels, step numbers. */
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop h1,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop h2,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop h3,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop h4,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop p,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop span,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop label,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop div {
  color: var(--tb-text-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop .text-muted,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop small { color: var(--tb-text-3) !important; }

/* ── Same broad text flip for left/right panels in main builder ── */
.tb-fullscreen-modal[data-theme="light"] .tb-lp h1,
.tb-fullscreen-modal[data-theme="light"] .tb-lp h2,
.tb-fullscreen-modal[data-theme="light"] .tb-lp h3,
.tb-fullscreen-modal[data-theme="light"] .tb-lp h4,
.tb-fullscreen-modal[data-theme="light"] .tb-lp p,
.tb-fullscreen-modal[data-theme="light"] .tb-lp span,
.tb-fullscreen-modal[data-theme="light"] .tb-lp label,
.tb-fullscreen-modal[data-theme="light"] .tb-lp div,
.tb-fullscreen-modal[data-theme="light"] .tb-rp h1,
.tb-fullscreen-modal[data-theme="light"] .tb-rp h2,
.tb-fullscreen-modal[data-theme="light"] .tb-rp h3,
.tb-fullscreen-modal[data-theme="light"] .tb-rp h4,
.tb-fullscreen-modal[data-theme="light"] .tb-rp p,
.tb-fullscreen-modal[data-theme="light"] .tb-rp span,
.tb-fullscreen-modal[data-theme="light"] .tb-rp label,
.tb-fullscreen-modal[data-theme="light"] .tb-rp div {
  color: var(--tb-text-1) !important;
}

/* Accent colors stay — these classes appear inside the modals too */
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop .text-primary,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop [class*="text-blue"] { color: var(--tb-accent) !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop .text-success,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop [class*="text-green"] { color: #059669 !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop .text-danger,
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop [class*="text-red"]  { color: #dc2626 !important; }

/* Generic inputs inside modals and panels.
   EXCLUDES topbar name input + duration select so chrome controls
   keep their flush styling (no form-field box). The `:not()` chains
   win over the lower-specificity base rules in dmb-builder.css. */
.tb-fullscreen-modal[data-theme="light"] input[type="text"]:not(.tb-topbar-name),
.tb-fullscreen-modal[data-theme="light"] input[type="number"]:not(.tb-topbar-name),
.tb-fullscreen-modal[data-theme="light"] input[type="search"]:not(.tb-topbar-name),
.tb-fullscreen-modal[data-theme="light"] textarea {
  background: var(--tb-input-bg) !important;
  border: 1px solid var(--tb-input-border) !important;
  color: var(--tb-text-1) !important;
}
.tb-fullscreen-modal[data-theme="light"] select:not(.tb-cb-select):not(.tb-duration-field select):not(.we-sort-select) {
  background: var(--tb-input-bg) !important;
  border: 1px solid var(--tb-input-border) !important;
  color: var(--tb-text-1) !important;
}
/* Tighter exclusion via descendant — :not() can't take descendant
   selectors, so re-assert the duration select's flush styling here. */
.tb-fullscreen-modal[data-theme="light"] .tb-duration-field select {
  background: transparent !important;
  border: none !important;
  color: #373C44 !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M3 4.5l3 3 3-3' stroke='%239DA2AA' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 12px 12px !important;
}
.tb-fullscreen-modal[data-theme="light"] input::placeholder,
.tb-fullscreen-modal[data-theme="light"] textarea::placeholder { color: var(--tb-text-4) !important; }

/* (.dmb-pp-* rules live in the canonical block further down — search for
   "PREVIEW DEPLOYMENT PICKER". Light is the default; dark override at end.) */

/* Coach tooltips */
.tb-fullscreen-modal[data-theme="light"] .coach-bubble {
  background: var(--tb-surface) !important;
  color: var(--tb-text-1) !important;
  border-color: var(--tb-border-1) !important;
}

/* Theme toggle button */
.tb-theme-toggle {
  width: 32px; height: 32px; padding: 0;
  border-radius: 6px;
  border: 1px solid var(--rw-border, #E2E5EA);
  background: var(--rw-card-bg, #FFFFFF);
  color: var(--rw-text-light, #6B7280);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.tb-theme-toggle:hover { background: var(--rw-hover-bg, #fafbff); color: var(--rw-text, #1F2937); }

/* ─── DMB stepper modal — themed input backgrounds ──────────────────────
   Loaded after all injector-managed CSS so these rules are last in the
   cascade. Without this, enterprise.css (alphabetically later inside the
   injector) wins even against !important rules in dmb-builder.css.      */

.stepper-modal input[type="text"],
.stepper-modal input[type="number"],
.stepper-body input[type="text"],
.stepper-body input[type="number"] {
  background: var(--tb-input-bg, rgba(255,255,255,0.05)) !important;
  background-color: var(--tb-input-bg, rgba(255,255,255,0.05)) !important;
  border: 1px solid var(--tb-input-border, rgba(255,255,255,0.1)) !important;
  border-radius: 8px !important;
  color: var(--tb-text-1, #fff) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

/* Search-bar input padding — needs !important because enterprise.css /
   bootstrap form-control rules win via load order, even though they have
   lower specificity. Without this the icon overlaps the placeholder text. */
.stepper-modal .stepper-menu-search input[type="text"],
.stepper-body  .stepper-menu-search input[type="text"] {
  padding-left:  32px !important;
  padding-right: 32px !important;
}

.stepper-modal input[type="text"]::placeholder,
.stepper-modal input[type="number"]::placeholder,
.stepper-body input[type="text"]::placeholder,
.stepper-body input[type="number"]::placeholder {
  color: var(--tb-text-4, rgba(255,255,255,0.3)) !important;
  opacity: 1 !important;
}

.stepper-modal input[type="text"]:focus,
.stepper-modal input[type="number"]:focus,
.stepper-body input[type="text"]:focus,
.stepper-body input[type="number"]:focus {
  background: var(--tb-accent-soft, rgba(79,106,232,0.08)) !important;
  background-color: var(--tb-accent-soft, rgba(79,106,232,0.08)) !important;
  border-color: var(--tb-accent-border, rgba(79,106,232,0.5)) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PREVIEW DEPLOYMENT PICKER — `.dmb-pp-*`
   Light-first (default) theming matches the reference mockup
   (white surfaces, blue step badges, green deployment crumb).
   Dark-mode override block follows at the bottom.
   ══════════════════════════════════════════════════════════════════ */

.dmb-pp-backdrop {
  position: fixed; inset: 0;
  z-index: 1200;
  background: rgba(4, 9, 17, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.dmb-pp-dialog {
  width: min(1280px, 94vw);
  max-height: 90vh;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(4, 9, 17, 0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  font-family: 'Inter', sans-serif;
  color: #373C44;
}

/* Header */
.dmb-pp-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #E7EAEE;
  flex-shrink: 0;
}
.dmb-pp-header__left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.dmb-pp-header__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f6ae8, #6b4fd8);
  color: #fff;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(79,106,232,0.28);
}
.dmb-pp-header__title-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dmb-pp-header__title {
  margin: 0;
  font-size: 18px; font-weight: 700;
  color: #1F242B;
  letter-spacing: -0.02em;
}
.dmb-pp-header__brand {
  font-size: 14px; font-weight: 500;
  color: #9DA2AA;
}
.dmb-pp-header__sub {
  margin: 4px 0 0;
  font-size: 13px; color: #6A6F77; font-weight: 400;
}
.dmb-pp-header__sub i { margin: 0 4px; font-size: 10px; opacity: 0.55; }
.dmb-pp-close {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid #E7EAEE;
  background: #fff;
  color: #9DA2AA;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dmb-pp-close:hover { background: #FDECEC; border-color: #F6C8C8; color: #E74C3C; }

/* Loading */
.dmb-pp-loading {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 72px 0;
  gap: 14px;
  color: #6A6F77;
}
.dmb-pp-loading__spinner {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(79,106,232,0.10);
  display: flex; align-items: center; justify-content: center;
  color: #4f6ae8;
  font-size: 20px;
}
.dmb-pp-loading__text { font-size: 14px; font-weight: 500; }

/* Body — 3 columns */
.dmb-pp-body {
  display: flex;
  overflow: hidden;
  flex: 1;
  min-height: 420px;
}
.dmb-pp-column {
  flex: 1;
  display: flex; flex-direction: column;
  border-right: 1px solid #E7EAEE;
  transition: opacity 0.15s;
}
.dmb-pp-column--last { border-right: none; }
.dmb-pp-column--disabled { opacity: 0.4; pointer-events: none; }

.dmb-pp-column__head {
  padding: 18px 20px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid #EEF0F4;
}
.dmb-pp-column__label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}

/* Step badges (1 / 2 / 3) */
.dmb-pp-step {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.dmb-pp-step--active {
  background: #4f6ae8;
  color: #fff;
}
.dmb-pp-step--inactive {
  background: #F3F5F8;
  color: #9DA2AA;
  border: 1px solid #E7EAEE;
}

/* Step label text */
.dmb-pp-label-text {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dmb-pp-label-text--active   { color: #6A6F77; }
.dmb-pp-label-text--inactive { color: #BABFC8; }

/* Search */
.dmb-pp-search-wrap { position: relative; }
.dmb-pp-search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9DA2AA;
  pointer-events: none;
}
.dmb-pp-search {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 32px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #fff;
  color: #373C44;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dmb-pp-search::placeholder { color: #9DA2AA; }
.dmb-pp-search:focus {
  border-color: #4f6ae8;
  box-shadow: 0 0 0 3px rgba(79,106,232,0.10);
}

/* List + items */
.dmb-pp-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: #DEE2E7 transparent;
}
.dmb-pp-list::-webkit-scrollbar { width: 4px; }
.dmb-pp-list::-webkit-scrollbar-thumb { background: #DEE2E7; border-radius: 2px; }

.dmb-pp-item {
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: #373C44;
  cursor: pointer;
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.12s, color 0.12s;
}
.dmb-pp-item:hover      { background: #F3F5F8; color: #1F242B; }
.dmb-pp-item.dmb-pp-selected {
  background: #4f6ae8;
  color: #fff;
}
.dmb-pp-item__check {
  font-size: 11px;
  width: 14px;
  flex-shrink: 0;
  opacity: 0;
}
.dmb-pp-item__check--on { opacity: 1; }
.dmb-pp-item__name { flex: 1; min-width: 0; }

.dmb-pp-empty {
  padding: 20px 14px;
  font-size: 12px;
  color: #9DA2AA;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.dmb-pp-empty--stacked { flex-direction: column; gap: 8px; }
.dmb-pp-empty__icon { font-size: 18px; color: #D5D9E0; }

/* Summary bar (breadcrumb) */
.dmb-pp-summary {
  flex-shrink: 0;
  padding: 14px 24px;
  background: #F9FAFB;
  border-top: 1px solid #E7EAEE;
  display: flex; align-items: center;
  gap: 8px; min-height: 54px;
  flex-wrap: wrap;
}
.dmb-pp-summary__hint {
  font-size: 13px;
  color: #9DA2AA;
  font-style: italic;
}
.dmb-pp-summary__ready {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  color: #00815C;
  display: inline-flex; align-items: center; gap: 4px;
}

.dmb-pp-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.dmb-pp-crumb i          { font-size: 10px; opacity: 0.85; }
.dmb-pp-crumb--anchor    { background: #EEF1FB; color: #3B4BB1; border: 1px solid rgba(79,106,232,0.25); }
.dmb-pp-crumb--primary   { background: #E7F7F4; color: #00815C; border: 1px solid rgba(16,180,143,0.25); }
.dmb-pp-crumb--success   { background: #E7F7F4; color: #00815C; border: 1px solid rgba(16,180,143,0.25); }
.dmb-pp-crumb-sep        { font-size: 10px; color: #BABFC8; }
/* In-chip parent-chain context — muted + lighter weight so the leaf name
   stays the visual anchor while the hierarchy is always reachable. */
.dmb-pp-crumb__ctx {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 2px;
}

/* Brand column — anchor card under the column head (above the locked item).
   Calls out that brand is fixed by the page selector, not pickable here. */
.dmb-pp-brand-anchor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #F5F7FB;
  border: 1px solid #E2E7F1;
  border-radius: 10px;
}
.dmb-pp-brand-anchor__icon {
  margin-top: 1px;
  font-size: 13px;
  color: #4f6ae8;
  flex-shrink: 0;
}
.dmb-pp-brand-anchor__body { min-width: 0; }
.dmb-pp-brand-anchor__name {
  font-size: 14px;
  font-weight: 700;
  color: #2A2F37;
  line-height: 1.3;
  margin-bottom: 6px;
  word-break: break-word;
}
.dmb-pp-brand-anchor__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: rgba(79, 106, 232, 0.10);
  border-radius: 999px;
  color: #4f6ae8;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}
.dmb-pp-brand-anchor__meta i { font-size: 9px; }
.dmb-pp-brand-anchor__hint {
  font-size: 11px;
  color: #8A909A;
  line-height: 1.4;
}
.dmb-pp-list--anchor { /* intentionally empty — placeholder to keep layout */ }

/* Dark-theme variants for the new brand surfaces. */
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-brand-anchor {
  background: rgba(79, 106, 232, 0.10);
  border-color: rgba(79, 106, 232, 0.22);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-brand-anchor__name { color: rgba(255,255,255,0.92); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-brand-anchor__hint { color: rgba(255,255,255,0.45); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-brand-anchor__meta {
  background: rgba(79, 106, 232, 0.18);
  color: #B7C3F5;
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-crumb--anchor {
  background: rgba(79, 106, 232, 0.18);
  color: #B7C3F5;
  border-color: rgba(79, 106, 232, 0.32);
}

/* Footer */
.dmb-pp-footer {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #E7EAEE;
  background: #fff;
}
.dmb-pp-btn {
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  border: 1px solid transparent;
}
.dmb-pp-btn--ghost {
  flex: 1;
  background: #fff;
  border-color: #E7EAEE;
  color: #373C44;
}
.dmb-pp-btn--ghost:hover { background: #F9FAFB; border-color: #D5D9E0; }
.dmb-pp-btn--primary {
  flex: 2;
  background: #4f6ae8;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79,106,232,0.30);
  border-color: transparent;
}
.dmb-pp-btn--primary:hover:not(:disabled) {
  background: #3e55c9;
  box-shadow: 0 6px 18px rgba(79,106,232,0.38);
}
.dmb-pp-btn--primary:disabled {
  background: #BABFC8;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════
   BUILDER CONFIRM DIALOG — `.dmb-cf-*`
   Reusable destructive-confirm modal (currently: "Delete Widget").
   Light-first; dark override at the bottom of this block.
   ══════════════════════════════════════════════════════════════════ */
.dmb-cf-backdrop {
  position: fixed; inset: 0;
  z-index: 1200;
  background: rgba(4, 9, 17, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dmb-cf-dialog {
  width: 420px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(4, 9, 17, 0.18);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.dmb-cf-body {
  padding: 28px 28px 0;
  text-align: center;
}
.dmb-cf-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #FDECEC;
  color: #E74C3C;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.dmb-cf-title {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 700;
  color: #1F242B;
  letter-spacing: -0.2px;
}
.dmb-cf-message {
  margin: 0;
  font-size: 13px;
  color: #6A6F77;
  line-height: 1.55;
}
.dmb-cf-message strong { color: #1F242B; font-weight: 700; }

/* Mode-aware warning chip — surfaced inside the delete-widget confirm
   for Media Player widgets so the user knows what happens to the
   linked playlist / uploaded media. Two tones: info (blue, link
   semantics) and danger (red, destructive). */
.dmb-cf-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  text-align: left;
}
.dmb-cf-warning > .fa {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 2px;
}
.dmb-cf-warning__title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.35;
}
.dmb-cf-warning__body {
  font-size: 12px;
  line-height: 1.5;
}
.dmb-cf-warning--info {
  background: rgba(79,106,232,0.08);
  border-color: rgba(79,106,232,0.18);
  color: #3a4080;
}
.dmb-cf-warning--info > .fa { color: #4f6ae8; }
.dmb-cf-warning--info .dmb-cf-warning__title { color: #2a2e50; }
.dmb-cf-warning--danger {
  background: rgba(231,76,60,0.08);
  border-color: rgba(231,76,60,0.20);
  color: #8c2418;
}
.dmb-cf-warning--danger > .fa { color: #e74c3c; }
.dmb-cf-warning--danger .dmb-cf-warning__title { color: #6e1c12; }

.dmb-cf-footer {
  display: flex;
  gap: 10px;
  padding: 24px 28px 28px;
}
.dmb-cf-btn {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  border: 1px solid transparent;
}
.dmb-cf-btn--ghost {
  background: #fff;
  border-color: #E7EAEE;
  color: #373C44;
}
.dmb-cf-btn--ghost:hover { background: #F9FAFB; border-color: #D5D9E0; }
.dmb-cf-btn--danger {
  background: #E74C3C;
  color: #fff;
  box-shadow: 0 4px 12px rgba(231,76,60,0.28);
}
.dmb-cf-btn--danger:hover {
  background: #C0392B;
  box-shadow: 0 6px 16px rgba(231,76,60,0.36);
}
.dmb-cf-btn--primary {
  background: #2D7DD2;
  color: #fff;
  box-shadow: 0 4px 12px rgba(45,125,210,0.28);
}
.dmb-cf-btn--primary:hover { background: #2469B3; box-shadow: 0 6px 16px rgba(45,125,210,0.36); }
.dmb-cf-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.dmb-cf-btn i { font-size: 12px; }

/* Info-tinted icon disc (Accent palette) for non-destructive confirms — e.g.
   the Publish-Template modal. Mirrors the danger variant's shape so the two
   modals feel consistent without overloading "destructive" red. */
.dmb-cf-icon--info {
  background: rgba(45,125,210,0.12);
  color: #2D7DD2;
}

/* Comment field used inside .dmb-cf-body — labelled text input that matches
   the modal's quieter chrome (border #E0E4EA, radius 8, focus accent). */
.dmb-cf-field {
  text-align: left;
  margin-top: 16px;
}
.dmb-cf-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #2C3E50;
  margin-bottom: 6px;
}
.dmb-cf-field__hint {
  font-weight: 400;
  color: #7F8C8D;
  margin-left: 4px;
}
.dmb-cf-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #E0E4EA;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: #2C3E50;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dmb-cf-input:focus {
  outline: none;
  border-color: #2D7DD2;
  box-shadow: 0 0 0 3px rgba(45,125,210,0.15);
}

/* Dark-theme override — restore previous dark confirm look. */
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-dialog {
  background: #13141f;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-icon    { background: rgba(239,68,68,0.12); color: #ef4444; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-title   { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-message { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-message strong { color: rgba(255,255,255,0.9); }

.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-warning--info {
  background: rgba(79,106,232,0.16);
  border-color: rgba(79,106,232,0.30);
  color: rgba(255,255,255,0.7);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-warning--info > .fa { color: #8fa3f0; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-warning--info .dmb-cf-warning__title { color: rgba(255,255,255,0.92); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-warning--danger {
  background: rgba(231,76,60,0.16);
  border-color: rgba(231,76,60,0.32);
  color: rgba(255,255,255,0.72);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-warning--danger > .fa { color: #ff8a7a; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-warning--danger .dmb-cf-warning__title { color: #ffb8ad; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-btn--ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-btn--danger {
  background: #ef4444;
  box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-cf-btn--danger:hover { background: #dc2626; }

/* ══════════════════════════════════════════════════════════════════
   RESTROTV PREVIEW CHASSIS — `.dmb-pv-*`
   Wraps the live device iframe in a real-TV-looking chassis: matte
   bezel + RestroTV wordmark + green power LED + 2-piece stand. Chrome
   only — iframe URL + postMessage contract + 1920×1080 transform-scale
   math are untouched.

   Layout:
     .dmb-pv-backdrop  full-viewport scrim
       .dmb-pv-stage      column flex (chassis on top, stand below)
         .dmb-pv-dialog       matte chassis (asymmetric bezel)
           .dmb-pv-close-float    top-right
           .dmb-pv-iframe-holder  16:9 / 9:16 screen
             .dmb-pv-iframe         native 1920×1080, transform-scaled
             .dmb-pv-loader         spinner overlay
           .dmb-pv-brand-bar      bottom bezel: LED + RestroTV wordmark
         .dmb-pv-stand        column flex (neck + base)
   ══════════════════════════════════════════════════════════════════ */
.dmb-pv-backdrop {
  position: fixed; inset: 0;
  z-index: 2000;
  background: rgba(4, 9, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* Stage = chassis + stand stacked. No own sizing; sizing handled by the
   iframe-holder + chassis padding. Stand hangs below the dialog naturally. */
.dmb-pv-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55))
          drop-shadow(0 12px 28px rgba(0,0,0,0.40));
  font-family: 'Inter', system-ui, sans-serif;
}
/* TV chassis — matte solid black, asymmetric bezel (wider at the bottom
   like every real flat-panel TV). The bottom strip carries the RestroTV
   wordmark + LED so the chassis reads instantly as a branded TV unit
   rather than a generic dark frame. */
.dmb-pv-dialog {
  position: relative;
  background: #0a0a0a;
  border: 1px solid #000;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  /* Top bezel is 38px so the 30px close button at top:4px fits with 4px
     breathing room and stops poking into the screen content. Sides + bottom
     unchanged. */
  padding: 38px 22px 56px;
  display: block;
}
/* Landscape: hold the 16:9 screen first; chassis sizes around it.
   Width caps: native 1920px · viewport budget (94vw − 44px bezel sides) ·
   height-driven cap so the whole stage (chassis + 22px stand) fits 90vh:
     iframe-holder.height = width × 9/16
     chassis.height       = holder.height + 94px (38 top + 56 bottom)
     stage.height         = chassis.height + 22px (14 neck + 8 base)
     stage.height ≤ 90vh  → width ≤ (90vh − 116px) × 16/9 */
.dmb-pv-stage--landscape .dmb-pv-iframe-holder {
  width: min(1920px, calc(94vw - 44px), calc((90vh - 116px) * 16 / 9));
  aspect-ratio: 16 / 9;
}
/* Portrait: same budgets, flipped aspect. */
.dmb-pv-stage--portrait .dmb-pv-iframe-holder {
  width: min(1080px, calc(94vw - 44px), calc((90vh - 116px) * 9 / 16));
  aspect-ratio: 9 / 16;
}
/* Floating close button — sits on the top bezel like a remote-control
   button. Contrast bumped from prior .06 tint → .14 fill + .28 border so
   the affordance is unambiguously visible on matte black without losing
   the "button-on-bezel" premium feel. */
.dmb-pv-close-float {
  /* Anchored to .dmb-pv-dialog (chassis, position: relative).
     Half-overlaps the TV's top-right corner — clearly attached to the TV
     but visually distinct from the bezel. Half above + half on the chassis
     reads unambiguously as the "close this TV" affordance. */
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.65);
  color: rgba(255,255,255,0.95);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.dmb-pv-close-float:hover {
  background: rgba(239,68,68,0.75);
  border-color: rgba(239,68,68,0.90);
  color: #fff;
}
.dmb-pv-close-float:active { transform: scale(0.94); }
.dmb-pv-close-float:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.35), 0 1px 3px rgba(0,0,0,0.40);
}
/* iframe holder = the actual "screen". `container-type: size` powers the
   transform-scale math on the iframe (native 1920×1080 → fit-to-container).
   The aspect-ratio rule lives on .dmb-pv-stage--{landscape|portrait}
   selectors above. */
.dmb-pv-iframe-holder {
  position: relative;
  overflow: hidden;
  background: #000;
  container-type: size;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 0 24px rgba(255, 255, 255, 0.025);
}
/* When previewIframeReady is false, hide the iframe pixels entirely so the
   prior template can't paint through even for one frame between modal-show
   and the loader's ng-if compile. The loader (z-index:2, background:#000)
   still renders on top; this rule is a belt-and-braces against any digest
   timing where the loader hasn't mounted yet. */
.dmb-pv-iframe-holder.is-loading .dmb-pv-iframe {
  visibility: hidden;
}
.dmb-pv-iframe {
  position: absolute;
  top: 50%; left: 50%;
  border: none;
  background: #000;
  transform-origin: center center;
  display: block;
}
/* Native 1920×1080 / 1080×1920; scale by whichever axis is limiting. */
.dmb-pv-stage--landscape .dmb-pv-iframe {
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(min(calc(100cqw / 1920px), calc(100cqh / 1080px)));
}
.dmb-pv-stage--portrait .dmb-pv-iframe {
  width: 1080px;
  height: 1920px;
  transform: translate(-50%, -50%) scale(min(calc(100cqw / 1080px), calc(100cqh / 1920px)));
}
/* Loader overlay — covers the blank/loading window between iframe reload and React's READY. */
.dmb-pv-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  color: #c5c8cf;
  font-size: 14px;
  letter-spacing: 0.2px;
  z-index: 2;
}
.dmb-pv-loader .fa-spinner { font-size: 28px; color: #8ab4f8; }

/* ─── In-bezel "missing data" strip ─────────────────────────────────────
   Slim warning bar across the top of the screen surface. Anchored to
   .dmb-pv-iframe-holder (position: absolute) so it scales with the TV
   chassis. Single line when possible, wraps gracefully on small previews. */
.dmb-pv-warn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  /* Warm cream background + amber accent line at the bottom — reads as a
     status strip, not a card stuck on the screen. */
  background: linear-gradient(180deg, #FEF6E0 0%, #FCEEC8 100%);
  border-bottom: 2px solid #F39C12;
  color: #2C3E50;
  font-size: 13px;
  line-height: 1.3;
  z-index: 3;
  /* Slide down from above the bezel so the eye notices it. */
  animation: dmb-pv-warn-slide 220ms ease-out;
}
@keyframes dmb-pv-warn-slide {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.dmb-pv-warn__icon {
  color: #C77F0B;
  font-size: 15px;
  flex-shrink: 0;
}
.dmb-pv-warn__title {
  font-weight: 600;
  flex-shrink: 0;
}
.dmb-pv-warn__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.dmb-pv-warn__chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #F39C12;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.dmb-pv-warn__hint {
  flex: 1;
  min-width: 0;
  color: #7F8C8D;
  font-size: 12px;
}
.dmb-pv-warn__close {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  color: #7F8C8D;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.dmb-pv-warn__close:hover { color: #2C3E50; background: rgba(0, 0, 0, 0.06); }
.dmb-pv-warn__close:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 2px; }


/* Brand bar lives on the wider bottom bezel. Subtle vertical fade so the
   wordmark + LED don't look like decals stuck on flat plastic. */
.dmb-pv-brand-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 85%);
  pointer-events: none;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.dmb-pv-wordmark {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  user-select: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
.dmb-pv-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27AE60;
  box-shadow: 0 0 8px rgba(39,174,96,0.65);
  animation: dmb-pv-led-pulse 2.6s ease-in-out infinite;
}
@keyframes dmb-pv-led-pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 6px  rgba(39,174,96,0.50); }
  50%      { opacity: 0.65; box-shadow: 0 0 11px rgba(39,174,96,0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .dmb-pv-led { animation: none; }
}

/* Two-piece stand hangs below the chassis: angled neck → flat base.
   Width-tapered neck via clip-path gives the silhouette of a real
   pedestal mount without introducing stacking-context surprises. */
.dmb-pv-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.dmb-pv-stand-neck {
  width: 18px;
  height: 14px;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.dmb-pv-stand-base {
  width: 220px;
  height: 8px;
  background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 14px 22px -10px rgba(0,0,0,0.55);
}

/* Dark theme — chassis already matte black in base rule; intensify the
   ambient drop shadow so the TV pops against the dark builder shell. */
.tb-fullscreen-modal[data-theme="dark"] .dmb-pv-stage {
  filter: drop-shadow(0 48px 96px rgba(0,0,0,0.85))
          drop-shadow(0 12px 24px rgba(0,0,0,0.55));
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pv-close-float {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pv-close-float:hover {
  background: rgba(255,80,80,0.32);
  border-color: rgba(255,80,80,0.65);
  color: #ffd6d6;
}

/* ── Dark-theme override block (for .dmb-pp-* preview picker) ── */
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-dialog {
  background: #13141f;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.8);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-header,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-column__head,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-column,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-summary,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-footer {
  border-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-header__title { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-header__brand,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-header__sub,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-loading,
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-item { color: rgba(255,255,255,0.7); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-close {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-close:hover {
  background: rgba(255,80,80,0.12); color: #ff5050; border-color: rgba(255,80,80,0.3);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-search {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-search::placeholder { color: rgba(255,255,255,0.3); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-search-icon       { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-step--inactive    { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-label-text--active   { color: rgba(255,255,255,0.6); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-label-text--inactive { color: rgba(255,255,255,0.25); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-summary {
  background: rgba(255,255,255,0.02);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-summary__hint { color: rgba(255,255,255,0.3); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-summary__ready { color: #5ecf85; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-crumb--primary {
  background: rgba(79,106,232,0.15); border-color: rgba(79,106,232,0.30); color: #8ca5f8;
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-crumb--success {
  background: rgba(39,174,96,0.15); border-color: rgba(39,174,96,0.30); color: #5ecf85;
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-crumb-sep  { color: rgba(255,255,255,0.2); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-empty      { color: rgba(255,255,255,0.3); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-empty__icon { color: rgba(255,255,255,0.12); }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-footer     { background: #181928; }
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-btn--ghost {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
}
.tb-fullscreen-modal[data-theme="dark"] .dmb-pp-btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* ══════════════════════════════════════════════════════════════════
   LIGHT-MODE BUILDER CHROME
   Reference: DMB/cx-management/template-editor.html
   Adds reference-style polish on top of the base .tb-* layout — canvas
   dotted grid, widget-palette, pill props-panel tabs, blue save, etc.
   All scoped to [data-theme="light"] so dark mode is unaffected.
   ══════════════════════════════════════════════════════════════════ */

/* ─ Builder root paint ─ */
.tb-fullscreen-modal[data-theme="light"] {
  background: var(--tb-bg) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-fullscreen-inner { background: var(--tb-bg); }

/* ─ Top bar (reference: te-topbar, 52px) ─ */
.tb-fullscreen-modal[data-theme="light"] .tb-topbar {
  background: #fff !important;
  border-bottom: 1px solid #E7EAEE !important;
  padding: 0 20px !important;
  height: 52px;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 3px rgba(4,9,17,.04);
}
/* Template name is now a read-only <span>; no focus affordance needed. */
.tb-fullscreen-modal[data-theme="light"] .tb-topbar-name {
  color: #040911 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-topbar-dirty {
  background: #FFF9EF !important;
  color: #996200 !important;
  border: 1px solid rgba(255,200,96,.3);
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-topbar-dirty i { color: #996200 !important; }

/* Topbar buttons (back, preview, orientation, history, duration) */
.tb-fullscreen-modal[data-theme="light"] .tb-topbar .btn-default,
.tb-fullscreen-modal[data-theme="light"] .tb-topbar .tb-history-btn {
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  color: #6A6F77 !important;
  border-radius: 8px !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-topbar .btn-default:hover,
.tb-fullscreen-modal[data-theme="light"] .tb-topbar .tb-history-btn:hover {
  background: #F9FAFB !important;
  border-color: #D5D9E0 !important;
  color: #040911 !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-topbar .btn-default:disabled,
.tb-fullscreen-modal[data-theme="light"] .tb-topbar .tb-history-btn:disabled { opacity: .4; }

.tb-fullscreen-modal[data-theme="light"] .tb-history-badge {
  background: #4185F4 !important;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
}

/* Duration field */
.tb-fullscreen-modal[data-theme="light"] .tb-duration-field {
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  border-radius: 8px !important;
  height: 34px;
}
.tb-fullscreen-modal[data-theme="light"] .tb-duration-field i       { color: #9DA2AA !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-duration-field input   { color: #040911 !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-duration-field span    { color: #6A6F77 !important; }

/* Save button — primary blue (reference: te-save) */
.tb-fullscreen-modal[data-theme="light"] .tb-save-btn {
  background: #10B48F !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 34px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(16,180,143,.3) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-save-btn:hover:not(:disabled) {
  background: #00815C !important;
  box-shadow: 0 4px 12px rgba(16,180,143,.4) !important;
}

/* ─ Config bar — full-width band matching the dark-theme structure.
   Earlier iterations turned this into a rounded floating card; reverted
   to a flush band so the layout structure is 1:1 with dark mode. */
.tb-fullscreen-modal[data-theme="light"] .tb-config-bar {
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid #E7EAEE !important;
  border-radius: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-section-label {
  color: #9DA2AA !important;
  letter-spacing: 0.6px;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-chip {
  color: #373C44;
  border-radius: 9999px;
}

/* ─── Item picker (menu/offer widgets) — light theme fixes ───
   Base rules target the dark widget-editor panel (#13141f). In light
   mode the picker lives inside the stepper modal with a white surface,
   so the white/translucent colors on checkbox icons, image borders,
   inline-styled "No image" placeholder, selected-item category pills,
   and the Remove cross button all disappear. Re-tuned with dark tones
   and !important to beat inline style= attributes. */
.tb-fullscreen-modal[data-theme="light"] .we-item-check { color: #9DA2AA !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-row-selected .we-item-check { color: #4f6ae8 !important; }

.tb-fullscreen-modal[data-theme="light"] .we-item-row { border-bottom-color: #E7EAEE !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-row:hover { background: #F4F6F9 !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-row-selected { background: rgba(79,106,232,0.10) !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-row-selected:hover { background: rgba(79,106,232,0.16) !important; }

.tb-fullscreen-modal[data-theme="light"] .we-item-name  { color: #040911 !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-meta  { color: #6A6F77 !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-price { color: #373C44 !important; }
.tb-fullscreen-modal[data-theme="light"] .we-item-img   { border-color: #E7EAEE !important; }

/* Inline-styled "No image" placeholder (ng-if branch when no image) */
.tb-fullscreen-modal[data-theme="light"] .we-item-row [title="No image"] {
  background: #F4F6F9 !important;
  border-color: #D5D9E0 !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-item-row [title="No image"] .fa-image {
  color: #9DA2AA !important;
}

/* Selected-item rows (in wrapper list below the picker) use inline
   style= on the category pill + Remove button — target via title attr. */
.tb-fullscreen-modal[data-theme="light"] .we-panel [title="Remove"],
.tb-fullscreen-modal[data-theme="light"] .stepper-body [title="Remove"],
.tb-fullscreen-modal[data-theme="light"] .stepper-modal [title="Remove"] {
  color: #9DA2AA !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-panel [title="Remove"]:hover,
.tb-fullscreen-modal[data-theme="light"] .stepper-body [title="Remove"]:hover,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal [title="Remove"]:hover {
  color: #E74C3C !important;
}

/* ─── Stepper "Next" button — themed to match the builder accent ───
   Replaces Bootstrap's .btn-primary default (dated blue #337ab7) with
   the builder's accent blue #4185F4. Semantically distinct from the
   final "Add to Canvas" green so users can tell progress from commit. */
.stepper-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  height: 36px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #4185F4;
  box-shadow: 0 2px 8px rgba(65,133,244,0.25);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.stepper-next-btn:hover:not(:disabled) {
  background: #2E6CDB;
  box-shadow: 0 3px 12px rgba(65,133,244,0.35);
}
.stepper-next-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(65,133,244,0.25);
}
.stepper-next-btn:disabled {
  background: #BABFC8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.stepper-next-btn i { font-size: 11px; }

.tb-fullscreen-modal[data-theme="dark"] .stepper-next-btn:disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}

/* ─── Stepper "Back" button — ghost secondary ─── */
.stepper-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  height: 36px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #6A6F77;
  background: #fff;
  border: 1px solid #E7EAEE;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stepper-back-btn:hover {
  background: #F9FAFB;
  border-color: #D5D9E0;
  color: #040911;
}
.stepper-back-btn i { font-size: 11px; }
.tb-fullscreen-modal[data-theme="dark"] .stepper-back-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.tb-fullscreen-modal[data-theme="dark"] .stepper-back-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}

/* ─── Stepper "Add to Canvas" commit button ─── */
.stepper-commit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  height: 36px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #10B48F;
  box-shadow: 0 2px 8px rgba(16,180,143,0.25);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.stepper-commit-btn:hover:not(:disabled) {
  background: #00815C;
  box-shadow: 0 3px 12px rgba(16,180,143,0.35);
}
.stepper-commit-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 4px rgba(16,180,143,0.25); }
.stepper-commit-btn:disabled {
  background: #BABFC8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.stepper-commit-btn i { font-size: 11px; }

/* ─── Selected-items list (stepper step 2) ─── */
.we-selected-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.we-selected-header__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6A6F77;
}
.we-selected-header__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #4185F4;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.we-selected-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px;
  border: 1px dashed #D5D9E0;
  border-radius: 10px;
  color: #9DA2AA;
  font-size: 12px;
  text-align: center;
}
.we-selected-empty i { font-size: 22px; color: #BABFC8; }

.we-selected-list {
  border: 1px solid #E7EAEE;
  border-radius: 10px;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
}
.we-selected-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #F1F2F5;
  transition: background 0.1s;
}
.we-selected-row:last-child { border-bottom: none; }
.we-selected-row:hover { background: #F9FAFB; }

.we-selected-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #E7EAEE;
}
.we-selected-thumb--empty {
  background: #F4F6F9;
  border: 1px dashed #D5D9E0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.we-selected-thumb--empty i { font-size: 13px; color: #9DA2AA; }

.we-selected-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #040911;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.we-selected-num { color: #9DA2AA; font-weight: 400; }

.we-selected-category {
  padding: 3px 10px;
  border-radius: 999px;
  background: #EEF1F5;
  color: #6A6F77;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.we-selected-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #9DA2AA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
  font-size: 12px;
}
.we-selected-remove:hover {
  background: #FDECEA;
  color: #E74C3C;
}

/* Dark-mode palette for the selected list */
.tb-fullscreen-modal[data-theme="dark"] .we-selected-header__title { color: rgba(255,255,255,0.45); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-empty {
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-empty i { color: rgba(255,255,255,0.25); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-list {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-row { border-bottom-color: rgba(255,255,255,0.04); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-row:hover { background: rgba(255,255,255,0.04); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-name { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-num  { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-thumb { border-color: rgba(255,255,255,0.1); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-thumb--empty {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-thumb--empty i { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-category {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-remove { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-remove:hover {
  background: rgba(231,76,60,0.15);
  color: #FF6B5C;
}

/* Sort-order select (the 1/2/3 rank badge on each selected item). Base
   rule uses white translucent on dark; retune for light. Forced over
   any .btn/.form-control style that might leak in. */
.tb-fullscreen-modal[data-theme="light"] .we-sort-select {
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  color: #373C44 !important;
  font-weight: 700 !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-sort-select:focus {
  border-color: #4185F4 !important;
  color: #040911 !important;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.12) !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-sort-select option {
  background: #fff !important;
  color: #040911 !important;
}

/* ════════════════════════════════════════════════════════════
   STEPPER MODAL — refined header & progress indicator
   Aligns the modal chrome to the ideal "Add Rate Card" mockup:
   gradient icon tile · big bold title · soft-pink close button ·
   numbered two-step progress indicator with connecting line.
   ════════════════════════════════════════════════════════════ */

/* Header brand (icon + title) */
.stepper-header__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stepper-header__title {
  font-size: 18px;
  font-weight: 700;
  color: #040911;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 48px gradient tile — purple→blue, white inner icon */
.stepper-header__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6F4FE0 0%, #4185F4 100%);
  box-shadow: 0 4px 14px rgba(93,98,224,0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.stepper-header__icon i { font-size: 20px; color: #fff; }

/* Soft-pink close button */
.stepper-header__close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #FDECEA;
  color: #E74C3C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.stepper-header__close:hover { background: #FBD7D2; color: #C0392B; }

/* ─── Two-step progress indicator ─────────────────────────────────
   Vertical rhythm: 16px top + 20px bottom gives the strip its own
   visual weight between the header and the body content. Horizontal
   padding (32px) aligns the first step's number with the body's
   left gutter so the step indicator and "CATEGORIES" sit on the
   same vertical axis. */
.stepper-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px 20px;
  border-bottom: 1px solid #EEF1F5;
  margin-bottom: 0;
}
.stepper-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.stepper-progress__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  color: #9DA2AA;
  border: 1.5px solid #D5D9E0;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.stepper-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: #9DA2AA;
  letter-spacing: -0.1px;
  white-space: nowrap;
  transition: color 0.2s;
}
/* Connecting line between steps — 2px rule, inset slightly from both
   ends so it visually "starts after" the label and "ends before" the
   next number instead of touching edges directly. */
.stepper-progress__line {
  flex: 1;
  height: 2px;
  min-width: 40px;
  border-radius: 2px;
  background: #E7EAEE;
  margin: 0 4px;
  transition: background 0.25s;
}
/* Active step (current). Bumped to !important + descendant selector to win
   against any Bootstrap / .cxm- cascade that paints span color globally. */
.stepper-progress .stepper-progress__step--active .stepper-progress__num {
  background: #4185F4 !important;
  color: #fff !important;
  border-color: #4185F4 !important;
  box-shadow: 0 0 0 4px rgba(65,133,244,0.12);
}
.stepper-progress .stepper-progress__step--active .stepper-progress__label { color: #4185F4 !important; }
/* Done step (completed) */
.stepper-progress .stepper-progress__step--done .stepper-progress__num {
  background: #4185F4 !important;
  color: #fff !important;
  border-color: #4185F4 !important;
}
.stepper-progress .stepper-progress__step--done .stepper-progress__label { color: #4185F4 !important; }
.stepper-progress__line--done { background: #4185F4; }

/* Belt-and-braces — catch the stepper number text regardless of whether the
   modal is light or dark, regardless of whether --active or --done is on,
   and regardless of any nested span overrides. The number circle is ALWAYS
   either the inactive grey state (default rule above) or one of the two
   "current/past" states — both of which need white text on the blue fill.
   This rule wins on specificity AND on cascade order. */
.stepper-progress__step--active > .stepper-progress__num,
.stepper-progress__step--done > .stepper-progress__num,
.stepper-progress__step--active > .stepper-progress__num *,
.stepper-progress__step--done > .stepper-progress__num * {
  color: #fff !important;
}

/* Dark-mode counterparts */
.tb-fullscreen-modal[data-theme="dark"] .stepper-header__title { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .stepper-header__close {
  background: rgba(231,76,60,0.18);
  color: #FF8A7A;
}
.tb-fullscreen-modal[data-theme="dark"] .stepper-header__close:hover {
  background: rgba(231,76,60,0.28);
  color: #FFB1A6;
}
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress { border-bottom-color: rgba(255,255,255,0.06); }
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__num {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.12);
}
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__label { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__line { background: rgba(255,255,255,0.08); }
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__step--active .stepper-progress__num {
  background: #5B9BF7; border-color: #5B9BF7; color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__step--active .stepper-progress__label { color: #5B9BF7; }
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__step--done .stepper-progress__num {
  background: #5B9BF7; border-color: #5B9BF7; color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__step--done .stepper-progress__label { color: #5B9BF7; }
.tb-fullscreen-modal[data-theme="dark"] .stepper-progress__line--done { background: #5B9BF7; }

/* ════════════════════════════════════════════════════════════
   OFFER FLOW — single-step picker with toggles + list + footer
   Replaces a dense wall of inline styles with a proper class
   system. Base rules target the LIGHT surface (stepper modal
   body is white in light mode); dark-mode overrides at EOF.
   ════════════════════════════════════════════════════════════ */
.we-offer-flow {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: -24px -24px 0;   /* absorb stepper-body padding for flush edges */
}

/* Toolbar — search + toggles + auto-rotate, single row */
.we-offer-toolbar {
  padding: 14px 20px 12px;
  border-bottom: 1px solid #EEF1F5;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.we-offer-search-wrap { position: relative; }
.we-offer-search-icon {
  position: absolute;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9DA2AA;
  pointer-events: none;
}
.we-offer-search {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #040911;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.we-offer-search:focus {
  border-color: #4185F4;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.12);
}
.we-offer-search::placeholder { color: #9DA2AA; }

/* Toggle row */
.we-offer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.we-offer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #373C44;
  cursor: pointer;
  user-select: none;
}
.we-offer-toggle:hover { color: #040911; }

/* Vertical divider between display toggles and auto-rotate */
.we-offer-sep {
  width: 1px;
  height: 20px;
  background: #E7EAEE;
}

/* Auto-rotate interval input */
.we-offer-interval {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #fff;
}
.we-offer-interval__input {
  width: 38px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #040911;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.we-offer-interval__input::-webkit-outer-spin-button,
.we-offer-interval__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.we-offer-interval > span {
  font-size: 11px;
  font-weight: 600;
  color: #9DA2AA;
}

/* Loading + empty states */
.we-offer-loading,
.we-offer-empty {
  text-align: center;
  padding: 44px 20px;
  color: #9DA2AA;
  font-size: 12px;
  flex-shrink: 0;
}
.we-offer-loading i { font-size: 20px; color: #BABFC8; }
.we-offer-loading p { margin: 10px 0 0; }
.we-offer-empty i { font-size: 24px; display: block; margin-bottom: 8px; color: #BABFC8; }
.we-offer-empty p { margin: 0; }

/* Offer list */
.we-offer-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Offer row — card with checkbox + body */
.we-offer-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #E7EAEE;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.we-offer-row:hover {
  background: #F9FAFB;
  border-color: #D5D9E0;
}
.we-offer-row--selected {
  background: #EEF3FF;
  border-color: #4185F4;
  box-shadow: 0 1px 3px rgba(65,133,244,0.12);
}
.we-offer-row--selected:hover { background: #E5EDFE; }
.we-offer-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.18);
}

/* Checkbox — 20px square, blue fill when selected */
.we-offer-check {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid #D5D9E0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.15s, border-color 0.15s;
}
.we-offer-check--on {
  background: #4185F4;
  border-color: #4185F4;
}
.we-offer-check i {
  font-size: 11px;
  color: #fff;
}

/* Offer body */
.we-offer-body { flex: 1; min-width: 0; }
.we-offer-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.we-offer-name {
  font-size: 14px;
  font-weight: 700;
  color: #040911;
  letter-spacing: -0.1px;
}

/* Discount badge — soft green pill */
.we-offer-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #166534;
  letter-spacing: 0.3px;
}

/* Meta row (icons) */
.we-offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
.we-offer-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #6A6F77;
}
.we-offer-meta__item i { font-size: 9px; color: #9DA2AA; }

/* BUY / GET items line */
.we-offer-items {
  font-size: 11px;
  color: #6A6F77;
  margin-top: 3px;
  line-height: 1.4;
}
.we-offer-items strong {
  font-weight: 700;
  color: #373C44;
  margin-right: 3px;
}
.we-offer-items--get strong { color: #166534; }
.we-offer-items--get        { color: #15803D; }

/* Validity line */
.we-offer-validity {
  font-size: 11px;
  color: #9DA2AA;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.we-offer-validity i { font-size: 10px; }

/* Footer — selected count + rotate hint */
.we-offer-footer-bar {
  padding: 12px 20px;
  border-top: 1px solid #EEF1F5;
  background: #F9FAFB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.we-offer-count {
  font-size: 12px;
  font-weight: 600;
  color: #373C44;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.we-offer-count i { font-size: 11px; color: #4185F4; }
.we-offer-rotate-hint {
  font-size: 11px;
  font-weight: 500;
  color: #6A6F77;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.we-offer-rotate-hint i { font-size: 10px; color: #22c55e; }

/* ─── Dark-mode overrides ─── */
.tb-fullscreen-modal[data-theme="dark"] .we-offer-toolbar {
  background: #13141f;
  border-bottom-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-search {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-search::placeholder { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-search-icon { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-toggle { color: rgba(255,255,255,0.75); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-toggle:hover { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-sep { background: rgba(255,255,255,0.1); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-interval {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-interval__input { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-interval > span { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-loading,
.tb-fullscreen-modal[data-theme="dark"] .we-offer-empty { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-row {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-row--selected {
  background: rgba(79,106,232,0.15);
  border-color: rgba(79,106,232,0.5);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-row--selected:hover {
  background: rgba(79,106,232,0.22);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-check {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-check--on {
  background: #4f6ae8;
  border-color: #4f6ae8;
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-name { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-badge {
  background: rgba(34,197,94,0.18);
  color: #4ADE80;
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-meta__item { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-meta__item i { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-items { color: rgba(255,255,255,0.5); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-items strong { color: rgba(255,255,255,0.7); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-items--get        { color: rgba(74,222,128,0.85); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-items--get strong { color: #4ADE80; }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-validity { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-footer-bar {
  background: rgba(255,255,255,0.02);
  border-top-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .we-offer-count       { color: rgba(255,255,255,0.75); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-count i     { color: #5B9BF7; }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-rotate-hint { color: rgba(255,255,255,0.45); }
.tb-fullscreen-modal[data-theme="dark"] .we-offer-rotate-hint i { color: #4ADE80; }

/* ════════════════════════════════════════════════════════════
   STEPPER MENU PICKER — light-theme retune (categories + items)
   Base rules use white-on-dark colors; in light mode the same
   selectors need dark text + light surfaces + accent-blue active.
   ════════════════════════════════════════════════════════════ */

/* Layout panes */
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-left  { border-right-color: #EEF1F5 !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-right-header { border-bottom-color: #EEF1F5 !important; }

/* Right header — title + count (inline white styles in markup) */
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-right-header > div > div:first-child {
  color: #040911 !important;
  font-size: 18px !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-right-header > div > div + div {
  color: #6A6F77 !important;
  font-size: 12px !important;
}

/* Category list — pill style with bold text + soft-blue active */
.tb-fullscreen-modal[data-theme="light"] .stepper-cat-pill {
  color: #373C44 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-cat-pill:hover {
  background: #F4F6F9 !important;
  color: #040911 !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-cat-pill-active {
  background: #EEF3FF !important;
  color: #4185F4 !important;
  border-left: 3px solid #4185F4 !important;
  padding-left: 11px !important;
}

/* Count badge — grey by default, bold blue when active */
.tb-fullscreen-modal[data-theme="light"] .stepper-cat-pill-count {
  background: #EEF1F5 !important;
  color: #6A6F77 !important;
  font-weight: 700 !important;
  min-width: 26px !important;
  text-align: center !important;
  padding: 3px 9px !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-cat-pill-active .stepper-cat-pill-count {
  background: #4185F4 !important;
  color: #fff !important;
}

/* Selected-summary bar (bottom of category list) — soft green tile */
.tb-fullscreen-modal[data-theme="light"] .stepper-selected-bar {
  background: #ECFDF5 !important;
  border-color: #BBF7D0 !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-selected-count { color: #059669 !important; }
.tb-fullscreen-modal[data-theme="light"] .stepper-selected-label { color: #047857 !important; }

/* Select All button — soft blue pill matching the ideal mockup */
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-right-header .we-add-btn {
  background: #EEF3FF !important;
  color: #4185F4 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-right-header .we-add-btn:hover {
  background: #DCE7FE !important;
}

/* Stepper item-search bar — definitive rules moved to end of this file
   (search "DEFINITIVE: stepper-menu-search"). Earlier attempts at this
   selector lost the cascade silently to enterprise.css load-order. */

/* Empty-state ("No categories found" / loading spinner caption) */
.tb-fullscreen-modal[data-theme="light"] .stepper-menu-left-list > div[ng-if*="categories.length == 0"] {
  color: #9DA2AA !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-spec {
  background: #F9FAFB !important;
  border: 1px solid #E7EAEE !important;
  color: #6A6F77 !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-sep {
  background: #E7EAEE !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-input,
.tb-fullscreen-modal[data-theme="light"] .tb-cb-select {
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  color: #373C44 !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-input:focus,
.tb-fullscreen-modal[data-theme="light"] .tb-cb-select:focus {
  border-color: #4185F4 !important;
  box-shadow: 0 0 0 3px rgba(65,133,244,.1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-cb-field label {
  color: #9DA2AA !important;
}

/* ─ Layout & panels (left palette + center + right props) ─ */
.tb-fullscreen-modal[data-theme="light"] .tb-layout {
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  box-shadow: 0 1px 3px rgba(4,9,17,.04);
}

/* Left palette (reference: te-sidebar) */
.tb-fullscreen-modal[data-theme="light"] .tb-lp,
.tb-fullscreen-modal[data-theme="light"] .tb-palette-simple {
  background: #fff !important;
  border-right: 1px solid #E7EAEE !important;
  color: #040911 !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-palette-title {
  color: #9DA2AA !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-palette-search input {
  background: #F9FAFB !important;
  border: 1px solid #E7EAEE !important;
  color: #373C44 !important;
  height: 34px !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-palette-search input:focus {
  border-color: #4185F4 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(65,133,244,.1) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-palette-search input::placeholder { color: #9DA2AA !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-palette-search i { color: #9DA2AA !important; }
.tb-fullscreen-modal[data-theme="light"] .tb-palette-empty { color: #9DA2AA !important; }

/* Widget tiles in palette (reference: te-widget-btn) */
.tb-fullscreen-modal[data-theme="light"] .tb-simple-card {
  background: #F9FAFB !important;
  border: 1px solid #E7EAEE !important;
  color: #373C44 !important;
  border-radius: 8px !important;
  transition: all .15s;
}
.tb-fullscreen-modal[data-theme="light"] .tb-simple-card:hover {
  background: #ECF3FE !important;
  border-color: #A0C2F9 !important;
  color: #0E52C1 !important;
  transform: translateY(-1px);
}
.tb-fullscreen-modal[data-theme="light"] .tb-simple-card-title { color: inherit !important; }

/* Canvas wrap — soft grey bg with radial dot grid (reference: te-canvas-wrap).
   Uses #ECEEF2 (not #F9FAFB) so it reads as distinctly greyer than the white
   palette sidebar — mirrors the dark theme's palette-vs-canvas contrast. */
.tb-fullscreen-modal[data-theme="light"] .tb-canvas-wrap {
  background:
    radial-gradient(circle at 50% 50%, #D5D9E0 1px, transparent 1.5px) 0 0 / 16px 16px,
    #ECEEF2;
}

/* Canvas proper — stays dark by design (it represents the device screen) */
.tb-fullscreen-modal[data-theme="light"] .tb-canvas {
  box-shadow: 0 1px 3px rgba(4,9,17,.06), 0 8px 24px rgba(4,9,17,.12);
  border: 1px solid #E7EAEE;
}

/* Grid overlay (when editing) — mirrors the dark-theme tile-grid treatment so
   cells read as distinct rounded tiles with comparable optical contrast on a
   white canvas. The 4px canvas gap separates cells; fill + border give each
   cell its tile silhouette; inset shadow adds a subtle lift so the grid pops
   like the dark version.

   Perceptual match — dark mode produces ~17-unit contrast between cell fill
   and border on its #1f242e canvas; on white we need slate at 0.05 fill +
   0.22 border to land at the same visual weight (anything weaker dissolves
   into the canvas backdrop). */
.tb-fullscreen-modal[data-theme="light"] .tb-grid-overlay .tb-grid-cell {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* Widget selection + resize handles (reference: te-widget-placed).
   `.tb-rh` is the edge HIT AREA wrapper (spans ~76% of each edge) — must
   stay transparent. Only the inner `.tb-rh-bar` (the visible pill grip) and
   the corner dots get the blue paint. An earlier rule painted `.tb-rh`
   itself solid blue, producing giant full-edge bars across the widget. */
.tb-fullscreen-modal[data-theme="light"] .tb-widget-selected .tb-rh-bar,
.tb-fullscreen-modal[data-theme="light"] .tb-widget-selected .tb-rh-bar-v {
  background: #4185F4 !important;
  box-shadow: 0 1px 3px rgba(65,133,244,.35) !important;
}
.tb-fullscreen-modal[data-theme="light"] .tb-widget-selected .tb-rh-corner {
  background: #fff !important;
  border: 2px solid #4185F4 !important;
  box-shadow: 0 1px 4px rgba(65,133,244,.35) !important;
}

/* Canvas empty state — dark glyph on the light canvas surface. */
.tb-fullscreen-modal[data-theme="light"] .tb-canvas-empty { color: #9DA2AA; }
.tb-fullscreen-modal[data-theme="light"] .tb-canvas-empty i {
  background: #F1F2F5;
  border: 2px dashed #BABFC8;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #9DA2AA;
}

/* Right properties panel (reference: te-props) */
.tb-fullscreen-modal[data-theme="light"] .tb-rp,
.tb-fullscreen-modal[data-theme="light"] .tb-right-panel {
  background: #fff !important;
  border-left: 1px solid #E7EAEE !important;
  color: #040911 !important;
  box-shadow: -4px 0 12px -2px rgba(4,9,17,.04);
}

/* Row cards inside props panel */
.tb-fullscreen-modal[data-theme="light"] .tb-row-card,
.tb-fullscreen-modal[data-theme="light"] .we-scroll-card {
  background: #F9FAFB !important;
  border: 1px solid #E7EAEE !important;
  color: #040911 !important;
}

/* Segmented control (direction toggle, alignment buttons) */
.tb-fullscreen-modal[data-theme="light"] .we-seg {
  background: #F1F2F5 !important;
  border-color: #E7EAEE !important;
}
.tb-fullscreen-modal[data-theme="light"] .we-seg__btn { color: #6A6F77 !important; }
.tb-fullscreen-modal[data-theme="light"] .we-seg__btn:hover { color: #040911 !important; }
.tb-fullscreen-modal[data-theme="light"] .we-seg__btn--active {
  background: #4185F4 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(65,133,244,.3);
}

/* Stepper / preview picker modals — lift from dark to light surfaces */
.tb-fullscreen-modal[data-theme="light"] .stepper-backdrop {
  background: rgba(4,9,17,.45) !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-modal,
.tb-fullscreen-modal[data-theme="light"] .stepper-body,
.tb-fullscreen-modal[data-theme="light"] .stepper-header,
.tb-fullscreen-modal[data-theme="light"] .stepper-footer {
  background: #fff !important;
  border-color: #E7EAEE !important;
}
/* .dmb-pp-* rules are fully owned by the canonical PREVIEW DEPLOYMENT PICKER
   block higher up (around line 494). Removed the competing `!important`
   overrides that were clobbering the selected-item state with a soft-blue
   instead of the vivid-blue from the reference mockup. `.dmb-pp-box` class
   is dead (markup doesn't use it anymore). */

/* Stepper inputs — override the dark input block from earlier */
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="text"],
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="number"],
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="text"],
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="number"] {
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid #E7EAEE !important;
  color: #040911 !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input::placeholder {
  color: #9DA2AA !important;
}
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input:focus {
  background: #fff !important;
  border-color: #4185F4 !important;
  box-shadow: 0 0 0 3px rgba(65,133,244,.1) !important;
}

/* Coach tooltips (onboarding spotlights) */
.tb-fullscreen-modal[data-theme="light"] .coach-bubble {
  background: #fff !important;
  color: #040911 !important;
  border: 1px solid #E7EAEE !important;
  box-shadow: 0 12px 32px -4px rgba(4,9,17,.18), 0 4px 8px -2px rgba(4,9,17,.08);
}
.tb-fullscreen-modal[data-theme="light"] .coach-title {
  color: #040911 !important;
}
.tb-fullscreen-modal[data-theme="light"] .coach-desc {
  color: #6A6F77 !important;
}

/* Theme toggle button (sun/moon) */
.tb-fullscreen-modal[data-theme="light"] .tb-theme-toggle {
  background: #fff;
  border: 1px solid #E7EAEE;
  color: #6A6F77;
}
.tb-fullscreen-modal[data-theme="light"] .tb-theme-toggle:hover {
  background: #F9FAFB;
  color: #040911;
  border-color: #D5D9E0;
}

/* ── Zone hint state variants ──────────────────────────────────────
   Base .tb-zone__hint (idle) fades in on hover — muted, unobtrusive.
   .tb-zone__hint--active (selected) is always visible, accent-colored,
   so it reads as a clear next-step instruction.                       */
.tb-zone__hint--active {
  color: var(--tb-accent, #4f6ae8) !important;
  font-weight: 600;
  opacity: 1 !important;
  letter-spacing: 0.01em;
}
.tb-zone__hint--active .fa {
  margin-right: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STEPPER MODAL — light-theme inputs (DEFENSIVE)
   ─────────────────────────────────────────────────────────────────────────
   Why this block exists:
   Earlier rules in this file paint stepper inputs via `var(--tb-input-bg)`
   / `var(--tb-input-border)`. Those variables flip light/dark via the
   `.tb-fullscreen-modal[data-theme="light"]` ancestor, and the chain works
   in `grunt serve`. After `grunt build`, cssmin / concat order sometimes
   changes which rule wins and the inputs render with the dark-theme
   fallback values (rgba(255,255,255,…) — invisible on a white modal).
   This block hard-codes light-theme colors with explicit hex values + a
   selector specific enough (3 classes + 1 attr) to beat any preceding
   rule, regardless of file load order. Placed at EOF so it's last in the
   cascade — explicit, defensive, unambiguous.
   ══════════════════════════════════════════════════════════════════════ */
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="text"],
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="number"],
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="search"],
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="text"],
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="number"],
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="search"],
.tb-fullscreen-modal[data-theme="light"] .stepper-modal textarea,
.tb-fullscreen-modal[data-theme="light"] .stepper-body textarea {
  background: #FFFFFF !important;
  border: 1px solid #E7EAEE !important;
  color: #2C3E50 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="text"]::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="number"]::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="search"]::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="text"]::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="number"]::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="search"]::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal textarea::placeholder,
.tb-fullscreen-modal[data-theme="light"] .stepper-body textarea::placeholder {
  color: #9DA2AA !important;
  opacity: 1 !important;
}

.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="text"]:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="number"]:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal input[type="search"]:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="text"]:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="number"]:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-body input[type="search"]:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-modal textarea:focus,
.tb-fullscreen-modal[data-theme="light"] .stepper-body textarea:focus {
  border-color: #4185F4 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.12) !important;
}

/* ════════════════════════════════════════════════════════════
   Item code chip — light-theme override
   ════════════════════════════════════════════════════════════
   .we-item-code base styling (dmb-builder.css:4971) uses
   --tb-text-3 / --tb-overlay-2 which fall back to translucent
   WHITE-on-WHITE in light mode — making the item number (e.g.
   "166401" next to "ALBAIK Dates") invisible against the light
   stepper background. Override with a slate-on-grey palette
   that has readable contrast. */
.tb-fullscreen-modal[data-theme="light"] .we-item-code,
[data-theme="light"] .we-item-code,
.cxm-bd .we-item-code {
  color: #4B5563 !important;
  background: #E7EAEE !important;
}

/* ════════════════════════════════════════════════════════════════════════
   DEFINITIVE: stepper-menu-search
   ════════════════════════════════════════════════════════════════════════
   Owns every visual property of the "Search items by name…" input in the
   stepper modal. ROOT-CAUSE FIX (after multiple failed CSS attempts):
   the stepper modal's wrapper class is `.stepper-modal` — NOT
   `.tb-fullscreen-modal`. Earlier rules targeted the wrong wrapper and
   never matched anything, regardless of !important or specificity.

   Selectors here target `.stepper-menu-search` directly (it's only used
   inside the stepper modal — unique enough on its own), plus a
   `.stepper-modal` variant for extra cascade weight. `body` prefix is
   added on each rule for max specificity vs anything in enterprise.css.

   Layout: search icon left @ 12px · clear button right @ 8px · input
   padded 36px both sides to clear them. The wrapper is `position:
   relative` so the absolute-positioned icon + clear button anchor to it.
   ════════════════════════════════════════════════════════════════════════ */

.stepper-menu-search,
body .stepper-menu-search,
.stepper-modal .stepper-menu-search,
body .stepper-modal .stepper-menu-search {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.stepper-menu-search .stepper-menu-search__icon,
body .stepper-menu-search .stepper-menu-search__icon,
.stepper-modal .stepper-menu-search .stepper-menu-search__icon,
body .stepper-modal .stepper-menu-search .stepper-menu-search__icon,
.stepper-menu-search > i.fa-search,
body .stepper-menu-search > i.fa-search {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #9DA2AA !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.stepper-menu-search input[type="text"],
.stepper-menu-search input,
body .stepper-menu-search input[type="text"],
body .stepper-menu-search input,
.stepper-modal .stepper-menu-search input[type="text"],
.stepper-modal .stepper-menu-search input,
body .stepper-modal .stepper-menu-search input[type="text"],
body .stepper-modal .stepper-menu-search input {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 36px 0 36px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #2C3E50 !important;
  border: 1px solid #E0E4EA !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.stepper-menu-search input::placeholder,
body .stepper-menu-search input::placeholder,
.stepper-modal .stepper-menu-search input::placeholder,
body .stepper-modal .stepper-menu-search input::placeholder {
  color: #9DA2AA !important;
  opacity: 1 !important;
  font-style: normal !important;
}

.stepper-menu-search input:focus,
body .stepper-menu-search input:focus,
.stepper-modal .stepper-menu-search input:focus,
body .stepper-modal .stepper-menu-search input:focus {
  border-color: #4185F4 !important;
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.12) !important;
  outline: none !important;
}

.stepper-menu-search .stepper-menu-search__clear,
body .stepper-menu-search .stepper-menu-search__clear,
.stepper-modal .stepper-menu-search .stepper-menu-search__clear,
body .stepper-modal .stepper-menu-search .stepper-menu-search__clear {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #9DA2AA !important;
  font-size: 12px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  transition: background 0.15s, color 0.15s !important;
}

.stepper-menu-search .stepper-menu-search__clear:hover,
body .stepper-menu-search .stepper-menu-search__clear:hover,
.stepper-modal .stepper-menu-search .stepper-menu-search__clear:hover,
body .stepper-modal .stepper-menu-search .stepper-menu-search__clear:hover {
  background: #F4F6F9 !important;
  color: #5A6168 !important;
}
/* ════════════════════════════════════════════════════════════════════════
   END DEFINITIVE: stepper-menu-search
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   DEFINITIVE: stepper category-search + cat-search variant
   ════════════════════════════════════════════════════════════════════════
   The "Search categories…" input inside the stepper modal's left panel
   has only inline width/height — no padding, border, or background — so
   the placeholder hugs the edge and there's no visible field affordance.
   Two markup variants exist:
     1. `.stepper-menu-left .we-field input[type="text"]` — current
        two-pane stepper (line 3097 in dmb-builder.html).
     2. `.we-menu-v2__cat-search` — older single-step variant (line 1399).

   Both fixed here with the same modern look used for the item-search.
   `!important` beats the inline `width/height/font-size` overrides.
   ════════════════════════════════════════════════════════════════════════ */

.stepper-menu-left .we-field input[type="text"],
body .stepper-menu-left .we-field input[type="text"],
.stepper-modal .stepper-menu-left .we-field input[type="text"],
body .stepper-modal .stepper-menu-left .we-field input[type="text"],
.we-menu-v2__cat-search,
body .we-menu-v2__cat-search,
input.we-menu-v2__cat-search {
  display: block !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #2C3E50 !important;
  border: 1px solid #E0E4EA !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.stepper-menu-left .we-field input[type="text"]::placeholder,
body .stepper-menu-left .we-field input[type="text"]::placeholder,
.stepper-modal .stepper-menu-left .we-field input[type="text"]::placeholder,
.we-menu-v2__cat-search::placeholder,
body .we-menu-v2__cat-search::placeholder {
  color: #9DA2AA !important;
  opacity: 1 !important;
  font-style: normal !important;
}

.stepper-menu-left .we-field input[type="text"]:focus,
body .stepper-menu-left .we-field input[type="text"]:focus,
.stepper-modal .stepper-menu-left .we-field input[type="text"]:focus,
.we-menu-v2__cat-search:focus,
body .we-menu-v2__cat-search:focus {
  border-color: #4185F4 !important;
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.12) !important;
  outline: none !important;
}

/* The wrapping .stepper-menu-left-header gives the input some breathing
   room; ensure it doesn't squeeze the input below the new 36px height. */
.stepper-modal .stepper-menu-left-header,
body .stepper-modal .stepper-menu-left-header {
  padding: 12px 12px 8px !important;
  box-sizing: border-box !important;
}
/* ════════════════════════════════════════════════════════════════════════
   END DEFINITIVE: stepper category-search
   ════════════════════════════════════════════════════════════════════════ */