/* TLDR Music - Billboard Style Design */

:root {
    --bg-dark: #0a0a0b;
    --bg-card: #131316;
    --bg-card-hover: #1a1a1f;
    --bg-elevated: #1e1e24;
    --border-color: #2a2a32;
    --border-light: #3a3a44;

    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    --accent: #f59e0b;
    --accent-dim: rgba(245, 158, 11, 0.15);
    --accent-glow: rgba(245, 158, 11, 0.3);

    --gold: #fbbf24;
    --silver: #94a3b8;
    --bronze: #cd7f32;

    /* Platform colors */
    --spotify: #1db954;
    --apple: #fc3c44;
    --youtube: #ff0000;
    --billboard: #d4af37;
    --jiosaavn: #2bc5b4;
    --gaana: #e72c30;

    --font: 'Red Hat Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

body {
    font-family: var(--font);
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Main page background - liquid glass effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./green background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

/* ===== SIDEBAR (Overlay Style) ===== */
.sidebar {
    position: fixed;
    top: 80px; /* Below header */
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 99; /* Below header (z-index: 100) */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Sidebar open state */
.sidebar.open {
    transform: translateX(0);
    pointer-events: auto;
}

.sidebar-inner {
    position: relative;
    height: 100%;
    margin: 1rem;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Close/collapse button inside sidebar */
.sidebar-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Show close icon, hide menu icon in sidebar toggle */
.sidebar-toggle .icon-menu {
    display: none;
}

.sidebar-toggle .icon-close {
    display: block;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    padding-top: 4rem; /* Space for close button */
    overflow: hidden;
}

/* Sidebar Navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.sidebar-nav-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.sidebar-nav-item.active {
    background: var(--accent);
    color: var(--bg-dark);
    font-weight: 600;
}

.sidebar-nav-item.active:hover {
    background: var(--gold);
}

.sidebar-nav-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.sidebar-nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Footer */
.sidebar-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-footer-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.sidebar-footer-text {
    white-space: nowrap;
}

/* App container - no shift, sidebar is overlay */
.app {
    margin-left: 0;
}

/* Sidebar mobile adjustments */
@media (max-width: 900px) {
    .sidebar {
        top: 70px; /* Adjust for smaller header on mobile */
    }

    .sidebar::before {
        top: 70px;
    }
}

@media (max-width: 600px) {
    .sidebar {
        width: 100%;
    }

    .sidebar-inner {
        border-radius: 0;
    }

    .sidebar.open .sidebar-toggle {
        right: 1rem;
        top: 1rem;
    }
}

/* ===== HEADER ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: visible;
}

.header-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.5);
    opacity: 0;
    transform: scale(1.5);
    transition: opacity 0.5s ease;
    z-index: -2;
    clip-path: inset(0);
}

.header-bg.active {
    opacity: 0.4;
}

.header-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 22, 24, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Header Menu Button (hamburger) */
.header-menu-btn {
    display: flex;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.logo {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-primary);
}

.logo span {
    color: var(--accent);
}

/* Chart Toggle - hidden on desktop (sidebar provides this) */
.chart-toggle {
    display: none;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border-color);
}

/* Show chart toggle only on mobile where sidebar is hidden */
@media (max-width: 900px) {
    .chart-toggle {
        display: flex;
    }
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
}

.toggle-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.toggle-btn.active {
    background: var(--accent);
    color: #000;
}

.toggle-btn.active:hover {
    background: var(--gold);
}

.toggle-icon {
    font-size: 1rem;
}

.toggle-label {
    white-space: nowrap;
}

.chart-badge {
    display: none; /* Hidden on desktop, sidebar shows chart info */
    flex-direction: column;
    padding-left: 1.5rem;
    border-left: 2px solid var(--accent);
}

/* Show chart badge only on mobile */
@media (max-width: 900px) {
    .chart-badge {
        display: flex;
    }
}

.badge-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-week {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.update-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-share:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-dark);
}

.btn-about {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.btn-about:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-dark);
}

/* ===== HERO SECTION ===== */
.hero {
    position: relative;
    z-index: 2;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    padding: 2.5rem 2rem;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(80px) saturate(1.5);
    transform: scale(1.2);
    opacity: 0.6;
    transition: opacity 0.5s ease, background-image 0.5s ease;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 22, 24, 0.85) 0%, rgba(22, 22, 24, 0.4) 100%);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    align-items: center;
}

.hero-artwork-wrapper {
    position: relative;
    width: 280px;
    height: 280px;
}

.hero-artwork {
    width: 280px;
    height: 280px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

.hero-artwork-wrapper .hero-rank {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: var(--bg-card);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 2px solid var(--accent);
}

.hero-rank {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.rank-hash {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.rank-num {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, var(--gold) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
}

.hero-artist {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.hero-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.btn-play-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.75rem;
    background: var(--accent);
    border: none;
    border-radius: 50px;
    color: var(--bg-dark);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-action-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.hero-action-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-dark);
}

/* Hero progress bar */
.hero-progress {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
    width: 100%;
    max-width: 400px;
}

.hero-progress.visible {
    display: flex;
}

.hero-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: height 0.15s ease;
}

.hero-progress-bar:hover {
    height: 6px;
}

.hero-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.hero-progress-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.btn-play-hero:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px var(--accent-glow);
}

.btn-play-hero.now-playing {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: default;
}

.btn-play-hero.now-playing:hover {
    transform: none;
    box-shadow: none;
}

/* ===== THEATER MODE ===== */
.hero.theater-mode {
    position: sticky;
    top: 60px; /* Below header */
    z-index: 50;
    min-height: 400px;
}

.hero-theater {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(10, 10, 11, 0.98);
    padding: 1.5rem;
}

.hero.theater-mode .hero-theater {
    display: flex;
    flex-direction: column;
}

.hero.theater-mode .hero-inner {
    display: none;
}

.hero.theater-mode .hero-bg {
    opacity: 0.3;
}

.theater-video {
    flex: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background: var(--bg-dark);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.theater-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.theater-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 20;
}

.theater-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.theater-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    text-align: center;
}

.theater-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.theater-artist {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Theater mode responsive */
@media (max-width: 600px) {
    .hero.theater-mode {
        top: 50px;
        min-height: 300px;
    }

    .hero-theater {
        padding: 1rem;
    }

    .theater-video {
        border-radius: 12px;
    }

    .theater-close {
        width: 36px;
        height: 36px;
        top: 0.75rem;
        right: 0.75rem;
    }

    .theater-info {
        margin-top: 0.75rem;
    }

    .theater-title {
        font-size: 1rem;
    }

    .theater-artist {
        font-size: 0.85rem;
    }
}

.hero-platforms {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.platform-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-elevated);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.platform-badge .rank {
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== MAIN LAYOUT ===== */
.main {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    padding-bottom: 120px; /* Space for floating player */
    min-height: calc(100vh - 200px);
}

.main-gradient {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: blur(100px) saturate(1.5);
    transform: scale(1.5);
    clip-path: inset(0);
    transition: opacity 1s ease, background-image 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.main-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,11,0.1) 0%,
        rgba(10,10,11,0.5) 30%,
        rgba(10,10,11,0.85) 60%,
        rgba(10,10,11,0.95) 100%);
}

.main-gradient.active {
    opacity: 0; /* Disabled - using green background instead */
}

.main {
    position: relative;
    z-index: 2;
    overflow-x: hidden;
}

/* ===== CHART SECTION ===== */
.chart-section {
    display: flex;
    flex-direction: column;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.chart-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

/* Section Title with Badge (reusable) */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: 1rem;
}

/* See All Button */
.see-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.see-all-btn:hover {
    color: var(--accent);
    background: rgba(245, 158, 11, 0.1);
}

.see-all-btn svg {
    transition: transform 0.2s;
}

.see-all-btn:hover svg {
    transform: translateX(2px);
}

.chart-legend {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    cursor: help;
}

