:root{
    --bg-deep:#0d1117;
    --bg-panel:#161b22;
    --bg-card:#1c2330;
    --gold:#d4a843;
    --gold-bright:#f0c75e;
    --cream:#f4ecd8;
    --slate:#8b97a8;
    --line:#2a3242;
    --green:#3fb27f;
    --red:#e2584d;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Georgia','Times New Roman',serif;
    background:var(--bg-deep);
    color:var(--cream);
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow-x:hidden;
  }
  body[data-bg="midnight"] main{
    --stage-bg:#0d1117;
    --gold:#d4a843;
    --gold-bright:#f0c75e;
    --cream:#f4ecd8;
    --slate:#8b97a8;
  }
  body[data-bg="warm"] main{
    --stage-bg:#22130b;
    --gold:#e0b15b;
    --gold-bright:#f5cf78;
    --cream:#fff2dc;
    --slate:#c3a98d;
  }
  body[data-bg="forest"] main{
    --stage-bg:#071611;
    --gold:#b7c66a;
    --gold-bright:#dce58e;
    --cream:#edf7ea;
    --slate:#91ad9d;
  }
  body[data-bg="royal"] main{
    --stage-bg:#120f24;
    --gold:#c8a8ff;
    --gold-bright:#e1cbff;
    --cream:#f3efff;
    --slate:#aaa0c9;
  }
  body[data-bg="plain"] main{
    --stage-bg:#050505;
    --gold:#fff;
    --gold-bright:#fff;
    --cream:#fff;
    --slate:#b8b8b8;
  }
  body[data-bg="paper"] main{
    --stage-bg:#f7f0df;
    --gold:#8a5a14;
    --gold-bright:#5d3d0e;
    --cream:#22180c;
    --slate:#6c5a43;
  }
  body[data-bg="daylight"] main{
    --stage-bg:#f5f8ff;
    --gold:#245c9c;
    --gold-bright:#123a66;
    --cream:#111827;
    --slate:#596579;
  }
  body[data-bg="soft-blue"] main{
    --stage-bg:#dcebf7;
    --gold:#2f5f7b;
    --gold-bright:#193f58;
    --cream:#10202b;
    --slate:#4d6a7d;
  }
  body[data-bg="linen"] main{
    --stage-bg:#f1eadf;
    --gold:#7c5738;
    --gold-bright:#4f341f;
    --cream:#1f1711;
    --slate:#6d5e50;
  }
  body[data-bg="rose"] main{
    --stage-bg:#f7e5e7;
    --gold:#8b3f52;
    --gold-bright:#5c2534;
    --cream:#271116;
    --slate:#73515a;
  }
  body[data-bg="charcoal"] main{
    --stage-bg:#171717;
    --gold:#d8d0bd;
    --gold-bright:#fff2d2;
    --cream:#f5f0e8;
    --slate:#aba395;
  }
  .app-shell{
    display:flex;
    flex-direction:column;
    flex:1;
  }

  /* ===== HEADER / CONTROL BAR ===== */
  header{
    background:var(--bg-panel);
    border-bottom:1px solid var(--line);
    padding:14px 20px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    font-family:Arial,Helvetica,sans-serif;
  }
  .brand{
    font-family:Georgia,serif;
    font-size:20px;
    font-weight:bold;
    color:var(--gold-bright);
    letter-spacing:0.5px;
    margin-right:auto;
  }
  .brand span{color:var(--slate);font-weight:normal;font-size:13px;display:block;letter-spacing:1px;}
  .load-status{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:36px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--bg-card);
    color:var(--slate);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
  }
  .load-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--slate);
  }
  .load-status.ready{color:var(--green);border-color:rgba(63,178,127,.45);}
  .load-status.ready::before{background:var(--green);}
  .load-status.error{color:var(--red);border-color:rgba(226,88,77,.55);}
  .load-status.error::before{background:var(--red);}
  .load-status.loading::before{animation:pulse 1.1s infinite;}

  button{
    font-family:Arial,Helvetica,sans-serif;
    border:none;
    border-radius:6px;
    padding:10px 18px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:transform .08s ease, opacity .15s ease;
  }
  button:active{transform:scale(0.97);}
  button:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
  }
  #micBtn{
    background:var(--green);
    color:#08130e;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:150px;
    justify-content:center;
  }
  #micBtn.listening{background:var(--red);color:#fff;}
  #micBtn.unsupported{background:#444;color:#999;cursor:not-allowed;}
  .dot{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block;}
  #micBtn.listening .dot{animation:pulse 1.1s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

  .ghost-btn{
    background:transparent;
    color:var(--cream);
    border:1px solid var(--line);
  }
  .ghost-btn:hover{border-color:var(--gold);color:var(--gold-bright);}
  .gold-btn{
    background:var(--gold);
    color:#1b1304;
  }

  .ref-navigator{
    display:none;
    align-items:center;
    gap:6px;
    padding:5px;
    border:1px solid var(--line);
    border-radius:6px;
    background:rgba(28,35,48,.75);
  }
  .ref-navigator.active{
    display:flex;
  }

  select, input[type=text]{
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg-card);
    color:var(--cream);
    border:1px solid var(--line);
    border-radius:6px;
    padding:9px 12px;
    font-size:14px;
  }
  select:focus, input:focus{outline:1px solid var(--gold);}
  .ref-navigator select{
    min-width:76px;
    padding:7px 9px;
    font-size:13px;
  }
  #navBookSelect{
    min-width:150px;
  }
  .nav-show-btn{
    padding:7px 12px;
    font-size:13px;
  }

  /* ===== MAIN STAGE ===== */
  main{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    text-align:center;
    position:relative;
    background:var(--stage-bg, var(--bg-deep));
  }
  .empty-state{
    color:var(--slate);
    font-family:Arial,Helvetica,sans-serif;
    max-width:520px;
  }
  .empty-state h2{
    font-family:Georgia,serif;
    color:var(--gold-bright);
    font-size:28px;
    margin-bottom:12px;
  }
  .empty-state p{font-size:15px;line-height:1.6;margin-bottom:8px;}
  .empty-state code{
    background:var(--bg-card);
    padding:2px 8px;
    border-radius:4px;
    color:var(--gold-bright);
    font-family:Consolas,Monaco,monospace;
    font-size:13px;
  }

  .verse-display{display:none;max-width:1000px;width:100%;}
  .verse-display.active{display:block;animation:fadeUp .45s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

  .verse-ref{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--gold);
    font-size:clamp(16px,2.2vw,22px);
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
    font-weight:600;
  }
  .verse-text{
    font-size:clamp(28px,4.6vw,58px);
    line-height:1.45;
    color:var(--cream);
    font-weight:400;
  }
  .verse-text .vnum{
    font-size:0.5em;
    vertical-align:super;
    color:var(--gold);
    margin-right:6px;
    font-family:Arial,sans-serif;
  }
  .verse-version{
    margin-top:22px;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--slate);
    font-size:14px;
    letter-spacing:1px;
  }

  /* multi-verse list */
  .verse-list .vrow{
    text-align:left;
    margin-bottom:14px;
  }
  .verse-list .vrow .vnum{
    color:var(--gold);
    font-family:Arial,sans-serif;
    font-size:0.5em;
    vertical-align:super;
    margin-right:6px;
  }

  /* ===== LIVE TRANSCRIPT / LOG PANEL ===== */
  .panel{
    background:var(--bg-panel);
    border-top:1px solid var(--line);
    padding:14px 20px;
    font-family:Arial,Helvetica,sans-serif;
  }
  .panel-row{
    display:flex;
    gap:24px;
    max-width:1200px;
    margin:0 auto;
    align-items:flex-start;
  }
  .transcript-box{
    flex:1;
    min-width:0;
  }
  .transcript-box h3, .history-box h3{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--slate);
    margin-bottom:6px;
    font-weight:600;
  }
  #liveTranscript{
    font-size:14px;
    color:var(--slate);
    line-height:1.5;
    min-height:20px;
    max-height:60px;
    overflow-y:auto;
    word-wrap:break-word;
  }
  #liveTranscript .highlight{color:var(--gold-bright);font-weight:bold;}

  .history-box{
    flex:0 0 320px;
  }
  #historyList{
    display:flex;
    flex-direction:column;
    gap:4px;
    max-height:90px;
    overflow-y:auto;
  }
  .hist-item{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:5px;
    padding:6px 10px;
    font-size:13px;
    cursor:pointer;
    color:var(--cream);
    display:flex;
    justify-content:space-between;
    gap:8px;
    white-space:nowrap;
  }
  .hist-item:hover{border-color:var(--gold);color:var(--gold-bright);}
  .hist-item span.snippet{
    color:var(--slate);
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
  }

  /* ===== SEARCH MODAL ===== */
  .modal-backdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.6);
    z-index:50;
    align-items:center;
    justify-content:center;
  }
  .modal-backdrop.active{display:flex;}
  .modal{
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:24px;
    width:90%;
    max-width:480px;
    font-family:Arial,Helvetica,sans-serif;
  }
  .modal h3{color:var(--gold-bright);margin-bottom:14px;font-family:Georgia,serif;font-size:20px;}
  .free-search{
    display:flex;
    gap:8px;
    margin-bottom:12px;
  }
  .free-search input{
    width:100%;
  }
  .field-divider{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--slate);
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    margin:4px 0 12px;
  }
  .field-divider::before,
  .field-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--line);
  }
  .modal-fields{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
  .modal-fields select{flex:1;min-width:90px;}
  .modal-fields input{width:60px;}
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
  .modal-hint{color:var(--slate);font-size:12px;margin-top:10px;line-height:1.5;}

  /* ===== STATUS TOAST ===== */
  #statusToast{
    position:fixed;
    top:16px;left:50%;
    transform:translateX(-50%);
    background:var(--bg-card);
    border:1px solid var(--gold);
    color:var(--gold-bright);
    padding:8px 18px;
    border-radius:20px;
    font-family:Arial,sans-serif;
    font-size:13px;
    z-index:60;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  #statusToast.show{opacity:1;transform:translateX(-50%) translateY(4px);}

  /* ===== TRUE PROJECTOR MODE ===== */
  html[data-screen="projector"] header,
  html[data-screen="projector"] .panel,
  html[data-screen="projector"] #statusToast,
  body.projector-active header,
  body.projector-active .panel{
    display:none;
  }
  html[data-screen="projector"] main,
  body.projector-active main{
    min-height:100vh;
    padding:6vh 7vw;
  }
  html[data-screen="projector"] .empty-state{
    max-width:720px;
  }
  html[data-screen="projector"] .empty-state h2{
    font-size:clamp(28px,4vw,52px);
  }
  html[data-screen="projector"] .empty-state p{
    font-size:clamp(16px,1.6vw,22px);
  }
  html[data-screen="projector"] .verse-display,
  body.projector-active .verse-display{
    max-width:1200px;
  }
  html[data-screen="projector"] .verse-ref,
  body.projector-active .verse-ref{
    font-size:clamp(18px,2.4vw,30px);
    margin-bottom:24px;
  }
  html[data-screen="projector"] .verse-text,
  body.projector-active .verse-text{
    font-size:clamp(42px,6.2vw,84px);
    line-height:1.35;
  }
  html[data-screen="projector"] .verse-version,
  body.projector-active .verse-version{
    font-size:clamp(13px,1.2vw,18px);
    margin-top:30px;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width:760px){
    .panel-row{flex-direction:column;gap:10px;}
    .history-box{flex:1;width:100%;}
    .brand{font-size:17px;margin-right:0;}
    .load-status{order:10;width:100%;justify-content:center;}
    .ref-navigator{order:11;width:100%;justify-content:center;flex-wrap:wrap;}
    #navBookSelect{min-width:180px;}
    header{justify-content:center;}
  }