.sidebar{width:200px;height:100vh;color:#fff;background-color:#121212;padding:20px;box-shadow:2px 0 10px #0003;display:flex;flex-direction:column;gap:30px;position:fixed;top:0;left:0;overflow-y:auto;z-index:1000;transition:transform .3s ease}.sidebar-toggle{display:none}@media (max-width: 768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-toggle{display:block;position:fixed;top:20px;left:20px;background-color:#1db954;color:#fff;border:none;padding:10px 14px;font-size:20px;z-index:1100;border-radius:5px;cursor:pointer}}.sidebar h2{margin-bottom:20px;font-size:24px;color:#1db954}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar ul p{margin-bottom:10px;font-weight:700;font-size:14px;color:#aaa}.sidebar ul li{margin-bottom:10px}.sidebar ul li a{text-decoration:none;color:#ccc;padding:8px 12px;display:block;border-radius:6px;transition:background-color .2s ease}.sidebar ul li a:hover{background-color:#2f2f4f;color:#00e676}.now-playing-bar{position:fixed;bottom:0;left:0;right:0;height:60px;background-color:#181818;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0 20px;z-index:999;box-shadow:0 -2px 8px #0000004d}@media (max-width: 768px){.now-playing-bar{font-size:13px;padding:0 10px;text-align:center}}body{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#121212;color:#fff}.layout{display:flex;flex-direction:column;min-height:100vh}.header,.footer{background-color:#00a86b;color:#fff;padding:1rem;text-align:center}.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:10px 20px;gap:10px}.nav ul{display:flex;list-style:none;padding:0;margin:0;gap:15px;flex-wrap:wrap}.nav ul li{cursor:pointer;font-weight:500}.nav button{padding:8px 16px;border-radius:20px;background-color:#000;color:#fff;border:none;cursor:pointer;font-size:14px}.nav button:hover{background-color:#1db954}.content{display:flex;flex:1}.main-content{flex:1;margin-left:240px;padding:20px 20px 80px;background-color:#121212;transition:margin-left .3s ease}@media (max-width: 768px){.main-content{margin-left:0;padding:15px}.nav{flex-direction:column;align-items:flex-start}.nav ul{flex-direction:column;gap:10px}}.music-details{display:flex;flex-direction:column;gap:40px;padding:20px 0}.playlist,.album-section{flex:1}.playlist h2,.album-section h2{margin-bottom:15px;font-size:20px;color:#1db954}.playlist-container,.album-container{display:flex;flex-wrap:wrap;gap:20px}.item{width:150px;height:150px;background-color:#282828;border-radius:10px;transition:transform .2s ease}.item:hover{transform:scale(1.05)}@media (max-width: 480px){.item{width:100px;height:100px}}.music-home{padding:50px 20px 80px;color:#fff;background-color:#121212;min-height:100vh;box-sizing:border-box}.hero h1{font-size:28px;margin-bottom:10px}.hero p{font-size:16px;color:#ccc}.quick-cards{display:flex;flex-wrap:wrap;gap:16px;margin:48px 0}.card{background-color:#1e1e1e;border-radius:8px;padding:16px;flex:1 1 200px;min-width:150px}.card h3{margin-bottom:10px;font-size:16px}.card p{color:#aaa;font-size:14px}.recently-played{margin-top:50px}.recently-played h2{margin-bottom:20px;font-size:18px}.recently-played ul{list-style:none;padding:0;margin:0}.recently-played li{background-color:#2a2a2a;border-radius:6px;padding:10px 14px;margin-bottom:10px;display:flex;justify-content:space-between;font-size:14px}.now-playing-bar{position:fixed;bottom:0;left:0;right:0;background:#181818;padding:14px 20px;color:#fff;border-top:1px solid #333;font-size:14px;text-align:center;z-index:999}@media (max-width: 768px){.quick-cards{flex-direction:column}.card{width:100%}.hero h1{font-size:20px}.hero p{font-size:14px}.recently-played li{flex-direction:column;align-items:flex-start}.recently-played li small{margin-top:6px;font-size:12px;color:#888}}.playlist-section{padding:50px 20px;color:#f0f0f0}.playlist-header{text-align:left;margin-bottom:30px}.playlist-header h2{font-size:24px;padding-top:10px;margin:0;color:#fff}.playlist-header p{font-size:16px;color:#ccc;margin-top:6px}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}.playlist-card{background-color:#1e1e1e;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #0000004d;transition:transform .3s ease;cursor:pointer;text-align:center}.playlist-card:hover{transform:scale(1.05)}.playlist-card img{width:100%;height:150px;object-fit:cover}.playlist-info{padding:12px 10px;color:#fff}.playlist-info h4{font-size:16px;margin:0}.playlist-info p{font-size:13px;color:#aaa;margin-top:4px}@media (max-width: 768px){.playlist-header h2{font-size:22px}.playlist-header p{font-size:13px}.playlist-card img{height:130px}.playlist-info h4{font-size:15px}.playlist-info p{font-size:12px}}.browse-section{padding:50px 20px;background-color:#121212;color:#fff;min-height:100vh}.browse-header{text-align:left;margin-bottom:30px}.browse-header h2{font-size:24px;margin-bottom:6px}.browse-header p{font-size:16px;color:#ccc}.browse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.browse-card{background-color:#1e1e1e;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #0003;cursor:pointer;transition:transform .2s ease;text-align:center}.browse-card:hover{transform:scale(1.05)}.browse-card img{width:100%;height:120px;object-fit:cover}.browse-card h4{padding:10px;font-size:16px;color:#fff}@media (max-width: 768px){.browse-header h2{font-size:24px}.browse-header p{font-size:14px}.browse-card img{height:100px}.browse-card h4{font-size:14px}}.radio-page{padding:50px 20px;color:#f0f0f0}.radio-header{text-align:left;margin-bottom:30px}.radio-header h2{font-size:24px;padding-top:10px;margin:0;color:#fff}.radio-header p{font-size:16px;color:#ccc;margin-top:6px}.radio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}.radio-card{background-color:#1f1f1f;border-radius:12px;overflow:hidden;text-align:center;box-shadow:0 3px 8px #0000004d;transition:transform .3s ease}.radio-card:hover{transform:translateY(-5px)}.radio-card img{width:100%;height:140px;object-fit:cover}.radio-info{padding:14px}.radio-info h4{font-size:17px;margin:5px 0 4px;color:#fff}.radio-info p{font-size:13px;color:#aaa;margin-bottom:10px}.radio-info button{background-color:#1db954;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:20px;cursor:pointer;transition:background .3s ease}.radio-info button:hover{background-color:#17a74a}@media (max-width: 768px){.radio-header h2{font-size:22px}.radio-header p{font-size:13px}.radio-info h4{font-size:15px}.radio-info p{font-size:12px}.radio-info button{font-size:13px;padding:6px 12px}}.songs-section{padding:50px 20px;background-color:#121212;color:#fff;min-height:100vh}.songs-header{text-align:left;margin-bottom:30px}.songs-header h2{font-size:24px;margin-bottom:10px}.songs-header p{font-size:16px;color:#ccc}.songs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.song-card{background-color:#1e1e1e;border-radius:12px;overflow:hidden;text-align:center;transition:transform .3s ease;cursor:pointer;box-shadow:0 2px 8px #00000040}.song-card:hover{transform:scale(1.05)}.song-card img{width:100%;height:150px;object-fit:cover}.song-info{padding:10px}.song-info h4{font-size:16px;margin:0;color:#fff}.song-info p{margin:4px 0 0;font-size:14px;color:#ccc}@media (max-width: 768px){.songs-header h2{font-size:24px}.songs-header p{font-size:14px}.song-card img{height:120px}.song-info h4{font-size:15px}.song-info p{font-size:13px}}.favourites-page{padding:40px 20px;color:#f0f0f0}.favourites-header{margin-bottom:30px}.favourites-header h2{font-size:24px;color:#fff}.favourites-header p{color:#ccc;font-size:16px;margin-top:6px}.favourites-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.favourite-card{background-color:#1e1e1e;border-radius:10px;overflow:hidden;text-align:center;box-shadow:0 2px 6px #00000040;transition:transform .3s ease}.favourite-card:hover{transform:translateY(-4px)}.favourite-card img{width:100%;height:160px;object-fit:cover}.track-info{padding:10px}.track-info h4{font-size:16px;color:#fff;margin:8px 0 4px}.track-info p{font-size:13px;color:#aaa}@media (max-width: 768px){.favourites-header h2{font-size:22px}.track-info h4{font-size:15px}.track-info p{font-size:12px}}