.legend-item .dot {
    width: 10px;
    height: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.spotify { background: var(--spotify); }
.dot.apple { background: var(--apple); }
.dot.youtube { background: var(--youtube); }
.dot.billboard { background: var(--billboard); }
.dot.jiosaavn { background: var(--jiosaavn); }
.dot.gaana { background: var(--gaana); }

.chart-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
}

/* ===== QUICK PICKS CARD ===== */
.song-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.song-card:hover {
    transform: translateY(-4px);
}

.song-card-artwork {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Force square aspect ratio */
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
    background: var(--bg-elevated);
}

.song-card:hover .song-card-artwork {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.song-card-artwork img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.song-card-artwork-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-card-artwork-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    opacity: 0.5;
}

.song-card-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.song-card-rank.top-3 {
    background: var(--accent);
    color: var(--bg-dark);
}

.song-card-play {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.song-card:hover .song-card-play {
    opacity: 1;
}

.song-card.active .song-card-play {
    opacity: 1;
}

.song-card-play-btn {
    width: 48px;
    height: 48px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-dark);
    transition: transform 0.2s;
}

.song-card:hover .song-card-play-btn {
    transform: scale(1.1);
}

.song-card.active .song-card-artwork {
    box-shadow: 0 0 0 2px var(--accent);
}

/* Play/Pause icon toggle on cards */
.song-card-play-btn .icon-pause {
    display: none;
}

.song-card.playing .song-card-play-btn .icon-play {
    display: none;
}

.song-card.playing .song-card-play-btn .icon-pause {
    display: block;
}

/* Equalizer animation */
.song-card-equalizer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.song-card-equalizer span {
    width: 3px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.song-card.playing .song-card-equalizer {
    opacity: 1;
}

.song-card.playing .song-card-equalizer span {
    animation: equalizer 0.8s ease-in-out infinite;
}

.song-card.playing .song-card-equalizer span:nth-child(1) {
    animation-delay: 0s;
}

.song-card.playing .song-card-equalizer span:nth-child(2) {
    animation-delay: 0.2s;
}

.song-card.playing .song-card-equalizer span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes equalizer {
    0%, 100% {
        height: 4px;
    }
    50% {
        height: 16px;
    }
}

/* Show play overlay always when playing */
.song-card.playing .song-card-play {
    opacity: 1;
}

.song-card-info {
    padding: 0 0.35rem;
}

.song-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.song-card-artist {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.song-card-meta .score {
    color: var(--accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

/* Rating Icon */
.rating-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

.song-card-meta .platform-source {
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== RANK MOVEMENT INDICATORS ===== */
.rank-movement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
}

/* Position in song card meta (beside score) */
.song-card-meta .rank-movement {
    margin-left: 0.25rem;
}

.rank-up {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.rank-down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.rank-new {
    color: var(--accent);
    background: var(--accent-dim);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
}

.rank-same {
    color: var(--text-muted);
    background: rgba(107, 114, 128, 0.15);
    font-size: 0.6rem;
}

/* Regional song rank movement */
.regional-song .rank-movement {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
}

/* Legacy list styles for backwards compatibility */
.song-item {
    display: none;
}

/* Chart grid responsive */
@media (max-width: 900px) {
    .chart-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .chart-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .chart-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== REGIONAL SECTION ===== */
.regional-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.regional-header {
    margin-bottom: 1rem;
}

.regional-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Language/Platform selector */
.regional-language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.regional-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.regional-lang-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.regional-lang-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-dark);
}

/* Platform selector buttons (Global charts) */
.platform-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.platform-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--platform-color) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.platform-btn:hover {
    border-color: color-mix(in srgb, var(--platform-color) 50%, transparent);
    color: var(--text-primary);
}

.platform-btn:hover::before {
    opacity: 0.15;
}

.platform-btn.active {
    background: linear-gradient(135deg, var(--platform-color) 0%, color-mix(in srgb, var(--platform-color) 70%, #000) 100%);
    border-color: var(--platform-color);
    color: #fff;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--platform-color) 40%, transparent);
}

.platform-btn.active::before {
    opacity: 0;
}

.platform-btn-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
}

.platform-btn-logo svg {
    width: 100%;
    height: 100%;
}

.platform-btn-name {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .platform-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        border-radius: 20px;
    }

    .platform-btn-logo {
        width: 16px;
        height: 16px;
    }
}

/* Regional chart grid - same as Quick Picks */
.regional-chart-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Regional responsive grid */
@media (max-width: 1100px) {
    .regional-chart-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .regional-chart-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .regional-lang-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 500px) {
    .regional-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .regional-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .regional-card {
        padding: 1rem;
    }

    .regional-song {
        padding: 0.35rem;
    }
}

/* ===== DISCOVER PAGE ===== */
.discover-view {
    padding: 0 0 2rem 0;
}

.discover-header {
    margin-bottom: 2rem;
}

.discover-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.discover-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.discover-section {
    margin-bottom: 2.5rem;
}

.discover-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.discover-section-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.discover-section-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.discover-grid.mood-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Discover Card */
.discover-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    aspect-ratio: 1.2;
}

.discover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.discover-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 60%, #000) 100%);
}

.discover-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}

.discover-card-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.discover-card-icon svg {
    width: 100%;
    height: 100%;
}

