@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-Italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/AtkinsonHyperlegible-BoldItalic.woff2') format('woff2');font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/fonts/WorkSans-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/fonts/WorkSans-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{
  --paper: #F6F1E7;
  --paper-card: #FFFCF6;
  --ink: #201C16;
  --ink-soft: #5C5346;
  --line: #E1D6C1;
  --gold: #A9803F;
  --gold-bright: #C9973F;
  --cloth: #3F5D4C;
  --cloth-deep: #2C4237;
  --shadow: rgba(32,28,22,0.12);
  --radius: 3px;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: var(--gold);
  --bg: var(--paper);
  --fg: var(--ink);
  --border: var(--line);
  --border-soft: color-mix(in srgb, var(--line) 65%, transparent);
}
html.dark-shell{
  --paper: #12151A;
  --paper-card: #1A1E25;
  --ink: #E9E4D8;
  --ink-soft: #9C9587;
  --line: #2A2F38;
  --gold: #C9973F;
  --gold-bright: #E0B15C;
  --cloth: #527A66;
  --cloth-deep: #3D5E4E;
  --shadow: rgba(0,0,0,0.4);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0; width:100%; max-width:100vw; overflow-x:hidden;}
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
  overflow: hidden;
}

/* Eliminate tap highlight on all interactive elements */
a, button, [role="button"], label, select, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Eliminate 300ms delay and prevent double-tap zoom on controls */
button, [role="button"], a, label, input[type="range"] {
  touch-action: manipulation;
}

/* Prevent text selection on UI chrome (not on reading content) */
header,
nav,
#topbar,
#topbar-actions,
#progress-bar,
.spine,
.spine-book,
.layout-option,
.theme-swatch,
.font-option,
.marks-tab,
.drawer-title,
.setting-label,
.modal-card,
#stats-card,
#collections-card,
#shortcuts-card,
#admin-card {
  user-select: none;
  -webkit-user-select: none;
}

#app{
  --reader-page-bg: var(--paper);
  height:100vh; height:100dvh; min-height:0; width:100%; max-width:100vw;
  display:flex; flex-direction:column; overflow:hidden;
  background: var(--paper);
}
body.reader-active,
body.reader-active #app,
body.reader-active #reader-view,
body.reader-active #viewer-wrap,
body.reader-active #viewer{ background:var(--reader-page-bg); }
#app:fullscreen, #app:-webkit-full-screen{
  width:100vw; max-width:none; height:100vh; height:100dvh; min-height:100%;
  background:var(--reader-page-bg);
}

/* ---------- Top bar ---------- */
#topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-width:0; 
  padding: calc(14px + env(safe-area-inset-top)) 22px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink:0;
  z-index: 30;
  background: var(--paper);
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease, border-color .2s ease;
}
#app.chrome-hidden #topbar{
  flex:0 0 0; height:0; min-height:0; max-height:0;
  padding:0; opacity:0; border-width:0; pointer-events:none;
}

/* R-13: In reader mode the chrome bars become translucent glass overlays so
   the EPUB viewport is exactly the same size whether controls are visible or
   not. No height-collapse, no viewer resize, no chapter-skip. */
body.reader-active #topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  transition: transform .22s ease, opacity .18s ease;
  /* reset shelf-mode flex sizing */
  flex: initial; height: initial; min-height: initial; max-height: initial;
  /* translucent glass — adapts automatically to light/sepia/dark/night themes */
  border-bottom: none;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
body.reader-active #app.chrome-hidden #topbar {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
#brand{
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.2px;
  display:flex; align-items:center; gap:9px;
  cursor:pointer; user-select:none;
}
#brand .mark{
  width:18px; height:24px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border-radius: 2px 4px 4px 2px;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.15);
}
#current-user-context{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:6px; font-family:var(--font-ui);
}
.account-context-name{
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
}
.role-badge{
  font-size:9.5px; font-weight:600; letter-spacing:0.4px;
  text-transform:uppercase; padding:2px 6px; border-radius:var(--radius);
}
.role-badge.admin{
  background:rgba(201,151,63,0.18); color:var(--gold);
  border:1px solid rgba(201,151,63,0.35);
}
.role-badge.reader{
  background:var(--paper-card); color:var(--ink-soft);
  border:1px solid var(--line);
}
#topbar-meta{
  display:none; flex-direction:column; align-items:center; text-align:center;
  overflow:hidden; max-width: 480px; margin: 0 auto;
}
#topbar-meta.visible{ display:flex; }
#topbar-title{
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
#topbar-author{
  font-size: 11.5px; color: var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
#topbar-actions{
  display:flex; align-items:center; gap:6px; flex-shrink:1; min-width:0;
}
.icon-btn{
  background:none; border: 1px solid transparent;
  color: var(--ink); width: 34px; height: 34px;
  border-radius: var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover{
  background: var(--paper-card);
  border-color: var(--line);
}
.icon-btn svg{ width:18px; height:18px; }
#bookmark-toggle.active{ color: var(--gold); }
#bookmark-toggle.active svg{ fill: var(--gold); }
#tts-btn[aria-pressed="true"]{ color: var(--gold); border-color: var(--gold); }

:where(button, input, select, [tabindex]):focus-visible{
  outline:3px solid var(--gold-bright); outline-offset:2px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

#upload-btn{
  display:flex; align-items:center; gap:8px;
  background: var(--cloth); color: #FBF8F0;
  border:none; padding: 9px 16px; border-radius: var(--radius);
  font-family: var(--font-ui); font-weight:500; font-size:14px;
  cursor:pointer; transition: background .15s ease;
}
#upload-btn:hover{ background: var(--cloth-deep); }
#upload-btn svg{ width:15px; height:15px; }
#file-input{ display:none; }

/* ---------- Library / shelf ---------- */
#shelf-view{
  flex:1; overflow-y:auto; padding: 48px 8vw calc(80px + env(safe-area-inset-bottom));
}
#shelf-empty{
  max-width: 480px; margin: 8vh auto 0; text-align:center;
}
#shelf-empty .glyph{
  width:64px; height:64px; margin: 0 auto 22px;
  color: var(--gold);
}
#shelf-empty h1{
  font-family: var(--font-display); font-size: 26px; font-weight:600;
  margin: 0 0 10px;
}
#shelf-empty p{
  color: var(--ink-soft); font-size:15px; line-height:1.6; margin:0 0 26px;
}
#dropzone{
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 22px; font-size: 13.5px; color: var(--ink-soft);
  transition: border-color .15s ease, background .15s ease;
}
#dropzone.drag-over{ border-color: var(--gold); background: var(--paper-card); }

#shelf-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1100px; margin: 0 auto 28px; gap:16px; flex-wrap:wrap;
}
.shelf-title-group{
  display:flex; align-items:center; gap:12px;
}
.shelf-title-group h2{ font-family: var(--font-display); font-weight:600; font-size:22px; margin:0; letter-spacing:-0.2px; }
.shelf-badge{
  font-size:11.5px; font-weight:500; color:var(--ink-soft);
  background:var(--paper-card); border:1px solid var(--line);
  padding:2px 8px; border-radius:999px; white-space:nowrap;
}

#shelf{
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 32px 22px;
}

#shelf.compact {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 14px;
}

#shelf.compact .book-meta-under .author,
#shelf.compact .shelf-rating-widget {
  display: none;
}
.book-card{
  display:flex; flex-direction:column; cursor:pointer;
  position:relative; transition: transform .18s ease;
}
.book-card:hover{ transform: translateY(-4px); }
.book-card:hover .spine{ box-shadow: 0 14px 28px var(--shadow), 0 2px 6px var(--shadow); }

/* Spine representation */
.spine{
  aspect-ratio: 2 / 3;
  border-radius: 2px 5px 5px 2px;
  position:relative;
  box-shadow: 0 6px 16px var(--shadow);
  transition: box-shadow .18s ease;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 14px 12px;
  color: #F8F5EE;
}
.spine::before{
  /* Book crease */
  content:""; position:absolute; top:0; bottom:0; left:0; width:12px;
  background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.05) 60%, rgba(255,255,255,0.1) 80%, rgba(0,0,0,0.15));
}
.spine::after{
  /* Gold foil accent bar */
  content:""; position:absolute; top:0; bottom:0; right:0; width:3px;
  background: rgba(0,0,0,0.2);
}
.spine-title{
  font-family: var(--font-display);
  font-size: 13px; font-weight:600; line-height:1.25;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow:hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.spine-author{
  font-size: 10.5px; opacity:0.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.spine-badge{
  position:absolute; top:8px; right:8px;
  background: var(--gold); color:#201C16;
  font-size:9.5px; font-weight:600; padding:2px 5px; border-radius:2px;
}
.book-meta-under{
  margin-top: 9px;
}
.book-meta-under .title{
  font-size: 12.5px; font-weight:500; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.book-meta-under .author{
  font-size: 11px; color: var(--ink-soft); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.book-progress-bar{
  height: 2px; background: var(--line); border-radius: 1px;
  margin-top: 6px; overflow:hidden;
}
.book-progress-fill{
  height:100%; background: var(--gold); width: 0%;
}

/* Palette variations for spines */
.spine-c0{ background: linear-gradient(145deg, #2E3E34, #1E2B24); }
.spine-c1{ background: linear-gradient(145deg, #6B3428, #4D231A); }
.spine-c2{ background: linear-gradient(145deg, #2C3E50, #1B2836); }
.spine-c3{ background: linear-gradient(145deg, #5C4A38, #3E3225); }
.spine-c4{ background: linear-gradient(145deg, #4A3B56, #31263A); }
.spine-c5{ background: linear-gradient(145deg, #35505B, #22353D); }

/* ---------- Reader View ---------- */
#reader-view{
  flex:1; display:none; flex-direction:column;
  position:relative; overflow:hidden;
  background: var(--paper);
}
#reader-view.active{ display:flex; }
#viewer-wrap{
  flex:1; position:relative; overflow:hidden; min-height:0;
  background: var(--reader-page-bg, var(--paper));
  padding-bottom: env(safe-area-inset-bottom);
}
/* viewer-wrap fills all available space; its dimensions never change when
   chrome is toggled — the overlays sit on top without stealing any height */
#viewer{
  width:100%; height:100%;
}
#viewer .epub-container,
#epub-scroll-container{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.nav-zone{
  position:absolute; top:0; bottom:0; width: var(--nav-zone-width, 10%);
  display:flex; align-items:center;
  color: var(--ink-soft); opacity:0;
  cursor:pointer; z-index: 10;
  transition: opacity .15s ease, background .15s ease;
  user-select:none;
  background: transparent;
  border: none;
  padding: 0;
}
.nav-zone:hover{
  opacity: 0.7;
  background: rgba(0,0,0,0.03);
}
.nav-zone.left{ left:0; justify-content: flex-start; padding-left: 16px; }
.nav-zone.right{ right:0; justify-content: flex-end; padding-right: 16px; }
.nav-zone svg{ width:24px; height:24px; }
#reader-view.scrolled .nav-zone{
  display: none !important;
}

#progress-bar{
  flex-shrink:0; padding: 10px 22px;
  display:flex; align-items:center; gap:14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  z-index: 30;
  max-height: 54px; overflow:hidden;
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease, border-color .2s ease;
}
#app.chrome-hidden #progress-bar{
  flex:0 0 0; height:0; min-height:0; max-height:0;
  padding-top:0; padding-bottom:0; opacity:0; border-width:0; pointer-events:none;
}

/* R-13: progress-bar as translucent glass overlay during reader mode */
body.reader-active #progress-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  border-bottom: none;
  z-index: 40;
  transition: transform .22s ease, opacity .18s ease;
  flex: initial; height: initial; min-height: initial; max-height: initial; overflow: visible;
  /* translucent glass */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
body.reader-active #app.chrome-hidden #progress-bar {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* A small tap hint that briefly appears the first time chrome is hidden */
#chrome-hint{
  position:absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left:50%;
  transform: translateX(-50%); background: rgba(20,17,12,0.75); color:#F6F1E7;
  font-size:12px; padding:8px 14px; border-radius:20px; pointer-events:none;
  opacity:0; transition: opacity .3s ease; z-index:15; white-space:nowrap;
}
#chrome-hint.show{ opacity:1; }

#fullscreen-exit-control{
  position:fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: 10px;
  z-index: 45;
  display: none;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(225, 214, 193, 0.7);
  border-radius: 999px;
  background: rgba(246, 241, 231, 0.88);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(32, 28, 22, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0.86;
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
#fullscreen-exit-control:not([hidden]){
  display: flex;
}
#fullscreen-exit-control:hover,
#fullscreen-exit-control:focus-visible{
  opacity: 1;
  transform: scale(1.04);
  background: rgba(255, 252, 246, 0.96);
}
#fullscreen-exit-control svg{
  width: 16px;
  height: 16px;
}
html.dark-shell #fullscreen-exit-control{
  border-color: rgba(42, 47, 56, 0.85);
  background: rgba(26, 30, 37, 0.88);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html.dark-shell #fullscreen-exit-control:hover,
html.dark-shell #fullscreen-exit-control:focus-visible{
  background: rgba(35, 41, 51, 0.96);
}

#progress-slider{
  flex:1; -webkit-appearance:none; appearance:none;
  height:3px;
  background: linear-gradient(to right, var(--gold) var(--progress, 0%), var(--line) var(--progress, 0%));
  border-radius:2px; outline:none;
  cursor:pointer;
}
#progress-slider:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
#progress-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background: var(--gold); cursor:pointer; margin-top:-4px;
  box-shadow: 0 0 0 3px var(--paper);
}
#progress-slider:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 6px var(--paper);
}
#progress-slider:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 6px var(--paper);
}
#progress-pct{ font-size:12px; color: var(--ink-soft); min-width:38px; text-align:right; }
#progress-chapter{ font-size:12.5px; color: var(--ink-soft); font-style:italic; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#progress-track{ position:relative; flex:1; display:flex; align-items:center; }
#bookmark-ticks{ position:absolute; left:0; right:0; top:50%; height:0; pointer-events:none; }
.bookmark-tick{
  position:absolute; top:-4px; width:7px; height:7px; border-radius:50%;
  background: var(--gold); border: 1.5px solid var(--paper);
  transform: translate(-50%,0); cursor:pointer; pointer-events:auto;
}

.bookmark-empty{ font-size:13px; color: var(--ink-soft); line-height:1.6; padding: 6px 4px; }
.bookmark-item{
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  cursor:pointer; display:flex; flex-direction:column; gap:3px;
}
.bookmark-item:hover .bookmark-chapter{ color: var(--gold); }
.bookmark-chapter{ font-size:13.5px; color: var(--ink); line-height:1.4; transition: color .15s ease; }
.bookmark-meta{ display:flex; justify-content:space-between; align-items:center; }
.bookmark-pct{ font-size:11.5px; color: var(--ink-soft); }
.bookmark-remove{ border:none; background:none; color: var(--ink-soft); font-size:11px; cursor:pointer; text-decoration:underline; }
.bookmark-remove:hover{ color: var(--gold); }

/* ---------- Drawers (TOC + Settings) ---------- */
.drawer{
  position:absolute; top:0; right:0; bottom:0; width: 320px; max-width: 100vw;
  background: var(--paper-card); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .22s ease, visibility .22s ease;
  z-index: 30; overflow-y:auto; padding: 22px 20px calc(40px + env(safe-area-inset-bottom));
  box-shadow: -8px 0 24px var(--shadow);
  pointer-events: none;
  visibility: hidden;
}
.drawer.toc{ left:0; right:auto; transform: translateX(-100%); border-left:none; border-right:1px solid var(--line); box-shadow: 8px 0 24px var(--shadow); }
.drawer.open{ transform: translateX(0); pointer-events: auto; visibility: visible; }
.drawer-title{
  font-family: var(--font-display); font-size:16px; font-weight:600;
  margin: 0 0 18px; display:flex; align-items:center; justify-content:space-between;
}
.drawer-title button{ background:none; border:none; color: var(--ink-soft); cursor:pointer; padding:4px; }
.drawer-title button svg{ width:16px; height:16px; }

.toc-item{
  display:block; padding: 9px 4px; font-size: 13.5px; color: var(--ink);
  border-bottom: 1px solid var(--line); cursor:pointer; text-decoration:none;
  line-height:1.4;
}
.toc-item:hover{ color: var(--gold); }

.setting-group{ margin-bottom: 24px; }
.setting-label{
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--ink-soft); font-weight:600; margin-bottom:10px; display:block;
}
.theme-swatches{ display:flex; gap:8px; }
.theme-swatch{
  flex:1; height:52px; border-radius: var(--radius); cursor:pointer;
  border: 2px solid transparent; position:relative;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px;
  font-family:var(--font-ui); font-size:10px; font-weight:600; letter-spacing:0.3px;
}
.theme-swatch.active{ border-color: var(--gold); }
.theme-swatch.light{ background:#F6F1E7; color:#3a332a; }
.theme-swatch.sepia{ background:#EBDCC0; color:#4a3a22; }
.theme-swatch.dark{ background:#2B2E33; color:#d8d3c8; }
.theme-swatch.night{ background:#000; color:#8a8a8a; }

/* Continue reading */
#continue-card{
  max-width: 1100px; margin: 0 auto 40px; display:flex; gap:20px;
  background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px; cursor:pointer; align-items:center; transition: border-color .15s ease;
}
#continue-card:hover{ border-color: var(--gold); }
#continue-card .spine-book{ width:64px; height:94px; flex-shrink:0; padding:8px 6px; }
#continue-card .spine-book .spine-title{ font-size:10.5px; }
#continue-info{ flex:1; min-width:0; }
#continue-info .kicker{
  font-size: 10.5px; text-transform:uppercase; letter-spacing:0.8px;
  color: var(--gold); font-weight:600;
}
#continue-info h3{
  font-family: var(--font-display); font-size:17px; font-weight:600;
  margin: 3px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#continue-info .author{ font-size: 12px; color: var(--ink-soft); }
#continue-info .progress-text{ font-size: 11.5px; color: var(--ink-soft); margin-top:8px; }

.font-options{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.font-option{
  padding: 10px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); text-align:center;
  font-size: 13px; cursor:pointer; transition: border-color .15s ease;
}
.font-option.active{ border-color: var(--gold); font-weight:600; }
.font-option .check{visibility:hidden}.font-option.active .check{visibility:visible}

.size-stepper{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius: var(--radius); padding:4px;
}
.size-stepper button{
  background:none; border:none; color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; font-weight:600;
  width:36px; height:32px; cursor:pointer; border-radius: 2px;
}
.size-stepper button:hover{ background: var(--paper); }
.size-stepper span{ font-size: 13px; color: var(--ink-soft); }

.layout-options{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.layout-option{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font-size: 12.5px; cursor:pointer; transition: border-color .15s ease;
}
.layout-option svg{ width:15px; height:15px; }
.layout-option.active{ border-color: var(--gold); font-weight:600; }

.slider-control{ display:flex; flex-direction:column; gap:8px; }
.slider-control-header{ display:flex; justify-content:space-between; align-items:baseline; }
.slider-control-header .setting-label{ margin-bottom:0; }
.slider-value{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.setting-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  background: var(--line); border-radius:2px; outline:none; cursor:pointer;
}
.setting-slider:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}
.setting-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background: var(--gold); cursor:pointer;
}
.setting-slider:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 6px var(--paper);
}
.setting-slider:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 6px var(--paper);
}

/* Shelf view controls */
.shelf-controls{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.shelf-select{
  border:1px solid var(--line); background:var(--paper-card); color:var(--ink);
  padding:6px 12px; border-radius:var(--radius); font-family:var(--font-ui);
  font-size:12.5px; outline:none; height:34px;
  transition:border-color .15s ease;
}
.shelf-select:focus{ border-color:var(--gold); }
input.shelf-select{
  width:160px; transition:width .2s ease, border-color .15s ease;
}
input.shelf-select:focus{ width:220px; }

.file-link-btn{
  background:var(--paper-card); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:5px 12px; font-family:var(--font-ui);
  font-size:12.5px; font-weight:500; cursor:pointer; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.file-link-btn:hover{
  background:var(--paper); border-color:var(--gold); color:var(--gold);
}

/* Dropdown Menu System for Library Tools */
.dropdown-wrap{
  position:relative; display:inline-block;
}
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:185px; background:var(--paper-card);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 28px var(--shadow); padding:6px;
  display:none; flex-direction:column; gap:2px; z-index:40;
}
.dropdown-menu.show{
  display:flex; animation:dropdownFadeIn .15s ease;
}
@keyframes dropdownFadeIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
.dropdown-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; background:none; border:none;
  border-radius:var(--radius); color:var(--ink);
  font-family:var(--font-ui); font-size:12.5px; font-weight:500;
  text-align:left; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.dropdown-item svg{
  width:15px; height:15px; color:var(--gold); flex-shrink:0;
}
.dropdown-item:hover{
  background:var(--paper); color:var(--gold-bright);
}

/* Spine hover action overlay */
.spine-actions{
  position:absolute; bottom:8px; left:8px; right:8px;
  display:flex; gap:5px; opacity:0;
  transform:translateY(4px); transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}
.book-card:hover .spine-actions,
.book-card:focus-within .spine-actions{
  opacity:1; transform:translateY(0);
}
.spine-action-btn{
  flex:1; background:rgba(20,17,12,0.85);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:#F8F5EE; border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--radius); font-family:var(--font-ui);
  font-size:10px; font-weight:500; padding:5px 4px;
  cursor:pointer; text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.spine-action-btn:hover{
  background:rgba(0,0,0,0.95); border-color:var(--gold); color:var(--gold-bright);
}

.layout-toggle-btn{
  background:none; border:1px solid var(--line); border-radius: var(--radius);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-soft);
}
.layout-toggle-btn.active{ color:var(--gold); border-color:var(--gold); }
.layout-toggle-btn svg{ width:16px; height:16px; }

/* Shelf list layout */
#shelf.list-layout{
  display:flex; flex-direction:column; gap:8px;
}
#shelf.list-layout .book-card{
  flex-direction:row; align-items:center; gap:16px;
  padding: 10px 14px; background: var(--paper-card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
#shelf.list-layout .book-card:hover{ transform:none; border-color: var(--gold); }
#shelf.list-layout .spine{ display:none; }
#shelf.list-layout .book-meta-under{ margin:0; flex:1; }
#shelf.list-layout .book-progress-bar{ width: 120px; }

/* Highlights / Annotations */
::selection{ background: rgba(201,151,63,0.3); }
#highlight-popup{
  position:absolute; z-index: 50; display:none;
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow);
  padding: 4px; gap:4px; align-items:center;
}
#highlight-popup.show{ display:flex; }
.hl-color-btn{
  width:22px; height:22px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition: transform .1s ease;
}
.hl-color-btn:hover{ transform: scale(1.15); }
.hl-color-btn.active{ border-color: var(--ink); }
.hl-color-btn.yellow{ background: #FFE066; }
.hl-color-btn.green{ background: #A9E34B; }
.hl-color-btn.blue{ background: #74C0FC; }
.hl-color-btn.pink{ background: #FFA8A8; }
.hl-color-btn.delete{ background: none; border:none; color: var(--ink-soft); display:flex; align-items:center; justify-content:center; }
.hl-color-btn.delete svg{ width:14px; height:14px; }

.popup-action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(201,151,63,0.12); color: var(--gold);
  border: 1px solid rgba(201,151,63,0.35); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
  margin-left: 2px;
}
.popup-action-btn:hover{
  background: var(--gold); color: #fff; border-color: var(--gold);
}

/* Floating Read Aloud Player Bar */
#tts-player-bar{
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(560px, calc(100vw - 28px));
  width: auto;
  transition: transform .22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity .2s ease;
  box-shadow: 0 10px 30px var(--shadow), 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 999px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#tts-player-bar.hidden{
  transform: translate(-50%, 60px);
  opacity: 0;
  pointer-events: none;
}
.tts-bar-content{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 16px;
}
.tts-info{
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 240px;
}
.tts-indicator{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tts-pulse{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201, 151, 63, 0.7);
  animation: tts-pulse 1.8s infinite;
}
@keyframes tts-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201, 151, 63, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(201, 151, 63, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201, 151, 63, 0); }
}
.tts-label{
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--gold);
  text-transform: uppercase;
}
.tts-snippet{
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tts-controls{
  display: flex;
  align-items: center;
  gap: 4px;
}
.tts-ctrl-btn{
  background: none;
  border: 1px solid transparent;
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .1s ease;
}
.tts-ctrl-btn:hover{
  background: var(--paper);
  border-color: var(--line);
  transform: scale(1.05);
}
.tts-ctrl-btn svg{
  width: 15px;
  height: 15px;
}
.tts-ctrl-btn.main{
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.tts-ctrl-btn.main:hover{
  background: var(--gold-bright);
}
.tts-ctrl-btn.rate-btn{
  width: auto;
  border-radius: var(--radius);
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tts-ctrl-btn.stop-btn{
  color: var(--ink-soft);
}
.tts-ctrl-btn.stop-btn:hover{
  color: #C14B4B;
}

@media (max-width: 600px) {
  #tts-player-bar {
    max-width: calc(100vw - 20px);
  }
  .tts-info {
    max-width: 120px;
  }
  .tts-bar-content {
    gap: 8px;
    padding: 6px 10px 6px 12px;
  }
}

/* Marks drawer (Bookmarks + Highlights) */
.marks-tabs{ display:flex; border-bottom: 1px solid var(--line); margin-bottom:14px; }
.marks-tab{
  flex:1; padding: 8px; text-align:center; font-size:12.5px;
  background:none; border:none; color: var(--ink-soft); cursor:pointer;
  border-bottom: 2px solid transparent; font-family:var(--font-ui);
}
.marks-tab.active{ color: var(--gold); border-bottom-color: var(--gold); font-weight:600; }
.marks-panel{ display:none; }
.marks-panel.active{ display:block; }

.highlight-item{
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  cursor:pointer; display:flex; flex-direction:column; gap:4px;
}
.highlight-item:hover .highlight-text{ color: var(--gold); }
.highlight-text{ font-size:13px; line-height:1.45; font-style:italic; }
.highlight-meta{ display:flex; justify-content:space-between; align-items:center; }
.highlight-color-tag{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; }
.highlight-chapter{ font-size:11.5px; color:var(--ink-soft); }
.highlight-delete{ border:none; background:none; color:var(--ink-soft); font-size:11px; cursor:pointer; text-decoration:underline; }
.highlight-delete:hover{ color: #C14B4B; }

/* Search in book */
#search-input{
  width:100%; padding: 8px 12px; border:1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 13px; outline:none; margin-bottom:12px;
}
#search-input:focus{ border-color: var(--gold); }
.search-result-item{
  padding: 10px 4px; border-bottom: 1px solid var(--line);
  cursor:pointer; font-size:12.5px; line-height:1.4;
}
.search-result-item:hover{ color: var(--gold); }
.search-result-excerpt{ color: var(--ink-soft); }
.search-result-excerpt mark{ background: rgba(201,151,63,0.35); color: inherit; padding: 1px 2px; }

/* Drawer backdrop */
#drawer-backdrop{
  position:fixed; inset:0; background: rgba(20,17,12,0.35);
  z-index: 25; display:none; opacity:0; transition: opacity .2s ease;
}
#drawer-backdrop.show{ display:block; opacity:1; }

/* Modals */
.modal{
  position:fixed; inset:0; z-index:100;
  background: rgba(20,17,12,0.45);
  display:none; align-items:center; justify-content:center; padding: 20px;
  height: 100vh; height: 100dvh;
}
.modal.show{ display:flex; }
.modal-card{
  width:100%; max-width:440px; background: var(--paper-card);
  border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 40px var(--shadow); padding: 28px;
  max-height: 85vh; overflow-y:auto;
}
.modal-title{
  font-family: var(--font-display); font-size: 19px; font-weight:600;
  margin: 0 0 18px; display:flex; justify-content:space-between; align-items:center;
}
.modal-close{ background:none; border:none; color: var(--ink-soft); cursor:pointer; padding:4px; }
.modal-close svg{ width:16px; height:16px; }

/* Stats UI */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.stat-card{
  padding: 14px; border:1px solid var(--line); border-radius: var(--radius);
  text-align:center; background: var(--paper);
}
.stat-number{
  font-family: var(--font-display); font-size: 26px; font-weight:600;
  color: var(--gold); line-height:1.1; margin-bottom:4px;
}
.stat-label{ font-size: 11.5px; color: var(--ink-soft); }

/* Keyboard shortcuts table */
.shortcuts-table{ width:100%; border-collapse:collapse; font-size:13px; }
.shortcuts-table td{ padding: 8px 4px; border-bottom: 1px solid var(--line); }
.shortcuts-table kbd{
  display:inline-block; padding: 2px 6px; font-size:11px;
  border:1px solid var(--line); border-radius: 3px; background: var(--paper);
  font-family: monospace;
}

/* Edit book modal */
.form-group{ margin-bottom: 14px; }
.form-group label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.form-group input, .form-group select{
  width:100%; padding: 8px 12px; border:1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color:var(--ink);
  font-family: var(--font-ui); font-size:13px; outline:none;
}
.form-group input:focus, .form-group select:focus{ border-color: var(--gold); }
.modal-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.danger-btn{ background:none; border:none; color: #C14B4B; font-size:13px; cursor:pointer; padding:6px 0; }
.danger-btn:hover{ text-decoration:underline; }
.save-btn{
  background: var(--cloth); color:#FBF8F0; border:none; padding: 8px 18px;
  border-radius: var(--radius); font-family: var(--font-ui); font-weight:500;
  font-size:13px; cursor:pointer;
}
.save-btn:hover{ background: var(--cloth-deep); }

/* Collections manager */
.collections-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.collection-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 10px; border:1px solid var(--line); border-radius: var(--radius);
}
.collection-name{ font-size:13px; font-weight:500; }
.collection-count{ font-size:11.5px; color:var(--ink-soft); }
.collection-actions{ display:flex; gap:6px; }
.collection-actions button{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:12px; padding:2px 4px; }
.collection-actions button:hover{ color:var(--ink); }
.new-collection-form{ display:flex; gap:8px; }
.new-collection-input{
  flex:1; padding: 7px 10px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color:var(--ink); font-family:var(--font-ui); font-size:13px; outline:none;
}
.new-collection-input:focus{ border-color: var(--gold); }
.new-collection-btn{
  background: var(--gold); color: #201C16; border:none; padding: 7px 14px;
  border-radius: var(--radius); font-family: var(--font-ui); font-size:13px; font-weight:500; cursor:pointer;
}

/* Upload progress overlay */
#upload-progress{
  position:fixed; bottom: 20px; right: 20px; z-index: 110;
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow);
  padding: 14px 18px; display:none; align-items:center; gap:12px;
  font-size: 13px; max-width: 320px;
}
#upload-progress.show{ display:flex; }
.upload-spinner{
  width:18px; height:18px; border: 2px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Loading overlay */
#loading-overlay{
  position:absolute; inset:0; background: var(--paper);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; z-index: 20;
}
#loading-overlay.show{ display:flex; }
.spinner,.loading-spinner{width:28px;height:28px;border:2.5px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
#reader-error-state{position:absolute;inset:0;z-index:21;display:grid;place-content:center;gap:12px;padding:24px;text-align:center;background:var(--paper);color:var(--ink)}
#reader-error-state[hidden]{display:none}
#reader-error-state h2{margin:0;font:600 24px var(--font-display)}
#reader-error-state p{margin:0;max-width:28rem;color:var(--ink-soft)}
.reader-error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.reader-error-actions button{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper-card);color:var(--ink)}
.loading-spinner{
  width:28px; height:28px; border: 2.5px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
#loading-overlay p{ font-size:13px; color: var(--ink-soft); font-family: var(--font-ui); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }

#login-gate{
  position:fixed; inset:0; z-index:100;
  height: 100vh; height: 100dvh;
  min-height: 100vh; min-height: 100dvh;
  background: var(--paper);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  transition: opacity .3s ease;
}
#login-gate.hidden{ display:none; }
#login-card{
  width: 100%; max-width: 340px; box-sizing: border-box;
  text-align:center; padding:40px 30px;
  background: var(--paper-card); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 32px var(--shadow);
}
#login-card .mark{
  width:28px; height:36px; margin:0 auto 16px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border-radius: 2px 5px 5px 2px;
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.15);
}
#login-card h1{
  font-family: var(--font-display); font-size:22px; font-weight:600;
  margin:0 0 6px;
}
#login-card p{
  color: var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 24px;
}
#passphrase-input{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size:14px;
  outline:none; text-align:center; letter-spacing:1px;
}
#passphrase-input:focus{ border-color: var(--gold); }
#login-btn{
  width:100%; margin-top:14px; padding:11px; border:none; border-radius: var(--radius);
  background: var(--cloth); color:#FBF8F0; font-family: var(--font-ui);
  font-weight:500; font-size:14px; cursor:pointer; transition: background .15s ease;
}
#login-btn:hover{ background: var(--cloth-deep); }
#login-btn:disabled{ opacity:.5; cursor:not-allowed; }
#login-error{
  color: #C14B4B; font-size:12.5px; margin-top:10px; min-height:18px;
}
#toast{
  position:fixed; z-index:120; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%, 18px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--paper-card); border-radius:var(--radius);
  padding:10px 14px; max-width:min(420px, calc(100vw - 32px));
  font-size:13px; line-height:1.4; box-shadow:0 8px 24px var(--shadow);
  transition:opacity .18s ease, transform .18s ease;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (max-width: 768px){
  #shelf-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .shelf-controls { flex-wrap: wrap; justify-content: flex-start; width: 100%; }
  .admin-library-tools{ flex-wrap:wrap; }
  #stats-card { width: 100%; max-width: none; margin: 0 16px; }
  #collections-card { width: 100%; max-width: none; margin: 0 16px; }
  #shortcuts-card { width: 100%; max-width: none; margin: 0 16px; }

  #topbar {
    padding: 8px 12px;
    gap: 8px;
  }
  
  /* In reader mode on mobile, keep brand compact to maximize action ribbon room */
  body.reader-active #brand #current-user-context {
    display: none !important;
  }
  body.reader-active #brand .brand-name {
    display: none;
  }
  body.reader-active #brand {
    padding: 4px;
    border-radius: var(--radius);
    flex-shrink: 0;
  }
  
  #topbar-actions {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    max-width: 100%;
    padding: 2px 0;
    gap: 4px;
  }
  #topbar-actions::-webkit-scrollbar {
    display: none;
  }
  
  .icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    flex-shrink: 0;
  }
}

