:root {
  --yellow: #f5c21b;
  --black: #101010;
  --white: #ffffff;
  --muted: #cfcfcf;
  --toolbar-h: 64px;
  --topbar-h: 70px;
  --page-ratio: 0.7047619; /* 419.5 / 595.3 */
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#1b1b1b; color:#fff; font-family:Arial, Helvetica, sans-serif; }
button, input, a { font: inherit; }
button { color:inherit; }
.topbar {
  height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; background:#fff; color:#111; border-bottom:4px solid var(--yellow); z-index:20; position:relative;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { background:#111; color:#fff; font-weight:900; padding:8px 9px; letter-spacing:-1px; transform:skew(-5deg); }
.brand strong { display:block; font-size:20px; line-height:1; letter-spacing:.03em; }
.brand span { display:block; font-size:12px; color:#555; margin-top:4px; text-transform:uppercase; letter-spacing:.08em; }
.top-actions { display:flex; align-items:center; gap:8px; }
.icon-btn, .download-btn { border:0; background:#111; color:#fff; border-radius:6px; height:38px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; }
.icon-btn { width:42px; font-size:23px; }
.download-btn { padding:0 14px; font-weight:700; font-size:13px; }
.download-btn:hover, .icon-btn:hover { background:#2b2b2b; }
.viewer {
  height:calc(100% - var(--topbar-h) - var(--toolbar-h));
  position:relative; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, #4a4a4a 0, #2a2a2a 48%, #151515 100%);
  overflow:hidden; user-select:none; touch-action:none;
}
.viewer::after { content:""; position:absolute; left:50%; bottom:18px; width:45%; height:26px; transform:translateX(-50%); background:rgba(0,0,0,.42); filter:blur(18px); border-radius:50%; pointer-events:none; }
.book { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; transform-origin:center center; transition:transform .18s ease; }
.spread { display:flex; align-items:center; justify-content:center; perspective:2400px; position:relative; }
.page {
  position:relative; background:#fff center/contain no-repeat; box-shadow:0 10px 30px rgba(0,0,0,.4);
  overflow:hidden; flex:0 0 auto;
}
.page.left { box-shadow:-10px 12px 28px rgba(0,0,0,.38); }
.page.right { box-shadow:10px 12px 28px rgba(0,0,0,.38); }
.page.left::after, .page.right::after { content:""; position:absolute; top:0; bottom:0; width:5%; pointer-events:none; }
.page.left::after { right:0; background:linear-gradient(to left, rgba(0,0,0,.16), transparent); }
.page.right::after { left:0; background:linear-gradient(to right, rgba(0,0,0,.16), transparent); }
.cover { box-shadow:0 15px 45px rgba(0,0,0,.52); }
.cover::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:linear-gradient(90deg, rgba(0,0,0,.24), transparent); z-index:2; }
.flipper {
  position:absolute; top:0; transform-style:preserve-3d; z-index:15; pointer-events:none;
  transition:transform .62s cubic-bezier(.19,.72,.18,1);
}
.flipper.next { transform-origin:left center; right:0; }
.flipper.prev { transform-origin:right center; left:0; }
.flipper .face { position:absolute; inset:0; backface-visibility:hidden; background:#fff center/contain no-repeat; overflow:hidden; }
.flipper .back { transform:rotateY(180deg); }
.flipper.next.turn { transform:rotateY(-180deg); }
.flipper.prev { transform:rotateY(-180deg); }
.flipper.prev.turn { transform:rotateY(0deg); }
.flipper::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(0,0,0,.22), transparent); opacity:0; transition:opacity .3s; pointer-events:none; }
.flipper.turn::after { opacity:.7; }
.nav-zone { position:absolute; top:0; bottom:0; width:17%; z-index:6; border:0; background:transparent; cursor:pointer; }
.nav-left { left:0; cursor:w-resize; }
.nav-right { right:0; cursor:e-resize; }
.nav-zone:focus-visible { outline:2px solid var(--yellow); outline-offset:-4px; }
.hint { position:absolute; top:14px; z-index:9; padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; opacity:0; transform:translateY(-5px); transition:.3s; pointer-events:none; }
.hint.show { opacity:1; transform:none; }
.toolbar {
  height:var(--toolbar-h); background:#111; border-top:1px solid #333; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; position:relative; z-index:20;
}
.tool-btn, .fit-btn { border:1px solid #3c3c3c; background:#222; border-radius:6px; height:40px; cursor:pointer; }
.tool-btn { width:46px; font-size:28px; line-height:1; }
.tool-btn.small { width:38px; font-size:22px; }
.fit-btn { padding:0 14px; font-size:12px; font-weight:700; }
.tool-btn:hover, .fit-btn:hover { background:#303030; border-color:#4d4d4d; }
.page-control { display:flex; align-items:center; gap:6px; font-size:13px; color:#ddd; }
.page-control input { width:54px; height:36px; border-radius:5px; border:1px solid #555; background:#fff; color:#111; text-align:center; font-weight:700; }
.divider { width:1px; height:30px; background:#3a3a3a; margin:0 4px; }
.zoom-label { min-width:52px; text-align:center; color:#ddd; font-size:12px; }

@media (max-width: 760px) {
  :root { --topbar-h: 58px; --toolbar-h: 62px; }
  .topbar { padding:7px 10px; }
  .brand strong { font-size:17px; }
  .brand span { font-size:10px; }
  .download-btn { display:none; }
  .viewer { background:#262626; }
  .nav-zone { width:22%; }
  .toolbar { gap:5px; }
  .page-control label { display:none; }
  .fit-btn { display:none; }
  .divider { margin:0; }
  .hint { font-size:11px; max-width:86%; text-align:center; }
}

@media (max-width: 420px) {
  .zoom-label { display:none; }
  .tool-btn { width:42px; }
  .tool-btn.small { width:34px; }
}