/* ============================================
   DMB Template Builder Styles
   3-Layer Canvas Architecture
   Uses var(--rw-*) tokens from theme.css
   ============================================ */

/* ============================================================================
   A11y baseline — global :focus-visible fallback scoped to the builder.
   Every interactive element under .tb-fullscreen-modal gets a visible 2px
   accent ring on keyboard focus by default; per-component overrides
   (e.g. .tb-action-btn:focus-visible) can still take precedence by virtue
   of higher specificity. Mouse / touch focus does NOT trigger the ring
   thanks to :focus-visible.

   Dark canvas regions (inside .tb-canvas-stage) get an inverted ring so
   the indicator stays visible on near-black surfaces.
   ============================================================================ */
.tb-fullscreen-modal :focus-visible {
  outline: 2px solid var(--cxm-b60, #4185f4);
  outline-offset: 2px;
  border-radius: 3px;
}
.tb-fullscreen-modal .tb-canvas-stage :focus-visible,
.tb-fullscreen-modal[data-theme="dark"] :focus-visible {
  outline-color: #8ab4f8;
}
/* Suppress the default browser outline (e.g. Chrome's 1px dotted) for
   non-:focus-visible focus — clicked buttons + drag-handles shouldn't
   show a ring on mouse use. */
.tb-fullscreen-modal :focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   Persistent save/publish error banner — sits under the top bar, anchored
   to the top of the canvas area. Replaces transient growl.error so a save
   failure stays visible until the admin acknowledges or retries.
   ============================================================================ */
.tb-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(231, 76, 60, 0.08);
  border-bottom: 1px solid rgba(231, 76, 60, 0.25);
  border-left: 4px solid #E74C3C;
  color: #A52E22;
  font-size: 13.5px;
  line-height: 1.5;
  font-family: 'Inter', system-ui, sans-serif;
}
.tb-error-banner__icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: #E74C3C;
  margin-top: 1px;
}
.tb-error-banner__body { flex: 1; min-width: 0; }
.tb-error-banner__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #8A1F12;
  margin: 0 0 2px;
}
.tb-error-banner__msg {
  color: #A52E22;
  margin: 0;
  word-break: break-word;
}
.tb-error-banner__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tb-error-banner__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tb-error-banner__btn--retry {
  background: #E74C3C;
  color: #fff;
}
.tb-error-banner__btn--retry:hover { background: #D43F2D; }
.tb-error-banner__btn--dismiss {
  background: transparent;
  color: #A52E22;
  border-color: rgba(231, 76, 60, 0.35);
}
.tb-error-banner__btn--dismiss:hover {
  background: rgba(231, 76, 60, 0.10);
}
/* Dark theme — keep contrast above AA on near-black background. */
.tb-fullscreen-modal[data-theme="dark"] .tb-error-banner {
  background: rgba(231, 76, 60, 0.18);
  border-bottom-color: rgba(231, 76, 60, 0.40);
  color: #ee9388;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-error-banner__title { color: #ffd6d2; }
.tb-fullscreen-modal[data-theme="dark"] .tb-error-banner__msg   { color: #ee9388; }
.tb-fullscreen-modal[data-theme="dark"] .tb-error-banner__btn--dismiss {
  color: #ffd6d2;
  border-color: rgba(255, 213, 210, 0.30);
}

/* ============================================================================
   Builder utility classes (tb-u-*) — replace common inline styles.
   Prefix tb-u-* (NOT plain u-*) to avoid colliding with any other stylesheet.
   ============================================================================ */
.tb-u-flex         { display: flex; }
.tb-u-flex-1       { flex: 1; }
.tb-u-flex-center  { display: flex; align-items: center; }
.tb-u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.tb-u-flex-col     { display: flex; flex-direction: column; }
.tb-u-gap-2        { gap: 2px; }
.tb-u-gap-3        { gap: 3px; }
.tb-u-gap-4        { gap: 4px; }
.tb-u-gap-6        { gap: 6px; }
.tb-u-gap-8        { gap: 8px; }
.tb-u-gap-10       { gap: 10px; }
.tb-u-mt-4         { margin-top: 4px; }
.tb-u-mt-8         { margin-top: 8px; }
.tb-u-mt-12        { margin-top: 12px; }
.tb-u-mt-16        { margin-top: 16px; }
.tb-u-mb-4         { margin-bottom: 4px; }
.tb-u-mb-8         { margin-bottom: 8px; }
.tb-u-mb-12        { margin-bottom: 12px; }
.tb-u-mb-14        { margin-bottom: 14px; }
.tb-u-mb-16        { margin-bottom: 16px; }
.tb-u-mr-2         { margin-right: 2px; }
.tb-u-mr-3         { margin-right: 3px; }
.tb-u-mr-4         { margin-right: 4px; }
.tb-u-m-0          { margin: 0; }
.tb-u-w-full       { width: 100%; }
.tb-u-w-60         { width: 60px; }
.tb-u-min-w-0      { min-width: 0; }
.tb-u-muted        { color: #9DA2AA; font-weight: 400; }
.tb-u-muted-2      { color: #373C44; }
.tb-u-divider      { height: 1px; background: #EEF0F4; }
.tb-u-text-8       { font-size: 8px; }
.tb-u-text-9       { font-size: 9px; }
.tb-u-text-10      { font-size: 10px; }
.tb-u-text-10-muted { font-size: 10px; color: rgba(255,255,255,0.4); }
.tb-u-text-11      { font-size: 11px; }
.tb-u-text-12      { font-size: 12px; }
.tb-u-radius-6     { border-radius: 6px; }
.tb-u-scroll-y     { flex: 1; overflow-y: auto; min-height: 0; }
.tb-u-flex-between-6 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

/* Toggle row card (repeats 12× — menu rows, media rows, typography level rows) */
.tb-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E7EAEE;
  transition: border-color 0.15s, background 0.15s;
}
.tb-row-card:hover { border-color: #D5D9E0; }
.tb-row-card--lg { padding: 10px 14px; }

/* Widget editor · Scroll section — vertical card with enable + direction + auto. */
.we-scroll-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  margin-bottom: 14px;
}
.we-scroll-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #373C44;
  cursor: pointer;
  user-select: none;
}
.we-scroll-row__label { display: flex; align-items: center; gap: 6px; }
.we-scroll-row__label i { font-size: 11px; color: #9DA2AA; }

/* Segmented control (direction). Two buttons inside one rounded track. */
.we-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  background: #F3F5F8;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
}
.we-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: #6A6F77;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.we-seg__btn:hover  { color: #373C44; }
.we-seg__btn i      { font-size: 11px; }
.we-seg__btn--active {
  background: #fff;
  color: #4f6ae8;
  box-shadow: inset 0 0 0 1px rgba(79,106,232,0.35), 0 1px 2px rgba(4,9,17,0.06);
}

/* Auto-scroll speed inline input. */
.we-scroll-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  font-size: 11px;
  color: #6A6F77;
}
.we-scroll-speed input {
  width: 52px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #E7EAEE;
  background: #fff;
  color: #373C44;
  font-size: 11px;
  text-align: center;
}
.we-scroll-speed input:focus {
  outline: none;
  border-color: #4f6ae8;
  box-shadow: 0 0 0 2px rgba(79,106,232,0.12);
}

/* Focus label inside row card (repeats 10× — "Show image", "Loop video", etc.) */
.tb-focus-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #373C44;
  cursor: pointer;
  user-select: none;
}
.tb-focus-label--sm {
  gap: 6px;
  font-size: 11px;
  justify-content: flex-start;
}

/* Toggle switch track + dot (previously inline 11+11 = 22 styles) */
.tb-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #D5D9E0;
  transition: background 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.tb-toggle--on { background: var(--rw-primary, #4f6ae8); }
.tb-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.tb-toggle--on .tb-toggle__dot { left: 16px; }
.tb-toggle--success.tb-toggle--on { background: #22c55e; }

/* Empty / loading state inside palette + widget editor */
.tb-palette-empty {
  text-align: center;
  padding: 16px;
  color: #BABFC8;
  font-size: 11px;
  font-weight: 500;
}
.tb-palette-empty i { margin-bottom: 4px; display: block; font-size: 14px; }

/* Palette section title ("ADD WIDGET")
   Cyan-600 reads with strong contrast on both the light builder shell
   (#F4F6F9) and the dark variant (#161b22), and it doesn't collide with
   any category swatch (which all live in red/amber/blue/violet/green
   families). The dark-theme override below bumps to cyan-400 so it
   keeps popping on the dark surface. */
.tb-palette-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #0891B2;
  padding: 18px 14px 10px;
  margin: 0;
}

/* Palette search input (light) */
.tb-palette-search {
  position: relative;
  margin: 0;
  padding: 0 12px 12px;
  display: flex;
  align-items: center;
}
.tb-palette-search input {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #F9FAFB;
  color: #373C44;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tb-palette-search input:focus {
  border-color: #4185F4;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.1);
}
.tb-palette-search input::placeholder { color: #BABFC8; }
.tb-palette-search i {
  position: absolute;
  right: 22px;
  /* Wrapper has asymmetric padding (0 top, 12px bottom); shift up by half
     the bottom padding so the icon centers on the input, not the wrapper. */
  top: calc(50% - 6px);
  transform: translateY(-50%);
  color: #BABFC8;
  font-size: 11px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Preview mode — hides grid/handles/selection so the canvas shows the layout
   as it would appear on the device.
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-canvas.tb-preview .tb-grid-overlay,
.tb-canvas.tb-preview .tb-widget .tb-widget-info,
.tb-canvas.tb-preview .tb-rh,
.tb-canvas.tb-preview .tb-rh-corner,
.tb-canvas.tb-preview .tb-widget-hint { display: none !important; }
.tb-canvas.tb-preview .tb-widget {
  outline: none !important;
  box-shadow: none !important;
  cursor: default !important;
}
.tb-preview-banner {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  z-index: 25;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Keyboard shortcuts help overlay (triggered by `?`)
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tb-help-in 0.15s ease-out;
}
@keyframes tb-help-in { from { opacity: 0; } to { opacity: 1; } }
.tb-help-card {
  width: 440px;
  max-width: 92vw;
  background: #1e2035;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 24px 28px;
  color: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.tb-help-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.tb-help-card__sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.tb-help-list { list-style: none; padding: 0; margin: 0 0 18px; }
.tb-help-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.tb-help-list li:last-child { border-bottom: none; }
.tb-help-keys {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.tb-help-keys kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}
.tb-help-card__footer {
  display: flex;
  justify-content: flex-end;
}
.tb-help-close {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}
.tb-help-close:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ═══ Top-bar sub-elements (light theme · ported from template-editor.html) ═══ */

/* Back button (chevron in g10 square) */
.tb-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #F9FAFB;
  border: 1px solid #E7EAEE;
  color: #6A6F77;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  font-size: 13px;
}
.tb-back-btn:hover {
  background: #F1F2F5;
  border-color: #D5D9E0;
  color: #040911;
}

/* Unsaved changes pill (orange) */
.tb-unsaved-pill {
  font-size: 11px;
  font-weight: 600;
  color: #FF9772;
  background: #FFF5F1;
  border: 1px solid rgba(255,151,114,0.2);
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tb-unsaved-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF9772;
  flex-shrink: 0;
}

/* Theme toggle button (icon-only) — kept for legacy references */
.tb-theme-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #fff;
  color: #9DA2AA;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  font-size: 14px;
}
.tb-theme-btn:hover {
  background: #F9FAFB;
  border-color: #D5D9E0;
  color: #040911;
}

/* Theme toggle — segmented pill (Light / Dark) */
.tb-theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #F3F5F8;
  padding: 2px;
  cursor: pointer;
  height: 36px;
  font-size: 11px;
  font-weight: 500;
  color: #9DA2AA;
  transition: border-color 0.15s;
}
.tb-theme-pill:hover { border-color: #D5D9E0; }
.tb-theme-pill__opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 28px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.tb-theme-pill__opt--on {
  background: #fff;
  color: #373C44;
  box-shadow: 0 1px 3px rgba(4,9,17,0.10);
}

/* Duration "schedule" field (clock icon + number input + "sec") */
.tb-duration-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 36px;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  color: #6A6F77;
}
.tb-duration-field i {
  font-size: 12px;
  color: #9DA2AA;
}
.tb-duration-field input {
  width: 52px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #373C44;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.tb-duration-field input::-webkit-outer-spin-button,
.tb-duration-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tb-duration-field input::placeholder {
  color: #BABFC8;
}
.tb-duration-field span {
  font-size: 11px;
  font-weight: 600;
  color: #9DA2AA;
}
/* Trailing chevron — visual affordance that the input has a preset list.
   Pure decoration: the browser's native datalist popup is what surfaces
   the presets when the input is focused. Color inherits from
   `.tb-duration-field i` above for both light + dark themes. */
.tb-duration-field__caret {
  font-size: 10px !important;
  margin-left: 2px;
  pointer-events: none;
  opacity: 0.7;
}
/* Native <select> inside the duration field — keeps the OS chevron, drops
   the box border, sits flush with the clock icon. Matches reference. */
.tb-duration-field select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #373C44;
  outline: none;
  padding: 0 16px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  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");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px 12px;
}
.tb-duration-field select:focus { color: #040911; }

/* Top-bar action buttons (Preview + Save) */
.tb-action-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 16px;
  height: 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.tb-action-btn i { font-size: 12px; }
.tb-action-btn--ghost {
  background: #fff;
  border: 1px solid #E7EAEE;
  color: #6A6F77;
}
.tb-action-btn--ghost:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #D5D9E0;
  color: #040911;
}
.tb-action-btn--ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #F9FAFB;
  color: #BABFC8;
  border-color: #EEF0F4;
}
.tb-action-btn--save {
  background: #10B48F;
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,180,143,0.25);
}
.tb-action-btn--save:hover:not(:disabled) { background: #00815C; }
.tb-action-btn--save:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Undo/Redo badge (carried from old tb-history-btn) */
.tb-history-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #4185F4;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 3px;
}

/* Legacy — still used elsewhere in parent views; keep as no-op for safety */
.tb-topbar-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; text-transform: capitalize; }

/* Preview toggle active state */
.tb-preview-active {
  background: var(--rw-primary) !important;
  color: #fff !important;
  border-color: var(--rw-primary) !important;
}

/* Top-bar help trigger button */
.tb-help-trigger {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rw-border, #e2e8f0);
  background: var(--rw-card-bg, #fff);
  color: var(--rw-text-light, #6b7280);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.tb-help-trigger:hover { border-color: var(--rw-primary); color: var(--rw-primary); }
.tb-help-trigger:focus-visible { outline: 2px solid var(--rw-primary); outline-offset: 2px; }

/* ─── Fullscreen Modal Overlay ──────────────── */
.tb-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: #F9FAFB;
  overflow: hidden;
}

.tb-fullscreen-inner {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Builder Layout ─────────────────────────── */
.tb-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ─── Top Bar (light chrome) ─────────────────── */
.tb-topbar {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #E7EAEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  margin-bottom: 0;
  gap: 12px;
}
.tb-topbar__left,
.tb-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tb-topbar__right { gap: 0; margin-left: auto; flex-shrink: 0; }

/* Action-bar clusters: view | tools | save. A thin divider between groups so
   the crowded right side reads as three tidy groups, not one long strip. */
.tb-topbar__group { display: flex; align-items: center; gap: 8px; }
.tb-topbar__group + .tb-topbar__group {
  margin-left: 6px; padding-left: 14px; border-left: 1px solid #E7EAEE;
}
.tb-topbar__group--save { gap: 10px; margin-left: 8px; }

/* Brand logotype — Black-Corbi.png at 24px, matches template-editor.html. */
.tb-brand-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter 0.2s;
}

/* Thin vertical divider between brand and nav controls */
.tb-topbar__divider {
  width: 1px;
  height: 22px;
  background: #E7EAEE;
  flex-shrink: 0;
}

/* Template name — plain inline-editable title, NOT a form field.
   Aggressively resets UA defaults (webkit appearance / box-shadow /
   border) so the input looks like flowing text. Scoped via
   .tb-topbar ancestor to win specificity over any Bootstrap reset. */
/* Template name — read-only display. Edits happen on the template-list
   form; no in-canvas rename surface. */
.tb-topbar .tb-topbar-name {
  font-size: 15px;
  font-weight: 700;
  max-width: 240px;
  min-width: 0;
  height: 32px;
  line-height: 32px;
  padding: 0 2px;
  margin: 0;
  color: #040911;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  user-select: text;
}

/* ─── Config Bar / Sub Toolbar (light) ───────── */
.tb-config-bar {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #E7EAEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  margin-bottom: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.tb-config-bar__left,
.tb-config-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon button (undo/redo) */
.tb-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E7EAEE;
  color: #BABFC8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  position: relative;
  padding: 0;
  font-size: 13px;
}
.tb-icon-btn:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #D5D9E0;
  color: #373C44;
}
.tb-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Widget count label on config-bar right side */
.tb-widget-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #a5a5a5;
  white-space: nowrap;
  padding: 0 6px;
}
.tb-widget-count i { font-size: 13px; }

/* Config-bar section (label + control clusters) */
.tb-cb-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: #6A6F77;
}
.tb-cb-section-label {
  font-size: 12px;
  font-weight: 500;
  color: #a5a5a5;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.tb-cb-section-icon { font-size: 13px; color: #6A6F77; }

.tb-cb-sep {
  width: 1px;
  height: 24px;
  background: #E7EAEE;
  margin: 0 5px;
  flex-shrink: 0;
  align-self: center;
}


/* Read-only value chip (used for the canvas size badge) */
.tb-cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #373C44;
  background: #F9FAFB;
  border: 1px solid #E7EAEE;
  white-space: nowrap;
}
.tb-cb-chip i { font-size: 11px; }

/* Dropdown-styled chip — read-only value but visually communicates
   "selectable" via a trailing chevron, mirroring the reference. */
.tb-cb-chip--dropdown {
  padding-right: 8px;
  cursor: default;
}
.tb-cb-chip--dropdown .fa-chevron-down {
  font-size: 8px;
  color: #9DA2AA;
  margin-left: 2px;
}

/* Legacy — no longer used in the new config bar but kept so
   older callers don't fall back to unstyled text. */
.tb-cb-spec {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #6A6F77;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Fields */
.tb-cb-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Nail line-height to match the checkbox so label and box sit on the same
     visual axis regardless of font-size vs checkbox-size mismatch. */
  line-height: 16px;
}

.tb-cb-field label {
  font-size: 12px;
  font-weight: 500;
  color: #6A6F77;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 16px;
  letter-spacing: 0.2px;
  /* Remove default Bootstrap `label` top margin + inline-block spacing. */
  display: inline-flex;
  align-items: center;
  height: 16px;
}

.tb-cb-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #4185F4;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}

.tb-cb-input {
  font-family: inherit;
  width: 52px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #E7EAEE;
  border-radius: 6px;
  padding: 0 8px;
  background: #fafafa;
  color: #373C44;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;
}
.tb-cb-input::-webkit-outer-spin-button,
.tb-cb-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-cb-input:focus {
  border-color: #4185F4;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.1);
}
.tb-cb-input-w { width: 72px; }
.tb-cb-input-xs { width: 42px; }

