:root {
  --bg:       #f5f2ee;
  --surface:  #ffffff;
  --surface2: #ede9e3;
  --border:   #ddd8d0;
  --border2:  #c8c2b8;
  --red:      #e63946;
  --red-dim:  rgba(230,57,70,0.12);
  --text:     #1b2a4a;
  --text2:    #4a5a78;
  --text3:    #a8b4c4;
  --dim:      #ddd8d0;
  --r:        10px;
  --font:     'Plus Jakarta Sans', sans-serif;
  --script:   'Courier Prime', 'Courier New', monospace;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); overflow-x:hidden; }

/* ── SETUP SCREEN ────────────────────────────────────────── */
#setup {
  min-height:100vh; display:flex; flex-direction:column;
  padding:16px 32px 24px;
}


/* ── Persistent header ──────────────────────────────────────── */
.app-header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--bg); border-bottom:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 32px; height:64px;
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
}
.app-header .logo-wrap { text-decoration:none; }
.app-header-right { display:flex; align-items:center; gap:20px; }
.header-tagline {
  font-family:'Bebas Neue',sans-serif; font-size:22px;
  line-height:1.05; text-align:right; letter-spacing:0.04em;
}
.header-tagline .t1 { color:var(--text); display:block; }
.header-tagline .t2 { color:var(--red); display:block; }
/* Push all page content below fixed header */
#setup { padding-top:76px; }


.setup-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:52px;
}

.wordmark {
  font-family:'Bebas Neue',sans-serif; font-size:36px;
  letter-spacing:0.06em; color:var(--text); cursor:pointer;
  text-decoration:none; line-height:1;
}
.wordmark em { color:var(--red); font-style:normal; }
.wordmark-sub {
  font-family:var(--font); font-size:11px; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--text2);
  display:block; margin-top:2px;
}


