/* liquid-hover-buttons runtime — core base (from liquid-buttons-core.css) */
/* ==========================================================================
   LIQUID & MODERN HOVER BUTTONS - CORE BASE STYLING
   ========================================================================== */
.modern-button-wrapper {
  display: flex;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.modern-button-wrapper.align-left { justify-content: flex-start; }
.modern-button-wrapper.align-center { justify-content: center; }
.modern-button-wrapper.align-right { justify-content: flex-end; }
.modern-button-wrapper.align-justify .premium-btn { width: 100%; }

.premium-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: var(--btn-border-width, 0px) solid var(--btn-border-color, transparent);
  /* outer radius = design radius + border width, so a thick border keeps the button round */
  border-radius: calc(var(--btn-radius, 14px) + var(--btn-border-width, 0px));
  background: var(--btn-bg, #1e293b);
  color: var(--btn-text, #ffffff);
  /* no font-family: theme typography applies (K10) */
  font-size: var(--btn-font-size, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--btn-padding-y, 14px) var(--btn-padding-x, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none !important;
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s ease, 
              color 0.3s ease, 
              background-color 0.3s ease, 
              border-color 0.3s ease;
}

.fl-builder-content .premium-btn,
.premium-btn {
  color: var(--btn-text, #ffffff) !important;
  text-decoration: none !important;
}

.fl-builder-content .premium-btn:hover,
.premium-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  color: var(--btn-hover-text, #ffffff) !important;
  text-decoration: none !important;
}

.premium-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.premium-btn .btn-text-wrap {
  position: relative !important;
  z-index: 10 !important;
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: none !important;
  transition: color 0.3s ease;
}

.premium-btn .btn-icon-svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
  flex-shrink: 0;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.premium-btn:hover .btn-icon-svg {
  transform: scale(1.1);
}

.btn-icon-svg.hidden {
  display: none !important;
}

/* ==========================================================================
   EFFECT LAYERS (from liquid-buttons-effects.css)
   ========================================================================== */
/* EFFECT 01: Liquid Wave Tide Fill */
    .btn-effect-1 {
      --wave-color: #6366f1;
      --wave-color-2: #818cf8;
      --wave-speed: 0.75s;
      --wave-scale: 7.5;
    }
    .btn-effect-1 .btn-liquid-container {
      position: absolute;
      bottom: -18px;
      left: 50%;
      width: 140px;
      height: 70px;
      margin-left: -70px;
      pointer-events: none;
      z-index: 2;
      transform-origin: bottom center;
      transform: scale(0.15) translateY(50px);
      transition: transform var(--wave-speed) cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-effect-1 .btn-liquid-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .btn-effect-1 .wave-layer-bg {
      fill: var(--wave-color-2);
      opacity: 0.55;
    }
    .btn-effect-1 .wave-layer-main {
      fill: var(--wave-color);
    }
    .btn-effect-1:hover .btn-liquid-container {
      transform: scale(var(--wave-scale)) translateY(0);
    }

    /* EFFECT 02: Diagonal Silk Surge */
    .btn-effect-2 {
      --silk-color: #e11d48;
      --silk-speed: 0.65s;
    }
    .btn-effect-2 .silk-fill-layer {
      position: absolute;
      inset: 0;
      background: var(--silk-color);
      clip-path: circle(0% at 100% 0%);
      transition: clip-path var(--silk-speed) cubic-bezier(0.2, 1, 0.3, 1);
      z-index: 2;
      pointer-events: none;
    }
    .btn-effect-2[data-direction="bottom-left"] .silk-fill-layer { clip-path: circle(0% at 0% 100%); }
    .btn-effect-2[data-direction="top-left"] .silk-fill-layer { clip-path: circle(0% at 0% 0%); }
    .btn-effect-2:hover .silk-fill-layer { clip-path: circle(150% at 100% 0%); }
    .btn-effect-2[data-direction="bottom-left"]:hover .silk-fill-layer { clip-path: circle(150% at 0% 100%); }
    .btn-effect-2[data-direction="top-left"]:hover .silk-fill-layer { clip-path: circle(150% at 0% 0%); }

    /* EFFECT 03: Hydro Ripple Sonar */
    .btn-effect-3 {
      --ripple-color: #38bdf8;
      --ripple-speed: 0.9s;
      --ripple-scale: 4.5;
    }
    .btn-effect-3 .sonar-emitter {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }
    .btn-effect-3 .sonar-circle {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid var(--ripple-color);
      background: radial-gradient(circle, var(--ripple-color) 0%, transparent 70%);
      transform: scale(0.2);
      opacity: 0;
      transition: transform var(--ripple-speed) cubic-bezier(0.1, 0.8, 0.2, 1), opacity var(--ripple-speed) ease;
    }
    .btn-effect-3 .sonar-circle:nth-child(1) { transition-delay: 0s; }
    .btn-effect-3 .sonar-circle:nth-child(2) { border-color: rgba(56, 189, 248, 0.7); transition-delay: 0.12s; }
    .btn-effect-3 .sonar-circle:nth-child(3) { border-color: rgba(56, 189, 248, 0.4); transition-delay: 0.24s; }
    .btn-effect-3:hover .sonar-circle {
      transform: scale(var(--ripple-scale));
      opacity: 0.85;
    }

    /* EFFECT 04: Mercury Metaball Merge */
    .btn-effect-4 {
      --blob-color: #F2A882;
      --blob-speed: 0.85s;
      --blob-dist: 32px;
    }
    .btn-effect-4 .metaball-wrap,
    .btn-effect-4 .btn-metaball-filter {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }
    .btn-effect-4 .btn-blob,
    .btn-effect-4 .blob-center,
    .btn-effect-4 .blob-drop {
      position: absolute;
      border-radius: 50%;
      background: var(--blob-color, #F2A882);
      transition: all var(--blob-speed, 0.85s) cubic-bezier(0.2, 0.9, 0.3, 1);
      opacity: 0;
      transform: scale(0.2);
    }
    .btn-effect-4 .blob-center {
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
    }
    .btn-effect-4 .btn-blob.b1,
    .btn-effect-4 .blob-drop.blob-1 {
      bottom: -25px;
      left: -20px;
      width: 110px;
      height: 110px;
    }
    .btn-effect-4 .btn-blob.b2,
    .btn-effect-4 .blob-drop.blob-2 {
      top: -20px;
      right: -20px;
      width: 100px;
      height: 100px;
      transition-delay: 0.06s;
    }
    .btn-effect-4:hover .btn-blob,
    .btn-effect-4:hover .blob-center,
    .btn-effect-4:hover .blob-drop {
      opacity: 1;
      transform: scale(2.2);
    }

    /* ----------------------------------------------------
       GRUPPE 2: 3D & MAGNETIC POP (05 – 08)
       ---------------------------------------------------- */

    /* EFFECT 05: Magnetic 3D Jelly Spring */
    .btn-effect-5 {
      --jelly-lift: -6px;
      --jelly-speed: 0.45s;
      --jelly-color: #E59A26;
      transition: transform var(--jelly-speed) cubic-bezier(0.34, 1.56, 0.64, 1), 
                  box-shadow var(--jelly-speed) ease;
    }
    .btn-effect-5:hover {
      transform: translateY(var(--jelly-lift)) scale(1.05);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
    }
    .btn-effect-5:active {
      transform: translateY(1px) scale(0.96);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .btn-effect-5 .jelly-glow-layer {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--jelly-color, #E59A26) 35%, transparent) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 1;
    }
    .btn-effect-5:hover .jelly-glow-layer {
      opacity: 1;
    }

    /* EFFECT 06: Neo-Brutalist Sticker Pop */
    .fl-builder-content .premium-btn.btn-effect-6,
    .premium-btn.btn-effect-6 {
      --brutal-shadow: #1E3354;
      --brutal-offset: 5px;
      box-shadow: var(--brutal-offset) var(--brutal-offset) 0px var(--brutal-shadow) !important;
      transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    .fl-builder-content .premium-btn.btn-effect-6:hover,
    .premium-btn.btn-effect-6:hover {
      transform: translate(-3px, -3px) !important;
      box-shadow: calc(var(--brutal-offset) + 4px) calc(var(--brutal-offset) + 4px) 0px var(--brutal-shadow) !important;
    }
    .fl-builder-content .premium-btn.btn-effect-6:active,
    .premium-btn.btn-effect-6:active {
      transform: translate(2px, 2px) !important;
      box-shadow: 2px 2px 0px var(--brutal-shadow) !important;
    }

    /* EFFECT 07: Magnetic Parallax Float & Tilt */
    .btn-effect-7 {
      --tilt-depth: 18px;
      transform-style: preserve-3d;
      transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    }
    .btn-effect-7:hover {
      transform: translateY(-8px) scale(1.04);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 0 24px var(--btn-accent, rgba(99, 102, 241, 0.3));
    }
    .btn-effect-7 .magnetic-glare,
    .btn-effect-7 .btn-magnetic-glare {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 2;
    }
    .btn-effect-7:hover .magnetic-glare,
    .btn-effect-7:hover .btn-magnetic-glare { opacity: 1; }

    /* EFFECT 08: Elastic Bubble Squish & Pulse */
    .btn-effect-8 {
      --squish-factor: 1.08;
      --bubble-color: #ec4899;
      transition: transform 0.4s cubic-bezier(0.34, 1.75, 0.64, 1), box-shadow 0.3s ease;
    }
    .btn-effect-8:hover {
      transform: scale(var(--squish-factor), 0.93) translateY(-3px);
      box-shadow: 0 14px 32px rgba(236, 72, 153, 0.35);
    }
    .btn-effect-8:active {
      transform: scale(0.92, 1.1) translateY(1px);
    }
    .btn-effect-8 .bubble-shockwave,
    .btn-effect-8 .btn-bubble-ring {
      position: absolute;
      inset: -6px;
      border-radius: inherit;
      border: 2px solid var(--bubble-color);
      opacity: 0;
      transform: scale(0.85);
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: 1;
    }
    .btn-effect-8:hover .bubble-shockwave,
    .btn-effect-8:hover .btn-bubble-ring {
      opacity: 0.8;
      transform: scale(1.18);
    }

    /* ----------------------------------------------------
       GRUPPE 3: GLOW, NEON & LASER (09 – 16)
       ---------------------------------------------------- */

    /* EFFECT 09: Cyber Neon Laser Border */
    .btn-effect-9 {
      --neon-1: #10b981;
      --neon-2: #06b6d4;
      --laser-speed: 2.2s;
      --laser-glow: 14px;
      position: relative;
    }
    .btn-effect-9 .laser-border-wrap,
    .btn-effect-9 .cyber-laser-border {
      position: absolute;
      inset: -2px;
      border-radius: calc(var(--btn-radius) + 2px);
      background: conic-gradient(from 0deg, var(--neon-1), var(--neon-2), transparent 40%, var(--neon-1));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding: 2px;
      opacity: 0.35;
      animation: laserRotateBtn var(--laser-speed) linear infinite;
      z-index: 2;
    }
    .btn-effect-9 .laser-core-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 120%, var(--neon-1) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 1;
    }
    .btn-effect-9:hover .laser-border-wrap,
    .btn-effect-9:hover .cyber-laser-border {
      opacity: 1;
      filter: drop-shadow(0 0 var(--laser-glow, 14px) var(--neon-1));
    }
    .btn-effect-9:hover .laser-core-glow { opacity: 0.4; }
    @keyframes laserRotateBtn {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* EFFECT 10: Aurora Borealis Mesh */
    .btn-effect-10 {
      --aurora-1: #9FB8AD;
      --aurora-2: #5bb098;
      --aurora-3: #38bdf8;
      --aurora-blur: 20px;
      --aurora-scale: 2.2;
      --aurora-opacity: 0.9;
    }
    .btn-effect-10 .aurora-mesh-layer,
    .btn-effect-10 .aurora-btn-canvas {
      position: absolute;
      inset: -25px;
      background: radial-gradient(circle at 75% 25%, var(--aurora-1) 0%, transparent 50%),
                  radial-gradient(circle at 25% 75%, var(--aurora-2) 0%, transparent 55%),
                  radial-gradient(circle at 50% 50%, var(--aurora-3) 0%, transparent 60%);
      filter: blur(var(--aurora-blur));
      opacity: 0;
      transform: scale(0.6) rotate(0deg);
      transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
      pointer-events: none;
      z-index: 2;
    }
    .btn-effect-10:hover .aurora-mesh-layer,
    .btn-effect-10:hover .aurora-btn-canvas {
      opacity: var(--aurora-opacity, 0.9);
      transform: scale(var(--aurora-scale, 2.2)) rotate(45deg);
    }

    /* EFFECT 11: Plasma Nebula Bloom */
    .btn-effect-11 {
      --plasma-color: #CF8852;
      --plasma-speed: 0.75s;
      --plasma-scale: 3.2;
      --plasma-radius: 75px;
    }
    .btn-effect-11 .nebula-cloud,
    .btn-effect-11 .plasma-bloom-core {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--plasma-radius, 75px);
      height: var(--plasma-radius, 75px);
      border-radius: 50%;
      background: radial-gradient(circle, var(--plasma-color) 0%, color-mix(in srgb, var(--plasma-color) 40%, transparent) 45%, transparent 75%);
      filter: blur(14px);
      transform: translate(-50%, -50%) scale(0.2);
      opacity: 0;
      transition: all var(--plasma-speed, 0.75s) cubic-bezier(0.2, 0.9, 0.3, 1);
      z-index: 2;
      pointer-events: none;
    }
    .btn-effect-11:hover .nebula-cloud,
    .btn-effect-11:hover .plasma-bloom-core {
      opacity: 0.85;
      transform: translate(-50%, -50%) scale(var(--plasma-scale, 3.2));
    }
    .fl-builder-content .premium-btn.btn-effect-11:hover,
    .premium-btn.btn-effect-11:hover {
      box-shadow: 0 10px 30px color-mix(in srgb, var(--plasma-color) 45%, transparent) !important;
    }

    /* EFFECT 12: Stardust Particle Sparks */
    .btn-effect-12 {
      --spark-color: #fbbf24;
    }
    .btn-effect-12 .btn-particle-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0.3;
      transition: opacity 0.4s ease;
    }
    .btn-effect-12:hover .btn-particle-canvas { opacity: 1; }

    /* EFFECT 13: Cyber Hologram Glitch & Scanline */
    .btn-effect-13 {
      --scan-color: #06b6d4;
      --scan-speed: 1.2s;
    }
    .btn-effect-13 .scanline-laser {
      position: absolute;
      top: -40%;
      left: 0;
      width: 100%;
      height: 35%;
      background: linear-gradient(180deg, transparent, var(--scan-color), transparent);
      opacity: 0;
      z-index: 2;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .btn-effect-13:hover .scanline-laser {
      opacity: 0.75;
      animation: btnScanAnim var(--scan-speed, 1.2s) linear infinite;
    }
    @keyframes btnScanAnim {
      0% { top: -35%; }
      100% { top: 120%; }
    }
    .btn-effect-13 .hud-corner {
      position: absolute;
      width: 6px;
      height: 6px;
      border-color: var(--scan-color);
      border-style: solid;
      pointer-events: none;
      z-index: 3;
      opacity: 0.4;
      transition: opacity 0.3s ease;
    }
    .btn-effect-13:hover .hud-corner { opacity: 1; }
    .btn-effect-13 .hud-tl { top: 3px; left: 3px; border-width: 1.5px 0 0 1.5px; }
    .btn-effect-13 .hud-tr { top: 3px; right: 3px; border-width: 1.5px 1.5px 0 0; }
    .btn-effect-13 .hud-bl { bottom: 3px; left: 3px; border-width: 0 0 1.5px 1.5px; }
    .btn-effect-13 .hud-br { bottom: 3px; right: 3px; border-width: 0 1.5px 1.5px 0; }

    /* EFFECT 14: Dual Orbital Plasma Beam */
    .btn-effect-14 {
      --beam-1: #f43f5e;
      --beam-2: #38bdf8;
      --orbit-speed: 1.6s;
      position: relative;
    }
    .btn-effect-14 .orbital-track {
      position: absolute;
      inset: -2px;
      border-radius: calc(var(--btn-radius) + 2px);
      background: conic-gradient(from 180deg, var(--beam-1), transparent 30%, var(--beam-2), transparent 80%, var(--beam-1));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding: 2px;
      opacity: 0.35;
      animation: laserRotateBtn var(--orbit-speed) linear infinite reverse;
      z-index: 2;
    }
    .btn-effect-14:hover .orbital-track {
      opacity: 1;
      filter: drop-shadow(0 0 8px var(--beam-1));
    }

    /* EFFECT 15: Cosmic Stardust Constellation */
    .btn-effect-15 {
      --constellation-color: #a855f7;
    }
    .btn-effect-15 .btn-particle-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0.35;
      transition: opacity 0.4s ease;
    }
    .btn-effect-15:hover .btn-particle-canvas { opacity: 1; }
    .btn-effect-15 .constellation-core {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.35) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 1;
      pointer-events: none;
    }
    .btn-effect-15:hover .constellation-core { opacity: 1; }

    /* EFFECT 16: Cyberpunk Neon Underglow Pulse */
    .btn-effect-16 {
      --underglow-color: #10b981;
      --underglow-size: 28px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .btn-effect-16 .neon-underglow {
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      background: var(--underglow-color);
      filter: blur(var(--underglow-size));
      opacity: 0;
      transform: scale(0.85);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: -1;
      pointer-events: none;
    }
    .btn-effect-16:hover {
      transform: translateY(-4px);
      box-shadow: 0 0 20px var(--underglow-color);
    }
    .btn-effect-16:hover .neon-underglow {
      opacity: 0.85;
      transform: scale(1.15);
    }

    /* ----------------------------------------------------
       GRUPPE 4: GLASS & SPECULAR SHEEN (17 – 20)
       ---------------------------------------------------- */

    /* EFFECT 17: Frosted Specular Beam */
    .btn-effect-17 {
      --beam-color: rgba(255, 255, 255, 0.75);
      --beam-speed: 0.65s;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .btn-effect-17 .specular-shine {
      position: absolute;
      top: 0;
      left: -130%;
      width: 70%;
      height: 100%;
      background: linear-gradient(90deg, transparent, var(--beam-color), transparent);
      transform: skewX(-25deg);
      pointer-events: none;
      z-index: 3;
      transition: left var(--beam-speed) cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-effect-17:hover .specular-shine { left: 170%; }

    /* EFFECT 18: Prismatic Rainbow Lens */
    .btn-effect-18 {
      --prism-speed: 0.75s;
      --prism-intensity: 0.9;
      --prism-gradient: linear-gradient(
        135deg,
        rgba(255,0,80,0) 0%,
        rgba(255,0,80,0.8) 12%,
        rgba(255,120,0,0.85) 24%,
        rgba(255,225,0,0.9) 36%,
        rgba(255,255,255,0.98) 50%,
        rgba(0,230,130,0.85) 60%,
        rgba(0,180,255,0.88) 72%,
        rgba(160,50,255,0.85) 86%,
        rgba(160,50,255,0) 100%
      );
    }
    .btn-effect-18 .prism-layer {
      position: absolute;
      inset: 0;
      background: var(--prism-gradient);
      background-size: 220% 220%;
      background-position: 0% 0%;
      opacity: 0;
      transition: opacity 0.3s ease, background-position var(--prism-speed) cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 2;
      pointer-events: none;
    }
    .btn-effect-18:hover .prism-layer {
      opacity: var(--prism-intensity);
      background-position: 100% 100%;
    }

    /* EFFECT 19: Liquid Frosted Acrylic & Border Glow */
    .btn-effect-19 {
      --acrylic-glow: #38bdf8;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: all 0.35s ease;
    }
    .btn-effect-19 .acrylic-sheen {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
      pointer-events: none;
      z-index: 2;
    }
    .btn-effect-19:hover {
      box-shadow: 0 0 24px var(--acrylic-glow), 0 8px 32px rgba(0, 0, 0, 0.25);
    }

    /* EFFECT 20: Dual Frosted Glass Split */
    .fl-builder-content .premium-btn.btn-effect-20,
    .premium-btn.btn-effect-20 {
      --glass-glow: #E59A26;
      --split-angle: 45deg;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: all 0.35s ease;
      position: relative;
      overflow: hidden;
    }
    .btn-effect-20 .dual-glass-split {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(var(--split-angle, 45deg), rgba(255, 255, 255, 0.22) 0%, transparent 50%, color-mix(in srgb, var(--glass-glow, #E59A26) 35%, transparent) 100%);
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.35s ease, transform 0.4s ease, background 0.4s ease;
      opacity: 0.75;
    }
    .fl-builder-content .premium-btn.btn-effect-20:hover,
    .premium-btn.btn-effect-20:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 36px color-mix(in srgb, var(--glass-glow, #E59A26) 45%, transparent), 0 0 20px color-mix(in srgb, var(--glass-glow, #E59A26) 30%, transparent) !important;
    }
    .btn-effect-20:hover .dual-glass-split {
      opacity: 1;
      background: linear-gradient(var(--split-angle, 45deg), rgba(255, 255, 255, 0.5) 0%, transparent 45%, color-mix(in srgb, var(--glass-glow, #E59A26) 75%, transparent) 100%);
      transform: scale(1.08);
    }

    /* ==========================================================================
       4. TUNING & CONTROLS ACCORDION
       ========================================================================== */
    .workspace-controls {
      background: #0d101a;
      border-top: 1px solid var(--studio-border);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .control-section-title {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #818cf8;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: 12px;
    }

    .control-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .control-label {
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--studio-text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .control-value {
      /* no font-family: theme typography applies (K10) */
      font-size: 0.72rem;
      color: #a5b4fc;
      font-weight: 700;
    }

    /* Color picker & inputs */
    .color-picker-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #151a29;
      border: 1px solid var(--studio-border);
      padding: 4px 8px;
      border-radius: 9px;
      height: 36px;
    }

    .color-picker-wrap input[type="color"] {
      -webkit-appearance: none;
      border: none;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      cursor: pointer;
      background: transparent;
    }

    .color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    .color-picker-wrap input[type="color"]::-webkit-color-swatch { border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); }

    .color-hex {
      font-family: ui-monospace, monospace;
      font-size: 0.75rem;
      color: #cbd5e1;
      text-transform: uppercase;
    }

    /* Range slider */
    input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 5px;
      background: #22293d;
      border-radius: 999px;
      outline: none;
      margin: 8px 0 4px;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #6366f1;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
      transition: transform 0.15s ease, background 0.15s ease;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.25);
      background: #818cf8;
    }

    /* Text input & Select */
    .control-text-input,
    .control-select {
      background: #151a29;
      border: 1px solid var(--studio-border);
      color: #fff;
      /* no font-family: theme typography applies (K10) */
      font-size: 0.78rem;
      padding: 6px 10px;
      border-radius: 8px;
      outline: none;
      height: 36px;
      transition: border-color 0.2s ease;
      width: 100%;
    }

    .control-text-input:focus,
    .control-select:focus {
      border-color: var(--studio-accent);
    }

    .controls-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .action-link {
      background: transparent;
      border: none;
      color: var(--studio-text-muted);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: color 0.2s ease;
    }

    .action-link:hover { color: #fff; }
/* ==========================================================================
   RUNTIME WRAPPER
   ========================================================================== */
.ms-liquid-hover-buttons { display: block; width: 100%; }
.ms-liquid-hover-buttons.reduced-motion *, .ms-liquid-hover-buttons.reduced-motion *::before, .ms-liquid-hover-buttons.reduced-motion *::after { transition: none !important; animation: none !important; }

/* WordPress icon (icon font via BB adapter) */
.premium-btn .btn-icon-font {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15em;
  line-height: 1;
}