/* ═══════════════════════════════════════════
   Mobile Bible Reader v3 — Styles
   Dark theme, touch-first, single column
   ═══════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --bg:#0f1117; --bg2:#1a1d27; --bg3:#242836;
  --text:#e4e6f0; --text2:#9499b3; --accent:#5b8af5;
  --accent2:#d4a574; --border:#2e3348;
  --verse-num:#5b8af5; --highlight:#2a2f45;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

html { font-size:16px; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden;
  line-height:1.6;
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
}

/* ═══ Top Bar ═══ */
#topBar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:var(--bg2); border-bottom:1px solid var(--border);
  height:52px;
}
.icon-btn {
  background:none; border:none; color:var(--text);
  font-size:20px; cursor:pointer; padding:6px 8px;
  min-width:40px; min-height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition:background .15s;
}
.icon-btn:active { background:var(--bg3); }
.icon-btn:disabled { opacity:0.4; }
.trans-select {
  flex:1; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-size:13px; min-height:40px;
  max-width:200px;
}

/* ═══ Compare Bar ═══ */
.compare-bar {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 12px; background:var(--bg2); border-bottom:1px solid var(--border);
}
.compare-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:16px; padding:4px 10px; font-size:12px;
}
.compare-x { cursor:pointer; color:var(--text2); font-size:14px; }
.compare-select {
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
  border-radius:16px; padding:4px 10px; font-size:12px; min-height:32px;
}

/* ═══ Chapter Header with quick-select ═══ */
.chapter-header {
  padding:8px 16px 6px;
  font-size:1.1rem; font-weight:700; color:var(--accent);
}
.ch-header-row {
  display:flex; align-items:center; gap:8px;
}
.ch-title { flex:1; font-size:1rem; }
.ch-nav-btn {
  width:36px; height:36px; border-radius:8px;
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); cursor:pointer;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ch-nav-btn:active { background:var(--accent); color:#fff; }
.ch-nav-btn:disabled { opacity:0.4; }
.ch-select {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:6px 8px; font-size:14px; min-height:36px; width:70px;
  text-align:center; flex-shrink:0;
}
.chapter-header .ch-sub {
  font-size:0.8rem; font-weight:400; color:var(--text2); margin-top:2px;
}

/* ═══ Verse with TTS ═══ */
.verse-line { transition:background .2s; }
.verse-line.speaking {
  background:rgba(91,138,245,0.15);
  border-radius:6px;
}
.tts-btn { cursor:pointer; }
.tts-btn:active { opacity:0.6; }

/* ═══ Dict popup entries ═══ */
.dict-popup-entry {
  padding:8px 0; border-bottom:1px solid rgba(46,51,72,0.3);
}
.dict-popup-entry:last-child { border-bottom:none; }

/* ═══ Verse Content ═══ */
.verse-content {
  padding:8px 16px 100px;
  font-size:1rem;
}
.loading {
  text-align:center; padding:40px 0; color:var(--text2);
}
.verse-line {
  padding:6px 0; border-bottom:1px solid rgba(46,51,72,0.4);
  position:relative;
}
.verse-line:active { background:var(--highlight); }
.verse-num {
  display:inline-block; min-width:28px;
  color:var(--verse-num); font-size:0.8rem; font-weight:600;
  vertical-align:super; margin-right:4px;
}
.verse-text { font-size:1rem; line-height:1.7; }
.verse-word { display:inline; cursor:pointer; }
.verse-word:active { background:var(--highlight); border-radius:3px; }

/* ═══ Compare Mode ═══ */
.cmp-row {
  padding:6px 0; border-bottom:1px solid rgba(46,51,72,0.4);
}
.cmp-vn {
  color:var(--verse-num); font-size:0.8rem; font-weight:600;
  margin-bottom:4px;
}
.cmp-cols { display:flex; flex-direction:column; gap:6px; }
.cmp-col { padding:4px 8px; background:rgba(36,40,54,0.5); border-radius:6px; }
.cmp-label {
  font-size:0.7rem; color:var(--accent2); font-weight:600; margin-bottom:2px;
}
.cmp-text { font-size:0.95rem; line-height:1.6; }

/* ═══ Interlinear ═══ */
.il-verse {
  padding:8px 0; border-bottom:1px solid rgba(46,51,72,0.4);
}
.il-word { display:inline; margin-right:2px; }
.il-word-ghost { opacity:0.45; }
.il-strongs { font-size:0.65rem; vertical-align:sub; }
.il-strongs-link { color:var(--accent); text-decoration:none; cursor:pointer; }
.il-strongs-link:active { text-decoration:underline; }
.il-morph {
  font-size:0.6rem; color:var(--accent2); cursor:pointer;
  vertical-align:super;
}
.il-footnotes { font-size:0.75rem; color:var(--text2); margin-top:4px; font-style:italic; }

/* ═══ Chapter Navigation ═══ */
.chapter-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 20px; gap:8px;
}
.chapter-nav button {
  flex:1; padding:12px; font-size:14px;
  background:var(--bg2); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  cursor:pointer; min-height:44px;
  transition:background .15s; max-width:140px;
}
.chapter-nav button:active { background:var(--bg3); }
.chapter-nav button:disabled { opacity:0.4; }

