:root{--primary-color: #8a3ffc;--secondary-color: #ff7eb6;--background-color: #1a1a2e;--tile-background: rgba(255, 255, 255, .05);--text-color: #e0e0e0;--header-background: transparent;--border-color: rgba(255, 255, 255, .1);--success-color: #42f5a3;--error-color: #ff7575;--warning-color: #ffd166;--info-color: #66d9ef;--font-family: "Inter", sans-serif;--glass-blur: 15px;--border-radius: 16px}body{font-family:var(--font-family);background-color:var(--background-color);background-image:url(https://www.transparenttextures.com/patterns/stardust.png);color:var(--text-color);margin:0;padding:20px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;overflow-y:auto}.container{width:100%;max-width:1400px;background:transparent;border-radius:15px;box-shadow:0 10px 30px #0003;overflow:hidden}.header{background:linear-gradient(135deg,#8a3ffc0d,#ff7eb60d);padding:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.logo{display:flex;align-items:center}.logo-icon{font-size:2rem;margin-right:15px;color:var(--secondary-color)}.logo-text h1{margin:0;font-size:1.5rem}.logo-text p{margin:0;font-size:.9rem;opacity:.8}.status-bar{display:flex;align-items:center;gap:20px}.status{display:flex;align-items:center;gap:8px}#status-indicator{width:12px;height:12px;border-radius:50%;transition:background-color .3s}#status-indicator.disconnected{background-color:var(--error-color)}#status-indicator.connected{background-color:var(--success-color)}#status-indicator.connecting{background-color:var(--warning-color);animation:pulse 1.5s infinite}.controls button{padding:10px 20px;border:none;border-radius:var(--border-radius);background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.controls button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.main-content{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding:20px}.left-panel,.right-panel{display:flex;flex-direction:column;gap:20px}.tile{background:var(--tile-background);padding:25px;border-radius:var(--border-radius);border:1px solid var(--border-color);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:0 8px 32px #0000005e;transition:all .3s ease;position:relative;overflow:hidden}.tile:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .5s ease}.tile:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000080;border-color:#8a3ffc4d}.tile:hover:before{left:100%}.tile h3,.tile h4,.tile h5{margin-top:0;border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:15px;display:flex;align-items:center;gap:10px}.voice-controls{text-align:center;position:relative;overflow:hidden;padding-top:40px;padding-bottom:40px}.voice-status-container{display:flex;justify-content:space-between;width:100%;position:absolute;top:80px;left:0;padding:0 50px;box-sizing:border-box}.status-indicator{display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .3s ease}.status-indicator.active{opacity:1}.status-indicator .dot{width:10px;height:10px;background-color:var(--text-color);border-radius:50%;animation:pulse-indicator 1.5s infinite}.voice-buttons{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:60px;margin-bottom:30px;position:relative}.dots-container{display:flex;gap:5px;align-items:center;position:absolute;opacity:0;transition:opacity .3s ease;height:20px}.dots-container.active{opacity:1}.dots-container .dot{width:6px;height:6px;background-color:var(--secondary-color);border-radius:50%;animation:wave 1.2s infinite ease-in-out}.dots-container .dot:nth-child(2){animation-delay:-1.1s}.dots-container .dot:nth-child(3){animation-delay:-1s}.dots-container .dot:nth-child(4){animation-delay:-.9s}.dots-container .dot:nth-child(5){animation-delay:-.8s}.dots-container .dot:nth-child(6){animation-delay:-.7s}.dots-container .dot:nth-child(7){animation-delay:-.6s}.dots-container .dot:nth-child(8){animation-delay:-.5s}.dots-container .dot:nth-child(9){animation-delay:-.4s}.dots-container .dot:nth-child(10){animation-delay:-.3s}.listen-btn,.stop-btn{width:70px;height:70px;border-radius:50%;border:none;font-size:1.8rem;color:#fff;cursor:pointer;transition:all .3s;display:flex;justify-content:center;align-items:center;z-index:10}.listen-btn{background:linear-gradient(45deg,#00f2a0,#00d488);box-shadow:0 4px 20px #00f2a066;position:relative}.listen-btn:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background:transparent;border:2px solid rgba(0,242,160,.5);animation:pulseRing 2s infinite}.listen-btn:hover{transform:scale(1.1);box-shadow:0 6px 30px #00f2a099}@keyframes pulseRing{0%{width:100%;height:100%;opacity:1}to{width:150%;height:150%;opacity:0}}.stop-btn{background:linear-gradient(45deg,#f0f0f0,#e0e0e0);color:#333;box-shadow:0 4px 20px #ffffff4d;position:relative}.stop-btn:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background:transparent;border:2px solid rgba(240,240,240,.5);animation:pulseRing 2s infinite}.stop-btn:hover{transform:scale(1.1);box-shadow:0 6px 30px #ffffff80}.stop-btn:disabled{background-color:#5a6268;cursor:not-allowed;transform:scale(1);box-shadow:none;opacity:.5}.voice-status{font-style:italic;opacity:.8}.active-pipeline{font-size:.9rem;opacity:.7;margin-top:10px}.setting,.setting-group,.setting-toggle{margin-bottom:15px}.setting label,.setting-toggle label{display:block;margin-bottom:5px;font-weight:700}.setting-toggle{display:flex;justify-content:space-between;align-items:center}.setting-toggle.large-toggle{padding:15px;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:#0000001a}.setting-toggle.large-toggle label{font-size:1.1rem;font-weight:700}.setting-toggle.large-toggle input[type=checkbox]{transform:scale(1.5);cursor:pointer}select,textarea,input[type=password]{width:100%;padding:12px;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:#0003;color:var(--text-color);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-sizing:border-box;font-family:var(--font-family);font-size:1rem;transition:all .3s ease}select:hover,input[type=password]:hover{border-color:#8a3ffc66;background-color:#0000004d}select:focus,textarea:focus,input[type=password]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 15px #8a3ffc33;background-color:#00000059}input[type=password]::placeholder{color:#fff6}.debug-container .debug-log{height:250px;overflow-y:auto;background:#0003;padding:15px;border-radius:var(--border-radius);font-family:Fira Code,Courier New,Courier,monospace;font-size:.9rem;border:1px solid var(--border-color)}.log-entry{margin-bottom:5px;display:flex;gap:10px}.log-time{color:#888}.log-level{font-weight:700}.log-level.info{color:var(--info-color)}.log-level.warning{color:var(--warning-color)}.log-level.error{color:var(--error-color)}.system-status .status-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-color)}.system-status .status-item:last-child{border-bottom:none}.light{padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:700;border:1px solid transparent;transition:all .3s}.light.active{background-color:#42f5a333;border-color:var(--success-color);color:var(--success-color);box-shadow:0 0 15px #42f5a366;animation:glowPulse 2s ease-in-out infinite}.light.inactive{background-color:#5a626833;border-color:#5a6268;color:#ccc}.light.idle{background-color:#66d9ef33;border-color:var(--info-color);color:var(--info-color);box-shadow:0 0 12px #66d9ef4d}.light.silent{background-color:#343a4033;border-color:#343a40;color:#ccc}@keyframes glowPulse{0%,to{box-shadow:0 0 15px #42f5a366}50%{box-shadow:0 0 25px #42f5a399}}@keyframes pulse{0%{box-shadow:0 0 #ffc107b3}70%{box-shadow:0 0 0 10px #ffc10700}to{box-shadow:0 0 #ffc10700}}@keyframes pulse-indicator{0%{transform:scale(.95);box-shadow:0 0 #ffffffb3}70%{transform:scale(1);box-shadow:0 0 0 10px #fff0}to{transform:scale(.95);box-shadow:0 0 #fff0}}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-15px)}}.tabs{display:flex;margin-bottom:20px;border-bottom:1px solid var(--border-color);gap:10px}.tab-btn{padding:15px 25px;cursor:pointer;background:none;border:none;color:var(--text-color);opacity:.7;transition:all .3s ease;border-bottom:3px solid transparent;display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:500;position:relative}.tab-btn:after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transition:width .3s ease}.tab-btn:hover{opacity:.9;transform:translateY(-2px)}.tab-btn.active{opacity:1;color:var(--secondary-color);border-bottom-color:transparent}.tab-btn.active:after{width:100%}.config-panel{display:none}.config-panel.active{display:block}.api-configuration .setting{margin-bottom:0}.footer{text-align:center;padding:20px;font-size:.9rem;color:#ffffff80}.system-instructions{margin-top:25px;padding:20px;background:linear-gradient(135deg,#8a3ffc1a,#ff7eb61a);border-radius:var(--border-radius);border:2px solid transparent;background-clip:padding-box;position:relative;animation:fadeIn .5s ease-in}.system-instructions:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius);padding:2px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:borderGlow 3s ease-in-out infinite}.system-instructions h5{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:15px;padding-bottom:12px;border-bottom:2px solid var(--border-color);display:flex;align-items:center;gap:10px}.system-instructions h5:before{content:"✨";font-size:1.3rem;-webkit-text-fill-color:initial}.system-instructions textarea{min-height:200px;font-size:1.05rem;line-height:1.6;padding:18px;background:#0000004d;border:1px solid rgba(138,63,252,.3);transition:all .3s ease;resize:vertical}.system-instructions textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 20px #8a3ffc4d;background:#0006}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes borderGlow{0%,to{opacity:.6}50%{opacity:1}}.transcription-log{height:300px;overflow-y:auto;background:#0003;padding:15px;border-radius:var(--border-radius);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:10px}.empty-log{text-align:center;color:#ffffff4d;font-style:italic;margin-top:130px}.chat-message{padding:10px 15px;border-radius:12px;max-width:85%;line-height:1.4;font-size:.95rem;position:relative;animation:messageSlideIn .3s ease-out}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.user{align-self:flex-end;background:linear-gradient(135deg,#8a3ffc33,#8a3ffc1a);border:1px solid rgba(138,63,252,.3)}.chat-message.bot{align-self:flex-start;background:linear-gradient(135deg,#ff7eb633,#ff7eb61a);border:1px solid rgba(255,126,182,.3)}.message-label{font-size:.7rem;font-weight:700;text-transform:uppercase;margin-bottom:4px;display:block;opacity:.6}.metrics-display{display:grid;grid-template-columns:1fr 1fr;gap:15px}.metric-item{background:#0003;padding:12px;border-radius:12px;border:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;gap:5px}.metric-item span:first-child{font-size:.75rem;opacity:.6;font-weight:700}.metric-value{font-family:Fira Code,monospace;font-size:1.1rem;color:var(--secondary-color);font-weight:700}