:root{--bg:#0a0a12;--mag:#ff2bd6;--cy:#00f0ff;--lime:#b6ff00;--panel:#12121f;--line:#2a2a44;--tx:#e6e6ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'IBM Plex Mono',monospace;font-size:14px;
background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 3px 4px),radial-gradient(circle at 20% 0%,rgba(255,43,214,.15),transparent 50%),radial-gradient(circle at 90% 30%,rgba(0,240,255,.12),transparent 50%)}
header{text-align:center;padding:24px 12px 8px;position:relative}
h1{font-family:'Rubik Glitch',cursive;font-size:clamp(28px,6vw,64px);margin:0;letter-spacing:2px;text-shadow:3px 0 var(--mag),-3px 0 var(--cy);animation:jit 3s infinite}
@keyframes jit{0%,92%,100%{transform:none}93%{transform:translate(3px,-1px) skewX(8deg)}95%{transform:translate(-4px,1px)}}
.tag{font-family:'VT323',monospace;font-size:20px;color:var(--lime);margin:4px 0}
#scanning{position:absolute;top:10px;left:12px;font-family:'VT323';font-size:18px;color:var(--mag)}
#scanning.beat{color:var(--lime);text-shadow:0 0 10px var(--lime)}
#auth-status{position:absolute;top:10px;right:12px;font-size:12px}
#auth-status a,#auth-status button{color:var(--cy)}
main{max-width:1300px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:14px}
.stage canvas{width:100%;aspect-ratio:16/9;background:#000;border:2px solid var(--cy);box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--mag),0 0 40px rgba(0,240,255,.3);display:block}
.stagebar{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.panels{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:14px}
@media(max-width:900px){.panels{grid-template-columns:1fr}}
.panel{background:var(--panel);border:2px solid var(--line);padding:14px;position:relative}
.panel h2{font-family:'VT323';font-weight:400;font-size:24px;margin:0 0 10px;color:var(--cy);letter-spacing:1px}
label{display:block;margin:8px 0;font-size:12px;text-transform:uppercase}
label span{color:var(--lime)}
input[type=range]{width:100%;accent-color:var(--mag)}
input[type=number],#scanname{background:#000;color:var(--tx);border:1px solid var(--line);padding:6px;font-family:inherit}
button{background:#1c1c33;color:var(--tx);border:2px solid var(--line);padding:7px 10px;font-family:'IBM Plex Mono';font-weight:700;cursor:pointer;transition:transform .05s}
button:hover{border-color:var(--cy);color:var(--cy);text-shadow:1px 0 var(--mag)}
button:active{transform:scale(.94,.88)}
button.on{background:var(--mag);color:#000;border-color:var(--mag)}
.big{font-size:16px;padding:10px 18px}
.hot{background:var(--mag);color:#000;border-color:var(--mag)}
#drop{border:2px dashed var(--mag);padding:18px;text-align:center;cursor:pointer;font-size:13px}
#drop.over{background:rgba(255,43,214,.15)}
#srcname{margin:8px 0;color:var(--lime);font-size:12px;word-break:break-all}
#wave{width:100%;height:60px;background:#000;border:1px solid var(--line)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row label{flex:1;min-width:120px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.presets button{font-size:11px;padding:5px 8px}
#roll{display:grid;grid-template-columns:34px repeat(16,1fr);gap:1px;background:var(--line);border:1px solid var(--line);user-select:none;overflow-x:auto}
#roll div{height:12px;background:#0d0d18;font-size:9px;line-height:12px;color:#777}
#roll .k{background:#181828;text-align:right;padding-right:3px}
#roll .k.blk{background:#08080f}
#roll .c{cursor:pointer}
#roll .c.beat4{background:#141424}
#roll .c.on{background:var(--mag);box-shadow:0 0 6px var(--mag)}
#roll .c.cur{outline:1px solid var(--lime)}
#roll .c.cur.on{background:var(--lime)}
.hint{font-size:11px;color:#889}
.gridsel{display:flex;gap:6px;margin-bottom:8px}
#fxlist label{display:flex;gap:8px;align-items:center;text-transform:none;font-size:13px;margin:5px 0}
#fxlist input{accent-color:var(--lime)}
#prog{height:10px;background:#000;border:1px solid var(--line);margin-top:10px}
#progbar{height:100%;width:0;background:linear-gradient(90deg,var(--mag),var(--cy));transition:width .2s}
#status{font-family:'VT323';font-size:18px;color:var(--lime);margin-top:6px}
#gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.gcard{border:1px solid var(--line);padding:8px;background:#0d0d18}
.gcard b{color:var(--cy)}
.gcard small{display:block;color:#889;margin:4px 0}
footer{text-align:center;padding:24px;font-size:12px;color:#889}
footer a{color:var(--mag)}
#refresh{padding:0 6px;font-size:14px}