/* 🎨 ⭐️: Import a cool font (by Prashant) */
/* Loads 'Bricolage Grotesque' from Google Fonts for a modern, clean look */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

/* 🎨 ⭐️: Define color variables (by Prashant) */
/* Sets reusable colors for the app to keep it consistent */
:root {
    --primary-color: #8C52FF; /* Main purple color for buttons and highlights */
    --secondary-color: #B365FF; /* Lighter purple for hover effects */
    --dark-color: #121212; /* Dark background for the app */
    --darker-color: #0A0A0A; /* Even darker background for sidebar/playlist */
    --text-color: #FFFFFF; /* White text for readability */
    --secondary-text: #B3B3B3; /* Gray text for secondary info like artist names */
    --card-color: #181818; /* Dark gray for cards and list items */
    --hover-color: #282828; /* Slightly lighter gray for hover effects */
    --header-gradient: linear-gradient(to right, #8C52FF, #5E1ED5); /* Purple gradient for headers */
}

/* 🧹 ⭐️: Reset default styles (by Prashant) */
/* Removes unwanted margins/padding and ensures consistent sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Makes width/height include padding and borders */
}

/* 🌑 ⭐️: Style the entire page (by Prashant) */
/* Sets the font, background, and text color for the whole app */
body {
    font-family: 'Bricolage Grotesque', sans-serif; /* Uses the cool font */
    background-color: var(--dark-color); /* Dark background */
    color: var(--text-color); /* White text */
    line-height: 1.6; /* Spacing between text lines for readability */
}

/* 🔐 ⭐️: Style the login page (by Prashant) */
/* Centers the login form on the screen with a gradient background */
.login-body {
    display: flex; /* Centers content */
    align-items: center; /* Vertically centers */
    justify-content: center; /* Horizontally centers */
    min-height: 100vh; /* Fills the screen height */
    background: linear-gradient(to bottom, #5E1ED5, var(--darker-color)); /* Purple-to-dark gradient */
}

/* 📏 ⭐️: Size the login form container (by Prashant) */
/* Limits the form width for a clean look */
.login-container {
    width: 100%; /* Full width on small screens */
    max-width: 420px; /* Max width on larger screens */
    padding: 20px; /* Space around the form */
}

/* 📜 ⭐️: Style the login card (by Prashant) */
/* Creates a dark, rounded box for the login form */
.login-card {
    background-color: var(--card-color); /* Dark gray background */
    border-radius: 8px; /* Rounded corners */
    padding: 30px; /* Inner space */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

/* 🎵 ⭐️: Style the login header (by Prashant) */
/* Centers the logo and title */
.login-header {
    display: flex; /* Aligns logo and title side by side */
    align-items: center; /* Vertically centers */
    justify-content: center; /* Horizontally centers */
    margin-bottom: 30px; /* Space below */
    gap: 10px; /* Space between logo and title */
}

/* 🎨 ⭐️: Style the login logo icon (by Prashant) */
/* Makes the logo icon purple and large */
.login-header i {
    font-size: 2rem; /* Big icon size */
    color: var(--primary-color); /* Purple color */
}

/* 🖌️ ⭐️: Style the login title (by Prashant) */
/* Makes the title bold and large */
.login-header h1 {
    font-size: 2rem; /* Big title */
    font-weight: 700; /* Bold text */
}

/* 🏷️ ⭐️: Style the logo tagline (by Prashant) */
/* Small gray text under the title */
.logo-tag {
    font-size: 0.75rem; /* Tiny text */
    color: var(--secondary-text); /* Gray color */
    margin-left: -5px; /* Slight left shift */
    margin-top: 8px; /* Space above */
}

/* 🏷️ ⭐️: Adjust logo tagline in login header (by Prashant) */
/* Slightly larger for the login page */
.login-header .logo-tag {
    font-size: 1rem; /* Bigger than normal */
    margin-left: -5px; /* Same left shift */
    margin-top: 12px; /* More space above */
}

/* 📝 ⭐️: Style input groups (by Prashant) */
/* Groups labels and inputs for username/password */
.input-group {
    margin-bottom: 20px; /* Space below each input */
}

/* 🏷️ ⭐️: Style input labels (by Prashant) */
/* Small gray labels above inputs */
.input-group label {
    display: block; /* Takes full width */
    margin-bottom: 8px; /* Space below */
    color: var(--secondary-text); /* Gray text */
    font-size: 0.9rem; /* Small text */
}

/* ⌨️ ⭐️: Style text inputs (by Prashant) */
/* Makes username/password fields look sleek */
.input-group input {
    width: 100%; /* Full width */
    padding: 12px; /* Inner space */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    background-color: #333; /* Dark gray background */
    color: var(--text-color); /* White text */
    font-size: 1rem; /* Normal text size */
}

/* 🚨 ⭐️: Style error messages (by Prashant) */
/* Shows red text for wrong username/password */
.login-error {
    color: #ff5252; /* Red color */
    margin-bottom: 20px; /* Space below */
    font-size: 0.9rem; /* Small text */
    display: none; /* Hidden by default */
}

/* 🔘 ⭐️: Style the login button (by Prashant) */
/* Purple button for submitting the form */
.login-btn {
    width: 100%; /* Full width */
    padding: 12px; /* Inner space */
    background-color: var(--primary-color); /* Purple background */
    color: var(--text-color); /* White text */
    border: none; /* No border */
    border-radius: 30px; /* Very rounded corners */
    font-size: 1rem; /* Normal text */
    font-weight: 600; /* Bold text */
    cursor: pointer; /* Hand cursor on hover */
    transition: background-color 0.3s; /* Smooth color change */
}

/* 🎨 ⭐️: Hover effect for login button (by Prashant) */
/* Changes to lighter purple on hover */
.login-btn:hover {
    background-color: var(--secondary-color); /* Lighter purple */
}

/* 🖌️ ⭐️: Style the login footer (by Prashant) */
/* Small gray text at the bottom */
.login-footer {
    margin-top: 20px; /* Space above */
    text-align: center; /* Centered text */
    color: var(--secondary-text); /* Gray text */
    font-size: 0.8rem; /* Tiny text */
}

/* 🔒 ⭐️: Style the "Please login" screen (by Aishmita) */
/* Full-screen overlay if user isn’t logged in */
.auth-check {
    position: fixed; /* Covers entire screen */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: var(--dark-color); /* Dark background */
    display: flex; /* Center content */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    z-index: 1000; /* On top of everything */
    text-align: center; /* Center text */
    gap: 20px; /* Space between elements */
}

/* 🔗 ⭐️: Style the login redirect button (by Aishmita) */
/* Purple button to go back to login page */
.login-redirect-btn {
    display: inline-block; /* Inline with padding */
    padding: 12px 24px; /* Inner space */
    background-color: var(--primary-color); /* Purple background */
    color: white; /* White text */
    text-decoration: none; /* No underline */
    border-radius: 30px; /* Rounded corners */
    font-weight: 600; /* Bold text */
    transition: all 0.3s ease; /* Smooth hover effects */
}

/* 🎨 ⭐️: Hover effect for redirect button (by Aishmita) */
/* Lighter purple and slight zoom on hover */
.login-redirect-btn:hover {
    background-color: var(--secondary-color); /* Lighter purple */
    transform: scale(1.05); /* Slight zoom */
}

/* 📐 ⭐️: Layout the main player (by Prashant) */
/* Splits the screen into sidebar, main content, and playlist */
.container {
    display: grid; /* Uses grid layout */
    grid-template-columns: 240px 1fr 300px; /* Sidebar: 240px, Main: flexible, Playlist: 300px */
    height: 100vh; /* Full screen height */
}

/* 📋 ⭐️: Style the sidebar (by Prashant) */
/* Dark sidebar for navigation and favorites */
.sidebar {
    background-color: var(--darker-color); /* Very dark background */
    padding: 20px; /* Inner space */
    height: 100vh; /* Full height */
    overflow-y: auto; /* Scroll if content overflows */
    border-right: 1px solid #282828; /* Thin gray border */
}

/* 🎵 ⭐️: Style the sidebar header (by Prashant) */
/* Logo and title at the top of the sidebar */
.sidebar-header {
    display: flex; /* Align logo and title */
    align-items: center; /* Center vertically */
    gap: 10px; /* Space between logo and title */
    margin-bottom: 30px; /* Space below */
}

/* 🎨 ⭐️: Style the sidebar logo icon (by Prashant) */
/* Purple logo icon */
.sidebar-header i {
    font-size: 1.5rem; /* Medium icon size */
    color: var(--primary-color); /* Purple color */
}

/* 🖌️ ⭐️: Style the sidebar title (by Prashant) */
/* Bold title for the app name */
.sidebar-header h1 {
    font-size: 1.5rem; /* Medium title */
    font-weight: 700; /* Bold text */
}

/* 📜 ⭐️: Style the sidebar navigation (by Prashant) */
/* List of navigation items */
.sidebar-nav ul {
    list-style: none; /* No bullets */
}

/* 🖱️ ⭐️: Style navigation items (by Prashant) */
/* Makes nav items clickable and hoverable */
.sidebar-nav li {
    padding: 12px 0; /* Vertical padding */
    cursor: pointer; /* Hand cursor */
    display: flex; /* Align icon and text */
    align-items: center; /* Center vertically */
    gap: 10px; /* Space between icon and text */
    font-weight: 500; /* Medium bold text */
    border-radius: 4px; /* Rounded corners */
    padding-left: 10px; /* Left padding */
    transition: all 0.2s; /* Smooth hover effect */
}

/* 🎨 ⭐️: Hover effect for nav items (by Prashant) */
/* Highlights when hovered */
.sidebar-nav li:hover {
    color: var(--text-color); /* White text */
    background-color: var(--hover-color); /* Gray background */
}

/* 🌟 ⭐️: Style active nav item (by Prashant) */
/* Highlights the selected nav item */
.sidebar-nav li.active {
    color: var(--text-color); /* White text */
    background-color: var(--hover-color); /* Gray background */
}

/* 🎨 ⭐️: Style nav icons (by Prashant) */
/* Small icons next to nav items */
.sidebar-nav li i {
    font-size: 1.2rem; /* Medium icon size */
    width: 20px; /* Fixed width for alignment */
}

/* ❤️ ⭐️: Style the favorites section (by Prashant) */
/* Area for favorite songs in the sidebar */
.favorites-section {
    margin-top: 30px; /* Space above */
}

/* 🖌️ ⭐️: Style favorites section title (by Prashant) */
/* Small gray title for favorites */
.favorites-section h2 {
    font-size: 1rem; /* Small text */
    margin-bottom: 15px; /* Space below */
    color: var(--secondary-text); /* Gray text */
    font-weight: 600; /* Bold text */
}

/* 📜 ⭐️: Style the favorites list (by Prashant) */
/* List of favorite songs */
#favorites-list {
    list-style: none; /* No bullets */
}

/* 🎵 ⭐️: Style favorite song items (by Prashant) */
/* Each favorite song in the sidebar */
#favorites-list li {
    padding: 10px; /* Inner space */
    margin-bottom: 5px; /* Space between items */
    background-color: var(--hover-color); /* Gray background */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Hand cursor */
    display: flex; /* Align image and text */
    align-items: center; /* Center vertically */
    gap: 10px; /* Space between image and text */
}

