/* VeditX audio player: round play button, the clip's own waveform (played part lit), time, speed, download */
.vxp{--vxp-on:#9fc4ff;--vxp-off:rgba(220,230,255,.26);display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(220,230,255,.14);color:#fff}
.vxp-cover,.vxp-art{flex:none;width:48px;height:48px;border-radius:12px;background:#1a1d33 center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.vxp-play{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#0d1530;
  background:linear-gradient(140deg,#cfe0ff,#8fb4ff);box-shadow:0 6px 18px rgba(120,160,255,.35),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s,box-shadow .2s}
.vxp-play:hover{transform:scale(1.06)}.vxp-play:active{transform:scale(.96)}
.vxp-play svg{width:20px;height:20px}
.vxp.playing .vxp-play{box-shadow:0 0 0 5px rgba(143,180,255,.18),0 6px 18px rgba(120,160,255,.45)}
.vxp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.vxp-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.vxp-title b{font:650 13.5px var(--sans,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxp-title small{font-size:11.5px;color:#a9a6c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxp-wave{position:relative;display:flex;align-items:center;gap:2px;height:34px;cursor:pointer;touch-action:none;border-radius:6px}
.vxp-wave:focus-visible{outline:2px solid var(--vxp-on);outline-offset:3px}
.vxp-wave i{flex:1;min-width:1px;height:var(--h,40%);border-radius:2px;background:var(--vxp-off);transition:background .12s,height .4s ease}
.vxp-wave i.on{background:var(--vxp-on)}
.vxp:not(.real) .vxp-wave i{opacity:.65}
.vxp-wave:hover i:not(.on){background:rgba(220,230,255,.38)}
.vxp-time{flex:none;font:500 12px var(--sans,system-ui);color:#a9a6c4;font-variant-numeric:tabular-nums;white-space:nowrap}
.vxp-time b{color:#fff;font-weight:600}.vxp-time i{font-style:normal}
.vxp-rate,.vxp-dl{flex:none;height:32px;min-width:38px;padding:0 9px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(220,230,255,.18);
  background:rgba(255,255,255,.06);color:#e6e9ff;font:650 12px var(--sans,system-ui);cursor:pointer;text-decoration:none}
.vxp-rate:hover,.vxp-dl:hover{background:rgba(255,255,255,.14)}
.vxp-dl svg{width:16px;height:16px}
.vxp.bad .vxp-time b{color:#ffb3b3}
.vxp.compact{gap:8px;padding:6px 8px;border-radius:12px}
.vxp.compact .vxp-play{width:34px;height:34px}.vxp.compact .vxp-play svg{width:16px;height:16px}
.vxp.compact .vxp-wave{height:24px}.vxp.compact .vxp-rate{display:none}
@media(max-width:560px){.vxp{flex-wrap:wrap;gap:8px 10px}.vxp-main{flex-basis:calc(100% - 64px)}.vxp-time{margin-left:auto}.vxp.compact{flex-wrap:nowrap}.vxp.compact .vxp-main{flex-basis:auto}}
@media(prefers-reduced-motion:reduce){.vxp-wave i,.vxp-play{transition:none}}

/* where it sits */
.au-item .vxp{grid-column:3/4}
.ag-audio .vxp{flex:1;min-width:0}
.sg-player{margin:6px 0 2px}
.sc-lbaudio{width:min(640px,92vw)}.sc-lbaudio .vxp{padding:16px}
.ms-song.ms-song-vxp{display:block;padding:0;background:none;border:0}.ms-song-vxp .vxp-cover{width:56px;height:56px}
.au-item:not(.is-live):not(.is-bad){grid-template-columns:auto minmax(0,1fr) auto}
.au-item:not(.is-live):not(.is-bad) .vxp{grid-column:1/-1;grid-row:2}
.au-item .au-iact{grid-column:3;grid-row:1}
/* in a tight spot the player keeps what matters: play, wave, time, download */
.ag-audio,.sg-player,.au-item{container-type:inline-size}
@container (max-width:380px){.vxp .vxp-title,.vxp .vxp-rate{display:none}.vxp .vxp-time i{display:none}.vxp{gap:8px;padding:8px}}