/* ══════════════════════════════════════════════════
   THEME VARIABLES
══════════════════════════════════════════════════ */
[data-theme="dark"]{
  --bg:#09080a;--surface:#161418;--surface2:#1f1d23;--surface3:#2a2832;
  --border:rgba(220,190,120,0.18);--border2:rgba(220,190,120,0.34);
  --text:#f5efd8;--text2:#d8cfae;--muted:#a89a78;
  --gold:#e8c674;--gold2:#c89a48;--crimson:#e07070;--teal:#7ad0bc;
  --purple:#b098e0;--green:#86c898;
  --canvas-bg:#0c0a0e;--reading-color:#ece4c8;
  --hl-new:rgba(232,198,116,0.22);--hl-sel:rgba(122,208,188,0.32);
  --shadow:rgba(0,0,0,0.65);--page-bg:#14111a;--page-border:rgba(232,198,116,0.20);
  --trans-bg:#0f1612;--trans-text:#8ee0cc;--cwglow:rgba(232,198,116,0.05);
  --divine-color:#ff7070;--divine-bg:rgba(220,80,80,0.12);--divine-border:rgba(220,100,100,0.45);
  --hdr-bg:linear-gradient(135deg,#0e0c10 0%,#161420 100%);
}
[data-theme="parchment"]{
  --bg:#f2e8d4;--surface:#fdf5e2;--surface2:#ede0c8;--surface3:#e0d0b0;
  --border:rgba(80,55,15,0.22);--border2:rgba(80,55,15,0.38);
  --text:#160c04;--text2:#321e08;--muted:#5e4828;
  --gold:#5a3808;--gold2:#3e1e00;--crimson:#6a0c0c;--teal:#0e4838;
  --purple:#3a1860;--green:#184818;
  --canvas-bg:#ede0c4;--reading-color:#100804;
  --hl-new:rgba(90,60,12,0.18);--hl-sel:rgba(22,72,60,0.24);
  --shadow:rgba(0,0,0,0.14);--page-bg:#fdf8ee;--page-border:rgba(80,55,15,0.24);
  --trans-bg:#e0eee8;--trans-text:#0c4838;--cwglow:rgba(90,60,12,0.05);
  --divine-color:#7a0808;--divine-bg:rgba(160,20,20,0.10);--divine-border:rgba(160,20,20,0.45);
  --hdr-bg:linear-gradient(135deg,#f5e8cc 0%,#ede0c0 100%);
}
[data-theme="night"]{
  --bg:#03060e;--surface:#0a1020;--surface2:#101828;--surface3:#162236;
  --border:rgba(120,180,240,0.18);--border2:rgba(120,180,240,0.34);
  --text:#e4eef8;--text2:#b8c8e0;--muted:#7888a0;
  --gold:#90c4e8;--gold2:#68a8d0;--crimson:#7090e8;--teal:#60c0e8;
  --purple:#a890f0;--green:#70d098;
  --canvas-bg:#020509;--reading-color:#dce8f4;
  --hl-new:rgba(120,180,240,0.20);--hl-sel:rgba(96,192,232,0.28);
  --shadow:rgba(0,0,0,0.75);--page-bg:#050810;--page-border:rgba(80,140,210,0.12);
  --trans-bg:#050e18;--trans-text:#50c8a8;--cwglow:rgba(80,140,210,0.04);
  --divine-color:#ff8080;--divine-bg:rgba(255,80,80,0.07);--divine-border:rgba(255,80,80,0.28);
  --hdr-bg:linear-gradient(135deg,#04080f 0%,#080e1a 100%);
}

/* ══════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Crimson Pro',serif;font-size:14px;overflow:hidden;transition:background .3s,color .3s;}
body::before{content:'✝';position:fixed;top:50%;left:calc(50% - 190px);transform:translate(-50%,-50%);font-size:360px;color:var(--cwglow);pointer-events:none;z-index:0;font-family:'EB Garamond',serif;line-height:1;animation:cwb 9s ease-in-out infinite;}
@keyframes cwb{0%,100%{opacity:.5}50%{opacity:1}}

/* ══════════════════════════════════════════════════
   LAYOUT — FIXED HEADER + TOPBAR, THEN CONTENT
══════════════════════════════════════════════════ */
#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  position:relative;
  z-index:1;
}

/* HEADER — always pinned */
#header{
  position:sticky;
  top:0;
  z-index:200;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  height:58px;
  background:var(--surface);
  border-bottom:1px solid var(--border2);
  box-shadow:0 2px 12px var(--shadow);
}
.logo{font-family:'EB Garamond',serif;font-weight:700;color:var(--gold);letter-spacing:-.02em;white-space:nowrap;display:flex;flex-direction:column;gap:1px;}
.logo-title{font-size:20px;display:flex;align-items:center;gap:6px;line-height:1.1;}
.logo-c{opacity:.75;font-size:18px;}
.logo span{color:var(--teal);}
.logo-sub{font-size:8.5px;font-weight:400;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;padding-left:2px;}
/* ProximaED powered-by tag */
.proxima-tag{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--muted);border:1px solid var(--border2);border-radius:3px;padding:1px 5px;letter-spacing:.06em;white-space:nowrap;opacity:.8;flex-shrink:0;}
.proxima-tag b{color:var(--teal);}
.hdr-r{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:nowrap;}
.clock{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);}
#sw{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);}
#st{font-family:'JetBrains Mono',monospace;color:var(--gold);font-size:10px;min-width:36px;}
.sbtn{background:none;border:none;cursor:pointer;font-size:11px;color:var(--teal);transition:color .15s;}
.sbtn:hover{color:var(--gold);}
.theme-row{display:flex;gap:3px;}
.tpill{padding:3px 8px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--muted);cursor:pointer;letter-spacing:.04em;transition:all .2s;}
.tpill:hover,.tpill.on{border-color:var(--gold);color:var(--gold);background:rgba(200,168,100,.08);}
.fbtn{padding:3px 9px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);font-size:10px;color:var(--muted);cursor:pointer;transition:all .2s;font-family:'JetBrains Mono',monospace;}
.fbtn:hover{border-color:var(--teal);color:var(--teal);}
.fbtn.on{background:rgba(90,168,152,.1);border-color:var(--teal);color:var(--teal);}

