:root{font-family:Montserrat,sans-serif;--bg-primary: #0a0a0f;--bg-secondary: #111118;--bg-card: #161622;--bg-hover: #1e1e2e;--accent: #8b5cf6;--accent-hover: #a78bfa;--accent-dim: rgba(139, 92, 246, .12);--accent-border: rgba(139, 92, 246, .24);--text-primary: #f0f0ff;--text-secondary: #a0a0c0;--text-muted: #606080;--border: rgba(255, 255, 255, .08);--danger: #ef4444;--success: #22c55e;color:var(--text-primary);background:var(--bg-primary)}body.light-theme{--bg-primary: #f0eeff;--bg-secondary: #ffffff;--bg-card: #f7f4ff;--bg-hover: #ede9ff;--accent: #7c3aed;--accent-hover: #8b5cf6;--accent-dim: rgba(124, 58, 237, .08);--accent-border: rgba(124, 58, 237, .18);--text-primary: #1a1030;--text-secondary: #4a3880;--text-muted: #8878b0;--border: rgba(0, 0, 0, .08)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(circle at top,rgba(139,92,246,.22),transparent 30%),radial-gradient(circle at bottom right,rgba(34,197,94,.08),transparent 28%),linear-gradient(180deg,var(--bg-primary),#080811 55%,#040408);color:var(--text-primary)}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.radio-app{position:relative;min-height:100vh;overflow:hidden}.ambient-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.22;background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 120px 90px,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 220px 45px,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 320px 150px,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 420px 200px,rgba(255,255,255,.95),transparent);background-size:480px 320px;animation:twinkle 7s ease-in-out infinite alternate}.radio-shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}.radio-header{height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);background:#161622e0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.radio-header h1{margin:0;font-size:1.2rem;font-weight:700}.radio-header p{margin:2px 0 0;font-size:.8rem;color:var(--text-muted)}.username{color:var(--accent-hover);font-weight:700}.role-pill{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:999px;background:#ef444429;border:1px solid rgba(239,68,68,.25);color:#fecaca;font-size:.65rem;letter-spacing:.08em}.header-actions{display:flex;gap:8px;align-items:center}.icon-button,.ghost-button,.control-button,.mode-button,.live-start,.live-stop,.mini-button,.url-box-copy,.upload-button,.auth-submit,.auth-submit-link,.clear-search,.stream-link{border:1px solid var(--border);transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}.icon-button,.ghost-button{padding:8px 14px;border-radius:999px;background:var(--bg-card);color:var(--text-primary)}.icon-button:hover,.ghost-button:hover,.control-button:hover,.mode-button:hover,.mini-button:hover,.upload-button:hover,.stream-link:hover,.url-box-copy:hover,.clear-search:hover{transform:translateY(-1px);border-color:var(--accent-border)}.ghost-button{background:#ef44441f;color:#fecaca}.status-banner{margin:12px 16px 0;padding:10px 14px;border-radius:10px;font-size:.84rem;border:1px solid transparent}.status-banner.success{background:#22c55e1f;color:#bbf7d0;border-color:#22c55e38}.status-banner.error{background:#ef44441f;color:#fecaca;border-color:#ef444433}.main-layout{flex:1;display:grid;grid-template-columns:380px 1fr;min-height:calc(100vh - 56px)}.left-panel{display:flex;flex-direction:column;gap:12px;padding:14px;border-right:1px solid var(--border);background:#161622e6;overflow-y:auto}.right-panel{display:flex;flex-direction:column;gap:10px;padding:10px 12px;background:#111118db;overflow:hidden}.artwork-box,.visualizer-box,.current-song-card,.stream-info,.url-box,.live-box,.songs-panel,.queue-list,.import-card,.playlist-detail{background:var(--bg-card);border:1px solid var(--border);border-radius:12px}.artwork-box{aspect-ratio:1;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(145deg,#0d0820,#180f3a,#0f0a1e);border-color:var(--accent-border)}.artwork-box:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.artwork-disc-wrap{display:flex;align-items:center;justify-content:center;flex:1}.artwork-disc-wrap.playing .artwork-disc{animation:pulse 2.5s ease-in-out infinite}.artwork-disc{width:90px;height:90px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#8b5cf617;border:1px solid rgba(139,92,246,.28);color:var(--accent-hover);font-size:2rem}.artwork-info{padding:0 18px 16px;text-align:center}.artwork-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:#a78bfacc}.artwork-title{margin-top:6px;font-size:.92rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artwork-bars{margin-top:10px;display:flex;justify-content:center;align-items:flex-end;gap:3px;height:24px}.artwork-bars span{width:4px;border-radius:999px;background:var(--accent);animation:beat 1.2s ease-in-out infinite}.artwork-bars span:nth-child(1){height:6px}.artwork-bars span:nth-child(2){height:16px;animation-delay:.1s}.artwork-bars span:nth-child(3){height:10px;animation-delay:.2s}.artwork-bars span:nth-child(4){height:18px;animation-delay:.3s}.artwork-bars span:nth-child(5){height:8px;animation-delay:.4s}.artwork-bars span:nth-child(6){height:14px;animation-delay:.5s}.progress-bar-container{display:flex;align-items:center;gap:8px;padding:0 2px}.time-mark{min-width:30px;font-size:.68rem;color:var(--text-muted)}.progress-bar{flex:1;height:4px;border-radius:999px;overflow:hidden;background:var(--bg-hover)}.progress-bar-fill{width:12%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:inherit;opacity:.4}.progress-bar-fill.active{opacity:1}.visualizer-box{min-height:64px;display:flex;align-items:center;justify-content:center;padding:10px;background:var(--bg-secondary)}.visualizer-bars{display:flex;align-items:flex-end;gap:4px;width:100%;height:44px}.visualizer-bars span{flex:1;border-radius:999px;background:linear-gradient(180deg,var(--accent-hover),#22d3ee);min-height:10px;animation:equalizer 1.2s ease-in-out infinite}.current-song-card{padding:12px;border-left:3px solid var(--border)}.current-song-card.playing{border-left-color:var(--accent)}.current-song-card.paused{border-left-color:#f59e0b}.song-title{font-size:.84rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-subtitle{margin-top:4px;font-size:.72rem;color:var(--text-muted)}.control-buttons{display:flex;flex-wrap:wrap;gap:6px}.control-button{padding:9px 12px;border-radius:999px;background:var(--bg-secondary);color:var(--text-secondary)}.control-button-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff}.playback-modes{display:flex;gap:6px}.mode-button{padding:7px 10px;border-radius:999px;background:transparent;color:var(--text-muted)}.mode-button.active{background:var(--accent-dim);color:var(--accent-hover);border-color:var(--accent-border)}.volume-control{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;font-size:.76rem;color:var(--text-secondary)}.volume-slider{flex:1;accent-color:var(--accent)}.stream-info{padding:10px 12px;background:var(--accent-dim);border-color:var(--accent-border);font-size:.74rem;color:var(--text-secondary)}.stream-info code,.url-box-code{display:block;margin-top:6px;word-break:break-all;color:var(--accent-hover);font-family:Roboto Mono,monospace;font-size:.74rem}.url-box{padding:10px 12px;background:var(--accent-dim);border-color:var(--accent-border)}.url-box-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#a78bfacc}.url-box-row{display:flex;gap:8px;align-items:flex-start;margin-top:6px}.url-box-copy{padding:6px 10px;border-radius:8px;background:#8b5cf62e;color:var(--accent-hover);white-space:nowrap}.stream-link{display:inline-flex;margin-top:8px;padding:7px 11px;border-radius:8px;background:#ffffff0a;color:var(--text-primary)}.live-box{padding:11px 12px;background:#ef44440d;border-color:#ef444426}.live-box.live-active{border-color:#ef44445c}.live-box-header,.queue-header,.playlist-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.live-box-title,.queue-title{font-size:.82rem;font-weight:700}.live-dot{width:9px;height:9px;margin-right:6px;display:inline-block;border-radius:999px;background:#555}.live-dot.on{background:var(--danger);animation:livePulse 1s ease-in-out infinite}.live-status,.live-help,.empty-text,.song-row-meta,.right-footer,.playlist-card p{color:var(--text-muted);font-size:.72rem}.live-actions{display:flex;gap:6px;margin-top:8px}.live-start,.live-stop{padding:8px 12px;border-radius:8px}.live-start{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-color:#ef444447}.live-stop{background:#ffffff0f;color:var(--text-secondary)}.live-help{margin:8px 0 0;line-height:1.45}.search-row,.import-row,.playlist-tools{display:flex;gap:8px;align-items:center}.search-row{padding:6px 12px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);flex-shrink:0}.search-row input,.import-row input,.playlist-tools input,.playlist-tools select,.auth-group input{width:100%;border:none;outline:none;color:var(--text-primary);background:transparent}.clear-search{padding:6px 10px;border-radius:999px;background:transparent;color:var(--text-muted)}.songs-panel{flex:1;overflow:hidden;background:transparent;border:none}.songs-list{display:flex;flex-direction:column;gap:4px;height:100%;overflow-y:auto}.song-row,.queue-item,.playlist-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px}.song-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-left:3px solid transparent}.song-row:hover{border-left-color:var(--accent);background:var(--bg-hover)}.song-row-info{min-width:0;flex:1}.song-row-title{font-size:.82rem;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.song-row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.mini-button,.upload-button{padding:7px 11px;border-radius:999px;background:var(--bg-secondary);color:var(--text-primary)}.mini-button-primary,.upload-button{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff}.mini-button-danger{background:#ef44441f;color:#fecaca}.queue-list,.playlist-detail{display:flex;flex-direction:column;gap:6px;padding:8px;max-height:180px;overflow-y:auto}.queue-item{display:flex;align-items:center;gap:8px;padding:8px 10px}.queue-position{min-width:18px;font-size:.72rem;font-weight:700;color:var(--accent)}.queue-song-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.queue-remove{border:none;background:none;color:var(--text-muted);font-size:.74rem}.queue-remove:hover{color:#fecaca}.import-card{padding:10px}.import-tabs{display:flex;gap:6px;margin-bottom:8px}.import-tab{padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted)}.import-tab.active{background:var(--accent-dim);color:var(--accent-hover);border-color:var(--accent-border)}.upload-button{display:inline-flex;justify-content:center}.playlist-tools{flex-wrap:wrap}.playlist-tools input,.playlist-tools select,.import-row input,.search-row input{padding:10px 12px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border)}.search-row input{background:transparent;border:none;padding:6px 0}.playlists-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.playlist-card{padding:12px;border-left:3px solid var(--accent)}.playlist-card.active{background:var(--bg-hover)}.right-footer{margin-top:auto;padding-top:8px;border-top:1px solid var(--border);text-align:center}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#121212,#1a1a1a);position:relative;overflow:hidden}.auth-screen:before,.auth-screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-repeat:repeat}.auth-screen:before{background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.95),transparent),radial-gradient(2px 2px at 180px 120px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 320px 200px,rgba(255,255,255,.95),transparent),radial-gradient(2px 2px at 480px 80px,rgba(255,255,255,.65),transparent);background-size:520px 360px;animation:twinkle 4s ease-in-out infinite}.auth-screen:after{background-image:radial-gradient(1px 1px at 50px 100px,rgba(255,255,255,.95),transparent),radial-gradient(2px 2px at 250px 50px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 390px 240px,rgba(255,255,255,.95),transparent);background-size:440px 320px;animation:twinkle 6s ease-in-out infinite reverse}.auth-card{position:relative;z-index:1;width:min(460px,100%);padding:42px;border-radius:12px;background:#282828;box-shadow:0 20px 60px #00000073}.auth-card-compact{padding:28px}.auth-logo{display:flex;gap:16px;align-items:center;margin-bottom:28px}.auth-logo h1{margin:0;font-size:1.9rem}.auth-logo p{margin:6px 0 0;color:#b3b3b3;font-size:.92rem;line-height:1.45}.auth-logo-icon{width:62px;height:62px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1db954,#26d365);color:#fff;font-weight:700;font-size:1.15rem}.auth-group{display:grid;gap:8px;margin-bottom:20px}.auth-group label{font-size:.86rem;font-weight:700}.auth-group input{padding:14px;border-radius:6px;background:#3e3e3e;border:1px solid #535353}.auth-inline-card{padding:12px 14px;border-radius:8px;background:#343434;border:1px solid #474747}.auth-inline-card strong{display:block;margin-bottom:4px}.auth-inline-card p{margin:0;color:#d4d4d8;font-size:.86rem;line-height:1.5}.auth-error,.auth-success,.auth-note{padding:12px;border-radius:8px;margin-bottom:18px;font-size:.86rem;line-height:1.5}.auth-error{background:#e74c3c2e;color:#fecaca}.auth-success{background:#1db9542e;color:#bbf7d0}.auth-note{background:#ffffff0d;color:#d4d4d8}.auth-note-strong{border:1px solid rgba(29,185,84,.2)}.auth-submit,.auth-submit-link{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:14px;border-radius:999px;background:#1db954;color:#fff;font-size:.96rem;font-weight:700;border-color:transparent}.auth-submit:hover,.auth-submit-link:hover{background:#1ed760;transform:scale(1.015)}.auth-divider{position:relative;text-align:center;margin:28px 0 18px}.auth-divider:before{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid #535353}.auth-divider span{position:relative;padding:0 14px;background:#282828;color:#b3b3b3;font-size:.84rem}.auth-switch{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:.84rem;color:#b3b3b3}.auth-switch a{color:#1ed760;font-weight:700}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes beat{0%,to{transform:scaleY(.9);opacity:.7}50%{transform:scaleY(1.2);opacity:1}}@keyframes equalizer{0%,to{transform:scaleY(.35);opacity:.55}50%{transform:scaleY(1);opacity:1}}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.25)}}@keyframes twinkle{0%,to{opacity:.24}50%{opacity:.52}}@media (max-width: 1080px){.main-layout{grid-template-columns:1fr}.left-panel{border-right:none;border-bottom:1px solid var(--border)}.right-panel{min-height:60vh}}@media (max-width: 720px){.radio-header{height:auto;padding:16px;flex-direction:column;align-items:flex-start}.header-actions,.song-row-actions,.playlist-tools,.import-row,.search-row,.live-actions,.control-buttons,.playback-modes{flex-wrap:wrap}.left-panel,.right-panel{padding:12px}.song-row,.queue-item,.playlist-card-header,.auth-switch{flex-direction:column;align-items:flex-start}.url-box-row{flex-direction:column}.auth-card{padding:28px 22px}.auth-logo{flex-direction:column;align-items:flex-start}}