.discover-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.25rem 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.discover-card-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Mood Cards - specific colors */
.discover-card[data-mood="chill"] { --card-color: #4A90D9; }
.discover-card[data-mood="workout"] { --card-color: #E63946; }
.discover-card[data-mood="party"] { --card-color: #9B59B6; }
.discover-card[data-mood="romance"] { --card-color: #E91E63; }
.discover-card[data-mood="sad"] { --card-color: #607D8B; }
.discover-card[data-mood="focus"] { --card-color: #00897B; }
.discover-card[data-mood="gaming"] { --card-color: #7C4DFF; }
.discover-card[data-mood="feel-good"] { --card-color: #FF9800; }
.discover-card[data-mood="sleep"] { --card-color: #3F51B5; }
.discover-card[data-mood="commute"] { --card-color: #00ACC1; }
.discover-card[data-mood="energize"] { --card-color: #FF5722; }

/* Language Cards - use platform-btn style colors */
.discover-card[data-lang="hindi"] { --card-color: #FF6B35; }
.discover-card[data-lang="tamil"] { --card-color: #C41E3A; }
.discover-card[data-lang="telugu"] { --card-color: #E6B800; }
.discover-card[data-lang="punjabi"] { --card-color: #FFB833; }
.discover-card[data-lang="english"] { --card-color: #1DB954; }
.discover-card[data-lang="bengali"] { --card-color: #228B22; }
.discover-card[data-lang="kannada"] { --card-color: #E31837; }
.discover-card[data-lang="malayalam"] { --card-color: #00A86B; }
.discover-card[data-lang="bhojpuri"] { --card-color: #FF8C00; }
.discover-card[data-lang="marathi"] { --card-color: #FF7F00; }
.discover-card[data-lang="gujarati"] { --card-color: #DC143C; }
.discover-card[data-lang="haryanvi"] { --card-color: #2E8B57; }

/* Era Cards */
.discover-card[data-era="2025"] { --card-color: #7C4DFF; }
.discover-card[data-era="2024"] { --card-color: #00BCD4; }
.discover-card[data-era="2023"] { --card-color: #4CAF50; }
.discover-card[data-era="2022"] { --card-color: #FF9800; }
.discover-card[data-era="2010s"] { --card-color: #E91E63; }
.discover-card[data-era="retro"] { --card-color: #795548; }

/* Artist Scroll */
.discover-scroll-container {
    overflow: hidden;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.discover-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.discover-scroll::-webkit-scrollbar {
    height: 6px;
}

.discover-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.discover-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Artist Card - circular style */
.artist-card {
    flex: 0 0 auto;
    width: 140px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.artist-card:hover {
    transform: scale(1.05);
}

.artist-card-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.artist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-card-image svg {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
}

.artist-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artist-card-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Curated Detail View */
.curated-detail-view {
    padding: 0 0 120px 0;
}

.curated-detail-header {
    margin-bottom: 2rem;
}

.curated-detail-hero {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    padding: 2rem 0;
}

.curated-detail-cover {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.curated-detail-cover svg {
    width: 64px;
    height: 64px;
    color: rgba(255, 255, 255, 0.9);
}

.curated-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.curated-icon svg {
    width: 64px;
    height: 64px;
    color: rgba(255, 255, 255, 0.9);
}

.curated-detail-info {
    flex: 1;
}

.curated-detail-type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.curated-detail-name {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.curated-detail-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.curated-detail-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Discover responsive */
@media (max-width: 768px) {
    .discover-header h2 {
        font-size: 1.5rem;
    }

    .discover-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .discover-grid.mood-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .artist-card {
        width: 120px;
    }

    .artist-card-image {
        width: 100px;
        height: 100px;
    }

    .curated-detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .curated-detail-cover {
        width: 180px;
        height: 180px;
    }

    .curated-detail-name {
        font-size: 1.75rem;
    }

    .curated-detail-buttons {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .discover-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .discover-card {
        aspect-ratio: 1;
    }

    .discover-card-title {
        font-size: 0.95rem;
    }
}

/* ===== AI GENERATED PAGE ===== */
.ai-generated-view {
    padding: 0 0 2rem 0;
}

.ai-generated-header {
    margin-bottom: 2rem;
}

.ai-generated-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.ai-generated-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.ai-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ai-loading p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.ai-error {
    text-align: center;
    padding: 4rem 2rem;
}

.ai-error p {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.ai-error button {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.ai-error button:hover {
    transform: scale(1.05);
}

.ai-section {
    margin-bottom: 2.5rem;
}

.ai-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ai-section-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.ai-section-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* AI Card */
.ai-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    aspect-ratio: 1.1;
}

.ai-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.ai-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 50%, #000) 100%);
}

.ai-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
}

.ai-card-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.ai-card-icon svg {
    width: 100%;
    height: 100%;
}

.ai-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.25rem 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ai-card-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* AI Playlist Detail View - Uses chart-detail-view styles */
.ai-playlist-detail-view {
    padding: 2rem;
    background:
        radial-gradient(ellipse at top left, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, rgba(30, 30, 35, 0.9) 0%, rgba(18, 18, 22, 0.95) 100%);
    border-radius: 16px;
    margin: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: calc(100vh - 200px);
}

.ai-playlist-detail-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-playlist-detail-songs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* AI cover uses dynamic colors via inline style */
.chart-detail-cover.ai-cover {
    /* Background set via inline style */
}

.chart-song-duration {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

/* AI Generated Responsive */
@media (max-width: 768px) {
    .ai-generated-header h2 {
        font-size: 1.5rem;
    }

    .ai-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-playlist-detail-view {
        padding: 1rem;
        margin: 0.5rem;
    }

    .ai-playlist-detail-view .chart-detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ai-playlist-detail-view .chart-detail-cover {
        width: 160px;
        height: 160px;
    }

    .ai-playlist-detail-view .chart-detail-name {
        font-size: 1.5rem;
    }

    .ai-playlist-detail-view .chart-detail-buttons {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .ai-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .ai-card {
        aspect-ratio: 1;
    }

    .ai-card-title {
        font-size: 0.9rem;
    }

    .ai-card-meta {
        font-size: 0.7rem;
    }

    .ai-playlist-detail-view {
        padding: 0.75rem;
        margin: 0.25rem;
    }
}

/* ===== FLOATING PLAYER BAR ===== */
.player-bar {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 2rem));
    width: calc(100% - 2rem);
    max-width: 868px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    z-index: 1000;
    transition: transform 0.3s ease;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.player-bar.visible {
    transform: translateX(-50%) translateY(0);
}

/* Progress bar */
.progress-container {
    display: none; /* Hidden from top, will show inline */
}

.time-current,
.time-duration {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 36px;
    font-variant-numeric: tabular-nums;
}

.time-current {
    text-align: right;
}

.time-duration {
    text-align: left;
}

.progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.15s ease;
}

.progress-bar:hover {
    height: 6px;
}

.progress-bar:hover .progress-handle {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.progress-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.player-bar-inner {
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Center section with controls and progress */
.player-bar-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 500px;
}

.player-bar-center .progress-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.player-bar-center .progress-bar-inline {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.15s ease;
}

.player-bar-center .progress-bar-inline:hover {
    height: 6px;
}

.player-bar-center .progress-fill-inline {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.player-bar-center .time-inline {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 32px;
    font-variant-numeric: tabular-nums;
}

/* Video container (mini player) */
.video-container {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 1rem;
    width: 320px;
    background: rgba(10, 10, 11, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: none;
}

.video-container.visible {
    display: block;
}

.video-wrapper {
    aspect-ratio: 16/9;
    background: var(--bg-dark);
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.player-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Error state styles */
.player-placeholder.error-state {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(10, 10, 11, 0.95) 100%);
}

.error-emoji {
    font-size: 2.5rem;
    line-height: 1;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.error-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.error-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 250px;
    line-height: 1.4;
}

/* Chart error state */
.chart-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    gap: 1rem;
}

.chart-error .error-emoji {
    font-size: 4rem;
}

.chart-error .error-title {
    font-size: 1.5rem;
}

.chart-error .error-subtitle {
    font-size: 1rem;
    max-width: 400px;
}

.retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    border: none;
    border-radius: 50px;
    color: var(--bg-dark);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px var(--accent-glow);
}

/* Lyrics unavailable enhanced */
.lyrics-unavailable .error-emoji {
    font-size: 3rem;
}

.lyrics-unavailable .error-title {
    font-size: 1.1rem;
}

.lyrics-unavailable .error-subtitle {
    max-width: 280px;
}

.video-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.video-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Player bar info */
.player-bar-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.player-bar-artwork {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-elevated);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.player-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.player-bar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-bar-artist {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-bar-source {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: #ff0000;
    opacity: 0.8;
    margin-top: 2px;
}

.player-bar-source svg {
    flex-shrink: 0;
}

/* Player controls */
.player-bar-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.control-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.control-btn svg {
    width: 18px;
    height: 18px;
}

.control-btn:hover {
    background: var(--bg-elevated);
    color: var(--accent);
}

.control-btn.play-btn {
    width: 42px;
    height: 42px;
    background: var(--accent);
    color: var(--bg-dark);
}

.control-btn.play-btn svg {
    width: 20px;
    height: 20px;
}

.control-btn.play-btn:hover {
    transform: scale(1.05);
    background: var(--gold);
}

.control-btn .icon-pause {
    display: none;
}

.control-btn.playing .icon-play {
    display: none;
}

.control-btn.playing .icon-pause {
    display: block;
}

/* Player actions */
.player-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.action-btn.active {
    color: var(--accent);
}

/* ===== FOOTER ===== */
.footer {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    padding-bottom: 100px; /* Space for player bar */
    text-align: center;
}

.footer p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ===== LOADING & TOAST ===== */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-secondary);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== SKELETON LOADING ===== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 1em;
    border-radius: 4px;
}

.skeleton-text.title {
    height: 1.5em;
    width: 70%;
}

.skeleton-text.subtitle {
    height: 1em;
    width: 50%;
}

.skeleton-text.small {
    height: 0.8em;
    width: 40%;
}

/* Hero Skeleton */
.hero-skeleton {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.hero-skeleton .skeleton-artwork {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    flex-shrink: 0;
}

.hero-skeleton .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-skeleton .skeleton-label {
    width: 100px;
    height: 0.75em;
}

.hero-skeleton .skeleton-title {
    width: 60%;
    height: 2em;
}

.hero-skeleton .skeleton-artist {
    width: 40%;
    height: 1.2em;
}

.hero-skeleton .skeleton-stats {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.hero-skeleton .skeleton-stat {
    width: 60px;
    height: 2.5em;
}

.hero-skeleton .skeleton-button {
    width: 140px;
    height: 44px;
    border-radius: 22px;
    margin-top: 0.5rem;
}

/* Song Card Skeleton */
.skeleton-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-card .skeleton-artwork {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
}

.skeleton-card .skeleton-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-card .skeleton-title {
    width: 80%;
    height: 1em;
}

.skeleton-card .skeleton-artist {
    width: 60%;
    height: 0.85em;
}

.skeleton-card .skeleton-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.skeleton-card .skeleton-score {
    width: 40px;
    height: 0.75em;
}

.skeleton-card .skeleton-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* Skeleton Grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

/* Regional Skeleton */
.skeleton-regional {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skeleton-regional-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.skeleton-regional-header .skeleton-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.skeleton-regional-header .skeleton-name {
    width: 100px;
    height: 1.2em;
}

.skeleton-regional-songs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-regional-song {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.skeleton-regional-song .skeleton-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
}

.skeleton-regional-song .skeleton-song-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.skeleton-regional-song .skeleton-song-title {
    width: 70%;
    height: 0.9em;
}

.skeleton-regional-song .skeleton-song-artist {
    width: 50%;
    height: 0.75em;
}

/* Hide skeleton when content loads */
.skeleton-container {
    transition: opacity 0.3s ease;
}

.skeleton-container.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

@media (max-width: 768px) {
    .hero-skeleton {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .hero-skeleton .skeleton-artwork {
        width: 150px;
        height: 150px;
    }

    .hero-skeleton .skeleton-content {
        align-items: center;
    }

    .hero-skeleton .skeleton-title {
        width: 80%;
    }

    .hero-skeleton .skeleton-artist {
        width: 60%;
    }

    .skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
}

.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--accent);
    color: var(--bg-dark);
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .main {
        padding: 1.5rem;
    }
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: auto 1fr;
    }

    .hero-platforms {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rank-num {
        font-size: 5rem;
    }

    .hero-title {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .header-inner {
        position: relative;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .brand {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .logo {
        font-size: 1.25rem;
    }

    .chart-toggle {
        padding: 3px;
        gap: 2px;
    }

    .toggle-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .toggle-icon {
        font-size: 0.9rem;
    }

    .chart-badge {
        border-left: 2px solid var(--accent);
        padding-left: 0.75rem;
        text-align: left;
        border-top: none;
        padding-top: 0;
    }

    .badge-label {
        font-size: 0.65rem;
    }

    .badge-week {
        font-size: 0.6rem;
    }

    .header-meta {
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
    }

    .btn-share {
        padding: 0.4rem;
        border-radius: 8px;
    }

    .btn-share span,
    .btn-share svg + span {
        display: none;
    }

    .btn-share svg {
        width: 18px;
        height: 18px;
    }

    .update-date {
        display: none;
    }

    .hero {
        padding: 2rem 1rem;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }

    .hero-rank {
        justify-content: center;
    }

    .rank-num {
        font-size: 4rem;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-controls {
        justify-content: center;
    }

    .hero-progress {
        max-width: 100%;
    }

    .hero-platforms {
        justify-content: center;
    }

    .main {
        padding: 1rem;
    }

    .chart-legend {
        display: none;
    }

    .song-item {
        grid-template-columns: 36px 64px 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .song-artwork-wrap,
    .song-artwork,
    .song-artwork-placeholder {
        width: 64px;
        height: 64px;
        border-radius: 8px;
    }

    .song-play-overlay {
        border-radius: 8px;
    }

    .song-rank {
        font-size: 1rem;
    }

    .song-stats {
        display: none;
    }

    .hero-artwork-wrapper {
        width: 160px;
        height: 160px;
    }

    .hero-artwork {
        width: 160px;
        height: 160px;
    }

    .hero-bg {
        opacity: 0.5;
    }

    .hero::after {
        background: linear-gradient(180deg, var(--bg-dark) 0%, transparent 50%, var(--bg-dark) 100%);
    }

    /* Player bar mobile */
    .player-bar {
        bottom: 0.75rem;
        width: calc(100% - 1.5rem);
        border-radius: 16px;
    }

    .progress-container {
        padding: 0.5rem 0.75rem 0;
        gap: 0.5rem;
    }

    .time-current,
    .time-duration {
        font-size: 0.65rem;
        min-width: 30px;
    }

    .player-bar-inner {
        padding: 0.35rem 0.75rem 0.5rem;
        gap: 0.5rem;
    }

    .player-bar-artwork {
        width: 48px;
        height: 48px;
    }

    .player-bar-text {
        max-width: 100px;
    }

    .control-btn {
        width: 36px;
        height: 36px;
    }

    .control-btn.play-btn {
        width: 44px;
        height: 44px;
    }

    .player-bar-actions {
        display: none;
    }

    .video-container {
        width: 200px;
        right: 0.5rem;
        border-radius: 12px;
    }
}

/* ===== LYRICS PANEL ===== */
.lyrics-panel {
    position: fixed;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: 400px;
    max-width: calc(100vw - 2rem);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    z-index: 1001;
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
}

.lyrics-panel.visible {
    transform: translateX(0);
}

.lyrics-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.lyrics-panel-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.lyrics-song-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lyrics-song-artist {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lyrics-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.lyrics-close:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.lyrics-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    padding-bottom: 100px; /* Space for player bar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.lyrics-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.lyrics-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 1rem;
    text-align: center;
}

.lyrics-text {
    font-size: 1.1rem;
    line-height: 2;
    color: var(--text-secondary);
    white-space: pre-wrap;
    font-family: inherit;
}

.lyrics-text .lyrics-line {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.lyrics-text .lyrics-line.active {
    color: var(--accent);
    background: var(--accent-dim);
    font-weight: 600;
}

.lyrics-text .lyrics-line:hover {
    background: var(--bg-elevated);
}

.lyrics-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.lyrics-unavailable svg {
    opacity: 0.5;
}

/* Lyrics panel mobile */
@media (max-width: 600px) {
    .lyrics-panel {
        top: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
        border-radius: 16px;
    }

    .lyrics-panel-header {
        border-radius: 16px 16px 0 0;
    }

    .lyrics-content {
        padding: 1rem;
    }

    .lyrics-text {
        font-size: 1rem;
        line-height: 1.8;
    }
}

/* ===== QUEUE PANEL ===== */
.queue-panel {
    position: fixed;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    z-index: 1001;
    transform: translateX(calc(-100% - 2rem));
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
}

.queue-panel.visible {
    transform: translateX(0);
}

.queue-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.queue-panel-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.queue-panel-title > span:first-child {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.queue-panel-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.queue-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.queue-clear-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.queue-clear-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.queue-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.queue-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.queue-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 100px;
    scrollbar-width: none;
}

.queue-content::-webkit-scrollbar {
    display: none;
}

.queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.queue-empty svg {
    opacity: 0.5;
}

.queue-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

.queue-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.queue-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.queue-item-number {
    font-size: 0.8rem;
    color: var(--text-muted);
    width: 1.5rem;
    text-align: center;
}

.queue-item-artwork {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.queue-item-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.queue-item-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-card);
}

.queue-item-info {
    flex: 1;
    min-width: 0;
}

.queue-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-item-artist {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-item-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    opacity: 0;
}

.queue-item:hover .queue-item-remove {
    opacity: 1;
}

.queue-item-remove:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Queue badge on button */
.queue-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--bg-dark);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.queue-badge.visible {
    display: flex;
}

#queueToggleBtn {
    position: relative;
}

/* Queue panel mobile */
@media (max-width: 600px) {
    .queue-panel {
        top: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
        border-radius: 16px;
    }
}

/* ===== FAVORITES SECTION ===== */
.favorites-section {
    padding: 0 1.5rem;
    margin-bottom: 2rem;
}

.favorites-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.favorites-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.favorites-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.favorites-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: 1rem;
}

.favorites-list {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.favorites-list::-webkit-scrollbar {
    display: none;
}

.favorite-card {
    flex-shrink: 0;
    width: 200px;
    cursor: pointer;
    transition: transform 0.2s;
}

.favorite-card:hover {
    transform: translateY(-4px);
}

.favorite-card-artwork {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
    margin-bottom: 0.75rem;
}

.favorite-card-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--text-muted);
}

.favorite-card-placeholder svg {
    width: 40px;
    height: 40px;
}

.favorite-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
}

.favorite-card:hover .favorite-remove {
    opacity: 1;
}

.favorite-remove:hover {
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-primary);
}

.favorite-card-info {
    text-align: center;
}

.favorite-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.favorite-card-artist {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== HISTORY SECTION ===== */
.history-section {
    padding: 0 1.5rem;
    margin-bottom: 2rem;
}

.history-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.history-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.history-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: 1rem;
}

.history-list {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.history-list::-webkit-scrollbar {
    display: none;
}

.history-card {
    flex-shrink: 0;
    width: 200px;
    cursor: pointer;
    transition: transform 0.2s;
}

.history-card:hover {
    transform: translateY(-4px);
}

.history-card-artwork {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
    margin-bottom: 0.75rem;
}

.history-card-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    color: var(--text-muted);
}

.history-card-placeholder svg {
    width: 40px;
    height: 40px;
}

.history-card-info {
    text-align: center;
}

.history-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.history-card-artist {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== SHUFFLE & REPEAT BUTTONS ===== */
.control-btn.active {
    color: var(--accent);
}

#shuffleBtn,
#repeatBtn {
    position: relative;
}

.repeat-one-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 8px;
    font-weight: 700;
    color: var(--accent);
    display: none;
}

#repeatBtn.repeat-one .repeat-one-badge {
    display: block;
}

/* ===== FAVORITE BUTTON ===== */
#favoriteBtn.active svg {
    fill: var(--accent);
    stroke: var(--accent);
}

/* ===== UTILITIES ===== */
::selection {
    background: var(--accent);
    color: var(--bg-dark);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== AUTH UI ===== */

/* Auth button in header */
.auth-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    color: var(--bg-dark);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-btn:hover {
    background: var(--gold);
}

.auth-btn.logged-in {
    padding: 6px 12px 6px 6px;
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.auth-btn.logged-in:hover {
    background: rgba(255, 255, 255, 0.12);
}

.auth-btn .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.auth-btn .user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auth dropdown */
.auth-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.auth-btn.logged-in:hover .auth-dropdown,
.auth-btn.logged-in:focus-within .auth-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.auth-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.auth-dropdown-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.auth-dropdown-name {
    font-weight: 600;
    color: var(--text-primary);
}

.auth-dropdown-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.auth-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.auth-dropdown-item:first-child {
    border-radius: 12px 12px 0 0;
}

.auth-dropdown-item:last-child {
    border-radius: 0 0 12px 12px;
}

.auth-dropdown-profile {
    border-bottom: 1px solid var(--border-color);
}

.auth-dropdown-logout:hover {
    background: rgba(255, 80, 80, 0.1);
    color: #ff6b6b;
}

/* Login Modal */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.login-modal.visible {
    opacity: 1;
    visibility: visible;
}

.login-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.login-modal-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: rgba(18, 18, 28, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 60px -10px rgba(212, 175, 55, 0.12);
}


.login-modal.visible .login-modal-content {
    transform: scale(1);
}

.login-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.login-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.login-modal-logo {
    margin: 0 auto 28px;
    text-align: center;
    font-family: var(--font);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    position: relative;
}

.login-modal-logo .logo-tldr {
    color: var(--accent);
}

.login-modal-logo .logo-music {
    color: var(--text-primary);
    font-weight: 300;
    margin-left: 2px;
}

.login-modal-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.login-modal-content > p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.5;
}

#googleSignInBtn {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
}

/* Override Google button container styling */
#googleSignInBtn > div {
    border-radius: 12px !important;
    overflow: hidden;
}

#googleSignInBtn iframe {
    border-radius: 12px !important;
}

/* Alternative: Custom Google button wrapper */
.google-btn-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: #1a1a2e;
    padding: 14px 32px;
    border-radius: 12px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.google-btn-wrapper:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.google-btn-wrapper svg {
    width: 20px;
    height: 20px;
}

.login-modal-terms {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 16px;
}

/* Mobile adjustments for auth */
@media (max-width: 768px) {
    .auth-btn .user-name {
        display: none;
    }

    .auth-btn.logged-in {
        padding: 6px;
    }

    .auth-dropdown {
        right: -10px;
        width: 260px;
    }

    .login-modal-content {
        padding: 32px 24px;
    }
}

/* ===== PROFILE PAGE (Full Screen) ===== */
.profile-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.profile-page.visible {
    opacity: 1;
    visibility: visible;
}

.profile-page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
}

.profile-page-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
}

/* Profile Header */
.profile-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    background: rgba(13, 13, 13, 0.9);
    backdrop-filter: blur(20px);
    z-index: 10;
    border-bottom: 1px solid var(--border-color);
}

.profile-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.profile-signout-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-signout-btn:hover {
    background: rgba(255, 80, 80, 0.1);
    border-color: rgba(255, 80, 80, 0.3);
    color: #ff6b6b;
}

/* Profile Hero */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}

.profile-hero-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    border: 3px solid var(--accent-dim);
}

.profile-hero-info {
    flex: 1;
}

.profile-hero-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.profile-hero-email {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}

.profile-hero-stats {
    display: flex;
    gap: 1.5rem;
}

.profile-hero-stat {
    display: flex;
    flex-direction: column;
}

.profile-hero-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.profile-hero-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Profile Rows */
.profile-row {
    padding: 1.5rem 0;
}

.profile-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    margin-bottom: 1rem;
}

.profile-row-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.profile-row-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-row-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 1.5rem;
    scrollbar-width: none;
}

.profile-row-scroll::-webkit-scrollbar {
    display: none;
}

.profile-row-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}

.profile-row-empty svg {
    opacity: 0.3;
    margin-bottom: 0.75rem;
}

.profile-row-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Profile Card (for songs in rows) */
.profile-card {
    flex-shrink: 0;
    width: 140px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-card:hover {
    transform: translateY(-4px);
}

.profile-card-artwork {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
    margin-bottom: 0.75rem;
}

.profile-card-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card-play {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: var(--bg-dark);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.profile-card:hover .profile-card-play {
    opacity: 1;
    transform: translateY(0);
}

.profile-card-play:hover {
    transform: scale(1.1);
}

.profile-card-info {
    text-align: center;
    padding: 0 4px;
}

.profile-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.profile-card-artist {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile Page Mobile */
@media (max-width: 600px) {
    .profile-hero {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .profile-hero-avatar {
        width: 80px;
        height: 80px;
    }

    .profile-hero-name {
        font-size: 1.5rem;
    }

    .profile-hero-stats {
        justify-content: center;
    }

    .profile-card {
        width: 120px;
    }

    .profile-card-artwork {
        width: 120px;
        height: 120px;
    }

    .profile-row-scroll {
        padding: 0.5rem 1rem;
    }

    .profile-row-header {
        padding: 0 1rem;
    }
}

/* ===== HOME VIEW ===== */
.home-view {
    padding-bottom: 1.5rem;
}

.home-chart-selector {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
}

/* Chart cards */
.home-chart-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(30, 30, 36, 0.6);
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.home-chart-card:hover {
    background: rgba(40, 40, 48, 0.8);
}

/* Active state */
.home-chart-card.active {
    background: rgba(40, 40, 48, 0.95);
}

.home-chart-card.india.active {
    border-color: rgba(255, 153, 51, 0.6);
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.15);
}

.home-chart-card.global.active {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
}

.home-chart-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-chart-card.india .home-chart-icon {
    background: linear-gradient(135deg, rgba(255, 153, 51, 0.2) 0%, rgba(19, 136, 8, 0.2) 100%);
}

.home-chart-card.global .home-chart-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
}

.home-chart-flag {
    font-size: 1.5rem;
}

.home-chart-info {
    flex: 1;
    min-width: 0;
}

.home-chart-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}

.home-chart-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Home view mobile */
@media (max-width: 768px) {
    .home-view {
        padding-bottom: 1rem;
    }

    .home-chart-selector {
        gap: 0.75rem;
    }

    .home-chart-card {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .home-chart-icon {
        width: 36px;
        height: 36px;
    }

    .home-chart-flag {
        font-size: 1.25rem;
    }

    .home-chart-info h3 {
        font-size: 0.9rem;
    }

    .home-chart-subtitle {
        font-size: 0.75rem;
    }
}

/* ===== PLAYLISTS VIEW (Main Content) ===== */
.playlists-view {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.playlists-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.playlists-view-title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.playlists-view-title h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.playlists-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: 1rem;
}

/* Header Actions */
.playlists-header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Sorting Controls */
.playlists-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playlists-sort-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.playlists-sort-select {
    background: rgba(30, 30, 36, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    font-family: var(--font);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: all 0.2s;
}

.playlists-sort-select:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

.playlists-sort-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Library Cards (Favorites & History) */
.library-cards {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.library-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(40, 40, 48, 0.8) 0%, rgba(30, 30, 36, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 280px;
}

.library-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.library-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.library-card-icon.favorites-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.library-card-icon.history-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
}

.library-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.library-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.library-card-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Recently Played Section */
.recently-played-section {
    margin-bottom: 2.5rem;
}

.recently-played-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.recently-played-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recently-played-header h3 svg {
    color: var(--accent);
}

.recently-played-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.recently-played-scroll::-webkit-scrollbar {
    display: none;
}

.recently-played-card {
    flex-shrink: 0;
    width: 140px;
    background: rgba(30, 30, 36, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recently-played-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.recently-played-artwork {
    aspect-ratio: 1;
    background: var(--bg-elevated);
    position: relative;
}

.recently-played-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recently-played-info {
    padding: 0.75rem;
}

.recently-played-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recently-played-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Section Divider */
.playlists-section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.playlists-section-divider h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

.playlists-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}

.playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.playlists-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1.5rem;
    background: rgba(30, 30, 36, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    margin: 2rem auto;
    max-width: 480px;
}

.playlists-empty-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.playlists-empty-icon svg {
    color: var(--accent);
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.4));
}

.playlists-empty h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.playlists-empty p {
    color: var(--text-secondary);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

.playlists-empty .btn-primary {
    margin-top: 0.5rem;
    padding: 0.75rem 1.5rem;
}

/* Playlist Grid Card - Glassmorphism */
.playlist-grid-card {
    background: rgba(30, 30, 36, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.playlist-grid-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.1);
}

.playlist-grid-card:hover .playlist-grid-actions {
    opacity: 1;
}

/* Public/Private Badge */
.playlist-grid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    width: fit-content;
}

.playlist-grid-badge.public {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.playlist-grid-badge.private {
    background: rgba(100, 100, 120, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.playlist-grid-badge svg {
    width: 9px;
    height: 9px;
}

/* Quick Actions Menu */
.playlist-grid-actions {
    position: relative;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.playlist-actions-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.playlist-actions-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    color: var(--text-primary);
}

.playlist-actions-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    background: rgba(30, 30, 36, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    min-width: 160px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 100;
}

.playlist-actions-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.playlist-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font);
}

.playlist-action-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.playlist-action-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.playlist-action-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.playlist-grid-artwork {
    aspect-ratio: 1;
    background: var(--bg-elevated);
    overflow: hidden;
}

.playlist-grid-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-grid-artwork.multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.playlist-grid-artwork.multi img {
    width: 100%;
    height: 100%;
}

.playlist-grid-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.playlist-grid-placeholder svg {
    color: var(--accent);
    opacity: 0.5;
}

.playlist-grid-info {
    padding: 0.875rem;
    background: rgba(20, 20, 24, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.playlist-grid-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.playlist-grid-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.playlist-grid-play {
    position: absolute;
    bottom: 5rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.playlist-grid-play svg {
    color: var(--bg-dark);
    margin-left: 2px;
}

.playlist-grid-card:hover .playlist-grid-play {
    opacity: 1;
    transform: translateY(0);
}

.playlist-grid-play:hover {
    transform: scale(1.1) !important;
}

/* ===== PLAYLIST DETAIL VIEW ===== */
.playlist-detail-view {
    padding: 2rem;
    background:
        radial-gradient(ellipse at top left, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, rgba(30, 30, 35, 0.9) 0%, rgba(18, 18, 22, 0.95) 100%);
    border-radius: 16px;
    margin: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-family: var(--font);
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.detail-back-btn:hover {
    color: var(--text-primary);
}

.detail-hero {
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    align-items: flex-end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-cover {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-cover.multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.detail-cover.multi img {
    width: 100%;
    height: 100%;
}

.detail-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.detail-cover-placeholder svg {
    color: var(--accent);
    opacity: 0.6;
}

.detail-cover.favorites-cover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.detail-cover.history-cover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.detail-info {
    flex: 1;
}

.detail-type {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

.detail-name {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.detail-meta {
    font-size: 1rem;
    color: var(--text-secondary);
    display: block;
}

.detail-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.visibility-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}

.visibility-toggle.public {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.visibility-toggle.public:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.visibility-toggle.private {
    background: rgba(156, 163, 175, 0.1);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.visibility-toggle.private:hover {
    background: rgba(156, 163, 175, 0.2);
    border-color: var(--text-muted);
}

.visibility-toggle svg {
    width: 14px;
    height: 14px;
}

.detail-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-dark);
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--border-light);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.btn-danger:hover {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.4);
}

/* Detail Song List */
.detail-song-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-song {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.detail-song:hover {
    background: rgba(255, 255, 255, 0.05);
}

.detail-song-num {
    width: 24px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-song-artwork {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
    position: relative;
}

.detail-song-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-song-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.detail-song-play-overlay svg {
    color: white;
}

.detail-song:hover .detail-song-play-overlay {
    opacity: 1;
}

.detail-song-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-song-title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-song-artist {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-song-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    opacity: 0;
    transition: all 0.2s;
}

.detail-song:hover .detail-song-remove {
    opacity: 1;
}

.detail-song-remove:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.detail-empty svg {
    color: var(--accent);
    opacity: 0.5;
}

.detail-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.detail-empty p {
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .playlists-view {
        padding: 1rem;
    }

    .playlists-view-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .playlists-header-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem;
    }

    .playlists-sort {
        width: 100%;
    }

    .playlists-sort-select {
        flex: 1;
    }

    .playlists-header-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .playlists-view-title h2 {
        font-size: 1.5rem;
    }

    .playlists-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    /* Show actions on mobile always */
    .playlist-grid-actions {
        opacity: 1;
    }

    .playlist-grid-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.35rem;
    }

    .playlist-grid-info {
        padding: 0.75rem;
        gap: 0.25rem;
    }

    .playlist-grid-play {
        opacity: 1;
        transform: translateY(0);
        width: 36px;
        height: 36px;
        bottom: 4.5rem;
    }

    /* Recently Played */
    .recently-played-section {
        margin-bottom: 1.5rem;
    }

    .recently-played-card {
        width: 120px;
    }

    .recently-played-info {
        padding: 0.5rem;
    }

    .recently-played-name {
        font-size: 0.8rem;
    }

    .playlist-detail-view {
        padding: 1rem;
    }

    .detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .detail-cover {
        width: 180px;
        height: 180px;
    }

    .detail-name {
        font-size: 1.75rem;
    }

    .detail-buttons {
        justify-content: center;
    }
}

/* ===== LEGACY PLAYLIST PANEL (hidden) ===== */
.playlist-panel {
    display: none;
    position: fixed;
    top: 80px;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: linear-gradient(180deg, rgba(26, 26, 31, 0.98) 0%, rgba(15, 15, 18, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.playlist-panel.visible {
    transform: translateX(0);
}

.playlist-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.95) 0%, rgba(22, 22, 27, 0.95) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}

.playlist-panel-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.playlist-panel-title > span:first-child {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.playlist-panel-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.playlist-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.playlist-create-btn {
    background: var(--accent);
    border: none;
    border-radius: 20px;
    color: var(--bg-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.playlist-create-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.playlist-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-close:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.playlist-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 120px;
    scrollbar-width: none;
}

.playlist-content::-webkit-scrollbar {
    display: none;
}

.playlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    gap: 1.5rem;
    text-align: center;
    padding: 2rem;
}

.playlist-empty svg {
    opacity: 0.8;
    color: var(--accent);
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.3));
}

.playlist-hint {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.playlist-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Playlist Card */
.playlist-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem;
    background: rgba(30, 30, 36, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.playlist-card:hover {
    background: rgba(40, 40, 48, 0.8);
    border-color: rgba(245, 158, 11, 0.3);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.playlist-card-artwork {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.playlist-card-artwork.single {
    display: block;
}

.playlist-card-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.playlist-card-info {
    flex: 1;
    min-width: 0;
}

.playlist-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.playlist-card-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playlist-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.playlist-card:hover .playlist-card-actions {
    opacity: 1;
}

.playlist-card-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-card-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.playlist-card-btn.play-btn:hover {
    color: var(--accent);
}

/* Playlist Detail Panel */
.playlist-detail-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Green background for playlist detail - liquid glass effect */
.playlist-detail-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./green background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.playlist-detail-panel > * {
    position: relative;
    z-index: 1;
}

.playlist-detail-panel.visible {
    transform: translateX(0);
}

.playlist-detail-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent;
    border: none;
    padding: 0;
}

.playlist-detail-back {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.playlist-detail-back:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.playlist-detail-artwork {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.playlist-detail-artwork.single {
    display: block;
}

.playlist-detail-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-detail-info {
    flex: 1;
    min-width: 0;
    padding-top: 0.5rem;
}

.playlist-detail-name {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.playlist-detail-meta {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.playlist-detail-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.playlist-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.playlist-detail-btn.primary {
    background: var(--accent);
    border: none;
    color: var(--bg-dark);
}

.playlist-detail-btn.primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.playlist-detail-btn.secondary {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.playlist-detail-btn.secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}

.playlist-detail-btn.danger {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.playlist-detail-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #f87171;
}

.playlist-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    padding-bottom: 140px;
}

.playlist-songs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.playlist-songs-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.playlist-song-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.playlist-song-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.playlist-song-item:hover {
    background: var(--bg-card);
}

.playlist-song-item.playing {
    background: var(--accent-dim);
}

.playlist-song-number {
    font-size: 0.9rem;
    color: var(--text-muted);
    width: 1.75rem;
    text-align: center;
    font-weight: 500;
}

.playlist-song-item.playing .playlist-song-number {
    color: var(--accent);
}

.playlist-song-artwork {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.playlist-song-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-song-info {
    flex: 1;
    min-width: 0;
}

.playlist-song-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.playlist-song-item.playing .playlist-song-title {
    color: var(--accent);
}

.playlist-song-artist {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-song-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.playlist-song-item:hover .playlist-song-actions {
    opacity: 1;
}

.playlist-song-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-song-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.playlist-song-btn.remove:hover {
    color: #f87171;
}

.playlist-empty-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    text-align: center;
    gap: 1.5rem;
}

.playlist-empty-detail svg {
    opacity: 0.8;
    color: var(--accent);
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.3));
}

/* ===== PLAYLIST MODALS ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.visible {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal.visible .modal-content {
    transform: scale(1) translateY(0);
}

.modal-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.modal-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.modal-input {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font);
    transition: all 0.2s;
    margin-bottom: 1rem;
}

.modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.modal-input::placeholder {
    color: var(--text-muted);
}

.modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.btn-secondary {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.btn-secondary:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.btn-primary {
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    color: var(--bg-dark);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

/* Add to Playlist Modal */
.playlist-select-list {
    max-height: 280px;
    overflow-y: auto;
    margin: 1rem 0;
    scrollbar-width: none;
}

.playlist-select-list::-webkit-scrollbar {
    display: none;
}

.playlist-select-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.playlist-select-item:hover {
    background: var(--bg-elevated);
}

.playlist-select-artwork {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.playlist-select-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-select-info {
    flex: 1;
    min-width: 0;
}

.playlist-select-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.playlist-select-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.create-new-in-modal {
    width: 100%;
    padding: 1rem;
    background: transparent;
    border: 2px dashed var(--border-light);
    border-radius: 12px;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    margin-top: 0.5rem;
}

.create-new-in-modal:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}

/* Export Modal */
.export-modal {
    text-align: center;
}

.export-desc {
    margin-bottom: 1.5rem !important;
}

.export-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.export-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.export-option:hover {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    transform: translateX(4px);
}

.export-option svg {
    flex-shrink: 0;
}

.export-option span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font);
}

.modal-close-btn {
    width: 100%;
}

/* Share Playlist Modal */
.share-modal {
    max-width: 420px;
}

.share-playlist-name {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem !important;
    font-weight: 500;
}

.share-visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.share-visibility-badge.public {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.share-visibility-badge.private {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.share-visibility-badge svg {
    width: 14px;
    height: 14px;
}

.share-url-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.share-url-input {
    flex: 1;
    font-size: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font);
}

.btn-copy {
    padding: 0 1rem;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: var(--bg-dark);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-copy:hover {
    filter: brightness(1.1);
}

.share-section-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.share-social-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.share-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.share-social-btn:hover {
    background: var(--bg-elevated);
    transform: translateY(-1px);
}

.share-social-btn.twitter:hover {
    background: rgba(29, 161, 242, 0.15);
    border-color: #1da1f2;
    color: #1da1f2;
}

.share-social-btn.facebook:hover {
    background: rgba(24, 119, 242, 0.15);
    border-color: #1877f2;
    color: #1877f2;
}

.share-social-btn.whatsapp:hover {
    background: rgba(37, 211, 102, 0.15);
    border-color: #25d366;
    color: #25d366;
}

.share-social-btn.instagram:hover {
    background: linear-gradient(45deg, rgba(253,29,29,0.12), rgba(131,58,180,0.12));
    border-color: #c13584;
    color: #c13584;
}

.share-social-btn svg {
    flex-shrink: 0;
}

.share-native-btn-container {
    margin-bottom: 1rem;
}

.share-native-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .share-social-buttons {
        grid-template-columns: 1fr;
    }
}

/* Profile Username Row */
.profile-username-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.profile-username {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.profile-username.has-username {
    color: var(--accent);
}

.profile-username-edit {
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-username-edit:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Username Modal */
.username-modal {
    max-width: 400px;
    text-align: left;
}

.username-modal h3 {
    text-align: left;
}

.username-modal-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem !important;
    line-height: 1.5;
    text-align: left;
}

.username-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.2s;
}

.username-input-wrapper:focus-within {
    border-color: var(--accent);
}

.username-prefix {
    padding-left: 1rem;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    user-select: none;
}

.username-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1rem 1rem 1rem 0.25rem;
    font-size: 1rem;
    font-family: var(--font);
    color: var(--text-primary);
    outline: none;
    margin: 0;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
}

.username-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.username-input::placeholder {
    color: var(--text-muted);
}

.username-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0.25rem 0 !important;
    text-align: left;
}

.username-status {
    font-size: 0.85rem;
    min-height: 1.25rem;
    margin: 0.25rem 0 1.25rem 0 !important;
    transition: all 0.2s;
    text-align: left;
}

.username-status:empty {
    margin-bottom: 0.5rem !important;
}

.username-status.available {
    color: #22c55e;
}

.username-status.unavailable {
    color: #ef4444;
}

.username-status.checking {
    color: var(--text-muted);
}

.username-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.username-modal-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Public Profile View */
.public-profile-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.public-profile-view.visible {
    opacity: 1;
    visibility: visible;
}

.public-profile-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
}

/* Green background for profile view - liquid glass effect */
.public-profile-backdrop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./green background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.public-profile-container {
    position: relative;
    max-width: 800px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 2rem;
}

.public-profile-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.public-profile-close:hover {
    background: var(--bg-elevated);
}

.public-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0 2.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.public-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    margin-bottom: 1rem;
}

.public-profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.public-profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.public-profile-username {
    font-size: 1rem;
    color: var(--accent);
    margin: 0;
}

.public-profile-stats {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

.public-profile-playlists h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--text-primary);
}

.public-profile-playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
}

.public-profile-playlist-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.public-profile-playlist-card:hover {
    transform: translateY(-4px);
}

.public-profile-playlist-cover {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.public-profile-playlist-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-profile-playlist-play {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 40px;
    height: 40px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.public-profile-playlist-play svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    color: var(--bg-dark);
}

.public-profile-playlist-card:hover .public-profile-playlist-play {
    opacity: 1;
    transform: translateY(0);
}

.public-profile-playlist-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-profile-playlist-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.public-profile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--text-muted);
}

.public-profile-empty svg {
    opacity: 0.5;
}

@media (max-width: 600px) {
    .public-profile-view {
        padding: 0;
    }

    .public-profile-container {
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .public-profile-hero {
        padding-top: 3rem;
    }

    .public-profile-playlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Artwork Customization Modal */
.artwork-modal {
    text-align: center;
    max-width: 480px;
}

.artwork-desc {
    margin-bottom: 1.5rem !important;
}

.artwork-preview {
    width: 180px;
    height: 180px;
    margin: 0 auto 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-dark);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.artwork-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artwork-preview-placeholder {
    color: var(--text-muted);
}

.artwork-options {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.artwork-upload-btn,
.artwork-option-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.artwork-upload-btn:hover,
.artwork-option-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
}

.artwork-from-songs {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-bottom: 1rem;
}

.artwork-songs-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem !important;
}

.artwork-songs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.5rem;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.25rem;
    scrollbar-width: none;
}

.artwork-songs-grid::-webkit-scrollbar {
    display: none;
}

.artwork-song-option {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: transparent;
    padding: 0;
}

.artwork-song-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artwork-song-option:hover {
    border-color: var(--text-secondary);
    transform: scale(1.05);
}

.artwork-song-option.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Detail Cover Edit Overlay */
.detail-cover {
    cursor: pointer;
    position: relative;
}

.detail-cover-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 12px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
}

.detail-cover:hover .detail-cover-edit-overlay {
    opacity: 1;
}

/* Playlist Context Menu */
.playlist-context-menu {
    position: fixed;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: none;
}

.playlist-context-menu.visible {
    display: block;
}

.playlist-context-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
}

.playlist-context-item:hover {
    background: var(--bg-elevated);
}

.playlist-context-item.danger {
    color: #f87171;
}

.playlist-context-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.playlist-context-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

/* Playlist Toggle Button */
#playlistToggleBtn {
    position: relative;
}

.playlist-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--bg-dark);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.playlist-badge.visible {
    display: flex;
}

/* Song Card Actions */
.song-card-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 0.5rem;
}

.song-add-playlist {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-card:hover .song-add-playlist {
    opacity: 1;
}

.song-add-playlist:hover {
    background: var(--bg-elevated);
    color: var(--accent);
}

/* Playlist Panel Mobile */
@media (max-width: 768px) {
    .playlist-panel {
        top: 0;
        left: 0;
        width: 100%;
        border-left: none;
        border-radius: 0;
    }

    .playlist-detail-header {
        flex-wrap: wrap;
        padding: 1.5rem;
    }

    .playlist-detail-artwork {
        width: 100px;
        height: 100px;
    }

    .playlist-detail-name {
        font-size: 1.5rem;
    }

    .playlist-detail-buttons {
        width: 100%;
    }

    .playlist-detail-btn {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .playlist-detail-content {
        padding: 1rem 1.5rem;
    }

    .modal-content {
        width: 95%;
        padding: 1.5rem;
        border-radius: 16px;
    }
}

/* ============================================================
   Chart Detail View Template
   ============================================================ */

.chart-detail-view {
    padding: 2rem;
    background:
        radial-gradient(ellipse at top left, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, rgba(30, 30, 35, 0.9) 0%, rgba(18, 18, 22, 0.95) 100%);
    border-radius: 16px;
    margin: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: calc(100vh - 200px);
}

.chart-detail-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chart-detail-hero {
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-color);
}

/* Chart Cover/Badge */
.chart-detail-cover {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chart-detail-cover.india {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
}

.chart-detail-cover.global {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}

.chart-detail-cover.regional {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
}

.chart-detail-cover-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.chart-detail-cover-icon svg {
    width: 64px;
    height: 64px;
    opacity: 0.95;
}

.chart-detail-cover-badge {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Chart Info */
.chart-detail-info {
    flex: 1;
    min-width: 0;
}

.chart-detail-type {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.chart-detail-name {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.chart-detail-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.chart-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chart-detail-meta-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.chart-detail-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chart-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.chart-detail-btn.primary {
    background: var(--accent);
    border: none;
    color: var(--bg-dark);
}

.chart-detail-btn.primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.chart-detail-btn.secondary {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.chart-detail-btn.secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}

/* Chart Songs List */
.chart-detail-songs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chart-detail-songs-header {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 1rem;
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.chart-song-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.chart-song-item:hover {
    background: var(--bg-elevated);
}

.chart-song-item.playing {
    background: rgba(245, 158, 11, 0.1);
}

.chart-song-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-secondary);
    min-width: 50px;
}

.chart-song-rank-number {
    width: 28px;
    text-align: center;
}

.chart-song-change {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 32px;
}

.chart-song-change.up {
    color: #22c55e;
}

.chart-song-change.down {
    color: #ef4444;
}

.chart-song-change.new {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.65rem;
}

.chart-song-change.same {
    color: var(--text-muted);
}

.chart-song-change svg {
    width: 12px;
    height: 12px;
}

.chart-song-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.chart-song-artwork {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.chart-song-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chart-song-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-song-placeholder::after {
    content: '♪';
    font-size: 1.25rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.chart-song-item.no-video {
    opacity: 0.7;
}

.chart-song-item.no-video:hover {
    opacity: 1;
}

.chart-song-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chart-song-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.chart-song-item.playing .chart-song-title {
    color: var(--accent);
}

.chart-song-artist {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-song-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-song-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.chart-song-item:hover .chart-song-action-btn {
    opacity: 1;
}

.chart-song-action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.chart-song-action-btn.liked {
    color: var(--accent);
    opacity: 1;
}

/* Back Button */
.chart-detail-back {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-bottom: 1rem;
}

.chart-detail-back:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .chart-detail-view {
        padding: 1rem;
        margin: 0.5rem;
    }

    .chart-detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .chart-detail-cover {
        width: 160px;
        height: 160px;
    }

    .chart-detail-cover-icon svg {
        width: 48px;
        height: 48px;
    }

    .chart-detail-cover-badge {
        font-size: 1.25rem;
    }

    .chart-detail-name {
        font-size: 1.75rem;
    }

    .chart-detail-meta {
        justify-content: center;
        flex-wrap: wrap;
    }

    .chart-detail-buttons {
        justify-content: center;
    }

    .chart-detail-btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    .chart-song-item {
        grid-template-columns: 40px 1fr auto;
        padding: 0.6rem 0.75rem;
    }

    .chart-song-rank {
        min-width: 40px;
    }

    .chart-song-artwork {
        width: 40px;
        height: 40px;
    }

    .chart-song-action-btn {
        opacity: 1;
    }
}