*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;color:#333}.container{width:100%;max-width:600px;padding:20px}.card{background:#fff;border-radius:12px;padding:40px;box-shadow:0 10px 40px #0003;text-align:center}.call-card{max-width:700px}h1{font-size:32px;margin-bottom:16px;color:#333}.subtitle{font-size:16px;color:#666;margin-bottom:32px}.btn{background:#667eea;color:#fff;border:none;border-radius:8px;padding:14px 32px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.btn:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn:active{transform:translateY(0)}.btn-primary{font-size:18px;padding:16px 40px}.btn-small{padding:8px 16px;font-size:14px}.status-section{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;margin:24px 0;padding:20px;background:#f7f7f7;border-radius:8px}.status-item{display:flex;flex-direction:column;align-items:center;gap:8px}.status-label{font-size:14px;color:#666;font-weight:500}.status-value{font-size:18px;font-weight:700}.status-connecting{color:#f59e0b}.status-connected{color:#10b981}.status-error{color:#ef4444}.room-info{margin:24px 0;text-align:left}.room-label{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.room-id-container{display:flex;align-items:center;gap:12px}.room-id{flex:1;background:#f7f7f7;padding:12px 16px;border-radius:6px;font-family:Courier New,monospace;font-size:14px;color:#667eea;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.microphone-section{margin:24px 0;text-align:left}.microphone-container{display:flex;align-items:center;gap:12px}.microphone-select{flex:1;background:#f7f7f7;padding:12px 16px;border-radius:6px;font-size:14px;color:#333;border:1px solid #e5e5e5;cursor:pointer;transition:all .2s}.microphone-select:hover:not(:disabled){background:#efefef;border-color:#667eea}.microphone-select:disabled{cursor:not-allowed;opacity:.6}.microphone-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.audio-effects-section{margin:24px 0;padding:20px;background:#f0f4ff;border-radius:8px;text-align:left}.control-row{display:flex;align-items:center;gap:12px;margin-top:12px}.control-label{font-size:14px;color:#333;font-weight:500;display:flex;align-items:center;gap:8px;cursor:pointer}.control-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#667eea}.sample-rate-select{flex:1;background:#fff;padding:10px 14px;border-radius:6px;font-size:14px;color:#333;border:1px solid #d1d5db;cursor:pointer;transition:all .2s}.sample-rate-select:hover{background:#f9fafb;border-color:#667eea}.sample-rate-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-icon{padding:10px 14px;font-size:16px;min-width:auto}.error-message{background:#fee2e2;color:#991b1b;padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;text-align:left}.info-message{margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5;text-align:left}.info-message p{font-size:14px;color:#666;margin-bottom:8px;line-height:1.5}@media (max-width: 600px){.card{padding:24px}h1{font-size:24px}.status-section{flex-direction:column;gap:16px}.room-id-container{flex-direction:column}.room-id{width:100%}.microphone-container{gap:8px}.microphone-select{font-size:13px}}