.flipbook-container{max-width:1200px;margin:20px auto;text-align:center;font-family:Arial,sans-serif}.flipbook-header{margin-bottom:20px;padding:15px;background:#f8f9fa;border-radius:8px}.flipbook-controls{display:flex;justify-content:center;gap:15px;margin-bottom:20px}.flipbook-btn{background:#0073aa;color:white;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px;transition:all 0.3s ease}.flipbook-btn:hover{background:#005177;transform:translateY(-2px)}.flipbook-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.flipbook{position:relative;width:1000px;height:700px;margin:0 auto;background:linear-gradient(45deg,#8B4513,#A0522D);border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,0.4);overflow:hidden;perspective:1500px}.flipbook::before{content:"";position:absolute;top:50%;left:50%;width:4px;height:80%;background:linear-gradient(to bottom,#654321,#8B4513,#654321);transform:translate(-50%,-50%);z-index:10;border-radius:2px;box-shadow:0 0 10px rgba(0,0,0,0.5)}.flipbook-pages{position:relative;width:100%;height:100%;display:flex;transform-style:preserve-3d}.flipbook-page{width:500px;height:700px;background:white;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.3)}.flipbook-page.page-left{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;z-index:2;transform-origin:right center}.flipbook-page.page-right{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;z-index:2;transform-origin:left center}.flipbook[data-animation="book_realistic"] .flipbook-page{transition:all 1.2s cubic-bezier(0.23,1,0.320,1)}.flipbook[data-animation="book_realistic"] .flipbook-page.flipping-out-right{animation:bookFlipOutRight 1.2s cubic-bezier(0.23,1,0.320,1) forwards}.flipbook[data-animation="book_realistic"] .flipbook-page.flipping-in-right{animation:bookFlipInRight 1.2s cubic-bezier(0.23,1,0.320,1) forwards}.flipbook[data-animation="book_realistic"] .flipbook-page.flipping-out-left{animation:bookFlipOutLeft 1.2s cubic-bezier(0.23,1,0.320,1) forwards}.flipbook[data-animation="book_realistic"] .flipbook-page.flipping-in-left{animation:bookFlipInLeft 1.2s cubic-bezier(0.23,1,0.320,1) forwards}@keyframes bookFlipOutRight{0%{transform:rotateY(0deg);z-index:3}25%{transform:rotateY(-25deg)}50%{transform:rotateY(-90deg)}75%{transform:rotateY(-155deg)}100%{transform:rotateY(-180deg);z-index:1}}@keyframes bookFlipInRight{0%{transform:rotateY(180deg);z-index:1}25%{transform:rotateY(155deg)}50%{transform:rotateY(90deg);z-index:3}75%{transform:rotateY(25deg)}100%{transform:rotateY(0deg);z-index:2}}@keyframes bookFlipOutLeft{0%{transform:rotateY(0deg);z-index:3}25%{transform:rotateY(25deg)}50%{transform:rotateY(90deg)}75%{transform:rotateY(155deg)}100%{transform:rotateY(180deg);z-index:1}}@keyframes bookFlipInLeft{0%{transform:rotateY(-180deg);z-index:1}25%{transform:rotateY(-155deg)}50%{transform:rotateY(-90deg);z-index:3}75%{transform:rotateY(-25deg)}100%{transform:rotateY(0deg);z-index:2}}.flipbook[data-animation="book_simple"] .flipbook-page{transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94)}.flipbook[data-animation="book_simple"] .flipbook-page.flipping-out{animation:simpleFlipOut 0.8s ease-in-out forwards}.flipbook[data-animation="book_simple"] .flipbook-page.flipping-in{animation:simpleFlipIn 0.8s ease-in-out forwards}@keyframes simpleFlipOut{0%{transform:rotateY(0deg);z-index:3}50%{transform:rotateY(-90deg);z-index:3}100%{transform:rotateY(-180deg);z-index:1}}@keyframes simpleFlipIn{0%{transform:rotateY(180deg);z-index:1}50%{transform:rotateY(90deg);z-index:3}100%{transform:rotateY(0deg);z-index:2}}.flipbook[data-animation="fade_transition"] .flipbook-page{transition:all 0.6s ease-in-out}.flipbook[data-animation="fade_transition"] .flipbook-page.fading-out{opacity:0;transform:scale(0.95)}.flipbook[data-animation="fade_transition"] .flipbook-page.fading-in{animation:fadeIn 0.6s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0;transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}.flipbook-page canvas{max-width:95%;max-height:95%;object-fit:contain;border-radius:4px;transition:transform 0.3s ease}.flipbook-page:hover canvas{transform:scale(1.02)}.page-number{position:absolute;bottom:15px;right:15px;background:rgba(0,0,0,0.8);color:white;padding:5px 10px;border-radius:15px;font-size:12px;font-weight:bold;transition:all 0.3s ease}.flipbook-page:hover .page-number{background:rgba(0,0,0,0.9);transform:scale(1.1)}.page-shadow{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.05) 10%,transparent 30%);opacity:0;transition:opacity 0.3s ease;pointer-events:none}.flipbook-page:hover .page-shadow{opacity:1}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:rgba(255,255,255,0.95);padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:100}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #0073aa;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px auto}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.page-flip-hint{position:absolute;top:50%;right:20px;transform:translateY(-50%);color:rgba(255,255,255,0.7);font-size:12px;opacity:0;transition:opacity 0.3s ease;pointer-events:none}.flipbook-page:hover .page-flip-hint{opacity:1}@media (max-width:1024px){.flipbook{width:800px;height:560px}.flipbook-page{width:400px;height:560px}}@media (max-width:768px){.flipbook{width:95vw;height:60vw;max-height:500px}.flipbook-page{width:47.5vw;height:60vw;max-height:500px}.flipbook-controls{flex-direction:column;gap:10px}}