:root {
  --bg:       #080810;
  --panel:    #0f0f1a;
  --panel2:   #13131f;
  --border:   #1e1e35;
  --amber:    #ff8c00;
  --amber2:   #ffb347;
  --cyan:     #00d4ff;
  --cyan2:    #7fffff;
  --magenta:  #ff2d78;
  --green:    #39ff14;
  --red:      #ff2020;
  --text:     #c8c8e0;
  --textdim:  #5a5a80;
  --knob-bg:  #1a1a2e;
  --knob-rim: #2a2a4a;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:'Rajdhani',sans-serif;overflow:hidden;}

/* ── SCANLINES OVERLAY */
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none;z-index:9999;}

/* ── LAYOUT */
#app{display:grid;grid-template-rows:56px 1fr 200px;grid-template-columns:1fr;height:100vh;gap:0;}

/* ── HEADER */
#header{display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--panel);border-bottom:2px solid var(--amber);box-shadow:0 0 30px rgba(255,140,0,.3);}
#logo{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;color:var(--amber);letter-spacing:6px;text-shadow:0 0 20px var(--amber),0 0 40px rgba(255,140,0,.5);white-space:nowrap;}
#logo span{color:var(--cyan);text-shadow:0 0 20px var(--cyan);}

/* Transport */
#transport{display:flex;align-items:center;gap:8px;margin-left:20px;}
.tbtn{width:40px;height:34px;border:1px solid var(--border);background:var(--panel2);color:var(--textdim);cursor:pointer;border-radius:4px;font-size:14px;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.tbtn:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 8px rgba(255,140,0,.4);}
.tbtn.active{background:rgba(255,140,0,.15);border-color:var(--amber);color:var(--amber);box-shadow:0 0 12px rgba(255,140,0,.5);}
.tbtn.play-active{background:rgba(57,255,20,.1);border-color:var(--green);color:var(--green);box-shadow:0 0 12px rgba(57,255,20,.5);}
#loopBtn.loop-on{background:rgba(0,212,255,.1);border-color:var(--cyan);color:var(--cyan);}

/* Time display */
#timeDisp{font-family:'Orbitron',sans-serif;font-size:13px;color:var(--cyan);background:var(--panel2);padding:6px 12px;border:1px solid var(--border);border-radius:4px;min-width:140px;text-align:center;letter-spacing:2px;}

/* BPM */
#bpmBox{display:flex;align-items:center;gap:8px;margin-left:8px;}
#bpmBox label{font-size:11px;color:var(--textdim);letter-spacing:2px;}
#bpmVal{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:var(--amber);background:var(--panel2);border:1px solid var(--border);padding:4px 10px;border-radius:4px;width:70px;text-align:center;}
.bpmBtn{width:26px;height:26px;border:1px solid var(--border);background:var(--panel2);color:var(--textdim);cursor:pointer;border-radius:3px;font-size:16px;line-height:1;}
.bpmBtn:hover{border-color:var(--amber);color:var(--amber);}

/* File load */
#fileArea{margin-left:auto;display:flex;align-items:center;gap:10px;}
#fileDrop{width:180px;height:34px;border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--textdim);cursor:pointer;transition:all .2s;letter-spacing:1px;}
#fileDrop:hover,#fileDrop.drag,#sf2Drop:hover,#sf2Drop.drag{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,.05);}
#fileInput{display:none;}

/* LED status */
#statusLed{width:10px;height:10px;border-radius:50%;background:var(--textdim);box-shadow:none;transition:all .3s;}
#statusLed.on{background:var(--green);box-shadow:0 0 10px var(--green),0 0 20px rgba(57,255,20,.4);}
#statusLed.loading{background:var(--amber);box-shadow:0 0 10px var(--amber);}

/* ── MAIN AREA */
#main{display:grid;grid-template-columns:300px 1fr 240px;overflow:hidden;}

