:root {
    --gold: #c5a059;
    --bg-dark: #121212;
    --sidebar-bg: #1e1e1e;
    --accent-green: #27ae60;
}

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: radial-gradient(circle at center, #1a2a33 0%, #0a0a0a 100%);
    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png'), 
                      linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));
    color: white;
    height: 100vh;
    overflow: hidden;
}

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

/* Sidebar */
.sidebar {
    width: 320px;
    background: var(--sidebar-bg);
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
}

.logo-area { padding: 25px; text-align: center; }
.top-logo { width: 50px; border: 2px solid var(--gold); padding: 5px; border-radius: 5px; }
.title { font-size: 1rem; color: var(--accent-green); margin-top: 10px; }
.title span { color: white; }

.search-box { padding: 0 15px 15px; }
#searchInput {
    width: 100%; background: #2a2a2a; border: 1px solid #444;
    padding: 10px; border-radius: 4px; color: #ccc; outline: none;
}

.station-list { flex: 1; overflow-y: auto; padding: 10px; }
.station-item {
    background: #252525; padding: 15px; margin-bottom: 8px;
    border-radius: 8px; cursor: pointer; transition: 0.3s;
    border: 1px solid #333; display: flex; justify-content: space-between;
}
.station-item:hover { border-color: var(--gold); background: #2d2d2d; }
.station-item.active { border-left: 4px solid var(--accent-green); background: #2a2a2a; }

.station-info h4 { margin: 0; font-size: 0.9rem; color: #efefef; }
.station-info p { margin: 5px 0 0; font-size: 0.7rem; color: #888; }
.station-icon { color: var(--gold); opacity: 0.7; font-size: 1.2rem; }

/* Main Player Area */
.content-area {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; position: relative;
}

.filter-wrapper { position: absolute; top: 30px; left: 30px; }
.filter-wrapper label { display: block; color: var(--gold); font-size: 0.8rem; margin-bottom: 5px; }
#categoryFilter {
    background: #1e1e1e; color: white; border: 1px solid #444;
    padding: 8px 12px; border-radius: 4px; width: 180px;
}

.player-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    padding: 50px; border-radius: 20px; text-align: center;
    width: 350px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.wave-visual { display: flex; justify-content: center; gap: 5px; height: 40px; margin-bottom: 20px; }
.wave-visual span { width: 4px; background: var(--accent-green); animation: pulse 1s infinite ease-in-out; animation-play-state: paused; }
.playing .wave-visual span { animation-play-state: running; }

@keyframes pulse { 0%, 100% { height: 10px; } 50% { height: 40px; } }

.play-btn {
    width: 80px; height: 80px; border-radius: 50%; border: none;
    background: var(--accent-green); color: white; font-size: 2rem;
    cursor: pointer; margin: 25px 0; transition: 0.3s;
}
.play-btn:hover { transform: scale(1.05); filter: brightness(1.1); }

.volume-box { display: flex; align-items: center; gap: 10px; justify-content: center; opacity: 0.7; }


@media screen and (max-width: 768px) {
    body, html {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important; 
    }

    .container {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        justify-content: flex-start !important; 
    }

   
    .sidebar {
        width: 100% !important;
        flex: 1 1 auto !important; 
        overflow-y: auto !important; 
        min-height: 0; 
        background: #1a1a1a;
    }

    
    .content-area {
        width: 100% !important;
        background: #111;
        padding: 0 !important; 
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex-shrink: 0 !important; 
    }

    
    .filter-wrapper {
        width: 100% !important;
        padding: 8px 0 !important; 
        margin: 0 !important;
        background: #111;
        text-align: center;
        border-top: 1px solid #333;
    }

    #categoryFilter {
        width: 130px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        margin: 0 auto !important;
    }

    
    .player-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 10px !important; 
        margin: 0 !important;
        background: #181818 !important;
        border-radius: 15px 15px 0 0 !important; 
        border: none;
        border-top: 2px solid var(--gold);
    }

    
    .wave-visual { height: 12px !important; margin-bottom: 2px !important; }
    #currentName { font-size: 0.85rem !important; margin: 0 !important; }
    #currentCategory { font-size: 0.6rem !important; margin-bottom: 5px !important; }

    .play-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
        margin: 5px 0 !important;
    }

    .volume-box {
        margin-bottom: 8px !important;
        gap: 5px !important;
    }
    #volumeSlider { width: 85px !important; }
}