* {
    box-sizing: border-box;
}

:root {
    --bg-dark: #121212;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.2);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --dynamic-accent: #1db954; 
    --dynamic-bg-1: #1a2a6c;
    --dynamic-bg-2: #b21f1f;
    --dynamic-bg-3: #fdbb2d;
    --dynamic-bg-4: #1a2a6c;
}

/* ... existing body styles ... */

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    /* Advanced Mesh Gradient */
    background: radial-gradient(circle at 0% 0%, var(--dynamic-bg-1) 0%, transparent 50%),
                radial-gradient(circle at 100% 0%, var(--dynamic-bg-2) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, var(--dynamic-bg-3) 0%, transparent 50%),
                radial-gradient(circle at 0% 100%, var(--dynamic-bg-4) 0%, transparent 50%),
                linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
    background-size: 200% 200%;
    animation: meshFlow 20s ease infinite;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth color transition */
}

@keyframes meshFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Interactive Animations */
.mini-btn, .ctrl-btn, .back-btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy spring */
}

.mini-btn:hover, .ctrl-btn:hover, .back-btn:hover {
    transform: scale(1.15) translateY(-1.60px);
    box-shadow: 0 0 16px var(--glass-highlight), 0 0 8px var(--dynamic-accent);
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
}

.mini-btn:active, .ctrl-btn:active, .back-btn:active {
    transform: scale(0.95);
}

.song-item {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.song-item:hover {
    transform: translateX(8px) scale(1.02);
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    box-shadow: -4px 4px 12px rgba(0,0,0,0.2);
    border-left: 2.40px solid var(--dynamic-accent);
}

.control-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.control-card:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 0 0 0.80px rgba(255, 255, 255, 0.2);
}

/* Progress Bar Glow */
.progress-fill, .progress-fill-mini {
    box-shadow: 0 0 12px var(--dynamic-accent), 0 0 24px var(--dynamic-accent);
}

/* Ensure content is above background */
.app-container, .bottom-player, .side-player-drawer {
    position: relative;
    z-index: 1;
}

/* Liquid Glass Placeholder for Broken Images */
.glass-placeholder {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 0.80px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.glass-placeholder::before {
    content: "\f001"; /* FontAwesome Music Icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 19.20px;
    color: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

/* Shine effect */
.glass-placeholder::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 55%
    );
    animation: glassShine 3s infinite;
    pointer-events: none;
}

@keyframes glassShine {
    0% { transform: translate(-30%, -30%) rotate(45deg); }
    100% { transform: translate(30%, 30%) rotate(45deg); }
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 0.80px solid var(--glass-border);
    box-shadow: 0 6.40px 25.60px 0 rgba(0, 0, 0, 0.3);
}

.app-container {
    display: flex;
    height: 100%;
}

/* Sidebar - Refined Liquid Glass Aesthetic */
.sidebar {
    width: 224px;
    /* 
       More transparent background to show the dynamic wallpaper behind.
       Slight gradient for depth.
    */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    
    /* Strong blur for that "thick glass" look */
    backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.1);
    
    display: flex;
    flex-direction: column;
    padding: 24px 19.20px; /* Increased top padding */
    padding-bottom: 96px;
    
    /* 
       Glass border: crisp, semi-transparent white.
       Removed right border, added subtle right shadow for separation.
    */
    border-right: 0.80px solid rgba(255, 255, 255, 0.1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    
    z-index: 2;
    justify-content: center;
    transition: all 0.3s ease;
    
    /* Rounded corners on the right side only for a floating panel feel */
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    margin-right: 16px; /* Float it away from content slightly */
    margin-top: 16px;
    margin-bottom: 16px;
    height: calc(100% - 32px); /* Adjust height for margins */
}

/* Add a subtle inner sheen to the sidebar */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.user-profile {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 9.60px;
    border: 1.60px solid rgba(255,255,255,0.2);
}

.username {
    font-weight: 600;
    font-size: 12.80px;
    letter-spacing: 0.40px;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 9.60px;
    margin-bottom: 24px;
}

/* Menu Items - Floating Glass Pills */
.menu-item {
    padding: 11.20px 16px;
    border-radius: 12.80px; /* Pill shape */
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 12.80px;
    font-size: 12px;
    font-weight: 500;
    
    /* Default state: subtle transparency */
    background: transparent;
    border: 0.80px solid transparent;
}

.menu-item i {
    font-size: 14.40px;
    width: 19.20px;
    text-align: center;
    transition: transform 0.3s ease;
}

/* Hover State - Liquid Highlight */
.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 3.20px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.1);
}

.menu-item:hover i {
    transform: scale(1.2);
    color: var(--dynamic-accent);
    text-shadow: 0 0 8px var(--dynamic-accent);
}

/* Active State - Illuminated Glass */
.menu-item.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #fff;
    font-weight: 700;
    border: 0.80px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 6.40px 25.60px 0 rgba(31, 38, 135, 0.37),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.menu-item.active i {
    color: #fff;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
}

.import-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 9.60px;
    background: rgba(0,0,0,0.2);
    padding: 12.80px;
    border-radius: 16px;
    border: 0.80px solid var(--glass-border);
}

#import-url {
    background: rgba(255,255,255,0.05);
    border: 0.80px solid rgba(255,255,255,0.1);
    padding: 9.60px;
    border-radius: 9.60px;
    color: white;
    font-size: 10.40px;
    transition: all 0.3s;
}

#import-url:focus {
    outline: none;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

#import-btn {
    background: var(--dynamic-accent); /* Dynamic Color */
    border: none;
    padding: 9.60px;
    border-radius: 9.60px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
}

#import-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 3.20px 12px rgba(0,0,0,0.3);
}