/* TOPBAR — always pinned below header */
#topbar{
  position:sticky;
  top:58px;
  z-index:190;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  height:40px;
  background:var(--surface2);
  border-bottom:1px solid var(--border2);
  box-shadow:0 1px 8px rgba(0,0,0,0.25);
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
}
#topbar::-webkit-scrollbar{display:none;}
.ts{width:1px;height:16px;background:var(--border2);flex-shrink:0;}
.tlbl{font-size:9px;color:var(--muted);white-space:nowrap;flex-shrink:0;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;}
select.tsel{padding:3px 6px;border-radius:5px;border:1px solid var(--border2);background:var(--surface3);color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;cursor:pointer;height:26px;flex-shrink:0;}
select.tsel:focus{outline:none;border-color:var(--gold);}
#ver-sel{min-width:72px;}
#bk-sel{min-width:118px;}
#ch-sel{min-width:54px;}
.tbtn{display:flex;align-items:center;gap:3px;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid;white-space:nowrap;font-family:'Crimson Pro',serif;transition:all .18s;flex-shrink:0;height:26px;}
#go-btn{border-color:var(--gold);background:var(--gold);color:var(--bg);font-weight:700;}
#go-btn:hover:not(:disabled){opacity:.85;}
#go-btn:disabled{background:var(--surface3);border-color:var(--border2);color:var(--muted);cursor:default;}
#qbtn{border-color:rgba(192,80,80,.4);background:rgba(192,80,80,.08);color:var(--crimson);}
#qbtn:hover{background:rgba(192,80,80,.2);}
#dvbtn{border-color:rgba(144,120,200,.4);background:rgba(144,120,200,.08);color:var(--purple);}
#dvbtn:hover{background:rgba(144,120,200,.2);}
#prbtn{border-color:var(--border2);background:var(--surface3);color:var(--text2);}
#prbtn:hover{border-color:var(--gold);color:var(--gold);}
#srchbtn{border-color:rgba(90,168,152,.4);background:rgba(90,168,152,.08);color:var(--teal);}
#srchbtn:hover{background:rgba(90,168,152,.2);}
.pdot{width:5px;height:5px;border-radius:50%;animation:pd 1.5s ease-in-out infinite;flex-shrink:0;}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.55)}}
#cur-ref{font-size:10px;color:var(--gold);font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.fsize-row{display:flex;align-items:center;gap:3px;}
.fsbtn{width:22px;height:22px;border-radius:4px;border:1px solid var(--border2);background:var(--surface3);color:var(--text2);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.fsbtn:hover{border-color:var(--gold);color:var(--gold);}

/* DIVINE SPEECH LEGEND in topbar */
.div-leg{display:flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;border:1px solid var(--divine-border);background:var(--divine-bg);font-size:9px;color:var(--divine-color);font-family:'JetBrains Mono',monospace;white-space:nowrap;flex-shrink:0;}

/* ══════════════════════════════════════════════════
   MAIN WORKSPACE (fills rest of viewport)
══════════════════════════════════════════════════ */
#workspace{
  flex:1;
  display:flex;
  overflow:hidden;
  min-height:0;
}

/* LEFT — Scripture Canvas */
#left{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  flex:1;
  min-width:0;
}

/* Horizontal resizer — between canvas and right panel */
#hr{
  width:7px;
  background:var(--surface2);
  border-left:1px solid var(--border2);
  border-right:1px solid var(--border2);
  cursor:col-resize;
  z-index:5;
  transition:background .12s;
  flex-shrink:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
#hr::after{
  content:'';
  width:2px;
  height:30px;
  background:var(--border2);
  border-radius:2px;
  transition:background .12s, height .12s;
}
#hr:hover,#hr.drag{background:rgba(200,168,100,0.10);}
#hr:hover::after,#hr.drag::after{background:var(--gold);height:48px;}

/* RIGHT — Study Panel */
#right{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--surface);
  width:360px;
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════
   CANVAS TOOLBAR (inside left panel)
══════════════════════════════════════════════════ */
#ctb{
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  overflow-x:auto;
  scrollbar-width:none;
}
#ctb::-webkit-scrollbar{display:none;}
.b{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:5px;border:1px solid var(--border2);background:var(--surface3);color:var(--text);font-family:'Crimson Pro',serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0;}
.b:hover{border-color:var(--gold);color:var(--gold);}
.b.on{background:rgba(90,168,152,.12);border-color:var(--teal);color:var(--teal);}
.sep{width:1px;height:16px;background:var(--border2);flex-shrink:0;}
.lbl{font-size:9px;color:var(--muted);white-space:nowrap;font-family:'JetBrains Mono',monospace;}
.pnav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.pb{width:24px;height:24px;border-radius:5px;border:1px solid var(--border2);background:var(--surface3);color:var(--text);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:'EB Garamond',serif;}
.pb:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
.pb:disabled{opacity:.3;cursor:default;}
.plbl{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;}

/* ══════════════════════════════════════════════════
   CANVAS
══════════════════════════════════════════════════ */
#cw{flex:1;overflow-y:auto;padding:18px 22px;background:var(--canvas-bg);scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.sheet{background:var(--page-bg);border:1px solid var(--page-border);border-radius:9px;padding:28px 34px;box-shadow:0 4px 22px var(--shadow);min-height:360px;position:relative;}
.sheet::before{content:'';position:absolute;top:0;left:30px;right:30px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45;border-radius:1px;}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.pref{font-family:'EB Garamond',serif;font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.05em;}
.pvb{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);background:var(--surface2);padding:2px 7px;border-radius:20px;border:1px solid var(--border);}
#rt{font-family:'EB Garamond',serif;font-size:18px;line-height:2.05;color:var(--reading-color);letter-spacing:.01em;user-select:text;}

/* Two-column layout */
#rt.two-col{columns:2;column-gap:28px;}
#rt.two-col .verse-line{break-inside:avoid;}

.vn{font-size:10px;font-weight:700;color:var(--gold);vertical-align:super;margin-right:3px;opacity:.75;font-family:'JetBrains Mono',monospace;cursor:default;user-select:none;}
.tok{cursor:pointer;border-radius:3px;padding:0 1px;transition:background .1s,color .1s;display:inline;}
.tok:hover{background:var(--hl-new);color:var(--gold);}
.tok.sel{background:var(--hl-sel);color:var(--teal);border-bottom:1.5px solid var(--teal);}
.tok.lrn{background:rgba(90,168,152,.08);color:var(--teal);}
.tok.bsk{background:rgba(144,120,200,.10);color:var(--purple);border-bottom:1.5px solid var(--purple);}

