:root {
  /* Light "website" theme — used everywhere except the reading screen
     itself, which keeps the original dark palette below (scoped to
     .reading-view) because that's the easier-on-the-eyes one for long
     reading sessions. */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F5F3EE;
  --border: #E6E2D8;
  --accent: #C79A54;
  --accent-soft: rgba(199, 154, 84, 0.12);
  --text: #201E1A;
  --text-muted: #6E6A62;
  --text-faint: #A6A196;
  --danger: #C13E3E;
  --danger-bg: #FCEBEB;
  --danger-border: #F0C7C7;
  --ok: #2E7D4F;
  --shadow-sm: 0 1px 2px rgba(32, 30, 26, 0.06), 0 4px 10px rgba(32, 30, 26, 0.06);
  --shadow-md: 0 2px 4px rgba(32, 30, 26, 0.06), 0 12px 28px rgba(32, 30, 26, 0.10);
  --shadow-lg: 0 4px 10px rgba(32, 30, 26, 0.08), 0 28px 60px rgba(32, 30, 26, 0.16);
  --shadow-hover: 0 3px 8px rgba(32, 30, 26, 0.08), 0 20px 40px rgba(199, 154, 84, 0.18);
}

/* The reading screen keeps the app's original dark theme (easier on the
   eyes for long reading), regardless of the light theme everywhere else.
   Every rule below that reads var(--bg)/var(--surface)/var(--text)/etc
   resolves to these values for anything inside .reading-view. */
.app-area.reading-view {
  --bg: #111318;
  --surface: #1A1D24;
  --surface-alt: #20242C;
  --border: #2B2F38;
  --text: #EDEAE2;
  --text-muted: #8B909B;
  --text-faint: #5F636D;
  --danger: #E28787;
  --danger-bg: #2C1919;
  --danger-border: #4A2626;
  --ok: #8FBF8F;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
}

* { box-sizing: border-box; }

/* Some mobile browsers (iOS Safari especially) draw their own rounded
   "chrome" on buttons, text inputs and password fields regardless of our
   border-radius, unless native appearance is explicitly turned off. */
button, input, select, textarea {
  -webkit-appearance: none;
  appearance: none;

}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

#app { min-height: 100vh; min-height: 100dvh; width: 100%; }

a { color: inherit; }

.hidden { display: none !important; }

/* keyboard-accessible focus ring, on top of the browser default */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  max-width: 980px; margin: 0 auto;
  padding: 24px 20px 40px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.wrap-narrow {
  max-width: 920px; margin: 0 auto;
  padding: 24px 20px 40px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
@media (max-width: 560px) {
  .wrap, .wrap-narrow { padding-top: 16px; padding-bottom: 24px; }
}

.eyebrow {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 6px;
}
h1.title { font-family: Georgia, 'Iowan Old Style', serif; font-size: 26px; margin: 0; font-weight: 700; }
p.sub { color: var(--text-muted); font-size: 14px; margin-top: 6px; max-width: 520px; }

.em-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
  font-family: inherit;
}
.em-btn:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.em-btn:active { transform: translateY(0); box-shadow: none; }
.em-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.em-btn.solid { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: var(--shadow-sm); }
.em-btn.solid:hover { background: var(--text); border-color: var(--text); box-shadow: var(--shadow-md); }
.em-btn.ghost { border: none; background: transparent; box-shadow: none; }
.em-btn.ghost:hover { box-shadow: none; transform: none; }

.em-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.em-input::placeholder { color: var(--text-faint); }
/* Browsers draw their own rounded reveal/autofill badge inside password
   fields regardless of our CSS — hide it so the box stays sharp-edged. */
.em-input::-webkit-credentials-auto-fill-button,
.em-input::-webkit-contacts-auto-fill-button,
.em-input::-webkit-caps-lock-indicator { display: none !important; visibility: hidden; pointer-events: none; }
.em-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(199,154,84,0.16); }
/* 16px prevents iOS Safari from auto-zooming the page on input focus */
@media (max-width: 640px) { .em-input, .search-input { font-size: 16px; } }
.em-label {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px; display: block;
}

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

.error-box {
  margin-top: 12px; color: var(--danger); font-size: 13px;
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  border-radius: 6px; padding: 8px 12px;
}
.ok-msg { font-size: 12px; color: var(--ok); margin-bottom: 10px; }

