:root {
  --ink: #0a1020;
  --panel: rgba(17, 25, 45, .92);
  --panel-2: rgba(23, 33, 58, .92);
  --line: rgba(255,255,255,.10);
  --muted: #93a0b9;
  --text: #f7f4ec;
  --gold: #efc76f;
  --gold-2: #fff0b0;
  --red: #ff3c4f;
  --green: #50d39a;
  --shadow: 0 18px 50px rgba(0,0,0,.34);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: #070b14; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* Control room */
.control-body { min-height: 100vh; background:
  radial-gradient(circle at 70% 0%, rgba(56,87,145,.20), transparent 34%),
  linear-gradient(145deg, #070b14 0%, #0a1020 52%, #090d18 100%); }
.app-shell { max-width: 1680px; margin: 0 auto; padding: 22px; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 4px 18px; border-bottom: 1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; gap:14px; }
.brand-mark { width: 48px; height: 48px; display:grid; place-items:center; border:1px solid rgba(239,199,111,.4); border-radius:14px; color:var(--gold); background:linear-gradient(145deg,rgba(239,199,111,.12),rgba(255,255,255,.02)); box-shadow: inset 0 0 24px rgba(239,199,111,.06); }
h1,h2,h3,p { margin:0; }
h1 { font-size: 23px; letter-spacing: -.02em; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: .22em; font-weight: 800; margin-bottom: 4px; }
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.status-pill, .mode-badge { height: 36px; padding: 0 13px; border-radius: 999px; display:flex; align-items:center; gap:8px; font-size:12px; color:#c7d1e5; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.status-pill span { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.mode-badge { height: 30px; color:var(--gold); border-color:rgba(239,199,111,.25); }
.btn { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.06); padding:10px 14px; border-radius:10px; font-weight:750; font-size:12px; letter-spacing:.03em; transition:.18s ease; text-decoration:none; }
.btn:hover, .icon-btn:hover { transform: translateY(-1px); border-color:rgba(239,199,111,.35); background:rgba(255,255,255,.09); }
.btn.live-btn { background:linear-gradient(180deg,#c92236,#9f1427); border-color:#f45464; box-shadow:0 0 25px rgba(255,60,79,.12); }
.btn.live-btn.on { box-shadow:0 0 28px rgba(255,60,79,.32); }
.btn.ghost { background:transparent; }
.btn.accent { background:linear-gradient(135deg,#caa34e,#e6c875); color:#17120a; border:0; }
.btn.small { padding:8px 11px; font-size:11px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:white; display:inline-block; margin-right:4px; }
.workspace { display:grid; grid-template-columns:minmax(520px,.9fr) minmax(620px,1.1fr); gap:18px; padding-top:18px; }
.panel { background:linear-gradient(180deg,rgba(18,26,46,.95),rgba(10,16,30,.95)); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:20px; overflow:hidden; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-heading.compact { margin-bottom: 12px; }
.grid { display:grid; gap:12px; }
.grid.three { grid-template-columns:repeat(3,1fr); }
.grid.two { grid-template-columns:1.35fr .65fr; }
.field { display:flex; flex-direction:column; gap:7px; color:#c7d0e2; font-size:11px; font-weight:700; letter-spacing:.04em; }
.field > span { display:flex; justify-content:space-between; align-items:center; }
.field b { color:var(--gold); font-weight:800; }
input, select, textarea { width:100%; color:#f5f7fb; background:#0a1020; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:11px 12px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:rgba(239,199,111,.55); box-shadow:0 0 0 3px rgba(239,199,111,.08); }
input[type="range"] { padding:8px 0; accent-color:#d8b45d; }
.verse-card { margin-top:16px; border:1px solid rgba(239,199,111,.16); background:
  radial-gradient(circle at 80% 0%,rgba(239,199,111,.08),transparent 30%),
  rgba(4,8,17,.6); border-radius:16px; padding:17px; }
.verse-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.verse-meta > div { display:flex; flex-direction:column; gap:3px; }
#verseRef { color:var(--gold); font-weight:850; letter-spacing:.14em; font-size:12px; }
.verse-meta small { color:var(--muted); }
.icon-btn { border:1px solid var(--line); color:#ccd5e6; background:rgba(255,255,255,.04); padding:7px 10px; border-radius:8px; font-size:11px; transition:.18s ease; }
.verse-preview { margin:14px 0 12px; font-family:Georgia,"Times New Roman",serif; color:#fffdf6; font-size:23px; line-height:1.45; }
.verse-editor { margin-top:12px; resize:vertical; font-family:Georgia,"Times New Roman",serif; line-height:1.5; }
.word-preview { display:flex; flex-wrap:wrap; gap:5px 7px; padding-top:10px; border-top:1px solid var(--line); }
.word-chip { color:#8793aa; font-size:12px; padding:3px 5px; border-radius:6px; transition:.12s ease; }
.word-chip.read { color:#f0ede5; }
.word-chip.active { color:#161109; background:linear-gradient(135deg,#e2b956,#ffe7a0); box-shadow:0 0 16px rgba(239,199,111,.25); transform:translateY(-1px); }
.transport { display:flex; justify-content:center; gap:10px; margin:16px 0 12px; }
.transport-btn { width:46px; height:42px; border-radius:11px; border:1px solid var(--line); background:#0a1020; color:#d7deeb; font-size:17px; transition:.15s ease; }
.transport-btn:hover { border-color:rgba(239,199,111,.4); transform:translateY(-1px); }
.transport-btn.primary { width:62px; color:#17120a; border:0; background:linear-gradient(135deg,#d4ad50,#ffe69c); font-size:16px; }
.verse-strip { display:flex; gap:7px; flex-wrap:wrap; max-height:72px; overflow:auto; padding-bottom:2px; }
.verse-pill { min-width:32px; height:31px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:#99a6bd; font-size:11px; font-weight:800; }
.verse-pill.active { color:#16110a; border-color:#e5bf65; background:var(--gold); }
.section-rule { height:1px; background:var(--line); margin:20px 0; }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mode-card { text-align:left; min-height:92px; padding:12px; border-radius:12px; border:1px solid var(--line); color:#dbe2ef; background:rgba(255,255,255,.025); transition:.16s ease; }
.mode-card strong { display:block; font-size:12px; margin-bottom:7px; }
.mode-card span { display:block; font-size:10.5px; line-height:1.4; color:#8e9ab0; }
.mode-card:hover, .mode-card.active { border-color:rgba(239,199,111,.35); background:rgba(239,199,111,.07); }
.mode-card.active strong { color:var(--gold); }
.settings-block { margin-top:12px; padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.15); }
.check-row { display:flex; align-items:center; gap:8px; margin-top:11px; color:#9facbf; font-size:11px; }
.check-row input { width:auto; accent-color:#d5b259; }
.notice { color:#9eabc0; font-size:11px; line-height:1.5; margin-bottom:10px; }
.transcript { margin-top:10px; min-height:54px; padding:10px; border-radius:9px; background:#070c16; border:1px solid var(--line); color:#8f9ab0; font-size:11px; line-height:1.45; }
.preview-tools { display:flex; gap:7px; }
.video-frame { aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid rgba(239,199,111,.18); background:#000; box-shadow:0 16px 40px rgba(0,0,0,.3); }
.video-frame iframe { width:100%; height:100%; border:0; display:block; }
.broadcast-info { display:grid; grid-template-columns:1.5fr .5fr; gap:10px; margin-top:10px; }
.broadcast-info > div { border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:10px; padding:10px 12px; min-width:0; }
.broadcast-info span { display:block; font-size:9px; color:#7d899e; letter-spacing:.1em; margin-bottom:4px; }
.broadcast-info code, .broadcast-info strong { color:#cbd4e5; font-size:10.5px; word-break:break-all; }
.import-box { border:1px dashed rgba(239,199,111,.25); border-radius:13px; padding:14px; background:rgba(239,199,111,.025); }
.import-box p { color:#99a5b9; font-size:11px; line-height:1.5; margin-bottom:10px; }
.import-box input[type=file] { margin-bottom:9px; padding:8px; }
.footer-bar { display:flex; justify-content:space-between; gap:20px; padding:14px 4px 0; color:#6f7b91; font-size:10px; letter-spacing:.04em; }

/* Broadcast overlay */
.overlay-body { margin:0; width:100vw; height:100vh; overflow:hidden; background:#02050b; }
.broadcast-scene { position:relative; width:100vw; height:100vh; min-width:100%; min-height:100%; overflow:hidden; isolation:isolate; background:
  radial-gradient(circle at 82% 23%, rgba(255,207,109,.20) 0 3%, transparent 24%),
  radial-gradient(circle at 50% 56%, rgba(28,59,102,.24), transparent 34%),
  linear-gradient(155deg,#030711 0%,#08172b 48%,#06101f 100%); }
.broadcast-scene::before { content:""; position:absolute; inset:0; z-index:-5; background:
  linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55)),
  repeating-linear-gradient(115deg,rgba(255,255,255,.010) 0 1px,transparent 1px 11px); opacity:.9; }
.sky-glow { position:absolute; right:-8vw; top:-18vh; width:70vw; height:68vh; z-index:-4; background:radial-gradient(ellipse at center,rgba(255,221,147,.31),rgba(200,143,55,.09) 34%,transparent 68%); filter:blur(8px); animation:breatheGlow 8s ease-in-out infinite alternate; }
.stars { position:absolute; inset:0; z-index:-3; opacity:.6; background-image:
  radial-gradient(circle at 16% 18%,rgba(255,226,156,.8) 0 1px,transparent 2px),
  radial-gradient(circle at 64% 23%,rgba(255,255,255,.5) 0 1px,transparent 2px),
  radial-gradient(circle at 78% 61%,rgba(255,218,128,.65) 0 2px,transparent 3px),
  radial-gradient(circle at 35% 67%,rgba(255,255,255,.35) 0 1px,transparent 2px),
  radial-gradient(circle at 91% 40%,rgba(255,216,120,.55) 0 1px,transparent 2px); background-size:420px 310px,530px 430px,610px 390px,480px 530px,710px 510px; animation:drift 22s linear infinite; }
.cross-silhouette { position:absolute; right:10.5vw; top:18vh; width:9vw; height:31vh; z-index:-1; opacity:.68; filter:drop-shadow(0 0 24px rgba(255,211,125,.12)); }
.cross-silhouette i, .cross-silhouette b { position:absolute; display:block; left:50%; top:50%; transform:translate(-50%,-50%); background:linear-gradient(90deg,#06090d,#11131a); border-radius:2px; }
.cross-silhouette i { width:15%; height:100%; }
.cross-silhouette b { width:100%; height:12%; top:34%; }
.bible-shape { position:absolute; left:-5vw; bottom:7vh; width:39vw; height:31vh; z-index:-2; transform:rotate(-5deg); opacity:.18; filter:blur(.4px); }
.bible-shape::before,.bible-shape::after { content:""; position:absolute; bottom:0; width:51%; height:95%; background:linear-gradient(135deg,rgba(255,245,215,.75),rgba(125,115,95,.17)); border:1px solid rgba(255,255,255,.15); box-shadow:inset 0 0 34px rgba(0,0,0,.4); }
.bible-shape::before { left:0; transform:skewY(7deg); border-radius:3% 1% 0 5%; }
.bible-shape::after { right:0; transform:skewY(-7deg); border-radius:1% 3% 5% 0; }
.vignette { position:absolute; inset:-5%; pointer-events:none; z-index:9; box-shadow:inset 0 0 13vw 4vw rgba(0,0,0,.73); }
.broadcast-header { position:absolute; top:3.6vh; left:3vw; right:3vw; height:13vh; display:grid; grid-template-columns:1fr 2.2fr 1fr; align-items:start; z-index:3; }
.overlay-live { justify-self:start; display:flex; align-items:center; gap:.65vw; padding:.78vh 1vw; border-radius:.55vw; background:linear-gradient(180deg,#d82338,#a70f25); border:.08vw solid rgba(255,126,138,.8); box-shadow:0 0 1.4vw rgba(255,42,66,.28), inset 0 0 .8vw rgba(255,255,255,.08); font-weight:850; font-size:1.05vw; letter-spacing:.06em; transition:.2s ease; }
.overlay-live.off { opacity:.34; filter:saturate(.2); }
.overlay-live span { width:.55vw; height:.55vw; border-radius:50%; background:#fff; box-shadow:0 0 .5vw rgba(255,255,255,.8); }
.broadcast-title { text-align:center; font-family:Georgia,"Times New Roman",serif; letter-spacing:.06em; text-shadow:0 .2vw 1vw rgba(0,0,0,.7); }
.broadcast-title > div { color:#f5d483; font-size:2.85vw; line-height:1; }
.broadcast-title small { display:block; color:#eef2f8; margin-top:1.05vh; font-size:1.1vw; letter-spacing:.5em; }
.holy-label { justify-self:end; text-align:right; color:#f2d891; font-size:.72vw; letter-spacing:.34em; font-weight:700; border-bottom:.08vw solid rgba(239,199,111,.55); padding-bottom:.75vh; }
.holy-label small { display:block; color:#a8b1c1; font-size:.48vw; letter-spacing:.26em; margin-top:1.1vh; line-height:1.4; }
.scripture-stage { position:absolute; left:14vw; right:14vw; top:30vh; bottom:19vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:2; }
.scripture-words { max-width:75vw; font-family:Georgia,"Times New Roman",serif; font-size:3.25vw; line-height:1.38; font-weight:500; letter-spacing:-.025em; text-shadow:0 .18vw .9vw rgba(0,0,0,.8); }
.scripture-words.long { font-size:2.68vw; }
.scripture-words.very-long { font-size:2.25vw; }
.scripture-word { display:inline-block; color:rgba(250,249,244,.86); margin:0 .13em; transition:color .13s ease, transform .13s ease, text-shadow .13s ease, opacity .13s ease; }
.scripture-word.read { color:#fffdf7; }
.scripture-word.active { color:#f7cf6a; transform:translateY(-.08em) scale(1.035); text-shadow:0 0 .35vw rgba(255,216,115,.9),0 0 1.4vw rgba(229,172,65,.34),0 .18vw .9vw rgba(0,0,0,.75); }
.scripture-word.active::after { content:""; display:block; height:.06em; margin:.02em .08em 0; border-radius:999px; background:linear-gradient(90deg,transparent,#ffd878,transparent); opacity:.7; }
.verse-reference { width:min(46vw,850px); margin-top:4.3vh; display:grid; grid-template-columns:1fr auto 1fr; gap:1.2vw; align-items:center; color:#eceff4; }
.verse-reference span { height:1px; background:linear-gradient(90deg,transparent,rgba(239,199,111,.8)); }
.verse-reference span:last-child { background:linear-gradient(90deg,rgba(239,199,111,.8),transparent); }
.verse-reference strong { font-family:Georgia,"Times New Roman",serif; font-size:1vw; letter-spacing:.22em; font-weight:500; }
.context-verse { max-width:64vw; font-family:Georgia,"Times New Roman",serif; color:rgba(229,235,244,.27); font-size:1.15vw; line-height:1.45; letter-spacing:.01em; display:none; }
.context-verse.previous { margin-bottom:2.8vh; }
.context-verse.next { margin-top:2.8vh; }
.overlay-body[data-layout="context"] .context-verse { display:block; }
.overlay-body[data-layout="context"] .scripture-words { font-size:2.85vw; }
.overlay-body[data-layout="minimal"] .broadcast-header,.overlay-body[data-layout="minimal"] .side-verse,.overlay-body[data-layout="minimal"] .side-message,.overlay-body[data-layout="minimal"] .footer-live { opacity:.18; }
.overlay-body[data-layout="minimal"] .scripture-stage { left:10vw; right:10vw; top:20vh; bottom:16vh; }
.overlay-body[data-layout="minimal"] .scripture-words { max-width:82vw; font-size:3.5vw; }
.side-verse { position:absolute; left:3.5vw; top:18vh; color:#a4adbe; font-size:.63vw; line-height:2.05; letter-spacing:.42em; border-left:.12vw solid #d5ad52; padding-left:1.2vw; }
.side-verse small { display:block; margin-top:.6vh; color:#d8b968; font-size:.48vw; letter-spacing:.3em; }
.side-message { position:absolute; right:4.2vw; top:51vh; color:#9aa4b6; font-size:.58vw; line-height:2.0; letter-spacing:.4em; }
.side-message i { display:block; width:3vw; height:.08vw; background:#caa247; margin-top:1.2vh; }
.broadcast-footer { position:absolute; left:3vw; right:3vw; bottom:3.4vh; height:8.3vh; z-index:3; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2vw; }
.progress-track { position:absolute; left:0; right:0; top:0; height:.25vh; border-radius:99px; background:rgba(214,224,240,.28); overflow:hidden; }
.progress-value { width:0%; height:100%; background:linear-gradient(90deg,#ffe596,#d2a443); box-shadow:0 0 1vw rgba(239,199,111,.45); transition:width .35s ease; }
.footer-tagline,.footer-live { color:#aeb7c6; font-size:.55vw; letter-spacing:.32em; }
.footer-live { display:flex; align-items:center; gap:.65vw; }
.book-icon { color:#efcb75; font-size:1.5vw; line-height:1; transform:rotate(90deg); }
.overlay-body[data-theme="midnight"] .broadcast-scene { background:radial-gradient(circle at 72% 22%,rgba(83,126,190,.22),transparent 25%),linear-gradient(145deg,#01040b,#071327 55%,#020711); }
.overlay-body[data-theme="midnight"] .sky-glow { background:radial-gradient(ellipse at center,rgba(115,167,239,.22),rgba(41,77,131,.08) 35%,transparent 68%); }
.overlay-body[data-theme="midnight"] .broadcast-title > div,.overlay-body[data-theme="midnight"] .scripture-word.active { color:#d8e9ff; }
.overlay-body[data-theme="sunrise"] .broadcast-scene { background:radial-gradient(circle at 82% 22%,rgba(255,231,177,.42),transparent 24%),linear-gradient(155deg,#11111b 0%,#3a2840 46%,#17111d 100%); }
.overlay-body[data-theme="sunrise"] .sky-glow { opacity:1.25; }
.overlay-body[data-theme="minimal"] .broadcast-scene { background:linear-gradient(145deg,#060a11,#0b1421 55%,#070c14); }
.overlay-body[data-theme="minimal"] .bible-shape,.overlay-body[data-theme="minimal"] .cross-silhouette,.overlay-body[data-theme="minimal"] .side-verse,.overlay-body[data-theme="minimal"] .side-message { display:none; }
@keyframes breatheGlow { from { transform:scale(.96); opacity:.7; } to { transform:scale(1.04); opacity:1; } }
@keyframes drift { from { transform:translate3d(0,0,0); } to { transform:translate3d(-60px,25px,0); } }

@media (max-width:1100px) {
  .workspace { grid-template-columns:1fr; }
  .preview-panel { order:-1; }
}
@media (max-width:720px) {
  .app-shell { padding:12px; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .top-actions { justify-content:flex-start; }
  .grid.three,.grid.two,.mode-grid,.broadcast-info { grid-template-columns:1fr; }
  .panel { padding:15px; border-radius:15px; }
  .footer-bar { flex-direction:column; gap:5px; }
}

/* ElevenLabs control additions */
.eleven-block { border-color: rgba(239,199,111,.18); background: linear-gradient(180deg,rgba(239,199,111,.035),rgba(0,0,0,.18)); }
.provider-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(4,8,17,.55); }
.provider-row > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.provider-label { color:#8f9bb0; font-size:9px; letter-spacing:.18em; font-weight:850; }
#elevenStatus { color:var(--gold); font-size:13px; }
#elevenDetail { color:#7f8da5; font-size:10px; line-height:1.45; }
.voice-tuning { margin-top:12px; }
.check-stack { margin-top:4px; }
.check-row em { color:#758198; font-style:normal; }
.notice.subtle { margin-top:12px; margin-bottom:0; padding:10px 11px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.025); }
.notice.good { color:#9fe3c3; border-color:rgba(80,211,154,.20); background:rgba(80,211,154,.05); }
.notice.warn { color:#efc76f; border-color:rgba(239,199,111,.20); background:rgba(239,199,111,.05); }
.notice.bad { color:#ff9ba7; border-color:rgba(255,60,79,.20); background:rgba(255,60,79,.05); }
select:disabled, input:disabled, button:disabled { opacity:.5; cursor:not-allowed; }

/* v3 YouVersion + production additions */
.version-chip { display:inline-flex; vertical-align:middle; align-items:center; height:20px; padding:0 7px; margin-left:5px; border-radius:999px; color:#17120a; background:linear-gradient(135deg,#d7ad4e,#ffe7a1); font-size:10px; letter-spacing:.06em; }
.youversion-block { margin-top:0; margin-bottom:14px; border-color:rgba(104,164,255,.18); background:linear-gradient(180deg,rgba(75,122,205,.045),rgba(0,0,0,.17)); }
.youversion-block #youVersionStatus { color:var(--gold); font-size:13px; }
.youversion-block #youVersionDetail { color:#7f8da5; font-size:10px; line-height:1.45; }
.source-grid { margin-top:4px; }
.scripture-selectors { margin-top:12px; }
.copyright-notice { margin-top:12px; padding:9px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.065); color:#8f9bb0; background:rgba(255,255,255,.022); font-size:9.5px; line-height:1.45; }
.verse-actions { display:flex; align-items:center; gap:7px; }
.source-badge { display:inline-flex; align-items:center; min-height:27px; padding:0 8px; border-radius:999px; border:1px solid rgba(104,164,255,.22); background:rgba(104,164,255,.07); color:#a7c7ff; font-size:8.5px; font-weight:850; letter-spacing:.12em; }
.loading-copy { color:#8f9bb0 !important; font-style:italic; }
.error-copy { color:#ff9ba7 !important; }
.pipeline-card { margin-top:12px; padding:14px; border:1px solid rgba(239,199,111,.13); border-radius:13px; background:linear-gradient(135deg,rgba(239,199,111,.04),rgba(83,126,190,.035)); }
.pipeline-label { display:block; color:#8f9bb0; font-size:8.5px; letter-spacing:.2em; font-weight:850; margin-bottom:9px; }
.pipeline-flow { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#dce4f2; font-size:10px; }
.pipeline-flow b { font-weight:800; }
.pipeline-flow i { color:var(--gold); font-style:normal; }
.pipeline-card small { display:block; color:#7f8da5; line-height:1.45; margin-top:8px; font-size:9.5px; }
.security-card { padding:13px 14px; border:1px solid rgba(80,211,154,.13); border-radius:12px; background:rgba(80,211,154,.035); }
.security-card strong { color:#a6e8ca; font-size:11px; }
.security-card p { margin-top:6px; color:#8290a7; font-size:9.5px; line-height:1.5; }
.security-card code { color:#d7e0ee; }

.overlay-attribution { max-width:64vw; margin-top:1.5vh; color:rgba(210,218,231,.56); font-size:.5vw; line-height:1.35; letter-spacing:.025em; text-align:center; text-shadow:0 .1vw .5vw rgba(0,0,0,.72); }
.overlay-attribution.empty { display:none; }
.footer-copy { display:flex; flex-direction:column; gap:.55vh; }
.footer-copy small { color:#778397; font-size:.42vw; letter-spacing:.17em; }
.overlay-body[data-layout="minimal"] .overlay-attribution { opacity:.62; }

@media (max-width:720px) {
  .verse-actions { align-items:flex-end; flex-direction:column; }
  .pipeline-flow { gap:5px; }
}

/* v4 automation, branding, remote control */
.automation-card,.remote-card { border:1px solid rgba(239,199,111,.13); border-radius:13px; padding:13px; background:rgba(255,255,255,.022); }
.automation-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.playlist-list { display:flex; flex-direction:column; gap:7px; margin-top:11px; max-height:180px; overflow:auto; }
.playlist-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#090f1d; color:#cbd4e5; font-size:10px; }
.playlist-item.active { border-color:rgba(239,199,111,.42); background:rgba(239,199,111,.07); }
.playlist-item small { color:#77849a; }
.playlist-item button { flex:0 0 auto; }
.muted-copy { color:#718097; font-size:10px; }
.branding-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.upload-tile { display:flex; flex-direction:column; gap:5px; padding:13px; border:1px dashed rgba(239,199,111,.22); border-radius:11px; background:rgba(239,199,111,.025); cursor:pointer; }
.upload-tile strong { color:#e6ebf4; font-size:11px; }
.upload-tile span { color:#7f8ca2; font-size:9.5px; }
.upload-tile input { margin-top:5px; padding:7px; }
.remote-card { display:grid; gap:9px; }
.remote-card > div:not(.automation-actions) { display:grid; grid-template-columns:110px minmax(0,1fr); gap:9px; align-items:center; }
.remote-card span { color:#8190a7; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.remote-card code { min-width:0; overflow-wrap:anywhere; color:#dce5f2; padding:7px 9px; border-radius:7px; background:#080d18; border:1px solid rgba(255,255,255,.06); font-size:9.5px; }
.remote-card small { color:#718097; line-height:1.45; font-size:9.5px; }

.user-background,.user-background-video { position:absolute; inset:0; width:100%; height:100%; z-index:-3; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.user-background { background-size:cover; background-position:center; filter:saturate(.85) brightness(.72); }
.user-background-video { object-fit:cover; filter:saturate(.85) brightness(.68); }
.user-background.visible,.user-background-video.visible { opacity:.42; }
.ministry-logo { position:absolute; z-index:8; max-width:10vw; max-height:10vh; object-fit:contain; opacity:0; pointer-events:none; filter:drop-shadow(0 .25vw .8vw rgba(0,0,0,.55)); transition:opacity .25s ease; }
.ministry-logo.visible { opacity:1; }
.ministry-logo.top-right { top:11vh; right:4vw; }
.ministry-logo.top-left { top:11vh; left:4vw; }
.ministry-logo.bottom-right { bottom:13vh; right:4vw; }
.ministry-logo.bottom-left { bottom:13vh; left:4vw; }
.scripture-words { font-size:calc(3.25vw * var(--scripture-scale, 1)); }
.scripture-words.long { font-size:calc(2.68vw * var(--scripture-scale, 1)); }
.scripture-words.very-long { font-size:calc(2.25vw * var(--scripture-scale, 1)); }
.overlay-body[data-layout="context"] .scripture-words { font-size:calc(2.85vw * var(--scripture-scale, 1)); }
.overlay-body[data-layout="minimal"] .scripture-words { font-size:calc(3.5vw * var(--scripture-scale, 1)); }

/* Phone remote */
.remote-body { min-height:100vh; padding:18px; background:radial-gradient(circle at 50% 0%,rgba(58,83,136,.25),transparent 34%),#070b14; }
.remote-shell { max-width:560px; margin:0 auto; }
.remote-header { padding:15px 2px 18px; }
.remote-header h1 { font-size:25px; }
.remote-header p { margin-top:5px; color:#8694aa; font-size:11px; }
.remote-auth { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:14px; }
.remote-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.remote-action { min-height:92px; border-radius:16px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(24,35,60,.98),rgba(10,16,30,.98)); color:#eef2f8; font-weight:850; letter-spacing:.04em; }
.remote-action.primary { background:linear-gradient(135deg,#caa34e,#f1d27f); color:#161109; border:0; }
.remote-action.live { border-color:rgba(255,60,79,.35); }
.remote-action span { display:block; margin-top:5px; color:#8290a7; font-size:9px; font-weight:600; }
.remote-action.primary span { color:#52441f; }
.remote-status { margin-top:12px; padding:11px; border-radius:10px; border:1px solid var(--line); color:#93a1b7; background:rgba(255,255,255,.025); font-size:10px; line-height:1.45; }
.remote-now { margin-bottom:12px; padding:14px; border-radius:13px; border:1px solid rgba(239,199,111,.15); background:rgba(239,199,111,.035); }
.remote-now strong { color:var(--gold); font-size:11px; letter-spacing:.1em; }
.remote-now p { margin-top:7px; color:#e8ebf2; font-family:Georgia,"Times New Roman",serif; font-size:18px; line-height:1.45; }

@media (max-width:720px) {
  .branding-grid { grid-template-columns:1fr; }
  .remote-card > div:not(.automation-actions) { grid-template-columns:1fr; gap:4px; }
}
.audio-unlock { position:absolute; top:3.6vh; left:50%; z-index:12; display:none; transform:translateX(-50%); border:1px solid rgba(255,224,151,.8); border-radius:6px; padding:.9vh 1.2vw; color:#20170a; background:#f3cf78; box-shadow:0 0 .9vw rgba(255,210,116,.35); font:700 .72vw/1.2 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.audio-unlock.visible { display:block; }

.reading-range { margin-top:16px; padding:14px; border:1px solid rgba(239,199,111,.15); border-radius:13px; background:linear-gradient(180deg,rgba(239,199,111,.035),rgba(0,0,0,.14)); }
.range-heading { margin-bottom:11px; }
.range-heading h3 { margin-top:3px; }
.range-summary { max-width:45%; color:var(--gold); font-size:11px; font-weight:800; text-align:right; }
.range-grid { align-items:end; }
.range-action { min-height:42px; white-space:nowrap; }
.range-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }