:root {
    /* --- Primary Brand Colors --- */
    --dap-bg: #f0ebe3;          /* Page Gradient Start */
    --dap-heading: #7c2d12;     /* Rich Maroon */
    --dap-btn-bg: #7c2d12;      /* Rich Maroon */
    --dap-btn-text: #fef3c7;    /* Gold Text (on maroon) */
    --dap-btn-hover-bg: #9a3412;/* Maroon Hover */
    --dap-btn-hover-text: #ffffff;
    --dap-accent: #b8860b;      /* Antique Gold */
    --dap-accent-light: #d4a843;/* Gold Light */

    /* --- Surface & Backgrounds --- */
    --dap-surface: #faf7f2;     /* App Card / Parchment */
    --dap-input: #ffffff;      /* White / Input BG */
    --dap-border: #e7e0d6;      /* Warm Border */
    --dap-border-hover: #d6d0c6; /* Border Hover */
    --dap-highlight: #f5f5f4;   /* Stone Light (Hover) */

    /* --- Typography & State --- */
    --dap-text-primary: #44403c; /* Primary Text */
    --dap-text-muted: #a8a29e;   /* Secondary / Muted */
    --dap-error: #dc2626;        /* Stop / Error Red */
    --dap-success: #16a34a;      /* Copied Green */

    /* --- Custom Shadows --- */
    --dap-shadow-app: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 6px rgba(0,0,0,0.02), 0 24px 48px rgba(0,0,0,0.08);
    --dap-shadow-button: 0 2px 8px rgba(124, 45, 18, 0.3);
}

/* --- Dark Mode Overrides --- */
.dark-mode :root, 
[data-theme="dark"] :root {
    --dap-bg: #12100e;           /* Dark Page Gradient */
    --dap-surface: #1c1917;      /* Dark Card / Parchment */
    --dap-input: #292524;        /* Dark Surface */
    --dap-highlight: #33302e;    /* Dark Surface Hover */
    --dap-border: #3a3530;       /* Dark Border */
    --dap-text-primary: #e7e5e4; /* Dark Primary Text */
    --dap-text-muted: #d6d3d1;   /* Dark Muted Text */
}

/* 1. FORCE BURMESE UNICODE RENDERING */
.dap-player-container, 
.dap-track-name, 
.dap-item-title,
.dap-item-sub {
    font-family: 'Pyidaungsu', 'Padauk', 'Noto Sans Myanmar', sans-serif !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* 2. CONTAINER */
.dap-player-container {
    background-color: #fff;
    border: 1px solid var(--dap-border);
    border-radius: 8px;
    padding: 25px;
    max-width: 800px;
    margin: 30px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    box-sizing: border-box; 
    width: 100%;
}

.dap-playlist-title {
    color: var(--dap-heading);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--dap-border);
    padding-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

/* 3. MAIN PLAYER RESTRUCTURE */
.dap-player-main {
    display: flex !important;
    flex-direction: column !important; /* Forces vertical stacking */
    gap: 15px;
    margin-bottom: 20px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--dap-border);
    width: 100%;
    max-width: 100%;
    min-width: 0; /* Prevents flexbox blowout */
    box-sizing: border-box;
    overflow: hidden; 
}

/* Top Row: Scrolling Marquee Title */
.dap-title-wrapper {
    width: 100%;
    min-width: 0; /* Prevents text from pushing boundaries */
    text-align: center;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--dap-border);
}
.dap-track-name-scroll {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
.dap-track-name {
    display: inline-block;
    font-weight: 700;
    color: var(--dap-heading);
    font-size: 1.15rem;
    padding-left: 100%; 
    animation: dap-marquee 20s linear infinite; 
}
.dap-track-name-scroll:hover .dap-track-name {
    animation-play-state: paused; 
}
.dap-track-extended-meta {
    font-size: 0.85rem;
    color: var(--dap-text-muted);
    margin-top: 5px;
}

@keyframes dap-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Middle Row: Controls & Actions */
.dap-player-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    min-width: 0;
}
.dap-controls {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    justify-content: center;
    flex: 1; 
}
.dap-player-container .dap-controls button {
    background-color: var(--dap-btn-bg);
    color: var(--dap-btn-text) !important; 
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.dap-player-container .dap-controls button:hover {
    background-color: var(--dap-btn-hover-bg);
    transform: translateY(-2px);
}
.dap-download-wrapper {
    flex-shrink: 0;
}
.dap-download-btn {
    color: var(--dap-heading);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid var(--dap-heading);
    padding: 6px 16px;
    border-radius: 50px;
    transition: all 0.2s;
    font-size: 0.8rem;
    white-space: nowrap; 
}
.dap-download-btn:hover {
    background-color: var(--dap-heading);
    color: #fff;
}

/* Bottom Row: Progress Bar */
.dap-progress-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-width: 0;
}
.dap-progress-container {
    flex-grow: 1;
    min-width: 0; 
    display: flex;
    align-items: center;
}
.dap-time {
    font-size: 0.85rem;
    color: var(--dap-text-muted);
    flex-shrink: 0;
    min-width: 75px; 
    text-align: right;
}

/* 4. SLIDER STYLING */
.dap-player-container input[type="range"].dap-seek-slider {
    -webkit-appearance: none !important; 
    width: 100% !important; 
    height: 6px !important;
    background: #e0e0e0 !important; 
    border-radius: 5px !important; 
    margin: 0 !important;
}
.dap-player-container input[type="range"].dap-seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important; 
    height: 14px !important; 
    width: 14px !important; 
    border-radius: 50% !important; 
    background: var(--dap-accent) !important; 
    cursor: pointer !important;
    border: 2px solid #fff !important; 
}

/* 5. PLAYLIST & COVER */
.dap-playlist-scroll { max-height: 350px; overflow-y: auto; border-top: 1px solid var(--dap-border); }
.dap-playlist-list { list-style: none; padding: 0; margin: 0; }
.dap-track-item {
    padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
    display: flex; align-items: center; transition: background 0.2s;
}
.dap-track-item.active { background-color: var(--dap-highlight); border-left: 4px solid var(--dap-accent); font-weight: 700; }
.dap-cover-container {
    flex-shrink: 0; width: 80px; height: 80px; margin: 0;
    border-radius: 6px; overflow: hidden; background-color: #eee;
    display: flex; align-items: center; justify-content: center;
}
.dap-cover-image { width: 100%; height: 100%; object-fit: cover; }

/* 6. MOBILE VIEW REFINEMENTS */
@media (max-width: 600px) {
    .dap-player-controls-row { 
        flex-direction: column; 
        text-align: center; 
        gap: 20px;
    }
    .dap-cover-container { margin: 0 auto; }
    .dap-download-wrapper { width: 100%; }
    .dap-download-btn { display: block; text-align: center; }
}

/* 7. VISUALIZER STYLING */
.dap-visualizer {
    width: 100%;
    height: 50px;
    display: block;
    border-radius: 4px;
    background-color: transparent; /* Blends into your #f9f9f9 background */
}