:root{--bg-app:#0a0a0a;--bg-card:#121212;--bg-input:#1a1a1a;--text-primary:#f5f5f5;--text-secondary:#8a8a8a;--text-muted:#555;--border-color:#222;--border-color-focus:#444;--accent-color:#fff;--accent-color-hover:#e6e6e6;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--transition:all .2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);width:100%;height:100%;font-size:16px;position:fixed;inset:0;overflow:hidden}#app{width:100%;height:100%}.app-container{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);background-color:var(--bg-app);width:100%;max-width:600px;padding-top:env(safe-area-inset-top,10px);flex-direction:column;padding-bottom:0;display:flex;position:fixed;top:0;bottom:0;left:50%;transform:translate(-50%)}.app-header{border-bottom:1px solid var(--border-color);z-index:10;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.header-left h1{letter-spacing:-.02em;font-size:1.25rem;font-weight:600;line-height:1.2}.header-left{flex-direction:column;gap:4px;display:flex}.status-badge{text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--border-color);border-radius:20px;align-items:center;gap:6px;width:fit-content;padding:2px 8px;font-size:.7rem;font-weight:500;display:flex}.status-badge:before{content:"";border-radius:50%;width:6px;height:6px;display:inline-block}.status-badge.disconnected{color:var(--text-secondary)}.status-badge.disconnected:before{background-color:var(--text-muted)}.status-badge.connecting{color:var(--text-primary);animation:1.5s infinite pulse}.status-badge.connecting:before{background-color:var(--text-secondary)}.status-badge.connected{color:var(--accent-color);border-color:var(--text-secondary)}.status-badge.connected:before{background-color:var(--accent-color)}.icon-btn{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;width:40px;height:40px;transition:var(--transition);background:0 0;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-btn:hover{background-color:var(--bg-card);border-color:var(--border-color-focus)}.icon-btn:active{transform:scale(.95)}.log-container{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.log-section{flex-direction:column;flex:1;min-height:0;padding:16px 20px;display:flex;overflow:hidden}.log-section.input-section{border-bottom:1px solid var(--border-color)}.section-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.section-header h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;font-weight:500}.lang-tag{color:var(--text-muted);border:1px solid var(--border-color);border-radius:4px;padding:2px 8px;font-size:.75rem}.log-area{scroll-behavior:smooth;flex-direction:column;flex:1;gap:12px;padding-right:4px;display:flex;overflow-y:auto}.log-placeholder{color:var(--text-muted);text-align:center;justify-content:center;align-items:center;height:100%;font-size:.9rem;font-weight:300;display:flex}.log-entry{word-break:break-all;border-radius:var(--radius-sm);background-color:var(--bg-card);border-left:2px solid var(--text-muted);width:fit-content;max-width:90%;padding:8px 12px;font-size:1rem;line-height:1.5;animation:.3s ease-out slideIn}.log-entry.interim{color:var(--text-secondary);border-left-style:dashed}.log-entry.final{color:var(--text-primary);border-left-color:var(--accent-color)}.controls-container{border-top:1px solid var(--border-color);background-color:var(--bg-card);z-index:10;flex-direction:column;gap:8px;padding:10px 20px 0;display:flex}.visualizer-container{background-color:var(--bg-app);border:1px solid var(--border-color);border-radius:var(--radius-sm);align-items:center;height:40px;display:flex;overflow:hidden}#visualizer-canvas{width:100%;height:100%}.control-row{gap:16px;width:100%;display:flex}.control-group{flex-direction:column;flex:1;gap:6px;display:flex}.control-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}select{background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;width:100%;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:10px 32px 10px 12px;font-size:.85rem}select:focus{border-color:var(--border-color-focus)}.volume-control{flex:1.2}.volume-label{align-items:center;gap:4px;display:flex}.slider-wrapper{background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);align-items:center;gap:10px;height:38px;padding:8px 12px;display:flex}.slider-wrapper input[type=range]{-webkit-appearance:none;background:var(--border-color);border-radius:2px;outline:none;flex:1;height:3px}.slider-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-color);cursor:pointer;width:12px;height:12px;transition:var(--transition);border-radius:50%}.slider-wrapper input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}#volume-value{color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums;min-width:35px;font-size:.8rem}.device-row{gap:16px;display:flex}@media (width<=480px){.control-row,.device-row{flex-direction:column;gap:12px}.log-section{padding:12px 16px}}.action-row{gap:12px;margin-top:2px;margin-bottom:0;display:flex;position:relative;bottom:-8px}.action-btn{font-family:var(--font-sans);cursor:pointer;transition:var(--transition);border:1px solid #0000;border-radius:12px 12px 6px 6px;outline:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-size:.95rem;font-weight:600;display:flex}.action-btn.start-btn{background-color:var(--accent-color);color:var(--bg-app)}.action-btn.start-btn:hover{background-color:var(--accent-color-hover)}.action-btn.stop-btn{background-color:var(--bg-input);border-color:var(--border-color);color:var(--text-primary)}.action-btn.stop-btn:hover:not(:disabled){border-color:var(--border-color-focus);background-color:var(--bg-card)}.action-btn:disabled{opacity:.3;cursor:not-allowed}.action-btn:active:not(:disabled){transform:scale(.98)}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background-color:#000000d9;justify-content:center;align-items:center;padding:20px;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);flex-direction:column;gap:16px;width:100%;max-width:400px;max-height:90dvh;padding:24px;animation:.3s cubic-bezier(.34,1.56,.64,1) scaleUp;display:flex;overflow-y:auto}.modal-content h2{letter-spacing:-.01em;font-size:1.25rem;font-weight:600}.modal-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.form-group input{background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-sans);transition:var(--transition);outline:none;padding:12px;font-size:.95rem}.form-group input:focus{border-color:var(--border-color-focus)}.api-help{color:var(--text-muted);font-size:.75rem;line-height:1.4}.modal-actions{gap:12px;margin-top:10px;display:flex}.btn{border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:var(--transition);border:1px solid #0000;outline:none;flex:1;padding:12px;font-size:.9rem;font-weight:500}.btn.primary-btn{background-color:var(--accent-color);color:var(--bg-app)}.btn.primary-btn:hover{background-color:var(--accent-color-hover)}.btn.secondary-btn{border-color:var(--border-color);color:var(--text-primary);background-color:#0000}.btn.secondary-btn:hover{background-color:var(--bg-input);border-color:var(--border-color-focus)}.toast{background-color:var(--text-primary);color:var(--bg-app);z-index:2000;pointer-events:none;white-space:nowrap;border-radius:30px;padding:12px 24px;font-size:.85rem;font-weight:500;transition:opacity .3s,transform .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}.toast.hidden{opacity:0;transform:translate(-50%,10px)}.hidden{display:none!important}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}