
.player-volume { position:relative;flex-shrink:0; }
.volume-toggle,.volume-mute { display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:10px;color:var(--green);background:var(--white);cursor:pointer; }
.volume-toggle:hover,.volume-mute:hover { background:var(--paper); }
.volume-toggle:focus-visible,.volume-mute:focus-visible { outline:2px solid var(--green);outline-offset:2px; }
.volume-panel { position:absolute;right:0;bottom:calc(100% + 14px);width:240px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);box-shadow:0 12px 40px #10203c24;cursor:default;z-index:20; }
.volume-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px; }
.volume-value { font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums; }
.volume-controls { display:flex;align-items:center;gap:12px;margin-top:14px; }
.volume-controls input { width:100%;min-width:0;accent-color:var(--green);cursor:pointer; }
@media(max-width:600px){
 .player-inner.has-volume { display:grid;grid-template-columns:28px 40px 28px 36px minmax(0,1fr) 28px;gap:6px; }
 .player-inner.has-volume.has-appearance-settings { grid-template-columns:28px 40px 28px 36px minmax(0,1fr) minmax(0,1fr) 28px;gap:6px; }
 .player-inner.has-volume .player-content { grid-column:1/-1;grid-row:1;margin-left:0; }
 .player-inner.has-volume #previous { grid-column:1;grid-row:2; }
 .player-inner.has-volume #play { grid-column:2;grid-row:2; }
 .player-inner.has-volume #next { grid-column:3;grid-row:2; }
 .player-inner.has-volume .player-volume { grid-column:4;grid-row:2; }
 .player-inner.has-volume .player-settings-button:not(.reading-appearance-button) { grid-column:5;grid-row:2; }
 .player-inner.has-volume .reading-appearance-button { grid-column:6;grid-row:2; }
 .player-inner.has-volume #close-player { grid-column:6;grid-row:2;width:28px;height:28px;margin:0; }
 .player-inner.has-volume.has-appearance-settings #close-player { grid-column:7; }
 .player-inner.has-volume .player-settings-button { font-size:11px;padding:8px 4px; }
 .volume-toggle { width:34px;height:36px; }
 .volume-panel { right:auto;left:-90px;width:224px; }
}