/* ---- access lock + master-code modal ---- */
.lock-screen { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lock-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 30px 26px; text-align: center; box-shadow: var(--shadow-lg); }
.price-box {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);
  text-align: left;
}
.price-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; text-align: center; }
.price-amount {
  font-family: Georgia, 'Iowan Old Style', serif; font-size: 22px; color: var(--accent);
  text-align: center; margin-bottom: 12px;
}
.price-amount span { font-size: 12px; color: var(--text-muted); font-family: inherit; }
.sub-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.days-left { font-size: 12px; color: var(--ok); }

/* ---- iuran keanggotaan (pricing tier cards) ---- */
.tiers-section { margin-bottom: 30px; }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.tier-card {
  position: relative; background: linear-gradient(180deg, #FFFFFF, #FBFAF7); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 18px; text-align: center; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s;
}
.tier-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px) scale(1.015); }
.tier-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.tier-rec-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.tier-name { font-family: Georgia, serif; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.tier-original { font-size: 13px; color: var(--text-faint); text-decoration: line-through; margin-bottom: 2px; }
.tier-price { font-family: Georgia, serif; font-size: 24px; font-weight: 700; color: var(--accent); }
.tier-permonth { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.cs-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); text-decoration: none; margin-top: 14px;
}
.cs-link:hover { color: var(--accent); }
.cs-link-top {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; align-self: flex-start;
}
.cs-link-top:hover { color: var(--accent); border-color: var(--accent); }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-card { width: 100%; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px; box-shadow: var(--shadow-lg); }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.modal-actions .em-btn { flex: 1; justify-content: center; }

/* ---- dashboard announcement + prayer widget ---- */
.install-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.announce-banner {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 22px; white-space: pre-wrap;
}
.prayer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.prayer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 480px) { .prayer-grid { grid-template-columns: repeat(3, 1fr); } }
.prayer-item { text-align: center; position: relative; border-radius: 8px; padding: 8px 4px 6px; transition: background .2s, box-shadow .2s; }
.prayer-name { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.prayer-time { font-size: 15px; font-weight: 700; color: var(--accent); margin-top: 2px; font-family: Georgia, serif; }
.prayer-item.is-next {
  background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm);
}
.prayer-item.is-next .prayer-name { color: var(--accent); font-weight: 700; }
.prayer-next-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--bg); font-size: 9px; font-weight: 700;
  letter-spacing: 0.03em; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
@media (max-width: 480px) { .prayer-next-tag { font-size: 8px; padding: 2px 5px; } }

/* ---- settings (Master) ---- */
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.code-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.code-text { font-size: 13px; font-weight: 600; color: var(--text); font-family: Georgia, serif; }
.copy-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-muted); padding: 3px; cursor: pointer; display: inline-flex;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
textarea.em-input { resize: vertical; font-family: inherit; }

/* ---- cover ----
   Shaped like a real closed book, not a flat card: a thin "page block"
   sliver on the right edge (::after) plus an inner shadow where the
   cover wraps around it (::before), so even a static cover reads as a
   physical object instead of a flat rectangle. */
.cover-wrap {
  /* Only the right edge (the page-block side) is rounded, like a real
     book's pages wear round over time — the left/spine side stays sharp. */
  width: 100%; aspect-ratio: 2 / 3; border-radius: 2px 14px 14px 2px; overflow: visible;
  box-shadow: 0 18px 40px -14px rgba(32,30,26,0.45); line-height: 0;
  position: relative;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.cover-wrap svg, .cover-wrap img { width: 100%; height: 100%; display: block; border-radius: inherit; overflow: hidden; }
.cover-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset -3px 0 5px rgba(0,0,0,0.18);
}
.cover-wrap::after {
  content: ''; position: absolute; top: 2.5%; bottom: 2.5%; right: -5px; width: 5px;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(to bottom, #F2EEE3 0, #F2EEE3 2px, #DDD6C4 2px, #DDD6C4 3px);
  box-shadow: 2px 1px 4px rgba(32,30,26,0.3);
}
.lib-card:hover .cover-wrap {
  transform: perspective(700px) rotateY(-6deg) rotateX(1deg);
  box-shadow: 10px 22px 40px -12px rgba(32,30,26,0.55);
}

/* ---- library ---- */
.lib-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }
.lib-toolbar { display: flex; gap: 10px; margin-bottom: 18px; }
.lib-toolbar .search-box { flex: 1; margin-bottom: 0; }
@media (max-width: 480px) { .lib-toolbar { flex-direction: column; } }
.search-box {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 9px 12px; color: var(--text-muted); transition: box-shadow .15s, border-color .15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.sort-select {
  border: 1px solid var(--border); background: var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%236E6A62" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center;
  color: var(--text); border-radius: 8px; padding: 9px 26px 9px 10px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--accent); }

