/* Lyric Follow — operator console. Layout: header with tabs; tab content on the left, projector deck on the right. */
:root{
  --bg:#eceef2; --panel:#ffffff; --ink:#151922; --muted:#5b6474; --line:#d5d9e1; --soft:#f3f4f7;
  --accent:#c2410c; --accent-ink:#ffffff; --accent-soft:#fdeee4; --live:#0f7b4a; --warn:#b45309; --bad:#b91c1c; --net:#1d4ed8; --net-soft:#e8efff;
  --font:"Anek Latin","Anek Malayalam","Anek Tamil","Nirmala UI","Noto Sans Malayalam","Noto Sans Tamil","Kartika","Latha",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --r:10px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1217; --panel:#171b22; --ink:#e8ebf0; --muted:#98a1b0; --line:#2a303a; --soft:#1e232c;
  --accent:#f97316; --accent-ink:#1b0c02; --accent-soft:#2d1a0d; --live:#34d399; --warn:#fbbf24; --bad:#f87171; --net:#8ab4ff; --net-soft:#16213a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1217; --panel:#171b22; --ink:#e8ebf0; --muted:#98a1b0; --line:#2a303a; --soft:#1e232c;
  --accent:#f97316; --accent-ink:#1b0c02; --accent-soft:#2d1a0d; --live:#34d399; --warn:#fbbf24; --bad:#f87171; --net:#8ab4ff; --net-soft:#16213a; color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 12px;min-height:38px}
button:hover{border-color:var(--muted)}
button:disabled{opacity:.5;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.on{background:var(--live);border-color:var(--live);color:#fff}
button.danger{color:var(--bad)}
button.wide{width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=text],input[type=search],select,textarea{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:38px;width:100%;min-width:0}
textarea{resize:vertical;line-height:1.5}
h2,h3{margin:0;text-wrap:balance}
h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
small,.hint{color:var(--muted);font-size:13px}
.hint{margin:.4em 0}
[hidden]{display:none!important}

/* header */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.brand svg{width:22px;height:22px;color:var(--accent)}
.tabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.tabs button{border:0;background:none;border-radius:8px;padding:8px 14px;white-space:nowrap;color:var(--muted);font-weight:500}
.tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.tabs .tab-online{color:var(--net)}
.tabs .tab-online[aria-selected="true"]{background:var(--net-soft);color:var(--net)}
.top-right{display:flex;align-items:center;gap:10px}
.net{font:500 12px var(--mono);padding:4px 8px;border-radius:20px;border:1px solid var(--line)}
.net.on{color:var(--live);border-color:var(--live)}
.net.off{color:var(--warn);border-color:var(--warn)}
.langs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.langs button{border:0;border-radius:0;min-height:34px;padding:4px 10px}
.langs button.sel{background:var(--ink);color:var(--panel)}

/* shell */
.shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;padding:14px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));max-width:1700px;margin:0 auto}
main{min-width:0}
.tab{display:flex;flex-direction:column;gap:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0;display:flex;flex-direction:column;gap:10px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1 1 0;min-width:0}
.row.tight>*{flex:0 0 auto}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);min-width:0}
.field.narrow{flex:0 0 110px}
.field input,.field select,.field textarea{color:var(--ink);font-size:15px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.check input{margin-top:3px;width:18px;height:18px;flex:none}
.chip{font:500 11px/1 var(--mono);padding:5px 7px;border-radius:5px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;white-space:nowrap}
.msg{margin:0;color:var(--warn);font-size:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:end}

/* live */
.live-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px}
.service{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.service li{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:4px 4px 4px 10px}
.service li.cur{border-color:var(--accent);background:var(--accent-soft)}
.service .t{flex:1;min-width:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;text-align:left;padding:6px 0;min-height:0}
.service .ic{border:0;background:none;padding:4px 6px;min-height:30px;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:24px 8px;font-size:14px}
.songtitle{font-size:22px;font-weight:700;line-height:1.25}
.slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.slide{border:1px solid var(--line);border-radius:9px;padding:8px 10px 10px}
.slide.live{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.slide .n{font:500 10px var(--mono);color:var(--muted);display:flex;justify-content:space-between;margin-bottom:4px;letter-spacing:.05em}
.ln{display:block;width:100%;text-align:left;border:0;background:none;padding:4px 7px;border-radius:6px;font-size:15px;font-weight:500;line-height:1.45;min-height:0}
.ln:hover{background:var(--soft)}
.ln.cur{background:var(--accent);color:var(--accent-ink)}

/* songs */
.split{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px}
.songlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:65vh;overflow:auto}
.songlist button{width:100%;display:flex;gap:8px;align-items:center;text-align:left;border:1px solid transparent;background:none;padding:8px 10px}
.songlist button:hover{background:var(--soft)}
.songlist button.sel{border-color:var(--accent);background:var(--accent-soft)}
.songlist .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form{display:flex;flex-direction:column;gap:12px}

/* bible */
.bible-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.refform{display:flex;gap:8px;flex:1 1 360px;min-width:0}
.refform input{font-size:17px}
.vchips{display:flex;gap:6px;flex-wrap:wrap}
.vchips button{min-height:34px;padding:5px 10px;font-size:13px}
.vchips button.sel{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.vchips button .ord{font:600 10px var(--mono);margin-right:4px;opacity:.7}
.bible-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.verses,.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto}
.verses button,.results button{width:100%;text-align:left;border:0;background:none;padding:7px 8px;display:flex;gap:8px;min-height:0;line-height:1.45}
.verses button:hover,.results button:hover{background:var(--soft)}
.verses button.cur,.results button.cur{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.vn{font:600 12px var(--mono);color:var(--accent);min-width:2.2em;padding-top:2px}
.rref{font-weight:700;white-space:nowrap}
.results .rt{color:var(--muted);font-size:14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.results .rwrap{display:flex;flex-direction:column;min-width:0}

/* backgrounds */
.bggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bgtile{position:relative;border:2px solid transparent;border-radius:9px;padding:0;overflow:hidden;aspect-ratio:16/9;background:#000;min-height:0}
.bgtile.sel{border-color:var(--accent)}
.bgtile .sw,.bgtile img,.bgtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bgtile .nm{position:absolute;left:6px;bottom:5px;right:6px;font-size:12px;color:#fff;text-shadow:0 1px 3px #000;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bgtile .tags{position:absolute;top:5px;left:5px;display:flex;gap:4px}
.bgtile .tags span{font:600 9px var(--mono);background:var(--accent);color:var(--accent-ink);padding:3px 5px;border-radius:4px;text-transform:uppercase}
.bgtile .x{position:absolute;top:4px;right:4px;min-height:0;padding:2px 7px;background:rgba(0,0,0,.6);color:#fff;border:0;font-size:12px}
.bgactions{display:flex;gap:8px;flex-wrap:wrap}
.upload{display:inline-flex;cursor:pointer}
.upload>span{border:1px dashed var(--muted);border-radius:8px;padding:10px 14px;width:100%;text-align:center}
.upload.slim>span{border-style:solid;border-color:var(--line);padding:8px 12px;background:var(--panel)}

/* online */
.banner-online{margin:0;background:var(--net-soft);color:var(--net);border:1px solid var(--net);border-radius:var(--r);padding:10px 14px;font-weight:500}
.netbadge{font:500 11px var(--font);color:var(--net);background:var(--net-soft);padding:3px 8px;border-radius:20px;white-space:nowrap}
.ocr{grid-column:1/-1}
.ocrwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px}
.ocrwrap img{max-width:100%;border-radius:8px;border:1px solid var(--line)}
.ocrout{display:flex;flex-direction:column;gap:10px;min-width:0}
.ocrcheck{background:var(--soft);border-radius:8px;padding:10px;font-size:15px;line-height:1.7;max-height:200px;overflow:auto}
.ocrcheck mark{background:#fed7aa;color:#7c2d12;border-radius:3px;padding:0 2px}
.heardline{margin:0;min-height:1.4em;color:var(--muted);font-size:14px;border-left:3px solid var(--line);padding-left:8px}

/* deck */
.deck{display:flex;flex-direction:column;gap:14px;position:sticky;top:70px;align-self:start}
.preview{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;max-width:100%}
.preview .lf-stage{width:100%;height:100%}
.status{display:flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--muted)}
.status #statusText{flex:1;min-width:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.dot.live{background:var(--live);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.pill{font:600 11px var(--mono);padding:3px 7px;border-radius:20px;background:var(--soft)}
.pill.good{background:var(--live);color:#fff}.pill.ok{background:var(--warn);color:#fff}.pill.low{background:var(--bad);color:#fff}
.meter{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.meter>i{display:block;height:100%;width:0;background:var(--live);transition:width .08s}
.suggest{border:1px solid var(--accent);background:var(--accent-soft);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.live-chip.on{color:var(--live);border-color:var(--live)}

.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.keys dt{font:600 12px var(--mono);background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:2px 6px;justify-self:start}
.keys dd{margin:0}
.about{margin:0;padding-left:18px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);width:min(560px,calc(100vw - 32px));padding:16px}
dialog::backdrop{background:rgb(0 0 0/.5)}
dialog[open]{display:flex;flex-direction:column;gap:10px}
.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(140%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:10px;font-size:14px;transition:transform .2s,opacity .2s;z-index:20;max-width:calc(100vw - 32px);opacity:0;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

body.low *{transition:none!important;animation:none!important}

@media (max-width:1150px){.shell{grid-template-columns:minmax(0,1fr)}.deck{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
@media (max-width:820px){.live-grid,.split,.bible-cols,.ocrwrap{grid-template-columns:minmax(0,1fr)}.tabs{order:3;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.deck .row{align-items:stretch}

.refbox{position:relative;flex:1;min-width:0}
.refsuggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:8;list-style:none;margin:0;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgb(0 0 0/.18);max-height:340px;overflow:auto}
.refsuggest li{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer;flex-wrap:wrap}
.refsuggest li[aria-selected="true"],.refsuggest li:hover{background:var(--accent-soft)}
.refsuggest .bn{font-weight:700;font-size:16px}
.refsuggest .bo{color:var(--muted);font-size:14px}
.refsuggest .bc{margin-left:auto;font:500 11px var(--mono);color:var(--muted)}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{flex:1;border:0;border-radius:0;min-height:36px;font-size:14px;padding:6px 8px}
.seg button.sel{background:var(--ink);color:var(--panel);font-weight:600}
.lmbible{display:flex;flex-direction:column;gap:8px}

.netmode{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;padding-left:8px;gap:6px}
.netmode button{border:0;border-radius:0;min-height:34px;padding:4px 10px;font-size:13px}
.netmode button.sel[data-net="offline"]{background:var(--ink);color:var(--panel);font-weight:600}
.netmode button.sel[data-net="online"]{background:var(--net);color:#fff;font-weight:600}
.ndot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.ndot.on{background:var(--live)}
.engine-badge{color:var(--ink);background:var(--soft)}
.engine-badge.online{color:var(--net);background:var(--net-soft)}
.banner-online{background:var(--soft);color:var(--ink);border-color:var(--line)}

@media (max-width:1250px){.tabs{order:3;flex-basis:100%}.top{row-gap:6px}}

.results .clearbtn{width:auto;border:1px solid var(--line);padding:4px 10px;min-height:30px;font-size:13px;color:var(--muted);margin-top:4px}

.results button.unsure .rref::after{content:' ?';color:var(--warn)}
.results button.ai .rref::before{content:'✦ ';color:var(--accent)}
.searchhelp{background:var(--soft);border-color:var(--line)}
.searchhelp a{color:var(--accent);font-weight:600}

.banner{margin:0;padding:10px 16px;background:#b4231a;color:#fff;font-size:14px;text-align:center}

.track{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
#ytWrap{width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
#ytWrap.compact{width:200px;height:200px;aspect-ratio:auto;margin:0 auto}
#ytWrap iframe,#ytHost{width:100%;height:100%;border:0;display:block}
.track .row button{min-width:44px}
.track input[type=range]{flex:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-box{background:var(--panel,#fff);color:inherit;border-radius:12px;padding:16px;width:min(640px,100%);max-height:85vh;display:flex;flex-direction:column;gap:10px}
.modal-box .results{overflow:auto;max-height:50vh}
.modal-box .results button{width:100%;text-align:left}

.track select{max-width:150px}
.refask{font-size:16px;border-width:2px}
.refask b{font-size:20px}
.refask button{min-height:40px;font-size:15px}
.planchips{margin-top:6px}
.planchips button{font-size:13px}
.star{font-size:18px;line-height:1;color:var(--muted,#999);cursor:pointer;padding:0 2px;flex:none}
.star.on{color:#e0a100}
.chip.yt{color:#c00}
.favbtn{background:transparent !important;color:inherit !important;border:1px solid #ccc !important}
.favbtn.on{background:#fff6d6 !important;color:#8a6200 !important;border-color:#e0a100 !important}

.secret{-webkit-text-security:disc;text-security:disc;font-family:monospace}
.ailog{margin-top:.6rem;font-size:.85em}.ailog ol{margin:.3rem 0 0;padding-left:1.1rem}.ailog li{margin:.15rem 0}.ailog .muted{color:var(--muted)}
button.small{padding:.3rem .6rem;font-size:.82em}.ghost{background:transparent;border:1px dashed var(--line)}#sfTidy{margin-top:.35rem;align-self:flex-start}
/* microphone health (operator only) */
.pill.mic{margin-top:4px;display:inline-block}
.pill.mic.mic_ok{background:var(--live);color:#fff}.pill.mic.mic_weak{background:var(--warn);color:#fff}
.pill.mic.mic_clip,.pill.mic.mic_none{background:var(--bad);color:#fff}
.psrow .field,.quizrow .field{flex:1;min-width:0}.psrow input{width:100%}.psrow button{align-self:flex-end}