@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap";*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Be Vietnam Pro,system-ui,sans-serif;overflow-x:hidden}#root{min-height:100dvh}p,h1,h2,h3{margin:0}:root,:root[data-theme=toi]{--bg:#0f0f11;--bg-elevated:#18181b;--bg-blur:#0f0f11d1;--text:#e4e4e7;--text-dim:#71717a;--text-muted:#52525b;--border:#ffffff14;--accent:#a78bfa;--accent-glow:#a78bfa59;--accent-bg:#a78bfa1f;--sentence-hover:#ffffff0e;--sentence-active-bg:#a78bfa38;--sentence-active-text:#ede9fe;--shadow-lg:0 20px 60px -10px #000000b3;--shadow-bar:0 -1px 0 var(--border), 0 -24px 48px -8px #0009}:root[data-theme=sang]{--bg:#fafafa;--bg-elevated:#fff;--bg-blur:#fafafae0;--text:#18181b;--text-dim:#71717a;--text-muted:#a1a1aa;--border:#00000014;--accent:#7c3aed;--accent-glow:#7c3aed33;--accent-bg:#7c3aed14;--sentence-hover:#0000000a;--sentence-active-bg:#7c3aed1f;--sentence-active-text:#4c1d95;--shadow-lg:0 20px 60px -10px #0000001f;--shadow-bar:0 -1px 0 var(--border), 0 -24px 48px -8px #0000000f}:root[data-theme=sepia]{--bg:#f5efe0;--bg-elevated:#efe8d3;--bg-blur:#f5efe0e0;--text:#3c2f1e;--text-dim:#8a7460;--text-muted:#b09e86;--border:#3c2f1e1a;--accent:#92400e;--accent-glow:#92400e33;--accent-bg:#92400e14;--sentence-hover:#3c2f1e0a;--sentence-active-bg:#92400e1f;--sentence-active-text:#78350f;--shadow-lg:0 20px 60px -10px #3c2f1e26;--shadow-bar:0 -1px 0 var(--border), 0 -24px 48px -8px #3c2f1e0f}body{background-color:var(--bg);margin:0;transition:background-color .25s}.app{background:var(--bg);min-height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;transition:background .25s,color .25s;display:flex}.reading-progress{z-index:60;background:var(--border);height:2px;position:fixed;top:0;left:0;right:0}.reading-progress-fill{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white));height:100%;box-shadow:0 0 8px var(--accent-glow);transition:width .1s ease-out}.topbar{z-index:50;padding-top:2px;-webkit-backdrop-filter:blur(20px)saturate(1.5);background:var(--bg-blur);border-bottom:1px solid var(--border);align-items:center;gap:4px;height:52px;padding-inline:8px;transition:background .25s,transform .3s;display:flex;position:fixed;top:0;left:0;right:0}.topbar.hidden{transform:translateY(-100%)}.topbar-back{flex-shrink:0}.topbar-title{text-align:center;color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;flex:1;padding:0 8px;font-size:.82rem;font-weight:500;overflow:hidden}.topbar-actions{flex-shrink:0;align-items:center;gap:2px;display:flex}.icon-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;transition:background .15s,opacity .15s,transform .1s;display:flex}.icon-btn:hover{background:var(--sentence-hover)}.icon-btn:active{opacity:.7;transform:scale(.9)}.icon-btn.active{color:var(--accent)}.icon-btn:disabled{opacity:.3;cursor:default}.icon-btn:disabled:hover{background:0 0;transform:none}.reader{flex:1;width:100%;max-width:680px;margin:0 auto;padding:64px 16px 140px}@media (width>=640px){.reader{padding:72px 24px 140px}}.chapter-header{text-align:center;margin-bottom:40px}.chapter-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-size:.72rem;font-weight:500}.chapter-label-sep{opacity:.4;margin:0 8px}.chapter-title{letter-spacing:-.02em;font-size:1.5rem;font-weight:700;line-height:1.25}.chapter-ornament{color:var(--text-muted);letter-spacing:.2em;margin-top:16px;font-size:.8rem}.paragraph{text-align:justify;-webkit-hyphens:auto;hyphens:auto;margin-bottom:1.5em}.sentence{cursor:pointer;line-height:inherit;border-radius:3px;margin:0 -2px;padding:1px 2px;transition:background .15s,color .15s}.sentence:hover{background:var(--sentence-hover)}.sentence.active{background:var(--sentence-active-bg);color:var(--sentence-active-text)}.chapter-loading{flex-direction:column;gap:12px;padding-top:8px;display:flex}.skeleton-line{background:linear-gradient(90deg, var(--border) 25%, var(--bg-elevated) 50%, var(--border) 75%);background-size:200% 100%;border-radius:4px;height:1em;animation:1.4s infinite skeleton-shimmer}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.audio-bar{z-index:50;-webkit-backdrop-filter:blur(20px)saturate(1.5);background:var(--bg-blur);border-top:1px solid var(--border);transition:background .25s,transform .3s;position:fixed;bottom:0;left:0;right:0}.audio-bar.hidden{transform:translateY(100%)}.audio-bar-inner{grid-template-columns:1fr auto 1fr auto 1fr;place-items:center;max-width:480px;height:64px;margin:0 auto;padding-inline:8px;display:grid}.play-btn{background:var(--text);width:56px;height:56px;color:var(--bg);cursor:pointer;box-shadow:0 8px 24px -4px var(--accent-glow), 0 0 0 4px var(--bg);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:-14px;font-size:1.3rem;transition:transform .15s,opacity .15s,box-shadow .2s;display:flex}.play-btn:hover{box-shadow:0 12px 32px -4px var(--accent-glow), 0 0 0 4px var(--bg);transform:scale(1.05)}.play-btn:active{transform:scale(.93)}.play-btn:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none}.overlay{-webkit-backdrop-filter:blur(2px);z-index:80;background:#00000080;animation:.2s overlay-in;display:flex;position:fixed;inset:0}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.panel{background:var(--bg-elevated);flex-direction:column;width:min(320px,85vw);height:100%;display:flex;overflow-y:auto}.panel-left{margin-right:auto;animation:.22s slide-in-left}.panel-right{margin-left:auto;animation:.22s slide-in-right}@keyframes slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}.panel-header{border-bottom:1px solid var(--border);letter-spacing:.02em;background:var(--bg-elevated);z-index:1;justify-content:space-between;align-items:center;padding:16px 20px 12px;font-size:.9rem;font-weight:600;display:flex;position:sticky;top:0}.panel-body{flex:1;padding:12px}.chapter-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.chapter-list li{cursor:pointer;color:var(--text-dim);border-radius:8px;align-items:center;gap:8px;padding:9px 12px;font-size:.87rem;line-height:1.4;transition:background .12s,color .12s;display:flex}.chapter-list li:hover{background:var(--sentence-hover);color:var(--text)}.chapter-list li.active{background:var(--accent-bg);color:var(--text);font-weight:500}.chapter-list-num{color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:24px;font-size:.72rem}.bookmark-dot{color:var(--accent);flex-shrink:0;font-size:.7rem}.setting-group{margin-bottom:24px}.setting-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-size:.68rem;font-weight:600}.theme-swatches{gap:10px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:36px;height:36px;transition:border-color .15s,transform .15s}.swatch:hover{transform:scale(1.1)}.swatch-sang{background:#fafafa;box-shadow:inset 0 0 0 1px #0000001f}.swatch-toi{background:#0f0f11;box-shadow:inset 0 0 0 1px #ffffff26}.swatch-sepia{background:#f5efe0;box-shadow:inset 0 0 0 1px #3c2f1e26}.swatch.selected{border-color:var(--accent);transform:scale(1.08)}.stepper{background:var(--bg);border:1px solid var(--border);border-radius:10px;align-items:center;gap:0;display:flex;overflow:hidden}.stepper button{width:40px;height:36px;color:var(--text);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:1rem;transition:background .12s;display:flex}.stepper button:hover{background:var(--sentence-hover)}.stepper-value{text-align:center;color:var(--text-dim);border-left:1px solid var(--border);border-right:1px solid var(--border);flex:1;justify-content:center;align-items:center;height:36px;padding:0 4px;font-size:.85rem;display:flex}.setting-group select{background:var(--bg);width:100%;color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:10px;outline:none;padding:9px 12px;font-family:inherit;font-size:.9rem;transition:border-color .15s}.setting-group select:focus{border-color:var(--accent)}.setting-value-row{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.setting-value-hint{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.85rem}.setting-group input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.library{flex-direction:column;flex:1;height:100dvh;display:flex}.library-header{border-bottom:1px solid var(--border);background:var(--bg-blur);z-index:10;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.library-header-left{align-items:center;gap:12px;display:flex}.library-logo{font-size:1.5rem}.library-title{margin:0;font-size:1.25rem;font-weight:700}.library-header-right{align-items:center;gap:12px;display:flex}.add-book-btn{background:var(--accent);color:#fff;cursor:pointer;border-radius:99px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:opacity .2s,transform .1s;display:flex}.add-book-btn:hover{opacity:.9}.add-book-btn:active{transform:scale(.96)}.add-book-btn.disabled{opacity:.5;pointer-events:none}.library-body{flex:1;padding:24px;overflow-y:auto}.library-body.drag-over-body{background:var(--accent-bg)}.library-body.drag-over-body *{pointer-events:none}.book-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;max-width:1200px;margin:0 auto;display:grid}.book-card{background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;text-align:left;color:inherit;border-radius:16px;align-items:center;gap:16px;padding:16px;font-family:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.book-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px #0000001a}.book-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.book-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.book-title{white-space:nowrap;text-overflow:ellipsis;color:var(--text);font-size:.95rem;font-weight:600;overflow:hidden}.book-filename{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.book-progress-track{background:var(--border);border-radius:2px;height:4px;margin-top:6px;overflow:hidden}.book-progress-fill{border-radius:2px;height:100%}.book-progress-text{color:var(--text-dim);margin-top:2px;font-size:.7rem}.book-arrow{color:var(--text-muted);opacity:.3;transition:opacity .2s,transform .2s}.book-card:hover .book-arrow{opacity:1;transform:translate(2px)}.book-delete-btn{color:#fff;cursor:pointer;opacity:0;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:opacity .2s,background .2s;display:flex;position:absolute;top:8px;right:8px}.book-card:hover .book-delete-btn{opacity:1}.book-delete-btn:hover{background:#ef4444}.library-empty{text-align:center;cursor:pointer;border:2px dashed #0000;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px;transition:background .2s,border-color .2s;display:flex}.library-empty.drag-over{border-color:var(--accent);background:var(--accent-bg)}.library-empty-icon{opacity:.5;pointer-events:none;margin-bottom:16px;font-size:3rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.library-empty-text{color:var(--text-dim);pointer-events:none;margin-bottom:8px;font-size:1.25rem;font-weight:600}.library-empty-hint{color:var(--text-muted);pointer-events:none;font-size:.9rem}.library-loading{flex-wrap:wrap;gap:16px;padding:24px;display:flex}.skeleton-card{background:var(--border);border-radius:16px;width:280px;height:100px;animation:1.5s infinite pulse}.auth-screen{justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.auth-card{text-align:center;width:100%;max-width:340px}.auth-logo{margin-bottom:12px;font-size:2.5rem}.auth-title{margin-bottom:28px;font-size:1.3rem}.auth-form{flex-direction:column;gap:12px;display:flex}.auth-form input{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);border-radius:10px;padding:12px 14px;font-size:.95rem}.auth-form button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 14px;font-size:.95rem}.auth-form button:disabled{opacity:.5;cursor:default}.auth-sent{color:var(--text-dim);font-size:.92rem;line-height:1.6}.auth-error{color:#ef4444;text-align:center;margin:0;font-size:.9rem}.auth-subtitle{color:var(--text-dim);text-align:center;margin-top:-12px;margin-bottom:24px;font-size:.9rem}.auth-switch{text-align:center;color:var(--text-dim);margin-top:20px;font-size:.9rem}.auth-switch-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;font-size:.9rem;font-weight:600}.auth-switch-btn:hover{text-decoration:underline}.logout-btn{border:1px solid var(--border);width:100%;color:var(--text-dim);cursor:pointer;background:0 0;border-radius:10px;padding:10px 14px;font-size:.88rem}.logout-btn:hover{background:var(--sentence-hover);color:var(--text)}