:root {
  --bg: #f5f6fb;
  --card: #ffffff;
  --text: #202534;
  --muted: #5d6476;
  --accent: #3b63ff;
  --accent-soft: #e6ecff;
  --highlight: #ffe98f;
  --glow: 0 0 0 2px rgba(59, 99, 255, 0.32), 0 0 12px rgba(59, 99, 255, 0.25);
  --header-height: 0px;
}

body.dark {
  --bg: #121521;
  --card: #1b2031;
  --text: #edf1ff;
  --muted: #aab3cc;
  --accent: #89a4ff;
  --accent-soft: #2a355f;
  --highlight: #5d5200;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid rgba(120,130,160,.25);
  padding: 0.75rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.brand { font-weight: 900; font-size: 1.1rem; margin-bottom: 0.5rem; }
.controls-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

button, select, input, textarea {
  border: 1px solid rgba(120,130,160,.45);
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
}
button { cursor: pointer; font-weight: 700; }
button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59,99,255,.28), 0 0 12px rgba(59,99,255,.35);
}
.chip { background: var(--accent-soft); }

.layout {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  grid-template-columns: 1.1fr 1.4fr .9fr;
  align-items: start;
}
.panel {
  background: var(--card);
  border: 1px solid rgba(120,130,160,.22);
  border-radius: 16px;
  padding: 0.85rem;
  min-height: 220px;
  scroll-margin-top: calc(var(--header-height) + 16px);
  min-width: 0;
  overflow: hidden;
}

body.collapse-study .study-panel { display: none; }
body.collapse-study #app { grid-template-columns: 1.1fr 1.4fr; }

body.no-split #app { grid-template-columns: 1fr; }
body.no-split .strongs-panel,
body.no-split .reader-panel,
body.no-split .study-panel { width: 100%; }

body.teaching-mode .strongs-panel {
  border-color: rgba(59,99,255,.4);
  box-shadow: 0 0 0 2px rgba(59,99,255,.16), 0 12px 24px rgba(0,0,0,.10);
}

.verses { display: grid; gap: 0.6rem; }
.verse {
  border: 1px solid rgba(120,130,160,.22);
  border-radius: 14px;
  padding: 0.75rem;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
}
.verse strong {
  font-weight: 900;
  font-size: 1.08rem;
  margin-right: 8px;
}
.verse.selected,
.verse.highlight {
  background: var(--highlight);
  box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 2px rgba(59,99,255,.32), 0 0 14px rgba(59,99,255,.28);
}
.verse.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,99,255,.35), 0 0 22px rgba(59,99,255,.22);
}
.verse-actions { margin-top: 0.6rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }

.word {
  cursor: pointer;
  padding: 0 .08rem;
  border-radius: 6px;
}
.word:hover,
.word.active-word {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(59,99,255,.3), 0 0 8px rgba(59,99,255,.15);
  font-weight: 700;
}

.strongs-inline-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  background: var(--accent-soft);
  border: 1px solid rgba(59,99,255,.35);
}

.strongs-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.tabs { margin: 0.75rem 0; display: grid; gap: 0.5rem; }
.tab-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.definition-card {
  border: 1px solid rgba(120,130,160,.3);
  border-radius: 14px;
  padding: 0.8rem;
  min-height: 180px;
}
.definition-card.pinned {
  outline: 2px solid var(--accent);
  box-shadow: var(--glow);
}
#pinDefinitionBtn { font-weight: 900; }
#pinDefinitionBtn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59,99,255,.3), 0 0 14px rgba(59,99,255,.42), 0 0 22px rgba(59,99,255,.18);
}

.def-block + .def-block { margin-top: 0.8rem; }
.def-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.2rem;
  font-weight: 800;
}
.def-text { font-size: 1rem; line-height: 1.55; }
.def-related { margin: 0; padding-left: 1rem; }

.search-results { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.result-item {
  border: 1px solid rgba(120,130,160,.25);
  border-radius: 10px;
  padding: 0.6rem;
  cursor: pointer;
}

ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
li button { width: 100%; text-align: left; }

dialog { border: none; border-radius: 12px; width: min(500px, 95vw); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
textarea { width: 100%; }

@media (min-width: 1025px) {
  body.teaching-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 0.75rem;
    align-items: start;
  }

  body.teaching-mode > .top-bar {
    grid-column: 2;
    grid-row: 1;
    margin: 0.75rem 0.75rem 0 0;
    border: 1px solid rgba(120,130,160,.22);
    border-radius: 16px;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  body.teaching-mode > #app {
    grid-column: 1;
    grid-row: 1;
    margin: 0.75rem 0 0 0.75rem;
  }

  body.teaching-mode > #app.layout {
    grid-template-columns: 1fr;
  }

  body.teaching-mode .strongs-panel { order: 1; }
  body.teaching-mode .reader-panel { order: 2; }
  body.teaching-mode .study-panel { display: none; }
}

@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr 1fr; }
  .study-panel { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .top-bar { position: static; }
  .layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .study-panel { grid-column: 1 / -1; }
  body.no-split #app { grid-template-columns: 1fr; }
  body.no-split .strongs-panel,
  body.no-split .reader-panel,
  body.no-split .study-panel { width: 100%; }
  body.teaching-mode.no-split .strongs-panel { order: 1; position: relative; }
  body.teaching-mode.no-split .reader-panel { order: 2; }
  body.teaching-mode.no-split .study-panel { order: 3; }
  .strongs-search { grid-template-columns: 1fr; }
  button, input, select { min-height: 44px; }
}


