/**
 * LuminaCustom Neon Builder v2.0.0 — Fully Isolated Styles
 *
 * Design principles:
 *  • 70/30 split: preview 70% | config panel 30%
 *  • ZERO theme inheritance — every property explicitly declared
 *  • BEM naming under .lnb__ prefix — no conflicts possible
 *  • Custom scrollbar — no browser defaults
 *  • All CSS custom properties have hard-coded fallbacks
 */

/* ════════════════════════════════════════════════════════════════════════════
   RESET — Isolate from any active WordPress theme
   ════════════════════════════════════════════════════════════════════════════ */
.lumina-neon-builder,
.lumina-neon-builder *,
.lumina-neon-builder *::before,
.lumina-neon-builder *::after {
  /* Box model */
  box-sizing: border-box !important;
  margin: 0;
  /* NOTE: font-family intentionally NOT set here with !important so that
     Vue inline :style bindings (fontFamily) can apply correctly on
     .lnb__neon-text and .lnb__font-card elements. */
  line-height: 1.5;
  /* Prevent theme colour bleed */
  color: inherit;
  /* No theme link styles inside widget */
  text-decoration: none;
  /* No outline weirdness */
  outline-offset: 2px;
}

/* Default UI font for all widget chrome — no !important so Vue inline
   styles can override it where needed (neon text, font preview cards). */
