:root {
  --reader-bg: #ece8dc;
  --reader-panel: rgba(255, 255, 255, 0.98);
  --reader-border: rgba(34, 36, 38, 0.12);
  --reader-shadow: 0 20px 50px rgba(20, 30, 24, 0.18);
  --reader-text: #172019;
  --reader-muted: #617067;
  --reader-accent: var(--app-accent, #d05834);
  --reader-accent-strong: var(--app-accent-strong, #93381f);
  --reader-accent-soft: var(--app-accent-soft, #f29b80);
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #f6f2e8;
  --reader-page-text: #1b1a18;
  --reader-bg-image: none;
  --reader-bg-size: auto;
  --reader-bg-repeat: no-repeat;
  --reader-bg-position: center;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(236, 230, 219, 0.22)),
    var(--texture-clean-gray-paper);
  --reader-page-bg-size: 100% 100%, 320px 320px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center;
  --reader-page-bg-blend-mode: normal, multiply;
  --texture-beige-paper: url("themes/default/assets/reader_textures/beige-paper.png");
  --texture-cardboard-flat: url("themes/default/assets/reader_textures/cardboard-flat.png");
  --texture-clean-gray-paper: url("themes/default/assets/reader_textures/clean-gray-paper.png");
  --texture-paper-three: url("themes/default/assets/reader_textures/paper-3.png");
  --texture-textured-paper: url("themes/default/assets/reader_textures/textured-paper.png");
  --ui-radius: 0.28571429rem;
  --ui-radius-lg: 0.5rem;
  --heading-font: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --body-font: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: var(--reader-page-bg);
  background-image: var(--reader-page-bg-image);
  background-size: var(--reader-page-bg-size);
  background-repeat: var(--reader-page-bg-repeat);
  background-position: var(--reader-page-bg-position);
  background-blend-mode: var(--reader-page-bg-blend-mode);
  color: var(--reader-text);
}

body {
  font-family: var(--body-font);
  overflow: hidden;
}

button,
select,
input {
  font: inherit;
}

.hidden[hidden] {
  display: none !important;
}

.reader-app {
  position: fixed;
  inset: 0;
  color: var(--reader-text);
}

.reader-stage,
.viewer-frame,
#viewer {
  width: 100%;
  height: 100%;
}

.reader-stage,
.viewer-frame,
#viewer {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.reader-app,
.reader-stage,
.viewer-frame {
  background-color: var(--reader-page-bg);
  background-image: var(--reader-page-bg-image);
  background-size: var(--reader-page-bg-size);
  background-repeat: var(--reader-page-bg-repeat);
  background-position: var(--reader-page-bg-position);
  background-blend-mode: var(--reader-page-bg-blend-mode);
}

#viewer,
#viewer > div,
#viewer .epub-container,
#viewer .epub-view {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#viewer iframe {
  background-color: var(--reader-page-bg) !important;
  background-image: var(--reader-page-bg-image) !important;
  background-size: var(--reader-page-bg-size) !important;
  background-repeat: var(--reader-page-bg-repeat) !important;
  background-position: var(--reader-page-bg-position) !important;
  background-blend-mode: var(--reader-page-bg-blend-mode) !important;
}

.viewer-frame {
  overflow: hidden;
  padding:
    calc(var(--reader-page-block-margin, 5.7%) + env(safe-area-inset-top))
    calc(var(--reader-page-inline-margin, 6.5%) + env(safe-area-inset-right))
    calc(var(--reader-page-block-margin, 5.7%) + env(safe-area-inset-bottom))
    calc(var(--reader-page-inline-margin, 6.5%) + env(safe-area-inset-left));
  transition: padding 150ms ease;
}

#viewer {
  min-height: 0;
}

#viewer > div,
#viewer .epub-container,
#viewer .epub-view {
  height: 100%;
  overflow: hidden !important;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--reader-muted);
}

.reader-subtitle {
  margin: 0;
  color: var(--reader-muted);
}

.reader-top-actions {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  left: max(0.85rem, env(safe-area-inset-left));
  z-index: 24;
}

.reader-top-actions.is-visible {
  display: flex;
}

.loading-card {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(28rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--reader-border);
  border-radius: var(--ui-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--reader-shadow);
  pointer-events: none;
  z-index: 10;
}

.loading-card h1 {
  margin: 0.25rem 0;
  font-family: var(--heading-font);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 400;
}

.loading-progress-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.loading-progress-row strong {
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 400;
}

.loading-progress-row span {
  color: var(--reader-muted);
}

.loading-progress-track {
  margin-top: 0.65rem;
}

.progress-panel {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, calc(100% + 1rem));
  width: min(28rem, calc(100vw - 1rem));
  max-height: min(84dvh, 46rem);
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--reader-border);
  border-radius: var(--ui-radius-lg);
  background: var(--reader-panel);
  box-shadow: var(--reader-shadow);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
  z-index: 20;
}