/* Main Content */
.main-content {
    flex: 1;
    background: transparent;
    padding: 0 25.60px 96px 25.60px; /* Increased bottom padding to clear player */
    overflow-y: auto;
    position: relative;
}

.search-bar-container {
    display: flex;
    gap: 9.60px;
    margin: 19.20px 0;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12.80px 0;
    /* Transparent Floating Header */
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    margin-top: 0;
    padding-top: 19.20px;
}

#source-select, #search-input {
    background: rgba(255,255,255,0.1);
    border: 0.80px solid rgba(255,255,255,0.2);
    color: white;
    padding: 0 19.20px;
    border-radius: 24px;
    height: 41.60px;
    font-size: 12.80px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(16px);
    box-shadow: 0 3.20px 12px rgba(0,0,0,0.1);
}

#source-select {
    cursor: pointer;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
}

#search-input {
    flex: 1;
    background: rgba(20, 20, 20, 0.3); /* Slightly darker for input contrast */
}

#search-input:focus, #source-select:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--dynamic-accent);
    outline: none;
    box-shadow: 0 0 20px rgba(255,255,255,0.15), 0 0 4px var(--dynamic-accent);
    transform: scale(1.01);
}

#search-btn {
    background: rgba(255,255,255,0.1);
    border: 0.80px solid rgba(255,255,255,0.2);
    width: 41.60px;
    height: 41.60px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(8px);
    box-shadow: 0 3.20px 12px rgba(0,0,0,0.1);
}

#search-btn:hover {
    background: var(--dynamic-accent);
    border-color: var(--dynamic-accent);
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 0 16px var(--dynamic-accent);
    color: #000; /* Contrast on accent color */
}

.content-header h1 {
    font-size: 25.60px;
    margin: 16px 0 24px 0;
    font-weight: 800;
    letter-spacing: -0.40px;
    text-shadow: 0 3.20px 16px rgba(0,0,0,0.5);
}

.home-container {
    display: none;
    padding-top: 16px;
    padding-bottom: 96px;
    animation: fadeInPage 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Home Hero Section (Daily & Radar) */
.home-hero-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25.60px;
    margin-bottom: 38.40px;
}

.home-hero-card {
    position: relative;
    border-radius: 25.60px;
    padding: 19.20px;
    background: rgba(255, 255, 255, 0.03);
    border: 0.80px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 16px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 0 0.80px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 176px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
}

/* Glass Shine Effect */
.home-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        115deg, 
        transparent 0%, 
        transparent 40%, 
        rgba(255, 255, 255, 0.1) 45%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.1) 55%, 
        transparent 60%, 
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.home-hero-card:hover::before {
    left: 100%;
}

