:root {
  color-scheme: dark;
  --reader-background: #252525;
  --reader-text: #f3f3f1;
  --reader-muted: #a6a6a3;
  --reader-line: #ffffff12;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--reader-background); scroll-padding-top: 88px; }
body { margin: 0; background: var(--reader-background); color: var(--reader-text); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #a5c3b0; outline-offset: 4px; }
.reader-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 16px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  background: #252525f5;
  border-bottom: 1px solid var(--reader-line);
}
.reader-header h1 { margin: 0; flex: 1; min-width: 0; font-size: 19px; font-weight: 500; line-height: 1.4; }
.reader-back, .reader-book-menu { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; color: var(--reader-text); background: transparent; border: 0; padding: 5px; }
.reader-header svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reader-book-menu svg { fill: currentColor; stroke-width: 1; }
.reader-content { max-width: 860px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); }
.reader-verse { border-bottom: 1px solid var(--reader-line); padding: 26px 28px 30px; scroll-margin-top: 90px; }
.reader-verse-menu { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: 20px; background: #ffffff0d; color: #dededb; font-size: 12px; line-height: 1.2; }
.reader-verse-menu svg { width: 12px; height: 12px; fill: none; stroke: #b0b0ac; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reader-original { font-size: 18px; font-weight: 400; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; margin: 34px 0 20px; }
.reader-original[dir=rtl] { font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif; font-size: 30px; font-weight: 400; line-height: 2.1; text-align: right; }
.reader-transliteration { color: var(--reader-muted); font-size: 16px; font-weight: 400; line-height: 1.75; text-align: right; white-space: pre-wrap; margin: 18px 0 12px; }
.reader-translation { color: var(--reader-text); font-size: 16px; font-weight: 400; line-height: 1.7; text-align: right; white-space: pre-wrap; margin: 12px 0 0; }
.reader-reference { font-size: 12px; color: var(--reader-muted); }
dialog { color: var(--reader-text); background: #303030; border: 1px solid #ffffff16; border-radius: 20px; padding: 22px; width: min(420px, calc(100% - 32px)); max-height: 75vh; overflow: auto; }
dialog::backdrop { background: #0009; }
.reader-dialog-header { display: flex; align-items: center; gap: 18px; }
.reader-dialog-header h2 { font-size: 17px; font-weight: 500; flex: 1; margin: 0; }
.reader-dialog-header button { border: 0; background: transparent; color: var(--reader-muted); font-size: 27px; width: 40px; height: 40px; }
#reader-options-context { color: var(--reader-muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; margin: 18px 0 0; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 600px) {
  .reader-header { gap: 14px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); min-height: 68px; }
  .reader-header h1 { font-size: 18px; }
  .reader-verse { padding: 25px 20px 28px; }
  .reader-original { font-size: 17px; line-height: 1.9; }
  .reader-original[dir=rtl] { font-size: 28px; line-height: 2.15; }
  .reader-transliteration, .reader-translation { font-size: 15px; }
}