.rsvp-stage { position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.rsvp-stage::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:color-mix(in srgb, var(--muted) 30%, transparent); }
/* Bar width + vertical offset are set per-render in js/modes/rsvp.js so they scale with the chunk font size. */
.rsvp-guide-top, .rsvp-guide-bot { position:absolute; left:50%; transform:translateX(-50%); width:18px; height:0; }
.rsvp-guide-top { border-bottom:2px solid var(--muted); }
.rsvp-guide-bot { border-top:2px solid var(--muted); }
.rsvp-word { position:absolute; left:50%; top:50%; white-space:nowrap; font-variant-numeric:tabular-nums; font-family: ui-monospace, monospace; color:var(--fg); }
.rsvp-word .p { color:var(--focal); }
.rsvp-context { position:absolute; bottom:6%; left:0; right:0; text-align:center; color:var(--muted); opacity:0; transition:opacity .2s; padding:0 1rem; }
.rsvp:not(.playing) .rsvp-context { opacity:1; }
.scroll-doc { position:relative; max-width:42rem; margin:0 auto; padding:2rem 1rem 60vh; line-height:1.7; color:var(--fg); }
.scroll-doc p { margin:0 0 1em; }
.page-viewport { position:relative; width:min(42rem, 92vw); height:100%; margin:0 auto; overflow:hidden; }
.page-flow { columns:1; column-gap:0; line-height:1.7; color:var(--fg); transition:transform .25s ease; will-change:transform; }
.page-flow p { margin:0 0 1em; break-inside:avoid-column; }
*{box-sizing:border-box} html,body{margin:0;height:100%;overscroll-behavior-y:none} body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}
#app{min-height:100%}
.muted{color:var(--muted)} .hidden-file{display:none}
.btn{border:0;border-radius:var(--radius);padding:.7em 1.1em;background:var(--panel);color:var(--fg);cursor:pointer;font-size:1rem;touch-action:manipulation}
.btn.primary{background:var(--accent);color:#fff}
.welcome-head{text-align:center;padding:5vh 1rem 2vh}.brand{font-size:2.4rem;margin:0}.tagline{margin:.4rem 0 0;color:var(--muted)}
.import-row{display:flex;gap:1rem;max-width:48rem;margin:1rem auto;padding:0 1rem;flex-wrap:wrap}
.import-col{flex:1 1 18rem;display:flex;flex-direction:column;gap:.6rem}
.paste-area{min-height:8rem;resize:vertical;border-radius:var(--radius);border:1px solid var(--panel);background:var(--panel);color:var(--fg);padding:.8rem;font:inherit}
.import-col.upload{align-items:center;justify-content:center;border:2px dashed var(--muted);border-radius:var(--radius);cursor:pointer;text-align:center;padding:1.5rem;color:var(--muted)}
.upload-icon{font-size:2rem}
.lib-head{max-width:48rem;margin:2rem auto .5rem;padding:0 1rem}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1rem;max-width:48rem;margin:0 auto;padding:0 1rem 4rem}
.lib-card{position:relative;background:var(--panel);border-radius:var(--radius);padding:1rem;cursor:pointer;min-height:6rem}
.lib-title{font-weight:600}.lib-del{position:absolute;top:.4rem;right:.4rem;background:transparent;border:0;color:var(--muted);cursor:pointer}
.lib-rename{position:absolute;top:.4rem;right:1.8rem;background:transparent;border:0;color:var(--muted);cursor:pointer}
.lib-rename-input{font:inherit;font-weight:600;width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:6px;padding:.1rem .3rem}
/* --- library: grid/list views, covers, per-item stats --- */
/* Heading + view toggle share the grid's max-width so they line up with the items. */
.lib-head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:48rem;margin:2rem auto .4rem;padding:0 1rem}
.lib-head-row .lib-head{margin:0;padding:0}
.lib-view-toggle{display:flex;gap:.2rem}
.lib-controls-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;max-width:48rem;margin:0 auto .6rem;padding:0 1rem}
.lib-search{flex:1 1 8rem;min-width:0;background:var(--panel);border:1px solid var(--panel);border-radius:var(--radius);color:var(--fg);padding:.4rem .7rem;font:inherit}
.lib-sort{background:var(--panel);border:1px solid var(--panel);border-radius:var(--radius);color:var(--fg);padding:.4rem .5rem;font:inherit;cursor:pointer}
/* Cover: a 3:4 portrait image (or initials placeholder) atop each grid card. */
.lib-cover{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;margin-bottom:.6rem;background:var(--bg)}
.lib-cover-ph{display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--panel))}
.lib-body{min-width:0}
/* Compact, tabular stats line so digits don't jitter as progress updates. */
.lib-stats{display:flex;flex-wrap:wrap;gap:.1rem .8rem;margin-top:.45rem;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.lib-stat{white-space:nowrap}
.lib-progress{height:4px;border-radius:999px;background:color-mix(in srgb, var(--muted) 25%, transparent);margin-top:.5rem;overflow:hidden}
.lib-progress-bar{height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
/* Controls: anchored to the card's top-right corner; flow inline in list rows.
   position:static here overrides the older absolute .lib-rename/.lib-del rules. */
.lib-controls{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.05rem}
.lib-controls .lib-cover-btn,.lib-controls .lib-rename,.lib-controls .lib-del{position:static;top:auto;right:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:.1rem .25rem;font-size:.95rem;line-height:1}
/* List view: a vertical stack of rows = thumbnail + body + actions. */
.lib-list{display:flex;flex-direction:column;gap:.5rem;max-width:48rem;margin:0 auto;padding:0 1rem 4rem}
.lib-row{position:relative;display:flex;align-items:center;gap:.8rem;background:var(--panel);border-radius:var(--radius);padding:.6rem .8rem;cursor:pointer}
.lib-row .lib-cover{width:3rem;flex:0 0 auto;margin:0}
.lib-row .lib-cover-ph{font-size:1rem}
.lib-row .lib-body{flex:1 1 auto}
.lib-row .lib-controls{position:static;flex:0 0 auto;gap:.2rem}
/* --- confirm dialog (library delete) --- */
/* Confirm is the most-modal element: it must sit above every other overlay
   (manager=80, note-editor=70, panels) so its buttons are always reachable. */
.confirm-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--bg) 60%, transparent);z-index:100}
.confirm-card{background:var(--panel);color:var(--fg);padding:1.2rem 1.4rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:22rem}
.confirm-msg{margin-bottom:1rem;line-height:1.4}
.confirm-actions{display:flex;gap:.6rem;justify-content:flex-end}
.btn.danger{background:#c0392b;color:#fff}
/* --- help & privacy page (overlay) --- */
.help-link{margin-top:.8rem}
.help-overlay{position:fixed;inset:0;z-index:10;overflow-y:auto;background:color-mix(in srgb, var(--bg) 80%, transparent);display:flex;justify-content:center;padding:2rem 1rem}
.help-panel{background:var(--panel);color:var(--fg);border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:42rem;width:100%;padding:1.4rem 1.6rem;align-self:flex-start}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .5rem}
.help-head h2{margin:0}
.help h3{margin:1.4rem 0 .4rem} .help p{margin:.4rem 0;line-height:1.6} .help ul{margin:.4rem 0;padding-left:1.2rem} .help li{line-height:1.6;margin:.2rem 0}
.help table{width:100%;border-collapse:collapse;margin:.4rem 0}
.help th,.help td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid color-mix(in srgb,var(--muted) 25%,transparent)}
.help code{font-family:ui-monospace,monospace;font-size:.9em;background:color-mix(in srgb,var(--muted) 18%,transparent);padding:.05em .35em;border-radius:4px}
.help-storage{margin-top:.6rem} .help-storage .persisted{color:var(--accent);margin-top:.3rem} .help-storage .hint{font-size:.85em}
.bm-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--panel)}
.bm-name{cursor:pointer}.bm-del{background:0;border:0;color:var(--muted);cursor:pointer}
.panel-title{font-weight:600;margin-bottom:.5rem}
.toc-list{display:flex;flex-direction:column}
.toc-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;background:transparent;border:0;color:var(--fg);text-align:left;cursor:pointer;padding:.4rem .4rem .4rem 0;border-radius:6px;font:inherit}
.toc-row:hover{background:var(--bg)}
.toc-row.active{background:color-mix(in srgb, var(--accent) 18%, transparent)}
.toc-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-pct{flex:0 0 auto;color:var(--muted);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
.chapter-label{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12rem;align-self:center}
.reader-root{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{display:flex;align-items:center;gap:.5rem;padding:max(.5rem,env(safe-area-inset-top)) max(.8rem,env(safe-area-inset-right)) .5rem max(.8rem,env(safe-area-inset-left));background:var(--panel);position:sticky;top:0;z-index:5;flex-wrap:wrap;flex:0 0 auto}
.transport{display:flex;align-items:center;gap:.2rem}
.tools{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.book-title{font-weight:600;max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{background:transparent;border:0;color:var(--fg);font-size:1.1rem;cursor:pointer;padding:.3rem .5rem;border-radius:8px;touch-action:manipulation;display:inline-flex;align-items:center}
/* Keep the top bar the same height in every mode. Its height is content-driven,
   so paginated's large-glyph .nav-btn (font-size 2rem) made the bar taller than
   in rsvp/scroll. A *definite* height (not min-height) is required: min-height
   lets a tall line box — the 2rem chevron's line box varies with the font's
   metrics — push the button past it, so the bar grew by a few px in real fonts
   even though headless happened to land exactly on 2.75rem. height pins every
   top-bar control to 2.75rem regardless of glyph/font, with line-height:1 so the
   big glyph centres cleanly inside it (box-sizing:border-box keeps it exact).
   Scoped to .topbar so the identical .icon-btn in the manager panels is left as
   is; controls are flex-centred (align-items:center on the bar groups). */
.topbar .icon-btn,.topbar .mode-btn{height:2.75rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.icon-btn svg{width:1.1em;height:1.1em;display:block}
.icon-btn:hover{background:var(--bg)}
/* Larger page-turn buttons (paginated ‹ ›): primary action + comfortable touch target (~44px). */
.nav-btn{font-size:2rem;padding:.2rem .6rem;min-width:2.75rem;min-height:2.75rem;justify-content:center}
.mode-switch{display:flex;gap:.2rem}.mode-btn{background:var(--bg);border:0;color:var(--muted);padding:.3rem .6rem;border-radius:8px;cursor:pointer;text-transform:none}
.mode-btn.active{background:var(--accent);color:#fff}
.toast{position:fixed;left:50%;bottom:calc(2.5rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(.5rem);background:var(--panel);color:var(--fg);padding:.55rem 1rem;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:20;font:inherit;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;font-variant-numeric:tabular-nums}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.hidden{opacity:0}
.reader-bar-bottom .toast{top:calc(2.5rem + env(safe-area-inset-top));bottom:auto;transform:translateX(-50%) translateY(-.5rem)}
.reader-bar-bottom .toast.show{transform:translateX(-50%) translateY(0)}
.reader-stage{position:relative;flex:1 1 auto;min-height:0}
/* Scroll AND Listen reuse the same scrolling container: Listen drives scrollTop to
   keep the read word in view, so its stage must be scrollable too. */
.reader-stage.scroll,.reader-stage.listen{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
/* While auto-scroll runs, suppress native touch-panning so a swipe is captured as
   a speed control only (it doesn't also drag the page). rAF scrolling is unaffected. */
.reader-stage.scroll.autoscrolling{touch-action:none}
.reader-stage.rsvp{user-select:none;-webkit-user-select:none}
.reader-stage.paginated{overflow:hidden}
.settings-panel,.bm-panel,.notes-panel,.toc-panel{position:fixed;right:calc(12px + env(safe-area-inset-right));top:calc(64px + env(safe-area-inset-top));width:min(20rem,90vw);max-height:calc(100dvh - 88px - env(safe-area-inset-top));overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--panel);padding:1rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:6}
.settings-panel.hidden,.bm-panel.hidden,.notes-panel.hidden,.toc-panel.hidden{display:none}
.set-row{display:flex;align-items:center;gap:.6rem;margin:.6rem 0}.set-row span:first-child{flex:0 0 8rem}.set-row input[type=range]{flex:1}.set-val{flex:0 0 2.5rem;text-align:right;color:var(--muted)}
.set-row select{flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:8px;padding:.3rem}
/* --- settings: relocated tools + top-bar customizer --- */
.set-row.tools-row,.set-row.pins-row{align-items:flex-start}
.tools-actions,.pin-chips{display:flex;flex-wrap:wrap;gap:.35rem;flex:1}
.settings-modes,.pos-switch{flex:1;flex-wrap:wrap;min-width:0}
.pin-chip{background:var(--bg);border:1px solid transparent;color:var(--muted);padding:.3rem .5rem;border-radius:8px;cursor:pointer;font-size:.85rem}
.pin-chip.on{background:var(--accent);color:#fff}
.pin-chip:disabled{opacity:.4;cursor:not-allowed}
.pin-chip.unavailable{outline:1px dashed var(--muted);opacity:.7} /* pinned, but not available for this book */
.pins-hint{font-size:.75rem;margin:.1rem 0 .4rem auto}
/* --- top bar moved to the bottom: lay the bar after the stage, anchor panels to
   the bottom edge, and flip the safe-area padding. Class lives on #app (the root
   passed to renderReader) so it also reaches the panels, which are its children. */
.reader-bar-bottom .reader-root{flex-direction:column-reverse}
.reader-bar-bottom .topbar{position:sticky;top:auto;bottom:0;padding-top:.5rem;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
.reader-bar-bottom .settings-panel,.reader-bar-bottom .bm-panel,.reader-bar-bottom .notes-panel,.reader-bar-bottom .toc-panel{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));max-height:calc(100dvh - 88px - env(safe-area-inset-bottom))}
.storage-section{margin-top:1rem;padding-top:.8rem;border-top:1px solid color-mix(in srgb, var(--muted) 30%, transparent);font-size:.85rem}
.storage-head{font-weight:600;margin-bottom:.3rem}
.storage-usage{font-variant-numeric:tabular-nums}
.storage-persist{margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem}
.storage-persist.persisted{color:var(--accent)}
.btn.small{padding:.35em .7em;font-size:.85rem;align-self:flex-start}
.storage-persist .hint{font-size:.75rem}
/* --- busy overlay (shown during heavy paginated layout / font reflow) --- */
/* Fixed (not absolute): the scroll stage is a scroll container, so an absolute
   overlay would anchor to scrolled content and render off-screen. Fixed keeps it
   centered in the viewport regardless of mode/scroll. */
.busy-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--bg) 60%, transparent);z-index:8}
.busy-card{display:flex;flex-direction:column;align-items:center;gap:.7rem;background:var(--panel);color:var(--fg);padding:1.2rem 1.6rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.busy-spinner{width:28px;height:28px;border-radius:50%;border:3px solid color-mix(in srgb, var(--muted) 40%, transparent);border-top-color:var(--accent);animation:busy-spin .7s linear infinite}
.busy-label{font-size:.9rem;color:var(--muted)}
@keyframes busy-spin{to{transform:rotate(360deg)}}
/* --- scroll-mode markers: bookmark ticks + reading-position line --- */
.scroll-marks{position:absolute;inset:0;pointer-events:none}
.scroll-mark{position:absolute;left:0;display:flex;align-items:center;gap:.3rem;transform:translateY(-50%);font-size:.8rem;pointer-events:none}
.scroll-mark .tick{display:block;width:1rem;height:0;border-top:2px solid var(--muted)}
.scroll-mark.reading{left:0;right:0;justify-content:flex-start}
.scroll-mark.reading .tick{flex:1;border-top:2px solid var(--accent)}
.scroll-mark.reading .lbl{color:var(--accent)}
/* --- Listen (TTS) current-word overlay --- */
.tts-word-layer { position: absolute; inset: 0; pointer-events: none; }
.tts-current {
  position: absolute; pointer-events: none; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: left .08s linear, top .08s linear, width .08s linear;
}
/* --- paginated corner indicators (bookmark on this page / reading page) --- */
.page-marks{position:absolute;top:.4rem;right:.4rem;display:flex;flex-direction:column;gap:.25rem;align-items:flex-end;z-index:2;pointer-events:none}
.page-mark{font-size:.8rem;padding:.1rem .45rem;border-radius:999px;background:var(--panel);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.page-mark.reading{background:var(--accent);color:#fff}
/* --- mobile portrait: tighter reading margins (issue: halve L/R margins) --- */
@media (max-width: 640px) and (orientation: portrait) {
  .scroll-doc { padding-left: .5rem; padding-right: .5rem; }   /* 1rem -> .5rem per side */
  .page-viewport { width: min(42rem, 96vw); }                  /* 92vw -> 96vw (4vw -> 2vw per side) */
}

/* --- notes & highlights --- */
.note-hl { border-radius: 2px; }
.rsvp-word.noted { background: var(--note-tint, transparent); border-radius: 4px; padding: 0 .1em; }

.note-toolbar { position: fixed; z-index: 60; }
.note-toolbar.hidden { display: none; }
/* Touch: docked at the bottom-centre so the OS selection menu can't hide it. */
.note-toolbar.docked { top: auto; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.note-add { white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.note-toolbar.docked .note-add { font-size: 1rem; padding: .6rem 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.45); }

.note-editor { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.note-editor.hidden { display: none; }
.note-editor-card { background: var(--panel-bg, #1b1b1b); color: var(--fg, #eee); width: min(28rem, 92vw); padding: 1rem; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.note-editor-head { font-weight: 600; margin-bottom: .5rem; }
.note-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: .5rem; border-radius: 6px; }
.note-color-row { display: flex; align-items: center; gap: .75rem; margin: .75rem 0; flex-wrap: wrap; }
.note-default-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.note-editor-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.note-editor-actions .note-delete { margin-right: auto; }
.note-delete.hidden { display: none; }

/* .notes-panel shares positioning/visibility with .bm-panel (added to those selectors above). */
.note-row { display: flex; align-items: flex-start; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid rgba(127,127,127,.2); }
.note-swatch { width: .8rem; height: .8rem; border-radius: 50%; margin-top: .25rem; flex: 0 0 auto; background: var(--note-tint, #ffd54a); }
.note-body { flex: 1 1 auto; cursor: pointer; min-width: 0; }
.note-snippet { font-style: italic; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.note-text { font-size: .9em; opacity: .7; }
.note-edit, .note-del { background: none; border: none; cursor: pointer; color: inherit; opacity: .6; }
.note-edit:hover, .note-del:hover { opacity: 1; }
/* Manager views (long-press / Shift+M / Shift+N) — full-screen modal listing */
.manager-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); padding: 1rem; }
.manager-card { background: var(--panel); color: var(--fg); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.4); width: min(34rem, 96vw); max-height: 85dvh; display: flex; flex-direction: column; overflow: hidden; }
.manager-header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border, rgba(128,128,128,.25)); }
.manager-title { font-weight: 600; font-size: 1.05rem; }
.manager-count { font-size: .8rem; opacity: .6; }
.manager-close { margin-left: auto; }
.manager-body { padding: .5rem .75rem 1rem; overflow-y: auto; }
.mgr-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .25rem; border-bottom: 1px solid var(--border, rgba(128,128,128,.15)); }
.mgr-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.mgr-name { display: block; }
.mgr-meta { display: inline-block; font-size: .75rem; opacity: .55; margin-top: .15rem; }
.mgr-rename-input { width: 100%; box-sizing: border-box; font: inherit; }

.booksearch-inputrow{padding:.5rem .75rem}
.booksearch-input{width:100%;background:var(--bg);border:1px solid var(--panel);border-radius:var(--radius);color:var(--fg);padding:.5rem .7rem;font:inherit}
.booksearch-results{display:flex;flex-direction:column}
.booksearch-row{display:flex;align-items:baseline;gap:.6rem;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border,rgba(128,128,128,.15));color:var(--fg);cursor:pointer;padding:.55rem .25rem;font:inherit}
.booksearch-row:hover{background:var(--bg)}
.booksearch-snippet{flex:1 1 auto;min-width:0;line-height:1.4}
.booksearch-hit{background:color-mix(in srgb,var(--accent) 35%,transparent);border-radius:3px;padding:0 .1em}
.booksearch-pct{flex:0 0 auto;font-size:.75rem;opacity:.55}

/* In-app single-field prompt (Add bookmark). Reuses .manager-* shell. */
.text-prompt-card{width:min(26rem,96vw)}
.text-prompt-label{padding:.5rem .75rem 0;margin:0;opacity:.7;font-size:.85rem}
.text-prompt-inputrow{display:flex;gap:.5rem;padding:.5rem .75rem .75rem}
.text-prompt-input{flex:1 1 auto;min-width:0;background:var(--bg);border:1px solid var(--panel);border-radius:var(--radius);color:var(--fg);padding:.5rem .7rem;font:inherit}
.text-prompt-confirm{flex:0 0 auto;background:var(--accent);color:var(--bg);border:0;border-radius:var(--radius);padding:.5rem .9rem;font:inherit;cursor:pointer}

/* Wake-lock indicator: shown in the top bar only while a screen wake lock is
   actually held, so its presence truthfully signals "the display is being kept
   awake". Accent-tinted, icon-sized to sit beside the wpm badge. */
.wake-badge{display:inline-flex;align-items:center;color:var(--accent);padding:.3rem .4rem}
.wake-badge svg{width:1.1em;height:1.1em;display:block}
.wake-badge.hidden{display:none}

/* Theme row: select + Customise… button. Wraps so the button drops below the
   select on a narrow panel rather than crushing both. */
.theme-row{flex-wrap:wrap}
.theme-row .theme-customise{align-self:auto;margin-left:auto}

/* Colour-scheme editor modal. Above the settings panel (z-index 6) but below
   the confirm dialog (100), so the delete confirmation still sits on top. */
.theme-editor{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--bg) 55%, transparent);padding:1rem}
.theme-editor-card{background:var(--panel);color:var(--fg);width:min(26rem,94vw);max-height:90dvh;overflow-y:auto;padding:1.1rem 1.2rem;border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.theme-editor-head{font-weight:600;font-size:1.05rem;margin-bottom:.8rem}
.theme-fields{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0}
.theme-field{display:flex;align-items:center;gap:.6rem}
.theme-field span{flex:0 0 7rem}
.theme-field .color-swatch{width:2.6rem;height:1.8rem}
.theme-name-row input[type=text]{flex:1;background:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:8px;padding:.35rem .5rem;font:inherit}
.theme-editor-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.theme-editor-actions .theme-delete{margin-right:auto}
.color-field{display:flex;align-items:center;gap:.5rem;flex:1;flex-wrap:wrap}
.color-field.disabled{opacity:.5;pointer-events:none}
.color-swatch{width:2.6rem;height:1.8rem;padding:0;border:1px solid var(--muted);border-radius:6px;cursor:pointer;flex:0 0 auto}
.color-presets{display:flex;flex-wrap:wrap;gap:.3rem;flex:1 1 100%}
.color-preset{width:1.5rem;height:1.5rem;border-radius:6px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0}

/* App-implemented colour picker (js/ui/color-picker.js) */
.colorpicker-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--bg) 60%, transparent);z-index:120;padding:1rem}
.colorpicker-card{background:var(--panel);color:var(--fg);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.45);padding:1rem;width:min(15rem,92vw);display:flex;flex-direction:column;gap:.7rem}
.colorpicker-header{display:flex;align-items:center;gap:.6rem}
.colorpicker-preview{flex:1 1 auto;height:1.8rem;border-radius:8px;border:1px solid var(--muted)}
.colorpicker-close{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:.1rem .3rem;flex:0 0 auto}
.colorpicker-sv{position:relative;width:200px;height:160px;max-width:100%;border-radius:8px;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,#f00)}
.colorpicker-sv-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}
.colorpicker-hue{position:relative;width:200px;height:16px;max-width:100%;border-radius:999px;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}
.colorpicker-hue-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);background:transparent;transform:translate(-50%,-50%);pointer-events:none}
.colorpicker-footer{display:flex;align-items:center;gap:.6rem}
.colorpicker-hex{flex:1 1 auto;min-width:0;background:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:8px;padding:.3rem .5rem;font:inherit;font-variant-numeric:tabular-nums}
.colorpicker-done{flex:0 0 auto}