/* ════ DIVINE SPEECH — Words of GOD & LORD JESUS ════ */
/* These spans wrap entire verse text when divine speech detected */
.divine-span{
  color:var(--divine-color) !important;
  font-style:italic;
}
/* Verse-level divine container */
.verse-line.divine{
  background:var(--divine-bg);
  border-left:3px solid var(--divine-border);
  padding-left:8px;
  margin-left:-11px;
  border-radius:0 4px 4px 0;
}
.divine-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:7px;
  color:var(--divine-color);
  border:1px solid var(--divine-border);
  border-radius:3px;
  padding:0 3px;
  margin-right:4px;
  vertical-align:middle;
  opacity:.85;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
/* In divine verses, tok hovers stay within theme */
.verse-line.divine .tok:hover{background:rgba(200,60,60,0.18);color:var(--divine-color);}
.verse-line.divine .tok.sel{color:var(--divine-color);border-bottom-color:var(--divine-color);}

.verse-line{display:block;margin-bottom:2px;}

.pf{margin-top:18px;padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pfb{padding:5px 12px;border-radius:5px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-size:12px;cursor:pointer;font-family:'Crimson Pro',serif;transition:all .12s;}
.pfb:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
.pfb:disabled{opacity:.3;cursor:default;}
.pfc{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}

/* STATUS BAR */
#sb{display:flex;align-items:center;gap:10px;padding:4px 10px;background:var(--surface2);border-top:1px solid var(--border);font-size:9px;color:var(--muted);flex-shrink:0;font-family:'JetBrains Mono',monospace;}
.sv{color:var(--gold);}
#prb{height:2px;background:linear-gradient(90deg,var(--gold) var(--p,0%),var(--surface3) var(--p,0%));flex-shrink:0;width:80px;border-radius:2px;}

/* SEARCH BAR */
#srch-bar{display:none;padding:5px 10px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;gap:5px;align-items:center;}
#srch-bar.open{display:flex;}
#srch-inp{flex:1;padding:4px 8px;border-radius:5px;border:1px solid var(--border2);background:var(--surface3);color:var(--text);font-family:'Crimson Pro',serif;font-size:12px;outline:none;}
#srch-inp:focus{border-color:var(--teal);}
#srch-info{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.srch-nav{width:22px;height:22px;border-radius:4px;border:1px solid var(--border2);background:var(--surface3);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.srch-nav:hover{border-color:var(--teal);color:var(--teal);}
.srch-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;}

/* ══════════════════════════════════════════════════
   SPLASH & LOADING
══════════════════════════════════════════════════ */
#splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--canvas-bg);padding:24px;overflow-y:auto;gap:10px;}
.sc{font-size:44px;color:var(--gold);opacity:.6;font-family:'EB Garamond',serif;line-height:1;animation:cwb 4s ease-in-out infinite;}
.st{font-family:'EB Garamond',serif;font-size:24px;font-weight:700;color:var(--gold);}
.ss{font-size:12px;color:var(--muted);font-style:italic;text-align:center;max-width:420px;line-height:1.7;}
#lz{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--canvas-bg);}
.lcr{font-size:36px;color:var(--gold);opacity:.45;animation:cwb 2s ease-in-out infinite;}
.lt{font-family:'EB Garamond',serif;font-size:13px;color:var(--muted);font-style:italic;}

/* ══════════════════════════════════════════════════
   RIGHT PANEL — fully scrollable unified column
══════════════════════════════════════════════════ */
/* The entire right panel is one flex column. wlw, aw are fixed. ri grows+scrolls. dp, bbr are fixed. */
#wlw{
  padding:7px 9px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  /* scrollable selected words box — max 120px, then scroll */
  max-height:130px;
  display:flex;
  flex-direction:column;
}
.wlh{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;flex-shrink:0;}
.ph2{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.wlc{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--gold);}
/* scrollable chip container */
#wc{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  min-height:24px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
  padding-bottom:2px;
}
.chip{display:flex;align-items:center;gap:2px;padding:2px 7px 2px 8px;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;font-size:11px;color:var(--text2);cursor:pointer;transition:all .1s;font-family:'Crimson Pro',serif;}
.chip:hover{border-color:var(--crimson);color:var(--crimson);}
.chip.on{background:rgba(90,168,152,.12);border-color:var(--teal);color:var(--teal);}
.chipx{font-size:8px;color:var(--muted);}

