* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(135deg, #000000 0%, #000000 100%);
     color: white;
     min-height: 100vh;
     padding-bottom: 100px;
 }

 .hero {
     padding: 80px 40px 40px;
     background: linear-gradient(135deg, rgba(71, 71, 69, 0.9), rgba(162, 156, 75, 0.815));
 }

 .hero-content {
     max-width: 1200px;
     margin: 0 auto;
 }

 .verified {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 16px;
     font-size: 14px;
 }

 .verified-icon {
     background: #1db954;
     color: white;
     border-radius: 50%;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: bold;
 }

 .hero h1 {
     font-size: 4rem;
     font-weight: 900;
     margin-bottom: 16px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }

 .listeners {
     font-size: 16px;
     margin-bottom: 32px;
     opacity: 0.9;
 }

 .control-buttons {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
 }

 .btn-play {
     background: #1db954;
     border: none;
     border-radius: 50%;
     width: 64px;
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 24px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 16px rgba(29, 185, 84, 0.4);
 }

 .btn-play:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 20px rgba(29, 185, 84, 0.6);
 }

 .album-thumb {
     width: 56px;
     height: 56px;
     border-radius: 8px;
 }

 .btn-shuffle,
 .btn-follow,
 .btn-more {
     background: transparent;
     border: 2px solid rgba(255, 255, 255, 0.3);
     color: white;
     padding: 12px 24px;
     border-radius: 24px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .btn-shuffle:hover,
 .btn-follow:hover,
 .btn-more:hover {
     border-color: white;
     background: rgba(255, 255, 255, 0.1);
 }

 .content {
     padding: 40px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .popular-section h2 {
     font-size: 2rem;
     margin-bottom: 24px;
     font-weight: 700;
 }

 .song-list {
     list-style: none;
     padding: 0;
 }

 .song-item {
     display: grid;
     grid-template-columns: 40px 40px 1fr 120px 80px;
     gap: 16px;
     align-items: center;
     padding: 12px 16px;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-bottom: 8px;
 }

 .song-item:hover {
     background: rgba(255, 255, 255, 0.1);
 }

 .song-item.playing {
     background: rgba(29, 185, 84, 0.2);
 }

 .song-number {
     font-weight: 500;
     color: #b3b3b3;
 }

 .song-thumb {
     width: 40px;
     height: 40px;
     border-radius: 4px;
 }

 .song-info {
     display: flex;
     flex-direction: column;
 }

 .song-title {
     font-weight: 500;
     margin-bottom: 4px;
 }

 .song-artist {
     color: #b3b3b3;
     font-size: 14px;
 }

 .song-plays {
     color: #b3b3b3;
     font-size: 14px;
 }

 .song-duration {
     color: #b3b3b3;
     font-size: 14px;
 }

 .artist-pick {
     margin-top: 48px;
     padding: 24px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     backdrop-filter: blur(10px);
 }

 .artist-pick h3 {
     font-size: 1.5rem;
     margin-bottom: 16px;
     font-weight: 700;
 }

 .artist-pick-content {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .artist-pick-content img {
     width: 80px;
     height: 80px;
     border-radius: 8px;
 }

 .artist-pick-promo {
     font-size: 14px;
     color: #feca57;
     font-weight: 600;
     margin-bottom: 8px;
 }

 .artist-pick-title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .artist-pick-subtitle {
     color: #b3b3b3;
     font-size: 14px;
 }

 .music-player {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.9);
     backdrop-filter: blur(20px);
     padding: 16px 24px;
     display: none;
     grid-template-columns: 1fr 2fr 1fr;
     gap: 24px;
     align-items: center;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .music-player.active {
     display: grid;
 }

 .now-playing {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .now-playing img {
     width: 48px;
     height: 48px;
     border-radius: 4px;
 }

 .song-info h4 {
     font-size: 14px;
     margin-bottom: 4px;
     font-weight: 500;
 }

 .song-info p {
     font-size: 12px;
     color: #b3b3b3;
     margin: 0;
 }

 .like-button {
     background: none;
     border: none;
     color: #b3b3b3;
     cursor: pointer;
     font-size: 16px;
     transition: color 0.3s ease;
 }

 .like-button:hover {
     color: #1db954;
 }

 .player-controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
 }

 .control-buttons {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .control-btn,
 .play-pause-btn {
     background: none;
     border: none;
     color: white;
     cursor: pointer;
     font-size: 16px;
     transition: color 0.3s ease;
 }

 .play-pause-btn {
     background: white;
     color: black;
     border-radius: 50%;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
 }

 .control-btn:hover {
     color: #1db954;
 }

 .progress-bar {
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     max-width: 600px;
 }

 .time {
     font-size: 12px;
     color: #b3b3b3;
     min-width: 40px;
 }

 .progress {
     flex: 1;
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 2px;
     overflow: hidden;
     cursor: pointer;
 }

 .progress-fill {
     height: 100%;
     background: white;
     width: 0%;
     transition: width 0.1s ease;
 }

 .volume-controls {
     display: flex;
     align-items: center;
     gap: 16px;
     justify-content: flex-end;
 }

 .volume-btn {
     background: none;
     border: none;
     color: #b3b3b3;
     cursor: pointer;
     font-size: 16px;
     transition: color 0.3s ease;
 }

 .volume-btn:hover {
     color: white;
 }

 .volume-slider {
     width: 100px;
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 2px;
     overflow: hidden;
     cursor: pointer;
 }

 .volume-fill {
     height: 100%;
     background: white;
     width: 50%;
 }

 @media (max-width: 768px) {
     .hero {
         padding: 40px 20px 20px;
     }

     .hero h1 {
         font-size: 2.5rem;
     }

     .content {
         padding: 20px;
     }

     .song-item {
         grid-template-columns: 30px 40px 1fr 80px;
         gap: 12px;
     }

     .song-plays {
         display: none;
     }

     .music-player {
         grid-template-columns: 1fr;
         gap: 16px;
         text-align: center;
     }
 }