@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Oswald:wght@600&display=swap');

:root {
  --chassis:#1a1410; --panel:#e8dfc8; --panel2:#d4c9ae; --panel-dark:#2a2218;
  --chrome:#8a8070; --chrome2:#c0b898; --amber:#ff8800; --amber2:#ffaa33;
  --amber-dim:#7a4000; --red-led:#ff2222; --green-led:#39ff88; --cream:#f5eed8;
  --text-dark:#1a1410; --text-mid:#5a5040; --text-light:#d4c9ae; --muted:#8a8070;
  --surface:#221c14; --surface2:#2e2618; --border:#3a3020;
  --font-d:'Bebas Neue',sans-serif; --font-h:'Oswald',sans-serif; --font-m:'JetBrains Mono',monospace;
  --radius:3px; --ps:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{
  background:var(--chassis);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);
  color:var(--text-light);font-family:var(--font-m);min-height:100%;overscroll-behavior:none;
}

/* HEADER */
header{background:linear-gradient(180deg,#2e2618 0%,#1a1410 40%,#221c14 100%);border-bottom:3px solid var(--chrome);padding:12px 36px 10px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 3px 0 #0a0806,0 4px 20px rgba(0,0,0,.6);}
header::before,header::after{content:'✕';font-size:9px;color:var(--chrome);width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c0b090,#6a5a40);box-shadow:0 1px 2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2);position:absolute;top:12px;}
header::before{left:10px;}header::after{right:10px;}
.logo{font-family:var(--font-d);font-size:26px;letter-spacing:6px;color:var(--cream);text-shadow:0 0 30px rgba(255,200,100,.2),0 1px 0 rgba(0,0,0,.8);}
.logo-sub{font-family:var(--font-h);font-size:10px;letter-spacing:4px;color:var(--muted);margin-left:2px;}

/* MIC BAR */
.mic-bar{background:linear-gradient(180deg,#2a2218,#221c14);border-bottom:2px solid #0a0806;padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.mic-status{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.mic-dot{width:10px;height:10px;border-radius:50%;background:#2a1a00;border:1px solid #3a2a10;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:all .3s;}
.mic-dot.active{background:var(--green-led);box-shadow:0 0 6px var(--green-led),0 0 14px rgba(57,255,136,.4);}
.vol-wrap{flex:1;min-width:80px;max-width:160px;}
.vol-label{font-size:9px;color:var(--muted);letter-spacing:3px;margin-bottom:4px;text-transform:uppercase;}
.vol-meter{height:8px;background:#0a0806;border:1px solid #0a0806;border-radius:1px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.8);}
.vol-fill{height:100%;background:linear-gradient(90deg,#39ff88 0%,#aaff00 60%,#ff8800 80%,#ff2222 100%);width:0%;transition:width .04s;}
.sens-wrap{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);letter-spacing:1px;}
.sens-wrap input{width:70px;accent-color:var(--amber);cursor:pointer;}

/* BUTTONS */
.btn{background:linear-gradient(180deg,var(--amber2) 0%,var(--amber) 50%,#cc6600 100%);color:#1a0800;border:none;border-bottom:2px solid #884400;font-family:var(--font-h);font-size:14px;letter-spacing:2px;padding:8px 18px;cursor:pointer;transition:all .1s;border-radius:var(--radius);box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2);text-transform:uppercase;}
.btn:hover{filter:brightness(1.1);}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.5);border-bottom-width:1px;}
.btn.stop{background:linear-gradient(180deg,#ff6655 0%,var(--red-led) 50%,#aa0000 100%);color:#fff;border-bottom-color:#660000;}
.btn.off{background:linear-gradient(180deg,#3a3020,var(--surface2));color:var(--text-light);border:1px solid var(--border);border-bottom:2px solid #0a0806;box-shadow:0 2px 4px rgba(0,0,0,.4);}
.btn.off:hover{border-color:var(--amber);color:var(--amber);}
.adj-btn{background:linear-gradient(180deg,#3a3020,#2a2218);border:1px solid var(--border);border-bottom:2px solid #0a0806;color:var(--text-light);font-family:var(--font-m);font-size:13px;padding:8px 14px;cursor:pointer;transition:all .1s;border-radius:var(--radius);box-shadow:0 2px 3px rgba(0,0,0,.4);}
.adj-btn:hover{border-color:var(--amber);color:var(--amber);}
.adj-btn:active{transform:translateY(1px);}

/* NAV */
.nav{display:flex;background:linear-gradient(180deg,#1e1810,#161008);border-bottom:3px solid #0a0806;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav-btn{flex:1;min-width:52px;padding:11px 4px 9px;text-align:center;font-family:var(--font-h);font-size:12px;letter-spacing:2px;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:3px solid transparent;border-right:1px solid rgba(255,255,255,.04);transition:all .18s;text-transform:uppercase;position:relative;}
.nav-btn::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#2a1a00;border:1px solid #3a2a10;margin:0 auto 5px;box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:all .18s;}
.nav-btn.active{color:var(--amber);border-bottom-color:var(--amber);background:rgba(255,136,0,.06);}
.nav-btn.active::before{background:var(--amber);box-shadow:0 0 5px var(--amber),0 0 10px rgba(255,136,0,.4);}

/* SECTIONS */
.sec{display:none;padding:14px 14px 48px;max-width:600px;margin:0 auto;}
.sec.active{display:block;}

/* PANEL */
.panel{background:linear-gradient(180deg,#2a2218,#221c14);border:1px solid var(--border);border-radius:4px;padding:14px 16px;margin-bottom:12px;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.panel-label{font-family:var(--font-d);font-size:11px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.panel-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--muted),transparent);opacity:.3;}

/* BPM */
.bpm-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.bpm-row label{font-size:10px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;font-family:var(--font-h);}
.bpm-row input[type=range]{flex:1;min-width:80px;accent-color:var(--amber);cursor:pointer;}
.bpm-val{font-family:var(--font-d);font-size:24px;color:var(--amber);min-width:44px;text-align:center;background:#0e0a04;border:1px solid #3a2000;border-radius:2px;padding:1px 4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.6);text-shadow:0 0 8px var(--amber);}

/* TEMPO */
.big-bpm{text-align:center;margin-bottom:12px;background:#0e0a04;border:2px solid #1a1208;border-radius:4px;padding:16px 10px 10px;box-shadow:inset 0 3px 10px rgba(0,0,0,.8);}
.big-bpm-num{font-family:var(--font-d);font-size:96px;line-height:1;color:var(--amber);text-shadow:0 0 20px rgba(255,136,0,.6),0 0 40px rgba(255,136,0,.2);}
.big-bpm-sub{font-size:10px;color:var(--amber-dim);letter-spacing:6px;margin-top:2px;text-transform:uppercase;}
.bpm-adj{display:flex;justify-content:center;gap:8px;margin-bottom:10px;}

/* METRO */
.metro-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:12px 0;}
.beat-dots{display:flex;gap:12px;}
.bdot{width:20px;height:20px;border-radius:50%;background:#1a0800;border:2px solid #3a2000;box-shadow:inset 0 2px 3px rgba(0,0,0,.7);transition:all .06s;}
.bdot.lit{background:var(--amber);border-color:var(--amber2);box-shadow:0 0 8px var(--amber),0 0 18px rgba(255,136,0,.4);}
.bdot.accent{transform:scale(1.4);background:var(--amber2);box-shadow:0 0 12px var(--amber2),0 0 24px rgba(255,170,51,.5);}
.metro-ring{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2010,#0e0a04);border:3px solid #3a3020;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.7);transition:all .06s;}
.metro-ring.pulse{border-color:var(--amber);box-shadow:0 0 16px rgba(255,136,0,.5),0 0 32px rgba(255,136,0,.2);}
.metro-inner{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3020,#1a1208);border:1px solid #4a4030;transition:all .06s;}
.metro-ring.pulse .metro-inner{background:radial-gradient(circle at 35% 30%,var(--amber2),var(--amber));box-shadow:0 0 10px var(--amber);}

/* FEEDBACK */
.feedback-wrap{text-align:center;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:8px 0;background:#0e0a04;border:1px solid #1a1208;border-radius:3px;box-shadow:inset 0 2px 6px rgba(0,0,0,.7);}
.fb-text{font-family:var(--font-d);font-size:36px;letter-spacing:4px;opacity:0;transition:opacity .1s;}
.fb-text.show{opacity:1;}
.fb-text.good{color:var(--green-led);text-shadow:0 0 12px var(--green-led);}
.fb-text.bad{color:var(--red-led);text-shadow:0 0 12px var(--red-led);}
.fb-ms{font-size:11px;color:var(--amber-dim);margin-top:2px;}
.acc-row{display:flex;gap:4px;justify-content:center;margin:10px 0;}
.acc-bar{width:20px;height:40px;background:#0e0a04;border:1px solid #1a1208;border-radius:1px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.acc-fill{position:absolute;bottom:0;left:0;right:0;transition:height .3s;}

/* TAP */
.tap-btn{width:100%;padding:18px;margin:10px 0 6px;font-family:var(--font-h);font-size:18px;letter-spacing:4px;background:linear-gradient(180deg,#3a3020,#2a2218);border:1px solid var(--border);border-bottom:3px solid #0a0806;color:var(--text-light);cursor:pointer;transition:all .1s;border-radius:var(--radius);box-shadow:0 3px 6px rgba(0,0,0,.5);text-transform:uppercase;-webkit-tap-highlight-color:rgba(255,136,0,.2);}
.tap-btn:active{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a0800;border-bottom-width:1px;transform:translateY(2px);}

/* CHORDS */
.prog-grid{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.prog-btn{background:linear-gradient(180deg,#2a2218,#221c14);border:1px solid var(--border);color:var(--muted);font-family:var(--font-m);font-size:11px;padding:5px 11px;cursor:pointer;transition:all .15s;border-radius:var(--radius);}
.prog-btn:hover{border-color:var(--amber);color:var(--amber);}
.prog-btn.sel{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a0800;border-color:var(--amber2);box-shadow:0 0 8px rgba(255,136,0,.3);}
.beat-cnt{display:flex;gap:5px;margin:10px 0;}
.cb{flex:1;height:8px;background:#0e0a04;border:1px solid #1a1208;border-radius:1px;transition:all .1s;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.cb.active{background:var(--amber);box-shadow:0 0 6px var(--amber);border-color:var(--amber2);}
.cb.done{background:#1a0800;border-color:var(--amber-dim);}
.chord-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.chord-now{flex:1;background:#0e0a04;border:2px solid var(--amber);padding:12px;text-align:center;box-shadow:0 0 16px rgba(255,136,0,.15),inset 0 2px 6px rgba(0,0,0,.6);border-radius:var(--radius);}
.chord-next{background:#0e0a04;border:1px solid #1a1208;padding:10px;text-align:center;opacity:.6;min-width:100px;border-radius:var(--radius);}
.chord-lbl{font-size:9px;letter-spacing:4px;color:var(--amber-dim);margin-bottom:5px;text-transform:uppercase;}

/* TAB */
.riff-grid{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;}
.riff-btn{background:linear-gradient(180deg,#2a2218,#221c14);border:1px solid var(--border);color:var(--muted);font-family:var(--font-m);font-size:11px;padding:5px 11px;cursor:pointer;transition:all .15s;border-radius:var(--radius);}
.riff-btn:hover{border-color:var(--amber);color:var(--amber);}
.riff-btn.sel{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a0800;border-color:var(--amber2);}
.strum-bar{height:5px;background:#0e0a04;border-radius:2px;overflow:hidden;margin-bottom:12px;border:1px solid #1a1208;}
.strum-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--green-led),var(--amber));transition:width .05s;}
.highway-canvas{display:block;width:100%;border:2px solid #1a1208;border-radius:3px;margin-bottom:10px;background:#080502;box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.4);}

/* INST TOGGLE */
.inst-toggle{display:flex;border:1px solid #3a3020;border-radius:3px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.5);}
.inst-btn{background:linear-gradient(180deg,#2a2218,#1a1410);color:var(--muted);border:none;border-right:1px solid #3a3020;font-family:var(--font-h);font-size:12px;letter-spacing:2px;padding:5px 12px;cursor:pointer;transition:all .15s;text-transform:uppercase;}
.inst-btn:last-child{border-right:none;}
.inst-btn.active{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a0800;}

/* SONGS */
.library-empty{text-align:center;padding:40px 20px;}
.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5;}
.empty-title{font-family:var(--font-d);font-size:22px;color:var(--muted);letter-spacing:3px;}
.empty-sub{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.6;opacity:.7;}
.song-card{background:linear-gradient(180deg,#2a2218,#221c14);border:1px solid var(--border);border-radius:4px;margin-bottom:8px;overflow:hidden;transition:border-color .2s;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.song-card:hover{border-color:rgba(255,136,0,.4);}
.song-card-header{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);}
.song-info{flex:1;min-width:0;}
.song-title{font-family:var(--font-d);font-size:18px;color:var(--cream);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song-meta{font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:1px;}
.song-del{background:none;border:none;color:var(--border);font-size:15px;cursor:pointer;padding:4px 8px;transition:color .15s;flex-shrink:0;}
.song-del:hover{color:var(--red-led);}
.song-arrs{display:flex;gap:6px;padding:10px 14px;flex-wrap:wrap;}
.arr-btn{flex:1;min-width:72px;padding:8px 6px;border:1px solid var(--border);background:linear-gradient(180deg,#2a2218,#1e1810);color:var(--muted);font-family:var(--font-h);font-size:14px;letter-spacing:2px;cursor:pointer;transition:all .15s;text-align:center;border-radius:var(--radius);box-shadow:0 1px 3px rgba(0,0,0,.4);text-transform:uppercase;}
.arr-btn:hover{border-color:var(--amber);color:var(--amber);background:rgba(255,136,0,.06);}
.arr-btn.active{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a0800;border-color:var(--amber2);box-shadow:0 0 8px rgba(255,136,0,.3);}
.player-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.player-title{font-family:var(--font-d);font-size:21px;color:var(--cream);letter-spacing:2px;}
.player-artist{font-size:10px;color:var(--muted);margin-top:3px;letter-spacing:1px;}
.arr-btns{display:flex;gap:5px;margin-bottom:10px;}
.rs-pos-row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:10px;color:var(--muted);font-family:var(--font-m);letter-spacing:1px;}

/* +ADD */
.upload-block{background:linear-gradient(180deg,#2a2218,#221c14);border:1px solid var(--border);border-radius:4px;padding:14px;margin-bottom:12px;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.upload-block.highlight{border-color:var(--amber);box-shadow:0 0 16px rgba(255,136,0,.12);}
.upload-block-title{font-family:var(--font-d);font-size:18px;letter-spacing:3px;color:var(--cream);margin-bottom:3px;}
.upload-block-sub{font-size:11px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.file-drop{display:block;position:relative;border:2px dashed #3a3020;padding:20px 16px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:8px;color:var(--muted);font-size:12px;letter-spacing:2px;border-radius:3px;-webkit-tap-highlight-color:rgba(255,136,0,.2);font-family:var(--font-h);text-transform:uppercase;}
.file-drop:hover,.file-drop.over{border-color:var(--amber);color:var(--amber);background:rgba(255,136,0,.04);box-shadow:0 0 12px rgba(255,136,0,.1);}
.psarc-bar-wrap{height:4px;background:#0e0a04;border-radius:2px;margin:10px 0 6px;overflow:hidden;border:1px solid #1a1208;}
.psarc-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:2px;transition:width .15s;}
.psarc-status{font-size:11px;color:var(--muted);letter-spacing:1px;}
.psarc-done-msg{font-family:var(--font-d);font-size:15px;color:var(--green-led);letter-spacing:2px;padding:6px 0;text-shadow:0 0 8px var(--green-led);}
.imp-divider{text-align:center;font-size:10px;color:var(--border);letter-spacing:4px;margin:14px 0 10px;text-transform:uppercase;font-family:var(--font-h);}
.imp-steps{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.imp-step{font-size:11px;color:var(--text-light);background:rgba(0,0,0,.2);border:1px solid var(--border);padding:8px 11px;display:flex;align-items:flex-start;gap:10px;line-height:1.6;border-radius:var(--radius);}
.imp-step code{color:var(--amber);font-family:var(--font-m);}
.imp-step b{color:var(--amber2);}
.step-num{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a0800;font-family:var(--font-d);font-size:13px;padding:1px 7px;flex-shrink:0;border-radius:2px;}
textarea#tabInput{width:100%;height:140px;background:#0e0a04;border:1px solid #1a1208;border-radius:3px;color:var(--amber);font-family:var(--font-m);font-size:12px;padding:10px;resize:vertical;outline:none;line-height:1.8;letter-spacing:1px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
textarea#tabInput:focus{border-color:var(--amber);}
.imp-opts{display:flex;flex-direction:column;gap:6px;margin:8px 0;}
.imp-opt-row{display:flex;align-items:center;gap:12px;}
.imp-opt-row label{font-size:10px;color:var(--muted);letter-spacing:2px;min-width:120px;text-transform:uppercase;font-family:var(--font-h);}
select{background:#1a1410;border:1px solid var(--border);color:var(--text-light);padding:5px 8px;font-family:var(--font-m);font-size:12px;border-radius:var(--radius);cursor:pointer;}
.parse-ok{font-family:var(--font-d);font-size:16px;color:var(--green-led);letter-spacing:2px;padding:6px 0;text-shadow:0 0 8px var(--green-led);}
.hint{font-size:10px;color:var(--muted);line-height:1.7;margin-top:8px;letter-spacing:.5px;}