/* ═══ Bottom Navigation ═══ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  display:flex; z-index:100;
  background:var(--bg2); border-top:1px solid var(--border);
  padding-bottom:var(--safe-bottom);
  height:56px;
}
.nav-btn {
  flex:1; background:none; border:none; color:var(--text2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; font-size:10px;
  min-height:48px; transition:color .15s;
}
.nav-btn.active { color:var(--accent); }
.nav-icon { font-size:18px; }
.nav-label { font-size:9px; }

/* ═══ Drawer ═══ */
.drawer-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.6); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; left:0; bottom:0;
  width:85%; max-width:320px;
  background:var(--bg2); z-index:201;
  transform:translateX(-100%); transition:transform .25s;
  overflow-y:auto; padding:16px;
  padding-top:calc(16px + var(--safe-top));
}
.drawer.open { transform:translateX(0); }
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.lang-select {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:8px; font-size:13px;
}
.drawer-title { font-size:1rem; font-weight:600; }
.drawer-section { margin-bottom:20px; }
.section-title {
  font-size:0.85rem; color:var(--text2); text-transform:uppercase;
  letter-spacing:0.5px; margin-bottom:8px; font-weight:600;
}
.book-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:6px;
}
.book-item {
  padding:10px 8px; text-align:center; font-size:12px;
  background:var(--bg3); border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:all .15s;
  min-height:44px; display:flex; align-items:center; justify-content:center;
  line-height:1.2;
}
.book-item.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.book-item:active { transform:scale(0.96); }
.chapter-grid-m {
  display:grid; grid-template-columns:repeat(8, 1fr); gap:4px;
}
.chapter-grid-m .ch-item {
  padding:10px 4px; text-align:center; font-size:13px;
  background:var(--bg3); border-radius:8px; cursor:pointer;
  min-height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent;
}
.chapter-grid-m .ch-item.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.chapter-grid-m .ch-item:active { transform:scale(0.95); }

/* ═══ Views (Search/Dict/Maps/Devotion) ═══ */
.view { padding-bottom:100px; }
.search-bar {
  display:flex; gap:8px; padding:12px 16px;
  position:sticky; top:52px; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--border);
}
.search-bar input {
  flex:1; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; font-size:15px; min-height:44px;
}
.search-results { padding:12px 16px; }
.search-result-item {
  padding:12px 0; border-bottom:1px solid var(--border);
}
.search-result-item .sr-ref {
  font-size:0.8rem; color:var(--accent); font-weight:600; margin-bottom:4px;
}
.search-result-item .sr-text {
  font-size:14px; line-height:1.5; color:var(--text);
}
.search-result-item .sr-text mark {
  background:var(--accent); color:#fff; border-radius:2px; padding:0 2px;
}

