*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}.app{height:100vh;min-height:100vh;display:flex;flex-direction:column;background:#fff;color:#111}.app-header{padding:.75rem 1rem;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;gap:50px}.app-header-left{display:flex;flex-direction:column;gap:.25rem;flex-shrink:0}.app-header h1{margin:0;font-size:1.25rem}.app-lang-controls{display:flex;flex-wrap:wrap;gap:.5rem}@media (max-width: 500px){.app-lang-controls{flex-direction:column;gap:.25rem}}.app-header-title-row{display:flex;align-items:center;gap:.5rem}.app-settings-btn{background:none;border:none;cursor:pointer;color:#999;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:22px;min-height:22px;overflow:visible;transition:color .15s}.app-settings-btn:hover{color:#555}.settings-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;background:#00000080;display:flex;align-items:center;justify-content:center}.settings-modal{background:#fff;border-radius:10px;box-shadow:0 8px 32px #00000040;width:90vw;max-width:360px;display:flex;flex-direction:column}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #eee}.settings-modal-header h2{margin:0;font-size:1.15rem;font-weight:600}.settings-modal-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#666;padding:.25rem;border-radius:4px}.settings-modal-close:hover{background:#0000000f;color:#111}.settings-modal-body{padding:1rem 1.25rem}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}.settings-label{font-size:.9rem;color:#555}.saved-books{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:1rem;padding:.25rem 0;overflow-x:auto;overflow-y:visible;flex:1;min-width:0}.saved-books-add{width:55px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px dashed #ccc;border-radius:4px;cursor:pointer;transition:border-color .15s,background .15s}.saved-books-add:hover{border-color:#999;background:#00000008}.saved-books-add span{font-size:1.5rem;color:#aaa;line-height:1;-webkit-user-select:none;user-select:none}.book-3d{position:relative;width:55px;height:80px;perspective:300px;cursor:pointer;flex-shrink:0}.book-3d-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.book-3d-cover-front{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#a4a4a4,#4f4f4f);background-size:cover;background-position:center;border-radius:0 3px 3px 0;transform-origin:left center;transition:transform .8s ease,z-index .6s;z-index:5;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}.book-3d-cover-front .book-3d-title{backface-visibility:hidden}.book-3d-title{font-size:.5rem;font-weight:600;color:#fff;text-align:center;line-height:1.2;word-break:break-word;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.3)}.book-3d-pages{list-style:none;margin:0;padding:0;position:absolute;top:3px;right:3px;bottom:3px;left:0;transform-style:preserve-3d}.book-3d-pages li{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0 2px 2px 0;transform-origin:left center;transition-property:transform;transition-timing-function:ease;box-shadow:0 0 3px #0000001a;overflow:hidden}.book-3d-pages li:after{content:"";position:absolute;top:5px;bottom:5px;left:6px;right:5px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.07) 0px,rgba(0,0,0,.07) 1px,transparent 1px,transparent 2px)}.book-3d-pages li{background:#f5f0e8}.book-3d-pages li:nth-child(2){background:#f0ebe3}.book-3d-pages li:nth-child(3){background:#ebe6de}.book-3d-pages li:nth-child(4){background:#e6e1d9}.book-3d-pages li:nth-child(5){background:#e1dcd4}.book-3d-pages li:nth-child(1){transition-duration:.6s}.book-3d-pages li:nth-child(2){transition-duration:.6s}.book-3d-pages li:nth-child(3){transition-duration:.4s}.book-3d-pages li:nth-child(4){transition-duration:.5s}.book-3d-pages li:nth-child(5){transition-duration:.6s}.book-3d-cover-back{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#a4a4a4,#4f4f4f);border-radius:0 3px 3px 0;box-shadow:1px 1px 4px #00000026}.book-3d-spine{position:absolute;top:0;left:0;width:8px;height:100%;background:linear-gradient(to right,#939393,#747474);transform:translate(-4px) rotateY(90deg);transform-origin:right center;display:none}.book-3d--active .book-3d-cover-front{transform:rotateY(-145deg) translateZ(0);z-index:0}.book-3d--active .book-3d-pages li:nth-child(1){transform:rotateY(-30deg);transition-duration:1.5s}.book-3d--active .book-3d-pages li:nth-child(2){transform:rotateY(-35deg);transition-duration:1.8s}.book-3d--active .book-3d-pages li:nth-child(3){transform:rotateY(-118deg);transition-duration:1.6s}.book-3d--active .book-3d-pages li:nth-child(4){transform:rotateY(-130deg);transition-duration:1.4s}.book-3d--active .book-3d-pages li:nth-child(5){transform:rotateY(-140deg);transition-duration:1.2s}@keyframes pageTurnNext{0%{transform:rotateY(-35deg)}to{transform:rotateY(-150deg)}}@keyframes pageTurnPrev{0%{transform:rotateY(-118deg)}to{transform:rotateY(-20deg)}}.book-3d--turn-next .book-3d-pages li:nth-child(2){animation:pageTurnNext .35s ease-in forwards}.book-3d--turn-prev .book-3d-pages li:nth-child(3){animation:pageTurnPrev .35s ease-in forwards}.book-3d-delete{position:absolute;top:2px;right:-6px;z-index:10;width:16px;height:16px;border-radius:50%;border:none;background:#e0e0e0;color:#666;font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;padding:0}.book-3d:hover .book-3d-delete{opacity:1}.book-3d-delete:hover{background:#c00;color:#fff}.app-main{flex:1;min-height:0;display:flex;flex-direction:column}.reader-placeholder{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#666;padding:2rem;cursor:pointer;border:2px dashed #ccc;border-radius:12px;margin:1rem;transition:border-color .15s,background .15s}.reader-placeholder:hover{border-color:#999;background:#00000005}.reader-placeholder--dragging{border-color:#666;background:#0000000a}.reader-placeholder-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.reader-placeholder p{margin:0}.reader-placeholder-hint{font-size:.9rem;color:#999}.reader-wrapper{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}.reader-toolbar{flex-shrink:0;padding:.5rem 1rem 0;border-bottom:1px solid #eee;display:flex;align-items:center;gap:.5rem}.reader-load-error{flex-shrink:0;padding:.75rem 1rem;margin:0 1rem;background:#fff8e6;border:1px solid #e6d9b8;border-radius:6px;font-size:.875rem}.reader-load-error p{margin:0 0 .5rem}.reader-load-error p:last-child{margin-bottom:0}.reader-load-error-tip{color:#6b5a32}.reader-load-error code{font-size:.8em;background:#0000000f;padding:.1em .35em;border-radius:3px}.reader-container{flex:1;min-height:60vh;overflow:hidden;position:relative}.reader-container iframe{width:100%;min-height:100%;border:none}.reader-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#fff;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s ease}.reader-loading-overlay--fading{opacity:0;pointer-events:none}.reader-loading-spinner{width:28px;height:28px;border:2.5px solid #e0e0e0;border-top-color:#999;border-radius:50%;animation:readerSpin .7s linear infinite}@keyframes readerSpin{to{transform:rotate(360deg)}}@media (min-width: 800px){.reader-container:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#e0e0e0;pointer-events:none;z-index:1}}.reader-nav-btn{display:flex;flex-direction:column;align-items:center}.reader-nav-hint{font-size:.6rem;color:#aaa;line-height:1;position:relative;top:-8px;-webkit-user-select:none;user-select:none;pointer-events:none}.reader-page-info{font-size:.8rem;color:#888;white-space:nowrap;-webkit-user-select:none;user-select:none}.reader-progress{flex:1;min-width:60px;max-width:200px;height:5px;background:#e8e8e8;border-radius:3px;overflow:hidden}.reader-progress-fill{height:100%;background:#666;border-radius:3px;transition:width .3s ease}.reader-pie-chart{width:24px;height:24px;cursor:pointer;flex-shrink:0;transition:transform .15s}.reader-pie-chart:hover{transform:scale(1.15)}.stats-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;background:#00000080;display:flex;align-items:center;justify-content:center}.stats-modal{background:#fff;border-radius:10px;box-shadow:0 8px 32px #00000040;width:90vw;max-width:480px;max-height:85vh;display:flex;flex-direction:column}.stats-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #eee;flex-shrink:0}.stats-modal-header h2{margin:0;font-size:1.15rem;font-weight:600}.stats-modal-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#666;padding:.25rem;border-radius:4px}.stats-modal-close:hover{background:#0000000f;color:#111}.stats-modal-body{overflow-y:auto;flex:1;min-height:0;padding:1rem 1.25rem}.stats-section{margin-bottom:1.25rem}.stats-section:last-child{margin-bottom:0}.stats-section h3{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#888;margin:0 0 .5rem}.stats-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;font-size:.9rem;border-bottom:1px solid #f0f0f0}.stats-row:last-child{border-bottom:none}.stats-label{color:#555}.stats-value{font-weight:600;color:#222}.stats-bar-row{margin-top:.5rem}.stats-bar-label{font-size:.8rem;color:#777;margin-bottom:.2rem}.stats-bar{height:6px;background:#e8e8e8;border-radius:3px;overflow:hidden}.stats-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}.stats-large-pie{display:flex;justify-content:center;margin:.75rem 0}.stats-pie-text{fill:#555}.stats-empty{text-align:center;color:#999;font-size:.9rem;padding:2rem 1rem;margin:0}.stats-tabs{display:flex;gap:0;border-bottom:1px solid #eee;flex-shrink:0}.stats-tab{flex:1;background:none;border:none;padding:.6rem .5rem;font-size:.85rem;cursor:pointer;color:#888;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.stats-tab:hover{color:#444}.stats-tab.active{color:#222;border-bottom-color:#666;font-weight:600}.toc-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;background:#00000080;display:flex;align-items:center;justify-content:center}.toc-modal{background:#fff;border-radius:10px;box-shadow:0 8px 32px #00000040;width:90vw;max-width:600px;max-height:85vh;display:flex;flex-direction:column}.toc-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #eee;flex-shrink:0}.toc-modal-header h2{margin:0;font-size:1.15rem;font-weight:600}.toc-modal-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#666;padding:.25rem;border-radius:4px}.toc-modal-close:hover{background:#0000000f;color:#111}.toc-modal-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}.toc-modal-item{display:block;width:100%;text-align:left;background:none;border:none;padding:.6rem 1rem;font-size:.9rem;cursor:pointer;color:#222;border-bottom:1px solid #f0f0f0;transition:background .1s}.toc-modal-item:hover{background:#f5f5f5}.toc-modal-item:active{background:#eaeaea}.translation-popover{position:fixed;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:.5rem .75rem;max-width:320px}.translation-popover-inner{padding-right:1.5rem}.translation-popover-word{font-weight:600;font-size:.9rem;margin-bottom:.25rem}.translation-popover-translation{font-size:.95rem;color:#333}.translation-popover-loading,.translation-popover-error{font-size:.9rem;color:#666}.translation-popover-error{color:#c00}.translation-popover-close{position:absolute;top:.25rem;right:.25rem;background:none;border:none;font-size:1.25rem;line-height:1;cursor:pointer;color:#666;padding:0 .25rem}.translation-popover-close:hover{color:#000}.app.theme-dark{background:#1e1e1e;color:#e0e0e0}.app.theme-dark .app-header{background:#2d2d2d;color:#e0e0e0;border-color:#444}.app.theme-dark .app-main{background:#1e1e1e}.app.theme-dark .reader-placeholder{color:#b0b0b0;border-color:#555}.app.theme-dark .reader-placeholder:hover{border-color:#777;background:#ffffff0a}.app.theme-dark .reader-placeholder--dragging{border-color:#888;background:#ffffff14}.app.theme-dark .reader-placeholder-hint{color:#888}.app.theme-dark .saved-books-add{border-color:#555}.app.theme-dark .saved-books-add:hover{border-color:#888;background:#ffffff0d}.app.theme-dark .saved-books-add span{color:#777}.app.theme-dark .book-3d-cover-front{background-image:linear-gradient(135deg,#8a8a8a,#3f3f3f)}.app.theme-dark .book-3d-pages li{background:#f5f0e8}.app.theme-dark .book-3d-pages li:nth-child(2){background:#f0ebe3}.app.theme-dark .book-3d-pages li:nth-child(3){background:#ebe6de}.app.theme-dark .book-3d-pages li:nth-child(4){background:#e6e1d9}.app.theme-dark .book-3d-pages li:nth-child(5){background:#e1dcd4}.app.theme-dark .book-3d-cover-back{background:linear-gradient(135deg,#8a8a8a,#3f3f3f)}.app.theme-dark .book-3d-delete{background:#444;color:#aaa}.app.theme-dark .book-3d-delete:hover{background:#c00;color:#fff}.app.theme-dark .app-settings-btn{color:#777}.app.theme-dark .app-settings-btn:hover{color:#ccc}.app.theme-dark .settings-modal{background:#2d2d2d;box-shadow:0 8px 32px #00000080}.app.theme-dark .settings-modal-header{border-color:#444}.app.theme-dark .settings-modal-header h2{color:#e0e0e0}.app.theme-dark .settings-modal-close{color:#999}.app.theme-dark .settings-modal-close:hover{background:#ffffff14;color:#fff}.app.theme-dark .settings-label{color:#bbb}.app.theme-dark .reader-toolbar{border-color:#333}.app.theme-dark .translation-popover{background:#2d2d2d;border-color:#444}.app.theme-dark .translation-popover-word,.app.theme-dark .translation-popover-translation{color:#e0e0e0}.app.theme-dark .translation-popover-close{color:#999}.app.theme-dark .translation-popover-close:hover{color:#fff}.app.theme-dark .reader-load-error{background:#3d3520;border-color:#5c5030}.app.theme-dark .reader-load-error-tip{color:#d4c9a8}.app.theme-dark .reader-load-error code{background:#ffffff1a}.app.theme-dark .toc-modal{background:#2d2d2d;box-shadow:0 8px 32px #00000080}.app.theme-dark .toc-modal-header{border-color:#444}.app.theme-dark .toc-modal-header h2{color:#e0e0e0}.app.theme-dark .toc-modal-close{color:#999}.app.theme-dark .toc-modal-close:hover{background:#ffffff14;color:#fff}.app.theme-dark .toc-modal-item{color:#e0e0e0;border-bottom-color:#3a3a3a}.app.theme-dark .toc-modal-item:hover{background:#383838}.app.theme-dark .toc-modal-item:active{background:#444}@media (min-width: 800px){.app.theme-dark .reader-container:after{background:#444}}.app.theme-dark .reader-loading-overlay{background:#1e1e1e}.app.theme-dark .reader-loading-spinner{border-color:#444;border-top-color:#888}.app.theme-dark .reader-nav-hint{color:#666}.app.theme-dark .reader-page-info{color:#999}.app.theme-dark .reader-progress{background:#3a3a3a}.app.theme-dark .reader-progress-fill{background:#999}.app.theme-dark .stats-modal{background:#2d2d2d;box-shadow:0 8px 32px #00000080}.app.theme-dark .stats-modal-header{border-color:#444}.app.theme-dark .stats-modal-header h2{color:#e0e0e0}.app.theme-dark .stats-modal-close{color:#999}.app.theme-dark .stats-modal-close:hover{background:#ffffff14;color:#fff}.app.theme-dark .stats-section h3{color:#999}.app.theme-dark .stats-row{border-bottom-color:#3a3a3a}.app.theme-dark .stats-label{color:#bbb}.app.theme-dark .stats-value{color:#e0e0e0}.app.theme-dark .stats-bar{background:#3a3a3a}.app.theme-dark .stats-bar-label{color:#999}.app.theme-dark .stats-tabs{border-bottom-color:#444}.app.theme-dark .stats-tab{color:#888}.app.theme-dark .stats-tab:hover{color:#ccc}.app.theme-dark .stats-tab.active{color:#e0e0e0;border-bottom-color:#999}.app.theme-dark .stats-pie-text{fill:#ccc}