/* ALLOW LEARN BUTTON */
#aw{padding:6px 9px;border-bottom:1px solid var(--border);flex-shrink:0;}
#ab{width:100%;padding:7px;background:var(--gold);border:none;border-radius:6px;color:var(--bg);font-family:'EB Garamond',serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .14s;letter-spacing:.02em;}
#ab:hover:not(:disabled){opacity:.88;transform:translateY(-1px);}
#ab:disabled{background:var(--surface3);color:var(--muted);transform:none;cursor:default;}
#ab.on{background:rgba(90,168,152,.12);color:var(--teal);border:1px solid var(--teal);}

/* INNER RIGHT — vertical resizable: word info + vr + translate — all scrollable as unit */
#ri{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
#wi{overflow-y:auto;padding:10px;scrollbar-width:thin;flex-shrink:0;}
.wie{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100px;gap:6px;text-align:center;}
.wie-i{font-size:28px;opacity:.18;font-family:'EB Garamond',serif;}
.wie-t{font-size:11px;color:var(--muted);line-height:1.65;max-width:180px;font-style:italic;}
.wiw{font-family:'EB Garamond',serif;font-size:26px;font-weight:700;color:var(--gold);margin-bottom:2px;line-height:1.2;}
.wiphon{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-bottom:3px;}
.wiaud{font-size:9px;padding:2px 7px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:all .14s;margin-bottom:7px;display:inline-block;font-family:'JetBrains Mono',monospace;}
.wiaud:hover{border-color:var(--gold);color:var(--gold);}
.wish{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;margin-top:9px;font-family:'JetBrains Mono',monospace;}
.wipill{display:inline-block;font-size:9px;padding:1px 7px;background:rgba(144,120,200,.14);border-radius:12px;color:var(--purple);font-style:italic;margin-bottom:4px;border:1px solid rgba(144,120,200,.2);}
.wim{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:3px;font-family:'Crimson Pro',serif;}
.wie2{font-family:'EB Garamond',serif;font-style:italic;font-size:11px;color:var(--muted);padding:6px 9px;background:var(--surface2);border-left:2px solid var(--gold);border-radius:0 4px 4px 0;margin:4px 0 7px;line-height:1.55;}
.witags{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;}
.witag{padding:2px 8px;border-radius:20px;font-size:10px;cursor:pointer;transition:all .1s;font-family:'Crimson Pro',serif;}
.witag.syn{background:rgba(90,168,152,.09);color:var(--teal);border:1px solid rgba(90,168,152,.22);}
.witag.ant{background:rgba(192,80,80,.07);color:var(--crimson);border:1px solid rgba(192,80,80,.18);}
.wib{background:var(--surface2);border-radius:6px;padding:8px 10px;margin-bottom:7px;border:1px solid var(--border);}
.wibnote{font-size:10px;color:var(--gold);font-family:'JetBrains Mono',monospace;margin-bottom:3px;padding:3px 7px;background:rgba(200,168,100,.06);border-radius:4px;border:1px solid var(--border);line-height:1.5;}

/* V-RESIZER — between word meaning panel and translator */
#vr{
  height:8px;
  background:var(--surface2);
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  cursor:ns-resize;
  flex-shrink:0;
  position:relative;
  z-index:10;
  transition:background .12s;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
#vr:hover,#vr.drag{background:rgba(200,168,100,0.12);}
#vr::before,#vr::after{
  content:'';
  width:28px;height:2px;
  border-radius:2px;
  background:var(--border2);
  position:absolute;
  left:50%;transform:translateX(-50%);
  transition:background .12s;
}
#vr::before{top:1px;}
#vr::after{bottom:1px;}
#vr:hover::before,#vr:hover::after,#vr.drag::before,#vr.drag::after{background:var(--gold);}

/* TRANSLATE PANEL */
#tp{padding:9px 10px;background:var(--trans-bg);overflow-y:auto;scrollbar-width:thin;flex-shrink:0;}
.tph{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.tph2{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);font-family:'JetBrains Mono',monospace;white-space:nowrap;}
#lsel{flex:1;padding:3px 6px;border-radius:5px;border:1px solid rgba(90,168,152,.28);background:var(--surface);color:var(--text);font-size:11px;font-family:'Crimson Pro',serif;}
#lsel:focus{outline:none;border-color:var(--teal);}
.twb{font-family:'EB Garamond',serif;font-size:20px;font-weight:600;color:var(--trans-text);line-height:1.3;margin-bottom:2px;}
.tr-extra{margin-top:6px;padding:6px 8px;background:var(--surface);border-radius:5px;border:1px solid var(--border);}
.tr-el{font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.09em;margin-bottom:3px;}
.tr-ev{font-family:'EB Garamond',serif;font-size:15px;color:var(--trans-text);font-style:italic;}

