:root {
  --v2-tool-surface: color-mix(in srgb, var(--reader-page, #f8f2e8) 92%, transparent);
  --v2-tool-border: color-mix(in srgb, var(--reader-text, #261d18) 18%, transparent);
  --reader-font-weight: 400;
  --reader-paragraph-gap: .75em;
  --reader-v2-page-margin: 46px;
  --reader-v2-measure: 40ch;
  --reader-v2-align: left;
}

.reader-view .page-sheet p,
.reader-view .page-sheet li { font-weight: var(--reader-font-weight); }
.reader-view .page-sheet p { margin-block-end: var(--reader-paragraph-gap); text-align: var(--reader-v2-align); }

/* A quiet paper grain gives every real text page a tactile printed feel. The
   pattern is CSS-only, scales with the page, and disappears in dark/OLED modes. */
.reader-view[data-theme='paper'] .page-sheet:not(.measure-page),
.reader-view[data-theme='paper'] .flipbook-physical-page {
  background-color: var(--reader-page);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(91, 62, 39, .045) 0 .7px, transparent .9px),
    radial-gradient(circle at 76% 68%, rgba(255, 255, 255, .36) 0 .8px, transparent 1px),
    linear-gradient(105deg, rgba(118, 83, 53, .035), transparent 22%, rgba(255, 255, 255, .12) 78%, rgba(118, 83, 53, .025));
  background-size: 9px 11px, 13px 15px, 100% 100%;
}

.reader-view .reader-dropcap {
  text-indent: 0;
}

.reader-view .reader-dropcap::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: color-mix(in srgb, var(--accent) 72%, var(--reader-text));
  font-size: 3.7em;
  line-height: .72;
  font-weight: 500;
}
.reader-view .page-sheet p,
.reader-view .page-sheet li,
.reader-view .chapter-heading { max-width: var(--reader-v2-measure); margin-inline: auto; }
.reader-view .measure-page,
.reader-view:not(.flipbook-spread-mode) .page-sheet { padding-inline: var(--reader-v2-page-margin); }

.reader-tools-dock {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--v2-tool-border);
  border-radius: 18px;
  background: var(--v2-tool-surface);
  box-shadow: 0 12px 40px rgba(27, 19, 14, .16);
  backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease;
}
.reader-tools-dock button {
  min-width: 58px;
  min-height: 48px;
  padding: 6px 9px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.reader-tools-dock button:hover,
.reader-tools-dock button:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); }
.reader-tools-dock span { font-size: 17px; line-height: 1; }
.reader-tools-dock small { font-size: 9px; letter-spacing: .02em; }
.reader-view.controls-hidden .reader-tools-dock { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }

.reader-v2-drawer {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  width: min(430px, 94vw);
  height: 100dvh;
  padding: max(26px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  overflow: auto;
  border-left: 1px solid var(--v2-tool-border);
  background: var(--reader-page, #f8f2e8);
  color: var(--reader-text, #261d18);
  box-shadow: -20px 0 60px rgba(26, 18, 13, .16);
  transform: translateX(105%);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}
.reader-v2-drawer.open { transform: translateX(0); }
.reader-v2-drawer-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 24px; }
.reader-v2-drawer-head small { color: var(--reader-muted, #75675d); font-size: 9px; letter-spacing: .16em; }
.reader-v2-drawer-head h2 { margin: 4px 0 0; font: 500 38px/1 Georgia, serif; }
.reader-v2-drawer-head > button,
.lookup-head button,
.tts-panel > button:last-child { width: 38px; height: 38px; border: 1px solid var(--v2-tool-border); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.reader-v2-backdrop { position: fixed; z-index: 65; inset: 0; background: rgba(15, 11, 9, .24); backdrop-filter: blur(2px); }
.reader-v2-muted { color: var(--reader-muted, #75675d); font-size: 12px; line-height: 1.55; }

.reader-search-scope,
.notebook-actions,
.notebook-export,
.reader-v2-mode-options > div,
.reader-v2-align-options,
.reader-v2-focus-options { display: flex; flex-wrap: wrap; gap: 7px; }
.reader-search-scope button,
.notebook-actions button,
.notebook-export button,
.reader-v2-mode-options button,
.reader-v2-align-options button,
.backup-tools button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--v2-tool-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.reader-search-scope button[aria-pressed='true'],
.notebook-actions button[aria-pressed='true'],
.reader-v2-mode-options button[aria-pressed='true'],
.reader-v2-align-options button[aria-pressed='true'] { background: var(--reader-text, #261d18); color: var(--reader-page, #fff); }
#readerSearchInput {
  width: 100%;
  min-height: 48px;
  margin: 14px 0 8px;
  padding: 0 14px;
  border: 1px solid var(--v2-tool-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--reader-page, #fff) 88%, var(--reader-text, #222) 2%);
  color: inherit;
}
.reader-search-results { display: grid; gap: 8px; margin-top: 16px; }
.reader-search-result {
  width: 100%;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--v2-tool-border);
  border-radius: 13px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.reader-search-result strong { display: block; font: 600 16px/1.25 Georgia, serif; }
.reader-search-result span { display: block; margin-top: 3px; color: var(--reader-muted, #75675d); font-size: 10px; }
.reader-search-result p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }

.notebook-items { display: grid; gap: 10px; margin: 18px 0; }
.notebook-item { padding: 14px; border: 1px solid var(--v2-tool-border); border-radius: 14px; }
.notebook-item blockquote { margin: 0; font: 500 17px/1.5 Georgia, serif; }
.notebook-item p { margin: 8px 0 0; line-height: 1.55; }
.notebook-item small { display: block; margin-top: 8px; color: var(--reader-muted, #75675d); }
.notebook-item-actions { display: flex; gap: 6px; margin-top: 10px; }
.notebook-item-actions button { border: 0; padding: 5px 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; }
.notebook-export { padding-top: 18px; border-top: 1px solid var(--v2-tool-border); }
.reader-view.notebook-split #readerNotebookDrawer { transform: translateX(0); width: min(380px, 36vw); }
.reader-view.notebook-split #readerStage,
.reader-view.notebook-split #readerFooter { margin-right: min(380px, 36vw); }

.selection-tools {
  position: fixed;
  z-index: 95;
  max-width: min(620px, calc(100vw - 22px));
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: #191512;
  color: #fffaf5;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}
.selection-tools[hidden] { display: none !important; }
.selection-tools > button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
.selection-tools > button:hover { background: rgba(255,255,255,.1); }
.selection-colors { display: flex; align-items: center; gap: 5px; padding: 0 7px; border-left: 1px solid rgba(255,255,255,.12); }
.selection-colors button { width: 18px; height: 18px; padding: 0; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; cursor: pointer; }
.selection-colors [data-highlight-color='amber'] { background: #f4cf73; }
.selection-colors [data-highlight-color='sage'] { background: #a8c99a; }
.selection-colors [data-highlight-color='sky'] { background: #9dc6e8; }
.selection-colors [data-highlight-color='rose'] { background: #e7a5ad; }
.selection-note-composer { flex: 1 0 100%; padding: 8px; }
.selection-note-composer textarea { width: 100%; resize: vertical; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px; background: #28221e; color: white; }
.selection-note-composer > div { display: flex; gap: 6px; margin-top: 6px; }
.selection-note-composer button { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 10px; background: transparent; color: white; }
#keepLineButton { display: none !important; }

::highlight(aasta-highlight-amber) { background: rgba(244, 207, 115, .55); color: inherit; }
::highlight(aasta-highlight-sage) { background: rgba(168, 201, 154, .5); color: inherit; }
::highlight(aasta-highlight-sky) { background: rgba(157, 198, 232, .5); color: inherit; }
::highlight(aasta-highlight-rose) { background: rgba(231, 165, 173, .5); color: inherit; }

.lookup-popover,
.tts-panel,
.reader-return-card {
  position: fixed;
  z-index: 100;
  border: 1px solid var(--v2-tool-border);
  background: var(--reader-page, #f8f2e8);
  color: var(--reader-text, #261d18);
  box-shadow: 0 18px 50px rgba(18, 12, 9, .2);
}
.lookup-popover { width: min(390px, calc(100vw - 24px)); max-height: min(520px, 70dvh); padding: 16px; overflow: auto; border-radius: 16px; }
.lookup-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lookup-head strong { font: 600 24px/1.1 Georgia, serif; }
#lookupBody h4 { margin: 16px 0 5px; }
#lookupBody p { margin: 5px 0; line-height: 1.55; }
.tts-panel { right: 14px; bottom: 90px; display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 15px; }
.tts-panel label { display: grid; gap: 2px; font-size: 9px; }
.tts-panel select, #ttsToggleButton { min-height: 34px; border: 1px solid var(--v2-tool-border); border-radius: 9px; background: transparent; color: inherit; }
#ttsToggleButton { padding: 0 12px; cursor: pointer; }
.tts-speaking { outline: 2px solid color-mix(in srgb, #d68a59 66%, transparent); outline-offset: 5px; border-radius: 4px; }
.reader-return-card { left: 50%; top: max(76px, env(safe-area-inset-top)); width: min(560px, calc(100vw - 24px)); padding: 18px 48px 18px 20px; border-radius: 16px; transform: translateX(-50%); }
.reader-return-card > button { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: inherit; font-size: 20px; }
.reader-return-card h3 { margin: 0 0 6px; font: 600 22px/1.15 Georgia, serif; }
.reader-return-card p { margin: 4px 0; line-height: 1.5; }

.spoiler-safe-return { padding: 16px; border: 1px solid var(--v2-tool-border); border-radius: 14px; }
.spoiler-safe-return h3 { margin: 0 0 7px; font: 600 22px/1.15 Georgia, serif; }
.spoiler-safe-return ul { margin: 10px 0 0; padding-left: 18px; }
.reading-memory-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.reading-memory-stat { padding: 13px; border: 1px solid var(--v2-tool-border); border-radius: 13px; }
.reading-memory-stat span { display: block; color: var(--reader-muted, #75675d); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.reading-memory-stat strong { display: block; margin-top: 4px; font: 600 22px/1 Georgia, serif; }
.backup-tools { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--v2-tool-border); }
.backup-tools h3 { margin: 0; }
.backup-tools p { color: var(--reader-muted, #75675d); line-height: 1.55; }

.reader-v2-mode-options,
.reader-v2-align-options,
.reader-v2-focus-options { margin: 0 0 18px; padding: 0; border: 0; }
.reader-v2-mode-options legend,
.reader-v2-align-options legend,
.reader-v2-focus-options legend { margin-bottom: 8px; font-weight: 700; }
.reader-v2-focus-options { display: grid; gap: 8px; }
.reader-v2-focus-options label { display: flex; align-items: center; gap: 8px; }

.reader-view[data-theme='oled'] { --reader-page: #000; --reader-text: #e8e8e8; --reader-muted: #9d9d9d; --reader-border: #222; background: #000; }
.reader-view[data-theme='oled'] .page-sheet { background: #000; color: #e8e8e8; }

.reader-view[data-reading-mode='clean'] .flipbook-spread,
.reader-view[data-reading-mode='scroll'] .flipbook-spread { display: none !important; }
.reader-view[data-reading-mode='clean'] .pages-track { opacity: 1 !important; pointer-events: auto !important; }
.reader-view[data-reading-mode='clean'] .page-sheet { box-shadow: 0 10px 34px rgba(28, 17, 12, .11); border-radius: 5px; }

.reader-view[data-reading-mode='scroll'] .reader-stage { overflow: hidden; }
.reader-view[data-reading-mode='scroll'] .pages-viewport { overflow-y: auto !important; overflow-x: hidden !important; align-items: start; padding: 24px 12px 140px; scroll-behavior: smooth; }
.reader-view[data-reading-mode='scroll'] .pages-track {
  position: relative !important;
  inset: auto !important;
  width: min(760px, 100%) !important;
  height: auto !important;
  margin: auto;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}
.reader-view[data-reading-mode='scroll'] .pages-track > .page-sheet {
  width: 100% !important;
  min-height: min(760px, calc(100dvh - 170px));
  flex: none !important;
  transform: none !important;
  box-shadow: 0 4px 18px rgba(28, 17, 12, .08);
}
.reader-view[data-reading-mode='scroll'] .page-controls,
.reader-view[data-reading-mode='scroll'] .chapter-edge { display: none !important; }

.reading-ruler { position: fixed; z-index: 20; left: 0; right: 0; height: 44px; border-top: 1px solid rgba(190, 119, 76, .26); border-bottom: 1px solid rgba(190, 119, 76, .26); background: rgba(213, 148, 105, .06); pointer-events: none; }
.reader-view[data-focus-paragraph='true'] .page-sheet p,
.reader-view[data-focus-paragraph='true'] .page-sheet li { opacity: .24; transition: opacity .15s ease; }
.reader-view[data-focus-paragraph='true'] .page-sheet .v2-focus-active { opacity: 1; }

.library-filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: -10px 0 26px; }
.library-filter-bar button { min-height: 39px; padding: 0 13px; border: 1px solid rgba(70,42,29,.2); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.library-filter-bar button[aria-pressed='true'] { background: #2b1711; color: #fff; }
.library-book-card.v2-hidden { display: none !important; }
.library-book-card[data-reading-state='reading']::after { content: 'Continue Reading'; position: absolute; top: 12px; right: 12px; padding: 5px 8px; border-radius: 999px; background: #2b1711; color: white; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.library-book-card { position: relative; }

@media (min-width: 1180px) {
  .reader-tools-dock { left: 14px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; }
  .reader-view.controls-hidden .reader-tools-dock { transform: translate(-10px, -50%); }
  .tts-panel { bottom: 18px; }
}

@media (max-width: 720px) {
  .reader-tools-dock { width: calc(100% - 16px); justify-content: space-between; bottom: max(6px, env(safe-area-inset-bottom)); border-radius: 16px; }
  .reader-tools-dock button { min-width: 0; flex: 1; padding-inline: 2px; }
  .reader-tools-dock button:nth-child(3) { display: none; }
  .reader-v2-drawer { width: 100%; top: auto; bottom: 0; height: min(82dvh, 760px); border-left: 0; border-top: 1px solid var(--v2-tool-border); border-radius: 20px 20px 0 0; transform: translateY(105%); }
  .reader-v2-drawer.open { transform: translateY(0); }
  .reader-view.notebook-split #readerStage,
  .reader-view.notebook-split #readerFooter { margin-right: 0; }
  .reader-view.notebook-split #readerNotebookDrawer { width: 100%; }
  .selection-tools { left: 11px !important; right: 11px; max-width: none; }
  .tts-panel { left: 8px; right: 8px; bottom: 78px; justify-content: space-between; }
  .reading-memory-stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-v2-drawer,
  .reader-tools-dock,
  .reader-view[data-focus-paragraph='true'] .page-sheet p { transition: none !important; }
}