/* ═══ Maps ═══ */
.maps-module-sel { padding:12px 16px; }
.maps-grid {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px; padding:8px 16px;
}
.map-thumb {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.map-thumb img {
  width:100%; height:120px; object-fit:cover; display:block;
}
.map-thumb-title {
  padding:6px 8px; font-size:11px; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-viewer {
  background:var(--bg2); border-radius:12px; max-width:500px; width:100%;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
}
.map-viewer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.map-viewer-title { font-size:14px; font-weight:600; }
.map-viewer-body { flex:1; overflow:auto; padding:8px; }
.map-viewer-body img { width:100%; height:auto; }
.map-viewer-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; border-top:1px solid var(--border);
}

/* ═══ Commentary Drawer ═══ */
.commentary-drawer {
  position:fixed; bottom:0; left:0; right:0;
  max-height:70vh; background:var(--bg2); z-index:201;
  border-top:1px solid var(--border); border-radius:16px 16px 0 0;
  transform:translateY(100%); transition:transform .25s;
  overflow-y:auto; padding:16px;
  padding-bottom:calc(16px + var(--safe-bottom));
}
.commentary-drawer.open { transform:translateY(0); }
.cmt-tabs {
  margin-bottom:12px; padding-bottom:4px;
}
.cmt-tabs select.cmt-select {
  width:100%; padding:6px 8px; font-size:13px;
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  outline:none; -webkit-appearance:none; appearance:none;
}
.cmt-tabs select.cmt-select:focus { border-color:var(--accent); }
.cmt-tabs select.cmt-select option { background:var(--bg2); color:var(--text); }
.cmt-body { font-size:14px; line-height:1.6; color:var(--text); }
.cmt-body .cmt-empty { color:var(--text2); text-align:center; padding:20px; }
.cmt-entry {
  padding:8px 0; border-bottom:1px solid rgba(46,51,72,0.3);
  white-space:pre-wrap; word-wrap:break-word;
}

/* ═══ Devotion ═══ */
.devotion-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.dev-date { font-size:1rem; font-weight:600; color:var(--accent); }
.devotion-content { padding:16px; font-size:15px; line-height:1.7; }

/* ═══ Popups ═══ */
.popup-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.6); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.popup-card {
  background:var(--bg2); border-radius:16px;
  max-width:400px; width:100%; max-height:80vh; overflow-y:auto;
}
.popup-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-bottom:1px solid var(--border);
  font-size:1rem; font-weight:600;
}
.popup-body { padding:16px; font-size:14px; line-height:1.6; }
.popup-body .st-head { font-size:1.1rem; font-weight:700; color:var(--accent2); margin-bottom:8px; }
.popup-body .st-pron { font-size:0.85rem; color:var(--text2); margin-bottom:8px; }
.popup-body .st-def { font-size:14px; line-height:1.6; }
.popup-body .st-kjv { font-size:0.85rem; color:var(--text2); margin-top:8px; font-style:italic; }

/* ═══ More Menu ═══ */
.more-menu {
  position:fixed; bottom:56px; right:12px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:8px 0; z-index:301;
  min-width:200px; box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.more-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; width:100%; text-align:left;
  background:none; border:none; color:var(--text);
  font-size:14px; cursor:pointer; text-decoration:none; min-height:44px;
}
.more-item:active { background:var(--bg3); }
.more-menu hr { border:none; border-top:1px solid var(--border); margin:4px 0; }

