/* player-controls.css - подключить ПЕРЕД другими CSS */
#player-controls {
    position: relative;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px;
    padding: 10px;
}

#player-controls #play-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f0f0f0, #888);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4), 
                inset 0 2px 4px rgba(255,255,255,0.8);
    border: 2px solid #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101 !important;
    position: relative;
}

#player-controls #volume-box,
#player-controls #onair-box {
    display: block;
    visibility: visible;
    opacity: 1;
}@media (min-width:901px){#player-controls #play-button{width:46px;height:34px;border-radius:10px;font-size:13px;}}

/* Quality selector — выбор битрейта */
.quality-selector {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}

.quality-btn {
    padding: 8px 14px;
    border: 1px solid rgba(120,160,220,.25);
    border-radius: 10px;
    background: rgba(20,30,45,.6);
    color: rgba(180,195,220,.7);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.quality-btn:hover {
    background: rgba(30,45,65,.8);
    color: rgba(220,235,255,.9);
    border-color: rgba(120,160,220,.4);
}

.quality-btn.active {
    background: rgba(61,168,255,.2);
    border-color: rgba(61,168,255,.5);
    color: #3da8ff;
    box-shadow: 0 0 10px rgba(61,168,255,.3);
}

/* Desktop: в шапке — компактнее */
@media (min-width:901px){
    .quality-selector{gap:4px;margin-left:8px;}
    .quality-btn{padding:6px 10px;font-size:12px;}
}