body {
    background-color: #1a2733;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.player-container { background-color: #243447; padding: 20px; border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); text-align: center; width: 90%; max-width: 380px; height: 90%; max-height: 700px; display: flex; flex-direction: column; justify-content: space-between; }
.station-logo { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #1da1f2; margin: 0 auto; flex-shrink: 0; object-fit: cover; transition: opacity 0.5s ease-in-out; }
.info-container { width: 100%; padding: 10px 0; }

.info-box {
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 10px;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.label { font-size: 0.7em; font-weight: bold; color: #8899a6; text-align: left; margin-bottom: 4px; }
#song-title-text, #message-text { font-size: 1.1em; color: #ffffff; margin: 0; text-align: left; font-weight: bold; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
#message-text { font-weight: normal; color: #e1e8ed; }
.text-fade-out { opacity: 0; transform: translateY(5px); }
.visualizer-wrapper { padding: 5px 0; }
.visualizer-container { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vu-channel { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
.vu-label { font-weight: bold; font-size: 0.9em; color: #8899a6; width: 15px; }
.visualizer-container canvas { background-color: #11181f; border-radius: 5px; border: 1px solid #334455; flex-grow: 1; }
.scale-container { display: flex; justify-content: space-between; padding: 2px 5%; margin-left: 23px; }
.scale-mark { font-size: 0.6em; color: #8899a6; transform: translateX(-50%); }
.controls { padding-top: 10px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
#play-pause-btn { position: relative; width: 60px; height: 60px; border: none; border-radius: 50%; background-color: #1da1f2; cursor: pointer; transition: background-color 0.2s, transform 0.1s; flex-shrink: 0; }
#play-pause-btn img { width: 50%; height: 50%; filter: invert(1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; }
#play-pause-btn.play-btn .icon-play { display: block; }
#play-pause-btn.pause-btn .icon-pause { display: block; }
#play-pause-btn.buffering .icon-buffering { display: block; animation: spin 1.5s linear infinite; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
#play-pause-btn:active { transform: scale(0.95); }
.volume-control { display: flex; align-items: center; justify-content: center; width: 100%; gap: 10px; }
.mute-btn { background: none; border: none; cursor: pointer; padding: 5px; line-height: 0; }
.mute-btn img { width: 24px; height: 24px; filter: invert(85%); transition: filter 0.2s; }
.mute-btn:hover img { filter: invert(100%); }
#volume-slider { width: 60%; accent-color: #1da1f2; }
#volume-percentage { width: 45px; font-size: 0.9em; color: #aab8c2; }
.menu-toggle-btn { position: absolute; top: 20px; left: 20px; z-index: 1001; background: none; border: none; cursor: pointer; padding: 5px; }
.menu-toggle-btn img { vertical-align: middle; filter: invert(1); }
.side-nav { position: fixed; top: 0; left: 0; width: 250px; height: 100%; background-color: #1a2733; box-shadow: 2px 0 10px rgba(0,0,0,0.5); transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 1000; padding-top: 0; }
.side-nav.open { transform: translateX(0); }
.side-nav.gesturing { transition: none; }
.side-nav-header { padding: 20px; text-align: center; border-bottom: 1px solid #243447; }
.side-nav-header img { width: 80px; height: 80px; border-radius: 50%; }
.side-nav ul { list-style: none; padding: 0; margin: 0; }
.side-nav ul li a { display: flex; align-items: center; gap: 15px; padding: 15px 20px; color: #fff; text-decoration: none; font-size: 1.1em; border-bottom: 1px solid #243447; }
.side-nav ul li a img { width: 24px; height: 24px; filter: invert(1); }
.side-nav ul li a:hover { background-color: #243447; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; z-index: 999; }
.overlay.active { opacity: 1; pointer-events: all; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
.modal.show { display: flex; }
.modal-content { background-color: #243447; color: #fff; margin: auto; padding: 20px; border: 1px solid #8899a6; border-radius: 10px; width: 80%; max-width: 400px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.modal-content h2 { margin-top: 0; color: #1da1f2; }
.modal-content ul { list-style-type: disc; padding-left: 20px; }
.close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; padding: 5px; line-height: 0; }
.close-btn img { width: 28px; height: 28px; filter: invert(75%); }
.close-btn:hover img { filter: invert(100%); }