/* ═══ Font ═══ */
.font-panel {
  background:var(--bg2); border-radius:16px; padding:20px; max-width:300px; width:100%;
}
.font-controls {
  display:flex; align-items:center; justify-content:center; gap:20px; padding:20px 0;
}
.font-btn {
  width:50px; height:50px; border-radius:50%;
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); font-size:18px;
  cursor:pointer; font-weight:bold;
}
.font-btn:active { background:var(--accent); color:#fff; }
.font-display { font-size:1.1rem; font-weight:600; color:var(--accent); min-width:60px; text-align:center; }

/* ═══ Auth ═══ */
.auth-panel {
  background:var(--bg2); border-radius:16px; max-width:360px; width:100%; overflow:hidden;
}
.auth-form { padding:20px; display:flex; flex-direction:column; gap:12px; }
.auth-form input {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:14px; font-size:15px; min-height:44px;
}
.auth-submit {
  padding:14px; font-size:15px; font-weight:600;
  background:var(--accent); color:#fff; border:none;
  border-radius:10px; cursor:pointer; min-height:44px;
}
.auth-submit:active { opacity:0.8; }
.captcha-row { display:flex; gap:8px; align-items:center; }
.captcha-question { white-space:nowrap; color:var(--accent); cursor:pointer; font-size:0.85em; padding:8px 6px; }
.captcha-question:active { opacity:0.7; }
.auth-error { color:#e05555; font-size:0.85em; margin-bottom:8px; }
.auth-toggle { text-align:center; margin-top:8px; }
.auth-toggle a { color:var(--accent); text-decoration:none; font-size:14px; }

/* ═══ Strong's Tooltip ═══ */
.strongs-tooltip {
  position:fixed; z-index:400; max-width:340px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px; padding:14px; font-size:13px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}

/* ═══ Swipe Hint ═══ */
.swipe-hint {
  position:fixed; bottom:120px; left:50%; transform:translateX(-50%);
  background:var(--bg3); padding:8px 16px; border-radius:20px;
  font-size:12px; color:var(--text2); z-index:50;
  border:1px solid var(--border); opacity:0.8;
  animation:fadeout 2s forwards; animation-delay:2s;
}
@keyframes fadeout { to { opacity:0; } }

/* ═══ Utility ═══ */
.hidden { display:none !important; }

/* ═══ Tablet ═══ */
@media (min-width:768px) {
  .verse-content { max-width:720px; margin:0 auto; padding:8px 24px 100px; }
  .chapter-header { max-width:720px; margin:0 auto; }
  .chapter-nav { max-width:720px; margin:0 auto; }
  .book-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
  .chapter-grid-m { grid-template-columns:repeat(10, 1fr); }
  .search-bar { max-width:720px; margin:0 auto; }
  .search-results { max-width:720px; margin:0 auto; }
  .maps-grid { grid-template-columns:repeat(3, 1fr); max-width:720px; margin:0 auto; }
}

/* ═══ Reading Plan ═══ */
.plan-header { padding:8px 12px; }
.plan-select {
  width:100%; padding:10px 12px; font-size:15px;
  background:var(--bg-card, #1a1d28); color:var(--text, #e0e0e0);
  border:1px solid var(--border, #333); border-radius:8px;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.plan-today-card {
  margin:8px 12px; padding:16px;
  background:var(--bg-card, #1a1d28); border-radius:12px;
  border:1px solid var(--border, #2a2d3a);
}
.plan-today-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.plan-day-label { font-size:18px; font-weight:700; color:var(--accent, #4a9eff); }
.plan-date-label { font-size:13px; color:var(--text-dim, #888); }
.plan-readings { margin-bottom:12px; }
.plan-reading-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:6px;
  background:var(--bg-input, #14161e); border-radius:8px;
  cursor:pointer; transition:background .15s;
}
.plan-reading-item:active { background:var(--bg-hover, #1f2230); }
.plan-reading-done { opacity:0.5; }
.plan-reading-check { font-size:18px; color:var(--accent, #4a9eff); }
.plan-reading-label { font-size:15px; }
.plan-actions { text-align:center; }
.plan-check-btn {
  padding:10px 24px; font-size:15px; font-weight:600;
  background:var(--accent, #4a9eff); color:#fff;
  border:none; border-radius:8px; cursor:pointer;
  transition:opacity .15s;
}
.plan-check-btn:active { opacity:0.8; }
.plan-check-done { background:var(--success, #2d8a4e); }
.plan-progress-bar {
  position:relative; margin:12px; height:32px;
  background:var(--bg-card, #1a1d28); border-radius:16px;
  overflow:hidden; border:1px solid var(--border, #2a2d3a);
}
.plan-progress-fill {
  position:absolute; left:0; top:0; height:100%;
  background:linear-gradient(90deg, #4a9eff, #6ab4ff);
  transition:width .3s;
}
.plan-progress-text {
  position:absolute; width:100%; text-align:center;
  line-height:32px; font-size:13px; font-weight:600;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.plan-day-nav {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 12px;
}
.plan-day-nav span { font-size:15px; font-weight:600; min-width:80px; text-align:center; }
.plan-today-btn {
  padding:6px 14px; font-size:13px;
  background:var(--bg-card, #1a1d28); color:var(--accent, #4a9eff);
  border:1px solid var(--accent, #4a9eff); border-radius:6px;
  cursor:pointer;
}
.plan-today-btn:active { opacity:0.7; }
.plan-calendar {
  display:grid; gap:3px; padding:12px;
  max-width:600px; margin:0 auto;
}
.plan-cal-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; border-radius:4px;
  background:var(--bg-card, #1a1d28); color:var(--text-dim, #888);
  transition:all .1s;
}
.plan-cal-day:active { transform:scale(0.92); }
.plan-cal-done { background:var(--success, #2d8a4e); color:#fff; }
.plan-cal-today { border:2px solid var(--accent, #4a9eff); }
.plan-cal-selected { background:var(--accent, #4a9eff); color:#fff; }