#root{display:flex;min-height:100vh;padding:20px;gap:24px;background:#f5f7fa}.right-side{flex:1;display:flex;flex-direction:column;gap:24px;min-width:0;max-width:1280px;position:relative;height:calc(100vh - 40px)}.icon-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:8px;background:#f0f2f5;color:#666;cursor:pointer;transition:all .2s}.icon-button:hover{background:#e6e8eb;color:#1a1a1a}.icon-button .material-icons{font-size:20px}.icon-button .spinning{animation:spin 1s linear infinite}.icon-button:disabled{opacity:.5;cursor:not-allowed}.icon-button{padding:8px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-button:hover:not(:disabled){background:#f0f0f0}.icon-button:active:not(:disabled){background:#e0e0e0}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 1024px){#root{flex-direction:column;padding:16px}.left-side{flex:none;width:100%}.chat-window{height:300px}}.chat-message{animation:slideIn .2s ease-out}.network-quality-container{margin-top:16px;transition:all .3s ease}.avatar-select{padding:8px;border-radius:4px;border:1px solid #ccc;font-size:14px;min-width:200px}.avatar-select option{padding:8px}.avatar-select option.available{color:#2ecc71}.avatar-select option.unavailable{color:#e74c3c}.avatar-select optgroup{font-weight:700;color:#34495e}.avatar-select:disabled{background-color:#f5f5f5;cursor:not-allowed}.provider-selector{width:100%}.provider-select{width:100%;margin-bottom:0;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;font-size:14px;color:#111827;height:40px;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.provider-select:hover:not(:disabled){border-color:#9ca3af;background-color:#f9fafb}.provider-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.provider-select:disabled{background-color:#f9fafb;color:#6b7280;cursor:not-allowed;opacity:.6}.provider-select option:disabled{color:#9ca3af;font-style:italic}@media (prefers-color-scheme: dark){.provider-select{background-color:#1f2937;border-color:#374151;color:#f9fafb}.provider-select:hover:not(:disabled){border-color:#4b5563;background-color:#374151}.provider-select:focus{border-color:#3b82f6;background-color:#1f2937}.provider-select:disabled{background-color:#111827;color:#6b7280}.provider-select option:disabled{color:#6b7280}}.avatar-select{flex:1}.icon-button{padding:4px;background:none;border:1px solid #ccc;border-radius:4px;cursor:pointer}.icon-button:hover{background:#f0f0f0}.available{color:green}.unavailable{color:red}.left-side{flex:0 0 450px;background:linear-gradient(135deg,#fff,#f8fafc);border-radius:20px;box-shadow:0 10px 25px #00000014,0 4px 10px #00000008;display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.left-side h3{margin:0 0 24px;color:#1f2937;font-size:28px;font-weight:700;text-align:center;position:relative;padding-bottom:16px}.left-side h3:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:2px}.left-side .scrollable-content{flex:1;overflow-y:auto;padding:32px 32px 16px}.left-side .fixed-button-area{flex:0 0 auto;padding:16px 32px 32px;background:linear-gradient(135deg,#fff,#f8fafc);border-top:1px solid rgba(0,0,0,.05)}.left-side label{display:block;margin-bottom:8px;color:#666;font-weight:500}.left-side input,.left-side select{width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .2s;background:#f8f9fa}.left-side input:focus,.left-side select:focus{outline:none;border-color:#4096ff;box-shadow:0 0 0 2px #4096ff1a}.left-side input:disabled,.left-side select:disabled{background:#f5f5f5;cursor:not-allowed}.buttons{margin-top:24px;padding-top:20px;border-top:1px solid #e5e7eb}.button-on,.button-off{width:100%;padding:16px 24px;border:none;border-radius:12px;font-weight:600;font-size:16px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.button-on{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 15px #3b82f64d}.button-on:hover{background:linear-gradient(135deg,#2563eb,#1e40af);box-shadow:0 6px 20px #3b82f666;transform:translateY(-2px)}.button-on:active{transform:translateY(0);box-shadow:0 2px 10px #3b82f64d}.button-on:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.button-off{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef44444d}.button-off:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 6px 20px #ef444466;transform:translateY(-2px)}.button-off:active{transform:translateY(0);box-shadow:0 2px 10px #ef44444d}.icon-button{padding:5px;cursor:pointer}.icon-button.disabled{opacity:.5;cursor:not-allowed}.spinning{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.avatar-select option.available{color:green}.avatar-select option.unavailable{color:red}.json-preview-container{position:relative;cursor:pointer;transition:all .2s}.json-preview-container.clickable:hover .json-preview{border-color:#4096ff;background:#f0f7ff}.json-preview-container.clickable:hover .json-preview-hint{opacity:1;transform:translateY(0)}.json-preview-container.disabled{cursor:not-allowed}.json-preview-container.disabled .json-preview{opacity:.6}.json-preview{border:1px solid #e0e0e0;border-radius:8px;background:#f8f9fa;overflow:hidden;transition:all .2s;position:relative}.json-preview-content{margin:0;padding:12px 16px 32px;font-family:Monaco,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:#666;background:transparent;white-space:pre-wrap;overflow-x:auto;max-height:120px;overflow-y:auto}.json-preview-hint{position:absolute;bottom:8px;right:12px;display:flex;align-items:center;gap:6px;padding:4px 8px;background:#4096ff1a;color:#4096ff;font-size:12px;font-weight:500;border-radius:4px;opacity:.7;transform:translateY(2px);transition:all .2s;pointer-events:none}.json-preview-hint svg{flex-shrink:0;opacity:.8}.config-group{background:#fafbfc;border:1px solid #f0f2f5;border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.group-header{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;padding-bottom:6px;border-bottom:1px solid #e5e7eb}.config-group>div:not(.buttons){margin-bottom:0}.config-group .buttons{margin-top:4px}.form-row{margin-bottom:16px}.form-row label{display:block;margin-bottom:6px;font-weight:500;color:#374151;font-size:14px}.form-row input,.form-row select{width:100%;margin-bottom:0;height:40px;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s ease;background:#fff;box-sizing:border-box}.form-row input:focus,.form-row select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-row input:disabled,.form-row select:disabled{background-color:#f9fafb;color:#9ca3af;cursor:not-allowed}.input-with-buttons{display:flex;align-items:center;gap:8px;width:100%}.input-with-buttons input,.input-with-buttons select{flex:1;margin-bottom:0}.input-with-buttons .icon-button{flex:0 0 auto;padding:8px 12px;font-size:12px;white-space:nowrap;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;color:#6b7280;cursor:pointer;transition:all .2s ease;height:40px;display:flex;align-items:center;justify-content:center}.input-with-buttons .icon-button:hover{background:#e5e7eb;color:#374151}.input-with-buttons .icon-button:disabled{background:#f9fafb;color:#d1d5db;cursor:not-allowed}.voice-display-input{flex:1;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;background:#f8f9fa;color:#262626;cursor:pointer;transition:all .2s}.voice-display-input:hover:not(:disabled){background:#f0f0f0;border-color:#d0d0d0}.voice-display-input:focus{outline:none;border-color:#4096ff;box-shadow:0 0 0 2px #4096ff1a;background:#fff}.voice-display-input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.6}.voice-display-input[value="Select a voice"],.voice-display-input[value=""]{color:#8c8c8c;font-style:italic}.voice-input{flex:1;padding:10px 12px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;background:#fff;color:#262626;cursor:text;transition:all .2s}.voice-input:focus{outline:none;border-color:#4096ff;box-shadow:0 0 0 2px #4096ff1a}.voice-input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.6}.voice-input::placeholder{color:#8c8c8c;font-style:italic}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid transparent;border-radius:6px;font-size:12px;font-weight:500;line-height:1.5;cursor:pointer;transition:all .2s ease;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn-primary{background:#4096ff;color:#fff;border-color:#4096ff}.btn-primary:hover:not(:disabled){background:#1677ff;border-color:#1677ff;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.btn-secondary{background:#fff;color:#595959;border-color:#d9d9d9}.btn-secondary:hover:not(:disabled){border-color:#4096ff;color:#4096ff;background:#e6f7ff}.btn-sm{padding:6px 10px;font-size:11px;min-height:28px}.edit-json-button{flex:0 0 auto;padding:8px;font-size:14px;white-space:nowrap;background:#3b82f6;border:1px solid #3b82f6;border-radius:6px;color:#fff;cursor:pointer;transition:all .2s ease;height:40px;width:40px;display:flex;align-items:center;justify-content:center;min-width:40px}.edit-json-button:hover{background:#2563eb;border-color:#2563eb;transform:scale(1.05)}.edit-json-button:disabled{background:#9ca3af;border-color:#9ca3af;cursor:not-allowed;transform:none}.icon-button-small{flex:0 0 auto;padding:6px;font-size:12px;white-space:nowrap;background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;color:#6b7280;cursor:pointer;transition:all .2s ease;height:32px;width:32px;display:flex;align-items:center;justify-content:center;min-width:32px}.icon-button-small:hover{background:#e5e7eb;color:#374151;transform:scale(1.05)}.icon-button-small:disabled{background:#f9fafb;color:#d1d5db;cursor:not-allowed;transform:none}.config-group h4{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.8px;margin:0 0 20px;padding-bottom:10px;border-bottom:2px solid #e5e7eb;position:relative}.config-group h4:after{content:"";position:absolute;bottom:-2px;left:0;width:30px;height:2px;background:#3b82f6}.config-group{margin-bottom:32px;padding:24px;background:#fffc;border-radius:16px;border:1px solid rgba(229,231,235,.6);transition:all .3s ease;position:relative;overflow:hidden}.config-group:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4);opacity:0;transition:opacity .3s ease}.config-group:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:#3b82f64d}.config-group:hover:before{opacity:1}.config-group:last-of-type{margin-bottom:24px}.form-row{animation:fadeInUp .6s ease forwards;opacity:0;transform:translateY(20px)}.form-row:nth-child(2){animation-delay:.1s}.form-row:nth-child(3){animation-delay:.2s}.form-row:nth-child(4){animation-delay:.3s}.form-row:nth-child(5){animation-delay:.4s}.form-row:nth-child(6){animation-delay:.5s}.form-row:nth-child(7){animation-delay:.6s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.left-side::-webkit-scrollbar{width:6px}.left-side::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.left-side::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f6,#8b5cf6);border-radius:3px}.left-side::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2563eb,#7c3aed)}.network-quality-toggle{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#1e1e1ef2,#323232f2);border:1px solid rgba(255,255,255,.1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:101;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #0000004d}.network-quality-toggle:hover{background:linear-gradient(135deg,#282828f2,#3c3c3cf2);transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px #0006;border-color:#fff3}.network-quality-toggle .material-icons{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.network-quality{position:absolute;top:80px;right:20px;width:480px;background:linear-gradient(135deg,#141414f2,#232323f2);border-radius:16px;padding:16px;font-size:14px;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff0d;color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:100;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.08)}.quality-section{display:flex;justify-content:space-around;margin-bottom:12px;padding:12px;background:linear-gradient(135deg,#ffffff14,#ffffff0a);border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.quality-section>div{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;transition:all .2s ease}.quality-section>div:hover{background:#ffffff0d}.quality-section span{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.quality-indicator{width:14px;height:14px;border-radius:50%;display:inline-block;position:relative;transition:all .3s ease}.quality-indicator:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;opacity:.3;animation:pulse 2s infinite}.quality-good{background:linear-gradient(135deg,#4caf50,#66bb6a);box-shadow:0 0 12px #4caf5099,inset 0 1px #fff3}.quality-good:before{background:#4caf50}.quality-fair{background:linear-gradient(135deg,#ffc107,#ffca28);box-shadow:0 0 12px #ffc10799,inset 0 1px #fff3}.quality-fair:before{background:#ffc107}.quality-poor{background:linear-gradient(135deg,#f44336,#ef5350);box-shadow:0 0 12px #f4433699,inset 0 1px #fff3}.quality-poor:before{background:#f44336}@keyframes pulse{0%{transform:scale(1);opacity:.3}50%{transform:scale(1.2);opacity:.1}to{transform:scale(1);opacity:.3}}.stats-section{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}.video-stats,.audio-stats,.connection-stats{background:linear-gradient(135deg,#ffffff14,#ffffff0a);padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease;min-width:0}.video-stats:hover,.audio-stats:hover,.connection-stats:hover{background:linear-gradient(135deg,#ffffff1f,#ffffff0f);border-color:#ffffff26;transform:translateY(-2px)}.video-stats h4,.audio-stats h4,.connection-stats h4{margin:0 0 8px;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:6px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-stats h4:after,.audio-stats h4:after,.connection-stats h4:after{content:"";position:absolute;bottom:-2px;left:0;width:30px;height:2px;background:linear-gradient(90deg,#4caf50,#66bb6a);border-radius:1px}.video-stats>div,.audio-stats>div,.connection-stats>div{display:flex;justify-content:space-between;align-items:center;padding:3px 0;color:#ffffffe6;font-size:11px;border-radius:6px;transition:all .2s ease;white-space:nowrap;overflow:hidden}.video-stats>div span:last-child,.audio-stats>div span:last-child,.connection-stats>div span:last-child{text-align:right;flex-shrink:0;margin-left:6px;max-width:50%;overflow:hidden;text-overflow:ellipsis}.video-stats>div span:first-child,.audio-stats>div span:first-child,.connection-stats>div span:first-child{flex-shrink:0;min-width:0;white-space:nowrap}.video-stats>div:hover,.audio-stats>div:hover,.connection-stats>div:hover{background:#ffffff0d;padding-left:8px;padding-right:8px}.score-value,.rtt-value{font-weight:700;font-size:14px;padding:4px 8px;border-radius:6px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.score-value{color:#4caf50;background:#4caf501a;border:1px solid rgba(76,175,80,.3)}.rtt-value{color:#ffc107;background:#ffc1071a;border:1px solid rgba(255,193,7,.3)}.video-stats>div:not(:last-child),.audio-stats>div:not(:last-child){border-bottom:1px solid rgba(255,255,255,.1)}.video-stats>div:hover,.audio-stats>div:hover{background:#ffffff0d}.network-quality.minimized{width:auto;cursor:pointer}.network-quality.minimized .stats-section,.network-quality.minimized .quality-section{display:none}@media (max-width: 1024px){.network-quality{width:420px}}@media (max-width: 768px){.network-quality{width:350px;top:10px;right:10px}.stats-section{grid-template-columns:1fr;gap:8px}.quality-section{flex-direction:column;gap:8px}.quality-section>div{justify-content:space-between}}@media (max-width: 480px){.stats-section{grid-template-columns:1fr}.video-stats,.audio-stats,.connection-stats{padding:8px}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.network-quality{animation:slideIn .3s ease}.latency-chart{background:linear-gradient(135deg,#ffffff0d,#ffffff05);border-radius:12px;padding:12px;margin:12px 0;width:100%;height:140px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-sizing:border-box;overflow:hidden}.latency-chart canvas{width:100%!important;height:100%!important}.network-quality{min-width:300px;max-width:600px}.icon-button{padding:8px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}.icon-button:hover:not(:disabled){background:#f5f5f5;border-color:#d0d0d0}.icon-button:active:not(:disabled){transform:translateY(1px)}.icon-button:disabled{background:#f5f5f5;color:#999;cursor:not-allowed;border-color:#e0e0e0}.icon-button.disabled{background:#f5f5f5;color:#999;cursor:not-allowed;border-color:#e0e0e0}.icon-button .material-icons{font-size:18px;line-height:1}.icon-button.loading{pointer-events:none}.icon-button.loading .material-icons{animation:spin 1s linear infinite}.icon-button.error{background-color:#ffebee;color:#d32f2f;border-color:#ffcdd2}.icon-button.error:hover:not(:disabled){background-color:#ffcdd2}.icon-button.noise-reduction{background:linear-gradient(135deg,#f3e5f5,#e1bee7);color:#7b1fa2;border:1px solid #ce93d8;transition:all .3s ease;box-shadow:0 2px 4px #7b1fa21a}.icon-button.noise-reduction:hover:not(:disabled){background:linear-gradient(135deg,#e1bee7,#ce93d8);color:#6a1b9a;border-color:#ba68c8;box-shadow:0 4px 8px #7b1fa233;transform:translateY(-1px)}.icon-button.noise-reduction.active{background:linear-gradient(135deg,#e8f5e8,#c8e6c9);color:#2e7d32;border-color:#4caf50;box-shadow:0 3px 6px #2e7d3233}.icon-button.noise-reduction.active:hover:not(:disabled){background:linear-gradient(135deg,#c8e6c9,#a5d6a7);color:#1b5e20;border-color:#388e3c;box-shadow:0 5px 10px #2e7d324d;transform:translateY(-1px)}.icon-button.noise-reduction:disabled{background:linear-gradient(135deg,#f5f5f5,#eee);color:#bdbdbd;border-color:#e0e0e0;box-shadow:none;transform:none;cursor:not-allowed}.icon-button.audio-dump{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#ef6c00;border:1px solid #ffb74d;transition:all .3s ease;box-shadow:0 2px 4px #ef6c001a}.icon-button.audio-dump:hover:not(:disabled){background:linear-gradient(135deg,#ffe0b2,#ffcc80);color:#e65100;border-color:#ff9800;box-shadow:0 4px 8px #ef6c0033;transform:translateY(-1px)}.icon-button.audio-dump.active{background:linear-gradient(135deg,#fff8e1,#ffecb3);color:#f57c00;border-color:#ffa726;box-shadow:0 3px 6px #f57c004d;animation:dumpPulse 1.2s ease-in-out infinite}.icon-button.audio-dump:disabled{background:linear-gradient(135deg,#f5f5f5,#eee);color:#bdbdbd;border-color:#e0e0e0;box-shadow:none;transform:none;cursor:not-allowed}@keyframes dumpPulse{0%{opacity:1;transform:scale(1);box-shadow:0 3px 6px #f57c004d}50%{opacity:.8;transform:scale(1.02);box-shadow:0 5px 12px #f57c0066}to{opacity:1;transform:scale(1);box-shadow:0 3px 6px #f57c004d}}.tooltip{pointer-events:none;max-height:300px;overflow:auto}.tooltip-content{background:#2c3e50;color:#ecf0f1;padding:12px;border-radius:8px;font-size:12px;line-height:1.4;box-shadow:0 4px 12px #0000004d;border:1px solid #34495e;white-space:pre-wrap;word-break:break-word}.tooltip-code .tooltip-content{background:#1e1e1e;color:#d4d4d4;font-family:Monaco,Menlo,Ubuntu Mono,monospace;border-color:#3c3c3c}.tooltip-code .tooltip-content pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;color:#bdc3c7}.tooltip-help .tooltip-content{background:#4a90e2;color:#fff;border-color:#357abd;max-width:250px}.tooltip-content pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;color:#bdc3c7}.resizable-container{display:flex;flex-direction:column;transition:height .1s ease}.resize-handle{height:20px;background:#f8f9fa;cursor:ns-resize;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;position:relative;border-bottom:1px solid #e9ecef;z-index:10;width:100%}.resize-handle:hover{background:#e9ecef}.resize-indicator{width:100%;height:6px;background:#b0b0b0;border-radius:3px;transition:background-color .2s ease;position:absolute;top:50%;left:0;transform:translateY(-50%)}.resize-handle:hover .resize-indicator{background:#666}.resize-dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2px;z-index:11;pointer-events:none}.resize-dots span{font-size:8px;color:#6c757d;opacity:.7}.resize-handle:hover .resize-dots span{opacity:1;color:#495057}.resize-text{position:absolute;right:15px;font-size:10px;color:#6c757d;opacity:.7;pointer-events:none;z-index:11}.resize-handle:hover .resize-text{opacity:1;color:#495057}.resizable-container:active .resize-handle{background:#0000001a}.resizable-container.resizing{-webkit-user-select:none;user-select:none;cursor:ns-resize}.resizable-container.resizing .resize-handle{background:#0000001a}.resizable-container.resizing .resize-indicator{background:#666}.resizable-container.resizing .resizable-content{pointer-events:none}.resizable-content{flex:1;display:flex;flex-direction:column;min-height:0}.placeholder-display{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;background-color:#1a1a1a;color:#666;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;position:absolute;top:0;left:0;z-index:1}.placeholder-icon{margin-bottom:15px;line-height:1}.placeholder-message{text-align:center;font-weight:500;line-height:1.4}.placeholder-loading{background-color:#1a1a1ae6;z-index:2}.loading-spinner{width:40px;height:40px;border:3px solid #333;border-top:3px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}.placeholder-error{color:#ff6b6b}.placeholder-empty{color:#666}.speaking-indicator{position:absolute;top:20px;left:20px;background:#000c;color:#fff;padding:12px 16px;border-radius:20px;display:flex;align-items:center;gap:8px;z-index:20;animation:fadeIn .3s ease-out}.speaking-dots{display:flex;gap:4px;align-items:center}.speaking-dots span{width:6px;height:6px;background:#4caf50;border-radius:50%;animation:speakingPulse 1.4s ease-in-out infinite both}.speaking-dots span:nth-child(1){animation-delay:-.32s}.speaking-dots span:nth-child(2){animation-delay:-.16s}.speaking-dots span:nth-child(3){animation-delay:0s}.speaking-text{font-size:14px;font-weight:500;color:#4caf50}@keyframes speakingPulse{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.draggable-overlay{position:absolute;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d;border:2px solid rgba(255,255,255,.1);z-index:10;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .3s ease}.draggable-overlay:hover{border-color:#4096ffcc;box-shadow:0 4px 20px #4096ff4d}.draggable-overlay.dragging{transform:scale(1.02);z-index:20}.draggable-overlay.resizing{z-index:20}.draggable-content{width:100%;height:100%;position:relative}.drag-handle{position:absolute;top:0;left:0;width:24px;height:24px;background:#4096ffcc;border-radius:12px 0;cursor:move;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease;z-index:15}.drag-handle:hover{background:#4096ff;transform:scale(1.1)}.drag-handle:before{content:"⋮⋮";color:#fff;font-size:12px;line-height:1;letter-spacing:-2px}.resize-handle{position:absolute;bottom:0;right:0;width:24px;height:24px;background:#ffc107cc;border-radius:0 0 12px 12px;cursor:nw-resize;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease;z-index:15}.resize-handle:hover{background:#ffc107;transform:scale(1.1)}.resize-handle:before{content:"⟋";color:#fff;font-size:14px;transform:rotate(90deg)}.draggable-overlay:hover .drag-handle,.draggable-overlay:hover .resize-handle{opacity:1}.draggable-overlay.dragging .resize-handle,.draggable-overlay.resizing .drag-handle{opacity:0}.overlay-tooltip{content:attr(data-tooltip);position:absolute;top:-35px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:30}.draggable-overlay:hover .overlay-tooltip{opacity:1}@media (max-width: 768px){.draggable-overlay{min-width:120px;min-height:90px}.overlay-tooltip{font-size:11px;padding:4px 8px}}@media (max-width: 480px){.draggable-overlay{min-width:100px;min-height:75px}.overlay-tooltip{font-size:10px;padding:3px 6px}}.main-video-area{width:100%;height:100%;position:relative;overflow:hidden}#remote-video{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background:#000;transition:opacity .3s ease-in-out;opacity:1}#remote-video video{width:100%;height:100%;object-fit:contain}#remote-video.hidden{opacity:0;pointer-events:none}.avatar-content{width:100%;height:100%;position:relative;z-index:1}.avatar-content .placeholder-content{transition:opacity .3s ease-in-out;opacity:1}.avatar-content .placeholder-content.hidden{opacity:0;pointer-events:none}#placeholder-video,#placeholder-image{width:100%;height:100%;object-fit:contain;transition:opacity .3s ease-in-out}#placeholder-video.hidden,#placeholder-image.hidden{opacity:0;pointer-events:none}#main-local-video video{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}.video-overlay{bottom:16px;right:16px;width:25%;height:25%;min-width:160px;min-height:120px;max-width:50%;max-height:50%}.video-overlay.switching{border-color:#4caf50cc;box-shadow:0 4px 20px #4caf5066}.local-video-container{width:100%;height:100%;position:relative}.local-video-container video{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}@media (max-width: 768px){.video-overlay{width:30%;height:30%;min-width:120px;min-height:90px;bottom:12px;right:12px}}@media (max-width: 480px){.video-overlay{width:35%;height:35%;min-width:100px;min-height:75px;bottom:8px;right:8px}}.video-container{position:relative;background:#000;border-radius:16px;overflow:hidden;height:70%;box-shadow:0 4px 12px #0000001a}@media (max-width: 768px){.video-container{height:65%}}@media (max-width: 480px){.video-container{height:60%}}.chat-window{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:16px;box-shadow:0 4px 12px #0000000d;display:flex;flex-direction:column;height:400px;transition:height .1s ease}.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:0}.chat-messages>div{display:flex;flex-direction:column;gap:4px}.chat-message{max-width:80%;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5;animation:slideIn .2s ease-out}.chat-message.sent{align-self:flex-end;background:#4096ff;color:#fff;border-bottom-right-radius:4px}.chat-message.received{align-self:flex-start;background:#f0f2f5;color:#1a1a1a;border-bottom-left-radius:4px}.chat-message.system{align-self:center;background:#f8f9fa;color:#6c757d;border:1px solid #e9ecef;font-size:11px;padding:4px 8px;border-radius:12px;max-width:80%;text-align:center;opacity:.8;margin:0 auto}.chat-message.system.audio_start{background:#e8f5e8;color:#2e7d32;border-color:#4caf50}.chat-message.system.audio_end{background:#fff3cd;color:#856404;border-color:#ffc107}.chat-message.system.video_start{background:#e1f5fe;color:#0277bd;border-color:#03a9f4}.chat-message.system.video_end{background:#fce4ec;color:#c2185b;border-color:#e91e63}.chat-message.system.command_send{background:#e3f2fd;color:#1565c0;border-color:#2196f3}.chat-message.system.command_ack{background:#f3e5f5;color:#7b1fa2;border-color:#9c27b0}.chat-message.system.interrupt{background:#ffebee;color:#c62828;border-color:#f44336}.chat-message.system.interrupt_ack{background:#fff3e0;color:#ef6c00;border-color:#ff9800}.chat-message.system.avatar_audio_start{background:#e8f5e8;color:#2e7d32;border-color:#4caf50}.chat-message.system.avatar_audio_end{background:#fff3cd;color:#856404;border-color:#ffc107}.chat-message.system.mic_start{background:#f3e5f5;color:#7b1fa2;border-color:#9c27b0}.chat-message.system.mic_end{background:#e0f2f1;color:#00695c;border-color:#009688}.chat-message.system.camera_start{background:#e1f5fe;color:#0277bd;border-color:#03a9f4}.chat-message.system.camera_end{background:#fce4ec;color:#c2185b;border-color:#e91e63}.chat-message.system.set_params{background:#e3f2fd;color:#1565c0;border-color:#2196f3;cursor:help;transition:background-color .2s ease}.chat-message.system.set_params:hover{background:#e3f2fd;border-color:#2196f3}.chat-message.system.set_params_ack{background:#f3e5f5;color:#7b1fa2;border-color:#9c27b0}.time-separator{text-align:center;font-size:11px;color:#6c757d;margin:4px 0;opacity:.7;align-self:center}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-input{display:flex;gap:12px;padding:16px;border-top:1px solid #f0f0f0;background:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:16px}.chat-input input{flex:1;padding:12px 16px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .2s}.chat-input input:focus{outline:none;border-color:#4096ff;box-shadow:0 0 0 2px #4096ff1a}.chat-input input.disabled{background:#f5f5f5;cursor:not-allowed;color:#999}.chat-input input.disabled::placeholder{color:#999}.notification-container{position:fixed;top:20px;right:20px;z-index:10000;max-width:400px;pointer-events:none}.notification{display:flex;align-items:flex-start;gap:12px;padding:16px;margin-bottom:12px;border-radius:8px;box-shadow:0 4px 12px #00000026;cursor:pointer;pointer-events:auto;animation:slideIn .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);max-width:100%;word-wrap:break-word}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.notification:hover{transform:translate(-4px);transition:transform .2s ease-out}.notification--info{background:linear-gradient(135deg,#3b82f6e6,#2563ebe6);color:#fff}.notification--success{background:linear-gradient(135deg,#22c55ee6,#16a34ae6);color:#fff}.notification--warning{background:linear-gradient(135deg,#fbbf24e6,#f59e0be6);color:#fff}.notification--error{background:linear-gradient(135deg,#ef4444e6,#dc2626e6);color:#fff}.notification__icon{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:#fff3;border:1px solid rgba(255,255,255,.3)}.notification__content{flex:1;min-width:0}.notification__title{font-weight:600;font-size:14px;margin-bottom:4px;line-height:1.3}.notification__message{font-size:13px;line-height:1.4;opacity:.95}.notification__close{flex-shrink:0;background:none;border:none;color:inherit;font-size:18px;font-weight:700;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;opacity:.7}.notification__close:hover{background:#fff3;opacity:1}.notification__close:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:1px}@media (max-width: 480px){.notification-container{top:10px;right:10px;left:10px;max-width:none}.notification{margin-bottom:8px;padding:12px}.notification__title{font-size:13px}.notification__message{font-size:12px}}.json-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.json-modal-container{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:90vw;max-width:1000px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.json-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e0e0e0;background:#fafafa}.json-modal-header h3{margin:0;font-size:20px;font-weight:600;color:#1a1a1a}.json-modal-close{background:none;border:none;font-size:28px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.json-modal-close:hover{background:#f0f0f0;color:#333}.json-modal-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.json-modal-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.json-modal-toolbar-left{display:flex;gap:8px}.json-modal-toolbar-right{display:flex;align-items:center}.json-modal-error{color:#ff4d4f;font-size:14px;font-weight:500;padding:6px 12px;background:#fff2f0;border:1px solid #ffccc7;border-radius:6px}.json-modal-editor{flex:1;margin:24px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#f8f9fa;transition:all .2s}.json-modal-editor.has-error{border-color:#ff4d4f;background:#fff2f0}.json-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-top:1px solid #e0e0e0;background:#fafafa}.json-modal-status{display:flex;align-items:center}.json-modal-changes{color:#fa8c16;font-size:14px;font-weight:500}.json-modal-actions{display:flex;gap:12px}.json-modal-button{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;min-width:100px}.json-modal-button.primary{background:#4096ff;color:#fff;border-color:#4096ff}.json-modal-button.primary:hover:not(:disabled){background:#1677ff;border-color:#1677ff}.json-modal-button.primary:disabled{background:#f5f5f5;color:#bfbfbf;border-color:#d9d9d9;cursor:not-allowed}.json-modal-button.secondary{background:#fff;color:#666;border-color:#d9d9d9}.json-modal-button.secondary:hover:not(:disabled){border-color:#4096ff;color:#4096ff}.json-modal-button.secondary:disabled{background:#f5f5f5;color:#bfbfbf;cursor:not-allowed}@media (max-width: 768px){.json-modal-container{width:95vw;max-width:none;margin:10px}.json-modal-header{padding:16px 20px}.json-modal-header h3{font-size:18px}.json-modal-toolbar{padding:12px 20px;flex-direction:column;gap:12px;align-items:stretch}.json-modal-toolbar-left,.json-modal-toolbar-right{justify-content:center}.json-modal-editor{margin:16px 20px}.json-modal-footer{padding:16px 20px;flex-direction:column;gap:12px}.json-modal-actions{width:100%;justify-content:stretch}.json-modal-button{flex:1}}.voice-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;font-size:12px;transition:all .2s ease}.voice-preview:hover{background:#f0f0f0;border-color:#d0d0d0}.voice-preview.disabled{background:#f5f5f5;border-color:#e0e0e0;opacity:.6}.preview-controls{display:flex;align-items:center;gap:4px}.preview-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:#4096ff;color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:14px}.preview-button:hover:not(:disabled){background:#1677ff;transform:scale(1.05)}.preview-button:disabled{background:#d0d0d0;cursor:not-allowed;transform:none}.stop-button{background:#ff4d4f}.stop-button:hover:not(:disabled){background:#ff7875}.preview-status{display:flex;align-items:center;min-width:0}.preview-text{color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-loading{color:#4096ff;font-style:italic}.preview-error{color:#ff4d4f;font-size:11px}.material-icons{font-size:16px;line-height:1}.voice-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:12px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000000d;position:relative;overflow:hidden}.voice-card:hover:not(.disabled){border-color:#4096ff;box-shadow:0 4px 12px #4096ff26;transform:translateY(-2px)}.voice-card.selected{border-color:#4096ff;background:#f6f9ff;box-shadow:0 4px 12px #4096ff33}.voice-card.disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.voice-card:focus{outline:none;border-color:#4096ff;box-shadow:0 0 0 3px #4096ff1a}.voice-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}.voice-name-container{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.voice-name{margin:0;font-size:14px;font-weight:600;color:#262626;line-height:1.3;word-break:break-word}.voice-type-badge{display:inline-block;padding:2px 6px;border-radius:8px;font-size:10px;font-weight:500;color:#fff;text-transform:uppercase;letter-spacing:.3px;align-self:flex-start}.voice-card-content{margin-bottom:8px}.voice-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:8px}.voice-info-item{display:flex;flex-direction:column;gap:2px}.info-label{font-size:10px;color:#8c8c8c;text-transform:uppercase;letter-spacing:.3px;font-weight:500}.info-value{font-size:12px;color:#262626;font-weight:500;word-break:break-word}.voice-tags{margin-bottom:8px}.tag-group{margin-bottom:4px}.tag-group:last-child{margin-bottom:0}.tag-label{display:block;font-size:10px;color:#8c8c8c;text-transform:uppercase;letter-spacing:.3px;font-weight:500;margin-bottom:3px}.tags{display:flex;flex-wrap:wrap;gap:3px}.tag{display:inline-block;padding:1px 4px;border-radius:3px;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.2px}.style-tag{background:#e6f7ff;color:#1890ff;border:1px solid #91d5ff}.scenario-tag{background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f}.voice-sample{margin-bottom:8px}.sample-label{display:block;font-size:10px;color:#8c8c8c;text-transform:uppercase;letter-spacing:.3px;font-weight:500;margin-bottom:3px}.sample-text{margin:0;font-size:11px;color:#595959;line-height:1.3;font-style:italic;background:#fafafa;padding:6px;border-radius:4px;border-left:2px solid #d9d9d9}.voice-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid #f0f0f0;gap:8px}.voice-id{display:flex;align-items:center;gap:4px;min-width:0;flex:1}.id-label{font-size:10px;color:#8c8c8c;text-transform:uppercase;letter-spacing:.5px;font-weight:500;white-space:nowrap}.id-value{font-size:10px;color:#595959;background:#f5f5f5;padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;word-break:break-all}.voice-status{display:flex;align-items:center}.status-indicator{font-size:10px;font-weight:500;padding:2px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px}.status-indicator.supported{background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f}.status-indicator.not-supported{background:#fff2e8;color:#fa8c16;border:1px solid #ffd591}@media (max-width: 768px){.voice-info-grid{grid-template-columns:1fr}.voice-card-header{flex-direction:column;align-items:stretch}.voice-card-footer{flex-direction:column;align-items:stretch;gap:8px}.voice-id{justify-content:space-between}}.voice-group{margin-bottom:16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 1px 3px #0000000d}.voice-group-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fafafa;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.voice-group-header:hover{background:#f0f0f0}.voice-group-header:focus{outline:none;background:#e6f7ff;border-color:#4096ff}.group-title-container{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.group-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#4096ff1a;transition:all .2s ease}.voice-group-header:hover .group-icon{background:#4096ff26;transform:scale(1.05)}.group-title{margin:0;font-size:18px;font-weight:600;color:#262626;line-height:1.3}.voice-count{font-size:12px;color:#8c8c8c;background:#f0f0f0;padding:4px 8px;border-radius:12px;font-weight:500;white-space:nowrap}.group-actions{display:flex;align-items:center;gap:8px}.expand-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transition:all .2s ease}.expand-icon.expanded{transform:rotate(180deg)}.expand-icon:hover{background:#4096ff1a}.voice-group-content{padding:16px;background:#fff}.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.no-voices-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:#8c8c8c}.no-voices-message .material-icons{font-size:48px;margin-bottom:16px;opacity:.5}.no-voices-message p{margin:0;font-size:14px;line-height:1.5}@media (max-width: 768px){.voice-group-header{padding:12px 16px}.group-title-container{gap:8px}.group-title{font-size:16px}.voice-count{font-size:11px;padding:3px 6px}.voice-group-content{padding:12px}.voice-grid{grid-template-columns:1fr;gap:8px}}@media (max-width: 480px){.group-title-container{flex-direction:column;align-items:flex-start;gap:4px}.voice-count{align-self:flex-start}}:root{--color-primary: #4096ff;--color-primary-hover: #1677ff;--color-primary-light: #e6f7ff;--color-success: #52c41a;--color-success-light: #f6ffed;--color-warning: #fa8c16;--color-warning-light: #fff2e8;--color-error: #ff4d4f;--color-error-light: #fff1f0;--color-text-primary: #262626;--color-text-secondary: #595959;--color-text-tertiary: #8c8c8c;--color-border: #d9d9d9;--color-border-light: #f0f0f0;--color-background: #ffffff;--color-background-light: #fafafa;--color-background-hover: #f5f5f5;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--border-radius-xl: 12px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 20px;--font-size-3xl: 24px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--shadow-xl: 0 8px 24px rgba(0, 0, 0, .2);--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}.voice-selector-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn var(--transition-normal)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.voice-selector-dialog{background:var(--color-background);border-radius:var(--border-radius-xl);box-shadow:0 20px 60px #0000004d;width:90vw;max-width:1000px;max-height:90vh;display:flex;flex-direction:column;animation:slideIn var(--transition-normal);overflow:hidden;margin:0 auto;position:relative}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-2xl);border-bottom:1px solid var(--color-border-light);background:var(--color-background-light);position:relative}.dialog-header:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-success));border-radius:1px}.dialog-title{margin:0;font-size:var(--font-size-3xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:1.3}.dialog-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.dialog-content{flex:1;padding:var(--spacing-2xl);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-2xl)}.search-and-filters{display:flex;flex-direction:column;gap:var(--spacing-lg)}.search-container{width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:var(--spacing-md);color:var(--color-text-tertiary);font-size:18px;z-index:1}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 40px;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);font-size:var(--font-size-md);background:var(--color-background);transition:all var(--transition-normal)}.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #4096ff1a}.search-input:disabled{background:var(--color-background-hover);cursor:not-allowed}.clear-search-button{position:absolute;right:var(--spacing-sm)}.filters-container{background:var(--color-background-light);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);animation:slideDown var(--transition-normal)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.filter-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:var(--spacing-lg);align-items:end}.filter-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.filter-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.filter-select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--font-size-sm);background:var(--color-background);transition:all var(--transition-normal)}.filter-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #4096ff1a}.filter-select:disabled{background:var(--color-background-hover);cursor:not-allowed}.manual-input-section{background:var(--color-background-light);border:1px solid var(--color-border-light);border-radius:var(--border-radius-lg);padding:var(--spacing-lg)}.input-mode-toggle{margin-bottom:var(--spacing-lg)}.manual-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.input-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.manual-input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-size:var(--font-size-sm);background:var(--color-background);transition:all var(--transition-normal)}.manual-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #4096ff1a}.manual-input:disabled{background:var(--color-background-hover);cursor:not-allowed}.manual-input-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-border-light)}.voice-groups-container{flex:1;overflow-y:auto;min-height:400px}.loading-container,.error-container,.no-voices-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl);text-align:center;color:var(--color-text-tertiary);min-height:300px}.loading-icon,.error-icon{font-size:48px;margin-bottom:var(--spacing-lg);opacity:.7}.loading-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{color:var(--color-error)}.error-container p{margin:0 0 var(--spacing-lg) 0;font-size:var(--font-size-md);line-height:1.5}.no-voices-container{color:var(--color-text-tertiary)}.no-voices-container p{margin:0;font-size:var(--font-size-md);line-height:1.5}.voice-groups{display:flex;flex-direction:column;gap:var(--spacing-lg)}.dialog-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-2xl);border-top:1px solid var(--color-border-light);background:var(--color-background-light);gap:var(--spacing-lg)}.selected-voice-info{flex:1}.selected-voice{display:flex;flex-direction:column;gap:var(--spacing-xs)}.selected-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.selected-value{font-size:var(--font-size-md);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);background:var(--color-primary-light);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);border:1px solid var(--color-primary)}.selected-id{font-size:var(--font-size-xs);color:var(--color-text-tertiary);background:var(--color-background-hover);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin-top:var(--spacing-xs)}.dialog-buttons{display:flex;align-items:center;gap:var(--spacing-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid transparent;border-radius:var(--border-radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:1.5;cursor:pointer;transition:all var(--transition-normal);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:#fff;color:var(--color-text-secondary);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-icon{padding:var(--spacing-sm);min-width:36px;background:#fff;color:var(--color-text-tertiary);border-color:var(--color-border)}.btn-icon:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-light)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);min-height:28px}.btn-md{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);min-height:32px}.btn-lg{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-md);min-height:40px}.material-icons{font-size:18px;line-height:1}@media (max-width: 768px){.voice-selector-dialog-overlay{padding:10px}.voice-selector-dialog{width:95vw;max-height:95vh}.dialog-header{padding:var(--spacing-lg)}.dialog-title{font-size:var(--font-size-2xl)}.dialog-content{padding:var(--spacing-lg)}.filter-row{grid-template-columns:1fr;gap:var(--spacing-md)}.manual-inputs{grid-template-columns:1fr}.dialog-footer{flex-direction:column;align-items:stretch;gap:var(--spacing-md)}.dialog-buttons{justify-content:center}}@media (max-width: 480px){.voice-selector-dialog-overlay{padding:5px}.voice-selector-dialog{width:98vw}.dialog-header{padding:var(--spacing-md)}.dialog-title{font-size:var(--font-size-xl)}.dialog-content,.dialog-footer{padding:var(--spacing-md)}}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#1a1a1a;background-color:#f5f7fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh}button{font-family:inherit}button,input,select{-webkit-user-select:none;user-select:none}:focus-visible{outline:2px solid #4096ff;outline-offset:2px}