/* styles.css — Rhythm Engine v2 */
:root{--bg:#0d0d0d;--bg2:#1a1a1a;--bg3:#222;--bg4:#2a2a2a;--border:#333;--border2:#444;
--accent:#a855f7;--accent2:#7c3aed;--accent3:#c084fc;
--red:#ef4444;--green:#22c55e;--yellow:#eab308;--blue:#3b82f6;--cyan:#06b6d4;
--text:#e5e7eb;--text2:#9ca3af;--text3:#6b7280;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body,#root{height:100vh;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,sans-serif;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
#root{display:flex;flex-direction:column;}
/* Header */
.hdr{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 12px;display:flex;align-items:center;gap:10px;height:46px;flex-shrink:0;}
.logo{font-size:14px;font-weight:800;color:var(--accent);white-space:nowrap;}
.tabs{display:flex;gap:2px;flex:1;overflow-x:auto;}
.tab{cursor:pointer;padding:5px 12px;border-radius:5px;font-size:12px;color:var(--text2);border:none;background:transparent;font-weight:600;white-space:nowrap;transition:all .15s;}
.tab:hover{background:var(--bg4);color:var(--text);}
.tab.on{background:var(--accent);color:#fff;}
.hdr-r{display:flex;gap:6px;align-items:center;flex-shrink:0;}
/* Transport */
.tpt{background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 12px;height:52px;flex-shrink:0;overflow-x:auto;}
.tbtn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-size:13px;transition:all .15s;flex-shrink:0;}
.tbtn:active{transform:scale(.88);}
.play-btn{background:var(--green);color:#000;}
.stop-btn{background:var(--bg4);color:var(--text2);border:1px solid var(--border);}
.rec-btn{background:var(--red);color:#fff;}
.loop-btn{background:var(--bg4);color:var(--text2);border:1px solid var(--border);}
.loop-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.tdiv{width:1px;height:28px;background:var(--border);flex-shrink:0;}
.bpm-c{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.bpm-l{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;}
.bpm-v{font-size:20px;font-weight:800;color:var(--accent);min-width:52px;font-variant-numeric:tabular-nums;}
.bpm-as{display:flex;flex-direction:column;gap:2px;}
.bpm-a{background:var(--bg4);border:1px solid var(--border);color:var(--text2);width:18px;height:13px;cursor:pointer;font-size:7px;display:flex;align-items:center;justify-content:center;border-radius:2px;}
.bpm-a:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.sdots{display:flex;gap:2px;}
.sd{width:7px;height:7px;border-radius:50%;background:var(--bg4);border:1px solid var(--border);transition:background .05s;}
.sd.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 5px var(--accent);}
.tstat{font-size:11px;font-weight:700;flex-shrink:0;}
.tstat.pl{color:var(--green);}
.tstat.rc{color:var(--red);}
.tstat.st{color:var(--text3);}
/* Common */
.panel{flex:1;overflow-y:auto;overflow-x:hidden;}
.btn{cursor:pointer;border:none;border-radius:5px;font-size:11px;font-weight:700;padding:5px 10px;transition:all .15s;user-select:none;display:inline-flex;align-items:center;gap:4px;}
.btn:active{transform:scale(.94);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.bp{background:var(--accent);color:#fff;}
.bp:hover:not(:disabled){background:var(--accent2);}
.bg{background:transparent;color:var(--text2);border:1px solid var(--border);}
.bg:hover:not(:disabled){background:var(--bg4);color:var(--text);}
/* Pads */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;}
.pad{border-radius:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;aspect-ratio:1;border:2px solid transparent;transition:all .07s;user-select:none;position:relative;overflow:hidden;}
.pad:hover{filter:brightness(1.25);}
.pad.hit{filter:brightness(1.9);transform:scale(.93);}
.pad.muted{opacity:.38;}
.pname{font-size:10px;font-weight:800;color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.8);}
.psub{font-size:9px;color:rgba(255,255,255,.55);}
.pdot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);}
.pdot.seq{background:#fff;box-shadow:0 0 5px #fff;}
/* Sequencer */
.sqwrap{padding:10px 12px;overflow-y:auto;}
.sq-hdr{display:flex;align-items:center;gap:5px;margin-bottom:10px;}
.sq-row{display:flex;align-items:center;gap:5px;margin-bottom:5px;}
.sq-lbl{width:64px;font-size:10px;font-weight:700;color:var(--text2);text-align:right;padding-right:6px;flex-shrink:0;}
.sq-steps{display:flex;gap:2px;flex:1;}
.sq-s{flex:1;height:28px;border-radius:3px;cursor:pointer;border:1px solid var(--border);background:var(--bg4);transition:all .07s;}
.sq-s:hover{border-color:var(--text3);}
.sq-s.on{border-color:transparent;}
.sq-s.cur{border:2px solid rgba(255,255,255,.5)!important;}
.sq-rc{display:flex;gap:3px;flex-shrink:0;}
.sq-mb{width:22px;height:22px;border-radius:3px;border:1px solid var(--border);background:var(--bg4);color:var(--text2);cursor:pointer;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.sq-mb:hover,.sq-mb.on{background:var(--red);color:#fff;border-color:var(--red);}
.bmarks{display:flex;gap:2px;flex:1;}
.bm{flex:1;text-align:center;font-size:8px;color:var(--text3);}
.bm.beat{color:var(--accent);font-weight:700;}
/* Mixer */
.mix-wrap{display:flex;gap:5px;padding:12px;overflow-x:auto;height:100%;}
.mix-ch{width:66px;flex-shrink:0;background:var(--bg3);border:1px solid var(--border);border-radius:7px;display:flex;flex-direction:column;align-items:center;padding:8px 5px;gap:5px;}
.mix-ch.master{width:74px;border-color:var(--accent);}
.mix-name{font-size:9px;font-weight:800;color:var(--text2);text-align:center;}
.mix-name.m{color:var(--accent);}
.vu-meter{display:flex;gap:1px;height:48px;align-items:flex-end;}
.vu-bar{width:3px;border-radius:1px 1px 0 0;transition:height .05s;}
.fader-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-5px;}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--bg4);border-radius:2px;}
input[type=range].vert{writing-mode:vertical-lr;direction:rtl;width:5px;height:100px;}
input[type=range].vert::-webkit-slider-thumb{width:16px;height:7px;border-radius:2px;margin-top:0;margin-left:-6px;}
.mix-lbl{font-size:8px;color:var(--text3);}
.mix-btns{display:flex;gap:2px;}
.mix-m,.mix-s{width:30px;height:18px;border-radius:3px;border:1px solid var(--border);background:var(--bg4);color:var(--text2);cursor:pointer;font-size:8px;font-weight:800;}
.mix-m.on{background:var(--yellow);color:#000;border-color:var(--yellow);}
.mix-s.on{background:var(--green);color:#000;border-color:var(--green);}
/* MIDI */
.mid-wrap{padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.mid-sec{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px;}
.mid-tit{font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;justify-content:space-between;}
.mid-note{font-size:10px;color:var(--text3);line-height:1.6;margin-top:4px;}
.mid-dev{display:flex;align-items:center;gap:8px;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 12px;margin-bottom:6px;}
.mid-dev.conn{border-color:var(--green);}
.mid-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0;}
.mid-dot.on{background:var(--green);box-shadow:0 0 5px var(--green);}
.cc-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.cc-lbl{width:88px;font-size:10px;color:var(--text2);}
.cc-val{width:28px;font-size:10px;color:var(--accent);text-align:right;font-weight:700;}
.mid-log{font-family:monospace;font-size:10px;color:var(--cyan);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:6px 8px;height:80px;overflow-y:auto;line-height:1.6;}
.key-w{background:#f0ede8;border:1px solid #888;border-top:none;border-radius:0 0 4px 4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:7px;color:#888;flex-shrink:0;transition:background .07s;position:absolute;}
.key-w:hover,.key-w.a{background:#d4b5f5;}
.key-b{background:#111;border:1px solid #000;border-top:none;border-radius:0 0 3px 3px;cursor:pointer;position:absolute;transition:background .07s;}
.key-b:hover,.key-b.a{background:#7c3aed;}
/* AI Studio */
.ai-wrap{padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.ai-sec{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px;}
.ai-tit{font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;justify-content:space-between;}
.ai-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;background:var(--bg4);border:1px solid var(--border);color:var(--text3);}
.ai-badge.done{background:#3b0764;border-color:var(--accent);color:var(--accent3);}
.ai-badge.run{background:#1e3a5f;border-color:var(--blue);color:#93c5fd;}
.ai-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;flex-wrap:wrap;}
.ai-f{display:flex;flex-direction:column;gap:3px;flex:1;min-width:120px;}
.ai-f label{font-size:10px;color:var(--text3);}
.ai-i{background:var(--bg4);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:4px;font-size:11px;width:100%;}
.ai-i:focus{outline:none;border-color:var(--accent);}
.ai-ta{background:var(--bg4);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;font-size:11px;width:100%;min-height:80px;resize:vertical;line-height:1.5;}
.ai-ta:focus{outline:none;border-color:var(--accent);}
.ai-s{background:var(--bg4);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:4px;font-size:11px;width:100%;}
.ai-s:focus{outline:none;border-color:var(--accent);}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.syl-grid{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:8px;line-height:1.8;}
.syl{padding:2px 5px;border-radius:3px;font-size:10px;cursor:pointer;border:1px solid transparent;transition:all .1s;}
.syl:hover{border-color:var(--accent);}
.syl.st{background:var(--accent);color:#fff;}
.syl.un{background:var(--bg4);color:var(--text2);}
.a-player{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.a-player audio{flex:1;min-width:200px;height:28px;}
.flow-row{display:flex;gap:2px;margin-bottom:3px;align-items:center;}
.flow-bar-lbl{width:40px;font-size:9px;color:var(--text3);text-align:right;padding-right:5px;flex-shrink:0;}
.fcell{width:30px;height:30px;border-radius:3px;border:1px solid var(--border);background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;transition:all .1s;flex-shrink:0;}
.fcell:hover{border-color:var(--accent3);}
.fcell.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.fcell.bt{border-color:var(--accent3);}
.flow-info{font-size:10px;color:var(--text3);margin-bottom:8px;line-height:1.5;}
.melody-viz{display:flex;gap:3px;align-items:flex-end;height:56px;background:var(--bg);padding:4px 6px;border-radius:4px;}
.mel-bar{flex:1;border-radius:2px;transition:height .2s;}
.pipe-steps{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;align-items:center;}
.pst{display:flex;align-items:center;gap:4px;background:var(--bg4);border:1px solid var(--border);border-radius:5px;padding:4px 9px;font-size:11px;color:var(--text2);}
.pst.run{border-color:var(--blue);color:#93c5fd;background:#1e3a5f;}
.pst.dn{border-color:var(--green);color:var(--green);background:#052e16;}
.parr{color:var(--text3);font-size:10px;}
.prog-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;margin-bottom:6px;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:2px;transition:width .3s;}
.pipe-detail{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);}
.pipe-num{width:26px;height:26px;border-radius:4px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.pipe-step-nm{font-size:11px;font-weight:700;color:var(--text);}
.pipe-model{font-size:10px;color:var(--accent);font-weight:400;}
.pipe-step-ds{font-size:10px;color:var(--text3);margin-top:1px;}
.model-note{font-size:11px;color:var(--text3);margin-bottom:10px;line-height:1.6;}
.model-card{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:10px;display:flex;gap:10px;margin-bottom:6px;}
.model-ico{font-size:20px;width:30px;text-align:center;flex-shrink:0;}
.model-info{flex:1;}
.model-nm{font-size:12px;font-weight:700;color:var(--text);}
.model-ds{font-size:10px;color:var(--text3);margin-top:2px;line-height:1.5;}
.model-st{font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;margin-top:4px;display:inline-block;}
.model-st.api{background:#1d4ed8;color:#93c5fd;}
.model-st.gpu{background:#4c1d95;color:var(--accent3);}
.model-st.cpu{background:#14532d;color:var(--green);}
.hive-map{font-size:11px;color:var(--text3);line-height:2;}
.hive-row{padding:2px 0;}
.hive-row:last-child{color:var(--accent);}
/* VST */
.vst-wrap{padding:12px;overflow-y:auto;}
.vst-header{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:12px;}
.vst-slot{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:10px 14px;margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.vst-slot.loaded{border-color:var(--accent);}
.vst-num{width:24px;height:24px;border-radius:4px;background:var(--bg4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text3);flex-shrink:0;}
.vst-slot.loaded .vst-num{background:var(--accent);color:#fff;border-color:var(--accent);}
.vst-info{flex:1;}
.vst-nm{font-size:12px;font-weight:700;color:var(--text);}
.vst-tp{font-size:10px;color:var(--text3);}
.vst-params{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.vst-param{display:flex;flex-direction:column;align-items:center;gap:2px;}
.vst-plbl{font-size:8px;color:var(--text3);text-transform:uppercase;}
.vst-pval{font-size:9px;color:var(--text2);}
.vst-actions{display:flex;gap:5px;flex-shrink:0;}
.vst-note{font-size:10px;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:10px;margin-top:8px;line-height:1.6;}
/* Status bar */
.sbar{background:var(--bg2);border-top:1px solid var(--border);height:22px;display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0;}
.si{font-size:10px;color:var(--text3);}
.si.ok{color:var(--green);}
.si.err{color:var(--red);}
.ssep{color:var(--border);}
/* Toast */
.toast{position:fixed;bottom:28px;right:16px;background:var(--bg4);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:7px;font-size:12px;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.6);animation:fu .2s ease;}
.toast.ok{border-color:var(--green);}
.toast.err{border-color:var(--red);}
@keyframes fu{from{transform:translateY(12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
/* Wallet badge */
.wbadge{background:var(--bg4);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:10px;color:var(--text2);display:flex;align-items:center;gap:5px;}
.wbadge .cr{color:var(--accent);font-weight:800;}
/* Spinner */
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}