@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg-primary: #0A0A0A;--bg-secondary: #141414;--bg-card: rgba(20, 20, 20, .85);--bg-glass: rgba(255, 255, 255, .04);--border-glass: rgba(255, 255, 255, .08);--accent-primary: #FF6B00;--accent-secondary: #FF8C38;--accent-glow: rgba(255, 107, 0, .4);--accent-dim: rgba(255, 107, 0, .12);--accent-dark: #CC5500;--accent-gold: #FFB000;--accent-yellow: #FFD34D;--text-primary: #F0F0F0;--text-secondary: #A0A0A0;--text-muted: #555555;--border: #252525;--border-light: #333333;--success: #4CAF50;--danger: #EF4444;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Space Grotesk", "Plus Jakarta Sans", sans-serif;--font-mono: "IBM Plex Mono", "Fira Code", monospace;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6}#root{min-height:100vh}::selection{background:var(--accent-primary);color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full)}input,button{font-family:inherit}a{color:var(--accent-secondary);text-decoration:none}.app{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;overflow:hidden}.bg-gradient{position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,107,0,.1) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 100%,rgba(255,176,0,.07) 0%,transparent 50%),radial-gradient(ellipse 50% 40% at 10% 80%,rgba(255,211,77,.05) 0%,transparent 50%),var(--bg-primary);z-index:0}.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:80px 80px;z-index:0}.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.8;will-change:transform;animation:orbFloat 25s ease-in-out infinite}.orb-1{width:400px;height:400px;background:#ff6b0014;top:-100px;right:-100px;animation-delay:0s}.orb-2{width:300px;height:300px;background:#ffb0000f;bottom:-80px;left:-80px;animation-delay:-7s}.orb-3{width:250px;height:250px;background:#ffd34d0d;top:50%;left:50%;animation-delay:-14s}@keyframes orbFloat{0%,to{transform:translate(0)}50%{transform:translate(20px,-20px)}}@media(prefers-reduced-motion:reduce){.orb,.player-disc,.player-disc-inner{animation:none!important}.bg-orbs{display:none}}.app-header{position:relative;z-index:1;margin-bottom:2rem;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem}.logo{display:flex;align-items:center;justify-content:center}.logo-image{width:100px;height:auto;object-fit:contain}.header-text{display:flex;flex-direction:column;align-items:flex-start}.header-text h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);font-family:var(--font-display)}.logo-accent{background:linear-gradient(135deg,var(--accent-primary),var(--accent-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--text-secondary);font-size:.75rem;margin-top:.15rem;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-display)}@media(max-width:600px){.app-header{flex-direction:column;gap:.5rem}.header-text{align-items:center;text-align:center}.logo-image{width:120px}}.app-main{position:relative;z-index:1;width:100%;max-width:920px;flex:1;display:flex;gap:1.5rem;align-items:stretch}.main-player-section{flex:1;min-width:0;max-width:480px;display:flex;flex-direction:column}.main-chat-section{width:360px;flex-shrink:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}.radio-player{position:relative;flex:1;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px #00000040,0 0 0 1px #ffffff0d inset}.player-content{position:relative;z-index:2;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.player-disc{position:relative;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#1c1c1c,#0a0a0a);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #ff6b0033,0 0 20px #ff6b001a,inset 0 0 15px #00000080;transition:box-shadow var(--transition-slow);will-change:transform}.player-disc.spinning{animation:discSpin 3s linear infinite;box-shadow:0 0 0 3px #ff6b0066,0 0 25px #ff6b0026,inset 0 0 15px #00000080}@keyframes discSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.disc-inner{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,#1c1c1c,#141414);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,107,0,.3);z-index:2}.disc-label{color:var(--accent-secondary)}.disc-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.05)}.ring-1{width:75%;height:75%}.ring-2{width:55%;height:55%}.ring-3{width:90%;height:90%}.now-playing{text-align:center;width:100%}.now-playing-header{display:flex;justify-content:center;margin-bottom:.75rem}.live-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--radius-full);background:#ffffff0d;border:1px solid rgba(255,255,255,.08);font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--text-muted);transition:all var(--transition-base)}.live-indicator.active{background:#ff6b0026;border-color:#ff6b004d;color:#ff6b00}.live-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.live-indicator.active .live-dot{animation:livePulse 1.5s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.track-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;font-family:var(--font-display)}.track-artist{font-size:.85rem;color:var(--text-secondary)}.api-metadata{margin-top:1rem;width:100%;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:.75rem;display:flex;flex-direction:column;gap:.4rem}.metadata-row{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0}.metadata-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);min-width:70px}.metadata-value{font-size:.8rem;color:var(--text-secondary);text-align:right;font-family:var(--font-mono)}.title-row{padding:.4rem 0;display:flex;align-items:center;gap:.5rem}.title-row .metadata-label{flex-shrink:0}.title-scroll-container{flex:1;overflow:hidden;min-width:0}.title-value{font-size:.85rem;font-weight:500;color:var(--text-primary);white-space:nowrap;display:inline-block;animation:scrollTitle 15s linear infinite}@keyframes scrollTitle{0%{transform:translate(100%)}to{transform:translate(-100%)}}.stream-info{margin-top:.5rem}.stream-url{font-size:.7rem;font-family:var(--font-mono);color:var(--text-muted);background:#0003;padding:.25rem .5rem;border-radius:var(--radius-sm)}.stream-input-form{width:100%}.input-group{position:relative;width:100%}.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:flex;pointer-events:none}.stream-input{width:100%;padding:.85rem 1rem .85rem 2.75rem;background:#ffffff0a;border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-size:.85rem;font-family:var(--font-mono);outline:none;transition:all var(--transition-base)}.stream-input::placeholder{color:var(--text-muted)}.stream-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);background:#ffffff0f}.stream-input:disabled{opacity:.5;cursor:not-allowed}.error-message{color:var(--danger);font-size:.78rem;margin-top:.5rem;text-align:center}.player-controls{display:flex;align-items:center;gap:.75rem}.control-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:var(--radius-full);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);color:#fff}.connect-btn,.play-btn{background:linear-gradient(135deg,var(--accent-primary),var(--accent-dark));box-shadow:0 4px 15px var(--accent-glow)}.connect-btn:hover:not(:disabled),.play-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ff6b0066}.connect-btn:active:not(:disabled),.play-btn:active{transform:translateY(0)}.connect-btn:disabled{opacity:.4;cursor:not-allowed}.stop-btn{background:#ef444426;color:var(--danger);border:1px solid rgba(239,68,68,.2)}.stop-btn:hover{background:#ef444440}.play-btn{width:56px;height:56px;border-radius:50%;padding:0}.loading-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.volume-control{display:flex;align-items:center;gap:.75rem;width:100%;padding:.5rem 0}.volume-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:color var(--transition-fast);display:flex}.volume-btn:hover{color:var(--text-primary)}.volume-slider-wrap{flex:1;display:flex;align-items:center;gap:.75rem}.volume-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent-primary) 0%,var(--accent-primary) var(--volume-pct, 75%),rgba(255,255,255,.1) var(--volume-pct, 75%),rgba(255,255,255,.1) 100%);outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 6px #ff6b0080;cursor:pointer;transition:transform var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 6px #ff6b0080;cursor:pointer}.volume-label{font-size:.75rem;color:var(--text-muted);min-width:32px;text-align:right;font-family:var(--font-mono)}.app-footer{position:relative;z-index:1;margin-top:2rem;text-align:center;color:var(--text-muted);font-size:.75rem}@media(max-width:520px){.app{padding:1.5rem .75rem}.logo h1{font-size:1.4rem}.player-content{padding:1.5rem 1rem}.player-disc{width:110px;height:110px}}.chat-panel{width:100%;flex:1;min-height:0;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:0 4px 20px #00000040,0 0 0 1px #ffffff0d inset;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--border-glass);background:#ffffff05}.chat-header-left{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);font-size:.9rem;font-weight:600;font-family:var(--font-display)}.chat-header-left svg{color:var(--accent-primary)}.chat-status{font-size:.65rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:.15rem .5rem;background:#ffffff0d;border-radius:var(--radius-full)}.chat-name-form{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 1.25rem;gap:1.25rem}.chat-name-prompt{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.chat-name-prompt svg{color:var(--text-muted)}.chat-name-prompt p{color:var(--text-secondary);font-size:.85rem}.chat-name-input-group{display:flex;gap:.5rem}.chat-messages{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;min-height:0}.chat-messages::-webkit-scrollbar{width:5px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--radius-full)}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:var(--text-muted)}.chat-empty p{font-size:.85rem;color:var(--text-secondary)}.chat-empty span{font-size:.75rem}.chat-message{padding:.5rem .75rem;border-radius:var(--radius-md);background:#ffffff0a;border:1px solid transparent;max-width:85%;animation:chatFadeIn .2s ease}.chat-message.own{align-self:flex-end;background:#ff6b001f;border-color:#ff6b0026}@keyframes chatFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.chat-message-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}.chat-username{font-size:.72rem;font-weight:600;color:var(--accent-secondary)}.chat-message.own .chat-username{color:var(--accent-gold)}.chat-time{font-size:.6rem;color:var(--text-muted);font-family:var(--font-mono)}.chat-text{font-size:.82rem;color:var(--text-primary);line-height:1.45;word-break:break-word}.chat-input-form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border-glass);background:#ffffff05}.chat-input{flex:1;padding:.6rem .85rem;background:#ffffff0d;border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.82rem;outline:none;transition:all var(--transition-fast)}.chat-input::placeholder{color:var(--text-muted)}.chat-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-glow)}.chat-send-btn{padding:.6rem .85rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-dark));border:none;border-radius:var(--radius-sm);color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);white-space:nowrap}.chat-send-btn:hover:not(:disabled){filter:brightness(1.1)}.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}@media(max-width:820px){.app-main{flex-direction:column;align-items:center}.main-player-section{max-width:480px;width:100%}.main-chat-section{width:100%;max-width:480px}.chat-panel{min-height:400px}}