:root {
  --ink: #213332;
  --ink-soft: #65726d;
  --teal: #254541;
  --teal-dark: #182e2d;
  --paper: #f4ead7;
  --paper-deep: #ead8bb;
  --line: rgba(111, 75, 43, 0.28);
  --red: #9e4038;
  --gold: #c18b46;
  --shadow: 0 24px 60px rgba(44, 32, 21, 0.2);
  --font-size: 18px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif CJK TC", "Source Han Serif TC", "Songti TC", serif;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.72), transparent 30%),
    linear-gradient(130deg, #d8c7ac 0%, #eadcc6 48%, #c8b598 100%);
  overflow-x: hidden;
}

button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
.ambient { position: fixed; pointer-events: none; filter: blur(50px); opacity: .28; border-radius: 50%; }
.ambient-one { width: 280px; height: 280px; right: 3%; top: 10%; background: #b4865a; }
.ambient-two { width: 220px; height: 220px; left: 4%; bottom: 4%; background: #76918a; }

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 92px;
  grid-template-rows: 72px minmax(0, 1fr);
  width: min(1520px, calc(100vw - 40px));
  height: calc(100vh - 40px);
  min-height: 0;
  max-height: calc(100vh - 40px);
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  background: rgba(237, 229, 211, .83);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.topbar { grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; padding: 0 26px; border-bottom: 1px solid rgba(64,54,40,.14); background: rgba(250,247,237,.46); }
.brand-block { display:flex; align-items:center; gap: 12px; }
.home-link { display:inline-flex; align-items:center; gap:3px; color:var(--teal); font-size:12px; white-space:nowrap; }
.home-link:hover { color:var(--red); }
.brand-mark { display:grid; place-items:center; width: 34px; height: 34px; color:#fff8e9; background:var(--red); border-radius: 9px 9px 3px 3px; font-size: 19px; box-shadow: 0 6px 14px rgba(158,64,56,.22); }
.brand-block h1 { margin:0; font-size: 20px; letter-spacing:.12em; font-weight:700; }
.brand-block p { margin:3px 0 0; color:var(--ink-soft); font-size: 11px; letter-spacing:.13em; }
.header-tools { display:flex; gap: 8px; }
.icon-button { width: 36px; height:36px; color:var(--ink); background:transparent; border-radius:50%; font-size:21px; }
.icon-button:hover { background:rgba(255,255,255,.45); }
.icon-button span { font-size:10px; vertical-align: top; }

.toc-panel { grid-column:1; grid-row:2; min-width:0; padding:24px 18px 14px; border-right:1px solid rgba(64,54,40,.13); background:rgba(246,242,231,.48); }
.panel-heading { display:flex; align-items:center; gap:9px; padding:0 8px 16px; font-size:18px; }
.panel-icon { color:var(--red); font-size:20px; }
.collapse-button { margin-left:auto; color:var(--ink-soft); background:transparent; }
.volume-switcher { display:flex; padding: 3px; margin: 0 2px 12px; border-radius:9px; background:rgba(215,199,173,.45); }
.volume-button { flex:1; padding:6px 3px; color:var(--ink-soft); background:transparent; border-radius:7px; font-size:12px; }
.volume-button.active { color:#fff; background:var(--teal); }
.chapter-list { display:flex; flex-direction:column; gap:3px; max-height: calc(100vh - 250px); overflow:auto; padding-right:3px; }
.chapter-item { display:flex; align-items:flex-start; gap:7px; width:100%; padding: 9px 8px; color:var(--ink); background:transparent; border-radius:7px; text-align:left; font-size:12px; line-height:1.45; }
.chapter-item:hover { background: rgba(255,255,255,.42); }
.chapter-item.active { color:#fff8ee; background:var(--red); box-shadow: 0 8px 16px rgba(158,64,56,.18); }
.chapter-item .volume-label { min-width:24px; color:var(--ink-soft); font-size:10px; }
.chapter-item.active .volume-label { color:#f6dfbd; }
.toc-footer { display:flex; justify-content:space-between; padding:14px 8px 0; color:var(--ink-soft); font-size:10px; }

.reader-area { grid-column:2; grid-row:2; min-width:0; min-height:0; display:flex; flex-direction:column; padding: 0 22px 20px; }
.reader-toolbar { display:flex; align-items:center; gap:16px; min-height:56px; }
.breadcrumb { flex:1; min-width:0; overflow:hidden; color:var(--ink-soft); font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.layout-tabs { display:flex; gap:3px; padding:3px; border-radius:8px; background:rgba(215,199,173,.45); }
.layout-tab { padding:6px 9px; color:var(--ink-soft); background:transparent; border-radius:6px; font-size:10px; }
.layout-tab.active { color:#fff; background:var(--red); }
.mode-tabs { display:flex; gap:4px; padding:3px; border-radius:9px; background:rgba(215,199,173,.45); }
.mode-tab { position:relative; padding:7px 10px; color:var(--ink-soft); background:transparent; border-radius:7px; font-size:11px; white-space:nowrap; }
.mode-tab.active { color:#fff; background:var(--teal); }
.mode-tab.future { opacity:.72; }
.mode-tab.future span { display:block; margin-top:1px; color:var(--red); font-size:8px; }
.mobile-toc-button { display:none; padding:7px 10px; color:var(--teal); background:rgba(255,255,255,.38); border-radius:7px; }

.reader-stage { position:relative; flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.book-spread { display:grid; grid-template-columns:1fr 1fr; width:min(100%, 1000px); height:100%; min-height:0; max-height:none; padding:14px; background:linear-gradient(90deg, #dec9a7, #f5e9d1 10%, #ead7b8 50%, #f5e9d1 90%, #dec9a7); border:1px solid rgba(117,80,42,.34); border-radius:10px; box-shadow: 0 20px 34px rgba(67,48,27,.2), inset 0 0 28px rgba(95,59,31,.12); }
.paper { position:relative; min-width:0; min-height:0; overflow:hidden; padding:34px 22px 28px; background: linear-gradient(105deg, rgba(255,255,255,.34), transparent 15%), var(--paper); border:1px solid rgba(123,84,43,.24); }
.paper.left { border-radius:6px 0 0 6px; box-shadow: inset -14px 0 22px rgba(72,46,26,.08); }
.paper.right { border-radius:0 6px 6px 0; box-shadow: inset 14px 0 22px rgba(72,46,26,.08); }
.paper::before { content:""; position:absolute; inset:20px; border:1px solid rgba(143,87,51,.23); pointer-events:none; }
.paper.full { width:100%; min-height:620px; border-radius:7px; }
.paper.full .vertical-columns { min-height:560px; }
.paper-title { position:absolute; top:30px; left:32px; color:var(--red); font-size:11px; letter-spacing:.12em; }
.paper-page { position:absolute; bottom:17px; left:50%; transform:translateX(-50%); color:#957a55; font-size:10px; }
.paper-empty { display:grid; place-items:center; height:100%; color:rgba(111,78,47,.42); font-size:13px; }
.vertical-columns { position:relative; z-index:1; display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:18px; height:100%; min-width:0; padding: 42px 28px 22px; overflow:auto; direction:rtl; scrollbar-width:thin; }
.passage { flex:0 0 auto; align-self:flex-start; width:auto; min-width:2em; height:auto; max-height:100%; color:#2b2925; font-size:var(--page-font-size, var(--font-size)); line-height:1.8; letter-spacing:.04em; writing-mode:vertical-rl; text-align:start; text-orientation:mixed; overflow-wrap:anywhere; user-select:text; transition: color .2s, filter .2s; }
.passage.structure { color:var(--red); font-weight:700; }
.passage.selected { outline:2px solid rgba(158,64,56,.38); outline-offset:5px; background:rgba(158,64,56,.07); border-radius:4px; }
.passage.marked { border-left:2px solid var(--red); padding-left:4px; }
.memorize .passage:not(.revealed) { color:transparent; text-shadow: 0 0 0 rgba(79,72,59,.18); background:linear-gradient(180deg, rgba(158,64,56,.16), rgba(158,64,56,.04)); border-radius:5px; cursor:pointer; }
.memorize .passage:not(.revealed)::after { content:"點擊揭示"; color:rgba(158,64,56,.68); font-size:10px; writing-mode:horizontal-tb; }
.edge-arrow { position:absolute; z-index:2; display:grid; place-items:center; width:38px; height:38px; color:var(--teal); background:rgba(255,250,237,.78); border:1px solid rgba(80,58,35,.17); border-radius:50%; box-shadow:0 8px 18px rgba(55,38,20,.12); font-size:29px; line-height:1; }
.edge-arrow:hover { color:#fff; background:var(--red); }
.edge-left { left: 1px; }
.edge-right { right: 1px; }

.reader-footer { display:flex; align-items:center; gap:16px; min-height:50px; padding: 12px 6px 0; }
.scroll-stack { display:flex; flex-direction:column; align-items:stretch; gap:20px; max-height:calc(100vh - 160px); overflow:auto; padding:12px 18px 24px; background:rgba(211,192,159,.24); }
.scroll-stack .paper { flex:0 0 auto; }
.scroll-stack .paper.full { min-height:580px; }
.book-spread.single { grid-template-columns:1fr; width:min(100%, 920px); max-width:920px; }
.book-spread.single .vertical-columns { gap:12px; padding-inline:18px; overflow-x:hidden; }
.book-spread.single .passage { font-size:var(--page-font-size, 17px); line-height:1.68; letter-spacing:.02em; }
.book-spread.single .paper.left { display:none; }
.book-spread.single .paper.right { border-radius:6px; }
.book-spread.scroll-stack { width:min(100%, 860px); height:100%; grid-template-columns:1fr; background:transparent; border:0; box-shadow:none; overflow:auto; }
.mobile-reading-scroll { display:none; }
.chapter-caption { min-width:150px; color:var(--ink-soft); font-size:11px; }
.progress-track { flex:1; height:4px; overflow:hidden; border-radius:99px; background:rgba(123,96,63,.2); }
.progress-value { width:0; height:100%; border-radius:99px; background:var(--red); transition:width .25s ease; }
.page-counter { min-width:56px; color:var(--ink-soft); font-size:11px; text-align:center; }
.next-page-button { padding:9px 18px; color:#fff; background:var(--red); border-radius:7px; font-size:12px; box-shadow:0 7px 13px rgba(158,64,56,.18); }
.next-page-button:hover { background:#84342f; }

.study-panel { grid-column:3; grid-row:2; display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 8px; border-left:1px solid rgba(64,54,40,.13); background:rgba(246,242,231,.32); }
.study-button { display:flex; flex-direction:column; align-items:center; gap:4px; width:70px; padding:8px 4px; color:var(--ink); background:transparent; border-radius:9px; }
.study-button:hover, .study-button.active { color:var(--red); background:rgba(255,255,255,.43); }
.study-button span { display:grid; place-items:center; width:24px; height:24px; font-size:20px; }
.study-button small { font-size:10px; white-space:nowrap; }

.search-dialog, .notes-drawer { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(24,46,45,.36); backdrop-filter:blur(8px); }
.search-dialog[hidden], .notes-drawer[hidden] { display:none; }
.records-drawer, .print-dialog { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(24,46,45,.36); backdrop-filter:blur(8px); }
.records-drawer[hidden], .print-dialog[hidden] { display:none; }
.focus-reader-dialog { position:fixed; inset:0; z-index:11; display:grid; place-items:center; padding:16px; background:rgba(24,46,45,.48); backdrop-filter:blur(12px); }
.focus-reader-dialog[hidden] { display:none; }
.focus-reader-card { box-sizing:border-box; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; width:min(1120px, calc(100vw - 32px)); height:min(90vh, 900px); min-height:0; padding:20px; border:1px solid rgba(255,255,255,.58); border-radius:18px; background:rgba(248,241,224,.97); box-shadow:var(--shadow); }
.focus-reader-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 12px; }
.focus-reader-heading > div { display:flex; align-items:baseline; gap:12px; }
.focus-reader-heading strong { color:var(--teal); font-size:20px; }
.focus-reader-heading span { color:var(--ink-soft); font-size:11px; }
.focus-reader-toolbar { display:flex; align-items:center; gap:8px; padding-bottom:12px; }
.focus-reader-toolbar .secondary-button { min-width:38px; }
#focusZoomLabel { min-width:48px; color:var(--red); font-size:12px; text-align:center; }
.focus-viewport { box-sizing:border-box; position:relative; min-height:0; overflow:hidden; border:1px solid rgba(123,84,43,.26); border-radius:10px; background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.65), transparent 42%), #e8d6b7; cursor:grab; touch-action:none; }
.focus-viewport.dragging { cursor:grabbing; }
.focus-paper { box-sizing:border-box; position:absolute; inset:24px; min-width:calc(100% - 48px); min-height:calc(100% - 48px); overflow:hidden; padding:34px 22px 28px; border:1px solid rgba(123,84,43,.24); border-radius:7px; background:linear-gradient(105deg, rgba(255,255,255,.34), transparent 15%), var(--paper); box-shadow:0 14px 26px rgba(67,48,27,.15), inset 0 0 24px rgba(95,59,31,.08); transform-origin:top right; will-change:transform; }
.focus-paper::before { content:""; position:absolute; inset:20px; border:1px solid rgba(143,87,51,.23); pointer-events:none; }
.focus-content { position:absolute; inset:0; overflow:visible; transform-origin:top right; will-change:transform; }
.focus-paper .paper-title, .focus-paper .paper-page { z-index:3; }
.focus-paper .vertical-columns { box-sizing:border-box; width:100%; height:100%; min-height:0; align-items:flex-start; padding:42px 28px 22px; overflow:visible; overscroll-behavior:contain; gap:20px; }
.focus-paper .passage { font-size:24px; line-height:1.9; letter-spacing:.04em; }
.focus-pan-controls { display:flex; align-items:center; justify-content:center; gap:8px; padding-top:12px; }
.focus-pan-controls > div { display:flex; gap:6px; }
.focus-pan-controls .secondary-button { min-width:36px; padding-inline:9px; }
.focus-pan-controls span { margin-left:8px; color:var(--ink-soft); font-size:10px; }
.search-card, .notes-card { position:relative; width:min(520px, calc(100vw - 32px)); padding:28px; border:1px solid rgba(255,255,255,.55); border-radius:16px; background:rgba(248,241,224,.96); box-shadow:var(--shadow); }
.records-card, .print-card { position:relative; width:min(760px, calc(100vw - 32px)); max-height:min(82vh, 760px); overflow:auto; padding:28px; border:1px solid rgba(255,255,255,.55); border-radius:16px; background:rgba(248,241,224,.96); box-shadow:var(--shadow); }
.print-card { width:min(560px, calc(100vw - 32px)); }
.search-card h2, .notes-card h2 { margin:0 0 15px; font-size:20px; }
.records-card h2, .print-card h2 { margin:0 0 8px; font-size:20px; }
.search-card input, .notes-card textarea { width:100%; border:1px solid rgba(74,66,53,.2); border-radius:8px; padding:11px 12px; color:var(--ink); background:rgba(255,255,255,.6); outline:none; }
.notes-card input, .notes-card select, .records-card select { width:100%; border:1px solid rgba(74,66,53,.2); border-radius:8px; padding:8px 10px; color:var(--ink); background:rgba(255,255,255,.6); outline:none; }
.search-card input:focus, .notes-card textarea:focus { border-color:var(--red); }
.notes-card input:focus, .notes-card select:focus, .records-card select:focus { border-color:var(--red); }
.search-results { display:flex; flex-direction:column; gap:5px; max-height:340px; overflow:auto; margin-top:15px; }
.result-button { padding:9px; color:var(--ink); background:rgba(255,255,255,.34); border-radius:7px; text-align:left; font-size:12px; }
.result-button:hover { background:#fff; }
.result-page { display:block; margin-top:3px; color:var(--ink-soft); font-size:10px; }
.dialog-close { position:absolute; top:12px; right:14px; color:var(--ink-soft); background:transparent; font-size:25px; }
.notes-heading { display:flex; justify-content:space-between; }
.notes-heading .dialog-close { position:static; }
.notes-card p { color:var(--ink-soft); font-size:11px; }
.notes-card textarea { min-height:150px; resize:vertical; }
.notes-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.notes-form-row label, .records-toolbar label { display:grid; gap:5px; color:var(--ink-soft); font-size:11px; }
.notes-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:12px; }
.secondary-button { padding:9px 14px; color:var(--teal); background:rgba(215,199,173,.38); border-radius:7px; font-size:12px; }
.secondary-button:hover { background:rgba(215,199,173,.7); }
.save-button { margin-top:12px; padding:10px 18px; color:#fff; background:var(--red); border-radius:7px; }
.notes-list, .records-list { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow:auto; margin-top:18px; }
.notes-list:empty::before { content:'此頁還沒有筆記'; color:var(--ink-soft); font-size:12px; padding:12px 0; }
.note-item, .record-item { display:grid; gap:6px; padding:10px 12px; border:1px solid rgba(111,75,43,.16); border-radius:9px; background:rgba(255,255,255,.34); }
.note-meta, .record-meta { display:flex; justify-content:space-between; gap:10px; color:var(--ink-soft); font-size:10px; }
.note-content, .record-content { color:var(--ink); font-size:12px; line-height:1.55; white-space:pre-wrap; }
.note-tags { color:var(--red); font-size:10px; }
.note-item-actions { display:flex; justify-content:flex-end; gap:6px; }
.mini-button { padding:4px 8px; color:var(--teal); background:rgba(215,199,173,.4); border-radius:5px; font-size:10px; }
.mini-button.danger { color:var(--red); }
.records-toolbar { display:flex; align-items:flex-end; gap:12px; margin:15px 0; }
.records-toolbar label { min-width:150px; }
.records-count { flex:1; color:var(--ink-soft); font-size:11px; }
.records-list { max-height:54vh; margin-top:0; }
.record-item { width:100%; text-align:left; cursor:pointer; }
.record-item:hover { border-color:rgba(158,64,56,.42); background:#fffaf0; }
.record-type { color:var(--red); font-size:10px; }
.print-card p { color:var(--ink-soft); font-size:11px; line-height:1.6; }
.print-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.print-option { padding:13px 12px; color:var(--teal); background:rgba(215,199,173,.38); border:1px solid rgba(111,75,43,.12); border-radius:8px; text-align:left; font-size:12px; }
.print-option:hover { color:#fff; background:var(--red); }
#printSheet { display:none; }
.print-page { min-height:250mm; padding:10mm 8mm; color:#2b2925; background:#fff; page-break-after:always; }
.print-page:last-child { page-break-after:auto; }
.print-heading { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:5mm; border-bottom:1px solid #bca98f; color:#8e3831; font-size:12px; }
.print-columns { display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:8mm; height:220mm; padding:10mm 5mm; direction:rtl; }
.print-column { flex:0 0 auto; color:#2b2925; font-size:15px; line-height:1.8; writing-mode:vertical-rl; text-align:start; white-space:pre-wrap; }
.print-column.structure { color:#9e4038; font-weight:700; }
.print-footer { padding-top:4mm; color:#957a55; font-size:10px; text-align:center; }
.print-notes-title { margin:8mm 0 5mm; color:#8e3831; font-size:16px; }
.print-notes-table { width:100%; border-collapse:collapse; font-size:10px; }
.print-notes-table th, .print-notes-table td { padding:3mm; border:1px solid #cdbda7; vertical-align:top; text-align:left; }
.print-notes-table th { color:#6d4530; background:#f4ead7; }
body.printing > :not(#printSheet) { display:none !important; }
body.printing { background:#fff; }
body.printing #printSheet { display:block; }
@page { size:A4; margin:0; }
.toast { position:fixed; z-index:20; left:50%; bottom:24px; transform:translate(-50%, 20px); padding:10px 16px; color:#fff; background:rgba(24,46,45,.92); border-radius:999px; opacity:0; pointer-events:none; transition:.2s ease; font-size:12px; }
.toast.show { opacity:1; transform:translate(-50%,0); }

body.night { --ink:#eee7d9; --ink-soft:#b6b6aa; --paper:#e7dac3; --paper-deep:#cab797; --teal:#9eb4ac; --teal-dark:#102523; --line:rgba(255,255,255,.18); background:linear-gradient(130deg,#111f22,#233735 55%,#162c2c); }
body.night .app-shell { background:rgba(22,37,36,.86); border-color:rgba(255,255,255,.1); }
body.night .topbar, body.night .toc-panel, body.night .study-panel { background:rgba(24,42,41,.55); }
body.night .paper { color:#2b2925; }
body.night .brand-block h1, body.night .panel-heading, body.night .chapter-item, body.night .study-button { color:#eee7d9; }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns:210px minmax(0,1fr) 76px; width:calc(100vw - 24px); margin:12px auto; min-height:calc(100vh - 24px); }
  .reader-area { padding-inline:14px; }
  .mode-tab { padding-inline:7px; font-size:10px; }
  .layout-tab { padding-inline:7px; }
  .paper { padding-inline:12px; }
  .vertical-columns { gap:12px; padding-inline:18px; }
  .passage { font-size:16px; }
}
@media (max-width: 820px) {
  html, body { overflow-y:auto; }
  .app-shell { display:block; height:auto; min-height:calc(100vh - 24px); max-height:none; overflow:visible; }
  .topbar { height:68px; }
  .toc-panel { position:fixed; z-index:9; top:12px; bottom:12px; left:12px; width:min(290px,80vw); transform:translateX(-110%); transition:.25s ease; border:1px solid rgba(255,255,255,.5); border-radius:14px; box-shadow:var(--shadow); }
  .toc-panel.open { transform:translateX(0); }
  .study-panel { display:flex; flex-direction:row; justify-content:space-around; gap:0; padding:8px; border:0; border-top:1px solid rgba(64,54,40,.13); }
  .study-button { width:auto; padding:5px 7px; }
  .study-button small { font-size:9px; }
  .reader-area { padding:0 10px 10px; }
  .reader-toolbar { gap:8px; min-height:52px; }
  .mobile-toc-button { display:block; }
  .breadcrumb { font-size:10px; }
  .mode-tabs { max-width:45vw; overflow-x:auto; }
  .layout-tabs { display:none; }
  .mode-tab { padding:6px 7px; }
  .book-spread { grid-template-columns:1fr; height:auto; min-height:min(72vh,660px); max-height:none; width:100%; padding:9px; }
  .book-spread.single .vertical-columns {
    overflow-x:scroll;
    overflow-y:auto;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:auto;
    scrollbar-color:rgba(158,64,56,.78) rgba(110,80,48,.18);
    scrollbar-gutter:stable;
  }
  .book-spread.single .vertical-columns::-webkit-scrollbar {
    display:block;
    height:12px;
  }
  .book-spread.single .vertical-columns::-webkit-scrollbar-track {
    background:rgba(110,80,48,.18);
    border-radius:999px;
  }
  .book-spread.single .vertical-columns::-webkit-scrollbar-thumb {
    min-width:42px;
    background:rgba(158,64,56,.82);
    border:3px solid transparent;
    border-radius:999px;
    background-clip:content-box;
  }
  .mobile-reading-scroll {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 30px 30px;
    align-items:center;
    gap:6px;
    min-height:34px;
    margin:6px 2px 0;
    padding:4px 6px;
    color:var(--ink-soft);
    background:rgba(255,250,237,.72);
    border:1px solid rgba(117,80,42,.24);
    border-radius:9px;
  }
  .mobile-reading-scroll[hidden] { display:none; }
  .mobile-reading-scroll-label {
    font-size:10px;
    white-space:nowrap;
  }
  .mobile-reading-scroll input[type="range"] {
    width:100%;
    height:24px;
    margin:0;
    accent-color:var(--red);
    cursor:ew-resize;
  }
  .mobile-reading-scroll button {
    display:grid;
    place-items:center;
    width:30px;
    height:26px;
    padding:0;
    color:#fff;
    background:var(--red);
    border-radius:6px;
    font-size:16px;
    line-height:1;
  }
  .paper.left { display:none; }
  .reader-stage { overflow:visible; }
  .paper.right { display:block; min-height:min(72vh,640px); border-radius:6px; }
  .edge-left { left:-3px; }
  .edge-right { right:-3px; }
  .reader-footer { gap:8px; }
  .chapter-caption { min-width:0; max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .next-page-button { padding:8px 11px; }
}
@media (max-width: 520px) {
  .app-shell { width:100vw; margin:0; border-radius:0; }
  .topbar { padding-inline:14px; }
  .home-link { font-size:11px; }
  .brand-block h1 { font-size:17px; }
  .brand-block p { font-size:9px; }
  .header-tools { gap:0; }
  .mode-tabs { max-width:39vw; }
  .mode-tab { font-size:9px; }
  .mode-tab:nth-child(n+2) { display:none; }
  .paper.right { min-height:calc(100vh - 210px); }
  .book-spread.single .vertical-columns { padding:38px 16px 28px; gap:15px; }
  .passage { font-size:17px; }
  .study-button span { font-size:17px; }
  .study-button small { font-size:8px; }
  .notes-form-row, .print-options { grid-template-columns:1fr; }
  .notes-card, .records-card, .print-card { padding:20px; }
  .records-toolbar { align-items:stretch; flex-direction:column; }
  .records-toolbar label { min-width:0; }
  .focus-reader-dialog { padding:0; }
  .focus-reader-card { width:100vw; height:100vh; max-height:100dvh; border:0; border-radius:0; padding:14px; overflow:hidden; }
  .focus-reader-heading strong { font-size:17px; }
  .focus-reader-toolbar { overflow-x:auto; }
  .focus-viewport {
    overflow:auto;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:auto;
    scrollbar-color:rgba(158,64,56,.82) rgba(110,80,48,.18);
    scrollbar-gutter:stable;
  }
  .focus-viewport::-webkit-scrollbar { width:10px; height:10px; }
  .focus-viewport::-webkit-scrollbar-track { background:rgba(110,80,48,.18); border-radius:999px; }
  .focus-viewport::-webkit-scrollbar-thumb { background:rgba(158,64,56,.82); border:2px solid transparent; border-radius:999px; background-clip:content-box; }
  .focus-paper {
    position:relative;
    inset:auto;
    width:max(calc(100% - 48px), 520px);
    min-width:520px;
    height:680px;
    min-height:680px;
    margin:24px;
    overflow:visible;
  }
  .focus-content {
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
  }
  .focus-paper .vertical-columns { width:100%; height:100%; min-height:0; overflow:visible; }
  .focus-paper .passage { font-size:21px; }
  .focus-pan-controls span { display:none; }
}