.zdv-radio-launcher {
    position: fixed;
    right: 112px;
    bottom: 22px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(74, 198, 255, .38);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(8, 22, 38, .96), rgba(14, 16, 36, .96));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .44), 0 0 26px rgba(74, 198, 255, .10);
    font-weight: 900;
}

.zdv-radio-launcher svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #55c7ff;
    stroke-width: 1.8;
}

.zdv-radio-panel {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 1300;
    width: min(390px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid rgba(74, 198, 255, .24);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(420px 220px at 100% 0, rgba(0, 168, 255, .10), transparent 66%),
        radial-gradient(360px 220px at 0 100%, rgba(255, 112, 0, .08), transparent 68%),
        rgba(7, 12, 23, .975);
    box-shadow: 0 28px 86px rgba(0, 0, 0, .56), 0 0 40px rgba(56, 160, 255, .06);
    backdrop-filter: blur(18px);
    transform: translateY(18px);
    opacity: 0;
    visibility: hidden;
    transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
}

.zdv-radio-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.zdv-radio-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 38px;
}

.zdv-radio-heading strong {
    display: block;
    margin-top: 3px;
    color: #dce7f3;
    font-size: .88rem;
    font-weight: 800;
}

.zdv-radio-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 13px;
    border: 1px solid rgba(74, 198, 255, .24);
    background: rgba(74, 198, 255, .08);
}

.zdv-radio-mark svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #55c7ff;
    stroke-width: 1.8;
}

.zdv-radio-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 18px 0;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
}

.zdv-radio-modes button {
    min-height: 37px;
    border: 0;
    border-radius: 9px;
    color: #8d99aa;
    background: transparent;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zdv-radio-modes button.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 155, 255, .18), rgba(255, 122, 0, .12));
    box-shadow: inset 0 0 0 1px rgba(89, 196, 255, .14);
}

.zdv-radio-view[hidden] {
    display: none !important;
}

.zdv-radio-now {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 15px;
    background: rgba(255, 255, 255, .028);
}

.zdv-radio-track-copy {
    min-width: 0;
}

.zdv-radio-track-copy small {
    display: block;
    margin-bottom: 2px;
    color: #55c7ff;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zdv-radio-track-copy h2 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zdv-radio-track-copy p {
    margin: 2px 0 0;
    color: #98a5b7;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zdv-radio-count {
    color: #7c8798;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.zdv-radio-eq {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(0, 168, 255, .13), rgba(255, 118, 0, .08));
}

.zdv-radio-eq i {
    width: 3px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(#55c7ff, #ff9b32);
    transform-origin: center;
}

.zdv-radio-panel.is-playing .zdv-radio-eq i:nth-child(1) { animation: zdv-eq .72s ease-in-out infinite alternate; }
.zdv-radio-panel.is-playing .zdv-radio-eq i:nth-child(2) { animation: zdv-eq .52s ease-in-out .08s infinite alternate; }
.zdv-radio-panel.is-playing .zdv-radio-eq i:nth-child(3) { animation: zdv-eq .66s ease-in-out .16s infinite alternate; }
.zdv-radio-panel.is-playing .zdv-radio-eq i:nth-child(4) { animation: zdv-eq .48s ease-in-out .04s infinite alternate; }
.zdv-radio-panel.is-playing .zdv-radio-eq i:nth-child(5) { animation: zdv-eq .76s ease-in-out .12s infinite alternate; }

@keyframes zdv-eq {
    from { transform: scaleY(.55); opacity: .65; }
    to { transform: scaleY(2.5); opacity: 1; }
}

.zdv-radio-progress-wrap {
    margin-top: 17px;
}

.zdv-radio-progress,
.zdv-radio-volume input {
    width: 100%;
    accent-color: #ff9100;
}

.zdv-radio-progress {
    display: block;
}

.zdv-radio-time {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    color: #7f8999;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.zdv-radio-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin-top: 11px;
}

.zdv-radio-controls button {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    color: #dce6f1;
    background: rgba(255, 255, 255, .035);
}

.zdv-radio-controls button:hover {
    border-color: rgba(85, 199, 255, .3);
    background: rgba(85, 199, 255, .07);
}

.zdv-radio-controls .zdv-radio-play {
    width: 54px;
    height: 54px;
    border-color: rgba(255, 145, 0, .42);
    color: #111722;
    background: linear-gradient(135deg, #ffbd3e, #ff8500);
    box-shadow: 0 0 28px rgba(255, 133, 0, .18);
}

.zdv-radio-controls svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zdv-radio-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.zdv-radio-options button {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    color: #9eabbc;
    background: rgba(255, 255, 255, .025);
    font-size: .75rem;
    font-weight: 800;
}

.zdv-radio-options button[aria-pressed="true"] {
    color: #fff;
    border-color: rgba(85, 199, 255, .28);
    background: rgba(85, 199, 255, .075);
}

.zdv-radio-options svg,
.zdv-radio-volume svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.zdv-radio-volume {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: #7f8ca0;
}

.zdv-radio-status {
    margin: 13px 0 0;
    color: #7f8b9e;
    font-size: .72rem;
    text-align: center;
}

.zdv-radio-live-orb {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    margin: 14px auto 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 72, 86, .2);
    background: radial-gradient(circle, rgba(255, 72, 86, .14), transparent 68%);
}

.zdv-radio-live-orb span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff4658;
    box-shadow: 0 0 26px rgba(255, 70, 88, .65);
}

.zdv-radio-view[data-radio-view="live"] {
    text-align: center;
    padding: 8px 8px 5px;
}

.zdv-radio-view[data-radio-view="live"] h2 {
    margin: 8px 0 8px;
    font-size: 1.42rem;
    font-weight: 900;
}

.zdv-radio-view[data-radio-view="live"] p {
    color: #8f9bad;
    font-size: .84rem;
    line-height: 1.58;
}

.zdv-radio-live-status {
    display: inline-flex;
    margin-top: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 72, 86, .2);
    border-radius: 999px;
    color: #ff8d98;
    background: rgba(255, 72, 86, .06);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
}

@media (max-width: 767.98px) {
    .zdv-radio-launcher {
        right: 88px;
        bottom: 16px;
        min-height: 46px;
        padding-inline: 13px;
    }

    .zdv-radio-launcher span {
        display: none;
    }

    .zdv-radio-panel {
        right: 12px;
        bottom: 74px;
        width: calc(100vw - 24px);
        padding: 18px;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zdv-radio-panel.is-playing .zdv-radio-eq i {
        animation: none !important;
    }
}

@media (max-width:767.98px) {
    .zdv-radio-launcher { left: max(12px, env(safe-area-inset-left)); right: auto; bottom: max(14px, env(safe-area-inset-bottom)); min-width: 48px; }
    .zdv-ai-launcher { right: max(12px, env(safe-area-inset-right)); left: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
    .zdv-radio-panel { left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-height: min(76vh, 650px); overflow:auto; }
    .zdv-radio-volume { display:none; }
}
@media (max-width:390px) {
    .zdv-radio-launcher { max-width:48px; overflow:hidden; }
    .zdv-radio-launcher span { display:none; }
    .zdv-ai-launcher span { display:none; }
}