:root {
  --navy-1:#040e60; --navy-2:#030e69; --navy-3:#0e3162;
  --gold:#e6b413; --gold-r:#D4AF37;
  --cyan:#00bbff; --cyan-l:#b5e8fa;
  --text-p:#ffffff; --text-s:var(--cyan-l); --accent:var(--gold);
  --fs-verse:clamp(2rem,4.5vw,5rem);
  --fs-ref:clamp(1rem,2vw,2rem);
  --fs-verse-lt:clamp(4rem,9vw,10rem);
  --fs-ref-lt:clamp(0.75rem,1.5vw,1.5rem);
  --fs-ui:0.875rem;
  --panel-w:440px; --touch:44px; --panel-scale-factor:1;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:transparent}

/* ── OVERLAY CONTAINER ── */
#overlay{
  position:fixed;inset:0;
  background:linear-gradient(160deg,var(--navy-1) 0%,var(--navy-2) 50%,var(--navy-3) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, background .5s ease, padding .5s ease, align-items .5s ease;
  pointer-events: none;
}
#overlay.off{opacity:0;}
#overlay.loading #scripture-text{opacity:.35;transition:opacity .2s}

#scripture-display{
  max-width:min(1100px,88vw);text-align:center;padding:2rem;
  transition:all .4s cubic-bezier(.4,0,.2,1);
}

#scripture-text{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:var(--fs-verse);font-weight:400;line-height:1.65;
  color:var(--text-p);letter-spacing:.01em;margin-bottom:1.5rem;
  transition:color .4s ease;
}
#scripture-text sup{font-size:.5em;color:var(--text-s);vertical-align:super;margin-right:.3em}
#scripture-text.entering{animation:verseIn .5s ease forwards}
@keyframes verseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

#scripture-text span[style*="background-color"] {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.gold-rule{
  width:80px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  margin:0 auto 1.25rem;transition:background .4s;
}
#scripture-reference{
  font-family:'Cinzel','Times New Roman',serif;
  font-size:var(--fs-ref);font-weight:600;
  color:var(--text-s);letter-spacing:.14em;text-transform:uppercase;
  transition:color .4s;
}

/* ── Lower Third Layout (Title-Safe Bounds) ── */
#overlay.lower-third, body.pre-lt #overlay {
  background: transparent;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
#overlay.lower-third #scripture-display, body.pre-lt #overlay #scripture-display {
  max-width: 100%;
  width: 100%;
  position: relative;
  background: rgba(3, 14, 105, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.1rem 5% 0.9rem;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 3px solid var(--accent);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}
#overlay.lower-third #scripture-text, body.pre-lt #overlay #scripture-text { margin-bottom: 0.3rem; font-size:var(--fs-verse-lt); }
#overlay.lower-third #scripture-reference, body.pre-lt #overlay #scripture-reference { font-size:var(--fs-ref-lt); }
#overlay.lower-third .gold-rule, body.pre-lt #overlay .gold-rule { display: none; }
#overlay.lower-third #scripture-reference, body.pre-lt #overlay #scripture-reference {
  text-align: right;
  margin-top: 0.4rem;
}

body.solemn{--text-p:#EAEAEA;--text-s:#A2B5C1;--accent:#CCCCCC}

/* ── FLOATING PANEL (Width: 300px & Scrollable with padding-bottom) ── */
#control-panel{
  position:fixed;top:24px;right:24px;
  width:var(--panel-w);max-height:calc((100vh - 48px) / var(--panel-scale-factor,1));
  background:rgba(3,14,105,1);backdrop-filter:blur(18px);
  border:1px solid rgba(230,180,19,.2);
  border-radius: 14px;
  z-index:850;overflow-y:auto;overflow-x:hidden;
  padding: 1.2rem 1.2rem 5rem 1.2rem; /* Increased padding bottom to prevent clipping */
  display:flex;flex-direction:column;gap:1rem;
  transform:translateX(0);
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity 0.3s;
  pointer-events: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  zoom: var(--panel-scale-factor, 1);
}
#control-panel.closed{transform:translateX(calc(var(--panel-w) + 40px)); opacity: 0; pointer-events: none;}
#control-panel.lt-preview{max-height:calc((100vh - 48px - var(--lt-bar-height, 220px) - 16px) / var(--panel-scale-factor,1));}

#panel-close-row{
  position:sticky;top:-1.2rem;z-index:20;
  background:rgba(3,14,105,1);
  margin:-1.2rem -1.2rem 0;padding:.7rem 1.2rem .5rem;
  display:flex;justify-content:flex-end;
}