.logo-wrap { display:flex; align-items:center; gap:13px; cursor:pointer; text-decoration:none; }
.logo-mark-icon { width:32px; height:38px; flex-shrink:0; transition:transform 0.15s; }
.logo-mark-icon:hover { transform:scale(1.06); }
.logo-mark-icon svg { width:28px; height:28px; }
.wm { font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.wm .wm-line { color:#1b2a4a; }
.wm .wm-runner { color:var(--red); }
.wm-sub { font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--text2); display:block; margin-top:2px; }
.gear-btn {
  width:40px; height:40px; border-radius:8px; border:1.5px solid var(--border2);
  background:transparent; color:var(--text2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.15s;
}
.gear-btn:hover { border-color:#555; color:var(--text); }
.gear-btn svg { width:18px; height:18px; }

.setup-hero { margin-bottom:40px; }
.hero-headline {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,7vw,88px);
  line-height:0.95; letter-spacing:0.03em; color:var(--text);
  margin-bottom:14px;
}
.hero-headline span { color:var(--red); }
.hero-sub {
  font-size:16px; color:var(--text2); font-weight:400; max-width:480px;
  line-height:1.65;
}

/* ── Drop zone ───────────────────────────────────────────── */
.drop-zone {
  border:1px dashed var(--border2); border-radius:16px;
  padding:36px; margin-bottom:28px; cursor:pointer;
  transition:all 0.2s; position:relative; background:var(--surface);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color:var(--border2); background:rgba(0,0,0,0.03);
}
.drop-zone input[type=file] { display:none; }

.drop-inner {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; text-align:center;
}
.drop-icon {
  width:52px; height:52px; border-radius:50%; border:1.5px solid var(--border2);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.drop-icon svg { width:22px; height:22px; color:var(--text2); }
.drop-title { font-size:17px; font-weight:700; color:var(--text); }
.drop-sub { font-size:13px; color:var(--text2); }
.drop-sub span { color:var(--red); cursor:pointer; }
.drop-sub span:hover { text-decoration:underline; }
.drop-formats { font-size:11px; color:var(--text3); letter-spacing:0.05em; }
.drop-paste-divider { display:flex; align-items:center; gap:12px; width:100%; max-width:400px; margin:8px 0; }
.drop-paste-divider::before, .drop-paste-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.drop-paste-divider span { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.1em; }

textarea.script-paste {
  width:100%; min-height:120px; resize:vertical;
  font-family:var(--script); font-size:12.5px; line-height:1.65;
  border:1.5px solid var(--border); border-radius:8px;
  padding:14px; background:var(--bg); color:var(--text);
  outline:none; transition:border-color 0.15s; max-width:640px;
}
textarea.script-paste:focus { border-color:var(--border2); }
textarea.script-paste::placeholder { color:var(--text3); }

.script-loaded-bar {
  display:none; align-items:center; gap:10px;
  background:rgba(0,0,0,0.04); border:1.5px solid var(--border2);
  border-radius:8px; padding:5px 14px; font-size:13px; color:var(--text2);
}
.script-loaded-bar .loaded-name { color:var(--text); font-weight:600; }
.script-loaded-bar .reload-btn { margin-left:auto; font-size:12px; color:var(--text2); background:none; border:none; cursor:pointer; font-family:var(--font); }
.script-loaded-bar .reload-btn:hover { color:var(--text); }

/* ── Config section ──────────────────────────────────────── */
#config-section { display:none; flex-direction:column; gap:20px; margin-bottom:28px; }
#config-section.visible { display:flex; }

/* ── SCRIPT PREVIEW PANEL ─────────────────────────────────── */
#preview-panel { display:none; flex-direction:column; gap:6px; margin-bottom:10px; }
#preview-panel.visible { display:flex; }
.preview-notice {
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--r); padding:4px 12px;
  display:flex; gap:8px; align-items:center;
}
.preview-notice-icon { font-size:12px; flex-shrink:0; }
.preview-notice-text { font-size:11px; color:var(--text2); line-height:1.4; }
.preview-notice-text strong { font-weight:600; color:var(--text); }
.preview-header {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:10px;
  padding:6px 12px;
  border:1.5px solid var(--border); border-radius:var(--r);
  background:var(--surface2); margin-bottom:4px;
}
.preview-title { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; }
.preview-pills { display:flex; gap:5px; align-items:center; justify-content:center; flex-wrap:nowrap; }
.preview-pill {
  font-size:11px; font-weight:600; padding:2px 9px;
  border-radius:20px; border:1.5px solid var(--border);
  color:var(--text2); cursor:pointer; transition:all 0.15s;
  white-space:nowrap; text-align:center;
}
/* All pill — fixed circle */
.preview-pill[data-char="all"] {
  width:26px; height:26px; padding:0;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.preview-pill:hover { border-color:var(--border2); color:var(--text); }
.preview-pill.mine { background:rgba(27,42,74,0.08); color:var(--text); border-color:var(--text); }
.preview-pill.active { background:var(--text); color:var(--surface); border-color:var(--text); }
.preview-pill.mine.active { background:var(--text); color:var(--surface); }
/* Grouped action buttons */
.preview-pill-actions { display:flex; gap:3px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2px; }
.preview-pill-actions button { font-size:11px; font-weight:500; font-family:var(--font); padding:3px 10px; border-radius:6px; border:none; background:transparent; color:var(--text2); cursor:pointer; white-space:nowrap; }
.preview-pill-actions button:hover { background:var(--surface2); }
.preview-pill-actions button.primary { color:var(--text); font-weight:700; }
.preview-lines {
  border:1.5px solid var(--border); border-radius:var(--r) var(--r) 0 0;
  overflow:hidden; max-height:260px; overflow-y:auto; background:#fff;
}
/* Mic bar — sits under preview lines */
.preview-mic-bar-wrap { height:3px; background:var(--border); border-radius:0 0 var(--r) var(--r); overflow:hidden; margin-bottom:6px; }
.preview-mic-bar { height:100%; width:5%; background:var(--border2); border-radius:2px; transition:width 0.07s; }
.preview-line {
  display:flex; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--border); font-size:15px;
}
.preview-line:last-child { border-bottom:none; }
.preview-line.mine { background:rgba(27,42,74,0.04); }
.preview-char {
  font-size:12px; font-weight:700; min-width:68px;
  color:var(--text3); text-transform:uppercase;
  letter-spacing:0.05em; padding-top:2px; flex-shrink:0;
}
.preview-char.mine { color:var(--text); }
.preview-dialogue { color:var(--text); line-height:1.5; flex:1; font-size:15px; }
.preview-warn {
  display:flex; gap:10px; padding:9px 16px;
  background:rgba(230,57,70,0.06); border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text2);
}
.preview-warn-icon { color:var(--red); flex-shrink:0; font-weight:700; }
/* ── FLAG BOXES ──────────────────────────────────────────── */
.flag-box { background:rgba(230,57,70,0.05); border:1.5px solid rgba(230,57,70,0.25); border-radius:var(--r); padding:14px 16px; margin-bottom:10px; }
.flag-box-title { font-size:13px; font-weight:700; color:var(--red); margin-bottom:4px; }
.flag-box-body { font-size:12px; color:var(--text2); line-height:1.6; margin-bottom:10px; }
.flag-context { border:1px solid rgba(230,57,70,0.2); border-radius:8px; overflow:hidden; margin-bottom:12px; }
.flag-ctx-row { display:flex; gap:12px; padding:7px 12px; font-size:12px; border-bottom:1px solid rgba(230,57,70,0.12); }
.flag-ctx-row:last-child { border-bottom:none; }
.flag-ctx-row.problem { background:rgba(230,57,70,0.08); }
.flag-ctx-tag { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; min-width:60px; padding-top:2px; flex-shrink:0; }
.flag-ctx-text { color:var(--text2); font-style:italic; flex:1; line-height:1.5; }
.flag-ctx-text.problem { color:var(--red); font-style:normal; font-weight:600; }
.flag-fields { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.flag-field-row { display:flex; align-items:center; gap:10px; }
.flag-field-label { font-size:12px; font-weight:600; color:var(--text2); min-width:130px; flex-shrink:0; }
.flag-field-select { font-size:13px; padding:5px 10px; border:1.5px solid rgba(230,57,70,0.3); border-radius:7px; background:var(--surface); color:var(--text); font-family:var(--font); flex:1; outline:none; cursor:pointer; }
.flag-field-input { font-size:13px; padding:5px 10px; border:1.5px solid rgba(230,57,70,0.3); border-radius:7px; background:var(--surface); color:var(--text); font-family:var(--font); flex:1; outline:none; }
.flag-field-input:focus,.flag-field-select:focus { border-color:var(--red); }
.flag-save-btn { background:var(--red); color:#fff; border:none; border-radius:8px; padding:7px 20px; font-size:13px; font-weight:700; font-family:var(--font); cursor:pointer; }
.flag-save-btn:hover { background:#cc2b36; }
.preview-line-context { background:var(--surface2); opacity:0.6; font-style:italic; }
.preview-line-context .preview-char { color:var(--text3); }
.preview-line-context .preview-dialogue { color:var(--text2); }
.preview-context-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:0.08em; padding-top:3px; min-width:70px; flex-shrink:0; }
.preview-edit-icon { font-size:12px; cursor:pointer; color:var(--text3); padding:2px 8px; border-radius:4px; transition:all 0.15s; flex-shrink:0; font-family:var(--font); font-weight:600; }
.preview-edit-icon:hover { background:var(--surface2); color:var(--text); }
/* Beat UI */
.beat-dot { display:inline-block; width:8px; height:8px; background:#1b2a4a; border-radius:50%; cursor:pointer; opacity:0; vertical-align:middle; margin:0 3px; transition:opacity 0.15s, transform 0.1s; flex-shrink:0; }
.pacing-mode-on .beat-dot { opacity:0.45; }
.pacing-mode-on .beat-dot:hover { opacity:1; transform:scale(1.3); }
.beat-pill { display:inline-flex; align-items:center; gap:3px; background:#eef1f7; color:#4a6080; border:0.5px solid #c5d0e0; border-radius:12px; padding:1px 8px; font-size:11px; font-weight:500; cursor:pointer; vertical-align:middle; margin:0 3px; font-family:var(--font); white-space:nowrap; }
.beat-pill:hover { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.beat-dropdown { position:fixed; z-index:9999; background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.15); padding:4px; display:flex; flex-direction:column; gap:2px; min-width:100px; }
.beat-dropdown button { padding:5px 16px; border:none; background:none; cursor:pointer; border-radius:4px; font-family:var(--font); font-size:13px; text-align:left; color:var(--text); }
.beat-dropdown button:hover { background:var(--surface2); }
.preview-beat-wrap { flex:1; display:flex; flex-wrap:wrap; align-items:center; row-gap:4px; }
.preview-line.editing { background:rgba(27,42,74,0.06); padding:8px 12px; flex-wrap:wrap; gap:6px; }
.preview-edit-char { font-size:12px; font-weight:700; padding:4px 8px; border:1.5px solid var(--border2); border-radius:6px; background:var(--surface); color:var(--text); font-family:var(--font); outline:none; width:90px; text-transform:uppercase; }
.preview-edit-char:focus { border-color:var(--text); }
.preview-edit-dial { flex:1; font-size:13px; padding:4px 10px; border:1.5px solid var(--border2); border-radius:6px; background:var(--surface); color:var(--text); font-family:var(--font); outline:none; min-width:200px; }
.preview-edit-dial:focus { border-color:var(--text); }
.preview-edit-actions { display:flex; gap:6px; align-items:center; }
.preview-edit-confirm { padding:4px 12px; border-radius:6px; background:var(--text); color:var(--surface); border:none; font-size:12px; font-weight:700; font-family:var(--font); cursor:pointer; }
.preview-edit-delete { padding:4px 10px; border-radius:6px; background:transparent; color:var(--red); border:1.5px solid rgba(230,57,70,0.3); font-size:12px; font-weight:700; font-family:var(--font); cursor:pointer; }
.preview-edit-cancel { padding:4px 10px; border-radius:6px; background:transparent; color:var(--text3); border:1.5px solid var(--border); font-size:12px; font-family:var(--font); cursor:pointer; }
.preview-actions { display:flex; gap:10px; justify-content:flex-end; }
.preview-back-btn {
  padding:12px 24px; border-radius:var(--r);
  border:1.5px solid var(--border); background:transparent;
  color:var(--text2); font-size:15px; font-weight:600;
  font-family:var(--font); cursor:pointer;
}
.preview-back-btn:hover { border-color:var(--border2); color:var(--text); }
.feature-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 8px; }
.feature-card { background:var(--surface); border:1.5px solid var(--border2); border-radius:10px; padding:22px 24px; }
.feature-card-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex-shrink:0; }
.feature-card-icon.navy { background:#1b2a4a; }
.feature-card-icon.red { background:var(--red); }
.feature-card h3 { font-size:18px; font-weight:800; color:var(--text); margin:0 0 8px; line-height:1.3; }
.feature-card p { font-size:17px; color:var(--text2); line-height:1.75; margin:0; }

.config-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--text2); margin-bottom:8px;
}

.your-char-row { display:flex; gap:10px; align-items:flex-end; }
.your-char-row .field { flex:1; }

.detected-chars { display:flex; flex-direction:column; gap:10px; }
.char-voice-row {
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r); padding:14px 16px;
}
.char-voice-name {
  font-family:var(--script); font-size:13px; font-weight:700;
  color:var(--text); letter-spacing:0.08em; text-transform:uppercase;
  min-width:100px;
}
.char-voice-name.is-you { color:var(--red); }
.char-voice-name.is-you::after { content:' (you)'; font-size:10px; opacity:0.6; font-family:var(--font); }

/* ── Post-run screens (Fix Script / Adjust Timing) ───────────── */
.post-run-screen {
  display:none; position:fixed; top:64px; left:0; right:0; bottom:0;
  background:var(--bg); z-index:45; flex-direction:column;
  overflow:hidden; padding:16px 32px 0;
}
.post-run-screen.visible { display:flex; }
.prs-panel {
  display:flex; flex-direction:column; flex:1;
  width:100%; overflow:hidden;
}
.prs-header {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:10px;
  padding:6px 12px;
  border:1.5px solid var(--border); border-radius:var(--r) var(--r) 0 0;
  background:var(--surface2); flex-shrink:0;
}
.prs-title { font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; }
.prs-hint { font-size:17px; color:var(--text2); font-weight:500; text-align:center; line-height:1.5; }
.prs-actions { display:flex; gap:3px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2px; }
.prs-actions button { font-size:12px; font-weight:600; font-family:var(--font); padding:4px 14px; border-radius:6px; border:none; background:transparent; color:var(--text2); cursor:pointer; white-space:nowrap; }
.prs-actions button:hover { background:var(--surface2); color:var(--text); }
.prs-actions button.danger { color:var(--red); }
.prs-lines {
  border:1.5px solid var(--border); border-top:none;
  border-radius:0 0 var(--r) var(--r);
  overflow-y:auto; flex:1; background:#fff;
}
.prs-line-row {
  display:flex; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--border); font-size:15px;
  align-items:flex-start;
}
.prs-line-row:last-child { border-bottom:none; }
.prs-line-row.mine { background:rgba(27,42,74,0.04); }
.prs-line-row.editing { background:rgba(27,42,74,0.06); padding:8px 12px; flex-wrap:wrap; gap:6px; }
.prs-char {
  font-size:12px; font-weight:700; min-width:68px;
  color:var(--text3); text-transform:uppercase;
  letter-spacing:0.05em; padding-top:2px; flex-shrink:0;
}
.prs-char.mine { color:var(--text); }
.prs-body { color:var(--text); line-height:1.5; flex:1; font-size:15px; }
.prs-body.others { color:var(--text2); }
.prs-beat-body { display:flex; flex-wrap:wrap; align-items:center; row-gap:2px; flex:1; font-size:15px; }
.prs-edit-btn {
  font-size:12px; cursor:pointer; color:var(--text3);
  padding:2px 8px; border-radius:4px; transition:all 0.15s;
  flex-shrink:0; font-family:var(--font); font-weight:600;
  background:none; border:none;
}
.prs-edit-btn:hover { background:var(--surface2); color:var(--text); }
.prs-right { flex-shrink:0; padding-top:2px; }
.prs-reset-line { font-size:10px; color:var(--text3); background:none; border:none; cursor:pointer; font-family:var(--font); padding:0; }
.prs-reset-line:hover { color:var(--red); }
.prs-beat-dot {
  display:inline-block; width:14px; height:14px;
  cursor:pointer; vertical-align:middle; flex-shrink:0;
  position:relative;
}
.prs-beat-dot::after {
  content:''; display:block; width:6px; height:6px;
  border-radius:50%; background:var(--text3);
  margin:4px auto; opacity:0.3; transition:all 0.15s;
}
.prs-beat-dot:hover::after { background:#1d9e75; opacity:1; transform:scale(1.4); }
.prs-beat-dot:hover::before {
  content:''; position:absolute; left:6px; top:0; bottom:0;
  width:2px; background:rgba(29,158,117,0.3); border-radius:2px;
}
.prs-beat-pill {
  display:inline-flex; align-items:center;
  background:#eef1f7; color:#4a6080;
  border:0.5px solid #c5d0e0; border-radius:12px;
  padding:1px 8px; font-size:11px; font-weight:500;
  cursor:pointer; vertical-align:middle; margin:0 2px;
  font-family:var(--font); white-space:nowrap; border:none;
}
.prs-beat-pill:hover { background:#fee2e2; color:#991b1b; }
.prs-beat-menu {
  position:fixed; z-index:9999; background:#fff;
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  padding:4px; display:flex; flex-direction:column; gap:2px; min-width:100px;
}
.prs-beat-menu button {
  padding:5px 16px; border:none; background:none; cursor:pointer;
  border-radius:4px; font-family:var(--font); font-size:13px;
  text-align:left; color:var(--text);
}
.prs-beat-menu button:hover { background:var(--surface2); }
.prs-footer {
  display:flex; align-items:center; gap:16px;
  padding:14px 0 20px; flex-shrink:0;
}
.prs-run-again {
  height:48px; padding:0 28px; background:var(--red); color:#fff;
  border:none; border-radius:var(--r); font-size:15px; font-weight:800;
  cursor:pointer; font-family:var(--font); letter-spacing:0.02em;
  transition:all 0.15s; display:flex; align-items:center; gap:8px;
}
.prs-run-again:hover { background:#cc2b36; }
.prs-back { font-size:12px; color:var(--text2); background:none; border:none; cursor:pointer; font-family:var(--font); }
.prs-back:hover { color:var(--text); }
.prs-reset-all-btn { font-size:11px; color:var(--red); background:none; border:none; cursor:pointer; font-family:var(--font); margin-left:auto; }
.prs-beat-status { font-size:11px; color:#0f6e56; opacity:0; transition:opacity 0.3s; }
.prs-char-sel { width:110px; height:30px; padding:0 8px; border:1.5px solid var(--border2); border-radius:6px; background:var(--surface); color:var(--text); font-family:var(--font); font-size:12px; font-weight:700; outline:none; cursor:pointer; flex-shrink:0; }
.prs-dial-input { flex:1; min-width:0; font-size:13px; padding:4px 10px; border:1.5px solid var(--border2); border-radius:6px; background:var(--surface); color:var(--text); font-family:var(--font); outline:none; }
.prs-save-btn { padding:4px 12px; border-radius:6px; background:var(--text); color:var(--surface); border:none; font-size:12px; font-weight:700; font-family:var(--font); cursor:pointer; flex-shrink:0; }
.prs-cancel-btn { padding:4px 10px; border-radius:6px; background:transparent; color:var(--text3); border:1.5px solid var(--border); font-size:12px; font-family:var(--font); cursor:pointer; flex-shrink:0; }

/* ── Scene picker ─────────────────────────────────────────────── */
.scene-picker-grid { display:flex; flex-direction:column; gap:8px; }
.scene-card {
  border:1.5px solid var(--border); border-radius:var(--r);
  padding:14px 16px; background:var(--surface);
  cursor:pointer; transition:all 0.15s;
}
.scene-card:hover { border-color:var(--border2); }
.scene-card.selected {
  border-color:#3a7; box-shadow:0 0 0 1px #3a7;
  background:rgba(51,170,119,0.06);
}
.scene-card-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--text); margin-bottom:4px;
}
.scene-card-meta { font-size:12px; color:var(--text2); margin-bottom:5px; }
.scene-card-preview {
  font-size:12px; color:var(--text3); font-style:italic;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.mode-toggle-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.mode-btn {
  border:1.5px solid var(--border); border-radius:var(--r);
  padding:16px; background:var(--surface); color:var(--text2);
  cursor:pointer; font-family:var(--font); text-align:center;
  transition:all 0.15s;
}
.mode-btn:hover { border-color:var(--border2); color:var(--text); }
.mode-btn.active { border-color:var(--text); background:rgba(27,42,74,0.06); color:var(--text); }
.mode-btn.active .mode-btn-desc { color:var(--text2); }.mode-btn-name { font-size:15px; font-weight:700; display:block; }
.mode-btn-desc { font-size:12px; color:var(--text2); display:block; margin-top:3px; }


.start-btn {
  height:56px; background:var(--red); color:#fff;
  border:none; border-radius:var(--r); font-size:17px; font-weight:800;
  cursor:pointer; font-family:var(--font); letter-spacing:0.02em;
  transition:all 0.15s; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 4px 20px rgba(230,57,70,0.3);
}
.start-btn:hover { background:#cc2b36; box-shadow:0 6px 28px rgba(230,57,70,0.45); transform:translateY(-1px); }
.start-btn:active { transform:translateY(0); }

/* ── SETTINGS PANEL ──────────────────────────────────────── */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:100; backdrop-filter:blur(6px); }
.overlay.open { display:flex; align-items:flex-start; justify-content:flex-end; }

/* ── Parser Inspector ────────────────────────────────────────── */
.inspector-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; align-items:flex-start; justify-content:flex-end; }
.inspector-overlay.open { display:flex; }
.inspector-panel { width:620px; max-width:95vw; height:100vh; overflow-y:auto; background:var(--surface); display:flex; flex-direction:column; box-shadow:-4px 0 32px rgba(0,0,0,0.2); }
.inspector-header { position:sticky; top:0; background:var(--surface); border-bottom:1.5px solid var(--border); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; z-index:10; }
.inspector-title { font-size:13px; font-weight:700; color:var(--text); letter-spacing:0.04em; }
.inspector-close { background:none; border:none; font-size:18px; color:var(--text2); cursor:pointer; padding:4px 8px; border-radius:4px; font-family:var(--font); }
.inspector-close:hover { background:var(--surface2); }
.inspector-body { padding:16px 20px; display:flex; flex-direction:column; gap:12px; font-size:12px; }
.inspector-line { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.inspector-line-header { padding:7px 12px; background:var(--surface2); display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.inspector-line-char { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); min-width:60px; }
.inspector-line-char.mine { color:var(--text); }
.inspector-line-type { font-size:10px; font-weight:600; padding:1px 7px; border-radius:10px; background:var(--border); color:var(--text2); }
.inspector-line-type.me { background:rgba(27,42,74,0.12); color:var(--text); }
.inspector-line-id { font-size:10px; color:var(--text3); margin-left:auto; font-family:var(--script); }
.inspector-dialogue { padding:7px 12px; font-family:var(--script); font-size:12px; color:var(--text); line-height:1.5; border-bottom:1px solid var(--border); }
.inspector-perf { padding:8px 12px; display:flex; flex-direction:column; gap:4px; }
.inspector-row { display:flex; align-items:flex-start; gap:8px; }
.inspector-key { font-size:10px; font-weight:700; color:var(--text3); min-width:130px; letter-spacing:0.04em; text-transform:uppercase; padding-top:1px; flex-shrink:0; }
.inspector-val { font-size:11px; color:var(--text); font-family:var(--script); flex:1; line-height:1.5; }
.inspector-val.flag { color:var(--red); font-weight:700; }
.inspector-val.ending { font-weight:700; color:var(--text); }
.inspector-val.neutral { color:var(--text3); }
.inspector-empty { text-align:center; padding:40px 20px; color:var(--text3); font-size:13px; }
.settings-panel {
  width:340px; height:100vh; overflow-y:auto;
  background:var(--surface); border-left:1px solid var(--border2);
  padding:28px 24px; display:flex; flex-direction:column; gap:22px;
}
.sp-header { display:flex; align-items:center; justify-content:space-between; }
.sp-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:0.06em; color:var(--text); }
.sp-close { background:none; border:none; color:var(--text2); font-size:20px; cursor:pointer; }
.sp-close:hover { color:var(--text); }
.sp-section { border-top:1px solid var(--border); padding-top:18px; display:flex; flex-direction:column; gap:12px; }
.sp-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text2); }
.sp-note { font-size:11px; color:var(--text3); }
.sp-note a { color:var(--text2); }

