.reader-zoom-shortcut { flex: none; }
.reader-zoom { position: fixed; inset: 0; z-index: 110; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--text); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
.reader-zoom[hidden], .reader-zoom [hidden] { display: none !important; }
.reader-zoom-head, .reader-zoom-tools { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.reader-zoom-head h2 { flex: 1; margin: 0; font-size: 17px; line-height: 1.3; }
.reader-zoom-head select { width: auto; max-width: 130px; min-width: 0; height: 44px; padding: 0 10px; }
.reader-zoom .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.reader-zoom-head .icon-btn { font-size: 28px; }
.reader-zoom-tools { justify-content: center; }
.reader-zoom-tools .icon-btn { flex: none; font-size: 24px; }
.reader-zoom-tools input { flex: 1; width: 60px; min-width: 35px; max-width: 260px; accent-color: var(--accent); }
.reader-zoom-tools output { flex: none; min-width: 42px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.reader-zoom-tools .btn { flex: none; min-height: 44px; padding: 6px 10px; white-space: nowrap; }
.reader-zoom-tools button:disabled { opacity: .4; cursor: default; }
.reader-zoom-viewport { position: relative; overflow: auto; scrollbar-gutter: stable; min-width: 0; min-height: 0; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; cursor: grab; background: #101013; }
.reader-zoom-viewport.is-zoomed { touch-action: pinch-zoom; }
.reader-zoom-viewport.is-dragging { cursor: grabbing; }
.reader-zoom-canvas { position: relative; min-width: 100%; min-height: 100%; }
.reader-zoom-canvas img { position: absolute; display: block; max-width: none; max-height: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.reader-zoom-message { position: absolute; top: 50%; left: 50%; width: min(400px, calc(100% - 40px)); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.reader-zoom-message p { margin: 0 0 14px; padding: 12px; border-radius: 10px; background: var(--card); color: var(--text); }
.reader-zoom-message button { pointer-events: auto; }
.reader-zoom-hint { margin: 0; padding: 6px 12px; text-align: center; font-size: 11px; color: var(--muted); }
.reader-zoom :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 380px) {
  .reader-zoom-head, .reader-zoom-tools { gap: 4px; padding-inline: 6px; }
  .reader-zoom-tools .btn { padding-inline: 8px; font-size: 12px; }
  .reader-zoom-tools output { min-width: 36px; font-size: 12px; }
}
@media (max-height: 450px) {
  .reader-zoom-head, .reader-zoom-tools { padding-block: 2px; }
  .reader-zoom-hint { display: none; }
}