.home-hero-card:hover {
    transform: translateY(-6.40px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(29, 185, 84, 0.2),
        inset 0 0 0 0.80px rgba(255, 255, 255, 0.15);
}

.home-hero-card:active {
    transform: scale(0.98);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.home-hero-label {
    font-size: 11.20px;
    font-weight: 700;
    letter-spacing: 1.60px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 16px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Add play icon to label on hover */
.home-hero-label::after {
    content: "\f04b"; /* Play icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12.80px;
    color: var(--dynamic-accent);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-hero-card:hover .home-hero-label::after {
    opacity: 1;
    transform: translateX(0);
}

.home-hero-main {
    display: flex;
    align-items: center;
    gap: 19.20px;
    z-index: 3;
    height: 100%;
}

.home-hero-cover {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.home-hero-card:hover .home-hero-cover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

.home-hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6.40px;
}

.home-hero-title {
    font-size: 25.60px;
    font-weight: 800;
    background: linear-gradient(90deg, #fff, #ddd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.80px;
}

.home-hero-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Home Section Headers */
.home-section {
    margin-top: 16px;
    animation: slideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-section-header {
    display: flex;
    align-items: flex-end;
    gap: 12.80px;
    margin-bottom: 19.20px;
    border-bottom: 0.80px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 9.60px;
}

.home-section-header h2 {
    font-size: 20.80px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 1.60px 8px rgba(0,0,0,0.3);
}

.home-section-subtitle {
    font-size: 11.20px;
    color: var(--dynamic-accent);
    font-weight: 500;
    letter-spacing: 0.80px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    padding: 3.20px 9.60px;
    border-radius: 9.60px;
    border: 0.80px solid rgba(255, 255, 255, 0.1);
}

/* Playlist Grid & Cards */
.home-playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22.40px;
    padding: 3.20px; /* Space for hover shadows */
}

.home-playlist-card {
    position: relative;
    border-radius: 19.20px;
    padding: 12.80px;
    background: rgba(255, 255, 255, 0.02);
    border: 0.80px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12.80px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.home-playlist-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.home-playlist-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 16px 40px rgba(0,0,0,0.6),
        0 0 16px rgba(29, 185, 84, 0.1);
}

.home-playlist-card:hover::before {
    opacity: 1;
}

.home-playlist-card:active {
    transform: scale(0.96);
}

.home-playlist-cover-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 14.40px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6.40px 16px rgba(0,0,0,0.4);
}

.home-playlist-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-playlist-card:hover .home-playlist-cover {
    transform: scale(1.1);
}

/* Play button overlay on cover */
.home-playlist-cover-wrap::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.home-playlist-card:hover .home-playlist-cover-wrap::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.home-playlist-info {
    display: flex;
    flex-direction: column;
    gap: 4.80px;
    position: relative;
    z-index: 2;
}

.home-playlist-title {
    font-size: 12.80px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.home-playlist-card:hover .home-playlist-title {
    color: var(--dynamic-accent);
}

.home-playlist-subtitle {
    font-size: 10.40px;
    color: rgba(255, 255, 255, 0.6);
}

.home-playlist-tag {
    position: absolute;
    top: -160px; /* Hide from normal flow, move to top right of card */
    right: 9.60px;
    top: 9.60px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 3.20px 8px;
    border-radius: 9.60px;
    font-size: 8.80px;
    font-weight: 600;
    color: white;
    border: 0.80px solid rgba(255,255,255,0.1);
    z-index: 5;
}

/* Override tag positioning */
.home-playlist-card .home-playlist-tag {
    position: absolute;
    top: 12.80px;
    right: 12.80px;
    margin: 0;
    box-shadow: 0 3.20px 8px rgba(0,0,0,0.3);
}

.home-empty-tip {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    font-size: 12.80px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 0.80px dashed rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .home-hero-row {
        grid-template-columns: 1fr;
    }

    .home-hero-card {
        height: auto;
    }

    .home-hero-main {
        flex-direction: row;
        align-items: center;
    }
    
    .home-playlist-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Unified Song List Grid System */
.song-list-header, .song-item {
    display: grid !important;
    align-items: center;
    padding: 9.60px 12.80px;
    gap: 8px;
}

/* Default Layout (Search, Playlist, Liked): 5 columns */
.song-list-header, .song-item {
    grid-template-columns: 40px 4fr 3fr 2fr 80px;
}

/* Playlist Detail Layout: 6 columns (Same as History) */
.playlist-detail-container .song-item,
.playlist-detail-container .song-list-header {
     grid-template-columns: 40px 4fr 3fr 2fr 80px 40px;
}

/* History Layout: 6 columns */
.history-container .song-list-header,
.history-container .song-item {
    grid-template-columns: 40px 4fr 3fr 2fr 80px 40px;
}

.song-list-header.hidden-header {
    display: none !important;
}

.song-list-header {
    color: var(--text-secondary);
    border-bottom: 0.80px solid rgba(255,255,255,0.1);
    font-size: 10.40px;
    text-transform: uppercase;
    letter-spacing: 0.80px;
}

/* Specific Header Column Styling to prevent flex/block issues */
.song-list-header > div, .song-item > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide action column in header by default */
.song-list-header .col-action {
    display: none;
}

/* Show action column in history header and playlist detail header */
.history-container .song-list-header .col-action,
.playlist-detail-container .song-list-header .col-action {
    display: flex;
    justify-content: center;
}

.song-list {
    display: flex;
    flex-direction: column;
    gap: 6.40px;
}

.song-item {
    border-radius: 12.80px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 0;
    border: 0.80px solid transparent;
}

.song-item:hover {
    background-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    transform: scale(1.01);
    box-shadow: 0 3.20px 12px rgba(0,0,0,0.2);
}

.song-item.active {
    background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    border: 0.80px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
}

.song-item.active .song-title {
    color: var(--dynamic-accent);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.song-item.active .col-index {
    color: var(--dynamic-accent);
}

.song-img {
    width: 35.20px;
    height: 35.20px;
    border-radius: 6.40px;
    object-fit: cover;
    margin-right: 12.80px;
    vertical-align: middle;
    box-shadow: 0 3.20px 6.40px rgba(0,0,0,0.3);
}

.col-title {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: white;
}

.col-artist, .col-album {
    font-size: 11.20px;
    color: var(--text-secondary);
}

.col-duration {
    font-size: 11.20px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Load More Button */
.load-more-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 0.80px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 9.60px 24px;
    border-radius: 24px;
    cursor: pointer;
    font-size: 11.20px;
    transition: all 0.3s;
    backdrop-filter: blur(8px);
    margin-top: 16px;
}

.load-more-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
    box-shadow: 0 0 16px rgba(255,255,255,0.2);
    transform: translateY(-1.60px);
}

.pagination-container {
    padding-bottom: 80px;
}

/* History Styles */
.history-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 16px;
}

.clear-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 0.80px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6.40px 12.80px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(8px);
}

.clear-btn:hover {
    background: rgba(255, 50, 50, 0.6);
    border-color: rgba(255, 50, 50, 0.8);
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 50, 50, 0.4);
}

.delete-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 12.80px;
    padding: 6.40px;
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28.80px;
    height: 28.80px;
}

.delete-btn:hover {
    background: rgba(255, 50, 50, 0.1);
    color: #ff4d4d;
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 50, 50, 0.2);
}

.song-item {
    /* ... existing props ... */
    transition: all 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
}

.song-item.deleting {
    opacity: 0;
    transform: translateX(40px) scale(0.9);
    pointer-events: none;
}

.song-item .col-action {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bottom Mini Player */
.bottom-player {
    position: fixed;
    bottom: 19.20px; /* Floating bubble style */
    left: 243.20px; /* Sidebar + gap */
    right: 19.20px;
    height: 64px;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(24px) saturate(180%);
    border: 0.80px solid rgba(255, 255, 255, 0.15);
    border-radius: 19.20px;
    display: flex;
    flex-direction: column;
    z-index: 100;
    
    /* Animation Initial State */
    transform: translateY(120%) scale(0.95);
    opacity: 0;
    transition: 
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), /* Spring effect */
        opacity 0.5s ease-out;
        
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    overflow: hidden;
}

.bottom-player.active {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.progress-bar-mini {
    width: 100%;
    height: 2.40px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: relative;
}

.progress-fill-mini {
    height: 100%;
    background: var(--dynamic-accent);
    width: 0%;
    transition: width 0.1s linear, background 0.5s;
    box-shadow: 0 0 8px var(--dynamic-accent);
}

.mini-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 19.20px;
    justify-content: space-between;
}