.tb-cb-select {
  font-family: inherit;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #E7EAEE;
  border-radius: 6px;
  padding: 0 10px;
  background: #fafafa;
  color: #373C44;
  max-width: 140px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tb-cb-select:focus {
  border-color: #4185F4;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.1);
}

.tb-cb-color {
  width: 28px;
  height: 28px;
  border: 2px solid #E7EAEE;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.tb-cb-color:hover { border-color: #D5D9E0; }

/* Upload button */
.tb-cb-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--rw-primary, #4f6ae8);
  border-radius: 5px;
  background: transparent;
  color: var(--rw-primary, #4f6ae8);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.tb-cb-upload-btn:hover {
  background: var(--rw-primary, #4f6ae8);
  color: #fff;
}

.tb-cb-upload-btn i { font-size: 10px; }

/* Image preview thumbnail */
.tb-cb-img-preview {
  width: 40px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--rw-border, #e2e8f0);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
/* Remove background-image button — clear red affordance, matches the media-row delete. */
.tb-cb-bg-remove {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px;
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.22);
  color: #E74C3C;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.tb-cb-bg-remove:hover { background: rgba(231, 76, 60, 0.18); border-color: rgba(231, 76, 60, 0.45); color: #C0392B; }
.tb-cb-bg-remove:focus-visible { outline: 2px solid #E74C3C; outline-offset: 1px; }

.tb-cb-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  align-self: stretch;
  border: none;
  border-left: 1px solid var(--rw-border, #e2e8f0);
  border-radius: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.tb-cb-delete:hover { background: #fef2f2; color: #dc2626; }

/* ─── Canvas Area (light bg with subtle dotted grid — from template-editor reference) ─── */
.tb-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 12px 20px;
  position: relative;
  background: #ECEEF2;
  background-image: radial-gradient(circle, #D5D9E0 1px, transparent 1px);
  background-size: 16px 16px;
}

.tb-canvas {
  position: relative;
  background: #fff;
  border: 1px solid #D5D9E0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(4,9,17,0.06);
}

/* In EDIT mode we force the canvas surface to white so the designer has a
   clean light surface to work on — regardless of what `tb.bg.color` is set
   to. The stored background (solid/gradient/image) still applies in PREVIEW
   mode (`.tb-canvas.tb-preview`) and at publish time. Matches the reference
   template-editor.html behaviour. */
.tb-canvas:not(.tb-preview) {
  background: #fff !important;
  background-image: none !important;
}

/* 3-Layer stacking */
.tb-layer-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  overflow: hidden;
}

.tb-layer-widgets {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

.tb-layer-overlays {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  /* Layer itself doesn't catch clicks (canvas deselect must work) — only the
     individual overlays do via their own pointer-events: auto. */
  pointer-events: none;
}

/* Overlay box — grid-positioned via getOverlayStyle (left/top/width/height).
   Inner content is centred horizontally + vertically; selection ring appears
   only in builder (drops in preview mode). */
.tb-overlay {
  pointer-events: auto;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.2;
  /* Rotation default — overrides come from inline ng-style when overlay
     has rotation. transform-origin pinned to center so the box rotates
     around its own midpoint, not the top-left. will-change hints the
     browser to use a compositor layer for smoother transform updates. */
  transform-origin: center center;
  will-change: transform;
  /* No overflow:hidden here — would clip the resize handles which sit at -5px
     edges. Inner content does its own clipping via .tb-overlay__inner. */
  transition: box-shadow 0.16s ease;
}
.tb-overlay__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-overlay__icon { font-size: 0.78em; opacity: 0.85; flex-shrink: 0; }
.tb-overlay__text { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

/* Size badge (top-left of selected overlay) — mirrors .tb-w-size-badge style
   so widget + overlay selection feels consistent. */
.tb-overlay__badge {
  position: absolute;
  top: 4px; left: 4px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 32;
}

/* Selection ring — soft blue glow with subtle inner stroke. */
.tb-overlay-selected {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 0 2px var(--tb-accent, #2D7DD2),
    0 0 0 5px rgba(45, 125, 210, 0.20);
}

/* Hint chip shown when a rotated overlay is selected — explains why the
   resize handles are missing. Anchored top-right of the AABB; rotates with
   the overlay (it's a child of .tb-overlay) so it stays attached visually. */
.tb-overlay__rot-hint {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  pointer-events: auto;
  z-index: 33;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}
.tb-overlay__rot-hint i { font-size: 11px; }
.tb-canvas.tb-preview .tb-overlay-selected { box-shadow: none; }
.tb-canvas.tb-preview .tb-overlay__badge,
.tb-canvas.tb-preview .tb-overlay-handles { display: none; }

/* Resize-handles wrapper — handles inherit the same .tb-rh-* / .tb-rh-corner
   styles already defined for widgets, so we don't redeclare them here. */
.tb-overlay-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 31;
}
.tb-overlay-handles > * { pointer-events: auto; }

/* Sticker — full-bleed image. object-fit comes from inline style so the user
   can pick contain/cover/fill in the editor. Drag-source disabled so the
   browser's native image-drag doesn't conflict with our grid drag handler. */
.tb-overlay__img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Empty-sticker placeholder shown until an image is uploaded. Lets the user
   see the box they're positioning before it has content. */
.tb-overlay__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  /* Solid translucent dark backdrop guarantees WCAG AA contrast for the
     "Upload sticker" copy regardless of canvas content underneath (a light
     image or default white background was making the prior translucent-white
     text invisible). Border kept dashed-light to read as a placeholder hint. */
  background: rgba(15, 23, 42, 0.55);
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.tb-overlay__placeholder i { font-size: 20px; opacity: 0.92; }

/* Grid overlay — lighter, more visible */
.tb-grid-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.tb-grid-cell {
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 2px;
  box-sizing: border-box;
}

/* ─── Widget on Canvas ───────────────────────── */
.tb-widget {
  position: absolute;
  cursor: move;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
  /* Use outline instead of border — outline doesn't compete with inline border styles.
     Neutral gray works on both the light edit canvas and the dark preview canvas. */
  border: none;
  outline: 1.5px solid rgba(128,128,128,0.35);
  outline-offset: -1px;
  border-radius: 8px;
  transition: outline-color 0.12s, box-shadow 0.12s;
  will-change: left, top, width, height;
}

.tb-widget:hover {
  outline-color: rgba(65,133,244,0.5);
  box-shadow: 0 2px 12px rgba(4,9,17,0.12);
}

/* Selected widget — visually unmistakable: thick accent outline + halo +
   brighter info badge. Outline grows from 3px → 5px so the active state
   reads at a glance even on dense canvases. */
.tb-widget-selected {
  outline: 5px solid var(--rw-primary, #4f6ae8) !important;
  outline-offset: -2px !important;
  box-shadow: 0 0 0 4px rgba(79,106,232,0.18), 0 6px 20px rgba(79,106,232,0.28) !important;
  z-index: 10 !important;
}

/* When selected, the widget's info badge brightens — accent background +
   white text — so the label feels "active" rather than the muted dark pill
   used in the resting state. Bumped contrast for visibility. */
.tb-widget-selected .tb-widget-info {
  background: var(--rw-primary, #4f6ae8) !important;
  box-shadow: 0 4px 16px rgba(79,106,232,0.35) !important;
}
.tb-widget-selected .tb-widget-info span {
  color: #ffffff !important;
  letter-spacing: 0.8px;
}
.tb-widget-selected .tb-widget-info i {
  color: #ffffff !important;
}

.tb-widget-preview {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.85;
  z-index: 0;
}

.tb-widget-preview + .tb-widget-info { position: relative; z-index: 1; }

/* ── Widget canvas overlays (extracted from inline styles) ───────────── */

/* Row × Col badge in the top-left corner of every widget.
   Base sized for zone-fill widgets (≥220px wide); container queries
   below scale it down for medium and tiny widgets. */
.tb-w-size-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15,23,42,0.78);
  color: #fff;
  font-size: 20px;
  padding: 7px 16px;
  border-radius: 9px;
  z-index: 2;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  letter-spacing: 0.6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Wrapper for media-widget content (image / video poster). */
.tb-w-media-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tb-w-media-img { width: 100%; height: 100%; display: block; }
.tb-w-video-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
}
.tb-w-video-placeholder__inner {
  text-align: center;
  color: rgba(255,255,255,0.5);
}
.tb-w-video-placeholder__icon {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
}

/* Bottom-right count badge (multi-media or item count). Base sized for
   zone-fill widgets; container queries below scale down for smaller hosts. */
.tb-w-count-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 20px;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}
.tb-w-count-badge i { font-size: 18px; }

/* Live text-widget preview (text + textmenu). The dynamic ng-style still
   handles per-widget alignment + padding; this rule covers the static parts. */
.tb-w-text-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
.tb-w-text-line {
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-w-text-line--sub {
  line-height: 1.3;
  margin-top: 4px;
  opacity: 0.75;
}

/* Empty-text placeholder shown when title + subtitle are blank. */
.tb-w-text-empty {
  text-align: center;
  opacity: 0.3;
  font-size: 11px;
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tb-w-text-empty__icon {
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
}

/* Inline menu-count chip used inside a textmenu preview. */
.tb-w-menu-chip {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.tb-w-menu-chip-row { margin-top: 4px; }

/* Per-category background tints removed per admin request — the canvas
   stays neutral so user-applied style.backgroundColor visibly only
   renders in preview/device, not on the layout-affordance surface.
   Category is still surfaced via the icon + label inside .tb-widget-info. */

.tb-widget-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: rgba(0,0,0,0.7);
  border-radius: 10px;
  z-index: 1;
  max-width: 92%;
  /* Soft halo so the label stays legible against any tinted widget bg. */
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}

/* Icon hidden — the per-type tint already signals widget category and the
   default `fa-square-o` placeholder added visual noise without info. */
.tb-widget-info i { display: none; }

/* Show the full widget name — wrap on long labels (e.g. "RATE CAROUSEL",
   "MEDIA PLAYER", "OFFER BANNER") instead of truncating with ellipsis.
   Builder-only badge (hidden in tb-preview), so multi-line is fine and
   doesn't affect rendered output. Sized for legibility on big zone-fill
   widgets; small widgets downscale via the container queries below. */
.tb-widget-info span {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Per-widget size-tier scaling for every overlay (size badge, name label,
   count badge) so big widgets show readable info and small widgets don't
   overflow. Base sizes (.tb-w-size-badge / .tb-widget-info / .tb-w-count-badge
   above) target zone-fill widgets (≥220px); breakpoints step down for medium
   then small via the .tb-widget--sm / .tb-widget--xs classes emitted by
   getWidgetSizeClass() in dmb-builder-setup.service.js. (Was @container,
   but the build's cssmin drops @container rules.) */
.tb-widget--sm .tb-widget-info       { padding: 8px 14px; gap: 8px; }
.tb-widget--sm .tb-widget-info span  { font-size: 18px; font-weight: 700; }
.tb-widget--sm .tb-widget-info i     { font-size: 16px; }
.tb-widget--sm .tb-w-size-badge      { font-size: 14px; padding: 4px 11px; top: 8px; left: 8px; border-radius: 6px; }
.tb-widget--sm .tb-w-count-badge     { font-size: 14px; padding: 5px 10px; bottom: 8px; right: 8px; gap: 6px; border-radius: 7px; }
.tb-widget--sm .tb-w-count-badge i   { font-size: 13px; }

.tb-widget--xs .tb-widget-info       { padding: 5px 10px; gap: 6px; }
.tb-widget--xs .tb-widget-info span  { font-size: 14px; font-weight: 700; }
.tb-widget--xs .tb-widget-info i     { font-size: 13px; }
.tb-widget--xs .tb-w-size-badge      { font-size: 11px; padding: 3px 8px; top: 6px; left: 6px; border-radius: 5px; }
.tb-widget--xs .tb-w-count-badge     { font-size: 11px; padding: 3px 7px; bottom: 6px; right: 6px; gap: 5px; border-radius: 5px; }
.tb-widget--xs .tb-w-count-badge i   { font-size: 10px; }

/* Double-click hint — solid dark pill at bottom-center of selected widget.
   Reference uses a static neutral pill — no pulse, no blue, just a quiet
   affordance hint. */
.tb-widget-hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  background: rgba(15,23,42,0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 12;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tb-widget-hint i { margin-right: 4px; font-size: 9px; }

/* ─── Floating action toolbar (duplicate + delete) on selected widget ───
   Sits OUTSIDE the widget's top-right so the icons don't cover content. */
.tb-widget-actions {
  position: absolute;
  top: -52px;
  right: 0;
  display: flex;
  gap: 8px;
  z-index: 25;
}
/* Row-1 elements have no room ABOVE the box — flip the chrome INSIDE the
   top-right corner so the delete button stays reachable on the top row. */
.tb-widget-actions--inside {
  top: 8px;
  right: 8px;
}
.tb-widget-actions__btn {
  width: 42px;
  height: 42px;
  border: 1px solid #E7EAEE;
  border-radius: 10px;
  background: #fff;
  color: #373C44;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(4,9,17,0.08);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
  padding: 0;
}
.tb-widget-actions__btn:hover {
  background: #F9FAFB;
  border-color: #D5D9E0;
  color: #040911;
}
.tb-widget-actions__btn:active { transform: scale(0.95); }
.tb-widget-actions__btn--danger { color: #E74C3C; }
.tb-widget-actions__btn--danger:hover {
  background: #FDECEC;
  border-color: #F6C8C8;
  color: #C0392B;
}
/* Hide the toolbar in preview mode (same rule set as resize handles). */
.tb-canvas.tb-preview .tb-widget-actions { display: none !important; }

/* Dark-theme counterparts — white icons on translucent dark surface. */
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-actions__btn {
  background: rgba(22,27,34,0.92);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-actions__btn:hover {
  background: rgba(40,46,54,0.95);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-actions__btn--danger { color: #ff6b6b; }
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-actions__btn--danger:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.35);
  color: #ffb3b3;
}

/* ─── Apple-Style Resize Handles ─────────────── */
.tb-rh {
  position: absolute;
  display: none;
  z-index: 20;
  justify-content: center;
  align-items: center;
}

.tb-widget-selected .tb-rh,
.tb-overlay-selected .tb-rh { display: flex; }
/* Corner dots use display: none/block instead of flex; cover both selections. */
.tb-overlay-selected .tb-rh-corner { display: block; }

/* Edge handles — wider hit area (24px), centered on each side. The bar
   inside is the visible grip; the wrapper is the click target. */
.tb-rh-n { top: -12px; left: 0; right: 0; height: 24px; cursor: n-resize; }
.tb-rh-s { bottom: -12px; left: 0; right: 0; height: 24px; cursor: s-resize; }
.tb-rh-e { right: -12px; top: 0; bottom: 0; width: 24px; cursor: e-resize; }
.tb-rh-w { left: -12px; top: 0; bottom: 0; width: 24px; cursor: w-resize; }

/* Horizontal grip bar (n/s) — prominent blue pill, white edge ring for
   contrast against any widget tint. */
.tb-rh-bar {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: var(--rw-primary, #4f6ae8);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 120ms ease, background 120ms ease;
}
.tb-rh:hover .tb-rh-bar { transform: scaleX(1.2) scaleY(1.15); }

/* Vertical grip bar (e/w) — mirror of horizontal. */
.tb-rh-bar-v {
  width: 6px;
  height: 32px;
  border-radius: 3px;
  background: var(--rw-primary, #4f6ae8);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 120ms ease, background 120ms ease;
}
.tb-rh:hover .tb-rh-bar-v { transform: scaleY(1.2) scaleX(1.15); }

/* Corner handles — Figma/Sketch-style filled blue squares with white ring.
   Sized to be obvious without dominating. Hover scales up for grab feedback. */
.tb-rh-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--rw-primary, #4f6ae8);
  border: 2px solid #fff;
  z-index: 21;
  display: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
  transition: transform 120ms ease;
}

.tb-widget-selected .tb-rh-corner { display: block; }
.tb-rh-corner:hover { transform: scale(1.3); }

.tb-rh-nw { top: -7px;    left: -7px;    cursor: nw-resize; }
.tb-rh-ne { top: -7px;    right: -7px;   cursor: ne-resize; }
.tb-rh-se { bottom: -7px; right: -7px;   cursor: se-resize; }
.tb-rh-sw { bottom: -7px; left: -7px;    cursor: sw-resize; }

/* ─── Drop Indicator ─────────────────────────── */
.tb-drop-indicator {
  position: absolute;
  border: 2px dashed var(--rw-primary, #4f6ae8);
  border-radius: 6px;
  pointer-events: none;
  z-index: 5;
  transition: all 0.08s ease;
}

/* ─── Empty Canvas (light-surface) ───────────── */
.tb-canvas-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: #9DA2AA;
  pointer-events: none;
}
.tb-canvas-empty i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F1F2F5;
  border: 2px dashed #BABFC8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #9DA2AA;
  margin: 0;
}
.tb-canvas-empty p {
  font-size: 11px;
  font-weight: 500;
  color: #9DA2AA;
  margin: 0;
}

/* ═══════════════════════════════════════════════
   WIDGET EDITOR PANEL (double-click overlay)
   Floating dark panel anchored to canvas right
   ═══════════════════════════════════════════════ */

.we-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* 30% of the canvas-wrap ancestor; clamped so it never collapses on
     narrow viewports or sprawls on ultrawides. */
  width: 30%;
  min-width: 320px;
  max-width: 520px;
  background: #fff;
  border-left: 1px solid #E7EAEE;
  box-shadow: -8px 0 32px rgba(4,9,17,0.06);
  display: flex;
  flex-direction: column;
  z-index: 30;
  overflow: hidden;
}

/* ─── Header ──── */
.we-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #E7EAEE;
  flex-shrink: 0;
  background: #fff;
}
.we-header-left { display: flex; align-items: center; gap: 12px; }
.we-chip {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #373C44;
  background: #F3F5F8;
}
.we-chip[data-cat="menu"]      { background: rgba(239,68,68,0.10); color: #ef4444; }
.we-chip[data-cat="promo"]     { background: rgba(245,158,11,0.12); color: #D48806; }
.we-chip[data-cat="info"]      { background: rgba(59,130,246,0.10); color: #3b82f6; }
.we-chip[data-cat="engage"]    { background: rgba(139,92,246,0.10); color: #7C3AED; }
.we-chip[data-cat="ordering"]  { background: rgba(16,185,129,0.10); color: #0E9F6E; }
.we-chip[data-cat="branding"]  { background: rgba(99,102,241,0.10); color: #4F46E5; }
.we-chip[data-cat="utility"]   { background: rgba(100,116,139,0.10); color: #64748B; }
.we-chip[data-cat="overlay"]   { background: rgba(45,125,210,0.10);  color: #2D7DD2; }
.we-title { font-size: 14px; font-weight: 600; color: #1F242B; line-height: 1.3; }
.we-subtitle { font-size: 10px; color: #9DA2AA; text-transform: capitalize; margin-top: 2px; letter-spacing: 0.2px; }
.we-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #E7EAEE;
  background: #fff; color: #6A6F77;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.15s; font-size: 12px;
}
.we-close:hover { background: #FDECEC; border-color: #F6C8C8; color: #E74C3C; }

/* ─── Tabs ──── */
.we-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #E7EAEE;
  flex-shrink: 0;
  background: #fff;
}
.we-tabs button {
  flex: 1;
  padding: 12px 0;
  font-size: 12px;
  font-weight: 600;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #9DA2AA !important;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  outline: none;
}
.we-tabs button i { margin-right: 6px; font-size: 11px; }
.we-tabs button:hover { color: #373C44 !important; background: #F9FAFB !important; }
.we-tabs button.we-tab-active,
.we-tabs button.we-tab-active:hover,
.we-tabs button.we-tab-active:focus {
  color: #4f6ae8 !important;
  border-bottom-color: #4f6ae8 !important;
  background: rgba(79,106,232,0.04) !important;
}

/* ─── Body ──── */
.we-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  background: #fff;
}
.we-body { scrollbar-width: thin; scrollbar-color: #DEE2E7 transparent; }
.we-body::-webkit-scrollbar { width: 4px; }
.we-body::-webkit-scrollbar-thumb { background: #DEE2E7; border-radius: 3px; }

.we-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #9DA2AA;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 22px;
  margin-bottom: 10px;
}
/* First section in a tab — no extra gap before it. */
.we-label:first-child { margin-top: 0; }


/* ─── Size Cards ──── */
.we-size-grid { display: flex; flex-direction: column; gap: 12px; }
.we-size-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #E7EAEE;
  background: #F9FAFB;
}

/* ─── Fields (light, for .we-panel) ──── */
.we-field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.we-field { display: flex; flex-direction: column; gap: 4px; }
.we-field span {
  font-size: 10px; font-weight: 600; color: #9DA2AA;
  letter-spacing: 0.2px;
}
.we-field span small { font-weight: 400; opacity: 0.7; }
.we-panel .we-field input[type="number"],
.we-panel .we-field input[type="text"],
.we-panel .we-field select:not(.we-sort-select),
.we-panel input[type="text"],
.we-panel input[type="number"],
.we-panel select:not(.we-sort-select) {
  height: 34px;
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  border-radius: 8px;
  color: #373C44 !important;
  font-size: 12px;
  padding: 0 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.we-panel .we-field input:focus,
.we-panel .we-field select:focus,
.we-panel input:focus,
.we-panel select:focus {
  border-color: #4f6ae8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(79,106,232,0.12) !important;
}
.we-panel input::placeholder { color: #9DA2AA !important; }
.we-panel textarea {
  background: #fff !important;
  border: 1px solid #E7EAEE !important;
  color: #373C44 !important;
  border-radius: 8px;
  box-shadow: none !important;
}
.we-panel textarea::placeholder { color: #9DA2AA !important; }

/* Stepper modal inputs stay dark — it's a body-portal overlay, not chrome.
   Kept separate from `.we-panel` now that panel is light-themed. */
.stepper-modal input[type="text"],
.stepper-modal input[type="number"],
.stepper-modal select:not(.we-sort-select),
.stepper-body input[type="text"],
.stepper-body input[type="number"],
.stepper-body select:not(.we-sort-select) {
  height: 34px;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px;
  color: #fff !important;
  font-size: 12px;
  padding: 0 10px;
  outline: none;
  transition: all 0.15s;
  width: 100%;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.stepper-modal input:focus, .stepper-modal select:focus,
.stepper-body input:focus, .stepper-body select:focus {
  border-color: rgba(79,106,232,0.5) !important;
  background: rgba(79,106,232,0.06) !important;
}
.stepper-modal input::placeholder,
.stepper-body input::placeholder { color: rgba(255,255,255,0.3) !important; }
.stepper-modal textarea,
.stepper-body textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-radius: 8px;
  box-shadow: none !important;
}

/* ─── Color Picker ──── */
.we-color-field { display: flex; align-items: flex-end; gap: 8px; }
.we-color-swatch {
  /* 36px border-box == the rendered height of sibling inputs (34px height +
     1px border, content-box = 36px). Without border-box the 2px swatch border
     made it 38px, so it stuck up ~2px above the hex / clear / Radius / Opacity
     fields in every .we-color-field row. Keeps all colour swatches aligned. */
  box-sizing: border-box;
  width: 36px; height: 36px; border-radius: 8px;
  border: 2px solid #E7EAEE;
  position: relative; overflow: hidden; cursor: pointer;
  flex-shrink: 0; transition: border-color 0.15s;
}
.we-color-swatch:hover { border-color: #D5D9E0; }
.we-color-swatch input[type="color"] {
  position: absolute; top: -4px; left: -4px;
  width: 42px; height: 42px; border: none; cursor: pointer; opacity: 0;
}
.we-hex-input {
  height: 34px; width: 84px;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 8px; color: #373C44;
  font-size: 11px; font-family: monospace;
  padding: 0 10px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.we-hex-input:focus { border-color: #4f6ae8; box-shadow: 0 0 0 3px rgba(79,106,232,0.12); }

/* Clear (×) button next to a colour swatch — only rendered when the field
   has a value to clear (ng-if on the parent). Hover tint communicates that
   the action is destructive (removes the colour override). */
.we-color-clear {
  width: 28px; height: 34px;
  background: transparent;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  color: #9DA2AA;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.we-color-clear:hover {
  background: rgba(231,76,60,0.08);
  border-color: rgba(231,76,60,0.25);
  color: #E74C3C;
}
.we-color-clear:focus-visible {
  outline: none;
  border-color: #4f6ae8;
  box-shadow: 0 0 0 3px rgba(79,106,232,0.12);
}

/* ─── Typography Level Tabs ──── */
.we-typo-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.we-typo-tabs button {
  padding: 5px 12px;
  font-size: 10px;
  border: 1px solid #E7EAEE !important;
  border-radius: 4px;
  background: #fff !important;
  color: #6A6F77 !important;
  cursor: pointer;
  letter-spacing: 0.3px;
  outline: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.we-typo-tabs button:hover {
  background: #F9FAFB !important;
  color: #373C44 !important;
  border-color: #D5D9E0 !important;
}
.we-typo-tabs button.we-active,
.we-typo-tabs button.we-active:hover,
.we-typo-tabs button.we-active:focus {
  background: rgba(79,106,232,0.10) !important;
  color: #4f6ae8 !important;
  border-color: rgba(79,106,232,0.35) !important;
}

/* Empty hint when admin has disabled every control for the current level. */
.we-typo-empty {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
  color: #6A6F77;
  background: rgba(243,156,18,0.08);
  border: 1px dashed rgba(243,156,18,0.45);
  border-radius: 6px;
}
.we-typo-empty i { color: #F39C12; }

/* ─── Font Picker ──── */
.we-font-picker { position: relative; margin-bottom: 12px; }
.we-font-input-wrap { position: relative; }
.we-font-input {
  width: 100%; height: 32px; font-size: 11px; padding: 0 50px 0 10px;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 6px; color: #373C44;
  font-family: 'Inter', sans-serif;
}
.we-font-input:focus { outline: none; border-color: #4f6ae8; box-shadow: 0 0 0 3px rgba(79,106,232,0.12); }
.we-font-input-actions {
  position: absolute; right: 4px; top: 4px; display: flex; gap: 2px;
}
.we-font-input-actions button {
  width: 24px; height: 24px; border: none;
  background: #F3F5F8; border-radius: 4px;
  color: #6A6F77; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.we-font-input-actions button:hover { background: #E7EAEE; color: #373C44; }

.we-font-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  max-height: 240px; overflow-y: auto;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 6px; margin-top: 2px;
  box-shadow: 0 8px 24px rgba(4,9,17,0.10);
}
.we-font-current {
  padding: 6px 10px; font-size: 10px; line-height: 1.3;
  color: #6A6F77;
  background: rgba(79,106,232,0.06);
  border-bottom: 1px solid #E7EAEE;
  font-family: 'Inter', sans-serif;
}
.we-font-current strong { color: #1F242B; font-weight: 600; }
.we-font-item {
  padding: 6px 10px; font-size: 13px; line-height: 1.4;
  color: #373C44; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.08s;
}
.we-font-item:hover { background: #F3F5F8; }
.we-font-default {
  font-size: 11px; font-style: italic;
  color: #9DA2AA;
  font-family: 'Inter', sans-serif;
  border-bottom: 1px solid #E7EAEE;
}
.we-font-selected {
  background: rgba(79,106,232,0.10);
  color: #4f6ae8;
}
.we-font-selected:hover { background: rgba(79,106,232,0.16); }
.we-font-empty {
  padding: 12px 10px; font-size: 11px; color: #9DA2AA;
  text-align: center; font-style: italic;
  font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for font dropdown */
.we-font-dropdown::-webkit-scrollbar { width: 6px; }
.we-font-dropdown::-webkit-scrollbar-track { background: #F3F5F8; }
.we-font-dropdown::-webkit-scrollbar-thumb {
  background: #DEE2E7; border-radius: 3px;
}
.we-font-dropdown::-webkit-scrollbar-thumb:hover { background: #C4C9D2; }

/* ─── Align Group ──── */
.we-align-group {
  display: flex;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #E7EAEE;
}
.we-align-group button {
  flex: 1;
  height: 32px;
  border: none !important;
  border-right: 1px solid #E7EAEE !important;
  background: #fff !important;
  color: #9DA2AA !important;
  cursor: pointer;
  font-size: 11px;
  outline: none;
  transition: background 0.12s, color 0.12s;
}
.we-align-group button:last-child { border-right: none !important; }
.we-align-group button:hover {
  background: #F9FAFB !important;
  color: #373C44 !important;
}
.we-align-group button.we-active,
.we-align-group button.we-active:hover,
.we-align-group button.we-active:focus {
  background: #4f6ae8 !important;
  color: #fff !important;
  border-right-color: #4f6ae8 !important;
}

/* ─── Toggle Switch ──── */
.we-toggle {
  position: relative; display: inline-block;
  width: 36px; height: 20px; margin: 0; cursor: pointer;
}
.we-toggle input { opacity: 0; width: 0; height: 0; }
.we-toggle span {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #D5D9E0; border-radius: 20px;
  transition: background 0.2s;
}
.we-toggle span::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(4,9,17,0.12);
  transition: transform 0.2s;
}
.we-toggle input:checked + span { background: #4f6ae8; }
.we-toggle input:checked + span::before { transform: translateX(16px); }

/* ─── Empty State ──── */
.we-empty {
  text-align: center; padding: 24px 12px;
  color: #9DA2AA;
}
.we-empty i { font-size: 24px; margin-bottom: 8px; display: block; }
.we-empty p { font-size: 11px; margin: 0; }

/* ─── Menu Items ──── */
.we-add-btn {
  padding: 5px 12px; border-radius: 6px; border: none;
  background: rgba(79,106,232,0.10); color: #4f6ae8;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.we-add-btn:hover { background: rgba(79,106,232,0.18); }

.we-menu-list { display: flex; flex-direction: column; gap: 6px; }
.we-menu-item {
  border: 1px solid #E7EAEE;
  border-radius: 8px; overflow: hidden;
  background: #fff;
}
.we-menu-item-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
}
.we-menu-item-num {
  width: 24px; height: 24px; border-radius: 6px;
  background: #fff; color: #373C44;
  border: 1px solid #E7EAEE;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.we-menu-item-header input {
  height: 26px; background: #F9FAFB;
  border: 1px solid #E7EAEE; border-radius: 5px;
  color: #373C44; font-size: 11px; padding: 0 8px; outline: none;
}
.we-menu-item-header input:focus { border-color: #4f6ae8; }
.we-menu-item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.we-menu-item-actions button {
  width: 22px; height: 22px; border: none; border-radius: 4px;
  background: transparent; color: #9DA2AA;
  cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.we-menu-item-actions button:hover { background: #F3F5F8; color: #373C44; }
.we-menu-del:hover { background: #FDECEC !important; color: #E74C3C !important; }
.we-menu-item-body {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 8px;
}
.we-menu-item-body input[type="text"] {
  height: 24px; background: #F9FAFB;
  border: 1px solid #E7EAEE; border-radius: 5px;
  color: #6A6F77; font-size: 10px; padding: 0 8px; outline: none;
}
.we-menu-item-body input[type="text"]:focus { border-color: #4f6ae8; }

/* ─── Category Pills ──── */
.we-cat-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.we-cat-pill {
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid #E7EAEE;
  background: #fff;
  font-size: 10px; font-weight: 500;
  color: #6A6F77;
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.we-cat-pill:hover { border-color: #D5D9E0; color: #373C44; background: #F9FAFB; }
.we-cat-pill-active {
  border-color: rgba(79,106,232,0.35) !important;
  background: rgba(79,106,232,0.08) !important;
  color: #4f6ae8 !important;
}

/* ─── Category Search & Select ──── */
.we-select-box { position: relative; margin-bottom: 8px; }
.we-select-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; height: 34px;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 6px; cursor: pointer;
  font-size: 12px; color: #373C44;
  transition: border-color 0.15s;
}
.we-select-trigger:hover { border-color: #D5D9E0; }
.we-select-dropdown {
  position: absolute; top: 38px; left: 0; right: 0;
  background: #fff;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(4,9,17,0.10);
  z-index: 10; overflow: hidden;
}
.we-select-search {
  width: 100%; height: 34px; border: none;
  border-bottom: 1px solid #E7EAEE;
  background: #F9FAFB;
  color: #373C44; font-size: 11px;
  padding: 0 10px; outline: none;
}
.we-select-search::placeholder { color: #9DA2AA; }
.we-select-options {
  max-height: 180px; overflow-y: auto;
}
.we-select-options::-webkit-scrollbar { width: 4px; }
.we-select-options::-webkit-scrollbar-thumb { background: #DEE2E7; border-radius: 4px; }
.we-select-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  font-size: 11px; color: #6A6F77;
  transition: background 0.1s;
}
.we-select-option:hover { background: #F3F5F8; color: #373C44; }
.we-select-option-active { color: #4f6ae8; background: rgba(79,106,232,0.06); }
.we-select-option-active i { color: #4f6ae8; }
.we-select-option i { font-size: 12px; flex-shrink: 0; }
.we-select-option span { flex: 1; }
.we-select-count {
  font-size: 9px; color: #9DA2AA;
  flex-shrink: 0;
}

/* ─── Selected Chips ──── */
.we-selected-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 4px;
}
.we-chip-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(79,106,232,0.10);
  color: #4f6ae8; font-size: 10px; font-weight: 500;
}
.we-chip-tag i {
  font-size: 8px; cursor: pointer; opacity: 0.6;
  transition: opacity 0.1s;
}
.we-chip-tag i:hover { opacity: 1; }

/* ─── Item Category Header (inside item picker) ──── */
.we-item-cat-header {
  display: flex; align-items: center;
  padding: 6px 10px; font-size: 10px; font-weight: 600;
  color: #9DA2AA; text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #F9FAFB;
  border-bottom: 1px solid #E7EAEE;
  cursor: pointer;
}
.we-item-cat-header:hover { background: rgba(79,106,232,0.06); color: #4f6ae8; }

/* ─── Item Picker ──── */
.we-item-picker {
  max-height: 220px; overflow-y: auto;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #fff;
}
.we-item-picker::-webkit-scrollbar { width: 4px; }
.we-item-picker::-webkit-scrollbar-thumb { background: #DEE2E7; border-radius: 4px; }

.we-item-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  cursor: pointer; transition: background 0.1s;
  border-bottom: 1px solid #EEF0F4;
}
.we-item-row:last-child { border-bottom: none; }
.we-item-row:hover { background: #F9FAFB; }
.we-item-row-selected { background: rgba(79,106,232,0.06); }
.we-item-row-selected:hover { background: rgba(79,106,232,0.10); }

.we-item-check {
  font-size: 12px; color: #C4C9D2;
  flex-shrink: 0; width: 16px; text-align: center;
}
.we-item-row-selected .we-item-check { color: #4f6ae8; }

/* ─── Accordion (Display Options, etc.) ──── */
.we-accordion {
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.we-accordion__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: #F9FAFB;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.we-accordion__hdr:hover { background: #F3F5F8; }
.we-accordion__title {
  font-size: 11px;
  font-weight: 600;
  color: #373C44;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.we-accordion__hdr i { font-size: 9px; color: #9DA2AA; }
.we-accordion__body {
  padding: 0 12px 10px;
  background: #fff;
}

/* ─── Selected Items Panel (step 2 of menu stepper) ──── */
.we-selected-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.we-selected-header__title {
  font-size: 11px;
  font-weight: 600;
  color: #373C44;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex: 1;
}
.we-selected-header__count {
  font-size: 11px;
  font-weight: 700;
  color: #4f6ae8;
  background: rgba(79,106,232,0.10);
  padding: 1px 7px;
  border-radius: 999px;
}
.we-selected-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px;
  color: #C4C9D2;
  font-size: 11px;
  text-align: center;
}
.we-selected-empty i { font-size: 20px; opacity: 0.4; }
.we-selected-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Drag-scroll arrow zones — pinned to the TOP / BOTTOM of the visible
   scroll viewport via `position: sticky`. Without sticky the down arrow
   sat after the last item in a 282-item list (i.e., far below the
   viewport) and only became visible after the user manually scrolled
   there — defeating the purpose. Now both arrows stay reachable
   throughout the drag regardless of how long the list is or where the
   parent has scrolled to. Solid blue fill makes them unmistakably
   identifiable as drop-on-me targets. */
.we-drag-scroll-zone {
  position: sticky;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  height: 28px;
  margin: 4px 0;
  background: rgba(79,106,232,0.92);
  border: 1px solid var(--tb-accent, #4f6ae8);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  cursor: ns-resize;
  box-shadow: 0 4px 10px rgba(79,106,232,0.30);
  transition: background 0.12s, transform 0.12s;
  user-select: none;
  pointer-events: auto;
}
.we-drag-scroll-zone--up   { top: 0; }
.we-drag-scroll-zone--down { bottom: 0; }
.we-drag-scroll-zone:hover {
  background: var(--tb-accent, #4f6ae8);
  transform: scale(1.01);
}
.we-drag-scroll-zone .fa {
  animation: we-drag-scroll-pulse 1s ease-in-out infinite;
}
@keyframes we-drag-scroll-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(-2px); opacity: 1; }
}
.we-drag-scroll-zone--down .fa {
  animation-name: we-drag-scroll-pulse-down;
}
@keyframes we-drag-scroll-pulse-down {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(2px); opacity: 1; }
}
/* Editor-sidebar variant — slimmer to fit the narrower panel context. */
.we-drag-scroll-zone--editor {
  height: 22px;
  font-size: 12px;
  margin: 2px 0;
}
.we-selected-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #F9FAFB;
  border: 1px solid #EEF0F4;
  border-radius: 7px;
  min-width: 0;
  position: relative;
  cursor: grab;
  transition: background 0.12s, border-color 0.12s, transform 0.12s, opacity 0.12s;
}
.we-selected-row:active { cursor: grabbing; }
.we-selected-row.is-dragging {
  opacity: 0.45;
  border-style: dashed;
  transform: scale(0.995);
}
/* Drop indicator — 2px blue bar above/below the target row. */
.we-selected-row.is-drop-above::before,
.we-selected-row.is-drop-below::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: #4f6ae8;
  border-radius: 2px;
  pointer-events: none;
}
.we-selected-row.is-drop-above::before { top: -3px; }
.we-selected-row.is-drop-below::after  { bottom: -3px; }

/* Grip — visual affordance that the row is draggable. */
.we-selected-grip {
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  font-size: 11px;
  color: #C4C9D2;
  cursor: grab;
  transition: color 0.12s;
}
.we-selected-row:hover .we-selected-grip { color: #6A6F77; }
.we-selected-thumb {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #E7EAEE;
  background: #F3F5F8;
}
.we-selected-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C4C9D2;
  font-size: 12px;
}
.we-selected-name {
  font-size: 12px;
  font-weight: 500;
  color: #373C44;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.we-selected-num { color: #9DA2AA; font-weight: 400; }
.we-selected-category {
  font-size: 10px;
  color: #9DA2AA;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.we-selected-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #C4C9D2;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 11px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
  line-height: 1;
}
.we-selected-remove:hover { color: #e74c3c; background: rgba(231,76,60,0.08); }


.we-item-name {
  font-size: 13px; font-weight: 600; color: #373C44;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.we-item-meta {
  font-size: 11px; color: #9DA2AA;
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px;
  line-height: 1.3;
  min-width: 0;
}
/* Format chip — small uppercase tag (PNG / JPG / MP4 …). */
.we-item-meta__type {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
  color: #6A6F77;
  padding: 1px 6px;
  border-radius: 999px;
  background: #EFF2F6;
  flex-shrink: 0;
}
/* `.we-item-meta__primary` rules removed — the legacy "Primary" chip
   communicated a single-URL contract that no longer fits the playlist /
   cycling Media Player. Every item plays; there is no primary. */
.we-item-price {
  font-size: 11px; font-weight: 600; color: #6A6F77;
  flex-shrink: 0;
}
.we-item-img {
  width: 32px; height: 32px; border-radius: 5px;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid #E7EAEE;
  background: #F3F5F8;
}

/* ─── Media Preview ──── */
.we-media-preview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E7EAEE;
  background: #F3F5F8;
}
.we-media-remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(4,9,17,0.55); border: none;
  color: #fff; font-size: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.we-media-preview:hover .we-media-remove { opacity: 1; }
.we-media-remove:hover { background: rgba(231,76,60,0.92); }

.we-media-empty {
  border: 2px dashed #D5D9E0;
  border-radius: 10px;
  padding: 20px; text-align: center;
  color: #9DA2AA;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  background: #F9FAFB;
}
.we-media-empty:hover { border-color: #4f6ae8; background: rgba(79,106,232,0.04); }
.we-media-empty p { font-size: 12px; margin: 0 0 2px; font-weight: 500; color: #373C44; }
.we-media-empty span { font-size: 10px; opacity: 0.7; }

/* ─── Media Thumbnail Grid ──── */
.we-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}
.we-media-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #E7EAEE;
  background: #F3F5F8;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, transform 0.12s;
}
.we-media-thumb:hover { border-color: #D5D9E0; transform: scale(1.04); }
/* `.we-media-thumb-active` + `.we-media-thumb-check` removed — primary
   highlight is no longer a concept on the Media Player widget. */
.we-media-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.we-media-thumb-video {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #1F242B;
  color: rgba(255,255,255,0.6); font-size: 20px;
}

/* ═══════════════════════════════════════════════
   PALETTE (light · category-grouped widget list)
   ═══════════════════════════════════════════════ */
.tb-palette-simple {
  width: 13%;
  min-width: 200px;
  background: #fff;
  border-right: 1px solid #E7EAEE;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #DEE2E7 transparent;
}
.tb-palette-simple::-webkit-scrollbar { width: 4px; }
.tb-palette-simple::-webkit-scrollbar-thumb { background: #DEE2E7; border-radius: 2px; }

.tb-palette-list {
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tb-palette-cat-group { display: flex; flex-direction: column; gap: 6px; }
.tb-palette-cat-group + .tb-palette-cat-group { margin-top: 4px; }

/* Uppercase category label — "MENU" / "MEDIA" / etc. */
.tb-widget-cat {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #BABFC8;
  padding: 10px 2px 4px;
}
.tb-palette-cat-group:first-child .tb-widget-cat { padding-top: 0; }

/* Pill-like widget button that adds the widget to the canvas */
.tb-widget-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #373C44;
  background: #F9FAFB;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
  width: 100%;
  display: block;
}
.tb-widget-btn:hover {
  background: #ECF3FE;
  border-color: #C6DAFC;
  color: #0E52C1;
}
.tb-widget-btn:active { transform: scale(0.98); }

/* Palette card wrapper: add-button + a corner info "i" (only when the def has media). */
.tb-widget-btn-wrap { position: relative; }
.tb-widget-btn-wrap .tb-widget-btn { padding-right: 34px; }
/* Scoped under .tb-widget-btn-wrap so it never leaks onto the canvas
   widget-label divs, which reuse the .tb-widget-info class name. */
.tb-widget-btn-wrap .tb-widget-info {
  position: absolute;
  top: 50%; right: 8px; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #B7BCC6;
  border-radius: 50%; cursor: pointer; font-size: 12px;
  /* reset the unscoped .tb-widget-info halo that would leak a ghost shadow-circle here */
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
/* re-enable the glyph (the unscoped `.tb-widget-info i { display:none }` for canvas labels also blanks this palette icon) */
.tb-widget-btn-wrap .tb-widget-info i { display: inline-block; line-height: 1; }
.tb-widget-btn-wrap .tb-widget-info:hover { background: #EAF1FE; color: #0E52C1; }
.tb-widget-btn-wrap .tb-widget-info:active { transform: translateY(-50%) scale(0.92); }
.tb-widget-btn-wrap .tb-widget-info:focus-visible { outline: 2px solid #4185F4; outline-offset: 1px; }

/* Widget info popup — gradient-hero detail card. Palette per CLAUDE.md §6: primary #1E3A5F, accent #2D7DD2. */
.tb-info-overlay { background: rgba(20, 24, 33, 0.58); }

.tb-info-card {
  width: 640px;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 16px;
  color: #2C3E50;
  box-shadow: 0 24px 60px rgba(20, 24, 33, 0.32);
  animation: tb-info-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tb-info-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-info-card { animation: none; }
}

/* Gradient hero header */
.tb-info-hero {
  position: relative;
  flex: none;
  padding: 22px 24px 20px;
  background: linear-gradient(135deg, #1E3A5F 0%, #2D7DD2 100%);
  color: #FFFFFF;
}
.tb-info-hero__title {
  margin: 0;
  padding-right: 36px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.tb-info-hero__chip {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
}
.tb-info-hero__x {
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF; font-size: 15px; cursor: pointer;
  transition: background 0.15s ease;
}
.tb-info-hero__x:hover { background: rgba(255, 255, 255, 0.30); }
.tb-info-hero__x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* Scrollable body */
.tb-info-body {
  padding: 20px 24px 4px;
  overflow-y: auto;
}

/* Media hero — letterbox + type badge */
.tb-info-media {
  position: relative;
  margin: 0 0 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E0E4EA;
  background: linear-gradient(135deg, #F7F9FB 0%, #EDF1F6 100%);
}
.tb-info-media img,
.tb-info-media video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: transparent;
}
.tb-info-media__badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  font-size: 11px; font-weight: 600;
  color: #FFFFFF;
  background: rgba(20, 24, 33, 0.72);
  border-radius: 6px;
}

/* About */
.tb-info-about { margin: 0; }
.tb-info-about__label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9DA2AA;
}
.tb-info-about__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #44515E;
}
.tb-info-about__text--muted { color: #9DA2AA; font-style: italic; }

/* Footer */
.tb-info-card__footer {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 14px 24px 18px;
  border-top: 1px solid #EEF1F5;
}
.tb-info-btn {
  min-width: 88px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #1E3A5F;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.tb-info-btn:hover { background: #16304A; box-shadow: 0 4px 12px rgba(30, 58, 95, 0.28); }
.tb-info-btn:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 2px; }
.tb-widget-btn:focus-visible {
  outline: none;
  border-color: #4185F4;
  box-shadow: 0 0 0 3px rgba(65,133,244,0.12);
}

/* Legacy `.tb-simple-card` kept as a compat shim in case any stepper
   / widget-editor markup still references it; styles mirror the new
   pill so nothing renders broken. */
.tb-simple-card {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #373C44;
  background: #F9FAFB;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: block;
}
.tb-simple-card:hover { background: #ECF3FE; border-color: #C6DAFC; color: #0E52C1; transform: none; }
.tb-simple-card-title { font-size: 13px; font-weight: 600; color: #373C44; }
.tb-simple-card-desc  { font-size: 11px; color: #9DA2AA; margin-top: 2px; }

/* ═══════════════════════════════════════════════
   STEPPER MODAL
   ═══════════════════════════════════════════════ */
.stepper-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1100;
  /* Top-anchored with padding so the modal always shows a clear top gap
     (user asked for margin-top above the stepper). Bottom padding keeps
     the modal clear of the viewport edge when it hits max-height. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px 24px;
  overflow-y: auto;
}
.stepper-modal {
  width: 900px;
  max-width: 92vw;
  height: auto;
  max-height: calc(100vh - 64px);
  background: #13141f;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 32px 100px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.stepper-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  background: #181928;
}
.stepper-steps {
  display: flex; gap: 6px; padding: 10px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.stepper-step-dot {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.08);
  flex: 1;
  transition: all 0.3s;
}
.stepper-step-dot.active { background: #4f6ae8; box-shadow: 0 0 12px rgba(79,106,232,0.4); }
.stepper-step-dot.done   { background: #10b981; }
.stepper-body {
  flex: 1; overflow-y: auto; padding: 24px;
  min-height: 0;
  display: flex; flex-direction: column;
}
.stepper-body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
.stepper-body::-webkit-scrollbar { width: 4px; }
.stepper-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.stepper-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  background: #181928;
}

/* ── Menu Stepper: Split Layout ── */
.stepper-menu-layout {
  display: flex; gap: 0; flex: 1; min-height: 0;
}
.stepper-menu-left {
  width: 280px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; min-height: 0;
}
.stepper-menu-left-header {
  padding: 0 0 12px; flex-shrink: 0;
}
.stepper-menu-left-list {
  flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px;
}
.stepper-menu-left-list::-webkit-scrollbar { width: 3px; }
.stepper-menu-left-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.stepper-menu-right {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; padding-left: 20px;
}
.stepper-menu-right-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px; flex-shrink: 0;
}
.stepper-menu-right-list {
  flex: 1; overflow-y: auto;
}
.stepper-menu-right-list::-webkit-scrollbar { width: 3px; }
.stepper-menu-right-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* ── Category pill in left panel ── */
.stepper-cat-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 2px;
  color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 500;
}
.stepper-cat-pill:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); }
.stepper-cat-pill-active {
  background: rgba(79,106,232,0.1); color: #fff;
  border-left: 3px solid #4f6ae8; padding-left: 9px;
}
.stepper-cat-pill-count {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 10px;
  color: rgba(255,255,255,0.35);
}
.stepper-cat-pill-active .stepper-cat-pill-count {
  background: rgba(79,106,232,0.2); color: #8da4ef;
}

/* ── Selected summary bar ── */
.stepper-selected-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-top: 12px;
  background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15);
  border-radius: 10px; flex-shrink: 0;
}
.stepper-selected-count {
  font-size: 20px; font-weight: 700; color: #10b981; line-height: 1;
}
.stepper-selected-label {
  font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════
   Item picker v2 — Option B redesign
   Adds filter chips · selection tray · per-category selected count ·
   refined item rows (48px height, 44px thumb, 2-line name clamp, 18px
   diet dot, 4px accent left-border on selected). Layered on top of
   .stepper-menu-*  / .we-item-* / .stepper-cat-pill — older surfaces
   keep working unchanged.
   ═════════════════════════════════════════════════════════════════════ */

/* Category-pill name cell — extracted from inline styles. */
.stepper-cat-pill__name {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stepper-cat-pill:focus-visible {
  outline: 2px solid var(--rw-primary, #4f6ae8);
  outline-offset: -2px;
}

/* "12 · 3" badge — total count + smaller selected pill before it. */
.stepper-cat-pill-count__sel {
  display: inline-block;
  background: var(--rw-primary, #4f6ae8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 8px;
  margin-right: 4px;
  min-width: 16px;
  text-align: center;
}

/* Layout v2 — same flex, marker class so future tweaks can target only v2.
   `overflow: hidden` here means the layout never spills out of the body —
   only the inner panels (.stepper-menu-left, .stepper-menu-right-list) scroll. */
.stepper-menu-layout--v2 {
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* Disable modal-body scroll when this picker is mounted — Angular toggles
   .stepper-body--no-scroll via ng-class so we don't depend on :has() support.
   Inner panels (.stepper-menu-left-list, .stepper-menu-right-list--v2) own
   their own overflow:auto regions and scroll independently. */
.stepper-body.stepper-body--no-scroll {
  overflow: hidden !important;
}
.stepper-body.stepper-body--no-scroll > div {
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

/* Right pane is a flex column; the items list owns its scroll via an
   explicit `max-height: max(200px, calc(100vh - 360px))` further down so
   we don't depend on the multi-level flex `min-height: 0` chain being
   intact (which was breaking on 280+ item lists). */
.stepper-menu-right--v2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Left rail contains its own category-list scroll. Scoped to v2 only so
   the original layout isn't affected. */
.stepper-menu-layout--v2 .stepper-menu-left {
  overflow: hidden;
  min-height: 0;
}

/* Right pane header — theme-aware typography. */
.stepper-menu-right-header__title {
  font-size: 14px; font-weight: 700;
  color: var(--tb-text-1, #fff);
}
.stepper-menu-right-header__subtitle {
  font-size: 11px;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  margin-top: 2px;
}
/* When the editor's Menu tab is active, kill body-level scroll so the
   we-menu-v2 inner sections (Items list, Selected tray) own their own
   overflow. Toggled via ng-class — no :has() dependency. */
/* ════════════════════════════════════════════════════════════════════
   Side-panel editor — Menu tab v2 (we-menu-v2)
   Flows naturally inside .we-body's overflow-y:auto. Items list + Selected
   tray each have max-height caps so they never push the panel ridiculously
   tall; if there are many of either, that section scrolls inside its own
   region while the surrounding chrome stays put.
   Visual order: Add Items accordion is shown FIRST (above Selected) via
   flex `order` — DOM order stays "Selected then Add" so tab nav reads
   "review your picks first, then add more" without DOM reshuffling.
   ═════════════════════════════════════════════════════════════════════ */
.we-menu-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.we-menu-v2__body {
  /* Flex children get explicit order so visual stacking can differ from
     DOM order without breaking keyboard tab traversal. */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.we-menu-v2__add-accordion { order: 0; }
.we-menu-v2__selected      { order: 1; }

/* ════════════════════════════════════════════════════════════════════
   Media widget editor (we-media-v2)
   Polished v2: chip-style Source toggle, themed playlist picker, and
   drag-reorder media list reusing .we-selected-row + we-seq-pill from
   the Menu redesign.
   ═════════════════════════════════════════════════════════════════════ */
.we-media-v2 {
  display: flex; flex-direction: column;
  gap: 12px;
}

/* Field row — label + control side by side. */
.we-media-v2__field-row {
  display: flex; align-items: center; gap: 10px;
}
.we-media-v2__field-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-text-2, rgba(255,255,255,0.75));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 90px;
}
.we-media-v2__select {
  flex: 1;
  height: 32px;
  padding: 0 28px 0 10px;
  background: var(--tb-input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--tb-input-border, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--tb-text-1, rgba(255,255,255,0.9));
  font-size: 12px;
}

.we-media-v2__source-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.we-media-v2__source-row .stepper-filter-chips { margin: 0; }
.we-media-v2__source-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-text-2, rgba(255,255,255,0.75));
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Playlist single-row picker — radio-card pattern. */
.we-media-v2__playlist-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.we-media-v2__playlist-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--tb-surface, #ffffff);
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.we-media-v2__playlist-row:hover {
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  border-color: var(--tb-border-2, rgba(255,255,255,0.12));
}
.we-media-v2__playlist-row:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}
.we-media-v2__playlist-row--on {
  background: var(--tb-accent-soft, rgba(79,106,232,0.12)) !important;
  border-color: var(--tb-accent, #4f6ae8) !important;
}
.we-media-v2__playlist-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--tb-border-2, rgba(255,255,255,0.25));
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.12s;
}
.we-media-v2__playlist-radio-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.12s;
}
.we-media-v2__playlist-row--on .we-media-v2__playlist-radio {
  border-color: var(--tb-accent, #4f6ae8);
}
.we-media-v2__playlist-row--on .we-media-v2__playlist-radio-dot {
  background: var(--tb-accent, #4f6ae8);
}
.we-media-v2__playlist-icon {
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  font-size: 12px;
}
.we-media-v2__playlist-row--on .we-media-v2__playlist-icon {
  color: var(--tb-accent, #4f6ae8);
}
.we-media-v2__playlist-name {
  flex: 1; min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.we-media-v2__playlist-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  background: var(--tb-overlay-2, rgba(255,255,255,0.08));
  padding: 2px 8px;
  border-radius: 999px;
}
.we-media-v2__playlist-row--on .we-media-v2__playlist-count {
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
}

/* Media list — uses .we-selected-row base for drag-reorder + sequence
   pill + remove button consistency with the Menu Selected list. */
.we-media-v2__list-wrap {
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.we-media-v2__list {
  padding: 4px 8px 8px;
  display: flex; flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.we-media-v2__list::-webkit-scrollbar { width: 4px; }
.we-media-v2__list::-webkit-scrollbar-thumb { background: var(--tb-border-2, rgba(255,255,255,0.12)); border-radius: 4px; }
.we-media-v2__row--readonly { cursor: default; }
.we-media-v2__row--readonly:hover {
  background: var(--tb-surface, #ffffff);
  border-color: var(--tb-border-1, rgba(255,255,255,0.06));
}
.we-media-v2__thumb {
  width: 36px; height: 36px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  position: relative;
}
.we-media-v2__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.we-media-v2__thumb-icon {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  font-size: 14px;
}

/* Iterations input — small numeric pill with × prefix. */
.we-media-v2__iter {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 2px;
  height: 24px;
  padding: 0 4px 0 6px;
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 4px;
  font-size: 11px;
  color: var(--tb-text-2, rgba(255,255,255,0.7));
}
.we-media-v2__iter-label {
  font-weight: 700;
  color: var(--tb-text-3, rgba(255,255,255,0.55));
}
.we-media-v2__iter input {
  width: 28px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--tb-text-1, rgba(255,255,255,0.9));
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.we-media-v2__iter input[disabled] {
  color: var(--tb-text-3, rgba(255,255,255,0.4));
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   Stepper modal Playlist tab — v2 polish (.we-pl-*--v2)
   Layered on top of the existing .we-pl-* layout. Tightens panel headers,
   bumps the Create CTA, and turns the My-Playlists rows into card-style
   pickers with a strong selected state + radio dot.
   ═════════════════════════════════════════════════════════════════════ */
.we-pl-split--v2 { gap: 18px; }

.we-pl-panel-hdr--v2 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
}
.we-pl-panel-hdr--v2 > i { display: none; }
.we-pl-panel-hdr__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--tb-accent-soft, rgba(79,106,232,0.15));
  color: var(--tb-accent, #4f6ae8);
  border-radius: 6px;
  font-size: 13px;
}
.we-pl-panel-hdr__title {
  flex: 1; min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
  letter-spacing: 0.2px;
}
.we-pl-panel-hdr__count {
  display: inline-block;
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Create row — make Create button hero-sized. */
.we-pl-create-row--v2 {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.we-pl-create-row--v2 .we-pl-create-input {
  flex: 1; min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 7px;
  background: var(--tb-input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--tb-input-border, rgba(255,255,255,0.1));
  color: var(--tb-text-1, rgba(255,255,255,0.92));
}
.we-pl-create-btn--v2 {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s, opacity 0.12s;
}
.we-pl-create-btn--v2:hover:not([disabled]) { filter: brightness(0.96); }
.we-pl-create-btn--v2[disabled] { opacity: 0.45; cursor: not-allowed; }

.we-pl-create-hint--v2 {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
}
.we-pl-create-hint--v2 i { color: var(--tb-accent, #4f6ae8); }

/* My Playlists list — card rows with radio dot + arrow affordance. */
.we-pl-right__list--v2 {
  display: flex; flex-direction: column;
  gap: 6px;
}
.we-pl-right__row--v2 {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--tb-surface, #ffffff);
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.we-pl-right__row--v2:hover {
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  border-color: var(--tb-border-2, rgba(255,255,255,0.14));
}
.we-pl-right__row--v2:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}
.we-pl-right__row--v2.is-selected {
  background: var(--tb-accent-soft, rgba(79,106,232,0.12));
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 1px var(--tb-accent, #4f6ae8) inset;
}
.we-pl-right__row--v2 .we-pl-right__row-check { display: none; }
.we-pl-right__radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--tb-border-2, rgba(255,255,255,0.25));
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.we-pl-right__radio-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.12s;
}
.we-pl-right__row--v2.is-selected .we-pl-right__radio {
  border-color: var(--tb-accent, #4f6ae8);
}
.we-pl-right__row--v2.is-selected .we-pl-right__radio-dot {
  background: var(--tb-accent, #4f6ae8);
}
.we-pl-right__row-icon--v2 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--tb-overlay-2, rgba(255,255,255,0.08));
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  flex-shrink: 0;
  font-size: 13px;
}
.we-pl-right__row--v2.is-selected .we-pl-right__row-icon--v2 {
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
}
.we-pl-right__row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.25;
}
.we-pl-right__row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.we-pl-right__row-sub {
  font-size: 11px;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  margin-top: 2px;
}
.we-pl-right__row-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--tb-text-4, rgba(255,255,255,0.3));
  opacity: 0.6;
  transition: transform 0.12s, opacity 0.12s, color 0.12s;
}
.we-pl-right__row--v2:hover .we-pl-right__row-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: var(--tb-accent, #4f6ae8);
}
.we-pl-right__row--v2.is-selected .we-pl-right__row-arrow {
  color: var(--tb-accent, #4f6ae8);
  opacity: 1;
}

/* My Playlists list also caps height + scrolls inside (long catalogs). */
.we-pl-right__list--v2 {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.we-pl-right__list--v2::-webkit-scrollbar { width: 4px; }
.we-pl-right__list--v2::-webkit-scrollbar-thumb { background: var(--tb-border-2, rgba(255,255,255,0.18)); border-radius: 4px; }

.we-pl-empty--v2 {
  text-align: center;
  padding: 28px 16px;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border-radius: 8px;
  border: 1px dashed var(--tb-border-2, rgba(255,255,255,0.18));
}
.we-pl-empty--v2 .we-pl-empty__icon { font-size: 24px; color: var(--tb-text-4, rgba(255,255,255,0.3)); margin-bottom: 8px; }
.we-pl-empty--v2 .we-pl-empty__title { font-size: 13px; font-weight: 700; color: var(--tb-text-1, rgba(255,255,255,0.9)); margin-bottom: 4px; }
.we-pl-empty--v2 .we-pl-empty__sub { font-size: 11px; color: var(--tb-text-3, rgba(255,255,255,0.5)); }

/* Playlist media preview v2 — row-based + draggable + deletable. */
.we-pl-right__preview--v2 {
  margin-top: 14px;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 10px;
  overflow: hidden;
}
.we-pl-right__preview--v2 .we-pl-right__preview-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  background: var(--tb-overlay-2, rgba(255,255,255,0.04));
}
.we-pl-right__preview-hdr-left {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tb-text-1, rgba(255,255,255,0.9));
}
.we-pl-right__preview-hdr-left strong {
  color: var(--tb-accent, #4f6ae8);
}

/* Save Changes button — accent CTA, only shown when admin has unsaved edits. */
.we-pl-save-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s, opacity 0.12s;
}
.we-pl-save-btn:hover:not([disabled]) { filter: brightness(0.95); }
.we-pl-save-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.we-pl-save-btn:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}

/* ─── Playlist tab v3 — single-column accordion ─────────────────────────
   Replaces .we-pl-split. One card per playlist. Selected card expands
   inline to show its items + dropzone — removes the duplicated "selected
   playlist" UI that lived on both sides of the old split layout.
   ──────────────────────────────────────────────────────────────────── */
.we-pl-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 260px;
}

.we-pl-stack__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  margin-bottom: 2px;
}
.we-pl-stack__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--tb-text-muted, #5C6773);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.we-pl-stack__title > .fa { color: var(--tb-accent, #4f6ae8); font-size: 12px; }
.we-pl-stack__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(79,106,232,0.12);
  color: var(--tb-accent, #4f6ae8);
  font-size: 10px; font-weight: 700;
  margin-left: 2px;
}
.we-pl-stack__new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tb-accent, #4f6ae8); color: #fff;
  border: 1px solid var(--tb-accent, #4f6ae8);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, transform 80ms;
}
.we-pl-stack__new-btn:hover { filter: brightness(0.95); }
.we-pl-stack__new-btn:active { transform: scale(0.97); }
.we-pl-stack__new-btn:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}

.we-pl-stack__create {
  display: flex; gap: 8px; align-items: center;
  background: var(--tb-card-bg, #F4F6FB);
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  border-radius: 10px;
  padding: 10px 12px;
}
.we-pl-stack__create-input {
  flex: 1;
  height: 36px;
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.10));
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  background: #fff;
  color: var(--tb-text-strong, #0F1419);
  outline: none;
}
.we-pl-stack__create-input:focus {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 3px rgba(79,106,232,0.15);
}
.we-pl-stack__create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tb-accent, #4f6ae8); color: #fff;
  border: 1px solid var(--tb-accent, #4f6ae8);
  border-radius: 8px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.we-pl-stack__create-btn:hover:not([disabled]) { filter: brightness(0.95); }
.we-pl-stack__create-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.we-pl-stack__list {
  display: flex; flex-direction: column;
  gap: 6px;
}

/* Card — collapsed by default; expands when selected. Denser visual
   weight + lighter border so the LIST reads as a unit rather than four
   separate floating cards. */
.we-pl-card {
  background: #fff;
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms, transform 80ms;
}
.we-pl-card:hover {
  border-color: var(--tb-border-2, rgba(15,20,25,0.18));
  transform: translateY(-1px);
}
.we-pl-card.is-selected {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 2px 10px rgba(79,106,232,0.12);
}

.we-pl-card__hdr {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
  min-height: 44px;
}
.we-pl-card__hdr:hover { background: rgba(79,106,232,0.04); }
.we-pl-card.is-selected .we-pl-card__hdr {
  background: rgba(79,106,232,0.06);
}
.we-pl-card__hdr:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: -2px;
}

.we-pl-card__radio {
  width: 18px; height: 18px;
  border: 2px solid var(--tb-border-2, rgba(15,20,25,0.30));
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color 120ms;
}
.we-pl-card__radio-dot {
  width: 8px; height: 8px;
  background: var(--tb-accent, #4f6ae8);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 120ms;
}
.we-pl-card.is-selected .we-pl-card__radio { border-color: var(--tb-accent, #4f6ae8); }
.we-pl-card.is-selected .we-pl-card__radio-dot { opacity: 1; }

.we-pl-card__icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(79,106,232,0.10);
  color: var(--tb-accent, #4f6ae8);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.we-pl-card.is-selected .we-pl-card__icon {
  background: var(--tb-accent, #4f6ae8); color: #fff;
}

.we-pl-card__body {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.we-pl-card__name {
  font-size: 13.5px; font-weight: 600;
  color: var(--tb-text-strong, #0F1419);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.we-pl-card__sub {
  font-size: 11px; color: var(--tb-text-muted, #5C6773);
  white-space: nowrap;
  padding: 2px 8px;
  background: rgba(15,20,25,0.04);
  border-radius: 999px;
  flex-shrink: 0;
}
.we-pl-card__chev {
  color: var(--tb-text-muted, #5C6773);
  font-size: 12px;
  transition: color 120ms;
}
.we-pl-card.is-selected .we-pl-card__chev { color: var(--tb-accent, #4f6ae8); }

/* Expanded panel inside selected card */
.we-pl-card__panel {
  border-top: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  padding: 12px 14px 14px;
  background: rgba(79,106,232,0.03);
}

/* Clear-selection button in the stack header — text-link style, no
   border. Subtle red tone reads as "this resets" without screaming. */
.we-pl-stack__clear-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: 0;
  color: var(--tb-text-muted, #5C6773);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.we-pl-stack__clear-btn:hover {
  color: #E74C3C;
  background: rgba(239,68,68,0.06);
}
.we-pl-stack__clear-btn:focus-visible {
  outline: 2px solid #E74C3C;
  outline-offset: 2px;
}
.we-pl-stack__clear-btn .fa { font-size: 11px; }

/* Read-only tag in the card sub-header — signals "edit elsewhere" without
   adding another button to misclick. */
.we-pl-card__readonly-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  color: var(--tb-text-muted, #5C6773);
  background: rgba(15,20,25,0.04);
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  border-radius: 999px;
  padding: 4px 10px;
  text-transform: none;
  letter-spacing: 0.1px;
}
.we-pl-card__readonly-tag .fa { font-size: 10px; opacity: 0.75; }

/* Static position pill — replaces the editable <select> pill in the
   read-only playlist preview. Same shape so row alignment matches the
   editor surface, but it's a plain badge — no caret, no interaction. */
.we-seq-pill--static {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--tb-accent, #4f6ae8);
  color: #fff;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.we-pl-media-row--readonly {
  cursor: default;
}

/* Read-only timing badges on the playlist preview row (duration / plays).
   Right-aligned alongside the type pill so admins can scan timing at a
   glance without opening the Playlists tab to inspect each item. */
.we-pl-timing {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.we-pl-timing__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15,20,25,0.05);
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  color: var(--tb-text-strong, #0F1419);
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.we-pl-timing__pill .fa { font-size: 10px; opacity: 0.75; }
.we-pl-timing__pill--duration { color: #2D7DD2; background: rgba(45,125,210,0.08); border-color: rgba(45,125,210,0.20); }
.we-pl-timing__pill--plays    { color: #865FC2; background: rgba(134,95,194,0.08); border-color: rgba(134,95,194,0.20); }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-timing__pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-timing__pill--duration { color: #8FB6E8; background: rgba(45,125,210,0.16); }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-timing__pill--plays    { color: #B79CD9; background: rgba(134,95,194,0.16); }

/* ─────────────────────────────────────────────────────────────────────
   Editor-sidebar media list — v3 redesign
   Slim, scannable rows. No box-y drag handle, no chunky position-pill
   borders, single × remove button. Iteration field uses repeat icon +
   "plays" suffix so it's never confused with the row's × delete.
   ───────────────────────────────────────────────────────────────────── */
.we-media-v3 { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
/* Inset the header + rows from the card border so the list isn't flush. */
.we-media-v2__list-wrap.we-media-v3 { padding: 10px; }
.we-media-v3__hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.we-media-v3__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--tb-text-muted, #5C6773);
  text-transform: uppercase;
}
.we-media-v3__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(79,106,232,0.12);
  color: var(--tb-accent, #4f6ae8);
  font-size: 10px; font-weight: 700;
}
.we-media-v3__hint {
  font-size: 11px; color: var(--tb-text-muted, #5C6773);
  display: inline-flex; align-items: center; gap: 5px;
}
.we-media-v3__hint .fa { font-size: 10px; opacity: 0.7; }

.we-media-v3__list {
  display: flex; flex-direction: column; gap: 4px;
}

/* Row layout — CSS Grid with named columns. Grid (not flex) so each cell
   has a deterministic width that can't be inflated by browser-default <select>
   sizing or by an empty flex-grow child. Every control sits in its own track;
   the name region (`name`) is the only `1fr` track and the only one that
   truncates. Row height fixed at 44px so vertical rhythm stays consistent
   across all rows regardless of which controls render. */
.we-media-v3__row {
  display: grid;
  grid-template-columns:
    14px            /* grip      */
    32px            /* pos pill  */
    40px            /* thumb     */
    minmax(0, 1fr)  /* name+type */
    88px            /* fit       */
    74px            /* duration  */
    32px;           /* remove    */
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 14px 10px 10px;
  background: var(--tb-surface, #fff);
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  border-radius: 10px;
  position: relative;
  cursor: grab;
  user-select: none;
  transition: border-color 120ms, box-shadow 120ms, background 120ms, opacity 120ms;
}
.we-media-v3__row:hover {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 1px 4px rgba(15, 20, 25, 0.06);
}
.we-media-v3__row:active { cursor: grabbing; }

/* Pin each cell to its column. Without this, ng-if removal of optional
   elements (grip in live mode · fit on video/audio · remove in live mode)
   would cause CSS Grid's auto-placement to shift later cells leftward,
   breaking row-to-row visual alignment. Explicit grid-column on every
   child keeps the columns stable across all row variants. */
.we-media-v3__grip   { grid-column: 1; }
.we-media-v3__pos    { grid-column: 2; }
.we-media-v3__thumb  { grid-column: 3; }
.we-media-v3__body   { grid-column: 4; }
.we-media-v3__fit    { grid-column: 5; }
.we-media-v3__plays  { grid-column: 6; }
.we-media-v3__remove { grid-column: 7; }
.we-media-v3__row.is-dragging {
  opacity: 0.45;
  border-style: dashed;
}
.we-media-v3__row.is-over {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 2px var(--tb-accent, #4f6ae8) inset;
}
/* Above/below insertion-line indicators — match the stepper / menu-items
   pattern. Row needs position:relative for ::before/::after; we set it
   here defensively in case the base rule lacks it. */
.we-media-v3__row { position: relative; }
.we-media-v3__row.is-drop-above::before,
.we-media-v3__row.is-drop-below::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 6px rgba(79, 106, 232, 0.55);
  pointer-events: none;
}
.we-media-v3__row.is-drop-above::before { top: -3px; }
.we-media-v3__row.is-drop-below::after  { bottom: -3px; }
.we-media-v3__row.is-readonly {
  cursor: default;
}

/* Read-only flavor of the v3 media list — used by the editor sidebar's
   playlist live-link preview. Slim background + lock icon hint. */
.we-media-v3.we-media-v3--readonly {
  background: rgba(15, 23, 42, 0.015);
  border-radius: 10px;
  padding: 8px;
}
.we-media-v3.we-media-v3--readonly .we-media-v3__row {
  background: #fff;
}
/* Static (no-input) timing display — looks like a value, not an editable
   field. Drops the box border + inner padding inherited from the input
   shell so the number sits naturally beside the unit suffix. */
.we-media-v3__plays.we-media-v3__plays--readonly {
  cursor: default;
}
.we-media-v3__plays-input--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 4px;
  font-weight: 600;
  color: var(--tb-text-1, #1a1d2e);
  font-size: 13px;
}

/* Grip — two stacked vertical-ellipsis icons (six dots) reads as a
   classic drag-handle without taking a box. Purely visual; the whole
   row is the drag source. */
.we-media-v3__grip {
  display: inline-flex; flex-direction: column;
  width: 12px;
  color: var(--tb-text-muted, #5C6773);
  font-size: 10px;
  line-height: 0.7;
  opacity: 0.45;
  flex-shrink: 0;
  cursor: grab;
  transition: opacity 120ms, color 120ms;
}
.we-media-v3__row:hover .we-media-v3__grip { opacity: 1; color: var(--tb-accent, #4f6ae8); }
.we-media-v3__grip .fa { display: block; }

/* Position chip — small filled accent circle (28×24 oval). The hidden
   <select> covers the chip so click anywhere on it opens the position
   dropdown. `!important` on the white text is intentional belt-and-
   suspenders: a legacy `select { color: #2C3E50 }` rule was overriding the
   white via descendant cascade, and we don't want to lose this fight to
   any future rule with higher specificity either. The numeral matters more
   than CSS purity here. */
.we-media-v3__pos {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tb-accent, #4f6ae8) !important;
  color: #ffffff !important;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  cursor: pointer;
  transition: filter 120ms;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
  /* Block any inherited border from a generic `select { border: 1px ... }`
     rule that the label might pick up through descendant inheritance.
     The chip's surface is the accent fill — no outline needed. */
  border: 0 !important;
  box-shadow: none;
}
.we-media-v3__pos,
.we-media-v3__pos > *,
.we-media-v3__pos *::before,
.we-media-v3__pos *::after {
  color: #ffffff !important;
}
.we-media-v3__pos:hover { filter: brightness(1.08); }
.we-media-v3__pos--static { cursor: default; }
/* The <select> sits absolutely positioned over the pill at opacity:0 so
   the entire chip is the click target. opacity:0 alone hides the element,
   but Chrome on macOS has been seen leaking the native selected-value
   text on top of the chip in certain cascades — `color: transparent` makes
   any leak silent. The dropdown's *open* state ignores `color` and uses
   system colors, so options stay readable when picking. */
.we-media-v3__pos-select {
  position: absolute; inset: 0;
  opacity: 0;
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.we-media-v3__pos-select option {
  color: var(--tb-text-strong, #0F1419);
  background: #ffffff;
}

/* Thumbnail — 36×36, rounded, fixed. */
.we-media-v3__thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tb-overlay-2, rgba(15,20,25,0.05));
  display: inline-flex; align-items: center; justify-content: center;
  /* Defensive border kill — some upstream `img { border: ... }` rules from
     legacy CSS were painting a hairline around the thumbnail. Cleared here
     so the image renders edge-to-edge inside the rounded container. */
  border: 0;
  box-shadow: none;
}
.we-media-v3__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; /* block default img drag */
  border: 0;
  outline: 0;
  box-shadow: none;
}
.we-media-v3__thumb-icon {
  font-size: 16px;
  color: var(--tb-text-muted, #5C6773);
}

/* Name + type chip — name truncates, type chip is small monospace. */
.we-media-v3__body {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
}
.we-media-v3__name {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 500;
  color: var(--tb-text-strong, #0F1419);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.we-media-v3__type {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15,20,25,0.06);
  color: var(--tb-text-muted, #5C6773);
  font-size: 10px; font-weight: 600;
  text-transform: lowercase;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  letter-spacing: 0.3px;
}

/* Plays / duration pill — sits in the 80px grid column. Same height as
   the fit pill (28px) so the two read as a paired control cluster.
   Includes a leading clock icon for instant identity even without the suffix.
   Clicking anywhere on the pill (icon, number, suffix) focuses the input. */
.we-media-v3__plays {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.10));
  border-radius: 6px;
  background: var(--tb-surface, #fff);
  font-size: 11px;
  color: var(--tb-text-strong, #0F1419);
  cursor: text;
  transition: border-color 120ms, box-shadow 120ms;
  overflow: hidden;
  min-width: 0;
}
.we-media-v3__plays:hover { border-color: var(--tb-border-2, rgba(15,20,25,0.18)); }
.we-media-v3__plays:focus-within {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 3px rgba(79,106,232,0.15);
}
.we-media-v3__plays.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.we-media-v3__plays-icon {
  font-size: 10px;
  color: var(--tb-text-muted, #5C6773);
  flex: 0 0 auto;
}
.we-media-v3__plays-input {
  width: 24px;
  border: 0; background: transparent; outline: none;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
}
.we-media-v3__plays-input::-webkit-outer-spin-button,
.we-media-v3__plays-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.we-media-v3__plays-suffix {
  font-size: 10px;
  color: var(--tb-text-muted, #5C6773);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Per-item object-fit pill — 96px column. Icon glyph + value + caret. Icon
   gives the pill an instant identity (no need to read the dropdown to know
   what it does); appearance:none + custom-SVG caret renders the same on
   Chrome / Firefox / Safari. Height locked so the row's 44px vertical
   rhythm survives even with browser-default <select> spacing. */
.we-media-v3__fit {
  display: inline-flex; align-items: center;
  height: 28px;
  padding: 0 0 0 8px;
  border: 1px solid var(--tb-border-1, rgba(15,20,25,0.10));
  border-radius: 6px;
  background: var(--tb-surface, #fff);
  font-size: 11px;
  color: var(--tb-text-strong, #0F1419);
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
  overflow: hidden;
  min-width: 0;
}
.we-media-v3__fit:hover { border-color: var(--tb-border-2, rgba(15,20,25,0.18)); }
.we-media-v3__fit:focus-within {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 3px rgba(79,106,232,0.15);
}
.we-media-v3__fit.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.we-media-v3__fit-icon {
  font-size: 10px;
  color: var(--tb-text-muted, #5C6773);
  margin-right: 2px;
  flex: 0 0 auto;
}
.we-media-v3__fit-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%235C6773' d='M0 0l4 5 4-5z'/></svg>")
    no-repeat right 8px center / 8px 5px;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  padding: 0 20px 0 4px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  letter-spacing: 0.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Remove — single red × pill at the row tail. Mutes to grey at rest so
   it doesn't visually pollute every row; goes red on hover. */
/* Delete-this-media button — always clearly visible (was a faint 0.55-opacity
   grey × that users couldn't find). Reads as a delete affordance: red trash
   glyph in a subtle red chip, deepening on hover/focus. */
.we-media-v3__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.22);
  color: #E74C3C;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 1;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.we-media-v3__remove:hover {
  background: rgba(231, 76, 60, 0.18);
  border-color: rgba(231, 76, 60, 0.45);
  color: #C0392B;
}
.we-media-v3__remove:focus-visible { outline: 2px solid #E74C3C; outline-offset: 1px; }

/* Dark-theme parity */
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__row {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__row:hover {
  border-color: rgba(255,255,255,0.16);
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__name { color: rgba(255,255,255,0.92); }
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__type {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__plays {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__plays-suffix { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__fit {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__fit-select { color: rgba(255,255,255,0.92); }
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__remove { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__thumb { background: rgba(255,255,255,0.04); }
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__grip { color: rgba(255,255,255,0.45); }

.tb-fullscreen-modal[data-theme="dark"] .we-pl-card__readonly-tag {
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
.we-pl-card__subhdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.we-pl-card__subhdr-left {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--tb-text-muted, #5C6773);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.we-pl-card__subhdr-left > .fa { color: var(--tb-accent, #4f6ae8); }

.we-pl-card__items {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 2px;
}

.we-pl-state-msg--inset {
  padding: 16px 8px;
  font-size: 13px;
  color: var(--tb-text-muted, #5C6773);
  display: inline-flex; gap: 8px; align-items: center;
}

/* Inset dropzone — slimmer than the standalone version since it sits
   inside an already-bordered card. */
.we-pl-upload-zone--inset {
  position: relative;
  border: 1.5px dashed var(--tb-border-2, rgba(15,20,25,0.20));
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms, background 120ms;
  cursor: pointer;
  min-height: 70px;
}
.we-pl-upload-zone--inset:hover {
  border-color: var(--tb-accent, #4f6ae8);
  background: rgba(79,106,232,0.04);
}
.we-pl-upload-zone--inset.is-busy {
  cursor: progress; opacity: 0.7;
}

/* Dark-theme parity */
.tb-fullscreen-modal[data-theme="dark"] .we-pl-card {
  background: rgba(22,27,34,0.6);
  border-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-card.is-selected {
  background: rgba(79,106,232,0.08);
  border-color: var(--tb-accent, #4f6ae8);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-card__hdr:hover {
  background: rgba(255,255,255,0.04);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-card__panel {
  background: rgba(79,106,232,0.06);
  border-top-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-card__name { color: rgba(255,255,255,0.95); }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-card__sub { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-stack__title { color: rgba(255,255,255,0.92); }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-stack__create {
  background: rgba(22,27,34,0.5);
  border-color: rgba(255,255,255,0.10);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-stack__create-input {
  background: rgba(22,27,34,0.8);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-upload-zone--inset {
  background: rgba(22,27,34,0.6);
  border-color: rgba(255,255,255,0.18);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-upload-zone--inset:hover {
  background: rgba(79,106,232,0.10);
}

/* Media list — fills the right column. Drag-drop retired; reordering
   happens via the per-row position dropdown. The hard 280px ceiling was
   replaced with a viewport-relative cap so the list breathes on tall
   modals without pushing the footer off-screen. */
.we-pl-right__preview-list {
  padding: 6px 8px 8px;
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}
.we-pl-right__preview-list::-webkit-scrollbar { width: 4px; }
.we-pl-right__preview-list::-webkit-scrollbar-thumb { background: var(--tb-border-2, rgba(255,255,255,0.18)); border-radius: 4px; }

/* Media row — quieter resting state, accent-tinted hover so the position
   dropdown affordance reads as interactive. No grab cursor (drag retired). */
.we-pl-media-row {
  background: var(--tb-surface, #ffffff);
  border: 1px solid var(--tb-border-1, rgba(15,23,42,0.06));
  border-radius: 8px;
  padding: 8px 10px;
  transition: background 120ms ease, border-color 120ms ease;
}
.we-pl-media-row:hover {
  background: rgba(79, 106, 232, 0.04);
  border-color: rgba(79, 106, 232, 0.22);
}

/* ════════════════════════════════════════════════════════════════════
   Canvas — playlist binding badge on Media widgets
   Top-right corner pill that shows the bound playlist name so admins can
   identify the source from outside the editor. Hidden when no binding.
   ═════════════════════════════════════════════════════════════════════ */
.tb-w-playlist-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 75%;
  padding: 10px 18px;
  background: rgba(79, 106, 232, 0.94);
  color: #ffffff;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(79, 106, 232, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tb-w-playlist-badge i { font-size: 16px; }
.tb-w-playlist-badge__name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px;
}
.tb-w-playlist-badge__more {
  flex-shrink: 0;
  background: rgba(255,255,255,0.25);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Size-aware scaling — same ng-class size-tier approach as the size/count badges above. */
.tb-widget--sm .tb-w-playlist-badge { font-size: 14px; padding: 6px 12px; top: 8px; right: 8px; gap: 6px; }
.tb-widget--sm .tb-w-playlist-badge i { font-size: 12px; }
.tb-widget--sm .tb-w-playlist-badge__name { max-width: 150px; }

.tb-widget--xs .tb-w-playlist-badge { font-size: 11px; padding: 4px 9px; top: 6px; right: 6px; }
.tb-widget--xs .tb-w-playlist-badge i { display: none; }
.tb-widget--xs .tb-w-playlist-badge__name { max-width: 90px; }
.we-menu-v2__loading {
  text-align: center; padding: 20px 16px;
  color: var(--tb-text-3, #9DA2AA);
  font-size: 12px;
}
/* Text+Menu flow reuses the Menu item picker; its title/subtitle inputs sit
   on top, separated from the picker by a hairline so the two read as groups. */
.we-menu-v2__textfields {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--tb-border, #EEF0F4);
}
.we-menu-v2__body {
  display: flex; flex-direction: column;
  gap: 12px;
}
.we-menu-v2__dopts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 10px 0 4px;
}
@media (max-width: 380px) {
  .we-menu-v2__dopts { grid-template-columns: 1fr 1fr; }
}

/* Typed display-option control (number/text/select) rendered in the builder's
   Display Options rows for the non-boolean common options (rotationMs, layout,
   ambient, …). Compact to sit beside the option label in a tb-row-card. */
.we-dopt-control {
  height: 30px;
  max-width: 120px;
  padding: 0 8px;
  border: 1px solid #D5D9E0;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: #2C3E50;
  outline: none;
}
.we-dopt-control:focus { border-color: #2D7DD2; box-shadow: 0 0 0 2px rgba(45,125,210,.12); }
/* Typed options (number/text/select) span the FULL grid row so the input has
   room — booleans stay in the compact 3-up grid. The control fills the width
   left of the row after its label. */
.we-dopt-row--full { grid-column: 1 / -1; }
.we-dopt-row--full .we-dopt-control { flex: 1 1 auto; max-width: none; }
/* Offer-stepper typed option: label above its input (matches the toggle rows). */
.we-offer-field { display: flex; flex-direction: column; gap: 4px; }
.we-offer-field > span { font-size: 12px; color: #5A6470; }
.we-offer-field .we-dopt-control { max-width: 160px; }
.we-menu-v2__find { display: flex; flex-direction: column; gap: 8px; }
.we-menu-v2__find .stepper-menu-search { margin-bottom: 0; }
.we-menu-v2__find .stepper-filter-chips { margin-bottom: 0; }

/* Search + category-select row */
.we-menu-v2__find-row {
  display: flex; gap: 6px; align-items: stretch;
}
.we-menu-v2__search { flex: 1; min-width: 0; }

/* Compact category select — replaces the previous dropdown that lived
   beside the search. Alias-aware names; clicking outside the dropdown
   doesn't close it (we use the trigger's own click to toggle). */
.we-menu-v2__cat-select {
  position: relative;
  flex: 0 0 auto;
  width: 140px;
  height: 36px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 28px 0 12px;
  background: var(--tb-input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--tb-input-border, rgba(255,255,255,0.10));
  border-radius: 6px;
  color: var(--tb-text-1, rgba(255,255,255,0.85));
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.we-menu-v2__cat-select:hover {
  border-color: var(--tb-border-2, rgba(255,255,255,0.18));
}
.we-menu-v2__cat-select:focus-visible,
.we-menu-v2__cat-select--open {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 0;
}
.we-menu-v2__cat-select__label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.we-menu-v2__cat-select__chev {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  opacity: 0.55;
  pointer-events: none;
}
.we-menu-v2__cat-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 220px;
  background: var(--tb-surface, #ffffff);
  border: 1px solid var(--tb-border-2, rgba(255,255,255,0.18));
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(4,9,17,0.18);
  z-index: 50;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.we-menu-v2__cat-search {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  background: transparent;
  color: var(--tb-text-1, rgba(255,255,255,0.85));
  font-size: 12px;
  width: 100%;
  outline: none;
}
.we-menu-v2__cat-options {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.we-menu-v2__cat-options::-webkit-scrollbar { width: 4px; }
.we-menu-v2__cat-options::-webkit-scrollbar-thumb { background: var(--tb-border-2, rgba(255,255,255,0.18)); border-radius: 4px; }
.we-menu-v2__cat-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--tb-text-2, rgba(255,255,255,0.75));
  font-size: 12px;
  transition: background 0.1s;
}
.we-menu-v2__cat-option:hover {
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  color: var(--tb-text-1, rgba(255,255,255,0.92));
}
.we-menu-v2__cat-option--active {
  background: var(--tb-accent-soft, rgba(79,106,232,0.15));
  color: var(--tb-accent, #4f6ae8);
  font-weight: 600;
}
.we-menu-v2__cat-option__name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.we-menu-v2__cat-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  padding: 1px 7px;
  border-radius: 999px;
}

.we-menu-v2__section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 0;
  flex-shrink: 0;
}
.we-menu-v2__section-head--tinted {
  padding: 10px 12px 8px;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}
.we-menu-v2__section-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-text-2, rgba(255,255,255,0.75));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.we-menu-v2__count-chip {
  display: inline-block;
  background: var(--tb-overlay-2, rgba(255,255,255,0.08));
  color: var(--tb-text-2, rgba(255,255,255,0.7));
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}
.we-menu-v2__count-chip--accent {
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
}
.we-menu-v2__select-all {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 5px;
  font-weight: 600;
}

/* ── Items list — internal scroll capped at 360px so the panel stays
   manageable; the body scrolls if more vertical room is needed. ── */
.we-menu-v2__items {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  border-radius: 8px;
  padding: 4px;
  background: var(--tb-surface, #ffffff);
}
.we-menu-v2__items::-webkit-scrollbar { width: 4px; }
.we-menu-v2__items::-webkit-scrollbar-thumb { background: var(--tb-border-2, rgba(255,255,255,0.12)); border-radius: 4px; }
.we-menu-v2__items-list {
  display: flex; flex-direction: column; gap: 2px;
}
.we-menu-v2__items .stepper-menu-empty { padding: 24px 12px; }

/* ── Selected list — PRIMARY view at the top of the Menu tab. Stronger
   surface + accent stroke so it visually anchors as "your current picks".
   Fills available height — capped relative to viewport so the editor
   panel's other UI (toolbar, accordion, footer) still fits.
   Reordering happens via the per-row position dropdown, not drag. ── */
.we-menu-v2__selected {
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  border-radius: 10px;
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Hard ceiling tied to viewport so we don't push the Add-Items accordion
     off-screen on tall lists. ~240px reserves room for editor chrome +
     accordion header below. */
  max-height: calc(100vh - 240px);
  overflow: hidden;
}
.we-menu-v2__selected--primary {
  border-color: var(--tb-accent-border, rgba(79,106,232,0.3));
  background: var(--tb-surface, #ffffff);
  box-shadow: 0 1px 4px rgba(4,9,17,0.06);
}
.we-menu-v2__selected--empty {
  flex: 0 0 auto;
  max-height: none;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  box-shadow: none;
}

/* .we-menu-v2__selected-hint removed — drag-to-reorder UX retired in
   favour of the per-row position dropdown. */

/* Selected empty state — primary variant with prominent CTA. */
.we-menu-v2__selected-empty--primary {
  padding: 28px 16px;
  text-align: center;
}
.we-menu-v2__selected-empty--primary i { font-size: 26px; }
.we-menu-v2__selected-empty--primary h5 {
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
}
.we-menu-v2__selected-empty--primary p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--tb-text-3, rgba(255,255,255,0.55));
}
.we-menu-v2__add-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s;
}
.we-menu-v2__add-cta:hover { filter: brightness(0.95); }
.we-menu-v2__add-cta:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}

/* ── Add Items accordion ─────────────────────────────────────────────── */
.we-menu-v2__add-accordion {
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 8px;
  background: var(--tb-overlay-1, rgba(255,255,255,0.03));
  overflow: hidden;
  transition: border-color 0.12s;
}
.we-menu-v2__add-accordion--open {
  border-color: var(--tb-border-2, rgba(255,255,255,0.12));
}
.we-menu-v2__add-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
  transition: background 0.12s;
}
.we-menu-v2__add-trigger:hover {
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
}
.we-menu-v2__add-trigger:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: -2px;
}
.we-menu-v2__add-trigger__icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
  border-radius: 6px;
  font-size: 12px;
}
.we-menu-v2__add-trigger__label {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.we-menu-v2__add-trigger__label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
}
.we-menu-v2__add-trigger__label small {
  font-size: 10px;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  margin-top: 2px;
}
.we-menu-v2__add-trigger__chev {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--tb-text-3, rgba(255,255,255,0.45));
  transition: transform 0.15s;
}
.we-menu-v2__add-accordion--open .we-menu-v2__add-trigger__chev {
  color: var(--tb-text-1, rgba(255,255,255,0.85));
}
.we-menu-v2__add-body {
  padding: 12px;
  border-top: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  display: flex; flex-direction: column;
  gap: 12px;
}
.we-menu-v2__clear-btn {
  font-size: 10px;
  padding: 3px 9px;
}
.we-menu-v2__selected-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 12px;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  text-align: center;
}
.we-menu-v2__selected-empty i { font-size: 22px; margin-bottom: 8px; opacity: 0.7; }
.we-menu-v2__selected-empty p { font-size: 12px; margin: 0; }

.we-menu-v2__selected-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.we-menu-v2__selected-list::-webkit-scrollbar { width: 4px; }
.we-menu-v2__selected-list::-webkit-scrollbar-thumb { background: var(--tb-border-2, rgba(255,255,255,0.12)); border-radius: 4px; }

/* ── Selected row — BEM modifiers on the existing .we-selected-row base.
   Drag-and-drop visual states layered on top. The row is draggable per
   the `draggable="true"` attribute on the element, so `cursor: grab` is
   set here as the visual affordance. Nested form controls (select, the
   × remove button) use `ng-mousedown="$event.stopPropagation()"` to
   reserve their own interactions; their cursor overrides this. ── */
/* Kill the browser's default image drag — without this the user grabs
   the thumbnail and the browser starts a NATIVE image drag (showing the
   image preview) instead of bubbling to the row's ondragstart. Result:
   the row's drag handler never fires and row drag-reorder appears broken.
   `-webkit-user-drag: none` + `pointer-events: none` on the img neutralises
   it; row mousedown still passes through to the row. */
.we-selected-row img,
.we-selected-row .we-selected-thumb,
.we-selected-row .we-selected-row__img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.we-selected-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--tb-surface, #ffffff);
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
  border-radius: 7px;
  min-width: 0;
  position: relative;
  cursor: grab;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.we-selected-row:active { cursor: grabbing; }
/* Nested form controls keep their own cursors / text-selection so they
   stay usable while their parent row is draggable. */
.we-selected-row select,
.we-selected-row input,
.we-selected-row button {
  cursor: pointer;
  user-select: auto;
}
.we-selected-row input { cursor: text; }
.we-selected-row:hover {
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  border-color: var(--tb-border-2, rgba(255,255,255,0.12));
}
.we-selected-row--dragging {
  opacity: 0.4 !important;
  border-style: dashed !important;
}
.we-selected-row--over {
  border-color: var(--tb-accent, #4f6ae8) !important;
  box-shadow: 0 0 0 2px var(--tb-accent, #4f6ae8) inset;
}

/* Drag handle — the only drag-initiating surface in the row. Grab cursor
   only here; the rest of the row is normal. Larger hit target (28×28)
   accommodates touch + makes the affordance unmistakable. */
.we-drag-handle {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 4px;
  color: var(--tb-text-4, rgba(255,255,255,0.35));
  cursor: grab;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.we-drag-handle:hover {
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  color: var(--tb-text-1, rgba(255,255,255,0.85));
}
.we-drag-handle:active { cursor: grabbing; }
.we-drag-handle:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 1px;
}

/* Sequence number pill — prominent, accent-tinted. Communicates "this is
   item #N in the rendered menu order" — critical for numbered-menu widgets.
   When `.we-seq-pill--editable` is added, the pill becomes a styled <select>
   so admins can jump to ANY position without dragging across a long list. */
.we-seq-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--tb-accent-soft, rgba(79,106,232,0.15));
  color: var(--tb-accent, #4f6ae8);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--tb-accent-border, rgba(79,106,232,0.3));
  position: relative;
}
.we-seq-pill--editable {
  cursor: pointer;
  padding: 0 18px 0 8px;
  transition: background 0.12s, border-color 0.12s;
}
.we-seq-pill--editable:hover {
  background: var(--tb-accent, #4f6ae8);
  color: #ffffff;
  border-color: var(--tb-accent, #4f6ae8);
}
.we-seq-pill--editable:hover .we-seq-pill__caret {
  color: #ffffff;
}
.we-seq-pill__select {
  /* Visually invisible — the pill background + caret render the look; the
     native select handles the interaction. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.we-seq-pill__caret {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--tb-accent, #4f6ae8);
  pointer-events: none;
  opacity: 0.75;
}
.we-seq-pill--editable:focus-within {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}

.we-selected-row__img {
  width: 32px; height: 32px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.06));
}
.we-selected-row__img--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--tb-text-4, rgba(255,255,255,0.3));
  font-size: 12px;
  border-style: dashed;
}
.we-selected-row__body {
  flex: 1;
  min-width: 0;
}
.we-selected-row__name {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
}
.we-selected-row__name-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Remove × — hover-revealed, danger on hover. */
.we-row-remove {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--tb-text-3, rgba(255,255,255,0.45));
  opacity: 0.6;
  font-size: 11px;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
}
.we-selected-row:hover .we-row-remove { opacity: 1; }
.we-row-remove:hover {
  background: rgba(231,76,60,0.15);
  color: #E74C3C;
  opacity: 1;
}
.we-row-remove:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 1px;
  opacity: 1;
}

/* Item price chip in the editor's Items list — small monospaced subtitle. */
.we-item-row--v2 .we-item-price {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.stepper-bulk-actions {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.stepper-select-all-btn {
  font-size: 11px; padding: 6px 12px; border-radius: 6px;
  font-weight: 600;
}
.stepper-clear-all-btn {
  font-size: 11px; padding: 6px 12px; border-radius: 6px;
  font-weight: 600;
  display: inline-flex; align-items: center;
  background: transparent;
  border: 1px solid var(--tb-border-2, rgba(255,255,255,0.18));
  color: var(--tb-text-2, rgba(255,255,255,0.75));
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.stepper-clear-all-btn:hover:not([disabled]) {
  background: rgba(231,76,60,0.12);
  color: #E74C3C;
  border-color: rgba(231,76,60,0.4);
}
.stepper-clear-all-btn:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}
.stepper-clear-all-btn[disabled] {
  opacity: 0.4; cursor: not-allowed;
}

/* Per-category selected-count badge prefix — theme-aware blue. */
.stepper-cat-pill-count__sel {
  background: var(--tb-accent, #4f6ae8) !important;
  color: #ffffff !important;
}

/* Filter chip row — Veg / Non-veg / With image.
   Uses --tb-* tokens so chips theme between dark + light modal variants. */
.stepper-filter-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px;
  flex-shrink: 0;
}
.stepper-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--tb-overlay-2, rgba(255,255,255,0.06));
  color: var(--tb-text-2, rgba(255,255,255,0.75));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.stepper-filter-chip:hover {
  background: var(--tb-overlay-3, rgba(255,255,255,0.10));
  color: var(--tb-text-1, #fff);
  border-color: var(--tb-border-2, rgba(255,255,255,0.12));
}
.stepper-filter-chip:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}
.stepper-filter-chip--on {
  background: var(--tb-accent, #4f6ae8) !important;
  color: #ffffff !important;
  border-color: var(--tb-accent, #4f6ae8) !important;
}
.stepper-filter-chip--on .stepper-diet-dot { box-shadow: 0 0 0 1.5px #ffffff; }

/* Search bar v2 — owns its own padding/icons. */
.stepper-menu-search {
  width: 100%;
  margin-bottom: 10px;
  flex-shrink: 0;
  position: relative;
}
.stepper-menu-search input[type="text"] {
  width: 100%;
  height: 36px;
  font-size: 12px;
  padding-left: 32px;
  padding-right: 32px;
}
.stepper-menu-search__icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px; color: rgba(255,255,255,0.4);
  pointer-events: none;
}
.stepper-menu-search__clear {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent; border: none;
  color: rgba(255,255,255,0.55);
  font-size: 11px; padding: 6px; cursor: pointer;
  border-radius: 4px;
}
.stepper-menu-search__clear:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Empty state — refreshed look (theme-aware). */
.stepper-menu-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tb-text-3, rgba(255,255,255,0.5));
  padding: 32px 16px;
}
.stepper-menu-empty i { font-size: 32px; margin-bottom: 12px; opacity: 0.6; color: var(--tb-text-4, rgba(255,255,255,0.3)); }
.stepper-menu-empty p { font-size: 13px; margin: 0 0 12px; }
.stepper-menu-empty__reset {
  background: var(--tb-accent-soft, rgba(79,106,232,0.15));
  color: var(--tb-accent, #4f6ae8);
  border: 1px solid var(--tb-accent-border, rgba(79,106,232,0.3));
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.stepper-menu-empty__reset:hover { filter: brightness(0.96); }

/* ── Item rows v2 — 48px, 44px thumb, 4px accent border, name clamp ── */
/* Viewport-bound max-height — bypasses the multi-level flex chain entirely
   so 280+ item lists never overflow. The subtracted 460px accounts for
   every piece of fixed chrome above and below the list:
     modal margin     ............................. 64 px (32 top + 32 bottom)
     stepper-header   ............................. 60 px
     stepper-progress ............................. 60 px
     body padding     ............................. 48 px (24 top + 24 bottom)
     right-pane header (title + bulk actions) ...... 52 px
     filter chips                                    44 px
     search field                                    50 px
     stepper-footer (Next button)                    64 px
     safety margin                                   18 px
     ─────────────────────────────────────────────────────
     total                                         ≈ 460 px
   `max(220px, …)` floors the list height on tiny viewports so it never
   collapses below ~3 rows of content. */
.stepper-menu-right-list--v2 {
  max-height: max(220px, calc(100vh - 460px));
  overflow-y: auto;
  padding-right: 4px;
}
.stepper-menu-right--v2 > .stepper-menu-empty {
  max-height: max(220px, calc(100vh - 460px));
  overflow-y: auto;
}
.we-item-row--v2 {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px;
  min-height: 56px;
  border-bottom: 1px solid var(--tb-border-1, rgba(255,255,255,0.04));
  border-left: 4px solid transparent;
  border-radius: 6px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.we-item-row--v2:hover {
  background: var(--tb-overlay-1, rgba(255,255,255,0.05));
}
.we-item-row--v2:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: -2px;
}
/* Selected row: solid accent left-border + clearly-visible accent-tinted bg.
   Selector includes .tb-fullscreen-modal to MATCH (not beat) the
   [data-theme="light"] override at dmb-builder-overrides.css:1449 which is
   (0,3,0) with !important. Same specificity + later in cascade = we win.
   Plain rgba colors used — no color-mix() dependency so this renders
   identically everywhere the modal does. */
.tb-fullscreen-modal .we-item-row--v2.we-item-row-selected {
  background: rgba(79, 106, 232, 0.18) !important;
  border-left-color: var(--tb-accent, #4f6ae8) !important;
}
.tb-fullscreen-modal[data-theme="dark"] .we-item-row--v2.we-item-row-selected {
  background: rgba(79, 106, 232, 0.24) !important;
}
.tb-fullscreen-modal .we-item-row--v2.we-item-row-selected:hover {
  background: rgba(79, 106, 232, 0.28) !important;
}
.tb-fullscreen-modal[data-theme="dark"] .we-item-row--v2.we-item-row-selected:hover {
  background: rgba(79, 106, 232, 0.34) !important;
}
/* Custom CSS checkbox — far more reliable than FA icons across themes.
   Default: empty rounded square with a 2px border.
   Selected: filled accent with a white checkmark drawn via ::after. */
.we-item-check--v2 {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 2px solid var(--tb-border-2, rgba(255,255,255,0.25));
  background: transparent;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
  display: inline-block;
}
.we-item-row--v2:hover .we-item-check--v2 {
  border-color: var(--tb-accent, #4f6ae8);
}
.we-item-check--v2.we-item-check--on {
  background: var(--tb-accent, #4f6ae8);
  border-color: var(--tb-accent, #4f6ae8);
}
.we-item-check--v2.we-item-check--on::after {
  content: '';
  position: absolute;
  left: 6px; top: 1px;
  width: 5px; height: 11px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.we-item-img--v2 {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
}
.we-item-img--placeholder {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border: 1px dashed var(--tb-border-2, rgba(255,255,255,0.12));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--tb-text-4, rgba(255,255,255,0.3));
  font-size: 14px;
}

/* Diet dot — 18px, inline. Shared between filter chips + item rows. */
.stepper-diet-dot {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  border: 2px solid #fff;
}
.stepper-diet-dot--veg    { background: #27AE60; border-color: rgba(255,255,255,0.85); }
.stepper-diet-dot--egg    { background: #F39C12; border-color: rgba(255,255,255,0.85); }
.stepper-diet-dot--nonveg { background: #E74C3C; border-color: rgba(255,255,255,0.85); }
/* Inside filter chips, smaller dot. */
.stepper-filter-chip .stepper-diet-dot { width: 12px; height: 12px; border-width: 1.5px; }

.we-item-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* Item name — wraps to 2 lines max; longer names ellipsis-truncate at line 2.
   `min-width: 0` is required for the parent flex item so this column actually
   shrinks instead of pushing siblings off-canvas on long names. */
.we-item-name--v2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--tb-text-1, rgba(255,255,255,0.92));
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.we-item-name__text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* Item code chip — small monospace pill next to the name. */
.we-item-code {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tb-text-3, rgba(255,255,255,0.55));
  background: var(--tb-overlay-2, rgba(255,255,255,0.08));
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}
.we-item-row--v2.we-item-row-selected .we-item-code {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
}
.we-item-meta--v2 {
  font-size: 10px;
  color: var(--tb-text-3, rgba(255,255,255,0.45));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Selection tray — sticky strip at the bottom of the right pane ── */
.stepper-selection-tray {
  flex-shrink: 0;
  margin-top: 10px;
  background: var(--tb-overlay-1, rgba(255,255,255,0.04));
  border: 1px solid var(--tb-border-1, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 10px 12px;
}
.stepper-selection-tray__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.stepper-selection-tray__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-text-2, rgba(255,255,255,0.85));
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.stepper-selection-tray__clear {
  background: transparent;
  border: 1px solid rgba(231,76,60,0.4);
  color: #E74C3C;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.stepper-selection-tray__clear:hover:not([disabled]) {
  background: rgba(231,76,60,0.12);
}
.stepper-selection-tray__clear[disabled] {
  opacity: 0.4; cursor: not-allowed;
}
.stepper-selection-tray__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 96px;
  overflow-y: auto;
  padding-right: 2px;
}
.stepper-selection-tray__chips::-webkit-scrollbar { width: 3px; }
.stepper-selection-tray__chips::-webkit-scrollbar-thumb { background: var(--tb-overlay-3, rgba(255,255,255,0.08)); border-radius: 3px; }

.stepper-selection-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--tb-accent-soft, rgba(79,106,232,0.18));
  color: var(--tb-accent, #4f6ae8);
  border: 1px solid var(--tb-accent-border, rgba(79,106,232,0.35));
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font-size: 11px;
  font-weight: 600;
  max-width: 220px;
}
.stepper-selection-chip__name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
.stepper-selection-chip__x {
  background: transparent;
  border: 0;
  color: currentColor;
  opacity: 0.7;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 50%;
  font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.stepper-selection-chip__x:hover {
  background: rgba(231,76,60,0.20);
  color: #E74C3C;
  opacity: 1;
}
.stepper-selection-chip__x:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 1px;
}

/* Stepper: Size Preset Cards */
.stepper-size-card {
  flex: 1; padding: 16px 12px; text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  font-size: 11px; font-weight: 500;
  transition: all 0.15s;
}
.stepper-size-card:hover { border-color: rgba(255,255,255,0.18); }
.stepper-size-active {
  border-color: rgba(79,106,232,0.5) !important;
  background: rgba(79,106,232,0.08) !important;
  color: #fff !important;
}
.stepper-size-preview {
  height: 8px; border-radius: 3px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 8px;
}
.stepper-size-active .stepper-size-preview { background: #4f6ae8; }

/* Stepper: Media Type Cards */
.stepper-type-card {
  flex: 1; padding: 24px 16px; text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  transition: all 0.15s;
}
.stepper-type-card:hover { border-color: rgba(255,255,255,0.18); }
.stepper-type-active {
  border-color: rgba(79,106,232,0.5) !important;
  background: rgba(79,106,232,0.08) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════
   QUICK-EDIT PANEL OVERRIDES
   ═══════════════════════════════════════════════ */
.qe-delete-btn {
  padding: 6px 10px; border-radius: 6px;
  background: #FDECEC; color: #E74C3C;
  border: 1px solid #F6C8C8; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.qe-delete-btn:hover { background: #FBD6D6; border-color: #EFB0B0; }

/* ─── Upload Zone ──── */
.we-upload-zone {
  position: relative;
  border: 2px dashed #D5D9E0;
  border-radius: 10px;
  padding: 18px; text-align: center;
  color: #6A6F77;
  background: #F9FAFB;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.we-upload-zone:hover { border-color: #4f6ae8; background: rgba(79,106,232,0.04); color: #4f6ae8; }
.we-upload-zone.we-upload-disabled { pointer-events: none; opacity: 0.6; border-color: rgba(79,106,232,0.3); }

/* `.we-source-toggle*` removed — replaced by `.cxm-source-trio` in
   cx-management.css (3-card segmented control: Upload Media · Only
   Playlist · Playlist + Upload). */

/* Playlist picker state messages */
.we-playlist-picker__state {
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(79, 106, 232, 0.05);
  border: 1px dashed rgba(79, 106, 232, 0.4);
  color: var(--cxm-g70, #5b6471);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.we-playlist-picker__state i { color: #4f6ae8; }
.we-playlist-picker__hint {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(39, 174, 96, 0.08);
  border-left: 3px solid var(--cxm-s60, #27ae60);
  border-radius: 4px;
  font-size: 12px;
  color: var(--cxm-g80, #3d4756);
}
.we-playlist-picker__hint strong { color: var(--cxm-g100, #1a2230); }

/* Multi-select playlist rows */
.we-playlist-multi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--cxm-b40, #e0e4ea);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}
.we-playlist-multi__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--cxm-g100, #1a2230);
  transition: background-color 120ms ease;
}
.we-playlist-multi__row:hover { background: var(--cxm-b20, #f4f6f9); }
.we-playlist-multi__row:focus-visible {
  outline: 2px solid var(--cxm-b60, #4185f4);
  outline-offset: -2px;
}
.we-playlist-multi__row--selected {
  background: rgba(65, 133, 244, 0.08);
}
.we-playlist-multi__row--selected:hover {
  background: rgba(65, 133, 244, 0.12);
}
/* `.we-playlist-multi__check` (font-awesome icon) was the old checkbox
   visual; the new switch is .cxm-switch (defined in cx-management.css)
   and is driven off `.we-playlist-multi__row--selected` via the on-state
   selectors there. No row-local switch overrides needed. */
.we-playlist-multi__name {
  flex: 1 1 auto;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.we-playlist-multi__count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--cxm-g60, #7f8c8d);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   Mode 2 — Only Playlist (single-select radio list)
   ───────────────────────────────────────────────────────────────────── */
.we-playlist-single {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--cxm-b40, #e0e4ea);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}
.we-playlist-single__row {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.we-playlist-single__row:hover { background: var(--cxm-b20, #f4f6f9); }
.we-playlist-single__row:focus-visible {
  outline: 2px solid var(--cxm-b60, #4185f4);
  outline-offset: -2px;
}
.we-playlist-single__row.is-selected {
  background: rgba(65, 133, 244, 0.08);
  border-color: rgba(65, 133, 244, 0.35);
}
.we-playlist-single__radio {
  width: 16px; height: 16px;
  border: 2px solid var(--cxm-g30, #d7dbe0);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 120ms ease;
}
.we-playlist-single__row.is-selected .we-playlist-single__radio {
  border-color: var(--cxm-b60, #4185f4);
}
.we-playlist-single__radio-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cxm-b60, #4185f4);
  transform: scale(0);
  transition: transform 120ms ease;
}
.we-playlist-single__row.is-selected .we-playlist-single__radio-dot {
  transform: scale(1);
}
.we-playlist-single__name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--cxm-g100, #1a2230);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.we-playlist-single__count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--cxm-g60, #7f8c8d);
  font-variant-numeric: tabular-nums;
}

/* Dark theme */
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single {
  background: #1f2535;
  border-color: #2f3645;
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single__row { color: #f0f2f5; }
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single__row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single__row.is-selected {
  background: rgba(65, 133, 244, 0.14);
  border-color: rgba(65, 133, 244, 0.45);
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single__name { color: #f0f2f5; }
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single__count { color: #9aa3b5; }
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-single__radio {
  border-color: #4a536a;
}

/* ─────────────────────────────────────────────────────────────────────
   Mode 3 — Playlist + Upload (Mix mode)
   ───────────────────────────────────────────────────────────────────── */
.we-mix-source-select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--cxm-g30, #d7dbe0);
  border-radius: 6px;
  color: var(--cxm-g100, #1a2230);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4 6l4 4 4-4' stroke='%237f8c8d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}
.we-mix-source-select:focus {
  outline: none;
  border-color: var(--cxm-b60, #4185f4);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.18);
}
.we-mix-hint {
  font-size: 11px;
  color: var(--cxm-g60, #7f8c8d);
  margin: 0 0 8px;
}
.we-mix-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.we-mix-item {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F3F5F8;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
@supports not (aspect-ratio: 1) {
  .we-mix-item { height: 0; padding-top: 100%; }
}
.we-mix-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.we-mix-item__video {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #9DA2AA; background: #F3F5F8;
}
.we-mix-item:hover {
  border-color: rgba(65, 133, 244, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}
.we-mix-item:focus-visible {
  outline: 2px solid var(--cxm-b60, #4185f4);
  outline-offset: 2px;
}
.we-mix-item.is-added {
  border-color: var(--cxm-b60, #4185f4);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.25);
}
.we-mix-item__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cxm-b60, #4185f4);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.we-mix-item.is-added .we-mix-item__check { display: flex; }

/* Dark theme */
.tb-fullscreen-modal[data-theme="dark"] .we-mix-source-select {
  background-color: #1f2535;
  border-color: #2f3645;
  color: #f0f2f5;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4 6l4 4 4-4' stroke='%239aa3b5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.tb-fullscreen-modal[data-theme="dark"] .we-mix-source-select:focus {
  border-color: var(--cxm-b60, #4185f4);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.32);
}
.tb-fullscreen-modal[data-theme="dark"] .we-mix-hint { color: #9aa3b5; }
.tb-fullscreen-modal[data-theme="dark"] .we-mix-item {
  background: #2a3142;
}
.tb-fullscreen-modal[data-theme="dark"] .we-mix-item__video {
  background: #2a3142;
  color: #6a7385;
}
.tb-fullscreen-modal[data-theme="dark"] .we-mix-item:hover {
  border-color: rgba(65, 133, 244, 0.5);
}
.tb-fullscreen-modal[data-theme="dark"] .we-mix-item.is-added {
  border-color: var(--cxm-b60, #4185f4);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.4);
}

/* ── Dark-theme overrides for the multi-select playlist list.
   The widget editor (.we-panel) lives inside .tb-fullscreen-modal which
   carries data-theme="light|dark"; descendant selectors here adopt the
   builder's current theme. The container had a hardcoded #fff above —
   the override flips it to a dark surface card. */
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi {
  background: #1f2535;
  border-color: #2f3645;
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__row {
  color: #f0f2f5;
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__row--selected {
  background: rgba(65, 133, 244, 0.14);
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__row--selected:hover {
  background: rgba(65, 133, 244, 0.20);
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__count {
  color: #9aa3b5;
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-picker__hint {
  color: #c0c7d4;
}
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-picker__hint strong {
  color: #f0f2f5;
}

.we-playlist-picker__live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--cxm-s60, #27ae60);
  box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.6);
  animation: tlv2-live-pulse 1.6s ease-out infinite;
  vertical-align: middle;
}
@keyframes tlv2-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(39, 174, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .we-playlist-picker__live-dot { animation: none; }
}
.we-upload-zone i { font-size: 22px; margin-bottom: 6px; display: block; color: #9DA2AA; }
.we-upload-zone:hover i { color: #4f6ae8; }
.we-upload-zone span { font-size: 11px; }

/* ─── Media Sortable List ──── */
.we-media-sortable {
  display: flex; flex-direction: column; gap: 4px;
}
.we-media-sort-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;
  background: #fff;
  transition: background 0.1s, border-color 0.1s;
}
.we-media-sort-item:hover { background: #F9FAFB; border-color: #D5D9E0; }
/* `.we-media-sort-item.we-media-thumb-active` (primary highlight)
   removed — see note in we-media-thumb above. */
/* Playlist-bound rows: no hover, no pointer — these are managed in the
   Playlists tab. Read-only preview only. */
.we-media-sort-item.we-media-readonly { cursor: default; }
.we-media-sort-item.we-media-readonly:hover {
  background: #fff;
  border-color: #E7EAEE;
}
.we-sort-order-pill {
  flex: 0 0 auto;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cxm-b30, #eef1f6);
  color: var(--cxm-g80, #3d4756);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.we-sort-select {
  width: 38px; height: 26px; border-radius: 5px;
  background: #fff;
  border: 1px solid #E7EAEE;
  color: #373C44;
  font-size: 11px; font-weight: 600;
  text-align: center; outline: none;
  flex-shrink: 0; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none;
  padding: 0 2px;
}
.we-sort-select:focus { border-color: #4f6ae8; }
.we-sort-select option { background: #fff; color: #373C44; }
.we-sort-thumb {
  width: 36px; height: 36px; border-radius: 6px;
  overflow: hidden; flex-shrink: 0; cursor: pointer;
  background: #F3F5F8;
  border: 1px solid #E7EAEE;
}
.we-sort-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.we-sort-thumb .we-media-thumb-video {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #9DA2AA;
  background: #F3F5F8;
}
.we-sort-info { flex: 1; min-width: 0; }
/* Small toggle for media active/inactive */
.we-toggle-sm { width: 28px; height: 16px; flex-shrink: 0; }
.we-toggle-sm span::before { width: 12px; height: 12px; top: 2px; left: 2px; }
.we-toggle-sm input:checked + span::before { transform: translateX(12px); }

/* Inactive media row */
.we-media-inactive { border-color: rgba(231,76,60,0.25); }

.we-sort-delete {
  width: 24px; height: 24px; border: none; border-radius: 5px;
  background: #FDECEC;
  color: #E74C3C; cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s;
}
.we-sort-delete:hover { background: #FBD6D6; color: #C0392B; }

/* Per-item iterations input — sits between filename block and delete button. */
.we-sort-iterations {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0; font-size: 10px; color: #7F8C8D;
}
.we-sort-iterations__label { font-weight: 600; }
.we-sort-iterations input[type="number"] {
  width: 38px; height: 24px; padding: 0 4px; border: 1px solid #E0E4EA; border-radius: 4px;
  background: #fff; color: #2C3E50; font-size: 11px; text-align: center;
}
.we-sort-iterations input[type="number"]:disabled { background: #F4F6F9; color: #B0B5BB; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   COACH MARKS (first-time onboarding)
   ═══════════════════════════════════════════════ */
.coach-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: coachFadeIn 0.3s ease;
}
@keyframes coachFadeIn { from { opacity: 0; } to { opacity: 1; } }

.coach-spot { position: relative; }
.coach-spot-left { align-self: flex-start; margin-left: 200px; margin-top: 120px; }
.coach-spot-center { }

.coach-bubble {
  background: #1e2035;
  border: 1px solid rgba(79,106,232,0.3);
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 340px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,106,232,0.15);
  animation: coachBounce 0.4s ease;
}
@keyframes coachBounce {
  0% { transform: scale(0.9) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.coach-num {
  font-size: 10px; font-weight: 600; color: rgba(79,106,232,0.7);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.coach-icon {
  font-size: 28px; color: #4f6ae8; margin-bottom: 10px;
}
.coach-title {
  font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px;
}
.coach-desc {
  font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 14px;
}
.coach-action {
  font-size: 11px; font-weight: 600; color: rgba(79,106,232,0.8);
}
.coach-action i { margin-left: 3px; }

/* ─── Defensive input theming ─────────────────────────────────────
   Bootstrap / legacy global stylesheets paint `input[type="text"]`
   white with platform borders. The stepper modal is a body-appended
   portal that still renders dark; bump specificity + place at EOF
   so we win both specificity and load-order against global styles.
   SCOPE: stepper-modal / stepper-body ONLY. The widget-editor props
   panel (`.we-panel`) is now light-themed — see .we-panel rules
   above for its input styling. DO NOT add `.tb-props` / `.we-panel`
   back into this block. */
.stepper-modal input[type="text"],
.stepper-modal input[type="number"],
.stepper-body input[type="text"],
.stepper-body input[type="number"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !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: 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 {
  border-color: rgba(79,106,232,0.5) !important;
  background: rgba(79,106,232,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — activated via the theme toggle, which flips
   `.tb-fullscreen-modal[data-theme]` between 'light' and 'dark'. Only the
   BUILDER CHROME is themed; widget rendering (canvas/widgets/grid/resize/
   props panel internals) keeps its own palette.
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-fullscreen-modal[data-theme="dark"] { background: #0e1117; color: rgba(255,255,255,0.95); }

.tb-fullscreen-modal[data-theme="dark"] .tb-topbar,
.tb-fullscreen-modal[data-theme="dark"] .tb-config-bar {
  background: #161b22;
  border-bottom-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-topbar-name { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .tb-topbar-name::placeholder { color: rgba(255,255,255,0.3); }
.tb-fullscreen-modal[data-theme="dark"] .tb-back-btn,
.tb-fullscreen-modal[data-theme="dark"] .tb-theme-btn,
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field,
.tb-fullscreen-modal[data-theme="dark"] .tb-action-btn--ghost,
.tb-fullscreen-modal[data-theme="dark"] .tb-icon-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-back-btn:hover,
.tb-fullscreen-modal[data-theme="dark"] .tb-theme-btn:hover,
.tb-fullscreen-modal[data-theme="dark"] .tb-action-btn--ghost:hover,
.tb-fullscreen-modal[data-theme="dark"] .tb-icon-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field i,
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field span { color: rgba(255,255,255,0.45); }
.tb-fullscreen-modal[data-theme="dark"] .tb-duration-field input { color: rgba(255,255,255,0.9); }

.tb-fullscreen-modal[data-theme="dark"] .tb-unsaved-pill {
  background: rgba(255,159,106,0.08);
  border-color: rgba(255,159,106,0.2);
  color: #FF9F6A;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-unsaved-pill::before { background: #FF9F6A; }

.tb-fullscreen-modal[data-theme="dark"] .tb-cb-section,
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-section-label,
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-section-icon,
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-count { color: rgba(255,255,255,0.45); }
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-sep { background: rgba(255,255,255,0.08); }
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-select,
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-cb-color { border-color: rgba(255,255,255,0.15); }

/* Brand logotype + divider — dark variants.
   Logo stays in its natural brand colors (colorful Corbi wheel) — the
   colored segments read well against dark surfaces, so no filter needed. */
.tb-fullscreen-modal[data-theme="dark"] .tb-topbar__divider { background: rgba(255,255,255,0.08); }

/* Canvas wrap dark bg + dotted grid */
.tb-fullscreen-modal[data-theme="dark"] .tb-canvas-wrap {
  background: #1a1e28;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
}

/* Canvas surface in dark edit mode — overrides the light-theme
   `.tb-canvas:not(.tb-preview) { background: #fff !important }` rule.
   Preview mode still lets `tb.bg.color` paint through (handled by the
   ng-style binding + absence of `:not(.tb-preview)` here). */
.tb-fullscreen-modal[data-theme="dark"] .tb-canvas {
  background: #1f242e;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-canvas:not(.tb-preview) {
  background: #1f242e !important;
  background-image: none !important;
}

/* Grid cells — faint light tint on dark canvas so the grid stays visible
   without overwhelming the surface. */
.tb-fullscreen-modal[data-theme="dark"] .tb-grid-cell {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}

/* Empty-state hero (dashed circle + caption) retuned for dark surface. */
.tb-fullscreen-modal[data-theme="dark"] .tb-canvas-empty,
.tb-fullscreen-modal[data-theme="dark"] .tb-canvas-empty p { color: rgba(255,255,255,0.4); }
.tb-fullscreen-modal[data-theme="dark"] .tb-canvas-empty i {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.45);
}

/* Palette sidebar dark */
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-simple {
  background: #161b22;
  border-right-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-cat { color: rgba(255,255,255,0.25); }
/* Keep the "Add widget" header readable on dark — cyan-400 is the
   light-mode cyan-600's dark counterpart in the same family. */
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-title { color: #22D3EE; }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-search input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-search input::placeholder { color: rgba(255,255,255,0.25); }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-search i { color: rgba(255,255,255,0.3); }
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-widget-btn:hover {
  background: rgba(91,155,247,0.1);
  border-color: rgba(91,155,247,0.25);
  color: #5B9BF7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Widget properties panel (`.we-panel`). Base is light (above);
   this block restores the dark palette when the user flips the theme toggle,
   matching the chrome's dark surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-fullscreen-modal[data-theme="dark"] .we-panel {
  background: #13141f;
  border-left-color: rgba(255,255,255,0.06);
  box-shadow: -8px 0 40px rgba(0,0,0,0.4);
}
.tb-fullscreen-modal[data-theme="dark"] .we-header,
.tb-fullscreen-modal[data-theme="dark"] .we-tabs,
.tb-fullscreen-modal[data-theme="dark"] .we-body {
  background: #181928;
  border-bottom-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .we-title { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-subtitle { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .we-chip { background: rgba(255,255,255,0.06); color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-close {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
}
.tb-fullscreen-modal[data-theme="dark"] .we-close:hover {
  background: rgba(255,80,80,0.12); border-color: rgba(255,80,80,0.3); color: #ff5050;
}
.tb-fullscreen-modal[data-theme="dark"] .we-tabs button { color: rgba(255,255,255,0.35) !important; }
.tb-fullscreen-modal[data-theme="dark"] .we-tabs button:hover { color: rgba(255,255,255,0.7) !important; background: transparent !important; }
.tb-fullscreen-modal[data-theme="dark"] .we-body { background: #13141f; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.tb-fullscreen-modal[data-theme="dark"] .we-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
.tb-fullscreen-modal[data-theme="dark"] .we-label { color: rgba(255,255,255,0.4); }

/* Row cards, size cards, scroll card */
.tb-fullscreen-modal[data-theme="dark"] .tb-row-card,
.tb-fullscreen-modal[data-theme="dark"] .we-size-card,
.tb-fullscreen-modal[data-theme="dark"] .we-scroll-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-u-muted-2,
.tb-fullscreen-modal[data-theme="dark"] .we-scroll-row,
.tb-fullscreen-modal[data-theme="dark"] .tb-focus-label { color: rgba(255,255,255,0.7); }
.tb-fullscreen-modal[data-theme="dark"] .tb-u-muted { color: rgba(255,255,255,0.4); }

/* Inputs + selects */
.tb-fullscreen-modal[data-theme="dark"] .we-panel input[type="text"],
.tb-fullscreen-modal[data-theme="dark"] .we-panel input[type="number"],
.tb-fullscreen-modal[data-theme="dark"] .we-panel select:not(.we-sort-select),
.tb-fullscreen-modal[data-theme="dark"] .we-panel textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.tb-fullscreen-modal[data-theme="dark"] .we-panel input:focus,
.tb-fullscreen-modal[data-theme="dark"] .we-panel select:focus {
  border-color: rgba(79,106,232,0.5) !important;
  background: rgba(79,106,232,0.06) !important;
  box-shadow: none !important;
}
.tb-fullscreen-modal[data-theme="dark"] .we-panel input::placeholder,
.tb-fullscreen-modal[data-theme="dark"] .we-panel textarea::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

/* Toggle switch off-state */
.tb-fullscreen-modal[data-theme="dark"] .we-toggle span { background: rgba(255,255,255,0.12); }

/* Color swatch + hex */
.tb-fullscreen-modal[data-theme="dark"] .we-color-swatch { border-color: rgba(255,255,255,0.1); }
.tb-fullscreen-modal[data-theme="dark"] .we-hex-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}

/* Select trigger + dropdown */
.tb-fullscreen-modal[data-theme="dark"] .we-select-trigger {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .we-select-dropdown {
  background: #1e1f32;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tb-fullscreen-modal[data-theme="dark"] .we-select-search {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.06);
  color: #fff;
}
.tb-fullscreen-modal[data-theme="dark"] .we-select-option { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-select-option:hover { background: rgba(255,255,255,0.05); color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .we-select-option-active { background: rgba(79,106,232,0.12); color: #fff; }

/* Utility overrides */
.tb-fullscreen-modal[data-theme="dark"] .tb-u-divider { background: rgba(255,255,255,0.06); }
/* The stepper body is always dark by default, so also target it directly */
.stepper-body .tb-u-divider { background: rgba(255,255,255,0.07); }

/* Accordion dark mode */
.tb-fullscreen-modal[data-theme="dark"] .we-accordion {
  border-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-accordion__hdr {
  background: rgba(255,255,255,0.04);
}
.tb-fullscreen-modal[data-theme="dark"] .we-accordion__hdr:hover {
  background: rgba(255,255,255,0.07);
}
.tb-fullscreen-modal[data-theme="dark"] .we-accordion__title { color: rgba(255,255,255,0.7); }
.tb-fullscreen-modal[data-theme="dark"] .we-accordion__body { background: rgba(255,255,255,0.01); }

/* Selected items panel dark mode */
.tb-fullscreen-modal[data-theme="dark"] .we-selected-header__title { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-header__count {
  background: rgba(79,106,232,0.18);
  color: #8fa3f0;
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-empty { color: rgba(255,255,255,0.25); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-row {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-name { color: rgba(255,255,255,0.85); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-num { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-category { color: rgba(255,255,255,0.35); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-remove { color: rgba(255,255,255,0.25); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-remove:hover {
  color: #e74c3c;
  background: rgba(231,76,60,0.12);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-thumb {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-selected-grip { color: rgba(255,255,255,0.25); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-row:hover .we-selected-grip { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-selected-row.is-drop-above::before,
.tb-fullscreen-modal[data-theme="dark"] .we-selected-row.is-drop-below::after {
  background: #7888ff;
}

/* Theme pill dark mode */
.tb-fullscreen-modal[data-theme="dark"] .tb-theme-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-theme-pill__opt--on {
  background: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Item picker */
.tb-fullscreen-modal[data-theme="dark"] .we-item-picker {
  background: transparent;
  border-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .we-item-row { border-bottom-color: rgba(255,255,255,0.04); }
.tb-fullscreen-modal[data-theme="dark"] .we-item-row:hover { background: rgba(255,255,255,0.04); }
.tb-fullscreen-modal[data-theme="dark"] .we-item-row-selected { background: rgba(79,106,232,0.08); }
.tb-fullscreen-modal[data-theme="dark"] .we-item-name { color: #f0f2f5; }
.tb-fullscreen-modal[data-theme="dark"] .we-item-meta { color: #9aa3b5; }
.tb-fullscreen-modal[data-theme="dark"] .we-item-meta__type {
  background: rgba(255, 255, 255, 0.08);
  color: #c0c7d4;
}
/* `.we-item-meta__primary` dark-theme rule removed — primary chip retired. */
.tb-fullscreen-modal[data-theme="dark"] .we-item-price { color: rgba(255,255,255,0.5); }
.tb-fullscreen-modal[data-theme="dark"] .we-item-img { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.08); }
.tb-fullscreen-modal[data-theme="dark"] .we-item-cat-header {
  background: rgba(255,255,255,0.02);
  border-bottom-color: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
}

/* Menu item cards, category pills, typography tabs, align group */
.tb-fullscreen-modal[data-theme="dark"] .we-menu-item,
.tb-fullscreen-modal[data-theme="dark"] .we-cat-pill {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .we-menu-item-num {
  background: rgba(255,255,255,0.06);
  border-color: transparent;
  color: rgba(255,255,255,0.4);
}
.tb-fullscreen-modal[data-theme="dark"] .we-typo-tabs button {
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.6) !important;
}
.tb-fullscreen-modal[data-theme="dark"] .we-align-group { border-color: rgba(255,255,255,0.1); }
.tb-fullscreen-modal[data-theme="dark"] .we-align-group button {
  background: rgba(255,255,255,0.04) !important;
  border-right-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.4) !important;
}

/* Upload zone + media list */
.tb-fullscreen-modal[data-theme="dark"] .we-upload-zone {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
}
.tb-fullscreen-modal[data-theme="dark"] .we-upload-zone i { color: rgba(255,255,255,0.3); }
.tb-fullscreen-modal[data-theme="dark"] .we-media-sort-item {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.tb-fullscreen-modal[data-theme="dark"] .we-sort-select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
}
.tb-fullscreen-modal[data-theme="dark"] .we-sort-thumb {
  background: rgba(0,0,0,0.3);
  border-color: transparent;
}

/* Segmented control */
.tb-fullscreen-modal[data-theme="dark"] .we-seg {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-seg__btn { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .we-seg__btn--active {
  background: rgba(79,106,232,0.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(79,106,232,0.45);
}

/* tb-toggle (legacy) off-state */
.tb-fullscreen-modal[data-theme="dark"] .tb-toggle { background: rgba(255,255,255,0.14); }


/* ══════════════════════════════════════════════════════════════════════════
   PALETTE — Overlays section
   Sits at the bottom of .tb-palette-simple, beneath the widget category list.
   Same chip aesthetic as widget buttons (8px radius, soft hover, accent-tint
   active) so the palette reads as a single unified surface.
   ══════════════════════════════════════════════════════════════════════════ */
.tb-palette-overlays {
  margin-top: 22px;
  padding: 16px 10px 12px;
  border-top: 1px solid #E7EAEE;
}
.tb-palette-overlays__head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
}
.tb-palette-overlays__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #4A5560;
  text-transform: uppercase;
  flex: 1;
}
.tb-palette-overlays__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(45, 125, 210, 0.10);
  color: var(--tb-accent, #2D7DD2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tb-palette-overlays__sub {
  margin: 4px 4px 12px;
  font-size: 11px;
  color: #9DA2AA;
  line-height: 1.4;
}
.tb-palette-overlays__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* ── Overlay chip card — icon-on-tinted-disc + label ────────────────────
   Per-type colour cue on the icon disc (clock/weather/sticker/watermark),
   neutral card chrome that lifts on hover. Reads as one cohesive set
   while still letting users distinguish types at a glance. */
.tb-palette-overlay-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid #E5E8ED;
  background: #FFFFFF;
  border-radius: 8px;             /* CLAUDE.md §6: cards 8px */
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: border-color 0.16s ease, background 0.16s ease,
              transform 0.14s ease, box-shadow 0.16s ease;
}
.tb-palette-overlay-btn__chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;             /* match card radius for visual rhythm */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(.2, .8, .25, 1),
              box-shadow 0.18s ease;
}
.tb-palette-overlay-btn__label {
  font-size: 12px;
  font-weight: 600;
  color: #2C3E50;
  letter-spacing: -0.1px;
  line-height: 1.2;
}

/* Type tints — palette-aligned (CLAUDE.md §6). All four overlay types fold
   into the canonical palette family so they share dark/light treatment with
   the rest of the workspace and don't introduce drift hues. Differentiation
   comes from icon shape, not from one-off colours. */
.tb-palette-overlay-btn[data-type="clock"]   .tb-palette-overlay-btn__chip { background: rgba(45, 125, 210, 0.10); color: #2D7DD2; }  /* Accent  */
.tb-palette-overlay-btn[data-type="weather"] .tb-palette-overlay-btn__chip { background: rgba(45, 125, 210, 0.10); color: #2D7DD2; }  /* Accent  */
.tb-palette-overlay-btn[data-type="watermark"] .tb-palette-overlay-btn__chip { background: rgba(243, 156, 18, 0.12); color: #F39C12; }  /* Warning */
.tb-palette-overlay-btn[data-type="sticker"] .tb-palette-overlay-btn__chip { background: rgba(30, 58, 95, 0.10);  color: #1E3A5F; }  /* Primary */

.tb-palette-overlay-btn:hover {
  border-color: #C8CFD8;
  background: #FAFBFC;
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);   /* CLAUDE.md §6 canonical card shadow */
}
.tb-palette-overlay-btn:hover .tb-palette-overlay-btn__chip {
  transform: scale(1.06);
}
.tb-palette-overlay-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.tb-palette-overlay-btn:focus-visible {
  outline: none;
  border-color: var(--tb-accent, #2D7DD2);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.20);
}
/* Disabled — singleton overlay (clock/weather/watermark) already on canvas
   in either orientation. Hover/active suppressed; pointer-events stay on so
   the title-tooltip explains the cap. */
.tb-palette-overlay-btn[disabled],
.tb-palette-overlay-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #F4F6F9;
  box-shadow: none;
}
.tb-palette-overlay-btn[disabled]:hover,
.tb-palette-overlay-btn.is-disabled:hover {
  background: #F4F6F9;
  border-color: var(--tb-border, #E0E4EA);
  transform: none;
  box-shadow: none;
}
.tb-palette-overlay-btn[disabled]:hover .tb-palette-overlay-btn__chip,
.tb-palette-overlay-btn.is-disabled:hover .tb-palette-overlay-btn__chip {
  transform: none;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn[disabled],
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn.is-disabled {
  background: rgba(255,255,255,0.03);
  opacity: 0.45;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn[disabled]:hover,
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn.is-disabled:hover {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}

/* Dark theme */
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlays { border-top-color: rgba(255,255,255,0.06); }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlays__title { color: rgba(255,255,255,0.70); }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlays__sub { color: rgba(255,255,255,0.45); }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlays__count {
  background: rgba(79, 154, 255, 0.18);
  color: #93BFFF;
}
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn__label { color: rgba(255,255,255,0.92); }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
/* Dark-theme tints — derive from the same palette tokens at higher alpha for
   readability on the dark builder shell. Light + dark stay in the same colour
   family per palette-compliance rules. */
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn[data-type="clock"]   .tb-palette-overlay-btn__chip { background: rgba(45, 125, 210, 0.22); color: #2D7DD2; }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn[data-type="weather"] .tb-palette-overlay-btn__chip { background: rgba(45, 125, 210, 0.22); color: #2D7DD2; }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn[data-type="watermark"] .tb-palette-overlay-btn__chip { background: rgba(243, 156, 18, 0.24); color: #F39C12; }
.tb-fullscreen-modal[data-theme="dark"] .tb-palette-overlay-btn[data-type="sticker"] .tb-palette-overlay-btn__chip { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════════════════
   OVERLAY QUICK-EDIT (.oqe-*) — fields inside the right-side .we-panel.
   Standalone class set so styles don't bleed into widget controls (different
   spacing scale). The .we-panel chrome itself is reused as-is.
   ══════════════════════════════════════════════════════════════════════════ */
.oqe-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 8px;
}
.oqe-field { display: flex; flex-direction: column; gap: 6px; }
.oqe-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.oqe-label {
  font-size: 10px;
  font-weight: 700;
  color: #7F8C8D;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.oqe-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #E5E8ED;
  border-radius: 8px;
  font-size: 13px;
  color: #2C3E50;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.oqe-input:hover  { border-color: #C8CFD8; }
.oqe-input:focus {
  outline: none;
  border-color: var(--tb-accent, #2D7DD2);
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.14);
}
.oqe-input--ta { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.5; }
.oqe-input--color { padding: 2px; height: 36px; cursor: pointer; }
.oqe-input--range { padding: 0; height: 4px; appearance: none; background: #E5E8ED; }
.oqe-input--range::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--tb-accent, #2D7DD2);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.oqe-range-value {
  font-size: 11px;
  color: #7F8C8D;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.oqe-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #2C3E50; cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.oqe-check input[type="checkbox"] { accent-color: var(--tb-accent, #2D7DD2); }

.oqe-hint {
  font-size: 11px;
  color: #9DA2AA;
  margin: 0;
  line-height: 1.5;
}

.oqe-action-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 4px;
}
.oqe-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.oqe-btn--ghost {
  background: transparent;
  color: #4A5560;
  border-color: #E5E8ED;
}
.oqe-btn--ghost:hover { background: #F4F6F9; border-color: #C8CFD8; color: #2C3E50; }

/* ── Sticker controls (in quick-edit Content tab) ─────────────────────── */
.oqe-sticker-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 144px;
  padding: 16px;
  border: 2px dashed #C8CFD8;
  background: #FAFBFC;
  border-radius: 8px;            /* CLAUDE.md §6: cards 8px */
  color: #7F8C8D;
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.oqe-sticker-drop:hover {
  border-color: var(--tb-accent, #2D7DD2);
  background: rgba(45, 125, 210, 0.04);
  color: var(--tb-accent, #2D7DD2);
}
.oqe-sticker-drop i { font-size: 24px; }
.oqe-sticker-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.oqe-sticker-drop--busy { cursor: progress; opacity: 0.85; }

.oqe-sticker-replace {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #E5E8ED;
  background: #FFFFFF;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #4A5560;
  cursor: pointer;
  align-self: flex-start;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.oqe-sticker-replace:hover {
  border-color: var(--tb-accent, #2D7DD2);
  color: var(--tb-accent, #2D7DD2);
  background: rgba(45, 125, 210, 0.04);
}
.oqe-sticker-replace input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

/* Image-set state — Replace (neutral) + Remove (danger) side by side; the
   actual thumbnail lives in the shared preview stage above. */
.oqe-sticker-set {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.oqe-sticker-set .oqe-sticker-replace { align-self: auto; }
.oqe-sticker-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #F2D2CE;
  background: #FFFFFF;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #E74C3C;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.oqe-sticker-clear:hover {
  border-color: #E74C3C;
  background: rgba(231, 76, 60, 0.06);
}

/* Dark-theme overrides for .oqe-* — match the widget panel's dark variant. */
.tb-fullscreen-modal[data-theme="dark"] .oqe-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-input:hover { border-color: rgba(255,255,255,0.20); }
.tb-fullscreen-modal[data-theme="dark"] .oqe-label,
.tb-fullscreen-modal[data-theme="dark"] .oqe-hint { color: rgba(255,255,255,0.55); }
.tb-fullscreen-modal[data-theme="dark"] .oqe-check { color: rgba(255,255,255,0.85); }
.tb-fullscreen-modal[data-theme="dark"] .oqe-sticker-drop {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.18);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-sticker-replace,
.tb-fullscreen-modal[data-theme="dark"] .oqe-btn--ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-btn--ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════════
   STYLE TAB — grouped panels, sliders, colour swatches, live preview
   Replaces the cramped numeric-input grid with a Figma-like field family.
   ══════════════════════════════════════════════════════════════════════════ */
.oqe-style { gap: 16px; }

/* Preview stage — frames the live overlay render so it's obviously a preview,
   not a control. Checkered backdrop lets translucent fills read; the pinned
   "Preview" tag and inset ring give it a deliberate, framed look. */
.oqe-stage {
  position: relative;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 8px;            /* CLAUDE.md §6: cards 8px */
  border: 1px solid #E5E8ED;
  background:
    linear-gradient(135deg, #F7F9FC 0%, #EEF2F7 100%);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}
.oqe-stage__tag {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #E0E4EA;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7F8C8D;
}

/* Canvas — checkered backdrop that fills the stage and centres the overlay
   chip. Transparency in the chip's fill reads through this checker. */
.oqe-stage__canvas {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  padding: 20px 16px;
  border-radius: 8px;            /* CLAUDE.md §6: cards 8px */
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.06);
  background-image:
    linear-gradient(45deg, #E2E7EE 25%, transparent 25%, transparent 75%, #E2E7EE 75%),
    linear-gradient(45deg, #E2E7EE 25%, transparent 25%, transparent 75%, #E2E7EE 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  overflow: hidden;
}

/* Overlay chip — sized to its content so it reads like the real on-canvas
   badge, not a full-width slab. Inline ng-style layers the overlay chrome
   (bg + color + borderRadius + rotation + opacity) on top. Font size stays
   fixed so a large canvas font doesn't blow up the panel — canvas owns scale. */
.oqe-style-preview {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 64px;
  min-height: 40px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
}
.oqe-style-preview--img { padding: 4px; }
.oqe-style-preview > * { position: relative; z-index: 1; }
.oqe-style-preview i { font-size: 0.85em; opacity: 0.85; }
.oqe-preview-img {
  display: block;
  max-width: 200px;
  max-height: 72px;
  object-fit: contain;
}

.oqe-style-group {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  border: 1px solid #E7EAEE;
  border-radius: 8px;            /* CLAUDE.md §6: cards 8px */
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
/* Section header: accent dot + uppercase label, separated from the controls
   by a hairline so each group reads as a distinct, labelled block. */
.oqe-style-group__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #7F8C8D;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid #F0F2F5;
}
.oqe-style-group__head::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tb-accent, #2D7DD2);
  flex-shrink: 0;
}

/* Slider row: [label] [────slider────] [value chip] */
.oqe-slider-row {
  display: grid;
  grid-template-columns: 64px 1fr 56px;
  align-items: center;
  gap: 12px;
}
.oqe-slider-row__label {
  font-size: 12px;
  color: #4A5560;
  font-weight: 500;
}
.oqe-slider-row__value {
  font-size: 11px;
  color: #2C3E50;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: #FFFFFF;
  border: 1px solid #E5E8ED;
  border-radius: 6px;
  padding: 4px 0;
}

.oqe-slider {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: #E5E8ED;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* Cardinal-angle preset chips under the rotation slider — small pill buttons
   that fill 0/90/180/270 in one click. Active state mirrors `.we-tab-active`. */
.oqe-chip {
  flex: 1;
  appearance: none;
  border: 1px solid #E5E8ED;
  background: #FFFFFF;
  color: #4A5560;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.oqe-chip:hover {
  background: #F4F6F9;
  border-color: #D5DAE2;
}
.oqe-chip--active {
  background: var(--tb-accent, #2D7DD2);
  border-color: var(--tb-accent, #2D7DD2);
  color: #FFFFFF;
}
.oqe-chip--active:hover {
  background: var(--tb-accent, #2D7DD2);
  border-color: var(--tb-accent, #2D7DD2);
}
.oqe-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--tb-accent, #2D7DD2);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.oqe-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.oqe-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--tb-accent, #2D7DD2);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* Colour row: [label] [swatch] [hex caption]
   Native <input type="color"> hides; visible chip mirrors the value so a
   white swatch is still readable (fixes the "invisible white-on-white" bug). */
.oqe-color-row {
  display: grid;
  grid-template-columns: 64px auto 1fr;
  align-items: center;
  gap: 12px;
}
.oqe-color-row__label {
  font-size: 12px;
  color: #4A5560;
  font-weight: 500;
}
.oqe-color-row__hex {
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #4A5560;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}

.oqe-swatch {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid #D7DBE0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), inset 0 0 0 3px rgba(0, 0, 0, 0.04);
  background-image:
    linear-gradient(45deg, #ECEFF3 25%, transparent 25%, transparent 75%, #ECEFF3 75%),
    linear-gradient(45deg, #ECEFF3 25%, transparent 25%, transparent 75%, #ECEFF3 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.oqe-swatch:hover {
  transform: scale(1.05);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), inset 0 0 0 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(45, 125, 210, 0.20);
}
.oqe-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: 0; padding: 0; margin: 0;
}
.oqe-swatch__chip {
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  pointer-events: none;
  /* Stronger ring than the fill so a white/light swatch is never invisible
     against the swatch frame (fixes white-on-white #FFFFFF). */
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.oqe-swatch__chip--alpha {
  /* Background colour applies via inline style; the surrounding swatch shows
     the checkered backdrop through transparent fills. */
  background-clip: padding-box;
}

/* Dark theme — keep the field family readable. */
.tb-fullscreen-modal[data-theme="dark"] .oqe-stage {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-stage__tag {
  background: rgba(20, 26, 38, 0.85);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.55);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-stage__canvas {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-sticker-clear {
  background: rgba(255,255,255,0.04);
  border-color: rgba(231, 76, 60, 0.45);
  color: #F0837A;
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-sticker-clear:hover {
  border-color: #E74C3C;
  background: rgba(231, 76, 60, 0.14);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-style-group {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-style-group__head {
  border-bottom-color: rgba(255,255,255,0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-panel.oqe-modal .we-subtitle {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-style-group__head,
.tb-fullscreen-modal[data-theme="dark"] .oqe-slider-row__label,
.tb-fullscreen-modal[data-theme="dark"] .oqe-color-row__label,
.tb-fullscreen-modal[data-theme="dark"] .oqe-color-row__hex { color: rgba(255,255,255,0.75); }
.tb-fullscreen-modal[data-theme="dark"] .oqe-slider-row__value {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.90);
}
.tb-fullscreen-modal[data-theme="dark"] .oqe-slider { background: rgba(255,255,255,0.10); }
.tb-fullscreen-modal[data-theme="dark"] .oqe-swatch {
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 2px rgba(15,23,42,0.85), inset 0 0 0 3px rgba(255,255,255,0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   OVERLAY EDIT MODAL — floating top-right card
   Composes with .we-panel: inherits all internal field styling + tab chrome,
   but re-positions from "right-docked, full-height" to a centered floating
   card with rounded corners and a soft shadow. Scales up on entrance.
   No backdrop — canvas drag/resize remains active while editing.
   ══════════════════════════════════════════════════════════════════════════ */
.we-panel.oqe-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 420px;
  max-height: calc(100vh - 96px);
  height: auto;
  /* -50% offsets centre the card — keyframe animates the same transform so the
     resting transform is preserved both before and after the entrance. */
  transform: translate(-50%, -50%);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 64px rgba(15, 23, 42, 0.22);
  overflow-y: auto;
  z-index: 60;
  animation: oqe-modal-in 0.18s cubic-bezier(.2, .8, .25, 1) both;
  cursor: default;
}
@keyframes oqe-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Tighten internal spacing slightly for the modal proportions. */
.we-panel.oqe-modal .we-header {
  padding: 16px 16px 12px;
  border-radius: 14px 14px 0 0;
}
.we-panel.oqe-modal .we-tabs {
  padding: 0 12px;
}
.we-panel.oqe-modal .we-body {
  padding: 16px 16px 18px;
}
/* Header identity — bigger icon tile + title, and the dimensions rendered as a
   muted pill badge instead of loose subtitle text. */
.we-panel.oqe-modal .we-chip {
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 16px;
}
.we-panel.oqe-modal .we-title { font-size: 16px; }
.we-panel.oqe-modal .we-subtitle {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F4F6F9;
  border: 1px solid #E7EAEE;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #7F8C8D;
  text-transform: none;
}

/* Dark theme — translucent card with soft accent edge. */
.tb-fullscreen-modal[data-theme="dark"] .we-panel.oqe-modal {
  background: #1a2030;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 18px 56px rgba(0, 0, 0, 0.45);
}

/* Smaller viewports: keep centred, just shrink width. */
@media (max-width: 1280px) {
  .we-panel.oqe-modal {
    width: 380px;
  }
}
@media (max-width: 1024px) {
  .we-panel.oqe-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
  }
}

/* ── Overlay modal footer — sticky Apply button ─────────────────────── */
.oqe-modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #FFFFFF;
  border-top: 1px solid #EEF1F4;
  border-radius: 0 0 14px 14px;
  z-index: 1;
}
.oqe-btn--primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--tb-accent, #2D7DD2);
  background: var(--tb-accent, #2D7DD2);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(45, 125, 210, 0.20);
  transition: background 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}
.oqe-btn--primary:hover {
  background: #246AB8;
  border-color: #246AB8;
  box-shadow: 0 2px 6px rgba(45, 125, 210, 0.30);
}
.oqe-btn--primary:active { transform: translateY(1px); box-shadow: none; }
.oqe-btn--primary i { font-size: 11px; }

/* Dark theme override */
.tb-fullscreen-modal[data-theme="dark"] .oqe-modal-footer {
  background: #1a2030;
  border-top-color: rgba(255,255,255,0.08);
}

/* ── Overlay quick-edit switch — visual toggle replacing checkboxes ──
   Hidden native input keeps ng-model bidirectional; visible track + thumb
   slide on :checked. Smaller and more affirmative than a checkbox. */
.oqe-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #2C3E50;
  padding: 4px 0;
}
.oqe-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.oqe-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #D7DBE0;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.oqe-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(4, 9, 17, 0.18);
  transition: left 0.18s ease;
}
.oqe-switch input:checked + .oqe-switch__track {
  background: var(--tb-accent, #2D7DD2);
}
.oqe-switch input:checked + .oqe-switch__track .oqe-switch__thumb {
  left: 18px;
}
.oqe-switch input:focus-visible + .oqe-switch__track {
  box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.25);
}
.oqe-switch__label {
  font-weight: 500;
  line-height: 1.3;
}

/* Dark theme */
.tb-fullscreen-modal[data-theme="dark"] .oqe-switch__track { background: rgba(255, 255, 255, 0.16); }
.tb-fullscreen-modal[data-theme="dark"] .oqe-switch__label { color: rgba(255, 255, 255, 0.85); }

/* ──────────────────────────────────────────────────────────────────────
   .tb-zone — empty visual containers placed by the layout picker.
   Independent of .tb-widget (different DOM lineage, no shared classes,
   no shared chrome). Stored on layouts.{x}.zones[]. Position injected
   via inline ng-style from getZoneStyle(). On click, tb.selectedZone
   is set; on palette-widget click, that widget is added to widgets[]
   at the zone's geometry and the zone is removed from zones[].
   ────────────────────────────────────────────────────────────────────── */
.tb-zone {
  position: absolute;
  background: rgba(65, 133, 244, 0.04);
  border: 2px dashed rgba(65, 133, 244, 0.55);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  /* Render BEHIND any real widgets that get placed inside this rect
     (during fill, the zone is removed before the widget appears, but
     this z-index keeps things tidy if any race ever surfaces). */
  z-index: 1;
}
.tb-zone:hover {
  background: rgba(65, 133, 244, 0.09);
  border-color: rgba(65, 133, 244, 0.8);
}
.tb-zone[data-selected="true"] {
  background: rgba(65, 133, 244, 0.14);
  border-color: #4185f4;
  border-style: solid;
}
.tb-zone:focus-visible {
  outline: 2px solid #4185f4;
  outline-offset: 2px;
}

.tb-zone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px;
  pointer-events: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
.tb-zone__icon {
  font-size: 28px;
  color: #4185f4;
  opacity: 0.7;
  line-height: 1;
}
.tb-zone__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1c5fd5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-transform: uppercase;
}
.tb-zone__hint {
  font-size: 11px;
  font-weight: 500;
  color: #5b6471;
  background: #fff;
  border: 1px solid #dde2eb;
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 2px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* All zones share the same neutral identity — they're content-agnostic
   containers. The customer decides what goes in each. */

/* Dark canvas theme */
.tb-fullscreen-modal[data-theme="dark"] .tb-zone {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-zone:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.65);
}
.tb-fullscreen-modal[data-theme="dark"] .tb-zone__icon  { color: rgba(255, 255, 255, 0.85); }
.tb-fullscreen-modal[data-theme="dark"] .tb-zone__label { color: #fff; }
.tb-fullscreen-modal[data-theme="dark"] .tb-zone__hint {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

/* ─── Media Step 1 Redesign (.we-ms1-*) ────────────────────────────────── */

.we-ms1 { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; }

/* Display inline row */
/* Slim inline row — was a heavy framed card that out-weighted the actual
   content below it (the playlist picker). Now reads as a setting label +
   control on a single line, sitting on the modal's body background. */
.we-ms1-display-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tb-border-1, rgba(15,20,25,0.08));
  border-radius: 0;
  padding: 4px 0 12px;
  margin-bottom: 16px;
  gap: 12px;
}
.we-ms1-display-row__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6473;
  white-space: nowrap;
}
.we-ms1-display-row__label .fa { color: #4185f4; font-size: 12px; }
.we-ms1-select-wrap {
  position: relative;
  min-width: 180px;
  max-width: 220px;
  flex: 1;
}
.we-ms1-select {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1.5px solid #d8dde4;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1a1d2e;
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.we-ms1-select:focus { border-color: #4185f4; box-shadow: 0 0 0 3px rgba(65,133,244,0.12); }
.we-ms1-select-chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #8a92a3;
  pointer-events: none;
}

/* Section headers */
.we-ms1-section-hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 10px;
  margin: 18px 0 12px;
}
.we-ms1-section-hdr:first-child { margin-top: 0; }
.we-ms1-section-hdr__icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.we-ms1-section-hdr__icon--indigo { background: rgba(84,102,249,0.12); color: #5466f9; }
.we-ms1-section-hdr__icon--green  { background: rgba(16,180,110,0.12); color: #0a8a50; }
.we-ms1-section-hdr__icon--purple { background: rgba(134,95,194,0.12); color: #6c3db0; }
.we-ms1-section-hdr__title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d2e;
  letter-spacing: -0.01em;
}
.we-ms1-section-hdr__sub {
  font-size: 11.5px;
  color: #8a92a3;
  margin-left: 2px;
}
.we-ms1-count-badge {
  margin-left: 2px;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(16,180,110,0.15);
  color: #0a7a48;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Source cards modifier — taller, icon in circle bg */
.we-ms1-source-trio.cxm-source-trio { margin-bottom: 0; }
.we-ms1-source-trio .cxm-source-trio__btn {
  padding: 14px 14px 13px;
  border-radius: 12px;
  gap: 6px;
}
.cxm-source-trio__icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(65,133,244,0.08);
  color: #4185f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 4px;
  transition: background 0.14s ease, color 0.14s ease;
}
.cxm-source-trio__btn.is-active .cxm-source-trio__icon-wrap {
  background: rgba(65,133,244,0.16);
  color: #4185f4;
}

/* Upload zone v2 */
.we-upload-zone2 {
  position: relative;
  border: 2px dashed #c8d0e8;
  border-radius: 14px;
  background: linear-gradient(160deg, #f5f7ff 0%, #fafbff 100%);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  margin-top: 6px;
  overflow: hidden;
}
.we-upload-zone2:hover {
  border-color: #5466f9;
  background: linear-gradient(160deg, #f0f3ff 0%, #f5f7ff 100%);
  box-shadow: 0 4px 20px rgba(84,102,249,0.08);
}
.we-upload-zone2.we-upload-disabled {
  pointer-events: none;
  opacity: 0.65;
}
.we-upload-zone2__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px;
  gap: 8px;
}
.we-upload-zone2__icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(84,102,249,0.10);
  color: #5466f9;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.we-upload-zone2:hover .we-upload-zone2__icon-ring {
  background: rgba(84,102,249,0.18);
  transform: scale(1.06);
}
.we-upload-zone2__title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1d2e;
  letter-spacing: -0.01em;
}
.we-upload-zone2__formats {
  font-size: 11px;
  color: #9aa3b8;
  letter-spacing: 0.02em;
}

/* Uploaded media list — vertical rows with per-item controls.
   Replaced the prior 72×72 thumbnail grid that gave customers no way to
   set duration, remove an item, or reorder. Each row carries the four
   things admins need at a glance: position · preview · meta · controls. */
.we-ms1-uploaded { margin-top: 12px; }

/* Section header — adds a quiet hint about play order. */
.we-ms1-section-hdr__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--tb-text-3, #8a92a3);
  font-weight: 500;
  white-space: nowrap;
}

/* + Add more — compact uploader chip next to the Uploaded header. Sits to
   the right of the play-order hint so admins always have a one-click path
   to upload more files without scrolling back to the top dropzone. The
   hidden file input is overlaid so the entire chip area is clickable. */
.we-ms1-section-hdr__hint + .we-ms1-add-more { margin-left: 10px; }
.we-ms1-add-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--tb-accent, #5466f9);
  background: rgba(84, 102, 249, 0.08);
  color: var(--tb-accent, #5466f9);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.we-ms1-add-more:hover {
  background: rgba(84, 102, 249, 0.16);
  transform: translateY(-0.5px);
}
.we-ms1-add-more .fa { font-size: 10px; }
.we-ms1-add-more--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.we-ms1-add-more__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.we-ms1-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.we-ms1-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 10px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  position: relative;
}
.we-ms1-row:hover {
  border-color: rgba(79, 106, 232, 0.30);
  background: rgba(79, 106, 232, 0.03);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
/* Drop indicator states (menu-items parity). .is-drop-above paints a
   3px accent line via ::before just above the row; .is-drop-below paints
   the same line via ::after just below — so admins see exactly where the
   dragged item will slot in. .is-dragging dims the source row. */
.we-ms1-row.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
}
.we-ms1-row.is-drop-above::before,
.we-ms1-row.is-drop-below::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 6px rgba(79, 106, 232, 0.55);
  pointer-events: none;
}
.we-ms1-row.is-drop-above::before { top: -3px; }
.we-ms1-row.is-drop-below::after  { bottom: -3px; }

/* Drag handle — bigger hit target (28×28) with a quiet idle fill so admins
   can spot it at a glance. Hover bumps to accent-blue + slight scale; active
   compresses for tactile feedback. Only this element is draggable so the
   row's select / input / × button still receive their own events. */
.we-ms1-row__drag {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tb-text-3, #8a92a3);
  background: rgba(15, 23, 42, 0.04);
  cursor: grab;
  user-select: none;
  border-radius: 7px;
  font-size: 14px;
  transition: color 120ms ease, background 120ms ease, transform 80ms ease;
}
.we-ms1-row__drag:hover {
  color: var(--tb-accent, #4f6ae8);
  background: rgba(79, 106, 232, 0.14);
  transform: scale(1.08);
}
.we-ms1-row__drag:active {
  cursor: grabbing;
  transform: scale(0.96);
  background: rgba(79, 106, 232, 0.20);
}
.we-ms1-row__drag:focus-visible {
  outline: 2px solid var(--tb-accent, #4f6ae8);
  outline-offset: 2px;
}

/* Thumbnail — 56×56 fits a recognisable preview without dominating the row. */
.we-ms1-row__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e8f4;
}
.we-ms1-row__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.we-ms1-row__type-icon {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1d30 0%, #252838 100%);
  color: rgba(255, 255, 255, 0.80);
  font-size: 20px;
}
.we-ms1-row__type-icon--audio {
  background: linear-gradient(135deg, #1a2030 0%, #1e2840 100%);
  color: rgba(120, 160, 255, 0.90);
}

/* Body — filename + type/size chip row. flex:1 lets it claim the slack. */
.we-ms1-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.we-ms1-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text-1, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.we-ms1-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--tb-text-3, #8a92a3);
}
.we-ms1-row__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2D7DD2;
  background: rgba(45, 125, 210, 0.10);
  border-radius: 999px;
}
.we-ms1-row__chip--video {
  color: #8B5CF6;
  background: rgba(139, 92, 246, 0.12);
}
.we-ms1-row__chip--audio {
  color: #F39C12;
  background: rgba(243, 156, 18, 0.12);
}
.we-ms1-row__size {
  font-variant-numeric: tabular-nums;
}

/* Per-item duration — paired with the widget's iteration_time fallback.
   Hovered border + focus ring signal interactivity in a tight row. */
.we-ms1-row__duration {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #d8dde4;
  border-radius: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.we-ms1-row__duration:focus-within {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 3px rgba(79, 106, 232, 0.18);
}
.we-ms1-row__duration input {
  width: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text-1, #1f2937);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.we-ms1-row__duration input::-webkit-outer-spin-button,
.we-ms1-row__duration input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.we-ms1-row__duration-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--tb-text-3, #8a92a3);
}

/* Per-item object-fit selector — fixed 116px width so it can't push the
   filename block out of view. Custom caret + appearance:none so the select
   renders identically across browsers; matches the duration chip styling
   so the two pills read as a paired control cluster. */
.we-ms1-row__fit {
  flex: 0 0 116px;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8dde4;
  border-radius: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  overflow: hidden;
}
.we-ms1-row__fit:focus-within {
  border-color: var(--tb-accent, #4f6ae8);
  box-shadow: 0 0 0 3px rgba(79, 106, 232, 0.18);
}
.we-ms1-row__fit-select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%237F8C8D' d='M0 0l4 5 4-5z'/></svg>")
    no-repeat right 10px center / 8px 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tb-text-1, #1f2937);
  padding: 7px 24px 7px 12px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__fit {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__fit-select {
  color: rgba(255, 255, 255, 0.92);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%23B0B9CC' d='M0 0l4 5 4-5z'/></svg>");
}

/* Object-fit pill — read-only chip in the widget's bound-playlist preview. */
.we-pl-timing__pill--fit {
  color: #5C6B82;
  background: rgba(92, 107, 130, 0.08);
  border-color: rgba(92, 107, 130, 0.20);
  text-transform: capitalize;
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-timing__pill--fit {
  color: #B0B9CC;
  background: rgba(176, 185, 204, 0.12);
}

/* Audio placeholder — same width as duration field so rows align. */
.we-ms1-row__duration-na {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px dashed #d8dde4;
  border-radius: 8px;
  font-size: 11px;
  color: var(--tb-text-3, #8a92a3);
  font-style: italic;
}

/* × Remove — tighter button so it doesn't dominate. Tone reveals on hover. */
.we-ms1-row__remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tb-text-3, #8a92a3);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.we-ms1-row__remove:hover {
  background: rgba(231, 76, 60, 0.10);
  border-color: rgba(231, 76, 60, 0.30);
  color: #E74C3C;
}
.we-ms1-row__remove:focus-visible {
  outline: 2px solid #E74C3C;
  outline-offset: 2px;
}

/* Dark theme — invert surfaces, keep chip colors as-is. */
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row:hover {
  background: rgba(79, 106, 232, 0.08);
  border-color: rgba(79, 106, 232, 0.30);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__name { color: rgba(255, 255, 255, 0.92); }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__duration {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__duration input { color: rgba(255, 255, 255, 0.92); }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__duration-na {
  border-color: rgba(255, 255, 255, 0.10);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__thumb {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__drag {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-row__drag:hover {
  color: var(--tb-accent, #4f6ae8);
  background: rgba(79, 106, 232, 0.20);
}

/* Responsive — stack vertically on narrow viewports. */
@media (max-width: 720px) {
  .we-ms1-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .we-ms1-row__body { flex-basis: calc(100% - 56px - 12px - 30px); }
  .we-ms1-row__duration,
  .we-ms1-row__duration-na { margin-left: 56px; }
}

/* ── Narrow viewports (≤768): the top-bar and config-bar hold many controls
   on one fixed-height row and clip on tablet/phone. Let them wrap to
   auto-height instead of cutting controls off. The canvas stays scrollable. ── */
@media (max-width: 768px) {
  .tb-topbar,
  .tb-config-bar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .tb-topbar__left, .tb-topbar__right,
  .tb-config-bar__left, .tb-config-bar__right { flex-wrap: wrap; }
  .tb-topbar__right { margin-left: 0; }
}

/* Tab switcher — pill segmented control */
.we-ms1-tabs {
  display: flex;
  gap: 0;
  background: #eef0f8;
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid #e0e4f0;
}
.we-ms1-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #7880a0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: -0.01em;
  position: relative;
}
.we-ms1-tab-btn .fa { font-size: 12px; }
.we-ms1-tab-btn:hover:not(.is-active) { color: #3a4060; background: rgba(255,255,255,0.5); }
.we-ms1-tab-btn.is-active {
  background: #fff;
  color: #5466f9;
  box-shadow: 0 2px 8px rgba(84,102,249,0.16), 0 1px 2px rgba(0,0,0,0.06);
}

/* Compact variant — used in the right-side widget editor sidebar where
   horizontal space is ~360px instead of the stepper modal's ~720px. */
.we-ms1-tabs.we-ms1-tabs--compact {
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 12px;
}
.we-ms1-tabs.we-ms1-tabs--compact .we-ms1-tab-btn {
  height: 32px;
  border-radius: 7px;
  font-size: 12px;
  gap: 6px;
}
.we-ms1-tabs.we-ms1-tabs--compact .we-ms1-tab-btn .fa { font-size: 11px; }

/* Tab panel */
.we-ms1-tab-panel { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; }

/* Playlist tab — state messages */
.we-ms1-pl-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(84,102,249,0.05);
  border: 1px dashed rgba(84,102,249,0.3);
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 10px;
}
.we-ms1-pl-state .fa { color: #5466f9; }

/* Playlist tab — empty state */
.we-ms1-pl-empty {
  text-align: center;
  padding: 28px 20px;
  border-radius: 12px;
  border: 1.5px dashed #d8dde4;
  background: #fafbff;
  margin-bottom: 12px;
}
.we-ms1-pl-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(84,102,249,0.10);
  color: #5466f9;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.we-ms1-pl-empty__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1d2e;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.we-ms1-pl-empty__sub { font-size: 12px; color: #9aa3b8; }

/* Playlist rows */
.we-ms1-pl-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 2px;
}
.we-ms1-pl-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1.5px solid #e8eaf4;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #1a1d2e;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.we-ms1-pl-row:hover {
  border-color: #a0aaff;
  background: #fafbff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(84,102,249,0.10);
}
.we-ms1-pl-row.is-selected {
  border-color: #5466f9;
  background: rgba(84,102,249,0.05);
  box-shadow: 0 0 0 3px rgba(84,102,249,0.10), 0 2px 6px rgba(84,102,249,0.12);
  transform: none;
}
.we-ms1-pl-row__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #d8dce8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.16s ease;
  background: #f4f6ff;
}
.we-ms1-pl-row.is-selected .we-ms1-pl-row__check {
  background: #5466f9;
  border-color: #5466f9;
  color: #fff;
  box-shadow: 0 2px 6px rgba(84,102,249,0.35);
}
.we-ms1-pl-row__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0f2fa;
  color: #9aa3c8;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s ease, color 0.14s ease;
}
.we-ms1-pl-row.is-selected .we-ms1-pl-row__icon {
  background: rgba(84,102,249,0.12);
  color: #5466f9;
}
.we-ms1-pl-row__name {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.we-ms1-pl-row__count {
  font-size: 11.5px;
  color: #b0b8d0;
  flex-shrink: 0;
  white-space: nowrap;
  background: #f4f6ff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.we-ms1-pl-row.is-selected .we-ms1-pl-row__count {
  background: rgba(84,102,249,0.12);
  color: #5466f9;
}

/* Live-link hint banner */
.we-ms1-live-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(16,180,110,0.08);
  border: 1px solid rgba(16,180,110,0.25);
  font-size: 12px;
  color: #0a7a48;
  line-height: 1.5;
}
.we-ms1-live-hint__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12c56a;
  flex-shrink: 0;
  animation: we-ms1-pulse 2s ease-in-out infinite;
}
@keyframes we-ms1-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Dark mode */
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-tabs {
  background: #181b2c;
  border-color: #252840;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-tab-btn { color: #5a6490; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-tab-btn:hover:not(.is-active) { background: rgba(255,255,255,0.05); color: #c0c8e8; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-tab-btn.is-active {
  background: #22263c;
  color: #7888ff;
  box-shadow: 0 2px 8px rgba(84,102,249,0.30);
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-empty {
  background: #191c2e;
  border-color: #2e3250;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-empty__title { color: #d8daf0; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-empty__sub { color: #4a5078; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row {
  background: #1c1f32;
  border-color: #2a2e48;
  color: #d8daf0;
  box-shadow: none;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row:hover { border-color: #6070c8; background: #20243a; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row.is-selected { background: rgba(84,102,249,0.12); border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row__check { background: #252840; border-color: #3a4060; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row__icon { background: #252840; color: #5a6490; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row.is-selected .we-ms1-pl-row__icon { background: rgba(84,102,249,0.18); color: #7888ff; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row__count { background: #252840; color: #4a5078; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-pl-row.is-selected .we-ms1-pl-row__count { background: rgba(84,102,249,0.18); color: #7888ff; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-live-hint {
  background: rgba(16,180,110,0.12);
  border-color: rgba(16,180,110,0.28);
  color: #22c97a;
}

/* Dark mode */
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-display-row {
  background: #191c2e;
  border-color: #272d44;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-display-row__label { color: #8890b8; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-select {
  background: #1c1f32;
  border-color: #2e3250;
  color: #d8daf0;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-section-hdr__title { color: #d8daf0; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-section-hdr__sub { color: #5a6080; }
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__icon-wrap {
  background: rgba(65,133,244,0.15);
}
.tb-fullscreen-modal[data-theme="dark"] .we-upload-zone2 {
  background: linear-gradient(160deg, #191c2e 0%, #1c2030 100%);
  border-color: #2c3050;
}
.tb-fullscreen-modal[data-theme="dark"] .we-upload-zone2:hover {
  border-color: #5466f9;
  background: linear-gradient(160deg, #1e2240 0%, #1a1e34 100%);
}
.tb-fullscreen-modal[data-theme="dark"] .we-upload-zone2__title { color: #d8daf0; }
.tb-fullscreen-modal[data-theme="dark"] .we-upload-zone2__formats { color: #4a5078; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-thumb {
  border-color: #2e3250;
  background: #1c1f32;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-thumb:hover { border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-count-badge {
  background: rgba(16,180,110,0.20);
  color: #22c97a;
}

/* ── Quick-create playlist (inline inside widget editor) ─────── */
/* ── Inline playlist quick-create row ─────────────────── */
.we-qpl-row {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px dashed #d0d5e8;
  border-radius: 8px;
  padding: 0 6px 0 10px;
  background: #f8f9ff;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 38px;
}
.we-qpl-row:focus-within {
  border-color: #5466f9;
  border-style: solid;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(84,102,249,0.10);
}
.we-qpl-row__icon {
  color: #a0aac8;
  font-size: 11px;
  flex-shrink: 0;
  margin-right: 7px;
}
.we-qpl-row__input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  color: #1a1d2e;
  font-family: inherit;
}
.we-qpl-row__input::placeholder { color: #aab0c8; font-style: italic; }
.we-qpl-row__input:disabled { opacity: 0.5; }
.we-qpl-row__btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: #5466f9;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background 0.14s ease, opacity 0.14s ease;
}
.we-qpl-row__btn:hover:not(:disabled) { background: #3a50e8; }
.we-qpl-row__btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Dark theme */
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row:focus-within {
  border-color: #7b90ff;
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(123,144,255,0.14);
}
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row__icon { color: #6070a0; }
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row__input { color: #d8daf0; }
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row__input::placeholder { color: #5a6080; }
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row__btn { background: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-qpl-row__btn:hover:not(:disabled) { background: #6878ff; }

/* ─── Playlist tab: two-column split layout ────────────────────────────── */
.we-pl-split {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 260px;
  overflow: hidden;
}
.we-pl-left {
  flex: 0 0 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 18px;
  overflow-y: auto;
}
.we-pl-divider {
  width: 1px;
  background: #e8eaf6;
  margin: 0 2px;
  flex-shrink: 0;
  align-self: stretch;
}
.we-pl-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 18px;
  overflow-y: auto;
}
/* Panel header */
.we-pl-panel-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #5a6080;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #edeef8;
  flex-shrink: 0;
}
/* Create form */
.we-pl-create-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.we-pl-create-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1.5px solid #d4d8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #2a2e50;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.we-pl-create-input:focus { border-color: #5466f9 !important; box-shadow: 0 0 0 3px rgba(84,102,249,0.12); }
.we-pl-create-input::placeholder { color: #b0b8d0 !important; font-style: italic; }
.we-pl-create-input:disabled { opacity: 0.5; }
/* Override dark stepper-modal input defaults for the light playlist panel */
.stepper-body .we-pl-create-input,
.stepper-modal .we-pl-create-input {
  background: #fff !important;
  border: 1.5px solid #d4d8f0 !important;
  color: #2a2e50 !important;
  border-radius: 8px !important;
}
.stepper-body .we-pl-create-input:focus,
.stepper-modal .we-pl-create-input:focus {
  border-color: #5466f9 !important;
  background: #fff !important;
}
.we-pl-create-btn {
  height: 36px;
  padding: 0 14px;
  background: #5466f9;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.we-pl-create-btn:hover:not(:disabled) { background: #3a50e8; }
.we-pl-create-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.we-pl-create-hint {
  font-size: 12px;
  color: #9098c0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
/* State messages (loading / error) */
.we-pl-state-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #9098c0;
  padding: 6px 0;
}
/* Error variant for the inline empty/failed state. Used both in the
   stepper card panel and in the editor sidebar fallback. Uses the
   project's canonical warning palette (#F39C12) so the state matches
   other warning surfaces across the CX panel. */
.we-pl-state-msg--error,
.we-playlist-picker__state--error {
  color: #92590A;
  background: rgba(243, 156, 18, 0.08);
  border: 1px solid rgba(243, 156, 18, 0.30);
  border-radius: 8px;
  padding: 8px 10px;
}
.we-pl-state-msg--error i,
.we-playlist-picker__state--error i { color: #F39C12; }
.we-pl-state-retry {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #F39C12;
  border: 1px solid #C77F0A;
  border-radius: 6px;
  cursor: pointer;
}
.we-pl-state-retry:hover { background: #C77F0A; }
.we-pl-state-retry i { color: #fff !important; }
/* Active playlist badge */
.we-pl-active-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #eef0ff 0%, #f5f7ff 100%);
  border: 1.5px solid #c8cef8;
  border-radius: 10px;
  flex-shrink: 0;
}
.we-pl-active-badge__icon {
  width: 28px;
  height: 28px;
  background: #5466f9;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.we-pl-active-badge__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #2a2e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.we-pl-active-badge__count {
  font-size: 11px;
  color: #8890b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.we-pl-active-badge__clear {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #b0b8d0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.we-pl-active-badge__clear:hover { color: #e74c3c; background: #fff0f0; }
/* Upload zone inside left panel */
.we-pl-upload-zone {
  position: relative;
  border: 2px dashed #c8cef8;
  border-radius: 10px;
  padding: 18px 14px;
  background: #f7f9ff;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  flex-shrink: 0;
}
.we-pl-upload-zone:hover:not(.is-busy) { border-color: #5466f9; background: #eef0ff; }
.we-pl-upload-zone.is-busy { cursor: default; opacity: 0.7; }
.we-pl-upload-zone__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.we-pl-upload-zone__icon { font-size: 22px; color: #5466f9; flex-shrink: 0; }
.we-pl-upload-zone__label { font-size: 13px; font-weight: 600; color: #3a4080; }
.we-pl-upload-zone__formats { font-size: 11px; color: #9098c0; margin-top: 2px; }
/* Empty state */
.we-pl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px;
  text-align: center;
}
.we-pl-empty__icon { font-size: 28px; color: #c8cef8; margin-bottom: 8px; }
.we-pl-empty__title { font-size: 13px; font-weight: 600; color: #6070a0; }
.we-pl-empty__sub { font-size: 12px; color: #9098c0; margin-top: 3px; }
/* Right: playlist list */
.we-pl-right__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.we-pl-right__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid #edeef8;
  border-radius: 9px;
  background: #f8f9fe;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  width: 100%;
}
.we-pl-right__row:hover { border-color: #c8cef8; background: #eef0ff; }
.we-pl-right__row.is-selected { border-color: #5466f9; background: #eef0ff; }
.we-pl-right__row-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c8cef8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  font-size: 8px;
  transition: all 0.15s;
}
.we-pl-right__row.is-selected .we-pl-right__row-check {
  background: #5466f9;
  border-color: #5466f9;
  color: #fff;
}
.we-pl-right__row-icon {
  width: 24px;
  height: 24px;
  background: #e8eaff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #5466f9;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.we-pl-right__row.is-selected .we-pl-right__row-icon { background: #5466f9; color: #fff; }
.we-pl-right__row-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #2a2e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.we-pl-right__row-count {
  font-size: 11px;
  color: #8890b8;
  background: #e8eaff;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.we-pl-right__row.is-selected .we-pl-right__row-count { background: rgba(84,102,249,0.18); color: #3a2eaa; }
/* Items preview — wraps the list so it can stretch. flex + min-height: 0
   pipes height through to .we-pl-right__preview-list which uses flex: 1. */
.we-pl-right__preview {
  border-top: 1px solid #edeef8;
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.we-pl-right__preview-hdr {
  font-size: 12px;
  font-weight: 600;
  color: #5466f9;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.we-pl-right__preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 5px;
  max-height: 130px;
  overflow-y: auto;
}
.we-pl-right__preview-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9098c0;
  padding: 6px 0;
}
/* Dark mode for split layout */
.tb-fullscreen-modal[data-theme="dark"] .we-pl-divider { background: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-panel-hdr { color: #6878a8; border-bottom-color: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-create-input { background: #1a1d32; border-color: #252840; color: #d0d4f0; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-create-input:focus { border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-create-input::placeholder { color: #4a5078; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-create-hint { color: #4a5078; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-state-msg { color: #4a5078; }
/* Dark-theme parity for session-added classes. Without these the new
   surfaces render with light-mode bg/borders on the dark canvas. */
.tb-fullscreen-modal[data-theme="dark"] .we-pl-state-msg--error,
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-picker__state--error {
  color: #F3B062;
  background: rgba(243, 156, 18, 0.10);
  border-color: rgba(243, 156, 18, 0.35);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-state-retry {
  background: #F39C12;
  border-color: #C77F0A;
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-state-retry:hover { background: #C77F0A; }
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3.we-media-v3--readonly {
  background: rgba(208, 212, 240, 0.04);
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3.we-media-v3--readonly .we-media-v3__row {
  background: #1a1d32;
}
.tb-fullscreen-modal[data-theme="dark"] .we-media-v3__plays-input--static {
  color: #d0d4f0;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-add-more {
  background: rgba(84, 102, 249, 0.20);
  border-color: #5466f9;
  color: #c0c8f8;
}
.tb-fullscreen-modal[data-theme="dark"] .we-ms1-add-more:hover {
  background: rgba(84, 102, 249, 0.32);
}
.tb-fullscreen-modal[data-theme="dark"] .we-pl-active-badge { background: #1e2245; border-color: #2e3468; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-active-badge__name { color: #d0d4f0; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-upload-zone { background: #181a2e; border-color: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-upload-zone:hover:not(.is-busy) { background: #1e2245; border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-upload-zone__label { color: #b0b8d8; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-upload-zone__formats { color: #4a5078; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-empty__icon { color: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-empty__title { color: #5060a0; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__row { background: #1a1d32; border-color: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__row:hover { background: #1e2245; border-color: #2e3468; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__row.is-selected { background: #1e2245; border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__row-icon { background: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__row-name { color: #d0d4f0; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__row-count { background: #252840; color: #6878a8; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__preview { border-top-color: #252840; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-right__preview-empty { color: #4a5078; }

/* ─── Playlist detail: upload zone + items grid ────────────────────────── */
.we-pl-detail {
  margin-top: 12px;
  border-top: 1px solid #e8eaf6;
  padding-top: 12px;
}
.we-pl-detail__loading,
.we-pl-detail__err {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #7888b8;
  background: #f5f7ff;
  border-radius: 8px;
}
.we-pl-detail__err { color: #c0392b; background: #fff5f5; }
.we-pl-detail__items-hdr {
  margin-bottom: 8px;
}
.we-pl-detail__items-label {
  font-size: 12px;
  font-weight: 600;
  color: #5466f9;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.we-pl-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  max-height: 140px;
  overflow-y: auto;
}
.we-pl-detail__tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2ff;
  border: 1px solid #e0e4f8;
}
.we-pl-detail__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.we-pl-detail__tile-icon {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.we-pl-detail__tile-icon--video { color: #5466f9; background: #eef0ff; }
.we-pl-detail__tile-icon--audio { color: #e67e22; background: #fff5eb; }
.we-pl-detail__tile-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2px 4px;
  font-size: 9px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Compact upload zone inside playlist tab */
.we-pl-detail__upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #c8cef8;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: #f7f9ff;
  transition: border-color 0.18s, background 0.18s;
  min-height: 68px;
}
.we-pl-detail__upload-zone:hover:not(.is-uploading) {
  border-color: #5466f9;
  background: #eef0ff;
}
.we-pl-detail__upload-zone.is-uploading {
  cursor: default;
  opacity: 0.75;
}
.we-pl-detail__upload-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.we-pl-detail__upload-icon {
  font-size: 20px;
  color: #5466f9;
}
.we-pl-detail__upload-text {
  font-size: 13px;
  font-weight: 600;
  color: #3a4080;
}
.we-pl-detail__upload-hint {
  font-size: 11px;
  color: #8890b8;
  margin-left: 4px;
}
/* dark mode */
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail { border-top-color: #2a2e50; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail__loading { background: #1c1e35; color: #6070a0; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail__err { background: #2a1515; color: #e07070; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail__tile { background: #1e2040; border-color: #2a2e50; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail__upload-zone { background: #1a1c32; border-color: #2a2e50; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail__upload-zone:hover:not(.is-uploading) { background: #1e2245; border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-pl-detail__upload-text { color: #c0c4e8; }

/* ─── Media Wizard Step 2: "Save as playlist?" ─────────────────────────── */
.we-wizard-step2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 2px;
}

/* Hero block */
.we-wizard-step2__hero {
  text-align: center;
  padding: 24px 16px 8px;
}
.we-wizard-step2__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(84,102,249,0.10);
  color: #5466f9;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.we-wizard-step2__title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1d2e;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.we-wizard-step2__sub {
  font-size: 12.5px;
  color: #6b7280;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Two-card choice row */
.we-wizard-step2__choices {
  display: flex;
  gap: 12px;
}
.we-wizard-choice {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e2e6f0;
  border-radius: 12px;
  background: #fafbff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.we-wizard-choice:hover {
  border-color: #5466f9;
  background: #fff;
}
.we-wizard-choice.is-selected {
  border-color: #5466f9;
  background: rgba(84,102,249,0.06);
  box-shadow: 0 0 0 3px rgba(84,102,249,0.12);
}
.we-wizard-choice__icon {
  font-size: 18px;
  color: #b0b8d8;
  margin-top: 1px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.we-wizard-choice.is-selected .we-wizard-choice__icon { color: #5466f9; }
.we-wizard-choice__title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1d2e;
  margin-bottom: 3px;
}
.we-wizard-choice__sub {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
}

/* Playlist name input */
.we-wizard-step2__name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.we-wizard-name-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #d0d5e8;
  border-radius: 8px;
  font-size: 13px;
  color: #1a1d2e;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.we-wizard-name-input:focus {
  border-color: #5466f9;
  box-shadow: 0 0 0 3px rgba(84,102,249,0.12);
}
.we-wizard-name-input::placeholder { color: #aab0c8; }

/* Dark mode */
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-step2__title { color: #d8daf0; }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-step2__sub { color: #8890b8; }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-step2__icon { background: rgba(84,102,249,0.18); }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-choice {
  background: #1c1f32;
  border-color: #2e3250;
}
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-choice:hover { border-color: #5466f9; background: #22263c; }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-choice.is-selected {
  background: rgba(84,102,249,0.12);
  border-color: #5466f9;
}
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-choice__title { color: #d8daf0; }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-choice__sub { color: #6878a8; }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-name-input {
  background: #1c1f32;
  border-color: #2e3250;
  color: #d8daf0;
}
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-name-input:focus { border-color: #5466f9; }
.tb-fullscreen-modal[data-theme="dark"] .we-wizard-name-input::placeholder { color: #4a5078; }