:root{font-family:Tahoma,Arial,sans-serif;--blue:#176d94;--blue2:#0c4f74;--ink:#17354a;--line:#d7e3e8}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:transparent;color:var(--ink)}button,a,input{font:inherit}button{cursor:pointer}
.archive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:100%;padding:8px}
.book-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(18,54,72,.12);transition:.22s ease}
.book-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(18,54,72,.20)}
.cover{position:relative;display:block;width:100%;padding:0;border:0;background:#e7eef1;aspect-ratio:612/792;overflow:hidden;text-align:left}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:.28s ease}
.book-card:hover .cover img{transform:scale(1.018);filter:brightness(.82)}
.cover:after{content:'OPEN FLIPBOOK';position:absolute;left:50%;top:45%;z-index:4;padding:11px 15px;border-radius:999px;color:#fff;background:rgba(4,39,56,.90);font-size:11px;font-weight:700;letter-spacing:.55px;opacity:0;transform:translate(-50%,-42%);transition:.2s ease;pointer-events:none}
.book-card:hover .cover:after,.cover:focus-visible:after{opacity:1;transform:translate(-50%,-50%)}
.card-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:52px 14px 14px;color:#fff;background:linear-gradient(transparent,rgba(3,24,35,.96));pointer-events:none}
.card-bar strong{display:block;font-size:16px}.card-bar span{display:block;margin-top:3px;font-size:11px;color:rgba(255,255,255,.76)}
.card-actions{position:absolute;right:12px;bottom:12px;z-index:7;display:flex;gap:7px}.card-actions a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:10px;color:#fff;background:rgba(4,39,56,.72);text-decoration:none;backdrop-filter:blur(5px)}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viewer{position:fixed;inset:0;z-index:2147483000;display:none;flex-direction:column;color:#fff;background:rgba(4,18,27,.985)}.viewer.open{display:flex}
.toolbar{flex:0 0 auto;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.13);background:rgba(5,24,36,.98)}
.viewer-name{min-width:0;max-width:38vw}.viewer-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.viewer-name span{display:block;margin-top:3px;color:rgba(255,255,255,.62);font-size:11px}
.controls{display:flex;align-items:center;gap:6px}.tool{min-width:40px;height:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:#fff;background:rgba(255,255,255,.07);text-decoration:none}.tool:hover{background:rgba(255,255,255,.14)}.counter{min-width:104px;color:rgba(255,255,255,.76);font-size:12px;text-align:center}
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:auto;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at center,#355563 0,#172f3b 48%,#071b26 100%)}
.book-wrap{position:relative;transform-origin:center;transition:transform .15s ease}.book{position:relative;display:flex;align-items:stretch;justify-content:center;perspective:2200px;filter:drop-shadow(0 22px 25px rgba(0,0,0,.35))}
.page-slot{position:relative;width:min(39vw,535px);height:min(74vh,756px);background:#f4f4f0;overflow:hidden}.page-slot.left{border-radius:8px 0 0 8px}.page-slot.right{border-radius:0 8px 8px 0}.page-slot.blank{background:linear-gradient(135deg,#e7e4dc,#f8f6ef)}
.page-slot img{width:100%;height:100%;object-fit:contain;background:#fff;display:block;user-select:none;-webkit-user-drag:none}.page-slot.left:after,.page-slot.right:before{content:'';position:absolute;top:0;bottom:0;width:18px;pointer-events:none}.page-slot.left:after{right:0;background:linear-gradient(to left,rgba(0,0,0,.22),transparent)}.page-slot.right:before{left:0;background:linear-gradient(to right,rgba(0,0,0,.22),transparent)}
.turn-page{position:absolute;top:0;left:50%;width:min(39vw,535px);height:min(74vh,756px);z-index:10;transform-origin:left center;transform-style:preserve-3d;pointer-events:none}.turn-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;backface-visibility:hidden}.turn-page .back{transform:rotateY(180deg)}.turn-page.forward{animation:turnForward .65s cubic-bezier(.45,.05,.25,1) forwards}.turn-page.backward{left:0;transform-origin:right center;animation:turnBackward .65s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes turnForward{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}@keyframes turnBackward{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
.loading{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(7,27,38,.94);text-align:center}.loading[hidden]{display:none}.spinner{width:38px;height:38px;margin:0 auto 13px;border:4px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.bottom{flex:0 0 auto;min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.12);background:rgba(5,24,36,.98)}.bottom label,.zoom-value{color:rgba(255,255,255,.72);font-size:11px}.bottom input{width:min(280px,45vw);accent-color:#61bed0}.zoom-value{min-width:42px}
@media(max-width:950px){.archive{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.archive{grid-template-columns:1fr;gap:15px;padding:4px}.viewer-name{display:none}.toolbar{justify-content:center}.controls{width:100%;justify-content:space-between}.tool span{display:none}.stage{padding:10px}.page-slot{width:min(88vw,535px);height:min(72vh,756px)}.page-slot.left{display:none}.page-slot.right{border-radius:8px}.turn-page{left:50%;transform:translateX(-50%);width:min(88vw,535px);height:min(72vh,756px);transform-origin:left center}.turn-page.forward{animation:mobileForward .55s ease forwards}.turn-page.backward{left:50%;transform-origin:right center;animation:mobileBackward .55s ease forwards}@keyframes mobileForward{0%{transform:translateX(-50%) rotateY(0)}100%{transform:translateX(-50%) rotateY(-180deg)}}@keyframes mobileBackward{0%{transform:translateX(-50%) rotateY(0)}100%{transform:translateX(-50%) rotateY(180deg)}}}