*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0f0f0f;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.header{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f0f0fd9;border-bottom:1px solid #1f1f1f;position:sticky;top:0}.header-inner{max-width:860px;margin:0 auto;padding:14px 24px}.logo{color:#fff;align-items:center;gap:10px;font-size:15px;font-weight:600;display:flex}.main{flex-direction:column;gap:24px;max-width:860px;margin:0 auto;padding:48px 24px 80px;display:flex}.hero-section{text-align:center;padding:8px 0 12px}.title{color:#fff;letter-spacing:-.5px;margin-bottom:10px;font-size:32px;font-weight:700}.subtitle{color:#666;font-size:14px;line-height:1.6}.input-card{background:#161616;border:1px solid #232323;border-radius:14px;padding:20px}.input-row{gap:10px;display:flex}.input-wrapper{flex:1;align-items:center;display:flex;position:relative}.input-icon{pointer-events:none;flex-shrink:0;position:absolute;left:14px}.url-input{color:#e0e0e0;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:10px;outline:none;width:100%;padding:12px 40px 12px 42px;font-size:14px;transition:border-color .15s}.url-input:focus{border-color:#444}.url-input::placeholder{color:#444}.url-input:disabled{opacity:.5}.clear-btn{color:#555;cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;padding:4px;transition:color .15s;display:flex;position:absolute;right:10px}.clear-btn:hover{color:#aaa}.extract-btn{color:#fff;cursor:pointer;white-space:nowrap;background:red;border:none;border-radius:10px;align-items:center;gap:8px;padding:12px 22px;font-size:14px;font-weight:600;transition:background .15s,opacity .15s;display:flex}.extract-btn:hover:not(:disabled){background:#c00}.extract-btn:disabled{opacity:.4;cursor:not-allowed}.input-hint{color:#444;margin-top:10px;font-size:12px}.input-hint.warning{color:#f59e0b}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin}.loading-card{background:#161616;border:1px solid #232323;border-radius:14px;align-items:center;gap:20px;padding:32px 24px;display:flex}.loading-spinner{border:3px solid #2a2a2a;border-top-color:red;border-radius:50%;flex-shrink:0;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{flex-direction:column;gap:4px;display:flex}.loading-main{color:#e0e0e0;font-size:15px;font-weight:500}.loading-sub{color:#555;font-size:12px}.error-card{color:#f87171;background:#ef444414;border:1px solid #ef444440;border-radius:14px;align-items:flex-start;gap:12px;padding:16px 20px;font-size:14px;line-height:1.6;display:flex}.error-card svg{flex-shrink:0;margin-top:1px}.result-card{background:#161616;border:1px solid #232323;border-radius:14px;overflow:hidden}.video-info{background:#111;border-bottom:1px solid #1f1f1f;align-items:flex-start;gap:10px;padding:16px 20px;display:flex}.video-info svg{flex-shrink:0;margin-top:2px}.video-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.video-title{color:#ccc;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.video-author,.video-duration{color:#555;font-size:12px}.result-toolbar{border-bottom:1px solid #1f1f1f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.toolbar-left{align-items:center;gap:10px;display:flex}.toolbar-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.method-badge{border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.method-badge.captions{color:#4ade80;background:#22c55e1f;border:1px solid #22c55e33}.method-badge.whisper{color:#a78bfa;background:#8b5cf61f;border:1px solid #8b5cf633}.word-count{color:#555;font-size:12px}.toggle-label{cursor:pointer;color:#888;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:12px;display:flex}.toggle-label input{display:none}.toggle-track{background:#2a2a2a;border-radius:9px;flex-shrink:0;width:32px;height:18px;transition:background .2s;position:relative}.toggle-label input:checked~.toggle-track{background:red}.toggle-thumb{background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle-label input:checked~.toggle-track .toggle-thumb{transform:translate(14px)}.action-btn{color:#aaa;cursor:pointer;background:#1f1f1f;border:1px solid #2a2a2a;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;transition:background .15s,color .15s;display:inline-flex}.action-btn:hover{color:#fff;background:#2a2a2a}.search-bar{background:#111;border-bottom:1px solid #1f1f1f;align-items:center;gap:10px;padding:10px 20px;display:flex}.search-bar input{color:#ccc;background:0 0;border:none;outline:none;flex:1;font-size:13px}.search-bar input::placeholder{color:#444}.search-count{color:#555;white-space:nowrap;font-size:11px}.transcript-body{max-height:520px;padding:20px;overflow-y:auto}.transcript-body::-webkit-scrollbar{width:6px}.transcript-body::-webkit-scrollbar-track{background:0 0}.transcript-body::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px}.full-text{color:#ccc;white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.8}.segments{flex-direction:column;gap:4px;display:flex}.segment{border-radius:8px;align-items:baseline;gap:12px;padding:7px 10px;transition:background .1s;display:flex}.segment:hover{background:#1a1a1a}.segment.highlight{background:#ffc80012}.timestamp-badge{color:red;text-align:center;background:#ff000014;border-radius:4px;flex-shrink:0;min-width:52px;padding:2px 7px;font-family:SF Mono,Fira Code,monospace;font-size:11px}.seg-text{color:#ccc;font-size:14px;line-height:1.6}.no-results{text-align:center;color:#555;padding:40px 0;font-size:14px}@media (width<=600px){.main{padding:32px 16px 60px}.title{font-size:24px}.input-row{flex-direction:column}.extract-btn{justify-content:center;width:100%}.result-toolbar{flex-direction:column;align-items:flex-start}}