#voicePanel{display:none}
body.voice-mode #voicePanel{display:flex}
body.voice-mode #musicArea,body.voice-mode #fxPanel,body.voice-mode .music-only{display:none}
body.voice-mode #uiGenerator,body.fx-mode #uiGenerator{display:none}
.voice-panel{flex:1;min-height:0;overflow:auto;padding:8px;gap:8px;flex-direction:column}
.voice-header{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px;flex-shrink:0;min-width:0}
.voice-header .voice-toolbar{flex:0 1 540px;min-width:0}
.voice-header .voice-music-info{flex:1 1 520px;min-width:0}
.voice-muted{font-size:11px;color:var(--sub);line-height:1.5}
.voice-toolbar,.voice-actions,.voice-tools,.voice-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.voice-toolbar{padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:2px;align-items:end}
.voice-field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--sub)}
.voice-field input[type=text]{width:180px}
.voice-field input[type=number]{width:80px}
.voice-field select{max-width:180px}
.voice-music-info{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:2px}
.voice-music-info .voice-field input{width:72px;background:#252b34;color:#9ba4b2;border-color:#3d4552;opacity:1;cursor:not-allowed}
.voice-music-info #voiceScale{width:120px}
.voice-music-info>span{flex:1 0 100%}
.voice-range-notice{font-size:11px;color:#d1b78f;margin:0;line-height:1.6}
#voiceBacking[aria-pressed=true]{background:#283e40;color:#b5e6d9;border-color:#639c8e}
#voiceBacking[aria-pressed=false]{color:var(--sub)}
#voicePreview[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.voice-outside{position:absolute;top:0;right:0;bottom:0;background:repeating-linear-gradient(135deg,#b8a17c20 0 4px,#080c124d 4px 12px);pointer-events:none}
.voice-actions{margin-top:-2px}
#voiceApply{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}
.voice-lyrics{display:flex;gap:8px}
.voice-lyrics input{flex:1;min-width:80px;background:var(--panel);color:var(--txt)}
.voice-tools .voice-field{flex-direction:row;align-items:center}
.voice-tools .voice-muted{margin-left:auto}
.voice-editor{display:flex;flex:1 0 340px;min-height:340px;gap:12px;min-width:0}
.voice-roll-viewport{flex:1;overflow:auto;position:relative;background:#111a25;border:1px solid var(--line);border-radius:2px;min-width:0}
.voice-roll-canvas{position:relative;min-width:100%}
.voice-ruler{position:sticky;top:0;height:28px;background:#202d3f;z-index:5;border-bottom:1px solid #52647a}
.voice-ruler span{position:absolute;top:6px;border-left:1px solid #8192ab;padding-left:5px;font:11px var(--font-mono)}
.voice-piano{position:sticky;left:0;width:64px;z-index:4;background:#1b2939}
.voice-key{height:22px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;border-bottom:1px solid #455871;font:10px var(--font-mono);color:#c5d3e4}
.voice-key.black{background:#0a111b;color:#8093af;border-right:14px solid #1b2939;padding-right:4px}
.voice-roll{position:absolute;left:64px;top:28px;background-image:linear-gradient(to right,#58708888 1px,transparent 1px),linear-gradient(to right,#344a6155 1px,transparent 1px),linear-gradient(to bottom,#3b4d614a 1px,transparent 1px);background-size:var(--voice-beat) 100%,var(--voice-step) 100%,100% 22px;cursor:crosshair}
.voice-note{position:absolute;min-height:0;padding:0 7px;border:1px solid #b5a4fa;border-radius:3px;background:#6b5d9a;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:11px;line-height:16px;cursor:grab;touch-action:none;user-select:none}
.voice-note:hover{background:#8e78c4;border-color:#ddd3ff}
.voice-note.selected{background:#9b80d0;outline:1px solid #f0e7ff;outline-offset:1px;z-index:2}
.voice-note-resize{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:ew-resize;background:#fff3;border-left:1px solid #ffffff40}
.voice-inspector{flex:0 0 220px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.voice-inspector h3{font-size:13px;margin:0 0 4px}
.voice-inspector .voice-field{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;font-size:10px}
.voice-inspector .voice-field input,.voice-inspector .voice-field select{width:85px;min-width:0}
.voice-inspector .voice-field input[type=text]{width:90px}
.voice-cursor{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;z-index:3}
.voice-bottom{justify-content:space-between}
.voice-phrases{min-width:0;background:var(--panel);border:1px solid var(--line);padding:10px;border-radius:3px}
.voice-phrases h3{margin:0 0 8px;font-size:12px;color:var(--sub)}
.voice-phrase-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.voice-phrases{position:sticky;top:0;z-index:10;flex-shrink:0}
.voice-phrase-row{display:flex;align-items:stretch;gap:8px;min-width:0}
.voice-phrase-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.voice-phrase-heading h3{margin:0}
#voiceRestorePhrase{font-size:11px;padding:3px 7px}
.voice-phrase-card{position:relative;flex:0 0 170px;min-width:0}
.voice-phrase-card .voice-phrase-block{width:100%;height:100%;padding-right:32px}
.voice-phrase-delete{position:absolute;right:4px;top:4px;width:24px;height:24px;min-height:24px;padding:0;justify-content:center;background:transparent;border-color:transparent;color:var(--sub)}
.voice-phrase-delete:hover{color:#ffc1c7;background:#63313e;border-color:#b06c77}
.voice-phrase-delete:focus-visible{outline:2px solid #e4bbff;outline-offset:1px}
.voice-phrase-delete::before{width:14px;height:14px}
.voice-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px}
.voice-phrase-list{flex:0 1 auto;min-width:0}
#voiceNew{flex:0 0 44px;align-self:stretch;padding:0;justify-content:center;border-style:dashed}
#voiceNew::before{width:20px;height:20px}
.voice-phrase-block{cursor:grab;position:relative}
.voice-phrase-block.dragging{opacity:.45}
.voice-phrase-block.drop-before{box-shadow:inset 4px 0 #d8c4ff}
.voice-phrase-block.drop-after{box-shadow:inset -4px 0 #d8c4ff}
.voice-inspector-heading{display:flex;justify-content:space-between;align-items:center;gap:4px;grid-column:1/-1}
.voice-inspector-heading h3{margin:0}
#voiceGraphToggle{font-size:11px;padding:4px 7px}
.voice-panel{--voice-graph-color:#c4a1ff;--voice-graph-tint:#302740;--voice-graph-fill:#685480;--voice-graph-halo:#c4a1ff60}
.voice-panel[data-graph-param=velocity]{--voice-graph-color:#53d8cb;--voice-graph-tint:#193b3b;--voice-graph-fill:#26776f;--voice-graph-halo:#53d8cb60}
.voice-panel[data-graph-param=vibrato]{--voice-graph-color:#ffba66;--voice-graph-tint:#40301d;--voice-graph-fill:#8b602d;--voice-graph-halo:#ffba6660}
#voiceGraphToggle[aria-pressed=true]{background:var(--voice-graph-tint);border-color:var(--voice-graph-color);color:var(--voice-graph-color)}
.voice-inspector .voice-field.is-graph-source{color:var(--voice-graph-color)}
.voice-inspector .voice-field.is-graph-source input,.voice-inspector .voice-field.is-graph-source select{border-color:var(--voice-graph-color);background:var(--voice-graph-tint)}
.voice-roll-shell{flex:1;min-width:0;min-height:0;position:relative;display:flex}
.voice-graph{position:absolute;bottom:16px;left:65px;right:16px;height:154px;z-index:6;overflow:hidden;background:#101c2cee;border-top:1px solid var(--voice-graph-color);touch-action:none;user-select:none}
.voice-graph[hidden]{display:none}
.voice-graph-title{position:absolute;left:8px;top:6px;font-size:10px;color:var(--voice-graph-color);pointer-events:none}
.voice-graph svg{position:absolute;inset:0;width:100%;height:154px;pointer-events:none;overflow:hidden}
.voice-graph-grid{stroke:#8294ad40;stroke-width:1;fill:none}
.voice-graph-line{stroke:var(--voice-graph-color);stroke-width:2;fill:none}
.voice-graph-point{position:absolute;transform:translate(-50%,-50%);min-height:0;width:14px;height:14px;padding:0;border:2px solid var(--voice-graph-color);border-radius:50%;background:var(--voice-graph-fill);z-index:2;cursor:ns-resize;touch-action:none}
.voice-graph-point.selected,.voice-graph-point:focus-visible{background:#fff;border-color:var(--voice-graph-color);outline:2px solid var(--voice-graph-halo);outline-offset:3px}
.voice-graph-scale{position:absolute;right:5px;font:10px var(--font-mono);color:#a5b4c8;pointer-events:none}
.voice-graph-value{position:absolute;font:10px var(--font-mono);color:var(--voice-graph-color);background:#172033;padding:2px 4px;pointer-events:none;z-index:3}
.voice-graph-empty{position:absolute;top:60px;left:12px;font-size:11px;color:var(--sub)}
@media(max-width:620px){.voice-roll-shell{flex:none;height:360px}.voice-roll-shell .voice-roll-viewport{flex:1}.voice-graph{height:154px}.voice-inspector-heading{grid-column:1/-1}}
.voice-phrase-block{display:flex;flex:0 0 170px;min-width:0;flex-direction:column;align-items:flex-start;gap:5px;padding:10px;text-align:left;background:#252a35;border:1px solid #4b4d5d;color:var(--txt)}
.voice-phrase-block strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.voice-phrase-block span,.voice-phrase-block small{font-size:10px;color:var(--sub)}
.voice-phrase-block.active{background:#3b334e;border-color:#b49ce9;box-shadow:inset 0 -2px #b49ce9}
.voice-phrase-block:focus-visible{outline:2px solid #b49ce9;outline-offset:2px}
#voiceNew:disabled{background:#292d35;border-color:#434954;color:#9298a2;opacity:.55;cursor:not-allowed;box-shadow:none}
.voice-new-reason{margin:0;color:var(--sub);font-size:11px;line-height:1.6}
.vocal-track{border-left-color:#b49ce9!important}
.vocal-track .tname{color:#d5c1fc}
.vocal-track .thead .voice-field{flex-direction:row;align-items:center;font-size:10px}
.vocal-track .thead .voice-field input{width:52px}
.vocal-track .gridwrap{padding-top:9px;padding-bottom:9px}
.vocal-track .rowlabel{justify-content:center;font-size:11px;color:#b49ce9}
.vocal-timeline{display:flex;gap:4px;position:relative;flex:0 0 auto;height:76px;align-items:stretch}
.vocal-tick{flex:0 0 var(--pad-width,28px);width:var(--pad-width,28px);border-left:1px solid #45506855;background:#27304422}
.vocal-tick.gstart{margin-left:9px}.vocal-tick.barstart{margin-left:14px}
.vocal-clip{position:absolute;top:4px;bottom:4px;min-width:20px;overflow:hidden;justify-content:flex-start;align-items:flex-start;padding:6px 10px;background:#6e55934d;color:#e2cef9;border:1px solid #a18ac9;border-radius:2px;text-align:left;font-size:11px;white-space:nowrap}
.vocal-clip:hover{background:#75569380}
.vocal-clip svg{position:absolute;left:5px;right:5px;bottom:3px;width:calc(100% - 10px);height:38px;fill:#d1b4f7;opacity:.7;pointer-events:none}
.vocal-timeline>button:not(.vocal-clip){position:absolute;left:8px;top:18px;white-space:nowrap;color:#d3bcec}
.vocal-track.is-collapsed .vocal-timeline{height:38px}
.vocal-track.is-collapsed .vocal-clip svg{display:none}
.fx-saved-play{flex:0 0 30px;width:30px;min-width:30px;padding:0;align-self:flex-start;color:var(--accent)}
.fx-saved-play::before{content:'';width:14px;height:14px;display:block;background:currentColor;mask:url('icons/play.svg') center/contain no-repeat;margin:auto}
@media(max-width:900px){.voice-panel{min-height:75vh}.voice-editor{flex-basis:430px}.voice-inspector{flex-basis:190px}}
@media(max-width:620px){.voice-panel{padding:10px}.voice-editor{flex-direction:column;flex-basis:auto;max-height:none}.voice-roll-viewport{min-height:360px;max-height:360px;flex:none}.voice-inspector{flex:none;display:grid;grid-template-columns:1fr 1fr}.voice-inspector h3,.voice-inspector>p{grid-column:1/-1}.voice-inspector .voice-field{flex-direction:column;align-items:stretch}.voice-toolbar{gap:8px}.voice-field input[type=text]{width:155px}.voice-tools .voice-muted{margin:0}.modeswitch button,.modeswitch button:first-child,.modeswitch button:last-child{min-width:52px}.modeswitch #btnVoice::before{display:none}}
