/* [layout.css] source: Pro.html lines 135-260, 369-450, 451-539 (verbatim) */
body{
  font-family:'Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(124,108,255,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,217,255,.10), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  /* 主题跟随：用主题色重新派生环境光（不支持 color-mix 时沿用上面那行） */
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb,var(--acc2) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb,var(--acc) 12%, transparent), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  color:var(--txt); overflow:hidden;
}
button{font-family:inherit;color:inherit}
input,select{font-family:inherit;color:inherit}
/* 全局焦点环（键盘可达性） */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
::selection{background:rgba(0,217,255,.3)}
::selection{background:color-mix(in srgb,var(--acc) 34%, transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 顶栏 ---------- */
.topbar{
  height:56px;display:flex;align-items:center;gap:14px;padding:0 14px;
  background:linear-gradient(180deg,rgba(16,24,40,.92),rgba(11,16,29,.9));
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-1);position:relative;z-index:40;
}
.brand{display:flex;align-items:center;gap:9px;min-width:190px;cursor:pointer;user-select:none}
.logo{width:30px;height:30px;border-radius:var(--r-sm);background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px color-mix(in srgb,var(--acc) 45%, transparent);font-size:16px}
.brand b{font-size:15px;letter-spacing:.4px;white-space:nowrap}
.badge{font-size:9px;padding:2px 7px;border-radius:20px;background:linear-gradient(100deg,#ff7ac8,#ff6b81);
  color:#1a0b12;font-weight:800;letter-spacing:1px;box-shadow:0 0 12px rgba(255,107,129,.4)}
.sep{width:1px;height:26px;background:var(--line2);flex:none}

/* transport */
.transport{display:flex;align-items:center;gap:10px}
.playBtn{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--grad);box-shadow:0 4px 18px color-mix(in srgb,var(--acc) 40%, transparent);transition:all .15s cubic-bezier(.4,0,.2,1);flex:none}
.playBtn:hover{transform:scale(1.07);filter:brightness(1.15);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 18%, transparent),0 4px 18px color-mix(in srgb,var(--acc) 40%, transparent)}
.playBtn:active{transform:scale(.95)}
.playBtn.playing{animation:pulseGlow 1.6s ease-in-out infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 42%, transparent),0 4px 18px color-mix(in srgb,var(--acc) 35%, transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 0%, transparent),0 4px 26px color-mix(in srgb,var(--acc) 65%, transparent)}
}
.playBtn svg{width:19px;height:19px;fill:var(--on-acc)}
.posBox{min-width:78px;text-align:center}
.posMain{font:700 16px var(--mono);letter-spacing:1px;text-shadow:0 0 12px color-mix(in srgb,var(--acc) 40%, transparent)}
.posSub{font-size:9px;color:var(--dim);letter-spacing:2px;margin-top:1px}
.metroBtn{height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--card);
  color:var(--mut);cursor:pointer;font-size:12px;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;gap:6px;align-items:center}
.metroBtn:hover{transform:translateY(-1px);color:var(--txt);border-color:var(--acc)}
.metroBtn:active{transform:translateY(0) scale(.98)}
.metroBtn.on{border-color:color-mix(in srgb,var(--good) 60%, transparent);color:var(--good);
  box-shadow:0 0 12px color-mix(in srgb,var(--good) 25%, transparent);background:color-mix(in srgb,var(--good) 10%, transparent)}

.ctrls{display:flex;align-items:center;gap:16px;flex:1;flex-wrap:wrap;min-width:0}
.knobGrp{display:flex;flex-direction:column;gap:2px;min-width:0}
.knobTop{display:flex;align-items:baseline;gap:6px;font-size:10px;color:var(--mut);letter-spacing:1px}
.knobTop .v{font:600 12px var(--mono);color:var(--txt)}
.rangeW{position:relative;width:120px;height:18px;display:flex;align-items:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc2)) 0/var(--fill,50%) 100% no-repeat,var(--ctl-bg2);
  outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--acc);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 60%, transparent);transition:.1s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--acc)}
.numInp{width:52px;background:var(--bg0);border:1px solid var(--line2);border-radius:var(--r-xs);color:var(--txt);
  font:600 13px var(--mono);text-align:center;padding:4px 3px;transition:all .15s cubic-bezier(.4,0,.2,1)}
.numInp:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%, transparent)}
.stepsSel{height:30px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 6px;font-size:12px;cursor:pointer}
.stepsSel:focus{outline:none;border-color:var(--acc)}

.acts{display:flex;gap:8px;align-items:center;flex:none}
.btn{height:32px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--card);color:var(--txt);
  cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn:hover{border-color:var(--acc);color:var(--acc);box-shadow:0 0 10px color-mix(in srgb,var(--acc) 16%, transparent);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.acc{background:var(--grad);border:none;color:var(--on-acc);font-weight:700}
.btn.acc:hover{filter:brightness(1.18);color:var(--on-acc);box-shadow:0 4px 16px color-mix(in srgb,var(--acc) 45%, transparent)}
.btn.danger:hover{border-color:var(--bad);color:var(--bad);box-shadow:0 0 10px color-mix(in srgb,var(--bad) 18%, transparent)}
.btn.sm{height:27px;padding:0 9px;font-size:11.5px}
.btn.on{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 10%, transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.menuWrap{position:relative}
.menu{position:absolute;right:0;top:38px;min-width:210px;background:var(--ctl-bg);border:1px solid var(--line2);border-radius:var(--r);
  padding:6px;box-shadow:var(--shadow-2),var(--glow);z-index:100;display:none}
.menu.open{display:block;animation:pop .12s ease;
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mi{display:flex;gap:9px;align-items:center;width:100%;background:none;border:none;color:var(--txt);padding:8px 10px;
  border-radius:var(--r-xs);cursor:pointer;font-size:12.5px;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}
.mi:hover{background:var(--hover);transform:translateY(-1px)}
.mi:active{transform:translateY(0) scale(.98)}
.mi .ic{width:22px;text-align:center}
.mi small{color:var(--dim);margin-left:auto}

.vizBox{width:130px;height:40px;flex:none;display:flex;align-items:flex-end;gap:2px;padding:4px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--well)}
.vizBox canvas{width:100%;height:100%;display:block}

/* ---------- 布局 ---------- */
.wrap{height:calc(100% - 56px);display:flex;min-height:0}
.stage{flex:1;display:flex;flex-direction:column;min-width:0}
.side{width:352px;flex:none;border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,21,38,.6),rgba(11,16,29,.55));
  background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;min-height:0}
@media(max-width:1200px){.side{width:320px}.brand b{display:none}.vizBox{display:none}.knobGrp .rangeW{width:84px}}

.sideTabs{display:flex;gap:4px;padding:10px 10px 0;background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.stab{flex:1;height:36px;border-radius:var(--r-sm) var(--r-sm) 0 0;background:transparent;border:1px solid transparent;border-bottom:none;
  color:var(--mut);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s cubic-bezier(.4,0,.2,1)}
.stab:hover{color:var(--txt);transform:translateY(-1px)}
.stab:active{transform:translateY(0) scale(.98)}
.stab.on{background:var(--sel-bg);color:var(--txt);border-color:var(--line);box-shadow:inset 0 2px 0 var(--acc)}
.sideBody{flex:1;overflow-y:auto;padding:14px;background:var(--glass);border-top:1px solid var(--line);min-height:0;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.hidden{display:none!important}

/* ---------- 侧栏样式 ---------- */
.h2{font-size:12.5px;color:var(--mut);letter-spacing:1px;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.h2:first-child{margin-top:0}
.h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 11px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--card2);color:var(--mut);
  cursor:pointer;font-size:12px;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:6px}
.chip:hover{color:var(--txt);border-color:var(--acc);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.98)}
.chip.on{background:linear-gradient(100deg,color-mix(in srgb,var(--acc2) 25%, transparent),color-mix(in srgb,var(--acc) 22%, transparent));
  border-color:var(--acc);color:var(--on-txt);box-shadow:0 0 10px color-mix(in srgb,var(--acc) 15%, transparent)}
.chip .e{font-size:14px}
.chip small{opacity:.75}

