*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#0a0a0f,#1a1a2e,#16213e);background-size:400% 400%;animation:synthwaveShift 20s ease infinite;color:#fff;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,0,110,.05) 2px,transparent 2px),linear-gradient(90deg,rgba(0,245,255,.05) 2px,transparent 2px);background-size:50px 50px;pointer-events:none;z-index:0}@keyframes synthwaveShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.login-container{display:flex;align-items:center;justify-content:center;height:100vh}.login-box{background:#1a1a2eb3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:3rem;border-radius:30px;box-shadow:0 8px 32px #00000080,0 0 60px #ff006e4d,0 0 100px #00f5ff33,inset 0 0 20px #ff006e1a;border:2px solid rgba(255,0,110,.5);text-align:center;max-width:400px;width:100%;animation:floatIn .6s ease-out;position:relative;z-index:10}@keyframes floatIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-box h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#ff006e,#00f5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;text-shadow:0 0 30px rgba(255,0,110,.5);letter-spacing:2px;text-transform:uppercase}.login-box p{color:#fffc;margin-bottom:2rem}.login-box input{width:100%;padding:.75rem 1rem;background:#1a1a2e80;border:2px solid rgba(0,245,255,.3);border-radius:20px;color:#fff;font-size:1rem;margin-bottom:1rem;transition:all .3s ease}.login-box input:focus{outline:none;border-color:#00f5ff;background:#1a1a2eb3;box-shadow:0 0 20px #00f5ff80,inset 0 0 10px #00f5ff33}.login-box input::placeholder{color:#00f5ff80}.login-box button{width:100%;padding:.75rem;background:linear-gradient(135deg,#ff006e,#ff0080);border:none;border-radius:20px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff006e99,0 0 30px #ff006e4d;text-transform:uppercase;letter-spacing:1px}.login-box button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px #ff006ecc,0 0 40px #ff006e80}.login-box button:active:not(:disabled){transform:translateY(0)}.login-box button:disabled{background:#ffffff1a;cursor:not-allowed;box-shadow:none;opacity:.5}.login-box .error{color:#ff6b6b;background:#ff6b6b33;padding:.5rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem}.main-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#1a1a2ecc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:2px solid rgba(255,0,110,.3);box-shadow:0 4px 20px #0000004d,0 0 40px #ff006e33;z-index:100;position:relative}.header h1{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,#ff006e,#8b00ff,#00f5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,0,110,.6);letter-spacing:2px;text-transform:uppercase}.header-actions{display:flex;gap:1rem}.btn-logout{padding:.5rem 1rem;background:#333;border:none;border-radius:6px;color:#e0e0e0;cursor:pointer;transition:background .2s}.btn-logout:hover{background:#444}.main-content{display:flex;flex:1;overflow:hidden;padding-bottom:109px}.sidebar{width:280px;background:#1a1a2e99;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-right:2px solid rgba(0,245,255,.2);padding:1.5rem;overflow-y:auto;box-shadow:4px 0 20px #0000004d,0 0 30px #00f5ff1a;flex-shrink:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem}.sidebar-title-container{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem;border-radius:12px;transition:all .3s ease;flex:1;-webkit-user-select:none;user-select:none}.sidebar-title-container:hover{background:#00f5ff1a}.sidebar-title-container:active{transform:scale(.98)}.sidebar h2{font-size:1.2rem;margin:0;background:linear-gradient(135deg,#00f5ff,#ff006e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.chevron{font-size:.9rem;color:#00f5ff;transition:transform .3s cubic-bezier(.68,-.55,.265,1.55);display:inline-block;filter:drop-shadow(0 0 5px rgba(0,245,255,.6))}.chevron.expanded{transform:rotate(180deg)}.playlists-container{animation:fadeInDown .3s ease-out;display:block;width:100%;position:relative}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.btn-add{width:38px;height:38px;background:linear-gradient(135deg,#ff006e,#ff0080);border:2px solid rgba(255,0,110,.6);border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 15px #ff006e80,0 0 20px #ff006e4d;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-add:hover{transform:scale(1.15) rotate(90deg);box-shadow:0 6px 25px #ff006ecc,0 0 35px #ff006e99}.btn-add:active{transform:scale(1.05) rotate(90deg)}.new-playlist-form{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.new-playlist-form input{padding:.5rem;background:#2a2a2a;border:1px solid #333;border-radius:4px;color:#e0e0e0}.new-playlist-form button{padding:.5rem;background:#1db954;border:none;border-radius:4px;color:#fff;cursor:pointer}.playlist-item{padding:.75rem;background:#1a1a2e99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(0,245,255,.2);border-radius:12px;margin-bottom:.5rem;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000004d;-webkit-user-select:none;user-select:none}.playlist-item:hover{background:#1a1a2ecc;border-color:#00f5ff80;transform:translate(5px);box-shadow:0 4px 15px #00f5ff4d}.playlist-item:active{transform:translate(3px) scale(.98)}.playlist-item.active{background:linear-gradient(135deg,#ff006e33,#8b00ff33);border:2px solid rgba(255,0,110,.8);box-shadow:0 0 20px #ff006e66,0 0 40px #8b00ff33}.playlist-item.active span{background:linear-gradient(135deg,#ff006e,#8b00ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.playlist-actions{display:flex;gap:.5rem}.playlist-actions button{background:#00f5ff1a;border:1px solid rgba(0,245,255,.3);border-radius:8px;padding:.35rem .6rem;color:#00f5ff;cursor:pointer;font-size:.9rem;transition:all .2s ease}.playlist-actions button:hover{background:#00f5ff40;border-color:#00f5ff;transform:scale(1.1);box-shadow:0 0 10px #00f5ff80}.playlist-actions button:active{transform:scale(1.05)}.playlist-actions button:last-child:hover{background:#ff006e40;border-color:#ff006e;color:#ff006e;box-shadow:0 0 10px #ff006e80}.content-area{flex:1;padding:0;overflow-y:auto}.all-tracks-controls{display:flex;justify-content:flex-end;margin-bottom:1rem}.btn-toggle-all{padding:.5rem 1rem;background:#333;border:none;border-radius:6px;color:#e0e0e0;cursor:pointer;transition:background .2s;font-weight:600}.btn-toggle-all:hover{background:#1db954;color:#fff}.add-track{background:#1a1a1a;padding:1.5rem;border-radius:8px;margin-bottom:2rem}.playlist-indicator{background:linear-gradient(135deg,#ff006e26,#8b00ff26);border:2px solid rgba(255,0,110,.5);border-radius:12px;padding:.75rem 1rem;margin-bottom:1rem;color:#ff006e;font-weight:600;text-align:center;box-shadow:0 0 20px #ff006e4d;animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #ff006e4d}50%{box-shadow:0 0 30px #ff006e99}}.youtube-form{display:flex;gap:1rem;margin-bottom:1rem}.youtube-form input{flex:1;padding:.75rem;background:#2a2a2a;border:1px solid #333;border-radius:6px;color:#e0e0e0}.youtube-form button{padding:.75rem 1.5rem;background:#1db954;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;transition:background .2s}.youtube-form button:hover:not(:disabled){background:#1ed760}.youtube-form button:disabled{background:#333;cursor:not-allowed}.upload-area{border:2px dashed #333;border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s}.upload-area:hover{border-color:#1db954}.upload-area.drag-over{border-color:#1db954;background:#1db9541a}.track-list{background:#1a1a1a;padding:1.5rem;border-radius:8px}.track-list h2{margin-bottom:1rem}.track-controls{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center;flex-wrap:wrap}.search-container{position:relative;flex:1;min-width:200px}.search-input{width:100%;padding:.75rem 2.5rem .75rem 1rem;background:#1a1a2e99;border:2px solid rgba(0,245,255,.3);border-radius:25px;color:#fff;font-size:.95rem;transition:all .3s ease}.search-input:focus{outline:none;border-color:#00f5ff;background:#1a1a2ecc;box-shadow:0 0 20px #00f5ff66}.search-input::placeholder{color:#00f5ff80}.btn-clear-search{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#ff006eb3;font-size:1rem;cursor:pointer;padding:.25rem;transition:all .2s ease}.btn-clear-search:hover{color:#ff006e;transform:translateY(-50%) scale(1.2)}.sort-buttons{display:flex;gap:.5rem}.btn-sort{padding:.5rem 1rem;background:#1a1a2e99;border:2px solid rgba(139,0,255,.3);border-radius:20px;color:#8b00ffcc;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .3s ease;white-space:nowrap}.btn-sort:hover{background:#8b00ff26;border-color:#8b00ff;transform:translateY(-2px);box-shadow:0 4px 15px #8b00ff66}.btn-sort.active{background:linear-gradient(135deg,#8b00ff,#b100ff);border-color:#8b00ff;color:#fff;box-shadow:0 4px 15px #8b00ff99,0 0 30px #8b00ff66}.btn-sort:active{transform:translateY(0)}.empty-state{padding:2rem;text-align:center;color:#666}.tracks{display:flex;flex-direction:column;gap:.5rem}.track-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:#1a1a2e99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;border:2px solid rgba(0,245,255,.2);transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #0000004d,0 0 10px #00f5ff1a;cursor:pointer;-webkit-user-select:none;user-select:none}.track-item:hover{background:#1a1a2ecc;border-color:#00f5ff80;transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #0006,0 0 20px #00f5ff66}.track-item:active{transform:translateY(-1px) scale(1.01);transition:all .1s ease}.track-item.playing{background:linear-gradient(135deg,#ff006e26,#8b00ff26);border:3px solid rgba(255,0,110,.8);box-shadow:0 0 30px #ff006e99,0 0 60px #8b00ff66,inset 0 0 20px #ff006e33;position:relative;animation:pulseSynthwave 2s ease-in-out infinite}.track-item.playing:before{content:"♪";position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:2rem;background:linear-gradient(135deg,#ff006e,#00f5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:bounceSynthwave 1s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,0,110,1))}@keyframes pulseSynthwave{0%,to{box-shadow:0 0 30px #ff006e99,0 0 60px #8b00ff66,inset 0 0 20px #ff006e33}50%{box-shadow:0 0 40px #ff006e,0 0 80px #8b00ff99,inset 0 0 30px #ff006e4d}}@keyframes bounceSynthwave{0%,to{transform:translateY(-50%) scale(1);filter:drop-shadow(0 0 10px rgba(255,0,110,1))}50%{transform:translateY(-50%) scale(1.3) rotate(15deg);filter:drop-shadow(0 0 20px rgba(0,245,255,1))}}.track-item.dragging{opacity:.6;cursor:move;transform:rotate(3deg) scale(.98)}.track-actions{display:flex;align-items:center;gap:.5rem}.playlist-menu-container{position:relative}.btn-add-playlist{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;transition:color .2s}.btn-add-playlist:hover{color:#1db954}.playlist-menu{position:absolute;right:0;bottom:100%;background:#1a1a2efa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(0,245,255,.5);border-radius:12px;padding:.5rem 0;min-width:180px;max-height:300px;overflow-y:auto;z-index:10001;box-shadow:0 -4px 20px #0009,0 0 30px #00f5ff4d;margin-bottom:8px;animation:slideUpFade .2s ease-out}@keyframes slideUpFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.playlist-menu-item{padding:.5rem 1rem;cursor:pointer;transition:background .2s}.playlist-menu-item:hover{background:#00f5ff26;color:#00f5ff}.playlist-menu-item.disabled{color:#666;cursor:default}.playlist-menu-item.disabled:hover{background:transparent}.btn-play{width:40px;height:40px;background:#1db954;border:none;border-radius:50%;color:#fff;font-size:1.2rem;cursor:pointer;transition:background .2s;flex-shrink:0}.btn-play:hover{background:#1ed760}.track-thumbnail{width:45px;height:45px;object-fit:cover;border-radius:6px;flex-shrink:0;box-shadow:0 2px 8px #0000004d}.track-info{flex:1;min-width:0}.track-title{font-weight:600}.track-artist{font-size:.9rem;color:#888}.track-duration{color:#888;font-size:.9rem}.btn-delete{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;transition:color .2s}.btn-delete:hover{color:#f44}.player{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:2rem;padding:1.5rem 2rem;background:#0a0a0ff2;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-top:3px solid;border-image:linear-gradient(90deg,#ff006e,#8b00ff,#00f5ff) 1;box-shadow:0 -8px 40px #0009,0 0 60px #ff006e4d,0 0 100px #00f5ff33,inset 0 2px #ff006e4d;z-index:9999;animation:slideUp .5s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.player-error{position:absolute;top:-60px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ff6b6b,#ff4757);color:#fff;padding:1rem 2rem;border-radius:25px;box-shadow:0 6px 20px #ff444480,0 0 40px #ff44444d;font-size:.95rem;font-weight:600;z-index:10000;animation:bounceIn .5s ease-out;border:2px solid rgba(255,255,255,.4)}.player-loading{position:absolute;top:-60px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:1rem 2rem;border-radius:25px;box-shadow:0 6px 20px #4facfe80,0 0 40px #00f2fe4d;font-size:.95rem;font-weight:600;z-index:10000;animation:bounceIn .5s ease-out;border:2px solid rgba(255,255,255,.4)}@keyframes bounceIn{0%{opacity:0;transform:translate(-50%) translateY(20px) scale(.8)}50%{transform:translate(-50%) translateY(-5px) scale(1.05)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.player-info{width:200px}.player-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:.9rem;color:#888}.player-controls{display:flex;gap:1rem}.player-controls button{width:50px;height:50px;background:#1a1a2ecc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(0,245,255,.5);border-radius:50%;color:#00f5ff;font-size:1.3rem;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 15px #0006,0 0 20px #00f5ff4d}.player-controls button:hover:not(:disabled){background:#00f5ff33;border-color:#00f5ff;transform:scale(1.1) rotate(5deg);box-shadow:0 6px 20px #00f5ff99,0 0 30px #00f5ff80}.player-controls button:active:not(:disabled){transform:scale(.95)}.player-controls button:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(80%);border-color:#fff3}.btn-play-pause{width:60px!important;height:60px!important;background:linear-gradient(135deg,#ff006e,#ff0080)!important;border:3px solid #ff006e!important;color:#fff!important;box-shadow:0 6px 25px #ff006ecc,0 0 40px #ff006e99!important}.btn-play-pause:hover{transform:scale(1.15)!important;box-shadow:0 8px 30px #ff006e,0 0 60px #ff006ecc!important}.btn-shuffle{background:#1a1a2ecc!important;border-color:#8b00ff80!important;color:#8b00ffcc!important}.btn-shuffle.active{background:linear-gradient(135deg,#8b00ff,#b100ff)!important;border-color:#8b00ff!important;color:#fff!important;box-shadow:0 4px 15px #8b00ffcc,0 0 30px #8b00ff99!important}.player-progress{flex:1;display:flex;align-items:center;gap:1rem}.player-progress span{font-size:.9rem;color:#888;min-width:40px}.progress-bar{flex:1}.player-volume{display:flex;align-items:center;gap:.5rem;min-width:150px}.volume-bar{flex:1}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#1a1a2e99;height:8px;border-radius:10px;outline:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 2px 4px #0006,0 0 10px #00f5ff33;border:1px solid rgba(0,245,255,.3)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#ff006e,#ff0080);border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 10px #ff006ecc,0 0 20px #ff006e99;transition:all .3s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3);box-shadow:0 4px 15px #ff006e,0 0 30px #ff006ecc}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,#ff006e,#ff0080);border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 10px #ff006ecc,0 0 20px #ff006e99;transition:all .3s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.3);box-shadow:0 4px 15px #ff006e,0 0 30px #ff006ecc}.btn-voice{padding:.5rem 1rem;background:#333;border:none;border-radius:6px;color:#e0e0e0;cursor:pointer;transition:background .2s}.btn-voice:hover{background:#444}.btn-voice.listening{background:#f44;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.5rem}.search-youtube{background:#1a1a1a;padding:1.5rem;border-radius:8px;margin-bottom:2rem}.search-form{display:flex;gap:1rem;margin-bottom:1.5rem}.search-input{flex:1;padding:.75rem;background:#2a2a2a;border:1px solid #333;border-radius:6px;color:#e0e0e0;font-size:1rem}.search-button{padding:.75rem 1.5rem;background:#1db954;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer;transition:background .2s}.search-button:hover:not(:disabled){background:#1ed760}.search-button:disabled{background:#333;cursor:not-allowed}.youtube-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.youtube-header .search-form{flex:1;margin-bottom:0}.cookie-status-btn{padding:.75rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.cookie-status-btn.has-cookies{background:#1db95433;color:#1db954;border:1px solid #1db954}.cookie-status-btn.no-cookies{background:#fa03;color:#fa0;border:1px solid #ffaa00}.cookie-status-btn:hover{opacity:.8}.cookie-upload-panel{background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.cookie-upload-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.cookie-upload-header h4{margin:0;color:#fff}.cookie-upload-panel .close-btn{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;padding:.25rem}.cookie-upload-panel .close-btn:hover{color:#fff}.cookie-upload-panel p{color:#aaa;margin-bottom:1rem;font-size:.9rem}.cookie-file-input{width:100%;padding:.75rem;background:#1a1a1a;border:1px solid #444;border-radius:6px;color:#e0e0e0;cursor:pointer;margin-bottom:.75rem}.cookie-help{font-size:.8rem!important;color:#666!important;margin-bottom:0!important}.error-message{color:#f44;padding:.75rem;background:#ff44441a;border-radius:6px;margin-bottom:1rem}.search-results{display:flex;flex-direction:column;gap:1rem}.search-result-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#2a2a2a;border-radius:6px;transition:background .2s}.search-result-item:hover{background:#333}.result-thumbnail{width:120px;height:68px;object-fit:cover;border-radius:4px}.result-info{flex:1}.result-title{font-weight:600;margin-bottom:.25rem}.result-artist{color:#888;font-size:.9rem;margin-bottom:.25rem}.result-duration{color:#666;font-size:.85rem}.result-actions{display:flex;gap:.5rem}.preview-button,.add-button{padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s}.preview-button{background:#333;color:#e0e0e0}.preview-button:hover{background:#444}.add-button{background:#1db954;color:#fff}.add-button:hover{background:#1ed760}.btn-search{padding:.5rem 1rem;background:#333;border:none;border-radius:6px;color:#e0e0e0;cursor:pointer;transition:background .2s;font-weight:600}.btn-search:hover{background:#444}.preview-player{padding:1rem 2rem;background:#2a2a2a;border-top:1px solid #333}.preview-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.preview-info span{font-weight:600;color:#1db954}.btn-close-preview{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;transition:color .2s}.btn-close-preview:hover{color:#f44}.mobile-only{display:block}.desktop-only{display:flex}.hamburger-btn{background:none;border:none;cursor:pointer;padding:.5rem;z-index:1001;position:relative}.hamburger-icon{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px}.hamburger-icon span{display:block;height:2px;width:100%;background:#e0e0e0;border-radius:2px;transition:all .3s ease}.hamburger-icon.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-icon.open span:nth-child(2){opacity:0}.hamburger-icon.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;z-index:1000;display:flex;justify-content:flex-end;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-menu{background:#1a1a1a;width:280px;max-width:80%;height:100%;padding:4rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;animation:slideIn .3s ease;overflow-y:auto}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.mobile-menu-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#2a2a2a;border:none;border-radius:8px;color:#e0e0e0;font-size:1rem;cursor:pointer;transition:background .2s;text-align:left;width:100%}.mobile-menu-item:hover{background:#333}.mobile-menu-item.logout{margin-top:auto;background:#3a2a2a}.mobile-menu-item.logout:hover{background:#4a2a2a}@media (max-width: 1024px){.player{gap:1rem;padding:1rem}.player-info{width:150px}.player-volume{min-width:100px}.sidebar{width:200px}.content-area{padding:0}}@media (max-width: 768px){.desktop-only{display:none!important}.header{padding:.75rem 1rem;flex-wrap:wrap;gap:.5rem}.header h1{font-size:1.2rem;flex:1}.main-content{flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:109px}.sidebar{width:100%;max-height:40vh;border-right:none;border-bottom:2px solid rgba(0,245,255,.3);overflow-y:auto;overflow-x:hidden;display:block;padding:1rem;background:#1a1a2ee6;margin-bottom:1rem;position:static;flex-shrink:0}.playlists-container{display:block!important;width:100%;position:static;margin-top:.5rem}.sidebar-header{display:flex;margin-bottom:.75rem}.sidebar .playlist-item{width:100%!important;display:flex!important;margin-bottom:.5rem;margin-right:0!important;min-width:auto!important}.sidebar .new-playlist-form{display:flex;flex-direction:column;margin-bottom:.5rem}.sidebar .new-playlist-form input{width:100%;margin-bottom:.5rem}.content-area{padding:0;overflow-y:auto;flex:1}.player{flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem}.player-info{width:100%;order:1;display:flex;justify-content:space-between;align-items:center}.player-controls{order:2;gap:.5rem}.player-controls button{width:36px;height:36px;font-size:1rem}.btn-play-pause{width:42px!important;height:42px!important}.player-progress{order:3;width:100%}.player-volume{display:none}.track-item{padding:.4rem;gap:.4rem}.btn-play{width:32px;height:32px;font-size:.9rem}.track-thumbnail{width:38px;height:38px}.track-title{font-size:.85rem}.track-artist{font-size:.75rem}.track-duration{display:none}.search-result-item{flex-wrap:wrap}.result-thumbnail{width:80px;height:45px}.result-actions{width:100%;margin-top:.5rem}.youtube-form,.search-form{flex-direction:column}.youtube-form button,.search-button{width:100%}.youtube-header{flex-direction:column;gap:.75rem}.cookie-status-btn{width:100%;text-align:center}.cookie-upload-panel{padding:1rem}}@media (max-width: 480px){.login-box{padding:1.5rem;margin:1rem;border-radius:8px}.login-box h1{font-size:2rem}.header{padding:.5rem .75rem}.header h1{font-size:1rem;flex:1}.header-actions{flex-wrap:wrap;justify-content:flex-end}.btn-logout,.btn-search,.btn-voice{padding:.35rem .5rem;font-size:.75rem}.sidebar{max-height:none!important;padding:.75rem}.sidebar h2{font-size:.95rem}.sidebar .playlist-item{width:100%!important;padding:.5rem;font-size:.85rem}.content-area{padding:0}.add-track,.track-list,.search-youtube{padding:1rem;border-radius:6px;margin-bottom:1rem}.upload-area{padding:1rem}.upload-area p{font-size:.9rem}.track-item{padding:.4rem;gap:.4rem}.btn-play{width:28px;height:28px;font-size:.85rem}.track-thumbnail{width:32px;height:32px}.track-title{font-size:.8rem}.track-artist{font-size:.7rem}.track-actions{gap:.25rem}.btn-delete,.btn-add-playlist{font-size:1rem}.player{padding:.5rem .75rem;gap:.5rem}.player-info{font-size:.85rem}.player-title{max-width:150px}.player-controls button{width:32px;height:32px;font-size:.9rem}.btn-play-pause{width:38px!important;height:38px!important}.player-progress span{font-size:.75rem;min-width:32px}.result-thumbnail{width:60px;height:34px}.result-title{font-size:.9rem}.result-artist,.result-duration{font-size:.8rem}.preview-button,.add-button{padding:.4rem .75rem;font-size:.85rem}.all-tracks-controls{margin-bottom:.75rem}.btn-toggle-all,.btn-add-track-toggle{flex:1 1 auto;min-width:48%;padding:.65rem .75rem;font-size:.85rem}.track-list-actions{width:100%;justify-content:stretch;gap:.5rem}.btn-play-all,.btn-shuffle-all{width:42px;height:42px;font-size:1.1rem}.btn-remove-playlist{width:28px;height:28px;font-size:.85rem}.preview-player{padding:.75rem}.preview-info span{font-size:.85rem}}@media (max-width: 360px){.header h1{font-size:.9rem}.player-controls{gap:.25rem}.player-controls button{width:28px;height:28px}.btn-play-pause{width:34px!important;height:34px!important}.mobile-menu{width:100%;max-width:100%}}.track-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.track-list-actions{display:flex;gap:.75rem}.btn-play-all,.btn-shuffle-all{width:48px;height:48px;padding:0;border:none;border-radius:50%;color:#fff;font-size:1.3rem;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 15px #0000004d;display:flex;align-items:center;justify-content:center}.btn-play-all{background:linear-gradient(135deg,#ff006e,#ff0080);border:2px solid rgba(255,0,110,.6);box-shadow:0 4px 15px #ff006e80,0 0 20px #ff006e4d}.btn-shuffle-all{background:linear-gradient(135deg,#8b00ff,#b100ff);border:2px solid rgba(139,0,255,.6);box-shadow:0 4px 15px #8b00ff80,0 0 20px #8b00ff4d}.btn-play-all:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 25px #ff006ecc,0 0 35px #ff006e99}.btn-shuffle-all:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 25px #8b00ffcc,0 0 35px #8b00ff99}.btn-play-all:active,.btn-shuffle-all:active{transform:translateY(0) scale(1)}.btn-remove-playlist{background:#ff006e26;border:2px solid rgba(255,0,110,.5);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#ff006e;font-size:1rem}.btn-remove-playlist:hover{background:#ff006e4d;border-color:#ff006e;transform:scale(1.15) rotate(-90deg);box-shadow:0 0 20px #ff006e99}.content-controls{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center;padding:.5rem 0}.btn-add-track-toggle,.btn-toggle-all{padding:.6rem 1.2rem;background:#00f5ff1a;border:2px solid rgba(0,245,255,.5);border-radius:18px;color:#00f5ff;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.btn-add-track-toggle:hover,.btn-toggle-all:hover{background:#00f5ff40;border-color:#00f5ff;box-shadow:0 0 20px #00f5ff80;transform:translateY(-2px)}.btn-add-track-toggle:active,.btn-toggle-all:active{transform:translateY(0)}