* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0f1117; --bg2:#1a1d27; --bg3:#242836;
  --text:#e4e6f0; --text2:#9499b3; --accent:#5b8af5;
  --accent2:#d4a574; --border:#2e3348; --verse-num:#5b8af5;
  --highlight:#2a2f45; --verse-bg:hover:#1e2233;
}

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;
  background:var(--bg); color:var(--text);
  height:100vh; overflow:hidden;
  font-size:15px;
}

/* ═══════════════════════════════════════════
   LAYOUT GRID
   ═══════════════════════════════════════════ */
#app {
  display:grid;
  grid-template-columns:200px 1fr 280px;
  grid-template-rows:48px 1fr;
  height:100vh;
}

/* ═══════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════ */
.topbar {
  grid-column:1/-1;
  display:flex; align-items:center;
  padding:0 16px;
  background:var(--bg2); border-bottom:1px solid var(--border);
  gap:12px; z-index:100;
}
.topbar .logo {
  font-size:16px; font-weight:700; color:var(--accent);
  white-space:nowrap; flex-shrink:0;
}
.topbar select {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  padding:5px 8px; font-size:12px; cursor:pointer;
  max-width:160px; text-overflow:ellipsis; flex-shrink:0;
}
.topbar #langToggle {
  min-width:90px; font-size:11px; padding:4px 6px; flex-shrink:0;
}
.topbar .search-box {
  flex:1; max-width:380px; position:relative; margin-left:auto;
}
.topbar .search-box::before {
  content:"\1F50D"; position:absolute; left:10px; top:50%;
  transform:translateY(-50%); font-size:11px; opacity:0.45;
  pointer-events:none;
}
.topbar .search-box input {
  width:100%; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:6px 12px 6px 32px; font-size:13px; outline:none;
}
.topbar .search-box input:focus { border-color:var(--accent); }

/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar {
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
#chapterGrid { flex-shrink:0; padding-top:8px; }
#bookList {
  flex:1; overflow-y:auto; padding:6px 0;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.sidebar .section-title {
  font-size:10px; font-weight:700; letter-spacing:1px;
  color:var(--accent); padding:8px 14px 4px;
  text-transform:uppercase; opacity:0.8;
}
.sidebar .book-item {
  padding:5px 14px 5px 12px;
  cursor:pointer; font-size:12.5px;
  color:var(--text2); line-height:1.45;
  display:flex; justify-content:space-between;
  align-items:center;
  transition:background 0.12s, color 0.12s, border-left-color 0.12s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:2px solid transparent;
}
.sidebar .book-item .book-ch-count {
  font-size:9px; opacity:0.3; font-weight:400;
  margin-left:6px; flex-shrink:0;
}
.sidebar .book-item:hover {
  background:var(--bg3); color:var(--text);
  border-left-color:var(--accent);
}
.sidebar .book-item.active {
  background:var(--highlight); color:var(--accent);
  font-weight:600; border-left-color:var(--accent);
}
.sidebar .chapters {
  display:flex; flex-wrap:wrap; gap:3px;
  padding:6px 12px 10px;
}
.sidebar .chapters .ch {
  width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; font-size:10px; border-radius:4px;
  cursor:pointer; background:var(--bg3); color:var(--text2);
  transition:all 0.15s;
}
.sidebar .chapters .ch:hover { background:var(--accent); color:#fff; }
.sidebar .chapters .ch.active {
  background:var(--accent); color:#fff; font-weight:700;
}

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════ */
.main {
  overflow-y:auto; padding:24px 40px;
  max-width:960px;
  line-height:1.75; font-size:15px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}

/* Chapter Header */
.chapter-header {
  font-size:20px; font-weight:700;
  margin-bottom:22px; padding-bottom:14px;
  border-bottom:2px solid var(--border);
  display:flex; align-items:baseline; gap:10px;
  color:var(--accent);
}
.chapter-header .book-name { color:var(--accent); }
.chapter-header .chapter-num { color:var(--text2); font-weight:400; font-size:15px; }

/* ═══════════════════════════════════════════
   VERSE DISPLAY — FIXED LAYOUT
   ═══════════════════════════════════════════ */
.verse {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:8px;
  padding:2px 4px;
  margin-bottom:1px;
  border-radius:4px;
  transition:background 0.12s;
  min-height:1.6em;
}
.verse:hover { background:var(--highlight); }

.verse .verse-num {
  color:var(--verse-num);
  font-size:11px; font-weight:700;
  min-width:26px; max-width:26px;
  text-align:right;
  flex-shrink:0;
  cursor:pointer; user-select:none;
  padding-top:3px;
  line-height:1.8;
}
.verse .verse-num:hover { text-decoration:underline; opacity:0.8; }
.verse .verse-num.tts-btn { color:var(--accent); }
.verse .verse-num.tts-btn:hover { text-decoration:underline; opacity:0.7; cursor:pointer; }
.verse.speaking {
  background:rgba(100,180,255,0.12);
  border-left:3px solid var(--accent);
  padding-left:8px;
  border-radius:0 6px 6px 0;
  animation: speakingPulse 2s ease-in-out infinite;
}
@keyframes speakingPulse {
  0%,100% { background:rgba(100,180,255,0.08); }
  50% { background:rgba(100,180,255,0.18); }
}

.verse .verse-text {
  color:var(--text);
  flex:1;
  line-height:1.75;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Bilingual/Multi-version comparison */
.bilingual-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
  padding-bottom:6px;
}
.bilingual-row .bilingual-col {
  padding:4px 12px;
}
.bilingual-row .bilingual-col:not(:last-child) {
  border-right:1px solid var(--border);
}
.bilingual-row .bilingual-label {
  font-size:10px; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:4px; opacity:0.7;
}
.bilingual-row .verse-num { min-width:22px; max-width:22px; font-size:10px; }

/* Multi-version row layout (3+ versions) */
.compare-row {
  border-bottom:1px solid var(--border);
  margin-bottom:6px; padding-bottom:6px;
  display:flex; gap:8px; align-items:flex-start;
}
.compare-vn {
  color:var(--verse-num); font-size:11px; font-weight:700;
  min-width:24px; text-align:right; flex-shrink:0;
  padding-top:2px;
}
.compare-cols {
  flex:1; display:flex; flex-direction:column; gap:4px;
}
.compare-col-item {
  display:flex; gap:8px; align-items:flex-start;
  padding:2px 0;
}
.compare-col-label {
  color:var(--accent); font-size:10px; font-weight:600;
  min-width:100px; max-width:100px; flex-shrink:0;
  text-align:right; padding-top:2px; opacity:0.8;
}
.compare-col-text {
  color:var(--text); flex:1; line-height:1.65;
}

/* Compare bar tags */
.compare-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; font-size:11px; font-weight:600;
  border-radius:12px; cursor:pointer;
  background:rgba(91,138,245,0.15); color:var(--accent);
  border:1px solid rgba(91,138,245,0.3);
  transition:all 0.15s;
}
.compare-tag:hover {
  background:rgba(212,73,73,0.15); color:#e55;
  border-color:rgba(212,73,73,0.4);
}

/* Navigation */
.chapter-nav {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:28px; padding-top:16px;
  border-top:1px solid var(--border);
}
.chapter-nav-top {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; padding:8px 12px;
  background:var(--bg3); border-radius:8px;
}
.chapter-nav button, .chapter-nav-top button {
  background:var(--bg2); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  padding:5px 14px; cursor:pointer; font-size:12px;
  transition:all 0.15s;
}
.chapter-nav button:hover, .chapter-nav-top button:hover { border-color:var(--accent); color:var(--accent); }
.chapter-nav .nav-info, .chapter-nav-top .nav-info { color:var(--text2); font-size:12px; }

/* ═══════════════════════════════════════════
   COMMENTARY PANEL (Right)
   ═══════════════════════════════════════════ */
.tsk-panel {
  background:var(--bg2); border-left:1px solid var(--border);
  overflow-y:auto; padding:14px;
  max-height:calc(100vh - 48px);
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
#commentaryBody {
  overflow-y:auto;
  /* Leave room for sticky tabs bar (~60px) + panel padding */
  max-height:calc(100vh - 200px);
}

/* Commentary Source Selector */
.commentary-tabs {
  margin-bottom:12px;
  position:sticky; top:0; z-index:10;
  background:var(--bg2); padding:4px 0;
}
.commentary-tabs select.cmt-select {
  width:100%; padding:5px 8px; font-size:12px; font-weight:600;
  border-radius:4px; cursor:pointer;
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border);
  outline:none;
}
.commentary-tabs select.cmt-select:hover { border-color:var(--accent); }
.commentary-tabs select.cmt-select:focus { border-color:var(--accent); }
.commentary-tabs select.cmt-select option {
  background:var(--bg2); color:var(--text);
}