/* ── Form elements ───────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12px; font-weight:600; color:var(--text2); }
input[type=text], input[type=password], select {
  height:42px; border:1.5px solid var(--border); border-radius:8px;
  padding:0 13px; background:var(--bg); color:var(--text);
  font-size:14px; font-family:var(--font); width:100%;
  outline:none; transition:border-color 0.15s; -webkit-appearance:none;
}
input:focus, select:focus { border-color:var(--border2); }
input::placeholder { color:var(--text3); }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer;
}
.btn-sm { height:34px; padding:0 12px; background:transparent; color:var(--text2); border:1.5px solid var(--border2); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all 0.15s; white-space:nowrap; }
.btn-sm:hover { border-color:#555; color:var(--text); }
.key-row { display:flex; gap:8px; align-items:flex-end; }
.key-row .field { flex:1; }
.range-row { display:flex; flex-direction:column; gap:6px; }
.range-top { display:flex; justify-content:space-between; }
.range-top label { font-size:12px; font-weight:600; color:var(--text2); }
.range-top span { font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; accent-color:var(--red); cursor:pointer; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.toggle-row label { font-size:13px; font-weight:600; color:var(--text2); }
.toggle { position:relative; width:42px; height:23px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.t-slider { position:absolute; inset:0; background:var(--border2); border-radius:12px; cursor:pointer; transition:background 0.2s; }
.t-slider:before { content:''; position:absolute; width:17px; height:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s; }
.toggle input:checked + .t-slider { background:var(--red); }
.toggle input:checked + .t-slider:before { transform:translateX(19px); }
.sp-save { height:46px; background:var(--red); color:#fff; border:none; border-radius:var(--r); font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); width:100%; transition:all 0.15s; }
.sp-save:hover { background:#cc2b36; }

/* ── ACTING SCREEN ───────────────────────────────────────── */
#acting {
  display:none; position:fixed; inset:0; background:var(--bg);
  flex-direction:column; overflow:hidden;
}
#acting.visible { display:flex; }

.acting-progress {
  height:2px; background:var(--border); flex-shrink:0;
  position:relative; overflow:hidden;
}
.acting-progress-fill { height:100%; background:var(--red); transition:width 0.4s; width:0%; }

.script-viewport {
  overflow-y:auto; padding:16px 24px;
  scroll-behavior:smooth;
  position:fixed;
  top:116px; left:20px; right:20px;
  bottom:360px;
  border:2px solid #1b2a4a;
  border-radius:10px;
  background:var(--bg);
}
.script-viewport::-webkit-scrollbar { width:0; }

.script-line {
  padding:10px 0 10px 20px; margin-bottom:2px;
  border-left:2px solid transparent; transition:all 0.3s;
}
.script-line-char {
  font-family:var(--script); font-size:11px; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--text3); margin-bottom:5px; transition:color 0.3s;
}
.script-line-text {
  font-family:var(--script); font-size:18px; line-height:1.85;
  color:var(--text3); transition:all 0.3s;
}

/* States */
.script-line.state-past .script-line-text { color:var(--text3); font-size:16px; }
.script-line.state-past .script-line-char { color:var(--dim); }

.script-line.state-speaking .script-line-text { color:var(--text); font-size:19px; }
.script-line.state-speaking .script-line-char { color:var(--text2); }
.script-line.state-speaking { border-left-color:var(--border2); }