.mini-info {
    display: flex;
    align-items: center;
    gap: 12.80px;
    width: 240px;
}

#mini-cover {
    width: 43.20px;
    height: 43.20px;
    border-radius: 9.60px;
    object-fit: cover;
    box-shadow: 0 3.20px 9.60px rgba(0,0,0,0.3);
}

.mini-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mini-title {
    color: white;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3.20px;
}

.mini-artist {
    color: var(--text-secondary);
    font-size: 9.60px;
}

.mini-controls {
    display: flex;
    align-items: center;
    gap: 19.20px;
}

.mini-btn {
    background: rgba(255,255,255,0.1);
    border: 0.80px solid rgba(255,255,255,0.1);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.mini-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255,255,255,0.2);
}

.mini-btn.play-btn {
    width: 38.40px;
    height: 38.40px;
    background: white;
    color: black;
    font-size: 14.40px;
    padding-left: 1.60px;
    box-shadow: 0 0 16px rgba(255,255,255,0.4);
    border: none;
}

.mini-btn.play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 24px rgba(255,255,255,0.6);
}

.mini-extra {
    width: 176px; /* Increased width for like btn + volume */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 16px;
    gap: 12px;
}

.like-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    width: 28.80px;
    height: 28.80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Remove background and backdrop */
    backdrop-filter: none;
    background: transparent;
}

.like-btn:hover {
    background: transparent;
    color: white;
    transform: scale(1.15);
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.add-to-playlist-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14.40px;
    cursor: pointer;
    width: 25.60px;
    height: 25.60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
    backdrop-filter: none;
}

.add-to-playlist-btn:hover {
    background: transparent;
    color: white;
    transform: scale(1.15);
}

.playlist-container {
    padding-top: 16px;
    animation: fadeInPage 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 19.20px;
}

.create-playlist-card, .playlist-card {
    aspect-ratio: 1/1;
    background: rgba(255, 255, 255, 0.05);
    border: 0.80px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.create-playlist-card:hover, .playlist-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-color: var(--dynamic-accent);
}

.create-icon {
    font-size: 32px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
    transition: all 0.3s;
}

.create-playlist-card:hover .create-icon {
    color: var(--dynamic-accent);
    transform: scale(1.1);
}

.create-text {
    color: rgba(255,255,255,0.7);
    font-size: 11.20px;
    font-weight: 500;
}

.playlist-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.5s;
    z-index: 1;
}

.playlist-card:hover .playlist-card-cover {
    transform: scale(1.1);
}

.playlist-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.playlist-card-title {
    font-size: 12.80px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1.60px 3.20px rgba(0,0,0,0.5);
}

.playlist-card-count {
    font-size: 9.60px;
    color: rgba(255,255,255,0.7);
}

/* Liquid Glass Modal */
.glass-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6.40px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.glass-modal-content {
    width: 336px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 0.80px solid rgba(255, 255, 255, 0.15);
    border-radius: 25.60px;
    padding: 25.60px;
    box-shadow: 
        0 32px 64px rgba(0,0,0,0.6),
        inset 0 0 0 0.80px rgba(255,255,255,0.1);
    transform: scale(0.9) translateY(16px);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

/* Shine effect on modal */
.glass-modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        115deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 55%, 
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.8s ease;
    pointer-events: none;
    z-index: 1;
}

.glass-modal-overlay.active .glass-modal-content {
    transform: scale(1) translateY(0);
}

.glass-modal-overlay.active .glass-modal-content::before {
    left: 100%;
    transition-delay: 0.2s;
}

.glass-modal-header {
    margin-bottom: 19.20px;
    text-align: center;
    flex-shrink: 0;
}

.glass-modal-header h3 {
    margin: 0;
    font-size: 19.20px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.40px;
}

.glass-modal-body {
    overflow-y: auto;
    overflow-x: hidden !important; /* Force no horizontal scroll */
    padding-right: 0; /* Remove padding that might cause cut-off */
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure it takes full width */
    min-width: 0; /* Prevent flex child overflow */
}

/* Custom Scrollbar for Modal */
.glass-modal-body::-webkit-scrollbar {
    width: 3.20px;
}
.glass-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 1.60px;
}

.glass-input-group {
    margin-bottom: 19.20px;
    width: 100%;
}

.glass-input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 10.40px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.80px;
}

.glass-modal-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 0.80px solid rgba(255,255,255,0.1);
    padding: 12.80px;
    border-radius: 12.80px;
    color: white;
    font-size: 12.80px;
    outline: none;
    transition: all 0.3s;
    box-shadow: inset 0 1.60px 3.20px rgba(0,0,0,0.2);
    box-sizing: border-box; /* Ensure padding doesn't increase width */
}

.glass-modal-input:focus {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--dynamic-accent);
    box-shadow: inset 0 1.60px 3.20px rgba(0,0,0,0.2), 0 0 16px rgba(29, 185, 84, 0.2);
}

.glass-btn-primary {
    width: 100%;
    background: var(--dynamic-accent);
    color: white;
    border: none;
    padding: 12.80px;
    border-radius: 12.80px;
    font-weight: 700;
    font-size: 12.80px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 19.20px;
    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.3);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.glass-btn-primary:hover {
    transform: translateY(-1.60px) scale(1.02);
    box-shadow: 0 12px 32px rgba(29, 185, 84, 0.4);
}

.glass-btn-primary:active {
    transform: scale(0.98);
}

.glass-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.05);
    border: none;
    color: rgba(255,255,255,0.5);
    width: 25.60px;
    height: 25.60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.glass-close-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
    transform: rotate(90deg);
}

/* Toast Notification */
.toast-container {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    pointer-events: none;
}