/* R-13 mobile: lock the reader canvas to exactly the screen dimensions so
   no ancestor layout can resize the EPUB viewport. The chrome overlays float
   on top; viewer dimensions are constant whether controls are visible or not. */
@media (max-width: 768px) {
  body.reader-active #app {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
  body.reader-active #reader-view {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
  }
  body.reader-active #viewer-wrap {
    position: absolute;
    inset: calc(min(env(safe-area-inset-top), 60px) + 62px) 0 calc(min(env(safe-area-inset-bottom), 34px) + 72px);
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;         /* overlays float on top — no padding needed */
  }
  body.reader-active #viewer {
    width: 100%;
    height: 100%;
  }
}

html.dark-shell{ color-scheme:dark; }
html.dark-shell #reader-view,
html.dark-shell #viewer-wrap{ background: var(--reader-page-bg, var(--paper)); }
html.dark-shell #progress-bar{ /* in reader mode the translucent backdrop handles theming; only override in shelf mode */ }
html.dark-shell .drawer,
html.dark-shell .nav-zone{ box-shadow:0 5px 18px rgba(0,0,0,.34); }

@media (max-width: 640px){
  #shelf{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap:20px 14px; }
  .spine-title{ font-size:11.5px; -webkit-line-clamp:3; }
  .spine-author{ font-size:9.5px; }
  #shelf-view{ padding: 20px 16px calc(48px + env(safe-area-inset-bottom)); }
  #topbar{ padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
  .modal-card{ padding: 20px; }
  #topbar-actions { gap: 3px; }
  .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }
}

/* Dark mode overrides for controls */
html.dark-shell #shelf-search{ background-color: var(--paper-card); color: var(--ink); }
html.dark-shell .shelf-select{ background-color: var(--paper-card); color: var(--ink); border-color: var(--line); }
html.dark-shell .file-link-btn{ background-color: var(--paper-card); color: var(--ink); border-color: var(--line); }
html.dark-shell .file-link-btn:hover{ background-color: var(--paper); border-color: var(--gold); color: var(--gold); }
html.dark-shell .new-collection-input{ background: var(--paper); color: var(--ink); }
html.dark-shell #passphrase-input{ background: var(--paper-card); color: var(--ink); }
html.dark-shell #search-input{ background: var(--paper-card); color: var(--ink); }

/* Page turn animation */
#viewer iframe{ transition: opacity 0.15s ease; }

/* Admin card & roles */
#admin-card {
  max-width: 520px;
  max-height: 88vh;
  padding: 26px 28px 30px;
  box-sizing: border-box;
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.admin-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
}
#admin-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.admin-modal-header .modal-close {
  margin-top: -2px;
  margin-right: -4px;
  padding: 6px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.admin-modal-header .modal-close:hover {
  background: var(--paper);
  color: var(--ink);
}
.admin-description {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.admin-section-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold);
  margin: 18px 0 10px;
}

#user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.admin-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-user-item:hover {
  border-color: rgba(201,151,63,0.4);
}
.admin-user-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-user-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.current-user-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(201, 151, 63, 0.18);
  color: var(--gold);
  border: 1px solid rgba(201, 151, 63, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
}
.admin-user-item .collection-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-btn-sm {
  background: var(--paper-card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s ease;
}
.admin-btn-sm:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--paper);
}
.admin-self-note {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 2px 4px;
}
.admin-user-item .collection-delete {
  background: none;
  border: 1px solid transparent;
  color: #C14B4B;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s ease;
}
.admin-user-item .collection-delete:hover {
  background: rgba(193, 75, 75, 0.1);
  border-color: rgba(193, 75, 75, 0.3);
  color: #e04a4a;
}

.admin-create-form {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.admin-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.admin-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.admin-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 151, 63, 0.2);
}

.admin-role-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 2px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.admin-role-option:hover {
  border-color: var(--gold);
}
.admin-role-option input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}
.admin-role-option strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.admin-role-option small {
  display: block;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 2px;
}
.admin-create-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-bottom: 4px;
}
.admin-create-actions .new-collection-btn {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
}

html.dark-shell .admin-user-item,
html.dark-shell .admin-role-option,
html.dark-shell .admin-field input {
  background: var(--paper-card);
  color: var(--ink);
  border-color: var(--line);
}
html.dark-shell .admin-user-item:hover,
html.dark-shell .admin-role-option:hover {
  border-color: var(--gold);
}
html.dark-shell .admin-btn-sm {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
html.dark-shell .admin-btn-sm:hover {
  background: var(--paper-card);
  border-color: var(--gold);
  color: var(--gold);
}

/* Touch readers: show compact arrows in paginated mode (R-05/R-06).
   Scrolled mode keeps them hidden via the #reader-view.scrolled .nav-zone rule. */
@media (hover: none) and (pointer: coarse){
  .drawer{ width: min(320px, 86vw); }
  #progress-chapter{ display:none; }
  /* Paginated: visible mid-height arrow buttons */
  #reader-view:not(.scrolled) .nav-zone{
    display: flex;
    opacity: 0.72;
    top: 50%;
    bottom: auto;
    width: 48px;
    height: 64px;
    transform: translateY(-50%);
    border-radius: 8px;
    background: rgba(0,0,0,0.04);
  }
}

@media (pointer: coarse) {
  .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Danger buttons & confirmation modal */
.danger-btn {
  background: #a8382b !important;
  color: #fff !important;
  border-color: #a8382b !important;
}
.danger-btn:hover {
  background: #8e2f24 !important;
}

/* Star rating widget */
.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
  touch-action: manipulation;
}
.star-btn {
  background: none;
  border: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, transform 0.1s ease;
}
.star-btn:hover {
  transform: scale(1.15);
}
.star-btn.filled {
  color: var(--gold);
}
.shelf-rating-widget {
  margin-top: 4px;
  margin-left: -4px;
  display: flex;
  align-items: center;
}
.shelf-rating-widget .star-btn {
  font-size: 15px;
  min-width: 26px;
  min-height: 26px;
  padding: 3px 4px;
}
.shelf-rating {
  font-size: 11.5px;
  color: var(--gold);
  margin-top: 3px;
  letter-spacing: 1px;
}

/* Series badge & text */
.series-tag {
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 2px;
  line-height: 1.3;
}
.continue-series {
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Admin user management list controls */
.user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  gap: 10px;
}
.user-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.user-item-name {
  font-weight: 500;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.admin-btn-sm {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all .15s ease;
}
.admin-btn-sm:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Empty state upload button */
.btn.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}
.btn.primary:hover {
  opacity: 0.9;
}

/* Filter select */
#filter-select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  margin-left: 8px;
  height: 36px;
}

/* Dictionary Tooltip */
#dict-tooltip {
  position: absolute;
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px var(--shadow);
  padding: 12px;
  border-radius: var(--radius);
  z-index: 10000;
  max-width: 300px;
  font-size: 14px;
}
#dict-tooltip.hidden {
  display: none;
}
#dict-tooltip h4 {
  margin: 0 0 4px 0;
  color: var(--gold);
}
#dict-tooltip p {
  margin: 0;
  line-height: 1.4;
}

