/* The website's Scripture (/scripture): a dark console (2026-11-01, the
   user's "make the scripture looks like this", with a picture) — near-black
   cards on black, an orange accent; transcript, detections, live display
   and output along the top; the chapter, preview and queue along the bottom. */
.sc-hero { padding-bottom: 26px; }
.sc-lead { max-width: 700px; margin: 14px auto 0; font-size: 17px; line-height: 1.6; color: var(--text-dim); }
.sc-app-wrap { padding: 26px 16px 8px; }
.sc-app {
  --c-bg: #0b0b0d; --c-card: #151518; --c-card-2: #1d1d21; --c-line: rgba(255, 255, 255, 0.07); --c-text: #f1f1f3; --c-dim: #9b9ba3; --c-faint: #6b6b74;
  --c-acc: #ff6a1a; --c-acc-2: #ff8a3d; --c-acc-rgb: 255, 106, 26; --c-live: #ff3b4f;
  max-width: 1680px; margin: 0 auto; padding: 14px; border-radius: 22px; background: var(--c-bg); color: var(--c-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.sc-app svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sc-app button { font-family: inherit; }

/* The top bar */
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 6px 14px; }
.sc-brand { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 12px; background: var(--c-acc); color: #fff; font-size: 16px; }
.sc-brand b { font-weight: 800; }
.sc-logo { font-size: 18px; }
.sc-top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-live-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(255, 59, 79, 0.35); color: rgba(255, 59, 79, 0.55); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.sc-live-pill i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sc-live-pill.on { border-color: var(--c-live); color: #fff; background: rgba(255, 59, 79, 0.18); box-shadow: 0 0 18px rgba(255, 59, 79, 0.35); }
.sc-live-pill.on i { background: var(--c-live); animation: sc-pulse 1.4s ease-in-out infinite; }
@keyframes sc-pulse { 50% { opacity: .3; } }
.sc-top-btn { height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font-size: 13px; font-weight: 800; letter-spacing: .06em; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sc-top-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.sc-top-btn.active { background: #fff; color: #000; }
.sc-top-sep { width: 1px; height: 26px; background: var(--c-line); margin: 0 4px; }
.sc-top-link { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--c-dim); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sc-top-link:hover { color: var(--c-text); background: var(--c-card-2); }
.sc-top-link svg { width: 16px; height: 16px; }

/* The grid of cards */
.sc-grid { display: grid; grid-template-columns: 1fr 1.15fr 1.7fr 1.35fr; grid-template-rows: 400px 400px; gap: 12px; }
.sc-reader { grid-column: 1 / 3; }
.sc-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-line); overflow: hidden; }
.sc-card-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; flex: none; }
.sc-card-head h2 { margin: 0; margin-right: auto; font-size: 17px; font-weight: 700; color: var(--c-text); }
.sc-card-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 16px; scrollbar-width: thin; scrollbar-color: #3a3a40 transparent; }
.sc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 14px; border-top: 1px solid var(--c-line); flex: none; }
.sc-empty-note { margin: 4px 0; color: var(--c-faint); font-size: 13px; line-height: 1.55; }
.sc-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--c-line); background: transparent; color: var(--c-dim); cursor: pointer; }
.sc-icon-btn:hover { color: var(--c-text); border-color: rgba(255, 255, 255, 0.2); }
.sc-icon-btn svg { width: 15px; height: 15px; }
.sc-text-btn { border: 0; background: none; color: var(--c-text); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sc-text-btn:hover { color: var(--c-acc-2); }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.sc-btn:hover:not(:disabled) { border-color: rgba(var(--c-acc-rgb), 0.6); }
.sc-btn:disabled { opacity: .4; cursor: default; }
.sc-btn-go { background: var(--c-acc); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -6px rgba(var(--c-acc-rgb), 0.7); }
.sc-btn-go:hover:not(:disabled) { background: var(--c-acc-2); }
.sc-btn-live { background: rgba(255, 59, 79, 0.16); border-color: rgba(255, 59, 79, 0.5); color: #ff8a96; }
.sc-btn-wide { width: 100%; height: 38px; }

/* Live transcript */
.sc-lines p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: #d6d6db; }
.sc-lines mark { padding: 1px 4px; border-radius: 4px; background: rgba(var(--c-acc-rgb), 0.22); color: #ffb48a; box-shadow: inset 0 -1px 0 rgba(var(--c-acc-rgb), 0.6); }
.sc-lines .sc-interim { color: var(--c-faint); font-style: italic; }
.sc-listen-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 4px 0; color: #34d399; font-size: 15px; font-weight: 700; cursor: pointer; }
.sc-listen-btn.on { color: #ff8a96; }
.sc-rec { width: 18px; height: 18px; border-radius: 50%; border: 4px solid #3a3a40; }
.sc-listen-btn.on + .sc-rec { border-color: rgba(255, 59, 79, 0.35); background: var(--c-live); animation: sc-pulse 1.4s ease-in-out infinite; }

/* Recent detections */
.sc-detections .sc-card-head h2 { white-space: nowrap; }
.sc-auto-label { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-line); font-size: 12px; font-weight: 700; color: var(--c-dim); cursor: pointer; }
.sc-auto-label input { accent-color: var(--c-acc); margin: 0; }
.sc-auto-label:has(input:checked) { color: #fff; border-color: rgba(var(--c-acc-rgb), 0.6); background: rgba(var(--c-acc-rgb), 0.15); }
.sc-det { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.sc-det:first-child { padding-top: 4px; }
.sc-det-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.sc-det-head i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.sc-det-quote .sc-det-head i, .sc-det-phrase .sc-det-head i { background: #f59e0b; }
.sc-det-chapter .sc-det-head i { background: #60a5fa; }
.sc-det-head span { color: var(--c-faint); }
.sc-det-head small { margin-left: auto; color: var(--c-faint); font-weight: 600; }
.sc-det-text { margin: 8px 0 10px; font-size: 14px; line-height: 1.55; color: #e4e4e8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-det-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Live display */
.sc-display-body { padding: 0; }
.sc-display-live { padding: 22px 22px 24px; background: linear-gradient(135deg, rgba(var(--c-acc-rgb), 0.26), rgba(var(--c-acc-rgb), 0.08)); border-top: 1px solid rgba(var(--c-acc-rgb), 0.45); border-bottom: 1px solid rgba(var(--c-acc-rgb), 0.45); }
.sc-display-ref { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: #fff; }
.sc-display-text { margin-top: 10px; font-size: 18px; line-height: 1.6; color: #fff; }
.sc-display-next { display: block; width: calc(100% - 36px); margin: 0 18px; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--c-line); background: none; text-align: left; font-size: 14px; line-height: 1.6; color: var(--c-faint); cursor: pointer; }
.sc-display-next span { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #5d5d66; }
.sc-display-next:hover { color: var(--c-dim); background: rgba(255, 255, 255, 0.02); }
.sc-display-body > .sc-empty-note { padding: 0 18px; }

/* Main output and Preview */
.sc-onair { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--c-faint); }
.sc-onair.on { color: var(--c-live); }
.sc-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--c-line); }
.sc-screen canvas { display: block; width: 100%; height: 100%; }
.sc-screen:fullscreen { border-radius: 0; border: 0; display: grid; place-items: center; }
.sc-screen:fullscreen canvas { width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; }
.sc-full { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.5); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.sc-screen:hover .sc-full, .sc-full:focus-visible { opacity: 1; }
.sc-full svg { width: 16px; height: 16px; }
.sc-out-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sc-out-ref { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--c-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-arrow { display: inline-grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); cursor: pointer; }
.sc-arrow:hover:not(:disabled) { border-color: rgba(var(--c-acc-rgb), 0.6); }
.sc-arrow:disabled { opacity: .35; cursor: default; }
.sc-leaves { display: block; margin-top: 8px; font-size: 12px; color: var(--c-faint); }
.sc-preview-ref { font-size: 13px; font-weight: 700; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.sc-preview .sc-card-body { display: flex; flex-direction: column; gap: 14px; }
.sc-preview-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sc-preview-actions .sc-btn { height: 40px; padding: 0 18px; font-size: 13.5px; }

/* The chapter */
.sc-reader-bar { display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px; flex: none; }
.sc-select, .sc-input { height: 54px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font: 700 16px 'Plus Jakarta Sans', sans-serif; }
.sc-select:focus, .sc-input:focus, .sc-search:focus-within { outline: 2px solid rgba(var(--c-acc-rgb), 0.5); outline-offset: 0; }
.sc-reader-bar .sc-select { flex: none; min-width: 110px; }
.sc-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-dim); }
.sc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--c-text); font: 600 16px 'Plus Jakarta Sans', sans-serif; }
.sc-search input::placeholder { color: var(--c-faint); font-weight: 500; }
.sc-reader-meta { padding: 2px 20px 8px; font-size: 12.5px; font-weight: 600; color: var(--c-faint); min-height: 18px; flex: none; }
.sc-verses { display: flex; flex-direction: column; gap: 8px; }
.sc-vrow { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: #e9e9ec; text-align: left; font-size: 15px; line-height: 1.45; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.sc-vrow:hover { border-color: rgba(255, 255, 255, 0.16); }
.sc-vrow b { flex: none; min-width: 18px; color: var(--c-acc); font-weight: 700; }
.sc-vrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-vrow.sel span { white-space: normal; }
.sc-vrow em { flex: none; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--c-live); }
.sc-vrow.sel { border-color: rgba(var(--c-acc-rgb), 0.55); background: rgba(var(--c-acc-rgb), 0.08); }
.sc-vrow.live { border-color: var(--c-acc); box-shadow: inset 0 0 0 1px var(--c-acc); }
.sc-vrow mark { background: rgba(var(--c-acc-rgb), 0.28); color: #fff; border-radius: 3px; padding: 0 2px; }
.sc-chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { min-width: 46px; height: 40px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font-weight: 700; cursor: pointer; }
.sc-chip:hover { border-color: rgba(var(--c-acc-rgb), 0.6); }

/* Queue */
.sc-qrow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) auto auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.sc-qref b { display: block; font-size: 14.5px; }
.sc-qref small { font-size: 12px; color: var(--c-faint); }
.sc-qtext { font-size: 13px; line-height: 1.5; color: #d6d6db; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-qrow .sc-icon-btn { border: 0; color: var(--c-text); }
.sc-qrow .sc-icon-btn svg { width: 14px; height: 14px; }
.sc-qrow [data-act="show"] svg { fill: currentColor; stroke: none; }
.sc-qrow.live .sc-qref b { color: var(--c-acc-2); }

.sc-private { max-width: 1680px; margin: 12px auto 0; font-size: 13px; color: var(--text-dim); text-align: center; }
#sc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; max-width: min(520px, 92vw); padding: 11px 16px; border-radius: 12px; background: #1d1d21; color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.7); text-align: center; }
#sc-toast[hidden] { display: none; }

/* The dialogs: Look and Bibles */
.sc-dialog { width: min(560px, 94vw); max-height: 86vh; padding: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: #151518; color: #f1f1f3; font-family: 'Plus Jakarta Sans', sans-serif; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); --c-line: rgba(255, 255, 255, 0.07); --c-card-2: #1d1d21; --c-text: #f1f1f3; --c-dim: #9b9ba3; --c-faint: #6b6b74; --c-acc: #ff6a1a; --c-acc-rgb: 255, 106, 26; }
.sc-dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
.sc-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: #151518; z-index: 1; }
.sc-dialog-head h2 { margin: 0; font-size: 18px; color: #fff; }
.sc-dialog-head svg, .sc-dialog .sc-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sc-dialog-body { padding: 8px 20px 20px; }
.sc-dialog .sc-select { height: 38px; font-size: 13.5px; max-width: 60%; }
.sc-dialog .sc-input { height: 40px; font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }
.sc-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; font-weight: 600; color: #e4e4e8; }
.sc-opt[hidden] { display: none; }
.sc-check { cursor: pointer; }
.sc-check input { width: 20px; height: 20px; accent-color: var(--c-acc); }
.sc-sub { margin: 16px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.sc-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sc-swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sc-swatch { position: relative; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #151518; background: var(--sw, #ff6a1a); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); cursor: pointer; }
.sc-swatch.own { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
.sc-swatch.own.active { background: var(--sw); }
.sc-swatch.own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sc-swatch.active { box-shadow: 0 0 0 2px #fff; }
.sc-bg-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-bg-preset { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 4px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-dim); font-size: 12px; font-weight: 700; cursor: pointer; }
.sc-bg-preset i { width: 100%; height: 22px; border-radius: 6px; }
.sc-bg-preset.active { border-color: var(--c-acc); color: #fff; }
.sc-bg-own { display: inline-flex; gap: 6px; }
.sc-bg-own input { width: 40px; height: 30px; padding: 0; border: 1px solid var(--c-line); border-radius: 8px; background: none; cursor: pointer; }
.sc-list { display: flex; flex-direction: column; gap: 6px; }
.sc-catalog { max-height: 340px; overflow-y: auto; }
.sc-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--c-card-2); border: 1px solid var(--c-line); }
.sc-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-item b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-item small { font-size: 12px; color: var(--c-faint); }
.sc-tag { padding: 3px 9px; border-radius: 999px; background: rgba(34, 197, 94, 0.14); color: #4ade80; font-size: 11.5px; font-weight: 800; }
.sc-dialog .sc-btn { height: 32px; }

/* A computer screen narrower than the console: the same layout, shrunk to
   fit (see fitConsole in scripture-page.js). A phone: one card under another. */
@media (max-width: 720px) {
  .sc-reader { grid-column: auto; }
  .sc-app-wrap { padding: 16px 8px 4px; }
  .sc-app { padding: 10px; border-radius: 16px; }
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone: the output, then finding a verse and its preview, first. */
  .sc-output { order: -3; }
  .sc-reader { order: -2; }
  .sc-preview { order: -1; }
  .sc-reader-bar { flex-wrap: wrap; }
  .sc-search { flex-basis: 100%; order: -1; }
  .sc-reader-bar .sc-select { flex: 1; }
  .sc-arrow { width: 48px; height: 48px; }
  .sc-qrow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sc-qtext { grid-column: 1 / -1; grid-row: 2; }
  .sc-top-sep { display: none; }
}

/* Smaller all round (2026-11-01, the user's "The Scripture console is too big.
   Reduce the size"): shorter rows, tighter cards, smaller type and controls. */
.sc-app { max-width: 1440px; padding: 10px; border-radius: 18px; }
.sc-top { padding: 2px 4px 10px; }
.sc-brand { padding: 6px 14px 6px 8px; font-size: 14px; border-radius: 10px; }
.sc-logo { font-size: 15px; }
.sc-live-pill, .sc-top-btn, .sc-top-link { height: 30px; font-size: 11.5px; border-radius: 9px; }
.sc-live-pill, .sc-top-btn { padding: 0 12px; }
.sc-top-link { padding: 0 9px; font-size: 12.5px; }
.sc-top-sep { height: 20px; }
.sc-grid { grid-template-rows: 290px 290px; gap: 8px; }
.sc-card { border-radius: 13px; }
.sc-card-head { padding: 11px 14px 8px; gap: 8px; }
.sc-card-head h2 { font-size: 14.5px; }
.sc-card-body { padding: 0 14px 12px; }
.sc-card-foot { padding: 8px 14px 10px; }
.sc-empty-note { font-size: 12px; }
.sc-icon-btn { width: 26px; height: 26px; }
.sc-text-btn { font-size: 12px; }
.sc-btn { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; }
.sc-lines p { font-size: 13px; margin-bottom: 8px; line-height: 1.55; }
.sc-listen-btn { font-size: 13px; gap: 7px; }
.sc-rec { width: 14px; height: 14px; border-width: 3px; }
.sc-auto-label { padding: 3px 8px; font-size: 11px; }
.sc-det { padding: 10px 0; }
.sc-det-head { font-size: 10.5px; }
.sc-det-text { margin: 6px 0 8px; font-size: 12.5px; }
.sc-display-live { padding: 14px 16px 16px; }
.sc-display-ref { font-size: 11.5px; }
.sc-display-text { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.sc-display-next { width: calc(100% - 28px); margin: 0 14px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; }
.sc-display-next span { margin-bottom: 3px; font-size: 10.5px; }
.sc-onair { font-size: 10.5px; }
.sc-screen { border-radius: 10px; }
.sc-out-row { margin-top: 9px; gap: 8px; }
.sc-out-ref { font-size: 12.5px; }
.sc-arrow { width: 38px; height: 38px; border-radius: 10px; }
.sc-arrow svg { width: 16px; height: 16px; }
.sc-leaves { margin-top: 4px; font-size: 11px; }
.sc-preview-ref { font-size: 12px; }
.sc-preview .sc-card-body { gap: 10px; }
.sc-preview-actions .sc-btn { height: 32px; padding: 0 14px; font-size: 12.5px; }
.sc-reader-bar { gap: 8px; padding: 11px 14px 6px; }
.sc-reader-bar .sc-select { height: 38px; min-width: 84px; font-size: 13.5px; padding: 0 10px; border-radius: 10px; }
.sc-search { height: 38px; padding: 0 12px; gap: 8px; border-radius: 10px; }
.sc-search svg { width: 15px; height: 15px; }
.sc-search input { font-size: 13.5px; }
.sc-reader-meta { padding: 0 16px 6px; font-size: 11.5px; min-height: 16px; }
.sc-verses { gap: 6px; }
.sc-vrow { padding: 9px 12px; font-size: 13px; gap: 10px; border-radius: 10px; }
.sc-vrow b { min-width: 16px; }
.sc-vrow em { font-size: 9px; }
.sc-chip { min-width: 38px; height: 32px; font-size: 12.5px; }
.sc-qrow { padding: 10px 0; gap: 8px; }
.sc-qref b { font-size: 13px; }
.sc-qref small { font-size: 11px; }
.sc-qtext { font-size: 12px; }
.sc-btn-wide { height: 32px; }
.sc-private { margin-top: 10px; font-size: 12px; }
@media (max-width: 720px) {
  .sc-grid { grid-template-rows: none; grid-auto-rows: minmax(260px, auto); }
  .sc-reader .sc-card-body { max-height: 340px; }
  .sc-transcript .sc-card-body, .sc-detections .sc-card-body, .sc-display .sc-card-body, .sc-queue .sc-card-body { max-height: 260px; }
  .sc-arrow { width: 38px; height: 38px; }
}

/* AI summary and Notes: a third, shorter row (2026-11-01, the user's "Add AI
   summary, and notes to the scripture"). */
/* Sermon Notes (2026-11-01, the user's "Give a Common name to it. Put the tab close to the Scripture"):
   the AI summary and Notes as a tab beside Scripture, in the same space as the Scripture cards. */
.sc-notes-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: 588px; gap: 8px; }
.sc-notes-view[hidden] { display: none; }
.sc-grid[hidden] { display: none; }
.sc-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--c-card-2); border: 1px solid var(--c-line); }
.sc-tab { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--c-dim); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sc-tab:hover { color: var(--c-text); }
.sc-tab.active { background: var(--c-acc); color: #fff; box-shadow: 0 6px 16px -8px rgba(var(--c-acc-rgb), 0.8); }
.sc-summary .sc-card-head h2, .sc-notes .sc-card-head h2 { white-space: nowrap; }
.sc-sum-status, .sc-notes-saved { font-size: 11.5px; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-sum-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; }
.sc-sum-out { min-width: 0; }
.sc-sum-title { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #fff; }
.sc-sum-text { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #d6d6db; }
.sc-sum-points { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: #c9c9cf; }
.sc-sum-points li::marker { color: var(--c-acc); }
.sc-sum-when { margin: 0; font-size: 11px; color: var(--c-faint); }
.sc-sum-verses { border-left: 1px solid var(--c-line); padding-left: 14px; min-width: 0; }
.sc-sub-head { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-chip-v { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sc-chip-v small { font-size: 9.5px; color: var(--c-faint); font-weight: 600; }
.sc-chip-v:hover { border-color: rgba(var(--c-acc-rgb), 0.6); }
.sc-chip-v.live { border-color: var(--c-acc); color: var(--c-acc-2); }
.sc-history-clear { font-size: 11px; color: var(--c-faint); }
.sc-notes-body { display: flex; }
.sc-notes-body textarea { flex: 1; width: 100%; min-height: 0; resize: none; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font: 500 13.5px/1.6 'Plus Jakarta Sans', sans-serif; outline: none; }
.sc-notes-body textarea:focus { border-color: rgba(var(--c-acc-rgb), 0.55); }
.sc-notes-body textarea::placeholder { color: var(--c-faint); }
.sc-btn:disabled:hover { border-color: var(--c-line); }
@media (max-width: 720px) {
  .sc-notes-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(300px, auto); }
  .sc-summary .sc-card-head, .sc-notes .sc-card-head { flex-wrap: wrap; }
  .sc-sum-body { grid-template-columns: minmax(0, 1fr); }
  .sc-sum-verses { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-line); padding-top: 10px; }
  .sc-notes .sc-card-body { min-height: 220px; }
}

/* ---- System, Light or Dark (2026-11-01, the user's "Add system, light and Dark mode") ----
   body[data-sc-theme] is set by applyTheme in scripture-page.js (System
   resolved to this computer's setting). Dark is the look above; Light swaps
   its colours. The output and preview screens are projected: unchanged. */
.sc-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--c-card-2); border: 1px solid var(--c-line); }
.sc-theme button { display: grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--c-dim); cursor: pointer; }
.sc-theme button svg { width: 14px; height: 14px; }
.sc-theme button:hover { color: var(--c-text); }
.sc-theme button.active { background: var(--c-acc); color: #fff; }
body[data-sc-theme="dark"] .sc-app, body[data-sc-theme="dark"] .sc-dialog { color-scheme: dark; }
body[data-sc-theme="light"] .sc-app, body[data-sc-theme="light"] .sc-dialog {
  color-scheme: light;
  --c-bg: #e9ebf1; --c-card: #ffffff; --c-card-2: #f3f4f8; --c-line: rgba(15, 23, 42, 0.11); --c-text: #14161c; --c-dim: #555b6a; --c-faint: #878d9c;
  --c-acc-2: #e2560a;
}
body[data-sc-theme="light"] .sc-app { box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.35); border: 1px solid rgba(15, 23, 42, 0.06); }
body[data-sc-theme="light"] .sc-live-pill.on { color: #c4162a; background: rgba(255, 59, 79, 0.1); box-shadow: none; }
body[data-sc-theme="light"] :is(.sc-top-btn, .sc-icon-btn):hover { border-color: rgba(15, 23, 42, 0.28); }
body[data-sc-theme="light"] .sc-top-btn.active { background: #14161c; color: #fff; }
body[data-sc-theme="light"] .sc-card-body { scrollbar-color: #c4c7d0 transparent; }
body[data-sc-theme="light"] .sc-btn-live { color: #c4162a; }
body[data-sc-theme="light"] :is(.sc-lines p, .sc-det-text, .sc-qtext, .sc-sum-text) { color: #2b2f3a; }
body[data-sc-theme="light"] .sc-lines mark { color: #a83a00; background: rgba(var(--c-acc-rgb), 0.16); }
body[data-sc-theme="light"] .sc-listen-btn { color: #059669; }
body[data-sc-theme="light"] .sc-listen-btn.on { color: #c4162a; }
body[data-sc-theme="light"] .sc-rec { border-color: #d0d3dc; }
body[data-sc-theme="light"] .sc-auto-label:has(input:checked) { color: #a83a00; }
body[data-sc-theme="light"] .sc-display-live { background: linear-gradient(135deg, rgba(var(--c-acc-rgb), 0.16), rgba(var(--c-acc-rgb), 0.05)); }
body[data-sc-theme="light"] :is(.sc-display-ref, .sc-display-text, .sc-sum-title) { color: #14161c; }
body[data-sc-theme="light"] .sc-display-next span { color: #9aa0ad; }
body[data-sc-theme="light"] .sc-display-next:hover { background: rgba(15, 23, 42, 0.03); }
body[data-sc-theme="light"] .sc-vrow { color: #1d2029; }
body[data-sc-theme="light"] .sc-vrow:hover { border-color: rgba(15, 23, 42, 0.22); }
body[data-sc-theme="light"] .sc-vrow mark { color: #1d2029; background: rgba(var(--c-acc-rgb), 0.2); }
body[data-sc-theme="light"] .sc-vrow.sel { background: rgba(var(--c-acc-rgb), 0.07); }
body[data-sc-theme="light"] .sc-sum-points { color: #3a3f4b; }
body[data-sc-theme="light"] .sc-dialog { background: #ffffff; color: #14161c; border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3); }
body[data-sc-theme="light"] .sc-dialog::backdrop { background: rgba(15, 23, 42, 0.35); }
body[data-sc-theme="light"] .sc-dialog-head { background: #ffffff; }
body[data-sc-theme="light"] .sc-dialog-head h2 { color: #14161c; }
body[data-sc-theme="light"] .sc-opt { color: #1d2029; }
body[data-sc-theme="light"] .sc-swatch { border-color: #ffffff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2); }
body[data-sc-theme="light"] .sc-swatch.active { box-shadow: 0 0 0 2px #14161c; }
body[data-sc-theme="light"] .sc-bg-preset.active { color: #14161c; }
body[data-sc-theme="light"] .sc-tag { color: #15803d; }
body[data-sc-theme="light"] .sc-screen { border-color: rgba(15, 23, 42, 0.15); }

/* Full screen | Lower third on Main output, and the Settings dialog (2026-11-01,
   the user's "Make the scripture has lower thirds and full screen. Add settings too"). */
.sc-output .sc-card-head { gap: 6px; }
.sc-mode-seg, .sc-seg2 { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--c-card-2); border: 1px solid var(--c-line); flex: none; }
.sc-mode-seg button, .sc-seg2 button { height: 22px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--c-dim); font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.sc-mode-seg button:hover, .sc-seg2 button:hover { color: var(--c-text); }
.sc-mode-seg button.active, .sc-seg2 button.active { background: var(--c-acc); color: #fff; }
.sc-seg2 button { height: 28px; padding: 0 11px; font-size: 12.5px; }
.sc-lt-opts[hidden] { display: none; }
.sc-lt-opts { margin: 2px 0 4px; padding: 2px 12px; border-radius: 12px; background: var(--c-card-2); border: 1px solid var(--c-line); }
.sc-keys { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--c-dim); }
.sc-dialog-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); }

/* ======================================================================
   Ultramodern (2026-11-01, the user's "Make the interface or UI of the
   scripture on the website be ultramodern"): glass cards over a soft
   orange-and-violet glow, gradient pills that glow when on, an icon tile
   by each title, a glowing frame on the output while it's on air and a
   moving edge on the LIVE verse, springy presses. Same sizes and places.
   ====================================================================== */
.sc-app {
  --u-grad: linear-gradient(135deg, #ff9a3d 0%, #ff6a1a 45%, #ff3d6e 100%);
  --u-glow: rgba(255, 106, 26, 0.45);
  --u-glass: rgba(22, 22, 28, 0.62);
  --u-glass-2: rgba(255, 255, 255, 0.045);
  --u-edge: rgba(255, 255, 255, 0.08);
  --u-hi: rgba(255, 255, 255, 0.06);
  --u-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.85);
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(255, 106, 26, 0.16), transparent 70%),
    radial-gradient(55% 55% at 100% 100%, rgba(124, 92, 255, 0.14), transparent 70%),
    radial-gradient(40% 40% at 70% 10%, rgba(255, 61, 110, 0.08), transparent 70%),
    #07070a;
  border: 1px solid var(--u-edge);
}
.sc-app button, .sc-app .sc-vrow, .sc-app .sc-chip-v { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.sc-app button:not(:disabled):active { transform: scale(0.96); }

/* Glass cards */
.sc-card { background: var(--u-glass); border: 1px solid var(--u-edge); box-shadow: var(--u-shadow), inset 0 1px 0 var(--u-hi); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.sc-card-head h2 { display: inline-flex; align-items: center; gap: 9px; letter-spacing: -0.01em; }
.sc-hico { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: linear-gradient(135deg, rgba(255, 154, 61, 0.22), rgba(255, 61, 110, 0.16)); box-shadow: inset 0 0 0 1px rgba(255, 140, 70, 0.28); color: #ffb27a; }
.sc-hico svg { width: 15px; height: 15px; }
.sc-card-foot { border-top-color: var(--u-edge); }

/* Top bar: the two tabs, LIVE, BLACK/CLEAR, links */
.sc-tabs { background: var(--u-glass-2); border-color: var(--u-edge); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.sc-tab.active { background: var(--u-grad); box-shadow: 0 6px 18px -6px var(--u-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.sc-live-pill { border-radius: 999px; }
.sc-live-pill.on { background: linear-gradient(135deg, rgba(255, 59, 79, 0.28), rgba(255, 59, 79, 0.12)); box-shadow: 0 0 0 1px rgba(255, 59, 79, 0.6), 0 0 22px rgba(255, 59, 79, 0.45); }
.sc-top-btn { border-radius: 999px; background: var(--u-glass-2); border-color: var(--u-edge); box-shadow: inset 0 1px 0 var(--u-hi); }
.sc-top-btn:hover { border-color: rgba(255, 140, 70, 0.55); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12); }
.sc-top-btn.active { background: #ffffff; color: #000; box-shadow: 0 0 22px rgba(255, 255, 255, 0.35); }
.sc-top-link { border-radius: 999px; }
.sc-top-link:hover { background: var(--u-glass-2); box-shadow: inset 0 0 0 1px var(--u-edge); }
.sc-theme { border-radius: 999px; background: var(--u-glass-2); border-color: var(--u-edge); }
.sc-theme button { border-radius: 999px; }
.sc-theme button.active { background: var(--u-grad); box-shadow: 0 4px 12px -4px var(--u-glow); }

/* Buttons and pickers */
.sc-btn { border-radius: 999px; background: var(--u-glass-2); border-color: var(--u-edge); box-shadow: inset 0 1px 0 var(--u-hi); }
.sc-btn:hover:not(:disabled) { border-color: rgba(255, 140, 70, 0.6); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12), inset 0 1px 0 var(--u-hi); }
.sc-btn-go { background: var(--u-grad); border-color: transparent; box-shadow: 0 8px 20px -8px var(--u-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.sc-btn-go:hover:not(:disabled) { background: var(--u-grad); filter: brightness(1.08); box-shadow: 0 10px 26px -8px var(--u-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.sc-btn-live { background: rgba(255, 59, 79, 0.16); box-shadow: 0 0 14px rgba(255, 59, 79, 0.3); }
.sc-arrow { border-radius: 12px; background: var(--u-glass-2); border-color: var(--u-edge); box-shadow: inset 0 1px 0 var(--u-hi); }
.sc-arrow:hover:not(:disabled) { border-color: rgba(255, 140, 70, 0.6); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12), 0 8px 18px -10px var(--u-glow); color: #ffb27a; }
.sc-mode-seg, .sc-seg2 { border-radius: 999px; background: var(--u-glass-2); border-color: var(--u-edge); }
.sc-mode-seg button, .sc-seg2 button { border-radius: 999px; }
.sc-mode-seg button.active, .sc-seg2 button.active { background: var(--u-grad); box-shadow: 0 4px 12px -4px var(--u-glow); }
.sc-auto-label { background: var(--u-glass-2); border-color: var(--u-edge); }
.sc-auto-label:has(input:checked) { background: linear-gradient(135deg, rgba(255, 154, 61, 0.28), rgba(255, 61, 110, 0.2)); border-color: rgba(255, 140, 70, 0.7); box-shadow: 0 0 14px -2px var(--u-glow); }
.sc-select, .sc-input, .sc-search { background: rgba(255, 255, 255, 0.04); border-color: var(--u-edge); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.sc-select:focus, .sc-input:focus, .sc-search:focus-within { outline: 0; border-color: rgba(255, 140, 70, 0.7); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.sc-search svg { color: #ffb27a; }

/* The screens: a glowing frame on the output while it's on air */
.sc-screen { border-color: var(--u-edge); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.9); transition: box-shadow .4s ease, border-color .4s ease; }
.sc-output:has(.sc-onair.on) .sc-screen { border-color: rgba(255, 106, 26, 0.75); box-shadow: 0 0 0 1px rgba(255, 106, 26, 0.5), 0 0 28px -4px var(--u-glow), 0 10px 26px -14px rgba(0, 0, 0, 0.9); animation: sc-onair 2.4s ease-in-out infinite; }
@keyframes sc-onair { 50% { box-shadow: 0 0 0 1px rgba(255, 106, 26, 0.7), 0 0 40px -2px rgba(255, 106, 26, 0.6), 0 10px 26px -14px rgba(0, 0, 0, 0.9); } }
.sc-onair.on { text-shadow: 0 0 12px rgba(255, 59, 79, 0.7); }
.sc-full { border-radius: 999px; backdrop-filter: blur(8px); }

/* Live display: the verse on screen in a warm glass band */
.sc-display-live { background: linear-gradient(135deg, rgba(255, 154, 61, 0.24), rgba(255, 61, 110, 0.10)); border-color: rgba(255, 140, 70, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.sc-display-next { border-radius: 10px; border-bottom-color: var(--u-edge); }
.sc-display-next:hover { background: var(--u-glass-2); }

/* The chapter's verses: glass rows; the picked one glows; the LIVE one has a moving edge */
.sc-vrow { background: var(--u-glass-2); border-color: var(--u-edge); box-shadow: inset 0 1px 0 var(--u-hi); }
.sc-vrow:hover { border-color: rgba(255, 140, 70, 0.4); transform: translateX(2px); }
.sc-vrow b { background: var(--u-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-vrow.sel { background: linear-gradient(135deg, rgba(255, 154, 61, 0.14), rgba(255, 61, 110, 0.06)); border-color: rgba(255, 140, 70, 0.6); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.10); }
@property --u-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sc-edge { to { --u-angle: 360deg; } }
.sc-vrow.live { border: 1.5px solid transparent; box-shadow: 0 0 18px -6px var(--u-glow); background:
  linear-gradient(#141419, #141419) padding-box,
  linear-gradient(var(--u-angle), #ff9a3d, #ff3d6e, #7c5cff, #ff9a3d) border-box; animation: sc-edge 4s linear infinite; }
.sc-vrow em { text-shadow: 0 0 10px rgba(255, 59, 79, 0.8); }
.sc-chip { border-radius: 999px; background: var(--u-glass-2); border-color: var(--u-edge); }
.sc-chip:hover { border-color: rgba(255, 140, 70, 0.6); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12); }

/* Detections, queue, transcript, sermon notes */
.sc-det { border-bottom-color: var(--u-edge); }
.sc-det-head i { color: #22c55e; box-shadow: 0 0 10px currentColor; }
.sc-det-quote .sc-det-head i, .sc-det-phrase .sc-det-head i { color: #f59e0b; }
.sc-det-chapter .sc-det-head i { color: #60a5fa; }
.sc-qrow { border-bottom-color: var(--u-edge); }
.sc-qrow .sc-icon-btn:hover { background: var(--u-glass-2); color: #ffb27a; }
.sc-lines mark { background: linear-gradient(135deg, rgba(255, 154, 61, 0.26), rgba(255, 61, 110, 0.18)); }
.sc-listen-btn.on { text-shadow: 0 0 12px rgba(255, 59, 79, 0.6); }
.sc-chip-v { background: var(--u-glass-2); border-color: var(--u-edge); }
.sc-chip-v.live { box-shadow: 0 0 12px -2px var(--u-glow); }
.sc-notes-body textarea { background: rgba(255, 255, 255, 0.035); border-color: var(--u-edge); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }
.sc-notes-body textarea:focus { box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.35); }
.sc-card-body { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }

/* Dialogs: glass */
.sc-dialog { background: rgba(20, 20, 26, 0.82); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border-color: rgba(255, 255, 255, 0.1); border-radius: 22px; }
.sc-dialog-head { background: transparent; }
.sc-dialog::backdrop { background: rgba(5, 5, 10, 0.55); backdrop-filter: blur(6px); }
.sc-bg-preset, .sc-item, .sc-lt-opts { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.sc-bg-preset.active { box-shadow: 0 0 0 2px rgba(255, 106, 26, 0.35), 0 0 16px -4px rgba(255, 106, 26, 0.45); }
.sc-check input { accent-color: #ff6a1a; }
#sc-toast { border-radius: 999px; background: rgba(20, 20, 26, 0.85); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, 0.12); }

/* Light: the same, in white glass over a soft glow */
body[data-sc-theme="light"] .sc-app {
  --u-glass: rgba(255, 255, 255, 0.72);
  --u-glass-2: rgba(15, 23, 42, 0.035);
  --u-edge: rgba(15, 23, 42, 0.09);
  --u-hi: rgba(255, 255, 255, 0.9);
  --u-shadow: 0 14px 30px -22px rgba(15, 23, 42, 0.35);
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(255, 106, 26, 0.14), transparent 70%),
    radial-gradient(55% 55% at 100% 100%, rgba(124, 92, 255, 0.12), transparent 70%),
    radial-gradient(40% 40% at 70% 10%, rgba(255, 61, 110, 0.07), transparent 70%),
    #eef0f6;
}
body[data-sc-theme="light"] .sc-hico { color: #e2560a; }
body[data-sc-theme="light"] :is(.sc-tabs, .sc-select, .sc-input, .sc-search, .sc-notes-body textarea) { box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.7); }
body[data-sc-theme="light"] .sc-top-btn.active { background: #14161c; color: #fff; box-shadow: 0 0 18px rgba(20, 22, 28, 0.25); }
body[data-sc-theme="light"] .sc-vrow.live { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(var(--u-angle), #ff9a3d, #ff3d6e, #7c5cff, #ff9a3d) border-box; }
body[data-sc-theme="light"] .sc-screen { box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.5); }
body[data-sc-theme="light"] .sc-search svg { color: #e2560a; }
body[data-sc-theme="light"] .sc-dialog { background: rgba(255, 255, 255, 0.86); border-color: rgba(15, 23, 42, 0.1); }
body[data-sc-theme="light"] .sc-dialog::backdrop { background: rgba(15, 23, 42, 0.3); }
body[data-sc-theme="light"] :is(.sc-bg-preset, .sc-item, .sc-lt-opts) { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.09); }
body[data-sc-theme="light"] #sc-toast { background: rgba(20, 22, 28, 0.88); }
@media (prefers-reduced-motion: reduce) { .sc-vrow.live, .sc-output:has(.sc-onair.on) .sc-screen { animation: none; } }

/* ---------- Ultramodern extras (2026-11-02, the user's "build all"; see "Related verses, outline, audience…" in scripture-page.js) ---------- */
.sc-related { margin-top: 6px; }
.sc-related-head { margin: 12px 18px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-acc-2); }
.sc-related .sc-display-next span { color: rgba(var(--c-acc-rgb), 0.75); }
/* Looks: one tile each, its colours and words. */
.sc-looks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sc-look { position: relative; display: inline-flex; }
.sc-look > button:first-child { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font: 700 13px inherit; font-family: inherit; cursor: pointer; }
.sc-look > button:first-child i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--l1), var(--l2)); color: var(--lt); font: 800 12px Georgia, serif; font-style: normal; }
.sc-look.active > button:first-child { border-color: var(--c-acc); box-shadow: 0 0 0 2px rgba(var(--c-acc-rgb), 0.25); }
.sc-look-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--c-faint); color: #fff; font-size: 12px; line-height: 18px; cursor: pointer; }
.sc-look-save { height: 40px; padding: 0 14px; border-radius: 12px; border: 1px dashed var(--c-line); background: none; color: var(--c-dim); font: 700 13px inherit; font-family: inherit; cursor: pointer; }
.sc-look-save:hover { color: var(--c-text); border-color: rgba(var(--c-acc-rgb), 0.6); }
/* Bibles to tick (changing language, the audience's languages). */
.sc-cycle-list { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0 8px; }
.sc-cycle-list[hidden] { display: none; }
.sc-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text); cursor: pointer; }
.sc-lang input { accent-color: var(--c-acc); }
.sc-note { margin: 8px 0; font-size: 13px; line-height: 1.5; color: var(--c-dim); }
/* Audience. */
.sc-share[hidden] { display: none; }
.sc-share-qr { width: 200px; height: 200px; margin: 6px auto 12px; padding: 10px; border-radius: 16px; background: #fff; }
.sc-share-qr svg { display: block; width: 100%; height: 100%; }
.sc-share-link { display: flex; gap: 8px; margin-bottom: 6px; }
.sc-top-link.active { color: var(--c-acc-2); }
/* The outline. */
.sc-outline-text { width: 100%; box-sizing: border-box; min-height: 300px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); font: 500 13.5px/1.6 Georgia, serif; resize: vertical; }
.sc-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* Songs, the output window button, the church's logo (2026-11-02, the user's picks). */
.sc-popout { right: 52px; }
.sc-songs-dialog { width: min(680px, 94vw); }
.sc-song { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--c-card-2); border: 1px solid var(--c-line); }
.sc-song > div { flex: 1; min-width: 0; }
.sc-song b { display: block; font-size: 14px; color: var(--c-text); }
.sc-song small { display: block; font-size: 12.5px; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-song-edit[hidden], .sc-songs-list[hidden] { display: none; }
#sc-songs-list { max-height: 50vh; overflow-y: auto; }
.sc-display-next.sc-slide-on { background: rgba(var(--c-acc-rgb), 0.12); color: var(--c-text); }
.sc-display-next.sc-slide-on span { color: var(--c-acc-2); }
.sc-logo-row { display: inline-flex; align-items: center; gap: 10px; }
.sc-logo-row img { height: 36px; max-width: 120px; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(rgba(127, 127, 127, 0.2) 0 25%, transparent 0 50%) 0 0 / 10px 10px; }
/* Slides tabs, prayer requests, the Audience badge (2026-11-02, the user's picks). */
.sc-slide-tabs { display: flex; gap: 6px; padding: 0 18px 4px; flex-wrap: wrap; }
.sc-slide-tabs button { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-dim); font: 700 13px inherit; font-family: inherit; cursor: pointer; }
.sc-slide-tabs button.active { background: rgba(var(--c-acc-rgb), 0.16); border-color: rgba(var(--c-acc-rgb), 0.55); color: var(--c-text); }
.sc-stab[hidden] { display: none; }
.sc-prayer { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--c-card-2); border: 1px solid rgba(var(--c-acc-rgb), 0.35); }
.sc-prayer > div { flex: 1; min-width: 0; }
.sc-prayer b { font-size: 13.5px; color: var(--c-text); margin-right: 8px; }
.sc-prayer small { font-size: 11.5px; color: var(--c-faint); }
.sc-prayer p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--c-text); white-space: pre-line; }
.sc-prayer.done { opacity: 0.55; border-color: var(--c-line); }
.sc-top-link { position: relative; }
.sc-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--c-live); color: #fff; font: 800 10.5px/17px 'Plus Jakarta Sans', sans-serif; text-align: center; }
.sc-badge[hidden] { display: none; }
/* The streaming software link (2026-11-02). */
.sc-obs-btn { right: 94px; }
.sc-steps { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--c-text); }
a.sc-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ======================================================================
   Ultramodern 2 — "Aurora" (2026-11-02, the user's "Redesign the Scripture
   interface to make more ultramodern"): a slowly moving aurora and a faint
   dot grid behind everything; cards with a gradient hairline edge and a top
   sheen; solid gradient icon tiles; the top bar as one floating glass dock
   with keycap BLACK/CLEAR and a beating LIVE dot; detections as small cards
   with a colour strip for their kind; verse references as gradient chips;
   ON AIR as a pulsing badge and a turning ring round the output; a light
   sweep across Present. Looks only: the same parts in the same places.
   ====================================================================== */
.sc-app {
  --a1: #ff8a3d; --a2: #ff3d6e; --a3: #8b5cf6; --a4: #22d3ee;
  --u-grad: linear-gradient(135deg, var(--a1) 0%, #ff5a36 40%, var(--a2) 75%, var(--a3) 130%);
  --u-ring: linear-gradient(135deg, rgba(255, 138, 61, 0.55), rgba(255, 61, 110, 0.25) 40%, rgba(139, 92, 246, 0.35) 75%, rgba(34, 211, 238, 0.3));
  --u-glass: rgba(14, 15, 22, 0.66);
  --u-card-top: rgba(255, 255, 255, 0.055);
  background: #05060b;
  border-radius: 24px;
  padding: 14px;
}
/* The aurora: soft lights drifting, and a fading dot grid. */
.sc-app::before {
  content: ''; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(32% 38% at 18% 12%, rgba(255, 122, 48, 0.30), transparent 70%),
    radial-gradient(30% 36% at 82% 18%, rgba(139, 92, 246, 0.26), transparent 70%),
    radial-gradient(34% 40% at 60% 92%, rgba(255, 61, 110, 0.20), transparent 70%),
    radial-gradient(26% 30% at 6% 88%, rgba(34, 211, 238, 0.12), transparent 70%);
  filter: blur(30px) saturate(130%);
  animation: sc-aurora 26s ease-in-out infinite alternate;
}
.sc-app::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
}
@keyframes sc-aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-4deg) scale(1.02); }
}

/* Cards: glass with a gradient hairline edge and a sheen along the top. */
.sc-card {
  position: relative; border-radius: 20px; border-color: transparent;
  background: linear-gradient(180deg, var(--u-card-top), transparent 38%), var(--u-glass);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sc-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.02) 65%, rgba(139, 92, 246, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.sc-card:hover::before { background: linear-gradient(160deg, rgba(255, 138, 61, 0.45), rgba(255, 255, 255, 0.04) 40%, rgba(139, 92, 246, 0.35)); }
.sc-card-head h2 { font-weight: 800; letter-spacing: -0.015em; white-space: nowrap; }
.sc-hico { width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--u-grad); box-shadow: 0 6px 16px -6px rgba(255, 90, 54, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.sc-hico svg { width: 16px; height: 16px; stroke-width: 2.2; }
.sc-card-foot { border-top: 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025)); }
.sc-card-body { scrollbar-color: rgba(255, 138, 61, 0.35) transparent; }

/* The top bar: one floating dock. */
.sc-top {
  position: relative; margin: 0 0 14px; padding: 8px 10px;
  border-radius: 18px; background: rgba(12, 13, 20, 0.6);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sc-top::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--u-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.sc-tabs { padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.sc-tab { border-radius: 11px; font-weight: 800; }
.sc-tab.active { background: var(--u-grad); box-shadow: 0 8px 22px -8px rgba(255, 90, 54, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.sc-live-pill { gap: 9px; letter-spacing: .14em; background: rgba(255, 255, 255, 0.03); }
.sc-live-pill i { position: relative; }
.sc-live-pill.on { background: linear-gradient(135deg, #ff2d55, #ff5a36); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.18), 0 10px 26px -8px rgba(255, 45, 85, 0.9); }
.sc-live-pill.on i { background: #fff; animation: none; }
.sc-live-pill.on i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #fff; animation: sc-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes sc-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
/* BLACK / CLEAR as keycaps. */
.sc-top-btn { border-radius: 12px; letter-spacing: .12em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.sc-top-btn:hover { border-color: rgba(255, 138, 61, 0.6); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 106, 26, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.sc-top-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.sc-top-btn.active { background: #fff; color: #05060b; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 255, 255, 0.4); }
.sc-top-sep { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent); }
.sc-top-link { border-radius: 12px; font-weight: 700; }
.sc-top-link svg { transition: transform .2s ease, color .2s ease; }
.sc-top-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sc-top-link:hover svg { color: #ffb27a; transform: translateY(-1px) scale(1.08); }
.sc-top-link.active { color: #fff; background: linear-gradient(135deg, rgba(255, 138, 61, 0.22), rgba(139, 92, 246, 0.18)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.45); }
.sc-theme { padding: 3px; }
.sc-badge { background: linear-gradient(135deg, #ff2d55, #ff5a36); box-shadow: 0 0 0 2px #05060b; }

/* Buttons: a light sweeps across Present. */
.sc-btn { border-radius: 12px; font-weight: 700; }
.sc-btn-go { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 26px -10px rgba(255, 90, 54, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.32); }
.sc-btn-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); animation: sc-sweep 3.6s ease-in-out infinite; pointer-events: none; }
.sc-btn-go:disabled::after { display: none; }
@keyframes sc-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.sc-arrow { border-radius: 12px; }
.sc-auto-label:has(input:checked) { background: var(--u-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(255, 90, 54, 0.85); }
.sc-select, .sc-input, .sc-search { border-radius: 12px; background: rgba(255, 255, 255, 0.045); }
.sc-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18), 0 0 30px -10px rgba(255, 106, 26, 0.6); }

/* The output: ON AIR as a pulsing badge and a turning ring round the screen. */
.sc-onair { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); letter-spacing: .1em; }
.sc-card-head { min-width: 0; }
.sc-card-head > :is(button, span, label) { flex: none; }
.sc-onair::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.sc-onair.on { color: #fff; background: linear-gradient(135deg, #ff2d55, #ff5a36); text-shadow: none; box-shadow: 0 6px 18px -6px rgba(255, 45, 85, 0.9); }
.sc-onair.on::before { background: #fff; opacity: 1; animation: sc-pulse 1.2s ease-in-out infinite; }
.sc-screen { border-radius: 14px; }
.sc-output:has(.sc-onair.on) .sc-screen { border: 2px solid transparent; box-shadow: 0 0 36px -8px rgba(255, 90, 54, 0.8), 0 14px 30px -16px rgba(0, 0, 0, 0.9); background:
  linear-gradient(#000, #000) padding-box,
  linear-gradient(var(--u-angle), #ff8a3d, #ff3d6e, #8b5cf6, #22d3ee, #ff8a3d) border-box; animation: sc-edge 5s linear infinite; }
.sc-full { background: rgba(5, 6, 11, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); }
.sc-out-ref { font-weight: 800; letter-spacing: -0.01em; }

/* Live display: the verse on screen in a glowing band with a gradient strip. */
.sc-display-live { position: relative; border-radius: 16px; border: 0; background: linear-gradient(135deg, rgba(255, 138, 61, 0.22), rgba(255, 61, 110, 0.12) 55%, rgba(139, 92, 246, 0.14)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.35), 0 16px 34px -22px rgba(255, 90, 54, 0.8); }
.sc-display-live::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--u-grad); box-shadow: 0 0 12px rgba(255, 90, 54, 0.8); }

/* Verse rows: the reference as a gradient chip. */
.sc-vrow { border-radius: 14px; align-items: center; }
.sc-vrow b { -webkit-background-clip: border-box; background-clip: border-box; color: #fff; background: rgba(255, 138, 61, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.35); padding: 3px 9px; border-radius: 999px; font-size: .86em; font-weight: 800; letter-spacing: -0.005em; }
.sc-vrow.sel b, .sc-vrow.live b { background: var(--u-grad); box-shadow: 0 4px 12px -4px rgba(255, 90, 54, 0.8); }
.sc-vrow:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgba(255, 90, 54, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05); }

/* Detections: small cards, a colour strip for their kind. */
.sc-det { position: relative; margin: 0 0 10px; padding: 12px 12px 12px 16px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sc-det:first-child { padding-top: 12px; }
.sc-det::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.sc-det-quote::before, .sc-det-phrase::before { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
.sc-det-chapter::before { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }
.sc-det-head i { display: none; }

/* Queue rows and the transcript. */
.sc-qrow { border-bottom: 0; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sc-qrow.live { background: linear-gradient(135deg, rgba(255, 138, 61, 0.16), rgba(139, 92, 246, 0.1)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.45); }
.sc-lines mark { border-radius: 6px; padding: 1px 4px; background: linear-gradient(135deg, rgba(255, 138, 61, 0.3), rgba(255, 61, 110, 0.22)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.3); }
.sc-listen-btn { font-weight: 800; }
.sc-listen-btn.on { color: #ff6b81; }
.sc-listen-btn.on ~ .sc-rec { background: #ff2d55; animation: sc-rec 1.6s ease-out infinite; }
@keyframes sc-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(255, 45, 85, 0); } }

/* Dialogs and the toast. */
/* Dialogs sit outside .sc-app: they get the same colours (else a picked option was white on white). */
.sc-dialog { --u-grad: linear-gradient(135deg, #ff8a3d 0%, #ff5a36 40%, #ff3d6e 75%, #8b5cf6 130%); --u-glow: rgba(255, 106, 26, 0.45); --u-glass-2: rgba(255, 255, 255, 0.045); --u-edge: rgba(255, 255, 255, 0.08); --u-hi: rgba(255, 255, 255, 0.06); }
body[data-sc-theme="light"] .sc-dialog { --u-glass-2: rgba(15, 23, 42, 0.035); --u-edge: rgba(15, 23, 42, 0.09); --u-hi: rgba(255, 255, 255, 0.9); }
.sc-dialog :is(.sc-seg2, .sc-mode-seg) button.active { color: #fff; }
.sc-dialog { border-radius: 24px; background: rgba(14, 15, 22, 0.86); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
#sc-toast { background: rgba(14, 15, 22, 0.9); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 138, 61, 0.35); }

/* Light: the same aurora, paler, on white glass. */
body[data-sc-theme="light"] .sc-app {
  --u-glass: rgba(255, 255, 255, 0.74);
  --u-card-top: rgba(255, 255, 255, 0.7);
  background: #f3f4f9;
}
body[data-sc-theme="light"] .sc-app::before { opacity: .55; }
body[data-sc-theme="light"] .sc-app::after { background-image: radial-gradient(rgba(15, 23, 42, 0.09) 1px, transparent 1.4px); }
body[data-sc-theme="light"] .sc-card { box-shadow: 0 22px 44px -32px rgba(15, 23, 42, 0.45), inset 0 1px 0 #fff; }
body[data-sc-theme="light"] .sc-card::before { background: linear-gradient(160deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.04) 40%, rgba(139, 92, 246, 0.22)); }
body[data-sc-theme="light"] .sc-top { background: rgba(255, 255, 255, 0.72); box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.5), inset 0 1px 0 #fff; }
body[data-sc-theme="light"] .sc-top-btn { background: linear-gradient(180deg, #fff, #f1f2f7); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 2px 0 rgba(15, 23, 42, 0.14), inset 0 1px 0 #fff; }
body[data-sc-theme="light"] .sc-top-btn.active { background: #0b0c12; color: #fff; }
body[data-sc-theme="light"] .sc-top-link:hover { color: #0b0c12; background: rgba(15, 23, 42, 0.05); }
body[data-sc-theme="light"] .sc-top-link.active { color: #0b0c12; }
body[data-sc-theme="light"] .sc-tabs, body[data-sc-theme="light"] .sc-onair { background: rgba(15, 23, 42, 0.05); }
body[data-sc-theme="light"] .sc-onair.on { background: linear-gradient(135deg, #ff2d55, #ff5a36); }
body[data-sc-theme="light"] .sc-vrow b { color: #c2410c; background: rgba(255, 138, 61, 0.12); }
body[data-sc-theme="light"] .sc-vrow.sel b, body[data-sc-theme="light"] .sc-vrow.live b { color: #fff; }
body[data-sc-theme="light"] :is(.sc-det, .sc-qrow) { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07); }
body[data-sc-theme="light"] .sc-dialog { background: rgba(255, 255, 255, 0.9); }
body[data-sc-theme="light"] .sc-badge { box-shadow: 0 0 0 2px #f3f4f9; }
body[data-sc-theme="light"] .sc-full { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 23, 42, 0.12); }
/* The output head keeps Full screen | Lower third and ON AIR on one line, at any width. */
@media all {
  .sc-output .sc-card-head { gap: 6px; }
  .sc-output .sc-card-head h2 { gap: 7px; }
  .sc-output .sc-hico { width: 24px; height: 24px; }
  .sc-onair { padding: 3px 7px; gap: 4px; letter-spacing: .05em; }
  .sc-onair::before { width: 6px; height: 6px; }
  .sc-mode-seg button { padding-left: 6px; padding-right: 6px; font-size: 10.5px; }
  .sc-output .sc-card-head { padding-right: 12px; }
  .sc-output .sc-card-head h2 { min-width: 0; overflow: hidden; font-size: 14px; }
  .sc-output .sc-mode-seg { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-app::before, .sc-btn-go::after, .sc-live-pill.on i::after, .sc-onair.on::before, .sc-listen-btn.on ~ .sc-rec, .sc-output:has(.sc-onair.on) .sc-screen { animation: none; }
}

/* Songs, like the studio's Lyrics (2026-11-02, the user's "Make the song console under slides like lyrics in the studio"). */
.sc-lyr-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: var(--c-card-2); border: 1px solid var(--c-line); }
.sc-lyr-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border: 0; border-radius: 11px; background: none; color: var(--c-dim); font: 700 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.sc-lyr-tabs button i { font-style: normal; font-size: 17px; line-height: 1; filter: grayscale(.6); opacity: .8; }
.sc-lyr-tabs button:hover { color: var(--c-text); }
.sc-lyr-tabs button.active { color: #fff; background: var(--u-grad); box-shadow: 0 8px 20px -10px rgba(255, 90, 54, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.sc-lyr-tabs button.active i { filter: none; opacity: 1; }
.sc-lyr-pane { display: none; }
.sc-lyr-pane.active { display: block; }
.sc-lyr-find { flex: 1; min-width: 0; }
.sc-lyr-find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--c-text); font: inherit; font-size: 14px; outline: 0; }
.sc-lyr-elsewhere { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 138, 61, 0.08); border: 1px dashed rgba(255, 138, 61, 0.45); font-size: 13px; color: var(--c-dim); }
.sc-lyr-elsewhere[hidden] { display: none; }
.sc-lyr-elsewhere span { flex: 1 1 100%; }
.sc-lyr-elsewhere b { color: var(--c-text); }
/* Song rows: a letter tile, the title and first line, Edit and Present; the picked one and the one on screen marked. */
.sc-song { gap: 10px; border-radius: 14px; transition: border-color .2s, box-shadow .2s, transform .15s; }
.sc-song > div { cursor: pointer; }
.sc-song:hover { border-color: rgba(255, 138, 61, 0.45); transform: translateY(-1px); }
.sc-song.picked { border-color: rgba(255, 138, 61, 0.7); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12); }
.sc-song.live .sc-song-art { box-shadow: 0 0 0 2px #ff2d55, 0 0 14px rgba(255, 45, 85, 0.7); }
.sc-song-art { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--u-grad); color: #fff; font: 800 16px 'Plus Jakarta Sans', sans-serif; font-style: normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.sc-song-art.ok { background: linear-gradient(135deg, #22c55e, #16a34a); }
.sc-song-art.bad { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sc-lyr-preview { margin-top: 3px; font-style: italic; opacity: .85; }
/* The picked song's slides. */
.sc-song-deck { margin-top: 14px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 138, 61, 0.10), rgba(139, 92, 246, 0.08)); border: 1px solid rgba(255, 138, 61, 0.3); }
.sc-song-deck[hidden] { display: none; }
.sc-song-deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-song-deck-head b { font-size: 15px; color: var(--c-text); }
.sc-song-lines { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--c-dim); }
.sc-song-lines .sc-select { height: 32px; font-size: 12.5px; }
.sc-song-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.sc-song-now { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--c-dim); }
.sc-song-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.sc-song-slide { position: relative; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card-2); color: var(--c-text); text-align: left; font: 500 13px/1.45 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; }
.sc-song-slide span { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ff9a5c; }
.sc-song-slide em { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, #ff2d55, #ff5a36); color: #fff; font-style: normal; font-size: 9.5px; letter-spacing: .1em; }
.sc-song-slide:hover { border-color: rgba(255, 138, 61, 0.55); transform: translateY(-1px); }
.sc-song-slide.live { border: 1.5px solid transparent; background: linear-gradient(var(--c-card-2), var(--c-card-2)) padding-box, linear-gradient(135deg, #ff8a3d, #ff3d6e, #8b5cf6) border-box; box-shadow: 0 0 20px -6px rgba(255, 90, 54, 0.7); }
/* Online results, the drop zone for files. */
.sc-lyr-results { margin-top: 10px; max-height: 46vh; overflow-y: auto; }
.sc-lyr-loading { display: flex; justify-content: center; gap: 6px; padding: 18px; }
.sc-lyr-loading i { width: 8px; height: 8px; border-radius: 50%; background: #ff8a3d; animation: sc-lyr-dot 1s ease-in-out infinite; }
.sc-lyr-loading i:nth-child(2) { animation-delay: .15s; }
.sc-lyr-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes sc-lyr-dot { 50% { transform: translateY(-6px); opacity: .4; } }
.sc-lyr-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border-radius: 16px; border: 2px dashed rgba(255, 138, 61, 0.45); background: rgba(255, 138, 61, 0.05); color: var(--c-text); cursor: pointer; text-align: center; transition: background .2s, border-color .2s; }
.sc-lyr-drop span { font-size: 30px; }
.sc-lyr-drop small { color: var(--c-dim); }
.sc-lyr-drop:hover, .sc-lyr-drop.over { background: rgba(255, 138, 61, 0.12); border-color: #ff8a3d; }
.sc-songs-dialog { width: min(760px, 94vw); }
body[data-sc-theme="light"] .sc-song-slide span { color: #c2410c; }
@media (prefers-reduced-motion: reduce) { .sc-lyr-loading i { animation: none; } }
.sc-dialog .sc-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #ff8a3d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-song-slide { display: flex; flex-direction: column; justify-content: flex-start; }

/* Listening as a switch (2026-11-02, the user's "Make this a switch"): the mic and "Listening", a toggle on the right. */
.sc-transcript .sc-card-foot { padding-top: 10px; padding-bottom: 10px; }
.sc-listen-btn { flex: 1; justify-content: flex-start; gap: 9px; padding: 6px 2px; color: var(--c-text); text-shadow: none; }
.sc-listen-btn.on { color: var(--c-text); text-shadow: none; }
.sc-listen-btn svg { color: #34d399; transition: color .2s; }
.sc-listen-btn.on svg { color: #ff5a6e; }
.sc-listen-btn #sc-listen-label { margin-right: auto; }
.sc-switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background .25s ease, box-shadow .25s ease; }
.sc-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.sc-listen-btn.on .sc-switch { background: linear-gradient(135deg, #ff2d55, #ff8a3d); box-shadow: 0 0 14px -2px rgba(255, 45, 85, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.sc-listen-btn.on .sc-switch i { transform: translateX(18px); }
.sc-listen-btn.on .sc-switch i::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #ff2d55; animation: sc-pulse 1.2s ease-in-out infinite; }
.sc-listen-btn:focus-visible { outline: 0; }
.sc-listen-btn:focus-visible .sc-switch { box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.45); }
body[data-sc-theme="light"] .sc-listen-btn, body[data-sc-theme="light"] .sc-listen-btn.on { color: var(--c-text); }
body[data-sc-theme="light"] .sc-listen-btn svg { color: #059669; }
body[data-sc-theme="light"] .sc-listen-btn.on svg { color: #e11d48; }
body[data-sc-theme="light"] .sc-switch { background: rgba(15, 23, 42, 0.14); box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.2); }
@media (prefers-reduced-motion: reduce) { .sc-switch i, .sc-switch { transition: none; } .sc-listen-btn.on .sc-switch i::after { animation: none; } }

/* Play a chapter (2026-11-04): ▶ in Live presentation, and its player bar. */
.sc-play-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--u-grad); color: #fff; font: 800 12px 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(255, 90, 54, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.sc-play-btn.on { background: linear-gradient(135deg, #ff2d55, #ff5a36); }
.sc-player { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 18px 10px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(139, 92, 246, 0.12)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.35); }
.sc-player[hidden] { display: none; }
.sc-player .sc-icon-btn { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
.sc-player-toggle { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--u-grad); color: #fff; font-size: 15px; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(255, 90, 54, 0.9); }
.sc-player.playing .sc-player-toggle { animation: sc-player-beat 2s ease-in-out infinite; }
@keyframes sc-player-beat { 50% { box-shadow: 0 0 0 6px rgba(255, 90, 54, 0.18), 0 6px 16px -6px rgba(255, 90, 54, 0.9); } }
.sc-player-mid { flex: 1 1 140px; min-width: 120px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--c-text); }
.sc-player-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.sc-player-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--u-grad); transition: width .4s ease; }
.sc-player-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c-dim); white-space: nowrap; }
.sc-player-opt .sc-select { height: 28px; padding: 0 6px; font-size: 12px; }
.sc-player-opt input { accent-color: #ff6a1a; }
body[data-sc-theme="light"] .sc-player-track { background: rgba(15, 23, 42, 0.1); }
@media (prefers-reduced-motion: reduce) { .sc-player.playing .sc-player-toggle { animation: none; } }

/* ======================================================================
   Sermon Notes in cards like Scripture (2026-11-04, the user's "Divide the
   sections of the sermon notes nicely like the Scripture" and "Make it
   more ultra-modern design"): the AnnanAI summary, Statements (wide) and
   Mentions on top; the Outline and your Notes under them; Transcripts and
   book across the bottom. Same glass cards, gradient icon tiles and chips.
   ====================================================================== */
.sc-notes-view.sc-notes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 430px 430px auto; gap: 12px; }
/* 2026-11-06: Mentions and Notes removed; Ask AnnanAI tall on the right, the Outline under the first three. */
.sc-notes-grid .sc-summary { grid-column: 1; grid-row: 1; }
.sc-notes-grid .sc-statements { grid-column: 2 / span 2; grid-row: 1; }
.sc-notes-grid .sc-ask { grid-column: 4; grid-row: 1 / span 2; }
.sc-notes-grid .sc-outline { grid-column: 1 / span 3; grid-row: 2; }
.sc-notes-grid .sc-book { grid-column: 1 / -1; grid-row: 3; }
.sc-notes-grid .sc-card-head h2 { white-space: nowrap; }
.sc-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 138, 61, 0.18); color: #ffb27a; font-size: 11px; font-weight: 800; }
.sc-count:empty { display: none; }
/* The summary: one column now, the button across its top. */
.sc-notes-grid .sc-sum-body { display: flex; flex-direction: column; gap: 10px; }
.sc-notes-grid .sc-sum-verses { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-line); padding-top: 10px; }
.sc-wide-go { width: 100%; justify-content: center; height: 40px; font-size: 13.5px; flex: none; }
.sc-notes-grid .sc-sum-status:empty { display: none; }
/* Statements: category chips, then the numbered statements. */
.sc-st-cats { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; }
.sc-st-cats:empty { display: none; }
.sc-st-cats button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--c-dim); font: 700 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.sc-st-cats button b { font-weight: 800; opacity: .7; }
.sc-st-cats button.on { background: var(--u-grad); color: #fff; box-shadow: 0 6px 16px -8px rgba(255, 90, 54, 0.9); }
.sc-st { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow .2s, transform .15s; }
.sc-st:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.35), 0 12px 24px -18px rgba(255, 90, 54, 0.9); }
.sc-st.live { box-shadow: inset 0 0 0 1.5px rgba(255, 45, 85, 0.7), 0 0 22px -8px rgba(255, 45, 85, 0.8); }
.sc-st-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--u-grad); color: #fff; font: 800 13px "Plus Jakarta Sans", sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.sc-st-text p { margin: 0 0 6px; font: 600 14.5px/1.5 Georgia, "Times New Roman", serif; color: var(--c-text); }
.sc-st-cat { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 138, 61, 0.14); color: #ffb27a; }
.sc-st-acts { display: flex; gap: 6px; align-items: center; }
/* A hue for each category (chips and labels). */
[data-hue="faith"] { --hue: 96, 165, 250; }
[data-hue="promise"] { --hue: 52, 211, 153; }
[data-hue="instruction"] { --hue: 251, 191, 36; }
[data-hue="encouragement"] { --hue: 244, 114, 182; }
[data-hue="warning"] { --hue: 248, 113, 113; }
[data-hue="prayer"] { --hue: 167, 139, 250; }
[data-hue="worship"] { --hue: 232, 121, 249; }
[data-hue="wisdom"] { --hue: 45, 212, 191; }
[data-hue="grace"] { --hue: 255, 154, 61; }
[data-hue="testimony"] { --hue: 129, 140, 248; }
.sc-st-cat[data-hue] { background: rgba(var(--hue), 0.16); color: rgb(var(--hue)); }
.sc-st-cats button[data-hue]:not(.on) b { color: rgb(var(--hue)); opacity: 1; }
/* Ask AnnanAI: which sermon, the conversation, suggestions, the question box. */
.sc-ask-about { margin: 0 18px 10px; width: auto; height: 36px; }
.sc-ask-log { display: flex; flex-direction: column; gap: 8px; }
.sc-ask-q { align-self: flex-end; max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--u-grad); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; box-shadow: 0 8px 18px -12px rgba(255, 90, 54, 0.9); }
.sc-ask-a { align-self: flex-start; max-width: 96%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); color: var(--c-text); font-size: 13px; line-height: 1.55; }
.sc-ask-a p { margin: 0 0 8px; }
.sc-ask-acts { display: flex; gap: 6px; margin-top: 4px; }
.sc-ask-acts .sc-btn { height: 28px; font-size: 12px; }
.sc-ask-wait { display: flex; gap: 5px; padding: 14px 16px; }
.sc-ask-wait span { width: 7px; height: 7px; border-radius: 50%; background: #ff8a3d; animation: sc-ask-dot 1.1s infinite ease-in-out; }
.sc-ask-wait span:nth-child(2) { animation-delay: .15s; } .sc-ask-wait span:nth-child(3) { animation-delay: .3s; }
@keyframes sc-ask-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sc-ask-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px 0; border-top: 1px solid var(--c-line); }
.sc-ask-chips button { height: 26px; padding: 0 10px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--c-dim); font: 700 11.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.sc-ask-chips button:hover { color: var(--c-text); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.45); }
.sc-ask-form { display: flex; gap: 8px; padding: 10px 18px 16px; }
.sc-ask-form .sc-input { flex: 1; min-width: 0; height: 38px; }
.sc-ask-form .sc-btn-go { height: 38px; padding: 0 16px; }
body[data-sc-theme="light"] .sc-ask-a, body[data-sc-theme="light"] .sc-ask-chips button { background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); }
/* Outline. */
.sc-ol-title { margin: 0; font: 800 18px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--c-text); }
.sc-ol-sub { margin: 4px 0 12px; font: italic 13.5px/1.5 Georgia, serif; color: var(--c-dim); }
.sc-ol-parts { margin: 0; padding: 0; list-style: none; counter-reset: part; }
.sc-ol-parts > li { position: relative; margin: 0 0 12px; padding: 10px 12px 10px 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); counter-increment: part; }
.sc-ol-parts > li::before { content: counter(part); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--u-grad); color: #fff; font: 800 12px "Plus Jakarta Sans", sans-serif; }
.sc-ol-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 14px; color: var(--c-text); }
.sc-ol-part-show { height: 26px; font-size: 11.5px; flex: none; }
.sc-ol-parts > li.live { box-shadow: inset 0 0 0 1.5px rgba(255, 45, 85, 0.7), 0 0 22px -8px rgba(255, 45, 85, 0.8); }
.sc-notes-grid .sc-outline .sc-ol-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .sc-notes-grid .sc-outline .sc-ol-parts > li { margin: 0; }
.sc-ol-subhead { margin-top: 2px; font-size: 12.5px; font-style: italic; color: var(--c-dim); }
.sc-ol-parts ul { margin: 6px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.55; color: var(--c-text); }
.sc-ol-parts ul li::marker { color: #ff8a3d; }
/* Transcripts and book. */
.sc-book-save-title { width: 240px; height: 34px; }
.sc-book-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 18px; overflow: visible; }
.sc-tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sc-tr.picked { background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(139, 92, 246, 0.1)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.45); }
.sc-tr-pick input { width: 18px; height: 18px; accent-color: #ff6a1a; cursor: pointer; }
.sc-tr-main b { display: block; font-size: 14px; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tr-main small { font-size: 12px; color: var(--c-faint); }
.sc-tr-ok { color: #34d399; font-weight: 700; }
.sc-tr-acts { display: flex; gap: 6px; align-items: center; }
.sc-book-make { padding: 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 138, 61, 0.12), rgba(139, 92, 246, 0.1)); box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.3); align-self: start; }
.sc-book-make .sc-opt { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.sc-book-make .sc-opt label { font-size: 12px; font-weight: 700; color: var(--c-dim); }
.sc-book-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-book-actions .sc-btn-go { flex: 1; justify-content: center; }
body[data-sc-theme="light"] :is(.sc-st, .sc-tr, .sc-ol-parts > li) { background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); }
body[data-sc-theme="light"] .sc-st-cats button:not(.on) { background: rgba(15, 23, 42, 0.04); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1); }
body[data-sc-theme="light"] .sc-count { color: #c2410c; }
body[data-sc-theme="light"] .sc-st-cat:not([data-hue]) { color: #c2410c; }
@media (max-width: 1100px) {
  .sc-notes-view.sc-notes-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(360px, auto); }
  .sc-notes-grid .sc-summary, .sc-notes-grid .sc-ask { grid-column: auto; grid-row: auto; }
  .sc-notes-grid .sc-statements, .sc-notes-grid .sc-outline, .sc-notes-grid .sc-book { grid-column: 1 / -1; grid-row: auto; }
  .sc-notes-grid .sc-ask { min-height: 520px; }
  .sc-book-body { grid-template-columns: minmax(0, 1fr); }
}
.sc-book-make .sc-input, .sc-book-save-title { height: 36px; font-size: 13.5px; padding: 0 12px; }
.sc-book-make .sc-input::placeholder, .sc-book-save-title::placeholder { font-size: 13px; }
.sc-ask-form .sc-input, .sc-ask-form .sc-input::placeholder { font-size: 13.5px; }
.sc-ask-about { font-size: 13.5px; }
/* 2026-11-06 batch: Live notes, rotate, quote cards, import, series, book extras. */
.sc-live-row { display: flex; align-items: center; gap: 8px; }
.sc-mini-switch { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--c-text); font: 700 12.5px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.sc-mini-switch.on .sc-switch { background: linear-gradient(135deg, #ff2d55, #ff8a3d); }
.sc-mini-switch.on .sc-switch i { transform: translateX(18px); }
.sc-live-every { height: 32px; font-size: 12px; width: auto; }
.sc-live-status { font-size: 11.5px; color: var(--c-faint); }
.sc-live-status:empty { display: none; }
.sc-st-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 18px 10px; font-size: 12px; color: var(--c-dim); }
.sc-st-tools[hidden] { display: none; }
.sc-st-tick { flex: 1; min-width: 140px; }
.sc-st-tools .sc-select { height: 30px; width: auto; font-size: 12px; }
.sc-st-tools .sc-btn { height: 30px; font-size: 12px; }
.sc-st-pick { display: inline-grid; place-items: center; width: 26px; height: 26px; cursor: pointer; }
.sc-st-pick input { width: 17px; height: 17px; accent-color: #ff6a1a; cursor: pointer; }
.sc-card-dialog { width: min(860px, 94vw); }
.sc-qc-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.sc-card-preview canvas { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: #000; }
.sc-card-opts .sc-opt { flex-wrap: wrap; }
.sc-card-opts .sc-seg2 { flex-wrap: wrap; }
.sc-card-acts { display: flex; gap: 8px; margin-top: 10px; }
.sc-import { margin: 0 0 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.sc-import summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--c-text); }
.sc-import summary small { font-weight: 600; font-size: 11.5px; color: var(--c-faint); }
.sc-import-body { padding: 0 14px 12px; }
.sc-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 12px; border: 1.5px dashed rgba(255, 138, 61, 0.5); text-align: center; cursor: pointer; color: var(--c-text); }
.sc-drop.over { background: rgba(255, 138, 61, 0.1); }
.sc-drop small { color: var(--c-faint); font-size: 11.5px; }
.sc-imp-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.sc-imp-link { display: flex; gap: 8px; margin-top: 8px; }
.sc-imp-link .sc-input { flex: 1; min-width: 0; }
.sc-import .sc-input { height: 36px; font-size: 13px; padding: 0 10px; }
.sc-imp { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sc-imp-main { flex: 1; min-width: 0; }
.sc-imp-main b { display: block; font-size: 13px; color: var(--c-text); }
.sc-imp-main small { font-size: 12px; color: var(--c-faint); }
.sc-imp-err { color: #ff8a96; }
.sc-imp-bar { height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sc-imp-bar i { display: block; height: 100%; background: var(--u-grad); }
.sc-series-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.sc-series-chips[hidden] { display: none; }
.sc-series-chips button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--c-dim); font: 700 12px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.sc-series-chips button.on { background: var(--u-grad); color: #fff; }
.sc-tr-series { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(139, 92, 246, 0.18); color: #c4b5fd; font-weight: 700; font-size: 11px; }
.sc-series-row, .sc-cover-row { display: flex; gap: 8px; align-items: center; }
.sc-series-row .sc-input { flex: 1; min-width: 0; }
.sc-book-more { margin: 8px 0; }
.sc-book-more summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--c-dim); padding: 4px 0; }
.sc-book-text { height: auto !important; padding: 8px 12px !important; resize: vertical; font: 500 13px/1.5 "Plus Jakarta Sans", sans-serif; }
#sc-cover-img { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6); }
body[data-sc-theme="light"] :is(.sc-import, .sc-imp, .sc-series-chips button:not(.on), .sc-mini-switch) { background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1); }
@media (max-width: 1100px) { .sc-qc-body { grid-template-columns: minmax(0, 1fr); } .sc-imp-fields { grid-template-columns: minmax(0, 1fr); } }
/* The statement buttons under the words (2026-11-06: four buttons left the words a narrow column). */
.sc-notes-grid .sc-st { grid-template-columns: 30px minmax(0, 1fr); }
.sc-notes-grid .sc-st-acts { grid-column: 2; flex-wrap: wrap; }
/* Scripture's plans (2026-11-06): locks on what the plan doesn't include. */
.sc-notes-view.sc-plan-locked { position: relative; }
.sc-notes-view.sc-plan-locked > .sc-card { filter: blur(3px) saturate(0.8); opacity: 0.55; pointer-events: none; user-select: none; }
.sc-plan-lock { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding-top: 90px; }
.sc-plan-lock[hidden] { display: none; }
.sc-plan-lock-card { width: min(460px, 92%); padding: 24px 24px 20px; border-radius: 20px; text-align: center; background: var(--u-glass-2, rgba(20, 22, 32, 0.92)); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 138, 61, 0.35); backdrop-filter: blur(14px); }
.sc-plan-lock-card h3 { margin: 10px 0 8px; font-size: 18px; color: var(--c-text); }
.sc-plan-lock-card p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--c-dim); }
.sc-plan-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--u-grad); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.sc-book-make { position: relative; }
.sc-plan-lock-small { padding-top: 24px; border-radius: 16px; }
.sc-plan-lock-small .sc-plan-lock-card { padding: 16px; }
.sc-plan-locked-part > :not(.sc-plan-lock) { opacity: 0.45; }
.sc-import.sc-plan-locked-part summary::after { content: "Business"; margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--u-grad); color: #fff; font-size: 10.5px; font-weight: 800; }
.sc-top-link.sc-plan-pro::after { content: "Pro"; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--u-grad); color: #fff; font-size: 9.5px; font-weight: 800; }
.sc-plan-what { font-size: 16px; font-weight: 700; color: var(--c-text); margin: 4px 0 8px; }
.sc-plan-acts { display: flex; justify-content: flex-end; margin-top: 12px; }
body[data-sc-theme="light"] .sc-plan-lock-card { background: rgba(255, 255, 255, 0.94); box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.35), inset 0 0 0 1px rgba(255, 138, 61, 0.35); }

/* The confidence monitor's window (2026-11-06) */
.sc-stage-notes { width: 100%; min-height: 110px; height: auto; padding: 10px 12px; resize: vertical; font: inherit; line-height: 1.5; }

/* The sermon library switch on each saved sermon (2026-11-06) */
.sc-tr-pub { filter: grayscale(1); opacity: .55; }
.sc-tr-pub.on { filter: none; opacity: 1; border-color: rgba(52, 211, 153, 0.6); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); }

/* Offline (2026-11-06) */
.sc-offline-btn.ready { border-color: rgba(46, 229, 157, 0.5); color: #2ee59d; }
.sc-offline-btn.down { border-color: rgba(251, 191, 36, 0.7); color: #fde68a; background: rgba(251, 191, 36, 0.16); animation: sc-pulse 1.6s ease-in-out infinite; }
.sc-offline-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.sc-offline-list li { display: flex; gap: 10px; align-items: center; color: var(--c-dim, #9aa); }
.sc-offline-list li span { width: 20px; text-align: center; font-weight: 800; }
.sc-offline-list li.ok { color: var(--c-text, #fff); } .sc-offline-list li.ok span { color: #2ee59d; }
.sc-offline-list li.when span { color: inherit; }