.mood{display:grid;gap:9px;margin:4px 0 2px}
.moodRow{display:flex;align-items:center;gap:10px}
.moodRow label{width:44px;font-size:11px;color:var(--mut);flex:none}
.moodRow input{flex:1}
.moodRow .mv{font:600 11px var(--mono);color:var(--txt);width:34px;text-align:right;flex:none}

.field{display:flex;align-items:center;gap:8px;margin:7px 0}
.field>label{width:62px;font-size:11.5px;color:var(--mut);flex:none}
.sel{flex:1;height:31px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 8px;font-size:12.5px;cursor:pointer}
.sel:focus{outline:none;border-color:var(--acc)}
.seedRow{display:flex;gap:6px}
.seedRow input{flex:1}
.seedRow .btn{flex:none}

.aiMain{margin-top:12px}
.bigBtn{width:100%;height:48px;border-radius:var(--r);border:none;cursor:pointer;font-size:15px;font-weight:800;letter-spacing:2px;
  background:var(--grad);color:var(--on-acc);box-shadow:0 8px 26px color-mix(in srgb,var(--acc) 40%, transparent);transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:9px}
.bigBtn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.bigBtn:active{transform:translateY(0) scale(.99)}
.bigBtn.ghost{background:var(--card2);color:var(--txt);border:1px solid var(--line2);box-shadow:none;height:40px;font-size:13px}
.progress{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pbRow{display:flex;align-items:center;gap:9px}
.pbRow .lb{font-size:10.5px;color:var(--dim);width:88px;flex:none;letter-spacing:.3px}
.pb{flex:1;height:6px;border-radius:4px;background:var(--ctl-bg2);overflow:hidden}
.pb i{display:block;height:100%;width:0%;border-radius:4px;background:var(--grad);transition:width .25s ease;box-shadow:0 0 10px color-mix(in srgb,var(--acc) 60%, transparent)}
.pbRow .pct{font:600 10px var(--mono);color:var(--acc);width:34px;text-align:right}

.insBox{border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(180deg,color-mix(in srgb,var(--txt) 3%, transparent),transparent);
  background-color:var(--card);background-clip:padding-box;
  padding:10px;margin-bottom:10px;position:relative;box-shadow:var(--shadow-1),var(--glow)}
.insHead{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.insHead .tgIcon{width:26px;height:26px}
.insHead .tt{font-size:12px;color:var(--mut);flex:1}
.sliderLine{display:flex;align-items:center;gap:8px;margin:6px 0}
.sliderLine label{width:58px;font-size:11px;color:var(--mut);flex:none}
.sliderLine input{flex:1}
.sliderLine .v{font:600 10.5px var(--mono);color:var(--txt);width:44px;text-align:right;flex:none}
.dblRow{display:flex;gap:8px}
.dblRow>div{flex:1}
.noteRow{display:flex;align-items:center;gap:8px;margin:6px 0}
.noteRow label{width:58px;font-size:11px;color:var(--mut);flex:none}
.noteRow input{flex:1}
.rowBtns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.rowBtns .btn{flex:1}

.kitList{margin:6px 0}
.kitRow{display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px dashed var(--grid-line2)}
.kitRow .sw{width:16px;height:16px;border-radius:4px;flex:none}
.kitRow span{font-size:11.5px;color:var(--mut);flex:1}
.kitRow .test{height:22px;min-width:40px;font-size:10px;padding:0 8px}

/* ---------- 钢琴键盘 ---------- */
.pianoBar{height:104px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--piano),var(--piano2));
  display:flex;flex-direction:column;align-items:center;padding:6px 14px;gap:5px;flex:none;position:relative;z-index:20}
.pKeys{display:flex;height:70px;position:relative;gap:0;margin:0 auto;max-width:100%}
.wkey{width:var(--kw,30px);height:70px;background:linear-gradient(180deg,#f6f8ff,#c8d2e6);border:1px solid #93a4c4;border-radius:0 0 var(--r-xs) var(--r-xs);
  cursor:pointer;position:relative;transition:.06s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  font:700 9px var(--mono);color:#5b6d92;flex:none;user-select:none}
.wkey:hover{background:#fff}
.wkey.down{background:var(--grad);transform:translateY(2px)}
.bkey{position:absolute;width:calc(var(--kw,30px)*.62);height:44px;background:linear-gradient(180deg,#1c2742,#0a0f1e);border-radius:0 0 5px 5px;cursor:pointer;
  z-index:3;border:1px solid #000;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;
  font:700 8px var(--mono);color:#7fa3c9;user-select:none}
.bkey.down{background:linear-gradient(180deg,#7c6cff,#3aa0ff);transform:translateY(2px)}
.pinfo{display:flex;align-items:center;justify-content:center;gap:14px;font-size:10.5px;color:var(--dim)}
.pinfo kbd{background:var(--ctl-bg2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font:600 10px var(--mono);color:var(--mut)}

/* ---------- toast ---------- */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ctl-bg);border:1px solid var(--acc);border-radius:var(--r-sm);padding:9px 18px;font-size:12.5px;color:var(--txt);
  box-shadow:var(--shadow-3);display:flex;gap:9px;align-items:center;animation:toastIn .2s ease;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.toast.err{border-color:var(--bad)}
.toast.ok{border-color:var(--good)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.small{font-size:11px;color:var(--dim);line-height:1.8}
.kv{display:flex;justify-content:space-between;padding:2px 0;font-size:11.5px}
.kv b{font:600 11px var(--mono);color:var(--txt)}
.divider{height:1px;background:var(--line);margin:12px 0}

.genFlash{animation:flash .4s ease}
@keyframes flash{from{box-shadow:0 0 0 2px var(--acc3),0 0 30px color-mix(in srgb,var(--acc3) 40%, transparent)}to{box-shadow:0 0 0 0 transparent}}
.miniSel{height:26px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-xs);font-size:11.5px;padding:0 5px;color:var(--txt);cursor:pointer;font-family:inherit}
.miniSel:focus{outline:none;border-color:var(--acc)}
.miniLbl{font-size:10.5px;color:var(--dim);letter-spacing:1px;margin-left:8px}
.keyBar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bigNum{font:700 20px var(--mono);color:var(--acc);text-shadow:0 0 12px color-mix(in srgb,var(--acc) 40%, transparent)}
.ghostBtn{background:none;border:none;color:var(--mut);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:var(--r-xs);transition:all .15s cubic-bezier(.4,0,.2,1)}
.ghostBtn:hover{color:var(--txt);background:var(--hover)}
.tag-mini{font-size:9.5px;color:var(--dim);font-family:var(--mono)}
.helpLine{display:flex;gap:10px;font-size:11px;color:var(--dim);padding:3px 0;align-items:center}
.helpLine kbd{background:var(--ctl-bg2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:0 6px;font:600 10px var(--mono);color:var(--mut);min-width:20px;text-align:center;display:inline-block}
.aiChipRow{display:flex;gap:6px;margin:8px 0}
.modeNote{font-size:11px;color:var(--dim);background:color-mix(in srgb,var(--acc2) 8%, transparent);border:1px dashed color-mix(in srgb,var(--acc2) 35%, transparent);border-radius:var(--r-sm);padding:7px 9px;line-height:1.7}
/* ---- 播放进度条（可拖拽） ---- */
.seekBar{display:flex;align-items:center;gap:12px;padding:6px 16px 2px;position:relative;z-index:30}
.seekTrack{flex:1;height:22px;background:transparent;cursor:pointer;position:relative;touch-action:none}
.seekTrack::before{content:'';position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:var(--ctl-bg2);box-shadow:inset 0 0 0 1px var(--line2)}
.seekFill{position:absolute;left:0;top:9px;height:4px;border-radius:4px;width:0%;background:var(--grad);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 70%, transparent)}
.seekKnob{position:absolute;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--acc);box-shadow:0 0 10px color-mix(in srgb,var(--acc) 80%, transparent);left:0;margin-left:-8px;transform:none}
.seekKnob.drag{transform:scale(1.3)}
.seekLbl{font:600 11px var(--mono);color:var(--mut);min-width:96px;text-align:right;user-select:none;white-space:nowrap}
/* 时间线缩放（视图级，不改变曲长） */
.zoomGrp{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line2);border-radius:var(--r-sm);padding:2px 5px;background:var(--card)}
.zoomGrp button{width:22px;height:22px;padding:0;border-radius:var(--r-xs);border:1px solid transparent;background:transparent;color:var(--mut);cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1)}
.zoomGrp button:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%, transparent);transform:translateY(-1px)}
.zoomGrp button:active{transform:translateY(0) scale(.98)}
.zoomGrp .zv{font:600 11px var(--mono);color:var(--acc);min-width:38px;text-align:center;user-select:none}
.zoomGrp .fit{font-size:10px;color:var(--dim)}
.zoomGrp .fit:hover{color:var(--acc)}
.zoomGrp button.on{background:color-mix(in srgb,var(--acc) 14%, transparent);color:var(--acc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%, transparent)}
.zoomGrp button:disabled{opacity:.35;cursor:not-allowed}
.toolGrp{background:var(--card)}
.toolGrp button{font-size:12px;width:24px}
/* 区域选择（复制/粘贴）高亮：同样补高权重，保证拍线上也能看到选区 */
.pc.sel{box-shadow:inset 0 0 0 2px rgba(255,208,90,.95);background:rgba(255,208,90,.13);z-index:2}
.mel .pc.sel,.drum .pc.sel{background:rgba(255,208,90,.13)}
.pc.sel.on{box-shadow:inset 0 0 0 2px rgba(255,214,80,1), inset 0 0 8px rgba(255,208,90,.5)}
.pc.sel.playCol{outline:none}
/* 量化结果闪亮反馈 */
@keyframes qFlash{0%{box-shadow:inset 0 0 0 3px var(--good);background:color-mix(in srgb,var(--good) 40%, transparent);filter:brightness(1.6)}70%{box-shadow:inset 0 0 0 3px var(--good);background:color-mix(in srgb,var(--good) 26%, transparent)}100%{box-shadow:none}}
.pc.qflash{animation:qFlash 1.3s ease}
.qEst{font-size:10.5px;color:var(--good);white-space:nowrap;letter-spacing:.2px}
/* 节奏细分（精确时值音符）标记：按格内真实位置与实际时值画细条（跨格自动分段） */
.pc.tribar{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 30%, transparent)}
.pc.tribar::after{content:'';position:absolute;top:1px;height:3px;border-radius:2px;left:var(--tx,0%);width:var(--tw,0%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--good) 90%, transparent),color-mix(in srgb,var(--acc) 85%, transparent));
  box-shadow:0 0 5px color-mix(in srgb,var(--good) 70%, transparent);pointer-events:none}