/* 🖼️ ⭐️: Style favorite song images (by Prashant) */
/* Small album art for favorites */
#favorites-list li img {
    width: 40px; /* Small image */
    height: 40px; /* Square image */
    border-radius: 4px; /* Rounded corners */
    object-fit: cover; /* Fit image properly */
}

/* 📝 ⭐️: Style favorite song info (by Prashant) */
/* Container for song title and artist */
#favorites-list .song-info {
    flex: 1; /* Takes remaining space */
}

/* 🖌️ ⭐️: Style favorite song title (by Prashant) */
/* Song title in favorites */
#favorites-list .song-title {
    font-size: 0.9rem; /* Small text */
    font-weight: 500; /* Medium bold */
}

/* 🖌️ ⭐️: Style favorite song artist (by Prashant) */
/* Artist name in favorites */
#favorites-list .song-artist {
    font-size: 0.8rem; /* Tiny text */
    color: var(--secondary-text); /* Gray text */
}

/* 🎮 ⭐️: Style the main content area (by Prashant) */
/* Middle section with player and lyrics */
.main-content {
    padding: 20px; /* Inner space */
    overflow-y: auto; /* Scroll if content overflows */
    background: linear-gradient(to bottom, #5E1ED5, var(--dark-color)); /* Purple-to-dark gradient */
    height: 100vh; /* Full height */
}

/* 🔝 ⭐️: Style the top bar (by Aaska) */
/* Area with the logout button */
.top-bar {
    display: flex; /* Align items */
    justify-content: flex-end; /* Push to right */
    align-items: center; /* Center vertically */
    margin-bottom: 30px; /* Space below */
}

/* 🚪 ⭐️: Style the logout button (by Aaska) */
/* Button to log out */
.logout-btn {
    background-color: transparent; /* No background */
    color: var(--secondary-text); /* Gray text */
    border: 1px solid var(--secondary-text); /* Gray border */
    padding: 8px 16px; /* Inner space */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Hand cursor */
    display: flex; /* Align icon and text */
    align-items: center; /* Center vertically */
    gap: 5px; /* Space between icon and text */
    font-size: 0.9rem; /* Small text */
    transition: all 0.2s; /* Smooth hover effect */
}

/* 🎨 ⭐️: Hover effect for logout button (by Aaska) */
/* Brighter text and border on hover */
.logout-btn:hover {
    color: var(--text-color); /* White text */
    border-color: var(--text-color); /* White border */
}

/* 🎵 ⭐️: Style the now-playing section (by Aaska) */
/* Area with album art, song info, and controls */
.now-playing {
    display: flex; /* Stack items */
    flex-direction: column; /* Vertical layout */
    align-items: center; /* Center horizontally */
    margin-bottom: 40px; /* Space below */
}

/* 📝 ⭐️: Style song info (by Aaska) */
/* Song title and artist in the center */
.song-info {
    display: flex; /* Stack items */
    flex-direction: column; /* Vertical layout */
    align-items: center; /* Center horizontally */
    margin-bottom: 30px; /* Space below */
    width: 100%; /* Full width */
}

/* 🖼️ ⭐️: Style the album art container (by Aaska) */
/* Box for the current song’s image */
.current-poster-container {
    width: 280px; /* Fixed width */
    height: 280px; /* Square image */
    margin-bottom: 20px; /* Space below */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Shadow for depth */
}

/* 🖼️ ⭐️: Style the album art image (by Aaska) */
/* The current song’s image */
#poster {
    width: 100%; /* Full container width */
    height: 100%; /* Full container height */
    object-fit: cover; /* Fit image properly */
    border-radius: 4px; /* Rounded corners */
}

