#screen-reader {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--reader-bg, #fff);
}

.reader-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: var(--brand);
  color: white;
  flex: 0 0 auto;
}

.reader-topbar .icon-button { color: white; }

.reader-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  font-size: 13px;
}

#reader-book-title { font-weight: 600; }
.reader-chapter-title {
  font-size: 11px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.reader-actions { display: flex; gap: 4px; }

.reader-download {
  padding: 10px 20px;
  background: #fff8e6;
  border-bottom: 1px solid #eee0bd;
  flex: 0 0 auto;
}
.reader-download p { margin: 0 0 6px; font-size: 13px; color: #6b5b1e; }
.reader-download progress { width: 100%; }

.reader-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--reader-bg, #fff);
}

#reader-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--reader-bg, #fff);
}

.reader-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  border: none;
  background: transparent;
  z-index: 3;
}
.reader-edge-left { left: 0; }
.reader-edge-right { right: 0; }

.reader-bottombar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom));
  background: var(--brand);
  color: white;
  flex: 0 0 auto;
  font-size: 12px;
}
.reader-bottombar input[type="range"] { flex: 1; }

.reader-drawer[hidden] {
  display: none;
}

.reader-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: white;
  color: #1f1f1f;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 18px 18px;
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.drawer-header h2 { margin: 0; font-size: 16px; }

.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 4px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  color: #1f1f1f;
}
.toc-list li button.active { color: var(--brand); font-weight: 600; }

.settings-group { margin-bottom: 22px; }
.settings-label { display: block; font-size: 13px; color: #6b6b6b; margin-bottom: 8px; }

.theme-swatches { display: flex; gap: 8px; }
.theme-swatch {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 2px solid transparent;
  font-size: 13px;
}
.theme-swatch.active { border-color: var(--brand); }
.theme-light { background: #ffffff; color: #1f1f1f; border-color: #ddd; }
.theme-sepia { background: #f2e6cf; color: #3a2f1c; }
.theme-night { background: #1e1e1e; color: #eaeaea; }

.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fafafa;
  font-size: 16px;
}
.stepper span { min-width: 60px; text-align: center; font-size: 13px; color: #444; }