/* Commentary Item */
.commentary-item {
  margin-bottom:12px; padding:10px 12px;
  background:var(--bg3); border-radius:6px;
  font-size:13px; line-height:1.65; color:var(--text2);
}
.commentary-item .cmt-source {
  font-size:10px; font-weight:700; color:var(--accent);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;
}
.commentary-item .cmt-text { white-space:pre-wrap; }
.commentary-item .cmt-text p { margin-bottom:8px; }
.commentary-item .cmt-text p:last-child { margin-bottom:0; }

/* TSK Cross-ref (per verse) */
.tsk-item {
  margin-bottom:8px; padding:6px 10px;
  background:var(--bg3); border-radius:6px;
  font-size:12.5px; line-height:1.55; color:var(--text2);
}
.tsk-ref {
  color:var(--accent); font-weight:600;
  font-size:11px; margin-bottom:2px;
}

/* ═══════════════════════════════════════════
   SEARCH RESULTS
   ═══════════════════════════════════════════ */
.search-results { padding:0; }
.search-result-item {
  padding:10px 12px; border-bottom:1px solid var(--border);
  cursor:pointer; border-radius:4px;
  transition:background 0.12s;
}
.search-result-item:hover { background:var(--highlight); }
.panel-title {
  font-size:14px; color:var(--accent); padding:8px 12px;
  margin-bottom:10px; font-weight:600;
}
.search-ref {
  font-size:12px; color:var(--accent); font-weight:600;
  margin-bottom:3px;
}
.search-preview { font-size:14px; color:var(--text2); line-height:1.6; }
.search-preview mark {
  background:rgba(91,138,245,0.3); color:var(--accent);
  padding:0 2px; border-radius:2px;
}

/* ═══════════════════════════════════════════
   MULTI-VERSION COMPARISON PANEL
   ═══════════════════════════════════════════ */
.compare-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 16px;
  background:var(--bg3); border-bottom:1px solid var(--border);
  font-size:12px;
}
.compare-bar label { color:var(--text2); font-weight:600; white-space:nowrap; }
.compare-bar select {
  background:var(--bg2); color:var(--text);
  border:1px solid var(--border); border-radius:4px;
  padding:3px 6px; font-size:11px; cursor:pointer;
}
.compare-bar .close-btn {
  margin-left:auto; cursor:pointer; color:var(--text2);
  font-size:16px; line-height:1; padding:2px 6px;
  border-radius:4px; transition:background 0.12s;
}
.compare-bar .close-btn:hover { background:var(--bg); color:var(--text); }

/* ═══════════════════════════════════════════
   LOADING & EMPTY STATES
   ═══════════════════════════════════════════ */
.loading {
  display:flex; align-items:center; justify-content:center;
  height:120px; color:var(--text2); font-size:14px;
}
.empty-state {
  text-align:center; padding:40px 20px;
  color:var(--text2); font-size:14px; line-height:1.6;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width:1200px) {
  #app { grid-template-columns:190px 1fr 260px; }
  .main { padding:20px 28px; font-size:14.5px; }
}
@media (max-width:900px) {
  #app { grid-template-columns:1fr; grid-template-rows:52px 1fr; }
  .sidebar, .tsk-panel { display:none; }
  .main { padding:16px; font-size:14px; }
  .bilingual-row { grid-template-columns:1fr; }
  .bilingual-row .bilingual-col:first-child { border-right:none; border-bottom:1px solid var(--border); }
}
@media (min-width:1600px) {
  #app { grid-template-columns:220px 1fr 320px; }
  .main { padding:28px 48px; font-size:16px; }
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ═══════════════════════════════════════════
   INTERLINEAR LEGEND LABELS
   ═══════════════════════════════════════════ */
.il-legend { margin-top:20px; padding:10px 14px; background:var(--bg3); border-radius:8px; font-size:11px; color:var(--text2); line-height:1.8; border:1px solid var(--border); }
.il-strongs-label { color:var(--verse-num); }
.il-lemma-label { color:var(--accent2); }
.il-morph-label { color:#888; }
.il-footnote-label { color:#999; }

.strongs-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.6); z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.strongs-popup {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; width:560px; max-height:70vh;
  display:flex; flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.5); overflow:hidden;
}
.strongs-popup-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:var(--bg3);
}
.strongs-popup-header span:first-child {
  font-size:15px; font-weight:700; color:var(--accent);
}
.strongs-popup-close {
  font-size:18px; cursor:pointer; color:var(--text2);
  padding:2px 8px; border-radius:4px; transition:all 0.15s;
}
.strongs-popup-close:hover { background:var(--bg); color:var(--text); }
#strongsPopupBody {
  overflow-y:auto; padding:14px 20px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.strongs-count {
  font-size:12px; color:var(--text2); margin-bottom:12px;
}
.strongs-section-title {
  font-size:12px; font-weight:700; color:var(--accent);
  margin:14px 0 8px; padding-bottom:4px;
  border-bottom:1px solid var(--border);
}
.strongs-entry {
  background:var(--bg3); border-radius:8px;
  padding:10px 14px; margin-bottom:8px;
  border-left:3px solid var(--accent);
  transition:background 0.12s;
}
.strongs-entry:hover { background:var(--highlight); }
.strongs-entry-header {
  display:flex; align-items:baseline; gap:8px; margin-bottom:4px;
  flex-wrap:wrap;
}
.strongs-id {
  font-size:11px; font-weight:700; color:var(--accent2);
  background:rgba(212,165,116,0.15); padding:2px 6px;
  border-radius:3px; font-family:monospace;
}
.strongs-word {
  font-size:18px; font-weight:600; color:var(--text); line-height:1.4;
}
.strongs-trans {
  font-size:13px; color:var(--text2); font-style:italic;
}
.strongs-pron {
  font-size:12px; color:var(--accent); margin-bottom:6px;
  font-family:monospace;
}
.strongs-def {
  font-size:12.5px; color:var(--text2); line-height:1.6;
}
.strongs-hebrew-words {
  font-size:16px; color:var(--text); line-height:1.8;
  direction:rtl; text-align:right;
  padding:6px 0; margin-bottom:4px;
  border-bottom:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:4px 12px;
  align-items:center;
}
.strongs-hebrew-label {
  font-size:11px; color:var(--accent2); font-weight:600;
  direction:ltr;
}
.strongs-hebrew-word {
  display:inline-block; padding:2px 6px;
  background:rgba(91,138,245,0.1); border-radius:4px;
  cursor:default; transition:background 0.12s;
}
.strongs-hebrew-word:hover {
  background:rgba(91,138,245,0.25); color:var(--accent);
}

.verse-text .verse-word {
  cursor:pointer; transition:all 0.12s;
  border-radius:3px; padding:0 1px;
}
.verse-text .verse-word:hover {
  background:rgba(212,165,116,0.2); color:var(--accent2);
}

/* ===== Interlinear Mode ===== */
#interlinearBtn { margin:0 4px; }
.il-btn {
  background:var(--bg3); color:var(--accent); border:1px solid var(--border);
  border-radius:6px; padding:6px 12px; cursor:pointer; font-size:12px; font-weight:600;
  transition:all 0.15s; white-space:nowrap;
}
.il-btn:hover { background:var(--highlight); }
.il-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.interlinear-verse {
  display:flex; gap:12px; align-items:flex-start; padding:8px 0;
  border-bottom:1px solid var(--border);
}
.interlinear-verse .verse-num {
  flex-shrink:0; min-width:28px; margin-right:0; padding-top:3px;
}
.interlinear-words {
  display:flex; flex-wrap:wrap; gap:4px 8px; align-items:flex-end;
  flex:1; line-height:1.6;
}
.il-word {
  display:inline-flex; flex-direction:column; align-items:center;
  padding:2px 4px; border-radius:4px; transition:background 0.12s;
}
.il-word:hover { background:rgba(91,138,245,0.08); }
.il-word-ghost {
  display:inline-flex; flex-direction:column; align-items:center;
  padding:2px 4px; border-radius:4px; opacity:0.65;
}
.il-word-ghost .il-strongs-only {
  display:flex; gap:1px;
}
.il-word-text {
  font-size:15px; color:var(--text); font-weight:500;
}
.il-strongs {
  font-size:10px; display:flex; gap:2px;
}
.il-strongs-link {
  color:var(--verse-num); cursor:pointer; text-decoration:none;
  font-weight:600; transition:color 0.12s;
}
.il-strongs-link:hover { color:var(--accent2); text-decoration:underline; }
.il-morph {
  font-size:9px; color:#888; cursor:pointer;
  transition:color 0.12s;
}
.il-morph:hover { color:var(--accent); text-decoration:underline; }

/* Strong's hover tooltip */
.strongs-tooltip {
  position:fixed; z-index:9999;
  max-width:360px; padding:10px 14px;
  background:#1e1e2e; color:#e0e0e0;
  border:1px solid var(--accent); border-radius:8px;
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
  font-size:13px; line-height:1.6;
  pointer-events:none;
}
.strongs-tooltip .st-head {
  font-size:14px; font-weight:600; color:var(--accent); margin-bottom:6px;
}
.strongs-tooltip .st-pron {
  font-size:11px; color:#888; margin-bottom:4px;
}
.strongs-tooltip .st-def {
  color:#ccc;
}
.strongs-tooltip .st-kjv {
  margin-top:6px; font-size:11px; color:#999; font-style:italic;
}

/* Interlinear verse number */
.il-verse-num {
  flex-shrink:0; min-width:28px; font-size:13px;
}

/* Interlinear annotation line */
.il-annot {
  font-size:10px; display:flex; flex-wrap:wrap; gap:2px 6px; align-items:center;
  justify-content:center; color:var(--verse-num); margin-top:2px;
}
.il-sep { color:var(--border); font-size:10px; }
.il-lemma {
  color:var(--accent2); font-style:italic; font-weight:500; cursor:help;
}
.il-morph {
  color:#888; font-size:9px; font-family:'Courier New',monospace; cursor:pointer;
  text-transform:uppercase;
  transition:color .15s, background .15s;
  border-radius:3px; padding:0 2px;
}
.il-morph:hover {
  color:var(--accent2); background:rgba(232,168,72,0.1);
  text-decoration:underline;
}

/* Morph help button in toolbar */
.morph-help-btn {
  margin-left:4px; padding:3px 8px; font-size:12px;
}

/* Morphology help popup */
.morph-help-popup {
  max-width:640px !important; max-height:85vh !important;
}
#morphHelpBody {
  max-height:calc(85vh - 52px); overflow-y:auto; padding:12px 16px;
}
.morph-help-intro {
  font-size:13px; color:var(--text-secondary); margin-bottom:12px;
  padding:8px 12px; background:var(--hover-bg); border-radius:6px;
}
.morph-group {
  margin-bottom:6px;
}
.morph-group-title {
  font-size:13px; font-weight:700; color:var(--accent);
  padding:6px 8px; margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
.morph-row {
  display:flex; align-items:center; gap:8px;
  padding:4px 8px; font-size:12px;
  border-radius:4px; transition:background .15s;
  cursor:default;
}
.morph-row:hover {
  background:var(--hover-bg);
}
.morph-highlight {
  background:rgba(232,168,72,0.15) !important;
  border:1px solid var(--accent2);
}
.morph-code {
  font-family:'Courier New',monospace;
  font-weight:700; font-size:13px;
  color:var(--accent2); min-width:65px;
}
.morph-label {
  color:var(--text); font-weight:600; min-width:180px;
  font-size:12px;
}
.morph-desc {
  color:var(--text-secondary); font-size:11px;
}

/* Interlinear legend */
.il-legend {
  margin-top:20px; padding:10px 14px; background:var(--bg3); border-radius:8px;
  font-size:11px; color:var(--text-secondary); line-height:1.8;
  border:1px solid var(--border);
}
.il-legend span { white-space:nowrap; }

/* Footnotes in interlinear */
.il-footnotes {
  margin-top:6px; padding-left:40px;
}
.il-fn {
  font-size:11px; color:#999; padding:2px 0; line-height:1.4;
}
.il-fn-num {
  color:var(--accent2); font-weight:700; margin-right:4px;
}
.il-fn-text {
  color:var(--text-secondary);
}

/* OSIS footnote tag styling */
.fn-catchword {
  font-weight:700; color:var(--accent);
}
.fn-rdg {
  font-style:italic; color:var(--text-secondary);
}
.fn-rdg-x-literal {
  font-style:italic; color:#7ec8e3;
}
.fn-tc {
  font-style:italic;
}
.fn-hi {
  font-weight:600;
}
.fn-divine {
  color:#d4a84b;
}

.strongs-dict-search {
  margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}

.scrip-ref { color:var(--accent2); font-weight:600; }
/* ===== Dictionary Popup Styles ===== */
#dictBtn {
  background:var(--bg3); color:var(--accent); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; cursor:pointer; font-size:15px; transition:background 0.15s;
}
#dictBtn:hover { background:var(--highlight); }

.dict-search-area {
  display:flex; gap:8px; padding:12px 20px; border-bottom:1px solid var(--border); align-items:center; flex-wrap:wrap;
}
.dict-search-area select {
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:7px 10px; font-size:13px;
}
.dict-search-area input {
  flex:1 1 120px; min-width:100px; background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:7px 12px; font-size:13px;
}
.dict-search-area button {
  background:var(--accent); color:var(--bg); border:none; border-radius:6px;
  padding:7px 14px; cursor:pointer; font-size:14px;
}
.dict-search-area button:hover { opacity:0.85; }

#dictPopupBody {
  overflow-y:auto; padding:0; scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  max-height:60vh;
}
.dict-results-count { font-size:12px; color:var(--text2); padding:10px 20px; }
.dict-entry-row {
  padding:10px 20px; cursor:pointer; border-bottom:1px solid var(--border);
  transition:background 0.12s;
}
.dict-entry-row:hover { background:var(--highlight); }
.dict-entry-row .key { font-weight:600; color:var(--text); font-size:14px; }
.dict-entry-row .preview { font-size:12px; color:var(--text2); margin-top:3px; line-height:1.4; }

.dict-detail-header {
  padding:10px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.dict-detail-header button {
  background:var(--bg3); color:var(--accent); border:1px solid var(--border);
  border-radius:6px; padding:5px 10px; cursor:pointer; font-size:12px;
}
.dict-detail-header .key { font-weight:700; font-size:15px; color:var(--accent); }
.dict-detail-content {
  padding:14px 20px; font-size:13px; line-height:1.7; color:var(--text);
}
.dict-detail-content p { margin:0 0 8px; }

/* ===== Unified Tabs Popup ===== */
.unified-tabs {
  display:flex; gap:4px; padding:8px 12px 0;
  border-bottom:2px solid var(--border); overflow-x:auto;
}
.unified-tab {
  padding:6px 14px; border:1px solid var(--border); border-bottom:none;
  background:var(--bg2); color:var(--text-secondary); border-radius:8px 8px 0 0;
  font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:all 0.15s;
}
.unified-tab:hover { background:var(--highlight); }
.unified-tab.active {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.unified-search-row {
  display:flex; gap:6px; padding:10px 12px;
}
.unified-search-row input {
  flex:1; padding:8px 12px; border:1px solid var(--border);
  border-radius:6px; background:var(--bg); color:var(--text);
  font-size:13px; outline:none;
}
.unified-search-row input:focus { border-color:var(--accent); }
.unified-search-row button {
  padding:8px 14px; background:var(--accent); color:#fff;
  border:none; border-radius:6px; cursor:pointer; font-size:13px;
}
.unified-placeholder {
  padding:2rem; text-align:center; color:var(--text-secondary);
}
#unifiedContent {
  max-height:60vh; overflow-y:auto; padding:0 12px 12px;
}

/* Morph detail (quick help) */
.morph-detail-main {
  font-size:15px; font-weight:600; color:var(--text); padding:12px 0 4px;
}
.morph-detail-code {
  font-size:12px; color:var(--text-secondary); font-family:'Courier New',monospace;
}

/* ===== Modules Panel ===== */
#modulesBtn {
  background:var(--bg3); color:var(--accent); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; cursor:pointer; font-size:14px; transition:background 0.15s;
}
#modulesBtn:hover { background:var(--highlight); }

.modules-panel {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; width:760px; max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.5); overflow:hidden;
}

.modules-toolbar {
  padding:10px 16px; border-bottom:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:space-between;
}

.modules-tabs { display:flex; gap:4px; }
.modules-tab {
  padding:6px 14px; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  font-size:12px; cursor:pointer; transition:all 0.15s;
}
.modules-tab:hover { background:var(--highlight); }
.modules-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.modules-source {
  display:flex; gap:4px; align-items:center; margin-right:auto;
}
.modules-source label {
  font-size:0.75em; color:var(--text2); white-space:nowrap;
}
.modules-source select {
  padding:4px 6px; background:var(--bg3); color:var(--text1); border:1px solid var(--border);
  border-radius:4px; font-size:0.8em;
}
.modules-search {
  display:flex; gap:6px; align-items:center;
}
.modules-search input {
  width:180px; padding:6px 10px; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:6px; font-size:12px; outline:none;
}
.modules-search input:focus { border-color:var(--accent); }
.modules-search select {
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:6px 8px; font-size:12px; cursor:pointer;
}

#modulesListContainer {
  overflow-y:auto; max-height:55vh;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}