/* DB / BASKET — persistent word buffer */
#dp{padding:6px 10px;border-top:1px solid var(--border);flex-shrink:0;}
.dtrow{display:flex;gap:3px;margin-bottom:4px;}
.dt{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;border-radius:4px;cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--muted);transition:all .12s;font-family:'JetBrains Mono',monospace;}
.dt.on{background:var(--teal);border-color:var(--teal);color:var(--bg);}
.dtc{display:none;}
.dtc.on{display:block;}
.dbh{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
/* scrollable buffer areas */
#dbw{display:flex;flex-wrap:wrap;gap:2px;max-height:58px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.dbwd{font-size:9px;padding:1px 6px;background:rgba(90,168,152,.07);border:1px solid rgba(90,168,152,.18);border-radius:20px;color:var(--teal);font-family:'Crimson Pro',serif;}
#bsw{display:flex;flex-wrap:wrap;gap:2px;max-height:62px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.bc{font-size:9px;padding:1px 6px;background:rgba(144,120,200,.09);border:1px solid rgba(144,120,200,.22);border-radius:20px;color:var(--purple);cursor:pointer;font-family:'Crimson Pro',serif;}
.bc:hover{background:rgba(144,120,200,.2);}
.bact{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;}
.bb{font-size:9px;padding:2px 6px;border-radius:4px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);cursor:pointer;font-family:'Crimson Pro',serif;transition:all .12s;}
.bb:hover{border-color:var(--gold);color:var(--gold);}

/* BADGE */
#bbr{padding:4px 10px;border-top:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:6px;flex-shrink:0;}
.badge{font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;cursor:pointer;font-family:'JetBrains Mono',monospace;}
.bgs{background:rgba(200,168,100,.09);color:var(--gold);border:1px solid rgba(200,168,100,.22);}
.bgd{background:rgba(90,168,152,.09);color:var(--teal);border:1px solid rgba(90,168,152,.22);}
.bga{background:rgba(144,120,200,.09);color:var(--purple);border:1px solid rgba(144,120,200,.22);}
.bgm{background:rgba(200,168,100,.14);color:var(--gold2);border:1px solid rgba(200,168,100,.28);}
.bprog{flex:1;height:3px;background:var(--surface3);border-radius:2px;overflow:hidden;}
.bfill{height:100%;background:var(--gold);border-radius:2px;transition:width .5s ease;}
.bnext{font-size:9px;color:var(--muted);white-space:nowrap;font-family:'JetBrains Mono',monospace;}

/* ══════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════ */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(5px);}
.mo.on{display:flex;}
.md{background:var(--surface);border:1px solid var(--border2);border-radius:11px;padding:22px;max-width:500px;width:90%;max-height:82vh;overflow-y:auto;box-shadow:0 18px 55px rgba(0,0,0,.5);position:relative;}
.md::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:11px 11px 0 0;}
.mdt{font-family:'EB Garamond',serif;font-size:19px;font-weight:700;color:var(--gold);margin-bottom:14px;}
.mc{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:2px 5px;border-radius:4px;}
.mc:hover{color:var(--text);}
.smr{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;font-family:'Crimson Pro',serif;}
.sml{color:var(--muted);}
.smv{font-family:'JetBrains Mono',monospace;color:var(--gold);}