.script-line.state-mine {
  border-left-color:var(--red);
  background:rgba(27,42,74,0.07); border-radius:0 8px 8px 0;
  padding:14px 20px 14px 20px;
}
.script-line.state-mine .script-line-char { color:var(--red); }
.script-line.state-mine .script-line-text { color:var(--text); font-size:22px; font-weight:700; }

.script-line.state-future { opacity:0.15; }
.reader-edit-btn {
  flex-shrink:0; margin-left:auto;
  background:var(--surface2); border:1.5px solid var(--border2);
  border-radius:6px; padding:3px 12px; font-size:12px;
  font-family:var(--font); font-weight:600;
  color:var(--text2); cursor:pointer;
  transition:all 0.15s;
}
.reader-edit-btn.always-visible { opacity:1; }
.reader-edit-btn:hover { background:var(--border); color:var(--text); }
.script-line.reader-editing { background:var(--surface2); }
.reader-edit-overlay { margin-top:10px; padding:12px; background:var(--surface); border:1.5px solid var(--border2); border-radius:8px; }
.reader-edit-label { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.reader-edit-fields { display:flex; gap:8px; margin-bottom:10px; }
.reader-edit-char-input { width:100px; padding:6px 10px; border:1.5px solid var(--border2); border-radius:6px; font-family:var(--font); font-size:13px; font-weight:700; color:var(--text); background:var(--bg); outline:none; text-transform:uppercase; }
.reader-edit-dial-input { flex:1; padding:6px 10px; border:1.5px solid var(--border2); border-radius:6px; font-family:var(--font); font-size:13px; color:var(--text); background:var(--bg); outline:none; }
.reader-edit-char-input:focus,.reader-edit-dial-input:focus { border-color:var(--text); }
.reader-edit-actions { display:flex; gap:8px; }
.reader-edit-save { background:var(--red); color:#fff; border:none; border-radius:6px; padding:7px 16px; font-size:13px; font-weight:700; font-family:var(--font); cursor:pointer; }
.reader-edit-cancel { background:transparent; border:1.5px solid var(--border); border-radius:6px; padding:7px 12px; font-size:13px; color:var(--text2); font-family:var(--font); cursor:pointer; }

/* ── Listening indicator ─────────────────────────────────── */
.listen-indicator {
  display:none; align-items:center; gap:10px;
  position:fixed; bottom:90px; left:32px; z-index:30;
  background:rgba(245,242,238,0.9); padding:8px 14px;
  border-radius:20px; border:1px solid var(--border);
}
.listen-indicator.visible { display:flex; }
.listen-dot {
  width:8px; height:8px; border-radius:50%; background:var(--red);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.7); }
}
.listen-waveform {
  display:flex; align-items:center; gap:3px; height:20px;
}
.listen-bar {
  width:3px; background:var(--red); border-radius:2px;
  animation:wave 1.2s ease-in-out infinite;
  opacity:0.6;
}
.listen-bar:nth-child(1) { animation-delay:0s; }
.listen-bar:nth-child(2) { animation-delay:0.1s; }
.listen-bar:nth-child(3) { animation-delay:0.2s; }
.listen-bar:nth-child(4) { animation-delay:0.3s; }
.listen-bar:nth-child(5) { animation-delay:0.2s; }
@keyframes wave {
  0%,100% { height:4px; }
  50% { height:18px; }
}
.vol-bar-acting {
  flex:1; height:3px; background:var(--border); border-radius:2px; overflow:hidden; max-width:120px;
}
.vol-fill-acting { height:100%; background:var(--red); border-radius:2px; width:0%; transition:width 0.04s; }

