*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--radius:12px;--radius-sm:8px;--safe-bottom:env(safe-area-inset-bottom,0px);--bg:#1a1a2e;--bg-card:#16213e;--bg-surface:#0f3460;--accent:#5dade2;--accent-hover:#3498db;--text-primary:#eee;--text-secondary:#88a;--text-dim:#557;--border:#2a2a4a;--hover-overlay:#ffffff14}[data-theme=light]{--bg:#f5f5f5;--bg-card:#fff;--bg-surface:#e8e8f0;--accent:#2e7d32;--accent-hover:#1b5e20;--text-primary:#1a1a1a;--text-secondary:#555;--text-dim:#999;--border:#d0d0d0;--hover-overlay:#00000014}[data-theme=khaki]{--bg:#f0e6c8;--bg-card:#f7f0dd;--bg-surface:#e0d4b0;--accent:#8b7355;--accent-hover:#6d5a42;--text-primary:#2a2218;--text-secondary:#5a5040;--text-dim:#9a8d78;--border:#c8b890;--hover-overlay:#00000014}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text-primary);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;display:flex}.install-banner{z-index:100;background:var(--bg-surface);border-bottom:1px solid var(--border);padding:16px;animation:.3s slideDown;position:fixed;top:0;left:0;right:0}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.install-banner-content{max-width:480px;margin:0 auto}.install-banner-content p{color:var(--text-secondary);margin-bottom:12px;font-size:14px}.install-banner-actions{gap:8px;display:flex}.header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:12px 16px;display:flex}.header-title{color:var(--accent);flex:1;font-size:20px;font-weight:700}.drawer-overlay{z-index:199;opacity:0;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.drawer-overlay.open{opacity:1}.queue-drawer{background:var(--bg-card);border-right:1px solid var(--border);z-index:200;flex-direction:column;width:320px;max-width:85vw;transition:transform .3s;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.queue-drawer.open{transform:translate(0)}.queue-drawer-header{padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;display:flex}.queue-drawer-title{color:var(--text-primary);flex:1;font-size:18px;font-weight:600}.queue-drawer-content{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.settings-drawer{background:var(--bg-card);width:280px;max-width:80vw;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));z-index:200;-webkit-overflow-scrolling:touch;transition:transform .3s;position:fixed;top:0;bottom:0;overflow-y:auto}.settings-drawer-right{border-left:1px solid var(--border);left:auto;right:0;transform:translate(100%)}.settings-drawer-right.open{transform:translate(0)}.settings-group{margin-bottom:16px}.settings-group:last-child{margin-bottom:0}.btn-update{background:var(--bg-surface);width:100%;color:var(--text-secondary);border:1px solid var(--border);font-size:13px}.btn-update:hover,.btn-update:active{background:var(--accent);color:#fff;border-color:var(--accent)}.update-status{color:var(--text-dim);text-align:center;min-height:0;margin-top:6px;font-size:12px}.update-status:empty{display:none}.settings-badge{text-align:center;border-top:1px solid var(--border);padding-top:8px}.build-badge{vertical-align:middle;border-radius:4px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:11px;line-height:20px;text-decoration:none;display:inline-flex;overflow:hidden}.build-badge-label{background:var(--bg-surface);color:var(--text-secondary);padding:0 8px}.build-badge-value{background:var(--accent);color:#fff;padding:0 8px;font-weight:600}.build-badge:hover .build-badge-value{background:var(--accent-hover)}.settings-label{color:var(--text-secondary);cursor:pointer;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;display:flex}.settings-value{color:var(--accent);font-weight:600}.settings-slider{appearance:none;background:var(--border);border-radius:2px;outline:none;width:100%;height:4px}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:20px;height:20px}.settings-select{background:var(--bg);width:100%;color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;padding:8px 12px;font-size:14px}.settings-select:focus{border-color:var(--accent)}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;min-height:44px;padding:10px 20px;font-size:14px;font-weight:600;transition:background .15s}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover,.btn-accent:active{background:var(--accent-hover)}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.icon-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;min-width:48px;min-height:48px;padding:8px;transition:background .15s;display:flex}.icon-btn:hover,.icon-btn:active{background:var(--hover-overlay)}.segment-control{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.segment-control .segment-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:4px;min-height:36px;padding:8px 12px;font-size:13px;font-weight:600;transition:background .15s,color .15s;display:flex}.segment-control .segment-btn+.segment-btn{border-left:1px solid var(--border)}.segment-control .segment-btn.active{background:var(--accent);color:#fff}.segment-control .segment-btn:not(.active):hover{background:var(--hover-overlay)}.segment-control.compact{border-radius:var(--radius-sm)}.segment-control.compact .segment-btn{min-height:28px;padding:4px 8px;font-size:12px}.main{-webkit-overflow-scrolling:touch;flex:1;padding:16px;overflow-y:auto}.input-section{max-width:480px;margin:0 auto;padding-top:24px}.url-input-group{gap:8px;margin-bottom:16px;display:flex}.url-input{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);resize:none;field-sizing:content;outline:none;flex:1;min-height:48px;max-height:200px;padding:12px 16px;font-family:inherit;font-size:16px;line-height:1.4;overflow:hidden auto}.url-input:focus{border-color:var(--accent)}.url-input::placeholder{color:var(--text-dim)}.go-btn{border-radius:var(--radius);flex-shrink:0;padding:12px 24px;font-size:16px;font-weight:700}.file-input-group{margin-bottom:16px}.file-btn{justify-content:center;align-items:center;gap:8px;width:100%;font-size:14px;display:flex}.divider{text-align:center;color:var(--text-dim);margin-top:8px;font-size:13px;position:relative}.divider:before,.divider:after{content:"";background:var(--border);width:30%;height:1px;position:absolute;top:50%}.divider:before{left:0}.divider:after{right:0}.loading-section{flex-direction:column;justify-content:center;align-items:center;padding:48px 16px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;margin-bottom:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-message{color:var(--text-secondary);font-size:14px}.error-section{text-align:center;padding:48px 16px}.error-message{color:var(--accent);margin-bottom:16px;font-size:15px;line-height:1.5}.article-section{max-width:640px;margin:0 auto}.article-meta{border-bottom:1px solid var(--border);margin-bottom:24px;padding-bottom:16px}.article-title{margin-bottom:8px;font-size:22px;font-weight:700;line-height:1.3}.article-info{color:var(--text-secondary);font-size:13px}.translate-link{color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer;background:0 0;margin-top:8px;padding:6px 12px;font-family:inherit;font-size:13px;transition:background .15s,color .15s;display:inline-block}.translate-link:hover,.translate-link:active{background:var(--accent);color:#fff}.article-text{padding-bottom:200px;line-height:1.7}.article-text h1,.article-text h2,.article-text h3,.article-text h4,.article-text h5,.article-text h6{color:var(--text-primary);margin-top:1.2em;margin-bottom:.5em;line-height:1.3}.article-text h2{font-size:1.3em}.article-text h3{font-size:1.15em}.article-text a{color:var(--accent);text-decoration:underline}.article-text img{border-radius:var(--radius-sm);max-width:100%;margin:8px 0}.article-text blockquote{border-left:3px solid var(--accent);color:var(--text-secondary);margin:8px 0;padding-left:12px}.article-text code{background:var(--bg-card);border-radius:3px;padding:2px 6px;font-size:.9em}.article-text pre{background:var(--bg-card);border-radius:var(--radius-sm);padding:12px;overflow-x:auto}.article-text ul,.article-text ol{margin:8px 0;padding-left:24px}.article-text li{margin-bottom:4px}.article-text hr{border:none;border-top:1px solid var(--border);margin:16px 0}.article-text .paragraph{border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;-webkit-user-select:text;user-select:text;margin-bottom:4px;padding:8px 12px;font-size:15px;transition:color .2s,background .2s}.article-text .paragraph.active{color:var(--text-primary);background:var(--bg-card);font-size:17px}.article-text .paragraph.past{color:var(--text-secondary)}.player-controls{background:var(--bg-card);border-top:1px solid var(--border);padding:8px 16px calc(8px + var(--safe-bottom));z-index:50;position:fixed;bottom:0;left:0;right:0}.progress-bar-container{margin-bottom:4px}.progress-bar{background:var(--border);cursor:pointer;border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:2px;width:0%;height:100%;transition:width .3s}.progress-info{justify-content:flex-end;margin-top:2px;display:flex}.progress-text{color:var(--text-dim);font-size:11px}.playback-controls{justify-content:center;align-items:center;gap:6px;margin-bottom:4px;display:flex}.play-btn{border-radius:50%;width:64px;height:64px;background:var(--accent)!important;color:#fff!important}.play-btn:hover,.play-btn:active{background:var(--accent-hover)!important}.nav-segment .segment-btn{min-width:44px;min-height:44px;padding:8px}.speed-controls{justify-content:center;margin-bottom:4px;display:flex}.hidden{display:none!important}.main::-webkit-scrollbar{width:4px}.main::-webkit-scrollbar-track{background:0 0}.main::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@media (width>=768px){.main{width:100%;max-width:720px;margin:0 auto}.player-controls{border-radius:var(--radius) var(--radius) 0 0;max-width:720px;margin:0 auto;left:50%;transform:translate(-50%)}}.queue-btn-wrap{position:relative}.badge{background:var(--accent);color:#fff;text-align:center;pointer-events:none;border-radius:9px;min-width:18px;height:18px;padding:0 4px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:2px;right:2px}.chapters-btn{min-width:44px;min-height:44px;color:var(--accent);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:0;font-family:inherit;transition:background .15s,color .15s,opacity .15s;display:flex}.chapters-btn:hover,.chapters-btn:active{background:var(--hover-overlay)}.chapters-btn:disabled{opacity:.35;pointer-events:none;color:var(--text-dim);border-color:var(--border)}.chapters-sheet{background:var(--bg-card);border-top:1px solid var(--border);z-index:201;border-radius:16px 16px 0 0;flex-direction:column;max-height:70vh;transition:transform .3s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.chapters-sheet.open{transform:translateY(0)}.chapters-sheet-handle{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:12px 16px;display:flex}.chapters-sheet-title{color:var(--text-primary);flex:1;font-size:16px;font-weight:600}.list-filter-input{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;flex-shrink:0;width:120px;padding:6px 10px;font-family:inherit;font-size:13px}.list-filter-input:focus{border-color:var(--accent)}.list-filter-input::placeholder{color:var(--text-dim)}.list-filter-input::-webkit-search-decoration{display:none}.chapters-sheet-content{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.chapters-list{margin:0;padding:0;list-style:none}.chapter-item{border-bottom:1px solid var(--border);cursor:pointer;color:var(--text-primary);align-items:center;gap:8px;padding:10px 16px;font-size:14px;transition:background .15s;display:flex}.chapter-item:hover{background:var(--hover-overlay)}.chapter-item[data-level="2"]{padding-left:32px}.chapter-item[data-level="3"]{color:var(--text-secondary);padding-left:48px;font-size:13px}.chapter-item[data-level="4"],.chapter-item[data-level="5"],.chapter-item[data-level="6"]{color:var(--text-dim);padding-left:64px;font-size:12px}@media (width>=768px){.chapters-sheet{max-width:720px;left:50%;right:auto;transform:translateY(100%)translate(-50%)}.chapters-sheet.open{transform:translateY(0)translate(-50%)}}.queue-empty{text-align:center;color:var(--text-dim);padding:40px 24px}.queue-empty p:first-child{color:var(--text-secondary);margin-bottom:8px;font-size:16px}.queue-list{margin:0;padding:0;list-style:none}.queue-item{border-bottom:1px solid var(--border);cursor:pointer;align-items:center;gap:12px;min-height:56px;padding:12px 16px;transition:background .15s;display:flex}.queue-item:hover{background:var(--hover-overlay)}.queue-item.playing{border-left:3px solid var(--accent);padding-left:13px}.queue-item-indicator{background:var(--border);border-radius:1px;flex-shrink:0;width:2px;min-height:28px}.queue-item.playing .queue-item-indicator{text-align:center;width:24px;min-height:auto;color:var(--accent);background:0 0;border-radius:0}.queue-item-info{flex:1;min-width:0}.queue-item-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.queue-item.playing .queue-item-title{color:var(--accent);font-weight:600}.queue-item-meta{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12px;overflow:hidden}.queue-item-actions{flex-shrink:0;gap:4px;display:flex}.queue-item-actions .icon-btn{width:36px;height:36px}.queue-drag-handle{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;opacity:.4;flex-shrink:0;justify-content:center;align-items:center;width:28px;transition:opacity .15s;display:flex}.queue-drag-handle:hover,.queue-drag-handle:active{opacity:.8}.queue-drag-handle:active{cursor:grabbing}.queue-item-dragging{opacity:.9;background:var(--bg);border-radius:8px;box-shadow:0 4px 20px #0000004d}.queue-item-placeholder{opacity:.3}.queue-list.reordering{-webkit-user-select:none;user-select:none}.eq-bars{align-items:flex-end;gap:2px;width:16px;height:16px;display:flex}.eq-bar{background:var(--accent);transform-origin:bottom;border-radius:1px;width:3px;height:100%}@keyframes eq-bar{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media (prefers-reduced-motion:no-preference){.eq-bar:first-child{animation:.8s ease-in-out infinite eq-bar}.eq-bar:nth-child(2){animation:.8s ease-in-out .2s infinite eq-bar}.eq-bar:nth-child(3){animation:.8s ease-in-out .4s infinite eq-bar}}@media (prefers-reduced-motion:reduce){.eq-bar:first-child{transform:scaleY(.6)}.eq-bar:nth-child(2){transform:scaleY(1)}.eq-bar:nth-child(3){transform:scaleY(.4)}}.snackbar{padding:12px 16px;padding-bottom:calc(12px + var(--safe-bottom));background:var(--bg-surface);border-top:1px solid var(--border);z-index:300;align-items:center;gap:8px;transition:transform .25s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.snackbar.visible{transform:translateY(0)}.snackbar-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.btn-text{color:var(--accent);cursor:pointer;white-space:nowrap;border-radius:var(--radius);background:0 0;border:none;padding:8px 12px;font-size:13px;font-weight:600}.btn-text:hover{background:var(--hover-overlay)}.next-article-row{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;text-align:center;padding:4px 16px 2px;font-size:12px;overflow:hidden}.next-article-row:hover{color:var(--accent)}