:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; color: #1d3148; background: #f3f6fa; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f3f6fa; }
button, select { font: inherit; }
.viewer-topbar { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 28px; border-bottom: 1px solid #d7e0e9; background: #fff; box-shadow: 0 2px 10px #15283c08; }
.viewer-brand { display: inline-flex; align-items: center; gap: 10px; color: #173b60; text-decoration: none; }
.viewer-brand > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e8f1fb; color: #2974b5; font-size: 19px; }
.viewer-brand strong { display: grid; gap: 1px; font-size: 12px; letter-spacing: .08em; }
.viewer-brand small { color: #8b9bae; font-size: 8px; letter-spacing: .16em; }
.viewer-reference { color: #647990; font-size: 13px; font-weight: 700; }
.viewer-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e0e7ef; border-radius: 9px; background: #fff; color: #60758b; font-size: 23px; cursor: pointer; }
.viewer-close:hover { border-color: #b9cbe0; background: #f4f8fc; }
.viewer-layout { display: grid; gap: 16px; width: calc(100% - 44px); margin: 22px auto 24px; min-width:0; }
.viewer-controls-panel, .viewer-content-panel { border: 1px solid #dce5ee; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #17365408; }
.viewer-controls-panel { padding: 22px 24px 18px; }
.viewer-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.viewer-eyebrow { margin: 0 0 5px; color: #3d7cae; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.viewer-title-row h1 { margin: 0; color: #19344f; font-size: 25px; letter-spacing: -.03em; }
.viewer-subtitle { margin: 6px 0 0; color: #76889b; font-size: 12px; }
.viewer-passage-controls { display: flex; align-items: end; gap: 10px; margin: 20px 0 18px; }
.viewer-passage-controls label { display: grid; gap: 6px; color: #667b91; font-size: 11px; font-weight: 750; }
.viewer-passage-controls select { min-width: 180px; height: 40px; padding: 0 11px; border: 1px solid #d5e0ea; border-radius: 8px; outline: none; background: #fff; color: #263d55; }
.viewer-passage-controls select:focus { border-color: #5e9bd2; box-shadow: 0 0 0 3px #3d88c21b; }
.viewer-step-controls { display: flex; gap: 5px; }
.viewer-step-controls button { width: 40px; height: 40px; border: 1px solid #d5e0ea; border-radius: 8px; background: #f7f9fc; color: #41617d; font-size: 18px; cursor: pointer; }
.viewer-step-controls button:disabled { cursor: default; opacity: .4; }
.viewer-version-heading { display: flex; align-items: baseline; gap: 9px; padding-top: 15px; border-top: 1px solid #edf1f5; }
.viewer-version-heading strong { color: #354c64; font-size: 12px; }
.viewer-version-heading span { color: #8797a8; font-size: 10px; }
.viewer-version-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.viewer-version-option { display: inline-flex; align-items: center; gap: 9px; min-width: 142px; min-height: 48px; padding: 7px 11px; border: 1px solid #dce4ec; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.viewer-version-option:hover { border-color: #abc5df; }
.viewer-version-option.is-selected { border-color: #8cb6dc; background: #f0f7fd; }
.viewer-version-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.viewer-version-check { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border: 1px solid #c8d4df; border-radius: 5px; background: #fff; color: #fff; font-size: 13px; font-weight: 800; }
.viewer-version-option.is-selected .viewer-version-check { border-color: #317dbb; background: #317dbb; }
.viewer-version-option:focus-within { outline: 3px solid #317dbb30; }
.viewer-version-copy { display: grid; gap: 2px; }
.viewer-version-copy strong { color: #344c64; font-size: 12px; }
.viewer-version-copy small { color: #8796a7; font-size: 9px; }
.viewer-commentary-option.is-selected { border-color:#9d91c8; background:#f7f3ff; }
.viewer-commentary-option.is-selected .viewer-version-check { border-color:#7967ad; background:#7967ad; }
.viewer-commentary-unavailable { margin:0; color:#8796a7; font-size:12px; }
.viewer-content-panel { min-height: 360px; padding: 22px clamp(16px, 4vw, 44px) 30px; }
.viewer-status { padding: 20px; border: 1px dashed #cfdae6; border-radius: 10px; color: #72849a; text-align: center; }
.viewer-status[hidden] { display: none; }
.viewer-passage { display: grid; gap: 0; }
.viewer-verse { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid #edf1f5; }
.viewer-verse-number { padding-top: 3px; color: #3c80b7; font-size: 12px; font-weight: 800; text-align: center; }
.viewer-verse-translations { display: grid; gap: 11px; min-width: 0; }
.viewer-translation-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 12px; }
.viewer-translation-label { padding-top: 7px; color: #71849a; font-size: 10px; font-weight: 800; }
.viewer-translation-row p { margin: 0; color: #293d52; font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.viewer-translation-row.is-original p { font-size: 20px; line-height: 2; }
.viewer-translation-row p[dir="rtl"] { text-align: left; font-family: "Noto Sans Hebrew", "Ezra SIL", serif; }
.viewer-empty, .viewer-empty-state { margin: 0; padding: 16px; color: #8392a3; text-align: center; }
.viewer-dictionary-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; color:#63768a; font-size:12px; }
.viewer-dictionary-tools button { padding:10px 14px; border:1px solid #b9cee0; border-radius:9px; background:#eef6fd; color:#235783; font-weight:700; cursor:pointer; }
.bible-word { display:inline; padding:1px 2px; margin:0; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; line-height:inherit; cursor:pointer; text-decoration:underline dotted #7c9eb9; text-underline-offset:5px; }
.bible-word:hover, .bible-word.is-selected { background:#dcefff; color:#174c79; text-decoration:none; }
.bible-word:focus-visible { outline:2px solid #317dbb; outline-offset:2px; }
.dictionary-panel { position:fixed; top:82px; right:20px; bottom:22px; width:350px; padding:22px; overflow-y:auto; border:1px solid #d3e0eb; border-radius:16px; background:#fff; box-shadow:0 12px 40px #183d5920; z-index:20; box-sizing:border-box; }
.dictionary-panel[hidden] { display:none; }
.dictionary-panel header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dictionary-panel h2 { margin:0 0 12px; color:#19344f; font-size:22px; }
.dictionary-panel header button { padding:4px 10px; border:0; background:transparent; color:#63768a; font-size:26px; cursor:pointer; }
.dictionary-panel form { display:grid; gap:8px; margin:14px 0 22px; font-size:12px; color:#546c83; }
.dictionary-search-row { display:flex; gap:6px; }
.dictionary-search-row input { min-width:0; width:100%; padding:10px; border:1px solid #c8d9e7; border-radius:8px; font:inherit; }
.dictionary-search-row button { flex-shrink:0; border:0; border-radius:8px; padding:8px 12px; background:#245c8b; color:#fff; cursor:pointer; }
.dictionary-language { display:flex; gap:10px; align-items:center; }
.dictionary-language select { flex:1; padding:7px; border:1px solid #d3e0eb; border-radius:6px; background:white; color:#39556e; }
.dictionary-hint { padding:16px; margin:12px 0; border-radius:10px; background:#f1f6fa; color:#536b81; font-size:13px; line-height:1.7; }
.dictionary-word { padding-bottom:16px; border-bottom:1px solid #e2eaf2; }
.dictionary-word h2 { font-size:32px; margin:16px 0; overflow-wrap:anywhere; text-align:left; }
.dictionary-word p { color:#536b81; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.dictionary-word small { color:#688299; }
.dictionary-word details { color:#768a9b; font-size:12px; }
.dictionary-entry { padding:14px 0; border-bottom:1px solid #e2eaf2; }
.dictionary-entry h3 { font-size:17px; margin:0 0 10px; color:#245c8b; }
.dictionary-entry h3 span { font-size:11px; color:#6c8195; }
.dictionary-entry p { margin:8px 0; line-height:1.85; color:#263f55; font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; }
.dictionary-entry small, .dictionary-panel footer { color:#7b8d9c; font-size:11px; line-height:1.8; }
.dictionary-panel footer { margin-top:24px; }
.dictionary-panel footer a { color:#507c9d; }
@media (min-width:1100px) { .dictionary-open .viewer-layout { width:calc(100% - 420px); margin-left:22px; margin-right:398px; } }
@media (max-width:1099px) { .dictionary-panel { top:72px; right:12px; bottom:12px; width:min(390px, calc(100% - 24px)); box-shadow:0 10px 60px #14355250; } }
.viewer-plan-reading + .viewer-plan-reading { margin-top: 30px; padding-top: 20px; border-top: 2px solid #e9eef3; }
.viewer-plan-reading > h2 { margin: 0 0 12px; color: #244966; font-size: 18px; }
.viewer-plan-chapter + .viewer-plan-chapter { margin-top: 22px; }
.viewer-plan-chapter h3 { margin: 0; padding: 12px 0 0; color: #536f87; font-size: 13px; }
.viewer-footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 44px)); margin: 0 auto 24px; color: #8594a5; font-size: 10px; }
@media (max-width: 680px) {
  .viewer-topbar { min-height: 56px; padding: 0 13px; }
  .viewer-reference { max-width: 48vw; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-layout { width: calc(100% - 20px); margin: 12px auto; gap: 10px; }
  .viewer-controls-panel { padding: 17px 14px 13px; }
  .viewer-title-row h1 { font-size: 21px; }
  .viewer-passage-controls { gap: 7px; margin: 16px 0; }
  .viewer-passage-controls label:first-child { flex: 1; }
  .viewer-passage-controls select { min-width: 0; width: 100%; }
  .viewer-passage-controls label:nth-child(2) select { width: 82px; }
  .viewer-step-controls button { width: 35px; }
  .viewer-version-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-version-option { min-width: 0; }
  .viewer-content-panel { padding: 12px 13px 20px; }
  .viewer-verse { grid-template-columns: 24px minmax(0, 1fr); gap: 5px; padding: 12px 0; }
  .viewer-translation-row { grid-template-columns: 1fr; gap: 2px; }
  .viewer-translation-label { padding: 0; }
  .viewer-translation-row p { font-size: 16px; }
  .viewer-translation-row.is-original p { font-size: 19px; }
  .viewer-footer { width: calc(100% - 24px); }
}

/* One shared verse row keeps every translation aligned, including missing text. */
.viewer-content-panel { min-width:0; padding:20px 16px 28px; }
.viewer-passage { overflow-x:auto; }
.viewer-verse { min-width:calc(46px + var(--version-count, 1) * 220px); padding:0; gap:0; transition:background-color .12s; }
.viewer-verse-number { padding:20px 3px; }
.viewer-verse-translations { grid-template-columns:repeat(var(--version-count, 1), minmax(0, 1fr)); gap:0; }
.viewer-translation-row { display:block; padding:16px; border-left:1px solid #e3ebf3; }
.viewer-translation-label { display:block; margin-bottom:8px; padding:0; color:#426583; }
.viewer-translation-row p { font-size:16px; line-height:1.9; }
.viewer-verse:hover, .viewer-verse:focus-within { background:#eaf4ff; box-shadow:inset 3px 0 #448bc3; }
.viewer-verse:focus-visible { outline:2px solid #448bc3; outline-offset:-2px; }
.viewer-commentary { grid-column:2; margin:0 16px 16px; border:1px solid #d7e6f2; border-radius:10px; background:#f7fbff; color:#28465e; }
.viewer-commentary summary { padding:10px 14px; cursor:pointer; color:#235d89; font-size:13px; font-weight:750; }
.viewer-commentary summary small { margin-left:8px; color:#798d9e; font-size:10px; font-weight:600; }
.viewer-commentary-list { display:grid; gap:12px; padding:0 14px 14px; }
.viewer-commentary-list section { padding:13px 15px; border:1px solid #e0eaf2; border-radius:8px; background:#fff; }
.viewer-commentary-list h4 { margin:0 0 7px; color:#1c4e75; font-size:14px; }
.viewer-commentary-list p { margin:0 0 8px; white-space:pre-wrap; font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.viewer-commentary-list small { color:#72869a; font-size:11px; }
.viewer-missing { color:#8b9bad; font-size:12px; }
.dictionary-word p:has(> span) { color:#75609b; }
.dictionary-word p > span { color:#8b3a9d; font-weight:750; }
.dictionary-reading { color:#8b3a9d; font-weight:750; }
.dictionary-speech { display:grid; gap:8px; padding:14px 0; }
.dictionary-speech audio { width:100%; min-width:0; }
.dictionary-speech button { justify-self:start; border:1px solid #c8b5de; border-radius:9px; padding:9px 14px; background:#f6effc; color:#743a91; font-weight:700; cursor:pointer; }
.dictionary-speech button:focus-visible { outline:2px solid #743a91; outline-offset:3px; }
.dictionary-speech small { color:#718095; font-size:11px; line-height:1.6; }
.dictionary-speech-status { margin:0; color:#694481; font-size:12px; line-height:1.7; }
.english-word { cursor:pointer; border-radius:3px; border:0; background:transparent; color:inherit; font:inherit; line-height:inherit; padding:0; margin:0; }
.english-word:hover, .english-word:focus { color:#175184; background:#cfe7ff; outline:none; text-decoration:underline dotted; text-underline-offset:4px; }
.english-word:focus-visible { outline:2px solid #317dbb; outline-offset:2px; }
.english-tooltip { position:fixed; z-index:100; width:max-content; max-width:min(340px,calc(100vw - 16px)); max-height:min(330px,calc(100vh - 16px)); overflow:auto; padding:14px 17px; border:1px solid #c8dcec; border-radius:12px; background:#fff; color:#203d58; box-shadow:0 8px 30px #133b6533; font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.english-tooltip[hidden] { display:none; }
.english-tooltip > strong { display:block; font-size:17px; color:#1e5a88; }
.english-tooltip p { margin:7px 0; }
.english-tooltip em { color:#6e518c; font-style:normal; font-size:11px; }
.english-tooltip small { display:block; color:#718297; font-size:11px; }
.english-tooltip a { display:block; margin-top:8px; color:#527d9d; font-size:10px; }
.viewer-footer a { color:#527d9d; }
.hebrew-tooltip { direction:ltr; text-align:left; }
.hebrew-tooltip > strong { font-size:23px; text-align:left; }
.hebrew-tooltip .tooltip-pronunciation { color:#8b3a9d; }

/* Independent service status and search controls around the original Studio viewer. */
.viewer-service-panel, .viewer-search-panel { border:1px solid #dce5ee; border-radius:16px; background:#fff; padding:20px 24px; }
.viewer-service-panel { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
.viewer-service-panel strong { color:#354c64; font-size:12px; }
.viewer-service-panel p { margin:7px 0 0; color:#63768a; font-size:13px; line-height:1.7; }
.viewer-service-panel .viewer-service-note { grid-column:1 / -1; margin:0; border-top:1px solid #edf1f5; padding-top:12px; font-size:12px; }
.viewer-auth-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.viewer-auth-actions form { margin:0; }
.viewer-auth-actions button { min-height:40px; border:1px solid #b9cee0; border-radius:8px; padding:8px 14px; background:#eef6fd; color:#235783; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.viewer-auth-actions button:disabled { opacity:.55; cursor:default; }
.viewer-auth-actions [hidden] { display:none !important; }
.viewer-search-form { display:grid; gap:8px; color:#354c64; font-size:12px; font-weight:700; }
.viewer-search-controls { display:flex; gap:8px; }
.viewer-search-controls input, .viewer-search-controls select, .viewer-search-controls button { min-height:42px; border:1px solid #c8d9e7; border-radius:8px; padding:8px 12px; font:inherit; }
.viewer-search-controls input { flex:1; min-width:0; }
.viewer-search-controls button { background:#245c8b; color:#fff; cursor:pointer; }
.viewer-search-controls :disabled { cursor:default; opacity:.55; }
.viewer-search-status { margin:12px 0 0; color:#63768a; font-size:13px; line-height:1.7; }
.viewer-search-results article { padding:15px 0; border-top:1px solid #e2eaf2; color:#245c8b; }
.viewer-search-results article:first-child { margin-top:14px; }
.viewer-search-results p { margin:7px 0 0; color:#263f55; font-size:14px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:680px) {
  .viewer-service-panel, .viewer-search-panel { padding:17px 14px; }
  .viewer-service-panel { grid-template-columns:1fr; gap:12px; }
  .viewer-search-controls { flex-wrap:wrap; }
  .viewer-search-controls input { flex-basis:100%; }
  .viewer-brand strong { font-size:10px; }
}