/* ============================================================
   PIMPTHAPEN STUDIO SKIN v1.0 (v16.8.5)
   Metallic graphite console treatment for the whole Melody
   Creator — matches the Plugin Suite mock: machined bezel with
   corner screws, metal rack header, numbered chamfered tabs
   with shine sweep, graphite panels with brushed grain, LED
   buttons, lit sliders, hardware pads and keys.
   Pure overlay: no markup changes. Loads after the base styles.
   ============================================================ */

:root {
  --ptp-black: #07080d;
  --ptp-graphite: #12141c;
  --ptp-metal: #20232d;
  --ptp-purple: #984dff;
  --ptp-blue: #287cff;
  --ptp-cyan: #20d9ff;
  --ptp-text: #f4f1ff;
  --ptp-muted: #86849b;
  --skin-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --skin-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 1l12 7v14l-12 7L2 22V8z' fill='none' stroke='rgba(255,255,255,0.09)'/%3E%3Cpath d='M28 25l12 7v14l-12 7L16 46V32z' fill='none' stroke='rgba(255,255,255,0.07)'/%3E%3Cpath d='M0 25l12 7v14L0 53l-12-7V32z' fill='none' stroke='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
}

/* ---------- stage: black room + perspective grid + glow ---------- */
body {
  background:
    radial-gradient(60% 40% at 12% 8%, rgba(88, 40, 200, 0.18), transparent 60%),
    radial-gradient(50% 35% at 88% 12%, rgba(40, 90, 220, 0.14), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(120, 50, 230, 0.16), transparent 65%),
    linear-gradient(rgba(93, 66, 160, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 66, 160, 0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #100c1c 0%, #07050c 55%, #030204 100%) !important;
  background-size: auto, auto, auto, 100% 44px, 44px 100%, auto !important;
}

/* ---------- machined outer bezel with painted corner screws ---------- */
.studio {
  position: relative;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  padding: 14px !important;
  background:
    /* corner screws */
    radial-gradient(circle 7px at 14px 14px, #454857 0 2px, #23252f 3px 4.5px, #0c0d13 5px 6.5px, transparent 7px),
    radial-gradient(circle 7px at calc(100% - 14px) 14px, #454857 0 2px, #23252f 3px 4.5px, #0c0d13 5px 6.5px, transparent 7px),
    radial-gradient(circle 7px at 14px calc(100% - 14px), #454857 0 2px, #23252f 3px 4.5px, #0c0d13 5px 6.5px, transparent 7px),
    radial-gradient(circle 7px at calc(100% - 14px) calc(100% - 14px), #454857 0 2px, #23252f 3px 4.5px, #0c0d13 5px 6.5px, transparent 7px),
    var(--skin-noise),
    radial-gradient(120% 90% at 50% -15%, rgba(151, 78, 255, 0.13), transparent 55%),
    linear-gradient(160deg, #2c2f3b 0%, #191b24 20%, #0b0c12 58%, #1c1e28 94%, #10121a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 5px rgba(0, 0, 0, 0.75),
    inset 0 0 60px rgba(0, 0, 0, 0.35),
    0 26px 60px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(132, 59, 255, 0.12) !important;
}
.studio::after {
  content: "";
  position: absolute;
  top: 1px; left: 4%; right: 4%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), rgba(174, 93, 255, 0.5), transparent);
}

/* ---------- rack header ---------- */
.st-header {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, #262836 0%, #171826 55%, #101019 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    0 5px 14px rgba(0, 0, 0, 0.55) !important;
}
.st-logo {
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  background: linear-gradient(180deg, #ffffff 15%, #cbb4ff 55%, #8a5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(148, 75, 255, 0.35));
}
.st-logo span { -webkit-text-fill-color: #c095ff; }

/* ---------- buttons: beveled metal + LEDs ---------- */
.st-btn {
  border-radius: 10px !important;
  border: 1px solid rgba(155, 119, 220, 0.3) !important;
  color: #cfc6ec !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 45%, rgba(0, 0, 0, 0.2)),
    #0d0f16 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 9px rgba(0, 0, 0, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease !important;
}
.st-btn:hover { border-color: rgba(164, 99, 255, 0.7) !important; color: #fff !important; transform: translateY(-1px); }
.st-btn:active { transform: translateY(1px); }
.st-btn.primary {
  color: #fff !important;
  border: 1px solid rgba(191, 143, 255, 0.8) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    var(--skin-hex),
    linear-gradient(90deg, #6d28d9, #4338ca 60%, #1d4ed8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -6px 12px rgba(10, 2, 40, 0.6),
    0 0 14px rgba(144, 68, 255, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.55) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* REC: steady chassis, only the LED + glow pulse while recording */
.st-btn.rec {
  color: #ff94bd !important;
  border: 1px solid rgba(255, 54, 124, 0.6) !important;
  background:
    linear-gradient(180deg, rgba(255, 55, 120, 0.13), rgba(60, 4, 27, 0.3)),
    #111019 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -4px 9px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 40, 110, 0.14) !important;
}
.st-btn.rec.active,
.st-btn.rec.recording {
  color: #fff !important;
  border-color: #ff386d !important;
  background:
    linear-gradient(180deg, rgba(255, 55, 120, 0.22), rgba(60, 4, 27, 0.4)),
    #16101c !important;
  animation: skinRecPulse 1.15s ease-in-out infinite !important;
}
@keyframes skinRecPulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 9px rgba(0, 0, 0, 0.5),
      0 0 8px rgba(255, 56, 109, 0.3);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -4px 9px rgba(0, 0, 0, 0.5),
      0 0 24px rgba(255, 56, 109, 0.65);
  }
}

/* ---------- transport strip ---------- */
.st-transport {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 9px 12px !important;
  margin-bottom: 12px !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, #1c1e2a, #12131d 60%, #0d0e16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -5px 10px rgba(0, 0, 0, 0.5) !important;
}
.st-transport-btn {
  width: 40px; height: 40px;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #d9ffe6 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle, #262a36 0%, #12141c 60%, #05060a 85%) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.1),
    inset 0 -6px 10px rgba(0, 0, 0, 0.65),
    0 4px 9px rgba(0, 0, 0, 0.6) !important;
  transition: box-shadow 0.15s, transform 0.12s;
}
.st-transport-btn:first-of-type { color: #baff5e !important; text-shadow: 0 0 8px rgba(163, 230, 53, 0.8); }
.st-transport-btn:hover { box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.12), inset 0 -6px 10px rgba(0, 0, 0, 0.65), 0 0 14px rgba(148, 75, 255, 0.5) !important; }
.st-transport-btn:active { transform: translateY(1px); }
.st-bpm-label { color: #8b7aa8 !important; letter-spacing: 2px !important; }
.st-bpm-value {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
  background: #05060c;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 8px rgba(56, 189, 248, 0.15);
}

/* ---------- sliders ---------- */
input[type="range"].st-slider, .st-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #7a3bff, #2b6bff 55%, #23232f 55.2%) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 8px rgba(135, 70, 255, 0.2) !important;
  outline: none;
}
.st-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 28%, #7238df 68%, #28144d);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 7px #9f53ff, 0 0 15px rgba(111, 67, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.st-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 28%, #7238df 68%, #28144d);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 7px #9f53ff, 0 0 15px rgba(111, 67, 255, 0.5);
  cursor: pointer;
}

/* ---------- numbered chamfered tabs ---------- */
.st-tabs { counter-reset: ptpTab; gap: 7px !important; }
.st-tab {
  position: relative;
  overflow: hidden;
  counter-increment: ptpTab;
  border-radius: 10px !important;
  border: 1px solid rgba(155, 119, 220, 0.26) !important;
  color: #9d9aad !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 45%, rgba(0, 0, 0, 0.18)),
    #0d0f16 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -4px 9px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.14s ease, color 0.14s ease, border-color 0.14s ease !important;
}
.st-tab::before {
  content: counter(ptpTab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-right: 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #cbb4ff;
  vertical-align: -3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 35% 30%, #2b2d3a, #0a0b11);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.st-tab:hover { color: #fff !important; border-color: rgba(164, 99, 255, 0.65) !important; transform: translateY(-1px); }
.st-tab.active {
  color: #fff !important;
  border: none !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  padding-right: 26px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.2), transparent 52%),
    linear-gradient(180deg, #9450ff, #5821bd) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -6px 14px rgba(23, 4, 58, 0.6) !important;
  filter: drop-shadow(0 0 9px rgba(144, 68, 255, 0.6)) drop-shadow(0 0 20px rgba(74, 89, 255, 0.25));
}
.st-tab.active::before { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.st-tab.active::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.17) 43%, transparent 63%);
  transform: translateX(-120%);
  animation: skinTabShine 4.8s ease-in-out infinite;
}
@keyframes skinTabShine {
  0%, 65% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* ---------- graphite panels (Mint Lab keeps its own bezel) ---------- */
.st-panel:not(#panel-mint) {
  position: relative;
  border-radius: 16px !important;
  border: 1px solid rgba(171, 118, 255, 0.24) !important;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(151, 78, 255, 0.15), transparent 55%),
    linear-gradient(145deg, #22242e 0%, #141621 40%, #090a10 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -18px 32px rgba(0, 0, 0, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(132, 59, 255, 0.1) !important;
}
.st-panel:not(#panel-mint)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0.15;
  background:
    var(--skin-noise),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
  z-index: 0;
}
.st-panel:not(#panel-mint)::after {
  content: "";
  position: absolute;
  top: 1px; left: 5%; right: 5%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), rgba(174, 93, 255, 0.45), transparent);
}
#panel-mint { background: transparent !important; border: none !important; box-shadow: none !important; }

/* ---------- piano: ivory metal + glossy sharps ---------- */
.white-key {
  border-radius: 0 0 7px 7px !important;
  border: 1px solid #1a1626 !important;
  background: linear-gradient(180deg, #fdfdff 0%, #e8e6f2 62%, #c9c4dd 88%, #a9a2c4 100%) !important;
  box-shadow:
    inset 0 -7px 10px rgba(97, 78, 160, 0.35),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.55) !important;
}
.white-key:active, .white-key.playing {
  background: linear-gradient(180deg, #ede2ff 0%, #cdb2ff 70%, #a47dff 100%) !important;
  box-shadow: inset 0 -7px 12px rgba(90, 30, 190, 0.55), 0 0 16px rgba(148, 75, 255, 0.65) !important;
}
.black-key {
  border-radius: 0 0 5px 5px !important;
  border: 1px solid #000 !important;
  background: linear-gradient(180deg, #34343f 0%, #17171f 28%, #060609 100%) !important;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.22),
    inset 0 -5px 8px rgba(0, 0, 0, 0.9),
    0 5px 9px rgba(0, 0, 0, 0.8) !important;
}
.black-key:active, .black-key.playing {
  background: linear-gradient(180deg, #6d28d9 0%, #3b1478 60%, #12052e 100%) !important;
  box-shadow: 0 0 16px rgba(148, 75, 255, 0.75), inset 0 2px 2px rgba(255, 255, 255, 0.3) !important;
}

/* ---------- drum + kit pads: rubber hardware pads ---------- */
.drum-pad, .kit-pad {
  border-radius: 12px !important;
  border: 1px solid rgba(155, 119, 220, 0.28) !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.09), transparent 55%),
    linear-gradient(180deg, #1b1d28 0%, #10111a 55%, #0a0b12 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -7px 12px rgba(0, 0, 0, 0.6),
    0 4px 9px rgba(0, 0, 0, 0.55) !important;
  transition: transform 0.08s ease, box-shadow 0.12s ease !important;
}
.drum-pad:active, .drum-pad.hit, .kit-pad:active, .kit-pad.hit {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(180deg, #9450ff, #5b21b6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -7px 14px rgba(23, 4, 58, 0.6),
    0 0 22px rgba(144, 68, 255, 0.7) !important;
  transform: scale(0.96) !important;
}
.kit-chip {
  border-radius: 9px !important;
  border: 1px solid rgba(155, 119, 220, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.2)),
    #0d0f16 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -3px 7px rgba(0, 0, 0, 0.5) !important;
}
.kit-chip.active, .kit-chip.on {
  border-color: rgba(191, 143, 255, 0.9) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 12px rgba(144, 68, 255, 0.55) !important;
}

/* ---------- sequencer: LED steps ---------- */
.seq-step {
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: linear-gradient(180deg, #14151f, #0b0c13) !important;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.seq-step.on {
  background: linear-gradient(180deg, #a855f7, #6d28d9) !important;
  border-color: rgba(216, 180, 254, 0.8) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ---------- FX rack modules ---------- */
.fx-slot {
  border-radius: 12px !important;
  border: 1px solid rgba(155, 119, 220, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.16)),
    #0c0e15 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -7px 12px rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.45) !important;
}
.fx-slot.on {
  border-color: rgba(52, 211, 153, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -7px 12px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(16, 185, 129, 0.3) !important;
}

/* ---------- clips / library rows ---------- */
.clip-item {
  border-radius: 11px !important;
  border: 1px solid rgba(155, 119, 220, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.16)),
    #0c0e15 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -5px 10px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- recorder + export ---------- */
.recorder-viz {
  border-radius: 10px !important;
  border: 1px solid rgba(132, 94, 210, 0.25) !important;
  background:
    linear-gradient(rgba(93, 66, 160, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 66, 160, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, #090b11, #11131c) !important;
  background-size: 100% 20px, 28px 100%, 100% 100% !important;
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.export-bar {
  border-radius: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, #1b1d28, #10111a 65%, #0c0d14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -5px 10px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- inputs / selects ---------- */
.studio select, .studio input[type="text"], .studio input[type="number"], .kit-select, .kit-rec-input {
  border-radius: 9px !important;
  border: 1px solid rgba(155, 119, 220, 0.3) !important;
  color: var(--ptp-text) !important;
  background: #0a0c12 !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
.studio select:focus, .studio input:focus {
  border-color: rgba(164, 99, 255, 0.8) !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.7), 0 0 10px rgba(148, 75, 255, 0.3) !important;
  outline: none !important;
}

/* ---------- scrollbars ---------- */
.studio ::-webkit-scrollbar { width: 8px; height: 8px; }
.studio ::-webkit-scrollbar-track { background: #0a0b11; border-radius: 8px; }
.studio ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(180deg, #6d28d9, #3b1478);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- kill remaining flat lavender surfaces ---------- */
.kit-selector-bar, .kit-selector {
  border-radius: 12px !important;
  border: 1px solid rgba(155, 119, 220, 0.28) !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.2)),
    linear-gradient(180deg, #191b26, #10111a 60%, #0b0c13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.45) !important;
}
.kit-selector-label { color: #cbb4ff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(148, 75, 255, 0.4); }
/* engraved nameplate */
.kit-current-name {
  display: block;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  padding: 10px 14px !important;
  color: #e9d5ff !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, #0b0c13, #14151f 55%, #0d0e16) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.05) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95), 0 0 12px rgba(148, 75, 255, 0.45) !important;
}
.st-hint {
  border-radius: 10px !important;
  border: 1px solid rgba(155, 119, 220, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.2)), #0b0d13 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -4px 8px rgba(0, 0, 0, 0.4) !important;
}
.kit-recommender {
  border-radius: 12px !important;
  border: 1px solid rgba(52, 211, 153, 0.28) !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)),
    linear-gradient(180deg, #101720, #0b1016) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(16, 185, 129, 0.12) !important;
}
.kit-pads-wrap {
  border-radius: 14px !important;
  border: 1px solid rgba(155, 119, 220, 0.24) !important;
  background:
    var(--skin-noise),
    radial-gradient(120% 100% at 50% -20%, rgba(151, 78, 255, 0.1), transparent 55%),
    linear-gradient(145deg, #1d1f29 0%, #12141d 45%, #0a0b11 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -12px 22px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   v16.8.6 — RECORD + FX interior upgrade
   ============================================================ */

/* fx sections -> graphite console modules with engraved titles */
.fx-section {
  position: relative;
  border-radius: 14px !important;
  border: 1px solid rgba(155, 119, 220, 0.24) !important;
  background:
    var(--skin-noise),
    radial-gradient(120% 100% at 50% -20%, rgba(151, 78, 255, 0.09), transparent 55%),
    linear-gradient(150deg, #1c1e28 0%, #12131d 45%, #0a0b11 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -12px 22px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
.fx-title {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #e9d5ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(148, 75, 255, 0.4) !important;
}
.fx-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(174, 93, 255, 0.45), transparent);
}

/* master FX switches -> hardware rockers with LED track (only the knob-style toggles) */
.fx-toggle:has(> .fx-toggle-knob) {
  width: 46px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, #07080d, #14151f) !important;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.fx-toggle:has(> .fx-toggle-knob) .fx-toggle-knob {
  width: 18px !important; height: 18px !important;
  top: 2px !important; left: 2px !important;
  background: radial-gradient(circle at 35% 30%, #fdfdff, #b9b4cf 55%, #6d6787) !important;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}
.fx-toggle.on:has(> .fx-toggle-knob) {
  border-color: rgba(74, 222, 128, 0.7) !important;
  background: linear-gradient(180deg, #0b2416, #123a20) !important;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(74, 222, 128, 0.4) !important;
}
.fx-toggle.on:has(> .fx-toggle-knob) .fx-toggle-knob {
  background: radial-gradient(circle at 35% 30%, #eafff2, #4ade80 55%, #15803d) !important;
  box-shadow: 0 0 8px #4ade80, 0 0 16px rgba(74, 222, 128, 0.6), 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* fx rows get a hairline machined separator */
#panel-fx .fx-section:first-child .fx-row {
  padding: 8px 2px !important;
  margin-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#panel-fx .fx-section:first-child .fx-row:last-child { border-bottom: none; }
#panel-fx .fx-label { color: #f4f1ff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
#panel-fx .fx-desc { color: #86849b !important; }

/* TUNELOCK card + FX RACK card -> rack modules */
#panel-record .fx-section > div:has(#tlReadout),
#fxRack {
  border-radius: 13px !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
  background:
    var(--skin-noise),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, #141220, #0d0c16 60%, #0a0912) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -8px 16px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(139, 92, 246, 0.12) !important;
}
#fxRack {
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -8px 16px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(16, 185, 129, 0.1) !important;
}

/* TuneLock pitch readout -> LCD */
#tlReadout {
  color: #6ee7b7 !important;
  background:
    linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    #030906 !important;
  background-size: 100% 4px, 100% 100% !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  text-shadow: 0 0 7px rgba(52, 211, 153, 0.8) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(16, 185, 129, 0.15) !important;
}

/* recorder status -> status strip */
.recorder-status {
  border-radius: 9px !important;
  border: 1px solid rgba(155, 119, 220, 0.22) !important;
  margin: 0 0 12px !important;
  color: #cbb4ff !important;
  background: linear-gradient(180deg, #0b0c13, #10111a) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
  text-shadow: 0 0 8px rgba(148, 75, 255, 0.35);
}

/* thin lit sliders for all the TuneLock / FX param ranges */
.studio input[type="range"]:not(.st-slider):not(.dj-pitch):not(.dj-fader):not(.dj-xf) {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #7a3bff, #2b6bff) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85) !important;
  outline: none;
}
.studio input[type="range"]:not(.st-slider):not(.dj-pitch):not(.dj-fader):not(.dj-xf)::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 30%, #7238df 70%, #28144d);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px #9f53ff, 0 1px 3px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.studio input[type="range"]:not(.st-slider):not(.dj-pitch):not(.dj-fader):not(.dj-xf)::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 30%, #7238df 70%, #28144d);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px #9f53ff;
  cursor: pointer;
}

/* FX RACK preset chips */
#fxPresets button, #fxPresets .fx-preset {
  border-radius: 8px !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #7ee2bd !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25)), #0b1310 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -3px 6px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer;
}
#fxPresets button:hover, #fxPresets .fx-preset:hover {
  border-color: rgba(52, 211, 153, 0.8) !important;
  color: #d1fae5 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

/* ---------- ONE-SHOT SFX bank: compact colored trigger tiles ---------- */
#sfxGrid { gap: 9px !important; }
#sfxGrid .drum-pad {
  aspect-ratio: auto !important;
  padding: 13px 6px 11px !important;
  min-height: 0 !important;
  border-radius: 11px !important;
  font-size: 9px !important;
  letter-spacing: 1.5px;
  font-family: var(--mono, monospace);
}
#sfxGrid .drum-pad .drum-pad-icon { font-size: 20px !important; margin-bottom: 5px !important; }
#sfxGrid .drum-pad { position: relative; --sfx: #984dff; }
#sfxGrid .drum-pad::after {
  content: "" !important;
  position: absolute;
  top: auto !important;
  left: 10px !important; right: 10px !important; bottom: 5px !important;
  width: auto !important;
  border: none !important;
  height: 2px;
  border-radius: 2px;
  background: var(--sfx);
  box-shadow: 0 0 6px var(--sfx);
  opacity: 0.85;
}
#sfxGrid .drum-pad:nth-child(1) { --sfx: #a78bfa; }  /* RISER    */
#sfxGrid .drum-pad:nth-child(2) { --sfx: #f43f5e; }  /* IMPACT   */
#sfxGrid .drum-pad:nth-child(3) { --sfx: #38bdf8; }  /* SWEEP    */
#sfxGrid .drum-pad:nth-child(4) { --sfx: #facc15; }  /* ZAP      */
#sfxGrid .drum-pad:nth-child(5) { --sfx: #c084fc; }  /* VINYL    */
#sfxGrid .drum-pad:nth-child(6) { --sfx: #fb923c; }  /* AIR HORN */
#sfxGrid .drum-pad:nth-child(7) { --sfx: #34d399; }  /* REVERSE  */
#sfxGrid .drum-pad:nth-child(8) { --sfx: #22d3ee; }  /* GLITCH   */
#sfxGrid .drum-pad:active, #sfxGrid .drum-pad.hit {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.3), transparent 55%),
    linear-gradient(180deg, var(--sfx), #1a1030) !important;
  box-shadow: 0 0 20px var(--sfx), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
/* fx-rack slot rows: keep module names on one line, machined row look */
#fxList .fx-slot .fx-toggle { white-space: nowrap; }
#fxList .fx-slot {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2)), #0b0d13 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -4px 8px rgba(0, 0, 0, 0.45) !important;
}
#fxList .fx-slot.on {
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 10px rgba(16, 185, 129, 0.25) !important;
}


/* ---------- DJ vertical sliders: pitch faders, channel faders, crossfader ---------- */
.dj-pitch, .dj-fader {
  -webkit-appearance: slider-vertical !important;
  appearance: slider-vertical !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  accent-color: #9f6bff !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dj-pitch { width: 22px !important; height: 104px !important; }
.dj-fader { width: 24px !important; height: 110px !important; }
/* crossfader stays horizontal, just give it the lit track without the height crush */
.dj-xf {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 999px !important;
  accent-color: #9f6bff !important;
  background: linear-gradient(90deg, #7a3bff, #2b6bff) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(135,70,255,0.2) !important;
  outline: none;
}
.dj-xf::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 4px;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 30%, #7238df 70%, #28144d);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 7px #9f53ff, 0 2px 4px rgba(0,0,0,0.7);
  cursor: pointer;
}
.dj-xf::-moz-range-thumb {
  width: 16px; height: 18px; border-radius: 4px;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 30%, #7238df 70%, #28144d);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 7px #9f53ff;
  cursor: pointer;
}