.lumina-neon-builder {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Hard-reset elements that themes often override */
.lumina-neon-builder p   { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.lumina-neon-builder h1,
.lumina-neon-builder h2,
.lumina-neon-builder h3  { margin: 0; padding: 0; font-weight: 700; font-size: inherit; color: inherit; border: none; background: none; }
.lumina-neon-builder ul,
.lumina-neon-builder ol  { list-style: none; margin: 0; padding: 0; }
.lumina-neon-builder button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.lumina-neon-builder input,
.lumina-neon-builder textarea,
.lumina-neon-builder select {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  outline: none;
  color: inherit;
}
.lumina-neon-builder label { cursor: pointer; }

/* ─── CRITICAL: Neon text must honour Vue's inline fontFamily binding ──────
   Do NOT add font-family here. Vue sets it via :style="neonTextStyle". */
.lnb__neon-text {
  /* font-family comes from Vue reactive state — do NOT override here */
}

/* ─── Font preview cards: Vue sets :style="{fontFamily: font.family}" ───────
   We must not override that with !important on font-family.
   The font-size !important below is fine — only font-family must be free. */

/* ════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (internal design system)
   All overrideable via Elementor Style Tab selectors
   ════════════════════════════════════════════════════════════════════════════ */
.lumina-neon-builder {
  /* Accent colours */
  --lnb-accent:       #ff2d78;
  --lnb-accent2:      #a855f7;
  --lnb-accent-dim:   rgba(255, 45, 120, 0.18);
  --lnb-accent-border:rgba(255, 45, 120, 0.28);

  /* Backgrounds */
  --lnb-preview-bg:   #070710;
  --lnb-panel-bg:     #12121f;
  --lnb-section-bg:   #0e0e1c;
  --lnb-card-bg:      rgba(255, 255, 255, 0.04);
  --lnb-card-bg-hover:rgba(255, 45, 120, 0.08);
  --lnb-card-bg-active:rgba(255, 45, 120, 0.14);

  /* Text */
  --lnb-text:         #f0f0f8;
  --lnb-text2:        #8888aa;
  --lnb-text3:        #55556a;

  /* Borders */
  --lnb-border:       rgba(255, 255, 255, 0.08);
  --lnb-border-active:rgba(255, 45, 120, 0.55);

  /* Radii */
  --lnb-r-widget:     14px;
  --lnb-r-panel:      0px;
  --lnb-card-radius:  8px;
  --lnb-r-input:      8px;

  /* Spacing */
  --lnb-gap:          1px;          /* gap between panes */

  /* Typography scale */
  --lnb-fs-xs:        10px;
  --lnb-fs-sm:        12px;
  --lnb-fs-base:      13px;
  --lnb-fs-md:        14px;
  --lnb-fs-lg:        16px;
  --lnb-fs-xl:        18px;

  /* Glow */
  --lnb-glow-intensity: medium;

  /* Transitions */
  --lnb-t:            0.22s ease;

  /* Panel width defaults — Elementor Style Tab overrides these directly on the elements */
  --lnb-control-panel-width: 320px;
  --lnb-preview-panel-width: auto;

  /* Layout */
  display: block;
  width: 100%;
  position: relative;
  border-radius: var(--lnb-r-widget);
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ════════════════════════════════════════════════════════════════════════════ */
.lnb__loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 360px !important;
  background: var(--lnb-panel-bg) !important;
}

.lnb__loading-spinner {
  width: 36px !important;
  height: 36px !important;
  border: 3px solid rgba(255, 45, 120, 0.2) !important;
  border-top-color: var(--lnb-accent) !important;
  border-radius: 50% !important;
  animation: lnb-spin 0.75s linear infinite !important;
}

@keyframes lnb-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   SPLIT LAYOUT — 70% preview / 30% panel
   Enforced via plugin CSS, not theme styles.
   ════════════════════════════════════════════════════════════════════════════ */
.lnb__split-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 620px !important;
  background: #000 !important;
  border-radius: var(--lnb-r-widget) !important;
  overflow: hidden !important;
  border: 1px solid var(--lnb-border) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PREVIEW PANE (70%)
   ════════════════════════════════════════════════════════════════════════════ */
.lnb__preview-pane {
  display: flex !important;
  flex-direction: column !important;
  background: var(--lnb-preview-bg) !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.lnb__preview-stage {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 32px !important;
  position: relative !important;
  min-height: 280px !important;
  transition: background 0.5s ease !important;
  overflow: hidden !important;
}

/* Neon text */
.lnb__neon-wrap { text-align: center !important; max-width: 88% !important; }

.lnb__neon-text {
  font-size: clamp(28px, 4.5vw, 60px) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  user-select: none !important;
}

/* Effects */
@keyframes lnb-rgb {
  0%   { color:#ff2d78; text-shadow:0 0 8px #ff2d78,0 0 24px #ff2d78,0 0 60px #ff2d78; }
  17%  { color:#ff8c00; text-shadow:0 0 8px #ff8c00,0 0 24px #ff8c00,0 0 60px #ff8c00; }
  34%  { color:#ffd700; text-shadow:0 0 8px #ffd700,0 0 24px #ffd700,0 0 60px #ffd700; }
  50%  { color:#39ff14; text-shadow:0 0 8px #39ff14,0 0 24px #39ff14,0 0 60px #39ff14; }
  67%  { color:#00d4ff; text-shadow:0 0 8px #00d4ff,0 0 24px #00d4ff,0 0 60px #00d4ff; }
  84%  { color:#bf00ff; text-shadow:0 0 8px #bf00ff,0 0 24px #bf00ff,0 0 60px #bf00ff; }
  100% { color:#ff2d78; text-shadow:0 0 8px #ff2d78,0 0 24px #ff2d78,0 0 60px #ff2d78; }
}
.lnb__neon-text--rgb {
  animation: lnb-rgb 4s linear infinite !important;
}

@keyframes lnb-flicker {
  0%,100%    { opacity:1; }
  91%,93%    { opacity:1; }
  92%        { opacity:.55; }
  95%,97%    { opacity:1; }
  96%        { opacity:.7; }
}
.lnb__neon-text--dynamic {
  animation: lnb-flicker 3.5s step-end infinite !important;
}

.lnb__neon--off .lnb__neon-text {
  text-shadow: none !important;
  animation: none !important;
  filter: grayscale(0.6) !important;
}

/* ON/OFF toggle */
.lnb__neon-toggle {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid var(--lnb-border) !important;
  color: var(--lnb-text2) !important;
  font-size: var(--lnb-fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  transition: all var(--lnb-t) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.lnb__neon-toggle:hover {
  border-color: var(--lnb-accent) !important;
  color: var(--lnb-text) !important;
}
.lnb__neon-toggle__dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--lnb-text3) !important;
  transition: all var(--lnb-t) !important;
  display: block !important;
}
.lnb__neon-toggle__dot--on {
  background: var(--lnb-accent) !important;
  box-shadow: 0 0 6px var(--lnb-accent) !important;
}

/* Background switcher */
.lnb__bg-switcher {
  display: flex !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  background: rgba(0,0,0,0.5) !important;
  border-top: 1px solid var(--lnb-border) !important;
  overflow-x: auto !important;
  flex-shrink: 0 !important;
  /* Custom scrollbar — no ugly browser default */
  scrollbar-width: thin !important;
  scrollbar-color: var(--lnb-accent) transparent !important;
}
.lnb__bg-switcher::-webkit-scrollbar { height: 3px !important; }
.lnb__bg-switcher::-webkit-scrollbar-track { background: transparent !important; }
.lnb__bg-switcher::-webkit-scrollbar-thumb { background: var(--lnb-accent) !important; border-radius: 2px !important; }

.lnb__bg-thumb {
  flex-shrink: 0 !important;
  width: 56px !important;
  height: 38px !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  /* background-image set via Vue inline :style — background-size/position here */
  background-color: rgba(255,255,255,0.06) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: all var(--lnb-t) !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
}
.lnb__bg-thumb--active {
  border-color: var(--lnb-accent) !important;
  box-shadow: 0 0 8px var(--lnb-accent) !important;
}
/* Label hidden — image-only thumbnails */
.lnb__bg-thumb__label {
  display: none !important;
}
/* Fallback icon for thumbs with no image set */
.lnb__bg-thumb--no-image::after {
  content: '\1F5BC';
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 16px !important;
  opacity: 0.5 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   CONFIG PANEL (30%)
   ════════════════════════════════════════════════════════════════════════════ */
.lnb__config-panel {
  display: flex !important;
  flex-direction: column !important;
  background: var(--lnb-panel-bg) !important;
  border-left: 1px solid var(--lnb-border) !important;
  /* Fixed 320px width — stable across ALL tabs, no layout shift */
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Panel header */
.lnb__panel-header {
  flex-shrink: 0 !important;
  padding: 18px 18px 14px !important;
  background: linear-gradient(135deg, var(--lnb-accent), var(--lnb-accent2)) !important;
}
.lnb__panel-title {
  font-size: var(--lnb-fs-lg) !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.3px !important;
  line-height: 1.25 !important;
}
.lnb__panel-subtitle {
  font-size: var(--lnb-fs-sm) !important;
  color: rgba(255,255,255,0.78) !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
}

/* Steps bar */
.lnb__steps-bar {
  flex-shrink: 0 !important;
  display: flex !important;
  padding: 8px 10px !important;
  gap: 3px !important;
  background: rgba(0,0,0,0.35) !important;
  border-bottom: 1px solid var(--lnb-border) !important;
  overflow-x: auto !important;
  /* hide scrollbar visually */
  scrollbar-width: none !important;
}
.lnb__steps-bar::-webkit-scrollbar { display: none !important; }

.lnb__step-indicator {
  flex: 1 !important;
  min-width: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all var(--lnb-t) !important;
}
.lnb__step-indicator--active {
  background: var(--lnb-accent-dim) !important;
  border-color: var(--lnb-accent) !important;
}
.lnb__step-indicator--done { opacity: 0.55 !important; }
.lnb__step-indicator--done .lnb__step-icon { color: #4ade80 !important; }

.lnb__step-icon  {
  font-size: 14px !important;
  line-height: 1 !important;
  display: block !important;
}
.lnb__step-label {
  font-size: 8px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--lnb-text2) !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: block !important;
}
.lnb__step-indicator--active .lnb__step-label { color: var(--lnb-accent) !important; }

/* ── Scroll area — custom scrollbar ─────────────────────────────────────── */
.lnb__scroll-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,45,120,0.35) transparent !important;
}
/* Webkit custom scrollbar — thin, sleek, dark */
.lnb__scroll-area::-webkit-scrollbar {
  width: 4px !important;
}
.lnb__scroll-area::-webkit-scrollbar-track {
  background: transparent !important;
}
.lnb__scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 45, 120, 0.3) !important;
  border-radius: 4px !important;
  transition: background 0.2s !important;
}
.lnb__scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 45, 120, 0.65) !important;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.lnb__section {
  padding: 18px 18px 16px !important;
  border-bottom: 1px solid var(--lnb-border) !important;
}
.lnb__section:last-child { border-bottom: none !important; }

.lnb__section-title {
  font-size: var(--lnb-fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--lnb-accent) !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.lnb__description {
  font-size: var(--lnb-fs-sm) !important;
  color: var(--lnb-text2) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.lnb__textarea {
  display: block !important;
  width: 100% !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-r-input) !important;
  color: var(--lnb-text) !important;
  font-size: var(--lnb-fs-md) !important;
  padding: 10px 12px !important;
  resize: vertical !important;
  min-height: 72px !important;
  transition: border-color var(--lnb-t) !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--lnb-accent) transparent !important;
}
.lnb__textarea:focus {
  border-color: var(--lnb-accent) !important;
  box-shadow: 0 0 0 3px var(--lnb-accent-dim) !important;
}
.lnb__char-count {
  font-size: var(--lnb-fs-xs) !important;
  color: var(--lnb-text3) !important;
  text-align: right !important;
  margin-top: 4px !important;
  display: block !important;
}

/* ── Font Grid ───────────────────────────────────────────────────────────── */
.lnb__font-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.lnb__font-card {
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  color: var(--lnb-text) !important;
  padding: 9px 10px !important;
  border-radius: var(--lnb-card-radius) !important;
  font-size: 16px !important;
  text-align: center !important;
  transition: all var(--lnb-t) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.lnb__font-card:hover  { border-color: var(--lnb-border-active) !important; background: var(--lnb-card-bg-hover) !important; }
.lnb__font-card--active { border-color: var(--lnb-accent) !important; background: var(--lnb-card-bg-active) !important; color: var(--lnb-accent) !important; }

/* ── Radio Grid (Effects) ────────────────────────────────────────────────── */
.lnb__radio-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.lnb__radio-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 8px !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-card-radius) !important;
  transition: all var(--lnb-t) !important;
  user-select: none !important;
}
.lnb__radio-card:hover  { border-color: var(--lnb-border-active) !important; background: var(--lnb-card-bg-hover) !important; }
.lnb__radio-card--active { border-color: var(--lnb-accent) !important; background: var(--lnb-card-bg-active) !important; }
.lnb__radio-icon { font-size: 18px !important; color: var(--lnb-accent) !important; display: block !important; }
.lnb__radio-lbl  { font-size: var(--lnb-fs-xs) !important; color: var(--lnb-text2) !important; text-align: center !important; display: block !important; }
.lnb__radio-card--active .lnb__radio-lbl { color: var(--lnb-text) !important; }

/* ── Color Swatches — compact dots ──────────────────────────────────────── */
.lnb__swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.lnb__swatch {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.lnb__swatch:hover {
  transform: scale(1.25) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.lnb__swatch--active {
  transform: scale(1.2) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5) !important;
}
.lnb__swatch__check {
  font-size: 12px !important;
  color: #000 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 3px rgba(255,255,255,0.8) !important;
  line-height: 1 !important;
  display: block !important;
}
.lnb__color-label {
  font-size: var(--lnb-fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  display: block !important;
}

/* ── Info pill ───────────────────────────────────────────────────────────── */
.lnb__info-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--lnb-fs-sm) !important;
  color: var(--lnb-text2) !important;
  background: rgba(168, 85, 247, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  line-height: 1.4 !important;
}

/* ── Size Grid ───────────────────────────────────────────────────────────── */
.lnb__size-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.lnb__size-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 10px 8px !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-card-radius) !important;
  text-align: center !important;
  transition: all var(--lnb-t) !important;
}
.lnb__size-card:hover  { border-color: var(--lnb-border-active) !important; background: var(--lnb-card-bg-hover) !important; }
.lnb__size-card--active { border-color: var(--lnb-accent) !important; background: var(--lnb-card-bg-active) !important; box-shadow: 0 0 12px var(--lnb-accent-dim) !important; }
.lnb__size-card__lbl  { font-size: var(--lnb-fs-md) !important; font-weight: 700 !important; color: var(--lnb-text) !important; display: block !important; }
.lnb__size-card__dims { font-size: var(--lnb-fs-xs) !important; color: var(--lnb-text2) !important; display: block !important; }

/* ── Toggle Pair ─────────────────────────────────────────────────────────── */
.lnb__toggle-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.lnb__toggle-btn {
  padding: 9px 8px !important;
  font-size: var(--lnb-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--lnb-text2) !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-card-radius) !important;
  transition: all var(--lnb-t) !important;
  text-align: center !important;
  display: block !important;
}
.lnb__toggle-btn:hover  { border-color: var(--lnb-border-active) !important; color: var(--lnb-text) !important; }
.lnb__toggle-btn--active { border-color: var(--lnb-accent) !important; background: var(--lnb-card-bg-active) !important; color: var(--lnb-text) !important; }

/* ── Backboard Grid ──────────────────────────────────────────────────────── */
.lnb__backboard-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px !important;
}
.lnb__backboard-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 9px 4px !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-card-radius) !important;
  transition: all var(--lnb-t) !important;
}
.lnb__backboard-card:hover  { border-color: var(--lnb-border-active) !important; background: var(--lnb-card-bg-hover) !important; }
.lnb__backboard-card--active { border-color: var(--lnb-accent) !important; background: var(--lnb-card-bg-active) !important; }
.lnb__backboard-icon { font-size: 18px !important; color: var(--lnb-accent) !important; display: block !important; }
.lnb__backboard-lbl  { font-size: var(--lnb-fs-xs) !important; color: var(--lnb-text2) !important; text-align: center !important; display: block !important; white-space: nowrap !important; }

/* ── Select ──────────────────────────────────────────────────────────────── */
.lnb__select {
  display: block !important;
  width: 100% !important;
  padding: 9px 30px 9px 11px !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-r-input) !important;
  color: var(--lnb-text) !important;
  font-size: var(--lnb-fs-sm) !important;
  transition: border-color var(--lnb-t) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
}
.lnb__select:focus { border-color: var(--lnb-accent) !important; box-shadow: 0 0 0 3px var(--lnb-accent-dim) !important; }
.lnb__select option { background: #1a1a2e !important; color: var(--lnb-text) !important; }

/* ── Add-on list ─────────────────────────────────────────────────────────── */
.lnb__addon-list { display: flex !important; flex-direction: column !important; gap: 5px !important; }

.lnb__addon-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-card-radius) !important;
  transition: all var(--lnb-t) !important;
  user-select: none !important;
}
.lnb__addon-row:hover  { border-color: var(--lnb-border-active) !important; }
.lnb__addon-row--active { border-color: var(--lnb-accent) !important; background: var(--lnb-card-bg-active) !important; }
.lnb__addon-row--locked { opacity: 0.65 !important; cursor: not-allowed !important; }

