@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap";:root{font-family:Rajdhani,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0f0c29;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}.App{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);padding:20px;font-family:Rajdhani,sans-serif}.radio-container{width:100%;max-width:500px;background:linear-gradient(145deg,#1a1a2e,#16213e);border-radius:30px;padding:40px;box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff1a,0 0 40px #4facfe33;border:2px solid rgba(79,172,254,.3);position:relative;overflow:hidden}.radio-container:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(79,172,254,.5) 50%,transparent 100%)}.radio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.radio-brand{display:flex;align-items:center;gap:5px}.exit-button{background:#f443;border:1px solid #ff4444;color:#f44;padding:5px 15px;border-radius:5px;cursor:pointer;font-family:Orbitron,sans-serif;font-size:.8rem;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.exit-button:hover{background:#f446;box-shadow:0 0 10px #ff444480}.radio-icon{width:3rem;height:3rem;filter:drop-shadow(0 0 10px rgba(79,172,254,.5));display:flex;align-items:center;justify-content:center}.radio-brand h1{font-family:Orbitron,sans-serif;font-size:1rem;font-weight:900;margin:0;background:linear-gradient(135deg,#4facfe,#00f2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;text-shadow:0 0 20px rgba(79,172,254,.3)}.connection-indicator{display:flex;align-items:center;gap:8px;font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:20px;background:#0000004d;border:1px solid rgba(255,255,255,.1)}.connection-indicator.connected{color:#0f8}.connection-indicator.disconnected{color:#f44}.indicator-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.radio-display{background:linear-gradient(145deg,#0a0a0a,#1a1a1a);border-radius:20px;padding:10px 25px 0;margin-bottom:33px;border:3px solid #2a2a3e;box-shadow:inset 0 2px 10px #000c,0 0 20px #4facfe1a;height:240px;position:relative;overflow:hidden}.radio-display:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,rgba(79,172,254,.03) 0px,transparent 1px,transparent 2px,rgba(79,172,254,.03) 3px);pointer-events:none}.display-content{position:relative;z-index:1;text-align:center}.frequency-display{font-family:Orbitron,sans-serif;font-size:3.5rem;font-weight:900;color:#4facfe;text-shadow:0 0 10px rgba(79,172,254,.8),0 0 20px rgba(79,172,254,.5),0 0 30px rgba(79,172,254,.3);letter-spacing:8px;animation:glow 2s ease-in-out infinite;pointer-events:none;-webkit-user-select:none;user-select:none}.frequency-display.small{font-size:2rem;margin-bottom:20px;letter-spacing:4px}.channel-selector{padding-top:15px;display:flex;flex-direction:column;align-items:center;gap:0px}.channel-btn{background:none;border:none;color:#4facfe;font-size:2.5rem;cursor:pointer;opacity:.6;transition:all .2s;padding:5px 40px;line-height:1;text-shadow:0 0 10px rgba(79,172,254,.5);display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.channel-btn:hover{opacity:1;transform:scale(1.2);text-shadow:0 0 20px rgba(79,172,254,.8)}@keyframes glow{0%,to{text-shadow:0 0 10px rgba(79,172,254,.8),0 0 20px rgba(79,172,254,.5),0 0 30px rgba(79,172,254,.3)}50%{text-shadow:0 0 15px rgba(79,172,254,1),0 0 30px rgba(79,172,254,.7),0 0 45px rgba(79,172,254,.5)}}.status-text{font-family:Orbitron,sans-serif;font-size:1.2rem;font-weight:700;color:#0f8;text-transform:uppercase;letter-spacing:3px;margin-bottom:10px}.tx-timer{position:absolute;top:15px;right:20px;font-family:Orbitron,monospace;font-size:1rem;color:#f44;text-shadow:0 0 10px rgba(255,68,68,.5);letter-spacing:2px;z-index:10}.speaker-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;animation:slideIn .3s ease-out}.speaker-icon{font-size:1.5rem}.speaker-name{font-family:Rajdhani,sans-serif;font-size:1.8rem;font-weight:700;color:#fff}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.s-meter-container{position:absolute;bottom:35px;left:20px;right:20px;padding:8px;background:#0000004d;border-radius:10px;border:1px solid rgba(79,172,254,.2);z-index:10}.s-meter-scale{display:flex;justify-content:space-between;padding:0 5px;margin-bottom:5px}.s-meter-scale span{font-family:Orbitron,sans-serif;font-size:.6rem;color:#4facfe99;font-weight:700}.s-meter-scale span.red{color:#f449}.s-meter-bar-wrapper{height:12px;background:#00000080;border-radius:3px;padding:2px;display:flex;align-items:center}.s-meter-bar{display:flex;gap:2px;width:100%;height:100%}.s-meter-segment{flex:1;height:100%;background:#4facfe1a;border-radius:1px;transition:all .05s ease}.s-meter-segment.active{background:#4facfe;box-shadow:0 0 5px #4facfecc}.s-meter-segment.green{background:#00ff881a}.s-meter-segment.green.active{background:#0f8;box-shadow:0 0 5px #0f8c}.s-meter-segment.red{background:#ff44441a}.s-meter-segment.red.active{background:#f44;box-shadow:0 0 5px #f44c}.s-meter-label{font-family:Orbitron,sans-serif;font-size:.5rem;color:#ffffff4d;text-align:right;margin-top:4px;letter-spacing:1px}.join-section{display:flex;flex-direction:column;gap:15px}.callsign-input{width:100%;padding:18px 24px;font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:600;color:#fff;background:#0006;border:2px solid rgba(79,172,254,.3);border-radius:15px;outline:none;text-align:center;letter-spacing:2px;transition:all .3s ease}.callsign-input::placeholder{color:#ffffff4d;text-transform:none;letter-spacing:1px}.callsign-input:focus{border-color:#4facfe;box-shadow:0 0 20px #4facfe4d;background:#0009}.join-button{padding:18px 24px;font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:2px;color:#fff;background:linear-gradient(135deg,#4facfe,#00f2fe);border:none;border-radius:15px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 20px #4facfe66;text-transform:uppercase}.join-button:hover{transform:translateY(-2px);box-shadow:0 8px 30px #4facfe99}.ptt-section{display:flex;justify-content:center;align-items:center;margin:20px 0;position:relative;min-height:220px}.ptt-button{width:200px;height:200px;border-radius:50%;border:4px solid #4facfe;background:linear-gradient(145deg,#1a1a2e,#0f0f1e);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:all .2s ease;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff1a,0 0 30px #4facfe4d;position:relative;overflow:hidden}.ptt-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(79,172,254,.3) 0%,transparent 70%);transform:translate(-50%,-50%);transition:all .3s ease}.ptt-button:hover:not(.disabled){transform:scale(1.05);border-color:#00f2fe;box-shadow:0 15px 40px #0009,inset 0 1px #fff3,0 0 40px #4facfe80}.ptt-button:active:not(.disabled){transform:scale(.98)}.ptt-button.active{border-color:#f44;background:linear-gradient(145deg,#2a1a1a,#1a0f0f);box-shadow:0 10px 30px #ff444480,inset 0 1px #ffffff1a,0 0 40px #ff444480;animation:pttPulse 1s ease-in-out infinite}.ptt-button.active:before{width:100%;height:100%;background:radial-gradient(circle,rgba(255,68,68,.2) 0%,transparent 70%)}.ptt-button.disabled{border-color:#444;background:linear-gradient(145deg,#222,#111);cursor:not-allowed;box-shadow:none;opacity:.7}.ptt-button.disabled:before{display:none}.ptt-button.disabled .ptt-text{color:#666}.ptt-button.disabled .ptt-hint{color:#555}@keyframes pttPulse{0%,to{box-shadow:0 10px 30px #ff444480,0 0 40px #ff444480}50%{box-shadow:0 10px 30px #ff4444b3,0 0 50px #ff4444b3}}.ptt-text{font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:2px;color:#fff;text-align:center;z-index:2}.ptt-hint{font-family:Rajdhani,sans-serif;font-size:.7rem;color:#ffffff80;text-align:center;z-index:2}.break-button{position:absolute;bottom:10px;right:20px;width:80px;height:80px;border-radius:50%;border:4px solid #1a1a1a;background:#333;cursor:pointer;padding:5px;box-shadow:0 5px 15px #00000080;transition:all .2s;z-index:10}.break-button:hover{transform:scale(1.1);box-shadow:0 8px 20px #ff44444d}.break-button:active{transform:scale(.95)}.break-button-inner{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#f44,#c00);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 5px #ffffff4d}.break-button-inner span{font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.break-alert{position:absolute;top:50%;left:50%;margin-top:60px;transform:translate(-50%,-50%);width:100%;font-family:Orbitron,sans-serif;font-size:2rem;font-weight:900;color:#f44;text-shadow:0 0 20px rgba(255,68,68,.8),0 0 40px rgba(255,68,68,.4);animation:flash .5s ease-in-out infinite;z-index:100;pointer-events:none}@keyframes flash{0%,to{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.3;transform:translate(-50%,-50%) scale(1.1)}}.radio-indicators{display:flex;justify-content:center;gap:30px;margin-top:30px;padding-top:20px;border-top:1px solid rgba(79,172,254,.2)}.indicator{display:flex;flex-direction:column;align-items:center;gap:8px}.indicator-label{font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:700;color:#ffffff80}.indicator-led{width:12px;height:12px;border-radius:50%;background:#333;border:2px solid #555;transition:all .3s ease}.indicator-led.on{background:#0f8;border-color:#0f8;box-shadow:0 0 10px #0f8c,0 0 20px #0f86}.indicator-led.on.tx{background:#f44;border-color:#f44;box-shadow:0 0 10px #f44c,0 0 20px #f446;animation:blink-led .5s ease-in-out infinite}@keyframes blink-led{0%,to{opacity:1}50%{opacity:.5}}.indicator-led.on.rx{background:#4facfe;border-color:#4facfe;box-shadow:0 0 10px #4facfecc,0 0 20px #4facfe66}.toaster-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#00f2fe;padding:10px 20px;border-radius:20px;border:1px solid rgba(0,242,254,.3);font-family:Orbitron,sans-serif;font-size:1rem;box-shadow:0 4px 15px #00000080,0 0 10px #00f2fe33;animation:toast-in .3s ease-out,toast-out .3s ease-in calc(var(--duration) - .3s) forwards;white-space:nowrap;pointer-events:auto}.toast.join{color:#0f8;border-color:#00ff884d;box-shadow:0 4px 15px #00000080,0 0 10px #0f83}.toast.leave{color:#f44;border-color:#ff44444d;box-shadow:0 4px 15px #00000080,0 0 10px #f443}@keyframes toast-in{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}.toast.error{color:#f84;border-color:#ff88444d;box-shadow:0 4px 15px #00000080,0 0 10px #ff88444d;font-weight:700}.user-list-button{position:absolute;bottom:10px;left:20px;width:80px;height:80px;border-radius:50%;border:4px solid #1a1a1a;background:#333;cursor:pointer;padding:5px;box-shadow:0 5px 15px #00000080;transition:all .2s;z-index:10}.user-list-button:hover{transform:scale(1.1);box-shadow:0 0 20px #4facfe4d}.user-list-button:active{transform:scale(.95)}.user-list-button-inner{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#4facfe,#00f2fe);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 5px #ffffff4d}.user-list-button-inner svg{width:30px;height:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.user-list-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.user-list-modal{width:85%;max-width:350px;background:#16213e;border:2px solid #4facfe;border-radius:20px;box-shadow:0 0 40px #4facfe4d;overflow:hidden;animation:slideUp .3s ease-out}.user-list-header{padding:15px 20px;background:#4facfe1a;border-bottom:1px solid rgba(79,172,254,.2);display:flex;justify-content:space-between;align-items:center}.user-list-header h2{font-family:Orbitron,sans-serif;font-size:1rem;color:#4facfe;margin:0;letter-spacing:1px}.user-list-actions{display:flex;align-items:center;gap:15px}.refresh-button{background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all .2s ease}.refresh-button:hover:not(:disabled){opacity:1;transform:scale(1.1)}.refresh-button:active:not(:disabled){transform:scale(.9)}.refresh-button.spinning svg{animation:spin .5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.close-button{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;padding:0;opacity:.7;transition:opacity .2s}.close-button:hover{opacity:1}.user-list-content{max-height:300px;overflow-y:auto;padding:10px 0}.user-list-content::-webkit-scrollbar{width:6px}.user-list-content::-webkit-scrollbar-track{background:#0000001a}.user-list-content::-webkit-scrollbar-thumb{background:#4facfe;border-radius:3px}.participants-list{list-style:none;padding:0;margin:0}.participant-item{padding:12px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .2s}.participant-item:last-child{border-bottom:none}.participant-item:hover{background:#4facfe0d}.participant-status{width:8px;height:8px;border-radius:50%;background:#0f8;box-shadow:0 0 5px #0f8}.participant-name{font-family:Rajdhani,sans-serif;font-size:1.2rem;font-weight:600;color:#fff}.me-badge{font-family:Orbitron,sans-serif;font-size:.7rem;color:#4facfe;margin-left:auto}.empty-list{padding:40px;text-align:center;color:#ffffff4d;font-family:Rajdhani,sans-serif}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:600px){.radio-container{padding:30px 20px}.frequency-display{font-size:2.5rem}.ptt-button{width:180px;height:180px}.break-button{width:60px;height:60px;right:10px;bottom:5px}.user-list-button{width:60px;height:60px;left:10px;bottom:5px}.user-list-button-inner svg{width:24px;height:24px}}.toast.update{color:#fff;border-color:#4facfe;background:#4facfe33;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 15px;white-space:normal;max-width:90vw}.toast.info{color:#fff;border-color:#4facfe;background:#4facfe26;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 15px;white-space:normal;max-width:90vw}.toast-action{background:#4facfe;border:none;color:#fff;padding:8px 16px;border-radius:12px;font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;width:100%;box-shadow:0 2px 8px #4facfe4d}.toast-action:hover{background:#00f2fe;transform:translateY(-1px);box-shadow:0 4px 12px #00f2fe66}.toast-action:active{transform:translateY(0);box-shadow:0 2px 6px #4facfe4d}.toast-message{font-size:.9rem;line-height:1.4;text-align:center}.radio-footer{margin-top:15px;text-align:center;font-family:Rajdhani,sans-serif;font-size:.8rem;color:#ffffff4d;letter-spacing:1px;border-top:1px solid rgba(79,172,254,.1);padding-top:15px}.away-button{position:absolute;top:10px;left:20px;width:80px;height:80px;border-radius:50%;border:4px solid #1a1a1a;background:#333;cursor:pointer;padding:5px;box-shadow:0 5px 15px #00000080;transition:all .2s;z-index:10}.away-button:hover{transform:scale(1.1);box-shadow:0 0 20px #8080804d}.away-button:active{transform:scale(.95)}.away-button-inner{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#666,#555);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 5px #ffffff4d;transition:all .3s}.away-button.active .away-button-inner{background:linear-gradient(145deg,#ff9800,#f57c00)}.away-button.active:hover{box-shadow:0 0 20px #ffa5004d}.away-button-inner span{font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.status-73-button{position:absolute;top:10px;right:20px;width:80px;height:80px;border-radius:50%;border:4px solid #1a1a1a;background:#333;cursor:pointer;padding:5px;box-shadow:0 5px 15px #00000080;transition:all .2s;z-index:10}.status-73-button:hover{transform:scale(1.1);box-shadow:0 0 20px #9c27b04d}.status-73-button:active{transform:scale(.95)}.status-73-button-inner{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#9c27b0,#7b1fa2);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 5px #ffffff4d}.status-73-button-inner span{font-family:Orbitron,sans-serif;font-size:.7rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.toast.away{color:#ff9800;border-color:#ff98004d;box-shadow:0 4px 15px #00000080,0 0 10px #ff980033}.toast.\37 3{color:#d5c5d8;border-color:#9c27b04d;box-shadow:0 4px 15px #00000080,0 0 10px #9c27b033}.participant-status.away{background:#888;box-shadow:0 0 5px #888}.participant-item.is-away .participant-name{text-decoration:line-through;opacity:.6}@media(max-width:600px){.away-button{width:60px;height:60px;left:10px;top:5px}.status-73-button{width:60px;height:60px;right:10px;top:5px}}