:root {
  color-scheme: light;
  --bg: #f3f2ed;
  --surface: #fff;
  --surface2: #e9ece7;
  --text: #17211f;
  --muted: #586660;
  --brand: #123f3a;
  --brand2: #1e625a;
  --on-brand: #fff;
  --line: #d9ddd8;
  --danger: #a43f3f;
  --shadow: 0 8px 24px rgba(20,42,38,.055);
  --radius: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1514; --surface: #17201e; --surface2: #25312d;
    --text: #f2f4f1; --muted: #acb9b3; --brand: #85c8b9;
    --brand2: #a0d7ca; --on-brand: #102c29; --line: #33413b;
    --danger: #f19c9c; --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1514; --surface: #17201e; --surface2: #25312d;
  --text: #f2f4f1; --muted: #acb9b3; --brand: #85c8b9;
  --brand2: #a0d7ca; --on-brand: #102c29; --line: #33413b;
  --danger: #f19c9c; --shadow: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; }
html { scrollbar-gutter: stable; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand2); outline-offset: 3px; }
button, input, select { min-height: 44px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: 0 0 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { width: 100%; max-width: 760px; margin: auto; padding: 0 20px calc(110px + env(safe-area-inset-bottom)); }
.app-header { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: calc(28px + env(safe-area-inset-top)) 2px 24px; }
.app-header > div { min-width: 0; }
.app-header h1 { font-size: clamp(28px, 5vw, 34px); line-height: 1.15; letter-spacing: -1px; margin: 7px 0 9px; }
.app-header p { margin: 0; color: var(--muted); font-size: 13px; max-width: 540px; }
.eyebrow { display: block; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 11px; color: var(--brand2); }
h2 { font-size: 25px; line-height: 1.25; margin: 4px 0 0; letter-spacing: -.5px; }
h3 { margin: 0; font-size: 17px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.continue-card { padding: 20px; min-height: 260px; box-shadow: var(--shadow); }
.continue-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.continue-top > div { min-width: 0; }
.continue-card h2 { font-size: 28px; }
.continue-card p { margin: 6px 0 0; min-height: 40px; color: var(--muted); font-size: 14px; }
.pill { flex-shrink: 0; background: var(--surface2); border-radius: 99px; padding: 7px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.progress-track { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin: 16px 0 8px; }
.progress-track > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; width: 0; }
.progress-meta { display: flex; justify-content: space-between; align-items: center; min-height: 18px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; border: 0; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 650; }
.button.primary { background: var(--brand); color: var(--on-brand); }
.button.secondary { background: var(--surface2); color: var(--text); }
.button.danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.button.small { font-size: 13px; padding: 9px 12px; }
.button .icon { width: 18px; height: 18px; flex-basis: 18px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 18px 0; margin: 10px 0 8px; border-bottom: 1px solid var(--line); }
.summary-strip > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.summary-strip > div + div { border-left: 1px solid var(--line); }
.summary-strip strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.summary-strip span { font-size: 12px; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 2px 14px; }
.section-heading > div { min-width: 0; }
.section-heading.top-gap { margin-top: 8px; }
.volume-list { display: grid; gap: 10px; }
.volume-card, .volume-placeholder { min-height: 98px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.volume-card { width: 100%; padding: 15px 14px; display: grid; grid-template-columns: 44px minmax(0,1fr) 24px; gap: 12px; align-items: center; text-align: left; }
.volume-card:hover { border-color: var(--brand2); }
.volume-number { width: 44px; height: 44px; border-radius: 12px; background: var(--surface2); display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--brand2); }
.volume-copy { min-width: 0; }
.volume-copy strong { display: block; font-size: 16px; }
.volume-copy .volume-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.volume-chevron { color: var(--muted); }
.mini-progress { display: block; height: 4px; background: var(--surface2); border-radius: 99px; margin-top: 9px; overflow: hidden; }
.mini-progress > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.filters { display: grid; grid-template-columns: minmax(0,1fr) 160px; gap: 10px; margin-bottom: 14px; }
.filters label { min-width: 0; }
.control { width: 100%; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font-size: 16px; }
.control::placeholder { color: var(--muted); opacity: 1; }
.textarea { min-height: 120px; resize: vertical; }
.stack { display: grid; gap: 10px; }
.note-card { padding: 18px; overflow-wrap: anywhere; }
.note-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.note-card h3 { margin-top: 4px; }
.note-card p { color: var(--muted); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.note-meta { color: var(--muted); font-size: 12px; }
.tags, .note-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { background: var(--surface2); border-radius: 99px; padding: 5px 9px; font-size: 12px; }
.note-actions { margin-top: 14px; gap: 8px; }
.empty-state { padding: 28px 22px; text-align: center; }
.empty-state > .icon { margin: 0 auto 14px; color: var(--brand2); }
.empty-state p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.empty-state .button { margin-top: 16px; }
#historySummary { padding: 20px; min-height: 100px; }
#historySummary .continue-top { align-items: center; }
.history-stack { margin-top: 12px; }
.history-card { padding: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.history-volume { width: 42px; height: 42px; display: grid; place-items: center; background: var(--surface2); border-radius: 12px; font-weight: 700; }
.history-card h3 { font-size: 15px; }
.history-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.history-pages { text-align: right; font-size: 12px; color: var(--muted); }
.settings-card { padding: 4px 18px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.setting-row strong, .setting-row span { display: block; }
.setting-row span { font-size: 13px; color: var(--muted); margin-top: 4px; }
.setting-row button { flex-shrink: 0; }
.divider { height: 1px; background: var(--line); }
.prose { padding: 18px; }
.prose p { margin: 0 0 10px; line-height: 1.6; font-size: 14px; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; min-height: calc(76px + env(safe-area-inset-bottom)); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.nav-item { min-height: 58px; min-width: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; }
.nav-item.active { color: var(--brand2); background: var(--surface2); }
.icon-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.banner { position: fixed; z-index: 300; top: 0; left: 0; right: 0; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #734519; color: #fff; text-align: center; font-size: 13px; }
body:has(#readerView:not(.hidden)) .banner { display: none; }
.install-banner { position: fixed; z-index: 90; bottom: calc(88px + env(safe-area-inset-bottom)); left: 14px; right: 14px; max-width: 700px; margin: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.install-banner strong, .install-banner span { display: block; }
.install-banner span { font-size: 13px; color: var(--muted); margin-top: 4px; }
.view { display: none; }
.view.active { display: block; }
.view h2[tabindex="-1"]:focus { outline: none; }
.reader-view { position: fixed; z-index: 200; inset: 0; width: 100vw; background: #242b28; color: #fff; display: flex; flex-direction: column; }
.reader-header { flex-shrink: 0; min-height: calc(64px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 8px 8px; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px; gap: 4px; align-items: center; background: #102c29; }
.reader-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; }
.reader-icon:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.reader-title { text-align: center; min-width: 0; }
.reader-title strong, .reader-title > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-title strong { font-size: 14px; font-weight: 600; }
.reader-title > span { font-size: 12px; color: #c4d5cd; margin-top: 3px; font-variant-numeric: tabular-nums; }
.reader-progress { flex: 0 0 3px; height: 3px; background: #284640; }
.reader-progress > span { display: block; height: 100%; background: #d1b067; width: 0; }
.reader-canvas-area { position: relative; flex: 1; min-height: 0; }
.pdf-scroller { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-anchor: none; }
.pdfViewer { padding: 1px 0 12px; }
.pdfViewer .page { box-sizing: content-box; margin: 12px auto; border: 0; box-shadow: 0 3px 18px rgba(0,0,0,.24); }
.pdfViewer .page canvas { display: block; }
.pdf-scroller.is-loading .pdfViewer { opacity: 0; }
.reader-loading, .reader-error { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(420px,calc(100% - 32px)); background: #102c29; color: #fff; border-radius: 18px; padding: 24px; text-align: center; box-shadow: 0 14px 45px rgba(0,0,0,.3); max-height: calc(100% - 24px); overflow: auto; }
.reader-loading strong, .reader-loading span { display: block; }
.reader-loading span { font-size: 13px; color: #c4d5cd; margin-top: 8px; }
.reader-loading progress { display: block; width: 100%; height: 6px; margin-top: 18px; accent-color: #d1b067; }
.spinner { width: 28px; height: 28px; border: 3px solid #48635b; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.reader-error p { color: #c4d5cd; font-size: 14px; line-height: 1.6; }
.reader-error .button-row { justify-content: center; }
.reader-error .button.primary { background: #a0d7ca; color: #102c29; }
.reader-error .button.secondary { background: #2b4942; color: #fff; }
.reader-error details { margin-top: 18px; text-align: left; font-size: 12px; overflow-wrap: anywhere; color: #c4d5cd; }
.reader-error summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.reader-toolbar { flex-shrink: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); min-height: 68px; background: #102c29; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.toolbar-button { min-height: 44px; min-width: 44px; padding: 2px 6px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.toolbar-button > span { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.toolbar-button small { font-size: 12px; color: #c4d5cd; }
.zoom-controls { display: flex; align-items: center; gap: 4px; }
.fit-button { width: 70px; }
.reader-search { flex-shrink: 0; padding: 10px 12px; background: #102c29; border-top: 1px solid #35534b; }
.reader-search-form { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,44px); gap: 4px; }
.reader-search .control { color-scheme: dark; background: #203d35; color: #fff; border-color: #48635b; }
.reader-search .control::placeholder { color: #c4d5cd; }
#readerSearchStatus { display: block; margin-top: 7px; color: #c4d5cd; font-size: 12px; }
.reader-view :focus-visible { outline-color: #d1b067; }
dialog { color: var(--text); border: 0; background: transparent; padding: 0; width: min(94vw,560px); max-height: calc(100dvh - 24px); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.modal { background: var(--surface); border-radius: 20px; padding: 20px; display: grid; gap: 16px; max-height: calc(100dvh - 24px); overflow: auto; }
dialog:has(.compact-modal) { width: min(94vw,420px); }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-heading h3 { font-size: 22px; margin-top: 4px; }
.modal label > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 7px 2px; }
.modal p { margin: 0; font-size: 14px; line-height: 1.6; }
.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.modal-actions.split { justify-content: space-between; }
.modal-actions > div { display: flex; gap: 8px; }
.inset { padding: 14px; background: var(--surface2); }
.inset p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.large-number { font-size: 26px; font-weight: 650; text-align: center; }
.toast { position: fixed; z-index: 400; left: 50%; bottom: calc(94px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: #17211f; color: #fff; padding: 12px 16px; border-radius: 14px; font-size: 14px; text-align: center; opacity: 0; pointer-events: none; }
.toast.show { opacity: 1; }
@media (min-width: 680px) { .volume-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .reader-toolbar { justify-content: center; gap: 40px; } }
@media (min-width: 800px) { .bottom-nav { left: 50%; right: auto; bottom: 16px; width: min(700px,calc(100vw - 40px)); transform: translateX(-50%); min-height: 76px; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding-bottom: 8px; } }
@media (max-width: 520px) { .app-shell { padding-left: 14px; padding-right: 14px; } .app-header { gap: 12px; padding-top: calc(24px + env(safe-area-inset-top)); } .filters { grid-template-columns: 1fr; } .section-heading h2 { font-size: 23px; } .section-heading { gap: 8px; } .reader-toolbar { padding-left: 8px; padding-right: 8px; gap: 4px; } .zoom-controls { gap: 2px; } .bottom-nav { padding-left: 6px; padding-right: 6px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }