:root{
  /* 播控室美学：深墨绿底 + 琥珀金强调 */
  --bg:#1C2E28; --bg-2:#21362E; --panel:#24392F; --panel-2:#2C453A;
  --text:#E8E4DC; --text-dim:#A3AD9E; --muted:#7A877C;
  --accent:#D4A95C; --accent-hover:#E0B96E; --accent-soft:rgba(212,169,92,.14);
  --record:#C4574B; --record-hover:#D4685C;
  --line:rgba(232,228,220,.08); --line-strong:rgba(232,228,220,.16);
  --shadow:0 8px 28px rgba(0,0,0,.38);
  --radius:12px; --radius-sm:9px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
body{
  background-color:var(--bg);
  background-image:radial-gradient(1200px 700px at 70% -10%,#274238 0%,var(--bg) 55%);
  color:var(--text);
  font-family:'Inter','Noto Sans SC',-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  display:flex; flex-direction:column; height:100vh; height:100dvh;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ===== 顶栏 ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;
  background:rgba(33,54,46,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); flex:0 0 auto; position:relative; z-index:20}
.brand{font-weight:700;font-size:15px;letter-spacing:.4px;color:var(--text);
  display:flex;align-items:center;gap:9px}
.brand::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.topbar-right{display:flex;align-items:center;gap:14px}
.camera-select{appearance:none;-webkit-appearance:none;
  background:var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23D4A95C' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>") no-repeat right 10px center;
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:8px 30px 8px 12px;font-size:13px;font-weight:500;max-width:230px;cursor:pointer;
  transition:border-color .2s}
.camera-select:hover{border-color:var(--accent)}
.timer{font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-dim);letter-spacing:.5px}

.rec-badge{display:inline-flex;align-items:center;gap:7px;
  background:rgba(196,87,75,.16);border:1px solid rgba(196,87,75,.4);
  color:#F09A8E;font-size:12px;font-weight:700;letter-spacing:1.5px;
  padding:6px 12px;border-radius:999px;animation:recGlow 1.4s ease-in-out infinite}
.rec-badge .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--record);
  animation:pulse 1.4s infinite}
.rec-badge #recTime{font-variant-numeric:tabular-nums;min-width:42px;text-align:left;color:#F8C4BC}
@keyframes recGlow{0%,100%{box-shadow:0 0 0 0 rgba(196,87,75,0)}50%{box-shadow:0 0 14px 2px rgba(196,87,75,.28)}}

/* ===== 主舞台 ===== */
.stage{flex:1 1 auto;position:relative;overflow:hidden;display:flex;flex-direction:column}
.script-pane{position:relative;flex:1 1 auto;min-height:0}
.script-view{position:absolute;inset:0;overflow-y:auto;
  padding:40px 28px 56px;background:linear-gradient(180deg,var(--bg-2),var(--bg));
  outline:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--panel-2) transparent;
  transition:filter .4s}
.script-view::-webkit-scrollbar{width:8px}
.script-view::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:4px}
.script-view::-webkit-scrollbar-thumb:hover{background:#355245}
.script-view::-webkit-scrollbar-track{background:transparent}
.script-content{font-size:30px;line-height:2.05;font-weight:500;
  white-space:pre-wrap;word-break:break-word;color:var(--text);min-height:100%;
  letter-spacing:.2px;max-width:62ch;margin:0 auto}

/* 录制态：整体降亮，减少屏幕反光 */
body.rec-dim .script-view{filter:brightness(.68)}
body.rec-dim .cam-pane{filter:brightness(.85)}

/* ===== 摄像头分区 ===== */
.cam-pane{position:relative;flex:0 0 auto;height:30vh;aspect-ratio:9/16;align-self:center;
  margin:12px 0;background:#000;
  border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:filter .4s}
body.ratio-16-9 .cam-pane{aspect-ratio:16/9;height:auto;width:min(92%,560px)}
.cam-pane.cam-hidden{display:none}
.cam-pane-head{position:absolute;top:0;left:0;right:0;height:28px;
  background:linear-gradient(180deg,rgba(28,46,40,.85),rgba(28,46,40,0));
  color:var(--text-dim);font-size:11px;font-weight:600;letter-spacing:1.5px;
  display:flex;align-items:center;justify-content:center;z-index:2;text-transform:uppercase}
.cam-pane video{width:100%;height:100%;object-fit:cover;display:block}
.cam-pane video.mirrored{transform:scaleX(-1)}
.pip-btn{position:absolute;left:10px;bottom:10px;
  background:rgba(28,46,40,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--text);border:1px solid var(--line-strong);border-radius:8px;
  padding:7px 11px;font-size:14px;z-index:3;cursor:pointer;transition:background .2s}
.pip-btn:hover{background:rgba(212,169,92,.32)}

@media (orientation:landscape) and (min-width:640px){
  .stage{flex-direction:row}
  .cam-pane{height:100%;width:auto;aspect-ratio:9/16;margin:0;border-radius:0;
    border:none;border-left:1px solid var(--line-strong);align-self:stretch;box-shadow:none}
  body.ratio-16-9 .cam-pane{height:auto;width:42%;max-width:520px;aspect-ratio:16/9;
    align-self:center;border-left:1px solid var(--line-strong);border-top:none;margin:0}
}
@media (min-width:900px){
  .script-content{font-size:40px}
  .script-view{padding:56px 8vw}
}

/* ===== 编辑面板 ===== */
.edit-pane{position:absolute;inset:0;
  background:rgba(28,46,40,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;z-index:30;padding:20px;gap:16px}
.edit-pane textarea{flex:1;resize:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:18px;
  font-size:16px;line-height:1.8;background:var(--panel);color:var(--text);
  font-family:inherit;outline:none;transition:border-color .2s}
.edit-pane textarea:focus{border-color:var(--accent)}
.edit-pane textarea::placeholder{color:var(--muted)}
.edit-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ===== 控制栏 ===== */
.hidden{display:none!important}
.controlbar{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  padding:14px 20px;
  background:rgba(33,54,46,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));position:relative;z-index:20}
.ctrl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl-row .btn{flex:1 1 auto;min-width:72px}
.ctrl-row .speed-wrap{flex:2 1 200px}

.btn{border:1px solid transparent;border-radius:var(--radius-sm);
  padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;letter-spacing:.2px;flex:0 0 auto;
  transition:background .18s,border-color .18s,color .18s,transform .06s}
.btn:active{transform:translateY(1px)}

/* 主操作：实心琥珀金 */
.btn-primary{background:var(--accent);color:#2A2113;box-shadow:0 4px 14px rgba(212,169,92,.3)}
.btn-primary:hover{background:var(--accent-hover)}

/* 录像：实心暗红 */
.btn-record{background:var(--record);color:#fff;box-shadow:0 4px 14px rgba(196,87,75,.3)}
.btn-record:hover{background:var(--record-hover)}
.btn-record.recording{animation:pulse 1.4s infinite}

/* 次操作：墨绿描边 ghost */
.btn-secondary{background:transparent;color:var(--text-dim);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ===== 调速 ===== */
.speed-wrap{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 14px}
.speed-label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.5px}
.speed-val{font-size:13px;font-variant-numeric:tabular-nums;min-width:40px;
  color:var(--accent);font-weight:700}
input[type=range]{accent-color:var(--accent);width:130px;cursor:pointer}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);
  background:rgba(44,69,58,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);padding:12px 20px;border-radius:10px;font-size:14px;font-weight:500;
  border:1px solid var(--line-strong);box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:99;max-width:88vw;text-align:center}
.toast.show{opacity:1}