/* ============================================================
   mrazota.vip – Glamour Edition
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Color Schemes ──────────────────────────── */
:root,
[data-scheme="midnight"]{
  --gold:#5ba0d0;
  --gold-light:#8ecae6;
  --gold-dark:#2a6496;
  --rose:#7b8cde;
  --rose-glow:rgba(123,140,222,.45);
  --gold-glow:rgba(91,160,208,.4);
  --deep:#060a10;
  --panel:#0a0e16;
  --surface:linear-gradient(160deg,#101828 0%,#0c1220 40%,#080e18 100%);
  --accent:#4a90d9;
  --accent-glow:rgba(74,144,217,.5);
  --bg-body:radial-gradient(ellipse at 50% 30%,#0e1828 0%,#060a14 50%,#030508 100%);
  --bg-main:linear-gradient(160deg,#141c2a 0%,#101826 35%,#0c1220 65%,#101826 100%);
  --bg-side:linear-gradient(180deg,#0a1020 0%,#060a18 40%,#080e1a 100%);
  --bg-display:linear-gradient(180deg,#060a12,#030610);
  --bg-knob:radial-gradient(circle at 40% 35%,#283848,#141e30);
  --bg-band-tab:linear-gradient(180deg,#121a28,#0e1622);
  --bg-disto:linear-gradient(180deg,#0e1620,#080e16);
  --bg-btn:linear-gradient(180deg,#1a2234,#101824);
  --scheme-dot:#5ba0d0;
}

[data-scheme="glamour"]{
  --gold:#d4a74a;
  --gold-light:#f0d68a;
  --gold-dark:#a07828;
  --rose:#c9788e;
  --rose-glow:rgba(201,120,142,.45);
  --gold-glow:rgba(212,167,74,.4);
  --deep:#0a0a0f;
  --panel:#0e0e14;
  --surface:linear-gradient(160deg,#1a1820 0%,#14121a 40%,#0e0c14 100%);
  --accent:#e84868;
  --accent-glow:rgba(232,72,104,.5);
  --bg-body:radial-gradient(ellipse at 50% 30%,#1a1828 0%,#0a0a12 50%,#050508 100%);
  --bg-main:linear-gradient(160deg,#1c1a24 0%,#16141e 35%,#12101a 65%,#16141e 100%);
  --bg-side:linear-gradient(180deg,#12101a 0%,#0a0810 40%,#0e0c14 100%);
  --bg-display:linear-gradient(180deg,#08070e,#04030a);
  --bg-knob:radial-gradient(circle at 40% 35%,#3a3040,#1a1820);
  --bg-band-tab:linear-gradient(180deg,#1a1822,#14121c);
  --bg-disto:linear-gradient(180deg,#18141e,#0c0a12);
  --bg-btn:linear-gradient(180deg,#22202a,#14121a);
  --scheme-dot:#d4a74a;
}

[data-scheme="blood"]{
  --gold:#c83030;
  --gold-light:#e86060;
  --gold-dark:#8a1818;
  --rose:#d45050;
  --rose-glow:rgba(212,80,80,.45);
  --gold-glow:rgba(200,48,48,.4);
  --deep:#0f0808;
  --panel:#140a0a;
  --surface:linear-gradient(160deg,#201414 0%,#1a0e0e 40%,#140a0a 100%);
  --accent:#ff4040;
  --accent-glow:rgba(255,64,64,.5);
  --bg-body:radial-gradient(ellipse at 50% 30%,#1e1010 0%,#100808 50%,#080404 100%);
  --bg-main:linear-gradient(160deg,#221616 0%,#1c1010 35%,#180c0c 65%,#1c1010 100%);
  --bg-side:linear-gradient(180deg,#180c0c 0%,#100808 40%,#120a0a 100%);
  --bg-display:linear-gradient(180deg,#0e0606,#080404);
  --bg-knob:radial-gradient(circle at 40% 35%,#3a2020,#201010);
  --bg-band-tab:linear-gradient(180deg,#1e1212,#181010);
  --bg-disto:linear-gradient(180deg,#1c0e0e,#120808);
  --bg-btn:linear-gradient(180deg,#2a1616,#1a0e0e);
  --scheme-dot:#c83030;
}

[data-scheme="smoke"]{
  --gold:#a0a0a0;
  --gold-light:#d0d0d0;
  --gold-dark:#666;
  --rose:#909090;
  --rose-glow:rgba(144,144,144,.35);
  --gold-glow:rgba(160,160,160,.3);
  --deep:#0a0a0a;
  --panel:#0e0e0e;
  --surface:linear-gradient(160deg,#1a1a1a 0%,#141414 40%,#0e0e0e 100%);
  --accent:#c0c0c0;
  --accent-glow:rgba(192,192,192,.4);
  --bg-body:radial-gradient(ellipse at 50% 30%,#1a1a1a 0%,#0c0c0c 50%,#060606 100%);
  --bg-main:linear-gradient(160deg,#1c1c1c 0%,#161616 35%,#121212 65%,#161616 100%);
  --bg-side:linear-gradient(180deg,#121212 0%,#0a0a0a 40%,#0e0e0e 100%);
  --bg-display:linear-gradient(180deg,#080808,#040404);
  --bg-knob:radial-gradient(circle at 40% 35%,#363636,#1a1a1a);
  --bg-band-tab:linear-gradient(180deg,#1a1a1a,#141414);
  --bg-disto:linear-gradient(180deg,#181818,#0e0e0e);
  --bg-btn:linear-gradient(180deg,#222,#151515);
  --scheme-dot:#a0a0a0;
}

[data-scheme="neon"]{
  --gold:#00e5ff;
  --gold-light:#80f0ff;
  --gold-dark:#0090a0;
  --rose:#ff4081;
  --rose-glow:rgba(255,64,129,.45);
  --gold-glow:rgba(0,229,255,.4);
  --deep:#050810;
  --panel:#080c14;
  --surface:linear-gradient(160deg,#0c1020 0%,#080c18 40%,#050810 100%);
  --accent:#ff4081;
  --accent-glow:rgba(255,64,129,.5);
  --bg-body:radial-gradient(ellipse at 50% 30%,#0a1020 0%,#050810 50%,#020408 100%);
  --bg-main:linear-gradient(160deg,#0e1228 0%,#0a0e20 35%,#080c18 65%,#0a0e20 100%);
  --bg-side:linear-gradient(180deg,#080c18 0%,#050810 40%,#060a14 100%);
  --bg-display:linear-gradient(180deg,#04060e,#020408);
  --bg-knob:radial-gradient(circle at 40% 35%,#1a2840,#0c1428);
  --bg-band-tab:linear-gradient(180deg,#0c1020,#080c18);
  --bg-disto:linear-gradient(180deg,#0a0e1a,#060a12);
  --bg-btn:linear-gradient(180deg,#121830,#0c1020);
  --scheme-dot:#00e5ff;
}


[data-scheme="violet"]{
  --gold:#b388ff;
  --gold-light:#d1b3ff;
  --gold-dark:#7c4dff;
  --rose:#ea80fc;
  --rose-glow:rgba(234,128,252,.45);
  --gold-glow:rgba(179,136,255,.4);
  --deep:#0a060f;
  --panel:#0e0a14;
  --surface:linear-gradient(160deg,#1a1428 0%,#140e20 40%,#0e0a16 100%);
  --accent:#ea80fc;
  --accent-glow:rgba(234,128,252,.5);
  --bg-body:radial-gradient(ellipse at 50% 30%,#181228 0%,#0c0814 50%,#060410 100%);
  --bg-main:linear-gradient(160deg,#1c162e 0%,#161028 35%,#120e20 65%,#161028 100%);
  --bg-side:linear-gradient(180deg,#120e20 0%,#0a0816 40%,#0e0a1a 100%);
  --bg-display:linear-gradient(180deg,#08060e,#04030a);
  --bg-knob:radial-gradient(circle at 40% 35%,#342848,#1c1430);
  --bg-band-tab:linear-gradient(180deg,#1a1428,#14101e);
  --bg-disto:linear-gradient(180deg,#16101e,#0e0a14);
  --bg-btn:linear-gradient(180deg,#221a32,#161024);
  --scheme-dot:#b388ff;
}

[data-scheme="copper"]{
  --gold:#e08850;
  --gold-light:#f0b088;
  --gold-dark:#a05828;
  --rose:#d4956a;
  --rose-glow:rgba(212,149,106,.4);
  --gold-glow:rgba(224,136,80,.4);
  --deep:#0f0a06;
  --panel:#140e0a;
  --surface:linear-gradient(160deg,#201810 0%,#1a120c 40%,#140e08 100%);
  --accent:#e08850;
  --accent-glow:rgba(224,136,80,.5);
  --bg-body:radial-gradient(ellipse at 50% 30%,#1e1410 0%,#100a06 50%,#080604 100%);
  --bg-main:linear-gradient(160deg,#221a12 0%,#1c140e 35%,#18100a 65%,#1c140e 100%);
  --bg-side:linear-gradient(180deg,#18100a 0%,#100a06 40%,#120e08 100%);
  --bg-display:linear-gradient(180deg,#0e0806,#080604);
  --bg-knob:radial-gradient(circle at 40% 35%,#3a2818,#201408);
  --bg-band-tab:linear-gradient(180deg,#1e1610,#18120c);
  --bg-disto:linear-gradient(180deg,#1a120c,#120c08);
  --bg-btn:linear-gradient(180deg,#2a1e14,#1a120c);
  --scheme-dot:#e08850;
}

@keyframes shimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
@keyframes pulse-glow{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 12px var(--gold-glow),0 0 30px rgba(212,167,74,.15)}
  50%{box-shadow:0 0 20px var(--gold-glow),0 0 50px rgba(212,167,74,.25)}
}

body{
  background:var(--bg-body);
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;
  font-family:'Cormorant Garamond','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  user-select:none;-webkit-user-select:none;
}

/* ── Plugin shell ────────────────────────────── */
.plugin{
  width:1050px;
  display:flex;
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.8),
    0 4px 12px rgba(0,0,0,.6),
    0 0 40px rgba(212,167,74,.08),
    inset 0 1px 0 rgba(255,255,255,.1);
  border:2px solid;
  border-image:linear-gradient(160deg,var(--gold-light),var(--gold-dark) 40%,#3a3040 70%,var(--gold-dark)) 1;
  position:relative;
}
.plugin::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at 30% 10%,rgba(212,167,74,.04),transparent 50%),
             radial-gradient(ellipse at 70% 90%,rgba(201,120,142,.03),transparent 40%);
  pointer-events:none;
}

/* ── Side Panels (Trim / Out) ────────────────── */
.side-panel{
  width:68px;min-width:68px;
  background:var(--bg-side);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:20px 0;position:relative;
  border:1px solid rgba(212,167,74,.2);
}
.side-panel::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(212,167,74,.02) 3px,rgba(212,167,74,.02) 4px),
    radial-gradient(ellipse at 50% 30%,rgba(212,167,74,.04),transparent 70%);
  pointer-events:none;
}
.side-label{
  color:var(--gold);font-size:20px;font-weight:900;letter-spacing:6px;
  writing-mode:vertical-lr;text-orientation:mixed;
  text-shadow:0 0 12px var(--gold-glow);z-index:1;
  font-family:'Cormorant Garamond',serif;
}
.side-sub{
  color:var(--rose);font-size:12px;letter-spacing:1.5px;z-index:1;
  text-shadow:0 0 6px var(--rose-glow);
}

/* ── Main Body ───────────────────────────────── */
.main-body{
  flex:1;
  background:
    repeating-linear-gradient(0deg,rgba(212,167,74,.008) 0px,rgba(212,167,74,.008) 1px,transparent 1px,transparent 3px),
    var(--bg-main);
  display:flex;flex-direction:column;position:relative;
  z-index:1;
}

/* ── TOP SECTION ─────────────────────────────── */
.top-section{
  display:flex;padding:14px 16px 6px 16px;gap:14px;
}

/* Top-Left */
.top-left{display:flex;flex-direction:column;gap:5px;min-width:110px;padding-top:4px;}
.ctrl-row{display:flex;align-items:center;gap:7px;}
.lbl{font-size:12px;color:rgba(212,167,74,.7);font-weight:600;min-width:52px;line-height:1.2;letter-spacing:.5px;}
.setup-icon{color:var(--gold);font-size:16px;cursor:pointer;text-shadow:0 0 8px var(--gold-glow);transition:.2s;}
.setup-icon:hover{text-shadow:0 0 14px var(--gold-glow),0 0 24px rgba(212,167,74,.3);}
.bpm-display{
  background:var(--bg-display);color:var(--gold-light);
  font-family:'Orbitron',monospace;font-size:13px;
  padding:3px 8px;border-radius:6px;
  border:1px solid rgba(212,167,74,.25);
  letter-spacing:2px;box-shadow:inset 0 1px 6px rgba(0,0,0,.7),0 0 8px rgba(212,167,74,.08);
  min-width:68px;text-align:center;
  text-shadow:0 0 8px rgba(212,167,74,.4);
}
.toggle-led{
  width:15px;height:15px;border-radius:50%;
  background:var(--bg-knob);
  border:1px solid rgba(212,167,74,.2);cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);transition:.2s;
}
.toggle-led[data-on="true"]{
  background:radial-gradient(circle at 38% 32%,var(--gold-light),var(--gold-dark));
  box-shadow:0 0 8px var(--gold-glow),0 0 16px rgba(212,167,74,.25),inset 0 1px 2px rgba(0,0,0,.2);
}
.vgap{height:8px;}

/* Center Column */
.center-col{flex:1;display:flex;flex-direction:column;align-items:center;}
.display-box{
  width:100%;max-width:680px;
  background:var(--bg-display);border-radius:12px;
  border:1.5px solid rgba(212,167,74,.18);
  padding:6px 10px 10px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.8),0 0 20px rgba(212,167,74,.04),0 1px 0 rgba(212,167,74,.06);
}
.display-hdr{display:flex;gap:6px;padding:3px 6px;margin-bottom:3px;}
.dtab{font-size:11px;color:rgba(212,167,74,.4);cursor:pointer;padding:2px 6px;border-radius:3px;transition:.2s;letter-spacing:.5px;}
.dtab.active{color:var(--gold-light);background:rgba(212,167,74,.1);text-shadow:0 0 6px var(--gold-glow);}
.dtab:hover{color:var(--gold);}
.dtab-sep{color:rgba(212,167,74,.15);font-size:11px;}
#waveform{width:100%;height:150px;display:block;border-radius:6px;}
.meters{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.mtr{height:7px;background:rgba(212,167,74,.06);border-radius:3px;overflow:hidden;}
.mtr-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));border-radius:2px;transition:width .08s linear,background .15s;box-shadow:0 0 6px var(--gold-glow);}

/* Title */
.title-row{display:flex;align-items:center;justify-content:center;gap:0;padding:6px 0 2px;position:relative;}
.ohm-title{
  font-family:'Pinyon Script',cursive;font-size:46px;font-weight:400;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 20%,#fff 50%,var(--gold-light) 80%,var(--gold-dark));
  background-size:400% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 6s ease-in-out infinite;
  letter-spacing:4px;line-height:1.1;
  filter:drop-shadow(0 0 10px var(--gold-glow)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.blood{position:relative;top:-6px;margin-left:-10px;}

/* Top-Right */
.top-right{display:flex;flex-direction:column;gap:8px;min-width:170px;flex-shrink:0;align-items:flex-end;padding-top:4px;position:relative;z-index:2;}
.tr-upper{display:flex;gap:12px;align-items:flex-start;}
.tiny-lbl{font-size:11px;color:rgba(212,167,74,.55);text-align:center;line-height:1.2;font-weight:600;letter-spacing:.5px;}
.tr-lower{display:flex;gap:16px;align-items:flex-start;}
.pp-group{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pp-row{display:flex;gap:10px;align-items:flex-start;}

/* ── BAND TABS ───────────────────────────────── */
.band-tabs{
  display:flex;align-items:center;
  background:var(--bg-band-tab);
  border-top:1px solid rgba(212,167,74,.15);border-bottom:1px solid rgba(212,167,74,.1);
  margin-top:2px;
}
.btab{
  flex:1;text-align:center;font-size:13px;font-weight:700;
  color:rgba(212,167,74,.4);padding:6px 0;letter-spacing:4px;
  font-family:'Cormorant Garamond',serif;
  transition:.2s;cursor:pointer;
}
.btab:hover{color:var(--gold);text-shadow:0 0 8px var(--gold-glow);}
.btab-div{width:1px;height:18px;background:rgba(212,167,74,.12);}

/* ── BANDS ───────────────────────────────────── */
.bands{display:flex;flex:1;}
.band{
  flex:1;display:flex;flex-direction:column;
  border-right:1px solid rgba(212,167,74,.08);padding:8px 8px 6px;gap:4px;
  position:relative;
}
.band::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(212,167,74,.02),transparent 60%);
  pointer-events:none;
}
.band:last-child{border-right:none;}

/* Band Core (V2: Gain-Centered Hub & Spoke) */
.band-core{display:flex;align-items:center;gap:8px;justify-content:center;padding:6px 0;position:relative;z-index:1;}
.left-stack{display:flex;flex-direction:column;align-items:center;gap:4px;}
.right-stack{display:flex;flex-direction:column;align-items:center;gap:4px;}
.fb-pair{display:flex;gap:4px;}

.shape-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.kl{font-size:11px;color:rgba(212,167,74,.55);font-weight:600;margin-top:3px;letter-spacing:.5px;}

/* Gain + Type */
.gain-area{display:flex;flex-direction:column;align-items:center;gap:2px;}
.gain-lbl{font-size:12px;font-weight:800;color:var(--gold);letter-spacing:2px;font-family:'Cormorant Garamond',serif;}

.tbtn{
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;
  cursor:pointer;transition:.2s;text-align:center;
}
.alt-btn{color:var(--rose);border:1px solid var(--rose);background:rgba(201,120,142,.06);font-style:italic;}
.alt-btn[data-on="true"]{background:var(--rose);color:#0a0a0f;box-shadow:0 0 8px var(--rose-glow);}
.type-btn{color:rgba(212,167,74,.4);border:1px solid rgba(212,167,74,.2);background:rgba(212,167,74,.03);}
.type-btn[data-on="true"]{background:var(--gold);color:#0a0a0f;border-color:var(--gold);box-shadow:0 0 8px var(--gold-glow);}

.disto-box{
  background:var(--bg-disto);
  border:1px solid rgba(212,167,74,.15);border-radius:6px;padding:0;min-width:82px;text-align:center;
  transition:.2s;position:relative;overflow:hidden;
}
.disto-box:hover{border-color:rgba(212,167,74,.3);box-shadow:0 0 8px rgba(212,167,74,.1);}
.disto-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;padding:4px 18px 4px 8px;
  background:transparent;border:none;outline:none;
  color:var(--accent);font-size:11px;font-weight:700;
  font-family:'Orbitron',monospace;letter-spacing:.5px;
  cursor:pointer;text-shadow:0 0 6px var(--accent-glow);
  text-align:center;text-align-last:center;
}
.disto-select option{
  background:var(--deep);color:var(--gold-light);
  font-family:'Orbitron',monospace;font-size:11px;
  padding:4px 8px;
}
.disto-box::after{
  content:'▾';position:absolute;right:5px;top:50%;
  transform:translateY(-50%);
  color:rgba(212,167,74,.35);font-size:9px;pointer-events:none;
}
.dn{font-size:12px;font-weight:700;}
.dn.red{color:var(--accent);text-shadow:0 0 6px var(--accent-glow);}
.dn.orange{color:var(--gold-light);text-shadow:0 0 6px var(--gold-glow);}
.xs-lbl{font-size:9px;color:rgba(212,167,74,.35);font-weight:600;}



/* Controls Row (Alt / Disto / Type) */
.controls-row{display:flex;align-items:center;gap:6px;justify-content:center;padding:4px 0;position:relative;z-index:1;}

/* Bottom Row (Solo/Mute + XY) */
.bottom-row{display:flex;align-items:center;gap:6px;justify-content:center;position:relative;z-index:1;}
.fb-row{display:flex;flex-direction:column;align-items:center;gap:4px;}
.fb-item{display:flex;flex-direction:column;align-items:center;gap:2px;}
.fb-item span{font-size:9px;color:rgba(212,167,74,.4);font-weight:600;}

.bs-left{display:flex;flex-direction:column;align-items:center;gap:3px;}
.solo,.mute{
  font-size:10px;font-weight:700;padding:2px 6px;
  border:1px solid rgba(212,167,74,.15);border-radius:4px;color:rgba(212,167,74,.35);
  cursor:pointer;background:rgba(212,167,74,.03);min-width:32px;text-align:center;transition:.2s;
  font-family:'Cormorant Garamond',serif;letter-spacing:1px;
}
.solo:hover,.mute:hover{border-color:rgba(212,167,74,.3);}
.solo[data-on="true"]{background:var(--gold);color:#0a0a0f;border-color:var(--gold);box-shadow:0 0 8px var(--gold-glow);}
.mute[data-on="true"]{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.mix-lbl{font-size:9px;color:rgba(212,167,74,.35);font-weight:600;}

/* XY Pad */
.xy-pad{
  width:56px;height:56px;
  background:
    repeating-linear-gradient(0deg,rgba(212,167,74,.06) 0px,rgba(212,167,74,.06) 1px,transparent 1px,transparent 6px),
    repeating-linear-gradient(90deg,rgba(212,167,74,.06) 0px,rgba(212,167,74,.06) 1px,transparent 1px,transparent 6px),
    var(--bg-disto);
  border:1px solid rgba(212,167,74,.15);border-radius:5px;position:relative;cursor:crosshair;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.4),0 0 8px rgba(212,167,74,.04);
}
.xy-v{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(212,167,74,.1);}
.xy-h{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(212,167,74,.1);}
.xy-dot{
  position:absolute;width:10px;height:10px;
  background:radial-gradient(circle,var(--gold-light),var(--gold-dark));border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 6px var(--gold-glow),0 1px 3px rgba(0,0,0,.4);cursor:grab;
}

.side-lbl{font-size:9px;color:rgba(212,167,74,.35);font-weight:600;writing-mode:vertical-lr;letter-spacing:1.5px;}
.vp{display:flex;justify-content:space-between;padding:0 8px;}
.vp span{font-size:8px;color:rgba(212,167,74,.3);font-weight:600;}

/* ── KNOBS ───────────────────────────────────── */
.knob{position:relative;cursor:pointer;flex-shrink:0;transition:filter .2s;}
.knob:hover{filter:brightness(1.15);}
.knob-micro{width:18px;height:18px;}
.knob-xs{width:24px;height:24px;}
.knob-sm{width:30px;height:30px;}
.knob-md{width:40px;height:40px;}
.knob-lg{width:52px;height:52px;}
.knob-xl{width:58px;height:58px;}

.knob .knob-body{
  width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.25),transparent 45%),
    radial-gradient(circle at 50% 50%,#8a7a5a,#5a4a30 50%,#3a2a18);
  border:1.5px solid rgba(212,167,74,.3);position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 8px rgba(212,167,74,.08),inset 0 1px 0 rgba(255,255,255,.15);
}
.knob .knob-indicator{
  position:absolute;top:2px;left:50%;
  width:2px;height:32%;background:var(--gold-light);
  transform:translateX(-50%);border-radius:1px;
  box-shadow:0 0 3px var(--gold-glow);
}
.knob-micro .knob-indicator{width:1.5px;height:28%;top:1px;}
.knob-xs .knob-indicator{width:1.5px;height:30%;}

/* Dark textured gain knob — obsidian gold */
.dark-knob .knob-body{
  background:
    repeating-conic-gradient(from 0deg,rgba(212,167,74,.06) 0deg 5deg,transparent 5deg 10deg),
    radial-gradient(circle at 35% 28%,rgba(212,167,74,.15),transparent 45%),
    radial-gradient(circle at 50% 50%,#2a2430,#1a1620 50%,#0e0c14);
  border:2px solid rgba(212,167,74,.2);
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 8px rgba(212,167,74,.06),inset 0 1px 0 rgba(212,167,74,.1);
}
.dark-knob .knob-indicator{background:var(--gold-light);box-shadow:0 0 4px var(--gold-glow);}

/* Side panel knobs — platinum gold */
.side-knob .knob-body{
  background:
    radial-gradient(circle at 35% 22%,rgba(255,240,220,.3),transparent 42%),
    radial-gradient(circle at 50% 50%,#b8a070,#806840 50%,#504020);
  border:2px solid rgba(212,167,74,.25);
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 8px rgba(212,167,74,.1),inset 0 1px 0 rgba(255,240,220,.2);
}
.side-knob .knob-indicator{background:var(--gold-light);width:2px;height:32%;box-shadow:0 0 3px var(--gold-glow);}

/* ── Per-band Activity LEDs (F5.3) ── */
.band-led{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#444;margin-left:5px;vertical-align:middle;
  transition:background .15s,box-shadow .15s;
}

/* ── Meter fill transition (F5.1) ── */
.mtr-fill{transition:width .08s linear,background .15s;}

/* ── 909 Kick Button ─────────────────────────── */
.kick-btn{
  width:72px;height:72px;
  border:2px solid rgba(40,200,80,.45);border-radius:6px;
  background:linear-gradient(180deg,#0d2618,#061a0e);
  color:#3cff6e;font-size:18px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 12px rgba(40,200,80,.12),inset 0 1px 0 rgba(40,200,80,.15);
  transition:.25s;letter-spacing:1.5px;
  font-family:'Orbitron',monospace;
  text-shadow:0 0 10px rgba(40,200,80,.6);
  line-height:1;
  position:relative;
  padding:0;
  animation:kick-blink .6s ease-in-out 3;
}
.kick-btn[data-on="true"]{
  background:linear-gradient(180deg,#2ecc50,#1a9e38);
  color:#021a08;border-color:#3cff6e;
  box-shadow:0 0 16px rgba(40,200,80,.5),0 0 34px rgba(40,200,80,.25),inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow:none;
  animation:kick-blink .6s ease-in-out infinite;
}
.kick-btn:active{transform:scale(.93);}
@keyframes kick-blink{
  0%,100%{opacity:1;box-shadow:0 0 16px rgba(40,200,80,.5),0 0 34px rgba(40,200,80,.25),inset 0 1px 0 rgba(255,255,255,.2);}
  50%{opacity:.7;box-shadow:0 0 24px rgba(40,200,80,.6),0 0 48px rgba(40,200,80,.4),inset 0 1px 0 rgba(255,255,255,.3);}
}


/* ── Setup Modal ─────────────────────────────── */
.setup-modal{
  position:absolute;inset:0;z-index:100;
  background:rgba(4,3,10,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
.setup-content{
  background:var(--bg-main);
  border:1.5px solid rgba(212,167,74,.25);
  border-radius:14px;padding:28px 36px;
  box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 30px rgba(212,167,74,.06);
  display:flex;flex-direction:column;gap:12px;
  min-width:220px;position:relative;
}
.setup-header{
  font-family:'Cormorant Garamond',serif;
  font-size:16px;font-weight:700;letter-spacing:5px;
  color:var(--gold);text-align:center;
  text-shadow:0 0 10px var(--gold-glow);
}
.src-btn{
  padding:10px 18px;border-radius:8px;
  border:1px solid rgba(212,167,74,.15);
  background:rgba(212,167,74,.04);
  color:rgba(212,167,74,.6);
  font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;
  letter-spacing:1px;cursor:pointer;transition:.2s;
  text-align:left;
}
.src-btn:hover{border-color:rgba(212,167,74,.35);color:var(--gold);}
.src-btn.active{
  background:linear-gradient(90deg,rgba(212,167,74,.15),rgba(212,167,74,.06));
  border-color:var(--gold);color:var(--gold-light);
  box-shadow:0 0 10px rgba(212,167,74,.12);
}
.setup-status{
  font-size:12px;color:rgba(212,167,74,.4);text-align:center;
  letter-spacing:.5px;min-height:18px;
}
.setup-close{
  position:absolute;top:10px;right:14px;
  background:none;border:none;color:rgba(212,167,74,.35);
  font-size:22px;cursor:pointer;transition:.2s;line-height:1;
}
.setup-close:hover{color:var(--gold);}

/* ── Misc ────────────────────────────────────── */
::-webkit-scrollbar{display:none;}

/* ── Prevent iOS overscroll while dragging ───── */
.plugin{touch-action:manipulation;}
.knob,.xy-pad{touch-action:none;}

/* ── Scheme Changer ───────────────────────────── */
.scheme-changer{
  display:flex;gap:4px;align-items:center;
  flex-wrap:wrap;max-width:110px;
}
.scheme-dot{
  width:12px;height:12px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);
  transition:transform .2s,box-shadow .2s,border-color .2s;
  flex-shrink:0;
}
.scheme-dot:hover{transform:scale(1.2);border-color:rgba(255,255,255,.4);}
.scheme-dot.active{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.3);transform:scale(1.15);}
.scheme-dot[data-scheme="glamour"]{background:#d4a74a;}
.scheme-dot[data-scheme="midnight"]{background:#5ba0d0;}
.scheme-dot[data-scheme="blood"]{background:#c83030;}
.scheme-dot[data-scheme="smoke"]{background:#a0a0a0;}
.scheme-dot[data-scheme="neon"]{background:#00e5ff;}
.scheme-dot[data-scheme="violet"]{background:#b388ff;}
.scheme-dot[data-scheme="copper"]{background:#e08850;}

/* ── BD-909 Kick Synth Strip (F1.5) ──────────── */
.bd909{
  width:calc(100% - 24px);margin:6px 12px 2px;
  background:var(--bg-display);
  border:1.5px solid rgba(212,167,74,.15);border-radius:12px;
  padding:10px 16px 8px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.7),0 0 20px rgba(212,167,74,.03);
}
.bd909-hdr{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;padding-bottom:5px;
  border-bottom:1px solid rgba(212,167,74,.1);
}
.bd909-seq-row{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;
}
.bd909-seq-row .kick-btn{flex-shrink:0;}
.bd909-seq-row .bd909-seq{flex:1;margin-bottom:0;}
.bd909-tempo-group{
  display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;
}
.bpm-indicator{
  font-family:'Orbitron',monospace;font-size:14px;font-weight:700;
  color:var(--gold-light);letter-spacing:2px;
  text-shadow:0 0 8px var(--gold-glow);
  min-width:48px;text-align:center;
}
.bpm-input{
  width:42px;background:transparent;border:none;outline:none;
  font-family:'Orbitron',monospace;font-size:14px;font-weight:700;
  color:var(--gold-light);letter-spacing:2px;
  text-shadow:0 0 8px var(--gold-glow);
  text-align:center;
  border-bottom:1px solid var(--gold);
  padding:0;margin:0;
  -moz-appearance:textfield;
}
.bpm-input::-webkit-outer-spin-button,
.bpm-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.bd909-hdr .bd909-trig{width:30px;height:30px;font-size:12px;}
.bd909-title{
  font-family:'Orbitron',monospace;font-size:12px;font-weight:700;
  color:var(--gold);letter-spacing:4px;
  text-shadow:0 0 10px var(--gold-glow);
}
/* 16-Step Sequencer */
.bd909-seq{
  display:flex;align-items:center;gap:4px;justify-content:center;
  margin-bottom:0;
}
.bd909-step{
  flex:1;max-width:38px;height:28px;border-radius:4px;cursor:pointer;
  background:rgba(212,167,74,.04);
  border:1px solid rgba(212,167,74,.1);
  color:rgba(212,167,74,.2);
  font-family:'Orbitron',monospace;font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s,box-shadow .12s,color .12s;
  touch-action:none;
}
.bd909-step:hover{
  background:rgba(212,167,74,.1);
  border-color:rgba(212,167,74,.25);color:rgba(212,167,74,.5);
}
.bd909-step[data-on="true"]{
  background:linear-gradient(180deg,rgba(232,72,104,.25),rgba(232,72,104,.1));
  border-color:rgba(232,72,104,.4);
  color:var(--accent);
  box-shadow:0 0 6px rgba(232,72,104,.15);
}
.bd909-step[data-on="ghost"]{
  background:linear-gradient(180deg,rgba(220,200,50,.25),rgba(220,200,50,.1));
  border-color:rgba(220,200,50,.4);
  color:#dcc832;
  box-shadow:0 0 6px rgba(220,200,50,.15);
}
.bd909-step[data-on="ghost"].playing{
  background:linear-gradient(180deg,rgba(220,200,50,.55),rgba(220,200,50,.3));
  border-color:#dcc832;color:#fff;
  box-shadow:0 0 14px rgba(220,200,50,.4),0 0 24px rgba(220,200,50,.2);
}
.bd909-step.playing{
  background:linear-gradient(180deg,rgba(212,167,74,.35),rgba(212,167,74,.15));
  border-color:var(--gold);color:var(--gold-light);
  box-shadow:0 0 10px var(--gold-glow);
}
.bd909-step[data-on="true"].playing{
  background:linear-gradient(180deg,rgba(232,72,104,.55),rgba(232,72,104,.3));
  border-color:var(--accent);color:#fff;
  box-shadow:0 0 14px var(--accent-glow),0 0 24px rgba(232,72,104,.2);
}
.bd909-seq-div{
  width:2px;height:24px;background:rgba(212,167,74,.08);
  margin:0 2px;flex-shrink:0;
}
.bd909-strip{
  display:flex;align-items:flex-end;gap:6px;justify-content:center;
}
.bd909-k{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.bd909-kb{
  width:38px;height:38px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 45% 40%,#504838,#302820 60%,#1a1410);
  border:1.5px solid rgba(212,167,74,.2);
  box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 10px rgba(212,167,74,.06);
  cursor:grab;
  touch-action:none;
}
.bd909-ind{
  position:absolute;top:4px;left:50%;
  width:2px;height:11px;border-radius:1px;
  background:var(--gold-light);
  box-shadow:0 0 4px var(--gold-glow);
  transform:translateX(-50%) rotate(var(--rot,0deg));
  transform-origin:center calc(50% + 8px);
  pointer-events:none;
}
.bd909-lbl{
  font-family:'Orbitron',monospace;
  font-size:8px;font-weight:700;letter-spacing:1px;
  color:rgba(212,167,74,.55);text-transform:uppercase;
}
.bd909-div{
  width:1px;height:44px;background:rgba(212,167,74,.1);
  margin:0 4px;align-self:center;
}
.bd909-trig{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 45% 40%,#3a2020,#1a0e0e);
  border:2px solid rgba(232,72,104,.3);
  color:var(--accent);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-weight:700;
  transition:.15s;touch-action:none;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.bd909-trig:hover{
  border-color:var(--accent);
  box-shadow:0 0 14px var(--accent-glow),0 2px 8px rgba(0,0,0,.5);
}
.bd909-trig:active{transform:scale(.9);}

/* ============================================================
   Responsive / Adaptive
   ============================================================ */

/* ── Scale-down for tablets & small laptops ──── */
@media (max-width: 1100px) {
  .plugin{
    width:100vw;
    border-radius:0;
    border-left:none;border-right:none;
    border-image:none;border-color:rgba(212,167,74,.15);
  }
}

/* ── ≤ 600px  – stack bands 2×2 ──────────────── */
@media (max-width: 600px) {
  body{align-items:flex-start;}

  .plugin{
    flex-direction:column;
    width:100vw;
    border-radius:0;border:none;
    overflow-y:auto;
    max-height:100vh;
  }

  /* Side panels become horizontal bars */
  .side-panel{
    width:100%;min-width:unset;
    flex-direction:row;
    padding:6px 12px;
    gap:10px;
  }
  .side-label{
    writing-mode:horizontal-tb;
    font-size:13px;letter-spacing:3px;
  }
  .side-panel .knob-xl{width:36px;height:36px;}

  /* Top section stacks */
  .top-section{
    flex-direction:column;
    padding:6px 8px;gap:6px;
  }
  .top-left{
    flex-direction:row;flex-wrap:wrap;gap:6px;min-width:unset;
  }
  .top-right{
    flex-direction:row;flex-wrap:wrap;gap:8px;min-width:unset;align-items:center;
  }
  .tr-upper{flex-wrap:wrap;}
  .tr-lower{flex-wrap:wrap;}

  .center-col{width:100%;}
  .display-box{max-width:100%;}
  #waveform{height:80px;}

  /* BD-909 strip responsive */
  .bd909{width:calc(100% - 12px);margin:4px 6px 2px;padding:8px 10px 6px;}
  .bd909-seq{gap:2px;}
  .bd909-step{height:22px;font-size:7px;}
  .bd909-seq-div{height:18px;}
  .bd909-strip{flex-wrap:wrap;gap:8px 10px;}
  .bd909-kb{width:32px;height:32px;}
  .bd909-ind{height:9px;top:3px;}
  .bd909-div{display:none;}
  .bd909-trig{width:36px;height:36px;font-size:14px;}
  .bd909-hdr .bd909-trig{width:26px;height:26px;font-size:10px;}

  /* Band tabs scroll */
  .band-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Bands wrap 2×2 */
  .bands{
    flex-wrap:wrap;
  }
  .band{
    flex:1 1 45%;
    min-width:140px;
    border-right:none;
    border-bottom:1px solid #aaa;
  }

  /* Slightly larger touch targets */
  .knob-micro{width:18px;height:18px;}
  .knob-xs{width:22px;height:22px;}
  .knob-sm{width:26px;height:26px;}
  .knob-md{width:34px;height:34px;}
  .knob-lg{width:42px;height:42px;}
  .knob-xl{width:46px;height:46px;}

  .xy-pad{width:52px;height:52px;}

  .toggle-led{width:16px;height:16px;}
  .solo,.mute{font-size:9px;padding:3px 6px;min-width:30px;}

  .ohm-title{font-size:24px;}
}

/* ── ≤ 380px  – single-column bands ─────────── */
@media (max-width: 380px) {
  .bands{flex-direction:column;}
  .band{flex:1 1 100%;min-width:unset;}
  .band-core{flex-wrap:wrap;}
}