.playback-options{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.playback-option{min-height:38px;padding:0 10px 0 12px;border:1px solid var(--border);border-radius:20px;background:var(--surface);display:flex;align-items:center;gap:8px;font-weight:500}
.playback-option:hover{background:var(--hover)}
.playback-option svg{width:19px;height:19px}
.playback-option>i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--border);transition:background .18s}
.playback-option>i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #0005;transition:transform .18s}
.playback-option[aria-pressed="true"]{border-color:#065fd466;background:#dbeafe;color:#065fd4}
.playback-option[aria-pressed="true"]>i{background:#065fd4}
.playback-option[aria-pressed="true"]>i:after{transform:translateX(14px);background:#fff}
.playback-option:focus-visible{outline:2px solid #065fd4;outline-offset:2px}
@media(max-width:700px){.playback-options{margin:10px 12px 0;justify-content:stretch}.playback-option{flex:1;justify-content:center;padding-left:9px;padding-right:9px}.playback-option>span{white-space:nowrap}}
.subscribe:disabled{cursor:wait;opacity:.55}.subscribe.active{background:var(--hover);color:var(--text)}.subscribe.active:before{content:"✓";margin-right:6px;font-weight:700}
.subscription-notice{position:fixed;z-index:520;left:50%;bottom:28px;width:min(620px,calc(100vw - 32px));min-height:54px;padding:10px 12px 10px 16px;border-radius:10px;background:#242424;color:#fff;box-shadow:0 8px 30px #0006;display:flex;align-items:center;justify-content:space-between;gap:18px;opacity:0;transform:translate(-50%,14px);transition:opacity .2s,transform .2s}.subscription-notice[hidden]{display:none}.subscription-notice.visible{opacity:1;transform:translate(-50%,0)}.subscription-notice>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subscription-notice>div{display:flex;align-items:center;gap:4px;flex:none}.subscription-notice a,.subscription-notice button{padding:9px 10px;border-radius:7px;background:transparent;color:#7db3ff;font-weight:700;white-space:nowrap}.subscription-notice a:hover,.subscription-notice button:hover,.subscription-notice a:focus-visible,.subscription-notice button:focus-visible{background:#ffffff18;outline:0}
@media(max-width:700px){.subscription-notice{bottom:calc(18px + env(safe-area-inset-bottom));align-items:flex-start;flex-direction:column;gap:5px}.subscription-notice>span{width:100%}.subscription-notice>div{margin-left:-10px}}
@media(prefers-reduced-motion:reduce){.subscription-notice{transition:none}}
