@media (max-width: 980px) {
  :root { --topbar-h: 66px; }
  .topbar { grid-template-columns: 150px 1fr auto; padding: 0 12px; gap: 10px; }
  .brand img { width: 132px; }
  .catalog-title strong { font-size: 13px; }
  .toolbar { gap: 2px; }
  .icon-button { width: 36px; height: 36px; }
  .viewer { grid-template-columns: 54px minmax(0,1fr) 54px; }
  .edge-button { width: 40px; height: 66px; border-radius: 15px; }
}

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --topbar-h: 60px; --bottombar-h: 54px; }
  .app-shell { grid-template-rows: var(--topbar-h) minmax(0,1fr) var(--bottombar-h); }
  .topbar { grid-template-columns: 126px 1fr auto; padding: 0 8px 0 10px; }
  .brand { height: 52px; overflow: visible; }
  .brand img { width: 116px; }
  .catalog-title { display: none; }
  .toolbar .icon-button:nth-of-type(2), .toolbar .icon-button:nth-of-type(3) { display: none; }
  .toolbar { justify-self: end; }
  .toolbar .icon-button, .toolbar a.icon-button { width: 34px; height: 34px; }
  .viewer { grid-template-columns: 40px minmax(0,1fr) 40px; }
  .book-zone { padding: 10px 0; }
  .book-stage {
    width: min(86vw, calc((100vh - var(--topbar-h) - var(--bottombar-h) - 28px) * var(--page-ratio)));
    max-width: none;
    aspect-ratio: var(--page-ratio) / 1;
    perspective: 1900px;
  }
  .book-landscape { display: none; }
  .book-portrait { display: block; }
  .book-shadow { left: 8%; right: 8%; bottom: -4%; height: 6%; }
  .edge-button { width: 34px; height: 58px; border-radius: 13px; background: transparent; border-color: transparent; }
  .edge-button svg { width: 21px; }
  .bottom-bar { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 0 10px; }
  .bottom-bar > .text-button { display: none; }
  .page-control { justify-self: start; }
  .spread-indicator { grid-column: 3; justify-self: end; }
  .thumbs-panel { width: min(360px, 92vw); }
  .thumbs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zoom-toolbar { padding: 0 8px 0 12px; }
  .zoom-canvas { padding: 14px; }
  .zoom-canvas img { width: 92vw; }
}

@media (max-width: 430px) {
  .topbar { grid-template-columns: 112px 1fr; }
  .brand img { width: 108px; }
  .toolbar { overflow: hidden; }
  .toolbar #shareButton { display: none; }
  .viewer { grid-template-columns: 30px minmax(0,1fr) 30px; }
  .edge-button { width: 28px; padding: 0; }
  .book-stage { width: min(89vw, calc((100vh - var(--topbar-h) - var(--bottombar-h) - 24px) * var(--page-ratio))); }
  .bottom-bar { padding: 0 7px; }
  .page-control { transform: scale(.94); transform-origin: left center; }
  .spread-indicator { font-size: 11px; min-width: 70px; }
  .cookie-notice { right: 10px; bottom: calc(var(--bottombar-h) + 10px); width: calc(100vw - 20px); }
  .cookie-notice-actions { flex-wrap: wrap; }
}


@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .zoom-toolbar { padding: 0 7px; gap: 6px; }
  .zoom-page-picker { gap: 3px; }
  .zoom-page-input { width: 44px; height: 34px; }
  .zoom-page-label { display: none; }
  .zoom-actions { gap: 3px; }
  .zoom-actions .zoom-control { min-width: 34px; }
}

@media (max-width: 430px) {
  .zoom-toolbar { grid-template-columns: 1fr auto; }
  .zoom-page-total { display: none; }
  .zoom-actions #zoomReset { display: none; }
}


@media (max-width: 760px), (max-aspect-ratio: 4/5) {
}