/* Product home, sync, bulk actions, and overlay tools */
.sync-status{position:absolute;right:calc(env(safe-area-inset-right) + 12px);bottom:-22px;z-index:4;padding:3px 9px;border-radius:999px;background:var(--paper-card);border:1px solid var(--line);font-size:11px;color:var(--ink-soft);box-shadow:0 2px 8px var(--shadow)}
.sync-status[data-state="offline"],.sync-status[data-state="pending"]{color:#9b5b22}.sync-status[data-state="saved"]{color:var(--cloth)}
.reader-more-menu{position:fixed;right:12px;top:calc(58px + env(safe-area-inset-top));z-index:120;background:var(--paper-card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 35px var(--shadow);padding:6px;min-width:190px}
.reader-more-menu button{display:block;width:100%;min-height:44px;padding:9px 12px;text-align:left;border:0;background:transparent;color:var(--ink);border-radius:8px;font:500 13px var(--font-ui)}
.reader-more-menu button:hover{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.continue-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin-bottom:22px;background:none!important;border:0!important;box-shadow:none!important}
.continue-item{scroll-snap-align:start;display:grid;grid-template-columns:82px minmax(175px,260px);gap:13px;min-width:290px;padding:12px;background:var(--paper-card);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.continue-item .spine{height:120px;width:82px;border-radius:5px}.continue-item h3{font:600 16px var(--font-display);margin:4px 0}.continue-item .kicker{text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:var(--gold)}
#smart-sections{display:grid;gap:22px;margin-bottom:28px}.smart-section h3{margin:0 0 10px;font:600 17px var(--font-display)}.smart-rail{display:flex;gap:11px;overflow-x:auto;padding-bottom:6px}.smart-book{min-width:145px;max-width:145px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper-card);cursor:pointer}.smart-book strong,.smart-book span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-book strong{font-size:12px}.smart-book span{font-size:10px;color:var(--ink-soft);margin-top:3px}
#shelf-view,.mobile-page{overflow-x:hidden;overscroll-behavior-x:none}
#continue-card,#smart-sections,.smart-section,.smart-rail,.continue-rail,.mobile-rail{min-width:0;width:100%;max-width:100%}
.smart-rail,.continue-rail,.mobile-rail{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.smart-book{appearance:none;-webkit-appearance:none;color:var(--ink);font:inherit;text-align:left}
#bulk-toolbar{position:sticky;top:72px;z-index:15;align-items:center;gap:8px;padding:9px 12px;margin:8px 0 18px;background:var(--paper-card);border:1px solid var(--line);border-radius:10px;box-shadow:0 5px 18px var(--shadow)}#bulk-toolbar:not([hidden]){display:flex}#bulk-toolbar span{margin-right:auto;font-size:12px;font-weight:600}#bulk-toolbar button,.reading-goals button{min-height:36px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);padding:6px 10px}
.book-card.bulk-mode{position:relative}.book-select{position:absolute;z-index:4;top:8px;left:8px;width:24px;height:24px;accent-color:var(--gold)}.book-card.selected .spine{outline:3px solid var(--gold);outline-offset:2px}
.book-menu-btn{position:absolute;right:7px;top:7px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:rgba(20,18,14,.72);color:#fff;font-size:20px}.book-card .spine{position:relative}.cover-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.book-details-card{max-width:580px}.book-details-layout{display:grid;grid-template-columns:120px 1fr;gap:18px}.book-details-cover{width:120px;aspect-ratio:2/3;object-fit:cover;border-radius:7px;background:var(--cloth)}.book-detail-meta{color:var(--ink-soft);font-size:12px;line-height:1.6}.book-description{white-space:pre-line;line-height:1.55}.modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.modal-actions button{min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.notebook-card{max-width:760px;max-height:86dvh;overflow:auto}#notebook-search{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}#notebook-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.tag-chip{border:1px solid var(--line);border-radius:999px;padding:4px 9px;background:var(--paper);color:var(--ink);font-size:11px}.notebook-item{padding:14px 2px;border-bottom:1px solid var(--line)}.notebook-item blockquote{margin:6px 0;font:italic 15px/1.5 var(--font-display)}.notebook-item small{color:var(--ink-soft)}
.stats-chart{height:150px;display:flex;align-items:end;gap:5px;margin:20px 0 10px;padding-top:12px;border-bottom:1px solid var(--line)}.stats-bar{flex:1;min-width:6px;background:var(--gold);border-radius:4px 4px 0 0;opacity:.78;position:relative}.stats-bar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--ink-soft)}.stats-summary{font-size:12px;line-height:1.6;margin-top:12px}.reading-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.reading-goals h4{grid-column:1/-1;margin:0}.reading-goals label{display:grid;gap:4px;font-size:11px;color:var(--ink-soft)}.reading-goals input{width:100%;padding:7px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.tts-select{max-width:120px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--paper-card);color:var(--ink)}.tts-compact-label{font-size:10px;display:flex;align-items:center;gap:4px}.tts-compact-label input{width:64px}
.gesture-settings label{display:block;margin:8px 0;font-size:12px}.gesture-settings input{accent-color:var(--gold)}
.install-tip,.update-banner{position:fixed;z-index:500;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(92vw,620px);padding:12px 14px;background:var(--paper-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 38px var(--shadow);font-size:12px}.install-tip[hidden],.update-banner[hidden]{display:none}.install-tip span{flex:1}.install-tip button,.update-banner button{min-height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:7px;padding:6px 10px}
#progress-remaining{min-width:88px;font-size:10px;color:var(--ink-soft);text-align:right}
#reader-bottom-actions{display:none}

@media (hover:none) and (pointer:coarse){
  .icon-btn,#topbar button,.drawer button,.popup-action-btn{min-width:44px;min-height:44px}
  body.reader-active #search-toggle,body.reader-active #bookmarks-toggle,body.reader-active #tts-btn,body.reader-active #fullscreen-btn,body.reader-active #help-toggle,body.reader-active #shell-theme-toggle,body.reader-active #logout-btn,body.reader-active #admin-toggle{display:none!important}
  body.reader-active #reader-more-btn{display:flex!important}
  body.reader-active #progress-bar{padding-bottom:calc(8px + env(safe-area-inset-bottom));min-height:56px}
  body.reader-active #progress-chapter,body.reader-active #progress-track,body.reader-active #progress-pct,body.reader-active #progress-remaining{display:none}
  #reader-bottom-actions{display:none!important}
  .reading-goals{grid-template-columns:1fr}.book-details-layout{grid-template-columns:90px 1fr}.book-details-cover{width:90px}
  .tts-info{display:none}.tts-bar-content{justify-content:center}.tts-select,.tts-compact-label{display:none}
}
@media (hover:none) and (pointer:coarse){
  .drawer{position:fixed;top:auto;left:0!important;right:0!important;bottom:0;width:auto;max-width:none;max-height:min(82dvh,720px);border:1px solid var(--line);border-radius:20px 20px 0 0;transform:translateY(105%)!important;box-shadow:0 -12px 34px var(--shadow);z-index:130}
  .drawer.open{transform:translateY(0)!important}
  #settings-drawer{max-height:min(72dvh,660px)}
  #toc-drawer{max-height:min(88dvh,760px)}
  #search-drawer{max-height:min(90dvh,780px)}
  #search-drawer #search-input{position:sticky;top:0;z-index:2}
  #toc-list .toc-item.current{color:var(--gold);font-weight:700;background:color-mix(in srgb,var(--gold) 12%,transparent)}
  #app.chrome-hidden .nav-zone{display:none!important}
  body.reader-active .update-banner{display:none}
}

/* Dedicated narrow-screen library presentation. Desktop keeps the original shelf. */
#mobile-shell{display:none}
#mobile-reader-controls{display:none}
#reader-reveal-controls{display:none}
#reader-immersive-chapter,#reader-immersive-progress{display:none}
@media (max-width:700px), (max-width:900px) and (pointer:coarse){
  #mobile-shell{display:block;min-height:100dvh;color:#f5efe5;font-family:var(--font-ui);background:#171714}
  body:not(.reader-active) #topbar{display:none}
  #shelf-view{padding:0!important;margin:0!important;max-width:none!important;background:#171714;min-height:100dvh}
  #shelf-view>:not(#mobile-shell){display:none!important}
  .mobile-page{box-sizing:border-box;min-height:100dvh;padding:calc(min(env(safe-area-inset-top), 60px) + 30px) 20px calc(min(env(safe-area-inset-bottom), 34px) + 116px);overflow-x:hidden}
  .mobile-heading{margin:0 0 23px}.mobile-heading h1{font:600 clamp(32px,10vw,44px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:7px 0 0;color:#f6f0e5}.mobile-kicker{margin:0;color:#c4a66c;font-size:11px;font-weight:700;letter-spacing:.18em}.mobile-back{display:block;min-height:44px;margin:-12px 0 13px -8px;padding:0 8px;color:#d8bb83;background:none;border:0;font:600 15px var(--font-ui)}
  .mobile-section{margin:0 0 28px}.mobile-section h2{font:600 23px/1.2 Georgia,serif;margin:0 0 13px;color:#f6f0e5}.mobile-rail{display:flex;gap:14px;width:calc(100% + 20px)!important;max-width:none!important;padding:2px 20px 14px 0;scroll-snap-type:x proximity}
  .mobile-book,.mobile-continue,.mobile-wide-action,.mobile-pill,.mobile-more-list button,.mobile-detail-actions button,.mobile-note{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;cursor:pointer}
  .mobile-book{display:flex;text-align:left;border:0;background:none;padding:0;min-width:0;max-width:100%;flex-shrink:0;scroll-snap-align:start}
  .mobile-book.mobile-grid{display:block;width:132px;min-width:132px}.mobile-cover{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;aspect-ratio:2/3;overflow:hidden;border-radius:7px;background:#554a3b;box-shadow:0 8px 22px #0007}.mobile-cover img{width:100%;height:100%;object-fit:cover}.mobile-cover-title{padding:12px;color:#f4e6cb;text-align:center;font:600 15px/1.2 Georgia,serif;overflow-wrap:anywhere}
  .mobile-grid .mobile-cover{width:132px}.mobile-book-info{display:block;min-width:0;padding-top:8px}.mobile-book-info strong,.mobile-book-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-book-info strong{font:600 14px/1.25 Georgia,serif}.mobile-book-info small{color:#a9a59b;font-size:11px;margin-top:4px}
  .mobile-continue{display:flex;align-items:center;text-align:left;gap:17px;width:100%;min-height:190px;padding:16px;background:#292821;border:1px solid #4a4335;border-radius:18px;box-shadow:0 10px 30px #0005}.mobile-continue .mobile-cover{width:105px}.mobile-continue-info{display:grid;gap:9px;min-width:0;flex:1}.mobile-continue-info strong{font:600 22px/1.12 Georgia,serif}.mobile-continue-info small{color:#b7afa1;font-size:12px}.mobile-progress-track{height:4px;border-radius:4px;background:#4b463e;overflow:hidden;margin-top:4px}.mobile-progress-track span{display:block;height:100%;background:#caa863;border-radius:4px}
  #mobile-tabbar{position:fixed;z-index:80;bottom:calc(8px + min(env(safe-area-inset-bottom), 34px));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-around;width:min(calc(100vw - 28px),430px);min-height:66px;padding:4px 8px;border:1px solid #77706499;border-radius:26px;background:#33332eea;box-shadow:0 12px 36px #0009;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  #mobile-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:62px;min-height:54px;border:0;border-radius:16px;background:none;color:#b2aea5;font:400 26px/1 Georgia,serif}#mobile-tabbar button span{font:600 10px var(--font-ui)}#mobile-tabbar button.active{color:#f3d394;background:#5c513e}
  .mobile-wide-action{display:block;width:100%;min-height:50px;margin:18px 0;padding:11px 16px;border:1px solid #c7a76b;border-radius:12px;background:#c8a96f;color:#1b1a16;font-weight:700;text-align:center}
  .mobile-library-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:20px;color:#a9a59b;font-size:12px}.mobile-library-tools>span{margin-right:auto}.mobile-pill{min-height:44px;padding:8px 11px;border:1px solid #585349;border-radius:999px;background:#282721;color:#eee6d9;font-size:12px}
  .mobile-books-list,.mobile-search-results{display:grid;gap:0}.mobile-list{display:flex;align-items:center;gap:16px;min-height:110px;width:100%;padding:10px 0;border-bottom:1px solid #3d3b34}.mobile-list .mobile-cover{width:57px;height:85px}.mobile-list .mobile-book-info{flex:1}.mobile-list .mobile-book-info strong{font-size:17px}.mobile-list .mobile-book-info small{font-size:12px}.mobile-books-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 14px}.mobile-books-grid .mobile-book{width:100%;min-width:0}.mobile-books-grid .mobile-cover{width:100%}
  .mobile-search-input{box-sizing:border-box;width:100%;min-height:52px;padding:12px 16px;border:1px solid #5a554b;border-radius:14px;background:#292821;color:#fff;font:16px var(--font-ui);outline:none}.mobile-search-input:focus{border-color:#caa863}.mobile-results-label{margin:22px 0 10px;color:#aaa69d;font-size:12px}.mobile-empty{color:#b4aca0;line-height:1.5}
  .mobile-account{margin:0 0 24px;padding:16px;border:1px solid #47433a;border-radius:12px;background:#292821}.mobile-more-list{display:grid;gap:1px;border-radius:14px;overflow:hidden;background:#3e3b34}.mobile-more-list button{min-height:56px;padding:14px 16px;border:0;background:#292821;color:#f3eee4;text-align:left;font-size:15px}
  .mobile-series-hero{position:relative;display:flex;align-items:center;gap:17px;min-height:190px;margin:-12px -20px 20px;padding:20px;overflow:hidden;background:linear-gradient(120deg,#5a4630,#26231f);background-size:cover;background-position:center}.mobile-series-hero:before{content:"";position:absolute;inset:0;background:#17171477;backdrop-filter:blur(12px)}.mobile-series-hero>*{position:relative}.mobile-series-hero .mobile-cover{width:93px}.mobile-series-hero .mobile-heading{margin:0}.mobile-series-hero h1{font-size:30px}
  .mobile-detail-hero{display:flex;gap:18px;align-items:center;margin:0 0 20px}.mobile-detail-hero .mobile-cover{width:120px}.mobile-detail-hero h2{font:600 25px/1.15 Georgia,serif;margin:0 0 8px}.mobile-detail-hero p{color:#aaa69d;margin:0 0 9px;font-size:13px}.mobile-series-link{border:0;background:none;color:#d1b374;padding:0;text-align:left;font:13px var(--font-ui)}.mobile-detail-actions{display:flex;gap:8px;flex-wrap:wrap}.mobile-detail-actions button{min-height:44px;padding:9px 12px;border:1px solid #5d5546;border-radius:10px;background:#2c2a25;color:#eee4d6;font-size:12px}.mobile-rating{display:flex;align-items:center;gap:2px;margin:22px 0;color:#aaa69d;font-size:12px}.mobile-rating span{margin-right:auto}.mobile-star{min-width:39px;min-height:44px;border:0;background:none;color:#d4af68;font:25px Georgia,serif}.mobile-detail-meta{color:#aaa69d;font-size:12px;line-height:1.5}.mobile-description{color:#ddd4c6;font:15px/1.6 Georgia,serif;white-space:pre-line}
  .mobile-note{display:block;width:100%;padding:15px 0;border:0;border-bottom:1px solid #403d35;background:none;text-align:left}.mobile-note small{color:#c6a76e}.mobile-note blockquote{margin:8px 0;font:italic 16px/1.4 Georgia,serif}.mobile-note p{color:#b9b0a2;font-size:13px}.mobile-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-stat{display:grid;gap:6px;padding:22px 15px;border:1px solid #4e493f;border-radius:13px;background:#292821}.mobile-stat strong{font:600 26px Georgia,serif}.mobile-stat small{color:#aaa69d}
  .mobile-status-label{display:grid;gap:9px;margin:22px 0;color:#aaa69d;font-size:12px}.mobile-status-label select{min-height:48px;padding:9px 12px;border:1px solid #5d5546;border-radius:10px;background:#2c2a25;color:#f3eee4;font:15px var(--font-ui)}.mobile-secondary-action{width:100%;min-height:48px;padding:10px 0;border:0;border-bottom:1px solid #403d35;background:none;color:#e6d3b3;text-align:left;font:14px var(--font-ui)}
  .mobile-offline-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;border-bottom:1px solid #3d3b34}.mobile-offline-row .mobile-list{grid-row:1/3;border:0}.mobile-offline-size{color:#aaa69d;font-size:11px}.mobile-offline-remove{min-width:64px;min-height:44px;padding:7px;border:1px solid #5d5546;border-radius:8px;background:#2c2a25;color:#eee4d6;font:12px var(--font-ui)}
  .mobile-sheet-backdrop{position:fixed;inset:0;z-index:250;display:flex;align-items:end;background:#0009}.mobile-actions-sheet{box-sizing:border-box;width:100%;padding:22px 20px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#2b2924;color:#f4eee2}.mobile-actions-sheet h2{font:600 24px Georgia,serif}.mobile-select-label{display:grid;gap:8px;margin:16px 0;font-size:13px}.mobile-select-label select{min-height:48px;padding:8px;border:1px solid #625b4d;border-radius:8px;background:#39362e;color:#fff;font:15px var(--font-ui)}
  body:not(.reader-active) #toast{bottom:calc(94px + min(env(safe-area-inset-bottom), 34px))}
  .book-menu-btn,.file-link-btn,.modal-actions button,.tts-ctrl-btn,.tag-chip{min-width:44px;min-height:44px}
  .modal.show .modal-card{max-width:none;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));overflow:auto}
  #upload-progress.show{position:fixed;inset:auto 12px calc(93px + min(env(safe-area-inset-bottom), 34px));max-width:none;width:calc(100vw - 24px);max-height:min(42dvh,320px);z-index:90;align-items:stretch;justify-content:start;padding:16px;border:1px solid #5a5142;border-radius:18px;background:#25231e;color:#f5efe5;box-shadow:0 12px 36px #0009;overflow:auto}
  #upload-progress-card{width:100%;display:grid;align-content:start;gap:10px}#upload-progress-card .spinner{margin:0}#upload-progress-text strong{display:block;margin:4px 0 10px;font:600 20px Georgia,serif}.upload-status-row{padding:10px 0;border-bottom:1px solid #403d35;overflow-wrap:anywhere;font-size:13px}
  body:not(.reader-active) .install-tip,body:not(.reader-active) .update-banner{bottom:calc(92px + min(env(safe-area-inset-bottom), 34px));z-index:85}
  .mobile-goals input{min-height:48px;padding:8px 12px;border:1px solid #625b4d;border-radius:8px;background:#39362e;color:#fff;font:16px var(--font-ui)}
  body.reader-active #topbar{display:none!important}
  body.reader-active #mobile-reader-controls{display:block;position:fixed;inset:0;z-index:75;pointer-events:none;transition:opacity .2s ease}
  body.reader-active #app.chrome-hidden #mobile-reader-controls{opacity:0;pointer-events:none}
  body.reader-active #mobile-reader-controls::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(min(env(safe-area-inset-top), 60px) + 62px);background:var(--reader-page-bg);border-bottom:1px solid color-mix(in srgb,var(--reader-ink) 20%,transparent);pointer-events:none}
  body.reader-active #app.chrome-hidden #reader-reveal-controls{display:flex;position:fixed;z-index:78;top:calc(10px + min(env(safe-area-inset-top), 60px));right:14px;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid color-mix(in srgb,var(--reader-ink) 25%,transparent);border-radius:999px;background:color-mix(in srgb,var(--reader-page-bg) 90%,var(--reader-ink));color:var(--reader-ink);box-shadow:0 5px 18px var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:600 12px var(--font-ui)}
  #mobile-reader-back,#mobile-reader-tools-button{display:flex;align-items:center;justify-content:center;position:absolute;min-width:48px;min-height:48px;border:1px solid color-mix(in srgb,var(--reader-ink) 25%,transparent);border-radius:50%;background:color-mix(in srgb,var(--reader-page-bg) 90%,var(--reader-ink));color:var(--reader-ink);box-shadow:0 5px 18px var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:28px Georgia,serif;pointer-events:auto}
  #mobile-reader-back{top:auto;bottom:calc(85px + min(env(safe-area-inset-bottom), 34px));left:14px}
  #mobile-reader-title{display:none}
  #mobile-reader-tools-button{right:14px;top:calc(12px + min(env(safe-area-inset-top), 60px));bottom:auto;font-size:23px}
  #mobile-reader-tools-menu{position:absolute;right:14px;top:calc(68px + min(env(safe-area-inset-top), 60px));bottom:auto;width:min(240px,calc(100vw - 30px));max-height:calc(100dvh - 90px - min(env(safe-area-inset-top), 60px));overflow-y:auto;padding:7px;border:1px solid color-mix(in srgb,var(--reader-ink) 25%,transparent);border-radius:15px;background:color-mix(in srgb,var(--reader-page-bg) 92%,var(--reader-ink));color:var(--reader-ink);box-shadow:0 15px 40px var(--shadow);pointer-events:auto}
  #mobile-reader-tools-menu[hidden]{display:none}
  #mobile-reader-tools-menu button{display:block;width:100%;min-height:44px;padding:8px 13px;border:0;border-radius:8px;background:none;color:var(--reader-ink);text-align:left;font:14px var(--font-ui)}
  body.reader-active #progress-bar{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 36px;gap:2px 12px;min-height:72px;padding:8px 18px calc(8px + min(env(safe-area-inset-bottom), 34px));border-top:1px solid color-mix(in srgb,var(--reader-ink) 20%,transparent);background:var(--reader-page-bg);font-size:11px}
  body.reader-active #progress-chapter{display:block!important;grid-column:1;grid-row:1;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;color:color-mix(in srgb,var(--reader-ink) 75%,transparent)}
  body.reader-active #progress-track{display:flex!important;grid-column:1/-1;grid-row:2;min-width:0;min-height:36px}
  body.reader-active #progress-slider{width:100%;height:36px;min-height:36px;margin:0;background-image:linear-gradient(to right,var(--gold) var(--progress,0%),color-mix(in srgb,var(--reader-ink) 25%,transparent) var(--progress,0%));background-size:100% 4px;background-position:center;background-repeat:no-repeat}
  body.reader-active #progress-slider::-webkit-slider-thumb{width:18px;height:18px;margin-top:0;box-shadow:0 0 0 3px var(--reader-page-bg)}
  body.reader-active #progress-pct{display:block!important;grid-column:2;grid-row:1;white-space:nowrap;color:color-mix(in srgb,var(--reader-ink) 75%,transparent)}
  body.reader-active #progress-remaining{display:none!important}
  body.reader-active #reader-bottom-actions{display:none!important}
  body.reader-active #reader-view:not(.scrolled) .nav-zone{background:transparent;opacity:.22}
  body.reader-active #reader-view:not(.scrolled) .nav-zone:focus-visible{background:color-mix(in srgb,var(--paper) 82%,transparent);opacity:.85}
  #mobile-tabbar button{gap:3px}
  #mobile-tabbar button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #mobile-reader-tools-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  #mobile-reader-back{top:calc(12px + min(env(safe-area-inset-top), 60px));bottom:auto}
  #mobile-reader-title{display:block;position:absolute;top:calc(22px + min(env(safe-area-inset-top), 60px));left:76px;right:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--reader-ink);font:600 13px var(--font-ui)}
  .mobile-star{min-width:44px}
  .mobile-series-link{min-height:44px;padding:8px 0}
  .mobile-selected .mobile-cover{outline:3px solid #d4af68;outline-offset:2px}
  .mobile-bulk-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 17px}
  .mobile-bulk-actions span{margin-right:auto;color:#d4af68;font-size:12px}
  .mobile-bulk-actions button{min-height:44px;padding:8px;border:1px solid #5d5546;border-radius:8px;background:#2c2a25;color:#eee4d6;font:12px var(--font-ui)}
  .mobile-library-row{display:flex;align-items:center;border-bottom:1px solid #3d3b34}
  .mobile-library-row .mobile-book{flex:1;border-bottom:0}
  .mobile-row-menu{flex:0 0 44px;min-height:44px;border:0;background:none;color:#d4af68;font:25px Georgia,serif}
  .mobile-note{display:grid;grid-template-columns:1fr auto;align-items:end}
  .mobile-note-open{width:100%;padding:14px 8px 14px 0;border:0;background:none;color:inherit;text-align:left}
  .mobile-note-edit{min-height:44px;padding:8px;border:0;background:none;color:#d4af68;font:12px var(--font-ui)}
  .mobile-note-tags{display:flex;gap:6px;overflow-x:auto;margin:14px 0}
  .mobile-note-tags [aria-pressed="true"]{border-color:#d4af68;color:#d4af68}
  .mobile-stats-detail{margin:22px 0}.mobile-stats-detail h2{font:600 21px Georgia,serif}
  .mobile-stats-chart{height:150px;display:flex;align-items:end;gap:5px;margin:18px 0;border-bottom:1px solid #5d5546}
  .mobile-stats-bar{flex:1;min-width:5px;border-radius:3px 3px 0 0;background:#c9a669}
  .mobile-series-stack{position:relative;flex:0 0 120px;height:160px}
  .mobile-series-stack .mobile-cover{position:absolute;top:14px;left:0;width:88px;height:132px;transform:rotate(-7deg)}
  .mobile-series-stack .mobile-cover:nth-child(2){left:15px;top:8px;transform:rotate(1deg)}
  .mobile-series-stack .mobile-cover:nth-child(3){left:30px;top:4px;transform:rotate(8deg)}
}

/* Installed WebKit can subtract the safe area from dvh even though vh covers
   the full Home Screen window. Keep controls inside that window. */
@media (display-mode:standalone) and (max-width:900px){
  html,body{height:100vh;min-height:100vh}
  #app{height:100vh}
  body.reader-active #app{height:100vh;bottom:auto}
  #shelf-view,#mobile-shell,.mobile-page{min-height:100vh}
}

/* Phone reading chrome, library rows, and management screens. */
@media (max-width:700px), (max-width:900px) and (pointer:coarse){
  .mobile-books-list,.mobile-search-results{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
  .mobile-library-row{min-width:0;max-width:100%}
  .mobile-library-row .mobile-book{min-width:0;max-width:calc(100% - 44px);overflow:hidden}
  .mobile-list{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden}
  .mobile-list .mobile-book-info{flex:1 1 0;min-width:0;overflow:hidden}
  .mobile-list .mobile-book-info strong{display:block;-webkit-line-clamp:unset;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.22}
  .mobile-list .mobile-book-info small{max-width:100%}
  .mobile-list .mobile-cover-title{font:700 25px Georgia,serif}
  .mobile-library-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-right:0;padding:0 0 12px;overflow:visible}
  .mobile-library-tools>span{grid-column:1/3;grid-row:1;align-self:center;margin-right:0}
  .mobile-library-tools .mobile-pill{width:100%;min-width:0;min-height:44px;margin-right:0;padding:8px 5px;white-space:normal;line-height:1.2}
  .mobile-library-tools .mobile-pill:nth-of-type(1){grid-column:1;grid-row:2}
  .mobile-library-tools .mobile-pill:nth-of-type(2){grid-column:2;grid-row:2}
  .mobile-library-tools .mobile-pill:nth-of-type(3){grid-column:3;grid-row:2}
  .mobile-library-tools .mobile-pill:nth-of-type(4){grid-column:3;grid-row:1}

  body.reader-active #viewer-wrap{inset:calc(min(env(safe-area-inset-top),60px) + 50px) 0 calc(min(env(safe-area-inset-bottom),34px) + 58px)}
  body.reader-active #mobile-reader-controls::before{height:calc(min(env(safe-area-inset-top),60px) + 50px)}
  #mobile-reader-back,#mobile-reader-tools-button{top:calc(3px + min(env(safe-area-inset-top),60px));min-width:44px;min-height:44px}
  #mobile-reader-title{top:calc(17px + min(env(safe-area-inset-top),60px));font-size:12px}
  #mobile-reader-tools-menu{top:calc(53px + min(env(safe-area-inset-top),60px))}
  body.reader-active #progress-bar{grid-template-rows:auto 24px;gap:2px 12px;min-height:58px;padding:4px 18px calc(4px + min(env(safe-area-inset-bottom),34px))}
  body.reader-active #progress-track{min-height:24px}
  body.reader-active #progress-slider{height:24px;min-height:24px}
  #reader-immersive-chapter,#reader-immersive-progress{display:none}
  body.reader-active #app.chrome-hidden #reader-immersive-chapter{display:block;position:fixed;z-index:76;top:calc(15px + min(env(safe-area-inset-top),60px));left:70px;right:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:color-mix(in srgb,var(--reader-ink) 68%,transparent);font:500 12px var(--font-ui);pointer-events:none}
  body.reader-active #app.chrome-hidden #reader-immersive-progress{display:block;position:fixed;z-index:76;left:70px;right:70px;bottom:calc(17px + min(env(safe-area-inset-bottom),34px));text-align:center;color:color-mix(in srgb,var(--reader-ink) 68%,transparent);font:500 12px var(--font-ui);pointer-events:none}
  body.reader-active #app.chrome-hidden #reader-reveal-controls{top:calc(4px + min(env(safe-area-inset-top),60px));right:15px;width:44px;min-height:44px;padding:0;border-radius:50%}
  #reader-reveal-controls svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal).show{--paper:#24231f;--paper-card:#2c2a25;--ink:#f5efe5;--ink-soft:#b9b0a2;--line:#504b41;--gold:#d2ad69;padding:0;align-items:stretch;background:#171714}
  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal).show .modal-card{box-sizing:border-box;width:100%;max-width:none;max-height:none;height:100dvh;margin:0;padding:calc(18px + min(env(safe-area-inset-top),60px)) 20px calc(28px + min(env(safe-area-inset-bottom),34px));border:0;border-radius:0;box-shadow:none;background:#171714;color:var(--ink);overflow-y:auto}
  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal) .modal-title{position:sticky;top:-1px;z-index:2;min-height:54px;margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid #403d35;background:#171714}
  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal) .modal-title h3{margin:0;font:600 27px/1.15 Georgia,serif;color:#f5efe5}
  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal) .modal-close{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:0;border:1px solid #555047;border-radius:50%;background:#292821;color:#f5efe5}
  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal) .modal-close svg{width:20px;height:20px}
  .collections-intro{margin:0 0 20px;color:#b9b0a2;font:14px/1.5 var(--font-ui)}
  #collections-card .new-collection-row{display:flex;align-items:stretch;gap:8px}
  #collections-card .new-collection-input{flex:1 1 0;min-width:0;min-height:48px;padding:10px 13px;border:1px solid #5d5546;border-radius:11px;background:#292821;color:#f5efe5;font-size:16px}
  #collections-card .new-collection-btn{min-height:48px;padding:8px 16px;border-radius:11px;font-size:14px}
  #collection-list{display:grid;gap:10px;margin-top:22px;color:#b9b0a2}
  #collection-list .collection-item-manage{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:12px 14px;border:1px solid #49453c;border-radius:12px;background:#292821;color:#f5efe5}
  #collection-list .collection-item-manage>span{flex:1 1 0;min-width:0;overflow-wrap:anywhere;font:600 15px/1.35 var(--font-ui)}
  #collection-list .collection-actions{display:flex;gap:5px}
  #collection-list .collection-actions button{min-height:44px;padding:7px 9px;border:0;border-radius:8px;background:#39362e;color:#e7d4b2;font:12px var(--font-ui)}
  #collection-list .collection-actions button:last-child{color:#f0a9a1}
  #collections-card .close-row{display:none}
  #admin-modal .admin-modal-header{align-items:center;padding-bottom:14px;border-bottom:1px solid #403d35}
  #admin-modal #admin-title{font:600 27px/1.15 Georgia,serif;color:#f5efe5}
  #admin-modal .admin-description{color:#b9b0a2;font-size:14px;line-height:1.5}
  #admin-modal .admin-section-title{margin:24px 0 12px;color:#d2ad69}
  #admin-modal .admin-user-item,#admin-modal .admin-role-option{padding:14px;border:1px solid #49453c;border-radius:12px;background:#292821}
  #admin-modal .admin-user-name,#admin-modal .admin-role-option strong{color:#f5efe5}
  #admin-modal .admin-field input{min-height:48px;border:1px solid #5d5546;border-radius:11px;background:#292821;color:#f5efe5;font-size:16px}
  #admin-modal .admin-btn-sm,#admin-modal .collection-delete{min-height:44px;padding:8px 10px;border:1px solid #5d5546;border-radius:8px;background:#39362e;color:#e7d4b2}
  #admin-modal .admin-create-actions .new-collection-btn{min-height:48px;border-radius:11px;font-size:14px}
  :is(#confirm-modal,#reset-passphrase-modal).show{--paper:#24231f;--paper-card:#2c2a25;--ink:#f5efe5;--ink-soft:#b9b0a2;--line:#504b41;--gold:#d2ad69;align-items:flex-end;padding:0;background:#0009}
  :is(#confirm-modal,#reset-passphrase-modal).show .modal-card{width:100%;max-width:none!important;height:auto;max-height:78dvh;margin:0;padding:24px 20px calc(24px + min(env(safe-area-inset-bottom),34px));border:0;border-radius:20px 20px 0 0;background:#292821;color:#f5efe5;overflow-y:auto}
  :is(#confirm-modal,#reset-passphrase-modal) .modal-title h3{margin:0;font:600 24px Georgia,serif}
}

@media (display-mode:standalone) and (max-width:900px){
  :is(#stats-modal,#collections-modal,#admin-modal,#book-details-modal,#notebook-modal,#shortcuts-modal).show .modal-card{height:100vh}
}