.toast {
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(16px);
    border: 0.80px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 9.60px 19.20px;
    border-radius: 24px;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 9.60px;
    opacity: 0;
    transform: translateY(-16px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.active {
    opacity: 1;
    transform: translateY(0);
}

.toast i {
    color: var(--dynamic-accent);
}

/* Modal Styles - Overwrite existing */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    width: 320px;
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(24px);
    border: 0.80px solid rgba(255,255,255,0.1);
    border-radius: 19.20px;
    padding: 19.20px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.close-modal-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: white;
}

.modal-body {
    max-height: 320px;
    overflow-y: auto;
}

.create-new-row {
    display: flex;
    align-items: center;
    padding: 9.60px;
    border-radius: 9.60px;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    margin-bottom: 9.60px;
    transition: all 0.2s;
}

.create-new-row:hover {
    background: rgba(255,255,255,0.1);
}

.plus-icon {
    width: 25.60px;
    height: 25.60px;
    background: rgba(255,255,255,0.1);
    border-radius: 6.40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9.60px;
    color: var(--dynamic-accent);
}

.playlist-list-modal {
    display: flex;
    flex-direction: column;
    gap: 6.40px;
}

.modal-playlist-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 9.60px;
    cursor: pointer;
    transition: background 0.2s;
}

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

.modal-playlist-cover {
    width: 32px;
    height: 32px;
    border-radius: 6.40px;
    object-fit: cover;
    margin-right: 9.60px;
    background: #333;
}

.modal-playlist-info {
    display: flex;
    flex-direction: column;
}

.modal-playlist-name {
    font-size: 11.20px;
    font-weight: 600;
}

.modal-playlist-count {
    font-size: 9.60px;
    color: rgba(255,255,255,0.5);
}

/* Playlist Detail Header */
.playlist-detail-header {
    display: flex;
    gap: 19.20px;
    margin-bottom: 24px;
    align-items: flex-end;
}

.back-to-playlists-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: auto; /* Align top */
    transition: all 0.2s;
}

.back-to-playlists-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

.playlist-detail-info {
    display: flex;
    gap: 19.20px;
    flex: 1;
}

.playlist-detail-cover {
    width: 144px;
    height: 144px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.playlist-detail-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 9.60px;
}

.playlist-detail-text h2 {
    font-size: 25.60px;
    margin: 0;
    line-height: 1.2;
}

.playlist-detail-text p {
    color: rgba(255,255,255,0.6);
    margin: 0;
}

.playlist-actions {
    display: flex;
    gap: 9.60px;
    margin-top: 6.40px;
}

.play-all-btn {
    background: var(--dynamic-accent);
    color: white;
    border: none;
    padding: 8px 19.20px;
    border-radius: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6.40px;
    transition: all 0.2s;
}

.play-all-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(29, 185, 84, 0.4);
}

.delete-playlist-btn {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 0.80px solid rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6.40px;
    transition: all 0.2s;
}

.delete-playlist-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff4d4d;
}

.like-btn.liked {
    color: #ff4d4d;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 12px rgba(255, 77, 77, 0.6);
}

.like-btn.liked i {
    font-weight: 900; /* Solid heart */
    animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.volume-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12.80px;
    cursor: pointer;
    width: 19.20px;
    display: flex;
    justify-content: center;
    transition: color 0.2s;
}

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

.volume-slider-container {
    flex: 1;
    height: 3.20px;
    background: rgba(255,255,255,0.1);
    border-radius: 1.60px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.volume-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; /* Default full */
    background: white;
    border-radius: 1.60px;
    pointer-events: none;
}

#volume-slider {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    margin: 0;
}

/* Unified Side Player Drawer */
.side-player-drawer {
    position: fixed;
    top: 0;
    right: 0; /* Align to right */
    width: 384px;
    height: 100vh;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(32px) saturate(180%);
    border-left: 0.80px solid rgba(255, 255, 255, 0.1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
    z-index: 2001;
    
    /* Animation Initial State: Slide out to right */
    transform: translateX(100%);
    opacity: 0.8; /* Slight fade out when hidden */
    transition: 
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), /* Smooth fluid slide */
        opacity 0.6s ease,
        box-shadow 0.6s ease;
        
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.side-player-drawer.visible {
    transform: translateX(0);
    opacity: 1;
    box-shadow: -12px 0 48px rgba(0,0,0,0.7);
}

/* 1. Player Card Section (Top) */
.drawer-player-card {
    padding: 16px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    flex-shrink: 0; /* Prevent shrinking */
}

/* Adjust layout for drawer context */
.drawer-player-card .album-art-container {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 256px;
    margin: 0 auto;
    align-self: center;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.drawer-player-card .control-buttons {
    margin-top: 4px;
    padding-top: 0;
}

/* 2. Playlist Section (Bottom) */
.drawer-playlist-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    overflow: hidden;
    border-top: 0.80px solid rgba(255,255,255,0.05);
}

.drawer-playlist-section .playlist-header {
    font-size: 16px;
    margin-bottom: 12.80px;
    padding-bottom: 0;
    border-bottom: none;
    color: var(--text-secondary);
}

/* Remove old separate popup/playlist styles */
.player-header {
    display: flex;
    justify-content: flex-start;
}

.back-btn {
    background: rgba(255,255,255,0.1);
    border: 0.80px solid rgba(255,255,255,0.1);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 9.60px;
    font-size: 12.80px;
    cursor: pointer;
    transition: all 0.2s;
}

.back-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

.album-art-container {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    border: 0.80px solid rgba(255,255,255,0.1);
}

#player-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

/* Right Side: Lyrics - Hidden/Removed */
.player-right, .lyrics-container, .lyric-line {
    display: none;
}

/* Controls within Card */
.track-info {
    text-align: left;
    margin-top: 8px;
}

.track-name {
    font-size: 20.80px;
    font-weight: 700;
    margin-bottom: 4.80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1.60px 8px rgba(0,0,0,0.3);
}

.track-artist {
    font-size: 12.80px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: color 0.2s ease;
}

.track-artist:hover {
    color: rgba(255,255,255,1);
}

.waveform {
    display: flex;
    justify-content: flex-start; /* Left align */
    gap: 4.80px;
    height: 19.20px;
    align-items: center;
    opacity: 0.8;
}

.bar {
    width: 3.20px;
    background: rgba(255,255,255,0.8);
    border-radius: 1.60px;
    height: 6.40px;
    animation: wave 1s infinite ease-in-out;
    box-shadow: 0 0 4px rgba(255,255,255,0.3);
}

.bar:nth-child(odd) { animation-duration: 0.8s; }
.bar:nth-child(even) { animation-duration: 1.3s; }

.progress-area {
    display: flex;
    align-items: center;
    gap: 9.60px;
    font-size: 9.60px;
    color: rgba(255,255,255,0.6);
}

.progress-bar {
    flex: 1;
    height: 3.20px;
    background: rgba(255,255,255,0.1);
    border-radius: 1.60px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: white;
    border-radius: 1.60px;
    width: 0%;
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
}

.control-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
}