.p-head{
  font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);padding-bottom:.4rem;border-bottom:1px solid rgba(230,180,19,.22);
  margin-bottom:.2rem;
}
.sect{display:flex;flex-direction:column;gap:.55rem}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* ── Buttons ── */
.btn{
  height:var(--touch);padding:0 1rem;border-radius:8px;border:none;
  cursor:pointer;font-family:'Inter',sans-serif;font-size:var(--fs-ui);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;
  gap:.35rem;transition:all .18s;white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#040e60}
.btn-gold:hover{background:var(--gold-r)}
.btn-out{background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff}
.btn-out:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-red{background:rgba(200,50,50,.22);color:#ff9090;border:1px solid rgba(200,50,50,.22)}
.btn-red:hover{background:rgba(200,50,50,.42)}
.btn-sm{height:34px;font-size:.8rem;padding:0 .75rem}
.btn-lg{height:44px;font-size:0.9rem}

@keyframes btnNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.btn-nudge{animation:btnNudge .35s ease}

/* ── Nav row ── */
.nav-row{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center}
.verse-id{text-align:center;font-family:'Cinzel',serif;font-size:.68rem;color:var(--cyan-l);letter-spacing:.1em;line-height:1.4}

@keyframes badgePulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
.loading-badge {
  animation: badgePulse 1s infinite ease-in-out;
}

/* ── Toggle Switch ── */
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:.3rem 0}
.tog-lbl{font-family:'Inter',sans-serif;font-size:var(--fs-ui);color:rgba(255,255,255,.82)}
.tog{position:relative;width:46px;height:25px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0}
.tog-track{position:absolute;inset:0;border-radius:13px;background:rgba(255,255,255,.14);cursor:pointer;transition:background .2s}
.tog-track::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .2s}
.tog input:checked+.tog-track{background:var(--gold)}
.tog input:checked+.tog-track::after{transform:translateX(21px)}

/* ── Slider ── */
.sl-row{display:flex;align-items:center;gap:.6rem}
.sl-a{font-family:'Inter',sans-serif;color:rgba(255,255,255,.48);min-width:20px;text-align:center}
.sl-a.lg{font-size:1.1rem}
input[type=range]{flex:1;height:4px;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.15);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);cursor:pointer}
.sl-val{font-family:'Inter',sans-serif;font-size:.75rem;color:rgba(255,255,255,.42);min-width:36px;text-align:right}

/* ── Custom select design overrides ── */
.custom-select-container { position: relative; width: 100%; margin-bottom: 6px; }
.custom-select-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: var(--touch); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  color: #fff; padding: 0 14px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: var(--fs-ui); transition: border-color 0.2s;
}
.custom-select-trigger:hover { border-color: var(--gold); }
.custom-select-options {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #0e3162; border: 1px solid rgba(230, 180, 19, .25);
  border-radius: 8px; z-index: 10000; max-height: 200px; overflow-y: auto;
  margin-top: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.custom-select-options.flip-up {
  top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px;
}
.custom-select-option {
  padding: 10px 14px; cursor: pointer; font-size: var(--fs-ui); color: rgba(255,255,255,0.8);
  transition: background 0.15s, color 0.15s;
}
.custom-select-option:hover { background: rgba(255,255,255,0.06); color: #fff; }
.custom-select-option.selected { background: rgba(230,180,19,0.15); color: var(--gold); }

.f-input {
  width:100%;height:var(--touch);padding:0 .875rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:8px;color:#fff;
  font-family:'Inter',sans-serif;font-size:var(--fs-ui);
  appearance:none;-webkit-appearance:none;outline:none;transition:border-color .2s;
}
.f-input:focus { border-color: var(--gold); }

#status{font-family:'Inter',sans-serif;font-size:.78rem;padding:.45rem .75rem;border-radius:6px;text-align:center;display:none}
#status.loading{background:rgba(0,187,255,.15);color:var(--cyan)}
#status.success{background:rgba(50,200,100,.18);color:#7ef0a8}
#status.error{background:rgba(200,50,50,.18);color:#f09090}
#status.info{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}

.fav-item{display:flex;align-items:center;justify-content:space-between;padding:.55rem .7rem;background:rgba(255,255,255,.05);border-radius:8px;gap:.5rem}
.fav-ref{font-family:'Cinzel',serif;font-size:.7rem;color:var(--cyan-l);letter-spacing:.08em}
.fav-acts{display:flex;gap:.35rem;flex-shrink:0}

.search-wrap{position:relative}
#search-results{position:absolute;top:100%;left:0;right:0;background:#0e3162;border:1px solid rgba(230,180,19,.25);border-radius:0 0 8px 8px;z-index:200;display:none;max-height:200px;overflow-y:auto}
.sr-item{padding:.65rem .875rem;cursor:pointer;font-family:'Inter',sans-serif;font-size:var(--fs-ui);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s}
.sr-item:hover{background:rgba(230,180,19,.15);color:var(--gold)}

.shortcuts{font-family:'Inter',sans-serif;font-size:.75rem;color:rgba(255,255,255,.3);line-height:2}
kbd{display:inline-block;padding:1px 5px;background:rgba(255,255,255,.1);border-radius:4px;font-family:monospace;font-size:.68rem}

.color-swatch {
  width: 20px;height: 20px;border-radius: 50%;cursor: pointer;
  outline: none;padding: 0;box-sizing: border-box;transition: transform 0.15s, border-color 0.15s;
}
.color-swatch.active { transform: scale(1.15); }
hr{border:none;border-top:1px solid rgba(255,255,255,.06);margin:0}