.progress-panel.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.settings-panel {
  position: fixed;
  inset:
    max(0.75rem, calc(env(safe-area-inset-top) + 0.85rem))
    max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom))
    max(0.75rem, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  padding:
    calc(clamp(1rem, 1vw + 0.9rem, 1.35rem) + env(safe-area-inset-top))
    calc(clamp(1rem, 1vw + 0.9rem, 1.35rem) + env(safe-area-inset-right))
    calc(clamp(1rem, 1vw + 0.9rem, 1.35rem) + env(safe-area-inset-bottom))
    calc(clamp(1rem, 1vw + 0.9rem, 1.35rem) + env(safe-area-inset-left));
  border: 1px solid var(--reader-border);
  border-radius: clamp(1rem, 2vw, 1.35rem);
  background: var(--reader-panel);
  box-shadow: var(--reader-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem) scale(0.99);
  transition: transform 180ms ease, opacity 180ms ease;
  z-index: 20;
}

.settings-panel.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.settings-header {
  margin-bottom: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--reader-border);
}

.panel-header h1,
.panel-header h2 {
  margin: 0.25rem 0;
  font-family: var(--heading-font);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
}

.text-button,
.action-button {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.text-button {
  padding: 0;
  background: transparent;
  color: var(--reader-muted);
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0 1rem;
  border-radius: var(--ui-radius) !important;
  background: var(--reader-accent) !important;
  color: var(--app-accent-contrast, #fff8f4) !important;
  box-shadow: none !important;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.reader-close-button {
  min-height: 2.45rem;
  padding: 0 0.95rem;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(208, 88, 52, 0.22) !important;
  font-size: 0.95rem;
}

.status-card {
  margin-bottom: 1rem;
  padding: 0.9rem;
  border-radius: var(--ui-radius-lg);
  background: rgba(248, 250, 248, 0.92);
  border: 1px solid rgba(24, 40, 31, 0.06);
}

.progress-row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0.3rem 0 0.85rem;
}

.progress-row strong {
  font-family: var(--heading-font);
  font-size: 1.6rem;
}

.progress-row span {
  color: var(--reader-muted);
}

.progress-detail {
  margin-top: 0.85rem;
}

.progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--reader-track);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--reader-accent), var(--reader-accent-strong));
  transition: width 200ms ease;
}

.settings-layout {
  min-height: 0;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.2rem;
}

.settings-controls {
  min-height: min-content;
}

.settings-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setting-field {
  display: grid;
  gap: 0.55rem;
}

.setting-help {
  font-size: 0.9rem;
  color: var(--reader-muted);
}

.setting-field select,
.setting-field input[type="range"] {
  width: 100%;
}

.setting-field select {
  min-height: 3rem;
  padding: 0 0.9rem;
  border-radius: var(--ui-radius);
  border: 1px solid var(--reader-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--reader-text);
  -webkit-text-fill-color: var(--reader-text);
  appearance: auto;
}

.setting-field select option {
  color: var(--reader-text);
  background: var(--reader-panel);
}

.setting-field input[type="range"] {
  accent-color: var(--reader-accent);
}

.font-gallery-field {
  gap: 0.7rem;
  grid-column: 1 / -1;
}

.toggle-card {
  grid-column: 1 / -1;
  gap: 0.8rem;
  margin-top: 0.4rem;
  padding: 1rem;
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--reader-border);
  background: rgba(255, 255, 255, 0.86);
}

.toggle-intro {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 400;
}

.toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}

.toggle-copy {
  display: grid;
  gap: 0.35rem;
}

.toggle-label {
  font-size: 1rem;
  font-weight: 600;
}

.toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 3.35rem;
  height: 2rem;
}

.toggle-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(97, 112, 103, 0.24);
  transition: background 150ms ease, box-shadow 150ms ease;
  pointer-events: none;
}

.toggle-slider::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(17, 27, 21, 0.16);
  transition: transform 150ms ease;
}

.toggle-input:focus-visible + .toggle-slider {
  outline: 2px solid var(--reader-accent);
  outline-offset: 2px;
}

.toggle-input:checked + .toggle-slider {
  background: var(--reader-accent);
}

.toggle-input:checked + .toggle-slider::after {
  transform: translateX(1.35rem);
}

.font-choice-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(13.2rem, 1fr));
}

.font-choice {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  text-align: left;
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--reader-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--reader-text);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.font-choice:hover,
.font-choice:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--app-accent-border, rgba(208, 88, 52, 0.24));
  box-shadow: 0 10px 24px rgba(17, 27, 21, 0.08);
}

.font-choice.is-active {
  background: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  border-color: var(--app-accent-border, rgba(208, 88, 52, 0.24));
  box-shadow: 0 12px 24px rgba(17, 27, 21, 0.1);
}

.font-choice-name {
  display: block;
  font-size: 1.04rem;
  line-height: 1.25;
  font-weight: 700;
}

.font-choice-preview {
  display: block;
  font-size: 0.97rem;
  line-height: 1.35;
  font-weight: 500;
}

.font-choice b,
.font-choice strong,
.font-choice-anchor {
  font-weight: 700;
}

.reader-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 24, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 15;
}

.reader-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.reader-app.is-loaded .loading-card {
  display: none;
}