/* ---- best-read podium ---- */
.podium-section { margin-bottom: 32px; }
.podium-row { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.podium-item { cursor: pointer; text-align: center; width: 130px; transition: transform .15s, filter .15s; }
.podium-item:hover { transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 16px 28px rgba(199, 154, 84, 0.25)); }
.podium-item.rank-1 { width: 160px; }
.podium-badge { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.podium-item.rank-1 .podium-badge { font-size: 32px; }
.podium-title { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 8px; line-height: 1.3; }
.podium-item.rank-1 .podium-title { font-size: 13px; }
.podium-count { font-size: 11px; color: var(--accent); margin-top: 2px; }
@media (max-width: 560px) {
  .podium-row { gap: 8px; }
  .podium-item { width: 90px; }
  .podium-item.rank-1 { width: 110px; }
}
@media (max-width: 480px) {
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  h1.title { font-size: 22px; }
  .lib-header { align-items: flex-start; }
}
.lib-card {
  cursor: pointer; border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  background: linear-gradient(180deg, #FFFFFF, #FBFAF7); position: relative; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lib-card:hover {
  border-color: var(--accent); transform: translateY(-5px) scale(1.015);
  box-shadow: var(--shadow-hover);
}
.lib-card:hover .lib-del { opacity: 1; }
.lib-del {
  opacity: 0; transition: opacity .15s; position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(17,19,24,0.85); border: 1px solid var(--border); border-radius: 3px; padding: 5px; cursor: pointer;
}
.tier-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  border-radius: 3px; padding: 4px 7px;
}
.tier-badge.free { background: rgba(143,191,143,0.15); border: 1px solid var(--ok); color: var(--ok); }
.tier-badge.premium { background: rgba(199,154,84,0.15); border: 1px solid var(--accent); color: var(--accent); }
.select-check {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  background: rgba(17,19,24,0.85); display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.lib-card.selected { border-color: var(--accent); }
.lib-card.selected .select-check { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.bulk-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px;
  padding: 10px 14px; margin-bottom: 18px; font-size: 13px; color: var(--text);
}
.lib-title { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.lib-author { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lib-genre { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.lib-date { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.lib-empty {
  border: 1.5px dashed var(--border); border-radius: 6px; padding: 56px 20px;
  text-align: center; cursor: pointer; color: var(--text-muted);
}

/* ---- upload ---- */
.upload-grid { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 32px; }
@media (max-width: 640px) { .upload-grid { grid-template-columns: 1fr; } }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; gap: 12px; } }
.dropzone {
  border: 1.5px dashed var(--border); background: var(--surface); border-radius: 10px;
  padding: 26px 18px; text-align: center; cursor: pointer; transition: all .15s;
}
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.dz-name { font-size: 14px; font-weight: 600; }
.dz-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.size-row { display: flex; gap: 8px; }
.size-row .em-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.preview-caption { font-size: 12px; color: var(--text-muted); margin-top: 10px; text-align: center; }

/* ---- reading ---- */
.toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.toolbar-group { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.fontctl { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); flex-shrink: 0; }
.fontctl span { font-size: 12px; color: var(--text-muted); text-transform: capitalize; padding: 0 2px; }

/* On phones: keep every action reachable but icon-first, so the toolbar
   never wraps into rows that eat the reading area or clip a label. */
@media (max-width: 640px) {
  .em-btn { padding: 8px 10px; font-size: 12px; }
  .btn-label { display: none; }
  .toolbar-group .em-btn { gap: 0; }
}

.toc-drawer {
  position: absolute; right: 16px; top: 54px; width: 260px; max-width: calc(100vw - 40px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5); z-index: 10; padding: 12px;
}
.toc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.toc-head span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.toc-list { max-height: 220px; overflow-y: auto; }
.toc-item { padding: 6px 4px; font-size: 13px; cursor: pointer; border-radius: 3px; color: var(--text); }
.toc-item:hover { background: var(--accent-soft); }

.reader-row { display: flex; align-items: stretch; gap: 10px; }
.reader-nav { padding: 10px; flex-shrink: 0; align-self: center; }
.reader-page {
  flex: 1; min-width: 0; border-radius: 4px;
  /* fills the screen edge-to-edge for an immersive, book-like read,
     accounting for the toolbar/indicator so nothing is ever clipped */
  min-height: 60vh;
  max-height: calc(100dvh - 150px);
  box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: break-word; word-break: break-word;
}
.reader-page.is-cover { background: transparent; border: none; box-shadow: none; max-width: 340px; margin: 0 auto; padding: 0; max-height: none; }
.reader-page.is-content {
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  padding: 38px 44px; font-family: Georgia, 'Iowan Old Style', serif; line-height: 1.75; color: var(--text);
}
.reader-page.is-content h1 { font-size: 1.5em; margin: 0 0 0.6em; font-weight: 700; }
.reader-page.is-content h2 { font-size: 1.25em; margin: 1em 0 0.5em; font-weight: 700; }
.reader-page.is-content p, .reader-page.is-content div { margin: 0 0 1em; }
.reader-page.is-content ul, .reader-page.is-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.reader-page.is-content img { max-width: 100%; height: auto; }
/* Fullscreen reading mode: strip the toolbar down to just the essentials
   (exit button + page indicator) and let the page fill nearly the whole
   viewport, so the book's full text gets maximum room. Page turns are
   done by swiping (touch) or the arrow keys instead of on-screen buttons. */
.page-indicator { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.is-fullscreen .fs-hide { display: none !important; }
.is-fullscreen .wrap { max-width: 100%; padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)); }
.is-fullscreen .toolbar { margin-bottom: 6px; }
.is-fullscreen .reader-row { gap: 4px; }
.is-fullscreen .reader-page {
  max-height: calc(100dvh - 70px);
  min-height: calc(100dvh - 70px);
}
.is-fullscreen .reader-page.is-content { padding: 28px 20px; }
@media (min-width: 641px) {
  .is-fullscreen .reader-page.is-content { padding: 48px 64px; max-width: 760px; margin: 0 auto; }
}
.is-fullscreen .page-indicator { margin-top: 6px; }

/* Phones: full-bleed reading — minimal chrome, page fills the viewport
   width, generous but not wasteful padding, taller usable height. */
/* Phones: full-bleed reading — minimal chrome, page fills the viewport
   width, generous but not wasteful padding, taller usable height.
   Arrow buttons are hidden here since swipe is the primary way to
   turn pages on touch devices; keyboard arrows still work with a
   connected keyboard, and desktop keeps the on-screen buttons. */
@media (max-width: 640px) {
  .reader-row { gap: 0; }
  .reader-nav { display: none; }
  .reader-page.is-content { padding: 20px 16px; }
  .reader-page { max-height: calc(100dvh - 130px); min-height: 65vh; }
  .reader-page.is-cover { max-width: 260px; }
}

@keyframes flipNext { 0% { opacity: 0; transform: translateX(16px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes flipPrev { 0% { opacity: 0; transform: translateX(-16px); } 100% { opacity: 1; transform: translateX(0); } }
.flip-next { animation: flipNext 0.24s ease-out; }
.flip-prev { animation: flipPrev 0.24s ease-out; }

/* ---- print ---- */
.print-area { display: none; }
@media print {
  .app-area { display: none !important; }
  .print-area { display: block !important; }
  @page { margin: 0; }
  body { margin: 0; background: #111318; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-cover { width: 100%; height: 100vh; page-break-after: always; }
  .print-page {
    padding: 20mm 18mm; page-break-after: always; font-family: Georgia, 'Iowan Old Style', serif;
    font-size: 12pt; line-height: 1.6; color: #EDEAE2; background: #111318;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-page:last-child { page-break-after: auto; }
}