/* 人声分离 · 页面样式 */
.scene-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene-grid .opt { min-height: 74px; }
.scene-mini { gap: 8px; }
.scene-mini .opt { padding: 9px 10px !important; gap: 9px !important; min-height: 0; }
.scene-mini .opt .ic { width: 30px; height: 30px; border-radius: 9px; }
.scene-mini .opt .ic svg { width: 16px; height: 16px; }
.scene-mini .o-title { font-size: 12.5px; }

.workspace.vs { grid-template-columns: minmax(0, 1fr) 380px; }
.main-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.listen-card { display: flex; flex-direction: column; gap: 12px; }
.grow-pill { flex: 1; padding: 6px 10px; }
.grow-pill .fp-ic { width: 32px; height: 32px; }
.prep { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); font-size: 13.5px; color: var(--text-2); }
.prep .spinner { width: 20px; height: 20px; flex: none; }
.prep .progress { flex: 1; max-width: 240px; margin-left: auto; }

.ab-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(213,179,121,.08), rgba(214,181,124,.06)); }
.ab-time { display: flex; align-items: baseline; gap: 4px; min-width: 86px; font-size: 14px; font-weight: 600; }
.ab-time .faint { font-size: 12px; font-weight: 400; }
.ab-seg { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.ab-seg::-webkit-scrollbar { display: none; }
.ab-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-2); padding: 6px 12px; border-radius: 9px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ab-seg button i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ab-seg button.on { background: var(--accent); color: #fff; box-shadow: var(--shadow-glow); }
.ab-seg button.on i { background: #fff !important; }
.ab-hint { margin: -4px 2px 0; font-size: 12px; }

.tracks { display: flex; flex-direction: column; gap: 10px; }
.track { padding: 10px 12px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); transition: border-color .15s, box-shadow .15s, background .15s; }
.track.active { border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent), 0 8px 26px color-mix(in srgb, var(--tc) 14%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 9%, transparent), transparent 70%), var(--card); }
.tk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tk-play { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--card-2); color: var(--tc); cursor: pointer; padding: 0; }
.tk-play svg { width: 13px; height: 13px; }
.track.active .tk-play { background: var(--tc); color: #fff; border-color: transparent; }
.tk-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tk-title b { font-size: 14px; font-weight: 650; }
.tk-title span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tk-dl { height: 32px; }
.track .wave { height: 56px; }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.videos:empty { display: none; }
.vid-card { border-radius: 14px; overflow: hidden; border: 1px solid rgba(52,211,153,.3); background: linear-gradient(135deg, rgba(52,211,153,.07), rgba(213,179,121,.06)); display: flex; flex-direction: column; }
.vid-card video { width: 100%; max-height: 46vh; background: #000; display: block; }
.vid-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.vid-info > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vid-info b { font-size: 13.5px; }
.vid-info span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-info .btn svg { width: 15px; height: 15px; }

.wide-side { gap: 12px; }
.tabs { padding: 4px; border-radius: 14px; background: var(--card-solid); position: sticky; top: 58px; z-index: 6; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; font-weight: 550; }
.tabs button svg { width: 16px; height: 16px; }
.switch-row.tight { padding: 4px 0; }
.switch-row.tight > span { display: flex; flex-direction: column; gap: 2px; }
.switch-row.tight b { font-weight: 600; font-size: 14px; }
.switch-row.tight small { font-size: 12px; }
.lbl-note { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.opt-desc { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.55; }
.loud-grid .opt { min-height: 0; padding: 10px 6px; }
.loud-grid .opt .o-sub { font-variant-numeric: tabular-nums; }
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; }
.panel .inline-row .seg button { padding: 6px 11px; }

.mini-drop { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--border-strong); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.mini-drop:hover, .mini-drop.drag { border-color: var(--accent-1); background: var(--accent-soft); }
.mini-drop input { display: none; }
.mini-drop .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--accent); color: #fff; box-shadow: var(--shadow-glow); }
.mini-drop .ic svg { width: 18px; height: 18px; }
.mini-drop .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-drop .tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-drop .tx small { font-size: 12px; }
#vProg { margin-top: 10px; }

@media (max-width: 1100px) {
  .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace.vs { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 960px) {
  .workspace.vs { grid-template-columns: minmax(0, 1fr); }
  .tabs { top: 62px; }
}
@media (max-width: 600px) {
  .scene-grid { grid-template-columns: minmax(0, 1fr); }
  .scene-grid .opt { min-height: 0; }
  .ab-bar { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .ab-seg { margin-left: 0; width: 100%; }
  .ab-seg button { flex: 1 0 auto; justify-content: center; padding: 7px 10px; }
  .hide-sm { display: none; }
  .tk-dl .lbl-txt { display: none; }
  .track { padding: 9px 10px 6px; }
  .track .wave { height: 48px; }
  .tabs button { font-size: 13px; }
  .panel .inline-row { flex-wrap: wrap; }
  .panel .inline-row .seg button { padding: 6px 9px; font-size: 13px; }
}