:root{
  --panel:#12161f;--panel2:#0e1118;--brd:#2a3040;--brd2:#1e2530;
  --cyan:#00c8e8;--violet:#9060ff;--rose:#e840a0;--gold:#c8a020;
  --teal:#00d4a0;--orange:#e86820;--green:#40e080;
  --tx:#c8d0e0;--tx2:#8090a8;--tx3:#4a5568;
  --knob-bg:radial-gradient(circle at 35% 30%,#2a3040,#0a0d14);--knob-brd:#3a4050;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:url("fond.jpg") center / cover no-repeat fixed;font-family:'Share Tech Mono',monospace;color:var(--tx);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 0 40px;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(-55deg,transparent,transparent 40px,rgba(0,150,255,.007) 40px,rgba(0,150,255,.007) 41px);}
.scan{position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,transparent 2px,rgba(0,0,0,.03) 3px,transparent 4px);}
.wrap{position:relative;z-index:1;width:min(98vw,1100px)}
.ttl{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.5em;text-align:center;margin-bottom:4px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:tglow 5s ease-in-out infinite;}
@keyframes tglow{0%,100%{filter:drop-shadow(0 0 12px #00c8e860)}50%{filter:drop-shadow(0 0 18px #9060ff80)}}
.sub{font-family:'Rajdhani',sans-serif;font-size:.65rem;letter-spacing:.5em;color:white;margin-bottom:16px;text-align:center;}
.arc-line{height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),var(--rose),transparent);margin-bottom:16px;opacity:.6;}
.panel{background:linear-gradient(180deg,#131820,#0e1218);border:1px solid var(--brd);border-radius:16px;padding:18px;box-shadow:0 0 60px rgba(0,200,232,.04),0 2px 0 rgba(255,255,255,.04) inset,0 12px 40px rgba(0,0,0,.5);position:relative;}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,232,.3),rgba(144,96,255,.3),transparent);}
.sec-hdr{font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.22em;color:var(--tx3);margin-bottom:7px;display:flex;align-items:center;gap:8px;}
.sec-hdr::after{content:'';flex:1;height:1px;background:var(--brd);}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--brd),transparent);margin:12px 0}
.knob{width:36px;height:36px;border-radius:50%;background:var(--knob-bg);border:2px solid var(--knob-brd);position:relative;cursor:ns-resize;user-select:none;box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 4px rgba(0,0,0,.5);}
.knob:hover{box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 10px rgba(0,200,232,.3);}
.knob.dg{box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 16px rgba(0,200,232,.6);}
.kdot{position:absolute;width:3px;height:3px;background:var(--cyan);border-radius:50%;top:4px;left:50%;transform:translateX(-50%);transform-origin:center 14px;box-shadow:0 0 5px var(--cyan)}
.kw2{display:flex;flex-direction:column;align-items:center;gap:2px}
.kl{font-size:.32rem;color:var(--tx3);text-align:center;max-width:44px;letter-spacing:.03em}
.kv{font-size:.33rem;color:var(--cyan);font-family:'Orbitron',sans-serif;min-width:30px;text-align:center}
.kr{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.tog{width:30px;height:15px;background:var(--brd2);border:1px solid var(--brd);border-radius:8px;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.tog.on{background:#001a28;border-color:var(--cyan);box-shadow:0 0 8px rgba(0,200,232,.4);}
.tog::after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#3a4050;transition:left .18s}
.tog.on::after{left:17px;background:var(--cyan);box-shadow:0 0 5px var(--cyan)}
.tl{font-size:.42rem;color:var(--tx3)}.tl.on{color:var(--cyan)}

/* VOICE MODE */
.voice-mode-wrap{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;padding:8px 12px;margin-bottom:12px;flex-wrap:wrap}
.voice-mode-lbl{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.14em;color:lightyellow;}
.vm-btn{font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.1em;padding:6px 16px;border-radius:7px;cursor:pointer;border:1.5px solid var(--brd);color:var(--tx3);background:var(--panel);transition:all .2s;}
.vm-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.vm-btn.s1.act{background:linear-gradient(135deg,#001828,#002038);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(0,200,232,.3);}
.vm-btn.s2.act{background:linear-gradient(135deg,#100a28,#180a38);border-color:var(--violet);color:var(--violet);box-shadow:0 0 14px rgba(144,96,255,.3);}
.vm-btn.s3{border-color:var(--brd);}
.vm-btn.s3.act{background:linear-gradient(135deg,#0a1a10,#0e2018);border-color:#40c880;color:#40c880;box-shadow:0 0 14px rgba(64,200,128,.3);}

/* ── LCD SCREEN ── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
.lcd-screen{
  background:#040e08;
  border:1px solid #1a3020;
  border-radius:8px;
  padding:10px 16px;
  margin-bottom:10px;
  display:flex;align-items:center;gap:16px;
  box-shadow:0 0 18px rgba(0,200,80,.06),inset 0 1px 0 rgba(0,200,80,.04),inset 0 0 24px rgba(0,0,0,.6);
  position:relative;overflow:hidden;
}
.lcd-screen::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,200,80,.025) 3px,rgba(0,200,80,.025) 4px);
  pointer-events:none;
}
.lcd-label{font-family:'Orbitron',sans-serif;font-size:.3rem;letter-spacing:.25em;color:#1a5028;text-transform:uppercase;margin-bottom:3px;}
.lcd-value{
  font-family:'Share Tech Mono',monospace;
  font-size:1.05rem;
  letter-spacing:.08em;
  color:#00e060;
  text-shadow:0 0 8px rgba(0,224,96,.7),0 0 20px rgba(0,224,96,.3);
  line-height:1;
  min-width:1px;
}
.lcd-value.dim{color:#00602a;text-shadow:none;font-size:.72rem;letter-spacing:.04em;}
.lcd-sep{width:1px;height:38px;background:linear-gradient(180deg,transparent,#1a4028,transparent);flex-shrink:0;}
.lcd-block{display:flex;flex-direction:column;justify-content:center;}
.lcd-block.grow{flex:1;}
.lcd-dot{width:5px;height:5px;border-radius:50%;background:#00e060;box-shadow:0 0 6px #00e060;flex-shrink:0;margin-top:2px;animation:lcd-blink 1.2s ease-in-out infinite;}
@keyframes lcd-blink{0%,100%{opacity:1}50%{opacity:.2}}

/* Preset panel dans fxgrid */
.fx-presets-col{
  background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;
  padding:10px 8px;display:flex;flex-direction:column;gap:6px;
  position:relative;overflow:hidden;
}
.fx-presets-col::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--violet),transparent);border-radius:10px 10px 0 0;}
.fx-presets-col .preset-title{font-size:.44rem;margin-bottom:2px;}
.vm-desc{font-size:.58rem;color:var(--tx2);font-style:italic;margin-left:auto}

/* FX GRID — 5 colonnes.
   Col 1: REVERB (haut) + FLANGER (bas)
   Col 2: DELAY top + ALIEN OD bottom
   Col 3: COMP (avec sustain intégré) top + GATER bottom
   Col 4: CHORUS only
   Col 5: EQ pleine hauteur
*/
.fxgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:8px;align-items:stretch}
.fxbox{background:var(--panel2);border:1px solid var(--brd2);border-radius:12px;padding:10px 7px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.3);}
.fxbox::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:12px 12px 0 0}
.fx-rv::before{background:linear-gradient(90deg,var(--cyan),transparent)}
.fx-dl::before{background:linear-gradient(90deg,var(--gold),transparent)}
.fx-cp::before{background:linear-gradient(90deg,var(--green),transparent)}
.fx-ch::before{background:linear-gradient(90deg,var(--rose),transparent)}
.fx-fl::before{background:linear-gradient(90deg,var(--violet),transparent)}
.fx-od::before{background:linear-gradient(90deg,var(--orange),transparent)}
.fxtit{font-family:'Orbitron',sans-serif;font-size:.48rem;letter-spacing:.15em;align-self:flex-start;color:var(--tx2);}
.fx-rv .fxtit{color:var(--cyan)}.fx-dl .fxtit{color:var(--gold)}.fx-cp .fxtit{color:var(--green)}.fx-ch .fxtit{color:var(--rose)}.fx-fl .fxtit{color:var(--violet)}.fx-od .fxtit{color:var(--orange)}
/* Stack col: 2 fxboxes empilées dans une colonne */
.fx-stack{display:flex;flex-direction:column;gap:7px;}

/* SYNTH ROW — OSC1 | OSC2 | SCOPE (large) | SUSTAIN */
.osc-box{background:var(--panel2);border:1px solid var(--brd2);border-radius:12px;padding:10px 7px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.3);}
.osc-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:12px 12px 0 0;}
.osc1::before{background:linear-gradient(90deg,var(--cyan),transparent)}
.osc2::before{background:linear-gradient(90deg,var(--violet),transparent)}
.scope-box::before{background:linear-gradient(90deg,var(--cyan),var(--violet))}
.su-box::before{background:linear-gradient(90deg,var(--teal),transparent)}
.osc-tit{font-family:'Orbitron',sans-serif;font-size:.48rem;letter-spacing:.15em;align-self:flex-start;color:var(--tx2);}
.osc1 .osc-tit{color:var(--cyan)}.osc2 .osc-tit{color:var(--violet)}.scope-box .osc-tit{color:var(--cyan)}.su-box .osc-tit{color:var(--teal)}

/* OSC onoff */
.osc-onoff{display:flex;align-items:center;gap:4px;font-family:'Orbitron',sans-serif;font-size:.36rem;padding:2px 7px;border-radius:4px;cursor:pointer;border:1.5px solid var(--brd);background:var(--panel);color:var(--tx3);transition:all .15s;}
.osc-onoff.on.osc1-on{border-color:var(--cyan);color:var(--cyan);background:#001820;}
.osc-onoff.on.osc2-on{border-color:var(--violet);color:var(--violet);background:#100a28;}
.osc-onoff-dot{width:6px;height:6px;border-radius:50%;background:var(--brd);transition:all .15s;}
.osc-onoff.on.osc1-on .osc-onoff-dot{background:var(--cyan);box-shadow:0 0 5px var(--cyan);}
.osc-onoff.on.osc2-on .osc-onoff-dot{background:var(--violet);box-shadow:0 0 5px var(--violet);}
.osc-row{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.wave-btn{font-size:.35rem;padding:2px 5px;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .12s;}
.osc1 .wave-btn.on{background:#001a28;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 6px rgba(0,200,232,.4);}
.osc2 .wave-btn.on{background:#100a28;border-color:var(--violet);color:var(--violet);box-shadow:0 0 6px rgba(144,96,255,.4);}

/* Gater */
.gin{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.trow{display:flex;align-items:center;gap:6px}
.tbr{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.tb{padding:2px 3px;font-size:.3rem;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:3px;cursor:pointer;transition:all .12s;font-family:'Orbitron',sans-serif;white-space:nowrap;}
.tb.s{background:#181400;border-color:var(--gold);color:var(--gold);}

/* EQ — grande version pleine hauteur */
.eq-full{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;}
.eq-full-bands{display:flex;gap:10px;justify-content:center;flex:1;align-items:flex-end;padding:4px 0;}
.eq-full-band{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;}
.eq-full-fader{position:relative;width:22px;height:90px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;user-select:none;}
.eq-full-track{position:absolute;left:50%;transform:translateX(-50%);width:4px;height:100%;background:linear-gradient(180deg,#2a3040,#1a2030);border-radius:2px;border:1px solid var(--brd);}
.eq-full-center{position:absolute;left:50%;transform:translateX(-50%);width:14px;height:1px;background:rgba(128,64,208,.5);top:50%;pointer-events:none}
.eq-full-thumb{position:absolute;left:50%;transform:translateX(-50%);width:20px;height:13px;background:linear-gradient(180deg,#302848,#201830);border:1.5px solid #7040c0;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 6px rgba(128,64,208,.3);pointer-events:none}
.eq-full-fader.active .eq-full-thumb{background:linear-gradient(180deg,#4a3860,#301850);box-shadow:0 0 12px rgba(128,64,208,.7);}
.eq-full-lbl{font-size:.34rem;color:var(--tx3);text-align:center;}
.eq-full-val{font-size:.3rem;color:#8040d0;font-family:'Orbitron',sans-serif;min-width:24px;text-align:center}
/* Switch long pour EQ toggle */
.eq-tog-row{display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:4px;}
.eq-tog-long{width:52px;height:16px;background:var(--brd2);border:1px solid var(--brd);border-radius:8px;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.eq-tog-long.on{background:#100828;border-color:#8040d0;box-shadow:0 0 8px rgba(128,64,208,.4);}
.eq-tog-long::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#3a4050;transition:left .18s}
.eq-tog-long.on::after{left:38px;background:#8040d0;box-shadow:0 0 5px #8040d0}
/* Boutons SUSTAIN petits */
.su-btn-sm{font-family:'Orbitron',sans-serif;font-size:.3rem;letter-spacing:.03em;padding:3px 4px;border-radius:4px;cursor:pointer;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);transition:all .15s;width:100%}
.su-btn-sm.on{background:#001a14;border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px rgba(0,212,160,.3);}

/* Echo btn */
.echo-btn{font-family:'Orbitron',sans-serif;font-size:.34rem;padding:2px 6px;border-radius:4px;cursor:pointer;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);transition:all .15s;align-self:flex-start;margin-top:2px}
.echo-btn.on{background:#181000;border-color:var(--gold);color:var(--gold);box-shadow:0 0 8px rgba(200,160,32,.3);}

/* SCOPE large */
#oscBig{background:linear-gradient(180deg,#080b14,#050810);border:1px solid var(--brd);border-radius:6px;display:block;width:100%;}

/* KB */
.kbwrap{background:var(--panel2);border:1px solid var(--brd);border-radius:12px;padding:8px 10px 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 16px rgba(0,0,0,.3);flex:1;}
.kbinner{position:relative;height:78px;display:flex;}
.wkeys{display:flex;gap:2px;}
.kyw{width:30px;height:60px;background:linear-gradient(to bottom,#e8f0f8 82%,#c8d0dc);border:1px solid #6080a0;border-radius:0 0 5px 5px;cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;transition:background .05s;box-shadow:0 3px 5px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6);}
.kyw:hover{background:linear-gradient(to bottom,#d0e8f8 82%,#b0d0e8)}
.kyw.on{background:linear-gradient(to bottom,var(--cyan),#0090b0)!important;box-shadow:0 0 18px var(--cyan);}
.kh{font-size:.28rem;color:#6080a0;text-transform:uppercase;pointer-events:none}
.kyw.on .kh,.kyb.on .kh{color:#fff;}
.bkeys{position:absolute;top:0;left:0;pointer-events:none}
.kyb{width:20px;height:38px;background:linear-gradient(to bottom,#1a2030 72%,#0e1520);border:1px solid #2a3040;border-radius:0 0 4px 4px;position:absolute;top:0;cursor:pointer;pointer-events:all;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;box-shadow:0 4px 7px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);z-index:2;}
.kyb:hover{background:linear-gradient(to bottom,#2a3040 72%,#1a2030)}
.kyb.on{background:linear-gradient(to bottom,var(--violet),#5030a0)!important;box-shadow:0 0 16px var(--violet);}
.kyb .kh{font-size:.24rem;color:#4a5570}
.kbfoot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px}
.kbhint{font-size:.3rem;color:var(--tx3);line-height:1.5}
.kbright{display:flex;align-items:center;gap:8px}
.octw{display:flex;align-items:center;gap:4px}
.ob{width:20px;height:20px;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);font-family:'Orbitron',sans-serif;font-size:.6rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.ob:hover{border-color:var(--cyan);color:var(--cyan)}
.od2{font-family:'Orbitron',sans-serif;font-size:.5rem;color:var(--cyan);min-width:42px;text-align:center;font-weight:700}
.kill-btn{font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:.08em;padding:5px 11px;border-radius:6px;cursor:pointer;background:var(--panel);border:1.5px solid #e03040;color:#e03040;transition:all .12s;}
.kill-btn:hover{box-shadow:0 0 16px rgba(224,48,64,.35);}

/* PW / MOD */
.pw-wrap,.mod-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.pw-lbl,.mod-lbl{font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.15em;color:var(--tx3)}
.pw-body,.mod-body{width:18px;height:78px;background:linear-gradient(180deg,#1a2030,#0e1520);border:1px solid #2a3040;border-radius:10px;position:relative;cursor:ns-resize;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
.pw-groove,.mod-groove{position:absolute;left:50%;top:5px;bottom:5px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.06);border-radius:2px}
.mod-center-line{position:absolute;left:2px;right:2px;height:1px;top:50%;background:rgba(0,200,232,.2);pointer-events:none}
.pw-thumb{position:absolute;left:50%;width:14px;height:22px;background:linear-gradient(180deg,#e8f0f8,#8090a8);border:1px solid #5a6878;border-radius:4px;transform:translateX(-50%);top:28px;box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.mod-thumb{position:absolute;left:50%;width:14px;height:18px;background:linear-gradient(180deg,#e8f0f8,#8090a8);border:1px solid #5a6878;border-radius:3px;transform:translateX(-50%);top:calc(50% - 9px);box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.pw-val,.mod-val{font-family:'Orbitron',sans-serif;font-size:.32rem;color:var(--cyan);min-width:20px;text-align:center}
.pw-rst{font-size:.32rem;padding:2px 6px;background:var(--panel);border:1px solid var(--brd);color:var(--tx3);border-radius:3px;cursor:pointer;font-family:'Orbitron',sans-serif;}

/* Presets */
.preset-panel{background:var(--panel2);border:1px solid var(--brd);border-radius:12px;padding:12px 10px;min-width:152px;max-width:165px;flex-shrink:0;}
.preset-panel::before{content:'';display:block;width:100%;height:2px;background:linear-gradient(90deg,var(--violet),transparent);border-radius:4px;margin-bottom:8px}
.preset-title{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.22em;color:var(--violet);margin-bottom:9px;text-align:center;}
.preset-item{background:var(--panel);border:1.5px solid var(--brd2);border-radius:7px;margin-bottom:6px;overflow:hidden;transition:all .15s}
/* Encadré vert quand preset actif */
.preset-item.active{border-color:#40e080;box-shadow:0 0 10px rgba(64,224,128,.25);}
.preset-item-top{display:flex;align-items:center;gap:4px;padding:5px 7px}
.preset-name-inp{background:transparent;border:none;color:var(--tx);font-family:'Share Tech Mono',monospace;font-size:.4rem;flex:1;outline:none;min-width:0;cursor:pointer}
.preset-name-inp:focus{color:var(--cyan)}
.preset-btns{display:flex;gap:3px}
.preset-btn{font-family:'Orbitron',sans-serif;font-size:.32rem;padding:2px 5px;border-radius:3px;cursor:pointer;border:1px solid;transition:all .2s;}
.preset-select-btn{border-color:var(--brd);color:var(--tx3);background:var(--panel2)}
.preset-item.active .preset-select-btn{border-color:#40e080;color:#40e080;}
.preset-save-btn{border-color:#2a4030;color:#40a060;background:#0a1a10}
/* Surbrillance verte persistante après save */
.preset-save-btn.saved{border-color:#40e080;color:#40e080;background:#0a2010;box-shadow:0 0 8px rgba(64,224,128,.4);}
.preset-add-btn{width:100%;font-family:'Orbitron',sans-serif;font-size:.38rem;padding:6px;background:var(--panel);border:1.5px dashed var(--brd);color:gold;border-radius:6px;cursor:pointer;transition:all .15s;margin-top:2px}
.preset-add-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.preset-add-btn:disabled{opacity:.25;cursor:default;pointer-events:none}
.preset-empty{font-size:.55rem;color:white;text-align:center;padding:4px 0;font-style:italic}

/* kbarea */
.kbarea{display:flex;align-items:flex-start;gap:10px;justify-content:center}

/* ═══ SÉQUENCEUR ═══ */
.seq-section{margin-bottom:10px;}
.seq-toggle-bar{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 12px;background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;user-select:none;transition:border-color .2s;}
.seq-toggle-bar:hover{border-color:var(--rose);}
.seq-toggle-bar.open{border-color:var(--rose);border-bottom-left-radius:0;border-bottom-right-radius:0;}
.seq-toggle-title{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.3em;color:var(--rose);text-shadow:0 0 10px rgba(232,64,160,.4);}
.seq-toggle-title::before{content:'◈ ';}
.seq-chevron{margin-left:auto;font-size:.7rem;color:var(--rose);transition:transform .25s;display:inline-block;}
.seq-chevron.open{transform:rotate(180deg);}
.seq-body{background:linear-gradient(180deg,#0e0a14,#080610);border:1px solid var(--rose);border-top:none;border-radius:0 0 12px 12px;padding:14px 14px 16px;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s;max-height:0;opacity:0;pointer-events:none;}
.seq-body.open{max-height:700px;opacity:1;pointer-events:all;}

/* Transport */
.seq-transport{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.seq-play-btn{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.12em;padding:6px 16px;border-radius:7px;cursor:pointer;border:2px solid var(--rose);color:var(--rose);background:#1a0014;transition:all .18s;}
.seq-play-btn.playing{background:#1a0014;border-color:var(--rose);color:#fff;box-shadow:0 0 16px var(--rose)60;animation:seq-pulse .6s ease-in-out infinite alternate;}
@keyframes seq-pulse{from{box-shadow:0 0 10px var(--rose)50}to{box-shadow:0 0 26px var(--rose)90,0 0 50px var(--rose)30}}
.seq-bpm-wrap,.seq-speed-wrap{display:flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--brd2);border-radius:5px;padding:4px 8px;}
.seq-bpm-lbl{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.1em;color:var(--tx3);}
.seq-bpm-in{width:44px;font-family:'Orbitron',sans-serif;font-size:.5rem;background:#0a0614;border:1px solid var(--brd);color:var(--rose);border-radius:3px;padding:2px 4px;text-align:center;outline:none;}
.seq-bpm-in:focus{border-color:var(--rose);}
.seq-speed-sl{-webkit-appearance:none;appearance:none;width:80px;height:4px;border-radius:2px;background:var(--brd2);cursor:pointer;outline:none;}
.seq-speed-sl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #a07000;box-shadow:0 0 5px var(--gold)80;cursor:grab;}
.seq-speed-val{font-family:'Orbitron',sans-serif;font-size:.4rem;color:var(--gold);min-width:28px;}
.seq-step-lbl{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.08em;color:var(--tx3);}
.seq-steps-sel,.seq-mode-sel{font-size:.4rem;background:var(--panel2);border:1px solid var(--brd);color:var(--tx);border-radius:3px;padding:3px 5px;cursor:pointer;outline:none;}
.seq-status{font-family:'Orbitron',sans-serif;font-size:.4rem;color:var(--rose);margin-left:auto;letter-spacing:.1em;min-width:60px;text-align:right;}
.seq-badge{display:inline-flex;align-items:center;font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.12em;padding:2px 7px;border-radius:3px;border:1px solid var(--rose);color:var(--rose);opacity:0;transition:opacity .2s;}
.seq-badge.sh{opacity:1;animation:seq-pulse .8s ease-in-out infinite alternate;}
.seq-wipe-btn{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.08em;padding:4px 9px;border-radius:5px;cursor:pointer;background:var(--panel2);border:1.5px solid #703010;color:#e06020;transition:all .15s;}
.seq-wipe-btn:hover{border-color:var(--orange);color:var(--orange);}
.seq-wipe-btn.done{border-color:#40e080;color:#40e080;}

/* Preset slots */
.seq-preset-slot{display:flex;align-items:center;gap:3px;background:var(--panel2);border:1px solid var(--brd2);border-radius:5px;padding:3px 6px;}
.seq-preset-slot.active{border-color:var(--rose);}
.seq-preset-slot.filled .seq-preset-name{color:var(--rose);}
.seq-preset-name{font-family:'Orbitron',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.06em;color:var(--tx3);min-width:12px;text-align:center;}
.seq-preset-slot.active .seq-preset-name{color:var(--rose);}
.seq-preset-save,.seq-preset-sel{font-family:'Orbitron',sans-serif;font-size:.32rem;letter-spacing:.06em;padding:3px 6px;border-radius:3px;cursor:pointer;background:var(--panel);border:1px solid var(--brd2);color:var(--tx3);transition:all .15s;}
.seq-preset-save:hover,.seq-preset-save.saved{border-color:var(--gold);color:var(--gold);}
.seq-preset-sel:hover{border-color:var(--rose);color:var(--rose);}
.seq-preset-slot.active .seq-preset-sel{background:var(--rose);color:#fff;border-color:var(--rose);box-shadow:0 0 8px var(--rose)70;}

/* Step grid */
.sqgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
@media(max-width:700px){.sqgrid{grid-template-columns:repeat(4,1fr)}}
.sqstep{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--panel2);border:1px solid var(--brd2);border-radius:8px;padding:6px 4px 5px;position:relative;transition:all .12s;}
.sqstep.active-step{background:linear-gradient(160deg,#2a0030,#1a0020);border-color:var(--rose);box-shadow:0 0 12px var(--rose)50;}
.sqstep.has-note{border-color:#6020a030;}
.sq-step-num{font-family:'Orbitron',sans-serif;font-size:.3rem;color:var(--tx3);letter-spacing:.04em;}
.sqstep.active-step .sq-step-num{color:var(--rose);}

/* LED */
.sq-led{width:7px;height:7px;border-radius:50%;background:var(--brd2);border:1px solid var(--brd);transition:all .12s;flex-shrink:0;}
.sq-led.on{background:var(--rose);border-color:var(--rose);box-shadow:0 0 6px var(--rose),0 0 12px var(--rose)60;}
.sq-led.playing{background:#fff;box-shadow:0 0 8px var(--rose),0 0 18px #fff;animation:sq-led-flash .1s ease-in-out;}
@keyframes sq-led-flash{from{transform:scale(1.4)}to{transform:scale(1)}}

/* Note knob */
.sq-knob{width:34px;height:34px;border-radius:50%;background:var(--knob-bg);border:2px solid var(--knob-brd);position:relative;cursor:grab;box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:box-shadow .12s;user-select:none;}
.sq-knob:hover{box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 8px var(--rose)40;}
.sq-knob.has-note{border-color:#c02080;box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 10px var(--rose)50;}
.sq-knob.playing-note{border-color:#fff;box-shadow:0 0 16px var(--rose),0 0 30px var(--rose)60;}
.sq-knob-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px var(--gold);position:absolute;top:3px;left:50%;transform:translateX(-50%) rotate(-145deg);transform-origin:center 13px;transition:transform .08s ease;}

/* Note label */
.sq-note-lbl{font-family:'Orbitron',sans-serif;font-size:.3rem;color:var(--tx3);text-align:center;min-width:26px;letter-spacing:.04em;}
.sqstep.has-note .sq-note-lbl{color:var(--rose);}
.sqstep.active-step .sq-note-lbl{color:#fff;}

/* Octave */
.sq-oct-wrap{display:flex;align-items:center;gap:2px;}
.sq-oct-btn{width:13px;height:13px;font-family:'Orbitron',sans-serif;font-size:.5rem;background:var(--panel);border:1px solid var(--brd);color:var(--tx3);border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;line-height:1;padding:0;}
.sq-oct-btn:hover{border-color:var(--rose);color:var(--rose);}
.sq-oct-disp{font-family:'Orbitron',sans-serif;font-size:.28rem;color:var(--tx3);min-width:14px;text-align:center;}
.sqstep.has-note .sq-oct-disp{color:var(--rose);}


/* ═══ LOOP STATION ═══ */
.loop-section{margin-bottom:10px;}
.loop-toggle-bar{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 12px;background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;user-select:none;transition:border-color .2s;}
.loop-toggle-bar:hover{border-color:var(--teal);}
.loop-toggle-bar.open{border-color:var(--teal);border-bottom-left-radius:0;border-bottom-right-radius:0;}
.loop-toggle-title{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.3em;color:var(--teal);text-shadow:0 0 10px rgba(0,200,160,.4);}
.loop-toggle-title::before{content:'⬤ ';}
.loop-chevron{margin-left:auto;font-size:.7rem;color:var(--teal);transition:transform .25s;display:inline-block;}
.loop-chevron.open{transform:rotate(180deg);}
.loop-body{background:linear-gradient(180deg,#08120e,#060e0a);border:1px solid var(--teal);border-top:none;border-radius:0 0 12px 12px;padding:14px 14px 16px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .25s;max-height:0;opacity:0;pointer-events:none;}
.loop-body.open{max-height:1400px;opacity:1;pointer-events:all;}
.loop-badge{display:inline-flex;align-items:center;font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.12em;padding:2px 7px;border-radius:3px;border:1px solid var(--teal);color:var(--teal);opacity:0;transition:opacity .2s;}
.loop-badge.sh{opacity:1;animation:loop-pulse .8s ease-in-out infinite alternate;}
@keyframes loop-pulse{from{box-shadow:0 0 4px var(--teal)50}to{box-shadow:0 0 14px var(--teal)90}}
.ltop{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.lbw{display:flex;align-items:center;gap:5px;font-size:.44rem;color:var(--tx3);font-family:'Orbitron',sans-serif;letter-spacing:.08em;}
.lbs{background:var(--panel2);border:1px solid var(--brd);color:var(--tx);font-size:.44rem;border-radius:3px;padding:2px 4px;cursor:pointer;outline:none;}
.bpm-wrap{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--brd2);border-radius:5px;padding:4px 9px;}
.bpm-lbl{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.1em;color:var(--tx3);}
.bpm-in{width:42px;font-family:'Orbitron',sans-serif;font-size:.5rem;background:#040810;border:1px solid var(--brd);color:var(--cyan);border-radius:3px;padding:2px 4px;text-align:center;outline:none;}
.bpm-in:focus{border-color:var(--cyan);}
.tap-btn{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.08em;padding:3px 8px;background:var(--panel2);border:1.5px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .15s;}
.tap-btn:hover,.tap-btn.fl{border-color:var(--teal);color:var(--teal);box-shadow:0 0 8px var(--teal)40;}
.bpm-dur{font-size:.4rem;color:var(--orange);font-family:'Orbitron',sans-serif;white-space:nowrap;}
.brow{display:flex;gap:2px;align-items:center;margin-left:auto;}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--brd);}
.bdot.bf{width:8px;height:8px;}
.bdot.on{background:var(--orange);box-shadow:0 0 4px var(--orange);}
.bdot.bf.on{background:var(--gold);box-shadow:0 0 6px var(--gold);}
.metro-btn{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.06em;padding:4px 8px;background:var(--panel2);border:1.5px solid #904030;color:#e06040;border-radius:4px;cursor:pointer;transition:all .15s;}
.metro-btn.on{border-color:var(--orange);color:var(--orange);box-shadow:0 0 8px var(--orange)40;}
.ltrk{display:flex;align-items:center;gap:7px;background:#0a0e0c;border:1px solid var(--brd2);border-left:3px solid #40c08040;border-radius:7px;padding:7px 9px;margin-bottom:7px;transition:border-left-color .15s,box-shadow .15s;}
.ltrk.armed{border-left-color:var(--gold)!important;}
.ltrk.rcing{border-left-color:var(--red)!important;box-shadow:0 0 10px var(--red)30!important;animation:lrp .5s ease-in-out infinite alternate;}
.ltrk.play{border-left-color:#20c06080!important;}
@keyframes lrp{from{box-shadow:0 0 5px var(--red)40}to{box-shadow:0 0 18px var(--red)80}}
.tnum{font-family:'Orbitron',sans-serif;font-size:.5rem;min-width:12px;text-align:center;}
.tlayers{font-family:'Orbitron',sans-serif;font-size:.42rem;color:var(--tx3);min-width:20px;text-align:center;}
.ltrk.play .tlayers{color:var(--teal)}.ltrk.rcing .tlayers{color:var(--red)}.ltrk.armed .tlayers{color:var(--gold)}
.twv{flex:1;height:32px;background:#030806;border:1px solid var(--brd2);border-radius:4px;position:relative;overflow:hidden;}
.wvc{width:100%;height:100%;display:block;}
.tph{position:absolute;top:0;bottom:0;width:2px;left:0;display:none;pointer-events:none;}
.ltrk.play .tph,.ltrk.armed .tph,.ltrk.rcing .tph{display:block;}
.ltrk.play .tph{background:var(--teal);box-shadow:0 0 4px var(--teal);}
.ltrk.rcing .tph{background:var(--red);box-shadow:0 0 4px var(--red);animation:bl .3s ease-in-out infinite alternate;}
.ltrk.armed .tph{background:var(--gold);box-shadow:0 0 4px var(--gold);}
.tstat{font-family:'Orbitron',sans-serif;font-size:.4rem;color:var(--tx3);min-width:56px;text-align:center;}
.ltrk.play .tstat{color:var(--teal)}.ltrk.rcing .tstat{color:var(--red)}.ltrk.armed .tstat{color:var(--gold);animation:bl .8s ease-in-out infinite alternate}
.tbtns{display:flex;gap:3px;}
.lb{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.04em;padding:4px 6px;border-radius:4px;cursor:pointer;border:1px solid;transition:all .13s;white-space:nowrap;}
.lb.rc{background:#180a0a;border-color:#6a3030;color:#e06060;}
.lb.rc:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 6px var(--red)30;}
.lb.rc.arm{background:#1a1600;border-color:var(--gold);color:var(--gold);}
.lb.rc.rcon{border-color:var(--red);color:var(--red);animation:bl .4s ease-in-out infinite alternate;}
.lb.pl{background:#08180e;border-color:#406050;color:#60c080;}
.lb.pl:hover,.lb.pl.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px var(--teal)30;}
.lb.st{background:var(--panel2);border-color:var(--brd);color:var(--tx3);padding:4px 5px;}
.lb.st:hover{border-color:var(--gold);color:var(--gold);}
.lb.cl{background:#180808;border-color:#5a2828;color:#c06060;padding:4px 5px;}
.lb.cl:hover{border-color:var(--red);color:var(--red);}
.tvol{display:flex;flex-direction:column;align-items:center;gap:2px;}
.vsl{-webkit-appearance:none;width:42px;height:3px;background:var(--brd2);border-radius:2px;cursor:pointer;accent-color:var(--teal);}
.vsl::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;background:var(--teal);border-radius:50%;box-shadow:0 0 4px var(--teal);}
.vll{font-size:.32rem;color:var(--tx3);}
.tdel{font-size:.4rem;padding:4px 5px;background:#180808;border:1px solid #5a2828;color:#c06060;border-radius:4px;cursor:pointer;}
.tdel:hover{border-color:var(--red);color:var(--red);}
.add-trk{display:flex;justify-content:center;margin:5px 0;}
.atbtn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;padding:5px 13px;background:var(--panel2);border:1.5px dashed var(--brd);color:var(--tx3);border-radius:6px;cursor:pointer;transition:all .18s;}
.atbtn:hover{border-color:var(--teal);color:var(--teal);}
.lbot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--brd2);}
.lb.sa{background:#141008;border-color:#5a4820;color:#c0a040;}
.lb.sa:hover{border-color:var(--gold);color:var(--gold);}
.lb.ca{background:#180808;border-color:#5a2828;color:#c04040;}
.lb.ca:hover{border-color:var(--red);color:var(--red);}
.linfo{font-size:.38rem;color:var(--tx3);font-style:italic;}
.ltmr{font-family:'Orbitron',sans-serif;font-size:.58rem;color:var(--orange);margin-left:auto;letter-spacing:.1em;}
.tc0{border-left-color:#e8204090!important} .tc1{border-left-color:#0068e090!important}
.tc2{border-left-color:#8020c090!important} .tc3{border-left-color:#c8a02090!important}
.tc4{border-left-color:#e8682090!important} .tc5{border-left-color:#20a06090!important}

.stomp-section{margin-top:10px;}
.stomp-toggle-bar{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 12px;background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;user-select:none;transition:border-color .2s;}
.stomp-toggle-bar:hover{border-color:var(--orange);}
.stomp-toggle-bar.open{border-color:var(--orange);border-bottom-left-radius:0;border-bottom-right-radius:0;}
.stomp-toggle-title{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.3em;color:var(--orange);text-shadow:0 0 10px rgba(232,104,32,.4);}
.stomp-toggle-title::before{content:'⬡ ';}
.stomp-chevron{margin-left:auto;font-size:.7rem;color:var(--orange);transition:transform .25s;display:inline-block;}
.stomp-chevron.open{transform:rotate(180deg);}
.stomp-body{background:linear-gradient(180deg,#0e1118,#0b0e16);border:1px solid var(--orange);border-top:none;border-radius:0 0 12px 12px;padding:14px 14px 16px;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s;max-height:0;opacity:0;pointer-events:none;}
.stomp-body.open{max-height:900px;opacity:1;pointer-events:all;}

/* Pads */
.stomp-pads-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.stomp-pad{width:76px;height:72px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px solid;font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:.1em;position:relative;overflow:hidden;transition:filter .08s,transform .08s;user-select:none;}
.stomp-pad::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.07),transparent 70%);}
.stomp-pad:active,.stomp-pad.flash{filter:brightness(1.7);transform:scale(.95);}
.stomp-pad.selected{box-shadow:0 0 0 2px #fff, 0 0 16px currentColor;}
.stomp-pad-icon{font-size:1.1rem;line-height:1;}
.sp-kick{background:linear-gradient(160deg,#1a0a00,#0d0500);border-color:#e85020;color:#e85020;}
.sp-snare{background:linear-gradient(160deg,#0a1500,#050b00);border-color:#80c820;color:#80c820;}
.sp-hihat{background:linear-gradient(160deg,#00101a,#00080f);border-color:#00c8e8;color:#00c8e8;}
.sp-ride{background:linear-gradient(160deg,#100a20,#080516);border-color:#9060ff;color:#9060ff;}
.sp-blank{background:linear-gradient(160deg,#111620,#0a0e18);border-color:#3a4050;color:#606878;}

/* Patterns section */
.stomp-patterns-toggle{display:flex;align-items:center;gap:8px;padding:5px 0;margin-bottom:6px;}
.pat-toggle-btn{font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:.12em;padding:5px 14px;border-radius:6px;cursor:pointer;border:1.5px solid var(--brd);color:var(--tx3);background:var(--panel);transition:all .2s;}
.pat-toggle-btn.on{background:#1a0a00;border-color:var(--orange);color:var(--orange);box-shadow:0 0 10px rgba(232,104,32,.3);}
.stomp-pat-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s;pointer-events:none;}
.stomp-pat-body.open{max-height:500px;opacity:1;pointer-events:all;}

/* BPM / BARS controls */
.pat-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:8px 10px;background:var(--panel2);border-radius:8px;border:1px solid var(--brd2);}
.pat-ctrl-lbl{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.12em;color:var(--tx3);}
.pat-bpm-wrap{display:flex;align-items:center;gap:5px;}
.pat-bpm-inp{width:52px;background:#0a0d14;border:1.5px solid var(--brd);color:var(--cyan);font-family:'Orbitron',sans-serif;font-size:.52rem;text-align:center;border-radius:5px;padding:3px 4px;outline:none;}
.pat-bpm-inp:focus{border-color:var(--cyan);}
.pat-bars-wrap{display:flex;gap:4px;}
.pat-bar-btn{font-family:'Orbitron',sans-serif;font-size:.38rem;padding:4px 8px;border-radius:5px;cursor:pointer;border:1.5px solid var(--brd);color:var(--tx3);background:var(--panel);transition:all .15s;}
.pat-bar-btn.on{background:#140800;border-color:var(--orange);color:var(--orange);}
.pat-play-btn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;padding:6px 16px;border-radius:7px;cursor:pointer;border:1.5px solid #40e080;color:#40e080;background:#0a1a0a;transition:all .2s;margin-left:auto;}
.pat-play-btn:hover{box-shadow:0 0 12px rgba(64,224,128,.3);}
.pat-play-btn.playing{background:#001a08;border-color:#40e080;box-shadow:0 0 14px rgba(64,224,128,.5);animation:pat-pulse 1s ease-in-out infinite;}
@keyframes pat-pulse{0%,100%{box-shadow:0 0 8px rgba(64,224,128,.4)}50%{box-shadow:0 0 20px rgba(64,224,128,.7)}}

/* Timeline */
.stomp-timeline{background:#080b14;border:1px solid var(--brd2);border-radius:8px;padding:8px;margin-bottom:10px;overflow-x:auto;}
.timeline-label{font-family:'Orbitron',sans-serif;font-size:.36rem;letter-spacing:.15em;color:var(--tx3);margin-bottom:5px;}
.timeline-slots{display:flex;gap:4px;flex-wrap:nowrap;min-height:52px;align-items:center;}
.tl-slot{width:46px;height:46px;border-radius:6px;border:1.5px solid var(--brd2);background:var(--panel);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex-shrink:0;transition:border-color .15s;position:relative;}
.tl-slot:hover{border-color:var(--tx3);}
.tl-slot.filled{border-color:rgba(255,255,255,.2);}
.tl-slot.playing-now{border-color:#40e080;box-shadow:0 0 10px rgba(64,224,128,.6);}
.tl-slot-icon{font-size:.8rem;line-height:1;}
.tl-slot-name{font-family:'Orbitron',sans-serif;font-size:.25rem;color:var(--tx3);text-align:center;}
.tl-slot-idx{position:absolute;top:2px;left:3px;font-family:'Orbitron',sans-serif;font-size:.22rem;color:var(--tx3);opacity:.5;}
.tl-clear-btn{font-family:'Orbitron',sans-serif;font-size:.34rem;padding:3px 9px;border-radius:4px;cursor:pointer;border:1px solid var(--brd);color:var(--tx3);background:var(--panel);transition:all .15s;margin-left:auto;display:block;}
.tl-clear-btn:hover{border-color:#e03040;color:#e03040;}

/* Pattern presets */
.pat-presets-row{display:flex;gap:8px;}
.pat-preset-slot{flex:1;background:var(--panel);border:1.5px solid var(--brd2);border-radius:8px;padding:7px 8px;display:flex;flex-direction:column;gap:5px;}
.pat-preset-name{font-family:'Share Tech Mono',monospace;font-size:.38rem;color:var(--tx);background:transparent;border:none;outline:none;width:100%;cursor:pointer;}
.pat-preset-name:focus{color:var(--cyan);}
.pat-preset-btns{display:flex;gap:4px;}
.pat-preset-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:.3rem;padding:3px 5px;border-radius:3px;cursor:pointer;border:1px solid;transition:all .2s;}
.pab-load{border-color:var(--brd);color:var(--tx3);background:var(--panel2);}
.pab-load.active{border-color:#40e080;color:#40e080;}
.pab-save{border-color:#2a4030;color:#40a060;background:#0a1a10;}
.pab-save.saved{border-color:#40e080;color:#40e080;background:#0a2010;box-shadow:0 0 6px rgba(64,224,128,.3);}

/* Drag ghost */
.stomp-pad[draggable]{cursor:grab;}
.stomp-pad[draggable]:active{cursor:grabbing;}
.tl-slot.drag-over{border-color:#fff!important;background:#1a2030;transform:scale(1.08);}

/* Speed switch */
.speed-switch-wrap{display:flex;align-items:center;gap:6px;}
.speed-lbl{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.1em;color:var(--tx3);}
.speed-btns{display:flex;gap:3px;}
.spd-btn{font-family:'Orbitron',sans-serif;font-size:.34rem;padding:3px 7px;border-radius:4px;cursor:pointer;border:1.5px solid var(--brd);color:var(--tx3);background:var(--panel);transition:all .15s;}
.spd-btn.on{background:#001a08;border-color:#40e080;color:#40e080;}

/* StompBox FX */
.stomp-fx-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--brd2);}
.stomp-fx-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.stomp-fx-title{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.2em;color:var(--tx3);}
.stomp-fx-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;}
.stomp-fx-box{background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;overflow:hidden;}
.stomp-fx-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:10px 10px 0 0;}
.sfx-rv::before{background:linear-gradient(90deg,var(--cyan),transparent);}
.sfx-eq::before{background:linear-gradient(90deg,#8040d0,transparent);}
.stomp-fx-name{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.15em;color:var(--tx3);align-self:flex-start;}
.sfx-rv .stomp-fx-name{color:var(--cyan);}
.sfx-eq .stomp-fx-name{color:#8040d0;}
.sfx-onoff{display:flex;align-items:center;gap:5px;align-self:flex-start;margin-bottom:2px;}
.stomp-knobs-row{display:flex;gap:8px;}



/* VU */
.vu-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.vu-title{font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.18em;color:var(--tx3);text-align:center}
.vu-inner{display:flex;flex-direction:row;align-items:flex-end;gap:10px}
/* VU body: flex-direction column, on empile du haut vers le bas, seg[0]=top=fort signal */
.vu-body{width:28px;height:100px;background:linear-gradient(180deg,#0a0d14,#050709);border-radius:5px;border:1px solid #2a3040;box-shadow:inset 0 2px 6px rgba(0,0,0,.8);position:relative;overflow:hidden;padding:4px;display:flex;flex-direction:column;justify-content:flex-start;}
.vu-body::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0px,transparent 5px,rgba(0,0,0,.3) 5px,rgba(0,0,0,.3) 6px);pointer-events:none;z-index:3;}
.vu-seg{width:100%;flex-shrink:0;border-radius:2px;margin-bottom:1px;transition:background .04s}
.vu-scale{position:absolute;right:-22px;top:4px;bottom:4px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:6}
.vu-tick{font-family:'Orbitron',sans-serif;font-size:.24rem;color:var(--tx3);line-height:1;white-space:nowrap}
.vu-tick.hot{color:rgba(224,48,64,.6);}
.vu-clip-led{width:9px;height:9px;border-radius:50%;background:var(--brd);}
.vu-clip-led.clip{background:#e03040;box-shadow:0 0 8px #e03040;}
.vu-clip-lbl{font-family:'Orbitron',sans-serif;font-size:.24rem;color:var(--tx3);text-align:center;}
.mvol-section{display:flex;flex-direction:column;align-items:center;gap:4px}
.mvol-lbl{font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.12em;color:var(--tx3)}
.mvol-knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a3040,#0a0d14);border:2.5px solid var(--brd);position:relative;cursor:ns-resize;user-select:none;box-shadow:0 4px 12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);}
.mvol-dot{position:absolute;width:4px;height:4px;background:var(--cyan);border-radius:50%;top:4px;left:50%;transform:translateX(-50%) rotate(-145deg);transform-origin:center 16px;box-shadow:0 0 6px var(--cyan)}
.mvol-val{font-family:'Orbitron',sans-serif;font-size:.34rem;color:var(--cyan)}

/* MIDI */
.mbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:5px 11px;background:var(--panel2);border:1px solid var(--brd2);border-radius:6px;flex-wrap:wrap}
.mbtn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;padding:5px 10px;background:var(--panel);border:1px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .2s}
.mbtn.ok{border-color:var(--cyan);color:var(--cyan);}
.mdev{font-size:.44rem;color:var(--cyan)}
.led{width:7px;height:7px;border-radius:50%;background:var(--brd);flex-shrink:0}
.led.on{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
/* Small scope (header row) */
.osc-wrap-inline{display:flex;flex-direction:column;gap:2px;background:var(--panel2);border:1px solid var(--brd);border-radius:8px;padding:6px 8px;flex-shrink:0;}
.osc-lbl-inline{font-family:'Orbitron',sans-serif;font-size:.32rem;letter-spacing:.18em;color:var(--tx3)}
#osc{width:140px;height:46px;background:linear-gradient(180deg,#080b14,#050810);border:1px solid var(--brd);border-radius:5px;display:block;}

/* ═══ LOOP STATION ═══ */
.loop-section{margin-top:12px;}
.loop-toggle-bar{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 12px;background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;user-select:none;transition:border-color .2s;}
.loop-toggle-bar:hover{border-color:var(--teal);}
.loop-toggle-bar.open{border-color:var(--teal);border-bottom-left-radius:0;border-bottom-right-radius:0;}
.loop-toggle-title{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.3em;color:var(--teal);text-shadow:0 0 10px rgba(0,212,160,.3);}
.loop-toggle-title::before{content:'⬤ ';}
.loop-chevron{margin-left:auto;font-size:.7rem;color:var(--teal);transition:transform .25s;display:inline-block;}
.loop-chevron.open{transform:rotate(180deg);}
.loop-body{background:linear-gradient(180deg,#08120e,#060e0a);border:1px solid var(--teal);border-top:none;border-radius:0 0 12px 12px;padding:14px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;max-height:0;opacity:0;pointer-events:none;}
.loop-body.open{max-height:900px;opacity:1;pointer-events:all;}
.loop-badge{display:inline-flex;align-items:center;font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.12em;padding:2px 8px;border-radius:3px;border:1px solid var(--teal);color:var(--teal);opacity:0;transition:opacity .2s;}
.loop-badge.sh{opacity:1;animation:lbadge .9s ease-in-out infinite alternate;}
@keyframes lbadge{from{box-shadow:0 0 4px var(--teal)40}to{box-shadow:0 0 14px var(--teal)90}}

/* Top controls bar */
.ltop{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.lbw{display:flex;align-items:center;gap:5px;font-size:.44rem;color:var(--tx3);}
.lbs{background:var(--panel2);border:1px solid var(--brd);color:var(--tx);font-size:.44rem;border-radius:3px;padding:2px 5px;cursor:pointer;outline:none;}
.bpm-wrap{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--brd2);border-radius:5px;padding:4px 9px;}
.bpm-lbl{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.1em;color:var(--tx3);}
.bpm-in{width:44px;font-family:'Orbitron',sans-serif;font-size:.5rem;background:#061008;border:1px solid var(--brd);color:var(--teal);border-radius:3px;padding:2px 4px;text-align:center;outline:none;}
.bpm-in:focus{border-color:var(--teal);}
.tap-btn{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.08em;padding:4px 8px;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .15s;}
.tap-btn:hover{border-color:var(--teal);color:var(--teal);}
.tap-btn.fl{background:#061810;border-color:var(--teal);box-shadow:0 0 10px var(--teal)40;}
.bpm-dur{font-size:.4rem;color:var(--orange);font-family:'Orbitron',sans-serif;white-space:nowrap;}
.brow{display:flex;gap:2px;align-items:center;margin-left:auto;}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--brd);transition:all .12s;}
.bdot.bf{width:8px;height:8px;}
.bdot.on{background:var(--teal);box-shadow:0 0 5px var(--teal);}
.bdot.bf.on{background:var(--gold);box-shadow:0 0 7px var(--gold);}

/* Track rows */
.ltrk{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--brd2);border-left:3px solid #40c08040;border-radius:7px;padding:7px 9px;margin-bottom:7px;transition:border-color .15s,box-shadow .15s;}
.ltrk.armed{border-left-color:var(--gold)!important;}
.ltrk.rcing{border-left-color:#e03040!important;box-shadow:0 0 12px #e0304030!important;animation:lrec .5s ease-in-out infinite alternate;}
.ltrk.play{border-left-color:var(--teal)!important;}
@keyframes lrec{from{box-shadow:0 0 5px #e0304040}to{box-shadow:0 0 20px #e0304080}}
.tnum{font-family:'Orbitron',sans-serif;font-size:.5rem;min-width:12px;text-align:center;}
.tlayers{font-family:'Orbitron',sans-serif;font-size:.4rem;color:var(--tx3);min-width:22px;text-align:center;}
.ltrk.play .tlayers{color:var(--teal);} .ltrk.rcing .tlayers{color:#e03040;} .ltrk.armed .tlayers{color:var(--gold);}
.twv{flex:1;height:32px;background:#0a0e14;border:1px solid var(--brd2);border-radius:4px;position:relative;overflow:hidden;}
.wvc{width:100%;height:100%;display:block;}
.tph{position:absolute;top:0;bottom:0;width:2px;left:0;display:none;pointer-events:none;}
.ltrk.play .tph,.ltrk.armed .tph,.ltrk.rcing .tph{display:block;}
.ltrk.play .tph{background:var(--teal);box-shadow:0 0 4px var(--teal);}
.ltrk.rcing .tph{background:#e03040;box-shadow:0 0 4px #e03040;}
.ltrk.armed .tph{background:var(--gold);box-shadow:0 0 4px var(--gold);}
.tstat{font-family:'Orbitron',sans-serif;font-size:.38rem;color:var(--tx3);min-width:64px;text-align:center;}
.ltrk.play .tstat{color:var(--teal);} .ltrk.rcing .tstat{color:#e03040;} .ltrk.armed .tstat{color:var(--gold);}
.tbtns{display:flex;gap:3px;}
.lb{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.04em;padding:4px 6px;border-radius:4px;cursor:pointer;border:1px solid;transition:all .12s;white-space:nowrap;}
.lb.rc{background:#120608;border-color:#602020;color:#c04040;}
.lb.rc:hover{border-color:#e03040;color:#e03040;box-shadow:0 0 6px #e0304030;}
.lb.rc.arm{background:#121000;border-color:var(--gold);color:var(--gold);}
.lb.rc.rcon{border-color:#e03040;color:#e03040;animation:lblink .4s ease-in-out infinite alternate;}
@keyframes lblink{from{opacity:.7}to{opacity:1;box-shadow:0 0 8px #e0304060}}
.lb.pl{background:#060e0a;border-color:#205030;color:#40a060;}
.lb.pl:hover,.lb.pl.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px var(--teal)30;}
.lb.st{background:var(--panel2);border-color:var(--brd);color:var(--tx3);padding:4px 5px;}
.lb.st:hover{border-color:var(--gold);color:var(--gold);}
.lb.cl{background:#100808;border-color:#502020;color:#a04040;padding:4px 5px;}
.lb.cl:hover{border-color:#e03040;color:#e03040;}
.tvol{display:flex;flex-direction:column;align-items:center;gap:2px;}
.vsl{-webkit-appearance:none;width:44px;height:3px;background:var(--brd2);border-radius:2px;cursor:pointer;accent-color:var(--teal);}
.vsl::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;background:var(--teal);border-radius:50%;box-shadow:0 0 4px var(--teal);}
.vll{font-size:.3rem;color:var(--tx3);}
.tdel{font-size:.4rem;padding:4px 5px;background:#100808;border:1px solid #502020;color:#a04040;border-radius:4px;cursor:pointer;transition:all .12s;}
.tdel:hover{border-color:#e03040;color:#e03040;}
.add-trk{display:flex;justify-content:center;margin:5px 0;}
.atbtn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;padding:5px 14px;background:var(--panel);border:1.5px dashed var(--brd);color:gold;border-radius:6px;cursor:pointer;transition:all .18s;}
.atbtn:hover{border-color:var(--teal);color:var(--teal);}
.lbot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--brd2);}
.lb.sa{background:#100a04;border-color:#604020;color:#a06030;}
.lb.sa:hover{border-color:var(--orange);color:var(--orange);}
.lb.ca{background:#100808;border-color:#502020;color:#a04040;}
.lb.ca:hover{border-color:#e03040;color:#e03040;}
.linfo{font-size:.5rem;color:white;font-style:italic;}
.ltmr{font-family:'Orbitron',sans-serif;font-size:.56rem;color:var(--orange);margin-left:auto;letter-spacing:.1em;}
/* BANK */
.bank-section{margin-top:12px;border-top:1px solid var(--brd2);padding-top:12px;}
.bank-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.bank-title{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.22em;color:var(--violet);text-shadow:0 0 10px rgba(144,96,255,.3);}
.bank-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.bank-slot{background:var(--panel2);border:1px solid var(--brd2);border-radius:8px;padding:8px 8px 6px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;transition:border-color .15s;}
.bank-slot.filled{border-color:#5040a040;}
.bank-slot.filled:hover{border-color:var(--violet);}
.bank-slot.empty-slot{opacity:.4;border-style:dashed;}
.bank-slot-num{font-family:'Orbitron',sans-serif;font-size:.3rem;color:var(--tx3);letter-spacing:.1em;position:absolute;top:5px;right:7px;}
.bank-slot-name{font-size:.5rem;width:100%;background:transparent;border:none;border-bottom:1px solid var(--brd2);color:var(--tx);font-family:'Share Tech Mono',monospace;outline:none;padding:1px 2px;cursor:text;}
.bank-slot-name:focus{border-bottom-color:var(--violet);}
.bank-slot-dur{font-size:.5rem;color:var(--tx3);font-family:'Orbitron',sans-serif;margin-top:1px;}
.bank-slot-btns{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px;}
.bank-btn{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.04em;padding:2px 5px;border-radius:3px;cursor:pointer;border:1px solid;transition:all .12s;white-space:nowrap;}
.bank-btn.heart{border-color:#a04060;color:#a04060;background:#100810;}
.bank-btn.heart.on{border-color:#ff4080;color:#ff4080;box-shadow:0 0 6px #ff408040;}
.bank-btn.del{border-color:#502020;color:#a04040;background:#100808;}
.bank-btn.del:hover{border-color:#e03040;color:#e03040;}
.bank-btn.exp{border-color:#205040;color:#40a080;background:#081810;}
.bank-btn.exp:hover{border-color:var(--teal);color:var(--teal);}
.bank-btn.flamingo{border-color:#804060;color:#c06090;background:#140810;}
.bank-btn.flamingo:hover{border-color:#e080c0;color:#e080c0;}
.bank-empty-hint{font-size:.34rem;color:var(--tx3);font-style:italic;text-align:center;padding:6px;}
.bank-open-flamingo{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;padding:5px 14px;background:linear-gradient(135deg,#140810,#1a0c1a);border:1.5px solid #804060;color:#c06090;border-radius:6px;cursor:pointer;transition:all .2s;margin-left:auto;}
.bank-open-flamingo:hover{border-color:#e080c0;color:#e080c0;box-shadow:0 0 12px rgba(224,128,192,.25);}

/* ── FLAMINGO MODAL ── */
#flamingoModal{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(10,4,18,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
}
#flamingoModal.open{display:flex;}
#flamingoModalInner{
  position:relative;width:calc(100vw - 32px);height:calc(100vh - 32px);
  border-radius:14px;overflow:hidden;
  box-shadow:0 0 60px rgba(255,20,147,.25),0 0 0 1.5px rgba(255,105,180,.3);
  display:flex;flex-direction:column;
}
#flamingoFrame{
  width:100%;flex:1;border:none;background:#fff0f8;
  border-radius:14px;
  transition:height .35s cubic-bezier(.4,0,.2,1);
}
/* Flamingo tab (reduced state inside OWL) */
#flamingoTab{
  display:none;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9100;
  font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.14em;font-weight:700;
  padding:6px 22px 7px;border-radius:0 0 14px 14px;cursor:pointer;
  background:linear-gradient(135deg,#ff1493,#f472b6);color:#fff;
  box-shadow:0 4px 20px rgba(255,20,147,.45);
  transition:all .2s;
}
#flamingoTab:hover{box-shadow:0 6px 28px rgba(255,20,147,.65);padding-bottom:10px;}
#flamingoTab.visible{display:block;}
.bank-btn.play{border-color:#205040;color:#40a080;background:#081810;min-width:22px;text-align:center;}
.bank-btn.play:hover,.bank-btn.play.playing{border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px var(--teal)40;}
.bank-slot.bank-playing{border-color:var(--teal)!important;box-shadow:0 0 10px rgba(0,212,160,.15);}
/* SAVE button on tracks */
.lb.sv{background:#08100e;border-color:#204030;color:#40a060;}
.lb.sv:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px var(--teal)30;}
/* Track color borders */
.tc0{border-left-color:#e0204060!important}.tc1{border-left-color:#0060e060!important}
.tc2{border-left-color:#8020c060!important}.tc3{border-left-color:#c8a02060!important}
.tc4{border-left-color:#e0682060!important}.tc5{border-left-color:#20a06060!important}

.logo {
  max-width: 150px;
  height: auto; /* garde les proportions */
}