.ctrl-btn {
    background: rgba(255,255,255,0.05);
    border: 0.80px solid rgba(255,255,255,0.1);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9.60px; /* Consistent rounded square/bubble */
    backdrop-filter: blur(4px);
}

.ctrl-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

.ctrl-btn.sm {
    width: 32px; 
    height: 32px; 
    font-size: 12.80px; 
    color: rgba(255,255,255,0.7); 
}

.ctrl-btn.md {
    width: 40px; 
    height: 40px; 
    font-size: 16px; 
}

.ctrl-btn.lg {
    width: 56px; 
    height: 56px; 
    font-size: 19.20px; 
    background: white; 
    color: #333; 
    border-radius: 16px; /* Bigger rounding for play btn */
    box-shadow: 0 4px 16px rgba(255,255,255,0.3);
}

.ctrl-btn.lg:hover {
    transform: scale(1.05);
    box-shadow: 0 6.40px 24px rgba(255,255,255,0.6);
    background: white; /* Keep white */
}

.watermark {
    text-align: center;
    font-size: 8px;
    color: rgba(255,255,255,0.2);
    margin-top: 8px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 4.80px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2.40px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* Immersive Playlist */
.hover-playlist-trigger {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
    z-index: 2000;
}

.playlist-header {
    font-size: 19.20px;
    font-weight: 700;
    margin-bottom: 19.20px;
    color: #fff;
    border-bottom: 0.80px solid rgba(255,255,255,0.1);
    padding-bottom: 9.60px;
}

.playlist-items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6.40px;
}

/* Scrollbar for playlist */
.playlist-items::-webkit-scrollbar {
    width: 4.80px;
}
.playlist-items::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2.40px;
}

.playlist-item-row {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 9.60px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255,255,255,0.02);
}

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

.playlist-item-row.active {
    background: rgba(255,255,255,0.15);
    border: 0.80px solid rgba(255,255,255,0.1);
}

.playlist-item-row.active .p-title {
    color: var(--dynamic-accent);
}

.p-info {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    overflow: hidden;
}

.p-title {
    font-size: 11.20px;
    font-weight: 600;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p-artist {
    font-size: 9.60px;
    color: rgba(255,255,255,0.6);
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    margin-bottom: 6.40px;
    font-size: 11.20px;
    color: rgba(255,255,255,0.7);
}

.glass-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 0.80px solid rgba(255,255,255,0.1);
    padding: 9.60px;
    border-radius: 9.60px;
    color: white;
    font-size: 12px;
    outline: none;
    transition: all 0.3s;
}

.glass-input:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--dynamic-accent);
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

.modal-action-btn {
    width: 100%;
    background: var(--dynamic-accent);
    color: white;
    border: none;
    padding: 9.60px;
    border-radius: 9.60px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.modal-action-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.collect-song-list {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    border-radius: 9.60px;
    padding: 8px;
    margin-bottom: 16px;
}

.collect-song-item {
    display: flex;
    align-items: center;
    padding: 6.40px;
    border-bottom: 0.80px solid rgba(255,255,255,0.05);
}

.collect-song-item:last-child {
    border-bottom: none;
}

.collect-checkbox {
    margin-right: 9.60px;
    width: 14.40px;
    height: 14.40px;
    accent-color: var(--dynamic-accent);
}

.collect-song-info {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.20px;
}

.section-title {
    font-size: 11.20px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}

/* Fix broken image display in player */
.album-art-container img {
    min-width: 100%;
    min-height: 100%;
    background: #222; /* Fallback background */
}

/* Placeholder Fixes */
.glass-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-placeholder::before {
    font-size: 25.60px;
}

/* History list placeholder fix */
.history-container .song-img {
    background: rgba(255,255,255,0.1);
}

/* === Fixes for User Reported Issues === */

/* 1. Collect Playlist Modal: Remove outer scrollbars, keep inner list scroll */
#collect-playlist-modal .glass-modal-body {
    overflow-y: hidden !important;
    padding-right: 0;
}

/* 2. Create Playlist Modal: Remove horizontal scroll */
#create-playlist-modal .glass-modal-body {
    overflow-x: hidden !important;
}

/* 3. Fix Input Display Issues */
.glass-modal-input {
    width: 100%;
    max-width: 100%;
}

/* 4. Ensure song list handles its own scroll */
.collect-song-list {
    overflow-x: hidden;
}

