:root {
  --bg: #17191c;
  --panel: #202327;
  --panel-2: #292d32;
  --text: #f6f7f8;
  --muted: #aeb4bc;
  --accent: #df1118;
  --page-ratio: 0.7075788062;
  --zoom: 1;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--text); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.viewer { height: 100%; display: grid; grid-template-rows: 56px minmax(0,1fr) 48px; background:
  radial-gradient(circle at 50% 25%, #30343a 0, #202328 36%, #17191c 72%); position: relative; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; background: rgba(20,22,25,.96); border-bottom: 1px solid rgba(255,255,255,.08); z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; letter-spacing: -1px; background: #fff; color: #111; border-bottom: 4px solid var(--accent); }
.brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #d8dce0; }
.brand-text b { color: #fff; margin-left: 4px; }
.toolbar-actions { display: flex; align-items: center; gap: 4px; }
.tool-btn { width: 38px; height: 38px; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: #f3f4f5; cursor: pointer; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.tool-btn:hover { background: rgba(255,255,255,.10); }
.tool-btn:active { transform: scale(.95); }
.tool-btn svg { width: 21px; height: 21px; fill: currentColor; }

.catalog-viewport { position: relative; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 18px 66px; overscroll-behavior: contain; }
.book-shell { width: min(91vw, calc((100vh - 142px) * 1.4152)); aspect-ratio: 1.4152 / 1; display: grid; place-items: center; transform: scale(var(--zoom)); transform-origin: center center; transition: transform .18s ease; }
.book { width: 100%; height: 100%; position: relative; display: grid; grid-template-columns: 1fr 1fr; perspective: 2400px; filter: drop-shadow(0 18px 34px rgba(0,0,0,.38)); }
.page-slot { position: relative; min-width: 0; min-height: 0; background: rgba(255,255,255,.025); overflow: hidden; }
.left-slot { border-radius: 8px 0 0 8px; }
.right-slot { border-radius: 0 8px 8px 0; }
.page-slot.empty { background: linear-gradient(90deg, rgba(255,255,255,.015), rgba(255,255,255,.035)); }
.page-image { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; }
.left-slot .page-image { border-radius: 8px 0 0 8px; }
.right-slot .page-image { border-radius: 0 8px 8px 0; }
.book-gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 24px; transform: translateX(-50%); z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.04) 43%, rgba(0,0,0,.19)); filter: blur(3px); opacity: .7; }

.flip-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; perspective: 2400px; overflow: visible; }
.flip-sheet { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.flip-sheet .front, .flip-sheet .back { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: #fff; }
.flip-sheet .back { transform: rotateY(180deg); }
.flip-sheet img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flip-sheet.forward { right: 0; transform-origin: left center; animation: flipForward .62s cubic-bezier(.2,.72,.2,1) forwards; }
.flip-sheet.backward { left: 0; transform-origin: right center; animation: flipBackward .62s cubic-bezier(.2,.72,.2,1) forwards; }
.flip-sheet.forward::after, .flip-sheet.backward::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; animation: pageShade .62s ease both; }
.flip-sheet.forward::after { background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.32)); }
.flip-sheet.backward::after { background: linear-gradient(270deg, rgba(0,0,0,.03), rgba(0,0,0,.32)); }
@keyframes flipForward { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-180deg); } }
@keyframes flipBackward { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }
@keyframes pageShade { 0%,100% { opacity:0; } 48% { opacity:1; } }

.nav-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 68px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(20,22,25,.76); color: #fff; z-index: 25; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0,0,0,.24); transition: background .18s, opacity .18s, transform .18s; }
.nav-arrow:hover { background: rgba(223,17,24,.92); }
.nav-arrow:active { transform: translateY(-50%) scale(.94); }
.nav-arrow svg { width: 32px; height: 32px; fill: currentColor; }
.nav-prev { left: 12px; }
.nav-next { right: 12px; }
.nav-arrow:disabled { opacity: .22; cursor: default; }
.nav-arrow:disabled:hover { background: rgba(20,22,25,.76); }

