*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f7fa;color:#333}.App{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;padding:2rem 1rem}.app-header h1{font-size:2.5rem;margin-bottom:.5rem}.app-header p{font-size:1.1rem;opacity:.9}.tab-navigation{display:flex;background:#fff;border-bottom:1px solid #e1e8ed;overflow-x:auto}.tab-navigation button{flex:1;padding:1rem 2rem;border:none;background:none;cursor:pointer;font-size:1rem;transition:all .3s ease;white-space:nowrap}.tab-navigation button:hover{background-color:#f8f9fa}.tab-navigation button.active{background-color:#667eea;color:#fff}.app-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.tab-content{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000001a}.caption-controls{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.manual-caption-form{display:flex;flex:1;gap:.5rem}.caption-input{flex:1;padding:.75rem;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem}.caption-input:focus{outline:none;border-color:#667eea}.test-btn,.manual-caption-form button{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:background .3s ease}.test-btn:hover,.manual-caption-form button:hover{background:#5a6fd8}.test-btn:disabled,.manual-caption-form button:disabled{background:#ccc;cursor:not-allowed}.caption-display{border:2px solid #e1e8ed;border-radius:12px;overflow:hidden}.caption-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8f9fa;border-bottom:1px solid #e1e8ed}.connection-status{display:flex;align-items:center;gap:1rem}.connection-status .connected{color:#28a745;font-weight:700}.connection-status .disconnected{color:#dc3545;font-weight:700}.clear-btn{padding:.5rem 1rem;background:#dc3545;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem}.caption-container{max-height:400px;overflow-y:auto;padding:1rem}.no-captions{text-align:center;color:#666;font-style:italic;padding:2rem}.caption-item{display:flex;gap:.5rem;margin-bottom:1rem;padding:.75rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea}.caption-time{color:#666;font-size:.9rem;white-space:nowrap}.caption-text{flex:1}.caption-lang{color:#667eea;font-size:.9rem}.audio-recorder{text-align:center}.permission-btn{padding:1rem 2rem;background:#28a745;color:#fff;border:none;border-radius:12px;font-size:1.1rem;cursor:pointer;margin:2rem 0}.recording-controls{margin:2rem 0}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;font-size:1.2rem}.red-dot{width:12px;height:12px;background:#dc3545;border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.control-buttons{margin:2rem 0}.start-btn,.stop-btn{padding:1rem 2rem;border:none;border-radius:12px;font-size:1.2rem;cursor:pointer;min-width:200px}.start-btn{background:#28a745;color:#fff}.stop-btn{background:#dc3545;color:#fff}.recorded-audio{margin-top:2rem;padding:1rem;background:#f8f9fa;border-radius:8px}.recorded-audio h4{margin-bottom:1rem}.recorded-audio audio{width:100%;max-width:400px}.qna-form{margin-bottom:2rem}.input-group{margin-bottom:1rem}.input-group label{display:block;margin-bottom:.5rem;font-weight:700}.input-group textarea,.input-group input{width:100%;padding:.75rem;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem}.input-group textarea{resize:vertical;min-height:80px}.button-group{display:flex;gap:1rem;flex-wrap:wrap}.button-group button{padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s ease}.button-group button[type=submit]{background:#667eea;color:#fff}.button-group button[type=button]{background:#6c757d;color:#fff}.button-group button:disabled{background:#ccc;cursor:not-allowed}.current-answer{margin:2rem 0;padding:1rem;background:#e8f5e8;border-radius:8px;border-left:4px solid #28a745}.answer-box{background:#fff;padding:1rem;border-radius:6px;margin-top:.5rem}.qna-history{margin-top:2rem}.history-item{padding:1rem;background:#f8f9fa;border-radius:8px;margin-bottom:1rem;border-left:4px solid #667eea}.history-time{color:#666;font-size:.9rem;margin-bottom:.5rem}.history-question,.history-answer{margin-bottom:.5rem}.file-uploader{text-align:center}.upload-area{margin:2rem 0;padding:2rem;border:2px dashed #ccc;border-radius:12px;transition:border-color .3s ease}.upload-area:hover{border-color:#667eea}.file-input{width:100%;padding:1rem;font-size:1rem;border:2px solid #e1e8ed;border-radius:8px;margin-bottom:1rem}.file-info{background:#f8f9fa;padding:1rem;border-radius:8px;margin-top:1rem}.file-details{margin-bottom:1rem;text-align:left}.file-details div{margin-bottom:.5rem}.upload-btn{padding:.75rem 2rem;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem}.upload-btn:disabled{background:#ccc;cursor:not-allowed}.upload-status{margin-top:1rem;padding:1rem;border-radius:8px;font-weight:700}.upload-status.success{background:#d4edda;color:#155724}.upload-status.error{background:#f8d7da;color:#721c24}.upload-status.info{background:#d1ecf1;color:#0c5460}.upload-tips{margin-top:2rem;padding:1rem;background:#fff3cd;border-radius:8px;text-align:left}.upload-tips ul{margin:1rem 0;padding-left:2rem}.upload-tips li{margin-bottom:.5rem}.app-footer{background:#f8f9fa;text-align:center;padding:1rem;border-top:1px solid #e1e8ed;margin-top:auto}@media (max-width: 768px){.app-header h1{font-size:2rem}.tab-navigation button{padding:.75rem 1rem;font-size:.9rem}.app-main,.tab-content{padding:1rem}.caption-controls{flex-direction:column}.button-group{justify-content:center}.control-buttons .start-btn,.control-buttons .stop-btn{min-width:auto;width:100%}}.session-control{margin-top:1rem}.session-input{margin-left:.5rem;padding:.25rem .5rem;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:#ffffff1a;color:#fff}.caption-item.translation{border-left-color:#28a745;background:#f8fff9}.caption-content{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.caption-actions{margin-left:auto;display:flex;gap:.25rem}.translate-btn{padding:.25rem .5rem;border:none;background:#f8f9fa;border-radius:4px;cursor:pointer;font-size:.9rem}.translate-btn:hover{background:#e9ecef}.translate-btn:disabled{opacity:.6;cursor:not-allowed}.caption-confidence,.caption-session{font-size:.8rem;color:#666;background:#f8f9fa;padding:.2rem .4rem;border-radius:4px}.translation-badge{background:#28a745;color:#fff;font-size:.7rem;padding:.2rem .4rem;border-radius:4px}.answer-metadata{margin-top:.5rem;color:#666}.vote-section{margin-left:.5rem}.vote-btn{margin:0 .25rem;padding:.25rem .5rem;border:none;border-radius:4px;cursor:pointer;font-size:.8rem}.vote-btn.helpful{background:#d4edda;color:#155724}.vote-btn.not-helpful{background:#f8d7da;color:#721c24}.vote-btn.small{padding:.15rem .3rem;font-size:.7rem}.vote-btn:disabled{opacity:.6;cursor:not-allowed}.voted-indicator{color:#28a745;font-weight:700}.history-metadata{margin-top:.5rem}.analytics-dashboard{text-align:center}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin:2rem 0}.analytics-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:12px;text-align:center}.analytics-number{font-size:3rem;font-weight:700;margin-bottom:.5rem}.analytics-label{font-size:1.1rem;opacity:.9}.top-qas{margin:2rem 0;text-align:left}.qas-list{background:#f8f9fa;border-radius:8px;padding:1rem}.qa-leaderboard-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid #e1e8ed}.qa-leaderboard-item:last-child{border-bottom:none}.rank{font-weight:700;color:#667eea;min-width:3rem}.qa-id{flex:1;font-family:monospace;font-size:.9rem;color:#666}.votes{font-weight:700;color:#28a745}.analytics-info{margin-top:2rem;color:#666}.search-component{max-width:800px;margin:0 auto}.search-controls{background:#f8f9fa;padding:1.5rem;border-radius:12px;margin-bottom:2rem}.search-type-selector{display:flex;gap:2rem;margin-bottom:1rem}.search-type-selector label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.search-form{display:flex;flex-direction:column;gap:1rem}.search-input-group{display:flex;gap:.5rem}.search-input{flex:1;padding:.75rem;border:2px solid #e1e8ed;border-radius:8px;font-size:1rem}.search-filters{display:flex;gap:.5rem;flex-wrap:wrap}.search-filters input{padding:.5rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem}.clear-search-btn{padding:.5rem 1rem;background:#6c757d;color:#fff;border:none;border-radius:6px;cursor:pointer;align-self:flex-start}.search-results{margin-top:2rem}.results-list{display:flex;flex-direction:column;gap:1rem}.result-item{background:#fff;border:1px solid #e1e8ed;border-radius:8px;padding:1rem}.result-text,.result-question{font-size:1.1rem;margin-bottom:.5rem}.result-answer{margin-bottom:.5rem;color:#333}.result-metadata{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#666}.result-metadata span{background:#f8f9fa;padding:.2rem .5rem;border-radius:4px}.no-results{text-align:center;color:#666;font-style:italic;margin:2rem 0}.loading{text-align:center;color:#666;font-style:italic;padding:2rem}.permission-section{text-align:center;padding:2rem;background:#f8f9fa;border-radius:12px;margin:1rem 0}.processing-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;font-size:1.1rem;color:#667eea;font-weight:700}.audio-info{margin-top:1rem;padding:1rem;background:#f8f9fa;border-radius:8px}.audio-info p{margin-bottom:.5rem}.transcription-result{margin-top:2rem;padding:1.5rem;border-radius:12px;border:2px solid #e1e8ed}.transcription-success{background:#d4edda;border-color:#c3e6cb}.transcription-error{background:#f8d7da;border-color:#f5c6cb}.transcription-text{font-size:1.1rem;margin-bottom:1rem;padding:1rem;background:#fff;border-radius:8px;border-left:4px solid #28a745}.transcription-metadata{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem;margin-bottom:1rem}.transcription-metadata p{background:#ffffffb3;padding:.5rem;border-radius:6px;margin:0;font-size:.9rem}.success-note{text-align:center;font-weight:700;color:#155724;background:#fffc;padding:.75rem;border-radius:8px;margin-top:1rem}.recorder-info{margin-top:2rem;padding:1rem;background:#e3f2fd;border-radius:12px}.recorder-info ul{margin:1rem 0;padding-left:1.5rem}.recorder-info li{margin-bottom:.5rem}.debug-info{background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;padding:1rem;margin-bottom:2rem}.debug-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.debug-item{background:#fff;padding:.75rem;border-radius:6px;border-left:4px solid #007bff}.search-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.test-search-btn,.refresh-debug-btn{padding:.5rem 1rem;background:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem}.test-search-btn:hover,.refresh-debug-btn:hover{background:#218838}.search-error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24;padding:1rem;border-radius:8px;margin:1rem 0}.results-list{max-height:600px;overflow-y:auto}.result-metadata{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem}.metadata-item{background:#e9ecef;padding:.25rem .5rem;border-radius:4px;font-size:.85rem;color:#495057}.result-text{font-size:1.1rem;margin-bottom:.5rem;font-weight:500}.result-question,.result-answer{margin-bottom:.5rem}.result-question{color:#06c;font-weight:500}.transcript-tab{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;overflow:hidden}.transcript-layout{display:grid;grid-template-columns:2fr 1fr;gap:2rem;padding:2rem}.transcript-main{display:flex;flex-direction:column;gap:1rem}.transcript-panel-container h3{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:#14171a}.transcript-panel{background:#f8f9fa;border:2px solid #e1e8ed;border-radius:8px;padding:1.5rem;max-height:500px;overflow-y:auto;font-family:Courier New,monospace;line-height:1.6}.transcript-panel p{margin-bottom:1rem;padding:.75rem;background:#fff;border-radius:6px;border-left:3px solid #1da1f2;transition:background .3s ease,transform .3s ease}.transcript-panel p:hover,.transcript-panel p:focus{background:#f1f3f4;transform:translate(4px);box-shadow:0 2px 4px #0000001a}.transcript-time{color:#657786;font-size:.9rem;margin-right:.5rem}.transcript-text{color:#14171a;font-size:1rem}.transcript-sidebar{display:flex;flex-direction:column;gap:2rem}.search-transcript{background:#f8f9fa;border-radius:8px;padding:1.5rem}.search-transcript h4{font-size:1.2rem;margin-bottom:1rem;color:#14171a}.search-controls{margin-bottom:1rem}.search-controls input{width:100%;padding:.75rem;border:2px solid #e1e8ed;border-radius:6px;margin-bottom:.5rem}.search-controls button{padding:.5rem 1rem;background:#1da1f2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem}.results-list{max-height:200px;overflow-y:auto}.results-list li{margin-bottom:.5rem}.jump-to-btn{width:100%;background:#fff;border:1px solid #e1e8ed;border-radius:6px;padding:.5rem;text-align:left;cursor:pointer;transition:background .3s ease}.jump-to-btn:hover{background:#f7f9fa}.export-transcript{background:#e3f2fd;border-radius:8px;padding:1.5rem}.export-transcript h4{font-size:1.2rem;margin-bottom:1rem;color:#14171a}.export-buttons{display:flex;flex-direction:column;gap:.5rem}.export-btn{padding:.75rem 1rem;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background .3s ease}.srt-btn{background:#17bf63;color:#fff}.srt-btn:hover{background:#0f9549}.txt-btn{background:#1da1f2;color:#fff}.txt-btn:hover{background:#0d8bd9}.export-info{margin-top:.5rem;font-size:.9rem;color:#657786;text-align:center}@media (max-width: 768px){.transcript-layout{grid-template-columns:1fr}}@media (max-width: 768px){.analytics-grid{grid-template-columns:1fr;gap:1rem}.search-type-selector{flex-direction:column;gap:1rem}.search-input-group,.search-filters{flex-direction:column}.result-metadata{flex-direction:column;gap:.5rem}.caption-content{flex-direction:column;align-items:flex-start}.caption-actions{margin-left:0;margin-top:.5rem}}