:root{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--bg-hover: #333333;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--text-muted: #666666;--accent: #4fc3f7;--accent-hover: #81d4fa;--accent-dim: rgba(79, 195, 247, .15);--border: #333333;--error: #ef5350;--success: #66bb6a;--radius: 8px;--radius-sm: 4px;--shadow: 0 4px 20px rgba(0, 0, 0, .4);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-chinese: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#root{height:100%}.page{min-height:100%;padding:16px;padding-top:env(safe-area-inset-top,16px);padding-bottom:env(safe-area-inset-bottom,16px)}.home-page{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(60px + env(safe-area-inset-top,0px));gap:24px;padding-bottom:40px}.home-header{text-align:center}.home-header h1{font-size:32px;font-weight:700;letter-spacing:-.5px}.subtitle{color:var(--text-secondary);margin-top:4px;font-size:14px}.url-form{width:100%;max-width:500px;display:flex;flex-direction:column;gap:12px}.url-input{width:100%;padding:14px 16px;font-size:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);outline:none;transition:border-color .2s}.url-input:focus{border-color:var(--accent)}.url-input::placeholder{color:var(--text-muted)}.btn{padding:12px 20px;font-size:15px;font-weight:500;border:none;border-radius:var(--radius);cursor:pointer;transition:background .2s,opacity .2s;color:var(--text-primary);background:var(--bg-tertiary)}.btn:active{opacity:.8}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#000;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-back{padding:8px 12px;font-size:14px}.track-list{width:100%;max-width:500px}.track-list h2{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--text-secondary)}.track-grid{display:flex;flex-direction:column;gap:8px}.track-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:background .2s,border-color .2s;color:var(--text-primary);font-size:15px}.track-item:hover{background:var(--bg-hover);border-color:var(--accent)}.track-lang{color:var(--text-muted);font-size:13px;font-family:monospace}.home-section{width:100%;max-width:500px}.channel-form{display:flex;gap:8px;margin-bottom:16px}.channel-form .url-input{flex:1}.channel-form .btn{white-space:nowrap}.channel-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.channel-card{display:flex;align-items:center;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.channel-card-main{flex:1;display:flex;align-items:center;gap:12px;padding:10px 14px;background:none;border:none;cursor:pointer;color:var(--text-primary);text-align:left}.channel-card-main:hover{background:var(--bg-hover)}.channel-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}.channel-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);color:var(--text-muted);font-size:16px;font-weight:600}.channel-card-name{font-size:15px;font-weight:500}.channel-card-remove{padding:12px 14px;font-size:18px;color:var(--text-muted);background:none;border:none;border-left:1px solid var(--border);cursor:pointer}.channel-card-remove:hover{color:var(--error);background:var(--bg-hover)}.channel-detail{display:flex;flex-direction:column;gap:12px}.channel-detail-name{font-size:18px;font-weight:600}.browse-loading,.browse-empty{text-align:center;color:var(--text-muted);font-size:14px;padding:20px 0}.video-card-author,.video-card-meta{font-size:12px;color:var(--text-muted)}.sort-bar{display:flex;gap:6px;margin-bottom:12px;padding:0 2px}.sort-btn{padding:5px 12px;font-size:13px;border-radius:16px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer}.sort-btn.active{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.error-message{color:var(--error);font-size:14px;text-align:center}.loading{text-align:center;color:var(--text-secondary);padding-top:100px;font-size:15px}.study-page{padding:0;display:flex;flex-direction:column;height:100%}.study-header{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center}.btn-settings{padding:8px 12px;font-size:18px;line-height:1}.settings-dropdown{position:relative;z-index:100;margin:0 16px 8px;padding:12px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--text-secondary)}.btn-close{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}.btn-close:hover{color:var(--text-primary)}.settings-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:var(--text-primary);cursor:pointer}.settings-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.video-container{width:100%;max-height:50vh;background:#000}.video-player{width:100%;aspect-ratio:16 / 9;max-height:50vh}.video-player iframe{width:100%;height:100%;display:block}.caption-container{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}.caption-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--radius);background:var(--bg-secondary);border:1px solid transparent;cursor:pointer}.caption-line:hover{background:var(--bg-hover)}.caption-line.active{background:var(--accent-dim);border-color:var(--accent)}.caption-text{font-family:var(--font-chinese);font-size:20px;line-height:1.6;letter-spacing:.5px}.caption-word{cursor:default;border-radius:2px;transition:background .15s}.caption-word.has-definition{cursor:pointer}.caption-word.has-definition:hover{background:var(--accent-dim);color:var(--accent)}.caption-time{font-size:12px;color:var(--text-muted);white-space:nowrap;padding-top:4px;font-family:monospace}.caption-empty{text-align:center;color:var(--text-muted);padding-top:40px}.word-popup{z-index:1000;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;max-width:320px;min-width:200px;max-height:33vh;display:flex;flex-direction:column;overflow:hidden;position:relative;animation:popup-in .15s ease-out}@keyframes popup-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.popup-header{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-shrink:0}.popup-word{font-family:var(--font-chinese);font-size:24px;font-weight:600}.popup-traditional{font-family:var(--font-chinese);font-size:16px;color:var(--text-muted)}.popup-pinyin{font-size:14px;color:var(--accent);margin-bottom:8px;flex-shrink:0}.popup-definitions{display:flex;flex-direction:column;gap:4px;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}.popup-def{font-size:13px;color:var(--text-secondary);line-height:1.4}.popup-def:before{content:"• ";color:var(--text-muted)}.popup-scroll-cue{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;background:linear-gradient(to top,var(--bg-secondary) 35%,transparent);pointer-events:none}.popup-scroll-cue span{font-size:18px;line-height:1;color:var(--accent);animation:popup-scroll-bounce 1.4s ease-in-out infinite}@keyframes popup-scroll-bounce{0%,to{transform:translateY(0);opacity:.7}50%{transform:translateY(3px);opacity:1}}@media (prefers-reduced-motion: reduce){.popup-scroll-cue span{animation:none}}.auth-shell{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}.auth-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:20px}.brand{text-align:center}.brand-name{font-size:28px;font-weight:700;letter-spacing:-.5px}.brand-tag{text-align:center;color:var(--text-secondary);font-size:14px}.tabs{display:flex;gap:4px;background:var(--bg-secondary);border-radius:var(--radius);padding:4px}.tab{flex:1;padding:10px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}.tab.active{background:var(--bg-tertiary);color:var(--text-primary)}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-secondary)}.auth-form input{padding:12px 14px;font-size:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);outline:none;transition:border-color .2s}.auth-form input:focus{border-color:var(--accent)}.hint{font-size:12px;color:var(--text-muted)}.msg{font-size:13px;text-align:center;padding:8px;border-radius:var(--radius-sm)}.msg.error{color:var(--error);background:#ef53501a}.msg.ok{color:var(--success);background:#66bb6a1a}.confirm-lead{font-size:14px;color:var(--text-secondary);line-height:1.5}.notice{font-size:13px;color:var(--text-muted);padding:10px 12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);line-height:1.5}.notice code{font-size:12px;color:var(--text-secondary)}.confirm-actions{display:flex;justify-content:center;gap:16px}.btn-link{background:none;border:none;color:var(--accent);font-size:13px;cursor:pointer;padding:4px}.btn-link:hover{color:var(--accent-hover)}.home-nav{position:absolute;top:max(16px,env(safe-area-inset-top,16px));left:16px;right:max(16px,env(safe-area-inset-right,16px));display:flex;align-items:center;justify-content:space-between}.nav-tabs{display:flex;gap:4px}.nav-tab{padding:6px 12px;font-size:13px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}.nav-tab.active{color:var(--text-primary);border-color:var(--accent);background:var(--accent-dim)}.btn-signout{padding:6px 12px;font-size:13px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}.btn-signout:hover{color:var(--text-primary);border-color:var(--text-muted)}.browse-page{display:flex;flex-direction:column;align-items:center;padding-top:60px;gap:20px}.browse-loading{color:var(--text-secondary);font-size:15px}.channel-checking{color:var(--text-muted);font-size:13px;margin-bottom:8px}.browse-empty{color:var(--text-muted);font-size:15px}.browse-channel-name{font-size:14px;color:var(--text-secondary);font-weight:500}.video-grid{width:100%;max-width:900px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:0 8px}.video-card{display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s;text-align:left;color:var(--text-primary)}.video-card:hover{border-color:var(--accent);transform:translateY(-2px)}.video-card-thumb{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden}.video-card-thumb img{width:100%;height:100%;object-fit:cover}.caption-badge{position:absolute;bottom:6px;right:6px;padding:2px 6px;font-size:11px;font-weight:600;border-radius:var(--radius-sm)}.caption-badge.available{background:var(--accent);color:#000}.caption-badge.whisper{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}.caption-badge.queued{background:#2d3748;color:#a0aec0}.video-card-no-captions{opacity:.5}.video-card-no-captions:hover{opacity:.75}.video-card-queued{opacity:.7}.video-card-queued:hover{opacity:.85}.video-card-checking{opacity:.6;pointer-events:none}.caption-badge.checking{background:#2b4c7e;color:#63b3ed;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.video-card-info{padding:12px;display:flex;flex-direction:column;gap:6px}.video-card-title{font-size:14px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-card-meta{display:flex;gap:12px;font-size:12px;color:var(--text-muted)}.queue-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.queue-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;gap:12px}.queue-item-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.queue-item-thumb{width:48px;height:27px;object-fit:cover;border-radius:4px;flex-shrink:0}.queue-item-info{display:flex;flex-direction:column;gap:2px;min-width:0}.queue-item-title{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item-author{font-size:12px;color:var(--text-muted)}.queue-item-time{font-size:11px;color:var(--text-muted)}.queue-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}.queue-badge-queued{background:#2d3748;color:#a0aec0}.queue-badge-processing{background:#2b4c7e;color:#63b3ed}.queue-badge-done{background:#1c4532;color:#68d391}.queue-badge-failed{background:#4a2020;color:#fc8181}.queue-refresh{margin-top:8px;font-size:13px}