/* 🖌️ ⭐️: Style the song title (by Aaska) */
/* Big title for the current song */
#song-title {
    font-size: 1.8rem; /* Large text */
    margin-bottom: 5px; /* Small space below */
    font-weight: 700; /* Bold text */
}

/* 🖌️ ⭐️: Style the song artist (by Aaska) */
/* Gray artist name below title */
#song-artist {
    font-size: 1.1rem; /* Medium text */
    color: var(--secondary-text); /* Gray text */
    font-weight: 500; /* Medium bold */
}

/* 🎛️ ⭐️: Style the player controls (by Prashant) */
/* Area with play, next, and favorite buttons */
.player-controls {
    width: 100%; /* Full width */
    max-width: 500px; /* Max width for larger screens */
}

/* ⏳ ⭐️: Style the progress bar area (by Prashant) */
/* Container for time and progress bar */
.progress-container {
    display: flex; /* Align items */
    align-items: center; /* Center vertically */
    gap: 10px; /* Space between elements */
    margin-bottom: 20px; /* Space below */
}

/* ⏱️ ⭐️: Style time displays (by Prashant) */
/* Current and total time text */
#current-time, #duration {
    font-size: 0.8rem; /* Small text */
    color: var(--secondary-text); /* Gray text */
    width: 45px; /* Fixed width for alignment */
}