/* QUIZ */
.qp{font-size:9px;color:var(--gold);font-family:'JetBrains Mono',monospace;margin-bottom:8px;}
.qpb{height:3px;background:var(--surface3);border-radius:2px;overflow:hidden;margin-bottom:10px;}
.qpbf{height:100%;background:var(--gold);border-radius:2px;transition:width .3s;}
.qq{font-family:'EB Garamond',serif;font-size:15px;color:var(--text);margin:10px 0;line-height:1.65;}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0;}
.qo{padding:8px 11px;border-radius:7px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-family:'EB Garamond',serif;font-size:13px;cursor:pointer;transition:all .14s;text-align:left;}
.qo:hover:not(:disabled){border-color:var(--gold);background:rgba(200,168,100,.07);}
.qo.ok{border-color:var(--green);background:rgba(104,168,120,.14);color:var(--green);}
.qo.no{border-color:var(--crimson);background:rgba(192,80,80,.1);color:var(--crimson);}
.qinp{width:100%;padding:8px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-family:'EB Garamond',serif;font-size:14px;outline:none;transition:border-color .14s;}
.qinp:focus{border-color:var(--gold);}
.qfb{padding:7px 10px;border-radius:6px;margin-top:7px;font-size:12px;font-family:'Crimson Pro',serif;}
.qfb.ok{background:rgba(104,168,120,.12);color:var(--green);border:1px solid rgba(104,168,120,.25);}
.qfb.no{background:rgba(192,80,80,.1);color:var(--crimson);border:1px solid rgba(192,80,80,.22);}
.qnr{display:flex;gap:7px;margin-top:12px;justify-content:flex-end;}
.qb{padding:7px 14px;border-radius:6px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-family:'EB Garamond',serif;font-size:12px;cursor:pointer;transition:all .14s;}
.qb.pk{background:var(--gold);border-color:var(--gold);color:var(--bg);}
.qb:hover{border-color:var(--gold);}
.qscore{font-family:'EB Garamond',serif;font-size:26px;font-weight:700;color:var(--gold);text-align:center;margin:10px 0;}
.qrg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:10px 0;}
.qrb{padding:10px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);text-align:center;}
.qrv{font-family:'EB Garamond',serif;font-size:22px;font-weight:700;color:var(--gold);}
.qrl{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px;}
.qhl{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:11px;font-family:'Crimson Pro',serif;}
.qlbl2{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:12px;margin-bottom:5px;}

/* DAILY VERSE PANEL */
#dvp{display:none;position:fixed;bottom:58px;right:372px;width:320px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 30px var(--shadow);z-index:250;overflow:hidden;}
#dvp.on{display:block;}
.dvh{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:var(--surface2);border-bottom:1px solid var(--border);}
.dvt{font-family:'EB Garamond',serif;font-size:13px;font-weight:700;color:var(--gold);}
.dvc{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;}
.dvb{padding:12px 13px;}
.dvref{font-size:9px;color:var(--gold);font-family:'JetBrains Mono',monospace;margin-bottom:5px;}
.dvtx{font-family:'EB Garamond',serif;font-size:14px;line-height:1.75;color:var(--text);font-style:italic;}
.dvatt{font-size:9px;color:var(--muted);margin-top:6px;text-align:right;font-family:'JetBrains Mono',monospace;}
.dvnr{display:flex;gap:5px;padding:0 12px 10px;}
.dvnb{flex:1;padding:5px;border-radius:5px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);font-size:10px;cursor:pointer;font-family:'Crimson Pro',serif;transition:all .12s;}
.dvnb:hover{border-color:var(--gold);color:var(--gold);}

/* CTX MENU */
#ctx{display:none;position:fixed;z-index:400;background:var(--surface);border:1px solid var(--border2);border-radius:7px;box-shadow:0 5px 20px var(--shadow);overflow:hidden;min-width:160px;}
.ctxw{padding:7px 11px;font-family:'EB Garamond',serif;font-size:14px;font-weight:700;color:var(--gold);border-bottom:1px solid var(--border);}
.ctxi{padding:6px 11px;font-size:12px;cursor:pointer;color:var(--text2);transition:background .1s;font-family:'Crimson Pro',serif;}
.ctxi:hover{background:var(--surface2);color:var(--text);}

/* TOAST */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(18px);background:var(--surface);border:1px solid var(--border2);border-radius:7px;padding:7px 16px;font-size:11px;color:var(--text);box-shadow:0 5px 20px var(--shadow);opacity:0;pointer-events:none;transition:all .28s;z-index:500;font-family:'Crimson Pro',serif;}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* SPINNER */
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:sp .6s linear infinite;vertical-align:middle;}
@keyframes sp{to{transform:rotate(360deg)}}

/* HIGHLIGHT COLORS for verses */
.hl-y{background:rgba(255,220,0,.18)!important;}
.hl-b{background:rgba(80,160,220,.18)!important;}
.hl-g{background:rgba(80,200,120,.18)!important;}
.hl-r{background:rgba(220,80,80,.18)!important;}

