body {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background: #1e1e1e;
    color: #f0f0f0;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

#player-container {
    max-width: 30em;
    margin: 1.2em auto;
    background: #222;
    color: #f8f8f8;
    padding: 1.2em 1.2em .6em 1.2em;
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.35);
}

#player-container h3 {
    margin-bottom: .3em;
}

ul {
    list-style: none;
    padding: 0;
    max-width: 30em;
    margin: 1em auto;
    text-align: left;
}

li {
    cursor: pointer;
    padding: 7px 8px;
    border-bottom: 1px solid #444;
    transition: background 0.25s ease, color 0.25s ease;
}
li:hover {
    background: #555;
}
.playing {
    background: #006fff45;
    font-weight: bold;
    border-left: 4px solid #3399ff;
    padding-left: 6px;
}

audio {
    width: 100%;
    margin-top: 12px;
    filter: brightness(0.95);
}

#volume-container {
    display: flex;
    align-items: center;
    margin-top: .6em;
    gap: .7em;
    opacity: .9;
}
#volume {
    width: 100%;
}
#volume:hover {
    opacity: 1;
}

select {
    background: #333;
    color: #f8f8f8;
    border: 1px solid #666;
    padding: .45em .6em;
    border-radius: 6px;
    margin-top: .8em;
    font-size: 1em;
}
select:hover {
    border-color: #999;
}

@media (prefers-color-scheme: light) {
    body {
        background: #fafafa;
        color: #111;
    }
    #player-container {
        background: #ffffff;
        color: #111;
        border: 1px solid #ddd;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    li {
        border-bottom: 1px solid #ccc;
    }
    li:hover {
        background: #e6e6e6;
    }
    .playing {
        background: #cce6ff;
        border-left: 4px solid #007be6;
    }
    audio {
        filter: brightness(1);
    }
    select {
        background: #f4f4f4;
        color: #111;
        border-color: #bbb;
    }
}
#page-footer {
    margin-top: 1.5em;
    padding: 1em 0;
    color: #bbb;
    font-size: 0.9em;
    text-align: center;
}
#page-footer .inner {
    max-width: 30em;
    margin: 0 auto;
    padding: 0 1em;
}
#page-footer a {
    display: inline-block;
    background: #444;
    color: #f0f0f0;
    text-decoration: none;
    padding: .3em .6em;
    margin: .2em;
    border-radius: .2em;
    transition: background 0.2s ease;
    border: 1px solid rgba(255,255,255,0.03);
}
#page-footer a:hover { background: #555; color: #fff; }

@media (prefers-color-scheme: light) {
    #page-footer { color: #666; }
    #page-footer a { background: #eee; color: #111; border-color: rgba(0,0,0,0.04); }
    #page-footer a:hover { background: #ddd; }
}
#last-plays-box.fade-out {
    opacity: 0;
    transition: opacity .25s ease;
}
#last-plays-box.fade-in {
    opacity: 1;
    transition: opacity .25s ease;
}