.bottom-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; background: rgba(20,22,25,.96); border-top: 1px solid rgba(255,255,255,.08); z-index: 40; }
.mini-btn { width: 34px; height: 32px; border:0; border-radius:8px; background: #2b2f34; color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.mini-btn:hover { background: var(--accent); }
.page-counter { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.page-counter input { width: 48px; height: 30px; border:1px solid #454a50; border-radius:7px; background:#111316; color:#fff; text-align:center; outline:none; }
.page-counter input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(223,17,24,.2); }
.progress-track { width: min(320px, 34vw); height: 4px; background: #3a3e43; border-radius: 99px; overflow:hidden; margin-left:10px; }
.progress-bar { height:100%; width:10%; background:var(--accent); border-radius:inherit; transition:width .25s ease; }

.thumb-panel { position: fixed; z-index: 80; top: 56px; bottom: 48px; left: 0; width: min(310px, 86vw); background: #181a1e; border-right: 1px solid rgba(255,255,255,.09); transform: translateX(-102%); transition: transform .24s ease; box-shadow: 18px 0 40px rgba(0,0,0,.35); }
.thumb-panel.open { transform: translateX(0); }
.thumb-head { height:52px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); }
.thumb-head button { width:34px; height:34px; border:0; border-radius:7px; background:transparent; color:#fff; font-size:26px; cursor:pointer; }
.thumb-list { height: calc(100% - 52px); overflow:auto; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; padding:14px; align-content:start; }
.thumb-item { border:1px solid rgba(255,255,255,.10); border-radius:9px; padding:5px; background:#24272b; color:#fff; cursor:pointer; transition:border-color .18s, transform .18s, background .18s; }
.thumb-item:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.32); }
.thumb-item.active { border-color:var(--accent); background:#2b2022; box-shadow:0 0 0 1px var(--accent) inset; }
.thumb-item img { width:100%; display:block; border-radius:5px; background:#fff; }
.thumb-item span { display:block; text-align:center; font-size:12px; padding:6px 0 2px; color:#cfd3d8; }
.panel-backdrop { position: fixed; z-index: 70; inset:56px 0 48px; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.panel-backdrop.show { opacity:1; visibility:visible; }

@media (max-width: 900px) {
  .viewer { grid-template-rows: 52px minmax(0,1fr) 46px; }
  .toolbar { height:52px; padding:0 8px; }
  .brand-mark { width:31px; height:31px; font-size:14px; }
  .brand-text { max-width: 42vw; font-size:12px; }
  .brand-text b { display:none; }
  .toolbar-actions { gap:0; }
  .tool-btn { width:36px; height:36px; }
  .catalog-viewport { padding: 12px 44px; }
  .book-shell { width: min(84vw, calc((100vh - 126px) * var(--page-ratio))); aspect-ratio: var(--page-ratio) / 1; }
  .book { grid-template-columns: 1fr; }
  .left-slot { display:none; }
  .right-slot { grid-column:1; border-radius:8px; }
  .right-slot .page-image { border-radius:8px; }
  .book-gutter { display:none; }
  .flip-sheet { width:100%; left:0 !important; right:auto !important; }
  .flip-sheet.forward, .flip-sheet.backward { transform-origin:center center; }
  .flip-sheet.forward { animation: mobileForward .44s ease both; }
  .flip-sheet.backward { animation: mobileBackward .44s ease both; }
  @keyframes mobileForward { 0%{transform:translateX(0) rotateY(0);opacity:1} 100%{transform:translateX(-14%) rotateY(-55deg);opacity:0} }
  @keyframes mobileBackward { 0%{transform:translateX(0) rotateY(0);opacity:1} 100%{transform:translateX(14%) rotateY(55deg);opacity:0} }
  .nav-arrow { width:38px; height:58px; border-radius:10px; }
  .nav-prev { left:4px; }
  .nav-next { right:4px; }
  .nav-arrow svg { width:27px; height:27px; }
  .progress-track { display:none; }
  .thumb-panel { top:52px; bottom:46px; }
  .panel-backdrop { inset:52px 0 46px; }
}

@media (max-width: 520px) {
  .brand-text { display:none; }
  .catalog-viewport { padding-left:40px; padding-right:40px; }
  .book-shell { width:min(82vw, calc((100vh - 120px) * var(--page-ratio))); }
  .tool-btn { width:34px; }
}

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