.pc.tribar.on::after{top:2px}
/* 复制/粘贴按钮组 */
.clipGrp button{font-size:13px;width:26px}
.clipGrp .zv{min-width:0;max-width:150px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 侧栏快速返回顶部 / 键盘演奏辅助 */
.toStartBtn{height:32px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--card);color:var(--mut);
  cursor:pointer;font-size:11.5px;display:inline-flex;align-items:center;gap:5px;transition:all .15s cubic-bezier(.4,0,.2,1)}
.toStartBtn:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.toStartBtn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,.hchip:focus-visible,.stab:focus-visible,.playBtn:focus-visible,.toStartBtn:focus-visible,
.mi:focus-visible,.zoomGrp button:focus-visible,.chip:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ---------- 主题切换（顶栏圆形色板按钮 + 菜单） ---------- */
.themeBtn{width:32px;padding:0;justify-content:center;border-radius:50%;font-size:15px}
.themePanel{min-width:186px}
.themeMi{position:relative}
.themeMi.on{background:color-mix(in srgb,var(--acc) 16%, transparent);color:var(--txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%, transparent)}
.themeMi .tdot{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid var(--line2);box-shadow:0 0 6px rgba(0,0,0,.35)}
.tdot[data-k="studio"]{background:#00d9ff}
.tdot[data-k="midnight"]{background:#35e0ff}
.tdot[data-k="cyber"]{background:#00ffc3}
.tdot[data-k="sunrise"]{background:#ff9a3c}
.tdot[data-k="cream"]{background:#4a3fb0}
.tdot[data-k="forest"]{background:#6fdc8c}
/* 播放中呼吸光晕：靠 #stopIco 的内联 display 判断，避免改 JS */
.playBtn:has(#stopIco:not([style*="none"])){animation:pulseGlow 1.6s ease-in-out infinite}