/* 90% finish adjustments */
@media (min-width: 1025px) {
  body.teaching-mode > #app.layout .strongs-panel {
    margin-bottom: 0.75rem;
  }
  body.teaching-mode > .top-bar {
    position: sticky;
    top: 12px;
  }
}

@media (max-width: 760px) {
  body.teaching-mode .layout {
    grid-template-columns: 1fr;
  }
  body.teaching-mode .strongs-panel {
    order: 1;
    border-color: rgba(59,99,255,.40);
    box-shadow: 0 0 0 2px rgba(59,99,255,.18), 0 12px 24px rgba(0,0,0,.08);
  }
  body.teaching-mode .reader-panel {
    order: 2;
  }
  body.teaching-mode .study-panel {
    order: 3;
  }
  body.teaching-mode .top-bar {
    border-bottom: 2px solid rgba(59,99,255,.22);
  }
}


/* done polish */
#definitionCard.is-hidden,
#strongsResults.is-hidden {
  display: none;
}

@media (max-width: 760px) {
  .strongs-panel .tabs,
  .strongs-panel #pinDefinitionBtn,
  .strongs-panel #definitionCard,
  .strongs-panel #strongsResults {
    display: none;
  }

  .strongs-panel #definitionCard:not(.is-hidden),
  .strongs-panel #strongsResults:not(.is-hidden),
  .strongs-panel.has-strongs-loaded .tabs,
  .strongs-panel.has-strongs-loaded #pinDefinitionBtn {
    display: block;
  }

  .strongs-panel.has-strongs-loaded .tab-group {
    display: flex;
  }

  body.teaching-mode .layout {
    grid-template-columns: 1fr !important;
  }
  body.teaching-mode .strongs-panel { order: 1; }
  body.teaching-mode .reader-panel { order: 2; }
  body.teaching-mode .study-panel { order: 3; }
}

@media (min-width: 761px) {
  .reader-panel,
  .strongs-panel,
  .study-panel {
    scroll-margin-top: calc(var(--header-height) + 28px);
  }
}


#definitionCard.is-hidden,
#strongsResults.is-hidden {
  display: none;
}

.tab-group {
  align-items: flex-start;
}
.tab-group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .strongs-panel .tabs,
  .strongs-panel #pinDefinitionBtn,
  .strongs-panel #definitionCard,
  .strongs-panel #strongsResults {
    display: none;
  }

  .strongs-panel #definitionCard:not(.is-hidden),
  .strongs-panel #strongsResults:not(.is-hidden),
  .strongs-panel.has-strongs-loaded .tabs,
  .strongs-panel.has-strongs-loaded #pinDefinitionBtn {
    display: block;
  }

  .strongs-panel.has-strongs-loaded .tab-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .strongs-panel .tab-group button {
    flex: 0 0 calc(50% - 0.3rem);
    margin: 0;
  }

  body.teaching-mode .layout {
    grid-template-columns: 1fr !important;
  }
  body.teaching-mode .strongs-panel { order: 1; }
  body.teaching-mode .reader-panel { order: 2; }
  body.teaching-mode .study-panel { order: 3; }
}

@media (min-width: 761px) {
  .reader-panel,
  .strongs-panel,
  .study-panel {
    scroll-margin-top: calc(var(--header-height) + 44px) !important;
  }
}


/* final clean strongs tabs */
.tabs {
  display: grid;
  gap: 0.75rem;
}
.tab-group {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.tab-group button {
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .tab-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .tab-group button {
    min-height: 54px;
  }
}


/* strongs focus final */
#strongsResults.is-hidden {
  display: none !important;
}

.result-item {
  transition: 120ms ease;
}
.result-item:hover {
  transform: translateY(-1px);
}

.tab-group button.active {
  box-shadow: 0 0 0 2px rgba(59,99,255,.28), 0 0 12px rgba(59,99,255,.26);
}

@media (max-width: 760px) {
  .controls-row {
    align-items: stretch;
  }
  .controls-row.search-row > * {
    flex: 1 1 auto;
  }
  .tab-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* desktop scripture word lookup fix */
.word {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  text-decoration-thickness: 2px;
}
.word:hover {
  outline: 0;
}
.reader-panel,
.verses,
.verse {
  position: relative;
}
@media (min-width: 761px) {
  .word {
    display: inline;
    cursor: pointer;
  }
}


/* final search/header/card fixes */
#strongsResults.is-hidden,
#strongsResults[hidden] {
  display: none !important;
}

@media (min-width: 761px) {
  :root {
    --header-desktop-offset: 170px;
  }
  .reader-panel,
  .strongs-panel,
  .study-panel,
  .result-item,
  .verse {
    scroll-margin-top: var(--header-desktop-offset) !important;
  }
  .layout {
    padding-top: 1rem;
  }
  .top-bar {
    position: sticky;
    top: 0;
    z-index: 40;
  }
}


/* final absolute polish */
#strongsResults,
#strongsResults.is-hidden,
#strongsResults[hidden] {
  display: none !important;
}

#definitionCard .def-block {
  margin-bottom: 1rem;
}

@media (min-width: 761px) {
  :root {
    --header-desktop-offset: 210px;
  }
  .reader-panel,
  .strongs-panel,
  .study-panel,
  .result-item,
  .verse,
  .card {
    scroll-margin-top: var(--header-desktop-offset) !important;
  }
  .top-bar {
    position: sticky;
    top: 0;
    z-index: 60;
  }
  body {
    scroll-padding-top: var(--header-desktop-offset);
  }
}

button,
input,
select,
textarea {
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
button:active {
  transform: translateY(1px);
}


/* final strongs meaning polish */
#definitionCard .def-block + .def-block {
  margin-top: 1rem;
}
#definitionCard h4 {
  margin-bottom: 1rem;
}