/* ── CHANNEL STRIPS */
#channelPanel{background:var(--panel);border-right:2px solid var(--border);overflow-y:auto;padding:8px;}
#channelPanel::-webkit-scrollbar{width:4px;}
#channelPanel::-webkit-scrollbar-track{background:var(--bg);}
#channelPanel::-webkit-scrollbar-thumb{background:var(--border);}
.ch-panel-title{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:var(--textdim);padding:4px 6px 8px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.channels-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.channel-strip{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:border-color .2s;}
.channel-strip.active{border-color:rgba(255,140,0,.4);}
.channel-strip.muted{opacity:.4;}
.channel-strip.soloed{border-color:var(--cyan);}
.ch-num{font-family:'Orbitron',sans-serif;font-size:8px;color:var(--textdim);}
.ch-name{font-size:8px;color:var(--textdim);text-align:center;max-width:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* VU Meter */
.vu-wrap{width:16px;height:56px;background:#0a0a12;border:1px solid var(--border);border-radius:2px;overflow:hidden;display:flex;flex-direction:column-reverse;}
.vu-bar{width:100%;height:0%;transition:height .05s;background:linear-gradient(0deg,var(--green) 0%,#aaff00 60%,var(--amber) 80%,var(--red) 100%);}
/* Knobs */
.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;}
.knob-lbl{font-size:7px;color:var(--textdim);letter-spacing:1px;}
.knob{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a2a4a,#0d0d1a);border:2px solid var(--knob-rim);cursor:pointer;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.8),inset 0 1px 2px rgba(255,255,255,.05);}
.knob::after{content:'';position:absolute;width:2px;height:7px;background:var(--amber);top:2px;left:50%;transform:translateX(-50%);border-radius:1px;transform-origin:50% 100%;transition:none;}
.knob.pan-knob::after{background:var(--cyan);}
/* Fader */
.fader-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;}
.fader-track{width:6px;height:44px;background:#0a0a12;border:1px solid var(--border);border-radius:3px;position:relative;cursor:pointer;}
.fader-thumb{width:14px;height:6px;background:linear-gradient(90deg,#2a2a4a,#3a3a6a);border:1px solid var(--knob-rim);border-radius:2px;position:absolute;left:50%;transform:translate(-50%,0);box-shadow:0 0 4px rgba(0,0,0,.8);}
/* Mini buttons */
.ch-btns{display:flex;gap:2px;}
.ch-btn{width:12px;height:12px;border-radius:2px;border:1px solid var(--border);background:var(--panel);cursor:pointer;font-size:6px;display:flex;align-items:center;justify-content:center;color:var(--textdim);transition:all .15s;}
.ch-btn.mute-btn.on{background:rgba(255,32,32,.2);border-color:var(--red);color:var(--red);}
.ch-btn.solo-btn.on{background:rgba(255,179,71,.2);border-color:var(--amber2);color:var(--amber2);}
.ch-prog{font-size:7px;color:var(--textdim);text-align:center;max-width:28px;overflow:hidden;white-space:nowrap;}

/* ── CENTER PANEL */
#centerPanel{display:flex;flex-direction:column;overflow:hidden;}
/* Seek bar */
#seekWrap{height:28px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 12px;}
#seekBar{flex:1;height:6px;background:var(--panel2);border:1px solid var(--border);border-radius:3px;cursor:pointer;position:relative;overflow:hidden;}
#seekFill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:3px;pointer-events:none;}
#seekHead{position:absolute;top:-3px;width:12px;height:12px;background:white;border-radius:50%;box-shadow:0 0 8px var(--amber);transform:translateX(-6px);pointer-events:none;}
#seekLbl{font-family:'Orbitron',sans-serif;font-size:9px;color:var(--textdim);white-space:nowrap;}

/* Piano Roll */
#rollWrap{flex:1;position:relative;overflow:hidden;}
#rollCanvas{width:100%;height:100%;display:block;}
/* Roll toolbar */
#rollToolbar{height:22px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 10px;}
.roll-lbl{font-size:9px;color:var(--textdim);letter-spacing:2px;font-family:'Orbitron',sans-serif;}
.roll-sel{background:var(--panel2);border:1px solid var(--border);color:var(--text);font-size:10px;padding:1px 4px;border-radius:2px;cursor:pointer;}

/* ── RIGHT PANEL — EFFECTS */
#fxPanel{background:var(--panel);border-left:2px solid var(--border);padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.fx-section{border:1px solid var(--border);border-radius:4px;padding:8px;}
.fx-title{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:var(--cyan);margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:4px;}
.fx-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.fx-label{font-size:10px;color:var(--textdim);min-width:50px;letter-spacing:1px;}
.fx-slider{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:var(--panel2);border-radius:2px;border:1px solid var(--border);cursor:pointer;outline:none;}
.fx-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);cursor:pointer;}
.fx-val{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--cyan);min-width:30px;text-align:right;}
.fx-toggle{width:36px;height:16px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);cursor:pointer;position:relative;transition:all .2s;}
.fx-toggle.on{background:rgba(0,212,255,.2);border-color:var(--cyan);}
.fx-toggle::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--textdim);top:1px;left:1px;transition:all .2s;}
.fx-toggle.on::after{background:var(--cyan);left:21px;box-shadow:0 0 6px var(--cyan);}

/* EQ bands */
.eq-bands{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.eq-band{display:flex;flex-direction:column;align-items:center;gap:2px;}
.eq-fader{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;width:4px;height:60px;background:var(--panel2);border:1px solid var(--border);border-radius:2px;cursor:pointer;transform:rotate(180deg);}
.eq-fader::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:6px;background:var(--amber);border-radius:2px;cursor:pointer;box-shadow:0 0 4px var(--amber);}
.eq-freq{font-size:7px;color:var(--textdim);text-align:center;}
.eq-gain{font-family:'Share Tech Mono',monospace;font-size:8px;color:var(--amber);text-align:center;}

/* ── BOTTOM — KEYBOARD + EVENT LOG */
#bottom{display:grid;grid-template-columns:1fr 360px;background:var(--panel);border-top:2px solid var(--border);}
#keyboardWrap{overflow:hidden;position:relative;}
#keyboardCanvas{display:block;width:100%;height:100%;}
#eventLog{border-left:1px solid var(--border);padding:6px;overflow-y:auto;font-family:'Share Tech Mono',monospace;font-size:10px;}
#eventLog::-webkit-scrollbar{width:3px;}
#eventLog::-webkit-scrollbar-thumb{background:var(--border);}
.event-item{padding:1px 2px;border-bottom:1px solid rgba(30,30,53,.5);display:flex;gap:6px;}
.event-tick{color:var(--textdim);min-width:50px;}
.event-type{min-width:30px;}
.event-type.note{color:var(--green);}
.event-type.cc{color:var(--cyan);}
.event-type.pc{color:var(--amber);}
.event-type.pb{color:var(--magenta);}
.event-data{color:var(--text);}

/* Scrollbars */
#fxPanel::-webkit-scrollbar{width:3px;}
#fxPanel::-webkit-scrollbar-thumb{background:var(--border);}

/* Tooltip */
.tooltip{position:fixed;background:rgba(0,0,0,.9);border:1px solid var(--border);border-radius:3px;padding:3px 6px;font-size:10px;color:var(--text);pointer-events:none;z-index:10000;display:none;}

/* Loading overlay */
#loadOverlay{position:fixed;inset:0;background:rgba(8,8,16,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:16px;display:none;}
#loadOverlay.show{display:flex;}
.load-title{font-family:'Orbitron',sans-serif;font-size:24px;color:var(--cyan);text-shadow:0 0 30px var(--cyan);}
.load-bar-wrap{width:300px;height:4px;background:var(--panel2);border-radius:2px;overflow:hidden;}
.load-bar{height:100%;background:linear-gradient(90deg,var(--cyan),var(--amber));border-radius:2px;width:0%;transition:width .3s;}
.load-msg{font-size:12px;color:var(--textdim);}

/* Glow animations */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
@keyframes vu-decay{from{height:var(--peak);}to{height:0%;}}


.ch-prog-sel {
  background: var(--bg);
  color: var(--amber);
  border: 1px solid var(--border);
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  width: 100%;
  cursor: pointer;
  outline: none;
  appearance: none; /* Remove a seta padrão do navegador */
  text-align: center;
}

.ch-prog-sel:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.ch-prog-sel option {
  background: var(--panel);
  color: var(--text);
}