*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#1e1e2e,#2a2a3e,#1a1a2e);color:#fff;overflow-x:hidden;overflow-y:auto;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}.logo{display:flex;align-items:center;gap:12px}.logo h1{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;background:linear-gradient(45deg,#7c3aed,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.discord-user{display:flex;align-items:center;gap:12px;background:#ffffff1a;padding:10px 16px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.discord-avatar{width:clamp(32px,5vw,48px);height:clamp(32px,5vw,48px);border-radius:50%;border:2px solid #7c3aed;-o-object-fit:cover;object-fit:cover}.discord-name{font-weight:600;font-size:clamp(.875rem,2.5vw,1rem);color:#e2e8f0}.login-btn{display:flex;align-items:center;gap:8px;background:linear-gradient(45deg,#5865f2,#7289da);color:#fff;border:none;padding:10px 16px;border-radius:25px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,255,255,.2)}.login-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #5865f266;background:linear-gradient(45deg,#4752c4,#5b6cd1)}.login-btn svg{width:20px;height:20px;fill:currentColor}.add-btn{padding:15px 30px;background:linear-gradient(45deg,#7c3aed,#3b82f6);border:none;border-radius:12px;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem;display:flex;align-items:center;gap:10px;justify-content:center;white-space:nowrap;min-width:140px}.add-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #7c3aed4d}.add-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.add-btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}.connection-status{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:12px 20px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.status-indicator{width:12px;height:12px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}.status-indicator.connecting{background:#f59e0b}.status-indicator.disconnected{background:#ef4444}.music-player{background:#ffffff1a;border-radius:20px;padding:30px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000004d}.now-playing{text-align:center;margin-bottom:25px}.track-info h3{font-size:1.25rem;margin-bottom:8px;color:#e2e8f0}.track-info p{color:#94a3b8;margin-bottom:4px}.progress-container{margin:20px 0}.progress-bar{width:100%;height:6px;background:#fff3;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#3b82f6);width:0%;transition:width .5s ease}.progress-time{display:flex;justify-content:space-between;margin-top:8px;font-size:.75rem;color:#94a3b8}.controls{display:flex;justify-content:center;gap:20px;margin-top:25px}.control-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all .3s ease;position:relative;overflow:hidden}.control-btn:hover{background:#fff3;transform:scale(1.1);box-shadow:0 4px 15px #7c3aed4d}.control-btn:active{transform:scale(.95)}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.control-btn.play-pause{width:60px;height:60px;background:linear-gradient(45deg,#7c3aed,#3b82f6);font-size:1.5rem;box-shadow:0 4px 15px #7c3aed66}.control-btn.play-pause:hover{box-shadow:0 6px 20px #7c3aed99}.control-btn svg{width:20px;height:20px;fill:currentColor}.control-btn.play-pause svg{width:24px;height:24px}.queue-section{background:#ffffff1a;border-radius:20px;padding:30px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000004d}.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.queue-header h2{font-size:1.5rem;color:#e2e8f0}.queue-count{background:#7c3aed4d;padding:4px 12px;border-radius:12px;font-size:.875rem;color:#c4b5fd}.queue-list{max-height:400px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.queue-list::-webkit-scrollbar{width:6px}.queue-list::-webkit-scrollbar-track{background:transparent}.queue-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.queue-item{display:flex;align-items:center;padding:12px;margin-bottom:8px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.queue-item:hover{background:#ffffff1a;transform:translate(5px)}.queue-item.playing{background:#7c3aed33;border-color:#7c3aed}.queue-number{width:30px;height:30px;background:#ffffff1a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.875rem;margin-right:12px;color:#94a3b8;flex-shrink:0}.queue-item.playing .queue-number{background:#7c3aed;color:#fff}.queue-track-info{flex:1;min-width:0}.queue-track-title{font-weight:600;color:#e2e8f0;margin-bottom:4px;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-track-artist{color:#94a3b8;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-track-duration{color:#64748b;font-size:.75rem;margin-top:2px}.queue-empty{text-align:center;padding:40px 20px;color:#64748b}.queue-empty p:first-child{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:#94a3b8}.queue-empty p:last-child{font-size:.9rem;opacity:.8}.queue-added-by{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:12px}.queue-user-avatar{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.2);-o-object-fit:cover;object-fit:cover}.queue-user-name{font-size:.75rem;color:#94a3b8;font-weight:500;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.add-track-section{background:#ffffff1a;border-radius:20px;padding:30px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000004d;grid-column:1 / -1}.add-track-section h3{font-size:1.5rem;color:#e2e8f0;margin-bottom:20px;font-weight:600}.add-track-form{display:flex;gap:15px;max-width:600px;margin:0 auto;align-items:end}.input-group{flex:1;display:flex;flex-direction:column;gap:8px}.input-group input{padding:15px 20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:1rem;outline:none;transition:all .3s ease;width:100%}.input-group input::-moz-placeholder{color:#94a3b8}.input-group input::placeholder{color:#94a3b8}.input-group input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a;background:#ffffff26}.url-input{flex:1;padding:15px 20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:1rem;outline:none;transition:all .3s ease}.url-input::-moz-placeholder{color:#94a3b8}.url-input::placeholder{color:#94a3b8}.url-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.fade-in{animation:fadeIn .5s ease forwards}.loading{text-align:center;padding:40px;color:#94a3b8}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top:3px solid #7c3aed;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:15px;border-radius:12px;margin:20px 0;text-align:center}@media (max-width: 768px){.main-content{grid-template-columns:1fr;gap:20px}.queue-user-name{display:none}.queue-added-by{margin-left:8px}}@media (max-width: 640px){.container{padding:15px}.header{flex-direction:column;gap:15px;text-align:center}.music-player,.queue-section,.add-track-section{padding:20px}.add-track-form{flex-direction:column;gap:15px}.add-btn{width:100%;min-width:auto}.controls{gap:15px}.control-btn{width:45px;height:45px;font-size:1rem}.control-btn.play-pause{width:55px;height:55px}}