/* ══════════════════════════════════════════════════
   PRINT STYLES
══════════════════════════════════════════════════ */
@media print{
  body>*:not(#pd){display:none!important;}
  #pd{display:block!important;padding:20px;font-family:Georgia,serif;font-size:12px;color:#000;}
  table{width:100%;border-collapse:collapse;}
  th,td{border:1px solid #999;padding:5px 8px;text-align:left;}
  th{background:#f0e8d0;font-weight:700;}
  .divine-print{color:#8B0000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
#pd{display:none;}

/* SCROLLBAR — thicker for visibility */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:padding-box;border:2px solid transparent;}

/* ══════════════════════════════════════════════════
   LOGIN OVERLAY
══════════════════════════════════════════════════ */
#login-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#1a1622 0%,#06050a 100%);backdrop-filter:blur(4px);}
#login-ov.hide{display:none;}
.login-card{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:34px 32px;
  max-width:380px;width:90%;text-align:center;box-shadow:0 25px 80px rgba(0,0,0,.75);position:relative;}
.login-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:14px 14px 0 0;}
.login-cr{font-family:'EB Garamond',serif;font-size:54px;color:var(--gold);line-height:1;margin-bottom:8px;}
.login-tt{font-family:'EB Garamond',serif;font-size:26px;font-weight:700;color:var(--gold);letter-spacing:.02em;}
.login-st{font-family:'Crimson Pro',serif;font-style:italic;font-size:13px;color:var(--text2);margin:6px 0 22px;}
.login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;
  border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);
  font-family:'EB Garamond',serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:10px;}
.login-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}
.login-btn.google{background:#fff;color:#3c4043;border-color:#dadce0;}
.login-btn.google:hover{background:#f6f8fc;color:#1a73e8;border-color:#1a73e8;transform:translateY(-1px);}
.login-btn.guest{background:var(--gold);color:var(--bg);border-color:var(--gold);}
.login-btn.guest:hover{background:var(--gold2);color:var(--bg);border-color:var(--gold2);}
.login-email{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);
  color:var(--text);font-family:'Crimson Pro',serif;font-size:14px;outline:none;margin-top:10px;}
.login-email:focus{border-color:var(--gold);}
.login-divider{display:flex;align-items:center;gap:10px;margin:18px 0 4px;color:var(--muted);font-size:10px;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.15em;}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border2);}
.login-foot{margin-top:18px;font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.user-pill{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:20px;
  background:var(--surface2);border:1px solid var(--border2);font-family:'Crimson Pro',serif;font-size:11px;color:var(--text);}
.user-pill .uava{width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;font-family:'EB Garamond',serif;}
.user-pill .ulog{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0 4px;}
.user-pill .ulog:hover{color:var(--crimson);}

/* Extra V-RESIZERS in right panel */
.vrx{height:7px;background:var(--surface2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
  cursor:ns-resize;flex-shrink:0;position:relative;z-index:8;transition:background .12s;user-select:none;
  display:flex;align-items:center;justify-content:center;}
.vrx::after{content:'';width:34px;height:3px;border-radius:2px;background:var(--border2);transition:background .12s;}
.vrx:hover,.vrx.drag{background:rgba(232,198,116,0.14);}
.vrx:hover::after,.vrx.drag::after{background:var(--gold);}

/* Ensure right-panel sections scroll vertically when their content overflows */
#wlw{overflow-y:auto;}
#dp{overflow-y:auto;max-height:none;}
#right{min-width:260px;}


/* ══════════════════════════════════════════════════
   FIREBASE AUTH ADDITIONS
══════════════════════════════════════════════════ */

/* Password input — matches existing email input style */
input[type="password"].login-email {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  outline: none;
}
input[type="password"].login-email:focus { border-color: var(--gold); }

/* Auth mode toggle row */
.login-mode-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.login-toggle-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.login-toggle-btn:hover { color: var(--teal); }

/* Forgot password link button */
.login-link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color .15s;
}
.login-link-btn:hover { color: var(--gold); }

/* Auth error message */
.auth-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(192, 80, 80, .10);
  border: 1px solid rgba(192, 80, 80, .30);
  color: var(--crimson);
  font-size: 11px;
  font-family: 'Crimson Pro', serif;
  text-align: left;
  line-height: 1.5;
}

/* Cloud sync badge next to user name */
.cloud-badge {
  font-size: 11px;
  color: var(--teal);
  opacity: .8;
  cursor: default;
}

/* WordPress iFrame container helper */
.lbr-wp-embed {
  width: 100%;
  height: 870px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  display: block;
}