/* Fix Broken Image Placeholder Sizes */
.song-img.glass-placeholder {
    width: 35.20px !important;
    height: 35.20px !important;
    min-width: 35.20px !important;
    flex-shrink: 0;
    border-radius: 6.40px;
}

.modal-playlist-cover.glass-placeholder {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0;
    border-radius: 6.40px;
}

/* 4. Fix Mini Player Cover Placeholder */
#mini-cover.glass-placeholder {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 6.40px !important;
    flex-shrink: 0;
}

/* 5. Fix Playlist Detail Cover Placeholder */
#playlist-detail-cover.glass-placeholder {
    width: 144px !important;
    height: 144px !important;
    min-width: 144px !important;
    border-radius: 16px !important;
    flex-shrink: 0;
}

/* 6. Fix Home Hero Cover Placeholder (Daily/Radar) */
.home-hero-cover.glass-placeholder {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    border-radius: 9.60px !important;
    flex-shrink: 0;
}

/* === Confirm Modal Styles === */
#confirm-modal .modal-content {
    width: 256px;
    text-align: center;
}

#confirm-modal h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    color: white;
}

#confirm-modal p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-btn, .cancel-btn {
    padding: 8px 19.20px;
    border-radius: 16px;
    font-size: 11.20px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-width: 80px;
}

.confirm-btn {
    background: var(--dynamic-accent);
    color: white;
    box-shadow: 0 3.20px 12px rgba(0,0,0,0.2);
}

.confirm-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4.80px 16px rgba(0,0,0,0.3);
}

.cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 0.80px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* === Modal Animations === */
.modal-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Loading Modal */
.loading-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6.40px);
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.loading-modal-content {
    width: 256px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(32px) saturate(180%);
    border: 0.80px solid rgba(255, 255, 255, 0.15);
    border-radius: 19.20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 32px 64px rgba(0,0,0,0.6);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.loading-modal-overlay.active .loading-modal-content {
    transform: scale(1);
}

.loading-spinner-large {
    width: 40px;
    height: 40px;
    border: 3.20px solid rgba(255,255,255,0.1);
    border-top: 3.20px solid var(--dynamic-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text {
    font-size: 12.80px;
    font-weight: 600;
    color: white;
    margin-bottom: 6.40px;
}

.loading-subtext {
    font-size: 10.40px;
    color: rgba(255,255,255,0.6);
}

/* Refresh Button */
.refresh-btn {
    background: transparent;
    border: none;
    color: white;
    width: 25.60px;
    height: 25.60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
    backdrop-filter: none;
    margin-left: auto;
}

.refresh-btn:hover {
    background: transparent;
    transform: rotate(180deg);
}

/* Closing Animation State */
.modal-overlay.closing {
    opacity: 0;
    pointer-events: none;
}

.modal-overlay.closing .modal-content {
    transform: scale(0.9);
}

/* Mobile Enhancements: Liquid Glass & Dynamic Colors */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch;
        background: radial-gradient(circle at 50% 50%, var(--dynamic-bg-1) 0%, #000 100%);
        background-attachment: fixed; /* Parallax feel */
    }

    .app-container {
        flex-direction: column;
        height: auto;
    }

    /* Mobile Header: Glassmorphism + Dynamic Tint */
    .sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        margin: 0;
        height: auto;
        border-radius: 0 0 24px 24px; /* Soft bottom corners */
        background: rgba(20, 20, 20, 0.4); /* More transparent */
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 0.5px solid rgba(255,255,255,0.1);
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 4px 30px rgba(0,0,0,0.15);
        transition: background 0.5s ease;
    }
    
    .user-profile { margin-bottom: 0; }
    .username { display: none; }
    
    .menu {
        flex-direction: row;
        gap: 12px;
        margin-bottom: 0;
    }
    
    .menu-item {
        padding: 0;
        font-size: 0;
        gap: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        justify-content: center;
        background: rgba(255,255,255,0.05);
        border: 0.5px solid rgba(255,255,255,0.05);
    }
    
    .menu-item i {
        font-size: 18px;
        margin: 0;
        color: rgba(255,255,255,0.8);
    }
    
    .menu-item.active {
        background: var(--dynamic-accent);
        box-shadow: 0 0 20px var(--dynamic-accent);
        border-color: rgba(255,255,255,0.2);
        animation: pulseGlow 2s infinite;
    }
    
    @keyframes pulseGlow {
        0% { box-shadow: 0 0 10px var(--dynamic-accent); }
        50% { box-shadow: 0 0 25px var(--dynamic-accent); }
        100% { box-shadow: 0 0 10px var(--dynamic-accent); }
    }
    
    .import-section { display: none; }

    .main-content {
        padding: 16px 16px 120px 16px;
        overflow: visible;
    }

    .content-header h1 {
        font-size: 28px;
        margin: 20px 0;
        text-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .search-bar-container {
        flex-direction: column;
        gap: 12px;
        position: static;
        padding: 0;
        margin-bottom: 24px;
        background: transparent;
        box-shadow: none;
    }

    #source-select, #search-input {
        height: 48px;
        font-size: 16px;
        border-radius: 16px;
        background: rgba(255,255,255,0.08);
        border: 0.5px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
    }

    #search-btn {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    /* Song List: Floating Glass Cards */
    .song-list-header { display: none !important; }

    .song-item {
        grid-template-columns: 56px 1fr 40px !important;
        padding: 12px;
        gap: 16px;
        background: rgba(255, 255, 255, 0.03);
        margin-bottom: 12px;
        border-radius: 16px;
        border: 0.5px solid rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
        transition: transform 0.2s, background 0.3s;
    }
    
    .song-item:active {
        transform: scale(0.97);
        background: rgba(255,255,255,0.1);
    }

    .song-item.active {
        background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
        border-color: var(--dynamic-accent);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    .col-index { display: none; }
    
    .song-img {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        margin: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    /* Marquee Effect for Long Text */
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

    .song-title-marquee {
        display: inline-block;
        white-space: nowrap;
        animation: marquee 8s linear infinite;
        padding-right: 20px; /* Gap for loop illusion */
    }

    .col-title {
        flex-direction: column;
        align-items: flex-start;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden; /* Mask overflow */
        position: relative;
        mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }

    .song-title {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; /* Default fallback */
    }

    /* Only apply marquee if text is long (handled via JS or CSS hover trick, 
       but for continuous mobile loop, we can just apply animation if we assume it's long, 
       or better: apply it to a wrapper) 
    */
    
    .col-artist {
        display: block;
        font-size: 13px;
        color: rgba(255,255,255,0.6);
        margin-top: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .song-item .col-album, .song-item .col-duration { display: none; }
    
    .song-item .col-action {
        display: flex;
        justify-content: flex-end;
    }

    /* Bottom Player: Floating Island */
    .bottom-player {
        left: 16px;
        right: 16px;
        bottom: 24px;
        height: 72px;
        border-radius: 24px;
        background: rgba(30, 30, 30, 0.6); /* More transparent base */
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        border: 0.5px solid rgba(255,255,255,0.15);
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }
    
    .bottom-player.scroll-hidden {
        transform: translateY(150%);
        opacity: 0;
        pointer-events: none;
    }
    
    /* Progress Bar on Bottom Player */
    .progress-bar-mini {
        height: 3px;
        background: rgba(255,255,255,0.1);
        border-radius: 3px 3px 0 0;
    }
    
    .progress-fill-mini {
        background: var(--dynamic-accent);
        box-shadow: 0 0 10px var(--dynamic-accent);
    }

    .mini-info {
        flex: 1;
        overflow: hidden;
    }
    
    .mini-text .mini-title { font-size: 14px; }
    .mini-text .mini-artist { font-size: 11px; }

    .mini-extra { display: none; }
    
    .mini-controls { gap: 12px; padding-right: 8px; }
    .mini-btn { background: transparent; border: none; }
    .mini-prev, .mini-next { display: none; }
    
    .mini-btn.play-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
        background: white;
        color: black;
        box-shadow: 0 0 20px rgba(255,255,255,0.3);
    }

    /* Full Screen Player: Immersive Experience */
    .side-player-drawer {
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100dvh;
        border-left: none;
        border-radius: 0;
        /* Dynamic Background via JS will overlay this, but keep a base */
        background: linear-gradient(180deg, rgba(20,20,20,0.95) 0%, #000 100%);
        backdrop-filter: blur(50px);
        transform: translateY(100%);
        padding-top: env(safe-area-inset-top);
        display: flex;
        flex-direction: column;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 2000;
    }

    .side-player-drawer.visible {
        transform: translateY(0);
    }
    
    /* Mobile Player Layout */
    .drawer-player-card {
        flex: 0 0 auto; /* Don't grow, let playlist take space */
        justify-content: flex-start;
        padding: 40px 24px 24px 24px;
        gap: 24px;
        background: transparent;
    }
    
    .album-art-container {
        width: 80vw;
        max-width: 320px;
        aspect-ratio: 1/1;
        box-shadow: 0 24px 60px rgba(0,0,0,0.6);
        border-radius: 20px;
        margin: 0 auto;
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    .track-info { text-align: left; padding: 0 12px; margin-top: 16px; }
    .track-name { font-size: 26px; margin-bottom: 8px; }
    .track-artist { font-size: 16px; opacity: 0.8; }
    
    .control-buttons {
        width: 100%;
        margin-top: 32px;
        justify-content: space-between;
        padding: 0 16px;
    }
    
    .ctrl-btn {
        background: transparent;
        border: none;
        box-shadow: none;
    }
    
    .ctrl-btn.lg {
        width: 72px;
        height: 72px;
        font-size: 28px;
        background: white;
        color: black;
        box-shadow: 0 8px 32px rgba(255,255,255,0.3);
        border-radius: 50%;
    }
    
    /* === RESTORED MOBILE PLAYLIST === */
    .drawer-playlist-section {
        display: flex !important; /* Force show */
        flex: 1;
        background: rgba(0,0,0,0.2);
        border-radius: 24px 24px 0 0;
        margin-top: 16px;
        backdrop-filter: blur(20px);
        border-top: 0.5px solid rgba(255,255,255,0.1);
        flex-direction: column;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(0);
        transition: transform 0.3s ease;
    }
    
    /* Drag Handle for Playlist */
    .drawer-playlist-section::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 2px;
        margin: 12px auto;
        flex-shrink: 0;
    }
    
    .playlist-header {
        padding: 0 24px 12px 24px;
        font-size: 16px;
        color: white;
        border-bottom: 0.5px solid rgba(255,255,255,0.05);
    }
    
    .playlist-items {
        padding: 0 16px 24px 16px;
    }
    
    .playlist-item-row {
        padding: 12px;
        background: transparent;
        border-radius: 12px;
        border-bottom: 0.5px solid rgba(255,255,255,0.02);
    }
    
    .playlist-item-row.active {
        background: rgba(255,255,255,0.08);
        border: none;
    }
    
    .hover-playlist-trigger { display: none; }
    
    .mobile-close-btn {
        top: 16px;
        left: 16px;
        background: rgba(0,0,0,0.2);
        backdrop-filter: blur(10px);
        width: 40px;
        height: 40px;
    }
}