*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#ff5500;--bg:#0f0f1a;--surface:#16162a;--surface-light:#1e1e3a;--text:#fff;--text-secondary:#a0a0b0;--success:#00c853;--danger:#ff4444;--border:#2a2a4a}
body.light-theme{--primary:#ff5722;--bg:#f5f5f5;--surface:#ffffff;--surface-light:#fff3e0;--text:#1a1a1a;--text-secondary:#616161;--success:#4caf50;--danger:#f44336;--border:#ffccbc}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .05s,color .05s;position:relative;overflow-x:hidden}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.15}
body.light-theme::before{opacity:.08}
.app{position:relative;z-index:1;max-width:100vw;overflow-x:hidden}
.screen{display:none;min-height:100vh;max-width:100vw;overflow-x:hidden}.screen.active{display:block}
#landing-screen.active{display:flex;align-items:center;justify-content:center}
.landing-content{text-align:center;padding:2rem;max-width:400px}
.logo i{font-size:4rem;color:var(--primary)}.logo h1{font-size:2.5rem;color:var(--primary)}
.tagline{color:var(--text-secondary);margin:1rem 0 2rem}
.landing-actions{background:var(--surface);padding:2rem;border-radius:20px;border:1px solid var(--border);transition:background .05s,border-color .05s}
.divider{display:flex;align-items:center;margin:1.5rem 0;color:var(--text-secondary)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}.divider span{padding:0 1rem}
.join-room-form{display:flex;gap:.5rem}
.join-room-form input{flex:1;padding:.8rem;background:var(--surface-light);border:1px solid var(--border);border-radius:10px;color:var(--text);text-transform:uppercase;text-align:center}
.join-room-form input:focus{outline:none;border-color:var(--primary)}
.btn{padding:.7rem 1.2rem;border:none;border-radius:10px;cursor:pointer;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .2s,background .05s,color .05s,border-color .05s,opacity .2s}
.btn:hover{transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--primary);color:#fff}.btn-secondary{background:var(--surface-light);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:var(--danger);color:#fff}.btn-large{padding:1rem 2rem;width:100%}.btn-small{padding:.4rem .8rem;font-size:.85rem}
.btn-icon{padding:.6rem;width:40px;height:40px;background:var(--surface-light);border:1px solid var(--border)}
.btn-icon.btn-danger{background:var(--danger);border-color:var(--danger)}
.room-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;transition:background .05s,border-color .05s;max-width:100vw;overflow-x:hidden}
.room-header::before{content:'';position:absolute;top:-100vh;left:0;right:0;height:100vh;background:var(--surface);z-index:-1}
.room-info{display:flex;align-items:center;gap:1rem;min-width:0;flex:1}.room-info h2{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-info h2 span{color:var(--primary);font-family:monospace}
.user-count{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:var(--surface-light);border-radius:20px;white-space:nowrap}.user-count i{color:var(--success)}
.room-actions{display:flex;gap:.5rem;flex-shrink:0}
.room-content{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.5rem;max-width:1200px;margin:0 auto}
@media(max-width:900px){.room-content{grid-template-columns:1fr}}
.add-tracks-section,.player-section,.playlist-section{background:var(--surface);padding:1.5rem;border-radius:15px;border:1px solid var(--border);transition:background .05s,border-color .05s;min-width:0;overflow:hidden}
.add-tracks-section h3,.playlist-header h3{font-size:1rem;color:var(--text-secondary);margin-bottom:1rem}
.add-tracks-section h3 i,.playlist-header h3 i{color:var(--primary);margin-right:.5rem}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem;overflow-x:auto}
.tab{padding:.5rem 1rem;background:var(--surface-light);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tab-content{display:none;min-width:0}.tab-content.active{display:block}
#yandex-links{width:100%;height:100px;padding:1rem;background:var(--surface-light);border:1px solid var(--border);border-radius:10px;color:var(--text);resize:vertical}
#yandex-links:focus{outline:none;border-color:var(--primary)}
.add-tracks-actions{display:flex;gap:.5rem;margin-top:1rem}
.search-form{display:flex;gap:.5rem;min-width:0}
.search-form input{flex:1;padding:.7rem;background:var(--surface-light);border:1px solid var(--border);border-radius:10px;color:var(--text);min-width:0}
.search-form input:focus{outline:none;border-color:var(--primary)}
.search-results{margin-top:1rem;max-height:400px;overflow-y:auto;overflow-x:hidden;min-width:0}
.search-result-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:8px;cursor:pointer;min-width:0;overflow:hidden}
.search-result-item:hover{background:var(--surface-light)}
.search-result-item img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0}
.search-result-info{flex:1;min-width:0;overflow:hidden}
.search-result-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-artist{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-item{position:relative;padding-left:2.5rem;min-width:0;overflow:hidden}
.chart-position{position:absolute;left:.5rem;top:50%;transform:translateY(-50%);font-size:1rem;font-weight:bold;color:var(--primary);min-width:1.5rem;text-align:center;flex-shrink:0}
.player-section{display:flex;flex-direction:column;align-items:center}
.now-playing{text-align:center;margin-bottom:1.5rem;max-width:100%;overflow:hidden}
.track-cover{position:relative;width:180px;height:180px;margin:0 auto 1rem;border-radius:15px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.track-cover img{width:100%;height:100%;object-fit:cover}
.cover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;cursor:pointer}
.track-cover:hover .cover-overlay{opacity:1}.cover-overlay i{font-size:3rem;color:#fff}
.track-info{max-width:100%;overflow:hidden;padding:0 1rem}
.track-info h2{font-size:1.2rem;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info p{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-section{display:flex;align-items:center;gap:.75rem;width:100%;margin-bottom:1.5rem}
.progress-section span{font-size:.8rem;color:var(--text-secondary);min-width:40px;font-family:monospace;flex-shrink:0}
.progress-bar{flex:1;height:6px;background:var(--surface-light);border-radius:3px;cursor:pointer;position:relative;min-width:0}
.progress-fill{height:100%;background:var(--primary);border-radius:3px;width:0;transition:width .1s}
.controls{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.btn-control{background:var(--surface-light);border:1px solid var(--border);color:var(--text);width:42px;height:42px;border-radius:50%;padding:0;flex-shrink:0}
.btn-control:hover{background:var(--border)}.btn-control.active{color:var(--primary);border-color:var(--primary)}
.btn-play{width:56px;height:56px;background:var(--primary);border:none}
.volume-control{display:flex;align-items:center;gap:.5rem}
#volume-slider{width:100px;-webkit-appearance:none;height:4px;background:var(--surface-light);border-radius:2px}
#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--primary);border-radius:50%;cursor:pointer}
.playlist-section{grid-column:1/-1;max-height:300px;display:flex;flex-direction:column;min-width:0}
.playlist-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem}
.playlist{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0}
.playlist-empty{text-align:center;padding:2rem;color:var(--text-secondary)}
.playlist-empty i{font-size:2rem;margin-bottom:.5rem;opacity:.3}
.playlist-item{display:flex;align-items:center;padding:.6rem;border-radius:8px;cursor:pointer;gap:.75rem;position:relative;min-width:0;overflow:hidden}
.playlist-item:hover{background:var(--surface-light)}
.playlist-item.active{background:rgba(255,85,0,.15);border-left:3px solid var(--primary)}
.btn-delete-track{opacity:0.4;transition:all .2s;padding:.4rem;width:32px;height:32px;background:var(--danger);border:none;color:#fff;border-radius:6px;flex-shrink:0}
@media(hover:hover){.playlist-item:hover .btn-delete-track{opacity:1}}
@media(hover:none){.btn-delete-track{opacity:1}}
.btn-delete-track:hover{background:#cc0000;transform:scale(1.1);opacity:1}
.playlist-item-num{width:25px;text-align:center;color:var(--text-secondary);font-size:.85rem;flex-shrink:0}
.playlist-item.active .playlist-item-num{color:var(--primary)}
.playlist-item-cover{width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0}
.playlist-item-cover img{width:100%;height:100%;object-fit:cover}
.playlist-item-info{flex:1;min-width:0;overflow:hidden}
.playlist-item-title{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-item-artist{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-item-duration{color:var(--text-secondary);font-size:.8rem;font-family:monospace;flex-shrink:0}
.notifications{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:1000;max-width:calc(100vw - 3rem)}
.notification{padding:.8rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:.6rem;animation:slideIn .3s;transition:background .05s,border-color .05s;word-wrap:break-word}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.notification.success{border-left:3px solid var(--success)}.notification.success i{color:var(--success)}
.notification.error{border-left:3px solid var(--danger)}.notification.error i{color:var(--danger)}
.notification.info{border-left:3px solid var(--primary)}.notification.info i{color:var(--primary)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.loading{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.has-tooltip{position:relative}
.has-tooltip .info-icon{position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:var(--primary);color:#fff;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:bold;pointer-events:none;z-index:1}
.tooltip{position:fixed;padding:.5rem .75rem;background:var(--surface-light);color:var(--text);border:1px solid var(--border);border-radius:8px;white-space:nowrap;font-size:.85rem;z-index:10000;pointer-events:none;animation:tooltipFade .2s ease;max-width:250px;white-space:normal}
.tooltip::before{content:'';position:absolute;border:6px solid transparent}
.tooltip.tooltip-top::before{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--border)}
.tooltip.tooltip-bottom::before{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--border)}
.tooltip.tooltip-left::before{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--border)}
.tooltip.tooltip-right::before{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--border)}
@keyframes tooltipFade{from{opacity:0}to{opacity:1}}

.theme-toggle-landing{position:fixed;top:1rem;right:1rem;z-index:1000;background:var(--surface);border:1px solid var(--border)}
#room-screen.active ~ .theme-toggle-landing{display:none}


/* Animated Background Shapes */
.bg-shapes{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.shape{position:absolute;opacity:.6;filter:blur(1px)}
body.light-theme .shape{opacity:.4}

.shape-circle{border-radius:50%}
.shape-square{border-radius:15%}
.shape-triangle{width:0;height:0;background:transparent!important;border-left:50px solid transparent;border-right:50px solid transparent}
.shape-hexagon{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}

.shape-1{width:120px;height:120px;background:linear-gradient(135deg,#ff5500,#ff8800);top:10%;left:5%;animation:float1 20s infinite ease-in-out}
.shape-2{width:80px;height:80px;background:linear-gradient(135deg,#00d4ff,#0099ff);top:60%;left:80%;animation:float2 25s infinite ease-in-out}
.shape-3{border-bottom:100px solid #ff00aa;top:30%;right:10%;animation:float3 18s infinite ease-in-out}
.shape-4{width:60px;height:60px;background:linear-gradient(135deg,#00ff88,#00cc66);bottom:20%;left:15%;animation:float4 22s infinite ease-in-out}
.shape-5{width:90px;height:90px;background:linear-gradient(135deg,#ffdd00,#ff9900);top:70%;left:40%;animation:float5 28s infinite ease-in-out}
.shape-6{width:70px;height:70px;background:linear-gradient(135deg,#aa00ff,#6600cc);top:15%;left:60%;animation:float6 24s infinite ease-in-out}
.shape-7{width:100px;height:100px;background:linear-gradient(135deg,#ff0066,#cc0044);bottom:10%;right:20%;animation:float7 26s infinite ease-in-out}
.shape-8{border-bottom:80px solid #00ddff;bottom:40%;right:5%;animation:float8 21s infinite ease-in-out}

@keyframes float1{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(30px,-30px) rotate(90deg)}50%{transform:translate(-20px,40px) rotate(180deg)}75%{transform:translate(40px,20px) rotate(270deg)}}
@keyframes float2{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}33%{transform:translate(-40px,30px) rotate(120deg) scale(1.2)}66%{transform:translate(20px,-40px) rotate(240deg) scale(.8)}}
@keyframes float3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-50px,50px) rotate(180deg)}}
@keyframes float4{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(40px,30px) rotate(90deg) scale(1.3)}50%{transform:translate(-30px,-40px) rotate(180deg) scale(.9)}75%{transform:translate(30px,-20px) rotate(270deg) scale(1.1)}}
@keyframes float5{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-35px,-35px) rotate(144deg)}80%{transform:translate(35px,35px) rotate(288deg)}}
@keyframes float6{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}30%{transform:translate(25px,-45px) rotate(108deg) scale(1.2)}60%{transform:translate(-45px,25px) rotate(216deg) scale(.85)}}
@keyframes float7{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(45px,-25px) rotate(120deg)}66%{transform:translate(-25px,45px) rotate(240deg)}}
@keyframes float8{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(-30px,40px) rotate(90deg) scale(1.15)}50%{transform:translate(40px,-30px) rotate(180deg) scale(.95)}75%{transform:translate(-20px,-35px) rotate(270deg) scale(1.05)}}

/* Footer Styles */
.footer{background:var(--bg);border-top:1px solid var(--border);padding:2.5rem 1.5rem 1.5rem;margin-top:3rem;transition:background .05s,border-color .05s}
.footer-content{text-align:center;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.footer-tagline{color:var(--text-secondary);font-size:.85rem;opacity:.7}
.footer-contacts{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.footer-contacts a{color:var(--text-secondary);text-decoration:none;display:flex;align-items:center;gap:.4rem;transition:color .2s;font-size:.8rem;opacity:.6}
.footer-contacts a:hover{color:var(--text-secondary);opacity:1}
.footer-contacts i{font-size:.85rem}
.footer-copyright{color:var(--text-secondary);font-size:.75rem;opacity:.5;margin-top:.5rem}
@media(max-width:600px){.footer-contacts{flex-direction:column;gap:.75rem}}