.module-card {
  display:flex; align-items:center; padding:10px 16px;
  border-bottom:1px solid var(--border);
  gap:12px; transition:background 0.12s;
}
.module-card:hover { background:var(--bg3); }
.module-card .mc-icon {
  font-size:18px; width:32px; text-align:center; flex-shrink:0;
}
.module-card .mc-info { flex:1; min-width:0; }
.module-card .mc-name { font-weight:600; font-size:13px; color:var(--text); }
.module-card .mc-desc { font-size:11px; color:var(--text2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.module-card .mc-tags { display:flex; gap:4px; flex-shrink:0; align-items:center; }
.mc-tag {
  font-size:10px; padding:2px 8px; border-radius:10px;
  font-weight:600; background:var(--bg3); color:var(--text2);
}
.mc-tag.bible { background:#1a3a5c; color:#5b9aff; }
.mc-tag.dictionary { background:#3a2a1a; color:#d4a574; }
.mc-tag.commentary { background:#1a3a1a; color:#5bcf5b; }
.mc-tag.general_book { background:#2a2a3a; color:#a0a0d0; }
.mc-tag.daily_devotion { background:#3a1a3a; color:#d080d0; }
.module-card .mc-btn {
  padding:5px 12px; border-radius:6px; border:none;
  font-size:11px; cursor:pointer; font-weight:600;
  transition:all 0.15s; white-space:nowrap;
  flex-shrink:0;
}
.mc-btn.install {
  background:var(--accent); color:#fff;
}
.mc-btn.install:hover { opacity:0.85; }
.mc-btn.install:disabled { opacity:0.4; cursor:default; }
.mc-btn.uninstall {
  background:transparent; color:#e05555; border:1px solid #e05555;
}
.mc-btn.uninstall:hover { background:#3a1a1a; }
.mc-btn.installed {
  background:var(--bg3); color:var(--text2); cursor:default;
}
.mc-btn.installing {
  background:#5b8af5; color:#fff; animation:pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; } 50% { opacity:0.6; }
}

#modulesStatus {
  padding:6px 16px; font-size:12px; color:var(--text2);
  border-top:1px solid var(--border); text-align:right;
}
#modulesStatus.error { color:#e05555; }
#modulesStatus.success { color:#5bcf5b; }

/* ── Daily Devotion Panel ── */
.devotion-panel {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:720px; max-width:90vw; max-height:85vh; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
  display:flex; flex-direction:column;
}
.devotion-toolbar {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.devotion-toolbar select, .devotion-toolbar input[type="date"] {
  padding:4px 8px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text1); font-size:13px;
}
.devotion-toolbar button {
  padding:4px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text1); cursor:pointer; font-size:13px;
  transition:all 0.15s;
}
.devotion-toolbar button:hover { background:var(--bg3); }
#devotionCheckBar {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 16px; border-bottom:1px solid var(--border);
  font-size:13px; color:var(--text2);
}
#devotionCheckBar label { display:flex; align-items:center; gap:6px; cursor:pointer; }
#devotionNoteBtn {
  background:transparent; border:none; cursor:pointer; font-size:16px;
  padding:2px 6px; border-radius:4px;
}
#devotionNoteBtn:hover { background:var(--bg2); }
#devotionNoteBtn.active { background:var(--accent); opacity:0.2; }
.devotion-content {
  padding:20px 24px; line-height:1.8; font-size:15px;
  color:var(--text1); overflow-y:auto; flex:1;
}
.devotion-content.loading {
  display:flex; align-items:center; justify-content:center;
  min-height:200px; color:var(--text2); font-style:italic;
}
.devotion-content h3 {
  margin:0 0 16px; font-size:18px; text-align:center;
  color:var(--accent);
}
.devotion-content h4 {
  margin:20px 0 8px; font-size:15px; color:var(--text2);
  border-bottom:1px solid var(--border); padding-bottom:4px;
}
.devotion-content blockquote {
  margin:12px 0; padding:12px 16px; background:var(--bg2);
  border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  font-style:italic; color:var(--text2);
}
.devotion-content .dv-ref {
  display:inline-block; padding:2px 8px; border-radius:4px;
  background:var(--bg2); color:var(--accent); cursor:pointer;
  font-size:13px; font-weight:600; margin:0 2px;
  transition:all 0.15s;
}
.devotion-content .dv-ref:hover { background:var(--accent); color:#fff; }
.devotion-content p { margin:8px 0; text-align:justify; }
#devotionNoteArea { padding:0 16px 8px; }
#devotionNoteArea textarea {
  width:100%; min-height:80px; padding:8px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg2); color:var(--text1);
  font-size:13px; resize:vertical; font-family:inherit; line-height:1.6;
}
/* General Book key list */
.book-keys-bar { display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px; background:var(--bg2); border-bottom:1px solid var(--border); gap:12px; }
.book-keys-search { display:flex; gap:6px; flex:1; }
.book-keys-search input {
  flex:1; padding:6px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text1); font-size:13px;
}
.book-keys-search button {
  padding:6px 12px; border-radius:6px; border:1px solid var(--accent);
  background:transparent; color:var(--accent); cursor:pointer; font-size:13px;
}
.book-keys-search button:hover { background:var(--accent); color:#fff; }
.book-keys-nav { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); }
.book-keys-nav button {
  padding:4px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text2); cursor:pointer;
}
.book-keys-nav button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.book-key-list { max-height:300px; overflow-y:auto; border-bottom:1px solid var(--border); }
.book-key-item {
  padding:10px 16px; cursor:pointer; border-bottom:1px solid var(--border);
  color:var(--text1); font-size:14px; transition:background 0.15s;
}
.book-key-item:hover { background:var(--bg2); color:var(--accent); }
.book-key-item.active { background:var(--highlight); color:var(--accent); }
.book-key-item.today { background:var(--bg2); font-weight:600; }
.today-badge {
  font-size:11px; padding:1px 6px; margin-left:6px;
  background:var(--accent); color:#fff; border-radius:3px; vertical-align:middle;
}

/* ── Devotion Calendar ── */
.dev-cal-header {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; margin-bottom: 0.5rem;
}
.dev-cal-nav {
  background: var(--bg3); color: var(--text1); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.25rem 0.6rem; cursor: pointer; font-size: 0.85rem;
}
.dev-cal-nav:hover { background: var(--bg4); }
.dev-cal-month {
  font-size: 0.95rem; font-weight: 600; color: var(--text1); min-width: 8rem; text-align: center;
}
.dev-cal-today {
  background: var(--accent); color: #fff; border: none; border-radius: 4px;
  padding: 0.25rem 0.7rem; cursor: pointer; font-size: 0.8rem; margin-left: 0.5rem;
}
.dev-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  padding: 0 0.5rem 0.25rem; text-align: center;
}
.dev-cal-dow-item {
  font-size: 0.72rem; color: var(--text2); font-weight: 500;
  padding: 0.2rem 0;
}
.dev-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  padding: 0 0.5rem;
}
.dev-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--text2); border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.dev-cal-day:hover { background: var(--bg3); color: var(--text1); }
.dev-cal-day.empty { cursor: default; }
.dev-cal-day.today {
  background: var(--accent); color: #fff; font-weight: 700;
}
.dev-cal-day.active {
  box-shadow: inset 0 0 0 2px var(--accent); font-weight: 600;
}
.dev-cal-day.has-data { color: var(--text1); }
.dev-cal-day:not(.has-data):not(.today):not(.empty) {
  color: var(--border); cursor: default;
}


