:root{
  --bg:#050a14;
  --bg2:#081324;
  --panel:#0a1526;
  --panel2:#0c1a30;
  --line:#123a4d;
  --cyan:#38e1e1;
  --cyan-dim:#1e7d86;
  --cyan-soft:#7ff0f0;
  --ink:#bfe9ee;
  --muted:#5c8a93;
  --sharp:#5bd6ff;
  --flat:#ff5cc8;
  --rec:#ff4d4d;
  --save:#4dff88;
  --amber:#ffcc4d;
  --glow:0 0 6px rgba(56,225,225,.55);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 700px at 70% -10%, #0b2036 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Share Tech Mono","VT323",monospace;
  letter-spacing:.3px;
  overflow-x:hidden;
}
/* subtle CRT scanlines */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.12) 2px 3px);
  mix-blend-mode:multiply;opacity:.5;
}

.app{max-width:1180px;margin:0 auto;padding:18px 20px 40px}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  padding:12px 18px;margin-bottom:16px;box-shadow:inset 0 0 24px rgba(56,225,225,.05);}
.logo{font-family:"VT323",monospace;font-size:30px;margin:0;color:var(--cyan);
  text-shadow:var(--glow);font-weight:400;letter-spacing:2px;}
.logo .note{color:var(--cyan-soft)}
.ghost-btn{background:transparent;color:var(--cyan);border:1px solid var(--line);
  border-radius:7px;padding:7px 12px;font-family:inherit;font-size:14px;cursor:pointer;transition:.15s;}
.ghost-btn:hover{border-color:var(--cyan);box-shadow:var(--glow);color:var(--cyan-soft)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}

/* ---------- left rail ---------- */
.rail{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;}
.nav{display:flex;flex-direction:column;gap:8px}
.nav-item{display:flex;align-items:center;gap:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:11px 12px;font-family:inherit;font-size:16px;cursor:pointer;transition:.15s;text-align:left;}
.nav-item span{color:var(--cyan);font-size:18px;width:18px;text-align:center}
.nav-item:hover{border-color:var(--cyan-dim)}
.nav-item.active{border-color:var(--cyan);box-shadow:var(--glow);
  background:linear-gradient(180deg,#0e2540,#0a1a30)}
.nav-item.active span{text-shadow:var(--glow)}

.rail-group{border-top:1px dashed var(--line);padding-top:14px}
.rail-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}
.octave-switch{display:flex;gap:6px}
.oct-btn{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  color:var(--ink);padding:9px 4px;font-family:inherit;font-size:14px;cursor:pointer;transition:.15s}
.oct-btn:hover{border-color:var(--cyan-dim)}
.oct-btn.active{border-color:var(--cyan);color:var(--cyan-soft);box-shadow:var(--glow)}

.hint{font-size:15px;line-height:1.9;color:var(--ink)}
.hint .sharp{color:var(--sharp);text-shadow:0 0 5px rgba(91,214,255,.6)}
.hint .flat{color:var(--flat);text-shadow:0 0 5px rgba(255,92,200,.6)}
kbd{display:inline-block;min-width:20px;text-align:center;background:#0e2036;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;color:var(--cyan-soft);font-size:13px}

.status-list{list-style:none;margin:0 0 10px;padding:0;font-size:13px;color:var(--muted);line-height:2}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.ready{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.dot.rec{background:var(--rec);box-shadow:0 0 6px var(--rec)}
.dot.save{background:var(--save);box-shadow:0 0 6px var(--save)}
.status-pill{border:1px solid var(--line);border-radius:7px;padding:8px;text-align:center;font-size:14px}
.status-pill.ready{color:var(--cyan)}
.status-pill.rec{color:var(--rec);border-color:var(--rec);animation:pulse 1s infinite}
.status-pill.save{color:var(--save);border-color:var(--save)}
@keyframes pulse{50%{opacity:.45}}

.voice-select{width:100%;background:#061424;border:1px solid var(--line);border-radius:7px;
  color:var(--cyan-soft);padding:9px 8px;font-family:inherit;font-size:14px;cursor:pointer}
.voice-select:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow)}

/* ---------- transport: overdub ---------- */
.tp-btn.over{color:var(--amber);font-size:20px}
.tp-btn.over:hover{border-color:var(--amber);box-shadow:0 0 10px rgba(255,204,77,.6)}
.tp-btn.over.armed{background:var(--amber);color:#1a1300;box-shadow:0 0 12px var(--amber);border-color:var(--amber);animation:pulse 1s infinite}

/* ---------- tambourine pads ---------- */
.perc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.perc-title{color:var(--amber);font-size:15px}
.pad{position:relative;min-width:64px;height:48px;border-radius:9px;border:1px solid var(--cyan-dim);
  background:linear-gradient(180deg,#0c2135,#081726);color:var(--cyan-soft);font-size:18px;
  font-family:"VT323",monospace;cursor:pointer;transition:transform .05s,box-shadow .1s,border-color .1s}
.pad small{position:absolute;bottom:3px;right:6px;font-size:11px;color:var(--muted);font-family:"Share Tech Mono",monospace}
.pad.kick:hover{border-color:var(--flat)} .pad.hat:hover{border-color:var(--sharp)}
.pad.hit{transform:translateY(3px)}
.pad.kick.hit{box-shadow:0 0 16px rgba(255,92,200,.7);border-color:var(--flat);background:linear-gradient(180deg,#3a1030,#240a20)}
.pad.hat.hit{box-shadow:0 0 16px rgba(91,214,255,.7);border-color:var(--sharp);background:linear-gradient(180deg,#0e2f44,#0a2030)}
.perc-info{font-size:13px;color:var(--muted)} .perc-info b{color:var(--amber)}
.perc-hint{font-size:12px;color:var(--muted);margin-left:auto} .perc-hint b{color:var(--amber)}

/* ---------- stage ---------- */
.stage{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:16px;min-height:520px}
.view{display:none}
.view.active{display:block}

.stage-top{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.whale-box{position:relative;border:1px solid var(--line);border-radius:9px;
  background:radial-gradient(400px 300px at 50% 30%,#0a2033,#050d18);
  display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:300px}
#whale{image-rendering:pixelated}
.viz-bars{position:absolute;bottom:8px;left:8px;right:8px;height:34px;display:flex;
  align-items:flex-end;gap:2px;opacity:.65;pointer-events:none}
.viz-bars i{flex:1;background:linear-gradient(180deg,var(--cyan-soft),var(--cyan-dim));
  height:4px;border-radius:1px}

.rec-panel{border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:14px;
  display:flex;flex-direction:column;gap:10px}
.rec-head{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--ink)}
.rec-led{width:11px;height:11px;border-radius:50%;background:#3a1414;border:1px solid var(--rec)}
.rec-led.on{background:var(--rec);box-shadow:0 0 8px var(--rec);animation:pulse .8s infinite}
.rec-time{margin-left:auto;font-family:"VT323",monospace;font-size:26px;color:var(--cyan-soft);text-shadow:var(--glow)}
.wave{width:100%;height:90px;background:#04101c;border:1px solid var(--line);border-radius:6px}
.transport{display:flex;justify-content:center;gap:12px}
.tp-btn{width:52px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--cyan);font-size:18px;cursor:pointer;transition:.15s}
.tp-btn:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.tp-btn.rec{color:var(--rec)}
.tp-btn.rec.armed{background:var(--rec);color:#fff;box-shadow:0 0 12px var(--rec)}
.tp-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;border-color:var(--line)}
.meter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.pedal-ind{margin-top:4px}
.pedal-pill{display:inline-block;font-size:12px;color:var(--muted);border:1px solid var(--line);
  border-radius:6px;padding:4px 10px;transition:.12s}
.pedal-pill.on{color:#1a1300;background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 12px rgba(255,204,77,.7);animation:pulse 1.1s infinite}
body.pedal-on .whale-box{box-shadow:inset 0 0 40px rgba(255,204,77,.16)}
.meter .ch{width:12px}
.meter-bar{flex:1;height:9px;background:#04101c;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.meter-bar i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#2bd47a 0%,#8ee34d 55%,#ffcc4d 78%,#ff5b5b 100%);transition:width .05s}

/* ---------- keyboard ---------- */
.keyboard{display:flex;flex-direction:column;gap:8px;align-items:center;margin:4px 0 14px;user-select:none}
.kb-row{display:flex;gap:6px}
.kb-row.r2{margin-left:26px}
.kb-row.r3{margin-left:52px}
.key{position:relative;width:52px;height:70px;border-radius:8px;
  border:1px solid var(--cyan-dim);background:linear-gradient(180deg,#0c2135,#081726);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:6px 4px;cursor:pointer;transition:transform .05s,box-shadow .1s,border-color .1s}
.key .cap{font-family:"VT323",monospace;font-size:20px;color:var(--cyan-soft);line-height:1}
.key .sol{font-size:13px;color:var(--muted)}
.key:hover{border-color:var(--cyan)}
.key.down{transform:translateY(3px);border-color:var(--cyan);
  box-shadow:0 0 14px rgba(56,225,225,.6),inset 0 0 14px rgba(56,225,225,.25);
  background:linear-gradient(180deg,#12405e,#0c2942)}
.key.sharpmod{border-color:var(--sharp)}
.key.sharpmod .cap{color:var(--sharp)}
.key.flatmod{border-color:var(--flat)}
.key.flatmod .cap{color:var(--flat)}
.key .acc{position:absolute;top:3px;right:5px;font-size:12px}
.key.sharpmod .acc{color:var(--sharp)}
.key.flatmod .acc{color:var(--flat)}

/* ---------- stage actions ---------- */
.stage-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px dashed var(--line);padding-top:14px}
#recName{background:#061424;border:1px solid var(--line);border-radius:7px;color:var(--ink);
  padding:10px 12px;font-family:inherit;font-size:14px;min-width:180px}
#recName:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow)}
.primary-btn{background:linear-gradient(180deg,#0f3a5a,#0b2740);border:1px solid var(--cyan);
  border-radius:8px;color:var(--cyan-soft);padding:10px 16px;font-family:inherit;font-size:15px;
  cursor:pointer;box-shadow:var(--glow);transition:.15s}
.primary-btn:hover:not(:disabled){background:linear-gradient(180deg,#155078,#0e3355)}
.primary-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;border-color:var(--line);color:var(--muted)}
.export-msg{font-size:13px;color:var(--amber)}

/* ---------- files ---------- */
.files-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.files-head h2{font-family:"VT323",monospace;color:var(--cyan);font-size:26px;margin:0;letter-spacing:1px}
.file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.file-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2);padding:12px 14px}
.file-row .fname{color:var(--cyan-soft);font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .fmeta{font-size:12px;color:var(--muted);white-space:nowrap}
.file-row audio{height:34px}
.file-row .fbtn{background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--cyan);
  padding:6px 10px;font-family:inherit;font-size:13px;cursor:pointer;transition:.15s;text-decoration:none}
.file-row .fbtn:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.file-row .fbtn.del{color:var(--rec)}
.file-row .fbtn.del:hover{border-color:var(--rec);box-shadow:0 0 6px var(--rec)}
.files-empty{color:var(--muted);text-align:center;padding:40px 0;font-size:15px}
.badge{font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--amber)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(2,6,12,.8);display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modal-card{position:relative;max-width:560px;width:90%;border:1px solid var(--cyan);border-radius:12px;
  background:var(--panel);padding:26px;box-shadow:0 0 30px rgba(56,225,225,.25)}
.modal-card h2{font-family:"VT323",monospace;color:var(--cyan);margin-top:0;font-size:28px}
.modal-close{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--muted);
  font-size:18px;cursor:pointer}
.modal-close:hover{color:var(--cyan)}
.help-list{line-height:1.9;font-size:15px;padding-left:18px}
.help-list li{margin-bottom:12px}
.help-list .k{color:var(--cyan-soft)}
.help-list .sharp{color:var(--sharp)}
.help-list .flat{color:var(--flat)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .rail{position:static}
  .stage-top{grid-template-columns:1fr}
  .nav{flex-direction:row}
  .nav-item{flex:1;justify-content:center}
}
@media (max-width:560px){
  .key{width:40px;height:58px}
  .key .cap{font-size:16px}
  .kb-row.r2{margin-left:20px}.kb-row.r3{margin-left:40px}
  .logo{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}