:root{color-scheme:dark;--bg:#101114;--panel:#1b1d22;--text:#f2f3f5;--muted:#a9adb7;--accent:#9db8ff;--line:#343741}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,Arial,sans-serif}
header {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 12px 18px;
  background: #17191e;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand{font-weight:800;letter-spacing:.08em}.muted{font-size:12px;color:var(--muted)}
.toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px;background:var(--panel);border-bottom:1px solid var(--line)}
button,select,.fileLabel{padding:8px 11px;border:1px solid #454a55;border-radius:9px;background:#262932;color:var(--text);font:inherit;cursor:pointer}
button:disabled,select:disabled{opacity:.4;cursor:default}.fileLabel input{display:none}
#status{min-width:90px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
#progress{height:3px;background:#292c34}#fill{height:100%;width:0;background:var(--accent)}
#welcome{max-width:660px;margin:9vh auto;padding:30px 22px;border:1px dashed #454a55;border-radius:18px;text-align:center}
#welcome p{color:var(--muted);line-height:1.6}
#reader{display:none;padding:16px 8px 90px}
#single{display:flex;justify-content:center;align-items:flex-start;min-height:65vh}
#pageCanvas{display:block;background:white;max-width:100%;height:auto;box-shadow:0 10px 40px #0008}
#scroll{display:none;max-width:900px;margin:0 auto}
#scroll canvas{display:block;background:white;height:auto;max-width:100%;margin:0 auto 8px;box-shadow:0 5px 22px #0007}
#bottomBar{position:fixed;z-index:10;left:0;right:0;bottom:0;padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:#17191ef2;border-top:1px solid #3b3e48;backdrop-filter:blur(12px);display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
#bottomBar button,#bottomBar select{padding:7px 10px}
.note{margin:12px auto;color:var(--muted);font-size:12px;text-align:center;max-width:800px}
@media(max-width:620px){header{padding:10px}.toolbar{gap:5px;padding:8px}#bottomBar{gap:5px}#bottomBar button,#bottomBar select{font-size:13px;padding:7px}#reader{padding:6px 2px 110px}}

/* Auto-hide controls while in fullscreen */
#bottomBar {
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Hide the bar when fullscreen is active */
body.fullscreen-hidden #bottomBar {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* Keep the bar visible when the cursor reaches the bottom */
body.fullscreen-controls-visible #bottomBar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Invisible hover zone at the bottom edge */
#fullscreen-hover-zone {
  display: none;
}

html:fullscreen #fullscreen-hover-zone,
html:-webkit-full-screen #fullscreen-hover-zone {
  display: block;
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
}


/* Add-file menu */
#addMenu {
  position: fixed;
  z-index: 30;
  bottom: 78px;
  left: 14px;
  width: 190px;
  padding: 8px;
  background: rgba(30, 32, 39, .94);
  backdrop-filter: blur(14px);
  border: 1px solid #484c58;
  border-radius: 12px;
  box-shadow: 0 8px 30px #0008;
}

#addMenu button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 3px 0;
}

/* Only shown after a folder is selected */
#libraryBtn[hidden],
#addMenu[hidden],
#libraryPanel[hidden] {
  display: none !important;
}

/* Translucent library tree */
#libraryPanel {
  position: fixed;
  z-index: 25;
  right: 14px;
  bottom: 78px;
  width: min(380px, calc(100vw - 28px));
  max-height: min(65vh, 600px);
  overflow: auto;
  padding: 14px;
  background: rgba(25, 27, 34, .88);
  backdrop-filter: blur(18px);
  border: 1px solid #484c58;
  border-radius: 14px;
  box-shadow: 0 12px 40px #0009;
}

#libraryHeading {
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #484c58;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border-radius: 7px;
  cursor: pointer;
}

.tree-row:hover {
  background: rgba(157, 184, 255, .13);
}

.tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-children {
  margin-left: 15px;
  padding-left: 8px;
  border-left: 1px solid #454955;
}

.tree-empty {
  padding: 8px;
  color: #a9adb7;
  font-size: 13px;
}



/* Bottom-right library controls and their anchored popups */
#bottomBar { padding-right: 112px; }
#libraryControls { position: absolute; right: 10px; display: flex; gap: 8px; }
#libraryControls button { min-width: 38px; }
#libraryControls #addMenu { position: absolute; right: 0; bottom: 46px; left: auto; }
#libraryControls #libraryPanel { position: absolute; right: 0; bottom: 46px; width: min(380px, calc(100vw - 28px)); max-height: min(65vh, 600px); }
@media (max-width: 620px) { #bottomBar { padding-right: 98px; } #libraryControls { right: 6px; gap: 5px; } #libraryControls #libraryPanel { right: -2px; width: min(340px, calc(100vw - 16px)); } }

/* Hide the app title and progress indicator in fullscreen */
html:fullscreen header,
html:fullscreen #progress,
html:-webkit-full-screen header,
html:-webkit-full-screen #progress {
  display: none !important;
}

/* Allow enlarged PDF pages to retain their real display width */
#reader {
  overflow-x: auto;
}

#single {
  width: max-content;
  min-width: 100%;
}

#pageCanvas {
  max-width: none;
}

#scroll {
  max-width: none;
  width: max-content;
  min-width: 100%;
}

#scroll canvas {
  max-width: none;
}



/* Immersive fullscreen reading surface */
html:fullscreen,
html:-webkit-full-screen {
  background: #000;
}

html:fullscreen body,
html:-webkit-full-screen body {
  background: #000;
}

html:fullscreen #reader,
html:-webkit-full-screen #reader {
  padding-top: 0;
}