/* ── Acting controls ─────────────────────────────────────── */
.acting-controls {
  position:fixed; bottom:0; left:0; right:0;
  padding:16px 32px 24px;
  background:linear-gradient(to top,rgba(245,242,238,0.98) 60%,transparent);
  display:flex; align-items:center; justify-content:space-between;
}

.ctrl-left { display:flex; gap:10px; }
.ctrl-stop {
  height:44px; padding:0 20px; background:rgba(230,57,70,0.15);
  color:var(--red); border:1px solid rgba(230,57,70,0.3); border-radius:8px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; gap:8px; transition:all 0.15s;
}
.ctrl-stop:hover { background:var(--red); color:#fff; border-color:var(--red); }
.ctrl-exit {
  height:44px; padding:0 16px; background:transparent;
  color:var(--text2); border:1.5px solid var(--border2); border-radius:8px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; gap:6px; transition:all 0.15s;
}
.ctrl-exit:hover { border-color:#aaa; color:var(--text); }
.ctrl-top {
  height:44px; padding:0 20px; background:transparent;
  color:var(--text2); border:1.5px solid var(--border2); border-radius:8px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; gap:8px; transition:all 0.15s;
}
.ctrl-top:hover { border-color:#555; color:var(--text); }

.ctrl-right { display:flex; gap:10px; align-items:center; }
.ctrl-voice-toggle {
  height:44px; padding:0 16px; background:transparent;
  color:var(--text2); border:1.5px solid var(--border2); border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font);
  transition:all 0.15s;
}
.ctrl-voice-toggle:hover { border-color:#555; color:var(--text); }
.ctrl-voice-toggle.active { border-color:var(--red); color:var(--red); }

/* ── Voice quick panel ───────────────────────────────────── */
.voice-quick-panel {
  position:fixed; bottom:88px; right:32px;
  background:var(--surface2); border:1.5px solid var(--border2);
  border-radius:12px; padding:18px; width:280px;
  display:none; flex-direction:column; gap:14px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.voice-quick-panel.visible { display:flex; }
.vqp-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text2); }

/* ── Teleprompter ────────────────────────────────────────── */
#tp-screen {
  display:none; position:fixed; inset:0; background:#111;
  flex-direction:column;
}
#tp-screen.visible { display:flex; }
.tp-viewport {
  flex:1; overflow:hidden; padding:0 8vw;
  position:relative; margin-top:110px;
}
.tp-fade-t { display:none; }
.tp-fade-b { display:none; }
.tp-scroll { transition:transform 0.15s linear; padding:20px 0 50vh; }
/* Actor mode */
.tp-line { font-family:'Plus Jakarta Sans',sans-serif; font-size:28px; font-weight:600; line-height:1.6; color:#3a3a3a; padding:3px 0; transition:all 0.3s; }
.tp-line.tp-active { color:#ffffff; font-weight:800; }
.tp-line.tp-mine { color:#c04040; }
.tp-line.tp-mine.tp-active { color:#ff7070; font-weight:800; }
.tp-line.tp-other { color:#3a3a3a; }
.tp-line.tp-other.tp-active { color:#cccccc; }
.tp-char-label { font-size:11px !important; color:#333 !important; text-transform:uppercase; letter-spacing:0.14em; padding-top:18px !important; font-weight:700 !important; font-family:'Plus Jakarta Sans',sans-serif !important; }
/* YouTuber mode — single character, clean and bright */
.tp-line.tp-single { color:#555; font-size:32px; font-weight:600; line-height:1.65; padding:6px 0; }
.tp-line.tp-single.tp-active { color:#ffffff; font-weight:800; font-size:36px; }
.tp-bar {
  position:fixed; bottom:0; left:0; right:0;
  padding:14px 32px 20px;
  background:linear-gradient(to top,rgba(17,17,17,1) 60%,transparent);
  display:flex; align-items:center; gap:14px;
}
.tp-theme-btn { height:44px; padding:0 16px; background:transparent; color:#aaa; border:1.5px solid #444; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all 0.15s; flex-shrink:0; }
.tp-theme-btn:hover { border-color:#666; color:#fff; }
.tp-theme-btn.active { border-color:var(--red); color:var(--red); }
.tp-play-btn { height:44px; padding:0 20px; background:var(--red); color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); flex-shrink:0; transition:all 0.15s; }
.tp-play-btn:hover { background:#cc2b36; }
.tp-speed-row { display:flex; align-items:center; gap:10px; flex:1; }
.tp-speed-row span { font-size:12px; color:var(--text2); white-space:nowrap; }
.tp-stop { height:44px; padding:0 16px; background:transparent; color:var(--text2); border:1.5px solid var(--border2); border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.tp-stop:hover { border-color:#555; color:var(--text); }
.tp-top { height:44px; padding:0 16px; background:transparent; color:var(--text2); border:1.5px solid var(--border2); border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.tp-top:hover { border-color:#555; color:var(--text); }

/* ── Done screen ─────────────────────────────────────────── */
.done-overlay {
  position:fixed; inset:0; background:rgba(245,242,238,0.97);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; z-index:198;
}
.done-overlay.visible { display:flex; }
.done-title { font-family:'Bebas Neue',sans-serif; font-size:72px; letter-spacing:0.05em; color:var(--text); }
.done-sub { font-size:16px; color:var(--text2); }
.done-btns { display:flex; gap:12px; margin-top:8px; }
.done-again { height:48px; padding:0 28px; background:var(--red); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.done-again:hover { background:#cc2b36; }
.done-preview { height:48px; padding:0 28px; background:transparent; color:var(--text); border:1.5px solid var(--border2); border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.done-preview:hover { background:var(--surface2); }
.done-home { height:48px; padding:0 28px; background:transparent; color:var(--text2); border:1.5px solid var(--border2); border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--font); transition:all 0.15s; }
.done-home:hover { border-color:#555; color:var(--text); }
.done-download { height:48px; padding:0 24px; background:transparent; color:var(--text); border:1.5px solid var(--text); border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--font); display:none; align-items:center; gap:8px; transition:all 0.15s; }
.done-download:hover { background:var(--text); color:var(--bg); }
.rec-pill { display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:20px; background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.2); cursor:pointer; user-select:none; }
.rec-pill.off { background:rgba(0,0,0,0.04); border-color:var(--border2); }
.rec-dot-ani { width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; animation:recblink 1.5s ease-in-out infinite; }
.rec-pill.off .rec-dot-ani { background:var(--border2); animation:none; }
@keyframes recblink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }
.rec-label { font-size:12px; font-weight:700; color:var(--red); }
.rec-pill.off .rec-label { color:var(--text2); }
.rec-toggle { width:34px; height:18px; border-radius:9px; background:#1b2a4a; position:relative; flex-shrink:0; transition:background 0.2s; }
.rec-toggle-thumb { width:13px; height:13px; border-radius:50%; background:#fff; position:absolute; top:2.5px; right:2.5px; transition:right 0.2s; }
.rec-pill.off .rec-toggle { background:var(--border2); }
.rec-pill.off .rec-toggle-thumb { right:auto; left:2.5px; }

/* ── Debug ───────────────────────────────────────────────── */
.fader { -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--border2); border-radius:0; outline:none; cursor:pointer; }
.fader::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:4px; height:12px; background:var(--red); border-radius:1px; cursor:pointer; }
.fader::-moz-range-thumb { width:4px; height:12px; background:var(--red); border-radius:1px; cursor:pointer; border:none; }
.cd-dot { width:10px; height:10px; border-radius:50%; background:var(--border2); transition:background 0.3s; }
.cd-dot.active { background:var(--text); }
.cd-action { background:var(--red) !important; width:12px; height:12px; } color:var(--text3); background:none; border:none; cursor:pointer; padding:4px 0; font-family:var(--font); display:block; margin-top:6px; }
.debug-toggle:hover { color:var(--text2); }
.debug-panel { display:none; background:#050505; border:1.5px solid var(--border); border-radius:8px; padding:10px; margin-top:4px; font-family:'Courier New',monospace; font-size:10px; line-height:1.8; color:var(--text2); }
.ds { margin-bottom:4px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.ds:last-child { border-bottom:none; margin-bottom:0; }
.dl { color:var(--text3); }
.dv { color:var(--text2); }
.dv-good { color:#4caf50; } .dv-warn { color:#e09a30; } .dv-bad { color:var(--red); }
.log-wrap { max-height:80px; overflow-y:auto; }
.le { font-size:9px; color:var(--text3); }
.le.fired { color:#4caf50; font-weight:bold; }
.le.blocked { color:#e09a30; }
.le.override { color:var(--red); font-weight:bold; }

@media (max-width: 768px) {
  /* ── Header: tighter on mobile ── */
  .app-header { padding: 8px 14px; }
  .logo-mark-icon { width: 28px !important; height: 34px !important; }
  .logo-text-wrap { font-size: 20px !important; }
  .header-tagline { display: none !important; }

  /* ── Setup screen ── */
  #setup { padding: 10px 14px; }
  .config-section { padding: 12px; gap: 12px; }
  .your-char-row { flex-direction: column; }
  .mode-row { flex-direction: column; gap: 8px; }
  .mode-btn { width: 100%; }
  .start-btn { width: 100% !important; }

  /* ── Preview notice: smaller ── */
  .preview-notice { padding: 8px 12px; font-size: 13px; }

  /* ── Preview header: wrap onto two rows ── */
  .preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
  .preview-pills {
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
  }
  .preview-pill {
    font-size: 11px;
    padding: 3px 10px;
  }
  /* Action row (Reset/Add pauses): full width, space between */
  .preview-header > div:last-of-type {
    width: 100%;
    font-size: 12px;
  }

  /* ── Preview lines: tighter, smaller font ── */
  .preview-lines { max-height: 45vh; }
  .preview-line {
    padding: 7px 12px;
    gap: 8px;
    font-size: 13px;
  }
  .preview-char {
    min-width: 52px;
    font-size: 11px;
  }
  .preview-dialogue { font-size: 13px; line-height: 1.45; }

  /* ── Bottom actions: stack on mobile ── */
  .preview-actions {
    flex-direction: column-reverse;
    gap: 8px;
    align-items: stretch !important;
  }
  .preview-actions span {
    text-align: center;
    font-size: 12px;
  }

  /* ── Script viewport ── */
  .script-viewport { font-size: 16px !important; line-height: 1.6 !important; }

  /* ── Run screen controls ── */
  #acting > div:first-child { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .ctrl-stop, .ctrl-top, .ctrl-exit { font-size: 13px; padding: 8px 12px; flex: 1; min-width: 80px; }

  /* ── Voice pills ── */
  #vqp-char-voices { flex-direction: column; gap: 6px; width: 100%; }
  .vqp-char-row { width: 100%; }
  .vqp-char-row select { flex: 1; }

  /* ── Sliders: 2 col ── */
  #vqp-slider-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 12px 16px !important; }

  /* ── Hide MIC pill and spacebar sub-hint ── */
  #dg-status-pill { display: none; }
  #begin-sub { display: none; }
  .app-header .header-sub { display: none; }

  /* ── Feature cards: single column ── */
  .feature-cards { grid-template-columns: 1fr !important; }

  /* ── Drop zone ── */
  .drop-zone { padding: 20px 16px; }
}