.theme-paper {
  --reader-bg: #ece8dc;
  --reader-panel: rgba(255, 255, 255, 0.98);
  --reader-text: #172019;
  --reader-muted: #617067;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #f6f2e8;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(236, 230, 219, 0.22)),
    var(--texture-clean-gray-paper);
  --reader-page-bg-size: 100% 100%, 320px 320px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-cream {
  --reader-bg: #e3d8c8;
  --reader-panel: rgba(255, 251, 244, 0.98);
  --reader-text: #172019;
  --reader-muted: #6a645e;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #f4eadb;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(236, 221, 199, 0.18)),
    var(--texture-beige-paper);
  --reader-page-bg-size: 100% 100%, 220px 220px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-sepia {
  --reader-bg: #e6d8c0;
  --reader-panel: rgba(255, 249, 239, 0.98);
  --reader-text: #172019;
  --reader-muted: #786556;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #efe3cb;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 252, 245, 0.28), rgba(227, 205, 167, 0.2)),
    var(--texture-paper-three);
  --reader-page-bg-size: 100% 100%, 276px 276px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-dusk {
  --reader-bg: #b29f85;
  --reader-panel: rgba(248, 242, 232, 0.96);
  --reader-text: #172019;
  --reader-muted: #5d564f;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #dccbb0;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 250, 244, 0.18), rgba(181, 156, 122, 0.18)),
    var(--texture-textured-paper);
  --reader-page-bg-size: 100% 100%, 420px 420px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-sage {
  --reader-bg: #b8c2b2;
  --reader-panel: rgba(245, 248, 242, 0.96);
  --reader-text: #172019;
  --reader-muted: #576258;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #dbe2d5;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(191, 204, 186, 0.2)),
    var(--texture-clean-gray-paper);
  --reader-page-bg-size: 100% 100%, 320px 320px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-slate {
  --reader-bg: #b4bec8;
  --reader-panel: rgba(245, 247, 250, 0.96);
  --reader-text: #172019;
  --reader-muted: #56606a;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #dbe2e8;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(187, 198, 211, 0.18)),
    var(--texture-clean-gray-paper);
  --reader-page-bg-size: 100% 100%, 320px 320px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-cotton {
  --reader-bg: #ddd3c3;
  --reader-panel: rgba(252, 249, 243, 0.97);
  --reader-text: #172019;
  --reader-muted: #675f56;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #f3ece1;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(226, 214, 191, 0.12)),
    var(--texture-textured-paper);
  --reader-page-bg-size: 100% 100%, 360px 360px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-parchment {
  --reader-bg: #d8c8a9;
  --reader-panel: rgba(251, 246, 236, 0.97);
  --reader-text: #172019;
  --reader-muted: #6c604f;
  --reader-track: var(--app-accent-highlight, rgba(208, 88, 52, 0.16));
  --reader-page-bg: #e8d7b6;
  --reader-page-text: #1b1a18;
  --reader-page-bg-image:
    linear-gradient(180deg, rgba(255, 252, 243, 0.16), rgba(214, 190, 147, 0.14)),
    var(--texture-cardboard-flat);
  --reader-page-bg-size: 100% 100%, 300px 300px;
  --reader-page-bg-repeat: no-repeat, repeat;
  --reader-page-bg-position: center, center;
  --reader-page-bg-blend-mode: normal, multiply;
}

.theme-midnight {
  --reader-bg: #1f2632;
  --reader-bg-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 34%);
  --reader-bg-size: 100% 100%;
  --reader-panel: rgba(18, 27, 40, 0.95);
  --reader-border: rgba(214, 226, 239, 0.08);
  --reader-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  --reader-text: #eef3e8;
  --reader-muted: #a6b8b0;
  --reader-track: rgba(255, 255, 255, 0.12);
  --reader-page-bg: #1f2632;
  --reader-page-text: #eef3e8;
  --reader-page-bg-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12));
  --reader-page-bg-size: 100% 100%;
  --reader-page-bg-repeat: no-repeat;
}

.theme-midnight .loading-card,
.theme-midnight .progress-panel,
.theme-midnight .settings-panel,
.theme-midnight .status-card,
.theme-midnight .toggle-card,
.theme-midnight .setting-field select,
.theme-midnight .font-choice {
  background: rgba(27, 39, 55, 0.95);
  color: var(--reader-text);
}

.theme-midnight .text-button,
.theme-midnight .progress-row span,
.theme-midnight .reader-subtitle,
.theme-midnight .eyebrow,
.theme-midnight .setting-help {
  color: var(--reader-muted);
}

@media (max-width: 640px) {
  .loading-card {
    width: calc(100vw - 1rem);
  }

  .progress-panel {
    width: calc(100vw - 1rem);
  }

  .progress-panel {
    max-height: min(84dvh, 40rem);
  }

  .settings-panel {
    inset: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .progress-row {
    flex-direction: column;
    align-items: start;
    gap: 0.25rem;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .font-choice-grid {
    grid-template-columns: 1fr;
  }

  .toggle-field {
    align-items: start;
  }
}