/* ═══════════════════════════════════════════
   VERSE TOOLS: notes, bookmarks, crossrefs
   ═══════════════════════════════════════════ */
.verse-tools {
  display: none; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  gap: 2px; z-index: 2;
}
.verse-line { position: relative; }
.verse-line:hover .verse-tools { display: flex; }
.vt-btn {
  width: 24px; height: 24px; border: none; background: var(--bg3); color: var(--text2);
  border-radius: 4px; cursor: pointer; font-size: 12px; display: flex;
  align-items: center; justify-content: center; transition: all 0.15s;
}
.vt-btn:hover { background: var(--accent); color: #fff; }
.vt-btn.active { background: #d4a574; color: #fff; }
.verse-line.bookmarked { border-left: 3px solid #d4a574; padding-left: 0.35rem; }

/* Notes inline editor */
.note-editor-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex;
  align-items: center; justify-content: center; z-index: 1000;
}
.note-editor-panel {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.25rem; width: 460px; max-width: 95vw; max-height: 80vh;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.note-editor-header {
  display: flex; justify-content: space-between; align-items: center;
}
.note-editor-header h3 { font-size: 1rem; color: var(--text); }
.note-editor-header .vt-close {
  width: 28px; height: 28px; border: none; background: var(--bg3); color: var(--text2);
  border-radius: 50%; cursor: pointer; font-size: 14px; display: flex;
  align-items: center; justify-content: center;
}
.note-editor-header .vt-close:hover { background: #e05555; color: #fff; }
.note-editor-ref { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.note-editor-textarea {
  width: 100%; min-height: 100px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.75rem; color: var(--text); font-size: 0.9rem;
  font-family: inherit; resize: vertical; outline: none;
}
.note-editor-textarea:focus { border-color: var(--accent); }
.note-editor-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.note-editor-actions button {
  padding: 0.45rem 1rem; border: none; border-radius: 6px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; transition: background 0.15s;
}
.ne-save { background: var(--accent); color: #fff; }
.ne-save:hover { background: #4a7ae0; }
.ne-delete { background: transparent; color: #e05555; border: 1px solid #e05555 !important; }
.ne-delete:hover { background: #e05555; color: #fff; }
.ne-cancel { background: var(--bg3); color: var(--text2); }

/* Verse with note indicator */
.verse-line.has-note::after {
  content: '📝'; position: absolute; left: -18px; top: 2px; font-size: 10px;
  opacity: 0.6;
}

/* Cross-ref panel */
.xref-panel {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem; max-height: 320px; overflow-y: auto; margin-top: 0.5rem;
}
.xref-title { font-size: 0.85rem; color: var(--text2); margin-bottom: 0.5rem; }
.xref-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.xref-item {
  padding: 0.25rem 0.6rem; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; font-size: 0.8rem; color: var(--accent);
  transition: all 0.15s;
}
.xref-item:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.xref-loading { color: var(--text2); font-size: 0.85rem; }

/* ── Bookmarks & Notes & TSK Management Panels ── */
.bm-panel {
  position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
  width: 540px; max-width: 94vw; max-height: 80vh;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow: hidden;
}
.tsk-panel { width: 640px; }
.bm-list {
  flex: 1; overflow-y: auto; padding: 0.8rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.bm-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.65rem 0.8rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px;
  transition: border-color 0.15s;
}
.bm-item:hover { border-color: var(--accent); }
.bm-item-ref {
  font-weight: 600; color: var(--accent); font-size: 0.8rem;
  cursor: pointer; white-space: nowrap; min-width: 60px;
}
.bm-item-ref:hover { text-decoration: underline; }
.bm-item-preview {
  flex: 1; font-size: 0.82rem; color: var(--text1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-item-date {
  font-size: 0.7rem; color: var(--text2); white-space: nowrap;
}
.bm-item-del {
  background: none; border: none; color: #e05555; cursor: pointer;
  font-size: 1rem; padding: 0 0.2rem; opacity: 0.6; transition: opacity 0.15s;
}
.bm-item-del:hover { opacity: 1; }
.bm-empty {
  text-align: center; padding: 2rem 1rem; color: var(--text2);
  font-size: 0.9rem;
}
.bm-count {
  font-size: 0.75rem; color: var(--text2); padding: 0.2rem 0.8rem 0.5rem;
}

/* ── TSK panel special styles ── */
.tsk-verse-ref {
  font-weight: 600; color: var(--accent); font-size: 0.85rem;
  margin-top: 0.6rem; padding: 0.3rem 0.6rem;
  background: var(--bg3); border-radius: 6px;
}
.tsk-xref-list {
  display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem 0.6rem;
}
.tsk-xref {
  padding: 0.2rem 0.5rem; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; font-size: 0.78rem; color: var(--accent);
  transition: all 0.15s;
}
.tsk-xref:hover { background: var(--accent); color: #fff; }
.tsk-loading { text-align: center; padding: 2rem; color: var(--text2); }

/* ── Repository Management ── */
.repo-mgr-btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); padding: 0.25rem 0.5rem; border-radius: 6px;
  cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
}
.repo-mgr-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.repo-badge {
  font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  font-weight: 600; text-transform: uppercase;
}
.repo-badge.builtin { background: var(--bg3); color: var(--accent); }
.repo-badge.custom { background: rgba(255,193,7,0.15); color: #ffc107; }
.repo-add-form {
  padding: 0.8rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.repo-add-form input, .repo-add-form textarea {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text1); padding: 0.45rem 0.6rem; border-radius: 6px;
  font-size: 0.82rem; width: 100%;
}
.repo-add-hint {
  font-size: 0.72rem; color: var(--text3);
  padding: 0.1rem 0;
}
.repo-add-form input:focus, .repo-add-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.repo-add-actions {
  display: flex; gap: 0.5rem;
}
.repo-add-actions button {
  background: var(--accent); color: #fff; border: none;
  padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer;
  font-size: 0.82rem;
}
.repo-add-actions button.btn-cancel {
  background: var(--bg3); color: var(--text2);
}
.repo-footer {
  padding: 0.6rem 0.8rem; border-top: 1px solid var(--border);
}
.repo-footer button {
  background: var(--accent); color: #fff; border: none;
  padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer;
  font-size: 0.82rem;
}

/* ============ Maps Panel ============ */
.maps-panel {
  background: var(--panel-bg, #fff);
  border-radius: 12px;
  width: 90vw;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
.maps-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
}
.maps-thumbnail-card {
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--card-bg, #fafafa);
}
.maps-thumbnail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.maps-thumbnail-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.maps-thumbnail-card .maps-thumb-title {
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color, #333);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maps-image-viewer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.92);
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
.maps-image-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  flex-shrink: 0;
}
.maps-image-nav button {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
.maps-image-nav button:hover { background: rgba(255,255,255,0.25); }
.maps-image-nav button:disabled { opacity: 0.3; cursor: default; }
#mapsImageTitle { font-size: 1rem; font-weight: 500; flex: 1; text-align: center; }
.maps-img-close { font-size: 1.2rem !important; padding: 6px 12px !important; }
.maps-toolbar {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.maps-toolbar button {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}
.maps-toolbar button:hover {
  background: rgba(0,0,0,0.12);
}
.maps-toolbar-spacer { width: 8px; }
.maps-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.maps-image-container.grabbing { cursor: grabbing; }
.maps-image-container img {
  position: relative;
  transform-origin: center center;
  transition: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
/* Fullscreen mode */
.maps-panel.fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0;
  z-index: 10001;
}
.maps-panel.fullscreen .maps-image-viewer {
  border-radius: 0;
}

/* ===== Auth Panel ===== */
.auth-panel {
  background: #fff;
  border-radius: 10px;
  width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  padding: 0;
}
.auth-tabs {
  display: flex;
  border-bottom: 2px solid #eee;
}
.auth-tab {
  flex: 1;
  padding: 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.auth-tab.active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
  font-weight: 600;
}
.auth-form {
  padding: 20px;
}
.auth-form input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
}
.auth-form input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
}
.auth-submit-btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 6px;
  background: #1a73e8;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.auth-submit-btn:hover { background: #1557b0; }
.auth-error {
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #fdecea;
  color: #c0392b;
  border-radius: 6px;
  font-size: 0.85rem;
}
.admin-user-panel {
  padding: 0 20px 20px;
  border-top: 1px solid #eee;
}
.admin-user-list {
  max-height: 200px;
  overflow-y: auto;
}
.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}
.admin-user-row:last-child { border-bottom: none; }
.admin-role-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.admin-role-admin { background: #e8f5e9; color: #2e7d32; }
.admin-role-user { background: #f5f5f5; color: #666; }
.admin-role-toggle {
  padding: 3px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  transition: border-color 0.2s;
}
.admin-role-toggle:hover { border-color: #1a73e8; }
.admin-user-info { display: flex; align-items: center; gap: 8px; }
.admin-user-name { font-weight: 600; }
.admin-user-actions { display: flex; gap: 4px; flex-wrap: wrap; }
/* Captcha */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.captcha-question {
  background: #f0f4ff;
  border: 1px dashed #90a4ae;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: monospace;
  color: #1a73e8;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.captcha-question:hover { background: #e3edff; }

/* Admin user list header */
.admin-user-list-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 2px solid #e0e0e0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-btn-sm {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.15s;
}
.admin-btn-sm:hover { border-color: #1a73e8; color: #1a73e8; }
.admin-btn-sm.danger { color: #d32f2f; border-color: #ffcdd2; }
.admin-btn-sm.danger:hover { background: #ffebee; }
.admin-btn-sm.success { color: #2e7d32; border-color: #c8e6c9; }
.admin-btn-sm.success:hover { background: #e8f5e9; }

#loginBtn.logged-in {
  color: #2e7d32;
  font-weight: 600;
}



/* topbar link buttons (modules, admin) */
.topbar-btn {
  display: inline-block; padding: 8px 12px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; color: var(--text);
  cursor: pointer; text-decoration: none; line-height: 1;
}
.topbar-btn:hover { background: var(--highlight); }