:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;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;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.audio-source-selector{padding:1.5rem;border:1px solid #ccc;border-radius:8px;margin-top:1.5rem}.audio-source-selector h3{margin-top:0;margin-bottom:1rem}.source-type-selector{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.source-type-selector label{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem;border:1px solid #ddd;border-radius:4px;transition:background-color .2s}.source-type-selector label:hover{background-color:#f5f5f5}.source-type-selector input[type=radio]{cursor:pointer}.source-type-selector input[type=radio]:disabled{cursor:not-allowed}.source-type-selector label:has(input:disabled){opacity:.5;cursor:not-allowed}.source-type-selector label:has(input:disabled):hover{background-color:transparent}.device-selector{margin-bottom:1.5rem}.device-selector label{display:block;margin-bottom:.5rem;font-weight:500}.device-selector select{width:100%;padding:.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;background-color:#fff;cursor:pointer}.device-selector select:focus{outline:none;border-color:#646cff}.device-selector select:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}.warning-message{padding:.75rem;background-color:#fff3cd;border:1px solid #ffc107;border-radius:4px;margin-bottom:1rem;color:#856404}.info-message{padding:.75rem;background-color:#e3f2fd;border:1px solid #2196f3;border-radius:4px;margin-bottom:1rem;color:#0d47a1}.info-message p:first-child{margin-top:0}.info-message p:last-child{margin-bottom:0}.audio-source-selector button{width:100%;margin-top:1rem}.audio-level-meter{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:#f5f5f5;border-radius:4px;margin-top:1rem}.meter-label{font-weight:500;min-width:80px}.meter-container{flex:1;height:24px;background-color:#e0e0e0;border-radius:12px;overflow:hidden;position:relative}.meter-bar{height:100%;border-radius:12px;background:linear-gradient(90deg,#4caf50,#8bc34a)}.meter-bar.low{background:linear-gradient(90deg,#4caf50,#8bc34a)}.meter-bar.medium{background:linear-gradient(90deg,#ffc107,#ff9800)}.meter-bar.high{background:linear-gradient(90deg,#ff5722,#f44336)}.meter-value{min-width:45px;text-align:right;font-weight:500;font-size:.875rem;color:#666}.audio-mixer-controls{padding:1rem;background-color:#f5f5f5;border-radius:8px;margin:1rem 0}.audio-mixer-controls h3{margin:0 0 1rem;font-size:1.1rem;color:#333}.mixer-control{margin-bottom:1.5rem}.mixer-control label{display:block;margin-bottom:.5rem;font-weight:500;color:#555}.gain-slider{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.gain-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer;transition:background .2s}.gain-slider::-webkit-slider-thumb:hover{background:#45a049}.gain-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer;border:none;transition:background .2s}.gain-slider::-moz-range-thumb:hover{background:#45a049}.mixer-info{margin-top:1rem;padding:.75rem;background-color:#e3f2fd;border-left:4px solid #2196F3;border-radius:4px}.mixer-info p{margin:0;font-size:.9rem;color:#1976d2}#root{max-width:1280px;margin:0 auto;padding:2rem}.form-group{margin-bottom:1.5rem;text-align:left}.form-group label{display:block;margin-bottom:.5rem;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#646cff}.form-group input[aria-invalid=true]{border-color:#f44336}.form-group input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}.error-message{display:block;color:#f44336;font-size:.875rem;margin-top:.25rem}.error-message.general-error{padding:.75rem;background-color:#ffebee;border:1px solid #f44336;border-radius:4px;margin-bottom:1rem;text-align:center}.error-message.warning{color:#ff9800;background-color:#fff3e0;border:1px solid #ff9800;padding:.75rem;border-radius:4px;margin-bottom:1rem}.error-message .retry-button{margin-left:1rem;padding:.5rem 1rem;font-size:.875rem;background-color:#646cff;color:#fff;border:none;border-radius:4px;cursor:pointer}.error-message .retry-button:hover{background-color:#535bf2}.help-text{display:block;color:#666;font-size:.875rem;margin-top:.25rem}button{padding:.75rem 1.5rem;font-size:1rem;border-radius:4px;border:none;cursor:pointer;transition:background-color .2s}button.primary-button,button[type=submit]{background-color:#646cff;color:#fff}button.primary-button:hover,button[type=submit]:hover{background-color:#535bf2}button.secondary-button{background-color:#888;color:#fff;margin-top:1rem}button.secondary-button:hover{background-color:#666}button.warning-button{background-color:#ff9800;color:#fff}button.warning-button:hover{background-color:#f57c00}button.danger-button{background-color:#f44336;color:#fff}button.danger-button:hover{background-color:#d32f2f}button.link-button{background:none;color:#646cff;padding:0;text-decoration:underline}button.link-button:hover{color:#535bf2}button:disabled{opacity:.6;cursor:not-allowed}.login-container,.create-session-container,.dashboard-container{max-width:600px;margin:0 auto;padding:2rem}.login-container h1,.create-session-container h1,.dashboard-container h1{margin-bottom:1rem}.login-container form,.create-session-container form{margin-top:2rem}.session-info,.streaming-controls,.session-actions{margin-top:2rem;padding:1.5rem;border:1px solid #ccc;border-radius:8px}.info-item{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.info-item label{font-weight:500;min-width:120px}.info-item span{flex:1}.info-item span.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-item button{padding:.5rem 1rem;font-size:.875rem}.streaming-controls{text-align:center}.streaming-controls .status{margin-top:1rem;font-size:1.25rem;font-weight:500}.session-actions{text-align:center}.active-stream-info{padding:1rem;background-color:#e8f5e9;border:1px solid #4caf50;border-radius:4px;margin-bottom:1rem}.active-stream-info p{margin:.5rem 0}.active-stream-info p:first-child{margin-top:0}.active-stream-info p:last-child{margin-bottom:0}.join-session-container,.listen-container{max-width:600px;margin:0 auto;padding:2rem}.join-session-container h1,.listen-container h1{margin-bottom:1rem}.join-session-container form{margin-top:2rem}.join-session-container .info-section{margin-top:2rem;padding:1.5rem;background-color:#f5f5f5;border-radius:8px;text-align:center}.join-session-container .info-section p{margin:.5rem 0}.join-session-container .loading-message{text-align:center;padding:2rem;font-size:1.125rem}.listen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #ccc}.listen-header h1{margin:0;font-size:1.5rem}.connection-status{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:4px;font-size:.875rem;font-weight:500}.status-indicator{width:10px;height:10px;border-radius:50%;display:inline-block}.status-connected{background-color:#e8f5e9;color:#2e7d32}.status-connected .status-indicator{background-color:#4caf50;animation:pulse 2s infinite}.status-connecting{background-color:#fff3e0;color:#f57c00}.status-connecting .status-indicator{background-color:#ff9800;animation:pulse 1s infinite}.status-error{background-color:#ffebee;color:#c62828}.status-error .status-indicator{background-color:#f44336}.status-ended{background-color:#f5f5f5;color:#666}.status-ended .status-indicator{background-color:#999}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.listen-content{text-align:center}.session-info{margin-bottom:2rem}.session-info h2{margin:0 0 .5rem;font-size:1.75rem}.session-info .host-name{color:#666;font-size:1rem;margin:0}.info-message{padding:1.5rem;background-color:#e3f2fd;border:1px solid #2196f3;border-radius:8px;margin:2rem 0}.info-message p{margin:.5rem 0}.audio-controls{margin:2rem 0;padding:1.5rem;background-color:#f5f5f5;border-radius:8px}.volume-control{display:flex;flex-direction:column;align-items:center;gap:1rem}.volume-control label{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:1rem}.volume-icon{font-size:1.5rem}.volume-control input[type=range]{width:100%;max-width:400px;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#646cff;cursor:pointer}.volume-control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#646cff;cursor:pointer;border:none}.volume-value{font-size:.875rem;color:#666;min-width:50px}.reconnection-info{padding:1.5rem;background-color:#fff3e0;border:1px solid #ff9800;border-radius:8px;margin:2rem 0}.reconnection-info p{margin:0 0 1rem}.retry-button{background-color:#ff9800;color:#fff;padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.retry-button:hover{background-color:#f57c00}.action-buttons{margin-top:2rem}.leave-button{background-color:#888;color:#fff;padding:.75rem 2rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.leave-button:hover{background-color:#666}.leave-button:disabled{opacity:.6;cursor:not-allowed}.session-ended-notification{padding:3rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;margin:2rem 0;text-align:center;box-shadow:0 4px 12px #00000026}.session-ended-notification .ended-icon{font-size:4rem;margin-bottom:1rem;animation:fadeIn .5s ease-in}.session-ended-notification h3{margin:0 0 1rem;font-size:2rem;font-weight:600}.session-ended-notification p{margin:.5rem 0;font-size:1.125rem;opacity:.95}.session-ended-notification .primary-button{margin-top:1.5rem;background-color:#fff;color:#667eea;font-weight:600;padding:.875rem 2rem;font-size:1rem}.session-ended-notification .primary-button:hover{background-color:#f5f5f5;transform:translateY(-2px);box-shadow:0 4px 8px #0003}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.start-playback-button{background-color:#646cff;color:#fff;padding:.875rem 2rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;margin-top:1rem}.start-playback-button:hover{background-color:#535bf2}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e0e0e0}.dashboard-header h1{margin:0;font-size:2rem}.user-info{display:flex;align-items:center;gap:1rem}.user-name{font-size:1rem;color:#666}.logout-button{background-color:#888;color:#fff;padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem}.logout-button:hover{background-color:#666}.dashboard-main{text-align:center}.dashboard-main h2{margin-bottom:2rem;font-size:1.5rem;color:#333}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.action-card{background-color:#f9f9f9;border:2px solid #e0e0e0;border-radius:12px;padding:2rem;text-align:center;transition:transform .2s,box-shadow .2s}.action-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a;border-color:#646cff}.card-icon{font-size:4rem;margin-bottom:1rem}.action-card h3{margin:0 0 1rem;font-size:1.5rem;color:#333}.action-card p{color:#666;line-height:1.6;margin-bottom:1.5rem;min-height:4rem}.action-card .primary-button{width:100%;max-width:200px;padding:.75rem 1.5rem;font-size:1rem}