:root {
  --bg: #000; --fg: #f5f5f0; --muted: #8a8a8a; --accent: #ffd34d; --panel: #15161a; --line: #2a2c33;
  --green: #35d07f; --yellow: #f2c037; --red: #ff5a5a;
  --fs: 56px; --lh: 1.6; --margin: 6vw; --readline: 33%;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
body { overflow: hidden; overscroll-behavior: none; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
button { font: inherit; color: var(--fg); background: #24262d; border: 1px solid #3a3d46; border-radius: 10px;
  padding: 10px 16px; font-size: 17px; cursor: pointer; touch-action: manipulation; }
button:active { filter: brightness(1.3); }
button.primary { background: #2f6fed; border-color: #2f6fed; }
button.big { font-size: 20px; padding: 12px 22px; font-weight: 600; }
.muted { color: var(--muted); } .small { font-size: 14px; } .warn { color: var(--red); }

/* 口令 */
#lock { display: flex; align-items: center; justify-content: center; }
.lock-box { text-align: center; width: min(360px, 90vw); }
.lock-box input { width: 100%; font-size: 22px; padding: 12px; border-radius: 10px; border: 1px solid #444; background: #111; color: #fff; margin-bottom: 12px; }

/* 编辑页 */
#editor { display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ed-head h1 { margin: 0; font-size: 26px; }
.ed-actions { display: flex; gap: 10px; }
.banner { background: #3a2a00; border: 1px solid #7a5a00; color: #ffe39a; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.ed-body { display: flex; gap: 18px; flex: 1; min-height: 0; }
.ed-left { flex: 1.6; display: flex; flex-direction: column; min-height: 0; }
.ed-right { flex: 1; min-width: 300px; overflow-y: auto; }
.ta-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 15px; }
textarea { flex: 1; min-height: 260px; width: 100%; resize: none; background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; font-size: 19px; line-height: 1.7; font-family: inherit; }
.ta-tools { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 14px; background: var(--panel); }
legend { padding: 0 6px; color: var(--muted); font-size: 14px; }
.segctl { display: flex; gap: 0; }
.segctl button { flex: 1; border-radius: 0; }
.segctl button:first-child { border-radius: 10px 0 0 10px; } .segctl button:last-child { border-radius: 0 10px 10px 0; }
.segctl button.on { background: #2f6fed; border-color: #2f6fed; }
.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 16px; }
.row input[type=range] { flex: 1; accent-color: #2f6fed; }
.row output { min-width: 52px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.row.check input { width: 22px; height: 22px; accent-color: #2f6fed; }
.help { position: fixed; inset: 0; background: rgba(0,0,0,.92); overflow-y: auto; padding: 30px max(30px, 8vw); font-size: 17px; line-height: 1.7; z-index: 20; }
.help h2 { margin-top: 0; } .help h3 { color: var(--accent); margin-bottom: 4px; }
.dot-demo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 4px; vertical-align: middle; }
.dot-demo.green { background: var(--green); } .dot-demo.yellow { background: var(--yellow); } .dot-demo.red { background: var(--red); }

@media (orientation: portrait), (max-width: 900px) {
  .ed-body { flex-direction: column; }
  .ed-right { min-width: 0; overflow: visible; }
  textarea { min-height: 40vh; }
}

/* 提词页 */
#prompter { background: #000; }
#stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#flip { position: absolute; inset: 0; }
#flip.mirror { transform: scaleX(-1); }
#textWrap { position: absolute; left: 0; right: 0; top: 0; will-change: transform; padding: 0 var(--margin); }
#text { font-size: var(--fs); line-height: var(--lh); font-weight: 500; letter-spacing: 0.02em; white-space: pre-wrap; word-break: break-word; }
#text p { margin: 0 0 0.6em; min-height: 1em; }
#text .seg { color: #cfcfca; transition: color .25s; border-radius: 6px; }
#text .seg.read { color: #6b6b6b; }
body.no-dim #text .seg.read { color: #cfcfca; }
#text .seg.cur { color: #fff; background: rgba(255, 211, 77, 0.16); box-shadow: 0 0 0 4px rgba(255, 211, 77, 0.16); }
#text .seg.cur .done { color: var(--accent); }
.tail-space { height: 100vh; }
#readMarker { position: absolute; left: 0; right: 0; top: var(--readline); height: 0; border-top: 2px dashed rgba(255, 211, 77, 0.35); pointer-events: none; }
#readMarker span { position: absolute; left: 6px; top: -0.75em; color: var(--accent); font-size: 26px; }
#pausedBadge { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(40,40,40,.9); padding: 10px 20px; border-radius: 999px; font-size: 18px; pointer-events: none; }

#topBar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.55) 70%, rgba(0,0,0,0)); transition: opacity .4s; z-index: 5; }
#topBar.faded { opacity: 0.25; }
#topBar button { padding: 8px 12px; font-size: 16px; background: rgba(40,42,50,.9); }
#topBar .spacer { flex: 1; }
#speedLabel { min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
#prompter.voice .auto-only { display: none; }
.status { display: flex; align-items: center; gap: 8px; background: rgba(30,30,30,.9); border-radius: 999px; padding: 7px 14px; font-size: 16px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.status .dot { width: 12px; height: 12px; border-radius: 50%; background: #666; flex: none; }
.status.green .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.status.yellow .dot { background: var(--yellow); }
.status.red .dot { background: var(--red); }
.status.red { color: #ffc2c2; }
.status.pulse .dot { animation: pulse .5s ease-out; }
@keyframes pulse { from { transform: scale(1.7); } to { transform: scale(1); } }
#heard { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 16px max(8px, env(safe-area-inset-bottom)); font-size: 15px; color: #8d8d8d; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.85) 40%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#countdownEl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32vmin; font-weight: 700; color: var(--accent); background: rgba(0,0,0,.6); z-index: 10; }