*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Open Sauce One,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#f2f5f6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#f2f5f6}h1{font-size:2.5em;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;cursor:pointer;transition:all .25s ease}button:focus,button:focus-visible{outline:2px solid #667eea;outline-offset:2px}input{font-family:inherit}input:focus{outline:none}.app-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#002d3d;font-size:1.1rem}.app-loading__spinner{width:48px;height:48px;border:4px solid #e0e0e0;border-top-color:#002d3d;border-radius:50%;animation:app-spin 1s linear infinite}@keyframes app-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.app-loading__spinner{animation-duration:3s}}.not-found{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;color:#002d3d}.not-found__code{font-size:5rem;font-weight:800;color:#1eb1e6;line-height:1}.not-found__link{display:inline-flex;align-items:center;gap:.5rem;background:#002d3d;color:#fff;padding:.75rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600}.not-found__link:hover{background:#1eb1e6}.settings-logo{margin-bottom:3rem}.settings-back{display:flex;align-items:center;gap:.5rem}.settings-user{margin-top:.5rem;color:#666;font-size:.95rem}.settings-warning{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.25rem;margin-bottom:1.5rem;background:#fff7ed;border:1px solid #fdba74;border-radius:8px;color:#7c2d12;font-size:.9rem}.settings-warning p{margin-top:.25rem}.settings-server-info{margin-bottom:1rem;color:#444;font-size:.9rem}.settings-provider{margin-bottom:2.5rem}.settings-provider__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1rem}.settings-badge{padding:.25rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;background:#f3f4f6;color:#4b5563}.settings-badge--configured{background:#dcfce7;color:#166534}.settings-badge--missing{background:#fef3c7;color:#92400e}.settings-form{display:grid;grid-template-columns:2fr 3fr auto;gap:.5rem;align-items:end;margin-bottom:1rem}.settings-form--azure{grid-template-columns:1.5fr 2.5fr 1.5fr auto}.settings-form__submit{display:flex;align-items:center;gap:.5rem;padding-top:14px;padding-bottom:14px}.settings-form .settings-form__remember{grid-column:1 / -1;display:flex;align-items:center;gap:.5rem;margin:0;font-weight:400;font-size:.9rem;color:#444;cursor:pointer}.settings-notice{padding:.75rem 1rem;margin-bottom:1rem;background:#dcfce7;border-radius:6px;color:#166534;font-size:.9rem}.settings-key-list{list-style:none;background:#f9fafb;padding:1rem;border-radius:8px}.settings-key{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem;background:#fff;border:1px solid #e5e7eb;border-radius:6px}.settings-key+.settings-key{margin-top:.5rem}.settings-key__info{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.9rem}.settings-key__info code{color:#666}.settings-key__region{color:#1eb1e6}.settings-key__persistence{color:#6b7280;font-size:.8rem}.settings-key__remove{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:#fee2e2;color:#dc2626;font-weight:600;font-size:.85rem}@media(max-width:720px){.settings-form,.settings-form--azure{grid-template-columns:1fr}}.header-logo{height:80px;display:block}.provider-container{max-width:900px;margin:0 auto;padding:2rem;font-family:Open Sauce One,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.page-header{margin-bottom:2rem}.back-button{display:inline-block;color:#002d3d;text-decoration:none;margin-bottom:1rem;font-size:1rem;transition:color .3s ease}.back-button:hover{color:#1eb1e6}.page-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#333}.page-header p{color:#666;font-size:1.1rem}.content-wrapper{background:#fff;border-radius:12px;padding:2rem}.api-config-section{margin-bottom:0}.api-key-section{margin-bottom:2rem}.api-config-section h3{margin-top:0;margin-bottom:1rem;color:#333;font-size:1.25rem}.config-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:start}.config-field{display:flex;flex-direction:column}.config-field label{display:block;font-weight:600;margin-bottom:.5rem;color:#333}.detecting-label{font-size:.85rem;font-weight:400;color:#667eea;font-style:italic}.key-selector,.api-key-input,.voice-id-input,.model-selector,.setting-select,.region-selector,.filter-selector{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s ease;background-color:#fff}.key-selector:focus,.api-key-input:focus,.voice-id-input:focus,.model-selector:focus,.setting-select:focus,.region-selector:focus,.filter-selector:focus{outline:none;border-color:#667eea}.key-selector,.model-selector,.setting-select,.region-selector,.filter-selector{cursor:pointer;text-align:left}.key-selector{margin-bottom:1rem}.key-selector-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.key-selector-group label,.api-key-section label,.voice-selection-section label,.setting-group label{display:block;font-weight:600;margin-bottom:.5rem;color:#333}.custom-key-input{margin-top:1rem}.custom-key-input label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:.95rem}.custom-key-input input{width:100%}.api-note{margin-top:.5rem;font-size:.9rem;color:#666}.warning-text{color:#f5576c;font-weight:600}.api-note a{color:#667eea;text-decoration:none}.api-note a:hover{text-decoration:underline}.settings-section{margin-bottom:2rem;padding-top:2rem;border-top:1px solid #e0e0e0}.settings-section h3{margin-top:0;margin-bottom:1rem;color:#333;font-size:1.25rem}.setting-group{margin-bottom:1rem;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:600;color:#333}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer}.recording-section{margin-top:2rem;padding-top:2rem;border-top:1px solid #e0e0e0;text-align:center}.recording-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#333;text-align:center}.recording-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333;text-align:left}.recording-controls{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}.upload-divider{color:#999;font-weight:600;font-size:1rem}.record-button,.upload-button{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#1eb1e6,#002d3d);border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-button{color:#fff!important;background:linear-gradient(135deg,#1eb1e6,#002d3d)}.record-button:hover:not(:disabled),.upload-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.upload-button:hover:not(:disabled){box-shadow:0 2px 8px #002d3d}.record-button:disabled,.upload-button:disabled,.upload-button:has(input:disabled){opacity:.5;cursor:not-allowed;pointer-events:none}.record-button.stop{background:linear-gradient(135deg,#f093fb,#f5576c)}.mic-icon,.stop-icon,.upload-icon{font-size:1.2rem}.recording-indicator{display:flex;align-items:center;gap:.75rem;padding:1rem;background:linear-gradient(135deg,#ffeef8,#ffe8f5);border-radius:8px;font-weight:600;color:#764ba2;margin-bottom:1rem}.pulse{width:12px;height:12px;background:#f5576c;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.uploaded-file-container{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem}.uploaded-file-info{padding:.75rem 1rem;background:#f2f5f6;border:2px solid #002D3D;border-radius:8px;color:#002d3d;font-weight:500;display:inline-flex;align-items:center}.play-uploaded-button{background:#667eea;color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.3rem;white-space:nowrap}.play-uploaded-button:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 2px 8px #002d3d}.play-uploaded-button:active{transform:translateY(0)}.transcribe-uploaded-button{background:#1eb1e6;color:#fff!important;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.3rem;white-space:nowrap}.transcribe-uploaded-button:hover{background:#1eb1e6;transform:translateY(-1px);box-shadow:0 2px 8px #002d3d}.transcribe-uploaded-button:active{transform:translateY(0)}.audio-player-section{margin:2rem 0;padding:1.5rem;background:#f8f9fa;border-radius:12px}.audio-player-section h4{margin-top:0;color:#333;margin-bottom:1rem}.audio-player{width:100%;margin-top:.5rem}.loading-indicator,.loading-models{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:2rem 0;padding:2rem;background:#f8f9fa;border-radius:12px}.spinner{width:50px;height:50px;border:4px solid #e0e0e0;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}.spinner-icon{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-indicator p,.loading-models p{color:#666;font-size:1.1rem;margin:0}.error-message{padding:1rem;background:#ffebee;border-left:4px solid #f44336;border-radius:4px;color:#c62828;margin-bottom:1rem}.transcript-section{padding-top:2rem}.transcript-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333;text-align:left}.transcript-box{background:#f7fafc;border:2px solid #e0e0e0;border-radius:8px;padding:1.5rem;min-height:100px;font-size:1rem;line-height:1.6;color:#333;white-space:pre-wrap;word-wrap:break-word;margin-bottom:1.5rem;text-align:left}.transcription-time{margin-bottom:10px;color:#002d3d;font-weight:700;text-align:left;display:flex;align-items:center;gap:.5rem}.copy-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.copy-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #002d3d}.manual-text-section{margin-bottom:2rem;text-align:left}.manual-text-section label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:1rem}.manual-text-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.manual-text-header label:first-child{margin-bottom:0}.upload-text-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#1eb1e6;color:#fff!important;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:0;border:none}.upload-text-button:hover{transform:translateY(-2px);box-shadow:0 2px 8px #002d3d;color:#fff!important}.upload-text-button:active{transform:translateY(0);color:#fff!important}.manual-text-input{width:100%;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;font-family:inherit;line-height:1.6;min-height:8rem;resize:vertical;transition:border-color .3s ease;background:#fff}.manual-text-input:focus{outline:none;border-color:#667eea}.similarity-score{margin-top:1rem;padding:1rem;background:#f0f4ff;border-radius:8px;border:2px solid #667eea}.similarity-score strong{color:#667eea;font-size:1.1rem;margin-right:.5rem}.similarity-bar{margin-top:.75rem;height:24px;background:#e0e0e0;border-radius:12px;overflow:hidden;position:relative}.similarity-fill{height:100%;background:linear-gradient(135deg,#48bb78,#38a169);transition:width .5s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem;border-radius:12px}.model-selection{margin:1rem 0}.model-selection label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:.95rem;text-align:left}.model-description{color:#666;font-size:.9rem;margin-top:.5rem;padding:.5rem;background:#f7fafc;border-radius:4px}.model-info{color:#764ba2;font-size:.95rem;padding:.75rem;background:linear-gradient(135deg,#ffeef8,#f3e5f5);border-radius:6px;margin:.5rem 0 1rem}.model-info strong{color:#5a1c6b}.tts-section{text-align:center;padding:2rem 0;border-top:1px solid #e0e0e0;margin-top:2rem}.tts-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#333;text-align:center}.tts-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333;text-align:left}.voice-generation-section{margin-top:2rem}.voice-selection-section{margin:2rem 0;text-align:left;padding-bottom:2rem;border-bottom:1px solid #e0e0e0}.voice-selection-section>label{display:block;font-weight:600;margin-bottom:1rem;color:#333;font-size:1.1rem}.generate-button{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;margin-bottom:1rem}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.generate-button:disabled{opacity:.6;cursor:not-allowed}.speaker-icon{font-size:1.5rem}.test-connection-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;min-width:180px}.test-connection-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.test-connection-button:disabled{opacity:.5;cursor:not-allowed}.voice-filters{display:flex;gap:1.5rem;margin:1rem 0;padding:1rem;background:#f7fafc;border-radius:8px;border:1px solid #e0e0e0}.filter-group{display:flex;flex-direction:column;gap:.5rem;flex:1}.filter-group label{font-weight:600;font-size:.9rem;color:#333}.voices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;max-height:500px;overflow-y:auto;padding:.5rem}.voice-card{background:#f7fafc;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;cursor:pointer;transition:all .3s ease}.voice-card:hover{border-color:#667eea;background:#eef2ff;transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.voice-card.selected{border-color:#667eea;background:linear-gradient(135deg,#eef2ff,#e0e7ff);box-shadow:0 2px 8px #002d3d}.voice-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.voice-card-header h4{margin:0;font-size:1.1rem;color:#333}.play-preview-button{background:#667eea;color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .3s ease;padding:0;flex-shrink:0}.play-preview-button:hover{background:#5568d3;transform:scale(1.15)}.play-preview-button:active{transform:scale(.95)}.voice-card-details{display:flex;flex-direction:column;gap:.4rem}.voice-card-details span{font-size:.85rem;color:#666}.voices-table-container{max-height:500px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;margin-top:1rem}.voices-table{width:100%;border-collapse:collapse;background:#fff}.voices-table thead{position:sticky;top:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;z-index:10}.voices-table th{padding:1rem .75rem;text-align:left;font-weight:600;font-size:.9rem;border-bottom:2px solid #5568d3}.voices-table th:first-child{text-align:left}.voices-table tbody tr{cursor:pointer;transition:all .2s ease;border-bottom:1px solid #e0e0e0}.voices-table tbody tr:hover{background:#eef2ff}.voices-table tbody tr.selected{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-left:4px solid #667eea}.voices-table td{padding:.9rem .75rem;font-size:.9rem;color:#333}.voices-table td.voice-name{font-weight:600;color:#667eea}.voices-table td.voice-description{font-size:.85rem;color:#666}.voices-table td.voice-use-case{font-size:.85rem;color:#888}.voices-table .play-preview-button{width:32px;height:32px;font-size:.9rem}.selected-voice-info{color:#667eea;font-size:.95rem;padding:.75rem;background:#eef2ff;border-radius:6px;margin:.5rem 0 1rem;text-align:left}.selected-voice-info strong{color:#5568d3}.selected-voice-info span,.selected-voice-info .voice-detail{color:#666;font-size:.9rem}.info-section{margin-top:2rem;padding:1.5rem;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:8px}.info-section h3{font-size:1.3rem;margin-bottom:1rem;color:#333}.info-section ul{list-style:none;padding:0;margin:0}.info-section li{padding:.75rem 0;color:#555;line-height:1.6}.info-section strong{color:#333}.info-message{color:#667eea;font-size:1rem;padding:1rem;background:#eef2ff;border-radius:8px;border-left:4px solid #667eea;margin:1rem 0}.events-section{margin-bottom:2rem}.events-section h3{font-size:1.3rem;margin-bottom:1rem;color:#333}.events-list{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;max-height:300px;overflow-y:auto}.event-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#fff;border-radius:6px;margin-bottom:.5rem;box-shadow:0 2px 8px #002d3d}.event-item:last-child{margin-bottom:0}.event-time{font-size:.85rem;color:#666;min-width:80px}.event-type{padding:.25rem .75rem;border-radius:4px;font-size:.9rem;font-weight:600}.event-type.startofturn{background:#e3f2fd;color:#1976d2}.event-type.endofturn{background:#f3e5f5;color:#7b1fa2}.event-type.connection{background:#e8f5e9;color:#388e3c}.models-list{margin:1rem 0}.models-list h4{font-size:1.1rem;margin-bottom:.75rem;color:#333}.models-table-container,.models-grid{margin-top:1rem}.models-table{width:100%;border-collapse:collapse;background:#fff}.models-table thead{background:#f7fafc}.models-table th{padding:1rem .75rem;text-align:left;font-weight:600;border-bottom:2px solid #e0e0e0}.models-table tbody tr{border-bottom:1px solid #e0e0e0}.models-table tbody tr:hover{background:#f7fafc}.models-table tbody tr.audio-model-row{background:#ffeef8}.models-table tbody tr.audio-model-row:hover{background:#ffd9f0}.models-table td{padding:.9rem .75rem;font-size:.9rem}.model-name-cell{font-weight:600;color:#667eea}.no-models{padding:2rem;text-align:center;color:#666;background:#f7fafc;border-radius:8px;margin:1rem 0}@media(max-width:768px){.provider-container{padding:1rem}.page-header h1{font-size:2rem}.recording-controls{flex-direction:column;gap:1rem}.record-button,.upload-button{width:100%;justify-content:center}.upload-divider{display:none}.config-row{grid-template-columns:1fr}.voice-filters{flex-direction:column}.voices-grid{grid-template-columns:1fr}}.phone-call-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-top:1rem;font-size:.9rem}.phone-call-options label{font-weight:600;color:#002d3d}.phone-call-hint{flex-basis:100%;font-size:.8rem;color:#4a5568}.phone-call-panel{margin-top:1.5rem;padding:1rem 1.25rem;border:2px dashed #1EB1E6;border-radius:10px;background:#f8fcfe}.phone-call-panel h3{margin:0 0 .25rem;color:#002d3d}.phone-call-metrics{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:.75rem;font-size:.85rem;color:#2d3748}#root{min-height:100vh;width:100%;font-family:Open Sauce One,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}