.lnb__addon-cb {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  accent-color: var(--lnb-accent) !important;
  cursor: pointer !important;
}
.lnb__addon-info { flex: 1 !important; min-width: 0 !important; }
.lnb__addon-lbl  { font-size: var(--lnb-fs-sm) !important; font-weight: 600 !important; color: var(--lnb-text) !important; display: block !important; }
.lnb__addon-desc { font-size: var(--lnb-fs-xs) !important; color: var(--lnb-text2) !important; display: block !important; margin-top: 1px !important; }

/* ── Lead Form ───────────────────────────────────────────────────────────── */
.lnb__form-stack { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.lnb__field { display: flex !important; flex-direction: column !important; gap: 4px !important; }

.lnb__field-label {
  font-size: var(--lnb-fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--lnb-text2) !important;
  display: block !important;
}

.lnb__input {
  display: block !important;
  width: 100% !important;
  padding: 9px 11px !important;
  background: var(--lnb-card-bg) !important;
  border: 1px solid var(--lnb-border) !important;
  border-radius: var(--lnb-r-input) !important;
  color: var(--lnb-text) !important;
  font-size: var(--lnb-fs-sm) !important;
  transition: border-color var(--lnb-t), box-shadow var(--lnb-t) !important;
}
.lnb__input:focus { border-color: var(--lnb-accent) !important; box-shadow: 0 0 0 3px var(--lnb-accent-dim) !important; }
.lnb__input--err  { border-color: #f87171 !important; }

.lnb__field-err {
  font-size: var(--lnb-fs-xs) !important;
  color: #f87171 !important;
  display: block !important;
}

.lnb__privacy {
  font-size: var(--lnb-fs-xs) !important;
  color: var(--lnb-text3) !important;
  text-align: center !important;
  display: block !important;
}

/* ── Success state ───────────────────────────────────────────────────────── */
.lnb__success {
  padding: 28px 18px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
.lnb__success__icon  { font-size: 48px !important; filter: drop-shadow(0 0 16px #4ade80) !important; display: block !important; }
.lnb__success__title { font-size: var(--lnb-fs-xl) !important; font-weight: 700 !important; color: var(--lnb-text) !important; display: block !important; }
.lnb__success__msg   { font-size: var(--lnb-fs-sm) !important; color: var(--lnb-text2) !important; line-height: 1.6 !important; display: block !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lnb__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 10px 18px !important;
  border-radius: var(--lnb-card-radius) !important;
  font-size: var(--lnb-fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition: all var(--lnb-t) !important;
  border: 1px solid transparent !important;
  text-align: center !important;
  white-space: nowrap !important;
  user-select: none !important;
}
.lnb__btn:disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; }

.lnb__btn--primary {
  background: linear-gradient(135deg, var(--lnb-accent), var(--lnb-accent2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 14px rgba(255,45,120,0.28) !important;
}
.lnb__btn--primary:not(:disabled):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 20px rgba(255,45,120,0.45) !important;
}

.lnb__btn--outline {
  background: transparent !important;
  color: var(--lnb-text2) !important;
  border-color: var(--lnb-border) !important;
}
.lnb__btn--outline:not(:disabled):hover {
  border-color: var(--lnb-accent) !important;
  color: var(--lnb-text) !important;
}

.lnb__btn--block { width: 100% !important; }

/* ── Nav bar (bottom of panel) ───────────────────────────────────────────── */
.lnb__nav {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--lnb-border) !important;
  flex-shrink: 0 !important;
  background: rgba(0,0,0,0.25) !important;
}
.lnb__nav .lnb__btn { flex: 1 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (769px – 1024px): adjusted ratio, still side-by-side
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .lnb__split-layout {
    flex-direction: row !important;
    height: 580px !important;
  }
  .lnb__preview-pane {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .lnb__config-panel {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    overflow: hidden !important;
  }
  .lnb__preview-stage {
    padding: 28px 20px !important;
    min-height: 240px !important;
  }
  .lnb__neon-text {
    font-size: clamp(22px, 3.5vw, 48px) !important;
  }
  .lnb__section { padding: 14px 14px 12px !important; }
  .lnb__panel-header { padding: 14px 14px 12px !important; }
  .lnb__font-grid { grid-template-columns: 1fr 1fr !important; }
  .lnb__backboard-grid { grid-template-columns: 1fr 1fr !important; }
  .lnb__font-card { font-size: 14px !important; padding: 8px 6px !important; }
  .lnb__step-label { font-size: 7px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px): stacked layout, preview top / panel below
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lnb__split-layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Preview pane: fixed height on mobile */
  .lnb__preview-pane {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    flex: none !important;
  }

  .lnb__preview-stage {
    min-height: 180px !important;
    padding: 24px 16px !important;
  }

  .lnb__neon-text {
    font-size: clamp(22px, 6vw, 42px) !important;
  }

  /* Config panel: full width on mobile */
  .lnb__config-panel {
    border-left: none !important;
    border-top: 1px solid var(--lnb-border) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    /* Fixed height so scroll area works */
    height: 520px !important;
  }

  /* Scroll area on mobile */
  .lnb__scroll-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }

  .lnb__backboard-grid { grid-template-columns: 1fr 1fr !important; }

  /* Touch-friendly buttons */
  .lnb__btn { min-height: 44px !important; padding: 10px 16px !important; }
  .lnb__toggle-btn { min-height: 44px !important; }
  .lnb__swatch { width: 30px !important; height: 30px !important; }

  /* Background thumbnails: slightly larger on mobile */
  .lnb__bg-thumb { width: 52px !important; height: 36px !important; }

  /* Steps bar: ensure all steps visible, allow scroll */
  .lnb__steps-bar { overflow-x: auto !important; }
  .lnb__step-indicator { min-width: 46px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤480px): tighter spacing, single-col font grid
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .lnb__section { padding: 14px 12px !important; }
  .lnb__panel-header { padding: 14px 12px !important; }
  .lnb__nav { padding: 10px 12px !important; gap: 6px !important; }

  /* Single column font grid so font names don't truncate */
  .lnb__font-grid { grid-template-columns: 1fr !important; }
  .lnb__font-card {
    font-size: 18px !important;   /* larger so font personality is clear */
    padding: 10px 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Size grid: 2 cols still works at 480px */
  .lnb__size-grid { grid-template-columns: 1fr 1fr !important; }

  /* Backboard: 2 cols */
  .lnb__backboard-grid { grid-template-columns: 1fr 1fr !important; }

  /* Neon text: scale up glow readability on small screen */
  .lnb__neon-text {
    font-size: clamp(20px, 7vw, 38px) !important;
  }

  /* Form inputs: comfortable tap target */
  .lnb__input,
  .lnb__select,
  .lnb__textarea {
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
  }

  /* Step labels: hide on very small screens to prevent wrapping */
  .lnb__step-label { display: none !important; }
  .lnb__step-icon  { font-size: 16px !important; }
  .lnb__step-indicator { padding: 7px 4px !important; }
}