:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.saved-transcripts{background:var(--surface-color);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow)}.toggle-saved-button{width:100%;padding:1rem 1.25rem;background:var(--bg-secondary);border:none;text-align:left;font-size:1rem;font-weight:600;color:var(--text-primary);cursor:pointer;transition:background .2s;display:flex;align-items:center;gap:.5rem}.toggle-saved-button:hover{background:var(--surface-hover)}.saved-list{border-top:1px solid var(--border-color);max-height:400px;overflow-y:auto}.loading-saved{display:flex;align-items:center;justify-content:center;gap:1rem;padding:2rem;color:var(--text-secondary)}.spinner-small{width:20px;height:20px;border:3px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.empty-saved{padding:2rem;text-align:center;color:var(--text-secondary)}.empty-saved p{margin:0}.empty-saved .hint{font-size:.875rem;margin-top:.5rem;opacity:.8}.saved-items{display:flex;flex-direction:column}.saved-item{padding:1rem 1.25rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .2s}.saved-item:last-child{border-bottom:none}.saved-item:hover{background:var(--primary-light)}.saved-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:1rem}.saved-item-title{font-weight:600;color:var(--text-primary);font-size:.95rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-saved-button{background:transparent;border:none;padding:.25rem .5rem;cursor:pointer;font-size:1rem;opacity:.6;transition:all .2s;flex-shrink:0;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.delete-saved-button:hover{opacity:1;transform:scale(1.1);background:var(--error-light);border-radius:6px}.saved-item-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.saved-item-meta span{display:flex;align-items:center;gap:.25rem}.saved-item-date{font-size:.8rem;color:var(--text-secondary);font-style:italic}.updated-badge{color:var(--warning-color);font-weight:500}@media(max-width:767px){.toggle-saved-button{font-size:.9rem;padding:.875rem 1rem}.saved-item{padding:.875rem 1rem}.saved-item-title{font-size:.9rem}.saved-item-meta{flex-direction:column;gap:.25rem}.saved-item-date{font-size:.75rem}}*{box-sizing:border-box}:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--primary-light: #dbeafe;--bg-color: #ffffff;--bg-secondary: #f8fafc;--surface-color: #ffffff;--surface-hover: #f1f5f9;--text-primary: #1e293b;--text-secondary: #64748b;--border-color: #e2e8f0;--error-color: #ef4444;--error-light: #fee2e2;--success-color: #10b981;--success-light: #d1fae5;--warning-color: #f59e0b;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--bg-secondary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:2.5rem 1rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-bottom:1px solid var(--border-color)}.app-header h1{margin:0;font-size:2.5rem;color:#fff;font-weight:700}.app-subtitle{margin:.5rem 0 0;color:#ffffffe6;font-size:1rem;font-weight:400}.app-main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:2rem 1rem}.app-footer{text-align:center;padding:1.5rem;border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:.875rem;background:var(--bg-color)}.app-footer a{color:var(--primary-color);text-decoration:none;font-weight:500}.app-footer a:hover{text-decoration:underline}.api-key-section{max-width:600px;margin:-1.5rem auto 2rem;padding:1.25rem;background:var(--surface-color);border-radius:12px;border:1px solid var(--border-color);box-shadow:var(--shadow)}.api-key-input-container{display:flex;gap:.5rem}.api-key-input{flex:1;padding:.75rem 1rem;background:var(--bg-color);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.95rem;transition:border-color .2s}.api-key-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.api-key-save{padding:.75rem 1.5rem;background:var(--primary-color);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}.api-key-save:hover{background:var(--primary-hover);transform:translateY(-1px)}.api-key-save:disabled{background:var(--border-color);cursor:not-allowed;transform:none}.api-key-display{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.api-key-status{color:var(--success-color);font-weight:600}.api-key-change{padding:.5rem 1rem;background:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.api-key-change:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--primary-color)}.api-key-info{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font-size:.85rem;color:var(--text-secondary)}.info-button{padding:.25rem .5rem;background:transparent;border:none;cursor:pointer;font-size:1rem}.info-text a{color:var(--primary-color);text-decoration:none;font-weight:500}.info-text a:hover{text-decoration:underline}.error-banner,.progress-banner{max-width:800px;margin:0 auto 1.5rem;padding:1rem 1.5rem;border-radius:12px;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow)}.error-banner{background:var(--error-light);border:1px solid var(--error-color)}.error-icon{font-size:1.5rem}.error-text{flex:1;color:var(--text-primary);font-weight:500}.error-close{background:transparent;border:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;padding:.25rem .5rem;transition:color .2s}.error-close:hover{color:var(--text-primary)}.progress-banner{background:var(--primary-light);border:1px solid var(--primary-color)}.progress-spinner{width:20px;height:20px;border:3px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-text{color:var(--text-primary);font-weight:500}.success-banner{background:var(--success-light);border:1px solid var(--success-color);max-width:800px;margin:0 auto 1.5rem;padding:1rem 1.5rem;border-radius:12px;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow);animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.success-icon{font-size:1.25rem;font-weight:700;color:var(--success-color)}.success-text{color:var(--text-primary);font-weight:500}.audio-uploader{margin-bottom:2rem}.upload-area{border:2px dashed var(--border-color);border-radius:16px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s;background:var(--surface-color)}.upload-area:hover:not(.disabled){border-color:var(--primary-color);background:var(--primary-light)}.upload-area.drag-active{border-color:var(--primary-color);background:var(--primary-light);border-style:solid}.upload-area.has-file{border-style:solid;border-color:var(--success-color);background:var(--success-light)}.upload-area.disabled{opacity:.5;cursor:not-allowed}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-text{margin:.5rem 0;font-size:1.1rem;color:var(--text-primary);font-weight:500}.upload-formats{margin:.5rem 0 0;font-size:.875rem;color:var(--text-secondary)}.file-info{display:flex;align-items:center;justify-content:center;gap:1rem}.file-icon{font-size:2.5rem}.file-details{text-align:left}.file-name{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.file-size{margin:.25rem 0 0;font-size:.875rem;color:var(--text-secondary)}.remove-button{padding:.5rem;background:var(--error-light);border:1px solid var(--error-color);border-radius:6px;color:var(--error-color);cursor:pointer;font-size:1rem;transition:all .2s}.remove-button:hover{background:var(--error-color);color:#fff}.transcribe-button{width:100%;max-width:400px;margin:1.5rem auto 0;padding:1rem 2rem;background:linear-gradient(135deg,var(--primary-color),#8b5cf6);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-lg);display:block}.transcribe-button:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #0000001a}.transcribe-button:active{transform:translateY(0)}.transcribing-status{text-align:center;margin-top:1.5rem}.spinner{width:40px;height:40px;margin:0 auto 1rem;border:4px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.transcribing-status p{margin:0;color:var(--text-secondary);font-weight:500}.error-message{margin-top:1rem;padding:.75rem 1rem;background:var(--error-light);border:1px solid var(--error-color);border-radius:8px;color:var(--error-color);text-align:center;font-weight:500}.upload-section,.saved-section,.transcript-section{margin-bottom:2rem}.transcript-section>.transcript-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.transcript-section>.transcript-header h2{margin:0;font-size:1.5rem;color:var(--text-primary);font-weight:700}.save-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 6px #10b98133;transition:all .2s ease;min-height:44px;display:flex;align-items:center;gap:.5rem;white-space:nowrap}.save-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #10b9814d}.save-button:active{transform:translateY(0)}.transcript-display{background:var(--surface-color);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.transcript-display.empty{text-align:center;padding:3rem}.empty-message{color:var(--text-secondary);font-size:1rem}.transcript-display .transcript-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color)}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;flex-wrap:wrap;gap:1rem}.transcript-display .transcript-header h2{margin:0;color:var(--text-primary);font-weight:700}.view-toggle{display:flex;gap:.5rem;background:var(--bg-secondary);padding:.25rem;border-radius:8px;border:1px solid var(--border-color)}.toggle-btn{padding:.5rem 1rem;background:transparent;border:none;border-radius:6px;color:var(--text-secondary);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.toggle-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.toggle-btn.active{background:var(--primary-color);color:#fff}.transcript-meta{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.9rem}.meta-item{color:var(--text-secondary);font-weight:500}.utterances-container{display:flex;flex-direction:column;gap:1rem}.utterance{padding:1.25rem;background:var(--bg-secondary);border-left:4px solid var(--primary-color);border-radius:12px;transition:all .2s;border:1px solid transparent}.utterance:hover{background:var(--surface-hover);border-color:var(--border-color);box-shadow:var(--shadow)}.utterance.editing{border-left-color:var(--warning-color);background:var(--surface-color);border-color:var(--warning-color)}.utterance-group{padding:1.25rem;background:var(--bg-secondary);border-left:4px solid var(--primary-color);border-radius:12px;transition:all .2s;border:1px solid transparent}.utterance-group:hover{background:var(--surface-hover);border-color:var(--border-color);box-shadow:var(--shadow)}.utterances-container.compact{gap:1.25rem}.utterances-container.compact .utterance-text{line-height:1.8;font-size:1.05rem}.utterance-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.speaker-label{padding:.35rem .85rem;border-radius:16px;font-size:.85rem;font-weight:600;color:#fff}.speaker-label.editable{cursor:pointer;transition:all .2s;position:relative}.speaker-label.editable:hover{opacity:.9;transform:scale(1.05)}.speaker-label.editable:hover:after{content:"✏️";position:absolute;right:-18px;top:50%;transform:translateY(-50%);font-size:.7rem}.speaker-edit-container{display:inline-block}.speaker-edit-input{padding:.35rem .85rem;border-radius:16px;font-size:.85rem;font-weight:600;color:var(--text-primary);background:#fff;border:2px solid var(--primary-color);min-width:100px;max-width:150px}.speaker-edit-input:focus{outline:none;box-shadow:0 0 0 3px var(--primary-light)}.timestamp{font-size:.85rem;color:var(--text-secondary);font-family:Courier New,monospace;font-weight:500}.utterance-content{display:flex;align-items:flex-start;gap:1rem}.utterance-text{flex:1;margin:0;line-height:1.6;color:var(--text-primary)}.edit-button{padding:.5rem .85rem;background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s;white-space:nowrap;font-weight:500}.edit-button:hover{background:var(--primary-light);color:var(--primary-color);border-color:var(--primary-color)}.utterance-edit{display:flex;flex-direction:column;gap:.75rem}.edit-textarea{width:100%;min-height:80px;padding:.75rem;background:var(--bg-color);border:2px solid var(--warning-color);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:1rem;line-height:1.6;resize:vertical}.edit-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.edit-actions{display:flex;gap:.5rem;align-items:center}.edit-actions .save-button,.cancel-button{padding:.6rem 1.2rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.edit-actions .save-button{background:var(--success-color);color:#fff;box-shadow:none}.edit-actions .save-button:hover{background:#059669;transform:translateY(-1px)}.cancel-button{background:var(--surface-hover);color:var(--text-secondary);border:1px solid var(--border-color)}.cancel-button:hover{background:var(--border-color);color:var(--text-primary)}.edit-hint{margin-left:auto;font-size:.75rem;color:var(--text-secondary)}.transcript-editor{background:var(--surface-color);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.editor-header h2{margin:0;color:var(--text-primary);font-weight:700}.editor-controls{display:flex;gap:1rem;align-items:center}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text-secondary);font-size:.9rem;font-weight:500}.checkbox-label input[type=checkbox]{cursor:pointer;width:16px;height:16px}.copy-button{padding:.5rem 1rem;background:var(--primary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;transition:all .2s;font-weight:600}.copy-button:hover{background:var(--primary-hover);transform:translateY(-1px)}.editor-textarea{width:100%;min-height:300px;padding:1rem;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-family:Courier New,monospace;font-size:.95rem;line-height:1.6;resize:vertical;transition:border-color .2s}.editor-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.editor-info{margin-top:.75rem;font-size:.85rem;color:var(--text-secondary);font-weight:500}.export-panel{background:var(--surface-color);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.export-panel h2{margin:0 0 1rem;color:var(--text-primary);font-weight:700}.export-mode-info{margin-bottom:1rem;padding:.75rem 1rem;background:var(--primary-light);border:1px solid var(--primary-color);border-radius:8px;color:var(--text-primary);font-size:.9rem}.export-mode-info strong{color:var(--primary-color);font-weight:700}.info-hint{margin-left:.5rem;color:var(--text-secondary);font-size:.85rem}.export-options{display:flex;gap:1.5rem;margin-bottom:1.5rem}.export-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem}.export-button{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s}.export-button:hover{border-color:var(--primary-color);background:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.button-icon{font-size:2rem}.button-content{display:flex;flex-direction:column;align-items:flex-start}.button-label{font-weight:700;font-size:1.1rem;color:var(--text-primary)}.button-desc{font-size:.85rem;color:var(--text-secondary)}.export-info{padding:1rem;background:var(--primary-light);border:1px solid var(--primary-color);border-radius:12px;font-size:.875rem;color:var(--text-primary)}.export-info p{margin:0;line-height:1.5}button,.edit-button,.speaker-label.editable{min-height:44px;min-width:44px}.export-button{min-height:60px}@media(max-width:767px){.app-header{padding:1.5rem 1rem}.app-header h1{font-size:1.75rem}.app-subtitle{font-size:.875rem}.app-main{padding:1rem}.transcript-section>.transcript-header{flex-direction:column;align-items:stretch}.save-button{width:100%;justify-content:center}.api-key-input-container{flex-direction:column}.api-key-save{width:100%}.upload-area{padding:1.5rem 1rem}.upload-icon{font-size:2rem}.upload-text{font-size:1rem}.header-top{flex-direction:column;align-items:flex-start}.view-toggle{width:100%}.toggle-btn{flex:1;justify-content:center}.transcript-meta{flex-direction:column;gap:.5rem}.utterance,.utterance-group{padding:1rem}.utterance-header{flex-wrap:wrap}.speaker-label{font-size:.8rem;padding:.3rem .7rem}.timestamp{font-size:.75rem}.utterance-text{font-size:.95rem}.editor-header{flex-direction:column;align-items:flex-start}.editor-controls{width:100%;flex-wrap:wrap}.editor-textarea{font-size:.9rem;min-height:200px}.export-options{flex-direction:column;gap:.75rem}.export-buttons{grid-template-columns:1fr}.export-button{padding:1rem}.button-icon{font-size:1.5rem}}@media(min-width:768px){.export-button:hover,.transcribe-button:hover{transform:translateY(-2px)}.api-key-save:hover{transform:translateY(-1px)}.toggle-btn:hover{transform:scale(1.02)}}@media(min-width:1024px){.app-main{padding:2.5rem 2rem}.transcript-display,.transcript-editor,.export-panel{padding:2rem}}