:root{
  --bg:#0b0f16; --bg2:#111823; --bg3:#161f2c; --line:#243044;
  --fg:#e6edf7; --fg2:#93a4bd; --fg3:#61738d;
  --acc:#4c8dff; --acc2:#2f6bd8; --ok:#31c48d; --warn:#f5a524; --bad:#f05252;
  --r:8px; --tlh:170px; --tl-gut:168px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit}

/* ---------- 顶栏 ---------- */
.topbar{
  flex:0 0 auto; height:46px; display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:7px;font-weight:600;letter-spacing:.2px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.sep{width:1px;height:20px;background:var(--line)}
.btn{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
  padding:6px 12px; border-radius:var(--r); transition:.15s;
}
.btn:hover{background:#1d2939;border-color:#31415a}
.btn.ghost{background:transparent}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2)}
.btn.assist{
  background:linear-gradient(135deg,#7c5cff,#4c8dff);
  border-color:#7c5cff;color:#fff;font-weight:600;
  box-shadow:0 2px 14px rgba(124,92,255,.4);
}
.btn.assist:hover{filter:brightness(1.12)}
.btn.assist:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.mini.mob{display:none}            /* 手机端才显示的迷你按钮 */
.insp-hd-close{display:none}       /* 手机端检查器抽屉的关闭按钮 */
.badge{font-size:11px;color:var(--fg2);background:var(--bg3);border:1px solid var(--line);
  padding:3px 8px;border-radius:20px;white-space:nowrap}
.badge.ok{color:var(--ok);border-color:#1f5e46}
.badge.err{color:var(--bad);border-color:#5e2020}
.mini{
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;font-size:12px;line-height:1.5;
}
.mini:hover{background:#1d2939}
.mini.danger:hover{background:#3a1d1d;border-color:#5e2020;color:#ffb4b4}

/* ---------- 工作区 ---------- */
.workspace{flex:1 1 auto;display:flex;min-height:0;background:var(--bg)}
.panel{display:flex;flex-direction:column;background:var(--bg2);min-height:0;min-width:0}
.pool{flex:0 0 210px;border-right:1px solid var(--line)}
.inspector{flex:0 0 250px;border-left:1px solid var(--line)}
.panel-hd{
  flex:0 0 auto;height:34px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;border-bottom:1px solid var(--line);font-size:12px;color:var(--fg2);
  letter-spacing:.4px;text-transform:uppercase;
}
.pool-list{flex:1 1 auto;overflow-y:auto;padding:8px}
.empty{color:var(--fg3);text-align:center;padding:22px 10px;font-size:12px;line-height:1.9}

/* 素材卡片 */
.pitem{
  display:flex;gap:8px;align-items:center;padding:6px;border-radius:var(--r);
  border:1px solid transparent;cursor:grab;margin-bottom:4px;
}
.pitem:hover{background:var(--bg3);border-color:var(--line)}
.pitem:active{cursor:grabbing}
.pthumb{
  width:52px;height:32px;border-radius:4px;background:#000 center/cover no-repeat;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--fg3);
}
.pmeta{min-width:0;flex:1}
.pname{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psub{font-size:11px;color:var(--fg3)}

/* 预览台 */
.stage{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0}
.stage-inner{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  background:#05070b;min-height:0;position:relative;overflow:hidden;
}
#preview{max-width:100%;max-height:100%;display:block;background:#000}
.stage-hint{position:absolute;color:var(--fg3);font-size:13px;pointer-events:none}
.transport{
  flex:0 0 auto;height:40px;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:var(--bg2);border-top:1px solid var(--line);
}
.time{font-variant-numeric:tabular-nums;color:var(--fg2);font-size:12px}
.time b{color:var(--fg)}
.spacer{flex:1}
.mini-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg2)}
.mini-field input[type=range]{width:90px}

/* 检查器 */
.insp-body{flex:1 1 auto;overflow-y:auto;padding:10px}
.fgroup{margin-bottom:14px}
.flabel{font-size:11px;color:var(--fg3);margin-bottom:5px;letter-spacing:.3px}
.frow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.frow label{flex:0 0 66px;font-size:12px;color:var(--fg2)}
.input{
  background:var(--bg3);border:1px solid var(--line);color:var(--fg);
  border-radius:6px;padding:5px 8px;min-width:0;flex:1;width:100%;
}
.input:focus{outline:none;border-color:var(--acc)}
.row{display:flex;gap:8px;align-items:center}
.ta{height:74px;resize:vertical;font-family:inherit}
.sel{padding:5px 6px}
input[type=range]{accent-color:var(--acc);flex:1}
.fval{flex:0 0 46px;text-align:right;font-size:11px;color:var(--fg3);font-variant-numeric:tabular-nums}
/* ---------- 时间轴 ---------- */
.timeline{
  flex:0 0 auto;height:var(--tlh);display:flex;flex-direction:column;
  background:var(--bg2);border-top:1px solid var(--line);
}
.tl-head{flex:0 0 auto;height:26px;display:flex;border-bottom:1px solid var(--line)}
.tl-body{flex:1 1 auto;display:flex;min-height:0;position:relative}
.tl-gutter{flex:0 0 var(--tl-gut);width:var(--tl-gut);min-width:0;overflow:hidden;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:3}
.tl-head .tl-gutter{border-bottom:none}
.tl-scroll{flex:1 1 auto;overflow-x:auto;overflow-y:auto;position:relative}
.tl-content{position:relative;min-height:100%;will-change:transform}
.ruler{flex:1 1 auto;position:relative;overflow:hidden;height:100%}
.ruler .rl-track{position:absolute;top:0;left:0;height:100%;will-change:transform}
.ruler .tick{position:absolute;top:0;height:100%;border-left:1px solid var(--line);
  font-size:10px;color:var(--fg3);padding-left:4px;white-space:nowrap;line-height:26px}
.tl-foot{
  flex:0 0 auto;height:32px;display:flex;align-items:center;gap:8px;
  padding:0 10px;border-top:1px solid var(--line);background:var(--bg2);
}
.tl-foot .hint{font-size:11px;color:var(--fg3);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.track{display:flex;height:56px;border-bottom:1px solid #1a2433;position:relative}
.track.video{height:62px}
.track.audio{height:48px}
.trk-head{
  flex:0 0 auto;width:100%;min-width:0;display:flex;align-items:center;gap:6px;padding:0 8px;
  font-size:11px;color:var(--fg3);background:var(--bg2);border-right:1px solid var(--line);
  border-bottom:1px solid #1a2433;
  position:relative;z-index:4;
}
.trk-head .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-lane{position:relative;height:100%;min-width:100%}

/* 片段 */
.clip{
  position:absolute;top:4px;bottom:4px;background:linear-gradient(180deg,#2a3f5f,#223350);
  border:1px solid #3c5c8a;border-radius:6px;overflow:hidden;cursor:grab;
  display:flex;align-items:flex-start;min-width:6px;
}
.clip.audio{background:linear-gradient(180deg,#2a4f43,#1f3d34);border-color:#356b58}
.clip.image{background:linear-gradient(180deg,#4a3a5f,#382c48);border-color:#5f4a7a}
.clip.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 12px rgba(76,141,255,.35);z-index:2}
.clip.drop{opacity:.5}
.clip .cname{
  font-size:10px;color:#dce8fb;padding:2px 5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;width:100%;pointer-events:none;text-shadow:0 1px 2px #000a;
}
.clip .cwave{position:absolute;inset:16px 0 0 0;opacity:.55;pointer-events:none}
.clip .ch{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:3}
.clip .ch.l{left:0}.clip .ch.r{right:0}
.clip .ch:hover{background:rgba(76,141,255,.35)}
/* 触屏：片段拖动/裁切与标尺拖动由自己接管，不触发页面滚动 */
.clip,.clip .ch,.ruler{-webkit-touch-callout:none;touch-action:none}

.playhead{
  position:absolute;top:0;bottom:0;width:1px;background:var(--bad);z-index:5;
  pointer-events:none;left:0;
}
.playhead::before{
  content:'';position:absolute;top:0;left:-4px;width:9px;height:9px;
  background:var(--bad);border-radius:0 0 4px 4px;
}

/* ---------- 抽屉 ---------- */
.drawer{
  position:fixed;top:46px;right:0;bottom:0;width:min(560px,94vw);z-index:60;
  background:var(--bg2);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .22s ease;
  display:flex;flex-direction:column;box-shadow:-18px 0 46px #0009;
}
.drawer.open{transform:translateX(0)}
.drawer-hd{
  flex:0 0 auto;height:38px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--fg2);
}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}

.stock-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;
}
.scard{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg3);
  display:flex;flex-direction:column;
}
.scard .si{height:78px;background:#000 center/cover no-repeat;position:relative}
.scard .st{font-size:11px;padding:5px 6px;line-height:1.35;height:44px;overflow:hidden;color:var(--fg2)}
.scard .sa{padding:0 6px 6px;display:flex;gap:5px}
.scard .sa .mini{flex:1;text-align:center;font-size:11px;padding:3px 0}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--bg3);border:1px solid var(--line);border-radius:20px;
  padding:5px 11px;font-size:12px;color:var(--fg2);
}
.chip:hover{border-color:#31415a;color:var(--fg)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ai-out{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:10px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;
  word-break:break-word;min-height:120px;flex:1;-webkit-user-select:text;user-select:text;
}
.ai-out code{background:#0006;padding:1px 4px;border-radius:3px}

/* ---------- 提示 ---------- */
.toasts{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.toast{
  background:#1a2433;border:1px solid var(--line);border-radius:20px;
  padding:7px 16px;font-size:12.5px;box-shadow:0 8px 24px #0007;
  animation:tin .2s ease;
}
.toast.ok{border-color:#1f5e46;color:#9df0cd}
.toast.err{border-color:#5e2020;color:#ffb4b4}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .pool{flex-basis:150px}
  .inspector{flex-basis:200px}
  .brand{font-size:12px}
  .btn{padding:5px 9px;font-size:12px}
  .tl-foot .hint{display:none}
}

/* ===== 手机端（≤600px）：竖屏工作流 ===== */
@media (max-width:600px){
  html,body{height:100dvh}

  /* 顶栏：只留 导入 / AI帮剪 / 导出，其余入口挪进素材栏 */
  .topbar{height:48px;gap:6px;padding:0 8px;padding-top:env(safe-area-inset-top)}
  .brand{font-size:13px;white-space:nowrap}
  .brand .dot{display:none}
  .tb-actions{gap:6px}
  .tb-actions .sep,
  .tb-actions .badge,
  .tb-actions #btnStock,
  .tb-actions #btnAI,
  .tb-actions #btnAudio{display:none}
  .btn{padding:7px 10px;font-size:12.5px;border-radius:8px}
  .mini.mob{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:4px 8px}

  /* 素材池 → 顶部横向卡片条 */
  .workspace{flex-direction:column}
  .pool{flex:0 0 auto;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .pool .panel-hd{height:34px}
  .pool-list{
    display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
    padding:6px 8px 8px;-webkit-overflow-scrolling:touch;
  }
  .pitem{
    flex:0 0 128px;flex-direction:column;align-items:flex-start;gap:4px;
    padding:6px;border:1px solid var(--line);border-radius:8px;margin:0;
  }
  .pitem:active{transform:scale(.97)}
  .pthumb{width:100%;height:56px;font-size:18px}
  .pname{font-size:11.5px}
  .psub{font-size:10.5px}

  /* 预览台 */
  .stage-inner{min-height:0}
  .transport{height:auto;flex-wrap:wrap;padding:6px 8px;gap:6px}
  .transport .mini{min-height:32px;padding:4px 12px;font-size:13px}
  .mini-field{font-size:11.5px}
  .mini-field input[type=range]{width:70px}
  .time{font-size:12px}

  /* 时间轴 */
  .timeline{height:158px}
  .tl-foot{height:36px}
  .tl-foot .hint{display:none}
  .clip .cname{font-size:9.5px}
  .clip .ch{width:12px}
  .trk-head .mini{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center}

  /* 检查器 → 底部抽屉（选中片段自动弹出） */
  .inspector{
    position:fixed;left:0;right:0;top:auto;bottom:0;z-index:80;
    width:100%;height:480px;height:min(62dvh,480px);flex:0 0 auto;
    border-left:none;border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;
    box-shadow:0 -10px 40px #000a;
    transform:translateY(104%);transition:transform .26s ease;
  }
  .inspector.open{transform:translateY(0)}
  .inspector .insp-hd-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:13px}
  .insp-body{padding:10px 14px calc(env(safe-area-inset-bottom) + 16px)}
  .insp-body::before{
    content:'';display:block;width:36px;height:4px;border-radius:2px;
    background:#31415a;margin:2px auto 10px;
  }
  .frow label{flex-basis:56px;font-size:12px}
  .frow input[type=range]{min-height:30px}
  .fval{flex-basis:40px}

  /* 抽屉全屏化 */
  .drawer{top:0;width:100vw;width:100dvw;height:100dvh;max-height:100dvh;border-left:none}
  .drawer-hd{height:44px;padding-top:env(safe-area-inset-top)}
  .drawer-body{padding:12px 12px calc(env(safe-area-inset-bottom) + 18px)}
  .ai-out{min-height:90px;font-size:13px}
  .stock-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
  .scard .si{height:64px}
  .chips .chip{padding:7px 12px;font-size:12.5px}
  .input{font-size:14px}
  .ta{height:92px;font-size:14px}

  .toasts{bottom:calc(env(safe-area-inset-bottom) + 12px)}
}

/* 超窄屏：再挤一挤 */
@media (max-width:360px){
  .brand{display:none}
  .btn{padding:6px 8px;font-size:11.5px}
  .pitem{flex-basis:112px}
}


/* ---------- 剪映式增强：滤镜/转场 chips 与画布控制 ---------- */
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.fchip{
  border:1px solid var(--line);background:#131a24;color:var(--fg2);
  border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;
  line-height:1.4;transition:.12s;white-space:nowrap;
}
.fchip:hover{background:#1d2939;color:#e8eefc}
.fchip.on{background:rgba(76,141,255,.18);border-color:var(--acc);color:#cfe1ff}
.tlsep{width:1px;height:20px;background:var(--line);margin:0 3px;flex:0 0 auto}
.mini-sel{background:#131a24;color:#e8eefc;border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:12px}
input[type=color]{padding:0;cursor:pointer;background:none;border:1px solid var(--line);border-radius:6px;height:26px;width:40px}
.frow select.input.sel{flex:1}
.frow textarea.input.ta{flex:1;height:50px;min-height:50px}


/* ---------- 启动加载页 ---------- */
.boot{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1100px 560px at 50% -8%, #17263e 0%, #0b0f16 56%, #070a10 100%);
  transition:opacity .55s ease, visibility .55s ease;
}
.boot.done{opacity:0; visibility:hidden; pointer-events:none}
.boot-glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(76,141,255,.22), transparent 62%);
  filter:blur(12px); animation:bootPulse 3.2s ease-in-out infinite;
}
@keyframes bootPulse{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.07);opacity:1}}
.boot-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:34px 40px; text-align:center; max-width:92vw;
}
.boot-logo{position:relative; width:78px; height:78px; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.boot-logo svg{border-radius:16px; box-shadow:0 14px 44px rgba(0,0,0,.55)}
.boot-ring{
  position:absolute; inset:-9px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--acc);
  animation:bootSpin 1s linear infinite;
}
@keyframes bootSpin{to{transform:rotate(360deg)}}
.boot-title{margin:2px 0 0; font-size:21px; font-weight:700; letter-spacing:.6px}
.boot-sub{margin:0; color:var(--fg2); font-size:12.5px}
.boot-bar{
  width:min(340px,72vw); height:6px; border-radius:999px; background:#1a2432;
  overflow:hidden; margin-top:16px; box-shadow:inset 0 0 0 1px var(--line);
}
.boot-bar i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--acc2),var(--acc),#7c5cff);
  background-size:200% 100%; animation:bootFlow 1.6s linear infinite;
  transition:width .35s ease;
}
@keyframes bootFlow{0%{background-position:0 0}100%{background-position:200% 0}}
.boot-status{margin:12px 0 0; font-size:12.5px; color:var(--fg); min-height:18px}
.boot-tip{margin:0; font-size:11.5px; color:var(--fg3)}
.boot-actions{display:flex; gap:8px; margin-top:16px}
.boot.err .boot-bar i{background:var(--bad); animation:none}
.boot.err .boot-ring{border-top-color:var(--bad); animation:none}
.boot.err .boot-gl{opacity:.4}
.boot.err .boot-status{color:#ffb4b4}
@media (max-width:480px){
  .boot-card{padding:26px 20px}
  .boot-title{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  .boot-ring,.boot-glow,.boot-bar i{animation:none}
}


/* ============================================================
   UI 增强：分隔条 / 片段缩略图与波形 / 滚动条美化
   ============================================================ */
.splitter{flex:0 0 12px;background:var(--bg);position:relative;z-index:8;transition:background .15s;touch-action:none;user-select:none;-webkit-user-select:none}
.splitter::after{content:'';position:absolute;inset:0;margin:auto;background:var(--line);border-radius:3px}
.splitter.v{width:12px;cursor:col-resize}
.splitter.v::after{width:3px;top:6px;bottom:6px;height:auto}
.splitter.v::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:36px;border-radius:3px;background:radial-gradient(circle,var(--fg3) 1.2px,transparent 1.7px) center/3px 7px repeat-y;opacity:.8;pointer-events:none;z-index:1}
.splitter.h{height:12px;width:100%;cursor:row-resize;flex:0 0 12px;touch-action:none}
.splitter.h::after{height:3px;left:6px;right:6px;width:auto}
.splitter.h::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:3px;border-radius:3px;background:radial-gradient(circle,var(--fg3) 1.2px,transparent 1.7px) center/7px 3px repeat-x;opacity:.8;pointer-events:none;z-index:1}
.splitter:hover::before,.splitter.active::before{background-image:radial-gradient(circle,var(--acc) 1.2px,transparent 1.7px);opacity:1}
.splitter:hover,.splitter.active{background:rgba(76,141,255,.22)}
.splitter:hover::after,.splitter.active::after{background:var(--acc)}

.clip{cursor:grab}
.clip .cthumb{
  position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background-size:auto 100%;background-repeat:repeat-x;opacity:.5;
}
.clip.image .cthumb{opacity:.72}
.clip .cname{position:relative;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.clip .cwave{opacity:.85;z-index:1}
.clip.dragging{cursor:grabbing;opacity:.88;z-index:9;box-shadow:0 10px 30px #000b}
@media (min-width:601px){
  .clip .ch{width:11px}
}
.clip .ch::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:15px;border-radius:2px;background:#dbe8ff;opacity:.45;
}
.clip .ch:hover::after,.clip.dragging .ch::after{opacity:1;background:#fff}
.cliptip{
  position:fixed;z-index:99999;transform:translateX(-50%);
  background:#0e1521;border:1px solid var(--acc);color:#dbe8ff;
  font-size:11px;padding:3px 8px;border-radius:6px;pointer-events:none;
  white-space:nowrap;box-shadow:0 6px 18px #000b;
}
#preview{border:1px solid #18222f;box-shadow:0 12px 44px #0009;border-radius:2px}

/* 滚动条美化 */
*{scrollbar-width:thin;scrollbar-color:#2c3d56 transparent}
*::-webkit-scrollbar{width:11px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#26364d;border:3px solid transparent;border-radius:10px;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#3b5373;background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
.tl-scroll::-webkit-scrollbar-thumb{background:#3a4f6c;border:3px solid var(--bg2);background-clip:padding-box}
.tl-scroll::-webkit-scrollbar-thumb:hover{background:var(--acc);border:3px solid var(--bg2);background-clip:padding-box}

@media (max-width:600px){
  .splitter{display:none!important}
}

/* 轨道控制按钮 + 隐藏/锁定态 */
.trkbtn{padding:0 4px!important;font-size:11px;line-height:1;opacity:.55}
.trkbtn.on{opacity:1;background:var(--acc,#4c8dff);color:#fff;border-color:transparent}
.track.trk-hidden .clip{opacity:.35;filter:grayscale(.6)}
.track.trk-locked .clip{cursor:not-allowed}

/* ---------- 增强模式（AI 帮剪 · 登录用户可用） ---------- */
.enh-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;
  border:1px solid #2b3a52;border-radius:10px;background:linear-gradient(135deg,#101a2b,#0d1521)}
.enh-toggle{flex:0 0 auto;border:1px solid #2b3a52;background:#16223a;color:#cfe3ff;border-radius:8px;
  padding:7px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:all .18s ease}
.enh-toggle:hover{border-color:#3f7fd6}
.enh-toggle.on{border-color:#f0a24a;background:linear-gradient(135deg,#5a2f0d,#3a2209);color:#ffd9a8;
  box-shadow:inset 0 0 0 1px #f0a24a}
.enh-toggle.locked{opacity:.78}
.enh-tip{flex:1 1 160px;min-width:0;font-size:11.5px;color:#7f9dc4;line-height:1.35}
@media (max-width:600px){
  .enh-bar{padding:7px 9px;margin-bottom:8px}
  .enh-toggle{flex:1 1 100%;text-align:center;font-size:13px;padding:9px 10px}
  .enh-tip{flex:1 1 100%;font-size:11.5px}
}

/* ---------- 手机端修正：底部工具条换行不再横向溢出 · 时间轴更实用 ---------- */
@media (max-width:600px){
  .timeline{height:210px;min-height:170px}
  .tl-foot{
    height:46px;min-height:46px;flex-wrap:nowrap;align-items:center;
    gap:8px;padding:6px 8px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .tl-foot .mini,.tl-foot .btn{flex:0 0 auto;white-space:nowrap;font-size:12px;
    padding:6px 9px;border-radius:8px;min-height:30px}
  .tl-foot .mini-field{flex:0 0 auto;min-width:0;white-space:nowrap;font-size:11.5px}
  .tl-foot .mini-sel,.tl-foot select{font-size:12px;padding:4px 6px;max-width:120px}
  .tl-foot .tlsep{display:none}
  .tl-foot .hint{display:none}
  .tl-foot .mini-field:last-of-type{display:none}
  .trk-head{gap:4px;padding:0 6px}
  .trk-head .mini{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-size:13px}
  .tl-body{overflow:hidden}
}


/* ============================================================
   音频频谱
   ============================================================ */
.spec-box{position:relative;width:100%;flex:0 0 auto;background:#05080d;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.spec-map{display:block;width:100%;height:248px;cursor:crosshair;touch-action:none}
.spec-bars{display:block;width:100%;height:152px;background:#05080d;border:1px solid var(--line);border-radius:8px}
/* 抽屉里的块一律不参与压缩：否则 overflow:hidden 的 .spec-box 会被压扁，频谱下半部分被裁掉 */
#audioDrawer .drawer-body > *{flex:0 0 auto}
.spec-info{color:var(--fg3);font-weight:400}
.spec-note{font-size:11px;color:var(--fg3);line-height:1.6}
.spec-tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--fg2);margin-left:6px}
.spec-tag.live{border-color:var(--ok);color:#7ce0b4}
@media (max-width:600px){
  .spec-map{height:180px}
  .spec-bars{height:132px}
}

/* ---------- 🤖 全自动剪辑 Agent（增强模式） ---------- */
.chip.agent{background:linear-gradient(135deg,#1a2c4d,#16233b);border-color:#3a5c93;color:#dbeaff}
.chip.agent:hover{border-color:#5b8de0;color:#fff}
.chip.agent.on{background:linear-gradient(135deg,#2f6bd8,#4c8dff);border-color:#7fb0ff;color:#fff;
  box-shadow:inset 0 0 0 1px #7fb0ff}
.agent-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.agent-bar select.input.sel{flex:0 0 auto;max-width:210px;font-size:12.5px;padding:6px 8px}
.agent-bar .hint{flex:1 1 140px;min-width:0;font-size:11.5px;color:#7f9dc4;line-height:1.35}
.ai-out .alog{padding:3px 0;border-bottom:1px dashed #1e2a3c;font-size:12.5px;line-height:1.6;white-space:normal}
.ai-out .alog:last-child{border-bottom:0}
.ai-out .alog-hd{font-size:13.5px;font-weight:600;color:#dbeaff}
.ai-out .alog-dim{color:#7f9dc4;font-size:11.5px;line-height:1.5}
.ai-out .alog-step{color:#e6edf7}
.ai-out .alog-step b{color:#4c8dff;margin-right:4px}
.ai-out .alog-t{color:#7f9dc4;font-size:11.5px;margin-left:6px}
.ai-out .alog-res{color:#31c48d;font-size:11.5px}
.ai-out .alog-res.bad{color:#f5a524}
@media (max-width:600px){
  .agent-bar select.input.sel{flex:1 1 100%;max-width:none}
  .agent-bar .hint{flex:1 1 100%}
  .ai-out .alog{font-size:12px}
}

/* ---------- 🎤 人声 / 伴奏分离 ---------- */
#sepSel{flex:1 1 auto;min-width:0}
#sepOut{flex:0 0 150px}
#audioDrawer progress{width:100%;height:7px;border:0;border-radius:4px;background:#1b2434;
  -webkit-appearance:none;appearance:none;overflow:hidden}
#audioDrawer progress::-webkit-progress-bar{background:#1b2434;border-radius:4px}
#audioDrawer progress::-webkit-progress-value{background:linear-gradient(90deg,var(--acc),var(--ok));border-radius:4px}
#audioDrawer progress::-moz-progress-bar{background:var(--acc);border-radius:4px}
#sepInfo{flex:1 1 auto;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sepTag.live{border-color:var(--acc);color:#a9c9ff}
@media (max-width:600px){
  #sepSel,#sepOut{flex:1 1 100%}
}