*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;background:#f5f5f5;padding:20px}.header{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header h1{color:#333;margin-bottom:15px;font-size:24px}.file-upload{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.file-input-group{display:flex;flex-direction:column;gap:5px}.file-input-group label{font-size:14px;color:#666;font-weight:500}input[type=file]{padding:8px 12px;border:2px dashed #ddd;border-radius:6px;background:#fafafa;cursor:pointer;transition:all .3s}input[type=file]:hover{border-color:#4caf50;background:#f0f8f0}.load-btn{padding:10px 20px;background:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background .3s;align-self:flex-end}.load-btn:hover{background:#45a049}.load-btn:disabled{background:#ccc;cursor:not-allowed}.main-container{display:flex;gap:20px;height:calc(100vh - 280px);min-height:500px}.sidebar{width:280px;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;overflow:hidden}.content-area{flex:1;display:flex;flex-direction:column;gap:20px}.main-content{width:100%;display:flex;gap:20px;flex:1}.panel-header{padding:15px 20px;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-weight:500;color:#495057;display:flex;align-items:center;gap:12px;flex-shrink:0}.panel-upload{padding:15px 20px;background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.upload-label{font-size:13px;color:#666;font-weight:500;white-space:nowrap}.panel-upload input[type=file]{flex:1;min-width:200px;font-size:13px;padding:6px 10px}.load-btn-inline{padding:6px 16px;background:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:500;transition:background .3s;white-space:nowrap}.load-btn-inline:hover{background:#45a049}.load-btn-inline:disabled{background:#ccc;cursor:not-allowed}.transcript-upload-area{position:relative;flex:1;min-height:0;cursor:pointer;display:flex;flex-direction:column;overflow:hidden}.transcript-upload-area.has-content{cursor:default}.transcript-content{flex:1 1 0;min-height:0;padding:20px;overflow-y:auto;line-height:1.6}.transcript-upload-area .empty-state:hover{background:#f8f9fa}.transcript-upload-area .empty-state:hover svg{opacity:.8;transform:scale(1.05)}.video-panel,.transcript-panel{flex:1;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;overflow:hidden}.video-upload-area{position:relative;width:100%;min-height:200px;background:#000;cursor:pointer;display:flex;align-items:center;justify-content:center}.video-placeholder{text-align:center;color:#999;padding:40px 20px;transition:all .3s}.video-upload-area:hover .video-placeholder{color:#fff;transform:scale(1.05)}.video-placeholder svg{width:80px;height:80px;opacity:.6;margin-bottom:20px}.video-upload-area:hover .video-placeholder svg{opacity:1}.video-placeholder p{font-size:16px;margin:10px 0;font-weight:500}.upload-hint{font-size:13px;color:#666;display:block;margin-top:8px}video{width:100%;height:auto;max-height:45vh;object-fit:contain;background:#000;flex-shrink:0}.video-upload-area video{cursor:default;max-height:none;flex-shrink:1}.controls{flex-shrink:0}.transcript-item{margin-bottom:12px;padding:12px;border-radius:8px;transition:all .3s;cursor:pointer;border-left:4px solid transparent}.transcript-item:hover{background:#f8f9fa;border-left-color:#007bff}.transcript-item.current{background:#fff3cd;border-left-color:#ffc107;box-shadow:0 2px 8px #ffc1074d}.speaker{font-weight:600;color:#495057;margin-bottom:5px}.timestamp{color:#007bff;font-weight:500;cursor:pointer;text-decoration:none;padding:2px 6px;border-radius:4px;transition:all .2s;display:inline-block}.timestamp:hover{background:#e3f2fd;color:#0056b3}.content{color:#333;margin-top:5px}.controls{padding:15px 20px;background:#f8f9fa;border-top:1px solid #e9ecef;display:flex;flex-direction:column;gap:12px}.controls-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.search-row{width:100%}.search-panel{padding:15px 20px;background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;flex-direction:column;gap:10px;flex-shrink:0}.search-navigation{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #e0e0e0}.search-result-info{font-size:13px;color:#666;font-weight:500}.search-nav-buttons{display:flex;gap:8px}.search-nav-btn{padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s;white-space:nowrap}.search-nav-btn:hover{background:#0056b3}.search-nav-btn:disabled{background:#ccc;cursor:not-allowed}.speed-display{padding:8px 12px;background:#28a745;color:#fff;border-radius:4px;font-size:14px;font-weight:500;min-width:70px;text-align:center}.control-btn{padding:8px 15px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;transition:background .2s}.control-btn:hover{background:#0056b3}.control-btn.active{background:#28a745}#changeVideoBtn,#changeTranscriptBtn{background:#6c757d!important}#changeVideoBtn:hover,#changeTranscriptBtn:hover{background:#5a6268!important}.search-group{width:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search-nav-compact{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:2px 8px}.search-nav-btn-compact{padding:4px 8px;background:transparent;color:#007bff;border:none;border-radius:3px;cursor:pointer;font-size:16px;font-weight:700;transition:all .2s;min-width:28px}.search-nav-btn-compact:hover{background:#e7f3ff;color:#0056b3}.search-nav-btn-compact:active{background:#cce5ff}.search-count{font-size:12px;color:#666;font-weight:500;min-width:40px;text-align:center}.search-box{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.search-mode-buttons{display:flex;gap:5px}.search-mode-btn{padding:8px 12px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s}.search-mode-btn:hover{background:#5a6268}.search-mode-btn.active{background:#007bff}.search-mode-btn.show-all.active{background:#17a2b8}.search-mode-btn.show-matches.active{background:#fd7e14}.stats{font-size:12px;color:#666;padding:0 10px}.privacy-notice{background:#e7f3ff;border:1px solid #b3d9ff;border-radius:6px;padding:12px 16px;margin-bottom:15px;font-size:13px;color:#06c;display:flex;align-items:center;gap:8px}.privacy-notice .icon{font-size:16px;flex-shrink:0}.privacy-notice .text{line-height:1.4}.empty-state{text-align:center;padding:40px;color:#666}.empty-state svg{width:64px;height:64px;margin-bottom:16px;opacity:.3}.transcript-content::-webkit-scrollbar{width:8px}.transcript-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.transcript-content::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.transcript-content::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.sidebar-section{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin-bottom:15px;overflow:hidden}.sidebar-section:last-child{margin-bottom:0}.sidebar-header{padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-weight:600;color:#495057;font-size:14px;display:flex;align-items:center;gap:6px}.sidebar-content{padding:12px}.function-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:all .2s;font-size:13px;color:#495057}.function-item:hover{background:#f8f9fa;color:#007bff}.function-item.disabled{opacity:.5;cursor:not-allowed}.function-item.disabled:hover{background:transparent;color:#495057}.function-icon{font-size:16px;width:20px;text-align:center}.function-text{flex:1}.function-badge{background:#28a745;color:#fff;font-size:10px;padding:2px 5px;border-radius:10px;font-weight:500}.function-badge.soon{background:#ffc107;color:#212529}@media (max-width: 1200px){.sidebar{width:240px}}@media (max-width: 1024px){.main-container{flex-direction:column}.sidebar{width:100%;order:2}.main-content{flex:1;width:100%;order:1}.video-panel{order:-1}video{max-height:40vh}}@media (max-width: 768px){.main-content{flex:1;width:100%;flex-direction:column}.panel-upload{flex-direction:column;align-items:stretch;gap:8px}.panel-upload input[type=file]{min-width:100%}.search-panel .search-group{flex-direction:column;align-items:stretch}.search-panel .search-mode-buttons{width:100%;justify-content:stretch}.search-panel .search-mode-btn{flex:1}.search-group{flex-direction:column}.search-box{width:100%}.search-nav-compact{order:-1;width:100%;justify-content:center}.roadmap-inner{padding:15px}.roadmap-section-title{font-size:14px}.roadmap-item{padding:10px}.roadmap-item-title{font-size:14px}.roadmap-item-desc{font-size:13px}}.highlight{background:#ffeb3b!important;padding:2px 4px;border-radius:3px}.transcript-item.current-match{background:#e3f2fd!important;border-left:4px solid #2196f3!important;box-shadow:0 2px 8px #2196f34d}.roadmap-container{background:transparent;border-radius:0;box-shadow:none;margin:0;overflow:hidden;flex:1;display:flex;flex-direction:column}.roadmap-header{padding:12px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .3s;border-radius:10px 10px 0 0}.roadmap-header:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.roadmap-header h2{margin:0;font-size:16px;font-weight:600}.roadmap-toggle{font-size:18px;transition:transform .3s}.roadmap-toggle.collapsed{transform:rotate(-90deg)}.roadmap-content{max-height:1000px;overflow:hidden;transition:max-height .5s ease-out;flex:1;background:#fff;border-radius:0 0 10px 10px;border:1px solid #e9ecef;border-top:none}.roadmap-content.collapsed{max-height:0}.roadmap-inner{padding:16px;overflow-y:auto;max-height:calc(100vh - 300px)}.roadmap-section{margin-bottom:20px}.roadmap-section:last-child{margin-bottom:0}.roadmap-section-title{font-size:14px;font-weight:600;color:#333;margin-bottom:10px;display:flex;align-items:center;gap:6px}.roadmap-section-title .version{background:#007bff;color:#fff;padding:3px 6px;border-radius:3px;font-size:11px;font-weight:500}.roadmap-items{display:grid;gap:8px}.roadmap-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#f8f9fa;border-radius:6px;border-left:3px solid #28a745;transition:all .3s}.roadmap-item:hover{background:#e9ecef;transform:translate(3px)}.roadmap-item-icon{font-size:14px;flex-shrink:0;margin-top:1px}.roadmap-item-content{flex:1;min-width:0}.roadmap-item-title{font-weight:600;color:#495057;margin-bottom:2px;font-size:13px;line-height:1.3}.roadmap-item-desc{font-size:12px;color:#6c757d;line-height:1.3}.roadmap-current{border-left-color:#007bff;background:#e7f3ff}.roadmap-current:hover{background:#cce7ff}.roadmap-item.planning{border-left-color:#ffc107}.roadmap-item.future{border-left-color:#6c757d;background:#f8f9fa}.roadmap-item.future:hover{background:#e9ecef}@media (max-width: 768px){.roadmap-inner{padding:15px}.roadmap-section-title{font-size:14px}.roadmap-item{padding:10px}.roadmap-item-title{font-size:14px}.roadmap-item-desc{font-size:13px}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes slideUp{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000004d;max-width:600px;width:90%;max-height:80vh;overflow:hidden;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0}.modal-header h3{margin:0;font-size:20px;color:#333}.modal-close{background:none;border:none;font-size:28px;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.modal-close:hover{background:#f5f5f5;color:#333}.modal-body{padding:24px}.modal-body p{margin:0 0 16px;color:#666;font-size:14px}.export-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.export-option-btn{background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:16px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:all .2s}.export-option-btn:hover{border-color:#4caf50;background:#f0f8f0;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5033}.export-option-btn .icon{font-size:28px}.export-option-btn .name{font-weight:600;color:#333;font-size:15px}.export-option-btn .desc{font-size:12px;color:#999}@media (max-width: 600px){.export-options{grid-template-columns:1fr}}.footer{background:#fff;margin-top:30px;border-radius:10px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.footer-content{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:40px 30px;border-bottom:1px solid #e0e0e0}.footer-section h3{color:#333;font-size:16px;margin-bottom:15px;font-weight:600}.footer-section p{color:#666;font-size:14px;line-height:1.6;margin:0}.contact-list{list-style:none;padding:0;margin:0}.contact-list li{color:#666;font-size:14px;line-height:1.8;margin-bottom:8px}.contact-list a{color:#4caf50;text-decoration:none;transition:color .2s}.contact-list a:hover{color:#45a049;text-decoration:underline}.copyright{font-weight:600;color:#333!important;margin-bottom:8px!important}.license{font-size:13px!important;color:#999!important}.footer-bottom{background:#f8f9fa;padding:20px;text-align:center}.footer-bottom p{color:#999;font-size:13px;margin:0}@media (max-width: 768px){.footer-content{grid-template-columns:1fr;gap:25px;padding:30px 20px}.footer-section{text-align:left}}@media (max-width: 480px){.footer-content{padding:25px 15px}.footer-section h3{font-size:15px}.footer-section p,.contact-list li{font-size:13px}.video-upload-area{min-height:200px}.video-placeholder{padding:30px 15px}.video-placeholder svg{width:60px;height:60px}.video-placeholder p{font-size:14px}.upload-hint{font-size:12px}.panel-header{flex-wrap:wrap;gap:8px}#changeTranscriptBtn{margin-left:0!important;margin-right:0!important}}