:root{--color-bg: #f4f4f2;--color-bg-elevated: #ffffff;--color-bg-grid: #e2e2df;--color-text-primary: #141414;--color-text-secondary: #5a5a58;--color-text-tertiary: #8a8a87;--color-accent: #e8850c;--color-accent-soft: rgba(232, 133, 12, .12);--color-border: #d4d4d0;--color-border-dashed: #c8c8c4;--color-glass: rgba(244, 244, 242, .82);--color-glass-border: rgba(212, 212, 208, .5);--color-shadow: rgba(20, 20, 20, .06);--color-shadow-strong: rgba(20, 20, 20, .12);--color-overlay: rgba(20, 20, 20, .4);--color-popup-bg: #fafaf8;--color-blue-glow: rgba(140, 180, 255, .08);--font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;--font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;--fs-xs: .7rem;--fs-sm: .8rem;--fs-base: .95rem;--fs-md: 1.1rem;--fs-lg: 1.4rem;--fs-xl: 2rem;--fs-2xl: 2.8rem;--fw-light: 300;--fw-normal: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 100px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.16, 1, .3, 1);--z-reader: 1;--z-controls: 10;--z-nav: 100;--z-popup: 200;--z-overlay: 300;--z-modal: 400;--safe-top: env(safe-area-inset-top);--safe-bottom: env(safe-area-inset-bottom);--safe-left: env(safe-area-inset-left);--safe-right: env(safe-area-inset-right)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:16px;height:100%;overflow:hidden}body{font-family:var(--font-body);font-weight:var(--fw-normal);color:var(--color-text-primary);background-color:var(--color-bg);line-height:1.6;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:linear-gradient(var(--color-bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-bg-grid) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px}#app{height:100%;overflow:hidden;position:relative}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--fw-bold);line-height:1.2}a{color:var(--color-accent);text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;color:inherit}input,textarea,select{font-family:inherit;font-size:inherit}::selection{background:var(--color-accent-soft);color:var(--color-text-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.section-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-text-tertiary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nav-bar{position:fixed;top:var(--space-md);left:50%;transform:translate(-50%);z-index:var(--z-nav);background:var(--color-glass);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border:1px solid var(--color-glass-border);border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-lg);display:flex;align-items:center;gap:var(--space-md);box-shadow:0 2px 20px var(--color-shadow);transition:opacity var(--transition-normal),transform var(--transition-normal);padding-top:calc(var(--space-sm) + var(--safe-top))}.nav-bar.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(-20px)}.nav-logo{font-family:var(--font-mono);font-weight:var(--fw-medium);font-size:var(--fs-sm);color:var(--color-text-primary);letter-spacing:.05em}.nav-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-secondary);transition:all var(--transition-fast);border:1px solid transparent}.nav-btn:hover{color:var(--color-text-primary);background:var(--color-accent-soft);border-color:var(--color-accent)}.nav-btn svg{width:16px;height:16px}.card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);transition:all var(--transition-normal);position:relative}.card:before{content:"";position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--color-border);border-right:1px solid var(--color-border);border-radius:0 var(--radius-md) 0 0}.card:hover{border-color:var(--color-accent);box-shadow:0 4px 24px var(--color-shadow)}.card-label{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-tertiary);letter-spacing:.06em;margin-bottom:var(--space-sm)}.card-title{font-family:var(--font-heading);font-size:var(--fs-md);font-weight:var(--fw-semibold);margin-bottom:var(--space-xs)}.card-desc{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.5}.book-card{cursor:pointer;display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);min-height:240px}.book-card .book-cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--color-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--color-border)}.book-cover img{width:100%;height:100%;object-fit:cover}.book-cover .no-cover{font-family:var(--font-heading);font-size:var(--fs-lg);color:var(--color-text-tertiary);text-align:center;padding:var(--space-md);line-height:1.3}.book-meta{flex:1;display:flex;flex-direction:column;gap:2px}.book-title{font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.book-author{font-size:var(--fs-sm);color:var(--color-text-secondary)}.book-progress-bar{height:2px;background:var(--color-border);border-radius:1px;overflow:hidden;margin-top:auto}.book-progress-fill{height:100%;background:var(--color-accent);border-radius:1px;transition:width var(--transition-normal)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 20px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-medium);transition:all var(--transition-fast);border:1px solid var(--color-border);color:var(--color-text-primary);background:var(--color-bg-elevated)}.btn:hover{border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 2px 12px var(--color-shadow)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-text-primary);color:var(--color-bg);border-color:var(--color-text-primary)}.btn-primary:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.btn-icon{padding:8px;border-radius:var(--radius-md);border:1px solid transparent;color:var(--color-text-secondary)}.btn-icon:hover{color:var(--color-text-primary);background:var(--color-accent-soft);border-color:var(--color-accent)}.btn-icon svg{width:20px;height:20px}.drop-zone{border:2px dashed var(--color-border-dashed);border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);text-align:center;transition:all var(--transition-normal);cursor:pointer;background:var(--color-bg-elevated)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--color-accent);background:var(--color-accent-soft)}.drop-zone-icon{font-size:2.5rem;margin-bottom:var(--space-md);opacity:.5}.drop-zone-text{font-family:var(--font-heading);font-size:var(--fs-md);color:var(--color-text-primary);margin-bottom:var(--space-xs)}.drop-zone-hint{font-size:var(--fs-sm);color:var(--color-text-tertiary)}.word-popup{position:fixed;z-index:var(--z-popup);background:var(--color-popup-bg);border:none;border-radius:var(--radius-lg);padding:10px 14px;box-shadow:0 8px 40px var(--color-shadow-strong),0 0 0 1px var(--color-glass-border);max-width:380px;min-width:260px;max-height:80vh;overflow:visible;animation:popup-in .2s ease-out;display:flex;flex-direction:column}@keyframes popup-in{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.word-popup-arrow{position:absolute;width:14px;height:14px;background:var(--color-popup-bg);border:none;transform:translate(-50%) rotate(45deg);pointer-events:none}.word-popup-arrow.at-top{top:-6px;box-shadow:-1px -1px 2px #0000000a}.word-popup-arrow.at-bottom{bottom:-6px;box-shadow:1px 1px 2px #0000000a}.word-popup-header{display:flex;align-items:baseline;gap:var(--space-sm);margin-bottom:2px}.word-popup-word{font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold)}.word-popup-pos{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-accent);background:var(--color-accent-soft);padding:2px 6px;border-radius:var(--radius-sm)}.word-popup-ipa{font-size:var(--fs-sm);color:var(--color-text-tertiary);cursor:pointer;padding:4px 0;margin-bottom:4px}.word-popup-meaning{font-size:var(--fs-base);color:var(--color-text-primary);line-height:1.6}.word-popup-play{background:none;border:none;cursor:pointer;font-size:var(--fs-md);padding:0 4px;margin-left:auto;color:var(--color-text-secondary);transition:transform var(--transition-fast)}.word-popup-play:active{transform:scale(.9)}.word-popup-actions{display:flex;gap:var(--space-sm);align-items:center}.word-popup-ask{float:right;font-size:var(--fs-xs);color:var(--color-text-tertiary);border:none;padding:2px 6px;border-radius:var(--radius-sm);transition:all var(--transition-fast);font-family:var(--font-body);opacity:.5;margin-left:8px;background:none;cursor:pointer}.word-popup-ask:hover{opacity:1;color:var(--color-text-secondary)}.word-popup-close{margin-left:auto;color:var(--color-text-tertiary);padding:4px;border-radius:var(--radius-sm)}.word-popup-close:hover{color:var(--color-text-primary)}.word-popup-loading{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-tertiary);font-size:var(--fs-sm);padding:var(--space-md) 0}.word-popup-loading .dots:after{content:"";animation:loading-dots 1.5s infinite}@keyframes loading-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.word-popup-followup{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.word-popup-followup-answer{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.6}.define-pill{position:fixed;z-index:var(--z-popup);background:var(--color-text-primary);color:var(--color-bg);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:6px 14px;border-radius:var(--radius-pill);box-shadow:0 4px 16px var(--color-shadow-strong);cursor:pointer;animation:pill-in .15s ease-out;user-select:none;-webkit-user-select:none;touch-action:manipulation}@keyframes pill-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.define-pill:active{transform:scale(.95)}.overlay{position:fixed;inset:0;background:var(--color-overlay);z-index:var(--z-overlay);opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.overlay.active{opacity:1;pointer-events:auto}.side-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:var(--color-bg-elevated);border-left:1px solid var(--color-border);z-index:var(--z-modal);transform:translate(100%);transition:transform var(--transition-slow);display:flex;flex-direction:column;overflow:hidden}.side-panel.open{transform:translate(0)}.side-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg);padding-top:calc(var(--space-lg) + var(--safe-top));border-bottom:1px solid var(--color-border)}.side-panel-progress{padding:12px var(--space-lg);border-bottom:1px solid var(--color-border)}.progress-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.progress-pages{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-text-secondary);letter-spacing:.5px}.progress-percent{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-text-primary)}.progress-bar-track{height:3px;background:var(--color-border);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width .3s ease}.side-panel-title{font-family:var(--font-heading);font-size:var(--fs-md);font-weight:var(--fw-semibold)}.side-panel-body{flex:1;overflow-y:auto;padding:var(--space-md)}.side-panel-footer{padding:var(--space-md) var(--space-lg);padding-bottom:calc(var(--space-md) + var(--safe-bottom));border-top:1px solid var(--color-border);display:flex;gap:var(--space-sm)}.word-item{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-sm);transition:all var(--transition-fast)}.word-item:hover{border-color:var(--color-accent)}.word-item-word{font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:var(--fs-base);display:flex;align-items:baseline;gap:var(--space-sm)}.word-item-meaning{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-top:4px;line-height:1.5}.word-item-sentence{font-size:var(--fs-xs);color:var(--color-text-tertiary);font-style:italic;margin-top:var(--space-xs);padding-left:var(--space-sm);border-left:2px solid var(--color-accent)}.word-item-book{font-size:var(--fs-xs);color:var(--color-text-tertiary);margin-top:var(--space-xs);font-family:var(--font-mono)}.reader-controls{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-controls);background:var(--color-glass);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-top:1px solid var(--color-glass-border);padding:var(--space-sm) var(--space-lg);padding-bottom:calc(var(--space-sm) + var(--safe-bottom));display:flex;align-items:center;gap:var(--space-md);transition:opacity var(--transition-normal),transform var(--transition-normal)}.reader-controls.hidden{opacity:0;pointer-events:none;transform:translateY(20px)}.reader-progress{flex:1;display:flex;align-items:center;gap:var(--space-sm)}.reader-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--color-border);border-radius:2px;outline:none}.reader-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:2px solid var(--color-bg-elevated);box-shadow:0 1px 4px var(--color-shadow)}.reader-chapter{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-tertiary);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-percent{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-text-secondary);min-width:40px;text-align:right}.reader-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-controls);background:var(--color-glass);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid var(--color-glass-border);padding:0 var(--space-lg);padding-top:calc(5px + var(--safe-top));display:flex;align-items:center;gap:var(--space-md);transition:opacity var(--transition-normal),transform var(--transition-normal)}.reader-header.hidden{opacity:0;pointer-events:none;transform:translateY(-20px)}.reader-title{flex:1;font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:#00000073;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.toc-dropdown-overlay{position:fixed;inset:0;z-index:9998;background:#0000004d;animation:fadeIn .15s ease}.toc-dropdown{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;width:min(90vw,360px);max-height:70vh;background:#fffffff2;backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-radius:var(--radius-lg);box-shadow:0 16px 48px #00000026,0 0 0 .5px #00000014;display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .2s ease}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.toc-progress{padding:16px 20px 12px;border-bottom:1px solid var(--color-border)}.toc-progress-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.toc-progress-label{font-family:var(--font-heading);font-size:var(--fs-sm);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}.toc-progress-value{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-text-primary)}.toc-progress-bar{height:3px;background:var(--color-border);border-radius:2px;overflow:hidden}.toc-progress-fill{height:100%;background:var(--color-accent);border-radius:2px}.toc-list{flex:1;overflow-y:auto;padding:8px 0;-webkit-overflow-scrolling:touch}.toc-item{padding:10px 16px;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text-secondary);cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent}.toc-item:active{background:#0000000d}.toc-item.active{color:var(--color-accent);font-weight:var(--fw-semibold);background:#e8850c0f}.toc-current{border-bottom:1px solid var(--color-border);font-weight:var(--fw-semibold)!important;color:var(--color-text-primary)!important;display:flex;align-items:center;gap:4px}.toc-current-pct{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--color-text-tertiary);font-weight:400}.library-page{height:100%;overflow-y:auto;padding:var(--space-xl);padding-top:calc(80px + var(--safe-top));padding-bottom:calc(var(--space-xl) + var(--safe-bottom))}.library-header{max-width:1200px;margin:0 auto var(--space-xl)}.library-title{font-size:var(--fs-2xl);margin-bottom:var(--space-xs)}.library-subtitle{font-size:var(--fs-base);color:var(--color-text-secondary)}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-md);max-width:1200px;margin:0 auto}.library-empty{grid-column:1 / -1}.library-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}.passwall-page{height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.passwall-card{width:min(100%,440px);padding:var(--space-xl);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.passwall-title{font-size:var(--fs-xl);margin-bottom:var(--space-xs)}.passwall-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.passwall-form{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}.passwall-input{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);color:var(--color-text-primary);padding:12px 14px;font-family:var(--font-mono);font-size:var(--fs-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.passwall-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.passwall-submit{width:100%;justify-content:center;min-height:44px;font-family:var(--font-mono);letter-spacing:.03em}.passwall-error{min-height:1.3em;margin-top:var(--space-sm);color:var(--color-accent);font-size:var(--fs-sm)}.passwall-shake{animation:passwall-shake .2s linear 0s 1}@keyframes passwall-shake{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}to{transform:translate(0)}}.reader-page{position:fixed;inset:0;height:100dvh;z-index:var(--z-reader);background:var(--color-bg);box-sizing:border-box;display:flex;flex-direction:column}.reader-page foliate-view{width:100%;height:100%;padding-top:50px;padding-bottom:0;box-sizing:border-box}@media(max-width:768px){.reader-page foliate-view{padding:50px 0 0}}.toast{position:fixed;bottom:calc(80px + var(--safe-bottom));left:50%;transform:translate(-50%) translateY(20px);background:var(--color-text-primary);color:var(--color-bg);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--fs-xs);z-index:var(--z-popup);opacity:0;pointer-events:none;transition:all var(--transition-normal)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:768px){.passwall-page{padding:var(--space-md)}.passwall-card{padding:var(--space-lg)}.passwall-title{font-size:var(--fs-lg)}.library-page{padding:var(--space-md);padding-top:calc(70px + var(--safe-top))}.library-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-sm)}.nav-bar{left:var(--space-sm);right:var(--space-sm);transform:none;padding:var(--space-sm) var(--space-md)}.word-popup{max-width:320px;min-width:240px}.side-panel{width:100%}.book-card{min-height:200px}.reader-header .reader-title{font-size:var(--fs-sm)}}@media(max-width:480px){.library-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}