.rsf-player {
    --rsf-accent: #7c5cff;
    --rsf-bg: #111426;
    position: fixed !important;
    z-index: 1000001;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 68px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px clamp(16px, 4vw, 56px) calc(10px + env(safe-area-inset-bottom));
    color: #fff;
    background: var(--rsf-bg);
    box-shadow: 0 -10px 38px rgba(5, 8, 24, .2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font: 14px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rsf-player::before { content: ""; position: absolute; top: -6px; right: 0; left: 0; height: 6px; background: var(--rsf-bg); pointer-events: none; }
.rsf-player *, .rsf-player *::before, .rsf-player *::after { box-sizing: border-box; }
.rsf-player audio { display: none; }
.rsf-play {
    flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
    border: 0; border-radius: 50%; color: #111426; background: var(--rsf-accent);
    cursor: pointer; transition: transform .18s ease, filter .18s ease;
}
.rsf-play:hover { transform: scale(1.06); filter: brightness(1.1); }
.rsf-play:focus-visible, .rsf-volume-wrap input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rsf-play svg { width: 22px; height: 22px; fill: currentColor; }
.rsf-icon-pause, .rsf-player.is-playing .rsf-icon-play { display: none; }
.rsf-player.is-playing .rsf-icon-pause { display: block; }
.rsf-station { min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.rsf-station strong { overflow: hidden; color: #fff; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.rsf-live { display: flex; align-items: center; gap: 6px; color: var(--rsf-accent); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.rsf-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.rsf-status { min-width: 0; flex: 1; overflow: hidden; color: rgba(255,255,255,.58); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rsf-player.is-playing .rsf-status { color: rgba(255,255,255,.82); }
.rsf-volume-wrap { display: flex; align-items: center; gap: 10px; width: 148px; }
.rsf-volume-wrap svg { flex: 0 0 19px; width: 19px; height: 19px; fill: rgba(255,255,255,.78); }
.rsf-volume-wrap input { width: 100%; height: 4px; accent-color: var(--rsf-accent); cursor: pointer; }
.rsf-equalizer { display: flex; align-items: center; gap: 3px; height: 22px; margin-left: 4px; opacity: .4; }
.rsf-equalizer i { display: block; width: 3px; height: 6px; border-radius: 3px; background: var(--rsf-accent); }
.rsf-player.is-playing .rsf-equalizer { opacity: 1; }
.rsf-player.is-playing .rsf-equalizer i { animation: rsf-bounce .7s ease-in-out infinite alternate; }
.rsf-player.is-playing .rsf-equalizer i:nth-child(2) { animation-delay: -.45s; }
.rsf-player.is-playing .rsf-equalizer i:nth-child(3) { animation-delay: -.2s; }
.rsf-player.is-playing .rsf-equalizer i:nth-child(4) { animation-delay: -.55s; }
@keyframes rsf-bounce { to { height: 20px; } }

.rsf-autoplay-notice[hidden] { display: none !important; }
.rsf-autoplay-notice {
    position: fixed !important;
    z-index: 1000000;
    inset: 0 0 74px;
    display: grid;
    place-items: center;
    padding: 24px;
    margin: 0 !important;
    background: rgba(8, 10, 22, .62);
    font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}
.rsf-notice-card {
    width: min(100%, 420px);
    padding: 28px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    background: #171a2d;
    color: #fff;
    text-align: center;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.rsf-notice-card h2 { margin: 0 0 10px; color: #fff; font-size: 22px; line-height: 1.25; }
.rsf-notice-card p { margin: 0 0 20px; color: rgba(255,255,255,.82); }
.rsf-notice-card button {
    min-width: 110px;
    padding: 11px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--rsf-accent, #7c5cff);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.rsf-notice-card button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

body { padding-bottom: 74px !important; }
@media (max-width: 600px) {
    .rsf-autoplay-notice { inset: 0 0 70px; padding: 16px; }
    .rsf-notice-card { padding: 24px 20px; }
    .rsf-player { min-height: 64px; gap: 12px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
    .rsf-play { flex-basis: 44px; width: 44px; height: 44px; }
    .rsf-station { min-width: 0; flex: 1; }
    .rsf-station strong { max-width: 42vw; font-size: 14px; }
    .rsf-status, .rsf-equalizer { display: none; }
    .rsf-volume-wrap { width: clamp(70px, 25vw, 110px); gap: 6px; }
    .rsf-volume-wrap svg { flex-basis: 17px; width: 17px; height: 17px; }
    body { padding-bottom: 70px !important; }
}
@media (prefers-reduced-motion: reduce) { .rsf-player *, .rsf-player *::before, .rsf-player *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
