[hidden]{display:none !important;}
* { box-sizing: border-box; }
:root {
  --bg: #0b0d12;
  --card: #151922;
  --card2: #1b202b;
  --text: #f4f7fb;
  --muted: #9aa4b2;
  --accent: #ff6b00;
  --danger: #ef4444;
  --border: rgba(255,255,255,.09);
}
html,body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif; }
body { min-height:100vh; }
button,select,textarea,input { font:inherit; }
button, .link-btn { cursor:pointer; }
.app-shell { max-width:1450px; margin:0 auto; padding:18px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.brand { font-size:24px; font-weight:800; }
.sub { color:var(--muted); font-size:13px; margin-top:3px; }
.layout { display:grid; grid-template-columns:minmax(340px, 720px) minmax(300px, 1fr); gap:18px; align-items:start; }
.stage-card,.panel { background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:0 18px 60px rgba(0,0,0,.2); }
.stage-card { padding:14px; }
.stage-wrap { position:relative; overflow:hidden; border-radius:18px; background:#000; aspect-ratio:9/16; max-height:76vh; margin:0 auto; }
#cameraPreview, #recordCanvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
#recordCanvas { z-index:1; }
#cameraPreview { z-index:2; }
#cameraPreview.mirrored { transform:scaleX(-1); }
.teleprompter-overlay { position:absolute; z-index:4; left:50%; top:13%; transform:translateX(-50%); width:82%; height:46%; pointer-events:none; }
.teleprompter-viewport { height:100%; overflow:hidden; mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%); }
.teleprompter-content { padding:45% 10px 60% 10px; font-size:44px; line-height:1.45; font-weight:750; text-align:center; color:#fff; text-shadow:0 2px 7px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.85); white-space:pre-wrap; }
.cut-marker { display:block; margin:1.1em auto; padding:.35em .65em; border-radius:999px; width:max-content; max-width:90%; font-size:.45em; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,107,0,.88); color:#fff; }
.badge { position:absolute; z-index:6; top:14px; padding:8px 12px; border-radius:999px; background:rgba(15,15,18,.72); backdrop-filter:blur(10px); font-weight:700; font-size:13px; }
.badge.left { left:14px; } .badge.right { right:14px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#20c997; margin-right:7px; box-shadow:0 0 0 4px rgba(32,201,151,.12); }
.recording-indicator { position:absolute; z-index:7; top:14px; left:50%; transform:translateX(-50%); padding:8px 12px; background:rgba(190,20,20,.84); border-radius:999px; font-weight:800; }
.countdown { position:absolute; z-index:8; inset:0; display:grid; place-items:center; font-size:110px; font-weight:900; background:rgba(0,0,0,.22); text-shadow:0 4px 20px #000; }
.controls { display:grid; grid-template-columns:1.2fr 1fr auto auto auto; gap:8px; margin-top:12px; }
.record-row { display:flex; gap:8px; margin-top:10px; }
button, select, .link-btn { border:1px solid var(--border); background:var(--card2); color:var(--text); border-radius:12px; padding:11px 13px; text-decoration:none; }
button.active { border-color:rgba(255,107,0,.7); }
.primary { background:var(--accent); border-color:transparent; color:white; font-weight:800; }
.record { flex:1; font-size:18px; }
.danger { background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.35); color:#ffd8d8; }
button:disabled { opacity:.45; cursor:not-allowed; }
.panel { padding:16px; }
.panel-section + .panel-section { border-top:1px solid var(--border); margin-top:16px; padding-top:16px; }
h2,h3 { margin:0 0 12px; }
textarea { width:100%; min-height:245px; resize:vertical; background:#0f131a; color:var(--text); border:1px solid var(--border); border-radius:14px; padding:14px; line-height:1.45; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
label { display:flex; flex-direction:column; gap:7px; color:#d8dee8; font-size:13px; }
input[type=range] { width:100%; accent-color:var(--accent); }
.toggle-row { display:grid; gap:9px; margin-top:12px; }
.toggle-row label,.toggle-line { flex-direction:row; align-items:center; }
.prompt-actions,.playback-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.info { color:var(--muted); font-size:13px; line-height:1.55; }
#capabilities { margin-top:10px; }
.playback { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
#playbackVideo { width:100%; max-height:55vh; background:#000; border-radius:14px; }
.meta { margin-top:8px; color:var(--muted); font-size:12px; }

@media (max-width: 980px) {
  .layout { grid-template-columns:1fr; }
  .panel { order:2; }
  .controls { grid-template-columns:1fr 1fr; }
  .controls button { width:100%; }
}
@media (max-width: 600px) {
  .app-shell { padding:8px; }
  .topbar { padding:8px 4px; }
  .brand { font-size:20px; }
  .sub { font-size:11px; }
  .stage-card,.panel { border-radius:16px; }
  .stage-card { padding:8px; }
  .stage-wrap { max-height:none; width:100%; }
  .teleprompter-overlay { top:10%; height:52%; width:92%; }
  .teleprompter-content { font-size:38px; }
  .grid2 { grid-template-columns:1fr; }
}


.marker-word {
  display:block;
  margin:1.0em auto;
  padding:.35em .8em;
  border-radius:999px;
  width:max-content;
  max-width:90%;
  font-size:.56em;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:none;
}
.marker-cut { background:rgba(255,107,0,.92); }
.marker-continue { background:rgba(22,163,74,.92); }

.live-controls {
  position:absolute;
  z-index:10;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  width:calc(100% - 36px);
  justify-content:center;
  pointer-events:auto;
}
.live-btn {
  min-width:130px;
  min-height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:800;
  font-size:17px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.live-btn.pause { background:rgba(28,33,45,.88); }
.live-btn.stop { background:rgba(185,28,28,.92); }

.live-btn.resume {
  background:rgba(22,163,74,.92);
}

@media (max-width:600px) {
  .live-controls { bottom:12px; width:calc(100% - 22px); gap:8px; }
  .live-btn { min-width:0; flex:1; min-height:54px; font-size:16px; }
}

.camera-message {
  position:absolute;
  z-index:12;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  background:rgba(0,0,0,.72);
  padding:28px;
  color:#fff;
}
.camera-message strong { font-size:24px; }
.camera-message span { color:#cbd5e1; font-size:14px; }
.camera-message.error strong { color:#fecaca; }
.camera-message.ok { display:none; }