.comic-viewer{width:100%;max-width:1400px;margin:0 auto;position:relative}.embla{overflow:hidden;position:relative;margin-bottom:1rem}.embla__container{display:flex;touch-action:pan-y}.embla__slide{flex:0 0 100%;min-width:0;display:flex;justify-content:center;align-items:center;padding:.5rem}.embla__slide__content{display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:auto}.page-image{max-width:100%;max-height:75vh;width:auto;height:auto;object-fit:contain;display:block;transition:transform .2s ease;transform-origin:center center}.comic-viewer:fullscreen,.comic-viewer:-webkit-full-screen,.comic-viewer:-moz-full-screen,.comic-viewer:-ms-fullscreen,.comic-viewer.is-fullscreen{background:#000;padding:0;margin:0;max-width:none;display:flex;flex-direction:column;height:100vh}.comic-viewer:fullscreen .embla,.comic-viewer:-webkit-full-screen .embla,.comic-viewer:-moz-full-screen .embla,.comic-viewer:-ms-fullscreen .embla,.comic-viewer.is-fullscreen .embla{flex:1;min-height:0;margin:0!important;display:flex;flex-direction:column}.comic-viewer:fullscreen .embla__container,.comic-viewer:-webkit-full-screen .embla__container,.comic-viewer:-moz-full-screen .embla__container,.comic-viewer:-ms-fullscreen .embla__container,.comic-viewer.is-fullscreen .embla__container{flex:1}.comic-viewer:fullscreen .embla__slide,.comic-viewer:-webkit-full-screen .embla__slide,.comic-viewer:-moz-full-screen .embla__slide,.comic-viewer:-ms-fullscreen .embla__slide,.comic-viewer.is-fullscreen .embla__slide{min-height:0;height:100%;padding:0}.comic-viewer:fullscreen .embla__slide__content,.comic-viewer:-webkit-full-screen .embla__slide__content,.comic-viewer:-moz-full-screen .embla__slide__content,.comic-viewer:-ms-fullscreen .embla__slide__content,.comic-viewer.is-fullscreen .embla__slide__content{height:100%}.comic-viewer:fullscreen .page-image,.comic-viewer:-webkit-full-screen .page-image,.comic-viewer:-moz-full-screen .page-image,.comic-viewer:-ms-fullscreen .page-image,.comic-viewer.is-fullscreen .page-image{max-height:100vh!important;max-width:100vw!important;transform:scale(1)!important}.comic-viewer:fullscreen .controls,.comic-viewer:-webkit-full-screen .controls,.comic-viewer:-moz-full-screen .controls,.comic-viewer:-ms-fullscreen .controls,.comic-viewer.is-fullscreen .controls{display:none!important}.controls{display:flex;justify-content:center;align-items:center;gap:.75rem;padding:.75rem;background:#f8f9fa;border-radius:8px}.nav-btn,.control-btn{padding:.6rem 1rem;border:1px solid #ddd;background:#fff;border-radius:5px;cursor:default;font-size:.95rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.nav-btn:hover:not(:disabled),.control-btn:hover{background:#228b22;color:#fff;border-color:#228b22}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.nav-btn svg path{stroke:currentColor}.page-display{font-size:1rem;font-weight:500;padding:.5rem 1rem;background:#fff;border-radius:5px;border:1px solid #ddd}.current-page{font-weight:700;color:#228b22}.modal{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;padding:0;max-width:500px;width:90%;box-shadow:0 10px 40px #0003}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0}.modal-header h3{margin:0;font-size:1.3rem;color:#333}.close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:default;color:#999;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#333}.modal-body{padding:2rem 1.5rem}.goto-input{width:100%;padding:.8rem;font-size:1rem;border:2px solid #ddd;border-radius:5px;margin-bottom:1.5rem;box-sizing:border-box}.goto-input:focus{outline:none;border-color:#228b22}.modal-actions{display:flex;gap:1rem;justify-content:flex-end}.primary-btn,.secondary-btn{padding:.7rem 1.5rem;border:none;border-radius:5px;font-size:1rem;cursor:default;font-weight:500;transition:all .2s ease}.primary-btn{background:#228b22;color:#fff}.primary-btn:hover{background:#1e7d1e}.secondary-btn{background:#f0f0f0;color:#333}.secondary-btn:hover{background:#e0e0e0}.setting-group{margin-bottom:1.5rem}.setting-group:last-child{margin-bottom:0}.setting-group label{display:block;font-weight:600;margin-bottom:.8rem;color:#333}.zoom-controls{display:flex;align-items:center;gap:.8rem}.zoom-btn{width:2.5rem;height:2.5rem;border:1px solid #ddd;background:#fff;border-radius:5px;cursor:default;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.zoom-btn:hover{background:#228b22;color:#fff;border-color:#228b22}.zoom-slider{flex:1;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#228b22;cursor:default}.zoom-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#228b22;cursor:default;border:none}.zoom-level{font-weight:600;color:#228b22;min-width:3.5rem;text-align:right}.fit-buttons{display:flex;gap:.8rem}.fit-btn{flex:1;padding:.7rem 1rem;border:1px solid #ddd;background:#fff;border-radius:5px;cursor:default;font-size:.95rem;transition:all .2s ease}.fit-btn:hover{background:#228b22;color:#fff;border-color:#228b22}.loading,.error{text-align:center;padding:3rem;font-size:1.2rem;color:#666}.error{color:#d32f2f}@media (max-width: 768px){.embla__slide{padding:.25rem}.page-image{max-height:70vh;max-width:100%}.controls{gap:.4rem;padding:.5rem;flex-wrap:wrap}.nav-btn{padding:.5rem .6rem;font-size:.85rem}.control-btn{padding:.5rem .6rem;font-size:.85rem;min-width:2.5rem}.page-display{font-size:.9rem;padding:.5rem .75rem;flex:0 0 auto}.control-btn[title="Jump to page"]{font-size:0;padding:.5rem;min-width:auto}.control-btn[title="Jump to page"]:before{content:"# ";font-size:1rem;font-weight:700}.modal-content{width:95%}.zoom-controls{flex-wrap:wrap}.zoom-level{width:100%;text-align:center}}@media (max-width: 480px){.controls{gap:.3rem;padding:.4rem}.nav-btn,.control-btn{padding:.45rem .5rem}.page-display{font-size:.85rem;padding:.45rem .6rem}.nav-btn svg{width:18px;height:18px}.control-btn svg{width:18px;height:18px}}