/* 🎚️ ⭐️: Style the progress bar (by Prashant) */
/* The clickable bar showing song progress */
.progress-bar {
    flex: 1; /* Takes remaining space */
    height: 4px; /* Thin bar */
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent gray */
    border-radius: 2px; /* Rounded edges */
    cursor: pointer; /* Hand cursor for clicking */
    position: relative; /* For positioning the fill */
}

/* 📈 ⭐️: Style the progress bar fill (by Prashant) */
/* The purple part showing how much of the song has played */
.progress {
    background-color: var(--primary-color); /* Purple fill */
    height: 100%; /* Full height of bar */
    border-radius: 2px; /* Rounded edges */
    width: 0%; /* Starts empty */
    position: absolute; /* Overlays the bar */
}

/* 🎨 ⭐️: Hover effect for progress bar (by Prashant) */
/* Changes fill to lighter purple on hover */
.progress-bar:hover .progress {
    background-color: var(--secondary-color); /* Lighter purple */
}

/* 🎮 ⭐️: Style control buttons (by Prashant) */
/* Play, next, previous, and favorite buttons */
.control-buttons {
    display: flex; /* Align buttons */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 20px; /* Space between buttons */
}

/* 🖱️ ⭐️: Style individual control buttons (by Prashant) */
/* Makes buttons round and clickable */
.control-buttons button {
    background: transparent; /* No background */
    border: none; /* No border */
    color: var(--text-color); /* White icon */
    font-size: 1rem; /* Normal icon size */
    cursor: pointer; /* Hand cursor */
    width: 40px; /* Round button size */
    height: 40px; /* Square button */
    border-radius: 50%; /* Fully round */
    display: flex; /* Center icon */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    transition: all 0.2s; /* Smooth hover effect */
}

/* 🎨 ⭐️: Hover effect for control buttons (by Prashant) */
/* Gray background on hover */
.control-buttons button:hover {
    background-color: var(--hover-color); /* Gray background */
}

/* ▶️ ⭐️: Style the play button (by Prashant) */
/* Larger purple play/pause button */
#play {
    background-color: var(--primary-color); /* Purple background */
    width: 50px; /* Larger size */
    height: 50px; /* Square button */
    font-size: 1.2rem; /* Bigger icon */
}

/* 🎨 ⭐️: Hover effect for play button (by Prashant) */
/* Lighter purple and slight zoom on hover */
#play:hover {
    background-color: var(--secondary-color); /* Lighter purple */
    transform: scale(1.05); /* Slight zoom */
}

/* ❤️ ⭐️: Style the favorite button (by Prashant) */
/* Heart icon for favoriting songs */
.favorite-btn {
    color: var(--secondary-text) !important; /* Gray icon */
}

/* 🌟 ⭐️: Style active favorite button (by Prashant) */
/* Purple filled heart when song is favorited */
.favorite-btn.active {
    color: var(--primary-color) !important; /* Purple icon */
}

/* ❤️ ⭐️: Style active favorite icon (by Prashant) */
/* Makes the filled heart bold */
.favorite-btn.active i {
    font-weight: 900; /* Bold icon */
}

/* 📜 ⭐️: Style the lyrics section (by Aaska) */
/* Box for song lyrics */
.lyrics-container {
    margin-top: 40px; /* Space above */
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
    padding: 20px; /* Inner space */
    border-radius: 8px; /* Rounded corners */
}

/* 🖌️ ⭐️: Style lyrics title (by Aaska) */
/* Title above lyrics */
.lyrics-container h3 {
    font-size: 1.2rem; /* Medium text */
    margin-bottom: 15px; /* Space below */
    font-weight: 600; /* Bold text */
}

/* 🎤 ⭐️: Style the lyrics area (by Aaska) */
/* Scrollable area for lyrics */
.lyrics {
    max-height: 200px; /* Limits height */
    overflow-y: auto; /* Scroll if too long */
    padding-right: 10px; /* Space for scrollbar */
}

/* 📝 ⭐️: Style individual lyrics (by Aaska) */
/* Each line of lyrics */
.lyrics p {
    margin-bottom: 10px; /* Space between lines */
    color: var(--secondary-text); /* Gray text */
}

/* 🌟 ⭐️: Style current lyric (by Aaska) */
/* Highlights the current lyric line */
.lyrics p.current {
    color: var(--primary-color); /* Purple text */
    font-weight: 600; /* Bold text */
}

