/* ================================================================
   THE ALCHEMIST — style.css
   Analog Lab Swiss © 2026
   ================================================================ */

html,body{margin:0!important;padding:0!important;background:transparent!important;overflow:hidden!important;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;}
#sk-root{
  position:fixed!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;z-index:2147483647!important;
  overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;
  background-color:#06040f!important;
  background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(76,201,240,0.06) 0%,transparent 70%),
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,0.012) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,0.012) 40px);
  font-family:'Nunito',sans-serif!important;color:#fff!important;font-size:16px!important;
  line-height:1.4!important;-webkit-text-size-adjust:100%;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:10px 8px 0!important;box-sizing:border-box!important;
}
#sk-root *,#sk-root *::before,#sk-root *::after{
  box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0;padding:0;
}
.synth{width:100%;max-width:920px;display:flex;flex-direction:column;gap:8px;}
.header{display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
.header-title{display:flex;flex-direction:column;align-items:center;gap:1px;}
.header-subtitle{font-family:'Orbitron',monospace;font-size:0.42rem;font-weight:600;letter-spacing:6px;color:rgba(255,255,255,0.38);margin-top:1px;}
.header h1{
  font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(1.1rem,3.5vw,1.7rem);
  background:var(--sk-title-grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:3px;filter:drop-shadow(0 0 12px var(--sk-title-shadow));
}
.orb-section{display:flex;flex-direction:column;align-items:center;}
.orb-nav{display:flex;align-items:center;gap:8px;}
.orb-arrow{
  background:none;border:none;cursor:pointer;
  font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;
  color:rgba(255,255,255,0.30);line-height:1;padding:4px 6px;
  transition:color 0.18s;touch-action:manipulation;
}
.orb-arrow:hover{color:rgba(255,255,255,0.75);}
.orb-container{position:relative;width:clamp(110px,32vw,170px);height:clamp(110px,32vw,170px);}
#orb{width:100%;height:100%;display:block;border-radius:50%;position:absolute;top:0;left:0;}
#scope{width:100%;height:100%;display:none;border-radius:50%;position:absolute;top:0;left:0;}

.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:stretch;}
@media(max-width:580px){.controls{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px) and (orientation:landscape){.controls{grid-template-columns:repeat(4,1fr);}}
@media(max-height:500px){.orb-section{display:none;}}
/* Orbs hidden by JS class — see buildKeyboard() */
html.orbs-hidden .orb-section{display:none;}
html.orbs-hidden .header-subtitle{display:none;}
html.small-screen .header-subtitle{display:none;}
.controls > *:not(.module){display:none!important;}

.module{
  background:rgba(255,255,255,0.055);border-radius:14px;
  border:1.5px solid rgba(255,255,255,0.11);padding:6px 7px 5px;
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;
  height:180px;min-height:180px;max-height:180px;
}
.module::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:14px 14px 0 0;}
.module.vco::before{background:var(--sk-vco-bar);}
.module.env::before{background:var(--sk-env-bar);}
.module.lfo::before{background:var(--sk-lfo-bar);}
.module.echo::before{background:var(--sk-echo-bar);}

.module-title{
  font-family:'Orbitron',monospace;font-size:0.82rem;font-weight:700;
  letter-spacing:3px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;
}
.module-title i{font-size:1rem;}
.module.vco .module-title{color:var(--sk-a);}
.module.env .module-title{color:var(--sk-b);}
.module.lfo .module-title{color:var(--sk-d);}
.module.echo .module-title{color:var(--sk-c);}
/* RED LAVA overrides — all block titles + icons → #FF6400 */
body.skin-lava .module.vco  .module-title,
body.skin-lava .module.env  .module-title,
body.skin-lava .module.lfo  .module-title,
body.skin-lava .module.echo .module-title { color: rgba(255,100,0,0.90); }
body.skin-lava .vcf-title-label,
body.skin-lava .echo-title-label,
body.skin-lava .rev-title-label            { color: rgba(255,100,0,0.90) !important; }
.vcf-title-label{color:#4cc9f0;}
.echo-title-label{color:#2dc653;}
.rev-title-label{color:#ff9a00;}
body:not(.skin-rainbow) .vcf-title-label{color:var(--sk-d);}
body:not(.skin-rainbow) .echo-title-label{color:var(--sk-c);}
body:not(.skin-rainbow) .rev-title-label{color:var(--sk-c);}

.module-row{display:flex;gap:5px;flex:1;align-items:stretch;min-height:0;overflow:hidden;}
.col-btns{display:flex;flex-direction:column;gap:2px;flex-shrink:0;align-items:stretch;}
.col-btns-wave{width:44px;}
.col-btns-dest{width:44px;}
@media(max-width:580px){.col-btns-wave,.col-btns-dest{width:38px!important;}}
.col-gauges{display:flex;flex-direction:row;gap:5px;flex:1;align-items:flex-end;justify-content:center;}


.push-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:2px 2px;cursor:pointer;touch-action:manipulation;
  border-radius:7px;transition:all 0.14s;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:0.55rem;
  letter-spacing:0.5px;text-align:center;position:relative;overflow:hidden;
  background:rgba(120,185,255,0.11);border:1.5px solid rgba(150,205,255,0.36);
  color:rgba(185,220,255,0.80);
  box-shadow:inset 0 0 10px rgba(140,200,255,0.06),inset 1px 0 0 rgba(255,255,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.20),inset 0 -1px 0 rgba(0,0,0,0.15);
}
.push-btn::after{
  content:'';position:absolute;top:0;left:10%;right:10%;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0) 100%);
  border-radius:0 0 50% 50%;pointer-events:none;
}
.push-btn i{font-size:0.68rem;}
.push-btn svg{display:block;margin:0 auto;}
.push-btn.wave-btn.active{background:rgba(255,77,109,0.22);border-color:#ff4d6d;color:#ff4d6d;box-shadow:0 0 12px rgba(255,77,109,0.5),inset 0 0 8px rgba(255,77,109,0.12);}
/* SUB oscillator button states */
.push-btn.sub-btn.sub-off{color:rgba(185,220,255,0.50);}
.push-btn.sub-btn.sub-1{background:rgba(255,214,10,0.20);border-color:#ffd60a;color:#ffd60a;box-shadow:0 0 10px rgba(255,214,10,0.45);}
.push-btn.sub-btn.sub-2{background:rgba(255,154,0,0.22);border-color:#ff9a00;color:#ff9a00;box-shadow:0 0 12px rgba(255,154,0,0.55);}
.push-btn.sub-btn.sub-3{background:rgba(255,77,109,0.24);border-color:#ff4d6d;color:#ff4d6d;box-shadow:0 0 14px rgba(255,77,109,0.60);}
body.skin-lava .push-btn.sub-btn.sub-3{background:rgba(255,51,0,0.24);border-color:#ff3300;color:#ff3300;box-shadow:0 0 14px rgba(255,51,0,0.65);}
/* OCT +/- buttons between wheels and keyboard */
.oct-btns{display:flex;flex-direction:column;gap:5px;flex-shrink:0;align-items:center;justify-content:center;padding-bottom:14px;height:123.41px;}
@media(max-width:580px) and (orientation:portrait){.wheels{display:none!important;}.mod-ctrl-btn{display:none!important;}.oct-btns{padding-bottom:10px;}}
.oct-nav-btn{
  width:34px;height:38px;cursor:pointer;touch-action:manipulation;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:7px;transition:all 0.14s;
  font-family:'Orbitron',monospace;font-weight:800;font-size:0.54rem;letter-spacing:0.5px;
  background:rgba(120,185,255,0.11);border:1.5px solid rgba(150,205,255,0.36);
  color:rgba(185,220,255,0.55);
  box-shadow:inset 0 0 10px rgba(140,200,255,0.06),inset 1px 0 0 rgba(255,255,255,0.14),inset 0 1px 0 rgba(255,255,255,0.18);
}
.oct-nav-btn.oct-orange{background:rgba(255,154,0,0.22);border-color:#ff9a00;color:#ff9a00;box-shadow:0 0 10px rgba(255,154,0,0.5);}
.oct-nav-btn.oct-red{background:rgba(255,77,109,0.22);border-color:#ff4d6d;color:#ff4d6d;box-shadow:0 0 12px rgba(255,77,109,0.55);}
body.skin-lava .oct-nav-btn.oct-red{background:rgba(255,51,0,0.22);border-color:#ff3300;color:#ff3300;box-shadow:0 0 12px rgba(255,51,0,0.60);}
.push-btn.lfo-wave-btn.active{background:rgba(76,201,240,0.22);border-color:#4cc9f0;color:#4cc9f0;box-shadow:0 0 12px rgba(76,201,240,0.5),inset 0 0 8px rgba(76,201,240,0.12);}
.push-btn.dest-btn{font-family:'Orbitron',monospace;font-size:0.48rem;letter-spacing:0.5px;flex:1;}
.push-btn.dest-btn i{font-size:0.60rem;}
.push-btn.dest-btn.active{background:rgba(76,201,240,0.22);border-color:#4cc9f0;color:#4cc9f0;box-shadow:0 0 10px rgba(76,201,240,0.5);}
.push-btn.dest-btn.active[data-dest="amp"]{background:rgba(199,125,255,0.22);border-color:#c77dff;color:#c77dff;box-shadow:0 0 10px rgba(199,125,255,0.5);}
.push-btn.dest-btn.active[data-dest="filt"]{background:rgba(45,198,83,0.22);border-color:#2dc653;color:#2dc653;box-shadow:0 0 10px rgba(45,198,83,0.5);}
/* RED LAVA — VCO wave-btn + LFO buttons: rouge chaud #ff3300 */
body.skin-lava .push-btn.wave-btn.active{
  background:rgba(255,51,0,0.22);border-color:#ff3300;color:#ff3300;
  box-shadow:0 0 12px rgba(255,51,0,0.55),inset 0 0 8px rgba(255,51,0,0.14);
}
body.skin-lava .push-btn.lfo-wave-btn.active{
  background:rgba(255,51,0,0.22);border-color:#ff3300;color:#ff3300;
  box-shadow:0 0 12px rgba(255,51,0,0.55),inset 0 0 8px rgba(255,51,0,0.14);
}
body.skin-lava .push-btn.dest-btn.active{
  background:rgba(255,51,0,0.22);border-color:#ff3300;color:#ff3300;
  box-shadow:0 0 10px rgba(255,51,0,0.55);
}

.gauge-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;max-width:34px;min-width:18px;}
.gauge-outer{
  width:100%;max-width:22px;height:130px;flex:none;
  background:rgba(120,185,255,0.11);border:1.5px solid rgba(150,205,255,0.36);border-radius:6px;
  box-shadow:inset 0 0 10px rgba(140,200,255,0.08),inset 1px 0 0 rgba(255,255,255,0.13),inset 0 1px 0 rgba(255,255,255,0.18);
  overflow:hidden;cursor:ns-resize;touch-action:none;position:relative;
}
.gauge-outer::before{
  content:'';z-index:3;pointer-events:none;position:absolute;top:5px;bottom:5px;left:3px;width:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0.05) 100%);border-radius:2px;
}
.gauge-fill{position:absolute;bottom:0;left:0;right:0;min-height:0;border-radius:0 0 3px 3px;z-index:1;}
.gauge-inner-label{
  position:absolute;bottom:5px;left:0;right:0;height:calc(100% - 10px);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Orbitron',monospace;font-size:0.62rem;letter-spacing:1px;font-weight:700;
  color:rgba(255,255,255,0.88);text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(0,0,0,0.7);
  pointer-events:none;white-space:nowrap;display:flex;align-items:flex-end;justify-content:center;z-index:4;
}
.gauge-label{font-family:'Orbitron',monospace;font-size:0.70rem;font-weight:700;color:rgba(255,255,255,0.55);text-align:center;white-space:nowrap;flex-shrink:0;}
.gauge-divider{width:1px;background:rgba(255,255,255,0.13);align-self:stretch;margin:0 1px;flex-shrink:0;}

.module.vco .gauge-label{color:var(--sk-label-vco);}
.module.lfo .gauge-label{color:var(--sk-label-lfo);}
.label-a{color:rgba(255,214,10,0.85)!important;}
.label-d{color:rgba(255,154,0,0.85)!important;}
.label-s{color:rgba(45,198,83,0.85)!important;}
.label-cut{color:rgba(76,201,240,0.85)!important;}
.label-mod,.label-dly{color:rgba(199,125,255,0.85)!important;}
.label-echo{color:rgba(45,198,83,0.85)!important;}
.label-reverb{color:rgba(255,154,0,0.85)!important;}
.label-noise{color:rgba(255,154,0,0.85)!important;}

/* Keyboard area with wheels */
.kbd-area{display:flex;align-items:flex-end;gap:6px;width:100%;margin-top:-4px;}
.wheels{display:flex;gap:6px;flex-shrink:0;align-items:flex-end;padding-bottom:14px;}
@media(max-width:580px) and (orientation:landscape){.wheels{display:flex;}.oct-btns{display:flex;}}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.wheel{
  width:28px;height:110px;
  background:rgba(0,0,0,0.55);border-radius:10px;
  border:1.5px solid rgba(255,255,255,0.18);
  position:relative;cursor:ns-resize;touch-action:none;overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.6),inset 0 0 20px rgba(0,0,0,0.4);
}
@media(max-width:580px){
  .wheel{width:22px;height:80px;}
  .wheels{padding-bottom:10px;}
  .oct-btns{padding-bottom:10px;gap:3px;}
  .oct-nav-btn{width:28px;height:32px;font-size:0.46rem;}
  .mod-ctrl-btn{width:28px;height:30px;font-size:0.40rem;}
  .wheel-label{font-size:0.36rem;}
}
.wheel::after{
  content:'';position:absolute;top:0;left:20%;right:20%;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,0.10) 0%,transparent 100%);
  border-radius:0 0 50% 50%;pointer-events:none;
}
.wheel-notch{
  position:absolute;left:3px;right:3px;height:20px;border-radius:5px;
  pointer-events:none;z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.pitch-wheel .wheel-notch{background:linear-gradient(180deg,#ff9a00,#ff4d6d);}
.mod-wheel .wheel-notch{background:linear-gradient(180deg,#4cc9f0,#c77dff);}
body.skin-lava .mod-wheel .wheel-notch{background:linear-gradient(180deg,#ff6400,#ff2200);}

.wheel-center-line{
  position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(255,255,255,0.15);pointer-events:none;z-index:1;
  transform:translateY(-50%);
}
.wheel-label{font-family:'Orbitron',monospace;font-size:0.42rem;color:rgba(255,255,255,0.45);letter-spacing:1px;text-align:center;}

.keyboard-outer{flex:1;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:14px;scrollbar-width:none;touch-action:pan-x;}
.keyboard-outer::-webkit-scrollbar{display:none;}
.keyboard{position:relative;display:block;}

.key-white{
  position:absolute;
  background:linear-gradient(180deg,#d5d8ee 0%,#ffffff 28%,#eeeeff 100%);
  border-left:1px solid #bbb;border-right:1px solid #bbb;border-bottom:1px solid #aaa;
  border-radius:0 0 8px 8px;cursor:pointer;touch-action:none;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  box-shadow:0 5px 8px rgba(0,0,0,0.32),inset 0 1px 0 rgba(255,255,255,0.9);z-index:1;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;
  transition:background 0.05s;
}
.key-white span{font-family:'Orbitron',monospace;font-size:0.72rem;font-weight:700;color:#aaa;pointer-events:none;}
.key-white.active{background:var(--sk-key-white);box-shadow:0 2px 14px var(--sk-glow),inset 0 1px 0 rgba(255,255,255,0.9);}
/* Note colors — uniquement en mode RAINBOW */
body.skin-rainbow .key-white[data-nc="0"]{border-bottom:5px solid #ff4d6d;}
body.skin-rainbow .key-white[data-nc="1"]{border-bottom:5px solid #ff9a00;}
body.skin-rainbow .key-white[data-nc="2"]{border-bottom:5px solid #ffd60a;}
body.skin-rainbow .key-white[data-nc="3"]{border-bottom:5px solid #2dc653;}
body.skin-rainbow .key-white[data-nc="4"]{border-bottom:5px solid #4cc9f0;}
body.skin-rainbow .key-white[data-nc="5"]{border-bottom:5px solid #c77dff;}
body.skin-rainbow .key-white[data-nc="6"]{border-bottom:5px solid #ff69d6;}
/* Autres skins : bord bas neutre */
body:not(.skin-rainbow) .key-white{border-bottom:5px solid rgba(255,255,255,0.08);}

.key-black{
  position:absolute;
  background:linear-gradient(180deg,#2a2a3e 0%,#0b0b18 100%);
  border-radius:0 0 5px 5px;border:1px solid #000;border-top:none;
  cursor:pointer;touch-action:none;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  box-shadow:2px 5px 10px rgba(0,0,0,0.7);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;
  transition:background 0.05s;
}
.key-black span{font-family:'Orbitron',monospace;font-size:0.54rem;font-weight:700;color:rgba(255,255,255,0.52);pointer-events:none;writing-mode:horizontal-tb;}
.key-black.active{background:var(--sk-key-black);box-shadow:0 4px 16px var(--sk-glow);}

/* Preset name bar */
.preset-bar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:3px 8px;
}
.preset-nav-btn{
  background:none;border:none;cursor:pointer;touch-action:manipulation;
  font-family:'Orbitron',monospace;font-size:1.60rem;font-weight:700;
  color:rgba(76,201,240,0.55);line-height:1;padding:0px 10px;
  transition:color 0.15s;letter-spacing:0;
}
.preset-nav-btn:hover{color:var(--sk-d);}
body.skin-lava .preset-nav-btn{color:rgba(255,100,0,0.90);}

/* ═══════════════════════════════════════════════════════════════
   ELECTRIC BLUE — harmonisation boutons, molette MOD, titres
   Couleur unifiée : #00aaff
   ═══════════════════════════════════════════════════════════════ */

/* Titres de blocs VCO, ENV, LFO, ECHO */
body.skin-blue .module.vco  .module-title,
body.skin-blue .module.env  .module-title,
body.skin-blue .module.lfo  .module-title,
body.skin-blue .module.echo .module-title { color: #00aaff; }
body.skin-blue .vcf-title-label,
body.skin-blue .echo-title-label,
body.skin-blue .rev-title-label  { color: #00aaff !important; }

/* Tous les boutons actifs (wave VCO, LFO, dest) */
body.skin-blue .push-btn.wave-btn.active{
  background:rgba(0,170,255,0.22);border-color:#00aaff;color:#00aaff;
  box-shadow:0 0 12px rgba(0,170,255,0.5),inset 0 0 8px rgba(0,170,255,0.12);
}
body.skin-blue .push-btn.lfo-wave-btn.active{
  background:rgba(0,170,255,0.22);border-color:#00aaff;color:#00aaff;
  box-shadow:0 0 12px rgba(0,170,255,0.5),inset 0 0 8px rgba(0,170,255,0.12);
}
body.skin-blue .push-btn.dest-btn.active{
  background:rgba(0,170,255,0.22);border-color:#00aaff;color:#00aaff;
  box-shadow:0 0 10px rgba(0,170,255,0.5);
}
/* SUB niveaux */
body.skin-blue .push-btn.sub-btn.sub-1{background:rgba(0,170,255,0.16);border-color:#00aaff;color:#00aaff;box-shadow:0 0 10px rgba(0,170,255,0.40);}
body.skin-blue .push-btn.sub-btn.sub-2{background:rgba(0,170,255,0.20);border-color:#00aaff;color:#00aaff;box-shadow:0 0 12px rgba(0,170,255,0.50);}
body.skin-blue .push-btn.sub-btn.sub-3{background:rgba(0,170,255,0.24);border-color:#00aaff;color:#00aaff;box-shadow:0 0 14px rgba(0,170,255,0.60);}

/* DEP CTRL niveaux */
body.skin-blue .mod-ctrl-btn.mc-1{background:rgba(0,170,255,0.16);border-color:#00aaff;color:#00aaff;box-shadow:0 0 10px rgba(0,170,255,0.40);}
body.skin-blue .mod-ctrl-btn.mc-2{background:rgba(0,170,255,0.20);border-color:#00aaff;color:#00aaff;box-shadow:0 0 12px rgba(0,170,255,0.50);}
body.skin-blue .mod-ctrl-btn.mc-3{background:rgba(0,170,255,0.24);border-color:#00aaff;color:#00aaff;box-shadow:0 0 14px rgba(0,170,255,0.60);}

/* OCT+/- états */
body.skin-blue .oct-nav-btn.oct-orange{background:rgba(0,170,255,0.18);border-color:#00aaff;color:#00aaff;box-shadow:0 0 10px rgba(0,170,255,0.45);}
body.skin-blue .oct-nav-btn.oct-red{background:rgba(0,170,255,0.22);border-color:#00aaff;color:#00aaff;box-shadow:0 0 12px rgba(0,170,255,0.55);}

/* Molette MOD */
body.skin-blue .mod-wheel .wheel-notch{background:linear-gradient(180deg,#00aaff,#00aaff);}

/* ═══════════════════════════════════════════════════════════════
   GREEN GOBLIN — harmonisation boutons, molette MOD, titres
   Couleur unifiée : #80ff00  (= --sk-c, couleur FILT)
   ═══════════════════════════════════════════════════════════════ */

/* Titres de blocs */
body.skin-green .module.vco  .module-title,
body.skin-green .module.env  .module-title,
body.skin-green .module.lfo  .module-title,
body.skin-green .module.echo .module-title { color: #80ff00; }
body.skin-green .vcf-title-label,
body.skin-green .echo-title-label,
body.skin-green .rev-title-label { color: #80ff00 !important; }

/* Flèches preset < > */
body.skin-green .preset-nav-btn { color: rgba(128,255,0,0.90); }

/* Boutons VCO wave actifs */
body.skin-green .push-btn.wave-btn.active{
  background:rgba(128,255,0,0.20);border-color:#80ff00;color:#80ff00;
  box-shadow:0 0 12px rgba(128,255,0,0.50),inset 0 0 8px rgba(128,255,0,0.12);
}
/* Boutons LFO wave + dest actifs */
body.skin-green .push-btn.lfo-wave-btn.active{
  background:rgba(128,255,0,0.20);border-color:#80ff00;color:#80ff00;
  box-shadow:0 0 12px rgba(128,255,0,0.50),inset 0 0 8px rgba(128,255,0,0.12);
}
body.skin-green .push-btn.dest-btn.active{
  background:rgba(128,255,0,0.20);border-color:#80ff00;color:#80ff00;
  box-shadow:0 0 10px rgba(128,255,0,0.50);
}

/* SUB niveaux */
body.skin-green .push-btn.sub-btn.sub-1{background:rgba(128,255,0,0.14);border-color:#80ff00;color:#80ff00;box-shadow:0 0 10px rgba(128,255,0,0.38);}
body.skin-green .push-btn.sub-btn.sub-2{background:rgba(128,255,0,0.18);border-color:#80ff00;color:#80ff00;box-shadow:0 0 12px rgba(128,255,0,0.48);}
body.skin-green .push-btn.sub-btn.sub-3{background:rgba(128,255,0,0.22);border-color:#80ff00;color:#80ff00;box-shadow:0 0 14px rgba(128,255,0,0.58);}

/* DEP CTRL niveaux */
body.skin-green .mod-ctrl-btn.mc-1{background:rgba(128,255,0,0.14);border-color:#80ff00;color:#80ff00;box-shadow:0 0 10px rgba(128,255,0,0.38);}
body.skin-green .mod-ctrl-btn.mc-2{background:rgba(128,255,0,0.18);border-color:#80ff00;color:#80ff00;box-shadow:0 0 12px rgba(128,255,0,0.48);}
body.skin-green .mod-ctrl-btn.mc-3{background:rgba(128,255,0,0.22);border-color:#80ff00;color:#80ff00;box-shadow:0 0 14px rgba(128,255,0,0.58);}

/* OCT+/- états */
body.skin-green .oct-nav-btn.oct-orange{background:rgba(128,255,0,0.16);border-color:#80ff00;color:#80ff00;box-shadow:0 0 10px rgba(128,255,0,0.42);}
body.skin-green .oct-nav-btn.oct-red{background:rgba(128,255,0,0.20);border-color:#80ff00;color:#80ff00;box-shadow:0 0 12px rgba(128,255,0,0.52);}

/* Molette MOD */
body.skin-green .mod-wheel .wheel-notch{background:linear-gradient(180deg,#80ff00,#80ff00);}



.preset-bar-name{
  font-family:'Orbitron',monospace;font-size:0.90rem;font-weight:700;
  color:var(--sk-preset-color);letter-spacing:2px;
  min-width:190px;text-align:center;
  text-shadow:0 0 14px var(--sk-preset-shadow);
}
/* Orb clickable cursor */
.orb-container{cursor:pointer;}
/* 3rd orb: spectrum */
#spectrum{width:100%;height:100%;display:none;border-radius:50%;position:absolute;top:0;left:0;}
/* MOD CTRL button */
.mod-ctrl-btn{
  width:34px;height:30px;cursor:pointer;touch-action:manipulation;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0px;
  border-radius:7px;transition:all 0.14s;
  font-family:'Orbitron',monospace;font-weight:800;font-size:0.44rem;letter-spacing:0.5px;
  line-height:1.3;text-align:center;
  background:rgba(120,185,255,0.11);border:1.5px solid rgba(150,205,255,0.36);
  color:rgba(185,220,255,0.40);
  box-shadow:inset 0 0 10px rgba(140,200,255,0.06),inset 1px 0 0 rgba(255,255,255,0.14),inset 0 1px 0 rgba(255,255,255,0.18);
}
.mod-ctrl-btn.mc-1{background:rgba(255,214,10,0.20);border-color:#ffd60a;color:#ffd60a;box-shadow:0 0 10px rgba(255,214,10,0.45);}
.mod-ctrl-btn.mc-2{background:rgba(255,154,0,0.22);border-color:#ff9a00;color:#ff9a00;box-shadow:0 0 12px rgba(255,154,0,0.55);}
.mod-ctrl-btn.mc-3{background:rgba(255,77,109,0.24);border-color:#ff4d6d;color:#ff4d6d;box-shadow:0 0 14px rgba(255,77,109,0.60);}
body.skin-lava .mod-ctrl-btn.mc-3{background:rgba(255,51,0,0.24);border-color:#ff3300;color:#ff3300;box-shadow:0 0 14px rgba(255,51,0,0.65);}
/* LFO PWM dest active */
.push-btn.dest-btn.active[data-dest="pwm"]{background:rgba(255,214,10,0.22);border-color:#ffd60a;color:#ffd60a;box-shadow:0 0 10px rgba(255,214,10,0.5);}

/* ── Burger button ── */
.burger-btn{
  position:absolute;left:0;top:0;
  background:none;border:none;cursor:pointer;padding:4px 6px;
  color:rgba(255,255,255,0.45);font-size:1.2rem;line-height:1;
  transition:color 0.18s;touch-action:manipulation;
}
.burger-btn:hover{color:rgba(255,255,255,0.85);}
.header{position:relative;}

/* ── Menu drawer ── */
#menu-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);
  z-index:2147483646;backdrop-filter:blur(2px);
}
#menu-overlay.open{display:block;}
#menu-drawer{
  position:fixed;top:0;left:-340px;width:320px;height:100%;
  background:linear-gradient(180deg,#0d0820 0%,#080614 100%);
  border-right:1.5px solid rgba(76,201,240,0.18);
  z-index:2147483647;transition:left 0.28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:8px 0 32px rgba(0,0,0,0.6);
}
#menu-drawer.open{left:0;}
.menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;
}
.menu-header span{
  font-family:'Orbitron',monospace;font-size:0.75rem;font-weight:700;
  color:#4cc9f0;letter-spacing:3px;
}
.menu-close{
  background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);
  font-size:1.1rem;padding:2px 4px;transition:color 0.15s;touch-action:manipulation;
}
.menu-close:hover{color:#fff;}
.menu-body{flex:1;overflow-y:auto;padding:10px 12px 16px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:rgba(76,201,240,0.3) transparent;}

/* Menu sections */
.menu-section{}
.menu-section-title{
  font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:700;
  color:rgba(255,255,255,0.92);letter-spacing:2px;
  padding:0 2px 6px;border-bottom:1px solid rgba(255,255,255,0.18);margin-bottom:9px;
}

/* Preset list */
.preset-table{display:flex;flex-direction:column;gap:0;min-width:0;}
.preset-header{
  display:grid;grid-template-columns:32px minmax(0,0.75fr) 58px 28px;gap:4px;
  padding:4px 8px;border-bottom:1px solid rgba(76,201,240,0.18);
  background:#0d0820;z-index:2;
}
.preset-header-cell{
  font-family:'Orbitron',monospace;font-size:0.52rem;font-weight:700;
  color:rgba(76,201,240,0.75);letter-spacing:1px;cursor:pointer;
  display:flex;align-items:center;gap:3px;padding:2px 0;
  transition:color 0.15s;user-select:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.preset-header-cell:hover{color:rgba(76,201,240,0.90);}
.preset-list{
  display:flex;flex-direction:column;gap:0;
  /* ~9.5 items × ~24px = 232px — 1/3 de moins */
  height:232px;
  overflow-y:auto;overflow-x:hidden;
  /* scrollbar fine mais visible pour feedback scroll */
  scrollbar-width:thin;
  scrollbar-color:rgba(76,201,240,0.25) transparent;
  -webkit-overflow-scrolling:touch;
}
.preset-list::-webkit-scrollbar{width:3px;}
.preset-list::-webkit-scrollbar-track{background:transparent;}
.preset-list::-webkit-scrollbar-thumb{background:rgba(76,201,240,0.25);border-radius:2px;}
.preset-item{
  display:grid;grid-template-columns:32px minmax(0,0.75fr) 58px 28px;align-items:center;gap:4px;
  padding:5px 8px;cursor:pointer;min-width:0;
  background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.04);
  transition:all 0.12s;flex-shrink:0;
}
.preset-item:hover{background:rgba(76,201,240,0.10);}
.preset-item.active{background:rgba(76,201,240,0.16);border-bottom-color:rgba(76,201,240,0.20);box-shadow:inset 2px 0 0 #4cc9f0;}
.preset-num{font-family:'Orbitron',monospace;font-size:0.58rem;color:rgba(255,255,255,0.55);letter-spacing:1px;}
.preset-name{font-family:'Orbitron',monospace;font-size:0.62rem;font-weight:700;color:rgba(255,255,255,0.82);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preset-type{font-family:'Orbitron',monospace;font-size:0.52rem;color:rgba(255,214,10,0.85);letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.preset-author{font-family:'Orbitron',monospace;font-size:0.52rem;color:rgba(199,125,255,0.82);text-align:left;letter-spacing:1px;}
.preset-item.user-preset .preset-author{color:rgba(45,198,83,0.90);}

/* Action buttons in menu */
.menu-actions{display:flex;gap:6px;flex-wrap:wrap;}
.menu-btn{
  flex:1;min-width:80px;padding:8px 6px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.07);cursor:pointer;
  font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:700;letter-spacing:1px;
  color:rgba(255,255,255,0.82);transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px;
  touch-action:manipulation;
}
.menu-btn:hover{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.35);}
.menu-btn.primary{background:rgba(76,201,240,0.12);border-color:rgba(76,201,240,0.40);color:#4cc9f0;}
.menu-btn.primary:hover{background:rgba(76,201,240,0.22);box-shadow:0 0 12px rgba(76,201,240,0.25);}
.menu-btn.accent{background:rgba(199,125,255,0.12);border-color:rgba(199,125,255,0.35);color:#c77dff;}
.menu-btn.accent:hover{background:rgba(199,125,255,0.22);box-shadow:0 0 12px rgba(199,125,255,0.25);}
.menu-btn.danger{background:rgba(255,77,109,0.10);border-color:rgba(255,77,109,0.30);color:#ff4d6d;}
.menu-btn.danger:hover{background:rgba(255,77,109,0.20);}
.menu-btn.success{background:rgba(45,198,83,0.10);border-color:rgba(45,198,83,0.30);color:#2dc653;}
.menu-btn.success:hover{background:rgba(45,198,83,0.20);}
.menu-btn i{font-size:0.75rem;}

/* Menu sliders */
.menu-slider-row{display:flex;align-items:center;gap:10px;}
.menu-slider-label{font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.72);letter-spacing:1px;min-width:48px;}
.menu-slider{
  -webkit-appearance:none;appearance:none;
  flex:1;height:4px;border-radius:2px;outline:none;cursor:pointer;
  background:rgba(255,255,255,0.12);
}
.menu-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#4cc9f0,#c77dff);
  border:2px solid rgba(255,255,255,0.3);
  box-shadow:0 0 8px rgba(76,201,240,0.4);cursor:pointer;
}
.menu-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#4cc9f0,#c77dff);
  border:2px solid rgba(255,255,255,0.3);cursor:pointer;
}
.menu-slider-val{font-family:'Orbitron',monospace;font-size:0.64rem;color:rgba(255,255,255,0.65);min-width:32px;text-align:right;}

/* Menu selects (MIDI) */
.menu-select-row{display:flex;align-items:center;gap:8px;}
.menu-select-label{font-family:'Orbitron',monospace;font-size:0.66rem;color:rgba(255,255,255,0.68);letter-spacing:1px;min-width:48px;}
.menu-select{
  flex:1;background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.18);
  border-radius:6px;color:rgba(255,255,255,0.85);padding:7px 9px;
  font-family:'Orbitron',monospace;font-size:0.64rem;outline:none;cursor:pointer;
}
.menu-select option{background:#0d0820;color:#fff;}

/* Save As Modal — Retro Gaming Style */
/* ── Save Modal — panneau de synthé ── */
#save-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.80);
  z-index:2147483647;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
#save-modal.open{display:flex;}
.save-modal-box{
  width:340px;
  background:linear-gradient(180deg,#141028 0%,#0c0a1e 100%);
  border:1.5px solid rgba(76,201,240,0.35);
  border-radius:10px;
  box-shadow:
    0 0 0 1px rgba(76,201,240,0.10),
    0 0 40px rgba(76,201,240,0.18),
    0 24px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
}
/* Barre de titre style module */
.save-modal-titlebar{
  background:linear-gradient(90deg,rgba(76,201,240,0.15) 0%,rgba(199,125,255,0.15) 100%);
  border-bottom:1.5px solid rgba(76,201,240,0.25);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.save-modal-titlebar-text{
  font-family:'Orbitron',monospace;font-size:0.65rem;font-weight:900;
  color:#4cc9f0;letter-spacing:4px;
  text-shadow:0 0 12px rgba(76,201,240,0.6);
  display:flex;align-items:center;gap:8px;
}
.save-modal-titlebar-text::before{
  content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#4cc9f0;box-shadow:0 0 8px #4cc9f0;animation:smBlink 1.4s ease-in-out infinite;
}
@keyframes smBlink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.save-modal-titlebar-icon{
  font-family:'Orbitron',monospace;font-size:0.50rem;font-weight:700;
  color:rgba(76,201,240,0.45);letter-spacing:1px;
}
/* Corps */
.save-modal-inner{
  padding:24px 24px 20px;
  display:flex;flex-direction:column;gap:16px;
}
/* Ligne label + input côte à côte */
.save-modal-field{
  display:flex;align-items:center;gap:12px;
}
.save-modal-field label{
  font-family:'Orbitron',monospace;font-size:0.65rem;font-weight:700;
  color:rgba(255,255,255,0.60);letter-spacing:1.5px;
  min-width:78px;text-align:right;flex-shrink:0;
}
.save-modal-input{
  flex:1;
  background:rgba(0,0,0,0.55);
  border:1.5px solid rgba(76,201,240,0.28);
  border-radius:5px;
  color:#ffd60a;
  padding:10px 14px;
  font-family:'Orbitron',monospace;font-size:0.82rem;font-weight:700;letter-spacing:3px;
  outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
  caret-color:#ffd60a;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
}
.save-modal-input:focus{
  border-color:rgba(76,201,240,0.70);
  box-shadow:0 0 0 2px rgba(76,201,240,0.14),inset 0 2px 6px rgba(0,0,0,0.4);
}
.save-modal-input::placeholder{color:rgba(255,214,10,0.18);}
.save-modal-select{
  flex:1;
  background:rgba(0,0,0,0.55);
  border:1.5px solid rgba(45,198,83,0.28);
  border-radius:5px;
  color:#2dc653;
  padding:10px 30px 10px 14px;
  font-family:'Orbitron',monospace;font-size:0.72rem;font-weight:700;letter-spacing:1px;
  outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232dc653' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);
  transition:border-color 0.15s;
}
.save-modal-select:focus{border-color:rgba(45,198,83,0.60);}
.save-modal-select option{background:#0c0a1e;color:#2dc653;}
/* Séparateur LED */
.save-modal-divider{
  height:1px;margin:2px 0;
  background:linear-gradient(90deg,transparent 0%,rgba(76,201,240,0.20) 30%,rgba(199,125,255,0.20) 70%,transparent 100%);
}
/* Boutons d'action */
.save-modal-actions{display:flex;gap:10px;}
.sm-btn{
  flex:1;padding:13px 8px;
  border-radius:6px;border:1.5px solid;
  font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:800;letter-spacing:2px;
  cursor:pointer;transition:all 0.14s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  touch-action:manipulation;
}
.sm-btn-cancel{
  background:rgba(255,77,109,0.08);border-color:rgba(255,77,109,0.35);color:rgba(255,77,109,0.75);
}
.sm-btn-cancel:hover{background:rgba(255,77,109,0.16);border-color:#ff4d6d;color:#ff4d6d;}
.sm-btn-save{
  background:rgba(45,198,83,0.12);border-color:rgba(45,198,83,0.50);color:#2dc653;
  box-shadow:0 0 12px rgba(45,198,83,0.15);
}
.sm-btn-save:hover{background:rgba(45,198,83,0.24);border-color:#2dc653;box-shadow:0 0 20px rgba(45,198,83,0.30);}
/* Prévisualisation du preset actuel */
.save-modal-preview{
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:5px;
  padding:8px 12px;
  display:flex;gap:8px;flex-wrap:wrap;
}
.save-modal-preview-chip{
  font-family:'Orbitron',monospace;font-size:0.44rem;font-weight:700;letter-spacing:1px;
  color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:3px;padding:2px 6px;
}
.save-modal-preview-chip span{color:rgba(255,214,10,0.70);}
/* Supprime l'ancien style scanlines */

/* ════════════════════════════════════════════════════
   SKIN SYSTEM — CSS custom properties
   Body gets class: skin-rainbow (default) | skin-lava | skin-blue | skin-green
   ════════════════════════════════════════════════════ */

/* ── Default vars (also used by skin-rainbow) ── */
:root{
  --sk-a:    #ff4d6d;
  --sk-b:    #ffd60a;
  --sk-c:    #2dc653;
  --sk-d:    #4cc9f0;
  --sk-e:    #c77dff;
  --sk-glow: rgba(76,201,240,0.45);
  --sk-mod-border: rgba(255,255,255,0.08);
  --sk-title-grad: linear-gradient(90deg,#ff4d6d,#ffd60a,#2dc653,#4cc9f0,#c77dff);
  --sk-title-shadow: rgba(76,201,240,0.5);
  --sk-vco-bar:  linear-gradient(90deg,#ff4d6d,#ff9a00);
  --sk-env-bar:  linear-gradient(90deg,#ffd60a,#4cc9f0);
  --sk-lfo-bar:  linear-gradient(90deg,#4cc9f0,#c77dff);
  --sk-echo-bar: linear-gradient(90deg,#2dc653,#ff9a00);
  --sk-vcf-bar:  linear-gradient(90deg,#c77dff,#4cc9f0);
  --sk-gauge-vco: linear-gradient(0deg,#ffd60a 0%,#ff4d6d 100%);
  --sk-gauge-env: linear-gradient(0deg,#ffd60a 0%,#4cc9f0 100%);
  --sk-gauge-lfo: linear-gradient(0deg,#4cc9f0 0%,#c77dff 100%);
  --sk-gauge-echo:linear-gradient(0deg,#2dc653 0%,#ffd60a 100%);
  --sk-gauge-vcf: linear-gradient(0deg,#c77dff 0%,#4cc9f0 100%);
  --sk-gauge-glow:rgba(255,77,109,0.5);
  --sk-label-vco: rgba(255,77,109,0.85);
  --sk-label-lfo: rgba(76,201,240,0.85);
  --sk-label-env: rgba(255,214,10,0.85);
  --sk-label-echo:rgba(45,198,83,0.85);
  --sk-label-vcf: rgba(199,125,255,0.85);
  --sk-key-white: linear-gradient(180deg,#ffd60a 0%,#fffacc 100%);
  --sk-key-black: linear-gradient(180deg,#4cc9f0 0%,#185a8f 100%);
  --sk-preset-color: rgba(76,201,240,0.85);
  --sk-preset-shadow: rgba(76,201,240,0.45);
}

/* ── RED LAVA ── */
body.skin-lava{
  --sk-a:    #ff2200;
  --sk-b:    #ff6600;
  --sk-c:    #ff4400;
  --sk-d:    #ff2200;
  --sk-e:    #ff8800;
  --sk-glow: rgba(255,60,0,0.50);
  --sk-title-grad: linear-gradient(90deg,#ff0000,#ff6600,#ff2200);
  --sk-title-shadow: rgba(255,60,0,0.6);
  --sk-vco-bar:  linear-gradient(90deg,#ff2200,#ff6600);
  --sk-env-bar:  linear-gradient(90deg,#ff4400,#ff8800);
  --sk-lfo-bar:  linear-gradient(90deg,#ff6600,#ff2200);
  --sk-echo-bar: linear-gradient(90deg,#ff2200,#ff4400);
  --sk-vcf-bar:  linear-gradient(90deg,#ff8800,#ff2200);
  --sk-gauge-vco: linear-gradient(0deg,#ff2200 0%,#ff6600 100%);
  --sk-gauge-env: linear-gradient(0deg,#ff4400 0%,#ff8800 100%);
  --sk-gauge-lfo: linear-gradient(0deg,#ff6600 0%,#ff2200 100%);
  --sk-gauge-echo:linear-gradient(0deg,#ff2200 0%,#ff4400 100%);
  --sk-gauge-vcf: linear-gradient(0deg,#ff8800 0%,#ff4400 100%);
  --sk-gauge-glow:rgba(255,50,0,0.6);
  --sk-label-vco: rgba(255,60,0,0.90);
  --sk-label-lfo: rgba(255,100,0,0.90);
  --sk-label-env: rgba(255,80,0,0.90);
  --sk-label-echo:rgba(255,50,0,0.90);
  --sk-label-vcf: rgba(255,120,0,0.90);
  --sk-key-white: linear-gradient(180deg,#ff4400 0%,#ffccaa 100%);
  --sk-key-black: linear-gradient(180deg,#ff2200 0%,#660000 100%);
  --sk-preset-color: rgba(255,100,0,0.90);
  --sk-preset-shadow: rgba(255,60,0,0.5);
  --sk-mod-border: rgba(255,80,0,0.15);
}

/* ── ELECTRIC BLUE ── */
body.skin-blue{
  --sk-a:    #00aaff;
  --sk-b:    #0055ff;
  --sk-c:    #00ccff;
  --sk-d:    #0088ff;
  --sk-e:    #4400ff;
  --sk-glow: rgba(0,170,255,0.55);
  --sk-title-grad: linear-gradient(90deg,#0055ff,#00aaff,#00ccff,#4400ff);
  --sk-title-shadow: rgba(0,170,255,0.65);
  --sk-vco-bar:  linear-gradient(90deg,#0055ff,#00aaff);
  --sk-env-bar:  linear-gradient(90deg,#00aaff,#00ccff);
  --sk-lfo-bar:  linear-gradient(90deg,#0088ff,#4400ff);
  --sk-echo-bar: linear-gradient(90deg,#00ccff,#0055ff);
  --sk-vcf-bar:  linear-gradient(90deg,#4400ff,#00aaff);
  --sk-gauge-vco: linear-gradient(0deg,#0055ff 0%,#00aaff 100%);
  --sk-gauge-env: linear-gradient(0deg,#00aaff 0%,#00ccff 100%);
  --sk-gauge-lfo: linear-gradient(0deg,#0088ff 0%,#4400ff 100%);
  --sk-gauge-echo:linear-gradient(0deg,#00ccff 0%,#0055ff 100%);
  --sk-gauge-vcf: linear-gradient(0deg,#4400ff 0%,#00ccff 100%);
  --sk-gauge-glow:rgba(0,160,255,0.65);
  --sk-label-vco: rgba(0,170,255,0.92);
  --sk-label-lfo: rgba(0,200,255,0.92);
  --sk-label-env: rgba(0,140,255,0.92);
  --sk-label-echo:rgba(0,180,255,0.92);
  --sk-label-vcf: rgba(100,50,255,0.92);
  --sk-key-white: linear-gradient(180deg,#00aaff 0%,#aaddff 100%);
  --sk-key-black: linear-gradient(180deg,#0055ff 0%,#001a66 100%);
  --sk-preset-color: rgba(0,180,255,0.92);
  --sk-preset-shadow: rgba(0,160,255,0.55);
  --sk-mod-border: rgba(0,150,255,0.15);
}

/* ── GREEN GOBLIN ── */
body.skin-green{
  --sk-a:    #39ff14;
  --sk-b:    #00ff88;
  --sk-c:    #80ff00;
  --sk-d:    #39ff14;
  --sk-e:    #00ffaa;
  --sk-glow: rgba(57,255,20,0.55);
  --sk-title-grad: linear-gradient(90deg,#39ff14,#80ff00,#00ff88,#00ffaa);
  --sk-title-shadow: rgba(57,255,20,0.65);
  --sk-vco-bar:  linear-gradient(90deg,#39ff14,#80ff00);
  --sk-env-bar:  linear-gradient(90deg,#80ff00,#00ff88);
  --sk-lfo-bar:  linear-gradient(90deg,#00ff88,#39ff14);
  --sk-echo-bar: linear-gradient(90deg,#00ffaa,#80ff00);
  --sk-vcf-bar:  linear-gradient(90deg,#39ff14,#00ffaa);
  --sk-gauge-vco: linear-gradient(0deg,#39ff14 0%,#80ff00 100%);
  --sk-gauge-env: linear-gradient(0deg,#80ff00 0%,#00ff88 100%);
  --sk-gauge-lfo: linear-gradient(0deg,#00ff88 0%,#39ff14 100%);
  --sk-gauge-echo:linear-gradient(0deg,#00ffaa 0%,#80ff00 100%);
  --sk-gauge-vcf: linear-gradient(0deg,#39ff14 0%,#00ffaa 100%);
  --sk-gauge-glow:rgba(57,255,20,0.65);
  --sk-label-vco: rgba(57,255,20,0.92);
  --sk-label-lfo: rgba(128,255,0,0.92);
  --sk-label-env: rgba(0,255,136,0.92);
  --sk-label-echo:rgba(0,255,170,0.92);
  --sk-label-vcf: rgba(57,255,20,0.92);
  --sk-key-white: linear-gradient(180deg,#39ff14 0%,#ccffaa 100%);
  --sk-key-black: linear-gradient(180deg,#39ff14 0%,#0a3300 100%);
  --sk-preset-color: rgba(57,255,20,0.92);
  --sk-preset-shadow: rgba(57,255,20,0.55);
  --sk-mod-border: rgba(57,255,20,0.12);
}

/* ── Gauge fills — skin-driven (ONLY for non-rainbow skins) ── */
body.skin-lava  .gauge-fill,
body.skin-blue  .gauge-fill,
body.skin-green .gauge-fill {
  background:var(--sk-gauge-vco)!important;
  box-shadow:0 -3px 12px var(--sk-gauge-glow)!important;
}
/* Module border tint (all skins) */
.module{border-color:var(--sk-mod-border);}

/* ── Skin picker buttons ── */
.skin-btn{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.10);
  border-radius:6px;padding:7px 10px;
  font-family:'Orbitron',monospace;font-size:0.52rem;font-weight:700;letter-spacing:1.5px;
  color:rgba(255,255,255,0.55);cursor:pointer;transition:all 0.15s;
  text-align:left;
}
.skin-btn:hover{border-color:rgba(255,255,255,0.28);color:rgba(255,255,255,0.85);}
.skin-btn.active{border-color:var(--sk-d);color:var(--sk-d);background:rgba(255,255,255,0.07);
  box-shadow:0 0 10px rgba(255,255,255,0.06);}
.skin-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;flex-shrink:0;border:1px solid rgba(255,255,255,0.15);}

/* ════════════════════════════════════════════════════
   WELCOME MODAL — first visit
   ════════════════════════════════════════════════════ */
#welcome-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.88);
  z-index:2147483647;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
#welcome-modal.open{display:flex;}
.wm-box{
  width:min(460px,92vw);
  background:linear-gradient(160deg,#110d28 0%,#0a0818 100%);
  border:1.5px solid rgba(76,201,240,0.30);
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(76,201,240,0.08),
    0 0 60px rgba(76,201,240,0.12),
    0 32px 80px rgba(0,0,0,0.80);
  overflow:hidden;
  animation:wmSlide 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes wmSlide{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.wm-header{
  background:linear-gradient(90deg,rgba(76,201,240,0.12),rgba(199,125,255,0.12));
  border-bottom:1.5px solid rgba(76,201,240,0.18);
  padding:18px 22px 14px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.wm-logo{
  font-family:'Orbitron',monospace;font-size:1.10rem;font-weight:900;
  letter-spacing:5px;
  background:linear-gradient(90deg,#ff4d6d,#ffd60a,#2dc653,#4cc9f0,#c77dff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(76,201,240,0.35));
}
.wm-tagline{
  font-family:'Orbitron',monospace;font-size:0.44rem;font-weight:600;
  letter-spacing:5px;color:rgba(255,255,255,0.35);
}
.wm-body{
  padding:20px 22px;
  display:flex;flex-direction:column;gap:14px;
}
.wm-section{
  display:flex;gap:12px;align-items:flex-start;
}
.wm-icon{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:rgba(76,201,240,0.10);border:1.5px solid rgba(76,201,240,0.20);
}
.wm-text{display:flex;flex-direction:column;gap:3px;}
.wm-section-title{
  font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:800;
  color:#4cc9f0;letter-spacing:2px;
}
.wm-section-body{
  font-family:'Orbitron',monospace;font-size:0.58rem;font-weight:400;
  color:rgba(255,255,255,0.60);letter-spacing:0.8px;line-height:1.80;
}
.wm-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(76,201,240,0.18),rgba(199,125,255,0.18),transparent);
}
.wm-footer{
  padding:16px 24px 26px;display:flex;gap:10px;
}
.wm-btn{
  flex:1;padding:30px 16px;
  border-radius:7px;border:1.5px solid;
  font-family:'Orbitron',monospace;font-size:0.85rem;font-weight:800;letter-spacing:2px;
  cursor:pointer;transition:all 0.15s;
}
.wm-btn-enter{
  background:rgba(76,201,240,0.12);border-color:rgba(76,201,240,0.45);color:#4cc9f0;
  box-shadow:0 0 16px rgba(76,201,240,0.12);
}
.wm-btn-enter:hover{background:rgba(76,201,240,0.22);border-color:#4cc9f0;box-shadow:0 0 24px rgba(76,201,240,0.25);}

/* ════════════════════════════════════════════════════
   COFFEE MODAL
   ════════════════════════════════════════════════════ */
#coffee-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.88);
  z-index:2147483647;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
#coffee-modal.open{display:flex;}
.coffee-box{
  width:min(400px,90vw);
  background:linear-gradient(160deg,#0a1a10 0%,#071210 100%);
  border:1.5px solid rgba(80,200,120,0.30);
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(80,200,120,0.08),
    0 0 60px rgba(80,200,120,0.10),
    0 32px 80px rgba(0,0,0,0.80);
  overflow:hidden;
  animation:wmSlide 0.4s cubic-bezier(0.22,1,0.36,1);
  text-align:center;
}
.coffee-header{
  background:linear-gradient(90deg,rgba(80,200,120,0.12),rgba(100,220,160,0.12));
  border-bottom:1.5px solid rgba(80,200,120,0.18);
  padding:22px 24px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.coffee-emoji{font-size:2.2rem;line-height:1;filter:drop-shadow(0 0 14px rgba(80,220,130,0.55));}
.coffee-title{
  font-family:'Orbitron',monospace;font-size:0.82rem;font-weight:900;
  letter-spacing:3px;
  background:linear-gradient(90deg,#4de88a,#80ffb0,#a8ffd0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.coffee-body{
  padding:22px 26px 10px;
  font-family:'Orbitron',monospace;font-size:0.58rem;font-weight:400;
  color:rgba(255,255,255,0.62);letter-spacing:0.8px;line-height:1.85;
}
.coffee-body strong{
  color:rgba(120,255,170,0.92);font-weight:700;
}
.coffee-footer{
  padding:16px 24px 22px;
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.coffee-btn-main{
  width:100%;padding:15px 8px;
  border-radius:8px;border:1.5px solid rgba(57,220,110,0.60);
  background:rgba(57,220,110,0.14);
  font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:800;letter-spacing:2px;
  color:#39dc6e;cursor:pointer;transition:all 0.15s;
  box-shadow:0 0 16px rgba(57,220,110,0.14);
}
.coffee-btn-main:hover{
  background:rgba(57,220,110,0.26);border-color:#39dc6e;
  box-shadow:0 0 28px rgba(57,220,110,0.30);color:#80ffb0;
}
.coffee-btn-skip{
  background:rgba(20,80,40,0.60);border:1.5px solid rgba(57,180,90,0.40);
  border-radius:6px;padding:8px 20px;
  font-family:'Orbitron',monospace;font-size:0.50rem;font-weight:700;letter-spacing:1.5px;
  color:rgba(80,200,120,0.85);cursor:pointer;transition:all 0.15s;
}


/* ── Confirm delete modal ─────────────────────────────────────── */
#delete-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.88);
  z-index:2147483647;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
#delete-modal.open{display:flex;}
.delete-box{
  width:min(380px,90vw);
  background:linear-gradient(160deg,#1a0608 0%,#120407 100%);
  border:1.5px solid rgba(220,40,60,0.35);
  border-radius:14px;
  box-shadow:0 0 60px rgba(220,40,60,0.12),0 32px 80px rgba(0,0,0,0.80);
  overflow:hidden;
  animation:wmSlide 0.3s cubic-bezier(0.22,1,0.36,1);
  padding:24px;
  display:flex;flex-direction:column;gap:16px;
}
.delete-box-title{
  font-family:'Orbitron',monospace;font-size:0.80rem;font-weight:900;
  letter-spacing:3px;color:#ff4466;text-align:center;
}
.delete-box-body{
  font-family:'Orbitron',monospace;font-size:0.55rem;font-weight:400;
  color:rgba(255,255,255,0.72);letter-spacing:0.8px;line-height:1.9;
  text-align:center;
}
.delete-email-wrap{ display:flex;flex-direction:column;gap:6px; }
.delete-email-wrap label{
  font-family:'Orbitron',monospace;font-size:0.50rem;font-weight:700;
  letter-spacing:1.5px;color:rgba(255,100,120,0.80);
}
.delete-box-actions{display:flex;gap:10px;justify-content:center;}
.sm-btn-delete:hover{
  background:rgba(220,40,60,0.32);
  border-color:#ff4466;
  box-shadow:0 0 18px rgba(220,40,60,0.28);
}

/* ── PW gauge 50% tick mark ───────────────────────────────────── */
.gauge-mid-tick{
  position:absolute;
  bottom:50%;
  left:0;
  right:0;
  width:100%;
  height:1.5px;
  background:rgba(255,255,255,0.50);
  z-index:6;
  pointer-events:none;
}

/* ── Disable all browser callout / zoom on mobile ─────────────── */
input, select, textarea, button {
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
input[type="email"], input[type="text"] {
  /* Allow text input but no callout menus */
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: none;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
}

/* ── Save modal: field error highlight ────────────────────────── */
.save-modal-input.field-error {
  border-color: #ff4466 !important;
  box-shadow: 0 0 0 2px rgba(255,68,102,0.30), 0 0 14px rgba(255,68,102,0.18) !important;
  animation: fieldShake 0.25s ease;
}
.save-modal-select.field-error {
  border-color: #ff4466 !important;
}
@keyframes fieldShake {
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-4px); }
  75%    { transform:translateX(4px); }
}
.save-modal-field label.label-error {
  color: #ff4466;
}

/* ── Save modal: error banner ─────────────────────────────────── */
.save-modal-error {
  font-family:'Orbitron',monospace;font-size:0.50rem;font-weight:700;
  letter-spacing:1px;line-height:1.8;
  color:#ff4466;text-align:center;
  background:rgba(255,68,102,0.08);
  border:1px solid rgba(255,68,102,0.25);
  border-radius:6px;padding:8px 10px;
}

/* ── Save modal: overwrite confirm bar ────────────────────────── */
.save-overwrite-bar {
  display:flex;flex-direction:column;gap:8px;
  background:rgba(255,200,0,0.07);
  border:1px solid rgba(255,200,0,0.25);
  border-radius:8px;padding:10px 12px;
}
.save-overwrite-bar span {
  font-family:'Orbitron',monospace;font-size:0.48rem;font-weight:700;
  letter-spacing:1px;color:rgba(255,220,80,0.90);text-align:center;line-height:1.8;
}
.save-overwrite-actions { display:flex;gap:8px; }

/* ── Delete modal: inline error ───────────────────────────────── */
.delete-error {
  font-family:'Orbitron',monospace;font-size:0.50rem;font-weight:700;
  letter-spacing:1px;line-height:1.8;
  color:#ff4466;text-align:center;
  background:rgba(255,68,102,0.08);
  border:1px solid rgba(255,68,102,0.25);
  border-radius:6px;padding:8px 10px;
}

/* ── sm-btn-delete: remove (was red, now using sm-btn-save green) ── */

/* ══════════════════════════════════════════════════════════════
   SKIN — gauge label unified color overrides
   SPECTRUM : no override (varied colors per module, unchanged)
   RED LAVA  : orange like REV  → rgba(255,154,0,0.90)
   ELEC BLUE : yellow like A    → rgba(255,214,10,0.92)
   GRN GOBLIN: violet like DLY  → rgba(199,125,255,0.92)
   ══════════════════════════════════════════════════════════════ */

/* Selector targets ALL gauge labels under gauges */
.skin-lava .gauge-label,
.skin-lava .label-a, .skin-lava .label-d, .skin-lava .label-s,
.skin-lava .label-cut, .skin-lava .label-mod, .skin-lava .label-dly,
.skin-lava .label-echo, .skin-lava .label-reverb, .skin-lava .label-noise {
  color: rgba(255,100,0,0.90) !important;
}

.skin-blue .gauge-label,
.skin-blue .label-a, .skin-blue .label-d, .skin-blue .label-s,
.skin-blue .label-cut, .skin-blue .label-mod, .skin-blue .label-dly,
.skin-blue .label-echo, .skin-blue .label-reverb, .skin-blue .label-noise {
  color: rgba(255,214,10,0.92) !important;
}

.skin-green .gauge-label,
.skin-green .label-a, .skin-green .label-d, .skin-green .label-s,
.skin-green .label-cut, .skin-green .label-mod, .skin-green .label-dly,
.skin-green .label-echo, .skin-green .label-reverb, .skin-green .label-noise {
  color: rgba(199,125,255,0.92) !important;
}

/* ── Toast notifications ──────────────────────────────────────── */
#alch-toast {
  /* Centrage sans transform — évite la création d'un nouveau
     stacking context sur iOS/Android qui piège le z-index        */
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  width: -webkit-max-content;
  width: max-content;
  max-width: 90vw;
  margin: 0 auto;
  z-index: 2147483647;
  padding: 11px 22px;
  border-radius: 8px;
  font-family: 'Orbitron', monospace;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#alch-toast.toast-ok {
  background: #0a2414;
  border: 1.5px solid #2dc653;
  color: #2dc653;
  box-shadow: 0 4px 28px rgba(0,0,0,0.90), 0 0 14px rgba(45,198,83,0.30);
}
#alch-toast.toast-err {
  background: #2a0b12;
  border: 1.5px solid #ff4466;
  color: #ff4466;
  box-shadow: 0 4px 28px rgba(0,0,0,0.90), 0 0 14px rgba(255,68,102,0.30);
}


/* ── Desktop scale ×1.2 ── */
/* Note: on utilise zoom et non transform:scale car transform crée un stacking context
   qui piège position:fixed (menu drawer, overlay, modals) et les rend inaccessibles */
@media (min-width:601px){
  .synth{
    zoom:1.2;
  }
}