body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden}.App{display:flex;flex-direction:column;height:100vh}.header{align-items:center;background:#000;border-bottom:1px solid #282828;display:flex;justify-content:space-between;padding:20px 30px;position:relative;z-index:10}.header h1{color:#fff;font-size:24px;font-weight:700}.mobile-menu-btn{align-items:center;background:#0000;border:none;color:#fff;cursor:pointer;display:none;font-size:28px;height:44px;justify-content:center;padding:8px;transition:all .2s;width:44px}.mobile-menu-btn:hover{color:#1db954}.mobile-close-btn{background:#0000;border:none;color:#a7a7a7;cursor:pointer;display:none;font-size:28px;padding:8px;transition:all .2s}.mobile-close-btn:hover{color:#fff}.mobile-overlay{display:none}.search-input{background:#242424;border:1px solid #3e3e3e;border-radius:24px;color:#fff;font-size:14px;padding:10px 20px;transition:all .2s;width:350px}.search-input:focus{background:#2a2a2a;border-color:#535353;outline:none}.search-input::placeholder{color:#a7a7a7}.mobile-search-btn{align-items:center;background:#0000;border:none;color:#fff;cursor:pointer;display:none;font-size:24px;height:44px;justify-content:center;padding:8px;transition:all .2s;width:44px}.mobile-search-btn:hover{color:#1db954}.mobile-search-overlay{animation:fadeIn .2s ease;background:#000;bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:2000}.mobile-search-container{display:flex;flex-direction:column;height:100%;width:100%}.mobile-search-header{align-items:center;background:#000;border-bottom:1px solid #282828;display:flex;gap:12px;padding:16px}.mobile-search-input{background:#242424;border:1px solid #3e3e3e;border-radius:24px;color:#fff;flex:1 1;font-size:16px;outline:none;padding:12px 20px}.mobile-search-input:focus{background:#2a2a2a;border-color:#1db954}.mobile-search-input::placeholder{color:#a7a7a7}.mobile-search-close{align-items:center;background:#0000;border:none;color:#fff;cursor:pointer;display:flex;font-size:28px;height:44px;justify-content:center;padding:8px;transition:all .2s;width:44px}.mobile-search-close:hover{color:#1db954}.mobile-search-results{flex:1 1;overflow-y:auto;padding:16px}.search-results-count{color:#a7a7a7;font-size:13px;margin-bottom:16px}.mobile-search-songs{display:flex;flex-direction:column;gap:8px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.main-content{flex:1 1}.main-content,.sidebar{display:flex;overflow:hidden}.sidebar{background:#000;border-right:1px solid #282828;flex-direction:column;position:relative;width:280px}.playlist-section{border-bottom:1px solid #282828;flex:1 1;overflow-y:auto;padding:20px}.playlist-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.playlist-header h2{color:#a7a7a7;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.add-playlist-btn{align-items:center;background:#0000;border:none;color:#a7a7a7;cursor:pointer;display:flex;font-size:28px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}.add-playlist-btn:hover{color:#fff;transform:scale(1.1)}.playlist-form{display:flex;gap:8px;margin-bottom:15px}.playlist-form input{background:#242424;border:1px solid #3e3e3e;border-radius:4px;color:#fff;flex:1 1;font-size:13px;padding:8px 12px}.playlist-form input:focus{border-color:#1db954;outline:none}.playlist-form button{background:#1db954;border:none;border-radius:4px;color:#000;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .2s}.playlist-form button:hover{background:#1ed760;transform:scale(1.05)}.playlist-list{list-style:none}.playlist-item{align-items:center;border-radius:4px;cursor:pointer;display:flex;gap:12px;justify-content:space-between;padding:10px 12px;transition:all .2s}.playlist-item:hover{background:#1a1a1a}.playlist-item.active{background:#282828}.playlist-name{color:#b3b3b3;flex:1 1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-item.active .playlist-name,.playlist-item:hover .playlist-name{color:#fff}.delete-btn{background:#0000;border:none;cursor:pointer;font-size:16px;margin-left:8px;opacity:0;padding:4px 8px;transition:opacity .2s}.playlist-item:hover .delete-btn{opacity:.6}.delete-btn:hover{opacity:1!important}.sidebar-player{border-top:1px solid #282828;display:flex;flex-direction:column;gap:12px;margin-top:auto;padding:20px}.sidebar-cover{aspect-ratio:1;border-radius:4px;box-shadow:0 8px 24px #00000080;object-fit:cover;width:100%}.sidebar-player h3{font-size:15px;font-weight:600}.sidebar-player h3,.sidebar-player p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-player p{color:#b3b3b3;font-size:13px}.sidebar-controls{display:flex;gap:12px;justify-content:center;margin-top:8px}.sidebar-controls button{align-items:center;background:#1a1a1a;border:1px solid #3e3e3e;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;transition:all .2s;width:40px}.sidebar-controls button.active-control{background:#1db954;border-color:#1db954;color:#000}.sidebar-controls button.active-control:hover{background:#1ed760;border-color:#1ed760}.sidebar-controls button:hover{background:#282828;border-color:#535353;transform:scale(1.05)}.sidebar-controls button:active{transform:scale(.95)}.progress-bar{-webkit-appearance:none;appearance:none;background:#3e3e3e;border-radius:2px;cursor:pointer;height:4px;outline:none;width:100%}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;cursor:pointer;height:12px;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s;width:12px}.progress-bar:hover::-webkit-slider-thumb{opacity:1}.progress-bar::-moz-range-thumb{background:#fff;border:none;border-radius:50%;cursor:pointer;height:12px;opacity:0;-moz-transition:opacity .2s;transition:opacity .2s;width:12px}.progress-bar:hover::-moz-range-thumb{opacity:1}.time-display{color:#a7a7a7;display:flex;font-size:11px;justify-content:space-between}.song-list{background:#121212;flex:1 1;overflow-y:auto;padding:30px}.songs-header{align-items:center;display:flex;gap:20px;margin-bottom:30px}.songs-header h2{font-size:28px;font-weight:700}.back-btn{align-items:center;background:#1a1a1a;border:1px solid #3e3e3e;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:10px 18px;transition:all .2s}.back-btn:hover{background:#282828;border-color:#1db954;transform:translateX(-4px)}.songs{display:flex;flex-direction:column;gap:8px}.song-item{align-items:center;background:#0000;border-radius:4px;display:flex;justify-content:space-between;padding:12px 16px;transition:all .2s}.song-item:hover{background:#1a1a1a}.song-item.active{background:#282828}.song-info{align-items:center;cursor:pointer;display:flex;flex:1 1;gap:12px}.song-cover{border-radius:4px;height:48px;object-fit:cover;width:48px}.song-info h3{color:#fff;font-size:15px;font-weight:500}.song-info p{color:#b3b3b3;font-size:13px;margin-top:4px}.song-actions{display:flex;gap:8px;opacity:0;transition:opacity .2s}.song-item.active .song-actions,.song-item:hover .song-actions{opacity:1}.add-song-btn,.play-btn{font-size:13px;font-weight:600}.add-song-btn,.play-btn,.remove-song-btn{background:#0000;border:1px solid #3e3e3e;border-radius:4px;color:#fff;cursor:pointer;padding:8px 16px;transition:all .2s}.remove-song-btn{align-items:center;display:flex;font-size:16px;justify-content:center}.remove-song-btn:hover{background:#1a1a1a;border-color:#e22134;transform:scale(1.05)}.add-song-btn:hover,.play-btn:hover{background:#1a1a1a;border-color:#535353;transform:scale(1.05)}.add-song-btn:hover{border-color:#1db954;color:#1db954}.playlist-modal{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;display:flex;inset:0;justify-content:center;position:fixed;z-index:1000}.playlist-modal-content{background:#282828;border:1px solid #3e3e3e;border-radius:8px;box-shadow:0 16px 48px #0009;max-width:400px;padding:24px;width:90%}.playlist-modal-content h3{font-size:18px;font-weight:700;margin-bottom:8px}.playlist-modal-content p{color:#b3b3b3;font-size:13px;margin-bottom:20px}.playlist-modal-buttons{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.playlist-option{background:#1a1a1a;border:1px solid #3e3e3e;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 16px;text-align:left;transition:all .2s}.playlist-option:hover{background:#242424;border-color:#1db954;transform:translateX(4px)}.cancel-button{background:#0000;border:1px solid #535353;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px;transition:all .2s;width:100%}.cancel-button:hover{background:#1a1a1a;border-color:#727272}.toast{animation:slideUp .3s ease;background:#1db954;border-radius:24px;bottom:80px;box-shadow:0 8px 24px #0006;color:#000;font-size:14px;font-weight:600;left:50%;padding:12px 24px;position:fixed;transform:translateX(-50%);z-index:2000}@keyframes slideUp{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.playlist-section::-webkit-scrollbar,.song-list::-webkit-scrollbar{width:12px}.playlist-section::-webkit-scrollbar-track,.song-list::-webkit-scrollbar-track{background:#0000}.playlist-section::-webkit-scrollbar-thumb,.song-list::-webkit-scrollbar-thumb{background:#3e3e3e;border-radius:6px}.playlist-section::-webkit-scrollbar-thumb:hover,.song-list::-webkit-scrollbar-thumb:hover{background:#535353}@media (max-width:1024px){.sidebar{width:240px}.search-input{width:280px}.song-list{padding:20px}}@media (max-width:768px){.header{gap:12px;padding:12px 16px}.header h1{flex:1 1;font-size:18px;text-align:center}.search-input.desktop-search{display:none}.mobile-search-btn{display:flex}.mobile-search-overlay{display:block}.mobile-menu-btn{display:flex}.search-input{display:none}@media (max-width:768px){.volume-control{margin-left:0}.volume-btn{font-size:22px;height:52px;width:52px}.volume-slider-container{bottom:60px;box-shadow:0 8px 24px #000c;padding:16px 10px}.volume-slider{height:120px;width:6px}.volume-slider::-webkit-slider-thumb{height:16px;width:16px}.volume-slider::-moz-range-thumb{height:16px;width:16px}}.sidebar{box-shadow:2px 0 16px #0006;height:100vh;left:-100%;overflow-y:auto;position:fixed;top:0;transition:left .3s ease;width:280px;z-index:1000}.sidebar.mobile-open{left:0}.sidebar .mobile-close-btn{background:#1a1a1a;border:1px solid #3e3e3e;border-radius:20px;color:#fff;display:flex;font-size:14px;font-weight:600;gap:6px;height:auto;left:16px;padding:8px 16px;position:absolute;top:16px;width:auto;z-index:1001}.sidebar .mobile-close-btn:before{content:"← "}.sidebar .mobile-close-btn:hover{background:#282828;border-color:#1db954}.mobile-overlay{background:#000c;display:block;inset:0;position:fixed;z-index:999}.playlist-section{max-height:45vh;overflow-y:auto;padding:70px 16px 16px}.playlist-header{margin-bottom:20px}.playlist-header h2{font-size:16px}.add-playlist-btn{background:#1db954;border-radius:50%;color:#000;font-size:32px;height:44px;width:44px}.add-playlist-btn:hover{background:#1ed760}.song-list{padding:16px;width:100%}.songs-header{gap:12px;margin-bottom:20px}.songs-header h2{font-size:22px}.song-item{align-items:flex-start;flex-direction:column;gap:12px;padding:12px}.song-info{width:100%}.song-cover{height:56px;width:56px}.song-info h3{font-size:14px}.song-info p{font-size:12px}.song-actions{justify-content:flex-start;opacity:1;width:100%}.add-song-btn,.play-btn{font-size:14px;min-height:44px;padding:10px 16px}.back-btn{font-size:13px;min-height:44px;padding:10px 16px}.playlist-modal-content{margin:16px;padding:20px}.playlist-option{font-size:15px;min-height:48px;padding:14px 16px}.cancel-button{min-height:48px;padding:14px}.toast{bottom:20px;font-size:13px;padding:10px 20px}.sidebar-player{padding:16px;padding:16px 16px 80px}.sidebar-controls button{font-size:22px;height:52px;width:52px}.progress-bar{height:6px}.progress-bar::-webkit-slider-thumb{height:16px;opacity:1;width:16px}.progress-bar::-moz-range-thumb{height:16px;opacity:1;width:16px}.time-display{font-size:12px;margin-top:4px}.volume-control{margin-left:8px;position:relative}.volume-btn,.volume-control{align-items:center;display:flex}.volume-btn{-webkit-tap-highlight-color:transparent;background:#1a1a1a;border:1px solid #3e3e3e;border-radius:4px;color:#fff;cursor:pointer;font-size:18px;height:40px;justify-content:center;transition:all .2s;width:40px}.volume-btn:hover{background:#282828;border-color:#535353;transform:scale(1.05)}.volume-slider-container{background:#282828;border:1px solid #3e3e3e;border-radius:4px;bottom:50px;box-shadow:0 8px 24px #0009;left:50%;padding:12px 8px;position:absolute;transform:translateX(-50%);z-index:100}.volume-slider{-webkit-appearance:slider-vertical;appearance:slider-vertical;background:linear-gradient(0deg,#1db954 50%,#3e3e3e 50%);background:linear-gradient(to top,#1db954 calc(var(--volume-percent, 50)*1%),#3e3e3e calc(var(--volume-percent, 50)*1%));border-radius:2px;cursor:pointer;height:100px;outline:none;touch-action:none;width:4px;writing-mode:bt-lr}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;cursor:pointer;height:12px;-webkit-transition:all .2s;transition:all .2s;width:12px}.volume-slider:hover::-webkit-slider-thumb{background:#1db954;transform:scale(1.2)}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;cursor:pointer;height:12px;-moz-transition:all .2s;transition:all .2s;width:12px}.volume-slider:hover::-moz-range-thumb{background:#1db954;transform:scale(1.2)}.playlist-item{min-height:48px;padding:12px}.playlist-name{font-size:15px}.delete-btn{font-size:18px;opacity:1;padding:8px}}@media (max-width:480px){.sidebar{left:-100%;width:100%}.sidebar.mobile-open{left:0}.header h1{font-size:16px}.songs-header h2{font-size:20px}.song-cover{height:48px;width:48px}.playlist-modal-content{padding:16px;width:95%}}.logout-btn{background:#0000;border:1px solid #1db954;border-radius:20px;color:#1db954;cursor:pointer;font-size:14px;font-weight:600;margin-left:auto;padding:8px 16px;transition:all .2s}.logout-btn:hover{background:#1db954;color:#000}@media (max-width:768px){.logout-btn{font-size:12px;padding:6px 12px}}.login-container{align-items:center;background:linear-gradient(135deg,#1db954,#191414);display:flex;justify-content:center;min-height:100vh}.login-box{background:#282828;border-radius:8px;box-shadow:0 8px 24px #0006;max-width:400px;padding:40px;text-align:center;width:100%}.login-box h1{color:#1db954;font-size:32px;margin-bottom:10px}.login-box h2{color:#fff;font-size:20px;font-weight:400;margin-bottom:30px}.login-box input{background:#1a1a1a;border:1px solid #404040;border-radius:4px;box-sizing:border-box;color:#fff;font-size:16px;margin-bottom:16px;padding:14px;width:100%}.login-box input:focus{border-color:#1db954;outline:none}.login-box button{background:#1db954;border:none;border-radius:50px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px;transition:all .3s;width:100%}.login-box button:hover:not(:disabled){background:#1ed760;transform:scale(1.02)}.login-box button:disabled{cursor:not-allowed;opacity:.6}.error-message{background:#e22134;border-radius:4px;color:#fff;font-size:14px;margin-bottom:16px;padding:12px}
/*# sourceMappingURL=main.aabe3e3a.css.map*/