:root {
        /* Default Light Mode */
        --p-primary: #6200ee;
        --p-bg: #ffffff;
        --p-text: #212529;
        --p-text-muted: #6c757d;
        --p-shadow: rgba(0, 0, 0, 0.15);
        --p-gradient: linear-gradient(135deg, #7c4dff 0%, #651fff 100%);
        --p-playlist-bg: #f8f9fa;
        --p-border: #e9ecef;
        --p-hover: rgba(0,0,0,0.05);
        --p-active-bg: rgba(98, 0, 238, 0.1);
        --p-progress-bg: #e9ecef;
        --p-btn-shadow: rgba(98, 0, 238, 0.4);
    }

    body.dark-mode {
        /* Dark Mode Overrides */
        --p-primary: #bb86fc;
        --p-bg: #1e1e1e;
        --p-text: #e0e0e0;
        --p-text-muted: #a0a0a0;
        --p-shadow: rgba(0, 0, 0, 0.5);
        --p-gradient: linear-gradient(135deg, #bb86fc 0%, #3700b3 100%);
        --p-playlist-bg: #121212;
        --p-border: #333;
        --p-hover: rgba(255,255,255,0.05);
        --p-active-bg: rgba(187, 134, 252, 0.1);
        --p-progress-bg: #444;
        --p-btn-shadow: rgba(187, 134, 252, 0.4);
    }

    #app {
        max-width: 600px;
        margin: 20px 0;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    .player-card {
        background: var(--p-bg);
        border-radius: 20px;
        box-shadow: 0 10px 30px var(--p-shadow);
        overflow: hidden;
        transition: all 0.3s ease;
        color: var(--p-text);
    }

    /* Header & Info */
    .track-info {
        padding: 2rem 1rem 1rem;
        text-align: center;
    }

    .track-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--p-text);
        margin-bottom: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .track-artist {
        font-size: 0.9rem;
        color: var(--p-text-muted);
    }

    /* Progress Bar */
    .progress-area {
        padding: 0 2rem;
        margin-bottom: 1.5rem;
    }

    .time-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: var(--p-text-muted);
        margin-bottom: 0.5rem;
        font-variant-numeric: tabular-nums;
    }

    .progress-wrapper {
        height: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .progress-container {
        height: 6px;
        width: 100%;
        background-color: var(--p-progress-bg);
        border-radius: 3px;
        position: relative;
        transition: height 0.2s ease;
    }

    .progress-wrapper:hover .progress-container {
        height: 8px;
    }

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

    .progress-thumb {
        width: 12px;
        height: 12px;
        background: #fff;
        border: 2px solid var(--p-primary);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        opacity: 0;
        transition: opacity 0.2s;
    }

    .progress-wrapper:hover .progress-thumb {
        opacity: 1;
    }

    /* Controls */
    .controls-area {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 1.5rem;
    }

    .btn-control {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--p-text);
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none !important;
    }

    .btn-control:hover {
        color: var(--p-primary);
        transform: scale(1.1);
    }

    .btn-control:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

    .btn-control.sm {
        font-size: 1rem;
        width: 30px;
        height: 30px;
        color: var(--p-text-muted);
    }

    .btn-control.md {
        font-size: 1.5rem;
        width: 50px;
        height: 50px;
    }

    .btn-control.lg {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--p-gradient);
        color: white;
        box-shadow: 0 4px 15px var(--p-btn-shadow);
        font-size: 1.5rem;
        margin: 0 1rem;
    }

    .btn-control.lg:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px var(--p-btn-shadow);
        color: white;
    }

    /* Playlist */
    .playlist-area {
        max-height: 600px;
        overflow-y: auto;
        border-top: 1px solid var(--p-border);
        background-color: var(--p-playlist-bg);
    }

    .playlist-item {
        padding: 1rem 1.5rem;
        border: none;
        border-bottom: 1px solid var(--p-border);
        background: transparent;
        cursor: pointer;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--p-text);
    }

    .playlist-item:hover {
        background-color: var(--p-hover);
    }

    .playlist-item.active {
        background-color: var(--p-active-bg);
        color: var(--p-primary);
        font-weight: 600;
        border-left: 4px solid var(--p-primary);
    }

    .song-index {
        font-size: 0.8rem;
        color: var(--p-text-muted);
        width: 25px;
        display: inline-block;
    }

    .playlist-item.active .song-index {
        color: var(--p-primary);
    }

    .playing-indicator {
        font-size: 0.8rem;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 0.5; }
        50% { opacity: 1; }
        100% { opacity: 0.5; }
    }



    /* Mobile Optimizations */
    @media (max-width: 576px) {
        .player-card {
            border-radius: 0;
            box-shadow: none;
        }
        .progress-area {
            padding: 0 1.5rem;
        }
        .controls-area {
            padding-bottom: 1rem;
        }
        .btn-control.lg {
            width: 56px;
            height: 56px;
            font-size: 1.2rem;
        }
    }

    .player-card .audio-status { padding: 0 2rem 1rem; margin: 0; color: var(--p-text-muted); font-size: 0.9rem; }
    .playlist-item:focus-visible, .progress-wrapper:focus-visible, .btn-control:focus-visible { outline: 2px solid var(--p-primary) !important; outline-offset: 2px; }
    .progress-wrapper { touch-action: none; }
    .playlist-item[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }