body { 
    background: radial-gradient(circle at top right, #1a1c24 0%, #050505 100%);
    color: #e0e0e0; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    display: flex; margin: 0; height: 100vh; overflow: hidden; position: relative;
}
#clock {
    position: absolute; top: 40px; right: 40px; font-size: 28px;
    font-weight: 300; color: #fff; letter-spacing: 1px; opacity: 0.8;
}
#player-zone { 
    width: 65%; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; text-align: center;
    position: relative; 
}
#disclaimer {
    position: absolute; bottom: 40px; left: 0; right: 0;
    font-size: 10px; font-weight: 300; color: #333;
    text-align: center; letter-spacing: 1px; text-transform: uppercase;
    pointer-events: none;
}
#sidebar { 
    width: 35%; background: rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 40px 20px; box-sizing: border-box; overflow-y: auto; 
}
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-track { background: #050505; }
#sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* Главный заголовок */
.main-title {
    font-weight: 300; letter-spacing: 2px; color: #888;
    margin: 0 0 30px 10px; text-transform: uppercase; font-size: 18px;
}
/* Стиль для числа в скобках */
.main-title span { opacity: 0.4; font-size: 14px; margin-left: 5px; }

.section-label {
    font-weight: 300; letter-spacing: 2px; color: #d12020;
    margin: 30px 0 15px 10px; text-transform: uppercase; font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px;
}
.station-item { 
    padding: 20px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.05); 
    border-radius: 2px; cursor: pointer; outline: none;
    transition: all 0.3s ease; border-left: 4px solid transparent; font-size: 20px;
}
.station-item:focus {
    background: rgba(255, 255, 255, 0.15); border-left: 4px solid #555; transform: translateX(5px);
}
.station-item.active { 
    background: rgba(255, 255, 255, 0.1); border-left: 4px solid #d12020; 
    color: #fff; transform: translateX(10px);
}
#logo-container {
    position: relative; width: 350px; height: 350px; background: #000;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    margin-bottom: 30px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
}
#logo { max-width: 80%; max-height: 80%; object-fit: contain; transition: opacity 0.3s; }
#logo.paused { opacity: 0.2; }
#stop-icon {
    position: absolute; display: none; width: 80px; height: 80px;
    border: 4px solid #fff; border-radius: 50%; opacity: 0.8;
}
#stop-icon::before {
    content: ''; position: absolute; top: 25px; left: 25px;
    width: 30px; height: 30px; background: #fff;
}
#current-name { font-size: 32px; font-weight: 300; margin: 0; color: #fff; }
#current-station { 
    font-size: 13px; font-weight: 300; color: #fff; opacity: 0.4;
    margin-top: 8px; text-transform: uppercase; letter-spacing: 2px;
}
#status { color: #d12020; font-size: 14px; margin-top: 15px; text-transform: uppercase; letter-spacing: 2px; }