:root {
  --navy: #071a3d;
  --toolbar-h: 68px;
  --topbar-h: 56px;
  --book-page-ratio: calc(1055 / 1491);
  --book-h: min(82vh, 860px);
  --book-w: calc(var(--book-h) * var(--book-page-ratio) * 2);
  --zoom: 1;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 15%, rgba(30,96,180,.18), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(231,30,50,.08), transparent 28%),
    linear-gradient(145deg, #06162f 0%, #0a2550 50%, #071a3d 100%);
  color: white;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
button, img, input { -webkit-tap-highlight-color: transparent; }
.catalog-app {
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--toolbar-h);
  position: relative;
  isolation: isolate;
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:rgba(9,27,58,.42); border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(10px); z-index:20;
}
.brand-lockup { display:flex; align-items:center; gap:12px; }
.brand-lockup strong {
  font-size:24px; line-height:1; letter-spacing:-.8px; border:2px solid rgba(255,255,255,.65); border-radius:7px; padding:4px 8px 5px;
}
.brand-lockup strong span { color:#ff3347; }
.brand-lockup small { color:#d7e3f3; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }
.top-actions, .toolbar-group { display:flex; align-items:center; gap:8px; }
.icon-btn, .tool-btn, .nav-arrow, .close-thumbs {
  border:0; color:#fff; background:rgba(255,255,255,.08); cursor:pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.icon-btn:hover, .tool-btn:hover, .nav-arrow:hover, .close-thumbs:hover { background:rgba(255,255,255,.16); }
.icon-btn:active, .tool-btn:active, .nav-arrow:active { transform:scale(.95); }
.icon-btn:disabled, .tool-btn:disabled, .nav-arrow:disabled { opacity:.28; cursor:default; }
.icon-btn { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
.icon-btn svg, .tool-btn svg, .nav-arrow svg { width:21px; height:21px; fill:currentColor; }
.viewer-shell { position:relative; min-height:0; overflow:hidden; }
.catalog-viewport {
  position:absolute; inset:0; overflow:auto; display:grid; place-items:center; overscroll-behavior:contain;
}
.zoom-layer {
  transform:scale(var(--zoom)); transform-origin:center center; transition:transform .22s ease; padding:18px 40px 10px;
}
.book-stage {
  width:min(var(--book-w), 94vw); height:min(var(--book-h), calc((94vw / 2) / var(--book-page-ratio)));
  perspective:2800px; position:relative; filter:drop-shadow(0 24px 34px rgba(0,0,0,.30)); touch-action:none; user-select:none;
}
.book {
  width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.22,.72,.22,1);
}
.book.position-start { transform:translateX(-25%); }
.book.position-middle { transform:translateX(0); }
.book.position-end { transform:translateX(25%); }
.sheet {
  position:absolute; left:50%; top:0; width:50%; height:100%; transform-origin:left center; transform-style:preserve-3d;
  transform:rotateY(0deg); transition:transform .76s cubic-bezier(.2,.74,.24,1); will-change:transform;
}
.sheet.dragging { transition:none !important; }
.sheet.flipped { transform:rotateY(-180deg); }
.page {
  position:absolute; inset:0; overflow:hidden; background:transparent; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.page.back { transform:rotateY(180deg); }
.page img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; user-select:none; }
.mobile-viewer { display:none; }
.nav-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:16; width:54px; height:72px; border-radius:18px;
  display:grid; place-items:center; background:rgba(255,255,255,.10); backdrop-filter:blur(12px);
}
.nav-prev { left:16px; }
.nav-next { right:16px; }
.toolbar {
  display:grid; grid-template-columns:auto minmax(240px, 1fr) auto; align-items:center; gap:14px; padding:0 16px;
  background:rgba(8,24,52,.42); border-top:1px solid rgba(255,255,255,.07); backdrop-filter:blur(14px);
}
.tool-btn { min-width:38px; height:38px; border-radius:999px; padding:0 11px; display:grid; place-items:center; font-size:22px; line-height:1; }
.page-status { min-width:56px; text-align:center; font-size:13px; color:#dce8f8; font-weight:700; }
.zoom-label { min-width:44px; text-align:center; color:#dce8f8; font-size:12px; font-weight:700; }
.page-range { flex:1 1 auto; width:min(100%, 920px); accent-color:#fff; background:transparent; }
.page-range::-webkit-slider-runnable-track { height:4px; background:rgba(255,255,255,.28); border-radius:999px; }
.page-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; margin-top:-5px; border:0; }
.page-range::-moz-range-track { height:4px; background:rgba(255,255,255,.28); border-radius:999px; }
.page-range::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.tool-btn .sound-on { display:none; }
.tool-btn.sound-enabled .sound-on { display:block; }
.tool-btn.sound-enabled .sound-off { display:none; }
.tool-btn.sound-disabled .sound-off { display:block; }
.thumb-panel {
  position:absolute; z-index:50; left:14px; top:14px; bottom:14px; width:250px; background:rgba(4,16,38,.94);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; backdrop-filter:blur(18px); box-shadow:0 24px 50px rgba(0,0,0,.35);
  transform:translateX(calc(-100% - 28px)); transition:transform .3s ease; overflow:hidden;
}
.thumb-panel.open { transform:translateX(0); }
.thumb-panel-head { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.close-thumbs { width:32px; height:32px; border-radius:9px; font-size:22px; }
.thumb-list { height:calc(100% - 56px); overflow:auto; padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.thumb { border:2px solid transparent; background:transparent; padding:0; border-radius:8px; overflow:hidden; cursor:pointer; position:relative; aspect-ratio:1055 / 1491; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb span { position:absolute; right:5px; bottom:5px; background:rgba(4,16,38,.82); color:#fff; border-radius:6px; min-width:24px; height:24px; display:grid; place-items:center; font-size:11px; font-weight:800; }
.thumb.active { border-color:#5aa2ff; }

@media (max-width: 980px) {
  .toolbar { grid-template-columns:1fr; gap:10px; padding:10px 14px; }
  .toolbar-left, .toolbar-center, .toolbar-right { justify-content:center; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 52px; --toolbar-h: auto; }
  .topbar { padding:0 10px; }
  .brand-lockup { gap:8px; }
  .brand-lockup strong { font-size:18px; border-width:1.5px; padding:4px 6px; }
  .brand-lockup small { display:none; }
  .icon-btn { width:36px; height:36px; }
  .book-stage { display:none; }
  .zoom-layer { width:100%; height:100%; padding:0; display:grid; place-items:center; }
  .mobile-viewer {
    width:100%; height:100%; display:grid; place-items:center; padding:8px 0;
  }
  .mobile-page-frame {
    position:relative; overflow:hidden; background:transparent; width:min(100vw, calc((100dvh - 160px) * var(--book-page-ratio)));
    max-width:100vw; max-height:calc(100dvh - 160px); aspect-ratio:1055 / 1491; box-shadow:0 16px 28px rgba(0,0,0,.30);
  }
  .mobile-page-layer {
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#fff; user-select:none; pointer-events:none;
  }
  .mobile-page-layer.incoming { visibility:hidden; }
  .nav-arrow { width:42px; height:58px; border-radius:13px; }
  .nav-prev { left:7px; }
  .nav-next { right:7px; }
  .toolbar { padding:8px 8px 10px; gap:8px; }
  .tool-btn { min-width:34px; height:34px; padding:0 8px; }
  .toolbar-center { width:100%; }
  .page-status { min-width:46px; font-size:11px; }
  .zoom-label { font-size:11px; }
  .page-range { width:100%; }
  .thumb-panel { left:8px; top:8px; bottom:8px; width:min(84vw, 330px); }
}

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