:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --surface: #fdfcf8;
  --surface-soft: #f2f0e8;
  --ink: #243b35;
  --ink-soft: #52645c;
  --muted: #879089;
  --line: #e6e1d6;
  --line-strong: #d8d1c2;
  --moss: #567563;
  --moss-dark: #3d5b4b;
  --moss-wash: #e6ede6;
  --gold: #b58146;
  --gold-wash: #f4eadc;
  --rose: #ab6e68;
  --rose-wash: #f3e5e1;
  --shadow: 0 calc(20px * var(--ui-scale)) calc(60px * var(--ui-scale)) rgba(40, 51, 43, .12);
  --reader-size: 19px;
  --note-size: 13px;
  --ui-device-scale: 1;
  --ui-scale: calc(var(--ui-preset-scale, 1) * var(--ui-device-scale, 1));
  font-family: "DM Sans", "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--paper); }
body { color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: calc(3px * var(--ui-scale)) solid rgba(86, 117, 99, .3); outline-offset: calc(2px * var(--ui-scale));
}
button:disabled { cursor: default; opacity: .45; }
.app-shell { min-height: 100dvh; --paper: var(--reading-background, #f7f5ef); --reader-ink: var(--reading-foreground, #344a41); --ui-scale: calc(var(--ui-preset-scale, 1) * var(--ui-device-scale, 1)); --verse-number-width: calc(26px * var(--ui-scale)); --verse-gap: calc(10px * var(--ui-scale)); }
.loading-screen { min-height: 100dvh; display: grid; place-content: center; gap: calc(14px * var(--ui-scale)); justify-items: center; color: var(--ink-soft); }
.loading-mark { width: calc(54px * var(--ui-scale)); height: calc(54px * var(--ui-scale)); display: grid; place-items: center; border-radius: calc(18px * var(--ui-scale)); background: var(--ink); color: #e6c48f; font-size: calc(var(--ui-scale, 1) * 25px); }
.loading-screen p { margin: 0; font-size: calc(var(--ui-scale, 1) * 14px); }
.app-frame { min-height: 100dvh; display: grid; grid-template-columns: calc(232px * var(--ui-scale)) minmax(0, 1fr); background: var(--paper); }

/* Navigation */
.sidebar { position: sticky; top: 0; height: 100dvh; padding: calc(27px * var(--ui-scale)) calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale)); display: flex; flex-direction: column; background: #f2f0e9; border-right: calc(1px * var(--ui-scale)) solid rgba(216, 209, 194, .62); z-index: 5; }
.sidebar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(6px * var(--ui-scale)); padding: 0 0 calc(29px * var(--ui-scale)); }
.brand { min-width: 0; display: flex; align-items: center; gap: calc(12px * var(--ui-scale)); padding: 0 calc(4px * var(--ui-scale)) 0 calc(11px * var(--ui-scale)); text-decoration: none; color: var(--ink); }
.brand-mark { width: calc(42px * var(--ui-scale)); height: calc(42px * var(--ui-scale)); display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: calc(14px * var(--ui-scale)); background: var(--ink); color: #e7c78f; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-copy { min-width: 0; display: grid; align-content: center; }
.brand-name { font-family: "Literata", Georgia, serif; font-size: calc(var(--ui-scale, 1) * 19px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.brand-tagline { margin-top: calc(4px * var(--ui-scale)); color: #859087; font-size: calc(var(--ui-scale, 1) * 9px); font-weight: 700; letter-spacing: .08em; }
.brand-slogan { margin-top: calc(4px * var(--ui-scale)); color: var(--ink-soft); font-size: calc(var(--ui-scale, 1) * 10px); line-height: 1.35; white-space: nowrap; }
.sidebar-collapse { width: calc(32px * var(--ui-scale)); height: calc(32px * var(--ui-scale)); flex: 0 0 auto; display: grid; place-items: center; border: calc(1px * var(--ui-scale)) solid transparent; border-radius: calc(10px * var(--ui-scale)); background: transparent; color: #738078; }
.sidebar-collapse:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.sidebar-collapse svg { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); transition: transform .18s ease; }
.nav-caption { padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(9px * var(--ui-scale)); color: #99a098; font-size: calc(var(--ui-scale, 1) * 9px); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.side-nav { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: calc(4px * var(--ui-scale)); }
.nav-item { min-height: calc(43px * var(--ui-scale)); display: flex; align-items: center; gap: calc(12px * var(--ui-scale)); padding: 0 calc(12px * var(--ui-scale)); border: 0; border-radius: calc(12px * var(--ui-scale)); background: transparent; color: #68756d; text-align: left; font-size: calc(var(--ui-scale, 1) * 13px); font-weight: 500; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item svg { width: calc(17px * var(--ui-scale)); height: calc(17px * var(--ui-scale)); flex: 0 0 auto; stroke-width: 1.7; }
.nav-item:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.nav-item.is-active { background: #e4ebe2; color: #314e40; font-weight: 700; }
.nav-item.is-active svg { color: var(--moss-dark); }
.nav-theme-toggle { margin-top: calc(4px * var(--ui-scale)); border-top: 0; border-radius: 0; padding-top: calc(8px * var(--ui-scale)); }
.nav-feedback { margin-top: auto; border-top: calc(1px * var(--ui-scale)) solid var(--line); border-radius: 0; padding-top: calc(8px * var(--ui-scale)); }
.sidebar-reading-tools { margin-top: calc(10px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)) calc(4px * var(--ui-scale)) calc(3px * var(--ui-scale)); border-top: calc(1px * var(--ui-scale)) solid var(--line); }
.reading-tool-row { min-height: calc(31px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(4px * var(--ui-scale)); color: #748078; font-size: calc(var(--ui-scale) * 10px); }
.reading-tool-label { min-width: calc(34px * var(--ui-scale)); }
.reading-tool-button { width: calc(24px * var(--ui-scale)); height: calc(24px * var(--ui-scale)); padding: 0; border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(7px * var(--ui-scale)); background: var(--surface); color: var(--ink-soft); font-size: calc(var(--ui-scale) * 13px); }
.reading-tool-value { min-width: calc(20px * var(--ui-scale)); text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.reading-tools-compact { display: none; width: calc(40px * var(--ui-scale)); height: calc(40px * var(--ui-scale)); place-items: center; margin: 0 auto; border: 0; border-radius: calc(11px * var(--ui-scale)); background: transparent; color: #738078; }
.reading-tools-compact svg { width: calc(18px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); }
.side-spacer { flex: 1; }
.sidebar-credit { padding: 0 calc(10px * var(--ui-scale)); color: #9ca39a; font-size: calc(var(--ui-scale, 1) * 10px); line-height: 1.6; }

/* Main workspace */
.workspace { min-width: 0; min-height: 100dvh; }
.icon-button { width: calc(38px * var(--ui-scale)); height: calc(38px * var(--ui-scale)); display: grid; place-items: center; border: calc(1px * var(--ui-scale)) solid transparent; border-radius: calc(12px * var(--ui-scale)); background: transparent; color: #738078; }
.icon-button:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.icon-button svg { width: calc(18px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); }
.content-wrap { width: min(100%, calc(1600px * var(--ui-scale))); margin: 0 auto; padding: calc(31px * var(--ui-scale)) clamp(calc(20px * var(--ui-scale)), 3.2vw, calc(50px * var(--ui-scale))) calc(52px * var(--ui-scale)); }
.page-kicker { display: flex; align-items: center; gap: calc(8px * var(--ui-scale)); color: #9b8060; font-size: calc(var(--ui-scale, 1) * 9px); font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.page-kicker::before { content: ""; width: calc(17px * var(--ui-scale)); height: calc(1px * var(--ui-scale)); background: #c8a16d; }
.button { min-height: calc(39px * var(--ui-scale)); display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--ui-scale)); padding: 0 calc(13px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(11px * var(--ui-scale)); background: var(--surface); color: #5b6c62; font-size: calc(var(--ui-scale, 1) * 12px); font-weight: 600; white-space: nowrap; transition: .16s ease; }
.button:hover { border-color: #c9d5c9; background: #f6f8f3; color: #324e3f; }
.button svg { width: calc(15px * var(--ui-scale)); height: calc(15px * var(--ui-scale)); }
.button-primary { border-color: var(--moss); background: var(--moss); color: #fff; }
.button-primary:hover { border-color: var(--moss-dark); background: var(--moss-dark); color: #fff; }
.button-quiet { border-color: transparent; background: transparent; }
.button-quiet:hover { background: var(--surface-soft); }
.button-danger { border-color: var(--rose); background: var(--surface); color: var(--rose); }
.button-danger:hover { border-color: var(--rose); background: var(--rose-wash); color: var(--rose); }
.chapter-controls { display: flex; align-items: center; gap: calc(8px * var(--ui-scale)); margin-bottom: calc(16px * var(--ui-scale)); }
.reference-select { display: inline-flex; align-items: center; gap: calc(9px * var(--ui-scale)); min-height: calc(38px * var(--ui-scale)); padding: 0 calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(11px * var(--ui-scale)); background: var(--surface); color: var(--ink); font-size: calc(var(--ui-scale, 1) * 12px); font-weight: 600; }
.reference-select:hover { border-color: #c9d5c9; background: #fff; }
.reference-select svg { width: calc(14px * var(--ui-scale)); height: calc(14px * var(--ui-scale)); color: #8b968c; }
.chapter-step { width: calc(38px * var(--ui-scale)); min-width: calc(38px * var(--ui-scale)); padding: 0; }
.chapter-step svg { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); }
.chapter-controls-spacer { flex: 1; }
.segmented-control { display: inline-flex; align-items: center; padding: calc(3px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(11px * var(--ui-scale)); background: #f1efe8; }
.segmented-control button { min-height: calc(29px * var(--ui-scale)); padding: 0 calc(10px * var(--ui-scale)); border: 0; border-radius: calc(8px * var(--ui-scale)); background: transparent; color: #849087; font-size: calc(var(--ui-scale, 1) * 10px); font-weight: 700; }
.segmented-control button.is-active { background: var(--surface); box-shadow: 0 calc(1px * var(--ui-scale)) calc(4px * var(--ui-scale)) rgba(40,50,40,.09); color: #3d5949; }

/* Reader */
.reader-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--ui-scale)); align-items: stretch; }
.reader-columns.is-single { grid-template-columns: minmax(0, 1fr); }
.reader-columns.is-aligned { row-gap: calc(12px * var(--ui-scale)); }
.reader-columns.is-independent .reader-column { min-height: 0; display: flex; flex-direction: column; }
.reader-columns.is-independent .translation-panel { height: calc(100dvh - calc(150px * var(--ui-scale))); min-height: calc(300px * var(--ui-scale)); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.reader-columns.is-independent .translation-panel { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.reader-columns.is-independent .translation-panel::-webkit-scrollbar { width: calc(8px * var(--ui-scale)); }
.reader-columns.is-independent .translation-panel::-webkit-scrollbar-track { background: transparent; }
.reader-columns.is-independent .translation-panel::-webkit-scrollbar-thumb { border: calc(2px * var(--ui-scale)) solid var(--surface); border-radius: calc(99px * var(--ui-scale)); background: var(--line-strong); }
.reader-columns.is-independent .translation-head { position: sticky; top: calc(-1px * var(--ui-scale)); z-index: 2; background: var(--surface); }
.reader-column { min-width: 0; }
.reader-column .chapter-controls { margin-bottom: calc(10px * var(--ui-scale)); }
.reader-columns.is-aligned .reader-column .chapter-controls { margin-bottom: 0; }
.translation-panel { min-width: 0; overflow: hidden; border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(18px * var(--ui-scale)); background: var(--surface); box-shadow: 0 calc(3px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(46, 57, 48, .025); }
.aligned-reader { grid-column: 1 / -1; min-width: 0; overflow: hidden; border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(18px * var(--ui-scale)); background: var(--surface); box-shadow: 0 calc(3px * var(--ui-scale)) calc(12px * var(--ui-scale)) rgba(46, 57, 48, .025); }
.aligned-reader-heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aligned-reader-head { min-width: 0; overflow: hidden; }
.aligned-reader-head + .aligned-reader-head { border-left: calc(1px * var(--ui-scale)) solid var(--line); }
.aligned-verse-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: calc(5px * var(--ui-scale)) calc(17px * var(--ui-scale)) calc(21px * var(--ui-scale)); }
.aligned-verse-group { --verse-copy-offset: calc(var(--verse-number-width) + var(--verse-gap)); grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: calc(1px * var(--ui-scale)) solid var(--line); }
.aligned-verse-group.is-selecting { --verse-copy-offset: calc(var(--verse-number-width) + calc(35px * var(--ui-scale))); }
.aligned-source-headings { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: calc(8px * var(--ui-scale)) 0 calc(2px * var(--ui-scale)); }
.aligned-source-headings > div { min-width: 0; padding: 0 calc(12px * var(--ui-scale)); }
.aligned-source-headings > div + div { border-left: calc(1px * var(--ui-scale)) solid var(--line); }
.aligned-verse-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.aligned-verse-pair .verse-row { min-width: 0; border-bottom: 0; }
.aligned-verse-pair .verse-row:first-child { padding-right: calc(12px * var(--ui-scale)); }
.aligned-verse-pair .verse-row + .verse-row { border-left: calc(1px * var(--ui-scale)) solid var(--line); padding-left: calc(12px * var(--ui-scale)); }
.aligned-verse-pair .verse-row.is-selected { margin: calc(2px * var(--ui-scale)) calc(4px * var(--ui-scale)); padding: calc(12px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(11px * var(--ui-scale)) calc(8px * var(--ui-scale)); }
.aligned-verse-group > .inline-note-editor { grid-column: 1 / -1; }
.translation-head { min-height: calc(61px * var(--ui-scale)); padding: calc(12px * var(--ui-scale)) calc(17px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-scale)); border-bottom: calc(1px * var(--ui-scale)) solid #eeeae1; }
.translation-identity { min-width: 0; display: flex; align-items: center; gap: calc(11px * var(--ui-scale)); }
.translation-monogram { width: calc(34px * var(--ui-scale)); height: calc(34px * var(--ui-scale)); display: grid; place-items: center; flex: 0 0 auto; border: calc(1px * var(--ui-scale)) solid #e6e1d5; border-radius: calc(11px * var(--ui-scale)); background: #f6f3eb; color: #94744e; font-family: "Literata", Georgia, serif; font-size: calc(var(--ui-scale, 1) * 11px); font-weight: 600; }
.translation-name { overflow: hidden; color: #364b41; font-size: calc(var(--ui-scale, 1) * 12px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.translation-actions { display: flex; align-items: center; gap: calc(4px * var(--ui-scale)); }
.small-icon-button { width: calc(31px * var(--ui-scale)); height: calc(31px * var(--ui-scale)); display: grid; place-items: center; border: 0; border-radius: calc(9px * var(--ui-scale)); background: transparent; color: #8b958d; }
.small-icon-button:hover { background: #f2f1eb; color: #44634f; }
.small-icon-button svg { width: calc(15px * var(--ui-scale)); height: calc(15px * var(--ui-scale)); }
.verse-list { padding: calc(5px * var(--ui-scale)) calc(17px * var(--ui-scale)) calc(21px * var(--ui-scale)); }
.source-heading { margin: calc(13px * var(--ui-scale)) 0 calc(6px * var(--ui-scale)); color: var(--ink-soft); font-size: calc(var(--reader-size) * .78); font-weight: 600; line-height: 1.35; }
.source-heading:first-child { margin-top: calc(6px * var(--ui-scale)); }
.source-heading.is-section { margin-top: calc(16px * var(--ui-scale)); color: var(--moss-dark); font-size: calc(var(--reader-size) * .88); font-weight: 700; }
.source-heading.is-major { margin-top: calc(20px * var(--ui-scale)); color: var(--ink); font-size: calc(var(--reader-size) * 1.02); font-weight: 750; }
.source-heading.is-description { margin: calc(2px * var(--ui-scale)) 0 calc(9px * var(--ui-scale)); color: var(--ink); font-style: normal; font-size: calc(var(--reader-size) * .9); font-weight: 650; }
.source-heading.is-speaker { margin: calc(3px * var(--ui-scale)) 0 calc(2px * var(--ui-scale)); color: var(--muted); font-size: calc(var(--reader-size) * .72); line-height: 1.2; }
.source-heading.is-references { margin: calc(1px * var(--ui-scale)) 0 calc(7px * var(--ui-scale)); color: var(--muted); font-size: calc(var(--reader-size) * .7); font-weight: 400; line-height: 1.25; }
.source-heading.is-section + .source-heading.is-references, .source-heading.is-major + .source-heading.is-references { margin-top: calc(-3px * var(--ui-scale)); }
.source-reference-link { display: inline; margin: 0; padding: 0; border: 0; background: transparent; color: #397db5; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; cursor: pointer; }
.source-reference-link:hover { color: #225e91; }
.theme-night .source-reference-link { color: #91c5ee; }
.source-name-mark { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.source-added-mark { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--muted); text-underline-offset: .12em; }
.verse-row { position: relative; display: grid; grid-template-columns: var(--verse-number-width) minmax(0,1fr); gap: var(--verse-gap); padding: calc(12px * var(--ui-scale)) 0 calc(11px * var(--ui-scale)); border-bottom: calc(1px * var(--ui-scale)) solid var(--line); transition: background .15s ease; }
.verse-row.is-selecting { grid-template-columns: calc(19px * var(--ui-scale)) var(--verse-number-width) minmax(0,1fr); gap: calc(8px * var(--ui-scale)); }
.verse-row:last-child { border-bottom: 0; }
.verse-row.is-selected { margin: calc(2px * var(--ui-scale)) calc(-8px * var(--ui-scale)); padding: calc(12px * var(--ui-scale)) calc(8px * var(--ui-scale)) calc(11px * var(--ui-scale)); border-radius: calc(12px * var(--ui-scale)); border-color: transparent; background: #f4f6f0; }
.verse-row.is-bookmarked .verse-number { color: #a27643; }
.verse-number { width: calc(24px * var(--ui-scale)); align-self: start; margin-top: calc((var(--reader-size) * 1.78 - 1.2em) / 2); padding: 0; border: 0; background: transparent; color: #a8a69e; font-family: "Literata", Georgia, serif; font-size: calc(var(--ui-scale) * 11px); font-weight: 600; line-height: 1.2; text-align: center; }
.verse-row[data-language="en"] .verse-number { margin-top: calc(((var(--reader-size) - 2px) * 1.72 - 1.2em) / 2); }
.verse-select-checkbox, .paragraph-select-checkbox { width: calc(18px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); display: inline-grid; place-items: center; padding: 0; border: calc(1px * var(--ui-scale)) solid #aeb9ad; border-radius: calc(5px * var(--ui-scale)); background: var(--surface); color: #fff; vertical-align: middle; }
.verse-select-checkbox.is-checked, .paragraph-select-checkbox.is-checked { border-color: var(--moss); background: var(--moss); }
.verse-select-checkbox svg, .paragraph-select-checkbox svg { width: calc(13px * var(--ui-scale)); height: calc(13px * var(--ui-scale)); }
.verse-copy { min-width: 0; }
.verse-row > .verse-copy { grid-column: 2 / -1; }
.verse-row.is-selecting > .verse-copy { grid-column: 3 / -1; }
.verse-text { margin: 0; color: var(--reader-ink); font-family: "Literata", "Noto Serif TC", Georgia, "Songti TC", serif; font-size: var(--reader-size); font-weight: 400; line-height: 1.78; letter-spacing: -.025em; overflow-wrap: anywhere; touch-action: pan-y; -webkit-touch-callout: none; }
.verse-row > .verse-list-flow { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, var(--verse-copy-offset)) minmax(0, 1fr); row-gap: calc(2px * var(--ui-scale)); min-width: 0; margin-top: calc(3px * var(--ui-scale)); color: var(--reader-ink); font-family: "Literata", "Noto Serif TC", Georgia, "Songti TC", serif; font-size: var(--reader-size); line-height: 1.5; overflow-wrap: anywhere; }
.verse-list-flow > .verse-interstitial-text { grid-column: 2; min-width: 0; }
.verse-list-flow > .verse-interstitial-text.is-poetry { padding-left: 1.1em; }
.verse-list-flow > .verse-interstitial-text.is-indented { padding-left: 1.5em; }
.verse-list-flow .verse-interstitial-line { display: inline; }
.verse-list-flow > .source-heading { grid-column: 1 / -1; width: auto; max-width: 100%; margin: calc(3px * var(--ui-scale)) 0 calc(2px * var(--ui-scale)); overflow-wrap: anywhere; }
.verse-list-flow > .source-heading.is-speaker { font-size: calc(var(--reader-size) * .72); line-height: 1.2; }
.verse-list-stanza-gap { grid-column: 2; height: calc(8px * var(--ui-scale)); }
.verse-row > .verse-notes, .verse-row > .verse-actions { grid-column: 2 / -1; min-width: 0; }
.verse-row.is-selecting > .verse-notes, .verse-row.is-selecting > .verse-actions { grid-column: 3 / -1; }
.translation-panel[data-language="en"] .verse-text, .verse-row[data-language="en"] .verse-text { font-size: calc(var(--reader-size) - 2px); line-height: 1.72; letter-spacing: -.018em; }
.verse-text mark, .search-snippet mark { padding: 0 .05em; border-radius: calc(3px * var(--ui-scale)); background: #f5e4b8; color: inherit; }
.source-note-marker { display: inline; margin: 0 .08em; padding: 0 .12em; border: 0; border-radius: calc(3px * var(--ui-scale)); background: transparent; color: var(--moss-dark); font: inherit; font-size: .62em; font-weight: 700; line-height: 1; vertical-align: super; text-decoration: underline dotted; text-underline-offset: .12em; }
.source-note-marker:hover, .source-note-marker[aria-expanded="true"] { background: var(--moss-wash); }
.source-note-marker.is-crossref { color: var(--gold); }
.source-note-inline { display: inline; padding: 0 .14em; border-radius: calc(3px * var(--ui-scale)); background: var(--surface-soft); color: var(--ink-soft); font-size: .78em; line-height: inherit; overflow-wrap: anywhere; }
.source-note-details { min-width: 0; display: flex; align-items: flex-start; gap: calc(10px * var(--ui-scale)); margin: calc(6px * var(--ui-scale)) 0 calc(8px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale)); border-left: calc(2px * var(--ui-scale)) solid var(--moss); border-radius: 0 calc(7px * var(--ui-scale)) calc(7px * var(--ui-scale)) 0; background: var(--surface-soft); color: var(--ink-soft); font-size: calc(var(--reader-size) * .72); line-height: 1.5; overflow-wrap: anywhere; }
.source-note-details.is-crossref { border-left-color: var(--gold); }
.source-note-copy { min-width: 0; flex: 1 1 auto; }
.source-note-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(5px * var(--ui-scale)); color: var(--moss-dark); font-family: inherit; font-size: .88em; }
.source-note-heading strong { font-weight: 700; }
.source-note-reference { color: var(--muted); }
.source-note-copy p { margin: calc(3px * var(--ui-scale)) 0 0; color: inherit; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.source-note-dismiss { flex: 0 0 auto; padding: calc(3px * var(--ui-scale)) calc(6px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(5px * var(--ui-scale)); background: var(--surface); color: var(--ink-soft); font-size: calc(var(--ui-scale) * 10px); }
.source-note-dismiss:hover { border-color: var(--line-strong); color: var(--ink); }
.note-color-sand { --note-bg: #faf3e4; --note-fg: #705a39; --note-edge: #bf985d; --note-chip: #d6b477; }
.note-color-blue { --note-bg: #e8f1f6; --note-fg: #3e5c70; --note-edge: #719bb4; --note-chip: #82b0c9; }
.note-color-green { --note-bg: #eaf1e6; --note-fg: #456248; --note-edge: #7c9c76; --note-chip: #8dac83; }
.note-color-rose { --note-bg: #f8eae7; --note-fg: #744b48; --note-edge: #bf817b; --note-chip: #d4958e; }
.note-color-purple { --note-bg: #f0ebf6; --note-fg: #5e4f70; --note-edge: #9582ad; --note-chip: #a997c0; }
.verse-notes { min-width: 0; display: grid; gap: calc(5px * var(--ui-scale)); margin-top: calc(8px * var(--ui-scale)); max-height: clamp(6.5rem, 20vh, 11rem); overflow: hidden; }
.verse-notes.is-expanded { max-height: none; overflow: visible; }
.aligned-verse-group > .verse-notes { grid-column: 1 / -1; width: calc(100% - var(--verse-copy-offset)); margin: calc(8px * var(--ui-scale)) 0 0 var(--verse-copy-offset); }
.inline-note { width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale)); display: flex; align-items: flex-start; gap: calc(7px * var(--ui-scale)); overflow: hidden; border-left: calc(2px * var(--ui-scale)) solid var(--note-edge); border-radius: 0 calc(8px * var(--ui-scale)) calc(8px * var(--ui-scale)) 0; background: var(--note-bg); color: var(--note-fg); font-size: var(--note-font-size, var(--note-size)); line-height: 1.55; white-space: normal; }
.inline-note-text { min-width: 0; flex: 1 1 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.inline-note.is-expanded .inline-note-text { display: block; overflow: visible; white-space: pre-wrap; }
.inline-note-emoji { flex: 0 0 auto; margin-top: calc(2px * var(--ui-scale)); font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: calc(14px * var(--ui-scale)); line-height: 1; }
.verse-notes-more { width: 100%; min-width: 0; padding: calc(5px * var(--ui-scale)) calc(8px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) dashed var(--note-edge); border-radius: calc(7px * var(--ui-scale)); background: transparent; color: var(--note-fg); text-align: left; font-size: calc(var(--ui-scale) * 10px); }
.verse-notes-more:hover { background: var(--note-bg); }
.inline-note-actions { display: none; flex: 0 0 auto; align-items: center; gap: calc(2px * var(--ui-scale)); margin-left: auto; }
.inline-note.is-expanded .inline-note-actions { display: flex; }
.inline-note-actions button { width: calc(24px * var(--ui-scale)); height: calc(24px * var(--ui-scale)); display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: calc(6px * var(--ui-scale)); background: transparent; color: var(--note-fg); font-size: calc(var(--ui-scale) * 12px); }
.inline-note-actions button:hover { background: rgba(0,0,0,.07); }
.inline-note-actions svg { width: calc(13px * var(--ui-scale)); height: calc(13px * var(--ui-scale)); margin: 0; }
.inline-note-editor { margin: calc(10px * var(--ui-scale)) 0; padding: calc(11px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--note-edge); border-left-width: calc(3px * var(--ui-scale)); border-radius: calc(10px * var(--ui-scale)); background: var(--note-bg); color: var(--note-fg); }
.inline-note-editor .note-editor-heading { margin-bottom: calc(7px * var(--ui-scale)); font-size: calc(var(--ui-scale, 1) * 11px); font-weight: 700; }
.note-editor-field { width: 100%; min-height: calc(112px * var(--ui-scale)); resize: vertical; padding: calc(10px * var(--ui-scale)) calc(11px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(9px * var(--ui-scale)); background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--note-size); line-height: 1.6; }
.note-editor-footer { margin-top: calc(9px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--ui-scale)); }
.note-editor-options { min-width: 0; display: grid; gap: calc(8px * var(--ui-scale)); }
.note-color-picker, .note-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(6px * var(--ui-scale)); }
.note-icon-picker { min-width: 0; display: grid; grid-template-columns: calc(36px * var(--ui-scale)) minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: calc(8px * var(--ui-scale)); row-gap: calc(3px * var(--ui-scale)); }
.note-icon-preview { width: calc(36px * var(--ui-scale)); height: calc(36px * var(--ui-scale)); grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(9px * var(--ui-scale)); background: var(--surface); color: var(--note-fg); font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: calc(21px * var(--ui-scale)); line-height: 1; }
.note-icon-entry { min-width: 0; grid-column: 2; display: grid; gap: calc(3px * var(--ui-scale)); color: var(--note-fg); font-size: calc(var(--ui-scale) * 10px); font-weight: 600; }
.note-icon-input { width: min(100%, calc(132px * var(--ui-scale))); min-width: 0; min-height: calc(34px * var(--ui-scale)); padding: 0 calc(7px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(8px * var(--ui-scale)); background: var(--surface); color: var(--ink); font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: calc(21px * var(--ui-scale)); line-height: 1; text-align: center; }
.note-icon-help { grid-column: 2; color: var(--muted); font-size: calc(var(--ui-scale) * 9px); line-height: 1.3; }
.note-color-choice { width: calc(24px * var(--ui-scale)); height: calc(24px * var(--ui-scale)); padding: 0; border: calc(2px * var(--ui-scale)) solid var(--surface); border-radius: 50%; background: var(--note-chip); box-shadow: 0 0 0 calc(1px * var(--ui-scale)) var(--line); }
.note-color-choice.is-active { box-shadow: 0 0 0 calc(2px * var(--ui-scale)) var(--note-edge); }
.copy-feedback { color: var(--moss-dark); font-size: calc(var(--ui-scale, 1) * 10px); font-weight: 700; white-space: nowrap; }
.paragraph-flow { padding: calc(20px * var(--ui-scale)) calc(25px * var(--ui-scale)) calc(30px * var(--ui-scale)); }
.paragraph-passage { margin: 0 0 1.55em; color: var(--reader-ink); font-family: "Literata", "Noto Serif TC", Georgia, "Songti TC", serif; font-size: var(--reader-size); line-height: 1.56; letter-spacing: -.02em; text-indent: 2em; }
.paragraph-passage:last-child { margin-bottom: 0; }
.paragraph-passage.is-poetry, .paragraph-passage.is-indented, .paragraph-passage.is-flush { text-indent: 0; }
.paragraph-passage.is-poetry > .paragraph-verse { display: block; margin: 0; padding-left: .65em; text-indent: -.65em; }
.paragraph-passage.is-poetry.is-stanza-start { margin-top: .8em; }
.paragraph-flow > .source-heading { margin-top: 1.5em; margin-bottom: .45em; }
.paragraph-flow > .source-heading.is-speaker { margin: .2em 0 .08em; line-height: 1.2; }
.paragraph-flow > .source-heading.is-references { margin: .12em 0 .35em; }
.paragraph-flow > .source-heading:first-child { margin-top: 0; }
.verse-interstitial { margin-top: calc(5px * var(--ui-scale)); color: var(--reader-ink); font-family: "Literata", "Noto Serif TC", Georgia, "Songti TC", serif; font-size: var(--reader-size); line-height: 1.5; }
.verse-interstitial-line { display: block; overflow-wrap: anywhere; }
.verse-interstitial.is-poetry .verse-interstitial-line { padding-left: 1.1em; }
.verse-interstitial.is-indented .verse-interstitial-line { padding-left: 1.5em; }
.verse-interstitial.is-stanza-start { margin-top: calc(13px * var(--ui-scale)); }
.paragraph-passage > .source-note-details { text-indent: 0; font-family: inherit; }
.paragraph-verse { border-radius: calc(4px * var(--ui-scale)); touch-action: pan-y; -webkit-touch-callout: none; }
.paragraph-verse.is-selected { background: var(--moss-wash); }
.paragraph-verse sup { margin-right: .2em; color: #9da79e; font-size: .62em; font-weight: 600; vertical-align: super; }
.source-note-verse-number { margin-right: .2em; color: #a8a69e; font-family: "Literata", Georgia, serif; font-size: calc(var(--ui-scale) * 11px); font-weight: 600; line-height: 1.2; vertical-align: super; }
.paragraph-flow .source-note-verse-number { color: #9da79e; font-family: inherit; font-size: calc(var(--reader-size) * .62); line-height: inherit; }
.paragraph-select-checkbox { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); margin-right: .2em; }
.selection-toolbar { position: fixed; z-index: 30; top: max(calc(10px * var(--ui-scale)), env(safe-area-inset-top)); right: max(calc(12px * var(--ui-scale)), env(safe-area-inset-right)); max-width: min(92vw, calc(390px * var(--ui-scale))); display: flex; align-items: center; justify-content: flex-end; gap: calc(10px * var(--ui-scale)); padding: calc(7px * var(--ui-scale)) calc(9px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line-strong); border-radius: calc(12px * var(--ui-scale)); background: var(--surface); box-shadow: 0 calc(5px * var(--ui-scale)) calc(20px * var(--ui-scale)) rgba(0,0,0,.16); color: var(--ink-soft); font-size: calc(var(--ui-scale) * 12px); }
.selection-toolbar .button { min-height: calc(34px * var(--ui-scale)); border-color: var(--moss); background: var(--moss); color: var(--accent-text, #fff); }
.selection-toolbar .button:hover { border-color: var(--moss-dark); background: var(--moss-dark); color: var(--accent-text, #fff); }
.selection-toolbar .selection-return { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }
.selection-toolbar .selection-return:hover { border-color: var(--moss); background: var(--moss-wash); color: var(--ink); }
.source-heading { text-align: left; }
.study-item[class*="note-color-"] { background: var(--note-bg); }
.verse-actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(4px * var(--ui-scale)); margin-top: calc(8px * var(--ui-scale)); }
.verse-action { min-height: calc(28px * var(--ui-scale)); display: inline-flex; align-items: center; gap: calc(5px * var(--ui-scale)); padding: 0 calc(8px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid #e2e7dd; border-radius: calc(8px * var(--ui-scale)); background: #fbfcf8; color: #64786b; font-size: calc(var(--ui-scale, 1) * 10px); font-weight: 600; }
.verse-action:hover, .verse-action.is-active { border-color: #cbd9cc; background: #edf3eb; color: #3d5c49; }
.verse-action svg { width: calc(13px * var(--ui-scale)); height: calc(13px * var(--ui-scale)); }
.reader-footer { padding: calc(14px * var(--ui-scale)) calc(3px * var(--ui-scale)) 0; display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-scale)); color: #a0a59d; font-size: calc(var(--ui-scale, 1) * 10px); }
.reader-footer a { color: #68806f; text-decoration: none; }
.reader-footer a:hover { text-decoration: underline; }
.empty-reader { padding: calc(60px * var(--ui-scale)) calc(24px * var(--ui-scale)); color: #8d978e; text-align: center; }

/* Other screens */
.screen-heading { margin: calc(4px * var(--ui-scale)) 0 calc(22px * var(--ui-scale)); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(20px * var(--ui-scale)); }
.screen-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: calc(8px * var(--ui-scale)); }
.screen-title { margin: calc(9px * var(--ui-scale)) 0 0; font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: calc(var(--ui-scale, 1) * clamp(30px, 3vw, 40px)); font-weight: 500; letter-spacing: -.05em; }
.screen-description { max-width: calc(600px * var(--ui-scale)); margin: calc(9px * var(--ui-scale)) 0 0; color: #879188; font-size: calc(var(--ui-scale, 1) * 12px); line-height: 1.65; }
.search-form { display: grid; grid-template-columns: minmax(calc(180px * var(--ui-scale)),1fr) calc(160px * var(--ui-scale)) calc(190px * var(--ui-scale)) auto; gap: calc(9px * var(--ui-scale)); align-items: center; padding: calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(15px * var(--ui-scale)); background: var(--surface); }
.field, .select-field { width: 100%; min-height: calc(42px * var(--ui-scale)); padding: 0 calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid #e9e5dc; border-radius: calc(10px * var(--ui-scale)); background: #fff; color: var(--ink); font-size: calc(var(--ui-scale, 1) * 12px); }
.field::placeholder { color: #a6aba4; }
.search-field-wrap { position: relative; }
.search-field-wrap svg { position: absolute; top: 50%; left: calc(12px * var(--ui-scale)); width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); transform: translateY(-50%); color: #98a099; pointer-events: none; }
.search-field-wrap .field { padding-left: calc(37px * var(--ui-scale)); }
.search-summary { margin: calc(17px * var(--ui-scale)) 0 calc(10px * var(--ui-scale)); color: #8b958c; font-size: calc(var(--ui-scale, 1) * 11px); }
.search-results { display: grid; gap: calc(9px * var(--ui-scale)); }
.search-result { width: 100%; padding: calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale)); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(14px * var(--ui-scale)); background: var(--surface); text-align: left; transition: .15s ease; }
.search-result:hover { border-color: #c6d3c7; background: #fff; transform: translateY(calc(-1px * var(--ui-scale))); }
.search-result-top { display: flex; align-items: center; gap: calc(8px * var(--ui-scale)); margin-bottom: calc(7px * var(--ui-scale)); }
.search-reference { color: #405d4b; font-size: calc(var(--ui-scale, 1) * 12px); font-weight: 700; }
.version-tag { padding: calc(4px * var(--ui-scale)) calc(6px * var(--ui-scale)); border-radius: calc(6px * var(--ui-scale)); background: #f0efe8; color: #8c8e84; font-size: calc(var(--ui-scale, 1) * 9px); font-weight: 700; }
.search-snippet { margin: 0; color: #65736a; font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: var(--reader-size); line-height: 1.65; }
.search-result-arrow { align-self: center; color: #abb2a8; }
.search-result-arrow svg { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); }
.empty-state { min-height: calc(220px * var(--ui-scale)); display: grid; place-content: center; justify-items: center; padding: calc(28px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) dashed #dcd8cd; border-radius: calc(16px * var(--ui-scale)); color: #8e988e; text-align: center; }
.empty-state svg { width: calc(25px * var(--ui-scale)); height: calc(25px * var(--ui-scale)); margin-bottom: calc(12px * var(--ui-scale)); color: #a4ad9f; }
.empty-state strong { color: #617168; font-size: calc(var(--ui-scale, 1) * 13px); font-weight: 600; }
.empty-state p { max-width: calc(340px * var(--ui-scale)); margin: calc(7px * var(--ui-scale)) 0 0; font-size: calc(var(--ui-scale, 1) * 11px); line-height: 1.6; }
.load-more { display: flex; justify-content: center; margin-top: calc(16px * var(--ui-scale)); }
.study-list { display: grid; gap: calc(9px * var(--ui-scale)); }
.study-item { display: grid; grid-template-columns: calc(44px * var(--ui-scale)) minmax(0,1fr) auto; gap: calc(13px * var(--ui-scale)); align-items: center; padding: calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(14px * var(--ui-scale)); background: var(--surface); }
.study-item:hover { border-color: #d5ddcf; }
.study-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: calc(23px * var(--ui-scale)); line-height: 1; }
.study-glyph { width: calc(40px * var(--ui-scale)); height: calc(40px * var(--ui-scale)); display: grid; place-items: center; border: calc(1px * var(--ui-scale)) solid #e8e3d8; border-radius: calc(12px * var(--ui-scale)); background: #f7f4ed; color: #a07d51; }
.study-name { color: #3e5146; font-size: calc(var(--ui-scale, 1) * 13px); font-weight: 700; }
.study-meta { margin-top: calc(4px * var(--ui-scale)); color: #99a098; font-size: calc(var(--ui-scale, 1) * 10px); }
.study-snippet { margin: calc(6px * var(--ui-scale)) 0 0; color: #7d877e; font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: var(--reader-size); line-height: 1.55; }
.study-item[class*="note-color-"] .study-snippet { font-size: var(--note-size); }
.study-item.note-color-sand .study-snippet, .study-item.note-color-blue .study-snippet, .study-item.note-color-green .study-snippet, .study-item.note-color-rose .study-snippet, .study-item.note-color-purple .study-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.study-buttons { display: flex; align-items: center; gap: calc(5px * var(--ui-scale)); }
.notes-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(165px * var(--ui-scale)), auto); gap: calc(10px * var(--ui-scale)); margin: 0 0 calc(16px * var(--ui-scale)); }
.notes-mode-switch { width: fit-content; display: flex; gap: calc(4px * var(--ui-scale)); margin: 0 0 calc(12px * var(--ui-scale)); padding: calc(4px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(11px * var(--ui-scale)); background: var(--surface-soft); }
.notes-mode-switch button { min-height: calc(32px * var(--ui-scale)); display: inline-flex; align-items: center; gap: calc(7px * var(--ui-scale)); padding: 0 calc(11px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid transparent; border-radius: calc(8px * var(--ui-scale)); background: transparent; color: var(--ink-soft); font-size: calc(var(--ui-scale) * 11px); }
.notes-mode-switch button span { color: var(--muted); font-size: .9em; }
.notes-mode-switch button.is-active { border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.notes-bulk-actions { margin: 0 0 calc(14px * var(--ui-scale)); padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(11px * var(--ui-scale)); background: var(--surface); }
.notes-bulk-actions > span { color: var(--muted); font-size: calc(var(--ui-scale) * 10px); line-height: 1.5; }
.notes-bulk-actions .button-danger { flex: 0 0 auto; }
.confirmation-message { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.feedback-card { max-width: calc(780px * var(--ui-scale)); }
.feedback-form { display: grid; gap: calc(14px * var(--ui-scale)); }
.feedback-field { display: grid; gap: calc(6px * var(--ui-scale)); color: var(--ink-soft); font-size: calc(var(--ui-scale) * 12px); font-weight: 600; }
.feedback-message { min-height: calc(220px * var(--ui-scale)); padding: calc(12px * var(--ui-scale)); resize: vertical; line-height: 1.6; }
.feedback-actions { display: flex; justify-content: flex-end; }
.feedback-file-input { min-width: 0; padding: calc(9px * var(--ui-scale)); }
.feedback-attachment-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(10px * var(--ui-scale)); color: var(--muted); font-size: calc(10px * var(--ui-scale)); overflow-wrap: anywhere; }
.feedback-attachment-summary .is-invalid { color: #b5473c; }
.feedback-clear-files { min-height: calc(30px * var(--ui-scale)); flex: 0 0 auto; }
.feedback-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notes-search-wrap { position: relative; min-width: 0; }
.notes-search-wrap svg { position: absolute; top: 50%; left: calc(12px * var(--ui-scale)); width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.notes-search-wrap .field { padding-left: calc(38px * var(--ui-scale)); }
.notes-icon-filter-label { display: grid; grid-template-columns: auto minmax(calc(112px * var(--ui-scale)), 1fr); align-items: center; gap: calc(8px * var(--ui-scale)); color: var(--muted); font-size: calc(var(--ui-scale) * 11px); }
.notes-load-more { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-scale)); margin-top: calc(14px * var(--ui-scale)); color: var(--muted); font-size: calc(var(--ui-scale) * 11px); }
.settings-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(calc(260px * var(--ui-scale)),.75fr); gap: calc(15px * var(--ui-scale)); align-items: start; }
.settings-card { margin-bottom: calc(13px * var(--ui-scale)); padding: calc(19px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(16px * var(--ui-scale)); background: var(--surface); }
.settings-card-title { margin: 0 0 calc(3px * var(--ui-scale)); font-size: calc(var(--ui-scale, 1) * 13px); font-weight: 700; }
.settings-card-description { margin: 0 0 calc(17px * var(--ui-scale)); color: #969e95; font-size: calc(var(--ui-scale, 1) * 11px); line-height: 1.55; }
.setting-row { min-height: calc(56px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(18px * var(--ui-scale)); border-top: calc(1px * var(--ui-scale)) solid #f0ede6; }
.setting-info { min-width: 0; flex: 1; }
.setting-name { color: #55675d; font-size: calc(var(--ui-scale, 1) * 12px); font-weight: 600; }
.setting-hint { margin-top: calc(3px * var(--ui-scale)); color: #a1a69d; font-size: calc(var(--ui-scale, 1) * 10px); }
.setting-control { display: flex; align-items: center; gap: calc(8px * var(--ui-scale)); }
.setting-value { min-width: calc(50px * var(--ui-scale)); color: #7b887e; font-size: calc(var(--ui-scale, 1) * 11px); text-align: center; }
.setting-sample { margin-top: calc(7px * var(--ui-scale)); color: var(--ink-soft); line-height: 1.5; }
.setting-sample-label { color: var(--muted); font-size: .88em; }
.setting-footnote-example { margin-left: .35em; padding: .12em .35em; border-radius: calc(4px * var(--ui-scale)); background: var(--surface-soft); color: var(--ink-soft); font-size: .88em; }
.app-size-sample { font-size: calc(var(--ui-scale) * 14px); }
.scripture-size-sample { font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: var(--reader-size); }
.note-size-sample { font-size: var(--note-size); }
.app-size-presets { display: flex; align-items: center; gap: calc(3px * var(--ui-scale)); padding: calc(3px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(10px * var(--ui-scale)); background: var(--surface-soft); }
.app-size-preset { width: calc(28px * var(--ui-scale)); height: calc(30px * var(--ui-scale)); padding: 0; border: 0; border-radius: calc(7px * var(--ui-scale)); background: transparent; color: #77857a; font-size: calc(var(--ui-scale) * var(--preset-font-size)); font-weight: 600; }
.app-size-preset.is-active { background: var(--surface); color: var(--moss-dark); box-shadow: 0 calc(1px * var(--ui-scale)) calc(4px * var(--ui-scale)) rgba(40,50,40,.1); }
.theme-palette-settings { margin: calc(7px * var(--ui-scale)) 0 calc(2px * var(--ui-scale)); padding: calc(11px * var(--ui-scale)) 0 calc(3px * var(--ui-scale)); border-top: calc(1px * var(--ui-scale)) solid var(--line); }
.theme-palette-heading { margin-bottom: calc(8px * var(--ui-scale)); color: var(--ink-soft); font-size: calc(var(--ui-scale) * 11px); font-weight: 600; }
.theme-palette-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6px * var(--ui-scale)); }
.theme-palette-option { min-width: 0; padding: calc(7px * var(--ui-scale)) calc(5px * var(--ui-scale)); display: grid; gap: calc(5px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(9px * var(--ui-scale)); background: var(--surface); color: var(--ink-soft); font-size: calc(var(--ui-scale) * 10px); text-align: center; }
.theme-palette-option.is-active { border-color: var(--moss); background: var(--moss-wash); color: var(--ink); box-shadow: 0 0 0 calc(1px * var(--ui-scale)) var(--moss); }
.theme-palette-swatches { height: calc(14px * var(--ui-scale)); display: flex; overflow: hidden; border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(5px * var(--ui-scale)); }
.theme-palette-swatches i { min-width: 0; flex: 1; }
.switch { width: calc(42px * var(--ui-scale)); height: calc(24px * var(--ui-scale)); position: relative; border: 0; border-radius: calc(999px * var(--ui-scale)); background: #dadcd3; transition: background .18s ease; }
.switch::after { content: ""; position: absolute; top: calc(3px * var(--ui-scale)); left: calc(3px * var(--ui-scale)); width: calc(18px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); border-radius: 50%; background: white; box-shadow: 0 calc(1px * var(--ui-scale)) calc(3px * var(--ui-scale)) rgba(0,0,0,.16); transition: transform .18s ease; }
.switch.is-on { background: #688773; }
.switch.is-on::after { transform: translateX(calc(18px * var(--ui-scale))); }
.reader-sync-toggle { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--ui-scale)); min-height: calc(38px * var(--ui-scale)); padding: 0 calc(10px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(11px * var(--ui-scale)); background: var(--surface); color: var(--ink); font-size: calc(var(--ui-scale, 1) * 11px); font-weight: 700; white-space: nowrap; transition: .16s ease; }
.reader-sync-toggle:hover { border-color: var(--moss); background: var(--surface-soft); }
.reader-sync-toggle[aria-checked="true"] { border-color: var(--moss); }
.reader-sync-toggle .switch { flex: 0 0 auto; pointer-events: none; }
.credit-list { display: grid; gap: calc(11px * var(--ui-scale)); }
.credit-item { padding-bottom: calc(10px * var(--ui-scale)); border-bottom: calc(1px * var(--ui-scale)) solid #f0ede6; }
.credit-item:last-child { padding-bottom: 0; border-bottom: 0; }
.credit-name { color: #57685e; font-size: calc(var(--ui-scale, 1) * 11px); font-weight: 700; }
.credit-copy { margin-top: calc(3px * var(--ui-scale)); color: #969e95; font-size: calc(var(--ui-scale, 1) * 10px); line-height: 1.55; }
.credit-copy a { color: #5e7968; text-decoration: none; }
.credit-copy a svg { width: calc(12px * var(--ui-scale)); height: calc(12px * var(--ui-scale)); margin-left: calc(2px * var(--ui-scale)); vertical-align: calc(-2px * var(--ui-scale)); }
.credit-copy a:hover { text-decoration: underline; }

/* Dialogs and toasts */
.modal-layer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: calc(18px * var(--ui-scale)); background: rgba(26, 39, 34, .32); backdrop-filter: blur(calc(5px * var(--ui-scale))); }
.modal-card { width: min(100%, calc(560px * var(--ui-scale))); max-height: min(90dvh, calc(820px * var(--ui-scale))); display: flex; flex-direction: column; overflow: hidden; border: calc(1px * var(--ui-scale)) solid rgba(255,255,255,.6); border-radius: calc(20px * var(--ui-scale)); background: var(--surface); box-shadow: var(--shadow); animation: modal-in .18s ease-out; }
.modal-card.modal-wide { width: min(100%, calc(760px * var(--ui-scale))); }
@keyframes modal-in { from { opacity: 0; transform: translateY(calc(9px * var(--ui-scale))) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { min-height: calc(66px * var(--ui-scale)); padding: calc(14px * var(--ui-scale)) calc(18px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(14px * var(--ui-scale)); border-bottom: calc(1px * var(--ui-scale)) solid var(--line); }
.modal-title { margin: 0; font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: calc(var(--ui-scale, 1) * 19px); font-weight: 500; }
.modal-subtitle { margin-top: calc(4px * var(--ui-scale)); color: #99a098; font-size: calc(var(--ui-scale, 1) * 10px); }
.modal-body { min-height: 0; overflow: auto; padding: calc(17px * var(--ui-scale)) calc(18px * var(--ui-scale)); }
.modal-foot { min-height: calc(64px * var(--ui-scale)); padding: calc(12px * var(--ui-scale)) calc(18px * var(--ui-scale)); display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-scale)); border-top: calc(1px * var(--ui-scale)) solid var(--line); background: #fbfaf6; }
.testament-tabs { display: flex; gap: calc(7px * var(--ui-scale)); margin-bottom: calc(13px * var(--ui-scale)); }
.testament-tabs button { min-height: calc(34px * var(--ui-scale)); padding: 0 calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(9px * var(--ui-scale)); background: #fff; color: #8b958c; font-size: calc(var(--ui-scale, 1) * 11px); }
.testament-tabs button.is-active { border-color: #cfdbcf; background: #edf3eb; color: #46624e; font-weight: 700; }
.book-picker-body { padding-top: calc(11px * var(--ui-scale)); }
.book-testament-group + .book-testament-group { margin-top: calc(18px * var(--ui-scale)); padding-top: calc(13px * var(--ui-scale)); border-top: calc(1px * var(--ui-scale)) solid var(--line); }
.book-testament-group h3 { margin: 0; color: var(--ink-soft); font-size: calc(var(--ui-scale, 1) * 12px); font-weight: 700; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(112px * var(--ui-scale)), 1fr)); gap: calc(8px * var(--ui-scale)); margin-top: calc(13px * var(--ui-scale)); }
.book-choice { min-width: 0; min-height: calc(88px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)); display: grid; align-content: center; justify-items: center; gap: calc(3px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid #ece8df; border-radius: calc(10px * var(--ui-scale)); background: #fff; color: #526359; text-align: center; font-size: calc(var(--ui-scale, 1) * 11px); transition: .14s ease; }
.book-choice:hover, .book-choice.is-current { border-color: #c7d5c8; background: #f0f5ee; color: #344f3d; }
.book-choice-shortform { display: block; color: var(--moss-dark); font-size: calc(var(--ui-scale, 1) * 18px); font-weight: 750; line-height: 1.1; white-space: nowrap; }
.book-choice-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-choice small { display: block; max-width: 100%; color: #a2a79e; font-size: calc(var(--ui-scale, 1) * 9px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: calc(7px * var(--ui-scale)); margin-top: calc(12px * var(--ui-scale)); }
.chapter-choice { aspect-ratio: 1; border: calc(1px * var(--ui-scale)) solid #ece8df; border-radius: calc(10px * var(--ui-scale)); background: #fff; color: #66756a; font-size: calc(var(--ui-scale, 1) * 12px); }
.chapter-choice:hover, .chapter-choice.is-current { border-color: #becfbe; background: #eaf1e8; color: #34513e; font-weight: 700; }
.selector-step-heading { margin: calc(4px * var(--ui-scale)) 0 calc(10px * var(--ui-scale)); color: #869087; font-size: calc(var(--ui-scale, 1) * 11px); }
.note-textarea { width: 100%; min-height: calc(190px * var(--ui-scale)); resize: vertical; padding: calc(13px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid #e6e1d6; border-radius: calc(12px * var(--ui-scale)); background: #fff; color: var(--ink); font-family: inherit; font-size: var(--note-size); line-height: 1.65; }
.dialog-verse { margin: 0; color: #506157; font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: var(--reader-size); line-height: 1.7; }
.action-list { display: grid; gap: calc(7px * var(--ui-scale)); margin-top: calc(15px * var(--ui-scale)); }
.action-list .button { min-height: calc(44px * var(--ui-scale)); justify-content: flex-start; }
.crossref-list { display: grid; gap: calc(8px * var(--ui-scale)); }
.crossref-item { width: 100%; padding: calc(12px * var(--ui-scale)); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid #eae6dc; border-radius: calc(12px * var(--ui-scale)); background: #fff; text-align: left; }
.crossref-item:hover { border-color: #cad6ca; background: #f7faf5; }
.crossref-reference { display: block; margin-bottom: calc(5px * var(--ui-scale)); color: #49634e; font-size: calc(var(--ui-scale, 1) * 11px); font-weight: 700; }
.crossref-text { color: #7c877e; font-family: "Literata", "Noto Serif TC", Georgia, serif; font-size: calc(var(--ui-scale, 1) * 12px); line-height: 1.5; }
.modal-disclaimer { margin: calc(12px * var(--ui-scale)) 0 0; color: #a2a69f; font-size: calc(var(--ui-scale, 1) * 9px); line-height: 1.5; }
.toast-region { position: fixed; right: max(calc(18px * var(--ui-scale)), env(safe-area-inset-right)); bottom: max(calc(18px * var(--ui-scale)), env(safe-area-inset-bottom)); z-index: 40; display: grid; gap: calc(8px * var(--ui-scale)); pointer-events: none; }
.toast { max-width: min(calc(400px * var(--ui-scale)), calc(100vw - 36px)); padding: calc(12px * var(--ui-scale)) calc(15px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid rgba(255,255,255,.18); border-radius: calc(12px * var(--ui-scale)); background: #263d35; color: #f8f7f2; box-shadow: 0 calc(10px * var(--ui-scale)) calc(30px * var(--ui-scale)) rgba(20,35,29,.2); font-size: calc(var(--ui-scale, 1) * 12px); line-height: 1.45; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(calc(7px * var(--ui-scale))); } to { opacity: 1; transform: translateY(0); } }
.file-input-hidden { position: absolute; width: calc(1px * var(--ui-scale)); height: calc(1px * var(--ui-scale)); overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* All ten day/night palettes feed the same interface variables. */
.app-shell { color: var(--ink); }
.app-shell .sidebar { background: var(--sidebar-bg); border-color: var(--line); }
.app-shell .brand, .app-shell .translation-name, .app-shell .verse-text, .app-shell .paragraph-passage, .app-shell .study-name, .app-shell .settings-card-title, .app-shell .screen-title { color: var(--reader-ink); }
.app-shell .nav-item { color: var(--sidebar-ink); }
.app-shell .nav-item.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); }
.app-shell .verse-row.is-selected { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); }
.app-shell .translation-monogram { background: var(--surface-soft); border-color: var(--line); color: var(--gold); }
.app-shell .field, .app-shell .select-field, .app-shell .button, .app-shell .reference-select, .app-shell .search-form, .app-shell .search-result, .app-shell .study-item, .app-shell .settings-card, .app-shell .modal-card, .app-shell .crossref-item, .app-shell .book-choice, .app-shell .chapter-choice { background: var(--surface); border-color: var(--line); color: var(--ink-soft); }
.app-shell .translation-head, .app-shell .verse-row, .app-shell .setting-row, .app-shell .credit-item, .app-shell .modal-head, .app-shell .modal-foot { border-color: var(--line); }
.app-shell .verse-number, .app-shell .study-meta, .app-shell .search-summary, .app-shell .brand-tagline, .app-shell .nav-caption, .app-shell .sidebar-credit, .app-shell .screen-description, .app-shell .settings-card-description, .app-shell .setting-hint, .app-shell .credit-copy, .app-shell .modal-subtitle, .app-shell .modal-disclaimer, .app-shell .selector-step-heading { color: var(--muted); }
.app-shell .setting-name, .app-shell .setting-value, .app-shell .icon-button, .app-shell .small-icon-button { color: var(--ink-soft); }
.app-shell .segmented-control { background: var(--surface-soft); border-color: var(--line); }
.app-shell .segmented-control button { color: var(--muted); }
.app-shell .segmented-control button.is-active { background: var(--surface); color: var(--moss-dark); }
.app-shell .button:hover, .app-shell .reference-select:hover, .app-shell .search-result:hover, .app-shell .crossref-item:hover, .app-shell .chapter-choice:hover { border-color: var(--line-strong); background: var(--hover-bg); color: var(--ink); }
.app-shell .button-quiet { border-color: transparent; background: transparent; }
.app-shell .button-quiet:hover { background: var(--surface-soft); }
.app-shell .button-primary { border-color: var(--moss); background: var(--moss); color: var(--accent-text, #fff); }
.app-shell .button-primary:hover { border-color: var(--moss-dark); background: var(--moss-dark); color: var(--accent-text, #fff); }
.app-shell .verse-action { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.app-shell .verse-action:hover, .app-shell .verse-action.is-active { border-color: var(--line-strong); background: var(--moss-wash); color: var(--moss-dark); }
.app-shell .translation-head { background: var(--surface); }
.app-shell .modal-foot { background: var(--surface-soft); }
.app-shell .field::placeholder { color: var(--muted); }
.app-shell .credit-copy a, .app-shell .search-reference, .app-shell .crossref-reference { color: var(--moss-dark); }
.app-shell .toast { background: var(--moss-dark); color: var(--accent-text, #fff); }
.app-shell .page-kicker { color: var(--gold); }
.app-shell .page-kicker::before { background: var(--gold); }
.app-shell .button-danger { color: var(--rose); }
.app-shell .nav-item:hover, .app-shell .sidebar-collapse:hover, .app-shell .icon-button:hover, .app-shell .small-icon-button:hover { background: var(--hover-bg); color: var(--ink); }
.app-shell .nav-item.is-active svg { color: var(--moss-dark); }
.app-shell .verse-row.is-bookmarked .verse-number { color: var(--gold); }
.app-shell .empty-state { border-color: var(--line-strong); color: var(--muted); }
.app-shell .empty-state strong { color: var(--ink-soft); }
.app-shell .empty-state svg { color: var(--moss); }
.app-shell .version-tag { background: var(--surface-soft); color: var(--muted); }
.app-shell .study-glyph { border-color: var(--line); background: var(--surface-soft); color: var(--gold); }
.app-shell .study-item[class*="note-color-"] { background: var(--note-bg); border-color: var(--note-edge); }
.app-shell .testament-tabs button, .app-shell .book-choice, .app-shell .chapter-choice { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.app-shell .testament-tabs button.is-active, .app-shell .book-choice.is-current, .app-shell .chapter-choice.is-current { border-color: var(--moss); background: var(--moss-wash); color: var(--moss-dark); }
.app-shell .note-editor-field, .app-shell .note-textarea { border-color: var(--line); background: var(--surface); color: var(--ink); }
.app-shell .setting-row, .app-shell .credit-item { border-color: var(--line); }
.app-shell .switch { background: var(--line-strong); }
.app-shell .switch.is-on { background: var(--moss); }
.app-shell .settings-card { border-radius: calc(16px * var(--ui-scale)); padding: calc(19px * var(--ui-scale)); }
.app-shell .translation-panel, .app-shell .aligned-reader { border-radius: calc(18px * var(--ui-scale)); }
.app-shell .setting-row { min-height: calc(56px * var(--ui-scale)); }
.app-shell .sidebar-collapse, .app-shell .reading-tools-compact { width: calc(32px * var(--ui-scale)); height: calc(32px * var(--ui-scale)); }
.app-shell .sidebar-collapse svg, .app-shell .reading-tools-compact svg { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); }
.app-shell .verse-select-checkbox, .app-shell .paragraph-select-checkbox { width: calc(18px * var(--ui-scale)); height: calc(18px * var(--ui-scale)); border-radius: calc(5px * var(--ui-scale)); }
.app-shell .verse-select-checkbox svg, .app-shell .paragraph-select-checkbox svg { width: calc(13px * var(--ui-scale)); height: calc(13px * var(--ui-scale)); }
.app-shell .verse-action svg { width: calc(14px * var(--ui-scale)); height: calc(14px * var(--ui-scale)); }
.app-shell .theme-palette-option { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.app-shell .theme-palette-option.is-active { border-color: var(--moss); background: var(--moss-wash); color: var(--ink); }
.app-shell button:focus-visible, .app-shell input:focus-visible, .app-shell textarea:focus-visible, .app-shell select:focus-visible, .app-shell [tabindex]:focus-visible { outline-color: color-mix(in srgb, var(--moss) 35%, transparent); }
.app-shell .paragraph-passage.is-poetry { padding-left: 1.1em; }
.app-shell .paragraph-passage.is-indented { padding-left: 1.5em; }
.theme-night .note-color-sand { --note-bg: #3d372c; --note-fg: #e4cfaa; --note-edge: #b69462; --note-chip: #a8844d; }
.theme-night .note-color-blue { --note-bg: #293b45; --note-fg: #c6deea; --note-edge: #6692a8; --note-chip: #4d829b; }
.theme-night .note-color-green { --note-bg: #2d4033; --note-fg: #c8dfc5; --note-edge: #71966f; --note-chip: #668a62; }
.theme-night .note-color-rose { --note-bg: #493331; --note-fg: #f0cfca; --note-edge: #b77a73; --note-chip: #a3625b; }
.theme-night .note-color-purple { --note-bg: #3d3547; --note-fg: #ded0ef; --note-edge: #8e7ba6; --note-chip: #776391; }

@media (max-width: 900px) {
  .app-frame { display: block; padding-bottom: calc(calc(67px * var(--ui-scale)) + env(safe-area-inset-bottom)); }
  .reader-columns { grid-template-columns: minmax(0,1fr); }
  .aligned-reader-heads, .aligned-verse-list, .aligned-verse-pair, .aligned-verse-group, .aligned-source-headings { grid-template-columns: minmax(0,1fr); }
  .aligned-reader-head + .aligned-reader-head { border-left: 0; border-top: calc(1px * var(--ui-scale)) solid var(--line); }
  .aligned-source-headings > div + div { border-left: 0; border-top: calc(1px * var(--ui-scale)) solid var(--line); margin-top: calc(7px * var(--ui-scale)); padding: calc(7px * var(--ui-scale)) 0 0; }
  .aligned-verse-pair .verse-row:first-child { padding-right: calc(12px * var(--ui-scale)); }
  .aligned-verse-pair .verse-row + .verse-row { border-left: 0; border-top: calc(1px * var(--ui-scale)) solid var(--line); padding-left: 0; }
  .reader-columns.is-independent .translation-panel { height: 58dvh; min-height: calc(260px * var(--ui-scale)); max-height: calc(680px * var(--ui-scale)); }
  .sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: calc(calc(66px * var(--ui-scale)) + env(safe-area-inset-bottom)); padding: calc(5px * var(--ui-scale)) calc(9px * var(--ui-scale)) calc(calc(5px * var(--ui-scale)) + env(safe-area-inset-bottom)); display: block; border-top: calc(1px * var(--ui-scale)) solid var(--line); border-right: 0; background: rgba(247,245,239,.95); backdrop-filter: blur(calc(14px * var(--ui-scale))); }
  .sidebar-header, .nav-caption, .side-spacer, .sidebar-credit { display: none; }
  .side-nav { height: 100%; flex: none; flex-direction: row; align-items: stretch; justify-content: space-around; gap: calc(4px * var(--ui-scale)); }
  .nav-item { min-width: 0; min-height: calc(50px * var(--ui-scale)); flex: 1; flex-direction: column; justify-content: center; gap: calc(4px * var(--ui-scale)); padding: calc(4px * var(--ui-scale)) calc(3px * var(--ui-scale)); border-radius: calc(11px * var(--ui-scale)); font-size: calc(var(--ui-scale, 1) * 9px); }
  .nav-theme-toggle { margin-top: 0; border-top: 0; padding-top: calc(4px * var(--ui-scale)); }
  .nav-feedback { flex: .8 1 0; margin-top: 0; border-top: 0; padding-top: calc(4px * var(--ui-scale)); }
  .nav-feedback span { display: none; }
  .sidebar-reading-tools { display: none; }
  .nav-notes-toggle span { display: none; }
  .nav-notes-toggle { flex: .8 1 0; }
  .nav-item svg { width: calc(17px * var(--ui-scale)); height: calc(17px * var(--ui-scale)); }
  .content-wrap { padding: calc(24px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(35px * var(--ui-scale)); }
}
@media (max-width: 760px) {
  .chapter-controls { flex-wrap: wrap; }
  .chapter-controls-spacer { flex-basis: 100%; height: 0; }
  .note-editor-footer { align-items: flex-start; flex-direction: column; }
  .reader-columns { grid-template-columns: minmax(0,1fr); }
  .search-form { grid-template-columns: minmax(0,1fr) minmax(calc(110px * var(--ui-scale)), .55fr); }
  .search-form .search-field-wrap { grid-column: 1 / -1; }
  .settings-grid { grid-template-columns: minmax(0,1fr); }
  .screen-heading { align-items: flex-start; flex-direction: column; }
  .screen-heading .button { align-self: flex-start; }
  .screen-heading-actions { justify-content: flex-start; }
  .notes-toolbar { grid-template-columns: minmax(0, 1fr); }
  .notes-bulk-actions { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) { :root { --ui-device-scale: .94; } }
@media (min-width: 1200px) { :root { --ui-device-scale: 1.03; } }
@media (min-width: 1750px) { :root { --ui-device-scale: 1.08; } }
@media (max-width: 470px) {
  .app-shell { --verse-number-width: calc(23px * var(--ui-scale)); --verse-gap: calc(7px * var(--ui-scale)); }
  .content-wrap { padding: calc(21px * var(--ui-scale)) calc(13px * var(--ui-scale)) calc(28px * var(--ui-scale)); }
  .button { min-height: calc(36px * var(--ui-scale)); padding: 0 calc(9px * var(--ui-scale)); font-size: calc(var(--ui-scale, 1) * 11px); }
  .chapter-controls { gap: calc(6px * var(--ui-scale)); }
  .reference-select { min-height: calc(36px * var(--ui-scale)); padding: 0 calc(9px * var(--ui-scale)); font-size: calc(var(--ui-scale, 1) * 11px); }
  .segmented-control { margin-left: auto; }
  .translation-head { padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale)); }
  .verse-list { padding-right: calc(12px * var(--ui-scale)); padding-left: calc(12px * var(--ui-scale)); }
  .verse-row { grid-template-columns: var(--verse-number-width) minmax(0,1fr); gap: var(--verse-gap); }
  .verse-text { font-size: calc(var(--reader-size) - 1px); }
  .translation-panel[data-language="en"] .verse-text, .verse-row[data-language="en"] .verse-text { font-size: calc(var(--reader-size) - 3px); }
  .book-grid { grid-template-columns: repeat(auto-fit, minmax(calc(94px * var(--ui-scale)), 1fr)); }
  .chapter-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .modal-layer { padding: calc(10px * var(--ui-scale)); }
  .modal-card { max-height: 94dvh; border-radius: calc(17px * var(--ui-scale)); }
  .study-item { grid-template-columns: calc(38px * var(--ui-scale)) minmax(0,1fr); gap: calc(10px * var(--ui-scale)); padding: calc(12px * var(--ui-scale)); }
  .study-glyph { width: calc(36px * var(--ui-scale)); height: calc(36px * var(--ui-scale)); }
  .study-buttons { grid-column: 2; }
}
@media (min-width: 901px) {
  .app-frame.is-sidebar-collapsed { grid-template-columns: calc(72px * var(--ui-scale)) minmax(0, 1fr); }
  .sidebar.is-collapsed { padding: calc(20px * var(--ui-scale)) calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale)); }
  .sidebar.is-collapsed .sidebar-header { flex-direction: column; align-items: center; gap: calc(12px * var(--ui-scale)); padding-bottom: calc(22px * var(--ui-scale)); }
  .sidebar.is-collapsed .brand { padding: 0; justify-content: center; }
  .sidebar.is-collapsed .brand > span:last-child,
  .sidebar.is-collapsed .nav-caption,
  .sidebar.is-collapsed .nav-item span,
  .sidebar.is-collapsed .sidebar-credit { display: none; }
  .sidebar.is-collapsed .nav-item[data-pane="settings"] { display: none; }
  .sidebar.is-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
  .sidebar.is-collapsed .side-nav { width: 100%; gap: calc(6px * var(--ui-scale)); }
  .sidebar.is-collapsed .nav-item { justify-content: center; gap: 0; padding: 0; }
  .sidebar.is-collapsed .sidebar-reading-tools { display: block; padding: calc(7px * var(--ui-scale)) 0; }
  .sidebar.is-collapsed .reading-tool-row { display: none; }
  .sidebar.is-collapsed .reading-tools-compact { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* List-flow labels span to the panel edge; Scripture continuations align with verse text. */
.verse-row { --verse-copy-offset: calc(var(--verse-number-width) + var(--verse-gap)); }
.verse-row.is-selecting { --verse-copy-offset: calc(var(--verse-number-width) + calc(35px * var(--ui-scale))); }
.aligned-source-headings > div:first-child { padding-left: 0; }
.sync-settings-card { min-width: 0; }
.storage-recovery-banner { display: grid; gap: calc(4px * var(--ui-scale)); margin: calc(10px * var(--ui-scale)) clamp(10px, 2vw, 24px) 0; padding: calc(12px * var(--ui-scale)) calc(15px * var(--ui-scale)); border: 1px solid var(--rose); border-radius: calc(12px * var(--ui-scale)); background: var(--rose-wash); color: var(--ink); font-size: calc(12px * var(--ui-scale)); line-height: 1.55; }
.storage-recovery-banner strong { color: var(--rose); }
.storage-recovery-banner span { overflow-wrap: anywhere; }
.sync-account-row, .sync-account-actions { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui-scale)); }
.sync-account-actions { justify-content: flex-start; flex-wrap: wrap; }
.sync-auth-tabs { width: max-content; margin: 0 0 calc(12px * var(--ui-scale)); }
.sync-auth-form { display: grid; gap: calc(11px * var(--ui-scale)); }
.sync-auth-form .feedback-field { margin: 0; }
.sync-status-message { margin: calc(12px * var(--ui-scale)) 0 0; }
.sync-safety-note, .sync-progress-note, .sync-privacy-note { margin: calc(10px * var(--ui-scale)) 0 0; color: var(--muted); font-size: calc(11px * var(--ui-scale)); line-height: 1.6; }
.sync-conflict-list { display: grid; gap: calc(9px * var(--ui-scale)); margin-top: calc(15px * var(--ui-scale)); }
.sync-conflict-list h3 { margin: 0; font-size: calc(13px * var(--ui-scale)); }
.sync-conflict-card { min-width: 0; padding: calc(12px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--line); border-radius: calc(12px * var(--ui-scale)); background: var(--surface-soft); }
.sync-conflict-card > strong { overflow-wrap: anywhere; }
.sync-conflict-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(9px * var(--ui-scale)); margin: calc(8px * var(--ui-scale)) 0; }
.sync-conflict-versions p { min-width: 0; margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 600px) {
  .sync-account-row { align-items: flex-start; flex-direction: column; }
  .sync-conflict-versions { grid-template-columns: minmax(0, 1fr); }
}
.update-banner {
  position: fixed;
  z-index: 70;
  right: max(calc(18px * var(--ui-scale)), env(safe-area-inset-right));
  bottom: max(calc(18px * var(--ui-scale)), env(safe-area-inset-bottom));
  display: grid;
  width: min(calc(560px * var(--ui-scale)), calc(100vw - 32px));
  gap: calc(9px * var(--ui-scale));
  padding: calc(13px * var(--ui-scale)) calc(48px * var(--ui-scale)) calc(13px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border: 1px solid var(--line-strong);
  border-radius: calc(14px * var(--ui-scale));
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 calc(12px * var(--ui-scale)) calc(34px * var(--ui-scale)) rgba(0,0,0,.24);
  pointer-events: auto;
}
.update-banner-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(2px * var(--ui-scale)) calc(12px * var(--ui-scale));
  min-width: 0;
}
.update-banner-item + .update-banner-item {
  padding-top: calc(9px * var(--ui-scale));
  border-top: 1px solid var(--line);
}
.update-banner-item strong { font-size: calc(13px * var(--ui-scale)); }
.update-banner-item > span { color: var(--muted); font-size: calc(11px * var(--ui-scale)); overflow-wrap: anywhere; }
.update-banner-item > .button { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
.update-banner-dismiss {
  position: absolute;
  top: calc(7px * var(--ui-scale));
  right: calc(7px * var(--ui-scale));
}
.release-check-actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui-scale)); padding-top: calc(10px * var(--ui-scale)); }
.release-value { flex: 0 1 auto; max-width: 52%; color: var(--ink); font-size: calc(12px * var(--ui-scale)); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .update-banner {
    right: max(calc(10px * var(--ui-scale)), env(safe-area-inset-right));
    bottom: calc(calc(76px * var(--ui-scale)) + env(safe-area-inset-bottom));
    width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .update-banner-item { grid-template-columns: minmax(0, 1fr); }
  .update-banner-item > .button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: calc(5px * var(--ui-scale)); }
  .release-value { max-width: 48%; }
}