/* Smoothly hide and reveal the existing bottom controls */
#bottomBar {
  transition:
    transform 260ms ease,
    opacity 260ms ease;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  #bottomBar {
    transition: none;
  }
}

/* No unwanted page shadows in immersive mode */
html:fullscreen #pageCanvas,
html:fullscreen #scroll canvas,
html:-webkit-full-screen #pageCanvas,
html:-webkit-full-screen #scroll canvas {
  box-shadow: none;
}

/* The existing title and progress strip stay hidden in fullscreen */
html:fullscreen header,
html:fullscreen #progress,
html:-webkit-full-screen header,
html:-webkit-full-screen #progress {
  display: none !important;
}



/* PDF cover previews in the library tree */
.tree-cover {
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 58px;
  object-fit: contain;
  background: #111216;
  border: 1px solid #454955;
  border-radius: 4px;
}

.tree-cover-placeholder {
  display: flex;
  flex: 0 0 42px;
  width: 42px;
  height: 58px;
  align-items: center;
  justify-content: center;
  color: #a9adb7;
  background: #111216;
  border: 1px solid #454955;
  border-radius: 4px;
  font-size: 11px;
}

.tree-row:has(.tree-cover),
.tree-row:has(.tree-cover-placeholder) {
  min-height: 72px;
}

.tree-row .tree-name {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}



/* Reading settings popover */
#settingsPanel[hidden] {
  display: none !important;
}

#settingsPanel {
  position: fixed;
  z-index: 35;
  right: 14px;
  bottom: 78px;
  width: min(290px, calc(100vw - 28px));
  padding: 16px;
  background: rgba(25, 27, 34, .96);
  backdrop-filter: blur(18px);
  border: 1px solid #484c58;
  border-radius: 14px;
  box-shadow: 0 12px 40px #0009;
}

.settings-heading {
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #454955;
}

.setting-field {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  color: var(--text);
  font-size: 13px;
}

.setting-field select {
  width: 100%;
}

/* Theme variables */
body[data-theme="oled"] {
  --bg: #000;
  --panel: #080808;
  --text: #f5f5f5;
  --muted: #a5a5a5;
  --line: #292929;
}

body[data-theme="sepia"] {
  --bg: #211b16;
  --panel: #30261e;
  --text: #f0dfc3;
  --muted: #c0a98a;
  --line: #554332;
}

body[data-theme="sepia"] header,
body[data-theme="sepia"] #bottomBar {
  background: #292119;
}

body[data-theme="sepia"] button,
body[data-theme="sepia"] select {
  background: #3a2e23;
  border-color: #66503a;
  color: var(--text);
}

/* Adjustable spacing between continuous-scroll pages */
:root {
  --page-gap: 8px;
}

#scroll canvas {
  margin-bottom: var(--page-gap);
}


/* Keep the settings popover attached to the gear button. */
#settingsControls { position: relative; }
#settingsControls #settingsPanel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
}



/* Left-edge reader sidebar */
#sidebarTrigger {
  position: fixed;
  z-index: 44;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
}

#sidebar {
  position: fixed;
  z-index: 45;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(264px, calc(100vw - 48px));
  padding: 16px 12px;
  background: rgba(24, 26, 32, .97);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 28px #0008;
  transform: translateX(-100%);
  transition: transform 220ms ease;
}

#sidebar.is-open {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--line);
}

.sidebar-brand {
  font-weight: 800;
  letter-spacing: .1em;
}

#sideClose {
  padding: 3px 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.sidebar-actions {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.sidebar-actions button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  #sidebar {
    transition: none;
  }
}

/* Right-edge trigger */
#pageRailHoverZone {
  position: fixed;
  z-index: 48;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
}

/* Sliding page catalogue */
#pageRail {
  position: fixed;
  z-index: 47;
  top: 0;
  right: 0;
  bottom: 0;

  width: 172px;
  max-width: 85vw;
  padding: 12px 9px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  background: rgba(24, 26, 32, .96);
  backdrop-filter: blur(18px);
  border-left: 1px solid #454955;
  box-shadow: -8px 0 28px #0005;

  transform: translateX(100%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    transform 220ms ease,
    opacity 180ms ease,
    visibility 220ms;
}

#pageRail[hidden] {
  display: none !important;
}

#pageRail.page-rail-open {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.page-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  flex-shrink: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #454955;
}

.page-rail-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

.page-rail-subtitle {
  margin-top: 3px;
  font-size: 11px;
  color: #a9adb7;
}

#pageRailClose {
  padding: 2px 7px;
  background: transparent;
  border: 0;
  font-size: 21px;
}

#pageRailList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  scrollbar-width: thin;
}

.page-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  width: 100%;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #d8dae0;
  cursor: pointer;
}

.page-thumb:hover {
  background: rgba(157, 184, 255, .1);
}

.page-thumb.active {
  border-color: var(--accent, #9db8ff);
  background: rgba(157, 184, 255, .12);
}

.page-thumb canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px #0006;
}

.page-thumb-number {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.page-thumb-placeholder {
  width: 86px;
  height: 112px;
  display: grid;
  place-items: center;
  background: #30333b;
  color: #a9adb7;
  border-radius: 3px;
  font-size: 12px;
}

/* Keep the rail available in fullscreen */
html:fullscreen #pageRail,
html:fullscreen #pageRailHoverZone,
html:-webkit-full-screen #pageRail,
html:-webkit-full-screen #pageRailHoverZone {
  z-index: 55;
}

@media (prefers-reduced-motion: reduce) {
  #pageRail {
    transition: none;
  }
}