/* 🚫 ⭐️: Style "no lyrics" message (by Aaska) */
/* Shows when lyrics are loading */
.no-lyrics {
    text-align: center; /* Centered text */
    font-style: italic; /* Italic text */
}

/* 📋 ⭐️: Style the playlist section (by Aishmita) */
/* Right sidebar with all songs */
.playlist {
    background-color: var(--darker-color); /* Very dark background */
    padding: 20px; /* Inner space */
    height: 100vh; /* Full height */
    overflow-y: auto; /* Scroll if content overflows */
    border-left: 1px solid #282828; /* Thin gray border */
}

/* 🖌️ ⭐️: Style playlist title (by Aishmita) */
/* Title for the playlist */
.playlist h2 {
    font-size: 1.2rem; /* Medium text */
    margin-bottom: 20px; /* Space below */
    font-weight: 600; /* Bold text */
}

/* 📜 ⭐️: Style playlist items (by Aishmita) */
/* List of all songs */
.playlist-items {
    list-style: none; /* No bullets */
}

/* 🎵 ⭐️: Style individual playlist items (by Aishmita) */
/* Each song in the playlist */
.playlist-items li {
    padding: 10px; /* Inner space */
    background-color: var(--card-color); /* Dark gray background */
    border-radius: 4px; /* Rounded corners */
    margin-bottom: 10px; /* Space between items */
    cursor: pointer; /* Hand cursor */
    transition: background-color 0.2s; /* Smooth hover effect */
    display: flex; /* Align image and text */
    align-items: center; /* Center vertically */
    gap: 15px; /* Space between image and text */
}

/* 🎨 ⭐️: Hover effect for playlist items (by Aishmita) */
/* Gray background on hover */
.playlist-items li:hover {
    background-color: var(--hover-color); /* Gray background */
}

/* 🌟 ⭐️: Style active playlist item (by Aishmita) */
/* Highlights the current song */
.playlist-items li.active {
    background-color: rgba(140, 82, 255, 0.2); /* Light purple background */
    border-left: 3px solid var(--primary-color); /* Purple left border */
}

/* 🖼️ ⭐️: Style playlist song images (by Aishmita) */
/* Small album art for playlist songs */
.playlist-items .song-poster {
    width: 50px; /* Small image */
    height: 50px; /* Square image */
    border-radius: 4px; /* Rounded corners */
    object-fit: cover; /* Fit image properly */
}

/* 📝 ⭐️: Style playlist song details (by Aishmita) */
/* Container for song title and artist */
.playlist-items .song-details {
    flex: 1; /* Takes remaining space */
}

/* 🖌️ ⭐️: Style playlist song title (by Aishmita) */
/* Song title in playlist */
.playlist-items .song-title {
    font-weight: 500; /* Medium bold */
    margin-bottom: 2px; /* Small space below */
}

/* 🖌️ ⭐️: Style playlist song artist (by Aishmita) */
/* Artist name in playlist */
.playlist-items .song-artist {
    font-size: 0.8rem; /* Tiny text */
    color: var(--secondary-text); /* Gray text */
}

/* 📱 ⭐️: Make the app responsive for tablets (by Prashant) */
/* Adjusts layout for screens up to 1024px */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 200px 1fr; /* Sidebar: 200px, Main: flexible, Playlist: hidden */
    }
    
    .playlist {
        display: none; /* Hide playlist on smaller screens */
    }
}

/* 📱 ⭐️: Make the app responsive for phones (by Prashant) */
/* Adjusts layout for screens up to 768px */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Only main content */
    }
    
    .sidebar {
        display: none; /* Hide sidebar on phones */
    }
    
    .current-poster-container {
        width: 220px; /* Smaller album art */
        height: 220px; /* Square image */
    }
    
    #song-title {
        font-size: 1.5rem; /* Smaller title */
    }
    
    .lyrics-container {
        margin-top: 30px; /* Less space above lyrics */
    }
}

/* 🖱️ ⭐️: Ensure progress bar is clickable (by Prashant) */
/* Makes the progress bar interactive */
.progress-bar {
    cursor: pointer; /* Hand cursor */
}