*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background-color:#1a1a1a;color:#fff}#flipbook-container{width:100%;height:100%;display:flex;flex-direction:column}#viewer-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:#2a2a2a}.nav-button{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:rgba(0,0,0,.3);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;z-index:10}.nav-button:hover{background:rgba(0,0,0,.5)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-left{left:0;border-radius:0 8px 8px 0}.nav-right{right:0;border-radius:8px 0 0 8px}.nav-icon{font-size:32px;color:#fff}#flipbook-wrapper{display:flex;align-items:center;justify-content:center;transform-origin:center center;transition:transform .2s ease-out}#flipbook-wrapper.draggable{cursor:grab}#flipbook-wrapper.dragging{cursor:grabbing;transition:none}#flipbook{position:relative}#flipbook .page-content{width:100%;height:100%;background-color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}#flipbook .page-content img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}#flipbook .turn-page{background-color:#fff}#flipbook .odd{background:linear-gradient(to right,#f7f7f7 0%,#fff 10%)}#flipbook .even{background:linear-gradient(to left,#f7f7f7 0%,#fff 10%)}#flipbook .hard{box-shadow:inset 0 0 5px rgba(0,0,0,.1)}#toolbar{height:56px;background:#333;display:flex;align-items:center;justify-content:center;gap:24px;padding:0 20px;border-top:1px solid #444;flex-shrink:0}.toolbar-group{display:flex;align-items:center;gap:8px}.toolbar-btn{width:40px;height:40px;background:#444;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:background-color .2s}.toolbar-btn:hover{background:#555}.toolbar-btn:active{background:#666}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.slider-group{min-width:300px}#page-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#555;border-radius:3px;outline:none;cursor:pointer}#page-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}#page-slider::-moz-range-thumb{width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}.page-number{font-size:14px;color:#ccc;min-width:50px;text-align:center}.zoom-display{font-size:13px;color:#ccc;min-width:50px;text-align:center}#error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}#error-overlay.hidden{display:none}#error-message{background:#f44;color:#fff;padding:24px 40px;border-radius:8px;font-size:16px;max-width:500px;text-align:center}#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}#loading-overlay.hidden{display:none}.loading-spinner{width:48px;height:48px;border:4px solid #444;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:16px;font-size:16px;color:#ccc}.hidden{display:none!important}@media(max-width:768px){.nav-button{width:40px;height:80px}.nav-icon{font-size:24px}#toolbar{height:auto;flex-wrap:wrap;padding:8px 10px;gap:8px}.toolbar-group{gap:4px}.slider-group{min-width:200px;flex:1;order:3;width:100%;justify-content:center}.toolbar-btn{width:36px;height:36px;font-size:14px}}@media(max-width:499px){.nav-button{width:32px;height:60px;background:rgba(0,0,0,.2)}.nav-icon{font-size:18px}#toolbar{height:auto;padding:6px 8px;gap:4px}.toolbar-group{gap:2px}.toolbar-btn{width:32px;height:32px;font-size:12px}.slider-group{min-width:120px;flex:1;order:3;width:100%}.page-number{font-size:12px;min-width:35px}.zoom-display{font-size:11px;min-width:40px}#flipbook .odd,#flipbook .even{background:#fff}}