.spw-outer{display:flex;justify-content:center;width:100%}
.spw{--spw-accent:#1db954;--spw-track:rgba(255,255,255,.25);--spw-ctrl:#fff;--spw-bar-bg:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));width:100%;max-width:100%;box-sizing:border-box}
.spw *{box-sizing:border-box}

.spw-box{position:relative;overflow:hidden;width:100%;background:#000;border-radius:12px}
.spw-type-spotify{height:352px;background:#121212}
.spw-type-video{aspect-ratio:16/9}
.spw-type-audio{background:#181818;color:#fff}
.spw-box iframe,.spw-type-video video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.spw-type-video video{object-fit:contain;background:#000}
.spw-box:fullscreen{aspect-ratio:auto;border-radius:0}

/* Placeholder */
.spw-placeholder{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#111;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .3s ease}
.spw-placeholder::before{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,.35);transition:background-color .3s}
.spw-placeholder.is-hidden{opacity:0;pointer-events:none}
.spw-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:64px;line-height:1;color:#1db954;transition:transform .25s ease,color .25s,background-color .25s}
.spw-icon-btn i{line-height:1}
.spw-icon-btn svg{width:1em;height:1em;fill:currentColor}
.spw-placeholder:hover .spw-icon-btn{transform:scale(1.1)}

/* Custom controls */
.spw-ui{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 16px 12px;background:var(--spw-bar-bg);color:var(--spw-ctrl);transition:opacity .25s ease}
.spw-head{position:absolute;top:0;left:0;right:0;z-index:2;padding:14px 16px 26px;background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,0));color:#fff;transition:opacity .25s ease;pointer-events:none}
.spw-type-video.is-playing .spw-ui,.spw-type-video.is-playing .spw-head{opacity:0}
.spw-type-video.is-playing:hover .spw-ui,.spw-type-video.is-playing:hover .spw-head,.spw-type-video.is-playing .spw-ui:focus-within{opacity:1}

.spw .spw-btn,.spw .spw-btn:hover,.spw .spw-btn:focus,.spw .spw-btn:active{background:none;border:0;box-shadow:none;outline-offset:2px;padding:4px;margin:0;min-width:0;color:var(--spw-ctrl);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:4px}
.spw-btn svg{width:22px;height:22px;fill:currentColor;display:block}
.spw-btn .i-pause,.spw-btn .i-muted{display:none}
.is-playing .spw-play .i-play{display:none}
.is-playing .spw-play .i-pause{display:block}
.is-muted .spw-mute .i-vol{display:none}
.is-muted .spw-mute .i-muted{display:block}

.spw-bar{position:relative;flex:1;height:5px;border-radius:3px;background:var(--spw-track);cursor:pointer;touch-action:none}
.spw-bar::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.spw-fill{height:100%;width:0;border-radius:3px;background:var(--spw-accent);pointer-events:none}
.spw-time{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--spw-ctrl)}

/* Text */
.spw-title{font-size:16px;font-weight:600;line-height:1.3;color:#fff}
.spw-subtitle{font-size:13px;line-height:1.3;color:rgba(255,255,255,.7)}

/* Audio card */
.spw-audio{display:flex;align-items:center;gap:16px;padding:16px;height:100%}
.spw-cover{flex:0 0 96px;width:96px;height:96px;border-radius:8px;background-color:#282828;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6)}
.spw-cover svg{width:40px;height:40px;fill:currentColor}
.spw-info{flex:1;min-width:0}
.spw-audio .spw-ui{position:static;background:none;padding:10px 0 0}
.spw-audio audio{width:100%;margin-top:8px}
.spw-audio audio[hidden]{display:none}

/* Spotify CTA (shown after preview ends) */
.spw-cta{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity .3s ease}
.spw-cta.is-visible{opacity:1;pointer-events:auto}
.spw-cta-inner{max-width:320px;display:flex;flex-direction:column;align-items:center;gap:6px}
.spw-cta-icon{font-size:48px;line-height:1;color:#1db954;margin-bottom:6px}
.spw-cta-icon i{line-height:1}
.spw-cta-icon svg{width:1em;height:1em;fill:currentColor}
.spw-cta-title{font-size:16px;font-weight:600;color:#fff;line-height:1.3}
.spw-cta-desc{font-size:13px;color:rgba(255,255,255,.75);line-height:1.4;margin-bottom:6px}
.spw-cta-btn,.spw-cta-btn:hover,.spw-cta-btn:focus,.spw-cta-btn:visited{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:10px 22px;border-radius:999px;background:#1db954;color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .2s}
.spw-cta-btn:hover{background:#1ed760;transform:scale(1.03)}
.spw-cta-btn-disabled{background:#555;cursor:not-allowed;opacity:.7}

.spw-notice{padding:20px;border:1px dashed #999;border-radius:8px;text-align:center;font-size:14px;color:#666;background:#f7f7f7}

@media (max-width:480px){
	.spw-cover{flex-basis:72px;width:72px;height:72px}
	.spw-audio{gap:12px;padding:12px}
}