/* ============================================================
   口播提词器 · 单文件版
   上：提词器（可调速/调字号/镜像/拖动分割线）
   下：摄像头预览 + 录制控制
   核心：暂停/继续 = 提词器滚动 + 录像 同步暂停/继续
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  height:100%;margin:0;overflow:hidden;background:#000;color:#eaeef2;
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:#000}
#prompter{position:relative;order:1;flex:0 0 auto;height:46%;overflow:hidden;background:#0b0d10}
#scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;z-index:1}
#scroll::-webkit-scrollbar{display:none}
#text{margin:0;padding:0 20px;font-size:var(--fs,34px);line-height:1.75;font-weight:600;letter-spacing:.02em;color:#f4f7fa;white-space:pre-wrap;word-break:break-word;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#text.mirror{transform:scaleX(-1)}
#guide{position:absolute;left:0;right:0;top:28%;height:calc(var(--fs,34px) * 1.75);border-top:2px solid rgba(255,180,60,.9);border-bottom:2px solid rgba(255,180,60,.9);background:linear-gradient(90deg,rgba(255,180,60,.12),rgba(255,180,60,.02));pointer-events:none;z-index:2}
#prompter .fade{position:absolute;left:0;right:0;height:56px;pointer-events:none;z-index:3}
#prompter .fade.top{top:0;background:linear-gradient(#0b0d10,rgba(11,13,16,0))}
#prompter .fade.bottom{bottom:0;background:linear-gradient(rgba(11,13,16,0),#0b0d10)}
#bar{position:relative;z-index:20;flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(12,14,18,.96);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid rgba(255,255,255,.09)}
.ic{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#c9d3de;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:46px;height:47px;border-radius:12px;cursor:pointer;font-family:inherit;padding:0;transition:background .12s,color .12s,opacity .12s}
.ic svg{width:19px;height:19px;display:block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic span{font-size:9.5px;line-height:1;font-weight:600;opacity:.8}
.ic:active{background:rgba(255,255,255,.13)}
.ic.on{color:#ffb43c}
.ic.on span{opacity:1}
.ic[disabled]{opacity:.3;pointer-events:none}
#bar .spacer{flex:1 1 auto;min-width:2px}
.rec{appearance:none;-webkit-appearance:none;flex:0 0 auto;cursor:pointer;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,59,48,.14);border:2px solid #ff3b30;color:#ff5b52;transition:transform .1s,background .12s,border-color .12s,color .12s}
.rec svg{width:24px;height:24px;fill:currentColor;stroke:none}
.rec:active{transform:scale(.92)}
.rec[disabled]{opacity:.4;border-color:#5a6472;background:rgba(255,255,255,.06);color:#8b98a5;pointer-events:none}
.rec.go{border-color:#2ec26b;background:rgba(46,194,107,.14);color:#2ec26b}
#pop{position:fixed;z-index:60;left:8px;right:8px;max-width:420px;margin:0 auto;display:none;padding:12px 14px;border-radius:16px;background:#161b23;border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 40px rgba(0,0,0,.62)}
#pop.open{display:block}
.popHead{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.popHead b{font-size:13.5px}
.popHead .num{margin-left:auto;font-size:16px;font-weight:800;color:#ffd79a;font-variant-numeric:tabular-nums}
#popRange{width:100%;height:34px;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
#popRange::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:rgba(255,255,255,.16)}
#popRange::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:#ffb43c;border:3px solid #161b23;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#popRange::-moz-range-track{height:6px;border-radius:4px;background:rgba(255,255,255,.16)}
#popRange::-moz-range-thumb{width:22px;height:22px;border:3px solid #161b23;border-radius:50%;background:#ffb43c}
.popFoot{display:flex;align-items:center;gap:8px;margin-top:4px}
.popFoot .hint{flex:1 1 auto;text-align:center}
.rows{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:2px 0}
.row{appearance:none;-webkit-appearance:none;border:0;width:100%;cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:12px;background:#12161d;color:#eaeef2;font:600 14px/1.2 inherit;font-family:inherit}
.row:active{background:#1c222c}
.row svg{width:20px;height:20px;flex:0 0 auto;color:#8b98a5;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row .st{margin-left:auto;font-size:12px;font-weight:700;color:#8b98a5}
.row.on{background:#1a2130}
.row.on svg,.row.on .st{color:#ffb43c}
.row[disabled]{opacity:.4;pointer-events:none}
.sel{appearance:none;-webkit-appearance:none;margin-left:auto;flex:0 0 auto;max-width:52%;background-color:transparent;color:#ffd79a;color-scheme:dark;border:1px solid transparent;border-radius:9px;padding:8px 26px 8px 10px;font:700 12.5px/1.2 inherit;font-family:inherit;text-align:right;background-image:linear-gradient(45deg,transparent 50%,#8b98a5 50%),linear-gradient(135deg,#8b98a5 50%,transparent 50%);background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sel:focus{outline:none;border-color:transparent}
select.sel option{background:#161b23;color:#eaeef2}

/* 字幕设置：位置 / 背景 / 文字 三组 */
.subGroup{display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;border-radius:12px;background:#0e131a}
.subGroupTitle{font-size:11px;font-weight:700;letter-spacing:.08em;color:#ffb43c}
#capBox,#capBgBox,#capTextBox{display:flex;flex-direction:column;gap:14px}
#capBox.hidden,#capBgBox.hidden,#capTextBox.hidden{display:none}
/* 样式开关 B I U S */
.styleToggles{display:flex;gap:8px;flex:1 1 auto;justify-content:flex-end}
.styBtn{
  appearance:none;-webkit-appearance:none;width:38px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#c9d3de;
  font:700 14px/1 inherit;font-family:inherit;padding:0;
}
.styBtn:active{background:rgba(255,255,255,.16)}
.styBtn.on{background:#ffb43c;border-color:#ffb43c;color:#1a1204}

/* 稿子编辑器：可视化 Markdown 工具条 + 实时预览 */
.mdBar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 0 8px}
.mdBtn{
  appearance:none;-webkit-appearance:none;min-width:34px;height:32px;padding:0 8px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#dfe7ef;
  font:700 13px/1 inherit;font-family:inherit;
}
.mdBtn:active{background:rgba(255,255,255,.2)}
.mdColorBtn{font-size:15px}
.mdColorPicker{width:34px;height:32px;padding:3px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.06);cursor:pointer}
.mdBtn.mdWide{font-size:12px;font-weight:600}
.mdSep{width:1px;height:20px;background:rgba(255,255,255,.14);margin:0 2px}
#wmBox{display:flex;flex-direction:column;gap:14px;padding:4px 2px 10px}
#wmBox.open{display:flex}
#wmBox.wmOff #wmText,
#wmBox.wmOff > .wmRow.wmDisabled{opacity:.42}
#wmBox.wmOff #wmText,
#wmBox.wmOff > .wmRow.wmDisabled{pointer-events:none}
#wmBox.wmOff .wmGrid button{cursor:not-allowed}
#wmBox .wmPositionRow{
  height:auto;
  min-height:108px;
  align-items:flex-start;
}
#wmBox .wmPositionRow .hint{padding-top:8px}
#wmBox .settingsPreview,
#capPane .settingsPreview{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:190px;
  margin:0 0 2px;
  border-radius:12px;
  background:#8d8d8f;
  border:1px solid rgba(255,255,255,.1);
  object-fit:contain;
  position:relative;
  z-index:0;
}
#wmText{flex:1 1 auto;width:100%;min-width:0;background:#12161d;color:#eaeef2;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 12px;font:600 14px/1.3 inherit;font-family:inherit;user-select:text;-webkit-user-select:text}
#wmText:focus{outline:none;border-color:#ffb43c}
.wmRow{display:flex;align-items:center;gap:10px}
.wmRow .hint{flex:0 0 30px}
.pane[data-pane="tp"] .wmRow .hint{flex:0 0 4em;width:4em;white-space:nowrap}
.wmRow b{flex:0 0 38px;text-align:right;font-size:12px;color:#ffd79a;font-variant-numeric:tabular-nums}
#wmSize,#wmOpacity,#wmSpeed,#capPos,#capOpacity,#capBgAngle,#capRadius,#capSize,#tpWidth,#tpHeight,#tpFontSize,#tpSpeed,#tpGuideH{
  flex:1 1 auto;width:100%;min-width:0;height:30px;-webkit-appearance:none;appearance:none;background:transparent
}
#wmSize::-webkit-slider-runnable-track,#wmOpacity::-webkit-slider-runnable-track,#wmSpeed::-webkit-slider-runnable-track,#capPos::-webkit-slider-runnable-track,#capOpacity::-webkit-slider-runnable-track,#capBgAngle::-webkit-slider-runnable-track,#capRadius::-webkit-slider-runnable-track,#capSize::-webkit-slider-runnable-track,#tpWidth::-webkit-slider-runnable-track,#tpHeight::-webkit-slider-runnable-track,#tpFontSize::-webkit-slider-runnable-track,#tpSpeed::-webkit-slider-runnable-track,#tpGuideH::-webkit-slider-runnable-track{
  height:5px;border-radius:3px;background:rgba(255,255,255,.16)
}
#wmSize::-webkit-slider-thumb,#wmOpacity::-webkit-slider-thumb,#wmSpeed::-webkit-slider-thumb,#capPos::-webkit-slider-thumb,#capOpacity::-webkit-slider-thumb,#capBgAngle::-webkit-slider-thumb,#capRadius::-webkit-slider-thumb,#capSize::-webkit-slider-thumb,#tpWidth::-webkit-slider-thumb,#tpHeight::-webkit-slider-thumb,#tpFontSize::-webkit-slider-thumb,#tpSpeed::-webkit-slider-thumb,#tpGuideH::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#ffb43c;border:3px solid #12161d
}
#wmSize::-moz-range-thumb,#wmOpacity::-moz-range-thumb,#wmSpeed::-moz-range-thumb,#capPos::-moz-range-thumb,#capOpacity::-moz-range-thumb,#capBgAngle::-moz-range-thumb,#capRadius::-moz-range-thumb,#capSize::-moz-range-thumb,#tpWidth::-moz-range-thumb,#tpHeight::-moz-range-thumb,#tpFontSize::-moz-range-thumb,#tpSpeed::-moz-range-thumb,#tpGuideH::-moz-range-thumb{
  width:20px;height:20px;border:3px solid #12161d;border-radius:50%;background:#ffb43c
}
#capBox{display:flex;flex-direction:column;gap:14px;padding:4px 2px 10px}
#capBox.hidden{display:none}
/* 颜色色板：一排小圆点，选中带高亮圈 */
.sw{display:flex;align-items:center;gap:8px;flex:1 1 auto;flex-wrap:wrap}
.sw button{
  appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;cursor:pointer;padding:0;
  border:2px solid rgba(255,255,255,.28);transition:transform .1s,box-shadow .14s,border-color .14s;
}
.sw button:active{transform:scale(.9)}
.sw button[data-on="1"]{border-color:#ffb43c;box-shadow:0 0 0 2px rgba(255,180,60,.45)}
.sw button.swNone{position:relative;background:transparent;border-style:dashed;border-color:#6b7787}
.sw button.swNone::after{content:"";position:absolute;left:4px;top:11px;width:14px;height:2px;background:#6b7787;transform:rotate(-45deg)}
.colorPicker{flex:0 0 32px;width:32px;height:32px;padding:2px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#12161d;cursor:pointer}
.colorPicker::-webkit-color-swatch-wrapper{padding:0}
.colorPicker::-webkit-color-swatch{border:0;border-radius:5px}
.colorPicker::-moz-color-swatch{border:0;border-radius:5px}
.wmGrid{display:grid;grid-template-columns:repeat(3,32px);grid-gap:5px;flex:1 1 auto}
.wmGrid button{width:32px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.16);cursor:pointer;background:rgba(255,255,255,.06);color:#8b98a5;font-size:0;padding:0}
.wmGrid button i{display:block;width:11px;height:3px;border-radius:2px;background:currentColor;margin:0 auto}
.wmGrid button.on{background:rgba(255,180,60,.9);border-color:#ffb43c;color:#1a1204}
.subSec{font-size:11.5px;color:#ffb43c;font-weight:700;margin:12px 2px 6px;letter-spacing:.03em}
.subSec.first{margin-top:2px}
.subRow{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.subRow .t{flex:0 0 40px;font-size:11px;color:#8b98a5;font-variant-numeric:tabular-nums}
.subRow input{flex:1 1 auto;min-width:0;background:#12161d;color:#eaeef2;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:9px 10px;font:600 13.5px/1.35 inherit;font-family:inherit;user-select:text;-webkit-user-select:text}
.subRow input:focus{outline:none;border-color:#ffb43c}
.subRow .del{flex:0 0 auto;width:28px;height:28px;border-radius:8px;border:0;cursor:pointer;background:rgba(255,255,255,.08);color:#8b98a5;font-size:14px;line-height:1;padding:0}
.subRow .del:active{background:rgba(255,90,80,.3);color:#ff8a80}
#subProg{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;display:none;margin-top:8px}
#subProg.show{display:block}
#subProg i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb43c,#ff7a45);transition:width .2s}
#subOut{display:none;flex:0 0 auto;gap:8px;flex-direction:column;padding:10px 0}
#subOut.show{display:flex}
#subOut video{width:100%;max-height:34vh;background:#000;border-radius:12px;object-fit:contain}
#exPrev{display:none;justify-content:center;padding:4px 0 2px}
#exPrev.show{display:flex}
#exPrev video{width:150px;max-height:220px;border-radius:10px;background:#000;object-fit:contain}
.btn{appearance:none;-webkit-appearance:none;border:0;border-radius:9px;cursor:pointer;padding:7px 11px;font-size:12.5px;font-weight:600;line-height:1.2;color:#e8edf2;background:rgba(255,255,255,.11);white-space:nowrap;font-family:inherit;transition:background .12s,color .12s,opacity .12s}
.btn:active{background:rgba(255,255,255,.22)}
.btn.sq{padding:6px 9px;font-size:14px;font-weight:700;min-width:38px;text-align:center}
.btn.on{background:#ffb43c;color:#141414}
.btn.primary{background:#ff3b30;color:#fff;padding:11px 20px;font-size:14.5px;border-radius:11px;font-weight:700}
.btn.primary:active{background:#e02e24}
.btn.go{background:#2ec26b;color:#06240f}
.btn.go:active{background:#27ac5e}
.btn[disabled]{opacity:.34;pointer-events:none}
#divider{position:relative;order:2;flex:0 0 auto;height:15px;background:#141821;z-index:8;display:flex;align-items:center;justify-content:center;cursor:row-resize;touch-action:none;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(0,0,0,.6)}
#divider i{display:block;width:52px;height:4px;border-radius:3px;background:#3d4754}
#stage{position:relative;order:3;flex:1 1 auto;min-height:0;background:#000;display:flex;flex-direction:column;overflow:hidden}
#bar{order:4}
#app.prompterBottom #stage{order:1}
#app.prompterBottom #divider{order:2}
#app.prompterBottom #prompter{order:3}
#videoWrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#000}
#preview{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain;object-position:top center;transform:scaleX(1);transition:transform .15s}
#preview.mirror{transform:scaleX(-1)}
#preview.hidden{visibility:hidden}
#capCanvas{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:2;object-fit:contain;object-position:top center;background:#000}
#capCanvas.show{display:block}
#gate{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#05070a;padding:16px;text-align:center}
#gate.gone{display:none}
.gateIcon{font-size:34px;color:#3d4754;line-height:1}
.hint{font-size:11.5px;color:#8b98a5;line-height:1.5;margin:0}
#gateHint:empty{display:none}
.fab{position:absolute;z-index:6;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);color:#dfe7ef;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .12s,transform .1s,opacity .12s}
.fab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fab:active{transform:scale(.92);background:rgba(0,0,0,.7)}
.fab[disabled]{opacity:.32;pointer-events:none}
#prompter #btnEdit{top:8px;right:8px}
#prompterTools{position:absolute;z-index:6;left:0;right:0;bottom:0;width:100%;display:flex;align-items:center;justify-content:center;gap:3px;padding:3px;border-radius:0;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);opacity:.8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-x:auto;overflow-y:hidden}
#prompterTools .fab{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-color:transparent;border-radius:9px}
#prompterTools .fab:active{background:rgba(255,255,255,.14)}
#prompterTools .fab.on{color:#ffb43c;border-color:rgba(255,180,60,.62);background:rgba(120,80,10,.5)}
#prompterTools .prompterTool{position:relative;inset:auto;width:42px;height:34px;flex-direction:column;gap:1px;border-radius:10px}
#prompterTools .prompterTool svg{width:15px;height:15px}
#prompterTools .prompterTool span{font-size:9px;line-height:1;font-weight:600;color:inherit}
#prompterTools #btnPractice{position:relative;inset:auto}
.fab.on{color:#ffb43c;border-color:rgba(255,180,60,.62);background:rgba(120,80,10,.5)}
#videoWrap #btnCam{top:8px;left:8px}
#videoWrap #btnMic{top:8px;left:52px}
#videoWrap #btnFlip{top:8px;right:8px}
.fab.off{color:#ff7b72;border-color:rgba(255,123,114,.55);background:rgba(120,25,20,.55)}
#hud{position:relative;z-index:5;flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:6px 10px;background:#0c0e12;border-top:1px solid rgba(255,255,255,.08);font-variant-numeric:tabular-nums;font-size:12px;pointer-events:none}
#dot{width:9px;height:9px;border-radius:50%;background:#5a6472;flex:0 0 auto}
#dot.rec{background:#ff3b30;animation:blink 1s steps(1,end) infinite}
#dot.pause{background:#ffb43c}
@keyframes blink{50%{opacity:.15}}
#timer{font-weight:700;font-size:14px;color:#fff}
#level{width:56px;height:7px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;flex:0 0 auto}
#level i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2ec26b,#ffd166);transition:width .06s linear}
#hud .hint{margin-left:auto}
#hud #sizeInfo{margin-left:0}
#subInfo{color:#ffb43c}
#countdown{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;font-size:104px;font-weight:800;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.8);pointer-events:none}
#countdown.show{display:flex}
#countdown.pop{animation:pop .5s ease-out}
@keyframes pop{from{transform:scale(1.5);opacity:.2}to{transform:scale(1);opacity:1}}
#banner{position:fixed;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top,0px));z-index:80;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.5;background:rgba(255,59,48,.94);color:#fff;display:none;box-shadow:0 8px 26px rgba(0,0,0,.45)}
#banner.show{display:block}
#banner.warn{background:rgba(255,180,60,.95);color:#1a1204}
#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:85;padding:8px 14px;border-radius:20px;background:rgba(0,0,0,.82);color:#fff;font-size:12.5px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;max-width:92vw;border:1px solid rgba(255,255,255,.12)}
#toast.show{opacity:1}
.sheet{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;background:#0b0d10;padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(10px + env(safe-area-inset-bottom,0px))}
.sheet.open{display:flex}
#subs{z-index:75}
#subsEdit{z-index:78}                 /* 下钻面板要盖在导出面板之上 */
.sheetHead{display:flex;align-items:baseline;gap:10px;padding:4px 2px 10px}
.sheetHead b{font-size:15px}
.sheetFoot{display:flex;align-items:center;gap:8px;padding-top:10px;flex-wrap:wrap}
#subsEdit .sheetFoot{flex-wrap:nowrap}
#subsEdit .sheetFoot .btn{flex:1 1 0;min-width:0}
#result .sheetFoot{justify-content:center}
#result .sheetFoot #btnSave{min-width:120px}
.spacer{flex:1 1 auto}
#editorText{flex:1 1 auto;width:100%;min-height:0;resize:none;border-radius:12px;padding:12px;background:#12161d;color:#eaeef2;border:1px solid rgba(255,255,255,.1);font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC",Arial,sans-serif;user-select:text;-webkit-user-select:text}
#editorText{display:none}
#editorVisual{flex:1 1 auto;min-height:0;overflow:auto;resize:none;border-radius:12px;padding:12px;background:#12161d;color:#eaeef2;border:1px solid rgba(255,255,255,.1);font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC",Arial,sans-serif;white-space:pre-wrap;word-break:break-word;user-select:text;-webkit-user-select:text;outline:none}
#editorVisual:empty::before{content:"Script editor";color:#6b7787;pointer-events:none}
#editorVisual .editorLine{min-height:1.7em}
#resBody{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px}
#result .resultTabsWrap{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:8px;margin-top:6px}
#result .resultTabs{display:flex;flex:0 0 auto;gap:5px;overflow-x:auto;padding:0 0 2px;scrollbar-width:none}
#result .resultTabs::-webkit-scrollbar{display:none}
#result .resultTab{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;white-space:nowrap;padding:8px 10px;border-radius:9px;background:#151a22;color:#9aa7b4;font:600 12px/1.2 inherit;font-family:inherit}
#result .resultTab.on{background:#ffb43c;color:#1a1204}
#result .resultTabPane{display:none;flex:1 1 auto;min-height:0;overflow:auto;flex-direction:column;gap:10px;padding:1px 0 2px}
#result .resultTabPane.on{display:flex}
#result .resultTabPane > .videoInfoBlock,#result .resultTabPane > .card,#result .resultTabPane > .exportDestRow,#result .resultTabPane > .exportedFiles{flex:0 0 auto}
#resBody video{width:100%;max-height:40vh;background:#000;border-radius:12px;object-fit:contain;object-position:center center;display:block}
.resPreviewSection{position:relative;display:flex;flex:0 0 auto;min-width:0;flex-direction:column;gap:6px}
.resFullscreen{flex:0 0 auto;padding-left:10px;padding-right:10px}
.resVideoWrap{position:relative;display:block;line-height:0}
.capOverlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;pointer-events:none;z-index:2;background:#000;border-radius:12px}
.resPlayback{display:flex;align-items:center;gap:8px;padding:2px 2px 0}
.resPlay{flex:0 0 auto;width:38px;height:34px;padding:0;border-radius:9px;font-size:14px;line-height:1}
.resSeek{flex:1 1 auto;min-width:60px;accent-color:#ffb43c}
.resTime{flex:0 0 auto;min-width:86px;text-align:right;font-variant-numeric:tabular-nums;font-size:11px}
.standaloneFullscreenPage{
  position:fixed;top:0;left:0;right:0;bottom:auto;z-index:10000;width:100vw;height:100vh;
  height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#000;color:#eaeef2;
}
.standaloneVideoWrap{
  display:flex;flex:1 1 auto;min-height:0;width:100%;align-items:center;justify-content:center;background:#000;
}
.standaloneFullscreenPage .standaloneFullscreenVideo{
  width:100%;height:100%;max-height:none;object-fit:contain;object-position:center center;background:#000;
}
.standaloneFullscreenPage .capOverlay{border-radius:0;object-position:center center}
.standaloneFullscreenPage .standalonePlayback{
  flex:0 0 auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#0b0d10;
}
@supports not (height:100dvh){
  .standaloneFullscreenPage{height:-webkit-fill-available;max-height:-webkit-fill-available}
}
.videoInfoBlock{flex:0 0 auto;padding:10px 13px 11px;border-radius:14px;background:#11151c}
.videoInfoHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.videoInfoHead b{font-size:14px}
.videoInfoActions{display:flex;justify-content:flex-end;margin-top:10px}
.infoBtn{padding:6px 10px;border-radius:8px;font-size:12px}
.videoInfoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.videoInfoGrid span{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:0}
.videoInfoGrid i{font-style:normal;color:#7d8a99;font-size:11px}
.videoInfoGrid i{white-space:nowrap}
.videoInfoGrid b{font-size:13px;font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.resultExportCard{gap:0}
.resultExportCard .cardTitle{padding:8px 14px 6px}
.exportSettingsTitle{display:flex;align-items:center;justify-content:space-between;gap:10px}
.exportSettingsTitle.modeOnly{justify-content:flex-end}
.exportSettingsTitle .liveExportBadge,.exportSettingsTitle .composeExportBadge{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none}
.liveExportBadge{color:#ffb43c}
.composeExportBadge{color:#7cc4ff}
.resultExportCard .row.flat{margin-top:2px}
.resultExportCard .chk{padding-top:10px;padding-bottom:10px}
.resultExportCard .exportDestRow{padding-top:9px;padding-bottom:9px}
.resultExportCard .row.flat{padding-top:10px;padding-bottom:10px}
.exportDestRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.06)}
.exportDestLabel{font-size:14px;font-weight:600;color:#eaeef2}
.exportDestSwitch{display:flex;gap:4px;padding:3px;border-radius:10px;background:#1a2029}
.destBtn{appearance:none;-webkit-appearance:none;border:0;border-radius:8px;padding:7px 12px;cursor:pointer;color:#9aa7b4;background:transparent;font:600 12.5px/1.2 inherit;font-family:inherit}
.destBtn.on{background:#ffb43c;color:#1a1204}
.destBtn:active{background:#ffd079;color:#1a1204}
.exportedFiles{display:flex;flex:0 0 auto;flex-direction:column;gap:8px;padding:2px 0 4px}
.exportedFilesTitle{font-size:13px;font-weight:700;color:#dce5ed;padding:2px 2px 0}
.exportedFilesList{display:flex;flex-direction:column;gap:7px}
.exportedFileRow{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:12px;background:#12161d}
.exportedFileText{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:4px}
.exportedFileText b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exportedFileText .hint{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exportedFileActions{display:flex;flex:0 0 auto;flex-direction:column;gap:5px}
.exportedFileRow .btn{flex:0 0 auto;padding:7px 10px;font-size:12px;text-decoration:none}
.exportedFileRow .btn.danger{color:#ff9a90;background:rgba(255,59,48,.12)}
.exportedFileRow .btn.disabled{opacity:.4;cursor:default}
/* 合成过程中的缩略预览：画布盖住源视频，显示最终画面（避免同时看到两种比例） */
#exPrev .prevWrap{position:relative;display:inline-block;line-height:0}
#exPrev .prevWrap canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:10px;pointer-events:none}
.resRow{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#12161d}
.resRow a{color:#7cc4ff;font-size:13px;text-decoration:none;font-weight:600}
.segList{display:flex;flex-direction:column;gap:6px}
.segList a{display:block;padding:9px 11px;border-radius:10px;background:#12161d;color:#7cc4ff;font-size:13px;text-decoration:none}

/* ---------------- 导出面板：卡片分组 ---------------- */
#subs{gap:10px}
.card{flex:0 0 auto;display:flex;flex-direction:column;border-radius:14px;background:#11151c;overflow:hidden}
.cardTitle{font-size:11px;font-weight:700;letter-spacing:.06em;color:#7d8a99;padding:11px 14px 7px;text-transform:uppercase}
.xBtn{
  appearance:none;-webkit-appearance:none;border:0;background:rgba(255,255,255,.08);color:#c9d3de;
  width:30px;height:30px;border-radius:9px;font-size:15px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.xBtn:active{background:rgba(255,255,255,.18)}
.sheetHead .xBtn{margin-left:auto}
.sheetHead #btnSubsEditBack{margin-left:0;margin-right:2px;font-size:19px}

/* 复选框行（导出时合成什么） */
.chk{
  appearance:none;-webkit-appearance:none;border:0;width:100%;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:11px;padding:13px 14px;background:transparent;
  color:#eaeef2;font:600 14.5px/1.2 inherit;font-family:inherit;
  border-top:1px solid rgba(255,255,255,.06);
}
.chk:active{background:rgba(255,255,255,.05)}
.chkBox{
  flex:0 0 auto;width:21px;height:21px;border-radius:7px;border:1.5px solid #4c5866;
  background:transparent;position:relative;transition:background .14s,border-color .14s;
}
.chk[aria-checked="true"] .chkBox{background:#ffb43c;border-color:#ffb43c}
.chk[aria-checked="true"] .chkBox::after{
  content:"";position:absolute;left:6px;top:2.5px;width:6px;height:11px;
  border:solid #1a1204;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
}
.chkLbl{flex:1 1 auto}
.chkN{font-size:12px;font-weight:600;color:#7d8a99;font-variant-numeric:tabular-nums}
.chk[disabled]{opacity:.45;pointer-events:none}

/* 下钻行（比设置行更轻，右侧带箭头） */
.row.flat{background:transparent;border-top:1px solid rgba(255,255,255,.06);border-radius:0;padding:14px}
.row.flat:active{background:rgba(255,255,255,.05)}
.row.flat svg:first-child{color:#9aa7b4}
.row .chev{margin-left:auto;width:16px;height:16px;color:#5a6472;stroke-width:2.2}
.row.flat span{flex:1 1 auto}

/* 大号主按钮 */
.btn.xl{width:100%;padding:15px 20px;font-size:16px;border-radius:13px;font-weight:700}
.sheetFoot .btn.xl{width:100%}

/* 合成进度 / 输出 */
#subsRun{gap:8px;padding-top:2px}
#subsRun #subProg{margin:10px 14px 0}
#subsRun #exPrev,#subsRun #subOut{padding:0 12px}
.composeProgress{display:none;flex:0 0 auto;flex-direction:column;gap:6px;padding:2px 2px 0}
.composeProgress.show{display:flex}
.composeProgressText{font-size:12px;line-height:1.4;color:#aeb9c5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composeProgressTrack{height:7px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.composeProgressTrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb43c,#ff7a45);transition:width .2s}
.errLine{font-size:12px;line-height:1.55;color:#ff9a90;margin:0;padding:8px 14px 0}
.errLine:empty{display:none}

/* ---------------- 完成提示弹窗 ---------------- */
.dlg{
  position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:24px;
}
.dlg.open{display:flex}
.dlgCard{
  width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 22px 20px;border-radius:20px;background:#151a22;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.66);animation:dlgIn .22s ease-out;
}
@keyframes dlgIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.dlgTick{
  width:52px;height:52px;border-radius:50%;background:rgba(46,194,107,.16);color:#2ec26b;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;
}
.dlgTick.err{background:rgba(255,59,48,.16);color:#ff6b60}
.dlgTitle{font-size:17px;font-weight:700}
.dlgText{font-size:13px;line-height:1.6;color:#9aa7b4;text-align:center;margin:0}
.infoDlgCard{align-items:stretch;max-width:360px;max-height:82vh;overflow:auto}
.infoDlgCard .dlgTitle{text-align:center}
.infoDlgHint{margin-top:-4px}
.videoDetailList{display:flex;flex-direction:column;gap:1px;width:100%;margin:4px 0 6px;border-radius:11px;overflow:hidden;background:rgba(255,255,255,.05)}
.videoDetailRow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 10px;background:#12161d;font-size:12px}
.videoDetailRow span{flex:0 0 auto;color:#7d8a99}
.videoDetailRow b{min-width:0;text-align:right;color:#e7edf3;word-break:break-word;font-weight:600}

/* ---------------- 设置：标签页 ---------------- */
.tabs{flex:0 0 auto;display:flex;gap:6px;padding:2px 0 10px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;white-space:nowrap;
  padding:9px 15px;border-radius:11px;font:600 13.5px/1.2 inherit;font-family:inherit;
  background:#151a22;color:#9aa7b4;transition:background .14s,color .14s;
}
.tab:active{background:#1d242e}
.tab.on{background:#ffb43c;color:#1a1204}
.rows .pane{display:none;flex-direction:column;gap:14px}
.rows .pane.on{display:flex}
.rows .pane > .row,
.rows .pane .wmRow{
  min-height:48px;height:48px;
}
.rows .pane > .row{padding-top:0;padding-bottom:0}
.rows .pane .wmRow{
  width:100%;padding:7px 12px;border-radius:12px;background:#12161d;
}
#tpPane.prompterOff .row:not(#btnPrompterVisible),
#tpPane.prompterOff .wmRow{opacity:.42;pointer-events:none}
#capPane.subOff > .wmRow,
#capPane.subOff > .row:not(#btnSubVisible),
#capPane.subOff > .subGroup,
#capPane.subOff > .capSubTabs{opacity:.42;pointer-events:none}
.capSubTabs{display:flex;gap:6px;padding:0 0 2px}
.capSubTab{
  appearance:none;-webkit-appearance:none;flex:1 1 0;min-width:0;height:38px;padding:0 10px;
  border:0;border-radius:10px;background:#151a22;color:#9aa7b4;cursor:pointer;
  font:600 13px/1.2 inherit;font-family:inherit
}
.capSubTab:active{background:#1d242e}
.capSubTab.on{background:#ffb43c;color:#1a1204}
.capSectionHidden{display:none!important}

/* 结果与导出界面的统一文字层级 */
.sheet{font-size:14px}
.sheet .sheetHead b{font-size:16px}
.sheet .hint{font-size:12px}
.sheet .cardTitle{font-size:12px}
.sheet .row{font-size:14px}
.sheet .chk{font-size:14px}
.sheet .btn{font-size:13px}
.sheet .btn.primary{font-size:14px}
.sheet .btn.xl{font-size:15px}
.sheet .chkN,.sheet .wmRow b{font-size:12px}
#result .resTime{font-size:12px}
#result .videoInfoGrid i{font-size:12px}
#result .videoInfoGrid b{font-size:13px}
#result .resultExportCard .cardTitle{font-size:14px;letter-spacing:0;text-transform:none;color:#eaeef2}
#result .videoInfoHead b{font-size:14px;color:#eaeef2}
#result .exportSettingsTitle .liveExportBadge,#result .exportSettingsTitle .composeExportBadge{font-size:12px}
#result .exportedFilesTitle{font-size:14px}
#result .exportedFileText b{font-size:13px}
#result .exportedFileText .hint{font-size:12px}