:root {
  --primary: hsl(238, 75%, 59%);
  --primary-ink: #fff;
  --bg: hsl(210, 40%, 98%);
  --card: #fff;
  --ink: hsl(222, 30%, 14%);
  --muted: hsl(220, 10%, 42%);
  --border: hsl(214, 25%, 88%);
  --field: hsl(210, 30%, 96%);
  --warn-bg: hsl(40, 95%, 92%);
  --warn-ink: hsl(30, 70%, 28%);

  /* prompter */
  --p-bg: #000;
  --p-ink: #f5f5f0;
  --p-said: rgba(245, 245, 240, 0.32);
  --p-cue: hsl(238, 60%, 72%);
  --p-next: hsl(48, 100%, 60%);
  --p-bar: rgba(18, 20, 30, 0.86);

  --fs: 56px;
  --margin: 8%;
  --read: 30;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: hsl(222, 47%, 5%);
    --card: hsl(222, 35%, 9%);
    --ink: hsl(210, 20%, 94%);
    --muted: hsl(215, 14%, 62%);
    --border: hsl(220, 22%, 18%);
    --field: hsl(222, 30%, 12%);
    --warn-bg: hsl(35, 50%, 16%);
    --warn-ink: hsl(40, 90%, 78%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: hsl(222, 47%, 5%);
  --card: hsl(222, 35%, 9%);
  --ink: hsl(210, 20%, 94%);
  --muted: hsl(215, 14%, 62%);
  --border: hsl(220, 22%, 18%);
  --field: hsl(222, 30%, 12%);
  --warn-bg: hsl(35, 50%, 16%);
  --warn-ink: hsl(40, 90%, 78%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h2 { font: 600 15px/1.3 "Space Grotesk", Inter, sans-serif; margin: 0; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; }
.gap { gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ editor */
#editor { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; min-height: 100%; }
.ed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font: 500 19px "Space Grotesk", sans-serif; }
.brand svg { width: 30px; height: 30px; }
.brand b { font-weight: 700; color: var(--primary); }
.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .ed-grid { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.script-card { display: flex; flex-direction: column; }
#scriptInput {
  width: 100%; min-height: 62vh; resize: vertical;
  background: var(--field); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; font-size: 16px; line-height: 1.6;
  outline: none;
}
#scriptInput:focus { border-color: var(--primary); }
#scriptInput.drag { border-style: dashed; border-color: var(--primary); }
.hint { margin: 10px 2px 0; }

.settings { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }
.label output { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
select { background: var(--field); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--field); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; border-radius: 7px; padding: 7px 6px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); }
.seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.toggles { display: grid; gap: 8px; }
.tog { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.tog input { width: 17px; height: 17px; accent-color: var(--primary); margin: 0; }
.note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; }

.btn { border: 1px solid transparent; border-radius: 10px; padding: 9px 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { border-color: var(--primary); }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.big { padding: 13px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.chip { border: 1px solid var(--border); background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }

/* ---------------------------------------------------------- prompter */
#prompter { position: fixed; inset: 0; background: var(--p-bg); color: var(--p-ink); overflow: hidden; }
#prompter.light { --p-bg: #fbfaf6; --p-ink: #111; --p-said: rgba(17,17,17,.3); --p-cue: hsl(238, 50%, 48%); --p-next: hsl(238, 75%, 59%); }
#stage { position: absolute; inset: 0; }
#stage.mirror { transform: scaleX(-1); }
#stage.flip { transform: scaleY(-1); }
#stage.mirror.flip { transform: scale(-1, -1); }
#scroller { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
#scroller::-webkit-scrollbar { display: none; }
#text {
  position: relative;
  padding: calc(var(--read) * 1vh) var(--margin) 100vh;
  font-size: var(--fs);
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
}
#text p { margin: 0 0 0.7em; }
#text .w { cursor: pointer; transition: color .25s; border-radius: 0.12em; }
#text .w.said { color: var(--p-said); }
#text .w.next { box-shadow: inset 0 -0.09em 0 var(--p-next); }
#text .cue { color: var(--p-cue); font-size: 0.5em; font-weight: 500; line-height: 1.35; display: inline-block; vertical-align: 0.15em; opacity: .85; }
#text h3.cue { display: block; font-size: 0.42em; letter-spacing: .06em; text-transform: uppercase; margin: 1.2em 0 0.6em; vertical-align: 0; }
#text hr { border: 0; height: 0.6em; margin: 0; }
#text .end { color: var(--p-cue); font-size: .45em; text-align: center; padding-top: 1em; }

#readLine { position: absolute; left: 0; right: 0; top: calc(var(--read) * 1%); height: 0; pointer-events: none; }
#readLine i { position: absolute; left: 4px; top: -0.55rem; border: 0.55rem solid transparent; border-left: 0.8rem solid var(--p-next); opacity: .9; }
#readLine::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.12); }
#prompter.light #readLine::after { border-top-color: rgba(0,0,0,.1); }

.bar {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px;
  background: var(--p-bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #eee; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center;
  transition: opacity .35s, transform .35s;
}
.bar.idle { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.bar .spacer { width: 6px; }
.ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: inherit; cursor: pointer; }
.ib:hover { background: rgba(255,255,255,.1); }
.ib svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ib svg .fill { fill: currentColor; stroke: none; }
.ib .txt { font-weight: 700; font-size: 15px; }
.ib.on { color: var(--p-next); }
.ib.main { background: var(--primary); color: #fff; padding: 0 16px; font-weight: 600; }
.ib.main:hover { background: var(--primary); filter: brightness(1.1); }
.ib.main.live { background: hsl(0, 72%, 52%); }
.ib.main svg { display: none; }
#prompter[data-mode="voice"] .ib.main:not(.live) .i-mic,
#prompter[data-mode="voice"] .ib.main.live .i-mic,
#prompter[data-mode="scroll"] .ib.main:not(.live) .i-play,
#prompter[data-mode="scroll"] .ib.main.live .i-pause { display: block; }
.status { font-size: 13px; color: #bbb; padding: 0 6px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.status.listening .dot { background: hsl(140, 70%, 50%); }
.status.hearing .dot { background: hsl(140, 80%, 55%); box-shadow: 0 0 0 4px hsla(140, 80%, 55%, .25); }
.status.error { color: hsl(10, 90%, 70%); white-space: normal; max-width: 300px; }
@media (max-width: 600px) { .status.error { order: 10; flex-basis: 100%; max-width: none; justify-content: center; padding: 4px 8px; } }
.status.error .dot { background: hsl(10, 90%, 60%); }

.heard:empty { display: none; }
.heard {
  position: absolute; left: 0; right: 0; top: 0; text-align: center;
  padding: calc(10px + env(safe-area-inset-top)) 16px 22px;
  background: linear-gradient(var(--p-bg) 55%, transparent);
  font-size: 14px; color: rgba(255,255,255,.55); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#prompter.light .heard:empty { display: none; }
.heard { color: rgba(0,0,0,.5); }