:root {
  color-scheme: light;
  --paper: #f1f4ee;
  --white: #fff;
  --ink: #202a23;
  --muted: #737d74;
  --line: #e1e6de;
  --green: #315b3c;
  --green-soft: #eaf1e8;
  --saffron: #a96f1e;
  --saffron-soft: #f8f1e3;
  --gold: #c7983f;
  --radius: 7px;
  font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
}

@font-face {
  font-family: 'Noto Sans Devanagari';
  src: url('/fonts/NotoSansDevanagari.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { color: inherit; }
.topbar { min-height: 132px; padding: 0 34px; display: flex; justify-content: space-between; align-items: center; background: #fffefa; border-bottom: 3px solid var(--gold); }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: 198px; height: 132px; object-fit: contain; }
.top-actions, .reader-actions { display: flex; align-items: center; gap: 10px; }
.site-footer { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 58px; padding: 8px 16px; border-top: 1px solid var(--line); background: #fffefa; }
.footer-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 13px; gap: 7px; border: 1px solid transparent; border-radius: 6px; color: #536157; background: transparent; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.footer-action:hover { border-color: var(--line); color: var(--green); background: #f7f9f6; }
.footer-action > span[aria-hidden] { color: var(--green); font-size: 16px; }
.icon-button, .share-button, .text-button, .filter-chip, .voice-button, .page-arrow { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.icon-button { width: 38px; height: 38px; font-size: 20px; color: #4d5952; }
.icon-button:hover, .share-button:hover, .text-button:hover, .voice-button:hover { border-color: #a5b3aa; background: #f7f9f6; }
.icon-button.selected { color: var(--saffron); border-color: #e9b7a3; background: var(--saffron-soft); }
.share-button { min-height: 38px; padding: 0 13px; gap: 7px; font-size: 12px; font-weight: 600; }
.manage-link { color: var(--green); font-size: 12px; font-weight: 600; text-decoration: none; }
.share-button span, .text-button span { color: var(--green); font-size: 17px; }
.app-shell { display: grid; grid-template-columns: 326px minmax(0, 1fr); min-height: calc(100vh - 190px); }
.library { position: sticky; top: 0; display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 500px; padding: 28px 20px 0; background: #f9fbf7; border-right: 1px solid var(--line); }
.library-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 19px; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.library h1 { margin: 0; color: var(--green); font-size: 22px; line-height: 1.25; font-weight: 650; }
.page-count { padding: 6px 9px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 650; white-space: nowrap; }
.search-box { display: flex; align-items: center; height: 46px; padding: 0 8px 0 11px; gap: 8px; border: 1px solid #dfe2db; border-radius: 9px; background: var(--white); color: var(--muted); transition: border-color .16s, box-shadow .16s; }
.search-box:focus-within { border-color: #78947c; box-shadow: 0 0 0 3px #315b3c17; }
.search-box > span { font-size: 21px; line-height: 1; transform: rotate(-20deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #929a94; }
.voice-language { max-width: 78px; min-height: 29px; flex: 0 0 auto; padding: 0 3px; border: 1px solid var(--line); border-radius: 4px; color: #56615a; background: #fafbf8; font-size: 10px; }
.voice-button { width: 29px; height: 29px; flex: 0 0 auto; color: var(--green); font-size: 16px; }
.voice-button.listening { color: white; border-color: var(--saffron); background: var(--saffron); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 4px #b74e2b2b; } }
.search-hint { min-height: 14px; margin: 7px 2px 14px; color: var(--muted); font-size: 10px; }
.filter-row { display: flex; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.filter-chip { min-height: 30px; padding: 0 11px; border-radius: 999px; color: #656f68; background: #fff; font-size: 10px; }
.filter-chip.active { color: #fff; border-color: var(--green); background: var(--green); font-weight: 650; }
.contents-list { flex: 1; overflow: auto; padding: 9px 1px 14px; scrollbar-width: thin; scrollbar-color: #d5d9d2 transparent; }
.group-label { margin: 14px 8px 6px; color: #89918b; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.page-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 15px; width: 100%; align-items: center; gap: 7px; min-height: 44px; padding: 5px 8px; text-align: left; border: 0; border-radius: 7px; background: transparent; cursor: pointer; transition: background .16s, box-shadow .16s; }
.page-row:hover { background: #eef3ec; }
.page-row.current { color: var(--green); background: #e8f0e6; box-shadow: inset 3px 0 var(--gold); }
.page-number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e6e8e2; border-radius: 4px; color: #737d76; background: white; font-size: 10px; font-variant-numeric: tabular-nums; }
.page-row.current .page-number { color: var(--green); border-color: #c4d4c8; }
.page-row-copy { min-width: 0; }
.page-row-copy strong, .page-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-row-copy strong { font-size: 12px; font-weight: 600; }
.page-row-copy small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.row-bookmark { color: var(--saffron); font-size: 13px; }
.empty-state { padding: 28px 10px; color: var(--muted); text-align: center; font-size: 12px; }
.library-foot { display: flex; align-items: center; gap: 7px; min-height: 46px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #719378; }
.reading-area { min-width: 0; padding: 25px clamp(20px, 4vw, 54px) 20px; }
.reader-heading { display: flex; align-items: center; justify-content: space-between; min-height: 76px; margin: 0 0 15px; padding: 8px 0; }
.reader-title-wrap .eyebrow { margin-bottom: 4px; color: #91601e; }
.reader-heading h2 { margin: 0; color: #253d2c; font-family: 'Noto Sans Devanagari', system-ui, sans-serif; font-size: 22px; line-height: 1.55; font-weight: 650; }
.reader-actions { gap: 7px; }
.reader-actions .icon-button { width: 34px; height: 34px; font-size: 18px; }
.reader-actions .icon-button:not(.selected) { border-color: transparent; background: transparent; }
.reader-actions .icon-button:not(.selected):hover { background: #e8eee5; }
.reader-controls-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 0 0 10px; gap: 10px; }
.live-follow-status { overflow: hidden; margin: -3px 2px 8px; color: var(--muted); font: 10px/1.5 system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.live-follow-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; gap: 7px; border: 1px solid #dfe5dc; border-radius: 8px; color: var(--green); background: #fffefa; font: 600 11px/1 system-ui, sans-serif; cursor: pointer; transition: background .16s, border-color .16s; }
.live-follow-button > span:first-child { font-size: 17px; }
.live-follow-button:hover { border-color: #a5b3aa; background: #f7f9f6; }
.live-follow-button.listening { border-color: var(--saffron); color: #fff; background: var(--saffron); }
.live-follow-button:disabled { opacity: .45; cursor: not-allowed; }
.view-switch { display: flex; width: max-content; gap: 3px; margin: 0; padding: 3px; border: 1px solid #dfe5dc; border-radius: 8px; background: #e8ede6; }
.reader-search { display: none; }
.audio-panel { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid #dfe5dc; border-radius: 8px; background: #fffefa; }
.audio-panel .eyebrow { margin: 0 0 2px; color: #91601e; font-size: 9px; }
.audio-panel-title > span { color: var(--ink); font-size: 12px; font-weight: 600; }
.audio-panel audio { width: min(100%, 420px); height: 38px; }
.deity-artwork-wrap { margin: 0 0 10px; }
.deity-artwork { display: flex; align-items: center; gap: 14px; min-height: 82px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.deity-artwork img { display: block; width: 72px; height: 66px; flex: 0 0 72px; object-fit: contain; object-position: center; background: #fffefa; }
.deity-artwork figcaption { display: grid; gap: 4px; min-width: 0; color: #526057; font-family: 'Noto Sans Devanagari', system-ui, sans-serif; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.deity-artwork-name { color: var(--muted); font-family: system-ui, sans-serif; font-size: 10px; }
.view-tab { min-width: 72px; min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; color: #647267; background: transparent; cursor: pointer; font-size: 11px; font-weight: 600; }
.view-tab.active { color: #fff; background: var(--green); box-shadow: 0 2px 5px #26352a20; }
.view-tab:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }
.page-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; height: calc(100vh - 384px); max-height: 940px; overflow: auto; border: 1px solid #e1e7de; border-radius: 12px; background: #e7ece4; box-shadow: inset 0 1px 0 #fff9; }
#pageStage:fullscreen { width: 100vw; height: 100vh; max-height: none; border: 0; border-radius: 0; }
.scan-wrap { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; padding: 20px 60px; overflow: auto; }
.scan-wrap img { display: block; width: auto; height: 100%; max-width: min(100%, 760px); object-fit: contain; object-position: top center; box-shadow: 0 9px 28px #26352a24; background: #fff; transition: width .2s, height .2s; }
.page-text-view { width: min(100%, 820px); height: 100%; overflow: auto; padding: clamp(20px, 4vw, 48px); border-radius: 8px; color: #242d27; background: #fffefa; box-shadow: 0 6px 24px #26352a12; font-family: 'Noto Sans Devanagari', Georgia, serif; font-size: 18px; line-height: 2; }
.page-text-view p { margin: 0 0 1.4em; white-space: normal; }
.page-text-view p:last-child { margin-bottom: 0; }
.lyric-passage { display: block; width: 100%; margin: 0 0 1em; padding: 8px 10px; text-align: left; border: 0; border-bottom: 1px solid #e9ebe4; border-radius: 6px; color: inherit; background: transparent; font: inherit; cursor: pointer; transition: background .16s; }
.lyric-passage:hover, .lyric-passage:focus-visible { background: #f3f6ef; }
.lyric-line { display: block; padding: 1px 7px; border-left: 3px solid transparent; border-radius: 3px; transition: color .15s, background .15s; }
.lyric-line.active-line { border-left-color: var(--gold); color: #24422d; background: #e9f2e3; font-weight: 650; }
.meaning-prompt { display: block; width: 25px; height: 25px; margin: 5px 0 0 10px; color: var(--green); font: 19px/25px system-ui, sans-serif; text-align: center; }
.page-text-view .transcription-note { margin: 0 0 18px; padding: 8px 10px; border-left: 3px solid var(--saffron); color: #785542; background: var(--saffron-soft); font-family: sans-serif; font-size: 11px; line-height: 1.5; }
.page-text-view .text-unavailable { color: var(--muted); font-family: sans-serif; font-size: 14px; }
.scan-wrap.zoomed { align-items: flex-start; }
.scan-wrap.zoomed img { height: auto; max-width: none; }
.page-arrow { position: absolute; z-index: 1; top: 50%; width: 34px; height: 48px; border-color: #d8dbd4; color: #526057; background: #ffffffed; font-family: sans-serif; font-size: 27px; transform: translateY(-50%); }
.page-arrow:hover { color: var(--green); border-color: #a6b8aa; }
.page-arrow:disabled { opacity: .38; cursor: default; }
.page-arrow.previous { left: 13px; }
.page-arrow.next { right: 13px; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin-top: 11px; padding: 0 10px; border: 1px solid #e3e8e0; border-radius: 9px; background: var(--white); box-shadow: 0 4px 16px #26352a0d; }
.page-control, .zoom-control { display: flex; align-items: center; gap: 8px; color: #69736c; font-size: 11px; }
.compact { width: 29px; height: 29px; font-size: 18px; }
.page-control input { width: 42px; height: 29px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; text-align: center; color: var(--ink); background: white; font-size: 11px; }
.page-total { margin-left: -5px; color: #929a94; }
.zoom-control { gap: 6px; }
.zoom-control span { min-width: 27px; text-align: center; font-size: 10px; }
.text-button { min-height: 32px; padding: 0 9px; gap: 6px; font-size: 10px; font-weight: 600; }
.text-button span { font-size: 15px; }
.reader-note { margin: 9px 2px; color: var(--muted); font-size: 10px; text-align: center; }
.qr-dialog { width: min(390px, calc(100vw - 28px)); padding: 20px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 70px #17221d33; }
.qr-dialog::backdrop { background: #18221e78; }
.privacy-dialog { max-height:calc(100dvh - 30px); overflow:auto; }
.privacy-dialog > p { margin:16px 2px; color:#536057; font-size:12px; line-height:1.65; }
.privacy-choice { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; }
.privacy-choice input { width:17px; height:17px; margin:2px 0 0; accent-color:var(--green); }
.privacy-choice strong,.privacy-choice small { display:block; }
.privacy-choice strong { font-size:12px; }
.privacy-choice small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.5; }
.privacy-save { width:100%; margin-top:14px; }
.analytics-consent { position:fixed; z-index:9; right:14px; bottom:14px; left:14px; display:flex; width:min(620px,calc(100% - 28px)); align-items:center; justify-content:space-between; gap:18px; margin:0 auto; padding:15px 17px; border:1px solid #dfe5dc; border-radius:7px; background:#fffefa; box-shadow:0 12px 38px #17231d24; }
.analytics-consent[hidden] { display:none; }
.analytics-consent strong { display:block; color:var(--ink); font-size:12px; }
.analytics-consent p { margin:5px 0 0; color:#5e6961; font-size:10px; line-height:1.5; }
.analytics-consent-actions { display:grid; flex:0 0 auto; gap:5px; }
.analytics-consent-actions button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; font-size:10px; font-weight:600; white-space:nowrap; }
.analytics-consent-actions .consent-allow { color:white; border-color:var(--green); background:var(--green); }
.analytics-consent-actions .consent-decline { color:#56615a; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; }
.dialog-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.qr-body { display: grid; place-items: center; min-height: 230px; padding: 10px; }
.qr-body img { width: 190px; height: 190px; image-rendering: pixelated; }
.qr-body p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.meaning-dialog blockquote { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; color: #354039; background: #f3f6ef; font-family: 'Noto Sans Devanagari', sans-serif; font-size: 15px; line-height: 1.9; white-space: pre-line; }
.meaning-copy { margin: 14px 2px 3px; color: var(--ink); font-family: 'Noto Sans Devanagari', system-ui, sans-serif; font-size: 15px; line-height: 1.9; white-space: pre-line; }
.share-url-row { display: flex; gap: 7px; }
.share-url-row input { min-width: 0; flex: 1; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; color: #56615a; background: #fafbf8; font-size: 10px; }
.toast { position: fixed; z-index: 4; left: 50%; bottom: 22px; padding: 10px 15px; border-radius: 5px; color: #fff; background: #263b31; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.mobile-browse, .close-contents, .drawer-backdrop { display: none; }
.connection-status { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; color: #66736b; font-size: 10px; }
.connection-status i { width: 7px; height: 7px; border-radius: 50%; background: #6e9976; }
.connection-status.offline i { background: #b74e2b; }
.connection-status.offline { color: #a4472a; }
.install-button[hidden] { display: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #c7983f88; outline-offset: 2px; }

@media (max-width: 760px) {
  body.drawer-open { overflow: hidden; }
  .topbar { position: static; min-height: 82px; padding: 0 12px; }
  .brand-logo { width: 116px; height: 78px; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 126px); gap: 5px; }
  .manage-link { width: 34px; height: 38px; display: grid; place-items: center; font-size: 10px; }
  .top-actions .icon-button { width: 40px; height: 40px; }
  .top-actions .share-button { min-height: 40px; padding: 0 10px; font-size: 0; }
  .top-actions .share-button span { font-size: 18px; }
  .connection-status { gap: 4px; padding: 0 2px; font-size: 9px; white-space: nowrap; }
  .connection-status i { width: 8px; height: 8px; }
  .site-footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 58px; gap: 2px; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); }
  .footer-action { min-width: 0; min-height: 44px; padding: 4px; gap: 5px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .footer-action > span[aria-hidden] { flex-shrink: 0; font-size: 15px; }
  .app-shell { display: block; min-height: calc(100dvh - 140px); }
  .library { position: fixed; z-index: 8; inset: 0 auto 0 0; display: flex; width: min(88vw, 350px); height: 100dvh; min-height: 0; padding: 24px 15px max(12px, env(safe-area-inset-bottom)); border: 0; border-right: 1px solid var(--line); transform: translateX(-105%); transition: transform .22s ease; }
  .library.mobile-open { transform: translateX(0); }
  .library-heading { align-items: center; margin: 0 0 18px 2px; }
  .library h1 { font-size: 18px; }
  .close-contents { display: inline-flex; width: 42px; height: 42px; margin-left: 6px; }
  .search-box { min-height: 48px; }
  .search-box input { font-size: 14px; }
  .voice-language { max-width: 67px; min-height: 36px; font-size: 10px; }
  .voice-button { width: 38px; height: 38px; }
  .search-hint { margin: 7px 2px 13px; }
  .filter-row { flex-wrap: wrap; overflow: visible; }
  .filter-chip { min-height: 36px; padding: 0 12px; }
  .contents-list { display: block; max-height: none; flex: 1; overflow: auto; padding: 8px 1px 12px; }
  .group-label { display: block; margin-top: 15px; }
  .page-row { display: grid; flex: initial; grid-template-columns: 34px minmax(0, 1fr) 15px; min-height: 48px; padding: 6px 8px; border: 0; background: transparent; }
  .page-number { width: 32px; height: 32px; font-size: 11px; }
  .page-row-copy strong { font-size: 12px; }
  .page-row-copy small { font-size: 10px; }
  .library-foot { display: flex; min-height: 42px; }
  .drawer-backdrop.visible { position: fixed; z-index: 7; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: #17231d80; }
  .reading-area { display: flex; flex-direction: column; min-height: calc(100dvh - 140px); padding: 10px 10px 8px; }
  .reader-heading { min-height: 58px; margin: 0 2px 10px; padding: 8px 0; gap: 9px; }
  .view-switch { margin: 0 0 7px 2px; }
  .reader-controls-row { justify-content: stretch; margin: 0 2px 8px; gap: 7px; }
  .reader-controls-row .view-switch { flex: 0 0 auto; margin: 0; }
  .reader-controls-row .view-tab { min-width: 48px; padding: 0 9px; }
  .live-follow-button { width: 66px; min-width: 66px; min-height: 40px; flex: 0 0 66px; padding: 0 7px; font-size: 10px; }
  .live-follow-button .live-follow-label { display: inline; }
  .live-follow-button > span:first-child { display: none; }
  .reader-search { display: flex; align-items: center; min-width: 0; min-height: 40px; flex: 1; gap: 5px; padding: 0 4px 0 8px; border: 1px solid #dfe5dc; border-radius: 8px; color: var(--muted); background: #fffefa; }
  .reader-search > span { font-size: 21px; line-height: 1; }
  .reader-search input { width: 100%; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
  .reader-search-button { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 6px; color: var(--green); background: var(--green-soft); font-size: 20px; cursor: pointer; }
  .audio-panel { align-items: stretch; flex-direction: column; gap: 7px; margin: 0 0 8px; padding: 9px 11px; }
  .audio-panel audio { width: 100%; max-width: none; }
  .deity-artwork-wrap { flex: 0 0 auto; margin: 0 2px 8px; }
  .deity-artwork { min-height: 62px; gap: 10px; padding: 5px 0; }
  .deity-artwork img { width: 54px; height: 52px; flex-basis: 54px; }
  .deity-artwork figcaption { font-size: 11px; line-height: 1.4; }
  .deity-artwork-name { font-size: 9px; }
  .mobile-browse { display: inline-flex; flex: 0 0 42px; width: 42px; height: 42px; font-size: 20px; }
  .reader-title-wrap { flex: 1; min-width: 0; }
  .reader-title-wrap .eyebrow { margin-bottom: 2px; font-size: 9px; }
  .reader-heading h2 { overflow: hidden; font-size: 16px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
  .reader-actions { gap: 4px; }
  .reader-actions .icon-button { width: 42px; height: 42px; font-size: 19px; }
  .page-stage { flex: 1; min-height: 310px; height: calc(100dvh - 328px); max-height: none; border-radius: 10px; }
  .scan-wrap { padding: 8px 3px; }
  .scan-wrap img { max-width: 100%; }
  .page-text-view { width: 100%; min-height: 100%; height: auto; padding: 22px 19px; font-size: 17px; line-height: 1.9; }
  .page-arrow { display: none; }
  .reader-toolbar { position: sticky; bottom: 0; z-index: 3; min-height: 60px; margin-top: 7px; padding: 6px 5px; gap: 4px; border-radius: 8px; box-shadow: 0 -4px 18px #17231d0d; }
  .page-control { gap: 3px; }
  .page-control > label { display: none; }
  .page-control .icon-button { width: 40px; height: 42px; font-size: 23px; }
  .page-control input { width: 43px; height: 40px; padding: 0 2px; font-size: 13px; }
  .page-total { display: inline; margin-left: 0; font-size: 10px; white-space: nowrap; }
  .zoom-control { gap: 2px; }
  .zoom-control .icon-button { width: 36px; height: 40px; }
  .zoom-control span { min-width: 22px; font-size: 9px; }
  .text-button { min-width: 40px; min-height: 40px; padding: 0 7px; font-size: 0; }
  .text-button span { font-size: 18px; }
  #qrButton > [data-i18n] { display: none; }
  .reader-note { display: none; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .qr-dialog { max-height: calc(100dvh - 30px); overflow: auto; padding: 17px; }
  .meaning-dialog { max-height: calc(100dvh - 30px); overflow: auto; }
  .analytics-consent { right:8px; bottom:8px; left:8px; width:calc(100% - 16px); align-items:flex-start; gap:10px; padding:12px; }
  .analytics-consent-actions { gap:4px; }
  .analytics-consent-actions button { min-height:36px; padding:0 7px; font-size:9px; }
  .analytics-consent p { font-size:9px; }
}

@media (max-width: 360px) {
  .brand-logo { width: 100px; height: 68px; }
  .connection-status span { display: none; }
  .reader-toolbar { gap: 2px; }
  .page-control .icon-button { width: 34px; }
  .page-control input { width: 36px; }
  .zoom-control .icon-button { width: 33px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }