:root{
    --catalog-bg:#07151e;
    --catalog-ink:#f5f7f8;
    --catalog-muted:#9db0b8;
    --catalog-accent:#36c66a;
    --page-ratio:1.4156;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Poppins",sans-serif;background:var(--catalog-bg);color:var(--catalog-ink)}
body.catalog-page{height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 35%,#173746 0,#0b202b 34%,#06131b 76%)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}

.catalog-header{
    height:74px;padding:0 clamp(16px,3vw,42px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    background:rgba(5,18,26,.88);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px);position:relative;z-index:30;
}
.catalog-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;width:max-content}
.catalog-brand img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#fff}
.catalog-brand span{display:grid;line-height:1}.catalog-brand strong{font-size:17px;letter-spacing:2px}.catalog-brand small{font-size:9px;letter-spacing:3px;margin-top:5px;color:var(--catalog-muted)}
.catalog-heading{text-align:center;display:grid;gap:4px}.catalog-heading span{color:var(--catalog-accent);font-size:10px;font-weight:700;letter-spacing:2.4px}.catalog-heading h1{margin:0;font-size:12px;font-weight:500;color:#cad5da}
.catalog-close{justify-self:end;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 15px;transition:.25s}
.catalog-close:hover{border-color:var(--catalog-accent);color:var(--catalog-accent);transform:translateY(-1px)}

.catalog-viewer{height:calc(100dvh - 74px);display:grid;grid-template-rows:minmax(0,1fr) auto;position:relative}
.catalog-stage{min-height:0;display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;gap:clamp(8px,2vw,26px);padding:18px clamp(12px,3vw,38px) 10px;perspective:2400px}
.book-shell{height:100%;min-height:0;display:grid;place-items:center;transform:scale(var(--book-zoom,1));transition:transform .25s ease}
.book{position:relative;height:min(100%,calc((100vw - 210px) / 2 * var(--page-ratio)));max-height:100%;aspect-ratio:1.4129/1;filter:drop-shadow(0 22px 34px rgba(0,0,0,.48));transform-style:preserve-3d;transition:transform .5s ease}
.book.is-cover{transform:translateX(-25%)}
.book.is-back-cover{transform:translateX(25%)}
.book::before{content:"";position:absolute;inset:-16px;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 38%,rgba(0,0,0,.14));z-index:-2}
.book-spine{position:absolute;left:50%;top:0;bottom:0;width:16px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.12),rgba(0,0,0,.28));z-index:20;pointer-events:none;opacity:.72}
.sheet{position:absolute;top:0;right:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.64,.02,.28,1);will-change:transform}
.sheet.flipped{transform:rotateY(-180deg)}
.page-face{position:absolute;inset:0;background:#fff;backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.page-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 9%,transparent 80%,rgba(255,255,255,.08))}
.page-back{transform:rotateY(180deg)}
.page-back::after{background:linear-gradient(270deg,rgba(0,0,0,.16),transparent 9%,transparent 80%,rgba(255,255,255,.08))}
.page-face img{width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
.page-corner{position:absolute;right:0;bottom:0;width:15%;height:12%;z-index:4;background:linear-gradient(135deg,transparent 49%,rgba(255,255,255,.38) 50%,rgba(0,0,0,.13));opacity:0;transition:.25s;pointer-events:none}
.sheet:not(.flipped):hover .page-corner{opacity:1}
.mobile-book{display:none}

.page-arrow{width:48px;height:48px;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:rgba(9,28,38,.8);color:#fff;cursor:pointer;transition:.25s;display:grid;place-items:center;font-size:15px;z-index:25}
.page-arrow:hover:not(:disabled){background:var(--catalog-accent);border-color:var(--catalog-accent);color:#06151d;transform:scale(1.08)}
.page-arrow:disabled{opacity:.22;cursor:not-allowed}
.catalog-toolbar{height:58px;margin:0 auto max(12px,env(safe-area-inset-bottom));padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(7,22,31,.9);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.24);backdrop-filter:blur(14px);z-index:25}
.catalog-toolbar button{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:#e9f0f3;cursor:pointer;transition:.2s}
.catalog-toolbar button:hover:not(:disabled){background:rgba(54,198,106,.17);color:var(--catalog-accent)}
.catalog-toolbar button:disabled{opacity:.25;cursor:not-allowed}
.page-status{min-width:98px;text-align:center;font-size:11px;font-weight:600;color:#d6e0e4;padding:0 6px}
.zoom-status{min-width:42px;text-align:center;font-size:10px;color:var(--catalog-muted)}
.toolbar-divider{height:22px;width:1px;background:rgba(255,255,255,.12);margin:0 4px}
.catalog-loader{position:fixed;inset:74px 0 0;z-index:50;background:#07151e;display:grid;place-content:center;justify-items:center;gap:14px;transition:opacity .4s,visibility .4s}
.catalog-loader.is-hidden{opacity:0;visibility:hidden}
.catalog-loader span{width:38px;height:38px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--catalog-accent);border-radius:50%;animation:catalog-spin .8s linear infinite}.catalog-loader p{font-size:12px;color:var(--catalog-muted);margin:0}
@keyframes catalog-spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
    .catalog-header{height:62px;grid-template-columns:1fr auto;padding:0 14px}.catalog-heading{display:none}.catalog-brand img{width:39px;height:39px}.catalog-brand strong{font-size:14px}.catalog-brand small{font-size:8px}.catalog-close{padding:9px 11px}.catalog-close span{display:none}
    .catalog-viewer{height:calc(100dvh - 62px)}.catalog-stage{grid-template-columns:42px minmax(0,1fr) 42px;padding:12px 8px 6px;gap:4px;overflow:hidden}
    .book{display:none}.book-shell{width:100%;height:100%}.mobile-book{display:block;position:relative;width:min(100%,calc((100dvh - 154px) / var(--page-ratio)));max-height:100%;aspect-ratio:595.5/842.25;filter:drop-shadow(0 20px 28px rgba(0,0,0,.48));perspective:1600px}
    .mobile-page{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;background:#fff;transition:transform .72s cubic-bezier(.64,.02,.28,1),opacity .3s;opacity:0;pointer-events:none}
    .mobile-page img{width:100%;height:100%;display:block;object-fit:cover;-webkit-user-drag:none}.mobile-page.is-current{opacity:1;z-index:3;pointer-events:auto}.mobile-page.is-before{opacity:0;transform:rotateY(-90deg);z-index:4}.mobile-page.is-after{opacity:0;transform:rotateY(55deg);z-index:2}
    .page-arrow{width:38px;height:38px;font-size:12px}.catalog-toolbar{height:52px;margin-bottom:max(6px,env(safe-area-inset-bottom));padding:5px 6px;border-radius:13px}.catalog-toolbar button{width:34px;height:36px}#firstPage,#lastPage,.toolbar-divider,.zoom-status{display:none}.page-status{min-width:76px;font-size:10px}.catalog-loader{inset:62px 0 0}
}

@media(max-height:650px) and (min-width:761px){.catalog-header{height:58px}.catalog-viewer{height:calc(100dvh - 58px)}.catalog-stage{padding-top:8px}.catalog-toolbar{height:48px}.catalog-loader{inset:58px 0 0}}
@media(prefers-reduced-motion:reduce){.sheet,.mobile-page,.book-shell,.page-arrow,.catalog-loader{transition-duration:.01ms!important}.catalog-loader span{animation:none}}